如何运行和调试 JavaScript 脚本

 

　　如何运行和调试 JavaScript 脚本
解决思路：
JavaScript 代码的运行环境没什么要求，基本上所有的 Web 浏览器都支持。JavaScript 脚本的调试需要对症下药，不同的错误有不同的修正方法。
具体步骤：

1.下面是一个简单的 JavaScript 代码运行调试框。代码运行效果如图 3.50 所示。

<title>代码运行调试框</title>
<style>
body{overflow:hidden;margin:0px}
textarea{width:100%;height:95%}
body,textarea,button{font:normal 12px Tahoma;color:#333333}
</style>
<script>
function runCode(){
with(open()){
opener=null
document.write(code.value)
document.close()
}
}
function Command(cmd){
code.select()
document.execCommand(cmd)
}
</script>
<textarea id="code"></textarea>
<button onClick="runCode()">运行代码</button> <button onClick="Command(’copy’)">复制代码</button> <button onClick="Command(’paste’)">粘贴代码</button>

2.一般性程序错误。

1) 函数名、变量名和对象名拼写错误
因为 JavaScript 是一种严格区分大小写的语言，所以一般的拼写错误都是大小写拼写错误生成的。这个是 VB 程序员编写JavaScript程序时最容易犯的错误。避免的办法是养成对函数名、变量名和对象名的好的命名习惯。例如，下面的代码将不能正常运行：

<script>
window.open("http://www.flash8.net")
</script>

2) 使用了保留字。
JavaScript 脚本中使用了一部分字符串作为保留字，所以如果变量名中用到了这些保留字，将可能导致莫名其妙的错误。如果程序出错而又找不到语法错误时，可以试着把有嫌疑的变量改名，如果运行成功，则说明是跟 JavaScript 脚本的保留字有冲突。例如，下面的代码将不能正常运行：

<script>
var new=5
alert(new)
</script>

3) 还有一个最容易犯的错误就是在逻辑判断时只用一个等号，这样的程序在大部分情况下也能正常运行，但有可能完全不是你所要的效果。例如，下面的代码虽然能正常运行，但运行结果明显不正确：

<script>
var i=5
if(i=6)alert(i)
else alert("false")
</script>

3.捕获错误。
1) 一般来说，脚本有错误时IE的状态栏左下角出现一个惊叹号，双击后会有关于脚本的错误提示。如图 3.51 所示。
2) 然而并非所有的错误IE都能捕获，这时我们就要自己捕获错误了。下面代码的运行效果如图 3.52 所示。

<script>
try{
Window.open("http://www.flash8.net")
}
catch(e){
var errStr="脚本错误提示：/t/t/t/t/t/n"
for(i in e)
errStr+=i+":"+e[i]+"/n"
alert(errStr)
}
</script>

3) 错误虽然能找到，但所报的错也不一定完全正确，这时需要我们自己手工找错，逐渐缩小错误范围。通常的做法是在可疑代码行前后各加一个弹出警告框的语句，如果运行结果是弹出两个警告框，则该行代码没有问题，否则就是有错。
4.修正错误。找到错误所在后需要进行修正，这时也需要注意一些技巧。
1) 在尝试修正前最好先备份原代码。有些错误是很难修正的，有时还有可能是越改越错，所有备份原代码是非常重要的。
2) 逐个修正。有时错误可能不止一个，但最好不要尝试一次性全部修正，这样可能会导致更多的错误。所以，最好的办法是一个一个的修正，调试确定无误后再继续修正其它的错误。
3) 保持清醒的头脑。如果长期无法修正一个错误，这时最好休息一下，等思路清晰后再回头看。
4) 请求帮助。所谓旁观者清，自己难以发现的错误原因，在别人看来很可能是非常易见的，因为一个的的思维定势影响了你的分析能力。这时，你可以请朋友或者直接到技术论坛上求助。
5．忽略错误。有些错误是意料之中的，而且没必要对它进行处理，这时就可以忽略错误。
1) 用 window.onerror 捕获错误，并且返回真，如：

<script for="window" event="onerror">
return true
</script>

2)用 try 语句捕获错误，但不作处理，如：

<script>
function demo(){
try{
alert1()
}
catch(e){}
}
</script>
<button onClick="demo()">test</button>

特别提示
例中所提到的图片如下。

图 3.50 代码运行调试框

图 3.51 IE捕获的脚本错误信息

图 3.52自己捕获的脚本错误信息

特别说明

本例的主要知识点在于对错误的捕获，其中用到了 try 语句。
try...catch...finally 语句提供了一种方法来处理可能发生在给定代码块中的某些或全部错误，同时仍保持代码的运行。如果发生了程序员没有处理的错误，JavaScript 只给用户提供它的普通错误消息，就好象没有错误处理一样。