1、浏览器介绍
JavaScript诞生就是为了能够让他在浏览器中运行!
B/S:浏览器/操作器
BOM:浏览器对象模型
- IE 6~11
- Chrome (windows)
- Safari ( IOS)
- FireFox (Linux)
第三方浏览器
- QQ浏览器
- 360浏览器
2、window (重要)
Window 代表 浏览器窗口
//如果真的需要获取浏览器分辨率 建议使用screen
//inner内部
window.innerHeight
692
window.innerWidth
1920
//out外部
window.outerHeight
1064
window.outerWidth
1904
//可以去调整浏览器窗口试试。。。
3、Navigator(不建议使用)
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.platform
"Win32"
大多数时候,我们不会去使用navigator
对象,因为会被人为修改!
(Navigator
!=navigator
)
Navigator
是方法 navigator
是对象
不建议使用这些属性来判断和编写代码
4、screen
代表屏幕尺寸
screen.height
1080 px
screen.width
1920 px
5、location(重要!!)
host: "www.bilibili.com" //主机
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19" // 指向的位置
protocol: "https:" //协议
reload: ƒ reload() //刷新网页
location.assign('https://www.baidu.com/') //跳转网页
6、document (内容:DOM)
document 代表当前的页面,HTML DOM文档树
document.title
"百度一下,你就知道"
document.title = '你不知道'
"你不知道"
获取具体的文档树节点(从这开始你就会认识到选择器的重要性了)
<dl id="app">
<dt>java</dt>
<dd>陈捷</dd>
<dd>李泽群</dd>
</dl>
<div id="reset">
<span id="an1">链接1</span>
<span class="an2">链接2</span>
<span class="an3">链接3</span>
<span class="an4">链接4</span>
<span class="an5">链接5</span>
</div>
<script >
'use strict'
var d = document.getElementById('reset');
var dd = document.getElementById('app');
var d1 = document.getElementById('an1');
var d2 = document.getElementsByClassName('an2');
var d3 = document.getElementsByClassName('an3');
var d4 = document.getElementsByClassName('an4');
</script>
cookie
cookie是客户端的本地信息(这些信息会发送到服务器)
获取cookie
document.cookie
"_uuid=CB863AE0-CED0-1B6F-C139-101EB45B90CC15976infoc; buvid3=D5E36E45-D8CD-446C-8C43-DDB7E8D72C98143072infoc;
CURRENT_FNVAL=80; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1605326025; blackside_state=1;
rpdid=|(k|k)u)JuJJ0J'uY|lJk~Rk); DedeUserID=306462698; DedeUserID__ckMd5=89a7c442ed51c2f8;
bili_jct=25a128270370790321121fa0a0ff1990; bp_t_offset_306462698=458233844681301611;
bp_video_offset_306462698=458229687148742469; finger=158939783; sid=izhcvea2; PVID=3"
劫持cookie原理
https://www.tmall.com/ 天猫
https://www.taobao.com/ 淘宝
当你同时打开天猫和淘宝的网页,在淘宝登录,刷新天猫网站你会发现你的天猫也登录了,这就是为什么很多人劫持cookie,因为他和获取的你账户,去做一些你不知道的事情。
<script src="aa.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器-->
解决方法:服务器端可以设置cookie:httpOnly //让cookie只读
history(不建议使用)
history : 代表浏览器的历史纪录(浏览器前进后退就是这样实现的)
history.back() //后退
history.forward() //前进