?? javascript9.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>網頁教程－JavaScript技術講座:第九講 實現更復雜的交互</title>
</head>
<body>
<p><span class="text">您現在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主頁</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">網絡教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主頁工廠</a>－JavaScript技術講座:第九講
實現更復雜的交互</span></p>
<p align="center"><small><a href="JavaScript8.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript8.htm">上一頁</a>
下一頁</small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技術講座<br>
第九講 實現更復雜的交互</span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="left"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"><b>一、什么是框架</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 框架Frames最主要功用是"分割"視窗，使每個"小視窗"能顯示不同的HTM
L文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設您開了兩個frames，第一個frame可顯示書的目錄，第二個frame則顯示章節的具體內容。<br>
框架可以將屏幕分割成不同的區域，每個區域有自己的URL，通過Frames[]數組對象來實現不同框架的訪問。實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。下面我們先看一下框架的例子。見圖9-1所示。</font></span></p>
<p><img src="javascript/Image28.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Image28.gif" width="398" height="264"
alt="Image28.gif (13788 字節)"><dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>圖9-1
框架對象</b></font></span></p>
</dir>
</dir>
</dir>
</dir>
<pre><span style="color: rgb(125,125,125)" class="text"><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></span></pre>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 以上HTML標識將屏幕分成三個框架。先將窗口分成以二行為單位的窗口，之后再按分成二個窗口。并在相應的框架中放入自己的HTML文檔。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 通過[Framset
]告訴瀏覽器您要設置幾個框架；rows這項參數告訴瀏覽器您想將視窗分割成幾列；而
cols這項參數是告訴瀏覽器您想將視窗分割成幾 行。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 可以用很多組的
<frameset...> tags 將視窗分割得更復雜。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 可以給每個frame一個"名字"
(name)。frame的名字在JavaScript語法中的地位非常重要。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 可以用
<src> 告訴瀏覽器您要載入哪一個 HTML文件。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>二、如何訪問框架</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在前面我們介紹過使用document.forms[]實現單一窗體中不同元素的訪問。而要實現框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個數組，他在父框架集中為每一個子框架設有一項。通過下標實現不同框架的訪問:</font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">parent.frames[Index1].docuement.forms[index2]</font></span></p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">通過parent.frames.length確定窗口中窗體的數目。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">除了使用數組下標來訪問窗體外還可以使用框架名和窗體名來實現各元素的訪：</font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>parent.framesName.decument.formNames.elementName.(m/p)</b></font></span></p>
</dir>
</dir>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>三、范例</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 下面我們通過一個具體的實例,
來說明利用JavaScript腳本在WEB中實現更為復雜的信息交互。該例子是在一個多窗口中實現窗體信息的動態交互,在程序中首先在瀏覽器窗口中制作三個用于窗體交互的窗口,每個窗體窗口實現不同信息的動態交互。</font></span><dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">tset9.html為主調用文檔它首先將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體；</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">test9-1.html為顯示標題文檔；<br>
test9_2.html為第二框架文檔其中需要注意的是:<br>
通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；<br>
test7_3.html為第三框架文檔。</font></span></p>
<p> </p>
</dir>
<ol>
<li><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>主調文檔</b></font>
</span><p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>Test9.htm</b></font></span></p>
<pre><span style="color: rgb(125,125,125)" class="text"><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></span></pre>
</li>
<li><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>第一個框架</b></font>
</span><p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">主要作用是顯示標題文檔。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b><i><u>Test9_1.htm</u></i></b></font></span></p>
<pre><span style="color: rgb(125,125,125)" class="text"><HTML>
<HEAD>
</HEAD>
<H2>使用框架實現WEB交互</H2>
</HTML>
</span></pre>
</li>
<li><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>第二個框架</b></font>
</span><p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">主要作用是實現交互。可以通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b><u>Test9_2.htm</u></b></font></span></p>
<pre><span style="color: rgb(125,125,125)" class="text"><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>
</span></pre>
</li>
<li><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>第三個框架</b></font>
</span></li>
</ol>
<p> <dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">主要作用是實現交互。</font></span></p>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>Test9_3.htm</b></font></span></p>
<pre><span style="color: rgb(125,125,125)" class="text"><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></span></pre>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></HTML></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在瀏覽器中的結果見圖9-2所示。</font></span></p>
<p><img src="javascript/Image7.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Image7.gif" width="496" height="345"
alt="Image7.gif (16765 字節)"><dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">圖 9-2
在瀏覽器中結果</font></span></p>
<p> </p>
</dir>
</dir>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 本講介紹框架中的基本元素的主要功能和使用，利用JavaScript腳本可以非常方便、靈活地實現Web頁面更為復雜的信息交互，這是HTML標識語言所不能具備的。從中可以看出JavaScript是多么的吸引眾多的Web設計人員。</font></span></td>
</tr>
</table>
<p align="center"><small><a href="JavaScript8.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript8.htm">上一頁</a>
下一頁</small></p>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -