인프런 커뮤니티 질문&답변
작성한 질문수
질문있습니다
작성
·
174
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
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 눌러서 개발자 도구에서 확인