4. BOM ( Browser Object Model)
- 웹 브라우저 관련 객체
- 종류
Window 객체 : 전역객체( window 변수를 생략하고 사용이 가능하다.(***) )
웹브라우저 창 자체를 의미.
Screen 객체 : 창의 크기 정보 ( width/height )
History 객체 : 웹 페이지의 뒤로/앞으로 기능
Location 객체 : 웹 브라우저의 URL 정보
Navigator 객체 : 웹 브라우저 자체 정보
- 특징: 웹 브라우저를 open하면 자동으로 객체생성이 된다.
개발자는 명시적 생성없이 참조해서 사용할 수 있음.
어떤 변수명으로 되어 있을까?
Window 객체 참조: window 변수를 사용한다.
Screen 객체 참조: screen 변수를 사용한다.
History 객체 참조: history 변수를 사용한다.
Location 객체 참조: location 변수를 사용한다.
Navigator 객체 참조: navigator 변수를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>js07_객체2_BOM1_Screen객체</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// BOM 의 Screen 객체
console.log(screen);
console.log(screen.width); // 1536px
console.log(screen.height); // 864px
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>js07_객체2_BOM2_Navigator객체</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// BOM 의 Navigator 객체
console.log(navigator); // Browser 정보
console.log(navigator.appCodeName);
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.userAgent);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>js07_객체2_BOM3_Location객체</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// BOM 의 Location 객체
console.log(location);
console.log(location.host);
console.log(location.hostname);
console.log(location.href); //(*) href 속성을 이용하면 우리가 원하는 url 로 갈수 있다.
console.log(location.pathname);
console.log(location.port);
function google_go() {
location.href = "http://www.google.com"; // url 변경
}
function daum_go() {
location.href = "http://www.daum.net"; // url 변경
}
function re_rendering() {
location.reload();
}
</script>
</head>
<body>
<!-- 버튼 클릭시 google_go() 함수의 url 로 이동. -->
<button onclick="google_go()">구글</button>
<button onclick="daum_go()">다음</button>
<button onclick="re_rendering()">새로고침</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>js07_객체2_BOM4_History객체</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// BOM 의 History 객체
console.log(history);
function go_forward() {
// history.forward();
history.go(1);
}
</script>
</head>
<body>
<!--
target.html 을 누르게되면 target.html 로 이동가능
target.html 에서 뒤로를 누르게되면 'js07_객체2_BOM4_History객체'
로 이동됨.
-->
<a href="target.html">target.html</a>
<!-- 앞으로 버튼을 누르면 target.html 로 이동가능. -->
<button onclick="go_forward()">앞으로</button>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>target.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function go_back() {
// history.back();
history.go(-1);
}
</script>
</head>
<body>
<h1>target.html</h1>
<button onclick="go_back()">뒤로</button>
</body>
</html>
5. Window 객체
- 전역객체
- window 변수로 참조 가능.
하지만 일반적으로 생략해서 사용.
- screen, location, history. navigator, document 은
Window 객체의 속성이다.
원래는 window.screen
window.location
window.history
window.navigator
window.document 사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다.
- window.opener : 자식창에서 부모창 참조할 때 사용.
- 부모에서 새로운 창(자식창)을 만드는 방법
var childWin = open("child.html"); // window.open("child.html"); 동일
현재 창 닫기
window.close();
부모창 닫기
opener.close();
자식창 닫기
childWin.close();
<!DOCTYPE html>
<html>
<head>
<title>js07_객체2_BOM5_Window객체</title>
<script>
// BOM의 Window 객체
console.log(history);
function go_forward() {
// history.forward();
history.go(1);
}
</script>
</head>
<body>
<a href="target.html">target.html</a>
<button onclick="go_forward()">앞으로</button>
</body>
</html>
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 3일차 - 객체(3) JSON (0) | 2024.05.07 |
|---|---|
| js 3일차 - 객체(3) Window객체 (0) | 2024.05.07 |
| js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사 (0) | 2024.05.03 |
| js 2일차 - 1일차 정리 (0) | 2024.05.03 |
| js 1일차 - 연산자, 문장, 객체 (1) | 2024.05.02 |
