onerror 事件
try {} catch的异常也可以使用 onerror 事件捕获。(chrome、opera、safari 浏览器不支持)
这个事件处理器使用三个参数来调用:msg(错误消息)、url(发生错误的页面的 url)、line(发生错误的代码行)。
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg, url, line) {
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + line + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message() {
adddlert("Welcome guest!")
}
</script>
JavaScript 特殊字符
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
JavaScript 对大小写敏感
名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数,同样,变量 "myVar" 和变量 "myvar" 也是不同的。
JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格,使得代码的可读性更强。下面的两行是等效的:
name="Hege"
name = "Hege"
换行:可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的:
document.write("Hello \
World!")
但是不能像这样折行:
document.write \
("Hello World!")
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
}
}
</script>
<script type="text/javascript">
function disp_prompt() {
var name=prompt("请输入您的名字","默认值")
if (name!=null && name!="") {
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</script>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。
onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
<script type="text/javascript">
var txt=""
function message() {
try {
//alert
adddlert("Welcome guest!")
} catch(err) {
txt="本页中存在错误。\n\n"
txt+="错误描述:" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
}
}
</script>
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数:","")
try {
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
} catch(er) {
if (er=="Err1")
alert("错误!该值太大!")
if (er == "Err2")
alert("错误!该值太小!")
if (er == "Err3")
alert("错误!该值不是数字!")
}
</script>
JavaScript 是面向对象的编程语言 (OOP)。
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length) //12
document.write(txt.toUpperCase())
document.write(txt.replace(/Hello/,"hi"))
</script>
使用 concat() 方法来合并两个数组
<script type="text/javascript">
var arr = new Array(2)
arr[0] = "George"
arr[1] = "John"
var arr2 = new Array(2)
arr2[0] = "James"
arr2[1] = "Adrew"
document.write(arr.concat(arr2))
</script>
join() 方法将数组的所有元素组成一个字符串。
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</script>
George,John,Thomas
George.John.Thomas
sort() 方法从字面上对数组进行排序。
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
sort() 方法从数值上对数组进行排序。
<script type="text/javascript">
function sortNumber(a, b) {
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
10,5,40,25,1000,1
1,5,10,25,40,1000
定义数组
有两种向数组赋值的方法
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)
下面的所有的代码行均会创初始值为 true 的 Boolean 对象:
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")
Math.round(0.60) //取近似值
document.write(Math.random()) //0~1的随机值
document.write(Math.max(7.25,7.30)) //取最大值
document.write(Math.min(7.25,7.30))
<html>
<head>
<script type="text/javascript">
function getCookie(c_name) {
document.write("my cookie:" + document.cookie)
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() {
document.cookie = "ab=123";
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都是一个名/值对
document.cookie="userId=828";
如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:
document.cookie="userId=828; userName=hulk";
在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。
在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?
方法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此种方案还可以避免中文乱码的出现。例如:
document.cookie="str="+escape("I love ajax");
相当于: document.cookie="str=I%20love%20ajax";
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值
尽管document.cookie看上去就像一个属性,可以赋不同的值。但它和一般的属性不一样,改变它的赋值并不意味着丢失原来的值,例如连续执行下面两条语句:
document.cookie="userId=828";
document.cookie="userName=hulk";
这时浏览器将维护两个cookie,分别是userId和userName,因此给document.cookie赋值更像执行类似这样的语句:
document.addCookie("userId=828");
document.addCookie("userName=hulk");
事实上,浏览器就是按照这样的方式来设置cookie的,如果要改变一个cookie的值,只需重新赋值,例如:
document.cookie="userId=929";
这样就将名为userId的cookie值设置为了929。
cookie的值可以由document.cookie直接获得:
var strCookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串,这些名/值对包括了该域名下的所有cookie
<script language="JavaScript" type="text/javascript">
//设置两个cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userId;
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
//找到名称为userId的cookie,并返回它的值
if ("userId"==arr[0]){
userId=arr[1];
break;
}
}
alert(userId);
</script>
给cookie设置终止日期
到现在为止,所有的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。
如果要将cookie设置为10天后过期,可以这样实现:
<script language="JavaScript" type="text/javascript">
<!--
var date=new Date();
var expireDays=10; //将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000); //将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk;
expire="+date.toGMTString();
</script>
删除cookie: 为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:
<script language="JavaScript" type="text/javascript">
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//这样只是将userId这个cookie删除,其它cookie仍然保留
document.cookie="userId=828; expire="+date.toGMTString();
</script>
指定可访问cookie的路径 默认情况下,如果在某个页面创建了一个cookie,那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录,则在子目录中也可以访问。
为了控制cookie可以访问的目录,需要使用path参数设置cookie,语法如下:
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如:
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:
document.cookie="userId=320; path=/";
指定可访问cookie的主机名。和路径类似,主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就
是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制。
其语法格式为: document.cookie="name=value;domain=cookieDomain";
以google为例,要实现跨主机访问,可以写为:
document.cookie="name=value;domain=.google.com";
这样,所有google.com下的主机都可以访问该cookie。
创建带有可点击区域的html图像地图:
<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>
alt属性:如果无法显示图像,浏览器将显示替代文本alt
usemap属性:将一幅图像 planets.gif 映射为 3 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。
在html图像地图的基础上可以添加javascript脚本
我们可向图像地图内部的 <area> 标签添加(能调用JavaScript的)事件。
当鼠标移动到这3个区域上时,desc会显示不同文本
<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('1111')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('222222')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('33333')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
定时器:
setTimeout("alert('5 秒!')",5000)
setTimeout("document.getElementById('txt').value='2 秒'",2000)
无线循环:
<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>
有2种不同的办法来创建对象
1、下列代码创建了一个对象的实例,并向其添加了四个属性:
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
2、创建对象的模版
模版仅仅是一个函数。你需要在函数内部向 this.propertiName 分配内容。
同样可以向模板对象添加某些方法。并且同样需要在模版内进行操作:
function person(firstname,lastname,age,eyecolor) {
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
this.newlastname=newlastname
}
function newlastname(new_lastname) {
this.lastname=new_lastname
}
一旦拥有模版,你就可以创建新的实例,就像这样:
myFather=new person("John","Doe",50,"blue")