[모던 자바스크립트 입문] 13장

Jiseon·2021년 9월 12일

JavaScript

13.1 클라이언트 측 자바스크립트

13.1.1 웹 브라우저에서 자바스크립트가 하는 일

자바스크립트를 이용하면 웹 페이지를 동적으로 만들 수 있다.

기술적인 측면에서 웹 브라우저에서 자바스크립트가 하는 일:

웹 페이지의 Document 객체 제어(HTML 요소와 CSS 스타일 작업)
웹 페이지의 Window 객체 제어 및 브라우저 제어
웹 페이지에서 발생하는 이벤트 처리
HTTP를 이용한 통신 제어

13.1.2 자바스크립트 코드를 삽입하는 방법

자바스크립트 코드를 삽입하는 방법:

script 요소의 내용물로 작성하기(인라인 스크립트)

<script>
	console.log("Hello!");
</script>

외부파일 읽어 들이기(외부 스크립트)

<script src="../scripts/sample.js"></script>

이벤트 처리기 속성에 작성하기

<input type="button" value="click" onclick="console.log("Hello!");">

Javascript : URL(자바스크립트 의사 프로토콜)

<a href="javascript:console.log(`I'm pretty good!`)">
	What's going on?
</a>

13.1.3 웹 브라우저에서의 자바스크립트 실행 순서

웹 브라우저에서 HTML문서를 분석하고 표시하는 프로그램을 가리켜 렌더링 엔진이라고 한다.

웹브라우저로 웹 페이지를 열면 가장먼저 Window 객체가 생성된다. Window 객체는 웹 페이지의 전역 객체로 웹페이지와 탭마다 생성된다.
Document 객체가 Window 객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM트리 구축을 시도한다. 3. HTML 문서는 HTML구문을 작성 순서에 따라 분석하며 Document 객체 요소와 텍스트 노드를 추가해나간다.
HTML 문서 안에 script요소가 있으면 script 요소 안의 코드 똔느 외부 파일에 저장된 코드의 구문을 분석한다. 이때 script 요소는 동기적으로 실행된다. script 요소의 구문을 분석해서 실행할 때는 HTML 문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀있던 HTML 문서의 구문 분석을 재개한다.
HTML 문서의 모든 내용을 읽은 후에 DOM트리 구축을 완료하면 document.readyState 프로퍼티 값이 "interactive"로 바뀐다.
웹 브라우저는 Document 객체에 DOM 트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.
img 등의 요소가 이미지 파일 등의 외부 리소스를 읽어 들여야 한다면 이때 읽어들인다.
모든 리소스를 읽어 들인 후에는 document.readyState 프로퍼티 값이 "complete"로 바뀐다. 마지막으로 웹 브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.
다양한 이벤트(사용자 정의 이벤트, 네트워크 이벤트)를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출된다.

이미지등의 외부 리소스를 읽어 들이는 시점이 DOM 트리 구축이 끝난 후라는 점을 유의한다.
load 이벤트는 이미지 등의 외부 리소스를 모두 읽어 들인 후에 발생하기 때문에 외부 리소스를 읽어들이는 시간이 걸리는 만큼 사용자가 기다려야 하는 시간이 길어진다.
이를 방지하기 위해서는 load 이벤트 대신 DOMContentLoaded이벤트의 이벤트 처리기에 초기화 작업을 작성한 함수를 등록한다.

async 와 defer 속성

src 속성을 가진 script 요소에 적용할 수 있지만 인라인 스크립트에는 사용 불가
async와 defer를 사용하면 자바스크립트 코드를 실행할 때 HTML 구문 분석을 막지 않는다.

<script async src="../scripts/sample.js"></script>
<script defer src="../scripts/sample.js"></script>

async
script 요소에 async를 속성을 설정하면 script 요소의 코드가 비동기적으로 실행된다.
여러 개의 script 요소에 async 속성을 설정하면 다 읽어 들인 코드부터 비동기적으로 실행하므로 실행 순서가 보장되지 않는다.
읽어 들이는 순서에 의존하는 script는 async 속성을 설정하지 말아야 한다.

defer
defer 속성을 설정한 script 요소는 DOM 트리 구축이 끝난 후에 실행된다.
DOM 구축이 끝난 시점에 실행되기 때문에 자바스크립트 코드로 요소 객체에 이벤트 처리기를 등록하는 등의 초기화 작업을 할 수 있다.
defer속성은 DOMContentLoaded 이벤트의 대안으로 활용할 수 있다.

Window 객체

Window 객체는 전역 객체이며, 전역 변수는 Window 객체의 프로퍼티이다.
window 프로퍼티로 참조하고 싶을때는 window.프로퍼티 로 작성할 수 있다(window.은 생략 가능)

대화 상자(alert, prompt, confirm)
Console 객체
이벤트 처리기를 등록하는 방법
타이머(setTimeout, setInterval)
document.write
Canvas

13.2 Location 객체

Location 객체는 창에 표시되는 문서의 URL을 관리한다.

프로퍼티	설명	예
hash	앵커부분	#anchor
host	호스트이름:포트번호	www.exapmle.com:80
hostname	호스트 이름	www.example.com
href	전체 URL	http://www.example.com:80/test/index.html?g=value#anchor
pathname	웹 사이트의 루트를 기준으로 한 상대 경로	/test
port	포트번호	80
protocol	프로토콜	http:
search	질의 문자열	?q=value

메서드	설명
assign(url)	url이 가리키는 문서를 읽는다. 웹 브라우저의 이력에 남는다.
reload()	문서를 다시 읽어 들인다.
replace(url)	url로 이동한다. 웹브라우저의 이력에 남지 않는다.
toString()	location.href 값을 반환한다.

13.3 History 객체

History 객체는 창의 웹페이지 열람 이력을 관리한다.

프로퍼티	설명
length	현재 세션의 이력 개수(읽기 전용)
scrollRestoration	웹페이지를 이동한 후에 동작하는 웹 브라우저의 자동 스크롤 기능을 켜거나 끄는 값. "auto" 또는 "manual"이 들어갈 수 있다
state	pushState와 replaceState 메서드로 설정한 state값(읽기 전용)

메서드	설명
back()	창의 웹 페이지 열람 이력을 하나 되돌린다
forward()	창의 웹 페이지 열람 이력을 하나 진행한다
go(number)	창의 웹 페이지 열람 이력을 number만큼 진행한다. number 값이 음수이면 그만큼 되돌린다
pushState(state, title url)	창에 웹 페이지 열람이력을 추가한다. 페이지는 이동하지 않는다
repalceState(state, title url)	현재 창의 열람 이력을 수정한다.

13.4 Navigator 객체

Navigator 객체는 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리한다.
Navigator 객체는 브라우저 테스트에 활용한다.(userAgent 프로퍼티 한정)

프로퍼티	설명
appCodeName	웹 브라우저의 내부 코드 네임. 정확하지는 않음
appName	웹 브라우저 이름. 정확하지 않음
appVersion	웹 브라우저 버전. 정확하지 않음
geolocation	단말기의 물리적 위치를 관리하는 Geolocation 객체
language	웹 브라우저의 UI 언어("en","en-US","ko","ko-KR", "fr")
mimeTypes[]	웹 브라우저가 지원하는 MIME 타입 목록을 저장한 MimeTypeArray 객체
onLine	웹 브라우저가 네트워크에 연결되어 있는지를 뜻하는 논리 값
platform	웹 브라우저의 플랫폼. 윈도는 "win32", 맥은 "MacIntel"
plugins	웹 브라우저에 설치된 플러그인 목록을 가리키는 Plugin 객체의 배열
userAgent	웹 브라우저가 USER-AGENT 헤더에 보내는 문자열

메서드	설명
javaEnabled()	Java를 이용할수 있는지를 뜻하는 논리값을 반환
getUserMedia()	단말기의 마이크와 카메라에서 audio와 video스트림을 반환
registerContentHandler(mimeType, uri, title)	웹 사이트를 특정 MIME타입과 연결
registerContentHandler(mimeType, uri, title)	웹 사이트를 특정 프로토콜과 연결
vibrate()	단말기를 진동시킴

13.5 Screen 객체

Screen 객체는 화면(모니터) 크기와 색상 등의 정보를 관리한다.

프로퍼티	설명
availTop	사용할 수 있는 화면의 첫 번째 픽셀의 y좌표
availLeft	사용할 수 있는 화면의 첫 번째 픽셀의 x좌표
availHeight	사용할 수 있는 화면의 높이
availWidth	사용할 수 있는 화면의 너비
colorDepth	화면의 색상 심도(비트 수): 약 1678만 색상이면 24
pixelDepth	화면의 색상 심도(비트 수): 약 1678만 색상이면 24
height	화면 높이
width	화면 너비
orientation	화면 방향

사용할 수 있는 화면이란 화면에서 작업 표시줄 등을 제외한 나머지 부분

13.6 Document 객체

Document 객체는 창에 표시되고 있는 웹 페이지를 관리한다.
이 객체로 웹 페이지의 내용물인 DOM 트리를 읽거나 쓸 수 있습니다.

프로퍼티	설명
characterSet	문서에 적용된 문자 인코딩(읽기 전용)
cookie	문서의 cookie를 쉼표로 연결한 문자열
domain	문서의 도메인(읽기 전용)
lastModified	문서를 마지막 수정한 날(읽기 전용)
location	window.location프로퍼티와 마찬가지로 Location객체를 가리킴
readyState	문서를 읽어 들인 상태(읽기 전용)
referrer	문서에 링크된 페이지 URL(읽기 전용)
title	문서 제목
URL	문서 URL(읽기 전용)

메서드	설명
close()	document.open() 메서드로 연 문서를 닫는다
open()	문서를 쓰기 위해 연다
write(text)	document.open() 메서드로 연 문서에 기록한다.
writeIn(text)	document.open() 메서드로 연 문서에 기록하고 개행 문자를 추가한다

13.7 창 제어하기

13.7.1 창 여닫기

var w = open(url, 창의 이름, 옵션)

url: 새롭게 여는 창이 읽어 들이는 문서의 URL. 생략시 빈페이지
창의 이름: 새로운 창의 이름. 이미 이름 같은 창이 있으면 새로 열지 않고 그 창에 표시. 인수를 생략하면 이름 없는 창을 연다.
옵션: 새로운 창의 설정 값을 쉼표로 연결해서 표기

옵션의 이름	설명
width	창 너비
height	창 높이
location	주소 표시줄 표시 여부(yes 또는 no)
scrollbars	스크롤 막대 표시 여부(yes 또는 no)
resizable	창 크기의 변경 가능 여부(yes 또는 no)
toolbar	도구 모음 표시 여부(yes 또는 no)
status	상태 표시줄 표시 여부(yes 또는 no)
menubar	메뉴 막대 표시 여부(yes 또는 no)