Top
기초 문법 변수 자료형

01. 변수 : 데이터 저장

{
    var x = 100;                 //변수 x에 숫자 100을 저장
    var y = 200;                //변수 y에 숫자 200을 저장
    var z = "javascript";       //변수 z에 문자 javascript 저장, 문자 입력시에는 " "

    document.write("<br>*** 01. 변수 ***<br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

100
200
javascript

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

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    x = 300;
    y = 400;
    z = "jquery"
    
    document.write("*** 02. 변수 ***<br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

300
400
jquery

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

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    
    x += 300;   //x = x + 300;
    y -= 400;   //y = y - 400; 
    z += "jquery";

    document.write ("<br>*** 03. 변수 *** <br>");
    document.write (x, "<br>");
    document.write (y, "<br>");
    document.write (z, "<br>");
}

결과보기

400
-200
javascriptjquery

04. 변수 : 변수의 종류 : 지역변수 + 전역변수 + 매개변수

 {
    //변수 : 데이터 저장
    //함수 : 데이터 실행

    document.write("
*** 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("<br>함수 안<br>");
        document.write(x, "<br>");
        document.write(y, "<br>");
        document.write(z, "<br>");
    }
    func();

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

결과보기

함수 안
200
300
javascript
함수 밖
100
300
javascript

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

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

    //x = 300;
    //y = 400;
    //z = "jquery";

    document.write"(<br>*** 05. 상수 *** <br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}

결과보기

100
200
javascript

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

{
    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

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

결과보기

100
200
javascript

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

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

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

결과보기

100
200
javascript

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

{
    const arr = [];
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

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

결과보기

100
200
javascript

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

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

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

결과보기

100
200
javascript

10. 객체 : 데이터를 저장 (키와 값) : 표현 방법1 : 배열의 방법도 동일하게 적용

{
    const obj = new Object();
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript";

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

결과보기

100
200
javascript

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

{
    const obj = new Object();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

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

결과보기

100
200
javascript

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

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

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

결과보기

100
200
javascript

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

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

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

결과보기

100
200
javascript

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

{
    const obj = [
        {a: 100, b: 200},
        {c: "javascript"}
    ];
    document.write("<br>*** 14. 객체 ***<br>");
    document.write(obj [0].a, "<br>");
    document.write(obj [0].b, "<br>");
    document.write(obj [1].c, "<br>");
}

결과보기

100
200
javascript

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

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x: 400, y: 500},
        d: "javascript"
    }
    document.write("<br>*** 15. 객체 ***<br>");
    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>");
}

결과보기

100
200
300
400
500
javascript

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

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = { a, b, c };

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

결과보기

100
200
javascript

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

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x: 400, y: 500},
        d: "javascript",
        e: function(){
            document.write("javascript가 실행되었습니다.");
        },
        f: function(){
            document.write(obj.d + "가 실행되었습니다. <br>");
        },
        g: function(){
            document.write(this.d + "가 실행되었습니다. <br>");
        }

    }
    
        document.write("<br>*** 17. 객체 ***<br>");
        //100
        //200,300
        //200
        //300
        //400
        //500
        //javascript가 실행되었습니다.

    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();
    obj.d(); 
    obj.g(); 
}

결과보기

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