课程门户-章节详情

用户交互设计与实现

夏正伟

1 课程简介
- 1.1 为何要学习前端开发
- 1.2 前端学习路线
- 1.3 课程教案
- 1.4 课程教学日历
- 1.5 【课堂讨论】答疑解惑
- 1.6 线上教学示范
- 1.7 线上线下教学示范
2 JavaScript概述
- 2.1 本课我要学什么
- 2.2 任务1.1 认识JavaScript
- 2.3 开发工具的安装
- 2.4 任务1.2 在页面显示个人信息
- 2.5 任务1.3 测试综合案例在主流浏览器上的兼容性
- 2.6 第1章节测验
- 2.7 主题讨论
3 JavaScript基础
- 3.1 本课我要学什么
- 3.2 任务2.1 显示变量数据类型
- 3.3 任务2.2 根据成绩给出学生考评
- 3.4 任务2.3 实现猜数游戏
- 3.5 任务2.4 制作简易计算器
- 3.6 第2章节测验
- 3.7 主题讨论
4 JavaScript对象编程
- 4.1 本课我要学什么
- 4.2 任务3.1 在页面动态显示系统时间
- 4.3 任务3.2 制作随机选号器
- 4.4 任务3.3 制作简单的焦点图效果
- 4.5 任务3.4 使用JSON方式显示图书信息
- 4.6 任务3.5 验证注册页面信息
- 4.7 任务3.6 使用正则表达式验证注册页面信息
- 4.8 第3章节测验
- 4.9 主题讨论
5 BOM编程
- 5.1 本课我要学什么
- 5.2 任务4.1 制作弹窗效果
- 5.3 任务4.2 制作网页标题交替显示效果
- 5.4 任务4.3 制作复选框全选效果
- 5.5 第4章节测验
- 5.6 主题讨论
6 DOM编程
- 6.1 本课我要学什么
- 6.2 任务5.1 Core DOM方式动态添加表格 Core DOM方式动态添加表格
- 6.3 任务5.2 使用HTML DOM方式动态添加表格
- 6.4 第5章节测验
- 6.5 主题讨论
7 JavaScript与CSS交互
- 7.1 本课我要学什么
- 7.2 任务6.1 JavaScript动态改变导航菜单样式
- 7.3 任务6.2 制作图片轮显效果
- 7.4 任务6.3 制作随鼠标滚动的广告图片
- 7.5 第6章节测试
- 7.6 主题讨论
8 jQuery基础
- 8.1 线上学习引导文-交互特效1
- 8.2 本课我要学什么
- 8.3 课前测试
- 8.4 任务7.1 JQuery基础
- 8.5 课堂闯关游戏
- 8.6 任务7.2 列表的显示与收起
- 8.7 第7章节测试
- 8.8 主题讨论
9 jQuery中的DOM操作
- 9.1 线上学习引导文-交互特效2、3
- 9.2 本课我要学什么
- 9.3 课前测试
- 9.4 任务8.1 制作图片展示效果
- 9.5 任务8.2 制作留言板前端局部更新效果
- 9.6 课堂闯关游戏
- 9.7 任务8.3 制作电子邮件删除效果
- 9.8 第8章节测试
- 9.9 主题讨论
10 jQuery中的事件
- 10.1 线上学习引导文-交互特效4、5
- 10.2 本课我要学什么
- 10.3 课前测试
- 10.4 任务9.1 微博字数统计
- 10.5 课堂闯关游戏
- 10.6 任务9.2 制作图片提示效果
- 10.7 课前测试
- 10.8 任务9.3 制作横向导航菜单
- 10.9 课堂闯关游戏
- 10.10 第9章节测试
- 10.11 主题讨论
11 jQuery制作动画
- 11.1 线上学习引导文-交互特效6、7
- 11.2 本课我要学什么
- 11.3 课前测试
- 11.4 课堂闯关游戏
- 11.5 任务10.1 FAQ答案的显示和隐藏
- 11.6 课前测试
- 11.7 课堂闯关游戏
- 11.8 任务10.2 制作图片横向移动效果
  - 11.8.1 主题讨论
  - 11.8.2 第10章节测试
12 jQuery插件应用
- 12.1 线上学习引导文-交互特效8
- 12.2 本课我要学什么
- 12.3 课前测试
- 12.4 任务11.1 使用ss-Menu固定侧边栏插件
- 12.5 任务11.2 Pinterest Grid实现响应式网格瀑布流布局
- 12.6 任务11.3 编写表格隔行变色插件
- 12.7 主题讨论
13 拓展：Bootstrap（网络资源）
- 13.1 第1集 BootStrap安装和栅格系统
- 13.2 第2集 BootStrap排版样式
- 13.3 第3集 BootStrap代码、表格和表单样式
- 13.4 第4集 BootStrap表单样式
- 13.5 第5集 BootStrap按钮、图片、工具和响应式工具
- 13.6 第6集 BootStrap Glyphicons图标、下拉菜单、按钮组和按钮式下拉菜单
- 13.7 第7集 BootStrap输入框组和导航
- 13.8 第8集 BootStrap导航条
- 13.9 第9集 BootStrap面包屑导航、分页、标签、徽章、大屏幕显示、页面标题和缩略图
14 1+X Web前端开发考证
- 14.1 Web前端开发1+X职业技术等级证书的学习目标和学习线路图
- 14.2 JavaScript专项练习1
- 14.3 JavaScript专项练习2
- 14.4 jQuery专项练习1
- 14.5 jQuery专项练习2
- 14.6 jQuery专项练习3
- 14.7 jQuery专项练习4

任务4.1 制作弹窗效果

1 任务视频
2 教学课件
3 教学案例
4 练一练

任务视频V1.0

知识点

1.BOM参考模型

当用户在浏览器中打开一个页面时，浏览器就会自动创建一些对象，因为这些对象存放了浏览器窗口的属性和其他相关信息，被称为浏览器对象。浏览器对象模型BOM(Browser Object Model)描述了这些层次化对象的关系。Window是BOM的顶级对象，其下一层是document、 navigator、frames、location、history和screen对象。document的下一层是form、anchor、link、cookie和image等对象集合。每个层次上的对象都是其父对象的属性，可以通过“父对象.子对象”的方式访问，例如window.document，即document对象是window的属性。

分层结构.png

属性	描述及作用
window	窗体对象。表示浏览器中打开的窗口。若html文档包含框架(frame)，浏览器会为每个框架创建一个额外的 window 对象。是BOM的顶层对象。
document	每个载入浏览器的 HTML 文档。利用document可以实现对 HTML 页面中的所有元素进行访问。
navigator	浏览器对象。包含有关浏览器的信息，例如浏览器名称、厂商、版本等。
screen	客户端显示器对象。包含有关显示浏览器屏幕的信息，例如高度、宽度、色彩等。运用这些信息可以优化显示效果，实现用户的显示要求。
history	历史对象。记录在浏览器窗口中访问过的URL。
location	浏览器窗口中当前文档的URL
frames	窗口中所有命名的框架。是 window 对象的数组

2.window常用属性

属性	描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
length	设置或返回窗口中的框架数量
name	设置或返回窗口的名称
status	设置窗口状态栏的文本
outerheight	返回窗口的外部高度
outerwidth	返回窗口的外部宽度
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的X位置
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的Y位置
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的x坐标和y坐标。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY
opener	返回打开当前窗口的父窗口对象，是一个window对象
parent	返回父窗口对象，是一个window对象
self	返回当前窗口对象，是一个window对象
top	返回最顶层窗口对象。若窗口本身就是一个顶级窗口，则返回自身，是一个window对象

3.window常用方法

方法	描述
open	打开一个新的浏览器窗口
close	关闭浏览器窗口
alert	弹出警告框。显示一条提示消息和一个确认按钮
confirm	弹出确认框。显示一段确认信息，一个确认按钮，一个取消按钮
prompt	弹出提示框。是一个提示用户输入的对话框。
blur	把键盘焦点从顶层窗口移开
focus	把键盘焦点给予一个窗口
moveBy	相对窗口的当前坐标把它移动指定的像素
moveTo	把窗口的左上角移动到一个指定的坐标
print	打印当前窗口的内容
resizeBy	按照指定的像素调整窗口的大小
resizeTo	把窗口的大小调整到指定的宽度和高度
scrollBy	按照指定的像素值来滚动内容
scrollTo	把内容滚动到指定的坐标
setInterval	按照一定的时间间隔循环执行指定的方法。循环间隔即为周期，以毫秒为单位
setTimeout	经过特定时间段后执行一次指定的方法，时间段以毫秒为单位
clearInterval	取消setInterval效果
clearTimeout	取消setTimeout效果

教学课件V2.0

教学课件V1.0

制作弹窗效果

任务描述

在学信网注册时，点击文本框“就读学校”右侧的“选择”按钮，弹出学校列表窗口，选择某所学校后，自动关闭列表窗口返回注册窗口，“就读学校”文本框自动填充为之前选择的学校。

弹窗1.png

弹窗3.png

任务分析

（1）.完成注册静态页面设计(register.html)，页面7行2列的表格，内容为注册表单form。

（2）. 为就读学校文本框右侧的“选择”按钮添加单击事件处理函数openwindow()，在函数中调用window对象的open方法，打开学校列表页面(school.html)。该窗口没有菜单工具栏，包含滚动条。

（3）. 完成school.html静态页面，使用表格布局，学校名采用超链接，对每个a标记添加单击事件处理函数choose(this)。在该函数中把当前点击的学校名称传递给父窗口register.html并填充文本框，同时关闭子窗口。

任务实现

(1). openwindow事件代码如下：

functionopenwindow() {

//在新窗口中打开school.html文档，隐藏工具栏、菜单栏，需要滚动条

window.open("school.html","","width=400,height=400,top=100,left=200,toolbar=no,scrollbars=yes,resizable=yes,location=no,menubar=no");

}

(2). 完成school.html页面，把学校名称作为a标签的超链接文本，对每个a标签添加onclick事件，调用choose(obj)函数，其中obj参数为this，表示当前发生单击事件的a标签对象，部分代码如下：

<body>

<divid="mdA">

<tablewidth="300" border="0" cellspacing="0"cellpadding="0">

<tr>

<td><a href="#"onclick="choose(this)">广东科学技术职业学院</a></td>

</tr>

<tr>

<td><a href="#"onclick="choose(this)">番禺职业技术学院</a></td>

</tr>

<tr>

<td><ahref="#" onclick="choose(this)">吉林大学珠海学院</a></td>

<tr>

案例素材

在页面中如图1所示，单击“点击选择”，弹出一个宽100像素，高200像素的页面，如图2所示，选择其中的一个内容，相应的值会返回到前一个页面，如图3所示。

练习1.png

图1 页面效果

练习2.png

图2 弹窗效果

练习3.png

图3 返回值效果

参考答案

任务视频V2.0

任务视频V1.0

知识点

教学课件V2.0

教学课件V1.0

制作弹窗效果

任务描述

任务分析

任务实现

图片预览