JavaScript- 1.6 基本控制流
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 1.2 ECMA基本语法和控制流
JavaScript- 1.3 DOM对页面内容进行操作
JavaScript- 1.4 BOM对浏览器进行操作
JavaScript- 1.5 数据类型+变量+运算符
JavaScript- 1.6 基本控制流
目录
系列文章目录
前言
一、基本控制流
1、基本控制流
1. 条件语句
if 语句
if...else 语句
if...else if...else 语句
switch 语句
2. 循环语句
for 循环
while 循环
do...while 循环
for...in 循环 (遍历对象属性)
for...of 循环 (ES6, 遍历可迭代对象)
3. 跳转语句
break 语句
continue 语句
return 语句
2、对话框
1. alert()
2. confirm()
3. prompt()
3、实际应用示例
条件语句与对话框结合
循环与对话框结合
switch 语句与对话框结合
4、注意事项
二、代码实战
1、对话框
2、分支结构
3、循环结构
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、基本控制流
1、基本控制流
JavaScript 提供了几种基本的控制流结构，用于控制代码的执行顺序：
1. 条件语句
if 语句
javascript
if (condition) {// 当条件为真时执行的代码
}if...else 语句
javascript
if (condition) {// 当条件为真时执行的代码
} else {// 当条件为假时执行的代码
}if...else if...else 语句
javascript
if (condition1) {// 当条件1为真时执行的代码
} else if (condition2) {// 当条件2为真时执行的代码
} else {// 当所有条件都为假时执行的代码
}switch 语句
javascript
switch(expression) {case value1:// 当expression等于value1时执行的代码break;case value2:// 当expression等于value2时执行的代码break;default:// 当expression不等于任何case值时执行的代码
}2. 循环语句
for 循环
javascript
for (let i = 0; i < 10; i++) {// 循环执行的代码
}while 循环
javascript
while (condition) {// 循环执行的代码
}do...while 循环
javascript
do {// 循环执行的代码
} while (condition);for...in 循环 (遍历对象属性)
javascript
for (let key in object) {// 循环执行的代码
}for...of 循环 (ES6, 遍历可迭代对象)
javascript
for (let value of iterable) {// 循环执行的代码
}3. 跳转语句
break 语句
javascript
// 用于退出循环或switch语句
break;continue 语句
javascript
// 跳过当前循环的剩余部分，继续下一次循环
continue;return 语句
javascript
// 用于从函数中返回
return value;2、对话框
JavaScript 提供了几种内置的对话框方法，用于与用户进行交互：
1. alert()
显示一个警告对话框，包含指定的消息和一个"确定"按钮。
javascript
alert("这是一个警告消息");2. confirm()
显示一个确认对话框，包含指定的消息以及"确定"和"取消"按钮。
javascript
let isConfirmed = confirm("你确定要执行此操作吗？");
if (isConfirmed) {// 用户点击了确定
} else {// 用户点击了取消
}3. prompt()
显示一个提示对话框，提示用户输入文本。
javascript
let userName = prompt("请输入你的名字:", "默认值");
if (userName != null) {alert("你好, " + userName);
}3、实际应用示例
条件语句与对话框结合
javascript
let age = prompt("请输入你的年龄:");if (age >= 18) {alert("你已经成年，可以进入网站。");
} else {alert("抱歉，你必须年满18岁才能进入。");
}循环与对话框结合
javascript
let userInput;
do {userInput = prompt("请输入一个1-10之间的数字:");
} while (userInput < 1 || userInput > 10);alert("你输入的数字是: " + userInput);switch 语句与对话框结合
javascript
let day = prompt("请输入星期几(1-7):");
let dayName;switch(parseInt(day)) {case 1: dayName = "星期一"; break;case 2: dayName = "星期二"; break;case 3: dayName = "星期三"; break;case 4: dayName = "星期四"; break;case 5: dayName = "星期五"; break;case 6: dayName = "星期六"; break;case 7: dayName = "星期日"; break;default: dayName = "无效输入";
}alert(dayName);4、注意事项
- 对话框会阻塞 JavaScript 的执行，直到用户关闭它们
- 在现代前端开发中，通常使用自定义的模态框或表单来代替原生对话框
prompt()返回的值总是字符串类型，需要时需要进行类型转换- 对话框的外观和体验因浏览器而异
这些基本控制流和对话框方法是 JavaScript 与用户交互的基础，理解它们对于构建简单的用户交互非常重要。
二、代码实战
1、对话框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js的基本控制流--对话框</title></head><body><script type="text/javascript">//警示框 没有返回值alert('不要走神啦~');//确认框 返回值为布尔值var result=confirm('你喜欢我吗？');console.log(result);//输入框 //身高 体重 体脂=w/h/h 18.5--24 var h=prompt('请输入你的身高（米）');var w=prompt('请输入你的体重（公斤）');var tizhi=w/h/h;if(tizhi<18.5){console.log('你太瘦啦，中午好好吃饭');}else if(tizhi<24){console.log('正常，随意吃吧');}else{console.log('你该减肥啦，别吃啦');}</script></body>
</html>代码运行：
2、分支结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js基本控制流--分支结构</title></head><body><script type="text/javascript">//请输入你的成绩判断等级var score=prompt('请输入你的成绩');var dengji=parseInt(score/10);switch(dengji){case 9:console.log('优秀');break;case 8:console.log('良好');break;case 7:console.log('中等');break;case 6:console.log('及格');break;default:console.log('你挂了');break;}</script></body>
</html> 
3、循环结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js基本控制流-循环结构</title></head><body><script type="text/javascript">var n=prompt('请你输入任意一个1-10之内的数：');var sum=1;for(var i=1;i<=n;i++){sum=sum*i;}console.log(sum);document.write(sum);</script></body>
</html>
总结
以上就是今天要讲的内容，本文简单记录了基本控制流，仅作为一份简单的笔记使用，大家根据注释理解