教程示例工程【免费下载链接】learning-areaGitHub repo for the MDN Learning Area.项目地址https://gitcode.com/gh_mirrors/le/learning-area点击查看免费下载导读本文围绕 learning-area 仓库中 javascript/building-blocks/tasks/functions/marking.md 这份函数任务评测指南展开系统拆解四道 JavaScript 函数练习题的目标、思路与参考答案并结合仓库内真实的任务页面源码验证运行机制。读完本文你将掌握函数声明、参数传递、返回值、Canvas 绘图函数与箭头函数等核心概念的实战用法并能独立完成并校验这组 MDN 学习任务。任务背景与评测机制这组任务旨在验证学习者是否理解 MDN《Learn Web Development》中三个函数的系列课程内容函数——可复用代码块Functions — reusable blocks of code、构建你自己的函数Build your own function以及函数返回值Function return values。四道任务由浅入深从创建并调用一个简单函数逐步推进到重构复用 返回值的函数和箭头函数表达式。值得注意的是评测指南开篇给出的提示如果代码中存在错误错误信息会输出到页面上的结果面板results panel中帮助学习者定位问题在可下载版本中错误则会输出到浏览器 JavaScript 控制台。这个机制在仓库中确实有源码支撑——playable.js 中的fillCode()函数使用eval()执行编辑区代码并用try/catch捕获运行时错误后渲染到结果区function fillCode() { editable.textContent textareaJS.value; section.innerHTML ; try { eval(editable.textContent); } catch(e) { let para document.createElement(p); para.textContent e; section.appendChild(para); } }同时input事件与load事件都会触发fillCode()意味着在文本域中每敲入一个字符代码都会即时重新执行并刷新预览这是实现即时评测反馈的关键。Task 1创建函数、调用一次把随机名字写入段落任务要求第一题要求创建一个简单的函数从给定的名字数组中随机挑出一个名字写入页面提供的p段落然后调用该函数一次。这道题考察的是函数声明 函数调用的最基本形态函数体内通过Math.random()生成随机索引再从数组取值并更新 DOM。参考解法const names [ Chris, Li Kang, Anne, Francesca, Mustafa, Tina, Bert, Jada, ]; const para document.querySelector(p); function chooseName() { const randomNumber Math.floor(Math.random() * names.length); const choice names[randomNumber]; para.textContent choice; } chooseName();关键点拆解Math.random()返回[0, 1)区间的浮点数乘以names.length8后得到[0, 8)的浮点数再经Math.floor()向下取整得到0 ~ 7的整数索引恰好覆盖数组全部下标para.textContent choice将选中名字写入段落文本这是对 DOM 的最基础操作函数定义后必须显式调用chooseName()否则函数体不会执行。仓库中的任务脚手架在线版 functions1.html 已预先给出names数组与para段落对象学习者在// Add your code here注释处补充函数定义即可文件末尾的section.innerHTML ; section.appendChild(para);属于评测基础设施用于重置预览区。可下载版 functions1-download.html 则将section的获取放在代码之后供脱离在线编辑器独立运行。Task 2带五个参数的 Canvas 绘图函数任务要求第二题要求编写一个函数在给定的canvas上绘制一个矩形函数接收五个输入变量x、y、width、height和color。指南特别强调绘制前要先清空画布否则在线版本在代码更新时会不断叠加矩形画面会越来越乱。参考解法const canvas document.querySelector(canvas); const ctx canvas.getContext(2d); const x 50; const y 60; const width 100; const height 75; const color blue; function drawSquare(x, y, width, height, color) { ctx.fillStyle white; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle color; ctx.fillRect(x, y, width, height); } drawSquare(x, y, width, height, color);这道题的价值在于理解参数化函数getContext(2d)拿到 2D 绘图上下文所有绘制操作都通过ctx完成函数先用白色填充整个画布fillRect(0, 0, canvas.width, canvas.height)实现清屏再用目标颜色绘制指定位置与尺寸的矩形两段fillStyle的设置体现了先设样式、再执行绘制的 Canvas 固定套路形参函数定义处的x, y, width, height, color与实参调用处的x, y, width, height, color同名恰好示范了参数从调用方传递到函数体内的映射关系初学者最容易在这里困惑函数内部使用的是形参与外部变量同名也只是巧合或刻意为之二者互不干扰。仓库中的任务脚手架functions2.html 提供了 480×320 的画布带 1px 黑色边框样式以及五个变量定义学习者只需补全drawSquare函数并调用。在线编辑机制与 Task 1 相同均由 playable.js 驱动下载版 functions2-download.html 结构一致可独立在浏览器中打开调试。Task 3重构升级——拆分随机函数与返回值任务要求第三题回到 Task 1 的场景要求做三处改进这也是本组任务的核心题把生成随机数的逻辑抽取为独立函数接收两个通用边界参数最小值、最大值并返回结果改造chooseName()让它调用随机数函数、接收要选择的数组作为参数提升灵活性并返回结果把返回结果打印到段落中。参考解法const names [ Chris, Li Kang, Anne, Francesca, Mustafa, Tina, Bert, Jada, ]; const para document.querySelector(p); function random(min, max) { const num Math.floor(Math.random() * (max - min)) min; return num; } function chooseItem(array) { const choice array[random(0, array.length)]; return choice; } para.textContent chooseItem(names);这道题浓缩了函数式重构的精髓random(min, max)是通用工具函数Math.random() * (max - min)产生[0, max-min)区间浮点数加min后落入[min, max)Math.floor取整得到[min, max-1]的整数return num把结果交还调用方chooseItem(array)把数组本身作为参数与names全局变量解耦将来换数组复用零成本它通过random(0, array.length)生成合法下标并return choice最终一行para.textContent chooseItem(names)展示了函数返回值的流向chooseItem的返回值直接作为textContent的赋值源无需中间变量。相比 Task 1这里函数从操作全局变量 无返回值进化为纯输入输出模式——参数进、返回值出代码可读性与可测试性显著提升这正是 MDN 课程中函数返回值章节的核心思想。任务脚手架见 functions3.html 与 functions3-download.html。Task 4把命名函数改写为箭头函数任务要求第四题要求把具名的isShort()函数改写成箭头函数表达式。在改写前原代码用names.filter(isShort)筛选出长度小于 5 的名字function isShort(name) { return name.length 5; } const shortNames names.filter(isShort);参考解法const names [ Chris, Li Kang, Anne, Francesca, Mustafa, Tina, Bert, Jada, ]; const para document.createElement(p); const shortNames names.filter((name) name.length 5); para.textContent shortNames;改写要点箭头函数(name) name.length 5把形参 返回表达式压缩为一行单参数可省略括号单表达式可省略{}与return隐式返回表达式结果直接把箭头函数内联进filter调用省略了中间命名函数体现了箭头函数作为高阶函数回调时的简洁性值得一提的是para.textContent shortNames会把数组隐式转换为逗号分隔的字符串如Chris, Anne, Tina写入段落这是数组参与的隐式类型转换行为可作为附加知识点向学习者讲解。注意此题的下载版 functions4-download.html 保留了原始的isShort命名函数版本而在线版 functions4.html 同样以isShort版本作为起始代码学习者需自行将其替换为箭头函数——这与评测指南中改为箭头函数表达式的要求一致体现就地改写的意图。四道任务的知识点脉络总结任务考察核心关键语法/APITask 1函数声明与调用、操作 DOMfunction chooseName()、Math.random()、Math.floor()、textContentTask 2参数化函数、Canvas 基础绘制getContext(2d)、fillStyle、fillRect、形参与实参Task 3函数拆分重构、返回值return、参数抽象、函数组合chooseItem(random(...))Task 4箭头函数表达式、高阶函数回调names.filter((name) ...)、隐式返回从评测视角看四道题全部可以在仓库的在线编辑器由 playable.js 与 styles.css 提供排版与即时求值能力中直接作答并看到运行结果也可以下载对应的-download.html文件在本地浏览器控制台调试。若你在作答时遇到输出与预期不符请优先检查结果面板或控制台中的报错信息——这正是评测指南提示的排错路径。延伸阅读评测指南原文marking.md在线任务页functions1.html、functions2.html、functions3.html、functions4.html可下载版本functions1-download.html、functions2-download.html、functions3-download.html、functions4-download.html交互评测引擎与样式playable.js、styles.css赞分享教程示例工程【免费下载链接】learning-areaGitHub repo for the MDN Learning Area.项目地址https://gitcode.com/gh_mirrors/le/learning-area点击查看免费下载相关推荐备份QQ空间历史说说只需3步用GetQzonehistory把互动记录搬回本地硬盘备份QQ空间历史说说只需3步用GetQzonehistory把互动记录搬回本地硬盘 QQ空间官方从来没给过数据导出入口。我有个朋友账号申诉找回后几年的互动列网页爬虫数据分析learning-area 项目 JavaScript 数组实战任务与评分指南详解Arrays 四道题全解析learning area 项目 JavaScript 数组实战任务与评分指南详解Arrays 四道题全解析 导读 本文以 MDN Learning Ar教程示例工程CSS数学函数浏览器支持MDN Learning Area兼容性表格与解决方案CSS数学函数浏览器支持MDN Learning Area兼容性表格与解决方案 你是否曾因CSS数学函数在不同浏览器表现不一致而头疼本文基于MDN Lear教程示例工程上一篇在 Raspberry Pi 4/5 上用 PyTorch 实现 30~40 FPS 的实时图像分类推理下一篇使用 nixpkgs 的 make-disk-image 构建 NixOS 磁盘镜像参数详解、分区布局与源码级实现剖析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考