📌 Math.random() 활용하기
랜덤으로 명언이 나오게 하려면 이 명언을 담아줄 그릇, Array가 필요하다.
JS
const quotes = [
{
quote: "Love is, above all else, the gift of oneself.",
author: "Jean Anouilh",
},
{
quote: "Life is either a daring adventure or nothing.",
author: "Helen Keller",
},
{
quote: "Words without actions are the assassins of idealism.",
author: "Herbert Hoover",
},
{
quote: "Self-confidence is the first requisite to great undertakings.",
author: "Samuel Johnson",
},
{
quote: "It's lack of faith that makes people afraid of meeting challenges, and I believe in myself.",
author: "Muhammad Ali",
},
{
quote: "The future is here. It's just not widely distributed yet.",
author: "William Gibson",
},
{
quote: "The wisest men follow their own direction.",
author: "Euripides",
},
{
quote: "Success is the ability to go from one failure to another with no loss of enthusiasm.",
author: "Sir Winston Churchill",
},
{
quote: "Better a diamond with a flaw than a pebble without.",
author: "Confucius",
},
{
quote:"What makes the engine go? Desire, desire, desire.",
author:"Stanley Kunitz",
}
]
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
HTML
<div id="quote">
<span></span>
<span></span>
</div>
첫 번째 span에는 quote가, 두 번째 span에는 author가 들어갈 수 있도록 JS에서 지정해준다.
랜덤으로 출력하게 하려면 어떻게 해야 할까?Math.random()을 활용한다.이 친구는 0과 1 사이의 수를 랜덤으로 출력해준다.0.32748429 0.4818 뭐 이런 식으로...
우리는 10개가 있고, 1부터 10까지 랜덤의 숫자를 뽑아야 한다.저렇게 나오는 놈에게 10을 곱해주면 몇이 나올까?3.274 ... 4.818... 뭐 이런 식으로 나올 거다.우리는 3, 4와 같이 딱 떨어진 정수를 원하기 때문에 이 소수점을 없애줘야 한다.정확히는 소수점을 버려줘야 하는데, 이 소수점을 버려주기 위해 floor()를 사용한다.
floor() : 마루까지 내려준다 -> 내림ceil() : 천장까지 올려준다 -> 올림round() : 반올림
만약 ceil을 쓰면? 0.1209 의 경우 1.2로 2가 나오기 때문에 1이 절대 나올 수가 없게 된다.
해서 최종적으로 사용할 명령어는 Math.floor(Math.random() * 10) 이다.랜덤으로 1, 4, 6 이런 식으로 숫자가 나오는데 이 숫자가 어디에 나와야 명언이 잘 출력될까?바로 Array의 index에 이 숫자가 들어가야 한다.그래야 Array의 1번째 명언, 9번째 명언 이런 식으로 랜덤하게 나올 수 있기 때문이다.
그런데 한 번 더 생각해보면, 왜 10을 곱해주었을까?우리의 명언 개수가 10개이기 때문인데, 만약 하나 더 추가되면? 다섯 개가 추가 되면?
10개를 다르게 표현하자면, Array의 length라고 할 수 있다.
quotes[Math.floor(Math.random() * quotes.length)]
이렇게 써주면 데이터가 변경되어도 로직을 일일이 손보지 않아도 된다.
📌 배경화면 랜덤 출력
랜덤을 활용해서 배경화면이 랜덤으로 출력되게 해보자.
동일하게 이미지를 담아줄 Array를 만든다.
const images = ["1.jpg", "2.jpg", "3.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
console.log(chosenImage);
이렇게 하면 console에 1.jpg, 2.jpg 같이 이미지의 이름이 랜덤으로 출력된다.우리가 원하는 것은 콘솔에 이름이 출력되는 게 아니라 페이지의 배경으로 가져와지는 것이다.
이를 위해 JS에서 HTML의 이미지 요소를 만들고 추가해본다.
const images = ["1.jpg", "2.jpg", "3.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
document에 img 속성의 bgImage를 만들었다.
이놈의 소스 출처는 내가 만든 img라는 폴더 안에 있고, 여기에서 랜덤으로 이미지가 뽑혀 나올 것이다.
랜덤은 우리가 chosenImage로 이미 정해두었기 때문에 `${}`으로 이어 붙여준다.
그리고 이렇게 만든 bgImage를 document body 부분에 만들어준다.
이 document.creatElement()와 appendChild()에 대해 한 번 더 짚고 넘어가자면,
해당 태그의 소스 경로를 입력하고 우리가 create한 태그를 body에 append 시키는 개념이다.
아무튼 이러면 이미지가 출력되는데 배경화면으로 꽉 채우고 싶다면 CSS를 만져주면 된다.
img {
position:absolute;
width:100%;
height:100%;
left: 0px;
top: 0px;
right:0px;
bottom:0px;
z-index: -1; #text의 z-index보다 낮으면 뒷배경으로 설정됨
opacity:80%;
}
어떤 분이 댓글로 남겨주셔서 그대로 활용해보았다.
position absolute가 뭔지 검색해봤는데, 위치를 잡아주는 CSS 기능 같은 거였다.
가장 가까운 상위 요소를 기준으로 위치를 잡는데, 지금처럼 상위 요소가 없을 경우 html을 기준으로 설정된다.
즉 홈페이지를 기준으로 설정했으며 높이, 너비 모두 100%로 화면을 꽉 채워주었다.
그리고 배경으로(하나 뒤로 가는) 설정하려면 z-index가 -1이어야 한다.
숫자가 낮을 수록 뒤에 배치된다고 한다. 마지막으로 투명도를 80으로 주어 은은하게 깔아주었다.
📌 9일차 과제
해당 버튼을 누르면 랜덤의 컬러가 나온다.
Array에 여러 컬러 담기 > 랜덤으로 출력할 컬러 뽑기 (Math.random() * Array 길이)를 인덱스로 사용
버튼을 누르면 이벤트가 작동되도록 JS 깔아주면 끝이다.
처음에 function 밖에 색상 변수를 선언해서 한 번 클릭하고 나면 반응이 없는 죽은 페이지가 되었는데
다시 생각하고 로직을 수정하니 정상적으로 잘 되었다.
'👋🏻 JavaScript > 💭 노마드코더 바닐라JS' 카테고리의 다른 글
[노마드코더 바닐라JS로 크롬 앱 만들기] #8.0 ~ #8.2 (0) | 2023.03.10 |
---|---|
[노마드코더 바닐라JS로 크롬 앱 만들기] #7.0 ~ #7.8 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #5.0 ~ #5.3 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #4.0 ~ #4.7 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #3.0 ~ #3.8 (0) | 2023.03.07 |