1、BOM:Browser Object Model:浏览器对象模型:提供专门用操作浏览器的一些对象(属性和方法),没有标准(大部分浏览器还是统一的,唯独老IE与众不同)- 使用率相对较低
重点:定时器、事件对象event
DOM:是有标准的:w3c规定的,几乎没有兼容性问题
1、window对象介绍:扮演着两个角色
1、代替了ES中的global,充当全局对象 - 保存全局变量和全局函数
2、自己也带有一些属性和方法,指代当前窗口本身
1、网页打开新链接的方式:4种 - 目的:提升用户的体验感
1、替换当前页面,可以后退
HTML:<a href="url">内容</a>
JS:open("url","_self");
2、替换当前页面,禁止后退 - 场景:电商网站,付款后不允许退回去再次付款
history对象:记录着【当前窗口】的历史记录,只有有了历史才能前进后退
location对象:记录着【当前窗口】正在打开的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>
自定义name的意思:每一个窗口底层都有一个名字,target其实就是在设置名字,name如果相同,新打开的窗口就会把旧窗口给替换掉(刷新)
JS:open("url","自定义的name");
HTML能做的,JS都能做,JS能做的,HTML不一定可以
扩展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>
2、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.resizeTo(new宽,new高);
4、修改窗口的位置:newW.moveTo(x,y)
3、*****定时器:
1、周期性定时器
开启:timer=setInterval(callback,间隔毫秒数);
停止:clearInterval(timer)
2、一次性定时器
开启:timer=setTimeout(callback,间隔毫秒数);
停止:clearTimeout(timer)
注意:一次性和周星期底层都是一样的,甚至可以呼唤,所以你到底以后用哪个无所谓
面试题:函数 和 循环 和 定时器都能反复执行操作,区别? - 时机
1、函数 - 用户触发、程序员调用
2、循环 - 一瞬间基本就结束了
3、定时器 - 等待一段时间做一次
2、history对象:保存【当前窗口】的历史记录(打开【过】的url),可用于
前进:history.go(1);
后退:history.go(-1);
刷新:history.go(0);
3、*navigator对象:
保存了当前浏览器的基本信息,可以使用js来判断我们是什么浏览器以及版本号,
类似于css hack(浏览器兼容性问题的,专门针对老IE),但是更强大,单独为老IE写js
属性:navigator.userAgent; - 能够得到一个字符串,包含着是什么浏览器以及版本号,想办法去拿到你需要的部分
HTML5(语义化标签、增强型表单、音频视频)和CSS3(过渡、动画、转换、媒体查询、阴影、弹性盒子、rem...)
和ES5以上的任何东西,老IE都是不支持的,所以要做兼容
BOM确实有很多具有兼容性问题,但是我们不需要自己使用navigator去做兼容,前辈们帮我们已经做好了
4、***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&issp=1&f=8&ie=utf-8&tn=baiduhome=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();
5、*****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: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.οncοntextmenu=()=>{//鼠标右键事件}
window.οnkeydοwn=()=>{//键盘事件 - 我们不做游戏开发}
5、获取键盘的键码:
e.keyCode; === 不需要去记忆键码,要么百度查看,要么直接输出查看
最后强调:
1、BOM重要的只有两个:定时器 和 event
2、Node.js
概述:不是JS,但是语法和javascript非常相似,他的竞争对手java、c#、php、python.... 历史上第一次一门语言可以通吃前后端
做的功能绝对不是特效,做事的是服务器端的操作(形成了一个前端和数据库沟通交流的桥梁 - 数据交互)
目的:
1、使用代码搭建一个服务器&文件系统
2、Node.js如何和数据库进行交流沟通(在这之前肯定还要学习mongoDB)
3、全栈一条龙开发,图书管理系统(HTML+CSS+JS+NODE.js + mongoDB)
1、Node.js安装:
1、node-v16.17.0-x64.msi - 一路往下点,哪里点不动了,就把哪里勾上,千万不要取消任何东西
2、版本:16年初(0.12) 16年中(4.xx) 16年底(6.xx) - 更新速度快,意味着:发展迅速,其实也没加什么新东西,但是给你错觉,感觉一年要学好多次
3、检查自己安装成功没有:打开cmd,输入node -v 检查版本号,如果有版本号说明已经在你的电脑里安装成功了node.js
4、其实我们安装的这个node.js就是一个运行环境而已,不再需要浏览器自带的js解释器了,node.js的语法和javascript的语法非常相
2、Node.js如何运行:
1、交互模式 - 临时测试
打开cmd输入,node回车,就可以开始敲你的"js"代码了
退出:ctrl+c
2、脚本/文件模式 - 正式开发中
1、创建xx.js:里面书写自己的代码
2、打开cmd输入:node 文件绝对路径
3、现在我们的开发工具非常强大:有插件可以直接在开发工具中运行,前提就以上两个操作可用,意味着你的环境是安装好了的
1、HBuilder:安装一个插件:nodeeclipse,右键运行
2、VScode:安装一个插件:搜索一个run,代码处右键,第一个选项就是run
3、Node.js的知识:
1、js 和 node的区别
相同点:都可以使用一切的ECMAScript的一切的API和语法都可以放心大胆的使用,服务器端根本不存在任何浏览器,所以一切语法放心用
不同点: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,不再具有公开功能
4、模块的分类:
1、官方模块 var xx=require("官方模块名")
2、第三方模块 - 多到数不清楚,提供了很多官方模块没有的东西,有一个网址npm可以去下载:mongo、express框架(简化)
3、自定义模块
Node.js最大的特点:
1、快、非常快 - 以前最快的是php,Node.js的速度是php的14倍,异步能够更大的发挥node.js的特点
2、为什么快:
1、因为官方模块提供的东西少,甚至连数据库操作都没有
2、使用google浏览器的v8引擎
5、官方模块:不需要下载,在你安装node.js环境的时候就已经安好了,但是某的模块需要引入,某的模块不用引入,就需要学习看文档
1、*Globals模块:全局模块 - 全局变量在所有模块中均可使用。不需要引入,但是提供了一些全局变量给我们,我们可以直接使用
*__dirname - 当前文件夹的绝对路径,对你们使用vscode的同学可能有用,node.js有的同学是使用不了相对路径的,只能写绝对路径
__filename - 当前文件的完整的绝对路径
exports - 一个空{},公开和暴露自己的成员
*module - 指代当前模块本身,包含了其他4个变量
*require() - 一个函数,引入其他模块的
2、定时器
3、控制台
4、Querystring模块:查询字符串
需要引入:let qs = require('querystring');
提供了解析url的查询字符串部分的功能
var obj=qs.parse("查询字符串部分");
想要获取前端传来的某一个部分:obj.键名;
垃圾:只能解析查询字符串部分,如果前端传来的是一个完整的url网址,那他就解析不了
5、***Url模块:网址模块 - 今日小重点
需要引入:let url = require('url');
提供了一些实用函数,用于 完整的URL 解析
var objUrl=url.parse("完整的url网址",true);//此方法会将url网址的各个部分全部解析出来,支持传入第二个参数,是一个布尔值,如果传入的是一个true,
//自动调用querystring的parse方法,顺便也解析了查询字符串(请求消息:前端->后端的东西)部分
真正的重点:
1、查询字符串:objUrl.query.键名 - 拿到前端传到后端的东西
2、路由:objUrl.pathname; - 判断路由的不同,响应不同的网页给用户看
6、Buffer模块:缓冲区,可以将数组变成一个16进制的数字
不需要我们去引入,可以直接使用
但是!我们绝对不会主动使用Buffer的任何操作,因为用了过后我们就不认识了,但是后面的一些API可能会导致我们得到的结果直接就是Buffer
但是,也别怕,Node.js大部分的API其实是支持buffer操作
理解为,Buffer是Node.js提供的一种新的数据类型
7、*****fs模块:FileSystem - 文件系统 - 今日大重点
需要引入:let fs = require('fs');
提供了可以操作文件的API
异步读取文件:
fs.readFile("绝对路径|文件路径",(err,buf)=>{
拿到buf要干嘛?就需要写在这里
})
异步写入文件:- 将原来的东西,替换掉
fs.writeFile("绝对路径|文件路径","写入的新内容",()=>{
console.log("写入完毕了,以后要做什么")
})
异步追加文件:- 保留原来的东西
fs.appendFile("绝对路径|文件路径","写入的新内容",()=>{
console.log("写入完毕了,以后要做什么")
})
8、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);
})
}
})
强调:
1、*****前端的一切action、href、src,所有引入路径的地方,全都被node.js当作了是一个路由请求,解析请求,读取对应的文件给用户看
2、自己想要访问自己,打开浏览器,可以使用127.0.0.1访问自己,访问别人(前提:防火墙关了没),需要别人把自己的ipv4地址给你,打开cmd,输入ipconfig
目前:完成了使用代码搭建服务器&文件系统
6、自定义模块: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的使用的
7、第三方模块
如何使用第三方模块:
1、打开网站:npm官网
2、搜索你需要用到的模块,尽量用带有完全符合标志的那个包
3、打开cmd:检查一下npm下载工具是否安装成功:npm -v
4、下载:npm i 包名
5、删除:npm un 包名 - win7系统,删除时只需删除当前包,不会删除依赖关系
6、更新:npm up 包名 - 有可能此项目n年后要维护,有可能包就过期了,需要更新
下周:使用mongoDB
例如:npm:node package manager:node的模块/包管理器:专门管理第三方模块的,作用:下载安装、删除、更新、维护包的依赖关系...
3、介绍一下数据库
数据库产品 - 放着很多很多和网站相关的数据
关系型数据库 - 以表格为主
Oracle - Oracle(甲骨文)
主要应用于【企业级】开发市场,企业级:大公司、国企、事业单位(银行、警察局),不差钱的公司,安全性很高
MySQL - Oracle(甲骨文)
主要应用于【互联网】开发市场,安全性相对较低,但是免费的,中小型公司的首选,但是和Node.js搭配不友好
sql server - 微软:大学讲课
非关系型数据库 - 没有固定的格式
是一种运动 - 反关系型数据库
主流产品 - mongoDB,以JSON数据格式为主