《Web前端技术》课程教学大级一、课程信息课程名称：Web前端技术Web Front-End Technology课程代码：06E7027B课程类别：专业选修课适用专业：数字媒体技术专业课程学时：32学时（含16学时实验）课程学分：1.5学分修读学期：第四学期先修课程：计算机导论、C语言程序设计二、课程目标《Web前端技术》是数字媒体技术专业的一门重要专业选修课程，该课程以前端三大核心技术HTML，CSS，JavaScript为主要内容，其目的是使学生通过本课程的学习，了解前端基本概念，掌握前端设计基本思想、HTML标记、CSS样式、页面布局和JavaScript的基础知识与事件处理等内容，使学生熟悉前端开发流程、掌握常见的页面布局效果、学会开发各种企事业单位、门户、电商类网站，培养学生基于前端技术解决相应工程方面问题的专业能力，提高分析问题、解决问题、合作学习的能力，激发学生的探索和创新精神，为以后深入学习Web系统开发课程和从事软件开发工作打下坚实的基础。（一）具体目标通过本课程的学习，使学生达到以下目标：1.了解前端技术的基本思想，理解前端技术的标准体系，握前端三大核心技术HTML，CSS，JavaScript的基本原理、使用方法和编码规范，能够应用前端技术，分析和解决计算机复杂工程问题。【支撑毕业要求指标点3.1】2.能够基于前端技术基本思想和标准体系，结合实际问题，根据开发需求选取合适开发工具，设计出符合实践的可行的解决方案。【支撑毕业要求指标点4.1、4.2)
《Web 前端技术》课程教学大纲 一、课程信息 课程名称：Web前端技术 Web Front-End Technology 课程代码：06E7027B 课程类别：专业选修课 适用专业：数字媒体技术专业 课程学时：32学时（含16学时实验） 课程学分：1.5学分 修读学期：第四学期 先修课程：计算机导论、C语言程序设计 二、课程目标 《Web 前端技术》是数字媒体技术专业的一门重要专业选修课程，该课程 以前端三大核心技术 HTML，CSS，JavaScript 为主要内容，其目的是使学生通 过本课程的学习，了解前端基本概念，掌握前端设计基本思想、HTML 标记、 CSS 样式、页面布局和 JavaScript 的基础知识与事件处理等内容，使学生熟悉前 端开发流程、掌握常见的页面布局效果、学会开发各种企事业单位、门户、电商 类网站，培养学生基于前端技术解决相应工程方面问题的专业能力，提高分析问 题、解决问题、合作学习的能力，激发学生的探索和创新精神，为以后深入学习 Web 系统开发课程和从事软件开发工作打下坚实的基础。 （一）具体目标 通过本课程的学习，使学生达到以下目标： 1. 了解前端技术的基本思想，理解前端技术的标准体系，握前端三大核心 技术 HTML，CSS，JavaScript 的基本原理、使用方法和编码规范，能够应用前 端技术，分析和解决计算机复杂工程问题。【支撑毕业要求指标点 3.1】 2. 能够基于前端技术基本思想和标准体系，结合实际问题，根据开发需求 选取合适开发工具，设计出符合实践的可行的解决方案。【支撑毕业要求指标点 4.1、4.2】
3.能熟练运用前端开发技术，结合其它相关技术实现业务功能，并对整个项目进行测试调试，保证功能的完善及系统的健壮。【支撑毕业要求指标点4.3】4.能够在Hbuilder或VScode等集成开发环境下，基于前端技术对复杂计算机软件工程问题进行分析、设计、开发和测试，培养学生在前端开发开中的创新能力，为从事相关应用领域开发，系统运行及维护打下坚实的基础。【支撑毕业要求指标点5.2】（二）课程目标与毕业要求的对应关系表1课程目标与毕业要求指标点的对应关系课程目标支撑的毕业要求支撑的毕业要求指标点3.设计/开发【3.1】掌摄数字媒体知识，能够在数字媒体系统的开发项目中进课程目标1解决方案行系鏡设计。【4.1】能够基于数字媒体学科相关原理和方法选择研究路线对复杂工程问题进行分解。课程目标 24.科学研究【4.2】能够运用数字媒体学科相关原理和专业知识设计实验方案，并按照合理步赚实施实验以支持复杂工程问题的解决：【4.3】能够对采集到的实验数据进行整理、分析和解释，并能通课程目标34.科学研究过信息综合得出有效结论。【5.2】具有根据工程问题需求利用文献和网络资源查阅相关资料课程目标 45.现代工具运用的能力；三、课程内容（一）课程内容与课程目标的关系
3. 能熟练运用前端开发技术，结合其它相关技术实现业务功能，并对整个 项目进行测试调试，保证功能的完善及系统的健壮。【支撑毕业要求指标点 4.3】 4. 能够在 Hbuilder 或 VS code 等集成开发环境下，基于前端技术对复杂计 算机软件工程问题进行分析、设计、开发和测试，培养学生在前端开发开中的创 新能力，为从事相关应用领域开发，系统运行及维护打下坚实的基础。【支撑毕 业要求指标点 5.2】 （二）课程目标与毕业要求的对应关系 表1 课程目标与毕业要求指标点的对应关系 课程目标 支撑的毕业要求 支撑的毕业要求指标点 课程目标 1 3. 设计/开发 解决方案 【3.1】掌握数字媒体知识，能够在数字媒体系统的开发项目中进 行系统设计。 课程目标 2 4．科学研究 【4.1】能够基于数字媒体学科相关原理和方法选择研究路线对复 杂工程问题进行分解。 【4.2】能够运用数字媒体学科相关原理和专业知识设计实验方案， 并按照合理步骤实施实验以支持复杂工程问题的解决； 课程目标 3 4．科学研究 【4.3】能够对采集到的实验数据进行整理、分析和解释，并能通 过信息综合得出有效结论。 课程目标 4 5.现代工具运用 【5.2】具有根据工程问题需求利用文献和网络资源查阅相关资料 的能力； 三、课程内容 （一）课程内容与课程目标的关系
表2课程内容与课程目标的关系课程内容教学方法支撑的课程目标学时安排2第一章Web前端技术综述案例式教学、启发式教学课程目标14第二章HTML课程目标1素例式教学、任务驱动教学2第三章CSS基础案例式教学、启发式教学课程目标14CSS选择器第四章案例式教学、启发式教学课程目标1、2、34第五章CSS专题应用案例式教学、任务驱动教学课程目标1、2、3、44第六章课程目标1JavaScript基础案例式教学、启发式教学4第七章JavaScript对象案例式教学、任务驱动教学课程目标1、2、3、44第八章Vue基础案例式教学、任务驱动教学课程目标1课程设计4综合主题网站案例式教学、任务驱动教学课程目标1、2、3、4合计32学时（二）具体内容第一章Web前端技术综述(2学时)【教学目标与要求】1、教学目标：知识目标：通过本章的教学，使学生对Web前端技术有一个整体宏观上的了解。了解Web前端发展历史，理解Web前端核心技术标准。能力目标：通过整理Web前端发展史，培养学生查阅资料、调研分析的能力。素养目标：通过对Web前端发展史的介绍，培养学生坚忍不拔、敢为人先、勇于奉献的精神，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素质。2、教学要求：了解Web前端发展历史，了解Web前端核心技术组成，理解Web前端核心技术标准，了解Web前端工具，掌握其基本使用方法。【教学重点与难点】
表2 课程内容与课程目标的关系 课程内容 教学方法 支撑的课程目标 学时安排 第一章 Web 前端技术综述 案例式教学、启发式教学 课程目标 1 2 第二章 HTML 案例式教学、任务驱动教学 课程目标 1 4 第三章 CSS 基础 案例式教学、启发式教学 课程目标 1 2 第四章 CSS 选择器 案例式教学、启发式教学 课程目标 1、2、3 4 第五章 CSS 专题应用 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 第六章 JavaScript 基础 案例式教学、启发式教学 课程目标 1 4 第七章 JavaScript 对象 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 第八章 Vue 基础 案例式教学、任务驱动教学 课程目标 1 4 课程设计 综合主题网站 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 合计 32 学时 （二）具体内容 第一章 Web 前端技术综述(2 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生对 Web 前端技术有一个整体宏观上的 了解。了解 Web 前端发展历史，理解 Web 前端核心技术标准。 能力目标：通过整理 Web 前端发展史，培养学生查阅资料、调研分析的能 力。 素养目标：通过对 Web 前端发展史的介绍，培养学生坚忍不拔、敢为人先、 勇于奉献的精神，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、 人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素 质。 2、教学要求： 了解 Web 前端发展历史，了解 Web 前端核心技术组成，理解 Web 前端核 心技术标准，了解 Web 前端工具，掌握其基本使用方法。 【教学重点与难点】
1、教学重点：Web前端发展历史；Web前端核心技术组成及其标准。2、教学难点：无。【学习内容】1、Web基础知识2、Web前端技术及标准3、Web前端工具【思政元素融入点】本章通过对Web前端发展史的介绍，引导激励学生树立坚忍不拔、敢为人先，勇于奉献的精神，同时激发学生的民族自豪感和自信心，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素质。第二章HTML(4学时）【教学自标与要求】1、教学目标：知识目标：通过本章的教学，使学生了解HTML的基本概念，掌握HTML的基本结构，掌握HTML常用标签的使用方法和应用场景，能够使用HTML标签设计规范的页面。能力目标：通过HTML常用标签的学习和配套的作业及实验，培养学生的动手能力、工程实践能力以及细心耐心的工作态度。素养目标：加强学生对“初心不改，使命不忘，与历史同步，与时代同行”的认识和理解。2、教学要求：了解HTML的基本概念，掌握HTM基本结构以及HTML的编码规范。掌握页面结构的初步设计，理解HTML标题字标记以及空格和特殊符号。理解文本标记中的物理样式标标记与逻辑样式标记的应用以及字体font标签。掌握超链接的语法和创建方法，理解超链接的分类、路径等相关概念，学会利用超链接设置书签，学会编写不同类型的超链接的Web网页代码。了解列表的类型，掌握有序列表、定义列表、无序列表的标记语法及属性语法。学会使用无序、有序及定义列表设计Web网页
1、教学重点：Web 前端发展历史；Web 前端核心技术组成及其标准。 2、教学难点：无。 【学习内容】 1、Web 基础知识 2、Web 前端技术及标准 3、Web 前端工具 【思政元素融入点】 本章通过对 Web 前端发展史的介绍，引导激励学生树立坚忍不拔、敢为人先， 勇于奉献的精神，同时激发学生的民族自豪感和自信心，引导学生树立远大理想 和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予 的光荣使命，全面提高学生思想政治素质。 第二章 HTML(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生了解 HTML 的基本概念，掌握 HTML 的基本结构，掌握 HTML 常用标签的使用方法和应用场景，能够使用 HTML 标 签设计规范的页面。 能力目标：通过 HTML 常用标签的学习和配套的作业及实验，培养学生的 动手能力、工程实践能力以及细心耐心的工作态度。 素养目标：加强学生对“初心不改，使命不忘，与历史同步，与时代同行” 的认识和理解。 2、教学要求： 了解 HTML 的基本概念，掌握 HTM 基本结构以及 HTML 的编码规范。 掌握页面结构的初步设计，理解 HTML 标题字标记以及空格和特殊符号。 理解文本标记中的物理样式标标记与逻辑样式标记的应用以及字体 font 标签。 掌握超链接的语法和创建方法，理解超链接的分类、路径等相关概念，学会 利用超链接设置书签，学会编写不同类型的超链接的 Web 网页代码。 了解列表的类型，掌握有序列表、定义列表、无序列表的标记语法及属性语 法。学会使用无序、有序及定义列表设计 Web 网页
掌握设计表格的标记和属性、表格行标记的属性及设置方法、表格单元格的跨行与跨列属性的设置方法、表格的嵌套方法。学会在表格中嵌入各种页面元素、会使用表格进行简易网页布局。掌握图像img标记语法及属性设置方法、滚动文字marquee标记语法及属性设置方法、背景音乐bgsound标记语法及属性设置方法、嵌入多媒体文件embed标记语法及属性设置方法。学会采用超链接插入动画、音频和视频类等多媒体文件。理解Web页面中表单的概念与作用，掌握表单结构语法及属性语法、表单元素标记及属性语法。学会综合运用表单及表单元素设计网页。【教学重点与难点】1、教学重点：HTML标签的使用方法和应用场景。2、教学难点：表格、表单。【学习内容】1、HTML概述2、HTML结构3、文本标签4、超链接标签5、列表类标签6、表格标签7、多媒体类标签8、表单【思政元素融入点】本章主要讲解HTML基础及基本结构、常用标签的使用方法和应用场景等，内容知识点分布具有“多、散、小”的特点，不易掌握应用，因此，需要通过具体应用案例帮助学生梳理知识脉络，同时在案例讲解中进行“初心不改，使命不忘，与历史同步，与时代同行”的思想熏陶。第三章CSS基础(2学时)【教学目标与要求】1、教学目标：
掌握设计表格的标记和属性、表格行标记的属性及设置方法、表格单元格的 跨行与跨列属性的设置方法、表格的嵌套方法。学会在表格中嵌入各种页面元素、 会使用表格进行简易网页布局。 掌握图像 img 标记语法及属性设置方法、滚动文字 marquee 标记语法及属性 设置方法、背景音乐 bgsound 标记语法及属性设置方法、嵌入多媒体文件 embed 标记语法及属性设置方法。学会采用超链接插入动画、音频和视频类等多媒体文 件。 理解 Web 页面中表单的概念与作用，掌握表单结构语法及属性语法、表单 元素标记及属性语法。学会综合运用表单及表单元素设计网页。 【教学重点与难点】 1、教学重点：HTML 标签的使用方法和应用场景。 2、教学难点：表格、表单。 【学习内容】 1、HTML 概述 2、HTML 结构 3、文本标签 4、超链接标签 5、列表类标签 6、表格标签 7、多媒体类标签 8、表单 【思政元素融入点】 本章主要讲解 HTML 基础及基本结构、常用标签的使用方法和应用场景等， 内容知识点分布具有“多、散、小”的特点，不易掌握应用，因此，需要通过具 体应用案例帮助学生梳理知识脉络，同时在案例讲解中进行“初心不改，使命不 忘，与历史同步，与时代同行”的思想熏陶。 第三章 CSS 基础(2 学时) 【教学目标与要求】 1、教学目标：
知识目标：通过本章的教学，使学生了解CSS基本概念，对为什么要使用CSS有一个直观的认知，能够在页面中使用CSS进行基本的样式设置。能力目标：通过查找CSS在实际案例中的应用，培养学生搜集资料、整理资料、分析资料的能力。素养目标：引导学生对于国家传统文化继承的思考，启发学生学习传统文化，思考传统文化，传承传统文化。2、教学要求：了解CSS的基本概念、掌握CSS的基本语法，理解CSS继承与层叠的特性，掌握页面中使用CSS的四种方式和应对场景。【教学重点与难点】1、教学重点：CSS的基本语法，页面中使用CSS的四种方式和应对场景。2、教学难点：CSS层叠特性。【学习内容】1、CSS概述2、HTML中使用CSS的方法3、CSS基本特性【思政元素融入点】本章主要讲解CSS的基本概念、基本语法及主要特性，在讲解CSS在Web前端开发领域的主要贡献时，强调CSS实现了内容和样式的分离，以此引申，引导学生专注于自己擅长的事情更容易取得好的效果，培养学生的专注精神。在讲解CSS的继承特性时，引导学生对于国家传统文化继承的思考，启发学生学习传统文化，思考传统文化，传承传统文化，第四章CSS选择器（4学时）【教学目标与要求】1、教学目标：知识目标：通过本章的教学，使学生了解并掌握CSS选择器的使用方法和应用场景。能力目标：通过CSS选择器在具体案例中的应用，培养学生针对具体场景选择合适选择器的能力学生以及面对实际问题的工程实践能力
知识目标：通过本章的教学，使学生了解 CSS 基本概念，对为什么要使用 CSS 有一个直观的认知，能够在页面中使用 CSS 进行基本的样式设置。 能力目标：通过查找 CSS 在实际案例中的应用，培养学生搜集资料、整理 资料、分析资料的能力。 素养目标：引导学生对于国家传统文化继承的思考，启发学生学习传统文化， 思考传统文化，传承传统文化。 2、教学要求： 了解 CSS 的基本概念、掌握 CSS 的基本语法，理解 CSS 继承与层叠的特性， 掌握页面中使用 CSS 的四种方式和应对场景。 【教学重点与难点】 1、教学重点：CSS 的基本语法，页面中使用 CSS 的四种方式和应对场景。 2、教学难点：CSS 层叠特性。 【学习内容】 1、CSS 概述 2、HTML 中使用 CSS 的方法 3、CSS 基本特性 【思政元素融入点】 本章主要讲解 CSS 的基本概念、基本语法及主要特性，在讲解 CSS 在 Web 前端开发领域的主要贡献时，强调 CSS 实现了内容和样式的分离，以此引申， 引导学生专注于自己擅长的事情更容易取得好的效果，培养学生的专注精神。在 讲解 CSS 的继承特性时，引导学生对于国家传统文化继承的思考，启发学生学 习传统文化，思考传统文化，传承传统文化。 第四章 CSS 选择器(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生了解并掌握 CSS 选择器的使用方法和 应用场景。 能力目标：通过 CSS 选择器在具体案例中的应用，培养学生针对具体场景 选择合适选择器的能力学生以及面对实际问题的工程实践能力
素养目标：培养学生综合分析问题，选择合适工具的能力，培养学生严谨的学习态度和一丝不苟的工作方法。2、教学要求：了解CSS选择器的基本概念，了解CSS选择器的分类，掌握CSS各种选择器的使用方法和应用场景。【教学重点与难点】1、教学重点：CSS选择器的使用方法和应用场景。2、教学难点：伪类选择器和伪元素选择器的使用方法和应用场景。【学习内容】1、CSS选择器基本概念及其分类2、基本选择器3、复合选择器4、伪类选择器5、属性选择器6、伪元素选择器【思政元素融入点】本章主要讲解CSS的各种选择器，CSS选择器在网页样式设置中起着举足轻重的作用，通过不同选择器的配合使用，可以对网页的样式进行或统一或精准的设置，以此为基础，培养学生综合分析问题，选择合适工具的能力，培养学生严谨的学习态度和一丝不苟的工作方法。第五章CSS专题应用(4学时)【教学目标与要求】1、教学目标：知识目标：通过本章的教学，使学生理解CSS盒子模型，并能够基于盒子模型进行页面布局。能力目标：通过对复杂页面布局的实现，培养学生分解复杂问题、分析复杂问题和解决复杂问题的能力。素养目标：通过具体案例对学生进行爱国主义教育：培养学生理论联系实际的能力，加强学生的动手能力
素养目标：培养学生综合分析问题，选择合适工具的能力，培养学生严谨的 学习态度和一丝不苟的工作方法。 2、教学要求： 了解 CSS 选择器的基本概念，了解 CSS 选择器的分类，掌握 CSS 各种选择 器的使用方法和应用场景。 【教学重点与难点】 1、教学重点：CSS 选择器的使用方法和应用场景。 2、教学难点：伪类选择器和伪元素选择器的使用方法和应用场景。 【学习内容】 1、CSS 选择器基本概念及其分类 2、基本选择器 3、复合选择器 4、伪类选择器 5、属性选择器 6、伪元素选择器 【思政元素融入点】 本章主要讲解 CSS 的各种选择器，CSS 选择器在网页样式设置中起着举足 轻重的作用，通过不同选择器的配合使用，可以对网页的样式进行或统一或精准 的设置，以此为基础，培养学生综合分析问题，选择合适工具的能力，培养学生 严谨的学习态度和一丝不苟的工作方法。 第五章 CSS 专题应用(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生理解 CSS 盒子模型，并能够基于盒子 模型进行页面布局。 能力目标：通过对复杂页面布局的实现，培养学生分解复杂问题、分析复杂 问题和解决复杂问题的能力。 素养目标：通过具体案例对学生进行爱国主义教育；培养学生理论联系实际 的能力，加强学生的动手能力
2、教学要求：理解CSS盒子模型，熟悉CSS中常用的单位，掌握边框、边界、填充及内容等属性及设置方法。掌握与文本相关的CSS样式的控制和使用方法及应用场景，掌握与列表相关的CSS样式的控制和使用方法及应用场景，理解标准文档流和非标准文档流的概念，理解HTML元素的分类及其特性，理解浮动与定位，掌握浮动和定位的使用方法和应用场景，理解flex布局，掌握flex的组成，掌握基于flex的弹性容器和弹性元素设置方法的和应用场景，掌握DIV+CSS布局的技巧及其应用。【教学重点与难点】1、教学重点：CSS盒子模型、相关专题及应用场景。2、教学难点：定位技术。【学习内容】1、CSS盒子模型2、CSS专题应用-文本3、CSS专题应用-列表4、CSS专题应用-浮动与定位5、CSS专题应用-flex6、CSS专题应用-DIV+CSS页面布局【思政元素融入点】本章主要讲解CSS在文本、列表以及布局和定位中的应用，内容较为抽象，学生不易理解，多通过具体的案例进行讲解，并通过所选案例对学生进行爱国主义教育。同时，本部分配套的实践活动可以培养学生理论联系实际的能力，加强学生的动手能力。第六章JavaScript基础（4学时）【教学目标与要求】1、教学目标：知识目标：通过教学，使学生掌握JavaScript的基础知识。能力目标：通过JavaScript实现动态页面，培养学生解决实际问题的能力以及严谨的工作态度
2、教学要求： 理解 CSS 盒子模型，熟悉 CSS 中常用的单位，掌握边框、边界、填充及内 容等属性及设置方法。掌握与文本相关的 CSS 样式的控制和使用方法及应用场 景，掌握与列表相关的 CSS 样式的控制和使用方法及应用场景，理解标准文档 流和非标准文档流的概念，理解 HTML 元素的分类及其特性，理解浮动与定位， 掌握浮动和定位的使用方法和应用场景，理解 flex 布局，掌握 flex 的组成，掌握 基于 flex 的弹性容器和弹性元素设置方法的和应用场景，掌握 DIV+CSS 布局的 技巧及其应用。 【教学重点与难点】 1、教学重点：CSS 盒子模型、相关专题及应用场景。 2、教学难点：定位技术。 【学习内容】 1、CSS 盒子模型 2、CSS 专题应用-文本 3、CSS 专题应用-列表 4、CSS 专题应用-浮动与定位 5、CSS 专题应用-flex 6、CSS 专题应用-DIV+CSS 页面布局 【思政元素融入点】 本章主要讲解 CSS 在文本、列表以及布局和定位中的应用，内容较为抽象， 学生不易理解，多通过具体的案例进行讲解，并通过所选案例对学生进行爱国主 义教育。同时，本部分配套的实践活动可以培养学生理论联系实际的能力，加强 学生的动手能力。 第六章 JavaScript 基础(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过教学，使学生掌握 JavaScript 的基础知识。 能力目标：通过 JavaScript 实现动态页面，培养学生解决实际问题的能力以 及严谨的工作态度
素养目标：培养学生的刻苦钻研精神、创新开拓精神以及严谨的工作态度。2、教学要求：理解JavaScript程序的概念和作用，掌握页面中使用JavaScript的方法，理解JavaScript数据类型，掌握JavaScript标识符和变量的概念及使用方法、JavaScript常用运算符和表达式概念，掌握JavaScript中顺序、分支、循环3种程序控结构语法、JavaScript函数的分类、定义和使用。【教学重点与难点】1、教学重点：JavaScript程序控制结构。2、教学难点：JavaScript中数据类型的理解。【学习内容】1、JavaScript概述2、JavaScript基本语法3、JavaScript流程控制4、JavaScript函数5、数组【思政元素融入点】本章主要讲解JavaScript的基础知识，讲解案例多以CSS专题应用中具体案例的动态效果为主，进一步通过加入思政元素的网页案例培养学生的爱国主义思想和民族自豪感。同时，编写JavaScript脚本代码能在培养学生解决实际问题的能力的同时培养学生的刻苦钻研精神、创新开拓精神、以及严谨的工作态度。第七章JavaScript对象(4学时)【教学目标与要求】1、教学目标：知识目标：通过教学，使学生掌握DOM和BOM文档对象模型以及在网页中的应用。能力目标：通过JavaScript实现抽奖程序，培养学生将实际应用问题抽象成计算机能够解决的问题的能力。素养目标：通过DOM树引入家谱以及中国优良传统和优良家风，培养学生爱国爱家的精神
素养目标：培养学生的刻苦钻研精神、创新开拓精神以及严谨的工作态度。 2、教学要求： 理解 JavaScript 程序的概念和作用，掌握页面中使用 JavaScript 的方法，理 解 JavaScript 数据类型，掌握 JavaScript 标识符和变量的概念及使用方法、 JavaScript 常用运算符和表达式概念，掌握 JavaScript 中顺序、分支、循环 3 种程 序控结构语法、JavaScript 函数的分类、定义和使用。 【教学重点与难点】 1、教学重点：JavaScript 程序控制结构。 2、教学难点：JavaScript 中数据类型的理解。 【学习内容】 1、JavaScript 概述 2、JavaScript 基本语法 3、JavaScript 流程控制 4、JavaScript 函数 5、数组 【思政元素融入点】 本章主要讲解 JavaScript 的基础知识，讲解案例多以 CSS 专题应用中具体案 例的动态效果为主，进一步通过加入思政元素的网页案例培养学生的爱国主义思 想和民族自豪感。同时，编写 JavaScript 脚本代码能在培养学生解决实际问题的 能力的同时培养学生的刻苦钻研精神、创新开拓精神、以及严谨的工作态度。 第七章 JavaScript 对象(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过教学，使学生掌握 DOM 和 BOM 文档对象模型以及在网页 中的应用。 能力目标：通过 JavaScript 实现抽奖程序，培养学生将实际应用问题抽象成 计算机能够解决的问题的能力。 素养目标：通过 DOM 树引入家谱以及中国优良传统和优良家风，培养学生 爱国爱家的精神
2、教学要求：掌握JavaScript语言中内置对象的常用属性及方法，理解文档对象模型（DOM）及浏览器对象模型（BOM）的概念。掌握用document对象来访问、创建及修改节点；掌握window对象的常用属性及方法，了解navigator、screen、history、location等对象。【教学重点与难点】1、教学重点：用document对象来访问、创建及修改节点。2、教学难点：window对象的常用属性及方法。【学习内容】1、内置对象2、BOM3、自定义对象4、HTMLDOM【思政元素融入点】本章主要讲解JavaScript的对象，其中DOM以树结构表达HTML文档，树的每个分支的终点都是一个节点，每个节点都包含着对象，这种结构正像我们的家谱，由此可引出对家谱发展历程的讲解，进而讲解中国优良传统和优良家风，培养学生爱国爱家的精神。第八章Vue基础(4学时)【教学目标与要求】1、教学目标：知识目标：通过教学，使学生了解Web前端框架基本思想，以及目前主流的Web前端框架，介绍Vue.js前端框架基本思想、与传统开发模式的区别、Vue.js运行环境的搭建、常用的指令等。能力目标：通过Vue改写抽奖程序，培养学生使用新技术新方法解决问题的能力，培养学生的创新意识和创新精神。素养目标：引导学生关注数据安全、隐私保护、用户体验等方面的社会责任和职业道德。2、教学要求：
2、教学要求： 掌握 JavaScript 语言中内置对象的常用属性及方法，理解文档对象模型 （DOM）及浏览器对象模型（BOM）的概念。掌握用 document 对象来访问、创 建及修改节点；掌握 window 对象的常用属性及方法，了解 navigator、screen、 history、location 等对象。 【教学重点与难点】 1、教学重点：用 document 对象来访问、创建及修改节点。 2、教学难点：window 对象的常用属性及方法。 【学习内容】 1、内置对象 2、BOM 3、自定义对象 4、HTML DOM 【思政元素融入点】 本章主要讲解 JavaScript 的对象，其中 DOM 以树结构表达 HTML 文档，树 的每个分支的终点都是一个节点，每个节点都包含着对象，这种结构正像我们的 家谱，由此可引出对家谱发展历程的讲解，进而讲解中国优良传统和优良家风， 培养学生爱国爱家的精神。 第八章 Vue 基础(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过教学，使学生了解 Web 前端框架基本思想，以及目前主流 的Web前端框架，介绍Vue.js前端框架基本思想、与传统开发模式的区别、Vue.js 运行环境的搭建、常用的指令等。 能力目标：通过 Vue 改写抽奖程序，培养学生使用新技术新方法解决问题 的能力，培养学生的创新意识和创新精神。 素养目标：引导学生关注数据安全、隐私保护、用户体验等方面的社会责任 和职业道德。 2、教学要求：