javascript技术教程【javascript初级教程】 收藏 0

Web前端：JavaScript最强总结，最全面的零基础入门教程

JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。

• 简单、易学、易用；
• 跨平台；IE、Navigator
• 符合ECMA（欧洲计算机制造协会）标准，可移植；
• 事件驱动式的脚本程序设计思想；
• 动态、交互式的操作方式。

• 交互式操作；
• 表单验证；
• 网页特效；
• Web游戏
• 服务器脚本开发等。

文本编辑器

Web浏览器

解释执行（由上而下）

JavaScript1.0——JavaScript1.4

JavaScript/IE3.0、JavaScript1.2/IE4.0；

微软允许用户自行设置对JavaScript处理模式。

JavaScript与Java的区别体现在：首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。第三，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。第四，两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。第五，代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。第六，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用<script>…</script>来标识，而Java使用<applet> … </applet> 来标识。第七，静态绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查，如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

如果想要更高效、更系统地学会javascript，最好采用边学边练的学习模式。

今天分享的这套JavaScript学习教程，讲解了前端开发中的核心技术JavaScript，俗称JS

内容涵盖：JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点，该视频可以开启你的WEB前端之路。

1. .JavaScript教程-JavaScript概述

2. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式1

3. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式2

4. .JavaScript教程-HTML嵌入JavaScript代码的第二种方式

5. .JavaScript教程-HTML嵌入JavaScript代码的第三种方式

6. JavaScript教程-JS的标识符

7. .JavaScript教程-JS的变量1

8. .JavaScript教程-JS的变量2

9. JavaScript教程-JS的函数初步1

10. .JavaScript教程-JS的函数初步2

11. .JavaScript教程-全局变量和局部变量

12. .JavaScript教程-JS的数据类型

13. .JavaScript教程-Undefined数据类型

14. .JavaScript教程-Number数据类型

15. .JavaScript教程-Boolean数据类型

16. .JavaScript教程-回顾数据类型

17. .JavaScript教程-String数据类型

18. .JavaScript教程-Object数据类型

19. JavaScript教程-Object数据类型2

20. .JavaScript教程-Object数据类型3

21. .JavaScript教程-null undefined NaN的区别以及等同和全等运算符

22. .JavaScript教程-JS的常用事件

23. .JavaScript教程-回调函数的概念

24. .JavaScript教程-注册事件的两种方式

25. JavaScript教程-JS代码的执行顺序

26. .JavaScript教程-JS代码的执行顺序2

27. JavaScript教程-捕捉回车键

28. .JavaScript教程-捕捉回车键2

29. .JavaScript教程-void运算符

30. .JavaScript教程-JS的控制语句

31. JavaScript教程-设置和获取文本框的value

32. JavaScript教程-innerHTML和innerText属性

33. .JavaScript教程-正则表达式

34. .JavaScript教程-邮箱地址的正则表达式

35. JavaScript教程-扩展字符串的trim函数

36. .JavaScript教程-回顾JS

37. JavaScript教程-表单验证

38. JavaScript教程-表单验证2

39. JavaScript教程-表单验证3

40. .JavaScript教程-表单验证4

41. .JavaScript教程-复选框的全选和取消全选

42. .JavaScript教程-获取下拉列表选中项的value

43. .JavaScript教程-周期函数setInterval

44. .JavaScript教程-内置支持类Array

45. .JavaScript教程-BOM编程window的open和close

46. .JavaScript教程-BOM编程弹出确认框

47. .JavaScript教程-（补录）-将当前窗口设置为顶级窗口

48. .JavaScript教程-BOM编程history和location对象

49. .JavaScript教程-JSON在开发中的使用

50. .JavaScript教程-JSON在开发中的使用2

51. JavaScript教程-JSON在开发中的使用3

52. .JavaScript教程-JSON在开发中的使用4

53. JavaScript教程-JSON在开发中的使用5

程序员的 JavaScript 代码该如何让计算机搞懂？

出自程序员之手的 JavaScript 代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进 JavaScript 引擎内部，一探究竟。

作者 | Lydia Hallie

译者 | 弯月，责编 | 屠敏

以下为译文：

JavaScript 很酷（这一点不用我说），但一台机器究竟是怎样理解我们编写的代码呢？作为JavaScript 开发者，我们通常不需要处理编译器的东西。但是，了解 JavaScript 引擎的基础知识，知道它如何将人类能看懂的JS代码变成机器能理解的东西，是绝对是有好处的！

注意：这篇文章主要根据 Node.js 和基于 Chromium 的浏览器使用的V8引擎撰写。

当HTML解析器遇到代码中的script标签时，就会从网络、缓存或者已安装的service worker里加载源代码。这一步的结果就是脚本内容，以字节流的形式返回，这个字节流需要解码器来处理！字节流解码器会在字节流的时候进行解码。

字节流解码器根据流中的字节数据来创建符号（token）。例如，0066解码成f，0075解码成u，006e解码成n，0063解码成c，0074解码成t，0069解码成i，006f解码成o，006e解码成n，然后是一个空格。似乎你写了一个function！这是JavaScript的保留关键字，因此就会创建一个符号，然后发给解析器（以及预解析器，我的GIF图里没有说，但我会稍后解释）。字节流中的其余内容也会类似处理。

引擎有两个解析器：一个是预解析器（pre-parser），另一个是解析器（parser）。预解析器只负责尽早检查符号，找出其中的语法错误。这样可以减少在代码中发现错误所需的时间。否则这些错误就要由解析器负责发现了！

如果没有错误，解析器就会根据它从字节流解码器收到的符号创建节点，然后使用这些节点创建一颗抽象语法树，简称AST。

接下来就是解释器（interpreter）出场了！解释器会遍历整个AST，根据AST的内容生成字节码。字节码生成完成后，就会删除AST以释放更多的内存。这样就得到了机器能够运行的代码！

虽然字节码很快，但它还可以更快。字节码在运行的时候会生成信息。它可以检测到哪些行为会更频繁发生，哪些类型的数据会更经常被使用。如果某个函数被调用了许多次，那么就可以通过优化加快速度！

字节码会连同生成的类型反馈一起发送到优化编译器（optimizing compiler）。优化编译器会处理负责处理字节码和类型反馈，然后生成高度优化过的机器码。

JavaScript 是一个动态类型语言，这意味着数据类型经常会变化。如果 JavaScript 引擎每次都必须检查值的类型，那就会非常慢。

然而，JavaScript 的引擎使用了一种叫做内联缓存（inline caching）的方法。它会在内存中缓存代码，期待着以后会用同样的行为返回同样的值！比如，一个函数被调用100次，到目前为止每次都返回同样的值。那么引擎就会假设该函数在第101次调用时依然会返回同样的值。

我们假设有一个函数sum，到目前为止每次调用都使用两个数值作为参数：

上面的调用会返回3！下次被调用时，引擎就会假设我们依然会用两个数值进行调用。

如果这个假设正确，那就不需要进行动态查找，可以直接使用内存中保存的值。否则，如果假设错误，就会进行反优化，将代码从优化过的机器码恢复成原始的字节码。

例如，假设下次调用时传递了一个字符串而不是数值。由于 JavaScript 是动态类型，这样做不会产生任何错误！

这意味着数字被强制转换成字符串，然后函数会返回字符串\”12\”。因此引擎会去执行字节码，然后更新类型反馈。

希望这篇文章对你有帮助性！当然，引擎还有许多其他方面我没有讨论到（如JS heap，call stack等），也许以后会讨论！如果你对JavaScript的内部原理有兴趣，我强烈你自己做一些研究，V8是开源的，关于其工作原理的文档也非常好！

原文：https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

本文为 CSDN 翻译，

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com