用JavaScript脚本实现Web页面信息交互

用JavaScript脚本实现Web页面信息交互（李晓华2001年04月29日01:50）要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。一、窗体基础知识窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。１、什么是窗体对象窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。formName=Form1INPUTtype=text...Inputtype=text...Inpupbyne=text.../formformName=Form2INPUTtype=text...Inputtype=text.../form在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：FormName=表的名称Target=指定信息的提交窗口action=接收窗体程序对应的URLMethod=信息数据传送方式(get/post)enctype=窗体编码方式[onsubmit=JavaScript代码]/Form２、窗体对象的方法窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：document.mytest.submit()３、窗体对象的属性窗体对象中的属性主要包括以下：elementsnameactiontargetencodingmethod.除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：elements[0].Mytable.elements[1]４、访问窗体对象在JavaScript中访问窗体对象可由两种方法实现：（１）通过访问窗体在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。（２）通过数组来访问窗体除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：document.forms[0]document.forms[1]document.forms[2]...５、引用窗体的先决条件在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。二、窗体中的基本元素窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：１、Text单行单列输入元素功能：对Text标识中的元素实施有效的控制。基本属性：Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值基本方法：blur()：将当前焦点移到后台。select()：加亮文字。主要事件：onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：...Formname=testinputtype=textname=testvalue=thisisajavascript/form...scriptlanguage=Javascirptdocument.mytest.value=thatisaJavascript;document.mytest.select();document.mytest.blur();/script２、textarea多行多列输入元素功能：实施对Textarea中的元素进行控制。基本属性name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Defaultvalue：元素的默认值。方法：blur()：将输入焦点失去select()：将文字加亮后事件：onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件３、Select选择元素功能：实施对滚动选择元素的控制。属性：name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的lengthoptions:组成多个选项的数组selectIndex;该下标指明一个选项select在中每一选项都含有以下属性：Text:选项对应的文字selected:指明当前选项是否被选中Index:指明当前选项的位置defaultselected:默认选项事件：OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。４、Button按钮功能：实施对Button按钮的控制。属性：Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：click()该方法类似于一个按下的按钮。事件：onclick当单击button按钮时，产生该事件。例：Formname=testinputtype=buttonname=testcallonclick=tmyest()/form...scriptlanguage=javascirptdocument.elements[0].value=mytest;//通过元素访问或document.testcallvalue=mytest;//通过名字访问/script.....５、checkbox检查框功能：实施对一个具有复选框中元素的控制。属性：name:设定提交信息时的信息名称。Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态方法：click()该方法使得框的某一个项被选中。事件：onclick:当框的选被选中时，产生该事件。６、radio无线按钮功能：实施对一个具单选功能的无线按钮控制。属性：name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。length:单选按钮中的按钮数目。defalechecked:默认按钮。checked:指明选中还是没有选中。index:选中的按钮的位置。方法：chick():选定一个按钮。事件：onclick:单击按钮时，产生该事件。７、hidden:隐藏功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。属性：name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。defaleitvalue:默认值８、Password口令功能：实施对具有口令输入的元素的控制。属性：Name:设定提交信息时的信息名称，对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。defaultvalu:默认值方法select():加亮输入口令域。blur():使这丢失passward输入焦点。focus():获得password输入焦点。９、submit提交元素功能：实施对一个具有提交功能按钮的控制。属性：name:设定提交信息时的信息名称，对应HTML文档中submit。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。方法click()相当于按下submit按钮。事件：onclick()当按下该按钮时，产生该事件。三、范例下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。test8_1.htmhtmlheadScriptLanguage=JavaScript//原来的颜色document.bgColor=blue;document.vlinkColor=white;document.linkColor=yellow;document.alinkcolor=red;//动态改变颜色functionchangecolor(){document.bgColor=red;document.vlinkColor=blue;document.linkColor=green;document.alinkcolor=blue;}/script/HEADbodybgColor=WhiteAhref=test8_2.htm调用动态按钮文档/aformInputtype=buttonValue=redonClick=changecolor()/form/BODY/HTML输出结果见图1所示。图1动态按钮程序。test8_2.htmHTMLHEAD/HEADpalign=center/pdivalign=centercentertableborder=0cellspacing=0cellpadding=0trtdwidth=100%formname=form2onSubmit=nullpinputtype=submitname=bannerVALUE=SubmitonClick=alert('Youhavetoputan\'action=[url]\'ontheformtag!!')brscriptlanguage=JavaScriptvarid,pause=0,position=0;functionbanner(){//variablesdeclarationvari,k,msg=这里输入你要的内容;//increasemsgk=(30/msg.length)+1;for(i=0;i=k;i++)msg+=+msg;//showittothewindowdocument.form2.banner.value=msg.substring(position,position-30);//setnewpositionif(position++==msg.length)position=0;//repeatatenteredspeedid=setTimeout(banner(),60);}//end--banner();/script/p/form/td/tr/table/center/divp/pBODYAhref=test8_1.htm返回/a/BODY/HTML输出结果见图2所示