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

同时也希望大家温故而知新，只有多练习才能够真正掌握。