JavaScriptBOM对象
1. 掌握什么是BOM
2. 掌握BOM的核心window对象
3. 掌握window对象的控制、弹出窗口方法
什么是BOM
BOM（browser object model）浏览器对象模型
BOM对象（访问浏览器的功能）：
window
navigator
screen
history
location
document
event
window是浏览器的一个实例，在浏览器中，window对象有双重角色，他既是通过JavaScript访问浏览器的一个接口，又是ECMAScript规定的Global对象（global对象->全局对象）。
全局方法：脚本的任何一个地方都能调用的方法。
所有的全局变量和全局方法都被归在window对象上了。
window对象的方法：
window.alert(“content”)
显示带有一段消息和一个确认按钮的警告框
window.confirm(“message”)
显示一个带有指定消息和OK及取消按钮的对话框
返回值：如果用户点击确定按钮，则confirm()返回true
如果用户点击取消按钮，则confirm()返回false
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" value="删除" id="btn">
</div>
<script>
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 声明一个全局变量
window.username="marry"; // var username="marry";
// 声明一个全局方法
window.sayName=function(){
alert("我是"+this.username);
}
//sayAge();
//window.sayName();
// confirm()
// 获取按钮,绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
// 弹出确认对话框
var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
if(result){
document.getElementById("box").style.display="none";
}
}
// 弹出输入框
//var message=prompt("请输入您的星座","天蝎座");
//console.log(message);
</script>
</body>
</html>window.prompt(“text,defaultText”)
text:要在对话框中显示的纯文本。
defaultText:默认的输入文本。
返回值：如果用户单击提示框取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
window.open(pageURL,name,parameters)
打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL:子窗口路径
name：子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters：窗口参数（各参数用逗号分隔）
窗口参数：
width：窗口宽度
height：窗口高度
left：窗口X轴坐标
top：窗口Y轴坐标
toolbar：是否显示浏览器的工具栏（值：no或yes）
menubar：是否显示菜单栏（值：no或yes）
scrollbars：是否显示滚动条（值：no或yes）
location：是否显示地址字段（值：no或yes）
status：是否添加状态栏（值：no或yes）
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打开子窗口，显示newwindow.html
window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.onclick = function(){
window.close();
}
}
</script>
</body>window对象方法--定时器
1. 掌握超时调用
2. 掌握间歇调用
注意：JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序。
超时调用：
setTimeout(code,millisec)
在指定的毫秒数后调用函数或计算表达式
code：要调用的函数或要执行的JavaScript代码串
millisec：在执行代码前需等待的毫秒数
会返回一个ID值，通过id值可以取消超时调用
清除超时调用：
clearTimeout(id_of_settimeout)
取消由setTimeout()方法设置的timeout
参数说明：
id_of_settimeout：由setTimeout()返回的id值，该值标识要取消的延迟执行代码块
间歇调用：
setInterval(code,millisec)
每隔指定的时间执行代码
code：要调用的函数或要执行的JavaScript代码串
millisec：在执行代码前需等待的毫秒数
清除间歇调用：
clearInterval(id_of_settimeout)
取消由setInterval()方法设置的Interval
参数说明：
id_of_settimeout：由setInterval()返回的id值，该值标识要取消的延迟执行代码块，初始值为null--释放内存。
<body>
<script>
/* var intervalId=setInterval(function(){
console.log("您好");
},1000)
// 10秒之后停止打印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;
// 每隔1秒针num递增一次，直到num的值等于max清除
timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)
// 使用超时调用实现
/*function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);*/
</script>
</body><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main{
padding:20px;
}
.btn{
width:120px;
height:25px;
line-height:25px;
text-align:center;
border-radius:6px;
background:#FF9A00;
font-size:14px;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
// 获取按钮
var btn=document.getElementById("btn"),
time=10,
timer=null;
// 绑定事件
btn.onclick=function(){
// 判断按钮上是否有data-flag的属性，如果没有，则开启定时器
if(!this.getAttribute("data-flag")){
// 执行间歇调用
timer=setInterval(function(){
time--;
if(time<=0){
clearInterval(timer);
time=10;
btn.innerHTML='发送验证码';
btn.setAttribute("data-flag","");
}else{
btn.innerHTML=time+'秒后重试';
// 给btn定义一个data-flag的属性，值为真
btn.setAttribute("data-flag","flag");
}
},1000)
}
}
}
</script>
</head>
<body>
<div class="main">
<p class="btn" id="btn">发送验证码</p>
</div>
</body>
</html>文字闪烁效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js实现文字闪烁特效</title>
</head>
<script>
var flag = 0;
function start(){
var text = document.getElementById("myDiv");
if (!flag)
{
text.style.color = "red";
text.style.background = "#0000ff";
flag = 1;
}else{
text.style.color = "";
text.style.background = "";
flag = 0;
}
setTimeout("start()",500);
}
</script>
<body onload="start()">
<span id="myDiv">css的世界是如此的精彩！</span>
</body>
</html>
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
location对象的常用属性：
location.href：
返回当前加载页面的完整URL
location.href与window.location.href等价
location.hash：
返回URL中的hash（#号后跟零或多个字符即href属性的锚部分），如果不包含则返回空字符串。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{height:400px;background:#ccc;}
.box2{height:600px;background:#666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部">
<script>
//console.log(location.href);
//console.log(location.hash);
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
</html>location.host：
返回服务器名称和端口号（如果有）
location.hostname：
返回不带端口号的服务器名称
location.pathname：
返回URL中的目录和文件名
location.port：
返回URL中指定的端口号，如果没有，返回空字符串
location.protocol：
返回页面使用的协议
location.search：
返回URL的查询字符串。这个字符串以问号开头
位置操作：
改变浏览器位置的方法：
location.href属性
location对象其他属性也可改变URL
location.hash
location.search
location.repalce()：
location.repalce(url)
重新定向URL
使用location.repalce不会再历史记录中生成新纪录
location.reload()：
location.reload()
重新加载当前显示的页面
location.reload()有可能从缓存中加载
location.reload(true)从服务器重新加载
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="刷新" id="reload">
<script>
/* setTimeout(function(){
//location.href='index6.html';
// window.location='index6.html';
location.replace("index6.html");
},1000)*/
document.getElementById("reload").onclick=function(){
location.reload(true);
}
</script>
</body>
</html>history对象：
history对象保存了用户在浏览器中访问页面的历史记录。
history.back() 相当于<--
回到历史记录的上一步
相当于使用了history.go(-1)
history.forward() 相当于-->
回到历史记录的下一步
相当于使用了history.go(1)
history.go(-n)
回到历史记录的前n步
history.go(n)
回到历史记录的后n步
screen对象及其常用属性:
screen对象包含有关客户端显示屏幕的信息。
screen.availWidth
返回可用的屏幕宽度
screen.availHeight
返回可用的屏幕高度
获取窗口文档显示区的高度和宽度，可以使用window.innerWidth window.innerHeight
获取显示屏幕的高度和宽度，可以使用screen.availWidth screen.availHeight
navigator对象：
掌握navigator对象的userAgent属性
掌握如何判断浏览器的类型
掌握如何判断设备的终端是移动还是PC
userAgent：
navigator.userAgent
用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<script>
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){
var explorer = navigator.userAgent,browser;
if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
}
return browser;
}
var browser = getBrowser();
console.log("您当前使用的浏览器是："+browser);
// 判断终端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
</script>
</body>
</html>