一、JavaScript简介
1、JavaScript历史背景
布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。
刚开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
2、JavaScript和ECMAScript的关系
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就轻而易举了。
ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快去追上这个标准。
《ECMAScript 6 入门》 – 阮一峰 http://es6.ruanyifeng.com/
3、JavaScript的发展：蒸蒸日上
http://2004.sina.com.cn/
http://2008.sina.com.cn/
http://2012.sina.com.cn/
上面三个网站可以感受一下网页技术的发展。
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在功能和性能上的体验远不如Native App，但是“WebApp慢慢取代Native App”很有可能是未来的趋势。
4、JavaScript入门易学性
JavaScript对初学者比较友好。
JavaScript是有界面效果的（比如C语言只有白底黑字）。
JavaScript是弱变量类型的语言，变量只需要用var来声明。而Java中变量的声明，要根据变量的类型来定义。
比如Java中需要定义如下变量：
int a; float a; double a; boolean a;
而JavaScript中，只用定义一个变量：
var a;
JavaScript不用关心其他的一些事情（比如内存的释放、指针等），更关心自己的业务。
5、JavaScript是前台语言
JavaScript是前台语言，而不是后台语言。
JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，就是服务于页面的交互效果、美化、绚丽、不能操作数据库。
后台语言是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。Node.js除外。
6、JavaScript的组成
JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
7、JavaScript的特点
（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。
（3）基于对象：内置大量现成对象，编写少量程序可以完成目标。
二、第一个JavaScript代码
1、js引入
a、在页面中，我们可以在body标签中放入如下标签对儿：
b、引入js文件：
2、语法规则
学习程序，是有规律可循的，程序要遵循一定的准则，这个准则就是：语法。
（1）JavaScript对换行、缩进、空格不敏感；
注意：每一条语句末尾都要加上分号，虽然分号不是必须加的，但为了程序今后要压缩，如果不加分号，压缩之后将不能运行。
（2）所有的符号，都是英语的，比如括号、引号、分号；
（3）JavaScript的注释：
a、单行注释： // 我是注释
b、多行注释： /* 多行注释 */
注意：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。
3、JavaScript中输出信息的写法
（1）弹出警告框：alert语句
（2）控制台输出：console.log()
console表示“控制台”，log表示“输出”，控制台在Chrome浏览器的F12中，控制台是程序员调试程序的地方，程序员经常使用这条语句输出一些东西，来测试程序是否正确。
（3）用户输入：prompt()语句
prompt()就是专门用来弹出能够让用户输入对话框，代码如下：
上方代码中，用户输入的内容，将被传递给变量a。
prompt()语句中，用户不管输入什么内容，都是字符串类型。
（4）alert和prompt的区别：
alert(“从前有座山”); // 直接使用，不需要变量 var a = prompt(“请输入一个数字”); // 必须用一个变量来接收用户输入的值
4、变量
（1）变量的声明和赋值
var a = 100;
var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”。
定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
变量名：我们可以给变量取的名字。
注意：
a、在JavaScript中，永远都是用var来声明变量，这和C、Java等语言不同(有兴趣的同学可以看一下es6)；
b、变量要先定义，才能使用，比如，我们不设置变量，直接输出的话，控制台将会报错，一般有经验的程序员，会把声明和赋值写在一起，比如：var a = 10; // 声明，并且赋值10
（2）变量的命名规范
a、变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
b、下列的单词，叫做保留字，就是说不允许当做变量名，不用记：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、 implements、import、int、interface、long、native、package、private、protected、public、short、static、super、 synchronized、throws、transient、volatile
c、大写字母是可以使用的，并且大小写敏感，也就是说A和a是两个变量。
（3）变量的类型
变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。
a、数值型：number
如果一个变量中存放了数字，那么这个变量就是数值型的，如下示例：
var a = 100; // 定义了一个变量，并且赋值100
console.log(typeof a); // 输出a变量的类型，typeof()表示“获取变量的类型”
PS：在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。
b、字符串型：string
用单引号或者双引号括起来的字符，如下示例：
var a = "abcde"; var b = '路飞'; var c = "123123"; var d = ""; // 空字符串 console.log(typeof a,typeof b,typeof c,typeof d); // string string string string
c、连字符和加号的区别
键盘上的“+”可能是连字符，也可能是数字的加号，如下：
console.log("我" + "爱" + "你"); // 连字符，把汉字连在一起，输出：我爱你 console.log("我+爱+你"); // 原样输出：我+爱+你 console.log("我"+512) // 输出：我512 console.log(1+2+3); // 先计算并输出结果，输出：6 总结：如果加号两边都是数值，此时是加。否则就是连字符（用来连接字符串）。
（4）变量值的传递（赋值）
语句：a = b; // 把b的值赋给a，b值不变
（5）变量格式的转换
parseInt()可以将字符串转成数字，例如：parseInt(“5”)；
parseInt()还具有以下特性：
a、带有自动净化的功能：只保留字符串最开头的数字，后面的中文自动消失，例如：
console.log(parseInt("2018你真帅！！")); // 输出：2018 b、带有自动截断小数的功能：取整，不是四舍五入，例如：
var a = parseInt(5.8) + parseInt(4.7); console.log(a); // 输出：9 var a = parseInt(5.8 + 4.7); console.log(a); // 输出：10
三、数据类型
数据类型包括：基本数据类型 和 引用数据类型；
基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象；
当我们把值赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值；
1、基本数据类型
a、number
var a = 123; console.log(typeof a) // 输出：number // 特殊情况:Infinity（无限大）是 number类型 var a1 = 5/0; console.log(a1) // Infinity console.log(typeof a1) // number
b、string
var str = '123' console.log(typeof str) // string
c、boolean
var b1 = false; console.log(typeof b1) // boolean
d、null
var c1 = null; // 空对象 console.log(typeof c1) // object
e、undefined
var d1; // 只声明未赋值表示变量未定义 console.log(typeof d1) // undefined
2、引用数据类型
引用数据类型有以下几种，后面再来介绍。
Function
Object
Arrray
String
Date
四、运算符
1、赋值运算符
=、+=、-=、*=、/=、%=
2、算数运算符
+、-、*、/、%、++、--
3、比较运算符
==、===（等同于：值和类型均相等）、!=、!==、>、<、>=、<=
注意：==（!=）比较的是值, ===（!==）比较的是值和数据类型，例如：
var s = '1'; var n = 1; console.log(s == n); // true console.log(s === n); // false
4、字符串拼接和字符串运算的特殊情况
a、字符串类型的数值 和 数值类型相减 结果是数值，例如：
var a = "3"; var b = 2; console.log(a - b); // 1
b、NaN（not a number）是一个number类型
var b1 = 'one'; var b2 = 'two'; ret = b1 * b2 console.log(ret, typeof(ret)) // NaN number
c、字符串拼接
var name = '伊拉克'; var am = '美军'; // 字符串拼接 var str = "3月20日,"+name+"战争爆发，以"+am+"为主的联合部队击溃了军队。"; console.log(str); // es6的模块字符串，tab键上面的反引号``， 添加变量使用${变量名} var str1 = `3月20日,${name}战争爆发，以${am}为主的联合部队击溃了军队。`; console.log(str1); 五、数据类型转换
语言中我们的数据类型有很多，在某个页面中展示的数据类型也不同，比如说电话号码就要求number类型，而姓名就要求string类型的。那么在适当的情况下我们可以将数据类型进行转换。
1、将数值类型转换成字符串类型
a、隐式转换
var n1 = 123; var n2 = '123'; var n3 = n1 + n2; console.log(n3) // 123123 console.log(typeof n3); // string
b、强制类型转换：String()、.toString()
var n1 = 123; var str1 = String(n1); console.log(str1, typeof str1); // 123 string var num = 234; str2 = num.toString() console.log(str2, typeof str2) // 234 string
2、将字符串类型转换成数值类型：Number()、parseInt()、parseFloat()
var stringNum = '789.123wadjhkd'; var str = '666' console.log(Number(stringNum), Number(str)) // NaN 666 console.log(parseInt(stringNum)) // 789 console.log(parseFloat(stringNum)); // 789.123
3、任何数据类型都可以转换为boolean类型
// 非0既真 var b1 = '123'; // true var b2 = 0; // false var b3 = -123; // true var b4 = Infinity; // true var b5 = NaN; // false var b6; // false var b7 = null; // false
六、流程控制
1、if、if-else、if-else if-else
a、if语句，例如：
var ji = 20; if(ji >= 10){ console.log('恭喜你，吃鸡成功，大吉大利') } console.log('hello world'); // 这里的代码还会执行 b、if-else，例如：
var ji = 20; if(ji >= 10){ console.log('恭喜你，吃鸡成功，大吉大利') }else{ console.log('很遗憾，下次继续努力') // 这里的代码不会执行 } c、if-else if-else，例如：
if(true){ // 满足条件执行这段代码 }else if(true){ // 满足条件执行这段代码 }else if(true){ // 满足条件执行这段代码 }else{ // 满足条件执行这段代码 } 2、逻辑与（&&）、逻辑或（||）
a、模拟：如果总分 > 400分 并且 数学成绩 > 89分 被清华大学录取，例如：
var sum = 405; var math = 91; if(sum > 400 && math > 90){ console.log('清华大学录取成功') }else{ alert('高考失利') } b、模拟：如果总分 > 500分 或者 英语大于85分 被复旦大学录取，例如：
if(sum > 500 || english > 85){ console.log('被复旦大学录取') }else{ alert('高考又失利了') } 3、switch语句
var gameScore = 'better'; switch(gameScore){ case 'good': console.log('玩的很好') break; // break表示退出,若不写则直到下一个break才退出（break穿透） case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') } 4、while循环、do-while循环
a、while循环，例如：
var i = 1; // 初始化循环变量 while(i <= 9){ // 判断循环条件 console.log(i); i = i+1; // 改变循环条件 } 练习：将1-100所有是2的倍数在控制台中打印，如下代码：
var i = 1; while(i <= 100){ if(i%2 == 0){ console.log(i) } i++; } b、do-while循环，例如：
// 不管有没有满足while中的条件do里面的代码都会先执行一次 var i = 3;// 初始化循环变量 do{ console.log(i) i++;// 改变循环条件 }while (i < 10) // 判断循环条件 5、for循环
for(var i = 1; i <= 10; i++){ console.log(i) } 练习：将1-100之间的所有偶数打印在控制台，如下代码：
for(var i = 1; i <= 100; i++){ if(i%2 == 0){ console.log(i) } } 练习：将1-100之间所有数之和打印在控制台，如下代码：
sum = 0 for(var i = 1; i <= 100; i++){ sum += i; } console.log(sum); 练习：在浏览器中输出直角三角形，如下代码：
for(var i = 1; i <= 6; i++){ for(var j = 1;j <= i; j++){ document.write("*"); } document.write(''); } 练习：在浏览器中输出等腰直角三角形，如下代码：
for(var i = 1; i <= 6; i++){ // 控制行数 // 控制空格数 for(var s = i; s < 6; s++){ document.write(' ') } for(var j = 1; j <= 2*i-1; j++){ document.write('*') } document.write('') } 七、常用内置对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...，此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
1、Array（数组）对象
（1）数组的创建有两种方式
a、字面量方式，推荐使用这种方式，简单粗暴，例如：
var colors = ['red','green','yellow'];
b、构造函数 (后面会介绍) 的方式，使用new关键词对构建函数进行创建对象，例如：
var colors = new Array();
（2）数组的赋值
var arr = []; // 通过下标进行一一赋值 arr[0] = 123; arr[1] = '嘿嘿'; arr[2] = '哈哈';
（3）数组的常用方法和示例
| 方法或属性 | 描述 |
| concat() | 连接两个或更多的数组，并返回结果 |
| join() | 把数组的所有元素放入一个字符串 |
| toString() | 把数组转换为字符串，并返回结果 |
| slice(start,end) | 选取数组的的一部分，并返回一个新数组 |
| pop() | 删除数组的最后一个元素并返回删除的元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度 |
| reverse() | 反转数组的元素顺序 |
| sort() | 对数组的元素进行排序 |
| shift() | 删除并返回数组的第一个元素 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度 |
| Array.isArray(待测) | 判断对象是否为数组 |
| length | 数组的一个属性，设置或返回数组元素的个数 |
var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity); // ["北京", "山东", "天津", "东莞", "深圳", "上海"] var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str); // 98|78|76|100|0 str1 = score.toString(); console.log(str1); // "98,78,76,100,0" var arr = ['张三','李四','王文','赵六']; var newArr = arr.slice(1,3); console.log(newArr); // ["李四", "王文"] arr.pop(); console.log(arr); // ["张三", "李四", "王文"] arr.push('小马哥'); console.log(arr); // ["张三", "李四", "王文", "小马哥"] var names = ['alex','wusir','xiaoma','angle']; names.reverse(); console.log(names); // ["angle", "xiaoma", "wusir", "alex"] var names = ['alex','wusir','xiaoma','angle']; names.sort(names); console.log(names) // ["alex", "angle", "wusir", "xiaoma"] var arr = ['张三','李四','王文','赵六']; arr.shift(); console.log(arr); // ["李四", "王文", "赵六"] arr.unshift('小马哥'); console.log(arr); // ["小马哥", "李四", "王文", "赵六"] var arr = [1]; console.log(Array.isArray(arr)); // true 2、String（字符串）对象
| 方法 | 含义 |
| charAt() | 返回指定索引的字符 |
| concat() | 返回字符串值，表示两个或多个字符串的拼接 |
| replace(a,b) | 字符串b替换了a |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置，没有则返回-1 |
| slice() | 返回start到end-1之间的字符串，索引从0开始 |
| split() | 把字符串分割为字符串数组 |
| substr(start,end) | 字符串截取，顾头不顾尾 |
| toLowerCase() | 返回一个新的字符串，该字符串字母都变成了小写 |
| toUpperCase() | 返回一个新的字符串，该字符串的字母都变成了大写 |
| match() | 查找找到一个或多个正则表达式的匹配 |
| search() | 查找与正则表达式相匹配的值 |
var str = 'hello'; var charset = str.charAt(1); console.log(charset); // e var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str1)); // alexal var a = '1234567755'; var newStr = a.replace('4567','****'); console.log(newStr); // 123****755 var str = 'world'; console.log(str.indexOf('o')); // 1 console.log(str.indexOf('a')); // -1 var str = '正能量'; console.log(str.slice(1,2)); // 能 var str = '我的天呢，a你在说什么呢？a哈哈哈'; console.log(str.split('a')); // ["我的天呢，", "你在说什么呢？", "哈哈哈"] var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(0,4)); // 我的天呢 var str = 'XIAOMAGE'; console.log(str.toLowerCase()); // xiaomage var str = 'xiaomage'; console.log(str.toUpperCase()); // XIAOMAGE 3、Date（日期）对象
创建日期对象只有构造函数一种方式，使用new关键字，例如：
var myDate = new Date(); // 创建了一个Date对象
常用方法和示例：
| 方法 | 含义 |
| Date() | 根据本地时间返回当天的日期和时间 |
| getFullYear() | 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字） |
| getMonth() | 根据本地时间返回指定日期对象的月份（0-11） |
| getDate() | 根据本地时间返回指定日期对象的月份中的第几天（1-31） |
| getDay() | 根据本地时间返回指定日期对象的星期中的第几天（0-6） |
| getHours() | 根据本地时间返回指定日期对象的小时（0-23） |
| getMinutes() | 根据本地时间返回指定日期对象的分钟（0-59） |
| getSeconds() | 根据本地时间返回指定日期对象的秒数（0-59） |
| toLocaleString() | 据本地时间格式，把Date对象转换为字符串 |
var myDate = new Date(); console.log(Date()); console.log(myDate.getFullYear()); console.log(myDate.getMonth()); console.log(myDate.getDate()); console.log(myDate.getDay()); console.log(myDate.getHours()); console.log(myDate.getMinutes()); console.log(myDate.getSeconds()); console.log(myDate.toLocaleString());
4、Math（算数）对象
| 方法 | 含义 |
| Math.ceil() | 向上取整，称为“天花板函数” |
| Math.floor() | 向下取整，称为“地板函数” |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.random() | 随机数，默认0-1之间（包括0，不包括1）的随机数， 公式min+Math.random()*(max-min)表示min~max之间的数 |
var x = 1.234; var a = Math.ceil(x); var b = Math.floor(x); console.log(a, b); // 2 1 console.log(Math.min(3,8)); // 3 console.log(Math.max(3,8)); // 8 var ran = Math.random(); console.log(ran); // 大于等于0 小于1 的数 ran2 = 100 + Math.random() * 100; // min + Math.random() * (max - min) console.log(ran2); // 100-200之间的随机数
八、函数
函数就是将一些语句进行封装，然后通过调用的形式，执行这些语句。
作用：
将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动；
简化编程，让编程模块化；
1、函数的定义
function 函数名(){ // 函数体 } function：是一个关键字，中文是“函数”、“功能”；
函数名：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头；
参数：后面有一对小括号，里面是放参数用的；
函数体：大括号里面，是这个函数的语句；
2、函数的调用
函数名();
3、函数的参数
函数的参数包括形参和实参（实际参数和形式参数的个数要相同），例如：
sum(3,4); sum("3",4); sum("Hello","World"); // 函数：求和 function sum(a, b){ console.log(a + b); } 4、函数的返回值
console.log(sum(3, 4)); // 函数：求和 function sum(a, b) { return a + b; }