강좌

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

2019.03.02 02:59

간단한 JS강의 #1

조회 수 357 추천 수 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
번호 게시판 제목 글쓴이 날짜 조회 수
공지 [중요] IP 변경이 있습니다. 17 마스터 2019.09.20 168
공지 [중요] 고정 IP에 문제가 발생한 것 같습니다. 1 마스터 2019.09.20 113
공지 회원 전용 페이지가 생겼습니다. 15 file 마스터 2018.03.20 8607
227 강좌 파이썬 Pillow 라이브러리를 이용하여 이미지의 배경을 transparent하게 만들기 4 file 이니스프리 2019.08.04 121
226 강좌 나무위키의 서술 중 법률용어의 사용에 있어 바로잡아야 할 부분 file 이니스프리 2019.07.17 79
225 강좌 [유튜브] Youtube API를 이용하거나 또는 이용하지 않고 채널ID를 추출하는 방법 1 file 이니스프리 2019.07.16 110
224 라이츄 과학츄 24. 메탄올과 에탄올 듀오였츄 14 file title: 양귀비(관상용)왕뚠뚠돈까스라이츄 2019.07.07 227
223 강좌 Selenium에서 send_keys를 막아놓은 경우 해결책 이니스프리 2019.07.04 130
222 Pr의 웹디자인 가이드 웹디자인 第三강 <head> 上 1 file PRASEOD- 2019.05.03 298
221 강좌 [2019 고1] 통합사회_ 내멋대로 정리 끝 {협스} 16 협스 2019.04.26 554
220 네모의 코딩 팁 0. Git 명령어 (작성중) 6 네모 2019.04.26 464
219 강좌 [제르엘의 인문사회 산책] 세계사 맛보기 강의. 오리엔트 문명과 진시황 7 file title: 애프터 이펙트제르엘 2019.04.10 325
218 강좌 [제르엘의 인문사회 산책] 0. OT 7 file title: 애프터 이펙트제르엘 2019.04.04 295
217 Pr의 웹디자인 가이드 웹디자인 第二강 html5로 구조 짜보기 6 file PRASEOD- 2019.03.25 303
216 라이츄 과학츄 23. 완충용액이츄 2 file title: 양귀비(관상용)왕뚠뚠돈까스라이츄 2019.03.24 473
215 강좌 간단한 JS 강의 #2 2 도토리묵 2019.03.20 253
214 Pr의 웹디자인 가이드 웹디자인 第一강 홈페이지는 어떻게 만드는건가 3 PRASEOD- 2019.03.19 382
» 강좌 간단한 JS강의 #1 2 도토리묵 2019.03.02 357
212 라이츄 과학츄 22. 혈액입니츄 1 file title: 양귀비(관상용)왕뚠뚠돈까스라이츄 2019.02.05 478
211 강좌 [아미나] Basic Youtube Title Widget 1.0에서 처음에 엑박으로 뜨는 경우의 해결책 3 file 이니스프리 2018.12.15 381
210 강좌 아미나의 회원 이미지와 관련하여 x2 3 file 이니스프리 2018.12.10 330
209 라이츄 과학츄 21. 혈액형입니츄 12 file title: 양귀비(관상용)왕뚠뚠돈까스라이츄 2018.12.08 676
208 강좌 현행 저작권법 제30조(사적이용을 위한 복제)에 대하여 - 음원 다운로더의 처벌과 관련하여 6 이니스프리 2018.12.07 516
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 12 Next
/ 12
서버에 요청 중입니다. 잠시만 기다려 주십시오...