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

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

 

一、學習任務

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

 

二、例項

練習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知識解決實際問題的能力。

同時也希望大家溫故而知新，只有多練習才能夠真正掌握。