js编程、js编程软件下载 收藏 0

JavaScript 简史

作者 | 泰斗贤若如

来源 | 泰斗贤若如

这次写一篇对于JavaScript的简介，我们知道的编程语言有很多种，比如Java、C++、Python等等，每种编程语言都有其独具的特色，不论是语法格式还是表达形式，都能让每个程序员沉淀在知识的海洋里难以自拔。

即每种编程语言都有无限的延展性，但如果我们考虑问题的时候追溯其根源，其实也不难发现每种编程语言都具有共同的初心，最直白的话就是人与计算机进行沟通的语言，在现实生活中，见什么人说什么话我们都很清楚，那在与计算机沟通的世界中，做什么事用什么编程语言沟通也是同样的道理，前提就是我们要了解这些编程语言，在你需要选择的时候做出正确的判断，这也正是我写此篇文章的意义。

在1994年，当时的网景公司（Netscape）凭借Navigator这个浏览器成为了Web时代开启最著名的第一代的互联网公司。当时所用的第一版本的浏览器就是下图中的浏览器，相信有很多年轻朋友都没有见过这种浏览器。如果大家回想十年前或是十五年前，大家用的浏览器应该是IE浏览器，那个时候的浏览器跟现在的比如说谷歌浏览器、火狐浏览器等相比而言，那就是天壤之别了。

这个最早版本的浏览器，整个浏览器都是静态的，也就是用HTML和CSS写的，并没有像今天的各种浏览器一样具有各种各样的动态效果了，比如像网页的图片轮播、鼠标悬浮切换等效果。

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

他设计出实现网页动态效果的编程语言，并将其编程语言命名为JavaScript。

为什么会命名为JavaScript呢？原因是在当时，Java非常火，网景公司希望借用Java在当时的名气来进行推广。其实事实上呢，JavaScript除了语法上有点像Java外，别的地方都跟Java没有任何关系。

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

那到底JavaScript和ECMAScript有什么关系呢?

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

• 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的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。

ECMAScript(核心)

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

ECMAScript的兼容：

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

2. 支持Unicode字符标准。

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

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

DOM（文档对象模型）

文档对象模型(DOM)是针对XML但经过扩展用于HTML的应用程序编程接口（API）。DOM把整个页面映射为一个多层次节点结构。HTML或者XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

其实说白了，文档对象模型(DOM)就是操作网页上的那些标签，来实现动态的效果。

在DOM中，页面一般可以用分层节点图表示：

DOM级别：

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

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

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

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

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

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

3. DOM Traversal and Range(DOM遍历和范围)：定义了遍历和操作文档的接口。

• DOM3级则进一步扩展了DOM，引入了加载和保存模块以统一方式加载和保存文档的方法；新增了DOM验证模块主要还是验证文档的方法。

BOM（浏览器对象模型）

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

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

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

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

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

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

6. 对cookies的支持。

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

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

综上来说，JavaScript就包含了以上这三部分内容，第一部分就是核心基础语法，这是非常非常重要的东西，有了核心基础的铺垫，我们才能后续的学习文档对象模型(DOM)和浏览器对象模型(BOM)。文档对象模型(DOM)就是操作一些网页上的一些标签元素，来实现网页上的动态效果。

而浏览器对象模型(BOM)就是像比如说滚动的行为，点击回到顶部，还有刷新，前进，后退等操作。这些特性就是我们需要了解的内容，在你后续进行详细学习的时候，就带着这些特性疑问去学习，会有事半功倍的效果。

五个强大的 JavaScript 特性技巧

作者 | Alexander T. Williams

译者 | 明知山

策划 | Tina

JavaScript 是现代 Web 开发中一个必不可少的工具，它不断发展和演变，不断建立新的标准。在本文中，我们专注于介绍五种前沿的 JavaScript 技术，向开发者展示构建高交互性和高性能动态 Web 应用程序的创新性方法。从单子（Monad）到模式匹配，我们将带你了解最新、最伟大、适用于高级开发者的 JS 技术。

JavaScript 因其灵活性获得了巨大普及，并成为世界上使用最为广泛的编程语言。JS 通常被用于构建具有高交互性的动态 Web 应用程序 —— 例如实时更新、直观、功能丰富的用户界面等。此外，JavaScript 还允许应用程序跨平台运行。

JS 可用于各种项目，例如为电子商务服务提供支持或制作动画和手机游戏。然而，这只是 JavaScript 能力的一个缩影。我们还看到 JS 被用于企业环境中，特别是在关键的 ERP 过程中，如 SAP 人员增补，它允许在原生 Web 平台之上创建自定义仪表盘和 UI。

许多领先的平台，如 Facebook，使用了开源用户界面框架 React Native，它就是基于 JavaScript 构建的。这使得他们能够在使用单一代码库的情况下构建可同时在 iOS 和 Android （甚至是 Apple Vision Pro）上运行的移动应用程序。其结果就是开发时间大大缩短，使用的资源更少，所有平台和设备上的用户体验都保持一致。

服务器端运行时环境（如 Node.js）让 JavaScript 可以在 Web 浏览器之外运行，这进一步提升了应用程序的可扩展性和部署可能性。为了使 JS 更加通用和强大，大量 JS 兼容的 API 将 Web 应用程序链接到了外部服务。

最后，JavaScript 生态系统有了众多强大的库和框架，这有助于简化和加速开发，使开发者能够选择预先写好的代码来执行特定的功能。

我们选择了开发者在使用的五种前沿的 JavaScript 技术，希望可以帮你解决一些开发问题，构建更有效、用户友好的应用程序。

单子可用于组合需要上下文的函数，并返回一个值，它在简化错误管理和减少意外结果方面非常有效。

单子就是让代码中的函数组合变得尽可能简单。它们通常用于构建对精度要求很高的企业级应用程序。单子使代码更易于管理，从而可以实现更复杂的回调、嵌套条件分支等。本质上，单子就是让代码中的函数组合尽可能简单。

单子可以分为三种类型的函数组合：

函数映射：a => b

带上下文的函数映射：Functor(a) => Functor(b)

单子扁平化（从上下文中解包值）并带上下文的函数映射：Monad(Monad(a)) => Monad(b)

函数组合是创建函数管道的基础，可以实现高效的数据流。管道的第一个阶段是输入，最后一个阶段是经过转换的输出。为了实现管道，每一个阶段都必须能够预测到前一个阶段将返回的数据类型。

这时候单子就可以发挥作用，它们能够有效地映射函数并创建智能的管道。它们 与 Promise 的工作方式类似，并且可以无缝地放在一起使用。

下面是一个使用单子从 异步 API 获取用户数据，然后将用户数据传给另一个异步 API 执行计算的示例：

复制代码

当开发者希望代码更简洁、更具表达性时，通常会使用声明式方法。JavaScript 的声明式编程关注的是代码的总体目标，而不是如何实现这些目标。这使得代码更简单、更易读，也更易于维护。当开发者希望代码更简洁、更具表达性以快速交付项目时，通常会使用声明式方法。

我们将声明式方法与命令式方法做一番比较：

命令式：

复制代码

声明式：

复制代码

服务器端缓存可用于根据使用情况自动伸缩资源。

缓存并不是什么新鲜事物，也不会被认为是什么前沿技术，但由于客户端和服务器端 Web 应用程序都可以使用缓存，因此它成了一个强大的提升性能的工具，特别是服务器端缓存可以通过加速数据检索来提高 Node.js 的性能。

我们来看一个使用内存缓存技术的例子：

复制代码

服务器端缓存可以用于根据使用情况自动伸缩资源。AWS Lambda、Azure Functions 或 Google Cloud Functions 可以通过编程动态调整服务，而 AWS JavaScript SDK 允许你监控使用情况、优化云成本和自动伸缩资源，确保只为所需资源付费。

不可变性是指不能被改变的东西。在 JavaScript（以及一般的编程）中，它指的是在设置后就不能被修改的值。由于应用程序不断变化和更新，不可变性看起来似乎是不必要的 —— 但事实并非如此。

不可变性可以减少调试和意外结果。

数据的不可变性很重要，因为它有助于通过代码库实现一致性，并有助于状态管理。创建新值，而不是修改已存在的值，这让事情变得更可预测，从而减少错误 —— 比如当数据结构被意外修改时发生的错误。这样可以减少调试和意外结果。

将不可变性用于命名变量的示例：

复制代码

不可变性是一项重要的技术，已经越来越多地被用在数据科学任务和人工智能项目中，这再次证明 JavaScript 无法处理的问题越来越少了

模式匹配是一种条件分支，它可以在绑定变量的同时简洁地匹配数据结构模式。在编写 XSLT 样式表转换 XML 文档时，通常可以使用模式匹配。

模式匹配比标准的 switch 语句高效得多。

当需要匹配一个值与给定模式时，模式匹配比标准的 switch 语句更加高效，它提供了更多的控制，让开发者可以编写更复杂的表达式。

下面是使用 JUnify 库实现阶乘函数的示例，其中就用到了匹配模块：

复制代码

JavaScript 不仅灵活、多功能性，还可以部署在各种平台上。通过使用上述技术，开发者可以为他们的应用程序开发出功能强大且简洁的代码。

原文链接：

https://thenewstack.io/top-5-cutting-edge-javascript-techniques/

声明：本文为 InfoQ 翻译整理，未经许可禁止转载。

原文链接：

web前端开发教程，最全JavaScript入门讲解

如果是，那么这篇文章一定会对你有所帮助，这里总结了5条建议，帮助JavaScript初学者总结学习方法，提高学习效率。

对初学者而言，看书的效率是很低的，书上的内容大多会展示核心代码，而视频为了演示效果，会展示全部代码。初学者自学需要的是全部代码，只看核心代码必定会留下踩不完的坑。所以，初学者一定要多看视频少看书。

学习JavaScript，一定要以写为主，而不是以看为主。学习时间的一半以上要留给写代码，剩下的时间用来看书和看视频。几乎所有初学者都有这个问题，就是拿一本书（或视频）看3个小时但是一行代码都没写。这样的结果就是，3个小时最多只利用了1个小时。太浪费时间了。正确的学习方法是：看到一行代码就写一行代码，就算理解，抄也得抄下来，然后再去慢慢理解。

• react，vue，angular,和你没关系
• node，express，koa，和你没关系
• grunt，gulp，webpack，和你没关系

JavaScript这几年变化很快，但是对于初学者来说要摒弃浮躁的气氛，静下心来打好基础。记住：自己是初学者，玩的东西就是：JavaScript和jQuery，工具就用一个编辑器和一个浏览器，这些就够了，别的不要碰.

有些朋友会说jQuery已经淘汰了，jQuery确实注定要被淘汰，但是现在还差得远呢。

首先，jquery对于初学者非常友好，甚至不会js都可以学jQuery。并且目前市面上的网站和应用，仍然是jQuery居多，所以如果你是自学，jQuery是必学的。

熟悉基本概念：变量，数据类型，函数，运算符，表达式，对象（自定义对象，内置对象）。

这些基本概念一定要熟悉，熟悉到什么程度，看见一个概念，立刻就能写出示例代码，就够了。

2.熟悉DOM：树状结构，节点分类，添加节点，删除节点，修改属性，绑定事件。

3.熟悉jQuery：选择器、操作属性和样式、绑定事件、节点操作、动画方法。

4.用jQuery实现网页上看到的页面效果，比如轮播图，菜单的各种效果，返回顶部等。

5.试着用原生的js实现jQuery的常用方法。比如addClass，removeClass,index这些。

上面5条如果没能做到，就不要想着闭包，原型继承，ES6新特性这些东西了。

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

• JavaScript 是脚本语言
• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript 很容易学习。
• JavaScript：写入 HTML 输出

实例

实例

alert() 函数在 JavaScript 中虽然并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

你会经常看到 document.getElementByID(\”some id\”)。这个方法是 HTML DOM 中定义的。

DOM(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

本例会动态地改变 HTML <image>的来源 (src)：

The Light bulb

点击灯泡就可以打开或关闭这盏灯

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

JavaScript 常用于验证用户的输入。

实例

JavaScript学习教程推荐小伙伴们看动力节点老杜讲解的web前端全套教程，这个教程是将多年的编程经验灌输其中，典型的实践派，既适合初学者入门，也适合进阶（学习底层）。

主要讲解了前端开发中的核心技术JavaScript，俗称JS，视频中讲解了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点，该视频可以开启你的WEB前端之路。

http://www.bjpowernode.com/?toutiaoweb.chai

• JavaScript教程
• JavaScript语言特点
• JavaScript组成
• JavaScript中BOM和DOM之间的关系及主流浏览器
• JavaScript开发工具
• JavaScript基础语法
• HTML嵌入JavaScript
• JavaScript注释
• JavaScript标识符
• JavaScript保留关键字
• JavaScript内置类型
• JavaScript变量
• JavaScript函数
• JavaScript数据类型
• JavaScript的typeof运算符
• JavaScript创建对象
• JavaScript Void
• JavaScript中 null、NaN和undefined的区别
• JavaScript流程控制语句
• JavaScript事件和事件句柄
• JavaScript常用事件及事件句柄
• JavaScript注册事件的方式
• JavaScript HTML DOM对象
• JavaScript HTML DOM 对象
• JavaScript BOM编程
• JavaScript window对象
• JavaScript history对象与location对象
• JavaScript JSON
• JavaScript JSON

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