1.表达式和语句
1.表达式
1.表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果
2.语句
1.js 整句或命令，js 语句是以分号结束（可以省略）
3.区别
1.表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)
2.分支语句
1. 程序三大流程控制语句
1.顺序结构:以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
2.分支结构:有的时候要根据条件选择执行代码，这种就叫分支结构
3.循环结构：某段代码被重复执行，就叫循环结构
3.if语句
1.单分支
1.括号内的条件为true时，进入大括号里执行代码
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>
let score = +prompt ('请输人您的分数')
if (score>=700) {
alert('恭喜你被蓝翔挖掘机专业录取')
}
</script>
</body>
</html>
2.双分支
1.写法
if(条件) {
满足条件要执行的代码
} else {
不满足条件执行的代码
}
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>
let score = +prompt('请输入你的考试分数')
if (score >= 700) {
alert('蓝翔挖掘机专业欢迎你');//大于等于700的时候执行
} else {
alert('新东方烹饪学校欢迎你');//小于700的时候执行
}
</script>
</body>
</html>
3.多分支
1.代码
if(条件1) {
代码1
} else if (条件2) {
代码2
} else if (条件3) {
代码3
} else {
代码n
}
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>
let week = +prompt('请输入今天星期几');
if (week === 1) {
alert('煲仔饭');
}
else if (week === 2) {
alert('麻辣烫');
}
else if (week === 3) {
alert('海底捞');
}
else if (week === 4) {
alert('海鲜大餐');
}
else if (week === 5) {
alert('烧烤大餐');
}
else {
alert('软饭');
}
</script>
</body>
</html>
4.三元运算符
1.其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式
2.符号：? 与 : 配合使用
3.语法 条件 ? 满足条件执行的代码 : 不满足条件执行的代码
4.一般用来取值
5.案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-三元表达式.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
条件 ? 满足条件执行的代码 : 不满足条件 执行的代码
*/
// if 方式 写一写
// let num1 = 10;
// let num2 = 9;
// if (num1 > num2) {
// // console.log('num1 要大于 num2 ');
// console.log(num1);
// } else {
// // console.log('num2 要大于或者等于 num1 ');
// console.log(num2);
// }
// 三元表达式
// num1 > num2 ? console.log(num1) : console.log(num2);
let num1 = 10;
let num2 = 99;
let num3; // 就要等于 num1 和 num2 中 大的值
num3 = ( (num1 > num2) ? num1 : num2);
console.log(num3);
</script>
</body>
</html>
5.switch语句
1.找到跟小括号里数据全等的case值，并执行里面对应的代码
2.若没有全等 === 的则执行default里的代码
3.数据若跟值2全等，则执行代码2
4.switch case语句一般用于等值判断,不适合于区间判断
5.switch case一般需要配合break关键字使用 没有break会造成case穿透
switch(数据) {
case 值1 :
代码1
braek
case 值2:
代码2
break
default:
代码n
break
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>
<script>
let num = +prompt('请输入一个数字')
while (num>0){
document .write(`月薪过万就来黑马程序员<br>`)
num--
}
</script>
</body>
</html>
7.案列- 问答
<!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 love = prompt('你爱我吗')
while (love !== '爱') {
// alert('你到底爱不爱我')
love = prompt('你爱我吗')
}
console.log(love);
</script>
</body>
</html>
8.案列-银行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>
/* 步骤1.声明一个变量提示用户操作 sum
let sum = prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出 `);
*/
/* 步骤2.当用户输入对应的信息时 会有对应的功能
1.用户输入 1
还会继续弹窗 问一遍 上面1的内容
2.用户输入 2
还会继续弹窗 问一遍 上面1的内容
3.用户输入 3
还会继续弹窗 问一遍 上面1的内容
4.用户输入4
结束使用
*/
// 只要不是输入 4 输入任何东西都会提示弹窗 输入1 2 3 会展现功能
/* 步骤3.
1.定义一个变量: money 余额
2.用户输入1 取款 withdrawal
1.在弹出一个单独的弹窗 让用户输入想要取款的数量
2.取款: 余额-取款数量
money -= withdrawal
3.用户输入2 存款 deposit
1.在弹出一个单独的弹窗 让用户输入想要存款的数量
2.存款: 存款数量 + 余额
money += deposit
4.用户输入3 余额 money
1.在弹出一个单独的弹窗 显示用户的余额
2. 输出 money 余额
5.用户输入 4 结束使用
*/
//1.提示用户输入
let sum;//提示
//2.用户余额
let money = 0; //余额
//功能实现
while (sum!==4){
//当用户输入不等于4的时候弹窗 输入4的时候结束
sum = +prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出
`)
if (sum===1) {
//当用户输入1时 进行取款功能的实现
let withdrawal=+prompt('请输入取款金额')
money -= withdrawal
} else if (sum===2) {
//当用户输入2时 进行存款功能的实现
let deposit=+prompt('请输入存款金额')
money += deposit
} else if (sum===3) {
//当用户输入3时 进行余额查询的功能
alert(money)
}
}
</script>
</body>
</html>
9.案列-输出大的数字
<!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.声明一个变量提示用户操作 sum
let sum = prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出 `);
*/
/* 步骤2.当用户输入对应的信息时 会有对应的功能
1.用户输入 1
还会继续弹窗 问一遍 上面1的内容
2.用户输入 2
还会继续弹窗 问一遍 上面1的内容
3.用户输入 3
还会继续弹窗 问一遍 上面1的内容
4.用户输入4
结束使用
*/
// 只要不是输入 4 输入任何东西都会提示弹窗 输入1 2 3 会展现功能
/* 步骤3.
1.定义一个变量: money 余额
2.用户输入1 取款 withdrawal
1.在弹出一个单独的弹窗 让用户输入想要取款的数量
2.取款: 余额-取款数量
money -= withdrawal
3.用户输入2 存款 deposit
1.在弹出一个单独的弹窗 让用户输入想要存款的数量
2.存款: 存款数量 + 余额
money += deposit
4.用户输入3 余额 money
1.在弹出一个单独的弹窗 显示用户的余额
2. 输出 money 余额
5.用户输入 4 结束使用
*/
//1.提示用户输入
let sum;//提示
//2.用户余额
let money = 0; //余额
//功能实现
while (sum!==4){
//当用户输入不等于4的时候弹窗 输入4的时候结束
sum = +prompt(`请选择您的操作
1.取款
2.存款
3.查看余额
4.退出
`)
if (sum===1) {
//当用户输入1时 进行取款功能的实现
let withdrawal=+prompt('请输入取款金额')
money -= withdrawal
} else if (sum===2) {
//当用户输入2时 进行存款功能的实现
let deposit=+prompt('请输入存款金额')
money += deposit
} else if (sum===3) {
//当用户输入3时 进行余额查询的功能
alert(money)
}
}
</script>
</body>
</html>
10案列-<10补充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>
let num = +prompt('请输入一个数')
// if(num<10){
// alert(num1 + num)
// }
num1=( num<10 ? '0'+num :num)
alert (num1)
</script>
</body>
</html>
11.案列-计算器
<!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 num = +prompt('请输入一个数')
// if(num<10){
// alert(num1 + num)
// }
num1=( num<10 ? '0'+num :num)
alert (num1)
</script>
</body>
</html>
12.作业
<!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 language = +prompt ('请输入语文成绩')
let math = +prompt ('请输入数学成绩')
let total =language + math;
// if (total >= 190) {
// alert('优秀')
// } else if(total >= 180) {
// alert('良好')
// }
// else if(total >= 170) {
// alert('及格')
// } else {
// alert('人生重开吧')
// }
total= (total >= 190 ? '优秀':total >= 180 ? '良好':total >= 170 ? '及格':total ? '重考':total)
alert(total)
</script>
</body>
</html>
