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

---

---

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

个人专栏：JavaScript 精粹

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

---

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

---

---

✍JavaScript概述

🌙1 前言

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

在JavaScript诞生初期，资深开发者对其多有批评，称其“四不像”，融合了多种编程范式；“无规范”，早期版本缺乏统一标准；“兼容性差”，不同浏览器支持不一；且被视为“不精准”，因动态类型及隐式转换；更有“半成品”之称，暗示设计未臻完善。有人甚至称其为“糟糕”或“玩具胶水语言”。但这些评价多基于早期版本及技术环境，JavaScript之父布兰登·艾奇也曾反思并表达改进意愿。

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

Ruby的设计者松本行弘（Yukihiro “Matz” Matsumoto）曾就发出这样的感慨：

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

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 影响，但在类型系统上却摒弃了 Java 的静态类型特性。正是鉴于其与 Java 显著的相似性，这门原本名为 LiveScript 的语言最终被命名为 JavaScript，寓意为“仿若 Java 的脚本语言”。JavaScript 独树一帜之处，在于其函数被视作独立的数据类型，并采用了基于原型对象（prototype）的继承机制，这两点显著区别于 Java 的语法体系。JavaScript 的语法设计更加灵活宽松，相较于 Java 而言。

此外，执行机制上，Java 需要预先编译，而 JavaScript 则是由解释器在运行时直接执行，赋予了其即时的反馈与灵活性。

JavaScript 的初衷是打造一门轻量级、简洁的动态语言，同时保持与 Java 的足够相似性，以便于用户（特别是 Java 背景的开发者）能够快速掌握并应用。

🌙2 什么是JavaScript?

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

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

1. 在前端技术栈中，JavaScript的完整体系通常涵盖以下几个核心组成部分：

• ECMAScript，它定义了JavaScript语言的语法规则和基础对象库，是JavaScript的基石。
• 文档对象模型（DOM），这是一套用于操作网页内容的方法与接口集合，允许JavaScript对HTML文档进行动态修改。
• 浏览器对象模型（BOM），它提供了一套与浏览器交互的接口，使得JavaScript能够控制浏览器窗口、导航以及历史记录等功能。

2. JavaScript的基本特性可概括如下：

• 它是一种解释执行的脚本语言，意味着代码在执行时由解释器逐行分析并运行，无需预编译过程。
• JavaScript主要用于为HTML页面增添交互性，使得网页能够响应用户的操作，提升用户体验。
• 该语言可以直接嵌入HTML文档中，但为了保持内容与行为的清晰分离，推荐将JavaScript代码写入独立的.js文件中。

3. JavaScript在日常开发中常被用于执行以下任务：

• 在HTML页面中动态插入文本内容，实现内容的实时更新。
• 监听并响应浏览器事件，如点击、滚动、键盘输入等。
• 读取和修改HTML元素，如修改样式、添加或删除元素等。
• 在数据提交至服务器之前，进行前端验证，确保数据的准确性和合法性。
• 探测并获取访问者的浏览器信息，以便进行适配和优化。

🔫2.1 BOM - 浏览器对象模型

BOM，作为一套专门用于操作浏览器功能的API集合，赋予了开发者对浏览器窗口进行各种操作的能力，包括但不限于弹出对话框、控制页面跳转、获取屏幕分辨率等。

🔫2.2 DOM - 文档对象模型

DOM则是一套专注于操作页面元素的API体系。它将HTML文档视为一个由节点组成的树状结构，允许开发者通过DOM提供的丰富API来遍历、添加、修改或删除这些节点，从而实现对页面内容的动态控制。

🌙3 JavaScript 与 Java 的渊源

实质上，JavaScript与Java在语言层面上并无直接联系。JavaScript的诞生源于网景公司与Sun公司的合作，旨在打造一种适用于Web端的脚本语言。尽管JavaScript在语法和对象体系上借鉴了Java的某些元素，但它并未采纳Java的静态类型系统。除此之外，两者在语言特性上大相径庭。出于商业推广的考虑，这门语言从最初的LiveScript更名为JavaScript。

🌙4 JavaScript与ECMAScript的紧密联系

ECMAScript专注于标准化JavaScript语言的基本语法结构，而与具体部署环境相关的标准则由其他组织如W3C（World Wide Web Consortium）负责制定，如DOM标准。简言之，ECMAScript是JavaScript的规范标准，而JavaScript则是ECMAScript标准的一种具体实现。在日常交流中，这两个术语常被互换使用。

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

🌙5 JavaScript的无限可能

Atwood定律深刻揭示了JavaScript的未来趋势：“任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现。”这充分说明了JavaScript在现代Web开发中的核心地位及其广泛的应用前景。

5.1 前端领域的基石

自Ajax技术横空出世以来，JavaScript在WEB领域奠定了其不可撼动的地位，成为现代WEB项目不可或缺的核心基石。它广泛应用于：

• 数据交互：实现前端与服务器之间的无缝数据流通。
• UI管理：动态地管理UI界面，提升用户体验。
• 用户行为交互：捕捉用户行为并作出即时响应。
• 数据校验：确保前端数据的准确性与完整性。
• 工程化/模块化：提升代码的可维护性与可扩展性。
• MVVM框架：实现视图与数据的双向绑定，简化开发流程。

5.2 后端领域的突破

V8 JIT引擎与NodeJS的完美结合，让JavaScript在服务端大放异彩，彻底打破了其局限于浏览器的传统观念。同时，基于JSON格式的NoSQL数据库如MongoDB、CouchDB等的发展，为JavaScript在数据库操作方面提供了更广阔的空间。具体应用场景包括：

• 高效的WEB服务框架：如express、KOA等，助力开发者快速搭建稳定的服务端应用。
• 灵活的NoSQL数据库操作：MongoDB、CouchDB等数据库让数据存储与查询更加便捷。
• 博客系统的构建：利用Ghost、hexo等框架，轻松打造个性化的博客平台。
• 自动化构建工具：Gulp、Grunt等工具助力开发者实现自动化构建与部署。

5.3 APP开发的多样性

在APP开发领域，JavaScript以其独特的优势展现了其多样性与灵活性。无论是Native App、Web App还是Hybrid App，JavaScript都能找到其发挥的舞台：

• Web App：利用HTML5框架开发跨平台应用，实现一次开发，多平台运行。
• Hybrid App：结合原生与Web技术的混合模式，兼具原生应用的性能与Web应用的灵活性。
• PWA（Progressive Web App）：打造高性能、离线可用的网页应用，为用户提供接近原生应用的体验。

5.4 桌面应用的创新

JavaScript在桌面应用开发领域同样展现出其强大的生命力。主要框架包括electron、Node-webkit、hex以及React Native for Desktop等，它们催生了诸多知名应用：

• electron经典案例：如vscode、atom等，成为开发者喜爱的开发工具。
• Node-webkit代表作：如teambition等应用，展现了其在桌面应用领域的独特魅力。
• hex实现的应用：如有道词典等，为用户提供便捷的桌面服务。

5.5 图形与游戏开发的广阔天地

JavaScript在游戏开发领域同样表现出色。它支持世界上最流行的2D游戏引擎Cocos2d以及3D游戏引擎Unity3D的JS开发模式。此外，Cocos2d-js作为轻量级跨平台的Web游戏引擎，更是为JS游戏开发者提供了无限可能。无论是开发休闲小游戏还是大型网络游戏，JavaScript都能助你一臂之力。

5.6 嵌入式与IoT开发的未来趋势

JavaScript的应用领域还在不断扩展。如今，它已深入物联网（IoT）等前沿领域。JavaScript for Microcontrollers and IoT等相关技术的发展，正引领着JavaScript在嵌入式系统与物联网领域的创新应用。未来，随着技术的不断进步和应用的不断深化，JavaScript必将在更多领域展现出其独特的价值与魅力。

物联网; JavaScript for Microcontrollers and IoT

🌙6 探索JavaScript：为何它是互联网开发的必备技能？

JavaScript，以其上手便捷、表达灵活、社区支持度高以及应用广泛等特点，已成为当今最受欢迎且应用最广泛的语言之一。在现实职场中，几乎找不到不依赖JavaScript开发岗位的企业，它已成为互联网开发领域不可或缺的基石。

🌙7 搭建你的JavaScript开发环境：所需设备与工具全解析

要开始学习JavaScript，你需要准备以下基本环境与设备：

• 一台可运行浏览器的电脑：这是进行网页开发和测试的基础。
• 浏览器：用于预览和调试你的JavaScript代码效果。
• 开发工具（推荐）：Visual Studio Code (VSCode)，一款轻量级但功能强大的代码编辑器，特别适合前端和后端开发。

🌙8 心理准备：迎接JavaScript学习之旅的挑战与乐趣

无论你之前是否有过其他编程语言的学习经验，学习JavaScript时，都需要做好以下几点心理准备：

• 打破常规认知：JavaScript的世界有着其独特的规则，比如你可能会遇到3 < 2 < 1（在JavaScript中由于运算符优先级，这会先计算2 < 1得到false，再计算3 < false，因JavaScript中会将false转换为0，所以结果为true，但这并非直观理解的数学比较）或0.2 + 0.7 !== 0.9（由于浮点数运算的精度问题）等看似不合常理的情况。
• 实践出真知：一切理论都需建立在实践之上，通过编写代码、调试问题来加深对JavaScript语言特性的理解。
• 坚持不懈的练习：编程能力的提升离不开大量的实践。记住，“多练”是学习编程的不二法门，只有通过不断的练习，才能真正掌握JavaScript的精髓。

---

---

✍JavaScript基础

🌙1 在HTML文档中整合JavaScript代码

<html>  
    <head>  
        <script src="scripts/app.js"></script> <!-- 修改文件名以展示不同路径 -->  
    </head>  
    <body>  
        <!-- 使用内联JavaScript触发弹窗 -->  
        <button onclick="showMessage()">点击我</button>  
          
        <script>  
            // 定义一个函数来展示消息  
            function showMessage() {  
                alert('你好，世界！');  
            }  
  
            // 直接在控制台打印一条信息  
            console.log('JavaScript 已加载并执行');  
        </script>  
    </body>  
</html>

🌙2 初探JavaScript代码示例

// 定义一个变量并存储字符串  
let greeting = '你好，JavaScript!';  
console.log(greeting); // 输出: 你好，JavaScript!

🌙3 JavaScript核心概念入门

// 使用let声明变量，并计算两个数的和  
let sum = 2 + 3;

🔫3.1 语句详解

JavaScript语句按顺序逐行执行，每行代表一个独立的操作或命令。每条语句的末尾通常以分号(;)结束，表示该语句的结束和下一语句的开始。

🔫3.2 表达式的奥秘

在上述代码中，2 + 3就是一个表达式，它执行了一个数学运算并返回结果。表达式是编程语言中用于表示值、变量、操作符等的组合，其结果通常用于赋值、条件判断或函数参数等。在上述例子中，表达式2 + 3的结果被赋值给了变量sum

3.3 变量概念

在上述示例中，greeting 是我们声明的变量。变量可以视作一个容器，用于存储各种值。为了存储不同类型的值，我们需要为变量命名。greeting 就是上述例子中的变量名。

3.4 变量声明与赋值

在上述例子中，我们通过表达式 'Hello, World!' 得到的字符串值，赋值给了通过 let 关键字声明的 变量 greeting。这个过程实际上包含了两个步骤：

1. 我们使用 关键字let 创建了变量 greeting。
2. 我们将 'Hello, World!' 这个字符串值赋值给了变量 greeting，使得 greeting 所引用的内存地址中存储了这个字符串值。

// 声明变量，变量名为greeting，没有立即赋值，此时其值为undefined  
let greeting;  
// 将字符串 'Hello, JavaScript!' 赋值给变量greeting  
greeting = 'Hello, JavaScript!';

🔫3.5 变量赋值详解

我们可以通过 let 或 var（尽管在现代JavaScript中推荐使用let或const以提供更清晰的作用域控制）关键字创建一个变量。新创建的变量默认值为 undefined，表示未定义。我们可以通过赋值表达式 = 来给变量存储具体的值，格式如下：

变量名称 = 值;

🔫3.6 变量引用

学会了如何创建变量以及给变量赋值后，我们接下来看如何使用这些变量。

// 使用console.log方法在控制台中打印greeting变量的值  
console.log(greeting);  
// 将变量greeting的值与字符串'!'拼接，并将结果赋值给新变量greetingWithExclamation  
let greetingWithExclamation = greeting + '!';

🔫3.7 标识符 ( 变量名称 )

标识符（identifier）是用于识别各种值的合法名称。最常见的标识符包括变量名和函数名。JavaScript语言的标识符对大小写敏感，因此greeting和Greeting被视为两个不同的标识符。

🍂3.7.1 命名规则

以下是必须遵守的命名规则，不遵守将导致错误：

标识符必须由字母、数字、下划线（_）或美元符号（$）组成，且不能以数字开头。
标识符不能是JavaScript的保留关键字，如：let、class、function等。

保留关键字:

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;

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

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

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

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

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

🌙5 注释

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

// 这是单行注释 ctrl+/

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

---

---

(注：
本文部分数据摘自：
github Octoverse 调查报告
stackoverflow 2019年度调查报告

---