优化网站排名茂名厂商,wordpress配置搜索引擎优化,网站文字设计,海珠建网站公司文章来源于网上收集和自己原创#xff0c;若侵害到您的权利#xff0c;请您及时联系并删除~~~ 理解什么是流程控制#xff0c;知道条件控制的种类并掌握其对应的语法规则#xff0c;具备利用循环编写简易ATM取款机程序能力 运算符语句综合案例
1. 运算符
算术运算符赋值运…文章来源于网上收集和自己原创若侵害到您的权利请您及时联系并删除~~~ 理解什么是流程控制知道条件控制的种类并掌握其对应的语法规则具备利用循环编写简易ATM取款机程序能力 运算符语句综合案例
1. 运算符
算术运算符赋值运算符一元运算符三元运算符比较运算符逻辑运算符运算符优先级字符串运算符位运算符
1.1 算术运算符
数字是用来计算的比如乘法 * 、除法 / 、加法 、减法 - 等等所以经常和算术运算符一起。 算术运算符也叫数学运算符主要包括加、减、乘、除、取余求模等
运算符作用求和-求差*求积/求商%取模取余数开发中经常用于作为某个数字是否被整除 注意在计算失败时显示的结果是 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(老师 - 2)
console.log(老师 * 2)
console.log(老师 2) // pink老师21.2 赋值运算符
赋值运算符对变量进行赋值的运算符 将等号右边的值赋予给左边, 要求左边必须是一个容器
运算符作用加法赋值-减法赋值*乘法赋值/除法赋值%取余赋值
scriptlet num 1// num num 1// 采取赋值运算符// num 1num 3console.log(num)
/script小结 赋值运算符执行过程 将等号右边的值赋予给左边, 要求左边必须是一个容器 出现是为了简化代码, 比如让 let num 10 num 加5 怎么写呢 num 5
1.3 自增/自减运算符一元运算符
众多的 JavaScript 的运算符可以根据所需表达式的个数分为一元运算符、二元运算符、三元运算符 二元运算符
let num 10 20一元运算符正负号
问题 :以前让一个变量每次 1
let num 1
num num 1// 或者
let num 1
num 1符号作用说明自增变量自身的值加1例如: x–自减变量自身的值减1例如: x–
前置自增
没执行1次当前变量数值加1作用相当于 num 1
let num 1
num // 让 num 的值加1变为2后置自增
没执行1次当前变量数值加1作用相当于 num 1
let num 1
num // 让 num 的值加1变为2在前和在后在单独使用时二者并没有差别而且一般开发中我们都是独立使用
但是
前置自增自减与后置自增自减如果参与运算的话有区别!!!
前置自增
先自己相加在使用在前先加
let i 1
console.log(i 2 ) // 结果是4
// i相加后i是2
// i先自加1变为2后在和后面的2相加后置自增
先使用再自相加在后后加
let i 1
console.log(i 2 ) // 结果是3
// i后i依然是1
// i先和2相加先运算符语句输出完毕后i再自加是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小结
在前和在后在单独使用时二者并没有差别而且一般开发中我们都是独立使用在后后缀式我们会使用更多自增运算符一元运算符也是为了简化写法一般用于计数使用每次自加1用来计算多少次
面试题
let i 1
console.log(i i i)1.4 三元运算符
使用场景 一些简单的双分支可以使用 三元运算符三元表达式写起来比 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 : numnum num 10 ? num : 0 numalert(num)1.5 比较运算符
使用场景比较两个数据大小、是否相等根据比较结果返回一个布尔值true / false 运算符作用左边是否大于右边左边是否小于右边左边是否大于或等于右边左边是否小于或等于右边左右两边是否类型和值都相等重点左右两边值是否相等!左右值不相等!左右两边是否不全等
注意 单等赋值 判断 全等
开发中判断是否相等强烈建议使用 字符串比较是比较的自负对应的 ASCII 码 从左往右依次比较 如果第一位一样再比较第二位以此类推 NaN不等于任何值包括它本身 涉及到NaN都是 false 尽量不要比较小数因为小数有精度问题 不同类型之间比较会发生隐式转换 最终把数据隐式转换成 number 类型再比较 所以进行准备的比较更推荐使用 或 !
scriptconsole.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 是全等 要求值和数据类型都一样返回的才是true 开发中请使用 比较运算符返回的结果是什么 结果只有2个 true 或者 false
1.6 逻辑运算符与、或||、非!
使用场景可以把多个布尔值放到一起运算最终返回一个布尔值
问题 如果想判断一个变量 num 是否大于5并且小于10怎么操作 错误写法5 num 10 正确写法num 5 num 10
符号名称日常读法特点口诀逻辑与并且符号两边有一个假的结果为假一假则假||逻辑或或者符号两边有一个真的结果为真一真则真!逻辑非取反true变false false变true真变假假变真
ABA BA || B!Afalsefalsefalsefalsetruefalsetruefalsetruetruetruefalsefalsetruefalsetruetruetruetruefalse
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练习1
需求用户输入一个判断这个数能被4整除但是不能被100整除,满足条件页面弹出true否则弹出false 分析 ①用户输入 ②判断条件 看余数是不是0如果是0就是能被整除余数不是0则不能被整除
1.7 字符串运算符
用于字符串数据之间的拼接 凭借符号 走遍字符串世界
let str 您 好
console.log(str)1.8 位运算符
位运算符仅对于数值型数据进行运算将其操作数当作 32 位的比特序列0和1组成 即把操作数换成二进制然后按位操作每一位上的数值
运算符级说明示例按位与ab; // a和b按位进行“与”操作后的结果按位或ab; // a和b按位进行“或操作后的结果~按位非~a; // a和b按位进行“非”操作后的结果^按位异或a^b; // a和b按位进行“异或”操作后的结果左移ab; // 将a左移 b 位舍弃被移出的位右边用0填充右移ab; // 将a右移 b 位舍弃被移出的位左边用0或1填充无符号右移ab; // 将a右移 b 位舍弃被移出的位左边最高的位用0填充
1.8.1 按位与运算符
只有两个二进制都为1结果为1否则为0 00000000 00000000 00000000 00001010 // 十进制的10写成二进制00000000 00000000 00000000 00000110 // 十进制的6写成二进制—————————————————————————————————————00000000 00000000 00000000 00000010 // 二进制结果为10转换成十进制为 21.8.2 按位或运算符 |
只有两个二进制有一个为1结果为1否则为0 00000000 00000000 00000000 00001010 // 十进制的10写成二进制00000000 00000000 00000000 00000110 // 十进制的6写成二进制—————————————————————————————————————00000000 00000000 00000000 00001110 // 二进制结果为1110转换成十进制为 141.8.3 按位非运算符 ~
如果该位是0取反后则为1 如果该位是1取反后则为0
~ 00000000 00000000 00000000 00001010 // 十进制的10写成二进制—————————————————————————————————————11111111 11111111 11111111 11110101 // 得到的是负数的补码值运算结果的最高位为1表示取反后的数是负数 但是由于负数在内存中以补码形式存储要得到负数的原码值需要对补码进行取反加1
~ 11111111 11111111 11111111 11110101 // 对负数的补码进行取反除符号位—————————————————————————————————————10000000 00000000 00000000 00001010 // 得到反码值负数的符号不需要取反00000000 00000000 00000000 00000001 // 反码值1—————————————————————————————————————10000000 00000000 00000000 00001011 // 得到负数的原码值此时转换成十进制为 -111.8.4 按位异或运算符 ^
如果二进制位相同则异或的结果为0否则为1 00000000 00000000 00000000 00001010 // 十进制的10写成二进制
^ 00000000 00000000 00000000 00000110 // 十进制的6写成二进制—————————————————————————————————————00000000 00000000 00000000 00001100 // 二进制结果为1100转换成十进制为 121.8.5 左移运算符
二进制的每一位按指定位数左移 过程中左边若超过32位的部分舍弃右边补0 00000000 00000000 00000000 00001010 2 // 十进制的10写成二进制左移2位—————————————————————————————————————00000000 00000000 00000000 00101000 // 二进制结果为101000转换成十进制为 401.8.6 右移运算符
二进制的每一位按指定位数右移 移动到右边届之外的多余二进制位会被舍弃并从左边姐移入一个二进制位 若原数最高位为1则移入的二进制为1否则为0 00000000 00000000 00000000 00001010 2 // 十进制的10写成二进制右移2位—————————————————————————————————————00000000 00000000 00000000 00000010 // 二进制结果为0010转换成十进制为 2// 因为整数的最高位是0所以移动过程中左边补0但是 如果是 -10 移动2位则有点复杂 负数在内存中是以补码的形式存在
根据负数的原码求出负数的补码原码的符号位不变其余位按位取反1保持符号位不变其余位向右移动2位在移动过程中高位补 1移位完成后保持符号位不变其余按位取反 1得到的移位后对应数的原码就是所求的数
~ 10000000 00000000 00000000 00001010 // 1、十进制 -10 的原码形式—————————————————————————————————————11111111 11111111 11111111 11110101 // 十进制 -10 的反码00000000 00000000 00000000 00000001 // 1 的二进制 相加—————————————————————————————————————11111111 11111111 11111111 11110110 2 // 2、十进制 -10 的补码 向右移2位—————————————————————————————————————
~ 11111111 11111111 11111111 11111101 // 得到右移后 -10 的补码—————————————————————————————————————10000000 00000000 00000000 00000010 // 3、符号位不变按位取反00000000 00000000 00000000 00000001 // 1 的二进制 相加—————————————————————————————————————10000000 00000000 00000000 00000011 // 4、右移后的 -10 的原码转换十进制为 -31.8.7 无符号右移运算符
二进制数的每一位向右移动指定位数 移动到右边届之外的多余二进制位会被丢弃并从左边移入0 不考虑操作数的正负 分别将十进制数 10 和 -10 无符号右移 2 为 // 1000000000 00000000 00000000 00001010 2 // 十进制的 10 无符号右移2位—————————————————————————————————————00000000 00000000 00000000 00000010 // 最高位补2个0转换成二进制为 2// -1010000000 00000000 00000000 00001010 // 十进制的 -10 的原码形式11111111 11111111 11111111 11110110 2 // -10 的补码形式右移2位—————————————————————————————————————00111111 11111111 11111111 11111101 // 最高位补2个0负数变成了正数转换十进制为 1073741821
应用 1、使用运算符判断一个数的奇偶
console.log(7 1); // 1
console.log(8 1) ; // 0
// 010, 1112、使用~~,,,| 来取整
~~3.14 3
3.14 0 3
3.14 0 3
3.14 | 0 3
3.14 0 3 //(不可对负数取整)注意~~-3.14 -3 其它的一样
3、使用来计算乘除
1*2 2
11 1//(2/2的一次方)4、利用^来完成比较两个数是否相等
(a ^ b) 0; // true 相同; false 不相同// --- before ---
if (a ! 1171) {...};// --- after ---
if (a ^ 1171) {...};1 ^ 非1数 0 所以同一个数……同一个数等于0否则不等于0
5、使用^来完成值交换
let a 1
let b 2
a ^ b
b ^ a
a ^ b
console.log(a,b)
//结果a2b16、使用,,|来完成rgb值和16进制颜色值之间的转换 16进制颜色值转RGB
function hexToRGB(hex){var hex hex.replace(#,0x),r hex 16,g hex 8 0xff,b hex 0xff;return rgb(r,g,b);
}RGB转16进制颜色值
function RGBToHex(rgb){var rgbArr rgb.split(/[^\d]/),color rgbArr[1]16 | rgbArr[2]8 | rgbArr[3];return #color.toString(16);
}运行hexToRGB(“#ffffff”)返回rgb(255,255,255) 运行RGBToHex(“rgb(255,255,255)”)返回#ffffff
1.9 运算符优先级
优先级运算符顺序1小括号()2一元运算符 – !3算数运算符先* / % 后 - 4关系运算符 5相等运算符 ! !6逻辑运算符先 后7赋值运算符8逗号运算符,
一元运算符里面的逻辑非优先级很高逻辑与比逻辑或优先级高 逻辑运算符优先级 || 练习2
let a 3 5 2 7 3 4
console.log(a);
let b 3 4 || 3 1 || 3 ! 2
console.log(b);
let c 2 2
console.log(c);
let d !c || b a
console.log(d);2. 语句
表达式和语句分支语句循环语句
2.1 表达式和语句 2.2 分支语句
分支语句可以根据条件判定真假来选择性的执行想要的代码 三大流程控制语句
分支语句包含
if分支语句重点三元运算符switch语句
2.2.1 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(执行语句)/script练习 用户输入高考成绩如果分数大于700则提示恭喜获得2w奖学金 // 1. 用户输入let score prompt(请输入成绩)// 2. 进行判断输出if (score 700) {alert(恭喜获得2w奖学金)}2.2.2 if双分支语句
如果有两个条件的时候可以使用 if else 双分支语句 if (条件表达式){// 满足条件要执行的语句
} else {// 不满足条件要执行的语句
}例题 判断用户登录案例 需求用户输入用户名pink密码123456 则提示登录成功否则提示登录失败 分析 ①弹出输入框分别输入用户名和密码 ②通过if语句判断如果用户名是pink并且密码是123456则执行if里面的语句否则执行else 里面的语句。 script// 1. 用户输入let uname prompt(请输入用户名:)let pwd prompt(请输入密码:)// 2. 判断输出if (uname zhangsan pwd 123456) {alert(恭喜登录成功)} else {alert(用户名或者密码错误)}/script练习 需求让用户输入年份判断这一年是闰年还是平年并弹出对应的警示框 分析 ①能被4整除但不能被100整除或者被400整除的年份是闰年否则都是平年 ②需要逻辑运算符
2.2.3 if 多分支语句
使用场景 适合于有多个条件的时候比如学习成绩可以分为优、良、中、差
if(条件1){执行代码语句
}else if(条件2){执行代码语句
}else if(条件3){执行代码语句
}else{执行代码语句
}释义 Ø 先判断条件1若满足条件1就执行代码1其他不执行 Ø 若不满足则向下判断条件2满足条件2执行代码2其他不执行 Ø 若依然不满足继续往下判断依次类推 Ø 若以上条件都不满足执行else里的代码n Ø 注可以写N个条件但这里演示只写2个
练习 输入成绩案例 需求根据输入不同的成绩反馈不同的评价 注 ①成绩90以上是 优秀 ②成绩70~90是 良好 ③成绩是60~70之间是 及格 ④成绩60分以下是 不及格 script// 1. 用户输入let score prompt(请输入成绩)// 2. 判断输出if (score 90) {alert(成绩优秀)} else if (score 70) {alert(成绩良好)} else if (score 60) {alert(成绩及格)} else {alert(成绩不及格)}/script2.2.4 三元运算符三元表达式
使用场景 一些简单的双分支可以使用 三元运算符三元表达式写起来比 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)案例1 判断2个数的最大值 需求用户输入2个数控制台输出最大的值 分析 ①用户输入2个数 ②利用三元运算符输出最大值
案例2 数字补0案例 需求用户输入1个数如果数字小于10则前面进行补0 比如 09 03 等 分析 ①为后期页面显示时间做铺垫 ②利用三元运算符 补 0 计算
2.2.5 switch语句了解
使用场景 适合于有多个条件的时候也属于分支语句大部分情况下和 if多分支语句 功能相同
switch(数据){case 值1:代码1break;case 值2:代码2break;default:代码nbreak;
}释义 Ø 找到跟小括号里数据全等的case值并执行里面对应的代码 Ø 若没有全等 的则执行default里的代码 Ø 例数据若跟值2全等则执行代码2
注意
switch case语句一般用于等值判断, if适合于区间判断switchcase一般需要配合break关键字使用 没有break会造成case穿透if 多分支语句开发要比switch更重要使用也更多
例如
scriptswitch (2) {case 1:console.log(您选择的是1)break // 退出switchcase 2:console.log(您选择的是2)break // 退出switchcase 3:console.log(您选择的是3)break // 退出switchdefault:console.log(没有符合条件的)}
/script案例 简单计算器 需求用户输入2个数字然后输入 - * / 任何一个可以计算结果 分析 ①用户输入数字 ②用户输入不同算术运算符可以去执行不同的运算 (switch)
2.3 循环语句
使用场景重复执行 指定的一段代码比如我们想要输出10次 ‘js你好’
学习路径 1.while循环 2.for 循环重点
2.3.1 断点调试
**作用**学习时可以帮助更好的理解代码运行工作时可以更快找到bug
浏览器打开调试界面
按F12打开开发者工具点到源代码一栏 sources 选择代码文件
**断点**在某句代码上加的标记就叫断点当程序执行到这句有标记的代码时会暂停下来
2.3.2 while循环
while : 在…. 期间 所以 while循环 就是在满足条件期间重复执行某些代码。
语法
while (条件表达式) {// 循环体
}释义 Ø 跟if语句很像都要满足小括号里的条件为true才会进入 循环体 执行代码 Ø 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案例 在页面中打印输出10句“月薪过万” 需求使用while循环页面中打印可以添加换行效果
思考 能不能改进让用户输入打印输出的个数呢
练习 需求使用while循环页面中打印可以添加换行效果 页面输出1-100 核心思路 利用 i ,因为正好和 数字对应 计算从1加到100的总和并输出 核心思路 声明累加和的变量 sum 每次把 i 加到 sum 里面 计算1-100之间的所有偶数和 核心思路 声明累加和的变量 sum 首先利用if语句把 i 里面是偶数筛选出来 把 筛选的 i 加到 sum 里面
2.3.3 中止循环
循环结束 break退出循环 continue结束本次循环继续下次循环区别 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) {icontinue}console.log(i)i}/script案例 页面弹框 需求页面弹出对话框‘你爱学习吗’如果输入‘爱’则结束否则一直弹出对话框 分析 ①循环条件永远为真一直弹出对话框 ②循环的时候重新让用户输入 ③如果用户输入的是 爱则退出循环 break
2.3.4 无限循环
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}
}总结
while循环的作用是什么 在满足条件期间重复执行某些代码while循环三要素是什么 变量起始值 终止条件没有终止条件循环会一直执行造成死循环 变量变化量用自增或者自减
let i 1
while(i 3){document.write(我会循环三次br)i
}综合案例-ATM存取款机
需求用户可以选择存钱、取钱、查看余额和退出功能
分析
提示输入框写到循环里面无限循环用户输入4则退出循环 break提前准备一个金额预先存储一个数额 money根据输入不同的值做不同的操作取钱则是减法操作 存钱则是加法操作查看余额则是直接显示金额可以使用 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
