13.1 클라이언트 측 자바스크립트👊
13.1.1 웹에서 JS가 하는 일
정적인 웹페이지에 자바스크립트를 사용하면 동적으로 만들 수 있다.
- 웹 페이지의 Document 객체 제어(HTML, CSS 작업)
- 웹 페이지의 Window 객체 제어 및 브라우저 제어
- 웹 페이지에서 발생하는 이벤트 처리
- HTTP를 이용한 통신 제어
최신 웹 브라우저에서는 다음과 같은 기능을 제공한다.
- 파일 읽기와 쓰기
- 데이터베이스 기능
- 비동기 통신
- 2,3차원 그래픽 등등..
이전까지는 자바스크립트의 속도가 매우 느렸으나, 크롬과 파이어폭스가 실행 중에 JS코드를 컴파일하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 빠른 실행 속도를 구현했다.
13.1.2 자바스크립트 코드를 삽입하는 방법 4가지
1. script 요소의 내용물로 작성하기 (인라인 스크립트)
<script>
console.log("Hello"); // JS 코드
</script>2. 외부 파일 읽어 들이기 (외부 스크립트)
<script src="../scripts/sample.js"></script>3. 이벤트 처리기 속성에 작성하기
<input type="button" value="click" onclick="console.log('Hello!');">4. JavaScript : URL (자바스크립트 의사 프로토콜)
<a href="javascript:console.log('I\'m pretty good!');">What's going on?</a>최근에는 자바스크립트 코드에서 3번, 4번을 거의 사용하지 않는다. 이벤트 처리기를 등록할 때는 3번 대신 addEventListener 메서드를 사용한다.
13.1.3 웹 브라우저에서의 자바스크립트 실행 순서
웹 브라우저에서 HTML문서를 분석하고 표시하는 프로그램을 렌더링 엔진이라고 한다. 렌더링 엔진은 다음과 같은 처리 과정을 거쳐 HTML 문서의 구문을 분석하고 DOM 트리를 구축한 후에 JS코드를 실행한다.
- 웹 브라우저로 웹 페이지를 열면 가장 먼저
Window 객체가 생성된다.
Document 객체가Window 객체의 프로퍼티로 생성되며 웹 페이지를 해석해서DOM 트리의 구축을 시도한다.Document 객체는 readState 프로퍼티를 가지고 있고 초깃값은loading이라는 문자열이다.
- HTML문서는 HTML구문을 작성 순서에 따라 분석하며
Document 객체요소와 텍스트 노드를 추가한다.
- HTML문서 안에
script요소가 있으면script코드의 구문을 분석하고 그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행한다.script코드가 실행할 때는 HTML문서의 구문 분석이 일시적으로 멈추고script코드가 완료하면 다시 HTML문서 구문 분석을 실행한다 (script요소는 동기적)
- HTML문서의 모든 내용을 읽고 DOM 트리 구축을 완료하면
document.readState프로퍼티 값이interactive로 바뀐다.
- 웹 브라우저는
Document 객체에 DOM트리 구축 완료를 알리기 위해DOMContentLoaded 이벤트를 발생시킨다.
- 이 시점에 img 등 외부 리소스를 읽어들인다.
- 모든 리소스를 읽어 들인 후에는
document.readState프로퍼티 값이complete로 바뀐다. 그리고 웹 브라우저는 Window 객체를 상대로load 이벤트를 발생시킨다.
- 이 시점부턴 다양한 이벤트(사용자 정의, 네트워크 이벤트)를 수신하고 발생하면 이벤트 처리기가 비동기로 호출된다.
async와 defer 속성
script 요소의 논리 속성으로 HTML5부터 추가된 속성이다. 이 속성들을 사용하면 자바스크립트 코드를 실행할 때 HTML구문 분석을 막지 않는다.
<script async src="../scripts/sample.js"></script>
<script defer src="../scripts/sample.js"></script>async
- script 요소의 코드가 비동기적으로 실행된다.
- 여러 개의 script 요소에 async 속성을 설정하면 다 읽어들인 코드부터 비동기적으로 실행하므로 순서가 보장되지 않는다.
defer
- script 요소의 코드가 DOM 트리 구축이 끝난 후에 실행된다.
- DOM 구축이 끝난 상태이기 때문에 초기화 작업을 할 수 있다. 따라서 DOMContentLoaded 이벤트의 대안으로 활용가능
13.1.4 크로스 브라우징 대책
ECMAScript 5를 지원하지 않는 오래된 웹 브라우저에서도 문제없이 웹 페이지를 표시하고 같은 기능을 사용할 수 있도록 대응하는 작업을 크로스 브라우징 대책 이라고 한다.
- 기능성 테스트
- 브라우저 테스트
- 라이브러리를 사용해서 대응하기
이런 방법들이 있구나 정도로 생각하면 될 것 같다.
13.1.5 Window
클라이언트 측 자바스크립트에서 가장 중요한 객체는 Window 객체이다. 전역 객체이고 전역 변수는 Window 객체의 프로퍼티이다.
Window 객체의 주요 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| screen | Screen 객체를 가리킨다. |
| document | Document 객체를 가리킨다. |
| location | Location 객체를 가리킨다. |
| navigator | Navigator 객체를 가리킨다. |
| parent | 해당 창이 프레임 안의 창이면 부모 window 객체를 가리킨다. |
| closed | 현재 창이 닫혀 있는지를 뜻하는 논리값. |
| screenX, screenY | 화면의 왼쪽 윗부분을 기준으로 수평위치와 수직 위치. |
| innerHeight, innerWidth | 창 안쪽의 높이와 너비(스크롤 영역은 제외). |
| outerHeight, outerWidth | 창 바깥의 높이와 너비(스크롤 영역 포함). |
| scrollX, scrollY | 수평 방향과 수직 방향으로 HTML 문서가 스크롤되는 픽셀의 수. |
Window 객체의 주요 메서드
| 메서드 | 설명 |
|---|---|
| alert(message) | 경고 대화상자를 표시. |
| prompt(message, default) | 입력 대화상자를 표시. |
| confirm(question) | 확인 대화상자를 표시. |
| setTimeout(callback, interval) | interval마다 callback을 호출. |
| setInterval(callback, delay) | delay후에 callback을 호출. |
| blur() | 창에서 포커스를 제거. |
| focus() | 창에 포커스를 준다. |
| moveBy(x,y) | 창을 수평으로 x, 수직으로 y만큼 이동. |
| moveTo(x,y) | 창을 좌표 (x,y)로 이동. |
| resizeBy(width, height) | 창의 너비를 width, 높이를 height만큼 키운다. |
| resizeTo(width, height) | 창의 너비를 width, 높이를 height로 설정한다. |
13.2 Location 객체👊
Location 객체는 창에 표시되는 문서의 URL을 관리한다. window.location 또는 location으로 참조 할 수 있다.
Location 객체의 프로퍼티
| 프로퍼티 | 설명 | 예 |
|---|---|---|
| hash | 앵커 부분 | #anchor |
| host | 호스트 이름 : 포트번호 | www.example.com:80 |
| hostname | 호스트 이름 | www.example.com |
| href | 전체 URL | http://www.example.com:80/test/index.html?q=value#anchor |
| pathname | 웹 사이트의 루트를 기준으로 한 상대 경로 | /test |
| protocol | 프로토콜 | http: |
| search | 질의 문자열 | ?q=value |
Location 객체의 메서드
| 메서드 | 설명 |
|---|---|
| assign(url) | url이 가리키는 문서를 읽는다. 웹 브라우저의 이력에 남는다. |
| reload() | 문서를 다시 읽어 들인다. |
| replace(url) | url로 이동한다. 웹 브라우저의 이력에 남지 않는다. |
| toString() | location.href 값을 반환한다. |
Location 객체의 사용 예
- 해당 URL이 가리키는 문서를 읽어들인다. (이력이 남기 때문에 뒤로가기 버튼으로 돌아갈 수 있다.)
location.href = "http://www.gulbut.co.kr/";
location.assign("http://www.gulbut.co.kr/");- URL이 가리키는 문서를 읽어 들일 때 이력을 남기지 않는다. (뒤로가기 버튼으로 돌아갈 수 없다.)
location.replace("http://www.gilbut.co.kr/");- URL에 상대경로를 지정할 수도 있다. 다음 코드는 3초 후에 같은 사이트의 다른 페이지로 이동하는 코드이다.
setTimeout(function () {
location.replace("/book/bookList.aspx");
}, 3000);- reload로 현재 페이지를 다시 읽어들인다.
location.reload();- hash 프로퍼티에 HTML 요소의 id를 대입하면 그 요소로 스크롤한다.
location.hash = "#header"; // id = "header"인 요소로 스크롤- search 프로퍼티 값을 바꾸면 서버에 질의 문자열로 보낸다.
location.search = "some data"; // URL 끝에 "?some%20data"를 덧붙여 서버에 보낸다13.3 History 객체👊
History 객체는 창의 웹 페이지 열람 이력을 관리한다. window.history 또는 history로 참조 가능하다.
History 사용 예는 다음과 같다.
- 웹 페이지 열람 이력을 진행하거나 되돌아갈 때는 back과 forword메서드를 사용
history.back(); // 웹페이지 열람 이력 하나 되돌아가기
history.forward(); // 웹페이지 열람 이력 하나 진행하기- 횟수를 지정해서 돌아가거나 진행할 땐 go 메서드를 사용
history.go(-3); // 웹 페이지 열람 이력 세 개 되돌아가기
history.go(2); // 웹 페이지 열람 이력 두 개 진행하기- 페이지 전환을 하지 않고 열람 이력만 추가하고자 할 때는 pushState 메서드를 사용
history.pushState(null, null, "page2.html");
// pushState의 인수는 3가지가 있다.
// state : 새롭게 추가되는 웹 페이지 열람 이력과 연결할 객체
// title : 새로운 열람 웹 페이지 이력을 가리키는 문자열
// url : 새로운 열람 이력의 URL13.4 Navigator 객체👊
Navigator 객체는 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리한다.
Navigator 객체의 주요 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| appCodeName | 웹 브라우저의 내부 코드 네임. 정확하지 않음 |
| appVersion | 웹 브라우저의 버전. 정확하지 않음 |
| onLine | 웹 브라우저가 네트워크에 연결되어 있는지를 뜻하는 논리값 |
Navigator 객체의 주요 메서드
| 메서드 | 설명 |
|---|---|
| javaEnabled() | Java를 사용할 수 있는지를 뜻하는 논리값 반환 |
| getUserMedia() | 단말기의 마이크와 카메라에서 audio와 video 스트림을 반환 |
13.5 Screen 객체👊
Screen 객체는 화면 크기와 색상 등의 정보를 관리한다.
Screen 객체의 주요 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| availTop, availLeft | 사용할 수 있는 화면의 첫 번째 픽셀의 y, x좌표 |
| availHeight, availWidth | 사용할 수 있는 화면의 높이, 너비 |
| orientation | 화면 방향 |
위의 표에 나와있는 "사용할 수 있는 화면"이란 작업 표시줄 등을 제외한 나머지 부분을 뜻한다.
Screen 객체를 사용하면 스마트폰 등의 작은 화면에 표시할 때 작은 글꼴, 작은 화면을 표시할 떄 사용할 수 있다.
13.6 Document 객체👊
Document 객체는 창에 표시되고 있는 웹 페이지를 관리한다. Document 객체는 클라이언트 측 자바스크립트에서 가장 중요한 객체이다.
Document 객체의 주요 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| characterSet | 문서에 적용된 문자 인코딩(읽기전용) |
| cookie | 문서의 cookie를 쉼표로 연결한 문자열 |
| domain | 문서의 도메인(읽기전용) |
| lastModified | 문서를 마지막 수정한 날(읽기전용) |
| referrer | 문서에 링크된 페이지 URL |
| title | 문서 제목 |
| URL | 문서 URL(읽기 전용) |
Document 객체의 주요 메서드
| 메서드 | 설명 |
|---|---|
| close(), open() | 문서를 닫거나 연다 |
| write(text) | 문서를 쓰기 위해 연다 |
13.7 창 제어하기👊
웹 브라우저는 일반적으로 여러 개의 창과 탭을 표시한다. 각각의 창과 탭은 별도의 브라우징 컨텍스트(사용자에게 표시되는 환경)를 제공한다.
13.7.1 창 여닫기
// 창 열때
var w = open(url, 창의 이름, 옵션);
// 창 닫을 때
w.close();open 메서드의 인수
- url : 새롭게 여는 창이 읽어 들이는 문서의 URL
- 창의 이름 : 새로운 창의 이름. 같은 이름의 창이 있다면 그 창에 표시하고 이 인수를 생략하면 이름 없는 창을 연다.
- 옵션 : 새로운 창의 설정 값(창의 크기 등). 생략하면 기본 크기
open 메서드로 설정할 수 있는 옵션의 이름
| 옵션의 이름 | 설명 |
|---|---|
| width, height | 창 너비, 창 높이 |
| location | 주소 표시줄 표시 여부(yes or no) |
| scrollbars | 스크롤 막대 표시 여부(yes or no) |
| resizable | 창 크기 변경 가능 여부(yes or no) |
| toolbar | 도구 모음 표시 여부(yes or no) |
| status | 상태 표시줄 표시 여부(yes or no) |
| menubar | 메뉴 막대 표시 여부(yes or no) |
13.7.2 창 제어하기
open 메서드로 연 창은 위치와 크기를 바꾸거나 스크롤 할 수 있다.
위치 변경 moveBy, moveTo 메서드 사용
w.moveBy(10, 20);
w.moveTo(100, 150);크기 변경 resizeBy, resizeTo 메서드 사용
w.resizeBy(10, 20);
w.resizeTo(200, 150);스크롤 표시 scrollBy, scrollTo 메서드 사용
w.scrollBy(0, 100); // 아래쪽으로 100px 스크롤
w.scrollTo(0, 0); // 시작 위치로 이동