자바기반의 웹&앱 응용 SW개발자 양성과정 55일차 -86

콜백 함수란?

 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다.

 

 

js에서 css문법을 지원하지 않으므로

box.style.background-color = colorInput.value; 로 작성 시 오류가 발생한다.

 

해결방법 1 

box.style ["background-color"] = colorInput.value;

해결방법 2

box.style.backgroundColor = colorInput.value;

 

HTML 상에서 script태그 위치

script태그를 body상단에 위치시켰을 때 오류가 발생한다.

그 이유는 실행 순서에 있다. 프로그램의 절차는 위에서 아래로 읽어 가기 때문에

자바스크립트 코드에서 document의 태그를 객체로 만들 수가 없다.

 

자바스크립트 코드 전체를 load라는 함수 안에 넣어놓고 window 객체에 위임한 다음

window객체가 전부 로드 됐을 때 스크립트 코드가 실행되도록 할 수 있다.

문서인 document만 로드됬을때 스크립트 코드를 실행시키면 안 되는데

그 이유는 css나 이미지들도 로드가 되어야 하기 때문이다.

그렇기에 전부 포함된 window가 로드되었을 때 스크립트 코드를 실행해야 한다.

window.onload = function(){
스크립트코드
}

 

위임 함수는 따로 이름을 선언할 필요 없이 직접적으로 위임해주면 된다.

이렇게 했을 때 장점은 전역 변수 없이 사용될 수 있기에 다른 스크립트 코드의 변수와 충돌될 수 없다.

 

 

``

backtick을 사용해 변수와 문자열을 더할 때 편하게 더할 수 있다.

  box1.style.width = `${value * 100}px`;

  box1.style.height = `${value * 100}px`;

 

 

 

선택한 document 객체의 클래스의 이름을 추가하는 방법은

 

classlist.add를 이용해 class를 추가해줄 수 있다.

window.addEventListener("load", function () {
  const s3 = document.querySelector("#s3");
  const container = s3.querySelector(".input-container");
  const start = container.querySelector("input:nth-child(1)");
  const spin = container.querySelector("input[name=spin]");
  const boxs = document.querySelectorAll(".box");

  // start.onclick = function () {
  //   alert("start");
  // };

  // spin.onclick = function () {
  //   alert("spin");
  // };

  start.addEventListener("click", function st() {
    boxs[0].classList.add("pose1");
    boxs[1].classList.add("pose2");
    boxs[2].classList.add("pose3");
  });
  spin.addEventListener("click", function sp() {
    alert("spin");
  });
});

 

지우는 것 또한 remove를 이용해 삭제해줄 수 있다.