前端新手指南：揭秘JavaScript运行原理

发表时间: 2022-05-06 12:20

如果您正在考虑全面系统学习Javascript 的话！那么在开始之前了解一些有关这种编程语言的一般知识会很有帮助。本期目标是带你了解JavaScript的整体运行原理和专业术语背后！

高层次定义 JavaScript

JavaScript 是一种编程语言，可让开发人员在网页上实现复杂的操作。除了静态信息之外，网站上所有绝大部分的内容都是JavaScript呈现的，例如滚动视频点唱机、动画图形、交互式地图和内容更新。

JavaScript 建立在CSS 和 HTML 事实上，它们本质上是网页底层，从 HTML 开始，然后是用于样式的 CSS 和用于动态行为的 JavaScript。

回顾一下，HTML 是一种定义段落并提供结构的标记语言，而 CSS 包含样式规则并将它们应用于 HTML。

了解编译代码与解释代码

JavaScript是一种轻量级的解释型编程语言。当您使用解释型语言时，无需在浏览器运行之前转换代码。相反，在代码从文档的顶部到底部运行后，您将立即获得结果。

相比之下，编译语言需要在计算机运行之前编译或转换为另一种形式。一个例子是 C++，因为它必须被编译成计算机运行的汇编语言。

了解客户端与服务器端代码

JavaScript也非常通用，可用于服务器端和客户端代码。服务器端代码在服务器中运行，结果下载并显示在浏览器中。或者，客户端代码是在计算机上运行的；当您访问一个网站时，您的浏览器会下载客户端代码，然后运行并显示它。

了解动态与静态代码

最后，JavaScript用于客户端和服务器端的动态代码，指的是网页能够根据情况显示各种显示，以及在必要时生成新内容的能力。

虽然静态代码始终显示相同的内容，但动态代码会实时更新内容。

对于客户端代码，JavaScript 在浏览器中生成新内容。例如，创建一个 HTML 表格，用来自服务器的数据填充它并在网页上显示它。使用服务器端代码，可以在服务器中创建新内容，例如从现有数据库中获取数据。

探索 JavaScript 能做什么

JavaScript的核心元素可以处理一系列任务和功能，其中最常见的之一是将值存储在变量中。例如，要求用户输入他们的名字，然后将其存储在一个名为“name”的变量中。

JavaScript 还可以对字符串或文本片段执行操作，以及运行代码作为对特定网页事件的响应，例如确定按钮是否被点击的“点击”事件，并在它被点击时运行代码。

API接口

为了获得更多功能，应用程序编程接口 (API)构建在核心 JavaScript 语言之上，让您能够以非凡的方式使用JavaScript 代码。将 API 视为提供预制的代码构建块，让您创建和实现一个原本证明具有挑战性的程序。简而言之，无需从头开始编写代码。

API 通常通过浏览器或第三方提供。浏览器 API 是 Web 浏览器的一部分，可以执行复杂的操作，这些操作在周围的计算机环境中很有用或暴露数据。示例包括可以创建 3D 或 2D 动画图形的“WebGL”和“Canvas”API；检索地理信息以补充您的 JavaScript 的“地理定位 API”；以及允许操作 CSS 和 HTML 的文档对象模型 (DOM) API。还有视频和音频浏览器 API。

第三方 API 通常会将其信息和代码放到网上，但它们不会自动内置到您的浏览器中。示例包括OpenStreetMap API、Google Maps API和Twitter API、微信 API。前者让您可以做一些事情，例如在您的网站上嵌入自定义地图，而后者可以让您显示您最近的社交媒体活动或执行类似的操作。

当然，这只是各种浏览器和第三方 API 的一小部分示例。

使用 JavaScript 的浏览器安全性

每当您打开一个新的浏览器选项卡时，它都会打开一个独特的执行环境来运行代码，因此一个选项卡的内容不会影响其他选项卡的内容。从安全的角度来看，这使得从网站窃取代码变得更加困难。JavaScript 培训可能会涵盖更高级的流程，例如在选项卡之间安全地发送数据和代码。

当 JavaScript 在页面上运行时

当您加载网站时，代码会在执行环境中运行。代码将是HTML、CSS 和 JavaScript，而执行环境是浏览器选项卡。在执行 JavaScript 之前，CSS和 HTML 必须加载到页面上。

换句话说，页面的样式、结构和内容在 JavaScript 开始运行之前就已经确定了。当 JavaScript 动态修改 CSS 和 HTML 以更新用户界面时，这种操作顺序有助于减少错误。

JavaScript 运行顺序

JavaScript 的运行顺序很简单：它按顺序运行，从顶部开始向下运行。虽然这可能是您所期望的，但这也意味着您需要注意放置代码的顺序，在代码中比实际需要的更早定义对象。

为避免任何错误，请务必在引用之前定义对象。

添加 JavaScript

与 CSS 类似，有一系列方法可用于将 JavaScript 添加到您的页面。CSS 依赖于<style> 元素和样式表，而 JavaScript 使用<script>元素。

内部 JavaScript

要应用内部 JavaScript，请确保您拥有要添加的 JavaScript 的本地副本。在文本编辑器和浏览器中打开文件。HTML 应该开发一个带有可点击按钮的简单网页。在文本编辑器中输入：

它应该在</head>标记之前。在上述代码的相关部分添加您的 JavaScript（在“JavaScript 到这里”下方）。保存文件并刷新浏览器以在下面生成一个新段落。

外部 JavaScript

您还可以将 JavaScript 放在外部文件中，这样您就可以在多个 HTML 文件中重复使用相同的代码，并通过删除脚本部分来更轻松地阅读 HTML。首先在包含 HTML 文件的同一目录中创建一个文件，并将其标记为script.js或类似的东西——关键组件是.js文件扩展名，它指的是 JavaScript。

将当前代码中的<script>元素替换为：

在您的script.js文件中添加您的 JavaScript 代码，保存它然后刷新浏览器以产生与使用内部 JavaScript 相同的结果。

避免内联 JavaScript 处理程序

有时，您可能会在 HTML 代码中找到 JavaScript 代码，如下所示：

它具有与上述示例相同的功能，但有一个内联的“onclick”处理程序，当您单击 <button> 时会运行该函数。

虽然这会产生类似的结果，但不要对您的 JavaScript 执行此操作。使用此方法需要您在每个按钮上都包含 onclick=”createParagraph()”，因此效率非常低。

使用 JavaScript 加载脚本

所有 HTML 都按出现的顺序加载，因此如果您的 JavaScript 在相关 HTML 之前最终加载和解析，则代码将无法运行。

为了解决这个问题，程序员有时会添加结构。例如：

分别用于内部和外部 JavaScript。

JavaScript 的老式解决方案是简单地将脚本元素放在</body>标记之前，以确保它在所有 HTML 被解析后加载。

这两种解决方案的问题在于，在加载HTML DOM之前，您无法从 JavaScript 加载和解析脚本。如果网站很大并且有大量的 JavaScript，这会大大降低网站的速度。

另一种方法是使用异步和延迟。异步脚本下载脚本，但是它们不会阻止页面呈现，而是在脚本完成下载后执行。异步脚本不能保证以任何顺序运行或阻止页面上的其他元素显示，如果页面上的每个 JavaScript 脚本都是独立的，这是理想的选择。或者，defer按出现的顺序运行 JavaScript 脚本，并在下载内容和脚本时执行它们，非常适合需要等待解析以加载脚本的情况。