?? javascript7.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>
<p align="center"><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="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>
<div align="center"><center>
<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>
</center></div><div align="center"><center>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><font lang="ZH-CN"><span
style="color: rgb(125,125,125)" class="text"> JavaScript是基于對象的腳本編程語言,那么它的輸入輸出就是通過對象來完成的。其中有關輸入可通過窗口(Window)對象來完成,而輸出可通過文檔(document)對象的方法來實現。</span></font></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">請看下面例子:</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"><script
languaga="JavaScript"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Var
test=window.prompt("請輸入數據:");</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write(test+"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"></Head></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">其中window.prompt()就是一個窗口對象的方法,其基本作用是,當裝入Web頁面時在屏幕上顯示一個具有“確定”和“取消”的對話框,讓你輸出數據。document.writle是一個文檔對象的方法,它的基本功能,是實現Web頁面的輸出顯示。見圖1所示。</font></span></p>
<p><img src="javascript/Image8.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Image8.gif" width="488" height="118"
alt="Image8.gif (6176 字節)"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> </font></span><dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">圖1</font></span></p>
<p> </p>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>1、窗口對象</b></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"> 該對象對應于HTML文檔中的<Body>和<FrameSet>兩種標識;</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"> onload和onunload都是窗口對象屬性;</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腳本中可直接引用窗口對象。如:</font></span><dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">window.alert("窗口對象輸入方法")
</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">alert("窗口對象輸入方法")</font></span></p>
<p> </p>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
<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"> 窗口對象主要有裝入Web文檔事件onload和卸載時onunload事件。用于文檔載入和停止載入時開始和停止更新文檔。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>3、窗口對象的方法</b></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"> 創建一個新窗口open()</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">使用window.open(參數表)方法可以創建一個新的窗口。其中參數表提供有窗口的主要特性和文檔及窗口的命名。</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"> 具有OK按鈕的對話框</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">alert()方法能創建一個具有OK按鈕的對話框。</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"> 具有OK和Cancel按鈕的對話框</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">confirm()方法為編程人員提供一個具有兩個按鈕的對話框。</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"> 具有輸入信息的對話框</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">prompt()方法允許用戶在對話框中輸入信息,并可使用默認值,其基本格式如下prompt(“提示信息”,默認值)。</font></span></p>
<p> </p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>4、窗口對象中的屬性</b></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">(1)frames
確文檔中幀的數目</font></span><dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">frames(幀)作為實現一個窗口的分隔操作,起到非常有用的作用,在使用注意以下幾點:</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"> frames屬性是通過HTML標識<Frames>的順序來引用的,它包含了一個窗口中的全部幀數。</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"> 幀本身已是一類窗口,繼承了窗口對象所有的全部屬性和方法。</font></span></p>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(2)Parent
指明當前窗口或幀的父窗口。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(3)defaultstatus:默認狀態,它的值顯示在窗口的狀態欄中。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(4)status:包含文檔窗口中幀中的當前信息。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(5)top:包括的是用以實現所有的下級窗口的窗口。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(6)window.指的是當前窗口</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">(7)self:引用當前窗口。</font></span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>5、輸出流及文檔對象</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">在JavaScript文檔對象中,提供了用于顯示關閉、消除、打開HTML頁面的輸出流。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>(1)創建新文檔open()方法</b></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 使用document.open()創建一個新的窗口或在指定的命令窗口內打開文檔。由于窗口對象是所加載的父對象,因而我們在調用它的屬性或方法時,不需要加入Window對象。例用Window.
Open()與Open()是一樣的。<br>
打開一個窗口的基本格式:</font></span><dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Window
.open("URL","窗口名字","窗口屬性"]</font></span></p>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -