day22
1.DOM:
Browser Object Model:
浏览器对象模型：提供专门用于浏览器的一些对象(属性和方法),没有标准(大部分浏览器还是统一的)，老IE除外 - 使用率相对较低
重点：定时器，事件对象event
DOM:是有标准的:w3c规定的，几乎没有兼容性问题
2.window对象介绍:扮演着两个角色
1.代替了ES中的global,充当全局对象--保存全局对象和全局函数
2.自己也带有一些属性和方法，指代当前窗口本身
1.网页打开新链接的方式,4种：目的：提升用户体验
1.替换当前页面,可以后退
html:<a href="url">内容</a>
js:open("url","_self")
2.替换当前页面，禁止后退 - 场景：电商网站,付款后，不允许退回去再付款
history对象:记录着【当前窗口】的历史记录，只有有了历史记录才能前进后退
localtion对象：记录着【当前窗口】正在打开的url,而他有一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转
js:location.replace("新url")
3.新窗口打开，可以打开多个
html:<a href="url" target="_blank">内容</a>
js:open("url","_blank")
4.新窗口打开，只能打开一个 - 场景：电商网站，只允许打开一个付款界面
html:<a href="url" target="自定义name">内容</a>
js:open("url","自定义name")
自定义name的意思：每个窗口底层都有一个名字:target其实就是在设置名字，name如果相同，新打开的窗口就会把旧窗口给替换掉(刷新)
HTML能做的，JS都能做，JS能做的，HTML不一定可以
扩展:a标签的作用：
1.跳转；
2.锚点；
3.下载：<a href="xx.exe|rar|zip|7z/">内容</a>
4.打开:<a href="xx.图片后缀/txt/">内容</a>
5.直接书写js:<a href="javascript:js代码">内容</a>
3.window提供了属性和方法:
属性：获取浏览器的完整大小:outerWidth/outerheight;
获取浏览器的文档区域大小:innerWidth/innerHeight;
获取屏幕的完整大小:screen.width/height
每个人的电脑分辨率是不一样的
方法：1.打开窗口:var newWindow=open("url","自定义的name","width=,height=,left=,top=")
注意：
1.第三个配置参数没有传入时，窗口大小和浏览器一样，并且黏在浏览器上，融为一体
2.写入了第三个实参,则会脱离浏览器并且为一个独立的小窗口，可以保存起来，设置为绑定事件
3.宽高不能设置的太小了
2.关闭窗口:window/newW.close()
3.修改窗口的位置:newW.moveTo(x,y)
3.****定时器
1.周期性定时器：
开启：timer=setInterval(callback,间隔毫秒数)
关闭：clearInterval(timer)
2.一次性定时器：
开启:timer=setTimeout(callback,间隔毫秒数)
关闭：clearTimeout(timer)
注意：一次性定时器和周期性定时器底层都是一样的，甚至可以互换，所以到底使用哪一个无所谓
面试题：函数、循环、和定时器都能反复操作执行，区别是什么？ - 时机不同
1.函数:用户触发或程序员调用
2.循环:一瞬间基本就结束了
3.定时器：等待一段时间做一次
扩展： 1，绑定事件：事件处理函数行参可以写成一个e,自动获取到事件对象event 2.获取坐标：3种 e.screenX/Y 获取鼠标对于屏幕的位置 e.clientX/Y 获取鼠标相对于浏览器/客户端的位置 e.pageX/Y 获取鼠标相对于页面的坐标 3.鼠标的跟随动画 1.事件window/document.onmouseover 2.js的加载速度比图片加载块，加载事件：onload事件 3.删除图片，是在动画开始时开启了定时器
day023
1.BOM的其他对象:
1.history对象：保存【当前窗口】的历史记录(打开【过】的url),可用于
前进:history.go(1)
后退:history.go(-1)
刷新:history.go(0)
2.***navigator对象:保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器及版本号 - 类似css hack(浏览器兼容性问题的，专门针对老IE)，但是更强大哦，单独为老IE写js
HTML5(语义化标签，增强型表单，音视频)和css3(过渡，动画，转换，媒体查询，阴影，弹性盒子，rem...)和ES5以上的任何东西，老IE都是不支持的，所以要做兼容
BOM确实有很多具有兼容性问题，但是我们不需要自己使用navigator去做兼容
3.***location对象：保存当前窗口【正在打开】的url
1.***常识：一个url网址由哪些部分组层 - 5部分
协议名：http,https,fps,ws(直播)
域名/主机号：底层大家都是主机号，域名是需要花钱购买的
端口号：默认端口可以省略不写，https默认端口是443，http的默认端口是80
*文件的相对路径/路由：决定着用户看到的是那个网页
*查询字符串/请求消息：客户端发送到服务器端的东西，服务器需要接住然后判断我们请求的是什么，才能进行响应 - 和后端进行沟通交流的关键点
协议名://域名:端口/路由?请求
我们可以通过location得到这个url的每一个部分，直接console.log输出判断location就能直接看到
协议名：location.protocal
域名：location.hostname
端口号：location.port
路由：location.pathname
请求消息：location.search
2.作用：跳转
location="新url"
跳转后禁止后退：location.replace("新url");
刷新：location.reload()
4.***event对象：事件对象
事件：用户触发或浏览器自动触发的(onload)
1.绑定事件：3种
1.在HTML页面上绑定事件
<elem on事件名="js语句"></elem>
缺点：
1.不符合内容(html)与样式(css)与行为(js)分离的原则
2.无法动态绑定事件(一次只能绑定一个元素)
3.无法同时绑定多个函数对象
2.*在js中使用元素的事件处理函数对象
elem.on事件名=function(){
操作;
}
优点：
1.符合内容(html)与样式(css)与行为(js)分离的原则
2.动态绑定事件
3.没有兼容性问题
缺点：
1.无法同时绑定多个函数对象。--解决办法：可以把多个操作写到一起
3.使用专门的事件API绑定事件
主流：elem.addEventListener("事件名",callback);
IE:elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
优点：
1.符合内容(html)与样式(css)与行为(js)分离的原则
2.动态绑定事件
3.同时绑定多个函数对象
缺点：
1.具有兼容性问题
2.事件周期：
主流：3个阶段
1.捕获阶段，记录者要发生的事件有哪些
2.目标元素优先触发，目标元素->实际触发事件的元素
3.冒泡触发，向上触发所有的记录着的事件
老IE：3个阶段，没有捕获阶段
3.***获取事件对象event:
主流：会自动为事件处理函数的一个行参参入
elem.on事件名=function(e){e->event}
老IE：event
兼容：var e=event;// 不光老IE可用，主流也可用
*****获取到event事件对象，我们可以干什么？
1.*****获取鼠标的位置/坐标
2.**阻止冒泡 - 笔试中：开发几乎不用：
优化：如果多个子元素定义了相同或相似的事件，最好只给父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件越多，网站的性能越差
淘汰this:当前元素
认识一个目标元素：target:你点击的是哪一个，永远是哪一个
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;// 不光老IE可用，主流也可用
4.**阻止浏览器的默认行为：a标签默认跳转页面，右键自带一个弹出框，F12打开控制台，F5会刷新
主流:e.preventDefault();
老IE：e.returnValue=false;
兼容：e.returnValue=false;// 不光老IE可用，主流也可用
新事件：
window.oncontentmenu=()=>{//鼠标右键事件}
window.onkeydown=()=>{//键盘事件}
5.获取键盘的键码：
e.keyCode;//不需要记忆，需要使用时，百度或输出查看
day024
1.Node.js安装
1.查看版本号：打开cmd 输入node 即可查看版本号
2.Node.js如何运行
1.交互模式：临时测试
打开cmd输入node回车，就可以开始敲js代码
退出：ctrl+c
2.脚本/文件模式 - 正式开发中，丑了点
1.创建xx.js文件：里面书写自己的js代码
2.打开cmd输入node 文件绝对鹿筋
3.插件运行
1.HBuilder:安装一个nodeeclipse,右键运行
2.VScode:安装一个插件:搜索run，代码处右键，即可运行
3.Node.js的知识
1.js和Node.js的区别：
相同点：都可以使用一切都ECMAScript的一切API和语法；
不同点：
1.javascript:DOM+BOM 做一切特效
2.Node.js:虽然不支持BOM和DOM，但是他却提供了10W+的主模块
2.模块：每个.js文件，都可以称之为是一个模块
1.模块化开发方式
分工合作，将每个模块交给对应的人完成，最后再由【主模块】引入
1.每个模块都有一个操作：公开/暴露自己的成员
1.exports.属性名=属性值
2.module.exports={
属性名:属性值,
...
}
2.每个模块都有一个操作，可用于引入其他模块
var xxx=require("./文件名"); ./在引入时是不可以省略的，但是文件后缀可以省略
笔试题：
exports和module.exports的区别？
都是用于公开/暴露自己的成员
但是：exports={}的写法是错误的
node.js的底层有一句话:exports=module.exports;
其实真正做公开的功能是module.exports,如果使用exports={};覆盖了module.exports,不再具有公开功能
3.模块的分类
1.官方模块
2.第三方模块
3.自定义模块
node.js的最大特点：
1.快，非常的快，是PHP的14倍，异步能够发挥node.js的最大特点
2.为什么快：
1.因为官方模块提供的东西少，甚至连数据库操作都没有
2.使用goole浏览器的v8引擎
4.官方模块：不需要下载，在安装node.js环境的时候就已经安装好了，但是某的模块需要引入，某的模块不需要引入，需要看官方文档
1.Global模块：全局模块
全局变量在随有的模块中均可使用，不需要引入，但是提供了一些全局变量给我们，我们可以直接使用
*__dirname - 当前文件夹的绝对路径
__filename - 当前文件的绝对路径
*exports - 一个空{}，公开暴露自己的成员
*module - 指代当前模块本身，包含了其他4个变量
*require() - 一个函数，引入其他模块的
2.Quirestring模块:查询字符串
需要引入：let qs=require("quirestring");
提供了解析url的查询字符串部分的功能
var obj=qs.parse("查询字符串的部分功能")
想要获取前端传来的某一部分：obj.键名
只能解析查询字符串部分，如果前端传来的是一个完整的url网址，那它就解析不了
3.*Url模块：网址模块
需要引入：let url=require("url");
提供了一些实用函数，用于【完整的url】解析
var obj=url.parse("完整的url",true);//此方法会将url网址的各个部分完全解析出来，支持传入第二个参数，是一个布尔值，如果传入的是一个true，自动调用querystring的parse方法，顺便也解析了查询字符串(请求消息:前端 -> 后端的东西)部分
1.查询字符串：objUrl.query.键名 - 拿到前端传到后端的东西
2.路由：objUrl.parsename;判断路由的不同，响应不同的网页
4.buffer模块：缓冲区，可以将数组变成一个16进制的数字
不需要我们引入，可以直接使用
但是我们不会主动使用buffer的任何操作，node.js的大部分操作支持buffer操作
5.*****fs模块：FileSystem - 文件系统 - 重点
需要引入：let fs=require('fs');
提供了可以操作文件的API
异步读取文件：
fs.readFile('文件绝对路径|文件路径',(err,buf)=>{
拿到buf要干什么，就需要写在这里
})
异步写入文件：
fs.writeFile('文件绝对路径|文件路径','写入的新内容',()=>{
写入完毕后，要干什么，就需要写在这里
})
异步追加文件:
fs.appendFile('文件绝对路径|文件路径','写入的新内容',()=>{
写入完毕后，要干什么，就需要写在这里
})
day025
官方模块
6.***http模块 - 使用代码搭建服务器
固定步骤：
引入http,url,fs官方模块
var http=require('http');
var url=require('url');
var fs=require('fs');
//创建服务器
var app=http.createServer();
//为服务器设置监听的端口号
app.listen(80);//http默认端口80，https默认端口443
//为服务器绑定请求事件
app.on('request',(req,res))=>{
//req - request;保存请求对象，请求对象 前端 ->后端，提供了一个属性req.url，解析此属性拿到自己需要的部分(路由|请求)
}
fs.readFile("./public/index.html",(err,buf)=>{
res.end(buf)
})
}else if(router.mactch(/html/)!=null){
console.log(router);
fs.readFile('./public'+router,(err,buf)=>{
red.end(buf);
})
}
}
强调：
1.***前端的一切action,href,src,所有引入路径的地方，全部都被node.js当作了一个路由请求，解析请求，读取对应的文件给用户看
2.自己想要访问自己，打开浏览器，可以用127.0.0.1 , 访问别人(前提:防火墙关闭)
以上操作完成了使用代码搭建服务器&文件系统
1.模块(每个.js文件)分类
1.官方模块：var xx=require("官方模块名")
2.第三方模块：
3.自定义模块：2大类
为什么有的模块引入时加上./,有的模块又不需要
1.文件模块：创建xx.js去公开需要公开的内容，主模块想要引入必须写为require("./文件名")
2.目录模块：3种
1.创建名为m1的文件夹,在其中创建index.js的文件,去公开需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
2.创建名为m2的文件夹,在其中创建xx.js的文件,去公开需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
但是需要在m2文件夹中，再创建一个必须为：package.json的配置文件
3.创建一个必须名为node_modules的文件夹，在其中创建名为m3的文件夹，再在其中创建index/xx.js的文件，去公开需要公开的内容，主模块想要引入，必须写为require("文件夹的名字")
真实开发中，程序员使用最多的就是文件模块，目录模块是给npm使用的
2.npm:node package manager:node的模块/包管理器:专门管理第三方模块的，作用：下载安装,删除，更新，维护包的依赖关系
如何使用第三方模块：
1.打开网站：npm;
2.搜索需要用到的模块，尽量使用带有完全符合标志的包
3.打开cmd:检查npm下载工具是否安装成功 npm -v
4.下载:npm i 包名
5.删除:npm un 包名
6.更新:npm up 包名
3.数据
数据库产品：存放很多和网站相关的数据
关系型数据库 - 以表格为主
oracle/mysql/sql server
非关系型数据库 - 没有固定格式
mongoDB 以json数据格式为主
