JS Math. / linear-gradient()

TIL 22.02.17

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;

배열 quotes에 있는 값을 랜덤으로 출력하는 코드

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

.length는 배열의 길이를 반환한다. quotes.length = 10 일때
Math.random() * quotes.length 는 0~10 사이 값을 랜덤으로 반환한다.
배열 안의 값들을 랜덤으로 호출하고 싶다면Math.random() * quotes.length을 넣어주면 된다.

Math.floor() 사용이유
Math.random()은 소수점 까지 반환하기 때문에 소수점을 내림, 올림, 반올림 으로 없애줄 함수를 함께 사용해 준다. 위 코드의 경우 길이가 10인 배열을 사용하기 때문에 마지막 값은 quotes[9]으로 호출해야 한다. 때문에 10이 나오지 않도록 내림 함수를 써준다.

Math.random() 0~1의 랜덤 수를 반환한다. (1은 포함되지 않는다, 0 ~ 0.999999...)
Math.floor() 내림 ex)9.99 = 9
Math.ceil() 올림
Math.round() 반올림

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

같은 랜덤 값을 사용하려면 변수에 저장하고 변수를 사용하면 된다.

function changeBackgroundColor() {
    body.style.background = `linear-gradient(${
      colors[Math.floor(Math.random() * colors.length)]
    }, ${colors[Math.floor(Math.random() * colors.length)]})`;
  }

linear-gradient()
원하는 색을 조합해주는 함수
linear-gradient() MDN 사용법 설명