View
4.402
Download
6
Category
Preview:
DESCRIPTION
자바스크립트 기초문법~함수기초
Citation preview
정진수 | 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
}맞나 ...?
감사합니다 .
Recommended