JavaScript 02
本文概述:while循环、数据类型转换、语句表达式、if循环、switch选择与语句的使用
一、While循环
1. while循环概述
<!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>
<script>
// 语法:
// while(循环条件){
// 循环体
// }
// 执行流程:小括号代码如果为true,一直执行循环体,知道小括号里面值为false(循环条件)
// 循环三要素:循环变量初始化 循环条件 变量更新
// 需求:打印5次今天学习状态还不并且换行
let val =1;
while(val<6){
document.write('今天学习状态还不错<br>')
val++;
}
</script>
</body>
</html>
1.1 while循环实例·吃个包子
<!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>
<!-- 需求:吃6个包子,跳过第三个包子 -->
```javascript
<script>
// continue;
// let i = 1;
// while (i <= 6) {
// if (i === 3) {
// // 自增后再去判断
// i++;
// // 遇到后跳出
// continue;
// }
// document.write(`这是吃 的第${i}个包子<br>`);
// // 变量的变化
// i++;
// }
// break
let a = 1;
while (a <= 6) {
if (a === 3) {
// 遇到break后结束循环
break;
}
document.write(`这是吃 的第${a}个包子<br>`);
// 变量的变化
a++;
}
</script>
</body>
</html>
1.2 while循环实例·用户登录
<!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>
<script>
while (true) {
let uname = prompt('请输入你的用户名')
let pwd = +prompt('请输入你的密码')
if ((uname === '初映') && (pwd === 1437)) {
// 警告框不可以换行加<br>
alert(`恭喜你,${uname}登录成功`)
// 如果不是反引号``包起来的则将以字符串输出${name}无效
break;
}
else {
alert(`${uname}在数据库查询未检索到,请重试输入`)
// continue;
}
}
</script>
</body>
</html>
1.3 while循环实例·爱循环
<!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>
<script>
while(true){
let love = prompt('Do you love me ?')
if(love =='love'){
break
}
}
</script>
</body>
</html>
二、数据类型的转换
2.1 数值型类型转换
<!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>
<script>
// 1.转数字Number(数据)
console.log(Number('123'));//123
// 如果Number()数据又非数字则会出现NaN(Not a Number)不是数字,但是是属于数字类型的
// NaN是表示数据计算错误的结果,任何数据与NaN运算都是NaN
console.log(NaN===NaN);//false
// prompt接收的内容为字符串类型的,计算需要转
let num1 = prompt('输入第一个数字')
let num2 = prompt('输入第二个数字')
alert(`两者之和为${Number(num1)+Number(num2)}`)
// 这种是隐式转换
let num3 = +prompt('输入第一个数字')
let num4 = +prompt('输入第二个数字')
// 转为数字类型整数
console.log (parseInt('18'));
console.log (parseInt('18px'));//18多余字母忽略
console.log (parseInt('abc18'));//NaN字母必须在后面
console.log (parseInt('18.1'));//18
// 转换为数字类型小数字
console.log(parseInt('18.88'));
console.log(parseInt('18.88px'));//18
console.log(parseInt('px18.88'))//NaN;
// 拓展:布尔类型 true是1 false是0
console.log(true);
console.log(false);
</script>
</body>
</html>
2.2 转换为字符型
<!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>
<script>
// 其他类型强转字符串类型
console.log(String(12));
console.log(String(true));
console.log(String(undefined));//undefined
console.log(String(null));//null
// toString(进制)
let num = 10
console.log(num.toString(2));//1010
</script>
</body>
</html>
2.3 布尔类型转换
<!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>
<script>
// 转布尔类型 Boolean(数据)
// ' ' 0 null undefined false NaN 这6个值转布尔都是false,其他都是true
// 注意 ' '里面包括了空格 不是''
console.log(Boolean(' '));//true
console.log(Boolean(''));///false
console.log(Boolean(0));//false
console.log(Boolean(null));//false
console.log(Boolean(false));//false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false
</script>
</body>
</html>
2.4 隐式转换
<!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>
<script>
// +号作用 相加 拼接 当正好解析转换成数字类类型
// 显式转换:主动转。隐式:js引擎帮我们转
// 1.+号可以当正号解析,除了+号计算外,其他运算符会默认转换成数值类型 - * / %
console.log('10'- '2');//8
console.log(+'abc');//NaN
console.log(10+ +'11'-10);//11
// 2.+号的字符串拼接
console.log('你好'+true);//‘你好true’
// 3.!逻辑非默认转换成布尔类型,结果是取反之后的结果
console.log(!2);//false
console.log(!'你好');//false
</script>
</body>
</html>
2.5null与undefined区别(拓展)
<!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>
<script>
// <!-- 未定义变量没有赋值会出现undefined -->
let a
console.log(a);
// null空值一般表示这个变量以后会装一个对象
let obj = null
console.log(typeof obj);//object
// null 和 undefined值相同,类型不同
console.log(null==undefined);//true
console.log(null===undefined);//false
// null和undefined转数字类型
console.log(Number(null));//0
console.log(Number(undefined));//NaN
// null 和 undefined转布尔类型
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
//抽象理解就是 null是建好了的房子没去住罢了 undefined则是相当于口头承诺建房子,实际上没有的
</script>
</body>
</html>
三.语句表达式
- 表达式:由运算符组成的式子,一般用来取值
- 语句:向编译器发送指令,是一段可执行的代码
- 表达式有运算有值,没运算符参加的是语句
三大流程控制语句:顺序结构、分支结构 、循环结构
3.1 分支语句if的使用
<!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>
<!-- 分支语句 可惜选择想要执行的代码’ -->
<!-- 常见if -->
<!-- if( 默认为true) -->
<script>
// 当只有一个返回结果的时候,可以不写{}不推荐
// if(10 == ('10')){
// alert('弹窗出来')
// }
let score =+prompt('请输入你的成绩')
let name =prompt('请输入你的姓名')
if (score > 700) {
// 警告框不可以换行加<br>
alert(`恭喜你,${name}成功上岸`)
// 如果不是反引号``包起来的则将以字符串输出${name}无效
// alert('恭喜你,${name}成功上岸')
}else if(score<=500){
alert(`抱歉,${name}已落榜`)
}
// 所有都不满足的时候才会执行else的结果
else{
alert(`数据库查询失败,请重试`)
}
</script>
</body>
</html>
3.2 分支语句if的使用实例·成绩判断
<!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>
<script>
// while (true) {
let score = +prompt('请输入你的成绩')
let name = prompt('请输入你的姓名(按下Q退出)')
if ((score >= 90 && score <= 100)) {
alert(`恭喜你,${name}成绩优秀`)
}
else if (score <= 80 && score > 70) {
alert(`${name}成绩良好`)
}
else if (score <= 70 && score >= 60) {
alert(`${name}成绩及格`)
}
else if (0<=score&& score < 60) {
alert(`加油,${name}成绩不及格`)
}
else {
alert(`成绩输入有误,请重试`)
}
</script>
</body>
</html>
3.3 三元运算符
<!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>-
<script>
// 三元一次表达式:进行分支判断,二选一
// 作用:进行分支判断
// 语法: 条件?true的结果:false失败的结果
// 1>2?alert(`成功`):alert(`失败`)
// 隐藏用法:三元一次表达式可以用于求职,如果没有值则返回undfined
// alert没有值,直接输出了
let val =10 > 20? alert('条件返回结果为10'):alert('条件返回结果为20')
console.log(val);
let val1=10 > 20?10 :20
console.log(va1l);//返回的是20
</script>
</body>
</html>
3.4 三元运算符实例·求最大值
<!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>
<script>
let num1 = +prompt('请输入第一个值');
let num2 = + prompt('请输入第二个值');
let max = num1 > num2 ? num1 : num2;
console.log(max);
</script>
</body>
</html>
3.5三元运算符实例·时钟补0
<!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>
<script>
// 需求:当一个数字小于10的时候需要在其前面补上数字0
let num = +prompt('输出一个数字')
// let time = num>10 ? num : ('0' + num);
// alert(time)
let times =10>num ? ('0' + num):num;
// console.log(time);
alert(times)
</script>
</body>
</html>
四、switch语句
<!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>
<!-- 常用在全等值的判断,会去找小括号里面全等的case值 -->
<script>
//1. 多选1,遇到break也可利用case穿透做选项)结束
// 2.不适用范围判断(推荐if),适合等值判断
// 3.,遇到continue跳过本次
// 语法:
switch ('1') {
case '1':
alert('我是第一项')
case '2':
// break;
alert('我是第二项')
// continue;
case '3':
alert('我是第三项')
// case '2':
break;
// 默认值
default:
alert('我是默认值')
}
</script>
</body>
</html>
4.1 switch语句实例·简单的两位数计算器
<!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>
<script>
// 需求:输入两个数字可以进行加减乘除的运算
let num1 = +prompt('输入第一个数字');
let num2 = +prompt('输入第二个数字');
let mode = prompt('输入运算符');
// switch里写判断项,case写判断依据
switch (mode) {
case '+': {
alert(num1 + num2)
break;
}
case '-': {
alert(num1 - num2)
break;
}
case '*': {
alert(num1 * num2)
break;
}
case '/': {
alert(num1 / num2)
break;
}
case '%': {
alert(num1 % num2)
break;
}
// 都没有的时候的默认值,不需要额外的写{}
default:
alert('输入的值有错误,请重新输入')
}
</script>
</body>
</html>
五.大综合案例
01.打印数字1-20
<!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>
<script>
// 需求:打印1-20之间所有的数字并且换行显示出来
i = 0
while (i <= 20) {
document.write(`${i}<br>`)
i++
}
</script>
</body>
</html>
02.打印1-100的和
<!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>
<script>
// 定义sum收集数据, i负责循环
let i=0,sum=0;
while(i<100){
i=i+1;
sum=sum+i;
}
document.write(sum);
</script>
</body>
</html>
03-打印100-200可被6整除的数字
<!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>
<!-- 打印100-200之间,可以被6整除的数字 -->
<!-- 逻辑分析:1.先遍历数字,获取100-200之间的所有的数字
2.做if判断在100-200中的i每一个都有6用于取余比较
3.进入if后除以6取余为0的记录下来,并且i++让循环进入下一步 -->
<script>
let i =100
while(i<=200){
if(i%6===0){
document.write(i+` `)
i++;
}else{
i++;
}
}
</script>
</body>
</html>
04. 累计求和
<!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>
<script>
// 需求:计算1到这个数的和 比如用户输入5,则计算1-5之间的累加和
// 我写的这个可以计算任意两个数字之间的和~~~
let sum=0;
let num = +prompt('计算的顶值');
let i = +prompt('计算的低值');
while(i<=num){
sum =i+sum;
i++;
}
document.write(sum);
</script>
</body>
</html>
05.ATM取钱小程序
<!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>
<script>
let ballance = 0 //作用相当于设置一个钱包负责存放数据用的
while (true) {
let value = +prompt('1.存钱, 2,取钱 3.查看余额 4.退出')
// 下面这个刚开始写的是case 4 但是这样break跳不出循环,因此把这个case4提取出来,写在while的下一级,当遇到break的时候会跳出来的
if (value===4){
break;
}
switch (value) {
case 1:
let save = +prompt('请输入存钱的金额')
ballance += save;
alert('存钱成功!')
break;
case 2:
let expand = +prompt('请输入取钱的金额')
if (ballance >= expand) {
alert('取钱成功');
ballance-=expand
} else
alert('取钱失败,余额不足!')
break;
case 3:
alert(`当前余额剩余${ballance}RMB`)
break;
}
}
</script>
</body>
</html>