javascript常用总结

来源：互联网发布：mac远程 qq 编辑：程序博客网时间：2024/05/21 14:06

Javasceipt索引

Javasceipt放在哪里 2

在哪里放置 JavaScript 2

位于 head 部分的脚本： 2

位于 body 部分的脚本： 2

在 body 和 head 部分的脚本： 2

使用外部 JavaScript 3

数据类型 3

变量 4

声明（创建） JavaScript 变量 4

向 JavaScript 变量赋值 4

向未声明的 JavaScript 变量赋值 4

重新声明 JavaScript 变量 4

JavaScript 算术 5

运算符 5

数组 5

循环语句 7

函数 7

事件 7

Javasceipt中的对象 8

实例 9

1.表单验证 9

2. 计时器 13

3. 序列号验证 14

Javasceipt放在哪里

在哪里放置 JavaScript

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。

位于 head 部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

<html>

<head>

....

</script>

</head>

....

位于 body 部分的脚本：

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

<html>

<head>

</head>

<body>

....

</script>

</body>

</html>

在 body 和 head 部分的脚本：

你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。

<html>

<head>

....

</script>

</head>

<body>

....

</script>

</body>

</html>

使用外部 JavaScript

有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意：外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了：

<html>

<head>

</head>

<body>

</body>

</html>

提示：您可以把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

数据类型

说明

举例

字符串型

使用单引号或双引号括起来的一个或多个字符

如"PHP"、"I like study PHP"等

数值型

包括整数或浮点数（包含小数点的

数或科学记数法的数）

如-128、12.9、6.98e6等

布尔型

布尔型常量只有两种状态，即true或false

如event.returnValue=false

对象型

用于指定JavaScript程序中用到的对象

如网页表单元素

Null值

可以通过给一个变量赋 null 值来清除变量的内容

如a=null

Undefined

表示该变量尚未被赋值

如var a

变量

声明（创建） JavaScript 变量

在 JavaScript 中创建变量经常被称为“声明”变量。

您可以通过 var 语句来声明 JavaScript 变量：

var x; var carname;

在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：

var x=5; var carname="Volvo";

注释：在为变量赋文本值时，请为该值加引号。

向 JavaScript 变量赋值

通过赋值语句向 JavaScript 变量赋值：

x=5; carname="Volvo";

变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。

在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。

向未声明的 JavaScript 变量赋值

如果您所赋值的变量还未进行过声明，该变量会自动声明。

这些语句：

x=5; carname="Volvo";

与这些语句的效果相同：

var x=5; var carname="Volvo";

重新声明 JavaScript 变量

如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。

var x=5; var x;

在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。

JavaScript 算术

正如代数一样，您可以使用 JavaScript 变量来做算术：

y=x-5; z=y+5;

运算符

等于

x==8 为 false

===

全等（值和类型）

x===5 为 true；x==="5" 为 false

数组

定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：

var myArray=new Array()

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。

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"

var mycars=new Array("Saab","Volvo","BMW")

注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

下面是代码行：

document.write(mycars[0])

下面是输出：

Saab

修改已有数组中的值

如需修改已有数组中的值，只要向指定下标号添加一个新值即可：

mycars[0]="Opel";

现在，以上代码：

document.write(mycars[0]);

将输出：

Opel

循环语句

函数

事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

· 鼠标点击

· 页面或图像载入

· 鼠标悬浮于页面的某个热点之上

· 在表单中选取输入框

· 确认表单

· 键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

如果需要更多有关 Javascript 可识别事件的知识，请阅读我们的 JavaScript 事件参考手册。

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

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

onmouseover="alert('An onMouseOver event');return false">

</a>

Javasceipt中的对象

1.内置对象（math、date、string、内置函数）

Data对象

定时器

2.浏览器对象（window对象）

Window方法

Location方法

History方法

3.文本对象

4.自定义对象

实例

1.表单验证

<HTML> <HEAD>  <TITLE> 表格及表单应用 </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <script>   function validate()  {   var username=document.getElementById("username");   var password=document.getElementById("psw1");   var conpassword=document.getElementById("psw2");   var gender=document.getElementsByName("gender");   var interest=document.getElementsByName("hobby");   var n=0;   var comment=document.getElementById("info");   if(username.value.length<1)     {alert("用户名不能为空！");      return false;     }   if(username.value.length<4||username.value.length>10)     {alert("用户名长度应介于4-10之间！");      return false;     }   if(password.value.length<1)     {alert("密码不能为空！");      return false;     }   if(password.value.length<4||password.value.length>10)     {alert("密码长度应介于4-10之间！");      return false;     }   if(password.value!=conpassword.value)     {alert("确认密码与密码不符！");      conpassword.value="";      return false;     }    if(!gender[0].checked&&!gender[1].checked)     {alert("性别必选其一！");      return false;     }  for(var i=0;i<interest.length;i++)   {    if(interest[i].checked)     {n++;}   }  if(n<1)   {alert("兴趣至少选一个！");      return false;     }  if(n>3)   {alert("兴趣最多选三个！");      return false;     } if(comment.value.length<1)     {alert("简历必须填写！");      return false;     } return true;   }  </script> </HEAD> <BODY > <CENTER><H2>填写用户信息页面<H2></CENTER> <form action="http://www.jianqiao.com/bbs/login.jsp" enctype="multipart/form-data" method="post" onsubmit="return validate()"><TABLE BORDER=2 HEIGHT=400 WIDTH=400 BGCOLOR=PINK ALIGN=CENTER><TR><TD>用 户 名:</TD><TD><input type="text" name="username"></TD></TR><TR><TD>密    码:</TD><TD><input type="password" name="psw1"> </TD></TR><TR><TD>确认密码:</TD><TD><input type="password" name="psw2"></TD></TR><TR><TD>性    别:</TD><TD><input type="radio" name="gender"  value="male" >男<input type="radio" name="gender"  value="female">女</TD></TR><TR><TD>爱    好：</TD><TD><input type="checkbox" name="hobby"  value="sport">体育<input type="checkbox" name="hobby"  value="drawing" >画画<input type="checkbox" name="hobby" value="Photography">摄影<input type="checkbox" name="hobby"  value="travel">旅游</TD></TR><TR><TD>您的学历：</TD><TD><select name="education background" ><option value="choice">--请选择--<option value="middle school">初中        <option value="height school">高中        <option value="university">大学<option value="master">硕士<option value="doctor">博士</select></TD></TR><TR><TD>您的简历：</TD><TD><textarea name="info" cols ="40" rows = "5"></textarea></TD></TR><TR><TD>上传附件: </TD><TD><input type="file" name="f1"></TD></TR><TR align=center><TD colspan=2><input type="submit" value="提交"><input type="reset" value="重置"></TD></TR></TABLE></form> </BODY></HTML>

2.计时器

<html><head><script type="text/javascript">var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=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>

3.序列号验证

<HTML> <HEAD>  <TITLE>link</TITLE>  <script type="text/javascript">   function moveNext(Object,index)   {    if(Object.value.length==4){document.forms[0].elements[index+1].focus();}   }   function showResult()   {    var f=document.forms[0];var result="";for(var i=0;i<4;i++){ result+=f.elements[i].value; }alert("序列号为:"+result);   }  </script> </HEAD> <BODY onload="document.forms[0].elements[0].focus();">  <form>  <input type="text" size="4" maxlength="4" onkeyup="moveNext(this,0);">-  <input type="text" size="4" maxlength="4" onkeyup="moveNext(this,1);">-  <input type="text" size="3" maxlength="4" onkeyup="moveNext(this,2);">-  <input type="text" size="4" maxlength="4" onkeyup="moveNext(this,3);">  <input type="button" value="显示" onClick="showResult();"> </BODY></HTML>