【Web APIs】Web APIs 简介 ( JavaScript 组成 | Web APIs 概念 | DOM 文档对象模型 | BOM 浏览器对象模型 | MDN 参考文档 )

一、Web APIs 简介

1、JavaScript 组成

JavaScript 组成 :

• ECMAScript 基础语法 : 提供了 变量、数据类型、运算符、控制结构、函数 等 基本编程语法功能 , 这是 JavaScript 的基础 ;
• DOM 文档对象模型 : 全称 Document Object Model , 提供了对 HTML 和 XML 文档的 表示 和 修改能力 ;
• BOM 浏览器对象模型 : 全称 Browser Object Model , 提供了与 浏览器窗口 及其组件 进行交互的对象和方法 , 如 : 显示导航栏、查看历史记录、弹出窗口、关闭窗口、设置窗口大小 等 ;

2、Web APIs 引入

之前仅学习了 JavaScript 的 ECMAScript 基础语法 , 只能在控制台打印日志 , 输出代码计算结果 , 无法与网页和浏览器进行交互 ,

从本篇博客开始 , 学习 DOM 文档对象模型 和 BOM 浏览器对象模型 , 就可以实现 网页 / 浏览器 的 交互效果 ;

DOM 文档对象模型 和 BOM 浏览器对象模型 又称为 " Web APIs " , 是 W3C 标准 ;

3、Web APIs 概念

API , 全称 " Application Programming Interface " , 应用程序编程接口 , 是 语言厂商 或 SDK 厂商 预先定义一些接口函数 , 提供给开发者调用该函数 用以 开发 应用程序 , 开发者可以很轻松的实现某种功能 , 开发者无需访问源码 或 理解内部细节 ;

Web APIs 全称 " Web Application Programming Interfaces " , 网络应用程序编程接口 ;

Web APIs , 是 W3C 组织 提出的 标准 , 提供了一套 操作浏览器功能 和 页面元素 的接口 , 其中就定义了两个重要的对象模型 :

• DOM 文档对象模型 Document Object Model : JavaScript 靠 DOM 操作页面元素 ;
• BOM 浏览器对象模型 Browser Object Model : JavaScript 靠 BOM 操作浏览器功能 ;

让浏览器弹出对话框 , 直接调用 JavaScript 中的 alert 函数即可 , 不需要操作创建窗口、设置窗口大小 、设置窗口文本、以及控制窗口显示 等细节 , 这就是 BOM 浏览器对象模型 提供的 Web APIs 接口 ;

4、Web APIs 参考文档

MDN 官方 Web APIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API

5、常见的 Web APIs 功能

常见的 Web APIs 功能 :

• DOM : 操作网页内容 , 如 : 对元素进行增删改查、修改元素样式 等 ;
• BOM : 操作浏览器功能 , 如 : 弹出新窗口、获取浏览器信息 等 ;
• Fetch : 通过 HTTP 请求访问网络资源 ;
• Canvas : 实现网页绘图和动画功能 ;
• Web Audio : 网页上播放音频 ;
• WebSocket : 建立 服务器 与 客户端 的持久通信 ;