《JS教学JavaScript快速入门教学设计教案电子教案.docx》由会员分享，可在线阅读，更多相关《JS教学JavaScript快速入门教学设计教案电子教案.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、前端开发案例教程JavaScript教学设计课程名称：JavaScript 前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：某某教师年月日2课题第 1 章 JavaScript 快速入门打算名称学时3 学时在 Web 前端开发中，HTML、CSS 和JavaScript 是开发一个网页所必备的技术。在把握内容了 HTML 和 CSS 技术之后，已经能够编写出各式各样的网页了，但假设想让网页具有良分析好的交互性，JavaScript 就是一个极佳的选择。本章将介绍JavaScript 的根本概念，并通过实践案例来体验JavaScript 编程。教学目1.生疏JavaScript 的
2、用途和进展状况标及基2.理解JavaScript 与ECMAScript 的关系本要求3.把握JavaScript 的根本使用方法教学JavaScript 引入方式、语法风格、注释、输出语句重点教学函数、对象、大事的根本概念难点教学承受教师课堂讲授为主教学l概念性学问点：提出为什么，将抽象具体化，协作教学PPT、图例关心讲解。方式l功能性学问点：提需求，并上机演示如何应用，重点内容总结运行原理。l 综合实战操作：分析整体的设计思路和步骤，对具体操作进展上机演练。第一学时初识 JavaScript、开发工具 一、提出需求，导入学习任务1回忆网页开发的常用技术，引出为什么要学习JavaScript
3、。l HTML、CSS 和JavaScript 是开发网页的必备技术。教lHTML、CSS 用来实现网页的构造和样式。学l使用JavaScript 可以让网页具有良好的交互性。过2明确学习方向。程把握JavaScript 的概念、应用、由来、特点。 理解JavaScript 与ECMAScript 的关系。 了解常用扫瞄器的分类、特点，以及排版引擎、JavaScript 引擎的概念。 了解常用编辑工具，至少把握一种编辑工具的使用。二、学问讲解1. 什么是JavaScriptl 作用：开发交互式的Web 页面。l 分工：HTML 负责构造，CSS 负责样式，JavaScript 负责行为。Jav
4、aScript 可以嵌入到网页中。l 应用：演示JavaScript 在网页开发中的应用，如轮播图、选项卡、地图、表单验证、百度搜寻框等。l 优点：可以使网页的互动性更强，用户体验更好。2. JavaScript 的由来与进展l 由来：1995 年网景公司开发的LiveScript。l 名称转变：借用Java 名气，改名为JavaScript，两者其实是不同的语言。l 设计初衷：嵌入到网页中的编程语言，用来把握扫瞄器的行为。l 滥用现象：广告、弹窗、恶意代码、安全漏洞。l 里程碑：Ajax 技术的流行与进展。l 将来进展：效劳器端Node.js、移动端开发、全栈开发。3. JavaScript
5、 的特点l JavaScript 是脚本语言，具有脚本语言的一些特点：简洁、易学、易用。l JavaScript 可以跨平台，开发和使用都格外便利，支持PC 和移动端。l JavaScript 支持面对对象，诞生了很多库和框架，提高开发速度，能够用来解决简洁问题。4. JavaScript 与ECMAScript 的关系l ECMAScript 是一种标准标准，用于统一JavaScript 同类的语言，如JScript。l JavaScript 是ECMAScript 的一种实现，其他实现还有ActionScript。5. 开发工具扫瞄器l 介绍常见的扫瞄器和其开发厂商。l 了解常见扫瞄器的特
6、点。l 留意老版本IE 扫瞄器的市场占有率和兼容性问题。l 重点介绍标准扫瞄器Chrome、火狐。l 介绍扫瞄器的引擎，并列举常见扫瞄器和与之相对应的引擎。l 理解扫瞄器引擎与扫瞄器、开发人员的关系。l 生疏扫瞄器的兼容问题。l 生疏Chrome 扫瞄器的开发者工具。6. 开发工具代码编辑器l 了解常见的代码编辑器。l 选择一种代码编辑器进展具体讲解。l 把握代码编辑器的安装和使用方法，并把握根本的配置。三、【案例】第一个 JavaScript 程序1. 创立网页并设置编码l 创立 hello.html 文件。l 将编码设置为UTF-8 无 BOM 格式。l 补充讲解常见字符集、编码格式，如
7、ANSI、GB2312、GBK、Unicode、UTF-8， 以及UTF-8 的 BOM 的含义。2. 编写一个简洁的网页l 使用HTML5 的模板编写一个简洁的网页。l 复习网页的根本构造，强调meta 设置字符集的必要性。3. 将JavaScript 嵌入到HTMLl 思考如何在HTML 中嵌入JavaScript，引出“落脚点”的概念。l 思考JavaScript 代码应当写在什么位置。l 讲解JavaScript 标记。l 介绍一个根本函数alert的使用，输出一个字符串。l 讲解语句的概念，以及“;”的作用。4. 测试网页程序l 使用扫瞄器翻开hello.html。l 观看程序运行结
8、果。5. 总结JavaScript 根本语法规章l JavaScript 严格区分大小写，演示将alert 改成Alert 观看效果。l JavaScript 对空格、换行、缩进不敏感，一条语句可以分成多行书写。演示将alert 后面的括号“”换到下一行，观看程序是否正确执行。l JavaScript 的分号可以省略，但要留意什么状况下可以省略，什么状况下不能省略。并指出代码风格的重要性，不建议省略分号。四、学问稳固（1） 回忆上课前的学习目标，对本节课学问点进展总结。（2） 使用博学谷系统下发课后作业。其次学时JavaScript 入门一、回忆上节课内容（1） 对上节课布置的作业以及学生提出
9、的问题进展答疑解惑。（2） 回忆上节课内容，引出本节课主题。上节课介绍了JavaScript 的根本概念，并通过一个简洁的案例演示了如何在网页中编写JavaScript 代码。接下来本节将针对JavaScript 入门学问进展详解。（3） 明确学习方向。 把握JavaScript 的 3 种引入方式，了解每种方式的特点和应用场景。 理解JavaScript 的异步加载模式。 把握常用输出语句的使用。 把握注释的使用。 生疏JavaScript 的简洁数据运算操作。 了解JavaScript 函数的根本概念，生疏函数的根本代码。 了解JavaScript 对象的根本概念，生疏对象的根本代码。 了
10、解JavaScript 大事的根本概念，把握如何给按钮添加单击大事。二、学问讲解1. JavaScript 引入方式嵌入式l 标记、type 属性的作用。2. JavaScript 引入方式外链式l 演示外链式的实现方式，以及代码书写的细节。l 复习相对路径、确定路径、URL 地址的概念。l 比较外链式和嵌入式的优缺点，以及适合的应用场景。3. JavaScript 引入方式行内式l 了解行内式的代码书写方式。l 了解行内式的应用场景。4. JavaScript 引入方式异步加载l 讲解JavaScript 在网页中的加载挨次，以及代码堵塞的问题。l 演示的属性async 和 defer 的作
11、用，比较两者的区分。5. 常用输出语句l 演示 alert、console.log、document.write的使用。l 演示 document.write依据嵌入位置的不同，而产生的不同结果。6. 注释l 理解注释的作用，为什么要在代码中使用注释。l 演示单行注释的根本代码。l 演示多行注释的根本代码，留意嵌套问题。l 比较单行注释和多行注释，把握各自的特点。7. 数据与运算l 演示如何利用JavaScript 实现加、减、乘、除运算。l 演示如何利用JavaScript 比较两个数字的大小。l 生疏字符串的概念，演示如何使用字符串来保存数据。l 演示使用比较运算符“=”比较两个字符串是否
12、一样。l 演示字符串与数字拼接的细节问题，“+”针对数字和字符串操作的区分。l 演示如何依据比较的不同结果，执行不同的代码。l 生疏变量的概念，演示如何利用变量保存数据。8. 函数l 介绍函数的概念、作用，消灭的缘由。l 以 alert、prompt为例，演示函数的优点，以及其参数、返回值的概念。l 生疏如何编写一个简洁的自定义函数。9. 对象l 介绍对象的概念、作用、消灭的缘由。l 以 window、document、String 对象为例，演示对象的根本使用，体会使用对象的优点，学习对象的必要性。l 生疏自定义对象的根本语法。10. 大事l 介绍大事的根本概念。l 举例说明哪些操作属于大事
13、，如点击鼠标、滚动屏幕、敲击键盘等。l 生疏如何给一个按钮添加单击大事。三、【案例】转变网页背风光1. 案例分析l 通过案例，建立对 JavaScript 开发的兴趣，利用 JavaScript 完成一个简洁的网页交互，带来成就感。并生疏了函数、大事、对象在开发中的使用场景。2. 代码实现l 编写网页根本构造。l 预备 4 个按钮用来转变网页背风光，并利用函数、大事来完成功能。3. 总结l 随着后面的学习，就能理解这些代码的实现原理，并学会依据自己的需求来开发更多的程序。四、【动手实践】验证用户输入的密码1.案例分析l 在网页中弹出一个输入框，用户输入密码后，对密码进展验证。l 验证后，提示用户输入的密码是正确还是错误。2.代码实现ll通过 prompt函数提示用户输入的密码密码，接收该函数的返回值，保存给变量 password。推断密码是否正确，通过 ifelse语句，正确时弹出“密码输入正确！”，错误时弹出“密码输入错误！”。五、学问稳固（1） 回忆上课前的学习目标，对本节课学问点进展总结。（2） 使用博学谷系统下发课后作业。第三学时上机练习教师发放本章相关资料和素材，学生进展上机练习，以此检查学生对相关学问点的把握状况。上机练习完成后将报告通过平台提交给教师。教学后记