2025. 11. 29. 13:13ㆍ웹 프로그래밍/JS HTML CSS
자바스크립트에서의 객체 지향 프로그래밍
우리가 사는 실제 세계는 모두 객체(Object)들로 구성되어 있다. 객체 지향 프로그래밍(OOP: Object-Oriented Programming)도 그렇다.
객체 지향 프로그래밍에서 객체는 데이터와 동작을 가지고 있다. 객체의 데이터는 객체가 가지고 있는 특성 값을 말한다. 객체의 동작은 객체가 수행할 수 있는 행동을 말한다.
다른 관점에서 보자면 객체는 속성과 메소드로 이루어져 있다. 속성은 객체 내의 변수를 뜻하고, 메소드는 객체 내의 함수를 뜻한다.
자바스크립트에서 사용되는 객체는 크게 두 가지로 나눌 수 있다. 내장 객체(Built-in Object)와 사용자 정의 객체(Custom Object)이다. 내장 객체는 자바스크립트에 내장된 객체로서, Data, String, Array와 같은 객체들을 말한다. 사용자 정의 객체는 개발자가 정의하여 사용하는 객체를 말한다.
내장 객체는 다시 핵심개체와 DOM 객체, BOM 객체로 나눌 수 있다. 핵심 객체는 기본적인 객체들을 말하며 Date, String, Array 등이 핵심 객체이다. DOM(Document Object Model) 객체는 브라우저가 HTML 문서를 파싱해서 각 요소들을 객체 트리로 정의한 것이다. BOM(Browser Object Model) 객체는 브라우저 종류나 크기 등의 정보를 제공하는 객체들이다.
객체를 생성하기 위해서는 new 키워드를 사용한다.
let today = new Date();
let fruits = new Array("Apple", "Banna", "Cherry");
이렇게 생성된 객체에서 객체 멤버들을 사용하기 위해서는 dot(점) 연산자를 사용한다. 어떤 객체에 속해 있는지를 정의 한 후 점을 찍고 멤버 이름을 말하는 형식이다.
{객체이름}.{멤버이름}
today.getDate();Date 객체
Date 객체는 날짜와 시간을 저장하고 있는 객체다. 웹프로그래밍에서는 날짜를 사용하는 경우가 많아 Date 객체는 상당히 많이 활용된다.
new Date() //현재 날짜와 시간
new Date(milliseconds) //1970.01.01 이후의 밀리초
new Date(dataString) //다양한 문자열
new Date(year, month, date[, hours[, minutes[, second[,ms]]]]) //상세한 날짜 지정let current = new Date(); //현재 날짜와 시간
let theDay = new Date(2025, 11, 25); //크리스마스 날짜 집어넣기(자바스크립트에서 월은 0부터 시작
let theDayDetail = new Date(2025, 11, 25, 18, 30, 0, 0); //시간도 넣을 수 있다
let theDayString = new Date("December 25, 2025 18:30:00"); //문자열로 날짜 집어넣기
활용해보자!
<html>
<head>
<title>Date 객체 활용하기</title>
</head>
<body>
<script>
let theDay = new Date(2025, 11, 25); //크리스마스 날짜 집어넣기(자바스크립트에서 월은 0부터 시작
let theDayString = new Date("December 25, 2025 18:30:00"); //문자열로 날짜 집어넣기
document.write(theDay + "<br>");
document.write(theDayString + "<br>");
</script>
</body>
</html>
Date 객체에서 다양한 메소드를 사용하면 더욱 상세한 시간을 표시할 수 있다.
| getDate(): 날짜(1~31) 반환 | setDate(): 날짜 지정 |
| getDay(): 요일(0~6) 반환 | setDay(): 요일 지정 |
| getFullYear(): 4개의 숫자로 된 연도 반환 | setFullYear: 연도 지정 |
| getHours(): 시(0~23) 반환 | setHours(): 시 지정 |
| getMilliseconds(): 밀리초(0~999) 반환 | setMilliseconds(): 밀리초 지정 |
| getMinutes(): 분(0~59) 반환 | setMinutes(): 분 지정 |
| getMonth(): 월(0~11) 반환 | setMonth(): 월 지정 |
| getSeconds(): 초(0~59) 반환 | setSeconds(): 초 지정 |
활용해보자!
<html>
<head>
<title>Date 객체 메소드</title>
</head>
<body>
<script>
let today = new Date(2025, 11, 25, 18, 30, 0, 0);
document.write(today + "<br>");
document.write(today.getFullYear() + "<br>");
document.write(today.getMonth() + "<br>");
document.write(today.getDate() + "<br>");
document.write(today.getDay() + "<br>");
document.write(today.getHours() + "<br>");
document.write(today.getMinutes() + "<br>");
document.write(today.getSeconds() + "<br>");
document.write(today.getMilliseconds() + "<br>");
</script>
</body>
</html>
Date 객체를 활용하여 두 개의 날짜를 비교해 보겠다. 자바스크립트는 유닉스 시간을 활용한다. 유닉스 시간은 1970년 1월 1일을 기준으로 얼마나 많은 밀리초가 흘렀는지를 기준으로 한다. 이는 getTime() 메소드를 활용하면 된다.
2025년 2월 1일부터 2025년 12월 25일까지의 총 일수를 계산해보자!
<html>
<head>
<title>두 개의 날짜 비교하기</title>
</head>
<body>
<p id="result">날짜를 비교 중...</p>
<script>
let date1 = new Date(2025, 1, 1);
let date2 = new Date(2025, 11, 25);
let diffMill = date2.getTime() - date1.getTime();
let diffDays = diffMill / (1000 * 3600 * 24);
document.getElementById("result").innerHTML = diffDays;
</script>
</body>
</html>
이번엔 시계를 만들어 보겠다. setTimeout()를 활용하여 1초마다 setClock()를 재실행 하도록 구현했다.
<html>
<head>
<title>시계 만들기</title>
</head>
<body>
<p id="clock"></p>
<script>
function setClock() {
let currentTime = new Date();
let hr = currentTime.getHours();
let min = currentTime.getMinutes();
let sec = currentTime.getSeconds();
document.getElementById('clock').innerHTML
= `${hr}:${min}:${sec}`;
setTimeout(setClock, 1000)
}
setClock();
</script>
</body>
</html>
이번엔 같은 원리를 활용하여 카운트다운 타이머를 만들어 보자!
<html>
<head>
<title>카운트다운 타이머 만들기</title>
</head>
<body>
<p id="timer"></p>
<script>
function setTimer() {
let goal = new Date(2025, 11, 25);
let now = new Date();
let diff = goal - now;
let milliseconds = Math.floor(diff % 1000);
diff = diff / 1000;
let seconds = Math.floor(diff % 60);
diff = diff / 60;
let minutes = Math.floor(diff % 60);
diff = diff / 60;
let hours = Math.floor(diff % 24);
diff = diff / 24;
let days = Math.floor(diff);
let outStr = `올해 크리스마스까지 ${days}일 ${minutes}분 ${seconds}초 남았습니다.`;
document.getElementById('timer').innerHTML = outStr;
setTimeout("setTimer()", 1000);
}
setTimer();
</script>
</body>
</html>
'웹 프로그래밍 > JS HTML CSS' 카테고리의 다른 글
| 문서 객체 모델(DOM: Document Object Model) (0) | 2025.12.05 |
|---|---|
| 사용자 객체 (0) | 2025.12.02 |
| for-in 루프 (0) | 2025.12.02 |
| 배열 (0) | 2025.12.02 |
| String 객체와 Math 객체 (0) | 2025.12.02 |