정진수 | 2012.09

자바스크립트

작성자 정진수

작성년월일 2012. 09

자바스크립트(JavaScript == ECMAScript)

Chapter 1

JavaScript 기초문법 ~ 함수기초까지

<script>소스입력</script>

1. 노드를 다루지 않을 시 .

2. 노드를 사용할 경우

<script>

window.onload = function(){

소스입력

}

</script>

1-1

4

자바스크립트사용방법 .

3. 외부 자바스크립트를 사용할 경우 <script src=“ 자바스크립트 파일이름 .js”></script>

- 데이터를 저장하는 장소- 데이터를 읽고 쓰고 할 수 있는 장소- 저장 할 수 있는 데이터는 ?

- 숫자 ( 정수형 , 실수형 )- 문자열- 함수- 객체 ( 인스턴스 )

1. 변수란 ?

2. 변수 선언 방법 .

- var 변수이름 = 값

- var 변수이름

변수이름 = 값

- 변수이름 = 값 ( 비추 !)

1-1

5

변수

3. 변수 값 변경하기 .

- var 변수이름 = 값 ;

- 변수이름 = 신규 값 ;

- 브라우저의 경고창에 출력된다 .- 예 ) var name = “ 정진수” ; // 변수 name 에 “정진수”

라고 문자열을 저장 .- alert(name);

1. alert()

2. console.log() - 추천

- 브라우저의 콘솔창에 출력된다 .

- 예 ) var age = 28; // 변수 age 에 숫자 28 을 저장

- console.log(age);

1-1

6

디버깅

3. document.write() - 비추

- 브라우저의 화면에 출력된다 .

- 예 ) var address = “ 서울 서초구 잠원동” // 변수

address 에 문자열 “서울 서초구 잠원동”을 저장

- document.write(address)

- 숫자형 (Number)- 문자형 (String) : “ 정진수” , ‘ 정진수’- 논리형 (Boolean) : true( 참 ), false( 거짓 ) 중 하나- undefined = 미정된 값- null = 미정된 값 .

1. 기본형

2. 참조형

- 배열 (Array) – 데이터 집합

- 함수 (Function) – 구문의 집합

- 객체 (Object) – 데이터 + 함수 집합

1-1

7

자바스크립트자료형

- 함수 또는 메소드안에서만 쓰이는 변수 .- 함수 안에서 만들어지고 함수 안에서만 사용 .- 함수가 끝나면 변수도 소멸 .

1. 지역변수 (= Local Variable)

2. 전역변수 (= Global Variable)

- 함수 외부에서 선언됨 .

- 어디서나 쓸 수 있는 변수 .

1-1

8

변수종류

3. 매개변수 (= Parameter)

- 선언된 함수 내부로 값을 전달시켜주는 변수 .

- 매개변수 또한 지역변수라 함수가 종료됨에 따라 소멸 .

4. 멤버변수 (= Member Vari-able)

- 클래스 내부에 선언된 변수 .

- 클래스가 인스턴스화 되어야 접근 가능 .

var global1 = " 전역변수 1"; // 전역변수 지정 global2 = " 전역변수 2"; // 전역변수 지정

function test1() { var local1 = " 지역변수 "; // 지역변수 지정 global3 = " 전역변수 3"; // var 를 넣지 않았으므로 전역변수 console.log(global1); // “ 전역변수 1” 출력 console.log(global2); // “ 전역변수 2” 출력 (function inner_test() { // 함수안에 함수 console.log(local1); // “ 지역변수” 출력 console.log(global3); // “ 전역변수 3” 출력 })(); } function test2(para1, para2) { // 다른 함수 . 파라메터 (para1,para2) console.log(global3); // “ 전역변수 3” 출력 console.log(para1); // 1 출력 console.log(para2); // 2 출력 console.log(local1); // undefined (local1 은 test1 에 대한 지역함수이기때문에 출력되지 않음 )

} console.log(global1); // “ 전역변수 1” 출력 console.log(global2); // “ 전역변수 2” 출력

test1(); test2(1, 2);

// 멤버변수 예 )function Myname(){ // 생성자 함수 . 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화 this.name = " 정진수“ // 멤버변수 . 이 변수는 각 인스턴스들에게 공유 된다 . }

Myname.prototype.inputName = function(){ console.log("name = ", this.name);

}

myName = new Myname(); myName.inputName();

예시 .

1-1

9

변수종류

- 구문에러가 뜬다 .

- 알파벳또는 언더바 (_) 로 시작해야한다 .

1. 숫자로 시작하면 안된다 .

2. 대 , 소문자를 구분한다 .

- var myName = “ 정진수” ;

- var myname = “Jung JinSoo”;

1-1

변수 선언시주의사항

3. 예약어는 사용할 수 없다 .

- 예약어들은 자바스크립트 프로그램 내에서

식별자로 ( 변수 이름 , 함수 이름 , 루프

레이블 ) 사용 할 수 없는 단어들이다 .

4. 공백이 포함 될 수는 없다 .

- 뛰어쓰기를 하면 에러가 납니다 !

- var result1 = 10+10;- console.log(result1); // 20 이 출력

1. +( 더하기 )

2. –( 빼기 )

- var result2 = 10-5;

- console.log(result2); // 5 가 출력

1-1

11

기본연산자 -숫자

3. *( 곱하기 )

- var result3 = 10*2;

- console.log(result3) // 20 이 출력

4. /( 나누기 )

- var result4 = 10/2;

- console.log(result4) // 5 가 출력

5. %( 나머지 )

- var result5 = 10%2;

- console.log(result5) // 0 이 출력

- var name1 = “ 정” ;- var name2 = “ 진” ;- var name3 = “ 수” ;

- var name = name1 + name2 + name3;- console.log(name); // ” 정진수”출력

1. +( 더하기 )

1-1

12

기본연산자 -문자열

- var a = 10;- a += 10;- console.log(a) // 20 이 출력- a += 10 은 a = a + 10 과 동일한 표현이다 .

1. +=

2. –=

- var a = 10;- a -= 10;- console.log(a) // 0 이 출력- a -= 10 은 a = a -10 과 동일한 표현이다 .

1-1

13

복합연산자

3. *=

- var a = 10;- a *= 10;- console.log(a) // 100 이 출력- a *= 10 은 a = a * 10 과 동일한 표현이다 .

4. /=

- var a = 10;- a /= 10;- console.log(a) // 1 이 출력- a /= 10 은 a = a / 10 과 동일한 표현이다 .

5. %=

- var a = 10;- a %= 10;- console.log(a) // 0 이 출력- a %= 10 은 a = a % 10 과 동일한 표현이다 .

- ++( 또는 --) 변수 ( 피연산자 ) = 전위 연산자 ( 또는 전치 연산자 )- 먼저 변수 ( 피연산자 ) 를 증감 시킨 다음 증가된 값을 결과로 내놓는다 .

- var i = 1;- j = ++i;- console.log(" i = " + i , " j = " + j); // i 와 j 의 값은 2

1. 전위 연산자 ( 전치 연산자 )

2. 후위 연산자 ( 후치 연산자 )

- 변수 ( 피연산자 )++( 또는 --) = 후위 연산자 ( 또는 후치 연산자 )- 변수 ( 피연산자 ) 를 증가 시키지만 결과로는 원래의 증가되지 않는 값을 내놓는다 .

- var i = 1;- j = i++;- console.log(" i = " + i , " j = " + j); // i 는 1, j 의 값은 2

1-1

14

증감 연산자

1-1

15

연산자 우선순위 우선순위 연산자 내용

1 ( ) , [ ] 괄호 / 대괄호

2 !,~,++,-- 부정 / 증감

3 *,/,% 곱셈 / 나눗셈

4 +,- 덧셈 / 뺄셈

5 <<,>>,>>> 비트단위의 쉬프트

6 <,<=,>,>= 관계 연산자

7. ==,!=

8 & 비트단위의 논리 연산자

9 ^

10 |

11 && 논리곱 연산자

12 || 논리합 연산자

13 ?: 조건 연산자

14 =,+=,-=,*=,/=,%=,<<=,>>=,

&=,^=,~=

대입 / 할당 연산자

햇갈린다 싶을땐 그냥 괄호를 넣자 .

- 숫자 → 문자 , 문자 → 숫자로 변환

1. 형변환이란 ?

2. 형변환의 종류는 ?

- 암시적 형변환

- 명시적 형변환

1-1

16

형변환( 타입 변환 )

- 자바스크립트 컴파일러에 의해서 자동으로 형변환이 일어난다 .

1. 암시적 변환이란 ?

2. 암시적변환의 예

- var result1 = 1+"2"; // 숫자 + 문자 = 문자로 변환

- var result2 = "2"+true; // 문자 + Boolean = 문자로 변환

- var result3 = "15" - 5; // 문자 - 숫자 = 숫자로 변환

1-1

17

암시적변환 .

- ' 난 이렇게 바뀔꺼야 !' 라고 지정해주는 것 .

1. 명시적 변환이란 ?

2. 명시적변환의 예

- // 숫자를 문자로

- var numType = 15;

- console.log(numType,typeof(numType));

- var nToString = String(numType);

- console.log(nToString,typeof(nToString));

- // 문자를 숫자로

- var strType = "300";

- console.log(strType,typeof(strType));

- var sToNum = parseInt(strType);

- console.log(sToNum,typeof(sToNum));

1-1

18

명시적변환 .

- var result1 = 1+"2";

- var result2 = "2"+true; // Boolean 값을 문자로

1. 암시적 변환 방법

2. 명시적 변환 방법

- var numType = 15;

- var nToString = String(numType);

- // 또는 var test1 = String(15); console.log(test1,typeof(test1))

- console.log(nToString,typeof(nToString));

- var numType = 15;

- console.log(numType.toString()) // 문자열로 변환 .

- console.log(numType.toString(8)) // 8 진수 문자열로 변환 .

- console.log(numType.toString(10)) // 10 진수 문자열로 변환 .

- console.log(numType.toString(16)) // 16 진수 문자열로 변환 .

- toFixed(); // 소수점 이하의 숫자를 지정된 개수만큼 출력

- toExponential(); // 소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수

표기법을 사용하여 숫자를 문자열로 변환 ... 배우지 않음 ...

- toPrecision(); // 지정된 수의 유효 숫자 개수만큼 숫자를 출력 ... 역시 배우지 않음 .

1-1

19

형변환 -숫자에서 문자로

2-1. String() 을 이용하는 방법

2-2. .toString( 진수 ) 를 이용하는 방법

2-3. 이외 방법

- var result1 = "2"-2;

- var result2 = 2+true; // Boolean 값을 숫자로

1. 암시적 변환 방법

2. 명시적 변환 방법

- var test1 = "15";

- Number(test1);

- Number("15");

- Number(true) 또는 Number(false) // Boolean 값 변환

- var test2 = "30";

- parseInt(test2);

- parseInt("30");

- parseInt("30abc");

- parseInt("0xFF"); //255 를 반환

- parseInt("30.111"); //30 을 반환

- var test3 = "30.111";

- parseFloat(test3);

- parseFloat("30.111");

1-1

20

형변환 -문자에서 숫자로

2-1. Number() 을 이용하는 방법

2-2. parseInt() 을 이용하는 방법

2-3. parseFloat() 을 이용하는 방법

Boolean 값에서true 는 1false 는 0의 값을 가지고 있다 .

만약 Number("15abc") 라고 한다면 ?

NaN(Not a Number) 라고 뜸 !

parseInt(true) 혹은 parInt(false) 라고 한다면 ?역시 NaN!

parseFloat("\100.50") 은 ?NaN!. 말고 다른 문자가 나오면 NaN. 이 중복되서 나오면 뒤에 나오는것은 무시된다 .

- 예시 ) 만약 연봉협상이 성공한다면 - 연봉상승 , 실패한다면 - 밥대신 라면먹기

- if( 연봉협상 == 성공 ){- 기본연봉 += 99999999;- }- else{- 밥대신 라면 ;- }- 조건에 맞는 구문을 실행할때 사용하는 조건 제어문 .

1.if 문이란 ?

2. if 문 구조

- 1 단 : if 문

- 2 단 : if ~ else 문

- 3 단 이상 : if ~ else if ~ else . . . 문

1-1

21

if 문 .

- 주로 조건식에 사용된다 .

- 예 )- if( 조건식 )- for( 초기값 ; 조건식 ; 증감 )- while( 조건식 )

1. 용도

2. 주의할점

- 조건식의 결과는 항상 true 또는 false

1-1

22

논리연산자와비교연산자

3. 예시

- var a = true;- var b = false;- var c = 10;- var d = 20;

- var result1 = ( a == true); // a 는 true 이므로 true- var result2 = ( c > 10); // c 는 10 이므로 false- var result3 = ( c < 10); // c 는 10 이므로 false- var result4 = ( c <= 10); // c 는 10 이므로 true- var result5 = ( a != true); // a 는 true 이므로 false- var result6 = ( a == true || b == true); // a 가 맞았으므로 true- var result7 = (a == true && b == true); // a 는 맞았지만 b 는 틀렀으므로 false

연산자 수행되는 연산

== 동등한지 테스트

!= 동등하지 않는지 테스트

=== 일치하는지 테스트

!== 일치하지 않는지 테스트

<,<= 작다 , 작거나 같다

>,>= 크다 , 크거나 같다

|| OR

&& AND

- var a = 10;

- if ( a < 10 ){- alert("Warning < 10");- }- else if ( a > 10 ){- alert("Warning > 10");- }- else {- alert ("a 는 10 이므로 10보다- 크거나 작지 않습니다 ")- }----------------------------------------------- if ( a == 10 ){- alert("Warning == 10");- }- if ( a === "10" ){- alert("Warning === 문자 10");- }- if ( a === 10 ){- alert("Warning === 10");- }- if ( a <= 10 ){- alert("Warning <= 10");- }- if ( a >= 10 ){- alert("Warning >= 10");- }

1. 예시

1-1

23

if 문과비교 , 논리연산자사용하기 .

=== 와 == 의 차이점

== 는 값만 같으면 되지만=== 는 type 도 같아야 한다 .

예시 )var a = 5;a == "5" // 문자열이지만 5 라는 같으므로 truea === "5" // a 는 숫자타입이지만 비교값은 문자이므로 false

- 여러개의 조건을 처리해야 할때 if 문이라면- if( 조건 1)- else if( 조건 2)- else if( 조건 3)- ...

- 이렇게 조건이 여러개 있때 전문적으로 처리하는 구문 ! switch 문 입니다 .

- 즉 switch 문이란 여러개의 조건에 맞는 구문을 실행할 때 사용하는 제어문 ( 조건문 ) 입니다 .

1.if 문과의 차이점

2. switch 문 문법

- switch( 식 ){

- case " 값 " :

- 구문들 ;

- break;

- case " 값 " :

- 구문들 ;

- break;

- ........

- default :

- // 모든 조건이 맞지 않을 경우 이곳에 있는 구문이 실행됩니다 .

- }

1-1

24

switch 문 .

- 예시 )

- var inputNumber = window.prompt("1~3 까지의 숫자를 넣어주세요 ");

- switch(inputNumber){- case "3" :- alert("3번을 선택했습니다 .");

- case "2" :- alert("2번을 선택했습니다 .");

- case "1" :- alert("1번을 선택했습니다 .");- break;- default :- alert("1~3 까지의 숫자를 넣어달라니깐 ....-_-");- }

- break 없는 switch 문은 브레이크가 고장난- 자동차와 똑같습니다 . 사고납니다 . 넣으라면 넣으세요 .

break 를 넣지 않는다면 ?

1-1

25

switch 문 .

- 말 그대로 뭔가를 여러번 반복하고 싶을때 사용하는 구문 .

1. 반복문이란 ?

2. for 문 구조

- 반복구문이 한문장일때는 { } 를 생략할 수 있다 .- for( 초기값 ; 조건식 ; 증감 )- 실행구문 ;

- 반복구문이 여러문장일때는 { } 로 감싸야 한다 .- for( 초기값 ; 조건식 ; 증감 ){- 실행구문 1;- 실행구문 2;- . . . . . .- }

1-1

26

반복문-for 문

- for(var i =0; i<10;i++){- console.log(" i = " + i);- }- console.log("최종 i = " + i);

- // for 문이 처음 실행되면 초기값 , 조건식 실행 . i 는 0 이고 i 는 10보다 작으므로 참 (true) → 실행구문 실행 (console.log 에 i 출력 ) → 증감 실행된후 조건 실행 . 즉 i 는 1 이고 i 는 10보다 작으므로 참 (true), 조건식이 거짓 (false) 가 될 때까지 반복 .

- .......- i 가 10 일때 i 는 10보다 작지 않으므로 거짓 (false), 실행구문이 실행되지 않고

for 문을 빠져나옴 . 그후 i 값 출력

- 그래서 for 문 안에 있는 i 는 0~9 의 숫자가 출력되고 최종 i 에는 10 이 출력된다 .

3.for 문 예시

- 반복문에서 continue 문을 만나면 continue 이후의 구문을 실행하지 않고 바로 for 로 이동 .

1.continue 란 ?

1-1. continue 예시 .

- for( var i = 1; i <=10; i ++){- if(i%2 == 1){ // 만약 i 의 나머지 값이 1 이라면 (즉 홀수라면 )- continue; // for 문으로 이동- }- console.log(i); // 위의 if 문에서 홀수는 걸러지게 되므로 i 에는 짝수값만 출력된다 .

- }

1-1

27

반복문-continue,-break

- 실행구문 중 break 문을 만나면 for 문은 그대로 정지되며 for 루프를 빠져나옴 .- 즉 , for 문을 강제로 빠져나오고 싶을때 사용하면 됩니다 .

2.break 란 ?

2-1. break 예시 .

- for( var i = 1; i <=10; i ++){- if(i == 5){ // 만약 i 가 5 이라면- break; // for 문을 빠져나온다- }- console.log(i); // i 가 5 이면 위의 break 문이 실행되므로 1~4 까지의 숫자만

출력된다 .- }

- for 문과 같은 반복문- 차이점은 초기값 , 증감값 없이 오직 조건식만 있음 .- 즉 , while 문은 for 문보다 좀더 심플한 반복문이라고 볼 수 있다 .

1.while 문이란 ?

2. while 문 구조

- while( 조건식 ){- 실행구문 1;- 실행구문 2;- }

1-1

28

반복문-while 문

- for 문과 같다 .- 다만 , 무한반복문에 더 잘 어울린다 .- 또한 , 주로 파일을 읽어들일때 주로 많이 사용된다 .( 파일 끝에 도달할때까지 반복문 실행되는

원리로 )

3.while 문 사용용도

- var i = 1; // 초기값- while ( i < 10){ //while 문 조건식 i 가 < 10 이 될때까지 반복- console.log(" 정진수 "+i); // 콘솔창에 " 정진수 " + i 값을 출력- i++; // i 값을 증가- }

1.while 문 예시

2. while 문 + continue 예시

- var i = 1; // 초기값- while ( i <= 10){ // i 가 10보다 작거나 같을때까지 반복- i++; // i 값을 증가- continue; // continue 에 걸려서 다시 while 문 실행- console.log( i ); // continue 때문에 구문 실행 안됨- }- console.log( "최종 i = " + i ); // 최종적으로 이 값만 출력 ( i = 11)

1-1

29

반복문-while 문 예제

- var i = 1; // 초기값- while ( i <= 10){ // i 의 값이 10보다 작거나 같을때 까지 반복- if ( i == 5){ // 만약 i 의 값이 5 와 같다면- break; // break 문에 의해 while 문을 빠져나오게 된다 .- }- console.log( i ); // i 의 값이 5 가 될때까지 i 값 출력 (1~4 까지 )- i++; // i 값 증가- }

3.while 문 + break 예시

- 특정 기능을 하는 변수와 구문들의 집합- 일종의 포장 기술- 중복 구문을 함수로 묶어서 재사용 가능

1. 함수란 ?

2. 기본 함수 구조

- // 파라메터와 반환 (return) 값이 없는 함수 .- function 함수이름 ( ){- }- // 파라메터만 있고 반환값이 없는 함수 .- function 함수이름 ( 파라메터이름 1, 파라메터이름 2...){- }- // 파라메터와 반환값이 있는 함수 .- function 함수이름 ( 파라메터이름 1, 파라메터이름 2...){- ......- return 반환값 ;- }

1-1

30

함수(function)

- 일반 함수- 콜백 함수- 중첩 함수- 클로저

3. 함수종류

- 가장 일반적인 방식- function 함수이름 ( 파라메터 1...){- return 반환값 ;- }

1.function 키워드로 함수 만들기 - 必

2. 리터럴 방식으로 함수 만들기 - 必

- 이 방식도 많이 사용됨 .- 함수이름 = function( 파라메터 1...){- return 반환값 ;- }

1-1

31

함수 생성방법

- 주로 어떤 내용을 외부와 완전히 분리 시키고자 할 때 사용- (function( 파라메터 1...){})(- return 반환값- );

3. 이름 없는 함수 만들기

- 거의 사용 안함- var funcName = new Function( 인수 ... , 함수본체 );

4.Function 객체 가지고 만들기

function hello(){console.log("hello World");}hello();

var hello = function (){console.log("hello World");}hello();

(function(){console.log("hello World");})();

var hello = new Function(undefined, 'console.log("hello World")');hello();

- 가장 일반적인 방식- function 함수이름 ( 파라메터 1...){- return 반환값 ;- }

1.function 키워드로 함수 만들기 - 必

2. 리터럴 방식으로 함수 만들기 - 必

- 이 방식도 많이 사용됨 .- 함수이름 = function( 파라메터 1...){- return 반환값 ;- }

1-1

32

함수 생성방법

- 주로 어떤 내용을 외부와 완전히 분리 시키고자 할 때 사용- (function( 파라메터 1...){})(- return 반환값- );

3. 이름 없는 함수 만들기

- 거의 사용 안함- var funcName = new Function( 인수 ... , 함수본체 );

4.Function 객체 가지고 만들기

function hello(){console.log("hello World");}hello();

var hello = function (){console.log("hello World");}hello();

(function(){console.log("hello World");})();

var hello = new Function(undefined, 'console.log("hello World")');hello();

- 함수 내부는 무작정 접근 불가 !- 접근 하는 방법은 파라메터를 이용해서 값을 넘겨주는 방법 .- 즉 ! 파라메터의 용도는 외부 데이터를 함수 내부로 받아 올 수 있는 역활 .- 파라메터는 지역 변수로서 함수 내부에서만 사용 가능 .

1. 파라메터란 ?

2. 파라메터 예제 .

- // 파라메터에 문자를 넘긴 경우- function showName(name){- console.log(" 안녕하세요 . 저는 " + name + " 입니다 ");- }- showNmae(" 정진수 ");

- // 파라메터에 숫자를 넘긴 경우- function showAge(age){- console.log(" 저의 나이는 " + age + " 입니다 ");- }- showAge(19);

- // 함수를 넘긴 경우- function hello(){- alert("Hello World");- }

- function world(func){- func();- }- world(hello);

1-1

33

함수 -파라메터

- 파라메터의 정보가 담겨 있는 객체 .- 배열은 아니지만 배열처럼 사용하면 된다 .

3. arguments 란 ?

4. return 란 ?

- 함수를 실행한 곳에 실행한 결과물을 알려줘야 할때 사용- 굳이 돌려줄 값이 없다면 쓸 필요 없다 .

1-1

34

함수 -arguments 와return

5. 예시

- function add(v1,v2){- var result = v1+v2; //result 에 v1 과 v2 의 더한값을 담는다 .- console.log(arguments); // 파라메터의 정보가 나온다 .- console.log("v1 = " + arguments[0]); // 첫번째 파라메터의 정보 (v1)- console.log("v2 = " + arguments[1]); // 두번째 파라메터의 정보 (v2)- console.log(" 파라메터의 갯수 = " + arguments.length); // 파라메터의 갯수- return result; // 변수 result 의 값 반환 .- }- console.log(add(10,20)); // 30 이 출력 , 만약 return 이 없다면 여기엔 undefined 이

출력 된다 .

if( !END ){to be continued

}맞나 ...?

감사합니다 .