blob: 30bec1c50fb18b8052bbd31c2ebb7ae5ec5aecc3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
---
title: 客户端 Web API
slug: Learn/JavaScript/Client-side_web_APIs
tags:
- API(应用程序编程接口)
- DOM(文档对象模型)
- JavaScript
- WebAPI(网页接口)
- 初学者
- 图形学
- 数据
- 文章
- 脚本编程
translation_of: Learn/JavaScript/Client-side_web_APIs
---
<div>{{LearnSidebar}}</div>
<p class="summary">当你给网页或者网页应用编写客户端的JavaScript时， 你很快会遇上应用程序接口（API ）—— 这些编程特性可用来操控网站所基于的浏览器与操作系统的不同方面，或是操控由其他网站或服务端传来的数据。在这个单元里，我们将一同探索什么是API，以及如何使用一些在你开发中将经常遇见的API。</p>
<h2 id="预备知识">预备知识</h2>
<p>若想深入理解这个单元的内容, 你必须能够以自己的能力较好地学完之前的几个章节 (<a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript第一步</a>, <a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript</a><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks">基础要件</a>, 和<a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript</a><a href="/zh-CN/docs/Learn/JavaScript/Objects">对象介绍</a>). 这几部分涉及到了许多简单的API的使用， 如果没有它们我们将很难做一些实际的事情。在这个教程中，我们会认为你懂得JavaScript的核心知识，而且我们将更深入地探索常见的网页API。</p>
<p>若你知道 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> 的基本知识，也会对理解这个单元的内容大有裨益。</p>
<div class="note">
<p>注意：如果你正在使用一台无法创建你自身文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如<a href="http://jsbin.com/">JSBin</a>或者<a href="https://thimble.mozilla.org/">Thimble</a>，来尝试编辑一些代码示例。</p>
</div>
<h2 id="向导">向导</h2>
<dl>
<dt><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API简介</a></dt>
<dd>首先, 我们将从一个更高的角度来看这些API —它们是什么，它们怎么起作用的，你该怎么在自己的代码中使用它们以及他们是怎么构成的？ 我们依旧会再来看一看这些API有哪些主要的种类和他们会有哪些用处。</dd>
<dt><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">操作文档</a></dt>
<dd>当你在制作WEB页面和APP时,一个你最经常想要做的事就是通过一些方法来操作WEB文档。这其中最常见的方法就是使用文档对象模型Document Object Model (DOM)，它是一系列大量使用了 {{domxref("Document")}} object的API来控制HTML和样式信息。通过这篇文章，我们来看看使用DOM方面的一些细节， 以及其他一些有趣的API能够通过一些有趣的方式改变你的环境。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a></dt>
<dd>在现代网页及其APP中另外一个很常见的任务就是与服务器进行数据交互时不再刷新整个页面，这看起来微不足道，但却对一个网页的展现和交互上起到了很大的作用，在这篇文章里，我们将阐述这个概念，然后来了解实现这个功能的技术，例如 {{domxref("XMLHttpRequest")}} 和 <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.（抓取API）。</dd>
<dt><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">第三方 API</a></dt>
<dd>到目前为止我们所涉及的API都是浏览器内置的，但并不代表所有。许多大网站如Google Maps, Twitter, Facebook, PayPal等，都提供他们的API给开发者们去使用他们的数据（比如在你的博客里展示你分享的推特内容）或者服务（如在你的网页里展示定制的谷歌地图或接入Facebook登录功能）。这篇文章介绍了浏览器API和第三方API 的差别以及一些最新的典型应用。</dd>
<dt><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">绘制图形</a></dt>
<dd>浏览器包含多种强大的图形编程工具，从可缩放矢量图形语言Scalable Vector Graphics (<a href="/zh-CN/docs/Web/SVG">SVG</a>) language，到HTML绘制元素 {{htmlelement("canvas")}} 元素(<a href="/zh-CN/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/zh-CN/docs/Web/API/WebGL_API">WebGL</a>). 这篇文章提供了部分canvas的简介，以及让你更深入学习的资源。</dd>
<dt><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">视频和音频 API</a></dt>
<dd>HTML5能够通过元素标签嵌入富媒体——{{htmlelement("video")}} and {{htmlelement("audio")}}——而将有自己的API来控制回放，搜索等功能。本文向您展示了如何创建自定义播放控制等常见的任务。</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">客户端存储</a></dt>
<dd>现代web浏览器拥有很多不同的技术，能够让你存储与网站相关的数据，并在需要时调用它们，能够让你长期保存数据、保存离线网站及其他实现其他功能。本文解释了这些功能的基本原理。</dd>
</dl>
|
