CLOCK

Intervals

• js를 하나에 다 넣은 것보다 기능에 따라서 나눠서 여러개의 js파일로 정리하면 코드가 짧아져서 보기 편하고 관리하기 편해짐.
• 물론 하나의 파일에 다 관리해도 됨.
• Interval이란 매번 일어나야하는 무언가
• setInterval는 두 개의 인자를 받는다. 하나는 실행할 함수, 두 번째는 실행할 함수의 간격을 몇 ms로 할 것인지 (1000ms = 1s)
• setInterval(실행할 함수이름, 5000)

Timeouts and Dates

• setTimeout(함수이름, 1000) ⇒ 1초 기다렸다가 한번만 실행.
• 시간을 구해보자! 콘솔창에서 한번 해보면
• 현재 날짜,시간을 구하는 함수 = Date(); (날짜, 요일, 시간까지 다나옴)
• const date = new Date(); 해주고
  (왜 new를 붙여 변수를 초기화? 시키는지 아직 잘 이해가 안됨 댓글 설명을 읽었지만 잘 모르겠다.)
• 현재시간 ⇒ date.getHours();
  현재 분 ⇒ date.getMinutes();
  현재 초 ⇒ date.getSeconds();
• 위의 코드를 합치면 시계를 만들 수 있다.

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock(); 
// setInterval은 1000ms후에 시작되니 새로고침 하자마자 시간이 보이도록 함수를 호출!
setInterval(getClock, 1000);

• 그러나 00:00:00으로 세팅하고 싶은데 10보다 작은 수는 한자리만 나옴.. 고치려면?

PadStart

• padStart함수는 string에 쓸 수 있는 함수
• “1”.padStart(2,”0”)
  ⇒ “1”을 만났을 때 2자리가 아니면 string 시작부분부터 “0”을 넣어줘!
• padEnd함수는 뒤에서 부터 채워준다.
• “”부분은 string!! 자릿수는 숫자로!!!
• 주의!! date.getHours의 값은 문자가 아니라 숫자 이므로 string로 바꾸어야 한다
  분, 초도 마찬가지!!
• Sting(new Date().getHours()) ⇒ “12” string으로 출력!!

const clock = document.querySelector("#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 AND BACKGROUND

Quotes(명언)

• 랜덤하게 명언 가져오기
• 명언들로 array 만들기
• Math.random() 함수 이용하기 = 1~0 사이의 랜덤한 숫자를 제공
  여기에 10을 곱하면 0~10사이의 랜덤한 숫자를 제공한다.
  그러나 둘 다 정수가 아님. 정수받기 위한 세가지 방법이 있음
• 첫 번째는 Math.round() ⇒ ()안의 숫자를 반올림 해서 정수로 만듬
• Math.ceil()은 올림, Math.floor()는 버림
• Math.floor(Math.random()*10)
  ⇒ 랜덤하게 얻은 숫자에 10을 곱해서 버림 후 정수로 얻음
  ⇒ 0~9 정수가 랜덤하게 출력
• 명언과 연결해주면 완성

const quotes = [//명언 array]

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;

Background

• 명언과 비슷함
• img폴더에 준비한 이미지 파일을 넣어 준비하고, background.js를 만든다.
• JS에서 이미지를 만들어서 HTML에 넣어주고 싶음.
• document.createElement(”img”)를 사용할 것임. ⇒ img태그가 생김

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
// HTML태그 img태그를 만듬
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
// body태그 맨밑에 img태그가 생김 BUT 아래쪽에 그냥 붙어있음
// 나중에 CSS로 설정해줄 것임.