引入JavaScript脚本代码到HTML文档

将JavaScript脚本嵌入到 HTML文档中, 有4种标准方法:

1. 代码包含于<script>和</script>标记对,然后嵌入到 HTML文档中;
2 .通过<script>标记的 src属性链接外部的 JavaScript脚本文件; 
3. 通过 JavaScript伪 URL地址引入; 
4. 通过 HTML文档事件处理程序引入。 


1.通过<script>与</script>标记对引入在源程序 

<script language="javascript 1.2" type="text/javascript"> 
document.write("Hello World!"); 
</script> 
<script>标记的几个属性:
language属性:用于指定封装代码的脚本语言及版本,有的浏览器还支持 perl、 VBScript等,所有脚本浏览器都支持 JavaScript(当然,非常老的版本除外),同时 language属性默认值也为 JavaScript;
type属性:指定 <script>和</script>标记对之间插入的脚本代码类型; 
src属性:用于将外部的脚本文件内容嵌入到当前文档中;
属性为对应脚本的 MIME类型( JavaScript的 MIME类型为 “text/javascript”)。但在该属性中可设定所使用脚本的版本,有利于根据浏览器支持的脚本版本来编写有针对性的脚本代码。


2.通过<script> 标记的 src属性引入改写源程序  

test.html文件
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
</head> 
<body> 
<script language="javascript 1.2" type="text/javascript" src="1.js"> </script> 
</body> 
</html> 
同时在文本编辑器中编辑如下代码并将其保存为 1.js文件:
document.write("Hello World!");
将 test.html和 1.js文件放置于同一目录,双击运行 test.html,可见通过外部引入 JavaScript脚本文件的方式,能实现同样的功能。同时具有如下优点:
1、将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本,可以轻易实现多个页面共用完成同一功能的脚本文件,以便通过更新一个脚本文件内容达到批量更新的目的。
2、浏览器可以实现对目标脚本文件的高速缓存,避免额外的由于引用同样功能的脚本。
缺点:代码而导致下载时间的增加。


3.通过 JavaScript伪 URL引入

在多数支持 JavaScript脚本的浏览器中,可以通过 JavaScript伪 URL地址调用语句来引入 JavaScript脚本代码。伪 URL地址的一般格式如下:
JavaScript:alert("Hello World!")
一般以 “javascript:”开始,后面紧跟要执行的操作。下面的代码演示如何使用伪 URL地址来引入 JavaScript代码:
源程序 1.3 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
</head> 
<body> 
<br> 
<center> 
<p>伪 URL地址引入 JavaScript脚本代码实例: </p> 
<form name="MyForm"> 
<input type=text name="MyText" value="鼠标点击" οnclick="javascript:alert('鼠标已点击文本框!')"> 
</form> 
</center> 
</body>
 </html> 


伪 URL地址可用于文档中任何地方,并触发任意数量的 JavaScript函数或对象固有的方法。由于这种方式代码短小精悍,同时效果颇佳,在表单数据合法性验证譬如某个字段是否符合日期格式等方面应用非常 广泛。 


URL地址引入 JavaScript脚本代码实例

4.通过HTML文档事件处理程序引入在开发Web应用程序的过程中

 开发者可以给 HTML文档中设定不同的事件处理器,通常是设置某 HTML元素的属性来引用一个脚本(可以是一个简单的动作或者函数),属性一般以 on开头,如鼠标移动 onmousemove( )等。下面的程序演示如何使用 JavaScript脚本对按钮单击事件进行响应:
// 源程序 1.4 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> 
 
<html> 
<head> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
<script language="javascript" type="text/javascript"> 
function ClickMe() 
{
alert("鼠标已单击按钮 "); 

</script> 
</head> 
<body> 
<br> 
<center> 
<p>通过文档事件处理程序引入 JavaScript脚本代码实例:</p> 
<form name="MyForm"> 
<input type=button name="MyButton" value="鼠标单击" οnclick="ClickMe()"> 
</form> 
</center>
</body> 
</html> 

通过文档事件处理程序引入 JavaScript脚本实例
大部分浏览器都能理解 HTML标记的核心事件,如 onclick、ondbclick、 onkeydown、 onkeypress、 onkeyup、 onmousedown、onmousemove、onmouseover、onmouseout等鼠标和键盘触发事件。
但是大部分浏览器都能理解 HTML标记的核心事件,如 onclick、ondbclick、 onkeydown、 onkeypress、 onkeyup、 onmousedown、onmousemove、onmouseover、onmouseout等鼠标和键盘触发事件。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值