BOM:브라우저 객체 모델

이 장은 주로 window 대상,location 대상,navigator 대상,screen 대상과history 대상을 다루는데 이것은 다섯 개의 BOM 대상이다.
BOM의 핵심은 브라우저의 실례를 나타내는 window입니다.location은 현재 창에 불러오는 문서와 관련된 정보를 제공합니다.navigator는 고객의 브라우저의 각종 정보를 식별할 수 있습니다.screen은 기본적으로 클라이언트의 능력을 나타내는 데만 사용되며 쓸모가 크지 않다.history에는 사용자가 인터넷에 접속한 역사 기록이 저장되어 있다.
이제 다섯 BOM 객체에 대해 하나씩 살펴보겠습니다.

8.1 window 객체

BOM의 핵심 객체는 브라우저의 인스턴스를 나타내는 window입니다.브라우저에서 window는 이중 역할로 js를 통해 브라우저 창에 접근하는 인터페이스이자 ECMAScript가 규정한 글로벌 대상이다

8.1.1 글로벌 역할 영역

모든 전역 역할 영역에서 성명된 변수, 함수는 window 대상의 속성과 방법이 됩니다

8.1.2 창 관계 및 프레임워크

8.1.3 창 위치

브라우저 간에 창 왼쪽과 위쪽 위치 가져오기
주로 Firefox와 호환되며, Firefox는 screenX와 screenY만 지원합니다.

var leftPos = (typeof window.screenLeft == 'number') ?
                   window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ?
                   window.screenTop : window.screenY;

8.1.4 창 크기

8.1.5 탐색 및 창 열기

window.open()는 네 가지 인자를 수신합니다. 불러올 URL, 창 목표, 특성 문자열, 브라우저 역사 기록에서 현재 불러오는 페이지의 브리 값을 새 페이지가 대체할지 여부를 나타냅니다.보통 첫 번째 파라미터만 전달하고, 마지막 파라미터는 새 창을 열지 않은 상태에서만 사용합니다.

(1) 팝업 창

window.open('http://www.tuniu.com','','height=100,width=100,top=100,left=100,resizable=yes')

window.close()   //    

(2) 안전 제한

사용자 보안 문제로 대부분의 브라우저가 window를 사용합니다.open()에 제한이 있음

(3) 팝업 창 차단기

window.open 팝업 창이 차단된 경우 두 가지가 있습니다. 브라우저에 내장된 차단 프로그램 (window.open은null로 되돌아갑니다) 과 브라우저 확장이나 다른 프로그램이 차단한 팝업 창 (window.open은 오류를 보고합니다)
window를 감지합니다.open 팝업이 호환 프로젝트를 차단할 지 여부:

var blocked = false;
try{
   var wroxWin = window.open('http://www.tuniu.com','_blank');
   if( wroxWin == null ){
       blocked = true;
   }
} catch (ex){
   blocked = true;
}

if(blocked){
   alert('     ')
}

8.1.6 간헐 호출과 시간 초과 호출

(1) 시간 초과 호출: 지정된 시간 후 실행 코드

timeoutId: 시간 초과 호출을 나타내는 수치 ID

var timeoutId = setTimeout(function(){
   alert('hello world')
},1000)

clearTimeout(timeoutId)  //      

1000초가 지난 후에 함수가 반드시 실행되는 것은 아니다. 왜냐하면 JS는 단일 라인의 해석기이기 때문에 일정 시간에 코드 한 토막만 실행할 수 있기 때문이다.실행할 코드를 제어하기 위해서 js 작업 대기열이 있습니다.이러한 작업은 대기열에 추가된 순서대로 수행됩니다.setTimeout () 의 두 번째 인자는 js가 현재 작업을 대기열에 얼마나 더 추가하는지 알려 줍니다.만약 대기열이 비어 있다면 추가된 코드는 즉시 실행됩니다.만약 비어 있지 않다면, 앞 코드가 실행된 후에 실행해야 한다.

(2) 간헐적 호출: 간헐적 호출이 취소되거나 페이지가 마운트 해제될 때까지 지정된 시간 간격에 따라 코드를 반복한다.

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber(){
   num++;

   //         max    ，            
   if( num == max ){
       clearInterval(intervalId)
       alert('Done')
   }
}

intervalId = setInterval(incrementNumber, 500);

시간 초과 호출setTimeout을 사용하여 간헐 호출을 시뮬레이션하기;

var num = 0;
var max = 10;

function incrementNumber(){
  num++

  if( num < max ){
    console.log('11')
        setTimeout(incrementNumber, 1000)
  } else {
    alert('Done')
  }
}
setTimeout(incrementNumber, 500)

일반적으로 간헐적 호출을 시뮬레이션하는 데 초시조를 사용하는 것이 가장 좋은 모델이라고 여긴다.

개발 환경에서 진정한 간헐적 호출을 사용하는 경우는 드물다. 왜냐하면 다음 간헐적 호출이 이전 간헐적 호출이 끝나기 전에 시작될 수 있기 때문이다.

그러니까 간헐적으로 사용하지 않는 게 좋을 거야!!!

8.1.7 시스템 대화 상자

동기화:

alert()
confirm()
prompt()

비동기식:

window.print() //  。   
window.find()  //       

8.2 location 객체

location 객체는 현재 창에 로드된 문서에 대한 정보와 탐색 기능을 제공하는 가장 유용한 BOM 객체 중 하나입니다.window.location 및 문서.location은 같은 대상을 인용합니다.
당사 예약 페이지로"http://www.tuniu.com/tours/210050902/book/step1"예: 다음location 방법으로 값을 부여하면 URL을 변경할 수 있습니다

location.hash：  URL  hash(#   0     )，       “”
==> “”

location.host：           
==> "www.tuniu.com" 

location.hostname：             
==> "www.tuniu.com" 

location.href：        url
==> "http://www.tuniu.com/tours/210050902/book/step1"

location.pathname：  url       
==> "/tours/210050902/book/step1"

location.port：     
==> ""

location.protocol：        
==> "http:"

location.search：  url      ，     
==> ''   ：'?q=javascript'

8.2.1 검색 문자열 매개 변수

8.2.2 위치 조작

새 페이지로 이동하려면 다음과 같이 하십시오.

window.location = '';
location.href = "";
location.assign('');

상기 세 가지 방법은 사실 모두 assign 방법을 호출하여 점프를 실현하는 것이다.
브라우저가 점프한 후 뒤로 버튼을 비활성화하려면 다음을 수행합니다.

location.replace('http://www.tuniu.com')

location.reload();       //    (         )
location.reload(true);   //    (        )

8.3 navigator 객체

브라우저 콘솔에 navigator를 입력하여 모든 브라우저 정보를 확인할 수 있습니다.

8.3.1 플러그인 검사

navigator.plugins

8.4 화면 객체

화면 대상은 js프로그래밍에서 쓸모가 크지 않고 기본적으로 클라이언트의 능력을 나타내는 데 사용되며 브라우저 창 외부의 디스플레이 정보, 예를 들어 픽셀 너비와 높이 등을 포함한다.

8.5 History 객체

history 대상은 사용자가 인터넷에 접속한 기록을 저장하고 있으며 창이 열리는 순간부터 계산한다.

//    
hostory.go(-1)

//    
history.go(1)

//    
history.go(2)

go () 에 문자열을 전달할 수도 있습니다. 이 문자열은 역사 기록에 포함된 첫 번째 위치로 이동합니다.

//    
hostory.back()

//    
history.forward();