前端学习——jsDay2-编程知识

运算符

赋值运算符

在这里插入图片描述

一元运算符

在这里插入图片描述

比较运算符

在这里插入图片描述

逻辑运算符

在这里插入图片描述

小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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('请输入一个数：')let flag = (num%4===0&&num%100!==0)alert(flag)</script>
</body>
</html>

运算符优先级

在这里插入图片描述

语句

表达式和语句

在这里插入图片描述

分支语句

在这里插入图片描述

if

在这里插入图片描述
小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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 > 700){alert('恭喜考入黑马程序员！')}</script>
</body>
</html>

在这里插入图片描述
小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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 uname = prompt('输入用户名：')let psw = prompt('输入密码：')if(uname==='pink'&&psw==='123456'){alert('登陆成功！')}else{alert('登陆失败')}</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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 year = +prompt('输入年份：')if(year%100!=0&&year%4==0||year%400==0){alert('`{year}是闰年！`)}else{alert(`${year}是平年！`)}</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>90){alert('优秀！')}else if(score>=70){alert('良好！')}else if(score>=60){alert('及格！')}else{alert('不及格！')}</script>
</body>
</html>

三元运算符

在这里插入图片描述
小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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('请输入第二个数：')num1 > num2 ? console.log(num1) : console.log(num2)</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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('请输入第一个数：')num1 = num1 < 10 ? '0'+ num1 : num1console.log(num1)</script>
</body>
</html>

switch语句

在这里插入图片描述
小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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 str = prompt('请输入一个运算符：')switch(str){case '+':document.write(num1+num2)breakcase '-':document.write(num1-num2)breakcase '*':document.write(num1*num2)breakcase '/':document.write(num1/num2)break}</script>
</body>
</html>

循环语句

断点调试

在这里插入图片描述

while循环

在这里插入图片描述

小练习

<!DOCTYPE html>
<html lang="zh-CN">
<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 i = 10while(i > 0){document.write('月薪过万<br>')i--;}</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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 i = 1while(i <= 100){document.write(i + '<br>')i++;}</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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 i = 1let sum = 0while(i <= 100){sum += ii++;}document.write(sum)</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><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 i = 1let sum = 0while (i <= 100) {if (i % 2 == 0) {sum += i}i++;}document.write(sum)</script>
</body></html>

在这里插入图片描述

循环退出

在这里插入图片描述
小练习

<!DOCTYPE html>
<html lang="zh-CN"><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 arr = prompt('你爱我吗？')if(arr ==='爱'){break;}}</script>
</body></html>

综合案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><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 money = 100let cun = 10let qu = 10while(true){let choice = +prompt(`请选择您的操作：1.取款2.存款3.查看余额4.退出`)switch(choice){case 1:money += cunbreakcase 2:money -= qubreakcase 3:alert(`余额为${money}`)break}if(choice===4)break}</script>
</body></html>