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

JavaScript脚本语言基础（二）的更多相关文章

JavaScript脚本语言基础（四）
导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...
JavaScript脚本语言基础（一）
导读: JavaScript代码嵌入HTML文档 JavaScript代码运行方式第一个实例 JavaScript的三种对话框定义JavaScript变量 JavaScript运算符和操作符 Ja ...
JavaScript脚本语言基础（三）
导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...
2017.9.22 HTML学习总结--JavaScript脚本语言
接上: 1.JavaScript脚本语言定义:javascript是一种简单的脚本语言,可以在浏览器中直接运行, 是一种在浏览器端实现网页与客户交互的技术javascript代码可以直接运行在ht ...
9月12日JavaScript脚本语言
JS脚本语言 JS脚本语言全称JavaScript,是网页里面使用的脚本语言,也是一门非常强大的语言. 一.基础语法 1.注释语法单行注释:// 多行注释:/**/ 2.输出语法 ①alert(信息 ...
groovy脚本语言基础1
一搭建groovy环境安装JDK [root@node1 ~]# yum -y install java-11-openjdk 官网下载groovySDK下载 https://groovy.ap ...
VBA中使用JavaScript脚本语言解析JSON数据
JSON:JavaScript 对象表示法(JavaScript Object Notation) 和xml相似,都是文本形式(保存在文本文件中或字符串等形式),比如: jsstr = {" ...
TCL脚本语言基础介绍
Tcl简介(一):Tcl 语法 Tcl 语法 Tcl是一种很通用的脚本语言,它几乎在所有的平台上都可以释运行,其强大的功能和简单精妙的语法会使你感到由衷的喜悦,这片文章对 Tcl有很好的描述和说明.如 ...
关于JavaScript(脚本语言)
1.typeof运算符:判断一个对象是否是什么类型,返回“” 一.数字类型(Number) 1.javascript不擅长计算,不能用于浮点数的计算.如:var a = 0.2; var b = 0. ...

随机推荐

使用Html来避免写复杂的app代码，跨平台
http://www.jianshu.com/p/c375ac056149 http://www.php.net.cn/app/
tableview head
http://stackoverflow.com/questions/18880341/why-is-there-extra-padding-at-the-top-of-my-uitableview- ...
tomcat部署方法总结
可以参考之前的:http://www.cnblogs.com/youxin/archive/2013/01/18/2865814.html 在Tomcat中部署Java Web应用程序有两种方式:静态 ...
Leetcode: Evaluate Division
Equations are given in the format A / B = k, where A and B are variables represented as strings, and ...
G面经prepare: Data Stream Average
给一个datastream和一个fixed window size, 让我design一个class可以完成add number还有find average in the window. 就是不能用v ...
extjs grid 单元格多选
new Ext.grid.CellSelectionModel({ last : false, // 上一次选中的单元格 selections : [], // 选择区缓存 handleMouseDo ...
javascript浏览器对象
window对象 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口所有JS全局对象.函数以及变量均自动成为window对象的成员全局变量是window对象的 ...
javaIO整理
写在前面:本文章基本覆盖了java IO的全部内容,java新IO没有涉及,因为我想和这个分开,以突出那个的重要性,新IO哪一篇文章还没有开始写,估计很快就能和大家见面.照旧,文章依旧以例子为主,因为 ...
JavaScript中Date(日期对象),Math对象--学习笔记
Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date(); 注:初始值为当前时间(当前电脑系统 ...
浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

JavaScript脚本语言基础（二）

JavaScript脚本语言基础（二）的更多相关文章

随机推荐

热门专题