Building & Learning/바닐라JS-노마드코더
바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌
devlunch4
2024. 12. 22. 21:53
반응형
바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌
안녕하세요 데브런치입니다.
노마트코더 바닐라js로 크롬앱 만들기 3장은 자바스크립트를 통해 웹페이지의 이벤트 관련 강좌입니다.
클릭 이벤트 등 다양한 이벤트 발생시 여러 기능을 구현하게 됩니다.
#3.0 The Document Object (08:14)
#3.1 HTML in Javascript (10:31)
#3.2 Searching For Elements (12:23)
#3.3 Events (12:38)
#3.4 Events part Two (08:31)
#3.5 More Events (09:48)
#3.6 CSS in Javascript (06:51)
#3.7 CSS in Javascript part Two (09:34)
#3.8 CSS in Javascript part Three (07:57)
최종 3장 마무리시 작성되는 자바스크립트 코드를 남겨봅니다.
stlye.css
body {
background-color: beige;
}
h1{
color : cornflowerblue;
}
.clicked{
color: tomato;
}app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Momentum App</title>
</head>
<body>
<div class="hello">
<h1>Click me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
소스코드 작성후 클릭을 하게되면 텍스트 색상이 바뀌게 됩니다.
끝!
반응형