바닐라 JS 공부_크롬 앱 만들기 실습

출처 : 노마드 코더 - 바닐라 JS 기초 클론코딩

 

prompt() : 사용자 값 입력 받기

parseInt() : 정수로 바꾸기

NaN : number가 아닌 것

console.dir() : element를 더 상세하게 보여줌

classList : class를 list처럼 관리할 수 있게 도와줌

• Document

- html과 js를 상호작용할 수 있도록 도와주는 객체

- html element를 가져올 수 있고, 변경할 수 있다.

- 사용법 :

document.getElementById() 

document.getElementsByClassName()

document.getElementsByTagName() [array로 반환]

 

• querySelector , qerySelectorAll

const title = document.querySelector(".hello h1");

=> CSS selector를 사용해서 검색할 수 있다.

 

[제목 색상 blue로 변경하기]

const title = document.querySelector("div.hello:first-child h1");

console.dir(title);

title.style.color = "blue";

 

[제목 클릭 이벤트]

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){

    console.log("title was clicked!");

}

title.addEventListener("click", handleTitleClick);

 

[마우스 위치 인식 이벤트]

const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){

    console.log("title was clicked!");

    title.style.color="blue"

}
function handleMouseEnter(){

    title.innerText = "Mouse is here!";

}
function handleMouseLeave(){

    title.innerText = "Mouse is gone!";

}

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

 

[다양한 이벤트 적용 예시]

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
    console.log("title was clicked!");
    h1.style.color="blue"
}
function handleMouseEnter(){
    h1.innerText = "Mouse is here!";
}
function handleMouseLeave(){
    h1.innerText = "Mouse is gone!";
}
function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
    alert("copier!");
}
function handleWindowOffline(){
    alert("SOS no WIFI");
}
function handleWindowOnline(){
    alert("ALL GOOOD");
}

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

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

 

[조건문을 통한 제목 색상 변경 이벤트]

const h1 = document.querySelector("div.hello:first-child h1");

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);

 

[classList 사용 예제 1]

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick);

 

[classList 사용 예제 2 - 예제 1과 동일한 결과]

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
    h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);