JavaScript 启蒙之旅：探索编程世界的起点与基石-阿里云开发者社区

个人主页：学习前端的小z

个人专栏：JavaScript 精粹

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

JavaScript简介-入门指南-基础知识速览

✍JavaScript概述

🌙1 前言

JavaScript之父 Brendan Eich（布兰登·艾奇）

在JavaScript诞生的前几年，有人说:

JavaScript是一门四不像的语言;JavaScript是一门没有规范的语言;JavaScript是一门兼容糟糕的语言;JavaScript是一门不精准的语言;JavaScript是一个半成品语言;JavaScript是一门糟糕的语言;JavaScript只是一个玩具胶水语言;

这些声音从JavaScript面世之初就一直伴随着他，声音的主人不乏已掌握多门语言的coding老兵，每一条负面都事实支撑。就连JavaScript之父也曾经说过:

"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。'（the part that is good is not original, and the part that is original is not good.）"

Ruby的设计者——松本行弘为此感叹：

“这样的出身，得到这样的成功，还真让人出乎意料，……”，“但由于开发周期短，确实也存在着不足……”。

Douglas Crockford写了一本《JavaScript：The Good Parts》，在书中他这样写到：

JavaScript建立在一些非常好的想法和少数非常坏的想法之上。

那些非常好的想法包括函数、弱类型、动态对象和一个富有表现力的对象字面量表示法，而那些坏的想法包括基于全局变量的编程模型、缺乏块作用域、“保留”了一堆根本没用到的保留字，不支持真正的数组（它所提供的类数组对象性能不好）等等。

还有一些是“鸡肋”，比如with语句，原始类型的包装对象，new,void等等

但如今，JavaScript已经成为大部分全球开发者与编程爱好者最常用/最喜欢的语言之一。

github Octoverse 调查报告合作开发中应用最多的语言排行

stackoverflow 2019年度调查报告最受欢迎的语言排行

这中间到底发生了什么，为什么会导致如此大的变化，让我们一起与JavaScript相关的历史年表；

时间	事件
1990年	万维网诞生
1992年	第一个浏览器诞生
1994年	Netscape（网景）成立开发第一代Netscape Navigator浏览器
1995年	Mocha诞生，之后改为LiveScript,最后与sun公司达成协议改为javascript
1996年	微软开发JScript,Netscape公司将JavaScript提交给国际标准化组织ECMA
1997年	ECMAscript1.0版发布 JavaScript进入标准化时代 ECMA-262发布
1998年	ECMAScript 2.0版发布。
1999年	ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2004年	Gmail发布 Dojo诞生
2005年	Ajax 即“ Asynchronous Javascript And XML” AJAX 推广 CouchDB基于json格式的数据库
2006年	XMLHttpRequest被w3c纳入正式标准同年 jQuery发布
2008年	V8引擎发布
2009年	ECMAScript 5.0发布 & node.js诞生
2010年	Express 发布 & angular发布 NPM、BackboneJS和RequireJS 诞生
2011年	React原型成立
2012年	Webpack诞生
2013年	mongodb 2.4* 开始支持JavaScript ELECTRON诞生 HTML5.1 发布
2014年	Vue.js 发布
2015年	ECMAScript 6正式发布，并且更名为 ECMAScript 2015 ，iotjs 发布
2016年	ECMAScript 2016发布
2017	ECMAScript 2017发布主流浏览器全面支持 WebAssembly

个人观点: 真香
JavaScript的起步非常糟糕, 有着这样那样的问题让人诟病 , 但是他的灵魂足够有趣; 让人们乐于为他添砖加瓦,修枝剪叶,每一步都恰巧踩在了时代的脉搏上; The lucky JavaScript

JavaScript 的基本语法和对象体系，是模仿 Java 而设计的。但是，JavaScript 没有采用 Java 的静态类型。正是因为 JavaScript 与 Java 有很大的相似性，所以这门语言才从一开始的 LiveScript 改名为 JavaScript。基本上，JavaScript 这个名字的原意是“很像Java的脚本语言”。

JavaScript 语言的函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。这是它与 Java 语法最大的两点区别。JavaScript 语法要比 Java 自由得多。

另外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释器直接执行。

总之，JavaScript 的原始设计目标是一种小型的、简单的动态语言，与 Java 有足够的相似性，使得使用者（尤其是 Java 程序员）可以快速上手。

🌙2 什么是JavaScript?

JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。

JavaScript是一门基于原型的动态解释性脚本语言

一般来说，前端领域完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

它的基本特点如下：

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息

🔫2.1 BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

🔫2.2 DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

🌙3 JavaScript 与 Java 的关系

本质上讲 JavaScript和 Java没有关系，只是JavaScript诞生之初网景与sun合作想要推出 web端的脚本语言。JavaScript 的基本语法和对象体系，是模仿 Java 而设计的。但是，JavaScript 没有采用 Java 的静态类型。除此之外JavaScript和Java在语言层面上可以说是大相径庭。处于某种商业意图，这门语言才从一开始的LiveScript 改名为 JavaScript。

🌙4 JavaScript与ECMAScript的关系

ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是由 W3C组织（World Wide Web Consortium）制定的。

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

🌙5 JavaScript能做什么?

任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现 —Atwood定律

🔫5.1 前端领域

ajax出现之后 JavaScript有了在WEB领域立足的土壤和根基，时至今日。JavaScript已经是WEB前端领域最重要的基石，一切现代化的WEB项目都离不开JavaScript。

数据交互
UI管理
用户行为交互
数据校验
工程化/模块化
MVVM

🔫5.2 后端领域

V8 JIT NodeJS 让JavaScript可以在服务端崭露头角打破了JavaScript只能寄生在浏览器上的魔咒

CouchDB mongodb等基于JSON格式的NoSQL类型的数据库诞生让JavaScript也可以在DB操作上大展身手

WEB服务框架: express/KOA
NoSQL 数据库: mongodb CouchDB
博客系统 : Ghost/hexo
自动化构建领域: Gulp/Grunt

🔫5.3 APP

目前来说主流的App开发方式有三种：Native App 、Web App、Hybird App，而3种方式下又分别有众多的框架可供选择。JavaScript 可以介入开发的有下面三种：

Web App HTML5 APP 框架开发模式
Hybrid App 混合模式移动应用
PWA Progressive Web App 渐进式网页应用

🔫5.4 桌面应用

JavaScript还可以介入的桌面应用开发，主流有 electron Node-webkit hex React Navite

electron代表作:

vscode
atom

Node-webkit代表作:

teambition

hex代表作

有道词典

🔫5.5 图形/游戏

世界上最流行的 2D 游戏引擎之一 Cocos2d 和最流行的 3D 游戏引擎之一 Unity3D 均支持 JS 开发游戏。

以及 Cocos2d-js 轻量型跨平台Web游戏引擎

🔫5.6 嵌入式与IOT开发

JavaScript 不只是 Web 时代的通用语言，如今还延伸到了使人难以置信的其它地方: 物联网;

🌙6 为什么要学JavaScript?

JavaScript 的上手方便表达灵活社区支持度高应用广泛，是当今最受欢迎应用最广泛的语言之一…

现实点说，在现代互联网环境下，你很难找到不需要JavaScript开发岗位的企业。

🌙7 学习JavaScript所需要的的环境与设备

一台可以运行浏览器的电脑
浏览器
开发工具 (推荐 vscode)

🌙8 学习JavaScript所需要做的心里准备

不论你之前是否学习接触过其他编程语言，学习JavaScript你需要做好以下几点心里准备

不要用常规认知去理解JavaScript世界的规则 3<2<1 0.2 + 0.7
一切以事实为准，一切认知建立在实践基础上
多练多练多练多练多练多练多练多练…

✍JavaScript基础

🌙1 在HTML中嵌入JavaScript代码

<html>
    <head>
          <script src="js/index.js"></script>
    </head>
    <body>
        <input type="button" value="按钮" onclick="alert('Hello World')" />
        <script>
          var str = 'hello world!';
            console.log(str);
        </script>
    </body>
</html>

🌙2 第一段JavaScript代码

var str = 'hello world!';
console.log(str);

🌙3 JavaScript基础名词概念

var num = 1 + 1;

🔫3.1 语句

JavaScript语句为由上至下单行执行; 每一行都是一条语句, 每一条语句执行完成之后会进入下一行语句由于 ; 结尾

🔫3.2 表达式

上述代码中 1 + 1 就是一个表达式(expression) 指一个为了得到返回值的计算式。

语句可以理解为一条命令，并不一定需要的到一个具体的期望值。表达式的目的是为了得到一个值，方便后面利用值去做什么事情，在上述例子中表达式 1+1得到的值赋值给了变量 num;

🔫3.3 变量

上述例子中 num 为我们声明的变量 , 变量可以理解为一个容器，用于存放各种各样的值。由于需要存放各种不同的值所以我们要为变量命名 num 就是上述例子中的变量名

🔫3.4 变量声明

上述例子中我们通过表达式 1 + 1得到的值, 赋值给了我们通过 var关键字声明的变量 str ; 后续 num 所指向的内存地址中存储的值就是 1 + 1 的结果。在这个过程中我们其实做了两件事情:

我们声明变量是通过 关键字var 创建了变量 num
我们将表达式 1 + 1 的值赋值给了变量 num

// 声明变量 变量名为 num 没有赋值 默认值为 undefined undefined也是一个 JavaScript 关键字，表示“无定义”。
var num;
// 这一步 将 1 + 1 的结果赋值给 变量 num 让str所代表的的内存地址所存储的内容为 1 + 1 的值, 后续我们想要使用 1 + 1的结果 可以直接通过 调用变量 num 调用
num = 1 + 1;

🔫3.5 变量赋值

我们可以通过 var 关键字创建一个变量 , 创建出现的变量默认值为 undefined 未定义, 我们可以通过赋值表达式 = 来给变量存储值格式如下

变量名称 = 值;

🔫3.6 变量引用

我们学会了如何创建变量以及如何给变量赋值, 那赋值后的变量我们如何使用呢?

//使用console.log方法 在控制台中 打印 num变量的值
console.log(num);
//将变量 num 带入表达式 num + 1 让表达式成为为 num变量的内容 + 1 并且赋值给 变量 count
var count = num + 1;

🔫3.7 标识符 ( 变量名称 )

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

🍂3.7.1 命名规则

必须遵守的命名规则如果不遵守就会报错

- 由字母、数字、下划线、$符号组成，不能以数字以及其他符号开头
- 不能是保留关键字，例如：for、while。

保留关键字:

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

*合法标识符中文为合法标识符任意 Unicode 字母（包括英文字母和其他语言的字母）

num
$con
_target
π
计数器

非法标识符

1x
321
***
-x
undefined
for

🍂3.7.2 命名规范

遵守规范能够给自己和他人带来更好的开发体验，不遵守并不会导致报错

具有语义性的英文单词；
多个单词使用驼峰命名法
变量名称为名词可以使用形容词为前缀

良好的命名

maxCount
petName
str
num

不好的命名

max-count
maxcount
getName

🌙4 变量规则

🔫4.1 未声明变量直接使用

console.log(x); 
// ReferenceError: x is not defined

上面代码直接使用变量x，系统就报错，告诉你变量x没有声明。

🔫4.2 省略 var 关键字

a = 30;
console.log(a); //30

在javascript中变量可以省略 var关键字直接调用或者赋值，解释器会帮我们隐式声明变量

但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。

🔫4.3 重复赋值

var x = 10;
x = 20;
console.log(x); //20
解释为 
var x;
x = 10;
x = 20;
console.log(x);

x 一开始声明并且赋值为10 后面如果想要修改x的值不需要重新声明直接再次赋值20 覆盖之前x的值内容即可

🔫4.4 重复声明

var x = 1;
var x;
console.log(x); //1
解释为 
var x; 
x = 1;
console.log(x);

对同一个变量进行二次声明第二次声明是无效的操作因为同一个环境中变量名是唯一的;

🔫4.5 重复声明赋值

var x = 1;
var x = 2;
console.log(x); //2
解释为
var x;
x = 1;
x = 2;
console.log(x);

结合上一个重复声明, 当重复声明且赋值的时候, 第二行的声明无效但赋值操作有效所以变量 x 的值由1 覆盖为 2

🔫4.6 批量声明

var a,b,c,d = 10;
解释为
var a;
var b;
var c;
var d;
d = 10;

在上面的代码中我们可以通过 , 隔开多个变量, 通过一个 var 关键字进行批量声明 , 最后一个变量 d 赋值为10;

🔫4.7 变量提升

console.log(num); //undefined
var num = 10;

上面的这个代码中我们书写语句的顺序是

调用了 num 进行打印
声明了变量 num 并且赋值 10

实际在javascript引擎解释后顺序为

var num;
console.log(num); //undefined
num = 10;

先声明 num 这一步称为 变量提升
调用console.log() 打印 num的值这时因为没有给num赋值 num的值还是初始默认值 undefined
给num 赋值为 10

🌙5 注释

在javascript也会频繁用到注释注释形式有两种

// 这是单行注释 ctrl+/
/* 
  这是
  多行
  注释 
  ctrl+shift+/
*/

JavaScript 启蒙之旅：探索编程世界的起点与基石