웹 브라우저의 자바스크립트

Window 객체

BOM(Browser Object Model)

• 웹 브라우저 전체를 객체로 관리하는 것.

• 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해놓은 것.
  

• 브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어진다. 이들은 웹 문서(DOM을 사용해 제어)와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이고 각자 또 다른 하위 객체를 갖는다.

자주 사용하는 브라우저 내장 객체

이름	설명
Window	브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document	웹 문서에서 <body.> 태그를 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.
History	현재 창에서 사용자 방문 기록을 저장하고 있는 객체
Location	현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator	현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용 중인 화면을 다루는 객체

Window 객체

• 웹 브라우저의 상태를 제어하는 객체.
• 자바스크립트 객체 중 최상위이자 기본이 되는 객체.
• 자바스크립트의 모든 객체는 Window 객체에 포함된다.

자주 사용되는 Window 객체의 속성

• 형식 : [객체이름.속성이름]

속성	설명
document	브라우저 창에 표시된 웹 문서에 접근할 수 있다
frameElement	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환 포함되어 있지 않으면 null을 반환
innerHeight,innerWidth	(웹 사이트)내용 영역의 높이,너비
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location	Window 객체의 위치 / 현재 URL을 나타냄
name	브라우저 창의 이름을 가져오거나 수정
outerHeight,outerWidth	브라우저 창의 바깥 높이,너비
pageXOffset	스크롤했을 때 화면이 수평으로 이동하는 픽셀 수
pageYOffset	스크롤했을 때 화면이 수직으로 이동하는 픽셀 수
parent	현재 창이나 서브 프레임의 부모 프레임
ScreenX,ScreenY	브라우저 창의 왼쪽, 위쪽 테두리가 모니터 왼쪽,위쪽 테두리로부터의 거리를 나타냄
scrollX, scrollY	스크롤했을 때 수평,수직으로 이동하는 픽셀 수
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환

자주 사용되는 Window 객체의 함수

• Window 객체에서 사용할 수 있는 함수는 웹 브라우저 창 자체와 관련된 것이 대부분이다.
• Window 객체는 기본 객체이기 때문에 window를 생략하고 함수 사용 가능.
  

Navigator 객체

• Navigator 객체에는 웹 브라우저와 관련된 정보가 담겨있다.
• 사용자가 수정할 수 없고 볼 수만 있다.

렌더링 엔진
레이아웃 엔진이라고도 한다. 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램이다.
웹 브라우저마다 내장된 렌더링 엔진이 다르기 때문에 표준화되지 않은 CSS3속성 앞에 --webkit 또는 -oz-같은 접두어를 붙여서 사용자가 접속한 브라우저에 맞게 렌더링 한다.

History 객체

• History 객체에는 브라우저에서 '뒤로','앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 저장됨.
• 보안상의 이유로 브라우저에 있는 브라우저 History는 read only이다.

History객체의 속성

• length : 현재 브라우저 창의 History 목록에 있는 항목의 개수(방문한 사이트 개수)를 반환
  History객체의 함수
• back(): History목록에서 이전 페이지를 현재 화면에 불러옴
• forward(): History목록에서 다음 페이지를 현재 화면에 불러옴
• go(): History목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러옴

Location 객체

• 브라우저의 주소 표시줄과 관련된 객체.
• 현재 문서의 URL 주소 정보를 가지고 있는데, 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있다.

Location 객체의 속성

Location 객체의 함수

Screen 객체

• 주로 화면 정보를 알아낼 때 많이 사용하는 객체.

Screen 객체와 Window 객체 속성의 차이점
Window 객체의 속성은 웹 브라우저 창의 너비나 높이를 측정하고, Screen객체의 속성은 화면 자체의 너비나 높이를 측정한다. 그래서 웹 브라우저 창의 크기를 늘리거나 줄인 후 새로고침을 누르면 Window 객체의 속성값은 바뀌지만 Screen 객체의 속성 값은 바뀌지 않는다.

문서 스크립팅

DOM (Document Object Model)

• HTML과 XML 문서의 내용을 조작하고 나타내는 기반 API.
• 웹 문서의 모든 요소(텍스트,이미지,표 등)를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

Dom Tree 구성요소

• 노드 : 웹 문서에 있는 요소나 속성 등을 나타냄
• 가지 : 노드와 노드 사이의 연결관계를 나타냄

Dom Tree의 웹 문서 표현

• 웹 문서의 태그는 요소(element)노드로 표현
• 태그가 품고 있는 텍스트틑 해당 요소 노드(태그)의 자식 노드인 텍스트 노드로 표현
• 태그의 속성은 모두 해당 요소 노트(태그)의 자식 노드인 속성(Attribte)노드로 표현
• 주석은 주석(Comment) 노드로 표현

노드의 종류
1.Document

• 제네릭 타입
• HTML또는 XML문서를 나타냄

2.Element

• 제네릭 타입
• 문서의 HTML요소를 나타냄

3.Text

• 텍스트를 나타냄

HTMLDocument와 HTMLelement는 좀 더 구체적으로 HTML의 문서와 요소만을 나타낸다.

DOM 요소 접근 방법

• 요소 노드까지만 접근 가능(id선택자,class값,tag이름으로 접근)
• 요소 노드 외의 텍스트 노드와 속성 노드까지 접근 가능 (querySelector(),querySelectorAll())

ID로 요소 선택하기

• 모든 html요소는 id속성을 가질 수 있다.
• id속성의 값은 한 문서 안에서 유일해야 하고, 한 문서에서 두 요소의 id가 같을 수 없다.
• Document객체의 getElmentById()메서드에 유일서잉 확보된 ID를 전달해서 특정 요소를 선택할 수 있다.(가장 일반적이고 간단한 방법)
• 스크립트로 특정 문서 요소들을 다루려면, 요소의 id속성을 스크립트에 넘겨서 해당 ID가 지정된 Element 객체를 찾으면 된다.
  -ID를 사용해서 여러 개의 요소를 찾아야 한다면, getElements()함수가 유용하다.

Name으로 요소 선택하기

• HTML name 속성의 원래 목적은 폼(form)요소에 이름을 부여하는 것으로, 폼 데이터를 서버에 전송할 때 사용한다.
• name속성은 id속성과 같은 방식으로 요소에 이름을 부여하지만 name속성의 값은 문서 안에서 id속성과 달리 유일성이 보장되지 않는다. ex) 라디오 버튼,체크 박스
• name속성이 일부 HTML요소에서만 의미가 있다. ex)폼과 폼안의 요소,<iframe.>,<img.>요소
• Document객체의 getElementByName()함수를 사용하면 name속성의 값을 이용해서 HTML 요소를 선택할 수 있다.
  -getElementByName()함수는 Document클래스가 아닌 HTMLDocument클래스에 정의되어 있어, XML문서에서는 사용할 수 없고 HTML 문서에서만 사용할 수 있다.
• 어떤 HTML요소에 name속성을 지정하면 전역 객체인 Window객체에 자동으로 같은 이름의 속성이 생성된다.
• form,img,iframe,applet,embed,object요소에 name속성을 지정하면,이 값을 이름으로 가지는 속성이 Document객체에 생성된다.

Type으로 요소 선택하기

• Document객체의 getElementByTagName()메서드를 사용하면 같은 Type의 HTML이나 XML요소를 한 번에 모두 선택할 수 있다.
• getElementsByName()과 getElementByTagName()메서드는 NodeList객체를 반환한다.

var firstpara = document.getElementByTagName("p")[0]

문서 객체를 선택할 때 사용하는 메서드

메서드 이름	설명
document.getElementById(아이디)	아이디를 사용해 문서 객체를 선택
document.querySelector(선택자)	선택자를 사용해 문서 객체를 선택
document.getElementByName(이름)	name 속성으로 여러 개의 문서 객체를 선택
document.getElementsByClassName(클래스)	class 속성으로 여러 개의 문서 객체를 선택
document.querySelectorAll(선택자)	선택자로 여러 개의 문서 객체를 선택

이벤트 다루기

이벤트 흐름

• 페이지에 이벤트가 전달되는 순서를 설명한다.

이벤트 핸들러

• 이벤트에 응답해서 호출되는 함수.
• "on"으로 시작한다.

1. 인라인 방식(Inline)

• 인라인 방식은 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다.
• HTML 코드에 자바스크립트를 추가함으로써 결국 HTML코드와 스크립트가 섞 여 사용 되기 때문에 관점에 따라서는 유지보수에 안좋을 것이다.

<button onclick="alert('클릭되었습니다.')">Click<button/>

2. 프로퍼티 방식(Property)

• 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식이다.
• HTML 코드와 자바스크립트가 섞여 사용되지 않는다.
• 하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러만 바인딩 가능하다.

<input type="button" id="button" value="클릭!" />
<script>
button.onclick = () => {
 alert('클릭되었습니다.');
};
</script>

3. addEventListener() 방식, attachEvent() 방식
   객체.addEventListener('이벤트타입', 함수명[, 이벤트전파방식]);

• addEventListener()에는 세 개의 전달인자가 있다.
  -> 핸들러를 등록할 이벤트명.
  -> 지정한 이벤트 타입이 발생할 때 실행할 함수
  -> 불리언 값. false가 디폴트. true로 넘기면, 함수는 캡처링 이벤트로 핸들러를 등록하고 버블링과 다른 이벤트 전파단계에서 호출된다.
• 프로퍼티 방식에서는 1개의 이벤트 핸들러만 바인딩 가능했지만, 하나 이상의 이벤트 핸들러를 바인딩할 수 있다.
• 캡처링과 버블링을 지원한다.

캡처링과 버블링

버블링

• 이벤트 타깃이 Document객체 혹은 문서 요소라면 이벤트 핸들러가 실행된 후, 대부분의 이벤트는 DOM계층 구초를 따라서 타고 올라간다.
• 타깃 객체의 부모 객체에 등록된 이벤트 핸들러가 호출되고 다시 그 부모 객체에 등록된 핸들러가 호출된다.이런 과정은 Document객체를 지나서 Window객체까지 이어진다.

캡처링

• Window객체의 캡처링 핸들러가 맨 처음 호출되고, Document객체의 캡처링 핸들러가 그 다음 호출되며, body객체가 그 다음 호출되는 식으로, 이벤트 타깃으로 지정한 객체의 부모의 이벤트 핸들러가 캡처링될 때까지 DOM계층 구조를 타고 내려간다.
• 타깃 객체에 이벤트를 전달하기 전에 이벤트를 살펴볼 기회를 제공한다
• 캡처링 이벤트 핸들러는 디버깅을 위해 사용하거나, 이벤트를 걸러내어 타깃 이벤트가 실제로 호출되지 않게 하는 이벤트 취소 기법에서 사용될 수 있다.

이벤트 취소

• 이벤트 기본동작을 취소하기 위해 이벤트 객체의 preventDefault()메소드를 호출할 수 있다.
• 이벤트 전파가 진행되는 것을 막기 위해 stopPropagation()메서드를 호출할 수 있다.
• stopPropagation() 메서드를 호출한 후 나머지 핸들러가 호출되지만, 다른 객체에 있는 이벤트 핸들러는 이벤트 전파를 멈추었으므로 호출되지 않는다.
• stopPropagation()메서드는 캡처링 단계,이벤트 타깃 객체 단계,버블링 단계에서 모두 동작한다.

HTTP 스크립팅

XMLHttpRequest사용하기

브라우저는 XMLHttpRequest클래스에 HTTP API를 정의한다.
이 클래스의 각 인스턴스는 요청과 응답의 한 쌍을 나타내며, 이 객체의 프로퍼티와 메서드는 요청에 대한 세부사항을 설정하고 응답 데이터를 추출할 수 있도록 한다.

HTTP 요청의 구성

• HTTP요청방법 또는 동사(verb)
• 요청된 URL
• 인증정보를 포함하는 부속 요청 헤더
• 요청 본문(선택사항)

서버로부터 받은 HTTP 응답의 구성

• 요청의 성공과 실패를 구분할 수 있는 숫자와 문자 상태 코드
• 응답 헤더의 집합
• 응답 본문

요청 설정하기

XMLHttpRequest 객체를 생성했다면, XMLHttpRequest객체의 open()메서드를 사용하여 HTTP요청을 만드는 데 필요한 두 요소를 지정한다.

request.open("GET", //HTTP GET요청으로
	     "data.csv"); //이 URL의 내용을 가져오도록 만든다.

open() 메서드의 첫 번째 인자는 HTTP요청 방식 또는 동사다. 대소문자 구분 없이 지정할 수 있으나 HTTP 프로토콜에서는 일반적으로 대문자를 사용한다.
GET,POST 요청 방식은 보편적으로 지원된다

GET

• 가장 일반적인 요청 방식
• 해당 URL이 필요로 하는 리소스를 정확히 가리키고 있을 때나 해당 요청이 서버에 별다른 영향을 끼치지 않을 때, 응답이 캐시될 수 있는 상황일 때 사용된다.

POST

• HTML 폼에서 주로 사용되는 방식
• 추가적인 데이터(폼 데이터)를 요청 본문에 포함할 수 있고, 해당 데이터는 서버의 데이터베이스에 저장되기도 한다.
• 똑같은 URL에 반복적으로 POST요청을 보내더라도 서버의 응답은 각각 다를 수 있으므로 이 방식의 요청은 캐시되지 않아야 한다.

open() 메서드의 두 번째 인자는 요청할 목적 URL이다. 이 URL은 open()메서드를 호출하는 스크립트를 포함하는 문서의 URL과 관련이 있다. 특정 프로토콜과 호스트,포트를 지정한 절대 URL을 사용할 때는 일반적으로 현재 문서의 URL구성 요소들과 일치해야 한다.

요청 과정의 다음 단계는 요청 헤더를 설정하는 것이다.

request.setRequestHeader("Content-Type","text/plain");

XMLHTTPRequest를 사용해서 HTTP 요청을 만드는 마지막 단계는, 부가적인 요청 본문을 지정하고 서버로 전송하는 것이다. 이 작업은 send()메서드로 수행한다.

request.send(null);
//GET 요청은 본문을 가질 수 없으므로, 
send()메서드의 인자를 null로 지정하거나 생략해야 한다.

응답 데이터 가져오기

완료된 HTTP응답에는 상태 코드와 응답 헤더,응답 본문이 존재한다. 이런 응답에 대한 구성요소에는 XMLHTTPRequest객체의 프로퍼티와 메서드로 접근할 수 있다.

• status와 statusText 프로퍼티는 HTTP의 상태를 숫자와 문자 형태로 반환한다. ex) 200 / "OK" , 404 / "Not Found"
• 응답 헤더는 getResponseHeader()와 getAllResponseHeader() 메서드를 통해 조회할 수 있다.
• 응답 본문은 responseText 프로퍼티를 통해 텍스트 형태로 반환되거나 responseXML 프로퍼티를 통해 문서 형태로 반환될 수 있다.

클라이언트 스토리지

로컬 스토리지와 세션 스토리지

Window객체에 로컬 스토리지와 세션 스토리지 프로퍼티가 정의되어 있다.
두 프로퍼티 모두 문자열 키 값이 대응되어 있는 영속적 연관 배열인 Storage객체를 가리킨다. Storage객체는 간단히 객체에 문자열로 프로퍼티를 만들고 브라우저가 데이터를 저장하는 식으로, 정규 자바스크립트 객체와 매우 유사하게 동작한다. 로컬 스토리지와 세션 스토리지는 데이터를 얼마나 오래 보관할지 결정하는 생명 주기와 접근 가능 대상을 지정하는 범위에 차이가 있다.

로컬 스토리지

• 저장된 데이터의 만료기한이 없고, 웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의 특정 인터페이스를 통해 삭제하기 전까지는 사용자의 컴퓨터에 존재한다.
• 로컬 스토리지의 범위는 문서의 출처에 국한된다. 문서의 출처가 동일하다면 서로의 데이터를 읽을 수 있으며, 덮어쓸 수도 있다.

세션 스토리지

• 최상위 창이나 해당 스크립트를 실행하는 브라우저의 탭과 생명주기가 같다. 창이나 탭이 닫히면 저장된 데이터는 삭제된다.
• 세션 스토리지의 범위는 문서의 출처에 국한된다. 출처가 다른 문서들끼리는 세션 스토리지를 공유할 수 없다.

쿠키

• 쿠키는 웹 브라우저에 의해 저장되는 이름을 가진 작은 크기의 데이터이며, 웹 페이지 또는 사이트에 한정된 스토리지이다.
• 쿠키 데이터는 웹브라우저와 서버 사이에서 자동으로 전송되므로, 서버 측 스크립트는 클라이언트에서 저장된 쿠키의 값을 읽거나 쓸 수 있다.
• 각 쿠키의 생명주기와 범위는 쿠키 속성으로 개별 지정할 수 있다.

쿠키의 생명주기와 범위
쿠키는 웹브라우저 세션에 머무는 동안 마지막으로 저장된 값이지만, 사용자가 브라우저를 종료하면 모든 값이 사라진다. 쿠키는 하나의 창에 제한되지 않으며 전체 브라우저의 생명주기와 같다.