Web APIs-day6

Web APIs-day6

回顾

scroll:
1. 滚动一定程度，出现返回按钮
2. 点击返回按钮、返回顶部
3. 判断盒子什么时候到底
加载：
- window.load:全部资源：外联文件资源;DOM结构渲染在页面
- img load:获取图片宽度灯，等待其加载才能获取

延迟函数：

setTimeout(fn,1000)
//延迟函数+递归写法  达到  永久性定时器的效果；
 stepl为了写动画！setp1;
//requestAnimationFrame（）+递归写法step2不需要自己设置事件，根据你屏幕自动【弊端：要求兼容性】

依托 BOM 对象实现对历史、地址、屏幕、浏览器信息的操作或获取，能够读取本地文件并能够
在网页中预览本地图片，进而提升实践能力。

能够读取本地文件的信息
知道图片使用base64编码的有优势

window

学习window对象的属性、方法以及事件监听，理解window在javaScript中的作用，知道各个BOM对象的功能含义。

如上图所示 window对象下包含了 navigator 、location 、document 、history、 screen 5个属
性，即所谓的 BOM （浏览器对象模型）。
document是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window对象的所有属性和方法，使用时可以省略 window ，然而由于这些属性名和方法
并并非全部为关键字，因此有可能会被声明的同名变量所覆盖。

属性s

navigator

navigator 的数据类型是对象，该对象下记录了浏览器自身的相关信息。

<script>
  // 通过 userAgent 检测浏览器的版本及平台
  let userAgent = navigator.userAgent;
  // 正则查找设备类型是否为手机
  let isMobile = /iPhone|Android/;
  console.log(isMobile.test(userAgent));
  // 正则查找是浏览器名称
  let isie = /MSIE/;
  console.log(isie.test(userAgent));
//-------------------------分割线--------------------------------------
//navigator: 值是对象, 打印当前页面使用浏览器平台一些信息;
//需求:判断不同平台打开同一个页面,有不同欢迎词;
      let info = navigator.userAgent;
      console.log(info);
      let res1 = info.indexOf("Android")
      if (res1 != -1) {
          alert("欢迎安卓手机用户！")
      }
      let res2 = info.indexOf("iPhone")
      if (res2 != -1) {
          alert("欢迎苹果手机用户！")
      }
</script>

总结：
1. navigator对象下包含有许多信息，如 platform、userAgent
2. onLine属性检测当前是否处理联网状态
3. geolocation 属性可以获取用户所在经纬度位置
注：中很多的信息中有许多并不准确。如appName、appCodeName等

history

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

<a href="./01-navigator.html">去01-location页面</a>
<button class="back">返回</button>
  <button class="forward">前进</button>
  <script>
      //window.history:值是个对象，包括浏览器页面历史记录对象 ；方法：定义页面按钮，模拟浏览器  返回和前进
      //场景：一般都在移动端！
      // 获取操作按钮
      let back = document.querySelector(".back")
      let forward = document.querySelector(".forward")
      //返回        按钮添加事件监听
      back.addEventListener("click", function () {
          history.back();
      })
      //前进         按钮添加事件监听
      forward.addEventListener("click", function () {
          history.forward();
      })
</script>

总结：
1. length 属性记录了与当前页页相关的页面的数量
2. back方法跳转至上一个链接地址对应的页面，与浏览器的后退操作一致
3. forward方法跳转至下一个连接地址对应的页面，与浏览器的前端操作一致
4. go方法跳转到历史记录中任一链接地址对应的页面，参数可以正数也可以是负数

location

location的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。
URL 即我们平时所说的链接地址，它有着固定的格式如下图所示：协议、主机、端口、路径、参数、哈希。

    <button class="jumper">学 IT 来传智</button>
    <button class="refresh">刷新</button>
<script>
    //以前  HTML a标签
        //现在：JS  location:地址  属性值  是对象
        // href:设置一个地址
        let jumper = document.querySelector(".jumper")
        jumper.addEventListener("click", function () {
            //通过 location.href  获取地址 
            location.href = "https://www.baidu.com"   //设置新的地址
        })
        let refresh = document.querySelector(".refresh")
        refresh.addEventListener("click", function () {
            //reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新  
            location.reload(true)  //模拟刷新动作
        })
</script>

总结：
1. href属性获取完整的 URL 地址，对其赋值时用于地址的跳转
2. search 属性获取地址中携带的参数，符号？后面部分
3. hash属性获取地址中的啥希值，符号 # 后面部分
4. reload方法用来刷新当前页面，传入参数 true时表示强制刷新

案例-location显示倒计时

<body>
    <h3>案例：点击按钮后，标签倒数计时 5 4 3 2 1s 然后跳转到新的页面</h3>
    <button>点击我</button>
    <p>唱跳rap我样样行，菜👎</p>
    <script>
        //1.获取DOM节点
        let btn = document.querySelector("button")
        let p = document.querySelector("p")
        //2.添加事件
        btn.addEventListener("click", function () {
            //3.p文字内容发生改变 innerText
            let num = 5   //设置倒计时5s
            p.innerText = `还有${num}秒后就页面跳转，网易云👉`;
            let times = setInterval(function () {
                num--
                p.innerText = `还有${num}秒后就页面跳转，网易云👉`
                if (num == 0) {
                    clearInterval(times)
                    location.href = "https://music.163.com/";
                }
            }, 1000);
        })
    </script>
</body>

screen

screen 属性的数据类型是对象，它记录用户电脑屏幕的相关参数，如宽度、高度等。
总结：该对象的使用场景并不多。

方法

window 下也提供了几个方法可供使用：

 //方法: window上方法:
        // 效果, 弹面、样式完全是由浏览器, 改不了样式;
        //     弹出来，算代码执行到一半（会阻止下面代码继续执行）用户需要点击确定，才能继续执行
        // 落地，简单测试使用。工作中是绝对不用!
//提醒弹窗
        alert('129 hi')
//确认弹窗
       let key = confirm('您确认退出吗？')
       console.log(key);
//输入弹窗
        let str = prompt('请输入密码')
       console.log(str);

总结：警告提示框会阻程序继续执行，直到用户点击确认后

alert

<h3>window 方法</h3>
<button class="alert">警告提示</button>
<script>
// 获取操作所需的按钮元素
let alertBtn = document.querySelector('.alert');
alertBtn.addEventListener('click', function () {
alert('警告：上课不允许睡觉！');
})
</script>

总结：警告提示框会阻程序继续执行，直到用户点击确认后。

comfirm

<body>
<h3>window 方法</h3>
<button class="confirm">确认提示</button>
<script>
    // 获取操作所需的按钮元素
    let confirmBtn = document.querySelector('.confirm');
    confirmBtn.addEventListener('click', function () {
    let result = confirm('确定要删除吗？');
})
</script>
</body>

总结：用户点击确定返回值为true ，点击取消返回值为 false

案例-询问客户跳转案例

<button class="confirm">确认提示</button>
    <script>
        let btn = document.querySelector('.confirm')
        btn.addEventListener('click', function () {
            let result = confirm('你确认要删除吗？')
            if (result == true) {
                location.href = "https://music.163.com/"
            } else {
                false
            }
        })
    </script>

prompt

<body>
<h3>window 方法</h3>
<button class="prompt">输入提示</button>
<script>
// 获取操作所需的按钮元素
let promptBtn = document.querySelector('.prompt');
promptBtn.addEventListener('click', function () {
prompt('请输入您的用户名：', '小明');
});
</script>
</body>

总结：传入第 2 个参数可以充当默认值。
注：这些方法常用于开发阶段的简单调试，正式环境中很少使用！

事件

load

该事件会在网页图片、样式、音频、视频等资源加载完毕是触发

 <img src="./01.jpg" alt="">
    <script>
        window.addEventListener('load', function () {
            console.log('页面资源加载完毕了...');
        })
        console.log('代码至少执行到这里后才会去触发 load 事件...');
    </script>

总结：
1. load会等待所有的资源（图片、样式、脚本、音视频等）加载完毕后才触发
2. DOMContentLoaded只要 HTML 结构加载完毕就会被触发，该事件通过 document 进行监听
3. 将 script标签写在 head标签中时，查找 DOM会失败

beforeunload

该事件会在即将离开当前页面时被触发。

<a href="http://baidu.com">百度一下</a>
  <script>
      window.addEventListener('beforeunload', function (ev) {
          ev.returnValue = '';
          // return '';
      })
  </script>

总结：
1. beforeunload事件在关闭页面、跳转新页面、刷新当前页面时触发
2. 该事件常用于提示用户即将离开当前页面
3. 出于安全考虑不允许自定义提示信息

resize

//size大小
        //resize:事件，监听浏览器大小发生改变的
        window.addEventListener("resize", function () {
            //移动端口：rem布局   等比列缩放 Bootstrap:三端适配（移动  平板  pc）
            //css媒体查询    范围划分不够细
            //flexble.js   让页面元素连续变换！
            console.log('浏览器窗口大小正在发生改变...');
            console.log(document.documentElement.clientWidth);
        })

该事件会在浏览器窗口大小调整时被触发
总结：
1. 在窗口变化监听的过程中能实时获取视口的大小

注：基于resize可以动态计算 html的字号大小，完成移动端屏幕适配

DOM

进一步学习 DOM 相关知识，基于浏览器开放的能力读取本地文件，体会 Web APIs 的含义，提升实践的水平。

本地文件

出于安全性考虑 JavaScript 无法直接读取用户本地的文件，必须由用户主动选择才能对本地文件进行读
取，有两种方式引导用户做出选择：<input type="file"> 和文件拖拽。

input

用户使用 input 标签选择本地文件，然后对文件进行读取

 <input type="file" id="file">
     //语法:如何把图片转化为base64字符串
    //万物:00]函数dom用户行为 window文件
        // 0.<input type="file" id="file">
        // 1.  Js角度, 获取选择某个文件得到对象; 
        //       事件change当input状态改变
        let ipt = document.querySelector("#file")
        ipt.addEventListener("change", function () {
            let obj = this.files[0] //文件对象
            //2.使用特别语法转换为base64字符串（不常用，干活，建议收藏）
            //   2.1得到工具：文件读取器
            let reader = new FileReader();
            //  2.2把文件读成一个串，字符串
            reader.readAsDataURL(obj);
            //  2.3获取读取的结果
            reader.addEventListener("load", function () {
                // 以图片为例，实现图片预览功能
                let preview = document.createElement('img')
                preview.src = reader.result;
                document.body.appendChild(preview)
            })
        })

总结：

files是一个 File 类型的对象列表，它包含了文件的大小、名称、格式等信息
multiple属性允许用户同时选择多个文件
FileReader专门用于文件读取，通过监听 load 事件获取读取结果
以图片文件为例，本地文件读取可以实现图片预览的功能

浏览器可以将 base64编码图片直接解析，开发中经常用到

<input type="file" id="file">
<img src="#" alt="">
//2.使用特别语法转换为base64字符串（不常用，干活，建议收藏）
//   2.1得到工具：文件读取器
ipt.addEventListener("change", function () {
let obj = this.files[0]
let reader = new FileReader();
//  2.2把文件读成一个串，字符串
reader.readAsDataURL(obj);
//  2.3获取读取的结果
reader.addEventListener("load", function () {
img.src = reader.result; 
})

drag

用户将文件直接拖拽至网页中的某个标签中，然后对文件进行读取

<div class="uploader"></div>
    <a href="http://www.baidu.com">baidu</a>
<script>
 // prevent 阻止
 // Default 默认行为;    
 // drag: 拖拽  移入
        let div = document.querySelector(".uploader");
        div.addEventListener("dragover", function (e) {
            e.preventDefault();
        });
        // drop：投放，拖拽松开鼠标
        div.addEventListener('drop', function (e) {
            // 1. 获取刚才拖入这个图片文件对象
            let obj = e.dataTransfer.files[0];
           // 2. 用干货知识转化为base64字符串
            let reader = new FileReader();
            reader.readAsDataURL(obj);
            // 3. 获取读取到结果,设置相应属性
            reader.addEventListener("load", function () {
                div.style.background = `url(${reader.result}) no-repeat`;
            });
            e.preventDefault();
        });
    </script>

总结：
1. 用户拖动文件至监听了 dragover 事件的元素之上时，dragover事件就会被触发
2. 用户拖动文件至监听了 drop事件的元素之上然后松开拖拽文件时，drop事件就会被触发
3. 事件对象dataTransfer.files是 File 类型对象，包含了文件的大小、名称、格式等信息
4. 通过 FileReader实现文件的进行读取

Web 前端资料

4.10-day6-webAPI-window