《Web前端开发初级（JavaScript+Jquery）》课程标准.docx

《《Web前端开发初级（JavaScript+Jquery）》课程标准.docx》由会员分享，可在线阅读，更多相关《《Web前端开发初级（JavaScript+Jquery）》课程标准.docx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web前端开发初级（JavaScr i pt+Jquery课程标准课程编码：2010392课程类别：专业核心课适用专业：移动互联应用技术专业授课单位：信息工程系1 .课程定位和课程设计1.1 课程性质与作用Web前端开发初级（JavaScript+Jquery）是移动互联应用技术专业的专业理论核心 课程，本课程具有较强的实践性。通过本课程学习，学生能够使用JavaScript脚本实现页面 动态效果,通过本课程的学习学生能够举一反三地分析程序，编写程序；掌握上机调试程序， 即善于发现程序中的错误，并且能很快地排除这些错误；具有较强的分析问题和思考问题的 能力;具有较强的计划组织协调能力、团队协作

2、能力同时锻炼学生分析问题、解决问题能力。 本课程将为学习后续专业课程打下必备的基础。本课程的后续课程为：web前端开发中级 （Php+Mysql）、Vue前端框架。1. 2课程基本理念1）基于就业导向的课程开发与设计的理念紧密围绕职业岗位的实际需求，遵循就业导向、以职业能力培养为重点，与行业企业 合作，进行基于工作过程的课程开发与设计。以工作过程为导向，课程实施行动导向的教学 模式充分表达“做中学、学中做”的特点。2）构建一体化教学体系，表达岗位技能要求、促进学生实践操作能力培养课程设计紧密结合产业需求，贴近一线服务，根据岗位能力的需要设计教学内容,科学、 合理地设计每个教学环节，充分利用校内

3、教学资源和校外实训基地，将知识与技能进行整合, 实现理论实践一体化、课堂与实习地点一体化，将教、学、做融为一体，充分表达职业性、 实践性和开放性的要求，提高学生的实践动手能力，增强毕业生就业竞争能力。2. 3课程设计思路本课程总体设计思路是打破以知识传授为主特征的传统课程教学模式，以工程为载体, 以工作过程为教学依据，强调以训练为主，以学生为主体的课程模式,加大学生的实训比例， 理论联系实际，着重实践动手能力培养。从培养学生的职业知识技能、职业素质和职业态度 入手，进行“基于工作过程”的课程开发。1）基于工作过程的课程开发与设计按照岗位能力的要求模块化设计教学内容，突出教学的应用性、实践性。按

4、岗位需求重 组课程，进行课程体系改革。以培养学生动手能力和创新能力为目的，改革课程体系，按照 工作过程系统化要求进行课程开发与设计，实施融教、学、做为一体的教学模式。2）在单元式教学设计中强调任务驱动、案例式教学过程，做到边教、边学、边练，培养职业能力。各教学任务形成知识与技能的统一，由简到繁。1 .缓冲运动基本原理2 .可以改变任意值的缓冲运动函数的封装重点讲解可以改变任意值的缓冲运动函数的封装工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称 8.3运动应用之轮播图的实现学时数8学 习目 标1 .掌握无缝滚动的制作2 .掌握用缓

5、冲运动实现商品展示学习内容教学方法和建议1 .轮播图结构与样式的实 现2 .轮播图JS局部的实现在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称9. 1 Ajax 基础学时数4学 习 目 标1 .掌握异步与同步2 .掌握 请求方法3 .掌握ajax原理学习内容教学方法和建议1. ajax简介2. 异步与同步3. 请求方法4. ajax原理5. 读取服务器端文本文件1 .重点讲解ajax原理2 .教师在Vscode输入JS

6、代码，在浏览器中显示效果，指导学生上机练习工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称9.2 Ajax获取json数据学时数4学 习目 标1 .掌握json数据格式2 .掌握利用ajax获取json数据学习内容教学方法和建议1 . json数据2 .利用ajax获取json数据1 .重点讲解ajax获取json数据的过程2 .教师在Vscode输入JS代码，在浏览器中显示效果，指导学生上机练习工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称10. IjQuery基

7、础学时数4学 习 目 标1 .了解jQuery的作用2 .掌握jQuery获取元素3 .掌握jQuery函数的应用学习内容教学方法和建议1. jQuery 介绍2. jQuery获取元素3. jQuery函数的应用教师在Vscode输入jQuery代码，在浏览器中显示效果，指导学生上机练 习工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有 HTML 、 css 、javascript 基础有较高的网站开发能力学习情境名称10.2 jQuery制作选项卡学时数4学 习 目 标掌握jQuery制作选项卡学习内容教学方法和建议用jQuery制作选项卡教师在Vscode输入jQue代码，在

8、浏览器中显示效果，指导学生上机练 习工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有 HTML 、 css 、javascript 基础有较高的网站开发能力4,课程实施4.1教材选用或编写主要选取传智播客编写的教材，为了更好的适应本专业的教学，本专业的任课老师计划 编写本课程的教材。4. 2教学方法建议Web前端开发初级(JavaScript+Jquery)课程以真实任务为案例组织教学，课程教 学方法符合“教、学、做”合一的原那么，主要采用情境教学法、讲授法、和案例教学方法, 强调学生将所学知识和技能在实践中应用。课程教学围绕五个完整工程展开，各个学习单元 主要采用“任务驱动”教学

9、方法。综合运用多媒体教学、网络资源、教学课件等教学手段, 突出学生为中心的“教、学、做”为一体教学模式。在课程教学中，为了充分表达“案例引导、任务驱动”的课程思想，以工作场景实际需 求为指引，强化学生建模思维能力、实践动手能力，让学生解决遇到的实际问题为目的，有 针对性的进行教学。这样以具体的案例任务为教学情境组织教学，以典型实际问题为载体, 强化专业技能，使学生在学习和实训过程中加深对专业知识、技能的理解和应用，培养学生 的综合职业能力，满足学生职业生涯开展的需求。4. 3教学评价、考核要求考核过程考核（工程考核）70%考勤30% （考勤考核）素质考核（根据课程情况调整）工单考核（根据课程情

10、况调整）实操考核（根据课程情况调整）10分20分40分30分考核实施由指导教师、组长共同 根据学生表现集中考 核主讲教师根据学生课 堂表现、完成任务情况 考核由主讲教师、实训指导 教师对学生课程实习 进行考核由教师根据学 生出勤进行考 核考核标准课堂回答下列问题情况根据学生课堂表现、互 动参与、任务完成的过 程及任务的的质量综 合考评根据学生提交作品质 量、的课程设计说明书 格式及质量进行评分由主讲教师根 据学生出勤 （旷、事、病、 迟到、早退）情 况进行考核4.4.课程资源开发与利用学习资料资源：如教材、实训指导书、学习参考书；信息化教学资源：多媒体课件、网络课程、多媒体素材、电子图书和专业

11、网站的开发与利用。5.其他说明课程在实际实施过程可根据具体情况做微调3）注重培养学生的自主学习与创新精神，在技能任务以及课程设计中，鼓励个性化作 品创作，让学生在学习中充提供受自己的创作成果，激发学生的学习主动性，提高其专业实践技能。2 .课程目标工作任务目标：（1）掌握常用网页特效的制作方法；（2）能够制作轮播图、选项卡、常用事件响应功能的页面;（3）学会ajax技术的使用;（4）学会jQuery的使用。职业能力目标：1）专业能力（1）能够应用开发人员工具调试JavaScript的错误；（2）能够根据用户要求完成网页的前端制作；2）方法能力（1）具备较强的学习和操作能力；（2）能够通过各种媒

12、体资源查找所需信息与资源；（3）能够对工程进行分析，指定相应工作计划；（4）能够不断总结经验，优化工作过程。3）社会能力（1）具有良好的心理素质和身体素质；（2）具有不畏艰难，勇于开拓创新、积极进取的意识；（3）具有较强的口头与书面表达能力、人际沟通能力；（4）具有团队合作交流和组织管理的能力；（5）具有严谨的、细致的工作态度；（6）具有工作责任感。3 .课程内容与要求课程内容学习情境子情境参考学时情境名称情境描述情境1认识 JavaScriptJs入门Js基础语法16情境2JavaScript的字符串操 作2.1字符串常用方法（1） （charAt 方法、indexOf 方法、search

13、方 法）2. 2字符串常用方法（2） （slice方法8substr 方法、substring 方法、split方法)情境3JavaScript的数组操作3. IJavaScript 数组的定 义、数组的push。与 unshift ()方法、数组的pop()与shift () 方法3. 2 sort ()方法、 concatO与 join。方法、 splice。方法16情境4JavaScript 的函数4.1函数声明、函数返回 值、函数传参4. 2常用数学(Math)函数、 Date函数、定时器函数 (setlntervaK setTimeout)16情景5D0M8情境6事件3. 1事件基础

14、3. 2事件应用8情境7选项卡8情景8运动5. 1运动基本原理5. 2运动应用之透明度5. 3运动应用之商品展示24情乐9Ajax6. 1 Ajax 基础6. 2 Ajax获取json数据8情景10jQuery7. 2 jQuery 基础7. 1 jQuery制作选项卡83.1 学习情境规划和学习情境设计学习情境名称情境 1. 1 JavaScript 入门学时数8学 习 目标1 .了解JavaScript的开展历程2 .掌握getElementByid的使用，能够创立具有简单交互功能的的网页。学习内容教学方法和建议1 .JS的6大数据类型2 . JS的运算符3 .初识函数4 .利用Vscod

15、e创立第一个页 面在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境1.2 Js基础语法学时数8学 习 目 标1 ,掌握if和else的用法2.掌握for循环的使用学习内容教学方法和建议1. if 和 else2. for循环1 .让学生重点理解for循环2 .在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演 示后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体

16、教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境2.1字符串常用方法（1）学时数4学 习 目 标掌握charAt方法、indexOf方法、search方法学习内容教学方法和建议charAt 方法、i ndexOf 方法、 search方法的使用在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境2. 2字符串常用方法(2)学时数4学 习 目 标掌握slice方法、substr方法、substring方

17、法、split方法学习内容教学方法和建议slice 方法、substr 方法、 substring 方法、split 方法 的使用在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境3.1数组的常用方法(1)学时数8学 习 目 标掌握JavaScript数组的定义、 数组的push。与unshift ()方法、 数组的pop。与shift。方法学习内容教学方法和建议JavaScript数组的定义以及 数组的push。与u

18、nshift ()方 法、数组的pop()与shift () 方法在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力情境3. 2数组的常用方法（2）学 习 目 标掌握sort （）方法、concat（）join。方法、spliceO 方法学习内容教学方法和建议sort ()方法、concat ()与 join ()方法、splice ()方法的使用在Vscode中输入htnil、Css、JS代码，在浏览器中显示效果，教师演示 后指导学

19、生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学时数8学习情境名称学习情境名称情境4.1函数的使用（1）学时数8学 习 目 标掌握函数声明、函数返回值、函数传参学习内容教学方法和建议函数声明、函数返回值、函数 传参在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境4. 2函数的使用（2）学时数8掌握常用数学(Math)函数、Date函数、定

20、时器函数(setinterval、setTimeout)学习内容教学方法和建议常用数学(Math)函数、Date函 数、定时器函数 (setinterval、 setTimeout)在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境5 D0M学时数8学 习目 标1 .掌握D0M结构2 .掌握D0M节点常用操作学习内容教学方法和建议1. D0M结构2. D0M节点类型3. D0M节点常用操作在Vscode中输入html、

21、Css、JS代码，在浏览器中显示效果，教师 演示后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境6.1事件基础学时数4学 习 目 标1 ,掌握常用事件类型的应用2 .掌握键盘事件3 .掌握事件函数绑定4 . onfocus 与 onblur 事件学习内容教学方法和建议1 .常用事件类型2 .键盘事件3 .事件函数绑定4 . onfocus 与 onblur 事件在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础

22、教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境6. 2事件应用学时数4学 习 目 标掌握拖拽原理学习内容教学方法和建议拖拽效果的实现1 .重点讲解拖拽原理2 .在Vscode中输入html、Css、JS代码，在浏览器中显示效果，教师演 示后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境7选项卡学时数8学 习 目 标掌握用js实现选项卡效果学习内容教学方法和建议1. 选项卡样式与结构的设 计2. 用js实现选项卡效果在Vscode中输入html、C

23、ss、JS代码，在浏览器中显示效果，教师演示 后指导学生上机练习，以学生练习为主工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境81运动基本原理学时数8学 习 目 标1 .掌握Setinterval定时器的使用2 .掌握运动基本原理及运动函数的封装3 .掌握“提供到”小实例学习内容教学方法和建议1 .定时器2 .运动基本原理3 .“提供到”小实例重点讲解运动函数的封装工具与媒体学生已有基础教师所需要的执教能力多媒体教室、机房有HTML与css基础有较高的网站开发能力学习情境名称情境8.2运动应用之透明度学时数8学1.掌握缓冲运动基本原理习2.掌握可以改变任意值的缓冲运动函数的封装目学习内容学习内容教学方法和建议