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

摘自：http://www.ibm.com/developerworks/cn/web/wa-javascriptstart2/

事件

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

在这里有一个拥有默认值的 field 字段，当在 web 浏览器查看时，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 语句内，很简单它就不执行。这个错误可以是一个真实的错误信息，或者它也许什么都不做，这基于用户是否需要知道它已出现。

用 try...catch 处理错误

语句的 catch 部分也包括一个错误对象的默认参数。这个错误对象返回发生在 try 语句部分的相关错误信息。这个错误对象有两个属性：message 和 line。message 提供陈述发生的确切错误的文本，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, catch 和 throw 都用小写字母书写：使用大写字母会产生一个 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 命名为什么。然而，尽管创建是简单的，语法有点棘手，为了正确地运行，您需要使它正确。以下代码显示了如何创建一个 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 检索数据

 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 提供强大的功能并为您的访问者提供了创建一个定制的体验的能力，而且还存储将来能使用的数据。

 cookie:

function setCookie(name, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + ';expires=' + oDate;
}

function getCookie(name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
if (arr2[0] === name) {
return arr2[1];
}
}
}

function removeCookie(name) {
setCookie(name, 1, -1);
}

时间控制

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 函数中止它。