BOM：Browser Object Model ：浏览器对象模型：提供专门用操作浏览器的一些对象（属性和方法），没有标准（老IE）； 定时器、事件对象event window对象介绍：扮演着两个角色 1.代替了ES中的global，充当全局对象 - 保存全局变量和全局函数 2、自己也带有一些属性和方法，指代当前窗口本身 ` 提供打开新链接的方式 目的提升用户体验 1.替换当前页面 可以后退 HTML：内容 JS：open("url","_self");``` 2.替换当前页面，禁止后退 - 场景：电商网站，付款后不允许退回去再次付款 history对象：记录着【当前窗口】的历史记录，只有有了历史才能前进后退 location对象：记录着【当前窗口】正在打开的url，而他又一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转 JS：location.replace("新url") 3.新窗口打开，可以打开多个 HTML：内容 JS：open("url","_blank"); 4. 新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面 HTML：内容 自定义name的意思：每一个窗口底层都有一个名字，target其实就是在设置名字，name如果相同，新打开的窗口就会把旧窗口给替换掉（刷新） JS：open("url","自定义的name");
扩展a标签的作用：
1、跳转
2、锚点
3、下载：<a href="xx.exe/zip/rar/7z">内容</a>
4、打开：<a href="xx.图片后缀/txt">内容</a>
5、直接书写js：<a href="javascript:js代码;">内容</a>
3.window提供了属性和方法： 属性：获取浏览器的完整大小：outerWidth/outerHeight; 获取浏览器的文档显示区域的大小：innerWidth/innerHeight 获取屏幕的完整大小：screen.width/height; 每个人的电脑分辨率是不一样的 4****** 周期性定时器 开启timer=setInterval(callback,间隔毫秒数)； 停止：clearInterval(timer); 一次性定时器 开启 timer=setTimeout(callback,间隔毫秒数) 停止：clearTimeout（timer）； 面试题：函数 和 循环 和 定时器都能反复执行操作，区别？ - 时机 1,。函数-用户触发，程序员调用 2、循环 - 一瞬间基本就结束了 3、定时器 - 等待一段时间做一次
BOM的其他对象： 1、history对象：保存【当前窗口】的历史记录（打开【过】的url），可用于可用于 前进：history.go(1); 后退：history.go(-1); 刷新：history.go(0); *navigator对象：保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号 - 类似于css hack（浏览器兼容性问题的，专门针对老IE），但是更强大，单独为老IE写js 属性：navigator.userAgent; - 能够得到一个字符串，包含着是什么浏览器以及版本号，想办法去拿到你需要的部分
HTML5（语义化标签、增强型表单、音频视频）和CSS3（过渡、动画、转换、媒体查询、阴影、弹性盒子、rem...）和ES5以上的任何东西，老IE都是不支持的，所以要做兼容
BOM确实有很多具有兼容性问题，但是我们不需要自己使用navigator去做兼容，前辈们帮我们已经做好了
**location对象：保存当前窗口【正在打开】的url
1、***常识：一个url网址由哪些部分组成 - 5部分
http://127.0.0.1:8020/bom02/new/03navigator%E5%AF%B9%E8%B1%A1.html?__hbt=1663118768002
https://www.baidu.com/s?wd=%E5%B1%8C%E7%88%86%E5%95%A6&rsv_spt=1&rsv_iqid=0x9a5c128800018a49&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=1&rsv_sug3=10&rsv_sug1=7&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4415&rsv_sug4=4416
协议名：https、http、ftp、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();
、*****event对象：事件对象 事件：用户触发的 或 浏览器自动触发的（onload） 1、绑定事件：3种 1、在HTML页面上绑定事件 <elem on事件名="js语句">
缺点：
1、不符合内容（html）与样式（css）与行为（js）的分离的原则
2、无法动态绑定事件（一次只能绑定一个元素）
3、无法同时绑定多个函数对象
2、*在js种使用元素的事件处理函数属性：
elem.on事件名=function(){
操作
}
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、*没有兼容性问题
使用专门的事件API绑定事件 主流：elem.addEventListener("事件名",callback); 老IE：elem.attachEvent("on事件名",callback); 兼容：if(elem.addEventListener){//老IE会是undefind； elem.addEventListener("事件名",callback); }else{ elem.attachEvent("on事件名",callback); }
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、同时绑定多个函数对象
缺点： 1、具有兼容性问题
2、事件周期：
主流：3个阶段
1、捕获阶段，记录着要发生的事件有哪些
2、目标元素优先触发，目标元素->实际触发事件的元素
3、冒泡触发，向上触发所有的记录着的事件
*****获取事件对象event：
主流：会自动作为事件处理函数的第一个形参传入
elem.on事件名=function(e){e->event}
老IE：event;
兼容：var e=event；//不光老IE可用，主流也可以用 - 小三上位
*****获取到event事件对象，我们可以干什么？ 1、***获取鼠标的坐标/位置
2、***阻止冒泡 - 笔试面试中：开发几乎不用
主流：e.stopPropagation()
老IE：e.cancelBubble=true;
兼容：e.cancelBubble=true; //不光老IE可用，主流也可以用 - 小三上位\
3、*****事件委托/利用冒泡 - 笔试面试开发中
优化：如果多个子元素定义了相同 或 相似的事件，最好只给父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差
淘汰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.oncontextmenu=()=>{//鼠标右键事件}
window.onkeydown=()=>{//键盘事件 - 我们不做游戏开发}
5、获取键盘的键码：游戏开发问的多 e.keyCode; === 不需要去记忆键码，要么百度查看，要么直接输出查看 Node.js概述：不是JS，但是语法和javascript非常相似，他的竞争对手java、c#、php、python.... 历史上第一次一门语言可以通吃前后端 做的功能绝对不是特效，做事的是服务器端的操作（形成了一个前端和数据库沟通交流的桥梁 - 数据交互） 目的： 1、使用代码搭建一个服务器&文件系统（放在代老师电脑上的HTML，你们也可以访问到，而且根据你访问的网址不同，看到的网页也是不同的） 2、Node.js如何和数据库进行交流沟通（在这之前肯定还要学习mongoDB） 3、全栈一条龙开发，图书管理系统（HTML+CSS+JS+NODE.js + mongoDB） Node.js安装：node-v16.17.0-x64.msi - 一路往下点，哪里点不动了，就把哪里勾上，千万不要取消任何东西 版本：16年初（0.12） 16年中（4.xx） 16年底（6.xx） - 更新速度快，意味着：发展迅速，其实也没加什么新东西，但是给你错觉，感觉一年要学好多次 检查自己安装成功没有：打开cmd，输入node -v 检查版本号，如果有版本号说明已经在你的电脑里安装成功了node.js 其实我们安装的这个node.js就是一个运行环境而已，不再需要浏览器自带的js解释器了，node.js的语法和javascript的语法非常相似 Node.js如何运行： 1、交互模式 - 临时测试 打开cmd输入，node回车，就可以开始敲你的"js"代码了 退出：ctrl+c
2、脚本/文件模式 - 正式开发中-丑了点
1、创建xx.js：里面书写自己的代码
2、打开cmd输入：node 文件绝对路径
3、现在我们的开发工具非常强大：有插件可以直接在开发工具中运行，前提就以上两个操作可用，意味着你的环境是安装好了的
1、HBuilder：安装一个插件：nodeeclipse，右键运行
2、VScode：安装一个插件：搜索一个run，代码处右键，第一个选项就是runNode.js的知识：
1、js 和 node的区别
相同点：都可以使用一切的ECMAScript的一切的API和语法都可以放心大胆的使用，服务器端根本不存在任何浏览器，所以ES5&ES6一切语法放心用
不同点：1、javascript：DOM+BOM - 做一切特效
2、Node.js：虽然不支持DOM+BOM，但是他却提供了10万个以上+的模块等待我们学习
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、官方模块 - 今/明天学习的重点，大概有20几个，重要的其实只有几个
2、第三方模块 - 多到数不清楚，提供了很多官方模块没有的东西，有一个网址npm可以去下载：mongo、express框架（简化）
3、自定义模块
Node.js最大的特点：
1、快、非常快 - 以前最快的是php，Node.js的速度是php的14倍，异步能够更大的发挥node.js的特点
2、为什么快：
1、因为官方模块提供的东西少，甚至连数据库操作都没有
2、使用google浏览器的v8引擎
4、官方模块：不需要下载，在你安装node.js环境的时候就已经安好了，但是某的模块需要引入，某的模块不用引入，就需要学习看文档
1、*Globals模块：全局模块 - 全局变量在所有模块中均可使用。不需要引入，但是提供了一些全局变量给我们，我们可以直接使用
*__dirname - 当前文件夹的绝对路径，对你们使用vscode的同学可能有用，node.js有的同学是使用不了相对路径的，只能写绝对路径
__filename - 当前文件的完整的绝对路径
exports - 一个空{}，公开和暴露自己的成员
*module - 指代当前模块本身，包含了其他4个变量
*require() - 一个函数，引入其他模块的
定时器
控制台
2、Querystring模块：查询字符串
需要引入：let qs = require('querystring');
提供了解析url的查询字符串部分的功能
var obj=qs.parse("查询字符串部分");
想要获取前端传来的某一个部分：obj.键名;
垃圾：只能解析查询字符串部分，如果前端传来的是一个完整的url网址，那他就解析不了
***Url模块：网址模块 - 今日小重点 需要引入：let url = require('url'); 提供了一些实用函数，用于 完整的URL 解析 var objUrl=url.parse("完整的url网址",true);//此方法会将url网址的各个部分全部解析出来，支持传入第二个参数，是一个布尔值，如果传入的是一个true，自动调用querystring的parse方法，顺便也解析了查询字符串（请求消息：前端->后端的东西）部分 真正的重点： 1、查询字符串：objUrl.query.键名 - 拿到前端传到后端的东西 2、路由：objUrl.pathname; - 判断路由的不同，响应不同的网页给用户看 Buffer模块：缓冲区，可以将数组变成一个16进制的数字 不需要我们去引入，可以直接使用 但是！我们绝对不会主动使用Buffer的任何操作，因为用了过后我们就不认识了，但是后面的一些API可能会导致我们得到的结果直接就是Buffer 但是，也别怕，Node.js大部分的API其实是支持buffer操作 理解为，Buffer是Node.js提供的一种新的数据类型
5、*****fs模块：FileSystem - 文件系统 - 今日大重点
需要引入：let fs = require('fs');
提供了可以操作文件的API
异步读取文件：
fs.readFile("绝对路径|文件路径",(err,buf)=>{
拿到buf要干嘛？就需要写在这里
})
异步写入文件：- 将原来的东西，替换掉
fs.writeFile("绝对路径|文件路径","写入的新内容",()=>{
console.log("写入完毕了，以后要做什么")
})
异步追加文件：- 保留原来的东西
fs.appendFile("绝对路径|文件路径","写入的新内容",()=>{
console.log("写入完毕了，以后要做什么")
})
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，解析此属性拿到自己需要的部分（路由|请求消息） var objUrl=url.parse(req.url,true); //得到前端传来路由部分 var router=objUrl.pathname; //判断前端的路由是什么，给他返回不同的页面 if(router=="/" || router=="/index.html"){ //res - response：保存响应对象，后端->前端，提供了一个方法res.end(你想要响应的东西) fs.readFile("./public/index.html",(err,buf)=>{ res.end(buf); }) }else if(router.match(/html/)!=null){ console.log(router); fs.readFile("./public"+router,(err,buf)=>{ res.end(buf); }) }else if(router.match(/css|js|jpg|png|gif|woff/)!=null){ fs.readFile("./public"+router,(err,buf)=>{ res.end(buf); }) } })
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，解析此属性拿到自己需要的部分（路由|请求消息）
var objUrl=url.parse(req.url,true);
//得到前端传来路由部分
var router=objUrl.pathname;
//判断前端的路由是什么，给他返回不同的页面
if(router=="/" || router=="/index.html"){
//res - response：保存响应对象，后端->前端，提供了一个方法res.end(你想要响应的东西)
fs.readFile("./public/index.html",(err,buf)=>{
res.end(buf);
})
}else if(router.match(/html/)!=null){
console.log(router);
fs.readFile("./public"+router,(err,buf)=>{
res.end(buf);
})
}else if(router.match(/css|js|jpg|png|gif|woff/)!=null){
fs.readFile("./public"+router,(err,buf)=>{
res.end(buf);
})
}
})
