1、JavaScript的层次结构
document对象的下一层，即它的子节点是其它对象的集合。
(1)anchors(锚点)对象
(2)images(图片)对象
(3)forms(表单)对象
(4)links(链接)对象
语法：
要表示一个对象，可以从window对象(parent)开始，加一个点符号，加上层次结构中排列的下一个对象，在加上一个点符号，依次类推，直至找到我们想要表示的对象。例如，window.location或window.document.forms[0].在表示window对象的子节点时，可以省略window，因为JavaScript知道window是曾次树的顶层。Window.document.bgcolor就可以简写为document.bgcolor.
①document对象
每个窗口或框架包含一个document对象，该对象与窗口中显示的HTML文档对应。该对象主要对应文档的body部分，也就是<body></body>标签之间的部分。
（1）文档属性
<body>
<scripttype="text/javascript">
varprops=new Array();
for(varproperty in window.document){
props.push(property);
}
for(i=0;i<props.length;i++){
document.write(property[i]+"");
if(i>0&&i%4==0){
document.write("<br/>")
}
}
</script>
</body>
（2）在JavaScript中使用document对象的属性
<bodybgcolor="silver" text="forestgreen" link="blue"vlink="purple">
<fontface="arial" size="+2">
<scripttype="text/javascript">
varbeg_tag="<em>",end_tag="</em><br/>";
document.write("The location ofducument:"+beg_tag+document.location+end_tag);
document.write("The document's title:"+beg_tag+document.title+end_tag);
document.write("The background color:"+beg_tag+document.backgroundColor+end_tag);
document.write("Thelink color:"+beg_tag+document.links.color+end_tag);
document.write("Thetext color is:"+beg_tag+document.fgcolor+end_tag);
document.write("Thedocument was last modified:"+beg_tag+document.lastModified+end_tag);
</script>
</font>
</body>
（3）document对象的方法
document对象具有一系列方法用于控制对象的行为。与属性相同，方法也是用点语法来定义其操作对象的。具体的document方法：
1）clear() 清空当前文档的所有内容
2）close() 关闭文档的输入流
3）focus() 将焦点交给文档
4）getElementById() 返回具有指定ID的第一个对象的引用
5）getElementByName() 返回具有指定名字的对象集合
6）getElementByTagName() 返回具有指定标签名的对象集合
7）open() 打开一份新文档，并擦除旧文档的内容
8）write() 向当前文档追加写入文本
9）writeln() 与write()相同，但如果在<pre>标签中使用该方法，会追加一个换行
2、JavaScript与form对象
（1）为表单及其输入类型(控件)命名
①name属性
②id属性
JavaScript使用唯一的id属性及其相关的document.getElementById()方法唯一标识文档中所有的XML/HTML元素节点，也包括表单控件。如果表单数据不准备发送到服务器去做处理，那么name属性便可省略。因为表单控件可以使用name或唯一的ID标识，所以在创建表单字段时，通常两者都会使用，且可以的话会赋给它们相同的值。
（2）表单中的传统DOM
①elements[]数组
HTML表单包含诸如按钮和文本框等输入设备，这些输入设备也叫做字段。类似的，JavaScript的form对象也包含一个叫做elements的属性。这是一个与HTML的表单字段相对应的JavaScript数组。Elements[]数组中的每个输入类型本身也是一个对象。
（3）使用JavaScript提交表单
表单中有两个事件处理函数，使用这两个事件处理函数可以在表单被提交到服务器之前对它进行处理。它们是onClick事件处理函数和onSubmit事件处理函数。而onReset事件可以用来清除表单的输入设备或终止清除操作。
①onClick事件处理函数
不论是接收提交还是拒绝提交，都可以使用onClick事件处理函数。onClick事件处理函数是HTML submit或button输入类型的一个属性。当用户单击按钮时就会触发该事件，如果处理函数返回true，则表单将被提交；否则，提交操作将被拒绝。
②onSubmit事件处理函数
onSubmit是另一种重要的表单事件处理函数，该事件处理函数也将在用户单击提交按钮或回车键，而表单尚未提交前被触发。onSubmit事件处理函数是<form>标签的一个属性，它用来控制用户单击提交按钮后的处理。把一个函数赋给onSubmit事件处理函数后，如果函数返回值为ture，将会把表单提交到服务器，但如果它的返回值为false，将会停止表单提交操作且要求用户重新输入表单数据。
③onReset事件处理函数
用户可以使用HTML重置(reset)按钮清除表单字段并将其返回到默认值。JavaScript中可以设置onReset事件处理函数来接受或拒绝重置操作。该事件处理函数可以在清除整个表单前让用户进行确认，尤其是在已经输入大量信息且不想重新输入所有数据的情况下。
该事件处理函数是<form>标签的一个属性。
（4）this关键字
将this关键字作为当前对象的引用来使用。对于包含有复选框、单选按钮和文本框等多个对象的表单来说，在调用函数时，使用this关键字来表示它要比使用全名更为简便。
在使用事件处理函数时，常使用this关键字来表示触发事件的对象。如果该事件由<form>标签触发，则this表示当前表单，但是如果该事件是由表单中的某个元素触发的，例如由一个输入设备触发，那么它则表示这个元素。
（5）在弹出窗口显示表单的内容
填完表单后，可以创建另一个窗口，并将表单数据动态的显示到该窗口中。这个新打开的窗口被称作为弹出窗口。
function showForm(myform){
newWin=window.open('','','width=300,height=200');
……
newWin.document.write(……);
……….
}
function close_window(){
newWin.window.close();
………
………
}
<body>
<a href="JavaScript:void(0)"onClick="close_window()">Click here to close littlewindow</a>
//JavaScript的void(0)运算符将链接变为非激活状态，所以在单击链接后程序不会尝试跳转到一个URL，而是触发事件函数close_window()同时关闭显示表单数据的小窗口。
</body>
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>Loopingthrough Object Properties</title>
<scripttype="text/javascript" >
functionschedule(f){
if(f.menu1.selectedIndex==0){
f.text.value="PL100,Feb3-7,9am to 5pm,Room 2133,Dr.Baloney";
}
if(f.menu1.selectedIndex==1){
f.text.value="一般傻逼都穿得酷酷滴！！！";
}
if(f.menu1.selectedIndex==2){
f.text.value="开始了！！！";
}
if(f.menu1.selectedIndex==3){
f.text.value="HelloWorld!!!";
}
}
</script>
</head>
<bodybgcolor="lightgreen">
<fontface="arial">
<formname="form1">Select a Course<br/>
<selectname="menu1" size="4"onChange="schedule(this.form)">
<optionname="option1" value="Perl1">Intro toPerl</option>
<optionname="option2" value="Perl2">AdvancedPerl</option>
<optionname="option3" value="Unix">Intro to Unix</option>
<optionname="option4" value="Windows">HelloWindows</option>
</select>
<br/>
<br/>
<inputtype="text" name="text"size="60"></form>
</font>
</body>
</html>
3、简单的表单验证
（1）空白字段检查
<!doctypehtml>
<html>
<head>
<title>An Htmlform and the onSubmit Event handler</title>
<scripttype="text/javascript">
functioncheckform(form){
if(form.namestring.value==""||form.namestring.value==null){
alert("Please Type your name！！！");
return(false);
}else{
return(true);
}
}
</script>
</head>
<bodybgcolor="yellow">
<b>
<formname="info" action="导员或教师页面.html" method="post"onSubmit="return checkform(this)">
<big>
<p>
Type your name here:
<input type="text"name="namestring" size="50">
</p>
<inputtype="submit" value="Submit">
<inputtype="reset" value="Reset">
</big>
</form>
</b>
</body>
（2）检查字母字符
<title>AnHtml form and the onSubmit Event handler</title>
<scripttype="text/javascript">
functionvalidate(form){
if(alpha(form.firstname)==false){
alert("firstname is invalid");
returnfalse;
}
if(alpha(form.lastname)==false){
alert("lastname is invalid");
returnfalse;
}
returntrue;
}
functionalpha(textfild){
if(textfild.value.length!=0){
for(vari=0;i<textfild.value.length;i++){
varch=textfild.value.charAt(i);
if((ch<"A"||ch>"Z")&&(ch<"a"||ch>"z")){
returnfalse;
}
}
}else{
returntrue;
}
}
</script>
</head>
<bodybgcolor="yellow">
<fontface="verdana">
<strong>
<formname="alphachk" onSubmit="return validate(this);" method="post"action="form.html">
Enteryour first name:
<br/>
<inputtype="text" name="fistname" size="60">
<p>
Typeyour last name here:<br/>
<input type="text"name="lastname" size="60">
</p>
<inputtype="submit" value="Submit">
<inputtype="reset" value="Reset">
</form>
</strong>
</font>
</body>
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
