■ 教学目标

能够说出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("
  hello world
  ");
  

• 控制台输出

  // 作用：F12打开控制台，在console中可以看到打印的信息
  // 语法：confirm(内容)
  console.log("hello word");
  

练习

小总结

alert、confirm、prompt仅学习使用、较为有意思 太丑实战不用

console.log 学习/工作 100% 调试BUG

document.write 了解

二、运算符

• 就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

数学运算符（+、-、*、/、%）

语法：var 变量 = 数据 ±*/% 数据 结果赋值给变量

语法：console.log(数据 ±*/% 数据) 结果直接打印出来

留心：如果加号左右有字符串则连接

代码

思考1：var temp = 10 + 10 * 2 先乘除 后加减

回答1：30

思考2：var temp = 1 + “1”

回答2：11

赋值运算符（=、+=、-=、*=、/=）

语法

明确：在js中一个等号是赋值
举例：var 变量名 = 值    // 将 = 右边的数据  放到  左边的  变量中/仓库中留心：下述语法 只能修改
接着：+=、-=、*=、/=
就是：仓库里面的数据  自己数据+新数据、自己数据-新数据、自己数据*新数据.....
代码：变量名 += 值
演变：变量名 = 变量名 + 值
代码：变量名 *= 值
演变：变量名 = 变量名 * 值

代码

比较运算符（>、<、>=、<=、、!=、=、!==）

语法

明确：比较肯定有两个值，然后布尔值  成立-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
!   取反 

代码

需求

练习

自增自减运算符（一元运算符）

语法

语法：++/--变量名++/--
留心：++/--在前 先运算，在操作、++/--在后 先操作，再运算

代码

需求

代码

小总结

算术：+、-、*、/、%
赋值：=、  +=、-=、*=等  切记切记 先定义、再使用这个语法修改
比较：>、<、>=、<=、   = == ===  !=  !==  （略难
逻辑：&&  ||  ！
一元：++、--

综合练习

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     盒子3var k = 0; // 默认k盒子里面是0
console.log(k++ 	+ 	++k);
//         0		+   2		=  2
//        盒子1         盒子2var k = 0;
console.log(k++ + ++k + ++k + ++k);
// 			0   +  2  +  3		4   =  9
//         盒子1   盒子2  盒子3  盒子4var 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

■ 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：显示静态页面 （直接复制）

+-*/


=

■ 步骤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 全等判断

验证支持范围判断

验证固定值判断的是全等

// 验证：全等
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

练习

• 需求：判断是奇数还是偶数

九、判断总结!!!

什么时候用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分钟 小组成员相互提问 今日教学目标

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！