第四周JS

BOM:Browser Object Model:浏览器对象模型：提供专门用操作浏览器的一些对象（属性和方法），没有标准（大部分浏览器还是统一的，唯独老IE不同）

重点：定时器，事件对象event
DOM:是有标准的，w3c规定的，几乎没有兼容性问题

2.window对象介绍：扮演着两个角色
1.代替了ES中的global，充当全局对象-保存全局变量和全局函数
2.自己也带有一些属性和方法，指代当前窗口本身

1.网页打开新链接的方式：4种
1.替换当前页面，可以后退
2.替换当前页面，禁止后退-场景：电商网站，付款后不允许退回再次付款
history对象：记录当前窗口的历史记录，只有有了历史才能前进后退
location对象：记录着当前窗口正在打开的url，而他又一个方法叫做替换，替换不会产生任何历史记录
JS:open("url","-blank");
3.新窗口打开，可以打开多个
4.新窗口打开，只能打开一个-场景：电商网站，只允许用户打开一个付款页面
扩展a标签的作用：
1.跳转
2.锚点
3.下载
4.打开
5.直接书写

2.window提供了属性和方法：
属性：获取浏览器的完整大小：window.outerWidth/outerHeight;
          获取浏览器的文档显示区域的大小：innerWidth/innerHeight
获取屏幕的大小
screen.Width/screenHeight;
每个人的电脑分辨率是不一样的

方法：1.打开窗口：open("url","自定义的name","width=,height=,left=,top=");
注意：1.第三个配置参数没有传入时，窗口大小和浏览器一样，融为一体
2.写入第三个实参，则会脱离浏览器并且独立成一个小窗口，可以保存起来，设置它为绑定事件
3.宽高不能设置的太小

2.关闭窗口：window/newW.close（）；
3.修改窗口的大小：newW.resizeTo(new宽，new高);
4.修改窗口的位置：newW.moveTo(x,y);

5.获取鼠标的位置：
1.绑定事件：事件处理函数，形参可以写一个e，自动获取对象的event
2.获取坐标：3种
e.screenX/Y-获取鼠标相对于屏幕的位置
e.clientX/Y-获取鼠标相对于客户端、浏览器的位置
e.pageX/Y-获取鼠标相对于页面的坐标

2.鼠标的跟随动画
事件：window/document.onmosuemove
2.js的加载速度比图片的加载速度快，加载事件：onload事件
3.删除图片，是在动画开始时开启了定时器
3.*****定时器：
1.周期性定时器
开启：setInterval(callback,间隔毫秒数)
停止：clearInterval(timer)
2.一次性定时器
开启：timer=timeOut(callback,间隔毫秒数)
停止：clearTimeout(timer)
注意：一次性和周期性底层都是一样的，甚至可以互换

1.history对象：保存当前窗口的历史记录（打开过的url），可用于
前进：history.go(1);
后退：history.go(-1);
刷新：histoyr.go(0);

2.*navigator对象：保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号
属性：navigator.userAgent;

3.***location对象：保存当前窗口正在打开的url
1.常识：一个url由5个部分组成

4.event对象：事件对象
事件：用户触发的或浏览器自动触发的（onload）
1.绑定事件：3种
1.在html页面上绑定事件
<elem on事件名="js语句"></elem>
2.在js中使用元素的事件处理函数属性：
elem.on事件名=function(){操作}
3.使用专用的事件API绑定事件
主流：elem.addEventListener("事件名",callback)
老IE:elem.attachEvent("on事件名",callback)

2.事件周期：
主流：3个阶段
1.捕获阶段，记录着要发生的事件有哪些
2.目标元素优先触发，目标元素=》实际触发事件的元素
3.冒泡触发，向上触发所有的记录着的事件
老IE:2个阶段，没有捕获阶段

3*****获取事件对象event:
主流：会自动作为事件处理函数的第一个形参传入
elem.on事件名=function(e){e->event}
老IE:event;
兼容：var e=event;
作用：
1.获取鼠标坐标位置
2.阻止冒泡
主流：e.stopPropagation()
老IE：e.cancelBubble=true
兼容：e.cancelBubble=true
3.***事件委托/利用冒泡-笔试面试开发中
优化：如果多个子元素定义了相同或者相似的事件，最好只给父元素定义一次
为什么 ：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差

*****认识一个目标元素：target：你点击的是哪一个，永远就是哪一个
主流：e.target;
老IE:e.srcElement;
兼容：e.srcElement;

4.***阻止浏览器的默认行为
a标签默认跳转页面，右键子代一个弹出窗，F12打开一个控制台，F5会刷新
主流:e.preventDefault();
老IE:e.returnValue();
新事件：window.οncοntextmenu=()=>{鼠标右键事件}
window.onkeydown|up|press=()=>{键盘事件}
5.获取键盘键位
e.keyCode;===

1.每个模块都有一个操作，可以公开/暴露自己的成员:exports.属性名=值
2.每个模块都有一个操作，可用于引入其他模块:
var xxx=require("./文件名");- ./在引入时是不可以省略的，但是文件后缀可以省略
笔试题:exports和module.exports有什么区别?
都是用于公开暴露自己的成员的
但是:exports=写法是错误的，为什么?
node.js的底层有一句话:exports=module.exports;其实真正做公开功能的是module.exports
如果你使用exports={};覆盖了module.exports，不再具有公开功能

Node.js最大的特点：
1.非常快
2.为什么快：
①官方模块提供的东西少，甚至连数据库操作都没有
②使用google浏览器的v8引擎

官方模块：不需要下载，有些需要引入，有些不需要引入
1*global:全局模块，不需要引入，可直接引用
__dirname-当前文件夹的绝对路径
__filename-当前文件的完整的绝对路径
exports-一个空{}，公开和暴露自己的成员
*module-指代当前模块本身，包含其他4个变量
*require()-一个函数，引入其他模块
定时器
控制台

2.querystring模块：查询字符串，用于解析
需要引入let qs = require( ' querystring ' );
提供了解析url的查询字符串部分的功能
var obj=qs.parse("查询 字符串部分");
想要获取前端传来的某一个部分：obj.键名;

3.url模块：网址模块
需要引入: let url = require('url');
提供了一些实用函数，用于URL处理与解析
var objUrl=url.parse("完整的url网址",true);
真正的重点：
1.查询字符串：objUrl.query.键名-拿到前端的传到后端的东西
2.路由：objUrl.pathname;-判断路由的不同，响应不同的网页给用户

4.Buffer模块：缓冲区，可以将数组变成一个16进制的数字
直接使用
不主动使用，不认识，Node,js大部分的API其实是支持buffer操作，理解为Node.js提供的一种新的数据类型

5.*****fs模块：FileSystem-文件系统-大重点
提供了可以操作文件的API
需要引入 let fs = require('fs');
同步
异步读取文件：fs.readFile("文件路径",(err,buf)=>{拿到buf要做什么？就需要写在这里})
异步写入文件：–将原来的东西，替换掉
fs.writeFile("绝对路径|文件路径"，"写入的新内容",()=>{console.log("写入完毕了，以后要做什么")})
异步追加文件：

6.http模块-使用代码搭建服务器
固定步骤：
引入：http=require("http")
var url=require("url");
创建服务器应用：var app=http.createSever()
监听：app.listen(80);https默认端口为443
为服务器绑定事件：前端发到后端的,自己想要访问自己，使用127.0.0.1，访问别人，打开CMD，输入ipconfig,拿到IPV4
app.on("request",(req,res)=>{})