初识函数
接着上一篇初探一，今天学习函数，函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。为了更好的理解函数，举一个例子，就是接着上一章，鼠标移入是一种颜色，移出恢复到原来。
首先最原始的写法就是这么一大串长得又差不多的js代码
<div id="main1" onmouseover=
" document.getElementById('main1').style.width='200px';
document.getElementById('main1').style.height='200px';
document.getElementById('main1').style.background='green';" onmouseout=
" document.getElementById('main1').style.width='200px';
document.getElementById('main1').style.height='200px';
document.getElementById('main1').style.background='#CCC';" >
</div>
效果如下：
js2.gif
这段代码的意思是当鼠标移动到div里面时，它的宽 为200px，高为200px，背景颜色为绿色，当鼠标移出div时，它又恢复到原来的样式。
今天学的是函数肯定得有函数出现才行的啊，接下来就是用函数来简化上面那么一大串代码。
首先学的是一个函数function（）。而 js代码一般不会写在行间，太多了，所有我们就需要函数，然后把在行间的代码放在function（）里面。其实本来直接把onmouseover和onmouseout的代码直接分别拿在俩个function也是可以运行的，但是那样重复率太高，代码量也很大...
最后可以这样，在function里给一个变量oDiv,使他等于document.getElementById('main1')，然后直接在函数function去直接使用oDiv,所以就有了
function toGreen()
{
var oDiv=document.getElementById('mian1');
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.background='Green';
}
然后鼠标移出后的也是和上面代码差不多，，现在把函数里的东西也写好了，最后是调用，在div行间的onmouseover和onmouseout分别调用俩个函数就可以运行出来了，
最后源代码：
<html>
<head>
<title>Insert title here</title>
<style>
#main1
{
width: 200px;
height: 200px;
background: #ccc;
}
</style>
<script>
//这是第二种方法，给个变量代替
function toGreen() {
var oDiv = document.getElementById('main1');
oDiv.style.width = '300px';
oDiv.style.height = '300px';
oDiv.style.background = 'green';
}
//这是说的第一种方法，代码量比较大
function togray() {
document.getElementById('main1').style.width = '200px';
document.getElementById('main1').style.height = '200px';
document.getElementById('main1').style.background = '#ccc';
}
</script>
</head>
<body>
<div id="main1" onmouseover="toGreen()" onmouseout="togray()">
</div>
</body>
</html>
下面是效果图
js3.gif
函数有基本的格式：function 函数名（）{代码 }
函数名是可以随便取的，但是最好取一个有一定含义的，可读性高一点，就像上面我取的函数名是toGreen，有一定的可读性。同时我们还用到了变量，它的在js的作用就像是一个别名，看到看到这个变量就好像看到了那一串代码，比如在script标签里写一个
function show(){ //定义
alert('a');
}
show(); //调用
最后就是弹出一个a的框。
好了，这一节就到这了....
网友评论