[JavaScript] Random

1. quote

랜덤하게 명언들이 나오는 형태를 연출해주자.
js 파일에 아래 명언들을 입력해준다.

const quotes = [
{
quote: 'I never dreamed about success, I worked for it',
author: 'Estee Lauder'
},
{
quote: 'Do not try to be original, just try to be good.',
author: 'Paul Rand'
},
{
quote: 'Do not be afraid to give up the good to go for the great',
author: 'John D. Rockefeller'
},
{
quote: 'If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.',
author: 'Martin Luther King Jr.'
},
{
quote: 'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.',
author: 'Thomas Edison'
},
{
quote: 'The fastest way to change yourself is to hang out with people who are already the way you want to be',
author: 'REid Hoffman'
},
{
quote: 'Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations',
author: 'Tim O Reilly'
},
{
quote: 'Some people dream of success, while other people get up every morning and make it happen',
author: 'Wayne Huizenga'
},
{
quote: 'The only thing worse than starting something and falling.. is not starting something',
author: 'SEth Godin'
},
{
quote: 'If you really want to do something, you will find a way. If you do not, you will find an excuse.',
author: 'Jim Rohn'
},
];

위 명언들을 array로 묶는다. 명언들 사이사이에는 콤마(,)를 붙여주어야 한다.

html에는 아래와 같이 입력해준다.

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

이제 quotes.js에서 div랑 span을 가져와야 한다. 명언은 위에, 작가는 아래에.

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

2. random

array 안에 있는 element에 어떻게 접근할 수 있을까?

js에 입력한 quotes에는 10개의 명언들이 있다. array는 첫 번째가 0이기 때문에 마지막 명언은 10-1, 9일 것이다.

js에는 기본적으로 탑재되어 있는 Mathmodule이 있다. 여기에는 지금 사용할 것은 Math.random()

random()은 0부터 1사이의 랜덤한 숫자를 제공한다.

우리는 0부터 1이 아닌 0부터 10 사이의 숫자가 필요하기 때문에 10을 곱하면 된다.

Math.random() * 10

하지만 이 결과값은 1.2345623423, 3.35426226과 같이 float(실수)가 있기 때문에 없애줘야 하는데 이 때 사용할 수 있는 function은 3가지이다.

round() - 1.1, 1.2, 1.4에서 모두 1로 돌려준다. 그러나 1.5부터 1.6, 1.7, 1.8은 2를 돌려준다.(반올림)
ceil() - 1.1, 1.9는 2가 되고, 1.0은 1이 되고, 1.01은 2가 된다.(천장까지 끌어 올린다)
floor() - 1.9는 1이 되고, 1.9999999도 1이 된다. (바닥까지 숫자를 내린다)

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

위와 같이 사용할 수 있다.
그럼 우리가 하던 명언들을 가져와 코드를 작성해보자.

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

3. array의 길이

뒤에 있는 숫자는 array의 개수를 나타내는데 만약 명언이 하나 추가되거나 그 명언들이 1억개라면?
세는 것보다 array의 길이를 알아내는 코드를 작성하는 것이 더 좋을 것 같다.

[1, 2, 3, 4, 5].length

5

length를 사용하면 array의 길이를 반환해준다.

그럼 명언의 개수 코드를 바꾸면 아래와 같이 해줄 수 있다.

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