JavaScript脚本语言基础（二）

导读：
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在线教程。

posted @ 2016-10-23 09:04 银河统计阅读(459) 评论(0) 编辑收藏举报

银河统计

哈尔滨商业大学银河统计工作室

JavaScript脚本语言基础（二）