Javascript: to do list

11 Event 다양한 변화에 반응하게 만들기

From.h 2023. 5. 31. 14:43
728x90
반응형

 

 

여러가지 변화에 대한 반응

 

 

 

 

지금까지 event를 반영한 대상은 text였습니다.

본문에 있는 title이라는 요소를 js에서 가져와서 어떤 function을 적용하는 방식이죠.

이번에 window라는 속성을 변경시켜 볼게요. 

윈도는 웹브라우저 창이라고 생각하면 될 것 같습니다.

 

window에 해당하는 event들은 어떤 게 있을까요?

google에서 "window mdn"이라고 검색하면 다음처럼 확인할 수 있고, 다양한 함수가 document 에서처럼 많이 존재한다는 걸 볼 수 있습니다.

 

아래로 계속 내리다 보면 resize라는 걸 찾을 수 있을 겁니다.

리사이즈란, 브라우저 창의 크기를 조절한다는 뜻이죠. 그래서 뭘 할 거냐면

창의 사이즈를 직접 조절하게 되면 창의 배경색이 바뀌는 것을 해볼 겁니다.

 

 

우리가 이전 장에서 사용하던 html과 js를 그대로 사용하면서, 다음과 같이 추가해 줍니다.

resize 할 때 행해질 function을 정해줍니다.

여기서 그 내용으로 작성해 주는 것을 유심히 봐주셔야 합니다.

 

function handleWindowResize(){
    console.log("Window was resized");
    document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);
 

document 안에 있는 body를 특정해 주고, 그 안에 style 중 bg color를 가져온다는 말인데,

이전의 코드들은 title이라는 변수를 지정했고, 그 title이라는 것은 document.querySelector를 이용해서 가져온다는 것을 명명했기에 html에서 element를 간접적으로 가져올 수 있었던 겁니다.

 

지금은 그 title이라는 것의 element를 가져올 것이 아니라, 

html에 지정되어있지 않은 무언가 element를 지정하거나 변경하는 것을 하려고 하는 것이기 때문에

직접 다시 가져올 것을 지정해줘야 하는 것입니다.

배경 색을 바꾸려면, 도큐먼트로부터 다시 가져오는 과정이 필요한 것이죠.

그래서

 

"document.body.style.background"라는 구문을 작성해 주는 것입니다. 

 

그리고 그 bg Color를 tomato로 바꿔라라고 기능을 정의한 것이죠.

이제 브라우저 창의 크기를 마우스로 잡고 움직여 조절해 보면, 다음과 같이 색이 바뀌고, 콘솔에 메시지도 출력해 주는 걸 확인할 수 있습니다.

 

 

 

 

 

몇 가지 더 해보겠습니다. 각각의 경고메시지를 날려주는 것을 해보려고 합니다.

 

copy : 창에서 뭔가 복사를 시도할 때  >

offline : 오프라인일 때 (인터넷이 끊겼을 때  >

online : 다시 온라인일 때 (인터넷이 연결되었을 때) >

 

아래와 같이 3가지 function과  window. 구문을 작성했습니다.

PC로 테스트 중인데, 네트워크 사용 중지가 되질 않아, 실제로 offline, online테스트는 생략합니다.

function handleWindowCopy(){
    console.log("Window was copied");
    alert("Denied your try to copy")
}

function handleWindowOffline(){
    console.log("Network was off");
    alert("Network is off, Check your internet connetor")
}

function handleWindowOnline(){
    console.log("Network was on");
    alert("Network is on, Status is good")
}


window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

 

 

 

이렇게 me라는 text를 copy 하려고 시도하니, alert이 발생되고, 콘솔에도 메시지가 출력되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

BR. h

 

 

 

 

728x90
반응형