JavaScript教程--從入門到精通(9)

來源:互聯網
上載者:User
javascript|教程

  用JavaScript實現更複雜的互動

  一、什麼是架構
  架構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設計人員。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。