코딩일기: 노마드 코더로 공부 4일차

 

intervals / timeout

 

intervals은 매번 일어나야 하는 무언가

 

setInterval();

setInterval 함수는 두 개의 인자를 받는다.

첫 번째 인자는 실행하고자 하는 function, 두 번째 인자는 호출 간격를 몇 ms로 할지를 적는다.

 

 

function sayHello() {

  console.log("hello");

}

setInterval(sayHello, 5000);

이렇게 설정하면

처음에는 아무것도 뜨지 않았다가 5초가 지나면 함수가 실행되어 콘솔에 hello가 출력되고, 5초가 지날 때마다 함수가 반복되어 실행되기 때문에 옆의 숫자가 증가되는 것을 볼 수 있다.

 

 

 

setTimeout()

setTimeout 함수도 마찬가지로 두 개의 인자를 받는데, 이 함수는 어떤 함수를 나중에 실행시키고 싶을 때 사용한다.

 

function sayHello() {

  console.log("hello");

}

setTimeout(sayHello, 5000);

이렇게 작성하면 5초 뒤에 콘솔 창에 hello라는 글자가 나타날 것이다.

 

 

 

Date object

 

new Date()는 오늘 날짜를 가져온다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

date관련 메소드 등등 (MDN)

 

 

 

등등등의 속성이 있다

(getDay는 0부터 일요일~~6 토요일이다.)

 

 

function getClock() {

  const date = new Date(); //함수 안에 써줘야 함

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

}

setInterval(getClock, 1000);

이런 식으로 코드를 작성해 주면

이렇게 매 초마다(1000ms) 콘솔에 시간이 출력되는 것을 볼 수 있다.

문제점: (1) 1초를 기다려야 시간이 뜬다. (2) 1의자리 단위 시간이 생기면 00,01,02...가 아닌 0,1,2...로 뜬다.

getClock();

setInterval(getClock, 1000);

문제점 2를 해결하기 위해 함수를 일단 먼저 호출해준다.

 

문제점1은 이것을 해결하기 위해 이미 padStart()라는 함수가 존재한다.

 

위 코드를 해석하면 , 글자의 길이가 2보다 작으면 앞에 0를 추가하라는 뜻이다.

padEnd()라는 함수도 있는데, 이것은 반대로 뒤에다가 추가하는 것이다.

 

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 seceonds = String(date.getSeconds()).padStart(2, "0");

  clock.innerText = (`${String(hours)}:${minutes}:${seceonds}`);

}

getClock();

setInterval(getClock, 1000);

이렇게 작성해 주면 문제점이 해결되었다.

주의할 점은 문자열로 변환시켜야 한다.

 

 

 

랜덤 명언

 

const quotes = [

  {

    quote : "자유는 더 높은 정치적 목적을 위한 수단이 아니다. 자유 그 자체가 가장 높은 정치적 목적이다.",

    author : "액톤 경"

  },

일단 이런 식으로 명언을 담은 배열을 만든다. (내용이 길어서 일부만 잘라 왔다)

 

<div id="quote">

  <span></span>

  <span></span>

</div>

그리고 명언을 담을 태그들을 html 문서 내부에 적는다.

 

 

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

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

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

quote.innerText = todayQuote.quote;

author.innerText = todayQuote.author;

명언이 나올 span과 작가 이름이 나올 span을 변수에 저장

랜덤하게 명언이 나올 수 있도록 Math.random을 사용. 랜덤 메소드는 0과 1사이의 랜덤한 숫자가 나오기 때문에 명언 배열의 길이만큼 곱해줘야 한다. 또 소수점이 나오지 않도록 Math.floor를 이용하여 내림해준다. 내림해주면 0부터 마지막 요소 인덱스까지 랜덤한 숫자가 나올 것이다.

그리고 각각 innerText로 텍스트가 나오도록 설정

 

 

 

랜덤 배경

 

const images = [

  "background01.jpeg",

위랑 똑같이 이런 식으로 이미지 제목이 담긴 배열을 만들어준다. 

 

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

이미지를 랜덤으로 선택하는 방법도 위랑 똑같다.

 

이번에는 createElement()를 이용할 것이다

 

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

createElement를 이용하여 img이라는 html 요소를 만들어낸다

그리고 scr를 설정한다. (img폴더/파일이름)

 

이제 이것을 body 태그에 추가해야 하는데, 이때는 appendChild()를 이용한다.

 

 

document.body.appendChild(bgImage);

이와 같이 입력한다. (append는 가장 뒤, prepend는 가장 위에 오게 한다. append를 썼으니 img 요소가 html 가장 뒤에 올 것이다.)