JsDay6

一、函数

1.函数的概念

• 空调：由遥控器或开关控制，可以实现调解空气的功能的家用电器

• 函数：由用户或自身控制，可以实现某个功能的 代码段（很多代码）

• 家用电器（空调）的特点：

  • 忽略细节
  • 重复使用
  • 选择使用

• 函数的特点：

  • 忽略细节：在使用过程中，只需要关注其实现的功能，而不需要关注其内部原理
  • 重复使用：多次使用
  • 选择使用：按需使用

2.创建函数

• 函数从哪来

  • 内置（系统提供，公司发的）

    • parseInt()
    • parseFloat()
    • alert()

  • 自定义（自己写，自己给自己做）

    • 声明式创建函数
      • 需要配合关键字：function
      • 语法：

            function 函数名(){}
        

    • 赋值式创建函数
      • 需要配合关键字：var和function

            var 变量名 = function(){}
        

    • 函数其实就是一个变量，只不过内部存的是一段代码，这段代码还被一个容器包裹了

3.执行函数

• 函数名()
  • 只要函数名后面有小括号，必然会立即执行当前函数
  • 固定语法
• 通过事件执行
  • 执行无名函数

      元素.事件 = function(){}
  

  • 执行有名函数

      元素.事件 = 函数名
  

  • 无名函数配合有名函数，使用较多

      元素.事件 = function(){
          函数|变量名()
      }
  

4.函数分类

• 根据写法分类

  • 有名函数：

    • 正常函数
    • 使用频率最多的函数
    • 声明式和赋值式创建的函数

        function 函数名(){}
        var 变量名 = function(){}
    

    • 执行
      • 常规执行：函数名或变量名()

  • 无名函数：

    • 非正常函数
    • 没有名字

        function(){}
    

    • 不允许直接存在于代码空间中，否则会报错
    • 使用场景：
      1. 作为变量的值存在（赋值式创建函数时的值）

             var 变量名 = function(){}
         

         • 执行：函数名|变量名()
      2. 作为事件处理函数执行

         btn.onclick = function(){
             // 当事件被触发时要执行的内容...
         }
         

      3. …

  • 匿名函数：
    …

5.函数的参数

• 什么是参数

  • 根据用户传入不同的参数，选择执行函数中不同的功能

• 参数的分类：

  • 发：实参：函数执行时的参数
  • 收：形参：函数定义时的参数
  • 实参和形参的关系，赋值的关系，形参相当于变量，实参相当于值，一对一

• 数量对应关系

  • 参数可以有很多个，语法上没有数量限制，但是行业有习惯，自定义函数，如非特殊需要，尽量不要超过3个
  • 实参和形参数量一致：
    • 按照顺序，一一对应
  • 实参多：
    • 没有形参接收，通过形参找不到
    • 在函数内部有个神秘的空间（arguments），这个空间会将所有的实参全部保存，不论有没有被接收
    • arguments是个对象类型的数据（类数组的数据）
      • 长度（个数），表示接收到了几个实参
        • arguments.length
      • 索引（序号，编号），表示数组内部的数据位置，索引从0开始
        • arguments[索引]
  • 形参多：
    • 多出来的形参是undefined
    • 形参其实就是一个变量，实参是赋值，如果实参不够，表示没有赋值，undefined

6.事件的分类

• 人机交互
  输入和输出
  输入设备：鼠标，键盘，…
  输出设备：显示器，音响，…

  • 事件按照输入设备分：

    • 鼠标类：
      单击：click
      双击：dblclick
      按下：mousedown
      抬起：mouseup
      移动：mousemove
      进入：mouseover / mouseenter
      离开：mouseout / mouseleave
      右键：contextmenu

    • 键盘类：
      按下：keydown
      抬起：keyup
      按下并抬起：keypress

  • 网页的特色事件

    • 浏览器类：
      加载：load
      滚动：scroll
      改变大小：resize

    • 表单类：
      获取焦点：focus
      失去焦点：blur
      输入：input
      内容改变：change
      提交事件：submit
      重置事件：reset

  • 所有事件的绑定方式都是一致的
    目前学习了一种：on绑定，赋值式绑定
    元素.on事件名 = function(){}