- 博客(79)
- 收藏
- 关注
RSS订阅
原创 深度监听 ref 和 reactive 的区别详解
特性ref (对象类型)reactive数据存储方式包裹在 .value 中直接代理对象默认深度监听否（需显式设置 deep）是推荐监听方式监听 .value (无需 deep)直接监听对象适用场景基本类型或需要替换整个对象复杂对象，需深层级响应式。
2025-04-17 21:45:04
871
原创 Vue 3 中 ref 与 reactive 的对比
在 Vue 3 中，`ref` 和 `reactive` 都是用于创建响应式数据的方法，但它们在使用方式、应用场景等方面存在一些差异，以下是详细对比：
2025-04-10 13:33:00
505
原创 事件类型——常见的键盘事件及应用
键盘事件是前端交互的重要组成部分，通过 `keydown` 和 `keyup` 可以精准监听用户的按键行为，结合 `key` 和 `code` 属性实现多样化的逻辑。在实际开发中，需根据场景选择合适的事件和属性，并注意兼容性和性能优化。
2025-04-05 18:01:44
607
原创 JavaScript 箭头函数
JavaScript 箭头函数是 ES6 引入的一种简洁的函数定义方式，它与传统的函数定义方式有所不同，具有一些独特的特性。箭头函数没有自己的 this 值，它会捕获其所在上下文的 this 值。在这个例子中，箭头函数内部的 this 指向 person 对象，因为它捕获了 sayHello 方法所在的上下文。由于箭头函数没有自己的 this，在需要动态 this 值的场景下不适用，如构造函数。箭头函数不能使用 yield 关键字，因此不能用作生成器函数。箭头函数的语法更加简洁，尤其适用于简单的函数定义。
2025-04-05 17:20:36
742
原创 JavaScript 事件对象（Event）
在 JavaScript 里，当事件（像点击、键盘输入等）触发时，浏览器会自动生成一个事件对象。此对象包含了与该事件相关的各种信息，借助它，你可以深入了解事件发生的具体情况并进行相应处理。
2025-04-05 02:11:58
755
原创 JavaScript 中常见的鼠标事件及应用
在 JavaScript 中，鼠标事件是用户与网页进行交互的重要方式，通过监听这些事件，开发者可以实现各种交互效果，如点击、悬停、拖动等。在 JavaScript 中，鼠标事件类型多样，下面为你详细介绍常见的鼠标事件类型及应用
2025-04-04 23:43:32
1301
原创 事件处理程序
在网页开发里，事件指的是在文档或浏览器窗口中发生的特定交互瞬间，例如用户点击按钮、鼠标悬停在元素上、页面加载完成、按下键盘按键等。而事件处理程序就是针对这些事件执行的函数，它能让网页具备交互性和动态性。
2025-04-03 15:16:24
1368
1
原创 使用 JavaScript 动态设置 CSS 样式
在前端开发中，很多时候我们需要根据用户的操作、页面的状态或者其他动态因素来改变元素的样式。这时，使用 JavaScript 动态设置 CSS 样式就显得尤为重要。本教程将详细介绍如何使用 JavaScript 来动态改变元素的 CSS 样式。
2025-04-03 12:43:45
1708
原创 JavaScript instanceof 运算符全解析
JavaScript instanceof 运算符判断一个对象（object）是否属于某个构造函数（constructor）或类的实例，基于原型链（prototype chain）实现类型检测。
2025-04-02 23:01:09
1132
原创 Scratch 少儿编程教学课程安排
任务目标：学生掌握自定义积木的创建方法，体会其在简化编程过程中的优势。教学内容介绍自定义积木的概念，就像把常用的积木组合成一个新的大积木。以 “绘制正方形” 为例，详细讲解创建自定义积木的步骤，包括添加参数和组合积木块。让学生自己尝试创建一个自定义积木，如 “角色跳舞”，并在脚本中使用。举办自定义积木创意大赛，评选出最有创意的自定义积木。任务目标学生对整个课程进行总结，激发继续学习编程的兴趣。教学内容回顾课程内容，强调 Scratch 编程的核心要素和技巧。
2025-03-28 14:56:12
712
原创 JavaScript 字符串
在 JavaScript 中，字符串是由零个或多个字符组成的序列，。这些字符可以是字母、数字、标点符号、特殊字符等。字符串是 JavaScript 的基本数据类型之一，，比如网页上的标题、段落内容、用户输入的文本等。
2025-03-28 13:10:24
1178
原创 JavaScript 调试入门指南
本指南已通过2025年最新Chrome DevTools验证，配套练习仓库可在GitCode获取（搜索#2025-js-debug-bootcamp）。建议每天花15分钟在浏览器的无痕模式下进行调试练习，避免扩展程序干扰。记住，优秀的调试能力=20%工具知识+30%经验积累+50%耐心观察！元素检查：使用Elements面板检查DOM结构完整性。用户列表部分数据未显示，控制台无报错。断点设置：在数据获取函数设置条件断点。数据验证：在Console执行。
2025-03-27 22:41:24
498
原创 JavaScript 改变 HTML 样式
JavaScript 改变 HTML 样式的核心是通过操作 DOM 元素的 CSS 属性或 类名 实现动态视觉效果。本文是具体方法与场景解析。
2025-03-26 14:54:01
643
原创 JavaScript 改变 HTML 图像
JavaScript 改变 HTML 图像的核心是通过动态修改 <img> 标签的 src 属性或调整 CSS 样式实现图像切换或视觉效果变化。本文是具体方法与场景解析。
2025-03-26 13:30:26
997
原创 JavaScript 改变 HTML 内容
JavaScript 改变 HTML 内容的核心在于通过 DOM（文档对象模型）操作实现动态更新，本文是主要方法及场景解析。
2025-03-26 12:56:03
662
原创 JavaScript 对事件的反应机制
事件是用户或浏览器在页面上的动作（如点击、键盘输入、页面加载等），JavaScript 通过事件处理函数响应这些动作。JavaScript 事件机制通过监听用户行为并触发响应函数实现交互。
2025-03-26 12:40:44
476
原创 HTML输出流
document.write()是一种早期 JavaScript 操作页面的方式，适合在文档解析阶段快速插入内容。但在现代开发中，由于其潜在风险（如覆盖页面、阻塞渲染），建议优先使用 DOM 操作或模板引擎实现动态内容。
2025-03-26 11:23:26
629
原创 HTML DOM 基础：用「家族树」理解网页操控术
DOM 是活的说明书 —— 随时可修改的页面蓝图选择器如同社交软件 —— 精准定位目标元素属性操作像改装车 —— 随时更换零件和涂装事件机制似条件反射 —— 让页面与用户对话动态操作好比乐高 —— 自由拼装页面模块掌握这些核心技能，你就获得了操控网页的「魔法权杖」。下次看到网页特效，不妨打开浏览器开发者工具，像查看基因序列一样观察DOM结构吧！🧙♂️。
2025-03-26 09:14:39
1120
原创 JavaScript 函数基础
JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。函数是一段可以反复调用的代码块。
2025-03-24 18:29:47
857
原创 JavaScript 比较运算符
JavaScript 的比较运算符系统既灵活又充满陷阱，核心在于理解类型转换机制（尤其是。的隐式转换）和特殊值（NaN、null、undefined）的处理逻辑。掌握这些原则可显著提升代码健壮性，避免诸如类型不同 → 直接返回false等经典陷阱带来的逻辑错误。
2025-03-24 00:10:03
989
原创 JavaScript 赋值运算符
JavaScript 赋值运算符从基础的 = 到现代的逻辑赋值 ??=，展现了语言的高效演进。关键要掌握复合运算符的隐式转换规则、解构赋值的模式匹配能力，以及优先级对运算顺序的影响。在复杂场景中，建议通过括号明确运算顺序，并优先使用 const 声明避免意外修改。
2025-03-23 22:27:04
621
原创 JS 算术运算符
JavaScript 算术运算符看似简单，但涉及隐式类型转换、精度问题及特殊值处理等深层机制。理解这些细节可避免常见陷阱（如字符串意外拼接、NaN污染），提升代码健壮性。
2025-03-23 21:39:29
805
原创 JS 数据类型
JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型，当前课程暂不涉及)
2025-03-23 17:33:38
294
原创 第二章：盒模型的奥秘
这段代码是「基础属性的平衡教科书」，通过margin/padding/border的协同作用，实现了稳定与灵动的共生。建议在CodePen中尝试修改数值（如将25px padding改为15px），观察视觉平衡的微妙变化——这就是CSS魔法的魅力：1px的增减，就是平庸与惊艳的分界线。
2025-03-11 23:58:06
1051
原创 第一章：像素学徒的觉醒
欢迎踏入CSS魔法学院，开启这场充满惊喜与挑战的奇妙编程冒险！身为像素学徒的你，今天走进了神秘的魔法图书馆。书架林立，古籍堆积如山，就在你穿梭其中时，一本散发着微光却又蒙着厚厚灰尘的书籍闯入眼帘。你按捺不住好奇翻开它，只见里面文字褪色、模糊不清，好似在低声讲述着一段被岁月尘封的历史。
2025-03-11 14:42:32
675
原创 沉浸式CSS学习路径
这个结构将技术点融入剧情发展，每个阶段设置成就奖励机制，通过隐喻和故事化教学降低认知门槛。希望能够轻松带你走进CSS！我将以魔法学院成长故事为框架，为您设计一套沉浸式CSS学习路径。
2025-03-11 09:30:39
649
原创 第九章：总结与未来展望
现在的你，已经掌握了创造数字世界的魔法！无论是建造个人博客、电商平台，还是设计互动游戏，HTML 都是你最坚实的基石。网页开发就像搭乐高，每个标签都是一块积木错误是成长的必经之路（叉叉怪物也有可爱的一面）保持好奇心，未来的前端世界等你去探索！下一步行动用 CSS 给你的「太空站」穿上新衣（下一章教程即将上线！尝试用 JavaScript 实现「点击按钮让文字跳舞」在线测试彩蛋：在网页中输入以下代码，会有意想不到的惊喜！< script > alert("恭喜你完成 HTML 学习！
2025-03-11 01:04:38
345
原创 第八章：进阶技巧与「反人类」陷阱
通过本章的学习，你已经掌握了代码优化的技巧和常见错误的解决方法。记住，代码优化就像给火箭减重，能让网页跑得更快；而避开常见错误，就像避开雷区，能让网页更健壮。挑战任务用 Chrome 工具分析一个网页的性能，找出可以优化的地方。故意在网页中制造一个错误，然后尝试自己修复它。
2025-03-11 00:55:42
487
原创 第七章：实战项目：建造你的「HTML 太空站」
嘿呀，咱们现在就像一群宇宙建筑师，要从零开始打造一个属于自己的个人博客小宇宙啦！首先呢，咱们得给这个博客搭建一个坚固的骨架，就好比盖房子得先打好地基、搭好框架一样。咱们要用 HTML 里的语义化标签来构建这个骨架，这些标签就像是宇宙建筑的标准零件，让整个博客的结构清晰又好懂。</body;margin;padding;header;color;text-align;padding;nav;color;nav ul;margin;padding;display;;nav ul li。
2025-03-11 00:46:31
1027
原创 第六章：响应式设计：让网页「见风使舵」
嘿呀，在如今这个时代，设备那是五花八门，有小巧玲珑的手机，有不大不小的平板，还有宽敞大气的电脑屏幕。咱的网页要是还像个老古董一样，只会一种显示模式，那可就麻烦大啦！不过别担心，HTML 世界里有个超厉害的“变形金刚”——媒体查询，能让网页根据不同设备的屏幕大小“见风使舵”，自由变换形态。
2025-03-11 00:20:19
663
原创 第五章：HTML5 大升级：解锁未来技能
在 HTML 的旧时代，我们就像一群建筑工人，只能用一些通用的<div>和<span>标签来搭建网页，就好比用千篇一律的砖块盖房子，虽然能把房子盖起来，但很难从外观上看出房子的各个部分是做什么用的。而 HTML5 引入的语义化标签，就像是给每一块砖块都赋予了特殊的形状和用途，让网页的结构变得一目了然，就像给每个房间都贴上了清晰的标签，告诉搜索引擎和屏幕阅读器等辅助设备，这里是客厅，那里是卧室。语义化标签不仅能让代码的可读性大大提高，方便开发者维护和理解，还能对搜索引擎优化（SEO）起到积极的作用。
2025-03-10 22:41:29
1027
原创 第四章：表单与交互：打造你的「数据捕手」
在 HTML 的世界里，就像是一个神奇的「吐字器」，它能让用户把心里的想法、想说的话像倒豆子一样倒出来。你可以把它想象成一个小嘴巴，等待着用户来发声。
2025-03-10 22:12:04
963
原创 第三章：布局大师：用标签建造梦幻家园
dl>定义列表<dl>就像是一本百科全书，它由术语和对应的解释组成。术语用<dt>标签表示，解释用<dd>标签表示。定义列表常用于展示一些专业术语的解释，或者是产品的规格说明。语法示例< dl > < dt > HTML </ dt > < dd > 超文本标记语言，用于创建网页的结构。</ dd > < dt > CSS </ dt > < dd > 层叠样式表，用于美化网页的外观。< dl > < dt > HTML </ dt > < dd > 超文本标记语言，用于创建网页的结构。
2025-03-10 22:02:42
699
原创 第二章：标签大狂欢：从基础到变形
想象一下，你刚写了一段优美的文字，结果浏览器像个熊孩子一样把它们堆成一团——这时候就需要 标签施展「定身咒」了！作用：把文字关进段落牢房，强制换行并保持间距。语法：搞笑案例：（悄悄说： 是换行符，但 才是段落的正确打开方式哦！）- 就像标签界的篮球队，从姚明到郭敬明依次排开：规则：搞笑示例：三、斜体与加粗的「抢戏二人组」 和 是 HTML 的戏精组合：使用场景：互动挑战：用标签写段子试着用 、、 写一个关于程序员的搞笑段子，例如：2.2 图片与链接的「穿越门」一、图片标签 ：会说话
2025-03-10 21:26:24
920
原创 第一章：欢迎来到 HTML 星球！
嘿，亲爱的探险家！欢迎踏上这场奇妙的 HTML 星球大冒险之旅！在我们正式踏入这个充满奇幻色彩的星球之前，咱们得先搞清楚，HTML 到底是个啥玩意儿。想象一下，整个互联网就像是一个浩瀚无垠的宇宙，而网页呢，就是这个宇宙里的各个星球。每个星球都有自己独特的风貌和故事，而 HTML 就是建造这些星球的基石。它就像是宇宙里的乐高积木，咱们可以用各种各样的标签，搭建出一切你能想象到的网页内容。HTML 全名叫 HyperText Markup Language，中文就是超文本标记语言。超文本？
2025-03-10 21:13:59
1120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人