노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#6.0 ~ #6.2)

#6.0 Quotes

Math.random() -> 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환한다. 

여기에 곱하기 10을 해주면 0 이상 10 미만의 랜덤한 숫자가 나온다. 근데 숫자가 너무 난잡해서 보통 정수로 얻고 싶다면 

Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다. 이러한 것들을 사용한다. 근데 예를 들어서

const animal = ["dog","cat","rabbit"] 

const animal = quotes[Math.floor(Math.random() * 3)];

이런식으로 해도 좋지만 배열에 개수가 늘어나거나 줄어들때마다 곱하기 한 숫자를 일일히 바꿔줘야 하는

수고로움이 있다.

이때는 length라는 것을 사용해서 배열에 길이을 곱해주면 배열에 개수가 늘어나거나 줄어도 일일히 안바꿔줘도 된다.

여기서는 3 대신 animal.length 라고 바꿔주면 끝 

#6.1 Background

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있는데 이 때 .createElement()를 사용한다.

const bgImage = document.createElement('img');

html에 img 태그를 생성하는것과 동일한 기능을 한다.

bgImage.src = `img/파일이름`;

위에 코드는 html에서 <img src="img/파일이름"> 과 같은 기능을 하는것이다. 단지 JS에서 한다는 차이일뿐 

Node.appendChild() -> 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

document.body.appendChild(bgImage);

이런식으로 코드를 쓰면 body 태그 가장 마지막에 저 img 태그가 온다.