函数:
函数的作用:在我们需要大量重复一些过程的时候,一直写是不是很烦躁呢,通过定义函数,我们多次调用,只要输入参数就能够得到我们想要的结果啦!
知道函数的作用之后,我们怎么去创建和定义一个函数呢?
function 函数名( )
{
函数体;
}
下面呢,我们来试一试创建一个
function time() {
var time=new Date();
return time;
}
ime呢,就是我们为函数取的名字了,在函数体里面,我们写的是得到现在的时间。
定义好了函数,我们可以试试怎么使用,我们调用函数的方法很简单:
time();//只要直接写函数名就好了,记得加上括号!
现在看看我们创建的函数,是不是觉得少了什么,为了更好的根据实际情况,可以创建带参数的函数:
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">function 函数名(参数1,参数2)</span></div><span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span> 函数代码
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">}</span></div>
注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。
我们现在可以来写一个加法运算了:
<span style="white-space:pre"> </span>function add(x,y)
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span> sum = x + y;
<span style="white-space:pre"> </span> document.write(sum);
<span style="white-space:pre"> </span>}
当然,还有带返回值的函数:
<div style="text-align: center;">function app2(x,y)
{ var sum,x,y;
sum = x * y;
return sum;
}
var req1=app2(5,6);
var req2=app2(2,3);
sumq=req1+req2;
document.write("req1的值:"+req1+"<br/>");
document.write("req2的值:"+req2+"<br/>");
document.write(req1+"与"+req2+"和:"+sumq);
</div>
通过returne 我们可以实现函数的返回值,调用函数的时候就会得到返回值。
事件:
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件表
鼠标单击事件( onclick )
比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add()。代码如下:
<html>
<head>
<script type="text/javascript">
function add(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" οnclick="add2()" />
</form>
</body>
</html>
同样的过程还有鼠标经过事件(onmouseover),鼠标移开事件(onmouseout);
下面来看看光标聚焦事件,其实主要是为了让大家复习下css中的下拉表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择,您现在的职业!");
}
</script>
</head>
<body>
请选择您的职业:<br>
<form>
<select name="career" οnfοcus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
当下拉列表得到焦点的时候,就会调用message函数,弹出对话框。
同样的还有鼠标失焦事件:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后,在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名!" οnblur="message()" ><br>
密码:<input name="password" type="text" value="请输入密码!" >
</form>
</body>
</html>
光标选中文本框之后离开时,触发onblur事件,就会调用mesage函数,弹出对话框。
最后的内容选中事件(onselect),内容修改事件(onchange),加载事件(onload),卸载事件(onunload),其中卸载事件代码:window.onunload = message();