JavaScript入门之事件、cookie、定时等

答案：一篇关于“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; 

上一个：利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
下一个：jquery ajax return没有返回值的解决方法