26
JavaScript 1일차 1.1 JavaScript 소개

Jisu kim java script study 01

Embed Size (px)

Citation preview

Page 1: Jisu kim   java script study 01

JavaScript 1일차

1.1 JavaScript 소개

Page 2: Jisu kim   java script study 01

JavaScript ?

● 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해 고안됨

● ECMAScript라는 표준안이 있으며 'Ecma International'에서 관리중

● 예전엔 주로 웹에서만 쓰였으나 지금은 게임, 서버 스크립트,

Mobile App 등 다양한 분야에서 쓰이고 있다.

● Java와는 다르다!

Page 3: Jisu kim   java script study 01

JavaScript 1일차

1.2 JavaScript 실행

Page 4: Jisu kim   java script study 01

JavaScript 실행 방법들...

● HTML문서에 JS 삽입

● 웹브라우저의 개발도구

● Node.JS REPL환경

Page 5: Jisu kim   java script study 01

HTML문서에 JS 삽입

● 에디터는 Notepad++혹은 Sublime Text를 추천

● 아래와 같이 <script></script>사이에 JavaScript를

작성하면 된다.

Page 6: Jisu kim   java script study 01

웹브라우저의 개발도구

● IE

– F12, 콘솔탭

● Chrome

– Ctrl + Shift + J

● Firefox

– Ctrl + Shift + K

Page 7: Jisu kim   java script study 01

Node.JS REPL환경

● https://nodejs.org/ 에서 설치파일 다운로드 후 설치

● 명령 프롬포트에서 'node' 실행

Page 8: Jisu kim   java script study 01

JavaScript 1일차

1.3 상수

Page 9: Jisu kim   java script study 01

상수

● 의미가 변하지 않는 값을 의미한다.

● 리터럴 상수와 심볼릭 상수가 있다.

Page 10: Jisu kim   java script study 01

리터럴 상수

● 리터럴 상수는 이름이 없는 상수를 말한다.

– ex) 10, -1, 3.14, 'a', “abc”, true

● number

– 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자(number)로 인식한다.

– ex) -1, 10, 3.14

– 정수, 소수 구분이 없음

● String

– 큰따옴표나 작은따옴표가 붙은 문자는 문자(string)로 인식한다.

– ex) 'a', 'abc', “abc”

– 'a'와 “a”는 같다. 즉, char형은 없다.

Page 11: Jisu kim   java script study 01

심볼릭 상수

● 심볼릭 상수는 이름이 있는 상수를 말한다.

● 사용할 이름 앞에 'const'를 붙이고 초기화한다.

– ex) const name = 10;

– 초기화 해주지 않을 경우 undefined로 인식

Page 12: Jisu kim   java script study 01

JavaScript 1일차

1.4 변수

Page 13: Jisu kim   java script study 01

변수

● 값이 변할 수 있는 수를 말한다.

● 사용할 이름 앞에 'var'를 붙인다.

– 자료형을 따로 선언하지 않으며 초기화 되는 값이 그 변수의 자료형이 된다.

– ex) var name = 10;

Page 14: Jisu kim   java script study 01

JavaScript 1일차

1.5 주석

Page 15: Jisu kim   java script study 01

주석

● 주석은 작성한 코드의 가독성을 올리도록 메모하는 부분이며, 이 부분은 해석되지 않는다.

● 한 줄 주석

– ex) // 주석부분

● 여러 줄 주석

– ex) /*

여러 줄 주석

주석부분

*/

Page 16: Jisu kim   java script study 01

JavaScript 1일차

1.6 연산자

Page 17: Jisu kim   java script study 01

연산자

● C언어의 연산자와 대부분 같다. (그러므로 생략)

● ==

– 1 == 1 // true

– 1 == 2 // false

– 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.

● ===

– 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다.

– 1 == '1' // true

– 1 === '1' // false

● !=, !==

– ==, ===의 반대개념, 좌항과 우항의 값이 같이 않다면 true

Page 18: Jisu kim   java script study 01

연산자

● +

– string + number = string● 문자열 끝에 숫자를 붙여줌.

● ex) 'abc' + 1 = 'abc1'

● 참고하기 : http://msdn.microsoft.com/ko-kr/library/ie/ce57k8d5(v=vs.94).aspx

Page 19: Jisu kim   java script study 01

JavaScript 1일차

1.7 조건문

Page 20: Jisu kim   java script study 01

if

if(true){ console.log('true');}

Page 21: Jisu kim   java script study 01

else

if(true){ console.log('true');}else{ console.log('false');}

Page 22: Jisu kim   java script study 01

elseif

if(a == 1){ console.log('1');}else if(a == 2){ console.log('2');}else{ console.log('3');}

Page 23: Jisu kim   java script study 01

JavaScript 1일차

1.7 반복문

Page 24: Jisu kim   java script study 01

while

while(true){ console.log('loop');}

Page 25: Jisu kim   java script study 01

반복문 제어

● break– 반복문을 빠져나감

● continue– 현재 반복을 끝내고 다음 반복으로 넘어감

Page 26: Jisu kim   java script study 01

for

for(var i = 0; i < 10; i++){ console.log('num : ' + i);}