《JavaScript+jQuery交互式Web前端开发（第2版）》 教案-教学设计 第1章 初识JavaScript

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE4《JavaScript+jQuery交互式Web前端开发（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第1章初识JavaScript计划课时4课时教学引入Web前端开发必备的技术包括HTML（HypertextMarkupLanguage，超文本标记语言）、CSS（CascadingStyleSheets，串联样式表）和JavaScript。HTML和CSS用于创建美观且易于理解的网页布局和页面样式，但对于具有交互性和动态性的网页，JavaScript是必不可少的。因此，学习Web前端开发并实现更为复杂的交互效果和功能不仅需要掌握HTML和CSS的基础知识，还需要掌握JavaScript技术。本章将介绍JavaScript基本概念、JavaScript开发工具、JavaScript基本使用和变量等内容，让读者对JavaScript有初步的认识。教学目标使学生了解JavaScript基本概念，能够描述JavaScript的作用、由来、组成和特点使学生了解浏览器的组成，能够描述浏览器的特点以及作用使学生掌握下载和安装VisualStudioCode编辑器的方法，能够独立下载和安装编辑器使学生掌握JavaScript代码的引入方式，能够灵活运用行内式、内部式、外部式的方式引入JavaScript代码使学生掌握JavaScript常用的输入输出语句，能够灵活运用prompt()、alert()、document.write()、document.log()语句使学生掌握JavaScript注释的使用，能够合理运用单行注释、多行注释增强代码的可读性使学生了解什么是变量，能够描述变量的概念使学生掌握变量的命名规则，能够根据变量的命名规则为变量命名使学生掌握变量的声明与赋值，能够声明变量并为其赋值教学重点JavaScript代码引入方式JavaScript常用的输入输出语句JavaScript注释变量的命名规则变量的声明与赋值教学难点【案例】交换两个变量的值教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（JavaScript概述、JavaScript的由来、JavaScript的组成、JavaScript的特点、浏览器、代码编辑器）一、通过直接引入的方式导入新课学习任何一种语言，我们都需要了解其基本概念，JavaScript也不例外。本节课将对JavaScript的基本概念和开发工具进行讲解。通过本节课的学习，让大家对JavaScript有一个初步的认识，为后续学习交互式的开发奠定基础。二、新课讲解知识点1-JavaScript概述教师通过PPT的方式讲解JavaScript概述。JavaScript的概念和作用。HTML、CSS和JavaScript的说明。知识点2-JavaScript的由来教师通过PPT的方式讲解JavaScript的由来。为什么会出现JavaScript。JavaScript是如何走向标准化的。JavaScript和ECMAScript的关系。知识点3-JavaScript的组成教师通过PPT的方式讲解JavaScript的组成。对JavaScript的3个组成部分进行介绍。ECMAScriptDOMBOM知识点4-JavaScript的特点教师通过PPT的方式讲解JavaScript的特点。对JavaScript的3个特点进行介绍。简单易用跨平台面向对象知识点5-浏览器教师通过PPT的方式讲解浏览器。浏览器的概念。常见的浏览器及其特点。浏览器的组成。知识点6-代码编辑器教师通过PPT结合实际操作的方式讲解代码编辑器。常见的JavaScript代码编辑器。VisualStudioCode代码编辑器的特点。下载和安装VisualStudioCode代码编辑器。安装中文语言扩展。安装LiveServer扩展。创建项目文件夹。三、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第二课时（JavaScript初体验、JavaScript代码引入方式、JavaScript常用的输入输出语句、JavaScript注释）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在上一节中讲解了JavaScript的基本概念和开发工具，下面本节课将会讲解JavaScript的基本使用，包括JavaScript初体验、JavaScript代码引入方式、JavaScript常用的输入输出语句和JavaScript注释。三、新课讲解知识点1-JavaScript初体验教师通过PPT结合实际操作的方式讲解JavaScript初体验。通过一个案例演示如何在VisualStudioCode代码编辑器中编写一段简单的JavaScript代码。本案例的需求是打开网页时自动弹出一个警告框，警告框中的提示内容为“锲而不舍，金石可镂”。知识点2-JavaScript代码引入方式教师通过PPT结合实际操作的方式讲解JavaScript代码引入方式。分别介绍3种JavaScript代码的引入方式。行内式内部式外部式外部式相比内部式的优势。知识点3-JavaScript常用的输入输出语句教师通过PPT结合实际操作的方式讲解JavaScript常用的输入输出语句。分别介绍常用的输入输出语句。prompt()语句alert()语句document.write()语句console.log()语句知识点4-JavaScript注释教师通过PPT结合实际操作的方式讲解JavaScript注释。分别介绍JavaScript中的单行注释和多行注释。单行注释多行注释四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式检测学生对JavaScript基本使用的掌握情况。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第三课时（什么是变量、变量的命名规则、变量的声明与赋值、【案例】使用变量保存商品信息、【案例】使用变量保存用户输入的值、【案例】交换两个变量的值）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在程序中，变量可以作为存储数据的容器，用于保存临时数据，并在需要时可以设置、更新或读取变量中的内容。此外，变量还可以保存用户输入的数据或运算结果。本节课将讲解什么是变量、变量的命名规则、变量的声明与赋值，并通过3个案例巩固变量的使用。三、新课讲解知识点1-什么是变量教师通过PPT讲解什么是变量。什么是变量。变量的组成。知识点2-变量的命名规则教师通过PPT讲解变量的命名规则。变量的命名规则。变量命名的建议。知识点3-变量的声明与赋值教师通过PPT结合实际操作的方式讲解变量的声明与赋值。先声明变量后赋值。声明变量的同时并赋值。知识点4-【案例】使用变量保存商品信息教师通过PPT结合实际操作的方式讲解【案例】使用变量保存商品信息。通过一个案例演示如何使用变量保存商品信息。其中，商品名称为衬衫，商品颜色为白色，商品价格为50，商品尺寸为均码。编写代码实现案例。知识点5-【案例】使用变量保存用户输入的值教师通过PPT结合实际操作的方式讲解【案例】使用变量保存用户输入的值。通过一个案例演示如何使用变量保存用户输入的值。声明一个email变量，当用户打开页面时提示用户输入邮箱，用户输入完邮箱后并单击“确定”按钮后，页面将显示用户的邮箱。编写代码实现案例。知识点6-【案例】交换两个变量的值教师通过PPT结合实际操作的方式讲解【案例】交换两个变量的值。通过一个案例演示如何交换两个变量的值。首先定义两个变量apple1和apple2，其中，变量apple1的值为红苹果，变量apple2的值为青苹果，然后定义第3个变量temp来保存临时数据，实现红苹果和青苹果的交换。编写代码实现案例。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式检测学生对变量的基本使用的掌握情况。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第四课时（上机练习）上机练习主要针