第一章JavaScript 基本介绍.pptVIP

* * * * * * * * 1-4：基本表單 本小節介紹表單(form)各種元件的寫法以及使用方法。 * /50 form 基本結構 form input… … /form 說明 表單是由 form 標籤所形成，可包含數個表單元件，而這些元件大部分是使用 input 標籤。 input標籤可以不寫在form標籤裡面，但是這樣會失去傳送表單的功能(後面ASP的章節會提到)。 * /50 範例1-13 主題：基本表單範例 連結：form01.htm 說明 form標籤中，action代表表單傳送的目的位址（也就是處理表單資訊的伺服器程式），method 則代表傳送方法，encType是資料編碼格式。 input標籤中，name是標籤的變數名稱，在之後操作javascript的時候會更常用到。 type是表單元件的型態，如果沒有指定預設是單行文字(text)，剩下的之後會列表說明。 * /50 範例1-14(1) 主題：將文字欄位的內容送到瀏覽器狀態列 連結：formText2status01.htm 程式碼重點input name=theString value=送到狀態列的預設訊息input type=button value=送到狀態列 onClick=window.status=document.theForm.theString.value 說明 onClick中，document 是此文件，theForm 是我們定義的表單名稱，theString 也是我們定義的文字欄位名稱，而 value 則是文字欄位內建的一個性質名稱，因此 document.theForm.theString.value 就是指文字欄位中的文字。 * /50 範例1-14(1) 說明 將此文字送到狀態列：直接設定 window.status 即可。 在嘗試本範例時，你必須先顯示瀏覽器的狀態列 IE 10: 可經由「Alt/檢視/工具列/狀態列」來開啟或關閉瀏覽器的狀態列 Chrome: How??? （請同學們幫忙找答案！） 網頁內如果有多個表單，我們可以分別使用「document.forms[n]」來表示，其中 n = 0, 1, 2 等等。通常一個網頁只有一個表單，因此我們不定義此表單的名稱，也可以直接使用 document.forms[0] 來代表此表單。 * /50 範例1-15 主題：使用 onChange 事件將文字欄位送到狀態列 連結： formText2status02.htm 程式碼重點input type=text value=送到狀態列的預設訊息 onChange=window.status=this.value 說明 文字轉換的動作定義於文字欄位的 onChange 屬性，可以省掉按鈕的使用（此事件只有在文字欄位失去滑鼠焦點時才會起作用）。 我們可以使用 this 來代表目前元件（即 this 所在之元件），使網頁更為簡潔。 在上述範例中，如果希望在文字欄位填入文字時，狀態列能夠立即改變，可將 onChange 改成 onKeyUp 即可。 * /50 範例1-16 主題：使用 this.form傳送兩個文字欄位的訊息 連結： formTextMasterSlave01.htm 程式碼重點 input type=button value====== onClick=this.form.text2.value=this.form.text1.value 說明 this.form 就是代表按鈕所在的表單 一般而言，以「a.b」的方式來指到一個物件，例如 form1.input1 等，是由大（表單）到小（控制項）的方式，但唯一的例外，就是 this.form，這是由小（控制項）到大（表單）的方式。 * /50 範例1-17 主題：使用 this.form，傳送兩個核記欄位的訊息 連結1： formCheckboxMasterSlave01.htm 連結2： formCheckboxMasterSlave02.htm 程式碼重點 input type=button value====== onClick=this.form.box2.checked=this.form.box1.checked input type=button value====== onClick=document.myForm.box2.checked=document.myForm.box1.checked 說明 checked 的值，true 代表勾選，false 代表不勾選。 如果不是用 this.form ，程式碼比較繁雜(連結2)。 * /50 範例1-18 主題：單選的下拉式選單