JavaScript学习笔记004-if判断0for循环

Author：Mr.柳上原
付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终
js原生代码
是学习一切js框架的基础
不管是现在很火的vue
还是想做全栈的node
都能很容易的学会
反之
只会调用框架
出了bug都不支持如何改正
要搞清楚的一点
是人玩js
而不是人被js玩
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字：英文 -->

<head> <!-- 网页头部 -->

<meta charset='UTF-8'/> <!-- 网页字符编码 -->

<meta name='Keywords' content='关键词1,关键词2'/>

<meta name='Description' content='网站说明'/>

<meta name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/
#box{
width:300px;
height:200px;
background-color:pink;
}

</style>

</head>

<body> <!-- 网页主干：可视化区域 -->
<div id='box' class='box'>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>

<script>
// 流程判断（条件分支）

// 比较运算符：>大于，<小于，>=大于等于，<=小于等于，==等于，===全等于，!=不等于，!==全不等于

// 6个假值，''，0，NaN，false，undefined，null

// if 判断方法：只要真值时，不需要写else
if (true) {
console.log('帅！'); // 语句为真，输出此行
}

// if 判断方法：两个分支时
let shuai = 1;
let chou = 2;
if (shuai===1) {
console.log('帅！'); // 语句为真，输出此行
} else {
console.log('丑！'); // 语句为假，输出此行
}

// if 判断方法：多个分支时
let shuai = 1;
let chou = 2;
if (shuai===1) {
console.log('帅！'); // 1语句为真，输出此行
} else if (shuai===3){
console.log('丑！'); // 3语句为真，输出此行
} else if (shuai===5){
console.log('丑！'); // 5语句为真，输出此行
} else if (shuai===7){
console.log('丑！'); // 7语句为真，输出此行
} else if (shuai===9){
console.log('丑！'); // 9语句为真，输出此行
} else {
console.log('丑！'); // 语句为假，输出此行
}

// switch判断方法：比较对象为同一个，===时
let shuai = 1;
switch (shuai) {
case 1:
console.log('1语句为真，输出此行');
break; // 跳出
case 2:
console.log('3语句为真，输出此行');
break; // 跳出
case 3:
console.log('5语句为真，输出此行');
break; // 跳出
case 4:
console.log('7语句为真，输出此行');
break; // 跳出
case 5:
console.log('9语句为真，输出此行');
break; // 跳出
default:
console.log('语句为假，输出此行');
break; // 跳出
}

// 三目运算符：if 有且只有真假两个分支，并且每个分支只有一条语句
let shuai = 9;
if (shuai > 5) {
console.log('shuai大于5');
} else {
console.log('shuai小于等于5');
}
shuai > 5 ? console.log('shuai大于5') : console.log('shuai小于等于5'); // 三目简写方法1
console.log(shuai > 5 ? 'shuai大于5' : 'shuai小于等于5'); // 三目简写方法2

// 简单开关：取反
let mark = true;
let div01 =document.getElementById('box');
div01.onclick = function () {
if (mark) {
div01.style.width = '500px';
mark = false;
} else {
div01.style.width = '300px';
mark = true;
}
}

// for 循环
for (let i = 0; i < 6; i++) { // （计次变量；比较条件；递增1）
console.log(`第${i+1}次循环i值为${i}`);
}

// for 循环实际应用
let div = document.getElementsByTagName('div');
for (let i = 0; i < div.length; i++) {
div[i].onclick = function () {
console.log(`当前点击的div序号是：${i}`);
}
}

// while 循环
let num = 0;
let mark = true;
while (mark) {
console.log(num);
if (num===10) {
mark = false;
}
num++;
}

// do while 循环
do {
console.log('1'); // 先执行一次再循环
} while (false) {
console.log('2');
}

// 循环关键字属性
for (let i = 0; i < 9; i++) {
if (i === 5) {
continue; // 跳出当前次循环
break; // 停止for循环
}
console.log(`第${i+1}次循环i值为${i}`);
}
let a = 0;
while (true) {
if (a === 5) {
continue; // 跳出当前次循环
break; // 停止while循环
}
console.log(`第${i+1}次循环i值为${i}`);
a++;
}

// 知识点：for中for
for (let i = 0; i < 5; i++) {
for (let q = 0; q < 4; q++) {
}
console.log(1);
} // 共循环：5*4=20次
for (let i = 0; i < 5; i++) {
// i = 0,1,2,3,4
// q = 0,1,2,3
for (let q = 0; q < 4; q++) {
if (i === 2) {
break;
}
// i 执行 0,1,3,4
} 
console.log(1);
} // 共循环：4*4=16次

// lable标记：给for加上标记（l1,l2），以用于关键字属性定位
l1 : for (let i = 0; i < 5; i++) {
// i = 0,1,2,3,4
// q = 0,1,2,3
l2 : for (let q = 0; q < 4; q++) {
if (i === 2) {
break l1;
}
// i 执行 0,1
} 
console.log(1);
} // 共循环：2*4=8次

</script>

</body>

</html>