JavaScript语言入门，第2部分：事件、cookie、定时等

标签： javascript 语言事件 | 发表时间：2011-08-10 12:04 | 作者：Elaine.Ye 小亮

出处：http://www.yeeyan.org

原作者：
来源Get started with the JavaScript language, Part 2: Events, cookies, timing, and more
译者Elaine.Ye

（译者注：由于yeeyan编辑器对文章中的标签做解析的原因，我在每个标签的空格，比如说，左尖括号<+script+右尖括号>，我会写成< script>，以便其能够在文章中正确显示，不便之处敬请谅解。

第一篇关于“JavaScript语言入门”的文章涵盖了JavaScript语言中许多最基础的内容，从创建脚本标签到使用注释、把JavaScript文件包含到HTML文档中、定义变量、使用运算符、定义数组、使用条件语句、定义函数和使用循环等。本文从上一篇文章结束的地方开始，解释其他的一些基本的JavaScript语言概念，继续为初学者提供对语言的基础理解。本文提及的基础内容能够让你更好地理解所使用的库，知道如何就究竟要不要使用库做出决定，甚至有可能会给你带来一些编写自己的库的勇气。文章自始至终都在提供例子来说明语言是如何实现其各个方面的。

事件

事件（event）是使用JavaScript语言来把任何类型的交互加入到网页中的触媒，每个HTML元素都有你可用来触发JavaScript代码的相关事件。例如，input域就有很多可能的事件：你可以关联focus（焦点）事件，在有人点击或是跳转到input域上时就触发JavaScript代码，或是你可以关联一个blur（失焦）事件，当有人点击一个已获得焦点的input域的外部或是从该域跳转出去时触发JavaScript代码。在关联事件之后，就会出现无限的可能性。例如，blur事件会触发检查input域中的数据是否有效的JavaScript代码，如果无效的话，就有一条内联的消息被显示出来，作为一种自动的反馈。下面的代码提供了一个例子，说明focus和blur事件是如何用来在input域中显示缺省的文本的。

< input type="text" name="email" value="Enter your email address"
onfocus="this.value = '';" onblur="if(this.value == '')
this.value = 'Enter your email address';" />

这里的input域带有一个缺省的值，因此，当在网页浏览器中查看该域时，这一input域显示文本“Enter your email address”。在有人点击或是跳转到该域时，为了让缺省值消失，focus事件被用来把域的值设置成一个空串。如果有人点击或是跳转到input域的外部的话，blur事件就被用来再次显示缺省文本，如果你没有这样做的话，那么留下的就是他们自己输入的文本了。

每个HTML元素都有与自身相关的事件。表1列出了一些最常见的HTML元素及其相关事件。

表1. 常见元素及其相关事件

元素　　　　事件
body    　　onload、onunload
input    　　onfocus、onblur、onchange、onkeydown、onkeypress、onkeyup
form    　　onsubmit
img    　　 onmouseover、onmouseout、onclick　　　

try...catch和throw

try...catch语句提供了一种检测代码错误的方式，这样就无需把错误发送给浏览器或是给出一种自定义的错误。如果某个JavaScript错误没有被包含在一个try...catch语句的内部的话，则任何后继的JavaScript代码就都不能被执行了，而浏览器则不得不使用自己的方式来处理和显示该错误。这一语句的try部分被用来执行JavaScript代码，catch部分则处理可能会在try部分出现的错误。在执行一些在某些浏览器中可能不能正常工作的代码时，你可以使用这一语句构造。如果这种代码放在try...catch语句的内部的话，那么在有错误返回时，它只是被忽略不执行，catch部分则会处理该错误。这一错误有可能确实给出一个错误信息，或是什么也不做，这取决于用户是否需要知道错误的出现。

使用try...catch来处理错误

该语句的catch部分还可以包含一个缺省的错误对象参数，这一错误对象返回与在语句的try部分出现的错误相关的信息。错误对象有两个属性：message和line。message提供的文本描述了发生的确切错误；line提供了错误出现的确切代码行数。清单1给出了一个try...catch语句例子，该例子使用一个错误对象来通知错误消息和行数。当然，这种信息只有在调试状态下才是比较有用的，但是在不依赖浏览器的处理的情况下，而又打算给用户提供关于某个已发生错误的反馈时，这些属性就变得很有用了。

清单1. 在try...catch语句中使用错误对象来调式错误

try
{
   // 试图在这里执行产生错误的代码
}
catch(err)
{
   var txt = err.message +'\n';
   txt += err.line;
   alert(txt);
}　

使用throw语句来创建错误异常

try...catch构造提供了非常棒的错误处理功能，不过你还可以采取更进一步的做法，那就是使用throw语句。throw语句允许你基于某些条件来创建错误异常，这种方式提供了最佳的机会来创建更加用户友好的错误信息，这些错误信息准确且是用通俗易懂的语言来描述的。清单2给出了一个简单的例子，说明了如何使用throw语句来在try...catch语句的try部分创建一个基于条件的错误异常。

清单2. 使用throw语句来创建错误异常

< script type="text/javascript">
var x=prompt("What type of music is Led Zeppelin?","");
try
{
   if(x != 'rock and roll')
   {
   throw "Err1";
   }
}
catch(er)
{
   if(er=="Err1")
   {
   alert("Sorry, you're wrong.");
   }
}
< /script>

需要注意的一点是，try、catch和throw都是小写的：使用大写会产生一个JavaScript错误。

创建弹出框

JavaScript允许你创建几种类型的弹出框，最常见的一些类型——也是这里要谈论的显示框——是警告框、确认框和提示框。

警告框

警告框并不常用于它们的最初目的，它们是一种快速方便地显示页面错误、警告或是其他重要消息的方式。目前，警告框最常用来作为调试JavaScript代码的方式，所以公平地来讲，它们还是有着自己的位置所在的——只是这一最佳做法不是用于最初打算的目的罢了。而且，如果你使用 Mozilla Firefox、Apple Safari或是Google Chrome的话，那么可以只用console.log就可以达到调试的目的了。所以底线是，当所有其他的做法都失败了的话，警告框是一个可行的替代方案，能够完成任务。创建一个警告框非常的容易：只要把alert函数当作一行代码录入，并给它传递一个参数，其就会使用你传递给它的任何值来打开一个窗口。例如，你可以录入一个简单的串，或是你可以使用警告框来显示作为参数传递给它的变量的值，这是一个很好的说明警告框如何用来做调试的例子。下面是一个很基础的例子，说明如何使用alert函数来产生一个警告框。

alert("This can be a variable or a simple text string");

确认框

确认框被用来验证用户在网站上所做的选择。例如，如果你是web应用的开发者，而某个用户选择了删除他或她的用户帐号的话，则在允许用户继续提交请求之前对这一选择进行确认会是一个很好的考虑。

通常情况下，confirm函数会写在某个条件语句的内部，首先确认用户是否打算要继续所做的选择，接着，基于该决定来确定是否要执行JavaScript代码。下面的例子把confirm函数用在条件中，以此来确定要执行哪一段JavaScript代码：

if(confirm("Click for a response"))
{
alert('You clicked OK');
}
else
{
alert('You clicked Cancel');
}

提示框

在寻找一种快速的提出问题，并允许用户提供一个答案的方式时，不要找别的，提示框就最合适了。通常情况下，现在的web开发者都选择定制的内联弹出窗口。虽然是这样，但提示框依然存在，它们依然有着自己的一席之地，特别是在调试的时候。prompt函数被用来产生一个提示框，其有两个参数，第一个参数是一个自定义的文本串，这通常是一个问题或是提示用做出某种响应的陈述；第二个参数是一个文本串，其被用作显示在提示框中的缺省的输入文本。这一缺省值是可选的，且你可在运行时改变它。下面是一个prompt函数的列子，该函数被用来向用户提出一个问题，然后在一个警告框中显示用户的响应，显示用到的是从prompt函数中返回的值。

var response=prompt("What is your favorite band?","Led Zeppelin");
if (response!=null && response!="")
{
alert("response: "+ response);
}

使用cookie

cookie的存在是为了在客户端存储数据，这样你的JavaScript代码在过后就可以检索和重用这些数据。如果使用得当的话，把数据存储在用户的计算机上会有许多的好处。你可以使用cookie来定制用户的体验，确定如何基于之前的行为来给他们呈现信息等等。cookie使用的例子包括了存储访问者的名称或是其他相关信息，这些信息过后可用来显示在网站上。cookie是一个存放在访问者的web浏览器中的文本文件，其包含了一对名称-值、一个到期日期，以及其应该发送给的服务器的域和路径。

创建cookie

创建cookie很简单：你只需要确定想要存放的信息、存放的时长，以及为将来的引用命名该cookie就可以了。不过，虽然创建它是很简单，但语法却有些难整，你需要给出正确的语法，它才能正常地起作用。下面的代码展示了一个如何创建cookie和把数据存放在其中的例子。

document.cookie =
'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'

存放在cookie中的串的第一部分是一对名-值，即cookiename=cookievalue这部分，一个分号（;）把这一名值对和第二部分隔开来。串的第二部分是以正确格式书写的到期日期，后面跟着一个分号来把它和第三部分，也就是最后一部分分开来，这一部分是路径。

从cookie中检索出数据

把数据存放在cookie中所需的语法有些麻烦，但在以后的时间里通过名称来检索cookie的值却是很容易。下面是通过名称来检索cookie值的做法。

alert(document.cookie);

这一代码从当前域中取得cookie；不过域中可能存放了多个cookie，document.cookie是一个数组，因此，要检索某个特定的cookie的话，你需要正确地找到目标。你很走运：清单3中的自定义函数使得这一过程变得很容易，只要把cookie名称作为参数传进去，接着就可以收到cookie的值了。

清单3. 从已存储的cookie中检索数据

正如你所见到的那样，cookie提供了强大的功能，能够为访问者创建定制的体验，也可以只是存储数据以备以后使用。

定时

JavaScript提供了几个函数来让你控制和设置某些行为的执行时间，这类函数中最常见的是：

1. setInterval
2. clearInterval
3. setTimeout
4. clearTimeout

setInterval函数

在某些情况下，JavaScript代码需要反复执行但又无需任何的用户交互，setInterval函数可以让你很容易就做到这一点。setInterval有两个必需的和一个可选的参数，第一个必需的参数是你想要重复执行的代码（code），第二个参数是毫秒（milliseconds），其定义了JavaScript代码每次执行的间隔时长。第三个可选参数是一个可传递给函数调用的实际参数，这一函数调用是通过code参数来指定的。一开始你可能会觉得所设置的间隔时长有些奇怪，因为它被定义成毫秒。因此，如果你希望每间隔一秒钟运行一次的话，就是要1000毫秒，两秒就是2000毫秒，如此类推。表2列出了每个参数及其在setInterval函数中的作用。

表2. setInterval函数的可用参数

参数　　　　　　必需的还是可选的　　　描述

code　　　　　　必需的　　　　　　　　 setInterval函数要执行的JavaScript代码；
　　　　　　　　　　　　　　　　　　　　这一代码可以是定制的或是一个函数调用。

milliseconds　　必需的　　　　　　　　每两次代码执行之间的间隔时长，以毫秒为单位。

argument　　　可选的　　　　　　　　是一个很有用的参数，当函数被用作code参数时，
　　　　　　　　　　　　　　　　　　　　可用来把实际参数传递给该函数。

下面的代码提供了这样的一个例子，即如何使用setInterval函数来每隔10秒钟就执行一次另一个函数，并把一个参数传递给该函数。这样argument的值就可以在执行函数的内部被访问，该参数可以是一个变量、对象，或是一个简单的文本串，如该例子中展示的那样：

setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
}

如果你想要终止这样的一种间隔执行的话，语言也为此提供了一个函数。

clearInterval函数

终止间隔行为需要用到clearInterval函数，不过在最初创建间隔行为时必须要包含一个变量，这样之后的clearInterval才能引用它。下面的代码提供了一个例子，说明clearInterval函数如何引用之前为最初的setInterval设定的变量：

var myInterval = setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
clearInterval(myInterval);
}

正如你所见到的那样，最初的setInterval函数被指派了一个变量名，其名称为myInterval。在这以后你就可以使用myInterval来引用setInterval，并可改变这一变量，或是使用clearInterval函数来停止最初的间隔执行函数。在这一例子中，这一函数只被调用了一次，因为clearInterval函数在该函数第一次调用时就执行了。

setTimeout函数

在可以基于某个时间约束来执行代码方面，setTimeout函数类似于setInterval函数，甚至其参数也是和setInterval的一样的（参见表2）。不过，最大的不同则是 setTimeout函数只执行代码一次而不是重复执行。这里的例子说明了如何使用 setTimeout函数来在10秒钟之后执行一个函数。

setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
}

在你希望执行某些代码，但又不想立刻执行的时候，setTimeout很有用，其实质上就是一种延迟代码执行的方式。

clearTimeout函数

如果出于某些原因，你改变了主意，需要取消setTimeout设置的延迟行为的话，则clearInterval函数可用来处理这一工作。与clearInterval函数一样，要为setTimeout函数指派一个变量名称，这样过后clearTimeout就可以引用它并停止它所设定的行为。下面的代码提供的例子说明了如何使用clearTimeout来停止setTimeout设定的调用：

var myTimeout = setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
alert('myFunction argument value: '+ myArg);
clearTimeout(myTimeout);
}

在这一例子中，你给最初的setTimeout函数指派了一个变量名称，其被命名为myTimeout。接着你就可以使用myTimeout来引用 setTimeout函数并使用clearInterval函数来停止它。

结论

JavaScript语言可以说是最受欢迎的语言之一，现在你明白这是为什么了。这一简单而又丰富的脚本语言带来了如此之多的可能性，它提供的工具允许网站访问者和下载后的网页进行交互，这一功能非常的强大。本文为理解JavaScript语言的基本原理奠定了基础：接下来要做的事情就是把这些概念付诸实践，并开始探索JavaScript对象。

参考资料

学习资料

1. Dev Guru提供一个关于JavaScript语言的全面指南。

2. Web development zone：developerWorks的Web开发专区转门提供介绍各种基于Web的开发方案的文章。

3. 现在就访问developerWorks technical events and webcasts，关注各种IBM产品和IT行业主题。

4. 关注 developerWorks on Twitter。

获取产品和技术

1. 在你已经对JavaScript语言有了一个基础的了解之后，JQuery库会是一种很好的加快开发的方式。

2. Dojo Toolkit，一个开源的模块化JavaScript库，有助于你快速开发跨平台的、基于JavaScript/Ajax的应用和网站。

3. 免费试用IBM软件，下载使用版，登录在线试用，在沙箱环境中使用产品，或是通过云来访问，有超过100种IBM产品试用版选择。

讨论

1. 现在就创建你的developerWorks个人资料，并设置一个关于JavaScript的观看列表。与developerWorks社区建立联系并保持联系。

2. 找到其他在web开发方面感兴趣的developerWorks成员。

3. 分享你的知识：加入一个关注web专题的developerWorks组。

4. Roland Barcia在他的博客中谈论Web 2.0和中间件。

5. 关注developerWork成员的shared bookmarks on web topics。

6. 快速获得答案：访问Web 2.0 Apps论坛。

7. 快速获得答案：访问Ajax论坛。

关于作者

Kris Hadlock从1996年开始就已经是一位合约式的web开发者和设计者了，他曾为诸如SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software和Fire Mountain Gems等一类的公司开发过项目。他是Ajax for Web Application Developers （Sams）和The ActionScript Migration Guide （New Riders）两本书的作者，并且是一位很有特色的专栏作家，他为众多网站和设计杂志撰写文章，其中包括Peachpit.com、InformIT.com和Practical Web Design杂志等。Kris还是www.studiosedition.com网站的创建人，这是一个专注于形式和功能相融合的网页设计和软件开发工作室。