javascript高级程序设计第八章 BOM笔记

最新推荐文章于 2022-07-08 16:32:37 发布

前端炮灰预备员

最新推荐文章于 2022-07-08 16:32:37 发布

阅读量194

点赞数

分类专栏： javascript高级程序设计读书笔记

本文链接：https://blog.csdn.net/qq_41706280/article/details/101106630

版权

javascript高级程序设计读书笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

没太明白1
BOM（浏览器对象模型）
ECMAScript是JavaScript的核心,但如果要在Web中使用ECMAScriot,BOM无疑才是真正的核心。
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关

8.1 window 对象

BOM的核心对象是window，它表示浏览器的一个实例。

在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）。

这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法

8.1.1全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

定义全局变量与在window对象上直接定义属性还是有点差别的：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以

var age = "20";
window.name = "yuan";
delete age;
delete name;
console.log(age);    //20
console.log(window.name);    //undefined

刚才使用 var 语句添加的window属性 age 有一个名为[ [Configurable] ]的特性，这个特性的值被设置为false,所以不能被delete删除。

尝试访问未声明的变量会抛出错误，但是通过查询window对象，可知道某个可能未声明的变量是否存在。

var newValue = oldValue;    
console.log(newValue);    //报错

var newValue = window.oldValue;    
console.log(newValue);    //undefined

本章将要讨论的很多全局JavaScript对象（如 location 和 navigator ）实际上都是window 对象的属性

8.1.2 窗口关系及框架（没太明白）

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。

在frames集合中，可通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。

每个window对象都有一个name属性，其中包含框架的名称

<html>
    <head>
        <title>Frameset Example</title>
    </head>
    <frameset rows="160,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="anotherframe.htm" name="leftFrame">
            <frame src="yetanotherframe.htm" name="rightFrame">
        </frameset>
     </frameset>
</html>

一个框架居上，两个框架居下。
对于这个例子可通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。不过最好使用top而非window来引用这些框架（例如：top.frames[0]）

1.top对象始终指向最高（最外层）的框架，也就是浏览器窗口

使用它可确保在一个框架中正确的访问另一个框架。因为对于在一个框架中编写的任何代码来说，其中的window对象指向的都是那个框架的特定实例，而非最高层的框架

2.与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。在有些情况下parent有可能等于top,但在没有框架的情况下，parent一定等于top（此时他们都等于window)

3.与框架有关的最后一个对象是self，它始终指向window

所有这些对象都是 window 对象的属性，可通过 window.parent、window.top 等形式来访问。同时这也意味着可将不同层次的 window 对象连缀起来，例如 window.parent.parent.frames[0]

8.1.3 窗口位置

screenLeft、screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置（IE,Safari,Opera,Chrome)

screenX、screenY，得到的位置信息和上面的一样（Firefox,Safari,Chrome)

使用以下代码可跨浏览器取得窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ?
                  window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                  window.screenTop : window.screenY;

这个例子运用二元操作符首先确定 screenLeft 和 screenTop 属性是否存在，存在则取得这两个属性的值，不存在取得screenLeft，screenTop 的值

================================================================
moveTo(), moveBy() 有可能将窗口精确地移动到一个新位置
moveTo()接收新位置的x和y坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数
（注意：左上角是原点，x轴从左到右，y轴从上到下）

//窗口移动到屏幕左上角
window.moveTo(0,0);
//窗口下移100px
window.moveBy(0,100);
//将窗口移动到（200，300）
window.moveTo(200,300);
//窗口左移50px
window.moveBy(-50,0);

这两个方法有时会用不了
（剩余内容详见p197）

8.1.4 窗口大小

主流浏览器都支持四个属性 innerWidth, innerHeight, outerWidth, outerHeight
outerWidth, outerHeight返回浏览器窗口本身尺寸（IE9+，Safari，Firefox)或是表示页面视图容器大小【单个标签页对应的浏览器窗口】（Opera）
innerWidth, innerHeight 表示该容器中页面视图区大小（减去边框宽度）。
Chrome中innerWidth, innerHeight 和 outerWidth, outerHeight 返回相同值，即视口大小而非浏览器窗口大小

resizeTo(), resizeBy()可调整浏览器窗口大小
resizeTo()接收浏览器窗口新宽度和新高度，resizeBy()接收新窗口与原窗口宽度和高度之差

//调整到100，100
window.resizeTo(100,100);
//调整到150，200
window.resizeBy(50,100);

方法也可能被禁用。。。
（剩余的详见书上p198）

8.1.5 导航和打开窗口

window.open()方法即可导航到一个特定的URL，也可打开一个新的浏览器窗口

就相当于用户在浏览器打开了一个链接这样的操作

这个方法可接收四个参数：URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史纪录中当前加载页面的布尔值。通常只传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

若该方法传递了第二个参数，且该参数是已有窗口或框架的名称，那就会在该窗口或框架中加载URL。若该参数不是已有窗口或框架的名称，那就创建一个新窗口，将其命名为这个参数，并在其窗口下运行这个URL。

此外，第二个参数的值也可是下列任何一个特殊的窗口名称：_self、_parent、_top（当只有一个窗口且该窗口下无框架时就在当前窗口下运行URL）和 _blank（创建个新窗口运行URL）

1.弹出窗口

若传递的第二个参数不是个已存在的窗口或框架，那么就会根据第三个参数来创建一个新的窗口。第三个参数可规定这个新窗口的各个设置。

调用close()方法还可关闭这个新打开的窗口,这个方法仅可关闭通过window.open()打开的弹出窗口

窗口名.close();

（余下部分看书p200，p201，p202）

8.1.6 间歇调用和超时调用

js是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行

1.超时调用：隔一段时间后执行代码。setTimeout()方法，接受两个参数，要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）

setTimeout(function(){
	alert("hello friend!");
},2000);

第一个参数，要执行的代码推荐用一个匿名函数表示，不推荐用字符串，因为传递字符串可能导致性能损失

调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。可以通过它来取消超时调用，则这个超时调用就不会发生了

var timeoutID = setTimeout(function(){    //设置一个全局变量并将超时调用ID赋值给它
	alert("hello friend!");
},2000);
//调用clearTimeout()方法取消超时调用
clearTimeout(timeoutID);

2.间歇调用：按照指定时间间隔重复调用代码。setInterval()方法，也是接受两个参数，要执行的代码和间隔时间（毫秒）

setInterval(function(){
	alert("我会每隔2s出现一次！");
},2000);

第一个参数，执行的代码也是建议使用匿名函数

也可用clearInterval()方法清除掉间歇调用，而且需要经常用到该方法（因为若不清楚，间歇调用会一直运行直到关闭窗口）

var count = 0;
var maxCount = 5;
function createCount(){
	count++;
	alert("我每隔2s出现一次！");
	if(count == maxCount){
		clearInterval(intervalID);
		alert("我不会再出现了！");
	}
}
var intervalID = setInterval(createCount,2000);

以上代码也可用超时调用实现

var count = 0;
var maxCount = 5;
function createCount(){
	count++;
	alert("我每隔2s出现一次！");
    if(count < maxCount){
		setTimeout(createCount,2000);
	}else{
		alert("我不会在出现了！");
	}
}
setTimeout(createCount,2000);

可看出超时调用就不用清除了。用超时调用来模拟间歇调用是一种最佳模式，因为最后一个间歇调用很有可能在前一个间歇调用之前启动，所以最好不要使用间歇调用

8.1.7 系统对话框

弹出的对话框和HTML无关，他们的外观也不由CSS决定，是系统默认的。显示对话框时，代码停止运行，关掉对话框，代码再次运行

alert() 接受一个字符串并将其显示给用户，只包含文本和一个确定（ok）按钮，一般用于向用户通知什么，警告什么
confirm() 接受一个字符串显示给用户，包含文本和两个按钮（确定、取消或是ok、cancel ），一般让用户选择，比如用户删除的时候，让用户确定或者放弃

if(confirm("are you sure?")){    
	alert("hahaha!");
}else{
	alert("555...");
}

要注意，第一行代码已经执行了一次confirm(“are you sure?”);了，执行后会返回true或是false

prompt() 接受两个参数：要显示给用户的文本提示和文本输入框的默认值（可以是空字符串）。这是个提示框，一般用于提示用户输入一些文本。用户可输入一些文本点击确认或是点击取消不输入

var result = prompt("请输入你的名字","");
if(result != null){
	alert("欢迎您 ：" + result + " ！");
}

如果用户点击了“确认”，则该方法返回输入的文本，若用户点击了“取消”或是用其他方法关闭了弹窗，则返回null

（还有点剩余部分见书上p206）
（其他剩余部分见p207之后）

前端炮灰预备员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级程序设计第八章 BOM笔记

没太明白1BOM（浏览器对象模型）ECMAScript是JavaScript的核心,但如果要在Web中使用ECMAScriot,BOM无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关8.1 window 对象BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗...
复制链接

扫一扫