js初级笔记

day 1
1、js是干什么的？
1）、实现用户的行为，实现用户和页面的交互；
2）、运行在浏览器端的脚本语言（不需要搭建环境就可以运行的，写在html文件里，被浏览器可以识别并执行的语言）；
3）、解释型语言在这里插入代码片
2、html 结构 css 样式 js 交互/行为
W3C 标准：一套标准，用来定义html,css,js的语法规范，提倡结构，行为，样式分离；
3、js的发展历史
nombas
王景公司 navigator
javasun javascript
4、ECMAjs 欧洲计算机制造者协会（标准）
ecma标准
dom document Object modal
bom browser object modal
5、js作用
1）、增删改查；
2）、和后台交互；
3）、修改标签结构和样式；
4）、对浏览器的事件做出响应：鼠标事件，键盘事件；
5）、读写html元素；
6）、做后端 nodejs；
7）、检测浏览器版本；
6、引入js的方式（一般情况下js放置在body结束标签前面）
1）、scritp标签内
js <script></script>
2）、引入外部文件
js<script src=""></script> ——外部引用的放在前面，自己写的放在后面
3）、元素的事件属性onXXX当XXX的时候

	<div onclick="alert("你好啊")">点我</div>

4）、伪url的方式

	<a href="javascript:alert("你好啊url")">超链接</a>

7、变量 variable 相当于是容器
放东西，代表内部的东西
放的东西可以换，换成什么就代表什么
undefined 未赋值的变量
not defined 变量不存在
变量的使用步骤：
1）、用var声明变量
var变量名
（1）大小写敏感；
（2）由数字 字母 下划线组成，首首字母不能是数字；
（3）见名知意；
（4）采用小驼峰写法 wenQin wen_qin；
（5）不能为关键字

（6） 每个语句结束要有分号；
2）、赋值
变量名 = 值
运算的顺序从右到左
注释://行注释
/这是一个块注释/
3）、使用
变量名就代表变量当时存的值
数据类型，字面量
js的基本数据类型
数字
字符串
布尔值（boolean）值 true（正确的） false（错误的）
undefined 声明了没有赋值的变量（注意和not defined的区别）
null 值为空的变量
typeof可以得到变量的值得数据类型
typeof 值 typeof(值)
‘+’ 运算符 如果两边都是数字，就会进行算数运算，如果进行算术运算的一边是字符串，就把不是字符串的一遍转换为字符串再进行拼接 对1000数字进行了隐式转换
‘-’ 当遇到特有的算术运算符时 （-*/）把数据隐式转换成数字类型
数据类型的转化
隐式转换 怎么转换和运算符有关系
显式转换
转数字：Number() parseInt()逐位转换，如果第一个是非数字，结果就是NaN，如果首字母是数字，就依次进行转换直到遇到非数字
parseFloat() 每个字符串逐步转换，遇到整数就转换为整数，遇到小数就转换为小数
转字符串：直接在两边加引号
number(undefined)------NaN
number(none)-----------0
转boolean类型：
数字：非零都是true
nan是数字类型但是不是数字 false
字符串：空字符串是false,其余都是true；
undefined false
null false

		console.log(输出内容)    控制台输出

注意：NaN not a number,NaN是数字类型，但是不是数字
parseInt(数字); 直接把可以转成数字的部分转成数字（整数）
运算符
运算符的优先级：
±从左到右，乘除优先计算
算数运算符：
+ - * / % ** （幂）
赋值运算符 =
扩展运算符： x += 1
拼接运算符 有字符串的情况下：+ ‘abc’+‘bcd’ = ‘abcbcd’
关系运算符：（会进行隐式转换）
比较运算符，最终的结果就是布尔值:>< == === 恒等于（数据类型和值都等于）
当有数字的时候，将其他类型转换成数字后进行比较，当两个都是字符串进行比较时，按字符串逐位比较，只要遇到不一样的比出结果就停止进行比较了。注意：数字和字母是不进行比较的。
js中不可以 70<80<90//任何情况都不可以用连续比较
js的输出方式：
弹出框输出：
alert()
控制台输出：
console.log()----可以用逗号，相当于逗号之前和之后执行了两次console
页面输出：
document.write()----当页面渲染完成之后再执行，会覆盖页面上原有的内容
js的输入方式：
var str = prompt(‘’) 弹出框输入，执行的结果是，调用弹出框，输入的内容最后保存在自身上面，得到的值是字符串类型
str得到的内容一定是字符串类型，如果是输入数字，注意需要转换
undefinednull true
NaNNaN false
‘0’==null false
逻辑运算符（结果是布尔值）：
或：两个条件满足一个就成立
且：两个条件同时满足才成立
非（！）：!true =>false !false =>true，!的优先级贼高
一元运算符：! （只连接一个值）
二元运算符：+ -
三元运算符：条件表达式？满足条件要做的事情：不满足条件要做的事情；
6、请描述 ++i（前置自增），i++（后置自增） 区别；
a = ++i，相当于 i=i+1; a = i;
a = i++，相当于 a = i; i=i+1;

day 02

设置断点：
fn+12 ->source ->打开相应html文件 ->点击想要停止的行->刷新
顺序结构
选择结构
循环结构
双分支结构：
if(){
}else{}
分支结构的嵌套：
if(){
if(){
}else{
}
}else{
}
多分支：
if(){
}else if{
}else{
}
switch(val){
case x:
val为A的时候要执行的代码;
break; //跳出花括号
default:
默认时候做的事情，上面列举的条件都不满足;
}

var month = +prompt();  //+将month转换为数字类型

switch和if…else的特点：
每种条件的值是固定的就用switch-case，如果是一个范围，就用if-else。
点击、显示、隐藏
隐藏的三种方法：
display：隐藏后高度不存在
visibility:隐藏后高度依然存在
opacity：隐藏后高度依然存在

x.onclick = function(){
	div.style.display = 'block';
}

day 03

循环的条件
循环的开始和结束
执行的次数在改变
break: 跳出循环，不再循环
continue：跳出本次循环，继续循环

for：循环次数是固定的
while：循环次数不确定，满足条件才执行
do while:循环次数不确定，至少要循环一次

day 04

数组（Array）：引用数据类型 多个数据的集合，存多个数据。
字面量的声明方式：
var arr = [];
** 有 proto 就是原生对象 **
new方式：
new Array(字符串) 创建有字符串的数组，多个值用逗号隔开；
new Array(数字)
数字只有一个，创建一个长度为数字的数组，每个值都是空的；
多个数字，创建含有多个数字的数组。

 var arr = new Array();
 var arr = new Array(2);//数字只有一个
 var arr = new Array(2,3);//数字有多个

数组的访问：
用下标访问，下标从零开始，到(长度-1)；
第一个值：arr[0];
最后一个值：arr[arr.length-1];

			  对象									数组
 写法		{}					 					 []
 值		键值对								 值
 有序		无序									有序
 访问		obj['属性名']						arr[i]
 存多个数据
 数据类型不要求一样，原则上数组要存同一 类型的数据

数组的赋值：
通过下标的方式赋值：
arr[arr.length] = 要添加的值；

数组的方法：都会改变原来的数组
数组的添加：
数组的结尾添加：
数组名.push(要添加的值) 如果是多个值，就用逗号隔开； 添加值，返回添加后的长度。
数组的前面添加：
数组名.unshift（要添加的值）如果有多个值，用逗号隔开。（用于添加到购物车）

数组的删除：
数组名.pop() 删除数组的最后一个值，并返回被删除的值。
数组名.shift() 删除数组的第一个元素，并把值返回。

数组的去重：indexOf()返回查找的值得下标;
delete（）

二维数组：

math对象
取最大值：Math.max(a,b,c,d)；
取最小值：Math.min(a,b,c,d)；
取数组中的最大值：Math.max.apply(Math,arr);

Math.random() 获取0~1之间的随机数：
获取min到max之间的随机数：Math.floor(Math.random()*(max-min)+min)

Math对象提供的取整方法：
Math.round(一个小数); 四舍五入
Math. ceil() 进位取整（1.1进位取整后为2）
Math.floor() 退位取整（不管小数点后位多少都加一）
Math.abs() 取绝对值(abs就是absolute)
Math.PI 取圆周率
Math.pow(5,3) 5的3次方

date对象

var date = new Date();
console.log(date);//获取当前完整时间
console.log (date.getFullYear ())//年份
console.log (date.getMonth()); //月份-1
console.log (date.getDate());//几号
console.log (date. getDay ());//星期几
console.log(date.getHours());//分
console.log(date.getMinutes());//秒
console.log (date.getSeconds());//毫秒
console.log (date.getTime());//时间戳 自1970年1月1日0时0分0秒开始到现在为止的毫秒数
console.log(date.getYear());//从1900年至今过了多少年

date.setDate(25);//设置日期
date.setMinutes(72);//增加72分钟,就是把小时+1，分钟设置成12；
var date2 = new Date(2010-9-18);//支持2010.9.18和2010/9/18的格式，意思是将字符串转换为时间

选择排序
冒泡排序

day 05

函数
函数的定义，也叫方法：
由事件驱动或者他被调用时可以重复执行的代码块。
函数的作用：
可以重复使用，提高代码的可读性，实现代码和逻辑分离。
函数包括哪些部分：
函数的声明 function,var fun = function(){};
函数名：
1、不能是关键字；
2、小驼峰，首字母小写；
3、语义化；
4、不可以数字开头。
函数的参数（形参）： 无参函数 有参函数
可选，根据需求决定要不要设置，
形参：函数声明的时候括号里的参数就是形参；
实参：函数调用的时候括号里的就是实参。
函数体：
叫函数名，要执行的代码块,可以是任意的代码；
函数的返回值：
函数调用的时候才会有返回值。
函数的调用：
函数名();
函数中的return只能返回一次，即一个函数中只能有一个return。
函数的调用和声明要有括号；
如果函数没有返回值，默认返回undefined；函数的返回值在函数调用的代码上；
只要调用了函数就会执行，即使是在输出语句上；
函数的注释：
js /*函数的注释 @method myPush2(函数名) @param [参数类型] 参数名字 第一个要添加的值; @param [Number] num2 第二个要添加的值； @return [返回值的类型] 返回值的描述 */

arguments对象
存在于函数内部，当不确定有多少个参数传递时，可以用arguments来获取；
arguments对象中存储了传递的所有实参；它具有length属性，用下标的方式存储数据，不具有数组的push,pop等方法；
只能写在函数内部。
函数的声明

fun();
function fun(){//具名函数 这种方式的函数声明可以在函数声明前调用，也可以在函数声明后调用
	console.log('hhhhh');
}

var fun = function(){//匿名函数，通过赋值申明函数，不能在赋值之前调用
console.log('hhhhh');

}

变量提升：
预编译：把所有声明提到作用域的最前面，但是赋值不会；全局变量的声明提升到js代码的最前面，局部变量的声明提升到函数的最前面，赋值都不提升。

fun();//会报错，因为var fun部分提升了但是后面的赋值部分没有提升
var fun = function(){
console.log('hhh');
}

局部变量和全局变量
函数外部不可以访问函数内部用var声明的变量，函数内部用var声明的变量叫做局部变量；
函数外部用var声明的变量叫做全局变量；作用域为整个js文件；
函数内部没有用var声明，会自动提升为全局变量；
函数内部声明的变量名和全局变量名一样时，函数内部以局部变量为准，外部以全局变量为准。函数内部也会有变量的声明提升，提升到作用域的最前面。

数据配置和逻辑的分离

day 06###

字符串对象
js中的字符串中的空格都是真的
字符串的方法都不会改变字符串本身
字符串对象.charAt(0) 返回下标为0的字符
字符串对象.concat(字符串对象2) 将字符串对象和字符串对象2拼接在一起，相当于str+str 2
字符串对象.slice(0,2) 取下标为0,1的字符，第二个数为下标（不包含他）而不是个数！括号里面是负值，从第一个参数的位置开始向右取。
字符串对象.substring() 参数、用法和slice()相似，只是括号里面的不能是负值；
字符串对象.substr(2,3) 从下标为二的数开始，取三个值。
字符串对象.indexOf(‘a’) 返回a第一次出现时的下标，没有就返回-1。
字符串对象.toLowerCase() 转成大写。
字符串对象.toUpperCase() 转成小写。
字符串对象.split(‘空格’) 将字符串以空格分开，以数组的形式返回每一部分（空格部分也可以是别的，引号中没有字符时将每个字符隔开，也可以是别的字符）。
字符串对象.trim() 去除首尾空格。
字符串对象.match()
字符串对象.replace( , ) 第一个采纳数是规则（也可以是要被替换的字符串），第二个参数是替换成的目标值。

** 正则表达式**

/^b/ // 以b开头
/6$/ //以6结尾
/[0-9]+/  //+代表一个以上 
[a-z] // 一个小写字母
[0-9] // 一个数字
[A-Z] // 一个大写字母
[a-zA-Z] // 一个字母
[]//内容取并集
/a{2,5}/   //匹配2~5个a
/b*/ // 匹配0个以上
/b?/ //匹配最多一个
/\d/ //数字，相当于[0-9]
/\D/  //非数字
/\s/ // 空格
/\S/
/\w/ //字母
/\W/ 
reg = /[a-z]/  //a到z之间的字母
var reg =new RegExp(/[0-9]+/ )  //匹配一个以上的数字
//两种声明正则表达式的方式
 
str.match(reg);//如果找到了就返回一个数组，没有匹配到就返回一个null
var reg2 = new RegExp('正则表达式','g');//第一个参数是规则，第二个参数是修饰符，其中'i'是取消大小写敏感，'g'是全局匹配，'i'；要写多个修饰符就直接连着写。
reg2.test(str);//正则表达式的方法，返回值是true或者false
172.0.0.1/home.html //要取出home.html
.match(/\/(\w+\.html)/);
//对于特殊字符需要转义 例如\/ 表示/;\?表示?等等等等。

day 07

复习：
ecma
var 声明
变量： 全局和局部变量
函数内部用var声明的是局部变量，否则就是全局变量。
数据类型
数字 字符串 布尔 undefined null(obj 对象为空)
引用数据类型 数组 对象
数据比较：
== 数字参与比较，字符串和布尔都会转成数字来比较 ，
undefined和null不和其他类型的数据进行比较，都返回false ；undefinednull返回true

不等比较，大于或小于，只要数字参与比较，其他的类型就会转成数字
顺序结构
选择结构：选择一条 来执行
alert(‘succeed’);
alert(‘fail’);

if(){如果（条件成立）
}else{否则
}

if(){单分支 如果条件满足做什么？
}

if(){//多分支
}else if(){
}else if(){
}else if(){
}else if(){
}else{
}

switch(val){
case 值1:
	如果 val == 值1的时候，这里的代码会执行;
	break;
}

循环结构：

	for(var i=初始值;i<终点值;i++条件改变){
	}

数组 [1,2,3]可以存多个值
访问数组的每个值：循环 下标从零开始 到数组的长度-1
添加 push() unshift()
修改 arr[下标] = 值；
删除 pop() shift()

增删改：splice()
其他方法：截取一段（slice） 拼接多个数组（concat） 转成字符串链接起来（join）

String
charAt()
indexOf()
转大小写
substr()
split()
match()
对象（Obj）

var obj = {
						name:'张三',
						age:13
						} 
obj.name  //得到张三
obj.name = '李四' //把name的值改成李四
//遇到name of undefined错误，就是obj不是对象或者里面没有值	
//添加属性
obj.sex = 'nv'
obj['sex'] = 'nv'

函数：

	function fun(){
		//要执行的代码块
	}
	fun();//调用函数
	function 函数名(参数一,参数二,...) {
		code;
		return 返回值;
	}
	var res = fun();

Dom(document object model)

Dom 文档对象模型 由W3C提出的一套标准，使用js访问、修改、添加文档的内容、样式和结构。

文档document	文档节点
html根节点	root Node
*标签	元素节点
*标签内的的属性	属性节点
*标签之前的文本	文本节点
注释	注释节点

获取节点的方式

 document.getElementById('idVal');// 通过id获取节点,因为id是唯一的，所以用element,找到了就是对象，没有找到就是null
document.getElementsByTagName('');//通过标签获取节点，类似数组的几个，访问具体的节点要用下标。
document.getElementsByName('')//通过name属性获取节点，返回的是类似数组的集合，访问具体的节点要用下标
document.getElementsByClassName('')//通过class属性获取节点，返回的是类似数组的集合，访问具体的节点要用下标
var html = document.documentElement;//获取html节点（文档元素）
var body = document.body;//获取body节点
var formEle = document.login;//获取表单元素document.表单名
var formEle = document.login.user;//获取表单中的元素document.表单名.表单元素名
var children = div.childNodes; //获取到元素节点和文本节点，换行也算文本节点
var childNode = div.children;//只获取元素节点，获取所有的子元素节点，靠谱！
firstChild //第一个子节点（文本节点或是元素节点）
firstElementChild //第一个子元素节点

nextSibling //弟弟节点 sibling兄弟
nextElementSibing//弟弟元素节点

previousSibling// 相邻哥哥节点
previousElementSibling //相邻哥哥元素节点

parentNode //父节点
parentElement //父元素节点

属性节点

attribute----属性
元素节点.attributes //获取所有的属性节点，以数组的形式返回返回每一个属性节点。
元素节点.className //返回类的值
元素节点.id //返回id的值

属性的值

元素节点.属性名字   //div.id 代表节点div的id的值。
div.getAttribute(属性名) //获取属性的值
div.classList //以数组的形式返回所有的类
div.classList.add('add');//添加一个类名为add的类，可以用这个方法一次性添加多个样式（样式写到类中，再把类添加到标签中）
div.classList.remove('add');//删除一个类名为add的类

设置属性的值

div.setAttribute('name','zhangsan'); //设置属性name的值为张三。
语法：节点.setAttribute('属性名','属性值');
节点.removeAttribute('属性名'); //删除属性;
div.style='color:red'; //直接访问style,覆盖style属性的样式，即只能添加一个样式
div.style.color = ''; //可以通过改变‘color’部分的值来给div设置多个属性
//css中有连接符的属性设置是直接改为小驼峰写法。


div.hasChildNodes() //方法，是否有子节点，返回true或者false,有换行或者文本都会返回true。

节点的区别
元素节点
nodeName:标签名大写,
nodeType: 1,
nodeValue: null
属性节点
nodeName:属性节点,
nodeType: 2,
nodeValue: 属性的值
文本节点
nodeName:“#text”,
nodeType: 3,
nodeValue: 文本内容

day 08

获取元素节点的方法：
选择器获取节点：

document.querySelector(选择器) //返回第一个满足条件的节点对象
document.querySelectorAll('p') //用数组的形式泛返回所有满足条件的节点对象

获取节点的所有样式：

document.defaultView.getComputeStyle(节点，null) //获取节点的所有样式 用于ie高版本或是谷歌浏览器，在ie低版本中运用会直接报错然后停止执行，返回值是对象
节点.currentStyle //ie低版本浏览器  
 

获取div的宽度：

var styleAll = div.currentStyle==defined?document.defaultView.getComputeStyle(div,null):div.currentStyle;  //用三元运算符使这个语句在任何浏览器中都兼容

注意：类似颜色的纸，获取出来的值时reg（）的格式

创建节点

document.createElement(标签名) //创建一个li标签;
document.createTextNode(文本内容)

//插入节点


父节点.appendChild(节点对象) //文本节点或元素节点
父节点.insertBefore(新添的节点，原来的节点)//在原来的节点前面添加新节点
父节点.replaceChild(新添的节点，原来的节点)//代替原来的节点
父节点.removeChild(子节点)

//查找第一个子节点
var firstChild = ul.firstElementChild;

在同一函数中要对已有的变量进行操作之前要对该变量进行克隆。

var newNode = firstNode.cloneNode(参数);
//节点.cloneNode();参数为true:把节点和节点内的内容全部复制一份；参数是false：只克隆标签

清空所有的方法：
方法一：div.children 遍历删除
方法二：div.innerText = ’ ';
方法三：
innerHtml 和innerText的区别：
div.innerText 在div内部添加一段文本，不识别html标签
div.innerHtml 在div内部添加一段文本，识别标签

自定义属性：

div.setAttribute('属性名','属性值');//定义属性
div.getAttribute('属性名'); //获取属性

day 09

获取元素的大小：
节点对象的属性：
div.clientWidth 宽度，返回的是数字，不包括border包括padding
div.clientHeight 高度，返回的是数字，不包括border包括padding
div.offsetwidth 宽度，返回的是数字，包括padding和border
div.offsetHeight 宽度，返回的是数字，包括padding和border
div.offsetLeft div的左边与浏览器窗口边界的距离，如果祖先元素有定位，相对最近一级有定位的元素的左边的偏移量
div.offsetTop div的上边与浏览器窗口边界的距离
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 可视窗口的高度

	window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 可视窗口的宽度
	节点.scrollHeight 内容的高度，内容可以比容器大
document.body.scrollTop
document.documentElement.scrollTop 滚动条离顶部的距离

overflow:auto; 如果内容的高度比容器高度大，就添加滚动条（css）

事件

事件流的处理方式：
事件冒泡（从下到上）
事件捕获（从上往下）
chrome
1、捕获
2、找到事件源，找到之后还要据需往下找
3、冒泡
事件的分类：
点击 click
双击 dblclick
鼠标按下 mousedown
鼠标弹起 mouseup
鼠标移动 mousemove
鼠标移入 mouseover
鼠标移出 mouseout
鼠标右键 contextmenu

键盘事件（给输入框添加）
keydown 键盘按下
keypress 键盘按着（按回退键没有press）
keyup 键盘弹起
一次按键： keydown keypress keyup
按着不放：(keydown keypress)*n keyup
注意：回退键： 按一次：keydown keyup
按着不放：keydown *n keyup

html相关事件：
load 加载页面内容、img
error 页面出错时 （console.error() 控制台打印错误信息）
focus 获得聚焦
blur 失去聚焦
submit 表单才有submit事件

document.myform.onsubmit = function{
    			console.log('事件发生了');
    		}

reset
change   失去聚焦的时候内容有改变才触发      
scroll 滚动事件

dom 0级事件####

用on的方式完成事件
添加事件

		节点.on事件名字 = function(){
			事件发生时要做的事
		}  

缺点：同类事件的实现只能赋值一种
优点：没有兼容性限制

删除事件
节点.on事件名字 = null

dom 2级事件####

添加事件
节点.addEventListener(事件名字，匿名函数，是否捕获) //true表示是用的捕获，false表示用的是冒泡
节点.addEventListener(事件名字，函数名字，是否捕获)
function 函数名字(){ }

删除事件
只能删除函数名引用的时间，匿名函数的事件删不掉
怎么加就要怎么删，参数要和添加一样。

header.addEventListener('click',fun,true);//添加
header.removeListener('click',fun,true);//删除

优点：同类事件的实现可以有多种
缺点：兼容性问题

IE浏览器

添加事件：
只用两个参数（不要true,事件要用“on”）

div.attachEvent('onclick',function(){ 添加事件}) //方法一
div.attachEvent('oncliick',fun);
function fun(){ 添加事件} //方法二

删除事件
只用两个参数（不要true,事件要用“on”）

del.attachEvent('onclick',function(){
	div.detachEvent('onclick',function(){要删除的事件（和添加的时候一样）})
})

浏览器兼容：

事件对象####

代表一个状态，事件发生时，目标元素，键盘，鼠标的状态。
事件对象从哪儿来？事件发生的时候，在执行函数内部产生事件对象
默认argument[0]就是事件对象（直接输出argument[0]的返回值）

var e = window.event || arguments[0]
//e.clientX  鼠标事件发生时鼠标离窗口左上角的水平位置
//e.clientY  鼠标事件发生时鼠标离窗口左上角的垂直位置

//e.offsetX 鼠标事件发生时，鼠标离被点元素的水平偏移量
//e.offsetY 鼠标事件发生时，鼠标离被点元素的垂直偏移量

//

获取事件对象
window.event || arguments[0]

获取键盘码兼容性写法：
e.keyCode(别的浏览器) || e.charCode（火狐）

获取节点对象兼容性写法：
e.target || e.srcElement 获取事件源，节点对象（后面的是IE的方法）
节点.nodeName //获取节点名
事件委托：后代的事件，祖先替他做

day 10###

阻止默认行为的兼容性写法：

if(e.preventDefault){
	e.preventDefault();//是一个方法
}else{
	e.returnValue = false;
}

e.pageX 
e.screenX 距离屏幕的距离
e.type //事件的名字

阻止事件冒泡：

	if(e.stopPropagation){
	e.stopPtopagation();//
	}else{
	e.cancelable = true;
	}
	

BOM 浏览器对象模型
1、操作浏览器的窗口 调用alert
2、浏览器的导航对象，浏览器的版本，内核
3、历史记录
4、获取浏览器的窗口信息
5、提供cookie

window js中唯一的全局变量
谁调用function()，function中的this就指向谁
打开一个页面：
window.open(‘url’,‘_blank’,‘width=500,height=400,left=100,top=100’);
关闭一个界面：
window.close() 不能关闭用a标签打开的页面
window的screen对象，屏幕信息
window.screen.availHeight 屏幕除去任务栏的高度
window.screen.availWidth屏幕除去任务栏的宽度
location对象
window.location.hash ：哈希值（就是地址后的id部分） 获取锚点部分（地址后面的的id）
host:"localhost：63342"主机名+端口号
decodeURI()方法可以解码转码后的url地址
hostname:“localhost” 主机名
search 是去url中?后面的参数部分（不包括哈希值）
location.reload() 重新加载页面
href:“http://ww.baidu.com” url地址 decodeURI()方法可以解码转码以后的url地址
port:“63342” 端口号
protocol:“http:” 协议

用name= “a”可以将a = “inputValue”显示在导航地址后面（哈希值）

history
length: 到目前为止页面跳转了几次
history.back();回退一页
history.forward(); 往前一页 z
history.go(n); n代表跳几页，1往前一页，n就是往前n也

navigator.userAgent 浏览器的版本信息

cookie
数据页面数据可以共享
document.cookie = ‘名字 = 值’ 默认有效时间是一次会话（session 即浏览器没有关闭）同样的名字设置多次会被覆盖，不同的名字会被添加进去

设置过期时间：

var date = new Date();
var time  = date.Time();//当前时间的时间戳
date = new Date(time+24*3*60*60*1000);

document.cookie = 'name = zhangsan;expire = '+date;

删除cookie将过期时间设置为过去的一个时间

计时器

setTimeOut(function(){ //异步任务，同步任务执行完再执行,延迟执行
	console.log('巴啦啦能量');
}，1000)   //1000是毫秒

//定时器
setInterval(function(){
	console.log('你好呀');
},1000) //会一直打，不会停下来


//清除定时器
var timer = setInterval(function(){
	span.innerText = num++;
	if(num>=10){
		clearInterval(timer);
}
},1000)

day 11###

overflow-x:none; 清除水平方向的溢出
函数的防抖和节流：自己看
transtionend 延迟事件结束时，方法

day 12###

赋值表达式：
左边 = 右边1 = 右边2
逗号表达式：左边 = （值一，值二，值三）逗号里面的语句从左到右执行，以最后一个值的结果为准
严格模式：
在使用变量之前必须用var声明；
with语句不能用；
默认函数调用里面的this指向undefined，不再是window对象
异常捕获：

		try{
		//检测语句有没有错误，这里面的代码不会执行
		}catch(err){
		//捕获上面语句的错误，错误信息在err里面，错误的提示内容在err.message
		//catch里面代码才是真正要执行的
			if(){}else{}
		}
	

基本数据类型作为参数传递到函数内，不会修改这个基本数据类型的数值（var a = 0这种）
引用数据类型（arr这种，数组名或者对象名）作为参数传递到函数内，可以修改，注意如果准确到了具体的值（像arr[0] 这种），就也是不可以修改成功：

节点也是引用数据类型，引用数据类型要进行修改要先复制再修改
对象
函数的创建：
function声明
匿名函数赋值给变量
赋值给对象的属性
赋值给事件（onclick,addEventListener和attachEvent）
标签内直接赋值给事件属性
函数的调用：
函数名()
变量名()
obj.方法对应的属性名()
用户操作的时候触发事件
setTimeout(函数名或者匿名函数，delay)
setInterval(函数名或者匿名函数，interval)
函数分类：
有参函数 无参函数
具名函数 匿名函数
返回值函数
回调函数：当特定的事情发生的时候，执行函数（函数内部作为参数传进来的函数），自动调用的函数
递归函数：自己调用自己的函数（和for循环很像）
自执行函数：用括号将函数筐住然后再在后面加上一对括号

要想执行内部函数：fun()();

形参，实参：
arguments 存在于函数的内部，函数执行的时候，获取所有的参数
事件发生的时候调用的函数内部 arguments[0] 就是事件对象 window.event

event对象
clientX offsetX target||srcElement keyCode||charCode

构造函数：
首字母大写，一般和new一起用
面向对象思想：只关注结果，自己关注的属性都要有
面向过程：关注过程，怎么实现的

原生对象：数组
对象
string
date
math
正则表达式
obj
{
属性名：属性值;
}
json格式数据，键值对的形式
json文件：json格式的数据，键值都要用双引号

json数据的增删改查
访问属性：obj.age obj[‘age’]
添加属性
修改
删除
查找

遍历json对象： for in

for(i in obj){
	console.log(a,stus[a]);
}	
//遍历 forEach（返回undefined，没有返回值） map(可以返回结果)
stus.forEach(function(v,i,arr){
	console.log(v)  //表示数组里的每一个值
	console.log(i) //表示下标
	console.log(arr) //表示要遍历的数组
	if(v.age>20){
		res.push(v);
	}
})

//遍历，第一个参数是一个函数，第二个参数是函数内部的this指向
var obj = {name:'zhangsan'};
var res = arr.map(function(v,i,arr1){
	console.log(v);
	console.log(i);
	console.log(arr1);
	console.log(this);//返回一个数组
	return v;
},obj)
console.log(res);


//过滤
var res = stus.filter(function(v,i,arr){
	return v.age>18
})

创建对象的方式

//单例模式，单体模式
stus = [
{
name:"lihua",
sayHi:function
}
]
//工厂模式
//优点：批量生产
//缺点：每次都要准备，每次需要创建一个对象，每次要返回
function CreateObj(user,num){
            var obj = {
                name:user,
                age:num
            }
            return obj;
        }
        var a = CreateObj('zhnagsan',13);
        console.log(a);
        
//构造函数模式
	函数+this+new
	 function CreateObj1(){
          this.name = 'zhangsan',
          this.fun = function(){
              alert('a');
          }
      }
      var a = new CreateObj1();
      console.log(a);



function CreateObj(){
	console.log(this);
}
var obj1 = CreateObj();
console.log(obj1);  //undefined,普通函数调用
//this指向window对象

var object2 = new CreateObj();
console.log(obj2);  //空对象
//this指向Object2

new做了什么？
1、在函数内部创建了一个空对象
2、修改this的指向，指向自动创建的空对象
3、给空对象添加属性和方法
4、函数执行完之后返回添加了属性和方法的对象
this 谁调用就指向谁

//构造函数模式+原型
 function CreateObj1(name){
          this.name = 'zhangsan',
          
 }
 createObj.prototype.showName = function(){
	console.log(this.name)
}
var obj1 =new CreateObj1('zhangsan',18);
var obj2 =new CreateObj1('zhangsan',18);

	querySelector不可以动态获取节点，就是不可以动态更新节点

day 13###

es 6

Let
let声明的变量不提升；
let的作用域是一个{ }内部；
不可以在定义之前使用let定义的变量；

function test(num){
	if(num!=undefined){
		let a = 5;
		console.log('内部'+a);
	}
	console.log('外部'+a);
}

	var arr = [];
	for(var i=0;i<arr.length-1;i++){
		arr[i] = function(){
			console.log(i);
		}
	}
	//打印出来的i的值为11，因为i是全局变量


	var arr = [];
	for(let i=0;i<arr.length-1;i++){
		arr[i] = function(){
			console.log(i);
		}
	}
	//打印出来的i的值为i，因为let的作用域是当前{}内

let b = 3;//全局变量
for(let i=0;i<5;i++){
	console.log(b);
	let b = 4;
	console.log(b);
}
/*
	1、内部的b覆盖了外面的b（任何形式赋的值/定义的变量都是这样），b的作用域变成了内部的b。
	2、let声明前不可以调用；
	3、let声明的变量在同一个作用域不可以重复声明，可以重复赋值
	4、let可以代替自执行函数；
*/

const

/*
	1、是常量，即不会改变的值，用const声明；
	2、不可以重复赋值；
	3、不可以在声明前使用；

	const arr = []; 
	arr[0] = 122;//这样是可以的
*/

let数组

let[a,b,c] = [1,2,3] //数组结构的赋值
let[a,b,c] = [1,[2],3] //数组结构赋值
let[a,[b],c] = [1,[2],3] //数组结构赋值
let[a,[b],c] = [1,2,3] //赋值出错，右边的结构必须满足左边的结构规则

//字符串
	let[a,b,c] = 'hello';
	console.log(a,b,c);

//对象
	let{a:a1,b:b1,c:c1} = {a:111,b:222,c:333};
	/*会自行匹配key*/

箭头函数

	var fun1 = (num,num1)=>{
		console.log(num);
		return num+1;
	}
//如果参数只有一个，括号可以省略
	var fun1 = num=>{
		console.log(num);
		return num+1;
	}
//如执行的语句只有返回语句一条，直接把return的值写在箭头后面
	var fun1 = num =>num+1;
	var res = fun1(5);
	console.log(res);

	var arr = [1,7,23,6,5];
	arr.sort();//排序的结果是字符串排序，即1,23,5,6,7

	//方法二
	arr.sort(function(a,b){
		return b-a;  //按照数字的大小顺序来排列
	})
	//改为箭头函数
	arr.sort((num1,num2)=>num2-num1);
	
	console.log(arr);

	//find函数
	arr.find(function(n){
		//console.log(n);//一个一个打印出arr的所有值
		if(n>7){
			return n;//返回第一个比7大的值
		}
	})

//this的指向：作用域父级this的指向
//没有arguments对象
//不可以构造函数
//call,apply(方法的特点)

function fun(){
	console.log(n);
}
var obj = {
	name :'zhhangsan'
};
fun.apply(obj,[5]);//第一个参数是把函数内部的this指向obj，第二个参数是数组，传递的每个参数都是数组中的每个值

二阶段复习###

原生事件委托 jq事件委托

ul 
li <a>text</a>

document.getElementsByTagName('ul')[0];
var e = window.event||arguement[0];;
if(e.target.nodeName=='A'){ //判断被点击的节点名是否为‘A’，nodeName都是大写
	//code fere
}