Java Script 객체

Language/Java Script

Java Script 객체

원2 2021. 5. 12. 16:29

728x90

l 객체

- 세상에 존재하는 모든 것

연관배열 말고 JSON 이다!!

l 자바스크립트 객체

- 사용자 정의 객체: 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체(예: Car( ), House( ), Hotel( ))

- 내장 객체: 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체(예: Object( ), Array( ), Date( ))

l 내장 객체의 종류

- 브라우저 객체 모델(BOM, Browser Object Model): 웹 브라우저의 각종 요소를 객체로 표현

- 문서 객체 모델(DOM, Document Object Model): 웹 문서의 각종 요소를 객체로 표현

- 전역 자바스크립트 객체(Global JavaScript Objects): 자바스크립트 프로그램 전체에서 사용하는 내장 객체

속성만 가진 객체 만들기

getElementByld = 가져오겠다,원소?를 . innerHTML = 집어넣겠다.HTML 코드에.(글로벌)

<body>
    <p id = "var1"></p>
    <p id = "var2"></p>
    <p id = "var3"></p>
    <script>
        var car= {
            name: 'Sonata',
            speed: 100,
            color: 'white'
        }; //자바스크립트로 제어할 요소를 찾아서 결과를 출력하는 방법
        document.getElementById("var1").innerHTML="자동차 이름 : " + car['name'];
        document.getElementById("var2").innerHTML="자동차 속도 : " + car.speed;
        document.getElementById("var3").innerHTML="자동차 색상 : " + car.color;
    </script>
</body>

메소드를 호출하여 연산 결과 출력

<body>
    <p id="msg1"></p>
    <p id="msg2"></p>
    <p id="msg3"></p>
    <script>
        var obj = {
            m1: function() {
                return "Hello Sonata";
            },
            m2: function(a) {
                var result = a;
                return result;
            },
            m3: function(a, b) {
                var result = a+b;
                return result;
            }
        };
        document.getElementById("msg1").innerHTML=obj.m1();
        document.getElementById("msg2").innerHTML=obj.m2(100);
        document.getElementById("msg3").innerHTML=obj.m3(100, 200);
    </script>
</body>

자동차 객체 생성

<body>
    <p id="carname"></p>
    <p id="carcolor"></p>
    <p id="carspeed"></p>
    <script>
        var car = {
            name: 'Sonata',
            speed: 50, //처음 속도를 정해준 것
            color: 'white',
            start: function() {
                return this.speed+10;
            }
        };
        var cname = document.getElementById("carname");
        cname.textContent = car.name;
        var colname = document.getElementById("carcolor");
        colname.textContent = car.color;
        var cspeed = document.getElementById("carspeed");
        cspeed.textContent = car.start(); // 출발 함수를 호출해서 원래 스피드에서 10이 증가.
    </script>
</body>

자동차의 속도 조절

<body>
    <p id="upspeed"></p>
    <p id="downspeed"></p>
    <script>
        var car= {
            name: 'Sonata',
            speed: 50,
            color: 'white',
            speedup: function() {
                return this.speed+10;
            },
            speeddown: function() {
                return this.speed-10;
            }
        };
        var upspeed= document.getElementById("upspeed");
        upspeed.textContent = '속도 증가 : ' + car.speedup();
        var downspeed= document.getElementById("downspeed");
        downspeed.textContent = '속도 감소 : ' + car.speeddown();
    </script>
</body>

자동차의 속도 제어

<body>
    <p id="upspeed"></p>
    <p id="downspeed"></p>
    <script>
        var car= {
            name: 'Sonata',
            speed: 100,
            color: 'white',
            speedup: function(a){
                var sp= this.speed+a;
                if(sp>=300) {
                   sp=50;
                    return sp;
               }else {
                   return sp;
               }
            },
            speeddown: function(a) {
                var sp = this.speed-a;
                if(sp<0) {
                   sp = 0;
                    return sp;
               }else {
                   return sp;
               }
            }
        };
        var upspeed = document.getElementById("upspeed");
        upspeed.textContent = '속도 증가 : ' + car.speedup(100);
        var downspeed = document.getElementById("downspeed");
        downspeed.textContent = '속도 감소 : ' + car.speeddown(30);
    </script>
</body>

l Object 함수 이용

객체 만들기

<body>
    <p id="carname"></p>
    <p id="carcolor"></p>
    <p id="carspeed"></p>
    <script>
        var car = new Object();
        car.name = 'Sonata';
        car.speed = 100;
        car.color = 'blue';
        car.speedup = function() {
            return this.speed+10;
        };
        var cname = document.getElementById("carname");
        cname.textContent = '자동차 이름 : ' + car.name;
        var colname = document.getElementById("carcolor");
        colname.textContent = '자동차 색상 : ' + car.color;
        var cspeed = document.getElementById("carspeed");
        cspeed.textContent = '자동차 속도 : ' + car.speedup();
    </script>
</body>

생성자 함수 정의 후 객체 만들기

** 생성자는 {}에 ;가 안붙는다.

<body>
    <p>[Hong's car]</p>
    <p id="carname"></p>
    <p id="carcolor"></p>
    <p id="carspeed"></p>
    <p>[Lee's car]</p>
    <p id="carname2"></p>
    <p id="carcolor2"></p>
    <p id="carspeed2"></p>
    <script>
        function Car(name, color, speed) {
            this.name = name;
            this.color = color;
            this.speed = speed;
            this.speedup = function() {
                return this.speed+10;
            };
            this.speeddown = function() {
                return this.speed-10;
            };
        }
        var HongCar = new Car('Sonata', 'blue', 100);
        var LeeCar = new Car('Volvo', 'white', 70);
        
        var cname = document.getElementById("carname");
        cname.textContent = '자동차 이름 : ' + HongCar.name;
        var colname = document.getElementById("carcolor");
        colname.textContent = '자동차 색상 : ' + HongCar.color;
        var cspeed = document.getElementById("carspeed");
        cspeed.textContent = '자동차 속도 : ' + HongCar.speeddown();
        
        var cname = document.getElementById("carname2");
        cname.textContent = '자동차 이름 : ' + LeeCar.name;
        var colname = document.getElementById("carcolor2");
        colname.textContent = '자동차 색상 : ' + LeeCar.color;
        var cspeed = document.getElementById("carspeed2");
        cspeed.textContent = '자동차 속도 : ' + LeeCar.speedup();
    </script>
</body>

이미 생성된 객체에 속성 추가 및 삭제하기

<body>
    <p>[Kim's Car]</p>
    <p id="kim1"></p>
    <p id="kim2"></p>
    <p id="kim3"></p>
    <p>[Lee's Car]</p>
    <p id="Lee1"></p>
    <p id="Lee2"></p>
    <p id="Lee3"></p>
    <p id="Lee4"></p>
    <script>
        function Car(name, color, speed) {
            this.name = name;
            this.color = color;
            this.speed = speed;
            this.speedup = function() {
                return this.speed+10;
            };
            this.speeddown = function() {
                return this.speed-10;
            };
        }
        
        var KimCar= new Car('Sonata', 'blue', 100);
        var LeeCar= new Car('Volvo', 'white', 100);
        LeeCar.price = '3천만 원';
        delete LeeCar.color;
        
        var cname = document.getElementById("kim1");
        cname.textContent = '자동차 이름 : ' + KimCar.name;
        var colname = document.getElementById("kim2");
        colname.textContent = '자동차 색상 : ' + KimCar.color;
        var cspeed = document.getElementById("kim3");
        cspeed.textContent = '자동차 속도 : ' + KimCar.speeddown();
        
        var cname = document.getElementById("Lee1");
        cname.textContent = '자동차 이름 : ' + LeeCar.name;
        var colname = document.getElementById("Lee2");
        colname.textContent = '자동차 색상 : ' + LeeCar.color;
        var cspeed = document.getElementById("Lee3");
        cspeed.textContent = '자동차 속도 : ' + LeeCar.speedup();
        var cspeed = document.getElementById("Lee4");
        cspeed.textContent = '자동차 가격 : ' + LeeCar.price;
    </script>
</body>

배열 객체

배열 내 객체 구조 선언

자바 스크립트 ::: 객체's 배열 [obj1, obj2, obj] = obj1 {a:a1}, obj2(b:b1), obj3{c:c1}

자바 ::: A arr [] = new A[3]();

arr[0] = new A();

arr[1] = new A();

arr[2] = new A();

<body>
    <p>[Car1]</p>
    <p id="data10"></p>
    <p id="data20"></p>
    <p id="data30"></p>
    <p>[Car2]</p>
    <p id="data11"></p>
    <p id="data21"></p>
    <p id="data31"></p>
    <p>[Car3]</p>
    <p id="data12"></p>
    <p id="data22"></p>
    <p id="data32"></p>
    <script>
        var car=[
            {name: 'Sonata', color:'blue', speed:100},
            {name: 'Jeep', color:'red', speed:70},
            {name: 'Volvo', color:'white', speed:150}
        ]
        for(var i=0; i<3; i++) {
            var cname = document.getElementById("data1"+i);
            cname.textContent='자동차 이름 : ' + car[i].name;
            var colname= document.getElementById("data2"+i);
            colname.textContent='자동차 색상 : ' + car[i].color;
            var cspeed= document.getElementById("data3"+i);
            cspeed.textContent='자동차 속도 : ' + car[i].speed;
        } //  "data1" + i 의 값으로 i의 값이 0이면 "data10"이 되는 원리로 작동한다.
    </script>
</body>

Array 생성자로 배열 객체 구조 선언

배열 객체 구조 // 잘 안씀; // 그냥 나열해놓은거 뿐 중괄호 {} 를 선호한다. 예제 11_9처럼

<body>
    <p id="car"></p>
    <p>[Car1 속성]</p>
    <p id="car0"></p>
    <p>[Car2 속성]</p>
    <p id="car1"></p>
    <p>[Car3 속성]</p>
    <p id="car2"></p>
    <script>
        var car = new Array (
            ['Sonata', 'blue', 100],
            ['Volvo', 'white', 80],
            ['Jeep', 'black', 70]
        );
        var cname = document.getElementById("car");
        cname.textContent = "Car[2][1] : " + car[2][1];
        for(var i=0; i<3; i++) {
            var cname = document.getElementById("car"+i);
            cname.textContent = car[i];
        }
    </script>
</body>

Date 객체

중요도↓

Date 객체 활용

<body>
    <p id="d1"></p>
    <p id="d2"></p>
    <p id="d3"></p>
    <p id="d4"></p>
    <script>
        // 기본 생성자
        document.getElementById("d1").innerHTML = new Date();
        // 1970.01.01 이후의 밀리초 계산
        document.getElementById("d2").innerHTML = new Date(1491803527400);
        // 문자열 날짜
        document.getElementById("d3").innerHTML = new Date("October 15, 2018 06:18:07");
        // 주의사항 : 월(month)은  0부터 시작
        // 날짜 지정
        document.getElementById("d4").innerHTML = new Date(2018, 11, 25, 18, 30, 29);
    </script>
</body>

Date 객체의 메소드 활용하기 1

getMonth()에 +1 의 이유 는 4개월이 끝나고 13일이 지나서 +1을 한다......// Month는 0부터 시작...!!

<body>
    <p id="d1"></p>
    <p id="d2"></p>
    <p id="d3"></p>
    <p id="d4"></p>
    <script>
        var today = new Date();
        document.getElementById("d1").innerHTML = today.getFullYear() + "년";
        document.getElementById("d2").innerHTML = today.getMonth()+1 + "월" + today.getDate()+ "일";
        document.getElementById("d3").innerHTML = today.getHours() + "시" + today.getMinutes() + "분" ;
        document.getElementById("d4").innerHTML = "1970년 1월 1일 이후 현재까지 몇 초가 지났음?</p>" +
        today.getTime() + "ms 가 지났음ㅇㅇ..."
    </script>
</body>

Date 객체의 메소드 활용하기 2

<body>
    <p id="d1"></p>
    <p id="d2"></p>
    <p id="d3"></p>
    <p id="d4"></p>
    <p id="d5"></p>
    <p id="d6"></p>
    <p id="d7"></p>
    <p id="d8"></p>
    <p id="d9"></p>
    <script>
        var today = new Date();
        document.getElementById("d1").innerHTML = today.toDateString();
        document.getElementById("d2").innerHTML = today.toISOString();
        document.getElementById("d3").innerHTML = today.toJSON();
        document.getElementById("d4").innerHTML = today.toLocaleDateString();
        document.getElementById("d5").innerHTML = today.toLocaleTimeString();
        document.getElementById("d6").innerHTML = today.toLocaleString();
        document.getElementById("d7").innerHTML = today.toString();
        document.getElementById("d8").innerHTML = today.toTimeString();
        document.getElementById("d9").innerHTML = today.toUTCString();
    </script>
</body>

디지털 시계 만들기

setTimeout(a, b); a= 함수, b=지연시간? :: 1000밀리세컨드, 1초마다 표시.

<body>
    <div id="digClock"></div>
    <script>
        function digClock() {
            var today = new Date();
            var day = today.getMonth()+1 + "월" + today.getDate() + "일";
            var time = today.getHours() + "시" + today.getMinutes() + "분" + today.getSeconds() + "초";
            document.getElementById("digClock").innerHTML = day+time;
            setTimeout('digclock()', 1000);
        }
        digClock();
    </script>
</body>

l 문서 객체 모델(DOM)

- 웹 문서를 메모리로 읽어 들여 트리 구조로 변환

- 문서의 각종 요소는 요소 노드로, 텍스트는 텍스트 노드로 변환

- 변환된 트리 구조를 이용하면 자바스크립트로 웹 문서를 조작할 수 있음

- 상속 구조 . 포함구조는 아니다!

문서 객체 생성

<head>
    <script>
        function add() {
            var header = document.createElement('h3');
            var textNode = document.createTextNode('내 이름은 홍길동 입니다.');
            header.appendChild(textNode);
            document.body.appendChild(header);
        };
    </script>
</head>
<body>
    <a href="#" onclick="add()">당신의 이름은 무엇입니까??</a>
</body>

l 문서 객체의 속성값을 설정하는 방법

- 객체 변수 사용: 객체변수.속성=‘값’;

객체 변수를 사용해 속성값 설정

<head>
    <script>
        function add() {
            var img = document.createElement('img');
            img.src = 'w3c.jpg';
            img.width = 100;
            img.height = 152;
            document.body.appendChild(img);
        };
    </script>
</head>
<body>
    <a href="#" onclick="add()">[이미지 추가]</a>
</body>

setAttribute() 메소드를 사용해 속성값 설정

- 속성 메소드 사용: setAttrbute(속성, 값);

<head>
    <script>
        function add() {
            var img = document.createElement('img');
            img.setAttribute('src', 'w3c.jpg');
            img.setAttribute('width', 100);
            img.setAttribute('height', 150);
            document.body.appendChild(img);
        };
    </script>
</head>
<body>
    <a href="#" onclick="add()">[이미지 추가 22]</a>
</body>

문서 객체 스타일 변경

<head>
    <script>
        function textstyle() {
            document.getElementById("msg").style.color = "blue";
            document.getElementById("msg").style.fontSize = "30px";
            document.getElementById("msg").style.fontStyle = "italic";
        };
        function texthidden() {
            document.getElementById("msg").style.visibility = "hidden";
        };
        function textvisible() {
            document.getElementById("msg").style.visibility = "visible";
        };
       
    </script>
</head>
<body>
    <p id="msg">문서 객체 스타일 변경하기</p>
    <input type="button" onclick="textstyle()" value="텍스트 스타일 변경">
    <input type="button" onclick="texthidden()" value="텍스트 숨기기">
    <input type="button" onclick="textvisible()" value="텍스트 보이기">
</body>

728x90

저작자표시 (새창열림)

'Language > Java Script' 카테고리의 다른 글

함수 호출 방식 (0)	2022.01.03
JavaScript - JSON (0)	2021.12.14
시계만들기 (0)	2021.05.14
Java Script 배열 2 (0)	2021.05.12
Java Script 함수와 배열 (0)	2021.05.11
Java Script 기본2 (0)	2021.05.11

현재글Java Script 객체

처음부터 시작하는 Java

hello world!

springboot, SPREAD, vue, useReducer, 알고리즘, useState, intellij, Git, Kotlin, Docker, sql, react, java, array, GIS, js, 프로그래머스, datatables, jpa, OpenLayers,

Today :
Yesterday :

처음부터 시작하는 Java