JavaScript基础—运算符、表达式和语句、分支语句、循环语句、综合案例-ATM存取款机

版本说明

当前版本号[20231125]。

版本修改说明
20231125初版

目录

文章目录

  • 版本说明
  • 目录
  • JavaScript 基础 - 第2天
    • 运算符
      • 算术运算符
      • 赋值运算符
      • 自增/自减运算符
      • 比较运算符
      • 逻辑运算符
      • 运算符优先级
    • 语句
      • 表达式和语句
      • 分支语句
        • if 分支语句
        • if双分支语句
        • if 多分支语句
        • 三元运算符(三元表达式)
        • switch语句(了解)
        • 断点调试
      • 循环语句
        • while循环
        • 中止循环
        • 无限循环
    • 综合案例-ATM存取款机

JavaScript 基础 - 第2天

理解什么是流程控制,知道条件控制的种类并掌握其对应的语法规则,具备利用循环编写简易ATM取款机程序能力

  • 运算符
  • 语句
  • 综合案例

运算符

算术运算符

数字是用来计算的,比如:乘法 * 、除法 / 、加法 + 、减法 - 等等,所以经常和算术运算符一起。

算术运算符:也叫数学运算符,主要包括加、减、乘、除、取余(求模)等

运算符作用
+求和
-求差
*求积
/求商
%取模(取余数),开发中经常用于作为某个数字是否被整除

注意:在计算失败时,显示的结果是 NaN (not a number)

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20// 1. 取模(取余数)  使用场景:  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3// 2. 注意事项 : 如果我们计算失败,则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2

赋值运算符

赋值运算符:对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符作用
+=加法赋值
-+减法赋值
*=乘法赋值
/=除法赋值
%=取余赋值
<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>

自增/自减运算符

符号作用说明
++自增变量自身的值加1,例如: x++
自减变量自身的值减1,例如: x–
  1. ++在前和++在后在单独使用时二者并没有差别,而且一般开发中我们都是独立使用
  2. ++在后(后缀式)我们会使用更多

注意:

  1. 只有变量能够使用自增和自减运算符
  2. ++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x
<script>// let num = 10// num = num + 1// num += 1// // 1. 前置自增// let i = 1// ++i// console.log(i)// let i = 1// console.log(++i + 1)// 2. 后置自增// let i = 1// i++// console.log(i)// let i = 1// console.log(i++ + 1)// 了解 let i = 1console.log(i++ + ++i + i)</script>

比较运算符

使用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)

运算符作用
>左边是否大于右边
<左边是否小于右边
>=左边是否大于或等于右边
<=左边是否小于或等于右边
===左右两边是否类型都相等(重点)
==左右两边是否相等
!=左右值不相等
!==左右两边是否不全等
<script>console.log(3 > 5)console.log(3 >= 3)console.log(2 == 2)// 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值console.log(2 == '2')  // true// console.log(undefined === null)// === 全等 判断 值 和 数据类型都一样才行// 以后判断是否相等 请用 ===  console.log(2 === '2')console.log(NaN === NaN) // NaN 不等于任何人,包括他自己console.log(2 !== '2')  // true  console.log(2 != '2') // false console.log('-------------------------')console.log('a' < 'b') // trueconsole.log('aa' < 'ab') // trueconsole.log('aa' < 'aac') // trueconsole.log('-------------------------')
</script>

逻辑运算符

使用场景:可以把多个布尔值放到一起运算,最终返回一个布尔值

符号名称日常读法特点口诀
&&逻辑与并且符号两边有一个假的结果为假一假则假
||逻辑或或者符号两边有一个真的结果为真一真则真
!逻辑非取反true变false false变true真变假,假变真
ABA && BA || B!A
falsefalsefalsefalsetrue
falsetruefalsetruetrue
truefalsefalsetruefalse
truetruetruetruefalse
<script>// 逻辑与 一假则假console.log(true && true)console.log(false && true)console.log(3 < 5 && 3 > 2)console.log(3 < 5 && 3 < 2)console.log('-----------------')// 逻辑或 一真则真console.log(true || true)console.log(false || true)console.log(false || false)console.log('-----------------')// 逻辑非  取反console.log(!true)console.log(!false)console.log('-----------------')let num = 6console.log(num > 5 && num < 10)console.log('-----------------')</script>

运算符优先级

image-20231123152548061

逻辑运算符优先级: !> && > ||

语句

表达式和语句

67101792498

分支语句

分支语句可以根据条件判定真假,来选择性的执行想要的代码

分支语句包含:

  1. if分支语句(重点)
  2. 三元运算符
  3. switch语句
if 分支语句

语法:

if(条件表达式) {// 满足条件要执行的语句
}

小括号内的条件结果是布尔值,为 true 时,进入大括号里执行代码;为false,则不执行大括号里面代码

小括号内的结果若不是布尔类型时,会发生类型转换为布尔值,类似Boolean()

如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~

<script>// 单分支语句// if (false) {//   console.log('执行语句')// }// if (3 > 5) {//   console.log('执行语句')// }// if (2 === '2') {//   console.log('执行语句')// }//  1. 除了0 所有的数字都为真//   if (0) {//     console.log('执行语句')//   }// 2.除了 '' 所有的字符串都为真 true// if ('pink老师') {//   console.log('执行语句')// }// if ('') {//   console.log('执行语句')// }// // if ('') console.log('执行语句')// 1. 用户输入let score = +prompt('请输入成绩')// 2. 进行判断输出if (score >= 700) {alert('恭喜考入黑马程序员')}console.log('-----------------')</script>
if双分支语句

如果有两个条件的时候,可以使用 if else 双分支语句

if (条件表达式){// 满足条件要执行的语句
} else {// 不满足条件要执行的语句
}

例如:

 <script>// 1. 用户输入let uname = prompt('请输入用户名:')let pwd = prompt('请输入密码:')// 2. 判断输出if (uname === 'pink' && pwd === '123456') {alert('恭喜登录成功')} else {alert('用户名或者密码错误')}</script>
if 多分支语句

使用场景: 适合于有多个条件的时候

 <script>// 1. 用户输入let score = +prompt('请输入成绩:')// 2. 判断输出if (score >= 90) {alert('成绩优秀,宝贝,你是我的骄傲')} else if (score >= 70) {alert('成绩良好,宝贝,你要加油哦~~')} else if (score >= 60) {alert('成绩及格,宝贝,你很危险~')} else {alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')}</script>
三元运算符(三元表达式)

使用场景: 一些简单的双分支,可以使用 三元运算符(三元表达式),写起来比 if else双分支 更简单

符号:? 与 : 配合使用

语法:

条件 ? 表达式1 : 表达式2

例如:

// 三元运算符(三元表达式)
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2 // 2. 执行过程 
// 2.1 如果条件为真,则执行表达式1
// 2.2 如果条件为假,则执行表达式2// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')// let age = 18 
// age = age + 1
//  age++// 1. 用户输入 
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)
switch语句(了解)

使用场景: 适合于有多个条件的时候,也属于分支语句,大部分情况下和 if多分支语句 功能相同

注意:

  1. switch case语句一般用于等值判断, if适合于区间判断
  2. switchcase一般需要配合break关键字使用 没有break会造成case穿透
  3. if 多分支语句开发要比switch更重要,使用也更多

例如:

// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }<script>switch (2) {case 1:console.log('您选择的是1')break  // 退出switchcase 2:console.log('您选择的是2')break  // 退出switchcase 3:console.log('您选择的是3')break  // 退出switchdefault:console.log('没有符合条件的')}
</script>
断点调试

**作用:**学习时可以帮助更好的理解代码运行,工作时可以更快找到bug

浏览器打开调试界面

  1. 按F12打开开发者工具
  2. 点到源代码一栏 ( sources )
  3. 选择代码文件

**断点:**在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来

循环语句

使用场景:重复执行 指定的一段代码,比如我们想要输出10次 ‘我学的很棒’

学习路径:

1.while循环

2.for 循环(重点)

while循环

while : 在…. 期间, 所以 while循环 就是在满足条件期间,重复执行某些代码。

语法:

while (条件表达式) {// 循环体    
}

例如:

// while循环: 重复执行代码// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦,毕业时候见英雄'
let i = 1
while (i <= 3) {document.write('月薪过万不是梦,毕业时候见英雄~<br>')i++   // 这里千万不要忘了变量自增否则造成死循环
}

循环三要素:

1.初始值 (经常用变量)

2.终止条件

3.变量的变化量

例如:

<script>// // 1. 变量的起始值// let i = 1// // 2. 终止条件// while (i <= 3) {//   document.write('我要循环三次 <br>')//   // 3. 变量的变化量//   i++// }// 1. 变量的起始值let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {document.write('我要循环三次 <br>')// 3. 变量的变化量i++
}</script>
中止循环

break 中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)

continue 中止本次循环,一般用于排除或者跳过某一个选项的时候

<script>// let i = 1// while (i <= 5) {//   console.log(i)//   if (i === 3) {//     break  // 退出循环//   }//   i++// }let i = 1while (i <= 5) {if (i === 3) {i++continue}console.log(i)i++}</script>
无限循环

1.while(true) 来构造“无限”循环,需要使用break退出循环。(常用)

2.for(;😉 也可以来构造“无限”循环,同样需要使用break退出循环。

// 无限循环  
// 需求: 页面会一直弹窗询问你爱我吗?
// (1). 如果用户输入的是 '爱',则退出弹窗
// (2). 否则一直弹窗询问// 1. while(true) 无限循环
// while (true) {
//   let love = prompt('你爱我吗?')
//   if (love === '爱') {
//     break
//   }
// }// 2. for(;;) 无限循环
for (; ;) {let love = prompt('你爱我吗?')if (love === '爱') {break}
}

综合案例-ATM存取款机

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

分析:

①:提示输入框写到循环里面(无限循环)

②:用户输入4则退出循环 break

③:提前准备一个金额预先存储一个数额 money

④:根据输入不同的值,做不同的操作

​ (1) 取钱则是减法操作, 存钱则是加法操作,查看余额则是直接显示金额

​ (2) 可以使用 if else if 多分支 来执行不同的操作

完整代码:

<script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100
while (true) {let re = +prompt(`
请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)// 2. 如果用户输入的 4 则退出循环, break  写到if 里面,没有写到switch里面, 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}
}
</script>

多分支 来执行不同的操作

完整代码:

<script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100
while (true) {let re = +prompt(`
请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)// 2. 如果用户输入的 4 则退出循环, break  写到if 里面,没有写到switch里面, 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/171065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring事务管理快速入门(以转账为例)

spring事务管理&#xff08;以转账为例&#xff09; 概述 Spring事务管理提供了一种在应用程序中管理事务的机制&#xff0c;它抽象了底层的事务管理细节&#xff0c;使得开发者可以更加专注于业务逻辑的实现&#xff0c;而不必过多关心事务的处理。以下是Spring事务管理的一…

Kotlin学习——kt里的集合List,Set,Map List集合的各种方法之Int篇

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…

Win10/Win11 使用Wsl的Ubuntu 子系统搭建CGO环境,相当于Ubuntu下开发。GO环境CGO搭建,支持交叉编译

背景&#xff1a; 之前是使用Mac 开发&#xff0c;最近切换到win11下面。发现使用cgo编译有问题。 下面记载了我的使用方法。 环境&#xff1a; win11&#xff08;win10理论一样&#xff09; win11 安装了wsl2的环境&#xff0c;并且安装了ubuntu系统。 在win11 上面安装了g…

vue3(二)-基础入门

一、列表渲染 of 和 in 都是一样的效果 html代码&#xff1a; <div id"app"><ul><li v-for"item of datalist">{{ item }}</li></ul><ul><li v-for"item in dataobj">{{ item }}</li></u…

Flask,uWSGI,nginx的理解

文章目录 前言与背景理解 - FlaskuWSGInginx理解 - nginx理解 - FlaskuWSGI理解 - vuedjangonginx 前言与背景 此篇文章是针对小白的一篇理解Flask&#xff0c;uWSGI&#xff0c;nginx的文章&#xff0c;只介绍了理解&#xff0c;并没有介绍如何部署。 由于工作需要使用flask…

npm pnpm yarn(包管理器)的安装及镜像切换

安装Node.js 要安装npm&#xff0c;你需要先安装Node.js。 从Node.js官方网站&#xff08;https://nodejs.org&#xff09;下载并安装Node.js。 根据你的需要选择相应的版本。 一路Next&#xff0c;直到Finish 打开CMD&#xff0c;输入命令来检查Node.js和npm是否成功安装 nod…

Gin 学习笔记02-参数获取

Gin 参数获取 1、获取url 参数2、获取动态 url 参数3、获取 form 表单数据 1、获取url 参数 Query()GetQuery()QueryMap()DefaultQuery() package mainimport ("fmt""github.com/gin-gonic/gin""net/http" )func _query(c *gin.Context) {// 1…

Docker Swarm总结+基础、集群搭建维护、安全以及集群容灾(1/4)

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…

【WSA】无法打开 适用于 Android™ 的 Windows 子系统,因为它处于脱机状态。可能缺少存储设备,或者存储设备已断开连接。

问题描述 之前可以正常使用适用于 Android™ 的 Windows 子系统&#xff08;WSA&#xff09;&#xff0c;但突然间无法启动了。 当尝试启动WSA中的软件时&#xff0c;都会出现以下错误提示&#xff1a; 无法打开 适用于 Android™ 的 Windows 子系统&#xff0c;因为它处于脱…

chrome driver 截图和填表

昨天突然有一个需求&#xff08;自己的&#xff09;&#xff0c;想把某个网站题目主体部分翻译并保存成图片&#xff0c;开始时用了国内网站的翻译&#xff08;人工、简单翻译&#xff09;&#xff0c;后来发现很多地方翻译的不尽人意&#xff0c;于是只好用翻译插件对原始网站…

2311skia,04绘制路径

分析Skia绘画路径代码 绘画路径尽管使用频率相对绘画图像,绘画文本低,但却是非常重要的一个基本特性.所有不规则图形(椭圆,圆角矩形,三角形,简单的文字),最后都要绘画路径. 而且,若自己实现一个2D引擎,这块内容是很有参考意义的,用OpenGL,都很少关注采样图像了,对对坐标就好. …

cjson库打包数据实现方法

使用 cJson 库&#xff0c;在C语言环境下&#xff0c;打包一个cJson字符串&#xff1a; int CreateArryJsonString(void) {cJSON *cJsonArr cJSON_CreateArray();cJSON *sJsonObj1 cJSON_CreateObject();cJSON_AddStringToObject(sJsonObj1, "test1", "test1…

动态规划学习——子序列问题

目录 ​编辑 一&#xff0c;最长定差子序列 1.题目 2&#xff0c;题目接口 3&#xff0c;解题思路及其代码 一&#xff0c;最长定差子序列 1.题目 给你一个整数数组 arr 和一个整数 difference&#xff0c;请你找出并返回 arr 中最长等差子序列的长度&#xff0c;该子序列…

机器学习【03】在本地浏览器使用远程服务器的Jupyter Notebook【conda环境】

1.激活虚拟环境 conda activate 虚拟环境名字2.虚拟环境下安装jupyter notebook pip install jupyter3.配置 jupyter 文件 在 Jupyter Notebook 的配置目录中生成一个配置文件 jupyter_notebook_config.py jupyter notebook --generate-config3.设置密码 jupyter notebook …

C/C++ 常用加密与解密算法

计算机安全和数据隐私是现代应用程序设计中至关重要的方面。为了确保数据的机密性和完整性&#xff0c;常常需要使用加密和解密算法。C是一种广泛使用的编程语言&#xff0c;提供了许多加密和解密算法的实现。本文将介绍一些在C中常用的加密与解密算法&#xff0c;这其中包括Xo…

[vxe-table] vxe-table-column配合v-if导致列样式与位置错乱

<vxe-table-column v-if"pageInfo.id 4 ||pageInfo.id 8" title"上报类型" width"100" key1><template v-slot"{row}"><span>咨询工具</span></template> </vxe-table-column>//或者<vxe-ta…

操作NAND flash W25N01G

文章目录 W25N01G1 描述2 特点3 封装3.3.2 连接线 4 引脚/CSDO/WP/Hold SPI指令标准SPI命令双SPI四元SPI命令写保护 5 地址PA与PC最后一个扇区 OTP寄存器1块保护清除块保护指令* WP-E 寄存器2寄存器3BUSYP-FAILE-FAILECC位 8 命令8.1 装置ID 指令解读写状态寄存器 注意内容上拉…

Java,File类与IO流,处理流:缓冲流、转换流、数据流、对象流

目录 处理流之一&#xff1a;缓冲流 四种缓冲流&#xff1a; 缓冲流的作用&#xff1a; 使用的方法&#xff1a; 处理文本文件的字符流&#xff1a; 处理非文本文件的字节流&#xff1a; 操作步骤&#xff1a; 处理流之二&#xff1a;转换流 转换流的使用&#xff1a; …

企业编码生成程序Python毕业设计

&#xff08;1&#xff09;生成6位数字防伪编码。当用户在主程序界面中输入数字“1”菜单项时&#xff0c;将进入“生成6位数字防伪编码 &#xff08;213563型&#xff09;”的功能执行任务。此时要求输入生成防伪码的数量&#xff0c;可以根据需要输入生成防伪码的数量。按下&…