[Web_JavaScript] 15

● 브라우저 객체 모델(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">&lt;</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">&gt;</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

끄적끄적_〆(ﾟ▽ﾟ*)

[Web_JavaScript] 15

실습(banner)

실습(window.open())

'웹 개발 > JavaScript' 카테고리의 다른 글

티스토리툴바

[Web_JavaScript] 15

실습(banner)

실습(window.open())

'웹 개발 > JavaScript' 카테고리의 다른 글

'웹 개발/JavaScript' Related Articles

티스토리툴바