用JavaScript实现更复杂的交互范例.
三、范例
下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。
tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；
test9-1.html为显示标题文档；
test9_2.html为第二框架文档其中需要注意的是:
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；
test7_3.html为第三框架文档。
主调文档
主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。
Test9.htm
| <HTML> <HEAD> </HEAD> <Frameset Rows="10%,90%"> <frame src="test9_1.htm"> <Frameset Cols="40%,60%"> <frame src="test9_2.htm"> <frame src="test9_3.htm"> </Frameset> </Frameset> </HTML> 第一个框架 主要作用是显示标题文档。 Test9_1.htm <HTML> <HEAD> </HEAD> <H2>使用框架实现WEB交互</H2> </HTML> |
| <HTML> <HEAD> </HEAD> <Body> <Form name="test9_1"> 请选择城市：<BR> <Select name="select1" Multiple> <Option>云南省 <Option>四川省 <Option>贵州省 <Option>山东省 <Option>江苏省 <Option>浙江省 <Option>安徽省 <Option>河南省 </select><BR> <HR> <Input Type="Submit" name="" value="提交"> <Input Type="reset" name="" value="复位"> </Form> <pre> <script language="JavaScript"> document.test9_1.elements[0].options[0].text="昆明市"; document.test9_1.elements[0].options[1].text="成都市"; </script> </pre> </Body> </HTML> |
| <HTML> <HEAD> </HEAD> <Body> <Form name="test9_2"> 请输入用户名： <Input Type="text" name="text1" Value="" Size=20><BR> <HR> 请选择: <Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR> <Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR> <Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br> <HR> <Input Type="Submit" name="" value="提交"> <Input Type="reset" name="" value="复位"> <BR> </Form> <script language="JavaScript"> document.test9_2.elements[0].value="劳动和社会保障"; document.test9_2.elements[1].checked=true; document.test9_2.elements[2].checked=true; document.test9_2.elements[3].checked=false; </script> </Body> </HTML> |