《网站前端技术》教案第18课JavaScript基础（一）.docx

《《网站前端技术》教案第18课JavaScript基础（一）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第18课JavaScript基础（一）.docx（10页珍藏版）》请在优知文库上搜索。

1、课题第18课JaVaSeriPt基础（一）课时2课时(90min)教学目标知识技能目标：（1）掌握JaVaSCriPl的作用和语法（2）掌握常量、变量的使用方法素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：JaVaSCriPl作用和语法教学难点：JavaScript常量、变量的使用方法教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（8min）一传授新知（35min）第2节课：问题导入（5min）T传授新知（25min）T课堂讨论（IOmin）一课堂小结（3min

2、）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JaVaSCriPt的作用、语法等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题什么是JavaScript?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（

3、35min）4.1 JaVaSCriPt概述【教师】讲解JaVaSeriPt的概念、作用等相关内容4.1.1 认识JaVaSCriPtJavaScript是一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言，使用它可以开发Inlernet客户端的应用程序。它的解释器称为JaVaSCriPt引擎，是浏览器的TP分。JavaScript在HTML网页中以语句的形式出现，并执行相应操作，主要用于给HTML网页增加动态功能。通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript作用和语法等内容【课堂互动】十【教师】提问JavaScript具有什么特点？

4、【学生】聆听、思考、回答(1)简单性。JaVaSCriPt采用/雇序段的方式实现编程，并提供了一个简易的开发过程。(2)基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象,也能使用现有的对象。(3)动态性。JavaScript是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。(4)跨平台性。JaVaSCriPl是依赖于浏览器本身，与操作环境无关的脚本语言。也就是说，无论计算机是Windows操作系统还是其他操作系统，只要它能运行浏览器，且浏览器支持JavaScript,计算机就可以正确执行JavaScript脚本语言。(5)安全性。JavaScript是一

5、种安全性语言,它不允许访问本地硬盘，且不能将孀存入服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。(详见教材)4.1.2JaVaSCriPt的作用【课堂互动】+【教师】提问JavaScript的主要作用有哪些？十【学生】聆听、思考、回答(I)将动态文本嵌入HTML页面。(2)对浏览器事件做出响应。(3)读写HTML元素。(4)在数据提交到服务器之前验证数据。(5)检测访客的浏览器信息。控制cookies,包括创建和修改等。(6)基于Nodejs技术进行服务器端编程。4.1.3JaVaSCriPt代码嵌入HTML中的方法通常情况下，将JaVaSCriPt代码嵌入到

6、HTML文档中的方法有三种，包括在HTML文档中直接嵌入JaVaSCriPl代码；连接外部JaVaSCriPl文件；作为特定标签的属性值使用。1 .在HTML文档中直接嵌入JaVaSCriPt代码在HTML文档中，将JaVaSCriPl代码直接放在/SCriP标签内，基本格式如下：JavaScript程序代码【指点迷津】IangUage属性用于设置所使用的脚本语言及版本。但是，在Web标准中，建议使用type属性代替language属性。【示例4-1-1在HTML文档标签内输入标签，代码如下：alert（欢迎您的到来!）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，

7、演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”对话框显示效果”图片（详见教材），并讲解效果：页面加载后，弹出对话框，显示欢迎您的到来！。2 .连接外部JavaScript文件编写外部JavaScript文件（文件后缀名为Js）,并通过scrip。标签的SrC属性将该文件导入HTML文档中，基本格式如下：【示例4-1-2新建ex4OIO2js文件并保存在网站的js目录中，接着在该文件中输入以下代码：alert（欢迎您的到来！）；将ex40102.js文件导入HTML文档中，即在HTML文档标签内输入标签，代码如下：【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位

8、学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面加载后，同样弹出对话框，且显示欢迎您的到来！。3 .作为特定标签的属性值使用在VSCriPI标签内或在外部JaVaSCriPl文件内定义函数，然后在某标签的某事件属性中引入函数名。示例4-1-3在HTML文档标签内输入标签，代码如下：functionfun（）alert（欢迎您的到来!）;在HTML文档VbO标签内输入Vi叩ul标签。代码如下：【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”页面显示的弹出信息按钮”图片（详见教材

9、），并讲解效果：页面加载后,显示“弹出信息按钮。单击该按钮后弹出对话框，且显示欢迎您的到来！.【学生】聆听、记录、理解4 .2JavaScript语法【教师】讲解JaVaSCriPt代码格式、大小写规范等语法内容4.2.1JavaScript代码格式【多媒体】组织学生扫码播放JavaScript语法”视频(详见教材)，让学生对这部分内容有一个大致地了解每条JaVaSCriPt代码语句以英文分号作为结束标志。有时候也可以省略英文分号，以换行符作为语句结束的标志。但是，这种做法在特定的情况容易引发解析错误，因此建议使用英文分号作为语句结束标志。JaVaSCriPt代码的编写比较自由,它一般会忽略分

10、隔符，如空格符、制表符和换行符等。在保证不引起歧义的情况下，用户可以利用分隔符对脚本进行排版。为了增强程序可读性，方便进一步编辑和修改，排版建议一行只写一条语句，并在运算符前后各加一个空格。JaVaSCriPt代码的编写格式如下：varal=20;varh=40;varsum;sum=al+h;在书写JaVaSCriPt代码时，还应该注意以下几点。(1)在函数名、变量名等标识符中，不可以加入空白字符。(2)字符串和正则表达式的空白字符是其组成部分，JavaSCriPt解释器将会保留。(3)编写代码时应根据结构进行缩进，提高程序的可读性.4.2.2 大小写规范JaVaSCriPt对字母的大/J4

11、是敏感的,它严格区分字母大小写，即在输入语言的关键字、函数名、变量和其他标识符时，必须采用正确的大与形式。【课堂互动】十【教师】提问JavaScript为什么要严格区分字母大/与?*【学生】聆听、思考、回答4.2.3 注释【教师】讲解JaVaSCriPt注释【课堂互动】【教师】提问JavaScript的注释可分为哪几种?+【学生】聆听、思考、回答JavaScript代码也有注释标记，可以对某一段代码进行注释，JavaScript解释器将忽略注释部分。和其他的程序语言相同，JaVaSCriPl的注释可以分为单行注释和多行注释。2.多彳亍主释以/*开头，以“*广结尾，包含在该符号内的部分为注释内容

12、.示例4-2-1在HTML文档scripl标签内输入以下代码：varx=30;单行注释：定义名为X的变量，其初值为30VarteXt=网页设计；产多行注释：定义名为text的变量,并且其值为字符串“网页设计*/【提示】代码第2行为单行注释行，代码第4、5行为多行注释行。4.2.4 JaVaSCriPt中的保留字编程语言都有属于自己的保留字，一般在一些特殊场合使用这些单词.保留字都含有特定的含义，它都不可以用磔量、标签或函数名。【教师】PPt展示“JavaScript中的保留字”表格（详见教材），并讲解4.2.5 输出方法1 .页面输出页面输出是根据用户动作触发事件将元素加载到页面上的。该输出方

13、法采用函数documeniwriie（要输出的内容”）实现，其中要输出的内容中可以含有标签.示例4-2-2在HTML文档script标签内输入以下代码：document,write（div页面输出函数div）;效果：在页面添加Vdiv元素，内容为页面输出函数。2 .控制台输出控制台输出是在控制台输出内容，应用于调试。它的代码实现格式为ConSOlelog（要输出的内容）,开发者常使用该函数设置断点测试程序。【示例4-2-3在HTML文档scripl标签内输入以下代码：ConSOle.log（控制台消息）；【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行

14、点评【学生】聆听、上机操作、演示效果：页面加载后，没有伊可东西。单击Fl2,打开开发人员工具视图，选择Xonsolew（控制台）选项卡，便可以看到控制台中的输出内容控制台消息。【提示】不同的浏览器打开开发人员工具视图的方式略有不同。3 .弹窗输出弹窗输出是指在浏览器中弹出一个对话框，然后把要输出的内容展示出来。【课堂互动】【教师】提问根据作用的不同，弹窗可分为哪几种?【学生】聆听、思考、回答根据作用的不同，弹窗可分为警告框、确认框、提示框。（I）警告框aert（”要输出的内容”）可以弹出窗口，显示信息，并测试程序运行效果。【示例4-2-4在HTML文档scripl标签内输入以下代码：alerU”弹出框消息”）；