BOM 개요 및 최상 위 대상 window 의 속성 과 방법
11683 단어 BOM
1.1 BOM 이란 무엇 인가
BOM (Browser Object Model) 은 브 라 우 저 대상 모델 로 내용 에 독립 되 어 브 라 우 저 창 과 상호작용 을 하 는 대상 을 제공 합 니 다. 핵심 대상 은 window 입 니 다.
BOM 은 일련의 관련 대상 으로 구성 되 고 모든 대상 이 많은 속성 과 방법 을 제공 합 니 다.
BOM 은 표준 이 부족 하고 JavaScript 문법의 표준화 조직 은 ECMA 이 며 DOM 의 변 준 화 조직 은 W3C 이 며 BOM 은 처음에 Netscape 브 라 우 저 표준 의 일부분 이 었 다.
1.2 BOM 의 구성
window 대상 은 브 라 우 저의 최상 위 대상 으로 이중 역할 을 합 니 다.
2. window 대상 의 흔 한 이벤트
2.1 창 불 러 오기 이벤트
//
window.onload = function() {}
or
window.addEventListener('load/DOMContentLoaded',function(){})
주의:
window.onresize = function() {}
or
window.addEventListener('resize', function(){})
3.1 두 가지 타이머
setTimeout(function(){...}, )
// 1. ， ， 0
// 2. ， （ ）。
// 3. ， ，
setInterval( , )
두 가지 차이 점: setTimeout: 지연 시간 이 되면 호출 하고 한 번 호출 하면 끝 납 니 다.setInterval: 이 시간 간격 으로 호출 하고 여러 번 호출 합 니 다.
3.2 정지 타이머
clearTimeout( )
or
clearInterval( )
3.3 this 가 가리 키 는 문제
일반적인 상황 에서 this 의 최종 지향 은 호출 대상 입 니 다.
<scrip>
// 1. this window( this window)
console.log(this);//window
function fn() {
console.log(this);//window
}
setTimeout(function() {
console.log(this); //window
}, 1000)
// 2. this
var o = {
sayHi: function() {
console.log(this);//o
}
}
o.sayHi();
// 3. this
function Fun() {
console.log(this); //this fun
}
var fun = new Fun();
scrip>
4. JS 실행 메커니즘
4.1 JS 는 단일 라인
JavaScript 언어의 큰 특징 은 단일 스 레 드 입 니 다. 즉, 같은 시간 에 한 가지 일 만 할 수 있다 는 것 입 니 다.모든 임 무 는 줄 을 서서 앞의 임무 가 끝나 야 다음 임 무 를 수행 할 수 있다 는 뜻 이다.문 제 는 JS 가 너무 오래 실행 되면 페이지 렌 더 링 이 연결 되 지 않 아 페이지 렌 더 링 이 막 히 는 느낌 을 줄 수 있다 는 것 이다.
4.2 동기 화 와 비동기
상기 문 제 를 해결 하기 위해 다 핵 CPU 의 컴 퓨 팅 능력 을 이용 하여 HTML 5 는 웹 Worker 표준 을 제시 하여 자바 스 크 립 트 가 여러 스 레 드 를 만 들 수 있 도록 합 니 다.
동기 화 작업
동기 화 작업 은 주 스 레 드 에서 실 행 됩 니 다. 실행 스 택 을 만 듭 니 다.
비동기 임무
JS 의 이 보 는 반전 함 수 를 통 해 이 루어 진다.
일반적으로 비동기 임 무 는 다음 과 같은 세 가지 유형 이 있다.
4.3 JS 실행 메커니즘
사례 1:
console.log(1);
setTimeout(function() {
console.log(2);
},0);
console.log(3);
// 1 3 2
사례 2:
console.log(1);
document.onclick = function() {
console.log('click');
}
console.log(2);
setTimeout(function() {
console.log(3);
}, 3000)
//
// 1. console.log(1); 1
// 2. document.onclick = fn; ， ， ，
// 3. console.log(2); 2
// 4. setTimeout(fn, 3000); ，
// 5. 1 2
// ： 1 2 click 3
// 1 2 3 click
// 、 、 、 ， (event loop)
5. location 개체
5.1 location 대상 이 무엇 입 니까?
window 대상 은 창의 URL 을 가 져 오 거나 설정 할 수 있 는 location 속성 을 제공 하고 URL 을 분석 할 수 있 습 니 다.
5.2 location 대상 의 속성
6. navigator 대상
navigator 대상 은 브 라 우 저 에 대한 정 보 를 포함 하고 있 습 니 다. 많은 속성 이 있 습 니 다. 가장 많이 사용 되 는 것 은 userAgent 입 니 다. 이 속성 은 클 라 이언 트 가 서버 를 보 낸 user - agent 머리 값 을 되 돌려 줍 니 다.
7. history 대상
window 대상 은 브 라 우 저 기록 과 대화 할 수 있 도록 history 대상 을 제공 합 니 다.이 대상 은 사용자 가 (브 라 우 저 창 에서) 방문 한 URL 을 포함 합 니 다.
history 대상 방법
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS_5. BOM & DOMBrowser Object Model 메서드 open(url, name, specs) 새로운 창을 연다. url : 오픈할 페이지의 url specs : 여러가지 속성 열려진 창을 닫는다. 내용을 나타내는 경고창이 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
