前言: 完成以下练习

编写代码:计算 1-100 相加并输出结果, 计算 20-80 相加,并输出结果, 计算 100-200 相加,并输出结果

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

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

1.1 封装多行语句,可以重复使用,类型为 function
1.2 声明函数和调用函数
1.3 对象中的函数(方法), alert 就是 window 对象的一个方法

(二)函数的调用方式

2.1 手动调用
2.2 绑定一个事件来调用(这里的函数叫: 监听器, 事件句柄2.3 需求: 从页面上输入两个加数,绑定事件,加上两个加数相加的结果,并显示在页面上

  1. (1) 获取元素节点 document.getElementById('xxx')
  2. (2) 获取input标签的值

(三)函数传递参数

3.1 调用时传入的数据,跟函数的参数一一对应, 调用的时候没有传所需要的参数, 该参数的值为undefined
3.2 函数和变量声明提前
3.3 基本数据类型和引用数据类型参数的区别

(四)函数返回值

4.1 使用 return 返回计算的结果
4.2 没写 return,默认返回 undefined
4.3 alert(), console.log(), Number(), String(); 调用结束后为什么有个”undefined”出现
4.4 return 之后的代码不执行

(五)作用域

5.1 什么是作用域
5.2 window,全局作用域,在全局作用域下声明的变量是全局变量
5.3 局部作用域和局部变量: 函数内部就是局部作用域, 在函数内部声明的变量就是局部变量
5.4 作用域访问规则

  1. (1)函数内部可以访问函数外部的变量
  2. (2)函数外部不可以访问函数内部的变量
  3. (3)多个作用域用作用域链进行连接
  4. (4)没有块级作用域(区分作用域以函数作为区分条件)

作业:

  1. 使用函数的方式重写电影列表页面, 同时加上轮播图
  2. 编写一个计算器(eval 用来计算)
  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.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  10. </head>
  12. <body>
  13.     <div class="swiper-container">
  14.         <div class="swiper-wrapper">
  15.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/2fd9cd71b8b73608d28d38435f45ed48.jpg" alt=""></div>
  16.             <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/b43a16925b3c56107bec4b866a2623ca.jpg" /></div>
  17.         </div>
  18.         <!-- 如果需要分页器 -->
  19.         <div class="swiper-pagination"></div>
  20.     </div>
  23.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  24.     <script>
  25.         var mySwiper = new Swiper('.swiper-container', {
  26.             loop: true, // 循环模式选项
  28.             // 如果需要分页器
  29.             pagination: {
  30.                 el: '.swiper-pagination',
  31.             },
  32.         })
  33.     </script>
  34. </body>
  36. </html>