JavaScript的历史由来及简介

- 日理万妓 2023-02-18 01:58 14阅读 0赞

前言

这次写一篇对于JavaScript的简介，我们知道的编程语言有很多种，比如Java、C++、Python等等，每种编程语言都有其独具的特色，不论是语法格式还是表达形式，都能让每个程序员沉淀在知识的海洋里难以自拔。即每种编程语言都有无限的延展性，但如果我们考虑问题的时候追溯其根源，其实也不难发现每种编程语言都具有共同的初心，最直白的话就是人与计算机进行沟通的语言，在现实生活中，见什么人说什么话我们都很清楚，那在与计算机沟通的世界中，做什么事用什么编程语言沟通也是同样的道理，前提就是我们要了解这些编程语言，在你需要选择的时候做出正确的判断，这也正是我写此篇文章的意义。

JavaScript的历史由来

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
在1994年，当时的网景公司（Netscape）凭借Navigator这个浏览器成为了Web时代开启最著名的第一代的互联网公司。当时所用的第一版本的浏览器就是下图中的浏览器，相信有很多年轻朋友都没有见过这种浏览器。如果大家回想十年前或是十五年前，大家用的浏览器应该是IE浏览器，那个时候的浏览器跟现在的比如说谷歌浏览器、火狐浏览器等相比而言，那就是天壤之别了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
像上图中这是最早版本的浏览器，整个浏览器都是静态的，也就是用HTML和CSS写的，并没有像今天的各种浏览器一样具有各种各样的动态效果了，比如像网页的图片轮播、鼠标悬浮切换等效果。

网景公司就想在原来的静态页面的基础上添加一些动态的效果，这时候网景公司出来一个很牛的人物叫布兰登·艾奇，他用不到两周的时间就设计出了能在网页上实现动态效果的编程语言。

本次给大家推荐一个免费的学习蔻qun，前面603 中间985最后993，
    里面概括应用网站开发，css，html，JavaScript，jQuery，Vue、Ajax，node，
    angular等。对web前端开发技术感兴趣的同学，
    不管你是小白还是大牛我都欢迎，每天技术分享。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
就是上图中的人设计的这中能实现网页动态效果的编程语言，并将其编程语言命名为JavaScript。  
为什么会命名为JavaScript呢？原因是在当时，Java非常火，网景公司希望借用Java在当时的名气来进行推广。

其实事实上呢，JavaScript除了语法上有点像Java外，别的地方都跟Java没有任何关系。  
![在这里插入图片描述][20200615140251378.png]  
JavaScript和ECMAScript的关系

从上面讲的JavaScript的由来中，我们就知道JavaScript由网景公司的布兰登·艾奇开发出来的，一年后，微软又模仿JavaScript开发出了一种编程语言叫JScript,再后来，陆续又有别的商家推出JavaScript的不同实现语言。这就导致JavaScript的语法和特性日益混乱，其标准化问题被提上日程。最终由欧洲计算机制造商协会（ECMA）以JavaScript1.1为蓝本，制定了【ECMA-262】标准，并由此标准定义了一种新脚本语言ECMAScript。随后，ISO也采用ECMAScript作为标准，各浏览器厂商便纷纷开始将ECMAScript作为各自JavaScript实现的基础。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
那到底JavaScript和ECMAScript有什么关系呢?

ECMAScript其实并不等同于JavaScript，它只是JavaScript的核心标准（语法、类型、语句、关键字、保留字、操作符、对象），而JavaScript还包括文档对象模型（DOM）和浏览器对象模型（BOM）等。其中各主流浏览器对ECMAScript的支持都还不错，但对DOM的支持相差较大，对于BOM一直没有相关标准。最后再简单总结一下就是：ECMAScript是一种语言标准，JavaScript是对ECMAScript的一种实现。

**JavaScript版本**

1997年06月 :发布首版。  
1997年06月:修改规范完全符合ISO/IEC 16262国际标准。  
1998年6月，ECMAScript 2.0版发布。  
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。  
1999年12月:增加正则、更好的文字处理、新的控制语句、try/catch异常处理、更加明确的错误定义，数字输出格式等等。放弃发布。  
2007年10月，ECMAScript4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。

2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1改名为ECMAScript 5。

2009年12月:完善了ECMASript 3版本、增加"strict mode," (严格模式)、以及新的功能，如getter和setter、 JSON库支持和更完整的对象属性。ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。

2011年06月:ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。

2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。

2013年12月，ECMAScript 6草案发布。

2015年06月:第六版的名字有很多，可以叫ECMAScript6 (ES6) ，也可以叫ECMAScript 2015 (ES2015) 。

2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

2016年06月:也被称为ECMAScript 2016。完善ES6规范，还包括两个新的功能:求幂运算符(\*) 和array.prototype.includes方法。

2017年06月:增加新的功能，如并发、原子操作、Object.values/Object.entries、 字符串填充、promises、 await/asyn等等。

**JavaScript的组成部分**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
JavaScript的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。

ECMAScript(核心)

【ECMA-262】并没有参照web浏览器，规定了语言的组成部分，其具体内容包括语法、类型、语言、关键字、保留字、操作符、对象等。

ECMAScript的兼容：

支持【ECMA-262】描述的所有“类型、值、对象、属性、函数以及程序语法和语义” 。

支持Unicode字符标准。

添加【ECMA-262】没有描述的更多“类型、值、对象、属性和函数”，【ECMA-262】说的这些新增特性，主要是指该标准中没有规定的新对象和对象的新属性。

支持【ECMA-262】中没有定义的“程序和正则表达式的语法”。也就是说可以修改和扩展内置的正则表达式语法。

DOM（文档对象模型）

文档对象模型(DOM)是针对XML但经过扩展用于HTML的应用程序编程接口（API）。DOM把整个页面映射为一个多层次节点结构。HTML或者XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
其实说白了，文档对象模型(DOM)就是操作网页上的那些标签，来实现动态的效果。

在DOM中，页面一般可以用分层节点图表示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]  
DOM级别：

DOM1级于1998年10月成为W3C的推荐标准。BOM1由两个模块组成分别是DOM core和DOM HTML。

DOM core：规定如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。

DOM HTML：在DOM core的基础上加以扩展，添加了针对HTML的对象和方法。

DOM2级在原来DOM的基础上有扩充了鼠标和用户界面事件、范围、遍历等细分模块，通过对象接口增加了对css的支持。包括以下模块：

DOM Views（DOM视图）：定义了跟踪不同文档视图的接口。

DOM Events（DOM事件）：定义了事件与事件处理的接口。

DOM Traversal and Range(DOM遍历和范围)：定义了遍历和操作文档的接口。  
DOM3级则进一步扩展了DOM，引入了加载和保存模块以统一方式加载和保存文档的方法；新增了DOM验证模块主要还是验证文档的方法。

BOM（浏览器对象模型）  
浏览器对象模型(BOM)是处理浏览器窗口和框架，我们习惯上把所有针对浏览器的JavaScript扩展算作是BOM的一部分。包括以下：

弹出新浏览器窗口的功能。

移动、缩放和关闭浏览器窗口的功能。

提供浏览器所加载页面的详细信息的navigator对象。

提供浏览器所加载页面的详细信息的location对象。

提供用户分辨率详细信息的screen对象。

对cookies的支持。

像XMLHttpRequest和IE的ActionXobject这样的自定义对象。

浏览器对象模型(BOM)其实很简单，它包含了当前浏览器上的一些操作，比如说像关闭按钮、刷新按钮、前进和后退按钮等等。

综上来说，JavaScript就包含了以上这三部分内容，第一部分就是核心基础语法，这是非常非常重要的东西，有了核心基础的铺垫，我们才能后续的学习文档对象模型(DOM)和浏览器对象模型(BOM).文档对象模型(DOM)就是操作一些网页上的一些标签元素，来实现网页上的动态效果。而浏览器对象模型(BOM)就是像比如说滚动的行为，点击回到顶部，还有刷新，前进，后退等操作。这些特性就是我们需要了解的内容，在你后续进行详细学习的时候，就带着这些特性疑问去学习，会有事半功倍的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615135648486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200615140129440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200615140206526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[20200615140251378.png]: https://img-blog.csdnimg.cn/20200615140251378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200615140324417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200615140511484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200615140641986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200615140659999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70