JavaScript 高级 - 爱码网

JavaScript 浏览器检测

实例

检测浏览器及版本: 使用 JavaScript 检测关于访问者的浏览器名称及其版本。
检测浏览器的更多信息: 使用 JavaScript 检测关于访问者浏览器的更多信息。
检测浏览器的全部信息: 使用 JavaScript 检测关于访问者浏览器的全部信息。
根据浏览器类型提醒用户: 使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。

浏览器检测

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

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

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

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

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

Navigator 对象

JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。

appName: 保存浏览器类型
appVersion: 存有浏览器的版本信息（其他信息中的一项）

实例

<html>

<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>

</html>

上面例子中的 browser 变量存有浏览器的名称，比如，"Netscape" 或者 "Microsoft Internet Explorer"。

上面例子中的 appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。

重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。

实例

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

<html>

<head>

<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
  {alert("Your browser is good enough!")}
else
  {alert("It\'s time to upgrade your browser!")}
  }
</script>

</head>

<body onload="detectBrowser()">
</body>

</html>

JavaScript Cookies

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.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)
    }
  }
}

这是所有的代码：

<html>
<head>
<script type="text/javascript">
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 ""
}

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)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

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 false}
else {return 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" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

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

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

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}
}
}

下面是连同 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"onsubmit="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 动画

使用 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"。

完整的代码：

<html>
<head>
<script type="text/javascript">
function mouseOver()
  {
  document.b1.src ="/i/eg_mouse.jpg"
  }
function mouseOut()
  {
  document.b1.src ="/i/eg_mouse2.jpg"
  }
</script>
</head>

<body>
<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>
</body>
</html>

JavaScript 图像地图

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

实例

简单的 HTML 图像映射
本例演示一幅没有添加 JavaScript 的图像映射。
添加了 JavaScript 的图像映射
本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 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>

JavaScript 计时

通过使用 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秒中后弹出。

<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>

创建你自己的 JavaScript 对象

对象有助于组织信息。

实例

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

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
}