객체

자바스크립트는 객체(Object)기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다. 가령, TV에는 켜다, 끄다, 음을 소거하다, 볼륨을 높이다, 볼륨을 낮추다 등의 기능이 있습니다. 이렇듯 TV라는 객체에는 다양한 기능이 있습니다. 이러한 주변의 모든 사물들을 객체라고 합니다.

객체

객체. 메서드( ); 객체. 속성; 또는 객체. 속성 = 값;

객체의 메서드를 실행 객체의 속성값을 가져옵니다. 객체의 속성값을 바꿉니다.

객체의 종류

자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model). 문서 객체 모델(DOM, Document Object Model)로 나눌 수 있습니다.

내장객체

내장 객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있습니다. 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있습니다.

브라우저 객체 모델

브라우저 객체 모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말합니다. 브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있습니다.

문서 객체 모델

문서 객체 모델(DOM)은 HTML문서 구조를 말합니다. 문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있습니다. 예를 들어 자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면 지정되 <img>를 선택해 src 속성을 바꿔야합니다. 이때 지정요소를 제대로 선택해서 가져오려면 우선 객체의 구조를 잘 이해하고 있어야 합니다, 이렇게 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수도 있습니다.

//변수 num1, num2 만들고 100, 200저장한 다음, 출력;
let num1 = 100;
let num2 = 200;

//let num1 = 100, num2 = 200;     //쉼표를 통해서 let 생략가능

document.write(num1, "<br>");
document.write(num2, "<br><br>");

//100
//200

//배열을 선언하고, 100, 200입력하고 출력
let arr1 = new Array(); 
arr1[0] = 100;
arr1[1] = 200;

document.write(arr1[0], "<br>");
document.write(arr1[1], "<br><br>");

//배열을 선언과 동시에 데이터(100, 200)를 넣고 출력
let arr2 = new Array(100,200);

document.write(arr2[0], "<br>");
document.write(arr2[1], "<br><br>");

//배열을 선언하지 않고 바로 데이터를 입력하고 출력
let arr3 = [100, 200];

document.write(arr3[0], "<br>");
document.write(arr3[1], "<br><br>");

//100
//200

//100
//200

//100
//200

//객체를 선언하고 첫번째 저장소에 300, 400 입력하고 출력
let obj1 = new Object();

obj1[0] = 300;
obj1[1] = 400;

document.write(obj1[0], "<br>");
document.write(obj1[1], "<br><br>");
//객체이지만 배열처럼 쓸수 있다.

//300
//400

let obj2 = new Object(300, 400);

document.write(obj2[0], "<br>");
document.write(obj2[1], "<br><br>");

//undefined
//undefined

let obj3 = {a : 300, b : 400};

document.write(obj3.a, "<br>");
document.write(obj3.b, "<br><br>");

//300
//400

let obj4 = new Object();
obj4.a = [300, 400];
obj4.b = "javascript";

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

//300, 400
//300
//400
//javascript

let obj5 = {
    a:100, 
    b:"100", 
    c:[100,200], 
    d:function(){
        document.write("객체가 실행되었습니다.");
    }
}

document.write(obj5.a, "<br>");
document.write(obj5.b, "<br>");
document.write(obj5.c[0], "<br>");
document.write(obj5.c[1], "<br>");
document.write(obj5.d, "<br>"); //문자로 인식하여 뒷부분이 출력된다.
obj5.d();

//100
//100
//100
//200
//function(){document.write("객체가 실행되었습니다."); }
//객체가 실행되었습니다.

let obj4 = {
    a : [100, 200, 300],
    b : "자바스크립트",
    c : function(){
        document.write("실행되었습니다.");
    },
    d : function(){
        document.write(this.b  + "가 실행되었습니다.")
    } 
}

document.write(obj4.a[0]);
document.write(obj4.a[1]);
document.write(obj4.a[2]);
document.write(obj4.b);
obj4.c();
obj4.d();

//100
//200
//300
//

Previous배열 Next연산자

Last updated 5 years ago

hashtag객체

hashtag객체의 종류

hashtag내장객체

hashtag브라우저 객체 모델

hashtag문서 객체 모델

객체

객체의 종류

내장객체

브라우저 객체 모델

문서 객체 모델