노마드코더 JS 추가

GDSC-DEU · Jul 30, 2024 · 417c75c · 417c75c
1 parent 715b482
commit 417c75c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/jihongeek/forNomadLecture/20240730.md b/jihongeek/forNomadLecture/20240730.md
@@ -0,0 +1,23 @@
+# 20240730
+HTML Document 객체를 통해 자바스크립트에서 Html 객체를 다룰 수 있다.
+웹브라우저가 html을 보여주는 객체로 만들어 주어서 javascript로 조작가능 
+class와 id등의 정보로 document아래에 있는 html object를 가져온다음 자바스크립트로 하위 속성을 가져오고 설정할 수 있다
+# document 객체에서 html element 불러오기
+```javascript
+document.getElementById("id 문자열") // id 값으로 Element 가져오기
+document.getElementsByClassName("class 문자열") // class 값으로 Element 배열 가져오기
+document.getElementsByTagName("태그 이름 문자열") // // class 값으로 Element 배열 가져오기
+```
+
+
+## 만능 querySelector
+```javascript
+document.querySelector("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 가져오기. 단, 여러개일 경우 첫번째만!
+document.querySelectorAll("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 배열 가져오기 
+```
+
+
+addEventListener와 함수로 이벤트 처리  => 그냥 객체에 함수를 바로 넣어버리면 안되는 것일까? 가능하지만 동작 방식이 약간 다르다.
+
+객체에 바로 할당 : 여러 번 수행했을 때 마지막 함수로 한다.(덮어쓰기)
+addEventListener와 함수로 이벤트 처리 : 이벤트에 대한 함수를 누적한다(여러 함수다 실행된다)
diff --git a/jihongeek/forNomadLecture/app.js b/jihongeek/forNomadLecture/app.js
@@ -0,0 +1,12 @@
+const header = document.querySelector("h1");
+
+function headerClickHandler() {
+    console.log("🍅");
+}
+header.onclick = headerClickHandler;
+header.onclick = ()=>{
+    console.log("Tomato");
+}
+header.addEventListener("click",()=>{
+    console.log("Tomato");
+});
diff --git a/jihongeek/forNomadLecture/index.html b/jihongeek/forNomadLecture/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>🍅</h1>
+    <script src="app.js"></script>
+</body>
+</html>