js,javascrpt入门级教程_果然网络科技工作室,网站建设,微信开发

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

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

通过 <s cript> 标签嵌入；

引入外部脚本；

在 HTML 属性中直接嵌入。

一. 通过<s cript>标签嵌入通过 <s cript> 标签嵌入Javas cript代码时，必需将代码放在 <s cript type="text/javas cript"> 和 </s cript> 标记对之间。

【例1-2】通过<s cript>标签嵌入Javas cript代码：

<html>

<head>

<title>通过<s

cript>标签嵌入</title>

</head>

<bdoy>

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 文件：

cript type="text/javas cript"

src="/demo.js"></s

cript>

引入上级目录中 s cript 目录下的 demo.js 文件：

cript type="text/javas cript"

src="../s cript/demo.js"></s

cript>

引入百度的 Javas cript 文件：

cript type="text/javas cript"

src="http://www.baidu.com/s cript/demo.js"></s

cript>

【例1-3】引入外部脚本：

<html>

<head>

<title>引入外部脚本</title>

</head>

<bdoy>

cript type="text/javas cript"

src="1-3.js"></s

cript>

</body>

</html>

将上面代码保存为 1-3.html ，并在同一目录下创建一个 Javas cript 脚本文件，命名为1-3.js，输入如下代码：

document.write("引入外部脚本");

在浏览器中打开 1-3.html ，显示 ”引入外部脚本“，外部脚本成功引入并执行。

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

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

三. 在 HTML 属性中直接嵌入在 HTML 属性中嵌入 Javas cript 代码主要是针对 Javas cript 事件。Javas cript 事件是指用户对网页进行操作时，网页做出相应的响应。

【例1-4】鼠标单击事件：

<html>

<head>

<title>鼠标单击事件</title>

</head>

<bdoy>

onclick="alert('你已经点击了我！');">请点击这里

</body>

</html>

【例1-4】鼠标双击事件：

<html>

<head>

<title>鼠标双击事件</title>

</head>

<bdoy>

ondblclick="alert('你已经双击了我！');">请双击这里

</body>

</html>

【例1-5】鼠标移入事件：

<html>

<head>

<title>鼠标双击事件</title>

</head>

<bdoy>

onmouseover="alert('你的鼠标已移动！');">请将鼠标移动到这里

</body>

</html>

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

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

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

【例1-6】在 <head> 标签中引入外部脚本

<html>

<head>

<title>引入外部脚本</title>

<s cript type="text/javas cript"

src="1-3.js"></s cript>

</head>

<bdoy>

在<head>标签中引入外部脚本

</body>

</html>

【例1-6】通过 <s cript> 标签嵌入脚本

<html>

<head>

<title>引入外部脚本</title>

</head>

<bdoy>

id="demo">请点击这里

cript type="text/javas cript">

document.getElementById("demo").onclick=function(){

alert("你已经点击了我");

}

</s

cript>

</body>

</html>

js,javascrpt入门级教程

联系我们