web学习之JavaScript基础（一）

前言

  • 本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，需要点击一下“尝试一下”这个按钮才可以看到，对于学习来说，其实效率很低，而且如果我要复习的话，只需要打开这篇文章在电脑屏幕左边，再打开在线编译器在屏幕右边，一路将例子敲下来即可，而不用每次都点击“尝试一下”这个按钮，来查看代码显示效果。

一、JavaScript基础

JavaScript简介

  • JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript：写入 HTML 输出

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

JavaScript：对事件作出反应

  • alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
  • onclick 事件只是n你即将在本教程中学到的众多事件之一。
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>

<button type="button" onclick="alert('Welcome!')">点击这里</button>

</body>
</html>

JavaScript：改变 HTML 内容

  • 使用 JavaScript 来处理 HTML 内容是非常强大的功能。
  • 你会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
    DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" onclick="myFunction()">点击这里改变文本内容</button>

</body>
</html>

JavaScript：改变 HTML 图像

  • 本例会动态地改变 HTML <image> 的来源 (src)：
    The Light bulb点击灯泡就可以打开或关闭这盏灯。
  • JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/i/eg_bulboff.gif";
  }
else
  {
  element.src="/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>

JavaScript：改变 HTML 样式

  • 改变 HTML 元素的样式，属于改变 HTML 属性的变种。
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" onclick="myFunction()">点击这里改变样式</button>

</body>
</html>

JavaScript：验证输入

  • JavaScript 常用于验证用户的输入。
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
    {
    alert("Not Numeric");
    }
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

你知道吗？

  • JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。Java（由 Sun 发明）是更复杂的编程语言。
  • ECMA-262 是 JavaScript 标准的官方名称。
  • JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

二、JavaScript使用

  • HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

  • 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
  • 浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
  • <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
  • <script> 和 </script> 之间的代码行包含了 JavaScript：
<script>
alert("My First JavaScript");
</script>

<body> 中的 JavaScript

  • 在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本。
<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

JavaScript 函数和事件

  • 上面例子中的 JavaScript 语句，会在页面加载时执行。
  • 通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
  • 如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

<head> 或 <body> 中的 JavaScript

  • 你可以在 HTML 文档中放入不限数量的脚本。
  • 脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
  • 通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

  • 在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
  • 该函数会在点击按钮时被调用：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

<body> 中的 JavaScript 函数

  • 在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
  • 我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。
  • 该函数会在点击按钮时被调用：
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

外部的 JavaScript

  • 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
  • 外部 JavaScript 文件的文件扩展名是 .js。
  • 在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与你在 <script> 标签中编写脚本完全一致。
  • 外部脚本不能包含 <script> 标签。
  • 如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">点击这里</button>

<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script type="text/javascript" src="/js/myScript.js"></script>

</body>
</html>

三、JavaScript输出

  • JavaScript 通常用于操作 HTML 元素。

操作 HTML 元素

  • 如需从 JavaScript 访问某个 HTML 元素，你可以使用document.getElementById(id) 方法。
  • 请使用 "id" 属性来标识 HTML 元素。
  • 例子，通过指定的 id 来访问 HTML 元素，并改变其内容，JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

写到文档输出

  • 下面的例子直接把 <p> 元素写到 HTML 文档输出中：
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

警告

  • 请使用 document.write() 仅仅向文档输出写内容。
  • 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

Windows 8 中的 JavaScript

  • 微软支持通过 JavaScript 创建 Windows 8 app。对于因特网和视窗操作系统，JavaScript 都意味着未来。

四、JavaScript 语句

JavaScript 语句

  • JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
  • 下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World"：
document.getElementById("demo").innerHTML="Hello World";

分号 ;

  • 分号用于分隔 JavaScript 语句。
  • 通常我们在每条可执行的语句结尾添加分号。
  • 使用分号的另一用处是在一行中编写多条语句。
  • 你也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码

  • JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。
  • 浏览器会按照编写顺序来执行每条语句。
  • 本例将操作两个 HTML 元素：
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<div id="myDIV">A DIV.</div>

<script>
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
</script>

</body>
</html>

JavaScript 代码块

  • JavaScript 语句通过代码块的形式进行组合。
  • 块由左花括号开始，由右花括号结束。
  • 块的作用是使语句序列一起执行。
  • JavaScript 函数是将语句组合在块中的典型例子。
  • 下面的例子将运行可操作两个 HTML 元素的函数：
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>

<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>

<p>当您点击上面的按钮时，两个元素会改变。</p>

</body>
</html>

JavaScript 对大小写敏感

  • JavaScript 对大小写是敏感的。
  • 当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
  • 函数 getElementById 与 getElementbyID 是不同的。
  • 同样，变量 myVariable 与 MyVariable 也是不同的。

空格

  • JavaScript 会忽略多余的空格。你可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var name="Hello";
var name = "Hello";

对代码行进行折行

-你可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");

不过，你不能向这样拆行：

document.write \
("Hello World!");

您知道吗？

  • JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

五、JavaScript 注释

  • JavaScript 注释可用于提高代码的可读性。

JavaScript 注释

  • JavaScript 不会执行注释。
  • 我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
  • 单行注释以 // 开头。
  • 下面的例子使用单行注释来解释代码：
<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>

JavaScript 多行注释

  • 多行注释以 /* 开始，以 */ 结尾。
  • 下面的例子使用多行注释来解释代码：
<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释块不会被执行。</p>

</body>
</html>

使用注释来阻止执行

  • 在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）：
<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>
  • 在下面的例子中，注释用于阻止代码块的执行（可用于调试）：
<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
</script>

<p><b>注释：</b>注释块不会被执行。</p>

</body>
</html>

在行末使用注释

  • 在下面的例子中，我们把注释放到代码行的结尾处：
<!DOCTYPE html>
<html>
<body>

<p id="myP"></p>

<script>
var x=5;   // 声明 x 并把 5 赋值给它
var y=x+2; // 声明 y 并把 x+2 赋值给它
document.getElementById("myP").innerHTML=y // 把 y 的值写到 myP
</script>

<p><b>注释：</b>注释不会被执行。</p>

</body>
</html>

六、JavaScript 变量

  • 变量是存储信息的容器。

实例

<!DOCTYPE html>
<html>
<body>

<script>
var x=2;
var y=3;
var z=2+3;

document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

</body>
</html>

就像代数那样

x=2
y=3
z=x+y
  • 在代数中，我们使用字母（比如 x）来保存值（比如 2）。
  • 通过上面的表达式 z=x+y，我们能够计算出 z 的值为 5。
  • 在 JavaScript 中，这些字母被称为变量。
  • 你可以把变量看做存储数据的容器。

JavaScript 变量

  • 与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
  • 变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
  • JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

  • JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。
  • 在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。
  • JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
  • 当你向变量分配文本值时，应该用双引号或单引号包围这个值。
  • 当你向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
<!DOCTYPE html>
<html>
<body>

<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

</body>
</html>

声明（创建） JavaScript 变量

  • 在 JavaScript 中创建变量通常称为“声明”变量。
  • 我们使用 var 关键词来声明变量：
var carname;
  • 变量声明之后，该变量是空的（它没有值）。
  • 如需向变量赋值，请使用等号：
carname="Volvo";
  • 不过，您也可以在声明变量时对其赋值：
var carname="Volvo";
  • 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
  • 在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
<!DOCTYPE html>
<html>
<body>

<p>点击这里来创建变量，并显示结果。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

一条语句，多个变量

  • 你可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name="Gates", age=56, job="CEO";
  • 声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";

Value = undefined

  • 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
  • 在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;

重新声明 JavaScript 变量

  • 如果重新声明 JavaScript 变量，该变量的值不会丢失：
  • 在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;

JavaScript 算数

  • 你可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：
<!DOCTYPE html>
<html>
<body>

<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>
傲游截图20180521095249.png

七、JavaScript 数据类型

  • 字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 拥有动态类型

  • JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 字符串

  • 字符串是存储字符（比如 "Bill Gates"）的变量。
  • 字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var carname="Bill Gates";
var carname='Bill Gates';
  • 你可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
<!DOCTYPE html>
<html>
<body>

<script>
var carname1="Bill Gates";
var carname2='Bill Gates';
var answer1="Nice to meet you!";
var answer2="He is called 'Bill'";
var answer3='He is called "Bill"';

document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>

</body>
</html>

JavaScript 数字

  • JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写
  • 极大或极小的数字可以通过科学（指数）计数法来书写：
<!DOCTYPE html>
<html>
<body>

<script>

var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;

document.write(x1 + "<br />")
document.write(x2 + "<br />")
document.write(y + "<br />")
document.write(z + "<br />")

</script>

</body>
</html>

JavaScript 布尔

  • 布尔（逻辑）只能有两个值：true 或 false。
  • 布尔常用在条件测试中。
var x=true
var y=false

JavaScript 数组

  • 下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
  • 或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
  • 或者 (literal array):
<!DOCTYPE html>
<html>
<body>

<script>
var i;
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>
  • 数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

JavaScript 对象

  • 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
  • 上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
  • 空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};
  • 对象属性有两种寻址方式：
<!DOCTYPE html>
<html>
<body>

<script>
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
</script>

</body>
</html>

Undefined 和 Null

  • Undefined 这个值表示变量不含有值。
  • 可以通过将变量的值设置为 null 来清空变量。
<!DOCTYPE html>
<html>
<body>

<script>
var person;
var car="Volvo";
document.write(person + "<br />");
document.write(car + "<br />");
var car=null
document.write(car + "<br />");
</script>

</body>
</html>

声明变量类型

  • JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
  • 当你声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

八、JavaScript 对象

  • JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法

  • 属性是与对象相关的值。
  • 方法是能够在对象上执行的动作。
  • 举例：汽车就是现实生活中的对象。
  • 汽车的属性：
car.name=Fiat

car.model=500

car.weight=850kg

car.color=white
  • 汽车的方法：
car.start()

car.drive()

car.brake()
  • 汽车的属性包括名称、型号、重量、颜色等。
  • 所有汽车都有这些属性，但是每款车的属性都不尽相同。
  • 汽车的方法可以是启动、驾驶、刹车等。
  • 所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

JavaScript 中的对象

  • 在 JavaScript 中，对象是数据（变量），拥有属性和方法。
  • 当您像这样声明一个 JavaScript 变量时：
var txt = "Hello";
  • 你实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。
  • 属性
txt.length=5
  • 方法
txt.indexOf()

txt.replace()

txt.search()
  • 在面向对象的语言中，属性和方法常被称为对象的成员。

创建 JavaScript 对象

  • JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
  • 你也可以创建自己的对象。
  • 创建新 JavaScript 对象有很多不同的方法，并且你还可以向已存在的对象添加属性和方法。
  • 本例创建名为 "person" 的对象，并为其添加了四个属性：
<!DOCTYPE html>
<html>
<body>

<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

访问对象的属性

  • 访问对象属性的语法是：
objectName.propertyName
  • 本例使用 String 对象的 length 属性来查找字符串的长度：
var message="Hello World!";
var x=message.length;
  • 在以上代码执行后，x 的值是：
12

访问对象的方法

  • 你可以通过下面的语法调用方法：
objectName.methodName()
  • 这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：
var message="Hello world!";
var x=message.toUpperCase();
  • 在以上代码执行后，x 的值是：
HELLO WORLD!

你知道吗？

  • 在面向对象的语言中，使用 camel-case 标记法的函数是很常见的，你会经常看到 someMethod() 这样的函数名，而不是 some_method()。

九、JavaScript 函数

  • 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">点击这里</button>
</body>
</html>

JavaScript 函数语法

  • 函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}
  • 当调用该函数时，会执行函数内的代码。
  • 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
  • JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

  • 在调用函数时，你可以向其传递值，这些值被称为参数。
  • 这些参数可以在函数中使用。
  • 你可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
  • 当你声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}
  • 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>

<button onclick="myFunction('jweihao','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>
  • 上面的函数会当按钮被点击时提示 "Welcome jweihao, the CEO"。
  • 函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：
<!DOCTYPE html>
<html>
<body>

<p>请点击其中的一个按钮，来调用带参数的函数。</p>

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>
  • 根据你点击的不同的按钮，上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

带有返回值的函数

  • 有时，我们会希望函数将值返回调用它的地方。
  • 通过使用 return 语句就可以实现。
  • 在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction()
{
var x=5;
return x;
}
  • 上面的函数会返回值 5。
  • 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
  • 函数调用将被返回值取代：
var myVar=myFunction();
  • myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。
  • 即使不把它保存为变量，你也可以使用返回值：
document.getElementById("demo").innerHTML=myFunction();
  • "demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。
  • 你可以使返回值基于传递到函数中的参数：
  • 计算两个数字的乘积，并返回结果：
<!DOCTYPE html>
<html>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>
  • 在你仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}
  • 如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

局部 JavaScript 变量

  • 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
  • 你可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
  • 只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

  • 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

  • JavaScript 变量的生命期从它们被声明的时间开始。
  • 局部变量会在函数运行以后被删除。
  • 全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

  • 如果你把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
  • 这条语句：
carname="Volvo";
  • 将声明一个全局变量 carname，即使它在函数内执行。

十、JavaScript 运算符

  • 运算符 = 用于赋值。
  • 运算符 + 用于加值。
  • 运算符 = 用于给 JavaScript 变量赋值。
  • 算术运算符 + 用于把值加起来。
y=5;
z=2;
x=y+z;
  • 在以上语句执行后，x 的值是 7。

JavaScript 算术运算符

  • 算术运算符用于执行变量与/或值之间的算术运算。

  • 给定 y=5，下面的表格解释了这些算术运算符：


JavaScript 赋值运算符

  • 赋值运算符用于给 JavaScript 变量赋值。

  • 给定 x=10 和 y=5，下面的表格解释了赋值运算符：


用于字符串的 + 运算符

    • 运算符用于把文本值或字符串变量加起来（连接起来）。
  • 如需把两个或多个字符串变量连接起来，请使用 + 运算符。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
  • 在以上语句执行后，变量 txt3 包含的值是 "What a verynice day"。
  • 要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
  • 或者把空格插入表达式中：
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
  • 在以上语句执行后，变量 txt3 包含的值是：
    "What a very nice day"

对字符串和数字进行加法运算

  • 如果把数字与字符串相加，结果将成为字符串。
<html>
<body>

<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

<h3>规则是：</h3>

<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>

</body>
</html>

十一、JavaScript 比较和逻辑运算符

  • 比较和逻辑运算符用于测试 true 或 false。

比较运算符

  • 比较运算符在逻辑语句中使用，以测定变量或值是否相等。

  • 给定 x=5，下面的表格解释了比较运算符：


如何使用

  • 可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：
if (age<18) document.write("Too young");

逻辑运算符

  • 逻辑运算符用于测定变量或值之间的逻辑。

  • 给定 x=6 以及 y=3，下表解释了逻辑运算符：


条件运算符

  • JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

  • 语法

variablename=(condition)?value1:value2
  • 例子
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
  • 如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

十二、JavaScript If...Else 语句

  • 条件语句用于基于不同的条件来执行不同的动作。

条件语句

  • 通常在写代码时，你总是需要为不同的决定来执行不同的动作。你可以在代码中使用条件语句来完成该任务。
  • 在 JavaScript 中，我们可使用以下条件语句：
    • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
    • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
    • if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
    • switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

  • 只有当指定条件为 true 时，该语句才会执行代码。
  • 请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
  • 语法
if (条件)
  {
  只有当条件为 true 时执行的代码
  }
  • 实例
<!DOCTYPE html>
<html>
<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
  • 请注意，在这个语法中，没有 ..else..。你已经告诉浏览器只有在指定条件为 true 时才执行代码。

If...else 语句

  • 请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

  • 语法

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }
  • 实例
    • 当时间小于 20:00 时，将得到问候 "Good day"，否则将得到问候 "Good evening"。
<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

If...else if...else 语句

  • 使用 if....else if...else 语句来选择多个代码块之一来执行。
  • 语法
if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }
  • 实例
    • 如果时间小于 10:00，则将发送问候 "Good morning"，否则如果时间小于 20:00，则发送问候 "Good day"，否则发送问候 "Good evening"：
<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

十三、JavaScript Switch 语句

  • switch 语句用于基于不同的条件来执行不同的动作。

JavaScript Switch 语句

  • 请使用 switch 语句来选择要执行的多个代码块之一。
  • 语法
switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

  • 工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

  • 实例

    • 显示今日的周名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：
<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮来显示今天是周几：</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

default 关键词

  • 请使用 default 关键词来规定匹配不存在时做的事情：
  • 实例
    • 如果今天不是周六或周日，则会输出默认的消息：
<html>
<body>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 6:
    x="Today it's Saturday";
    break;
  case 0:
    x="Today it's Sunday";
    break;
  default:
    x="Looking forward to the Weekend";
  }
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>");
  • 不过通常我们这样写：
<html>
<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>
<body>

<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
  {
  x=x + "The number is " + 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>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>
  • 同时你还可以省略语句 1（比如在循环开始前已经设置了值时）：
<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

语句 2

  • 通常语句 2 用于评估初始变量的条件。
  • 语句 2 同样是可选的。
  • 如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
  • 如果你省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句 3

  • 通常语句 3 会增加初始变量的值。
  • 语句 3 也是可选的。
  • 语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
  • 语句 3 也可以省略（比如当循环内部有相应的代码时）：
<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>

For/In 循环

  • JavaScript for/in 语句循环遍历对象的属性：
<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; 

for (x in person)
{
txt=txt + person[x];
}

document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

十五、JavaScript While 循环

  • 只要指定条件为 true，循环就可以一直执行代码。

while 循环

  • While 循环会在指定条件为真时循环执行代码块。
  • 语法
while (条件)
  {
  需要执行的代码
  }
  • 实例
    • 本例中的循环将继续运行，只要变量 i 小于 5：
<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
  • 如果你忘记增加条件中所用变量的值，该循环永远不会结束。该可能导致浏览器崩溃。

do/while 循环

  • do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
  • 语法
do
  {
  需要执行的代码
  }
while (条件);
  • 实例
    • 下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行：
<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)  
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
  • 不要忘记增加条件中所用变量的值，否则循环永远不会结束！

比较 for 和 while

  • 如果你已经阅读了前面那一章关于 for 循环的内容，您会发现 while 循环与 for 循环很像。

  • for 语句实例

    • 本例中的循环使用 for 循环来显示 cars 数组中的所有值：
<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>
  • while 语句实例
    • 本例中的循环使用使用 while 循环来显示 cars 数组中的所有值：
<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}
</script>

</body>
</html>

十六、JavaScript Break 和 Continue 语句

  • break 语句用于跳出循环。
  • continue 用于跳过循环中的一个迭代。

Break 语句

  • 它用于跳出 switch() 语句。
  • break 语句可用于跳出循环。
  • break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
<!DOCTYPE html>
<html>
<body>

<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Continue 语句

  • continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
  • 该例子跳过了值 3：
<!DOCTYPE html>
<html>
<body>

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    continue;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

JavaScript 标签

  • 如你在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。
  • 如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句

  • break 和 continue 语句仅仅是能够跳出代码块的语句。

  • 语法

break labelname;

continue labelname;
  • continue 语句（带有或不带标签引用）只能用在循环中。
  • break 语句（不带标签引用），只能用在循环或 switch 中。
  • 通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
  • 实例
<!DOCTYPE html>
<html>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list;
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 
}
</script>

</body>
</html>

十七、JavaScript 错误 - Throw、Try 和 Catch

  • try 语句测试代码块的错误。
  • catch 语句处理错误。
  • throw 语句创建自定义错误。

错误一定会发生

  • 当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：
    • 可能是语法错误，通常是程序员造成的编码错误或错别字。
    • 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
    • 可能是由于来自服务器或用户的错误输出而导致的错误。
    • 当然，也可能是由于许多其他不可预知的因素。

JavaScript 抛出错误

  • 当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
  • 描述这种情况的技术术语是：JavaScript 将抛出一个错误。

JavaScript 测试和捕捉

  • try 语句允许我们定义在执行时进行错误测试的代码块。

  • catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

  • JavaScript 语句 try 和 catch 是成对出现的。

  • 语法

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

  • 实例

  • 在下面的例子中，我们故意在 try 块的代码中写了一个错字。

  • catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="本页有一个错误。\n\n";
  txt+="错误描述：" + err.message + "\n\n";
  txt+="点击确定继续。\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

Throw 语句

  • throw 语句允许我们创建自定义错误。
  • 正确的技术术语是：创建或抛出异常（exception）。
  • 如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
  • 语法
throw exception
  • 异常可以是 JavaScript 字符串、数字、逻辑值或对象。
  • 实例
    • 本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
<!DOCTYPE html>
<html>
<body>

<script>
function myFunction()
{
try
{ 
var x=document.getElementById("demo").value;
if(x=="")    throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10)     throw "太大";
if(x<5)      throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>

<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>

</body>
</html>
  • 请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误。

十八、JavaScript 表单验证

  • JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript 表单验证

  • JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
  • 表单数据经常需要使用JavaScript来验证其正确性：
    • 验证表单数据是否为空？
    • 验证输入是否是一个正确的email地址？
    • 验证日期是否输入正确？
    • 验证表单输入内容是否为数字型？

必填（或必选）项目

  • 下面的函数用来检查用户是否已填写表单中的必填（必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为false，否则函数的返回值则为true（意味着数据没有问题）。
function validateForm()        
{        
var x=document.forms["myForm"]["fname"].value;        
if (x==null || x=="")        
  {        
  alert("First name must be filled out");        
  return false;        
  }        
}
  • 实例，以上函数在form 表单提交时被调用：

<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
    
<form name="myForm" action="/statics/demosource/demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
    
</body>
</html>

E-mail验证

  • 下面函数检查输入的数据是否符合电子邮件地址的基本语法。意思就是说，输入的数据必须包含@符号和点号（.），同时@不可以是邮件地址的首字符，并且@之后需有至少一个点号：
function validateForm()        
{        
var x=document.forms["myForm"]["email"].value;        
var atpos=x.indexOf("@");        
var dotpos=x.lastIndexOf(".");        
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)        
  {        
  alert("Not a valid e-mail address");        
  return false;        
  }       
}
  • 实例，下面是连同HTML表单的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<head>
<script>
function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
    }
}
</script>
</head>
<body>
    
<form name="myForm" action="demo-form" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
    
</body>
</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,588评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,456评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,146评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,387评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,481评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,510评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,522评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,296评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,745评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,901评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,538评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2赞 352

推荐阅读更多精彩内容

  • web学习之html基础（一）
    前言 本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，...
    AR7_阅读 4,049评论 4赞 70
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,973评论 25赞 707
  • 2017-07-29
    宇宙每时每刻都在引领着你并以你交流，天地万物对你的想法做出回应，并通过感觉给予你极为宝贵的反馈，你的感觉是一种无形...
    平行线_2bec阅读 134评论 0赞 1
  • 再生
    我们还要继续 继续 踩着这前人留下的脚印 前行？ 这深深的足迹 是一代代人的重复 仿佛告诉你 循规蹈矩 总是没错 ...
    艾任阅读 164评论 0赞 2
  • 书只读一遍？那哪够！
    昨天重读了纪元老师的《哪有没时间这回事》，经典书籍是常读常新，再次翻看又发现了一些之前没有注意到的细节给了我...
    乐简家阅读 462评论 0赞 1