JavaScript (基本教程)(6)

时间：2013-04-25 10:39 来源：网络整理作者：采集侠收藏

document.forms[0].elements[3] // 第一个表单 form 中的第三个 input 元素 document.forms["order"].elements["address"] // 指向名为 order 的表单中名为 address 的对象 document.order.address // 指向名为 ord

document.forms[0].elements[3]
// 第一个表单 form 中的第三个 input 元素
document.forms["order"].elements["address"]
// 指向名为 order 的表单中名为 address 的对象
document.order.address
// 指向名为 order 的表单中名为 address 的对象，和上一行代码是一样的

通常我们使用表单对象来检查用户的输入是否正确或者用户提交的数据是否正确，这种检查是在表单数据被提交到服务器之前进行的，这样做可以节省用户填表的时间，保证用户只提交一次表单。请看，此例中演示了如何使用 form 和 form 里边的其它对象来检查用户输入的。

此例中一些需要注意的地方：

我们在 <form> 标记中使用了 onSubmit 事件，此事件在用户按下“提交”按钮的时候，调用函数 checkForm() 来检查用户输入；

在函数 checkForm() 中，无论表单中的哪一项没有填写，都会弹出一个带有错误信息的消息框，并使用 focus() 方法将鼠标的焦点放在相应的输入框 (input) 中；

如果表单中有项目没有填写，checkForm() 函数会返回 false 值，而 onSubmit() 函数在获得 false 值之后，不执行提交表单内容的动作。如果返回致使 true，onSubmit() 则会执行提交的动作。

创建新的 window (窗口) 对象

你有时需要打开一个新的浏览器窗口，用来显示信息或广告，但是在这里我要提醒你一下，大部分人在浏览一个网站的时候，是不会注意弹处的新窗口里边写些什么，他们会很快地关掉窗口，只有少数的人会留意这些弹出的窗口。然而，这项技术还是很不错的。

【弹出窗口的小测试】

在这个中，我们给出一个小测试问题的列表，对应于每一个问题都一个显示答案的超链接，而这些超链接将会弹出一个小窗口来显示答案，看一看代码就清楚了。

实际上，每一个答案的超链接都调用了同一个函数 showAnswer()，通过传递的参数 url (此参数是答案所在的页面的地址 URL) 的不同，在弹出的小窗口中显示不同的页面；在这个函数中使用了 window.open() 方法来创建新的窗口：

function showAnswer(url) {
window.open(url, "answer", "height=100,width=100,directories=no," +
"location=no,menubar=no," +
"resizeable=no,status=no,toolbar=no");
return false;
} open() 方法有三个参数：打开窗口中的页面地址 URL (包括路径和文件名)，给新窗口取的一个英文名字，打开的窗口的一些属性设置 (如窗口的高度、宽度、是否显示滚动条、是否显示浏览器的菜单栏等等)。

新窗口的名字在某些时候可能会用到，在别的窗口中使用 TARGET="新窗口的名字" 使超链接所链接的页面在新窗口中显示，描述窗口特性的参数是一个包含关键字和关键字值的字符串，各个关键字之间使用英文逗号 (,) 隔开，使用这个参数的时候一定要小心，各个关键字、关键字值、逗号之间千万不要有空格。

注意：此例中的 “+” 好只是为了代码能够换行书写才加上的，其实它们只是连结字符串而已，没有别的，不使用 “+” 好一样是可以的。

窗口特性 (即是打开的浏览器的样子) 的关键字、关键字值可以参考下表：

是否显示工具栏：toolbar[=yes|no]|[=1|0]

是否显示地址栏：location[=yes|no]|[=1|0]

是否显示前进、后退、刷新按钮：directories[=yes|no]|[=1|0]

是否显示状态栏：status[=yes|no]|[=1|0]

是否显示菜单栏：menubar[=yes|no]|[=1|0]

是否显示滚动条：scrollbars[=yes|no]|[=1|0]

用户是否可以改变窗口的大小：resizable[=yes|no]|[=1|0]

是否在新窗口中保留浏览器的浏览历史纪录：copyhistory[=yes|no]|[=1|0]

窗口的宽度 (单位为像素)：width=pixels

窗口的高度 (单位为像素)：height=pixels

如果在字符串中给定了这些值的话，窗口就会按你定义的现实，否则将会使用默认的值，想要进一步了解这方面的信息请参考 Netscape's JavaScript Guide ！

【给窗口指定页面】

当你使用上面的方法创建了一个新窗口之后，你还可以再次给这个窗口指定新的页面，这就要用到 open() 方法的返回值了，请看下边的代码：

myWin = window.open(url, "", "height=100,width=100");
...
myWin.location = "newpage.html"; 上边的代码将打开的新窗口的页面重新指定为 newpage.html，这样窗口中就会显示页面 newpage.html了。同时，在打开的新窗口中，你也可以通过使用 window 对象的 opener 属性将窗口对象指向打开此窗口的母窗口，这样也就可以对母窗口的数据或函数进行操作了，例如下边的代码中就是将母窗口的页面重新指定为 newpage.html：

window.opener.location = "newpage.html";

【关闭一个窗口】

再让我们看一下前边的中我们所打开的新窗口，你会窗口中没有菜单栏，那我们该如何将此窗口关掉呢？不用担心，我们可以使用 window 对象的 close() 方法来关闭打开的小窗口，那个 “关闭窗口！” 按钮中就是使用了此方法：

<form>
<input type=submit value="关闭此窗口">
</form> 当你按下按钮后，就会触发 onClick 事件，从而调用 window 对象的 close() 方法，此方法将当前的窗口关闭掉。

处理 frame [帧] 对象

正如我们在前边的章节中提到的那样，frame 帧其实是单独的窗口，它对应于单独的窗口对象，有自己的 location、history 和 document 属性。

在这个中你将会看到一系列的帧，代码如下：

</html>