자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다.

HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다.

  1. 자바스크립트는 인터프린터 언어입니다.
    자바스크립트는 코드를 작성된 순서대로 구문을 해석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터 구문을 분석하지 않습니다.
  2. 자바스크립트는 클라이언트 스크립트 언어입니다.
    자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 PHP, JSP, ASP 언어와 비교됩니다.
  3. 자바스크립트는 객체 기반 언어입니다.
    자바스크립트는 객체를 기반으로 한 언어이며, 다양한 기능들과 종류들이 있습니다.
  4. 자바스크립트 오픈소스 언어입니다.
    자바스크립트는 소스를 숨길 수 없는 오픈 소스입니다.
  5. 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
    자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다. 이러한 자바스크립트 라이브러리 언어들을 통해 제이쿼리 뿐만 아니라 센차터치, 제이쿼리 모바일, node.js 등 많은 언어를 사용할 수 있습니다.

자바스크립트 사용 방법

외부 파일로 로드하는 방법 / script 태그 사이에 기술하는 방법 / 태그에 직접 기술하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 사용방법</title>
    
    <!-- 외부 파일로 로드하는 방법-->
    <script type="text/javascript" src="javascript.js"></script>
    
    <!-- script 태그 사이에 기술하는 방법-->
    <script type="text/javascript">
        document.write("hello");
    </script>
</head>
<body>
    <!-- 태그에 직접 기술하는 방법 -->
    <input type="button" onclick="alert('hello')" value="hello">
</body>
</html>           

자바스크립트 기초

일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 코드입니다.

/* .... */ : 여러줄에 주석을 적용하는 경우
// : 한줄에 주석을 적용하는 경우
<!-- --> : HTML 주석
/* .... */ : CSS 주석

자바스크립트에서는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다.

키워드(예약어) : 자바스크립트에서 정해진 단어
식별자 : 사용자가 임의로 사용하는 단어

다음의 키워드는 자바스크립트에서 사용하기 때문에 사용자가 임의로 사용 할 수 없습니다.

break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while while with class enum export extends import super implements interface let package private protexted public static yield

사용자는 임의의 식별자를 만들 수 있으며, 다음의 사항을 지켜주어야 합니다.

  • 첫 글자는 숫자로 시작하면 안됨
  • 공백을 주면 안됨
  • 특수기호를 사용 할 수 없음(예외:_,-)
  • 키워드를 사용 할 수 없음

두 가지 이상의 단어를 조합할 때에는 다음과 같은 방법을 사용합니다.

  • 언더스코어 노테이션 : text_top과 같이 중간에 '_'을 사용합니다.
  • 카멜 노테이션 : textTop과 같이 두번 째 단어의 첫 글자를 대문자로 사용합니다.
  • 파스칼(Pascal) : TextTop과 같이 모든 단어의 첫 문장을 대문자로 사용합니다.

문자열을 구분하기 위해서는 작은 따옴표 또는 큰 따옴표를 사용합니다.

변수

변수는 하나의 데이터를 저장하는 저장소입니다.
var 변수명 = 값;
변수
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>변수</title>
    <script>
        var x = 10;             //변수 x에 10(숫자)를 저장함
        var y = 20;             //변수 y에 20(숫자)를 저장함
        var z = "javascript"    //변수 z에 javascript(문자)를 저장함
        
        y = 100;    //변수 y에 값이 20 -> 200 변경
        
        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br>");
        document.write(x+y);
        document.write("<br>");
        document.write(x*y);
    </script>
</head>
<body>
    
</body>
</html>            

변수는 사용 가능 범위에 따라 4가지로 구분됩니다.

지역변수 : 특정 범위 안에서만 사용하는 경우
전역변수 : 모든 영역 안에서 사용하는 경우
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우
멤버변수(프로퍼티) : 클래스 내부에 만들어지며 주로 객체에서 사용하는 경우
지역변수/전역변수
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>지역변수/전역변수</title>
    <script>
        var x = 100;    //변수(전역) x에 100을 저장
        var y = 200;    //변수(전역) y에 200을 저장
        
        function area(){
            var x = 300;    //변수(지역) x에 300을 저장
            var z = 500;    //변수(지역) z에 500을 저장
            
            y = 600;    //변수(전역) y에 값을 200에서 600으로 변경
            
            document.write("area 함수 안");
            document.write("<br>");
            document.write(x);
            document.write("<br>");
            document.write(y);
            document.write("<br>");
            document.write(z);
            document.write("<br><br>");
        }
        
        area();     //함수를 실행
        document.write("area 함수 밖");
        document.write("<br>");
        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);

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

변수는 식별자로만 구분하기 때문에 어떠한 값인지 구분해야 하며, 숫자, 문자열, 불린, 함수, 객체, undefined으로 나눌 수 있습니다.

자료형 설명
숫자(Number) 숫자에는 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다.
문자열(String) "문자", "string" 처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다.
논리(Boolean) 참과 거짓을 나타내는 자료형이며, 오직 true, false로만 표현을 합니다.
특수값(null) null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화 할 때 사용합니다.
특수값(undefined) 변수 선언시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다.
배열(array) 배열 형태의 자료형도 자바스크립에서 사용 할 수 있습니다.
객체(Object) 객체 형태의 자료형도 자바스크립에서 사용 할 수 있습니다.
함수(Function) function은 자바스크립트를 구성하는 기본 단위이며, 자료형으로 변수에 넣을 수 있습니다.

배열

배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.
var 변수명 = [값1, 값2, 값3.....];
배열

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>배열</title>
    <script>
        //배열 선언
        var arr1 = new Array();; 
        
        arr1[0] = 100;
        arr1[1] = 200;
        
        document.write(arr1[0], "<br>");
        document.write(arr1[1], "<br>");
        document.write(arr1[1] + arr1[0], "<br><br>");
        
        //배열 선언과 동시에 초기화하기
        var arr2 = new Array(100,200,300);
        
        document.write(arr2[0], "<br>");
        document.write(arr2[1], "<br>");
        document.write(arr2[2], "<br>");
        document.write(arr2[0] * arr2[1] * arr2[2], "<br><br>");
        
        //배열의 크기 구하기
        var arr3 = new Array(100,200,300,400,500)
        
        document.write(arr3.length, "<br><br>");
        
        //for문을 이용한 배열의 합 구하기
        var arr4 = new Array(100,200,300,400,500,600,700,800,900,1000);
        var sum = 0;
        
        for(var i=0; i<arr4.length; i++){
          sum = sum + arr4[i];
        }
        document.write(sum);
        
        
        
        
        
    </script>
</head>
<body>
    
</body>
</html>           

연산자

산술 연산자는 사칙 연산을 수행합니다.
연산자 예시 설명
+ x+y 더하기
- x-y 빼기
* x*y 곱하기
/ x/y 나누기
% x%y 나머지
복합 연산자는 사칙연산을 간결하게 표현할 때 사용합니다.
연산자 예시 설명
+= x = x + 10 x+=10
-= x = x -10 x-=10
*= x = x * 10 x*=10
/= x = x / 10 x/=10
증감 연산자는 1만큼 증가시키고, 감소 연산자는 1만큼 감소시킵니다.
연산자 예시 설명
++ x = x + 1 x++ or ++x
-- x = x - 1 x-- or --x
두 개의 값을 비교하여 결과를 참 또는 거짓으로 나타냅니다.
연산자 예시 설명
== x == y 좌변과 우변이 값이 같은 경우 true 반환
=== x === y 좌변과 우변의 값이 같거나 데이터형도 같은 경우 true 반환
!= x != y 좌변과 우변의 값이 같지 않은 경우 true 반환
!== x !== y 좌변과 우변의 값이 같지 않은 경우, 또는 데이터형이 다른 경우 true 반환
< x < y 좌변이 우변보다 클경우 true 반환
> x > y 좌변이 우변보다 작을경우 true 반환
<= x < y 좌변과 우변보다 크거나 같을 경우 true 반환
>= x > y 좌변과 우변보다 작거나 같을 경우 true 반환
참/거짓으로 나타내는 boolean 값을 조합해서 논리 연산을 수행합니다.
연산자 예시 설명
&& x && y (AND)둘다 true인 경우 true를 반환
|| x || y (OR) 둘 중의 하나 이상이 true인 경우 true를 반환
! !x (NOT) 식이 false인 경우 true를 반환
우선순위 연산자 설명
1 () [] 괄호/대괄호
2 ! ~ ++ -- 부정/증감연산자
3 * / % 곱셈/나눔셈 연산자
4 + - 덧셈/뺄셈 연산자
5 << >> >>> 비트 단위의 시프트 연산자
6 > > >= >= 관계 연산자
7 == != === !== 관계 연산자
8 & 비트 단위 논니 곱 연산자
9 | 비트 단위 논니 부정 연산자
10 ^ 비트 단위 논니 합 연산자
11 && 논리 곱 연산자
12 || 논리 합 연산자
13 ?: 조건부 연산자
14 = += -= *= /= %= <<= >>= >>>= &= ^= |= 대입/할당 연산자
15 , 쉼표

조건문

조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.
if문은 단독으로 사용하는 형태입니다
if(조건){
    //실행코드
}
if
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>if</title>
    <script>
        var x = 100;
        
        if(x % 2 ==0){
            document.write("짝수")
        }
        
        var value = window.prompt("숫자를 입력해 주세요.")
        
        if(value % 2 == 0){
            alert("당신이 입력한 숫자는 짝수 입니다.")
        }
    </script>
</head>
<body>
    
</body>
</html>          
두개의 값을 비교하여 코드를 별대로 싱행합니다.
if(조건){
    //조건이 참일 때 실행코드
} else {     //조건이 거짓일 때 실행코드 }
if-else문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>if-else문</title>
    <script>
        var x = 100;
        
        if(x % 2 == 0){
            document.write("짝수입니다.");
        } else {
            document.write("홀수입니다.");
        }
        
        var value = window.prompt("숫자를 입력해주세요")
        
       if(value % 2 == 0){
            alert("짝수입니다.");
        } else {
            alert("홀수입니다.");
       }
        
        var useID = window.prompt("ID를 입력하세요");
        var usePW = window.prompt("PW를 입력하세요");
        
        if(useID == "jjgodcom" && usePW == "123456"){
            alert("환영합니다");
        } else {
            alert("아이디 또는 비밀번호가 틀렸습니다.");
        }
    </script>
</head>
<body>
    
</body>
</html>          
여러가지 조건에 따라 조건문을 설정합니다.
if(조건){
    //조건이 참일 때 실행코드
} else if {
    //앞 조건이 거짓일 때 실행코드 } else if {
    //앞 조건이 거짓일 때 실행코드 } else {
    //앞의 모든 조건이 거짓일 때 실행코드 }
다중 if문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>다중 if문</title>
    <script>
        var x = 100;
        
        if (x == 90){
            document.write("x의 숫자는 90입니다.");
        } else if (x == 92) {
            document.write("x의 숫자는 92입니다.");
        } else if (x == 93) {
            document.write("x의 숫자는 93입니다.");
        } else if (x == 94) {
            document.write("x의 숫자는 94입니다.");
        } else if (x == 95) {
            document.write("x의 숫자는 95입니다.");
        } else if (x == 96) {
            document.write("x의 숫자는 96입니다.");
        } else if (x == 97) {
            document.write("x의 숫자는 97입니다.");
        } else if (x == 98) {
            document.write("x의 숫자는 98입니다.");
        } else {
            document.write("x의 숫자를 모르겠습니다ㅠㅠ.");
        }
        
        var useID = window.prompt("ID를 입력해주삼");
        var usePW = window.prompt("PW쓰삼");
        
        if (useID == "jjgodcom" && usePW == "1234"){
            alert("반갑소!");
        } else if (useID == "jjgodcom"){
            alert("패스워드가 틀렸습니다.");
        } else {
            alert("틀렸습니다.")
        }
    </script>
</head>
<body>
    
</body>
</html>         
해당 조건에 맞는 값을 case로 구분해서 수핼하는 제어문입니다.
switch(조건을 체크할 변수){
case 값1:
      //조건을 체크할 변수가 '값1'을 가지면 실행
break;
case 값2:
      //조건을 체크할 변수가 '값2'을 가지면 실행
break;
case 값3:
      //조건을 체크할 변수가 '값3'을 가지면 실행
break;
case 값4:
      //조건을 체크할 변수가 '값4'을 가지면 실행
break;
default:
      //해당되는 갑슬 가지고 있지 않을 경우 실행
break; }
switch문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>switch문</title>
    <script>
        var color = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 좋아하는 색을 적으세요")
        
        switch(color){
            case "빨강"   :
                document.write("빨강을 선택해?!?!?");
                break;
            case "파랑"   :
                document.write("파랑을 선택해?!?!?");
                break;
            case "노랑"   :
                document.write("노랑을 선택해?!?!?");
                break;
            case "노랑색"   :
                document.write("노랑을 선택해?!?!?");
                break;
            case "검정"   :
                document.write("검정을 선택해?!?!?");
                break;
            case "흰색"   :
                document.write("흰색을 선택해?!?!?");
                break;
            default :
                document.write("당신은 색을 볼 줄 모르는군요!");
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>         
switch문2
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>switch</title>
    <script>
        var site = window.prompt("네이버, 다음, 구글, 네이트 중 자주 가는 사이트는?");
        var url;
        
        switch(site){
            case "네이버" :
                url ="www.naver.com";
                break;
            case "다음" :
                url ="www.daum.net";
                break;
            case "구글" :
                url ="www.goggle.co.kr";
                break;
            case "네이트" :
                url ="www.nate.com";
                break;
            
            default :
                document.write("그런 사이트는 없따!")
        }
        if(url){
            location.href="http://"+ url;
        }
    </script>
</head>
<body>
    
</body>
</html>          
조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다.
(조건) ? (참일 때 실행하는 코드) : (거짓일 때 실행하는 코드)
조건문 연산자
<!DOCTYPE html>
 <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>조건부 연산자</title>
    <script>
        //if - else
    
        var value = window.prompt("숫자를 입력해주세요");
        value = parseInt(value);    //숫자로 인식할 수 있도록 형 변환
        
        if(value % 2 == 0){
            alert("짝수입니다.");
        } else {
            alert("홀수입니다.");
        }
        
        //조건 연산자
        var value2 = window.prompt("숫자를 입력해주세요");
            value2 = parseInt(value);    //숫자로 인식할 수 있도록 형 변환
        
        (value2 % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
        
    </script>
</head>
<body>
    
</body>
</html>       

반복문

반복되는 부분을 실행할 때 사용하는 제어문입니다.

var 변수 = 초기합
while(조건식) {
    실행문;
    증감식;
}
while문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while문</title>
    <script>
        var count = 0;
        while(true){
            count++;
            document.write(count);
            document.write("<br>");
            
            if(count > 9){
                break;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>            
while문(100보다 작은 숫자에서 4의 배수 6의배수를 출력하기)
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while문</title>
    <script>
        //100보다 작은 숫자에서 4의 배수 6의 배수 출력하기
        //초기값설정 
        var i = 1;
        
        while(i<=100){      //i가 100보다 작거나 같을 때까지 반복 실행합니다.
            
            if(i%4 == 0 && i%6 == 0){
                document.write(i,"<br>");
            }
            
            i++;
            
        }
    </script>
</head>
<body>
    
</body>
</html>            
while문(100보다 작은 숫자에서 짝수는 빨간색 홀수는 파란색 출력하기)
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while</title>
    <script>
        //100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
        var i = 100;
        while(i>0){
            if(i%2 == 0){
                document.write("<span style='color:blue;'>"+ i +"</span>","<br>");
            } else {
                document.write("<span style='color:red;'>"+ i +"</span>","<br>");
            }
            
            i--;
        }
    </script>
    
</head>
<body>
    
</body>
</html>            

while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행분을 실행하고 조건식을 검사합니다.

var 변수 = 초기합
do{
    실행문;
    증감식;
}while(조건식)
do while문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>do while문</title>
    <script>
        var count = 0;
        do{
            count++;
            document.write(count,"<br>")
        }while(count<9);
    </script>
</head>
<body>
    
</body>
</html>          

for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문 입니다.

for(초기값; 조건식; 증감값;){
    //반복코드
}

0-100까지 반복을 한다면, 다음과 같이 표현합니다.

for(var i=0; i<100; i++){
    //반복코드
}
초기값 설정 : var i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행 되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100; 조건에 맞으면 실행됩니다.
증감값 설정 : i++; 조건에 맞으면 1씩 증가됩니다.
for문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for문</title>
    <script>
//        //0~100까지 출력
//        for(var i=0; i<=100; i++){
//            document.write("숫자"+i,"<br>");
//        }
//        //1-100까지 출력
//        for(var i=1; i<=100; i++){
//            document.write("숫자"+i,"<br>");
//        }
//        //1-100중에서 짝수만 출력
//        for(var i=0; i<=100;  i+=2){
//            document.write("숫자"+i,"<br>");
//        }
        //1-100중에서 홀수만 출력
        for(var i=1; i<=100;  i+=2){
            document.write("숫자"+i,"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>          
for문 (5의 배수는 파랑색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력)
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>for문</title>
    <script>
        //1~100까지 출력
        for(var i=1; i<=100; i++){
            //5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력하기
            
            if(i%5 == 0 && i%7!==0){    //5의 배수이고 7의 배수가 아닌 경우
               document.write("<span style='color:blue'>"+i+"</span>","<br>");
            } else if(i%7 == 0 && i%5!==0){     //7의 배수이고 5의 배수가 아닌 경우
                document.write("<span style='color:red'>"+i+"</span>","<br>");
            } else if(i%5 == 0 && i%7 == 0){    //7의 배수이고 5의 배수인 경우
                document.write("<span style='color:black'>"+i+"</span>","<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>       
for문을 이용한 배열의 합 구하기
<!DOCTYPE html>
 <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>for문을 이용한 배열의 합 구하기</title>
    <script>
        var arr = new Array(100,200,300,400,500,600,700,800);
        var sum = 0;
                        //8 = i<8
        for(var i=0; i<arr.length; i++){
            sum = sum + arr[i];
//             0  =  0  + arr[0]=(100);
//            100 = 100 + arr[1]=(200);
//            300 = 300 + arr[2]=(300);
//            600 = 600 + arr[3]=(400);
//            1000 = 1000 + arr[4]=(500);
        }
        document.write(sum);
    </script>
</head>
<body>
    
</body>
</html>     

for문 안에 for문이 있는 형태입니다.

for(var i=0; i<100; i++){
    for(var j=0; j<100; j++){
        //실행 코드
    }
}
다중 for문
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>다중 for문</title>
    <script>
        
        for(var i=0; i<8; i++){
            for(var j=0; j<9; j++){
                var num1 = i + 2;
                var num2 = j + 1;
                var sum = num1 + num2;
                document.write( num1 + "X" + num2 + "=" + sum);
                document.write("<br>");
            }
        }
        
       
        
//        var i * j = sum
//            2 * 1 = 2       3 * 1 = 3
//            2 * 2 = 4       3 * 2 = 6
//            2 * 3 = 6       
//            2 * 4 = 8
//
//        i = 2,3,4,5,6,7,8,9
//        j = 1,2,3,4,5,6,7,8,9
    </script>
</head>
<body>
    
</body>
</html>          
for문을 이용한 테이블 만들기
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>for문을 이용한 테이블 만들기</title>
    <script>
        var num = 1;
        var t = "<table border='1'>"; //테이블 시작 태그
        
        for(var i=1; i<=10; i++){
            t += "<tr>";
            
            for(var k=1; k<=10; k++){
                t += "<td>" + num +"</td>";
                num++;
            }
            
            t +="</tr>";
        }
        t += "</table>";
        
        document.write(t);
    </script>
</head>
<body>

</body>
</html>          

break문 continue문은 반복문을 제어하는 명령어입니다.

break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다. continue문 : 코드 실행 중에 continue를 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다
break문 continue
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>break문 continue</title>
    <script>
        var count = 0;
        while(true){
            count++;
            if(count == 3){
                continue;
            }
            document.write(count,"<br>");
            
            if(count > 9){
                break;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>          

함수

함수는 하나의 실행문을 저장하여 사용할 수 있습니다.

함수는 하나의 실행문을 저장하고 변수는 하느의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화 하거나 재활용을 목적으로 사용합니다.

함수를 사용하는 이유
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>함수를 사용하는 이유</title>
    <script>
//    for문으로 
//    1. 블랙입니다.
//    2. 블랙입니다.
//    3. 블랙입니다.
//    ....
//    100. 블랙입니다.

//        for(var i=0; i<=100; i++){
//            document.write(i+".블랙입니다","<br><br>");
//       }
        
//    for문으로 
//    1. 블루입니다.
//    2. 블루입니다.
//    3. 블루입니다.
//    ....
//    100. 블루입니다.
        
//        for(var i=0; i<=100; i++){
//            document.write(i+ ".블루입니다", "<br><br>")
//        }

//    for문으로 
//    1. 레드입니다.
//    2. 레드입니다.
//    3. 레드입니다.
//    ....
//    100. 레드입니다.
        
//        for(var i=0; i<=100; i++){
//            document.write(i+ ".레드입니다", "<br><br>")
//        }
        
        function Show(name){
            for(var i=0; i<=100; i++){
            document.write(i+"." + name +"입니다","<br>");
            }
        }
        
        Show("수호");
        Show("시현");
        Show("레드");
    
    </script>
    
</head>
<body>
    
</body>
</html>           

함수는 사용 형태에 따라 익명함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 잇는 함수로 구분이 됩니다

함수의 사용 형태
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>함수의 사용 형태</title>
    <script>
        //선언적 함수 : 일반적인 함수의 형태이며, 함수 이름을 설정하고 함수를 호출 해야 합니다.
        function fun1(){
            document.write("fun1이 실행되었습니다.");
            document.write("<br>");
        }

        fun1();
        fun1();
        
        //익명 함수 : 변수 안에 함수가 들어간 형태로 함수의 이름이 존재하지 않어 익명함수라고 부릅니다.
        var fun2 = function(){
            document.write("fun2이 실행되었습니다.");
            document.write("<br>");
        }
        
        fun2();
        fun2();
        
        //매개 변수가 있는 함수 : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우
        function fun3(name){
            document.write(name+ "실행되었습니다.");
            document.write("<br>");
        }
        
        fun3("fun3");
        fun3("fun3");
        
       //리턴값이 잇는 함수
        function fun4(){
            var now = new Date();      //현제 시간을 구해오는 객체 데이터
            var hour = now.getHours(); //현제 시간에서 시(hour)를 변수에 할당
            return hour;
        }
        
        var value = fun4();
        document.write(value);
    </script>
</head>
<body>
    
</body>
</html>         

객체

객체는 데이터와 연산 작업을 담고 있는 기본족인 자바스크립트 기능 입니다.

객체가 가지고 있는 기본 상태 값을 속성이라고 하고 객체가 할 수 있는 행동들을 매서드라고 합니다. 객체는 내장 객체, 브라우저 객체, 문서 객체로 나누어집니다.

속성 : 객체가 가지고 있는 기본적인 상태 값 및 속성(ex: color, width)
매서드 : 객체가 할 수 있는 동작 및 행동(ex: color 색을 변경, width값을 변경)

문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 좁은 의미로는 doucment 객체와 관련된 객체의 집합입니다.

브라우저 객체 모델(Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미합니다.

브라우저 위치
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>브라우저 위치</title>
    <script>
            var x = window.screenX;
            var y = window.screenY;
        
            alert("현제 브라우저의 좌표 값 :" + x + "," + y);
    </script>
</head>
<body>
    
</body>
</html>            
컨텐츠 영역 크기 구하기
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>컨텐츠 영역 크기 구하기</title>
    <script>
        var x = window.innerWidth;
        var y = window.innerHeight;
        
        alert("현재 컨텐츠 영역의 크기 :" + x +"," + y);
    </script>
</head>
<body>
    
</body>
</html>           
타이머 설정
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>타이머 설정</title>
    <script>
        //setInterval(); : 지정한 시간마다 함수를 실행 <--> ClearInterval();
        //setTimeOut();  : 지정한 시간 후 한번만 실행  <--> ClearTimeOut();
        
        function func(){
            document.write("setInterval이 실행되었습니다.");
            document.write("<br>");
        }
        
        setInterval(func,1000);
    </script>
</head>
<body>
    
</body>
</html>        
브라우저 속성 알아내기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>브라우저 속성 알아내기</title>
    <script>
            document.write("appCodeName: "+navigator.appCodeName,"<br />");
			document.write("appName: "+navigator.appName,"<br />");
			document.write("appVersion: "+navigator.appVersion,"<br />");
			document.write("language: "+navigator.language,"<br />");
			document.write("product: "+navigator.product,"<br />");
			document.write("platform: "+navigator.platform,"<br />");
			document.write("userAgent: "+navigator.userAgent,"<br />");
    </script>
</head>
<body>
    
</body>
</html>            
운영체제 및 스크린 정보

<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>운영체제 및 스크린 정보</title>
        <script type="text/javascript">
			function info1(){
			      /* 브라우저 및 운영체제 종합정보를 반환후 모두 소문자로 바꿉니다.*/
			      var os=navigator.userAgent.toLowerCase();
			  
			      /*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
			      var info_wrap=document.getElementById("info_wrap");
			
			      /*navigator객체를 이용해 반환받은 정보에 다음과 같은 문자가 포함되어 있으면  운영체제 명을 지정한 요소 사이에 텍스트로 출력합니다.*/
			      if(os.indexOf('windows')>=0){
			         info_wrap.innerHTML="윈도우";
			      }else if(os.indexOf('macintosh')>=0){
			         info_wrap.innerHTML="메킨토시";
			      }else if(os.indexOf('iphone')>=0){
			         info_wrap.innerHTML="아이폰";
			      }else if(os.indexOf('android')>=0){
			         info_wrap.innerHTML="안드로이드";
			      }
			}
			function info2(){
			      /*스크린 너비와 높이 값을 가져와 각각의 변수에 저장합니다.*/
			      var sc_w=screen.width;
			      var sc_h=screen.height;
			
			      /*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/      
			      var info_wrap=document.getElementById("info_wrap");
			
			      /*스크린 너비와 높이 값을 지정한 요소에 텍스트로 출력합니다. */
			      info_wrap.innerHTML=sc_w+"X"+sc_h;
			
			      //3초 후에 스크린 정보를 지웁니다.
			      //setTimeout("info_wrap.innerHTML=''",3000); 
			}	
        </script>
    </head>
    
    <body>
		<h1>운영체제 및 스크린 정보</h1>
		<p id="info_wrap"></p>
		<button onclick="info1();">운영체제 정보</button> <br />
		<button onclick="info2();">스크린 정보</button> <br />
    </body>
</html>      
화면 크기 알아내기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>화면 크기 알아내기</title>
    <script>
        document.write("width:" + screen.width,"<br>");
        document.write("height:" + screen.height,"<br>");
        document.write("availWidth:" + screen.availWidth,"<br>");
        document.write("availHeight:" + screen.availHeight,"<br>");
        document.write("colorDepth:" + screen.colorDepth,"<br>");
    </script>
</head>
<body>
    
</body>
</html>      

자바스크립트 자체에서 제공하는 객체입니다.

변수

      

생활코딩 JavaScript 객체 지향 프로그래밍 에서 제공하는 소스로 진행합니다.

github 에 수업한내용을 공유합니다.

생활코딩 유튜브 Node.js 재생목록 바로가기
  1. 수업소개
    이 수업에서는 아래와 같은 내용을 다루고 있습니다.
    - prototype
    - __proto__
    - 생성자 함수와 new
    - class
    - 상속
JavaScript 객체 지향 프로그래밍 - 1. 수업소개

영상 요약
객체(object)

서로 연관된
변수와 함수를
그룹핑하고
이름을 붙인것
JavaScript 객체지향 프로그래밍 - 2. 실습준비

실습 소스
Watch
영상 요약
nodeJS가 설치되어 있으니 cmd창에서 class.js 파일 실행함.
Code
                
console.log("hellow_object");
                
            
JavaScript 객체지향 프로그래밍 - 3.1. 객체의 기본

실습 소스
Watch
영상 요약
배열과 객체의 차이에 대해서 알아봄

객체를 선언,호출,수정,삭제 에 대해서 알아봄


배열의 값에 접근할때는 []
객체의 값에 접근할때는 .[] 둘다 사용가능함.
Code
                
//배열 선언
memberArray = ['jjgodcom', 'flvns', 'psh'];
//배열 호출
console.log("memberArray[1] 의 값은",memberArray[1]); // flvns

//객체 선언
var memberObject = {
    manager:'jjgodcom',
    developer:'flvns',
    designer:'psh'
}
//객체 호출
console.log("memberObject.designer 의 값은",memberObject.designer); // psh
console.log("memberObject['manager'] 의 값은",memberObject['manager']); // jjgodcom

//객체 의값 업데이트하기
memberObject.designer = 'psh2';
// 업데이트된 객체 호출
console.log("memberObject.designer 의 값은",memberObject.designer); // psh2

//객체값 삭제하기
delete memberObject.manager;
//객체 호출
console.log("memberObject.manager 의 값은",memberObject.manager); //undefined   
                
            

javaScript 객체지향 프로그래밍 - 3.2. 객체와 반복문

실습 소스
Watch
영상 요약
반복문과 함꼐 사용할때 배열은 더 빛난다.
객체도 마찬가지!

객체에서 사용하는 for문 은 for in 문이라고 한다.
사용방법은
for(변수 in 객체){

}
Code
                
//배열 선언
memberArray = ['jjgodcom', 'flvns', 'psh'];
console.group('allay loop'); //console.group() 을 쓰면 소단위로 묶임
var i = 0;
while(i < memberArray.length){
    console.log(i,memberArray[i]);
    i += 1;
}
console.groupEnd('allay loop'); //console.groupEnd() 을 쓰면 소단위 끝을 맺음

//객체 선언
var memberObject = {
    manager:'jjgodcom',
    developer:'flvns',
    designer:'psh'
}
console.group('object loop'); //console.group() 을 쓰면 소단위로 묶임
// 객체에서는 for in 문을 사용함
for(var name in memberObject){
    console.log(name); // 앞에
    console.log(memberObject[name]); //뒤에
}
console.groupEnd('object loop'); //console.group() 을 쓰면 소단위로 묶임  
                
            
JavaScript 객체지향 프로그래밍 - 4.1. 객체는 언제 쓰나요?

실습 소스
Watch
영상 요약
math라는 객체에 PI,random,floor를 정리가 되어 있다.
Code
                
//math라는 객체에  PI,random,floor를 정리가 되어 잇음
console.log("Math.PI 의 값은", Math.PI); //3.14~~~ 
console.log("Math.random() 의 값은",Math.random()); //랜덤
console.log("Math.floor(3.9) 의 값은",Math.floor(3.9)) //소수점을 정수로
                
            

JavaScript 객체지향 프로그래밍 - 4.2. 객체 만들어 보기

실습 소스
Watch
영상 요약
myMath 라는 객체에 변수와 함수를 그룹핑해서 이름을 붙이는 사례이다.
Code
                
//math라는 객체에  PI,random,floor를 정리가 되어 잇음
console.log("Math.PI 의 값은", Math.PI); //3.14~~~ 
console.log("Math.random() 의 값은",Math.random()); //랜덤
console.log("Math.floor(3.9) 의 값은",Math.floor(3.9)) //소수점을 정수로

//객체에 소속되어있으면 매소드(함수)라고 함
var myMath = {
    PI:Math.PI,
    random:function(){
        return Math.random();
    },
    floor:function(val){
        return Math.floor(val);
    }
}
console.log("myMath.PI 의 값은", myMath.PI);
console.log("myMath.random()의 값은", myMath.random());
console.log("myMath.floor(3.9)의 값은", myMath.floor(3.9));
                
            
JavaScript 객체지향 프로그래밍 - 5. this

실습 소스
Watch
영상 요약
this는 매소드가 자신이 속해있는 객체를 가르키는 특수한 키워드는 이다.
Code
                
var kim = {
    name:'kim',
    first:10,
    second:20,
    sum:function(){
        return this.first+this.second;
    }
}

// this는 매소드가 자신이 속해있는 객체를 가르키는 특수한 키워드는 이다.
console.log("kim.sum() 의 값은",kim.sum()); 
                
            
JavaScript 객체지향 프로그래밍 - 6.1. constructor의 필요성

실습 소스
Watch
영상 요약
비슷한 객체가 여러개일경우 하나만 바뀌면 나머지도 바뀌어야 하기 때문에 문제가 있다.
따라서 양산형 객체가 필요하다.
Code
                
var kim = {
    name:'kim',
    first:10,
    second:20,
    third:30,
    sum:function(){
        return this.first+this.second+this.third;
    }
}

var lee = {
    name:'kim',
    first:10,
    second:10,
    third:10,
    sum:function(){
        return this.first+this.second+this.third;
    }
}

console.log("kim.sum() 의 값은",kim.sum()); 
console.log("lee.sum() 의 값은",lee.sum()); 
                
            

JavaScript 객체지향 프로그래밍 - 6.2. constructor의 사례

실습 소스
Watch
Code
                
var d1 = new Date('2109-4-10');
console.log("d1.getFullYear() 의 값은",d1.getFullYear()); //연도
console.log("d1.getMonth() 의 값은",d1.getMonth()); //월 (월은 0부터 카운팅됨)
                
            

JavaScript 객체지향 프로그래밍 - 6.3. constructor 만들기

실습 소스
Watch
영상 요약
new 라는 키워드로 펑션을 객체로 바꿔줄수 있다.
Code
                
function person(name, first, second, third){
    this.name=name,
    this.first=first,
    this.second=second,
    this.third=third,
    this.sum=function(){
        return this.first+this.second+this.third;
    }
}

var kim = new person('kim',10,20,30);
var lee = new person('lee',10,10,10);

console.log("kim.sum() 의 값은",kim.sum()); // 60
console.log("lee.sum() 의 값은",lee.sum()); // 30

console.log("person() 의 값은",person()); //함수를 그냥 호출

//생성자 함수라고 부른다
console.log("new person() 의 값은",new person()); // new를 붙이면 person이라는 객체가 만들어 진다.       
                
            
JavaScript 객체지향 프로그래밍 - 7.1. prototype이 필요한 이유

실습 소스
Watch
영상 요약
필요없는 코드를 줄여서 메모리 할당을 줄이기 위한 예시영상.
Code
                
function person(name, first, second, third){
    this.name=name,
    this.first=first,
    this.second=second,
    this.third=third,
    this.sum=function(){
        return this.first+this.second+this.third;
    }
}

var kim = new person('kim',10,20,30);
kim.sum = function(){
    return '변경 :' + (this.first+this.second+this.third);
}
var lee = new person('lee',10,10,10);

console.log("kim.sum() 의 값은",kim.sum()); // 60
console.log("lee.sum() 의 값은",lee.sum()); // 30
                
            

JavaScript 객체지향 프로그래밍 - 7.2. prototype을 이용해서 재사용성을 높이기

실습 소스
Watch
영상 요약
보통 함수에는 변수 값만 넣어두고
함수는 특별한 이유가 없다면 prototype에 넣어서 사용한다.
prototype을 사용하면 메모리 공간이 절약이 된다.
Code
                
function person(name, first, second, third){
    this.name=name,
    this.first=first,
    this.second=second,
    this.third=third
}

// person 이라는 생성자 함수 안에 sum이 없기때문에 한번만 정의되고 메모리 절약이 된다
person.prototype.sum=function(){
    return ':::::' +(this.first+this.second+this.third);
}

var kim = new person('kim',10,20,30);
kim.sum= function(){
    return 'this :' +(this.first+this.second+this.third);
}
var lee = new person('lee',10,10,10);
console.log("kim.sum() 의 값은",kim.sum()); // 60
console.log("lee.sum() 의 값은",lee.sum()); // 30
                
            
JavaScript 객체 지향 프로그래밍 - 8.1. Classes

영상 요약
자바스크립트에서도 function 말고도 class를 통해서 구현가능함

사이트로 가면 과거의 기능을 현재의기능으로 바꿔줌

JavaScript 객체 지향 프로그래밍 - 8.2. Classes 의 생성

실습 소스
Watch
영상 요약
class 를 사용하여 간단하게 객체를 선언함
Code
                
class person{

}

var kim = new person();
console.log('kim의 값은',kim);
                
            
JavaScript 객체 지향 프로그래밍 - 9. class의 constructor function

실습 소스
Watch
영상 요약
class 에서 constructor 함수를 구현하는 방법에 대해 실습함.
Code
                
class person{
  constructor(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

var kim = new person('kim',10,20,30);
console.log('kim의 값은',kim);
                
            
JavaScript 객체 지향 프로그래밍 - 10. 메소드 구현

실습 소스
Watch
영상 요약
객체를 생성할 때 모든 객체가 공유하는 공통(prototype)의 객체를 생성하는 방법 실습함.
Code
                
class person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return ':::::' +(this.first+this.second);
    }
}

var kim = new person('kim',10,20);
console.log('kim의 값은',kim);

var kim = new person('kim',10,20,30);
kim.sum= function(){
    return 'this :' +(this.first+this.second);
}
var lee = new person('lee',10,10,10);
console.log("kim.sum() 의 값은",kim.sum()); 
console.log("lee.sum() 의 값은",lee.sum()); 
                
            
JavaScript 객체 지향 프로그래밍 - 11. 상속

실습 소스
Watch
영상 요약
여러곳에서 쓸수도 있으니 코드를 수정하지않고 class를 하나더 만들면 된다.
중복되는 코드가 있을경우 extends 를 사용하면 된다.
Code
                
class person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return (this.first+this.second);
    }

}

class personPlus extends person{
    avg(){
        return (this.first+this.second)/2;
    }
}

var kim = new personPlus('kim',10,20);
console.log('kim.sum() 값은',kim.sum());
console.log('kim.avg() 값은',kim.avg());
                
            
JavaScript 객체 지향 프로그래밍 - 12. super

실습 소스
Watch
영상 요약
super 라는 키워드에 대해서 br> super는 부모클래스를 불러서 부모클래스한테 일을 시키고 부모가하지 못하는일을 내가 처리하는것
super 뒤에 ()가 붙을 경우에는 부모클래스의 생성자이다.
super 뒤에 .가 있을 경우에는 부모클래스이다.
Code
                
class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
                
            
13.1. object inheritance

영상 요약
자바스크립트는 어떻게 상속을 구현하는가에 대한 설명

JavaScript 객체 지향 프로그래밍 - 13.2. __proto__

실습 소스
Watch
영상 요약
__proto__ 를 사용하면 객체를 다른객체의 자식으로 만들어버릴수 있다.
Code
                
var superObj = {superVal:'super'}
var subObj = {subVal:'sub'}
subObj.__proto__ = superObj;
console.log('subObj.subVal 의 값은',subObj.subVal);
console.log('subObj.superVal 의 값은',subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal 의 값은', superObj.superVal);
                
            

JavaScript 객체 지향 프로그래밍 - 13.3. Object.create()

실습 소스
Watch
영상 요약
__proto__ 를 대체 create() 에 대해서 설명함
Code
                
var superObj = {superVal:'super'}
var subObj = Object.create(superObj);
subObj.subVal = 'sub'
console.log('subObj.subVal 의 값은',subObj.subVal);
console.log('subObj.superVal 의 값은',subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal 의 값은', superObj.superVal);
                
            

JavaScript 객체 지향 프로그래밍 - 13.4. 객체상속의 사용

실습 소스
Watch
영상 요약
__proto__ 와 crate() 로 객체상속 코드 만들어봄
Code
                
var superObj = {superVal:'super'}
var subObj = Object.create(superObj);
subObj.subVal = 'sub'
console.log('subObj.subVal 의 값은',subObj.subVal);
console.log('subObj.superVal 의 값은',subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal 의 값은', superObj.superVal);

var kim = {
    name:'kim',
    first:10, second:20,
    sum:function(){return this.first+this.second}
}
var lee = Object.create(kim);
lee.name = 'lee';
lee.first = 10;
lee.second = 20;
lee.avg = function(){
    return(this.first+this.second)/2;
}

// var lee = {
//     name:'lee',
//     first:10, second:10,
//     avg:function(){
//         return (this.first+this.second)/2;
//     }
// }
// lee.__proto__ = kim;

console.log('kim.sum() 의 값은'+ kim.sum());
console.log('lee.sum() 의 값은'+ lee.avg());
                
            
JavaScript 객체 지향 프로그래밍 - 14.1. 객체와 함수

영상 요약
call bind this 객체에 대해서 사용전에 간단한 설명

JavaScript 객체 지향 프로그래밍 - 14.2. call

실습 소스
Watch
영상 요약
call 이라는 함수를 사용할때는
첫번째인자는 그 함수의 내부의 this값
두번째인자부터는 파라미터 값을 넣는다
Code
                
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}
function sum(prefix){
    return prefix+(this.first+this.second);
}

console.log("sum.call(kim) 의 값은",sum.call(kim, '=>'));
console.log("sum.call(lee) 의 값은",sum.call(lee, ':-'));
                
            

JavaScript 객체 지향 프로그래밍 - 14.3. bind

실습 소스
Watch
영상 요약
call은 실행할때 함수값을 바꾼다. bind는 영구적인 새로운 값을 생성한다.
Code
                
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}
function sum(prefix){
    return prefix+(this.first+this.second);
}

console.log("sum.call(kim) 의 값은",sum.call(kim, '=>'));
console.log("sum.call(lee) 의 값은",sum.call(lee, ':-'));

var kimSum = sum.bind(kim, '->');
console.log("kimSum() 의 값은",kimSum());

                
            
JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto

영상 요약
객체가 자체적으로 가지고있지 않은 값을 사용하려할때 어떤데이터로 어떻게 찾아내는가 에 대해서 설명함
JavaScript 객체 지향 프로그래밍 - 16.1. 생성자 함수를 통한 상속 : 소개

영상 요약
class로 상속하지않고 다른 방법으로 상속하는 방법대해서 해볼것이라고 함.

JavaScript 객체 지향 프로그래밍 - 16.2. 생성자 함수를 통한 상속 : 부모 생성자 실행

실습 소스
Watch
영상 요약
call() 을 사용하여 부모 생성자를 실행 해봄
Code
                
function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
}
Person.prototype.sum = function(){
    return this.first + this.second;
}
 
function PersonPlus(name, first, second, third){
    Person.call(this, name,first,second);
    this.third = third;
}
 
PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.thrid)/3;
}
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
                
            

JavaScript 객체 지향 프로그래밍 - 16.3. 생성자 함수를 통한 상속 : 부모와 연결하기

실습 소스
Watch
영상 요약
원하는 함수가 부모에 있을경우 상속하는 방법에 대해 실습함.
Code
                
function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
}
Person.prototype.sum = function(){
    return this.first + this.second;
}
 
function PersonPlus(name, first, second, third){
    Person.call(this, name,first,second);
    this.third = third;
}
// PersonPlus.prototype.__proto__ = Person.prototype;
PersonPlus.prototype = Object.create(Person.prototype)
 
PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.third)/3;
}
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
                
            

JavaScript 객체 지향 프로그래밍 - 16.4. 생성자 함수를 통한 상속 : constructor 속성은 무엇인가?

영상 요약
constructor 는 어떠한 객체가 누구로 부터 만들어졋는지를 알려준다.

JavaScript 객체 지향 프로그래밍 - 16.5. 생성자 함수를 통한 상속 : constructor 속성 바로잡기

실습 소스
Watch
영상 요약
복잡해ㅠㅠ
Code
                
function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
}
Person.prototype.sum = function(){
    return this.first + this.second;
}
 
function PersonPlus(name, first, second, third){
    Person.call(this, name,first,second);
    this.third = third;
}
 
// PersonPlus.prototype.__proto__ = Person.prototype;
PersonPlus.prototype = Object.create(Person.prototype);
PersonPlus.prototype.constructor = PersonPlus;
PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.third)/3;
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
console.log('kim.constructor', kim.constructor);
                
            
JavaScript 객체 지향 프로그래밍 -17. 수업을 마치며

영상 요약
class 와 prototype 에 대해 공부를 했으니 java를 할때 도움이 될것이다.