当前页面: 开发资料首页 → Javascript 专题 → 兔八哥笔记2：JavaScript Editor简介
兔八哥笔记2：JavaScript Editor简介
摘要: JavaScript工具
最近因为使用Domino开发一个政府OA系统，所以需要学习JavaScript，用惯了Delphi这类工具的编辑器，但写JS却不知道有什么好工具可以减少我输入那些烦人的<script language = “JavaScript” src = “”>这类的语句。
昨天随手翻看了一本清华出的讲解JS的书，发现上面介绍一个写JS的叫JavaScript Editor的工具。据说还是中国人写的，我立刻就到网上查找，很快就搜到一堆，有2个JavaScript Editor，一个是书中所提到的中国人所写的那个，版本2.X，另一个是一个外国的软件,版本4.X。我一开始不知道这是2个软件，以为是同一个，当然要用版本高的，于是很快就下载了这个软件。下载地址：http://hnpy.onlinedown.net/soft/5463.htm。
程序界面如图：
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
大家可能很奇怪吧：怎么是中文界面？^_^，因为我试了一下，感觉很好用，而昨天又没什么事情，就使用eXeScope汉化了，所以，大家看到的界面是中文的。因为我是第一次汉化软件，不知道怎样能将汉化的程序打成安装版，所以无法提供汉化版下载，不好意思！
说了很多废话，开始进入正题了！我只介绍常用的功能，其他的功能一看基本就知道该怎样用，感兴趣的兄弟可以自己琢磨。
IDE介绍：
IDE分为四块：工具栏、计划面板、信息面板、代码区。
工具栏：操作菜单和快捷按钮。
计划面板：放置了一个JavaScript Editor自带的一些例子。该计划存放于安装目录的同名文件夹中。
信息面板：显示当前激活的文件中的使用JavaScript写的函数名字。双击函数名可以跳转到代码区的函数实现部分。
我个人认为这个工具的最大的优点在于有代码提示和代码自动完成功能，我首先先介绍一下这个功能。如图：
在代码区，同时按下Ctrl + Space,则可以出现图示效果，然后输入你希望输入的函数或属性的第一个字符，IDE会自动过滤，那个单词就会自动填写到代码区的光标位置处。相信所有写过代码的兄弟都知道这种功能的效果吧！如果你要的属性或代码的模板没在这个下拉列表中，你可以自己维护代码模板，方法如下：
然后弹出如下窗口：
再然后就是“新建”，然后输入模板名称，模板内容了，保存，就可以了。以后你就可以在下拉列表中使用你自己定义的代码模板了。
下图是一个使用“从模板新建”功能生成的一个HTML文件。
生成这个文件后，你就可以在代码区自己添加函数了。下面我们作个简单的例子吧！
我在程序自动生成的main()函数的框架中插入一行：alert(“一起吃苦的幸福！！！”);
然后我们保存为a.html。注意IDE默认的后缀为.js,一定要保存为.html或.htm文件，否则不能在浏览器中执行。保存后，我们点击工具栏上的
是不是很方便呢？还有更方便的功能呢，请往下读！
JavaScript Editor还可以使用鼠标插入HTML标记，如图：
手工填写一些值，看一下效果：
虽然JavaScript Editor可以插入HTML标记，但不能插入Text、TextArea、Button等标记。难道那些不能插入的就只能手写吗？答案当然不是，JavaScript Editor虽然没有这个功能，但提供了与其他程序的接口，我们可以借助EditPlus、DreamWeaver MX等的程序达到这种效果。做法如下：
单击“添加/编辑”后出现如下界面：
下面我讲解一下配置EditPlus。
1． 单击上图中“新建”按钮，出现一个输入新工具名字的对话框，输入“EditPlus”。
2． 点击命令旁边的“…”按钮，
3． 然后点击参数旁的三角号按钮，选择FilePath。具体意义查帮助。
4． 点击“更新”，点击关闭。
以后就可以在JavaScript Editor中“工具”中直接点击“EditPlue”执行EditPlus了。
如下图：
点击后效果如下图：
当前在JavaScript Editor中打开的文件在EditPlus中自动打开了，然后在EditPlus中修改后关闭，你会发现你在EditPlus中编辑过的文件在JavaScript Editor中重新载入了，很方便。
我们演示一下：
在EditPlus中插入一个按钮，如图：
点击后，源码如图：
选中的文字是我手工加上的代码，前面的是EditPlus加入的，点击上图中用红线圈住的按钮，看一下效果：
同样的方法配置DreamWeaver MX，然后使用DreamWeaver MX打开a.html。如图：
如果你的文件中的汉字在DreamWeaver MX中显示出现乱码，那么你应该在<head>部分添加一行：。其实这是不必要的，如果不加这一行，只是在DreamWeaver中显示不正常，而在IE中同样正常。我只是提醒大家一下，如果遇到这种问题知道该怎么解决。
JavaScript Editor的比较实用的功能就介绍到这里，当然它还有很多功能，都比较容易理解，大家感兴趣可以自己看看。
我认为使用JavaScript Editor写JS脚本还是很方便的，但也存在一些Bug，如当你使用/* */注释掉一段代码后，再取消注释后，代码的颜色不变。还有注释à的颜色不一致等。还有自动生成的代码必须在每一行的最后敲个回车或空格才能改变字体等。
我这几天使用JavaScript Editor写JS，然后使用EditPlus写简单的网页元素，使用DreamWeaver MX写比较复杂的需要设置许多属性的网页。我感觉这3个工具组合在一起很方便。另外EditPlus写JSP也比较方便。写完后可以直接预览执行。但我后来发现IBM的Eclipse使用插件Lomboz写JSP更方便，有代码提示和自动完成的功能。话题扯远了，如果有时间，我会写一些介绍其他工具的文章。谢谢阅读！
我可以提供汉化的资源包，因为我对汉化不太熟，不知道该怎样打包成补丁，只能提供exEscope导出的.rc文件，如果你使用也要使用eXescope导入。希望知道怎样打补丁的兄弟指点。谢谢。
E-mail:ltf_ty@163.net;
欢迎大家与我交流!