1. The Document Object
document
: 웹사이트 문서 (브라우저에 이미 존재하는 object임)
콘솔창에 입력하면 Html 문서 보여줌
💡 console.dir(document)-> JS 관점에서 HTML 문서를 볼 수 있음.
⭐️ Javascript에서 HTML을 읽고 변경할 수 있다.
자바스크립트로 HTML 문서 제목 읽고 바꾸기
2. Searching for elements
getElementById("id 값")
: id를 통해 HTML의 특정 요소를 가져올 수 있음.
👉🏻 변수에 저장해서 className을 읽거나 innerText를 바꿀 수 있음.
getElementByClassName(“className”)
: class를 통해 특정 요소를 가져올 수 있음.
getElementByTagName(“tagName”)
: tag(ex.h1,div)를 통해 특정 요소를 가져올 수 있음.
⭐️ querySelector(“css방식”)
: element를 css방식으로 가져올 수 있음.
ex)
querySelector(“#id”)
querySelector(“.className 하위tag”)
querySelector(“상위tag 하위tag”)
querySelector는 여러 요소를 선택했을 때 첫 번째 요소만 가져온다.
⭐️ 선택한 요소들을 다 가져오고 싶을 때에는 querySelectorAll( )을 사용한다.
3. Events
How to listen events❓
방법 1) addEventListener( )
title.addEventListener("click",handleTitleClick); 👉🏻 나중에 removeEventListener를 통해 제거할 수 있기 때문에 방식 2보다 더 선호되기도 함.
방법 2) onEventname
title.onClick = handleTitleClick;addEventListener("이벤트", 실행할 함수)
ex) addEventListener("click") -> 마우스 클릭 감지
1. 변수 title에 querySelecter로 가져온 특정 요소를 저장한다.
2. 클릭 이벤트가 발생했을 때 문구를 출력하는 함수를 만든다.
3. title에 click이 발생했을 때 함수를 실행시킨다.⚠️ 주의 : 3번에서 함수 호출시에 괄호를 적지 않고 '함수명'만 적어야한다. (괄호를 함께 적으면 click이 없어도 함수가 실행됨.)
💡 활용 : 함수 내용으로title.style.color = "blue";를 적어주면 클릭시 색깔이 바뀜.
-> 하지만 스타일은 CSS에서 바꾸는게 좋음.
Event 종류
https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement
-> 사이트에서 HTML element에 들어가면 event 종류 볼 수 있음.
👇🏻 복사/붙여넣기 등의 이벤트도 감지할 수 있다.
혹은 condole.dir(element) 로 사용 가능한 event를 찾을 수도 있음.
on으로 시작하는 property
📌 적용 예시
마우스를 올리고 있을 때 감지하는 이벤트 : mouseenter
마우스를 뗄 때 감지하는 이벤트 : mouseleave
function handleMouseEnter(){
title.innerText = "Mouse is here!";
}
function handleMouseLeave(){
title.innerText = "Mouse is gone!";
}
title.addEventListener("mouseenter",handleMouseEnter)
title.addEventListener("mouseleave",handleMouseLeave)👉🏻 마우스를 특정 요소에 올리거나 뗄 때마다 각 함수가 실행됨.
다양한 Event들
resize
: 화면 사이즈 조정을 감지하는 이벤트 (window event)
window : document 처럼 기본적으로 제공됨.
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize", handleWindowResize)`clipboard event
- copy, cut, paste : 유저가 복사, 오려두기, 붙여넣기를 했을 때 발생하는 이벤트
function handlwWindowCopy(){
alert("copier!");
}
window.addEventListener("copy", handleWindowCopy) connection event
- offline, online : wifi에 연결 돼있는지 브라우저가 알 수 있음.
function handleWiondowOnline(){
alert("Connected")
}
function handleWindowOffline(){
alert("SOS no Wifi");
}
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline); 4. CSS in Javascript
📌 Mission
h1을 클릭할 때마다 red -> blue -> red -> blue 로 색깔이 바뀌게 만들기
1) Javacript로 css를 적용하는 방식(비추👎🏻)
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const currentColor = h1.style.color; // 변하지 않아야 함.
let newColor; // 계속 수정됨.
if(currentColor === "blue"){
newColor = "red";
} else{
newColor = "blue";
}
h1.style.color = newColor; // 바뀐 color 적용
}
h1.addEventListener("click", handleTitleClick);2) CSS와 Javascript를 분리해서 작업하기(추천👍🏻)
⭐️ JS로 HTML에 class를 제공했다가 제거하는 방식으로 CSS 적용!
- CSS에서 색깔 정하기
/* 기본 컬러 */
h1 {
color : cornflowerblue;
/* 트랜지션 효과 */
transition : color .5s ease-in-out;
}
/* 바뀐 컬러 */
.active {
color : tomato;
}- JS에서 HTML 바꾸기
- active class가 있을시 active class를 제거함.
(tomato->blue) - active class가 없을시 active class를 전달함.
(blue->tomato)
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if(h1.className === "active"){
h1.className = ""; // class 비우기
} else{
h1.className = "active"; // active class 전달
}
h1.addEventListener("click", handleTitleClick); ⚠️ 위의 코드에서 발생 가능한 오류 2가지
1. 클래스명 철자 오류
⛔️ 위에서 정한 "active"라는 클래스명은
raw value이기 때문에 입력할 때 철자를 실수로 잘못 적으면 오류가 생겨도 에러 원인을 빠르게 찾기 어려움.
raw value: 개발자가 이렇게 적겠다고 선택한 것
💡 이러한 실수를 방지하기 위해 반복해서 사용하는 클래스명을 따로 변수에 저장해서 사용함.
-> 그러면 철자를 잘못 적었을시 자바스크립트에서 에러 원인을 알려줌!
const h1 = document.querySelecteo("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "active"; // 변수에 클래스명 저장
if(h1.className === clickedClass){ // 클래스명을 직접 쓰는 대신 변수 사용
h1.className = "";
} else{
h1.className = clickedClass; // 변수 사용
}
h1.addEventListener("click", handleTitleClick);2. 예기치 못하게 기존 class 제거
⛔️ 기존 class가 active class로 대체되어 예기치 못하게 기존 class의 적용이 해제될 수 있음.
💡 기존 class를 보존하면서 새로운 클래스를 적용하기 위해 classList를 사용한다.
-> className은 이전 class를 상관하지 않고 모든걸 교체해버림.
-> classList.contains(클래스명) : 해당 class를 포함하는지 확인
-> classList.remove(클래스명) : 해당 class 제거
-> classList.add(클래스명) : 해당 class 추가
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "active";
if(h1.classList.contains(clickedClass)){ //해당 클래스를 포함하는지 확인
h1.classList.remove(clickedClass); // 해당 클래스만 제거
} else{
h1.classList.add(clickedClass) // 해당 클래스 추가
}
h1.addEventListener("click", handleTitleClick);
⭐️ Toggle을 통해 코드 단축시키기
Toggle() : classList에 해당 class가 있는지 확인해서 있다면 class 제거, 없으면 class 추가해줌.
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
h1.classList.toggle("active"); // 한 줄로 단축!
}
h1.addEventListener("click", handleTitleClick);
출처 : 노마드코더) 바닐라 JS로 크롬 앱 만들기
