<복습>
JS코드로 사용자의 ___에 반응할 수 있다.
웹 페이지에 일어나는 일들을 ___이라 부른다.
JS는 ____언어이다.
<복습 정답>
동작
이벤트
인터프리터
JS선언문은 보통 head태그에 하단 처럼 작성한다
<script type="text/javascript" src="js주소"> 코드 < /script>
사용자가 처음 이 페이지에 접속했을 때, 보여주고자 하는 경우 head태그에 작성하지만
DOM구조로서 상위태그들이 파싱된 뒤에 script를 실행하고자 할 경우, body태그에 선 실행될 태그들 뒤에 작성
"순서의 차이점"이 중요하다.
html파일(index2.html)에 js파일(main2.js) 불러오기 예시.
html파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/main2.js"></script>
</head>
<body>
</body>
</html>JS파일
document.write("hello first time");
JS가 왜 이렇게 동작하는건가?
HTML trees라고 해서 Element와 Element와의 관계 트리가 있었는데
이를 이젠 DOM tree라고 부르겠음
Document
Object
Model
DOM이란
하나의 문서는 하나의 객체로 다뤄질 수 있다는 의미
DOM구조를 통해 작성이 되고
JS는 하나의 문서를 객체로 인식하기에 DOM구조를 다룰 수 있다.
여러 태그들이 DOM구조로 작성이 되는데
이를 HTML파싱해서 브라우저에 띄워져서 우리 눈에 보인다.
파싱이란 : 파일이 브라우저에 불러져오는 형태를 의미
파싱 작업 순서
브라우저가 html파일을 불러오면(파싱하면)
다음과 같이 크게 4가지 순서로 작업이 진행된다.
1. HTML코드를 불러와서 DOM tree분석을 한다.
DOM tree란 js가 하나의 문서를 객체로 인식
2. 렌더링_html코드 안에서 실제 페이지를 만들기 위한 과정
3. 스타일 코드_스타일 적용을 위한 배치작업
4.재배치_이 모든 것을 재배치하여 보여줌
도움되셨다면 ♥ 눌러주세요 :)
'○ WEB > 19.03 FastCampus_JS' 카테고리의 다른 글
| 5. JS 제어문 1 / 조건문 / if / switch (0) | 2019.06.14 |
|---|---|
| 4. JS 연산자 (0) | 2019.06.14 |
| 3. JS 변수 / 변수 선언 / 변수 초기화 / undefined, null 차이점 / typeof (0) | 2019.06.14 |
| 1. JS 기초 (0) | 2019.06.14 |
| 0. FIREBASE 소개 (0) | 2019.06.14 |
