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属性，如：
<script language="JavaScript"> </script>
当浏览器不理解language属性时会忽略<script>块中的内容。
注意：认真填写<script>的language属性，一个拼写错误会导致浏览器不识别脚本。
按照W3C标准应该使用type属性代替language表明语言的MIME类型，如：
<script type="text/javascript"> </script>
实际上，type属性并没有language属性普遍，有一些特性后者支持，主要看浏览器支持的javascript版本。为了利用language的属性同时遵守<script>标准，两个都使用：
<script language="JavaScript" type="text/javascript"> </script>
但是有时作用并不好，首先如果你的浏览器支持type胜过language,那么它将丢失后者的特性；再次language属性将导致页面不符合XHTML标准。
一般使用type属性是最好的选择，除非你有特别的原因使用language。
注意：你还可以在head中添加meta属性，这样所有的script中均会增加type属性：
<meta http-equiv="Content-Script-Type" content="text/javascript" />.
使用<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中
<script>特定的位置是放在<head>中，这样按照web文档的顺序脚本首先会被加载。<head>中的脚本一般定义变量或函数，然后被<body>引用。下面的例子就是：
<!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注释，如下：
<script type="text/javascript">
<!--
put your JavaScript here
//-->
</script>
注意：这个方式对隐藏css代码类似，不同的是脚本最后的脚本注释//,原因是-和>在js中有特殊意义。
在xhtml中>或&有特殊意义，使用下面的技巧隐藏js代码：
<script type="text/javascript">
<![CDATA[
..script here ..
]]>
</script>
但是这种方式在并没有用，除了严格执行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">
<!--
alert("Your JavaScript is on!");
//-->
</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" />
<!-- warning example does not validate -->
<noscript>
<meta http-equiv="Refresh" content="0;URL=/errors/noscript.html" />
</noscript>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Congratulations! If you see this you have 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.下面这个例子表明一个按钮如何响应单击：
<!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 HTML Events Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<form action="#" method="get">
<input type="button" value="press me"
onclick="alert('Hello from JavaScript!');" />
</form>
</body>
</html>
注意：以前的开发者经常将事件处理者大小写混写，如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">
<!--
function alertTest()
{
alert("Danger! Danger!");
}
//-->
</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来提示用户，像下面这样：
<noscript>
<strong><em>Warning:</em> This page contains links that use JavaScript
and your browser either has JavaScript disabled or does not support this
technology.</strong>
</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用来干什么，它是从哪里来的，它将朝哪里去。
javascrit2.0完全参考手册(第二版) 第1章第1节 在XHTML文档中增加javascript的更多相关文章
- javascrit2.0完全参考手册(第二版) 第1章第2节：javascript的历史和使用
javascript曾经带给人许多误解,例如如果你不了解它的历史,那么你可能困惑它和java有什么关系,其实它们一点关系都没有.网景公司1995年在Navigator 2.0 中引入这门语言时它叫Li ...
- javascrit2.0完全参考手册(第二版) 第2章第2节 语言特性
脚本执行顺序 js代码是按照它们在html中出现的顺序一行一行被解释的.这表明把函数定义和变量声明放到<head>中会很好.这保证了函数的代码和事件相关的处理程序不会立即执行. 大 ...
- javascrit2.0完全参考手册(第二版) 第2章第1节 基本定义
在这里,我们介绍一些将要使用的编程语言术语.表2-1提供了精确定义的概念. Table 2-1: 编程语言的基本术语 名字 定义 例子 Token令牌 最小的不可分割的词汇的语言单位.一个连续的字符序 ...
- javascrit2.0完全参考手册(第二版) 第2章第4节 基本的数据类型
每一个变量都有一个确定的类型表明它存储什么样的数据.js基本的数据类型有strings字符串.numbers数字.Booleans布尔类型.字符串是使用双引号或单引号包含的一串字符:数字包括整数或浮点 ...
- javascrit2.0完全参考手册(第二版) 第2章第3节 变量
变量存储数据.每个变量都有一个名字,叫做标识符.在js中声明变量使用var关键字,var为新的数据分配存储空间,或者指示一直标识符正在使用.声明变量非常简单: var x; 这个语句告诉解释器一个新的 ...
- Spring Security 5.0.x 参考手册 【翻译自官方GIT-2018.06.12】
源码请移步至:https://github.com/aquariuspj/spring-security/tree/translator/docs/manual/src/docs/asciidoc 版 ...
- Kali Linux Web渗透测试手册(第二版) - 1.3 - 靶机的安装
Kali Linux Web渗透测试手册(第二版) - 1.3 - 靶机的安装 一．配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: 在Windows和Linux上安装Virt ...
- DecimalFormat 中的 # 与 0 的区别（中文帮助文档中翻译可能是错误的）
想对数字进行格式化的时候,可能会使用到 java.text.DecimalFormat 类.中文帮助文档中,有如下符号 位置 本地化 含义 0 数字 是 阿拉伯数字 # 数字 是 阿拉伯数字,如果不存 ...
- CSAPP深入理解计算机系统(第二版)第三章家庭作业答案
<深入理解计算机系统(第二版)>CSAPP 第三章 家庭作业 这一章介绍了AT&T的汇编指令 比较重要 本人完成了<深入理解计算机系统(第二版)>(以下简称CSAPP) ...
随机推荐
- servlet、genericservlet、httpservlet之间的区别
转自:http://blog.csdn.net/rat9912345/article/details/5161789 当编写一个servlet时,必须直接或间接实现servlet接口,最可能实现的方法 ...
- 禁用编译器自动生成的函数（Effective C++之06）
如果想让你的类定义出来的对象是独一无二的,即对象无法被复制,或者使用赋值操作符赋给另外一个对象,那么最好的方法就是禁用拷贝构造函数和赋值操作符.下面介绍几种禁用的方法.(方法来自Effective C ...
- 函数fgets和fputs、fread和fwrite、fscanf和fprintf用法小结 （转）
函数fgets和fputs.fread和fwrite.fscanf和fprintf用法小结 字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符 ...
- 4.0 和4.5 app 和generic,xaml的问题
4.0里面不支持Generic.xaml里面 <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=& ...
- 智能车学习（十四）——K60单片机GPIO学习
一.头文件: #ifndef __MK60_GPIO_H__ #define __MK60_GPIO_H__ #include "MK60_gpio_cfg.h" /* * 定义管 ...
- ubuntu14使用qemu调试linux内核
# 下载内核源代码编译内核 cd ~/LinuxKernel/ wget https://www.kernel.org/pub/linux/kernel/v3.x/linux-3.18.6.tar.x ...
- JavaScript设计模式——前奏（封装和信息隐藏）
前面一篇讲了js设计模式的前奏,包括接口的讲解.. 三:封装和信息隐藏: 信息隐藏用来进行解耦,定义一些私有的数据和方法. 封装是用来实现信息隐藏的技术,通过闭包实现私有数据的定义和使用. 接口在这其 ...
- H5移动前端性能优化
在移动端,因手机的配置和3/4G网络的原因,从两个方面解决性能优化问题,1.加载不超过3秒,用loading或者资源不要超过1M.2.渲染速度. 基于以上两个方面,所有影响首屏加载和渲染的代码应在处理 ...
- Codeforces Round #354 (Div. 2)-D
D. Theseus and labyrinth 题目链接:http://codeforces.com/contest/676/problem/D Theseus has just arrived t ...
- js兼容方法：通过样式名获取元素，byClass
function byClass(oParent,className){ if(document.getElementsByClassName){ //if it is Firefox return ...