HTML5应用开发案例教程整本书教学教程电子教案(.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第一章 HTML5 应用开发概述,HTML5 应用开发案例教程,目录,1.1 网页工作原理,1.2 HTML5 概述,1.3 响应式设计,1.4 运行环境和开发工具,网页工作原理,1.1,1.1,网页工作原理,1.1.1 浏览器软件,1.1.2 网页工作过程,1.1.1 浏览器软件,浏览器是一种软件，其主要功能是显示网页服务器或者文件系统的 HTML 文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互。目前，主流浏览器包括 IE、FireFox、Opera、Safari、Chrome 等。,浏览器由 shell 和内核构成,shell 是指浏览器的外壳（用户接口），它为用户提供了界面操作，如菜单、地址栏、工具栏、选项参数设置等功能,内核（浏览器引擎），是基于标记语言显示内容的程序或模块，包括：,渲染引擎（Rendering Engine）,负责取得网页的内容、解析处理，以及呈现,JS（JavaScript）引擎 负责解析和执行 JavaScript 代码,1.1.2 网页工作过程,网页文件是由 HTML 命令、CSS 样式、JavaScript 代码和字符组合构成的,以 Webkit 渲染引擎为例讲解网页的渲染过程,1.1.2 网页工作过程,什么是,HTML,解析,指对网页文件进行识别、分析，并将其转换为具有一定意义的结构通常为表达文档结构的节点树，称为解析树，HTML 文档解析的结果为 DOM节点树。,HTML5,概述,1.2,1.2HTML5 概述,HTML5 特性,兼容性,实用性,安全性,表现与内容分离,简化,通用访问性,去插件,HTML5,新增功能,语义元素,增强Web 表单,音频和视频,JavaScript 与 Canvas 相结合进行绘图,响应式设计,1.3,1.3响应式设计,什么是响应式,Web,设计,网页内容会随着访问它的设备的视口不同而呈现不同的样式,HTML5 规范通过 media 等标签，使得网页可以突破输出设备屏幕尺寸的限制,响应式,Web,设计特点,以网格为基础,测试驱动开发,媒体查询,动态布局,响应式的旅游网站介绍页面在,PC,、移动端的执行效果,代码见案例,Example1-2,运行环境和开发工具,1.4,1.4运行环境和开发工具,1.4.1运行环境,HTML5 运行需要浏览器的支持，有时还需要 Web服务器环境。,常见浏览器对于,HTML5,的支持情况,Chrome、Firefox：已对 HTML5 支持了很多年，而且有自动升级，与其他浏览器相比起来支持度最好,Safari、Opera：同样支持 HTML5 很多年，支持度也很高,IE：从 IE 10 起，对 HTML5 的支持比较充分,1.4.2开发工具,Sublime Text,HBuilder（推荐）,HBuilder创建项目的步骤经,创建项目,设置项目路径和名称,1.4运行环境和开发工具,HBuilder创建项目的步骤,创建项目结构,1.4运行环境和开发工具,1.4运行环境和开发工具,新建 HTML 文件,文件名设置,1.4运行环境和开发工具,运行程序,1.4运行环境和开发工具,编码格式设置,第二章 静态网页制作,HTML5 应用开发案例教程,目录,2.1 HTML5 页面的构建,2.2 文本标签的应用,2.3 表格标签的应用,2.4 表单标签的应用,2.5 分组标签的应用,2.6 嵌入标签的应用,HTML5 页面的构建,2.1,2.1 HTML5 页面的构建,2.1.1 HTML5 基本结构,2.1.2 HTML5 新增的结构标签,2.1.3 CSS3 技术,2.1.4 实例 2-1：编写一个简单的HTML5 页面,2.1.1 HTML5 基本结构,：文档类型声明,：HTML 文档开始,：包含 HTML 文档的元数据开始,：声明 HTML 文档所用的字符编码,页面标题 ：设置 HTML 文档标题，即网页左上角显示的标题,：包含 HTML 文档的元数据结束,：表示 HTML 文档主体内容的开始,段落内容：一个文本段落,：HTML 文档主体内容的结束,：HTML 文档的结束,2.1.1 HTML5 基本结构,HTML,元素的用法,HTML 是一种超文本标记语言，它是由 HTML 元素、元素属性和元素属性值 3 种基本部分构成，元素的属性定义了元素的样式和功能,HTML 元素的语法形式,双标签：内容,单标签：,其中，标签名即元素名，属性可以有一个或多个，也可以没有，示例如下。,语句 1：测试段落,语句 2：,2.1.1 HTML5 基本结构,HTML,元素的用法,HTML 是一种超文本标记语言，它是由 HTML 元素、元素属性和元素属性值 3 种基本部分构成，元素的属性定义了元素的样式和功能,HTML 元素的语法形式,双标签：内容,单标签：,其中，标签名即元素名，属性可以有一个或多个，也可以没有，示例如下。,语句 1：测试段落,语句 2：,严格来说，将由尖括号包围的关键词，比如，称为 HTML 标签；将使用 HTML 标签定义的，从开始标签到结束标签的所有代码，称为 HTML 元素,2.1.2 HTML5 新增的结构标签,语义标签：主要用于描述章节所在位置和作用。根据用途的不同，语义标签可分为,结构标签,、文本标签和分组标签。,标签语义化是 HTML5 的主要新增内容之一。所谓标签语义化是指使用具有一定意义的标签来定义 HTML 元素，如 标签，放在页面头部，是一个具有引导和导航作用的结构元素。,HTML5,的新增结构标签,2.1.3 CSS3 技术,CSS（Cascading Style Sheet）即层叠样式表。在网页制作时采用 CSS 技术，能够有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制,CSS3 是CSS 技术的升级版本，,具有模块化的特性,CSS3,中主要模块有：选择器、盒式模型、背景和边框、文字特效、2D/3D 转换、动画、多栏布局和用户界面,CSS 的语法形式：,选择器属性 1:值 1;属性 2:值 2;。其中使用花括号包围属性声明，这里属性是指样式属性，每个属性需对应一个值，属性与值之间用冒号分隔，每一个属性声明之间以分号分隔,例如：,div color:red;margin:0;padding:0;,其中 div 为选择器，color 为属性，red 为 color 属性的值。类似地，margin、padding为属性，其值均为 0,属性值的写法会有多种，如像素，颜色等,2.1.3 CSS3 技术,在,HTML,文档中引入,CSS,样式表的方式,1,）元素内嵌入式：直接在 HTML 标签中使用 style 属性定义 CSS 样式，只能控制单个HTML 元素，没有体现 CSS 的优势，因此不推荐使用，如：,这是一段文本,2,）文档内嵌入式：嵌入式 CSS 样式需要放在元素 head 的标签对内。对于单个页面来说，这种方式很方便,3,）外部导入式：将 CSS 样式定义全部放在一个文件中，网页需要使用时，通过关键字 import 来引入外部 CSS 样式文件,4,）外部连接式：,CSS 样式定义方法与第 3 种方式相同，也是放在一个独立的文件中，只是引入CSS 文件的方法有些不同。,方式,2,）,方式,3,）,方式,4,）,2.1.4 实例 2-1：编写一个简单的HTML5 页面,问题描述：创建一个网页，由上、左、右、下 4 部分组成，每部分都包含有标题和正文内容。,执行效果：,2.1.4 实例 2-1：编写一个简单的HTML5 页面,问题分析：本例是一个网页构架，将页面分为 4 个部分，这种布局是一种常见的布局方式，即上面是网站导航，左侧是页面导航，右侧是页面主体内容，下部是页面的页脚。页面文字是对内容区域的划分表述，包括了标题、段落等，利用 HTML5 标签可以实现,2.1.4 实例 2-1：编写一个简单的HTML5 页面,实现步骤：,1,）创建一个 Web 项目，项目名为 Case2-1,2.1.4 实例 2-1：编写一个简单的HTML5 页面,2,）创建 HTML 文档,2.1.4 实例 2-1：编写一个简单的HTML5 页面,3,）编写代码,2.1.4 实例 2-1：编写一个简单的HTML5 页面,3,）编写代码,4,）运行代码,文本标签的应用,2.2,2.2文本标签的应用,2.2.1 文本标签,2.2.2 实例 2-2：旅游网站介绍文字的制作,2.2.1 文本标签,文本标签用于定义 HTML 文本元素，常用的文本标签有,：定义 a 元素，该元素表示超链接，用于从一张页面链接到另一张页面，主要包括如下属性。,id：元素标识号。,href：指定链接的目标。,name：元素名。,target：指定在何处打开被链接文档，有 2 个属性值_self（默认）和 _blank，前者是改变当前页面，并跳转到超链接地址；后者是打开新页面，并跳转至超链接的地址。,download：指定被下载内容的保存路径和文件名。,href,的用法举例,html5 learning site,document,document,footer,2.2.1 文本标签,：用于定义 p 元素，该元素表示一个段落，段落的前后自动空一行。例：,html5,：用于定义 br 元素，该元素表示换行。例：,html5,和,标签定义的 b 元素和 标签定义的 strong 元素均表示对于文本加粗,2.2.2实例2-2：旅游网站介绍文字的制作,问题描述：创建一个网页，由上和下两部分组成，上面部分是公司简介，下面部分则是联系方式，每个部分均包含标题和正文。,执行效果,2.2.2实例2-2：旅游网站介绍文字的制作,问题分析：小城旅行网站的公司介绍页面，用于介绍该公司概况、旗下 Web 及移动客户端，并显示公司的联系方式，包括公司地址、电话等信息。本例中，主要利用文本元素，针对文字进行处理，不涉及 CSS 样式。,实现步骤：,创建,HTML,项目 Case2-2,创建,HTML,文档,运行,HTML,文档,表格标签的应用,2.3,2.3表格标签的应用,2.3.1 表格标签,2.3.2 实例2-3：旅游网站机票预订页面制作,2.3.1 表格标签,表格标签用于定义 HTML 表格元素，标签的作用：,2.3.1 表格标签,表格标签应用示例：,2.3.2实例2-3：旅游网站机票预订页面制作,问题描述：创建一个页面，能够让用户了解和预订机票，即显示机票信息，并提供预订功能。,执行效果,2.3.2实例2-3：旅游网站机票预订页面制作,问题分析：机票预订是旅游网站的附加服务，机票的信息来源于航空公司，主要展示用户关注的信息，并提供相应链接到售票代理商网站。机票信息包括航班基本信息起止地点、起降时间、价格、准点率、餐食、航空公司和预定。本例利用table 元素及其子元素实现,实现步骤：,创建项目 Case2-3 并创建 HTML 文件,运行,HTML,文件,2.3.2实例2-3：旅游网站机票预订页面制作,表格代码片段,2.3.2实例2-3：旅游网站机票预订页面制作,问题总结：,（1）table 元素非常适合于大量数据列表，当需要列出的信息较多时，为避免加载时间过长，会采用逐步加载的方式，即首次显示一组信息，在表格尾部设计一个“加载更多”链接，结合 JavaScript 实现单击之后再加载一组信息，如此类推不断增加显示的信息；对于业务数据的呈现，如商品信息，则可使用传统的分页方式，每次仅显示一组信息,（2）为了提高可读性，可利用 CSS 来设置奇偶行不同背景色，以及鼠标滑动时位置所在行的背景色,（3）table 元素简单易用，但它会延迟页面加载时间，且 CSS 样式设置更为复杂，因此不建议使用 table 元素进行页面布局,表单标签的应用,2.4,2.4表单标签的应用,2.4.1 表单标签,2.4.2 实例2-4：旅游网站登录和注册页面制作,2.4.1 表单标签,用于定义表单元素及其子元素的标签，常用的标签有：,：定义 HTML 表单（form）元素，为用户提供输入界面，表单元素的属性较多,2.4.1 表单标签,：定义 input 元素，该元素作用是规定用户输入信息的输入字段，如通过 type 属性限定输入字段的类型，常用的属性：,2.4.1 表单标签,和：由 标签定义的 select 和由 标签定义的 datalist 都为下拉列表，,功能相近，但使用的场景不同。当选项较少时，一般使用前者；否则使用后者,标签应用示例,标签应用示例,2.4.2 实例2-4：旅游网站登录和注册页面制作,问题描述：创建一个页面，能够为用户提供登录和注册功能，要求页面设计简洁易用。,执行效果,2.4.2 实例2-4：旅游网站登录和注册页面制作,问题分析：登录和注册是网站提供的最常用功能，由于旅游网站注册仅需要用户的简单信息，包括用户名、邮箱和密码等，而登录信息要求用户名和密码，因此，可通过控制卡（tab）切换方式，将登录和注册用相同的方式呈现，在增加了 CSS 样式设置和 JavaScript 代码后，默认显示为登录界面，当单击注册 tab 时，则呈现注册界面,实现步骤：,新建项目 Case2-4 并创建 HTML 文件,执行,HTML,文件,2.4.2 实例2-4：旅游网站登录和注册页面制作,表单代码片段,下拉框代码片段,2.4.2 实例2-4：旅游网站登录和注册页面制作,问题总结：,（1）当网站对于用户信息要求严格时，注册字段会比较多，可能需要占用整个网页，就需单独设计注册页面,（2）当页面中需要用户输入多个字段时，通常会使用表单元素 form，如查询购买机票/火车票等，它将作为一个页面中的一个部分出现,分组标签的应用,2.5,2.5 分组标签的应用,2.5.1 分组标签,2.5.2 实例2-5：旅游网站首页制作（一）,2.5.1 分组标签,分组标签用于定义分组元素。分组元素用于组织相关内容的 HTML5 元素，对其进行归类，常用的分组标签有,2.5.1 分组标签,：用于定义 span 元素，span 元素表示对 HTML 文档中的行内元素进行组合,例：,在 蓝色 的天空中，正放飞着一只 红色 的风筝，画面非常的美。,：用于定义 div 元素，该元素表示分隔区块,例如：,3248 起,满意度 80%,8039 起,满意度 95%,2.5.1 分组标签,：用于定义 blockquote 元素，以表示摘自另一个源的内容,例如,执行效果：,2.5.1 分组标签,：用于定义 pre 元素，以表示预格式化的文本,：用于定义 hr 元素，其显示效果为水平线，其作用是分隔页面中的 2 个部分，从而表示文档内容的变化,、和 ：分别用于定义 ul、ol 和 li 元素，这 3 个元素都表示列表。其中 ul 和 li 元素组合成为无序列表，而 ol 和 li 元素组合成为有序列表,例如,2.5.1 分组标签,、和：分别用于定义 dl、dt 和 dd 元素，对应表示列表、各项目名字和描述。,例如,执行效果,2.5.1 分组标签,和,：用于定义 figure 元素，以表示独立的流内容（如图像、图表、照片和代码等）,：用于定义 figcaption 元素，该元素表示流内容的标题，可以作为 figure 元素中的第一个子元素或是最后一个,例如,2.5.2 实例2-5：旅游网站首页制作（一）,问题描述：创建一个页面，作为旅游网站首页面，提供登录/注册入口、网站导航，以及旅游热点等信息，且要求具有较好的视觉效果,执行效果,2.5.2 实例2-5：旅游网站首页制作（一）,问题分析：根据问题描述，将该页面分为 4 个部分：头部、背景图片、主体内容和尾部，其中头部又包括了顶部导航条、logo/搜索框和主导航条；主体内容则由多个旅游热点信息组成；尾部则包含了网站的一些相关信息及版权信息等。在这里我们主要关注页面结构和内容的展示所涉及元素如何应用，对于 CSS 样式不做讨论。,2.5.2 实例2-5：旅游网站首页制作（一）,实现步骤：,利用页面元素将页面划分为头部、背景图片、主体内容和尾部，其中头部采用 header 元素，背景图片和主体内容采用 div 元素，尾部则使用 footer 元素。内容部分的旅游热点标题采用 section 元素，而旅游点信息是配图与说明，使用 figure 元素更为合适。对于一些局部性的文字内容组织，还使用了 ul、dl 等元素。,打开项目 Case2-5 并创建 HTML 文件,标签应用的代码片段,2.5.2 实例2-5：旅游网站首页制作（一）,标签应用的代码片段,2.5.2 实例2-5：旅游网站首页制作（一）,标签应用的代码片段,标签应用的代码片段,2.5.2 实例2-5：旅游网站首页制作（一）,问题总结：,（1）分组元素是每个页面中不可缺少的。针对场景需要，选择适用的分组元素是关键,（2）header 元素适用于页面头部，首页头部除了导航条外，通常会有一些其他内容，如 logo、在线客服、登录/注册等链接，可以使用 div 元素来分块，而导航条则可用 nav 元素制作,（3）主体内容部分，如果是文字居多，使用 section 和 article 元素；若是以图片为主，则采用 figure 元素，同时结合 img 元素显示图片、figcaption 元素进行配图说明，会更为方便,（4）对于一行内需要设置不同样式时，使用 span 元素是非常合适的,（5）网页中常出现的一行/列文字组合，多会采用 ul 元素，并结合 CSS 样式，可达到一行或一列显示效果；如果是多行文字组合，则用 dl 元素会令代码的可读性和可维护性更好,（6）标签所定义的 dl 元素，也称为 dl 表格元素，它不但可以表示一组标题加多个列表项，还可以制作小型表格。与传统表格（table 元素）相比，它更为简捷和语义化,嵌入标签的应用,2.6,2.6 嵌入标签的应用,2.6.1 嵌入标签,2.6.2 实例2-6：旅游网站首页制作（二）,2.6.1 嵌入标签,嵌入标签：用于将一些外部资源插入 HTML 页面中，外部资源包括图片、视频、音频等。嵌入标签及其作用如下：,2.6.1 嵌入标签,、和,：分别用于定义 img、map 和 area 元素，均用来表示区域热点,例如：,2.6.1 嵌入标签,和 分别用于定义 audio 和 source 元素，这两个元素组合起来可表示播放音频,例如：,和 ：分别用于定义 video 和 source 元素，两者组合表示播放视频,例如,2.6.1 嵌入标签,和,：分别用于定义 embed 和 object 元素，2 个元素均可用来嵌入内容，但,object 元素仅适用于 IE 浏览器,，为了兼容不同的浏览器，在代码中可先判断浏览器类型，再动态加载相应的元素，或者将两者结合使用,例如：,用于定义 progress 元素，以表示任务进度,例如：,2.6.2 实例2-6：旅游网站首页制作（二）,问题描述：创建一个页面，作为旅游网站首页面，要求有网站导航，突出网站功能，且具有较好的动态视觉效果。,执行效果,2.6.2 实例2-6：旅游网站首页制作（二）,问题分析：实例 2-5 已完成了网站首页的制作，本例从另一角度来突出网站特色将图片与视频播放相结合。网页的头部、背景图片、主体内容和尾部各部分基本与实例 2-5 相同，只是在背景图片部分加入了视频播放效果。,实现步骤：,使用 HBuilder 创建项目 Case2-6，HTML 页面的大部分代码与实例 2-5 类似,2.6.2 实例2-6：旅游网站首页制作（二）,背景图片代码部分进行扩展，对应代码片段,2.6.2 实例2-6：旅游网站首页制作（二）,问题总结：,video 元素中加上“你的浏览器不支持 HTML5 视频。”是为了兼容浏览器，当浏览器不支持时，视频无法正常播放，则以此提示用户需要更换浏览器,第三章 结合 JavaScript 的交互式网页制作,HTML5 应用开发案例教程,目录,3.1 初识 JavaScript,3.2 JavaScript 基本语法,3.3 JavaScript 程序构成,3.4 JavaScript 访问 DOM 节点,初识 JavaScript,3.1,3.1初识 JavaScript,3.1.1 什么是 JavaScript,3.1.2 JavaScript 的特点,3.1.1 什么是 JavaScript,JavaScript 是一种基于对象和事件驱动的，并具有相对安全性的、解释型的程序设计语言（脚本语言）,脚本语言程序由一组指令组成，可用文本编辑器编辑，且无须编译，由解释器直译执行，而解释器又被称为脚本语言引擎（JS 引擎）,JavaScript主要用于实现网页行为，网页行为是,指客户端请求数据的验证、用户互动的实现、用户体验度的增强等,3.1.2 JavaScript 的特点,动态性,松散性,基于对象,基于原型链的继承机制,相对安全,事件驱动开发机制,JavaScript 基本语法,3.2,3.2JavaScript 基本语法,3.2.1 JavaScript 的应用方法,3.2.2 标识符、数据类型和运算符,3.2.3 实例 3-1：货币汇率兑换器,3.2.1 JavaScript 的应用方法,一个动态网页文件中，通常包含 HTML、CSS 和 JavaScript 3 类代码,例如：,3.2.1 JavaScript 的应用方法,HTML 页面中引入 JavaScript 代码几种方式,在 标签中嵌入,alert(hello,javascript);,在 标签中嵌入,alert(hello,javascript);,以文件形式导入,3.2.2 标识符、数据类型和运算符,ECMAScript 的基本概念,ECMAScript（简称 ES）是由 ECMA 国际按照 ECMA-262 和 ISO/IEC 16262 标准制定的一种脚本语言规范。JavaScript 是按 ECMAScript 实现的一种脚本语言,几个基本概念,区分大小写,变量是弱类型的,字面量（直接量）,每行结尾的分号可有可无,注释与 Java 等语言相同,花括号表明代码块,3.2.2 标识符、数据类型和运算符,标识符：是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列规则组合起来的一个或多个字符,标识符命名规则,第一字符必须是一个字母、下划线（_）或一个美元符号（$）,其他字符可以是字母、下划线、美元符号或数字,不能把关键字、保留字、true、false 和 null 作为标识符,数据类型,ECMAScript 提供了 5 个简单数据类型：Undefined、Null、Boolean、Number 和 String，以及 1 个复杂数据类型 Object，但不支持任何自定义类型。,Undefined：该类型只有一个值，即特殊值 undefined,Null：该类型只有一个值，即特殊值 null。它表示一个空对象引用（指针）,Boolean：该类型有两个值：true 和 false,Number：该类型包含 2 种数值：整型和浮点型,String 类型用于表示字符串。即用双引号（）或单引号（）括起，由零或多个16 位 Unicode 字符组成的字符序列,3.2.2 标识符、数据类型和运算符,运算符,常用运算符为+（加）、-（减）、*（乘）、/（除）、+（递增）、-（递减）、!（非）、（大于）、val);/利用 比较 2 个数值，由于 num 大于 val，得到结果为 true,alert(num=val);/利用=比较 2 个数值，由于 num 大于 val，得到结果为 false,var num=2,val=1;,if(num0 /2 个条件同时满足时，显示 true,if(num0|val0)alert(true);/只要满足其中一个条件，显示 true,3.2.3 实例 3-1：货币汇率兑换器,问题描述：创建一个页面，能实现多个币种间的金额换算，且要求兑换金额为整数。,执行效果,3.2.3 实例 3-1：货币汇率兑换器,问题分析：,要实现对于多个币种间的任意金额兑换，需要原始金额的输入框元素，以及原始和目标币种的下拉列表元素。为了实现货币的兑换，还需要利用 JavaScript代码，以获取用户输入数据和选项，同时根据公式计算出兑换后的金额，并显示结果。,实现步骤,选用 input、select、button 和 span 元素，分别创建原始金额输入框、币种下拉选项框、“转换”按钮，以及兑换后的金额,通过操作 DOM 节点获取用户输入的信息，即利用 document 对象的 getElementById 方法得到 input 元素对象,创建项目 Case3-1，并在该项目中创建网页文件,运行,HTML,文件,3.2.3 实例 3-1：货币汇率兑换器,脚本代码片段,3.2.3 实例 3-1：货币汇率兑换器,问题总结：,（1）利用 document 对象 getElementById 方法，获取与兑换计算相关的节点对象；利用 select 元素的 SelectIndex 和 options 属性得到原始和目标币种，这 2 个属性常配合使用，其中 options 属性是一个对象数组，本例就是使用 options.text 获得其选择文本，而它的另一个属性 options.value，则可得到该选项的 value 值；通过 parseInt 方法将字符数据转为整数，结合 isNaN 方法，确保参与兑换计算的是整数,（2）本例的计算非常简单，但代码却不少，原因在于计算前需要获取数据，计算后又需要将其显示到页面上，准备和后续工作的工作量较大。一般情况下，前期准备工作包括从页面元素获取用户输入的数据，进行合法性判断，以及格式转换等；后续工作主要是按照需求的格式，将结果显示在页面元素中,JavaScript 程序构成,3.3,3.3JavaScript 程序构成,3.3.1 流程控制语句,3.3.2 函数,3.3.3 对象,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,3.3.1 流程控制语句,ECMAScript 规定了一组流程控制语句，通常由一个或者多个关键字来完成给定的任务，如判断、循环等。流程控制语句包括 ifelse、switch、for、forin、dowhile 和 while,流程控制语句运用示例,3.3.2 函数,函数的基本用法,函数是 ECMAScript 的一个核心概念。函数是定义一次却可以任意多次被调用或被事件驱动执行的一段,JavaScript 代码。它允许带参或不带参，也允许有或无返回值,函数声明和使用：使用 function 关键字来声明，后跟一组参数以及函数体。函数的定义和使用主要有以下 2 种方式,通过声明定义函数，通过函数名调用，函数被执行。,function myFn()/定义函数,/执行代码,myFn();/函数被执行,通过表达式定义函数，通过变量名调用，函数被执行。,var x=function(a)return a;/定义函数，该函数实际上是一个匿名函数,x(2);/函数被执行,3.3.2 函数,函数应用示例,3.3.2 函数,函数参数,ECMAScript 函数对于参数的值不做任何检查，但可通过对象 arguments 来获取实际传递进来的参数及值,例如,3.3.3 对象,JavaScript,对象,JavaScript 是基于对象的编程语言，这里的对象是属性变量的容器，其中属性变量通常表示为健值对,2 种常用的对象创建方法,字面量方式,原型+构造函数方式,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,问题描述：在实例 2-4 制作登录注册页面的基础上，要求页面能够进行用户登录和新用户注册操作。,执行效果,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,问题分析：,登录,/,注册的操作流程为,用户输入信息系统判断合法性输出判断结果根据结果进入下一个页面或重置当前页面。这里用户名要求包含字母和数字，长度为 2 20 位，且首字符只可以是大小写字母和下划线；密码要求包含字母和数字，不可含空格，长度为 6 10 位；邮箱按照常规格式；问题回答可包含任意字符，但长度要求为 1 24 位。对于用户输入的每项内容，利用正则表达式进行格式匹配，所有注册项内容都符合要求，则显示提示信息“注册成功”，否则显示“注册信息不完整”，并重置出错项的文本输入框。,实现步骤,登录处理：“登录”按钮单击事件发生，将触发事件处理程序（登录验证函数 loginCheck）的执行。,loginCheck 函数中将获取与登录操作相关的页面元素对象，处理“登录”按钮单击事件，判断登录信息的合法性,注册处理：与登录处理类似，创建了一个注册验证函数 signup，它将获取用户录入的每个注册项，并利用正则表达式作为匹配模式，来判断是否符合要求,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,注册处理的匹配模式有以下 2 种,用户名/a-zA-Z_w1,19$/表示首个字母为“a-zA-Z_”，从第 2 个字符开始为任意字符，且长度为 119 位,密码有 2 个表达式模式，!/s/表示非空格，/w/表示包含字母数字下划线,定义一个字面量对象 s_just，其属性与注册项相对应，以标识各注册项的合法性状态。在单击“注册”按钮事件处理的代码部分，通过遍历 s_just 中的属性值来确定注册项是否全部合法,创建项目 Case3-2，在 Case2-4 的网页代码基础上，加入 JavaScript 处理代码,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,登录验证,JavaScript,代码片段,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,注册字段验证,JavaScript,代码片段,3.3.4 实例 3-2：旅游网站用户注册的合法性验证,问题总结：,（1）本例中采用 2 种方式调用函数：一是通过声明定义函数，再调用函数，使之被执行，如函数 loginCheck 和 singup；二是由表达式定义函数，并通过事件触发函数的执行，而非显式调用，如 s_btn.onclick 事件处理函数，在交互处理过程中，这种方式更为常见。,（2）类似于注册功能，有多个输入框时，除了本例采用的方式（即按钮单击事件中，一次性对各项进行判断），还有一种方式，就是每输入一项即在输入框的周边显示提示信息，如输入新用户的用户名后，显示该用户名是否已有人使用等，这种方式可以利用 input 的失焦（onblur）事件来实现。,（3）对象属性的遍历方法也有多种，本例通过 Object.keys(s_just)获得所有属性的集合，从中得到属性名，进而判断对应的属性值是否已改变。还有 2 种方法也可达到同样的目的,获取自身以及原型链上的属性：,for(var o in s_just)alert(o);/依次得到 s_just 的每个属性,获取对象自身的全部属性名：,var props=Object.getOwnPropertyNames(s_obj);,for(var i=0;iprops.length;i+)/依次得到 props 的各属性及其值,alert(propsi+:+s_objpropsi);,JavaScript 访问 DOM 节点,3.4,3.4 JavaScript 访问 DOM 节点,3.4.1 文档对象模型,3.4.2 DOM 节点的基本操作,3.4.3 DOM 事件机制,3.4.4 实例 3-3：旅游网站的景点查询动态生成页面制作,3.4.5 JavaScript 事件处理模型,3.4.1 文档对象模型,文档对象模型（Document Object Model，DOM）也称为 HTML 文档树，是 W3C组织推荐的处理可扩展标记语言的标准编程接口，独立于任何平台或语言，其中 D（Document）是指浏览器加载的网页页面，O（Object）是指页面及页面中的任何元素，M（Model）则可理解为网页文档的树型结构,3.4.2 DOM节点的基本操作,Document 对象,HTML,页面被浏览器加载后成为文档节点对象Document 对象,Document 对象是 DOM 树的根节点，通过它可以对于树上所有元素节点进行访问,Document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问,例如,3.4.2 DOM节点的基本操作,节点属性,对于 DOM 中的元素、属性和文本 3 种节点，均有 nodeName、nodeType 和 nodeValue属性，元素、属性和文本节点对应的属性及值，如下表所示,3.4.2 DOM节点的基本操作,操作节点,获取节点,节点内容或值,增删节点,操作节点示例,遍历节点,3.4.2 DOM节点的基本操作,操作节点示例,修改节点内容,3.4.2 DOM节点的基本操作,操作节点示例,增删节点,3.4.2 DOM节点的基本操作,改变元素的 CSS 样式,HTML 元素的 CSS 样式，可以通过元素的 style、class 属性或是外部 CSS 文件来设置,例如：通过 style 属性改变元素的 CSS 样式,3.4.2 DOM节点的基本操作,例如：通过 class 属性来改变元素的 CSS 样式,3.4.2 DOM节点的基本操作,例如：通过外部 CSS 文件改变元素的 CSS 样式,3.4.3 DOM事件机制,DOM,事件,事件是 HTML 元素天生具备的行为方式。当用户操作 HTML 元素时，会触发该元素的某个事件；通过 JavaScript 可以为该事件绑定方法，即事件绑定，其目的是使得该事件被触发时，会做出一些相应的反应,常用事件,鼠标事件：单次单击（click）、双击（dblclick，300ms 之内连续两次单击）、滑过（mouseover）、滑出（mouseout）、进入（mouseenter）、离开（mouseleave）、按下（左键）（mousedown）、释放（左键）（mouseup），以及滚轮滚动（mousewheel）事件,键盘事件：按下键（keydown）、释放键（keyup）事件。,表单事件：失去焦点（blur）、获取焦点（focus）、内容改变（change）和被选中（select）事件,其他事件：加载成功（load）、加载失败（error）、文档滚动（scroll）和窗口大小改变（resize）事件,3.4.3 DOM事件机制,事件绑定,DOM0 级事件绑定,：元素.事件类型=监听函数,DOM2 级事件绑定,（,推荐,）：,标准浏览器及 IE 8 以上：obtn.addEventListener(click,function(),false);,标准及 IE 8 以上浏览器：元素.addEventListener(事件类型，监听函数，事件执行顺序),IE 6IE 8 浏览器：元素.attachEvent(事件类型，监听函数),DOM2 级事件绑定的实现要素,事件绑定使用的是 addEventListener/attachEvent 方法，其中 attachEvent 专门用于兼容 IE 6 IE 8 浏览器。,事件绑定后，浏览器会将事件绑定方法置于该事件专用的事件池中,对于元素的某一事件可以绑定多个不同方法,当元素的某一事件被触发时，浏览器会到对应事件池中依次执行所有方法,如果需要，可以使用 removeEventListener/detachEvent 方法解除绑定,3.4.3 DOM事件机制,DOM2 级事件绑定,示例,3.4.4 实例3-3：旅游网站的景点查询动态生成页面制作,问题描述：创建旅游网站的内容展示页面，页面的主体内容包括左、右两部分，当用户搜索某个景点或城市时，在左侧能够以列表形成显示相关的信息；同时右侧显示网站的微信号、热门景点，以及推荐线路。,执行效果,3.4.4 实例3-3：旅游网站的景点查询动态生成