• 函数:

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

  • 函数的定义

格式:
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>

  • 事件

    用户对浏览器所做的特定的动作(操作),是实现交互操作的一种机制。

事件名称适用对象意义说明
Abortimage终止当图形尚未完全加载前
Blur失去焦点
Changet/pw/ta/select改变
DragDropwindow拖曳
Errorimg/win错误加载文件或图形时发生错误
Focus取得焦点
Movewindow移动
Resetform重置
Submitform
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>

<IMG SRC="abc.gif" NAME="中国电信的广告" onError="handelError(this)">

例3:
<Body>
<A HREF="https://www.mchweb.net" onMouseOver="status='最棒的学习网站';return true;" onMouseOut="status='完毕'">明春学习网</A>
</Body>

例4:
<Body>
<FONT STYLE="cursor:hand" onClick="location='https://www.mchweb.net'" 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='https://www.mchweb.net'" onMouseOver="mOver(this,'最棒的线上学习网站'); return true;" onMouseOut="mOut(this)">明春学习网</FONT>
</Body>

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

<BODY>
搜寻引擎:<BR>

<IMG SRC="images\snow1.gif" NAME=gif_1>
<A HREF="https://www.mchweb.net" onMouseOver="document.gif_1.src='images\\snow.gif'" onMouseOut="document.gif_1.src='images\\snow1.gif'">蕃薯藤</A><BR>

<IMG SRC="images\snow1.gif" NAME=gif_2>
<A HREF="https://www.mchweb.net" onMouseOver="document.gif_2.src='images\\snow.gif'" onMouseOut="document.gif_2.src='images\\snow1.gif'">奇摩站</A>
</BODY>

例7:
<Script>

var url = new Array(3);
url[0] = "https://www.mchweb.net";
url[1] = "https://www.mchweb.net";
url[2] = "https://www.mchweb.net";

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

</Script>

<table width=250><tr><td>
<form><fieldset>
<legend>搜寻引擎</legend>
<input name="go" type="radio" onClick="goto(0)">蕃薯藤
<input name="go" type="radio" onClick="goto(1)">奇摩
<input name="go" type="radio" onClick="goto(2)">中文雅虎
</fieldset></form>
</table>