[JS] Math모듈로 랜덤으로 명언 생성하기 (+ random, round, ceil, floor)

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(6.0 Quotes)

---

momentum App

momentum 크롬앱에는 랜덤으로 명언과 배경화면이 나온다.

이번엔  랜덤 명언을 구현해보도록 하자

 

명언 출처 - 네이버 명언 정보

js 파일을 새로 만들고 명언이 들어있는 Array를 생성한다.

먼저 잊지말고 index.html에서도 js파일을 import 할 수 있도록 연결해준다.

그리고 <div>와 <span>태그를 이용해 랜덤 명언이 생성될 자리를 만들어준다.

div id는 quote로 하고 span은 명언과 작가가 들어갈 수 있게 2개를 만든다.

 

document.querySelector로 id가 quote인 element의 첫번째 span과 마지막 span을 가져오면 설정은 끝난다.

(실행 후 console에 error 표시가 없다면 잘되어가고 있다.)

 

---

 

  randomness(무작위성) 

이 프로그램은 Array이에 있는 명언을 랜덤으로 화면에 표시해야 한다.

그러기위해서는 첫번째로 Array 안 elements에 어떻게 접근하느냐가 관건이다.

 

console.log(quotes[0])

먼저  Array에 있는 첫번째 명언을 출력해보자.

+

console.log(quotes[9])

마지막 명언 출력

 

 

효율적인 사용을 위해 Array의 0~9번째의 접근할 수 있는 function을 만들어보자.

js의 Math 모듈을 사용해서 만들어 볼텐데 Math 모듈중에는 random()이라는 기능이 있다.

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

하지만 우리는 0~9의 숫자가 필요하기 때문에 이건 쓸모가 없다.

 

하.지.만.

10을 곱해준다면 0~9까지의 숫자를 얻을 수 있다.

ez

 

우리한테 소수점 뒤의 숫자는 필요없기 때문에 없애주도록 하자.

이걸위해 3가지의 기능을 이용할 수 있다.

 

첫번째로 round이다.  일반적인 반올림을 해준다.

 

두번째로 ceil이다. 소수점 뒤 0을 제외하고 무조건 올린다.

 

 

세번째로 floor이다. 무조건 내린다.

 

 

이 중 세번째인 floor를 이용하여 프로그램을 제작하는게 가장 적합할 것 같다.

랜덤하게 얻은 숫자에 10을 곱해서 floor하면 0~9까지의 랜덤한 숫자를 얻을 수 있다.

 

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

코드를 이렇게 변경해준다면?

랜덤한 숫자에 해당되는 명언과 작가가 잘 나타나게 된다.

 

 

한가지 문제는 이건 명언이 딱 10개만 있을때 동작하는 코드이다.

명언이 추가되거나 훨씬 많은 명언이 들어있는 프로그램에서는 정상적으로 작동하지 않을것이다.

이런 문제를 대비하여 Array의 길이를 알아내는 것이 편리할 것이다.

 

Array의 길이는 length를 이용하면 아주 손쉽게 알수있다.

 

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

코드를 10 → quotes.length로 변경해준다.

 

잘 동작한다!

 

---

이제 코드를 정리하여 화면에 띄워서 마무리해보자.

quote와 author에 innerText를 넣어준다.

 

새로고침을 할때마다 명언이 랜덤으로 잘 생성된다.(편안-!)

---

다음엔 랜덤으로 배경화면 바꾸기를 공부할 예정이다!끝.