JavaScript高级教程.doc

JavaScript 浏览器检测 Previous Page Next Page 实例检测浏览器及版本 使用 JavaScript 检测关于访问者的浏览器名称及其版本。 检测浏览器的更多信息 使用 JavaScript 检测关于访问者浏览器的更多信息。 检测浏览器的全部信息 使用 JavaScript 检测关于访问者浏览器的全部信息。 根据浏览器类型提醒用户 使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。 浏览器检测本教程中几乎所有的代码均可在任何支持 JavaScript 的浏览器中运行。不过个别的代码无法运行于特定的浏览器，特别是老式的浏览器。所以，有些时候对访问者的浏览器类型及版本进行检测是很有帮助的，然后可在此基础上为访问者提供合适的信息。要做到这一点，最好的办法是使你的网页变得足够聪明，这样的话它就可以不同的方式对待不同类型的浏览器。JavaScript 包含一个名为 Navigator 的对象，它就可以完成上述的任务。Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。Navigator 对象JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。appName 保存浏览器类型 appVersion 存有浏览器的版本信息（其他信息中的一项） 实例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。上面例子中的 appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。实例下面的脚本会根据访问者的浏览器类型显示不同的警告。function detectBrowser()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 cookie 用来识别用户。实例创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。 什么是cookie?cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。有关cookie的例子：名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 Welcome John Doe! 的欢迎词。而名字则是从 cookie 中取回的。 密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。 日期 cookie 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：Your last visit was on Tuesday August 11, 2005!。日期也是从 cookie 中取回的。 创建和存储 cookie在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 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()上面这个函数中的参数存有 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(;,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 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。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) 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=new 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 name:,) if (username!=null & username!=) setCookie(username,username,365) JavaScript 表单验证 Previous Page Next Page JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。JavaScript 表单验证JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否合法？ 用户是否已输入合法的日期？ 用户是否在数据域 (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,alerttxt)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 验证下面的函数检查输入的数据是否符合电子邮件地址的基本语法。意思就是说，输入的数据必须包含 符号和点号(.)。同时， 不可以是邮件地址的首字符，并且 之后需有至少一个点号：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.lastIndexOf(.)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 来创建动态的图像。实例按钮动画 利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。 JavaScript 动画使用 JavaScript 创建动态图像是可行的。窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。HTML 代码这是 HTML 代码：注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。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() document.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 图像地图我们已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接。实例下面的例子演示如何创建带有可点击区域的 html 图像地图： 结果添加 JavaScript我们可向图像地图内部的 标签添加（能调用JavaScript的）事件。 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。这是添加了 JavaScript 的上面的例子：function writeText(txt)document.getElementById(desc).innerHTML=txt JavaScript 计时 Previous Page Next Page 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。实例简单的计时 单击本例中的按钮后，会在 5 秒后弹出一个警告框。 另一个简单的计时 本例中的程序会执行 2 秒、4 秒和 6 秒的计时。 在一个无穷循环中的计时事件 在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。 带有停止按钮的无穷循环中的计时事件 在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。 使用计时事件制作的钟表 一个 JavaScript 小时钟JavaScript 计时事件通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:setTimeout() 未来的某时执行代码 clearTimeout() 取消setTimeout() setTimeout()语法var t=setTimeout(javascript语句,毫秒)setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 alert(5 seconds!)，或者对函数的调用，诸如 alertMsg()。第二个参数指示从当前起多少毫秒后执行第一个参数。提示：1000 毫秒等于一秒。实例当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。function timedMsg() var t=setTimeout(alert(5 seconds!),5000) 实例 - 无穷循环要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。var c=0var tfunction timedCount() document.getElementById(txt).value=c c=c+1 t=setTimeout(timedCount(),1000) clearTimeout()语法clearTimeout(setTimeout_variable)实例下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 Stop Count! 按钮来停止这个计数器：var c=0var tfunction timedCount() document.getElementById(txt).value=c c=c+1 t=setTimeout(timedCount(),1000) function stopCount() clearTimeout(t) 创建你自己的 JavaScript 对象 Previous Page Next Page 对象有助于组织信息。实例创建对象的实例 本例向您展示如何创建 JavaCript 对象的实例 (instance)。 创建用于对象的模板 本例向您展示如何创建 JavaCript 对象的模板 (template)。 JavaScript 对象在本教程前面的章节，我们已经学习到 JavaScript 拥有若干内置的对象，比如 String、Date、Array 等等。除了这些对象，你还可以创建自己的对象。对象仅仅是一种特殊的数据类型而已，并拥有一系列的属性和方法。让我们用一个例子来理解：一个人就是一个对象。属性是和对象有关的值。人的属性包括其名字、身高、体重、年纪、肤色、眼睛的颜色等等。所有的人都有这些属性，但是每个人的属性的值却各不相同。对象也拥有方法。方法是可施加于对象上的行为。人的方法可能是吃、睡、工作、玩等等。属性访问对象的属性的方法：对象名.属性名通过简单地向属性赋值，你就可以向对象添加属性。假定存在 personObj 这个对象 你可以添加诸如 firstname、lastname、age 以及 eyecolor 等属性。personObj.firstname=JohnpersonObj.lastname=DoepersonObj.age=30personObj.eyecolor=bluedocument.write(personObj.firstname)上面的代码生成以下的输出：John方法对象可包含方法。使用下面的语法来调用方法:对象名.方法名()注意：位于括号之间的用于方法的参数是可以省略的。调用名为 sleep 的 personObj 对象的方法：personObj.sleep()创建你自己的对象有多种不同的办法来创建对象：1. 创建对象的实例下列代码创建了一个对象的实例，并向其添加了四个属性：personObj=new Object()personObj.firstname=JohnpersonObj.lastname=DoepersonObj.age=50personObj.eyecolor=blue向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：personObj.eat=eat2. 创建对象的模版模版定义了对象的结构。function person(firstname,lastname,age,eyecolor)this.firstname=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolor注意：模版仅仅是一个函数。你需要在函数内部向 pertiName 分配内容。一旦拥有模版，你就可以创建新的实例，就像这样：myFather=new person(John,Doe,50,blue)myMother=new person(Sally,Rally,48,green)同样可以向 person 对象添加某些方法。并且同样需要在模版内进行操作：function person(firstname,lastname,age,eyecolor)this.firstname=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolorthis.newlastname=newlastname注意：方法只是依附于对象的函数而已。然后，我们需要编写 newlastname() 函数：function newlastname(new_lastname)this.lastname=new_lastnameNewlastname() 函数定义 person 的新的 lastname，并将之分配给 person。通过使用 “this.”，JavaScript 即可得知你指的 person 是谁。因此，现在你可以这样写：myMother.newlastname(Doe)。JavaScript 总结 Previous Page Next Page 现在已经你已经学习了 JavaScript，接下来该学习什么呢？JavaScript 概要本教程中我们向您讲授了如何向 html 页面添加 JavaScript，使得网站的动态性和交互性更强。你已经学习了如何创建对事件的响应，验证表单，以及如何根据不同的情况运行不同的脚本。你也学到了如何创建和使用对象，以及如何使用 JavaScript 的内置对象。如需更多关于 JavaScript 的信息和知识，请参阅我们的 JavaScript 实例 和 JavaScript 参考手册。现在已经你已经学习了 JavaScript，接下来该学习什么呢？下一步应该学习 HTML DOM 和 DHTML。如果你希望学习关于服务器端脚本的知识，那么下一步应该学习 ASP。HTML DOMHTML DOM 定义了访问和操作 HTML 文档的标准方法。HTML DOM 独立于平台和语言，可被任何编程语言使用，比如 Java、JavaScript 和 VBscript。假如希望了解更多关于 DOM 的知识，请访问我们的 HTML DOM 教程。DHTMLDHTML 是 HTML、CSS 和 JavaScript 的集合。DHTML 用于创建动态的交互式的网站。W3C 有过这样的描述： Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.假如你希望学习更多关于 DHTML 的知识，请访问我们的 DTHML 教程。ASP和 HTML 文档中的脚本运行于客户端（浏览器）不同，ASP 文件中的脚本运行于服务器之上。使用 ASP，你可以动态地编辑、改变或者添加网站内容，对由 HTML 表单提交而来的数据进行响应，访问数据或者数据库并向浏览器返回结果，或者定制对不同的用户来说更有帮助的网页。由于 ASP 文件返回纯粹的 HTML，因此可被任何浏览器所读取。如果希望学习更多关于 ASP 的知识，请访问我们的 ASP 教程。JavaScript 实例 Previous Page Next Page 基础 JavaScript 实例生成文本 生成普通文本和标签 head 部分 body 部分 外部 JavaScript 例子解释JavaScript 语句、注释和代码块JavaScript 语句 JavaScript 代码块 JavaScript 单行注释 JavaScript 多行注释 使用单行注释来防止执行 使用多行注释来防止执行 例子解释JavaScript 变量声明一个变量，为它赋值，然后显示出来 例子解释JavaScript 条件语句 If . ElseIf 语句 If.else 语句 If.else if.else 语句 随机链接 例子解释JavaScript 消息框警告框 带有折行的警告框 确认框 提示框 例子解释JavaScript 函数函数 带有参数的函数 带有参数的函数 2 返回值的函数 带有参数并返回值的函数 例子解释JavaScript 循环For 循环 循环产生 HTML 标题 While 循环 Do while 循环 break 语句 continue 语句 使用 For.In 声明来遍历数组内的元素 例子解释JavaScript 错误处理try.catch 语句 带有确认框的 try.catch 语