JavaScript (基本教程)(8)

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

此例中，当页面滚动到一定的值 (此例中为 750 像素) 的时候，又将页面重新设置成最初的样子 (即坐标值为：(0,0))，这样看起来就是不停的滚动了。可惜的是，并不是所有的浏览器都提供实际的页面高和宽的像素值，所以

此例中，当页面滚动到一定的值 (此例中为 750 像素) 的时候，又将页面重新设置成最初的样子 (即坐标值为：(0,0))，这样看起来就是不停的滚动了。可惜的是，并不是所有的浏览器都提供实际的页面高和宽的像素值，所以你要亲自实践一下看看这些值要多大才合适。

你还可以重新书写一个页面中的内容，这就要用到 document 对象的 write() (此方法输出的时候不换行) 和 writeln() (此方法输出完成后自动换行)方法了。这两个方法需要一个字符串参数，这个参数就是要在页面中输出的字符串，可以在字符串中带上HTML代码，那样输出的结果就和其它网页是一样的了，看看这个，查看一下源代码就知道了。这个例子中是上边的帧通过 writeln() 方法向下边的帧输出内容。

在此例中，你可以试一试输入一些 HTML 代码，看看有什么效果！比如说输入下边的代码：

在函数 rewriteFrame() 中，有如下语句：

window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

第一条语句是将表单 (form) 的 text 中输入的内容写到下边的帧中，第二行代码是调用 document.close() 的方法告诉浏览器向页面写的操作已经结束。如果你想要是你的输入覆盖掉以前的，那就要使用 document 对象的 close() 方法。

【一个小小的改进】

你可能会注意到上边的例子中，当你点击浏览器的后退按钮的时候，你会看到你的每一次 “提交” 动作都产生了一个新的页面，他们都留在了历史记录中，所以像前边说的一样，你要按很多此 “后退” 才能会回到最初的页面，如果你想除掉这种情况，可以使用 document 对象的 open() 方法，只要在 rewriteFrame() 中加一条语句即可：

window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

open() 方法的第一个参数值 "text/html" 是用来告诉浏览器准备接受 HTML 数据，而第二个参数值 "replace" 告诉浏览器不要将新写入的页面加入到浏览器的历史记录列表中，和 location.replace(URL) 是很相似的，功能是一样的，请看改进后的。

使用 form [表单]对象

在前边的例子中，我们已经接触到很多余表单 form 对象的元素相关 JavaScript 代码，比如按钮、文本输入框等等。form 的元素是为了网页的交互性而设计的，你可以通过 form 获得用户提交的信息，在这章中我们将讨论 form 的元素。

【form 对象】

在我们使用单独的表单 form 对象之前，首先要引用 form 对象。正如我们在第二部分所讲的那样，form 对象由网页中的 <FORM></FORM> 标记对创建，相似的，form 里边的元素也是由 <INPUT> 等标记创建的，他们被存放在数组 elements 中。

在前边我们已经讲过了如何使用 elements 数组了。例如，在一个页面中有两个 form 对象：

<form action="/cgi-bin/customer.cgi" method="post">
Name: <input type="text"><br>
Address: <input type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

<form action="/cgi-bin/order.cgi" method="post">
Item Number: <input type="text"><br>
Quantity: <input type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

</body>
</html>

要使用名为 'quantity' 的元素，可以使用下边三种方法中的任何一种：

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity; 每一种元素类型 (type) 多对应每一种不同的对象，这些对象有一些共同的属性和方法，如：value 属性和 focus() 方法，此外，它们还有自己独特的属性和方法，下边我们将会按顺序对每一种元素类型进行讲解。

你可以通过元素的 type 属性知道元素是什么类型，在上边的例子中，我们可以使用下边的代码来获得名为 'quantity' 的元素的类型：

document.orderdata.quantity.type

结果将会返回 'text'。

【处理一个表单 form】

通常一个 <FORM> 标记中含有 ACTION="...." 的语句，这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径，即整个URL)，在的一部分中，我们曾经使用过 onSubmit 事件来判断用户的输入是否正确，如果正确就将这些信息提交到服务器进行处理，而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION="..." 来指定的。

如果你想要通过 form 的元素来获得用户的输入，而不在服务器上处理，那就不要在 <FORM> 标记中加入 ACTION="...." 和 METHOD="...."，就像我们在在线示例中使用的“查看源代码！”的按钮，这个按钮就是在客户端而不是服务器端运行了一些代码来查看源文件。

form 对象各元素类型

【button 按钮对象】

按钮有三种类型，一般的按钮 (button)，“提交” (submit) 按钮和 “重置” (reset) 按钮，它们有共同的属性和方法，也有各自不同的属性和方法。这三种按钮可以在 <INPUT> 标记中通过 TYPE="...." 来创建，例如：

<input type="submit" value="Submit">
<input type="reset" value="Clear">
<input type="button" value="Cancel"> 它们三个的不同之处在于，submit 提交按钮有个默认动作是点击此类按钮以后自动提交表单的内容；reset 重置按钮的默认动作是点击此类按钮以后自动将表单的内容恢复到最初的状态；而对于一般的 button 按钮来说，则没有默认动作，需要通过使用 onClick 事件句柄，在此事件触发时调用函数才行。

你也可以通过使用 onClick 事件句柄来改变 submit 和 reset 按钮的默认动作。这个中就使用了这三种不同的按钮来完成计算功能。

技巧1：在此例中我们使用了 JavaScript 的内建函数 parseInt()，此函数将文本框里的字符串对象转换成数值对象。否则字符 "2" 和字符 "2" 进行 "+" 运算的结果是 "22"，而不是 4。

技巧2：reset 按钮有默认动作，那就是将表单中所有的内容恢复到最初的状态，如果想改变其默认动作，可以像这个那样。

【text (文本框)、password (密码输入框)、hidden (隐藏域) 和 textarea (多行文本框) 对象】