JavaScript
一:简介
html页面结构
css页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
js页面行为：部分动画效果、页面与用户的交互、页面功能
javaScript是一门语言.
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html),例如用js获取html的标签
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器），例如弹出框alert就是调用的浏览器接口
注：ES6就是指ECMAScript 6。javascript和java没有任何关系，蹭java当时的热度，也抄了一部分语法，例如；作为结尾。
浏览器就是js的解释器
原生的js写的很少，一般都是用jQuery来更便捷的开发。
二:引入方式
行间引入(主要用于事件)
<input type="button" name="" onclick="alert('ok！');">
标签引入(可以放在任何位置)
<script>
alert('ok！');</script>
引入额外的JS文件
<script type="text/javascript" src="js/index.js"></script>注释和java一模一样,但是和java没有任何关系
// 这是单行注释
/*
这是
多行注释
*/
三:语法基础
变量分：基础数据类型（放栈中） 引用数据类型（放堆中） 也是学java
python中一切皆对象，都统一放堆中。
解释型语言，不用变量类型的声明，用var代表一切变量，和python都是弱类型语言。
var有设计缺陷，在if和for中无块级作用域。
es6中引入let替代var
变量声明
- JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
- 声明变量使用 var 变量名; 的格式来进行声明
var name = "张三";
var age = 18;
//可以一个var 声明多个变量
var a=4,b=6.c=7;直到即可
补充：
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
四:数据类型
浏览器是window对象，声明的所有对象都被挂载到window下，
例如 var a=1
console.log(a)实际是window.a只是省略了
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined, var a; console.log(a) 是underfined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null，就是表示空值。
1种复合（引用）类型：
object Array（数组） function(也是个对象)
js中没有字典 集合 列表，obejct和字典类似
//函数关键字function
function add(a,b){
return a+b;
}
add(1,2)
//第二种方式,用在对象中的方法定义
var add2=function(q,b,a){
return q+a+b;
}
//自执行函数，自己执行，不用掉用，且只能用一次
(fucntion(){
alert('hello world')
})()
(这个括号表示引用名)（这个表示执行）
//定义在对象里面的函数叫方法
var a = {
name:"zhangsa"，
age:18，
add:function(a,b){
console.log(this); //this指的是当前对象
return a+b;
}
}
//默认key就是字符串，设计者的不同思路而已，不用太在意，如果你是发明者你也可以按着性子来。
Null 和 Undefined类型
Undefined类型
undefined的类型是Undefined
1.Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
2.当函数无明确返回值时，返回的也是值 "undefined";
Null类型
null值得类型是Null类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
一门动态语言,不用像java那样声明变量类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
数值(Number)
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
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
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
拼接字符串一般使用“+”
string.slice(start, stop)和string.substring(start, stop)：
两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度
substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`
注意：
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
JSHint启用ES6语法支持:/* jshint esversion: 6 */
布尔值(Boolean)
区别于Python，true和false都是小写。
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
还不明白，上图吧！
对象(Object)
javaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
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() | 返回一个数组元素调用函数处理后的值的新数组 |
关于sort()需要注意：
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
示例：
function sortNumber(a,b){
return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
关于遍历数组中的元素，可以使用下面的方式：
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); }
五:运算符
typeof 变量:检测变量的数据类型
运算符分类
算术运算符： + - * / % ++ -- 比较运算符： > >= < <= != == === !== 逻辑运算符： && || ！ 赋值运算符： = += -= *= /= 字符串运算符： + 连接，两边操作数有一个或两个是字符串就做连接运算
算术运算符：自增，自减
++i:先计算后赋值
i++：先赋值后计算
比较运算符
> >= < <= != == === !==
逻辑运算符
console.log(1&&3); //3 两个为真才为真（0为假，其他的数字都代表真） console.log(0&&3); //0 只要有一个为假则为假 console.log(0||3); //3 console.log(2||3); //2
六:流程控制
- 顺序结构(从上向下顺序执行)
- 分支结构
- 循环结构
分支结构：
1. if.....else结构：
if (表达式1) {
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}
2.switch-case结构
switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}
switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。
循环语句
for循环：（推荐使用）
语法规则：
for(初始表达式;条件表达式;自增或自减)
{
执行语句
……
}
or循环的另一种形式：
for( 变量 in 数组或对象)
{
执行语句
……
}
while循环：
语法规则：
while (条件){
语句1；
...
}
七、异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
