[JavaScript] JavaScript on the Browser

HTML은 접착제와 같음: CSS, JavaScript를 가져옴

 

1. document에서 elements를 가지고 올 수 있다

2. document의 항목들을 변경할 수 있다 

 

JavaScript에서 HTML 항목을 가져와 사용하는 방법

 

querySelector

: HTML 문서에서 특정한 CSS selector에 해당하는 첫 번째 요소를 가져오는 메서드 

  CSS selector를 검색하여 가져온다 

 

Event Listener

: 특정 이벤트(ex. 버튼을 클릭)가 발생할 때 실행되는 함수 

 

1) Find the element

2) Listen for the event 

3) React to the event 

const title = document.querySelector("div.hello:first-child h1");  
// div.hello의 첫번째 자식요소인 h1을 선택(h1이 첫번째 자식요소가 아닐 경우 null 반환)

function handleTitleClick(){
    title.innerText = "Mouse is clicked!";
    title.style.color ="blue";  // 대개 스타일은 CSS를 통해 변경
};

function handleMouseEnter(){
    title.innerText = "Mouse is here!";
    title.style.color ="red";
}

function handleMouseLeave(){
    title.innerText = "Mouse is gone!";
    title.style.color = "pink";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

 

 

if ~ else 구문

const h1 = document.querySelector("div.hello:first-child h1");  
// div.hello의 첫번째 자식요소인 h1을 선택(h1이 첫번째 자식요소가 아닐 경우 null 반환)

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if (currentColor === "blue"){
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

위에서는 연습용으로 app.js에서 작업했지만

실제로 스타일 관련 내용은 style.css 에서 작업한다 

 

 

toggle

classList 객체에서 사용되는 메서드 

요소의 class를 추가하거나 제거하는 기능 

 - 특정 클래스가 이미 존재하면 제거 / 존재하지 않으면 추가