javascript常用总结-CSDN博客

数据类型	说明	举例
字符串型	使用单引号或双引号括起来的一个或多个字符	如"PHP"、"IlikestudyPHP"等
数值型	包括整数或浮点数（包含小数点的数或科学记数法的数）	如-128、12.9、6.98e6等
布尔型	布尔型常量只有两种状态，即true或false	如event.returnValue=false
对象型	用于指定JavaScript程序中用到的对象	如网页表单元素
Null值	可以通过给一个变量赋null值来清除变量的内容	如a=null
Undefined	表示该变量尚未被赋值	如vara

变量

声明（创建）JavaScript变量

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

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

varx;varcarname;

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

varx=5;varcarname="Volvo";

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

向JavaScript变量赋值

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

x=5;carname="Volvo";

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

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

向未声明的JavaScript变量赋值

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

这些语句：

x=5;carname="Volvo";

与这些语句的效果相同：

varx=5;varcarname="Volvo";

重新声明JavaScript变量

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

varx=5;varx;

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

JavaScript算术

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

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

运算符

==	等于	x==8为false
===	全等（值和类型）	x===5为true；x==="5"为false

数组

定义数组

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

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

varmyArray=newArray()

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

varmycars=newArray()

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

也可以使用一个整数自变量来控制数组的容量：

varmycars=newArray(3)

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

varmycars=newArray("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中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："WelcomeJohnDoe!"。

onFocus,onBlur和onChange

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

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

<inputtype="text"size="30"id="email"οnchange="checkEmail()">

onSubmit

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

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

<formmethod="post"action="xxx.htm"οnsubmit="returncheckForm()">

onMouseOver和onMouseOut

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

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

<ahref="http://www.w3school.com.cn"

οnmοuseοver="alert('AnonMouseOverevent');returnfalse">

<imgsrc="w3school.gif"width="100"height="30">

</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" οnsubmit="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=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>

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 οnlοad="document.forms[0].elements[0].focus();"> <form> <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,0);">- <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,1);">- <input type="text" size="3" maxlength="4" οnkeyup="moveNext(this,2);">- <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,3);"> <input type="button" value="显示" onClick="showResult();"> </BODY> </HTML>