Top

01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다.

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

    document.write(x)
    document.write(y)
    document.write(z)
결과보기
100
200
javascript

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);
    document.write(y);
    document.write(z);
결과보기
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";    // z = z + javascript

    document.write(x);
    document.write(y);
    document.write(z);
결과보기
400
-200
javasciprtjquery

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

    document.write("함수 밖");
    document.write(x);
    document.write(y);
    document.write(z);
결과보기
함수 안
100
300
javascript

함수 밖
100
300
undifined

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

상수는 데이터 저장은 가능하지만 변경은 불가능합니다. 상수 (const)는 이미 선언한 숭수에 대해 중복해서 선언 할 수 없고, 상수의 값은 재지정할 수도 없습니다. 

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

    x = 300;         //300으로 변경X
    y = 400;         //400으로 변경X
    z = "jquery";   //jquery으로 변경X

    document.write(x);
    document.write(y);
    document.write(z);
결과보기
100
200
javascripts

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

배열은 여러 개의 데이터를 저장할 수 있는 저장소. 첫번째 방법 

    const arr = new Array();     //빈 배열 객체 생성
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
결과보기
100
200
javascript

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

배열은 여러 개의 데이터를 저장할 수 있는 저장소. 두번째 방법 

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
결과보기
100
200
javascript

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

배열은 여러 개의 데이터를 저장할 수 있는 저장소. 세번째 방법 약식으로 작업 

    const arr = [];
    arr[0] = 100;
    arr[0] = 200;
    arr[0] = "javascript";

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
결과보기
100
200
javascript

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

배열은 여러 개의 데이터를 저장할 수 있는 저장소. 네번째 방법 가장 많이 쓰는 방법 

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
결과보기
100
200
javascript

10. 객체 : 데이터 저장(키와 값) : 표현 방법1

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 첫번째 방법 

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

    document.write(obj[0]);
    document.write(obj[1]);
    document.write(obj[2]);
결과보기
100
200
javascript

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

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 두번째 방법 

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
결과보기
100
200
javascript

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

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 세번째 방법 

    const obj = {}

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
결과보기
100
200
javascript

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

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 네번째 방법 

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
결과보기
100
200
javascript

14. 객체 : 배열 속에 객체

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 다섯번째 방법 

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

    document.write(obj[0].a);
    document.write(obj[0].b);
    document.write(obj[1].c);
결과보기
100
200
javascript

15. 객체 : 객체 속에 배열

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 여섯번째 방법 

    const obj = {
        a: 100,
        b: [200, 300],
        c: {x: 400, y: 500},
        d: "javascript"
    }

    document.write(obj.a);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c.x);
    document.write(obj.c.y);
    document.write(obj.d)
결과보기
100
200
300
400
500
javascript

16. 객체 : 객체 속에 변수

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 일곱번째 방법 

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

    const obj = {a, b, c}
    
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
결과보기
100
200
javascript

17. 객체 : 객체 속에 함수

객체는 데이터를 필요한 대로 만들어 사용 가능하며, 객체의 데이터는 '이름 : 값' 의
쌍으로 이루어 있으며 이것을 속성이라 부른다.
키와 값으로 구성된 데이터 값 저장. 여덟번째 방법 

    const obj = {
            a : 100,
            b : [200, 300],
            c : {x:400, y:500},
            d: "javascript",
            e: function() {
                document.write("자바스크립트가 실행되었습니다.");
            },
            f : function() {
                document.write(obj.d + "가 실행되었습니다.");   //다른 값을 넣어 불러올 수 있음
            },
            g : function() {
                document.write(this.d + "가 실행되었습니다.");
            }
    }

    document.write(obj.a)
    document.write(obj.b[0])
    document.write(obj.b[1])
    document.write(obj.b)
    document.write(obj.c.x)
    document.write(obj.c.y)
    document.write(obj.c)
    document.write(obj.d)
    obj.e() //제어문 삭제
    obj.f()
    obj.g()
결과보기
100
200
300
200300
400
500
400500
javascript
"자바스크립트가 실행되었습니다."
javascript"가 실행되었습니다."
javascript"가 실행되었습니다."