HTML中嵌入JavaScript的四种方式详解

HTML嵌入JavaScript概述

在HTML文档中嵌入JavaScript代码

在HTML文档中嵌入客户端JavaScript代码共有4种方法：

内嵌与外部脚本引用

1. 内嵌方式，将代码放置在<script>和</script>标签之间（较少使用）；

2. 通过<script>标签的src属性指定外部文件路径（常用方式）；

3. 放置在HTML事件处理程序中，由onclick或onmouseover等HTML属性值指定（极少使用）；

4. 放置在URL中，使用特殊的“javascript”协议（极少使用）；

0——附：脚本类型

JavaScript是Web的原始脚本语言，默认情况下，<script>元素包含或引用JavaScript代码。如果要使用非标准的脚本语言，如VBScript，就必须用type属性指定脚本的MIME类型，例如：

<script type="text/vbscript"> 
 ... ... 
</script> 

type 属性的默认值是 ”text/javascript“。

1——内嵌<script>元素

例如：

 <script> 
 function displayTime(){ 
 ... ... 
 } 
 window.onload = displayTime; 
</script> 

2——src属性使用外部文件中的脚本

<script>标签支持src属性，这个属性指定包含JavaScript代码的文件的URL。它的用法如下：

<script src="../../scripts/util.js"></script>

使用src属性时，<script></script>标签之间的任何内容都会被忽略。

当在页面中用src属性包含一个脚本时，就给了脚本作者完全控制Web页面的权限。

事件处理程序中的脚本

3——HTML中的事件处理程序

当脚本所在的HTML文件被载入浏览器时，这个脚本里的JavaScript代码只会执行一次。JavaScript代码可以通过把函数赋值给Element对象的属性来注册事件处理程序。这个Element对象表示文档里的一个HTML元素。

例如：

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

HTML中定义的事件处理程序的属性可以包含任意条JavaScript语句，相互之间用逗号分隔。这些语句组成一个函数体，然后这个函数成为对应事件处理程序属性的值。

javascript协议的使用

4——URL中JavaScript

在URL后面跟着一个javascript:协议限定符，是另一种嵌入JavaScript代码到客户端的方式。这种特殊的协议类型指定URL内容为任意字符串，这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当作单独的一行代码对待，这意味着语句之间必须用分号隔开，而注释必须用/**/注释代替。javascript:URL能识别的资源是转换成字符串的执行代码的返回值。如果代码返回 undefined，那么这个资源是没有内容的。

javascript:URL可以在可以使用常规URL的任意地方：比如<a>标记的href属性，<form>的action属性，甚至window.open()方法的参数。

超链接里的JavaScript URL可以是这样：

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a> 

上文所表述的全部内容是HTML文档中嵌入JavaScript的四种方法，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。