05_BOM(1)

※ 참고하면 좋은 사이트 

www.w3schools.com/jsref/met_win_open.asp

 

---

05_BOM.pdf

0.48MB

 

BOM

• Browser Object Model의 약자로써 브라우저 객체 모델이라고 함

• 브라우저의 정보나 URL 정보, 모니터화면정보 등을 취득하거나 제어할 수 있는 객체

• 브라우저 계층구조

최상위 객체 window	하위객체 document
	하위객체 location
	하위객체 screen
	하위객체 history
	하위객체 navigator

 

---

#bom.html

   <style>
      .pp {
         border: 5px solid black;
         height: 150px;
         width: 400px;
         font-size: 70px;
         color: dodgerblue;
      }

   </style>

   <button onclick="func1();">window.open()</button>
   <!-- 본인인증 같은 제한시간 걸 때 사용 -->
   <button onclick="func2();">setTimeout</button>
   <button onclick="func3();">setInterval</button>

   <!-- 현재시간 -->
   <p id="p1" class="pp"></p>
   <button onclick="func4();">시작</button>
   <button onclick="func5();">중단</button>

   <!-- 스톱워치 -->
   <p id="p2" class="pp"></p>
   <button onclick="func6();">시작</button>
   <button onclick="func7();">중단</button>
   <hr>
   <hr>

---

window.open()

새 창을 띄우는 메소드

window.open(‘주소’, ‘이름 또는 open방식’, ‘형태’)

 

window 함수실행 메소드

메소드	내용
setTimeout(함수,시간(ms))	일정시간 후 함수를 한번 실행 / id 값 리턴
setInterval(함수,시간(ms))	일정시간마다 함수를 반복 실행 / id 값 리턴
clearTimeout(id)	setTimeout() 함수 실행 종료
clearInterval(id)	setInterval() 함수 종료

---

 

 

 

[window.open()]버튼 onclick="func1();"

window.open() : 새 창을 띄우는 메소드

   <script>
      function func1() {
          //window.open(‘주소’, ‘이름 또는 open방식’, ‘형태’)
          //_blank : 새 창에서 열기
         window.open("http://www.naver.com","_blank","width=500, height=500");
      }
   </script>      

---

 

 

 

 

[setTimeout]버튼 onclick="func2();"

setTimeout : 일정시간 후 함수를 한번 실행

   <script>
        function func2() {
            //새로 열린 비어있는 윈도우 창을 변수(myWindow)에 저장
            var myWindow = window.open();

            var intervalId =
                //window.setTimeout(함수, 시간(ms));
                //=> 새로 열린 창을 닫는 함수를 3초 후 실행하겠다
                window.setTimeout(function() {
                    myWindow.close();
                }, 3 * 1000);
            
            //clearTimeout : setTimeout() 함수 실행 종료
            //window.clearTimeout(intervalId);
            //위의 코드 주석을 해지하면 3초 후 창이 닫히는 intervalId가 실행되지않음
        }
   </script> 

3초 후 자동으로 창 닫힘

---

 

 

 

 

[setInterval]버튼 onclick="func3();"

setInterval : 일정시간마다 함수를 반복 실행

   <script>
        function func3() {
            var intervalId =
                //setInterval(함수,시간(ms))
                //=> console창에 3초마다 "인터벌함수 실행"을 출력하겠다
                window.setInterval(function() {
                    console.log("인터벌함수 실행");
                }, 3 * 1000);
            
            
            //window.setTimeout(함수, 시간(ms));
            //=>clearInterval함수를 10초 후 실행하겠다.
            window.setTimeout(function() {
                //clearInterval(id) : setInterval() 함수 종료
                window.clearInterval(intervalId);
            }, 10 * 1000);
        }
   </script> 

---

 

 

 

[시작]버튼 onclick="func4();"

[중단]버튼 onclick="func5();"

   <script>
        var time1;

        function func4() {
            var p1 = document.getElementById("p1");
            
            //window.setInterval(함수,시간(ms))
            //=>현재 시간을 1초마다 출력하겠다
            time1 = window.setInterval(function() {
                var date = new Date();
                p1.innerHTML = date.getHours() + " : " + date.getMinutes() + " : " + date.getSeconds();
            }, 1 * 1000)
        }

        function func5() {
            //clearInterval(id) : setInterval() 함수 종료
            window.clearInterval(time1);
        }
   </script> 

---

 

 

 

[시작]버튼 onclick="func6();"

[중단]버튼 onclick="func7();"

   <script>
        var time2;

        function func6() {
            var p2 = document.getElementById("p2");
            var count = 0;

            //window.setInterval(함수,시간(ms))
            time2 = window.setInterval(function() {
                var date = new Date();
                var mill = date.getMilliseconds();
                p2.innerHTML = count + " : " + mill;
                if (mill >= 990) {
                    count++;
                }
            }, 10);
        }

        function func7() {
            //clearInterval(id) : setInterval() 함수 종료
            window.clearInterval(time2);
        }
   </script>