javascript进阶教程第一章案例实战

2024-08-28 06:21:38

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

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

最新文章

热门文章