[JS/노마드코더] 바닐라 JS로 크롬 앱 만들기(5) - 시계, 명언표시/Math 모듈, createElement(), appendChild()

• [👀Tip] 멀티 커서, 다중 셀렉트 텍스트 선택
  https://tttap.tistory.com/185

시계

✔Intervals

매번 일어나는 일
ex) 매초 마다, 2초마다...

setInterval(function, 1000); // 1초마다 function 호출

✔Timeouts and Dates

setTimeout(function, 1000); // 1초 뒤에 function 호출

• mdn web docs - JavaScript Date
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

const date = new Date(); // 현재 날짜, 시각 정보를 가져옴
data.getHours();
data.getMinutes();
data.getSeconds();

✔PadStart

"1".padStart(2, "0"); // string의 길이가 2가 되지않으면 나머지 부족한만큼 앞에서부터 "0"으로 채운다.
>> "01"

clock.js

const clock = document.querySelector("h2#clock");

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}`;
}
getClock();
setInterval(getClock, 1000);

---

명언과 배경

✔Quotes

    <div id="quote">
        <span></span>
        <span></span>
    </div>

span태그를 두개 생성합니다. 각각 quote와 author를 보여줄 태그입니다.

const quotes = [{quote: , author: }, {},...]; // 10개의 명언을 가져오기

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

Math

• Math.random(): 0~1 사이의 랜덤한 숫자를 제공합니다.
• Math.round(): 반올림
• Math.ceil(): 올림
• Math.floor(): 버림

✔Background

const images = ["1.jpg", "2.jpg","3.jpg","4.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

이때까지는 html에서 태그를 만들고 js에서 그 태그를 찾아서 여러가지 작업을 했습니다. 이번에는 반대로 js에서 element를 만든 뒤 html에 붙이는 작업을 할겁니다.

명언을 만들때와 동일하게 랜덤하게 배경이미지를 가져올거기 때문에 randomness 부분을 복사해그대로 사용했습니다.

js에서 element를 생성합니다.

document.createElement("img");
>> <img></img> 

생성한 element를 body에 추가해줍니다.

• prependChild(): 제일 위에 child 추가
• appendChild(): 제일 아래에 child 추가

새로고침할때마다 랜덤으로 배경 이미지를 가져옵니다.