《web前端设计》教案06.pdfVIP

教案

授课时间2018年4月11日第06周第5-8节

课程内容项目二JavaScript基础应用（Date、Math对象使用）

授课班级2016数字媒体应用技术1、2合班授课地点S301

1、了解对象、属性和方法

知识目标

2、掌握Date、Math对象的使用

1、熟练使用Date、Math对象完成时间显示和数学运算。

教学目标能力目标

2、能够使用系统对象解决实际问题

1、具有认真负责、吃苦耐劳、实事求是的工作态度和严谨细致的工作

素质目标

作风、良好的职业道德。

重点

1、对象的创建

2、对象属性和方法的使用

3、Date对象、Math对象的使用

重点难点

难点

解决方法

1、对象、属性、方法的概念

2、对象实例化

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习。课前统计

教学准备

并掌握学生的整体学习进度。

3、检查机房的广播设备。

课后作业页面显示日期，格式“2016-4-7星期四”

能力训练项任务1页面显示时间

目任务2制作随机选号

教学过程

（根据教学设计延续）

课前准备

1、登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情况。根据学生课前预

学提交网络教学平台的问题讨论，有针对性地调整知识点讲解的内容。

2、使用超星学习通移动端，进行点名签到。

一、任务引入

1、上一节课我们学习了函数，并设计了简单函数。有时候，我们需要在网页上实时显示时间，比如，今

天是XXXX年X月X日星期X。淘宝双11的倒计时，幸运大转盘，等等。是如何实现的？可以使用时间

日期对象date。引入本节课任务——自在网页显示时间和制作随机选号

2、教师展示任务的效果。

2.1网页显示时间

2.2随机选号

二、任务内容

1、打开网页，在网页导航栏空白地方，实时动态显示时间，如“15:45:12”。

要求：在网页打开时就显示时间，不需要按任何按钮。

2、打开网页，点击“开始”按钮，显示随机选号过程，按“结束”停止。

三、任务分析

任务1分析：

在页面动态显示系统时间，可以采用以下步骤：

1、设计静态页面设计，设计好要显示系统时间的位置。

2、定义函数，使用日期和时间对象，获取客户端系统时间。

3、在网页标签上显示时间。

4、使用定时函数，每隔一秒重新调用一次函数，刷新页面的时间

任务2分析：

实现随机选号页面的制作可以采用以下步骤：

1、产生1-60之间的随机整数，并在页面显示。

2、单击开始按钮时使用定时函数隔60毫秒产生一个随机整数。

3、单击停止按钮时清除定时函数。

四、知识讲解

1、JavaScript对象的概念

提问：日常生活中还有哪些对象？这些对象有哪些属性和方法？

JavaScript支持的对象包括以下几种：

内置对象：Date、Math、String、Array、Number等

浏览器对象：Window、History、Document等

自定义对象：

对象的使用：

（1）创建对象：var变量名new对象名()

（2）读取对象的属性：变量名.属性

（