[노마드코더 바닐라JS로 크롬 앱 만들기] #6.0 ~ #6.3

📌 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 밖에 색상 변수를 선언해서 한 번 클릭하고 나면 반응이 없는 죽은 페이지가 되었는데

다시 생각하고 로직을 수정하니 정상적으로 잘 되었다. 

 

 

---

 

 

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders