13.1 클라이언트 측 JS
웹브라우저에서 동작하는 (=클라이언트 측) 자바스크립트
웹 브라우저에서 JS가 하는 일
- 웹 페이지를 정적(Static) 에서 동적(Dynamic) 으로
- 사용자 입력에 대응하는 등 다양한 작업을 자동화 => 웹 페이지 사용성 향상
- 웹 브라우저에서 동작하는 애플리케이션 (Web App)
기술적 측면
- 웹 페이지의 Document 객체 제어 (HTML, CSS) : DOM API 활용
14장 - 웹 페이지의 Window 객체 및 브라우저 제어
- 웹 페이지에서 발생하는 이벤트 처리 : 이벤트 처리기
15장 - HTTP를 이용한 통신 제어 : XMLHttpRequest 객체 활용
16장
웹 브라우저에서 JS 실행 순서
웹 브라우저에서 HTML 문서를 분석하고 표시하는 프로그램 : 렌더링 엔진
렌더링 엔진의 처리과정
-
웹 브라우저로 웹 페이지를 열면 가장 먼저 Window 객체 생성👈🏻
웹 페이지의 전역 객체로 웹 페이지와 탭마다 생성 -
Window 객체의 프로퍼티로 Document 객체 생성
웹 페이지를 해석해 DOM 트리 구축👈🏻
Documnet 객체의 readyState 프로퍼티 값= "loading"
HTML 문서의 해석 상태 문자열
loading 로딩중 (초깃값)
interactive 로딩 끝나고 해석중 (하위 자원들 로딩중)
complete 문서와 모든 하위 자원들의 로드가 완료
<script>
Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, ...}
document: document
readyState: "loading"
</script>-
HTML 문서는 구문을 작성 순서에 따라 분석하며 Document 객체 요소와 텍스트 노드 추가
-
HTML 문서 내 script 요소가 있을 때 오류가 없다면 코드를 동기적 실행👈🏻
HTML 문서의 구문 분석이 일시정지되고, script 실행 완료 후에 재개 -
HTML 문서 다 읽은 후 DOM 트리 구축 완료하면
Documnet.readyState = "interactive" -
웹 브라우저는 Document 객체에 DOM 트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트 발생👈🏻
-
img 등의 요소가 외부 리소스 읽어들임
-
모든 리소스 읽은 후
Documnet.readyState = complete
웹 브라우저는 Windoew 객체에 load 이벤트 발생👈🏻 -
지금부터 다양한 이벤트 수신📡
발생하면 이벤트 처리기가 비동기로 호출
DOMContentLoaded 이벤트는 최초 HTML 문서가 완전히 로드 및 파싱되었을때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않는다.
load 이벤트는 오직 모든 페이지가 완전히 로드되었을때 사용해야한다.
따라서, 모든 스크립트가 로드되었을 때 발생할 이벤트는 load 이벤트보다는 DOMContentLoaded 이벤트에 걸어주는 것이 더 적절하다.
DOMContentLoaded | MDN
DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다.
스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
Bubbles - Yes
load | MDN
load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.
타겟 - Window, Document, Element
Bubbles - No
<script>
window.addEventListener("DOMContentLoaded", (event) => {
console.log('DOM fully loaded and parsed');
});
// $(document).ready(function() {})
window.addEventListener("load", (event) => {
console.log("All resources finished loading!");
});
// window.onload = function() {}
// $(window).load(function() {})
</script>script 요소의 논리 속성
HTML5+, 인라인 (x)
<script async src="../scripts/sample.js"></script>
<script defer src="../scripts/sample.js"></script>async
비동기 실행. HTML 구문 분석을 막지 않으면서 최대한 빨리 실행
✔ async 가 여럿이면 읽어들인 순서대로 실행
defer
DOM 트리 구축 완료후 실행. 요소 객체에 이벤트 처리기를 등록하는 등의 초기화 작업
✔ DOMContentLoaded 의 대안
🚨 async · defer 지원하지 않는 경우나 script 요소에 document.write 메서드가 있다면
무시하고 동기적 실행
13.2 Location 객체
창에 표시되는 문서의 URL을 관리
<script>
// 이전의 URL을 이력으로 남김
location.href = "http://www.naver.com/";
location.assign("http://www.naver.com/");
// 이전의 URL을 이력에서 삭제
location.replace("http://www.naver.com/");
</script>13.3 History 객체
창의 웹 페이지 열람 이력을 관리
<script>
history.back(); // 하나 뒤로
history.forward(); // 하나 앞으로
history.go(-3);
history.go(2);
// 페이지 전환 없이 웹 페이지 열람 이력만
history.pushState(state, title, url); // 추가
history.replaceState(state, title, url); // 수정
</script>back, forward, go, pushState, replaceState 메서드 호출시 popstate 이벤트 발생
13.4 Navigator 객체
스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리. 브라우저 테스트에 사용
<script>
console.log( Window.Navigator.userAgent );
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36"
</script>13.5 Screen 객체
화면(모니터) 크기와 색상 등의 정보를 관리. 단말기 크기별 대응에 사용
13.6 Document 객체
창에 표시되고 있는 웹 페이지를 관리. 웹 페이지의 내용물인 DOM 트리를 읽거나 쓸때 사용
13.7 창 제어
웹 페이지가 표시하는 각각의 창과 탭은 별도의 브라우징 컨텍스트(browsing context) 제공
브라우징 컨텍스트는 상호간 독립적이지만, 부모자식에는 예외적으로 상호작용
Window 객체의 메서드 495p
open / close
<script>
let w = window.open(URL, name, specs, replace);
w.close();
</script>move / resize / scroll
<script>
w.moveBy(10,20); // 현 위치 기준 수평수직 이동거리(px)
w.moveBTo(200,150); // 창의 좌표 지정
w.resizeBy(10,20); // 현재 크기 기준
w.resizeTo(200,150); // 창의 크기 지정
w.scrollBy(10,20); // 현재 스크롤값 기준
w.scrollTo(0,0); // 시작 위치로 이동
</script>동일 출처 정책 (Same-Origin Policy)
어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식. 잠재적으로 해로울 수 있는 문서를 분리해, 공격받을 수 있는 경로를 줄인다.
웹 브라우저 보안을 위해 protocol, host, port가 동일한 서버로만 ajax 요청을 주고 받을 수 있도록 한 정책
