SlideShare a Scribd company logo
1 of 13
JavaScript
박 재 은
2015. 04. 29
1
< 코드아카데미 + 생활코딩 >
Contents
1. JavaScript?
2. Data Types
3. Comparisons
4. Variables
5. 조건문 – if
6. 반복문 - while
7. 반복문 – for
8. Function
9. Practice (1, 2)
2
1. JavaScript?
▶ 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어
 HTML이 한번 화면에 출력된 후에는
그 형태나 동작방법을 바꿀 수 없는 문제를 해결 !
▶ 웹 브라우저에서 사용할 수 있는 프로그래밍 언어
 웹의 중요함은 더욱 확대될 전망
웹에서 구동되는 언어인 JavaScript의 중요함도 점점 커질 것 !!
▶ 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용
 효용이 다각적이면서도 배우기 쉬움
중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어 !!!
3
2. Data Types
▶ Number : 코드 작성 시, 따옴표(큰, 작은)가 붙지 않은 숫자는 숫자로 인식
ex) 4 , 4+2, 3-1, 2*6, 12/4
▶ String : 코드 작성 시, "(큰 따옴표) 혹은 '(작은 따옴표)로 감싸야 함
ex) “hello world”, ‘hello world’, “1”, ‘jaeeun’s javascript’
“hello. n javascript”
“hello"+“world”, “hello world”.length
▶ Boolean : true 또는 false 중 하나의 값만 취함
ex) true, false, 10>1, 1<10
4
3. Comparisons
▶ 프로그래밍에서 비교란, 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분
=> 비교 연산자의 결과는 true나 false 중의 하나
true는 비교 결과가 참이라는 의미, false는 거짓이라는 뜻
(1) === : equal to
(2) !== : not equal to
(3) > : greater than
(4) < : less than
(5) >= : greater than or equal to
(6) <= : less than or equal to
5
4. Variables
▶ 변수는 (문자,숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용
var varname = data ; ex) var a = 1;
alert(a+1); // 2
▶ 변수의 효용 – 코드의 재 활용성
alert(100+10);
alert((100+10)/10);
alert(((100+10)/10)-10);
alert((((100+10)/10)-10)*10);
a = 100;
a = a + 10; alert(a);
a = a / 10; alert(a);
a = a - 10; alert(a);
a = a * 10; alert(a);
6
5. 조건문 - if
▶ 조건문이란 주어진 조건에 따라서 다르게 동작하도록 하는 것
if (false) {
alert(1);
} else if (false) {
alert(2);
} else if (true) {
alert(3);
} else {
alert(4);
} // 3
- 조건문은 if로 시작, if 뒤의 괄호에 조건이 옴
- if문의 조건이 true라면 if의 중괄호 구간이
실행되고, false라면 else 중괄호 구간이 실행
- else if는 다양한 케이스 조건을 검사할 수 있음
- else if의 특징은 여러개가 올 수 있다는 점
- else if의 모든 조건이 false라면 else가 실행
- else는 생략 가능
7
6. 반복문 – while
▶ 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법
while (true) {
반복해서 실행할 코드
}
“ 무한루프 발생!!!!”
var i = 0;
while (i < 5) {
console.log(“Hello”);
i++
}
Hello
Hello
Hello
Hello
Hello
8
7. 반복문 – for
▶ while과 for는 서로 대체 가능하기 때문에 상황에 따라 선택해서 사용 가능
for (초기화; 반복조건; 반복이 될 때마다 실행되는 코드) {
반복해서 실행될 코드
}
for (var i = 0; i < 5; i++) {
console.log(“Hello”);
}
Hello
Hello
Hello
Hello
Hello
9
8. Function
▶ 함수란 하나의 로직을 재실행 할 수 있도록 하는 것, 코드의 재사용성을 높여줌
function 함수명 ( ) {
코드
return 반환값
}
function numbering() {
i = 0;
while (i < 5) {
console.log(i);
i += 1;
}
}
numbering();
0
1
2
3
4
var 함수명 = function ( ) {
코드
return 반환값
}
10
8. Function
▶ 함수의 효용 – 재사용성
var i = 0;
while (i < 5) {
console.log(“Hello”);
i++
}
var i = 0;
while (i < 5) {
console.log(“Hello”);
i++
}
var i = 0;
while (i < 5) {
console.log(“Hello”);
i++
}
function numbering(){
var i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
numbering();
numbering();
numbering();
11
9. Practice (1) – “rock, paper, scissors game! ”
12
user : rock
computer : rock
"The result is a tie!"
13
9. Practice (2) – “ dragon slaying mini game! ”
◈ 이겼을 때
You hit the dragon
player slew the dragon
◈ 졌을 때
The dragon defeated you

More Related Content

What's hot

팩토리 메소드 패턴과 추상 팩토리 패턴
팩토리 메소드 패턴과 추상 팩토리 패턴팩토리 메소드 패턴과 추상 팩토리 패턴
팩토리 메소드 패턴과 추상 팩토리 패턴GeniusYG
 
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.Nasol Kim
 
7.읽기 쉽게 흐름제어 만들기
7.읽기 쉽게 흐름제어 만들기7.읽기 쉽게 흐름제어 만들기
7.읽기 쉽게 흐름제어 만들기GeniusYG
 
[Pl in c++] 11. chapter
[Pl in c++] 11. chapter[Pl in c++] 11. chapter
[Pl in c++] 11. chapterMinGeun Park
 
Windows Debugging Technique #3
Windows Debugging Technique #3Windows Debugging Technique #3
Windows Debugging Technique #3Wooseok Seo
 
Windows Debugging Technique #1
Windows Debugging Technique #1Windows Debugging Technique #1
Windows Debugging Technique #1Wooseok Seo
 
Windows Debugging Technique #2
Windows Debugging Technique #2Windows Debugging Technique #2
Windows Debugging Technique #2Wooseok Seo
 
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델Jaeho Seok
 
반복문과 선택문
반복문과 선택문반복문과 선택문
반복문과 선택문. Ruvendix
 
Doxygen 사용법
Doxygen 사용법Doxygen 사용법
Doxygen 사용법YoungSu Son
 
표준 입출력
표준 입출력표준 입출력
표준 입출력. Ruvendix
 
Tcpl 12장 파생클래스
Tcpl 12장 파생클래스Tcpl 12장 파생클래스
Tcpl 12장 파생클래스재정 이
 
델파이 윈도우 애플리케이션 개발 - 체크리스트
델파이 윈도우 애플리케이션 개발 - 체크리스트델파이 윈도우 애플리케이션 개발 - 체크리스트
델파이 윈도우 애플리케이션 개발 - 체크리스트Devgear
 
병렬 프로그래밍 패러다임
병렬 프로그래밍 패러다임병렬 프로그래밍 패러다임
병렬 프로그래밍 패러다임codenavy
 
20110806 mongodb ch8
20110806 mongodb ch820110806 mongodb ch8
20110806 mongodb ch8Seongahn Kim
 

What's hot (20)

팩토리 메소드 패턴과 추상 팩토리 패턴
팩토리 메소드 패턴과 추상 팩토리 패턴팩토리 메소드 패턴과 추상 팩토리 패턴
팩토리 메소드 패턴과 추상 팩토리 패턴
 
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
 
7.읽기 쉽게 흐름제어 만들기
7.읽기 쉽게 흐름제어 만들기7.읽기 쉽게 흐름제어 만들기
7.읽기 쉽게 흐름제어 만들기
 
동적할당
동적할당동적할당
동적할당
 
[Pl in c++] 11. chapter
[Pl in c++] 11. chapter[Pl in c++] 11. chapter
[Pl in c++] 11. chapter
 
Windows Debugging Technique #3
Windows Debugging Technique #3Windows Debugging Technique #3
Windows Debugging Technique #3
 
Windows Debugging Technique #1
Windows Debugging Technique #1Windows Debugging Technique #1
Windows Debugging Technique #1
 
Windows Debugging Technique #2
Windows Debugging Technique #2Windows Debugging Technique #2
Windows Debugging Technique #2
 
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델
[0731 석재호]윈도우즈 기반 게임을 위한 선형적 프로그래밍 모델
 
반복문과 선택문
반복문과 선택문반복문과 선택문
반복문과 선택문
 
Doxygen 사용법
Doxygen 사용법Doxygen 사용법
Doxygen 사용법
 
ES6-01
ES6-01ES6-01
ES6-01
 
Macro for Game
Macro for GameMacro for Game
Macro for Game
 
표준 입출력
표준 입출력표준 입출력
표준 입출력
 
Tcpl 12장 파생클래스
Tcpl 12장 파생클래스Tcpl 12장 파생클래스
Tcpl 12장 파생클래스
 
델파이 윈도우 애플리케이션 개발 - 체크리스트
델파이 윈도우 애플리케이션 개발 - 체크리스트델파이 윈도우 애플리케이션 개발 - 체크리스트
델파이 윈도우 애플리케이션 개발 - 체크리스트
 
Prettier 소개
Prettier 소개Prettier 소개
Prettier 소개
 
병렬 프로그래밍 패러다임
병렬 프로그래밍 패러다임병렬 프로그래밍 패러다임
병렬 프로그래밍 패러다임
 
Webpack&babel
Webpack&babelWebpack&babel
Webpack&babel
 
20110806 mongodb ch8
20110806 mongodb ch820110806 mongodb ch8
20110806 mongodb ch8
 

Viewers also liked

명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI우영 주
 
Deferred object
Deferred objectDeferred object
Deferred object항희 이
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Fabien Potencier
 
Optimize your eZ Publish with Varnish
Optimize your eZ Publish with VarnishOptimize your eZ Publish with Varnish
Optimize your eZ Publish with VarnishSébastien Morel
 
Event and signal driven programming
Event and signal driven programmingEvent and signal driven programming
Event and signal driven programmingElizabeth Smith
 
Promise 패턴 공부
Promise 패턴 공부Promise 패턴 공부
Promise 패턴 공부HongGun Yoo
 
The essence of Reactive Programming
The essence of Reactive ProgrammingThe essence of Reactive Programming
The essence of Reactive ProgrammingEddy Bertoluzzo
 
Event oriented programming
Event oriented programmingEvent oriented programming
Event oriented programmingAshwini Awatare
 
FOSUserBundle with eZ Platform and MongoDB
FOSUserBundle with eZ Platform and MongoDBFOSUserBundle with eZ Platform and MongoDB
FOSUserBundle with eZ Platform and MongoDBSébastien Morel
 
Introduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingIntroduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingEliasz Sawicki
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureColin Mackay
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Fabien Potencier
 
[D2CAMPUS]JavaScript 다시 시작하기
[D2CAMPUS]JavaScript 다시 시작하기[D2CAMPUS]JavaScript 다시 시작하기
[D2CAMPUS]JavaScript 다시 시작하기NAVER D2
 
Non-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsNon-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsMarcus Frödin
 

Viewers also liked (20)

명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI
 
LESS와 EMMET
LESS와 EMMETLESS와 EMMET
LESS와 EMMET
 
Deferred object
Deferred objectDeferred object
Deferred object
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2
 
Optimize your eZ Publish with Varnish
Optimize your eZ Publish with VarnishOptimize your eZ Publish with Varnish
Optimize your eZ Publish with Varnish
 
Event and signal driven programming
Event and signal driven programmingEvent and signal driven programming
Event and signal driven programming
 
Promise 패턴 공부
Promise 패턴 공부Promise 패턴 공부
Promise 패턴 공부
 
The essence of Reactive Programming
The essence of Reactive ProgrammingThe essence of Reactive Programming
The essence of Reactive Programming
 
Event oriented programming
Event oriented programmingEvent oriented programming
Event oriented programming
 
FOSUserBundle with eZ Platform and MongoDB
FOSUserBundle with eZ Platform and MongoDBFOSUserBundle with eZ Platform and MongoDB
FOSUserBundle with eZ Platform and MongoDB
 
5.node js
5.node js5.node js
5.node js
 
Introduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingIntroduction to Functional Reactive Programming
Introduction to Functional Reactive Programming
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azure
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3
 
Varnish
VarnishVarnish
Varnish
 
[D2CAMPUS]JavaScript 다시 시작하기
[D2CAMPUS]JavaScript 다시 시작하기[D2CAMPUS]JavaScript 다시 시작하기
[D2CAMPUS]JavaScript 다시 시작하기
 
Non-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.jsNon-blocking I/O, Event loops and node.js
Non-blocking I/O, Event loops and node.js
 
Php extensions
Php extensionsPhp extensions
Php extensions
 
Modern sql
Modern sqlModern sql
Modern sql
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 

Similar to Javascript 박재은

처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1성일 한
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개Dong Jun Kwon
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Park Jonggun
 
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010Ryan Park
 
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10온라인 게임에서 사례로 살펴보는 디버깅 in NDC10
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10Ryan Park
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기Jae Sung Park
 
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요NAVER D2
 
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여iamprogrammerofficial
 
게임프로그래밍입문 4주차
게임프로그래밍입문 4주차게임프로그래밍입문 4주차
게임프로그래밍입문 4주차Yeonah Ki
 
G+ Summer C Study 20130703(1일차)
G+ Summer C Study 20130703(1일차)G+ Summer C Study 20130703(1일차)
G+ Summer C Study 20130703(1일차)Jake Yoon
 
엑스룰(XRule) 자바스크립트 양식 입력 자동검사
엑스룰(XRule) 자바스크립트 양식 입력 자동검사엑스룰(XRule) 자바스크립트 양식 입력 자동검사
엑스룰(XRule) 자바스크립트 양식 입력 자동검사Jinhyun Sim
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&Csys4u
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터jaehyok Song
 
Multi-thread : producer - consumer
Multi-thread : producer - consumerMulti-thread : producer - consumer
Multi-thread : producer - consumerChang Yoon Oh
 
[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성NAVER D2
 
HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1정환 임
 

Similar to Javascript 박재은 (20)

처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개
 
Working with code
Working with codeWorking with code
Working with code
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초
 
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010
온라인 게임에서 사례로 살펴보는 디버깅 in NDC2010
 
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10온라인 게임에서 사례로 살펴보는 디버깅 in NDC10
온라인 게임에서 사례로 살펴보는 디버깅 in NDC10
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
 
Node.js in Flitto
Node.js in FlittoNode.js in Flitto
Node.js in Flitto
 
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
 
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여
2015 나는 프로그래머다 컨퍼런스 (11) 염산악 - 가독성에 대하여
 
게임프로그래밍입문 4주차
게임프로그래밍입문 4주차게임프로그래밍입문 4주차
게임프로그래밍입문 4주차
 
G+ Summer C Study 20130703(1일차)
G+ Summer C Study 20130703(1일차)G+ Summer C Study 20130703(1일차)
G+ Summer C Study 20130703(1일차)
 
엑스룰(XRule) 자바스크립트 양식 입력 자동검사
엑스룰(XRule) 자바스크립트 양식 입력 자동검사엑스룰(XRule) 자바스크립트 양식 입력 자동검사
엑스룰(XRule) 자바스크립트 양식 입력 자동검사
 
Java tutorial
Java tutorialJava tutorial
Java tutorial
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터
 
Multi-thread : producer - consumer
Multi-thread : producer - consumerMulti-thread : producer - consumer
Multi-thread : producer - consumer
 
[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성
 
Flyweight
FlyweightFlyweight
Flyweight
 
HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1HolubOnPatterns/chapter2_1
HolubOnPatterns/chapter2_1
 

Javascript 박재은

  • 1. JavaScript 박 재 은 2015. 04. 29 1 < 코드아카데미 + 생활코딩 >
  • 2. Contents 1. JavaScript? 2. Data Types 3. Comparisons 4. Variables 5. 조건문 – if 6. 반복문 - while 7. 반복문 – for 8. Function 9. Practice (1, 2) 2
  • 3. 1. JavaScript? ▶ 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어  HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결 ! ▶ 웹 브라우저에서 사용할 수 있는 프로그래밍 언어  웹의 중요함은 더욱 확대될 전망 웹에서 구동되는 언어인 JavaScript의 중요함도 점점 커질 것 !! ▶ 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용  효용이 다각적이면서도 배우기 쉬움 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어 !!! 3
  • 4. 2. Data Types ▶ Number : 코드 작성 시, 따옴표(큰, 작은)가 붙지 않은 숫자는 숫자로 인식 ex) 4 , 4+2, 3-1, 2*6, 12/4 ▶ String : 코드 작성 시, "(큰 따옴표) 혹은 '(작은 따옴표)로 감싸야 함 ex) “hello world”, ‘hello world’, “1”, ‘jaeeun’s javascript’ “hello. n javascript” “hello"+“world”, “hello world”.length ▶ Boolean : true 또는 false 중 하나의 값만 취함 ex) true, false, 10>1, 1<10 4
  • 5. 3. Comparisons ▶ 프로그래밍에서 비교란, 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분 => 비교 연산자의 결과는 true나 false 중의 하나 true는 비교 결과가 참이라는 의미, false는 거짓이라는 뜻 (1) === : equal to (2) !== : not equal to (3) > : greater than (4) < : less than (5) >= : greater than or equal to (6) <= : less than or equal to 5
  • 6. 4. Variables ▶ 변수는 (문자,숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용 var varname = data ; ex) var a = 1; alert(a+1); // 2 ▶ 변수의 효용 – 코드의 재 활용성 alert(100+10); alert((100+10)/10); alert(((100+10)/10)-10); alert((((100+10)/10)-10)*10); a = 100; a = a + 10; alert(a); a = a / 10; alert(a); a = a - 10; alert(a); a = a * 10; alert(a); 6
  • 7. 5. 조건문 - if ▶ 조건문이란 주어진 조건에 따라서 다르게 동작하도록 하는 것 if (false) { alert(1); } else if (false) { alert(2); } else if (true) { alert(3); } else { alert(4); } // 3 - 조건문은 if로 시작, if 뒤의 괄호에 조건이 옴 - if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 중괄호 구간이 실행 - else if는 다양한 케이스 조건을 검사할 수 있음 - else if의 특징은 여러개가 올 수 있다는 점 - else if의 모든 조건이 false라면 else가 실행 - else는 생략 가능 7
  • 8. 6. 반복문 – while ▶ 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법 while (true) { 반복해서 실행할 코드 } “ 무한루프 발생!!!!” var i = 0; while (i < 5) { console.log(“Hello”); i++ } Hello Hello Hello Hello Hello 8
  • 9. 7. 반복문 – for ▶ while과 for는 서로 대체 가능하기 때문에 상황에 따라 선택해서 사용 가능 for (초기화; 반복조건; 반복이 될 때마다 실행되는 코드) { 반복해서 실행될 코드 } for (var i = 0; i < 5; i++) { console.log(“Hello”); } Hello Hello Hello Hello Hello 9
  • 10. 8. Function ▶ 함수란 하나의 로직을 재실행 할 수 있도록 하는 것, 코드의 재사용성을 높여줌 function 함수명 ( ) { 코드 return 반환값 } function numbering() { i = 0; while (i < 5) { console.log(i); i += 1; } } numbering(); 0 1 2 3 4 var 함수명 = function ( ) { 코드 return 반환값 } 10
  • 11. 8. Function ▶ 함수의 효용 – 재사용성 var i = 0; while (i < 5) { console.log(“Hello”); i++ } var i = 0; while (i < 5) { console.log(“Hello”); i++ } var i = 0; while (i < 5) { console.log(“Hello”); i++ } function numbering(){ var i = 0; while(i < 10){ console.log(i); i += 1; } } numbering(); numbering(); numbering(); 11
  • 12. 9. Practice (1) – “rock, paper, scissors game! ” 12 user : rock computer : rock "The result is a tie!"
  • 13. 13 9. Practice (2) – “ dragon slaying mini game! ” ◈ 이겼을 때 You hit the dragon player slew the dragon ◈ 졌을 때 The dragon defeated you