课程 20480-C: Programming in HTML5 with JavaScript and CSS3

本课程介绍 HTML5、CSS3和JavaScript。本课程帮助学生获得基本的 HTML5 / CSS3 / JavaScript 编程技能。本课程是 Web 应用程序和 Windows Store 应用程序培训路径的切入点。该课程的重点是使用 HTML5 / CSS3 / JavaScript 来实现编程逻辑,定义和使用变量,执行循环和分支,开发用户界面,捕获和验证用户输入,存储数据以及创建结构良好的应用程序。选择本课程中的实验方案来支持和演示各种应用方案的结构。它们旨在关注用于建立 HTML5 软件应用程序的原理和编码组件/结构。本课程使用 Windows 10 上运行的 Visual Studio 2017。

受众概况

本课程适用于具有 6-12 个月编程经验并且对使用 HTML5 和 JavaScript 和 CSS3 开发应用程序(Windows 10 的 Windows Store 应用程序或 Web 应用程序)感兴趣的专业开发人员。

工作角色: 开发人员

获得的技能

  • 说明如何使用 Visual Studio 2017 创建和运行 Web 应用程序。
  • 描述 HTML5 的新功能,并创建 HTML5 页面并设置其样式。
  • 使用 JavaScript 将交互性添加到 HTML5 页面。

先决条件

  • 1-3 个月创建 Web 应用程序的经验,包括编写简单的 JavaScript 代码
  • 1 个月创建 Windows 客户端应用程序的经验
  • 1 个月使用 Visual Studio 2017 的经验

课程大纲

模块 1: HTML 和 CSS 概述

大多数现代 Web 应用程序都建立在 HTML 页面的基础上,HTML 页面描述了如下内容:用户阅读和交互的内容,样式表单使内容在视觉上令人愉悦,JavaScript 代码则提供了用户与页面、页面与服务器之间的交互性。Web 浏览器使用 HTML 标记和样式表来呈现此内容,并运行 JavaScript 代码以实现应用程序的行为。本模块回顾了 HTML 和 CSS 的基础知识,并介绍了本课程用于创建 HTML 页面和样式表的工具。

课程

  • HTML 概述
  • CSS 概述
  • 使用 Visual Studio 2017 创建 Web 应用程序

实验: 探索 Contoso Conference 应用程序

  • 探索 Contoso Conference 应用程序
  • 检查和修改 Contoso Conference 应用程序

学完本模块后,学生将能够:

  • 说明如何使用 HTML 元素和属性来布置网页。
  • 说明如何使用 CSS 将基本样式应用于网页。
  • 描述 Microsoft Visual Studio 提供的用于构建 Web 应用程序的工具。

模块 2: 创建 HTML 页面并对其进行样式设置

构成所有 Web 应用程序 HTML、CSS 和 JavaScript 基础的技术已经使用了很多年,但是 Web 应用程序的目的和复杂性已经发生了很大变化。HTML5 是这 10 年来的第一个主要的 HTML 版本,它为传统的 Web 应用程序、在手持式移动设备上以及 Windows 10 平台上运行的应用程序提供了一种非常合适的呈现内容的方法。本模块介绍 HTML5,描述其新功能,演示如何使用 HTML5 中的新功能来呈现内容以及如何使用 CSS 设置内容样式。

课程

  • 创建 HTML5 页面
  • 设置 HTML5 页面的样式

实验: 创建 HTML5 页面并设置其样式

  • 创建 HTML5 页面
  • 设置 HTML 页面的样式

学完本模块后,学生将能够:

  • 描述 HTML5 的目的和新功能,并说明如何使用新的 HTML5 元素来布置网页。
  • 说明如何使用 CSS 设置 web 网页布局、文本和背景的样式。

模块 3: JavaScript 简介

HTML 和 CSS 提供了 web 网页的结构、语义和呈现方面的信息。但是,这些技术没有描述用户如何使用浏览器与页面进行交互。为了实现此功能,所有现代浏览器都包括一个 JavaScript 引擎,以支持在页面中使用脚本。他们还实现了文文件对像模型(DOM),这是一种 W3C 标准,用于定义浏览器应如何在内存中反映页面,以使脚本引擎能够访问和更改该页面的内容。本模块介绍 JavaScript 编程和 DOM。

课程

  • JavaScript 概述
  • 文档对像模型简介

实验: 使用 JavaScript 显示数据和处理事件。

  • 以编程方式显示数据
  • 处理事件

学完本模块后,学生将能够:

  • 描述基本的 JavaScript 语法。
  • 编写使用 DOM 更改和检索 web 网页信息的 JavaScript 代码。

模块 4: 创建窗体以收集和验证用户输入

Web 应用程序经常需要收集用户输入以执行其任务。Web 网页在有关用户输入的内容方面需要简洁明了,以尽可能减少对用户提供的信息产生令人沮丧的误解。此外,必须验证所有输入以确保其符合应用程序的要求。在本模块中,您将学习如何使用 HTML5 中提供的新输入类型来定义输入窗体。您还将看到如何使用 HTML5 属性来验证数据。最后,您将学习如何使用 JavaScript 代码执行扩展的输入验证,以及如何在用户输入无效或与应用程序期望不符时向用户提供反馈。

课程

  • 创建 HTML5 窗体
  • 使用 HTML5 属性验证用户输入
  • 使用 JavaScript 验证用户输入

实验: 创建窗体并验证用户输入

  • 使用 HTML5 属性创建窗体并验证用户输入
  • 使用 JavaScript 验证用户输入

学完本模块后,学生将能够:

  • 使用 HTML5 创建输入窗体。
  • 使用 HTML5 窗体属性来验证数据。
  • 编写 JavaScript 代码以执行无法使用 HTML5 属性轻松实现的验证任务。

模块 5: 与远程服务器通信

许多 Web 应用程序需要使用远程站点保存的数据。在某些情况下,您可以简单地通过从指定的 URL 下载来访问此数据,但在其他情况下,数据由远程站点封装并可以通过 Web 服务进行访问。在本模块中,您将学习如何使用 JavaScript 代码访问 Web 服务以及如何将远程数据合并到 Web 应用程序中。您将看到实现这一点所需要的两种技术: XMLHttpRequest 对象,它充当远程 web 网站 HTTP 请求的编程包装;以及 Fetch API,它简化了发送请求和接收数据中涉及的许多任务。因为 Fetch API 和 XMLHttpRequest 对像是异步 API,所以您将首先了解如何使用 Promise 对象、箭头函数和新的 async / await 语法处理异步任务,这些工具使您可以像处理同步请求一样处理异步请求。

课程

  • JavaScript 中的异步编程
  • 使用 XMLHttpRequest 对象发送和接收数据
  • 使用 Fetch API 发送和接收数据

实验: 与远程数据源进行通信

  • 检索数据
  • 序列化和传输数据
  • 使用 jQuery ajax 方法重构代码

学完本模块后,学生将能够:

  • 使用新的异步编程技术处理异步 JavaScript 任务。
  • 使用 XMLHttpRequest 对象将数据发送到 Web 服务并从 Web 服务接收数据。
  • 使用 Fetch API 将数据发送到 Web 服务并从 Web 服务接收数据。

模块 6: 使用 CSS3 对 HTML5 进行样式设置

对 web 网页显示的内容进行样式设置是使应用程序具有吸引力且易于使用的重要方面。CSS 是 web 应用程序用于实现样式设置的主要机制,并且 CSS3 中添加的功能支持现代浏览器中的许多新功能。在 CSS1 和 CSS2.1 是单个文档的情况下,万维网联合会选择将 CSS3 编写为一组模块,每个模块专注于内容呈现的单个方面,例如颜色,文本,框模型和动画。这允许规范及其实施可以增量化发展。每个规范定义 CSS1 和 CSS2 中已经存在的属性和值,以及新的属性和值。在本模块中,您将检查在其中几个模块中定义的属性和值,在 CSS3 中定义的新选择程序,以及使用伪类和伪元素来完善这些选择。

课程

  • 使用 CSS3 设置文字样式
  • 样式块元素
  • 伪类和伪元素
  • 使用 CSS3 增强图形效果

实验: 使用 CSS3 设置文本和块元素的样式

  • 设置导航栏的样式
  • 设置寄存器链接的样式
  • 设置关于页面的样式

学完本模块后,学生将能够:

  • 使用 CSS3 的新功能来设置文本元素的样式。
  • 使用 CSS3 的新功能来设置块元素的样式。
  • 使用 CSS3 选择程序、伪类和伪元素来完善元素的样式设置。
  • 通过使用 CSS3 图形效果增强页面效果。

模块 7: 使用 JavaScript 创建对象和方法

代码重用和易于维护是编写结构良好的应用程序的主要目标。如果可以实现这些目标,则将减少与编写和维护代码相关的成本。本模块描述如何通过使用语言功能(例如名称空间,对象,封装和继承)编写结构良好的 JavaScript 代码。如果您具有使用 Java 或 C# 等语言的经验,这些概念可能看起来会很熟悉,但是 JavaScript 方法却大不相同,如果要编写可维护的代码,则必须理解许多细微之处。

课程

  • 编写结构良好的 JavaScript 代码
  • 创建自定义对象
  • 延伸对象

实验: 完善代码的可维护性和可扩展性

  • 对象继承
  • 重构 JavaScript 代码以使用对象

学完本模块后,学生将能够:

  • 编写结构良好的 JavaScript 代码。
  • 使用 JavaScript 代码创建自定义对象。
  • 通过使用 JavaScript 习惯用法实现面向对象的技术。

模块 8: 使用 HTML5 API 创建交互式页面

交互性是现代 Web 应用程序的关键方面,使您能够构建引人注目的网站,这些网站可以快速响应用户的操作,并使自己适应用户的位置。该模块描述如何创建可访问本地文件系统的交互式 HTML5 Web 应用程序,使用户能够将数据拖放到 Web 页面中的元素上、播放多媒体文件以及获取地理位置信息。

课程

  • 与文件互动
  • 合并多媒体
  • 对浏览器的位置和上下文做出反应
  • 调试和分析 Web 应用程序

实验: 使用 HTML5 API 创建交互式页面

  • 拖放图像
  • 合并视频
  • 使用地理位置 API 报告用户的当前位置

学完本模块后,学生将能够:

  • 访问本地文件系统,并向 web 网页添加拖放支持。
  • 无需插件即可播放 web 网页中的视频和音频文件。获取有关用户当前位置的信息。
  • 使用 Microsoft Edge 中的 F12 开发人员工具调试和分析 Web 应用程序。

模块 9: 向 Web 应用程序添加脱机支持

Web 应用程序依赖于能够连接到网络以获取 web 网页和数据的能力。但是,在某些环境中,网络连接可能是间断的。在这些情况下,使用用户设备上缓存的数据使应用程序继续运行可能会很有用。HTML5 提供了新的客户端存储选项供您选择,包括会话存储和本地存储,以及一种称为 Application Cache 的资源缓存机制。在本模块中,您将学习如何使用这些技术来创建强健的 Web 应用程序,即使网络连接不可用,Web 应用程序也可以继续运行。

课程

  • 本地读写数据
  • 使用 Application Cache 添加脱机支持

实验: 向 Web 应用程序添加脱机支持

  • 使用 Application Cache API 缓存脱机数据
  • 使用本地存储 API 保留用户数据

学完本模块后,学生将能够:

  • 将数据保存在本地用户设备上,然后从 Web 应用程序访问此数据。
  • 使用 Application Cache 将 Web 应用程序配置为支持脱机操作。

模块 10: 实现自适应用户界面

Web 网络最持久的功能之一就是它的临时性。键盘和鼠目标垄断第一次受到挑战,这意味着质疑用户界面的设计方式。您可以在带有大型高分辨率显示器、鼠标和键盘的计算器上开发 Web 应用程序,但其他用户则可以在没有鼠目标情况下在智能手机或平板计算机或者使用带有不同的分辨率的显示器上查看您的应用程序并与之交互。用户可能还需要打印应用程序的页面。在本模块中,您将学习如何建立一个网站,以使其页面的布局和功能适应查看网站的设备的功能和外形尺寸。您将看到如何检测用于查看页面的设备的类型,并学习如何布置可有效针对特定设备的内容的策略。

课程

  • 支持多种尺寸
  • 创建自适应用户界面

实验: 实现自适应用户界面

  • 创建适合打印的样式表单
  • 调整页面布局以适合不同的外形尺寸

学完本模块后,学生将能够:

  • 描述在网站中对不同外形尺寸的要求。
  • 创建可调整其布局以匹配显示设备的外形尺寸的 web 网页。

模块 11: 创建高级图形

高分辨率的交互式图形是大多数现代应用程序的关键部分。图形可以通过为内容提供视觉效果来帮助增强用户的体验,从而使网站更具吸引力并且更易于使用。交互性使网站中的图形元素能够适应并响应用户的输入或对环境的更改,并且是保持用户的注意力及其对内容的兴趣的另一个重要元素。

本模块介绍如何使用可缩放矢量图形(SVG)和 Microsoft Canvas API 在 HTML5 中创建高级图形。您将学习如何使用与 SVG 相关的元素,以及如何在 web 网页上显示图形内容。您还将学习如何通过使用键盘事件和鼠标事件等事件使用户与 SVG 元素进行交互。

Canvas API 与 SVG 有所不同。Canvas API 提供了一个元素和一组 JavaScript 函数,您可以调用这些元素和函数在画布表面上绘制图形。您将学习如何使用 Canvas API,并找出何时更适合使用 Canvas 或 SVG。

课程

  • 使用 SVG 创建交互式图形
  • 使用 Canvas API 绘制图形

实验: 创建高级图形

  • 使用 SVG 创建交互式场馆地图
  • 使用 Canvas API 创建演讲者徽章

学完本模块后,学生将能够:

  • 使用 SVG 创建交互式图形内容。
  • 使用 Canvas API 以编程方式生成图形内容。

模块 12: 对用户界面进行动画处理

动画是保持用户对网站的兴趣的关键元素。精心实施的动画可以改善 web 网页的可用性,并提供有关用户操作的有用视觉反馈。

本模块描述如何使用 CSS 动画增强 web 网页效果。您将学习如何将过渡应用于属性值。过渡使您可以指定属性更改的时间。例如,您可以指定当鼠标指针悬停在某个元素上时,元素应在五秒钟内更改其宽度和高度。接下来,您将学习如何将 2D 和 3D 转换应用于元素。转换使您能够缩放、平移、旋转和倾斜元素。您还可以将过渡应用于变换,以便在指定的动画周期内逐渐应用变换。

在本模块的最后,您将学习如何将关键帧动画应用于元素。关键帧动画使您可以在动画过程中的特定时刻定义一组属性值。例如,可以在动画周期的0%,33%,66%和100%处指定元素的颜色和位置。

课程

  • 应用 CSS 过渡
  • 转换元素
  • 应用 CSS 关键帧动画

实验: 动画处理用户界面

  • 应用 CSS 过渡
  • 应用关键帧动画

学完本模块后,学生将能够:

  • 应用过渡以将属性值设置为 HTML 元素的动画。
  • 将 2D 和 3D 转换应用于 HTML 元素。
  • 将关键帧动画应用于 HTML 元素。

模块 13: 使用 Web 套接字实现实时通信

Web 网页通过提交 HTTP 请求来按需从 Web 服务器请求数据。该模型是构建交互式应用程序的理想选择,该应用程序的功能由用户的操作来驱动。但是,在需要显示不断变化的信息的应用程序中,此机制不太适合。例如,如果金融股票页面显示的甚至只是几分钟前的价格,那么它就一文不值,并且您不能指望用户不断刷新浏览器中显示的页面。这时,Web 套接字就非常有用。Web Sockets API 提供了一种用于在 Web 服务器和浏览器之间实现实时双向通信的机制。

本模块介绍 Web 套接字,描述它们的工作方式,并说明如何创建 web 套接字连接,该连接可用于在 web 网页和 web 服务器之间实时传输数据。

课程

  • Web 套接字导论
  • 使用 WebSocket API

实验: 使用 Web 套接字执行实时通信

  • 从 Web 套接字接收消息
  • 将消息发送到 Web 套接字
  • 处理不同的 Web 套接字消息类型

学完本模块后,学生将能够:

  • 描述使用 Web 套接字如何帮助实现 Web 网页和 Web 服务器之间的实时通信。
  • 使用 Web Sockets API 从 web 网页连接到 web 服务器,并在 web 网页和 web 服务器之间交换消息。

模块 14: 使用 Web Workers 执行后台处理

JavaScript 代码是用于在 web 网页中实现功能的强大工具,但是您需要记住,此代码在 web 网页加载时或在显示 web 网页时响应用户操作时运行。该代码由浏览器运行,并且如果该代码执行需要花费大量时间才能完成的操作,则浏览器可能会无响应并降低用户体验。

HTML5 引入了 Web Worker,使您可以将处理工作转移到单独的后台线程,从而使浏览器保持响应状态。本模块描述了 Web Worker 的操作方式以及如何在 Web 应用程序中使用它们。

课程

  • 了解 Web Worker
  • 使用 Web Worker 执行异步处理

实验: 创建 Web Worker 进程

  • 通过使用 Web Worker 来提高响应能力

学完本模块后,学生将能够:

  • 说明如何使用 Web Worker 来实现多线程并提高 Web 应用程序的响应速度。
  • 通过使用 Web Worker 执行处理工作,与 Web Worker 进行通信并控制 Web Worker 。

模块 15: 打包 JavaScript 用于生产部署

使用模型可以构建大型的复杂的应用程序。ECMAScript6 版本中语言的进步可以使应用程序构建程序简化应用程序构建过程。 但是,并非所有浏览器都支持使用 ECMAScript6 模块和其他功能。诸如 Node.js、Webpack 和 Babel 之类的工具允许使用新的语言功能以及支持不同的浏览器,以避免损害用户体验。

在本模块中,我们将介绍这些工具背后的理论,何时需要使用它们以及使用的不同选项。在模块的最后,我们将看到如何使用这些工具来编写所有浏览器都支持的 ECMAScript6 代码。

课程

  • 了解编译程序和模块捆绑
  • 为跨浏览器支持创建单独的软件包

实验: 设置 Webpack 捆绑用于生产

  • 使用 WebPack 创建和部署程序包