首页 > 编程笔记 > JavaScript笔记 阅读:33

HTML引入JavaScript代码的3种方式(附带实例)

在 HTML 页面中添加 JavaScript 代码,和 CSS 的应用很相似,可以通过元素的相关属性,或者使用 script 元素定义代码或引用外部代码文件,下面分别介绍。

HTML页面元素引入JavaScript代码

在页面元素中使用 JavaScript 代码,主要有两种方法:
a 元素中的 href 属性一般用于定义链接地址,但同样可以定义 JavaScript,如下面的代码:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 页面结构</title>
</head>
<body>
    <a href="javascript:window.alert('Hello');">Hello</a>
</body>
</html>
在 a 元素的 href 属性中,通过 javascript:前缀定义 JavaScript 代码。本例中,单击 Hello 链接后的效果见下图:


事件(event)可以理解为在什么情况下执行什么任务,其中执行的时机就是事件,如 onclick 事件就是单击某个元素时触发的事件。事件触发时执行的代码由开发者决定。

下面的代码通过按钮的单击事件(onclick)显示相同的消息框。
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 页面结构</title>
</head>
<body>
    <button onclick="window.alert('Hello');">Hello</button>
</body>
</html>
单击 Hello 按钮后的效果见下图:

HTML script元素引入JavaScript代码

页面中使用的 JavaScript 代码可以定义在 script 元素中,如下面的代码:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 页面结构</title>
</head>
<body>
    <a href="javascript:sayHello();">Hello</a>
    <br>
    <button onclick="sayHello();">Hello</button>
</body>
</html>
<script>
    function sayHello()
    {
        window.alert("Hello");
    }
</script>
为了有效区分页面内容的区域,这里将 script 元素定义在 </html> 标记之后,其中使用 function 关键字定义了 sayHello() 函数,其功能是显示一个消息对话框。

在 a 元素的 href 属性和 button 元素的 onclick 属性中分别调用了 sayHello() 函数,代码执行结果见下图。

HTML引用外部JavaScript文件

首先创建 /demo/js/test.js 文件,并修改内容如下:
function sayHello()
{
    window.alert("Hello");
}

请注意,独立的 JavaScript 代码文件一般使用 js 扩展名,而且不需要使用 script 元素定义。下面的代码在 /index.php 页面中引用这个文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 页面结构</title>
</head>
<body>
<a href="javascript:sayHello();">Hello</a>
<br>
<button onclick="sayHello();">Hello</button>
</body>
</html>
<script defer src="/demo/js/test.js"></script>
页面执行效果与图 3 相同。

本例中,使用 script 元素的 src 属性引用了 JavaScript 文件,另一个属性是 defer,它表示延时执行代码,只有页面元素完全解析后再执行 JavaScript 代码,这样可以避免引用未加载元素所产生的错误。另一个相关的属性是 async,其含义为代码文件加载完成后立即执行。

defer 和 async 属性是 HTML5 标准中新增的属性,可以根据代码的实际用途选择使用。

相关文章