《jQuery与JavaScript入门经典》——1.2　为编写jQuery和JavaScript做准备

本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第1章，第1.2节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.2　为编写jQuery和JavaScript做准备

简要地介绍动态Web编程后，该切入正题，为编写jQuery和JavaScript准备好开发环境了。

编写jQuery和JavaScript项目时，开发环境至关重要。开发环境应具有如下特点。

• 易于使用的IDE：IDE提供了文本编辑器，让您能够以最简单的方式修改代码。请选择您用起来很顺手且支持HTML、CSS、JavaScript和jQuery的IDE。
• 用于开发的Web服务器：绝不要直接在用于生产的Web服务器上进行开发（虽然大多数人都会偶尔这样做）。要测试脚本和交互，必须有Web服务器。
• 用于开发的Web浏览器：同样，应针对您最熟悉或最常用的浏览器进行开发。为帮助查找和修复脚本的问题，需要在浏览器中启用调试工具。
• 组织有序的项目：组织项目、目录和文件名时，应考虑扩容。Web项目包含大量文件和目录时，要重新调整其结构很难。过多的文件或令人迷惑的文件名可能导致项目管理起来既麻烦又困难。

1.2.1 搭建Web开发环境
搭建Web开发环境涉及三个步骤。首先，需要安装一款IDE，它提供了创建和编辑代码的工具。其次，需要在浏览器中添加并启用JavaScript调试工具。第三，需要搭建用于开发的Web服务器，供您用来测试脚本。下面引领您完成所有这些任务。

1．安装Web开发IDE
对JavaScript开发而言，IDE最为重要。IDE提供了单一的用户界面，让您能够完成各种Web应用编写任务。实际上，可使用任何文本编辑器来编写HTML、CSS、JavaScript和jQuery代码，但您将发现易于使用的IDE可极大地提高效率。

市面上有多款这样的IDE，有些是开源的，有些价格不菲，请根据需要选择最合适的那款。选择的IDE应支持代码自动完成和错误检查，因为这两项功能可节省大量时间。

可供选择的IDE包括Dreamweaver、Visual Studio以及其他几款。然而，Eclipse包含大量插件并支持扩展。就jQuery和JavaScript而言，可考虑使用Aptana Studio，因为它易于安装和使用，且提供了Mac、Windows和Linux版。

（1）安装Aptana Studio

本书使用Aptana Studio，因此这里将详细介绍其安装和配置步骤，但本书介绍的所有编辑和调试概念也适用于其他IDE。

您应选择Standalone Version并指定您要安装到哪种操作系统上，如图1.7所示。下载安装程序后，执行它并按说明操作；安装过程非常简单。

安装Aptana Studio后，启动它。首次启动时，需要指定工作区的位置。工作区是存储项目和文件的地方，请选择一个方便管理的位置。

（2）配置Aptana Studio

安装Aptana Studio后，还需执行下面几个配置步骤。

1．选择菜单Commands>Bundle Development>Install Bundle，再从束列表（bundles list）中选择jQuery，并单击OK按钮。

2．选择菜单Windows>Preferences，以打开如图1.8所示的Preferences（首选项）对话框。在Preferences对话框中，选择Aptana Studio>Themes（如图1.8所示），再从下拉列表中选择一个主题。主题将设置窗口、菜单、选定内容和代码元素的颜色和字体。请选择最适合您的主题。在这个对话框中，还可对主题进行定制。

注意：在这个对话框中，还可导入和导出主题。本书的配套网站提供了一个名为AptanaTheme.tmTheme的文件，它就是编写本书时使用的主题。您可在这个对话框中导入这个主题。

3．选择左下角的选项卡Outline，并将其拖放到选项卡App Explorer旁边。这让您能够更好地查看脚本的大纲，并关闭底部不需要的选项卡Snippets和Sample。最终的结果应类似于图1.9所示。

4．尝试使用各种首选项和菜单，以熟悉界面。

至此，Aptana Studio便配置好了，可以开始创建项目了。

2．配置浏览器开发工具
安装并配置Aptana Studio后，便可配置浏览器以调试JavaScript了。本节将介绍在三款主要浏览器中启用JavaScript调试的步骤。选择使用哪款浏览器无关紧要，本书使用的是Firefox。

Firefox提供的用户体验最为一致且最为可靠。另外，Firefox的跨平台支持也最为一致。

（1）在Firefox中安装Firebug

按如下步骤在Firefox中启用JavaScript调试。

1．打开Firefox。

2．选择菜单Tools（工具）> Add-Ons（附加组件）。

3．在右上角的搜索框中输入Firebug以搜索Firebug，再单击Install（安装）按钮安装它。

4．在右上角的搜索框中输入FireQuery以搜索FireQuery，再单击Install（安装）按钮安装它。FireQuery扩展Firebug，使其也支持jQuery。

5．重新启动Firefox后，单击Firebug按钮以显示Firebug控制台，如图1.10所示。

（2）在Internet Explorer中启用开发人员工具

请按如下步骤在Internet Explorer中启用JavaScript调试。

1．打开Internet Explorer。

2．单击Settings（设置）按钮并从下拉菜单中选择Developer Tools（开发人员工具），也可按F12键。

3．将显示开发人员控制台，如图1.11所示。

（3）在Chrome中启用JavaScript控制台

请按如下步骤在Chrome中启用JavaScript调试。

1．打开Chrome。

2．单击Settings（设置）按钮，并从下拉菜单中选择Tools（工具）>Developer Tools（开发者工具），也可按Ctrl+Shift+j（PC）或CMD + Shift + j（Mac）。

3．将显示JavaScript控制台，如图1.12所示。

3．安装用于开发的简单Web服务器
浏览器准备就绪后，最后一步是安装并配置用于开发的简单服务器。在可能的情况下，通常最好在开发计算机上安装基本的Web服务器。

可供选择的Web服务器有多款，但最常用的是Apache和IIS。就开发服务器而言，最佳的选择是支持MySQL和PHP的Apache。本书使用XAMPP，因为它有Mac、Windows和Linux版。

请按如下步骤安装XAMPP，并将其配置为开发服务器。

1．下载XAMPP安装程序并安装XAMPP。安装过程非常简单，但请将您选择的安装位置记录下来，后面要用。

2．启动XAMPP Control Panel，如图1.13所示。

3．在XAMPP Control Panel中，单击Apache的Config按钮，并选择文件httpd.conf在编辑器中打开这个Apache 配置文件。

4．在文件httpd.conf中添加如下指令，这样该服务器运行时您将能够直接访问目录code。

5．保存文件。

6．在目录/xamp/htdocs（或您设置的Apache根目录）中，创建一个名为code的目录。您将把自己编写的代码存储到这个目录。

7．在XAMPP Control Panel中，停止Apache服务再启动它。

8．在Web浏览器中输入如下地址，浏览器中将出现类似于图1.14所示的目录链接。

至此，Web服务器就已准备就绪，可将其用于Web开发了。

1.2.2 创建Web开发项目
安装IDE和Web服务器后，便可以开始创建项目了。本节介绍一些概念以及在Aptana Studio中创建项目的过程。

1．目录结构
Web项目开始通常很小，只有几幅图像和几个文件，但随着时间的推移，将在项目中添加越来越多的文件，如果项目组织不善，很快就会变得混乱不堪。

为避免这种问题，应预先规划目录结构。什么样的目录结构最合适呢？这取决于具体需求、项目将包含多少图像、文件类型等因素。

一个简单的例子是，可采用类似于下面的基本目录结构。

• root：包含index.html、网站地图、方便网络搜索的内容等。
• root/html：只包含HTML文件。
• root/js：包含JavaScript文件。
• root/php：包含所有的服务器端PHP脚本。
• root/images：包含所有的图形。
• root/images/visual：包含用于创建网页的图形元素，如按钮。
• root/images/photos：包含网站显示的所有图片。

上述列表旨在说明一种确保文件组织有序的方式；哪种组织方式最佳完全由您决定。您可能想添加更多的子目录，但不要使用太多的子目录，以免文件的URL过于混乱。

2．文件命名
创建Web项目时，需要注意的另一个方面是文件名。下面是一些需要考虑的因素。

别太长：文件名通常是URL的一部分，JavaScript需要对其进行分析。如果文件名太长，将导致代码过于繁琐。
确保文件名有意义：创建网页时，需要用到相关脚本或HTML页面的文件名，在编辑器中查找文件时，也需要用到文件名。如果文件名未能反映其用途，可能增加开发工作的难度。
创建项目

本节介绍在Aptana Studio中创建项目的过程。在AptanaStudio和大部分IDE中，项目都为多文件网站和应用提供了一种组织、控制、生成和部署方式。

本节不会花太多时间讨论项目，只想让您对基本Web项目的工作原理有大致认识。

请按如下步骤在Aptana Studio中创建一个项目。

1. 选择菜单File>New>Web Project打开Project Template（项目模板）对话框。
2. 选择Default Project并单击Next按钮。
3. 输入项目名。请使用简短而有意义的项目名，如本书使用的项目名TYjQueryCode。
4. 取消选择复选框Use Default Location。
5. 输入本章前面在文件httpd.conf中添加的目录（这里为c:xampphtdocscode）。
6. 单击Finish按钮，新项目将出现在选项卡Workspace中，如图1.15所示。

1. 右击项目名并选择New>Folder，再将文件夹命名为hour01，用于存储本章的代码。
2. 至此第一个项目便创建好了。

使用jQuery和JavaScript创建动态网页

创建项目后，便可开始创建动态网页了。在本节中，您将按指定的步骤创建一个非常简单的动态网页。这个网页是基于HTML的，它使用CSS指定样式，并使用jQuery和JavaScript实现交互。

添加HTML

创建简单网页的第一步是，指定可供样式化和操纵的HTML元素。请按如下步骤在Aptana中创建HTML文档。

1. 右击前面创建的文件夹hour01。
2. 从弹出菜单中选择New>File。
3. 将文件命名为first.html并单击OK按钮，这将打开一个空文档。
4. 输入下面的HTML代码。如果您不太熟悉HTML，也不用担心，本书后面将介绍足够的知识，让您能够使用它。

1. 保存文件。
2. 在Web浏览器中，输入下面的URL，您将看到文本Click Me。

就这么简单，至此所有的基本HTML元素都已准备就绪。在下一节，您将设置元素的样式，让文本Click Me看起来更像按钮。

1.2.3 添加CSS
浏览器渲染的简单文本很乏味，但通过添加CSS样式，很容易解决这种问题。在本节中，您将使用CSS让文本看起来更像按钮。

请按如下步骤给元素添加CSS样式。为方便您参考，程序清单1.7是您执行下述步骤对样式进行修改后的脚本。

1．在网页的

标签中，添加如下代码，给所有的 元素指定CSS样式。

2．在样式span中添加如下属性设置，将文本的背景色改为深蓝色。

3．在样式span中添加如下属性设置，将字体颜色改为白色，并将字体改为bold。

4．在样式span中添加如下属性设置，在文本周围加上边框。

5．在样式span中添加如下属性设置，以指定元素的绝对位置。

6．保存文件。

7．在Web浏览器中输入如下URL，您将看到样式化后的Click Me，如图1.16所示。

1.2.4 编写动态脚本
根据需要设置HTML元素的样式后，便可开始添加动态交互了。在本节中，您将导入托管的jQuery库，以便能够使用jQuery；然后，将浏览器鼠标事件mouseover关联到一个移动文本的JavaScript函数。

请按如下步骤在网页中添加jQuery和JavaScript交互。

1．给元素添加一个ID，以便能够引用它；另外，给mouseover事件指定处理程序，如程序清单1.7的第30行所示。

2．在标签

中添加下面的代码行（如程序清单1.7的第5行所示）。这行代码从托管网站加载jQuery库。

3．在标签

中添加下面的JavaScript函数（如程序清单1.7的第6～13行所示）。这个函数创建一个数组，其中包含10～350的坐标值；每当用户在 元素上移动鼠标时，都随机地设置该元素的CSS属性top和left。

4．保存文件。

5．在Web浏览器中输入下面的URL，您将看到样式化的文本Click Me，如图1.16所示。

6．现在尝试单击按钮Click Me。每当被鼠标指向时，该按钮都将移动，让您无法单击它。

7．找个您讨厌的家伙，让他去单击这个按钮。

程序清单1.7　一个简单的jQuery和JavaScript交互式网页