js基础第三天
1.语句
1.断点调试
①浏览器打开调试界面
②打开开发者工具
③点到源代码一栏(点代码的文件双击两下
④选择代码文件(在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来)
2.while循环
1.(三要素)
①变量起始值
②终止条件（没有终止条件，循环会一直执行，造成死循环）
③变量变化量（用自增或者自减）
2.案例 : 在页面中打印输出10句“月薪过万”
<!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>06-while小案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 1 接受用户的第一个输入 循环的次数
let num = +prompt('你想要循环多少次');
// 2 变量 初始值
let i = 1;
// 3 循环条件
while (i <= num) {
document.write(`月薪过万 ${i}`);
// 4 变量变化
i++;
}
</script>
</body>
</html>
2.for循环
1.for循环语法
for :①声明记录循环次数的变量;
②循环条件 ;
③变化值 ;
④循环体.
for (let index = 1; index <=100; index++) {
console.log(index);
} //快捷键for
2.五角星输出打印500个 
案例:
<!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>20-for-显示打印500个小⭐.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
输出 500个 ⭐
for循环
*/
let star = '';
for (let index = 0; index <= 500; index++) {
star += '⭐';
}
// document.write(star);
console.log(star);
</script>
</body>
</html>
3.for循环和while循环区别
1.for循环
①明确了循环的次数的时候推荐使用for循环
2.while循环
①明确循环的次数的时候推荐使用while循环
4.循环结束
1.continue
①结束本次循环，继续下次循环
2.break
①跳出所在的循环
3.continue 和 break案例:
<!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>21-continue和break.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
for
控制循环结束
1 continue 跳过本次循环 继续开启下次循环 （不是必须）
continue 想要跳过这个循环 不一定通过它
我们自己 if else 也能实现类似的功能
2 break 直接 循环结束 不玩了
也不是必须 ， 我们也是可以通过 if-else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 （性能更加好） 因为break会终止剩下的循环
如果当前的index 是一个奇数 下面的代码就不要再运行了 开启下一个循环
*/
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // console.log(index);
// continue;
// }
// console.log(index,"⭐");
// }
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // 奇数
// }else{
// // 偶数
// console.log(index,"⭐");
// }
// }
/*
continute 功能 其实 也是可以通过 if else 来模拟和实现
if else 根据条件来执行某段代码
continute 跳过循环（不想执行某段代码）
*/
// 只输出偶数
// for (let index = 1; index <= 10; index++) {
// if (index % 2 === 0) {
// // 是偶数了才输出
// console.log(index);
// }
// }
// for (let index = 1; index <= 10; index++) {
// if (index % 2 !== 0) {
// // 是奇数的话 就跳过这次循环
// continue
// }
// console.log(index);
// }
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ，就不再往下 循环了，就终止循环
if (index === 5) {
break;
}
// // index===5&&break // 不能简写 报错！！
console.log(index);
// if (index < 5) {
// console.log(index);
// }
console.log("代码调用的次数",index);
}
</script>
</body>
</html>
5.循环嵌套
1.一个循环里再套一个循环，一般用在for循环里
2.示范
for (外部声明记录循环次数的变量; 循环条件; 变化值){
for (内部声明记录循环次数的变量; 循环条件; 变化值){
循环体
}
}
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>
for (let i = 1; i <= 500; i++) {
for (let xx = 1; xx <= i; xx++) {
document.write('★')
}
document.write('<br>')
}
</script>
</body>
</html>
