初学JavaScript（二）

初识函数

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

好了，这一节就到这了....

最后编辑于：2018.07.20 11:41:03