共计 6561 个字符，预计需要花费 17 分钟才能阅读完成。
JavaScript 背景
Web 前端有三层：
- HTML：从语义的角度，形容页面 构造
- CSS：从审美的角度，形容 款式（丑化页面）
- JavaScript：从交互的角度，形容 行为（实现业务逻辑和页面管制）
倒退历史
JavaScript 诞生于1995 年。布兰登 • 艾奇（Brendan Eich，1961 年～），1995 年在网景公司，开发除了 JavaScript 语言。
JavaScript 是由 网景 公司（Netscape）创造，最后命名为 LiveScript；1995 年 12 月与 SUN 公司单干，因市场宣传须要，改名为 JavaScript。
起初 Sun 公司 被 Oracle 收买，JavaScript 版权归 Oracle 所有。
备注：因为过后 Java 这个语言特地火，所以为了傍大牌，就改名为 JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同期间还有其余的网页语言，比方 VBScript、JScript 等等，然而起初都被 JavaScript 战胜了，所以当初的浏览器中，只运行一种脚本语言就是 JavaScript。
1996 年，微软为了抢占市场，推出了 JScript 在 IE3.0 中应用。
1996 年 11 月网景公司将 JS 提交给 ECMA(国际标准化组织)成为国际标准，用于反抗微软。
JavaScript 是世界上用的最多的 脚本语言。
JavaScript 的倒退：方兴未艾
2003 年之前，JavaScript 被认为“牛皮鲜”，用来制作页面上的广告，弹窗、沉没的广告。什么货色让人烦，什么货色就是 JavaScript 开发的。所以很多浏览器就推出了屏蔽广告性能。
2004 年，JavaScript 命运开始扭转。那一年，谷歌公司开始带头应用 Ajax 技术，Ajax 技术就是 JavaScript 的一个利用。并且，那时候人们逐步开始晋升用户体验了。Ajax 有一些利用场景。比方，当咱们在百度搜寻框搜文字时，输入框下方的智能提醒，能够通过 Ajax 实现。比方，当咱们注册网易邮箱时，可能及时发现用户名是否被占用，而不必调到另外一个页面。
2007 年乔布斯公布了第一款 iPhone，这一年开始，用户就多了上网的路径，就是用挪动设施上网。JavaScript 在挪动页面中，也是不可或缺的。并且这一年，互联网开始标准化，依照 W3C 规定三层拆散，JavaScript 越来越被器重。
2010 年，人们更加理解HTML5 技术，HTML5 推出了一个货色叫做 Canvas（画布），工程师能够在 Canvas 上进行游戏制作，利用的就是 JavaScript。
2011 年，Node.js 诞生，使 JavaScript 可能开发服务器程序了。
现在，WebApp曾经十分风行，就是用 网页技术开发手机利用。手机零碎有 iOS、安卓。比方公司要开发一个“携程网”App，就须要招聘三队人马，比方 iOS 工程师 10 人，安卓工程师 10 人，前端工程师 10 人。共 30 人，开发成本大；而且如果要改版，要改 3 个版本。当初，假如公司都用 web 技术，用 html+css+javascript 技术就能够开发 App。也易于迭代（网页一扭转，所有的终端都变了）。
尽管目前 WebApp（Web 利用）在性能和性能上的体验远不如 Native App（原生利用），然而“在原生 App 中内嵌一部分 H5 页面”曾经是一种趋势。
JavaScript 介绍
入门易学性
- JavaScript 对初学者比拟敌对、简略易用。能够应用任何文本编辑工具编写，只须要浏览器就能够执行程序。
- JavaScript 是有界面成果的（相比之下，C 语言只有白底黑字）。
- JavaScript 是 弱变量类型 的语言，变量只须要用 var/let/const 来申明。而 Java 中变量的申明，要依据变量的类型来定义。
比方 Java 中须要定义如下变量：
int a;
float a;
double a;
String a;
boolean a;而 JavaScript 中，只须要用一种形式来定义：
// ES5 写法
var a;
// ES6 写法
const a;
let a;JavaScript 是前端语言
JavaScript 是前端语言，而不是后盾语言。
JavaScript 运行在用户的终端网页上，而不是服务器上，所以咱们称之为“前端语言”。就是服务于页面的交互成果、丑化，不能操作数据库。
后盾语言 是运行在服务器上的，比方 PHP、ASP、JSP 等等，这些语言都可能操作数据库，都可能对数据库进行“增删改查”操作。
备注：Node.js 是用 JavaScript 开发的，当初也能够基于 Node.js 技术进行服务器端编程。
JavaScript 的组成
JavaScript 根底分为三个局部：
- ECMAScript：JavaScript 的 语法规范。包含变量、表达式、运算符、函数、if 语句、for 语句等。
- DOM：Document Object Model（文档对象模型），操作 页面上的元素 的 API。比方让盒子挪动、变色、扭转大小、轮播图等等。
- BOM：Browser Object Model（浏览器对象模型），操作 浏览器局部性能 的 API。通过 BOM 能够操作浏览器窗口，比方弹框、管制浏览器跳转、获取浏览器分辨率等等。
艰深了解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS 提供的 API。
JavaScript 的特点
特点 1：解释型语言
JavaScript 是解释型语言，不须要当时被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。
什么是「解释型语言」？详见下一段。
因为少了实现编译这一步骤，所以解释型语言开发起来尤为不便，然而解释型语言运行较慢也是它的劣势。不过解释型语言中应用了 JIT 技术，使得运行速度得以改善。
特点 2：单线程
特点 3：ECMAScript 规范
ECMAScript 是一种由 ECMA 国内（前身为欧洲计算机制造商协会, 英文名称是 European Computer Manufacturers Association）制订和公布的脚本语言标准。
JavaScript 是由公司开发而成的，问题是不便于其余的公司拓展和应用。所以欧洲的这个 ECMA 的组织，牵头制订 JavaScript 的规范，取名为 ECMAScript。
简略来说，ECMAScript 不是一门语言，而是一个规范。ECMAScript 规定了 JS 的编程语法和根底外围常识，是所有浏览器厂商独特恪守的一套 JS 语法工业规范。
ECMAScript 在 2015 年 6 月，公布了 ECMAScript 6 版本（ES6），语言的能力更强（也蕴含了很多新个性）。然而，浏览器的厂商不会那么快去追上这个规范，须要工夫。
编程语言的分类
翻译器
计算机不能间接了解任何除机器语言以外的语言，所以必须要把程序员所编写的语言翻译成机器语言，计算机能力执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
由此可见，所谓的“翻译”，指的是翻译成计算机可能执行的指令。
翻译器翻译的形式有两种：一种是 编译 ，另一种是 解释 。两种形式之间的区别在于 翻译的机会 不同。
- 编译器：在代码执行之前，事先把所有的代码一次性翻译好，生成中间代码文件，而后整体执行。
- 解释器：边翻译，边执行（在代码执行时进行及时翻译，并立刻执行）。当编译器以解释的形式运行时，也称之为解释器。
对应的语言，称之为“编译型语言”、“解释型语言”。
编译型语言
- 定义：当时把所有的代码一次性翻译好，而后整体执行。
- 长处：运行更快。
- 有余：移植性不好，不跨平台。
- 编译型语言举例：c、c++
比如说，c 语言的代码文件是 .c 后缀，翻译之后文件是 .obj 后缀，零碎执行的是 obj 文件；再比方，java 语言的代码文件是 .java 后缀，翻译之后的文件是 .class 后缀。（留神，Java 语言不是严格的 编译型语言，这个一会儿会讲）
解释型语言
- 定义：边翻译边执行（翻译一行，执行一行），不须要当时一次性翻译。
- 长处：移植性好，跨平台。
- 毛病：运行更慢。
- 解释型语言举例：JavaScript、php、Python。
Java 语言
Java 语言既不是编译型语言，也不是解释型语言。翻译过程：
（1）编译：.java代码文件先通过 javac 命令编译成 .class 文件。
（2）执行：.class文件再通过 jvm 虚拟机，解释执行。有了 jvm 的存在，让 java 跨平台了。
开始写第一行 JavaScript 代码
JavaScript 代码的书写地位在哪里呢？这个问题，也能够了解成：引入 js 代码，有哪几种形式。
形式 1：行内式
代码举例：
<input type="button" value="点我点我" onclick="alert(' 千古壹号 ')" />残缺的可执行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="点我点我" onclick="alert(' 千古壹号的形式 1')" />
</body>
</html>剖析：
- 能够将单行或大量 JS 代码写在 HTML 标签的事件属性中（以 on 结尾的属性），比方放在下面的
onclick点击事件中。 - 这种书写形式，不举荐应用，起因是：可读性差，尤其是须要编写大量 JS 代码时，容易出错；引号多层嵌套时，也容易出错。
- 对于代码中的「引号」，在 HTML 标签中，咱们举荐应用双引号, JS 中咱们举荐应用单引号。
形式 2、内嵌式
咱们能够在 html 页面的 <body> 标签里放入 <script type=”text/javascript”></script> 标签对儿，并在 <script> 里书写 JavaScript 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 在这里写 js 代码
alert('千古壹号的形式 2');
console.log('qianguyihao 形式 2');
</script>
</body>
</html>剖析：
- text 示意纯文本，因为 JavaScript 也是一个纯文本的语言。
- 能够将多行 JS 代码写到
<script>标签中。 - 内嵌式 JS 是学习时罕用的形式。
形式 3：引入内部的 JS 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入内部的 js 文件 -->
<script src="tool.js"></script>
</body>
</html>下面这段代码，仍然是放到 body 标签里，能够和内嵌的 js 代码并列。
另外，援用内部 JS 文件的 script 标签两头不能够再写代码。
总结：
咱们在实战开发中，根本都是采纳形式 3，因为这种形式，能够确保 html 文件和 js 文件是离开的，有利于代码的结构化和复用。很少会有人把一大堆 js 代码塞到 html 文件里。
JS 一些简略的语法规定
学习程序，是有法则可循的，程序会有有雷同的局部，这些局部就是一种规定，不能更改，咱们成为：语法。
（1）JavaScript 对换行、缩进、空格不敏感。每一条语句以分号结尾。
代码一：
<script type="text/javascript">
alert("明天蓝天白云");
alert("我很快乐");
</script>等价于代码二：
<script type="text/javascript">
alert("明天蓝天白云");alert("我很快乐");
</script>备注：每一条语句开端要加上分号，尽管分号不是必须加的，如果不写分号，浏览器会主动增加，然而会耗费一些系统资源。
（2）所有的符号，都是英语的。比方 括号、引号、分号。
如果你用的是搜狗拼音，倡议不要用 shift 切换中英文（能够在搜狗软件里进行设置），不然很容易输出中文的分号；倡议用 ctrl+space 切换中英文输入法。
（3）严格辨别大小写。
正文
咱们不要把 HTML、CSS、JavaScript 三者的正文格局搞混同了。
HTML 的正文
<!-- 我是正文 -->CSS 的正文
<style type="text/css">
/*
我是正文
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>留神：CSS 只有 /* */ 这种正文，没有 // 这种正文。而且正文要写在 <style> 标签外面才算失效哦。
JavaScript 的正文
单行正文：
// 我是正文
多行正文：
/*
多行正文 1
多行正文 2
*/
补充：VS Code 中，单行正文的快捷键是「Ctrl + /」，多行正文的默认快捷键是「Alt + Shift + A」。
当然，如果你感觉多行正文的默认快捷键不不便，咱们还能够批改默认快捷键。操作如下：
VS Code –> 首选项 –> 键盘快捷方式 –> 查找“正文”这两个字 –> 将原来的快捷键批改为「Ctrl + Shift + /」。
Javascript 输入输出语句
弹出正告框：alert 语句
咱们要学习的第一个语句，就是 alert 语句。
代码举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
alert('千古壹号');
</script>
</body>
</html>alert（英文翻译为“警报”）的用处：弹出“正告框”。
alert("")正告框的成果如下：
这个正告框，在 IE 浏览器中长这样：
下面的代码中，如果写了两个 alert()语句的话，网页的成果是：弹出第一个正告框，点击确定后，持续弹出第二个正告框。
控制台输入：console.log(“”)
console.log("")示意在控制台中输入。console 示意“控制台”，log 示意“输入”。
在 Chrome 浏览器中，按 F12 即可关上控制台，抉择「console」栏，即可看到打印的内容。
console.log("")成果如下：
控制台是工程师、程序员调试程序的中央。程序员常常应用这条语句输入一些货色，来测试程序是否正确。
普通人是不会在意控制台的，然而有些网站另藏玄机。有个很有意思的中央是，百度首页的控制台，悄悄地放了一段招聘信息：
毕竟做前端的人是常常应用控制台的。
总结：alert() 次要用来显示音讯给用户，console.log() 用来给程序员本人调试用的。
弹出输入框：prompt()语句
prompt()就是专门用来弹出可能让用户输出的对话框。用得少，测试的时候偶然会用。
JS 代码如下：
var a = prompt("请轻易输出点什么货色吧");
console.log(a);上方代码中，用户输出的内容，将被传递到变量 a 外面，并在控制台打印进去。
成果如下：
prompt()语句中，用户不论输出什么内容，都是字符串。
alert()和 prompt()的区别：
- alert() 能够间接应用。
- prompt() 会返回用户输出的内容。咱们能够用一个变量，来接管用户输出的内容。
最初
说个题外话，我在一线互联网企业工作十余年里，领导过不少同行后辈。帮忙很多人失去了学习和成长。
我意识到有很多教训和常识值得分享给大家，也能够通过咱们的能力和教训解答大家在 IT 学习中的很多困惑，所以在工作忙碌的状况下还是保持各种整顿和分享。
我能够将最近整顿的前端面试题收费分享进去，其中蕴含 HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，帮忙大家学习提高。