Intervals
- Interval : 매번 일어나야 하는 무언가
시계 만들기에 앞서 폴더 분리
- js파일과 css파일의 폴더 생성
- 기존 app.js → greeting.js 로 파일명 변경
- index.html 수정파일 하나에 모두 작성해도 되지만 너무 빡빡해 보일 수 있으니 분리
- <head> ... <link rel="stylesheet" href="css/style.css" /> </head> <body> ... <script src="js/greeting.js"></script> <script src="js/clock.js"></script> </body>
- h2 태그 생성 후 h2를 받아와서 내부에 텍스트 입력
index.html
<h2 id="clock">00:00</h2>
clock.js
const clock = document.querySelector("h2#clock");
function sayHello() {
console.log("Hello");
}
// sayHello 함수를 5000ms(5초) 마다 실행
setInterval(sayHello, 5000);
Timeouts and Dates
학습내용 : function을 한 번만 호출, 일정 시간이 흐른 뒤에 호출
- setTimeout(<실행할 함수>, <기다릴 시간:ms>)
// sayHello 함수를 5000ms 후에 실행
setTimeout(sayHello, 5000);
시계를 만들기 위해 매 초마다 다음의 함수들을 적절히 호출하면 됨
- ln 1: const date = new Date()
- 자바스크립트에선 new Date()를 사용하면 현재 시간을 알 수 있고, 시간을 조절할 수 도 있다.
- Date 객체를 생성하기 위해 new 연산자 사용
- Date 객체를 생성할 때 소괄호 안에 아무 값도 전달해주지 않으면 현재 시간으로 객체 생성
- Date 객체를 생성할 때 숫자 값을 전달할 경우, 1970년 1월 1일 00:00:00 (UTC)를 기준으로 전달된 수치만큼의 밀리초가 흐른 객체가 생성
- new Date() 말고 Date()는 해당 값을 문자열로 반환
- ln 3: day.getDay()
- 요일을 반환
- 일요일(0) ~ 토요일(6)
clock.js
function getClock() {
const date = new Date();
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
setInterval(getClock, 1000);
시간을 호출하는 함수를 만들 후에 1초마다 실행함
문제 1: 한자리 수 인 경우 → 2자리로 통일필요(text formatting)
문제 2: 새로고침을 한 후 바로 실행되지 않고 1초를 기다려야 함
getClock(); // 웹사이트가 로드되자마자 getClock을 실행하고 매 초마다 실행
setInterval(getClock, 1000);
새로고침을 하면 1초를 기다리지 않고 현재 시간이 보이도록 수정
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
콘솔창 출력이 아닌 웹페이지에서 시간이 보이도록 수정
Padstart
학습내용 : string을 문자 두 개로 채우기
- 한 자리 숫자를 앞에 0을 포함하는 두 자리로 변경
- padStart(<문자열의 길이>, <문자열의 길이를 만족하지 않은 경우 앞에 추가 할 문자>)
- padEnd() : 뒤에 문자 추가
padStart를 사용하여 한 자리수 인 경우 앞에 0을 추가해주어 두 자리수로 만들어 줌
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
padStart함수는 문자열에서 동작
따라서 시간 정보(시, 분, 초)를 가져온 후 String으로 감싸 문자열로 변경
padStart 함수를 사용하여 앞쪽에 “0”을 추가하여 두 자리로 변경
'Javascript > vanilla js' 카테고리의 다른 글
| [JavaScript] Quotes and Backgrounds (2) | 2024.11.12 |
|---|---|
| [JavaScript] Form submission (0) | 2024.11.11 |
