JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

在HTML中嵌入JavaScript脚本

JavaScript 必需嵌入到 HTML 文档,才能被浏览器解释和执行。

将 JavaScript 脚本嵌入到 HTML 文档中有3种标准方法:
  1. 通过 <script> 标签嵌入;
  2. 引入外部脚本;
  3. 在 HTML 属性中直接嵌入。

一. 通过<script>标签嵌入

通过 <script> 标签嵌入JavaScript代码时,必需将代码放在 <script type="text/javascript"> 和 </script> 标记对之间。

【例1-2】通过<script>标签嵌入JavaScript代码:
<html>
<head>
    <title>通过<script>标签嵌入</title>
</head>
<bdoy>
<!-- 开始嵌入JavaScript代码 -->
<script type="text/javascript">
    document.write("这是通过<script>标签嵌入的代码");  // 输出语句
</script>
<!-- 结束 -->
</body>
</html>
浏览器载入HTML文档时,会识别 <script> 标签,执行其中的 JavaScript 代码,然后将结果返回并在浏览器窗口显示。

二. 引入外部脚本

当网页功能比较复杂,或通用代码(每个页面都是用)较多时,直接在 <script> 标签中嵌入 JavaScript 代码会导致网页杂乱,不易管理。这时候,我们希望能将JavaScript代码保存在单独的文件中,使用时再嵌入到 HTML 文档。

可以通过 <script> 标签的 src 属性引入外部文件。

例如,引入网站根目录下的 demo.js 文件:
<script type="text/javascript" src="/demo.js"></script>
引入上级目录中 script 目录下的 demo.js 文件:
<script type="text/javascript" src="../script/demo.js"></script>
引入百度的 JavaScript 文件:
<script type="text/javascript" src="http://www.baidu.com/script/demo.js"></script>

【例1-3】引入外部脚本:
<html>
<head>
    <title>引入外部脚本</title>
</head>
<bdoy>
    <script type="text/javascript" src="1-3.js"></script>
</body>
</html>
将上面代码保存为 1-3.html ,并在同一目录下创建一个 JavaScript 脚本文件,命名为1-3.js,输入如下代码:
document.write("引入外部脚本");
在浏览器中打开 1-3.html ,显示 ”引入外部脚本“,外部脚本成功引入并执行。

引入外部脚本,能够很轻松的让多个页面使用相同的 JavaScript 代码。外部脚本一般会被浏览器保存在缓存文件中,用户再次访问网页时,无需重新载入,加快了网页打开速度。

注意:外部脚本一般保存为 .js 的文件。

三. 在 HTML 属性中直接嵌入

在 HTML 属性中嵌入 JavaScript 代码主要是针对 JavaScript 事件。JavaScript 事件是指用户对网页进行操作时,网页做出相应的响应。

【例1-4】鼠标单击事件:
<html>
<head>
    <title>鼠标单击事件</title>
</head>
<bdoy>
    <p onclick="alert('你已经点击了我!');">请点击这里</p>
</body>
</html>

实例演示:

请点击这里


【例1-4】鼠标双击事件:
<html>
<head>
    <title>鼠标双击事件</title>
</head>
<bdoy>
    <p ondblclick="alert('你已经双击了我!');">请双击这里</p>
</body>
</html>

实例演示:

请双击这里


【例1-5】鼠标移入事件:
<html>
<head>
    <title>鼠标双击事件</title>
</head>
<bdoy>
    <p onmouseover="alert('你的鼠标已移动!');">请将鼠标移动到这里</p>
</body>
</html>

实例演示:

请将鼠标移动到这里


说明:alert() 函数弹出一个警告框。

嵌入脚本的位置

<script> 标签嵌入的脚本和外部引入的脚本可以放在 <head> 标签和 <body> 标签的任意位置。

上面的几个例子,都是将 JavaScript 代码嵌入到 <body> 标签,下面演示在 <head> 标签中嵌入脚本。

【例1-6】在 <head> 标签中引入外部脚本
<html>
<head>
    <title>引入外部脚本</title>
    <script type="text/javascript" src="1-3.js"></script>
</head>
<bdoy>
    <p> 在<head>标签中引入外部脚本 </p>
</body>
</html>

【例1-6】通过 <script> 标签嵌入脚本
<html>
<head>
    <title>引入外部脚本</title>
</head>
<bdoy>
    <p id="demo">请点击这里</p>
    <script type="text/javascript">
        document.getElementById("demo").onclick=function(){
            alert("你已经点击了我");
        }
    </script>
</body>
</html>

实例演示:

请点击这里