第一天：认识js
1.js是一种由浏览器解释执行的语言，弱类型客户端脚本语言，目前js 有node.js也是可以作为后端语言的、
解释执行：代码不需要进行预编译，程序在运行过程中逐行解释执行
不需要编译，直接在网页中运行
跨平台性好，一般浏览器都能支持js的
强类型语言：需要编译的语言，有c c++ php c# java ，运行效率要高一般运用于后台
随着技术的发展，js的一些框架如vue.js也包含了编译器。可以达到一些特殊的运用
弱类型语言：不需要明确变量的类型，变量的类型在运行中确定的
客户端脚本语言：
相对与b/s（browser/sever）架构而言，运行在客户端的语言
js不需要服务器，用浏览器直接在本地打开运行即可
客户端语言是对外公开的，重要的复杂的业务逻辑由后台语言执行
js的组成：
ECMAscript:包含js的语法
DOM：文档对象模型，提供访问和操作网页内容的方法和接口
BOM：浏览器对象模型，提供也浏览器进行交互的方法和接口
ECMA：Eropean computer manufacturer association：欧洲计算机制造商协会
js的特点：
简单易学，语法和java类似
面向对象的编程思想，例如 Bom,dom的运用
基于事件驱动，特效丰富，如鼠标点击事件，键盘事件
跨平台性，编写一次，可到处运行
知识扩展：
js可以引入域外的脚本，存在安全隐患，通过官网的CDN（云加速器），相对较安全
发布项目的是否可以考虑使用
js语法：每条语句以分号;结束，区分大小写
<noscript></noscript>,需要在谷歌chrome中设置: 设置--内容设置--javaScript--不允许任何网站运行即可
路径问题：作为一名合格的工程师，路径不应该是我们的问题
相对路径：
1.在同一项目的相同文件夹下
2.在同一项目的不同目录下
绝对路径：引用其他网站的资源（外网）
js加载顺序：
根据文档的由上而下的加载顺序进行的，先出现先加载，后出现后加载
这样就会产生js阻塞文档加载：js加载时间较长的会影响页面内容的渲染，用户体验感就会差
如果一个js文件要依赖别的js文件，被依赖的别的js文件需要在前面，加载顺序不能颠倒的
一般把js文件放在body后面
H5进行异步加载，解决阻塞问题：
<script src="ttt.js" defer></script> 推荐defer，兼容性，执行效率都好
<script src="ttt.js" async></script> 立即执行，不推荐
课程关键点：
第二天：js的变量（var定义）和类型
掌握 Number（） unicode编码 tostring方法
变量：
命名规则：1.字母，数字，下划线，$任意组合，不能数字开头不能使用关键字和保留字
使用变量3步骤：定义 初始化 使用
语义化：写的变量名尽量贴近实际的意思
标识符：用于标记某一特定作用的符号，比如变量 函数 属性 方法的参数
常量：赋值后不能在赋值，只能使用，关键字：const const PI=3.14；名称需要全部大写
typeof（）检查变量数据的类型，返回字符串类型
返回的类型有:undefined string boolean number object function
javacript的调试--日志记录 和 断点
控制台输出日志信息：
1.使用prompt（）接受用户的信息
2.使用alert（）弹出警示框
3.confrim（）询问对话框。返回boolean类型
格式化输出：类似C语言
%d表示按整型输出 %f输出小数 %s字符串输出
显示不同日志级别信息：
console.log() console.debug() console.info() console.warn() console.error()
基本数据类型：
任何类型的值都可以通过boolean返回其结果
undefined和null的区别
undefined属于值类型，变量定义了但没有赋值，如：var myname;console.log(mynanme)
null属于object.指向一个空对象，表示没有引用任何对象
boolean任何类型都可以通过boolean返回其结果
boolean true false
String 任意字符 ""
number 非0 0或NaN
object 任何对象 null
undefined undefined
NaN:
1.除数为0，结果为NaN
2.NaN与任何操作，结果为NaN
3.NaN与NaN的比较返回FALSE-----特殊
--------isNaN（）判断是 不是一个数字
isNaN（null）;false ----特殊
isNaN（undefined）;ture ---特殊
console.log(Number(""));//0
console.log(Number(null));//0
console.log(parseInt(""));//NaN
Number(this);//NaN---特殊
Number(NaN);//NaN-----特殊
Number(undefined);//NaN---特殊
数值范围：
最大值和最小值：Number.MAX_VALUE 1.7976931348623157e+308
Number.MIN_VALUE 5e-324
超出范围：Number.MAX_VALUE+Number.MAX_VALUE Infinity
使用isFinite()判断是否在最小和最大值之间
isFinite(Number.MAX_VALUE+Number.MAX_VALUE) //false
isFinite(10+10000) //true
重要：
unicode编码：统一编码标识符是全球通用的，是国际开发的基础，任何系统都能够识别数字和字母的，由16进制组成。
uinicode的特殊字符：\n换行 \t制表 \b空格 \r换行 \\斜杠 \'单引号 \"双引号
\xnn 表示一个字符 如\x41 表示A
\unnnn 中文编码 \u667A 表示“智”
var school = "\u667A\u5b66\u65e0\u5fe7" ;
console.log(school); //智学无忧
console.log(school.length); //4，Unicode都会转义成一个字符
toString()任何一个非空对象都有toString（）方法
var money = 100; var moneyStr = money.toString(); // "100"
var isPass = true ; var passStr = isPass.toString(); //"true"
输出转化成对应进制-- var money = 10;
console.log(money.toString(2)); //1010 console.log(money.toString(8)); //12console.log(money.toString(16)); //a
循环：
1.使用标签来跳出循环
outer:
for(var i=0;i<10;i++){
inner:
for(var j=0;j<5;j++){
console.log("i=" + i + "\tj=" + j);
var conf=confirm("是否结束整个循环");
if(conf){ break outer;}
}
}
2.通过设置与外循环，结束条件，结束外循环
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 5; j++) {
console.log("i=" + i + "\tj=" + j);
var conf = confirm("是否结束整个循环");
if(conf) {
i=9;//通过设置与外循环，结束条件，结束外循环
break ;
}
}
}
try-catch的使用：
try{
var mymoney=10;
console.log(mymoney);
}catch(ex){//这个对象名是标识符。
console.log(ex);
}finally{
console.log("释放资源")
}
console.log("程序结束");
var xhr=new XMLHttpRequest();
xhr.open
空指针异常处理：
var str =null;
try{
document.write(str.name);
}catch(e){
document.write(e+"<br/>");
}
document.write("程序结束");
----对象：
Object:对象是具有相同属性和行为的描述，是引用类型，js的世界也是对象的世界，Object是所有对象的根
创建对象的方式：
var obj=new Object();//采用构造方法
var obj={}; //推荐使用 ，字面量方式
var obj=new Object; //省略构造方法，不推荐
js的运算符：
赋值 ： 变量=表达式 连续赋值： var j=k=x=0
奇葩 赋值 var num=.5
var num=0b1010;// 二进制赋值
var num=010;//八进制赋值
var num=0xa10;//十六进制赋值
算术运算符：
+ 加法 字符串连接符
- 减法 也当作负号
/除法
特殊1：除数为0，var num=1/0，返回 undefined
特殊2：与强类型的一点区别，js除法正确。
java除法取整数
int num=1/2; // java 语言的结果：0
javascript除法取正确数
var nun=1/2;// js 语言结果：0.5
++ --与java一致
取模%： 5%2 返回1（两数相除取余数）
负数求模：-10%3 -10%-3 返回都为-1 -10.5%2返回-0.5---前者为负数，结果为负数
负数取模： 余数是正数还是负数要看被除数
第三天：函数
Math.random() Math.round()
Math.ceil()返回最接近的最大整数，适合用于后面的分页
Math.floor()返回最接近的最小整数
eval()检查js代码并执行，动态执行js
encodeRUI():将文本字符串编码为一个有效的统一资源标识符，开发过程用的上 对 ： / ？ ; 这4个字符不进行编码
decodeRUI()：解码
非常重要，开发使用的：处理url的
encodecompent（“http：//serch.jd.com?www.baidu.com?name=jack&age=20”）
这是传递网址进行编码，防止歧义， 对地址怎么处理呢？
decodecompent()解码
eval()检查并执行，动态执行js脚本
函数：包括系统函数和自定义函数（无参，带参数）
使用function关键字定义函数，不能与系统函数重名，参数可有参数和无参数
js的没有函数重载的概念，可以使用argument获取对象参数信息
例子：function abount(){
console.log("方法的参数如下");
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
abount(3,2);
匿名函数：在jquery中使用的较多（js称为函数表达式）
即时函数，会形成一个私有的作用域
return：退出当前的函数
函数调用的3种方式：
1.通过函数表达式 var myFunc=function(){console.log("ok")}
2.即时函数 (function(){console.log("ok")})();
3.通过事件 window.onload=funciton(){ console.log("ok")}
4.通过使用链接调用
<a href="javascript:Func()">ddd</a>
<a href="javascript:void(0)">ddd</a>
重要：in for..in / instanceof
测试对象中是否存在该属性：---in ----- 常用
var a = new Array("a","b"); var isIn=length in a; console.log(isIn); ---true
结合for循环，遍历所有属性 for(var w in window){console.log(w);}
instanceof 数据类型：指变量是否可以强转指定的类型，检测类型的时候兼容
作用域：
变量的使用范围与变量定位的位置 有关系
全局变量：在整个js运行过程中都能访问
注意：
对于没有使用var定义的变量是隐式全局变量，要先执行一遍后才才生效，否则就是没有定义的变量，不推荐使用，会污染
使用var 定义的变量会自动添加到最近的环境中
局部变量：
js中没有块级作用域，在ES5中新增加let定义块级作用域，新增const定义常量 这也是块级别作用域
对象：
Object可以理解成一个变量，可以含有多个变量，只通过一个变量来操作
1.通过new来创建
2.通过字面量来创建--推荐使用
第4天：常见的引用类型
1.Object
2.Array数组-----对数据操作
什么是数组：
1.一次排列多个值，每个值都有对应的编号，从0开始
2.数组元素的类型可以不一样
3.数组的作用在对数据的管理，方便对数据的操作
创建数组：
js中的数组没有真正意义上的下标，而是属性。所以不存在数组越界
常用创建方式：
var Array=[]；空数组
var Array=["aa","bb","cc","dd"]
赋值：边创建，边赋值。先创建，在赋值
给数组添加属性：
注意： [ ] 除了数组中索引号，也可以用来给对象添加属性，获取对象的属性值
数组的截断：--通过length
var arr=[1,2,3,4,5]
arr.length=3 arr.length=0(清空)
数组类型的判断：
1.Array.isArray() ES5的提供的API
var arr=["javas","html"]; Array.isArray(arr); //true
2.instanceof操作符
var arr=["javas","html"]; console.log(arr instanceof Array); //true
3. constructor属性
var arr=["javas","html"]; arr.constructor===Array //true
常见的数组操作方法：
Array.join（）---分隔成数组，把字符连接成数组的元素，并将结果返回
var arr=[2,6,9,10]; var str=arr.join(); console.log(str); // "2,6,9,10"
str.split()---分隔成数组
var str="web前端/java/css/json";
var webs=str.split("/"); console.log(typeof webs);
console.log(webs); //["web前端","java","css","json"]
栈方法(数组元素添加与删除)：
push() pop() shift() unshift()
1.向数组末尾添加元素 push()
var arr=[]; arr.push(1); arr.push(3); // 2 表示添加的个数 arr变为 [2,3]
向数组末尾移除最后的元素pop()
var arr=[2,3]; arr.pop();//[3],表示移除的元素 arr变为[2]
2.shift() 添加与unshift()移除 --对第一个元素进行操作
var arr=["A","B","C"]; arr.shift();//[A] arr变为["B","C"]
arr.unshift("DE");//3 --当前元素的个数 arr变为["DE","B","C"]
数组元素的排序：
reverse() sort() sort(compareFn)
3.数组的元素的翻转 reverse()
var arr=["A","B","C"]; arr.reverse(); //["C","B","A"]
4.sort（）
sort()不带参数是默认按照字符串升序排列，在比较的时候，会将元素转化成字符串在比较,比较的是第一个字符
var arr=["java","ajax","css"]; arr.sort(); //["ajax","css","java"]
var arr=[11,15,22,56,33,3,5,6];arr.sort();//[11,15,22,3,33,5,56,6]---哈哈，不合理了吧
sort(compareFn)----;sort()提供了一个带比较函数的参数
var arr=[11,15,22,56,33,3,5,6];
arr.sort(function(num1,num2){ return num1-num2;}); console.log(arr);//[3,5,6,11,15,22,33,56]
arr.sort(function(num1,num2){ return num2-num1;}); console.log(arr);//降序
数组的其他操作：连接 截取 剪接
concat() slice() splice()
1. concat()连接两个数组
var arr1=["A","B","C"];var arr2=[2,3];var arr=arr1.concat(arr2);console.log(arr);//["A","B","C",2,3]
2. slice(start,end)截取数组，返回截取后的数组,包含start位置，不包含end位置 -- 不影响原来的数组
var arr=[11,15,22,56,33,3,5,6];
console.log(arr.slice(3,7));//[56,33,3,5]
console.log(arr.slice(3));//[56,33,3,5,6];
console.log(arr);//[11,15,22,56,33,3,5,6];//原来数组不变，即不影响原来的数组
3. splice()数组剪接，可以对数组做很多添加、删除、更新的操作------应用频率要高，功能较强大
splice(start,deleteCount，items)
start：可选参数，操作的起始位置，从0开始计数的
deleteCount：删除的个数
items：替换删除位置的值
var arr=[11,15,22,56,33,3,5,6];
arr.splice();//不做操作
arr.splice(3,2,100,101,102);//[56,33]
console.log(arr)//[11,15,22,100,101,102,3,5,6]
var arr1=[11,15,22,56,33,3,5,6];
arr1.splice(0,0,200,300); console.log(arr1);//[200,300,11,15,22,56,33,3,5,6]
数组找位置：
indexOf() lastIndexOf() str.substring()
indexOf()：通过找数组中的某个元素，返回这个元素的位置，找不到返回-1
var arr=["java","ajax","hh","css","aa","hh"];
console.log(arr.indexOf("css")); //3
console.log(arr.indexOf("css22222"));//-1找不到返回-1
lastIndexOf()：通过寻找数组中最后出现的某个元素（假设有重复元素），返回这个元素的位置
console.log(arr.lastindexOf("hh"));//5,找的是后面那个“hh” ，找不到-1
str.substring()---截取字符串
var str="Hello world!"
document.write(str.substring(3)) //lo world
document.write(str.substring(3,7)) //lo w
数组的几种迭代操作：
forEach() filter() map() reduce()
1.forEach()
var num=[10,20];
num.forEach(function(item,index,array){console.log("item="+item+"index="+index+"array="+array)});
//输出item=10 index=0 array=10,20 item=20 index=1 array=10,20
item：表示遍历数组的元素 index：元素的下标 array：原始数组对象
2.filter()数组过滤
var num=[10,20,30,40,50,60];
var newnum=num.filter(function(item,index,array){return item%3==0;});
console.log(newnum);//[30,60]
console.log(num);//[10,20,30,40,50,60]
3.map()数组映射 ,给符合条件的数据重新赋值
var num=[10,20,30,40,50,60];
var newnum=num.map(function(item,index,array){if(item%3==0){return item+2};});
console.log(newnum);//[undefined,undefined,32,undefined,undefined,62]
console.log(num);//[10,20,30,40,50,60]
4.reduce()缩小方法:迭代所有的元素最终返回一个值 reduceRight()表示从右边开始遍历
//prev:当前一个值 cur：当前值 index：当前下标 array：原始数组
var num=[10,20,30,40,50,60];
var newnum=num.reduce(function(prev,cur,index,array){return prev});//10
var newnum=num.reduce(function(prev,cur,index,array){return cur});//60
var newnum=num.reduce(function(prev,cur,index,array){return prev+cur});//210相当于求和
console.log(newnum);
console.log(num);
-----日期对象
Data日期类型：
Data对象的构造：
var date=new Date(); //以当前时间来构造
var date=new Date(2017,04,01); //以指定的时间来构造
比较特殊：1--12月在js中是0--11 周一-周五 1-5 周日是0
获取 date.getFullYear() getMonth() getDate()-日 getHours() getMinutes() getSeconds() getMillseconds()-毫秒 getDay()-星期
date.getTime()---把正常时间写法转为 获取自1970-1-1到现在的毫秒数
设置时间：对应使用 set
var now=Date.now()获取1970-1-1到现在的毫秒数
日期的转换：
1.字符串转日期
var str="2017-5-3" var date=Date.parse(str); console.log(date); //输出的是毫秒数
毫秒数再转成日期格式 var newdate=new Date(date) //Mon May 01 2017 00:00:00 GMT+0800 (中国标准时间)
2.日期转字符串
var date=new Date();
console.log(date.toLocaleDateString()); //转本地日期格式 2017/5/8
console.log(date.toLocaleTimeString()); //转本地时间格式 下午3:23:56
console.log(date.toLocaleString()); //转本地日期+时间 2017/5/8 下午3:23:56
--BOM对象
BOM：
window对象：对地址栏，存储数据，文档之类的交互操作
window===this;//true
1.BOM的基本概念
2.window对象与ECMAscript的联系
3.window的全局作用域
4.自动的扩展属性和window添加的属性的细微区别
区别一：自动的扩展属性不能够直接删除
var address="深圳";
delete address;//false
window.age=20;
delete age;//true
区别二：定义的变量查找方式不一样
var myAge=age;//报错，在作用域链上查找，找不到（在本地找）
var myAge=window.age;//undefined,直接在window对象上找，找不到返回undefinded
在js中明确调用的对象是一个好的习惯，也能提升程序的性能
重要：
navigator: 浏览器类型的判断
var browser=navigator.userAgent;
if(browser.indexOf("MSIE")>0){
console.log("IE浏览器")}
else if(browser.indexOf("Chrome")>0){
console.log("Google浏览器");
}else if(browser.indexOf("Firefox")>0){
console.log("Google浏览器");
}else{
console.log("其他浏览器");
}
window的几个属性： location screen history
location：host hostname href port protocol reload（） replace（） search:获取参数信息
----定时器（延时器）
setTimeout() clearTimeout()-----
setInterval() clearInterval()----周期性延时器
cookie：
cookie存储在客户端，打开浏览器发送请求，cookie会自动发送到服务器，由服务器读取，cookie的数据持续时间由用户自己定义
但cookie大小有限一般在4096字节，即3K限制，cookie一般安全隐患较大，一般不要把登录注册的重要信息用cookie存储，cookie只 存储一些不是很重要的标识信息。
计算机中，用户一般设置为禁用！！
cookie特点：
cookie的内容：采用key=value;key=value..存储，参数名自定义
cookie的过期时间：使用参数 expires
cookie的路径：使用path， “/”表示这个网站的网页，不推荐。容易造成冲突
注意： 形如“/pro/index.html” 路径，在google浏览器正常，在IE浏览器得不到值
设置cookie : var name="jack",pwd="123" var now=new Date(); now.settime(now.getTime()+1*24*60*60*1000); //转毫秒
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path; //姓名
document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString() + ";path=" + path; //密码
读取cookie ：var data=document.cookie;
删除cookie : var name=null,pwd=null,now=new DAte()
其他存储 方式：
html5 的web存储：
localStorage：本地存储
1.使用key-value的形式存储数据，数据只能是String数据
2.使用setItem()存储，使用getItem()获取
3.数据是永久存储的，即便是浏览器关闭或者电脑重启数据不丢失。
4.有效访问：针对同一个客户端，浏览器、网站有效（只能在同一中浏览器上，同一个网站下，localStore的值是按照网站名称来存储。
同一个网站下面的所有页面都是能够访问的）
页面间的传值：
第一种：使用cookie
步骤：
第一页：进行获取输入的内容，设置cookie存储
第二页：通过var data=document.cookie获取cookie内容;主要是获得key，那就要通过indexOf(),在通过substring（）找到key对应的value值
第二种：使用queryString（url参数传值）
步骤：
第一页：
通过节点获得内容，利用url="getquerystring.html?myname="+strName;
strName需要encodeURIComponent（strName），指定打开方式// 本窗口location.href=url;
另起窗口 window.open(url,"cookie");
第二页：获得显示内容，写一个获取参数的方法，里面解析通过location.location.search.substring(1):"" 解析url
第6天：Document
document的方法：
getElementById("id")--返回对应标签的元素对象，都继承HTMLElement,参数大小区分大小写
getElecmentsByClassName("xx") --返回HTMLCollection,参数区分大小写
getElecmentsByName("yy")--返回Nodelist
getElecmentsByTagName("div")--根据标签获取元素，返回HTMLCollection,参数区分大小写
getRootNode() --获取根节点，返回document对象
querySelector()--返回HTMLElement对象，参数不区分大小写
querySelectorAll()--返回Nodelost，参数不区分大小写
document的属性：
常用的：
document.documentElement --始终返回<html>... </html>