Web APIs与Js基础关联性

浅浅的花香味﹌ 2023-02-21 09:08 5阅读 0赞

# Ⅰ- 壹 - Js组成 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

# Ⅱ - 贰 -JS基础阶段以及Web APIs 阶段 #

## 一 JS基础阶段 ##

*  我们学习的是 ECMAScript标准规定的基本语法
 *  要求同学们掌握 Js基础语法
 *  只学习基本语法, 做不了常用的网页交互效果
 *  目的是为了JS后面的课程打基础、做铺垫

## 二 Web APIs阶段 ##

*  web APIs是w3c组织的标准
 *  Web APIs我们主要学习DOM和BOM
 *  web APIs是我们JS所独有的部分
 *  我们主要学习页面交互功能
 *  需要使用 JS基础的课程内容做基础

## Web APIs与Js基础关联性 ##

**JS基础学习ECMAScript基础语法为后面作铺垫，Web APIs是JS的应用,大量使用JS基础语法做交互效果**

MDN详细API:https://developer.mozilla.org/zh-CN/docs/Web/API

# API和Web API #

## 一 API ##

**API ( Application Programming Interface** 应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无雾访问源码或理解内部工作机制的细节。  
**简单理解:** API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

## 二 Web API ##

**Web API**是浏览器提供的一套操作**浏览器功能**和**页面元素**的 API( BOM和DOM)。  
现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。

## 总结 ##

1.  API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
2.  Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
3.  Web API -般都有输入和输出(函数的传参和返回值) , Web API很多都是方法(函数)
4.  学习Web API可以结合前面学习内置对象方法的思路学习

# Ⅲ - 叁 - BOM和DOM #

## 一 BOM和DOM简介 ##

**BOM**：Browser Object Model 浏览器对象模型。  
**DOM**：Document Object Model 文档对象模型

1.  任何文件都需要使用特定的方式打开
2.  虚拟机，任何语言编辑的程序都需要一个虚拟机来执行.如果脱离这个环境就不能运行,运行时 在运行过程中不断处理程序 runtime
3.  同一款浏览器在不同的系统中，属性值是不同的
4.  在同一个系统中，不同的浏览器，属性都有不同
5.  BOM是有兼容问题，DOM也是有兼容问题的
6.  ECMAScript这个是属于各浏览器完全兼容的，只不过版本过低的浏览器不支持ES6以上
7.  *树型结构*  
    BOM的根是window  
    DOM的根是Document
8.  浏览器引擎影响速度，V8引擎，
9.  window是BOM的一个属性

## 二 BOM和DOM的区别 ##

> 1.      BOM是Browser Object Model的缩写，即浏览器对象模型。
> 2.      BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
> 3.      BOM的最根本对象是window。 DOM
> 4.      DOM是Document Object Model的缩写，即文档对象模型。
> 5.      DOM是W3C的标准。
> 6.      DOM最根本对象是document（实际上是window.document）。
> 7.      DOM的最根本的对象是BOM的window对象的子对象。
> 8.      BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

# 0 - 0 - 知识点： #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629194957945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70