您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 质量控制/管理 > JavaScript程序设计实例教程教案完整共24单元
《JavaScript初探》《JavaScript程序设计》课第1单元课程单元教学设计(2019~2020学年第1学期)单元名称:JavaScript初探所属系部:计算机与通信工程学院制定人:合作人:制定时间:2020.8***学院教务处制JavaScript程序设计课程单元教学设计单元标题:JavaScript初探单元教学学时2在整体设计中的位置第1次授课班级16移动开发班上课时间1周9月5日第1节至1周9月5日第2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够使用多种方案引入JavaScript脚本代码到HTML文档中。2.能够使用常用的输出语句。3.能够获取元素并改变元素内容。了解JavaScript简史和引擎的工作原理。掌握JavaScript的组成、主要特点和相关应用。树立学习信心;培养讨论思考的习惯能力训练任务任务:JavaScript初探教学组织:1.带领学生了解课程任务2.讲解JavaScript简史及相关术语3.引入JavaScript脚本代码到HTML文档中,使用常用的输出语句本次课使用的外语单词JavaScriptWebfunctionDategetFullYeargetMonthgetDatedocumentgetElementByIdinnerHTML案例和教学材料案例:JavaScript初探-文字的切换教学材料:1.教材名称:《JavaScript程序设计实例教程》第2版主编:程乐、郑丽萍、刘万辉,出版社:机械工业出版社,出版日期:2020年3月2.教学多媒体课件,项目源文件3.多媒体资料:仪器与设备:计算机等单元教学进度设计(纲要)步骤教学内容及能力/知识目标教师活动学生活动时间(分钟)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代码,并准确地给出代码运行结果的一段程序。比方说,当编写了vara=1+1;这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器JavaScript由三部分组成:核心(ECMAScript)描述了该语言的语法和基本对象文档对象模型(DOM,Documnet)描述了处理网页内容的方法和接口浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口JavaScript的主要特点JavaScript相关应用选择JavaScript脚本编辑器引入JavaScript脚本代码到HTML文档中方法Javascript常用的输出语句:•使用window.alert()弹出警告框。•使用document.write()方法将内容写到HTML文档中。•使用innerHTML写入到HTML元素。•使用console.log()写入到浏览器的控制台。四、任务实施document.getElementById(demo),使用id属性来查找id为demoHTML元素,然后给它的innerHTML属性重新的赋值为新的字符串,就有了我们看到的切换文字的效果。!DOCTYPEhtmlhtmlheadmetacharset=UTF-8titleSamplePage!/title/headbodyscriptfunctionclickMe(){document.getElementById(demo).innerHTML=开始学习JavaScript!;}/scriptdivid=demostyle=font-family:'微软雅黑';font-size:36px;color:#00f;onclick=clickMe()准备好了就点击这里!/div/body/html五、评比检查学生完成情况六、总结文字切换《猜数游戏页面》《JavaScript程序设计》课第2单元课程单元教学设计(2019~2020学年第1学期)所属系部:计算机与通信工程学院制定人:合作人:制定时间:2020.8***学院教务处制JavaScript程序设计课程单元教学设计单元标题:猜数游戏页面单元教学学时2在整体设计中的位置第2次授课班级16移动开发班上课时间1周9月6日第1节至1周9月6日第2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够声明变量,转换数据类型,实现猜数游戏页面;内置对象Math2.能够运用流程控制语句和异常处理语句。掌握语法变量、数据类型的转换、Math、掌握函数的定义和调用。培养学生利用网络学习新知识的能力;培养学生编写代码规范能力训练任务任务:猜数游戏页面教学组织:4.带领学生了解课程任务5.讲解JavaScript语法变量、数据类型数据类型的转换;内置对象Math的应用6.设计游戏界面及功能的实现本次课使用的外语单词div+cssJavascriptifelseForfor/inwhiledo/whileheightwidthMathMath.floorMath.randomPromptparseInt案例和教学材料案例:猜数游戏页面教学材料:1.教材名称:《JavaScript程序设计实例教程》第2版.主编:程乐、郑丽萍、刘万辉.出版社:机械工业出版社,出版日期:2020.3月2.教学多媒体课件,项目源文件3.多媒体资料:仪器与设备:计算机等单元教学进度设计(纲要)步骤教学内容及能力/知识目标教师活动学生活动时间(分钟)1情境导入介绍本节课的教学目标.导入本次课教学情境学生了解工作情境22引入任务:猜数字交代任务学生接受任务33知识点讲解内置对象Math讲解常用的输入输出语句;掌握Prompt实现动态数字的输入;10讲解Math.random()及Math.random()应用;掌握Math.floor()及Math.random()实现随机数字10讲解语法变量、数据类型;数据类型的转换;掌握parseInt数据类型的强制转换;10教师巡视,发现问题使用javascript实现随机数字,和动态输入及随机数字154子页面设计设计子页面界面教师演示掌握ifelse语句的嵌套使用;Dowhile实现循环多次猜测10教师巡视,发现问题制作子页面界面,实现;猜数游戏功能页面205评比检查学生完成情况抽查学生完成情况,讲解出现的问题演示自己的界面,修改出现的问题56总结猜数字页面;重点强调学生练习中出现的问题学生思考反馈5作业Javascript常用的循环语句?课后体会一、情境导入介绍本节课的教学目标二、引入任务:猜数字游戏页面三、知识点讲解JavaScript可以通过不同的方式来输出数据:使用window.alert()弹出警告框。使用document.write()方法将内容写到HTML文档中。使用innerHTML写入到HTML元素。使用console.log()写入到浏览器的控制台。prompt实现输入JavaScript循环如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。不同类型的循环JavaScript支持不同类型的循环:for-循环代码块一定的次数for/in-循环遍历对象的属性while-当指定的条件为true时循环指定的代码块do/while-同样当指定的条件为true时循环指定的代码块类型转换parseInt(String)将字符串转换为整型数字如:parseInt(“86”)将字符串“86”转换为整型值86parseFloat(String)将字符串转换为浮点型数字如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.4JavaScriptMath(算数)对象Math(算数)对象的作用是:执行常见的算数任务。round()如何使用round()。random()如何使用random()来返回0到1之间的随机数。下面的例子使用了Math对象的floor()方法和random()来返回一个介于0和11之间的随机数:document.write(Math.floor(Math.random()*11));四、任务实现功能实现varnum=Math.floor(Math.random()*100+1);//产生1~100之间的随机整数do{varguess=parseInt(prompt(下面进行猜数游戏\n请输入1-100之间的整数:,));if(guess==num){alert(^_^,恭喜你,猜对了,幸运数字是:+num);break;}else{if(guessnum){alert(^_^,你猜的数字大了);go_on=confirm(是否继续游戏?);}else{alert(^_^,你猜的数字小了);go_on=confirm(是否继续游戏?);}}}while(go_on);alert(谢谢参与游戏!);五、评比检查学生完成情况六、总结循环的应用,猜数字页面的实现《window窗口》《JavaScript程序设计》课第3单元课程单元教学设计(2019~2020学年第1学期)所属系部:计算机与通信工程学院制定人:合作人:制定时间:2020.8***学院教务处制JavaScript程序设计课程单元教学设计单元标题:主界面设计-页眉制作单元教学学时2在整体设计中的位置第3次授课班级16移动开发班上课时间2周9月12日第1节至2周9月12日第2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能运用focus()方法聚焦;typeof(t)判断数据类型;2.能使用open()close()方法实现小窗口的打开和关闭;掌握window常用的属性和方法,树立学习信心;培养讨论思考的习惯能力训练任务任务:window的使用教学组织:7.带领学生了解课程任务8.讲解打开与关闭窗口9.使用javascript实现检测浏览器本次课使用的外语单词Logodiv+cssJavaScriptWebfunctionDategetFullYeargetMonthgetDatedocumentgetElementByIdinnerHTML案例和教学材料案例:window的使用教学材料:1.教材名称:《JavaScript程序设计实例教程》第2版.主编:程乐、郑丽萍、刘万辉.出版社:机械工业出版社,出版日期:2020.3
本文标题:JavaScript程序设计实例教程教案完整共24单元
链接地址:https://www.777doc.com/doc-6501119 .html