📔 브라우저 객체
브라우저 조작을 위한 기능을 모아둔 객체들의 총칭
🔸 브라우저 객체의 계층 구조
- window 객체
: 최상위 객체, JavaScript의 글로벌 객체
: 클라이언트 측 JavaScript가 기동하는 타이밍에 자동으로 생성되어 글로벌 변수나 글로벌 함수에 액세스하기 위한 수단을 제공
: 모든 브라우저 객체에는 window 객체를 통해 액세스함 - Document 객체
윈도우에 표시된 문서를 나타내는 객체 - History 객체
이력을 나타내는 객체 - Location 객체
URL 정보를 나타내는 객체
🔸 브라우저 객체에 액세스 하려면
글로벌 객체는 기본적으로 개발자가 의식할 필요가 없는 객체라 즉, 클라이언트 측 JavaScript에서는 기본적으로 Window 객체를 의식할 필요가 없음.
Location.reload();📔 브라우저 객체들이 제공하는 메소드 중 '기본적인 메소드들'
🔹 확인 대화상자 표시하기 - confirm 메소드
확인 대화상자를 표시하는 메소드이며 alert 메소드는 단지 메시지를 표시하기만 할뿐, confirm 메소드는 사용자에게 무언가 확인 의사 표시를 요구하는 역할을 함
<form id="fm">
<input type="submit" value="송신" />
</form>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('fm').addEventListener('submit', function(e) {
if (!window.confirm('페이지를 송샌해도 좋겠습니까?')) {
e.preventDefault();
}
}, false);
}, false);- confirm 메소드
[확인] 버튼 -> true
[취소] 버튼 -> false
그리고 [취소] 버튼을 클릭했을 경우, prevent Default 메소드를 호출하여 본래의 서브밋 이벤트를 취소함
🔹 타이머 기능 구현하기 - setInterval/setTimeout 메소드
일정 시간마다 혹은 일정 시간이 경과한 후에 어떠한 처리를 실시하고 싶은 경우
// 버튼 클릭시 타이머 처리를 중지
<input id="btn" type="button" value=" 타이머 정지 " />
<div id="result"></div>
document.addEventListener('DOMContentLoaded', function() {
// 타이머 설치
var timer = window.setInterval(
// 현재의 시간을 <div id="result"> 요소에 표시 (5000밀리초마다 갱신)
function() {
var dat = new Date();
document.getElementById('result').textContent = dat.toLocaleTimeString();
}, 5000);
document.getElementById('btn').addEventListener('click', function() {
window.clearInterval(timer);
}, false);
}, false);- setInterval 메소드
결정된 시간 간격으로 반복 처리를 실행함 - setTimeout 메소드
지정된 시간이 경과했을 때 처리를 한 번만 실행함
❗ 주의 할점 ❗
1) 인수 func에는 반드시 함수 리터럴로 지정
2) 어디까지나 지정된 시간에 큐에 처리를 등록할 뿐 지정한 시간으로 실행되는 것은 아님
3) 인수 dur가 0이면 메소드가 주어진 작업을 타이머로 인도하는 동안, JavaScript는 그대로 후속 코드를 실행함 = 비동기 처리
🔹 표시 페이지의 어드레스 정보 취득/조직하기 - location 객체
버튼을 클릭함으로써 별도의 페이지로 이동하거나 현재의 페이지를 리로드하고 싶은 경우
| 멤버 | 개요 | 반환값의 예 |
|---|---|---|
| hash | 앵커명(#~) | #gihyo?id=12345 |
| host | 호스트(호스트명+포트번호, 단 80의 경우는 포트번호 생략) | www.wings.msn.to:8080 |
| hostName | 호스트명 | www.wings.msn.to |
| href | 링크하는 장소 | http://www.wings.msn.to:8080/js/sample.html#gihyo?id=12345 |
| pathname | 패스명 | js/sample.html |
| port | 포트번호 | 8080 |
| protocol | 프로토콜명 | http: |
| search | 쿼리정보 | ?id=12345 |
| reload() | 현재의 페이지를 리로드함 | |
| replace(url) | 지정 페이지에 이동 |
<form>
<label for="isbn">서적:</label>
<select id ="isbn" name="isbn">
<option value="">---서적명을 선택해주세요---</option>
<option value="978-4-7981-1495-8">PHP</option>
<option value="978-4-8399-2438-6">ASP.NET AJAX</option>
<option value="978-4-7981-1363-0">SQL Server</option>
<option value="978-4-7980-1669-6">Pocket</option>
<option value="4-8399-2188-1">MySQL</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('isbn').addEventListener('change', function() {
location.href = 'http://www.wings.msn.to/index.php/-/A-03' + this.value;
}, false);
}, false);
🔹 이력에 따라 페이지를 전후로 이동하기 - history 객체
이력에 따라 전후 페이지로의 이동을 제어하고 싶을 경우, 브라우저의 페이지 이력을 관리하고 있는 hustory 객체 사용
<a href="JavaScript:history.back()">되돌아가기</a>
<a href="JavaScript:history.forward()">앞으로가기</a>
history.go(-3) // 3페이지 앞으로 되돌아간다 (지정된 페이지 수 만큼, 음수는 되돌아감)✔ JavaScript에 의한 조작을 브라우저의 이력에 남기기 - pushState 메소드
버튼을 클릭하여 JavaScript로 페이지를 갱신한 후 클릭 이전의 상태로 복원하고 싶어서 [뒤로] 버튼을 누르면 그대로 바로 앞의 페이지로 되돌아가 버리지만
JavaScript에서 언제라도 브라우저의 기록을 추가할 수 있는 pushState 메소드를 사용하여 브라우저의 이력을 남길 수 있음.
history.pushState(data, title, [, url])
// data : 이력에 관련된 데이터, title : 식별 제목(미사용), url : 이력에 관련된 URL<input id="btn" type="button" value="카운트 업" />
<span id="result">-</span>번 클릭되었다.
var count = 0;
var result = document.getElementById('result');
// [카운트 업] 버튼을 클릭했을 때 이력을 추가
document.getElementById('btn').addEventListener('click', function() {
result.textContent = ++count;
history.pushState(count, null, '/js/chap07/count/' + count);
});
// [뒤로] 버튼으로 페이지의 상태를 앞으로 되돌림
window.addEventListener('popstate', function(e) {
count = e.state;
result.textContent = count;
});