728x90
BOM
- 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문에 특정한 사이트로 이동, 새 탭 열기 등 브라우저와 관련된 여러 가지 효과를 만들 수 있음
- 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄
- 웹 브라우저가 열리면 window 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타남
window 하위에는 document, navigator, history, location, screen 객체가 존재 - window : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 존재
- document : 웹 문서마다 하나씩 있으며 body 태그를 만나면 만들어짐. HTML 문서의 정보가 담겨 있음
- navigator : 현재 사용하는 브라우저의 정보가 들어있음
- history : 현재 창에서 사용자의 방문 기록을 저장
- location : 현재 페이지의 URL 정보가 담여있음
- screen : 현재 사용하는 화면 정보를 다룸
window 객체의 프로퍼티
- window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 존재, 자바스크립트의 모든 객체는 window 객체 안에 포함
- window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용
- 프러퍼티를 사용하려면 프로퍼티 이름 앞에 'window.'를 붙임
document : 브라우저 창에 표시된 웹 문서에 접근
frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 그렇지 않다면 null을 반환
innerHeight : 내용 영역의 높이
innerWidth : 내부 영역의 너비
localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location : window 객체의 위치 또는 현재 URL을 나타냄
name : 브라우저 창의 이름을 가져오거나 수정
,....
window 객체의 메서드
- 웹 브라우저 창 자체와 관련
- alert()나 prompt()는 windwo 객체의 메서드임. 원래는 window.alert()나 window.prompt()라고 해야하지만 window 객체는 기본 객체이므로 'window.'을 생략해도 사용할 수 있음
- window 객체 메서드
alert() : 알림창
blur() 현재 창에서 포커스를 제거
close() : 현재 창 닫기
confirm() : 확인, 취소 버튼이 있는 확인 창을 표시
focus() : 현재 창에 포커스를 부여
open() : 새로운 창
,.... - 새 브라우저 창을 여는 open()
window.open(경로, 창이름, 창옵션)
경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄
창 이름 : 창 이름을 지정하지 않으면 팝업 창이 계속 새로 나타남
창 옵션 : left, top 속성을 사용해 위치를 정하거나 너비, 높이 속성을 사용해 크기를 지정할 수 있음. 지정하지 않으면 맨 왼쪽 위에 나타남
<script>
window.open("popup.html", "팝업창", "width=500, height=400");
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>popup.html</title>
</head>
<body>
<h1>
문서를 열면 팝업 창이 자동으로 열립니다.
</h1>
</body>
</html>
※ 최근 웹 브라우저의 팝업 창이 열리지 않도록 하는 것을 기본으로 설정되어 있는 경우가 있음 팝업 창을 여는 함수에서 웹 브라우저의 차단 여부를 확인해 줄 필요가 있음
<script>
// 팝업이 차단된 브라우저의 알림 창 표시
function openPopup(){
var popup = window.open("popup.html", "팝업창", "width=500, height=400");
if(popup == null){
alert("팝업이 차단되어 있습니다. 팝업을 허용해주세요.");
}
popup.moveBy(100,100);
}
</script>- 브라우저 창을 닫는 close()
일반적으로 팝업 창 내용을 모두 살펴본 후 창을 닫을 수 있도록 화면 아래 [닫기] 버튼이나 링크를 포함
window.close()
<button onclick="javascript:window.close();">닫기</button>navigator 객체
- 웹 브라우저 버전을 비롯해 플로그인 설치 정보나 온, 오프라인 등의 여러 정보가 담겨 있음
- 사용을 해본 적이 없지만 이를 잘 활용하면 사용자 환경에 맞는 기능을 제공할 수 있을 것 같음
주로 프론트 엔드 개발에 활용도가 높을 것으로 보임 - https://developer.mozilla.org/ko/docs/Web/API/Navigator
history 객체
- 방문한 사이트 주소가 배열 형태로 저장
- 브라우저 히스토리는 보안 문제로 읽기 전용
- 프로퍼티
length : 방문한 사이트 개수 - 메서드
back() : history 목록에서 이전 페이지를 현재 화면으로 불러옴
forward() : history 목록에서 다음 페이지를 현재 화면으로 불러옴
go() : 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴
back() == go(-1) / forward() == go(1)
location 객체
- 브라우저의 주소 표시줄과 관련
- 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정
- 프로퍼티
host : URL의 호스트 이름과 포트 번호를 담고 있음
href : 전체 URL. 이 값을 변경하면 해당 주소로 이동
,... - 메서드
reload() : 현재 문서를 다시 불러옴
replace() : 현재 문서의 URL을 지우고 다른 URL의 문서로 교체
toString() : 현재 문서의 URL을 문자열로 반환
<div id="display">
<script>
// 사이트 위치 고정하기
document.write("<b>location.href</b> : " + location.href+" <br> ");
document.write("<b>location.host</b> : " + location.host+" <br> ");
document.write("<b>location.protocol</b> : " + location.protocol+" <br> ");
</script>
</div>
<button onclick="location.replace(`https://001cloudid.tistory.com/category/organize/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%8A%B8%EB%A6%BD%ED%8A%B8`)">블로그 이동하기</button>
screen 객체
- 사용자의 화면 크기나 정보를 알아 낼 때 사용
- 프로퍼티
availHegiht
availWidth
colorDepth : 화면에서 픽셀을 렌더링 할 때 사용하는 색상 수
height
orientation : 화면의 현재 방향
pixelDepth : 화면에서 픽셀을 렌더링할 때 사용하는 비트 수
width - 메서드
lockOrientation() : 화면 방향을 잠금
unlockOrientation() : 화면 방향 잠금을 해제
<script>
// screen 객체로 화면의 너비와 높이 알아내기
document.write("<b>screen.availHeight</b>"+screen.availHeight+"<br>");
document.write("<b>screen.availWidth</b>"+screen.availWidth+"<br>");
document.write("<b>screen.height</b>"+screen.height+"<br>");
document.write("<b>screen.width</b>"+screen.width+"<br>");
</script>
728x90