ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

JavaScript 教程实战:用 if..else 判断输入——“JavaScript 官方名称“ 检查程序详解

JavaScript 教程实战:用 if..else 判断输入——“JavaScript 官方名称“ 检查程序详解 文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇实战指南以 en.javascript.infoModern JavaScript Tutorial教程中 if..else 分支 章节的经典练习题Check the standardThe name of JavaScript为切入点带领读者完成一个通过prompt获取用户输入、用if..else校验答案并输出反馈的完整小程序并逐行拆解仓库提供的官方参考实现。学完本文你将掌握if..else分支结构、布尔转换规则、字符串相等比较以及输入校验程序的基本写法并能读懂题目附带的流程控制示意图。题目与配套资源均位于仓库的 2-check-standard 目录下包括题目描述 task.md、参考实现 ifelse_task2/index.html、答案说明 solution.md 以及流程图 ifelse_task2.svg。一、题目解析程序要做什么题目的需求非常明确见 task.md使用if..else构造编写代码通过prompt弹窗询问用户What is the official name of JavaScript?JavaScript 的官方名称是什么如果用户输入的是ECMAScript则弹出Right!否则输入其他任何内容弹出You dont know? ECMAScript!。这道题考核的是条件分支中最基础、也最常用的一种场景根据用户输入做判断再决定输出不同的结果。它同时涉及三个知识点prompt的输入获取、字符串与字符串的相等比较、if..else的双路分支。值得一提的是这道题放在了教程 10-ifelse 章节中同章节还有另外两道配套练习1-if-zero-string 考察布尔转换、3-sign 考察多分支本文将在末尾做关联对比。二、仓库官方参考实现与逐行解读仓库在 ifelse_task2/index.html 中给出了完整可运行的参考实现这是该练习最权威的标准答案原文如下!DOCTYPE html html body script use strict; let value prompt(What is the official name of JavaScript?, ); if (value ECMAScript) { alert(Right!); } else { alert(You dont know? ECMAScript!); } /script /body /html逐行拆解这段代码use strict;开启严格模式。严格模式下代码更规范、更易于发现错误这是本教程全程推荐的做法。let value prompt(..., );调用prompt弹出输入框把用户输入的内容存入变量value。第二个参数是输入框的默认值这里传空字符串表示默认不预填内容。if (value ECMAScript)条件表达式使用相等运算符把用户输入与字符串字面量ECMAScript比较。相等时条件为真进入if分支。alert(Right!);输入正确时弹出的提示。else { ... }条件为假输入不是ECMAScript时执行的分支弹出You dont know? ECMAScript!。注意输出字符串中使用了双引号You dont know? ECMAScript!这是因为字符串内部含有一个单引号dont外层改用双引号可以避免转义冲突——这是 JavaScript 字符串引号选择的一个实用细节引号规则详见 string 类型 相关章节。2.1 为什么用而不是参考实现使用了。在严格相等的视角下prompt永远返回字符串因此value与ECMAScript类型一致与在这里结果完全相同。如果追求更严格的编码规范写成value ECMAScript同样正确且能杜绝类型转换带来的意外。理解这一点需要复习教程 09-comparison 中关于与的讨论在比较前会做类型转换则严格要求类型与值都相等。2.2 演示交互仓库为本题配置了交互演示标记[demo srcifelse_task2]见 task.md也就是 ifelse_task2/index.html 这个页面。读者可直接在浏览器中打开该 HTML 文件亲自体验输入 ECMAScript 与其他任意内容时的不同反馈验证分支逻辑的实际效果。三、if..else 语法速览本题用到的核心构造本题虽然短小却完整使用了if、代码块{}与else三个基础语法要素。教程 10-ifelse/article.md 对它们做了系统讲解要点如下3.1 if 语句if(...)会计算括号内的条件表达式若结果为真truthy则执行其后的代码块if (year 2015) alert(You are right!);如果要执行的语句不止一条必须用花括号{}包裹成一个代码块if (year 2015) { alert(Thats correct!); alert(Youre so smart!); }教程明确建议即使if后只有一条语句也坚持用花括号包裹这能显著提升可读性并避免日后追加语句时遗漏括号。3.2 布尔转换规则if (...)会把括号内表达式的计算结果转换为布尔值。根据类型转换规则见 07-type-conversions数字0、空字符串、null、undefined、NaN都会被转为false称为falsy假值其余值都会转为true称为truthy真值。所以if (0) { // 0 是假值永远不会执行 ... } if (1) { // 1 是真值总是会执行 ... }回到本题value ECMAScript是一个布尔表达式它的结果本身就是true或false直接作为if的条件即可无需再手动转换。这也符合教程推荐的写法——可以把预先算好的布尔值直接传给iflet cond (year 2015); // 相等比较的结果就是 true 或 false if (cond) { ... }3.3 else 子句与 else if 链if可以带可选的else子句当条件为假时执行if (year 2015) { alert(You guessed it right!); } else { alert(How can you be so wrong?); // 除 2015 外的任何值 }当需要判断多个条件时可以使用else if链if (year 2015) { alert(Too early...); } else if (year 2015) { alert(Too late); } else { alert(Exactly!); }JavaScript 会按顺序依次检查每个条件只要某个条件为真就执行对应分支并跳过其余分支最后的else是可选兜底。本题恰好只用到最基础的单条件 else形态是理解else if链之前的最佳热身。四、程序执行流程与流程控制图题目配有一张流程图 ifelse_task2.svg直观描绘了程序的完整执行路径流程可以概括为Begin开始程序启动菱形判断框 Whats the official name of JavaScript?弹出prompt获取用户输入并对输入执行条件判断条件为 ECMAScript真沿右侧分支走到 Right! 提示框流程结束其他输入假沿左侧 Other 分支走到 You dont know? ECMAScript! 提示框流程结束。这张图把输入 → 判断 → 双分支输出的线性流程可视化是理解if..else分支语义的经典示意任意时刻程序只会沿着一条路径执行到底。五、深入理解把程序再往深处想官方答案满足了题目要求但作为学习材料我们可以在此基础上做几处合理的推敲帮助加深对 JavaScript 比较与分支的理解以下均为基于既有知识点的教学延伸非题目强制要求1. 大小写与空白问题。用户如果输入ecmascript或ECMAScript带尾随空格比较都会失败并提示 You dont know?。若想更宽容可以预先对输入做处理如去掉首尾空白、统一大小写再比较。这与字符串处理相关可参考 03-string 章节的trim()、toLowerCase()方法。2. 用条件运算符?改写。教程 10-ifelse/article.md 指出条件问号运算符适合根据条件返回某个值的场景。本题的if..else两个分支各执行一条alert不产生返回值属于按条件执行不同代码的情形官方推荐继续使用if若强行改写为?形式如value ECMAScript ? alert(Right!) : alert(You dont know? ECMAScript!);虽然能跑但可读性较差不符合教程?用来返回值、if用来执行分支的建议。3. 空输入与取消输入。用户点击取消时prompt返回nullnull ECMAScript为假会落入else分支——这在题目语境下是合理的兜底行为。六、同章节延伸练习从双分支到多分支本题是 10-ifelse 章节三道练习中最基础的双分支题另外两道恰好形成梯度递进1-if-zero-stringif (0)会弹出提示吗考察布尔转换规则。0是非空字符串属于 truthy因此alert(Hello)会被执行。对比本题它提醒我们字符串0与数字0的布尔语义截然不同。3-sign显示符号要求用if..else根据输入数字输出1大于零、-1小于零、0等于零需要把else if链串联使用是本题单条件双分支的自然进阶。建议按本练习 → if-zero-string → sign的顺序依次完成即可系统掌握if..else从布尔转换到多分支的全部基础能力。七、小结通过这道 The name of JavaScript 练习题我们完成了用prompt获取用户输入并存入变量用if..else对输入与ECMAScript做相等比较实现双路分支输出结合仓库官方实现 ifelse_task2/index.html 与流程图 ifelse_task2.svg 理解执行路径复习了if语法、花括号规范、布尔转换规则以及else/else if的语义。完整的教程原文可继续研读 10-ifelse/article.md其中还包含条件运算符?、多重?等进阶内容把本篇练习与教程正文配合阅读即可扎实掌握 JavaScript 条件分支的完整知识面。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐React Absolute Grid高级配置掌握dragEnabled、zoom与animation属性React Absolute Grid高级配置掌握dragEnabled、zoom与animation属性 React Absolute Grid是一个功能强ArkTS插件架构解析Nailys ArkTS Support如何实现语言服务器ArkTS插件架构解析Nailys ArkTS Support如何实现语言服务器 Nailys ArkTS Support是一款专为VSCode打造的鸿蒙开发工具IDE代码编辑器OpenHarmony掌握ink条件逻辑从基础if/else到高级多重条件判断的完整指南掌握ink条件逻辑从基础if/else到高级多重条件判断的完整指南 ink作为一款强大的互动叙事脚本语言其条件逻辑系统为创作者提供了构建复杂剧情分支的核心工游戏开发编程语言上一篇fastHan模型架构深度剖析基于BERT的多任务联合学习原理下一篇Object.isFrozen兼容性Mars中的对象冻结跨平台方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表