「什麼是 onclick？」 那是劇本許多事件指令的其中一個。 此說法只是我自己的理解， 各位也可以自己上網搜尋事件處理這個關鍵詞， 我想你一定會看到更多更好的表達方式， 然後你也可以用自己的學習概念來解答， 炳且也請無論如何要多多過來指正指正， 讓我能夠把這些教學文件寫得更好更精采。 為了與使用者達到互動關係， 電腦需要有能力接收使用者在作業系統上所進行的各種動作， 然後根據這些動作進行它們要做的事情。 人類在作業系統上所做的各種動作就叫做「事件」， 例如文字輸入、滑鼠移動、敲擊鍵盤， 乃至開啟與關閉頁面等等； 而電腦在收到這些事件後所要做的事情叫做「事件處理」， 例如播放聲音影像、開啟資料、網路連線等等。 總而言之， 事件的產生就是在對電腦下達命令， 電腦收到命令之後它就會根據程序的設計開始去工作。 請想想看我們瀏覽網頁時常會做哪些動作？ 而那些動作會讓網頁產生什麼變化？ 例如咱視障者使用九宮格加號或減號尋找網頁裏的某個超連結， 找到了迴車一下就開啟了新的網頁。 又或者在功能表選擇「最小化」， 按下迴車鍵就能把網頁縮小成一個圖示。 這些在網頁上使用鍵盤或滑鼠進行的動作都屬於事件， 而事件發生後的網頁特效則是利用劇本語言來呈現的。 也就是說， 不管某個網頁的事件將如何產生， 事件發生後會產生什麼效果， 都是寫程式的時候預先在網頁伺服器上被設計好的。 當用戶要求瀏覽你伺服器裡的網頁時， 這些程序就會被傳送到用戶端電腦， 當他們使用網頁的過程中， 在某個元件觸發了某個事件， 便會啟動這些程序， 把我們想要的效果呈現在用戶端電腦螢幕或者任何輸出的設備上。 這好比說獵人在森林裡某處預先埋好陷阱等待獵物上鉤， 有一隻倒楣的動物不小心踏入陷阱， 「事件發生了」， 結果就是觸動機關， 「捕到獵物了」， 唉！可憐的鴿子！ 網網就是這樣在比賽途中遭到陷害的呀！ 事件種類很多， 為了學習表單驗證， 我們就先以 onclick 這個事件為例， 說明劇本如何根據使用者瀏覽網頁時所發生的事件 在用戶端電腦瀏覽器上產生效果。 <p>onclick 是「點開」的意思。 用戶只要在某個有 onclick 的按鈕或超連結點一下， 就會啟動 onclick 等於符之後的程序了。 讓我們先來玩玩這個超連結： 當你點開這個超連結的時候，
瀏覽器會先彈出一個小視窗，
裡面是網頁設計者要給你看的信息：
「愛你的小麻雀」，
等你把這個信息窗口關閉才會開啟此連結。
其實說穿了，
這只是一個單純的超連結語法，
只因為我在裡面加入了 onclick 屬性，
請仔細閱讀下面的代碼內容： <a onclick="alert('愛你的小麻雀')" href="http://crazy.molerat.net"> 這裡是學習的故鄉</a> (=) 等於號之後的設定值要特別注意， 雖然你也可以不用引號括住， 阿金我就很懶惰用引號， 但是如果內容稍長， 且含有特殊字元， 或者空白字元等等， 那就非有引號不可， 如果不確定什麼時候可以省略引號， 保險起見你還是養成良好習慣吧， 凡是標籤屬性等於的後面， 通通用引號包住就萬無一失。 此處的 onclick，
表示當我們在這裡按滑鼠左鍵或者迴車的時候，
就會啟動等號之後的指令， 欸欸！裝笑為是嗎？ 明明按下小程故事的超連結， 怎麼只有彈出一個信息視窗啊？ 別急別急， 請看它的原始碼內容就知道了： <a onclick="alert('哈哈！被騙了吧！');return false" href="http://crazy.molerat.net/learner/cpuroom/programmer/index.php#here"> 歡迎進入小程故事</a> 這個連結的 onclick 有兩個指令， 如果你把 alert() 指令拿掉， 只剩下「onclick="return false"」， 那就是一個假的超連結了， "return false" 意思是「不用做其他的工作了」。 這下子你該明白了吧？ 假的超連結就是這樣子被做出來的喔！ 如果把 "return false" 放到某個表單的文字輸入欄標籤裡頭， 就可以解決在文字輸入欄按迴車就把資料送出去的窘境了。 這寫法很簡單， 同樣加入個 onclick 事件處理就行， 例如： <input type=text onclick="return false"> 你應該已經想到， "return false" 就一定要用雙引號包住了， 因為它有空白字元， 用單引號也行， 看你要用單引號來包住雙引號， 或者雙引號包單引號。 onclick 是一個挺搞怪又好玩的東西， 許多網頁詐騙集團為了引誘你上鉤， 往往在超連結做手腳， 利用 onclick 執行另開新視窗的程序， 表面上那是個開啟某個網頁的連結， 但當你點入的時候卻會在新視窗開啟另一個網頁， 而相信人性本善的你可能卻還矇然不知， 一步一步地踏入它位你設計好的陷阱裡頭， 這就是最簡單的網頁釣魚程式設計。 許多網頁為了增加廣告版面， 也會在開啟頁面時另外開小視窗來呈現廣告服務， 以增加廣告收益， 真是厲害， 希望我們日後也能學會這些技巧， 使你的網頁廣告收入能大幅提升， 到時可別忘了分給阿金一點利潤嘿！ 在這篇文章裡我們提到， 什麼叫做事件及它觸發的事件處理， 如何用 onclick 來製作簡單的網頁特效， 還順便介紹了 "return false"這個指令。 請期待下篇文章更多的討論。 回 · 用劇本寫程式 這一篇文章封面 |
| 本站公告：〔您越需要我們，我們就越有創意〕 | 本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕 |
| 觀察應用學習點數 ：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕 | 〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」 |