JavaScript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript:直接写入 HTML 输出流:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript:直接写入HTML输出流</title> <script type="text/javascript"> document.write("<h1>这个是一个标题</h1>"); document.write("<p>这是一个段落。</p>"); </script> </head> <body> <p> JavaScript 能够直接写入HTML输出流中: </p> <p> 你只能在HTML 输出流中使用 <strong>document.write</strong>。 如果你在文档已加载后使用它(比如在函数中,会覆盖整个文档)。 </p> </body> </html>
![]() | 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。 |
---|
JavaScript:对事件的反应:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript:对事件的反应</title> </head> <body> <h1>我的第一个JavaScript</h1> <p>JavaScript 能够对事件做出反应。比如对按钮的点击:</p> <input type="button" οnclick="alert('欢迎!')" value="点击我"/> </body> </html>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本节中学到的众多事件之一。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript:改变HTML的内容</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script type="text/javascript"> function check(){ x=document.getElementById("demo");//找到元素内容 x.innerHTML="Hello JavaScript!";//改变内容 } </script> <input type="button" οnclick="check()" value="vip宅男"/> </body> </html>
您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
您将在多个章节中学到有关 HTML DOM 的知识。
JavaScript:改变 HTML 图像
本例会动态地改变 HTML <image> 的来源(src):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("2.jpg")) { element.src="img/1.gif"; } else { element.src="img/2.jpg"; } } </script> <img id="myimage" οnclick="changeImage()" src="img/1.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p> </body> </html>JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript:改变HTM样式</title> </head> <body> <h1>我的第一阶段 JavaScript</h1> <p id="demo">JavaScript 能改变 HTML 元素的样式</p> <script TYPE="text/javascript"> function check(){ x=document.getElementById("demo");//找到元素 x.style.color="#ff0000";//改变样式 } </script> <input type="button" οnclick="check()" value="vip宅男"/> </body> </html>
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript:验证输入</title> </head> <body> <h1>这是我的第一段 JavaScript</h1> <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p> <input id="demo" type="text"/> <script type="text/javascript"> function check(){ var x=document.getElementById("demo").value; if(x==""||isNaN(x)){ alert("不是数字") } } </script> <input type="button" οnclick="check()" value="vip宅男"/> </body> </html>
您知道吗?
![]() | JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。 Java(由 Sun 发明)是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。 |
---|
ECMAScript 版本
JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。
年份 | 名称 | 描述 |
---|---|---|
1997 | ECMAScript 1 | 第一个版本 |
1998 | ECMAScript 2 | 版本变更 |
1999 | ECMAScript 3 | 添加正则表达式 添加 try/catch |
| ECMAScript 4 | 没有发布 |
2009 | ECMAScript 5 | 添加 "strict mode",严格模式 添加 JSON 支持 |
2011 | ECMAScript 5.1 | 版本变更 |
2015 | ECMAScript 6 | 添加类和模块 |
2016 | ECMAScript 7 | 增加指数运算符 (**) 增加 Array.prototype.includes |
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
alert("我的第一个 JavaScript");
</script>
您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
![]() | 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 |
---|
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>body 中的 JavaScript</title> </head> <body> <p>JavaScript 直接写入HTML输出流中:</p> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>") </script> <p>你只能在 HTML 输出流中使用 <strong>doucment.write</strong>如果你在文档中已加载后使用它(比如在函数中),会覆盖整个文档</p> </body> </html>
JavaScript 函数和事件
上面例子中的 JavaScript 语句,会在页面加载时执行。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。
在 <head> 或者 <body> 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
<head> 中的 JavaScript 函数
在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
该函数会在点击按钮时被调用:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>head中的 JavaScript 函数</title> <script> function check(){ document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数" } </script> </head> <body> <h1>为的web页面</h1> <p id="demo">一个段落。</p> <input type="button" οnclick="check()" value="vip宅男"/> </body> </html>
<body> 中的 JavaScript
在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>body 中的 JavaScript 函数</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">一个段落。</p> <input type="button" οnclick="check()" value="vip宅男"/> <script> function check(){ document.getElementById("demo").innerHTML="I have a car"; } </script> </body> </html>
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
/** * Created by Administrator on 2018/1/12 0012. */ function check(){ document.getElementById("demo").innerHTML="I have a car"; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>body 中的 JavaScript 函数</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">一个段落。</p> <input type="button" οnclick="check()" value="vip宅男"/> <script> function check(){ document.getElementById("demo").innerHTML="I have a car"; } </script> </body> </html>
![]() | 外部脚本不能包含 <script> 标签。 |
---|
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用 window.alert()</title> <script> window.alert(5+6); </script> </head> <body> <h1>我的第一个页面</h1> <p>我的第一个段落</p> </body> </html>
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>操作 HTML 元素</title> </head> <body> <h1>我的第一个web页面</h1> <p id="demo">我的第一个段落。</p> <script> document.getElementById("demo").innerHTML="I have a car"; </script> </body> </html>
以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
在本教程中
在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:
下面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:
写到 HTML 文档
出于测试目的,您可以将JavaScript直接写在HTML 文档中:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>写到HTML文档</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()) </script> </body> </html>
![]() | 请使用 document.write() 仅仅向文档输出写内容。 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。 |
---|
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function check(){ document.write(Date()); } </script> </head> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <input type="button" οnclick="check()" value="vip宅男"/> </body> </html>
写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>写到控制台</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。 </p> <script> a = 5; b = 8; c = a + b; console.log(c); </script> </body> </html>
JavaScript 语法
JavaScript 是一个程序语言。语法规则定义了语言结构。
JavaScript 语法
JavaScript 是一个脚本语言。
它是一个轻量级,但功能强大的编程语言。
JavaScript 字面量
在编程语言中,一般固定值称为字面量,如 3.14。
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript 字面量(runoob.com)</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 123e5; </script> </body> </html>
字符串(String)字面量 可以使用单引号或双引号:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字符串(String)字面量</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 'John Doe'; </script> </body> </html>表达式字面量 用于计算:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表达式字面量 用于计算:</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 'John Doe'; </script> </body> </html>
数组(Array)字面量 定义一个数组:
对象(Object)字面量 定义一个对象:
函数(Function)字面量 定义一个函数:
JavaScript 变量
在编程语言中,变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript 变量</title> </head> <body> <p id="demo"></p> <script> var length; length=6; document.getElementById("demo").innerHTML=length; </script> </body> </ht ml>
变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。
![]() | 变量是一个名称。字面量是一个值。 |
---|
JavaScript 操作符
JavaScript使用 算术运算符 来计算值:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript 变量</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML=(5+6)*10; </script> </body> </html>JavaScript使用 赋值运算符 给变量赋值:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript 变量</title> </head> <body> <p id="demo"></p> <script> var x, y,z; x=5; y=6; z=(5+6)*10; document.getElementById("demo").innerHTML=z; </script> </body> </html>
avaScript语言有多种类型的运算符:
类型 | 实例 | 描述 |
---|---|---|
赋值,算术和位运算符 | = + - * / | 在 JS 运算符中描述 |
条件,比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
JavaScript 语句
在 HTML 中,JavaScript 语句向浏览器发出的命令。
语句是用分号分隔:
y = x * 10;
JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量:
var y = x * 10;
JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。
JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。
后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)。
以下是 JavaScript 中最重要的保留字(按字母顺序):
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:
JavaScript 数据类型
JavaScript 有多种数据类型:数字,字符串,数组,对象等等:
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
数据类型的概念
编程语言中,数据类型是一个非常重要的内容。
为了可以操作变量,了解数据类型的概念非常重要。
如果没有使用数据类型,以下实例将无法执行:
16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢?
你可以在浏览器尝试执行以上代码查看效果。
在接下来的章节中你将学到更多关于数据类型的知识。
JavaScript 函数
JavaScript 语句可以写在函数内,函数可以重复引用:
引用一个函数 = 调用函数(执行函数内的语句)。
return a * b; // 返回 a 乘于 b 的结果
}
JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符,包含标点等字符。
如需进一步了解,请学习我们的 完整 Unicode 参考手册。
您知道吗?
![]() | JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。 |
---|
JavaScript If...Else 语句
条件语句用于基于不同的条件来执行不同的动作。
条件语句
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中,我们可使用以下条件语句:
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
If 语句
只有当指定条件为 true 时,该语句才会执行代码。
语法
{
当条件为 true 时执行的代码
}
请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!
实例
当时间小于 20:00 时,生成问候 "Good day":
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>条件判断语句</title> <script> function check(){ var x=""; var time=new Date().getHours(); if(time<20){ x="Good day"; } document.getElementById("demo").innerHTML=x; } </script> </head> <body> <p>如果时间早于20:00 会获得问候 "Good day"。</p> <input type="button" οnclick="check()" value="vip宅男"/> <p id="demo"></p> </body> </html>
注意,在这个语法中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。
If...else 语句
请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
语法
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
实例
当时间小于 20:00 时,生成问候 "Good day",否则生成问候 "Good evening"。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>条件判断语句</title> <script> function check(){ var x=""; var time=new Date().getHours(); if(time<20){ x="Good day"; }else{ x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </head> <body> <p>如果时间早于20:00 会获得问候 "Good day"。</p> <input type="button" οnclick="check()" value="vip宅男"/> <p id="demo"></p> </body> </html>
f...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。
语法
{
当条件 1 为 true 时执行的代码
}
else if ( condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
实例
如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening":
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>条件判断语句</title> </head> <body> <script type="text/javascript"> var d=new Date(); var time= d.getHours(); if(time<10){ document.write("<b>早上好</b>") }else if(time>=10&&time<16){ document.write("<b>今天好</b>") }else{ document.write("<b>晚上好</b>") } </script> <p> 这个例子演示了 if..else if...else 语句。 </p> </body> </html>随机链接:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>随机链接</title> </head> <body> <p id="demo"></p> <script> var r=Math.random(); var x=document.getElementById("demo"); if(r>0.5){ x.innerHTML="<a href='http://www.kgc.cn/'>访问课工场</a>"; }else{ x.innerHTML="<a href='http://www.baidu.com/'>vip宅男</a>"; } </script> </body> </html>
JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
实例
显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击下面的按钮来显示今天是周几:</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x; var d=new Date().getDay(); switch (d){ case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
default 关键词
请使用 default 关键词来规定匹配不存在时做的事情:
实例
如果今天不是星期六或星期日,则会输出默认的消息:
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击下面的按钮,会显示出基于今日日期的消息:</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; var d=new Date().getDay(); switch (d) { case 6:x="今天是星期六"; break; case 0:x="今天是星期日"; break; default: x="期待周末"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
JavaScript for 循环
循环可以将代码块执行指定的次数。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
我们可以这样输出数组的值:
一般写法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<cars.length;i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>
不同类型的循环
JavaScript 支持不同类型的循环:
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p>点击按钮循环代码5次</p> <input type="button" οnclick="check()" value="vip"/> <p ID="demo"></p> <script> function check(){ var x=""; for(var i=0;i<5;i++){ x=x+"该数字为"+i+"</br>" } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
从上面的例子中,您可以看到:
Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的,也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意(或者多个)值:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<=cars.length;i++){ document.write(cars[i] + "<br>"); } </script> </body> </html> </body> </html>
JavaScript while 循环
只要指定条件为 true,循环就可以一直执行代码块。
while 循环
while 循环会在指定条件为真时循环执行代码块。
语法
{
需要执行的代码
}
实例
本例中的循环将继续运行,只要变量 i 小于 5:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击下面的按钮,只要 i 小于 5 就一直循环代码块。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; while (i<5){ x=x + "该数字为 " + i + "<br>"; i++; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
![]() | 如果您忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。 |
---|
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
语法
{
需要执行的代码
}
while ( 条件);
实例
下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击下面的按钮,只要 i 小于 5 就一直循环代码块。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; do{ x=x + "该数字为 " + i + "<br>"; i++; } while (i<5) document.getElementById("demo").innerHTML=x; } </script> </body> </html>
别忘记增加条件中所用变量的值,否则循环永远不会结束!
比较 for 和 while
如果您已经阅读了前面那一章关于 for 循环的内容,您会发现 while 循环与 for 循环很像。
本例中的循环使用 for 循环来显示 cars 数组中的所有值:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=0; for (;cars[i];){ document.write(cars[i] + "<br>"); i++; } </script> </body> </html>
本例中的循环使用 while 循环来显示 cars 数组中的所有值:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]){ document.write(cars[i] + "<br>"); i++; } </script> </body> </html>