이전에 만든 greeting 관련 파일을 분리한다.
이런 식으로 세분화 해서 관리하기(divide and conqure)
html에다가 시계를 생성 --
이제 clock.js를 완성해보자
html의 시계를 불러오기. -- const clock = document.querySelector("h2#clock");
date를 사용해서 날짜정보를 알 수 있다.
이제 위의 사항을 써서 본격적인 개발에 나가자. 그에 앞서서.
백틱을 사용한 템플릿 리터럴 -- https://velog.io/@sunaaank/js-backtick에대해 알아보고 가자.
function getClock(){
const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}
setInterval(getClock, 1000);
시간: 분: 초로 시간을 표현하며 그 표시 간격이 1초인 시계. 그 결과는
이렇게 표기 된다.
이제 시계에 표기 해보자.
clock.innerText = (${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
)
수가 표시될때 1,2,3,4 이렇게 가 아니라 01,02,03 이런식으로 표시하게 하고 싶다. 그치만 21 앞에다가 0을 추가하는 식이면 일괄적으로 0이 추가되므로 그건 안되는데...
이때 사용하는 것이 Padstart라는 기능이다.
"1".padStart(2,"0")
'01'
"12".padStart(2,"0")
'12'
이렇게 두 칸이 넘으면 0이 start부분에 추가되지 않는 것을 알 수 있다.
추가로 padend라는 기능은 start의 정반대 기능.
"1".padEnd(2,"0")
'10'
문자에도 사용이 가능하다.
"안녕".padStart(20,"베")
'베베베베베베베베베베베베베베베베베베안녕'
이제 padstart를 사용해서 코드를 바꾸자.
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}`;
이렇게 정상적으로 작동한다.
명언들을 랜덤하게 출력하게 만들기.
quotes.js파일을 생성.
html에서 <script src="js/quotes.js"></script>
파일을 참조 하고, 명언란을.
<div id="quote">
<span></span>
<span></span>
</div>
이렇게 만들어 놓음.
div , span에 대해 https://m.blog.naver.com/juyoung1704/221632845422
이제 자바스크립트 파일을 완성해보자.
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
html의 부분 선택-- 각각 아이디가quote인 것에 대해 첫번째 span 태그, 마지막 span태그를 선택해 명언과 작가 이름을 부여한다.
랜덤하게 명언 선택 --
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
랜덤 선택된 것을 전달 ---
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
background.js 파일 제작. html에서 가져오기 --
img 폴더 만들어서 이미지 파일 넣기 , 파일 참조는 --
bgImage.src = img/${chosenImage}
;
이미지를 배열에 저장 -- const images = ["0.jpg", "1.jpg", "2.jpg"];
랜덤 이미지 선택 --const chosenImage = images[Math.floor(Math.random() * images.length)];
중요한 점-- 자바스크립트에서 이미지를 만들어서 html에 보내는 형식.
document를 사용.
이미지 생성 -- const bgImage = document.createElement("img");
만들어진 이미지를 문서의 body에 넣어줘야만 함. --document.body.appendChild(bgImage);
이렇게 이미지가 뜨게 된다.