JavaScript -- BOM
什么是BOM
BOM（browser object model）浏览器对象模型
window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
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); }; // confirm() // 获取按钮,绑定事件 var btn=document.getElementById("btn"); btn.onclick=function(){ // 弹出确认对话框 var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！"); if(result){ document.getElementById("box").style.display="none"; } } </script> </body> </html>
prompt
语法：window.prompt(“text,defaultText")
参数说明：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 弹出输入框 var message=prompt("请输入您的星座","天蝎座"); console.log(message); </script> </body> </html>
语法：window.open(pageURL,name,parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL：子窗口路径
name：子窗口句柄。
parameters ：窗口参数(各参数用逗号分隔)
语法：window.close( )
功能：关闭浏览器窗口
超时调用
语法：setTimeout（code,millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
说明：setTimeout（）只执行code一次。如果要多次调用，请使用
setInterval（）或者让code自身再次调用setTimeout（）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //setTimeout("alert('hello')",4000); var fnCall=function(){ alert("world"); }; var timeout1=setTimeout(function(){ alert("hello"); },2000); setTimeout(fnCall,5000); </script> </body> </html>
清除超时调用
语法：clearTimeout（id_of_settimeout）
功能：取消由setTimeout（）方法设置的timeout
参数说明：
1、 id_of_settimeout ：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var timeout1=setTimeout(function(){ alert("hello"); },2000); clearTimeout(timeout1); </script> </body> </html>
间歇调用
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1、code：要调用的函数或要执行的代码串。
2、millisec：周期性执行或调用code之间的时间间隔，以毫秒计
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var intervalId=setInterval(function(){ console.log("您好"); },1000); // 10秒之后停止打印 setTimeout(function(){ clearInterval(intervalId); },10000); </script> </body> </html>
小练习，每隔1s打印一次，一直打印到10
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var num=1, max=10, timer=null; // 每隔1秒针num递增一次，直到num的值等于max清除 timer=setInterval(function(){ console.log(num); num++; if(num>max){ clearInterval(timer); } },1000); </script> </body> </html>
使用超时调用实现
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var num=1, max=10, timer=null; // 使用超时调用实现 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> </html>
发送验证码实例
<!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>
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
语法：location.href
功能：返回当前加载页面的完整URL
说明： location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含则返回空字符串。
语法：location.host
功能：返回服务器名称和端口号（如果有）
语法：location.hostname
功能：返回不带端口号的服务器名称。
语法：location.pathname
功能：返回URL中的目录和（或）文件名。
语法：location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串。
语法：location.protocol
功能：返回页面使用的协议。
语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头。
<!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.href属性
location对象其他属性也可改变URL：
location.hash
location.search
语法：location.replace(url)
功能：重新定向URL。
说明： 使用location.replace不会在历史记录中生成新纪录。
语法：location.reload()
功能：重新加载当前显示的页面。
说明：
• location.reload()有可能从缓存中加载
• location.reload(true)从服务器重新加载
history历史对象
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
语法：history.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
语法：history.go(-n)
功能：回到历史记录的前n步
语法：history.go(n)
功能：回到历史记录的后n步
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>
Screen
语法：screen.availWidth
功能：返回可用的屏幕宽度
语法：screen.availHeight
功能：返回可用的屏幕高度
