JavaScript教程--從入門到精通(7)_自動測試腳本語言

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

發表于：2007-06-21來源：作者：點擊數：標簽：

JavaScript窗口及輸入輸出 JavaScript是基于對象的腳本編程語言，那么它的輸入輸出就是通過對象來完成的。其中有關輸入可通過窗口（Window）對象來完成，而輸出可通過文檔（document）對象的方法來實現。一、窗口及輸入輸出請看下面例子： HTML Head scrip

　　
　　JavaScript窗口及輸入輸出

　　JavaScript是基于對象的腳本編程語言，那么它的輸入輸出就是通過對象來完成的。其中有關輸入可通過窗口（Window）對象來完成，而輸出可通過文檔（document）對象的方法來實現。

一、窗口及輸入輸出
請看下面例子：
<HTML>
<Head>
<script languaga="JavaScript">
Var test=window.prompt("請輸入數據:");
document.write(test+"JavaScript輸入輸出的例子");
</script>
</Head>
</HTML>
　　其中window.prompt()就是一個窗口對象的方法，其基本作用是，當裝入Web頁面時在屏幕上顯示一個具有“確定”和“取消”的對話框，讓你輸出數據。document.writle是一個文檔對象的方法，它的基本功能，是實現Web頁面的輸出顯示。見圖1所示。

JavaScript教程--從入門到精通(7)（圖一）

圖1 　

1、窗口對象
　　該對象包括許多有用的屬性、方法和事件驅動程序，編程人員可以利用這些對象控制瀏覽器窗口顯示的各個方面，如對話框、框架等。在使用應注意以下幾點：
　該對象對應于HTML文檔中的<Body>和<FrameSet>兩種標識；
　onload和onunload都是窗口對象屬性；
　在JavaScript腳本中可直接引用窗口對象。如：
window.alert("窗口對象輸入方法")
可直接使用以下格式：
alert("窗口對象輸入方法")
　
2、窗口對象的事件驅動
　　窗口對象主要有裝入Web文檔事件onload和卸載時onunload事件。用于文檔載入和停止載入時開始和停止更新文檔。

3、窗口對象的方法
　　窗口對象的方法主要用來提供信息或輸入數據以及創建一個新的窗口。
　　創建一個新窗口open()
使用window.open（參數表）方法可以創建一個新的窗口。其中參數表提供有窗口的主要特性和文檔及窗口的命名。
　　具有OK按鈕的對話框
alert()方法能創建一個具有OK按鈕的對話框。
　　具有OK和Cancel按鈕的對話框
confirm()方法為編程人員提供一個具有兩個按鈕的對話框。
　　具有輸入信息的對話框
prompt()方法允許用戶在對話框中輸入信息，并可使用默認值，其基本格式如下prompt（“提示信息”，默認值）。
　
4、窗口對象中的屬性
　　窗口對象中的屬性主要用來對瀏覽器中存在的各種窗口和框架的引用，其主要屬性有以下幾個：
（１）frames 確文檔中幀的數目
frames（幀）作為實現一個窗口的分隔操作，起到非常有用的作用，在使用注意以下幾點：
　　frames屬性是通過HTML標識<Frames>的順序來引用的，它包含了一個窗口中的全部幀數。
　　幀本身已是一類窗口，繼承了窗口對象所有的全部屬性和方法。
（２）Parent 指明當前窗口或幀的父窗口。
（３）defaultstatus:默認狀態，它的值顯示在窗口的狀態欄中。
（４）status:包含文檔窗口中幀中的當前信息。
（５）top:包括的是用以實現所有的下級窗口的窗口。
（６）window.指的是當前窗口
（７）self:引用當前窗口。
　
5、輸出流及文檔對象
　　在JavaScript文檔對象中，提供了用于顯示關閉、消除、打開HTML頁面的輸出流。
（１）創建新文檔open()方法
　　使用document.open()創建一個新的窗口或在指定的命令窗口內打開文檔。由于窗口對象是所加載的父對象,因而我們在調用它的屬性或方法時,不需要加入Window對象。例用Window. Open()與Open()是一樣的。
打開一個窗口的基本格式：
Window .open("URL","窗口名字","窗口屬性"]
window屬性參數是由一個字符串列表項它由逗號分隔，它指明了有關新創建窗口的屬性。見表7-1所示。

表7-1

參數	設定值	含義
toolbar	yes/no	建立或不建立標準工具條
location	yes/no	建立或不建立位置輸入字段
directions	yes/no	建立或不建立標準目錄按鈕
status	yes/no	建立或不建立狀態條
menubar	yes/no	建立或不建立菜單條
scrollbar	yes/no	建立或不建立滾動條
revisable	yes/no	能否改變窗口大小
width	yes/no	確定窗口的寬度
Height	yes/	確定窗口的高度。

　
在使用Open()方法時，需要注意以下點。
　通常瀏覽器窗中，總有一個文檔是打開的。因而不需要為輸出建立一個新文檔。
　在完成對Web文檔的寫操作后，要使用或調用close()方法來實現對輸出流的關閉。
　在使用open()來打開一個新流時，可為文檔指定一個有效的文檔類型，有效文檔類型包括text/HTML、text/gif、text/xim、text/plugin等。
（２）write()、writeln()輸出顯示。
該方法主要用來實現在Web頁面上顯示輸出信息。在實際使用中，需注意以下幾點：
　writeln()與write()唯一不同之處在于在未尾加了一個換符。
　為了正常顯示其輸出信息，必須指明<pre> </Pre>標記，使之告訴編輯器。
　輸出的文檔類型，可以由瀏覽器中的有效的合法文本類型所確定。
（３）關閉文檔流close()
在實現多個文檔對象中，必須使用close()來關閉一個對象后，才能打開另一個文檔對象。
（４）清除文檔內容clear()
使用該方法可清除已經打開文檔的內容。

二、簡單的輸入、輸出例子
　　在JavaScript中可以非常方便地實現輸入輸出信息，并與用戶進行交互。

1、JavaScript信息的輸入
　　通過使用JavaScript中所提供的窗口對象方法prompt(), 就能完成信息的輸入。該方法提供了最簡便的信息輸入方式，其基本格式如下：
Window.prompt("提示信", 預定輸入信息);
　　此方法首先在瀏覽器窗口中彈出一個對話框, 讓用戶自行輸入信息。一旦輸入完成后，就返回用戶所輸入信息的值。例:
test=prompt（“請輸入數據:”，”this is a JavaScript”）
　　實際上prompt()是窗口對象的一個方法。因為缺省情況下所用的對象就是window對象, 所以windows對象可以省略不寫。
　
2、輸出顯示
　　每種語言，都必須提供信息數據的輸出顯示。JavaScript也是一樣，它提供有幾個用于信息輸出顯示的方法。比較常用的有window.alert()、document.write和及document.writln()方法。
１)、document.write()方法和document.writeln()方法
　　document是JavaScript中的一個對象在它中封裝許多有用的方法，其中write()和writeln()就是用于將文本信息直接輸出到瀏覽器窗口中的方法。
document.write()；
document.writeln()；
說明：
　write()和writeln()方法都是用于向瀏覽器窗口輸出文本字串；
　二者的唯一區別就是writeln()方法自動在文本之后加入回車符。
　
２)、 window.alert()輸出
　　在JavaScript為了方便信息輸出，JavaScript提供了具有獨立的對話框信息輸出─alert()方法。
alert()方法是window對象的一個方法，因此在使用時，不需要寫window窗口對象名，而是直接使用就行了。它主要用途用在輸出時產生有關警告提示信息或提示用戶，一旦用戶按“確定”鈕后，方可繼續執行其他腳本程序。例:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Script Language ="JavaScript">
alert("這是一個JavaScript測試程序");
</Script>
</BODY>
</HTML>

　
３)、利用輸入、輸出方法實現交互
　　在JavaScript中，可以利用prompt()方法和write()方法實現與Web頁面用戶進行交互。例下面就是一個有關實現交互的例子。
Test7_1.htm
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Script Language="JavaScript">

</Script>
</BODY>
</HTML>

從上面程序可以看出：
　可通過write()和prompt()方法實現交互。
　在JavaScript腳本語言中可以使用HTML標識語言的代碼。從而實現混合編程。其中<H1>和<Br>就是HTML標識符。

三、范例
下列程序演示了你進入主頁所停留的時間。
test7_2.htm
<html>
<form name="myform">
<td vAlign="top" width="135">您在此停留了：
<input name="clock" size="8" value="在線時間"></td>
</form>
<script language="JavaScript">
var id, iM = 0, iS = 1;
start = new Date();
function go()
{
now = new Date();
time = (now.getTime() - start.getTime()) / 1000;
time = Math.floor( time);
iS = time % 60;
iM = Math.floor( time / 60);
if ( iS < 10)
document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";
else
document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";
id = setTimeout( "go()", 1000);
}
go();
</script>
</body>
</html>

在瀏覽器中的結果，見圖2所示。

JavaScript教程--從入門到精通(7)（圖二）

圖1

原文轉自：http://www.kjueaiud.com

軟件測試 > 測試開發技術 > 軟件測試開發語言 > 自動測試腳本語言 >