前端入门之深入了解JavaScript的运行原理和术语
如果您正在考虑全面系统学习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 脚本，并在下载内容和脚本时执行它们，非常适合需要等待解析以加载脚本的情况。
