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

上传人:p** 文档编号:758066 上传时间:2024-02-26 格式:DOCX 页数:10 大小:160.40KB
下载 相关 举报
《网站前端技术》教案第18课JavaScript基础(一).docx_第1页
第1页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第2页
第2页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第3页
第3页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第4页
第4页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第5页
第5页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第6页
第6页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第7页
第7页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第8页
第8页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第9页
第9页 / 共10页
《网站前端技术》教案第18课JavaScript基础(一).docx_第10页
第10页 / 共10页
亲,该文档总共10页,全部预览完了,如果喜欢就下载吧!
资源描述

《《网站前端技术》教案第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”弹出框消息”);

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Java

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!