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

  

时间: 2024-08-06 22:32:27

关于JS的循环和函数,由入门到放弃的相关文章

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

JavaScript笔记(三):JS也有入口函数Main

在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

JS搞基指南----延迟对象入门提高资料整理

原文:JS搞基指南----延迟对象入门提高资料整理 JavaScript的Deferred是比较高大上的东西,  主要的应用还是主ajax的应用,  因为JS和nodeJS这几年的普及,  前端的代码越来越多,  各种回调套回调再套回调实在太让人崩溃, 所以就从后端拖了一个延迟对象这货, 用来解决回调地狱这个问题 .  我们使用ajax的时候多数都是为ajax添加回调 ,然后异步向服务器发送请求, 比如如下原生的XHR代码: <!DOCTYPE html PUBLIC "-//W3C//D

Grunt JS构建环境搭建以及使用入门

Grunt JS构建环境搭建以及使用入门 1.应用场景 一种自动化任务处理工具,对于日常的需求(代码规则检查.代码合并)可以实现自动化执行,只需要保留package.json和Gruntfile.js便能用一句代码行进行依赖下载. 2.搭建步骤 Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js,然后开始安装 Grunt. 2.1安装 Node.js 进入nodejs官网https://nodejs.org/en/download/,根据当前机型选择对应版本下载安装后,

Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

D3.js从入门到“放弃”指南

前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制:而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难.不理解,也看不进去. 后面因为接触了react.redux,接触了函数式编程.再回过头来从新捣鼓起

js事件循环机制辨析

?对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的地方,希望大家不吝赐教,感谢感谢. ?这是所涉及的知识点: 观察者模式 js的事件循环机制 js事件循环机制优缺点及与多线程的比较 观察者模式 ?js的事件循环机制是基于观察者模式的,而跟观察者模式相对应的是轮询,我们先来说说轮询的原理. ?我们将轮询映射在现实世界中即为:B不停到A的房间观察房间里

JavaScript(类型转换、条件语句、循环、函数)

类型装换 转为数字类型 // Number console.log(Number(undefined)); //NaN console.log(Number(null)); //0 console.log(Number(true)); // 1 console.log(Number(false)); // 0 console.log(Number('123')); //123 console.log(Number('123a')); //NaN console.log(Number('1.23'

node.js事件循环 event loop

Nodejs事件循环 (event loop) node.js 事件循环的概念 当node.js 启动的时候会初始化eventloop ,每一个evnet loop 都会包含如下6个循环阶段,node.js 事件循环和浏览器事件循环完全不一样. 官网文档:https://nodejs.org/zh-cn/docs/guides/event-loop-timers-and-nexttick/ timers pending callbacks (I/O callbakcs) idle, prepar