Top
기초 문법 변수 자료형

01. 변수 : 데이터 저장

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

    document.write("*** 01. 변수 ***");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

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

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

    document.write("*** 02. 변수 ***"");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과 보기

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

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

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

    document.write("*** 03. 변수 ***");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과 보기

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

{
    document.write("*** 04. 변수 : 변수의 종류 ***");
      
    //전역변수  :  지역변수에 영향을 받지않는다.
    let x = 100; 
    let y = 200;

    function func() { //함수
        //지역변수
        let x = 100;
        let z = "javasript"; 

        //데이터 변경
        x = 200;  //지역변수 100 -> 200
        y = 300;  //전역변수 200 ->  300

        document.write("*함수 안*");
        document.write(x);  //200 
        document.write(y);  //300
        document.write(z); //javasript
    }
    func(); //함수 호출(함수를 실행)

    document.write("*함수 밖*");
    document.write(x); //100 : 지역변수x에 영향을 받지 않음
    document.write(y); //300  :  지역변수y가 선언되지 않았기에 y=300 데이터 변경
    document.write(z); //값없음: 에러 : 전역변수 값이 없기 때문
}

결과 보기

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

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

    // 아래와 같이 입력시 아래 값으로 변동되어야 하나 변하지 않는 것이 상수(재선언,재할당 안됨)
    //x = 300;
    //y = 400;
    //z = "jquery"; 

    document.write("*** 05. 상수 ***")
    document.write(x);
    document.write(y);
    document.write(z);
}

결과 보기

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

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

    document.write("*** 06. 배열 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);

}

결과 보기

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

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

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

결과 보기

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

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

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

결과 보기

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

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

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

결과 보기

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

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

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

결과 보기

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

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

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

결과 보기

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

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

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

결과 보기

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

{
    const obj = {a: 100, b: 200, c: "javascript"};
    
    document.write("*** 13.객체 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

결과 보기

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

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

    document.write("*** 14. 객체 ***");
    document.write(obj[0].a);
    document.write(obj[0].b;
    document.write(obj[1].c);

}

결과 보기

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

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

    document.write("
*** 15.객체 ***
");
    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);
}

결과 보기

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

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

    const obj = { a, b, c }
    
    document.write("*** 16.객체 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

결과 보기

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

 {
    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 + "가 실행되었습니다.");
        },
        g: function(){
            document.write(this.d + "가 실행되었습니다.");
        }
    }

    document.write("*** 17.객체 ***");
    document.write(obj.a);   //100
    document.write(obj.b);   //200,300 : 배열 전체
    document.write(obj.b[0]);//200
    document.write(obj.b[1]);//300
    document.write(obj.c);   //[object Object] : 출력 오류
    document.write(obj.c.x); //400
    document.write(obj.c.y); //500
    //함수 호출
    obj.e(); //javascript가 실행되었습니다.
    obj.f(); //javascript가 실행되었습니다.
    obj.g(); //javascript가 실행되었습니다.
}

결과 보기