[JS] 웹 사이트에 시계 넣어보기 /cannot set properties of null 해결방법

cannot set properties of null 해결방법부터 설명하자면 querySelector해서 클래스나 id선택자를 받아올때

예를 들어

 

<h2 id="clock"></h2>이런식이라면

document.querySelector("h2#clock") 으로 해줘야 한다. 즉 상위 태그와 선택자 사이에 공백이 없어야 한다!

Interval

'매번' 일어나야 하는 무언가를 말한다.

'매 2초마다 일어남 ' -> Interval

 

JS에는 당연히 내장된 API가 있는데 바로 setInterval()이다.

 

setInterval(호출시킬 함수, 밀리세컨드)

 

*)5000ms -> 5초

 

여기서도 중요한건 js가 n초 후  함수를 누르게 해야하므로 호출시킬 함수에 괄호는 써주면 안된다!

 

Time Outs

 

얘는 딜레이 시켜줄 때 사용하는데 setTimeout() 함수를 이용한다.

setTimeout(함수,딜레이 시켜줄 시간)

 

 

이렇게 Interval과 Timeout기능을 통해 시계를 만들어볼거다.

자바스크립트에서는

const date= new Date();를 통해 시간을 가져올 수 있다. 

date.getDate() date.getHours() 이런식으로 

 

setInterval에 밀리세컨드 1000으로 두면서 1초에 한번씩 getClock()이 출력되게 한다. 

하지만 이러면 문제점이 1초 쉬고 그다음부터 출력해준다.

그래서 웹사이트가 load되자마자 getClock()을 실행하고 매초마다 다시 실행되도록 할거다.

 

이제 이걸 웹사이트에서 뜨게 하고 싶으면 clock.innerText를 해주면 된다.

에러발생!

아주 어처구니 없는 실수를 했는데 querySelector에서 

h2#clock 같이 공백 없이 써줘야 하는데 h2 #clock으로 공백을 써줘서 틀렸다.

 

흠 시간이 잘 나오는군 

근데 10초 미만에서는 01,02 이런식으로 출력하고 싶다. 이때 사용되는게 pad start이다.

 

pad start

 

만약에 "11"초이면 문자열 길이가 2니까 상관없지만

"1" "2"이면 문자열 길이가 1이니까 "01" "02" <-- 이런식으로 출력하려고 한다. 

그리고 앞서 말했듯이 그런식으로 문자열을 조절해주는게 pad start이다!

MDN 문서에 따르면 이렇답니다..

"문자".padStart(원하는 문자의 길이,만일 앞에 문자가 원하는 문자 길이 만큼 채워지지 않으면 대신 채워줄 문자);

예를 들어 "1"초를 "01"로 만들고 싶으면 우선 문자의 길이는 2가 되어야 할거고, 남은 앞쪽부분은 "0"으로 채워줘야

할거다. 이럴 때 "1".padStart(2,"0"); <--이런식으로 쓴다. 

반대로 뒤에 문자를 채워야 할 때는 padEnd를 쓴다. 

 

근데 date.getHours 하면 이게 int형이다. 그래서 이걸 String으로 바꿔줘야 padStart를 사용가능하다.

.String()이 아니라 String()으로 감싸서 형변환 하면 되는 것 같다. 

.String() 로 하려면