下载掌阅APP，畅读海量书库
立即打开
1.2 JavaScript编程起步 |
|
1-3 HBuilder的快速开发
在编写JavaScript脚本的过程中，一款好的编辑器能让开发者事半功倍。目前市面上流行的JavaScript脚本编辑器很多，主要有Dreamweaver、NotePad++、Aptana、HBuilder等。
1.Dreamweaver
Dreamweaver是Adobe公司推出的一款Web开发工具，是一款很好的入门工具，是集网页制作和管理网站于一身的所见即所得的网页编辑器，在Web开发中占有重要的地位。
2.NotePad++
NotePad++是一款开源免费的文本编辑器，功能比Windows自带的记事本强大很多。NotePad++支持多国语言，支持众多编程语言的语法高亮和语法折叠。
3.Aptana
Aptana是一款专业级的Web开发软件，拥有功能较强的JavaScript脚本编辑器和调试工具（支持常见的JavaScript类库）。较新版本的Aptana还集成了iPhone开发环境。
4.HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。“快”是HBuilder的最大优势，它通过完整的语法提示和代码输入法、代码块等，大幅提升了HTML、JavaScript、CSS的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据，支持手机数据线真机联调；有无死角提示，除了语法，还能提示id、class、图片、链接、字体等，可以一边写代码，一边看效果。HBuilder是笔者认为当前最好的Web开发工具。
在HBuilder官网上可以免费下载最新版的HBuilder。HBuilder目前有两个版本，一个是Windows版，一个是MAC版，下载的时候所根据自己的计算机系统情况选择适合自己的版本。
（1）创建Web项目
选择“文件”|“新建”|“选择Web项目”命令，如图1-11所示。打开“创建Web项目”对话框，如图1-12所示，在“项目名称”文本框中填写新建项目的名称，“位置”文本框中填写（或选择）项目保存路径（更改此路径HBuilder会记录，下次使用时会默认使用更改后的路径），然后选择使用的模板，本书案例选择默认项。
图1-11 HBuilder菜单
图1-12 “创建Web项目”对话框
（2）创建HTML文件
选择“文件”|“新建”|“选择HTML文件”命令，打开“创建文件向导”对话框，如图1-13所示，在“文件名”文本框中填写新建文件的名称，如test.html，然后选择使用的模板，本书PC端的案例选择HTML5。
（3）index.html文件
新建的页面或新项目中自带的index.html文件内容如下。
DOCTYPE是document type（文档类型）的简写，!DOCTYPE是一个文档类型标记，是一种标准通用标记语言的文档类型声明，<!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前。<!DOCTYPE>声明不是一个HTML标签，用来告知Web浏览器页面使用了哪种HTML版本。对于中文网页需要使用<meta charset="UTF-8">声明编码，否则会出现乱码。
将光标置于title标签内，给HTML文件设置title:HelloHBuilder，完成后按“Ctrl+Enter”组合键在当前位置的下一行插入空行，并将光标移动到下一行，按“s”快捷键打开下拉列表，选择生成一个script块来编写JavaScript代码（或者输入“s”后按“Enter”键）如图1-14所示，也可以向下移动，比如选择第三个实现外链JavaScript文件。
图1-13 “创建文件向导”对话框
图1-14 快捷键的使用
1-4 JavaScript的使用方法
将代码包含于<script>和</script>标签对内，然后可嵌入HTML文档中。将JavaScript脚本嵌入HTML文档中有4种标准方法，下面分别介绍。
1.通过<script>标签嵌入HTML文档
【例1-1】 利用<script>和</script>标签引入JavaScript脚本（运行结果如图1-16a所示），代码如下。
首先，<script>和</script>标签对将JavaScript脚本代码封装，同时告诉浏览器其间的代码为JavaScript脚本代码，然后调用document文档对象的write()方法写字符串到HTML文档中：
【例1-1】的代码中除了<script>与</script>标签对之间的内容外，都是最基本的HTML代码，可见<script>和</script>标签对将JavaScript脚本代码封装并嵌入到HTML文档中。
浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚本代码起始标签<script>和结束标签</script>，并将其间的代码按照解释JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览器客户端显示。
注意： HTML文件中的脚本必须位于<script>与</script>标签之间，否则被浏览器解析为普通文本。
2.通过<script>标签的src属性链接外部的JavaScript脚本文件
【例1-2】 利用src属性可链接外部的JavaScript脚本文件引入HTML文档。
创建JavaScript文件，命名为“myjs.js”如图1-15所示。
图1-15 创建JavaScript文件
在myjs.js文件中编辑如下代码并将其保存。
创建HTML文档，代码如下：
运行结果如图1-16b所示。
图1-16 运行结果对比
a)【例1-1】运行结果 b)【例1-2】运行结果
代码中的src属性用于将外部的脚本文件内容嵌入当前文档中，使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名。
可见通过外部引入JavaScript脚本文件的方式，能实现同样的功能，并具有如下优点。
1）将脚本程序同页面的逻辑结构分离。
2）通过外部脚本，可以轻易实现多个页面共用同一功能的脚本文件，以便通过更新一个脚本文件内容达到批量更新的目的。
3）浏览器可以实现对目标脚本文件的高速缓存，避免额外的由于引用同样功能的脚本代码而导致下载时间的增加。
注意： 一般来讲，将实现通用功能的JavaScript脚本代码作为外部脚本文件引用，而实现特有功能的JavaScript代码则直接嵌入HTML文档中，目前业界推荐的做法是JavaScript代码放到最后，这样会避免因DOM没加载而产生的错误。
3.通过JavaScript伪URL引入
在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL调用语句来引入JavaScript脚本代码，这是一种短小高效的脚本代码嵌入方式。伪URL的一般格式如下，一般以“javascript:”开始，后面紧跟要执行的操作。
【例1-3】 通过JavaScript伪URL引入脚本，运行效果如图1-17和图1-18所示，代码如下。
图1-17 代码运行结果
图1-18 单击后弹出提示框（1）
4.通过HTML文档事件处理程序引入
在开发Web应用程序的过程中，开发者可以在HTML文档中设定不同的事件处理器，通常是设置某HTML元素的属性来引用一个脚本（可以是一个简单的动作或者函数），属性一般以on开头，如onmousemove（鼠标移动）等。
【例1-4】 通过HTML文档事件处理程序引入脚本，使用JavaScript脚本对按钮单击事件进行响应，代码如下。
程序运行后，原始页面如图1-19所示，单击“单击按钮”按钮，出现如图1-20所示的提示框。
图1-19 显示单击按钮页面
图1-20 单击后弹出提示框（2）
事件处理机制：除鼠标单击事件例子，类似的还有双击事件，需要使用ondblclick属性，示例中当单击事件触发时，弹出提示框，提示单击事件触发。
1-5 JavaScript常用的输出语句
JavaScript与用户交流的方式有多种，以多样的方式显示数据，实现页面的交互性，下面分别介绍JavaScript脚本常用的与用户交流的方式。
1.使用window.alert()弹出警告框，向用户发出警告或提醒
alert()方法会创建一个警告框，用于将浏览器或文档的警告信息传递给客户。参数可以是变量、字符串或表达式，警告框无返回值。“window”可以省略。
alert()方法的基本语法格式：
示例如下。
2.使用document.write()方法将内容写到HTML文档中
document.write()方法可以向文档写文本、HTML、表达式或JavaScript代码。该方法需要一个字符串参数，它是写到文档HTML中的内容，这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标签语言。
document.write()方法的基本语法格式：
示例如下。
3.使用console.log()写入浏览器的控制台
示例如下。
如果浏览器支持调试，可以使用console.log()方法在浏览器客户端显示JavaScript值。在调试窗口中单击“console”选项卡，HBuilder默认控制台里也可以显示结果。
4.使用confirm()方法确认用户的选择
向用户提供信息是有用的，但有时候还希望从用户那里获得信息。window.confirm("str")等效于confirm("str")，确认消息对话框返回值为布尔型，单击“确认”返回true，单击“取消”返回false，可以根据用户对提示的反应给出相应的回复，示例如下。
5.使用prompt()方法提示用户
1-6 prompt() 方法
有时候，不仅希望用户回答Yes/No，而且希望得到更特定的响应。在这种情况下，可问一个问题（带默认回答），然后接收回复。
prompt()方法用于显示可提示用户进行输入的对话框，返回用户输入的字符串，其基本语法prompt(msg，defaultText)
其中，参数msg可选，是要在对话框中显示的纯文本（而不是HTML格式的文本），用于提示。参数defaultText可选，是默认的输入文本。
例如可以使用prompt对话框询问用户籍贯，如图1-21所示，输入内容如图1-22所示，然后单击“确定”按钮，会出现如图1-23的结果，若单击“取消”按钮，会出现如图1-24的结果，示例代码如下。
图1-21 提示输入信息
图1-22 输入信息
图1-23 单击“确定”按钮处理结果界面
图1-24 单击“取消”按钮处理结果界面
6.使用innerHTML将JavaScript脚本写入HTML元素
【例1-5】 使用innerHTML将JavaScript脚本写入HTML元素，代码如下。
以上JavaScript语句可以在Web浏览器中执行，document.getElementById("demo")是通过id属性值来查找HTML元素的JavaScript代码；“innerHTML="学习环境无处不在，只要有文本编辑器，就能编写JavaScript程序。"”是用于修改元素的HTML内容（innerHTML）的JavaScript代码。
注意： console.log()和alert()主要用于调试，使用alert()和document.write()不好控制显示的位置，而使用innerHTML将JavaScript脚本写入HTML元素的方式可以精确地控制显示的位置，所以第6种方案最为常用。
本书案例使用HBuilder进行开发，并采用Chrome浏览器作为展示和调试工具，如果脚本代码出现错误，通过Chrome浏览器找出错误的类型和位置，用编辑器打开源文件修改后保存，并重新使用浏览器浏览，重复此过程直到没有错误出现为止。
1.边改边看模式
HBuilder的边改边看模式最方便，最常用。在HBuilder主界面右上角可以切换开发模式，可以选“边改边看模式”，切换模式的快捷键是“Ctrl+P”。进入“边改边看模式”后，左侧窗格会显示代码，右侧窗格会显示浏览器，如图1-25所示。Windows版的HBuilder界面右侧窗格的浏览器是Chrome；MAC版右侧窗格的浏览器是Safari。
图1-25 边改边看模式
在此模式下，如果当前打开的是HTML文件，每次保存均会自动刷新显示当前页面效果。若为JavaScript、CSS文件，如与当前浏览器视图打开的页面有引用关系，也会刷新。Windows版的边改边看模式还支持代码和页面元素的互相跳转。右击代码里的一个div元素，在弹出的快捷菜单中选择“高亮浏览器内对应元素”命令，就会看到右侧窗格浏览器里指定的元素高亮显示了，如图1-26所示。反之，右击浏览器某个元素点，在弹出的快捷菜单中选择“查找文档中对应元素”命令，会跳转到相应代码段落。
图1-26 HBuilder默认控制台
边改边看模式有两个控制台，默认控制台显示在HBuilder下方，直接输出了log和错误日志，显示了代码行号，单击后可直接转到该行代码，如图1-26所示。
另一个控制台是Chrome控制台。在Windows版HBuilder的边改边看模式下右击，可以通过在快捷菜单中选择命令选择启动Chrome控制台。Chrome控制台的功能非常多，如检查CSS覆盖、调试JavaScript、查看网页加载性能等。
2.程序出错的类型
（1）语法错误
语法错误是在程序开发中由于使用不符合某种语言规则的语句而产生的错误，例如错误地使用了JavaScript的关键字、错误地定义了变量名称等。如果存在语法错误，当浏览器运行JavaScript程序时就会报错。
如图1-27所示，代码“document.write("欢迎来到JavaScript世界");”中的英文分号“;”误写成了中文分号“；”，控制台就会提示错误（第9行中包含一个语法错误，在解决错误之前，代码提示可能无法正常工作）。
若要使用Chrome浏览器的错误代码提示信息，需要在浏览器中右击，在弹出的快捷菜单中选择“查看”命令打开开发者工具调试窗口，反复按“F12”键也可以切换状态（打开或关闭）。单击右上角的红色小叉号按钮就可以看到错误提示信息，如图1-28所示。
图1-27 语法错误实时检测（内置控制台输出错误信息）
图1-28 在Chrome浏览器中调试JavaScript
JavaScript区分大小写，如图1-29所示，代码“prompt("请输入你的年龄",20);”中的第一个字符误输成了大写字母，即“Prompt("请输入你的年龄",20);”，保存文件后运行本程序，将会出现错误提示。在外置Chrome浏览器中调试JavaScript（prompt方法），会出现如图1-30所示的错误。
图1-29 内置控制台输出错误提示
图1-30 在外置Chrome浏览器中调试JavaScript（prompt方法）
（2）逻辑错误
有时候，程序不存在语法错误，也没有执行非法操作的语句，可是程序运行时的结果却是不正确的，这种错误叫作逻辑错误。逻辑错误对于编辑器来讲并不算错误，但是由于代码中存在逻辑问题，导致运行时没有得到预期结果。逻辑错误在语法上是不存在错误的，但是在程序的功能上是个错误，而且是最难调试和发现的错误。因为它们不会抛出任何错误信息，唯一结果就是程序功能不能实现。
比如想判断一个人的名字是不是叫Bill，如果编写程序时却少写了一个字母“l”，写成了Bil，程序运行时就会发生逻辑错误。
更隐蔽的逻辑错误的例子还有很多，比如变量由于忘记初始化而包含垃圾数据、忘记判断结束条件或结束条件不正确使得循环提前或延后结束甚至成为死循环等。
【例1-6】 逻辑错误判断，输入如下代码。
以上代码中，最直接的逻辑错误是2(width+height)，因为在编程过程中乘号不可忽略，所以代码应为：
测试代码，默认宽为10米，高为20米，得到的结果如图1-31所示。
图1-31 测试结果
虽然用户输入的是数字10和20，但prompt()返回的是字符串类型，也就是"10"和"20"，所以语句c=2*(width+height)中变量width和height都是字符串类型，字符串类型的值相加是首尾相连，语句相当于：c=2*("10"+"20")，所以出现了“2040”的结果。所以输入的参数需要通过parseFloat()函数转换为数字，语句应为：
再次运行代码，可得到正确结果为60。
HTML定义了网页的内容，即页面结构；CSS（Cascading Style Sheet，层叠样式表）描述网页布局的样式；JavaScript控制网页的行为，即通过JavaScript脚本改变网页的内容和样式，实际上就是通过调用JavaScript函数改变文档中各个元素对象的属性值，或使用文档对象的方法模仿用户操作的效果。本书介绍JavaScript如何与HTML和CSS一起工作。
若按照结构、样式、行为的方式进行分离，对站点进行修改就会很容易，尤其修改全站点范围的效果会很方便，所以实现高质量的代码需要在结构、样式、行为分离的基础上做到精简、重用、有序。
1）精简：尽量减小文件的大小，提高页面加载速度。
2）重用：提高代码的重用性，减少冗余代码，提高开发速度。
3）有序：提高代码的结构性，组织好代码结构更利于维护和应变特殊情况。