바닐라 JS로 크롬 앱 만들기 - 2

강의를 통해 처음부터 시작하는 마음으로 꼼꼼하게 들으며, 이미 알고 있었다고 생각했지만 까먹었던 기초개념을 다시 잡고갈 수 있어서 좋은거 같다..٩(•̤̀ᵕ•̤́๑)૭✧ 더 힘내서 홧팅홧팅 아쟈아쟈아쟈

💻 노마드 코더 https://nomadcoders.co/

🔍 3.0 The Document Object

1) 자바스크립트를 이용해 브라우저에 대해 이해하기,
2) 자바스크리트가 브라우저를 어떻게 움직이게 하는지
3) HTML documents와 자바스크립트

🔍 3.1 HTML in Javascript

📍id와 class Html elements에 접근하기

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

document.getElementById("title")
> <h1 id="title" class="c_title">Grap me!</h1>

document.getElementByClassName("c_title")
> <h1 id="title" class="c_title">Grap me!</h1>

📍elements에 접근해 텍스트 수정하기

<h1 id="title" class="c_title">Hi</h1>

const h1 = document.getElementById("title")
h1.innerText = 'Hello';
> <h1 id="title" class="c_title">Hello</h1>

🔍 3.2 Searching For Elements

함수를 통해 element를 찾으면 항목을 변경하거나 추가하는 등 뭐든지 할 수 있음

1) getElementById() : 조건에 맞는 Id 값 하나를 반환
2) getElementClassName() : 조건에 부합하는 Class 값 하나의 배열 반환
3) getElementsByTagName() : 조건에 부합하는 Tag 값 하나의 배열 반환
🔺 tag란 ( h1, div, select ... 등)
4) querySelector() : 조건에 부합하는 하나의 element 반환
🔺 querySelector는 css selector 방식으로 검색함
5) querySelectorAll() : 조건에 부합하는 모든 element 반환

⛔️ 반환값이 배열인 것들은 innerText 사용 못함!

🔍 3.3 ~ 3.4 Events 1,2

style을 JavaScript에서 변경할 수 있음

<h1 id="title" class="c_title">Grab me! </h1>
const h1 = document.querySelector('#title')
h1.style.color = "bule"

addEventListener(event, function) : 해당 이벤트가 발생했을 때! 작성된 함수를 실행시킴

<h1 id="title" class="c_title">Grab me! </h1>
const h1 = document.querySelector('#title')

function handleTitleClick() {
	console.log("클릭");
}
h1.addEvnetListener("click", handleTitleClick);
> 클릭 

🔍 3.5 More Events

📍event 사용하는 방법 두 가지
1) addEventListener()
2) onClick()

const h1 = document.querySelector('#title')

function handleTitleClick() {
	console.log("클릭");
}

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

🔺 removEventListener() 로 이벤트를 제거할 수 있음

🔍 3.6 ~ 3.8 CSS in Javascript 1,2,3

📍조건문 활용하여 javscript로 css 변경할 수 있음

const h1 = document.querySelector('#title')

function handleTitleClick() {
	const currentColor = h1.style.color;
    let newColor;
	if(currentColor === "blue") {
		newColor === "tomato";
    }
    h1.style.color = newColor;
h1.addEventListener("click", handleTitleClick)

🔺 js로 css를 변경 가능하지만 , 되도록 하나의 언어만 사용하는걸 권장

📍Javascript 활용해 class 변경

const h1 = document.querySelector('#title')
function handleTitleClick() {
	if(h1.className === "active") {
    	h1.className = "";
    }else {
    	h1.className = "active";
    }
}
h1.addEventListener("click", handleTitleClick)

🔺 이렇게 되면 모든 클래스 명이 active 가 아닐 시 class는 모두 사라짐

📍classList 함수 이용해 class 변경

const h1 = document.querySelector('#title')
function handleTitleClick() {
	if(h1.clasList.contains ("active")) {
    	h1.classLiat.remove("active");
    }else {
    	h1.className.add("active");
    }
}
h1.addEventListener("click", handleTitleClick)

🔺 toggle을 이용해 위 코드 다시 구현

const h1 = document.querySelector('#title')
function handleTitleClick() {
	h1.classList.toggle("active");
}
h1.addEventListener("click", handleTitleClick)