ACCP V4.0
第九章
JavaScript 中的浏览器对象
ACCP V4.02
回顾
定义数组 a，大小为 10，存放的数据分别是
1-10，对应的 js代码为？
希望知道数组的大小，使用哪个属性？
代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“>
var a="3“,b="4";
alert (isNaN(a));
alert (a+"+"+b );
alert (eval(a+"+"+b) );
</SCRIPT>
ACCP V4.03
回顾
代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“>
var s="abcdefg" ;
alert ( s.indexOf("cd",0) ) ;
alert (s.substr(1,2)) ;
alert (Math.round(9.38)) ;
var now=new Date( );
alert (now.getMonth( )) ;
</SCRIPT>
ACCP V4.04
目标
理解事件处理程序的概念
了解 JavaScript 中的常用事件
掌握常用的浏览器对象：
window
document
history
ACCP V4.05
事件处理
事件是发生并得到处理的操作事件：电话振铃 处理事件
ACCP V4.06
JavaScript 事件处理程序
JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行事件 处理事件事件处理程序的基本语法是：
事件名 =" JavaScript 代码或调用函数 "
例如：
<INPUT type=”BUTTON” … onClick=“alert(“单击我！” );”>
<INPUT type=”BUTTON” … onMouseDown=“check( )”>
表示鼠标按下时，将调用执行函数 check( ) 。
ACCP V4.07
JavaScript 事件事件名 说明
onClick 鼠标单击
onChange 文本内容或下拉菜单中的选项发生改变
onFocus 获得焦点，表示文本框等获得鼠标光标。
onBlur 失去焦点，表示文本框等失去鼠标光标。
onMouseOver 鼠标悬停，即鼠标停留在图片等的上方
onMouseOut 鼠标移出，即离开图片等所在的区域
onMouseMove 鼠标移动，表示在 <DIV>层等上方移动
onLoad 网页文档加载事件
onSubmit 表单提交事件
onMouseDown 鼠标按下
onMouseUp 鼠标弹起
ACCP V4.08
card
pass
myform
<HEAD>
<SCRIPT language="JavaScript" >
function myfun1( )
{
if (document.myform.card.value=="请注意格式,10xxxxxx")
document.myform.card.value="" ;
}
function myfun2( )
{
var a=document.myform.card.value;
if (a.substr(0,2)!="10" || isNaN(a))
{
alert("格式错误，请重新输入 ") ;
document.myform.card.focus();
}
}
</SCRIPT>
</HEAD>
onFocus和 onBlur 事件 -1
文本框获得鼠标焦点时
（ onFocus） 调用的函数：
清空卡号文本框文本框失去鼠标焦点时
（ onBlur）调用的函数：
判断格式是否正确
focus( )方法再次获得焦点，即鼠标光标回到卡号文本框
ACCP V4.09
<BODY>
<FORM name="myform">
<H2>卡号：
<INPUT name = card type = text onFocus="myfun1( )“
value="请注意格式,10xxxxxx,onBlur="myfun2( )" >
<BR>
密码,<INPUT name = pass type = text >
</H2>
</FORM>
</BODY>
onFocus和 onBlur 事件 -2
<STYLE type="text/css">
<!--
input
{
background-color,#55FFFF;
font-size,20px;
border,1px solid;
}
-->
</STYLE>
表单元素 <INPUT>样式添加事件处理
ACCP V4.010
onMouseOver和
onMouseDown事件
<HTML>
<HEAD>
<TITLE>图片切换 </TITLE>
</HEAD>
<BODY>
<A href="http://www.mycom.cn">
<IMG src=“dog1.jpg” name=“picture” width=“400”
height=“155” onMouseOver=,src=?dog2.jpg?,
onMouseOut=,src=?dog1.jpg?,> 低价转让哈士奇弟弟
</A>
<H1> 移过来看看俺啊 </H1>
</BODY>
</HTML>
添加事件处理,
切换图片
onMouseOver="src='dog2.jpg'"
表示本图片的图片名称替换为 dog2.jpg。
请注意：
由于外面两端已有双引号，为区别起见,dog2.jpg改用为单引号括起来。
ACCP V4.011
浏览器对象简介 2-1
http://www.google.com
Window
窗口对象
location
地址对象
document
文档对象
FORM
表单对象浏览器对象的分层结构
window.document.myform.text1
ACCP V4.012
浏览器对象简介 2-2
浏览器对象的分层结构
ACCP V4.013
Window 对象 7-1
属性名称 说明
document 表示给定浏览器窗口中的 HTML 文档。
history 包含有关客户访问过的 URL的信息。
location 包含 有关当前 URL 的信息。
name 设置或检索窗口或框架 的名称。
status 设置或检索窗口底部的状态栏中的消息。
screen 包含有关客户 端的屏幕和显示性能的信息。
ACCP V4.014
Window 对象 7-2
方法名称 说明
alert (“m提示信息 ") 显示包含消息的对话框。
confirm（“提示信息”） 显示一个确认对话框，包含一个确定取消按钮
Prompt（”提示信息“） 弹出提示信息框
open ("url","name") 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( ) 关闭当前窗口
setTimeout（,函数,,毫秒数） 设置定时器：经过指定毫秒值后执行某个函数
clearTimeout(定时器对象 )
ACCP V4.015
Window 对象 7-3<HTML><HEAD>
<SCRIPT>
function openwindow( )
{
window.open("google.htm");
}
function closewindow( )
{
window.close ( );
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=button VALUE="打开窗口 " onClick="openwindow()">
<INPUT TYPE=button VALUE="关闭窗口 " onClick="closewindow()">
</FORM>
<BODY>
使用 Open 方法打开新窗口使用 Close 方法关闭窗口添加单击事件因为 window是最顶层的根，所以可以省略
window.open("google.htm");
可简写为：
open("google.htm");
close（）方法也是如此。
ACCP V4.016
open（”打开窗口的 url”，”窗口名”，”窗口特征”）
窗口的特征如下，可以任意组合：
height,窗口高度；
width,窗口宽度；
top,窗口距离屏幕上方的象素值；
left：窗口距离屏幕左侧的象素值；
toolbar,是否显示工具栏,yes为显示；
menubar,scrollbars 表示菜单栏和滚动栏。
resizable,是否允许改变窗口大小,yes或 1为允许
location,是否显示地址栏,yes或 1为允许
status,是否显示状态栏内的信息,yes或 1为允许；
Window 对象 7-4
我们需要预先制作好广告页面，假设为 adv.htm，打开广告窗口的语句如下,
open(“adv.htm”,“”,“toolbars=0,scrollbars=0,
location=0,statusbars=0,menubars=0,
resizable=0,width=650,height=150”);
ACCP V4.017
<HTML>
<HEAD>
<SCRIPT language="JavaScript" >
function openwindow( )
{
open("adv.htm","","toolbars=0,scrollbars=0,
location=0,statusbars=0,menubars=0,
resizable=0,width=650,height=150");
}
</SCRIPT>
</HEAD>
<BODY onLoad="openwindow( )">
<H2>看看和我一起打开的广告窗口 </H2>
</BODY>
</HTML>
Window 对象 7-5
使用 Open 方法打开广告新窗口添加页面加载事件
ACCP V4.018
1.插入一个层 Layer1，
z-index=1；
2.层中插入一幅图片。
3.定时器函数 setTimeout （）的用法：
setTimeout（“调用的函数名”，间隔的毫秒数）
表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器,clearTimeout（）方法。
例如：
var myclock＝ setTimeout（” move( )”,500） ;
if (…)
clearTimeout（ myclock） ;；
Window 对象 7-6
ACCP V4.019
<head>
<script language=JavaScript>
function move( )
{
document.getElementById("Layer1").style.left= Math.random()*500;
document.getElementById("Layer1").style.top= Math.random()*500;
setTimeout("move()",1000);
}
</script>
</head>
<body onload="move( )"">
<DIV id="Layer1" style="position:absolute; left:14px; top:44px;
width:150px; height:102px; z-index:1">
<A href="http://www.mycom.cn"><IMG src="piaofu.jpg" width="150"
height="100" border="0"></A>
</DIV>
<H2>随机漂浮的广告 </H2>
</BODY>
Window 对象 7-7
定义层图片移动的函数 move( )
每隔 1秒调用 move( )函数随机改变层的位置，从而实现随机漂浮的效果
getElementById(“ID名称,) 方法：根据 ID名称获取 HTML元素，
这里表示获取层对象 Layer1。
left和 top表示层 Layer1的左边距和上边距，设定为随机的值。
ACCP V4.020
Document 对象 3-1
属性名称 说明
alinkColor 设置或检索文档中所有活动链接的颜色
bgColor 设置或检索 Document 对象的背景色
body 指定文档正文的开 始和结束
linkColor 设置或检索文档链接的颜色
location 包含关于当前 URL 的信息
title 包含文档的标题
url 设置或检索当前文档的 URL
vlinkColor 设置或检索用户访问过的链接的颜色
ACCP V4.021
Document 对象 3-2
方法名称 说明
clear ( ) 清除当前文档
close ( ) 关闭输出流并强制显示发送的数据
write ("text") 将文本写入文档
ACCP V4.022
Document 对象 3-3
<HTML>
<HEAD>
<TITLE>无标题文档 </TITLE>
<SCRIPT language="JavaScript">
function change(color)
{
document.bgColor=color ;
}
</SCRIPT>
</HEAD>
<BODY>
<H2> 移过来我变色给你看看！ </H2>
<FONT size=4>
<SPAN onMouseOver="change('red')">变红色 </SPAN>|
<SPAN onMouseOver="change('blue')">变蓝色 </SPAN>|
<SPAN onMouseOver="change('yellow')">变黄色 </SPAN>
</FONT>
</BODY>
利用 document对象的
bgColor属性改变背景色添加鼠标悬停事件
ACCP V4.023
History对象 4-1
history 对象
方法名称 说明
back() 加载 History 列表中的上一个 URL。
forward() 加载 History 列表中的下一个 URL。
go("url" or
number)
加载 History 列表中的一个 URL,或要求浏览器移动指定的页面数 。
Back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进 1页，等价于 forward( )方法；
go(-1) 代表后退 1页，等价于 back( )方法；
ACCP V4.024
Location对象 4-2
Location 对象
属性名称 说明
host 设置或检索位置或 URL 的主机名和端口号
hostname 设置或检索位置或 URL 的主机名部分
href 设置或检索完整的 URL 字符串名称 说明
assign("url") 加载 URL 指定的新的 HTML 文档 。
reload() 重新加载当前页
replace("url") 通过加载 URL 指定的文档来替换当前文档
方法
ACCP V4.025
History 对象和
Location 对象 4-3
下拉菜单
menu1
ACCP V4.026
History 和
Location 对象 4-4 <script language="JavaScript" >
function jump ( )
{
location.href=document.myform.menu1.value;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
...
<SELECT name="menu1" onChange="jump( )" >
<OPTION>---请选择季节景色 --</OPTION>
<OPTION value="spring.htm">春天美景 </OPTION>
<OPTION value="summer.htm">夏天一色 </OPTION>
…
根据用户的选择，
修改跳转的网址添加选项改变事件
ACCP V4.027
总结
JavaScript 程序是事件驱动程序
onFocus获得焦点事件，表示获得鼠标光标，
onBlur失去焦点事件，刚好与之相反
浏览器对象是一个分层次的结构,window是顶层的根对象
打开窗口使用 window对象的 open( )方法
设置定时器，使用 window对象的 setTimeout( )方法
location对象的 back( )和 forward( )方法等同于前进、后退按钮
第九章
JavaScript 中的浏览器对象
ACCP V4.02
回顾
定义数组 a，大小为 10，存放的数据分别是
1-10，对应的 js代码为？
希望知道数组的大小，使用哪个属性？
代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“>
var a="3“,b="4";
alert (isNaN(a));
alert (a+"+"+b );
alert (eval(a+"+"+b) );
</SCRIPT>
ACCP V4.03
回顾
代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“>
var s="abcdefg" ;
alert ( s.indexOf("cd",0) ) ;
alert (s.substr(1,2)) ;
alert (Math.round(9.38)) ;
var now=new Date( );
alert (now.getMonth( )) ;
</SCRIPT>
ACCP V4.04
目标
理解事件处理程序的概念
了解 JavaScript 中的常用事件
掌握常用的浏览器对象：
window
document
history
ACCP V4.05
事件处理
事件是发生并得到处理的操作事件：电话振铃 处理事件
ACCP V4.06
JavaScript 事件处理程序
JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行事件 处理事件事件处理程序的基本语法是：
事件名 =" JavaScript 代码或调用函数 "
例如：
<INPUT type=”BUTTON” … onClick=“alert(“单击我！” );”>
<INPUT type=”BUTTON” … onMouseDown=“check( )”>
表示鼠标按下时，将调用执行函数 check( ) 。
ACCP V4.07
JavaScript 事件事件名 说明
onClick 鼠标单击
onChange 文本内容或下拉菜单中的选项发生改变
onFocus 获得焦点，表示文本框等获得鼠标光标。
onBlur 失去焦点，表示文本框等失去鼠标光标。
onMouseOver 鼠标悬停，即鼠标停留在图片等的上方
onMouseOut 鼠标移出，即离开图片等所在的区域
onMouseMove 鼠标移动，表示在 <DIV>层等上方移动
onLoad 网页文档加载事件
onSubmit 表单提交事件
onMouseDown 鼠标按下
onMouseUp 鼠标弹起
ACCP V4.08
card
pass
myform
<HEAD>
<SCRIPT language="JavaScript" >
function myfun1( )
{
if (document.myform.card.value=="请注意格式,10xxxxxx")
document.myform.card.value="" ;
}
function myfun2( )
{
var a=document.myform.card.value;
if (a.substr(0,2)!="10" || isNaN(a))
{
alert("格式错误，请重新输入 ") ;
document.myform.card.focus();
}
}
</SCRIPT>
</HEAD>
onFocus和 onBlur 事件 -1
文本框获得鼠标焦点时
（ onFocus） 调用的函数：
清空卡号文本框文本框失去鼠标焦点时
（ onBlur）调用的函数：
判断格式是否正确
focus( )方法再次获得焦点，即鼠标光标回到卡号文本框
ACCP V4.09
<BODY>
<FORM name="myform">
<H2>卡号：
<INPUT name = card type = text onFocus="myfun1( )“
value="请注意格式,10xxxxxx,onBlur="myfun2( )" >
<BR>
密码,<INPUT name = pass type = text >
</H2>
</FORM>
</BODY>
onFocus和 onBlur 事件 -2
<STYLE type="text/css">
<!--
input
{
background-color,#55FFFF;
font-size,20px;
border,1px solid;
}
-->
</STYLE>
表单元素 <INPUT>样式添加事件处理
ACCP V4.010
onMouseOver和
onMouseDown事件
<HTML>
<HEAD>
<TITLE>图片切换 </TITLE>
</HEAD>
<BODY>
<A href="http://www.mycom.cn">
<IMG src=“dog1.jpg” name=“picture” width=“400”
height=“155” onMouseOver=,src=?dog2.jpg?,
onMouseOut=,src=?dog1.jpg?,> 低价转让哈士奇弟弟
</A>
<H1> 移过来看看俺啊 </H1>
</BODY>
</HTML>
添加事件处理,
切换图片
onMouseOver="src='dog2.jpg'"
表示本图片的图片名称替换为 dog2.jpg。
请注意：
由于外面两端已有双引号，为区别起见,dog2.jpg改用为单引号括起来。
ACCP V4.011
浏览器对象简介 2-1
http://www.google.com
Window
窗口对象
location
地址对象
document
文档对象
FORM
表单对象浏览器对象的分层结构
window.document.myform.text1
ACCP V4.012
浏览器对象简介 2-2
浏览器对象的分层结构
ACCP V4.013
Window 对象 7-1
属性名称 说明
document 表示给定浏览器窗口中的 HTML 文档。
history 包含有关客户访问过的 URL的信息。
location 包含 有关当前 URL 的信息。
name 设置或检索窗口或框架 的名称。
status 设置或检索窗口底部的状态栏中的消息。
screen 包含有关客户 端的屏幕和显示性能的信息。
ACCP V4.014
Window 对象 7-2
方法名称 说明
alert (“m提示信息 ") 显示包含消息的对话框。
confirm（“提示信息”） 显示一个确认对话框，包含一个确定取消按钮
Prompt（”提示信息“） 弹出提示信息框
open ("url","name") 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( ) 关闭当前窗口
setTimeout（,函数,,毫秒数） 设置定时器：经过指定毫秒值后执行某个函数
clearTimeout(定时器对象 )
ACCP V4.015
Window 对象 7-3<HTML><HEAD>
<SCRIPT>
function openwindow( )
{
window.open("google.htm");
}
function closewindow( )
{
window.close ( );
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=button VALUE="打开窗口 " onClick="openwindow()">
<INPUT TYPE=button VALUE="关闭窗口 " onClick="closewindow()">
</FORM>
<BODY>
使用 Open 方法打开新窗口使用 Close 方法关闭窗口添加单击事件因为 window是最顶层的根，所以可以省略
window.open("google.htm");
可简写为：
open("google.htm");
close（）方法也是如此。
ACCP V4.016
open（”打开窗口的 url”，”窗口名”，”窗口特征”）
窗口的特征如下，可以任意组合：
height,窗口高度；
width,窗口宽度；
top,窗口距离屏幕上方的象素值；
left：窗口距离屏幕左侧的象素值；
toolbar,是否显示工具栏,yes为显示；
menubar,scrollbars 表示菜单栏和滚动栏。
resizable,是否允许改变窗口大小,yes或 1为允许
location,是否显示地址栏,yes或 1为允许
status,是否显示状态栏内的信息,yes或 1为允许；
Window 对象 7-4
我们需要预先制作好广告页面，假设为 adv.htm，打开广告窗口的语句如下,
open(“adv.htm”,“”,“toolbars=0,scrollbars=0,
location=0,statusbars=0,menubars=0,
resizable=0,width=650,height=150”);
ACCP V4.017
<HTML>
<HEAD>
<SCRIPT language="JavaScript" >
function openwindow( )
{
open("adv.htm","","toolbars=0,scrollbars=0,
location=0,statusbars=0,menubars=0,
resizable=0,width=650,height=150");
}
</SCRIPT>
</HEAD>
<BODY onLoad="openwindow( )">
<H2>看看和我一起打开的广告窗口 </H2>
</BODY>
</HTML>
Window 对象 7-5
使用 Open 方法打开广告新窗口添加页面加载事件
ACCP V4.018
1.插入一个层 Layer1，
z-index=1；
2.层中插入一幅图片。
3.定时器函数 setTimeout （）的用法：
setTimeout（“调用的函数名”，间隔的毫秒数）
表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器,clearTimeout（）方法。
例如：
var myclock＝ setTimeout（” move( )”,500） ;
if (…)
clearTimeout（ myclock） ;；
Window 对象 7-6
ACCP V4.019
<head>
<script language=JavaScript>
function move( )
{
document.getElementById("Layer1").style.left= Math.random()*500;
document.getElementById("Layer1").style.top= Math.random()*500;
setTimeout("move()",1000);
}
</script>
</head>
<body onload="move( )"">
<DIV id="Layer1" style="position:absolute; left:14px; top:44px;
width:150px; height:102px; z-index:1">
<A href="http://www.mycom.cn"><IMG src="piaofu.jpg" width="150"
height="100" border="0"></A>
</DIV>
<H2>随机漂浮的广告 </H2>
</BODY>
Window 对象 7-7
定义层图片移动的函数 move( )
每隔 1秒调用 move( )函数随机改变层的位置，从而实现随机漂浮的效果
getElementById(“ID名称,) 方法：根据 ID名称获取 HTML元素，
这里表示获取层对象 Layer1。
left和 top表示层 Layer1的左边距和上边距，设定为随机的值。
ACCP V4.020
Document 对象 3-1
属性名称 说明
alinkColor 设置或检索文档中所有活动链接的颜色
bgColor 设置或检索 Document 对象的背景色
body 指定文档正文的开 始和结束
linkColor 设置或检索文档链接的颜色
location 包含关于当前 URL 的信息
title 包含文档的标题
url 设置或检索当前文档的 URL
vlinkColor 设置或检索用户访问过的链接的颜色
ACCP V4.021
Document 对象 3-2
方法名称 说明
clear ( ) 清除当前文档
close ( ) 关闭输出流并强制显示发送的数据
write ("text") 将文本写入文档
ACCP V4.022
Document 对象 3-3
<HTML>
<HEAD>
<TITLE>无标题文档 </TITLE>
<SCRIPT language="JavaScript">
function change(color)
{
document.bgColor=color ;
}
</SCRIPT>
</HEAD>
<BODY>
<H2> 移过来我变色给你看看！ </H2>
<FONT size=4>
<SPAN onMouseOver="change('red')">变红色 </SPAN>|
<SPAN onMouseOver="change('blue')">变蓝色 </SPAN>|
<SPAN onMouseOver="change('yellow')">变黄色 </SPAN>
</FONT>
</BODY>
利用 document对象的
bgColor属性改变背景色添加鼠标悬停事件
ACCP V4.023
History对象 4-1
history 对象
方法名称 说明
back() 加载 History 列表中的上一个 URL。
forward() 加载 History 列表中的下一个 URL。
go("url" or
number)
加载 History 列表中的一个 URL,或要求浏览器移动指定的页面数 。
Back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进 1页，等价于 forward( )方法；
go(-1) 代表后退 1页，等价于 back( )方法；
ACCP V4.024
Location对象 4-2
Location 对象
属性名称 说明
host 设置或检索位置或 URL 的主机名和端口号
hostname 设置或检索位置或 URL 的主机名部分
href 设置或检索完整的 URL 字符串名称 说明
assign("url") 加载 URL 指定的新的 HTML 文档 。
reload() 重新加载当前页
replace("url") 通过加载 URL 指定的文档来替换当前文档
方法
ACCP V4.025
History 对象和
Location 对象 4-3
下拉菜单
menu1
ACCP V4.026
History 和
Location 对象 4-4 <script language="JavaScript" >
function jump ( )
{
location.href=document.myform.menu1.value;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
...
<SELECT name="menu1" onChange="jump( )" >
<OPTION>---请选择季节景色 --</OPTION>
<OPTION value="spring.htm">春天美景 </OPTION>
<OPTION value="summer.htm">夏天一色 </OPTION>
…
根据用户的选择，
修改跳转的网址添加选项改变事件
ACCP V4.027
总结
JavaScript 程序是事件驱动程序
onFocus获得焦点事件，表示获得鼠标光标，
onBlur失去焦点事件，刚好与之相反
浏览器对象是一个分层次的结构,window是顶层的根对象
打开窗口使用 window对象的 open( )方法
设置定时器，使用 window对象的 setTimeout( )方法
location对象的 back( )和 forward( )方法等同于前进、后退按钮
