WEB前端教程：“如果”可以“重来”

掌握 JavaScrip 隐式转换场景和常见假值类别

课程目标

掌握 JavaScrip 隐式转换场景和常见假值类别
学习 JavaScript 流程控制基础知识，重点掌握选择结构和循环结构

隐式转换和假值

在学习条件判断和循环语句之前，我们先了解布尔隐式转换是如何发生的。比如如下代码：

const condition1 = "Sam";
const condition2 = 0;

if (condition1) {
  console.log("第一个添加条件为真");
}

if (condition2) {
  console.log("第二个条件为真");
}

上面的代码只会输出第一个添加条件为真。让我们看看为什么。

当 JavaScript 需要一个布尔值但被赋予一个非布尔值时，就会发生隐式转换。因此 if 语句需要一个布尔值。但是，当您为它提供另一种类型的值时，它会自动将其转换为布尔值。

转换规则为：假值值转换为 false. 其他所有内容都转换为 true.

JavaScript 中常见假值：

false
null
undefined
0
NaN
""

如下为完整假值列表

假值 | MDN(opens new window)

以上只谈论了布尔隐式转换场景，阅读下面材料学习 JavaScript 更全面隐式转换知识：

条件判断

阅读

值的比较(opens new window)
W3School JavaScript 条件(opens new window)
MDN 在代码中做决定 - 条件语句(opens new window)
条件分支：if 和 '?'(opens new window)
W3School (opens new window)从 if-else 看到异常
MDN (opens new window)阅读完 JavaScript 第一步及 JavaScript 基础要件

编码一

编写程序实现标准体重判断：开发一款软件，根据国际肥胖指标 BMI 指数判断一个人的体型.BMI = 体重/身高的平方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>请输入您的身高:</label><input type="text" >
    <br>
    <label>请输入您的体重:</label><input type="text" >
    <br>
    <button>开始测量您的体型</button>
    <p id="result"></p>
    <script>
        //在这里实现编写您的代码
    </script>
</body>
</html>

需求说明

实现当点击开始测量您的体型按钮时，将用户输入的实际体重和体重计算 BMI 值,然后提示结果在 id 为 reslut 的 p 标签中。
如果 BMI 值低于 18.5 ,体重过轻，就提示您是偏瘦体型，可以适当增肥咯
如果 BMI 值在 18.5-25 之间，属于正常体型，就提示您是标准体型，保持的不错哟
如果 BMI 值在 25-28 之间，就属于有点重，就提示您是微胖体型，可以多吃粗粮，让饮食结构更加健康吧！
如果 BMI 值在 28-32 之间，就属于重了，就提示您是肥胖体型，管住嘴迈开腿开始减肥吧！
如果 BMI 值大于 32，就属于严重超重了，就提示您是肥胖体型，管住嘴迈开腿开始减肥吧！
如果实际体重小于标准体重，并且差值大于 10kg，就提示您是过重体型，已经影响健康了，需要重视自己的饮食管理了

编码二

基于上一个任务，利用 switch 语句重写上面的任务

编码三

根据用户输入的数据，判断水仙花数（三位数），水仙花数是指一个 n 位数 ( n≥3 )，它的每个位上的数字的 n 次幂之和等于它本身。

<label>请输需要判断的水仙花数(三位数):</label><input type="text" >
<br>
<button>开始判断</button>
<script>
function  numDaffodils(num) {
      // 判断是否为水仙花数
}
</script>

需求说明

当点击开始判断按钮，就执行 numDaffodils 函数判断输入的数字是否为水仙花数.
如果是，就弹出提示框提示是水仙花数，如果不是，就提示不是水仙花数
例如输入 153，153=1 _ 1 _ 1+5 _ 5 _ 5+3 _ 3 _ 3 ,是水仙花数，就提示 153 是水仙花数。
请加入输入判断，必须输入数字，不能输入其他类型。

循环语句

阅读

通过除 2 取余的方法来把十进制整数转化为二进制 (opens new window)，然后做一个小练习，基于下面代码，完成该转化算法，并实现页面交互。
MDN 循环吧代码(opens new window)

编码一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>
<body>
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
}

// 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
// Some coding

    </script>
</body>
</html>

需求说明

实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在 result 的 p 标签内

编码二

基于上一个任务，继续完成更多需求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>
<body>
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
    // 这里是上一个任务的实现
}

// 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
// 新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如
// dec-number为5，bin-bit为5，则转化后数字为00101
// 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
// Some coding

    </script>
</body>
</html>

需求说明

新的需求是，转化显示后的二进制数为 bin-bit 中输入的数字宽度，例如
dec-number 为 5 ，bin-bit 为 5 ，则转化后数字为 00101
如果 bin-bit 小于转化后的二进制本身位数，则使用原本的位数，如 dec-number 为 5 ，bin-bit 为 2 ，依然输出 101 ，但同时在 console 中报个错。

编码三

3 的小游戏，练习使用循环和条件语句，实现如下需求：

从 1 到 100 ，以此在 console 输出各数字，但是，当数字为 3 的倍数或者含有 3 的时候，输出“PA”
比如：1,2,PA,4,5,PA,……,11,PA,PA,14,PA……

编码四

小练习，练习使用循环实现一个九九乘法表

第一步，最低要求：在 Console 中按行输出 n * m = t
然后，尝试在网页中，使用 table 来实现一个九九乘法表

编码五

今天最后一个练习，在你的简历中，实现一个，当用户访问页面的时候，根据当前时间，在页面中输出不同的问候语。

比如早上的时候，输出早上好，晚上的时候是晚上好。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-21 12:05
阅读 ( 347 )
分类：WEB前端开发