《JavaScript移动开发》正本书教案电子教案课程设计电子教案全套.docx

JavaScript初探JavaScript移动开发课第1单元课程单元教学设计 （2020 2021学年第1学期）单元名称： JavaScript初探 所属系部： 计算机与通信工程学院 制定人： 郑丽萍 合作人： 制定时间： 2020.3 *学院 教务处 制JavaScript移动开发课程单元教学设计 单元标题：JavaScript初探 单元教学学时2在整体设计中的位置第1次授课班级16web班上课时间每周一1,2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够使用多种方案引入JavaScript脚本代码到HTML文档中。2.能够使用常用的输出语句。3.能够获取元素并改变元素内容。了解JavaScript简史和引擎的工作原理。掌握JavaScript的组成、主要特点和相关应用。树立学习信心；培养讨论思考的习惯能力训练任务任务：JavaScript初探教学组织：1. 带领学生了解课程任务2. 讲解JavaScript简史及相关术语3. 引入JavaScript脚本代码到HTML文档中，使用常用的输出语句本次课的单词JavaScript Web function document getElementById innerHTML案例和教学材料案例：JavaScript初探-文字的切换教学材料：1.教材名称：JavaScript移动开发项目教程（微课版）,郑丽萍, 人民邮电出版社。2.参考教材名称：JavaScript与jQuery案例教程,郑丽萍，出版社：高等教育出版社。 3.教学多媒体课件，项目源文件。多媒体资料：http:/www.icourse163.org/course/HCIT-12067068284.仪器与设备：计算机等 单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标导入本次课教学情境学生了解工作情境22引入任务：JavaScript初探-文字的切换交代任务 学生接受任务33知识点讲解JavaScript初探讲解JavaScript简史及相关术语了解JavaScript简史及相关术语10讲解JavaScript引擎的工作原理了解JavaScript引擎的工作原理10讲解引入JavaScript脚本代码到HTML文档中方法掌握引入JavaScript脚本代码到HTML文档中方法 10教师巡视，发现问题多种引入方案练习154 实践JavaScript初探-文字的切换教师演示掌握常用的输出语句方法10教师巡视，发现问题常用的输出语句练习205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的界面，修改出现的问题56 总结JavaScript初探重点强调学生练习中出现的问题学生思考反馈5作业Javascript的主要特点？课后体会一、情境导入介绍本节课的教学目标二、引入任务 ：JavaScript初探-文字的切换三、知识点讲解术语“ECMAScript”和“JavaScript”指的是同一个东西。但如果把JavaScript看成是“Mozilla或其他组织的ECMAScript实现”，那么ECMAScript就是实现JavaScript所依据的标准。术语“ECMAScript”也用来描述语言版本(比如ECMAScript5)。JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当编写了var a = 1 + 1;这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器 JavaScript由三部分组成：l 核心（ECMAScript） 描述了该语言的语法和基本对象l 文档对象模型(DOM，Documnet)描述了处理网页内容的方法和接口l 浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口JavaScript的主要特点JavaScript相关应用选择 JavaScript 脚本编辑器引入JavaScript脚本代码到HTML文档中方法 Javascript常用的输出语句： 使用window.alert()弹出警告框。 使用document.write()方法将内容写到 HTML 文档中。 使用innerHTML写入到 HTML 元素。 使用console.log()写入到浏览器的控制台。 边改边看有2个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志。控制台显示了代码行号，点击后可直接转到该行代码，如图所示Chrome调试效果。边改边看是轻量级的界面调试工具，如图1-12，最方便最常用。在HBuilder右上角切换开发模式，可以选边改边看方式，切换模式的快捷键是Ctrl+p。进入边改边看后，左边显示代码，右边显示浏览器。边改边看有2个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志。控制台显示了代码行号，点击后可直接转到该行代码，如图所示。四、任务实施 document.getElementById(demo)，使用 id 属性来查找id为demo HTML 元素，然后给它的innerHTML属性重新的赋值为新的字符串，就有了我们看到的切换文字的效果。 Sample Page! function clickMe()document.getElementById(demo).innerHTML = 开始学习JavaScript!; 准备好了就点击这里! 作为初学者，体验JavaScript的编写方法与技巧，实现文字切换效果，体验浏览水果名词简要信息如图1-1所示，当点击图片后，显示水果名词详细信息展示，如图1-2所示。 五、评比检查学生完成情况六、总结文字切换 作业实现如下效果： 猜数游戏页面JavaScript移动开发课第2单元课程单元教学设计（2020 2021学年第1学期）单元名称： 猜数游戏页面 所属系部： 计算机与通信工程学院 制定人： 郑丽萍 合作人： 制定时间： 2020.3 *学院 教务处 制JavaScript移动开发课程单元教学设计 单元标题：猜数游戏页面单元教学学时4在整体设计中的位置第2，3次授课班级21web班上课时间每周一1,2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够声明变量，转换数据类型，实现猜数游戏页面；内置对象Math2.能够运用流程控制语句和异常处理语句。掌握语法变量、数据类型的转换、Math、掌握函数的定义和调用。培养学生利用网络学习新知识的能力；培养学生编写代码规范能力训练任务任务：猜数游戏页面教学组织：1. 带领学生了解课程任务2. 讲解JavaScript语法变量、数据类型数据类型的转换；内置对象Math的应用3. 设计游戏界面及功能的实现本次课使用的外语单词div+css Javascript if elseFor for/in while do/whileheight width Math Math.floor Math.random Prompt parseInt 案例和教学材料案例：猜数游戏页面教学材料：1.教材名称：JavaScript移动开发项目教程（微课版）,郑丽萍, 人民邮电出版社。2.参考教材名称：JavaScript与jQuery案例教程,郑丽萍，出版社：高等教育出版社。 3.教学多媒体课件，项目源文件。多媒体资料：http:/www.icourse163.org/course/HCIT-12067068284.仪器与设备：计算机等单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标导入本次课教学情境学生了解工作情境22引入任务：猜数字交代任务 学生接受任务33知识点讲解内置对象Math讲解常用的输入输出语句； 掌握动态数字的输入；10讲解Math.random()及Math.random()应用；掌握Math.floor（）及Math.random()实现随机数字10讲解语法变量、数据类型；数据类型的转换；掌握parseInt数据类型的强制转换； 10教师巡视，发现问题使用javascript 实现随机数字，和动态输入及随机数字154 子页面设计设计子页面界面 教师演示掌握if else语句的嵌套使用；Do while实现循环多次猜测10教师巡视，发现问题制作子页面界面，实现；猜数游戏功能页面205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的界面，修改出现的问题56 总结猜数字页面；重点强调学生练习中出现的问题学生思考反馈5作业Javascript常用的循环语句？ 课后体会一、情境导入介绍本节课的教学目标二、引入任务 ：猜数字游戏页面 三、知识点讲解JavaScript 可以通过不同的方式来输出数据：使用innerHTML写入到 HTML 元素。JavaScript 循环如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。 不同类型的循环JavaScript 支持不同类型的循环：for- 循环代码块一定的次数for/in- 循环遍历对象的属性while- 当指定的条件为 true 时循环指定的代码块do/while- 同样当指定的条件为 true 时循环指定的代码块类型转换parseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86parseFloat(String) 将字符串转换为浮点型数字 如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.4 JavaScriptMath（算数）对象Math（算数）对象的作用是：执行常见的算数任务。round()如何使用 round()。random()如何使用 random() 来返回 0 到 1 之间的随机数。下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：document.write(Math.floor(Math.random()*11);四、任务实现 功能实现 var num = Math.floor(Math.random()*100+1); /产生1100之间的随机整数do var guess =parseInt(prompt(下面进行猜数游戏n请输入1-100之间的整数：,); if (guess =num)alert(_ ,恭喜你，猜对了，幸运数字是：+num);break; else if(guess num) alert(_ ,你猜的数字大了); go_on =confirm(是否继续游戏？); else alert(_ ,你猜的数字小了); go_on =confirm(是否继续游戏？); while(go_on);alert(谢谢参与游戏！);五、评比检查学生完成情况六、总结循环的应用 ，猜数字页面的实现，试卷展示页面JavaScript移动开发课第4单元课程单元教学设计（2020 2021学年第2学期）单元名称： 试卷展示页面 所属系部： 计算机与通信工程学院 制定人： 郑丽萍 合作人： 制定时间： 2020.3 淮安信息职业技术学院 教务处 制JavaScript移动开发课程单元教学设计 单元标题：试卷展示页面单元教学学时2在整体设计中的位置第4次授课班级16web班上课时间每周一1,2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够能够实现数组的新建，数组元素的插入、删除、替换，数组的合并。理解JavaScript数组的动态性。2.能够实现数组的输出及二维数组的遍历。掌握Array对象常用方法和属性的访问，了解复合数据类型json培养学生利用网络学习新知识的能力；培养学生编写代码规范能力训练任务任务：试卷展示页面教学组织：4. 带领学生了解课程任务5. 讲解JavaScript二维数组的应用，复合类型json的应用6. 设计试卷展示界面及功能的实现本次课使用的外语单词div+css JavaScript if elseFor for/in while do/whileheight width ArrayMath Math.floor Math.random Prompt parseInt 案例和教学材料案例：试卷展示页面教学材料：1.教材名称：JavaScript移动开发项目教程（微课版）,郑丽萍, 人民邮电出版社。2.参考教材名称：JavaScript与jQuery案例教程,郑丽萍，出版社：高等教育出版社。 3.教学多媒体课件，项目源文件。多媒体资料：http:/www.icourse163.org/course/HCIT-12067068284.仪器与设备：计算机等单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标导入本次课教学情境学生了解工作情境22引入任务：猜数字交代任务 学生接受任务33知识点讲解内置对象Math讲解常用的数组对象；了解提供数组模型、存储大量有序的数据的Array对象。掌握数组的新建，理解JavaScript数组的动态性。10讲解数组元素的插入、删除、替换，数组的合并的相关应用；掌握数组元素的插入、删除、替换，数组的合并。10讲解实现数组的输出及二维数组的遍历；掌握实现数组的输出及二维数组的遍历； 10教师巡视，发现问题使用数组的输出及二维数组的遍历实现试卷展示154 子页面设计设计子页面界面 教师演示掌握使用数组的输出及二维数组的遍历实现试卷展示10教师巡视，发现问题制作子页面界面，实现试卷展示页面205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的界面，修改出现的问题56 总结猜数字页面；重点强调学生练习中出现的问题学生思考反馈5作业Javascript常用的循环语句？ 课后体会一、情境导入介绍本节课的教学目标二、引入任务 ：试卷展示页面 三、知识点讲解JavaScript 可以通过不同的方式来输出数据：使用innerHTML写入到 HTML 元素。JavaScript 循环如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。 不同类型的循环JavaScript 支持不同类型的循环：for- 循环代码块一定的次数for/in- 循环遍历对象的属性while- 当指定的条件为 true 时循环指定的代码块do/while- 同样当指定的条件为 true 时循环指定的代码块表 数组的常用方法方法名称意义示例toString()把数组转换成一个字符串var s=a1.toString() 结果s为a,b,cjoin(分隔符)把数组转换成一个用符号连接的字符串var s=a1.join(+) 结果s为a+b+cshift()将数组头部的第一个元素移出var s=a1.shift() 结果s为aunshift()在数组的头部插入一个元素a1.unshift(m,n) 结果a1中为m,n,a,b,cpop()从数组尾部删除一个元素，返回移除的项var s=a1.pop() 结果s为cpush()把一个元素添加到数组的尾部，返回修改后数组的长度var s=a1.push(m,n)结果a1为a,b,c,m,n同时s为5concat()合并数组a1.concat(a2) 结果a1为数组a,b,c,y,x,zslice()返回数组的部分var s=a1.slice (1,3) 结果s为b,csplice()插入、删除或者替换一个数组元素a1.splice(1,2)结果a1为asort()对数组进行排序操作（默认按字母升序）a2.sort()结果为 x,y,zreverse()将数组反向排序a2. reverse()结果为z,y, x二维数组二维数组的定义是在一维数组基础上定义的，即当一维数组的元素又都是一维数组是，就形成了二维数组，例如：var submenus =new Array();submenus0= ;submenus1= 建设目标,建设建设,培养队伍;submenus2= 负责人,队伍结构,任课教师,教学管理,合作办学;以上的代码也可以表示下列等价代码：var submenus =new Array(new Array(),new Array(建设目标,建设建设,培养队伍),new Array(负责人,队伍结构,任课教师,教学管理,合作办学);以上代码还可以这样写：var submenus = ,建设目标,建设建设,培养队伍, 负责人,队伍结构,任课教师,教学管理,合作办学;通过数组名和下标访问数组元素。二维数组的元素必须使用数组名和两个下标来访问，第一个为行下标，第二个为列下标。格式为：二维数组名行下标列下标 数组元素的下标不能出界，否则会显示“undefined”（空值）。二维数组的数据访问，页面效果如图 所示。代码如下：四、任务实现 功能实现 var questions = new Array(); /定义问题数组，用以存储题目var questionXz = new Array(); /定义选项数组，用以存储题目选项 var answers = new Array(); /定义答案数组，用以存储题目答案questions0 = 下列选项中( )可以用来检索下拉列表框中被选项目的索引号。;questionXz0=A. selectedlndex,B. options,C. length,D. size; answers0=A; /问题的答案questions1 = 在JavaScript中( )方法可以对数组元素进行排序。; questionXz1=A. add(),B. join(),C. sort(),D. length(); answers1 = C for (var i = 0; i questionXz.length; i+) document.write(questionsi+);document.write(questionXzi0 + );document.write(questionXzi1 + );document.write(questionXzi2 + );document.write(questionXzi3 + ); document.write(答案是+answersi+ ); 案例拓展：增加布局如：放在script标签的前面。JavaScript代码循环部分修改如下：tmshow =document.getElementById(tmshow);for (var i = 0; i questions.length; i+) tmshow.innerHTML+=i+1+. +questionsi + +questionXzi0+ +questionXzi1 + +questionXzi2 + +questionXzi3 + 答案是+answersi+ JavaScript代码循环部分也可以采用双层for循环实现，代码优化如下：for(var i=0;iquestionXz.length;i+)tmshow.innerHTML+=i+1+.+questionsi+;for(var j=0;jquestionXzi.length;j+) tmshow.innerHTML+=questionXzij+;tmshow.innerHTML+=答案是+answersi+ 五、评比检查学生完成情况六、总结循环的应用 ，试卷展示页面的实现，倒计时及事件管理JavaScript移动开发课第5单元课程单元教学设计（2021 2022学年第1学期）单元名称： 倒计时及事件管理 所属系部： 计算机与通信工程学院 制定人： 郑丽萍 合作人： 制定时间： 2021.3 淮安信息职业技术学院 教务处 制JavaScript移动开发课程单元教学设计 单元标题：倒计时及事件管理单元教学学时2在整体设计中的位置第5次授课班级16web班上课时间每周一1,2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够运用DATE常用的方法2.能够实现日期的显示；倒计时的实现。掌握内置对象DATE的常用方法；掌握MUI的事件绑定、事件取消、事件触发、手势事件培养学生思考问题、分析问题和解决问题的能力。能力训练任务任务：运行的时钟的显示；节日倒计时的实现 教学组织：l 带领学生了解课程任务l 讲解内置对象DATE的常用方法 l 实现日期的显示；倒计时的实现。l 实现MUI的事件绑定、事件取消、事件触发、手势事件本次课使用的外语单词 div+css JavaScript DATE getFullYeargetMonth()getDate() getHours( ) getSeconds( ); setTimeout；getTime 案例和教学材料案例：倒计时及事件管理教学材料：1. 教材名称：JavaScript移动开发项目教程（微课版）,郑丽萍, 人民邮电出版社。2.参考教材名称：JavaScript与jQuery案例教程,郑丽萍，出版社：高等教育出版社。 3.教学多媒体课件，项目源文件。多媒体资料：http:/www.icourse163.org/course/HCIT-12067068284.仪器与设备：计算机等单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标导入本次课教学情境学生了解工作情境22引入任务：日期显示及倒计时交代任务 学生接受任务33知识点讲解日期显示及倒计时讲解内置对象DATE的常用方法掌握getFullYear()，getMonth()，getDate() getHours()， getSeconds( )，10讲解时钟 的设定掌握样式的设定，10讲解JavaScript 实现实现正在运行的时钟的显示节日倒计时的实现。掌握javascript中定时器setTimeout；getTime()换成毫秒数计算差值实现效果 10教师巡视，发现问题界面样式的设定setTimeout和getTime()的使用154 时钟页面设计设计时钟页面教师演示掌握MUI的事件绑定、事件取消、事件触发、手势事件10教师巡视，发现问题制作页面效果205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的界面，修改出现的问题56 总结日期显示及倒计时重点强调学生练习中出现的问题学生思考反馈5作业点击按钮展示试卷及考试倒计时课后体会一、情境导入介绍本节课的教学目标二、引入任务 ：试卷动态展示界面的设计 三、知识点讲解date对象的使用实现正在运行的时钟的显示；节日倒计时的实现内置对象DATE内置对象DATE的常用方法getFullYear()getMonth()getDate() getHours( ) getSeconds( ); 定时器setTimeout；getTime()换成毫秒数计算差值;使用 getFullYear() 获取年份。getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。如何使用 setFullYear() 设置具体的日期。如何使用 getDay() 和数组来显示星期，而不仅仅是数字。创建日期Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：有四种方式初始化日期:new Date() / 当前日期和时间new Date(milliseconds) /返回从 1970 年 1 月 1 日至今的毫秒数new Date(dateString)new Date(year, month, day, hours, minutes, seconds, milliseconds) 实例化一个日期的一些例子：var today = new Date()var d1 = new Date(October 13, 1975 11:13:00)var d2 = new Date(79,5,24)var d3 = new Date(79,5,24,11,33,0)设置日期通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：var myDate=new Date();myDate.setFullYear(2010,0,14);在下面的例子中，我们将日期对象设置为 5 天后的日期：var myDate=new Date();myDate.setDate(myDate.getDate()+5);注意:如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。 定时器函数JavaScript定时器有以下两个方法：setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setInterval()函数用法如下：setInterval() (调用函数,周期性执行或调用code之间的时间间隔)，function hello() alert(hello); 重复执行某个方法： var t1= window.setInterval(hello(),3000); 去掉定时器的方法 window.clearInterval(t1); setTimeout() ：在指定的毫秒数后调用函数或计算表达式。 setTimeOut()函数用法如：setTimeOut(调用函数,在执行代码前需等待的毫秒数。)只执行一次，3 秒后显示一个弹窗:var t=setTimeout(function()alert(Hello),3000) 实现循环调用需要把setTimeout定时器函数写在被调用函数里面。如下：function show() alert(Hello)；var myTime = setTimeout(show(),1000);关闭定时器的用法：clearTimeOut(myTime);其中，myTime为setTimeOut()函数返回的定时器对象。动态改变元素样式style对象代表一个单独的样式声明。可从应用样式的文档或元素访问style对象。使用 style对象属性的语法：document.getElementById(id).style.property=值设置一个已有元素的style属性如下：document.getElementById(myH1).style.color = red; /改变元素内字体的颜色为红色 按钮mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系 的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个 默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn- primary均可生成蓝色按钮；普通按钮在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮默认蓝色绿色黄色红色紫色若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：默认蓝色绿色黄色红色butt