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

Javascript 박재은

  • 1.
    JavaScript 박 재 은 2015.04. 29 1 < 코드아카데미 + 생활코딩 >
  • 2.
    Contents 1. JavaScript? 2. DataTypes 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