JavaScript应用技术基础语法教案.docx
- 文档编号:5809987
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:29
- 大小:43.63KB
JavaScript应用技术基础语法教案.docx
《JavaScript应用技术基础语法教案.docx》由会员分享,可在线阅读,更多相关《JavaScript应用技术基础语法教案.docx(29页珍藏版)》请在冰豆网上搜索。
JavaScript应用技术基础语法教案
江苏农牧科技职业学院
教案
课程名称:
JAVASCRIPT应用技术
总课时:
60
授课教师:
王清辉
所在二级院系部:
农业信息学院
所在教研室:
计算机应用
授课时间:
2020/2021
学年第
1
学期
课程名称
JavaScript应用技术
代码
218
学分
4
课程类型
必修课
□公共课□基础课□专业课□实践类
学
时
分
配
总学时:
60
选修课
□限选课□任选课
讲授:
授课专业
计算机应用
授课班级
19计应1班
实践:
理实一体:
58
任课教师
王清辉
职称
副教授
互 动:
考核方式
□考试□考查
习 题:
教材
名称
JavaScript+jQuery交互式Web前端开发
其 他:
2
出版日期
2019.1
出版社
人民邮电出版社
类型
□面向21世纪课程教材□国家重点教材
□规划教材 □本专业国家教指委推荐教材
□国家精品教材□省精品教材
□校本特色教材□近三年出版教材□其他
教学
目标
要求
课程围绕客户端Web前端设计相关岗位能力要求,学习JavaScript基本语法、函数、对象等知识,掌握DOM、BOM对象与事件驱动的使用方法,学做JavaScript常见页面特效、交互及表单验证等实践项目,使学生能够使用Dreamweaver等常用设计工具进行脚本程序编程,开发常见的网页特效;能够使用工具对JS脚本进行调试和完善。
为前端设计工作打下基础。
教学
重点
难点
重点:
掌握JS语法及常见特效设计思路和设计方法
难点:
掌握页面对象的属性和方法的使用和应用场景
参考
书目
或
其他
资源
《JavaScript与jQuery实战教程》卢淑萍樊红珍主编
清华大学出版社
审阅意见
教研室主任(签章)年月日
院系部负责人(签章)年月日
课题名称
JavaScript概述
课时数
2课时
授课班级
19计算机应用
授课时间
--
授课地点
实训室
授课形式
理实一体
教学目标
1.了解JavaScript的发展
2.了解JavaScript组成、作用及特点
3.了解常用编辑工具
4.掌握在脚本中引入脚本的方式
5.掌握脚本标识及属性
教学重点
脚本标识及属性、脚本中引入脚本的方式
教学难点
网页请求及脚本执行原理
教学设计
1.以提问、问卷方式了解对计算机语言的理解和掌握情况;
2.选择性巩固,计算机组成、指令语言、进制、存储单位等知识点;
3.了解JavaScript的发展,JavaScript组成、作用及特点,了解常用编辑工具;
4.讲解在脚本中引入脚本的方式,以及页面脚本标识及属性。
教学过程
环节
内容
活动
技术
手段
教师
学生
回顾
理解计算机语言;选择性巩固计算机组成、指令语言、进制、存储单位等知识点;
讲授
预习
Vedio
课中
1.JavaScript脚本语言的应用场景
2.JavaScript的发展;
3.JavaScript组成、作用及特点;
4.Dreamweaver编辑工具的使用,掌握在脚本中引入脚本的方式,掌握脚本标识及属性。
5.网页访问及浏览器解析原理
6.在脚本中引入脚本的方式,以及页面脚本标识及属性。
讲授
熟悉工具
PPT
项目
利用DW设计一个带脚本的网页,动态向页面输出内容。
实操
学生动手练习,熟悉工具
课外作业
观看课程导学视频,进一步认知课程学习的目的和任务,查找自身学习基础的漏缺,制订课程学习计划。
课后小结
学生前导课程基础各异,在课程导学时应给与学生学习的信心,需要花一定时间对一些基础知识进行回顾。
备注
课题名称
JavaScript语法基础一
课时数
2课时
授课班级
19计应
授课时间
--
授课地点
实训室
授课形式
理实一体
教学目标
掌握JavaScript基本语法,数据类型和变量、运算符与表达式。
教学重点
数据类型和变量、运算符与表达式
教学难点
变量的理解和应用
教学设计
讲解
教学过程
环节
角色
活动
内容
技术
手段
课前
学生温习
课中
教师
引导学习(10min)
一、JavaScript中的语句
1.JavaScript语句是向浏览器发出的命令,语句的作用是告诉浏览器该做什么。
语言执行顺序
2.面向过程到面向对象设计演变
教师
讲授
(10min)
1.变量的概念
内存中,存储数据的一个空间。
为什么需要引入变量?
二、变量的使用。
1.变量声明varI;
2.变量赋值i=5;
3.获取变量的值i=i+1;
重点理解变量名代表的含义。
3.变量的命名规则
(1)变量名由字母、数字、下划线和美元符$组成,且区分大小写。
(2)不能以数字开头,不能包含空格或加号、减号等符号。
(3)不能使用JavaScript中的关键字、保留字。
学生思考实践5’
案例:
定义2个的变量并赋值,实现互换它们的值。
演示:
Vari=3,j=5;
Vartemp;
temp=I;i=j;j=temp;
教师讲解(15’)
三、数据类型
1.为什么要引入数据类型,对数据分类的好处
2.JS常见的数据类型
4.数据类型的检测
利用typeof运算符进行数据类型检测
数据
typeof数据类型名称
数值
number
字符串
string
逻辑值
boolean
undefined
undefined
null
object
对象
object
函数
function
5.数据类型的转换
(1)使用parseInt()将字符串转为整数
(2)使用parseFloat()将字符串转为浮点数
(3)使用Number()将字符串转为数字型
(4)利用算术运算符(-、*、/)隐式转换
(5)利用Boolean()转换为逻辑型
课后
学生练习
教师答疑
(40m)
课外作业
课后小结
通过学习,学生能够掌握JavaScript中的语句、数据类型,能够声明变量、使用变量解决实际问题,并掌握在HTML中嵌入JavaScript脚本的方法。
本节课主要运用案例教学法,通过对JavaScript概念的深入理解,认识JavaScript中的语句和变量以及数据类型,深入探讨JavaScript脚本编程的方法,通过实例的方法加强对JavaScript嵌入HTML文档方法以及变量赋值和运用变量提升的方法的理解,达到能够独立熟练运用JavaScript来解决实际问题的能力。
教学评价方式以小组为单位,以完成案例的质量为评价标准,形成任务驱动,小组协作,质量与速度并存的课堂评价方式,促进学生的自主、创新学习的方式。
备注
课题名称
JavaScript语法基础二
课时数
4课时
授课班级
19计应
授课时间
--
授课地点
实训室
授课形式
理实一体
学情分析
已掌握JS变量定义、数据类型、运算符和表达式等基本知识
参考书目
《JavaScript+jQuery前端开发基础教程》夏帮贵主编人邮社
其他资源
《JavaScript网页特效案例教材》王莹机械工业出版社
教学目标
掌握JavaScript基本语法,数据类型和变量、运算符与表达式、流程控制语句。
教学重点
数据类型和变量、运算符与表达式
教学难点
流程控制语句
教学方法
项目化、案例教学
教学手段
实训室演示讲解
教材处理
无
教学设计
教学过程
环节
内容
活动
技术
手段
教学
随记
教师
学生
回顾
变量定义语句格式;
数据类型;
运算符及表达式;
理论
一、JavaScript的运算符和表达式
JavaSctipt的运算符主要有一元运算符、算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符和其他运算符等。
表达式是各种数值、变量、运算符的综合体,最简单的表达式可以是常量或者变量名称。
表达式的值是表达式运算的结果,常量表达式的值就是常量本身,变量表达式的值则是变量引用的值。
二、运算符和表达式的具体应用
案例:
1.举例说明对不同数据类型应用一元加运算符的结果。
vars1="001";
vars2="1.1";
vars3="hello";
varb=false;
varf=1.1;
varo={valueOf:
function(){return-1;}}
s1=+s1;
s2=+s2;
s3=+s3;
b=+b;
f=+f;
o=+o;
console.log("s1为:
"+s1);
console.log("s2为:
"+s2);
console.log("s3为:
"+s3);
console.log("b为:
"+b);
console.log("f为:
"+f);
console.log("o为:
"+o);
三、关键字和保留字
JavaScript描述了一组具有特定用途的关键字,这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。
常见关键字。
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebugger*functionthiswithdefaultifthrowdeleteintry
四、注释
注释是指在程序编写过程中,对程序文件或者代码片段额外添加的一个备注说明。
通过注释可以提高代码可读性,让自己或其他开发人员更快速地理解程序。
讲授
PPT
项目
1.举例说明算术运算符的用法
2.举例说明运算符的优先级
3.用位运算符实现加减运算。
a=287,b=102,计算a+b和a-b的值
帮助理解
实操
学生动手练习项目实现
课外作业
复习回顾
课后小结
通过学习,学生能够掌握JavaScript的运算符和表达式的基本概念,运算符的优先级以及运算符的种类和运算规则。
理解关键字和保留字、正则表达式、注释的概念。
本节课主要运用案例教学法,通过对JavaScript运算符和表达式的深入理解,掌握JavaScript的运算符的优先级,深入探讨JavaScript运算符的种类,通过实例的方法加强对JavaScript运算符和表达式,达到能够独立熟练运用JavaScript运算符和表达式来解决实际问题的能力。
教学评价方式以小组为单位,以完成案例的质量为评价标准,形成任务驱动,小组协作,质量与速度并存的课堂评价方式,促进学生的自主、创新学习的方式。
备注
课题名称
JavaScript语法基础三
课时数
4课时
授课班级
19计应
授课时间
--
授课地点
实训室
授课形式
理实一体
学情分析
掌握JavaScript基本语法,数据类型和变量、运算符与表达式。
参考书目
《JavaScript+jQuery前端开发基础教程》夏帮贵主编人邮社
其他资源
《JavaScript网页特效案例教材》王莹机械工业出版社
教学目标
1.了解什么是流程控制语句
2.掌握分支语句与循环语句的用法
3.掌握函数表达式及语法、函数参数、函数返回值和函数调用模式、递归调用、作用域、异常处理以及闭包
教学重点
If语句与For语句
教学难点
For循环的执行过程与while循环的区别
教学方法
项目化、案例教学
教学手段
实训室演示讲解
教材处理
无
教学设计
1.任务描述
2.任务展示与实现
(1)在程序中使用if条件语句、for循环语句、for...in循环语句、while循环语句、label语句、do...while语句、switch循环语句以及break语句与continue语句。
(2)使用函数表达式及语法
(3)学生动手操作
3.教师讲解本任务涉及的知识点
教学过程
环节
角色
活动
内容
技术
手段
运算符与表达式
一、讲解什么是流程控制语句
1.if语句的语法如下。
if(condition)statement1elsestatement2;
2.for循环语句的语法如下。
for(initialization;expression;post-loop-expression)statement;
3.for…in语句语法如下。
for(propertyinexpression)statement;
4.while语句语法如下。
while(expression)statement;
5.label语句语法如下。
label:
statement
6.break和continue语句用于循环中精确地控制代码的执行。
break语句可以立即退出循环,阻止再次反复执行任何代码。
而continue语句只是退出当前循环,根据控制表达式还允许继续进行下一次循环。
7.do…while语句的语法如下。
do
{
statements;
}
while(condition)
8.switch语句的语法如下:
switch(expression)
casevalue:
statement;
break;
casevalue:
statement;
break;
casevalue:
statement;
break;
casevalue:
statement;
break;
...
casevalue:
statement;
break;
default:
statement;
二、如果在实际编程中,需要重复使用同一组语句,则可以把这组语句打包为一段函数并命名。
然后在需要使用这组语句的地方调用函数名称即可。
所谓函数,通俗地理解就是一组允许人们在代码里随时调用的语句。
函数的使用不仅使代码看起来简洁,而且也方便了代码的维护。
三、事件及事件处理
1.事件处理程序
JavaScript与HTML之间的交互是通过事件来实现的。
事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件处理程序包括:
HTML事件处理程序、DOM0级事件处理程序和DOM2级事件处理程序。
2.常用窗口事件
onload事件、onunload事件、onresize事件、onmove事件、onabort事件、onerror事件、onfocus事件、onblur事件
3.常用鼠标事件
onclick事件、ondbclick事件、onmousedown事件、onmouseup事件、onmouseover事件和onmouseout事件、onmousemove事件
4.常用表单事件
onblur事件、onchange事件、onfocus事件、onreset事件、onsubmit事件
5.常用键盘事件
onkeypress事件、onkeydown事件、onkeyup事件
1.编写程序求100+99+…+2+1的结果。
2.制造一个引用错误并用异常语句进行捕获。
3.给一个dom同时绑定两个单击事件,一个用捕获,一个用冒泡,那么事件的执行顺序是怎么样的?
编写代码并分析。
1.
PPT
屏幕广播
课外作业
课后小结
本节课主要运用案例教学法,通过对JavaScript流程语句的深入理解,掌握JavaScript流程控制语句的语法,通过实例的方法加强对JavaScript流程控制语句的理解,达到能够独立熟练运用JavaScript流程语句来解决实际问题的能力。
并学会函数表达式及其语法,学会使用JavaScript事件处理程序方式以及各个事件。
教学评价方式以小组为单位,以完成案例的质量为评价标准,形成任务驱动,小组协作,质量与速度并存的课堂评价方式,促进学生的自主、创新学习的方式。
备注
课题名称
JS语法案例:
四则运算器
课时数
4课时
授课班级
19计应
授课时间
--
授课地点
实训室
授课形式
理实一体
教学目标
1.学习静态元素分析与设计及获取方法。
2.掌握如何利用元素属性触发脚本函数的执行
3.掌握分支语句的使用
4.掌握内置转换函数的使用
5.掌握文本框和下拉选择框有哪些常见的属性和方法
教学重点
掌握页面元素的获取方法
教学难点
掌握页面元素对象的属性和方法的作用与应用场景
教学方法
项目化、案例教学
教学手段
演示讲解
教学设计
教学过程
环节
角色
活动
内容
技术
手段
课前
学生温习
JS语法知识点
课中
教师
引导回顾(10min)
JS函数定义与元素属性触发运行机制
数组对象的概念与访问
教师
提出需求
(5min)
一、项目任务
实现2个数的四则运算,动手练习调试。
二、四则运算的需求分析
在页面中,设计3个文本框,1个下拉选择框,一个按钮,实现在前2个文本框中输入2个数,利用下拉选择框选择运算符,点击按钮,在第3个文本框中显示2个数的运算结果。
学生预分析
教师提问,针对不足讲解思路
(15min)
二、脚本应用与开发的思路
2.静态元素分析与设计
3.如何获取页面元素
4.如何利用元素属性触发脚本函数的执行
5.文本框和下拉选择框有哪些常见的属性和方法
PPT
教师演示项目实现(15min)
function Cal()
{
var n1 = document.getElementById("txtNum1");
var n2 = document.getElementById("txtNum2");
var n3 = document.getElementById("txtResult");
var ct = document.getElementById("calType");
var optindex = ct.selectedIndex;
var opptext = ct.options[optindex].text;
switch(opptext){
case "+":
n3.value =parseFloat(n1.value)+parseFloat(n2.value);
break;
case "-":
n3.value = parseFloat(n1.value)-parseFloat(n2.value);
break;
case "*":
n3.value = parseFloat(n1.value)*parseFloat(n2.value);
break;
case "/":
n3.value = parseFloat(n1.value)/parseFloat(n2.value);
break;
}
}
屏幕广播
课后
学生练习
教师答疑
(60min)
动手练习项目实现
课外作业
四则运算计算器的完善、扩展验证输入功能。
网课平台完成颜色选择器案例的联系。
课后小结
项目不能涵盖所有知识点,需要补充讲解。
备注
教学过程
环节
角色
活动
内容
技术
手段
课前
学生温习
课中
教师
引导回顾(10min)
教师
提出需求
(5min)
学生预分析
教师提问,针对不足讲解思路
(15min)
教师演示项目实现(15min)
课后
学生练习
教师答疑
(60min)
课外作业
课后小结
备注
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 应用技术 基础 语法 教案