javascript / jquery

avaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다.

실행

자바스크립트는 원래 웹브라우저에서 HTML, CSS를 동적으로 제어하기 위해서 만들어진 언어다. 하지만 오늘날 자바스크립트가 웹브라우저를 벗어나서 매우 다양한 용도로 사용되고 있다. 이런 이유로 자바스크립트의 실행환경은 다양하다.

웹페이지에서 자바스크립트 작성

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert('Hello world');
        </script>
    </body>
</html>

크롬 개발자 도구 사용

크롬을 사용한다면 다음과 같은 방법으로 자바스크립트를 간단하게 실행해 볼 수 있다.
1. Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.
2. alert('hello world')를 실행한다. 실행 결과 아래와 같이 경고창이 실행된다.

숫자

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert(1+1);           //결과 : 2(더하기)
            alert(1.2 + 1.3);     //결과 : 2.5 (더하기)
            alert(2 * 5);         //결과 : 10 (곱하기)
            alert(6 / 2)          //결과 : 3 (나누기)
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            Math.pow(3,2);       // 9,   3의 2승 
            Math.round(10.6);    // 11,  10.6을 반올림
            Math.ceil(10.2);     // 11,  10.2를 올림
            Math.floor(10.6);    // 10,  10.6을 내림
            Math.sqrt(9);        // 3,   3의 제곱근
            Math.random();       // 0부터 1.0 사이의 랜덤한 숫자
        </script>
    </body>
</html>

문자

문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다. String이라고 한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert("coding everybody");         //문자
            alert('coding everybody');         //문자
            alert(typeof "1");                 //문자, 숫자를 따옴표로 감싸면 문자가 된다.
            alert(typeof 1);                   //숫자, 아래와 같이 따옴표 없는 숫자는 number가 출력된다
            alert('egoing\'s javascript')      //작은따옴표를 문자열 안에 포함시킬 수 있는 방법
            alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다");  
                                                // 여러줄의 표시 : \n는 줄바꿈을 의미하는 특수한 문자다.
            alert("coding"+" everybody");      //결과 : coding everybody (문자와 문자를 더할 때)
            alert("coding everybody".length)   //결과 : 16 (문자의 길이를 구할 때는 문자 뒤에 .length를 붙인다.)

        </script>
    </body>
</html>

변수의 선언

JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다. var을 생략 할수도 있지만 이것은 유효범위라는 것에 영향을 미친다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            var a = 1;
            alert(a+1);  //2
            
            var a = 2;
            alert(a+1);  //3

            var first = "coding";         //변수의 값이 꼭  숫자만 올 수 있는 것은 아니라는 것을 보여주기 위해서 만든 예제다.
            alert(first+" everybody");

            var a = 'coding', b = 'everybody';  //변수 a에 coding ,변수 b에 everybody를 활당하는 방법
            alert(a);
            alert(b);

        </script>
    </body>
</html>

변수가 없다면

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert(100+10);
            alert((100+10)/10);
            alert(((100+10)/10)-10);
            alert((((100+10)/10)-10)*10);  // 100에 10을 더하고, 10을 나눈 후에 다시 10을 빼고 거기에 10을 곱해야 한다고 치자.
                                           // 그리고 각 단계마다 그 결과를 출력
            
            a = 100;      //그런데 계산해야 할 값을 100이 아니라 1000으로 바꿔야 한다면 위의 코드를 모두 수정해야 할 것이다. 
                          //변수를 적용해보자.
            a = a + 10;
            alert(a);
            a = a / 10;
            alert(a);
            a = a - 10;
            alert(a);
            a = a * 10;      
            alert(a);   //위의 코드에서 첫번째 줄의 100을 다른 숫자로 바꾸면 나머지 로직에 대입되는 변수의 값이 모두 바뀐다. 
                        //수정해야 할 코드가 적다는 것은 그만큼 해야 할 일이 줄어든다는 의미고, 
                        //그 과정에서 버그가 발생할 가능성을 낮출 수 있다. 변수의 효용은 뒤에서 배우게 될 
                        //반복문, 조건문, 함수와 결합되면 더욱 더 중요해진다.
        </script>
    </body>
</html>

주석은 자바스크립트 코드 내에 있지만 자바스크립트로 해석되지 않는 일련의 기호를 의미합니다.

// : 한 줄 주석, 줄 바꿈을 할 경우 바뀐 줄의 글은 코드로써 활성화됩니다.
/* ~ */ : 여러 줄 주석, 줄 바꿈을 하더라도 주석 안에만 있다면 주석의 효과가 지속됩니다.

자바스크립트 코드는 줄바꿈을 행할 시 해당 코드의 명령이 끝났다고 간주하기 때문입니다.
하지만 한 줄 안에 2가지 이상의 명령을 할 경우에는 반드시 세미콜론을 붙여야합니다.
' ; '세미콜론은 어디서부터 어디까지가 하나의 명령어의 단위를 명확하게 알려주는 역활로 쓰입니다.

자바스크립트 코드 간의 띄어쓰기(여백)는 가독성 또는 코드의 구성 요소로서 역할을 합니다

Tab Key : 스페이스 바 4칸 정도의 여백(들여쓰기)를 줌, 가독성을 목적으로 사용되어 집니다.

값과 값이 있을때 이 두개의 값이 같은지 어느쪽의 값이 큰지를 나타내는 것

연산자

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호

a=1   // 변수 = 값  : 대입연산자

비교 연산자

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다.

== : 동등 연산자 : 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.
=== : 일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다.

//동등 연산자
alert(1==2)             //false
alert(1==1)             //true
alert("one"=="two")     //false 
alert("one"=="one")     //true

//일치 연산자
alert(1=='1');              //true
alert(1==='1');             //false

결론부터 말하면 == 연산자 대신 === 연산자를 쓰는 것을 강력하게 권한다. ===는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단하기 때문이다. (==과 ===의 차이점)

alert(null == undefined);       //true   
alert(null === undefined);      //false  : 값이없는것을 의도적으로 부여 === 값이없다.(프로그래머가 의도하지 않은 상황)
alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false

alert(0 === -0);                //true
alert(NaN === NaN);             //false


/* null과 undefined는 값이 없다는 의미의 데이터 형이다. 
null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태라고 생각하자.

NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.*/

!= : '!'는 부정을 의미한다. '같다'의 부정은 '같지 않다'이다. 이것을 기호로는 '!='로 표시한다. 아래의 결과는 !=의 결과인데 ==와 정반대의 결과를 보여준다.
!== : '!=='는 '!='와 '=='의 관계와 같다. 정확하게 같지 않다는 의미다. 예제는 생략한다.
> : 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다. '‹는 반대의 의미로 언급은 생략하겠다.
>= : 좌항이 우항보다 크거나 같다. ''‹='는 반대의 의미로 언급은 생략하겠다.


alert(1!=2);            //true
alert(1!=1);            //false
alert("one"!="two");    //true
alert("one"!="one");    //false

alert(10>20);   //false
alert(10>1);    //true
alert(10>10);   //false

alert(10>=20);      //false
alert(10>=1);       //true
alert(10>=10);      //true

조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.

조건문의 문법

if : 조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            if(true){                    // 실행결과는 'result : true'다. if 뒤에 true가 왔기 때문이다.
                alert('result : true');
            }
            
            if(false){                  //아무것도 출력하지 않을 것이다. if 뒤에 false가 왔기 때문이다.
                alert('result : true');
            }
            
            if(true){                  //결과는 12345를 출력할 것이다.
                alert(1);
                alert(2);
                alert(3);
                alert(4);
            }
            alert(5);
            
            if(false){              //결과는 5만 출력될 것이다.
                alert(1);
                alert(2);
                alert(3);
                alert(4);
            }
            alert(5);           
            /* 왜 그럴까? if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다. 
            거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다. */
        </script>
    </body>
</html>

else : 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

else if : else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다. else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다. else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
           if(true){           //결과는 1이다.
                alert(1);
            } else {
                alert(2);
            }
            if(false){        //결과는 2다.
                alert(1);
            } else {
                alert(2);
            }
            
            /* if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다.
            즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다. */
            
            if(false){         //결과는 2다.
                alert(1);
            } else if(true){
                alert(2);
            } else if(true){   //이미 앞에서 실행되어서 건너뛰게된다.
                alert(3);
            } else {
                alert(4);
            }
            
            if(false){       //결과는 3이다.
                alert(1);
            } else if(false){
                alert(2);
            } else if(true){
                alert(3);
            } else {
                alert(4);
            }
            
            if(false){       //결과는 4이다.
                alert(1);
                alert(1);
            } else if(false){
                alert(2);
            } else if(false){
                alert(3);
            } else {
                alert(4);
            }
            
            /*  else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다. */
        </script>
    </body>
</html>

변수와 비교연산자 / 조건문의 중첩

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            
        //변수와 비교연산자 그리고 조건문을 결합
           id = prompt('아이디를 입력해주세요.')          //prompt() 구문은 사용자가 입력한 값을 가져와서 
                                                       //id 변수의 값으로 대입한다. 
        if(id=='egoing'){
            alert('아이디가 일치 합니다.')               // 사용자가 입력한 값이 egoing이라면 '아이디가 일치 합니다'를
                                                      // 출력하고 그렇지 않다면 
                                                     //'아이디가 일치하지 않습니다'를 출력한다.
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
            
        //조건문의 중첩
            
            id = prompt('아이디를 입력해주세요.');  /*문 안에 다시 if문이 등장했다.
                                            즉 사용자가 입력한 값과 아이디의 값이 일치하는지를 확인한 후에 일치한다면
                                            비밀번호가 일치하는지 확인한 것이다.
                                            이렇게 조건문은 조건문 안에 중첩해서 사용될 수 있다.*/
        if(id=='egoing'){
            password = prompt('비밀번호를 입력해주세요.');
            if(password==='111111'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
        } else {
            alert('인증에 실패 했습니다.');
        }
        </script>
    </body>
</html>

논리 연산자

조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다.

&& : 좌항과 우항이 모두 참(true)일 때 참이된다.
|| : '||'는 '||'(오아)의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다.
기호는 통상 엔터키 위에 있는 원화표시 키를 쉬프트와 함께 누르면 입력된다. or 연산자라고 부른다.
! : '!'는 부정(not)의 의미로, Boolean의 값을 역전시킨다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
        
        //&&    
            
        /* 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다. 
        이러한 논리 연산자를 and 연산자라고 한다.*/ 
        if(true && true){
            alert(1);
        }
        if(true && false){
            alert(2);
        }
        if(false && true){
            alert(3);
        }
        if(false && false){
            alert(4);
        }lert('인증에 실패 했습니다.');
        }
        
        /* 다음 예제는 논리 연산자를 이용해서 이전 예제를 개선한 것이다. 
        중첩된 if문을 하나로 줄였다. 덕분에 코드의 복잡성도 낮아졌다. &&는 아래와 같은 의미를 만든다.
        "id의 값이 egoing이고 password의 값이 111111이면 참이다"
        즉 && 연산자의 좌항과 우항이 모두 참일 때 전체가 참이 되는 것이다.*/
        
         id = prompt('아이디를 입력해주세요.');
        password = prompt('비밀번호를 입력해주세요.');
        if(id=='egoing' && password=='111111'){
            alert('인증 했습니다.');
        } else {
            alert('인증에 실패 했습니다.');
        }
            
            
        // ||
            
        /*  결과는 1,2,3이 출력된다. 마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다. */
            if(true || true){
                alert(1);
            }
            if(true || false){
                alert(2);
            }
            if(false || true){
                alert(3);
            }
            if(false || false){
                alert(4);
            }
            
            /*다음 예제는 id 값으로 egoing, k8805, sorialgi 중의 하나를 입력하면 '인증 했습니다'가 출력되고, 
            그 외의 값을 입력하면 '인증에 실패 했습니다.'를 출력하는 예제다.*/
            id = prompt('아이디를 입력해주세요.');
            if(id==='egoing' || id==='k8805' || id==='sorialgi'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
            
            /*다음 예제는 id 값으로 egoing, k8805, 
            sorialgi 중의 하나를 사용하고 비밀번호는 111111을 입력하면 right 외의 경우에는 wrong를 출력하는 예다.*/
            
            id = prompt('아이디를 입력해주세요.');
            password = prompt('비밀번호를 입력해주세요.');
            if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
            
            /* 위의 예제에서는 or와 and를 혼합해서 사용하는 방법을 보여준다. id 값을 테스트 하는 구간을 괄호()로 묶었다.
             사용자가 id의 값으로 egoing 비밀번호를 111111을 입력했다면 연산의 순서는 아래와 같이 된다.

            (id=="egoing" or id=="k8805" or id=="sorialgi") : true가 된다.
            password=='111111' : true가 된다.
            true(1항) and true(2항) : true가 된다.
            id 비교를 할 때 괄호를 사용한 것은 사칙 연산을 할 때 괄호부터 계산하는 것과 같은 원리다. */  
            
            
            // !
            
            /* true를 false로 false를 true로 만든다. not 연산자라고 부른다. 아래의 결과는 4다. */
            if(!true && !true){
                alert(1);
            }
            if(!false && !true){
                alert(2);
            }
            if(!true && !false){
                alert(3);
            }
            if(!false && !false){
                alert(4);
            }
        </script>
    </body>
</html>

boolean의 대체제

01 : 조건문에 사용될 수 있는 데이터 형이 꼭 불린만 되는 것은 아니다. 관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다.
기타 false로 간주되는 데이터 형 : 다음은 false와 0 외에 false로 간주되는 데이터형의 리스트다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
        
        //01
         if(0){            //2를 출력한다. 
            alert(1)
        }
        if(1){              //자바스크립트에서 숫자1은 트루로 간주되기 때문이다.
            alert(2)
        }   
            
        //기타 false로 간주되는 데이터 형
            
        if(!''){                    // if문의 조건으로 !(부정) 연산자를 사용했기 때문에
                                    //각 조건문의 첫번째 블록이 실행되는 것은 주어진 값이 false이기 때문이다.
            alert('빈 문자열')       //빈 문자열은 fulse로 간주되어 진다. : 실행되지 않는다.
        }
        if(!undefined){
            alert('undefined');     //undefined는 자바스립트에서 fulse로 간주된다. : : 실행되지 않는다.
        }
        var a;
        if(!a){
            alert('값이 할당되지 않은 변수'); 
        }
        if(!null){
            alert('null');
        }
        if(!NaN){
            alert('NaN');
        }
        </script>
    </body>
</html>

while

while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

아래의 반복문은 i의 값을 1씩 순차적으로 증가시킴으로서 반복의 지속 여부를 결정하고 있다. 주석으로 첨부한 설명을 주의깊게 살펴보자.

whileView

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>codingEverybody</title>
  
  <script type="text/javascript">
      
//      document.write("Coding everybody <br/>"); // 결과 : Coding everybody
    
//      while(true){                              // 결과: 무한루프가 발생하게 됩니다.
//      document.write("Coding everybody <br/>"); // 
//      }
      
      var i = 0;                //결과 :  Coding everybody 10번 실행된다.
      while(i < 10){          // 반복이 실행될 때마다 coding everybody <br />이 출력된다. 
                                //<br /> 줄바꿈을 의미하는 HTML 태그
          document.write("Coding everybody "+i+"<br/>");
          i = i +1;             // i의 값이 1씩 증가한다.
      }
      
  </script>
</head>
<body>

</body>
</html>

for

for문은 조건식 안에서 (변수 선언 및 초기값 설정; 조건식; 증감식)으로 이루어져 있으며 초기값이 조건식에 참인 동안 명령문을 실행 합니다.

forView

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>codingEverybody</title>
  
  <script type="text/javascript">

      
//      for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
//    반복해서 실행될 코드
//     }
      
//       var i = 0;                //결과 :  Coding everybody 10번 실행된다.
//      while(i < 10){            
//          document.write("Coding everybody "+i+"<br/>");
//          i = i +1;             
//      }
      
      //for문으로 변환  :while문에 비해 간단하게 출력된다. 
      
      for(var i= 0; i < 10; i++){                      // i = i + 1 === i++
          document.write("Coding Everybody" +i+"</br>") ;
      }
    /* 위의 예제에서 초기화는 var i = 0;이다.  즉 변수 i의 값을 0으로 설정한 것이다. */
    /* 그 다음에는 '반복조건'인 i < 10이 실행된다. 현재 i의 값은 0이다. 
    //그렇기 때문에 이 조건은 참이다. 반복조건이 참이면 중괄호 안의 내용이 실행된다 */
    /*  i의 값이 0이기 때문에 'coding everybody0<br />'이라는 텍스트가 출력된다.*/
    /* '반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다.  */
    /* i++는 현재 i의 값에 1을 더하라는 의미다.  */
    /*  현재 i의 값은 0이다. 따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다.  */
    /*  이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다. 
    //결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료된다. */
    /* i = i + 1 === i++(기존의 값을 사용하고 1을 추가로더한다.)
    // == ++i (사용할때 i값을증가시키고 사용한다.): 거의 비슷하다.  // i=0; aleart(i++); : 결과 0 */

  </script>
</head>
<body>

</body>
</html>

반복문이 없다면

View

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>codingEverybody</title>
  
  <script type="text/javascript">

    //coding everybody를 10번 반복해서 출력
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
    document.write('coding everybody');
      
    //이 정도의 작업은 복사&붙여넣기를 이용해서도 할만하다. 
      
    //예를들어서 'coding everybody'를 1천번 출력해야 한다면 
    //위의 예제와 아래 예제의 코드 분량에 큰 차이가 생길 것이다.
    //이처럼 아래같은 간단한 코드의 반복문이 없다면, 1천번 1만번 반복해야하는 
     //소스에서는 적는데에 큰 어려움이 있었을 것입니다.
      
    //coding everybody 뒤에 붙는 숫자를 2의 배수
     
    var i = 0;
    while(i < 10){
        document.write('coding everybody '+(i*2)+'<br />');
        i++;
    }
  </script>
</head>
<body>

</body>
</html>

반복문의 제어 : break

반복작업을 중간에 중단시키고 싶다면 어떻게 해야할까? break를 사용하면 된다.

break View

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>codingEverybody</title>
  
  <script type="text/javascript">

    for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
    }
      
//      결과  :
//      coding everybody 0
//      coding everybody 1
//      coding everybody 2
//      coding everybody 3
//      coding everybody 4
      
      /* 종료조건에 따르면 10행이 출력돼야 하는데 5행만 출력되었다. 2행의 if(i === 5) 에 의해서
       i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다.
        반복문 안에서 break가 실행되면 반복문을 즉시 종료시키는 것이다 */
      
  </script>
</head>
<body>

</body>
</html>

반복문의 제어 : continue

실행을 즉시 중단 하면서 반복은 지속되게 하려면 어떻게 해야 할까?

continue View

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>codingEverybody</title>
  
  <script type="text/javascript">
      
    //이전 예제의 break를 continue로 변경했을 뿐이지만 결과는 전혀 다르다.
      
    for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
    }
    
    //결과 :
    //coding everybody 0
    //coding everybody 1
    //coding everybody 2
    //coding everybody 3
    //coding everybody 4
    //coding everybody 6
    //coding everybody 7
    //coding everybody 8
    //coding everybody 9

      
  //숫자 5가 보이지 않는다. 왜 그럴까? i의 값이 5가 되었을 때 실행이 중단 됐기 때문에
  //continue 이후의 구문이 실행되지 않은 것이다. 
  //하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력된 것이다.
      
  </script>
</head>
<body>

</body>
</html>

반복문의 중첩

View

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>codingEverybody</title>
  
  <script type="text/javascript">
      
    // 0부터 9까지 변수 i에 순차적으로 값을 할당        
    for(var i = 0; i < 10; i++){
        // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
        for(var j = 0; j < 10; j++){    
            // i와 j의 값을 더한 후에 출력
            // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
            // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
            document.write(String(i)+String(j)+'<br />');
        }
    }       //문자와 문자를 더해주면서 안에있는 숫자도 문자화가 됩니다.
      
      //결과 :
      //00
      //01
      //...
      //99
      
  </script>
</head>
<body>

</body>
</html>

]

"함수"는 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여줍니다.

함수의 작성순서는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온 뒤 소괄호에 인자라는 값이 차례로 들어오는데 이 값을 함수를 호출할 때 함수의 로직으로 전달될 "변수"라고 합니다.
함수의 실행문은 중괄호 안에 작성됩니다.
인자는 생략이 가능합니다.

function 함수명([인자...[,인자]]){
코드
return 반환값
}

함수의 사용 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
   /* 
    function 함수명([인자...[,인자]]){
        코드
        return 반환값
    }
    */
//     // 함수 정의
//     function numbering(){    
//       document.write(1);
//     }
//     numbering(); //numbering에 "()"가 없을 경우 numbering을 변수로 판단함. 즉 "()"는 함수를 호출
//                  //document.write(1);과 같은 효과
    function numbering(){
      i = 0;
      while(i < 10){
        document.write(i);
        i += 1;     //1 씩 증가 
      }
    }               
    numbering();    //결과값 : 0~9
  </script> 
</body>
</html>

함수의 효용성

반복문 - 기계적으로 일정한 반복을 그 자리에서 실행할 경우 사용됩니다. 즉 반복문 내에서만 효용성을 발휘합니다.
함수 - 반복되는 로직이 여러가지 맥락에서 반복되서 실행할 경우 사용됩니다. 즉 함수는 다양한 코드 내에서 호출되어 사용될 때 효용성을 발휘합니다.
- 함수의 핵심은 "재사용성"에 있습니다.
- 재사용성이란 동일한 코드를 여러 곳에서 동일하게 사용할 수 있게 만드는 것을 의미합니다.
- 수정, 개선 등 변경사항이 있을 시 이를 수정하는 과정에서 편리성을 줄 수 있습니다.(유지보수의 용이)
- 동일한 로직이 존재 시 동일한 함수를 사용했을 것이라는 추측이 가능함으로 가독성이 높아집니다.

함수의 효용성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
   //0~9까지의 숫자 배열을 5번 반복할 때
//    var i = 0;
//    while(i < 10){
//     document.write(i);
//     i += 1; 
//    }
//    var i = 0;
//    while(i < 10){
//     document.write(i);
//     i += 1; 
//    }
//    var i = 0;
//    while(i < 10){
//     document.write(i);
//     i += 1; 
//    }
//    var i = 0;
//    while(i < 10){
//     document.write(i);
//     i += 1; 
//    }
//    var i = 0;
//    while(i < 10){
//     document.write(i);
//     i += 1; 
//    }
    //함수 사용 시
    function numbering(){
      var i = 0;
      while(i < 10){
        document.write(i + "<br>");
        i += 1; 
      }
    }
//     numbering();
//     numbering();
//     numbering();
//     numbering();
//     numbering();
    //for 문을 사용하여 5번 호출하기
    for(var i = 0; i < 5; i++){
      numbering();
    }
  </script> 
</body>
</html>

함수의 입력과 출력

함수의 기본적인 역할은 입력된 값을 연산해서 출력하는 것으로 이를 통해 함수의 핵심은 입력과 출력이라는 것을 알 수 있습니다.

출력은 "return"을 사용합니다.
return의 역할
- 해당 함수를 종료시킵니다.
- 해당 함수의 전 값까지 함수의 출력값으로 반환합니다.

출력 : return

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function get_member1(){
      return 'egoing';
    }

    function get_member2(){
      return 'k8805';
    }
    
    //return을 반복해서 쓴 경우
    function get_member3(){
      return 'egoing';  
      return 'leezche';
      return 'graphite';
    }                      //해당 함수는 첫 번째 return 값인 'egoing'을 반환하고 종료됨.
                           //return '값' 이후의 값들은 동작하지 않음

    alert(get_member1());
    alert(get_member2());
    alert(get_member3());  //결과값 : egoing
  </script> 
</body>
</html>

입력

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
//     function get_argument(arg){    //소가로"()"안의 값은 입력 값, 
//       return arg;                  //return은 출력 값
//     }

//     alert(get_argument(1));        //해당 소가로의 값 "1"은 함수의 소가로의 값으로 대체됨
//                                    //var arg = 1
//     alert(get_argument(2));        //해당 소가로의 값 "2"은 함수의 소가로의 값으로 대체됨
//                                    //var arg = 2  
    
    function get_argument(arg){       
    return arg*1000;                  
    }

    alert(get_argument(1));        //결과 값은 1000
  </script>
</body>
</html>

복수의 인자

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function get_arguments(arg1, arg2){
      return arg1 + arg2          // 입력값은 여러개를 받을 수 있으나 return 값, 즉 출력값은 하나만 받을 수 있음.
    }

    alert(get_arguments(10, 20)); // arg1 : 10, arg2 : 20, 결과값: 30
    alert(get_arguments(20, 30)); // 결과값: 50
  </script>
</body>
</html>

함수의 다양한 형태 : 변수 이용, 익명 함수

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
  //변수(var..)에 함수(function)가 대입된 경우
  var numbering = function (){
    i = 0;
    while(i < 10){
      document.write(i);
      i += 1;
    }   
  }
  //함수 : 위의 값과 동일함
//   function numbering(){
//     i = 0;
//     while(i < 10){
//       document.write(i);
//       i += 1;
//     }   
//   }    
  numbering();
  
//익명 함수 : 함수에 지정된 이름이 없는 경우, 1회성 호출을 할 경우    
  (function(){
    i = 0;
    while(i < 10){
      document.write(i);
      i += 1;
    }   
  })();// (정의된 함수) ():함수 호출을 위한 소가로 - 정의된 함수와 함수의 호출을 한 문장에 사용 가능
  </script>
</body>
</html>

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입을 의미합니다.

변수 - 하나의 데이터를 저장하기 위한 것
배열 - 여러 개의 데이터를 하나의 변수에 저장하기 위한 것

배열의 생성

대괄호([])는 배열을 만드는 기호로서 대괄화 안에 데이터를 콤마(,)로 구분해서 나열하는 것으로 배열을 생성할 수 있습니다.

var member = ['egoing', 'k8805', 'sorialgi']

대괄호 안에 담긴 각각의 데이터를 통칭 '원소(Element)"라고 부릅니다.

색인([index]) - 배열 내 데이터에 지정된 값으로 첫 번째 원소는 0부터 시작됩니다.
첫 번째 원소 : 0, 두 번째 원소 : 1, 세 번째 원소 : 2 ...

배열의 생성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
//     var member = 'egoing';
//     var member = 'k8805';
//     var member = 'sorialgi';
    var member = ['egoing', 'k8805', 'sorialgi']  // "대괄호([])"는 배열을 의미함, 하나의 변수 안에  3 개의 데이터(3개의 원소)가 존재
    alert(member[0]);
    alert(member[1]);
    alert(member[2]);                             //[index] : 한국어로 색인, 영어로는 인덱스(index)
  </script>
</body>
</html>

배열의 효용성

함수는 여러 개의 값을 입력할 수 있으나 반환할 수 있는 값는 오직 하나의 값입니다.

배열의 효용성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    // 함수로 하나의 값만을 반환할 경우
//     function get_member1(){
//       return 'egoing';             //함수는 하나의 return 값만을 가질 수 있음
//     }
//     document.write(get_member1());
 
//     function get_member2(){
//       return 'k8805';
//     }
//     document.write(get_member2());

//     function get_member3(){
//       return 'sorialgi'
//     }
//     document.write(get_member3());
    
    //함수를 배열로 표기할 경우
    function get_members(){
       return ['egoing', 'k8805', 'sorialgi'];
    }
    var members = get_members();
    document.write(members[0] + '<br>');
    document.write(members[1] + '<br>');
    document.write(members[2]);
  </script>
</body>
</html>

배열의 사용

배열 사용의 핵심은 반복문과 결합하였을 때 나타납니다.

배열을 사용할 경우에 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있습니다.

배열의 사용 : 배열과 반복문의 결합

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function get_members(){
      return ['egoing', 'k8805', 'sorialgi', 'leezche'];
    }
    members = get_members();
    
//     document.write(member[0].toUpperCase()+"<br>")
//     document.write(member[1].toUpperCase()+"<br>")
//     document.write(member[2].toUpperCase()+"<br>")
//배열과 반복문의 결합    
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
    for(i = 0; i < members.length; i++){         //.length : 배열 내 원소의 값, 즉 개수를 나타내줌
// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
      document.write(members[i].toUpperCase() + '<br>');  //toUpperCase 류의 함수를 내장 함수라 칭함. <--> function의 값을 사용자가 직접 작성함 : 사용자 정의 함수
    }
  </script>
</body>
</html>

배열의 제어

배열의 주된 목적은 복수의 데이터를 효율적으로 관리, 전달하는 것에 있으며, 배열이란 결과적으로 이를 목적으로 고안된 데이터 타입을 의미합니다.

배열의 크기

배열의 크기를 알아내기 위해서는 "length"를 사용해야 합니다.

var arr = [1, 2, 3, 4, 5];
alert(arr.length);
결과값 : 5

배열의 조작

"push"와 "concat"는 배열의 끝을 추가하는 명령입니다.

함수 "push"는 인자로 전달된 값을 배열에 추가하는 명령입니다.

var li = [a, b, c, d, e];
li.push('f'); // 배열(li)에 인자 "f" 값을 추가합니다.
결과값 : li[a, b, c, d, e, f]

함수 "concat"은 복수의 원소를 배열에 추가하는 명령입니다.

var li = [a, b, c, d, e];
li = li.concat(['f', 'g']); // 배열(li)에 인자 "f"와 "g" 값을 추가합니다.
결과값 : li[a, b, c, d, e, f, g]

"unshift"는 배열의 시작점에 원소를 추가하는 명령입니다.

함수 "unshift"는 인자로 전달한 값을 배열의 첫 번째 원소로 추가하고, 이후 이어지는 배열의 기존 값들의 색인을 1씩 증가시킵니다.

var li = [a, b, c, d, e];
li.unshift('z'); / 배열의 시작점에 원소 'z'를 추가합니다.
결과값 : li[z, a, b, c, d, e] / 'z'로 시작됩니다.

함수 "splice"의 사용방법은 아래의 예시와 같습니다.

array.splice(index, howmany, element1, ... , elementN);
1) index - 배열의 순번(0, 1, 2, 3 ...) / 배열에 추가할 특정 배열의 위치를 가르킴
2) howmany - index에서부터 제거될 원소들의 수

var a =['a', 'b', 'c']; //변수 a의 결과값 : a ["a", "b", "c"]
a.splice(1, 1, 'x', 'y'); // 원소 b(index : 1)를 삭제하고(howmany : 1) 그 자리에 'x', 'y'를 순서대로 넘어줍니다.
결과값 : a['a', 'x', 'y', 'c']

예시 설명 - "splice"는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후 리턴, 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가합니다.

배열의 제거

"shift"는 배열의 첫번째 원소를 제거하는 방법입니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift(); // 배열(li)의 첫번째 원소 "a"를 제거합니다.
결과값 : li['b', 'c', 'd', 'e'];

함수"pop"은 배열 끝점의 원소를 제거합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop(); // 배열(li)의 끝점의 원소 "e"를 제거합니다.
결과값 : li['a', 'b', 'c', 'd'];

배열의 정렬

"sort"는 배열의 원소를 정렬해주며, "reverse"는 정렬을 하되 역순으로 정렬합니다.

var li = ['c', 'e', 'a', 'b', 'd'];
// 배열의 정렬
li.sort();
결과값 : li['a', 'b', 'c', 'd', 'e']
// 배열의 정렬(역순)
li.reverse();
결과값 : li['e', 'd', 'c', 'b', 'a']

정렬의 과정 간 조건이 주어질 경우 'sort'를 활용합니다.

array.sort(sortfune)
1) sortfune : 원소들 간에 우선인자를 감별해내는 조건

객체(object)는 연관된 데이터를 받아내는 그릇의 역할을 한다는 점에서 배열과 유사하나, 객체의 경우 배열과 달리 식별자로 문자를 이용한다는 점에서 차이점을 보입니다.

다른 언어에서는 연관배열(associative array), 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 객체로 분류됩니다.

객체의 생성

var grades = {'egoing' : 10, 'k8805' : 6, 'sorialgi; : 80};
1) 객체는 배열과 달리 대가로([])가 아닌 중가로({})를 사용함
2) 객체는 'egoing' 등과 같이 문자열을 인덱스(index)로 사용함

var grades = {};
grades['egoing'] = 10;
//egoing은 key, 10은 value
grades['k8805'] = 6;
//1) grades['k8805']는 grades.k8805와 동일한 값을 낼 수 있다.
//2) ['k8805']는 숫자열이 아닌 문자열로 취급받기 때문에 ['k88'+'05']의 값도 동일합니다.
//3)grades['k88'+'05']와 grades.'k88'+'05'는 동일하지 않다.
grades['sorialgi'] = 80;

객체와 반복문의 관계

배열은 저장된 데이터들이 순서를 가지고 있으나 ,객체의 경우 순서가 없는 대신 'key'와 'value'로 데이터를 구분할 수 있습니다.

객체와 반복문의 관계

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>  
<!--   <script type="text/javascript">
    var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
      for(key in grades) {
//         document.write(key);   //결과값 : egoing, k8805, sorialgi
//         document.write(grades[key] + "<br>"); //결과값 : 10, 6, 80, 객체에 저장된 값을 가져옴
         document.write("<li>key : " + key + " value : " + grades[key] + "</li>");
      }
//결과값    
// key :   egoing value : 10
// key :   k8805 value : 6
// key :   sorialgi value : 80
  </script> -->

<!-- 자바스크립트를 이용해 목록 만들기 -->
<ul>
  <script type="text/javascript">
    var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
      for(key in grades) {
//         document.write(key);   //결과값 : egoing, k8805, sorialgi
//         document.write(grades[key] + "<br>"); //결과값 : 10, 6, 80, 객체에 저장된 값을 가져옴
         document.write("<li>key : " + key + " value : " + grades[key] + "</li>");
      }
//결과값    
// key :   egoing value : 10
// key :   k8805 value : 6
// key :   sorialgi value : 80
  </script>
</ul>  
</body>
</html>

Tip - for 문은 객체 뿐만 아니라 배열에서도 사용이 가능합니다.

var arr = ['a', 'b', 'c'];
for(var name in arr){
document.write(name); // 결과값 : 0 1 2
document.write(arr[name]); // 결과값 : a b c
}

객체지향 프로그래밍

객체에는 객체를 담는 것 뿐만 아니라 함수도 담을 수 있습니다.

객체지향 프로그래밍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>  
<script type="text/javascript">
 var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();
</script>
</body>
</html>

모듈화를 이루는 방법 중 하나는 코드를 여러개의 파일로 분리하는 것입니다.

자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있습니다.(재사용성)
코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선됩니다.
코드 수정 시에는 필요한 로직을 빠르게 찾을 수 있습니다.
필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있습니다.
한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약할 수 있습니다. 단, 이는 브라우저에서만 해당됩니다.

모듈의 정의

javascript는 모듈이라는 기능을 제공하지 않는 대신에 호스트 환경(브라우저, node.js, google apps script...)을 제공합니다.

호스트 환경에 따라 모듈화 방법도 달라지기 때문에 자바스크립트가 구동되는 환경에 대한 이해가 중요합니다.

모듈의 효용성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="assets/js/greeting.js"></script> <!-- src : 속성 - greeting.js란 파일을 읽어서 script 태그 사이에 집어 넣는 것과 같은 효과를 줍니다. -->
</head>
<body>
    <script>
    //모듈이 없는 경우  : 본 함수를 이용한 반복 사용 - 유지보수 어려움, 유지보수비용 낭비
//         function welcome(){
//             return 'Hello world'
//         }
//        alert(welcome());
    //head에 속성값 "greeting.js를 삽입한 경우 : 모듈이 있는 경우   
        alert(welcome()); // 함수는 js 값에 넣어진 상태
    </script>
</body>
</html>

Javascript와 HTML을 구별하는 HTML태그가 바로 script 태그입니다.
앞선 예시는 src 속성이 있는 파일을 다운로드해서 함수를 실행시킨 경우입니다. 이 경우 HTML 파일 내에 해당 함수가 정의되어 있지 않음에도 실행이 가능합니다.

Node.js에서의 모듈 로드

모듈을 로드하는 방법은 호스트 환경에 따라서 달라집니다.

node.circle.js (로드될 대상) : 읽음을 당함

var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};

node.demo.js (로드의 주체)

var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
+ circle.area(4));

결과값

F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js The area of a circle of radius 4 is 50.26548245743669

객체지향 프로그래밍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>  
<script type="text/javascript">
 var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();
</script>
</body>
</html>

라이브러리

라이브러리란 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미합니다.

라이브러리는 모듈과 비슷한 개념이지만, 모듈을 자세히 살펴보면 모듈이란 프로그램을 구성하는 작은 부품으로서의 로직을 의미합니다.

제이쿼리(jQuery) 사용 방법

홈페이지(http://jquery.com/)에 들어갑니다.
Download 메뉴로 들어가 jQuery 파일을 다운받습니다.
- API Documentation(바로가기을 통해 jQuery 라이브러리 안의 로직을 사용할 수 있습니다.
- API Documentation : jQuery 명령어 사용 설명서

jQuery 사용 예제

<!DOCTYPE html>
<html>
<head>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <!-- jQuery를 사용하지 않을 경우 -->
<!--     <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script> -->
  
    <!--jQuery을 사용할 경우-->
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이며. 이는 프로그래밍 언어를 통해서 조작할 수 있습니다.

UI는 "User Interface"의 약자로 사용자와 컴퓨터를 이어주는 접점 혹은 중계자의 역할을 합니다.
- 예시 - 스피커, 디스플레이 등의 출력장치, 입력장치 등
API는 "Application Programming Interface"의 약자로 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미합니다.
UI와 APT의 접점에 의한 관계를 소위 Interface라고 부릅니다.

레퍼런스와 튜토리얼

자바스크립트 관련 자료는 크게 레퍼런스와 튜토리얼 2가지로 나눌 수 있습니다.

튜토리얼(Tutorial)이란 안내서를 의미하며, 언어의 문법을 설명하는 것이 통상에 알려진 튜토리얼의 모습입니다.
레퍼런스(Reference)란 명령어의 사전을 의미합니다.

참고자료

자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분됩니다.

자바스크립트 API - 자바스크립트에서 기본적으로 제공하는 API입니다.
ECMAScript (표준문서)
자바스크립트 사전 (생활코딩)
자바스크립트 레퍼런스 (MDN)
jscript 레퍼런스 (MSDN)

호스트 환경의 API - 각각의 호스트 환경마다 사용할 수 있는 API는 다릅니다.
웹브라우저 API
Node.js API
Google Apps Script API

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구이며, 하나의 언어로 판단할 수 있습니다.

다수의 여러 정보 속에서 필요한 정보를 찾아내는 경우에 정규 표현식을 필요로 합니다.
다수의 여러 정보 가운데 필요한 정보를 찾아내 치환해야 하는 경우에도 정규 표현식은 필요로 합니다.

정규표현식 생성

정규표현식은 컴파일(compile)과 실행(execution), 두 가지 단계로 이뤄집니다.

컴파일이란 우리가 원하는 대상, 즉 검출하고자 하는 패턴을 찾는 일을 의미합니다.
- 정규표현식에서 패턴을 만드는 방법은 크게 정규표현식 리터럴과 정규표현식 객체생성자, 2가지로 나눠집니다.
- 정규표현식 리터럴과 정규표현식 객체생성자는 같은 대상을 다뤄냈을 경우 동일한 결과값을 가집니다.
실행이란 어떠한 대상에 대하여 작업을 행하는 것을 의미합니다.

정규표현식 리터럴

var pattern = /a/

변수를 지정하고 찾고자 하는 문자열을 양 옆에 "/"를 기재합니다.

정규표현식 객체생성자

var pattern = new RegExp('a');

"RegExp"는 "Regular Experience"의 약자이며, 객체를 의미합니다.

정규표현식 메소드 실행

정규표현식을 통해 행하는 작업은 크게 추출, Test, 치환, 이 3가지로 나눠볼 수 있습니다.

RegExp.exec()

RegExp 위치에는 객체를 입력합니다.
() 위치 안에는 검색하고자 하는 대상을 입력합니다.
.exec()는 객체에서 원하는 대상을 찾아내 배열로서 리턴하는 함수/메소드입니다.
.exec()에 의한 작업은 결과적으로 추출작업을 칭합니다.

var pattern = /a/;
//정규표현식 리터럴
console.log(pattern.exec('abcdef'));
// 결과값 ["a"]
//실행결과는 문자열 a를 값으로 하는 배열을 리턴함.
console.log(pattern.exec('bcdefg'));
// null
//인자 'bcdef'에는 a가 없기 때문에 null 값을 리턴함.

var pattern = /a./;
pattern.exec('abcde');
//결과값 : ["ab"]
//변수 값에는 a 외에도 마침표(.)과 찍혀있는데 이 또한 "하나의 문자"라는 특수한 의미를 지님.

RegExp.test()

"test"는 인자 안에 패턴에 해당되는 문자열의 유무에 따라 true/false 값을 리턴하는 함수입니다.

.exec가 추출작업을 행한다고 하였을 때, test는 정규표현식의 주된 작업 3가지 가운데 test를 행합니다.

var pattern = /a./;
console.log(pattern.test('abcdef'));
// 결과값 : true
console.log(pattern.test('bcdefg'));
// 결과값 : false

문자열 메소드 실행

String.match()

var pattern = /a./;
console.log('abcdef'.match(pattern));
//결과값 : ["a"]
console.log('bcdefg'.match(pattern));
//결과값 : null

String.replace()

var pattern = /a./;
var str = "abcdef"
console.log(str.replace(pattern, 'A')); // 문자열 str : abcdef에서 a를 찾아(pattern) 대문자 A로 바꿈
//결과값 : Abcdef

옵션

정규표현식 패턴을 만들 때 옵션을 설정할 수 있으며 옵션에 따라서 검출되는 데이터는 달라집니다.

i

"i"를 붙이면 대소문자를 구분하지 않습니다.

var xi = /a/;
console.log("Abcde".match(xi));
//결과값 : null, 소문자 "a"를 지정하였기 때문에 Adobe의 대문자 "A"는 결과에 해당되지 않는다.
var oi = /a/i;
console.log("Abcde".match(oi));
//결과값 : ["A"];, 소문자 "a"를 지정했음에도 대문자 "A"를 결과로 내놓는 이유는 "i"의 존재 때문이다.

g

"g"를 붙이면 검색된 모든 결과를 리턴하는 것으로 "g"란 "global"의 약자입니다.

var xg = /a/;
console.log("abcdea".match(xg));
//결과값 : ["a"], a 값이 두 개있지만, 하나의 값만이 결과값으로 표기됨
var og = /a/g;
console.log("abcdea".match(og));
//결과값 : ["a","a"], "g"가 붙는 것으로 인해 모든 결과값이 리턴되기 때문에 a 값 2개가 모두 결과값으로 표기됨

i와 g과 같이 사용될 경우

var ig = /a/ig;
//대소문자 구분하지 않고(i) 모든 결과값을 리턴하겠다(g)는 것을 나타냄
console.log("AabcdAa".match(ig));
//결과값 : ["A", "a", "A", "a"], AabcdAa 내의 모든 a값(ig)를 대소문자 가리지 않고 결과값으로 표기함.

캡처

그룹을 지정하고 지정된 그룹을 다시금 가져와 사용하는 개념을 "캡처"라고 합니다.

기호 "$"를 사용하며 아래의 예시 코드는 coding과 everybody의 순서를 역전시키는 상황입니다.

var pattern = /(\w+)\s(\w+)/;
//"\w+" 란 a~z까지의 대문자가 하나 이상의 값을 지니고 있음을 의미함.
// 역슬래시("\") + 소문자 w는 a ~ z까지의 알파벳 대문자를 의미함.
// "w+"의 "+"는 수량자로 하나 이상의 값을 의미하는 것으로 해당 예시의 경우 "#"의 경우 해당 값에 속하지 않지만, "A"를 비롯해 "AA"까지 해당 값에 속하게 됨
// 역슬래시("\") + 소문자 s는 white-space(공백)를 의미함, coding과 everybody 사이에 공백을 줌으로 하나의 단어가 아닌 두개의 단어로 인식되도록 함.
var str = "coding everybody";
//"coding everybody"의 경우 var result = str.replace(pattern, "$2, $1");
console.log(result);
// 결과값 : everybody, coding

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
return ''+url+'';
});
console.log(result);
//결과값 : 생활코딩 : http://opentutorials.org/course/1 입니다.
네이버 : http://naver.com 입니다.

사례 TIP

정규표현식의 시각화

유효범위(Scope)는 변수의 수명을 의미합니다.

유효범위VIEW

아래 첫번째 예제의 함수에서는 "fscope"는 자신, 즉 함수 내에 선언된 것이 아닌 함수 밖에 선언된 변수 "vscope"에 접근이 가능합니다.
- 외부의 변수 'vscope'를 두고 전역변수(global variable)라고 합니다.
- 전역변수는 코드 전 지역에서 접근이 가능합니다.
아래 두번째 예제의 함수에서는 "fscope" 내에 변수 "vscope"가 존재하기에 alert의 vscope는 외부의 변수가 아닌 내부의 변수를 가리키게 됩니다.
- 함수 안에 있는 변수 'vscope'를 지역변수(local variable)라고 합니다.
- 지역변수는 해당 함수 안에서만 접근이 가능합니다.
코드 내에서 똑같은 이름의 변수를 사용하는 경우가 잦은 편이기 때문에 전역변수의 사용은 버그의 잦은 원인입니다. 그렇기 때문에 지역변수가 주되게 사용되어야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
//   var vscope = 'global';
//   function fscope(){
//     alert(vscope);
//   }
//   fscope();               //결과값 : global
    
//지역변수를 넣어줬을 때    
//       var vscope = 'global';
//   function fscope(){
//     var vscope = 'local';    //함수 fscope의 지역변수
//     alert(vscope);
//   }
//   fscope();                  //결과값 : local

// var 언급이 있을 때    
//   var vscope = 'global';        //전역변수 
//   function fscope(){
//     var vscope = 'local';       //지역변수    
//   }
//   fscope();
//   alert(vscope);                //결과값 : global 
  
// var 언급이 없을 때    
//   var vscope = 'global';
//   function fscope(){
//       vscope = 'local';         //전역변수
//   }
//   fscope();
//   alert(vscope);                //결과값 : local 
    
  var vscope = 'global';
  function fscope(){
     var vscope = 'local';      
     vscope = 'local';              //지역변수 "vscope"에 엮임
  }
  fscope();
  alert(vscope);                //결과값 : local   
  </script>
  
</body>
</html>

유효범위의 효용

전역/지역변수의 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
// 전역변수의 사용    
//     function a (){
//       i = 0;                           //var이 기재되지 않았기 때문에 i의 값이 for 문까지 유효하게 작용됨.
//     }
//     for(var i = 0; i < 5; i++){        
//       a();
//       document.write(i);               // 결과값 : 무한 반복
//     }
// 지역변수의 사용        
    function a (){
      var i = 0;                          // 변수 i의 값이 함수 a의 지역변수로 적용됨
    }
    for(var i = 0; i < 5; i++){
      a();
      document.write(i);                  // 결과값 : 01234
    }
  </script>
  
</body>
</html>

전역변수의 사용

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용합니다.

전역변수의 불가피한 사용

전역변수를 사용하고 싶지 않을 시에는 익명함수를 호출함으로서 해당 코드의 목적을 달성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
//전역변수의 사용    
// var MYAPP = {}              //전역변수
// MYAPP.calculator = {
//     'left' : null,
//     'right' : null
// }
// MYAPP.coordinate = {
//     'left' : null,
//     'right' : null
// }
 
// MYAPP.calculator.left = 10;
// MYAPP.calculator.right = 20;
// function sum(){
//     return MYAPP.calculator.left + MYAPP.calculator.right;
// }
// document.write(sum());      // 결과값 : 30
    (function(){                //별도의 함수명이 지정되어 있지 않은 경우에는 익명 함수로 불림
      var MYAPP = {}            //임의의 익명 함수 안에서 선언된 지역변수로 변환됨
      MYAPP.calculator = {
          'left' : null,
          'right' : null
      }
      MYAPP.coordinate = {
          'left' : null,
          'right' : null
      }
      MYAPP.calculator.left = 10;
      MYAPP.calculator.right = 20;
      function sum(){
          return MYAPP.calculator.left + MYAPP.calculator.right;
      }
      document.write(sum());
    }());
  </script>
</body>
</html>

유효범위의 대상 : 함수

여타의 언어들이 블록에 대한 유효범위를 제공하는 것에 반하여 자바스크립트는 함수에 대한 유효범위만을 제공합니다.

함수의 중가로({}) 안에서 선언된 변수만이 지역변수가 되며, 그 외의 for 문이나 if문에서 나타나는 변수는 지역변수로서의 의미를 갖지 않습니다.
결과적으로 자바스크립트에서의 지역변수는 함수에서만 유효합니다.

함수에 대한 유효범위

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
  //자바스크립트에서 허용되지 않는 코드 : 함수와 함께 사용됨  
//   for(int i = 0; i < 10; i++){
//     String name = "egoing";         //var name = "egoing"
  // 변수 "name"은 함수 string과 함께 사용되는 것으로 for문에 속한 지역변수에 위치하게 됨 >>> for 문 밖에서 name 변수는 인식되지 않음
//   }
//   System.out.println(name);         //console.log(name)
    
  //자바스크립트에서 가능한 코드
  for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
  //var로 변수를 선언한 경우, for문 안 쪽 말고도 바깥쪽에서도 해당 변수 "name"을 인식할 수 있음  
  }
  alert(name);
  //결과값 : coding everybody  
  </script>  
</body>
</html>

정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖습니다.

유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고도 합니다.

정적 유효범위

아래의 예시에서 함수 b의 유효범위는 함수 b가 선언된 지점의 값이며, 함수 b가 함수 a에서 호출된 시점의 값(지역변수)을 가리키지 않습니다.
결과적으로 "사용될 때"가 아닌 "정의될 때"의 전역변수가 사용되게 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
  var i = 5;                  // 전역변수
  function a(){
    var i = 10;               // 함수 a의 지역변수
    b();                      // 함수 b의 값을 불러옴
  }
  function b(){
    document.write(i);         //함수 b에는 별개의 지역변수가 존재하지 않기 때문에 전역변수(5)에 영향을 받음
  }                            //함수 b의 값은 함수 a에 호출된 시점에서의 값이 아닌 정의될 때의 값을 가리킴
  a();
  //결과값: 5
  </script>
</body>
</html>

값으로서의 함수

JavaScript에서는 함수도 객체입니다.

JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점입니다.

function a(){}

함수는 객체의 값으로 포함될 수 있습니다.
- 메소드(method) - 객체의 속성 값으로 담겨진 함수를 뜻합니다.

a = { b:function(){}};

함수는 값이기 때문에 다른 함수의 인자로 전달될 수 있습니다.

함수의 용도1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function cal(func, num){
      return func(num)
    }
    function increase(num){
      return num+1
    }
    function decrease(num){
      return num-1
    }
    alert(cal(increase, 1));
    alert(cal(decrease, 1));
  </script>
  
</body>
</html>

alert 값을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달합니다.
함수 cal은 첫번째 인자로 전달된 increase를 실행하고 두번째 인자의 값이 1을 인자로 전달합니다.
함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴합니다.

함수의 용도2

함수는 함수의 리턴 값 혹은 배열 값으로도 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //리턴 값으로 사용할 경우 
    // function cal(mode){
    //   var funcs = {
    //     'plus' : function(left, right){return left + right},
    //     'minus' : function(left, right){return left - right}
    //   }
    //   return funcs[mode];
    // }
    // alert(cal('plus')(2,1));
    // alert(cal('minus')(2,1));
    //배열의 값으로 사용할 경우
    var process = [
      function(input){ return input + 10;},
      function(input){ return input * input;},
      function(input){ return input / 2;}
    ];
    var input = 1;

    for(var i = 0; i < process.length; i++){
      input = process[i](input);
    }
    alert(input);
  </script>

</body>
</html>

콜백

처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있습니다.

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있습니다.

콜백 : 처리의 위임

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function sortNumber(a,b){
    // a와 b의 순서를 바꾸면 정렬순서가 반대가 됨.
     return b-a;
    }
    var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
    alert(numbers.sort(sortNumber)); 
    // 결과값 :array, [20,10,9,8,7,6,5,4,3,2,1]
  </script>
  
</body>
</html>

비동기처리

시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다.

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킵니다.

내부함수

자바스크립트는 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있습니다. 이를 "내부함수"라고 합니다.

내부 함수

내부함수는 외부함수의 지역변수에 접근 할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">

//     function outter(){          //외부함수
//       function inner(){         //내부함수 
//         var title = 'coding everybody'; 
//         alert(title);
//       }
//       inner();
//       }
//     outter();

// 내부함수가 외부함수의 지역변수에 접근할 경우 
    function outter(){                   //외부 함수
      var title = 'coding everybody';    //외부 함수 "outter"의 지역변수
      function inner(){                  //내부 함수
        alert(title);
      }
      inner();
      }
      outter();                          //결과값 : coding everybody         
  </script>
  
</body>
</html>

클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제를 의미합니다.

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있으며, 이르 클로저라고 합니다.

클로저란?

클로저는 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 지니고 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function outter(){
      var title = 'coding everybody';  
      return function(){        
        alert(title);
      }
    }
    inner = outter();
    inner();
  </script>
  
</body>
</html>

Private variable

Private 속성이란 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미합니다.

객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function factory_movie(title){
      return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
      }
    }
  ghost = factory_movie('Ghost in the shell');
  matrix = factory_movie('Matrix');
 
  alert(ghost.get_title());
  alert(matrix.get_title());
 
  ghost.set_title('공각기동대');
 
  alert(ghost.get_title());
  alert(matrix.get_title());
  </script>
  
</body>
</html>

클로저의 응용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //예시 1
    // var arr = []

    // for(var i = 0; i < 5; i++){
    //   arr[i] = function(){
    //     return i;
    //   }
    // }
    // for(var index in arr) {
    //   console.log(arr[index]());     //결과값 : 5 5 5 5 5
    // }

    //예시 1의 변경
    var arr = []
    
    for(var i = 0; i < 5; i++){
      arr[i] = function(id) {
        return function(){
          return id;
        }
      }(i);
    }
  for(var index in arr) {
    console.log(arr[index]());          //결과값 : 0 1 2 3 4
  }   
  </script>
  
</body>
</html>

함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있으며, 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있습니다

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열입니다.
arguments는 사실 배열은 아니며 실제로는 arguments 객체의 인스턴스입니다.

arguments

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function sum(){
    var i, _sum = 0;    
      for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
      }   
      return _sum;
    }
    document.write('result : ' + sum(1,2,3,4));
  </script>
</body>
</html>

본 내용은 위의 예시 코드에 대한 부가 설명입니다.

arguments[0] - 함수로 전달된 첫번째 인자를 알아낼 수 있습니다.
rguments.length - 함수로 전달된 인자의 개수를 알아낼 수 있습니다
반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있으며 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수도 있습니다.

매개변수의 수

매개변수와 관련된 두가지 수로는 함수.length와 arguments.length가 있습니다.

arguments.length - 함수로 전달된 실제 인자의 수
함수.length - 함수에 정의된 인자의 수

매개변수의 수

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function zero(){
      console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
      );
    }
    function one(arg1){
      console.log(
        'one.length', one.length,
        'arguments', arguments.length
      ;
    }
    function two(arg1, arg2){
      console.log(
        'two.length', two.length,
        'arguments', arguments.length
      );
    }
    zero(); // zero.length 0 arguments 0 
    one('val1', 'val2');  // one.length 1 arguments 2 
    two('val1');  // two.length 2 arguments 1
  </script>
  
</body>
</html>

//함수를 호출하는 가장 기본적인 방법 function func(){
}
func();

apply

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function sum(arg1, arg2){
      return arg1+arg2;
    }
    alert(sum.apply(null, [1,2]))  //결과값 : 3
  </script>
  
</body>
</html>

apply의 사용예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    o1 = {val1:1, val2:2, val3:3}
    o2 = {v1:10, v2:50, v3:100, v4:25}
    
    function sum(){
      var _sum = 0;
      for(name in this){
        _sum += this[name];
      }
      return _sum;
    }
    alert(sum.apply(o1)) // 6
    //sum.apply(o1)의 풀이/해석
    // o1.sum = sum;
    // alert(o1.sum());
    // delete o1.sum();
    alert(sum.apply(o2)) // 185
  </script>
  
</body>
</html>

apply의 첫번째 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행됩니다.

객체지향 프로그래밍(Object-Oriented Programming)은 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것을 의미합니다.

따라서 객체지향 프로그래밍은 객체를 만드는 것으로 해석할 수 있습니다.
객체란 변수와 메소드를 그룹핑한 것입니다.

문법과 설계

객체지향 프로그래밍 교육은 크게 문법과 설계, 두 가지로 구분됩니다.

문법 - 객체지향을 편하게 할 수 있도록 언어가 제공하는 기능
설계 - 좋은 객체를 만드는 법
- 프로그램을 만든다는 것은 복잡함 속에서 필요한 관점만을 추출하는 행위입니다.

부품화

프로그래밍은 정신적인 활동으로 때때로 무한하고, 유연하다는 장점을 지니기는 하나 오해나 모순 같은 문제점도 유발합니다.

프로그래밍의 정신적인 활동에 의한 오해나 모순 등의 문제점을 해결하기 위한 방법이 바로 부품화입니다.
- 예시 - 모니터와 본체, 그리고 컴퓨터의 분리
현재에 이르러는 부품화를 제거하고 있으며, 이를 통해 부품화의 중요성 이상으로 중요한 것이 "적절함"임을 알 수 있습니다.

객체지향의 부품화

객체 지향은 부품화의 정점으로 핵심은 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑하는 것입니다.

코드의 양을 극적으로 줄일 수 있습니다
메소드 별로 기능이 분류되어 있기 때문에 필요한 코드를 찾기도 쉽고 문제의 진단도 빨라집니다.

은닉화, 캡슐화

정보의 은닉화(Information Hiding), 또는 캡슐화(Encapsulation)란 내부의 동작 방법을 단단한 케이스 안으로 숨기고 사용자에게는 그 부품의 사용방법만을 노출하고 있는 것을 뜻합니다.

인터페이스

인터페이스는 부품들 간의 약속입니다.

잘 만들어진 부품이라면 부품과 부품을 서로 교환 할 수 있어야 합니다.

객체

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇입니다.

객체 내의 변수 - 프로퍼티(property)
객체 내의 함수 - 메소드(method)

객체

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //객체의 생성
    // var person = {}
    // person.name = 'egoing';
    // person.introduce = function(){
    //   return 'My name is '+this.name;
    // }
    // document.write(person.introduce());
    //코드 변경
    var person = {
      'name' : 'egoing',
      'introduce' : function(){
        return 'My name is '+this.name;
      }
    }
    document.write(person.introduce());
    //이 경우 다른사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 하기 때문에 "생성자"를 필요로 합니다.
  </script>
  
</body>
</html>

생성자

생성자(constructor)는 객체를 만드는 역할을 하는 함수입니다.

함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴합니다.
생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시합니다.
초기화 작업의 경우 코드의 재사용성이 대폭 높아집니다.

생성자

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //기본 함수 
    // function Person(){}
    // var p = new Person();
    // p.name = 'egoing';
    // p.introduce = function(){
    //   return 'My name is '+this.name; 
    // }
    // document.write(p.introduce());

    // //여러 사람을 대상으로 한 객체
    // function Person(){}
    // var p1 = new Person();
    // p1.name = 'egoing';
    // p1.introduce = function(){
    //   return 'My name is '+this.name; 
    // }
    // document.write(p1.introduce()+"<br />");
 
    // var p2 = new Person();
    // p2.name = 'leezche';
    // p2.introduce = function(){
    //   return 'My name is '+this.name; 
    // }
    // document.write(p2.introduce());
    
    //초기화
    function Person(name){
      this.name = name;
      this.introduce = function(){
        return 'My name is '+this.name; 
      }   
    }
    var p1 = new Person('egoing');
    document.write(p1.introduce()+"<br />");
 
    var p2 = new Person('leezche');
    document.write(p2.introduce());
    </script>
  
</body>
</html>

전역객체(Global object)는 특수한 객체로 모든 객체는 전역객체의 프로퍼티입니다.

모든 전역변수와 함수는 사실 window 객체의 프로퍼티입니다.
객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주됩니다.

전역개체

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    // 객체가 명시될 경우
    // function func(){
    //   alert('Hello?');    
    // }
    // func();
    // window.func();

    //객체가 명시되지 않았을 경우
    var o = {'func':function(){
      alert('Hello?');
    }}
    o.func();
    window.o.func();
  </script>
  
</body>
</html>

전역객체 API

ECMAScript에서는 전역객체의 API를 정의하였으며 그 외의 API는 호스트 환경에서 필요에 따라서 추가로 정의하고 있습니다.

this는 함수 내에서 함수 호출 맥락(context)를 의미합니다.

맥락이란 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 것을 파악할 수 있습니다.
this의 특성을 이용, this는 함수와 객체 간의 관계를 연결시켜주는 실질적인 연결점의 역할을 실행합니다.

함수 호출

this는 전역객체인 window와 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function func(){
      if(window === this){
          document.write("window === this");
      }
    }
    func(); //결과값 : window === this
  </script>
  
</body>
</html>

메소드 호출

객체의 소속인 메소드의 this는 그 객체를 가리킵니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    var o = {
      func : function(){
        if(o === this){
              document.write("o === this");
        }
      }
    }
    o.func();   //결과 값: o === this
  </script>
  
</body>
</html>

생성자 호출

생성자는 빈 객체를 만들며, this는 이렇게 만들어진 객체를 가리킵니다.

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //this 활용 X
    // function Func(){
    //   document.write(o);
    // }
    // var o = new Func();  //결과값: undefined

    //this 활용
    var funcThis = null; 
    function Func(){
      funcThis = this;
    }

    var o1 = Func();
    if(funcThis === window){
      document.write('window <br />');
    }
 
    var o2 = new Func();
    if(funcThis === o2){
      document.write('o2 <br />');
    }                        //결과값: window o2
  </script>
  
</body>
</html>

apply, call

함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
  var o = {}
  var p = {}
  function func(){
    switch(this){
      case o:
        document.write('o<br />');
        break;
      case p:
        document.write('p<br />');
        break;
      case window:
        document.write('window<br />');
      break;          
    }
  }
  func();
  func.apply(o);
  func.apply(p);      //결과값 : window o p
  </script>
  
</body>
</html>

상속

상속(inheritance)이란 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능입니다.

단순히 물려받는 것이 아닌 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해줍니다.
부모의 기능을 계승 발전할 수 있는 것이 상속의 가치입니다.

상속의 가치

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    // 상속 X
    // function Person(name){
    //   this.name = name;
    // }
    // Person.prototype.name=null;
    // Person.prototype.introduce = function(){
    //   return 'My name is '+this.name; 
    // }
    // var p1 = new Person('egoing');
    // document.write(p1.introduce()+"<br />");

    // // 상속 O : programmer란 생성자 추가 + 위의 것을 그대로 상속
    // function Person(name){
    //   this.name = name;
    // }
    // Person.prototype.name=null;
    // Person.prototype.introduce = function(){
    //   return 'My name is '+this.name; 
    // }
   
    // function Programmer(name){
    //   this.name = name;
    // }
    // Programmer.prototype = new Person();  //prototype과 Person의 객체를 연결함.
 
    // var p1 = new Programmer('egoing');
    // document.write(p1.introduce()+"<br />");

    //상속 O : 부모의 기능을 계승/발전
    function Person(name){
      this.name = name;
    }
    Person.prototype.name=null;
    Person.prototype.introduce = function(){
      return 'My name is '+this.name; 
    }
 
    function Programmer(name){
      this.name = name;
    }
    Programmer.prototype = new Person();
    Programmer.prototype.coding = function(){
      return "hello world";
    } // Programmer는 Person의 기능을 가지고 있으면서 Person이 가지고 있지 않은 기능인 메소드 coding을 추가하고 있습니다.
 
    var p1 = new Programmer('egoing');
    document.write(p1.introduce()+"<br />");
    document.write(p1.coding()+"<br />");
    //결과값 :
    // My name is egoing
    // hello world
  </script>
  
</body>
</html>

prototype

prototype이란 상속의 구체적인 수단을 주요하게 사용됩니다.

prototype은 말 그대로 객체의 원형입니다.
prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티입니다.
- prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결됩니다.

prototype

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    function Ultra(){}
    Ultra.prototype.ultraProp = true;
 
    function Super(){}
    Super.prototype = new Ultra();

    function Sub(){}
    Sub.prototype = new Super();

    var o = new Sub();
    console.log(o.ultraProp);  //결과값 : true
  </script>
  
</body>
</html>

본 코드에서는 아래와 같은 일이 진행됩니다.

1) 객체 o에서 ultraProp를 찾는다.
2) 없다면 Sub.prototype.ultraProp를 찾는다.
3) 없다면 Super.prototype.ultraProp를 찾는다.
4) 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하며 이로 인한 관계를 prototype chain이라고 합니다.

표준 내장 객체(Standard Built-in Object)

표준 내장 객체는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미합니다.

자바스크립트의 내장 객체

Object
Function
Array
String
Boolean
Number
Math
Date
RegExp

배열의 확장

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //배열에서 특정한 값을 랜덤하게 추출(배열 확장X)
    // var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
    // function getRandomValueFromArray(haystack){
    //   var index = Math.floor(haystack.length*Math.random());
    //   return haystack[index]; 
    // }
    // console.log(getRandomValueFromArray(arr));

    //배열 확장 / 배열 객체 포함O
    Array.prototype.rand = function(){
      var index = Math.floor(this.length*Math.random());
      return this[index];
    }
    var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
    console.log(arr.rand());
  </script>
  
</body>
</html>

Object 객체는 객체의 가장 기본적인 형태의 객체로 아무것도 상속받지 않는 순수한 객체입니다.

자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용합니다.
자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있습니다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

Object 객체의 확장

Object 객체를 확장하면 모든 객체가 접근할 수 있는 API를 만들 수 있습니다.
모든 객체에 영향을 주기 때문에 Object 객체는 확장하지 않는 것이 바람직합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
     //object 확장 
    Object.prototype.contain = function(neddle) {
      for(var name in this){
        if(this[name] === neddle){
            return true;
        }
      }
      return false;
    }
    var o = {'name':'egoing', 'city':'seoul'}
    console.log(o.contain('egoing'));
    var a = ['egoing','leezche','grapittie'];
    console.log(a.contain('leezche'));  

    //object 확장을 할 경우 모든 객체의 값이 변경
    // for(var name in o){
    //  console.log(name);  
    // //결과값 : name contain  : 기존 객체 이외에도 다른 객체 "contain"을 포함하고 있음
    // } 
    //해결방법
    for(var name in o){
      if(o.hasOwnProperty(name)) //hasOwnProperty : 프로퍼티의 해당 객체의 소속인지를 체크 
      console.log(name);  
    }
  </script>
  
</body>
</html>

hasOwnProperty : 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단합니다.
(prototype으로 상속 받은 객체라면 false가 됩니다.)

원시 데이터 타입

데이터 타입이란 데이터의 형태를 의미하며, 이를 두 가지로 구분하면 객체와 객체가 아닌 것으로 나눌 수 있습니다.

객체가 아닌 것

객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 합니다.

원시 데이터 타입을 제외한 모든 데이터 타입을 객체라고 합니다.
문자열의 경우 문자열과 관련된 어떤 작업을 하려고 할 때 자바스크립트는 임시로 문자열 객체를 만들고 사용이 끝나면 제거하기 때문에 원시데이터타입으로 분류합니다.

숫자
문자열
불리언(true/false)
null
undefined

레퍼 객체

레퍼객체로는 String, Number, Boolean이 있으며 null과 undefined는 레퍼 객체가 존재하지 않습니다.

복제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    var a = 1;
    var b = a;
    b = 2;
    console.log(a); //결과값 : 1
  </script>
  
</body>
</html>

참조

참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷합니다.

심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨 있고, 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하는 것을 가리킵니다.
저장 장치의 용량을 절약할 수 있고, 원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있습니다.

참조

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    var a = {'id':1};
    var b = a;
    b.id = 2;
    System.out.println(a.id);   
    console.log(a.id);  // 2
  </script>
  
</body>
</html>

함수

함수 func의 파라미터 b로 전달된 값은 객체 a입니다. (b = a) b를 새로운 객체로 대체하는 것은 (b = {'id':2}) b가 가르키는 객체를 변경하는 것이기 때문에 객체 a에 영향을 주지 않습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    //원시 데이터 타입을 인자로 넘겼을 때
    // var a = 1;
    // function func(b){
    //   b = 2;
    // }
    // func(a);
    // console.log(a); // 결과 값 : 1
    // 참조 데이터 타입을 인자로 넘겼을 때\
    var a = {'id':1};
    function func(b){
      b = {'id':2};
    
    func(a);
    console.log(a.id);  // 결과 값 : 1
  </script>
  
</body>
</html>

함수

본 코드는 위와 달리 파라미터 b는 객체 a의 레퍼런스입니다. 이 값의 속성을 바꾸면 그 속성이 소속된 객체를 대상으로 수정작업을 한 것이 되기 때문에 b의 변경은 a에도 영향을 미치게 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">
    var a = {'id':1};
    function func(b){
      b.id = 2;
    }
    func(a);
    console.log(a.id);  // 결과값 : 2
  </script>
  
</body>
</html>

패턴은 자주 사용하는 로직들의 구현방법과 그것에 대한 이름을 의미합니다.

재귀함수

재귀함수는 함수 자신을 호출하는 프로그래밍 기법입니다.

<!DOCTYPE html>
<html>
  <body id="start">
    <ul>
      <li><a href="./532">html</a></li> 
      <li><a href="./533">css</a></li>
      <li><a href="./534">JavaScript</a>
          <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
          </ul>
      </li>
    </ul>
    <script>
      function traverse(target, callback){
        if(target.nodeType === 1){
          //if(target.nodeName === 'A')
          callback(target);
          var c = target.childNodes;
          for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
          }   
        }
      }
      traverse(document.getElementById('start'), function(elem){
        console.log(elem);
      });
    </script>
  </body>
</html>

javascript / jquery Reference v1.0 </doc>

자바스크립트

자바스크립트 기초

실행

웹페이지에서 자바스크립트 작성

크롬 개발자 도구 사용

숫자와 문자

숫자

문자

변수

변수의 선언

변수가 없다면

주석, 줄바꿈과 여백

비교

연산자

비교 연산자

조건문

조건문의 문법

변수와 비교연산자 / 조건문의 중첩

논리 연산자

boolean의 대체제

반복문

while

whileView

for

forView

반복문이 없다면

View

반복문의 제어 : break

break View

반복문의 제어 : continue

continue View

반복문의 중첩

View

함수

함수의 사용 예시

함수의 효용성

함수의 효용성

함수의 입력과 출력

출력 : return

입력

복수의 인자

함수의 다양한 형태 : 변수 이용, 익명 함수

배열

배열의 생성

배열의 생성

배열의 효용성

배열의 효용성

배열의 사용

배열의 사용 : 배열과 반복문의 결합

배열의 제어

배열의 크기

배열의 조작

배열의 제거

배열의 정렬

객체

객체의 생성

객체와 반복문의 관계

객체와 반복문의 관계

객체지향 프로그래밍

객체지향 프로그래밍

모듈

모듈의 정의

모듈의 효용성

모듈의 효용성

Node.js에서의 모듈 로드

node.circle.js (로드될 대상) : 읽음을 당함

node.demo.js (로드의 주체)

결과값

객체지향 프로그래밍

라이브러리

제이쿼리(jQuery) 사용 방법

jQuery 사용 예제

UI와 API & 문서 보는 법

레퍼런스와 튜토리얼

참고자료

정규표현식

정규표현식 생성

정규표현식 리터럴

정규표현식 객체생성자