目录
BOM
一、BOM 浏览器对象模型
二、 获取到浏览器的相关信息（窗口的大小）
编辑
三、 出现弹窗
编辑四、获取地址栏的信息
编辑
location.href
location.assign
location.replace
location.reload 重载 /刷新
五、浏览器的历史记录 history
前进
后退
六、 浏览器的onload 事件
七、浏览器的onscroll事件
使用场景
八、window.open / window.close
九、本地存储 （重点）
9.1 localStorage (常用)
9.2 sessionStorage
9.3 区别
十、定时器
10.1 两种定时器
10.2 定时器的返回值
10.3 清除定时器
练习、
BOM
js的三大组成
ECMAscript 基础语法（数据类型、分支语句，循环，函数，方法，数学，日期。。）
BOM ：browser object model 浏览器对象模型
DOM： document object model 文档对象模型 重点
一、BOM 浏览器对象模型
-
其实就是操作浏览器的一些能力
-
可以操作哪些内容
-
获取到浏览器的相关信息（窗口的大小）
-
操作页面的跳转
-
获取地址栏的信息
-
操作浏览器的滚动条
-
浏览器的信息（比如版本）
-
出现弹窗
-
-
BOM的核心就是 window对象
-
window 是浏览器的一个内置对象，包含了操作浏览器的方法
二、 获取到浏览器的相关信息（窗口的大小）
innerHeight 和innerWidth 获取浏览器窗口的宽度和高度 （包含滚动条）
console.log(window.innerHeight,"高度");
console.log(window.innerWidth,"宽度");这些window对象里的方法在使用时 可以window.方法名，也可以直接写方法名
三、 出现弹窗
<script>//直接弹窗 一般用于提示！！//alert("明天是38节啦");//询问框// var res = confirm("您确定要跳转页面码?");// if(res){// console.log("点击了确定");// }else{// console.log("点击了取消");// }// 输入框 promtvar res = prompt("请输入您的名字");console.log(res); // 里边是有字符串的if(res){//代表你输入了}else{//没输入}</script>
四、获取地址栏的信息
在window对象中有个 location 对象，这个对象就是专门用来获取地址栏信息的
host:"127.0.0.1:5500" 主机 127.0.0.1代表本机 5500端口号
hostname: "127.0.0.1" 主机名 127.0.0.1 相当于localhost
href:"http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/10-%E5%9C%B0%E5%9D%80%E6%A0%8F%E4%BF%A1%E6%81%AF.html" 完整的地址信息
origin:"http://127.0.0.1:5500" 服务器地址 源地址
pathname:"/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/10-%E5%9C%B0%E5%9D%80%E6%A0%8F%E4%BF%A1%E6%81%AF.html" 文件名
port:"5500" 端口号
protocol:"http:" 协议 常见协议http https<body> //用id做动态交互<button id="btn">按钮 href跳转</button><button id="btn1">按钮 assign</button><button id="btn2">按钮 replace</button><button id="btn3">按钮 reload</button><script>console.log(location.href);//地址栏里完整的信息// 改变地址栏的值 其实就是换页面 跳转页面// 点击按钮的时候，跳转到百度btn.onclick=function(){location.href = "http://www.baidu.com"}// 点击按钮的时候，弹窗btn1.onclick = function(){location.assign("./09-弹窗.html")}// 点击按钮的时候，打开京东btn2.onclick = function(){location.replace("http:www.jd.com")}// 点击按钮的时候，刷新btn3.onclick=function(){location.reload()// 注意：不要把reload写全局，写全局会不停刷新}</script>
</body>
location.href
-
获取地址栏信息
-
跳转页面
-
可以返回
console.log(location.href);//地址栏里完整的信息// 改变地址栏的值 其实就是换页面 跳转页面// 点击按钮的时候，跳转到百度btn.onclick=function(){location.href = "http://www.baidu.com"}location.assign
-
跳转页面
-
可以返回
btn1.onclick = function(){location.assign("./09-弹窗.html")}location.replace
-
跳转页面
-
不可以返回
btn2.onclick = function(){location.replace("http:www.jd.com")}location.reload 重载 /刷新
btn3.onclick=function(){//location.reload()}五、浏览器的历史记录 history
功能和浏览器自带的前进和后退一样的！
在window对象里有个history 专门记录存储历史记录信息的
前进
btn.onclick=function(){//history.forward(); // 历史记录的长度必须大于1 才能前进history.go(1);
}后退
btn.onclick=function(){// history.back(); //历史记录的长度必须大于1 才能后退// history.go(-1)history.go(0) // 刷新
}
六、 浏览器的onload 事件
<body><div id="box">我是一个div</div><p></p><!-- <script>// 为啥要把js 写到标签之后？// 因为 js是自上而下执行，肯定是希望获取到上边的标签之后，在执行js// 把标签都加载出来之后，才能通过js获取到console.log(box); //box is not defined</script> --></body>七、浏览器的onscroll事件
-
当浏览器中有滚动条，并且滚动条滚动的时候触发！！！
<script>
window.onscroll=function(){console.log("滚动了");
}
</script>注意：前提页面的高度要超出浏览器窗口才可以！！！
-
滚动时，滚的不是浏览器，是页面 (不在是window对象了，是document对象)
-
既然滚动的是页面，如何获取到滚动了多少的距离
window.onscroll=function(){console.log(document.documentElement.scrollTop);
}使用场景
1、回到顶部，一开始 不出现回到顶部的按钮，当我滚动了一段距离之后，在出现按钮
<div><h1>顶部</h1></div><button id="btn">回到顶部</button><script>// 1、当我滚动200px之后，在让button显示出来window.onscroll=function(){var scrollTop = document.documentElement.scrollTop;if(scrollTop>200){btn.style.display= "block";}else{btn.style.display= "none";}}</script>2、点击回到顶部按钮，可以回到顶部
2、点击回到顶部按钮，可以回到顶部-
获取横向滚动距离（了解）
window.onscroll=function(){console.log(document.documentElement.scrollLeft);}八、window.open / window.close
打开页面/关闭页面
<button id="btn">打开页面</button>
<button id="btn1">关闭页面</button>
<script>
// 点击这个按钮，打开页面
btn.onclick=function(){//window.open("http://www.baidu.com");open("./04-横向滚动.html")
}btn1.onclick=function(){window.close();//关闭掉当前的页面
}
</script>九、本地存储 （重点）
html5新增了两个本地存储的方式，localStorage 本地存储 和 sessionStorage 会话存储
手机：8G+126G 16G+256G
运行内存（8G，临时存储）和本地存储 （156G 永久存储）
9.1 localStorage (常用)
永久性存储，一直都在，除非你手动删除
localStorage.setItem(key,value); //设置存储localStorage.setItem("username","哈哈哈");localStorage.setItem("address","北京市海淀区宝盛里中关村")localStorage.getItem(key); // 获取存储var res = localStorage.getItem("age");var res1 = localStorage.getItem("address");localStorage.removeItem(key);// 移除存储的某一项内容remove.onclick=function(){localStorage.removeItem("age");}localStorage.clear();// 清空所有clear.onclick=function(){localStorage.clear()}9.2 sessionStorage
会话存储，当你的浏览器标签页关掉，会话存储结束，你之前存的东西都没啦
sessionStorage.setItem(key,value);
sessionStorage.getItem(key.value);
sessionStorage.removeItem(key);
sessionStorage.clear();9.3 区别
永久性存储，一直都在，除非你手动删除
会话存储，当你的浏览器标签页关掉，会话存储结束，你之前存的东西都没啦十、定时器
10.1 两种定时器
定时器分成两种 循环定时器/定时器 和 延迟定时器/延时器
区别：定时器 可以执行多次||| 延时器 只执行一次
-
写法一
循环定时器/定时器 setInterval 可以多次执行
var a= 0;
setInterval(function(){a++;console.log(a);
},2000)延迟定时器/延时器 setTimeout 只会执行一次setTimeout(function(){console.log("哈哈哈哈哈");},2000)-
写法二
提前封装好函数，在定时器里引用
注意：
var a = 0;
function fn(){a++;console.log(a);
}setInterval(fn,2000)var fn1 = function(){console.log("哈哈哈");
}
setTimeout(fn1,2000)10.2 定时器的返回值
定时器的返回值是一个数字，这个数字代表着在页面中定时器是第几个
var timer1 = setInterval(fn,2000);
console.log(timer1,"0000000000000000000000000000");//1var timer2 = setTimeout(fn1,2000);
console.log(timer2,"0000000000000000000000000000");//210.3 清除定时器
注意：设置完定时器之后，在某个条件下，记得清除，因为定时器很占用内存的！！
clearInterval(timer1);
clearTimeout(timer2);练习、
1、随机点名：
var namearr = ["李福","陈圣雅","李白","解老儿","王龙涛","范舟","刘锦阳"];var namearr = ["李福", "陈圣雅", "李白", "解老儿", "王龙涛", "范舟", "刘锦阳"];// 点击开始点名时，随机出现人名，，每隔一小段时间就出现一次,, 3秒后停止// 1、随机数// 2、定时器btn.onclick = function () {//生成一个随机索引，根据索引拿到某个同学的名字// 0-6之间的var timer = setInterval(function () {var idx = parseInt(Math.random() * namearr.length);box.innerHTML = namearr[idx];}, 50);setTimeout(function(){clearInterval(timer)},3000)}