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、浏览器等等，帮忙大家学习提高。