用JavaScript实现更复杂的交互(李晓华 2001年04月29日 01:50) 一、什么是框架 框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTM L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。 框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。 图9-1 框架对象 以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。 通过[Framset ]告诉浏览器您要设置几个框架;rows这项参数告诉浏览器您想将视窗分割成几列;而 cols这项参数是告诉浏览器您想将视窗分割成几行。 可以用很多组的 tags 将视窗分割得更复杂。 可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。 可以用 告诉浏览器您要载入哪一个 HTML文件。 二、如何访问框架 在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。Frames属性同样也是一个数组,他在 父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问: parent.frames[Index1].docuement.forms[index2] 通过parent.frames.length确定窗口中窗体的数目。 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访: parent.framesName.decument.formNames.elementName.(m/p) 三、范例 下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。 tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体; test9-1.html为显示标题文档; test9_2.html为第二框架文档其中需要注意的是: 通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”; test7_3.html为第三框架文档。 主调文档主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。 Test9.htm 第一个框架主要作用是显示标题文档。 Test9_1.htm
使用框架实现WEB交互
第二个框架主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。 Test9_2.htm
请选择城市:
云南省
四川省
贵州省
山东省
江苏省
浙江省
安徽省
河南省
<script><!--mce:0--></script>
第三个框架主要作用是实现交互。 Test9_3.htm
请输入用户名:
请选择: 全部信息
部分信息
所有城市
<script><!--
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>
在浏览器中的结果见图9-2所示。 图 9-2 在浏览器中结果 本讲介绍框架中的基本元素的主要功能和使用,利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互,这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。 转自:[url]http://dev.csdn.net/article/83/83806.shtm[/url]
欢迎查看本人博客:www.java.hourb.com
分享到:
相关推荐
资源名称:Javascript完全学习手册内容简介:本书分4篇14章,介绍Javascript的知识,全书内容包括:Javascript语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
JavaScript学习指南PDF,不可用于商业用途,如有版权问题,请联系删除!
头歌教学实践平台 Web前端开发基础 JavaScript学习手册九:字符串。源码txt格式。
希望这套JavaScript-ppt及试题能给学习JavaScript的朋友提供一些帮助
Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手
掌握基本的JavaScript程序设计技术 掌握基于对象和事件驱动的编程技术 掌握级联样式表(CSS)技术 掌握JavaScript的动态网页制作技术 二、学习内容 第一章 JAVASCRIPT 简介 第二章 HTML...
此JavaScript权威指南(第6版)(中文版)pdf共分四大部分,一共22个章节,非常适合入门学习。内容相当丰富,欢迎下载; 第一部分为:javascript语言核心;第二部分为:客户端Javascript;第三部分为:javaScript核心参考;第四...
Java相关课程系列笔记之八JavaScript学习笔记 Java相关课程系列笔记之九Servlet学习笔记 Java相关课程系列笔记之十JSP学习笔记 Java相关课程系列笔记之十一Ajax学习笔记 Java相关课程系列笔记之十二jQuery学习笔记 ...
原创JavaScript入门教程,不用先学语法的学习方式,系列教程之六至九章! 06 辨析表达式的结果 07 九九乘法表的显示 08 状态栏的控制 09 网页浮动广告的制作
网页设计与制作(HTML+CSS+JS)-3期(KC003) 网页设计与制作html5+css3+JavaScript第九章--习题.docx 学习资料 复习资料 教学资源
九、将javascript和java连接起来 24 1、在javascript中调用java中的方法: 24 2、从javascript向java传递参数:通过set()方法传递参数 24 3、从java中获取返回值:通过get()方法 24 4、直接在javascript中使用java...
javascript学习笔记之js对象 设计模式介绍,需要的朋友可以参考下
在javascript学习笔记(八)中,我们主要学习了在使用javascript面向对象编程时,如何创建对象及添加对象的属性和方法。
javascript学习笔记之节点的操作实现代码,包括节点的创建、添加、移除、替换、复制
JavaScript 入门,不用先学语法的学习方式,系列教程之九,原创!
两者实现的功能是完全一样的,只是参数传递方式不一样,call是将各个参数以逗号(,)隔开,而apply是将所有参数组成一个数组进行传递。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要...感兴趣的朋友不妨学习一下哦
什么是this,this就是这个,其实在javascript中this挺迷惑人的,谁知道特么this到哪一个了,那么,上代码 var a=1; var b={ a:0, c:(function(){ this.a=2; a=7; console.log("this.a"+this.a); ...