6-0 JavaScript从零到一-构建基础的博客页面

零号任务JavaScript从零到一——构建基础的博客页面汇报人：xxx时间：2026任务说明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事件（有关事件的详细操作将在一号任务中讲解）。当单击按钮时，将调用b