Quotes

먼저 quotes.js 파일을 만든 다음 array(배열)을 사용하여 명언들을 적고(10개쯤), html에 적용해주었다.

여러 개의 string으로 이루어진 object들을 , (콤마)로 구분해줘야 한다.

index.html에 적용

배경화면에서 랜덤 명언을 표시하도록 만들기 위해 우선 html에 div를 생성했다.

이제 id인 quote를 사용하여 quotes.js에서 div랑 span들을 가져오도록 할 건데,

글귀는 첫 번째 span 태그에, 작가명은 두 번째 span 태그에 나오도록 할 것이다.

여기까지 해놓고 이번에는 randomness(무작위성)에 대해 알아보자

 

먼저 Array 안에 있는 element에 접근하는 방법을 찾기 위해 Array에 있는 첫 번째 명언을 console 창에 출력해 보았다.

이를 통해 Array 안에 있는 모든 명언들을 출력하려면 0부터 9까지의 요소를 출력하는 function이 필요하다는 것을 알 수 있다.

우리는 이것을 위해 JS에서 제공하는 Math module을 사용할건데, 만약 PI 값이 필요하다면 이렇게 불러와서 사용할 수 있다.

math 모듈 사용

이것 외에도 Math는 많은 function들을 가지고 있으며 그 중 하나는 random()인데, random()은 0부터 1 사이의 랜덤한 숫자를 제공한다.

Math.random() 사용

하지만 우리는 0에서 10 사이의 숫자가 필요하기 때문에 그대로 사용하지 않고, Math.random() 에 10을 곱하여 0에서 10 사이의 숫자들을 얻을 것이다.

그런데 이렇게 얻는 값들은 소수점이 붙어있는 float(실수)형이기 때문에 이것을 int(정수)형으로 바꾸려면 3가지의 function을 사용할 수 있다.

 

그 중 하나는 숫자를 반올림 해주는 round()인데, 만약 1.1을 입력하면 결과 값을 1로 돌려주고, 1.5부터 1.9까지는 2를 돌려준다.

두 번째는 숫자를 올림 해주는 ceil()이며 말 그대로 숫자를 천장(ceil)까지 높여주는 것이라 1.1을 입력하면 2를 돌려주고 1.6을 입력해도 2를 돌려주고 1.0을 입력했을 때만 1을 돌려준다.

마지막은 숫자를 버림 해주는 floor()로 1.1을 입력하면 1을 돌려주고 1.8을 입력해도 1을 돌려준다.

 

이 세 가지 중 우리는 랜덤하게 얻은 숫자에 10을 곱하여 floor()를 사용할 것이다.

이런식으로 사용

이제 실행해보면 새로고침 할 때마다 console 창에 랜덤으로 명언을 출력하는 것을 확인할 수 있다.

첫 번째 출력

두 번째 출력

 

하지만 문제는 우리가 Array에서 딱 10개의 명언들을 가지고 있을 때만 동작한다는 것이다.

이를 해결하기 위해 명언의 개수에 상관없이 랜덤으로 출력하도록 Array의 길이를 사용하기로 했다.

[1, 2, 3]의 요소를 가진 number라는 Array가 있을 때, Array.length를 사용하면 Array의 길이를 알 수 있다.

 

그래서 JS에 *10 을 사용하는 대신

*10 을 사용

quotes.length를 사용하도록 코드를 수정했다.

quotes.length를 사용

이제 이 코드를 todaysQuote라는 변수를 생성하여 저장해줬다.

변수에 코드를 저장

마지막으로 명언과 작가를 화면에 보이게 만들면 되는데, todaysQuote가 quote와 author 두 가지를 가지고 있기 때문에

배열의 요소 안에 quote와 author 두 가지가 존재

각각 innerText를 넣어주면 된다.

 

이제 페이지를 실행 해 보면 화면에 명언이 랜덤으로 출력되는 것을 확인할 수 있다.

첫 번째 화면

 

두 번째 화면