각진 세상에 둥근 춤을 추자

[JavaScript] 객체 본문

JavaScript

[JavaScript] 객체

circle.j 2022. 10. 8. 15:34

 

 

자바스크립트는 객체 기반 프로그래밍 언어이다.

자바스크립트의 객체에는 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)등이 있다.

 

내장 객체(Built-in Object)는 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해 사용할 수 있다. 

내장 객체는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다. 

 

 

내장 객체를 생성하는 기본형은 다음과 같다.

참조 변수(인스턴스 이름) = new 생성함수()

 

 

간단한 예제를 통해 내장 객체 생성에 대해 알아본다.

 

[예제]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>내장 객체 생성하기</title>
</head>
<body>
    <script>

        let tv = new Object();
        tv.color = "white";
        tv.price = "3000000";
        tv.info = function() {
            document.write("tv 색상: " + this.color + "<br/>");
            document.write("tv 가격: " + this.price + "<br/>");
        }

        document.write("<h1>tv 겍체 메서드 호출</h1>");
        tv.info();

    </script>
</body>
</html>

 

 

 

    날짜 정보 객체    

 

날짜, 시간 관련 정보를 제공받고자 할 때는 날짜 객체(Date Object)를 생성한다. 

날짜 정보 객체를 이용하여 달력과 D-day 계산기도 만들 수 있다. 

 

참조 변수 = new Date();
참조변수 = new Date("연/월/일");
참조변수 = new Date("연, 월-1, 일);

 

날짜 관련 메서드는 다음과 같다. 

 

 

 

[예제1] 오늘 날짜 정보와  2002년 월드컵 날짜 관련 정보 출력하기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date Object</title>
</head>
<body>
    <script>
       
        let week = ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'];

        let wolrdCup = new Date("2002/05/31");
        let theMonth = wolrdCup.getMonth(),
            theDate = wolrdCup.getDate();
        
        let i = wolrdCup.getDay();
        const theDay = week[i]; 

        document.write("<h1>월드컵 날짜 정보</h1>");
        document.write("Month: " + theMonth + "<br/>");
        document.write("Date: " + theDate + "<br/>");
        document.write("Day: " + theDay + "<br/>");

        document.write("<h1>2022 월드컵</h1>" );
        document.write("2022년 " + theMonth + "월 " + theDate + "일 " + theDay);

    </script>
</body>
</html>

 

 

 

[예제2] 현재 날짜부터 특정 날짜까지 며칠 남았는지 계산하기

 

남은 날짜(일, 밀리초 단위) = 특정 날짜 객체 - 현재 날짜 객체 

 

1초 = 1,000(millisecends, msc)

1분 = 1000 * 60 (msc)

1시간 = 1000 * 60 * 60

1일 = 1000 * 60 * 60 * 24

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>현재 날짜부터 특정 날짜까지 며칠 남았는지</title>
</head>
<body>
    <script>
        let today = new Date();

        let exam = new Date(2022,10,17);

        // 남은 날 = 특정 날짜 - 현재 날짜 (밀리초 단위))
        let restDate = exam.getTime() - today.getTime();

        let result = Math.ceil(restDate / (60*1000*60*24));
        document.write("<h1> 2023 대학수학능력시험까지 " + result + "일 남았습니다 </h1>");
        
    </script>
</body>
</html>

 

 

[예제3] 실시간 시각 (자동 새로고침)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>실시간 시간</title>
</head>
<script>
        setInterval("timer()", 1000);

        function timer() {
            let now = new Date();
            hours = now.getHours();
            minutes = now.getMinutes();
            seconds = now.getSeconds();

            let result = ("<h1> 현재 시각 <n/> " + hours + ":" + minutes + ":" + seconds + "</h1>");

            document.getElementById("timer").innerHTML = result;
        }
    </script>
    <span id="timer">오후 01:44:40</span>
<body>
</body>
</html>

 

 

 

 

'JavaScript' 카테고리의 다른 글

[JS] 배열 객체  (0) 2022.10.09
[JavaScript] 수학 객체  (0) 2022.10.09
[JavaScript] 반복문  (0) 2022.10.08
[JavaScript] 선택문  (0) 2022.10.08
[JavaScript] 조건문  (0) 2022.10.07
'JavaScript' Related Articles more