学习情境1 JS动态显示内容

  1.1 任务引入

  1.2 任务分析

    1.2.1 任务目标

    1.2.2 设计思路

  1.3 任务实施

    任务1 创建站点和HTML页面

    任务2 在页面中添加JS代码

    任务3 实现JS在页面中动态显示内容

  1.4 知识小结

    1.4.1 ＜script＞标签

    1.4.2 document.write()

    1.4.3 JS代码添加方式

  1.5 知识拓展

    1.5.1 警告框alert

    1.5.2 JS中的数据类型

    1.5.3 JS中的变量

  1.6 能力拓展

    1.6.1 常用JS调试方法

    1.6.2 写出优秀JS程序的基础——良好的编码习惯

  1.7 思考与练习

学习情境2 简易计算器

  2.1 任务引入

  2.2 任务分析

    2.2.1 任务目标

    2.2.2 设计思路

  2.3 任务实施

    任务1 站点的建立以及页面的布局

    任务2 按钮功能的实现

    任务3 加减乘除的实现

  2.4 知识小结

    2.4.1 通过id获取页面标签

    2.4.2 获取文本框的值

    2.4.3 数据类型转换

    2.4.4 基本运算符

  2.5 知识拓展

    2.5.1 函数

    2.5.2 按钮的单击事件

  2.6 能力拓展

  2.7 思考与练习

学习情境3 表单验证

  3.1 任务引入

  3.2 任务分析

    3.2.1 任务目标

    3.2.2 设计思路

  3.3 任务实施

    任务1 表单结构布局

    任务2 及时判断输入信息

    任务3 获取和验证输入信息

    任务4 阻止错误信息的提交1

    任务5 阻止错误信息的提交2

  3.4 知识小结

    3.4.1 表单＜form＞的onsubmit事件

    3.4.2 字符串的length属性与indexof()方法

  3.5 知识拓展

    3.5.1 条件判断语句if...else

    3.5.2 一些简单的字符串操作

  3.6 能力拓展

    HTML5 表单验证

  3.7 思考与练习

学习情境4 ：二级菜单

  4.1 任务引入

  4.2 任务分析

    4.2.1 任务目标

    4.2.2 设计思路

  4.3 任务实施

    任务1 在页面中添加banner(横幅广告)结构

    任务2 页面中一级菜单的布局

    任务3 页面中二级菜单的布局

    任务4 显示二级菜单

    任务5 隐藏二级菜单

  4.4 知识小结

    4.4.1 二级菜单的结构特点

    4.4.2 二级菜单的样式特点

    4.4.3 onmouseover与onmouseout事件

  4.5 知识拓展

    4.5.1 getElementByld与getElementsByTagName

    4.5.2 JS控制标签的CSS属性

    4.5.3 JS中的事件

    4.5.4 函数的传参

  4.6 能力拓展

  4.7 思考与练习

学习情境5 电子时钟

  5.1 任务引入

  5.2 任务分析

    5.2.1 任务目标

    5.2.2 设计思路

  5.3 任务实施

    任务1 时钟结构布局

    任务2 获取系统时间

    任务3 显示系统时间

    任务4 时间走动

  5.4 知识小结

    5.4.1 Date对象

    5.4.2 innerHTML属性

    5.4.3 计时器：setlnterval

  5.5 知识拓展

    5.5.1 函数延迟调用：setTimeout

    5.5.2 选择流程语句：switch

  5.6 能力拓展

    5.6.1 双位数显示时间

    5.6.2 计算时间间距

  5.7 思考与练习

学习情境6 选项卡

  6.1 任务引入

  6.2 任务分析

    6.2.1 任务目标

    6.2.2 设计思路

  6.3 任务实施

    任务1 选项卡结构布局

    任务2 获取选项卡标签

    任务3 修改标签样式

    任务4 关联选项卡所选标签和对应的内容

  6.4 知识小结

    6.4.1 关键字：this

    6.4.2 className属性

    6.4.3 标签的自定义属性

  6.5 知识拓展

    6.5.1 childNodes与children

    6.5.2 循环语句：for语句

  6.6 能力拓展

    自定义属性兼容性

  6.7 思考与练习

学习情境7 无缝滚动

  7.1 任务引入

  7.2 任务分析

    7.2.1 任务目标

    7.2.2 设计思路

  7.3 任务实施

    任务1 页面公告板块的布局

    任务2 实现公告的无缝向上滚动

    任务3 鼠标控制无缝滚动的暂停与开始

  7.4 知识小结

    7.4.1 滚动原理

    7.4.2 offsetHeight属性

  7.5 知识拓展

    7.5.1 innerHTML属性

    7.5.20 ffsetHeight和offsetWidth属性

  7.6 能力拓展

    7.6.1 垂直图片滚动

    7.6.2 内容的水平滚动(图片或文字)

  7.7 思考与练习

  ……

学习情境8 图片切换

学习情境9 省市级联

学习情境10 jQuery制作二级菜单

学习情境11 jQuery制作选项卡

学习情境12 AJAX注册用户名检测

附录