• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

질문있습니다

21.04.19 11:49 작성 조회수 119

0

1.window.onload = function() {

 2. let h1 = document.getElementsByTagName("h1")[0]

 2.let cursor_item = document.getElementsByClassName("cursor_item")[0]

3.window.addEventListener("mouseover", mouseFunc, false);

4.function mouseFunc(e) {

  5.h1.innerHTML = " x: "+  e.clientX  + " y :" + e.clientY;

  6.cursor_item.style.transform = "translate("+e.clientX + "px," + e.clientY + "px)";

  7.console.log(e.clientX, e.clientY);

  }

}

이었을 때 

1.윈도우가 나타났을때 어떠한 동작을 해라

2.동작을 할 애들을 불러주려고 데이터값을 할당해주고

3.윈도우 안에서 마우스를 움직일 시 mouseFunc를  어떻게 동작하게 해라

4.function mouseFunc(e)로 임의로 이름을 설정해서 매개

변수로 만들고  동작하게할 애들 할당된 데이터 h1과 커서를 

이렇게 해라

5.

6.

7.단순히 잘 되는지 안되는지 콘솔창을 통해 체크

1 ~ 4번대로 제가 나름 해석했는데 이런 알고리즘으로 

해석해도 되나요?

그리고 5 ~ 6은 어떻게 해석해야하나요..?

답변 3

·

답변을 작성해보세요.

0

네 대략 맞습니다.

1.화면이 로드 되었다 (이제 오브젝트를 사용할 수 있는 준비가 되었다)

2.동작을 할 애들을 각각 변수에 할당

3.윈도우 안에서 마우스를 움직일 시 mouseFunc를  실행

4.function mouseFunc(e) <- 함수명은 임의로. e는 마우스 클릭 및 마우스 무브의 값

console.log(e)를 찍어서 확인해보세요.

0

5~ 7는 이해했습니다 

제가 이해한 1~4 까지과정은 저렇개 해석해도 상관없는것이지요??

0

  5.h1.innerHTML = " x: "+  e.clientX  + " y :" + e.clientY; <- h1에 좌표 숫자로 표시. innerText 로 해도 됩니다.

  6.cursor_item.style.transform = "translate("+e.clientX + "px," + e.clientY + "px)"; <- cursor_item 의 style중 transform 속성을 변화시켜주는 겁니다. 마우스 위치값으로. 

  7.console.log(e.clientX, e.clientY); <- f12 눌러서 개발자 도구에서 확인