查看: 1041|回复: 1

[Java学习] 【概念简介】在HTML中嵌入Javas cript脚本

发表于 2017-4-16 17:10:31
Javas cript 必需嵌入到 HTML 文档,才能被浏览器解释和执行。

Javas cript 脚本嵌入到 HTML 文档中有3种标准方法:
1.
通过 <s cript> 标签嵌入;
2.
3.
引入外部脚本;
4.
5.
HTML 属性中直接嵌入。
6.
. 通过<s cript>标签嵌入
通过 <s cript> 标签嵌入Javas cript代码时,必需将代码放在 <s cript type="text/javas cript"> 和 </s cript> 标记对之间。

【例1-2】通过<s cript>标签嵌入Javas cript代码:
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title>通过<s cript>标签嵌入</title>
</head>
<bdoy>
<!-- 开始嵌入Javas cript代码 -->
<s cript type="text/javas cript">
    document.write("这是通过<s cript>标签嵌入的代码");  // 输出语句
</s cript>
<!-- 结束 -->
</body>
</html>
浏览器载入HTML文档时,会识别 <s cript> 标签,执行其中的 Javas cript 代码,然后将结果返回并在浏览器窗口显示。
. 引入外部脚本
当网页功能比较复 杂,或通用代码(每个页面都是用)较多时,直接在 <s cript> 标签中嵌入 Javas cript 代码会导致网页杂乱,不易管理。这时候,我们希望能将Javas cript代码保存在单独的文件中,使用时再嵌入到 HTML 文档。

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

例如,引入网站根目录下的 demo.js 文件:
1
<s cript type="text/javas cript" src="/demo.js"></s cript>
引入上级目录中 s cript 目录下的 demo.js 文件:
1
<s cript type="text/javas cript" src="../s cript/demo.js"></s cript>
引入百度的 Javas cript 文件:
1
<s cript type="text/javas cript" src="http://www./s cript/demo.js"></s cript>

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

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

注意:外部脚本一般保存为 .js 的文件。
. 在 HTML 属性中直接嵌入
HTML 属性中嵌入 Javas cript 代码主要是针对 Javas cript 事件。Javas cript 事件是指用户对网页进行操作时,网页做出相应的响应。

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

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

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

说明:alert() 函数弹出一个警告框。
嵌入脚本的位置
<s cript> 标签嵌入的脚本和外部引入的脚本可以放在 <head> 标签和 <body> 标签的任意位置。

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

【例1-6】在 <head> 标签中引入外部脚本
1
2
3
4
5
6
7
8
9
<html>
<head>
    <title>引入外部脚本</title>
    <s cript type="text/javas cript" src="1-3.js"></s cript>
</head>
<bdoy>
    <p> 在<head>标签中引入外部脚本 </p>
</body>
</html>

【例1-6】通过 <s cript> 标签嵌入脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>引入外部脚本</title>
</head>
<bdoy>
    <p id="demo">请点击这里</p>
    <s cript type="text/javas cript">
        document.getElementById("demo").onclick=function(){
            alert("你已经点击了我");
        }
    </s cript>
</body>
</html>



回复

使用道具 举报

 楼主| 发表于 2017-4-17 18:15:17

课工场官网课程一起来“打价”,找群内管理员还可以折上折,快点行动吧~~~
课工场官网注册UID获取免费学习视频课,http://www.kgc.cn/?tuin=7133
回复 支持 反对

使用道具 举报