前言: 完成以下练习

编写代码:计算 1-100 相加并输出结果, 计算 20-80 相加,并输出结果, 计算 100-200 相加,并输出结果
  1. var sum1 = 0;
  2. for (var i = 1; i <= 100; i++) {
  3.     sum1 += i;
  4. }
  5. console.log(sum1)
  7. var sum2 = 0;
  8. for (var i = 20; i <= 80; i++) {
  9.     sum2 += i;
  10. }
  11. console.log(sum2)
  13. var sum3 = 0;
  14. for (var i = 100; i <= 200; i++) {
  15.     sum3 += i;
  16. }
  17. console.log(sum3)

没学函数前, 我们可能会写三遍 for 循环, 有了函数之后只需要写一遍即可.

  1. function sum(min, max) {
  2.     var sum = 0;
  3.     for (var i = min; i <= max; i++) {
  4.         sum += i;
  5.     }
  6.     return sum;
  7. }
  8. console.log(sum(1, 100));
  9. console.log(sum(20, 80));
  10. console.log(sum(100, 200));

(一)函数的声明函数的作用

1.1 封装多行语句,可以重复使用,类型为 function


1.2 声明函数和调用函数

  1. <script>
  2.     // 声明函数
  3.     function sayHeloo() {
  4.         console.log('hello1');
  5.         console.log('hello2');
  6.         console.log('hello3');
  7.         console.log('hello4');
  8.         console.log('hello5');
  9.         console.log('hello6');
  10.     }
  11.     // 调用函数
  12.     sayHeloo();
  13.     // 声明函数 1到100累加
  14.     function sum() {
  15.         var sum = 0;
  16.         for (var i = 1; i <= 100; i++) {
  17.             sum += i;
  18.         }
  19.         console.log(sum);
  20.     }
  21.     // 调用函数
  22.     sum();
  23. </script>

1.3 对象中的函数(方法), alert 就是 window 对象的一个方法

  1. <script>
  2.     var obj = {
  3.         name: 'laohu',
  4.         age: 100,
  5.         say: function() {
  6.             console.log('我是laohu');
  7.         }
  8.     }
  10.     // 在对象里调用函数, 对象里的函数我们称之为对象的方法
  11.     obj.say();
  12. </script>

(二)函数的调用方式

2.1 手动调用

  1. <script>
  2.     function say() {
  3.         console.log('hello');
  4.     }
  6.     // 手动调用
  7.     say();
  8. </script>

2.2 绑定一个事件来调用(这里的函数叫: 监听器, 事件句柄

2.3 需求: 从页面上输入两个加数,绑定事件,加上两个加数相加的结果,并显示在页面上

  1. <body>
  2.     <input value="" type="text" id="num1"> + <input type="text" id="num2"> = <input type="text" id="sum">
  3.     <p>
  4.         <button onclick="add()">相加</button>
  5.     </p>
  6.     <script>
  7.         function add() {
  8.             // 获取元素阶段
  9.             var $num1 = document.getElementById('num1');
  10.             var $num2 = document.getElementById('num2');
  11.             var $sum = document.getElementById('sum');
  13.             // 获取input标签的值
  14.             var num1 = $num1.value;
  15.             var num2 = $num2.value;
  16.             var sum = Number(num1) + Number(num2);
  17.             $sum.value = sum;
  18.         }
  19.     </script>
  20. </body>
  1. (1) 获取元素节点 document.getElementById('xxx')
  2. (2) 获取input标签的值

(三)函数传递参数

3.1 调用时传入的数据,跟函数的参数一一对应, 调用的时候没有传所需要的参数, 该参数的值为undefined

  1. <script>
  2.     // 实现任意两个数相加的功能
  3.     // 参数num1和参数num2叫形参
  4.     function add(num1, num2) {
  5.         var sum = num1 + num2;
  6.         console.log(sum);
  7.     }
  9.     // 参数5和8, 叫做实参
  10.     add(5, 8);
  11.     add(100, 200);
  13.     console.log('------任意两个数累加------')
  14.         //任意两个数累加
  15.     function add2(a, b) {
  16.         var sum = 0;
  17.         for (var i = a; i <= b; i++) {
  18.             sum += i;
  19.         }
  20.         console.log(sum);
  21.     }
  22.     // add2(1, 100);
  23.     // add2(20, 80);
  24.     // add2(100, 200);
  26.     add2(100); // a的值为100, b的值为undefined
  27. </script>

3.2 函数和变量声明提前

  1. <script>
  2.     // 函数声明提前
  3.     add(100, 200);
  5.     function add(a, b) {
  6.         var sum = a + b;
  7.         console.log(sum);
  8.     }
  9. </script>
  1. <script>
  2.     // 变量需要先声明后使用
  3.     // 变量声明提前, 然后再赋值
  4.     alert(num);
  5.     console.log(22222);
  6.     console.log(22222);
  7.     console.log(22222);
  8.     debugger;
  9.     var num = 100;
  10.     alert(num);
  11. </script>

3.3 基本数据类型和引用数据类型参数的区别

  1. <script>
  2.     // 基本数据类型参数传递
  3.     function add(a, b) {
  4.         var sum = a + b;
  5.         a = 11;
  6.         b = 22;
  7.         console.log(sum);
  8.     }
  10.     var num1 = 10;
  11.     var num2 = 20;
  12.     add(num1, num2);
  13.     console.log('a:' + num1, 'b:' + num2);
  15.     debugger;
  17.     function test(obj) {
  18.         console.log(111);
  19.         console.log(222);
  20.         obj.age = 200;
  21.     }
  23.     var person = {
  24.         name: 'lh',
  25.         age: 100
  26.     }
  27.     test(person);
  28.     console.log('age:', person.age); //
  29. </script>

(四)函数返回值

4.1 使用 return 返回计算的结果

  1. <script>
  2.     function add(a, b) {
  3.         var sum = a + b;
  4.         return sum;
  5.     }
  7.     var aa = add(10, 20);
  8.     alert(aa);
  9. </script>

4.2 没写 return,默认返回 undefined

  1. <script>
  2.     function say() {
  3.         console.log('hello');
  4.     }
  6.     say();
  7. </script>
  1. <script>
  2.     var age = prompt();
  3.     // 先转成数字
  4.     age = Number(age);
  5.     // age的值是NaN,结果为true, 否则为false
  6.     if (isNaN(age)) {
  7.         alert('请输入数字');
  8.         return false;/////////////////////////妙用
  9.     }
  11.     if (age < 0) {
  12.         alert('请输入大于或等于0的数字');
  13.         return false;
  14.     }
  16.     //  进行年龄分段的判断
  17.     if (age < 6) {
  18.         alert('这是个婴儿');
  19.     } else if (age < 12) {
  20.         alert('这是个少儿');
  21.     } else if (age < 17) {
  22.         alert('这是个青少年');
  23.     } else if (age < 45) {
  24.         alert('这是个青壮年');
  25.     } else if (age < 69) {
  26.         alert('这是个中年人');
  27.     } else {
  28.         alert('这是个老年人');
  29.     }
  30. </script>

4.3 alert(), console.log(), Number(), String(); 调用结束后为什么有个”undefined”出现


4.4 return 之后的代码不执行

  1. <script>
  2.     function test() {
  3.         console.log(1);
  4.         console.log(2);
  6.         return 222;
  7.         console.log(3);
  8.     }
  10.     test();
  11. </script>

(五)作用域

5.1 什么是作用域

  1. demo1.js文件
  2. var a = 10;
  3. var b = 20;
  1. demo1.2.js文件
  2. console.log('我是demo1.2');
  3. console.log(a);
  4. console.log(b);
  1. <body>
  2.     <script src="./demo1.js"></script>
  3.     <script src="./demo1.2.js"></script>
  4. </body>

5.2 window,全局作用域,在全局作用域下声明的变量是全局变量


5.3 局部作用域和局部变量: 函数内部就是局部作用域, 在函数内部声明的变量就是局部变量

  1. <script>
  2.     function add() {
  3.         var num1 = 100;
  4.         var num2 = 200;
  5.         console.log(num1 + num2);
  6.     }
  8.     console.log(num1); // 报错,因为num1是局部作用域, 只能在add函数内访问
  9.     add();
  10. </script>

5.4 作用域访问规则

  1. <script>
  2.     // 作用链: 要访问一个变量, 首先从本函数开始寻找, 找不到,
  3.   就沿着作用域链一级一级向上找, 一直找到window,若没有,就把报错
  4.     var color = '红色';
  6.     function getColor() {
  7.         var color = '青色';
  8.         var color2 = '蓝色';
  10.         function test() {
  11.             var color3 = '绿色';
  12.             console.log(color);
  13.             console.log(color2);
  14.             console.log(color3);
  15.             console.log(color4);
  16.         }
  17.         test();
  18.     }
  20.     getColor();
  22.     // (2)函数外部不可以访问函数内部的变量
  23.     //console.log(color2); // 会报错
  24. </script>
  1. <script>
  2.     var sum = 0;
  3.     for (var i = 0; i < 5; i++) {
  4.         sum += i;
  5.     }
  7.     console.log('sum=' + sum)
  8.     console.log('i=', i); // i是全局变量,不是局部变量
  11.     if (0) {
  12.         var x = 100;
  13.     }
  15.     console.log(x); // undefined, 因为变量声明提前
  16. </script>
  1. (1)函数内部可以访问函数外部的变量
  2. (2)函数外部不可以访问函数内部的变量
  3. (3)多个作用域用作用域链进行连接
  4. (4)没有块级作用域(区分作用域以函数作为区分条件)

作业:

轮播图链接

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.         /////////////////第一步
  10.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  11. </head>
  13. <body>
  14.       ///////////////第二步
  15.     <div class="swiper-container">
  16.         <div class="swiper-wrapper">
  17.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/2fd9cd71b8b73608d28d38435f45ed48.jpg" alt=""></div>
  18.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/b43a16925b3c56107bec4b866a2623ca.jpg" /></div>
  19.         </div>
  20.         <!-- 如果需要分页器 -->
  21.         <div class="swiper-pagination"></div>
  22.     </div>
  24.         ////////////////第三步
  25.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  26.     <script>
  27.         var mySwiper = new Swiper('.swiper-container', {
  28.             loop: true, // 循环模式选项
  30.             // 如果需要分页器
  31.             pagination: {
  32.                 el: '.swiper-pagination',
  33.             },
  34.         })
  35.     </script>
  36. </body>
  38. </html>
  1. 使用函数的方式重写电影列表页面, 同时加上轮播图
  2. 编写一个计算器(eval 用来计算)