[javascript] 브라우저 객체모델(BOM, Browser Object Model)_2

 

 

 

 

2. 일정한 간격으로 코드 실행 

일정한 간격으로 코드를 실행하는 메서드로는 setInterval()과 setTimeout()이 있음.

setInterval( )은 일정한 시간 간격으로 코드를 반복 실행

setTimeout( )은 일정한 시간 후에 코드를 실행하고 종료

 

 

 

---

setInterval() / clearInterval() 

setInerval()	코드를 일정 시간 간격으로 반복 실행
clearInterval()	setInterval() 메서드를 취소

var 참조 변수 = setInterval(function(){코드}, 시간 간격(ms));
var 참조 변수 = setInterval("코드", 시간 간격(ms));

//3(3,000)초 간격으로 변수 i의 값을 1씩 증가 시킴
//1초 = 1000
var intv= setInterval(function(){i++},3000);
var intv= setInterval("i++", 3000);

//clearInterval()메서드의 기본형
clearInterval(참조변수);

 

 

예제1) setInterval메서드를 이용하여 일정한 간격으로 i의 값을 증가시켜 콘솔 창에 출력. [정지]를 클릭하면 clearInterval()가 적용되어 정지 됨

    var addNum = 0;
    var subNum = 1000;
    
    var auto_1=setInterval(function(){
        addNum++;
        console.log("addNum:" + addNum);
    }, 3000);
     //3초(3,000)간격으로 반복 실행.
     //addNum의 값이 1씩 중가
     
     var auto_2=setInterval(function(){
         subNum--;
         console.log("subNum: " + subNum);
     }, 3000);
     //3초(3,000)간격으로 반복 실행.
     //subNum의 값이 1씩 감소

<button onclick="clearInterval(auto_1)">증가 정지</button>
<!--사용자가 해당 버튼을 클릭하면 auto_1이 참조하는 setInterval을 제거함-->
 
<button onclick="clearInterval(auto_2)">감소 정지</button>
<!--사용자가 해당 버튼을 클릭하면 auto_2이 참조하는 setInterval을 제거함-->

 

 

 

---

 

setTimeout() / clearTimeout()

setTimeout()	일정 시간이 지나면 코드를 실행하고 종료 setTimeout메서드를 재귀호출 하면 setInterval처럼 사용가능
clearTimeout	setTimeout메서드를 제거

var 참조 변수 = setTimeout(function(){코드}, 시간간격(msc));
var 참조 변수 = setTimeout("자바스크립트 코드", 시간 간격(msc));

//5초 간격으로 변수 i의 값을 1씩 증가시킴
var tim = setTimeout(function(){i++;},5000);
var tim = setTimeout("i++", 5000);

//claerTimeout() 메서드 기본형
clearTimeout(참조 변수);

//tim에 참조되어 잇던 setTimeout()을 삭제
clearTimeout(tim);

 

 

예제2) 

//5초 후에 코드를 한번 실행
//그런 다음 setTimeout() 메서드를 종료
var addNum = 0;
var auto = setTimeout(function(){
addNum++;
console.log(addNum);
},5000);

5초후에 addNum의 값이 1만큼 증가

 

 

 

---

screen객체 : 사용자의 모니터 정보(속성)를 제공하는 객체

종류	설명
screen.width	화면의 너비값을 반환
screen.height	화면의 높이값을 반환
screen.availWidth	작업표시줄을 제외한 화면의 너비값을 반환
screen.availHeight	작업표시줄을 제외한 화면의 높이값을 반환
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

 

---

location객체 : 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체. 현재 URL에 대한 정보(속성)와 새로 고침(reload)메서드를 제공

location.속성;
location.메서드();

 

location 객체의 속성 종류

종류	설명
location.href	주소 영역의 참조 주소를 설정하거나 URL을 반환
location.hash	URL의 해시값(#에 명시 된 값)을 반환
location.hostname	URL의 호스트 이름을 설정하거나 반환
location.host	URL의 호스트 일음과 포트 번호를 반환
location.protocol	URL의 프로토콜을 반환
location.search	URL의 쿼리(요쳥값)을 반환
location.reload()	마치 브라우저에서 f5키를 누른 것 처럼 새로 고침

 

 

---

history객체 : 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드 제공

history.속성;
history.메서드();
history.메서드(n);

 

history 객체의 속성과 종류

종류	설명
history.back( )	이전 방문 사이트로 이동
history.forward( )	다음 방문 사이트로 이동
history.go(이동 숫자)	이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동
history.length	방문 기록에 저장된 목록의 개수를 반환

 

 

---

navigator 객체 : 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체

 

navigator.속성;