자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #9 interval, timeout, 시행착오, 초시계 만들기, padStart

const clock = document.querySelector("h2#clock");
const clock = document.querySelector("#clock");
const clock = document.getElementById("clock");
모두 같다.

 

---

 

시계 만들기

 

default 값으로 00시00분 만들기

 

 

---

<interval> = 매번 일어나야 하는 무언가. ex) 매 주, 매 2초 등등

 

 

function sayhello() {
console.log("hello");
}

setInterval(sayhello, 5000);

 

=> sayhello 라는 function에 실현시키고자 하는 함수를 쓴다. 

나는 이 함수를 매 2초마다 실행하고 싶어.

 

setInterval() => 두 개의 argument를 받는다. 

1. 내가 실행하고자 하는 function.

2. 호출되는 호출되는 function 간격을 몇 ms (milliseconds)로 할지

5000ms = 5초

 

 

---

비교를 해보자!! <setTimeout>

function sayhello() {
console.log("hello");
}

setTimeout(sayhello, 1000);

=>>> JS가 sayhello()  보자마자 실행한다. 

 

timeout =>function을 딱 한 번 호출하는건데, 일정 시간이 흐른 뒤에 호출하는 것!!!

 

setTimeout (호출하려는 function, 얼마나 기다릴지 ms단위)

 

 

---

JS 가 가지고 있는 date object

 

 

console 창에 new Date() => 오늘 날짜 나온다. 

.

.

.

<알기> date.getDay()는 일요일0, 월요일1, 화2, 수3, 목4, 금5, 토6 

<주의>맨 처음에 const date = new Date();

안쓰면 안나온다. 

 

 

 

이렇게 써도 된다!!

 

---

Date를 더 자세히 보고 싶다면 👇👇👇

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

 

<시행착오>

 

여기서 안되는 이유는???

 

console.log(`${clock.getHours} : ${clock.getMinutes} : ${clock.getSeconds}`);

 

실행하라고 ()를 붙여줘야한다.

 

 

 

---

디테일의 차이를 느껴보자!!

 

 

여기서 getclock();을 호출한 이유는 이게 없으면 1초 뒤에야 시간이 보인다. 

우리는 website가 로드 되자마자 시간을 볼 수 있게 하고 싶어서 쓴거다!!

 

 

 

---

console 창에 나오는 시간을 사이트에 보이게 해보자!!

 

 

 

 

 

선언해준 const clock = document.querySelector("h2#clock"); 에서 innerText 값을

`${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds()}`;로 바꿔주는거로 식을 썼다. 

 

(참고로 HTML값을 받는 const clock에서의 clock과 function에서 new Date() 값을 받는 clock이 이름이 곁쳐서 date로 바꿈.)

 

 

---

string을 문자 2개로 채워보자

19:11:4 말고 19:11:04로 나오게 하고 싶다. 

 

 

"1".padStart(2, "0")

 

padStart()는 string에 쓸 수 있는 function이다. 

뜻: 길이가 1인 문자(string)에 string 앞을 늘리라고 S에게 부탁하는거다. 
이 string의 길이는 2가 되어야한다. 길이가 2가 되지 않는다면 string 앞에 "0"을 추가해야한다. 

 

ex)

 

 

 

그럼 이렇게 하면 될까? 👇👇👇👇👇

 

 

놉! 에러뜸!!

 

 

문제는! 

 

date.getHours, getMinutes, getSeconds 로 나온 값은 모두 Number 라는 점!

 

 

---

number 를 string 으로 바꿔주자!

 

 

<시행착오>

1. () 붙이기

3. string이 아니라 String 이다.