说明：本文为《JavaScript高级程序设计》第5章学习笔记。
本章探讨如何把JavaScript嵌入HTML及其他语言，并介绍了BOM（浏览器对象模型）的一些基本概念。
一．HTML中的JavaScript
1. <script/>标签
最初定义的JavaScript标签具有一个或两个特性，language特性声明要使用的脚本语言，src特性是可选的，声明要加入页面的外部JavaScript文件。language特性一般被设置为JavaScript，不过也可以用它声明JavaScript的确切版本，例如JavaScript 1.3（如果省略，浏览器默认使用最新的JavaScript版本）。
Eg1. <script language=”JavaScript”>
var i=0;
</script>
Eg2. <script language=”JavaScript” src=”external.js”></script>
2. 外部文件格式
外部文件中为只包含JavaSript代码的纯文本文件。在外部文件中不需要<script/>标签。
Eg. <script language=”JavaScript” src=”external.js”></script>
external.js的内容如下：
function sayHello() {
alert(“Hello!”);
}
3. 内嵌代码和外部格式
一般认为，大量的JavaScript不应内嵌到HTML文件中，原因如下：
l 安全性——只要查看页面的源代码，任何人都可确切地知道其中的代码做了什么。如果怀有恶意的开发者查看了源代码，就可能发现系统漏洞，危及整个站点或应用程序的安全。此外，在外部文件中还可加入版权和其他知识产权通告，而不打算页面流；
l 代码维护——如果JavaScript代码散布于多个页面，那么代码维护将变成一场噩梦。
l 缓存——浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面使用同一个文件，只需要下载该文件一次。这将加快下载速度。把同一段代码放入多个页面中，不只浪费，还增加了页面大小，从而增加下载时间。
4．标签放置
一般放在<head/>中，这样在显示页面主题后，这些代码就被完全装载进浏览器。唯一该出现在<body/>标签中的代码是调用前面定义的函数的代码。
Eg.
<html>
<head>
<title>测试</title>
<script language="JavaScript">
function sayHi() {
alert("Hi");
}
</script>
</head>
<body>
<input type="button" value="调用函数" onclick="sayHi()"/>
</body>
</html>
5. 隐藏还是不隐藏
若要在不支持JavaScript的浏览器中隐藏<script/>的代码。
Eg.
<script language="JavaScript">
<!—
function sayHi() {
alert("Hi");
}
//-->
</script>
6．<noscript/>标签
不支持JavaScript的浏览器另外一个令人关注的是如何提供替代的内容。隐藏代码只是解决方法的一部分，开发者还需要一种方法，声明在JavaScript不能用时应该显示的内容。解决方法是采用<noscript/>标签，它可包含任何HTML代码（除<script/>）。支持或启用JavaScript的浏览器会忽略这些HTML代码，不支持的则显示<noscript/>的内容。
7．XHTML中的改变
近年来，随着XHTML标准的出现，<script/>标签也经历了一些改变。它不再用language特性，而用type特性来声明要加入的外部文件的mine类型。
Eg. <script type=”text/javascript” src=”external.js”></script>
二．SVG中的JavaScript
SVG是一种崭露头角的基于XML的语言，用于在Web上绘制矢量图形。矢量图形不同于光栅图形(位图)，它们定义的是三角形、线段及它们之间的关系，而不只是定义图像的每个像素的颜色。这样生成的图像无论大小，看起来都是相同的。随着这种语言的日益流行，矢量图形程序已经开始加入SVG导出功能。
三．BOM
BOM由一系列相关的对象构成，window对象是整个BOM的核心，所有对象的集合都以某种方式回接到window对象。
1. window对象
window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。
Eg. 可用window.frames[0]、window.frames[“topFrame”]来引用框架集合中的某个框架。
1） 窗口操作
moveBy(dx, dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。
moveTo(x, y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x, y)处。
resizeBy(dw, dh)——相对于浏览器窗口的当前大小，把窗口的宽度调整为dw个像素，高度调整为dh个像素。
resizeTo(w, h)——把窗口的高度调整为w，高度调整为h。不能使用负数。
1) 导航和打开窗口
Eg. window.open(http://www.wrox.com/, “wroxwindow”, “height=150,width=300,top=10,left=10,resizable=yes”);
2) 系统对话框
Eg1. alert(“Hello world!”);
Eg2. comfirm(“Are you sure?”);
Eg3. propt(“What’s you name?”, “阿蜜果”);
3) 状态栏
状态栏为底部边界内的区域，用于向用户显示信息。
Eg1. window.defaultStatus = “You are surfing www.wrox.com.”;
Eg2. window.status = “hello, 阿蜜果”;
4) 时间间隔和暂停
JavaScript支持暂停和时间间隔，这可有效地告诉浏览器应该何时执行某行代码。所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间指定的毫秒数。
可以用window对象的setTimeout()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数。第一个参数可以是代码串，也可以是函数指针。
Eg1. setTimeout(“alert(‘Hello world!’)”, 1000);
Eg2. setTimeout(function() {alert(“Hello world”);}, 1000);
该函数返回一个数字暂停ID，与操作系统的进程ID相似。要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它。如下：
var iTimeoutId = setTimeout(“alert(‘Hello world!’)”, 1000);
clearTimeout(iTimeoutId);
时间间隔与暂停的运行方式相似，只是它无限次地每隔指定的时间段就重复一次指定的代码。可调用setInterval()方法设置时间间隔，它的参数和setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。
Eg1. setInterval(“alert(‘Hello world!’)”, 1000);
Eg2. setInterval(function() {alert(“Hello world!”)}, 1000);
此外，与setTimeout()类似，setInterval()方法也创建时间间隔ID，以标识要执行的代码。ClearInterval()方法可用这个ID阻止再次执行该代码。
Eg.
var iNum = 0;
var iMax = 100;
var iIntervalId = null;
function incNum() {
iNum++;
if (iNum = iMax) {
clearInterval(iIntervalId);
}
}
iIntervalId = setInterval(incNum, 500);
这段代码的功能是：每隔500ms，就对数字iNum进行一次增量运算，直到它达到最大值（iMax）。
5) 历史
历史是指访问过的站点的列表。处于安全原因，所有导航只能通过历史完成，不能得到浏览器历史中包含的页面的URL。
Eg1. 后退一页：window.history.go(-1); 或者 history.go(-1); 或者history.back();
Eg2. 前进一页：history.go(1); 或者 history.forward();
Eg3. 查看历史中的页面数：history.length;
2. document对象
document对象实际上是window对象的属性，因为window对象的任何属性和方法都可直接访问，所以下面代码返回“true”：
alert(window.document == document);
该对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。
Eg1. 改变框架的标题：top.document.title = “新标题”;
Eg2. 把窗口导航到新页面：document.URL = “http://www.blogjava.net/amigoxie”;
Eg3. document.links[0]访问链接；
Eg4. document.images[0]或document.images[“imgHome”]访问图像；
Eg5. document.forms[0]或document.forms[“frmSubscribe”]访问表单。
Eg6. var oNewWin = window.open(“about:blank”, “newwindow”, “height=150, width=300, top=10, left=10, resizable=yes”);
oNewWin.document.open();
oNewWin.document.write(“<html><head><title>新窗口</title></head>”);
oNewWin.document.write(“<body>新窗口内容</body></html>”);
oNewWin.document.close();
本例功能如下：打开空白页，然后写入新页面，写完后，调用close()方法完成显示。
3. location对象
BOM最有用的对象之一是location对象，它是window对象和document对象的属性。location对象表示载入窗口的URL，此外，它还可以解析URL。
l hash——如果URL包含#，该方法将返回该符号之后的内容；
l host——服务器的名字（eg. www.wrox.com）；
l hostname——通常等于host，有时会省略前面的www；
l href——当前载入的页面的完整URL；
l pathname——URL中主机后面的部分；
l port——URL中声明的请求的端口，默认情况下，无端口信息；
l protocol——URL中使用的协议，即双斜杠之前的部分；
l search——执行GET请求的URL中的问号后的部分。
Eg1. location.href = “http://www.blogjava.net/amigoxie”;
Eg2. location.assign(“http://www.blogjava.net/amigoxie”);
如果不想要包含脚本的页面能从浏览器中访问，可使用replace()方法，该方法所做的操作与assign()方法一样，但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的Back和Forward按钮访问它了。
Eg3. location. Replace(“http://www.blogjava.net/amigoxie”);
Eg4. 从服务器重载当前页面：location.reload(true);
Eg5. 从缓存中重载当前页面：location.reload(false); 或者 location.reload();
4. navigator对象
它是最早实现的BOM对象之一。它包含大量有关Web浏览器的消息。它也是window对象的属性，可以用window.navigator引用它。
它包括appName、appVersion等属性。
5. screen对象
虽然处于安全原因，有关用户系统的大多数信息都被隐藏了，但还可以用screen对象获取某些关于用户屏幕的信息。
属性如下：
l availHeight——窗口可以使用的屏幕的高度（以像素计），其中包括操作系统元素需要的空间；
l availWidth——窗口可以使用的屏幕的狂赌（以像素计）；
l colorDepth——用户表示颜色的位数。大多数系统采用32位置；
l height——屏幕的高度（以像素计）；
l width——屏幕的宽度（以像素计）。
Eg. window.resizeTo(screen.availWidth, screen.availHeight);
四．小结
本章介绍了Web浏览器中的JavaScript，学到了BOM及它提供的各种对象。
posted on 2007-08-31 17:40
阿蜜果 阅读(1375)
评论(3) 编辑 收藏 所属分类:
Javascript