HTML5网页制作与前端开发（AI协同）课件 模块6-9　JavaScript基础 构建无障碍博客页面-　图像处理与异步编程 实现视觉互动的魔法

零号任务JavaScript从零到一——构建基础的博客页面任务说明01在本任务中，你将跟随引导逐步构建基础的博客页面，掌握JavaScript的基础知识。具体要求如下。（1）利用AI助手，生成基础的HTML和CSS代码构建博客页面，并进行优化与润色，以确保页面结构清晰、代码简洁且易于阅读和维护。（2）实现单击“日常博客”和“学术博客”按钮时发生页面跳转，通过JavaScript来过滤和显示不同类别的博客内容。零号任务任务说明知识准备0201变量与数据类型02控制语句目录03函数1.

变量与数据类型知识准备（1）变量声明在JavaScript中，变量是存储数据的容器。我们可以通过不同的方式声明变量，常用的声明方式有var、let和const，如下表所示。在浏览器的开发者工具中，console（控制台）是一个功能强大的交互式环境，允许开发者直接输入并执行JavaScript代码，并实时查看输出结果。表中的“示例代码”列内容可在浏览器开发者工具的控制台中输入并执行，本模块中的其他示例代码基本都可以如此操作。常用的变量声明方式示例代码var：函数作用域，在函数内部声明的var变量可在整个函数范围内访问//使用var声明变量varmessage="JavaScript!";console.log(message);let：块作用域，这意味着let变量只在其声明的块（由“{}”括起来的代码块）内有效//使用let声明变量letcount=10;count=20;console.log(count);//输出:20const：块作用域，用于声明常量。const所声明变量的值在初始化后不能被重新赋值//使用const声明常量constPI=3.14159;//PI=3.14;//这行代码会报错，因const声明的变量不能重新赋值console.log(PI);//输出3.141591.

变量与数据类型知识准备（2）基本数据类型基本数据类型示例代码字符串（String）：表示一系列字符，可以使用单引号、双引号或反引号来声明letage=30;//Numberletname="Alice";//StringletisAdult=true;//Booleanletcar=null;//nullletcity;//undefined（city变量未被赋值）letuniqueID=Symbol('id');//Symbolconsole.log(typeofage);//输出：numberconsole.log(typeofname);//输出：stringconsole.log(typeofisAdult);//输出:booleanconsole.log(typeofcar);//输出：object（null的类型是object，这是一个特例）console.log(typeofcity);//输出：undefinedconsole.log(typeofuniqueID);//输出：symbol数字（Number）：表示整数或浮动小数布尔值（Boolean）：表示逻辑值，只有true和false两个值null：表示空值或无效对象undefined：表示未定义的变量或属性Symbol：ES6引入的新的原始数据类型，主要用于创建唯一的标识符1.

变量与数据类型知识准备（3）数据类型转换内置函数转换数据示例代码String()：转换为字符串letstr="123";//字符串letnum=Number(str);//显式转换为数字console.log(num);//输出：123，类型为NumberletbooleanValue=Boolean("");//显式转换为空字符串console.log(booleanValue);//输出：false。因为空字符串转换为falseletnum2=456;//数字letstr2=String(num2);//显式转换为字符串console.log(str2);//输出："456"。类型为StringNumber()：转换为数字Boolean()：转换为布尔值隐式转换是指JavaScript自动地将一个数据类型转换为另一个数据类型。这通常发生在运算符的操作过程中。例如，将一个数字与一个字符串进行拼接时，数字会自动转换为字符串：

letresult="Thenumberis"+10;//隐式转换，数字10会转换为字符串

console.log(result);//输出：Thenumberis10

显式转换是指手动将一种数据类型转换为另一种数据类型。可以使用如表6-0-3所示的内置函数进行显式转换。2.控制语句类型知识准备3.函数知识准备（1）函数的定义（2）函数的参数本示例中，greet()函数接收一个名为name的参数。通过传递不同的名字参数，函数会输出不同的问候语。从ES6开始，JavaScript允许为函数的参数设置默认值。如果调用函数时没有传入某个参数，则使用默认值。示例代码如下：在定义函数时，我们可以指定多个参数，等调用时再传入实际的值。示例代码如下：示例：3.函数知识准备（3）函数的返回值（4）函数的参数除传统的function语法之外，JavaScript还支持将函数定义为变量。这样的函数被称为函数表达式，它通常作为匿名函数使用。示例：

通过return关键字，允许函数将计算结果传递给调用者。返回值可以是任何数据类型，包括数字、字符串、对象、数组、布尔值等。调用函数时，返回值可以被赋给一个变量或直接使用。示例：3.函数知识准备（5）箭头函数（6）函数的作用域每个函数都有自己的作用域，这意味着函数内部的变量在函数外部无法访问，而外部的变量不能直接被函数内部访问，除非它们被传递给函数。示例：在ES6中，JavaScript引入箭头函数语法。箭头函数不需要使用function关键字声明，且参数和函数体的写法也有所简化。示例：任务实现03任务实现01借助AI助手创建两个按钮，并分别为它们绑定onclick事件（有关事件的详细操作将在一号任务中讲解）。当单击按钮时，将调用blogManager.showCategory()方法，并传入对应类别的参数（'daily'或'academic'）。02在BlogManager类中定义showCategory()方法，用于根据传入的类别参数过滤博客内容，并更新页面上的博客容器。谢谢大家汇报人：xxx时间：2026一号任务全员通行——让每个用户都能无障碍访问网页汇报人：xxx时间：2026任务说明01零号任务中已经确定初步的博客页面框架，并使用JavaScript来过滤和显示不同类别的博客内容；本任务通过应用函数与DOM操作等进一步完善博客页面，并遵循无障碍设计原则来添加无障碍访问功能，具体包括以下操作。（1）为页面添加字体一键放大或缩小的功能，用力单击该按钮时页面所有字体大小会随之改变。（2）为页面添加一键阅读功能，用力单击按钮后浏览器会朗读页面上的所有文本内容，包括图片的alt属性描述（即替代文本）。一号任务任务说明知识准备0201无障碍设计的基本概念03DOM操作与事件处理目录02对象与数组1.无障碍设计的基本概念知识准备无障碍设计（AccessibleDesign）指的是在设计网站和应用程序时，考虑到各种障碍类型（如视力、听力、行动、认知等）并采取措施，确保这些用户也能够轻松地访问和操作内容。无障碍设计的四大原则如表所示：原则内容可感知性（Perceivable）内容必须以用户能够感知的方式呈现给他们，无论其视觉、听觉或其他感知能力如何可操作性（Operable）用户应该能够通过多种方式操作页面，不仅限于鼠标操作。用户应能够使用键盘、触摸屏等设备进行交互可理解性（Understandable）网页内容应易于理解，并且用户能够理解如何与页面进行互动健壮性（Robust）网页应该能够在多种设备和浏览器上正常工作，且能够适应新的技术标准2.对象与数组知识准备对象是由一组键值对（Key-ValuePair）组成的数据结构。每个键（Key）是一个字符串或符号，而每个值（Value）可以是任意类型的数据，包括数字、字符串、布尔值，甚至是函数或其他对象。在JavaScript中，可以通过以下几种方式创建对象：1.使用Literalnotation对象字面量创建对象（最常用的方法）2.使用newObject()构造函数创建对象2.对象与数组知识准备对象是由一组键值对（Key-ValuePair）组成的数据结构。每个键（Key）是一个字符串或符号，而每个值（Value）可以是任意类型的数据，包括数字、字符串、布尔值，甚至是函数或其他对象。在JavaScript中，对象的操作与遍历是频繁的任务：2.对象与数组知识准备数组是一种用于存储多个值的数据结构。在JavaScript中，数组的元素是按顺序排列的，每个元素都有一个索引（Index），索引值从0开始。不同于其他编程语言，JavaScript数组中元素的数据类型不需要完全相同，可以包含任意类型的元素，如字符串、数字、布尔值，甚至是对象或另一个数组。也就是说，JavaScript数组中的元素数据类型可以是不一致的。在JavaScript中，可以通过以下几种方式创建数组：

为数组赋值（字面量）是最常用的创建数组方法：constfruits=["apple","banana","cherry"];使用newArray()构造函数创建数组：constfruits=newArray("apple","banana","cherry");在这个例子中，mixedArray包含了字符串、数字、布尔值、对象和另一个数组。这种灵活性为存储复杂数据结构提供了可能，使得JavaScript数组强大且通用。2.对象与数组知识准备数组是一种用于存储多个值的数据结构。在JavaScript中高效地访问、修改、添加、删除、遍历、查找数组等操作在日常开发中非常常用。3.DOM操作与事件处理知识准备DOM操作DOM是HTML和XML文档的编程接口。它将文档表示为一个由节点和对象组成的树形结构，DOM提供了丰富的API，用于创建、修改、删除和查询文档中的元素。开发者使用JavaScript通过DOMAPI来操作HTML和CSS代码，灵活地访问、修改和增强网页的内容与功能。3.DOM操作与事件处理知识准备事件处理是JavaScript与用户交互的核心机制。事件（Event）是指在文档或浏览器窗口中发生的一些特定的交互瞬间，例如单击按钮、鼠标指针悬停、键盘输入等。通过为元素绑定事件处理函数，可以实现对用户操作的响应。通过直接设置元素的事件属性来添加事件处理程序。这种方法简单且跨浏览器，但每个元素只能绑定一个事件处理程序。示例：常见的事件处理：任务实现03任务实现（1）获取当前字体值：使用getComputedStyle(root).fontSize获取。（2）通知屏幕阅读器：调用announceChange()函数通知屏幕阅读器字体大小的变化。（3）使用document.body.innerText获取页面中的所有文本内容。（4）使用document.querySelectorAll('img')选择所有图片元素。（5）创建一个SpeechSynthesisUtterance对象，并将textContent作为其内容。使用speechSynthesis.speak()方法朗读utterance对象中的文本。谢谢大家汇报人：xxx时间：2026二号任务设计与优化——掌握面向对象的力量与SOLID原则汇报人：xxx时间：2026任务说明01完成零号任务和一号任务后，得到了一个可以无障碍访问的博客页面。本任务将运用面向对象程序设计和SOLID设计原则，通过完成以下操作来进一步完善代码逻辑：针对一号任务中一键阅读功能的局限性——目前该功能仅支持从头到尾的完整阅读，本任务将通过SOLID原则优化代码，新增按钮功能，以实现对单篇博客文章的独立阅读。二号任务任务说明知识准备0201面向对象程序设计目录SOLID设计原则021.面向对象知识准备类是对象的模板，它定义了对象的结构和行为。在JavaScript中，类通过class关键字进行声明。类中可以包含属性（变量）和方法（函数）。创建一个类的示例代码如下：对象是类的实例，它是根据类的模板创建的具体实体。在JavaScript中，可以通过new关键字创建类的实例。创建对象的示例代码如下：1.面向对象知识准备继承是面向对象程序设计中的重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。在JavaScript中，继承可以通过extends关键字实现。示例代码如下：多态是指同一个方法在不同对象上调用时可以表现出不同的行为。在JavaScript中，多态主要通过方法重写（Override）实现。示例代码如下：1.面向对象知识准备继承是面向对象程序设计中的重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。在JavaScript中，继承可以通过extends关键字实现。示例代码如下：多态是指同一个方法在不同对象上调用时可以表现出不同的行为。在JavaScript中，多态主要通过方法重写（Override）实现。示例代码如下：1.面向对象知识准备封装是指将对象的属性和方法封装在一起，隐藏对象的内部实现细节，只暴露必要的接口供外部使用。在JavaScript中，可以通过使用#前缀定义私有属性和方法来实现封装。示例代码如下：抽象是指隐藏复杂的实现细节，只向用户提供简单的接口。在JavaScript中，抽象可通过定义抽象类和抽象方法来实现。虽然JavaScript本身不直接支持抽象类，但可以通过约定或抛出错误实现类似的效果。示例代码如下：1.面向对象知识准备封装是指将对象的属性和方法封装在一起，隐藏对象的内部实现细节，只暴露必要的接口供外部使用。在JavaScript中，可以通过使用#前缀定义私有属性和方法来实现封装。示例代码如下：抽象是指隐藏复杂的实现细节，只向用户提供简单的接口。在JavaScript中，抽象可通过定义抽象类和抽象方法来实现。虽然JavaScript本身不直接支持抽象类，但可以通过约定或抛出错误实现类似的效果。示例代码如下：2.SOLID原则知识准备在面向对象程序设计中，SOLID原则是我们应遵守的准则，其相互关系可以通过图来理解：单一职责原则是所有设计原则的基础，开放封闭原则是设计的终极目标。里氏替换原则强调的是子类替换父类后程序运行时的正确性，它用来帮助实现开闭原则，而接口隔离原则用来帮助实现里氏替换原则，同时它也体现了单一职责原则。依赖倒置原则是过程式编程与面向对象编程的分水岭，同时它也被用来指导接口隔离原则。这些原则相互支撑、环环相扣，深入理解其内在关联对培养良好的设计思维具有重要意义。2.SOLID原则知识准备单一职责原则指的是一个类应该只有一个职责，或者说它只有一个引起变化的原因。每个模块、类或函数应该专注于完成一种功能。示例代码如下：//不符合SRP：一个类既处理用户数据，又处理日志记录classUserService{constructor(){this.users=[];}addUser(user){this.users.push(user);this.logAction("Useradded");}logAction(message){console.log(message);}}//符合SRP：将日志处理分离到另一个类中classUserService{constructor(){this.users=[];this.logger=newLogger();}addUser(user){this.users.push(user);this.logger.logAction("Useradded");}}classLogger{logAction(message){console.log(message);}}在不符合SRP的代码中，UserService既负责用户数据的管理，又负责日志记录。这违反了单一职责原则。在符合SRP的代码中，我们将日志记录功能提取到了Logger类中，从而让UserService只专注于用户管理，符合单一职责原则。2.SOLID原则知识准备开闭原则指的是软件实体（类、模块、函数等）应该对扩展开放，对修改封闭。也就是说，我们应该通过添加新代码而不是修改现有代码来实现功能的扩展。示例代码如下：//不符合OCP：每次新增形状类型时，都需要修改现有的代码classAreaCalculator{calculateArea(shape){if(shape.type==="circle"){returnMath.PI*shape.radius*shape.radius;}elseif(shape.type==="square"){returnshape.side*shape.side;}}}constcircle={type:"circle",radius:5};constsquare={type:"square",side:4};constcalculator=newAreaCalculator();console.log(calculator.calculateArea(circle));//输出：78.53981633974483console.log(calculator.calculateArea(square));//输出：16//添加一个新的形状（例如三角形），直接修改AreaCalculator类会违反OCP//符合OCP：通过继承和多态扩展代码//定义一个接口（或抽象类），并通过实现不同的策略来计算不同形状的面积classShape{calculateArea(){thrownewError("Method'calculateArea'shouldbeimplemented.");}}classCircleextendsShape{constructor(radius){super();this.radius=radius;}calculateArea(){returnMath.PI*this.radius*this.radius;}}classSquareextendsShape{constructor(side){super();this.side=side;}calculateArea(){returnthis.side*this.side;}}classTriangleextendsShape{constructor(base,height){super();this.base=base;this.height=height;}calculateArea(){return0.5*this.base*this.height;}}classAreaCalculator{calculateArea(shape){returnshape.calculateArea();}}constcircle=newCircle(5);constsquare=newSquare(4);consttriangle=newTriangle(10,5);constcalculator=newAreaCalculator();console.log(calculator.calculateArea(circle));//输出：78.53981633974483console.log(calculator.calculateArea(square));//输出:16console.log(calculator.calculateArea(triangle));//输出:252.SOLID原则知识准备里氏替换原则指的是子类对象应该能够替换父类对象，并且程序的行为不会发生改变。也就是说，继承关系应该保证子类可以完全替代父类。示例代码如下：//不符合LSP：子类没有正确地替代父类，Ostrich类继承了Bird类//但重写了fly()方法并抛出了一个错误，这违反了LSPclassBird{fly(){console.log("Flying");}}classOstrichextendsBird{fly(){thrownewError("Ostrichcan'tfly");}}functionletBirdFly(bird){bird.fly();}constostrich=newOstrich();letBirdFly(ostrich);//抛出错误：Ostrichcan'tfly//传入Ostrich对象会导致程序抛出错误，破坏了父类的行为//符合LSP：避免不合适的继承，将飞行行为抽象出来，使用多态来实现不同的行为classBird{move(){thrownewError("Method'move'mustbeimplemented.");}}classSparrowextendsBird{move(){console.log("Flying...");}}classOstrichextendsBird{move(){console.log("Running...");}}functionmakeBirdMove(bird){bird.move();}constsparrow=newSparrow();constostrich=newOstrich();makeBirdMove(sparrow);//输出:Flying...makeBirdMove(ostrich);//输出:Running...符合LSP：子类Sparrow和Ostrich都实现了父类Bird的move()方法，且不会破坏父类的行为。makeBirdMove()函数可以接收任何Bird对象，并且不会抛出错误。代码的可维护性：通过抽象和多态，代码变得灵活和可维护。如果需要添加新的鸟类，只需实现move()方法。减少错误：避免因子类行为不一致而导致的错误，提高代码的健壮性。2.SOLID原则知识准备接口隔离原则指的是客户端不应该依赖它不需要的接口。也就是说，应该将接口设计得尽可能细化，使得每个接口只包含特定的功能。示例代码如下：//不符合ISP：一个接口包含了不相关的功能classAnimal{walk(){console.log("Walking");}swim(){console.log("Swimming");}fly(){console.log("Flying");}}//这样如果某种动物会行走与游泳但不会飞，却不得不实现fly()方法classDogextendsAnimal{walk(){console.log("Dogiswalking");}swim(){console.log("Dogisswimming");}fly(){thrownewError("Dogscannotfly!");}}//符合ISP：将接口分割成多个细化的接口classWalkable{walk(){thrownewError("Method'walk'shouldbeimplemented.");}}classSwimmable{swim(){thrownewError("Method'swim'shouldbeimplemented.");}}classFlyable{fly(){thrownewError("Method'fly'shouldbeimplemented.");}}classDogextendsWalkable{walk(){console.log("Dogiswalking");}}classFishextendsSwimmable{swim(){console.log("Fishisswimming");}}classBirdextendsFlyable{fly(){console.log("Birdisflying");}}constdog=newDog();dog.walk();//输出：Dogiswalkingconstfish=newFish();fish.swim();//输出：Fishisswimmingconstbird=newBird();bird.fly();//输出：Birdisflying2.SOLID原则知识准备接口隔离原则指的是客户端不应该依赖它不需要的接口。也就是说，应该将接口设计得尽可能细化，使得每个接口只包含特定的功能。示例代码如下：//不符合ISP：一个接口包含了不相关的功能classAnimal{walk(){console.log("Walking");}swim(){console.log("Swimming");}fly(){console.log("Flying");}}//这样如果某种动物会行走与游泳但不会飞，却不得不实现fly()方法classDogextendsAnimal{walk(){console.log("Dogiswalking");}swim(){console.log("Dogisswimming");}fly(){thrownewError("Dogscannotfly!");}}//符合ISP：将接口分割成多个细化的接口classWalkable{walk(){thrownewError("Method'walk'shouldbeimplemented.");}}classSwimmable{swim(){thrownewError("Method'swim'shouldbeimplemented.");}}classFlyable{fly(){thrownewError("Method'fly'shouldbeimplemented.");}}classDogextendsWalkable{walk(){console.log("Dogiswalking");}}classFishextendsSwimmable{swim(){console.log("Fishisswimming");}}classBirdextendsFlyable{fly(){console.log("Birdisflying");}}constdog=newDog();dog.walk();//输出：Dogiswalkingconstfish=newFish();fish.swim();//输出：Fishisswimmingconstbird=newBird();bird.fly();//输出：Birdisflying2.SOLID原则知识准备依赖倒置原则要求高层模块不应依赖于低层模块，二者都应依赖于抽象；抽象不应依赖于细节，细节应依赖于抽象。示例代码如下：//不符合DIP：高层模块直接依赖低层模块classDatabase{save(data){console.log(`Savingdatatodatabase:${data}`);}}classUserService{constructor(){this.database=newDatabase();}createUser(user){this.database.save(user);}}constuserService=newUserService();userService.createUser("JohnDoe");//输出：Savingdatatodatabase:JohnDoe（常用的虚构名字）//符合DIP：高层模块依赖抽象，而不是具体的低层模块classStorage{save(data){thrownewError("Method'save'shouldbeimplemented.");}}classDatabaseextendsStorage{save(data){console.log(`Savingdatatodatabase:${data}`);}}classCloudStorageextendsStorage{save(data){console.log(`Savingdatatocloudstorage:${data}`);}}classUserService{constructor(storage){if(!(storageinstanceofStorage)){thrownewError("StoragemustimplementStorageinterface");}this.storage=storage;}createUser(user){this.storage.save(user);}}constdatabase=newDatabase();constcloudStorage=newCloudStorage();constuserServiceWithDatabase=newUserService(database);userServiceWithDatabase.createUser("JohnDoe");//输出：Savingdatatodatabase:JohnDoeconstuserServiceWithCloudStorage=newUserService(cloudStorage);userServiceWithCloudStorage.createUser("JaneDoe");//输出：Savingdatatocloudstorage:JaneDoe任务实现03任务实现（1）找到对应的博客文章：使用blogManager.blogs.find(b=>b.id===blogId)方法查找与blogId匹配的博客文章。（2）停止之前的阅读（如果有）：调用speechSynthesis.cancel()来取消任何正在进行的语音合成任务。（3）组织要阅读的内容：通过模板字符串${}将各个字段拼接，将最终生成的字符串存储在textToRead变量中。（4）调用speechSynthesis.speak(utterance)开始朗读文本。谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026技能补强轻松启动——服务器搭建与Node.js的应用技能知识011.认识服务器技能知识服务器是一种能够稳定提供服务的计算机。在网页开发中，客户端（例如浏览器）通过网络请求（例如HTTP请求）向服务器索取资源，服务器接收到请求后，返回相应的资源（HTML、CSS、JavaScript、图片等静态文件）或通过执行服务器端脚本生成动态页面。Node.js是一个基于ChromeV8引擎的JavaScript运行环境。它允许在服务器端运行JavaScript代码，应用JavaScript在服务器上处理数据、执行逻辑，并与客户端（如浏览器）进行交互。（1）安装Node.js可以通过访问Node.js官网下载并安装最新Node.js的版本。安装完成后，在终端执行以下命令检查是否安装成功：

node-v如果出现版本号如图所示，表示成功完成了Node.js的安装。

2.什么是Node.js？2.什么是Node.js？技能知识

npminstallhttp-server-g执行上述用于全局安装http-server的命令后，再执行以下命令：

http-server-p8090可以在手机浏览器地址栏中输入服务器运行提示的IP地址和端口号（按你当前服务器显http的IP地址），如左图所示，单击搜索按钮即可查看当前目录下的内容，如右图所示。

2.什么是Node.js？技能知识（2）Node.js的特点Node.js使用非阻塞I/O模型，允许服务器同时处理多个请求，提高资源利用率。Node.js自身支持Windows、Linux和macOS等多种操作系统。Node.js拥有活跃的社区和丰富的第三方模块，可以通过NPM（即NodePackageManager）轻松安装和管理。（3）Node.jsHTTP模块概述

Node.js的HTTP模块是一个内置模块，用于创建HTTP服务器和客户端。通过该模块，开发者可以处理HTTP请求和响应，从而实现Web服务的基本功能。HTTP模块的核心功能如下。创建HTTP服务器，监听特定端口的请求。处理HTTP请求，并返回相应的响应。提供请求和响应对象，用于访问请求数据和设置响应内容。3.搭建HTTP服务器技能知识

Node.js允许开发者创建轻量级的HTTP服务器（不需要复杂的配置与占用过多资源）。接下来将介绍如何使用Node.js的HTTP模块搭建简单的服务器，以部署完成项目页面。（1）创建项目文件夹创建一个项目文件夹，用于存放HTML页面和服务器脚本。例如，创建一个名为my-web-server的文件夹：mkdirmy-web-server//创建目录cdmy-web-server//进入目录（2）创建HTML文件在项目文件夹中，创建HTML文件，例如index.html，并添加以下内容：3.搭建HTTP服务器技能知识（3）初始化项目在项目文件夹中，执行以下命令初始化一个新的Node.js项目：npminit-y这将创建一个默认的package.json文件。（4）创建Node.js服务器在项目文件夹中，创建一个名为server.js的文件，用于编写服务器代码。打开server.js文件，并添加以下内容：consthttp=require('http');//引入HTTP模块constfs=require('fs');//引入文件系统模块constpath=require('path');//引入路径模块//获取HTML文件路径constindexPath=path.join(__dirname,'index.html');//读取HTML文件内容fs.readFile(indexPath,'utf8',(err,htmlContent)=>{if(err){console.error('Errorreadingindex.html:',err);return;}

//创建HTTP服务器constserver=http.createServer((req,res)=>{//设置响应头res.writeHead(200,{'Content-Type':'text/html'});//将HTML内容发送给客户端res.end(htmlContent);});//监听端口constPORT=3000;//注意不要使用80端口server.listen(PORT,()=>{console.log('Serverisrunningathttp://localhost:${PORT}');});});3.搭建HTTP服务器技能知识（5）运行服务器并访问网页在VSCode终端或命令提示符窗口中，导航到项目文件夹，并执行以下命令启动服务器：nodeserver.js服务器启动之后，会在控制台输出类似如图所示信息。打开浏览器，在地址栏中输入“http://localhost:3000”。如果页面显示如图所示的信息，则说明HTML页面已成功部署到服务器。3.搭建HTTP服务器技能知识（5）运行服务器并访问网页在VSCode终端或命令提示符窗口中，导航到项目文件夹，并执行以下命令启动服务器：nodeserver.js服务器启动之后，会在控制台输出类似如图所示信息。打开浏览器，在地址栏中输入“http://localhost:3000”。如果页面显示如图所示的信息，则说明HTML页面已成功部署到服务器。3.搭建HTTP服务器技能知识（6）服务器运行不正常时的处理方式3.搭建HTTP服务器技能知识（6）服务器运行不正常时的处理方式技能实践02页面部署技能实践

我们成功搭建并运行了HTTP服务器，你可以尝试将本模块构建的无障碍博客页面部署到Node.js项目中运行，以进一步巩固对Web开发和服务器搭建的理解与实践。（1）检查搭建好的Node.js项目，此时的项目结构类似于：

my-web-server/

│

├──blog.html

├──server.js

└──package.json（2）检查Node.js脚本代码，涉及的路径代码需要根据你的项目结构进行调整：//获取blog.html文件路径constindexPath=path.join(__dirname,'blog.html');页面部署技能实践

重新启动服务器，博客项目部署成功后用浏览器访问的效果如左图所示。本地访问网页：在浏览器中访问http://localhost:3000，即可看到部署成功的博客页面。此时，页面仅能在本地设备上访问，适合开发和测试阶段。广域网访问网页：先获取公网IP地址：通过在线工具（如）查询你的公网IP地址；然后通过手机或计算机访问页面：在浏览器中输入“http://<你的公网IP>:3000”，其他用户就可以通过广域网访问你的博客页面，具体实现效果如右图所示。思考与练习请同学们注意：填空题考查JavaScript变量声明、数据类型、函数基础、条件控制、数组方法及DOM元素获取；判断题分析变量作用域、数组索引、事件监听、对象语法及SOLID原则；选择题判别数据类型特性、函数语法、相等运算符、类型转换方法及SOLID原则分类。一、填空题1.let；const2.字符串（String）；数字（Number）；布尔值（Boolean）；空值（Null）；未定义（Undefined）；Symbol3.return；undefined4.if...else（或switch）5.pop()（或shift()、splice()）6.document.getElementById()（或document.querySelector()、document.getElementsByClassName()等）二、判断题1.√2.×3.√4.√5.√三、选择题1.A2.A3.B4.D5.A一、填空题1.在JavaScript中，声明变量可以使用关键字__________或__________，其中const声明的变量是不可重新赋值的。2.JavaScript中的基本数据类型有__________、__________、__________、__________、__________和__________。3.函数的返回值通过__________关键字返回，若没有返回值，默认返回__________。4.JavaScript中，用__________控制语句可以根据条件执行不同的代码块。5.在JavaScript中，可以通过__________方法将一个元素从数组中移除。6.在DOM操作中，获取页面元素的常用方法是__________。二、判断题1.var声明的变量是函数作用域，而let声明的变量是块级作用域。（）2.在JavaScript中，数组的索引从1开始。（）3.使用addEventListener()方法可以为DOM元素添加多个事件监听器。（）4.JavaScript中的对象是通过“{}”包裹的键值对集合。（）在面向对象程序设计中，继承是SOLID原则中的一个重要组成部分。（）三、选择题1.在JavaScript中，（）类型是不可变的。A.数字

B.对象

C.数组

D.函数2.（）用于定义一个没有参数的函数。A.functionmyFunction(){}B.functionmyFunction[]{}C.functionmyFunction{}D.function()=>{}3.（）用于能检查两个变量是否相等且类型一致。A.==

B.===

C.!==

D.<=4.在JavaScript中（）方法用于将字符串转换为数字。A.parseInt()

B.parseFloat()

C.Number()

D.以上都可以5.SOLID原则中，（）关注类的单一职责。A.单一职责原则

B.开放封闭原则

C.里氏替换原则

D.接口隔离原则谢谢大家汇报人：xxx时间：2026零号任务如虎添翼——使用DOM操作增强操作的动态响应汇报人：xxx时间：2026任务说明01在模块6创建的博客页面的基础上，实现对博客的功能扩展及验证，具体要求如下：（1）增加标签：在博客头部增加：添加博客按钮、提供添加与修改的浮窗。（2）实现增加、删除、修改博客功能的函数。（3）通过开发者工具的控制台验证实现的函数。（4）使用console.log()输出调试信息。 零号任务任务说明知识准备0201选择节点目录02创建和插入节点05类名与样式操作06替换节点04节点属性修改03节点删除07元素内容与文本操作08调试技巧1.

选择节点知识准备（1）节点模块3与模块6中，简单介绍了DOM这一概念。接下来，将深入介绍如何通过DOM操作网页内容。【例0-1】有如下HTML结构，其运行结果如图所示。右图展示了HTML结构中的各个元素在DOM树中是如何组织。每个矩形框代表一个DOM节点，箭头或线条表示这些节点之间的层级关系。blogContainer是根节点，具有id="blogContainer"和class="container"属性。从根节点分支出3个子节点，分别是post、postfeatured和另一个post。1.

选择节点知识准备（2）不同方式获取DOM元素DOM操作是网页与JavaScript（简写为JS）交互的桥梁，允许开发者动态地访问和更新HTML文档的内容、结构和样式。通过节点选择方法，我们可以精确获取页面上的特定元素节点，并对其进行各种操作。主要方法及其示例如图所示。1.

选择节点知识准备（2）不同方式获取DOM元素DOM操作是网页与JavaScript（简写为JS）交互的桥梁，允许开发者动态地访问和更新HTML文档的内容、结构和样式。通过节点选择方法，我们可以精确获取页面上的特定元素节点，并对其进行各种操作。

HTMLCollection是一种动态的集合，它会自动反映DOM树中的变化。如果你在页面上添加了一个新的post类的元素，postsByClass集合会立即包含这个新元素。

NodeList是一种静态的集合，它不会自动更新。即使你在页面上添加了一个新的post类的元素，allPostsByQuery集合也不会自动包含这个新元素，除非重新执行querySelectorAll()方法。HTMLCollection和NodeList分别是什么？2.创建和插入节点知识准备【例0-3】在前面例子的基础上实现如下代码。3.删除节点知识准备删除指定的子节点使用removeChild()方法。parentNode.removeChild(node);//从DOM树中删除指定的子节点【例0-4】删除第一个post子节点，在前面的例子的基础上添加如下代码。3.删除节点3.删除节点3.删除节点知识准备设置节点属性值使用setAttribute()方法。获取节点属性值使用getAttribute()方法。

3.删除节点4.修改节点属性判断节点是否有指定属性使用hasAttribute()方法。3.删除节点知识准备3.删除节点4.修改节点属性【例0-5】修改节点属性，在前面例子的基础上添加如下代码。5.类名与样式操作知识准备在DOM操作中，除了通过setAttribute和getAttribute来修改和获取元素的属性外，还可以使用classList属性来操作元素的类名，以及通过style属性直接设置内联样式，如图所示。6.替换节点知识准备替换父节点中的某个子节点使用replaceChild()方法。newNode是新的节点，oldNode是要被替换的节点。replaceChild(newNode,oldNode)【例0-6】使用replaceChild()方法替换节点。上述代码将父节点的第一个子节点替换为新创建的节点。这种操作常用于动态更新页面内容的场景，例如在用户交互后更新列表项、替换表单输入框的内容，或者在加载新数据时刷新页面中的特定部分。7.元素内容与文本操作知识准备获取或设置节点值使用nodeValue()方法。letnodeValue=textNode.nodeValue;//获取或设置节点值（对于文本节点）。获取或设置节点的文本内容使用textContent()方法。element.textContent;//获取或设置节点的文本内容【例0-7】在前面例子的基础上添加如下代码。7.元素内容与文本操作知识准备

除操作纯文本内容外，我们还可以通过innerHTML来操作包含HTML标签的内容。以下是innerHTML和textContent的区别及适用场景。

innerHTML：获取或设置元素的HTML内容，包括标签和文本，适用于需要操作HTML结构的场景。

textContent：获取或设置元素的文本内容，忽略HTML标签，适用于只需要操作文本内容的场景。8.调试技巧知识准备使用console.log()检查元素状态console.log(message);//向控制台输出一条消息，用于调试【例0-8】在前面例子的基础上添加如下代码。这段代码使用console.log()输出调试信息，先输出所有post类元素的数量，再检查featuredPost的data-id属性值，帮助验证代码是否正确运行。任务实现03任务实现（1）添加与修改博客功能（2）删除博客功能（3）增加输入框与添加按钮（4）设置浮窗，用于添加和修改博客内容任务实现实现添加新博客的功能，同理可得编辑功能的实现方式和效果参考效果图任务实现在控制台中输入“deleteBlog(13);”删除id为13的博客内容，弹出弹窗询问操作警告。任务实现在必要的操作中，使用console.log()可以方便开发调试。可以询问AI助手获取建议谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026一号任务事半功倍——使用事件处理机制提高交互的精准性任务说明01 零号任务已经实现添加、删除、修改博客功能的逻辑，本任务通过事件监听器实现页面交互，并且确保对事件进行精准处理。具体要求如下。（1）通过事件监听器实现添加、删除、修改博客功能的页面交互。（2）使用事件对象获取事件触发元素，阻止默认行为或事件冒泡。一号任务任务说明知识准备0201添加和移除事件监听器03事件对象的使用目录02常见事件类型及其使用场景04事件冒泡和捕获1.添加和移除事件监听器知识准备（1）添加监听器element.addEventListener(event,handler[,options]);①event：事件类型（如click、keydown等）。②handler：当事件触发时执行的回调函数。③options：可选参数，可以是一个布尔值或一个对象，用于指定事件监听器的行为。常见的选项如下。capture：布尔值，指定事件是否在捕获阶段触发（默认值为false，在冒泡阶段触发）。once：布尔值，指定事件监听器是否只触发一次（默认值为false）。passive：布尔值，指定事件监听器是否永远不会调用preventDefault()（默认为false）。1.添加和移除事件监听器知识准备（2）移除监听器element.removeEventListener(event,handler[,options]);移除事件监听需确保参数与添加时完全一致，包括回调函数引用。【例1-1】点击事件的添加与移除。2.常见事件类型及其使用场景知识准备在Web开发中，合理使用事件，可以实现丰富的用户交互和动态效果。【例1-2】双击放大图片。constimage=document.querySelector("#image");image.addEventListener("dblclick",()=>{console.log("图片被双击");image.style.transform="scale(1.5)";//放大图片});【例1-3】快捷键功能示例。document.addEventListener("keydown",(e)=>{if(e.ctrlKey&&e.key==="s"){e.preventDefault();console.log("Ctrl+S被按下");}});【例1-4】实时搜索。constsearchInput=document.querySelector("#searchInput");searchInput.addEventListener("keyup",(e)=>{console.log("输入内容：",e.target.value);//调用搜索接口});【例1-5】阻止默认提交行为。constform=document.querySelector("#myForm");form.addEventListener("submit",(e)=>{e.preventDefault();console.log("表单已提交，数据已处理");});2.常见事件类型及其使用场景知识准备【例1-6】表单验证。constemailInput=document.querySelector("#emailInput");emailInput.addEventListener("change",(e)=>{if(!e.target.value.includes("@")){console.log("请输入有效的邮箱地址");}});【例1-7】懒加载图片。window.addEventListener("scroll",()=>{constimg=document.querySelector("img.lazy");if(img.offsetTop<window.innerHeight+window.scrollY){img.src=img.dataset.src;//加载图片}});【例1-8】显示/隐藏导航栏。constnavbar=document.querySelector("#navbar");window.addEventListener("scroll",()=>{if(window.scrollY>100){navbar.style.top="-50px";//隐藏导航栏}else{navbar.style.top="0";//显示导航栏}});【例1-9】动态调整布局。window.addEventListener("resize",()=>{if(window.innerWidth<768){console.log("切换到移动端布局");document.body.style.backgroundColor="lightblue";}else{console.log("切换到桌面端布局");document.body.style.backgroundColor="white";}

});3.事件对象的使用知识准备事件对象（event或e）是事件触发时自动传递给事件处理函数的参数，它包含与事件相关的所有信息。通过事件对象，开发者可以获取触发事件的元素、阻止默认行为或控制事件的传播。常用属性和方法如下。（1）event.target获取触发事件的元素。确定事件的具体触发源，特别是在事件委托中非常有用。例如，单击按钮时，event.target会返回被点击的按钮元素。【例1-10】获取触发事件的元素。3.事件对象的使用知识准备（2）event.preventDefault()阻止事件的默认行为，适用于需要自定义事件行为的场景，如表单验证失败时阻止提交，或阻止链接的默认跳转等行为。【例1-11】阻止事件的默认行为。（3）event.stopPropagation()阻止事件冒泡，即阻止事件从当前元素向上层传递，适用于需要隔离事件传播的场景。例如，在下拉菜单中单击时不触发父元素的点击事件。【例1-12】阻止事件冒泡。4.事件冒泡和捕获知识准备4.事件冒泡和捕获知识准备控制传播与事件冒泡、事件捕获的关系在于：控制传播提供了对事件传播过程的主动干预能力，在事件冒泡或捕获阶段阻止事件的进一步传播，从而精确控制事件的流向和行为。这种机制在需要隔离事件或确保特定逻辑优先执行时非常有用，是对事件冒泡和事件捕获的重要补充。【例1-13】单击列表项时输出其内容。上面的例子使用了事件委托，通过将事件监听器绑定到父元素（#myList）来处理子元素（<li>）的点击事件。这种方式有以下丰富的适用场景。动态列表：如待办事项列表，用户可以通过单击删除或编辑某一项。表格操作：在表格中单击某一行或某一列时触发特定操作。导航菜单：单击菜单项时切换内容或执行其他操作。任务实现03任务实现01修改Blog类中的

createHTML()方法，在每个博客卡片底部添加一个“修改”按钮和另一个“删除”按钮02将单独的操作方法迁移到事件监听器中。将addNewBlog()、

saveBlog()、closePreviewDialog()、deleteBlog()、

editBlog()改为事件监听器中的逻辑。任务实现阻止默认行为或事件冒泡。需要阻止默认行为或事件冒泡，可以在事件处理函数中使用e.preventDefault()或e.stopPropagation()。03谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026二号任务举重若轻——使用闭包提效及防抖技术任务说明01（1）实现博客内容的搜索功能。（2）使用防抖技术优化搜索功能和其他高频事件。（3）减少不必要的函数调用，提升页面响应速度和性能。二号任务任务说明知识准备0201闭包目录匿名函数02防抖技术031.闭包知识准备（1）闭包的概念闭包是指函数能够捕获并记住其定义时的作用域环境。即使函数在其词法（LexicalScope）作用域之外执行，它仍然能够访问定义时的外部变量。这种特性使得闭包在JavaScript中非常强大，尤其是在处理异步操作和封装数据时。【例2-1】基本闭包示例。为什么不直接调用outerFunction()，而是使用constclosureExample=outerFunction();

闭包的重要意义在于让函数能够“记住”并访问其定义时的作用域环境，即使函数在其词法作用域之外执行。如果直接调用outerFunction()，闭包的作用就无法体现，因为返回的innerFunction没有被保存。1.闭包知识准备（2）在函数内部访问外部函数中的变量在函数内部可以访问其外部函数中的变量，是闭包的核心特性之一。通过闭包，我们可以在函数内部访问和操作外部函数的变量，而不需要将这些变量暴露在全局作用域中。【例2-2】使用闭包封装计数器在这个例子中，count变量被封装在counter()函数内部，外部无法直接访问count，但通过闭包，increment()函数可以访问并修改count的值。这种特性使得闭包非常适合用于封装私有变量和实现数据隐藏。1.闭包知识准备（3）闭包的优势【例2-3】使用闭包实现数据隐藏2.匿名函数知识准备（1）匿名函数的定义匿名函数是指没有名称的函数，通常作为参数传递给其他函数，或者用于立即执行函数表达式（EImmediatelyInvokedFunctionExpression）。匿名函数在JavaScript中非常常见，特别是在处理回调函数时。【例2-4】匿名函数作为定时器回调。在这个例子中，setTimeout()函数的第一个参数是一个匿名函数，它将在1秒后执行。（2）匿名函数作为参数传递在JavaScript中，函数可以作为参数传递给其他函数，这种特性使得我们可以将行为（函数）作为数据传递，从而实现更灵活的代码设计。【例2-5】匿名函数作为参数传递。在这个例子中，function(){console.log('Thisisacallbackfunction');}是一个匿名函数。Greet()函数接收一个回调函数作为其参数，并在执行完主要逻辑后调用该回调函数。具体来说，这个匿名函数被作为回调函数传递给greet()函数，并在其内部被执行。3.防抖技术知识准备（1）原理①定义：防抖（Debounce）技术用于限制某个函数在短时间内多次触发时的执行次数。②目的：减少不必要的计算和资源消耗，适用于频繁触发的事件（如输入、滚动、窗口调整等）。（2）工作流程①触发事件时，启动一个定时器。②如果在定时器到期前事件再次触发，则重置定时器。③只有当事件停止触发一段时间后，定时器到期，回调函数才会执行。当事件触发时，不会立即执行回调函数，而是启动一个定时器；如果在定时器到期之前事件再次触发，定时器会被重置，回调函数的执行会被推迟；只有当事件停止触发一段时间后，定时器才会到期，回调函数才会被执行。这种机制可以有效减少频繁触发事件时的回调函数执行次数，从而优化性能。3.防抖技术知识准备（3）实现方式基本实现：防抖函数可以通过闭包和定时器来实现。每次事件触发时，清除之前的定时器并重新设置一个新的定时器。【例2-6】基本防抖函数的实现。在这个例子中，有如下几个要点。闭包的作用：timeoutId被封装在debounce()函数的闭包中，确保每次调用返回的函数都能访问和修改同一个t