网页基础与制作 3

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第10章JavaScript基础知识计划课时9课时教学引入通过前面章节的学习，相信大家已经能够运用HTML和CSS技术来搭建各式各样的网页了。但是，无论使用HTML和CSS制作的网页多么漂亮，最多实现的也只是一些小的动画效果，如果想要网页实现真正的动态交互效果（如焦点图切换、下拉菜单等），还需要使用JavaScript技术。本章将对JavaScript的基础知识进行详细讲解。教学目标使学生了解什么是JavaScript，能够描述JavaScript的概念使学生熟悉JavaScript语法规则，能够描述JavaScript的语法特点使学生熟悉数据类型，能够描述常见的数据类型使学生熟悉常见JavaScript事件，能够描述常见的JavaScript事件使学生掌握JavaScript引入方式，能够使用三种方式引入JavaScript使学生掌握JavaScript常用输出语句，能够使用输出语句输出运行结果使学生掌握数据基本操作，能够完成数据的运算使学生掌握常见的流程控制语句，能够进行判断和循环操作使学生掌握函数，能够根据实际需求在程序中定义并调用函数使学生掌握对象，能够正确定义和使用对象使学生掌握事件和事件调用，能够通过事件实现交互效果使学生掌握网页中常见的JavaScript特效，能够实现验证码和焦点图轮播效果教学重点JavaScript引入方式JavaScript常用输出语句数据基本操作常见的流程控制语句函数对象事件和事件调用常见的JavaScript事件教学难点JavaScript引入方式数据基本操作常见的流程控制语句函数对象教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一、二课时（JavaScript简介、JavaScript语法规则、JavaScript引入方式、JavaScript常用输出语句、简单的JavaScript页面）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课说起JavaScript其实大家并不陌生，在日常浏览的网页中或多或少都有JavaScript的影子。例如，浏览网页时的焦点图，每隔一段时间，焦点图就会自动切换。本节课将对JavaScript进行讲解。三、新课讲解知识点1-JavaScript简介教师通过PPT的方式讲解JavaScript简介。JavaScript的概念和作用JavaScript的常见应用验证用户输入的内容网页动态效果弹出提示框文字特效知识点2-JavaScript语法规则教师通过PPT的方式讲解JavaScript语法规则。按从上到下的顺序执行区分大小写字母每行结尾的分号可有可无注释规范知识点3-JavaScript引入方式教师通过PPT结合实际操作的方式讲解JavaScript引入方式。行内式内部式外部式知识点4-JavaScript常用输出语句教师通过PPT结合实际操作的方式讲解JavaScript常用输出语句。alert()console.log()document.write()知识点5-简单的JavaScript页面教师通过PPT结合实际操作的方式讲解简单的JavaScript页面。搭建网页嵌入JavaScript代码四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（数据类型、数据基本操作）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课任何一种程序语言设计，都离不开对数据的操作处理，对数据进行操作前必须要确定数据的类型。本节课将对数据类型、数据基本操作进行讲解。三、新课讲解知识点1-数据类型教师通过PPT结合实际操作的方式讲解数据类型。数字型字符串型布尔型空型未定义型知识点2-数据基本操作教师通过PPT结合实际操作的方式讲解数据基本操作。算术运算比较大小赋值使用字符串保存数据比较两个字符串是否相同字符串与数字的拼接使用变量保存数据四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（常见的流程控制语句）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在JavaScript中主要的流程控制语句有条件语句、循环语句和跳转语句等，本节课将针对几种常见的流程控制语句进行详细讲解。三、新课讲解知识点-常见的流程控制语句教师通过PPT结合实际操作的方式讲解常见的流程控制语句。if条件语句单向判断语句双向判断语句多向判断语句for循环语句跳转语句break跳转语句continue跳转语句四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（函数）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在JavaScript程序中，经常会将一些功能多次重复操作，这就需要重复书写相同的代码，这样不仅加重了开发人员的工作量，而且增加了代码后期的维护难度。为此，JavaScript提供了函数，它可以将程序中烦琐的代码模块化，提高程序的可读性。本节课将针对函数的相关知识进行讲解。三、新课讲解知识点-函数教师通过PPT结合实际操作的方式讲解函数。认识函数调用函数函数中变量的作用域四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（对象）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课JavaScript是一种基于对象的脚本语言，在JavaScript中，除了语言结构、关键字以及运算符之外，其他所有事物都是对象。对象在JavaScript中扮演着重要的角色，本节课将针对对象的相关知识进行详细讲解。三、新课讲解知识点-对象教师通过PPT结合实际操作的方式讲解对象。认识对象window对象document对象元素对象常用操作自定义对象四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（事件和事件调用、常见的JavaScript事件）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课事件是指可以被JavaScript侦测到的交互行为，如在网页中滑动、单击、滚动屏幕，敲击键盘等。当发生事件以后，可以利用JavaScript编程来执行一些特定的代码，从而实现网页的交互效果。本节课将对事件和事件调用、常见的JavaScript事件进行讲解。三、新课讲解知识点1-事件和事件调用教师通过PPT结合实际操作的方式讲解事件和事件调用。事件的概念调用事件处理程序通过案例演示事件知识点2-常见的JavaScript事件教师通过PPT结合实际操作的方式讲解常见的JavaScript事件。鼠标事件键盘事件表单事件页面事件四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第八课时（验证码、焦点图轮播）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课验证码就是一串随机产生的数字或符号，在用户登录或注册网站账号过程中经常出现。用户需要将验证码输入表单并提交网站验证，验证成功后才能使用某项功能。焦点图可以将文字信息图片化，通过更直观的信息展示吸引用户。本节课将对验证码、焦点图轮播进行讲解。三、新课讲解知识点1-验证码教师通过PPT结合实际操作的方式讲解验证码。案例效果案例代码知识点2-焦点图轮播教师通过PPT结合实际操作的方式讲解焦点图轮播。案例效果案例代码四、归纳总结教师回顾本节课所讲的知识，并