5.1 HTML中的JavaScript
5.1.1 <script/>标签
HTML页面中包含JavaScript通过使用<script/>标签来实现。该标签通常放置在页面<head/>标签中。有两个属性，language声明要使用的脚本语言；src是可选的，声明要加入页面的外部JavaScript文件。如果未声明src，在<script/>标签中即可任意形式编写JavaScript代码，如果声明了，那么<script/>标签中的代码可能无效。如下例：
<html>
<head>
<title>Title of Page</title>
<!—定义了内部JavaScript代码 -->
<script language=”JavaScript”>
var i = 0;
</script>
<!--定义了外部JavaScript代码文件的链接-->
<script language=”JavaScript” src=”../scripts/external.js”></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>
5.1.2 外部文件格式
外部文件格式只包含JavaScript代码的纯文本，不需要<Script/>标签，引用文件的<Script/>标签出现在HTML页中。
5.1.3 内嵌代码和外部文件
何时应该采用内嵌代码，何时采用外部文件？
大量的JavaScript代码不应内嵌在HTML文件中，原因如下：
l 安全性——只要查看页面的源代码，任何人都可确切地知道其中的代码做了什么。在外部文件中还可以加入版权和其他知识产权通告，而不打断页面流。
l 代码维护——把所有JavaScript文件放在一个目录中易于维护，这样在发生JavaScript错误时，就不会对放置代码的位置有任何疑问。
l 缓存——浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面使用同一文件，只需要下载一次。
5.1.4 标签位置
一般来说，所有代码和函数都定义在HTML页的<head/>标签中，这样在显示页面主体后，代码就被完全装载进浏览器。若出现在<body/>标签中，说明是调用前面定义的函数。
<script/>放在<body/>内时，只要脚本所属的部分页面被载入浏览器，脚本就会被执行。但建议不要这样做，建议在页面主体重使用事件处理函数（event handler），例如：
<html>
<head>
<title>Title of Page</title>
<script language=”JavaScript”>
function sayHi() {
alert(“Hi”);
}
</script>
</head>
<body>
<input type=”button” value=”Call Function” οnclick=”sayHi()” />
</body>
</html>
Onclick声明一个事件处理函数，即响应特定事件的代码。
5.1.5 隐藏还是不隐藏
如果浏览器不支持JavaScript，可以在内嵌代码周围加入HTML注释，这样其他浏览器就不会在屏幕上显示这段代码。
<script language=”JavaScript”><!-- hide from older browsers
function sayHi() {
alert(“Hi”);
}
//-->
</script>
5.1.6 <noscript/>标签
支持或者启用JavaScript的浏览器会忽略<noscript/>标签中的代码，不支持或禁用JavaScript的浏览器则显示<noscript/>标签中的内容。
5.1.7 XHTML中的改变
XHTML中不再用language特性，而用type声明内嵌代码或要加入的外部文件的mine类型，JavaSript的mine类型是“text/javascript”。
XHTML中第二个改变是CDATA。XML中的CDATA段用于声明不应被解析为标签的文本，这样就可以使用特殊字符，如<，>，&，*，而不必使用它们的字符实体。如遇到不支持CDATA的浏览器，可使用注释隐藏该代码。
5.2 BOM(浏览器对象模型)
BOM提供了独立于内容而与浏览器窗口进行交互的对象。
BOM由一系列相关的对象构成，下图展示了基本的BOM体系结构：
可以看到，window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。
5.2.1 window对象
Window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其它影响。
如果页面使用框架集合，每个框架都有它自己的window对象，存放在frames集合中。在frames集合中，可用数字（由0开始，从左到右，逐行的）或用名字对框架进行索引。
如果有一个框架集，其中包含一个顶层框架（name=“topname”）和两个底层框架。那么可以用window.frames[0]、window.frames[“topname”]和top.frames[0]来引用框架，其中top对象指向的都是最顶层的框架，即浏览器窗口本身。
另外，当定义了嵌套窗口时，可用parent指向父框架；还有一个全局化的窗口指针self，它总是等于window。
1.窗口操作
可以用四种方法移动或调整浏览器窗口的大小：
l moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx为负值，向左移动窗口，dy为负值，向上移动窗口。
l moveTo(x,y)——移动浏览器窗口，使它左上角位于用户屏幕的（x,y）处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。
l resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。dw为负数，把缩小窗口的宽度，dy为负数，缩小窗口的高度。
l resize(w,h)——把窗口的宽度调整为w，高度调整为h。不能使用负数。
2.导航和打开新窗口
用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL，新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，最后一个参数只有在调用window.open()方法却打不开新窗口时才有效。
特性字符串使用逗号分隔的设置列表，它定义新创建的窗口的某些方面：
| 设置 | 值 | 说明 |
| left | Number | 说明新创建的窗口的左坐标。不能为负数 |
| top | Number | 说明新创建的窗口的上左边。不能为负数 |
| height | Number | 说明新创建的窗口的高度。该数字不能小于100 |
| width | Number | 说明新创建的窗口的宽度。该数字不能小于100 |
| resizable | yes,no | 判断新窗口是否能通过拖动边线调整大小。默认值是no |
| scrollable | yes,no | 判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no |
| toolbar | yes,no | 判断新窗口是否显示工具栏。默认值是no |
| status | yes,no | 判断新窗口是否显示状态栏。默认值是no |
| location | yes,no | 判断新窗口是否显示(web)地址栏。默认值是no |
如果在主浏览器窗口中调用window.close()方法，将得到一条消息：提示脚本错误试图关闭窗口。通用规则是，脚本可以关闭它们打开的任何窗口，但不能关闭其它窗口。
3.系统对话框（system dialog）
l alert()方法——接受一个参数，即要显示给用户的文本。调用该方法后，浏览器将创建一个具有OK按钮的系统消息框，显示指定文本。
l confirm()方法——与alert()方法相似，但弹出的对话框除了OK按钮外还有Cancel按钮，这样允许用户说明是否执行指定的动作。为判断用户单击的是OK还是Cancel按钮，confirm()返回一个Boolean值，如果点OK，返回true，点击Cancel返回false。典型用法如下：
if(confirm(“Are you sure?”)){
alert(“I’m so glad you’re sure!”);
}else{
alert(“I’m sorry to hear you’re not sure!”);
}
l prompt()方法——弹出的对话框提示用户输入某些信息。除OK按钮和Cancel按钮外，还有文本框，要求用户在此输入某些数据。该方法接受两个参数，即要显示给用户的文本和文本框中的默认文本（如果不需要，可以是空串）。如果点击OK按钮,将文本框中的值作为函数值返回。如果单击Cancel按钮，返回null。
4.状态栏（status bar）
状态栏是页面底部边界内的区域，用于向用户显示信息。可以使用window对象的status属性和defaultStatus属性设置它们的值。Status可以使状态栏的文本暂时改变，defaultStatus可在用户离开当前页面前一直改变该文本。
当鼠标移到链接上时，浏览器默认在状态栏中显示href属性的值。设置window.status属性，可以向用户隐藏链接实现的细节：
<a href=”javascript:goSomewhere(1,2,3,4)” οnmοuseοver=”window.status=’hello world’ “>Books</a>
5.时间间隔和暂停
暂停是在制定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。
可用window对象的setTimeou()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。第一个参数可以是代码串，也可以是函数指针。要取消尚未执行的暂停可调用clearTimeout()方法，并将暂停ID传递给它。
可调用setInterval()方法设置时间间隔，参数是要执行的代码和每次执行之间等待的毫秒数。ClearInterval()方法可用ID阻止再次执行该代码。
6.历史
可以访问浏览器窗口的历史。处于安全原因，所有导航只能通过历史完成，不能得到浏览器历史中包含的页面的URL。
可以使用window对象的history属性及相关方法完成操作。
go（）方法只有一个参数，即前进或后退的页面数。如果是负数，就在浏览器历史中后退。如果是正数，就前进。因此，后退一页，就用：window.history.go(-1)或history.go(-1)。
通常用该方法创建网页中嵌入Back按钮，例如：
<a href=”javascript:history.go(-1)”>Back</a>
用back()和forward()可实现同样的操作。
虽然不能使用浏览器历史中的URL，但可以用length属性查看历史中的页面数：
alert(“There are currently”+history.length.+”pages in history”);
如果想前进或后退多个页，想知道是否可以这样做，上面的代码就非常有用。
5.2.2 document对象
Document对象实际上是window对象的属性，它是唯一一个即属于BOM又属于DOM的对象。
lastModified属性获取的是最后一个修改页面的日期的字符串表示，用作旁注，除非你想在主页上显示最后的修改日期。
Title属性是可读写的，所以可以随时改变。
URL也是可读写的，所以可以用来获取当前页面的URL，或者设置为新的URL
Write（）和writeln（）方法接受一个参数，即要写入文档的字符串，唯一的不同是writeln（）在结尾加一个换行符。这两个方法都会把字符串的内容插入到调用它们的位置，这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串。
Open（）方法用于打开已经载入的文档以便编写，close（）方法用于关闭open（）方法打开的文档。
5.2.3 location对象
该对象表示载入窗口的URL，此外还可以解析URL：
l hash——如果URL包含#，该方法将返回该符号之后的内容。
l host——服务器的名字。
l hostname——通常等于host，有时会省略前面的www。
l href——当前载入的页面的完整URL。
l pathname——URL中主机名后的部分。
l port——URL中声明的请求的端口。默认情况下属于空白。
l protocol——URL中使用的协议，即双斜杠（//）之前的部分。
l search——执行GET请求的URL中的问号（？）后的部分，又称查询字符串。
Replace()方法，用于设置或获取窗口的URL，然后从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的back和forward按钮访问它了。
Reload（）方法可重载当前页面。有一个参数，当为false时从缓存载入，为true从服务器载入。这个方法调用后的代码可能执行，也可能不被执行，因此，最好把它放在最后一行。
注意,location对象是window对象和document对象的属性，所以window.location和document.location互相等价，可以交换使用。
5.3 小结
介绍了BOM及它提供的各种对象。了解了Windows对象是JavaScript世界的核心，其他所有BOM对象都不过是window对象的属性。
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
