开始使用 JavaScript 语言,第 2 部分: 事件,cookie,定时等

JavaScript 正越来越受欢迎,可以说是互联网上最广泛使用的语言之一。它可以跨平台和跨浏览器使用,且它不排斥后端语言。许多很棒的开发库都可以用来帮助开发,但有时候这些库与原始语言之间很是有一些距离,这使得刚入门的开发者缺乏一种对语言的基础了解。本篇文章,作为系列的第 2 部分,继续讲解 JavaScript 的基础知识,内容包括事件、 try...catch 语句、cookie 的使用和定时函数等。

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

//www.ibm.com/developerworks/i/p-khadlock.jpgKris 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 的创始人,这是一个网站设计和软件开发工作室,一家专门从事形式和功能融合的工作室。



2012 年 7 月 02 日

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

事件

事件是使用 JavaScript 语言对网页添加任何交互性类型的催化剂。每个 HTML 元素都有触发可用的相关事件来触发 JavaScript 代码。例如,一个 input 字段有许多可能的事件:当某人单击或转入一个 input 字段,您可以关联 focus 事件来触发 JavaScript 代码,或者当有人转出或单击一个有针对性的 input 字段之外时,您可以关联一个 blur 事件来触发 JavaScript 代码。当您已经关联好事件后,可能性是无穷的。例如,blur 事件可以触发 JavaScript 代码来检查 input 字段是否有正确数据,如果没有,则在线显示一条信息作为自动反馈。以下代码提供了一个 focusblur 事件在一个 input 字段内能用于显示默认文本的示例:

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

在这里有一个拥有默认值的 field 字段,当在 web 浏览器查看时,input 字段显示了文本"Enter your email address"。当某人单击或转入这个字段时,为了能让这个默认文本消失,使用 focus 事件并设置一个空字符串的字段值。如果某人转出或单击 input 字段以外的地方,使用 blur 事件来再次显示默认文本,否则,留下它们的自定义文本。

每个 HTML 元素都有与它相关联的时间。表 1 列出了一些最常见的 HTML 元素和与之相关联的事件。

表 1. 常见元素及其相关联的事件
元素事件
bodyonload, onunload
inputonfocus, onblur, onchange, onkeydown, onkeypress, onkeyup
formonsubmit
imgonmouseover, onmouseout, onclick

Try...catch 和 throw

Try...catch 语句提供了一个不需向浏览器发送错误或显示一个自定义错误就能测试代码的方法。如果一个 JavaScript 错误不在 try...catch 语句内,则不执行任何一个进行中的 JavaScript 代码,并且浏览器保持它处理和显示错误的原形式。使用语句的 try 部分来执行 JavaScript 代码;catch 部分处理 try 部分也许已经出现的错误。当执行也许在某些浏览器中没有运作的代码时,可以使用这个结构。如果这个代码在 try...catch 语句内,很简单它就不执行。这个错误可以是一个真实的错误信息,或者它也许什么都不做,这基于用户是否需要知道它已出现。

用 try...catch 处理错误

语句的 catch 部分也包括一个错误对象的默认参数。这个错误对象返回发生在 try 语句部分的相关错误信息。这个错误对象有两个属性:messagelinemessage 提供陈述发生的确切错误的文本,line 提供错误发生的代码的确切行。清单 1 显示了 try...catch 语句的示例,它使用了那个错误的对象来警告那条信息和行。当然,这条信息仅对正在调试的环境有用,但是当试图向用户对错误提供反馈而不依赖于浏览器处理错误时,这些属性就能变得有用。

清单 1. 在 try...catch 语句中使用那个错误对象来调试错误
 try 
 { 
   // Attempt to execute code that produces an error here 
 } 
 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, catchthrow 都用小写字母书写:使用大写字母会产生一个 JavaScript 错误。


JavaScript 让您创建几种类型的弹出框。最常见的类型 —以及这里讨论的类型 — 是警报框、确认框和提示框。

警报框

警报框不常用于它们的初衷,它是一种显示页面错误、警告信息或其他重要信息的快速、简便的方法。现在,警报框最常用作调试 JavaScript 代码的一种方法,所以可以这样说它们依然有自己的位置 —为原来预期的目的来使用它们并不是最好的实践。同样,如果您使用 Mozilla Firefox,Apple Safari 或 Google Chrome,您只需使用控制台 .log 文件来实现调试目的,底线是当所有其他功能失败,警报还一个可行的选项并能完成这些工作。创建一个警报框非常简单:只要作为一行代码输入 alert 函数并传递给它一个参数,它就将依照您传给它的值创建一个窗口。例如,您可以输入一个简单的字符串,或者您可以使用警报来显示一个变量的值,可以通过把它作为一个变量传递给它,这是如何使用 alert 调试的一个好的示例。这里有一个您如何使用 alert 函数来生成一个警报框的基本示例。

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

确认框

使用确认框来核实用户已在您的网站做的选择。例如,如果您是一个 Web 应用程序的开发人员,一个用户已经选择删除他或她的用户账号,在允许用户继续提交一个请求之前确定选项是一个很好的办法。

通常,confirm 函数首先写入一个条件语句来确认用户正试图继续进行已经做出的选择,然后,基于那个决定来确定是否执行 JavaScript 代码。这是在决定执行哪一个 JavaScript 代码的情况下使用 confirm 函数的一个示例。

 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); 
 }

使用 cookies

Cookie 的存在用于存储客户端 JavaScript 代码以后检索和再使用的数据。当明智地使用时,在用户计算机存储数据会有许多好处。您可以使用 cookies 来自定义用户体验,决定如何基于预先动作向他们呈现信息等等。一个 cookie 使用的示例包括存储访问者的姓名或其他以后在网站可以使用或显示的相关信息。cookie 是一个存储在访问者 Web 浏览器的文本文件,包括一个名值对、一个截止日期和它应该发送到的服务器的域名和路径。

创建一个 cookie 很简单:您只需确定您想存储的信息,存储的期限和为了以后参考您把 cookie 命名为什么。然而,尽管创建是简单的,语法有点棘手,为了正确地运行,您需要使它正确。以下代码显示了如何创建一个 cookie 并在它内部存储数据的示例:

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

cookie 中存储的字符串的第一部分是名值对,它是 cookiename=cookievalue。一个分号 (;) 把这个名值对与第二部分分开。字符串的第二部分是以正确格式的截止日期,跟随者一个与第三部分和最终部分(路径)分开的分号。

在 cookie 中存储数据需要一点有技巧的语法,但在将来,以名称检索 cookie 值是简单的。如下是如何使用名称检索一个 cookie 值:

 alert(document.cookie);

这个代码带给您当前域的 cookie ;然而,一个域可以存储多个 cookie ,document.cookie 是一个数组。因此,要检索一个特定的 cookie 的值,需要正确地把它作为目标。您很幸运:清单 3 中的自定义函数使得将 cookie 名称作为参数传递以及接收 cookie 值变得简单。

清单 3. 从一个已存储的 cookie 检索数据
 function getCookie(c_name) 
 { 
 var i,x,y; 
 var cookieArray = document.cookie.split(";"); 
 for (i=0;i<cookieArray.length;i++) 
 { 
  x = cookieArray[i].substr(0,cookieArray[i].indexOf("=")); 
  y = cookieArray[i].substr(cookieArray[i].indexOf("=")+1); 
  x = x.replace(/^\s+|\s+$/g,""); 
  if(x == c_name) 
  { 
	  return unescape(y); 
	  } 
	 } 
 } 
 alert(getCookie('cookiename'));

正如您所看到的,cookie 提供强大的功能并为您的访问者提供了创建一个定制的体验的能力,而且还存储将来能使用的数据。


时间控制

JavaScript 提供几种函数可以使您控制并设置某些动作的时间控制。最常用的函数是:

  • setInterval
  • clearInterval
  • setTimeout
  • clearTimeout

setInterval 函数

在某些情况下有必要不与任何用户交流反复地执行 JavaScript 代码。setInterval 函数让您简单地实现它。setInterval 采用两个必需参数和一个可选参数。第一个必需参数是您想要反复执行的代码,第二个参数是毫秒,它规定了每个 JavaScript 代码执行的持续时间。第三,可选参数是一个可以传递到函数调用的参数。这个函数调用是通过 code 参数产生的。在间隔之间设置持续时间起初可能有点奇怪,正如它在毫秒中定义的一样。所以,如果您需要间隔每秒运行,您将使用 1000 毫秒,每 2 秒用 2000 毫秒,等等。表 2 列出了每个参数以及它在 setInterval 函数中的作用。

表 2. setInterval 函数可用的参数
参数必须的还是可选的?描述
code必需的setInterval 函数执行的 JavaScript 代码;这个代码可以是自定义的或是一个函数调用。
milliseconds必须的持续时间,以毫秒表示,在每个代码执行之间。
argument可选的当一个函数被用作 code 参数时,一个有用的参数用来把参数传递给函数。

以下代码提供了一个如何使用 setInterval 函数每 10 秒执行另一个函数并向它传送一个参数的示例。这个参数值然后可以在已执行的函数内被访问。这个参数可以是一个变量、一个目标或一个简单的文本字符串,如这个示例中所示:

 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 可以说是最流行的编程语言之一,现在您可以看出原因了。对于这个简单而又丰富的脚本语言有这么多的可能性,它提供的工具在它从网站被下载以后允许网站访问者与 Web 网页互动的事实是强有力的。本文已经为了解 JavaScript 语言的基本原理奠定基础:下一步是把这些概念付诸于时间并开始探索 JavaScript 对象。

参考资料

学习

获得产品和技术

  • 当您对 JavaScript 语言获得了一个基本了解,jQuery库是一个加速开发的好方法。
  • Dojo Toolkit,一个开源模块的 JavaScript 库,帮助您快速开发跨平台的、基于 JavaScript/Ajax 的应用程序和网站。
  • 免费试用 IBM 软件。下载试用版,登陆在线试用版,在沙箱环境下使用产品或通过云来访问它。有超过 100 种 IBM 产品试用版选择。

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=824105
ArticleTitle=开始使用 JavaScript 语言,第 2 部分: 事件,cookie,定时等
publish-date=07022012