首页 > 编程笔记 > JavaScript笔记

JS代码如何嵌入到网页中

为了增强网页的动态效果以及用户与网页的动态交互效果，提高用户体验，我们需要在网页中嵌入脚本代码。在网页中嵌入脚本的方式主要有 3 种：一是在 HTML 标签的事件属性中直接添加脚本代码；二是使用 <script> 标签在网页中直接插入脚本代码；三是使用 <script> 标签链接外部脚本文件。

1. 在HTML标签的事件属性中直接添加脚本

使用 HTML 标签的事件属性，可以直接在标签内添加脚本，以响应元素的事件，这种事件也称为行内事件。

【例 1】在 HTML 标签的事件属性中添加脚本。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML标签的事件属性中直接添加脚本</title>
</head>
<body>
<form>
  <input type="button" onClick="Javascript:alert('欢迎来到JavaScript世界');"
   value="点点我看看有什么发生"/>
</form>
</body>
</html>

上述代码在 input 标签中的 onClick 事件属性中添加 JS 脚本，实现单击按钮后弹出对话框功能。

注：使用 HTML 标签的事件属性添加 JS 脚本这种方法，现在已不建议使用了。

2. 使用script标签插入脚本代码

这种方式首先需要在头部区域或主体区域的恰当位置处添加<script></script>标签对，然后在<script></script>标签对之间根据需求添加相关脚本代码。

基本语法：

<script></script>标签可以出现在 HTML 文件的任何位置。type 属性规定脚本的 MIME 类型，通常取“text/javascript”，现在使用时，也会经常省略这个属性。

【例 2】使用 script 标签在 HTML 页面中嵌入脚本。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用script标签插入JS代码</title>
<script>
     //在头部区域中插入JS代码
     alert('网页的功能是计算输入的两个数的和');
</script>
</head>
<body>
  请输入两个操作数：<input type="text"/>+<input type="text"/>=<input type="text"/>
  <input type="button" value="计算"/>
  <script>
         //在主体区域中插入JS代码
         var aInp = document.getElementsByTagName('input');
         aInp[3].onclick = function (){
                  aInp[2].value = Number(aInp[0].value) + Number(aInp[1].value);
         }
  </script>
</body>
</html>

上述代码分别在 HTML 页面的头部区域和主体区域中使用<script></script>标签对在页面中插入了 JS 代码。当 script 元素内部的 JS 代码没有位于某个函数中时，这些代码会按页面加载的顺序执行；当代码位于某个函数中时，在调用这个函数时才会执行这些代码。

所以例 2 中的 JS 代码，在加载完页面标题后，会首先执行第一个<script></script>之间的代码块，然后再加载主体中的表单输入元素，最后才执行第二个<script></script>之间的 JS 代码块。在该块 JS 代码中，会执行第一行 JS 代码，当没有单击按钮时，第三行代码不会被执行。

示例 2 中的第二块 JS 代码分布在 HTML 主体区域中，这种做法对提倡将内容、表现和行为分开的做法不相符，所以实际应用中我们常常会将 JS 代码集中放到头部区域。此时需要使用窗口的加载事件，使页面所有元素加载完后再执行 JS 代码。

使用窗口加载事件后的例 2 的代码修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用script标签插入JS代码</title>
<script>
     window.onload = function (){
        alert('网页的功能是计算输入的两个数的和');
        var aInp = document.getElementsByTagName('input');    
        aInp[3].onclick = function (){
           aInp[2].value = Number(aInp[0].value) + Number(aInp[1].value);
        };
     };    
</script>
</head>
<body>
  请输入两个操作数：<input type="text"/>+<input type="text"/>=<input type="text"/>
  <input type="button" value="计算"/>
</body>
</html>

3. 使用script标签链接外部JS文件

如果同一段 JS 代码需要在若干网页中使用，则可以将 JS 代码放在单独的一个以 .js 为扩展名的文件里，然后在需要该文件的网页中使用 script 标签引用该 JS 文件。扩展名为 .js 的文件称为脚本文件。

从前面的描述可以看出，定义脚本文件的目的之一是为了脚本代码的重用。此外，使用脚本文件还有一个目的，就是为了将网页内容和行为进行分离。基于这两个目的，在实际项目中，使用 <script> 标签链接脚本文件是最常用的一种嵌入脚本的方式。

基本语法：

src 属性用来指定外部脚本文件的 URL，是一个必设属性。链接脚本文件时，<script> 一般作为空元素，就算在标签对之间添加内容，这些内容其实也没有任何作用。

需要注意的是，虽然 <script> 作为空元素，但它的结束标签必须使用 </script>，而不能使用缩写形式，即将开始标签的>改成/>来结束标签。

下面通过示例 3 来演示使用 script 标签链接脚本文件方式来修改示例 2。在该示例中，首先新建一个 JS 文件，命名为：link.js，然后通过 script 标签引用 JS 文件。

【例 3】使用 script 标签链接脚本文件到 HTML 页面中。

1) link.js 代码：

window.onload = function (){
     alert('网页的功能是计算输入的<br/>两个数的和');
     var aInp = document.getElementsByTagName('input');
     aInp[3].onclick = function (){
         aInp[2].value = Number(aInp[0].value) + Number(aInp[1].value);
     };
};

注：在脚本文件中不能包含任何的标签，除非该标签使用引号引起来作为字符串使用。

2) html 页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用script标签链接脚本文件</title>
<script type="text/javascript" src="link.js"></script>
</head>
<body>
  请输入两个操作数：<input type="text"/>+<input type="text"/>=<input type="text"/>
  <input type="button" value="计算"/>
</body>
</html>

上述代码在页面头部区域使用 script 标签将外部脚本文件 link.js 链接到 HTML 页面中，而 link.js 文件中使用窗口的加载事件来调用匿名函数。

JS代码如何嵌入到网页中

1. 在HTML标签的事件属性中直接添加脚本

2. 使用script标签插入脚本代码

3. 使用script标签链接外部JS文件

所有教程

优秀文章