← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达
← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达

循环调试实战技巧

常见错误和调试技巧

1. 无限循环

无限循环是指循环的条件永远不会变成 false,导致程序无法停止,会一直重复执行循环体内的代码。

⚠️ 了解无限循环(鼓励实验!)

💡 为什么要体验无限循环? 作为编程学习的一部分,我们鼓励你亲自体验无限循环!每个程序员都会遇到无限循环,提前体验可以帮助你:

  • 建立正确的认知:这并不可怕
  • 学会标准的处理方法
  • 增强编程信心和经验

🧪 实验指导 如果你决定尝试无限循环,按以下步骤操作:

第1步:运行无限循环代码

加载代码编辑器...

第2步:观察现象

  • 页面会变得无响应
  • 无法运行新的 TypeScript 代码
  • 这是完全正常的!

第3步:简单恢复

  1. 关闭当前标签页(点击 × 按钮)
  2. 重新打开网站:
    • Windows: 按 Ctrl + H 打开浏览器历史
    • Mac: 按 Command + Y 打开浏览器历史
    • 找到 CodeInFlow 并点击重新打开

💪 学习成果 恭喜!通过这次实验,你已经掌握了:

  • ✅ 识别无限循环代码的能力
  • ✅ 处理页面卡死的标准流程
  • ✅ 从浏览器历史恢复页面的技能

记住:犯错是学习编程最自然的方式,敢于尝试才能快速进步!

其他无限循环模式 (可以用上面的方法继续实验这些模式)

例子1:条件设置错误

加载代码编辑器...

例子2:方向错误

加载代码编辑器...

2. 调试技巧 - 🔍 让代码说话的魔法

什么是调试?

想象一下你在搭建一个乐高模型,但发现最后有个零件装不上了。你会怎么做?你会一步一步地检查,看看是哪一步出错了。

调试(Debugging) 就是程序员的"检查步骤"!当代码没有按照我们期望的方式工作时,我们需要:

  1. 找出问题:代码在哪里出错了?
  2. 理解原因:为什么会出错?
  3. 修复问题:如何让它正确工作?

🎮 调试就像玩游戏

  • 游戏:你找不到宝藏,需要查看地图
  • 编程:代码得不到正确结果,需要查看执行过程
  • 目的:都是找到问题所在,然后解决它!

💡 为什么调试很重要?

  • 让不可见变得可见:看到代码内部发生了什么
  • 快速定位问题:不用盲目猜测,直接找到错误位置
  • 建立信心:知道自己有能力解决任何代码问题

🛠️ 最简单的调试方法:console.log

console.log() 就像是你在代码中放了一个个"摄像头",记录下程序的执行过程:

加载代码编辑器...

🎯 调试的黄金法则

法则1:当不知道发生了什么时,打印出来看看!

// 不知道 total 的值是多少?打印它!
console.log("当前 total = " + total);

法则2:在重要步骤前后都添加日志

加载代码编辑器...

法则3:调试完成后,可以删除不需要的日志 就像建筑完成后会拆除脚手架一样!

记住:每个程序员都是调试专家!调试不是技术能力差的表现,而是专业程序员的标志。敢于调试,才能成为真正的编程高手!💪

🐛 实战调试:从发现问题到解决问题

让我们通过一个真实的例子来体验完整的调试过程!

场景:统计特殊数字

目标:编写一个程序,统计1到20中能被3整除或者能被5整除的数字有多少个

第1步:编写有问题的代码

加载代码编辑器...

运行这个代码,你会发现输出结果是 10个。

第2步:手动验证答案 程序输出10个,这个结果对吗?让我们手动计算一下正确答案:

  • 能被3整除的:3, 6, 9, 12, 15, 18(6个)
  • 能被5整除的:5, 10, 15, 20(4个)
  • 但15被两个条件都满足,我们只需要统计它一次
  • 所以总个数应该是:3, 5, 6, 9, 10, 12, 15, 18, 20 = 9个

发现问题了!程序输出10个,但正确答案应该是9个。这就是逻辑错误:程序能运行,但结果不对。

第3步:添加调试信息

现在让我们添加简单的调试信息来查看程序到底在做什么:

加载代码编辑器...

请运行上面的调试代码,仔细观察输出,你会发现数字15被统计了两次!

第4步:分析问题,发现bug

通过观察调试输出,我们可以分析出问题:

🎯 发现的bug:重复计算问题!

  • 问题所在:数字15既能被3整除,也能被5整除
  • 程序行为:
    • 第一次判断 i % 3 === 0:15能被3整除 → count + 1
    • 第二次判断 i % 5 === 0:15也能被5整除 → count + 1
    • 结果:15被计算了两次!

解决思路:我们需要确保每个数字只被统计一次。

还记得我们学过的 || 运算符吗?只要满足任意一个条件就为 true,这样就能避免用两个独立的 if 语句导致的重复计算问题。

通过使用 || 运算符,我们相当于把两个分开的 if 语句合并成了一个:

  • 原来:两个独立的 if 语句 → 数字15可能被两个条件都满足,被计算两次
  • 现在:一个合并的 if 语句 → 数字15只会被统计一次,不管它能被3整除还是5整除

第5步:修复代码

加载代码编辑器...

请运行修复后的代码,现在应该输出 9个,和我们手动验证的结果一致!

第6步:清理代码,移除调试信息

代码现在工作正常了,让我们移除调试信息,保留简洁的最终版本:

加载代码编辑器...

🎉 调试成功总结

我们学到了什么?

  1. 重复计算问题:当一个元素满足多个条件时,避免重复统计
  2. 调试方法:通过添加 console.log 观察程序执行过程
  3. 逻辑运算符:学习 ||(或者)运算符的实际应用
  4. 修复流程:发现问题 → 添加调试 → 分析原因 → 修复代码 → 验证结果 → 清理代码

💪 调试的关键技能

  • 手动验证:编程前先想清楚正确答案
  • 分步调试:把复杂问题拆分成小步骤
  • 观察分析:仔细看调试输出,找出规律
  • 对比验证:用修复前后的结果对比验证修复效果

记住:每个bug都是学习机会! 通过调试解决的错误会让你印象更深刻,下次就不会再犯同样的错误了。

总结

今天我们专注于学习循环调试的核心技巧:

📚 核心知识

  1. 无限循环识别:学会识别和处理无限循环问题
  2. 调试方法论:使用 console.log 观察程序执行过程
  3. 问题解决流程:系统性地发现、分析和修复代码问题

🎯 实用技能

  • 无限循环处理:能够安全地体验和处理无限循环
  • 调试工具使用:熟练使用 console.log 进行代码调试
  • 逻辑错误修复:能够通过对比验证找到并修复逻辑错误

🚀 编程思维

  • 调试思维:将复杂问题拆解,通过观察找到问题根源
  • 验证思维:通过手动验证和对比确保修复的正确性
  • 系统思维:按照发现问题→分析原因→修复问题→验证结果的流程解决问题

掌握了这些调试技巧,你就能够:

  • 快速定位和修复代码中的问题
  • 建立解决编程问题的信心
  • 理解程序的实际执行过程
  • 写出更可靠的代码

调试是程序员最重要的技能之一。通过今天的学习,你已经掌握了系统性的调试方法,这将成为你编程学习道路上的强大工具!

Previous lesson
Previous
嵌套循环与作用域
Next
循环不变量 - 理解循环的数学规律
Next lesson