Re: [問題] JavaScript存取表單資料

作者: mrbigmouth (大嘴先生)   2014-03-24 10:09:51
※ 引述《tingmeow (喵東喵西)》之銘言:
: 看O'REILLY的書 JavaScript深入淺出有點看不懂
: 在這一頁 p.293
: 存取表單資料
: 為了取用輸入表單的資料,首先需要區分表單中每個欄位。這點可利用HTML
: 碼的id或name屬性(或兩者並用)處理。
: <input id="zipcode" name="zipcode" type="text" size="5">
: 表單欄位具有兩種識別方式的原因,均與取用表單單位的途徑有關
: 第一種途徑使用getElementById()--可取用網頁上任何組件的函式。
: 這個方式沒問題,但還有更簡單、更針對表單設計的途徑。
: 每個表單欄位都有一個form物件,可被傳給任何驗證表單資料的函式。
: <input id="zipcode" name="zipcode" type="text" size="5"
: onclick="showIt(this.form)">
直接在html tag上寫onclick、onmousedown等標籤事件時
瀏覽器會將""內的javascript程式以類似eval的方式執行
但此scope內的this不再是指向global物件(window)
而是該tag所代表的元素本身
以上面的語法為例,當使用者點擊該input的時候
相當於執行下面的程式碼
<script>
showIt(document.getElementById('zipcode').form);
</script>
而幾乎所有表單元素,都具有form屬性,指向其屬於的form元素
因此上面的程式碼可以翻譯成:
 [這裡有一個input元素]:
    點擊我的時候,請執行global物件底下的shotIt函式,
    並將我的上層form元素當成函數參數傳過去。
: form物件勵害的地方,在於它也是個陣列,負責儲存表單中所有欄位
: 但它的陣列元素並非利用數值索引儲存;而是使用欄位獨有、於name
: 屬性設定的識別字。假設form物件以引數theForm為名,傳給某個函式,
: 則輸入郵遞區號欄位(ZIP code)的值將以下列方式存取:
: function showIt(theForm) {
: alert(theForm["zipcode"].value);
: }
上面的程式碼則可以翻譯成:
 [我在這裡(global)註冊一個名叫shotIt的function(函式)]:
   我假設有人叫我的時候會順便丟給我一個名叫theForm的變數,
   而且我假設theForm這個變數會是一個物件,
   (如果你沒丟給我theForm或你丟給我的theForm不是物件我就爆炸給你看)
   每次有人叫我的時候,我就會去讀theForm這個變數的zipcode屬性
   我再次假設theForm的zipcode屬性也是一個物件,
   (如果theForm的zipcode屬性裡沒東西或不是一個物件我也爆炸給你看)
   然後去讀theForm的zipcode的value屬性,再alert出來
嗯,翻譯完畢,
如果你看得懂的話,看到上面有這麼多會爆炸的情況,
就該知道這段程式碼不是一個好程式碼 XD
等你對javascript有基本認知之後,
請去試著瞭解Unobtrusive JavaScript,
不然一但開始實作大型專案,就得小心程式天天爆炸給你看了 XD
http://kewang.pixnet.net/blog/post/24177235
:
作者: GoalBased (Artificail Intelligence)   2014-03-24 18:35:00
推推 Unobtrusive JavaScript可是我想問一下 這樣會有效率上的差異嗎?
作者: mrbigmouth (大嘴先生)   2014-03-25 11:25:00
如果你說的是performance,那應該沒有太大差異主要是為了coding上的debug/變數佔用問題等
作者: tingmeow (雪爐喵)   2014-03-26 14:44:00
感激感激,雖然乍看下還看不太懂,慢慢消化中,謝謝指點

Links booklink

Contact Us: admin [ a t ] ucptt.com