JavaScript 入门

Created: October-14, 2018

在本教程中，你将学习如何制作支持 JavaScript 的网页。

JavaScript 入门

在这里，你将了解使用 JavaScript 向网页添加交互性是多么的容易。但是，在开始之前，请确保你具有 HTML 和 CSS 的一些工作知识。

好吧，让我们开始使用最流行的客户端脚本语言。

将 JavaScript 添加到你的网页

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

在一对 <script> 和 </script> 标记之间嵌入 JavaScript 代码。
使用 .js 扩展创建外部 JavaScript 文件，然后通过 <script> 标记的 src 属性将其加载到页面中。
使用特殊的标记直接放置 JavaScript 代码的 HTML 标记内属性，例如 onclick ， onmouseover ， onkeypress ， onload 等。

以下部分将详细描述每个过程：

嵌入 JavaScript 代码

你可以将 JavaScript 代码直接嵌入到网页中，方法是将它们放在 <script> 和 </script> 标记之间。该 <script> 标签表明所包含的陈述被解释为可执行脚本，而不是 HTML 浏览器。这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

上例中的 JavaScript 代码只是在网页上打印文本消息。你将在后续章节中了解每个 JavaScript 语句的含义。

注意： 自 HTML5 起不再需要 <script> 标记的 type 属性(比如 <script type="text/javascript">)。JavaScript 是 HTML5 的默认脚本语言。

调用外部 JavaScript 文件

你还可以将 JavaScript 代码放入带 .js 扩展名的单独文件中，然后通过标记的 src 属性在文档中调用该文件 <script> ，如下所示：

<script src =" js/hello.js "> </script>

如果你希望多个文档可以使用相同的脚本，这将非常有用。它可以避免你一次又一次地重复相同的任务，并使你的网站更容易维护。

好吧，让我们创建一个名为 hello.js 的 JavaScript 文件，并将以下代码放入其中：

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

现在，你可以使用 <script> 标记在网页中调用此外部 JavaScript 文件，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

注意： 通常在第一次下载外部 JavaScript 文件时，它会存储在浏览器的缓存中（就像图像和样式表一样），因此不需要从构成网页的 Web 服务器多次下载它加载速度更快。

将 JavaScript 代码内联放置

你也可以将 JavaScript 代码内嵌通过使用特殊标记直接将其插入 HTML 标记中的属性，如 onclick ， onmouseover ， onkeypress ， onload 等。

但是，你应该避免将大量 JavaScript 代码内联，因为它会使用 HTML 混乱你的 HTML 并使你的 JavaScript 代码难以维护。这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

上面的示例将在单击按钮元素时显示警告消息。

提示： 你应始终将网页（即 HTML）的内容和结构与展示（CSS）和行为（JavaScript）分开。

脚本在 HTML 文档中的定位

<script> 元素可以被放置在 <head> ，或 <body> HTML 文档的部分。但理想情况下，脚本应放在正文部分的末尾，就在结束 </body> 标记之前，它会使你的网页加载速度更快。

每个 <script> 标记都会阻止页面呈现过程，直到它完全下载并执行 JavaScript 代码，这将显着影响你的网站性能。

提示： 你可以 <script> 在单个文档中放置任意数量的元素。但是，它们按照它们在文档中出现的顺序从上到下进行处理。