Java软件工程师从笨鸟到初学者之（三十）javascript弹出框、事件、对象化编程

Java程序员从笨鸟到菜鸟之（三十）javascript弹出框、事件、对象化编程

一：弹出框

JavaScript中有三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)。?

1.警告(alert)?

在访问网站的时候，你遇到“咚”的一声，一个小窗口出现在你面前，上面写着一段警示性的文字，或是其它的提示信息。如果你不点击确定，你就不能对网页做任何的操作。没错，这个“咚”的小窗口就是alert干的。?下面的代码是一段使用alert的实例。?

alert("我是菜鸟我怕谁");?

</script>?

2.确认(confirm)?

确认框用于让用户选择某一个问题是否符合实际情况。来看下面的代码：我们用confirm("你是菜鸟吗？")向访客提问，变量r则保存了访客的回应，它只可能有两种取值：true或false。没错，它是一个布尔值。confirm后面的语句则是我们对访客回答做出的不同回应。?

>??

?2.文档对象?

文档对象是指在网页文档里划分出来的对象。在?JavaScript?能够涉及的范围内有如下几个“大”对象：window,?document,?location,?navigator,?screen,?history?等。下面是一个文档对象树。?

要引用某个对象，就要把父级的对象都列出来。例如，要引用某表单“MyForm”的某文字框“UserName”，就要用“document.?MyForm.?UserName”。?

引用Form下的表单元素对象不使用名称，比如Button，而是通过对象的ID?或?Name进行引用，或使用它所属的对象数组。比如：?

<input?id="UserName"?type="text"?/>?

var?name?=?document.getElementById("UserName");//通过id获取值?

（1）navigator?

navigator?浏览器对象?反映了当前使用的浏览器的资料。?

属性?

appCodeName?返回浏览器的“码名”，流行的?IE?和?NN?都返回?'Mozilla'。?

appName?返回浏览器名。IE?返回?'Microsoft?Internet?Explorer'，NN?返回?'Netscape'。

appVersion?返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。?

platform?返回浏览器的操作平台，对于?Windows?9x?上的浏览器，返回?'Win32'（大小写可能有差异）。?

userAgent?返回以上全部信息。例如，IE5.01?返回?'Mozilla/4.0?(compatible;?MSIE?5.01;?Windows?98)'。?

javaEnabled()?返回一个布尔值，代表当前浏览器允许不允许?Java。?

（2）screen?

screen?屏幕对象?反映了当前用户的屏幕设置。?

属性?

width?返回屏幕的宽度（像素数）。?height?返回屏幕的高度。?availWidth?返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。

?availHeight?返回屏幕的可用高度。

?colorDepth?返回当前颜色设置所用的位数?-?1：黑白；8：256色；16：增强色；24/32：真彩色?

（3）window?

window?窗口对象是最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。一个框架页面也是一个窗口。?

属性?

name?窗口的名称，由打开它的连接（<a?target="...">）或框架页（<frame?name="...">）或某一个窗口调用的?open()?方法决定。一般我们不会用这个属性。?

status?指窗口下方的“状态栏”所显示的内容。通过对?status?赋值，可以改变状态栏的显示。?

opener?用法：window.opener；返回打开本窗口的窗口对象。

注意：返回的是一个窗口对象。如果窗口不是由其他窗口打开的，在?Netscape?中这个属性返回?null；在?IE?中返回“未定义”（undefined）。

undefined?在一定程度上等于?null。

注意：undefined?不是?JavaScript?常数，如果你企图使用“undefined”，那就真的返回“未定义”了。?

self?指窗口本身，它返回的对象跟?window?对象是一模一样的。最常用的是“self.close()”，放在<a>标记中：“<a?href="javascript:self.close()">关闭窗口</a>”。

?parent?返回窗口所属的框架页对象。?

top?返回占据整个浏览器窗口的最顶端的框架页对象。

?history?历史对象，见下。?

location?地址对象，见下。?

document?文档对象，见下。?

方法?

open()?打开一个窗口。?

用法：open(<URL字符串>,?<窗口名称字符串>,?<参数字符串>);?<URL字符串>：描述所打开的窗口打开哪一个网页。如果留空（''），则不打开任何网页。?<窗口名称字符串>：描述被打开的窗口的名称（window.name），可以使用'_top'、'_blank'等内建名称。这里的名称跟“<a?href="..."?target="...">”里的“target”属性是一样的。?<参数字符串>：描述被打开的窗口的样式。如果只需要打开一个普通窗口，该字符串留空（''），如果要指定样式，就在字符串里写上一到多个参数，参数之间用逗号隔开。?

例：打开一个?400?x?100?的干净的窗口：?open('','_blank','width=400,height=100,menubar=no,toolbar=no,?location=no,directories=no,status=no,scrollbars=yes,resizable=yes')?

参数?

top=#?

窗口顶部离开屏幕顶部的像素数?

left=#?

窗口左端离开屏幕左端的像素数?

width=#?

窗口的宽度?

height=#?

窗口的高度?

menubar=...?

窗口有没有菜单，取值yes或no?

toolbar=...?

窗口有没有工具条，取值yes或no?

location=...?

窗口有没有地址栏，取值yes或no?

directories=...?

窗口有没有连接区，取值yes或no?

scrollbars=...?

窗口有没有滚动条，取值yes或no?

status=...?

窗口有没有状态栏，取值yes或no?

resizable=...?

窗口给不给调整大小，取值yes或no?

fullscreen=?

窗口是否全屏，取值yes或no?

open()?方法有返回值，返回的就是它打开的窗口对象。所以，?

var?newWindow?=?open('','_blank');?

这样把一个新窗口赋值到“newWindow”变量中，以后通过“newWindow”变量就可以控制窗口了。?

close()关闭一个已打开的窗口。?

用法：window.close()?或?self.close()：关闭本窗口；?<窗口对象>.close()：关闭指定的窗口。?如果该窗口有状态栏，调用该方法后浏览器会警告：“网页正在试图关闭窗口，是否关闭？”然后等待用户选择是否；如果没有状态栏，调用该方法将直接关闭窗口。?

blur()?使焦点从窗口移走，窗口变为“非活动窗口”。?focus()?是窗口获得焦点，变为“活动窗口”。?

scrollTo()?用法：[<窗口对象>.]scrollTo(x,?y)；使窗口滚动，使文档从左上角数起的(x,?y)点滚动到窗口的左上角。?

scrollBy()?用法：[<窗口对象>.]scrollBy(deltaX,?deltaY)；使窗口向右滚动?deltaX?像素，向下滚动?deltaY?像素。如果取负值，则向相反的方向滚动。?

resizeTo()?用法：[<窗口对象>.]resizeTo(width,?height)；使窗口调整大小到宽?width?像素，高?height?像素。?

resizeBy()?用法：[<窗口对象>.]resizeBy(deltaWidth,?deltaHeight)；使窗口调整大小，宽增大?deltaWidth?像素，高增大?deltaHeight?像素。如果取负值，则减少。?

alert()?用法：alert(<字符串>)；弹出一个只包含“确定”按钮的对话框，显示<字符串>的内容，整个文档的读取、Script?的运行都会暂停，直到用户按下“确定”。?C

onfirm()?用法：confirm(<字符串>)；弹出一个包含“确定”和“取消”按钮的对话框，显示<字符串>的内容，要求用户做出选择，整个文档的读取、Script?的运行都会暂停。如果用户按下“确定”，则返回?true?值，如果按下“取消”，则返回?false?值。?

prompt()?用法：prompt(<字符串>[,?<初始值>])；弹出一个包含“确认”“取消”和一个文本框的对话框，显示<字符串>的内容，要求用户在文本框输入一些数据，整个文档的读取、Script?的运行都会暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回?null?值。如果指定<初始值>，则文本框里会有默认值。?

setTimeout()和setInterval()的使用?

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。?实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。?不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。?虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：?

showTime();?

function?showTime()?

var?today?=?new?Date();?

alert("The?time?is:?"?+?today.toString());?

setTimeout("showTime()",?5000);?

一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间。如果使用setInterval，则相应的代码如下所示：?

setInterval("showTime()",?5000);?

function?showTime()?

var?today?=?new?Date();?

alert("The?time?is:?"?+?today.toString());?

这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。?如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。?用?setInterval?命令来创建的对象，可以用?clearInterval()?命令来终止。比如：?

var?MyMar=setInterval(showTime(),speed);?

clearInterval(MyMar);?

（4）history?

history?历史对象指浏览器的浏览历史。?

属性?

length?历史的项数。JavaScript?所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。?

方法?

back()?后退，跟按下“后退”键是等效的。?

forward()?前进，跟按下“前进”键是等效的。?

go()?用法：history.go(x)；在历史的范围内去到指定的一个地址。如果?x?<?0，则后退?x?个地址，如果?x?>?0，则前进?x?个地址，如果?x?==?0，则刷新现在打开的网页。history.go(0)?跟?location.reload()?是等效的。?

（5）location?

location?地址对象描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。?

注意?属于不同协议或不同主机的两个地址之间不能互相引用对方的?location?对象，这是出于安全性的需要。例如，当前窗口打开的是“www.a.com”下面的某一页，另外一个窗口（对象名为：bWindow）打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”，就会出错：“没有权限”。这个错误是不能用错误处理程序（Event?Handler，参阅?onerror?事件)来接收处理的。?

属性?

protocol?返回地址的协议，取值为?'http:','https:','file:'?等等。?hostname?返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址，location.hostname?==?'www.microsoft.com'。?port?返回地址的端口号，一般?http?的端口号是?'80'。?host?返回主机名和端口号，如：'www.a.com:8080'。?pathname?返回路径名，如“http://www.a.com/b/c.html”，location.pathname?==?'b/c.html'。?hash?返回“#”以及以后的内容，如“http://www.a.com/b/c.html#chapter4”，location.hash?==?'#chapter4'；如果地址里没有“#”，则返回空字符串。?search?返回“?”以及以后的内容，如“http://www.a.com/b/c.asp?selection=3&jumpto=4”，location.search?==?'?selection=3&jumpto=4'；如果地址里没有“?”，则返回空字符串。?href?返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用“location.href?=?'...'”，也可以直接用“location?=?'...'”来达到此目的。?

方法?

reload()?相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。?replace()?打开一个?URL，并取代历史对象中当前位置的地址。用这个方法打开一个?URL?后，按下浏览器的“后退”键将不能返回到刚才的页面。?

（6）document?

document?文档对象?描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。?用法：document?（当前窗口）?或?<窗口对象>.document?（指定窗口）?

属性?

lastModified?当前文档的最后修改日期，是一个?Date?对象。?referrer?如果当前文档是通过点击连接打开的，则?referrer?返回原来的?URL。?

title?指<head>标记里用<title>...</title>定义的文字。在?Netscape?里本属性不接受赋值。?

fgColor?指<body>标记的?text?属性所表示的文本颜色。?

bgColor?指<body>标记的?bgcolor?属性所表示的背景颜色。?linkColor?指<body>标记的?link?属性所表示的连接颜色。?alinkColor?指<body>标记的?alink?属性所表示的活动连接颜色。?vlinkColor?指<body>标记的?vlink?属性所表示的已访问连接颜色。?

方法?

open()?打开文档以便?JavaScript?能向文档的当前位置（指插入?JavaScript?的位置）写入数据。通常不需要用这个方法，在需要的时候?JavaScript?自动调用。?

write();?writeln()?向文档写入数据，所写入的会当成标准文档?HTML?来处理。writeln()?与?write()?的不同点在于，writeln()?在写入数据以后会加一个换行。这个换行只是在?HTML?中换行，具体情况能不能够是显示出来的文字换行，要看插入?JavaScript?的位置而定。如在<pre>标记中插入，这个换行也会体现在文档中。?

clear()?清空当前文档。?

close()?关闭文档，停止写入数据。如果用了?write[ln]()?或?clear()?方法，就一定要用?close()?方法来保证所做的更改能够显示出来。如果文档还没有完全读取，也就是说，JavaScript?是插在文档中的，那就不必使用该方法。?

现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。?

whatsNew.document.write('<p>00.08.01：增加了“我的最爱”栏目。');?whatsNew.document.write('<p?align="right">'?+?'<a?href="javascript:self.close()">关闭窗口</a>');?whatsNew.document.close();?-->?</script>?

当然也可以先写好一个?HTML?文件，在?open()?方法中直接?load?这个文件。?

（7）anchors[];?links[];?Link?

anchors[];?links[];?Link?连接对象。?

用法：document.anchors[[x]];?document.links[[x]];?<anchorId>;?<linkId>?

document.anchors?是一个数组，包含了文档中所有锚标记（包含?name?属性的<a>标记），按照在文档中的次序，从?0?开始给每个锚标记定义了一个下标。?

document.links?也是一个数组，包含了文档中所有连接标记（包含?href?属性的<a>标记和<map>标记段里的<area>标记），按照在文档中的次序，从?0?开始给每个连接标记定义了一个下标。?如果一个<a>标记既有?name?属性，又有?href?属性，则它既是一个?Anchor?对象，又是一个?Link?对象。?在?IE?中，如果在<a>标记中添加“id="..."”属性，则这个<a>对象被赋予一个标识（ID），调用这个对象的时候只需要使用“<id>”就行了。很多文档部件都可以用这个方法来赋予?ID，但要注意不能有两个?ID?相同。?

anchors?和?links?作为数组，有数组的属性和方法。单个?Anchor?对象没有属性；单个?Link?对象的属性见下。?

属性?

protocol;?hostname;?port;?host;?pathname;?hash;?search;?href?与?location?对象相同。?target?返回/指定连接的目标窗口（字符串），与<a>标记里的?target?属性是一样的。?

更多信息请查看?java进阶网?http://www.javady.com

Java软件工程师从笨鸟到初学者之（三十

热点推荐