BOM的介绍
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
- BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
什么是BOM
BOM：Browser Object Model，浏览器对象模型。
BOM的结构图:
从上图也可以看出：
- window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
- DOM是BOM的一部分。
window对象
- window对象是JavaScript中的顶级对象。
- 全局变量、自定义函数也是window对象的属性和方法。
- window对象下的属性和方法调用时，可以省略window。
下面讲一下 BOM 的常见内置方法和内置对象。
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。(1)alert、confirm、prompt
<script>
var num = Math.round(Math.random()*100);
function acceptInput() {
//2.让用户输入(prompt) 并接受 用户输入结果
var userNum = prompt("请输入一个0~100之间的数字!", "0");
//3.将用户输入的值与 随机数进行比较
if (isNaN(+userNum)) {
//用户输入的无效(重复2,3步骤)
alert("请输入有效数字!");
acceptInput();
}
else if (userNum > num) {
//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
alert("您输入的大了!");
acceptInput();
} else if (userNum < num) {
//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
alert("您输入的小了!");
acceptInput();
} else {
//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
var result = confirm("恭喜您!答对了,是否继续游戏?");
if (result) {
//是 ==> 重复123步骤.
num = Math.round(Math.random() * 100);
acceptInput();
} else {
//否==> 关闭窗口(close方法).
close();
}
}
}
</script>(2).setInterval、clearInterval
<input id="ID1" type="text">
<button onclick="begin()">开始计时</button>
<button onclick="end()">停止计时</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>(3)setTimeout、clearTimeout
/定时器 异步运行
function hello(){
alert("hello");
}
var t1 = window.setTimeout(hello,1000); //使用方法名字执行方法
var t2 = window.setTimeout("hello()",3000); //使用字符串执行方法
window.clearTimeout(t1); //去掉定时器(4)open、close
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
open('https://www.baidu.com')
//打开空白页面
// open('about:blank',"_self")
};
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
最重要的就是window对象，其他对象都不常用。
location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串(1)location.href
举例1：点击盒子时，进行跳转。
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>举例2：5秒后自动跳转到百度。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>(2)location.reload()：重新加载
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
- userAgent：系统，浏览器)
- platform：浏览器支持的系统，win/mac/linux
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);history对象
1、后退：
- history.back()
- history.go(-1)：0是刷新
2、前进：
- history.forward()
- history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
