快速认识，前端必学编程语言：JavaScript

水深无声 2024-02-05 07:21 9阅读 0赞

JavaScript是构建Web应用必学的一门编程语言，也是最受开发者欢迎的热门语言之一。所以，如果您还不知道JavaScript的用处、特点的话，赶紧补充一下这块基础知识。

JavaScript 是一种高级、单线程、垃圾收集、解释或即时编译、基于原型、多范式、动态语言，具有非阻塞事件循环，因构建网站而闻名。

它是由 Brendan Eich 于 1995 年在短短一周内创建的，目的是为 Netscape 浏览器添加一种易于学习的脚本语言。

![a2df3e79f0034eef9d0edcff9ebcd1b3.png][]

它最初被命名为 Mocha，但当时的天才营销人员希望它听起来像那种性感的新 Java 语言。如今，它已成为一种功能齐全的语言，并通过 ECMAScript 标准不断发展。

JavaScript以构建前端 Web 应用程序而闻名，因为它是除 WebAssembly 之外唯一在浏览器中原生支持的语言。

![fcdb736086a94732a40217970c7f3d8e.png][]

然而，任何可以使用 JavaScript 构建的东西都将使用 JavaScript 构建，例如使用 Node.js 的服务器端应用程序、使用 React Native 或 Ionic 的移动应用程序以及使用 Electron 的桌面应用程序。

它是一种解释性脚本语言，但 V8 引擎和 Chromium 等工具使用即时编译器在运行时将其转换为机器代码。

![82923e157f5a4262b2304ce3d8b84383.png][]

它在处理 I.O 方面也非常出色。密集型作业，尽管事实上它是一种单线程语言，通过非阻塞事件循环实现，可以在后台排队工作而不阻塞主线程。

![3eb33dbe3c4444b3a2ce60b713214a38.png][]

接下来看看JavaScript语言的特点：

首先，创建一个以 .js 结尾的文件。您的代码将从全局上下文开始执行。使用控制台通过内置调试器记录值。

![8959aea6c0514817bd07c88accd06ada.png][]

现在考虑一下要在哪里运行该文件。是前端浏览器还是后端 Node.js 服务器？在浏览器中，您可以使用脚本标记引用它，然后浏览器将在您打开该 HTML 文件时执行它。

![b85b67e0cc7b4adcbd4534fe0ac24094.png][]

在网站上，JavaScript 通常用于从 DOM 中获取元素。

![a2d6cc4c2c344c02ace8622ea822196a.png][]

document.querySelector 将抓取第一个按钮，然后我们可以使用 var、let 或 const 将其分配给变量。

![4567e6b75cc54de1a285886310db8fd2.png][]

*  var 是最原始的方法，但通常会避免使用
 *  let 是可以重新赋值的变量
 *  const 是不能重新赋值的变量

现在，为了使按钮具有交互性，我们可以通过为 `onClick` 事件定义函数来添加事件侦听器。我们可以在这里使用 function 关键字或更简洁的箭头语法。

![eb9737f75ab7412c88de89146c46a6d4.png][]

现在，每当发生新的单击时，事件循环就会执行此函数。函数是支持函数式编程模式的一流对象，但 JavaScript 还支持面向对象模式的类和继承。

![e7da37ce60464d15b70c383b1e1d8ffb.png][]

尽管它是单线程的，但它可以与 Promise API 异步工作，Promise API 也支持 async-await 语法。

![b9fbe5250c8a48de8419c03924740cf8.png][]

![5a2af95fe64746e3a12df5f180328dbe.png][]

由于 Node.js 运行时，JS 代码也可以在服务器上运行。它不是与网页上的按钮交互，而是与文件系统 API 等交互。

![ca2affcd74824260af5fa62172f2c20d.png][]

通过拉出终端并输`node`命令，在服务器上执行代码。

![bab74c1ca3924b15a328fb170effec69.png][]

配套视频：[https://www.bilibili.com/video/BV1Jc411B7Kd/][https_www.bilibili.com_video_BV1Jc411B7Kd] ，欢迎一键三连～

> 如果您想开拓眼界，了解和发现更多计算机领域的概念和知识，欢迎关注我在持续更新的[开发者科普专栏][Link 1]，助你探索更多计算机领域的热门知识！

> 欢迎关注我的公众号：程序猿DD。前沿技术早知道，弯道超车有希望！积累超车资本，从关注DD开始！

[a2df3e79f0034eef9d0edcff9ebcd1b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/f7d9b3a109d94b46be0c4f54a2f2c031.png
[fcdb736086a94732a40217970c7f3d8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/4af0869bd4e644e68bb79d1f2e967802.png
[82923e157f5a4262b2304ce3d8b84383.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/194d5a1fff04435baa1076b14c819a53.png
[3eb33dbe3c4444b3a2ce60b713214a38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/a657cf7fff264c4481fe572fda95b746.png
[8959aea6c0514817bd07c88accd06ada.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/5a793737992b4683b8cc656069dca57a.png
[b85b67e0cc7b4adcbd4534fe0ac24094.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/cd61640e0acd467697377a6eabed3a6b.png
[a2d6cc4c2c344c02ace8622ea822196a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/5eb22d12fdaa4b88b41e5df0ecd080be.png
[4567e6b75cc54de1a285886310db8fd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/0d5a23f044594255883b88f53754df4e.png
[eb9737f75ab7412c88de89146c46a6d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/61571da6d2ed46499164199477173f2b.png
[e7da37ce60464d15b70c383b1e1d8ffb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/16401cc99c534b5a8f9b62810a074acd.png
[b9fbe5250c8a48de8419c03924740cf8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/47c5eccb454548ca824894f96740bd78.png
[5a2af95fe64746e3a12df5f180328dbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/3661b77cd52b4e3ca8c9cd9bbca96061.png
[ca2affcd74824260af5fa62172f2c20d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/16949b9fc4694c489ac9608369c08d72.png
[bab74c1ca3924b15a328fb170effec69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/16b3eb0f4a7b4e4d8bf8cb9fc16dd5c9.png
[https_www.bilibili.com_video_BV1Jc411B7Kd]: https://www.bilibili.com/video/BV1Jc411B7Kd/
[Link 1]: https://www.didispace.com/youtube/