JavaScript 入门

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

JavaScript 入门

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

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

将 JavaScript 添加到你的网页

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

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

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

嵌入 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 标记中的属性,如 onclickonmouseoveronkeypressonload 等。

但是,你应该避免将大量 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> 在单个文档中放置任意数量的元素。但是,它们按照它们在文档中出现的顺序从上到下进行处理。