노마드 코더 - 바닐라 JS로 크롬 앱 만들기(7)

#6 QUOTES AND BACKGROUND

 

0. Quotes

const quotes = [
  {
    quote:
      "Life is a tragedy when seen in close-up, but a comedy in long-shot.",
    author: "Charlie Chaplin",
  },
  {
    quote: "Sometimes even to live is an act of courage.",
    author: "Seneca",
  },
  {
    quote: "What we dwell on is who we become.",
    author: "Oprah Winfrey",
  },
  {
    quote: "The secret of getting ahead is getting started.",
    author: "Mark Twain",
  },
  {
    quote:
      "Great things are done by a series of small things brought together.",
    author: "Vincent Van Gogh",
  },
  {
    quote: "The way to get started is to quit talking and begin doing.",
    author: "Walt Disney",
  },
  {
    quote: "The future starts today, not tomorrow.",
    author: "Saint pope John Paul II",
  },
  {
    quote: "To be happy, we must not be too concerned with others.",
    author: "Albert Camus",
  },
  {
    quote: "Life is not fair, get used to it.",
    author: "Bill Gates",
  },
  {
    quote: "Only i can change my life. NO one can do it for me.",
    author: "Carol Burnett",
  },
];

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;

1. const quotes = [ ] ;
명언을 담을 변수를 생성한다.

2. {quote: "" ,
author: "" ,
}
변수 안에 객체(object) 형태로 명언과 작가를 저장한다.

3. const quote 와 const author로 HTML 요소(element)를 가져온다.
(* 첫 번째 span 을 선택할 때 → #quote span:first-child로 적어줌)

4. 랜덤으로 quotes 안에 있는 객체들을 선택해야 한다.
quotes에 있는 객체들은 quotes[0], quotes[1] 식으로 불러올 수 있으며,
이때 랜덤으로 숫자들을 지정해주고 싶으면 math.random() 함수 사용한다.
todaysQuote라는 변수 만들고, 그 안에 quotes[Math.floor(Math.random()*quotes.length)];를 넣어준다.

객체 수가 아니라 quotes.length를 넣어주면 quotes변수 안의 객체들이 추가되거나 삭제돼도 코드를 바꿀 필요가 없다.

(* [1,2,3,4,5] 이렇게 생긴 array가 있을 때, Array.length를 사용하면 Array의 길이를 반환해줌)

5. quote와 author의 innerText를 변경한다.
todaysQuote.quote으로 명언을 todaysQuote.author로 작가를 가져온 후 quote와 author 변수에 넣어준다.

 

 

+) Q

const todayQuote = quotes[Math.floor(Math.random() * quotes.length)]; 코드에서 array의 object가 무작위로 선택이 되는데,

quote.innerText = todaysQuote.quote;

author.innerText = todaysQuote.author;

그러면 이 코드에서 위에랑 아래서 todayQuote에 의해서 다른 객체가 나올 수도 있는 건지? 그때 그때 무작위로 선택이 된다고 했는데 quote랑 author가 항상 일치되는 게 어떻게 가능한 건지?

-

무작위로 선택된다는 것은 그 인덱스 숫자가 랜덤으로 나온다는 것이다.

randomness로 인해 숫자가 0~9 사이 정수가 나오게 되는데, 그럼 각 인덱스에 해당하는 object들이 있다.

따라서 quote랑 author는 항상 일치될 수밖에 없다.

 

 

Math.floor() : 내림

Math.ceil(3.6)  // => 3

Math.ceil() : 올림

Math.ceil(1.1)  // => 2

Math.round() : 반올림

Math.ceil(6.2)  // => 6
Math.ceil(4.5)  // => 5

Math.random() : 0과 1 사이의 무작위의 값을 반환

Math.random() * 10  // => 0에서 9사이의 숫자들을 얻을 수 있음 (0부터 셈)

 

 

 

1. Background

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");

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

document.body.appendChild(bgImage);

 

js에서 html의 태그를 생성

1. createElement() : 태그를 생성한다. (아직 html에 없는 상태 → js에서만 볼 수 있는 상태)
2. appendChild : 부모 노드에 자식 노드 추가한다. (html에서 생성되는 걸 볼 수 있음)

 

 

2. Recap

. Math 객체 기능

Math.random() 0부터 1 사이 무작위의 값 반환

Math.floor() 내림

Math.ceil() 올림

Math.round() 반올림

 

JS에서 html 요소를 생성

createElement(" ")

ex)

document.createElement("img") 일 경우 html 내에 img 태그를 생성

 

appendChild() → 함수 안의 경로에 정의한 값을 가장 뒤에 기입

prepend() → 반대로 앞에서 기입