nomard crome app 1

October 10, 2022

기초

console.dir 을 사용하면 document를 호출할 수 있다.
console.dir(title); 을 통해서 더 자세하게 객체의 형태로 id를 관찰할 수 있고 textContent: “Grab me!” 등 을 통해서 JS를 통해서 HTML을 읽을 수 있다는 것을 알 수 있다.
title을 보면 Momentum이라고 되어있는데 우리는 js에서 title을 정의한적이 없다.
document가 HTML을 JS의 관점의 object로 보여준다.
JS는 HTML에 접근하고 읽을 수 있게 설정이 되어 있다.
JS에서 document.title = “JS”를 하면 타이틀이 바뀐다.
console에서 document.body를 사용하면 html의 body부분을 가져올 수 있다.
html에서 타이틀을 HTML로 바꾸고 js에서 title을 JS로 바꾸었을 때 JS로 나온다.

getElement

HTML

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

const title = document.getElementById("title");
title.innerText = "good!"

일 때 title로 good!이 나온다.

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

autofocus를 추가하면 autofocus가 true로 바뀐다.

<h1 autofocus class="hello" id="title">Grab me!</h1>

class를 추가하면 className이 생긴다.

class를 js로 가져오려면

const hellos = document.getElementsByClassName("hello");

querySelector

querySelector는 element를 CSS방식으로 검색할 수 있다.

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

querySelector는 하나의 element만 반환한다.

하지만

const ddiv = document.querySelectorAll("ddiv h1");

console.log(ddiv); // NodeList(3) [h1, h1, h1]

모두 반환한다.

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

조건에 맞는 첫번째 element만 반환 따라서 querySelectorAll로 사용해도 됨

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

class hello를 가진 div 내부의 first-child인 h1을 찾는 코드

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

같은 일을 하는 코드

하지만

querySelector("#hello form"); 
querySelector("#hello h1");

등이 가능하기 때문에 더 유리하다.

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

class hello 의 h1 안에 있는 innerText를 Hello로 바꾸는 코드

이것을

console.dir(title);

했을 때 h1은 object형식으로 표시되고 수많은 element들을 보여준다. 그중에서 on으로 시작되는 것들이 바로 events다. 실행시킬 때는 on을 빼고 사용하면 된다.

또한 style에서 color를 찾을 수 있었고 color를 바꾸는 방법은

title.style.color = "blue";

events

JS에서 대부분 작업할 일은 evnets를 listen하는 것이다. 클릭, 엔터 등의 동작 혹은 내부에서의 변화에 반응하는 것들이 events라고 할 수 있다.

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

title.addEventListener("click", handleTitleClick);

클릭 이벤트를 활성화하는 방법

위 코드는

title.onclick = handleTitleClick;

와 같다. 하지만 addEventListener는 removeEventListener로 제거할 수 있다는 장점을 가지고 있다.

함수를 따로 JS내에서 실핼시킬 필요가 없다. addEventListener의 두번째 인수로 받아서 이용하는 사람에게 실행시킬 수 있도록 만들기 때문

listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글링 ex) h1 html element mdn 그리고 API를 찾아라

function handleMouseenterTitle() {
    console.log("mouse is here");
}

title.addEventListener("mouseenter", handleMouseenterTitle);

title.onmouseenter = handleMouseenterTitle;

마우스를 title 위에 올리면 console이 찍히는 코드

function handleMouseLeaveTitle() {
    title.innerText = "Mouse is gone";
}

title.addEventListener("mouseleave", handleMouseLeaveTitle);

title.onmouseleave = handleMouseLeaveTitle;

마우스가 title 위를 떠나면 title.innerText가 바뀌는 코드

window events

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

사이즈를 변경하면 백그라운드 컬러가 변경된다.

function handleWindowCopy() {
    alert("copier!");
}
window.addEventListener("copy", handleWindowCopy);

카피를 하면 copier!을 alert으로 반환한다.

function handleWindowOffline() {
    alert("No wifi");
}
window.addEventListener("offline", handleWindowOffline);

와이파이 연결이 끊기면 alert으로 No wifi를 반환

function handleWindowOnline() {
    alert("connect wifi");
}
window.addEventListener("online", handleWindowOnline);

와이파이가 연결되면 alert으로 connect wifi를 반환

click events 응용

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

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

h1.addEventListener("click", handleh1Click);

클릭 할때마다 h1의 color가 바뀌는 코드

element를 찾아라
event를 listen해라
그 event에 반응해라

하지만 style을 건들 때는 CSS를 이용하는 것이 좋다.

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

h1.addEventListener("click", handleh1Click);

CSS

h1 {
    color : blue;
}

.active {
    color: tomato;
}

HTML

<h1>Grab me!</h1>

<h1 class="active">Grab me!</h1>

color: blue -> tomato

className은 getter이자 setter이다.

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

h1.addEventListener("click", handleh1Click);

CSS를 통해서 클릭할 때 h1.className의 색상이 바뀌게 하는 코드

h1 {
    color : blue;
    transition: color 0.5s ease-in-out;
}

색상이 천천히 바뀌는 코드

HTML

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

CSS

.clicked {
    color: red;
}

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

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

h1.addEventListener("click", handleh1Click);

JS에 CSS의 clicked를 clickedClass에 변수로 할당하여 사용하면 err를 줄일 수 있다. 만약 변수의 이름에 오류가 있다면 console에서 확인이 가능하기 때문

만약 HTML

<h1 class="sexy-font">Grab me!</h1>

처럼 class가 있고 CSS

.sexy-font {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
    'Helvetica Neue', sans-serif
}

일 때

위 함수를 실행시키면

<h1 class="">Grab me!</h1>

<h1 class="clicked">Grab me!</h1>

를 반복하며 class= “sexy-font”가 사라지고 오류 또한 나오지 않는다.

따라서

function handleh1Click() {
    const clickedClass = "clicked sexy-font";
    if(h1.className === clickedClass){
        h1.className = "";
    }   else    {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleh1Click);

로 지정해주면

<h1 class="">Grab me!</h1>

<h1 class="clicked
sexy-font">Grab me!</h1>

처럼 된다.

하지만 좋은 방법은 아니다. class를 변경하거나 추가한다면 JS와 CSS를 업데이트 해야하기 때문이다. 그래서 JS로 모든 class name을 변경하지는 않아야 한다. 따라서 sexy-font를 삭제하지 않고 clicked class를 변경해야 한다. classList로 해결할 수 있다.

DOMTokenList.contains() Returns true if the list contains the given token, otherwise false.

function handleh1Click() {
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }   else    {
        h1.classList.add(clickedClass);
    }
}
h1.addEventListener("click", handleh1Click);

<h1 class="sexy-font">Grab me!</h1>

<h1 class="sexy-font clicked">Grab me!</h1>

sexy-font는 유지되면서 clicked 유뮤만 바뀐다.

toggle

DOMTokenList.toggle() Removes the token from the list if it exists, or adds it to the list if it doesn’t. Returns a boolean indicating whether the token is in the list after the operation.

위 함수와 같은 역할을 해주는 코드

따라서

function handleh1Click() {
    h1.classList.toggle("clicked");
}

만 사용해도 된다.

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서 만약 있다면, toggle이 clicked를 제거한다. 만약 h1의 classList에 clicked가 존재하지 않는다면, toggle은 clicked를 classList에 추가를 해줄 것이다.

Twitter Facebook LinkedIn

Diiiiiikey

nomard crome app 1

기초

getElement

querySelector

events

window events

click events 응용

toggle

공유하기

댓글남기기

참고

[ReactThreeFiber] 3D 모델(sketchfab) - THREE.GLTFLoader: Unknown extension KHR_materials_pbrSpecularGlossiness

[ReactThreeFiber] 3D 모델 / 애니메이션

[ReactThreeFiber] 그림자(Drei)

[ReactThreeFiber] 그림자