노마드 코더 - 바닐라 JS로 크롬 앱 만들기(4)

3. Events

javascript가 document로 html을 불러올 수 있고 수정 추가도 가능하다.

 

 . 불러오는 함수

querySelector/ querySelectorAll 이 유용하다.

 

element의 내부를 보고 싶으면 console.dir()

기본적으로 object로 표시한 element를 보여준다. (전부 js object임)
그 element 중 앞에 on이 붙은 것들은 event다.

 

event : 어떤 행위를 하는 것

 

 . 사용자의 event를 listen 해서 반응 (모든 event는 js가 listen 할 수 있음)

eventListener : event를 listen 함 → js에게 무슨 event를 listen 하고 싶은 지 알려줘야 함

title.addEventListener("click") : 누군가가 title을 click 하는 것을 listen 함 → 무언가를 해줘야 함

 

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

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

title.addEventListener("click",handleTitleClick);

//click하면 handleTitleClick이라는 function이 동작하길 원함
//그래서 handleTitleClick 함수에 () 를 안넣은 것
//즉, js가 대신 실행시켜주길 바라는 것

 

*이때  handleTitleClick에 ()을 쓰지 않는다.

우리가 원하는 건 이벤트 발생 시 함수가 실행되는 것이기 때문인데 ()를 임의로 쓰면 이벤트 발생 전에 실행되어 버린다.

→

()는 함수를 실행하라는 거라고 생각하면 된다. 코드에 ()가 있으면 브라우저가 '함수 실행하라는 거구나' 하고 유저의 클릭 여부와 관계없이 실행한다.

하지만 ()를 빼면 브라우저가 함수만 받은 상태에서 실행은 안 하고 대기 타고 있다가 유저가 click이라는 event가 발생함과 동시에 함수 안에 있는 내용을 실행한다.

 

function이 js에게 넘겨주고 유저가 title을 click 할 경우에 js가 실행 버튼을 대신 눌러주길 바라는 것이다.

(직접 handleTitleClick(); 이렇게 하는 것이 아니라)

함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있다.

 

 

. 바꿀 수 있는 property 중 style도 있다.

title.style.color = "blue";

혹은

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

title.addEventListener("click", changeColor);

처럼 쓸 수 있다.

 

 

 

4. Events part Two

listen 하고 싶은 event 찾는 방법

 

1. 구글에 찾고 싶은 element의 이름 검색하기

ex) h1 html element mdn(mozilla developer network)

2. 그중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미)

 

on이 붙은 게 event다.

console.dir(title) 통해서 element들 볼 수 있다.

property 이름 앞에 on이 있다면 그게 바로 event listener다. (사용할 때는 on 빼고 쓰기)

on을 빼고 property를 event로 사용 가능

ex)

mouseenter → 마우스를 올려놓았을 때 event

mouseleave → 마우스가 타깃에서 떠났을 때 event

 

const title = document.getElementById("title");

title.innerText = "Hello!";

function handleTitleClick() {
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);

 

 

 

5. More Events

document의 body, head, title 이런 것들은 중요하기 때문에 언제든 document.body 등으로 가져와 document.body.style~의 명령이 허용되지만, div 같은 것들은 허용되지 않는다.

그렇기 때문에 div나 h1 등 나머지 element들은 querySelector나 getElementById로 불러와야 한다.

ex) document.querySelector(“h1”);

 

 

event를 사용하는 두 가지 방법

1. title.onclick = handleMouseEnter;
2. title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는

removeEventListener을 통해서 event listener을 제거할 수 있기 때문이다.

 

 

window object 이용하기

1. resize event (화면 크기가 바뀔 경우 발생)
2. copy event (유저가 copy행위를 했을 경우 발생)
3. wifi event - offline/online (offline/online일 경우 발생)
   방법) f12 (개발자 도구) → Network → No throttling이라고 쓰여있는 부분을 클릭하면 나오는 목록 중 offline이 있다. 그걸 누르면 현재 브라우저 자체에서 네트워크가 offline으로 설정되어 wifi 끊겼을 시 코드가 작동되는 것을 볼 수 있다. 그리고 다시 기본 설정이었던 no throttling을 클릭하면 wifi 연결 시 코드가 작동되는 것을 볼 수 있다.

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

function handleWindowCopy() {
alert("copier!");
}

function handleWindowOffline() {
alert("SOS no WIFI");
}

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

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

 

 

 

6. CSS in Javascript

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

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

h1.addEventListener("click", handleTitleClick);

→

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

 

1. currentColor는 getter로써, 최근 color값을 복사하는 역할을 한다.
   그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절하다.
2. newColor는 setter로써, 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 한다.
   그리고 이것도 의미론적으로 봤을 때 값이 변경될 수 있다는 것을 염두에 두기 위해 let으로 선언하는 것이 적절하다.
   newColor는 변화시켜 줄 색상 값을 할당하기 위한 변수이기에 가장 처음의 상태인 검은색을 굳이 할당해 줄 필요는 없다.
3. 프로그래밍 언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻이다.
   이를 염두에 두면 코드를 이해하는데 편하다.
4. (참고) 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않는다.
   그렇기 때문에 const currentColor로 변수 선언을 하더라도, 함수가 호출될 때마다 새로운 값을 받을 수 있다.

이를 토대로 코드를 순차적으로 이해하면,

1. click event 발생 및 함수 실행
2. currentColor 변수 선언 후 h1.style.color 값 복사 (getter)
3. newColor 변수 선언
4. currentColor 현재 값 확인
5. 조건에 따라 newColor에 "tomato" or "blue" 값 대입
6. 마지막으로 h1.style.color에 newColor값 대입 (setter)

 

style을 js에서 변경하는 건 그다지 스마트한 방법이 아니다. style 작업에 적합한 도구는 css고, 각자 적합한 도구를 사용하는 게 베스트다.

 

 

 

7. CSS in Javascript part Two

html 파일은 CSS문서와 JS문서를 import 하고 있다.

에러를 줄이기 위해 raw string을 쓰는 대신, const를 생성하기!

 

 CSS파일

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

.clicked{
color:tomato;
}

 

JS파일

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

h1.addEventListener(“click”, handTitleClick)’;

1. CSS에 .clicked라는 class를 생성해주고
2. addEventListener로 h1을 클릭하면 handleTitleClick 함수가 작동
3. .clicked의 color는 토마 토색이기 때문에 토마토 색이 됨

 

const clickedClass = “clicked”; 이걸 변수로 만드는 이유는 css 파일이랑 js 파일 적을 때 오타 가능성을 줄이려고 (코드가 깔끔해진다.) → 오타가 있다면 css파일에서도  className을 확인해줘야 하는데 변수로 만들면 css에서  className을 const로 만들 때 한 번만 복사해주면 된다,

 

 

 

8. CSS in Javascript part Three

classList는  'class들의 목록'으로 작업할 수 있게끔 허용해준다.

className은 이전 calss를 상관하지 않고 모든 걸 교체해 버린다.

 

classList를 이용하는 건 HTML element가 가지고 있는 또 하나의 요소 사용하는 것이다.

=> element의 class내용물을 조작하는 것을 허용한다는 뜻

 

contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.

remove는 명시한 class name을 제거하고, add는 명시한 class name을 추가해준다.

 

function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {  // clickedClass가 h1의 classList에 포함되어 있다면
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}

h1.addEventListener(“click”, handTitleClick)’;

classList로 인해 html에서 h1에 지정해줬던 class와 css는 건드리지 않고 clicked만 가지고 조건문을 실행한 것

 

→ 위의 if~~~ else 내용이 toggle로 구현 가능

 

toggle function은 class name이 존재하는지 확인한다.

class name이 존재하면 toggle은 class name을 제거하고,

class name이 존재하지 않으면 toggle은 class name을 추가한다. (toggle이 위의 코드를 구현하는 것)

 

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

h1.addEventListener(“click”, handTitleClick)’;

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서 만약 있다면, toggle이 clicked를 제거해주고,
만약 h1의 classList에 clicked가 없다면, toggle이 clicked를 classList에 추가해준다.

한 번만 적기 때문에 const도 필요 없다.