JavaScript教程:用JS实现更复杂的交互范例

【 tulaoshi.com - Web开发 】

用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
　
第二个框架
主要作用是实现交互。可以通过JavaScript脚本将所示的云南省和四川省分别改为昆明市和成都市。
Test9_2.htm
HTML
HEAD
/HEAD
Body
Form name="test9_1"
请选择城市：BR
Select name="select1" Multiple
Option云南省
Option四川省
Option贵州省
Option山东省
Option江苏省
Option浙江省
Option安徽省
Option河南省
/selectBR
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
　
第三个框架
主要作用是实现交互。
Test9_3.htm
HTML
HEAD
/HEAD
Body
Form name="test9_2"
请输入用户名：
Input Type="text" name="text1" Value="" Size=20BR
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
　　在浏览器中的结果见图9-2所示。


图 9-2 在浏览器中结果
　
　　本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。