Dev study and notes

바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌 본문

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>
 

 

​

소스코드 작성후 클릭을 하게되면 텍스트 색상이 바뀌게 됩니다.

​

끝!

반응형
저작자표시 비영리 동일조건

'Building & Learning > 바닐라JS-노마드코더' 카테고리의 다른 글

바닐라 JS로 크롬 앱 만들기 6장 강좌들 노마드코더 무료강좌  (0) 2025.01.17
바닐라JS로 크롬 앱 만들기 5장 강좌들 노마드코더 무료강좌  (0) 2025.01.17
바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌  (0) 2024.12.22
바닐라 JS로 크롬 앱 만들기 2장 강좌들 노마드코더 무료강좌  (0) 2024.12.22
바닐라 JS로 크롬 앱 만들기 #2.0 Your First JS Project 노마드코더 무료강좌  (1) 2024.12.22
'Building & Learning/바닐라JS-노마드코더' Related Articles more
Comments