一、实验目的
理解window对象
控制窗口、框架和弹出窗口
掌握window对象的使用方法
二、预习内容及要求（要求写出预习内容）
window 对象
moveBy(x, y) 函数: 从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
moveTo(x, y) 函数: 移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
resizeBy(w, h) 函数: 相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
resizeTo(w, h) 函数: 把窗体宽度调整为w个像素，高度调整为h个像素
scrollTo(x, y) 函数: 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollBy(x, y) 函数: 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
focus() 函数: 使窗体或控件获取焦点
blur() 函数: 与focus函数相反，使窗体或控件失去焦点
open(url, name, features, replace) 函数: 打开(弹出)一个新的窗体
url -- 要载入窗体的URL
name -- 新建窗体的名称(也可以是HTML target属性的取值，目标)
features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定
close() 函数: 关闭窗体
opener 属性: 对新建窗体的引用
alert(str) 函数: 弹出消息对话框（对话框中有一个OK按钮）
confirm(str) 函数: 弹出消息对话框（对话框中包含一个OK按钮与Cancel按钮）
prompt(str1, str2) 函数: 弹出消息对话框（对话框中包含一个OK按钮、Cancel按钮与一个文本输入框）
defaultStatus 属性: 改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息
status 属性: 临时改变浏览器状态栏的显示，浏览器底部的区域称为状态栏，用于向用户显示信息
setTimeout(codes, interval) 函数: 暂停指定的毫秒数后执行指定的代码
clearTimeout(id) 函数: 取消指定的setTimeout函数将要执行的代码
setInterval(codes, interval) 函数: 间隔指定的毫秒数不停地执行指定的代码
clearInterval(id) 函数: 取消指定的setInterval函数将要执行的代码
history 对象:
go() 函数
back() 函数
forward() 函数
location 对象
hash 属性: 返回URL#后面的内容，如果没有#，返回空
host 属性: 返回URL中的域名部分，例如www.baidu.com
hostname 属性: 返回URL中的主域名部分，例如dreamdu.com
href 属性: 返回或设置当前文档的URL
pathname 属性: 返回URL的域名后的部分。例如 http://www.baidu.com/xhtml/ 返回/xhtml/
port 属性: 返回URL中的端口部分。例如 http://www.baidu.com:8080/xhtml/ 返回8080
protocol 属性: 返回URL中的协议部分。例如 http://www.baidu.com:8080/xhtml/ 返回(//)前面的内容http:
search 属性: 返回URL中的查询字符串部分。例如 http://www.baidu.com/baidu.php?id=5&name=baidu 返回包括(?)后面的内容?id=5&name=baidu
assign(url) 函数: 设置当前文档的URL
replace(url) 函数: 设置当前文档的URL，并且在history对象的地址列表中移除这个URL
reload(isServer) 函数: 重载当前页面
参数说明
isServer -- true时从服务器端重新下载页面，否则只从本地浏览器缓存中重载
不使用参数时，默认为false，从本地浏览器缓存中重载
navigator 对象
userAgent 属性: 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
cookieEnabled 属性: 返回浏览器是否支持(启用)cookie
screen 对象
availHeight 属性: 返回窗口可以使用的屏幕高度，单位像素
availWidth 属性: 返回窗口可以使用的屏幕宽度，单位像素
colorDepth 属性: 返回用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth 属性: 返回用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持此属性）
表单对象
表单中的各种元素创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预习内容及要求</title>
<script>
function openWin(){
myWindow=window.open('http://www.baidu.com/','','width=300,height=400,scrollbars=yes');
myWindow.document.write("<p>这是我的窗口</p>");
}
function moveWin1(){
myWindow.moveBy(250,250);
myWindow.focus();
}
function moveWin2(){
myWindow.moveBy(-250,-250);
myWindow.focus();
}
function moveWin3(){
myWindow.moveTo(0,0);
myWindow.focus();
}
function Resizewindow(){
myWindow.resizeBy(100,100);
}
function resizeTo1(){
myWindow.resizeTo(500,500);
}
function scrollTo1(){
myWindow.scrollTo(600,400);
}
function scrollBy1(){
myWindow.scrollBy(600,600);
}
function openWin2(){
myWindow=window.open('http://www.baidu.com/','','width=300,height=400,left=200,scrollbars=yes');
myWindow.alert("123");
}
</script>
<style>
a:focus, a:active {
color: green;
}
</style>
</head>
<body>
<!-- moveBy(x, y) 函数
: 从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，
将向左移动窗体，y为负数，将向上移动窗体 -->
<input type="button" value="打开我的窗口" onclick="openWin()"/>
<input type="button" value="移动我的窗口1" onclick="moveWin1()"/>
<input type="button" value="移动我的窗口2" onclick="moveWin2()"/>
<!-- moveTo(x, y) 函数: 移动窗体左上角到相对于屏幕左上角的(x,y)点，
当使用负数做为参数时会吧窗体移出屏幕的可视区域 -->
<input type="button" value="移动我的窗口3" onclick="moveWin3()"/><br>
<!-- resizeBy(w, h) 函数: 相对窗体当前的大小，宽度调整w个像素，
高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体 -->
<input type="button" value="Resize window" onclick="Resizewindow()"/>
<!-- resizeTo(w, h) 函数: 把窗体宽度调整为w个像素，高度调整为h个像素 -->
<input type="button" value="resizeTo1" onclick="resizeTo1()"/>
<!-- scrollTo(x, y) 函数: 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，
将纵向滚动条移动到相对于窗体高度为y个像素的位置 -->
<input type="button" value="scrollTo1" onclick="scrollTo1()"/>
<!-- scrollBy(x, y) 函数: 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条
的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条
高度为y个像素的位置(就是向下移动y像素) -->
<input type="button" value="scrollBy1" onclick="scrollBy1()"/><br>
<!-- focus() 函数: 使窗体或控件获取焦点 -->
<script>
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
</script>
<a id="myAnchor" href="file:///G:/JavaScript/javaScript%E4%BD%9C%E4%B8%9A/2021517249+%E7%8E%8B%E9%9B%AA%E4%B8%BD+javaScript6/%E9%A2%84%E4%B9%A0%E5%86%85%E5%AE%B9.html">点击按钮设置或移除以上链接的焦点</a>
<input type="button" onclick="getfocus()" value="获取焦点">
<input type="button" onclick="losefocus()" value="移除焦点"><br>
<!-- blur() 函数: 与focus函数相反，使窗体或控件失去焦点 -->
<!-- open(url, name, features, replace) 函数: 打开(弹出)一个新的窗体
url -- 要载入窗体的URL
name -- 新建窗体的名称(也可以是HTML target属性的取值，目标)
features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定-->
<!-- close() 函数: 关闭窗体 -->
<!-- opener 属性: 对新建窗体的引用 -->
<!-- alert(str) 函数: 弹出消息对话框（对话框中有一个OK按钮） -->
<!-- confirm(str) 函数: 弹出消息对话框（对话框中包含一个OK按钮与Cancel按钮） -->
<!-- prompt(str1, str2) 函数: 弹出消息对话框（对话框中包含一个OK按钮、Cancel按钮与一个文本输入框） -->
<!-- defaultStatus 属性: 改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，
浏览器底部的区域称为状态栏，用于向用户显示信息 -->
<!-- status 属性: 临时改变浏览器状态栏的显示，浏览器底部的区域称为状态栏，用于向用户显示信息 -->
<!-- setTimeout(codes, interval) 函数: 暂停指定的毫秒数后执行指定的代码 -->
<!-- clearTimeout(id) 函数: 取消指定的setTimeout函数将要执行的代码 -->
<!-- setInterval(codes, interval) 函数: 间隔指定的毫秒数不停地执行指定的代码 -->
<!-- clearInterval(id) 函数: 取消指定的setInterval函数将要执行的代码 -->
<input type="button" onclick="openWin2()" value="openWin2"><br>
<!-- history 对象:
go() 函数
back() 函数
forward() 函数 -->
<button onclick="Back1()">back()</button>
<button onclick="Forward1()">forward()</button>
<button onclick="Go1()">go()</button>
<script type="text/javascript">
function Back1(){
history.back();
}
function Forward1(){
history.forward();
}
function Go1(){
var num = prompt('请输入一个整数', '1');
history.go(num);
}
</script>
<br>
<!-- location 对象
hash 属性: 返回URL#后面的内容，如果没有#，返回空
host 属性: 返回URL中的域名部分，例如www.baidu.com
hostname 属性: 返回URL中的主域名部分，例如dreamdu.com
href 属性: 返回或设置当前文档的URL
pathname 属性: 返回URL的域名后的部分。例如 http://www.baidu.com/xhtml/ 返回/xhtml/
port 属性: 返回URL中的端口部分。例如 http://www.baidu.com:8080/xhtml/ 返回8080
protocol 属性: 返回URL中的协议部分。例如 http://www.baidu.com:8080/xhtml/
返回(//)前面的内容http:
search 属性: 返回URL中的查询字符串部分。例如 http://www.baidu.com/baidu.php?id=5&name=baidu
返回包括(?)后面的内容?id=5&name=baidu -->
<script>
document.write("location.hash:"+location.hash+"</br>");
document.write("location.host:"+location.host+"</br>");
document.write("location.hostname:"+location.hostname+"</br>");
document.write("location.href:"+location.href+"</br>");
document.write("location.pathname:"+location.pathname+"</br>");
document.write("location.port:"+location.port+"</br>");
document.write("location.protocol:"+location.protocol+"</br>");
document.write("location.search:"+location.search+"</br>");
</script>
<!-- assign(url) 函数: 设置当前文档的URL -->
<script type="text/javascript">
function assign1()
{
window.location.assign("http://www.baidu.com/baidu.php?id=5&name=baidu")
}
</script>
<input type="button" value="assign" onclick="assign1()" />
<!-- replace(url) 函数: 设置当前文档的URL，并且在history对象的地址列表中移除这个URL -->
<script type="text/javascript">
function replace1()
{
const myMessage = 'this is the sentence to end all sentences';
const newMessage = myMessage.replace('sentence', 'message');
alert(newMessage);
}
</script>
<input type="button" value="replace" onclick="replace1()" />
<!-- reload(isServer) 函数: 重载当前页面
参数说明
isServer -- true时从服务器端重新下载页面，否则只从本地浏览器缓存中重载
不使用参数时，默认为false，从本地浏览器缓存中重载-->
<script type="text/javascript">
function reload1()
{
window.location.reload()
}
</script>
<input type="button" value="Reload" onclick="reload1()" />
<!--navigator 对象
userAgent 属性: 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
cookieEnabled 属性: 返回浏览器是否支持(启用)cookie-->
<script type="text/javascript">
document.write("<p>UserAgent: "+navigator.userAgent +"</p>");
document.write("<p>CookieEnabled: "+navigator.cookieEnabled + "</p>");
</script>
<!--screen 对象
availHeight 属性: 返回窗口可以使用的屏幕高度，单位像素
availWidth 属性: 返回窗口可以使用的屏幕宽度，单位像素
colorDepth 属性: 返回用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth 属性: 返回用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持此属性） -->
<script type="text/javascript">
document.write("<p>Available Height: "+screen.availHeight + "</p>");
document.write("<p>Available Width: "+screen.availWidth + "</p>");
document.write("<p>Color Depth: "+screen.colorDepth + "</p>");
document.write("<p>Pixel Depth: "+screen.pixelDepth + "</p>");
</script>
<!-- 表单对象
表单中的各种元素创建 -->
<form id="form1" name="myFrom" action="http://baidu.com" method="get">
账户：<input type="text" name="uname" id="uname"/>
密码：<input type="password" name="upass" id="upass"/>
</form>
</body>
</html>
三、实验内容、操作过程及实验结果记录
1. 在html中使用BOM对象示例，注意其中的οnclick= " "动作，可以插入javascript代码或函数。测试以下代码，并基于该代码完成下面练习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一题</title>
</head>
<body>
<script>
function myaction(){
alert("动作函数");
};
</script>
<input type="button" value="动作按钮" onclick="myaction()"/>
</body>
</html>
2. 编写代码，可以通过参数设置，控制当前浏览器窗口，使之能够上下左右移动，放大、缩小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二题</title>
</head>
<body>
<script>
window.moveTo(0, 0);//移动窗口
window.resizeTo(800, 600);//改变大小
window.onresize=new Function("window.resizeTo(800, 600);")
</script>
</body>
</html>3. 编写代码，当点击按钮时，能够在新窗口打开一个网址，之后用代码关闭这个新窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三题</title>
</head>
<body>
<script>
function openWin2(){
myWindow=window.open('http://www.baidu.com/','','width=300,height=400,left=200,scrollbars=yes');
}
function closeWin2(){
myWindow.close();
}
</script>
<input type="button" value="打开新网页" onclick="openWin2()"/>
<input type="button" value="关闭新网页" onclick="closeWin2()"/>
</body>
</html>
4. 编写代码，点击按钮之后，将每隔10秒钟弹出一个对话框，弹出5次后结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第四题</title>
</head>
<body>
<script>
var num=1;
window.onload=function(){
//定时器每秒调用一次fnDate()
setInterval(function(){
giveTime();
if(num<=5){
alert("num:"+num);
}
num++;
},3000);
}
function giveTime(){
var curtTime=document.getElementById("curt-time");
var curtDate=document.getElementById("curt-date");
var curtDay=document.getElementById("curt-day");
var date=new Date();
var year=date.getFullYear();//当前年份
var month=date.getMonth();//当前月份
var data=date.getDate();//天
var day =date.getDay();//周几
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var hours=date.getHours();//小时
var minute=date.getMinutes();//分
var second=date.getSeconds();//秒
month = month + 1;
if (month < 10) month = "0" + month;
if (data < 10) data = "0" + data;
if (hours < 10) hours = "0" + hours;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;
var curtDates=year+"-"+month+"-"+data;
var curtTimes=hours+":"+minute+":"+second;
curtTime.innerHTML=curtTimes;
curtDate.innerHTML=curtDates;
curtDay.innerHTML=weekday[day];
}
</script>
<div class="hd-time fl_l">
<span id="curt-time" class="DINProMedium font-24 curt-time"></span>
<div class="mg_t_x2">
<span id="curt-date" class="DINProRegular"></span>
<span id="curt-day" class="font-14"></span>
</div>
</div>
</body>
</html>
5.编写代码，实现如下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第五题</title>
</head>
<body>
</body>
<script>
var t;
function Beg(){
if(document.getElementById("Beg").value=="暂停计时"){
document.getElementById("Beg").value="开始计时";
clearTimeout(t);
}else if( document.getElementById("Beg").value=="开始计时"){
document.getElementById("Beg").value="暂停计时"
t = setInterval ("clock()" , 1000); //反复执行函数本身
}
}
var num=60;
function clock(){
num>0 ? num-- : clearInterval(t);
if(num>=10){
document.getElementById("time").value="00:00:"+num;
}else if(num==0){
document.getElementById("time").value="00:00:0"+num;
clearTimeout(t);
}
}
function End(){
clearTimeout(t);
}
</script>
一分钟倒计时：
<input type="button" id="Beg" value="开始计时" onclick="Beg()" />
<input type="button" id="time" value="00:00:00"/>
<input type="button" id="End" value="停止计时" onclick="End()" />
</body>
</html>
6. 编写代码，点击按钮之后，获取当前页面的host、hostname、href、pathname、port、protocol信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第六题</title>
</head>
<body>
<script>
function but1(){
document.write("location.hash:"+location.hash+"</br>");
document.write("location.host:"+location.host+"</br>");
document.write("location.hostname:"+location.hostname+"</br>");
document.write("location.href:"+location.href+"</br>");
document.write("location.pathname:"+location.pathname+"</br>");
document.write("location.port:"+location.port+"</br>");
document.write("location.protocol:"+location.protocol+"</br>");
document.write("location.search:"+location.search+"</br>");
}
</script>
<input type="button" value="show message" onclick="but1()" />
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
