본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 객체

객체

자바스크립트는 객체 기반 언어입니다. 객체는 데이터와 연산 작업을 담고 있는 기본적인 기능이라고 생각하면 됩니다. 객체는 기능 또는 속성을 가지고 있으며, 우리 주변의 모든 사물들을 객체라고 표현 할 수 있습니다.


객체

객체(object)란 데이터와 연산 작업을 담고 있는 기본적인 기능이며, 메서드(Method)와 속성(Attribute)으로 이루어져 있습니다.

객체.메서드(); 객체가 할 수 있는 동작 값
객체.속성; 객체의 기본 데이터 값

Sample1

객체를 생성하는 방법 예제입니다.

결과
100 200
100 200
100 200
100 200
100 200
100 200
100 200
100 200 자바스크립트

100
200
자바스크립트
자바스크립트가 실행되었습니다.
자바스크립트가 실행되었습니다.

100
200
자바스크립트
제이쿼리
20000
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>객체를 생성하는 방법</title>
    <script>
        //배열 선언
        var arr1 = new Array();
        arr1[0] = 100; 
        arr1[1] = 200;
        
        document.write(arr1[0],"<br>");
        document.write(arr1[1],"<br><br>");
        
        //배열을 선언과 동시에 데이터를 넣는 방법입니다.
        var arr2 = new Array(100,200);
        
        document.write(arr2[0],"<br>");
        document.write(arr2[1],"<br><br>");
        
        //배열을 선언하지 않고 바로 데이터를 넣는 방법입니다.
        var arr3 = [100,200];
        document.write(arr2[0],"<br>");
        document.write(arr2[1],"<br><br>");
        
        
        //객체 선언
        var obj1 = new Object();
        obj1[0] = 100; 
        obj1[1] = 200;
        
        document.write(obj1[0],"<br>");
        document.write(obj1[1],"<br><br>");
        
        //객체 선언
        var obj2 = new Object();
        obj2.a = 100; 
        obj2.b = 200;
        
        document.write(obj2.a,"<br>");
        document.write(obj2.b,"<br><br>");
        
        //객체 선언하고 데이터를 넣는 방법입니다.
        var obj3 = {};
        obj3.a = 100; 
        obj3.b = 200;
        
        document.write(obj3.a,"<br>");
        document.write(obj3.b,"<br><br>");
        
        //객체 선언과 동시에 데이터를 넣는 방법입니다.
        var obj4 = {'a':100, 'b':200};
        
        document.write(obj4.a,"<br>");
        document.write(obj4.b,"<br><br>");
        
        //객체와 배열
        var obj5 = new Object();
        obj5.a = ['100', '200']; 
        obj5.b = "자바스크립트";
        
        document.write(obj5.a[0],"<br>");
        document.write(obj5.a[1],"<br>");
        document.write(obj5.b,"<br><br>");
        
        //객체와 배열 속성과 메서드를 사전에 정의하여 객체 생성하기
        var obj6 = {
            a : ['100', '200'],
            b : "자바스크립트",
            c : function(){
                document.write("자바스크립트가 실행되었습니다.<br>");
            },
            d : function(){
                document.write(this.b + "가 실행되었습니다.<br><br>");
            }
        }
        document.write(obj6.a[0],"<br>");
        document.write(obj6.a[1],"<br>");
        document.write(obj6.b,"<br>");
        obj6.c();
        obj6.d();
        
        
        //객체 생성자 표기법
        //함수를 이용하면 여러개의 객체를 생성, 객체의 이름 대신 this 키워드를 사용.
        function obj7(a, b){
            this.a = a;
            this.b = b;
            this.c = function(){
                return a * b;
            }
        }
        var result1 = new obj7(100,200);
        var result2 = new obj7("자바스크립트","제이쿼리");

        document.write(result1.a,"<br>");
        document.write(result1.b,"<br>");
        document.write(result2.a,"<br>");
        document.write(result2.b,"<br>");
        document.write(result1.c(),"<br>");
    </script>
</head>
<body>
    
</body>
</html> 

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기