js:Math、Date、事件

函数中的this

this是函数中的一个对象 只能够通过点语法和方括号语法修改或者访问 不能够通过 = 修改 因为它直接指向内存

this的特点

• 在函数定义的时候，无法确定指向

• 只有在函数调用的时候，才可以确定指向

• 指向规则：

  • 谁调用 this就指向谁
  • 当没有明确的调用者时，指向window

      var fun = function() {
          console.log(this);
      }
      var obj = {};
      obj.demo = fun;
      
      // 设置为元素的事件
      btn.onclick = fun;
  

    fun(); // 指向window 因为没有明确的调用者
    obj.demo(); // 指向obj 因为是obj在调用
    // 当点击btn时 this指向 btn 因为是触发了 btn的该事件

IIFE

IIFE 立即执行函数表达式 Immediate Invoke Function Expression

例：1. (function () {
            console.log(1)
        })();
		2.   +function () {
            console.log(1)
        }();
        3.   -function () {
            console.log(1)
        }();

Math对象

JS中有许多的内置对象。其中，Math对象封装了许多常用的数学函数。

• Math.random

  该方法用于生成一个随机数0~1 包含0 不包含1

      // 获取一个从0到9的随机整数数字
      var r = Math.random();
      var num = parseInt(Math.random() * 10);
      console.log(num);
  

• Math.abs

  该方法用于获取一个数的绝对值

      // 定义一个负数
      var num = -10;
      // 获取它的绝对值
      var abs = Math.abs(num);
      // 输出
      console.log(abs); // 10
  

• Math.ceil

  向上取整

      var num = 1.1;
      var result = Math.ceil(num);
      console.log(result); // 2
  

• Math.floor

  向下取整

      var num = 1.1; 
      var result = Math.floor(num);
      console.log(result); // 1
  

• Math.round

  四舍五入

      var num = 1.4;
      var num1 = 1.5;
      console.log(Math.round(num)); // 1
      console.log(Math.round(num1)); // 2
  

• Math.pow

  用于求一个数的几次方 第一个参数是底数 第二个参数是指数

      var num = Math.pow(2, 8);
      console.log(num); // 256
  

• Math.max

  求所有参数中的最大值

      var max = Math.max(1, 2, 56, 78, 99, 0, 46, 23);
      console.log(max); // 99
  

• Math.min

  求min参数中的最小值

      var min = Math.min(1, 2, 56, 78, 99, 0, 46, 23);
      console.log(min); // 1
  

额外说明： apply方法是所有函数都有的方法 作用是改变函数中的this指向并以数组的形式传递参数

Date对象

JS中有许多的内置对象。 还有一个对象 Date 它负责日期方面的内容。(其实是构造函数)

注意：以后 只要出现new关键字 它就是引用类型

初始化日期

• 不传递参数

  var date = new Date(); // 当直接通过new调用Date时 并且不传递参数时 得到的时当前的系统时间
  console.log(date); // 当前时间 Tue Aug 27 2019 16:43:49 GMT+0800 (中国标准时间)
  

• 传递一个参数

  Date可以接受一个字符串作为参数 要求是符合系统时间的字符串

      var date = new Date("2019-10-10 19:00:00")
  

• 传递两个参数

  Date可以接受参数 接受两个参数 第一个表示年份 第二个表示月份（0表示1月） 0 ~ 11

      var date = new Date(2019, 2);
  

• 传递三个参数

  前两个同上 第三个表示天数 这个不是从0开始 写几就是几号 1 ~ 31

      var date = new Date(2019, 1, 20);
  

• 传递四个参数

  前三个同上 第四个表示小时 值0 ~ 23

      var date = new Date(2019, 1, 20, 1); 
  

• 传递五个参数

  前四个同上 第五个表示分钟 0 ~ 59

      var date = new Date(2019, 1, 20, 1, 5);
  

• 传递六个参数

  前五个同上 第六个表示秒 0 ~ 59

      var date = new Date(2019, 1, 20, 1, 5, 45);
  

获取日期部分内容

• 获取年 getFullYear()

• 获取月 getMonth()

• 获取天数 getDate()

• 获取小时 getHours()

• 获取分钟 getMinutes()

• 获取秒数 getSeconds()

• 获取毫秒值 getMillionseconds()

• 获取星期几 getDay()

  注： 0 是星期天 周一到周六 1 ~ 6

• 获取从1970年1月1日0点0分0秒至日期的毫秒值 getMillions()

设置日期

• 设置年 setFullYear()
• 设置月 setMonth()
• 设置天 setDate()
• 设置小时 setHours()
• 设置分钟 setMinutes()
• 设置秒数 setSeconds()

事件

什么叫做事件

• 所谓的事件，是浏览器监听用户行为的一种机制。
• 比如，当用户使用鼠标 点击 一个按钮，会触发该按钮的 点击 事件 如果此时我们想要执行代码 就可以通过JS脚本设置 点击 事件的处理函数
• 同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件
  类似的事件还有很多

事件的分类

• 鼠标事件
  • click 点击事件
  • dblclick 双击事件
  • mousedown 鼠标按下事件
  • mouseup 鼠标抬起事件(一次click包含一次mousedown和 一次mouseup)
  • mouseover鼠标进入事件
  • mouseenter 鼠标进入事件
  • mouseout鼠标离开事件
  • mouseleave鼠标离开事件
  • mousemove鼠标移动事件
• 键盘事件
  • keydown键盘键被按下
  • keyup 键盘键被松开
  • keypress 输入
• 浏览器的事件
  • load 页面中所有资源都被加载完毕的时候
  • scroll页面的卷动
• 焦点事件
  • focus当一个元素获取到焦点时
  • blur 当一个元素失去焦点时
• 移动端事件
  • touchstart 触摸开始事件 会在手指按下的时候触发
  • touchmove 触摸并移动 会在手指按下并移动的时候触发
  • touchend 触摸结束事件 会在手指离开的时候触发
• 其它事件
  • animationstart 动画开始时触发
  • animationend 动画结束时触发
  • transitionend 过渡结束时触发

绑定事件

绑定事件的第一步 获取元素

    // HTML代码
    <button id="btn">点我试试看</button>
    // JS代码
    var btn = document.getElementById("btn");
    function click() {
        console.log("你好");
    }
    btn.onclick = click;

定时器

JS分为三部分：
ES： ECMAScript 核心语法
DOM： document Object model 文档对象模型 它纯粹是个概念 但是我们可以认为document就是DOM
BOM： browser object model 浏览器对象模型 它纯粹是个概念 但是我们可以认为window就是BOM

    BOM分为： 定时器、location、document、navigator、history、alert、confirm、isNaN、console、
    parseInt

        定时器有两个：setInterval setTimeout
        setInterval是按照时间循环执行(执行多次)
        setTimeout是按照时间循环执行(执行一次)
        setInterval(function() {
            console.log(1)
        }, 1000)

// 推迟执行
        setTimeout(function() {
            console.log(1)
        }, 1000)
        console.log(2)
        // setInterval和setTimeout属于异步代码
        // JS是单线程 单线程意味着同一时间只做一件事情·