JavaScript視窗及輸入輸出 [7]
阿新 • • 發佈：2019-02-03
JavaScript是基於物件的指令碼程式語言，那麼它的輸入輸出就是通過物件來完成的。其中有關輸入可通過視窗（Window）物件來完成，而輸出可通過文件（document）物件的方法來實現。
一、視窗及輸入輸出
請看下面例子：
| <HTML> <Head> <script languaga="JavaScript"> Var test=window.prompt("請輸入資料:"); document.write(test+"JavaScript輸入輸出的例子"); </script> </Head> </HTML> |
圖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/no |
確定視窗的高度。 |
在使用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"> <!-- Hide From Other Browsers document.write("<H1>有關互動的例子"); my=prompt("請輸入資料:"); document.write(my+"</H1>"); document.close(); // Stop Hiding from Other Browsers--> </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> |
系列文章轉自與【賽迪網】http://www0.ccidnet.com/school/web/2001/05/09/70_4115.html