강좌

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

2019.03.02 02:59

간단한 JS강의 #1

조회 수 62 추천 수 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에서 어떤 문자가 출력될까요?

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

Who's 도토리묵

profile

개인블로그: https://kirimochi.ga
 
간단한 서버세팅부터 서버튜닝&관리&유지보수까지 책임져드립니다. 연락은 쪽지로!

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

강좌

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

List of Articles
번호 게시판 제목 글쓴이 날짜 조회 수
공지 구글 로그인 문제가 있던 부분을 해결하였습니다. 7 마스터 2019.03.13 176
공지 당분간 호스팅 신청을 받지 않습니다. 20 마스터 2019.02.27 554
공지 회원 전용 페이지가 생겼습니다. 15 file 마스터 2018.03.20 5618
» 강좌 간단한 JS강의 #1 2 도토리묵 2019.03.02 62
212 라이츄 과학츄 22. 혈액입니츄 1 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2019.02.05 132
211 강좌 [아미나] Basic Youtube Title Widget 1.0에서 처음에 엑박으로 뜨는 경우의 해결책 3 file 이니스프리 2018.12.15 155
210 강좌 아미나의 회원 이미지와 관련하여 x2 3 file 이니스프리 2018.12.10 113
209 라이츄 과학츄 21. 혈액형입니츄 12 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.12.08 318
208 강좌 현행 저작권법 제30조(사적이용을 위한 복제)에 대하여 - 음원 다운로더의 처벌과 관련하여 6 이니스프리 2018.12.07 204
207 강좌 그누보드/아미나에서 게시글의 날짜를 최종수정일로 변경하고, 목록스킨 및 위젯을 최종수정일 순으로 정렬하기 2 file 이니스프리 2018.11.11 1806
206 강좌 [스페인어 강좌] CH1) 스페인어란? 1 file 도토리묵 2018.10.12 152
205 강좌 리뉴얼된 구글 뉴스에서 RSS 피드를 생성하는 방법 3 file 이니스프리 2018.10.07 384
204 라이츄 과학츄 20. 알레르기츄 3 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.10.03 228
203 강좌 아실분들은 아실 미디어위키 웹호스팅상에서의 시각편집기 설치방법(게시판 이동) 3 file 퓨처마츠 2018.10.03 182
202 강좌 [ASP.NET Core를 이용한 웹사이트 만들기] 1. 시작하기 3 file 0x00000FF 2018.09.07 375
201 강좌 [ASP.NET Core를 이용한 웹사이트 만들기] OT. ASP.NET Core란 무엇인가?, 작업 환경 구성 5 0x00000FF 2018.09.06 325
200 라이츄 과학츄 19. 카리킨에 대해 알아보시츄 9 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.08.26 317
199 라이츄 과학츄 18. C3, C4, CAM이츄 3 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.07.22 378
198 라이츄 과학츄 17. 형질전환입니츄-풀때기 3 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.07.03 318
197 Doge의 잡것 프로그래밍 4. 디스코드 봇을 시작해보자 file Doge아시다시피 2018.05.08 2278
196 강좌 정말정말 기본적인 XE 위젯 반응형 적용하기 (라이믹스도 OK!) 7 file 망할윈도우미 2018.04.29 542
195 라이츄 과학츄 16. 형질전환입니츄-박테리아 3 file title: 하트뿅뿅 피카츄허니버터뚠뚜니라이츄 2018.04.15 603
194 강좌 DNS가 어떻게 작동하는지 알아봅시다: 2. 각 DNS 레코드의 기능 2 abnoeh 2018.03.30 416
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11
서버에 요청 중입니다. 잠시만 기다려 주십시오...