ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
ESMAScript的历史
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式，添加try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加"strict mode"严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符（**）， 增加Array.prototype.includes |
注: ES6就是指ECMcript 6
尽管ECMAScript是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
# 核心(ECMAScript)
# 文档对象模型(DOM) Document object model(整合js,css,html)
# 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
# 简单地说,ECMAScript描述了JavaScript语言本身的相关内容.
# JavaScript 是脚本语言，独立的语言
# JavaScript是一种轻量级的编程语言
# JavaScript是可插入HTML页面的编程代码
# JavaScript插入HTML页面后，可由所有的现代浏览器执行
# JavaScript很容易学习.
# 独立的语言,
JavaScript引入方式
在HTML中,不限制脚本数量 一般javascript都会放在header标签里面,以不干扰页面内容. javascript语句向浏览器发出什么指令,告诉浏览器该做什么
Script标签内写代码
引入额外的JS文件
<script src="myscript.js">script>
JavaScript语言规范
分号
语句之间的分割是分号(;) 注意: 分号是可选项,有时候看到不以分号隔开的.
标识符
JavaScript标识符必须以字母,下划线或美元符号开始 JavaScript关键字 JavaScript同样对大小写很敏感.
注释
// 单行注释
//
/* 多行注释 */
/**/
<body>
<script>
//javavscript代码单行注释
/* javascript代码多行注释 */
script>
body>
空格并不影响代码执行
结束符
JavaScript的语句是以分号(;)为结束符。
变量声明
变量是存储信息的容器
# 1. javaScript的变量名可以使用数字,字母,$组成，不能以数字开头.
# 2. 声明变量使用var变量名；的格式进行声明.
name = "YouMen" # 全局变量
var name = "YouMen"; # 局部变量
var age = 18;
# 注意:
# 变量名是区分大小写的.
# 推荐使用驼峰命名规则.
# 保留字不能用做变量名.
# ES6新增了let命令，用于声明变量，其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效,
# 例如,for循环的计数器就很适合使用let命令.
for (let i=0;i<arr.length;i++){...}
# ES6新增const用来声明常量，一旦声明，其值就不能改变.
const PI = 3.1415;
PI //3.1415
PI = 3
// TypeError: "PI" is read-only
数据类型
数值(Number)类型
JavaScript不区分整型和浮点型，就只有一种数字类型。
# html
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
# html
parseInt("123") // 返回123
parseInt("ABC")
// 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
字符串(String)类型
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
a.substring(1,3)
"el"
# a.chartAt(索引位置)
# a.substring(起始位置，结束位置)
# a.lenght 获取当前字符串长度
常用方法
| 方法 | 说明 |
|---|---|
| .length #不加括号的是属性 | 返回长度 |
| .trim() #得到一个新值 | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串 | 返回第n个字符 |
| .concat(value, ...) #s1='hello';s.concat('xx');得到helloxx | 拼接 |
| .indexOf(substring, start) #这个start是从索引几开始找，没有返回-1 | 子序列位置 |
| .substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了 | 根据索引获取子序列 |
| .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它 | 切片 |
| .toLowerCase() #全部变小写 | 小写 |
| .toUpperCase() #全部变大写 | 大写 |
| .split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数 | 分割 |
数据类型转换
var a = '123abc'
undefined
var b = parseInt(a);
undefined
typeof(b)
"number"
Example1 定时器
# setInterval('执行的代码',间隔时间)
# function func() {
# // 根据ID获取指定标签的内容.定于局部变量接受.
# var tag = document.getElementByID('id');
# // 获取标签内部的内容
# var content = tag.innerText;
# var f = content.chartAt(0);
# var l = content.substring(1,content.length);
# var new_content = l + f;
# tag.innerText = new_content;
# }
# setInterval('func()',1000); 每一秒执行这个函数
Example2 跑马灯
字符串切片
# obj.trim() # 移除空白
# obj.trimleft()
# obj.trimHight()
# obj.charAt(n) # 返回字符串中的第n个字符
# obj.concat(value,...) # 拼接
# obj.indexOf(substring,start) # 子序列位置
# obj.indexOf(substring,start) # 子序列位置
# obj.substring(from,to) # 根据索引获取子序列
# obj.slice(start,end) # 切片
# obj.tol.owerCase() # 大写
# obj.toUpperCase() # 小写
# obj.split(delimiter,limit) # 分类
# obj.search(regexp) # 从头开始匹配，返回匹配成功的第一个位置(g无效)
# obj.match(regexp) # 全局搜索，如果正则中有g表示找到全部，否则只找到一个.
# obj.replace(regexp,replacement) # 替换，正则中有g则替换所有，否则只替换第一个匹配项，
# $数字，匹配的第N个组内容.
# $& 当前匹配的内容
# $' 位于匹配子串左侧的文本
# $‘ 位于匹配子串右侧的文本
# $$ 直接量$符号
布尔类型(Boolean)
布尔值区别于Python,true和false都是小写.
var a = true;
var b = false;
# "(空字符串),0,null,undefined,NaN都是false.
# null 和undefined
# null 表示值是空,一般在需要指定或清空一个变量才会使用，如name=null;
# undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined,还有就是函数无明确的返回值时，返回的也是undefined.
# null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null),
# undefined则表示只声明了变量，但没有赋值.
对象(Object)
JavaScript中的所有事物都是对象; 字符串、数值、数组、函数..此外，JavaScript允许自定义对象. JavaScript提供多个内建对象，比如String、Date、Array等等. 对象只是带有属性和方法的特殊数据类型.
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
# html
var a = [123, "ABC"];
console.log(a[1]);
// 输出"ABC"
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
splice()
语法： splice(index,howmany,item1,.....,itemX)
参数：
参数：
| 参数 | 描述 |
|---|---|
| index | 必需。规定从何处添加/删除元素。 |
| 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 | |
| howmany | 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 |
| 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 | |
| item1, ..., itemX | 可选。要添加到数组的新元素 |
map()
语法：
map(function(currentValue,index,arr), thisValue)
参数：
运算符
算数运算符
# + - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
# 这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，
# 而++x会先进行自增运算再赋值！
Example
比较运算符
> >= < <= != == === !==
注意
1 == “1” // true 弱等于
1 === "1" // false 强等于
// 上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,
// JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，
// 所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
流程控制
if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if-else if-else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
// switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
循环
for
for (var i=0;i<10;i++){
console.log(i)
}
var a = ['aa','bb','cc'];
for (var i=0;i<a.length;i++){
console.log(i);
console.log(a[i]);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
函数
函数是由事件驱动或者当他被调用时执行的可重复使用的代码块.
函数定义
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别
function 函数名() {
函数体; (代码块)
}
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
function sum(a, b){
return a + b;
}
调用函数
函数在定义好之后,不能自动执行,需要进行调用.
在javascript中直接调用
调用方式: 在