#6 QUOTES AND BACKGROUND

#6.0

Quotes

이제 자신의 명언집과 배경화면을 모아서 랜덤하게 표현하는 코드를 구현할 것이다. 우선 10가지의 명언을 모아서 다음과 같은 폼에 정의한다.

const quotes = [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}];

배열[] 안에 중괄호{}가 들어가는데 이는 #2 WELCOME TO JS에 설명한 Object표기 방식이다. 추가적인 설명을 한다면 배열[]안에서 중괄호{}로 쓰인다면 Object 변수 선언은 다른게 없지만 아래 그림에서 보이는거와 같이

Untitled

배열[] 밖에선 변수가 Object 대상이였다면 배열[]에서는 인덱스(index)가 Object 대상이 된다는 것이다. 아래 코드는 Object가 된 배열의 인덱스를 사용하는 코드이다.

quote[index].author;

quote배열 index번째에 있는 author변수의 값을 얻어오게 될 것이다.

이제 quotes에 저장한 내용을 무작위로 출력하는 코드에 대해서 다루어볼 것이다. randomness(무작위성)은 JS에서 Math라는 클래스에서 random함수를 불러와 사용한다. random은 0이상에서 1미만사이의 랜덤한 숫자를 반환한다. 하지만 random함수는 반환하는 타입이 float이기 때문에 정수로 사용하는 index(인덱스)에서 사용할 수가 없다. 그래서 정수 형태의 값을 변환하기 위해 다음과 같은 함수를 선택해서 사용한다.

Math.round(value) : 0.5이상의 값을 1로 반올림 한다.
Math.ceil(value) : 소수값을 가진 정수를 다음 정수로 올림한다.
Math.floor(value) : 소수값을 가진 정수를 현재 정수로 내림한다.

여기서는 floor함수를 사용하여 정수를 표현할 것인데 floor함수를 사용하는 이유는 array 인덱스는 0부터 시작하기 때문이다. 다음 코드로 부터 floor를 사용하는 이유를 설명한다.

Math.floor(Math.random() * <array length>)

만약 random에 나온 결과값이 0.3과 0.5가 나온다면 floor 결과값은 둘다 0으로 나온다. 하지만 array 요소(length)가 2개이고 random 결과값에 요소 갯수를 곱한다면 0.6과 1이 되어 floor 결과값은 0과 1이 된다. 그리고 0과 1을 array 인덱스로 쓰인다면 위 코드만으로 array의 모든 요소에 접근할 수 있게 된다. 랜덤으로 명언을 출력하는 코드를 다음과 같이 완성한다.

const quotes = [...];

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.innerHTML = todayQuote.quote;
author.innerHTML = todayQuote.author;

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum App</title>
  </head>
  <body>
    <h2 id="clock">00:00:00</h2>
    <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
    </form>
    <h1 class="hidden" id="greeting"></h1>
    <div id="quote">
      <span></span>
      <span></span>
    </div>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
  </body>
</html>

위 코드를 보면 Math함수 와 곱해지는 quotes.length은 array의 길이를 구하는 요소이다. 나중에 quotes array에 명언을 추가한다면 array 요소가 몇개 있는지 일일이 세어보지 않아도 array 길이를 구하는 length만 있으면 바로 array 요소가 몇개 있는지 바로 알 수가 있다. 그리고 아래와 같은 코드로 구현한다면 array 요소가 추가되어도 랜덤하게 모든 요소에 접근할 수 있게 된다.

quotes[Math.floor(Math.random() * quotes.length)]