更新时间:2022-10-01 12:08:59
本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第1章,第1.2节,作者:【美】Brad Dayley著,更多章节内容可以访问云栖社区“异步社区”公众号查看
简要地介绍动态Web编程后,该切入正题,为编写jQuery和JavaScript准备好开发环境了。
编写jQuery和JavaScript项目时,开发环境至关重要。开发环境应具有如下特点。
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项目开始通常很小,只有几幅图像和几个文件,但随着时间的推移,将在项目中添加越来越多的文件,如果项目组织不善,很快就会变得混乱不堪。
为避免这种问题,应预先规划目录结构。什么样的目录结构最合适呢?这取决于具体需求、项目将包含多少图像、文件类型等因素。
一个简单的例子是,可采用类似于下面的基本目录结构。
上述列表旨在说明一种确保文件组织有序的方式;哪种组织方式***完全由您决定。您可能想添加更多的子目录,但不要使用太多的子目录,以免文件的URL过于混乱。
2.文件命名
创建Web项目时,需要注意的另一个方面是文件名。下面是一些需要考虑的因素。
别太长:文件名通常是URL的一部分,JavaScript需要对其进行分析。如果文件名太长,将导致代码过于繁琐。
确保文件名有意义:创建网页时,需要用到相关脚本或HTML页面的文件名,在编辑器中查找文件时,也需要用到文件名。如果文件名未能反映其用途,可能增加开发工作的难度。
创建项目
本节介绍在Aptana Studio中创建项目的过程。在AptanaStudio和大部分IDE中,项目都为多文件网站和应用提供了一种组织、控制、生成和部署方式。
本节不会花太多时间讨论项目,只想让您对基本Web项目的工作原理有大致认识。
请按如下步骤在Aptana Studio中创建一个项目。
使用jQuery和JavaScript创建动态网页
创建项目后,便可开始创建动态网页了。在本节中,您将按指定的步骤创建一个非常简单的动态网页。这个网页是基于HTML的,它使用CSS指定样式,并使用jQuery和JavaScript实现交互。
添加HTML
创建简单网页的第一步是,指定可供样式化和操纵的HTML元素。请按如下步骤在Aptana中创建HTML文档。
就这么简单,至此所有的基本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交互式网页