?? javascript7.htm
字號:
<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>1、JavaScript信息的輸入</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 通過使用JavaScript中所提供的窗口對象方法prompt(),
就能完成信息的輸入。該方法提供了最簡便的信息輸入方式，其基本格式如下：</font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Window.prompt("提示信",
預定輸入信息);</font></span></p>
</dir>
</dir>
<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">test=prompt（“請輸入數據:”，”this
is a JavaScript”）</font></span></p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 實際上prompt()是窗口對象的一個方法。因為缺省情況下所用的對象就是window對象,
所以windows對象可以省略不寫。</font></span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>2、輸出顯示</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 每種語言，都必須提供信息數據的輸出顯示。JavaScript也是一樣，它提供有幾個用于信息輸出顯示的方法。比較常用的有window.alert()、document.write和及document.writln()方法。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１)、document.write()方法和document.writeln()方法</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> document是JavaScript中的一個對象在它中封裝許多有用的方法，其中write()和writeln()就是用于將文本信息直接輸出到瀏覽器窗口中的方法。</font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write()；</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.writeln()；</font></span></p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">說明：</font></span><dir>
<dir>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字節)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> write()和writeln()方法都是用于向瀏覽器窗口輸出文本字串；</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字節)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 二者的唯一區別就是writeln()方法自動在文本之后加入回車符。</font></span></p>
<p> </p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>２)、
window.alert()輸出</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在JavaScript為了方便信息輸出，JavaScript提供了具有獨立的對話框信息輸出─alert()方法。<br>
alert()方法是window對象的一個方法，因此在使用時，不需要寫window窗口對象名，而是直接使用就行了。它主要用途用在輸出時產生有關警告提示信息或提示用戶，一旦用戶按“確定”鈕后，方可繼續執行其他腳本程序。例:</font></span></p>
<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"><HEAD></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><TITLE></TITLE></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></HEAD></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><BODY></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Script
Language ="JavaScript"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">alert("這是一個JavaScript測試程序");</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></Script></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></BODY></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></HTML></font></span></p>
<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中，可以利用prompt()方法和write()方法實現與Web頁面用戶進行交互。例下面就是一個有關實現交互的例子。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>Test7_1.htm</b></font></span></p>
<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"><HEAD></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><TITLE></TITLE></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></HEAD></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><BODY></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Script
Language="JavaScript"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><!-- Hide From
Other Browsers</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write("<H1>有關交互的例子");</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">my=prompt("請輸入數據:");</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write(my+"</H1>");</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.close();</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">// Stop Hiding
from Other Browsers--></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></Script></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></BODY></font></span></p>
<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">從上面程序可以看出：</font></span><dir>
<dir>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字節)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 可通過write()和prompt()方法實現交互。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字節)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在JavaScript腳本語言中可以使用HTML標識語言的代碼。從而實現混合編程。其中<H1>和<Br>就是HTML標識符。</font></span></p>
<p> </p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>四、范例</b></font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">下列程序演示了你進入主頁所停留的時間。</font></span></p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>test7_2.htm</b></font></span></p>
<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"><form
name="myform"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><td
vAlign="top" width="135">您在此停留了：</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><input
name="clock" size="8" value="在線時間"></td></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><script
language="JavaScript"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">var id, iM = 0,
iS = 1;</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">start = new
Date();</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">function go()</font></span></p>
<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">now = new Date();</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">time =
(now.getTime() - start.getTime()) / 1000;</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">time =
Math.floor( time);</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">iS = time % 60;</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">iM = Math.floor(
time / 60);</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">if ( iS < 10)</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.myform.clock.value
= " " + iM + " 分 0" + iS + " 秒";</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">else</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.myform.clock.value
= " " + iM + " 分 " + iS + " 秒";</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">id = setTimeout(
"go()", 1000);</font></span></p>
<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">go();</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></script></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></body></font></span></p>
<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">在瀏覽器中的結果，見圖1所示。</font></span></p>
<p><img src="javascript/Image9.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Image9.gif" width="338" height="230"
alt="Image9.gif (10470 字節)"><dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">圖1</font></span></p>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
</td>
</tr>
</table>
</center></div>
<p align="center"><small><a href="JavaScript6.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript6.htm">上一頁</a>
<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 + -