<html>
<head>
<title>window对象学习</title>
<meta charset="UTF-8"/>
<!--
BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。
BOM的具体实现是window对象
window对象使用学习：
1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。
2、框体方法
alert:警告框 提示一个警告信息，没有返回
confirm:确认框 提示用户选择一项操作（确定/取消）
点击确定 返回true
点击取消 返回false
prompt:提示框， 提示用某个信息的录入或者说收集
点击确定，返回当前用书录入的数据，默认返回空字符串
点击取消,返回null
3、定时和间隔执行方法
setTimeout:指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前定时器的id
setInterval:每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前间隔器的id
clearTimeout:用来停止指定的定时器
参数：定时器的id
clearInterval:用来停止指定的间隔器
参数：间隔器的id
-->
<!--声明js代码域-->
<script type="text/javascript">
//框体方法学习：
//警告框
function testAlert(){
var a=window.alert("我是警告框");
alert(a);
}
//确认框
function testConfirm(){
var flag=window.confirm("你确定要删除吗?");
alert(flag);
}
//提示框
function testPrompt(){
var str=window.prompt("请输入昵称：");
alert(str);
}
/*----------------------------------------------------------------------------------------------*/
var idi;
var ids
//定时执行
function testSetTimeout(){
idi=window.setTimeout(function(){
alert("我是定时执行");
},3000);
}
//间隔执行
function testSetInterval(){
ids=window.setInterval(function(){
alert("我是间隔执行");
},2000);
}
//停止当前的定时方法
function testClearTimeout(){
window.clearTimeout(idi);
}
function testClearInterval(){
window.clearInterval(ids);
}
</script>
</head>
<body>
<h3>window对象学习</h3>
<hr />
<input type="button" name="" id="" value="测试警告框" onclick="testAlert();" />
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" />
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
<hr />
<input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/>
<input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/>
<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" />
<input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" />
</body>
</html>
部分二：
<html>
<head>
<title>js的window对象学习2</title>
<meta charset="UTF-8"/>
<!--
js的window对象学习
1、子窗口方法
window.open('子页面的资源(相对路径)','打卡方式','配置');
示例：window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
注意:
关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
2、子页面调用父页面的函数
window.opener.父页面的函数
js的window对象的常用属性
地址栏属性:location
window.location.href="新的资源路径（相对路径/URL）"
window.location.reload()重新加载页面资源
历史记录属性
window.history.forward() 页面资源前进，历史记录的前进。
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意window.history.go(0)相当于刷新。
屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.screen.height;//获取屏幕的高度分辨率
浏览器配置属性
主体面板属性(document)
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、子页面方法
function testOpen(){
window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
}
//2、子页面调用父页面的函数
function testFather(){
alert("父页面");
}
/*----------------------------------------------------------------------------*/
//1、地址栏属性学习--location
function testLocation(){
window.location.href="http://www.baidu.com";
}
function testLocation2(){
window.location.reload();
}
//2、历史记录属性
function testHistory(){
window.history.forward();
}
function testHistory2(){
window.history.go(0);
}
//3、屏幕属性学习
function testScreen(){
var x=window.screen.width;
var y=window.screen.height;
alert(x+":"+y)
}
//4、浏览器配置属性
function testNa(){
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<h3>js的window对象学习2</h3>
<hr />
<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
<hr />
<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
<br /><br />
<input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/>
<input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/>
<br /><br />
<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
</body>
</html>
部分一：