JS基础(三)函数-面向对象编程

函数

函数的定义

<script>
    /* 定义一个函数
    function 函数名(){
        代码块
    }
    需求1：写一个函数，实现1到100相加
    */
   function sum(){
       var num = 0;
       for(i=1;i<=100;i++){
        num += i;
       }
       console.log(num);
   }
    /* 调用函数，使用函数
    函数名();
   */
   sum();
   
   function fist(){
       var a = 0;
       for(j=50;j<=500;j++){
           a += j;
       }
       document.write(a+'<br>');
   }
// 使用函数
   fist();

</script>

函数的类型

<script>
    function sum(){
        console.log('sum函数');
    }
    sum();
    // 函数的数据类型是function,是一种特殊的对象；
    console.log('sum的类型是'+typeof sum);
    console.log('alert的类型是'+typeof alert);
    console.log('document.write的类型是'+typeof document.write);
    console.log('console.log的类型是'+typeof console.log);
    // 对象里的函数(一般称为对象的方法)

    var dog = {
        color:'白色',
        age:2,
        bark:function(){
            console.log('汪汪汪');
        }
    }
    // 调用对象中的函数(方法)
    dog.bark();

    dog.bark();

    dog.bark();

    var drink ={
        waterType:'热水',
        amount:'25L',
        pour:function(){
            console.log('您喝水');
        }
    }
   
    drink.pour();

</script>

函数绑定事件调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 绑定一个点击事件，通过事件调用函数
        onclick:点击事件
        onkeydowm:按下事件
    -->
    <button "sum();">计算</button>
    <input type="text" "sum();">
</body>
</html>
<script>
    function sum(){
        var count = 0;
        for(var i =0;i<=100;i++){
            count += i;
        }
        console.log(count);
    }
    sum();//手动调用
</script>

函数绑定事件调用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>实现1-xxx相加的计算</h3>
    <input type="text" value="" "showSum();">
    <button "sum();">计算</button>
    <p>1-<span id="num">xxx</span>相加的结果是：<span id="total">50</span></p>

</body>
<script>
    function sum(){
        /*
        获取input的节点并且取名为$input,
        这里要注意的是为了方便可以在前面用$后面接该标签的名字便于查看
        */
        var $input = document.querySelector('input');
        // 获取输入框的值
        var num = $input.value;
        console.log(num);
        var total = 0;
        for(var i =0;i<=num;i++){
            total += i;
        }
        console.log(total);
        // 教训：innerHTML后面接的是等于号不是逗号
        document.querySelector('#total').innerHTML=total;
        document.querySelector('#num').innerHTML=num;
    }
</script>
</html>

有参函数

<script>
    // 无参函数
    // function add(){
    //     var a = 10;
    //     var b = 20;
    //     var num = a+b;
    //     console.log(num);
    // }
    // add(); 


        // 有参函数
    function add(a, b) {
        var num = a + b;
        console.log(num);
    }
    add(1, 2); 



    function sum(a){
        var num = 0;
        for(var i = 1;i<=a;i++){
            num += i;
        }
        console.log(num);
    }
    sum(100);
</script>

函数返回值

<script>
    // 函数返回值
    function add(a,b){
        var sum = a +b;
        // return 函数返回值
        return sum;
    }
    var sum = add(10,10);
    document.write(sum);


    function add2(o, p) {
            var sum = o + p;
            // 没有return时，默认返回undefined
        }
        var sum = add2(10, 10);
        document.write(sum);   
</script>

声明全局变量

<script>
    /* 声明全局变量
        全局变量，全局都可以使用引用的变量
    */
    var man = {
        name : '勇'
    }
    
</script>

全局变量的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 把全局变量放在头部，这样的话下面的js才能访问到 
        代码的顺序从上到下
    -->
    <script src="demo5-2.js"></script>
    <script>
        // 全局变量
        var dog = {
            name: '小黑'
        }
        console.log(arr);
    </script>
</head>
<body>
    
    <script>
        
        console.log(dog);
        var cat = {
            name: '咖啡猫'
        }    
    </script>
</body>
</html>


外部js
var arr = [123,4,4,5,5,56];

局部变量

<script>
    // add(){}里的变量为局部变量
    function add(){
        var a = 10;
        var b = 5; 
        var sum = a+b;
        console.log(sum);
        // 局部作用域，局部变量，里面可以访问
    }

    console.log(b);
    // 外部访问不到
</script>

全局变量变局部变量

<script>
  var a = 100; //全局变量
  function cal() {
    var b = 200; //局部变量
    function add() {
      var b = 300; //局部变量    必须得加var 不然即使在函数里面也是全局变量
      var c = 300; //局部变量
      var sum = a + b + c;
      return sum;
    }
    var result = add();
    document.write(result);
  }
  cal(); //将上面的var a注释的话，这里打印不出结果
</script>

面向对象编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="name"></div>
</body>
</html>

<script>
    /* 面向对象：根据需求要对某个区域进行js动态处理，
    定义一个对象来代表这个区域，然后把这个区域里用到的动态方法包装在函数里，
    系统化编程，当用到方法时  对象.函数名
    */
    // 定义一个名字为home的对象
    var home = {
        // 定义一个名字为fist的函数，用于存放功能实现的代码
        // 这里需要  函数名:function(){},否者会报错
        fist:function(){
            // 往name标签里添加算式的功能
            var a = 1;
            var b = 2;
            var sum = a+b;
            document.querySelector('.name').innerHTML=sum;
        }
    }
    //然后要实现这个功能的话直接调用就可以了
    home.fist();
    /*
    面向对象编程的好处，定义对象的名称是便于区别这个作用到哪个对象身上
    然后把该对象要用到的功能全部以函数的方式放在对象里面
    然后到引用的时候只需要引用对象里的函数就行
    好处便于管理功能，便于调用功能
    使得编程流程化(套路化)
    */
</script>

大纲-总结

(一)函数的定义和作用
1.封装多行语句，可以重复使用
2.类型:function，对象里的一种特殊类型

(二)函数的调用方式
1.手动调用   
2.绑定一个事件调用

(三).函数传递参数(条件)

(四).函数返回值
1.使用return返回计算的结果
2.没写return，默认返回undefined

(五).作用域
1.什么是作用域
    在某区域有作用的，成为作用域
2.全局作用域，在全局作用域下声明的变量是全局变量，在script标签里面（子级）声明的变量为全局变量
    /*自我总结：通过全局变量可以方便js代码的处理，全局变量的可以放在
    头部按顺序来排，(类似这个用到卖座项目里面的话，后台数据的代码由于是属于全局变量
    可以放在home.html的body上面，这样一来home.js文件里的代码块就可以很好的管理)*/
3.局部作用域和局部变量
    // 函数就是一个局部作用域，里面的变量为局部变量
    a.函数内部可以访问函数外部的变量
    b.函数外部不可以访问函数内部的变量
    c.多个作用域用作用域链进行链接
    d.没有块级作用域(区分作用域是以函数作为区分条件)

(六).面向对象编程
定义:面向对象：根据需求要对某个区域进行js动态处理，
    定义一个对象来代表这个区域，然后把这个区域里用到的动态方法包装在函数里，
    系统化编程，当用到方法时  对象.函数名
作用:面向对象编程的好处，定义对象的名称是便于区别这个作用到哪个对象身上
    然后把该对象要用到的功能全部以函数的方式放在对象里面
    然后到引用的时候只需要引用对象里的函数就行
    好处便于管理功能，便于调用功能
    使得编程流程化(套路化)
    对象里的函数格式:
        函数名:function(){
            
        }

    面向对象编程的顺序：创建对象->定义获取后台数据的函数方法名->根据需求进行定义功能函数名->引用后台数据达到想要的效果
    整个编程都是围绕着创建的对象进行编程

小记.函数里的变量是不限量创建的，根据要储存的东西来取名，然后到引用的时候
  格式都是为${变量名}，
  html里的代码虽然引用到js里面之后没什么效果，但是留在html页面的话
  可以预防以后要更改代码的时候有个参照。
  局部变量是在函数里面用var 声明的变量，如果函数里面没有用var声明变量
  那么那个变量虽然在函数里面但却是全局变量，会对后面相同的局部变量造成影响
  路径传参是在路径后面加 ? 然后在写所传参数的 变量名称=值
  也就是http//:baidu.com?username=fanyong&age=20
  其中&为连接其他参数的符号
  突然想到了寻找想要传进去的变量名的问题，根据后台传过来的数据表，
  找到一个对应的变量要看清楚对应的对象或数组下，要指定到对应的下面才能
  不报错，对象下的属性(数组)后接点 对象名.属性 数组后的属性(对象)
   数组名[对应的属性名] 其中要注意的是属性名，可以是数字或单词，根据
   对应的写进去

JS基础(三)函数-面向对象编程

函数

面向对象编程

猜你喜欢