Javascript程序设计 教案-单元设计 张劲波 第1-5章 JavaScript概述-CSS进阶

PAGEPAGE2课程单元设计课程名称：JavaScript程序设计适用专业：所属院系：信息工程学院编制人：制定时间：年至年第一学期

《JavaScript程序设计》教案设计一、教案头本单元标题：第1章 JavaScript概述授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1.理解Javascript的起源2.能安装代码编辑器EditPlus或者DreamViewer软件3.掌握编辑器的基本用法4.掌握编辑器EditPlus或者DreamViewer软件的基本用法1.Javascript的起源2.浏览器之争3.JavaScript的编辑环境4.JavaScript的实现与小体验能力训练任务及案例一、能力训练任务编写第一个JavaScript网页二、案例案例1：定时打开窗口案例2：日期选择器参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Javascript的起源课件、视频听讲教材网络资源多媒体10分钟讲授1.浏览器之间的冲突2.标准的制定3.Javascript的实现ECMAscript、DOM、BOM）4.编辑器EditPlus或DreamViewer的安装5编辑器EditPlus或DreamViewer的基本功能6编辑实现第一个js程序“HelloWorld”课件演示模拟演练听讲实际操作教材网络资源多媒体电脑60分钟操练器EditPlus或DreamViewer的安装使用EditPlus实现第一个js程序“Helloworld”演示实际操作教材网络资源多媒体电脑70分钟总结vascript概况实现js程序的流程讲解集体参与教材20分钟作业布置给网站首页加上自动问候的功能。网页将可以在不同的时段向访问者显示不同的问候语，例如在上午8:00—9:00就向用户显示“早上好”，如果在下午则显示“下午好”。我们将定义的时间段对应得问候语列在下面：0:00—06:00你不会是熬通宵吧，别太辛苦哦！06:00—08:00早上好08:00—11:00上午好11:00—13:00午饭吃过了吗13:00—17:00 下午好17:00—24:00晚上好2.完成个人网站中“欢迎光临”标语的显示讲解集体参与网络资源多媒体电脑20分钟学习成果完成第一个JavaScript网页编写2、完成定时打开窗口操作3、完成日期选择器操作教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、变量的声明及赋值1、语法2、变量能力训练任务及案例一、能力训练任务1、JavaScript语法学习2、变量命名规则二、案例案例1：变量定义实例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Javascript的实现课件演示听讲教材网络资源多媒体10分钟讲授1.Javascript基本语法要求2.变量的声明及赋值课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练引入一个小例子实现对字符串、数值等变量的赋值操作演示讲解任务驱动实际操作教材网络资源多媒体电脑30分钟总结变量声明及赋值的方法讲解集体参与教材10分钟作业布置找出javascript变量声明及赋值方法与Java语言中的区别讲解集体参与网络资源多媒体电脑10分钟学习成果学会JavaScript基本语法懂得变量的声明及赋值教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能正确理解各种数据类型并使用相应的数据类型2、对关键字和保留字能正确理解并使用1、数据类型2、关键字和保留字能力训练任务及案例一、能力训练任务正确使用各种数据类型二、案例案例1：连接字符串案例2：字符串字母大小写传换案例3：获取字符串长度示例案例4：数值运算示例案例5：布尔型转换字符串参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习变量的声明及赋值课件演示听讲教材网络资源多媒体10分钟讲授1.6种主要数据类型介绍，并通过小例子加深学生对数据类型的理解2.关键字和保留字的注意事项课件演示模拟演练任务驱动听讲实际操作教材网络资源多媒体电脑80分钟操练引入一个小例子分别使用6种重要的数据类型演示讲解实际操作教材网络资源多媒体电脑70分钟总结6种数据类型数据使用的注意事项讲解集体参与教材10分钟作业布置设置个人网站中对不同数据的使用实现不同显示项目讲解集体参与网络资源多媒体电脑10分钟学习成果1、能够正确使用各种数据类型2、正确完成所有案例教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用条件逻辑控制语句1、条件语句能力训练任务及案例一、能力训练任务学会各种条件语句来进行流程上的判断二、案例案例1：if语句示例案例2：switch语句示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习变量的数据类型课件演示听讲教材网络资源多媒体10分钟讲授根据时间显示不同问候语的例子讲解：1.ifelse条件逻辑控制语句2.switchcase逻辑控制语句课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练用一个根据不同条件执行不同操作的实例让同学加深对这2种条件语句的理解演示讲解实际操作教材网络资源多媒体电脑30分钟总结Ifelse语句和switchcase的相同和不同点讲解集体参与教材10分钟作业布置实现根据价格高低来判断是否奢侈品的程序实现讲解集体参与网络资源多媒体电脑10分钟学习成果懂得利用各种条件语句来进行流程上的判断教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用循环逻辑控制语句1、循环语句能力训练任务及案例一、能力训练任务各种循环语句的运用二、案例案例1：break语句示例案例2：continue语句示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习条件语句课件演示听讲教材网络资源多媒体10分钟讲授实例：利用循环计算从1累加到100。通过实例的讲解来解释循环语句使用的规则课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：在网页中显示做1,000,000次加操作所耗费的时间演示讲解实际操作教材网络资源多媒体电脑30分钟总结循环语句的循环起始、条件及自加表达式的注意事项讲解集体参与教材10分钟作业布置计算从出生到现在的天数讲解集体参与网络资源多媒体电脑10分钟学习成果正确使用循环语句教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用函数，理解对象和BOM基础1、函数、对象和BOM基础能力训练任务及案例一、能力训练任务正确使用函数来实现功能二、案例案例1：JavaScript函数调用示例案例2：argument示例案例3：date对象示例案例4：date对象示例案例5：confirm对话框演示示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习循环语句课件演示听讲教材网络资源多媒体10分钟讲授1.实例：对两个数进行加减乘除四则运算。通过事例的讲解加深学生对函数的理解2.Date对象的介绍及BOM中常用的对象介绍课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：使用有参函数的调用实现对两数的四则运算演示讲解实际操作教材网络资源多媒体电脑30分钟总结无参及有参函数使用的注意事项讲解集体参与教材10分钟作业布置通过函数实现计算在网页中显示做1,000,000次加操作所耗费的时间讲解集体参与网络资源多媒体电脑10分钟学习成果正确使用函数来实现功能教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第3章Javascript开发授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确使用alert()函数及浏览器的开发人员工具来对程序进行调试。1、调试js程序的工具及手段能力训练任务及案例一、能力训练任务学会进行单步运行、单步跳过及怎样添加监视点二、案例案例1：九九乘法表参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习javascript基本语法课件演示听讲教材网络资源多媒体10分钟讲授实例：打印九九乘法表。通过对实例的调试讲解，让学生掌握使用alert()函数及浏览器的开发人员工具调试程序课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：调试打印菱形程序演示讲解实际操作教材网络资源多媒体电脑30分钟总结使用浏览器的开发人员工具单步调试需要注意的事项讲解集体参与教材10分钟作业布置用JavaScript计算借贷支出讲解集体参与网络资源多媒体电脑10分钟学习成果学会进行单步运行、单步跳过及怎样添加监视点教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第4章CSS基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能正确使用三种方式来实现控制页面方法2、掌握三种CSS选择器的使用1、CSS的概念2、CSS控制页面的方法3、CSS选择器能力训练任务及案例一、能力训练任务正确使用三种方式来实现控制页面方法三种CSS选择器的使用二、案例案例1：行内样式表简单实用示例案例2：嵌入式样式表应用示例案例3：导入式样式表应用示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习js调试程序方法课件演示听讲教材网络资源多媒体10分钟讲授1.分别使用三种方法实现控制页面种文字及图片的风格样式2.对网页中不同标签分别使用标记选择器，类别选择器及ID选择器来控制页面不同元素的风格样式课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练对一个页面中不同的元素实现不同的风格样式演示讲解实际操作教材网络资源多媒体电脑60分钟总结三种选择器的不同适应环境讲解集体参与教材15分钟作业布置对个人网站实现不同的风格样式设计讲解集体参与网络资源多媒体电脑15分钟学习成果正确使用三种方式来实现控制页面方法懂得三种CSS选择器的使用教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第4章CSS基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能对文字设置各种效果2、能对图片设置双边框及图文混排效果3、能对页面背景进行设置1、CSS设置文字效果2、CSS设置图片效果3、CSS设置页面背景能力训练任务及案例一、能力训练任务掌握各种CSS文字效果的设置及页面背景的设置二、案例案例1：段落样式首行缩进案例2：字体间隔应用示例案例3：首字放大应用示例案例4：图文混排简单示例案例5：背景颜色、图片设置示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习三种CSS选择器课件演示听讲教材网络资源多媒体10分钟讲授1、对给定的一段文字设置首字放大，字体字号等效果。2、四张图片实现双边框效果。课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练设置页面的背景为一张具有双边框效果的图片演示讲解实际操作教材网络资源多媒体电脑60分钟总结文字效果的属性，图片及图文混排的不同属性设置讲解集体参与教材15分钟作业布置对个人网站种的文字图片及段落实现不同的风格样式设计讲解集体参与网络资源多媒体电脑15分钟学习成果学会页面背景的设置及各种文字样式的设计教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第5章CSS进阶授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能使用DIV与SPAN标记布局页面2、盒模型布局页面1、块级元素和行内级元素2、DIV与SPAN标记布局页面3、盒模型能力训练任务及案例一、能力训练任务学会DIV与SPAN标记布局页面及盒模型布局二、案例案例1：DIV标记示例案例2：<div>与<span>元素样式对比案例3：盒子模型结构示例案例4：边框示例案例5：padding使用示例案例6：margin示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习CSS基础内容课件演示听讲教材网络资源多媒体10分钟讲授1.通过盒子模型结构示例讲解块级和行内级元素的区别及适应范围。2.讲解盒模型种padding,margin,border的区别。课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练图文层叠示例的实现演示讲解实际操作教材网络资源多媒体电脑65分钟总结DIV及