JavaScript基础05-day07【条件运算符、运算符优先级、代码块、if语句】

比眉伴天荒 2022-12-07 12:26 132阅读 0赞

> **学习地址：**
> 
> 1.  [谷粒学院---尚硅谷][---]
> 2.  [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)][JavaScript_140_JS]
> 
> --------------------
> 
> [JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】][JavaScript_JavaScript_140_JS]

***目   录***

课时 25 : JS基础\_条件运算符

课时 26 : JS基础\_运算符的优先级

运算符优先级表（从上到下，优先级递减）

课时 27 : JS基础\_代码块

课时 28 : JS基础\_if语句（一）

课时 29 : JS基础\_if语句（二）

课时 30 : JS基础\_练习

--------------------

# 课时 25 : JS基础\_条件运算符 #

> /\*  
>  \* 条件运算符也叫三元运算符  
>  \*     语法：  
>  \*         条件表达式?语句1:语句2;  
>  \*     - 执行的流程：  
>  \*         条件运算符在执行时，首先对条件表达式进行求值，  
>  \*             如果该值为true，则执行语句1，并返回执行结果  
>  \*             如果该值为false，则执行语句2，并返回执行结果  
>  \*         如果条件的表达式的求值结果是一个非布尔值，  
>  \*             会将其转换为布尔值，然后再运算。  
>  \*/

> ![20210113173625334.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

# 课时 26 : JS基础\_运算符的优先级 #

> /\*  
>  \*     , 运算符  
>  \*     使用,可以分割多个语句，一般可以在声明多个变量时使用,  
>  \*/  
> //使用,运算符同时声明多个变量  
> //var a , b , c;
> 
> //可以同时声明多个变量并赋值  
> //var a=1 , b=2 , c=3;  
> //alert(b);
> 
> /\*  
>  \* 就和数学中一样，在JS中运算符也有优先级，  
>  \*     比如：先乘除 后加减  
>  \* 在JS中有一个运算符优先级的表，  
>  \*     在表中越靠上，优先级越高，优先级越高越优先计算，  
>  \*     如果优先级一样，则从左往右计算。  
>  \* 但是这个表我们并不需要记忆，如果遇到优先级不清楚  
>  \*     可以使用()来改变优先级  
>  \*/
> 
> ![20210113180311318.png][]
> 
> 1 || 2 -> 1：第一个为true，不用看第二个。
> 
> 1 && 3：第一个为true，返回第二个（3）。

## 运算符优先级表（从上到下，优先级递减） ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

# 课时 27 : JS基础\_代码块 #

> **语句**
> 
>  *  前边我所说表达式和运算符等内容可以理解成是我们一门语言中的单词、短语。
>  *  而语句（statement）就是我们这个语言中一句一句完整的话了。
>  *  语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用;结尾。
>  *  JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

> /\*  
>  \* 我们的程序是由一条一条语句构成的  
>  \*     语句是按照自上向下的顺序一条一条执行的  
>  \*     在JS中可以使用\{\}来为语句进行分组,  
>  \*         同一个\{\}中的语句我们称为是一组语句，  
>  \*         它们要么都执行，要么都不执行，  
>  \*         一个\{\}中的语句我们也称为叫一个代码块  
>  \*         在代码块的后边就不用再编写;了  
>  \*   
>  \*     JS中的代码块，只具有分组的的作用，没有其他的用途。  
>  \*         代码块内容的内容，在外部是完全可见的。  
>  \*/
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

# 课时 28 : JS基础\_if语句（一） #

> /\*  
>  \* 流程控制语句  
>  \*     - JS中的程序是从上到下一行一行执行的  
>  \*     - 通过流程控制语句可以控制程序执行流程，  
>  \*         使程序可以根据一定的条件来选择执行  
>  \*  - 语句的分类：  
>  \*         1.条件判断语句  
>  \*         2.条件分支语句  
>  \*         3.循环语句  
>  \*   
>  \*   
>  \* 条件判断语句：  
>  \*     - 使用条件判断语句可以在执行某个语句之前进行判断，  
>  \*         如果条件成立才会执行语句，条件不成立则语句不执行。  
>  \*  - if语句  
>  \*     - 语法一：  
>  \*         if(条件表达式)\{  
>  \*             语句...  
>  \*         \}  
>  \*               
>  \*         if语句在执行时，会先对条件表达式进行求值判断，  
>  \*         如果条件表达式的值为true，则执行if后的语句，  
>  \*         如果条件表达式的值为false，则不会执行if后的语句。  
>  \*             if语句只能控制紧随其后的那个语句,  
>  \*                 如果希望if语句可以控制多条语句，  
>  \*                 可以将这些语句统一放到代码块中  
>  \*             if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句  
>  \*               
>  \*/
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

# 课时 29 : JS基础\_if语句（二） #

> /\*  
>  \* if语句  
>  \*     语法二:  
>  \*         if(条件表达式)\{  
>  \*             语句...  
>  \*         \}else\{  
>  \*             语句...  
>  \*         \}  
>  \*   
>  \*     if...else...语句  
>  \*         当该语句执行时，会先对if后的条件表达式进行求值判断，  
>  \*             如果该值为true，则执行if后的语句  
>  \*             如果该值为false，则执行else后的语句  
>  \*   
>  \*     语法三：  
>  \*         if(条件表达式)\{  
>  \*             语句...  
>  \*         \}else if(条件表达式)\{  
>  \*             语句...  
>  \*         \}else if(条件表达式)\{  
>  \*             语句...  
>  \*         \}else\{  
>  \*             语句...  
>  \*         \}  
>  \*   
>  \*         if...else if...else  
>  \*             当该语句执行时，会从上到下依次对条件表达式进行求值判断  
>  \*             如果值为true，则执行当前语句。  
>  \*             如果值为false，则继续向下判断。  
>  \*             如果所有的条件都不满足，则执行最后一个else后的语句  
>  \*             该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句  
>  \*/

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			var age = 50;
    			if (age >= 60) {
    				alert("你已经退休了~~");
    			} else {
    				alert("你还没退休~~~");
    			}
    			
    			age = 200;
    			if (age > 100) {
    				alert("活着挺没意思的~~");
    			} else if (age > 80) {
    				alert("你也老大不小的了~~");
    			} else if (age > 60) {
    				alert("你也退休了~~");
    			} else if (age > 30) {
    				alert("你已经中年了~~");
    			} else if (age > 17) {
    				alert("你已经成年了");
    			} else {
    				alert("你还是个小孩子~~");
    			}
    			
    			age = 90;
    			if (age > 17 && age <= 30) {
    				alert("你已经成年了");
    			} else if (age > 30 && age <= 60) {
    				alert("你已经中年了");
    			} else if (age > 60 && age <= 80) {
    				alert("你已经退休了");
    			} else {
    				alert("你岁数挺大的了~~");
    			}
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

# 课时 30 : JS基础\_练习 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]
> 
> /\*  
>  \* prompt()可以弹出一个提示框，该提示框中会带有一个文本框，  
>  \*     用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，  
>  \*     该字符串将会作为提示框的提示文字  
>  \*   
>  \* 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容  
>  \*/  
> var score = prompt("请输入小明的期末成绩:");  
> alert(score);

[---]: http://www.gulixueyuan.com/my/course/58
[JavaScript_140_JS]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript_JavaScript_140_JS]: https://blog.csdn.net/weixin_44949135/article/details/108621932
[20210113173625334.png]: /images/20221123/9296191a234a487785d72633429d11dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221123/316020e500144bb4b6064d831ee13dcc.png
[20210113180311318.png]: /images/20221123/fe2a1b04feb0487583ced716e4902526.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/2472ba4565194479aa55139ca3d6e119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/0b8316490a0c4f0b8961d0d7e3c91063.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/34884acf3af845ed83018c1c8af60d1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221123/a31c33e165be41efbedb0332063cde78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221123/986f0684e4c44adcb2e239c747817c18.png