JS | BOM - 윈도우객체

내장함수 : window 객체 , location 객체 , history 객체

 

팝업창 띄우기

window.open() - 새창을 띄워주는 메서드 입니다

window.open(문서 주소-보여줄 창 주소 , 이름-별칭 , "옵션=값 , 옵션=값 , 옵션=값");

window.close() - 창이 꺼짐

 

옵션

옵션	설명
width = 픽셀값	가로 넓이
height = 픽셀값	세로 넓이
left = 픽셀값	위치
top = 픽셀값	위치
location = yes 또는 no	윈도우 주소창 show/hide
scrollbars = yes 또는 no	윈도우 스크롤바 show/hide
menubar = yes 또는 no	윈도우 메뉴바 show/hide
toolbar = yes 또는 no	윈도우 툴바 show/hide
status = yes 또는 no	윈도우 상태줄 show/hide

 

 

---

예제 1 ) 팝업창 띄우기

주창

 window.onload = function(){
            // window.open("popup.html"); //open("띄울창", "별칭", "옵션")
            window.open("popup.html", "별칭", "width=500px, height = 300px, left=100px, top=100px, location=no");
        }

팝업창

<input type="checkbox" class="x"> 오늘 하루 이창을 열지 않기

<script>
   var x = document.querySelector(".x");
   x.onclick = function(){
   //쿠키
   window.close();

   //opener - 주창과 보조창간의 데이터 전달이 가능..        
    }
</script>

 

window 객체 -  기본 함수

함수	설명
alert()	경고창
confirm()	확인창
setTimeout()	일정 시간이 지난 후 함수 실행
clearTimeout()	setTimeout 중지 메서드
setInterval()	일정 시간마다 함수 반복 실행
clearInterval()	setInterval 중지 메서드

---

예제 2 ) setInterval - 일정 주기마다 동작

setInterval 함수의 반환 : number

  <button class="stop">stop</button>

    <script>
        //일정주기마다 동작
        var id = window.setInterval(function(){
            console.log('실행됨');
        },1000); //(실행시킬 함수, 인터벌);

        //인터벌 중지
        var stop = document.querySelector(".stop");
        stop.onclick = function(){
            window.clearInterval(id);
        }

    </script>

---

예제 3 ) setTimeout - 일정시간이 지난 후 함수 실행

 <button class="stop">5초 뒤에 경고창이 나오는데 중지하려면 누르세요</button>

    <script>
        //window생략가능
        //5초뒤에 동작
        var id = setTimeout(function() {
            alert("5초 후 출력됨");
        }, 5000);

        //타임아웃 중지
        var stop = document.querySelector('.stop');
        stop.onclick = function(){
            clearTimeout(id);
        }
    </script>

---

예제 4 ) setInterval - 사진 슬라이드 + 애니메이션

방법 (1)

style ↓↓↓

<style>
        * {padding: 0; margin: 0;}
        .bgImg{
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from{
                opacity: 0;
            } to {
                opacity: 1;
            }
        }
</style>

html ,script

↓↓↓

 <h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>

    <div class="slide">
        <img src="img/slide1.jpg" class="bgImg">
    </div>

    <script>

        var i = 1; //시작은 다음요소부터
        var arr = ["img/slide1.jpg","img/slide2.jpg","img/slide3.jpg","img/slide4.jpg"];
        
        setInterval(function(){
            var img = document.createElement("img");
            img.src = arr[i++];
            img.classList.add("bgImg");
            //remove
            var slide = document.querySelector(".slide");
            slide.firstElementChild.remove();
            //append
            slide.appendChild(img);

            if(i==arr.length) i=0;
            

        },1500);

    </script>

 

방법 (2)

style ↓↓↓

  <style>
        * {padding: 0; margin: 0;}
        .slideImg {display: none;}
        .slideImg.active {
                            display: inline;
                            animation: fadeIn 0.5s ease-in-out;
                        };
        
        @keyframes fadeIn {
            from{
                opacity: 0;
            } to {
                opacity: 1;
            }
        }
    </style>

html ,script↓↓↓

<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>

    <div class="slide">
        <img src="img/slide1.jpg" class="slideImg active">
        <img src="img/slide2.jpg" class="slideImg">
        <img src="img/slide3.jpg" class="slideImg">
        <img src="img/slide4.jpg" class="slideImg">
    </div>

    <script>

        var i = 0; //시작은 다음요소부터
        var arr = document.querySelectorAll(".slide > .slideImg"); //배열 ...
        
        setInterval(function(){

            arr[i].classList.remove("active");
            i++;
            if(i == arr.length) i = 0;
            arr[i].classList.add("active");

        },1500);

    </script>