JavaScript脚本语言基础（二）

时间：2022-07-12 12:12:53

导读：

JavaScript条件语句

JavaScript循环语句

JavaScript网页中错误捕获

JavaScript的Break和Continue命令

JavaScript的转义字符

1、JavaScript条件语句[返回]

在JavaScript中，可以使用下面4种条件语句：

  • if 语句：在一个指定的条件成立时执行代码；
  • if...else 语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码；
  • if...else if....else 语句：使用这个语句可以选择执行若干块代码中的一个；
  • switch 语句：使用这个语句可以选择执行若干块代码中的一个。

用法如下：

#Code 201：JavaScript条件语句案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

document.write('<p><b>1、if语句实例</b></p>');

var d=new Date(); //JS日期时间对象

var time=d.getHours();  //获得当前时间

//打开这个HTML文档时，如果时间早于上午10点，显示“早晨好。打开时间从10点开始不显示问候语。

//猜猜看，什么时候问候’中午好！‘？”

if (time<10) {document.write("<b>早上好！</b>");}

if (time==11) {document.write("<i>中午好！</i>");}

document.write("<p><b>2、if...else语句实例</b></p>");

if (time < 10) {

  document.write("<i>早上好!</i>");

} else {

  document.write("<i>中午好或者下午好!</i>");

  }

document.write("<p><b>3、if...else语句可以用JS的三目运算符</b></p>");

time < 10 ? document.write("<i>早上好!</i>") : document.write("<i>中午好或者下午好!</i>");

5 > 3 ? document.write("<p/>5大于3") : document.write("<p/>5小3");

document.write('<p><b>4、If...else if...else语句实例</b></p>');

if (time<10) {

  document.write("<i>早上好！</i>");

} else if (time>10 && time<16) { //可以并行使用多个else if

  document.write("<i>中午好</i>");

} else { //else结尾，其它条件都不满足执行else内脚本

  document.write("<i>下午好!</i>");

  }

document.write('<p><b>5、Switch语句实例</b></p>');

theDay=d.getDay();

switch (theDay) {

  case 5:

    document.write("<i>Finally Friday</i>");

    break;

 case 6:

   document.write("<i>Super Saturday</i>");

   break;

 case 0:

   document.write("<i>Sleepy Sunday</i>");

   break;

 default:

 document.write("<i>I'm looking forward to this weekend!</i>")

 }

</script>

</head>

<body onload="init()">

</body>

</html>

运行代码

2、JavaScript循环语句[返回]

JavaScript 有以下几种种不同种类的循环：

  • for循环：在脚本的运行次数已确定的情况下使用for循环，将一段代码循环执行指定的次数；
  • while循环：用于在指定条件为 true 时循环执行代码；
  • do...while循环：do...while 循环是while循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为true时，它会继续这个循环。所以可以这么说，do...while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证；
  • for in循环：遍历一个对象的所有属性。

在网页中用法如下：

#Code 202：JavaScript循环语句案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

document.write('<p><b>1、for 循环</b></p>');

//for循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于10 为止

var i=0;

for (i=0; i<=10; i++) {

  document.write("The number is " + i);

  document.write("<br />");

  }

document.write("<p><b>2、while循环</b></p>");

//while循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。

i=0; //变量i重新赋值

while (i<=10) {

  document.write("The number is " + i);

  document.write("<br />");

  i=i+1; //每次循环后i+1

  }

document.write("<p><b>3、do...while循环</b></p>");

//do...while循环程序，这个循环程序的参数 i 的起始值为 0，程序在初次运行时会首先执行一遍其中的代码，然后后才会进行条件验证。由于循环程序执行一次后，i变为1，循环终止。

i=0;

do {

  document.write("The number is " + i);

  document.write("<br/>");

  i=i+1;

  }

while (i<0)

document.write('<p><b>4、for in循环（遍历对象）</b></p>');

var obj = {name:"Mary",age:23,gender:"female",number:[21,23,35]}

for(var s in obj) {document.write("属性名称："+s+"；属性值："+obj[s]+"；变量类型："+typeof obj[s]+"<br/>");}

</script>

</head>

<body onload="init()">

</body>

</html>

运行代码

3、JavaScript网页中错误捕获[返回]

有两种在网页中捕获错误的方法：

  • try...catch 语句(在IE5+、Mozilla 1.0、和 Netscape 6 中可用): Try...Catch 语句: 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码;
  • onerror 事件。用于捕获错误的老式方法(Netscape 3 以后的版本可用)：如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

（1）try...catch用法实例

#Code 203：JavaScript网页中错误捕获案例（1）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

var txt="";

function message() {

try { //在此运行代码

  alerty("欢迎您!"); //误写成alerty，trycatch捕捉错误

} catch(err) { //在此处理错误

  txt="此页面存在一个错误！<br/>";

  txt+="错误名称: " + err.name + "<br/>";

  txt+="错误编号: " + err.number + "<br/>";

  txt+="错误描述: " + err.description + "<br/>";

  txt+="错误信息: " + err.message + "<br/>";

  document.write(txt);

  }

}

</script>

</head>

<body onload="message()">

</body>

</html>

运行代码

在try...catch 语句中，可以添加throw声明的作用是创建 exception（异常或错误）。

这个声明与try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。exception 可以是字符串、整数、逻辑值或者对象。

举例如下：

#Code 204：JavaScript网页中错误捕获案例（2）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

function message() {

var x=prompt("Enter a number between 0 and 10:","");

try {

  if(x>10) {

    throw "Err1";

  } else if (x<0) {

    throw "Err2";

  } else {

    alert("The value is right!");

    }

} catch(er) {

  if(er=="Err1") {alert("Error! The value is too high");}

  if(er == "Err2") {alert("Error! The value is too low");}

  message();

  }

}

</script>

</head>

<body onload="message()">

</body>

</html>

运行代码

（2）onerror 事件用法实例

#Code 205：JavaScript网页中错误捕获案例（3）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

onerror=handleErr;

var txt="";

function handleErr(msg,url,line) {

  txt="There was an error on this page.\n\n";

  txt+="Error: " + msg + "\n";

  txt+="URL: " + url + "\n";

  txt+="Line: " + line + "\n\n";

  txt+="Click OK to continue.\n\n";

  alert(txt);

  return true;

  }

function message() {alert("Welcome guest!");}

</script>

</head>

<body onload="message()">

</body>

</html>

运行代码

如果用 onerror 事件，就必须创建一个处理错误的函数。可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

4、JavaScript的Break和Continue命令[返回]

JavaScript的break 和 continue命令用在 for 循环中的语句中。

  • break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）；
  • continue 命令会终止当前的循环，然后从下一个值继续运行。

（1）break用法：

<script type="text/javascript">

for (var i=0; i<=10; i++) {

  if (i==3){break;}

  document.write("The number is " + i +"<br/>");

  }

</script>

注：Ctrl+c：复制； Ctrl+x：剪切； Ctrl+v：粘贴；

将script标签内的JavaScript脚步代码复制、粘贴到银河统计JavaScript脚本测试工具，运行结果如下：

The number is 0

The number is 1

The number is 2

（2）continue用法：

<script type="text/javascript">

for (var i=0; i<=10; i++) {

  if (i==3){continue;}

  document.write("The number is " + i);

  document.write("<br/>");

  }

</script>

注：Ctrl+c：复制； Ctrl+x：剪切； Ctrl+v：粘贴；

将script标签内的JavaScript脚步代码复制、粘贴到银河统计JavaScript脚本测试工具，运行结果如下：

The number is 0

The number is 1

The number is 2

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

5、JavaScript的转义字符[返回]

可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。对于某些特殊的字符，无法用键盘直接键入，这时就需要使用转义字符。还有一些字符（符号）用于特殊的用途，比如引号，如果要在字符串内包含引号，就需要使用转义字符。切记，每一个转义字符都是以反斜杠“\”开始的。

（1）无法用键盘录入的转义字符

转义字符 字符
\b 退格符
\f 换页符
\n 换行符
\r 回车符
\t 制表符
\" 双引号
\' 单引号
\\ 反斜杠

（2）特殊用途符号转义字符

字符 转义字符
点的转义：. \\u002E
美元符号的转义：$ \\u0024
乘方符号的转义：^ \\u005E
左大括号的转义：{ \\u007B
左方括号的转义：[ \\u005B
左圆括号的转义：( \\u0028
竖线的转义：| \\u007C
右方括号转义：] \\u005D
右圆括号的转义：) \\u0029
星号的转义：* \\u002A
加号的转义：+ \\u002B
问号的转义：? \\u003F
反斜杠的转义：\ \\u005C

JavaScript代码如下：

<script type="text/javascript">

  var oStr="我的名字叫\“张三\”，这段文字已经被双引号，按JS语法规则，双引号中不能包括双引号。为了显示是姓名被双引号，在姓名双引号前加反斜杠。";

  document.write(oStr);

</script>

注：Ctrl+c：复制； Ctrl+x：剪切； Ctrl+v：粘贴；

将script标签内的JavaScript脚步代码复制、粘贴到银河统计JavaScript脚本测试工具，运行结果如下：

我的名字叫“张三”，这段文字已经被双引号，按JS语法规则，双引号中不能包括双引号。为了显示是姓名被双引号，在姓名双引号前加反斜杠。

注：这段文字为引号嵌套，但姓名的引号前使用了转移符号“\”，使得document.write(oStr)可以正确显示。

JavaScript语法练习参见本站提供的银河统计JavaScript脚本测试工具和W3School JavaScript在线教程。

相关文章