1. 顺序结构 : 从上到下，从左到右!;
2. 选择结构 : 逻辑分支;
3. 循环结构 ;
分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 语句的基本结构 :
// 关键字(){
// }
// 衍生结构 :
// 关键字 {} 关键字 (){}
// 关键字 (){} 关键字{}
// ...
// if
// if( 运算得到布尔值 : 基本操作 | 布尔值 : 不会有人去做的操作 | 数据 : 进阶操作 ){
// 代码
// }
// if( false ){
// alert("你好，我执行了");
// }
// var num = 10;
// if( num > 5){
// alert("这个数字大于5");
// }
// 假如 这个 num 是用户输入进来的数据那 ?
// prompt
// 确定 : 把用户输入的内容赋值给了 num 变量;
// 取消 : 把 null 赋值给了 num;
// var num = prompt("请输入任意数字");
// if( num > 5){
// alert("这个数字大于5");
// }
// if else
// var num = prompt("请输入任意数字");
// if( num > 5 ){
// alert("这个数字大于5");
// }else{
// alert("这个数字小于5");
// }
// 如果用户点击了 取消 , 那么返回结果为null，则错误的执行了else代码块;
// 修正BUG其实绝大多数情况下是在修正逻辑;
// var num = prompt("请输入任意数字");
// 这个数字必须大于5 ，并且不等于 布尔值;
// 进阶版 : else if 可以写无限多个;
// if() else if(){} else {}
// 原因 :
// 确定 :
// 如果用户输入的内容小于5 : 弹出 "输入内容小于5";
// 如果用户输入内容大于5 : 弹出 "输入内容大于5";
// 取消 :
// 用户点击取消之后 : 运算结果是 null;
var res = prompt("请输入数字");
// // console.log(res);
// // res : 用户输入的内容 ;
if( res > 5 ){
alert("用户输入内容大于5");
// 逻辑漏洞 => 用户点击了取消 res : null;
// 严谨逻辑 : 我不能只判断用户输入内容小于5
// 并且
// 用户不能点击取消;
}else if(res < 5 && res != null ){
alert("用户输入内容小于5");
}
// // 用户输入的内容是 大于 5 小于 5 还是取消
// // 刚才的问题 ：
// // 因为 JavaScript typeof 关键字有一个漏洞, typeof null => 结果是 "object";
// if(res < 5 && typeof res != "object"){
// alert("用户输入内容小于5");
// }
// switch 高级 : 小项目用不着，大项目必须用!;
// var num = 10;
// // switch ( 数据 )
// switch( num ){
// // 定义条件 ;
// // num 和 case 后面数据比对的方式 是绝对等于;
// case 10 :
// alert("hello world");
// }
// switch 更适用于精确的判断;
// switch的特性;
// switch 的穿透特性 : 如果 输入的数据满足了期中一个case条件，后面的条件会默认执行;
// 阻止switch 穿透; => break;
// var num = 4;
// // switch ( 数据 )
// switch( num ){
// case 4 :
// alert("hello world 我是4");
// break;
// case 5 :
// alert("hello world 我是5");
// case 6 :
// alert("hello world 我是6");
// case 7 :
// alert("hello world 我是7");
// }
// switch 的其他情况;
// 用 default 关键字接受其他情况;
var num = 10;
// switch ( 数据 )
switch( num ){
case 4 :
alert("hello world 我是4");
case 5 :
alert("hello world 我是5");
break;
case 6 :
alert("hello world 我是6");
case 7 :
alert("hello world 我是7");
default :
alert("hello world 我是" + num);
}
// 总结 ：
// 1. (数据) 和 case 数据 进行比对,比对方式是绝对等于;
// 2. switch 在执行的时候有一个特性 : 穿透; 可以使用 break 阻止穿透;
// 3. switch 结构的其余情况 可以使用default 接受;
</script>
</body>
</html>
分支练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 判定一个年份是不是闰年;
// 用户输入年份 => 我们判断输入内容是不是闰年 => 把结果告知给用户;
// var year = 2020;
// 算法 : 逻辑写算法 ;
// 判定year符不符合闰年规则 : 四年一闰年，百年不闰年 , 四百年一闰年。
// 如果年份模四等于 0 且 模 100 等于 0;
// 或者 年份模四百等于0;
// 四年一闰年 : 年份能被4整除，表示符合这个条件;
// year % 4 === 0;
// 百年不闰年 : 年份不能被100整除才是闰年;
// year % 100 !== 0;
// if( year % 4 === 0 && year % 100 !== 0){
// }
// 四百年一闰年 : 年份能被 400 整除，表示年份是闰年;
// : year % 400 === 0
// if( year % 400 === 0 ){
// }
// 逻辑合体 :
// 写算式 的时候一定要关注运算顺序;
// % 14
// === 10
// !== 10
// && 6
// || 5
// 运算顺序 :
// year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
// % === => % ;
// 结果 === 0 && year % 100 !== 0 || year % 400 === 0
// === && => ===
// 结果 && year % 100 !== 0 || year % 400 === 0
// && % => %;
//结果 && 结果 !== 0 || year % 400 === 0
//&& !== => !==
// 结果 && 结果 || year % 400 === 0
// && || => &&
// 结果 || year % 400 === 0
// || % => %;
// 结果 || 结果 === 0
// || === => ===
// 结果(四年一闰年百年不闰年) || 结果 (四百年一闰年)
// if( year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
// }
// 优化 :
// var year = prompt("请输入年份判定是否是闰年");
// if( year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
// alert(year + "是闰年");
// }else{
// alert(year + "不是闰年");
// }
// 判断一个数字是正数还是负数或者是零
// 情况 :
// 1. 正数
// 2. 负数
// 3. 0
// var num = prompt("请输入数字");
// BUG : 有些bug是因为你不熟悉程序的特性而导致的;
// 程序特性 : prompt你输入的内容，在代码之中获取，都是字符串!;
// console.log(num)
// 将输入进来的数据强制转换成数字再去进行判定;
// num = Number(num);
// 用户瞎输入;
// Number 在强制转换失败之后, 转换出来 NaN;
// 如何判定NaN;
// NaN === NaN ? false;
// JavaScript专门判定 NaN 的 API; isNaN;
// console.log(isNaN(num));
// if( isNaN(num) ){
// alert("请输入纯数字");
// }
// if( num > 0){
// alert("正数");
// }else if( num < 0){
// alert("负数");
// }else if( num === 0){
// alert("0");
// }
// 判定取消按钮，实现逻辑嵌套;
// if( num === null){
// alert("刷新后，可以重新输入内容");
// }else{
// num = Number(num);
// // 粘贴刚才的确定逻辑代码;
// if( isNaN(num) ){
// alert("请输入纯数字");
// }
// if( num > 0){
// alert("正数");
// }else if( num < 0){
// alert("负数");
// }else if( num === 0){
// alert("0");
// }
// }
// 判定是否点击了取消 :
// 是 : 提示重新输入;
// 否 : 1 . 判定是不是纯数字；
// 不是 : 给提示;
// 2 . 判定数字是大于零小于零还是等于0;
// 根据数字判断今天是周几（假设1号是周一）
// 有七种情况 :
// 周一 ， 周二 .... 周日;
// var date = 10;
// // var day = date % 7
// // 具体数据 , 多种情况 !;
// switch(date % 7){
// case 1 :
// alert("周一");
// break;
// case 2 :
// alert("周二");
// break;
// case 3 :
// alert("周三");
// break;
// case 4 :
// alert("周四");
// break;
// case 5 :
// alert("周五");
// break;
// case 6 :
// alert("周六");
// break;
// case 0 :
// alert("周日");
// }
// 根据成绩判断等级
// 成绩等级是怎么划分的!;
// 优秀 : 90 +
// 良好 : 60 ~ 89
// 一般 : 0 ~ 59
// 成绩
// var score = 95;
// if( score >= 90 ){
// alert("成绩优秀")
// // 错误示范 :
// // }else if( 60 <= score <= 89){
// // 范围要用与连接 !;
// }else if( score >= 60 && score <= 89){
// alert("成绩良好");
// }else{
// alert("成绩一般");
// }
// var score = 95;
// <= <= => <=
// 先计算第一个小于等于;
// 60 <= score => true;
// 60 <= score <= 89
// true <= 89
// 1 <= 89
// true;
</script>
</body>
</html>
隐式数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 隐式类型转换
// 运算之中发生隐式数据类型转换;
// + => 1 + "1" => "11"
// 分支结构相关!;
// if( 这里 ! 会发生隐式数据类型转换 => 布尔值 ){}
// 可以帮我们节省代码;
// if( 123 ){
// alert("hello world");
// }
// 判定一个数字是奇数还是偶数;
// var num = 10;
// var res = num % 2 ;
// // res => 1 => true => 奇数
// // => 0; => false => 偶数;
// if( num % 2 ){
// alert("奇数")
// }else{
// alert("偶数");
// }
</script>
</body>
</html>
短路运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 短路 : 省去不必要的运算;
// && 都成立才会返回true;
// 如果左侧已经为false，则不会执行右侧的结果;
// false && alert("hello world");
// 这个运算可以替代 单分支结果 if(){}
// 可以替代这个结构;
var num = prompt("请输入一个数字");
num > 10 && alert(num);
// || 都不成立才会返回false;
// true || 不执行了
// false || 执行;
// 上面的逻辑使用 || 来完成;
</script>
</body>
</html>
三目运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ? :
// 布尔值 ? 代码1 : 代码2 ;
// 如果布尔值为 true 则执行代码1 , 运算结果为 代码的执行结果;
// 如果布尔值为 false 则相反;
var num = prompt("请输入一个数字");
num > 0 ? alert("数字大于10") : alert("数字小于10");
// 这种写法 只允许存在一行代码不允许换行，复杂逻辑千万不要用这个鞋;
// 作业提示;
// switch(true){
// case 条件
// }
</script>
</body>
</html>