웹캠프8일차: JS Browser BOM + JS AJAX (1)

JS Browser BOM은 JavaScript가 브라우저와 "대화"할 수 있도록 도와주는 브라우저 개체 모델(BOM)이다.

The Window Object

윈도우 객체는 document객체의 parent 노드로써, 현 윈도우 페이지를 나타낸다.

윈도우 사이즈, 윈도우 열기, 닫기 등을 한다.

Window Location

윈도우의 정보를 알아내는데 사용된다.

현재 페이지의 url, path 주소 정보, 

Window History

현재 윈도우 히스토리를 트래킹하고 있어서 현재페이지에서 뒤로가기, 앞으로 가기 버튼을 만들수 있다.

(예를 들면 결제 페이지에서 "뒤로 가기" 버튼을 클릭해서 정보를 수정한다던지)

Popup Boxes

팝업 창을 활성화 시켜 작업을 수행할 수 있다. 

근데 팝업창은 단발성으로 그렇게 많이 사용되지 않아서 패스~

JavaScript Timing Events

Timing Events: 이벤트를 단발성, 주기적으로 활성화하기 위해서 사용하는 기능이다.

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.
1. setTimeout() --> 일정 시간 후 한번만 실행
2. setInterval() --> 주기적으로 일정 시간 후에 실행됨

또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공합니다.
3. clearTimeout() --> setTimeOut()이 실행되고, 일정 시간 후에 이벤트가 일어나기 전에 미리 취소하는 것
4. clearInterval() --> setInterval()이 실행되고, 일정 시간 후에 주기적으로 이벤트가 일어나기 전에 취소하는 것

기본적인 문법은 각각 아래와 같습니다: (window prefix 생략가능)

setTimeOut method:

window.setTimeout(호출할함수, 지연시간);

setInterval method:

window.setInterval(호출할함수, 지연시간);

함수 취소 방법 문법도 중요한데, timeoutID를 (timing함수 반환값을 저장하는 변수) clear 해줘야 한다!!

window.clearTimeout(timeoutID);

window.clearInterval(timeoutID);

아래는 주기적 함수 실행 함수인 setInterval()을 실행 중에 멈춰버리는 clearInterval()함수 예제입니다.

JavaScript Cookies

쿠키는 주로 사용자 정보를 일정 기간 동안 저장하여, 사용자가 웹에 접근할때 서버에서 미리 사용자 정보로 사용자를 위해 커스텀 정보를 주거나 할 때 사용된다. 쿠키를 통해 또한 서버의 작업을 줄여줄 수 있다. 

자바스크립트 쿠키는 웹 설명이 더 간단 명료하다.

www.w3schools.com/js/js_cookies.asp

 

이어서, JS AJAX를 위한 다음 포스트를 참조해주세요!

binarywoo.tistory.com/19