文章目录
1 什么是BOM
1.浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
所有浏览器都支持 window 对象。它表示浏览器窗口。
2.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。winddow对象也可认为是全局作用域。
（1）全局变量是 window 对象的属性。
（2）全局函数是 window 对象的方法。
（3）甚至 HTML DOM 的 document 也是 window 对象的属性之一：window.document.getElementById(“header”);与此相同：document.getElementById(“header”);
2 浏览器的一些常用的属性
2.1 屏幕的宽度和高度
1.window对象
（来自https://blog.csdn.net/qq_15626693/article/details/54618276?utm_source=copy 的一张图），可以说非常形象了
body.clientHeight，body.offsetHeight最好还是用dom获得。有些浏览器对于这个属性不兼容。
console.log("屏幕总宽度"+window.screen.width+",屏幕总高度"+window.screen.height);//屏幕总的宽和高
console.log("屏幕可用宽度"+window.screen.availWidth+",屏幕可用高度"+window.screen.availHeight);//屏幕可用的宽和高，出去任务栏
console.log("浏览器总宽度"+window.outerWidth+",浏览器总高度"+window.outerHeight);//浏览器的总的宽和高
console.log("浏览器可用宽度"+window.innerWidth+",浏览器实际高度"+window.innerHeight);//浏览器的页面的宽和高，包括滑动条
2.document对象，获得dom文档的窗口信息
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
//与dom有关的
console.log("浏览器实际可用度"+document.documentElement.clientWidth+",浏览器可用高度"+document.documentElement.clientHeight);//浏览器的页面的宽和高，不包括滑动条
// var w = document.documentElement.clientWidth || document.body.clientWidth;
// var h = document.documentElement.clientHeight || document.body.clientHeight;
// 通常用两种方法做冗余,一般浏览器应该支持的是第一种方法
console.log("dom全文宽度"+document.documentElement.scrollWidth+",dom全文高度"+document.documentElement.scrollHeight);
console.log("被卷入的宽度"+document.documentElement.scrollLeft+",被卷入的高度"+document.documentElement.scrollTop);
2.2 location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log("web域名"+location.hostname);
console.log("当前页面的"+location.pathname);
console.log("web端口"+location.port);
console.log("web协议"+location.protocol);
console.log("整个url"+location.href)
</script>
</head>
<body>
<form>
<input type="button" onclick="fun()" value="切换页面">
</form>
<script>
var fun=function () {
location.assign("https://www.baidu.com");//把整个html文档变换了了
}
</script>
</body>
</html>
2.3 弹窗
1.警告弹窗alert
2.选择弹窗confirm
3.输入弹窗prompt
//1.没有返回值
alert("alert弹窗");
console.log();
//2,点击确定返回true否则返回false
var result=confirm("confirm确认弹窗");
console.log(result);
//3.输入弹窗,如果点击确定返回的是输入值,否则返回none
var result=prompt("输入","初始默认值");
console.log(result);
2.4 Navigator对象浏览器属性
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
2.5 历史纪录
如果在一个选项卡里切换url来切换网页，可以通过浏览器的左右按钮实现，其实也可以通过代码实现
1.window.history.back(数字)，返回前面的第几个页面
2.window.history.forward(数字)，返回后面的第几个页面
<form>
<input type="button" value="前面的一个网页" onclick="window.history.back()">
<input type="button" value="后面的一个网页" onclick="window.history.forward()"><br/>
</form>
2.6 时间间隔
注意传入的函数只能是函数名，参数要在后面的几个参数里指定。
1.重复调用一个函数，每隔固定的ms数调用一次
（1）setInterval函数设置开始重复调用，并且返回一个计时器对象，这个对象每隔固定的秒数就会调用函数。
计时器对象=setInterval（函数名，毫秒数[,demo1,demo2…]）
（2）clearInterval函数停止调用函数。
clearInterval（计时器对象）
2.延时调用一个函数，固定的ms数之后，调用一次。
（1）setTimeout函数设置开始重复调用，并且返回一个计时器对象，计时结束时调用这个函数
计时器对象=setTimeout（函数名，毫秒数[,demo1,demo2…]）
（2）clearTimeout函数停止调用函数。
clearTimeout（计时器）
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var fun1=function (str) {
var content=document.getElementById("output");
content.innerHTML+=" "+str
};
var timeCounter;//一个计时器对象
var fun11=function () {
timeCounter=setInterval(fun1,3000,"hello");//以后每隔这么多毫秒的时间调用一次这个函数
};
var fun12=function () {
clearInterval(timeCounter);//停止重复调用
};
var fun2=function (str) {
alert(str)
};
var timeStop;
var fun21=function () {
timeStop=setTimeout(fun2,3000,"world");
}
var fun22=function () {
clearTimeout(timeStop);//停止重复调用
}
</script>
<style>
*{
font-size: 20px;
}
</style>
</head>
<body>
<form>
<input type="button" value="点击我后每隔三秒输出一句话" onclick="fun11()">
<input type="button" value="点击我后停止每隔三秒输出一句hello" onclick="fun12()"><br/>
<input type="button" value="点击我后三秒后输出一句world" onclick="fun21()">
<input type="button" value="点击我后停止三秒后输出的world" onclick="fun22()">
</form>
<p id="output"></p>
</body>
3.7 新窗口open与close
open函数，返回一个对象，这个对象类似于window对象，是当前窗口的子对象。详细参数设置在这里。
close函数，关闭指定的窗口对象。
https://www.runoob.com/jsref/met-win-open.html
1.最简单的方式在新窗口打开指定页面，并且获得焦点
<script>
function open1() {
var newWindow=window.open("https://www.baidu.com","baidu页面");
}
</script>
<style>
*{
font-size: 30px;
}
</style>
</head>
<body>
<form>
<input type="button" value="打开百度" onclick="open1()">
2.可以指定页面的打开方式，
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
可以查看我以前的博客看详细的差别
3. Cookie
3.1 什么是Cookie
1.介绍
在Java,Python,C++等后端语言里，都有文件操作语句。代码通过在后端的服务器执行，读取和修改文件的内容，从而达到web服务后端的功能。
而我们所学的这个JavaScript是前端语言，通过浏览器解释执行，因此不会对文件直接执行操作。如果要使一段程序在不同的时间可以访问相同的数据，就需要一种用来存储数据的东西，这种东西就叫做cookie。
可以简单的认为，Cookie操作就是其他编程语言里的文件读写操作。例如我先在写博客的页面上用F12-Application-Cookies就可以查看当前页面的Cookie了。
2.格式：
（1）cookie说白了就是一个全局变量，这个变量是一种特殊格式的字符串。但不能进行普通的字符串操作。
https://blog.csdn.net/qq_35574888/article/details/80959449
详细介绍了Cookie的组成，我们这里先只关心键值对和过期时间。
（2）Cookie: NAME=VALUE；Expires=DATE；Path=PATH；Domain=DOMAIN_NAME；SECURE
（3）键值对是必要的项，
过期时间expires不是必要项，如果没有设置这个过期时间，默认是一个1970年以前的时间，则这个键值对永远不会过期。如果我们设置的时间到期了，这个键值对自动消失。
3.2 Cookie的创建，读取和删除
html部分我们设置几个按钮，通过调用函数创建和查看cookie
<body>
<form>
<input id="name" type="text" value="Bob"><!--默认的name-->
<input type="button" value="添加name" onclick="createName()">
<input id="age" type="text" value="11"><!--默认的name-->
<input type="button" value="添加age" onclick="createAge()">
<input type="button" value="删除name" onclick="removeName()">
<input type="button" value="删除age" onclick="removeAge()">
<input type="button" value="查看cookie" onclick="show()">
</form>
</body>
3.2.1 直接创建
document.cookie=键名+"="+值名+";"+过期UTC时间
//添加cookie时的等号不是简单的赋值，而是添加了一个cookie键值对。
function createName() {
// 创建键值对并且指定时间
var name=document.getElementById("name");
var d=new Date();//当前的时间戳
d.setTime(d.getTime()+(1*60*1000));//，一分钟后过期
var expires="expires="+d.toUTCString();//UTC/GMT时间
document.cookie="name"+"="+name.value+";"+expires;//添加cookie
}
function createAge() {
// 创建键值对并且指定时间
var name=document.getElementById("age");
var d=new Date();//当前的时间戳
d.setTime(d.getTime()+(1*60*1000));//，一分钟后过期,过期的时间戳i
var expires="expires="+d.toUTCString();//UTC/GMT时间
document.cookie="age"+"="+name.value+";"+expires;//添加cookie
}
3.2.2 直接读取
可以F12-Application-cookies里查看键值对
我们在这里输出所有的cookie
function show() {
alert(document.cookie);
}
3.2.3 直接删除
删除是一个麻烦事，cookie不是普通的字符串，不能直接删除某一个子串。但是过期时间对我们有所帮助，把过期时间设置为过去，不就行了，键值对过期了自动删除。
其实删除键值对的时候，只要键的名字符合期望，值可以随便写，因为已经过期了，反正也没用了，相当于重新给这个键重复设置了值，但是这个新的键值对过期了，也没有用。
//cookie不是简单的字符串,通过设置过期时间来删除
function removeName() {
var name=document.getElementById("name");
var d=new Date();//当前的时间戳
d.setTime(d.getTime()-1000);//过期的时间戳i
var expires="expires="+d.toUTCString();
document.cookie="name"+"="+name.value+";"+expires;
}
function removeAge() {
var name=document.getElementById("age");
var d=new Date();//当前的时间戳
d.setTime(d.getTime()-1000);//过期的时间戳i
var expires="expires="+d.toUTCString();
document.cookie="age"+"="+name.value+";"+expires;
}
3.2.3 函数式的创建和删除
通过函数动态添加和删除Cookie，参考
https://www.runoob.com/js/js-cookies.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//传入不同的键值对
var setCookie=function (cname,cvalue,exdays) {
var d=new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));//这里通过计算获得时间戳
var expires="expires="+d.toUTCString();
document.cookie=cname+"="+cvalue+";"+expires;
};
var getCookie=function(cname){//分割字符串，根据键名查找值。
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
};
//设置过期时间
var deleteCookie=function (cname) {
var d=new Date();
d.setTime(d.getTime()-1000);//这里通过计算获得时间戳
var expires="expires="+d.toUTCString();
document.cookie=cname+"="+"abc"+";"+expires;//此处的abc是个随意的值。
};
</script>
<style>
*{
font-size: 30px;
}
</style>
</head>
<body>
<form>
键名<input type="text" id="key" ><br/>
值名<input type="text" id="value"><br/>
过期天数<input type="text" id="exdays"><br/>
<input type="button" value="创建cookie" onclick="setCookie(document.getElementById('key').value,
document.getElementById('value').value,
document.getElementById('exdays').value)">
<input type="button" value="删除cookie" onclick="deleteCookie(document.getElementById('key').value)">
<input type="button" value="查看cookie" onclick="alert(getCookie(document.getElementById('key').value))">
</form>
</body>
</html>
3.3 如今Cookie实际的用处
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
扫一扫
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
