Python JavaScript2: 函数

2019-04-03 本文已影响8人 IIronMan

总体内容
1、函数的定义与调用
2、提取行间事件与匿名函数
3、网页换肤
4、变量和函数的域解析
5、函数传参与return关键字

一、函数的定义与调用

1.1、函数：就是重复执行的代码片

1.2、函数定义与执行

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>函数的基础学习</title>
   <script type="text/javascript">

        <!--函数的定义-->
        function fnAlter() {
             alert("测试弹框")
        }
        function changeColor() {
             var oDiv = document.getElementById("div1")
             oDiv.style.color = 'red'
             oDiv.style.fontSize = '30px'
        }
   </script>
</head>
<body>
   <div id="div1" onclick="fnAlter()">这是一个div元素</div>
   <input type="button" name="" value="改变标签" onclick="changeColor()">
</body>
</html>

提示：函数定义在 <script type="text/javascript"></script> 里面，可以在其他的标签里面设置 onclick="函数名()" 来点击标签调用函数

使用：行间事件

二、提取行间事件与匿名函数

2.1、由于在一中我们把函数的调用写在了标签(行间)里面,这样做不太好，我们可以把行间事件提取出来，如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>提取行间事件</title>
   <script type="text/javascript">
        window.onload = function () {

             var oBtn = document.getElementById('button1');
             oBtn.onclick = fnChangeDiv;

             function fnChangeDiv() {
                  var oDiv = document.getElementById('div1');
                  oDiv.style.color = 'red';
                  oDiv.style.fontSize = '30px';
             }
        }
   </script>
</head>
<body>
   <div id="div1">这是一个div</div>
   <input type="button" value="改变标签" name="" id="button1">
</body>
</html>

2.2、匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>提取行间事件</title>
   <script type="text/javascript">
       window.onload = function () {
            var oBtn = document.getElementById('button1');
            oBtn.onclick = function() {
                var oDiv = document.getElementById('div1');
                oDiv.style.color = 'red';
                oDiv.style.fontSize = '30px';
            };   
       }
   </script>
</head>
<body>
   <div id="div1">这是一个div</div>
   <input type="button" value="改变标签" name="" id="button1">
</body>
</html>

提示：匿名函数仅仅是把 2.1 中函数fnChangeDiv名字去掉，直接一步到位 oBtn.onclick = function(){},函数没有了名字也就成了匿名函数

使用的情况：仅仅是做一件事的时候

三、网页换肤

3.1、换肤->仅仅是利用js调用函数更换css,如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>网页换肤</title>
   <link rel="stylesheet" type="text/css" href="css/main1.css" id="link1">
   <script type="text/javascript">
        window.onload = function () {

           var oBtn1 = document.getElementById('button1');
           var oBtn2 = document.getElementById('button2');

           var oLink = document.getElementById('link1');

           oBtn1.onclick = function () {
               oLink.href = 'css/main1.css';
          };
          oBtn2.onclick = function () {
               oLink.href = 'css/main2.css';
          };
       }
</script>

</head>
<body>
    <input type="button" value="皮肤1" name="" id="button1">
    <input type="button" value="皮肤2" name="" id="button2">
</body>
</html>

四、变量和函数的域解析

4.1、JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。也就是未定义先使用。
4.2、变量的域解析：变量在未定以前如果使用，值会被赋值为undefined
```
<script type="text/javascript">
    alert(iNum);
    var iNum = 20;
</script>
```

4.3、函数的域解析:在编译阶段会将function定义的函数提前,函数在定义前或者定义后调用都没事

<script type="text/javascript">
    changeValue()
    function changeValue() {
        alert("hello world!")
    }
</script>

五、函数传参与return关键字

5.1、函数传参

<1>、基本的传值

<script type="text/javascript">
      function test(a) {
           alert(a);
      }
      test('hello world!');
</script>

<2>、传值改变标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参-return关键字</title>
    <script type="text/javascript">
          window.onload = function () {
               function fnChangeStyle(mystyle,val) {
                   var oDiv = document.getElementById('div1');
                   oDiv.style[mystyle] = val;
              }
             fnChangeStyle('color','red')
          }
    </script>
</head>
<body>
    <div id="div1">测试样式</div>
</body>
</html>

5.2、return关键字的作用：返回函数执行的结果、结束函数的运行、阻止默认行为

<1>、求和函数，返回结果

<script type="text/javascript">
     function fnAdd(a,b) {
          return a+b;
     }

     alert(fnAdd(3,7));
</script>

<2>、结束函数的运行

<script type="text/javascript">
     function fnAdd(a,b) {
          return a+b;
          alert('这里不会再走');
     }
     alert(fnAdd(3,7));
</script>

Python JavaScript2: 函数

猜你喜欢

热点阅读