js最基础的东西(不用看)9

用JavaScript实现更复杂的交互
(李晓华 2001年04月29日 01:50)

一、什么是框架
  框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTM L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。
  框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。

图9-1 框架对象


<HTML>
<HEAD>
</HEAD>
<Frameset Rows="20%,80%">
<frame src="test9_1.html">
<Frameset Cols="50%,50%">
<frame src="test9_2.html">
<frame src="test9_3.html">
</Frameset>
</Frameset>
</HTML>

  以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。
  通过[Framset ]告诉浏览器您要设置几个框架;rows这项参数告诉浏览器您想将视窗分割成几列;而 cols这项参数是告诉浏览器您想将视窗分割成几行。
  可以用很多组的 <frameset...> tags 将视窗分割得更复杂。
  可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。     可以用 <src> 告诉浏览器您要载入哪一个 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


<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>河南省
</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>

 
第三个框架
主要作用是实现交互。
Test9_3.htm


<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>

  在浏览器中的结果见图9-2所示。


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

时间: 2024-10-09 07:23:41

js最基础的东西(不用看)9的相关文章

js最基础的东西(不用看)7

JavaScript窗口及输入输出 JavaScript是基于对象的脚本编程语言,那么它的输入输出就是通过对象来完成的.其中有关输入可通过窗口(Window)对象来完成,而输出可通过文档(document)对象的方法来实现. 一.窗口及输入输出请看下面例子: <HTML><Head><script languaga="JavaScript">Var test=window.prompt("请输入数据:");document.wri

js最基础的东西(不用看)6

JavaScript对象系统的使用 使用浏览器的内部对象系统, 可实现与HTML文档进行交互.它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动,提高设计Web页面的能力. 一.浏览器对象层次及其主要作用 除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对象以及历史(History)和位置(Location)对象. 浏览器对象(Navigator) 提供有关浏览器的信息 窗口对象(Windows) Window对象处于

js最基础的东西(不用看)8

用JavaScript脚本实现Web页面信息交互(李晓华 2001年04月29日 01:50) 要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识. 一.窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为. 1.什么是窗体对象窗体(Form):它构成了Web页面的基本元素.通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问. <form

js最基础的东西(不用看)5

在JavaScript中创建新对象 使用JavaScript可以创建自己的对象.虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法.使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作. 在JavaScript中创建一个新的对象是十分简单的.首先它必须定义一个对象,而后再为该对象创建一个实例.这个实例就是一个新对象,它具有对象定义中的基本特征. 一.对象的定义JavaScript对象的定义,其基本格式如下:Func

JS零基础一步一步做应用全记录

1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握的很好.但好像我们吃得多的是美团,回来之后,百度“谁去拿外卖网页版”,没有结果.想着反正这东西看上去不会太难,那就自己做一个吧.在学校各种事情没时间,放假回家后时间便相当充足.于是,作为一个HTML半入门+JS零基础的孩子,就这样开始了,现在是2015.2.10 10:17. 2.功能设计 对其要求

Node.js系列基础学习----安装,实现Hello World, REPL

Node.js基础学习 1:简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好 2:安装 à安装node.js 在官网安装自己win版本的node.js的版本,下载,安装完毕后在运行中输入node -v若是出现版本号就证明安装成功. à安装n

一些基础的东西总结一下

1.string类型转Date类型 SimpleFormatDate sdf = new SimpleFormatDate("yyyy-MM-dd"); Date date = sdf.parse(dateString); 2.disabled 和 readonly的区别 当表单提交的时候,使用了disabled的表单元素的值是不会被提交的,而readonly的则可以 3.处于$(function(){})里面的js函数外部js是调用不到的 4.ctrl + shift + P 快速定

回归基础的东西,不能只是“感觉会了”

很多时候,觉得自己掌握的东西还是很少,做事情的效率还不是很高,希望自己能够成长起来,认认真真做事. -------------------------------------------------------------------------------------------------------------------------------------------- Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是

JS面试基础

问题: 1.JS中typeof能够得到哪些类型? 考点:JS 的变量类型 2.何时用 双等于 == ?何时用 三等 ===? 考点:强制类型转换 3.window.onload 与 DOMContentLoaded的区别. 4.用JS创建10个<a>标签 ,点击的时候弹出来对应的序号 . 考点:作用域 5.简述如何实现一个模块加载器,实现类似require.js的基础功能. 考点:JS的模块化 6.实现数组的随机排序 考点:JS的基础算法. 1.变量分为值类型和引用类型. var a = 10