如果您正在考虑全面系统学习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 脚本,并在下载内容和脚本时执行它们,非常适合需要等待解析以加载脚本的情况。