8.函数、事件

JavaScript

函数：

独立于主程序的、具有特定功能的一段程序代码块。

函数的定义：

格式：
function 函数名([参数[,参数...]]){
<语句组>
[return <表达式>；]
}

约定：
1、函数名：易于识别；（同变量命名规则）
2、程序代码：模块化设计；
3、函数位置：按逻辑顺序，集中置顶。（<head>...</head>）

return语句：

格式：
return <表达式>；

功能：返回表达式的值。

函数的调用：

格式：
函数名([参数[,参数...]])

例1：
<Script>

function showName(name){
    document.write ( "我是" + name );
}

showName("黄雅玲");

</Script>

例2：
<Script>

function showName(name){
    str="我是" + name;
    return str;
}

document.write(showName("黄雅玲"));

</Script>

事件：
用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。

事件名称	适用对象	意义	说明
Abort	image	终止	当图形尚未完全加载前
Blur		失去焦点
Change	t/pw/ta/select	改变
DragDrop	window	拖曳
Error		img/win	错误加载文件或图形时发生错误
Focus		取得焦点
Move	window	移动
Reset	form	重置
Submit	form
Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove

事件处理程序：

浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。

事件处理程序的调用：

浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。

HTML标签属性：

格式：
<tag on事件=“<语句组>|<函数名>”>

例1：
<body onload="alert('建议浏览器的分辨率：800x600');">
<body onload="var str='建议浏览器的分辨率：800x600';alert(str);">

例2：
<script>
function show(){
    var str="建议浏览器的分辨率：800x600";
    alert(str);
}
</script>
<body onload="show();">

对象属性：

格式：
对象名.on事件=<语句>|<函数名>

例1：
document.onload=alert("建议浏览器的分辨率：800x600");

var str="建议浏览器的分辨率：800x600";
document.onload=alert(str);

例2：
<script>
function show(){
    var str="建议浏览器的分辨率：800x600";
    alert(str);
}
document.onload=show();
</script>

例1：
<Body>
<FORM>
请输入基本资料：<BR>
姓名：
<INPUT TYPE="text" NAME="usr" SIZE="8">
<INPUT TYPE="button" VALUE=" 请单击" onClick="alert('谢谢你的填写...')">
</Body>

例2：
<Script>
function handelError(img){
msg = "有一图文件，名为： \'" + img.name + "\'\n无法顺利显示，请通知系统管理人员" + "，敬备薄礼相送。";
alert(msg);
}
</Script>

例3：
<Body>
<A HREF="http://www.hubert.idv.tw/" onMouseOver="status='最棒的学习网站';return true;" onMouseOut="status='完毕'">文哥网络技术学习网</A>
</Body>

例4：
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="status='最棒的在线学习网站'; this.color='red';return true;" onMouseOut="status='完毕'; this.color='blue';">文哥网络技术学习网</FONT>
</Body>

例5：
<Script>
function mOver(object,msg){
   status = msg;
   object.color = "red";
   object.face = "华文楷体";
}

function mOut(object){
   status = '完毕';
   object.color = "blue";
   object.face = "幼圆";
}
</Script>

<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="mOver(this,'最棒的线上学习网站'); return true;" onMouseOut="mOut(this)">文哥网络技术学习网</FONT>
</Body>

例6：
<STYLE> A {text-decoration:none} </STYLE>

例7：
<Script>

var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";

function goto(i) {
location = url[i];
}

</Script>

previous page start next page