- 1、 浏览器类型
- 下面的脚本会根据访问者的浏览器类型显示不同的警告。
- <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 οnlοad="detectBrowser()">
- </body>
- </html>
- 2、 cookies
- cookie 用来识别用户。
- 实例
- 创建一个欢迎 cookie
- 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。
- <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>
- 什么是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)
- }
- }
- }
- 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 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" ο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 验证
- 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
- 意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
- 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"ο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 来创建动态的图像。实例
- 按钮动画
- 利用两个不同的事件来驱动两个相应的函数,来切换两张对应的图片以创造出动画效果。
- <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" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" /></a>
- </body>
- </html>
- 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 事件的作用是告知浏览器:一旦鼠标离开图像,浏览器就要执行另一个函数,这个函数会重新插入原来的那幅图像。
- <html>
- <head>
- <script type="text/javascript">
- function writeText(txt)
- {
- document.getElementById("desc").innerHTML=txt
- }
- </script>
- </head>
- <body>
- <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
- <map name="planetmap" id="planetmap">
- <area shape="circle" coords="180,139,14"
- onMouseOver="writeText('直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。')"
- href ="/example/html/venus.html" target ="_blank" alt="Venus" />
- <area shape="circle" coords="129,161,10"
- onMouseOver="writeText('从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。')"
- href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
- <area shape="rect" coords="0,0,110,260"
- onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
- href ="/example/html/sun.html" target ="_blank" alt="Sun" />
- </map>
- <p id="desc"></p>
- </body>
- </html>
- JavaScript 计时
- 通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。JavaScript 计时事件
- 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
- 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setTimeout()
- 未来的某时执行代码
- clearTimeout()
- 取消setTimeout()
- setTimeout()
- 语法
- var t=setTimeout("javascript语句",毫秒)
- setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
- setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
- 第二个参数指示从当前起多少毫秒后执行第一个参数。
- 提示:1000 毫秒等于一秒。
- 带有停止按钮的无穷循环中的计时事件
- 在本例中,点击计数按钮后根据用户输入的数值开始倒计时,点击停止按钮停止计时
- <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="开始计时!" onClick="timedCount()">
- <input type="text" id="txt">
- <input type="button" value="停止计时!" onClick="stopCount()">
- </form>
- <p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时,从 0 开始。点击“停止计时”按钮可以终止计时。</p>
- </body>
- </html>
- 创建你自己的 JavaScript 对象
- <html>
- <body>
- <script type="text/javascript">
- function person(firstname,lastname,age,eyecolor)
- {
- this.firstname=firstname
- this.lastname=lastname
- this.age=age
- this.eyecolor=eyecolor
- }
- myFather=new person("John","Adams",35,"black")
- document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")
- </script>
- </body>
- </html>
2、 变量声明不是必须的,在用到的地方使用就可以
3、 5 种原始类型(primitivetype),即Undefined、Null、Boolean、Number和 String。
4、arguments 对象
arguments 对象
在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。
例如,在函数 sayHi() 中,第一个参数是 message。用 arguments[0] 也可以访问这个值,即第一个参数的值(第一个参数位于位置 0,第二个参数位于位置 1,依此类推)。
因此,无需明确命名参数,就可以重写函数:
function sayHi() {
if (arguments[0]
== "bye") {
return;
}
alert(arguments[0]);
}
检测参数个数
还可以用 arguments 对象检测函数的参数个数,引用属性arguments.length 即可。
下面的代码将输出每次调用函数使用的参数个数:
function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);
上面这段代码将依次显示 "2"、"0"和 "1"。
注释:与其他程序设计语言不同,ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数(根据 Netscape 的文档,最多可接受 25 个),而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数,多余的函数将忽略。
模拟函数重载
用 arguments 对象判断传递给函数的参数个数,即可模拟函数重载:
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 5);
} else if(arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //输出 "15"
doAdd(40, 20); //输出 "60"
当只有一个参数时,doAdd() 函数给参数加 5。如果有两个参数,则会把两个参数相加,返回它们的和。所以,doAdd(10) 输出的是 "15",而 doAdd(40,20) 输出的是 "60"。
虽然不如重载那么好,不过已足以避开 ECMAScript 的这种限制。
4、闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。
简单的闭包实例
在 ECMAScript 中使用全局变量是一个简单的闭包实例。请思考下面这段代码:
var sMessage = "hello world";
function sayHelloWorld() {
alert(sMessage);
}
sayHelloWorld();
5、使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象。
ECMAScript 拥有很多创建对象或类的方法。
工厂方式
原始的方式
因为对象的属性可以在对象创建后动态定义,所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码:
var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};
在上面的代码中,创建对象 car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象 car。
不过这里有一个问题,就是可能需要创建多个 car 的实例。
解决方案:工厂方式
要解决该问题,开发者创造了能创建并返回特定类型的对象的工厂函数(factory function)。
例如,函数 createCar() 可用于封装前面列出的创建 car 对象的操作:
function createCar() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();
在这里,第一个例子中的所有代码都包含在 createCar() 函数中。此外,还有一行额外的代码,返回 car 对象(oTempCar)作为函数值。调用此函数,将创建新对象,并赋予它所有必要的属性,复制出一个我们在前面说明过的 car 对象。因此,通过这种方法,我们可以很容易地创建 car 对象的两个版本(oCar1 和 oCar2),它们的属性完全一样。
为函数传递参数
我们还可以修改 createCar() 函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"
给 createCar() 函数加上参数,即可为要创建的 car 对象的 color、doors 和 mpg 属性赋值。这使两个对象具有相同的属性,却有不同的属性值。
在工厂函数外定义对象的方法
虽然 ECMAScript 越来越正式化,但创建对象的方法却被置之不理,且其规范化至今还遭人反对。一部分是语义上的原因(它看起来不像使用带有构造函数 new 运算符那么正规),一部分是功能上的原因。功能原因在于用这种方式必须创建对象的方法。前面的例子中,每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor()版本。而事实上,每个对象都共享同一个函数。
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:
function showColor() {
alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"
在上面这段重写的代码中,在函数 createCar() 之前定义了函数 showColor()。在 createCar()内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。