javascript 函数

1.函数的概念

1、函数

使用function修饰的独立功能代码块，称函数

2、函数的语法

function add(a, b){
        let res = a + b
        return res
      }

3、function 是函数的修饰符

4、add 是函数的名称

5、(a,b) 是函数的形式参数列表

6、{let res = a+b; return res;} 是函数体

7、函数的使用或调用

let rt = add(1,2)

8、函数的分类

8-1 是否有名称

-- 具名函数 、匿名函数

8-2 构造函数

8-3 ES6箭头函数

8-4 回调函数,函数作为参数使用

9、元素的事件属性:在开始标签中定义的onclick onmouseover... on+*属性，表示对某种事件的监听

10、元素:开始标签开始，到结束标签结束包含的所有内容

11、元素的属性:在开始标签中定义的key=vlaue键值对

12、函数的内部是局部作用域，内部定义的变量，不可在函数外部使用

13、函数可以被重复使用

演示：

<button onclick="myFunction()">点击我执行一个函数</button>
  <script>
    // 1 点击button时触发的函数
    function myFunction() {
      alert('您点击了button按钮')
    }

    // 2 自定义一个函数执行数值的相加
    function add(a, b) {
      return a + b
    }
    // 函数的调用
    let rt = add(1, 2)
    console.log(rt); // 3
    rt = add(10, -30)
    console.log(rt); // -20

    // 3 函数fn1
    function fn1() {
      let num = 10
      console.log('fn1函数被调用了');
      console.log('num=', num);
    }
    // 函数的调用
    fn1()
    // console.log(num); // num is not defined num没有定义
  </script>

2.函数的返回值

1、函数体中定义return 表示终止函数，如果return 后面有值，就会把值返回给调用者

<script>
    function addition(a, b) {
      return a + b
    }
    function subtraction(a, b) {
      return a - b
    }
    function multiplication(a, b) {
      return a * b
    }
    function division(a, b) {
      return a / b
    }
    let rt = addition(1, 2)
    console.log(rt);
    rt = division(1, 2)
    console.log(rt);

    const log = console.log

    // 递归函数
    function fn() {
      let answer = prompt('今天天气如何？')
      if (answer === '晴天') {
        // 自己调用自己
        return log('出去玩')
      }
      fn()
    }
    fn()
  </script>

3.数组

    1、使用变量保存我们班所有成员名称，要声明很多变量，程序可读性差

    2、可以使用数组保存很多数据

    3、数组是一组具有相同数据类型的组合，可以使用一个变量名+下标存储很多数据

    4、声明数组

      let arr = []

      let arr1 = new Array()

      let arr2 = Array.of(1,2,3)

      let arr3 = Array.from([1, 2, 3])

    5、数组的四要素

      5-1 数组的名称 arr

      5-2 数组的长度 arr.length 元素的个数

      5-3 数组的下标 arr[0] 数组的下标[0,arr.length-1]

      5-4 数组的元素 数组真正保存数据的地方 arr[3] = 10

    6、使用数组

      let arr = [1,2,3]

      arr[1] = 20

      let num  =  arr[2] * 100

    7、数组添加元素

      arr.push(200)

    8、遍历数组

      for(let i = 0;i<arr.length;i++){

        console.log(arr[i])

演示：

<script>
    let arr = [1, 2, 3]
    let num = arr[2] * 100
    console.log('num=' + num); // 300
    arr[1] = 20
    console.log('arr=', arr);
    // 输出数组的长度
    let len = arr.length
    console.log('len=' + len);
    // 数组添加一个元素
    arr.push(200)
    console.log('arr=', arr);
    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
      console.log('key=', i, ',value=', arr[i])
    }
  </script>

4.事件回调函数

 <button onclick="fn1()">点击执行fn1</button>
  <!-- 定义自定义函数，输入2个数，计算2个数的差值 -->
  <script>
    // button点击时触发的事件回调函数
    function fn1() {
      console.log('button点击时触发的事件回调函数');
    }
  </script>

5.函数的使用1

<div class="box">
    <h3 onclick="showCourse()">前端课程</h3>
    <ul class="course">
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Canvas</li>
    </ul>
  </div>
  <script>
    function showCourse() {
      console.log('showCourse被调用');
      let course = document.getElementsByClassName('course')[0]
      // console.log(course);
      // 给ul设置行内样式
      course.style.display = 'block'
    }
  </script>

6.函数的使用2（时间函数的调用）

<div class="box">
    <div class="txt"></div>
    <button onclick="showDialog()">点击添加祝福</button>
    <script>
      function showDialog() {
        let username = prompt('输入用户名')
        // 如果username没有值，不作拼接和输出
        if (!username) {
          return
        }
        let txt = document.getElementsByClassName('txt')[0]
        txt.innerHTML = username + ",新年好!"
      }
    </script>
  </div>

7.函数的使用3（函数和数组的使用）

<div class="box">
    <div class="student-list"></div>
    <button onclick="addStudent()">点击添加</button>
    <button onclick="showStudents()">点击显示</button>
  </div>
  <script>
    // 1、声明一个空数组，用于保存学生的姓名
    let arr = []

    // 2、定义添加学生的方法
    function addStudent() {
      console.log('addStudent函数被调用');
      let username = prompt('输入学生的名称:')
      if (!username) {
        alert('用户名不能空')
        return
      }
      // 向数组中添加元素
      arr.push(username)
    }

    // 3、定义显示学生的方法
    function showStudents() {
      let str = '现有学生:'
      for (let i = 0; i < arr.length; i++) {
        if (i === arr.length - 1) {
          str += arr[i]
        } else {
          str += arr[i] + ","
        }
      }
      console.log(str);
      let studentList = document.getElementsByClassName('student-list')[0]
      studentList.innerHTML = str
    }
  </script>