[miniP] JS 실습(배경이미지 바꾸기)

mokyoungg·2020년 4월 5일
0

노마드코더 초보자를 위한 바닐라 자바스크립트
https://www.youtube.com/watch?v=5fAMu2ORvDA&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK&index=30

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

const IMG_NUMBER = 3;

function handleImgLoad() {
  console.log("finished loading");
}

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

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


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

init();

함수 genRandom의 내부 코드로 변수 number의 값은
Math.floor(Math.random() * IMG_NUMBER)으로 설정하였다.
그리고 변수의 값을 return 하였다.
(아직도 왜 return 을 하는지 모르겠다.)

페이지를 새로 고침할때 마다 새로운 이미지가 랜덤으로 나와야하기 때문에
Math.random()을 썼고 여기에 내가 사용할 이미지의 수(3)을 곱하였다.
Math.random()으로 인하여 소숫값이 나오기에 math.floor로 인하여 0, 1, 2의 값이 나올 것이다.

  • Math.random() : 0 이상 1 미만의 부동소숫점 의사 난수
    이 함수는 0이상 1미만의 구간에서 근사적으로 균일한 부동소숫점 의사난수를 반환하며,
    이 값은 사용자가 원하는 범위로 변형할 수 있다. 난수 생성 알고리즘에 사용되는 초기값은
    구현체가 선택하며, 사용자가 선택하거나 초기화 할 수 없다.

  • Math.floor() : 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.(반내림)

다음으로 함수 paintImage를 만들고 내부 코드로 image 변수의 값으로 new Image() 줬는데 왜 이걸 줬는지 이해가 가지 않는다.
다음으로 이미지의 소스는 $(imgNumber + 1}.jpg 로 지정하였다.

왜 imgNumber 일까. 이거 어디서 나왔을까. 뒤에 +1이 붙는 이유는 알겠는데
imgNumber는 어디서 튀어나왔을까. paintImage의 인수?매개변수?의 값으로 imgNumber는 왜 나왔을까.

body.appenChild(image); 는 이미지를 앞서 선언한 변수 body 즉, index파일의 body부분의 마지막 부분에 위치하게 만들 것이다.

  • Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참고하고 있다면
    appenChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다.
    (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)

이후 이 image에 bgImage 라는 이름으로 클래스를 만들었다.(사실 잘 모르겠다.)

아무튼 이렇게 해서 페이지를 새로고침할때마다 이미지가 바뀐다는데
실행은 되지만 아무것도 안 보고 다시 만들라고 하면 못 만들 것 같다.
이번에 만든 코드(시계만들기, 색바꾸기, 이미지바꾸기)는 영상을 보고 따라만들었다. 공부를 안해도 눈이랑 귀랑 손가락있으면 누구나 만들수있다.

이번주부터 자바스크립트를 공부했는데 실패했다.
뭘 공부한걸까

profile
생경하다.

0개의 댓글