关于JS的循环和函数,由入门到放弃
1.条件语句if
if 语句
if 语句是 ECMAScript 中最常用的语句之一,事实上在许多计算机语言中都是如此。
if 语句的语法:
if (condition) statement1 else statement2
其中 condition 可以是任何表达式,计算的结果甚至不必是真正的 boolean 值,ECMAScript 会把它转换成 boolean 值。
如果条件计算结果为 true,则执行 statement1;如果条件计算结果为 false,则执行 statement2。
每个语句都可以是单行代码,也可以是代码块。
还可以串联多个 if 语句。就像这样:
if (condition1) statement1 else if (condition2) statement2 else statement3
if (i > 30) { alert("大于 30"); } else if (i < 0) { alert("小于 0"); } else { alert("在 0 到 30 之间"); }
2.js while循环
利用 while 循环在指定条件为 true 时来循环执行代码。
语法:
while (变量<=结束值) { 需执行的代码 }
注意:除了<=,还可以使用其他的比较运算符。
do while 循环
do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码,然后当指定的条件为 true 时,它会继续这个循环。所以可以这么说,do...while 循环为执行至少一遍其中的代码,即使条件为 false,因为其中的代码执行后才会进行条件验证。
语法:
do { 需执行的代码 } while (变量<=结束值)
举个例子:
<html> <body> <script type="text/javascript"> var i=0 do { document.write("The number is " + i) document.write("<br />") i=i+1 } while (i<0) </script> </body> </html>
结果为:
The number is 0
3.switch语句
switch 语句是 if 语句的兄弟语句。
开发者可以用 switch 语句为表达式提供一系列的情况(case)。
语法:
switch (expression) case value: statement; break; case value: statement; break; case value: statement; break; case value: statement; break; ... case value: statement; break; default: statement;
每个情况(case)都是表示“如果 expression 等于 value,就执行 statement”。
关键字 break 会使代码跳出 switch 语句。如果没有关键字 break,代码执行就会继续进入下一个 case。
关键字 default 说明了表达式的结果不等于任何一种情况时的操作(事实上,它相对于 else 从句)。
switch 语句主要是为避免让开发者编写下面的代码:
if (i == 20) alert("20"); else if (i == 30) alert("30"); else if (i == 40) alert("40"); else alert("other");
等价的 switch 语句是这样的:
switch (i) { case 20: alert("20"); break; case 30: alert("30"); break; case 40: alert("40"); break; default: alert("other"); }
4.函数
什么是函数?
函数是一组可以随时随地运行的语句。
函数是 ECMAScript 的核心。
函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。
函数的基本语法是这样的:
function functionName(arg0, arg1, ... argN) { statements }
function sayHi(sName, sMessage) { alert("Hello " + sName + sMessage); }
如何调用函数?
函数可以通过其名字加上括号中的参数进行调用,如果有多个参数。
如果您想调用上例中的那个函数,可以使用如下的代码:
sayHi("David", " Nice to meet you!")
调用上面的函数 sayHi() 会生成一个警告窗口。
函数如何返回值?
函数 sayHi() 未返回值,不过不必专门声明它(像在 Java 中使用 void 那样)。
即使函数确实有值,也不必明确地声明它。该函数只需要使用 return 运算符后跟要返回的值即可。
function sum(iNum1, iNum2) { return iNum1 + iNum2; }
下面的代码把sum函数返回的值赋予一个变量:
var iResult = sum(1,1); alert(iResult); //输出 "2"
一个函数中可以有多个 return 语句,如下所示:
function diff(iNum1, iNum2) { if (iNum1 > iNum2) { return iNum1 - iNum2; } else { return iNum2 - iNum1; } }
上面的函数用于返回两个数的差。要实现这一点,必须用较大的数减去较小的数,因此用 if 语句决定执行哪个 return 语句。
如果函数无返回值,那么可以调用没有参数的 return 运算符,随时退出函数。
例如:
function sayHi(sMessage) { if (sMessage == "bye") { return; } alert(sMessage); }
这段代码中,如果 sMessage 等于 "bye",就永远不显示警告框。
5.下面分享三个循环和函数的小程序
用js输出9*9表格
script type="text/javascript"> out = "<table border=1>" for(i = 1; i <= 9; i++) { out += "<tr height=50>" for(j = 1; j <= 9; j++) { out += "<td width=50>" + i * j + "</td>" } out += "</tr>" } document.writeln(out += "</table>") </script>
输出99乘法表
<script type="text/javascript"> var i = 1 while(i <= 9) //决定行数 { var j = 1; while(j <= i) //决定每一行有几个式子 { document.write(j + "*" + i + "=" + (i * j) + " "); j++; } i++; document.write("<br>"); } </script>
函数和循环结合输出国际象棋棋盘:
<script type="text/javascript"> function qq(icq) { document.write('<div style="background: ' + (icq ? "black" : "white") + ';width:60px;height:60px;float:left; "></div>'); //三目运算符判断棋盘格子背景颜色的输出 } for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { if (j == 0) { document.write('<div style="clear:both;"></div>');//清楚浮动 } if (i % 2 == 0) { if (j % 2 == 0) { qq(true);//偶数行的偶数列输出黑色背景 } else { qq(); //偶数行的奇数列输出白色背景 } } else { if (j % 2 != 0) { qq(true); //奇数行奇数列输出黑色背景 } else { qq(); //奇数行偶数列输出白色背景 } } } } </script>