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

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

转载于:https://www.cnblogs.com/Renyi-Fan/p/8965733.html

javascript进阶教程第一章案例实战相关推荐

  1. javascript进阶教程第二章对象案例实战

    javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...

  2. javascript进阶课程--第一章--函数

    javascript进阶课程--第一章--函数 学习要点 了解内存管理 掌握全局函数的使用 知识点 基本类型和引用类型 基本类型值有:undefined,NUll,Boolean,Number和Str ...

  3. 乐行学院RabbitMQ学习教程 第一章 RabbitMQ介绍(可供技术选型时使用)

    乐行学院RabbitMQ学习教程 第一章 RabbitMQ介绍 RabbitMQ介绍 1.RabbitMQ技术简介 2.RabbitMQ其他扩展插件 2.1监控工具rabbitmq-managemen ...

  4. 北大青鸟c语言课后答案,北大青鸟C语言教程--第一章 C语言基础.ppt

    <北大青鸟C语言教程--第一章 C语言基础.ppt>由会员分享,可在线阅读,更多相关<北大青鸟C语言教程--第一章 C语言基础.ppt(20页珍藏版)>请在人人文库网上搜索. ...

  5. 乐行学院Redis5学习教程 第一章redis5的安装

    乐行学院Redis5学习教程 第一章redis5的安装 1.安装虚拟机 2.centeros下载 3.vmware安装centeros 4.vmware安装centeros设置IP 5.安装redis ...

  6. laravel教程 第一章安装laravel

    #laravel教程# ##第一章 安装laravel## ###前言 ### 有很多人,都在纠结于自己学什么框架,用什么框架.在这里我想告诉你,框架都是死的,但是人是活的,只要你明白的框架的基本原理 ...

  7. matlab里面atn是什么意思,matlab教程第一章

    <matlab教程第一章>由会员分享,可在线阅读,更多相关<matlab教程第一章(63页珍藏版)>请在人人文库网上搜索. 1.第1章 矩阵及其基本运算MATLAB,即&quo ...

  8. 计算机中的数制与编码教程,第一章计算机中的数据和编码教程.doc

    第一章计算机中的数据和编码教程 第一章 计算机中的数据和编码 1.1计算机中的数制 1.2计算机中数的表示 1.3计算机中的编码 1.1 计算机中的数制之进位计数制 进位制: 按照进位的方法进行计数的 ...

  9. excel工具栏隐藏了怎么办_Office2016基础教程第一章:认识Excel #excel #职场 #办公技巧...

    今日详讲Excel基础 教程 第一章:认识Excel 1. 版本兼容性 2. Excel2016的独特之处 3. 安装Excel2016 4. 启动Excel2016 5. 退出Excel2016 6 ...

最新文章

  1. 2021年吴文俊人工智能科学技术奖获奖名单公示！潘云鹤院士获最高成就奖
  2. PX Deq: Execution Msg等待事件
  3. 原创 深度 技术:WatchStor焦点周刊创刊号
  4. SpringMVC源码剖析（三）- DispatcherServlet的初始化流程
  5. Spring Boot 内置Tomcat——getServletContext().getRealPath()为临时目录问题解决方案
  6. guns java_guns——一个简便的后台管理系统
  7. 华为8月9日鸿蒙红包,华为正是宣布，“鸿蒙”系统8月9日上线，来看看有没有你的手机...
  8. ios Image裁剪成圆形的方法
  9. python 文件函数_python文件操作及函数学习
  10. phpstudy免费安全检测服务_武汉一高校15名大学生暑期进行免费甲醛检测服务? 服务500个家庭...
  11. 极大似然估计法（Maximum likelihood estimation, MLE）
  12. Holt-Winters模型分析及时间序列预测
  13. 国内主流云服务器价格概览
  14. mysql别名_MySQL设置别名
  15. 两年数据对比柱形图_举个栗子！Tableau 技巧（152）：横向对比堆叠柱形图的各部分占比...
  16. html表单验证方法,简述HTML交互式表单验证方法
  17. 聂文涛桑黄子技术走过的文化之路
  18. erdas裁剪影像_在arcgis、ERDAS下如何进行影像图裁剪
  19. Java ee 网络层重点协议IP协议
  20. 关于多线程MT和MD的区别。

热门文章

  1. linux添加美式键盘,win8\win server 2012添加【中文--美式键盘】
  2. blender 简单 uv 贴图
  3. javascript 变量监听器
  4. 【opus源码分析】【互相关函数源码分析】xcorr_kernal_c
  5. C++报错解决：what(): basic_string::_S_construct null not valid
  6. Linux: debian,ubuntu命令行安装chrome/chromium
  7. java 反射 getclass_java 反射getClass .class 的使用方法示例
  8. matlab自动加坐标,matlab自动驾驶系统-坐标系
  9. php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
  10. SpringBoot2.x 官方推荐缓存框架-Caffeine高性能设计剖析