编辑这个页面须要登录或更高权限！

JavaScript 用法

JavaScript 在HTML中的用法

在本章中，您将学习如何将JavaScript整合到您的网页中。

通常，有三种方法可以将JavaScript添加到网页：

  • 可以在<script>和</script>标记之间插入JavaScript代码

  • 使用事件属性（例如onclick，onkeypress等）将JavaScript代码直接放在HTML标记内

  • 创建一个外部JavaScript文件，然后通过<script>标记的src属性将其加载到页面中

<script>标记

在HTML中，必须在<script>和</script>标记之间插入JavaScript代码。

<script>
document.write("Hello World");
</script>
测试看看‹/›

注意：旧的JavaScript示例可能使用type属性：<script type="text/javascript">。自HTML5以来，不再需要type属性。JavaScript是HTML5的默认脚本语言。

<head>或<body>中的JavaScript

您可以在HTML文档中放置任意数量的脚本。

脚本可以放置在HTML页面的<head>或<body>中，具体取决于您希望何时加载脚本。

<head>中的JavaScript

在此示例中，JavaScript函数放置在HTML页面的<head>部分中。

单击按钮时将调用该函数：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
  document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>


<h2>JavaScript in Head</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">This is a Paragraph</p>


</html>
测试看看‹/›

每个<script>标记都会阻止页面呈现过程，直到它完全下载并执行了JavaScript代码为止，因此在没有任何正当理由的情况下将它们放置在文档的开头部分会严重影响您的网站性能。

<body>中的JavaScript

在此示例中，JavaScript函数放置在HTML页面的部分中。

单击按钮时将调用该函数：

<!DOCTYPE html>
<html>
<h2>JavaScript in Body</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">这是一个段落</p>
<script>
function myFunc() {
  document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>
测试看看‹/›

脚本应放在正文部分的末尾，紧挨</body>标记之前，这将使您的网页加载速度更快，因为它可以防止初始页面呈现受阻。

内联放置JavaScript代码

您还可以使用事件属性（例如onclick，onkeypress等）将JavaScript代码直接放在HTML标记内。

<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>
测试看看‹/›

但是，应避免将大量JavaScript代码内联，因为JavaScript会使HTML混乱，并使JavaScript代码难以维护。

调用外部JavaScript文件

您还可以将JavaScript代码放入具有.js扩展名的单独文件中，然后通过<script>标记的src属性将其加载到页面中。

下面的示例指向一个外部JavaScript文件：

<script src="myscript.js"></script>
测试看看‹/›

要将多个脚本文件添加到一页中，请使用多个脚本标签：

<script src="myscript_1.js"></script>
<script src="myscript_2.js"></script>

您可以根据需要在<head>或<body>放置一个外部脚本引用。

该脚本的行为就好像它恰好位于<script>标记所在的位置一样。

注意：外部脚本文件中不能包含<script>标记。

外部JavaScript的优势

将脚本放在外部文件中具有一些优点：

  • 它将JavaScript与HTML分开

  • 它使HTML和JavaScript易于阅读和维护

  • 缓存的JavaScript文件可以加快页面加载速度

  • 同一脚本可用于多个文档

提示：通常，首次下载外部JavaScript文件时，它会存储在浏览器的缓存中（就像图像和样式表一样），因此无需从制作该网页的Web服务器上多次下载该文件。加载更快。

外部脚本参考

可以使用完整URL或相对于当前网页的路径引用外部脚本。

本示例使用完整的URL链接到脚本：

<script src="/run/js/myscript.js"></script>
测试看看‹/›

本示例使用位于当前网站上指定文件夹中的脚本：

<script src="/run/js/myscript.js"></script>
测试看看‹/›

您可以在“ HTML文件路径 ”一章中了解有关文件路径的更多信息。

JavaScript 输出JavaScript 常用示例

JavaScript菜鸟教程
JavaScript 对象
JavaScript 函数
JS HTML DOM
JS 浏览器BOM
AJAX 菜鸟教程
JavaScript 参考手册