用 JavaScript 构建屏幕计算器The Odin Project 项目实战函数热身、DOM 事件与状态管理【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇技术指南以 The Odin Project 课程仓库中的 project_js_basics.md 为主体骨架完整还原其热身练习 屏幕计算器项目的核心任务先写出my_max()、vowel_count()、reverse()三个纯函数再基于 DOM 与事件机制构建一个可交互的屏幕计算器。读完本文你将掌握函数声明与console.log调试、onclick属性与addEventListener事件绑定、以及用变量保存中间状态、再交由统一函数求值这一经典交互逻辑并了解如何把它推向更健壮的实现。项目背景脱离在线沙盒让 JavaScript 跑在本机课程在介绍本项目时明确指出你已经在 Codecademy 等在线环境里做了大量练习现在是时候脱离超级友好的托管环境在自己的电脑上编写并运行 JavaScript了。这正是从跟着教程敲代码到独立实现功能的关键转折点。配套的 js_basics.md 为本项目提供了前置知识清单包括如何在 HTML 中引入外部 JS 文件、如何用字面量与构造函数创建对象、//的区别、truthy 与 falsy 值、数组的增删排序、for/while循环、函数声明的两种方式、作用域与闭包等。项目中计算器的求值逻辑正是对函数如何传参、返回、被组合调用的实战检验。在开始写代码前先明确运行方式把函数写进文本编辑器中的脚本文件或 HTML 的script标签里再通过console.log()打印函数返回值来验证结果。原文档给出了一个直接可用的调试范式console.log(my_max([1, 56, 2, 3, -1, 0])); // 输出 56也就是说任何自定义函数都可以通过把调用包进console.log()来观察其返回值。关于在 HTML 中正确引入脚本DOM_manipulation_and_events.md 有一个重要提醒如果把script放在head中DOM 节点尚未解析完成操作 DOM 的代码会失效最简单的办法是把脚本放到 HTML 底部或使用带defer属性的script src.../script。热身阶段三个函数把基本功打牢1.my_max()遍历数组求最大值function my_max(arr) { let max arr[0]; for (let i 1; i arr.length; i) { if (arr[i] max) { max arr[i]; } } return max; } console.log(my_max([1, 56, 2, 3, -1, 0])); // 56这个练习覆盖三个核心点参数传递把整个数组作为参数传入、遍历for循环逐个比较、return 返回值函数最终吐回最大数。关于参数与返回值的机制function_basics.md 中说明参数是函数声明括号里的占位符调用时传入的才是实际参数把my_max([...])直接嵌进console.log(...)函数返回值会就地作为console.log的参数使用无需先存入中间变量。2.vowel_count()统计字符串中的元音数题目要求统计AEIOUY这六个元音字母注意包含 Y。一个简洁的实现是利用indexOf或正则function vowel_count(str) { const vowels AEIOUYaeiouy; let count 0; for (let i 0; i str.length; i) { if (vowels.indexOf(str[i]) ! -1) { count; } } return count; } console.log(vowel_count(The Odin Project)); // 5e, o, i, o, e这里用到字符串的两个基础能力length取长度、indexOf查找字符是否存在二者都出现在 js_basics.md 的学习目标列表中。3.reverse()反转字符串题目示例reverse(this is a string)应返回gnirts a si siht。可以手写循环也可以组合内置方法function reverse(str) { let reversed ; for (let i str.length - 1; i 0; i--) { reversed str[i]; } return reversed; } // 更简洁的版本split → reverse → join function reverse(str) { return str.split().reverse().join(); } console.log(reverse(this is a string)); // gnirts a si sihtsplit()把字符串拆成字符数组、reverse()反转数组、join()再拼回字符串这一步也为后面数组方法组合的思维打下基础。正式项目构建屏幕计算器热身完成后正式任务是在浏览器里构建一个屏幕计算器on-screen calculator。原文档给出的 10 个步骤可以归纳为三块纯函数层、UI 与事件层、状态与求值层。第一步四个运算函数function add(a, b) { return a b; } function subtract(a, b) { return a - b; } function multiply(a, b) { return a * b; } function divide(a, b) { return a / b; } console.log(add(2, 3)); // 5 console.log(multiply(2, 3)); // 6这四个函数是整个计算器的计算引擎后续所有按钮操作最终都会归结为调用其中某一个。这也是课程刻意安排的理由先写出可独立测试的纯函数再让 UI 去调用它们避免把计算逻辑混在事件回调里。第二步用div网格铺出数字键盘用一组带数字标签的div组成 0–9 的按键网格。原文档特别注明这一步先不用 jQuery用最朴素的 DOM 方式完成。div idcalculator div classrow div classkey>div classkey onclickconsole.log(1)1/div方式二在 JS 中给 DOM 节点赋值onclick属性div idkey-1 classkey1/divconst key document.querySelector(#key-1); key.onclick function () { console.log(1); };DOM_manipulation_and_events.md 介绍了三种绑定事件的途径HTML 内联属性、on事件类型属性赋值、addEventListener()。前两种实现简单但每个元素只能挂一个onclickaddEventListener是更灵活的标准做法允许挂多个监听器还能配合forEach批量绑定const keys document.querySelectorAll(.key); keys.forEach(function (key) { key.addEventListener(click, function () { console.log(key.textContent); // 打印按键上的数字 }); });这里querySelectorAll返回的是 NodeList 而非数组但它的forEach已足够完成批量绑定。第四步加入运算符按键与屏幕雏形继续用div增加、-、*、/、和clear六个按钮。此时计算器仍然只做点击→打印这件事真正的难点在下一步。第五步保存状态并完成求值项目核心难点要让计算器工作起来需要回答三个问题用户按下的第一个数字存到哪——存进变量或数组用户选择了哪个运算——如加法用一个变量记录运算符按下后做什么——把两个数字和运算符交给第一步写好的add/multiply/divide/subtract求出结果并输出到控制台。一个经典的状态管理骨架如下let firstNumber null; let operator null; let secondNumber null; function pressNumber(value) { if (operator null) { firstNumber firstNumber null ? value : firstNumber * 10 value; } else { secondNumber secondNumber null ? value : secondNumber * 10 value; } console.log(firstNumber, secondNumber); } function pressOperator(op) { operator op; } function operate() { switch (operator) { case : return add(firstNumber, secondNumber); case -: return subtract(firstNumber, secondNumber); case *: return multiply(firstNumber, secondNumber); case /: return divide(firstNumber, secondNumber); } } function pressEquals() { const result operate(); console.log(result); // 将结果作为下一次计算的起点方便连续运算 firstNumber result; secondNumber null; operator null; }原文档坦言这需要一些练习才能把按钮的值传给你的主计算器函数它有点棘手但你能做到——这正是对初学者最有价值的挑战把界面事件与业务逻辑通过变量与函数调用衔接起来。补充说明课程在 project_calculator.md现代版计算器项目中特别警告不要使用eval()或new Function()去求值表达式原因是它们会执行传入的任意字符串代码存在安全隐患本项目的目的正是让你亲手写出operate()这类求值函数。第六步与clear的重置语义按下或clear时应清空所有已保存的变量与运算以便开始新一轮计算function clearAll() { firstNumber null; secondNumber null; operator null; }注意两种语义的区别求值后可以保留结果作为下一次运算的第一个数字支持12 7 19之后再- 1 18的连续计算而clear则是彻底清空、回到初始状态。第七步推送到 GitHub完成功能后把项目推送到自己的 GitHub 仓库并按要求在课程页面提交解决方案链接。这也是课程反复强调的工程习惯每个项目都应纳入版本管理为后续求职作品集积累素材。加分项两个有趣的进阶练习原文档提供了两个 extra credit1. 用 jQuery 实现屏幕显示如果你已经熟悉 jQuery可以加一个专门的div充当显示屏让数字和结果实时显示在屏幕上而不只是 console$(.key).on(click, function () { $(#screen).text($(#screen).text() $(this).text()); });这实际上是把结果输出到控制台升级为结果输出到页面是计算器从调试玩具走向真实产品的一步。2. 家长过滤器拦截不雅数字检查用户是否输入了诸如80085这类不成熟数字若有则给出严厉提示function isImmature(number) { return /(80085|5318008)/.test(String(number)); } function pressNumber(value) { // ...原有逻辑... if (isImmature(currentDisplay)) { console.log(嘿别乱按数字); } }这个练习的乐趣在于在状态更新的同时引入校验逻辑为后面输入合法性校验的工程实践做铺垫。从旧版项目到现代版让计算器真正健壮这份 project_js_basics.md 属于课程仓库中已归档的旧版 JavaScript 课程位于archive/old_lessons/javascript/同一项目的现代进化版是 project_calculator.md。对照两个版本可以清晰看到同样的核心任务四则运算函数、operate()求值、数字/运算符//clear按钮、显示更新被赋予了更严格的验收标准。如果你完成了旧版项目可以用这些陷阱清单自测陷阱场景要求连续输入12 7 - 1 每次只能求值一对数字即先算出12 7 19再做19 - 1 18除数为 0显示一条阴阳怪气的报错信息且不能让计算器崩溃结果很长的小数对结果做四舍五入避免溢出显示区域连按两次运算符不应被当作2 2求值只取最后输入的运算符显示结果后输入新数字应清空结果、开启新计算而不是把数字追加到结果后面过早按缺少数字或运算符时应安全处理不能出错现代版还增加了三点扩展方向小数点输入并防止12.3.56.5这类重复小数点、退格键撤销上一次输入、键盘支持监听keydown。这些正是把本项目推向可发布产品的完整路线图。相关课程资源索引本项目原始文档archive/old_lessons/javascript/project_js_basics.md前置知识课函数、对象、数组、作用域等archive/old_lessons/javascript/js_basics.md函数基础参数、返回值、作用域foundations/javascript_basics/function_basics.mdDOM 操作与事件选择器、创建元素、三种事件绑定方式foundations/javascript_basics/DOM_manipulation_and_events.md现代版计算器项目含全部健壮性要求与加分项foundations/javascript_basics/project_calculator.md数据类型与条件判断字符串方法、truthy/falsy、逻辑运算符foundations/javascript_basics/data_types_and_conditionals.md从三个热身函数到一台能完成四则运算的屏幕计算器这个项目完整覆盖了函数、数组、字符串、DOM、事件和状态管理六项 JavaScript 基本功。它刻意把计算逻辑与界面交互分开设计——先用纯函数把规则写对再通过事件把用户操作翻译成函数调用最后用变量保存中间状态串起完整流程。这套分离关注点的思路会在你后续接触更大型的 JavaScript 项目时反复出现。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 JavaScript 构建屏幕计算器：The Odin Project 项目实战（函数热身、DOM 事件与状态管理）
用 JavaScript 构建屏幕计算器The Odin Project 项目实战函数热身、DOM 事件与状态管理【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇技术指南以 The Odin Project 课程仓库中的 project_js_basics.md 为主体骨架完整还原其热身练习 屏幕计算器项目的核心任务先写出my_max()、vowel_count()、reverse()三个纯函数再基于 DOM 与事件机制构建一个可交互的屏幕计算器。读完本文你将掌握函数声明与console.log调试、onclick属性与addEventListener事件绑定、以及用变量保存中间状态、再交由统一函数求值这一经典交互逻辑并了解如何把它推向更健壮的实现。项目背景脱离在线沙盒让 JavaScript 跑在本机课程在介绍本项目时明确指出你已经在 Codecademy 等在线环境里做了大量练习现在是时候脱离超级友好的托管环境在自己的电脑上编写并运行 JavaScript了。这正是从跟着教程敲代码到独立实现功能的关键转折点。配套的 js_basics.md 为本项目提供了前置知识清单包括如何在 HTML 中引入外部 JS 文件、如何用字面量与构造函数创建对象、//的区别、truthy 与 falsy 值、数组的增删排序、for/while循环、函数声明的两种方式、作用域与闭包等。项目中计算器的求值逻辑正是对函数如何传参、返回、被组合调用的实战检验。在开始写代码前先明确运行方式把函数写进文本编辑器中的脚本文件或 HTML 的script标签里再通过console.log()打印函数返回值来验证结果。原文档给出了一个直接可用的调试范式console.log(my_max([1, 56, 2, 3, -1, 0])); // 输出 56也就是说任何自定义函数都可以通过把调用包进console.log()来观察其返回值。关于在 HTML 中正确引入脚本DOM_manipulation_and_events.md 有一个重要提醒如果把script放在head中DOM 节点尚未解析完成操作 DOM 的代码会失效最简单的办法是把脚本放到 HTML 底部或使用带defer属性的script src.../script。热身阶段三个函数把基本功打牢1.my_max()遍历数组求最大值function my_max(arr) { let max arr[0]; for (let i 1; i arr.length; i) { if (arr[i] max) { max arr[i]; } } return max; } console.log(my_max([1, 56, 2, 3, -1, 0])); // 56这个练习覆盖三个核心点参数传递把整个数组作为参数传入、遍历for循环逐个比较、return 返回值函数最终吐回最大数。关于参数与返回值的机制function_basics.md 中说明参数是函数声明括号里的占位符调用时传入的才是实际参数把my_max([...])直接嵌进console.log(...)函数返回值会就地作为console.log的参数使用无需先存入中间变量。2.vowel_count()统计字符串中的元音数题目要求统计AEIOUY这六个元音字母注意包含 Y。一个简洁的实现是利用indexOf或正则function vowel_count(str) { const vowels AEIOUYaeiouy; let count 0; for (let i 0; i str.length; i) { if (vowels.indexOf(str[i]) ! -1) { count; } } return count; } console.log(vowel_count(The Odin Project)); // 5e, o, i, o, e这里用到字符串的两个基础能力length取长度、indexOf查找字符是否存在二者都出现在 js_basics.md 的学习目标列表中。3.reverse()反转字符串题目示例reverse(this is a string)应返回gnirts a si siht。可以手写循环也可以组合内置方法function reverse(str) { let reversed ; for (let i str.length - 1; i 0; i--) { reversed str[i]; } return reversed; } // 更简洁的版本split → reverse → join function reverse(str) { return str.split().reverse().join(); } console.log(reverse(this is a string)); // gnirts a si sihtsplit()把字符串拆成字符数组、reverse()反转数组、join()再拼回字符串这一步也为后面数组方法组合的思维打下基础。正式项目构建屏幕计算器热身完成后正式任务是在浏览器里构建一个屏幕计算器on-screen calculator。原文档给出的 10 个步骤可以归纳为三块纯函数层、UI 与事件层、状态与求值层。第一步四个运算函数function add(a, b) { return a b; } function subtract(a, b) { return a - b; } function multiply(a, b) { return a * b; } function divide(a, b) { return a / b; } console.log(add(2, 3)); // 5 console.log(multiply(2, 3)); // 6这四个函数是整个计算器的计算引擎后续所有按钮操作最终都会归结为调用其中某一个。这也是课程刻意安排的理由先写出可独立测试的纯函数再让 UI 去调用它们避免把计算逻辑混在事件回调里。第二步用div网格铺出数字键盘用一组带数字标签的div组成 0–9 的按键网格。原文档特别注明这一步先不用 jQuery用最朴素的 DOM 方式完成。div idcalculator div classrow div classkey>div classkey onclickconsole.log(1)1/div方式二在 JS 中给 DOM 节点赋值onclick属性div idkey-1 classkey1/divconst key document.querySelector(#key-1); key.onclick function () { console.log(1); };DOM_manipulation_and_events.md 介绍了三种绑定事件的途径HTML 内联属性、on事件类型属性赋值、addEventListener()。前两种实现简单但每个元素只能挂一个onclickaddEventListener是更灵活的标准做法允许挂多个监听器还能配合forEach批量绑定const keys document.querySelectorAll(.key); keys.forEach(function (key) { key.addEventListener(click, function () { console.log(key.textContent); // 打印按键上的数字 }); });这里querySelectorAll返回的是 NodeList 而非数组但它的forEach已足够完成批量绑定。第四步加入运算符按键与屏幕雏形继续用div增加、-、*、/、和clear六个按钮。此时计算器仍然只做点击→打印这件事真正的难点在下一步。第五步保存状态并完成求值项目核心难点要让计算器工作起来需要回答三个问题用户按下的第一个数字存到哪——存进变量或数组用户选择了哪个运算——如加法用一个变量记录运算符按下后做什么——把两个数字和运算符交给第一步写好的add/multiply/divide/subtract求出结果并输出到控制台。一个经典的状态管理骨架如下let firstNumber null; let operator null; let secondNumber null; function pressNumber(value) { if (operator null) { firstNumber firstNumber null ? value : firstNumber * 10 value; } else { secondNumber secondNumber null ? value : secondNumber * 10 value; } console.log(firstNumber, secondNumber); } function pressOperator(op) { operator op; } function operate() { switch (operator) { case : return add(firstNumber, secondNumber); case -: return subtract(firstNumber, secondNumber); case *: return multiply(firstNumber, secondNumber); case /: return divide(firstNumber, secondNumber); } } function pressEquals() { const result operate(); console.log(result); // 将结果作为下一次计算的起点方便连续运算 firstNumber result; secondNumber null; operator null; }原文档坦言这需要一些练习才能把按钮的值传给你的主计算器函数它有点棘手但你能做到——这正是对初学者最有价值的挑战把界面事件与业务逻辑通过变量与函数调用衔接起来。补充说明课程在 project_calculator.md现代版计算器项目中特别警告不要使用eval()或new Function()去求值表达式原因是它们会执行传入的任意字符串代码存在安全隐患本项目的目的正是让你亲手写出operate()这类求值函数。第六步与clear的重置语义按下或clear时应清空所有已保存的变量与运算以便开始新一轮计算function clearAll() { firstNumber null; secondNumber null; operator null; }注意两种语义的区别求值后可以保留结果作为下一次运算的第一个数字支持12 7 19之后再- 1 18的连续计算而clear则是彻底清空、回到初始状态。第七步推送到 GitHub完成功能后把项目推送到自己的 GitHub 仓库并按要求在课程页面提交解决方案链接。这也是课程反复强调的工程习惯每个项目都应纳入版本管理为后续求职作品集积累素材。加分项两个有趣的进阶练习原文档提供了两个 extra credit1. 用 jQuery 实现屏幕显示如果你已经熟悉 jQuery可以加一个专门的div充当显示屏让数字和结果实时显示在屏幕上而不只是 console$(.key).on(click, function () { $(#screen).text($(#screen).text() $(this).text()); });这实际上是把结果输出到控制台升级为结果输出到页面是计算器从调试玩具走向真实产品的一步。2. 家长过滤器拦截不雅数字检查用户是否输入了诸如80085这类不成熟数字若有则给出严厉提示function isImmature(number) { return /(80085|5318008)/.test(String(number)); } function pressNumber(value) { // ...原有逻辑... if (isImmature(currentDisplay)) { console.log(嘿别乱按数字); } }这个练习的乐趣在于在状态更新的同时引入校验逻辑为后面输入合法性校验的工程实践做铺垫。从旧版项目到现代版让计算器真正健壮这份 project_js_basics.md 属于课程仓库中已归档的旧版 JavaScript 课程位于archive/old_lessons/javascript/同一项目的现代进化版是 project_calculator.md。对照两个版本可以清晰看到同样的核心任务四则运算函数、operate()求值、数字/运算符//clear按钮、显示更新被赋予了更严格的验收标准。如果你完成了旧版项目可以用这些陷阱清单自测陷阱场景要求连续输入12 7 - 1 每次只能求值一对数字即先算出12 7 19再做19 - 1 18除数为 0显示一条阴阳怪气的报错信息且不能让计算器崩溃结果很长的小数对结果做四舍五入避免溢出显示区域连按两次运算符不应被当作2 2求值只取最后输入的运算符显示结果后输入新数字应清空结果、开启新计算而不是把数字追加到结果后面过早按缺少数字或运算符时应安全处理不能出错现代版还增加了三点扩展方向小数点输入并防止12.3.56.5这类重复小数点、退格键撤销上一次输入、键盘支持监听keydown。这些正是把本项目推向可发布产品的完整路线图。相关课程资源索引本项目原始文档archive/old_lessons/javascript/project_js_basics.md前置知识课函数、对象、数组、作用域等archive/old_lessons/javascript/js_basics.md函数基础参数、返回值、作用域foundations/javascript_basics/function_basics.mdDOM 操作与事件选择器、创建元素、三种事件绑定方式foundations/javascript_basics/DOM_manipulation_and_events.md现代版计算器项目含全部健壮性要求与加分项foundations/javascript_basics/project_calculator.md数据类型与条件判断字符串方法、truthy/falsy、逻辑运算符foundations/javascript_basics/data_types_and_conditionals.md从三个热身函数到一台能完成四则运算的屏幕计算器这个项目完整覆盖了函数、数组、字符串、DOM、事件和状态管理六项 JavaScript 基本功。它刻意把计算逻辑与界面交互分开设计——先用纯函数把规则写对再通过事件把用户操作翻译成函数调用最后用变量保存中间状态串起完整流程。这套分离关注点的思路会在你后续接触更大型的 JavaScript 项目时反复出现。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考