JavaScript 高级.docx

上传人:b****6 文档编号:5098652 上传时间:2022-12-13 格式:DOCX 页数:21 大小:23.41KB
下载 相关 举报
JavaScript 高级.docx_第1页
第1页 / 共21页
JavaScript 高级.docx_第2页
第2页 / 共21页
JavaScript 高级.docx_第3页
第3页 / 共21页
JavaScript 高级.docx_第4页
第4页 / 共21页
JavaScript 高级.docx_第5页
第5页 / 共21页
点击查看更多>>
下载资源
资源描述

JavaScript 高级.docx

《JavaScript 高级.docx》由会员分享,可在线阅读,更多相关《JavaScript 高级.docx(21页珍藏版)》请在冰豆网上搜索。

JavaScript 高级.docx

JavaScript高级

JavaScript浏览器检测

∙PreviousPage

∙NextPage

实例

检测浏览器及版本

使用JavaScript检测关于访问者的浏览器名称及其版本。

检测浏览器的更多信息

使用JavaScript检测关于访问者浏览器的更多信息。

检测浏览器的全部信息

使用JavaScript检测关于访问者浏览器的全部信息。

根据浏览器类型提醒用户

使用JavaScript检测关于访问者的浏览器名称及其版本,然后根据这些信息生成不同内容的警告框。

浏览器检测

本教程中几乎所有的代码均可在任何支持JavaScript的浏览器中运行。

不过个别的代码无法运行于特定的浏览器,特别是老式的浏览器。

所以,有些时候对访问者的浏览器类型及版本进行检测是很有帮助的,然后可在此基础上为访问者提供合适的信息。

要做到这一点,最好的办法是使你的网页变得足够聪明,这样的话它就可以不同的方式对待不同类型的浏览器。

JavaScript包含一个名为Navigator的对象,它就可以完成上述的任务。

Navigator包含了有关访问者浏览器的信息,包括浏览器类型、版本等等。

Navigator对象

JavaScriptNavigator对象包含了有关访问者浏览器的所有信息。

接下来我们学习Navigator对象的两个属性。

appName

保存浏览器类型

appVersion

存有浏览器的版本信息(其他信息中的一项)

实例

varbrowser=navigator.appName

varb_version=navigator.appVersion

varversion=parseFloat(b_version)

document.write("Browsername:

"+browser)

document.write("
")

document.write("Browserversion:

"+version)

上面例子中的browser变量存有浏览器的名称,比如,"Netscape"或者"MicrosoftInternetExplorer"。

上面例子中的appVersion属性返回的字符串所包含的信息不止是版本号而已,但是现在我们只关注版本号。

我们使用一个名为parseFloat()的函数会抽取字符串中类似十进制数的一段字符并将之返回,这样我们就可以从字符串中抽出版本号信息了。

重要事项:

在IE5.0及以后版本中,版本号是不正确的!

在IE5.0和IE6.0中,微软为appVersion字符串赋的值是4.0。

怎么会出现这样的错误呢?

无论如何,我们需要清楚的是,JavaScript在IE6、IE5和IE4中的获得的版本号是相同的。

实例

下面的脚本会根据访问者的浏览器类型显示不同的警告。

functiondetectBrowser()

{

varbrowser=navigator.appName

varb_version=navigator.appVersion

varversion=parseFloat(b_version)

if((browser=="Netscape"||browser=="MicrosoftInternetExplorer")

&&(version>=4))

{alert("Yourbrowserisgoodenough!

")}

else

{alert("It'stimetoupgradeyourbrowser!

")}

}

JavaScriptCookies

∙PreviousPage

∙NextPage

cookie用来识别用户。

实例

创建一个欢迎cookie

利用用户在提示框中输入的数据创建一个JavaScriptCookie,当该用户再次访问该页面时,根据cookie中的信息发出欢迎信息。

什么是cookie?

cookie是存储于访问者的计算机中的变量。

每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie。

你可以使用JavaScript来创建和取回cookie的值。

有关cookie的例子:

名字cookie

当访问者首次访问页面时,他或她也许会填写他/她们的名字。

名字会存储于cookie中。

当访问者再次访问网站时,他们会收到类似"WelcomeJohnDoe!

"的欢迎词。

而名字则是从cookie中取回的。

密码cookie

当访问者首次访问页面时,他或她也许会填写他/她们的密码。

密码也可被存储于cookie中。

当他们再次访问网站时,密码就会从cookie中取回。

日期cookie

当访问者首次访问你的网站时,当前的日期可存储于cookie中。

当他们再次访问网站时,他们会收到类似这样的一条消息:

"YourlastvisitwasonTuesdayAugust11,2005!

"。

日期也是从cookie中取回的。

创建和存储cookie

在这个例子中我们要创建一个存储访问者名字的cookie。

当访问者首次访问网站时,他们会被要求填写姓名。

名字会存储于cookie中。

当访问者再次访问网站时,他们就会收到欢迎词。

首先,我们会创建一个可在cookie变量中存储访问者姓名的函数:

functionsetCookie(c_name,value,expiredays)

{

varexdate=newDate()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+"="+escape(value)+

((expiredays==null)?

"":

";expires="+exdate.toGMTString())

}

上面这个函数中的参数存有cookie的名称、值以及过期天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将cookie名称、值及其过期日期存入document.cookie对象。

之后,我们要创建另一个函数来检查是否已设置cookie:

functiongetCookie(c_name)

{

if(document.cookie.length>0)

{

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

returnunescape(document.cookie.substring(c_start,c_end))

}

}

return""

}

上面的函数首先会检查document.cookie对象中是否存有cookie。

假如document.cookie对象存有某些cookie,那么会继续检查我们指定的cookie是否已储存。

如果找到了我们要的cookie,就返回值,否则返回空字符串。

最后,我们要创建一个函数,这个函数的作用是:

如果cookie已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。

functioncheckCookie()

{

username=getCookie('username')

if(username!

=null&&username!

="")

{alert('Welcomeagain'+username+'!

')}

else

{

username=prompt('Pleaseenteryourname:

',"")

if(username!

=null&&username!

="")

{

setCookie('username',username,365)

}

}

}

这是所有的代码:

functiongetCookie(c_name)

{

if(document.cookie.length>0)

{

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

returnunescape(document.cookie.substring(c_start,c_end))

}

}

return""

}

functionsetCookie(c_name,value,expiredays)

{

varexdate=newDate()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+"="+escape(value)+

((expiredays==null)?

"":

";expires="+exdate.toGMTString())

}

functioncheckCookie()

{

username=getCookie('username')

if(username!

=null&&username!

="")

{alert('Welcomeagain'+username+'!

')}

else

{

username=prompt('Pleaseenteryourname:

',"")

if(username!

=null&&username!

="")

{

setCookie('username',username,365)

}

}

}

JavaScript表单验证

∙PreviousPage

∙NextPage

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

JavaScript表单验证

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

被JavaScript验证的这些典型的表单数据有:

∙用户是否已填写表单中的必填项目?

∙用户输入的邮件地址是否合法?

∙用户是否已输入合法的日期?

∙用户是否在数据域(numericfield)中输入了文本?

必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。

假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为false,否则函数的返回值则为true(意味着数据没有问题):

functionvalidate_required(field,alerttxt)

{

with(field)

{

if(value==null||value=="")

{alert(alerttxt);returnfalse}

else{returntrue}

}

}

下面是连同HTML表单的代码:

functionvalidate_required(field,alerttxt)

{

with(field)

{

if(value==null||value=="")

{alert(alerttxt);returnfalse}

else{returntrue}

}

}

functionvalidate_form(thisform)

{

with(thisform)

{

if(validate_required(email,"Emailmustbefilledout!

")==false)

{email.focus();returnfalse}

}

}

Email:

E-mail验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含@符号和点号(.)。

同时,@不可以是邮件地址的首字符,并且@之后需有至少一个点号:

functionvalidate_email(field,alerttxt)

{

with(field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if(apos<1||dotpos-apos<2)

{alert(alerttxt);returnfalse}

else{returntrue}

}

}

下面是连同HTML表单的完整代码:

functionvalidate_email(field,alerttxt)

{

with(field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if(apos<1||dotpos-apos<2)

{alert(alerttxt);returnfalse}

else{returntrue}

}

}

functionvalidate_form(thisform)

{

with(thisform)

{

if(validate_email(email,"Notavalide-mailaddress!

")==false)

{email.focus();returnfalse}

}

}

Email:

JavaScript动画

∙PreviousPage

∙NextPage

我们可以使用JavaScript来创建动态的图像。

实例

按钮动画

利用两个不同的事件来驱动两个相应的函数,来切换两张对应的图片以创造出动画效果。

JavaScript动画

使用JavaScript创建动态图像是可行的。

窍门是:

使用JavaScript通过不同的事件来切换不同的图像。

在下面的例子中,我们要制作一个充当链接按钮的图像。

我们将使用onMouseOver事件和onMouseOut事件来驱动JavaScript函数切换图像。

HTML代码

这是HTML代码:

"

src="/i/eg_mouse2.jpg"name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()"/>

注意:

我们已为图像添加了name属性,这样JavaScript就能找到它了。

onMouseOver事件的作用是告知浏览器:

一旦鼠标悬浮于图像之上,浏览器就会执行某个函数,这个函数会把这副图像替换为另一幅。

onMouseOut事件的作用是告知浏览器:

一旦鼠标离开图像,浏览器就要执行另一个函数,这个函数会重新插入原来的那幅图像。

JavaScript代码

通过下面的代码来切换图像:

functionmouseOver()

{

document.b1.src="/i/eg_mouse.jpg"

}

functionmouseOut()

{

document.b1.src="/i/eg_mouse2.jpg"

}

函数mouseOver()将图像切换为"eg_mouse.jpg"。

函数mouseOut()将图像切换为"eg_mouse2.jpg"。

完整的代码:

functionmouseOver()

{

document.b1.src="/i/eg_mouse.jpg"

}

functionmouseOut()

{

document.b1.src="/i/eg_mouse2.jpg"

}

"src="/i/eg_mouse2.jpg"name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()"/>

JavaScript图像地图

∙PreviousPage

∙NextPage

图像地图指的是带有可点击区域的图像。

实例

简单的HTML图像映射

本例演示一幅没有添加JavaScript的图像映射。

添加了JavaScript的图像映射

本例演示一幅添加了JavaScript的图像映射,当鼠标浮动于某个热点上时,会调用JavaScript函数来显示热点所对应的星球的简介。

JavaScript图像地图

我们已经从HTML教程中了解到,图像地图是带有可点击区域的图像。

通常情况下,每个区域是一个相关的超级链接。

单击某个区域,就回到达相关的链接。

实例

下面的例子演示如何创建带有可点击区域的html图像地图:

alt="Planets"usemap="#planetmap"/>

alt="Sun"/>

alt="Mercury"/>

alt="Venus"/>

结果

添加JavaScript

我们可向图像地图内部的标签添加(能调用JavaScript的)事件。

标签支持以下事件:

onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。

这是添加了JavaScript的上面的例子:

functionwriteText(txt)

{

document.getElementById("desc").innerHTML=txt

}

alt="Planets"usemap="#planetmap"/>

onMouseOver="writeText('TheSunandthegasgiant

planetslikeJupiterarebyfarthelargestobjects

inourSolarSystem.')"

href="sun.htm"target="_blank"alt="Sun"/>

onMouseOver="writeText('TheplanetMercuryisvery

difficulttostudyfromtheEarthbecauseitis

alwayssoclosetotheSun.')"

href="mercur.htm"target="_blank"alt="Mercury"/>

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 总结汇报 > 实习总结

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1