《网站前端技术》教案第18课JavaScript基础（一）.docx
课题第18课JaVaSeriPt基础（一）课时2课时(90min)教学目标知识技能目标：（1）掌握JaVaSCriPl的作用和语法（2）掌握常量、变量的使用方法素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：JaVaSCriPl作用和语法教学难点：JavaScript常量、变量的使用方法教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（8min）一传授新知（35min）第2节课：问题导入（5min）T传授新知（25min）T课堂讨论（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JaVaSCriPt的作用、语法等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题什么是JavaScript?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（35min）4.1 JaVaSCriPt概述【教师】讲解JaVaSeriPt的概念、作用等相关内容4.1.1 认识JaVaSCriPtJavaScript是一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言，使用它可以开发Inlernet客户端的应用程序。它的解释器称为JaVaSCriPt引擎，是浏览器的TP分。JavaScript在HTML网页中以语句的形式出现，并执行相应操作，主要用于给HTML网页增加动态功能。通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript作用和语法等内容【课堂互动】十【教师】提问JavaScript具有什么特点？【学生】聆听、思考、回答(1)简单性。JaVaSCriPt采用/雇序段的方式实现编程，并提供了一个简易的开发过程。(2)基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象,也能使用现有的对象。(3)动态性。JavaScript是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。(4)跨平台性。JaVaSCriPl是依赖于浏览器本身，与操作环境无关的脚本语言。也就是说，无论计算机是Windows操作系统还是其他操作系统，只要它能运行浏览器，且浏览器支持JavaScript,计算机就可以正确执行JavaScript脚本语言。(5)安全性。JavaScript是一种安全性语言,它不允许访问本地硬盘，且不能将孀存入服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。(详见教材)4.1.2JaVaSCriPt的作用【课堂互动】+【教师】提问JavaScript的主要作用有哪些？十【学生】聆听、思考、回答(I)将动态文本嵌入HTML页面。(2)对浏览器事件做出响应。(3)读写HTML元素。(4)在数据提交到服务器之前验证数据。(5)检测访客的浏览器信息。控制cookies,包括创建和修改等。(6)基于Nodejs技术进行服务器端编程。4.1.3JaVaSCriPt代码嵌入HTML中的方法通常情况下，将JaVaSCriPt代码嵌入到HTML文档中的方法有三种，包括在HTML文档中直接嵌入JaVaSCriPl代码；连接外部JaVaSCriPl文件；作为特定标签的属性值使用。1 .在HTML文档中直接嵌入JaVaSCriPt代码在HTML文档中，将JaVaSCriPl代码直接放在<script></SCriP标签内，基本格式如下：<scriptlanguage=',javascript">JavaScript程序代码<script>【指点迷津】IangUage属性用于设置所使用的脚本语言及版本。但是，在Web标准中，建议使用type属性代替language属性。【示例4-1-1在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript">alert（"欢迎您的到来!"）;<script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”对话框显示效果”图片（详见教材），并讲解效果：页面加载后，弹出对话框，显示"欢迎您的到来！"。2 .连接外部JavaScript文件编写外部JavaScript文件（文件后缀名为Js）,并通过scrip。标签的SrC属性将该文件导入HTML文档中，基本格式如下：<scriptlanguage="javascript"src="JavaScript文件路径”><script>【示例4-1-2新建ex4OIO2js文件并保存在网站的js目录中，接着在该文件中输入以下代码：alert（"欢迎您的到来！"）；将ex40102.js文件导入HTML文档中，即在HTML文档<head>标签内输入<scripi>标签，代码如下：<scriptlanguage="javascript"src="jsex40102.js"><script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面加载后，同样弹出对话框，且显示"欢迎您的到来！"。3 .作为特定标签的属性值使用在VSCriPI><scripl>标签内或在外部JaVaSCriPl文件内定义函数，然后在某标签的某事件属性中引入函数名。示例4-1-3在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript">functionfun（）alert（"欢迎您的到来!"）;<script>在HTML文档VbO<ly>标签内输入Vi叩ul>标签。代码如下：<inputtype="button"value="弹出信息"onClick="fun（）"/>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”页面显示的弹出信息按钮”图片（详见教材），并讲解效果：页面加载后,显示“弹出信息"按钮。单击该按钮后弹出对话框，且显示"欢迎您的到来！".【学生】聆听、记录、理解4 .2JavaScript语法【教师】讲解JaVaSCriPt代码格式、大小写规范等语法内容4.2.1JavaScript代码格式【多媒体】组织学生扫码播放"JavaScript语法”视频(详见教材)，让学生对这部分内容有一个大致地了解每条JaVaSCriPt代码语句以英文分号作为结束标志。有时候也可以省略英文分号，以换行符作为语句结束的标志。但是，这种做法在特定的情况容易引发解析错误，因此建议使用英文分号作为语句结束标志。JaVaSCriPt代码的编写比较自由,它一般会忽略分隔符，如空格符、制表符和换行符等。在保证不引起歧义的情况下，用户可以利用分隔符对脚本进行排版。为了增强程序可读性，方便进一步编辑和修改，排版建议一行只写一条语句，并在运算符前后各加一个空格。JaVaSCriPt代码的编写格式如下：varal=20;varh=40;varsum;sum=al+h;在书写JaVaSCriPt代码时，还应该注意以下几点。(1)在函数名、变量名等标识符中，不可以加入空白字符。(2)字符串和正则表达式的空白字符是其组成部分，JavaSCriPt解释器将会保留。(3)编写代码时应根据结构进行缩进，提高程序的可读性.4.2.2 大小写规范JaVaSCriPt对字母的大/J4是敏感的,它严格区分字母大小写，即在输入语言的关键字、函数名、变量和其他标识符时，必须采用正确的大与形式。【课堂互动】十【教师】提问JavaScript为什么要严格区分字母大/与?*【学生】聆听、思考、回答4.2.3 注释【教师】讲解JaVaSCriPt注释【课堂互动】【教师】提问JavaScript的注释可分为哪几种?+【学生】聆听、思考、回答JavaScript代码也有注释标记，可以对某一段代码进行注释，JavaScript解释器将忽略注释部分。和其他的程序语言相同，JaVaSCriPl的注释可以分为单行注释和多行注释。2.多彳亍主释以"/*"开头，以“*广结尾，包含在该符号内的部分为注释内容.示例4-2-1在HTML文档scripl标签内输入以下代码：varx=30;单行注释：定义名为X的变量，其初值为30VarteXt="网页设计"；产多行注释：定义名为text的变量,并且其值为字符串“网页设计"*/【提示】代码第2行为单行注释行，代码第4、5行为多行注释行。4.2.4 JaVaSCriPt中的保留字编程语言都有属于自己的保留字，一般在一些特殊场合使用这些单词.保留字都含有特定的含义，它都不可以用磔量、标签或函数名。【教师】PPt展示“JavaScript中的保留字”表格（详见教材），并讲解4.2.5 输出方法1 .页面输出页面输出是根据用户动作触发事件将元素加载到页面上的。该输出方法采用函数documeniwriie（"要输出的内容”）实现，其中"要输出的内容"中可以含有标签.示例4-2-2在HTML文档script标签内输入以下代码：document,write（"div页面输出函数div"）;效果：在页面添加Vdiv元素，内容为"页面输出函数"。2 .控制台输出控制台输出是在控制台输出内容，应用于调试。它的代码实现格式为ConSOlelog（"要输出的内容"）,开发者常使用该函数设置断点测试程序。【示例4-2-3在HTML文档scripl标签内输入以下代码：ConSOle.log（"控制台消息"）；【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面加载后，没有伊可东西。单击Fl2,打开开发人员工具视图，选择Xonsolew（控制台）选项卡，便可以看到控制台中的输出内容"控制台消息"。【提示】不同的浏览器打开开发人员工具视图的方式略有不同。3 .弹窗输出弹窗输出是指在浏览器中弹出一个对话框，然后把要输出的内容展示出来。【课堂互动】【教师】提问根据作用的不同，弹窗可分为哪几种?÷【学生】聆听、思考、回答根据作用的不同，弹窗可分为警告框、确认框、提示框。（I）警告框aert（”要输出的内容”）可以弹出窗口，显示信息，并测试程序运行效果。【示例4-2-4在HTML文档scripl标签内输入以下代码：alerU”弹出框消息”）；效果：当相关联的HTML页面加载或触发相关事件时，弹出警告框，内容为"弹出框消息"。（2）确认框COnfirm（"要输出的内容"）用于用户确认某项信息。确认框必须做出“确定"或"取消"操作后，才能让程序继续运行.当选择“确定"按钮则返回true,当选择"取消"按钮则返回false.【示例4-2-5在HTML文档scripl标签内输入以下代码：vara=confirm（"您是大学生吗？"）;if（a）alert（“欢迎您，您将是大学生俱乐部的一员！"）；elsealert（“对不起，大学生俱乐部只接受大学生！"）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“确认框运行效果”图片（详见教材），并讲解效果：页面加载后，弹出确认框"您是大学生吗？"。当选择"确定"按钮，则弹出"欢迎您，您将是大学生俱乐部的一员！"；当选择"取消"按钮，则弹出”对不起，大学生俱乐部只接受大学生！”。（3）提示框PromP1（”要输出的内容”）用于弹出输入信息框，提示用户输入某种类型的数据，可以接收用户输入数据，并返回输入的信息。【示例4-2-6在HTML文档script标签内输入以下代码：varname=PromPt（"请输入您的姓名"）;alert（"您的姓名是"+name）;【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”提示框运行效果”图片（详见教材），并讲解效果：页面加载后，弹出提示框，提示内容为"请输入您的姓名"，输入姓名"闫妮"。此时，如果单击“确定"按钮，弹出"您的姓名是闫妮"；如果单击"取消"按钮，弹出"您的姓名是null”。【学生】聆听、记录、理解第二节课问题导入(5min)【教师】提出以下问题什么是常量与变量？【学生】思考、举手回答>通过提问引导学生思考本节课内容传授新知(25min)4.3.1 常是【教师】讲解JaVaScriPt常量的使用方法常量是指在程序运行的过程中值不发生改变的数据。例如，“123”是数值型常量，"JavaScript脚本"是字符串型常量，"ture"或"false"是布尔型常量等。常量主要用于为程序提供固定的值或精确的值，使用COnSl进行声明，其语法格式如下：const常量名称=常量值；【学生】聆听、记录、理解4.3.2 变量【教师】讲解JaVaSCriPt变量的使用方法变量是指程序中一个已经命名的存储单元，它的主要作用是为健操彳限供存放信息的容器。使用变量之前，首先需要了解变量的命名规则、声明方法及引用方法。1 .变量的命名规则【课堂互动】-H教师】提问变量有哪些命名规则？十【学生】聆听、思考、回答在JavaScript中，变量的命名规则如下。(1)变量名必须以字母或下划线(_)开头，不能以数字开头。(2)变量名可以包含字母、数字或下划线(_),不能包含空格、加号或减号等符号。(3)变量名不能使用JavaScript中的关键字或保留字。(4)变量名严格区分大(5)见名知意,即变量名最好能够描述出变量中存储的信息含义。(6)可以依据个人习惯采用驼峰式命名法对变量命名。【指点迷津】驼峰式命名法是指混合使用大小写字母来构成变量和类的名字。它分为4驾它峰命名法和大驼峰命名法。(1)小驼峰命名法是指除第一个单词之外，其他单词首字母均大写，常用于定义变量名。(2)大驼峰命名法与小驼峰命名法类似，只是它把第一个单词的首字母也大写了，常用于定义类名.2.变量的声明方法通过教师讲解、课堂互动、演示操作等方式，让学生了解JavaScript常量与变量的使用方法在JaVaSCriPt语言规范里，要求变量在使用之前进行声明，声明变量的方法可以分为三种。(I)单变量声明。声明的变量只有一个，关键字为Var或者let,它们的语法格式如下：var变量名称；或者【高手点拨】Var声明的变量为全局变量并且可以重复声明；Iel声明的变量为局部变量且不可以重复声明。变量的数据类型由赋给变量的值决定。【示例4-3-1在HTML文档scripi标签内输入以下代码：varName;效果：该代码声明了一个变量Name.(2)多变量声明。使用一个关键字Var声明多个变量，其语法格式如下：var变量名称1,变量名称2.变量名称n;【示例4-3-2在HTML文档script标签内输入以下代码：Varname,gender;【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码效果效果：该代码声明了两个变量name和gender,变量名称之间用英文逗号隔开。(3)边声明边赋值。在声明变量的同时对其赋值，即初始化，其语法格式如下：var变量名称=变量值：var变量名称I=变量值1.变量名称2=变量值2,.变量名称n=变量值n;【示例4-3-3】在HTML文档scripi标签内输入以下代码：varName="张三"；varname="李四"，gender="男"；【教师】组织学生分组上机完成上面的任务,并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码效果效果：该代码声明了三个变量Name,name和gender,并分别对它们赋了初值。3.变量的引用方法在JaVaSCriPl语言规范里，变量在参与运算时直接引用变量名称即可。【示例4-3-4在HTML文档script标签内输入以下代码：varName="张三"；varname="李四",gender="男"varstr="姓名："+name+"；tSJ："+gender;【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码效果效果：该代码声明了四个变量Name、name、gender和sir。其中，变量sir的值为字符串"姓名：李四；性别：男”。【高手点拨】上述语句中变量name和gender参与了字符串运算。【学生】聆听、记录、理解课堂讨论(10min)(1)简要分析JaVaSCriPl代码嵌入gjHTML文档中的三种方法.(2)JavaScript有什么语法格式?(3)举例JavaScript中的常量与变量。【学生】讨论、回答通过课堂讨论使学生巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JavaScript的作用、语法等内容，讲解了JavaScript常量与变量的使用方法,希望通过本节课的讲解,大家可以对JaVaSCriPt有个初步的认识与了解,掌握JaVaSeriPt的基础知识，从而为后面的学习做好准备。【学生】总结回顾知识点总结知识点，巩固学生对JavaScript基础知识的印象作业布置(2min)【教师】布置课后作业请根据课堂所学知识，完成课后习题，并预习JavaScript数据类型的相关知识。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课在教学中遇到一些意想不到的问题，使得学生不能按计划时间回答问题。在我们设计教学方案时，应该思考：“学生已有哪些知识储备""怎样依据有关理论和学生实际设计易于为学生理解的教学方案""学生在接受新知识时会出现哪些情况”等。此外，要在备课时，预备好各种不同的教学方案。
