本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
因为我是后端程序员，所以学前端有些知识是相通的，所以在我学习JavaScript的时候有些内容我会直接跳过，只会记下一些JavaScript特有的东西。
1、初始JavaScript
1.1 JavaScript 是什么
布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。
1.1 JavaScript 是什么
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程
1.2 JavaScript 的作用
表单动态校验（密码强度检测） （ JS 产生最初的目的 ） 网页特效 服务端开发(Node.js) 桌面程序(Electron) App(Cordova) 控制硬件-物联网(Ruff) 游戏开发(cocos2d-js)
1.3 浏览器执行 JS 简介
浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
当浏览器读到一行JS代码时，就会翻译一句JS代码。
逐行翻译成机器语言然后计算机才能执行。
*/
alert('哈啊哈哈哈');
</script>
</head>
<body>
</body>
</html>
1.4 JS 的组成
1.5 JS 的组成
1、ECMAScript
2、 DOM ——文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
3.、BOM ——浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.6 JS 初体验
可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差， 在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用
可以将多行JS代码写到
2、JavaScript注释
3、JavaScript输入输出语句
测试prompt：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
prompt输入测试
注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
*/
prompt('请输入您的年龄：');
</script>
</head>
<body>
</body>
</html>
alert测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
prompt输入测试
注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
*/
// prompt('请输入您的年龄：');
/*
alert输出测试
注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
*/
alert('哈哈哈');
</script>
</head>
<body>
</body>
</html>
console.log测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
console.log输入测试
console是控制台输出的意思，给程序员测试使用的
注意在HTML文件中我们写单引号，在JS中我们使用双引号，这是规范
*/
console.log('给程序员看的');
</script>
</head>
<body>
</body>
</html>
运行程序，按F12打开浏览器调试工具，在console中查看打印的日志：
变量
有编程基础的同学只要知道var是JavaScript中的数据类型就行了。
在JavaScript中，var数据类型表示所有的数据类型，比如字符类型整形类型在JavaScript中都用var表示。
数据类型
1.3数据类型的分类
JS 把数据类型分为两类： 简单数据类型 （Number,String,Boolean,Undefined,Null） 复杂数据类型 （object)
2.1 简单数据类型（基本数据类型）
JavaScript 中的简单数据类型及其说明如下：
2.3字符串型String
字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''。
注意不能没有引号，没有引号会被认为是js代码而引起报错。
同时，因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11
4. 字符串拼接
多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加" alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
+ 号总结口诀：数值相加 ，字符相连
2.5 布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
2.6 Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
3. 获取变量数据类型
3.1 获取检测变量的数据类型 typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number
4. 数据类型转换
4.1 什么是数据类型转换 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变 量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。 我们通常会实现3种方式的转换： 转换为字符串类型 转换为数字型 转换为布尔型
4.2 转换为字符串
toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。
4.3 转换为数字型（重点）
注意 parseInt 和 parseFloat 单词的大小写，这2个是重点，另外两个了解就行
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
解释型语言和编译型语言
- 概述
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行
程序。程序语言翻译成机器语言的工具，被称为翻译器。
翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同 编译器是在代码执行之前进行编译，生成中间代码文件 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
2、算数运算符
4、比较运算符
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
4.2 等于号总结
console.log(18 == '18');//返回true
console.log(18 === '18'); //返回false
