JS BOM事件
★【知识点】：
1、掌握什么是BOM
2、掌握BOM的核心-window对象
3、掌握window对象的控制、弹出窗口方法
一、什么是bom？
BOM（browser object model）浏览器对象模型
关于BOM：
1.核心是window对象，所有的全局变量和全局函数都被归在了window上
2.BOM是Browser Object Model的缩写，是浏览器对象模型
二、window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
三、window对象的方法：
1/window.alert("content")
【语法】：
window.alert("content")
【功能】：
显示带有一段消息和一个确认按钮的警告框
window.alert("content")
2/window.confirm("message")
【语法】：
window.confirm("message")
【功能】：
显示一个带有指定消息和OK及取消按钮的对话框
【返回值】：
如果用户点击确认按钮，则confirm()返回true
如果用户点击取消按钮，则confirm()返回false
【confirm案例1】：
window.confirm.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" id="btn" value="删除">
</div>
<script>
//confirm
//获取按钮，绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
//弹出确认对话框
var result=window.confirm("你确定要删除吗？");
console.log(result);
}
</script>
</body>
</html>
【confirm案例2】：
confirm案例2.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入框</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<script type="text/javascript">
//获取按钮对象
var btn=document.getElementById("btn");
//绑定鼠标事件
btn.onclick=function(){
//写出确认框
var result=window.confirm("确认要删除吗？");
//对确认框的返回值进行判断，设置相应样式
if(result==true){
btn.style.color="#f00";
}else{
btn.style.color="#0f0";
}
}
</script>
</body>
</html>
3/window.prompt(“text,defaultText")
【语法】：
window.prompt(“text,defaultText")
【参数说明】：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
【返回值】：
如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
【案例】：
window.prompt.gif
<script>
// 弹出输入框
//var message=prompt("请输入您的星座","天蝎座");
//console.log(message);
</script>
4/window.open(pageURL,name,parameters)
【语法】：
window.open(pageURL,name,parameters)
【功能】：
打开一个新的浏览器窗口或查找一个已命名的窗口
【参数说明】：
pageURL:子窗口路径
name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters:窗口参数（各参数用逗号分隔）
parameter设置
【案例】：
window.open.gif
window.open
window.open
newwindow.html
newwindow.html
5/window.close()
【语法】：
window.close()
【功能】：
关闭浏览器窗口
【案例】：
window.close.gif
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<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>
</html>
【备注】\n
\n 能够让alert 、confirm等弹出框上的提示文字实现换行
★【知识点】：
1、掌握超时调用
2、掌握间歇调用
一、超时调用
【语法】：
setTimeout(code,millisec)
【功能】：
在指定的毫秒后调用函数或计算表达式
【参数说明】：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
【说明】：
setTimeout()只执行code一次。如果要多次调用，请使用setInterval()或者让code自身再次调用setTimeout()
二、清除超时调用
【语法】：
clearTimeout(id_of_settimeout)
【功能】：
取消由setTimeout()方法设置的timeout
【参数说明】：
id_of_settimeout：由setTimeout()返回的ID值，该值标识要取消的延迟执行代码块。
【案例】：
三、间歇调用
【语法】：
setInterval(code,millisec)
【功能】：
每隔指定的时间执行一次代码
【参数说明】：
1、code：要调用的函数或要执行的代码串。
2、millisec：周期性执行或调用code之间的时间间隔，以毫秒计
四、清除间歇调用
【语法】：
clearInterval(id_of_setinterval)
【功能】：
取消由setInterval()方法设置的interval
【参数说明】：
id_of_setinterval:由setInterval()返回的ID值
【案例】：
【案例】：
定时器案例.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>闪烁的文字</title>
<style type="text/css">
div{
width:400px;
height:400px;
line-height:400px;
border:2px solid gray;
text-align:center;
color:red;
}
</style>
</head>
<body>
<h3>会闪烁的文字</h3>
<div id="text"> </div>
<script type="text/javascript">
//获取放置文本div中的内容
var text=document.getElementById("text");
//自定义一个变量，用来记录闪烁的值，初始值是0
var star=0;
//设置定时器，每500毫秒执行一下定时器里面的脚本
/*定时器脚本判断：当闪烁变量的值是0时，闪烁变量的值设置为1，div里面的内容设置为：：'☆☆☆今日特卖☆☆☆'；当闪烁变量的值为1时，闪烁变量的值设置为0，div里面的内容设置为'★★★今日特卖★★★'*/
setInterval(function(){
if(star==0){
star=1;
text.innerHTML="☆☆☆今日特卖☆☆☆"
}else{
star=0;
text.innerHTML='★★★今日特卖★★★'
}
}
,500);
</script>
</body>
</html>
【案例2】：num开始每间隔1s加1，到max停止
定时器案例2.gif
<!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);*/
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>
</html>
本案例注意点：
1.注意：此处为null不是空“”
注意：此处为null不是空“”
2.超时调用实现间歇调用效果的应用原理是让自身再次调用了set Timeout()
Paste_Image.png
★【知识点】：
1、掌握location对象
2、掌握location对象的常用属性
一、location对象☆
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
二、location对象的常用属性
1/location.href
【语法】：
location.href
【功能】：
返回当前加载页面的完整URL
【说明】：
location.href与window.location等价
2/location.hash
【语法】：
location.hash
【功能】：
返回URL中的hash（#号后跟零或多个字符），如果不包含则返回空字符串。
【案例】：
返回顶部的跳转案例.gif
<!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>
3/location.host
【语法】：
location.host
【功能】：
返回服务器名称和端口号（如果有）
【例如】：
4/location.hostname
【语法】：
location.hostname
【功能】:
返回不带端口号的服务器名称。
5/location.pathname
【语法】：
location.pathname
【功能】：
返回URL中的目录和（或）文件名。
6/location.port
【语法】：
location.port
【功能】：
返回URL中指定的端口号，如果没有，返回空字符串。
7/location.protocol
【语法】：
location.protocol
【功能】：
返回页面使用的协议。
8/location.search
【语法】：
location.search
【功能】：
返回URL的查询字符串。这个字符串以问号开头。
★【知识点】：
1、掌握位置操作
2、掌握location.reaplace()
3、掌握location.reload()
一、位置操作
改变浏览器位置的方法：
location.href属性
location对象其他属性也可改变URL:
location.hash
location.search
二、location.replace()
1/location.replace(url)
【语法】：
location.replace(url)
【功能】：重新定向URL。
【说明】：使用location.replace不会在历史记录中生成新纪录。
2/location.reload()
【语法】：
location.reload()
【功能】：
重新加载当前显示的页面。
【说明】：
1、reload()有可能从缓存中加载
2、 location.reload(true)从服务器重新加载
★【知识点】：
1、掌握对象字面量表示法
2、掌握编码与解码方法
3、掌握解析地址栏中的参数
一、对象字面量
【语法】：
var obj={key1:value1,key2:value2...}
【功能】：
使用对象字面量的形式创建一个对象
【说明】：
1、可以使用obj.key1或obj["key1"]的形式访问对象中的键值
2、可以用obj.key1=value1的形式为obj添加值。
二、encodeURI()
【语法】：encodeURI(URIstring)
【功能】：可把字符串作为URI进行编码。
【参数】：必需。一个字符串，含有URI或其他要编码的文本。
【说明】：
1、 该方法不会对ASCII 字母和数字进行编码
2、不会对ASCII 标点符号进行编码：-_ . ! ~ * ' ( ) 。
3、如URI 组件中含有分隔符，如? 和#
应使用encodeURIComponent() 方法分别对各组件进行编码
三、decodeURI()
【语法】：
decodeURI(URIstring)
【功能】：
可对encodeURI()函数编码过的URI进行编码。
【参数】：
必需。一个字符串，含有要解码的URI或其他要解码的文本。
四、encodeURIComponent()
【语法】：
encodeURIComponent(URIstring)
【功能】：
可把字符串作为URI组件进行编码。
【参数】：
必需。一个字符串，含有URI组件或其他要编码的文本。
【说明】：
1、不会对ASCII字母和数字进行编码
2、也不会对这些ASCII标点符号进行编码：- _ . ! ~ * ' ( ) 。
五、decodeURIComponent()
【语法】：
decodeURIComponent()函数编码的URI进行解码。
【参数】：
必需。一个字符串，含有编码URI组件或其他要解码的文本。
★【知识点】：
掌握BOM中的history对象
history历史对象
1 /history.back()
【语法】：
history.back()
【功能】：
回到历史记录的上一步
【说明】：
想当于使用了history.go(-1)
2/location.forward()
【语法】：
location.forward()
【功能】：
回到历史记录的下一步
【说明】：
相当于使用了history.go(1)
3/history.go(-n)
【语法】：
history.go(-n)
【功能】：
回到历史记录的前n步
4/history.go(n)
【语法】：
history.go(n)
【功能】：
回到历史记录的后n步
★【知识点】
掌握Screen对象及其常用属性
一、Screen对象属性
1/screen.availWidth
【语法】：
screen.availWidth
【功能】：
返回可用的屏幕宽度
2/screen.availHeight
【语法】：
screen.availHeight
【功能】：
返回可用的屏幕高度
【参考案例】：
【注意区别】：
★【知识点】：
1、掌握Navigator对象的userAgent属性
2、掌握如何判断浏览器的类型
3、掌握如何判断设备的终端是移动还是PC
例如：
appCodeName:获取浏览器名称
appName:获取完整的浏览器名称
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>
知识点回顾，indexOf返回的为num
