[JavaScript] JavaScript_04

1. Event

: 웹사이트에서 발생하는 모든 동작

• 이벤트 함수를 정의할 때마다 JavaScript는 event 객체를 자동적으로 함수에 주입

// 이벤트 발생 시 함수 호출
​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.addEventListner("eventName", "functionName");    // 창 전체에서 발생하는 모든 이벤트 감지
element.addEventListner("eventName", "functionName");    // 해당 요소에 발생하는 이벤트만 감지
​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

const title = document.querySelector("#title");

function handleResize(){
    console.log("I have been resized");
};

window.addEventListener("resize", handleResize);


function handleOnline(){
    console.log("Welcome back")
}

function handleOffline(){
    console.log("Bye bye")
}

window.addEventListener("online", handleOnline);    // 네트워크가 연결될 때
window.addEventListener("offline", handleOffline);    // 네트워크가 끊길 때

• window.addEventListener("resize", handleResize); : resize 이벤트가 발생했을 때 함수가 호출됨
• window.addEventListener("resize", handleResize()); : document가 로드되자마자 자동적으로 호출됨

 

2. if - else

if (condition){
    block
} else if (condition){
    block
} else {
    block
}

const age = prompt("How old are you?")  // 사용자에게 입력값을 받는 함수(오래된 것이므로 사용권장X)

if (age >= 19 && age <= 22){
    console.log("You can drink but you should not");
} else if (age > 22) {
    console.log("Go ahead");
} else {
    console.log("Too young");
}

• == : 값이 같은지만 비교 / === : 값이 같고, 데이터의 타입 및 형식이 같은지까지 비교
• && : and
• ||: or

 

3. Practice 1

const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#0984e3";

function handleMouseenter(){
    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("mouseenter", handleMouseenter);
}

init()

 

4. Practice 2

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);

    if (hasClass){
        title.classList.remove(CLICKED_CLASS);
    } else {
        title.classList.add(CLICKED_CLASS);
    }
}

function handleClick2(){
    title.classList.toggle(CLICKED_CLASS);
}

function init(){    // 초기화 함수
    title.addEventListener("click", handleClick2);
}

init()

<classList>

: HTML5부터 class 추가, 삭제 등 class 속성값을 쉽게 조작하기 위해 추가된 프로퍼티

• add(string) : 지정한 클래스 값을 추가
  • 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시함
• remove(string) : 지정한 클래스 값을 제거
• toggle(string)
  • 하나의 인수만 있을 때: 지정한 클래스가 존재한다면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하 고 true를 반환.
  • 두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거
• contains(string) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인
• replace(old, new) : 존재하는 클래스를 새로운 클래스로 교체

 

---

 

참고 자료

• https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

• https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList