本文详细介绍了JavaScript的基础知识，包括五种输出语句（alert、confirm、prompt、document.write和控制台输出）、运算符（算术、赋值、比较、逻辑和一元）以及流程控制（if、switch和三元运算符）。通过实例演示和练习，帮助读者掌握这些基本概念和用法，并对比了不同运算符和控制结构的特点和应用场景。
■ 教学目标
能够说出5种输出语句
能够说出至少3种JS运算符
能够独立写出if判断的三种语法
能够独立写出switch语法
能够独立写出三元运算符
能够独立说出判断、switch、三元运算符的区别
一、输出语句 (5种) !!!
语法
-
alert : 警告框
// 作用：alert会弹出一个警告框 // 语法：alert(内容) //思考：什么时候不加引号（纯数字、变量） alert("hello world"); -
confirm : 确认框
// 作用：confirm弹出一个确定框 // 语法：var data = confirm(内容) // 返回：返回用户操作结果确定-true、取消-false var data = confirm("我帅吗？"); -
prompt : 输入框
// 作用：prompt:弹出一个输入框，可以输入值 // 语法：var data = prompt(内容) // 返回：返回用户输入的内容，通过变量接受 var data = prompt("请输入你的真实年龄"); -
document.write : 网页中写入内容
// 作用：网页中写入内容(可以识别标签) // 语法：document.write(内容) document.write("hello world"); document.write("<h1>hello world</h1>"); -
控制台输出
// 作用：F12打开控制台，在console中可以看到打印的信息 // 语法：confirm(内容) console.log("hello word");
练习
<script>
/*
作用：弹出一个警告框
语法：alert(内容)
返回：没有
作用：弹出一个确认框
实战：删除的时候让用户确定
语法：var data = confirm("确定删除吗？")
返回：bool true-确定，false-取消
作用：弹出一个输入
语法：var data = prompt("提示信息")
返回：用户输入的内容
作用：控制台输出
实战：解决BUG 调试使用
语法：console.log/warn/error(内容)
作用：在网页中输出内容
语法：document.write(内容)
*/
// 需求1：通过alert弹出 朱效海 朱总
// alert("朱总")
// 需求2：提问用户确定删除吗？
// confirm("确定删除吗？")
// var data = confirm("确定删除吗？")
// alert(data)
// 需求3：弹出输入框
// var data = prompt("请输入你的年龄")
// alert(data)
// 需求4：控制台输出
// console.log("提示")
// console.warn("提示2")
// console.error("提示3")
// 需求5：在网页输出内容
// document.write("你好，靠你青蛙")
</script>
小总结
alert、confirm、prompt仅学习使用、较为有意思 太丑实战不用
console.log 学习/工作 100% 调试BUG
document.write 了解
二、运算符
- 就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式
数学运算符（+、-、*、/、%）
语法：var 变量 = 数据 ±*/% 数据 结果赋值给变量
语法：console.log(数据 ±*/% 数据) 结果直接打印出来
留心：如果加号左右有字符串则连接
代码
<script>
// 需求：声明两个变量 a 1 b 1
// 然后：进行+-*/%
var a = 1
var b = 1
var rs = a + b // 首先结果赋值给rs这个仓库/变量
console.log(rs) // 然后打印
console.log(a - b) // 直接打印结果
console.log(a * b) // 直接打印结果
console.log(a / b) // 直接打印结果
console.log(a % b) // 直接打印结果
console.log('--------')
var temp = 1 + 1
console.log(temp) // 2
var temp = 1 + "1" // +号如果有字符串 就连接/拼接
console.log(temp) // 11
console.log('----取余----')
console.log(1 % 2) // 1
console.log(2 % 2) // 0
console.log(3 % 2) // 1
console.log(4 % 2) // 0
console.log(5 % 2) // 1
</script>
思考1：var temp = 10 + 10 * 2 先乘除 后加减
回答1：30
思考2：var temp = 1 + “1”
回答2：11
赋值运算符（=、+=、-=、*=、/=）
语法
明确：在js中一个等号是赋值
举例：var 变量名 = 值 // 将 = 右边的数据 放到 左边的 变量中/仓库中
留心：下述语法 只能修改
接着：+=、-=、*=、/=
就是：仓库里面的数据 自己数据+新数据、自己数据-新数据、自己数据*新数据.....
代码：变量名 += 值
演变：变量名 = 变量名 + 值
代码：变量名 *= 值
演变：变量名 = 变量名 * 值
代码
<script>
// var temp = 1;
// temp += 6; // temp = temp + 6
// console.log(temp) // 7
var temp = 2
temp*=5 // temp = temp * 5
console.log(temp) // 10
// var rs += 5 // 留心：报错因为rs没有定义
// 演变 var rs = rs + 5
// 因为 没有rs 所以报错
</script>
比较运算符（>、<、>=、<=、、!=、=、!==）
语法
明确：比较肯定有两个值，然后布尔值 成立-true，不成立-false
> 大于
< 小于
>= 大于等于（只有有一个成立 就返回true
<= 小于等于（只要有一个成立 就返回true
= 赋值
== 判断值是否相当
=== 全等（既判断值又判断类型 既要值相等、又要类型相等 成立 true 否则返回false
!= 不等 只要值不相等就成立 true
!== 不全等（有判断值有判断类型 只要有一个成立 就成立 true
练习
需求
var status = 3 > 2; // var status = 3 < 2; // var status = 3 >= 2; // var status = 3 <= 2; // var status = 3 == 2; // var status = 3 == 3; // var status = 3 == "3"; // var status = 3 === "3"; // var status = 3 != 3; // var status = 3 != "3"; // var status = 3 !== "3"; //练习
var status = 3 > 2; // 成立 true var status = 3 < 2; // 不成立 false var status = 3 >= 2; // 成立 true var status = 3 <= 2; // 不成立 false var status = 3 == 2; // 不成立 false var status = 3 == 3; // 成立 true var status = 3 == "3"; // 成立 true var status = 3 === "3"; // 不成立 false var status = 3 != 3; // 不成立 false var status = 3 != "3"; // 不成立 false var status = 3 !== "3"; // 值 成立 类型 不成立 true
逻辑运算符（&& 、||、！）
语法
&& 并且（shift + 7 条件1 && 条件2 ... 都成立true 否则false
|| 或者（shift + enter上面 条件1 || 条件2 ... 只要一个成立true 否则false
! 取反
代码
需求
<script> console.log(3 > 2 && 2 > 3) // console.log(7 > 4 && 9 > 3) // console.log(3 > 2 || 2 > 3) // console.log(7 > 4 || 9 > 3) // console.log(!true) // console.log(!false) // var data = 3 > 2 // console.log(!data) // </script>练习
<script> console.log(3 > 2 && 2 > 3) // 成立 && 不成立 不成立 false console.log(7 > 4 && 9 > 3) // 成立 && 成立 成立 true console.log(3 > 2 || 2 > 3) // 成立 || 不成立 成立 true （切记：前面成立后面就不走 console.log(7 > 4 || 9 > 3) // 成立 || 成立 成立 true console.log(!true) // false console.log(!false) // true var data = 3 > 2 // 成立 true console.log(!data) // !true false </script>
自增自减运算符（一元运算符）
语法
语法：++/--变量名++/--
留心：++/--在前 先运算，在操作、++/--在后 先操作，再运算
代码
需求
<script> var num = 5 console.log(num--) // console.log(num++) // console.log(++num) // console.log(num) // console.log(num) // </script>代码
<script> var num = 5 // 盒子里面放的是5 console.log(num--) // 先操作 输出5 在运算 盒子4 console.log(num++) // 先操作 输出4 在运算 盒子5 console.log(++num) // 先运算 盒子6 再操作 输出 6 console.log(num) // 输出 6 console.log(num) // 输出 6 </script>
小总结
算术：+、-、*、/、%
赋值：=、 +=、-=、*=等 切记切记 先定义、再使用这个语法修改
比较：>、<、>=、<=、 = == === != !== （略难
逻辑：&& || ！
一元：++、--
综合练习
1、（表达式，运算符）已知a，b，c，求如下情况下d的值：
var a, b, c, d;
a = 1; b = 2.2; c = 3.3; d = a + b + c; // d = ? 6.5
a = 1; b = 2.2; c = “3.3”; d = a + b + c; // d = ? 3.23.3
a = 1; b = “2.2”; c = 3.3; d = a + b + c; // d = ? 12.23.3
a = “1”; b = 2.2; c = 3.3; d = a + b + c; // d = ? 12.23.3
a = “1”; b = 2.2; c = 3.3; d = a + (b + c); // d = ? 15.5
a = “1”; b = 2.2; c = 3.3; d = (a + b) + c; // d = ? 12.23.3
2、（运算符）读程序写结果
var i = 10; var j = i++; alert(i + “,” + j); // j = ？, i = ？
var i = 10; var j = ++i; alert(i + “,” + j); // j = ？, i = ？
var i = 10; var j = i++; i=j++; alert(i + “,” + j); // j = ？, i = ？
var i = 10; var j = ++i; i=++j; alert(i + “,” + j); // j = ？, i = ？
var i = 10; i=10
var j = i++; j=10 i=11
alert(i + “,” + j); // j = ？, i = ？
var i = 10; i=10
var j = ++i; i=11、j=11
alert(i + “,” + j); // j = ？, i = ？
var i = 10; i=10
var j = i++; j=10、i=11
i=j++; i=10、j=11
alert(i + “,” + j); // j = ？, i = ？
var i = 10; i=10
var j = ++i; i=11、j=11
i=++j; j=12、i=12
alert(i + “,” + j); // j = ？, i = ？
三、运算符 (优先级)
规则
练习
重点：// 小括号 -> 一元运算符 -> 乘除 -> 加减 -> 赋值
了解：工作面试用不到
var k=0; // 默认k盒子里面是0
console.log(k++ + ++k + k + k++);
// 0 + 2 + 2 + 2 = 6
// 盒子1 盒子2 盒子2 盒子3
var k = 0; // 默认k盒子里面是0
console.log(k++ + ++k);
// 0 + 2 = 2
// 盒子1 盒子2
var k = 0;
console.log(k++ + ++k + ++k + ++k);
// 0 + 2 + 3 4 = 9
// 盒子1 盒子2 盒子3 盒子4
var k = 0; // 默认k盒子里面是
console.log(k++ + --k + k-- + k++ + ++k);
var i = 1,j = 20;
console.log(i++ + --j + ++j + --i);
四、流程控制（概念理解）
引导
- 思考：下述代码如何实现？
- 解决：判断 if 生活中 假如
顺序结构
console.log("hello");
console.log("hello2");
console.log("hello3");
## 循环结构
循环结构：重复做一件事情
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r49ZmHtP-1623397583318)(images/循环结构.png)]
# 五、if条件-分支结构!!!
## ■ 明确需求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usDLAev5-1623397583319)(images/1566256720537.png)]
明确：在实战工作中经常需要判断数据显示还是不现实，如上图案例屡见不鲜
思考：如何实现？
回答：通过if判断
## ■ if 语句
## （单选 单分支）
- **语法**
> ```
> if (条件) {
> // 代码 （留心：当条件成立的时候就会执行大括号里面的代码
> }
> ```
- **练习**：输入一个整数判断是不是偶数（注：通过prompt语法 输入框）
## ■ if else 语句
## （二选一 双分支）
- **语法**
if (条件) {
// 条件成立 走第一个大括号代码
} else {
// 条件不成立 走第二个大括号代码
}
- **练习**：输入一个整数判断是奇数还是偶数（注：通过prompt语法）
```javascript
<script>
// 输入一个整数判断是奇数还是偶数（注：通过prompt语法）
// 1. 接受用户输入的数据
var data = prompt("请输入一个整数？")
console.log(data)
// 2. 判断 条件 数据 % 2 == 0 偶数 奇数
// if (data%2==0) { // 留心：两个等于
var rs = data%2==0 // 比较的结果
if (rs) { // 结果 真 假
alert("偶数")
} else {
alert("奇数")
}
</script>
■ if else if … else 语句
（多选一 多分支）
- 语法
if (条件1) {
// 条件1，成立执行
} else if (条件2) {
// 条件2，成立执行
} else if (条件3) {
// 条件3，成立执行
} .... {
} else {
// 以上条件都不成立执行
}
留心：只要有一个条件成立了，后续代码就不走了！！！
- 练习：
输入一个成绩判断该成绩属于哪个分类
90分及以上，优秀；
80分及以上，良好
70分及以上，一般
60分及以上，及格
60分以下，不及格
<script>
// 输入一个成绩判断该成绩属于哪个分类
// 90分及以上，优秀；
// 80分及以上，良好
// 70分及以上，一般
// 60分及以上，及格
// 60分以下，不及格
// 1. 声明变量 存放成绩 score cj
// 2. 判断成绩
// 1. 声明变量 存放成绩 score cj
var score = prompt("请输入成绩")
// 2. 判断成绩
if (score >= 90) {
alert("优秀")
} else if (score >= 80) {
alert("良好 ")
} else if (score >= 70) {
alert("一般 ")
} else if (score >= 60) {
alert("及格 ")
} else {
alert("不及格")
}
</script>
■ 小总结
应用场景：后期实战工作的时候网页根据不同情况显示不同结果
if判断语法有三个
单分支（单选）
双分支（二选一）
多分支（多选一）
if (条件1) {
} else if (条件2) {
}
...
else {
}
■ 综合案例（略难）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKzqvJkg-1623397583320)(images/1566267013640.png)]
■ 步骤1：显示静态页面 （直接复制）
<input type="text" id="input1" value="">
<select id="fuhao">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="input2" value="">
<button id="eqBtn">=</button>
<input type="text" id="result" value="">
■ 步骤2：当点击等号按钮时，获取【input框数据】和【运算符】得出结论，放到【结果框中】
<input type="text" id="input1" value="">
<select id="fuhao">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="input2" value="">
<button id="eqBtn">=</button>
<input type="text" id="result" value="">
<script>
/*
相关知识点
固定语法（注：后期还会详细学 现在直接用）
1. 通过语法【id属性值.onclick = function() { 这里面写JS代码 }】 点击之后出发
2. 通过语法【id属性值.value】获取input框里面的数据
3. 通过语法【id属性值.value = 数据】修改input框里面的数据
切记：点击等号之后获取input框获取（因为你会改变input框值 也就是每次点击都要重新获取）
*/
// 1. 给input框 增加点击效果
// 2. 在点击效果 function() {} 这里面写代码
eqBtn.onclick = function() {
// 先不着急写，先点击弹出1测试
// alert(2)
// 1. 获取第一个输入框里面的值
var input1Value = parseFloat(input1.value)
// 2. 获取select下拉框选择的符号
var fuhaoValue = fuhao.value
// 3. 获取第二个输入框里面的值
var input2Value = parseFloat(input2.value)
// 脚下留心：变量名随意，但是别跟上面的id属性值一样
// 4. 判断计算（结果 result 行业潜规则 rs）
if (fuhaoValue == '+') {
var rs = input1Value + input2Value
} else if (fuhaoValue == '-') {
var rs = input1Value - input2Value
} else if (fuhaoValue == '*') {
var rs = input1Value * input2Value
} else if (fuhaoValue == '/') {
var rs = input1Value / input2Value
} else {
var rs = '你有瑕疵啊'
}
// 5. 将 上述计算结果 放到最后一个框框里面
// id属性值.value = 数据
result.value = rs
}
</script>
六、switch条件-分支结构!!!
语法
switch(要判断的变量) { case 值1: // 值1成立，执行的代码 break case 值2: // 值2成立，执行的代码 break case 值3: // 值3成立，执行的代码 break ... default: // 以上都不成立执行的代码 }留心1：break必须写
留心2：switch、case、default都是系统关键词
留心3：switch常用于固定值判断
练习
需求： 根据变量给出的数字显示是星期几
代码：
<script>
// 需求： 根据变量给出的数字显示是星期几
// 代码
// 1.声明变量
var day = 2 // 1 2 3 4 5 6 7
// 2.判断
switch (day) {
case 1:
console.log('星期1')
break;
case 2:
console.log('星期2')
break;
case 3:
console.log('星期3')
break;
case 4:
console.log('星期4')
break;
case 5:
console.log('星期5')
break;
case 6:
console.log('星期6')
break;
case 7:
console.log('星期天')
break;
default:
console.log('你放假了！！！')
break;
}
</script>
七、switch判断和if判断的区别
if常用于范围判断（思考：可不可以写固定值判断，回答：可以 根据你写的运算符来决定 ==）
switch常用于固定值判断（其他了解：也可以范围判断、当条件true 全等判断
验证支持范围判断
<script> // 输入一个成绩判断该成绩属于哪个分类 // 90分及以上，优秀； // 80分及以上，良好 // 70分及以上，一般 // 60分及以上，及格 // 60分以下，不及格 // 1. 定义变量存放成绩 var score = 5 // 2. 判断 了解 switch (true) { case score>=90: console.log('优秀') break; case score>=80: console.log('良好') break; case score>=70: console.log('一般') break; case score>=60: console.log('及格') break; case score>=0: console.log('不及格') break; default: console.log('有瑕疵') break; } </script>验证固定值判断的是全等
// 验证：全等 var num = 1 switch (num) { // case 1: case '1': console.log(111) break; case 2: console.log(222) break; default: console.log(666) break; }验证：break不写就会出现瑕疵 90%都加 case穿透
// 验证：case穿透 var num = 1 switch (num) { case 1: console.log(111) // break; case 2: console.log(222) // break; case 3: console.log(333) // break; default: console.log(666) break; }
八、三元运算
语法
- 三元运算：顾名思义就是有三个操作组成（注：两个符号）
- 语法：操作1 ? 操作2 : 操作3
- 留心：操作1成立-操作2，操作1不成立-操作3
练习
- 需求：判断是奇数还是偶数
<script>
// 需求：弹框输入一个数 判断是奇数还是偶数
// 思路：1 声明变量 接受输入的数据
// 2 判断 数字%2 == 0 偶数
// 思路：1 声明变量 接受输入的数据
var data = prompt("请输入数字")
// 2 判断 数字%2 == 0 偶数
// data%2==0? alert("偶数") : alert("奇数")
// 多学一招：实战中三元运算符一般都会将结果复制给变量
var rs = data%2==0? "偶数" : "奇数"
alert(rs)
</script>
九、判断总结!!!
什么时候用if：常用于范围判断（固定值也行 而且可以控制 值相等和全等
什么时候用switch：常用于固定值判断
特性1： 固定值判断 全等 特性2：break不写 case穿透 第一个成立后面都成立打印 了解 特性3：当小括号为true 可以范围判断 了解
什么时候用三元运算符： if…else 可以减少代码行数
■ 复习
五种输出语句
弹出警告框：alert
弹出输输入框：prompt
弹出确认框：confirm
在网页输出：document.write
控制台输出：console.log
if判断
if (条件) {
条件为真执行的代码
}
if (条件) {
条件为真执行的代码
} else {
条件为假执行的代码
}
if (条件1) {
条件1为真执行的代码
} else if (条件2) {
条件2为真执行的代码
}
....
else {
以上条件都不成立执行的代码
}
switch判断
switch（变量）
{
case 值1:
条件成立执行的代码
break;
...
default:
以上条件都不成立执行的代码
break;
}
脚下留心：
1-默认switch用于固定值全等判断
2-当变量改为true时 可以范围判断 （了解）
3-break如果不写，case都会挨个执行 （case 穿透 了解）
三元运算符
操作1 ? 操作2 : 操作3
判断总结
范围判断常用：if
固定值判断常用：switch （相对而言 三个以上是否相等 举例：判断你男还是女 if较多）
三元运算符：简单判断 （可以用来代替 if...else 注：一般不是直接输出 而是赋值给变量）
循环：重复做一件事的表现
好处：提高工作效率
while：脚下留心只要循环条件为真就会一直循环
// 1. 声明循环变量
while (2.循环变量判断) {
// 3. 循环变量更新 脚下留心：如果没有更新就一直循环 死循环
}
、
■ 作业
- 代码题
见附件
- 非代码题目
1将课件一级标题需求练习至少敲三遍
2通过有道云笔记或word文档根据自己的理解整理学习笔记（晚整理，睡回忆，早读）
3预习明天课程内容
4晚自习下课前10分钟 小组成员相互提问 今日教学目标
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
