[JavaScript] 명언 랜덤하게 보여주기(Math.random())

// html

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

{quote, author}이 '10개' 있는 const quotes 생성

// javascript

const quotes = [
    {
        quote: "Go ahead, make my day.",
        author: "Harry Callahan"
    },
    {
        quote: "If you want something done right, do it yourself.",
        author: "Charles-Guillaume Étienne"
    }, 
    {
        quote: "May the Force be with you.",
        author: "Star Wars"
    },
    {
        quote: "Life is like a box of chocolates. You never know what you’re gonna get.",
        author: "Forrest Gump"
    },
    {
        quote: "Whatever you are, be a good one.",
        author: "Abraham Lincoln"
    },
    {
        quote: "You must be the change you wish to see in the world.",
        author: "Mahatma Ghandi"
    },
    {
        quote: "The truth will set you free.",
        author: "the Bible"
    },
    {
        quote: "Life is like riding a bicycle. To keep your balance, you must keep moving.",
        author: "Albert Einstein"
    },
    {
        quote: "Knowledge is power.",
        author: "Sir Francis Bacon"
    },
    {
        quote: "Ask, and it shall be given you; seek, and you shall find.",
        author: "the Bible"
    }
]

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

 

1. 랜덤한 숫자 생성하기

1-1. 랜덤한 숫자 생성하기

Math.random();

// 0 이상 1 미만의 소숫점 랜덤 숫자를 생성

 

Math.random() * 10;

// 0 이상 10 미만의 소숫점 랜덤 숫자를 생성

 

1-2. 소숫점 아래 숫자를 모두 없애기

Math.round(3.4567);

// 3 반올림

Math.ceil(3.4567);

// 4 올림

Math.floor(3.4567);

// 3 내림

 

1-3. 랜덤 숫자의 소숫점 아래 숫자 모두 없애기 

Math.round(Math.random()*10);

 

2.  n개의 quotes를 담은 array[ ]에서 하나씩 가져오기

console.log(quotes[Math.floor(Math.random()*10)]);

총 10개의 요소를 갖는 quotes라는 array에서 >>

 

2-1. 첫번째 요소를 가져오고 싶다

quotes[0]

2-2. 열번째 요소를 가져오고 싶다

quotes[9]

2-3. 랜덤한 n번째 요소를 가져오고 싶다

quotes[Math.round(Math.random()*10]

 

3. array의 길이를 모른다면?

총 a개의 요소를 갖는 quotes라는 array에서 랜덤한 n번째 요소를 가져오고 싶다 >>

 

3-1. array의 길이(a) 구하기

quotes.length

3-2. 랜덤한 n번째 요소를 가져오고 싶다

quotes[Math.round(Math.random()*quotes.length]

 

const quotes = [
    {
        quote: "Go ahead, make my day.",
        author: "Harry Callahan"
    },
	....
]

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;

 

See the Pen randomQuotes by Kyoungeun Jo (Joe) (@Kyoungeun-Jo-Joe) on CodePen.