用户交互设计与实现

夏正伟

目录

  • 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
本课我要学什么

第1章 JavaScript概述

【本课知识点】

  1. JavaScript语言的特点

  2. JavaScript的的组成

  3. 开发工具的安装

  4. 在页面引入JavaScript的方式

【教学目标】
知识目标

  1. 了解JavaScript的作用

  2. 了解JavaScript的特点

  3. 掌握Javascript的组成

  4. 掌握在页面引入JavaScript的方式

  5. 了解浏览器兼容性问题

能力目标

  1. 能理解JavaScript的作用

  2. 能理解JavaScript的特点

  3. 掌握Javascript的组成

  4. 会安装使用JavaScript开发工具

  5. 掌握在页面引入JavaScript的方式

  6. 会使用Chrom控制台调试程序

素质目标

  1. 培养学生遵守开发规范的意识

  2. 培养学生的团队合作精神

  3. 培养学生自主学习的意识

【重难点】
重 点

  1. 掌握JavaScript的组成

  2. 掌握在页面引入JavaScript的方式

难 点

  1. 掌握在页面引入JavaScript的方式

【课堂任务】

任务1：认识JavaScript

任务2：在页面显示个人信息

任务3：测试综合案例在主流浏览器上的兼容性

任务4：使用Chrome浏览器控制台

知识思维导图