[VanillaJS] 랜덤 모듈로 명언, 배경화면 구현하기

1. 랜덤 명언 구현하기

1. 명언 배열 생성하기 (js 파일은 따로)

 

quotes.js

const quotes = [
    {
        quote: "Well done is better than well said.",
        author: "Benjamin Franklin",
    },
    {
        quote: "If you would thoroughly know anything, teach it to others.",
        author: "Tryon Edwards",
    },
    {
        quote: "My personal hobbies are reading, listening to music, and silence.",
        author: "Edith Sitwell",
    },
    {
        quote: "Reading is sometimes an ingenious device for avoiding thought.",
        author: "Sir Arthur Helps",
    },
    {
        quote: "Nothing makes the earth seem so spacious as to have friends at a distance; they make the latitudes and longitudes.",
        author: "Henry David Thoreau",
    },
    {
        quote: "Perpetual optimism is a force multiplier.",
        author: "Colin Powell",
    },
    {
        quote: "Love is the delightful interval between meeting a beautiful girl and discovering that she looks like a haddock.",
        author: "John Barrymore",
    },
    {
        quote: "When one door of happiness closes, another one opens; but often we look so long at the closed door that we do not see the one which has opened for us.",
        author: "Helen Keller",
    },
    {
        quote: "If it is always sunny, it will become a desert. It has to rain and be windy for it to become fertile land. ",
        author: "Spanish Idioms.",
    },
    {
        quote: "Laugh at yourself first,. before anyone else can.",
        author: "Elsa Maxwell"
    }
]

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;

 

 

2. 명언배열 모두 출력하기 Math 모듈

js에서 기본 제공하는 Math 모듈

Math.PI
// 3.14...

Math.random()
// 하지만 이 랜덤모듈은 0부터 1 사이의 랜덤한 숫자(실수)를 제공한다.
// 우리가 필요한 숫자 : 0부터 10 사이

Math.random() * 필요한 숫자 크기

Math.random() * 10
// 0~9 의 (float형의) 숫자가 랜덤으로 출력된다. 

// 여기서 우리는 숫자를 정수로 만들어 줄 필요가 있다.

Math.round(숫자)
//반올림: 괄호 안의 숫자를 반올림 해줌

Math.ceil(숫자)
// 올림: 괄호 안의 숫자를 ceil(천장)까지 올려줌

Math.floor(숫자)
// 내림: 괄호 안의 숫자를 floor(바닥)까지 내려줌

Math.floor(Math.random() * 10)

// 10 대신 배열 길이를 넣어주면 더 유지보수가 쉬움

 

 

2. 랜덤 배경화면 구현하기

1. 배경이미지 파일명이 담긴 js파일 준비하기

 

background.js

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

 

2. 자바스크립트에서 image 태그 생성하기

document.createElement();

craeteElement 사용

const bgImage = document.createElement("img");

() 안에 생성할 태그 유형 입력

 

3. 생성한 이미지 태그에 랜덤 이미지 소스 주기

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

 

4. html파일 body 태그에 생성한 이미지 태그 추가하기

document.body.appendChild(추가할 요소);

appendchild() 사용

document.body.appendChild(bgImage);