JEE_JavaScript1
脚本语言是一种简单的程序，这些程序由一些ASCII字符构成，可以使用任何一种文本编辑器来编写。以往的一些程序如C、C++、Java、C#等都必须经过编译，将源代码编译成二进制的可执行文件后才能运行。而脚本语言不需要事先编译，只要有一个与其相适应的解释器来解释运行。
脚本语言可以分为两类：服务器脚本语言和客户端脚本语言。
服务器脚本语言：ASP，JSP，PHP等。
客户端脚本语言：JavaScript，VBScript和JScript。
JavaScript：JavaScript是一种描述性的脚本语言，将JavaScript写入Web页面中能使原来静态的Web页面增加动态效果。
JavaScript与Java语言的区别：虽然字面上看二者区别不大，但两者除了在语法上有点相似外，其余地方差别很大。1。Java代码必须先编译后运行，而JavaScript不需要编译，可以由浏览器直接解释执行。2。Java多用于服务器端，JavaScript多用于客户端。如果Java要在客户端运行，则客户机须先安装JVM环境。3。JavaScript可以将代码直接写入到HTML文件中，而使用Java编写的Applet必须独立在HTML文件之外，并在HTML文件中通过调用该Applet来运行。4。JavaScript是动态类型语言，使用的是松散的数据类型，在使用变量之前不需要先声明，而Java是静态类型语言，使用的是严谨的数据类型，变量的使用要先声明数据类型。5。JavaScript和Java当然也可以通过紧密结合，实现强大功能。
JavaScript作用：网页特效，表单验证，减少用户操作，增加安全性，减少编写和维护代码的工作量，响应事件，游戏及其它。
隐藏HTML中的JavaScript代码：<!-- 代码 -->"：由于使用不兼容的浏览器会把JavaScript代码当作标准文本显示出来，而HTML的注释有个作用是注释的文本不会向浏览器提交。所以当使用不兼容的浏览器时，要用一个嵌入JavaScript代码的HTML文档的时候，为了隐藏嵌入的JavaScript代码，可以将JavaScript代码置于HTML代码注释块中。这样，与JavaScript兼容的浏览器会自动忽略HTML注释标签，正常地执行JavaScript代码。与JavaScript兼容的浏览器也不会显示JavaScript代码，而是由浏览器的脚步引擎解释执行。也就是说JavaScript注释标签可以把JavaScript代码从解释器隐藏起来。
JavaScript对大小写是敏感的，虽然HTML对大小写不敏感。
JavaScript会忽略空格，换行等，可以由此对程序代码进行排版。
JavaScript中的换行有“断句”的意思，即换行代表前后是两个独立的语句。
JavaScript中的分号代表语句结束，而当代码采用换行时语句也表示介绍，此时可省略分号（但省略分号是不好的编程习惯）。
JavaScript分隔语句的分号是可选的，如果将语句放在不同行中，就可以省略分号。
Javascript虽然是面向对象的语言，但没有准确的类的概念，所以常把对象实例也称为对象。
在网页中加入JavaScript：
1.
script标签
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<script>
alert("这是一个由JavaScript创建的对话框");
</script>
</body>
</html>
在HTML中加入JavaScript代码，JavaScript语句必须放在<script></script>标签之间。 <script></script>标签理论上可以放在网页文档的任何位置，但一般放在<head>或<body>中
输出警告框：window.alert("这是一个由JavaScript创建的对话框"); //其中window对象名可以省略。
输出文字：document.write("Hello JavaScript");
注释： // 或 /***/ 或者用HTML的注释语句<!-- -->
2.<script>标记介绍：
script标签的language属性可以设置使用的是哪种脚本语言标准；
View Code
<html> <head> <title>这是一个错误的Script文件</title> </head> <body> <script language="javascript"> alert("这是一个由JavaScript创建的对话框"); </script> </body> </html>
type属性用来指定脚本语言的MIME类型。 defer属性使当script脚本中没有输出语句时不用停下来等待脚本的执行。
3.JavaScript除了可以直接嵌入HTML文件中外，也可以独立于HTML文件外：
1。用脚本控制HTML页面
用脚本控制页面
<html>
<head>
<title>using JavaScript to create HTML tages</title>
<script language="javascript">
<!--
a="Wellcome to HTML_JavaScript"
b=" mao"
-->
</script>
</head>
<pre>
<body>
<script language="javascript">
<!--
document.write(a);
document.write(b);
-->
</script>
</body>
</pre>
</html>
2.调用外部JavaScript脚本
调用外部JavaScript脚本
//myHJs.htm
<html>
<body>
<script src=myJs_1.js>
//该例子为调用外部JavaScript脚步允许HTML文档
</script>
</body>
</html>
//myJs_1.js
// JavaScript Document
document.write('hello world!');
//外部JavaScript脚本文件，可供HTML内嵌引用
可以通过设置script标签中的src属性来指定外部JavaScript文件的地址，外部文件扩展名一般是.js，并且外部文件只能含单纯的JavaScript代码，不能含有HTML代码，也不能含script标签。
调用外部文件的JavaScript源代码中，在script标签内不能存在其他JavaScript代码，会直接被忽略。
3.在HTML里可以通过“javascript：”调用JavaScript函数方法。
View Code
<html> <head> <title>使用“javascript:”</title> </head> <body> <a href="javascript:alert('您点击了这个超链接')">请点我</a> </body> </html>
View Code
<html> <head> <title>使用“javascript:”</title> <script language="javascript" type="text/javascript"> <!-- function OnclickLink() { alert("您点击了这个按钮"); } --> </script> </head> <body> <a href="javascript:OnclickLink()">请点我</a> </body> </html>
4.与事件结合，采用事件触发响应用户操作。
View Code
<html> <head> <title>与事件相结合</title> <script language="javascript" type="text/javascript"> <!-- function OnMouseOverLink() { alert("您的鼠标从第一个超链接上划过"); } --> </script> </head> <body> <a href="#" onMouseOver="OnMouseOverLink()">请将鼠标放在上面</a><br> <a href="#" onClick="javascript:alert('您点击了第二个超链接')">请点我</a> </body> </html>
Javascript数据类型：
Javascript是一种无类型的语言，指的是Javascript是一种松散类型、动态类型的语言。因此在Javascript中定义一个变量时是不需要指定变量的数据类型的。
基本数据类型：整型，浮点型，字符型，布尔型
复合数据类型：对象，数组
其他数据类型：函数，null，undefined
八进制数在Javascript中是以数字“0”来开头的
十六进制数在Javascript中是以数字“0x”开头的
在Javascript中，凡是带小数点的小数，Javascript都认为是浮点型的；指数形式表示的数也认为是浮点型的
在Javascript中，不区分单个字符和字符串，都称为字符型，都可以用单引号或双引号表示，如"hello"，"25"
数据类型的转换：
1。隐式类型转换：将类型转换为环境中应该使用的类型。
2。显示类型转换：
将对象转换成字符串：toString()方法。对象不能直接转换成数字型，要先将对象转换成字符型，再转换成数字型。
基本数据类型的转换：Number()，Boolean(),String()等函数转换数字型，布尔型，字符串型。
利用空字符串将数字型转换成字符型：+ " ".
利用减0将字符串型转换成数字型。
利用“!!”运算符将字符串型转换成布尔型。
常量与变量：
Javascript变量名是区分字母大小写的，Javascript允许不同类型的变量直接进行运算（Javascript不是强类型语言）
变量的声明：通过关键字“var”，如 var GoodBoy;
变量的var声明是永久性的，即用delete运算符来删除变量会导致出错。
如果给一个未用var声明的变量赋值，JavaScript会自动隐式声明该变量，但隐式声明的变量都是创建成全局变量。（局部变量要先用var声明）
变量的赋值，“=”，变量所属的类型就是所赋的值的类型，这是与强类型语言不一样的。
变量的生命周期：全局变量与局部变量，函数内的局部变量的使用要先声明，不然Javascript会认为它是全局变量，改变的是全局变量的值。
变量没有块级作用域，函数中声明的所有变量，无论是先后声明的，在整个函数中它们都是有定义的。（可以不用先声明再调用）
变量没有块级作用域
var scope="global";
function f(){
alert(scope);
var scope="local";
alert(scope);
}
F();
//以上代码中的alert()第一次调用的scope显示的是“local”
变量的类型转换，直接赋予不同类型的值，变量的类型也就自动转换了，这也是与强类型语言不一样的。
类型转换函数：
eval()将字符串表达式转换成数字值。
parseInt()将字符串转换成整数类型。
psrsFloat()将字符串转换成浮点数类型。
运算符与表达式:
Javascript语句：
for...in语句：循环访问对象的所有属性： for( 变量 in 对象){循环语句}
with语句：给相同对象的标签配置名称，属性或方法： with(共同对象的名称){具体对象的名称属性方法;}
条件嵌套
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h1>条件嵌套</h1>
<title>条件嵌套</title>
</head>
<body>
<form name="test">
<hr />
<h3>说明：</h3>
<h5>在下面文本框中填入一个数字再敲回车键<br />
程序会根据输入给出相应的提示<br />
</h5>
<p><input type="text" name="myin" onchange="return judge()" /></p>
</form>
</body>
</html>
<script language="javascript">
<!--
function judge(){
if(document.test.myin.value<0)
alert("您输入了一个负数");
else if(document.test.myin.value<=10)
alert("您输入了一个0~10之间的数");
else
alert("您输入了一个大于10的数");
return 0;
}
//-->
</script>
for...in语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h1>for...in语句</h1>
<title>for...in语句</title>
</head>
<script language="javascript">
function show(){
var name,count;
count=0;
for(name in document.MyWindow.button){
count++;
document.write(name);
document.write("<br>");
}
document.write("<hr>");
document.write("按钮具有"+count+"种属性");
return 0;
}
</script>
<body>
<form name="MyWindow">
<p><input type="button" value="按钮" name="button" onclick="return show()" /></p>
</form>
</body>
</html>
with语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>with语句</title>
</head>
<body>
<hr />
<form name="MyForm">
<input type="text" name="Tname" /><br />
<textarea rows="2" cols="20" name="describe">
</textarea><br />
<input type="button" name="btn" onclick="return PutValue()" />
</form>
</body>
</html>
<script language="javascript">
function PutValue(){
with(document.MyForm){
Tname.value="with按钮";
describe.value="with的作用";
btn.value="我是按钮";
}
}
</script>
Javascript函数：
定义函数：function语句。
三种方法：function语句定义函数，function语句在表达式中定义函数，Function构造函数在表达式中定义函数（Function构造定义的函数每次调用都会重新编译）。
调用函数：
1
<html>
<head>
<title>直接调用无返回值的函数</title>
<script language="javascript" type="text/javascript">
<!--
function myWrite(str)
{
document.write(str+"<br>");
}
myWrite("这是一个测试程序");
myWrite("测试结果是输出一行文字");
-->
</script>
</head>
<body>
</body>
</html>
2
<html>
<head>
<title>直接调用无返回值的函数</title>
<script language="javascript" type="text/javascript">
<!--
function myLink(str)
{
alert("该超链接的地址为：" + str);
}
-->
</script>
</head>
<body>
<a href="http://www.aspxfans.com" target="_blank" onMouseOver="myLink(this.href)">这是一个超链接</a>
</body>
</html>
3
<html>
<head>
<title>将函数的返回值赋给变量</title>
<script language="javascript" type="text/javascript">
<!--
function mySum(x,y)
{
var z = x + y;
return z;
}
var a = 1;
var b = 2;
var c = mySum(a,b);
document.write("a + b = " + c);
-->
</script>
</head>
<body>
</body>
</html>
函数参数：函数参数个数多余或不足均会被视为undefined类型，Javascript不会去判断传递来的函数参数的个数和类型，如果严格要求则需自行判断（tepeof，argument.length）。
1
<html>
<head>
<title>函数参数的使用</title>
<script language="javascript" type="text/javascript">
<!--
function myFun(x,y)
{
if (typeof(x) == "number" && typeof(y) == "number")
{
var z = x * y;
return z;
}
else
{
return "传递的参数不正确，请使用数字型的参数";
}
}
document.write(myFun(2,4) + "<br>");
document.write(myFun(2,"s"));
-->
</script>
</head>
<body>
</body>
</html>
2
<html>
<head>
<title>获取实际传递参数的个数</title>
<script language="javascript" type="text/javascript">
<!--
function myFun(x,y)
{
if (arguments.length != 2)
{
return "传递的参数个数有误，一共传递了" + arguments.length + "个参数";
}
else
{
var z = x * y;
return z;
}
}
document.write(myFun(2,4,8) + "<br>");
document.write(myFun(2) + "<br>");
document.write(myFun(2,4) + "<br>");
-->
</script>
</head>
<body>
</body>
</html>
函数的属性和方法：
.length，.caller，call()，apply()，escape()，unescape()，eval()，isNaN()，parseInt()，parseFloat()。
Javascript对象：
创建对象：
1."var myObject = new Object() "
2."var pen={name:"钢笔", color:"红色", price:30 }"
2
<html>
<head>
<title>直接创建自定义对象</title>
<script language="javascript" type="text/javascript">
<!--
var pen = {
name:"钢笔",
color:"红色",
price:30
}
document.write("笔的名称为：" + pen.name +"<br>");
document.write("笔的颜色为：" + pen.color +"<br>");
document.write("笔的价格为：" + pen.price +"<br>");
-->
</script>
</head>
<body>
</body>
</html>
2.2
<html>
<head>
<title>属性的枚举</title>
<script language="javascript" type="text/javascript">
<!--
//创建一个空对象
var pen = new Object();
//设置对象的属性
pen.name = "铅笔";
pen.color = "红色";
pen.price = 20;
for (var i in pen)
{
document.write("变量名为：" + i + "，变量值为：" + pen[i] +"<br>");
}
-->
</script>
</head>
<body>
</body>
</html>
3.function函数
3
<html>
<head>
<title>使用自定义构造函数创建对象</title>
<script language="javascript" type="text/javascript">
<!--
//自定义构造函数
function pen(name,color,price)
{
//对象的name属性
this.name = name;
//对象的color属性
this.color = color;
//对象的price属性
this.price = price;
}
//定义一个对象
var pen1 = new pen("铅笔","红色",20);
document.write("笔1的名称为：" + pen1.name +"<br>");
document.write("笔1的颜色为：" + pen1.color +"<br>");
document.write("笔1的价格为：" + pen1.price +"<br><br>");
//定义一个对象
var pen2 = new pen("钢笔","蓝色",30);
document.write("笔2的名称为：" + pen2.name +"<br>");
document.write("笔2的颜色为：" + pen2.color +"<br>");
document.write("笔2的价格为：" + pen2.price +"<br><br>");
-->
</script>
</head>
<body>
</body>
</html>
如果构造函数没有参数，则其括号是可以省略的。
对象含义许多方法，JavaScript不存在独立的函数，每个函数都是某个对象的方法。
JavaScript内置语言对象：Array，Date，Function,Global，Math,Number,Object,RegExp,String等。
Date对象的使用
<html>
<head>
<script language=javaScript>
<!--
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime =hours+":"+minutes+":"+seconds
mainbody.innerHTML=thistime
var timer=setTimeout("clockon()",1000)
}
-->
</script>
</head>
<body onLoad="clockon()">
<div id="mainbody" style="position:relative; visibility:visible"></div>
</body>
</html>
Array对象的使用
<HTML>
<HEAD><TITLE>CHAP09</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
Student=new Array(6)
Student[0]="suary"
Student[1]="sansan"
Student[2]="bill"
Student[3]="gayz"
Student[4]="sues"
Student[5]="jay"
document.write(Student[0]+"<br>")
document.write(Student[1]+"<br>")
document.write(Student[2]+"<br>")
document.write(Student[3]+"<br>")
document.write(Student[4]+"<br>")
document.write(Student[5])
</SCRIPT>
</BODY>
</HTML>
Math对象的使用
<script language="javascript">
var iMax=Math.max(1,2,3,6);
var iMin=Math.min(1,2,3,6);
var oNum1=Math.abs(-1);
var oNum2=Math.abs(1);
ceilNum=Math.ceil(25.5);
floorNum=Math.floor (25.5);
roundNum=Math.round (25.5);
var iNum=Math.floor(Math.random()*9+1);
alert("iMax="+iMax+";"+"iMin="+iMin+";"+"oNum1="+oNum1+";"+"oNum2="+oNum2+";"+"ceilNum="+ceilNum+";"+"floorNum="+floorNum+";"+"roundNum="+roundNum+";"+"iNum="+iNum)
</script>
JavaScript客户端对象：Window，Frame,Document，Location，Layer,Link,Image,Area,Anchor,Applet,Plugin,Form,Text,Textarea,FileUpload,Password，Hidden，Submit， Reset,Radio,Checkbox，Button，Select，Option等。
Window对象：
Window_open_close
<html>
<head>
<title>open and close window</title>
<script language="javascript">
var newWindow
function creatNew()
{
newWindow=window.open("","")
}
function closeNew()
{
newWindow.close()
}
</script>
</head>
<body>
<form>
<input type="button" value="open new window" onClick="creatNew()">
<input type="button" value="close new window" onClick="closeNew()">
</form>
</body>
</html>
Window_close
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>closed的使用</TITLE>
</head>
<BODY onClick="self.close()">
<CENTER>
<FONT COLOR="blue" SIZE="5">window对象</FONT><BR>
closed属性<BR>
</CENTER>
</BODY>
</html>
Window_status状态栏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>status的范例</title>
</head>
<Body>
<A HREF="http://www.javascript.com/" onMouseOver="window.status='最棒的学习网站';return true;" onMouseOut="window.status='谢谢!'">JavaScript学习!</A>
</Body>
</html>
Window_opener窗口联系
//opener.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>opener</title>
<Script language="javascript">
queryWin = open('link.htm','','height=100,')
</Script>
</head>
<body></body>
</html>
//link.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>1.htm</title>
<Script>
function passToOpener(color) {
opener.document.bgColor = color;
self.close();
}
</Script>
<CENTER>
请选择你喜欢的颜色?<BR>
<input type=button onClick="passToOpener('#CCFFFF')" value="浅蓝色">
<input type=button onClick="passToOpener('#bbbbbb')" value=浅灰色">
</CENTER>
</head>
<body>
</body>
</html>
Window_alert单按钮对话框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="button" value="Click here" onClick="alert('thanks for visiting our site')">
</form>
</body>
</html>
Window_confirm双按钮对话框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>confirm</title>
</head>
<body>
<form>
<input type="button" value="confirm" onClick="confirm('do you want to submit the data')">
</form>
</body>
</html>
Window_prompt输入对话框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>prompt方法</title>
<script language="javascript">
function newPrompt(){
var answer=prompt('please enter your name');
if (answer){
alert("hello,"+answer+".");
}
}
</script>
</head>
<body>
<form>
<input type="button" value="click" onClick="newPrompt()">
</form>
</body>
</html>
Window_moveTo跳转窗口位置
<html>
<head><title>moveTo()方法</title>
<script laguage="javascript">
<!--
function movewin(form)
{
var winx=form.X.value;
var winy=form.Y.value;
window.moveTo(winx,winy);
}
//-->
</script>
</head>
<body text="#000000">
<form name=form1>
<table border=0 align=center width="500">
<tr>
<td colspan=3 align=center bgcolor=white><font color=blue size=6>输入窗口位置</font></td>
</tr>
<tr>
<td width="233">
<font size="3">X坐标为</font>：<input type=text name="X" style="lightblue;color:blue">
</td>
</tr>
<td width="233">
<font size="3">Y坐标为</font>：<input type=text name="Y" style="lightblue;color:blue">
</td>
<td width="133">
<input type=button value="改变窗口位置" onclick=movewin(this.form) style="background-color:lightgreen;color:blue">
</td>
</tr>
</table>
</form>
</body>
</html>
Document对象：
Document.write()的使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Document.writeln()方法</title>
<script language="javascript">
function createsummary()
{
win2=open("","window2")
win2.document.open("text/plain")
win2.document.writeln("tiltle:"+document.title)
win2.document.writeln("links:"+document.length)
win2.document.writeln("anchors:"+document.anchors.length)
win2.document.writeln("forms:"+document.anchors.length)
win2.document.writeln("images:"+document.images.length)
win2.document.writeln("applets:"+document.applets.length)
win2.document.writeln("embed:"+document.embeds.length)
win2.document.close() //注意一定要用close()关闭输出流才能显示输出内容
}
</script>
<script language="javascript">
//document.close()
</script>
</head>
<body>
<a name="#top"></a>
<form >
<input type="button" name="help" value="help" onClick="createsummary()">
</form>
</body>
</html>
JavaScript事件驱动与事件处理：
Javascript对象模型：
1。Javascript语言核心部分
2。与数据类型相关的核心对象
3。与浏览器相关的对象：Window对象（BOM），Navigator对象，Location对象等。
4。与文档相关的对象：Document对象，Form对象，Image对象等。
当文档或文档中的元素发生了某些动作时，浏览器会产生一个事件（Event），浏览器可以事先通过Javascript定义一个事件的处理程序，当该事件被触发浏览器则自动调用该处理程序响应处理事件。这种通过事件来调用程序的方式称为事件驱动。事件驱动是Javascript中事件处理的一种方法，通过事件驱动可以调用Javascript中的函数或方法。
在Javascript中可以响应的事件有很多，如：浏览加载文档完毕触发onload，单击一个按钮触发onclick，双击鼠标响应ondblclick，在键盘上按下某个键响应onkeypress，鼠标滑过响应onmouseover等。
事件函数的调用：
1
<html>
<head>
<title>事件处理</title>
<script language="javascript" type="text/javascript">
<!--
function btClick()
{
alert("您单击了按钮");
}
-->
</script>
</head>
<body>
<form>
<input type="button" name="myButton" value="按钮" onClick="btClick()">
</form>
</body>
</html>
2
<html>
<head>
<title>事件处理</title>
</head>
<body>
<form>
<input type="button" name="myButton" value="按钮" onClick="alert('您单击了按钮')">
</form>
</body>
</html>
3
<html>
<head>
<title>事件处理</title>
</head>
<body>
<form name="myForm">
<input type="button" name="myButton" value="按钮">
</form>
<script language="javascript" type="text/javascript">
<!--
function btClick()
{
alert("您单击了按钮");
}
document.forms[0].elements[0].onclick = btClick;
-->
</script>
</body>
</html>
语句document.forms[0].elements[0].onclick = btClick;该语句相当于在Javascript代码中为input元素的属性（onclick）赋值。其中的forms[0]表示文档中的第一个表单，elements[0]表示表单中的第一个元素（input元素）。注意此处的属性onclick只需要输入函数名，而不要后面的括号（括号是函数调用运算符，如果加了括号则只成了调用函数里面的代码，而没有调用函数），同时注意该函数名不能加上引号（加上引号则成了赋值字符串了）。
4
<html>
<head>
<title>事件处理</title>
</head>
<body>
<form name="myForm">
<input type="button" value="提交" onClick="btClick()">
</form>
<script language="javascript" type="text/javascript">
<!--
function btClick()
{
alert("您单击了按钮");
}
btClick();
-->
</script>
</body>
</html>
5.返回值
<html>
<head>
<title>事件处理程序的返回值</title>
<script language="javascript" type="text/javascript">
<!--
function formSubmit()
{
//查看表单中的元素个数
var formLength = document.forms[0].elements.length;
//通过循环判断是否所有文本框中都输入了文字
//由于最后一个元素是按钮，所以变量i为小于formLength-1
for(var i=0;i<formLength-1;i++)
{
//如果有一个文本框中没有输入文字，就返回false
if (document.forms[0].elements[i].value.length==0)
{
alert("第" + (i+1) + "个文本框没有输入内容");
return false;
}
}
}
-->
</script>
</head>
<body>
<form name="myForm" action="submit.htm" onSubmit="return formSubmit()">
姓名：<input type="text" name="myName"><br>
密码：<input type="password" name="myPassword"><br>
<input type="submit">
</form>
</body>
</html>
onClick,onChange,onSelect,onFocus.onBlur,onLoad,onUnload,onSubmit,onMouseOver等。
常用事件：
HTML中的事件。
鼠标移动事件
<html>
<head>
<title>鼠标移动事件</title>
<script language="javascript" type="text/javascript">
<!--
function mousemove()
{
//在screenx文本框中显示鼠标的X轴坐标
document.myForm.screenx.value = event.screenX;
//在screeny文本框中显示鼠标的Y轴坐标
document.myForm.screeny.value = event.screenY;
}
-->
</script>
</head>
<body>
<form name="myForm">
<img src="img/flower.jpg" onmousemove="mousemove()"><br>
坐标：<input type="text" name="screenx" size="5"><input type="text" name="screeny" size="5"><br>
<input type="text" name="myText1" value="鼠标经过时产生事件" onmouseover="alert('鼠标经过')">
<input type="text" name="myText2" value="鼠标离开时产生事件" onmouseout="alert('鼠标离开')"><br>
</form>
</body>
</html>
鼠标单击事件
<html>
<head>
<title>鼠标点击事件</title>
</head>
<body>
<img src="img/flower.jpg" name="myImg1" onclick="alert('单击鼠标')"><br>
<img src="img/flower1.jpg" name="myImg2" ondblclick="alert('双击鼠标')"><br>
<input type="text" name="myText1" value="按下鼠标键时产生事件" onmousedown="alert('按下鼠标键')">
<input type="text" name="myText2" value="释放鼠标键时产生事件" onmouseup="alert('释放鼠标键')">
</body>
</html>
加载事件
<html>
<head>
<title>加载与卸载事件</title>
<script language="javascript" type="text/javascript">
<!--
function changeImg()
{
//改变图片
document.myForm.myImg.src = "img/flower1.jpg";
}
-->
</script>
</head>
<body onload="alert('加载网页')" onunload="alert('卸载网页')">
<form name="myForm">
<a href="sample12.htm">关闭窗口或跳转到其他网页都会产生unload事件</a>
<img src="img/flower.jpg" name="myImg" onload="alert('加载图片')"><br>
<input type="button" onclick="changeImg()" value="替换图片">
</form>
</body>
</html>
焦点事件
<html>
<head>
<title>得到焦点与失去焦点事件</title>
</head>
<body>
<input type="text" name="myText1" onfocus="alert('第1个文本框得到焦点')" onblur="alert('第1个文本框失去焦点')"><br>
<input type="text" name="myText2"><br>
<input type="button" value="按钮">
</body>
</html>
键盘事件
<html>
<head>
<title>键盘事件</title>
</head>
<body>
<input type="text" name="myText1" onkeypress="alert('keypress事件')"><br>
<input type="text" name="myText2" onkeydown="alert('keydown事件')"><br>
<input type="text" name="myText3" onkeyup="alert('keyup事件')"><br>
</body>
</html>
提交重置事件
<html>
<head>
<title>提交与重置事件</title>
<script language="javascript" type="text/javascript">
<!--
function submitCheckForm()
{
if (myform.myName.value=="刘智勇")
{
alert("姓名没有修改，不能提交表单");
return false;
}
}
function resetCheckForm()
{
if (myform.myName.value!="刘智勇")
{
alert("姓名已经修改，不能重置表单");
return false;
}
}
-->
</script>
</head>
<body>
<form name="myform" onsubmit="return submitCheckForm()" onreset="return resetCheckForm()" action="submit.htm">
姓名：<input type="text" name="myName" value="刘智勇"><br>
性别：
<input type="radio" name="mySex" value="男">男
<input type="radio" name="mySex" value="女">女
<br>
城市：
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
选择修改事件
<html>
<head>
<title>选择与改变事件</title>
</head>
<body>
<form name="myform">
<textarea name="content" rows="10" cols="30" onselect="alert('您选择了文本')" onchange="alert('您修改了文字')">表单是由表单元素组成的一个集合。在一个网页中，可以允许有多个表单出现。</textarea><br>
<select name="city" onchange="alert('您修改了选项')">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</form>
</body>
</html>
浙公网安备 33010602011771号