javascrit2.0完全参考手册(第二版) 第1章第1节在XHTML文档中增加javascript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

通常，向文档中增加script脚本使用<script>元素，在HTML中增加脚本的方式有4中：

(1)放到<script></script>块中；

(2)<script src="demo.js"></script>，通过src属性指定js文件位置；

(3)用作javascript事件处理属性，如<input type="button" onclick="js代码" />

(4)通过url引用网络上的js脚本。

下面分别介绍这些方式：

(1)放到<script></script>块中

向html中添加脚本主要使用这种方式，浏览器将所有放到<script>中的文本当做脚本，默认为javascript。然而对于IE浏览器它可能被当做VBScript脚本。

传统上指明js语言使用language属性，如：

当浏览器不理解language属性时会忽略<script>块中的内容。

注意：认真填写<script>的language属性，一个拼写错误会导致浏览器不识别脚本。

按照W3C标准应该使用type属性代替language表明语言的MIME类型，如：

实际上，type属性并没有language属性普遍，有一些特性后者支持，主要看浏览器支持的javascript版本。为了利用language的属性同时遵守<script>标准，两个都使用：

但是有时作用并不好，首先如果你的浏览器支持type胜过language,那么它将丢失后者的特性；再次language属性将导致页面不符合XHTML标准。

一般使用type属性是最好的选择，除非你有特别的原因使用language。

注意：你还可以在head中添加meta属性，这样所有的script中均会增加type属性：

使用<script>

你可以使用多个<script>块，当文档被加载时将会执行脚本，除非脚本延迟了。下面这个例子会一个脚本一个脚本的运行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript and the Script Tag</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Ready start</h1>
<script type="text/javascript">
alert("First Script Ran");
</script>
<h2>Running...</h2>
<script type="text/javascript">
alert("Second Script Ran");
</script>
<h2>Keep running</h2>
<script type="text/javascript">
alert("Third Script Ran");
</script>
<h1>Stop!</h1>
</body>
</html>

在不同的浏览器中运行这个例子，你会发现有的浏览器会将html元素按照脚本运行的进度显示出来，有的浏览器则不是。这说明不同浏览器解释javascript不同。

把<script>放到head中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript in the Head</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function alertTest()
{
alert("Danger! Danger! JavaScript Ahead");
}
</script>
</head>
<body>
<h2 align="center">Script in the Head</h2>
<hr />
<script type="text/javascript">
alertTest();
</script>
</body>
</html>

脚本隐藏

大多数的浏览器会直接显示它们不认识的标签里的内容，因此对于不支持javascript的浏览器隐藏脚本十分重要，否则脚本内容会显示到页面上。

一个简单隐藏脚本的方式是在script代码周围添加html注释，如下：

注意：这个方式对隐藏css代码类似，不同的是脚本最后的脚本注释//,原因是-和>在js中有特殊意义。

在xhtml中>或&有特殊意义，使用下面的技巧隐藏js代码：

但是这种方式在并没有用，除了严格执行xml的浏览器。一般会引起浏览器忽视脚本或者抛出错误。因此开发者可以选择外链的脚本或者用传统的html注释方式或者忽略低版本浏览器。大多数对XHTML感兴趣的Web开发者使用的链接脚本；只对html感兴趣(不在乎标准)的开发者使用html注释方式。我们选择后者，因为现在后者用的更加广泛。

<noscript>元素

当一个浏览器不支持javascript或者js被禁用时，你应该提供一个可选的版本或给用户一个提示。<noscript>可以简单的完成这个功能。除非脚本被禁用了，否则所有支持js的浏览器都应该忽视<noscript>中的内容。不支持js的浏览器将会显示闭合块中的内容(如果你使用了html注释方式它也将忽略<script>块中的内容)。下面是这个通用元素的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>noscript Demo</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<script type="text/javascript">

</script>
<noscript>
<em>Either your browser does not support JavaScript or it
is currently disabled.</em>
</noscript>
</body>
</html>

使用<noscript>的一个有趣的例子是当用户浏览器不支持js时，通过meta元素将用户重定向到一个错误提示的网页，如下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>noscript Redirect Demo</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<noscript>
<meta http-equiv="Refresh" content="0;URL=/errors/noscript.html" />
</noscript>
</head>
<body>
<script type="text/javascript">

</script>
<noscript>
<h2>Error: JavaScript required</h2>
<p>Read how to <a href="/errors/noscript.html">rectify this problem</a>.</p>
</noscript>
</body>
</html>

但是xhtml不支持这个标签，因此在head中的noscript不起作用。把script放到head中更像是一种监督而不是一种错误。然后对于那些严格的标记，这种方式不合适。更多的信息看23章。

事件处理

为了增加交互，你可以增加js命令等待用户的操作。特别是响应表单的动作或鼠标的移动。一般通过增加html的属性来引用这些脚本。我们将这些属性集合称为事件处理者，它们响应用户的接口事件。所有的这些属性都以"on"开头，表明它们要执行的事件。例如onclick,ondbclick和onmouseover.下面这个例子表明一个按钮如何响应单击：

注意：以前的开发者经常将事件处理者大小写混写，如onClick="",这种写法提高阅读行，这些事件处理者是html的一部分，对大小写不敏感，因此onClick、ONCLICK、onclick都是有效的。但是xhtml要求都要小写，因此建议大家把事件处理者小写。

把<script>和事件处理者放到一起，你可以看到脚步是如何调用的。下面的例子表明了form元素的用户事件是如何触发定义在head中的脚步的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Event Trigger Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

</script>
</head>
<body>
<div align="center">
<form action="#" method="get">
<input type="button" value="Don’t push me!"
onclick="alertTest();" />
</form>
</div>
</body>
</html>

你可能好奇哪些html元素有事件处理者。从html4.0开始，基本上每一个标签(可视化的)都应该有一个核心的事件对应的事件处理者，如onclick,ondblclick, onkeydown, onkeypress, onkeyup,onmousedown, onmousemove, onmouseover, and onmouseout等等。例如，尽管这样不重要，但是你可以指定一个段落被单击时有处理，如：<p onclick="alert('Under HTML 4 you can!')">Can you click me?</p>

当然，许多老的浏览器，甚至是4.x以后的都不识别html元素的事件处理者，例如段落。然而，大多数的浏览器应该识别这些事件，如页面loading和unloading，link presses,form fill-in,和鼠标动作。浏览器对事件处理者的支持度以及处理方式很重要，但是现代浏览器基本都支持核心事件。详细内容请看第11章。

(2)Linked Scripts 外链的脚本

引入脚本的一个重要的方式是通过<script>的src属性。下面这个例子说明了我们如何把先前那个例子的函数放进一个脚本文件中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Event Trigger Example using Linked Script</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="danger.js"></script>
</head>
<body>
<div align="center">
<form action="#" method="get">
<input type="button" value="Don't push me!" onclick="alertTest();" />
</form>
</div>
</body>
</html>

注意src属性的值为danger.js，这个值是引用的脚本文件的url路径。这个例子中它们在相同的目录下，但是它也可以是绝对的url路径：http://www.javascriptref.com/scripts/danger.js。除了文件的位置，它包括的就是运行的脚本(没有html或其他的web技术).因此，文件danger.js可以只包括下面的脚本：

function alertTest()
{
alert("Danger! Danger!");
}

脚本文件的好处是它们是单独的逻辑、结构和页面呈现。一个脚本文件可以很方便的被多个页面引用。这样你维护代码将变得十分容易，只需要修改一个脚本文件的内容就可以了。而且浏览器可以缓存额外的脚本文件以便节省下载时间提高浏览速度。

建议：考虑把所有的脚本文件放到相同的文件夹下面，就像图片都放到一个目录下面一样。这样确保有合适的缓存，保持脚本和页面分离。

尽管使用连接的脚本文件有很多的好处，但是因为一些潜在的坏处人们不愿意使用。一个原因就是并不是所有支持脚本的浏览器都支持连接脚本。幸运的是这些问题出现在一些老的浏览器上，尤其是 Netscape 2和IE 3。现在这些浏览器都不常见了，因此没有必要担心这个问题。
    使用外链的脚本首先要考虑的是浏览器加载。如果脚本文件包括要调用的函数，尤其由用户行为调用的函数，开发者就要认真的对待，不要让页面还没有加载或者错误框弹出来的时候调用。问题就是这个并不确定。通常它们被很快的下载下来以备调用，但是如果用户打开连接速度很慢，或者脚本文件中的脚本被执行，那么可能就下载不了了。
    幸运的是，通过防御性好的编码样式可以减少使用外部脚本的很多问题，正如这本书中描述的。23章包括详细的技巧。如果使用链接的脚本有一些顽固的错误解决不了，一个好的建议就是把脚本转移到html中。
   建议：当使用外部的js文件时，确保你的web服务器设置为映射后缀名是.js的文件的MIME类型是text/javascript.
大多数的web服务器默认的设置这个MIME类型，但是如果你遇到了链接脚本的错误这可能是一个问题。

javascript 伪url

在大多数支持js的浏览器中，使用js伪url调用js是可能的。一个伪url像这样：javascript:alert('hello') ，当你直接在浏览器的地址栏里输入这个语句时将会弹出hello。(我测试的是qq浏览器弹出了，火狐和ie10都没作用。)使用js伪url的一个重要的例子是在一个连接里：

<a href="javascript: alert('hello I am a pseudo-URL script');">Click
to invoke
</a>

伪url可以触发任意的js代码块，下面这个例子就是调用一个简单的函数或方法：

<a href="javascript: x=5;y=7;alert('The sum = '+(x+y));">Click to invoke</a>

一些开发商已经发现这非常有用，并设计网页上要执行的功能，并保存为书签。当这些javascript：链接添加您的浏览器的“收藏夹”或“书签”，他们可以点击以开展特定任务。这些脚本，尤其是书签或便签使用来重置窗体大小、激活页面等各种任务的。这些脚本，通常被称为的bookmarklet或favlets的，是用来调整窗口大小，验证页面，并执行各种有用的开发相关的任务。注意：通过url书签的形式运行js确实有一些安全性问题。由于存储在你的浏览器中的书签工具在当前页面的背景下，执行恶意书签，可以使用目前的网站来窃取cookie。出于这个原因，仅安装您信任的站点的bookmarklet，或只检查他们的代码后。

js:url确实有一些问题，当你的浏览器不支持js时，浏览器将会显示一个链接，但是用户单击后没有反应。依赖伪地址的设计者要确保使用noscript来提示用户，像下面这样：

这确保用户看到提示，一个更加安全的编码方式如下：

<a href="/errors/noscript.html"onclick=" alert('hello I am a pseudo-URL
script');return false;">Click to invoke</a>

这个例子在onclick中写脚本，如果单击了链接就会运行js，而且返回false阻止页面加载。如果不支持js，那么代码不执行然后通过href跳转到错误提示页面。虽然的javascript：伪URL确实有一定的局限性，它通常被发现在所有主要的语言实现中，被许多开发人员所用。这肯定是更好的，但是，要避免使用伪URL技术，取而代之的是防守的onclick代码。现在的本章结束前，让我们先简单介绍一下JavaScript用来干什么，它是从哪里来的，它将朝哪里去。