객체

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

객체

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

객체의 종류

내장 객체 /브라우저 객체 모델(BOM, Browser Object Model)/ 문서 객체 모델(DOM, Document Object Model)

내장 객체

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

브라우저 객체 모델 (BOM)

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

문서 객체 모델 (DOM)

문서 객체 모델은 HTML 문서 구조를 말합니다. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와<body>가 있습니다.

let num1 = 100, num2 = 200;

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

//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>");

//100
//200

let arr3 = [100, 200];

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

//100
//200

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 = [100, 200];
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>");

//100,200
//100
//200
//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, "<br>");
document.write(obj5.c[0], "<br>");
document.write(obj5.c[1], "<br>");
document.write(obj5.d, "<br>");
obj5.d();

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

객체 생성자 함수

function colorName(color){
    for(let i = 1; i <= 10; i++){
        document.write("이것은" + color,i + "입니다.","<br>");
    }
}
colorName("빨간색");
colorName("파란색");
colorName("노란색");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.");
        document.write("내 이름은 도하은이며, 내일 자기소개 할 겁니다.");

        document.write("<br>");

        //매개 변수가 있는 함수 출력

        function func1(name, job){
            document.write("내 이름은"+ name + "이며, 내 직업은" + job +"입니다.");
            document.write("내 이름은"+ name + "이며, 내일" + job +"할 겁니다.");
        }
        func1("도하은", "자기소개");
        func1("웹쓰", "웹 퍼블리셔");

        document.write("<br>");

        //변수를 선언하고 함수로 출력

        function func2(name, job) {
            document.write("내 이름은"+ name + "이며, 내 직업은" + job +"입니다.");
            document.write("내 이름은"+ name + "이며, 내 직업은" + job +"입니다.");
            
        }
        let youName = "웹쓰";
        let job = "웹 퍼블리셔";
        let youName2 = "도하은";
        let job2 = "자기소개";

        func2(youName,job);
        func2(youName2,job2);

        document.write("<br>");

        //객체를 선언하고 함수로 출력
        function func3(name, job) {
            document.write("내 이름은"+ name + "이며, 내 직업은" + job +"입니다.");
            document.write("내 이름은"+ name + "이며, 내 직업은" + job +"입니다.");
            
        }
        const you = [
            {
                name: "웹쓰",
                job: "웹 퍼블리셔"
            },
            {
                name: "웹스토리보이",
                job: "프로그래밍"
            }]

        func3(you[0].name,you[0].job);
        func3(you[1].name,you[1].job);
        document.write("<br>");

        //객체 + 매서드

        const you2 = {
            name1: "웹쓰",
            job1: "웹 퍼블리셔",
            name2: "웹스토리보이",
            job2: "프로그래밍",

            study1: function(){
                document.write("내 이름은" + this.name1 + "이며, 내 직업은" + this.job1 + "입니다.");
            },
            study2: function(){
                document.write("내 이름은" + this.name2 + "이며, 내 직업은" + this.job2 + "입니다.");
            }

        }
        you2.study1();
        you2.study2();
        document.write("<br>");

        //객체 생성자 함수(함수 + 인스턴스 객체 (매개변수))
        function you3(name, job){
            this.name = name;
            this.job = job;
            this.study = function(){
                document.write("내 이름은" + this.name + "이며, 내 직업은" + this.job + "입니다.");
            }
        }
        let char1 = new you3("웹쓰", "웹퍼블리셔");
        let char2 = new you3("웹스토리보이", "프로그래밍");

        char1.study();
        char2.study();
        document.write("<br>");

        //프로토타입 매서드

        function you4(name, job){
            this.name = name;
            this.job = job;
        }
        you4.prototype.study = function(){
            document.write("내 이름은" + this.name + "이며, 내 직업은" + this.job + "입니다.");
        }
        let char3 = new you3("웹쓰", "웹퍼블리셔");
        let char4 = new you3("웹스토리보이", "프로그래밍");

        char3.study();
        char4.study();
        document.write("<br>");

        //객체 리터럴
        function you5(name, job){
            this.name = name;
            this.job = job;
        }
        you5.prototype = {
            study1: function(){
                document.write("내 이름은" + this.name + "이며, 내 직업은" + this.job + "입니다.");
            },
            study2: function(){
                document.write("내 이름은" + this.name + "이며, 내 직업은" + this.job + "입니다.");
            }
        }
        let char5 = new you5("웹쓰", "웹퍼블리셔");
        let char6 = new you5("웹스토리보이", "프로그래밍");
    </script>
</head>
<body>
    
</body>
</html>

Previous템플릿 리터럴 Next내장 객체

Last updated 5 years ago

Was this helpful?