《网页设计与 Web 前端开发》教案 莫小梅 第10-16周  使用JavaScript脚本（6.1-6.3节）- Vue框架（8.3、8.4节8.5节的后半部分）_第1页
《网页设计与 Web 前端开发》教案 莫小梅 第10-16周  使用JavaScript脚本（6.1-6.3节）- Vue框架（8.3、8.4节8.5节的后半部分）_第2页
《网页设计与 Web 前端开发》教案 莫小梅 第10-16周  使用JavaScript脚本（6.1-6.3节）- Vue框架（8.3、8.4节8.5节的后半部分）_第3页
《网页设计与 Web 前端开发》教案 莫小梅 第10-16周  使用JavaScript脚本（6.1-6.3节）- Vue框架（8.3、8.4节8.5节的后半部分）_第4页
《网页设计与 Web 前端开发》教案 莫小梅 第10-16周  使用JavaScript脚本（6.1-6.3节）- Vue框架（8.3、8.4节8.5节的后半部分）_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与Web前端开发》电子教案（第10周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第6章使用JavaScript脚本（6.1-6.3节）二、教学目标（一）知识目标了解JavaScript的起源、特点及核心功能（页面交互、数据验证、动态效果等）。掌握在网页中引入JavaScript的三种方式（内嵌脚本、外部脚本文件、事件属性/href值）及代码规范。熟悉JavaScript基本元素：变量（var/let）、常量（const）、数据类型（number、string、boolean、null、undefined、object）、运算符（算术、赋值、比较、逻辑等）及数据类型转换方法。理解DOM0级事件的概念，掌握常见事件（onclick、onmouseenter等）的绑定与解绑方法。掌握操作HTML元素属性（常规属性、自定义属性）及CSS样式（内联样式、类名操作）的常用方法。（二）思政目标通过规范编写JavaScript代码（如变量命名、注释规范），培养严谨、细致的编码习惯。结合事件交互案例，理解“用户为中心”的开发理念，培养关注细节的工匠精神。在属性与样式操作实践中，体会“结构-样式-行为”分离的模块化思维，提升代码可维护性意识。三、教学重难点（一）教学重点JavaScript的三种引入方式及适用场景（内嵌脚本用于局部功能、外部脚本用于多页面复用）。变量和常量声明（var/let/const的区别）及数据类型的判断与转换。DOM0级事件的绑定（如element.onclick=function()）及事件触发逻辑。元素属性操作（getAttribute/setAttribute）与CSS样式控制（style属性、className）。（二）教学难点var/let/const的作用域差异（函数作用域与块级作用域）。事件冒泡现象（如子元素事件触发父元素事件）及处理思路。内联样式操作中CSS属性的驼峰命名法（如backgroundColor对应background-color）。自定义属性与JS对象属性的区别（是否显式存在于HTML标签中）。四、教学方法讲授法：系统讲解JavaScript基础概念、语法规则及操作方法。案例演示法：结合教材示例（如例6-1至例6-20），实时演示代码效果，对比不同写法的差异。对比分析法：对比var/let/const的作用域、不同事件绑定方式的优劣，加深理解。任务驱动法：实践课通过“互动按钮面板”制作任务，综合应用属性操作、事件绑定和样式控制。五、教学过程（一）第一学时：JavaScript基础与事件（40分钟）导入（5分钟）展示静态网页与动态网页的对比（如按钮点击无反应vs弹出提示），提问：“如何让网页‘动起来’？”引出JavaScript的作用。简要介绍本节课内容：JavaScript的引入方式、代码规范及事件处理。初识JavaScript（15分钟）核心概念：解释JavaScript的跨平台特性、与Java的区别，及ECMAScript、DOM、BOM的组成关系。引入方式：内嵌脚本：在<script>标签中直接编写代码（例6-1），说明可放置在<head>或<body>的注意事项。外部脚本：创建.js文件，通过<scriptsrc="路径">引入（例6-2），强调src属性与标签内代码不可共存。事件属性/href值：如<buttononclick="alert('hi')">或<ahref="javascript:alert('hi')">（例6-3）。代码规范：强调大小写敏感、分号使用、注释（//单行、/**/多行）的重要性。弹窗调试与DOM0级事件（15分钟）弹窗工具：演示alert()（警告框）、confirm()（确认框，返回布尔值）、prompt()（提示框，接收输入）的用法，及console.log()在开发者工具中的调试应用（例6-5）。DOM0级事件：事件绑定：通过element.事件名=函数绑定（如btn.onclick=function(){}），演示单击、鼠标移入/移出事件（例6-10）。事件解绑：赋值null（如btn.onclick=null）。小结（5分钟）回顾引入方式的适用场景及事件绑定的基本语法。布置思考题：“外部脚本文件与内嵌脚本相比，优势是什么？”（二）第二学时：基本元素与样式操作（40分钟）复习导入（5分钟）抽查学生对事件绑定的掌握：“如何实现按钮点击后隐藏自身？”引出本节课内容：变量、数据类型及元素属性与样式操作。JavaScript基本元素（15分钟）变量与常量：var（函数作用域、变量提升）、let（块级作用域、不可重复声明）、const（常量，不可修改）的对比。变量命名规则：字母/下划线/$开头，区分大小写，避免关键字。数据类型：基本类型：number（数值）、string（字符串）、boolean（布尔）、null（空对象）、undefined（未定义）。引用类型：object（对象，含数组、自定义对象）。类型判断：typeof操作符（注意typeofnull返回object的特殊性）。运算符与类型转换：算术、赋值、比较（==

vs

===）、逻辑运算符的用法。显式转换：Number()、parseInt()、String()（例6-14）；隐式转换：如"5"-2结果为3。操作元素属性与CSS样式（15分钟）属性操作：常规属性：element.id、element.className（注意class属性用className访问）。自定义属性：setAttribute("属性名","值")与getAttribute("属性名")（例6-16）。样式操作：内联样式：element.style.属性名（如div.style.color="red"），强调驼峰命名（例6-20）。类名操作：element.className="类名"（添加预定义样式，如6.3.4节的案例实践）。案例：实现鼠标移入元素时改变背景色，移出时恢复（结合onmouseenter/onmouseleave事件）。小结（5分钟）梳理变量声明、类型转换、属性与样式操作的核心要点。预告实践课任务：制作包含动态样式和事件响应的交互面板。（三）实践学时：互动按钮面板制作（40分钟）任务布置（5分钟）目标：制作一个包含3个按钮的互动面板，功能如下：按钮1：点击后弹出输入框，将输入内容显示在面板的文本区域（用prompt()和innerHTML）。按钮2：鼠标移入时背景色变为蓝色，移出时恢复（用onmouseenter/onmouseleave和style属性）。按钮3：点击后切换面板的自定义属性data-status值（用setAttribute），并根据值切换面板边框样式（用className）。学生实践（30分钟）教师巡回指导，重点解决：let声明变量时的块级作用域问题（如循环中绑定事件的变量引用）。样式属性的驼峰命名错误（如background-color写成backgroundColor）。事件冒泡导致的意外触发（如面板点击事件影响按钮）。成果点评（5分钟）选取2份作品，点评事件绑定的合理性、样式控制的规范性及代码可读性。强调：合理使用变量作用域和事件绑定方式，可减少代码冲突与冗余。六、教学反思（空）《网页设计与Web前端开发》电子教案（第11周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第6章使用JavaScript脚本（6.4-6.6节）二、教学目标（一）知识目标掌握JavaScript条件语句（if单/双/多分支、switch）的语法及应用场景。掌握循环语句（for、while、do-while）的使用，理解break与continue的区别。掌握函数的定义（声明式、表达式）、调用方式、参数传递（形参、实参、不定参arguments）及返回值用法。理解变量作用域（全局作用域、局部作用域、块级作用域）及var/let/const的差异。掌握函数与条件、循环的结合使用，能通过函数封装重复逻辑。（二）思政目标通过规范函数命名、注释及代码结构，培养严谨细致的编程习惯。在循环与条件的嵌套逻辑中，锻炼逻辑思维的条理性，提升问题拆解能力。结合函数封装案例，体会模块化编程的优势，树立代码复用与可维护性意识。三、教学重难点（一）教学重点条件语句的嵌套使用（如if-elseif多场景判断）及switch的break穿透问题。循环语句的执行流程（初始化、条件判断、迭代）及循环嵌套（如二维数组遍历）。函数的参数传递机制（值传递）、返回值作用及不定参arguments的使用。变量作用域的边界（函数内外、代码块内外）及var的变量提升现象。（二）教学难点switch语句中省略break导致的逻辑错误及规避方法。循环语句中的break（终止循环）与continue（跳过本次循环）的区别应用。块级作用域与函数作用域的差异（let与var的作用域边界）。函数嵌套中变量的作用域链查找规则。四、教学方法讲授法：系统讲解条件语句、循环语句及函数的语法规则与核心概念。案例演示法：结合教材示例（例6-21至例6-36），实时运行代码，对比不同写法的执行效果。对比分析法：对比if与switch的适用场景、for与while的使用时机，加深理解。任务驱动法：实践课通过“星级评分系统”制作任务，综合应用函数、条件与循环。五、教学过程（一）第一学时：条件语句与循环语句（40分钟）导入（5分钟）展示场景：“根据学生成绩（0-100分）判断等级（A/B/C/D）”，提问：“如何用代码实现多档判断？”引出主题：条件语句用于分支逻辑，循环语句用于重复操作，二者是编程的基础控制结构。条件语句讲解（15分钟）if语句：单分支：if(条件){语句}（适用于单一判断）。双分支：if(条件){语句1}else{语句2}（适用于二选一场景）。多分支：if(条件1){语句1}elseif(条件2){语句2}else{语句3}（如结合时间的问候语输出，例6-23）。案例演示：根据当前小时数显示“早上/中午/下午/晚上好”（结合Date().getHours()）。switch语句：语法：switch(表达式){case值1:语句1;break;...default:语句n}。关键点：break的作用（防止穿透），default的默认执行逻辑。案例对比：用switch实现星期几判断（例6-24），对比if与switch的效率差异（固定值匹配用switch更优）。循环语句讲解（15分钟）for循环：语法：for(初始化;条件;迭代){循环体}，适用于已知循环次数的场景。案例：生成1-6级标题（例6-25），演示循环变量的递增/递减逻辑。while与do-while：区别：do-while先执行后判断（至少执行1次），while先判断后执行。案例：计算1-100的累加和（分别用两种循环实现，对比执行流程）。break与continue：演示：循环输出1-10，遇到3跳过（continue），遇到7终止（break），对比执行结果。小结（5分钟）回顾条件语句的嵌套规则与循环语句的核心要素。布置思考题：“如何用for循环遍历数组，并通过if判断筛选出偶数？”（二）第二学时：函数与作用域（40分钟）复习导入（5分钟）抽查练习：“用for循环和if语句，找出数组[2,5,9,12,15]中的奇数并求和”。引出主题：重复逻辑可通过函数封装，提升代码复用性——本节课聚焦函数与作用域。函数基础讲解（15分钟）函数定义：声明式：function函数名(参数){函数体}（如functionadd(x,y){returnx+y}）。表达式：let变量名=function(参数){函数体}（匿名函数赋值）。参数与返回值：形参：函数定义时的参数（如x,y）；实参：调用时传递的值（如add(3,5)中的3,5）。不定参：arguments对象（函数内自动生成，存储所有实参，例6-31）。return语句：终止函数并返回结果（无return时默认返回undefined）。案例演示：封装计算任意个数之和的函数（用arguments实现，例6-32）。变量作用域讲解（15分钟）作用域类型：全局作用域：函数外声明的变量（如vara=10），全页面可访问。局部作用域：函数内用var声明的变量（仅函数内可访问）。块级作用域：{}内用let/const声明的变量（仅块内可访问，例6-36）。var/let/const对比：作用域：var（函数）、let/const（块级）。变量提升：var存在（声明提前），let/const不存在（暂时性死区）。重复声明：var允许，let/const禁止。案例：演示不同声明方式在循环、条件块中的作用域边界。小结（5分钟）梳理函数封装的优势与作用域的核心规则。预告实践课任务：制作“星级评分系统”，综合应用函数、循环与条件判断。（三）实践学时：星级评分系统制作（40分钟）任务布置（5分钟）目标：制作一个5星评分组件，功能如下：鼠标移入星星时，当前及左侧星星变亮（用循环遍历星星数组，结合if判断索引）。点击星星时，记录评分（用函数封装评分逻辑，返回选中的星级）。鼠标移出时，保持已选中的星级状态（用条件语句判断是否有选中记录）。提示：用ul布局星星列表，通过className切换亮/暗样式。学生实践（30分钟）教师巡回指导，重点解决：循环中绑定事件时的变量作用域问题（用let避免var的共享变量问题）。函数参数传递与返回值的正确使用（如获取当前星星的索引并返回）。条件语句与循环的嵌套逻辑（如遍历星星时判断是否小于当前索引）。成果点评（5分钟）选取2份作品，点评函数封装的合理性、循环效率及代码规范性。强调：合理划分函数职责（如单独封装“高亮星星”“记录评分”函数）可提升代码可读性。六、教学反思（空）《网页设计与Web前端开发》电子教案（第12周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第6章使用JavaScript脚本（6.7-6.9节）二、教学目标（一）知识目标掌握JavaScript对象操作语句（with、for...in）的用法，理解this、new、in、delete等关键字及操作符的作用。掌握常用内置对象（数组、字符串、数学、日期）的核心属性与方法，能灵活运用其解决实际问题。理解DOM（文档对象模型）的概念及树状结构，掌握DOM节点的类型、访问方式及增删改查操作。能综合运用对象操作、内置对象及DOM操作实现简单的网页交互功能。（二）思政目标通过for...in遍历对象属性等案例，培养逻辑清晰的编程思维和严谨的代码调试习惯。在DOM节点操作实践中，体会“结构-行为”分离的模块化思想，提升代码可维护性意识。结合案例开发，培养发现问题、分析问题并利用内置API解决问题的能力，激发创新思维。三、教学重难点（一）教学重点for...in语句遍历对象属性的用法及this关键字在不同场景下的指向。内置对象的核心方法：数组：push()、pop()、splice()、join()字符串：indexOf()、slice()、split()日期：getFullYear()、getHours()等获取时间的方法数学：Math.random()、Math.floor()DOM节点的访问（父子节点、兄弟节点）与操作（创建、插入、删除、替换）。（二）教学难点this关键字在全局、对象方法、事件处理中的指向差异。DOM节点操作中childNodes与children的区别（包含文本节点vs仅元素节点）。动态创建DOM节点并添加到文档流的完整流程（创建元素→设置属性→添加到父节点）。内置对象方法的参数细节（如splice()的删除与插入功能）。四、教学方法讲授法：系统讲解对象操作语句、内置对象及DOM的核心概念与语法。案例演示法：结合教材示例（例6-37至例6-60），实时运行代码，直观展示内置对象方法及DOM操作效果。对比分析法：对比for...in与普通for循环的适用场景、this在不同场景下的指向差异。任务驱动法：实践课通过“动态待办事项列表”制作任务，综合应用对象遍历、数组操作及DOM节点增删。五、教学过程（一）第一学时：对象操作语句与内置对象（40分钟）导入（5分钟）提问：“如何遍历一个用户对象的所有属性（如姓名、年龄）？如何快速获取当前日期并格式化？”引出主题：对象操作语句用于便捷处理对象属性，内置对象封装了常用功能，是高效开发的基础。JavaScript对象的操作语句（15分钟）with语句：语法：with(对象){直接访问属性/方法}，简化对象属性的连续访问（例：with(Math){x=cos(PI)}）。说明：不推荐过度使用，可能降低代码可读性。for...in语句：语法：for(变量in对象){遍历对象属性}，用于枚举对象的可枚举属性（例6-37）。案例：遍历student对象的name、age属性并输出。对象关键字与操作符：this：指向当前对象（全局环境指向window，对象方法中指向对象本身，事件中指向触发元素）。new：创建对象实例（如newDate()）。in：判断对象是否包含某属性（如"age"instudent）。delete：删除对象属性（如deletestudent.age）。常用内置对象（20分钟）数组对象（Array）：核心方法：push()（添加元素）、pop()（删除最后一个元素）、splice(index,howmany,items)（删除/插入元素）、join(separator)（拼接为字符串）。案例：用splice()实现数组元素的排序（例6-42）。字符串对象（String）：核心方法：indexOf(substr)（查找子串位置）、slice(start,end)（截取子串）、split(separator)（分割为数组）。案例：用split()将日期字符串“2024-10-01”分割为年、月、日数组。数学对象（Math）：常用方法：Math.random()（生成0-1随机数）、Math.floor(x)（向下取整）、Math.PI（圆周率常量）。案例：生成1-100的随机整数（Math.floor(Math.random()*100)+1）。日期对象（Date）：常用方法：getFullYear()（年）、getMonth()（月，0-11）、getDate()（日）、getHours()（时）。案例：获取当前日期并格式化为“2024年9月3日”（例6-45）。（二）第二学时：DOM对象及操作（40分钟）复习导入（5分钟）回顾：数组slice()与字符串slice()的异同，for...in遍历数组下标。提问：“如何用JavaScript动态在网页中添加一个列表项？”引出DOM操作。DOM对象及操作（30分钟）HTMLDOM简介：概念：DOM将HTML文档视为树状结构，每个节点（元素、文本、属性）都是对象。节点类型：元素节点（nodeType=1）、文本节点（nodeType=3）、属性节点（nodeType=2）（表6-25）。DOM节点的访问：子节点：childNodes（含文本节点）、children（仅元素节点）、firstElementChild、lastElementChild。父节点：parentNode、offsetParent（最近定位父节点）。兄弟节点：nextElementSibling、previousElementSibling。案例：访问元素子节点（例6-48）。DOM节点的操作：创建节点：document.createElement(tagName)（元素）、document.createTextNode(text)（文本）。插入节点：parent.appendChild(child)（末尾插入）、parent.insertBefore(newNode,refNode)（指定位置插入）。删除节点：parent.removeChild(child)。替换节点：parent.replaceChild(newNode,oldNode)。案例：动态创建并添加一个带文本的li到ul中（例6-54）。案例解析（5分钟）分析“节点的添加和删除”案例（6.9.5节）：如何通过点击链接创建节点，点击“X”删除节点，理解事件冒泡与节点关系的应用。（三）实践学时：动态待办事项列表（40分钟）任务布置（5分钟）目标：制作一个待办事项列表，功能如下：输入框中输入内容，点击“添加”按钮，动态创建一个待办项（li），包含内容和“删除”按钮。点击“删除”按钮，移除对应的待办项。用数组存储所有待办事项，添加/删除时同步更新数组。提示：使用createElement创建节点，appendChild添加节点，removeChild删除节点，addEventListener绑定事件。学生实践（30分钟）教师指导重点：动态节点的事件绑定（删除按钮点击事件）。数组与DOM节点的同步更新。避免childNodes包含空白文本节点的坑（推荐用children）。成果点评（5分钟）选取2份作品，点评节点操作的规范性、数组与DOM同步的逻辑性。强调：DOM操作需注意性能（批量操作时先脱离文档流），培养优化意识。六、教学反思（空）《网页设计与Web前端开发》电子教案（第13周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第6章使用JavaScript脚本（6.10-6.12节）二、教学目标（一）知识目标掌握BOM（浏览器对象模型）的核心对象（window、location、history、navigator）的属性与方法，能实现浏览器窗口控制、页面跳转、历史记录操作等功能。理解HTML5Web存储的优势，掌握localStorage的基本用法（保存、获取、删除数据）及复杂数据（数组、对象）的存取方式。能综合运用BOM、localStorage及DOM操作，完成“防范电信诈骗”“宋韵卿裳”等案例中的交互功能开发。（二）思政目标通过localStorage本地存储案例，培养数据安全意识，理解用户隐私保护的重要性。在“防范电信诈骗”案例开发中，强化社会责任感，体会技术服务社会的价值。从“宋韵卿裳”案例的传统文化传承中，激发文化自信，培养“技术+文化”的融合创新思维。三、教学重难点（一）教学重点BOM核心对象的应用：window：open()、close()、setTimeout()location：href、reload()、replace()history：back()、forward()、go()localStorage的操作：setItem()、getItem()、removeItem()、clear()，及JSON格式转换（JSON.stringify()、JSON.parse()）。综合案例中的交互逻辑：轮播切换、本地存储留言、动态DOM操作。（二）教学难点window.open()的参数配置及浏览器弹窗限制的处理。localStorage与sessionStorage的区别及应用场景选择。案例中多技术点的整合（如BOM控制+DOM操作+本地存储）。四、教学方法讲授法：系统讲解BOM对象、Web存储的概念及语法。案例演示法：结合教材示例（例6-61至例6-67），实时演示窗口控制、本地存储数据的效果。情境教学法：在“防范电信诈骗”案例中融入反诈知识，结合技术实现讲解社会意义。项目驱动法：实践课以“本地存储式留言板”为任务，综合应用所学知识。五、教学过程（一）第一学时：BOM对象及操作（40分钟）导入（5分钟）情境提问：“如何实现网页自动跳转？如何控制浏览器前进/后退？”引出主题：BOM提供了与浏览器交互的接口，是实现页面控制的核心。BOM核心对象讲解（30分钟）window对象：方法：open(URL,name,features)（打开新窗口）、close()（关闭窗口）、setTimeout(code,ms)（延迟执行）。案例：点击按钮打开新窗口（例6-61），5秒后自动返回。location对象：属性：href（完整URL）、pathname（路径）。方法：reload()（刷新页面）、replace(URL)（替换当前页面，不保留历史）。案例：点击按钮跳转到首页（location.href="index.html"）。history对象：方法：back()（后退）、forward()（前进）、go(n)（跳转n步，n为负数后退）。案例：模拟浏览器前进/后退按钮功能（例6-65）。navigator对象：属性：userAgent（浏览器信息）、platform（操作系统）。应用：判断浏览器类型（如是否为Chrome）。课堂练习（5分钟）任务：编写代码实现“3秒后自动跳转到百度首页”，使用setTimeout()和location.href。（二）第二学时：localStorage及综合案例（40分钟）复习导入（5分钟）回顾：BOM对象的层级关系（window包含location、history等）。提问：“如何在关闭浏览器后仍保留用户输入的信息？”引出Web存储。localStorage讲解（15分钟）基本用法：保存：localStorage.setItem("name","Tom")获取：localStorage.getItem("name")删除：localStorage.removeItem("name")清空：localStorage.clear()复杂数据存储：数组/对象需先用JSON.stringify()转换为字符串，读取时用JSON.parse()还原。案例：存储用户信息对象{name:"Tom",age:20}并读取。综合案例解析（20分钟）“防范电信诈骗”案例：轮播切换：用setInterval()实现自动轮播，结合location控制页面跳转。交互逻辑：导航栏悬停切换对应内容，停止自动轮播（6.12.1节）。“宋韵卿裳”案例：本地存储：保存用户选择的发型，刷新后仍显示选中状态。动态DOM：可尝试用createElement()创建发型选项，点击后更新头像。（三）实践学时：本地存储式留言板（40分钟）任务布置（5分钟）需求：页面包含输入框、“发表”按钮、留言列表。输入内容后点击发表，留言实时显示在列表中，并通过localStorage保存。刷新页面后，留言列表从localStorage中读取并显示。每条留言后有“删除”按钮，点击可删除对应留言及本地存储数据。开发指导（25分钟）步骤1：搭建HTML结构（输入框、按钮、ul列表）。步骤2：编写发表功能：获取输入值→创建li节点→添加到ul→用localStorage.setItem()保存（数组形式）。步骤3：编写删除功能：点击按钮→获取留言索引→从DOM和数组中删除→更新localStorage。步骤4：页面加载时，用localStorage.getItem()读取数据并渲染列表。成果展示与点评（10分钟）选取2份作品，点评数据同步逻辑及代码规范性。强调：本地存储数据需注意容量限制（通常5MB），敏感数据不应存储在客户端。六、教学反思（空）《网页设计与Web前端开发》电子教案（第14周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第7章jQuery基础知识二、教学目标（一）知识目标了解jQuery的概念、优势及下载安装方法，掌握jQuery的基本使用（引入方式、$(document).ready()的作用）。掌握jQuery选择器：基本选择器（标签、id、类）、高级选择器（过滤器、属性、伪类）的语法及应用。掌握jQuery事件处理（绑定、解绑、触发、事件委托）及内容/样式处理（属性、类、文本、CSS样式操作）。能运用jQuery实现表单验证、动画效果等进阶应用，理解jQuery与原生JavaScript的区别与联系。（二）思政目标通过jQuery简化开发的案例，培养高效编程思维和灵活解决问题的能力。在选择器与事件处理的实践中，强化需求分析能力，学会根据场景选择合适的技术方案。结合表单验证等案例，培养严谨的开发态度，理解软件质量（如易用性、安全性）的重要性。三、教学重难点（一）教学重点jQuery的基本使用：引入方式、$符号的含义、$(document).ready()的作用。选择器：基本选择器：$("#id")、$(".class")、$("tag")高级选择器：:eq(index)、[attribute=value]、:checked事件处理：click()、on()、off()、trigger()的用法。内容与样式处理：attr()、addClass()、text()、html()、css()。（二）教学难点jQuery对象与DOM对象的区别及转换（[0]或get(0)）。高级选择器的组合使用（如$("div:eq(2).active")）。事件委托的原理及应用场景（.delegate()或.on()委托事件）。链式调用的理解（如$("#box").css().text().click()）。四、教学方法讲授法：系统讲解jQuery的核心概念、选择器、事件处理及样式操作。案例演示法：结合教材示例（例7-1至例7-4），实时运行代码，对比原生JavaScript与jQuery的实现差异。对比分析法：对比jQuery选择器与CSS选择器的异同、jQuery事件处理与原生事件绑定的优劣。任务驱动法：实践课通过“jQuery表单验证与动态效果”任务，综合应用选择器、事件及样式处理。五、教学过程（一）第一学时：jQuery基础与选择器（40分钟）导入（5分钟）回顾：原生JavaScript操作DOM的繁琐（如getElementById、addEventListener）。提问：“如何用更简洁的代码实现元素选择和事件绑定？”引出jQuery的优势。jQuery简介与基本使用（15分钟）概念：jQuery是封装了原生JavaScript的库，简化DOM操作、事件处理等。下载与引入：从官网下载或使用CDN，通过<scriptsrc="jquery.min.js"></script>引入。核心语法：$符号：jQuery的简写，$(selector)用于选择元素。$(document).ready(function(){...})：DOM加载完成后执行代码，避免元素未加载导致的错误（例7-1）。案例：用jQuery修改元素文本（对比原生JavaScript，突出简洁性）。选择器（20分钟）基本选择器（表7-1）：id选择器：$("#block")选择id为block的元素。类选择器：$(".block")选择类为block的所有元素。标签选择器：$("div")选择所有div元素。组合选择器：$("span,#block")选择span标签和id为block的元素。高级选择器：过滤器：$("li:first")（第一个li）、$("li:eq(2)")（索引为2的li）。属性选择器：$("input[type='text']")选择文本输入框。演示：用不同选择器选中页面元素并修改样式（如$("p:even").css("color","red")）。（二）第二学时：事件处理与内容/样式操作（40分钟）复习导入（5分钟）回顾：jQuery选择器的用法，提问：“选中元素后如何响应用户操作？”引出事件处理。事件处理（15分钟）绑定事件：click()、mouseenter()等（例7-2）。通用绑定与解绑：on("event",function())和off("event")。事件委托：$("#container").delegate("button","click",function(){...})，适用于动态生成的元素。事件对象：event.target获取触发事件的元素。内容与样式处理（15分钟）属性操作：attr("src","img.jpg")（设置属性）、attr("title")（获取属性）。类操作：addClass("active")、removeClass("active")、toggleClass("active")。内容操作：text("文本")（设置文本）、html("<b>HTML</b>")（设置HTML）、val()（表单值）。样式操作：css("color","red")（设置样式）、width(200)（设置宽度）。案例：点击按钮切换元素类名，实现样式变化。进阶应用简介（5分钟）预览：表单验证（例7-3）、动画效果（slideDown()、fadeIn()），为实践课铺垫。（三）实践学时：jQuery表单验证与动态效果（40分钟）任务布置（5分钟）目标：制作一个带验证的注册表单，功能如下：输入框为空时，添加红色边框提示（addClass("error")）。密码与确认密码不一致时，提示错误。点击“提交”按钮，验证通过后显示成功动画（fadeIn()）。提示：使用$("#form").submit()绑定提交事件，event.preventDefault()阻止默认提交。学生实践（30分钟）教师指导重点：选择器的精准使用（如$("input[type='text']")选中所有文本框）。事件委托处理动态生成的错误提示信息。链式调用简化代码（如$(this).removeClass().addClass("error")）。成果点评（5分钟）选取2份作品，点评选择器的合理性、事件处理的完整性及代码简洁性。强调：jQuery虽简化操作，但需理解其底层原理（原生JavaScript），避免过度依赖。六、教学反思（空）《网页设计与Web前端开发》电子教案（第15周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第8章Vue框架（8.1、8.2节，8.5节的前半部分）二、教学目标（一）知识目标了解Vue框架的起源（EvanYou创建）、发展历程（1.x→2.x→3.x）及核心功能（响应式数据绑定、组件化开发等）。掌握Vue开发环境的两种搭建方式（独立脚本引入用于简单场景、构建工具用于复杂应用）及适用场景。熟悉Vue3基础语法：实例创建（createApp）、模板语法（{{}}插值、v-指令）、常用指令（v-bind、v-if、v-for等）。理解数据驱动视图的核心思想，掌握响应式数据与DOM的同步机制。能运用Vue对现有静态页面进行改造，实现动态渲染与交互。（二）思政目标通过规范编写Vue代码（如指令语法、组件结构），培养严谨的编程习惯和模块化思维。结合Vue的“渐进式”特点，理解“按需集成”的工程思想，提升资源优化意识。在项目改造实践中，体会“数据驱动”与“DOM操作”的效率差异，树立高性能开发理念。通过组件化开发案例，强化代码复用与团队协作意识，理解模块化对大型项目的重要性。三、教学重难点（一）教学重点Vue的两种环境搭建方式及适用场景（独立脚本用于简单功能/项目增强、构建工具用于大型应用）。Vue实例创建（createApp）与挂载（mount）的流程，及响应式数据（data函数）的定义方式。模板语法：{{}}插值表达式的用法，v-bind（属性绑定）、v-if（条件渲染）、v-for（列表渲染）的基本语法。现有项目的Vue改造思路（数据提取→实例创建→模板绑定）。（二）教学难点响应式数据绑定的原理（数据变化自动同步视图的机制）。v-for与v-if在同一元素上的优先级及使用注意事项（避免同时使用）。模板语法中JavaScript表达式的作用域限制（仅能使用当前组件实例的数据）。项目改造中数据结构设计与DOM结构的匹配（如何将HTML元素属性映射为JS对象属性）。四、教学方法讲授法：系统讲解Vue的概念、语法规则及环境搭建步骤。案例演示法：结合教材示例（例8-1至例8-10），实时演示代码效果，对比静态HTML与Vue动态渲染的差异。对比分析法：对比独立脚本与构建工具的优缺点、v-if与v-show的实现原理，加深理解。任务驱动法：实践课通过“商品列表Vue改造”任务，综合应用列表渲染、属性绑定和数据驱动思想。五、教学过程（一）第一学时：Vue框架概述与环境搭建（40分钟）导入（5分钟）展示静态商品列表与Vue动态渲染列表的对比（如点击按钮切换商品显示状态），提问：“如何用更少的代码实现动态交互？”引出Vue的优势。简要介绍本节课内容：Vue的特点、环境搭建及基础实例创建。Vue框架基础（15分钟）核心概念：讲解Vue的定义（渐进式JavaScript框架）、核心库定位（专注视图层），及与Angular、React的共性（组件化）与差异（轻量、易学）。发展历程：简述Vue1.x（初始版本）、2.x（主流里程碑）、3.x（当前默认版本，3.4.35为最新稳定版）的演进，强调3.x的性能提升。核心特点：结合8.1.1节，提炼6大特点：轻量级（运行时核心库仅10KB）；渐进式（可按需集成，不强制重构项目）；响应式数据绑定（数据与视图自动同步）；高性能（虚拟DOM与差异化算法）；组件化开发（代码复用与维护）；易于学习（基于HTML/JS基础）。Vue环境搭建（15分钟）独立脚本方式（重点）：演示通过CDN引入Vue（如Unpkg链接：/vue@3/dist/vue.global.js），说明开发版（含调试信息）与生产版（压缩优化）的区别。示例代码：用独立脚本创建第一个Vue实例（例8-1），讲解createApp、data、mount的作用。构建工具方式（简介）：提及Vite+Node.js的适用场景（大型应用），展示命令行创建项目流程（图8-1），不深入细节。小结（5分钟）回顾Vue的核心特点及独立脚本的引入步骤。布置思考题：“为什么生产环境需要替换为Vd.js？”（二）第二学时：Vue3基础语法与指令（40分钟）复习导入（5分钟）抽查学生对Vue实例的掌握：“如何将Vue实例绑定到id为app的div上？”引出本节课内容：模板语法、常用指令及数据绑定逻辑。Vue模板语法与指令（30分钟）模板语法基础：文本插值：{{}}的用法及JavaScript表达式支持（如{{score*0.5}}，例8-5）。指令概念：以v-为前缀的特殊属性，讲解v-bind（属性绑定，简写:）的用法（例8-5中v-bind:id）。常用指令：v-if/v-else：条件渲染（DOM元素的添加/删除，例8-6），对比v-show（CSSdisplay控制）的异同。v-for：列表渲染，演示数组遍历（例8-7）、对象遍历（例8-8）及嵌套循环（例8-10），强调key的作用（提升渲染效率）。样式绑定：class属性的对象语法（{active:isActive}）与数组语法（[activeClass,errorClass]，例8-11、8-12）。小结（5分钟）梳理模板语法与指令的核心逻辑：“数据驱动视图，指令简化DOM操作”。预告实践课任务：将静态商品列表改造为Vue动态渲染列表。（三）实践学时：商品列表Vue改造（40分钟）任务布置（5分钟）目标：将教材8.5节的华为商城手机商品列表（静态HTML）改造为Vue驱动的动态列表，功能包括：用v-for渲染商品列表（替换静态li标签）。用v-bind绑定商品图片src、链接href等属性。用v-if控制特殊商品的标签显示（如“新品”标签）。学生实践（30分钟）教师巡回指导，重点解决：数据结构设计问题（如何将商品图片、价格等属性封装为JS对象数组）。v-for遍历中索引值的正确使用（如(item,index)ingoodsList）。样式绑定中动态类名的逻辑（如根据商品类型添加不同class）。成果点评（5分钟）选取2份作品，点评数据结构的合理性、指令使用的规范性及代码简洁度。强调：Vue的核心是“数据驱动”，避免手动操作DOM，提升代码可维护性。六、教学反思（空）《网页设计与Web前端开发》电子教案（第16周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第8章Vue框架（8.3、

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论