● 브라우저 객체 모델(BOM)
- 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
- 이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다.
- 브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니지만
자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다.
● window 객체
- 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다.
- 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.
● window.onload = function(){}
- 스크립트 언어는 위에서 아래로 해석되기 때문에 DOM에서 HTML 요소를 추출할 때
body보다 위에 있으면 문서를 밑으로 옮겨야 한다.
- HTML 문서가 길어지면 가독성이 좋지 않고 불편할 수 있다.
- 따라서 window.onload()를 사용하여 문서가 모두 준비된 상황에서 코드를 실행할 수 있다.
● window.open()
- window 객체의 open() 메소드를 이용하면 새로운 브라우저 창을 열 수 있다.
- 새로운 브라우저 창의 세부적인 옵션들도 상세히 설정할 수 있다.
● window.open() 사용 방법
let 객체 = window.open(url, name, specs);
1. 객체
- 새로 만들어진 창 객체가 반환되고 창의 생성에 실패하면 null을 리턴한다.
- 이 객체를 통해서 새 창을 제어할 수 있고, 객체.close()로 창을 닫을 수 있다.
2. url
- 이동할 주소
3. name
(1) _blank(default) : 새 창 또는 새 탭
(2) _parent : 부모 브라우저
(3) _self : 현재 페이지
(4) _child : 현재 페이지의 자식 페이지(서브 창)
4. specs
- 선택적인 값으로 창의 크기, 스크롤 여부, 리사이즈 가능 등의 속성을 지정한다.
(1) height=픽셀 : 창의 높이
(1) width=픽셀 : 창의 넓이
실습(banner)
- 배너 만들기
1. css
section.container {
margin: 0 auto;
width: 90vw;
overflow: hidden;
height: fit-content;
position: relative;
}
div.banner {
width: 540vw;
/* transform: translate(-90vw); */
transition: transform 0.5s;
}
div.img {
width: 90vw;
float: left;
}
div.img img {
width: 100%;
display: block;
}
div.arrow {
position: absolute;
font-size: 2rem;
z-index: 1;
width: 35px;
height: 100%;
text-align: center;
cursor: pointer;
line-height: 40vh;
color: #00000070;
background-color: #00000021;
}
div.next {
right: 0;
}
div.btns {
position: absolute;
text-align: center;
bottom: 10px;
width: 90vw;
}
2. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 배너</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section class="container">
<div class="arrow prev"><</div>
<div class="banner">
<div class="img"><img src="img/001.png"></div>
<div class="img"><img src="img/002.png"></div>
<div class="img"><img src="img/003.png"></div>
<div class="img"><img src="img/004.png"></div>
<div class="img"><img src="img/005.png"></div>
<div class="img"><img src="img/006.png"></div>
</div>
<div class="arrow next">></div>
<div class="btns">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
</div>
</section>
</body>
<script>
const banner = document.querySelector("div.banner");
const arrows = document.querySelectorAll("div.arrow");
const btns = document.querySelectorAll("button.btn");
let count = 0;
// 원하는 번호의 배너로 이동
btns.forEach(function(btn, i, ar) {
// 각 버튼에 클릭 이벤트 적용
ar[i].addEventListener("click", function() {
// 해당 버튼 번호(i)로 count 변경
count = i;
banner.style.transform = "translate(-" + count * 90 + "vw)";
});
});
// 이전버튼, 다음버튼 기능 구현
arrows.forEach(arrow => {
arrow.addEventListener("click", function() {
let arrowType = arrow.classList[1];
if(arrowType == 'prev') {
count--;
if(count == -1) {
count = 5;
}
} else {
count++;
if(count == 6) {
count = 0;
}
}
banner.style.transform = "translate(-" + count * 90 + "vw)";
});
});
// 3초마다 자동으로 이미지 변경
setInterval(function(){
count++;
count = count == 6 ? 0 : count;
banner.style.transform = "translate(-" + count * 90 + "vw)";
}, 3000);
</script>
</html>
실습(window.open())
- 2초 후 특정 url 페이지 열림
- 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window 객체의 open()</title>
</head>
<body>
<h1>부모 창</h1>
</body>
<script>
setTimeout(function() {
window.open("https://www.naver.com", "_parent", "width=600, height=700");
}, 2000);
</script>
</html>
'웹 개발 > JavaScript' 카테고리의 다른 글
[Web_JavaScript] 17 (0) | 2022.05.13 |
---|---|
[Web_JavaScript] 16 (0) | 2022.05.12 |
[Web_JavaScript] 14 (0) | 2022.05.10 |
[Web_JavaScript] 13 (0) | 2022.05.09 |
[Web_JavaScript] 12 (0) | 2022.05.08 |