初识函数
接着上一篇初探一,今天学习函数,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。为了更好的理解函数,举一个例子,就是接着上一章,鼠标移入是一种颜色,移出恢复到原来。
首先最原始的写法就是这么一大串长得又差不多的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的框。
好了,这一节就到这了....
网友评论