Top
기초 문법 변수 자료형

01. 변수 : 데이터 저장

{
    var x = 100; //변수 x에 숫자 100을 저장
    var y = 200; //변수 y에 숫자 200을 저장
    var z = "javascript"; //변수 z에 문자 javascript를 저장

    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

02. 변수 : 데이터 저장 + 데이터 변경

{
    let x = 100;
    let y = 200;
    let z = "javascript";

    x = 300; //변수 x를 100->300 변경
    y = 400; //변수 y를 200->400 변경
    z = "jquery"; //변수 z를 javascript->jquery 변경 

    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가

{
    let x = 100;
    let y = 200;
    let z = "javascript";

    x += 300; //== x = x + 300; //변수 x에 300 추가
    y -= 400; //== y = y - 400; //변수 y에 -400 추가
    z += "jquery"; //== z = z = jquery; //변수 z에 jquery 추가

    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

04. 변수 : 지역 변수 + 전역 변수

{
    let x = 100; //전역변수
    let y = 200; //전역변수

    function func() {
        let x = 100; //지역변수
        let z = "javascript"; //지역변수
        x = 200; //지역변수 100->200
        y = 300; //전역변수 200->300      

        document.write(x, "<br>");
        document.write(y, "<br>");
        document.write(z, "<br>");
    };
    func();

    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

05. 상수 : 데이터 저장 + 데이터 변경(X)

{
    const x = 100;
    const y = 200;
    const z = "javascript";

    // x = 300;  적용시 값이 출력되지 않음
    // y = 400;  적용시 값이 출력되지 않음
    // z = "jquery";  적용시 값이 출력되지 않음

    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

06. 배열 : 여러개의 데이터를 저장 : 표현 방법1

{
    const arr = new Array();

    arr[0] = 100; //배열 0에 100을 저장
    arr[1] = 200; //배열 1에 200을 저장
    arr[2] = "javascript"; //배열 2에 javascript를 저장

    document.write(arr[0], "<br>");
    document.write(arr[1], "<br>");
    document.write(arr[2], "<br>");
}

결과보기

07. 배열 : 여러개의 데이터를 저장 : 표현 방법2

{
    const arr = new Array(100, 200, "javascript");

    //배열 0에 100을 저장
    //배열 1에 200을 저장
    //배열 2에 javascript를 저장                        

    document.write(arr[0], "<br>");
    document.write(arr[1], "<br>");
    document.write(arr[2], "<br>");
}

결과보기

08. 배열 : 여러개의 데이터를 저장 : 표현 방법3

{
    const arr = [];

    arr[0] = 100; //배열 0에 100을 저장
    arr[1] = 200; //배열 1에 200을 저장
    arr[2] = "javascript"; //배열 2에 javascript를 저장

    document.write(arr[0], "<br>");
    document.write(arr[1], "<br>");
    document.write(arr[2], "<br>");
}

결과보기

09. 배열 : 여러개의 데이터를 저장 : 표현 방법4

{
    const arr = [100, 200, "javascript"];

    //배열 0에 100을 저장
    //배열 1에 200을 저장
    //배열 2에 javascript를 저장

    document.write(arr[0], "<br>");
    document.write(arr[1], "<br>");
    document.write(arr[2], "<br>");
}

결과보기

10. 객체 : 데이터를 저장(키와 값) : 표현 방법1 : 06. 배열과 같음

{
    const obj = new Object();
            
    obj[0] = 100; //객체 0에 100을 저장
    obj[1] = 200; //객체 1에 200을 저장
    obj[2] = "javascript"; //객체 2에 javascript를 저장

    document.write(obj[0], "<br>");
    document.write(obj[1], "<br>");
    document.write(obj[2], "<br>");
}

결과보기

11. 객체 : 데이터를 저장(키와 값) : 표현 방법2

{
    const obj = new Object();
            
    obj.a = 100; //객체 a에 100을 저장
    obj.b = 200; //객체 b에 200을 저장
    obj.c = "javascript"; //객체 c에 javascript를 저장

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.c, "<br>");
}

결과보기

12. 객체 : 데이터를 저장(키와 값) : 표현 방법3

{
    const obj = {};
            
    obj.a = 100; //객체 a에 100을 저장
    obj.b = 200; //객체 b에 200을 저장
    obj.c = "javascript"; //객체 c에 javascript를 저장

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.c, "<br>");
}

결과보기

13. 객체 : 데이터를 저장(키와 값) : 표현 방법4

{
    const obj = {a: 100, b: 200, c: "javascript"};

    //객체 a에 100을 저장
    //객체 b에 200을 저장
    //객체 c에 javascript를 저장

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.c, "<br>");
}

결과보기

14. 객체 : 데이터를 저장(키와 값) : 표현 방법5 : 배열 속에 객체

{
    const obj = [{
            a: 100, //배열0_객체a에 100을 저장
            b: 200 //배열0_객체b에 200을 저장
        },
        {
            c: "javascript" //배열1_객체c에 javascript를 저장
        }
    ];

    document.write(obj[0].a, "<br>");
    document.write(obj[0].b, "<br>");
    document.write(obj[1].c, "<br>");
}

결과보기

15. 객체 : 데이터를 저장(키와 값) : 표현 방법6 : 객체 속에 배열

{
    const obj = {
        a: 100, //객체 a에 100을 저장
        b: [200, 300], //객체b_배열0에 200을 저장
        c: {           //객체b_배열1에 300을 저장
            x: 400, //객체c_객체x에 400을 저장
            y: 500 //객체c_객체y에 500을 저장
        },
        d: "javascript" //객체 d에 javascript를 저장
    };

    document.write(obj.a, "<br>");
    document.write(obj.b[0], "<br>");
    document.write(obj.b[1], "<br>");
    document.write(obj.c.x, "<br>");
    document.write(obj.c.y, "<br>");
    document.write(obj.d, "<br>");
}

결과보기

16. 객체 : 데이터를 저장(키와 값) : 표현 방법7 : 객체 속에 변수

{
    const a = 100; //변수 a에 100을 저장
    const b = 200; //변수 b에 200을 저장
    const c = "javascript"; //변수 c에 javascript를 저장

    const obj = {
        a, //객체a에 변수a 저장
        b, //객체b에 변수b 저장
        c  //객체c에 변수c 저장
    };

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.c, "<br>");
}

결과보기

17. 객체 : 데이터를 저장(키와 값) : 표현 방법8 : 객체 속에 함수

{
    const obj = {
        a: 100, //객체 a에 100을 저장
        b: [200, 300], //객체b_배열0에 200을 저장
        c: {           //객체b_배열1에 300을 저장
            x: 400, //객체c_배열x에 400을 저장
            y: 500 //객체c_배열y에 500을 저장
        },
        d: "javascript", //객체 d에 javascript을 저장
        e: function () { //객체 e에 아래 함수를 저장
            document.write("javascript가 실행되었습니다.");
        },
        f: function () { //객체 f에 아래 함수를 저장
            document.write(obj.d + "가 실행되었습니다.");
        },
        g: function () { //객체 g에 아래 함수를 저장
            document.write(this.d + "가 실행되었습니다.");
        }
    };

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.b[0], "<br>");
    document.write(obj.b[1], "<br>");
    document.write(obj.c.x, "<br>");
    document.write(obj.c.y, "<br>");
    obj.e("<br>");
    obj.d("<br>");
    obj.g("<br>");
}

결과보기

100
200,300
200
300
400
500
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.