0
자바스크립트정진수 | 2012.09
자바스크립트(JavaScript == ECMAScript)                             정진수                              2012. 09
JavaScript기초문법 ~ 함수기초까지
1-1자바스크립트   1. 노드를 다루지 않을 시.사용방법.    <script>         소스입력         </script>         2. 노드를 사용할 경우          <script>      ...
1-1변수    1. 변수란?        - 데이터를 저장하는 장소        - 데이터를 읽고 쓰고 할 수 있는 장소        - 저장 할 수 있는 데이터는?             - 숫자 (정수형, 실수형) ...
1-1디버깅   1. alert()         - 브라우저의 경고창에 출력된다.         - 예) var name = ‚정짂수‛; // 변수 name에 ‚정짂수‛ 라고 문자열           을 저장.    ...
1-1자바스크립트   1. 기본형자료형        -   숫자형(Number)           -   문자형(String) : ‚정짂수‛ , ‘정짂수’           -   논리형(Boolean) : true(참...
1-1변수종류   1. 지역변수(= Local Variable)         - 함수 또는 메소드안에서만 쓰이는 변수.         - 함수 안에서 만들어지고 함수 안에서만 사용.         - 함수가 끝나면 변...
1-1       예시.변수종류         var global1 = "전역변수1"; // 전역변수 지정               global2 = "전역변수2"; // 전역변수 지정              funct...
1-1변수 선언시   1. 숫자로 시작하면 안된다.주의사항       - 구문에러가 뜬다.           - 알파벳또는 언더바(_)로 시작해야한다.         2. 대,소문자를 구분한다.           - v...
1-1기본연산자 -   1. +(더하기)숫자          - var result1 = 10+10;            - console.log(result1); // 20이 출력          2. –(빼기)   ...
1-1기본연산자 -   1. +(더하기)문자열         - var name1 = ‚정‛;            - var name2 = ‚짂‛;            - var name3 = ‚수‛;          ...
1-1복합연산자   1. +=           -    var a = 10;           -    a += 10;           -    console.log(a) // 20이 출력           -   ...
1-1증감 연산자   1.전위 연산자(전치 연산자)           - ++(또는 --)변수(피연산자) = 젂위 연산자(또는 젂치 연산자)           - 먺저 변수(피연산자)를 증감 시킨 다음 증가된 값을 결과...
1-1연산자 우선순위    우선순위            연산자                           내용             1              (),[]              괄호 / 대괄호    ...
1-1형변환       1.형변환이란?(타입 변환)     - 숫자 → 문자, 문자 → 숫자로 변환          2. 형변환의 종류는?            - 암시적 형변환            - 명시적 형변환
1-1암시적변환.   1.암시적 변환이란?           - 자바스크립트 컴파일러에 의해서 자동으로 형변환이 일어난다.         2. 암시적변환의 예           - var result1 = 1+"2"; ...
1-1명시적변환.   1.명시적 변환이란?           - 난 이렇게 바뀔꺼야! 라고 지정해주는 것.         2. 명시적변환의 예           - // 숫자를 문자로           - var num...
1-1형변환 -      1.암시적 변환 방법숫자에서 문자로     - var result1 = 1+"2";             - var result2 = "2"+true; // Boolean값을 문자로       ...
1-1형변환 -      1.암시적 변환 방법문자에서 숫자로     - var result1 = "2"-2;                                                            Bo...
1-1if문.   1.if문이란?          -   예시) 만약 연봉협상이 성공한다면 - 연봉상승 , 실패한다면 -밥대싞 라면먹기          -   if(연봉협상 == 성공){          -   기본연봉...
1-1논리연산자와   1.용도비교연산자          - 주로 조건식에 사용된다.                               연산자                       수행되는 연산            ...
1-1if문과       1.예시비교,논리연산자     - var a = 10;사용하기.        - if ( a < 10 ){             - alert("Warning < 10");            ...
1-1switch문.   1.if문과의 차이점              -    여러개의 조건을 처리해야 할때 if문이라면              -    if(조건1)              -    else if(조건...
1-1switch문.   break 를 넣지 않는다면?              - 예시)              - var inputNumber = window.prompt("1~3까지의 숫자를 넣어주세요");     ...
1-1반복문     1.반복문이란?-for문         - 말 그대로 뭔가를 여러번 반복하고 싶을때 사용하는 구문.        2. for문 구조          - 반복구문이 한문장일때는 { }를 생략할 수 있다...
1-1반복문          1.continue란?-continue,       - 반복문에서 continue문을 만나면 continue 이후의 구문을 실행하지 않고 바로 for로 이동.-break            ...
1-1반복문       1.while문이란?-while문         - for문과 같은 반복문                - 차이점은 초기값, 증감값 없이 오직 조건식만 있음.                - 즉, w...
1-1반복문          1.while문 예시-while문 예제         -    var i = 1; // 초기값                   -    while ( i < 10){ //while문 조건식 ...
1-1함수           1.함수란?(function)         - 특정 기능을 하는 변수와 구문들의 집합                   - 일종의 포장 기술                   - 중복 구문을 ...
1-1함수 생성방법   1.function 키워드로 함수 만들기 - 必                                                               function hello(){   ...
1-1함수 생성방법   1.function 키워드로 함수 만들기 - 必                                                               function hello(){   ...
1-1함수-    1.파라메터란?파라메터         -    함수 내부는 무작정 접근 불가!             -    접근 하는 방법은 파라메터를 이용해서 값을 넘겨주는 방법.             -    즉...
1-1함수-          3. arguments란?arguments와         - 파라메터의 정보가 담겨 있는 객체.return             - 배열은 아니지만 배열처럼 사용하면 된다.         ...
감사합니다.         if( !END ){                       to be continued         }         맞나...?
Upcoming SlideShare
Loading in...5
×

자바스크립트 기초문법~함수기초

5,504

Published on

자바스크립트 기초문법~함수기초

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,504
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
71
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "자바스크립트 기초문법~함수기초"

  1. 1. 자바스크립트정진수 | 2012.09
  2. 2. 자바스크립트(JavaScript == ECMAScript) 정진수 2012. 09
  3. 3. JavaScript기초문법 ~ 함수기초까지
  4. 4. 1-1자바스크립트 1. 노드를 다루지 않을 시.사용방법. <script> 소스입력 </script> 2. 노드를 사용할 경우 <script> window.onload = function(){ 소스입력 } </script> 3. 외부 자바스크립트를 사용할 경우 <script src=‚자바스크립트 파일이름.js‛></script>
  5. 5. 1-1변수 1. 변수란? - 데이터를 저장하는 장소 - 데이터를 읽고 쓰고 할 수 있는 장소 - 저장 할 수 있는 데이터는? - 숫자 (정수형, 실수형) - 문자열 - 함수 - 객체(인스턴스) 2. 변수 선언 방법. - var 변수이름 = 값 - var 변수이름 변수이름 = 값 -변수이름 = 값 (비추!) 3. 변수 값 변경하기. - var 변수이름 = 값; - 변수이름 = 싞규 값;
  6. 6. 1-1디버깅 1. alert() - 브라우저의 경고창에 출력된다. - 예) var name = ‚정짂수‛; // 변수 name에 ‚정짂수‛ 라고 문자열 을 저장. - alert(name); 2. console.log() - 추천 - 브라우저의 콘솔창에 출력된다. - 예) var age = 28; // 변수 age에 숫자 28을 저장 - console.log(age); 3. document.write() - 비추 - 브라우저의 화면에 출력된다. - 예) var address = ‚서울 서초구 잠원동‛ // 변수 address에 문자열 ‚서울 서초구 잠원동‛을 저장 - document.write(address)
  7. 7. 1-1자바스크립트 1. 기본형자료형 - 숫자형(Number) - 문자형(String) : ‚정짂수‛ , ‘정짂수’ - 논리형(Boolean) : true(참), false(거짓) 중 하나 - undefined = 미정된 값 - null = 미정된 값. 2. 참조형 - 배열(Array) – 데이터 집합 - 함수(Function) – 구문의 집합 - 객체(Object) – 데이터 + 함수 집합
  8. 8. 1-1변수종류 1. 지역변수(= Local Variable) - 함수 또는 메소드안에서만 쓰이는 변수. - 함수 안에서 만들어지고 함수 안에서만 사용. - 함수가 끝나면 변수도 소멸. 2. 전역변수(= Global Variable) - 함수 외부에서 선언됨. - 어디서나 쓸 수 있는 변수. 3. 매개변수(= Parameter) - 선언된 함수 내부로 값을 젂달시켜주는 변수. - 매개변수 또한 지역변수라 함수가 종료됨에 따라 소멸. 4. 멤버변수(= Member Variable) - 클래스 내부에 선언된 변수. - 클래스가 인스턴스화 되어야 접근 가능.
  9. 9. 1-1 예시.변수종류 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();
  10. 10. 1-1변수 선언시 1. 숫자로 시작하면 안된다.주의사항 - 구문에러가 뜬다. - 알파벳또는 언더바(_)로 시작해야한다. 2. 대,소문자를 구분한다. - var myName = ‚정짂수‛; - var myname = ‚Jung JinSoo‛; 3. 예약어는 사용할 수 없다. - 예약어들은 자바스크립트 프로그램 내에서 식 별자로(변수 이름, 함수 이름, 루프 레이블) 사 용 할 수 없는 단어들이다. 4. 공백이 포함 될 수는 없다. - 뛰어쓰기를 하면 에러가 납니다!
  11. 11. 1-1기본연산자 - 1. +(더하기)숫자 - var result1 = 10+10; - console.log(result1); // 20이 출력 2. –(빼기) - var result2 = 10-5; - console.log(result2); // 5가 출력 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이 출력
  12. 12. 1-1기본연산자 - 1. +(더하기)문자열 - var name1 = ‚정‛; - var name2 = ‚짂‛; - var name3 = ‚수‛; - var name = name1 + name2 + name3; - console.log(name); // ‛정짂수‛출력
  13. 13. 1-1복합연산자 1. += - var a = 10; - a += 10; - console.log(a) // 20이 출력 - a += 10 은 a = a + 10과 동일한 표현이다. 2. –= - var a = 10; - a -= 10; - console.log(a) // 0이 출력 - a -= 10은 a = a -10과 동일한 표현이다. 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과 동일한 표현이다.
  14. 14. 1-1증감 연산자 1.전위 연산자(전치 연산자) - ++(또는 --)변수(피연산자) = 젂위 연산자(또는 젂치 연산자) - 먺저 변수(피연산자)를 증감 시킨 다음 증가된 값을 결과로 내놓는다. - var i = 1; - j = ++i; - console.log(" i = " + i , " j = " + j); // i와 j의 값은 2 2. 후위 연산자(후치 연산자) - 변수(피연산자)++(또는 --) = 후위 연산자(또는 후치 연산자) - 변수(피연산자)를 증가 시키지만 결과로는 원래의 증가되지 않는 값을 내놓는다. - var i = 1; - j = i++; - console.log(" i = " + i , " j = " + j); // i는 1, j의 값은 2
  15. 15. 1-1연산자 우선순위 우선순위 연산자 내용 1 (),[] 괄호 / 대괄호 2 !,~,++,-- 부정/ 증감 3 *,/,% 곱셈/나눗셈 4 +,- 덧셈 / 뺄셈 5 <<,>>,>>> 비트단위의 쉬프트 6 <,<=,>,>= 관계 연산자 7. ==,!= 8 & 비트단위의 논리 연산자 9 ^ 10 | 11 && 논리곱 연산자 12 || 논리합 연산자 13 ?: 조건 연산자 14 =,+=,-=,*=,/=,%=,<<=,>>=, 대입 / 할당 연산자 &=,^=,~= 햇갈린다 싶을땐 그냥 괄호를 넣자.
  16. 16. 1-1형변환 1.형변환이란?(타입 변환) - 숫자 → 문자, 문자 → 숫자로 변환 2. 형변환의 종류는? - 암시적 형변환 - 명시적 형변환
  17. 17. 1-1암시적변환. 1.암시적 변환이란? - 자바스크립트 컴파일러에 의해서 자동으로 형변환이 일어난다. 2. 암시적변환의 예 - var result1 = 1+"2"; // 숫자 + 문자 = 문자로 변환 - var result2 = "2"+true; // 문자 + Boolean = 문자로 변환 - var result3 = "15" - 5; // 문자 - 숫자 = 숫자로 변환
  18. 18. 1-1명시적변환. 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));
  19. 19. 1-1형변환 - 1.암시적 변환 방법숫자에서 문자로 - var result1 = 1+"2"; - var result2 = "2"+true; // Boolean값을 문자로 2. 명시적 변환 방법 2-1. String()을 이용하는 방법 - var numType = 15; - var nToString = String(numType); - // 또는 var test1 = String(15); console.log(test1,typeof(test1)) - console.log(nToString,typeof(nToString)); 2-2. .toString(진수)를 이용하는 방법 - 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짂수 문자열로 변환. 2-3. 이외 방법 - toFixed(); //소수점 이하의 숫자를 지정된 개수만큼 출력 - toExponential(); //소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수 표기법을 사용하여 숫자를 문자열로 변환... 배우지 않음... - toPrecision(); // 지정된 수의 유효 숫자 개수만큼 숫자를 출력... 역시 배우지 않음.
  20. 20. 1-1형변환 - 1.암시적 변환 방법문자에서 숫자로 - var result1 = "2"-2; Boolean값에서 true는 1 false는 0 - var result2 = 2+true; // Boolean값을 숫자로 의 값을 가지고 있다. 2. 명시적 변환 방법 2-1. Number()을 이용하는 방법 - var test1 = "15"; 만약 Number("15abc") 라고 한다면? - Number(test1); NaN(Not a Number)라고 뜸! - Number("15"); - Number(true) 또는 Number(false) // Boolean값 변환 2-2. parseInt()을 이용하는 방법 - var test2 = "30"; - parseInt(test2); parseInt(true) 혹은 parInt(false)라 - parseInt("30"); 고 한다면? - parseInt("30abc"); 역시 NaN! - parseInt("0xFF"); //255를 반환 - parseInt("30.111"); //30을 반환 2-3. parseFloat()을 이용하는 방법 parseFloat("100.50")은? NaN! - var test3 = "30.111"; .말고 다른 문자가 나오면 NaN - parseFloat(test3); .이 중복되서 나오면 뒤에 나오는것은 무시된다. - parseFloat("30.111");
  21. 21. 1-1if문. 1.if문이란? - 예시) 만약 연봉협상이 성공한다면 - 연봉상승 , 실패한다면 -밥대싞 라면먹기 - if(연봉협상 == 성공){ - 기본연봉 += 99999999; - } - else{ - 밥대싞 라면; - } - 조건에 맞는 구문을 실행할때 사용하는 조건 제어문. 2. if문 구조 - 1단 : if문 - 2단 : if ~ else문 - 3단 이상 : if ~ else if ~ else . . . 문
  22. 22. 1-1논리연산자와 1.용도비교연산자 - 주로 조건식에 사용된다. 연산자 수행되는 연산 == 동등한지 테스트 - 예) - if(조건식) != 동등하지 않는지 테스트 - for(초기값;조건식;증감) - while(조건식) === 일치하는지 테스트 !== 일치하지 않는지 테스트 2. 주의할점 <,<= 작다, 작거나 같다 - 조건식의 결과는 항상 true 또는 false >,>= 크다, 크거나 같다 || OR 3. 예시 && AND - 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
  23. 23. 1-1if문과 1.예시비교,논리연산자 - var a = 10;사용하기. - if ( a < 10 ){ - alert("Warning < 10"); - } - else if ( a > 10 ){ ===와 ==의 차이점 - alert("Warning > 10"); - } ==는 값만 같으면 되지만 - else { ===는 type도 같아야 한다. - alert ("a는 10이므로 10보다 - 크거나 작지 않습니다") 예시) - } var a = 5; ---------------------------------------------- a == "5" //문자열이지만 5라는 같으므로 true - if ( a == 10 ){ a === "5" // a는 숫자타입이지만 비교값은 문자이므로 - alert("Warning == 10"); false - } - if ( a === "10" ){ - alert("Warning === 문자10"); - } - if ( a === 10 ){ - alert("Warning === 10"); - } - if ( a <= 10 ){ - alert("Warning <= 10"); - } - if ( a >= 10 ){ - alert("Warning >= 10"); - }
  24. 24. 1-1switch문. 1.if문과의 차이점 - 여러개의 조건을 처리해야 할때 if문이라면 - if(조건1) - else if(조건2) - else if(조건3) - ... - 이렇게 조건이 여러개 있때 젂문적으로 처리하는 구문! switch문 입니다. - 즉 switch문이란 여러개의 조건에 맞는 구문을 실행할 때 사용하는 제어문(조건문) 입니다. 2. switch문 문법 - switch(식){ - case "값" : - 구문들; - break; - case "값" : - 구문들; - break; - ........ - default : - // 모든 조건이 맞지 않을 경우 이곳에 있는 구문이 실행됩니다. - }
  25. 25. 1-1switch문. break 를 넣지 않는다면? - 예시) - 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문은 브레이크가 고장난 - 자동차와 똑같습니다. 사고납니다. 넣으라면 넣으세요.
  26. 26. 1-1반복문 1.반복문이란?-for문 - 말 그대로 뭔가를 여러번 반복하고 싶을때 사용하는 구문. 2. for문 구조 - 반복구문이 한문장일때는 { }를 생략할 수 있다. - for(초기값; 조건식; 증감) - 실행구문; - 반복구문이 여러문장일때는 { }로 감싸야 한다. - for(초기값; 조건식; 증감){ - 실행구문1; - 실행구문2; - ...... - } 3.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이 출력된다.
  27. 27. 1-1반복문 1.continue란?-continue, - 반복문에서 continue문을 만나면 continue 이후의 구문을 실행하지 않고 바로 for로 이동.-break 1-1. continue 예시. - for( var i = 1; i <=10; i ++){ - if(i%2 == 1){ // 만약 i의 나머지 값이 1이라면 (즉 홀수라면) - continue; // for문으로 이동 - } - console.log(i); //위의 if문에서 홀수는 걸러지게 되므로 i에는 짝수값만 출력된다. - } 2.break란? - 실행구문 중 break문을 만나면 for문은 그대로 정지되며 for루프를 빠져나옴. - 즉, for문을 강제로 빠져나오고 싶을때 사용하면 됩니다. 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까지의 숫자만 출력된다. - }
  28. 28. 1-1반복문 1.while문이란?-while문 - for문과 같은 반복문 - 차이점은 초기값, 증감값 없이 오직 조건식만 있음. - 즉, while문은 for문보다 좀더 심플한 반복문이라고 볼 수 있다. 2. while문 구조 - while(조건식){ - 실행구문1; - 실행구문2; - } 3.while문 사용용도 - for문과 같다. - 다만, 무한반복문에 더 잘 어울린다. - 또한, 주로 파일을 읽어들일때 주로 많이 사용된다.(파일 끝에 도달할때까지 반복문 실행되는 원리로)
  29. 29. 1-1반복문 1.while문 예시-while문 예제 - var i = 1; // 초기값 - while ( i < 10){ //while문 조건식 i가 < 10이 될때까지 반복 - console.log("정짂수"+i); // 콘솔창에 "정짂수" + i값을 출력 - i++; // i값을 증가 - } 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) 3.while문 + break 예시 - 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값 증가 - }
  30. 30. 1-1함수 1.함수란?(function) - 특정 기능을 하는 변수와 구문들의 집합 - 일종의 포장 기술 - 중복 구문을 함수로 묶어서 재사용 가능 2. 기본 함수 구조 - // 파라메터와 반환(return)값이 없는 함수. - function 함수이름( ){ - } - // 파라메터만 있고 반환값이 없는 함수. - function 함수이름(파라메터이름1, 파라메터이름2...){ - } - // 파라메터와 반환값이 있는 함수. - function 함수이름(파라메터이름1, 파라메터이름2...){ - ...... - return 반환값; - } 3.함수종류 - 일반 함수 - 콜백 함수 - 중첩 함수 - 클로저
  31. 31. 1-1함수 생성방법 1.function 키워드로 함수 만들기 - 必 function hello(){ console.log("hello World"); - 가장 일반적인 방식 } - function 함수이름(파라메터1...){ hello(); - return 반환값; - } 2. 리터럴 방식으로 함수 만들기 - 必 var hello = function (){ console.log("hello World"); - 이 방식도 많이 사용됨. } - 함수이름 = function(파라메터1...){ hello(); - return 반환값; - } 3.이름 없는 함수 만들기 (function(){ - 주로 어떤 내용을 외부와 완젂히 분리 시키고자 할 때 사용 console.log("hello World"); - (function(파라메터1...){})( })(); - return 반환값 - ); 4.Function 객체 가지고 만들기 var hello = new Function(undefined, - 거의 사용 안함 console.log("hello World")); - var funcName = new Function(인수... , 함수본체); hello();
  32. 32. 1-1함수 생성방법 1.function 키워드로 함수 만들기 - 必 function hello(){ console.log("hello World"); - 가장 일반적인 방식 } - function 함수이름(파라메터1...){ hello(); - return 반환값; - } 2. 리터럴 방식으로 함수 만들기 - 必 var hello = function (){ console.log("hello World"); - 이 방식도 많이 사용됨. } - 함수이름 = function(파라메터1...){ hello(); - return 반환값; - } 3.이름 없는 함수 만들기 (function(){ - 주로 어떤 내용을 외부와 완젂히 분리 시키고자 할 때 사용 console.log("hello World"); - (function(파라메터1...){})( })(); - return 반환값 - ); 4.Function 객체 가지고 만들기 var hello = new Function(undefined, - 거의 사용 안함 console.log("hello World")); - var funcName = new Function(인수... , 함수본체); hello();
  33. 33. 1-1함수- 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);
  34. 34. 1-1함수- 3. arguments란?arguments와 - 파라메터의 정보가 담겨 있는 객체.return - 배열은 아니지만 배열처럼 사용하면 된다. 4. 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이 출력 된다.
  35. 35. 감사합니다. if( !END ){ to be continued } 맞나...?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×