[자바스크립트] 객체(2)

브라우저 관련 객체의 계층 구조

브라우저 관련 객체의 계층 구조

---

브라우저 관련 객체 - window 객체

window 객체의 프로퍼티

- 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용

- 프로퍼티 이름 앞에 'window.'을 붙인다.

※ 로컬 스토리지 : 영구 저장공간

※ 세션 스토리지 : 임시 저장공간

window 객체의 메서드

- winodw객체는 기본 객체이므로 '.winodw'를 생략하고 메서드 이름만 사용해도 된다.

- alert : 알림창 표시

- pormpt : 프롬프트 창에 입력한 텍스트 반환

- print : 현재 문서 인쇄

- focus : 현재 창에 포커스 부여

- open : 새로운 창 열기

• 링크를 클릭하거나 웹 문서를 열때 새창이 자동으로 뜨게하려면 window.open()메서드를 사용하여 팝업 창을 띄운다.
• window.open(경로(문서이름), 창 이름, 창 옵션)
• 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타낸다.
• 창 이름 : 팝업 창의 이름을 지정하면 이 창에 팝업 내용이 나타나도록 할 수 있다. 이름을 지정하지 않으면 팝업창이 계속 새로 나타난다. 
• 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있다. 위치를 지정하지 않으면 팝업창은 왼쪽 상단에 나타난다.

- close : 현재 창 닫기

- scroll : 문서에서 특정 위치로 스크롤

- https://developer.mozilla.org/ko/docs/Web/API/Window

Window - Web API | MDN

 

---

브라우저 관련 객체 - navigator 객체

navigator 객체

- 사용하는 브라우저가 많아지고, 웹 애플리케이션이 등장하면서 navigator객체에 여러 프로퍼티가 등장하고 있다.

- 일부 프라우저에서만 지원하는 프로퍼티도 있다.

 

주요 프로퍼티

- cookieEnabled : 쿠키 정보를 무시하면 false, 허용하면 ture 반환

- geolocation : 모바일 기기를 이용한 위치 정보를 나타냄

- language : 브라우저 UI의 언어 정보를 나타냄

- https://developer.mozilla.org/ko/docs/Web/API/Navigator

Navigator - Web API | MDN

---

브라우저 관련 객체 - history객체

history 객체

- 방문한 사이트 주소가 배열 형태로 저장됨

- 이때 배열은 read only이다.

 

주요 프로퍼티 

length : 현재 브라우저 창의history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수 저장

 

주요 메서드

- back : history목록에서 이전 페이지를 현재 화면으로 불러옴

- forward : history 목록에서 다음 페이지를 현재화면으로 불러옴

- go : history목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재화면으로 불러옴

history.go(1) // 다음 페이지를 가져온다.
history.go(-1) // 이전 페이지를 가져온다.

 

---

브라우저 관련 객체 - location객체

location 객체

- 현재 문서의 URL주소 정보가 담겨 있음

- 이 정보를 편집해서 브라우저 창에서 열 사이트/문서를 지정함

- 주소표시줄과 관련된 객체이다.

 

주요 프로퍼티

- href : 전체 URL, 값을 입력하면 해당 주소로 이동함

- hash : URL 중에서 #로 시작하는 해시부분의 정보를 담고 있음

- host : URL의 호스트 이름과 포트 번호를 담고 있음

- search : URL 중에서 ?로 시작하는 검색내용을 저장함

 

주요 메서드

- reload : 현재 문서를 다시 불러옴

- replace : 현재 문서의 URL을 지우고 다른 URL의 문서로 교체

- toString :  현재 문서의 URL을 문자열로 변환

 

※ http://와 https://차이 

- https://의 s는 security로 보안을 나타낸다. 

- http://의 포트번호는 80이고, https://의 포트번호는 443이다.

---

브라우저 관련 객체 - screen 객체

screen 객체

- 사용자의 화면 정보를 다룬다.

 

주요 프로퍼티

- availHeight : UI영역(윈도우 작업표시줄 등)을 제외한 영역의 높이를 나타냄

- availWidth : UI영역을 제외한 내용 표시영역의 너비를 나타냄

- height :  UI 영역을 포함한 화면의 높이르 나타냄

- width : UI 영역을 포함한 화면의 너비를 나타냄

- pixeDepth : 화면에서 픽셀을 렌더링 할 때 사용하는 비트수를 나타냄

- colorDepth : 화면에서 픽셀을 렌더링 할 때 사용하는 색상 수를 나타냄

- orientation : 화면의 현재 방향을 나타냄

 

주요 메서드

- lockOrientation : 화면의 방향을 잠금

- unlockOrientation : 화면의 방향 잠금 해제

 

// 팝업창 화면 가운데 호출
function openCenter(doc, win, w, h) {
var left = (screen.availWidth - w) / 2; // UI영역 제외 너비에서 팝업창 너비 제외/2
var top = (screen.availHeight - h) / 2; // UI영역 제외 높이에서 팝업창 높이 제외/2
var opt =
    "left=" + left + ", top=" + top + ", width=" + w + ", height = " + h;
    window.open(doc, win, opt);
}

openCenter("notice.html", "pop", 500, 400);