Javasceipt索引
Javasceipt放在哪里
页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。
当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。
<html>
<head>
<scripttype="text/javascript">
....
</script>
</head>
....
在页面载入时脚本就会被执行。当你把脚本放置于body部分后，它就会生成页面的内容。
<html>
<head>
</head>
<body>
<scripttype="text/javascript">
....
</script>
</body>
</html>
你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到body，又可以放置到head部分。
<html>
<head>
<scripttype="text/javascript">
....
</script>
</head>
<body>
<scripttype="text/javascript">
....
</script>
</body>
</html>
有时，你也许希望在若干个页面中运行JavaScript，同时不在每个页面中写相同的脚本。
为了达到这个目的，你可以将JavaScript写入一个外部文件之中。然后以.js为后缀保存这个文件。
注意：外部文件不能包含<script>标签。
然后把.js文件指定给<script>标签中的"src"属性，就可以使用这个外部文件了：
<html>
<head>
<scriptsrc="xxx.js">....</script>
</head>
<body>
</body>
</html>
提示：您可以把.js文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。
数据类型
| 数据类型 | 说明 | 举例 |
| 字符串型 | 使用单引号或双引号括起来的一个或多个字符 | 如"PHP"、"IlikestudyPHP"等 |
| 数值型 | 包括整数或浮点数（包含小数点的 数或科学记数法的数） | 如-128、12.9、6.98e6等 |
| 布尔型 | 布尔型常量只有两种状态，即true或false | 如event.returnValue=false |
| 对象型 | 用于指定JavaScript程序中用到的对象 | 如网页表单元素 |
| Null值 | 可以通过给一个变量赋null值来清除变量的内容 | 如a=null |
| Undefined | 表示该变量尚未被赋值 | 如vara |
变量
在JavaScript中创建变量经常被称为“声明”变量。
您可以通过var语句来声明JavaScript变量：
varx;varcarname;
在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：
varx=5;varcarname="Volvo";
注释：在为变量赋文本值时，请为该值加引号。
通过赋值语句向JavaScript变量赋值：
x=5;carname="Volvo";
变量名在=符号的左边，而需要向变量赋的值在=的右侧。
在以上语句执行后，变量x中保存的值是5，而carname的值是Volvo。
如果您所赋值的变量还未进行过声明，该变量会自动声明。
这些语句：
x=5;carname="Volvo";
与这些语句的效果相同：
varx=5;varcarname="Volvo";
如果您再次声明了JavaScript变量，该变量也不会丢失其原始值。
varx=5;varx;
在以上语句执行后，变量x的值仍然是5。在重新声明该变量时，x的值不会被重置或清除。
正如代数一样，您可以使用JavaScript变量来做算术：
y=x-5;z=y+5;
运算符
| == | 等于 | x==8为false |
| === | 全等（值和类型） | x===5为true；x==="5"为false |
数组
定义数组
数组对象用来在单独的变量名中存储一系列的值。
我们使用关键词new来创建数组对象。下面的代码定义了一个名为myArray的数组对象：
varmyArray=newArray()
有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
1:
varmycars=newArray()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
varmycars=newArray(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
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.自定义对象
实例
| <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> |
<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>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
