BOM은 브라우저 개체 모델이라고도 합니다. 이는 브라우저 기능에 액세스하기 위한 많은 개체를 제공하며 이러한 기능은 웹 페이지 콘텐츠와 아무런 관련이 없습니다.
BOM에는 사양이 부족하고 각 브라우저 제공업체는 자체 아이디어에 따라 이를 확장하므로 브라우저 공유 객체가 사실상의 표준이 됩니다.
창 객체
// BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在; var newValue = oldValue; // =>ReferenceError:oldValue is not defined; var newValue = window.oldValue; // =>undefined;
1. 윈도우 객체의 속성과 메소드
창 개체에는 그 자체가 개체인 일련의 속성이 있습니다.
(1).속성
속성 의미
닫힘은 창이 닫혀 있을 때 true입니다.
defaultStatus 창 하단의 상태 표시줄에 표시되는 기본 상태 정보입니다.
현재 문서 창에 표시되는 문서 객체입니다.
프레임 창에 있는 프레임 객체의 배열;
기록은 창에서 최근에 로드한 URL을 저장합니다.
length 창의 프레임 수입니다.
현재 창의 위치 URL;
이름 창 이름;
offscreenBuffering은 새 창 콘텐츠를 그리고 완료 후 기존 콘텐츠를 복사하여 화면 업데이트를 제어하는 데 사용됩니다.
오프너는 현재 창의 창을 엽니다.
부모는 다른 창을 포함하는 창을 가리킵니다(프레임에서 사용됨).
화면은 높이/너비(픽셀 단위)와 같은 화면 관련 정보를 표시합니다.
self는 현재 창을 나타냅니다.
상태는 사용자 상호 작용으로 인해 발생하는 상태 표시줄의 임시 정보를 나타냅니다.
top 특정 창의 최상위 창을 포함합니다(프레임워크에서 사용).
window는 현재 창을 나타내며 self와 동일합니다.
(2).방법
alert(text)는 경고 대화 상자를 생성하고 메시지를 표시합니다.
Blur()는 창에서 포커스를 제거합니다.
clearInterval(interval)은 이전에 설정된 타이머 간격을 지웁니다.
clearTimeOut(timer)은 이전에 설정된 시간 제한을 지웁니다.
close()는 창을 닫습니다.
verify()는 확인에 사용해야 하는 대화 상자를 생성합니다.
focus()는 포커스를 창으로 이동합니다.
open(url,name,[options])는 새 창을 열고 새 창 객체를 반환합니다.
프롬프트(text,defaultInput)는 사용자에게 정보 입력을 요청하는 대화 상자를 생성합니다.
scroll(x,y)는 창의 픽셀 위치로 스크롤합니다.
setInterval(expression,milliseconds)는 지정된 시간 간격 후에 표현식을 계산합니다.
setInterval(function,millisenconds,[arguments])는 지정된 시간 간격 후에 함수를 호출합니다.
setTimeout(expression,milliseconds) 타이머가 만료된 후 표현식을 계산합니다.
steTimeout(function,milliseconds,[arguments])는 타이머가 만료된 후 함수를 호출합니다.
print()는 인쇄 대화 상자를 불러옵니다.
find()는 검색 대화 상자를 불러옵니다.
// 창 아래의 속성 및 메서드의 경우 window.property, window.method()를 사용하거나 직접 속성 또는 method() 호출을 사용할 수 있습니다.
// window.alert(text)=alert(text);
2. 시스템 대화상자
브라우저는 시스템 대화 상자를 호출하여 Alert()/confirm() 및 Prompt() 메소드를 통해 사용자에게 정보를 표시합니다.
시스템 대화 상자는 브라우저에 표시되는 웹 페이지와 아무 관련이 없으며 HTML을 포함하지 않습니다.
모양은 CSS가 아닌 운영 체제 및/또는 브라우저 설정에 따라 결정됩니다.
이러한 메서드로 열린 대화 상자는 모두 동기식이며 모달입니다. 즉, 이러한 대화 상자가 표시되면 코드 실행이 중지되고 이러한 대화 상자를 닫은 후 코드가 실행을 다시 시작합니다.
// 弹出警告
alert('警告');
// 确认和取消
if(confirm('请确定或取消'){ // confirm()本身有返回值;
alert('您选择了确定'); // 按确定,返回true值;
})else{
alert('您选择了取消'); // 按取消,返回false值;
}
// 输入提示框
var num = prompt('请输入一个数字',0); // 第一个参数是文字提示;第二个参数是输入框模式填充值;并返回输入框中的值;
alert(num); // 将prompt()方法返回的值赋给变量num;并弹出;
// 调用打印及查找对话框
print(); // 打印; 弹出浏览器打印窗口;
find(); // =>boolean;页面有匹配的查找内容返回true;相对于Ctrl+F;
// 状态栏
defaultStatus = '状态栏默认文本'; // 浏览器底部状态栏初始默认值;
status = '状态栏文本'; // 浏览器底部状态栏设置值;3.新建窗口(open())
// 使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口;
// 它接收四个参数:
// (1).要加载的URL;
// (2).窗口的名称或窗口目标;
// (3).一个特定字符串;
// (4).一个表示新页面是否取代浏览器记录中当前加载页面的布尔值;
open('www.baidu.com'); // chrome-search://local-ntp/www.baidu.com;打开失败;需要添加http://;
open('http://www.baidu.com'); // 新建页面并跳转到百度;
open('http://www.baidu.com','搜索引擎'); // 新建页面 打开百度页面 并命名窗口;并不会自动跳转;并且再次调用时只是刷新那个页面;
open('http://www.baidu.com','_parent'); // 在本页面打开百度;'_blank'是指定新页面打开;
// 第三个字符串参数
设置 值 说明
width 数值 新窗口的宽度,不小于100px;
height 数值 新窗口的高度,不小于100px;
top 数值 新窗口的Y坐标,不能是负值;
left 数值 新窗口的X坐标,不能是负值;
location boolean 是否在浏览器窗口中显示地址栏;不同浏览器默认值不同;
menubar boolean 是否在浏览器窗口显示菜单栏,默认为no;
resizable boolean 是否通过拖动浏览器窗口边框来改变大小;默认no;
scrollbars boolean 如果页面内容显示不下,是否显示滚动条;默认no;
status boolean 是否在浏览器窗口中显示状态栏,默认no;
toolbar boolean 是否在浏览器中显示工具栏;默认no;
fullscreen boolean 浏览器窗口是否最大化;仅IE支持;
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');
// open()本身返回window对象
var box = open(); // 返回了一个window对象,打开了一个新空白页面;
box.alert(''); // 然后指定在open()返回的对象打开的新页面弹窗;
// 字窗口操作父窗口
document.onclick = function(){ // 在新的窗口中点击docuement对象;
opener.document.write('子窗口让我输出的!');// 此时在产生它的父窗口会生成文字内容;
}
4.窗口的位置和大小
(1).窗口的位置 // 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置: // IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性, // Firefox提供了screenX和screeY属性; // 他们分别表示窗口看相对于屏幕左边和上边的位置; // 确定窗口的位置=>IE alert(screenLeft); // 浏览器左侧离屏幕的距离; // 确定窗口的位置=>Firefox alert(screenX); // 浏览器左侧离屏幕的距离; // 跨浏览器的方法 var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX; // 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;
(2).窗口的大小
// 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight;
alert(outerWidth);
alert(outerHeight);
// 检测页面大小属性:innerWidth和innerHeight;
alert(innerWidth);
alert(innerHeight);
// PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法;
// 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息;
// PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight;
// 如果是Firefox等浏览器,直接使用innerWidth和innerHeight;
var width = window.innerWidth; // 这里要加window,因为IE会无效;
var height = window.innerHeight;
if(typeof width != 'number'){ // IE6浏览器
if(document.compatMode == 'CSS1Compat'){ // 判断是IE6标准模式;使用documentElement;
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}else{ // 否则是IE6非标准模式;使用body;
width = document.body.clientWidth;
height = document.body.clientHeight;
}
}
// PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小;
// document.compatMode可以确定页面是否处于标准模式;// 调整浏览器位置; moveTo(0,0); // 移动到(0,0)坐标;IE有效; moveBy(10,10); // 向下和向右分别移动10px;IE有效; // 调整浏览器大小 resizeTo(200,200); // 调整大小; resizeBy(200,200); // 扩展收缩大小;
5.间歇调用和超时调用
1 // JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行;
2 // 超时值:在指定的时间过后执行代码;
3 // 间隔值:每隔指定的时间就执行一次代码;
// 超时调用使用window对象的setTimeout()方法;
// 它接受两个参数:要执行的代码和毫秒数;
setTimeout(function(){ // 直接使用函数传入的方法,扩展性好,性能更加;
alert('警告!');
},1000);
// 调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用;
// 这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用;
// 要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它;
var box = setTimeout(function(){ // 将超时调用的ID赋值给变量box;
alert('超时调用');
},1000);
clearTimeout(box); // 将ID传入取消调用方法;
// 间歇调用使用window对象的setInterval()方法;
// 它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载;
// 它接收的参数与setTimeout()相同;
var pox = setInterval(function(){
alert('间隔调用');
},1000);
clearInterval(pox); // 取消间歇调用;
// 利用setInterval()设置一个5秒的定时器;
var num = 0; // 设置起始秒;
var max = 5; // 设置终止秒;
setInterval(function(){
num++; // 递增num;
if(num == max){
clearInterval(this); // 取消间隔调用,this表示方法本身;一直跟踪间隔调用的ID;
alert('5秒后弹窗');
}
},1000);
// 一般使用超时调用来模拟间隔调用是一种最佳模式;
// 因为使用间隔调用需要根据情况来取消ID,并且可能造成同步的一些问题;后一个间歇调用可能会在前一个间歇调用结束之前启动;
var num = 0;
var max = 5;
function box(){
num++;
if(num == max){
alert('5秒后弹窗');
}else{
setTimeout(box,1000); // 隔1秒之后再次执行一个超时调用;
}
};
setTimeout(box,1000); // 执行定时器;
// PS:在使用超时调用时,没必要跟踪超时调用ID,因为每次执行之后,如果不再设置另一个超时调用,调用就会自动停止;二 location对象
location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能;
事实上,location对象是window对象的属性,也是document对象的属性;
alert(location); // 获取当前的URL
(1).location对象的属性
属性 描述的URL内容
hash 如果该部分存在,表示锚点部分;
host 主机名:端口号;
hostname 主机名;
href 整个URL;
pathname 路径名;
port 端口号;
protocol 协议部分;
search 返回URL的查询字符串('?gws_rd=ssl#safe=strict&q=ab'),这个字符串以问号开头;
(2).location对象的方法
assign() 跳转到指定页面,与href等效;
reload() 重载当前URL;
replace() 用新的URL替换当前页面;
location.hash = '#1'; // 设置#后的字符串,并跳转;
location.hostname = 'Jack'; // 设置主机名;
location.search = '?id=5'; // 设置?后的字符串;
// 在Web开发中,我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对;
// 通过location,我们可以写一个函数,来一一获取;
function getArgs(){
// 创建一个存放键值对的数组;
var args = [];
// 去除?号;
var qs = location.search.length>0?location.search.substring(1):'';
// 按&字符串拆分数组;
var items = qs.split('&');
var item = null, name = null, value = null;
//遍历
for(var i = 0; i<items.length; i++){
item = items[i].split('=');
name = decodeURIComponent(item[0]); // 因为查询字符串被浏览器编码过;
value = decodeURIComponent(item[1]);// 每个查询字符串参数都变成了args对象的属性;
// 把键值对存放到数组中;
args[name] = value;
}
return args;
}
var args = getArgs();
alert(args['id']); // 获取URL中id对应的值;
세 가지 기록 개체
기록 개체는 창 개체의 속성으로, 창이 열린 순간부터 사용자의 인터넷 액세스 기록을 저장합니다.(1).히스토리 객체의 속성
length 기록 개체의 레코드 수
(2).히스토리 객체의 방법
back() back과 유사한 브라우저 기록 항목의 이전 URL로 이동합니다.
forward() 브라우저 기록 항목의 다음 URL로 이동합니다.
과 유사합니다.
go(num) 브라우저는 기록 개체에서 앞이나 뒤로 이동합니다.
BOM(브라우저 개체 모델)은 창 개체를 사용하여 브라우저 창과 페이지의 표시 영역을 나타냅니다.
동시에, window 객체는 ECMAScript의 Global 객체이기도 하므로 모든 전역 변수와 함수는 해당 속성이고 모든 기본 생성자와 기타 함수도 해당 네임스페이스에 존재합니다. (1) 위치 개체를 사용하여 브라우저의 탐색 시스템에 프로그래밍 방식으로 액세스하여 브라우저의 URL 세그먼트를 세그먼트별로 또는 전체적으로 수정합니다. (2) 교체() 메소드를 호출하여 새 URL로 이동하면 해당 URL이 현재 브라우저 기록에 표시된 페이지를 대체합니다.
(3).screen 개체: 클라이언트 디스플레이 관련 정보를 저장하며 일반적으로 사이트 분석에만 사용됩니다.
(4).history 객체: 브라우저 기록에 액세스하기 위한 작은 간격을 엽니다. 개발자는 이를 기반으로 기록 레코드 수를 판단할 수 있으며 기록의 모든 페이지를 앞뒤로 탐색할 수도 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
