강좌

|  다양한 분야에 다소 전문적인 도움이 되는 강좌들입니다.

2019.03.02 02:59

간단한 JS강의 #1

조회 수 253 추천 수 1 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form

이 강좌는 필자가 자바스크립트를 배울때 어려움을 느꼈던 부분을 찝어주기 위해서, (그냥 일기입니다) 만들었습니다.

프로그래밍 완전초보를 위해 작성된 글이오니 다른 언어를 경험해보신 분들께는 설명이 살짝 장황할수 있습니다.

강좌 대상은 html/css 를 배워보신 분들 기준으로 합니다.


#1강의


1. 기초 설명

누가 만들었고 어디에서 쓰고 그런거 다 구글에 나와있으니 알아서 찾아보세요.

쓰면 좋아요. 뭐가 좋냐구요? 웹 브라우저를 동적으로 만들수 있다...이건 옛날 얘기고 Node로 백엔드부터 React, Vue 등등 다양한 라이브러리와 프레임워크를 사용해서 자신만에 블로그나 커뮤니티를 제작할수 있습니다.



2. 본격 Vanilla JavaScript 강의

Vanilla JavaScript란 어느 라이브러리와 프레임워크도 사용하지 않은 순수 못생긴(?) 자바스크립트입니다.

오늘 배울 강좌는, 딱 이 두가지입니다. 모든 프로그래밍 언어중 가장 기초이며, 중요하죠.

- 숫자와 문자

- 변수



3. 숫자와 문자

잠시 사족을 붙히자면, 영어를 배울때 기본적인 인삿말부터 암기합니다.

저희도 그렇게 해볼껍니다.

아직은 이해하려고 하지 마시고, 그냥 외우세요 ^^


console.log("콘솔에 메세지를 출력합니다");

alert("알럿창을 출력합니다");


자바스크립트랑 인사하는 두가지 방법입니다.

console.log("출력할 메세지") / alert("알럿창에 출력할 메세지") 이런식으로 생각하시면 되겠네요.

console.log를 찍어보면, 크롬 브라우저 기준으로 검사>Console 들어가시면 아까 타이핑했던 글귀가 찍혀있는걸 보실겁니다.

alert는 경고창을 출력해줍니다.


앗차, 모든 프로그래밍 언어는 뒤에 세미콜론을 반드시 붙여야 합니다. (;)

사실 자바스크립트는 안붙히고 줄바꿈으로 표현하기도 하는데, 그냥 붙히는게 좋으니 그냥 알아두세요.


기본적인 인삿말을 알았으니 이제 계산을 시켜볼까요?

자바스크립트는 간단한 계산들이 가능합니다.

더하기는 +, 빼기는 -, 곱셈은 *, 나누기는 / 로 표현합니다.

그럼 한번 만들어볼까요?

(// 표시가 되어있는건 주석입니다. 자바스크립트에서 해석하지 않는 코드죠. 그냥 자신이 나중에 코드 유지보수할때 좋습니다.)

(html로 따지면 <!--주석-->입니다.)


alert(1+1); // 2를 출력합니다.

alert(3-1); // 2를 출력합니다.

alert(3*3); // 9를 출력합니다.

alert(4/2); // 2를 출력합니다.


간단한 사칙연산, 쉽죠?

alert 대신 console.log를 하면 크롬 콘솔에 찍힙니다. 참고하세요.



4. 변수 (ES6 문법을 사용합니다. ES6가 뭔지 모르신다면 그냥 따라 배우시면 됩니다. 최신버전이거등요)

가장 중요한 겁니다. 변수.

쉽게 생각하자면 이게 이거다라고 자신이 직접 지정한다고 보면 됩니다.

예를 들자면, 도토리묵은 바보다라는걸 변수로 표현하면 어떻게 될까요?

자바스크립트로는 

const dotorimuk = "바보";

이런식으로 출력합니다. 

숫자형을 적을때는 그냥 "" 나 ''를 적으실 필요가 없이, 숫자만 적으면 됩니다.

문자형을 적을때는 반드시 "" 나 ''를 적으셔야 합니다. "로 시작했으면 당연히 "로 끝나야 하고, '로 시작했으면 '로 끝나야합니다.


위에 const dotorimuk = "바보"; 를 선언했다면, 앞으로 dotorimuk을 선언할시 자바스크립트는 dotorimuk을 바보로 인식합니다.

예를 볼까요?


const dotorimuk = "바보"; // dotorimuk = 바보다라는걸 지정해줌

alert(dotorimuk) // 알럿창에 dotorimuk이라는 변수를 선언함. 즉 dotorimuk이 나오는게 아닌, 바보가 나오게 됩니다.


변수를 선언할때는 숫자형처럼 ''나 ""를 붙이면 안됩니다.

만약 ""나 ''를 붙인다면, 바보가 아닌 dotorimuk이라는 문자가 출력되어버리거든요.




5. 퀴즈

const studyforus = "천재";

alert("studyforus");


위 alert에서 어떤 문자가 출력될까요?

여기까지 이해가 되셨다면 참 잘했어요!

  • ?
    title: 은메달도다 2019.03.03 13:37
    다음 강의땐 const 와 let 차이, var 와는 무슨 차이가 있는지도 적어주시면 좋을거 같아요!
  • profile
    도토리묵 2019.03.04 03:36
    넹 ^^

강좌

다양한 분야에 다소 전문적인 도움이 되는 강좌들입니다.

List of Articles
번호 게시판 제목 글쓴이 날짜 조회 수
공지 호스팅 신청이 다시 가능합니다. 15 마스터 2019.04.18 794
공지 회원 전용 페이지가 생겼습니다. 15 file 마스터 2018.03.20 6642
222 Pr의 웹디자인 가이드 웹디자인 第三강 <head> 上 1 file PRASEOD- 2019.05.03 126
221 강좌 [2019 고1] 통합사회_ 내멋대로 정리 끝 {협스} 16 협스 2019.04.26 248
220 네모의 코딩 팁 0. Git 명령어 (작성중) 6 네모 2019.04.26 195
219 강좌 [제르엘의 인문사회 산책] 세계사 맛보기 강의. 오리엔트 문명과 진시황 5 file title: 애프터 이펙트제르엘 2019.04.10 204
218 강좌 [제르엘의 인문사회 산책] 0. OT 7 file title: 애프터 이펙트제르엘 2019.04.04 223
217 Pr의 웹디자인 가이드 웹디자인 第二강 html5로 구조 짜보기 6 file PRASEOD- 2019.03.25 196
216 라이츄 과학츄 23. 완충용액이츄 2 file title: 커피허니버터뚠뚜니라이츄 2019.03.24 258
215 강좌 간단한 JS 강의 #2 2 도토리묵 2019.03.20 169
214 Pr의 웹디자인 가이드 웹디자인 第一강 홈페이지는 어떻게 만드는건가 2 PRASEOD- 2019.03.19 184
» 강좌 간단한 JS강의 #1 2 도토리묵 2019.03.02 253
212 라이츄 과학츄 22. 혈액입니츄 1 file title: 커피허니버터뚠뚜니라이츄 2019.02.05 322
211 강좌 [아미나] Basic Youtube Title Widget 1.0에서 처음에 엑박으로 뜨는 경우의 해결책 3 file 이니스프리 2018.12.15 308
210 강좌 아미나의 회원 이미지와 관련하여 x2 3 file 이니스프리 2018.12.10 245
209 라이츄 과학츄 21. 혈액형입니츄 12 file title: 커피허니버터뚠뚜니라이츄 2018.12.08 555
208 강좌 현행 저작권법 제30조(사적이용을 위한 복제)에 대하여 - 음원 다운로더의 처벌과 관련하여 6 이니스프리 2018.12.07 364
207 강좌 그누보드/아미나에서 게시글의 날짜를 최종수정일로 변경하고, 목록스킨 및 위젯을 최종수정일 순으로 정렬하기 2 file 이니스프리 2018.11.11 1990
206 강좌 [스페인어 강좌] CH1) 스페인어란? 1 file 도토리묵 2018.10.12 307
205 강좌 리뉴얼된 구글 뉴스에서 RSS 피드를 생성하는 방법 3 file 이니스프리 2018.10.07 717
204 라이츄 과학츄 20. 알레르기츄 3 file title: 커피허니버터뚠뚜니라이츄 2018.10.03 397
203 강좌 아실분들은 아실 미디어위키 웹호스팅상에서의 시각편집기 설치방법(게시판 이동) 3 file 퓨처마츠 2018.10.03 342
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 12 Next
/ 12
서버에 요청 중입니다. 잠시만 기다려 주십시오...