《网站前端技术》（梁玲）621-7 教案 第18课 JavaScript基础（一）_第1页
《网站前端技术》（梁玲）621-7 教案 第18课 JavaScript基础（一）_第2页
《网站前端技术》（梁玲）621-7 教案 第18课 JavaScript基础（一）_第3页
《网站前端技术》（梁玲）621-7 教案 第18课 JavaScript基础（一）_第4页
《网站前端技术》（梁玲）621-7 教案 第18课 JavaScript基础（一）_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第18课JavaScript基础（一）课时2课时（90min）教学目标知识技能目标：（1）掌握JavaScript的作用和语法（2）掌握常量、变量的使用方法素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：JavaScript作用和语法教学难点：JavaScript常量、变量的使用方法教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（35min）第2节课：→传授新知（25min）→课堂讨论（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解JavaScript的作用、语法等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题什么是JavaScript？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（35min）4.1JavaScript概述【教师】讲解JavaScript的概念、作用等相关内容4.1.1认识JavaScriptJavaScript是一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言，使用它可以开发Internet客户端的应用程序。它的解释器称为JavaScript引擎，是浏览器的一部分。JavaScript在HTML网页中以语句的形式出现，并执行相应操作，主要用于给HTML网页增加动态功能。【课堂互动】✈【教师】提问JavaScript具有什么特点？✈【学生】聆听、思考、回答（1）简单性。JavaScript采用小程序段的方式实现编程，并提供了一个简易的开发过程。（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。（3）动态性。JavaScript是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。（4）跨平台性。JavaScript是依赖于浏览器本身，与操作环境无关的脚本语言。也就是说，无论计算机是Windows操作系统还是其他操作系统，只要它能运行浏览器，且浏览器支持JavaScript，计算机就可以正确执行JavaScript脚本语言。（5）安全性。JavaScript是一种安全性语言，它不允许访问本地硬盘，且不能将数据存入服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。……（详见教材）4.1.2JavaScript的作用【课堂互动】✈【教师】提问JavaScript的主要作用有哪些？✈【学生】聆听、思考、回答（1）将动态文本嵌入HTML页面。（2）对浏览器事件做出响应。（3）读写HTML元素。（4）在数据提交到服务器之前验证数据。（5）检测访客的浏览器信息。控制cookies，包括创建和修改等。（6）基于Node.js技术进行服务器端编程。4.1.3JavaScript代码嵌入HTML中的方法通常情况下，将JavaScript代码嵌入到HTML文档中的方法有三种，包括在HTML文档中直接嵌入JavaScript代码；连接外部JavaScript文件；作为特定标签的属性值使用。1.在HTML文档中直接嵌入JavaScript代码在HTML文档中，将JavaScript代码直接放在<script></script>标签内，基本格式如下：<scriptlanguage="javascript"> JavaScript程序代码</script>【指点迷津】language属性用于设置所使用的脚本语言及版本。但是，在Web标准中，建议使用type属性代替language属性。【示例4-1-1】在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"> alert("欢迎您的到来！");</script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“对话框显示效果”图片（详见教材），并讲解效果：页面加载后，弹出对话框，显示“欢迎您的到来！”。2.连接外部JavaScript文件编写外部JavaScript文件（文件后缀名为.js），并通过<script>标签的src属性将该文件导入HTML文档中，基本格式如下：<scriptlanguage="javascript"src="JavaScript文件路径"></script>【示例4-1-2】新建ex40102.js文件并保存在网站的js目录中，接着在该文件中输入以下代码：alert("欢迎您的到来！");将ex40102.js文件导入HTML文档中，即在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"src="js/ex40102.js"></script>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面加载后，同样弹出对话框，且显示“欢迎您的到来！”。3.作为特定标签的属性值使用在<script></script>标签内或在外部JavaScript文件内定义函数，然后在某标签的某事件属性中引入函数名。【示例4-1-3】在HTML文档<head>标签内输入<script>标签，代码如下：<scriptlanguage="javascript"> functionfun(){alert("欢迎您的到来！"); }</script>在HTML文档<body>标签内输入<input>标签。代码如下：<inputtype="button"value="弹出信息"onClick="fun()"/>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“页面显示的‘弹出信息’按钮”图片（详见教材），并讲解效果：页面加载后，显示“弹出信息”按钮。单击该按钮后弹出对话框，且显示“欢迎您的到来！”。【学生】聆听、记录、理解4.2JavaScript语法【教师】讲解JavaScript代码格式、大小写规范等语法内容4.2.1JavaScript代码格式✈【多媒体】组织学生扫码播放“JavaScript语法”视频（详见教材），让学生对这部分内容有一个大致地了解每条JavaScript代码语句以英文分号“;”作为结束标志。有时候也可以省略英文分号，以换行符作为语句结束的标志。但是，这种做法在特定的情况容易引发解析错误，因此建议使用英文分号作为语句结束标志。JavaScript代码的编写比较自由，它一般会忽略分隔符，如空格符、制表符和换行符等。在保证不引起歧义的情况下，用户可以利用分隔符对脚本进行排版。为了增强程序可读性，方便进一步编辑和修改，排版建议一行只写一条语句，并在运算符前后各加一个空格。JavaScript代码的编写格式如下：vara1=20;varh=40;varsum;sum=a1+h;在书写JavaScript代码时，还应该注意以下几点。（1）在函数名、变量名等标识符中，不可以加入空白字符。（2）字符串和正则表达式的空白字符是其组成部分，JavaScript解释器将会保留。（3）编写代码时应根据结构进行缩进，提高程序的可读性。4.2.2大小写规范JavaScript对字母的大小写是敏感的，它严格区分字母大小写，即在输入语言的关键字、函数名、变量和其他标识符时，必须采用正确的大小写形式。【课堂互动】✈【教师】提问JavaScript为什么要严格区分字母大小写？✈【学生】聆听、思考、回答4.2.3注释【教师】讲解JavaScript注释【课堂互动】✈【教师】提问JavaScript的注释可分为哪几种？✈【学生】聆听、思考、回答JavaScript代码也有注释标记，可以对某一段代码进行注释，JavaScript解释器将忽略注释部分。和其他的程序语言相同，JavaScript的注释可以分为单行注释和多行注释。1.单行注释以“//”开头，其后的同一行内容为注释内容。2.多行注释以“/*”开头，以“*/”结尾，包含在该符号内的部分为注释内容。【示例4-2-1】在HTML文档<script>标签内输入以下代码：varx=30;//单行注释：定义名为x的变量，其初值为30vartext="网页设计";/*多行注释：定义名为text的变量，并且其值为字符串“网页设计”*/【提示】代码第2行为单行注释行，代码第4、5行为多行注释行。4.2.4JavaScript中的保留字编程语言都有属于自己的保留字，一般在一些特殊场合使用这些单词。保留字都含有【教师】ppt展示“JavaScript中的保留字”表格（详见教材），并讲解4.2.5输出方法1.页面输出页面输出是根据用户动作触发事件将元素加载到页面上的。该输出方法采用函数document.write("要输出的内容")实现，其中“要输出的内容”中可以含有标签。【示例4-2-2】在HTML文档<script>标签内输入以下代码：document.write("<div>页面输出函数<div>");效果：在页面添加<div>元素，内容为“页面输出函数”。2.控制台输出控制台输出是在控制台输出内容，应用于调试。它的代码实现格式为console.log("要输出的内容")，开发者常使用该函数设置断点测试程序。【示例4-2-3】在HTML文档<script>标签内输入以下代码：console.log("控制台消息");【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面加载后，没有任何东西。单击F12，打开开发人员工具视图，选择“Console”（控制台）选项卡，便可以看到控制台中的输出内容“控制台消息”。【提示】不同的浏览器打开开发人员工具视图的方式略有不同。3.弹窗输出弹窗输出是指在浏览器中弹出一个对话框，然后把要输出的内容展示出来。【课堂互动】✈【教师】提问根据作用的不同，弹窗可分为哪几种？✈【学生】聆听、思考、回答根据作用的不同，弹窗可分为警告框、确认框、提示框。（1）警告框alert("要输出的内容")可以弹出窗口，显示信息，并测试程序运行效果。【示例4-2-4】在HTML文档<script>标签内输入以下代码：alert("弹出框消息");效果：当相关联的HTML页面加载或触发相关事件时，弹出警告框，内容为“弹出框消息”。（2）确认框confirm("要输出的内容")用于用户确认某项信息。确认框必须做出“确定”或“取消”操作后，才能让程序继续运行。当选择“确定”按钮则返回true，当选择“取消”按钮则返回false。【示例4-2-5】在HTML文档<script>标签内输入以下代码：vara=confirm("您是大学生吗？");if(a){ alert("欢迎您，您将是大学生俱乐部的一员！");}else{ alert("对不起，大学生俱乐部只接受大学生！")}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“确认框运行效果”图片（详见教材），并讲解效果：页面加载后，弹出确认框“您是大学生吗？”。当选择“确定”按钮，则弹出“欢迎您，您将是大学生俱乐部的一员！”；当选择“取消”按钮，则弹出“对不起，大学生俱乐部只接受大学生！”。（3）提示框prompt("要输出的内容")用于弹出输入信息框，提示用户输入某种类型的数据，可以接收用户输入数据，并返回输入的信息。【示例4-2-6】在HTML文档<script>标签内输入以下代码：varname=prompt("请输入您的姓名");alert("您的姓名是"+name);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“提示框运行效果”图片（详见教材），并讲解效果：页面加载后，弹出提示框，提示内容为“请输入您的姓名”，输入姓名“闫妮”。此时，如果单击“确定”按钮，弹出“您的姓名是闫妮”；如果单击“取消”按钮，弹出“您的姓名是null”。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript作用和语法等内容第二节课问题导入（5min）【教师】提出以下问题什么是常量与变量？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）4.3.1常量【教师】讲解JavaScript常量的使用方法常量是指在程序运行的过程中值不发生改变的数据。例如，“123”是数值型常量，“JavaScript脚本”是字符串型常量，“ture”或“false”是布尔型常量等。常量主要用于为程序提供固定的值或精确的值，使用const进行声明，其语法格式如下：const常量名称=常量值；【学生】聆听、记录、理解4.3.2变量【教师】讲解JavaScript变量的使用方法变量是指程序中一个已经命名的存储单元，它的主要作用是为数据操作提供存放信息的容器。使用变量之前，首先需要了解变量的命名规则、声明方法及引用方法。1.变量的命名规则【课堂互动】✈【教师】提问变量有哪些命名规则？✈【学生】聆听、思考、回答在JavaScript中，变量的命名规则如下。（1）变量名必须以字母或下划线（_）开头，不能以数字开头。（2）变量名可以包含字母、数字或下划线（_），不能包含空格、加号或减号等符号。（3）变量名不能使用JavaScript中的关键字或保留字。（4）变量名严格区分大小写。（5）见名知意，即变量名最好能够描述出变量中存储的信息含义。（6）可以依据个人习惯采用驼峰式命名法对变量命名。【指点迷津】驼峰式命名法是指混合使用大小写字母来构成变量和类的名字。它分为小驼峰命名法和大驼峰命名法。（1）小驼峰命名法是指除第一个单词之外，其他单词首字母均大写，常用于定义变量名。（2）大驼峰命名法与小驼峰命名法类似，只是它把第一个单词的首字母也大写了，常用于定义类名。2.变量的声明方法在JavaScript语言规范里，要求变量在使用之前进行声明，声明变量的方法可以分为三种。（1）单变量声明。声明的变量只有一个，关键字为var或者let，它们的语法格式如下：var变量名称;或者【高手点拨】var声明的变量为全局变量并且可以重复声明；let声明的变量为局部变量且不可以重复声明。变量的数据类型由赋给变量的值决定。【示例4-3-1】在HTML文档<script>标签内输入以下代码：varName;效果：该代码声明了一个变量Name。（2）多变量声明。使用一个关键字var声明多个变量，其语法格式如下：var变量名称1,变量名称2,…,变量名称n;【示例4-3-2】在HTML文档<script>标签内输入以下代码：varname,gender;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码效果效果：该代码声明了两个变量name和gender，变量名称之间用英文逗号“,”隔开。（3）边声明边赋值。在声明变量的同时对其赋值，即初始化，其语法格式如下：var变量名称=变量值;var变量名称1=变量值1,变量名称2=变量值2,…,变量名称n=变量值n;【示例4-3-3】在HTML文档<script>标签内输入以下代码：varName="张三";varname="李四",gender="男";【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码效果效果：该代码声明了三个变量Name、name和gender，并分别对它们赋了初值。3.变量的引用方法在JavaScript语言规范里，变量在参与运算时直接引用变量名称即可。【示例4-3-4】在HTML文档<script>标签内输入以下代码：varName="张三";varname="李四",gender="男";varstr=

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论