window对象是所有客户端JavaScript特性和API的主要接入点。
常用方法
alert
弹出一个对话框用来显示一些信息
setTimeout
注册一个函数,在给定的一段时间之后触发一个回调
<code>
//等待两秒,然后说hello
setTimeout(function() {alert("hello world");},2000);
</code>
window对象中一个最重要的属性是document,他引用Document对象,后者表示显示在窗口中的文档。
window、Document和Element对象上另一个重要的属性集合是事件处理程序相关的属性。
Web文档里的JavaScript
JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。
在HTML里嵌入JavaScript
在HTML文档里嵌入JavaScript代码有四种方法:
- 内联,放置在<script>和</script>标签对之间
- 放置在游<script>标签的src属性指定的外部文件中
- 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定
- 放在一个URL里,这个URL使用特殊的“JavaScript:”协议
<Script>元素
JavaScript代码可以以内联的形式出现在HTML文件里的<script>和</script>标签之间。
<code>
<script>
//这里是你的javascript代码
</script>
</code>
外部文件中的脚本
<script>标签支持src属性,这个属性指定包含JavaScript代码文件的URL。
用法:
<code>
<script src = "../../scripts/util.js></script>
</code>
使用src属性方式的优点:
- 可以把大块JavaScript代码从HTML文件中删除,这有助于保持内容和行为的分离,从而简化HTML文件
- 如果多个Web页面共用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个HTML文件。
- 如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面——随后的页面就可以从浏览器缓存检索它
- 由于src属性的值可以是任意的URL,因此来自一个Web服务器的JavaScript程序或Web页面可以使用由另一个Web服务器输出的代码。
- 从其它网站载入脚本的能力,可以让我们更好的利用缓存。
脚本类型
JavaScript是Web的原始脚本语言。在默认情况下,假定<script>元素包含或引用JavaScript代码。
HTML中的事件处理程序
类似onclick的事件处理程序属性,用相同的名字对应到HTML属性,并且汉可以通过将JavaScript代码放置在HTML属性里来定义事件处理程序。
URL中的JavaScrit
在URL后面跟一个JavaScript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。
书签
“书签”就是一个保存下来的URL。
JavaScript程序的执行
JavaScript程序的执行有两个阶段:
- 载入文档内容,并执行<script>元素里的代码
- 事件驱动阶段,响应异步发生的事件
同步、异步和延迟的脚本
当脚本把文本传递给document.write()时,这个文本被添加到文档输入流中,HTML解析器会在当前位置创建一个文本节点,将文本插入这个文本节点后面。
脚本的执行只在默认情况下是同步和阻塞的。
<script>标签可以由defer和async属性。
- defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成。
- anync属性使得浏览器可以尽快的执行脚本,而不用在下载脚本时阻塞文档解析。
如果<script>标签同时有两个属性,同时支持两者的浏览器会遵从async属性并忽略defer属性。
事件驱动的JavaScript
如果想要程序响应一个事件,写一个函数,叫做“事件处理程序”、“事件监听器”或“回调”。然后注册这个函数,这样也就会在事件发生时调用它。
addEvenListaner()方法允许注册多个监听器。
功能测试
功能测试是解决不兼容性问题的一种强大技术。
例如:
<code>
if(element.addEventListener){
element.addEventListener("Keydown",handler,false);
element.addEventListener("Keypress",handler,false);
}
else if(element.attachEvent){
element.attachEvent("onKoydown",handler);
element.attachEvent("onKeypress",handler);
}
else{
element.onkeydown = element.onKeypress = handler;
}
</code>
浏览器测试
在客户端JavaScript中检测浏览器类型和版本的方法就是使用Navigator对象。
条件注释
例如:excanvs.js类库在IE里实现<canvas>元素
<code></code>
同源策略
同源策略是对JavaScript代码能够操作哪些Web内容的一条完整的安全限制。
负责管理窗口或窗体中的JavaScript代码以及和其他窗口或帧的交互。
脚本只能读取和所属文档来源相同的窗口和文档的 属性。
不严格的同源策略
为了支持多域名站点,可以使用Document对象的domain属性。
在默认情况下,属性domain存放的是载入文档的服务器的主机名。可以设置这一属性,不过使用的字符串必须具有有效的域前缀或它本身。
如果两个窗口包含的脚本把domain设置成了相同的值,那么这两个窗口就不在受同源策略的约束,他们可以相互读取对方的属性。
Window对象
客户端JavaScript程序的全局对象
setTimeout()和setInterval()
可以用来注册在指定的时间之后单次或重复调用的函数。
- window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行。setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行。
- setInterval()和setTimeout()一样,只不过这个函数会在指定的毫秒数的间隔里重复调用。也是返回一个值,传递给clearInterval()用于取消后续函数的调用。
<code>
setInterval(updateClock,60000); //每60秒调用一次updateClock();
</code>
浏览器的定位和导航
window对象的location属性引用的是Location对象,他表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档。
Document对象的location属性也引用到Location对象:
<code>window.location === document.location //总是返回true</code>
- 解析URL
window对象的location属性引用的是Location对象,表示窗口中当前显示的文档的URL。
location对象的属性href是一个字符串,后者包含URL的完整文本。
location对象的toString()方法返回href属性的值。
Location对象的其他属性——protocol,host,hostname,port,pathname和search,分别表示URL的各个部分。 - 载入新的文档
Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。
replace()方法也类似,但是他会在载入新文档之前会从浏览历史中把当前文档删除。
reload()方法可以让浏览器重新载入当前文档。
是浏览器跳转到新的页面的另一种方法是直接把新的URL赋给location属性:
<code>location = "http://www.oreilly.com"</code>
还可以把相对URL赋给location,它们会相对当前URL进行解析:
<code>location = "page2.html"</code>
纯粹的片段标识符是URL的一种类型,会让页面滚动到文档的某个位置。
<code>location = "#top"</code>
浏览历史
window对象的history属性引用的是该窗口的History对象,History对象是用来把窗口的浏览历史文档和文档状态列表的形式表示。
方法:
- back()
使浏览器在浏览历史中后退一格。 - foward()
使浏览器在卢兰历史中前进一格。 - go()
接受一个参数,可以在历史列表向前向后跳过任意多个页。
浏览器和屏幕信息
- Navigator对象
window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。
Navigator对象有4个属性:appName、appVersion、userAgent、platForm。 - Screen对象
提供有关窗口显示的大小和可用的颜色数量的信息。
width和height指定的是以像素为单位的窗口大小
availWidth和availHeight指定的是实际可用的显示大小
colorDepth指定的是显示的BPP的值
对话框
- alert()向用户显示一条消息并等待用户关闭对话框
- confirm()也显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个布尔值
- prompt()同样也显示一条消息,等待用户输入字符串,并返回那个字符串。
错误处理
Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误的信息输出到浏览器的JavaScript控制台上。如果给这个属性赋一个函数,那么只要这个窗口放生了JavaScript错误,就会调用该函数。
window.onerror的第一个参数是描述错误的一条消息,第二个参数是一个字符串,它存放引发错误的JavaScript代码所在的文档的URL,第三个参数是文档中发生错误的行数。
多窗口和窗体
HTML文档经常使用<iframe>来嵌套多个文档,由<iframe>所创建的嵌套浏览上下文使用它自己的window对象所表示的。
- 打开窗口
使用window对象的open()方法尅打开一个新的浏览器窗口。window.open()载入指定的URL到新的或已存在的窗口中,并返回代表那个窗口的window对象。
open()的返回值是代表命名或新创建的窗口的window对象。 - 关闭窗口
方法close()关闭一个窗口
要显式的使用标识符window,这样可以避免混淆Window对象的close()方法和Document对象的close()方法。
窗体之间的关系
任何窗口或窗体中的JavaScript代码都可以将自己的窗口和窗体引用为window和self。
- 窗体可以用parent属性引用彪悍他的窗口或窗体的window对象
<code>parent.history.back();</code> - 如果一个窗口是顶级窗口或标签,而不是窗体,那么其parent属性引用的就是这个窗口本身:
<code>parent == self;</code> - 如果一个窗体包含在另一个窗体中,而后者又包含在顶级窗口中,那么该窗体就可以使用parent.parent来引用顶级窗口。
- top属性引用的都是指向包含它的顶级窗口。
窗体是通过<iframe>元素创建的。可以用获取其他元素的方法来获取一个表示<iframe>的元素对象。
- 假定文档里有<ifrme id = "f1">,那么表示该ifame的元素对象就是:
<code>var iframeElement = document.getElementById("f1");</code>
<iframe>元素有contentWindow属性,引用该窗体的Window对象,所以此窗体的Window对象就是:
<code>var childFrame = document.getElementById("f1").contentWindow</code>
可以进行反向操作,从表示窗体的Window对象来获取窗体的<iframe>元素——用window对象的frameElement属性。
<code>var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement === elt;
window.frameElement === null;</code>