Notice
Recent Posts
Recent Comments
Link
하루 하루
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 9 본문
2-4 Events and event handlers
* 브라우저 객체 모델(BOM: browser object model )
JS 로 브라우저의 정보에 접근하거나 기능을 제어할 때 사용하는 객체 모델
-> Window 객체
function handleResize () {
console.log( " I have been resized");
}
window.addEventListener ( "resize" , handleResize );
window 창이 resize 되면 handleResize 함수가 호출된다.
주의할 점은
window.addEventListener ( "resize" , handleResize() );와 같이 함수와 같이 ( )를 쓰게 되면, resize를 하지 않아도 자동으로 함수가 호출이 된다.
2-5 첫번째 조건문!! If, else, and, or
2-6 DOM If else Function practice
const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52,73,94)";
const OTHER_COLOR = "#7f8c8d";
function handleClick(){
const currentColor = title.style.color;
if(currentColor === BASE_COLOR){
title.style.color = OTHER_COLOR;
}else{
title.style.color = BASE_COLOR;
}
}
function init (){
title.style.color = BASE_COLOR ;
title.addEventListener("click",handleClick);
}
init();이벤트 참조 하기
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
function handleOffline(){
console.log("off");
}
window.addEventListener("offline",handleOffline);
//wifi 꺼지면 off 출력 2-7 DOM If else Function practice part Two
const title = document.querySelector("#title");
const CLIKED_CLASS = "clicked";
//classList 는 메소드를 가진다.
// toggle -> 클래스가 있는지 체크해서 있으면 add 없으면 remove
function handleClick(){
title.classList.toggle(CLIKED_CLASS);
}
function init(){
title.addEventListener("click",handleClick);
}
init();https://developer.mozilla.org/ko/docs/Web/API/Element/classList
Comments