JavaScript 高级.docx

1、JavaScript 高级JavaScript 浏览器检测 Previous Page Next Page 实例检测浏览器及版本 使用 JavaScript 检测关于访问者的浏览器名称及其版本。 检测浏览器的更多信息 使用 JavaScript 检测关于访问者浏览器的更多信息。 检测浏览器的全部信息 使用 JavaScript 检测关于访问者浏览器的全部信息。 根据浏览器类型提醒用户 使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。 浏览器检测本教程中几乎所有的代码均可在任何支持 JavaScript 的浏览器中运行。不过个别的代码无法运行

2、于特定的浏览器，特别是老式的浏览器。所以，有些时候对访问者的浏览器类型及版本进行检测是很有帮助的，然后可在此基础上为访问者提供合适的信息。要做到这一点，最好的办法是使你的网页变得足够聪明，这样的话它就可以不同的方式对待不同类型的浏览器。JavaScript 包含一个名为 Navigator 的对象，它就可以完成上述的任务。Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。Navigator 对象JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。appName 保存浏览器类型 appVer

3、sion 存有浏览器的版本信息（其他信息中的一项） 实例var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)document.write(Browser name: + browser)document.write()document.write(Browser version: + version)上面例子中的 browser 变量存有浏览器的名称，比如，Netscape 或者 Microsoft Internet Explorer。上面例子中的 app

4、Version 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。实例下面的脚本会根据访问者的浏览器类型显示不同的警告。function detectB

5、rowser()var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)if (browser=Netscape|browser=Microsoft Internet Explorer)& (version=4) alert(Your browser is good enough!)else alert(Its time to upgrade your browser!) JavaScript Cookies Previous Page Next Page c

6、ookie 用来识别用户。实例创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。 什么是cookie?cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。有关cookie的例子：名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 Welcome Joh

7、n Doe! 的欢迎词。而名字则是从 cookie 中取回的。 密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。 日期 cookie 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：Your last visit was on Tuesday August 11, 2005!。日期也是从 cookie 中取回的。 创建和存储 cookie在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次

8、访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：function setCookie(c_name,value,expiredays)var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ = +escape(value)+(expiredays=null) ? : ;expires=+exdate.toGMTString()上面这个函数中的参数存

9、有 cookie 的名称、值以及过期天数。在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。之后，我们要创建另一个函数来检查是否已设置 cookie：function getCookie(c_name)if (document.cookie.length0) c_start=document.cookie.indexOf(c_name + =) if (c_start!=-1) c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(

10、;,c_start) if (c_end=-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end) return 上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框

11、来要求用户输入名字。function checkCookie()username=getCookie(username)if (username!=null & username!=) alert(Welcome again +username+!)else username=prompt(Please enter your name:,) if (username!=null & username!=) setCookie(username,username,365) 这是所有的代码：function getCookie(c_name)if (document.cookie.length0)

12、 c_start=document.cookie.indexOf(c_name + =) if (c_start!=-1) c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(;,c_start) if (c_end=-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end) return function setCookie(c_name,value,expiredays)var exdate=ne

13、w Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ = +escape(value)+(expiredays=null) ? : ;expires=+exdate.toGMTString()function checkCookie()username=getCookie(username)if (username!=null & username!=) alert(Welcome again +username+!)else username=prompt(Please enter your na

14、me:,) if (username!=null & username!=) setCookie(username,username,365) JavaScript 表单验证 Previous Page Next Page JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。JavaScript 表单验证JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否合法？ 用户是否已输入合法的日期？ 用户是否在数据

15、域 (numeric field) 中输入了文本？ 必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：function validate_required(field,alerttxt)with (field)if (value=null|value=) alert(alerttxt);return falseelse return true下面是连同 HTML 表单的代码：function validate_required(field,a

16、lerttxt)with (field) if (value=null|value=) alert(alerttxt);return false else return true function validate_form(thisform)with (thisform) if (validate_required(email,Email must be filled out!)=false) email.focus();return false Email: E-mail 验证下面的函数检查输入的数据是否符合电子邮件地址的基本语法。意思就是说，输入的数据必须包含 符号和点号(.)。同时，

17、不可以是邮件地址的首字符，并且 之后需有至少一个点号：function validate_email(field,alerttxt)with (field)apos=value.indexOf()dotpos=value.lastIndexOf(.)if (apos1|dotpos-apos2) alert(alerttxt);return falseelse return true下面是连同 HTML 表单的完整代码：function validate_email(field,alerttxt)with (field)apos=value.indexOf()dotpos=value.last

18、IndexOf(.)if (apos1|dotpos-apos2) alert(alerttxt);return falseelse return truefunction validate_form(thisform)with (thisform)if (validate_email(email,Not a valid e-mail address!)=false) email.focus();return falseEmail: JavaScript 动画 Previous Page Next Page 我们可以使用 JavaScript 来创建动态的图像。实例按钮动画 利用两个不同的事件

19、来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。 JavaScript 动画使用 JavaScript 创建动态图像是可行的。窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。HTML 代码这是 HTML 代码：注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这

20、副图像替换为另一幅。onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。JavaScript 代码通过下面的代码来切换图像：function mouseOver()document.b1.src =/i/eg_mouse.jpgfunction mouseOut()document.b1.src =/i/eg_mouse2.jpg函数 mouseOver() 将图像切换为 eg_mouse.jpg。函数 mouseOut() 将图像切换为 eg_mouse2.jpg。完整的代码：function mouseOver() d

21、ocument.b1.src =/i/eg_mouse.jpg function mouseOut() document.b1.src =/i/eg_mouse2.jpg JavaScript 图像地图 Previous Page Next Page 图像地图指的是带有可点击区域的图像。实例简单的 HTML 图像映射 本例演示一幅没有添加 JavaScript 的图像映射。 添加了 JavaScript 的图像映射 本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 JavaScript 函数来显示热点所对应的星球的简介。 JavaScript 图像地图我们

22、已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接。实例下面的例子演示如何创建带有可点击区域的 html 图像地图： 结果添加 JavaScript我们可向图像地图内部的 标签添加（能调用JavaScript的）事件。 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。这是添加了 JavaScript 的上面的例子：function writeText(txt)document.getElementById(desc).innerHTML=txtarea shape =ci