BOM
掌握什么是BOM
掌握BOM对核心：-window对象
掌握window对象的控制，弹出窗口方法
BOM(Browser Object Model)浏览器对象模型
它提供的对象主要有：
window navigator screen history location document event
全局变量：脚本的任何一个地方都能调用的变量
所有的全局变量和全局方法都被归在window上
<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>
返回值：布尔值，当点确定时，comfirm()返回true，否则返回false
<body>
<input type="button" value="退 出" id="quit">
<script> window.onload = function(){ // 打开子窗口，显示newwindow.html window.open("D:/little_tools/vip/html/test.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>
JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序执行。
掌握超时调用和间歇调用。
//setTimeout("alert('hello')",4000);
var fnCall=function(){
alert("world"); //自定义函数
}
var timeout1=setTimeout(function(){
alert("hello"); //匿名函数
},2000)
//SetTimeout方法返回一个ID值，通过它用clearTimeout()取消超时调用
clearTimeout(timeout1);
//setTimeout(fnCall,5000);
setTimeout()只执行code一次，如果要多次调用，可以让code自己再次调用setTimeout（）
周期性执行的间歇调用
var num=1,
max=10,
timer=null;// 超时调用的ID是个对象，null释放内存
// 每隔1秒针num递增一次，直到num的值等于max清除
// 使用超时调用实现
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000); //
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些
导航的功能，它既是window对象的属性，也是document对象的属性。
<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); //给网页后加#top可以取到#top var btn=document.getElementById("btn"); btn.onclick=function(){ location.hash="#top"; } console.log(location.pathname); </script>
</body>
location改变浏览器的位置
掌握位置操作，location.replace()和location.reload()函数
<input type="button" value="刷新" id="reload">
<script> document.getElementById("reload").onclick=function(){ location.reload(true); } </script>
BOM中的history对象
history对象保存了用户在浏览器中访问页面的历史记录
<p><input type="button" value="后退" id="btn"></p>
<script> var btn=document.getElementById("btn"); btn.onclick=function(){ history.back(); history.go(-2);//回退2步 } </script>
Screen对象包含有关客户端显示屏幕的信息。
console.log("页面宽："+screen.availWidth);
console.log("页面高："+screen.availHeight);
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);
navigator对象
UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。
//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);
indexOf(）方法返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现过，返回-1
IE不支持console.log()，用alert()
NEXT:
一个小栗子！
