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>

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
  • 用户是否已填写表单中的必填项目？
  • 用户输入的邮件地址是否合法？
  • 用户是否已输入合法的日期？
  • 用户是否在数据域 (numeric field) 中输入了文本？

下面是连同 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 通过不同的事件来切换不同的图像。


 


<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="/index.html" target="_blank">

<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"  onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

</body>

</html>




JavaScript 计时事件


setTimeout() 
未来的某时执行代码 
clearTimeout() 
取消setTimeout() 




setTimeout()


语法


var t=setTimeout("javascript语句",毫秒)


实例


当下面这个例子中的按钮被点击时，一个提示框会在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>


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>








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")。