HTML script 标签
- script标签是成对出现的,以
<script>
开始,以</script>
结束 - 属性
src
-- 指定需要加载的脚本文件(例如:js文件)的地址URItype
-- 指定媒体类型(例如:type="text/javascript"
)
- 引用网址:http://www.dreamdu.com/xhtml/tag_script/
示例
<head>
<script type="text/javascript" src="dreamdu.js"></script>
</head>
HTML 5 <script> 标签
定义和用法
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素即可包含脚本语句,又可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 通常的用途是图像操作、表单验证以及内容动态更改。
实例
<script type="text/javascript">
document.write("Hello World!")
</script>
<script>元素
向HTML页面中插入JavaScript的主要方法,就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator2中首先实现。后来,这个元素被加入到正式的HTML规范中。HTML4.01为<scripth>定义了下列6个属性。
async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
language:已废弃。
src:可选。表示包含要执行代码的外部文件。
type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。
使用<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="example.js"></script>
在这个例子中,外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样,在解析外部javascript文件(包括下载该文件)时,页面的处理也会暂时停止。如果是在XHTML文档中,也可以省略前面示例代码中结束的</script>标签,例如:
- <script type="text/javascript" src="example.js" />
按照惯例,外部javascript文件带有.js扩展名。但这个扩展名不是必需的,因为浏览器不会检查包含javascript的文件的扩展名。这样一来,使用JSP、PHP或其他服务器端语言动态生成javascript代码也就成为了可能。但是,服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不适用.js扩展名,请确保服务器能反应会正确的MIME类型。
HTML调用JavaScript
相信开始学JavaScript的同学都已经有了HTML和CSS的基础。如果没学,建议回头去学习。
1.1 <script>元素
JS(对JavaScript的简称,以下都用JS代替)插入HTML的主要方法就是使用<script>标签。它有5个属性:
(1)type(language):脚本语言的内容类型(同调用CSS的type=“text/css”类似),type="text/javascript";
(2)src :导入外部的JS文件,src="example.js";
(3)charset:用来设置script元素包含的脚本的字符编码,默认是utf-8编码 (只针对外部脚本);
(4)defer:设置脚本延迟执行(只针对外部脚本);
(5)async:在加载HTML文件的同时异步加载脚本(只针对外部脚本)。
1.2 嵌入<script>的方式
(1)直接在页面嵌入JS代码:可以在head和body标签中,位置的不同只会影响加载脚本的时间,通常可以忽略。
- <!DOCTYPE html>
- <html>
- <head>
- <title>JavaScript脚本语言</title>
- <script type="text/javascript"> //在head标签中插入
- function sayHi{
- alert("Hi");
- }
- </script>
- </head>
- <body>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title>JavaScript脚本语言</title>
- </head>
- <body>
- <script type="text/javascript"> //在body中插入
- function sayHi{
- alert("Hi");
- }
- </script>
- </body>
- </html>
(2) 在head标签中添加外部JS文件:注意外部文件以 .js后缀结尾,在JS文件中去掉<script>标签直接写函数。
html文件
- <!DOCTYPE html>
- <html>
- <head>
- <title>JavaScript脚本语言</title>
- <script type="text/javascript" src="example.js"></script> //在head标签插入JS文件
- </head>
- <body>
- </body>
- </html>
- //JS文件 example.js
- function sayHi(){
- alert("Hi");
- }
早期的浏览器都不支持JS,<noscript>标签就是在不支持JS的浏览器中显示替代的内容
- <!DOCTYPE html>
- <html>
- <head>
- <title>JavaScript脚本语言</title>
- <script type="text/javascript" src="example.js"></script> //在head标签插入JS文件
- </head>
- <body>
- <noscript>
- <p>本页面需要浏览器支持(启用)JavaScript.</p> //支持JS的浏览器永远不会显示
- </noscript>
- </body>
- </html>
注:不必把所有的JS写到一个<script>标签中,如果想区分JS里面函数,可以加入多个<script>标签,但为了以后维护的方便,建议都采用外部添加JS文件,可以创建多个标签添加多个JS文件。
- <!DOCTYPE html>
- <html>
- <head>
- <title>JavaScript脚本语言</title>
- <script type="text/javascript" src="example01.js"></script> //在head标签插入多个JS文件
- <script type="text/javascript" src="example02.js"></script>
- <script type="text/javascript" src="example03.js"></script>
- </head>
- <body>
- </body>
- </html>
用JavaScript的几种情况和规范写法
比较简单,基础。
一、引用外部文件中的js脚本
<script type="text/javascript" src="ext.js"></script>
也可以象下面这样写,language不是必要的,但是推荐上面的写法
<script language="javascript" type="text/javascript" src="ext.js"></script>
二、页面内引用:
<script type="text/javascript">//<![CDATA[
var x = 0;
function fn(args) {
//...
}
//]]></script>
加上“//<![CDATA[” 和 “//]]>”是为了兼容XHTML,是推荐的写法,HTML时代一般用“<!--”和“//-->”
<body onload="alert('loaded');">
<input type="text" name="username" onclick="alert(this.value);" />
四、在一些HTML控件的非事件属性中使用(注意:一定要加javascript:)
<a href="javascript:void(0);" onclick="alert(this.innerText);">my blog:http://blog.csdn.net/kimsoft</a>