2023년 05월 12일 TIL [#JS 프론트엔드]

---

오늘의 학습 계획

_JavaScript를 이용한 프론트엔드 구현 강의 들으며 공부

---

기록하고 싶은 학습내용

_자바스크립트를 html로 불러오는 법

<script src="자바스크립트파일명.js"></script>

_자바스크립트 조작하는법

DOM, Document Object Model을 사용. *document가 html 이고 object가 javascript 이다.

돔이 html을 javascript로 조작을 하는 방법인데, 쩜뭐쩜뭐 해서 오브젝트 다루듯이 하는 것.

자바스크립트에서는 const / var / let 이런식으로 변수 선언 가능.

이 중 콘스트는 한 번 선언하면 바꾸지 않을 값. let은 변하는 값.

const mainHeader = document.querySelector('h1')

자바스크립트 파일에서 document.querySelector() 라는 dom으로

html에 있는 h1이라는 태그를 선택한 것.

**html이던 자바스크립트던 컴퓨터가 맨 윗 줄에서 부터 연산 하므로 html 코드가 읽히기 전에 자바스크립트 연산이 끝나버릴 수 있기 때문에 <script src="어쩌구.js"></script> 코드는 html 연산이 모두 끝나는 </body> 태그 바로 위에 넣어준다.

 

 

_자바스크립트 칠 때는

html 파일을 Live server 확장프로그램으로 켜 놓고 

 

 

_콘솔 로그 윈도우

console.log(window)

윈도우라는 것은 가장 최상단에 있는 오브젝트다.

 

 

_콘솔 로그 도큐먼트

console.log(document)

 

_여러가지 DOM 예시들과 효과

console.log(window.document)

윈도우와 도큐먼트 이렇게 하는 것도 가능

 

#h1 태그가 html에 여러 개 있는 상태에서,

const mainHeader = document.querySelector('h1')

console.log(mainHeader)

---