網頁標題：
事件與物件
事件與物件
事件 可捕捉到物件 發生時機 事件處理器
Abort images 載入圖片中斷 onAbort
Blur windows及所有的form物件 輸入焦點移開物件本身時，例如跳至別的輸入欄位，或者是利用TAB跳至下一個輸入欄位。 onBlur
Change text fields, textareas,
select list 當物件輸入欄位內容改變時。 onChange
Click buttons, radio buttons,
checkboxes, sumbit buttons, reset buttons, links 物件被滑鼠點一下時。 onClick
DragDrop windows 托曳一個物件(例如檔案)到瀏灠器上時。 onDragDrop
Error images, windows 載入圖片或文件發生錯誤時。 onError
Focus windows及所有的form物件 輸入焦點移至該物件本身時，例如在文字輸入欄上點一下，或者是利用TAB將游標移至文字輸入欄內準備鍵入資料。 onFocus
KeyDown documents, images, links, text areas 放開一個按鍵時。 onKeyDown
KeyPress documents, images, links, text areas 按下一個鍵，或按住一個鍵不放時。 onKeyPress
KeyUp documents, images, links, text areas 放開一個按鍵時。 onKeyUp
Load document body 載入文件時。 onLoad
MouseDown documents, buttons, links 按開滑鼠按鍵時。 onMouseDown
MouseMove nothing by default 滑鼠移動時。 onMouseMove
MouseOut areas, links 滑鼠移開一個鍊結或圖片時。 onMouseOut
MouseOver links 滑鼠移到一個超鍊結上方時。 onMouseOver
MouseUp documents, buttons, links 放開一個滑鼠按鍵時。 onMouseUp
Move windows 移開視窗時。 onMove
Reset forms 按下form裡的reset按鈕時。 onReset
Resize windows 改變視窗大小時。 onResize
Select text fields, textareas 選取文字時。 onSelect
Submit forms 按下form裡的submit按鈕時。 onSubmit
Unload document body 離開文件時。例如按下超鍊超。 onUnload
使用FrontPage插入JavaScript
JavaScript編輯窗
雖然FrontPage沒有很強大的JavaScript編輯環境，不過FrontPage提供的JavaScript編輯功能倒是一個蠻方便的JavaScript管理程式。
現在我們利用JavaScript來插入一段JavaScript程式碼。
在FrontPage Editor選則插入JavaScript，如圖。
選取Insert->Advanced->Script...
然後可以看到一個編輯視窗。Language點選JavaScript，然後我們在Script編輯區裡打上一行簡單的程式。
按一下OK後預瀏文件，可以看到畫面出現Hello!。我們可以利用這個功能直接插入JavaScript，而且FrontPage會自動幫我們填入相關的HTML標籤，我們只要直接輸入程式碼即可，非常方便。
如果要修改之前的JavaScript，方法為：
１． 確定有開啟段落提示。
２． 在JavaSript的提示圖示上按滑鼠右鍵，即 （滑鼠移到上面時會出現機器人）
３． 在屬性視視上選Java Properties...
即可編輯已存在的JavaScript程式。直接使用Insert->Advanced->JavaScript...的話表示要新增JavaScript。
JavaScript Wizard
JavaScript精靈可以讓我們很方便的為Event插入Action。點選JavaScript Wizard後可以看到一個JavaScript Wizard，我們就是要藉由精靈的幫助，來插入我們的JavaScript程式碼。
這就是JavaScript Wizard
我們可以從1.Select an Event裡選擇Event，然後在2.Insert Actions裡為這個事件選用Action。
把Event裡的window展開後點onLoad（文件載入時觸發）。
onLoad會變成藍色背景，然後再把Action裡的window展開，再展開document，在bgColor上點二下，或者點一下再按底下編輯功能鈕InsertAction，表示我們要做的動作就是為onLoad這個事件處理器填入改變window.document.bgColor這個屬性的程式碼，即背景顏色。之後會跳出一個視窗。
在文字欄裡輸入顏色的十六進位字串，或者按下Color這個按鈕，可以直接選取顏色，FrontPage會自動幫我們填入相對應的字串。按下OK後就可以在程式碼視窗裡看到對應的程式碼。
利用功能按鈕可以修改程式。
現在，onLoad左邊的小菱形會變成實心，表示我們已定義了這個Event的Acion。同樣的做法，我們可以利用Wizard為不同的Event選取Action，當這個Action需要輸入額外的字串時（通常是參數或一個值），就會自動出現一個視窗，否則就會直接將程式碼插入。利用工具按鈕可以修改程式碼。假設我們要修改windows.document.bgColor的屬性，我們可以在這一行點兩下，或者點一下後按Modify Value按鈕即可。
把顯示模式切換成Code View就可以看到真正的JavaScript程式碼。
在CodeView模式下，我們可以直接在編輯區裡修改程式碼。切換成ListView模式後又會變成對應的CodeView模式。
在HTML模式下可以看到FrontPage自動幫我們填入的JavaScript程式碼：
New Page 1
按一下OK，再預覽，當文件載入時即可觸發這個事件。結果是，整個畫面背景變成紅色了！
函數的撰寫
選取Insert->Advanced->Script...後，我們在Scritp編輯區內編輯可以編輯函數，我們來設計一個簡單的函數。
後然再進入Wizard，可以發現，在Action的地方多出了Procedures的資料匣，展開後可以找到我們之前寫的function，表示說，Event也可以接定我們自己寫的function。
習慣上，我們將所有的functions寫在同段落，也就是同一個JavaScript的圖示裡，不分成許多個段落(圖示)，理由是維護較容易。或者把同類別、性質相同的functions寫在同一個段落裡，也是一個好習慣。
每個段落就是一個獨立的標籤。
全域變數的宣告
除了functions外，精靈也可以幫我們管理全域變數。宣告在底下這二個地方的變數皆視為全域變數：
宣告於function外，如：
var hello="歡迎光臨!!"
function () {
window.alert(hello)
}
var hi="Hello!!"
window.alert=(hi)
以上的hello和hi都是全域變數。
宣告於獨立段落者，也就是把變數宣告在一個段落裡，該段落內沒有程式碼或function。
進入精靈後，在Actions可以看到一個Globe Variables的資料匣，展開後可以看到所有的全域變數，通常我們都是對全域變數指定一個字串（值），所以點選全域變數後會出現輸入資料的對話視窗。
要注意一點，如果我們直接輸入一個字串，那表示這是一個變數名稱，所以要符合變數命名規則，否則會出現錯誤，如果要輸入字串資料，只要加上"雙引號即可。
另外，記得將顯示規式（編輯模式）切換成List View！才能使用交談式介面，如果使用Code View我們就必須可行輸入程式。
輸入 Welcome!! 發生錯誤
JavaScript的物件
anchor
Property Method Event
無 無 無
可產生anchor物件的HTML標籤
說明
一個鍊結的物件。
在一個HTML文件中，所有的anchor要經由document的anchors屬性來讀取，這是一個陣列，所以，假設有三個anchor物件被建立，我們可以使用這樣的命令來讀取第一個被建立的anchor物件：document.anchors[0] 。
button
Property Method Event
name
value click() onClick
Property 說明
name button物件的名稱，這裡所謂的名稱並不是Value/Lable
，在按鈕上的文字叫做Value或Label，name是物件的名稱；這點還要讀者多加留意。
當我們讀取button物件的name時，會傳回button物件的名稱，型態是字串。
在畫面上的Button：
value 按鈕的提示字串。
Method 說明
click() 和滑鼠在button上點一下的作用相同。
可產生button物件的HTML標籤
說明
一個按鈕的物件。
範例
checkbox
Property Method Event
checked
defaultchecked
name
value click() onClick
Property 說明
checked 當這個值為true時，代表核對盒被選取。
defaultchecked 核對盒的初始狀態。
name 核對盒物件名稱。
value 核對盒的值
Method 說明
click() 和滑鼠在button上點一下的作用相同。可選取，或取消選取核對盒。
可產生checkbox物件的HTML標籤
說明
一個核對盒物件。在網頁上一個方型的框框，有多選功能，可以讓我們選擇要或不要，對或錯等等。
範例
Date
Property Method Event
無 GetDate()
GetDay()
GetHours()
GetMinutes()
GetMonth()
GetSeconds()
getTime()
getTimeZoneOffset()
getYear()
go()
parse()
parseInt()
setDate()
setHours()
setMinutes()
setMonth()
setSeconds()
setYear()
setTimeout()
toString()
toGMTString()
toLocaleString
UTC()
SetTimesetYear()
Small()
ToLowerCase()
ToUpperCase()
writeln() 無
Method 說明
GetDate()
GetDay()
GetHours()
GetMinutes()
GetMonth()
GetSeconds()
getTime()
getTimeZoneOffset()
getYear()
go()
parse()
parseInt()
setDate()
setHours()
setMinutes()
setMonth()
setSeconds()
setYear()
setTimeout()
toString()
toGMTString()
toLocaleString()
UTC()
SetTimesetYear()
Small()
ToLowerCase()
ToUpperCase()
writeln()
可產生Date物件的HTML標籤
無。
說明
一個日期的物件類別。
。Date以毫秒為單位，儲存自 January 1, 1970 00:00:00之後的時間。這是一個JavaScript提供的物件類別，和一般的C++產生物件一樣，我們可以這樣產生一個Date的物件：
var date = new Date(參數)
參數有下列幾種形態：
１． 不傳入參數：Date物件的日期與時間就是目前的日期與時間。
２． 傳入字串：格式為"Month Day, Year hours:minutes:seconds"
例如 var MyBirthday = new Date("July 21, 1980 15:00:00");
或者 var MyBirthday = new Date("July 21, 1980");
我們只能把時間省去，而且自動會被設為零。
３． 傳入數值：格式為year,month,day,hours,minutes,seconds
例如 var XMAS = new Date(1999,12,25,20,0,0);
或者 var XMAS = new Date(1999,12,25);
跟傳入字串相同，我們只能省略時間，並且也會被自動設為零。
範例
document
Property Method Event
alinkColor
anchors
bgColor
fgColor
forms
lastModified,
linkColor
links
location
referer
title
vlinkColor clear()
close()
parse()
open()
write()
writeln() 無
Property 說明
alinkColor 已鍊結過的超鍊結文字顏色。
anchors anchor物件的陣列，document.anchors[]裡每個元素都是一個anchor物件。
bgColor 文件的背景顏色。
forms form物件的陣列,document.forms[]裡每個元素都是一個anchor物件。
lastModified 唯讀屬性，存放文件最後被修改的日期。
linkColor 超鍊結文字顏色。
links link物件的陣列，document.links[]裡每個元素都是一個links物件。
location 文件的完整URL位址。請參閱location物件。
referer 當我們鍊結到其它文件時，referer屬性會存放原來的URL位址。
title 文件標題。
vlinkColor 已經參觀過的超鍊結文字顏色。
Method 說明
clear()
close()
parse()
open()
write()
writeln()
可產生document物件的HTML標籤
無。
說明
文件物件。當一個HTML文件被載入時，即產生這個物件。
文件物件紀錄了文件的相關資訊及內容，例如標籤裡的title、location，及主體內的表格、鍊結等，我們可經由他的Properties來取得這些資訊。
範例
form
Property Method Event
action
elememts
method
name
target sup()
submit() onSubmit
Property 說明
action
elememts
method
name
target
Method 說明
sup()
submit()
可產生form物件的HTML標籤
說明
一個表單物件。內含有checkbox，radioButton，select等物，可以讓我們輸入文字、選擇元件，並透過表單傳送資料到伺服器，或由伺服器獲取資訊。
一份文件可能會有多個form物件，這些form物件會被存成陣列，因為form物件的祖先是document，所以我們可以這樣來讀取第n個form物件：
document.form[n];
範例
frame
Property Method Event
frames
parent
self
top alert()
clear()
Timeout()
close()
confirm()
open()
prompt()
setTimeout()
submit() 無
Property 說明
frames
parent
self
top
Method 說明
alert()
clear()
Timeout()
close()
confirm()
open()
prompt()
setTimeout()
submit()
可產生frame物件的HTML標籤
說明
我們可以把一個視窗切割成多個視窗，每個視窗就是一個frame。
若有多個分割視窗，這些frame物件會被存成陣列。因為格個子視窗不會互相溝通，所以我們要經由他的parent來間接存取frame物件，因此，第n個frame物件的存取方法為：
parent.frames[n];
frame1經由parent存取frame2，fram1與fram2之間沒有通道。凡是產生這些frame的文件即為他們的parent，也就是含有
標籤的文件。
範例
hidden
Property Method Event
name
value 無 無
Property 說明
name
value
可產生hidden物件的HTML標籤
說明
表單(form)中被隱藏的文字物件，通常被用來傳送資料用的，submit後會和其它資料一起被傳送。
範例
history
Property Method Event
length back()
forward()
go() 無
Property 說明
length
Method 說明
back()
forward()
go()
可產生history物件的HTML標籤
無。
說明
history包含我們載入HTML文件後的資訊，包括目前看過的文件標題和URL。可以經由navigator的go method來讀取。
範例
link
Property Method Event
target back()
forward()
go() onClick
onMouseOver
Property 說明
target
Method 說明
back()
forward()
go()
可產生link物件的HTML標籤
說明
文件中的超鍊結物件。多個link物件被存成陣列，可經由document這個祖先來存取，例如document.links[0];陣列中的存放關係以循序載入順序為主。
範例
location
Property Method Event
hash
host
hostname
href
pathname
post
protocal,
search 無 無
Property 說明
hash
host
hostname
href
pathname
post
protocal,
search
可產生location物件的HTML標籤
無。
說明
location物件包含目前的URL相關資訊。許多物件都有繼承這個物件類別，像是parent，所以我們可以這樣改變其它視窗的URL，以鍊結到其它的HTML文件：
parent.frame[0].location.href = http://210.70.111.18/;
location的href屬性紀錄目前的文件超鍊結位址。
範例
Math
Property Method Event
E
LN2
LN10
PI
SQRT1_2
SQRT2
SQRT1 abs()
acos()
asin()
atan()
ceil()
cos()
exp()
floor()
log()
max()
min()
pow()
random()
round()
sin()
sqrt()
tan 無
Property 說明
E
LN2
LN10
PI
SQRT1_2
SQRT2
SQRT1
Method 說明
abs()
acos()
asin()
atan()
ceil()
cos()
exp()
floor()
log()
max()
min()
pow()
random()
round()
sin()
sqrt()
tan()
可產生Math物件的HTML標籤
無。
說明
Math是JavaScript內建的數學運算物件。
有時要用到Math的運算method時，像是：
r = Math.log(3);
y = r*r*Math.PI;
需要打很多Math.*的指令，因為我們可以利用with的語法來使程式更簡潔、方便：
with(Math) {
r = log(3);
y = r*r*PI;
}
表示我們所用到的method或properties都是在(with) Math物件裡。其它物件也可以有相同的做法，不過在Math的物件上使用頻率會比較高，故特別提起。
範例
password
Property Method Event
E
index
length
name
vlinkColor
defaultValue
value blur()
focus()
select() 無
Property 說明
E
index
length
name
vlinkColor
defaultValue
value
Method 說明
blur()
focus()
select()
可產生password物件的HTML標籤
說明
表單裡文字輸入欄型態為password的物件，輸入的字元會以*號取代。
範例
radioButton
Property Method Event
checked
defaultchecked
name
value
index
length click() onClick
Property 說明
checked
defaultchecked
name
value
index
length
Method 說明
click()
可產生radioButton物件的HTML標籤
說明
表單的選用鈕物件。具單選功能，同一個群組(name)的選用鈕群只能有一個被選用。
範例
reset
Property Method Event
name
value click() onClick
Property 說明
name
value
Method 說明
click()
可產生reset物件的HTML標籤
說明
重置鈕，表單被型態為RESET的按鈕，也就是"清除"、"重新填寫"之類的按鈕。重置鈕會被該表單內所有的物件都重置到初始狀態。
範例
select
Property Method Event
defaultSelected
length
option
selectedIndex
text
value
default
Selected
index click()
blur()
focus() onBlur
onChange
onFocus
Property 說明
defaultSelected
length
option
selectedIndex
text
value
default
Selected
index
Method 說明
click()
blur()
focus()
可產生select物件的HTML標籤
說明
表單裡的選擇列或捲軸列。選擇列只能選擇一個項目，而捲軸列則可以選擇多個項目。
被選擇的項目存放於option屬性裡，多個項目的話一樣是被存成陣列，例如有一個order的select物件，被選擇的項目有3個，則第2個項目被存放於order.options[1]
。
範例
string
Property Method Event
length anchor()
big()
blink()
bold()
charAt()
fixed()
fontsize()
indexOf()
italics()
lastIndexOf()
link()
small()
strikesub()
substring()
sup()
toLowerCase()
toUpperCase() 無
Property 說明
length
Method 說明
anchor()
big()
blink()
bold()
charAt, ()
fixed()
fontsize()
indexOf()
italics()
lastIndexOf()
link()
small()
strikesub()
substring()
sup()
toLowerCase()
toUpperCase()
可產生string物件的HTML標籤
無。
說明
在JavaScript裡，只要我們用字串當變數、常數或屬性，就會產生一個字串物件，例如：
var Name = "Jollen";
Name就是一個字串物件。
範例
submit
Property Method Event
name
value click() onClick
Property 說明
name
value
Method 說明
click()
可產生submit物件的HTML標籤
說明
在表單被，型態為SUBMIT的按鈕物件。submit按鈕就是一般像是"送出"、"貼上"、"完成"之類的按鈕，告訴瀏灠器去執行action指定的動作，若沒有指定acion，則會執行reload這個動作，即重新開啟網頁。
範例
text
Property Method Event
defaultValue
name
value blur()
focus()
select() onBlur
onChange
onFocus
onSelect
Property 說明
defaultValue
name
value
Method 說明
blur()
focus()
select()
可產生text物件的HTML標籤
說明
表單裡的文字輸入欄，文字輸入欄可以讓我們輸入一行資料。
範例
textArea
Property Method Event
defaultValue
name
value blur()
focus()
select() onBlur
onChange
onFocus
onSelect
Property 說明
defaultValue
name
value
Method 說明
blur()
focus()
select()
可產生textArea物件的HTML標籤
說明
表單被的文字輸入方塊，文字輸入方塊可以讓我們輸入多行的資料，例如留言板的留言。
範例
window
Property Method Event
defaultStatus
frames
parent
self
status
top alert()
clearTimeout()
close()
confirm()
open()
prompt()
setTimeout() onLoad
onUnload
Property 說明
defaultStatus
frames
parent
self
status
top
Method 說明
alert()
clearTimeout()
close()
confirm()
open()
prompt()
setTimeout()
可產生window物件的HTML標籤
無。
說明
window物件是所有物件的根本，由window物件開始衍生出其它物件，例如document、frame等。
前面提過，多個frame被存放陣列，各個frame間無法互相存取，必須經由parent，但我們有另外一種做法，因為window物件是所有物件的根本，所以也可以像這樣來存取各個frame：
window.frames[n];
範例
navigator
Property Method Event
appCodeName
appName
appVersion
userAgent 無 無
Property 說明
appCodeName
appName
appVersion
userAgent
可產生navigator物件的HTML標籤
無。
說明
navigator物件是一個內建，而且獨立的物件，沒有衍生其它的物件，主要只是用來存放目前瀏灠器的相關資訊，例如版本資訊(appVersion屬性)。
範例
練習題
New Page 1
請選擇背景顏：
黑
白
紅
黃
綠
回 · 基礎JAVASCRIPT教學 ．01、JavaScript 簡介 這一篇文章封面
本文張貼者：校校鴿〔張貼時間：民國98年12月24日（星期四）21點53分〕
|
寫信給校校鴿
部落格首頁
學習的故鄉首頁
本站公告：〔您越需要我們，我們就越有創意〕
本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕
觀察應用學習點數 ：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕
〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」
〔為了讓我們有乾淨的學習環境，請勿任意在本站散播商業廣告與不合法文件或聯結〕：本站宣示