[javaScript] 브라우저와의 연동 사용법

Document

 

document는 브라우저에 존재하는 object 이다.

 

console 창에서 document를 통해 html 접근 가능하다.

document.title = "임의의 문자열" 을 엔터치면 해당 문자열로 title 변경 가능

 

js 에서 document로 html 변경이 가능하다.

 

---

getElementBy

getElementById 외에도 (id는 한개만 지정 가능하므로, 1개 반환)

document.getElementsByClassName(파라미터)

document.getElementsByTagName(파라미터) 등이 있음.

 

위의 함수들은 값의 개수만큼 array형태로 반환

 

---

queryselector

queryselector는 특정 name, id, class를 제한하지 않고 css 선택자를 사용하여 요소를 찾는다.

querySelector(#id) => id 값 id를 가진 요소를 찾는다.
querySelector(.class) => class 값 class를 가진 요소를 찾는다.

queryselectorAll

사용방법은 querySelector과 동일하며 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다.

 

/ querySelector
// 찾은 element의 첫번째값 반환
const title = document.querySelector(".hello h1");

// querySelectorAll
// 전체 반환 array 형태
const titles = document.querySelectorAll(".hello h1");

 

---

3.3 EVENTS

 

(추가 설명) console.dir 로 출력해서 property를 보면 on이 붙어있는 건 Event 함수들이다.  (사용할 때 on 없이 사용)

 

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

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

title.addEventListener("click", handleTitleClick); //title을 click하는 것을 listen 할 것이다.

//click 하면 아래함수가 동작하길 원함, js가 대신 실행시켜주길 바람 그래서 handle~함수에 () 사용안함

-eventsListener :  js에게 무슨 event를 listen하고 싶은 지 알려줘야 한다.

-title.add

 

>>

클릭

---

3.4 EVENTS PART TWO 

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

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

//mouseenter: 특정 부분에 마우스 포인터가 집입하면 event 발생하게 된다.
function handleMosueEnter() {
    //console.log("Mouse is here");
    title.innerText = "Mouse is here";
}

//mouseleave: 특정 부분에 마우스 포인터가 떠나면 event 발생하게 된다.
function handleMosueLeave() {
    //console.log("Mouse is Leave");
    title.innerText = "Mouse is gone";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter",  handleMosueEnter); //mouseenter
title.addEventListener("mouseleave",  handleMosueLeave); //mouseleave

---

More Events

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

//crtl+c 동작하면 event 발생, alert 뜬다. 
function handleWindowCopy() {
    alert("cheatiing!!!!!!!!1");
}

//wifi에 연결되어 있지 않다면 event 발생 
function handleWindowOffLine() {
    alert("SOS NO WIFI!");
}

//wifi에 연결되어 있지 않다면 event 발생 
function handleWindowOnLine() {
    alert("Good WIFI!");
}

window.addEventListener("resize", handleWindowResize); //resize
window.addEventListener("copy", handleWindowCopy); //copy


window.addEventListener("offline", handleWindowOffLine); //offline

window.addEventListener("online", handleWindowOnLine); //online

>>

wifi 연결 끊으면 event인 alert발생, 웹 색이 tomato로 바뀐 것도 확인 가능

---

CSS in javaScript

 

toggle 이용 

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

// event
function handleTitleClickV1(){
    const clickedClass = "clicked";
    if(h1.className === clickedClass){
        h1.className = "";
    }else {
        h1.className = clickedClass;
    }
}

// 기존에 있던 class이름은 지우지 않기
function handleTitleClickV2(){
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){ //class내에 있는지 확인 boolean타입 반환
        h1.classList.remove(clickedClass); // 해당 클래스 이름 지우기
    }else {
        h1.classList.add(clickedClass); // 해당 클래스 이름 추가하기
    }
}

// toggle 이용
function handleTitleClickV3(){
    const clickedClass = "clicked";
    h1.classList.toggle(clickedClass); // 있다면 지우고, 없으면 추가해줌
}

h1.addEventListener("click", handleTitleClickV3);

body {
    background-color: beige;
}

h1 {
    color : cornflowerblue;
    /* 색깔을 0.5s 걸쳐서 변경*/
    transition: color 0.5s ease-in-out;  
}

.clicked {
    color : tomato;
}

>>

클릭하면 0.5초 뒤에 바뀐다.

 

 

참조 노마드 코더