java script

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

将 JavaScript 脚本嵌入到 HTML 文档中有3种标准方法：

通过 <script> 标签嵌入；
引入外部脚本；
在 HTML 属性中直接嵌入。

一. 通过<script>标签嵌入

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

【例1-2】通过<script>标签嵌入JavaScript代码：

<html>
<head>
<title>通过<script>标签嵌入</title>
</head>
<bdoy>
<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() 函数弹出一个警告框。

嵌入脚本的位置

<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>

posted @ 2015-12-27 12:15 Augustone 阅读(170) 评论(0) 收藏举报

刷新页面返回顶部

java script

一. 通过<script>标签嵌入

二. 引入外部脚本

三. 在 HTML 属性中直接嵌入

嵌入脚本的位置

公告