const声明的简单变量 值不能再改变！但是复杂变量可以，数组和对象，他们的名字和地址没变，可以改变地址里面存的属性！

DOM

一、第一天

1、Web API 基本认知

2、获取DOM元素

3、操作元素内容

4、操作元素属性

5、定时器-间歇函数

6、综合案例

二、第二天

1、事件监听

随机点名案例

2、事件类型

3、事件对象

‘trim’方法：去除字符串左右两边的空格，不能去除字符串中间的空格

4、环境对象

5、回调函数

6、综合案例

三、第三天 Dom事件进阶

1、事件流

2、事件委托

3、其他事件

4、元素尺寸与位置

5、综合案例

让滚动条丝滑滚动

属性选择器

四、第四天 日期对象

1、实例化

获取日期时间的第二种方法

2、节点操作

对标签的增删改查

重点！！-增加节点

3、M端事件

4、JS插件

下载后打开文件中的package文件，选择里面的js和css文件，复制到项目代码文件中去

然后使用插件的话，有网情况：记住要下载的样式序号

无网情况：在下载好的swiper文件夹中找到demo文件，直接选择里面的相应样式序号

在新窗口打开，右键查看源代码，复制到网页代码对应的模块中 总结： （1）下载swiper文件，找到package里面的css和js文件，分别复制到网页代码文件中
（2）在swiper网站查看基础演示，选择需要的样式，点击“在新窗口打开”，右键查看源代码，分别复制style,body,script内容到网页代码对应的模块中
（3）在网页代码中引入css和js文件

直接复制相应的代码到网页代码中即可

5、综合案例

BOM

五、第五天

1、Window对象

检测 userAgent（浏览器信息），检测是不是移动端，移动端就跳转---固定代码块 放在head中的script中

    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })();

function函数两种写法

    (function(){})();
    !function(){}()

2、本地存储（重点）

JSON对象：属性和值都有引号，并且引号都是双引号
{"uname":"pink老师","age":18,"gender":"女"}

数组map和数组join使用方法

3、综合案例

确认框：确认是否要删除。。。

        if(confirm('您确认要删除这条数据吗？')){
          ...
          }

六、第六天

1、正则表达式

change事件

blur事件：失去焦点(光标)触发
change事件：文本框内容发生变化触发

innerText：输入纯文本
innerHTML：使用${}填充

2、综合案例

4,5同上

3、阶段案例

h5新增属性

"required"：表单空的，不能提交
好处：不用写js表单验证

4、综合案例-放大镜效果

  <script>
    // 1.获取盒子
    // 小盒子
    const small = document.querySelector('.small')
    // 中盒子
    const middle = document.querySelector('.middle')
    // 大盒子
    const large = document.querySelector('.large')
    // 2.鼠标经过小盒子，中盒子显示对应图片
    // 2.1事件委托，小盒子监听事件——事件冒泡触发small
    small.addEventListener('mouseover', function (e) {
      // console.log(11)
      // 标签名要大写——只有鼠标经过小盒子图片，才触发small事件
      if (e.target.tagName === 'IMG') {
        // console.log(11)
        // 2.2排他思想——鼠标经过li，添加类，其余移除类
        // 移除
        small.querySelector('.active').classList.remove('active')
        // 添加,给li添加类，也就是IMG（当前元素）的爸爸添加类
        e.target.parentNode.classList.add('active')
        // 2.3 鼠标经过小图片，拿到小图片的地址(src)
        // console.log(e.target.src)
        // 中等图片的地址src换成当前小图片的src
        middle.querySelector('img').src = e.target.src
        // 大盒子的背景图片，换成小盒子图片地址（模板字符串）
        large.style.backgroundImage = `url(${e.target.src})`
      }

      // 3.鼠标经过中盒子，大盒子显示 ，封装到函数里
      // 鼠标经过显示
      middle.addEventListener('mouseenter', show)
      // 鼠标离开隐藏
      middle.addEventListener('mouseleave', hide)
      let timeId = 0
      function show() {
        // 解决bug:鼠标经过先清除定时器
        clearTimeout(timeId)
        large.style.display = 'block'
      }
      function hide() {
        timeId = setTimeout(function () {
          large.style.display = 'none'
        }, 200)
      }

      // 4.鼠标经过大盒子,大盒子显示隐藏 ，封装到函数里
      // 鼠标经过显示
      large.addEventListener('mouseenter', show)
      // 鼠标离开隐藏
      large.addEventListener('mouseleave', hide)


      // 5.鼠标经过中等盒子，显示隐藏黑色遮罩
      const layer = document.querySelector('.layer')
      middle.addEventListener('mouseenter', function () {
        layer.style.display = 'block'
      })
      middle.addEventListener('mouseleave', function () {
        layer.style.display = 'none'
      })

      // 6.黑色遮罩盒子跟着鼠标移动
      middle.addEventListener('mousemove', function (e) {
        // 6.1获取鼠标在页面中的坐标值
        // console.log(e.pageX)
        // console.log(e.pageY)
        // 6.2获取中等盒子在页面中的坐标
        // console.log(middle.getBoundingClientRect().left)
        // console.log(middle.getBoundingClientRect().top)
        // 6.3鼠标在中等盒子中的坐标
        let x = e.pageX - middle.getBoundingClientRect().left
        // y=鼠标在中等盒子中距离页面视口顶部的距离-滚动条滚动的距离
        let y = e.pageY - middle.getBoundingClientRect().top-document.documentElement.scrollTop
        // console.log(x,y)

        // 6.4把鼠标在中等盒子中的坐标给遮罩层的left,top属性
        // layer.style.left = x + 'px'
        // layer.style.top = y + 'px'
        // 黑色遮罩层在中等盒子内部移动
        if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
          // 声明2个变量mx,my控制黑色遮罩的移动距离
          let mx = 0, my = 0
          if (x < 100) mx = 0
          if (x >= 100 && x <= 300) mx = x - 100
          if (x > 300) mx = 200

          if (y < 100) my = 0
          if (y >= 100 && y <= 300) my = y - 100
          if (y > 300) my = 200
          layer.style.left = mx + 'px'
          layer.style.top = my + 'px'

          // 6.5 大盒子内图片的背景图是中等盒子的2倍
          // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍
          // 遮罩层往右边走，大盒子的背景图片往左边走
          large.style.backgroundPositionX = -2 * mx + 'px'
          large.style.backgroundPositionY = -2 * my + 'px'
        }
      })
    })
  </script>

getBoundingClientRect() 获取的是距离页面视口的距离，页面滚动距离会变；但是不受定位的影响
offSetTop()获取的是距离页面顶端的距离，页面滚动距离不会变；但是受定位的影响