Web API的第六天

Web API的第六天

一、window

window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的。

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

属性

navigator

navigator 的数据类型是对象，该对象下记录了浏览器自身的相关信息。
判断一个元素是否在数组中？
如果元素在数组中，返回的是数字元素的下标，如果不在，返回-1

需求： 判断不同平台打开同一个页面 有不同的欢迎词

总结：

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

history

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
window.history 值是个对象 包括浏览器页面历史记录对象 方法：定义页面按钮 类似浏览器返回和前进

总结：

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

location

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

案例：点击按钮后，p标签倒计时显示 5 4 3 2 1然后转跳页面
css样式


总结：

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

screen

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

方法

alert

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

comfirm

用户点击确定返回值为 true ，点击取消返回值为 false 。

prompt

需求 点击按钮 弹窗询问客户是否需要跳转页面？

事件

load

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

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

beforeunload

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

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

resize

该事件会在浏览器窗口大小调整时被触发。

总结：

1. 在窗口变化监听的过程中能实时获取视口的大小
   注：基于 resize 可以动态计算 html 的字号大小，完成移动端屏幕适配

base64把图片转化为字符串

    **配合后台   减少请求   提高用户体验**
    语法  如何把图片转化为base64字符串

1.js角度 获取选择某个文件得到对象
事件 change 当input 状态改变

二、DOM

本地文件

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

input

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

1. files 是一个 File 类型的对象列表，它包含了文件的大小、名称、格式等信息
2. multiple 属性允许用户同时选择多个文件
3. FileReader 专门用于文件读取，通过监听 load 事件获取读取结果
4. 以图片文件为例，本地文件读取可以实现图片预览的功能
5. 浏览器可以将 base64 编码图片直接解析，开发中经常用到

drag

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


总结：

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