clear_uncertainty

자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 3 ) 본문

언어/자바스크립트(Javascript)

자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 3 )

SOidentitiy 2021. 7. 25. 17:16
728x90

2021-07-25

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

[Javascript On The Browse - ( 3 )] 

 

CSS in Javascript 

 

이번 포스팅에서는 CSS와 Javascript를 함께 사용할 때 효율성이 좋아지는 방법에 대해 공부해봅시다.

 

먼저, 우리가 익숙한 자바스크립트를 통해 Click me! 라는 문구를 클릭할 때, 글자의 색깔이 바뀌는 코드를 짜봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="hello">
		<h1>click me!</h1>
	</div>
	<script>
 	const triger = document.querySelector ("div.hello h1")  // STEP 1 !
	function handleTitleClick() {
	const currentColor = triger.style.color;
	let newColor;
	if(currentColor === "blue") { 
		newColor = "black";
	} else {
		newColor = "blue";
	}
	triger.style.color = newColor;
} //STEP 3 !

console.log(triger);

triger.addEventListener("click", handleTitleClick); //STEP 2 !

</script>
	<script src="javascript.js"></script>
</body>
</html>

세가지 스텝을 밟으면 됩니다.

STEP 1 : element를 찾기 - const triger = document.querySelector ("div.hello h1")

STEP 2 : event를 listen 

STEP 3 : event 에 반응

 

하지만 이 방식은 권장되지 않습니다. style 작업에 적합한 도구는 CSS이기 때문이죠.

 

이와 같은 방식을 CSS와 Javascript를 이용해 작성해봅시다.

body {
	background-color: skyblue;
}

h1 {
	color: blue;
}

.clicked {
	color: tomato;
}

↑CSS

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


function handleTitleClick() {
	if (triger.className === "clicked"){
		triger.className= "";
	} else {
		triger.className = "clicked";
	}
}

triger.addEventListener("click", handleTitleClick);

↑JS

 

className은 클래스 이름이 className으로 변경되는 것입니다. (기존 클래스 사라짐)

훨씬 깔끔하게 코드를 작성할 수 있습니다.

위의 h1은 class가 지정되어있지않습니다.. CSS와 Javascript를 통해 class가 지정되기도, 지정되지않기도 합니다.

그러나 만약 폰트를 지정하는 클래스가 h1에 지정되어있다면 class가 바뀌거나, class가 없어지면서 폰트가 바뀌는 불상사가 나타날 수 있습니다. 

이를 어떻게 해결할 수 있을까요?

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


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

triger.addEventListener("click", handleTitleClick);

이를 classList.contains(clickedClass),  classList.add(clickedClass), classList.remove(clickedClass)로 해결할 수 있습니다.

classList.contains(clickedClass) 은 clickedClass가 classList에 포함되어있는지를 알 수 있습니다.

classList.add(clickedClass) 는 clickedClass를 classList에 추가시킵니다. 클래스를 바꾸지않아 기존 클래스는 유지됩니다.

classList.remove(clickedClass) 는 clickedClass를 classList에서 제거시킵니다.

 

 

이를 모두 합친 것이 toggle입니다. 

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


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

triger.addEventListener("click", handleTitleClick);

 

toggle은 triger의 classList에 clicked class가 이미 있는지 확인해서 있다면 제거하고 없다면 추가합니다. 

따라서, toggle은 한 줄의 코드로 우리가 지금까지 해왔던 긴 코드의 역할을 그대로 수행합니다.

 

출처

 

 

[Javascript] class 추가/변경/삭제/읽기 (className, classList)

class 이름 읽기 class 추가/수정 class 삭제 class toggle 특정 클래스 이름이 class 속성에 포함되는지 확인하기 1. class 이름 읽기 예제 1. className function handleOnClick() { alert(document.getElementB..

hianna.tistory.com

 

 

Element.className - Web API | MDN

className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

developer.mozilla.org

 

 

노마드 코더 Nomad Coders

코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!

nomadcoders.co

 

728x90
저작자표시

'언어 > 자바스크립트(Javascript)' 카테고리의 다른 글

자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (2)  (0) 2021.07.25
자바스크립트 입문 [Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (1)  (2) 2021.07.25
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 2 )  (0) 2021.07.24
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 1 )  (0) 2021.07.24
자바스크립트 입문[Javascript] - 조건문 (Conditionals) / if, else, else if / and(&&) , or( | | )  (0) 2021.07.23
'언어/자바스크립트(Javascript)' Related Articles more