编写JavaScript实验代码

在学习JavaScript或者进行Web开发的过程中,很多时候需要编写JavaScript实验代码来验证自己的想法。最简单的做法,就是编写实验网页:

实验性HTML网页

可以编写用于实验的空HTML网页,在其中嵌入JavaScript代码或者JavaScript文件,用浏览器打开即可测试:

<html>  
<head>  
<script type="text/javascript" src="test.js"></script>  
</head>  
<body>  
</body>  
</html>  

上述例子中,当用浏览器打开网页时,与网页文件处于同一目录的test.js文件将会得到执行。

用这种方式进行实验的好处是:测试环境是完全真实的,可以测试所有的JavaScript行为,比如:可以在网页中加入DOM元素,从而测试浏览器上JavaScript和DOM元素的交互;其不利之处在于:每次进行新的实验时,都必须写一个新的HTML文件,这在进行临时性实验的时候不太方便。对于临时性的JavaScript实验,可以使用Firebug控制台来进行。

Firebug控制台

Firefox的插件Firebug提供了进行JavaScript实验的控制台。默认情况下,Firebug控制台的命令编辑器(Command Editor)是关闭的,可以通过控制台的选项打开这一面板来编写JavaScript实验代码:
firebug-command-editor-switch

命令编辑器面板打开后,可以随意输入JavaScript代码,比如定义函数等: firebug-command-editor

用Firebug进行实验的好处是:可以非常快速地进行代码实验;其不利之处在于:除非已经打开了某个用于测试的网页,不然Firebug控制台下只能测试JavaScript本身的行为,无法测试诸如DOM交互等客户端行为。

除了实验性网页和Firebug,还有一种方式,那就是JSFiddle:一个在线的Web实验系统。

JSFiddle

JSFiddle是一个在线的Web实验系统,用户可以在上面编写任何Web测试代码(HTML/CSS/JavaScript/JS库),同时也可以将自己的实验代码进行共享。其好处是:不用创建HTML、CSS等文件即可测试Web的行为;其不利之处在于:只能在线进行代码实验。

总结

总体来说,如果需要快速的进行纯JavaScript实验,那么Firebug会是一个好的选择;如果需要快速的进行Web实验,或者需要公开共享自己的实验结果,那么JSFiddle是不二之选;如果需要进行Web实验,却没有Internet连接,或者实验很复杂,那么新建一个HTML网页的方式会是正确的选择。这三种方式互有优缺,总结如下:

方式优点缺点
实验性网页无需互联网连接,可以进行非常复杂的实验每次新实验都必须新建一个网页
Firebug无需互联网连接,可以快速测试JavaScript代码只能测试JavaScript,无法方便地测试Web行为
JSFiddle可以快速测试Web行为,可以方便地共享实验结果需要互联网连接

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!