javascript進階教程第一章案例實戰

javascript進階教程第一章案例實戰

 

1、學習任務

• 經過幾個案例練習回顧學過的知識
• 經過練習積累JS的使用技巧

 

2、實例

練習1：刪除確認提示框

• 實例描述：

  防止用戶當心單擊了「刪除」按鈕，在用戶單擊「刪除」按鈕後，給出一個提示，讓用戶確認這次操做是否正確。

• 涉及到的知識點：
  1. confirm():用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框。

     若是用戶點擊肯定按鈕，則 confirm() 返回 true。若是點擊取消按鈕，則 confirm() 返回 false。

  2. 包含一個if判斷語句的函數

 

練習2：動態建立元素

• 實例描述：

  經過JS的DOM對象，實現元素的動態建立。

• 涉及到的知識點：
  1. createElement() 經過指定名稱建立一個元素，是DOM對象建立元素的方法，建立完元素後，指定元素的類型、值和方法，最後使用「appendChild」方法，將元素添加到body中。
  2. appendChild() 方法向節點添加最後一個子節點。
  3. 及時解除再也不使用的變量引用,即將其賦值爲 null。

 

練習3：動態添加事件

• 實例描述：

  前一個案例講了如何在網頁中動態添加元素，有時候咱們須要添加事件。本例學習如何動態的爲元素添加事件。

• 案例要點：

  本例的重點是如何爲元素綁定事件。綁定元素時須要知道此元素的惟一標識（ID或Name）。

 

練習4：防止按鈕連擊

• 實例描述：

  當頁面提交的數據特別多時，頁面會反應比較遲鈍，此時若是用戶等不及而連續單擊按鈕，致使數據重複提交。本案例就是爲了防止數據重複提交。

• 案例要點：

  本例的重點是如何判斷頁面的狀態。

  readyState 屬性返回當前文檔的狀態,該屬性返回如下值:

  1. uninitialized - 還未開始載入
  2. loading - 載入中
  3. interactive - 已加載，文檔與用戶能夠開始交互
  4. complete - 載入完成

 

練習5：會員註冊頁面設計

• 實例描述：

  本例是一個綜合性的練習，除了們正在學習的JS知識外，還用到了HTML的表格，表單等相關知識。

• 案例要點：

  綜合運用學過的知識，將HTML於JS相結合。

舒適提示

注：這幾個案例自己都比較簡單，但願你們經過這幾個小案例的練習，加強運用學過的JS知識解決實際問題的能力。

同時也但願你們溫故而知新，只有多練習纔可以真正掌握。