2.2 编写JavaScript的工具
“工欲善其事，必先利其器”。随着JavaScript的发展，大量优秀的开发工具接踵而出。找到一个适合自己的开发工具，不仅可以加快学习进度，而且在以后的开发过程中能及时发现问题，少走弯路。下面就来介绍几款简单易用的开发工具。
2.2.1 记事本
记事本是最原始的JavaScript开发工具，它最大的优点就是不需要独立安装，只要安装微软公司的操作系统，利用系统自带的记事本，就可以开发JavaScript应用程序。对于计算机硬件条件有限的读者来说，记事本是最好的JavaScript应用程序开发工具。
【例2.1】下面介绍如何通过使用记事本工具来作为JavaScript的编辑器编写第一个JavaScript脚本。（实例位置：光盘\TM\sl\2\1）
（1）单击“开始”菜单，选择“程序”/“附件”/“记事本”命令，打开记事本工具。
（2）在记事本的工作区域输入HTML标识符和JavaScript代码。
<html>
<head>
<title>一段简单的JavaScript代码</title>
<script language="javascript">
window.alert("欢迎光临本网站");
</script>
</head>
<body>
<h3>这是一段简单的JavaScript代码。</h3>
</body>
</html>
（3）编辑完毕后，选择“文件”/“保存”命令，在打开的“另存为”对话框中，输入文件名，将其保存为．html格式或．htm格式。保存完．html格式后，文件图标将会变成一个IE浏览器的图标
，双击此图标，以上代码的运行结果会在浏览器中显示，如图2.7所示。
图2.7 用记事本编写JavaScript程序
说明
利用记事本开发JavaScript程序也存在着缺点，就是整个编程过程要求开发者完全手工输入程序代码，这就影响了程序的开发速度。所以，在条件允许的情况下，最好不要只选择记事本开发JavaScript程序。
2.2.2 FrontPage
FrontPage是微软公司开发的一款强大的Web制作工具和网络管理向导，它包括HTML处理程序、网络管理工具、动画图形创建、编辑工具以及Web服务器程序。通过FrontPage创建的网站不仅内容丰富而且专业，最值得一提的是，它的操作界面与Word的操作界面极为相似，非常容易学习和使用。
【例2.2】下面介绍应用FrontPage编写JavaScript脚本的步骤。（实例位置：光盘\TM\sl\2\2）
（1）打开FrontPage，默认创建一个名为new_page_1.htm的文档，如图2.8所示。用户可以直接在该文档中编写JavaScript脚本。另外，用户也可以通过菜单栏新建一个HTML文件来编写JavaScript脚本。选择“文件”/“新建”/“网页”命令，将会弹出一个网页制作的向导，从3方面提供了几十种基本方案供用户选择，如图2.9所示。在“常规”选项卡中一共提供了26种模板供用户选择。在“框架网页”中，提供了10种框架结构，几乎包括了所有常见的网页框架。“样式表”则能帮助用户确定统一的文字风格。
图2.8 默认文档页
图2.9 新建文档
（2）在打开的页面中，页面下方有3个视图形式，分别为“普通”、HTML和“预览”。在“普通”视图中，可以在页面插入HTML元素，进行页面布局和设计，如图2.10所示；在HTML视图中，可以编辑JavaScript程序，如图2.11所示；在“预览”视图中，可以运行网页内容，如图2.12所示。
图2.10 “普通”视图
图2.11 HTML视图
图2.12 “预览”视图
2.2.3 Dreamweaver
Dreamweaver是当今流行的网页编辑工具之一。它采用了多种先进技术，提供了图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程变得简单化，生成的网页也极具表现力。从MX开始，DW开始支持可视化开发，对于初学者确实是比较好的选择，因为都是所见即所得的，特征包括语法加亮、函数补全，参数提示等。值得一提的是，Dreamweaver不但提供了强大的网页编辑功能，还提供了完善的站点管理机制，极大地方便了程序员对网站的管理工作。下载地址为http://www.adobe.com/downloads/。
【例2.3】下面介绍应用Dreamweaver编程JavaScript脚本的步骤。（实例位置：光盘\TM\sl\2\3）
（1）安装Dreamweaver后，首次运行Dreamweaver时，展现给用户的是一个“工作区设置”的对话框，在此对话框中，用户可以选择自己喜欢的工作区布局，如“设计者”或“代码编写者”，如图2.13所示。这两者的区别是在Dreamweaver的右边还是左边显示窗口面板区。
图2.13 “工作区设置”对话框
（2）选择工作区布局并单击“确定”按钮后，选择“文件”/“新建”命令，将打开“新建文档”对话框。在该对话框中的“类别”列表区选择“基本页”，再根据实际情况来选择所应用的脚本语言，这里选择的是HTML，然后单击“创建”按钮，创建以JavaScript为主脚本语言的文件，如图2.14所示。
图2.14 “新建文档”对话框
说明
如果用户选择了JavaScript选项，则创建一个JavaScript文档。在创建JavaScript脚本的外部文件时不需要使用<script>标记，但是文件的扩展名必须使用．js类型。调用外部文件可以使用<script>标记的src属性。如果JavaScript脚本外部文件保存在本机中，src属性可以是全部路径或是部分路径。如果JavaScript脚本外部文件保存在其他服务器中，src属性需要指定完全的路径。
（3）在打开的页面中，有3种视图形式，分别为代码、拆分和设计。在代码视图中，可以编辑程序代码，如图2.15所示；在拆分视图中，可以同时编辑代码视图和设计视图中的内容，如图2.16所示；在设计视图中，可以在页面中插入HTML元素，进行页面布局和设计，如图2.17所示。
图2.15 代码视图
图2.16 拆分视图
图2.17 设计视图
注意
在代码模式中编写的JavaScript脚本，在设计模式中不会输出显示，也没有任何标记。
在Dreamweaver中插入HTML元素后，通过“属性”面板可以方便地定义元素的属性，使其满足页面布局的要求。在页面中，允许多个表格的嵌套；可以插入图像、Flash动画等；可以插入表单元素，如文本框、列表/菜单、复选框、按钮等。
（4）设计页面及编写代码完成后，保存该文件到指定目录下，文件的扩展名为．html或．htm。