前端---js(自学笔记7)(js代码块、流程控制语句、if练习)

    技术2022-07-17  75

    js代码块:

    在js中,我们的程序是由一条一条的语句构成的, 是按照从上到下的顺序进行执行的。

    在js中我们可以用{}来为语句进行分组,同一个{ }里的语句我们称作为一组,他们要么同时执行,要么同时不执行。一个{ }中的语句我们也称作一个代码块。js的代码块,{ }只具有分组作用,没有其他作用。

    流程控制语句: 

    因为我们的执行语句是从上到下一行一行执行的, 我们可以通过流程控制语句控制我们执行的流程,可以使程序更具一定条件来选择执行。

    语句分类:

    条件判断语句条件分支语句循环语句

    1.条件判断语句: 

    使用条件判断语句可以在执行某个语句前进行判断,如果条件成立,则会执行,如果条件不成立,则不会执行。

     if语句的语法:

    方法一 if(条件表达式){ 语句... }

    if语句在执行前,对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句。如果条件表达式的值为false,则不执行if后的语句。

    if语句只能控制紧随其后的一条语句,如果想控制多条语句,则将他们放到代码块中。如上图语法;

    方法二 if(条件表达式){ 语句1... }else{ 语句2... }

    方法二:先对if语句进行条件表达式判断,如果条件表达式为true,则执行语句1。如果条件表达式为false,则执行else之后的语句。

    方法三 if(条件表达式){ 语句1... }else if{ 语句2... }else if{ 语句3... }else{ 语句4... }

    方法三:当执行该语句时,会从上到下依次对条件表达式进行判断执行,如果值为true,则执行当前语句。如果值为false,则继续向下判断,如果还不能满足,则执行最后一条else语句。

    该语句中,只能执行一个代码块,当一个代码块执行完毕,直接结束语句。

    if练习题:

    prompt()可以弹出一个提示框,该提示框中,会带有一个文本框。用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,该字符串会作为提示框的提示文字,并且prompt返回数值类型为string。

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>if 练习题</title> <!--输出小白成绩 当成绩为100,'奖励一辆车模型' 当成绩为[80-90],'奖励一台手机' 当成绩为[60-80],'奖励一本书' 其他时,'没有奖励'--> <script type="text/javascript"> var score =prompt("输入成绩(0-100):"); if (score>100 || score<0 || isNaN(score)){ alert('不属于范围之内') }else{ if(score==100){ alert('奖励一辆车模型') }else if(score>80 && score <=99){ alert('奖励一台手机') }else if(score>60 && score<= 80){ alert('奖励一台手机') }else{ alert('没有奖励') } } </script> </head> <body> </body> </html>

     结果演示:

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>if 练习题</title> <script type="text/javascript"> // 相亲要求,是否能成功牵手 // 高:180cm以上,富:1000万以上,帅:500以上; // 当三个条件同时满足,则'成功牵手', // 当三个条件有为真的时候,则'考虑中' // 当三个条件都不满足,则'牵手失败' var height = prompt("请输入身高(CM):"); var money = prompt("请输入财富(万):"); var face = prompt("请输入长相(px):"); if(height>=180 && money>=100 && face>=500){ alert('成功牵手') }else if(height>=180 || money>=100 || face>=500){ alert('考虑中') }else { alert('牵手失败') } </script> </head> <body> </body> </html>

    结果:

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>if 练习题</title> <script type="text/javascript"> // 编写程序,由键盘输入三个整数分别存入变量num1,num2,num3, // 对他们进行排序,并且从小到大输出 var num1 = +prompt("请输入第一数字:") var num2 = +prompt("请输入第二数字:") var num3 = +prompt("请输入第三数字:") if(num1<num2 && num1< num3){ if(num2>num3){ alert(num1+","+num2+","+num3) }else{ alert(num1+","+num3+","+num2) } }else if(num2<num1 && num2< num3){ if(num1>num3){ alert(num2+","+num3+","+num1) }else{ alert(num2+","+num1+","+num3) } }else { if(num1>num2){ alert(num3+","+num2+","+num1) }else{ alert(num3+","+num1+","+num2) } } </script> </head> <body> </body> </html>

     结果:

    2.条件分支语句: 

     条件分支语句switch:

    语法: switch(条件表达式){ case 表达式;          语句...          break; case 表达式;         语句...         break; case 表达式;        语句...        break; default:               语句...        break; }

    执行流程:

    执行流程是,先将case后的表达式,与switch后的条件语句进行全等比较,如果结果为true,则从当前case开始执行代码。每个case后边都有一个break,是因为当执行完case之后不执行后面的case。如果比较结果为false,则继续向下比较,如果比较结果都为false,则直接执行default后的语句。

    switch与if有很多相似之处,使用switch也可以实现if的语句,使用if也可以实现switch语句,看自身要求。

    练习题:

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>switch练习</title> <script type="text/javascript"> // 成绩大于60,输出合格,低于60,输出不合格 var score = prompt("请输入成绩:") switch(true){ case score>=60: alert("合格") break; default: alert("不合格") break; } </script> </head> <body> </body> </html>

     

    Processed: 0.011, SQL: 10