프로젝트를 하기 전 우선 아래의 내용을 다시 한번 복습하고 시작했다.
객체
- 객체란? 값 또는 기능을 가지고 있는 데이터 ⇒ 소프트웨어적 사물
생성자
- 객체를 생성할 때 사용하는 함수를 생성자 함수라고 한다 ⇒ 객체를 직접 만들 수 있다.
this 키워드
- 객체. 그 자신을 의미하며 해당 객체에 속성이나 메소드를 추가할 수 있다
- 생성자 함수명의 첫글자는 대문자로 한다
function Dog(){ // dog라는 객체를 만들고
this.name = 'coco' // name, breed 라는 속성이 포함된다
this.breed = 'shiba'
}new
- 생성자 함수는 객체를 이렇게 만들겠다는 정의일 뿐 실체 객체가 생성되려면 new 연산을 통해 객체를 반환해야한다.
function Dog(){ // dog라는 객체를 만들고
this.name = 'coco' // name, breed 라는 속성이 포함된다
this.breed = 'shiba'
}
// Dog라는 객체를 생성하고 newDog 라는 이름을 붙힌다
const myDog = new Dog();
console.log(myDog.name) // coco
console.log(myDog.breed) // shiba- 생성자 함수에 매개변수를 정할 수 있다
- 생성자 함수 하나로 객체를 여러개 만들 수 있다.
function Dog(eachName, eachBreed){
this name = eachName
this breed = eachBreed}
const one new Dog('nana', 'maltese')
const two new DOg('choco', 'poodle')Date 생성자
-
기본 생성자란?
- 내장 생성자, 빌트인 객체(buit-in object)
-
Date 내장생성자
- 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장생성자
- Date 객체 끼리는 서로 뺄셈도 가능하다 → 각 시간대의 간격이 밀리 초 단위로 반환 → 객체 생성시에는 new 연산을 해야한다.
Date 객체 메소드
- 날짜와 시간을 다룰 수 있는 메소드들을 포함하고 있다.
주요 특이 메소드
| getMoth | 월을 의미하는 숫자를 반환한다 | 0부터 시작하며 1월이면 0을 반환 |
|---|---|---|
| getDay | 요일을 뜻하는 숫자를 반환한다 | 0부터 시작하며 일요일이면 0을 반환 |
| toLocalstring | 지역 날짜 및 시간 문자열 반환 | '2023/04/29 15:13:45’ 이런 식으로 |
setTimeout
- 정해진 시간이 지나고 나면 주어진 함수를 실행해주는 타이머 메소드
setTimeout(function(){
console.log('good')},1000) // 1초마다 콘솔로그에 good이 찍힌다setInterval
- 일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 하는 메소드 → 0이 아닌 숫자를 반환하는데 이 숫자는 타이머의 ID이다.
clearInterval
- setInterval 메소드가 호출되어 반복 실행할 함수의 타이머를 등록하면 타이머는 0이 아닌 숫자를 반환 → 숫자는 타이머의 ID를 의미하고 이를 clearInterval 메소드에 전달하면 해당 타이머 반복 실행이 취소된다.
디지털 시계 만들기
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Clock 미니 프로젝트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div id="today" class="today"></div> // 오늘 날짜 표시
<div id="time" class="time"></div> // 현재 시간
</div>
<script src="script.js"></script>
</body>
</html>- Javascript
// 요소 선택
const todayDiv = document.getElementById('today');
const timeDiv = document.getElementById('time');
// getTime 함수
function getTime(){
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1; //getMonth는 0부터 시작하기 때문
let date = now.getDate();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
month = month < 10 ? `0${month}` : month;
date = date < 10 ? `0${date}` : date;
hour = hour < 10 ? `0${hour}` : hour;
minute = minute < 10 ? `0${minute}` : minute;
second = second < 10 ? `0${second}` : second;
// 위의 각 변수에는 시간 데이터가 숫자로 대입되어 있으나 두 자리 또는 한 자리수로 있어
// 자릿수를 맞추기 위해 삼항연산식을 사용해 10보다 작은 경우 숫자의 앞에 0을 붙여 두 자릿수를 맞춘다.
todayDiv.textContent = `${year}년 ${month}월 ${date}일`
timeDiv.textContent = `${hour}:${minute}:${second}`
}
// setInterval 메소드
getTime()
setInterval(getTime, 1000);