美文网首页
初学JavaScript(二)

初学JavaScript(二)

作者: Miio_ | 来源:发表于2018-07-20 11:19 被阅读0次

    初识函数

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

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

    相关文章

      网友评论

          本文标题:初学JavaScript(二)

          本文链接:https://www.haomeiwen.com/subject/pzgtmftx.html