向HTML页面中插入JavaScript的主要方法,就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator2中首先实现。后来,这个元素被加入到正式的HTML规范中。
使用<script>元素的方式有两种:直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。
在使用<script>元素嵌入JavaScript代码时,只需为<script>指定type属性。然后,向下面这样把javaScript代码直接放在元素内部即可:
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说,解释器会解释一个函数的定义,然后将该定义保存在自己的环境当中。当解释器对<script>元素内部的所有代码求值完毕前,页面中的其余内容都不会被浏览器加载或显示。
如果要通过<script>元素来包含外部JavaScript文件,那么src属性就是必需的。这个属性的值是一个指向外部javascript文件的链接,例如:
<script type="text/javascript" src="/it-htmltag/example.js"></script>
在这个例子中,外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样,在解析外部javascript文件(包括下载该文件)时,页面的处理也会暂时停止。如果是在xhtml文档中,也可以省略前面示例代码中结束的</script>标签,例如:
<script type="text/javascript" src="/it-htmltag/example.js" />
按照惯例,外部javascript文件带有.js扩展名。但这个扩展名不是必需的,因为浏览器不会检查包含javascript的文件的扩展名。这样一来,使用JSP、PHP或其他服务器端语言动态生成javascript代码也就成为了可能。但是,服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不适用.js扩展名,请确保服务器能反应会正确的MIME类型。
通过 JavaScript 输出 "Hello world":
<script>
document.write("hello world!")
</script>
浏览器支持
所有主流浏览器都支持 <script> 标签。
标签定义及使用说明
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。
script在html中的摆放位置,JavaScript代码应该放在HTML代码哪个位置比较好?
通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响。
将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于<head></head> 标签之间,可以确保在需要使用脚本之前,它已经被载入了。
也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况:我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到 HTML 元素后面。但通常情况下,我们操作页面元素一般都是通过事件来驱动的,所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。
注释:如果使用 "src" 属性,则 <script> 元素必须是空的。
提示:请参阅 <noscript> 元素,对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说,该元素非常有用。
注释: 有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
HTML 4.01 与 HTML5之间的差异
在 HTML 4 中,"type" 属性是必需的,但在 HTML5 中是可选的。
"async" 属性是 HTML5 中的新属性。
HTML5 中不再支持 HTML 4.01 中的某些属性:"xml:space"。
HTML 与 XHTML 之间的差异
在 XHTML 中,脚本中的内容类型声明为 #PCDATA(代替 CDATA),就是说会对实体进行解析。
这意味着,在 XHTML 中,应该编码所有特殊的字符,或者把所有内容嵌套在 CDATA 部分中:
<script type="text/javascript">
//<![CDATA[
var i=10;
if (i<5)
{
// some code
}
//]]>
</script>
属性
New :HTML5 中的新属性。
属性 | 值 | 描述 |
---|
asyncNew | async | 规定异步执行脚本(仅适用于外部脚本)。 |
charset | charset | 规定在脚本中使用的字符编码(仅适用于外部脚本)。 |
defer | defer | 规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。 |
src | URL | 规定外部脚本的 URL。 |
type | mime-type | 规定脚本的 MIME 类型。 |
xml:space | preserve | HTML5 不支持。规定是否保留代码中的空白。 |
HTML4.01为<script>定义了下列6个属性,各个属性的详细介绍如下:
async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
language:已废弃。
src:可选。表示包含要执行代码的外部文件。
type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。
HTML <script> 标签的 src 属性详细介绍
<script> 标签的 src 属性链接一个外部脚本文件:
<script type="text/javascript" src="/it-htmltag/myscripts.js"></script>
定义和用法
src 属性规定外部脚本文件的 URL。
有时,我们需要在网站的多个页面中运行 JavaScript。不需要重复编写相同的脚本,只需在单独的文件中创建 JavaScript,并以 .js 为后缀保存,然后使用 <script> 标签中的 src 属性引用该文件即可。
注释:外部文件不能包含 <script> 标签!
src 属性语法
<script src="/it-htmltag/_a class=/index.html"inlink" href="/tag/value/index.html" target="_blank">value">
src 属性属性值
值 描述
URL
外部脚本的 URL。可能的值有:
绝对 URL - 指向其他站点(比如 src="/it-htmltag/www./example.js")
相对 URL - 指向站点内的文件(比如 src="/_a class=/index.html"inlink" href="/tag/scripts/index.html" target="_blank">scripts/example.js")
<script> 标签支持 HTML 的全局属性。