算数运算符
<!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>
// + - * / %
console.log(1 + "1"); //加号不具备隐式转换
console.log("10" - "2"); //减号具备隐式转换
console.log("10" * "2"); //乘号具备隐式转换
console.log("10" / "2"); //除号具备隐式转换
console.log("10" % "2"); //求余号具备隐式转换
// 总结: 除加号外其余符合都具备隐式类型转换
</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 num;
// 给变量赋值
num = 10;
// 给变量重新赋值
num = num + 1;
console.log(num); // 11
num += 1; // num = num + 1
console.log(num);
num *= 2; // num = num * 2
console.log(num);
num /= 6; // num = num / 6
console.log(num);
num %= 2; // num = num % 2;
console.log(num);
// 总结: 给变量赋值用等号( = )给变量重新赋值可以简写(变量名 += 重新赋的值)
</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>
// 自增运算符 i++ ++i
var num1 = 10;
num1++; // num1 = num1 + 1;
console.log(num1); // 11
++num1;
console.log(num1); // 12
// 在不参与运算的情况下, 他们都自增1
// 在参与运算的情况下,++写在后面, 先参与运算, 然后加1
// ++写在前面, 在参与运算前, i先加1, 然后再参与运算
// ---------------------------------------------------------------------
// 自减运算符 i-- --i
var num2 = 10;
num2--; // num2 = num2 - 1;
console.log(num2); // 9
--num2;
console.log(num2); // 8
// 在不参与运算的情况下, 他们都自减1
// 在参与运算的情况下,--写在后面, 先参与运算, 然后减1
// --写在前面, 在参与运算前, i先减1, 然后再参与运算
</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>
//逻辑与 &&
console.log(false && true);
console.log(true && false);
//概念:
//逻辑与操作符 左右两边的操作数 只要有一个操作数结果为假
//那么整体结果就为假,并且 返回false的操作数
console.log("123" && 100);
//如果两个操作数都是true的话 则返回第二个操作数
console.log(null && undefined);
//如果第一个操作数结果是false 那么久返回第一个操作数
// -----------------------------------------------------------------
//逻辑或 ||
console.log(true || false);
console.log(false || true);
// 概念
// 逻辑或|| 左右两边的操作数 只要有一个结果为true 整体结果就为true
// 并且返回 结果为true的操作数
console.log(100 || undefined);
// 如果第一个操作数为true 就直接返回第一个操作数
console.log(null || undefined);
// 如果第一个操作数为false 则去寻找第二个操作数 如果也是false 则
// 返回第二个操作数
// -----------------------------------------------------------------
// 逻辑非!
console.log(!true); //false
console.log(!''); //true
console.log(!123); //false
console.log(undefined && !undefined); //undefined
console.log(undefined || !undefined); //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>
// 关系运算符有: < > <= >= == === != !==
console.log(3 < 2); //false
console.log(3 > 2); //true
console.log(10 <= 11); //true
console.log(11 <= 11); //true
console.log(11 >= 11); //true
console.log(12 >= 11); //true
// ------------------------------------------------------------
//== ===
// ==
// 比较两个操作数是否相等
console.log(10 == 10);
console.log(10 == '10'); //true
console.log(undefined == undefined); //true
console.log(null == null); //true
// == 具有隐式类型转换
// 会先将 左右两边的操作数 转换成同一种数据类型然后在进行比较
// ===
console.log(123 === 123); // true
console.log(123 === '123'); // false
console.log(undefined === undefined); // true
console.log(null === null); //true
// 不具备隐式类型转换 先比较数据类型 如果不相等结果就是false
// ------------------------------------------------------------
// !=
// 不等
console.log(11 != 11); //false
console.log(11 != '11'); //false
// ------------------------------------------------------------
// !==
// 不全等
console.log(11 !== '11'); //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>
// 三元运算符
// 语法糖
// 表达式 ? 表达式结果为true执行的代码 : 表达式结果为false执行的代码
// 用于作简单的业务逻辑判断
// 好处: 简单, 易读, 易写
// 不足: 不能作复杂的业务逻辑判断
var game = prompt("请输入您玩的游戏");
game == "英雄联盟" ? alert("玩的真六") : alert("真下饭");
// 常用运算符优先级从高到底
// 1.() 优先级最高
// 2. 一元运算符++ --!
// 3. 算数运算符 先 * / % 后 + -
// 4. 关系运算符 > >= < <=
// 5. 相等运算符 == != === !==
// 6. 逻辑运算符 先 && 后 ||
// 7. 赋值运算符
</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>
// 流程控制语句
// if ...else
// if (表达式) {
// 当表达式成立执行
// 代码块
// } else {
// 当表达式不成立执行
// 代码块
// }
// if ...else 例子
var num = prompt("请问你玩的什么游戏");
if (num == "穿越火线") {
document.write('那你很棒');
} else if (num == "英雄联盟") {
document.write("我也玩的很6");
} else {
document.write("你什么游戏都不玩,可真没意思")
}
// ---------------------------------------------------
// switch
// 执行顺序:
// 1. 首先会判断第一个 `case` 后面的值是否与表达式的结果相等;
// 2. 如果相等,就会执行 `case` 后面代码,当遇到 `break` 时,`switch` 语句停止执行;
// 3. 如果不匹配,接着判断下一个 `case` 后面的值;
// 4. 如果所有的 `case` 都不匹配, 程序会去执行 `default` 后面的代码;
// 5. switch比较的值是===等关系。
// switch (表达式) {
// case 常量:
// 代码1
// break;
// case 常量2:
// 代码2
// break;
// case 常量3:
// 代码3
// break;
// case 常量4:
// 代码4
// break;
// }
// switch 例子
var str = prompt('你玩什么游戏')
switch (str) {
case "穿越火线":
document.write('我也玩,我还有很多V');
break;
case "英雄联盟":
document.write('你真懂我,我也玩,全英雄哦');
break;
case "王者荣耀":
document.write('王者荣耀我不玩,我也荣耀。。。。其实是荣耀黄金哦');
break;
default:
document.write('什么游戏你都不玩,你的童年可真无趣');
break;
}
</script>
</body>
</html>
for循环
<!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>
// for循环
// 1. 首先进行变量初始化(`var i = 0`), 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。;
// 2. 判断条件表达式是否成立(`i <= 10`);
// 3. 如果条件成立,则执行循环体内的代码,执行完之后,执行 `i++`,让 `i` 自增 1 ,接着再次判断条件表达式是否成立,如此循环往复,直到条件表达式不成立为止;
// 4. 如果条件不成立,则循环体内的代码不会执行,循环结束。
// for (①var i = 0; ②i <= 10; ④i++) {
// 代码块
// ③console.log(i);
// }
// ①初始化变量(计数器)
// ②程序员编写表达式 判断成立否
// ③如果成立则执行代码块
// ④执行完代码块 让计数器自增 然后从②开始循环执行
// break 结束当前语句, break后面的代码将不再被执行;
// continue 结束当前一趟循环, 进入下一趟循环;
// 案例
// 逢七过:( 只是简单的7的倍数过)
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
console.log("过");
continue;
}
console.log(i);
}
</script>
</body>
</html>
while语句
<!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 i = 0;
while (i <= 100) {
// console.log(i);
if (i % 2 == 0) {
console.log(i);
}
i++;
}
// 判断表达式是否成立 执行大括号中的代码
// 直接开始判断表达式
</script>
</body>
</html>
do...while
<!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 i = 0;
do {
console.log(i);
// 循环体
// 代码块
i++;
} while (i <= 100)
// do while在执行的时候会先执行一次do
// 然后在判断条件表达式是否成立
// 1. 程序一开始,直接进入循环体内,执行一遍循环体内的代码;
// 2. 判断条件表达式是否成立,如果条件成立,那么继续执行循环体内的代码;
// 3. 如果条件表达式不成立,那么循环体内的代码就不再执行,循环结束;
</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>
// 金字塔
// 分析金字塔组成: 由空格和星星\ * 组成的三角形。
// 分析\ * 和空格的分布规律( 假设最上面的一个星星作为金字塔的第一层)。
// 每层星星前的空格 = 金字塔层数– 当前层数。 例如当前行数为第3层, 则空格数 = 5 - 3 = 2。
// 每层中星星的数量 = 当前层数\ * 2 - 1。 例如当前为第4层, 则星星数 = 4 * 2 - 1 = 7。
// 执行代码:
//先让用户输入一个金字塔的层数
var num = prompt("请输入一个数")
//for循环金字塔的层数
for (var i = 0; i < num; i++) {
//for循环金字塔每层数需要+多少空格空格
for (var k = 0; k < num - i; k++) {
document.write("  ")
}
//for循环每层星星的数量*2-1
for (var j = 0; j < i * 2 - 1; j++) {
document.write("⭐")
}
document.write("<br>")
}
// 乘法口诀
// 假设最上面的一层作为第1层, 乘法运算的规律:① 被乘数的取值范围在“ 1~每行中的列数” 之间。 如表格第3行中被乘数的值在1~3 之间。② 乘数的值 = 表格的行数。 如表格第3行中乘数的值就为3。
// 找规律, 假设最上面的一层作为第1层, 乘法运算的规律:① 被乘数的取值范围在“ 1~每行中的列数” 之间。 如表格第3行中被乘数的值在1~3 之间。② 乘数的值 = 表格的行数。 如表格第3行中乘数的值就为3。
// 执行代码:
document.write("<table cellspacing=0>")
//for循环每层的层数
for (var i = 1; i < 10; i++) {
document.write("<tr>")
//for循环每层有多少个
for (var j = 1; j <= i; j++) {
console.log(j)
document.write("<td>")
//利用+号拼接的性能进行拼接
document.write(j + "*" + i + "=" + i * j)
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>