65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript, jQuery, TypeScript: 第二章

raddevus
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2018年9月13日

Apache

8分钟阅读

viewsIcon

7333

JavaScript, jQuery, TypeScript

注意：从我的技术博客摘录 - 更新以包含图片。

本章所有源码可在我的公共GitHub上获取： https://github.com/raddevus/jsjqts

JavaScript（正如我们在本书中所讨论的）在浏览器中运行。然而，要在浏览器中运行JavaScript，它必须首先被加载。JavaScript通过HTML文档加载。

这意味着我们需要做的第一件事是建立一个HTML文档的骨架。

这是一个基本的HTML5文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your title here</title>
</head>
<body>
Your content here
</body>
</html>

这就够了！

文档类型

第一行告诉浏览器的HTML解释器（一个独立于JavaScript解释器的解释器）期望有效的HTML。

Meta Charset

meta标签设置了浏览器将使用的字符集，这样我们就不会遇到字符被不同解释的问题（就像我之前提到的双引号问题）。

内联JavaScript

我们可以在HTML中直接编写JavaScript代码，它就会运行。

要做到这一点，我们添加两个script元素（开始和结束标签），然后在这两个元素之间输入我们的JavaScript。

例如，在前面的文档中，我们可以这样做：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your title here</title>
</head>
<body>
Your content here
<script>// your code here</script>
</body>
</html>

您也可能看到script标签包含type属性，该属性明确将脚本设置为JavaScript。

type="text/javascript"

但是，这并非必要，因为浏览器会假设script标签内的代码是JavaScript。 

HTML加载内联JavaScript

内联JavaScript的挑战在于它对位于其后的HTML元素一无所知。 这是由于HTML在浏览器中的加载方式以及JavaScript的运行时间。

随着我们继续前进，我们将研究JavaScript的加载方式，但首先让我们看一个小脚本的运行。

这是完整的代码列表，包括HTML，您可以在chpt002_001.htm文件中找到。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your title here</title>
</head>
<body>
   <div id="first">
   Your content here
   </div>
<script>
  var el = document.getElementById("first");
   el.innerText = "You are a JavaScript superstar!";
</script>
</body>
</html>

 如果您在浏览器中打开该文件，它看起来会像下面这样：

我用（红色矩形）高亮了文档中需要关注的两个重要部分。

第一个是来自HTML文档head部分的title元素的标题文本。

下一个是出现在文档body内的文本。它实际上是id="first"的div元素的innerText。

这就是您在浏览器中加载文件时发生的情况。

  1. 浏览器获取chpt002_001.htm文件并开始加载它。
  2. 当浏览器遇到script元素时，它会加载文本并允许内部JavaScript解释器接管。
  3. JavaScript解释器找到第一个有效语句（script元素内的第一行）并尝试运行它。它调用document元素（代表HTML文档的对象——DOM (Document Object Model)）上的一个名为getElementById()的方法。
  4. getElementById()方法接受一个参数，该参数是一个string，代表您正在搜索的元素的id值。 它将元素作为对象返回，并将该对象存储在一个名为el的变量中。
  5. 该元素是一个文档节点，并包含一个名为innerText的内置属性，该属性表示元素标签之间的文本：在本例中，是<div id="first">和</div>之间的文本。
  6. 最后，脚本将innerText设置为“You are a JavaScript superstar!”。
  7. 这就是用户在客户端区域（浏览器菜单和导航栏下方）屏幕上看到的内容。

当然，在JavaScript运行之前，HTML文档在div中包含不同的文本。

它看起来像

<div id="first">
   Your content here
</div>

但是用户从未看到该文本，因为文档加载速度非常快，JavaScript解释器运行并修改文本，而用户从未看到原始文本。

然而，JavaScript仅在内存中修改div元素，所以有一个方法可以看到文档的原始文本。 

浏览器：查看源代码

您可以通过右键单击客户端区域并从出现的上下文菜单中选择[查看页面源代码]*来查看任何文档的源代码（HTML和JavaScript）。

*注意：一些浏览器有一个菜单项，它只是[查看源代码]。

当您选择该菜单项时，浏览器会再次从服务器检索文档，但将其显示为HTML。 

由于这是源代码视图，JavaScript解释器不会运行，<div>元素仍然显示其原始内容。 此视图还显示script标签的内容，因此您的JavaScript代码对所有人可见。通常，这并不是什么大问题，但需要牢记，因为任何用户都可以查看您编写的JavaScript。这当然意味着您永远不会在JavaScript中保留秘密密码或值。

此视图对我们作为开发人员非常有帮助，因为我们可以查看页面源代码并开始确定我们的代码为何不起作用。

这是一个非常简单的例子，所以JavaScript是内联在HTML中的。 然而，一旦您的代码变得更复杂，您会发现为了使更改更容易，将JavaScript拆分到自己的文件中要好得多。 

为什么要将JavaScript拆分出来？

最明显的原因之一是您可能会创建一个要在多个页面上运行的脚本。 也许您有一个名为FormatDivElements()的函数，它用于处理您网站上所有页面的所有div。如果您将代码内联，那么您必须将相同的代码复制到使用它的每个页面上。 所以，如果您有五个HTML页面包含 FormatDivElements()函数，那么您必须将其粘贴到每个文件中。

然后，如果您在该函数中发现一个错误并想修复它，该怎么办？您必须编辑使用该代码的每个页面。

但是，如果您将JavaScript分离出来，您可以在每个页面中加载JavaScript文件，当您需要更改它时，您只需要编辑一个JavaScript文件，它就会在所有使用它的页面上更新。

关注点分离

这个想法也允许我们将不同类型的代码（HTML、JavaScript）彼此独立，从而使将来更改或扩展更加困难。 您会听到这一点被描述为关注点分离（SoC）。关注点分离就是将不同的事物分开，并将相似的事物放在一起。

在我们的例子中，这意味着将您的HTML文件保持为纯HTML（尽可能）并将您的JavaScript保持为纯JavaScript。 您会看到这同样适用于CSS（层叠样式表），它也可以内联在HTML中，但在将其分离到自己的CSS文件中时效果更好。

将JavaScript分离到自己的文件是多么容易。

  1. 创建一个新文件并将其命名为main.js。
  2. 从script元素中剪切所有源代码（不要复制script标签本身，因为JavaScript文件不使用这些标签）。
  3. 将代码粘贴到新文件中。
  4. 将代码保存到一个名为chpt002_002.js的文件中，该文件位于名为\js的子文件夹中（我将HTML保存为chpt002_002.htm，这样您就可以下载这个示例，所以我让JS文件名与之匹配）。
  5. 向HTML文件中的script元素添加src属性。
  6. 设置src="js\chpt002_002.js"，这样HTML文件就知道从哪里加载JavaScript。

移除代码并添加src属性后，HTML文件看起来是这样的。

您可以看到，由于script元素不包含任何代码，我也将其折叠成了一行。

现在您可以加载chpt002_002.htm，结果将与chpt002_001.htm完全相同。

但是，如果您加载页面，然后右键单击并[查看页面源代码]，您将看到JavaScript不再是内联的。

在大多数（如果不是所有）浏览器中，您现在可以单击src链接，浏览器将加载您的JavaScript文件并显示它。

您还可以看到我喜欢在JS文件中添加第一行注释，告诉我我正在查看哪个文件。  

JavaScript注释

要添加单行注释，只需在JavaScript行前面加上两个斜杠字符（//）。该行之后的所有文本将被JavaScript解释器忽略，就好像它不存在一样。

下一行将恢复正常代码。 如果您需要多行注释，您也应该在这些行前面加上//。存在一个被接受的多行注释，但它被警告不应使用，因为它可能导致您意外注释掉大量代码。多行注释以/*开头，以*/结尾，因此JavaScript解释器会将这两个标记之间的任何内容视为注释。

章节总结

本章到此结束。现在您知道了如何正确设置HTML和JavaScript文件。我们后续的示例中的所有代码都将采用这种方式，因此理解这一切如何工作很重要。 

下一步是什么？

现在我们有了工作流程，我们可以开始更深入地研究纯JavaScript。 在下一章中，我们将看看JavaScript的基础知识，如数据类型、语句、控制结构（if语句、for循环等）。这些是JavaScript的基本构件，允许您构建更大的应用程序。在后续的章节中，我们将学习函数和类（包括原型继承方面的内容）。我还会向您展示一些常用的内置功能，如JavaScript计时器和其他有助于您构建应用程序的功能。

所有这些都将为您轻松学习jQuery奠定基础，并能够看到jQuery带来的巨大好处。

© . All rights reserved.