JavaScript 入门

在本教程中，您将学习如何制作基于 JavaScript 的网页。

JavaScript 入门

在这里，您将了解使用 JavaScript 向网页添加交互性是多么容易。但是，在我们开始之前，请确保您对 HTML 和 CSS 有一定的应用知识。

如果您刚刚开始涉足 Web 开发领域，从这里开始学习 »

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

将 JavaScript 添加到您的网页

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

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

以下部分将详细描述这些过程中的每一个：

嵌入 JavaScript 代码

通过将 JavaScript 代码放置在 <script> 和 </script> 标记之间，您可以将 JavaScript 代码直接嵌入到您的网页中。 <script> 标记指示浏览器包含的语句将被解释为可执行脚本而不是 HTML。这是一个例子：

示例

Try this code »

<!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> 标记（即 <script type="text/javascript">）的 type 属性。 JavaScript 是 HTML5 的默认脚本语言。

调用外部 JavaScript 文件

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

如果您希望相同的脚本可用于多个文档，这很有用。它使您不必一遍又一遍地重复相同的任务，并使您的网站更易于维护。

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

示例

Try this code »

// 显示消息的功能
function sayHello() {
    alert("Hello World!");
}

// 点击按钮调用函数
document.getElementById("myBtn").onclick = sayHello;

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

示例

Try this code »

<!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 文件时，它会存储在浏览器的缓存中（就像图像和样式表一样），因此不需要从使网页加载更快的网络服务器。

将 JavaScript 代码内联

您还可以通过使用特殊标记属性（例如 onclick, onmouseover, onkeypress, onload 等）将 JavaScript 代码直接插入 HTML 标记内来内嵌 JavaScript 代码。

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

示例

Try this code »

<!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> 元素可以放在 HTML 文档的 <head>, 或 <body> 部分。但理想情况下，脚本应该放在正文部分的末尾，就在结束 </body> 标记之前，这将使您的网页加载速度更快，因为它可以防止阻塞初始页面呈现 .

每个 <script> 标签都会阻塞页面渲染过程，直到它完全下载并执行 JavaScript 代码，因此在没有任何正当理由的情况下将它们放在文档的 head 部分（即 <head> 元素）将显着影响您的网站性能。

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

客户端和服务器端脚本的区别

客户端脚本语言如 JavaScript、VBScript 等由 Web 浏览器解释和执行，而服务器端脚本语言如 PHP、ASP、Java、Python、Ruby 等则在 Web 服务器上运行并将输出以 HTML 格式发送回 Web 浏览器。

与传统的服务器端脚本方法相比，客户端脚本具有许多优势。例如，您可以使用 JavaScript 检查用户是否在表单字段中输入了无效数据，并在将表单提交给 Web 服务器进行最终数据验证和进一步处理之前，实时显示输入错误通知，以防止不必要的网络带宽使用和服务器系统资源的利用。

此外，与客户端脚本相比，来自服务器端脚本的响应更慢，因为服务器端脚本是在远程计算机上处理的，而不是在用户本地计算机上处理的。

您可以在 PHP 教程部分了解有关服务器端脚本的更多信息。

JavaScript 入门