노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.
index.html
- 같은 클래스를 가지고 CSS와 js에서 모두 쓰고 싶다면, "js-clock"과 같은 방식으로 선언하는 것도 좋다.
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1></h1>
</div>
<script src="clock.js"></script>
</body>
</html>clock.js
- innerText 메소드 : 객체 안에 텍스트를 넣을 때 사용.
- getHours, getMinutes, getSeconds
- setInterval : 특정 함수를 일정 시간 간격으로 실행(시간 단위 : 밀리세컨드).
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime(){
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000);
}
init();미니 조건문 넣기
- 위 코드의 문제점은, 시간, 분, 초가 한자리수가 되면, 01이 아닌 1만 나온다는 것이다.
- 이를 해결하기 위해 자바스크립트의 미니 조건문을을 썼다.
- 미니 조건문 사용법
condition ? block(true) : block(false)
clockTitle.innerText = `${hour < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
모빌리티 스타트업에서 데이터를 다루고 있습니다.