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在线教程