javascript培训-高级教程.doc

本资料由-校园大学生创业网-提供1、JAVASCRIPT 浏览器12、JAVASCRIPT Cookies63、JAVASCRIPT 验证114、JAVASCRIPT 动画155、JAVASCRIPT 图像地图176、JAVASCRIPT 计时217、JAVASCRIPT 创建对象288、JAVASCRIPT 总结321、 JAVASCRIPT 浏览器实例检测浏览器及版本使用 JavaScript 检测关于访问者的浏览器名称及其版本。var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)document.write(浏览器名称：+ browser)document.write()document.write(浏览器版本：+ version)检测浏览器的更多信息使用 JavaScript 检测关于访问者浏览器的更多信息。document.write(浏览器：)document.write(navigator.appName + )document.write(浏览器版本：)document.write(navigator.appVersion + )document.write(代码：)document.write(navigator.appCodeName + )document.write(平台：)document.write(navigator.platform + )document.write(Cookies 启用：)document.write(navigator.cookieEnabled + )document.write(浏览器的用户代理报头：)document.write(navigator.userAgent + )检测浏览器的全部信息使用 JavaScript 检测关于访问者浏览器的全部信息。var x = navigator;document.write(CodeName= + x.appCodeName);document.write();document.write(MinorVersion= + x.appMinorVersion);document.write();document.write(Name= + x.appName);document.write();document.write(Version= + x.appVersion);document.write();document.write(CookieEnabled= + x.cookieEnabled);document.write();document.write(CPUClass= + x.cpuClass);document.write();document.write(OnLine= + x.onLine);document.write();document.write(Platform= + x.platform);document.write();document.write(UA= + x.userAgent);document.write();document.write(BrowserLanguage= + x.browserLanguage);document.write();document.write(SystemLanguage= + x.systemLanguage);document.write();document.write(UserLanguage= + x.userLanguage);根据浏览器类型提醒用户使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。function detectBrowser()var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)if (browser=Netscape|browser=Microsoft Internet Explorer) & (version=4) alert(您的浏览器够先进了！)else alert(是时候升级您的浏览器了！)浏览器检测本教程中几乎所有的代码均可在任何支持 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!) 2、 JAVASCRIPT Cookiescookie 用来识别用户。实例创建一个欢迎 cookie利用用户在提示框中输入的数据创建一个 JavaScript 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.lengthreturn 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) 什么是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) 3、 JAVASCRIPT 验证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: 4、 JAVASCRIPT 动画我们可以使用 JavaScript 来创建动态的图像。实例按钮动画利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。function mouseOver()document.b1.src =/i/eg_mouse.jpgfunction mouseOut()document.b1.src =/i/eg_mouse2.jpgJavaScript 动画使用 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 5、 JAVASCRIPT 图像地图图像地图指的是带有可点击区域的图像。实例简单的 HTML 图像映射本例演示一幅没有添加 JavaScript 的图像映射。添加了 JavaScript 的图像映射本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 JavaScript 函数来显示热点所对应的星球的简介。function writeText(txt)document.getElementById(desc).innerHTML=txtJavaScript 图像地图我们已经从 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 6、 JAVASCRIPT 计时通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。实例简单的计时单击本例中的按钮后，会在 5 秒后弹出一个警告框。function timedMsg()var t=setTimeout(alert(5 秒！),5000)请点击上面的按钮。警告框会在 5 秒后显示。另一个简单的计时本例中的程序会执行 2 秒、4 秒和 6 秒的计时。function timedText()var t1=setTimeout(document.getElementById(txt).value=2 秒,2000)var t2=setTimeout(document.getElementById(txt).value=4 秒,4000)var t3=setTimeout(document.getElementById(txt).value=6 秒,6000)点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。在一个无穷循环中的计时事件在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。var c=0var tfunction timedCount()document.getElementById(txt).value=cc=c+1t=setTimeout(timedCount(),1000)请点击上面的按钮。输入框会从 0 开始一直进行计时。带有停止按钮的无穷循环中的计时事件在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。var c=0var tfunction timedCount()document.getElementById(txt).value=cc=c+1t=setTimeout(timedCount(),1000)function stopCount()clearTimeout(t)请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时。使用计时事件制作的钟表一个 JavaScript 小时钟function startTime()var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()/ add a zero in front of numbers10m=checkTime(m)s=checkTime(s)document.getElementById(txt).innerHTML=h+:+m+:+st=setTimeout(startTime(),500)function checkTime(i)if (i10) i=0 + i return iJavaScript 计时事件通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:setTim