JavaScript

最新推荐文章于 2021-06-12 22:01:10 发布

Vip宅男

最新推荐文章于 2021-06-12 22:01:10 发布

阅读量665

点赞数

分类专栏： Java Web开发实战

Java Web开发实战专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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> 标签中使用 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 页面将被覆盖。

请使用 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）字面量可以使用单引号或双引号:

"John Doe"

<!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）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量定义一个函数：

function myFunction(a, b) { return a * b;}

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 语句向浏览器发出的命令。

语句是用分号分隔：

x = 5 + 6;
y = x * 10;

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量：

var x = 5 + 6;
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 length = 16;                                 // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
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 时，该语句才会执行代码。

语法

if ( condition)
{
当条件为 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 时执行其他代码。

语法

if ( condition)
{
当条件为 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 语句来选择多个代码块之一来执行。

语法

if ( condition1)
{
当条件 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 语句来选择要执行的多个代码块之一。

语法

 
   switch 
   ( 
   n 
   ) 
    
   { 
     
   case 
     
   1 
   : 执行代码块  
   1 
     
   break 
   ;  
   case 
     
   2 
   : 执行代码块  
   2 
     
   break 
   ;  
   default 
   : 与  
   case 
     
   1 
    和  
   case 
     
   2 
    不同时执行的代码 
   } 
  

工作原理：首先设置表达式 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 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

我们可以这样输出数组的值：

一般写法：

 
   document 
   . 
   write 
   ( 
   cars 
   [ 
   0 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ;  
   document 
   . 
   write 
   ( 
   cars 
   [ 
   1 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ;  
   document 
   . 
   write 
   ( 
   cars 
   [ 
   2 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ;  
   document 
   . 
   write 
   ( 
   cars 
   [ 
   3 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ;  
   document 
   . 
   write 
   ( 
   cars 
   [ 
   4 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ;  
   document 
   . 
   write 
   ( 
   cars 
   [ 
   5 
   ] 
    +  
   " 
   <br> 
   " 
   ) 
   ; 
  

<!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 循环的语法：

for ( 语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 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 循环会在指定条件为真时循环执行代码块。

语法

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 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{
需要执行的代码
}
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>

Vip宅男

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript 简介JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML
复制链接

扫一扫

专栏目录