노마드 코더 JS #3 | JavaScript on the browser

#3.0 The Document Object

document는 브라우저에 이미 있는 객체

HTML을 가리키는 객체다. 

자바스크립트 document 객체를 이용해서 html에 접근할 수 있다. (ex - Title)

document.title

접근할 뿐만 아니라 수정도 가능함

document.title

JavaScript는 이미 HTML에 연결되어있음. 특히 document 객체를 이용할 수 있음.

 

#3.1 HTML in JavaScript

document의 객체와 element를 가져오는 함수를 이용해서 html에 접근할 수 있다. 

        <h1 id="title">Grab me!</h1>

body에 Grab me라는 문구를 추가해주었다. 

JavaScript를 이용해서 이 h1 문구에 접근해보자. 

document.getElementById("title");
>> <h1 id=​"title">​Grab me!​</h1>​

app.js에서 작업해도 된다. 

const title = document.getElementById("title");
console.log(title);
console.dir(title);

html을 가져오는 걸 Javascript에서 작업할 수 있다. 

const title = document.getElementById("title");
title.innerText="got you";
console.log(title);
console.dir(title);

const title = document.getElementById("title");
title.innerText="got you";
console.log(title.id);
console.log(title.innerText);

 

#3.2 Searching for elements

Javascript에서 html에 접근하는 법을 배움

클래스에 접근하는 법

const title = document.getElementsByClassName("hello");
console.log(title);

 

html div 안에 있는 h1를 가져오고 싶다면?

        <div class="title">
            <h1>Title class h1</h1>
        </div>

const title = document.getElementsByTagName("h1");
console.log(title);

태그 이름을 이용해서 가져올 수도 있다. 

 

querySelector, querySelectorAll가 제일 좋음css와 같은 방식으로 요소에 접근하는 것

const title = document.querySelector(".title h1");
console.log(title);

거의 querySelector만 사용함첫번째 요소만 가져온다. 조건에 맞는 모든 것을 가져오기 위해서는 querySelectorAll을 사용해야 함

 

#3.3 Events

document는 HTML에서 app.js를 연결해두었기 때문에 가능한 것임

중!요!

querySelector가 최고

querySelectorAll

console.dir는 설명도 해준다. 

여기서 on으로 시작되는 게 굉장히 많음 on이 많다. 

그 각각의 event는 다 자바스크립트 object다. 

 

style도 h1 object의 property

<h1 style="color: blue;">Title class h1</h1>

const title = document.querySelector(".title h1");
title.style.color = "blue";
console.log(title);

JavaScript에서 하는 가장 중요한 일은 event를 감지하는 것이다.

enter를 누른다거나,

wifi 접속이 해제된다거나 하는 등

오늘은 click event부터

 

step 0. element에 접근한다. 

step 1. add event listener

const title = document.querySelector(".title h1");
title.style.color = "blue";
title.addEventListener("click");
console.log(title);

이제 클릭을 듣기 시작함

step 2. set action

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

function handleTitleClick(){
    console.log("Title was clicked!");
}

title.style.color = "blue";
title.addEventListener("click", handleTitleClick);

console.log(title);

function을 JavaScript에 넘겨주고, 

title을 클릭하면, JavaScript가 function을 실행해준다 -> 괄호 넣을 필요 없음

싱기방기 ㅎㅎ 버튼일 필요가 없다.

 

#3.4 Events part two

event 찾는 법은? 구글링 'h1 html element mdn'

Web API가 Javascript 관점의 html heading element이다. 

HTMLElement - Web API | MDN (mozilla.org)

 

아니면, console.dir 을 통해서 'on' 접미사 property를 찾으면 된다. 

onclick, oncopy 등등

 

mouse 이벤트를 감지해보자

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

function handleTitleClick(){
    title.style.color = "blue";
    console.log("Title was clicked!");
}

function handleMouseEnter(){
    title.style.color = "black";
    console.log("mouse was entered!");
}
function handleMouseLeave(){
    title.style.color = "red";
    title.innerText = "Mouse is gone";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

console.log(title);

오왕 신기행

but, style은 css에서 변경해주어야 함

이런 걸 고려하는 방법 다음에 배움

 

#3.5 More Events

window는 창을 말한다. 

event를 listening하는 다른 방법

addEventListender()를 이용하면 할 수 있다. 

 

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

addEventListener를 선호함. removeEventListener가 가능하기 때문이다.

 

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

function handleTitleClick(){
    h1.style.color = "blue";
    console.log("Title was clicked!");
}

function handleMouseEnter(){
    h1.style.color = "black";
    console.log("mouse was entered!");
}
function handleMouseLeave(){
    h1.style.color = "red";
    h1.innerText = "Mouse is gone";
}
function handleWindowResize(){
    // body가 중요한 부분이다. 
    document.body.style.backgroundColor="tomato";
}
h1.onclick = handleTitleClick;
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

// window는 기본으로 제공되는 것임
// resize 이벤트를 listening 하고 있음
window.addEventListener("resize", handleWindowResize);
console.log(title);

 

Clipboard events

function handleWindowCopy(){
    // body가 중요한 부분이다. 
    alert("copier!");
}
window.addEventListener("copy", handleWindowCopy);

 

이벤트 매우 강력함

 

#3.6 CSS in JavaScript

handletitleclick function에 집중할 것임

준비 상태

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

function handleTitleClick(){
    
}

h1.addEventListener("click", handleTitleClick);

원하는 것 :

title을 click했을 때, title의 색깔을 blue로 바꿔주기

한 번 더 click했을 때, title의 색깔을 tomato로 바꿔주기

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

function handleTitleClick(){
    console.log(h1.style.color);
    if (h1.style.color=="blue"){
        h1.style.color="tomato";
    }
    else {
        h1.style.color="blue";
    }
}

h1.addEventListener("click", handleTitleClick);

 

현재 value를 저장하는 것을 해보자. 

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

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

h1.addEventListener("click", handleTitleClick);

 

코드의 역할을 분리하기 위해 css를 사용해보자.

css에서 하려면 어떻게 해야할까? 

 

#3.7 CSS in JavaScript part Two

JavaScript, HTML, CSS와의 춤사위

JavaScript에서 style 관련 내용 적지 않을 것임

 

index.html 파일에서 css, javascript 파일을 불러온다. 

h1을 가져와서, h1 색상 기본값을 blue로 지정해주자. 

h1 {
    color:cornflowerblue;
}

.active {
    color:tomato;
}

 

일정한 조건에서 h1에 active class를 전달해주고 싶다. 

더 적은 자바스크립트 코드로 같은 결과를 주었음.

function handleTitleClick(){
    h1.className="active";
}

h1.className은 getter이자, setter

function handleTitleClick(){
    if (h1.className==""){
        h1.className="active";
    }
    else {
        h1.className="";
    }
}

-> active라는 이름은 임의적인 것임

-> 에러 방지를 위해서 변수를 사용해준다. 

 

클래스 이름을 교체해버리는 경우

class name이 삭제되어버리는 문제

class name을 수정하는 방식

 

 

#3.8 CSS in JavaScript part Three

classList를 이용하면 된다. 

element class에 포함되어 있는지 여부를 말해준다. 

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

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

h1.addEventListener("click", handleTitleClick);

 

편리하게 해주는 functions

toggle function :

class name이 있다면, 삭제해주고

없다면 추가해주는 

이거 한 줄이면 땡이다. 

    h1.classList.toggle(clickedClass);