동백 // 노마드 코더 바닐라JS: Quotes

출처 : https://nomadcoders.co/

 

Quotes

 

핵심 : Random 배경화면과 Random 명언을 화면에 표시하는 법을 배운다.

 

0. quotes.js를 만들어주고 HTML과 연결을 시켜준다.

 

. Random 명언을 화면에 표시하기

1. frontend에서 HTML을 생성한다.

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

 

2. quotes.js에서 div랑 span들을 가져온다.

  // HTML의 quote 아이디를 가진 span의 첫번째와 마지막 자식을 호출
  const quote = document.querySelector("#quote span:first-child");
  const author = document.querySelector("#quote span:last-child");

2-1. array에 element들을 입력해준다.

const quotes = [
    {
      quote: "하기 싫어도 해라 감정은 사라지고, 결과는 남는다.",
      author: "Walt Disney",
    },
    {
      quote: "도망친 곳에 낙원은 없다.",
      author: "John Lennon",
    },
    {
      quote:
        "지금 당신이 하고있는 것에 최선을 다해라.",
      author: "Saint Augustine",
    },
    {
      quote: "You never walk alone",
      author: "Helen Keller",
    },
    {
      quote: "To dare is to do",
      author: "Tottenham Hotspur",
    },
    {
      quote: "모든 것이 형통하리니 강하고 담대하라.",
      author: "Church, ss",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
  ];

 

3. Js에서 Array에 있는 element에 (무작위로) 접근을 한다.

  // quotes 배열에 있는 값들(0부터 9번 인덱스까지)을 랜덤하게 변수에 저장함.
  // 또한 quotes.length를 곱함으로서 명언의 길이에 맞게 자동으로 랜덤값 조정됌.
  const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

 

4. HTML에 연결했던 HTML의 span에 접근했던 element를 넘겨준다.

  // quote변수, 즉 HTML span의 첫번째 자식에 랜덤하게 저장된 명언을 글자로 출력한다. 
  quote.innerText = todaysQuote.quote;
    
  // author변수, 즉 HTML span의 마지막 자식에 랜덤하게 저장된 작가를 글자로 출력한다.
  author.innerText = todaysQuote.author;

 

 

 

Tip 배열(데이터)의 특정값을 화면(HTML)에 전달하는 법

제일 중요한 것은 배열에 저장시켜주는 것

/*

0. js에서 HTML의 id를 가져와서 변수에 연결 시켜줌

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

1. 배열을 만들고, 그 안에 element들을 넣어준다.

const quotes = [
    {
      quote: "하기 싫어도 해라 감정은 사라지고, 결과는 남는다.",
      author: "Walt Disney",
    },
    {
      quote: "도망친 곳에 낙원은 없다.",
      author: "John Lennon",
    },
    {
      quote:
        "지금 당신이 하고있는 것에 최선을 다해라.",
      author: "Saint Augustine",
    },
    {
      quote: "You never walk alone",
      author: "Helen Keller",
    },
    {
      quote: "To dare is to do",
      author: "Tottenham Hotspur",
    },
    {
      quote: "모든 것이 형통하리니 강하고 담대하라.",
      author: "Church, ss",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
  ];

2. 변수에 배열의 특정 element값을 저장시킨다.

  // quotes 배열에 있는 값들(0부터 9번 인덱스까지)을 랜덤하게 변수에 저장함.
  // 또한 quotes.length를 곱함으로서 명언의 길이에 맞게 자동으로 랜덤값 조정됌.
  const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

3. HTML과 연결한 변수에 element값이 있는 변수의 값을 전달해줌.

  // quote변수, 즉 HTML span의 첫번째 자식에 랜덤하게 저장된 명언을 글자로 출력한다. 
  quote.innerText = todaysQuote.quote;

4. 출력!

 

 

---

 

 

Background

 

핵심 : Random 배경화면과 Random 명언을 화면에 표시하는 법을 배운다.

 

. Random 배경화면을 화면에 표시하기

0. background.js라는 파일을 만들어주고, 배경화면으로 넣을 이미지들을 img 폴더로 만들어서 넣어줌.

1. array에 element들을 입력해준다.

// img 폴더에 있는 이미지들과 elements 이름을 같게 해야 함.
const images = [
    "1.jpeg",
    "2.jpeg",
    "3.jpeg",
    "4.jpeg",
    "5.jpeg",
    "6.jpeg"
];

 

2. Js에서 Array에 있는 element에 (무작위로) 접근을 한다.

  // images 배열에 있는 값들(0부터 5번 인덱스까지)을 랜덤하게 변수에 저장함.
  // 또한 images.length를 곱함으로서 사진의 갯수에 맞게 자동으로 랜덤값 조정됌.
  const chosenImage = images[Math.floor(Math.random() * images.length)];

 

3. 이미지를 HTML에 실제로 추가해줌. 

// 지금까지 우리가 해온건 HTML에서부터 JS로 뭔가(h1, span, div)를 가져오는 것이었는데,

지금 할 것은 JS에서 뭔가를 만들어서 그걸 HTML에 추가하는 것이다.

 

우리의 목표는 JS로 HTML에 images를 만드는 것이다.

  // JS에서 createElement를 통해 "img"라는 HTML의 element를 만들어줌.
  const bgImage = document.createElement("img");

  // 만들어준 element에 src(주소)를 연결해줌.
  bgImage.src = `img/${chosenImage}`;

 

Tip // 자바스크립트에서 createElement()를 통해 HTML element를 생성할 수 있다!

 

 

4. JS에서 생성한 HTML element를 HTML body 내부에 추가해준다.

  // appendChild는 body에 element를 추가해준다.
  document.body.appendChild(bgImage);

 

 

5. 완성!

 

 

---

 

핵심 요약

1. 배열(데이터)의 특정값을 화면(HTML)에 전달할 때 제일 중요한 것은 배열에 저장시켜주는 것

 

2. 자바스크립트에서 createElement()를 통해 HTML element를 생성할 수 있다!