크롬앱 #6 QUOTES AND BACKGROUND

^^* ,,·2022년 4월 6일
0

6 QUOTES AND BACKGROUND

🔹 랜덤한 문구를 배열에 객체 형식으로 저장
🔹 난수로 인덱스를 생성
🔹 html에 텍스트 뿌림


Math 내장객체

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

1. Math.random()

  • 수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환
  • 암호학적으로 안전한 난수를 제공하지 않으므로, 보안과 관련된 어떤 것에도 이 함수를 사용해서는 안 됨
  • 암호화 목적으로는 Web Crypto API의 window.crypto.getRandomValues() 메소드를 이용

2. Math.floor()

  • 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환
  • Math.floor(null)은 NaN 대신 0을 반환

🔸 html

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

🔸 js

const quotes = [
  {
    quote:
      '"The name is Sherlock Holmes and the address is 221b Baker street."',
    episode: "A Study in Pink",
  },
  {
    quote:
      "“I'm not a psychopath, Anderson. I'm a high-functioning sociopath. Do your research.”",
    episode: "A Study in Pink",
  },
  {
    quote: '"Bored!"',
    episode: "The Great Game",
  },
  {
    quote:
      "\"Don't make people into heroes, John. Heroes don't exist. And if they did I wouldn't be one of them.\"",
    episode: "The Great Game",
  },
  {
    quote: '"Vatican cameos!"',
    episode: "A Scandal in Belgravia",
  },
  {
    quote:
      '"Once you\'ve ruled out the impossible, whatever remains, however improbable, must be true."',
    episode: "The Hounds of Baskerville",
  },
  {
    quote: '"I don\'t have friends."',
    episode: "The Hounds of Baskerville",
  },
  {
    quote: '"Nothing happens to me."',
    episode: "A Study in Pink",
  },
  {
    quote: '"It\'s brilliant."',
    episode: "A Study in Pink",
  },
  {
    quote: '"Because you\'re an idiot."',
    episode: "A Study in Pink",
    //나중에는 여기다가 상황에 맞는 이미지를 넣어서 뿌리면 되겠다.
  },
];

const quote = document.querySelector("#quote span:first-child");
const episode = document.querySelector("#quote span:last-child");
//const random = Math.round(Math.random() * 10);
//const random = Math.ceil(Math.random() * 10);
const random = Math.floor(Math.random() * quotes.length);
const todaysQuote = quotes[random];

quote.innerText = todaysQuote.quote;
episode.innerText = todaysQuote.episode;

0개의 댓글