[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - bg.js(배경 랜덤으로 설정하기)

문세미·2020년 4월 27일
0
post-thumbnail

bg.js - 배경 랜덤으로 설정하기 !

👉 html 코드

필요없음

👉 js 코드

const body = document.querySelector("body");

const IMG_NUMBER = 3;

function paintImage(imgNumber){
    const image = new Image;
    image.src = `images/${imgNumber + 1}.jpg`;
    image.classList.add("bgImage");
    body.appendChild(image);
};

function genRandom(){
    const number = Math.floor(Math.random() * IMG_NUMBER);
    return number;
};

function init(){
    const randomNumber = genRandom();
    paintImage(randomNumber);
};

init();

👉 내가 코드를 작성한 순서
1. 사용 할 객체를 변수로 선언한다.
2. init 함수를 만든다.

function init(){

};

init()
  1. 작동함수들을 만든다.

✍ genRandom()

Math : 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이며 함수 객체가 아니다.

Math.random() : 임의의 수 발생
Math.random() * n : 0 ~ n 사이의 임의의 수 발생
Math.floor(~) : 버림 함수
Math.ceiling(~) : 올림 함수

function genRandom(){
    const number = Math.floor(Math.random() * IMG_NUMBER);
    return number;
};

IMG_NUMBER = 3이기에 0, 1, 2 숫자를 랜덤으로 반환한다.

profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.

0개의 댓글