자바스크립트 입문[Javascript] - 자바스크립트로 랜덤으로 명언 나타내기- Math.method( )/ .length /

2021-07-27

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Math.method()] 

 

이번 포스팅에선 웹 브라우저에서 랜덤으로 명언이 나타나도록 구현해봅시다.

먼저, quotes.js 라는 자바스크립트 파일을 생성한 뒤 html에 import 해줍시다.

 

quotes.js에 quotes라는 array를 만들어, 약 10개의 명언과, 저자를 입력해줍시다.

 

만약, 콘솔에 명언을 표시한다면 console.log(quotes[number])을 구현하면됩니다.

number에 들어가는 수는 0부터 9까지이고,  우리는 0부터 9까지의 숫자를 랜덤으로 뽑아야합니다.

 

Math.random()

 

랜덤한 수를 얻기위해선 Math.random()을 이용해야합니다.

Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있습니다.

이때 우리는 0부터 9까지의 수가필요하기때문에 Math.random() * 10 을 해주면됩니다.

 

 

위와 같이, 콘솔에서 10을 곱했을때 범위 0부터 9까지 랜덤으로 산출됩니다.

 

그러나 우린, 소수점이 없는 정수꼴 형태를 원합니다. 그러기 위해선 3가지 방법이 있습니다.

1. Math.round() 반올림해 정수로 만듭니다.

2. Math.ceil()    올림하여 정수로 만듭니다.

3. Math.floor()   내림하여 정수로 만듭니다.

 

아래와 같이, floor를 이용해 랜덤으로 정수를 산출해봅시다.

 

그러나 위와 같은 방법은 Array에 10개의 요소가 있다는 걸 알 때 할 수 있는 방법입니다.

따라서 .length 함수를 이용해 10을 대체합시다.

 

const quotesList = [{
	quote:"The purpose of our lives is to be happy.",
	author:"Dalai Lama"
},{
	quote:" Life is what happens when you're busy making other plans.",
	author:"John Lennon"
},{
	quote:"Get busy living or get busy dying.",
	author:"Stephen King"
},{
	quote:"You only live once, but if you do it right, once is enough.",
	author:"Mae West"
},{
	quote:"Design is not just what it looks like and feels like. Design is how it works.",
	author:"Steve Jobs"
},{
	quote:"I want to put a ding in the universe.",
	author:"Steve Jobs"
},{
	quote:"Innovation distinguishes between a leader and a follower.",
	author:"Steve Jobs"
},{
	quote:"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me.",
	author:"Steve Jobs"
},{
	quote:"Sometimes life is going to hit you in the head with a brick. Don't lose faith.",
	author:"Steve Jobs"
},{
	quote:"It's better to be a pirate than to join the Navy.",
	author:"Steve Jobs"
} ]

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

const todaysQuotes = quotesList[Math.floor(Math.random() * quotesList.length)];

quote.innerText = todaysQuotes.quote;
author.innerText = todaysQuotes.author;

 

위와 같이, 코드를 입력하고 브라우저를 실행하면 새로고침할 때마다 랜덤으로 quote와 author이 나오게됩니다.

---

출처

 

Math.random() - JavaScript | MDN

 

 

노마드 코더 Nomad Coders