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知识解决实际问题的能力。

同时也但愿你们温故而知新，只有多练习才可以真正掌握。