JavaScript 中提供了 if 条件判断句, for 循环语句, while 循环语句, do...while 循环语句, break 语句, continue 语句和 switch 多路分支语句 7 种控制流程语句.
赋值语句
条件判断语句
循环控制语句
跳转语句
赋值语句: 在程序中, 往往需要大量的变量来存储程序中用到的数据, 所以用来对变量进行赋值的语句也会在程序中大量出现
变量名 = 表达式;
当使用关键字 var 声明变量时, 可以同时使用赋值语句对声明的变量进行赋值:
- var varible = 50;
- var varible = "欢迎来到我的博客 https://www.cnblogs.com/cmd5/";
- var bue = true;
建议在使用变量前就对其进行声明, 因为声明变量的最大好处就是能及时发现代码中的错误, 这一点我深有体会. 原因在于 JavaScript 是采用动态编译的, 动态编译是不宜于发现代码中的错误的
条件判断句:
条件判断句会对语句中的不同的条件的值进行判断, 今儿根据不同的条件执行不同的语句
条件判断语句主要分为两类:
if 语句
switch 多分支语句
简单的 if 语句:
简单 if 语句的语法格式如下:
- if(expression){
- statement1
- }
参数说明:
expression: 必选项, 用于指定条件表达式, 可使用逻辑运算符
statement1: 用于指定要执行的语句序列. 当 expression 的值为 true 时, 执行该语句序列
用法:
- var a=200; // 定义变量 a, 值为 200
- var b =100; // 定义变量 b, 值为 100
- if(a>b){ // 判断变量 a 的值, 是否大于变量 b 的值
- alert('a 大于 b'); // 输出弹出 a 大于 b
- }
- if(a<b){ // 判断变量 a 的值是否小于变量 b
alert('a 小于 b'); 输出弹出 a 小于 b
}
运行结果
a 大于 b
if ...else 语句:
当 expression 的值是 false 时, 执行 else 从句的内容, 语法格式如下:
- if(expression){
- statement1
- }else{
- statement2
- }
上述 if 语句是典型的二路分支结构, 其中 else 部分可以省略, 而且 statement 1 为单一语句时,
其两边的大括号也可以省略
根据变量值的不同, 输出不同, 输出不同的内容.
- var form=0;
- if(form==1){
- alert('form==1');
- }else{
- alert('form!=1');
- }
运行结果
form!=1
if...else if 语句:
if 语句是一种很灵活的语句, 除了可以使用 if...else 语句的形式. 还可以使用 if...else if 语句的形式
if ...else if 语句的语法格式:
- if(expression){
- statement 1
- }else if{
- statement 2
- }
- ...
- else if(expression){
- statement n
- }else{
- statement n+1
- }
else if 语句对多条件进行判断
程序清单: 判断用户是否输入用户名与密码
(1) 在页面中添加用户登录表单和表单元素, 代码如下:
- <form name="form1" method="post" action="">
- <table width="221" border="1" cellspacing="0"
- cellpadding="0" bordercolor="#fff"
- bordercolordark="#CCC" bordercolorlight="#fff">
- <tr><td height="30" colspan="2" bgcolor="#eee">
用户登录 </td></tr>
- <tr>
- <td width="59" height="30"> 用户名 </td>
- <td width="162"><input type="text"
- name="user"></td>
- </tr>
- <tr>
- <td height="30"> 密码 </td>
- <td><input type="password" name="pwd">
- </td>
- </tr>
- <tr>
- <td height="30" colspan="2" align="center"><input type="button" name="Button" class="btn_grey" value="登录" onclick="check()">
- <input type="reset" name="Submit2" class="btn_grey" value="重置">
- </td>
- </tr>
- </table>
- </form>
(2) 编写自定义的 JavaScript 函数 check(), 通过用于 if 语句验证登录信息是否为空. check() 函数的具体代码如下:
- <script type="text/javascript">
- function check(){
- var name = form1.user.value;
- var pwd = form1.pwd.value;
- if ((name=='')||name==null) {
- alert('请输入用户名');
- form1.user.focus();
- return;
- }else if((pwd=="")||(pwd==null)){
- alert('请输入密码');
- form1.pwd.value;
- form1.pwd.focus();
- return;
- }else{
- form1.Submit();
- }
- }
- </script>
应用 else if 语句输出问候语
首先定义一个变量获取当前时间, 然后应用 getHours() 方法获取当前时间的小时值, 最后应用 else if 语句判断在不同的时间段输出不同的问候语:
程序清单:
- <script type="text/javascript">
- var date = new Date();
- var hours = date.getHours();
- if (hours>5&&hours<=7) {
- alert('早上好');
- }else if (hours>7&&hours<=11) {
- alert('上午好! 祝您好心情');
- }else if (hours>11&&hours<=13) {
- alert('中午好!');
- }else if (hours>13&&hours<=17) {
- alert('下午好!');
- }else if (hours>17&&hours<=21) {
- alert('晚上好!');
- }else if (hours>21&&hours<=23) {
- alert('夜深了, 注意身体哦')
- }else{
- alert('凌晨啦, 您该休息了');
- }
- </script>
if 嵌套语句: 以后有时间再补充这个例子, 简单的说就是, if 语句里面, 再嵌套一个完整的 if 语句
switch 语句:
switch 语句是典型的多分支语句, 其作用与嵌套使用 if 语句基本相同, 但是 switch 语句比 if 语句更具有可读性, 而且 switch 语句允许在找不到一个匹配条件的情况下执行默认的一组语句, switch 语句的语法格式如下:
- switch(expression){
- case judgement 1:
- statement 1;
- break;
- case judgement2:
- statement2;
- break;
- case judgement 3:
- statement 3;
- break;
- ....
- case judgement n:
- statement n;
- break;
- default:
- statement n+1;
- break;
- }
expression: 任意的表达式或变量
judgement: 任意的常数表达式. 当 expression 的值与某个 judgement 的值相等时, 就执行此 case 后面的 statement 语句; 如果不等, 就执行 default 后面等 statement 语句.
break: 用于结束 switch 语句, 从而使 JavaScript 只执行匹配的分支. 如果没有了 break 语句, 则该 switch 语句的所有分支都将被执行, switch 语句也就是失去了使用的意义
应用我 switch 语句判断当前是星期几
程序清单:
<script type="text/javascript"> var now = new Date(); var day = now.getDay(); var week; switch(day){ case 1: week = "星期一"; break; case 2: week = "星期二"; break; case 3: week = "星期三"; break; case 4: week = "星期四"; break; case 5: week = "星期五"; break; case 6: week = "星期六"; break; case 7: week = "星期天"; break; } document.write('今天是'+week); </script>
循环控制语句:
所谓循环语句就是在满足条件的情况下反复执行某一个操作. 循环控制语句主要包括 while,do...while 和 for
while 语句
do...while 语句
for 循环
while 语句可以实现循环操作. while 循环语句也称为前测试循环语句, 是利用一个条件来控制是否要继续重复执行这个语句. while 循环语句与 for 循环语句相比, 无论是语法还是执行的流程, 都为简明易懂. while 循环语句的语法格式如下:
- while(expression){
- statement
- }
参数说明:
expression: 一个包含比较运算符的条件表达式
statement: 用来指定循环体, 在循环条件的结果为 true 时, 重复执行
你知道吗?
while 循环语句之所以命名为前测试循环, 是因为它先要判断此循环的条件是否成立, 然后进行重复执行的操作, 也就是说, while 循环语句执行的过程是先判断条件表达式, 如果条件表达式成立的值为 true, 则执行循环体, 并且在循环体结束执行完毕后, 进入下一次循环, 否则退出循环
说明:
在使用 while 循环语句时, 也一定要保证循环可以正常结束, 即必须保证表达式的值存在 fasle 的情况, 否则将形成我循环. 例如, 下面的循环语句就会造成死循环, 原因是 i 永远都小于 100
程序清单:
- var i = 1;
- while(i<100){
- alert(i); // 输出 i 的值
- }
while 循环经常用于循环次数不确定的情况下.
通过 while 循环语句实现在页面中列举出累加和不大于 10 的所有自然数.
程序清单:
- <script type="text/javascript">
- var i = 1;
- var sum = i;
- var result = '';
- document.write('累加和不大于 10 的所有自然数为:<br>');
- while(sum<10){
- sum = sum + i;
- document.write(i+'<br>');
- i++;
- }
- </script>
do...while 语句:
do...while 循环语句也称为后测试循环语句, 它也是利用一个条件来控制是否要继续重复执行这个语句. 与 while 循环所不同的是, do..while 先执行一次循环语句, 然后哦安段是否继续执行.
语法格式如下:
- do{
- statement
- }while(expression);
do...while 循环, 无论如何先被执行一次, 然后在循环条件结果为 true 时, 重复执行
for 循环:
for 循环也被称为计次循环语句, 一般用于循环次数已知的情况
语法格式如下:
- for(initialize;test;increment){
- statement
- }
参数说明:
initialize: 初始化语句, 用来对变量循环进行初始化赋值
text: 循环条件, 一个包含比较运算符的表达式, 用来限定循环变量的边限. 如果循环变量超过了该边限, 则停止该循环语句的执行
increment: 用来指定循环变量的步幅
statement: 用来指定循环体, 在循环条件的结果为 true 时, 重复执行
你知道吗?
for 循环语句执行的过程是: 先执行初始化语句, 然后判断循环条件, 如果循环条件的结果为 true, 则执行一次循环, 否则直接退出循环, 最后执行迭代语句, 改变循环变量的值, 至此完成一次循环; 接下来将进行下一次循环, 知道循环条件的结果为 false, 才结束循环
计算 100 以内各奇数的和
程序清单:
- <script type="text/javascript">
- var sum = 0;
- for (var i = 1; i <100; i+=2) {
- sum+=i
- }
- document.write('100 以内所有奇数的和为'+sum);
- </script>
允许结果:
100 以内所有奇数的和为 2500
跳转语句:
continue 语句
break 语句
continue 语句:
continue 语句和 break 语句类似, 不同在于 break 语句退出循环, 而 continue 语句用于中止本次循环, 并开始下一次循环
注意: continue 语句只能应用于在 while,for,do...while 语句中
在 for 循环中通过 continue 语句计算金额大于等于 1000 的数据的和代码如下:
- <script type="text/javascript">
- var total = 0;
- var sum = new Array(1000,1200,100,600,736,1107,1205);
- for (var i = 0; i <sum.length; i++) {
- if (sum[i]<1000) continue;
- total+=sum[i];
- }
- document.write('累加和为'+total);
- </script>
运行结果:
累加和为 4512
当使用 continue 语句中止本次循环后, 如果循环条件的结果为 false, 则退出循环, 否则继续下一次循环
break 语句:
break 语句用于包含最内层的循环或者退出一个 switch 语句.
break 语句通常用在 for,while,do...while 或 switch 语句中
for 语句中通过 break 语句来中断循环的代码如下:
- <script type="text/javascript">
- var sum = 0;
- for (var i = 0; i <100; i++) {
- sum += i;
- if (sum> 10) break; // 如果 sum 大于 10 就会立刻跳出循环
- }
- document.write('0 至'+i+'(包括'+i+') 之间的自然数的累加和为:'+sum);
- </script>
- <script type="text/javascript">
- var sum = 0;
- for (var i = 0; i <100; i++) {
- sum += i;
- if (sum> 10) break; // 如果 sum 大于 10 就会立刻跳出循环
- }
- document.write('0 至'+i+'(包括'+i+') 之间的自然数的累加和为:'+sum);
- </script>
运行结果:
0 至 5(包括 5) 之间的自然数的累加和为: 15
---------------------------------------------------------------------------
到这里 JavaScript 控制流程就到这里啦, 现在是 2020 年 8 月 7 日 晚 23:46 分了, 前两天又没有更新, 我家里这边下大雨了, 是我出生以来最大的雨, 也是持续时间最长的. 接下来如果没有其他琐碎的事情的话, 希望我能连更, 睡觉去了
==== 还有一点, 最后 break 有一个实例 -------- 页面中显示距离某年元旦的天数, 明天早上再起来更新吧, 是在是太困啦
下一个大章节《JavaScript 函数》记得来看
来源: http://www.bubuko.com/infodetail-3654812.html