关于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>

  

posted on 2016-09-06 10:52  宁缺John  阅读(680)  评论(0编辑  收藏  举报

导航