[JavaScript] 배열 랜덤뽑기

1. 랜덤 명언

const quotes = [
  {
    quote: "변명 중에서도 가장 어리석고 못난 변명은 '시간이 없어서'라는 변명이다.",
    author: "에디슨",
  },
];

🚩 목표

• 위와 같이 명언과 인물이 객체의 형태로 배열에 저장되어 있다.
• 이러한 객체가 quotes 배열 안에 여러개 존재한다고 했을 때, 이들 중 하나를 선택하여 웹페이지에 나타내고자 한다.
• 명언과 인물을 넣어줄 HTML 태그를 가져와 활용할 것이다.

// 명언과 인물을 넣어줄 HTML 태그
const $quote = document.querySelector("#quote span:first-child");
const $author = document.querySelector("#quote span:last-child");

// quotes 배열에서 랜덤하게 선택한 객체
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

// HTML 태그 안에 랜덤하게 선택한 객체의 quote와 author을 넣어줌
$quote.innerText = todaysQuote.quote;
$author.innerText = todaysQuote.author;

💡 해결과정

1. 명언과 인물을 넣어줄 HTML 태그를 querySelector로 가져온다. 이렇게 HTML에서 가져온 태그를 저장하는 변수는 앞에 $를 붙여 구분을 지었다.
2. quotes 배열 안에서 저장되어 있는 여러 명언객체들 중 랜덤하게 하나를 골라 새로운 변수 todaysQuote에 저장해준다.
3. HTMLElement.innerText 로 랜덤하게 선택된 todayQuote의 quote와 author를 HTML 태그에 넣어줄 수 있다.

---

2. 랜덤 배경

const images = ["0.jpg", "1.jpg", "2.jpg"];

🚩 목표

• img파일에 저장해둔 일관성 있는 이미지 파일들을 images배열에 저장해둔다.
• images배열에서 랜덤하게 이미지 파일을 뽑아 웹페이지에 나타내줄 것이다.
• 앞선 랜덤 명언과 다르게, HTML 태그를 가져와 사용하지 않고, JavaScript로 태그를 만들어 넣어줄 것이다.

// 랜덤하게 이미지파일 뽑기
const chosenImage = images[Math.floor(Math.random() * images.length)];
// img 태그 생성
const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);

💡 해결과정

• 이미지 파일 중에서 랜덤하게 하나를 뽑은 뒤, img 태그를 생성해 appendChild로 body영역에 넣어준다.

---

3. 정리

Math.floor(Math.random() * 랜덤하게 뽑을 데이터가 저장된 배열길이)

랜덤하게 뽑을 데이터가 저장된 배열에서 랜덤한 index값을 알 수 있다.

---

참고

바닐라JS로 크롬 앱 만들기