JavaScript 高级

JavaScript 浏览器检测

浏览器检测

本教程中几乎所有的代码均可在任何支持 JavaScript 的浏览器中运行。不过个别的代码无法运行于特定的浏览器，特别是老式的浏览器。

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

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

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

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

实例

检测浏览器及版本

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

检测浏览器的更多信息

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

检测浏览器的全部信息

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

根据浏览器类型提醒用户

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

JavaScript Cookies

什么是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.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


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)

实例

创建一个欢迎 cookie

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

JavaScript 表单验证

JavaScript 表单验证

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

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

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false ，否则函数的返回值则为 true （意味着数据没有问题）：

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

<html>

<head>

<script type="text/javascript">

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}

</script>

</head>

<body>

<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

E-mail 验证

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

意思就是说，输入的数据必须包含 @ 符号和点号(.) 。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

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

<html>

<head>

<script type="text/javascript">

function validate_email(field,alerttxt)

with (field)

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

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



{alert(alerttxt);return false}

else {return true}

function validate_form(thisform)

with (thisform)

if (validate_email(email,"Not a valid e-mail address!")==false)



{email.focus();return false}

</script>

</head>

<body>

<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

JavaScript 动画

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

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

在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。

HTML 代码

这是 HTML 代码：

<a href="http://www.w3school.com.cn" target="_blank">

<img border="0" alt="Visit W3School!"

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

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

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

onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。

onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。

JavaScript 代码

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

<script type="text/javascript">

function mouseOver()

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

function mouseOut()

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

</script>

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

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

实例

按钮动画

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

JavaScript 图像地图

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

JavaScript 图像地图

我们已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接。

实例

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

<img src ="planets.gif" width ="145" height ="126"

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

<map id ="planetmap" name="planetmap">

<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank"


alt="Sun" />

<area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank"


alt="Mercury" />

<area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank"


alt="Venus" />

</map>

结果

添加 JavaScript

我们可向图像地图内部的 <area> 标签添加（能调用JavaScript 的）事件。<area> 标签支持以下事件：onClick 、onDblClick 、onMouseDown 、onMouseUp 、onMouseOver 、 onMouseMove 、onMouseOut 、onKeyPress 、onKeyDown 、onKeyUp 、onFocus 和onBlur 。

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

<html>

<head>

<script type="text/javascript">

function writeText(txt)

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

</script>

</head>

<body>

<img src="planets.gif" width="145" height="126"

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

<map id ="planetmap" name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

onMouseOver



="writeText

('The Sun and the gas giant

planets like Jupiter are by far the largest objects

in our Solar System.')"

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

<area shape ="circle" coords ="90,58,3"

onMouseOver



="writeText

('The planet Mercury is very

difficult to study from the Earth because it is

always so close to the Sun.')"

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

<area shape ="circle" coords ="124,58,8"

onMouseOver



="writeText

('Until the 1960s, Venus was

often considered a twin sister to the Earth because

Venus is the nearest planet to us, and because the

two planets seem to share many characteristics.')"

href ="venus.htm" target ="_blank" alt="Venus" />

</map>

<p id="desc"></p>

</body>

</html>

实例

简单的 HTML 图像映射

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

添加了 JavaScript 的图像映射

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

JavaScript 计时

通过使用 JavaScript ，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

JavaScript 计时事件

通过使用 JavaScript ，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript

语句",

毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout() ，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')" ，或者对函数的调用，诸如 alertMsg()" 。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例

当下面这个例子中的按钮被点击时，一个提示框会在5 秒中后弹出。

<html>

<head>

<script type="text/javascript">

function timedMsg()

 var t=setTimeout("alert('5 seconds!')",5000)

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!" onClick="timedMsg()">

</form>

</body>

</html>

实例 - 无穷循环

要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

 document.getElementById('txt').value=c

 c=c+1

 t=setTimeout("timedCount()",1000)

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

</form>

</body>

</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

 document.getElementById('txt').value=c

 c=c+1

 t=setTimeout("timedCount()",1000)

function stopCount()

 clearTimeout(t)

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

</body>

</html>

实例

简单的计时

单击本例中的按钮后，会在 5 秒后弹出一个警告框。

另一个简单的计时

本例中的程序会执行 2 秒、4 秒和 6 秒的计时。

在一个无穷循环中的计时事件

在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。

带有停止按钮的无穷循环中的计时事件

在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。

使用计时事件制作的钟表

一个 JavaScript 小时钟

创建你自己的 JavaScript 对象

JavaScript 对象

在本教程前面的章节，我们已经学习到 JavaScript 拥有若干内置的对象，比如 String 、Date 、Array 等等。除了这些对象，你还可以创建自己的对象。

对象仅仅是一种特殊的数据类型而已，并拥有一系列的属性和方法。

让我们用一个例子来理解：一个人就是一个对象。属性是和对象有关的值。人的属性包括其名字、身高、体重、年纪、肤色、眼睛的颜色等等。所有的人都有这些属性，但是每个人的属性的值却各不相同。对象也拥有方法。方法是可施加于对象上的行为。人的方法可能是吃、睡、工作、玩等等。

属性

访问对象的属性的方法：

对象名.

属性名

通过简单地向属性赋值，你就可以向对象添加属性。假定存在 personObj 这个对象－你可以添加诸如 firstname 、lastname 、age 以及 eyecolor 等属性。

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=30

personObj.eyecolor="blue"

document.write(personObj.firstname)

上面的代码生成以下的输出：

John

方法

对象可包含方法。

使用下面的语法来调用方法:

对象名.

方法名()

注意：位于括号之间的用于方法的参数是可以省略的。

调用名为 sleep 的 personObj 对象的方法：

personObj.sleep()

创建你自己的对象

有多种不同的办法来创建对象：

1. 创建对象的实例

下列代码创建了一个对象的实例，并向其添加了四个属性：

personObj=new Object()

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=50

personObj.eyecolor="blue"

向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：

personObj.eat=eat

2. 创建对象的模版

模版定义了对象的结构。

function person(firstname,lastname,age,eyecolor)

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

注意：模版仅仅是一个函数。你需要在函数内部向 this.propertiName 分配内容。

一旦拥有模版，你就可以创建新的实例，就像这样：

myFather=new person("John","Doe",50,"blue")

myMother=new person("Sally","Rally",48,"green")

同样可以向 person 对象添加某些方法。并且同样需要在模版内进行操作：

function person(firstname,lastname,age,eyecolor)

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

this.newlastname=newlastname

注意：方法只是依附于对象的函数而已。然后，我们需要编写 newlastname() 函数：

function newlastname(new_lastname)

this.lastname=new_lastname

Newlastname() 函数定义 person 的新的 lastname ，并将之分配给 person 。通过使用 “this.” ，JavaScript 即可得知你指的 person 是谁。因此，现在你可以这样写：myMother.newlastname("Doe") 。

实例

创建对象的实例

本例向您展示如何创建 JavaCript 对象的实例 (instance) 。

创建用于对象的模板

本例向您展示如何创建 JavaCript 对象的模板 (template) 。