[Vanilla Js] Js on the browser

#2 Welcome to JavaScript

 

array.push('hi');

 

➣ array 마지막에 추가

 

• typeof

value의 type 알 수 있는 함수

ex) (type number)

 

• parseInt()

string을 number로 변환 

ex) parseInt("15") -> 15

 

• isNaN() 

number인지 아닌지 boolean으로 알려주는 함수

 

---

#3 JavaScript on the browser

 

• getElementById()

  document.getElementById("name");

  → html에서 id이름이 name인 element 찾아준다

 

• getElementByClassName()

많은 element를 한 번에 가지고 와야 하는 경우 사용

 

 

• querySelector()

→ css selector 방식,  첫 번째 element만 가져온다 !

document.querySelector(".title h1");

 

➣ title의 class의 h1 태그 가져온다 

document.querySelector("#title h1");

 

➣ title의 id의 h1 태그 가져온다 

 

• querySelectorAll()

해당되는 모든 element 불러올 때 사용

 

< getElementBy~ , querySelector 차이 >

 

getElementBy~ 

- 해당되는 모든 element 불러온다

- 하위 요소 검색 불가능 

 

querySelector

- 단 하나의 리턴값만 가져온다 

- 하위 요소까지 검색 가능 

 

 

 

• addEventListener()

title.addEventListener("click", handleTitleClick);

 

➣ addEventListener("event 이름", event 발생 시 호출할 function);

※ handleTitleClick() → 함수가 즉시 실행 , 반환값이 이벤트 리스너로 전달

   handleTitleClick  → 함수 자체가 이벤트 리스너로 전달되어 이벤트가 발생할 때마다 호출

 

 

 

EventListener practice

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

function handleTitleClick(){
    title.style.color = "blue";
}

function handleMouseEnter(){
    title.style.color = "red";
}

function handleWindowResize(){
    document.body.style. backgroundColor ="tomato";
}

function handleWindowCopy(){
    alert ("copier!");
}
function handleWindowOffline(){ 
    alert("SOS on WIFI");
}

function handleWindowOnline(){
    alert ("All GOOD");
}

title.addEventListener ("click", handleTitleClick); 
title.addEventListener ("mouseenter", handleMouseEnter);
title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;

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

---

 

< html에서 설정한 class 이름이 바뀌는 상황 >

 function handleTitleClick(){
    const clickedClass = "clicked";
    if(title.className === clickedClass){
        title.className = "";
    } else{
        title.className = clickedClass;
    }
}

 

➣ html에서 title class를 설정한 경우 js에서 class를 재설정하며 이름이 바뀐다 

 

< classList 사용 >

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

 

➣ title 요소에 clicked 클래스가 있는지 확인

clicked 클래스가 있으면 제거(title.classList.remove();)

없으면 추가 (title.classList.add();)

∴ 기존의 클래스는 변경되지 않고 유지

 

< toggle 사용 >

function handleTitleClick(){
    title.classList.toggle("clicked");
}

 

➣ 클래스의 존재 여부 확인 후 추가, 제거해 준다

클래스의 존재 여부 직접 확인하지 않아도 됨