HTML5+CSS3+JavaScript从入门到精通

HTML5+CSS3+JavaScript从入门到精通
作 者: 王震 盛立 秦文友
出版社: 电子工业出版社
丛编项:
版权说明: 本书为公共版权或经版权方授权,请支持正版图书
标 签: 暂缺
ISBN 出版时间 包装 开本 页数 字数
未知 暂无 暂无 未知 0 暂无

作者简介

  王震,硕士毕业于澳大利亚伊迪思科文大学,现任沈阳理工大学艺术设计学院副教授,多年从事动画、虚拟现实、手机游戏设计开发的研究。曾出版《PREMIERE PRO CS4 视频编辑与实战演练》、《手机动画角色设计》盛立毕业于鲁迅美术学院工艺系,文学士,现就职于沈阳理工大学艺术设计学院,副教授。从事服装设计,工业设计教学三十余年。参与省级科研项目3项,并先后在***、省级学术期刊上发表8篇教学科研论文,编著教材2部。具有较扎实的学术功底,科技开发能力和组织实施能力。秦文友 大秦电商创始人,专注网络技术的电商应用。已经出品《1小时建站》《微博营销实战》《PHP采集》《网络招商系统》

内容简介

本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML&CSS&JavaScript及目前新的前端技术。主要包括HTML5的结构、文本、图像、链接、表单、音频、视频、拖放、本地存储、图形,CSS3的文本设计、背景设计、DIV+CS布局、盒布局、多列布局、自适应布局、动画、渐变,还有JavaScript的语法、对象、BOM、DOM、事件响应等;最后两个两个完整案例综合前面所学,让读者对网站设计与网页开发有个整体的认识。本书运用大量示例,让读者在实战中体会编程的快乐。建议读者边学边练,有难以理解的概念或知识一定要弄清楚,不能迷迷糊糊。要培养自己单独开发项目的能力。本书适合想从事网页和前端开发的入门人员、网站建设自学者和网络管理技术人员阅读。

图书目录

第1篇 HTML技术篇

第1章 网页基础知识入门 1

1.1 了解HTML网页技术 1

1.1.1 什么是HTML和HTML 5 1

1.1.2 如何获取网页的源代码 2

1.1.3 静态网页 3

1.1.4 动态网页 3

1.1.5 网站 3

1.2 了解网页技术的工作原理 4

1.2.1 静态HTML的工作流程 4

1.2.2 动态HTML的工作流程 4

1.3 制作一个完整的HTML 5网页 5

1.3.1 搭建上机练习环境 5

1.3.2 完成第一个网页 5

1.4 技术解惑 6

1.4.1 HTML与HTML 5是两种网页语言吗 6

1.4.2 如何区分静态网页与动态网页 6

第2章 HTML 5网页的结构 7

2.1 动手解构一个HTML 5页面 7

2.2 HTML的基础知识 7

2.2.1 HTML的基础语法 7

2.2.2 HTML文档的基本骨架 8

2.3 HTML文档中的标签 8

2.3.1 样本代码DOCTYPE 9

2.3.2 开始标签<html> 9

2.3.3 头部标签和头部标签的对象 9

2.3.4 标题标签<title> 9

2.3.5 主体标签<body> 9

2.3.6 美化HTML文档 9

2.4 拓展训练 10

2.4.1 训练一:制作一个HTML网页,包含HTML基本标记,页面显示

“Hello World!” 10

2.4.2 训练二:制作一个HTML网页,要求在浏览器标题栏中显示

“Hello World!” 10

2.5 技术解惑 11

2.5.1 HTML标签需要死记硬背吗 11

2.5.2 HTML网页的结构中哪些标签是必需的 11

第3章 网页中的文本与段落 12

3.1 文本的排版格式 12

3.1.1 写一行换一行 12

3.1.2 在页面中使用空格 13

3.1.3 文本的段落要对齐 14

3.2 文本的属性样式 15

3.2.1 不一样的文本字体大小 15

3.2.2 奇妙的特殊符号 16

3.2.3 给文本加标注 17

3.3 整齐的文本列表 18

3.3.1 无序列表 18

3.3.2 有序列表 19

3.3.3 定义列表 20

3.3.4 列表嵌套 21

3.4 拓展训练 22

3.4.1 训练一:在页面中设置段落对齐方式 22

3.4.2 训练二:在页面中创建有序列表 23

3.5 技术解惑 23

3.5.1 文本段落的对齐方式 23

3.5.2 有序列表与无序列表 23

第4章 网页中的图像 24

4.1 图像的基础知识 24

4.1.1 常用的位图图像 24

4.1.2 在页面中常用的位图格式 24

4.1.3 矢量图 25

4.1.4 图像的分辨率 25

4.1.5 认识一些网页中常用的Banner尺寸 25

4.2 页面中的图像 26

4.2.1 理解图像路径 26

4.2.2 像编辑文本对齐一样在页面中对齐图片 27

4.2.3 图像与文本的对齐方式 28

4.2.4 调整图像与文本的距离 29

4.3 让图像更美观 30

4.3.1 使用画图工具修改图像 30

4.3.2 为图像添加边框 30

4.3.3 独树一帜的水平线 31

4.4 改变页面的背景 32

4.5 拓展训练 33

4.5.1 训练一:在网页中插入图片并设置边框 33

4.5.2 训练二:在页面中插入宽度为800px、高度为2px、颜色为蓝色的

水平线 34

4.6 技术解惑 34

4.6.1 使用图像的技巧 34

4.6.2 善用水平线 34

第5章 网页中的链接 35

5.1 认识链接 35

5.1.1 初识页面链接 35

5.1.2 理解链接地址 36

5.2 链接的种类 37

5.2.1 基本的文本链接 38

5.2.2 基本的图像链接 38

5.2.3 把邮箱留给需要联系你的人 39

5.2.4 在同一页面中快速查找信息 40

5.3 提高页面链接的友好度 42

5.3.1 美观链接的状态 42

5.3.2 特殊的链接方式 44

5.3.3 热点图像区域的链接 46

5.4 在新窗口中显示链接窗口 48

5.5 拓展训练 49

5.5.1 训练一:在页面中使用图像链接 49

5.5.2 训练二:在页面中使用热点图像区域链接 49

5.6 技术解惑 49

5.6.1 合理使用锚点链接 49

5.6.2 合理使用邮件链接 50

第6章 网页中的表单 51

6.1 表单的工作原理 51

6.1.1 <script>标记 51

6.1.2 创建表单 51

6.1.3 表单域 52

6.2 通过表单展示不一样的页面 52

6.2.1 input对象下的多种表单表现形式 52

6.2.2 text文本框的样式表单 53

6.2.3 password输入密码的样式表单 54

6.2.4 checkbox复选框的样式表单 55

6.2.5 radio单选框的样式表单 57

6.2.6 submit提交数据的样式表单 58

6.2.7 hidden隐藏域的样式表单 59

6.2.8 image样式的表单 60

6.2.9 file上传文件的样式表单 61

6.2.10 textarea对象的表单 62

6.2.11 select对象的表单 64

6.2.12 表单域集合 65

6.3 HTML 5表单的进化 66

6.3.1 早期的表单发展 66

6.3.2 HTML 5表单的问世 66

6.3.3 当前的支持情况 67

6.3.4 新增的表单输入类型 67

6.4 新增表单特性及元素 68

6.4.1 form特性 68

6.4.2 formaction特性 68

6.4.3 form其他特性 69

6.4.4 placeholder特性 69

6.4.5 autofocus特性 69

6.4.6 autocomplete特性 69

6.4.7 list特性和datalist元素 70

6.4.8 keygen元素 70

6.4.9 output元素 70

6.5 表单验证API 71

6.5.1 与验证有关的表单元素特性 71

6.5.2 表单验证的属性 72

6.5.3 ValidityState对象 72

6.5.4 表单验证的方法 73

6.5.5 表单验证的事件 75

6.6 拓展训练 76

6.6.1 训练一:在页面中使用下拉菜单表单元素 76

6.6.2 训练二:在页面中使用email表单输入元素并设置autofocus属性 77

6.7 技术解惑 77

6.7.1 HTML 5新增的表单类型有哪些 77

6.7.2 HTML 5新增的表单特性有哪些 77

第7章 音频和视频 78

7.1 audio和video基础知识 78

7.1.1 在线多媒体的发展 78

7.1.2 多媒体术语 79

7.1.3 HTML 5多媒体文件格式 80

7.1.4 功能缺陷及未来趋势 81

7.2 使用HTML 5的audio和video元素 81

7.2.1 在页面中加入音频和视频 81

7.2.2 使用source元素 82

7.2.3 使用脚本检测浏览器的标签支持情况 82

7.2.4 audio和video的特性和属性 83

7.2.5 audio和video的方法 86

7.2.6 audio和video的事件 88

7.3 练习:做自定义播放工具条 89

7.3.1 案例简介 89

7.3.2 网页基本元素 90

7.3.3 定义全局的视频对象 90

7.3.4 添加播放/暂停、前进和后退功能 91

7.3.5 添加慢进和快进功能 91

7.3.6 添加静音和音量功能 92

7.3.7 添加进度显示功能 92

7.4 拓展训练 93

7.4.1 训练一:在页面中插入音频格式 93

7.4.2 训练二:在页面中插入视频格式,并在页面加载完毕后自动播放 93

7.5 技术解惑 93

7.5.1 如何使用合适的音频类型 93

7.5.2 在网上使用视频的技巧 94

第8章 在网页中拖放内容 95

8.1 拖放API 95

8.1.1 新增的draggable特性 95

8.1.2 新增的鼠标拖放事件 95

8.1.3 DataTransfer对象 96

8.1.4 练习:拖放元素的内容 97

8.2 文件API 100

8.2.1 新增的标签特性 100

8.2.2 FileList对象与File对象 101

8.2.3 Blob对象 102

8.2.4 FileReader接口 103

8.3 练习:把图片拖入浏览器 108

8.3.1 案例简介 108

8.3.2 设计网页基本元素 108

8.3.3 基本函数的实现 109

8.3.4 页面加载处理 109

8.4 拓展训练 110

8.4.1 训练一:使用文件选择框可以一次选取多个文件 110

8.4.2 训练二:在网页中设置一个层是可以拖动的 110

8.5 技术解惑 110

8.5.1 理解拖放API与文件API 110

8.5.2 如何使用FlieList对象 111

第9章 网页的本地存储 112

9.1 本地存储对象――Web Storage 112

9.1.1 Web Storage简介 112

9.1.2 sessionStorage和localStorage 113

9.1.3 设置和获取Storage数据 115

9.1.4 Storage API的属性和方法 117

9.1.5 存储JSON对象的数据 119

9.1.6 Storage API的事件 122

9.1.7 练习:在两个窗口中实现通信 122

9.2 本地数据库――Web SQL Database 124

9.2.1 Web SQL Database简介 124

9.2.2 操作Web SQL数据库 124

9.2.3 练习:基本的数据库操作 125

9.3 拓展训练 129

9.3.1 训练一:保存并读取Storage数据 129

9.3.2 训练二:使用Web SQL数据库向名称为User的表中插入一条记录 129

9.4 技术解惑 130

9.4.1 理解本地存储对象 130

9.4.2 如何使用本地数据库 130

第10章 绘制图形 131

10.1 认识Canvas 131

10.1.1 Canvas的历史 131

10.1.2 Canvas和SVG及VML之间的差异 131

10.2 Canvas基本知识 132

10.2.1 构建Canvas元素 132

10.2.2 使用JavaScript实现绘图的流程 133

10.3 使用Canvas绘图 135

10.3.1 绘制矩形 135

10.3.2 使用路径 137

10.3.3 图形组合 142

10.3.4 绘制曲线 144

10.3.5 使用图像 151

10.3.6 剪裁区域 153

10.3.7 绘制渐变 157

10.3.8 描边属性 159

10.3.9 模式 161

10.3.10 变换 163

10.3.11 使用文本 167

10.3.12 阴影效果 170

10.3.13 状态的保存与恢复 171

10.3.14 操作像素 173

10.4 在Canvas中实现动画 175

10.5 拓展训练 179

10.5.1 训练一:使用Canvas绘制矩形 179

10.5.2 训练二:使用Canvas绘制阴影效果 180

10.6 技术解惑 180

10.6.1 理解Canvas对象 180

10.6.2 使用JavaScript实现绘图 180

第2篇 CSS技术篇

第11章 CSS基础知识入门 181

11.1 什么是CSS 181

11.2 CSS的写法 181

11.2.1 基本的样式表的写法 181

11.2.2 使用类class和标志id链接样式表 182

11.2.3 创建选择器 183

11.2.4 应用CSS样式表 185

11.3 用CSS来修饰页面文本 186

11.3.1 修饰页面文本字体 186

11.3.2 文本的字号 187

11.3.3 文本段落行高 187

11.3.4 禁止文本自动换行 187

11.4 给页面对象添加颜色 187

11.5 CSS 3的发展 188

11.5.1 模块化的发展 188

11.5.2 浏览器支持情况 189

11.5.3 CSS 3新特性预览 189

11.6 CSS 3增加的选择器功能 191

11.6.1 属性选择器 191

11.6.2 结构伪类选择器 191

11.6.3 UI元素状态伪类选择器 192

11.6.4 伪元素选择器 192

11.7 拓展训练 193

11.7.1 训练一:用CSS为页面中的my_c类添加样式 193

11.7.2 训练二:用CSS为页面中的输入框在获取焦点时设置样式 194

11.8 技术解惑 194

11.8.1 理解CSS的基本语法 194

11.8.2 掌握各种常用选择器的使用 194

第12章 美化文本与背景 195

12.1 文本与字体 195

12.1.1 多样化的文本阴影――text-shadow属性 195

12.1.2 溢出文本处理――text-overflow属性 200

12.1.3 文字对齐――word-wrap和word-break属性 201

12.1.4 使用服务器端的字体――@font-face规则 203

12.1.5 练习:使用丰富的文字样式 206

12.2 色彩模式和不透明度 208

12.2.1 HSL色彩模式 208

12.2.2 HSLA色彩模式 211

12.2.3 RGBA色彩模式 212

12.2.4 不透明属性opacity 213

12.2.5 练习:设置半透明的遮蔽层 215

12.3 背景 218

12.3.1 在元素里定义多个背景图片 218

12.3.2 指定背景的原点位置 219

12.3.3 指定背景的显示区域 222

12.3.4 指定背景图像的大小 224

12.3.5 练习:设计信纸的效果 227

12.4 边框 230

12.4.1 设计圆角边框――border-radius属性 230

12.4.2 设计图像边框――border-image属性 235

12.4.3 设计多色边框――border-color属性 244

12.4.4 练习:使用新技术设计网页 245

12.5 拓展训练 250

12.5.1 训练一:为文本添加阴影效果 250

12.5.2 训练二:为层添加圆角边框效果 250

12.6 技术解惑 251

12.6.1 文本的新特性 251

12.6.2 不同色彩模式的使用 251

12.6.3 边框的使用 251

第13章 DIV+CSS布局 252

13.1 理解块级元素的意义 252

13.2 页面中的层 252

13.2.1 行<span>和层<div> 252

13.2.2 层的基本定位 253

13.2.3 层的叠加 256

13.3 框模型 257

13.3.1 理解框模型 257

13.3.2 空距――padding属性 258

13.3.3 边框――border的扩展属性 259

13.3.4 边距――margin属性 260

13.3.5 框模型的溢出 260

13.4 定制层的display属性 260

13.5 CSS Hack 260

13.6 拓展训练 261

13.6.1 训练一:在页面中对一个层使用绝对定位 261

13.6.2 训练二:为一个层设置边框样式 261

13.7 技术解惑 261

13.7.1 块级元素与行内元素的区别 261

13.7.2 如何理解内边距与外边距 262

第14章 盒布局 263

14.1 灵活的盒布局 263

14.1.1 开启盒布局 263

14.1.2 元素的布局方向――box-orient属性 265

14.1.3 元素的布局顺序――box-direction属性 267

14.1.4 调整元素的位置――box-ordinal-group属性 269

14.1.5 弹性空间分配――box-flex属性 270

14.1.6 元素的对其方式――box-pack和box-align属性 274

14.1.7 练习:使用新型盒布局设计网页 278

14.2 增强的盒模型 282

14.2.1 盒子阴影――box-shadow属性 282

14.2.2 盒子尺寸的计算方法――box-sizing属性 286

14.2.3 盒子溢出内容处理――overflow-x和overflow-y属性 288

14.2.4 练习:设计网站服务条款页面 290

14.3 增强的用户界面设计 292

14.3.1 允许用户改变元素尺寸――resize属性 292

14.3.2 定义外轮廓线――outline属性 294

14.3.3 伪装的元素――appearance属性 298

14.3.4 为元素添加内容――content属性 300

14.3.5 练习:设计一个省份选择盘 303

14.4 拓展训练 305

14.4.1 训练一:设置盒元素布局方向为水平布局 305

14.4.2 训练二:在页面中创建一个可以调整大小的层 306

14.5 技术解惑 306

14.5.1 如何使用盒布局属性的兼容性 306

14.5.2 理解盒子溢出内容处理的区别 306

第15章 多列布局 307

15.1 多列布局基础知识 307

15.1.1 多列属性columns 307

15.1.2 列宽属性column-width 309

15.1.3 列数属性column-count 310

15.1.4 列间距属性column-gap 311

15.1.5 定义列分隔线――column-rule属性 312

15.1.6 定义横跨所有列――column-span属性 314

15.2 练习:模仿杂志的多列版式 316

15.3 拓展训练 318

15.3.1 训练一:在一个层中实现多列布局 318

15.3.2 训练二:在多列布局的基础上定义列分隔线 318

15.4 技术解惑 319

15.4.1 如何使用多列布局的快捷设置 319

15.4.2 使用column-span属性的注意事项 319

第16章 CSS 3自适应布局 320

16.1 媒体查询 320

16.1.1 @media规则的语法 320

16.1.2 使用媒体查询链接外部样式表文件 324

16.2 练习:自适应屏幕的样式表方案 325

16.3 拓展训练 330

16.3.1 训练一:媒体查询常用的设备种类 330

16.3.2 训练二:如何使用媒体查询链接外部样式表文件 331

16.4 技术解惑 331

16.4.1 媒体查询的作用是什么 331

16.4.2 媒体查询中的媒体类型有哪些 331

第17章 动画和渐变 332

17.1 CSS 3变形基础 332

17.1.1 元素的变形――transform属性 332

17.1.2 旋转 332

17.1.3 缩放和翻转 334

17.1.4 移动 336

17.1.5 倾斜 339

17.1.6 矩阵变形 341

17.1.7 同时使用多个变形函数 343

17.1.8 定义变形原点――transform-origin属性 345

17.1.9 练习:设计图片画廊 347

17.2 CSS 3过渡效果 350

17.2.1 实现过渡效果――transition属性 350

17.2.2 指定过渡的属性――transition-property属性 351

17.2.3 指定过渡的时间――transition-duration属性 353

17.2.4 指定过渡延迟时间――transition-delay属性 354

17.2.5 指定过渡方式――transition-timing-function属性 355

17.2.6 练习:制作滑动的菜单 356

17.3 CSS 3动画设计 359

17.3.1 关键帧动画――@keyframes规则 359

17.3.2 动画的实现――animation属性 360

17.3.3 练习:永不停止的风车 363

17.4 CSS 3渐变设计 365

17.4.1 线性渐变 366

17.4.2 径向渐变 369

17.4.3 练习:设计渐变的按钮 371

17.5 拓展训练 373

17.5.1 训练一:使用CSS 3实现当鼠标指针经过链接时放大 373

17.5.2 训练二:使用CSS 3实现一个层中有线性渐变背景 373

17.6 技术解惑 374

17.6.1 元素的变形与布局 374

17.6.2 过渡效果与变形的区别 374

第3篇 JavaScript技术篇

第18章 JavaScript程序基础知识 375

18.1 JavaScript的基础语法 375

18.1.1 字母大小写编写规范 375

18.1.2 JavaScript代码编写格式 375

18.1.3 注释格式 376

18.1.4 保留字 376

18.1.5 基本的输出方法 376

18.1.6 关于<script></script>标签的声明 378

18.2 JavaScript交互基本方法 379

18.2.1 最常用的信息对话框 379

18.2.2 选择对话框 380

18.2.3 提示对话框 382

18.3 数据类型和变量 383

18.3.1 数据类型的理解 383

18.3.2 学习几种基本数据类型 384

18.3.3 变量的含义 386

18.3.4 变量的声明与使用 386

18.4 常用的运算符 387

18.4.1 运算符与表达式 387

18.4.2 基本运算符及其使用 388

18.4.3 关系运算符及其使用 393

18.4.4 逻辑运算符及其使用 395

18.4.5 其他常用运算符及其使用 396

18.5 拓展训练 398

18.5.1 训练一:在页面中插入一段JavaScript代码 398

18.5.2 训练二:在页面中使用一个选择框,并根据选择输出不同内容 398

18.6 技术解惑 398

18.6.1 关于多行注释的误区 398

18.6.2 3种对话框的区别 399

18.6.3 关于JavaScript中的基本数据类型 399

第19章 JavaScript核心语法 400

19.1 程序的核心:分支和循环 400

19.1.1 if条件分支 400

19.1.2 switch条件分支 402

19.1.3 while循环 404

19.1.4 do...while循环 405

19.1.5 for循环 407

19.1.6 for...in循环 408

19.1.7 如何更合理地控制循环语句 409

19.2 函数 413

19.2.1 什么是函数 413

19.2.2 学会使用函数解决问题 415

19.2.3 理解函数的参数传递 416

19.2.4 函数中变量的作用域和返回值 417

19.2.5 函数的嵌套 419

19.3 面向对象编程的简单概念 420

19.3.1 什么是面向对象 420

19.3.2 如何创建对象 421

19.3.3 定义对象的属性 422

19.3.4 对象的构造函数和方法 424

19.3.5 关联数组的概念 426

19.3.6 with语句和for...in语句 428

19.4 拓展训练 431

19.4.1 训练一:使用循环打印九九乘法表 431

19.4.2 训练二:使用自定义函数求某个数的平方 431

19.5 技术解惑 431

19.5.1 if与switch的使用时机 431

19.5.2 while与for循环的异同 432

19.5.3 while与do...while循环的异同 432

19.5.4 关于自定义函数 432

19.5.5 如何理解面向对象 432

第20章 JavaScript核心对象 433

20.1 数组对象 433

20.1.1 创建数组 433

20.1.2 数组元素的操作 435

20.1.3 创建多维数组 437

20.1.4 数组的方法 438

20.2 日期对象 444

20.2.1 用日期对象创建常用日期 445

20.2.2 日期对象的方法 446

20.2.3 编写一个时间计算程序 449

20.3 数学运算对象 451

20.3.1 数学运算对象的方法和属性 451

20.3.2 制作一个小型计算器 454

20.4 字符串对象 456

20.4.1 字符串对象的属性 456

20.4.2 字符串对象的方法 457

20.5 函数对象 461

20.6 拓展训练 463

20.6.1 训练一:创建数组并输出数组内容 463

20.6.2 训练二:输出当前的日期和时间 463

20.7 技术解惑 464

20.7.1 如何理解数组 464

20.7.2 使用日期对象的注意事项 464

20.7.3 关于Math对象 464

20.7.4 关于字符串对象 464

第21章 浏览器对象模型 465

21.1 navigator对象 465

21.1.1 navigator对象的管理方法 466

21.1.2 在网页上显示浏览者系统的基本信息 466

21.2 window对象 467

21.2.1 window对象的管理方法 468

21.2.2 制作可定制的弹出窗口 469

21.2.3 完美地关闭窗口 471

21.2.4 制作简单的网页动画 472

21.2.5 延时执行命令 474

21.3 location对象 476

21.4 history对象 478

21.5 screen对象 480

21.6 拓展训练 481

21.6.1 训练一:在页面上输出浏览者的浏览器名称 481

21.6.2 训练二:使用setInterval()制作移动的文字 481

21.7 技术解惑 482

21.7.1 描述你理解的window对象 482

21.7.2 描述你理解的document对象 482

第22章 文档对象模型 483

22.1 文档对象模型概念详解 483

22.1.1 文档对象模型简介 483

22.1.2 文档对象的属性 484

22.1.3 文档对象的方法 486

22.2 form对象 488

22.2.1 访问表单对象的方法 488

22.2.2 表单控件 492

22.2.3 制作具备数据检测功能的注册页面 499

22.3 image对象 503

22.4 链接对象 506

22.5 拓展训练 508

22.5.1 训练一:使用文档对象模型遍历页面全部图片 508

22.5.2 训练二:当输入框获取焦点时显示红色,失去焦点后恢复 508

22.6 技术解惑 509

22.6.1 文档对象模型是什么 509

22.6.2 文档对象模型与HTML标签 509

22.6.3 使用文档对象模型的注意事项 509

第23章 事件响应 510

23.1 事件响应的概念 510

23.1.1 事件和事件处理程序 510

23.1.2 HTML元素常用事件的展示 511

23.2 事件方法的使用 513

23.3 event对象 514

23.3.1 event对象的各种属性 514

23.3.2 网页监视发生事件的元素 515

23.3.3 网页检测用户的鼠标信息 516

23.3.4 网页检测用户的键盘按键信息 518

23.3.5 鼠标随意拖动网页元素 520

23.4 事件编程访问网页元素 523

23.4.1 数组方式访问 523

23.4.2 id名称和name名称访问 525

23.4.3 HTML标签名称访问 527

23.4.4 DOM节点方法访问 528

23.5 结合CSS制作动态页面 531

23.5.1 让HTML元素动起来 531

23.5.2 通过切换CSS给网页换肤 534

23.5.3 动态添加节点 536

23.6 拓展训练 539

23.6.1 训练一:使用键盘方向键移动页面的层 539

23.6.2 训练二:单击按钮为表格添加一行 540

23.7 技术解惑 541

23.7.1 理解事件 541

23.7.2 理解事件响应 541

第4篇 实战篇

第24章 实战――使用微信小程序开发充值应用 543

24.1 小程序开发介绍 543

24.1.1 小程序开发前景 543

24.1.2 HTML 5、CSS 3、JavaScript在小程序中的对应文件 544

24.1.3 网站HTML标签与小程序wxml组件的异同 544

24.1.4 网站中JavaScript与小程序中JavaScript的异同 546

24.1.5 wxss与CSS 3的不同之处 546

24.2 小程序开发涉及的层次和知识结构 546

24.2.1 第一层:小程序 547

24.2.2 第二层:Web服务器 547

24.2.3 第三层:数据库 547

24.2.4 第四层:第三方服务 548

24.3 小程序开发前的准备工作 548

24.3.1 Web服务器方面的准备 548

24.3.2 申请开通小程序 548

24.3.3 设置小程序服务器域名 551

24.4 安装和使用小程序开发工具 553

24.4.1 下载安装小程序开发工具 554

24.4.2 小程序开发工具介绍 555

24.5 实战――充值小程序开发 558

24.5.1 新建充值小程序工程 559

24.5.2 小程序工程目录结构 561

24.5.3 小程序单个页面的结构 563

24.5.4 充值小程序页面开发 565

24.5.5 小程序与Web服务器之间如何通信 569

第25章 实战――资讯小程序 573

25.1 资讯小程序的主要页面 573

25.2 资讯小程序单个页面的开发流程 574

25.3 新建资讯小程序项目 574

25.4 资讯小程序的首页 576

25.4.1 js脚本从服务器获取数据 577

25.4.2 在wxml中展示数据 578

25.4.3 wxss控制展示效果 581

25.5 开发资讯小程序分类页面 582

25.5.1 分类页面index.js 源代码分析 583

25.5.2 分类页面index.wxml源代码分析 584

25.5.3 小程序的模板文件 585

25.5.4 分类页面index.wxss源代码分析 586

25.6 开发资讯小程序列表页面 587

25.6.1 列表页面index.js源代码分析 588

25.6.2 小程序中使用第三方js脚本模块 589

25.6.3 列表页面index.wxml源代码分析 590

25.6.4 列表页面index.wxss源代码分析 591

25.7 开发资讯小程序内容页面 592

25.7.1 内容页面index.js源代码分析 594

25.7.2 内容页面index.wxml源代码分析 599

25.7.3 内容页面index.wxss源代码分析 600