上一页 首页 下一页

JavaScript高级教程

JavaScript高级教程
JavaScript高级教程 - 第五课
MCHWEB

第二页: 打印变量

一旦你发现一个错误,就可以清除它。不幸的是,发现它们的
出处并不总是很容易 - 你的大部分调试时间只是花在指出错
误的位置。

最可靠的方法之一是在你的代码中加入一些简单的语句打印出
正在发生什么。假如你在下面的两段程序中发现一个问题:

function getName()
{
    var first_name = prompt("what's your first name?","");
    var last_name = prompt("what's your last name?","");
    var the_name = first_name + " " + last_name;
	
}

function theGreeting()
{
    var the_name = "";
    the_name = getName();

    if (the_name == "Dave Thau")
    {
	alert("Hello, oh greatest one!");
    } else {
	alert("Ahoy palloi!");
    }
}

运行这段程序,看看你是否能发现出了什么问题(Netscape 3.x
的用户可能会遇到一些错误检查的问题,这是由于Netscape 3.x
本身的原因,以下的Javascript例子与此相同)。如果你在警告
对话框中随意输入一些名字,你会得到问候:“Ahoy palloi!”。
但是,如果你在第一个提示对话框中输入“Dave”,在第二个中
输入“Thau”,你应该得到“Hello,oh greatest one!”这条
信息。然而,你还是只得到“Ahoy palloi!”这条信息。很明显,
函数中出了错误。在这个简单的例子程序中,你或许只是查看
JavaScript代码就能发现错误。然而,当你的代码变得越来越复
杂时,只靠目测来发现错误会变得愈加困难。

如果JavaScript没能捕获你的错误,你也没有通过查看代码发现
错误,有时打印出变量会对你有所帮助。最简单的方法是象下面
这样使用一个alert():

// theGreeting gets a name using getName, then presents
// one or two alert boxes depending on what the name is
//function getName()
{
var first_name = prompt("what's your first name?","");
var last_name = prompt("what's your last name?","");
var the_name = first_name + " " + last_name;
alert("in getName, the_name is: " + the_name);

}

// theGreeting gets a name using getName, then presents
// one of two alert boxes depending on what the name is
// function theGreeting()
{
var the_name = "";
the_name = getName();
alert("after getName, the_name = " + the_name);
if (the_name == "Dave Thau")
{
alert("hello, oh greatest one!");
}else{
alert("ahoy palloi!");
}
}

请注意我们已经在所有重要的地方加入警告语句。现在试着运行
这段程序。如果你输入名称“Dave”和“Thau”,你会注意到第
一个警告显示“in getName, the_name is: Dave Thau,”,但
是第二个警告显示“after getName, the_name = undefined,”,
这就告诉你在getName()的最后一行事情变得糟糕起来。不知何
故,the_name只在函数存在前正确,但是theGreeting没有给变
量the_name正确赋值。当你写的函数能正确运行,但返回值出现
问题时,你最先要做的就是检查你是否的确让其返回了一个值。
很明显,问题就出在这儿。getName()函数指出了名称,但没有
返回它。所以我们应把语句“return the_name;”加到函数末尾。

把一些警告对话框加入你的代码中是很有帮助的。不幸的是,每
隔一行就按一次“OK”也是一种痛苦。

不用警告对话框也能调试代码。一种选择是把调试信息写到窗体
的一个文本区内。另一种可能是把调试信息写在另一个窗口上。
这儿有一个把调试信息写在下面文本区的调试代码的例子。

使你的调试经历更舒适的第三个诀窍是这样的:创建不同的调试
等级,然后设置“调试”变量。下面就是在此页上运行的
JavaScript代码:

// debug can be either none, alert, or textarea
//  depending on the kind of debugging I want to do
// var debug = "none";
// function getName gets a first and last name,
// concatenates them with a space in between,
// and returns the name function getName()
{
var first_name = prompt("what's your first name?","");
var last_name = prompt("what's your last name?","");
var the_name = first_name + " " + last_name;
var error_message = "in getName, the_name is: " + the_name;
doError("in getName, the_name is: " + the_name);
}

// theGreeting gets a name using getName, then presents
// one of two alert boxes depending on what the name is
// function theGreeting()
{
var the_name = "";
the_name = getName();
doError("after getName, the_name = " + the_name);
if (the_name == "Dave Thau")
{
alert("hello, oh greatest one!");
} else {
alert("ahoy palloi!");
}
}

// doError is the error handling routine
// depending on the type of debug message
// it presents either no debug message, an alert
// or puts the message in a textarea
//
function doError(the_message)
{
if (debug == "alert")
{
alert(the_message);
} else if (debug == "textarea")
{
window.document.the_form.the_text.value +=    the_message + "<br>\n";
}
}

请注意我已经定义了一个叫“debug”的变量,它可以是
“none”,“alert”或“textarea”。于是当我想产生一个错
误信息时,我把它送给函数doError(),此函数可能什么也不做,
或者显示一个消息对话框,或者把消息粘贴到一个文本区中,这
取决于我怎样设置调试变量。当你想同时看到多条错误信息时,
你可以设置调试变量为“textarea”。当你准备把你的代码显示
给全世界时,你只需要把调试变量设为“none”,于是错误信息
将不再出现,这样可以省去发现和清除所有调试语句的麻烦。

通常,程序员可以创建不同的调试等级,如“none”,“brief”
和“extreme”。“brief”将打印一些调试信息,“extreme”
将打印大量调试信息,“none”当然不会打印任何信息。

如果你按此方法建立你的调试系统,你可以在编码时把调试等级
设为“brief”,在准备公布你的JavaScript时把调试变量设为
“none”。如果有不可思议的事情发生,并且你不知道去哪儿发
现问题,你可以把调试等级设为“extreme”,然后流览所有的
调试信息直到发现可疑的地方。

好了,调试系统就讨论到这儿。现在让我们看看JavaScript编码
器产生的一般性错误。 >>

JavaScript高级教程
第一页 JavaScript 高级教程 - 5
第二页 打印变量
第三页 一般性程序错误
第四页 修正错误
第五页 好的编程实践
第六页 按速度优化JavaScript代码
第七页 下面讲什么?

[ 第1课 ][ 第2课 ][ 第3课 ][ 第4课 ][第5课]



上一页 首页 下一页