視窗對象的屬性和方法：
格式：
[window.]屬性
[window.]方法（參數）
opener.屬性
opener.方法（參數）
self.屬性
self.方法（參數）
parent.屬性
parent.方法（參數）
top.屬性
top.方法（參數）
視窗名稱.屬性
視窗名稱.方法（參數）
視窗對象的屬性：
document 當前檔案的資訊
location 當前URL的資訊
name 視窗名稱
status 狀態列的臨時資訊
defaultStatus 狀態列預設資訊
history 該視窗最近查閱過的網頁
closed 判斷視窗是否關閉，返回布爾值
opner open方法開啟的視窗的源視窗
outerHeight 視窗邊界的垂直尺寸，px
outerWidth 視窗邊界的水平尺寸，px
pageXOffset 網頁x-position的位置
pageYOffset 網頁y-position的位置
innerHeight 視窗內容區的垂直尺寸，px
innerWidth 視窗內容區的水平尺寸，px
screenX 視窗左邊界的X座標
screenY 視窗上邊界的Y座標
self 當前視窗
top 最上方的視窗
parent 當前視窗或架構的架構組
frames 對應到視窗中的架構
length 架構的個數
locationbar 瀏覽器地址欄
menubar 瀏覽器功能表列
scrollbars 瀏覽器捲軸
statusbar 瀏覽器狀態列
toolbar 瀏覽器工具列
offscreenBuffering 是否更新視窗外的地區
personalbars 瀏覽器的個人工具列，僅Navigator
視窗對象的方法：
alert(資訊字串) 彈出警告資訊
confirm(資訊字串) 顯示確認資訊對話方塊
prompt(提示字串[，預設值]) 顯示提示資訊，並提供可輸入的欄位
atob(解碼字串) 對base-64編碼字串進行解碼
btoa(字串) 將進行base-64編碼
back() 回到記錄的上一網頁
forward() 載入記錄中的下一網頁
open(URL，視窗名稱[，視窗規格])
focus() 焦點移到該視窗
blur() 視窗轉成背景
stop() 停止載入網頁
close()
enableExternalCapture() 允許有架構的視窗擷取事件
disableExternalCapture() 關閉enableExternalCapture()
captureEvents(事件類型) 捕捉視窗的特定事件
routeEvent(事件) 傳送已捕捉的事件
handleEvent(事件) 使特定事件的處理生效
releaseEvents(事件類型) 釋放已擷取的事件
moveBy(水平點數，垂直點數) 相對定位
moveTo(x座標，y座標) 絕對位置
setResizable(true|false) 是否允許調整視窗大小
resizeBy(水平點數，垂直點數) 相對調整視窗大小
resizeTo(寬度，高度) 絕對調整視窗大小
scroll(x座標，y座標) 絕對滾動視窗
scrollBy(水平點數，垂直點數) 相對滾動視窗
scrollTo(x座標，y座標) 絕對滾動視窗
setInterval(運算式，毫秒)
setTimeout(運算式，毫秒)
clearInterval(定時器對象)
clearTimeout(定時器對象)
home() 進入瀏覽器設定的首頁
find([字串[,caseSensitivr,backward]]) 尋找視窗中特定的字串
print()
setHotKeys(true|false) 啟用或關閉按鍵組合
setZOptions() 設定視窗重疊時的堆棧順序
視窗對象的事件處理常式：
onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload
例1：
<Script>
function checkPassword(testObject) {
if (testObject.value.length < 4) {
alert("密碼長度不得小於四");
testObject.focus();
testObject.select();
}
}
</Script>
請輸入密碼：
<INPUT TYPE="text" onBlur="checkPassword(this)">
例2：
<Script>
if (confirm("你滿十八歲了嗎?"))
location = "adult.htm";
else
alert("等你成年以後再來吧!");
</Script>
例3：
<Script>
var bgColor =
prompt("你喜歡哪一種底色：\n淺藍色請按1，粉紅色請按2",1)
if (bgColor == 1) document.bgColor = "#CCFFFF";
else if (bgColor == 2) document.bgColor = "#FFCCFF";
else document.bgColor = "#FFFFFF";
</Script>
例4：
<Script>
function grow() {
resizeBy(0, 50);
}
function shrink() {
resizeBy(0, -50);
}
</Script>
<Body onMouseOver="grow()" onMouseOut="shrink()">
將視窗放大與縮小
</Body>
例5：
<Script>
function scrollIt() {
for (y=1; y<=2000; y++) {
scrollTo(1,y);
}
}
</Script>
<Body onDblClick=scrollIt()>
雙擊滑鼠，畫面會自動捲動...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
... The End ...
</Body>
open方法的視窗規格參數：（yes/no，1/0）
格式：[var 新視窗對象名=]window.open("url","windowName","windowFeature") alwaysLowered 是否將視窗顯示的堆棧後推一層
alwaysRaised 是否將視窗顯示的堆棧上推一層
dependent 是否將該視窗與當前視窗產生依存關係
fullscreen 是否滿屏顯示
directories 是否顯示串連工具列
location 是否顯示網址工具列
menubar 是否顯示菜單工具列
scrollbars 是否顯示捲軸
status 是否顯示狀態列
titlebar 是否顯示標題列
toolbar 是否顯示標準工具列
resizable 是否可以改變視窗的大小
screenX 視窗左邊界距離
screenY 視窗上邊界距離
top 視窗上邊界
width 視窗寬度
height 視窗高度
left 視窗左邊界
outerHeight 視窗外邊界的高度
personalbar 是否顯示個人工具列
注釋：open("","","menubar")
open("","","menubar=1")
open("","","menubar=yes")
例1：
<Script>
document.write ("文哥網路技術學習網");
open ('1.htm','','height=100,width=300');
</Script>
<!-------- 1.htm -------->
<TITLE>歡迎光臨</TITLE>
<BODY onClick="self.close()">
<IMG SRC="images\welcome.gif" ALIGN="left">
<CENTER>
<FONT COLOR="blue" SIZE="5">歡迎光臨</FONT><BR>
這是一個技術研習的小天地<BR>
</CENTER>
</BODY>
例2：
<Script>
document.write("文哥網路技術學習網")
helloWin = open ('1.htm','','height=100,width=300');
var line1 = "<FONT COLOR='blue' SIZE='5'>歡迎光臨</FONT><BR>"
var line2 = "這是一個技術研習的小天地"
helloWin.document.write (line1 + line2)
helloWin.document.title = "歡迎光臨"
</Script>
例3：
<Script>
window.defaultStatus = "最棒的線上學習網站";
</Script>
<A HREF="http://www.hubert.idv.tw" onMouseOver="status='內容很充實喔！';return true">
文哥網路技術學習網</A>
例4：
<Script>
queryWin = open('1.htm','','height=100,')
</Script>
利用子視窗來改變母視窗的底色
/* -------- 1.htm -------- */
<Script>
function passToOpener(color) {
opener.document.bgColor = color;
self.close();
}
</Script>
<CENTER>
請選擇你喜歡的顏色?<BR>
<FONT onClick="passToOpener('#CCFFFF')"> >淺藍色<</FONT>
<FONT onClick="passToOpener('#FFCCFF')"> >淺紅色<</FONT>
</CENTER>
螢幕對象：
描述螢幕的顯示及顏色屬性。
螢幕對象的屬性：
格式： screen.屬性
availHeight 螢幕地區的可用高度
availWidth 螢幕地區的可用寬度
colorDepth 色彩深度 256/8 16/16 32M/32
height 螢幕地區的實際高度
width 螢幕地區的實際寬度
例1：
<Script>
with (document) {
write ("您的螢幕顯示設定值如下：<P>");
write ("螢幕的實際高度為", screen.availHeight, "<BR>");
write ("螢幕的實際寬度為", screen.availWidth, "<BR>");
write ("螢幕的色盤深度為", screen.colorDepth, "<BR>");
write ("螢幕地區的高度為", screen.height, "<BR>");
write ("螢幕地區的寬度為", screen.width);
}
</Script>
例2：
<Script>
if ( screen.width < 800 || screen.colorDepth < 8 ){
var msg = "本網站最佳瀏覽模式為 800 * 600 * 256";
alert(msg);
}
</Script> 事件對象：
當事件發生時，瀏覽器自動建立該對象，並包含該事件的類型、滑鼠座標等。
事件對象的屬性：
格式：event.屬性
data 返回拖拽對象的URL字串（dragDrop）
width 該視窗或架構的高度
height 該視窗或架構的高度
pageX 游標相對於該網頁的水平位置
pageY 游標相對於該網頁的垂直位置
screenX 游標相對於該螢幕的水平位置
screenY 游標相對於該螢幕的垂直位置
target 該事件被傳送到的對象
type 事件的類型
which 數值表示的鍵盤或滑鼠鍵：1/2/3（左鍵/中鍵/右鍵）
layerX 游標相對於事件發生層的水平位置
layerY 游標相對於事件發生層的垂直位置
x 相當於layerX
y 相當於layerY
例1：
<Script>
function getEvent(evnt) {
eventWin = open ('','','width=200,height=100');
with (eventWin.document) {
write("事件類型：", event.type);
write("<br>滑鼠的x座標：", event.screenX);
write("<br>滑鼠的y座標：", event.screenY);
}
}
document.write ("單擊...")
document.onmousedown = getEvent;
</Script>
例2：
<Script>
function getCoordinate(evnt) {
if (document.all) {
x = event.screenX;
y = event.screenY;
}
else {
x = evnt.screenX;
y = evnt.screenY;
}
status = "水平座標："+ x + "；垂直座標："+ y;
}
document.onmousemove = getCoordinate;
</Script>
例3：
<Script>
function whichKey(evnt) {
if (document.all) {
x = event.button;
if( x==1 ) alert("你單擊了左鍵");
if( x==2 ) alert("你單擊了右鍵");
}
else {
x = evnt.button;
if( x==1 ) alert("你單擊了左鍵");
if( x==3 ) alert("你單擊了右鍵");
return false;
}
}
document.onmousedown = whichKey;
document.write("請單擊滑鼠左/右鍵");
</Script> 曆史對象：
用以儲存用戶端最近訪問的網址清單。
格式：
history.屬性
history.方法（參數）
曆史對象的屬性：
current 當前記錄的網址
length 儲存在記錄清單中的網址數目
next 下一個記錄的網址
previous 上一個記錄的網址
曆史對象的方法：
back() 回到上一個記錄中的網址
forward() 回到下一個記錄中的網址
go(整數或URL) 前往記錄中的網址
例1：
history.go(-1)
newWin.history.back()
parent.downFrame.histroy.back()
例2：
<A HREF="#" onClick="history.back()">上一頁</A>
<A HREF="javascript:history.back()">上一頁</A> 位置對象：
用來代表特定視窗的URL資訊。
格式：
location.屬性
location.方法（參數） URL的格式：
protocol//host:port/path#hash?search
URL的種類：
javascript: javascript程式碼
view-source: 顯示原始碼
http:
file:
ftp:
mailto:
news:
gopher
位置對象的屬性：
hash 錨點名稱
host 主機名稱
hostname host:port
href 完整的URL字串
pathname 路徑
port 連接埠
protocol 協議
search 查詢資訊
位置對象的方法：
reload() 重新載入
replace(網址) 用指定的網頁取代當前網頁
例1：
按下按鈕前往「文哥網路技術學習網」<P>
<INPUT TYPE="button" VALUE="走吧！" onClick="location.href='http://www.hubert.idv.tw/'">
例2：
<FONT COLOR="red"
onClick="location='http://www.hubert.idv.tw/'">
文哥網路技術學習網</FONT><P>
<FONT COLOR="blue" STYLE="cursor:hand"
onClick="location='http://www.hubert.idv.tw/'">
文哥網路技術學習網</FONT>
例3：
<Script>
var sec = 5;
function countDown() {
if (sec > 0) {
num.innerHTML = sec--;
}
else
location = "http://www.hubert.idv.tw/";
}
</Script>
<BODY onLoad="setInterval('countDown()', 1000)">
<CENTER>
文哥網路技術學習網
<H2>http://www.hubert.idv.tw/</H2>
五秒鐘後自動帶你前往<BR>
<FONT ID="num" SIZE="7" FACE="impact">5</FONT>
例4：
<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hubert.idv.tw/');"><FONT COLOR="red"><U>設為首頁</U></FONT></A><P>
<A HREF="javascript:window.external.AddFavorite('http://www.hubert.idv.tw/','文哥網路技術學習網');"><FONT COLOR="red"><U>加入收藏</U></FONT></A> 檔案對象：
代表當前HTML對象，是由<body>標籤組構成的，對每個HTML檔案會自動建立一個檔案對象。
格式：
document.屬性
document.方法（參數） 檔案對象的屬性：
linkColor 設定超連結的顏色
alinkColor 作用中的超連結的顏色
vlinkColor 連結的超連結顏色
links 以數組索引值表示所有超連結
URL 該檔案的網址
anchors 以數組索引值表示所有錨點
bgColor 背景顏色
fgColor 前景顏色
classes 檔案中的class屬性
cookie 設定cookie
domain 指定伺服器的網域名稱
formName 以表單名稱表示所有表單
forms 以數組索引值表示所有表單
images 以數組索引值表示所有映像
layers 以數組索引值表示所有layer
embeds 檔案中的plug-in
applets 以數組索引值表示所有applet
plugins 以數組索引值表示所有外掛程式程式
referrer 代表當前開啟檔案的網頁的網址
tags 指出HTML標籤的樣式
title 該文檔的標題
width 該檔案的寬度（px）
lastModified 檔案最後修改時間
檔案對象的方法：
captureEvents(事件) 設定要擷取指定的事件
close() 關閉輸出字元流，強制顯示資料內容
getSelection() 取得當前選取的字串
handleEvent(事件) 使事件處理器生效
open([mimeType,[replace]]) 開啟字元流
releaseEvents(事件類型) 釋放已擷取的事件
routeEvent(事件) 傳送已捕捉的事件
write(字串) 寫字串或數值到檔案中
writeln(字串) 分行寫字串或數值到檔案中（<pre>..</pre>）
檔案對象的事件處理常式：
onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseOver
例1：
<Script>
document.bgColor = "white";
document.fgColor = "black";
document.linkColor = "red";
document.alinkColor = "blue";
document.vlinkColor = "purple";
</Script>
測試檔案對象的顏色屬性：<BR>
<A HREF="http://www.hubert.idv.tw">文哥網路技術學習網</A>
例2：
<Script>
var update_date = document.lastModified;
var formated_date = update_date.substring(0,10);
document.write("本網頁更新日期：" + update_date + "<BR>")
document.write("本網頁更新日期：" + formated_date)
</Script> |
