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

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

javascript进阶教程第一章案例实战的更多相关文章

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

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

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

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

  3. javascript进阶教程第三章--匿名和闭包--案例实战

    javascript进阶教程第三章--匿名和闭包--案例实战 一.学习任务 通过几个小练习回顾学过的知识点 二.实例 练习1: 实例描述:打开页面后规定时间内弹出一个新窗口,新窗口指定时间后自动关闭. ...

  4. 《进击吧!Blazor!》系列入门教程 第一章 8.部署

    <进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...

  5. 村田噪声抑制基础教程-第一章 需要EMI静噪滤波器的原因

    1-1. 简介 EMI静噪滤波器 (EMIFIL®) 是为电子设备提供电磁噪声抑制的电子元件,配合屏蔽罩和其他保护装置一起使用.这种滤波器仅从通过连线传导的电流中提取并移除引起电磁噪声的元件.第1章说 ...

  6. [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍

    注:为了看上去比较清晰这里只转载了中文 原地址:  [Learn Android Studio 汉化教程]第一章 : Android Studio 介绍 本章将引导您完成安装和设置开发环境,然后你就可 ...

  7. javascript进阶课程--第二章--对象

    javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...

  8. JavaScript笔记(第一章,第二章)

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

  9. [ABP教程]第一章 创建服务端

    Web应用程序开发教程 - 第一章: 创建服务端 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发 ...

随机推荐

  1. 安装Git和图形化软件[SouceTree跳过首次登陆]

    安装Git和图形化软件[SouceTree跳过首次登陆] 标签(空格分隔): 版本控制 安装GIT[客户端]: 下载:[https://git-scm.com/downloads/] 安装:[next ...

  2. 如何设定editplus为txt默认打开程序?

    如何设定editplus为txt默认打开程序? 如图操作即可:

  3. h5调用手机前后摄像头,拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

  4. Bayes++ Library入门学习之熟悉class-Importance_resampler

    接下来,需要介绍的是重要性重采样类Bayesian_filter::Improtance_resampler.该类实现了两种重采样方法[1][2],和其子类的继承关系图如下: 其中Standard_r ...

  5. php 自带加密函数 mcrypt_encrypt

    <?php /** * AES128加解密类 * @author dy * */ class Aes{ //密钥 private $_secrect_key; public function _ ...

  6. centos6.9安装virtualenv并配置python2.7环境

    一. 安装python2.7 解压文件 tar -xvf Python-2.7.14.tar 进入源码包目录 cd Python-2.7.14 开始构建之前指定安装的目录 默认会被安装进 /usr/l ...

  7. caioj 1112 树形动态规划(TreeDP)7:战略游戏

    这道题和上一道题非常相似 这道题是看边,上一道是看点. 但是状态定义不同 看边的话没有不放不安全这种状态 因为当前结点的父亲无法让这颗子树没有看到的边看到 所以这种状态不存在 而上一道题存在不放不安全 ...

  8. Gradle编译spring3.x报错找不到itextpdf4.2.2解决方案

    google搜到一篇文章:http://www.bdtool.net/blog_356.html 试了文章里的两个方法,方法一不行,方法二有点搞头,但是还有些错.试着试着,突然成功了~ 我是这么做的 ...

  9. ArcGIS api for javascript——加入动态地图

    描述 这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图.这样的地图没有切片的cache并被调用一个动态地图服务图层.ArcGISDynamicMapServiceLayer表示ArcGIS ...

  10. SSM框架之中如何进行文件的上传下载

    SSM框架的整合请看我之前的博客:http://www.cnblogs.com/1314wamm/p/6834266.html 现在我们先看如何编写文件的上传下载:你先看你的pom.xml中是否有文件 ...