path: root/files/es/learn/javascript/client-side_web_apis/introduction/index.html

---
title: Introducción a las APIs web
slug: Learn/JavaScript/Client-side_web_APIs/Introduction
translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
original_slug: Learn/JavaScript/Client-side_web_APIs/Introducción
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>

<p class="summary">En primer lugar empezaremos echando un vistazo a las APIS desde un nivel superior — ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?. También echaremos un vistazo a cuáles son los principales tipos de APIs, y para qué se usan.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pre requisitos:</th>
   <td>Conocimientos básicos de informática, principios básicos de <a href="/es/docs/Learn/HTML">HTML</a>, <a href="/es/docs/Learn/CSS">CSS</a> y JavaScript (ver <a href="/es/docs/Learn/JavaScript/First_steps">primeros pasos</a>, <a href="/es/docs/Learn/JavaScript/Building_blocks">bloques de construcción</a>, <a href="/es/docs/Learn/JavaScript/Objects">objetos JavaScript</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Familiarizarse con las APIs, saber qué pueden hacer y cómo usarlas en tu código.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_son_las_APIs">¿Qué son las APIs?</h2>

<p>Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.</p>

<p>Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, dificil y peligroso.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p>

<p><em>Fuente de la imagen: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> por <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, en Flickr.</em></p>

<p>De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.</p>

<div class="note">
<p><strong>Nota</strong>: Consulta también la <a href="/es/docs/Glossary/API">entrada API en el glosario</a> para una descripción más detallada.</p>
</div>

<h3 id="APIs_en_JavaScript_del_lado_cliente">APIs en JavaScript del lado cliente</h3>

<p>JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas <span id="result_box" lang="es"><span>no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código.</span> <span>Por lo general, se dividen en dos categorías:</span></span></p>

<ul>
 <li><span id="result_box" lang="es"><span><strong>Las APIs de navegador</strong> están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él.</span> <span>Por ejemplo, la API de Geolocalización proporciona algunas construcciones simples de JavaScript para obtener datos de ubicación con los que, por ejemplo, trazar tu ubicación en un mapa de Google.</span> Realmente, el navegador está haciendo uso<span> de códigos de bajo nivel complejos en segundo plano (por ejemplo, C++) para comunicarse con el hardware GPS del dispositivo (o lo que esté disponible para determinar los datos de posición), recuperar datos de posición y devolverlos al entorno del navegador para su uso</span> <span>en tu código.</span> <span>Pero una vez más, la API se encarga de abstraer esta complejidad.</span></span></li>
 <li><strong>Las APIs de terceros </strong>no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, <a href="https://dev.twitter.com/overview/documentation">la API de Twitter</a> permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>

<h3 id="Relacion_entre_JavaScript_APIs_y_otras_herramientas_de_JavaScript">Relacion entre JavaScript, APIs, y otras herramientas de JavaScript</h3>

<p><span id="result_box" lang="es"><span>Anteriormente hablamos sobre qué son las APIs de JavaScript del lado cliente y cómo se relacionan con este lenguaje.</span> <span>Recapitulemos ahora para dejarlo claro, y veamos también dónde encajan otras herramientas de JavaScript:</span></span></p>

<ul>
 <li>JavaScript — Un lenguaje de scripts de alto nivel incorporado en los navegadores que permite implementar interactividad en páginas web / apps. <span id="result_box" lang="es"><span>Ten en cuenta que JavaScript también está disponible en otros entornos de programación, como <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>.</span></span></li>
 <li>APIs de navegador — Construcciones integradas en el navegador creadas con el lenguaje JavaScript y que permiten implementar funcionalidad mucho más fácilmente.</li>
 <li>APIs de terceros — <span id="result_box" lang="es"><span>Construcciones integradas en plataformas de terceros (por ejemplo Twitter, Facebook) que permiten usar algunas de las funcionalidades de esa plataforma en tus páginas web (como por ejemplo mostrar tus últimos Tweets en tu página web).</span></span></li>
 <li>Librerías JavaScript — Por lo general uno o más archivos JavaScript que contienen <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">funciones personalizadas</a> que puedes añadir a tu página web para acelerar o habilitar la escritura de funcionalidades comunes. Por ejemplo jQuery, Mootools y React.</li>
 <li>Frameworks JavaScript — <span id="result_box" lang="es"><span>El siguiente paso a las librerías, los frameworks JavaScript (como Angular y Ember) suelen ser paquetes de HTML, CSS, JavaScript y otras tecnologías que se instalan y luego se usan para escribir una aplicación web completa desde cero.</span> <span>La diferencia clave entre una librería y un framework es la "Inversión del control".</span> <span>Cuando se llama a un método desde una librería, el desarrollador tiene el control.</span> <span>Con un framework el control se invierte: el framework llama al código del desarrollador.</span></span></li>
</ul>

<h2 id="¿Qué_pueden_hacer_las_APIs"><span class="short_text" id="result_box" lang="es"><span>¿Qué pueden hacer las APIs?</span></span></h2>

<p><span id="result_box" lang="es"><span>Hay una gran cantidad de APIs disponibles en los navegadores modernos que te permiten hacer una gran variedad de cosas en tu código.</span> <span>Puedes verlo echando un vistazo al</span></span> <a href="https://developer.mozilla.org/es/docs/Web/API">índice de APIs de MDN</a>.</p>

<h3 id="APIs_de_navegador_más_comunes">APIs de navegador más comunes</h3>

<p><span id="result_box" lang="es"><span>En particular, las categorías más comunes de APIs de navegador más usadas (y que trataremos con mayor detalle en este módulo) son:</span></span></p>

<ul>
 <li><strong>APIs para manipular documentos</strong> cargados en el navegador. El ejemplo más obvio es la <a href="https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a>, que permite manipular HTML y CSS — crear, eliminar y modificar HTML, aplicar estilos dinámicos a una página, etc. Cada vez que se muestra una ventana emergente en una página, o un nuevo contenido, por ejemplo, es el DOM en acción. Más información sobre este tipo de APIs en <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a>.</li>
 <li><strong>APIs que obtienen datos del servidor,</strong> comunmente usadas para actualizar pequeñas secciones de una página web. Este aparente pequeño detalle tiene un gran impacto en el performance y en el comportamiento de los sitios. — Sí solo necesitas actualizar un Stock de artículos o una lista de tiendas disponibles, al utilizar APIs para obtener datos desde el servidor lo lograrás sin tener que volver a cargar toda la página o aplicación logrando que estas tengan una sensación de rapidez y agilidad. Las APIs hacen esto posible gracias a que incluyen <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> y la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Tambièn puede encontrar el termino Ajax que describe esta técnica. Más información sobre este tipo de APIs en <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>.</li>
 <li><strong>Las APIs para dibujar y manipular graficos</strong> ya son soportadas por la mayoría de navegadores. Las más populares son <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> y <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, que permiten actualizar la información de cada uno de los píxeles contenidos en un {{htmlelement("canvas")}} HTML, para crear escenas 2D y 3D. Por ejemplo, se pueden dibujar formas como rectángulos o círculos, importar una imagen en el canvas y aplicarle filtros como sepia o escala de grises usando la API de Canvas, o crear una escena compleja 3D con iluminación y texturas usando WebGL. Estas APIs, a menudo se combinan con apis para crear bucles de animación (como {{domxref("window.requestAnimationFrame()")}}) y otras veces para hacer que se actualicen constantemente escenas de dibujos animados o videojuegos.</li>
 <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">APIS de audio y vídeo</a></strong> como {{domxref("HTMLMediaElement")}}, la <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, y <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> te permitirán hacer cosas realmente interesantes con elementos multimedia: crear una interfaz personalizada para los controles de reproducción de audio y vídeo, mostrar pistas de texto con subtítulos junto con el vídeo, capturar vídeo de la cámara web para ser manipulado en un canvas (ver más arriba) o mostrado en el ordenador de otra persona en una videoconferencia, añadir efectos a las pistas de audio (como ganancia, distorsión, retardo, etc).</li>
 <li><strong>Las APIs de dispositivos</strong> son básicamente APIs para manipular y recuperar información de dispositivos modernos de hardware de forma que sean útiles para aplicaciones web. Ya hemos hablado de la API de geolocalización, que accede a la información de ubicación del dispositivo, de forma que te pueda localizar en un mapa. Otros ejemplos incluyen indicar al usuario de que una actulización útil está disponible en una aplicación web mediante notificaciones de sistema (ver <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>) o la vibración de hardware (ver <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li>
 <li>Las <strong>APIS de almacenamiento en el lado del cliente</strong> se están popularizando en los navegadores. La habilidad de almacenar información en el lado del cliente es muy útil para hacer aplicaciones que salven su estado entre carga de páginas, e incluso trabajar cuando el dispositivo está fuera de línea. Hay varias opciones disponibles, por ejemplo el almacenamiento en pares de clave/valor con <a href="/en-US/docs/Web/API/Web_Storage_API" style="font-size: 1rem; letter-spacing: -0.00278rem;">Web Storage API</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, y una forma más compleja de almacenar datos tabulados mediante la </span><a href="/en-US/docs/Web/API/IndexedDB_API" style="font-size: 1rem; letter-spacing: -0.00278rem;">IndexedDB API</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></li>
</ul>

<h3 id="APIs_populares_de_terceros">APIs populares de terceros</h3>

<p>Existe una gran variedad de APIs de terceros, algunas de las más populares de las que querrás hacer uso en algún momento son:</p>

<ul>
 <li>La <a href="https://dev.twitter.com/overview/documentation">API de Twitter</a>, que te permite hacer cosas como mostrar tus ultimos tweets en tu sitio web.</li>
 <li>La <a href="https://developers.google.com/maps/">API de Google Maps</a> permite hacer todo tipo de cosas con mapas en tus páginas web (incluso hace funcionar Google Maps). Actualmente, existe todo un conjunto de apis que te permiten realizar una gran variedad de tareas, como se puede ver en <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li>
 <li>El <a href="https://developers.facebook.com/docs/">conjunto de APIs de Facebook</a> te permite usar partes del ecosistema de facebook para mejorar tu aplicación, por ejemplo aportando la posiblidad de identificación mediante el login de Facebook, aceptar pagos en la aplicación, desplegar campañas de anuncios para un target concreto, etc.</li>
 <li>La <a href="https://developers.google.com/youtube/">YouTube API</a>, te permite integrar videos de Youtube en tu sitio, buscar en Youtube, construir listas de reproducción y más.</li>
 <li>La <a href="https://www.twilio.com/">Twilio API</a>, provee de un framework para crear la funcionalidad de llamadas y videollamadas en tus aplicaciones, enviar SMS o MMS y más.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: puedes encontrar información de una gran cantidad de APIs de terceros en el <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p>
</div>

<h2 id="¿Cómo_funcionan_las_APIs">¿Cómo funcionan las APIs?</h2>

<p>Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan.</p>

<h3 id="Están_basadas_en_objetos">Están basadas en objetos</h3>

<p>Las APIs interactúan con tu código usando uno o más <a href="/en-US/docs/Learn/JavaScript/Objects">Objetos JavaScript,</a> que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).</p>

<div class="note">
<p><strong>Nota</strong>: si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de <a href="/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript </a>antes de seguir.</p>
</div>

<p>Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:</p>

<ul>
 <li>{{domxref("Geolocation")}}, que contiene tres métodos para controlar la recuperación de los datos geográficos.</li>
 <li>{{domxref("Position")}}, que representa la posición de un dispositivo en un momento dado — esto contiene un objeto {{domxref("Coordinates")}} que contiene la información de la posición actual, además de una marca de tiempo con el momento exacto.</li>
 <li>{{domxref("Coordinates")}}, que contiene una gran cantidad de datos útiles sobre la posición del dispositivo, incluyendo latitud y longitud, altitud, velocidad, dirección de movimiento y más.</li>
</ul>

<p>¿Cómo interactúan estos objetos? Si miras a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">ver también en vivo</a>), encontrarás el siguiente código:</p>

<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
});</pre>

<div class="note">
<p><strong>Nota</strong>: cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección {{anch("They have additional security mechanisms where appropriate")}} que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a  &gt; <em>Tools</em> &gt; <em>Page Info</em> &gt; <em>Permissions</em>, y cambiar la configuración para <em>Share Location</em>; en Chrome ve a <em>Settings</em> &gt; <em>Privacy</em> &gt; <em>Show advanced settings</em> &gt; <em>Content settings</em> y cambia las opciones para <em>Location</em>.</p>
</div>

<p>Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:</p>

<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>

<p>Lo que es equivalente a hacer algo como:</p>

<pre class="brush: js">var myGeo = navigator.geolocation;
myGeo.getCurrentPosition(function(position) { ... });</pre>

<p>Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propiedades/métodos reduciendo el número de líneas que tenemos que escribir.</p>

<p>El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{domxref("Position")}} con la representación de los datos de la posición actual.</span></p>

<div class="note">
<p><strong>Nota</strong>: una función que es tomada por otra función como argumento es conocida con el nombre de <a href="/en-US/docs/Glossary/Callback_function">callback function</a>.</p>
</div>

<p>Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman <strong><a href="/en-US/docs/Glossary/Asynchronous">operaciones asíncronas</a></strong>. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:</p>

<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition();
var myLatitude = position.coords.latitude;</pre>

<p>Si la primera línea no ha retornado todavía su resultado, la segunda línea lanzará un error puesto que los datos de posición no estarán disponibles. Por esa razón, las APIs que tienen operaciones asíncronas se diseñan para usar<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{glossary("callback function")}}s, o el sistema más moderno de </span><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 1rem; letter-spacing: -0.00278rem;">Promises</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, que se ha introducido en ECMAScript 6 y se está usando mucho en las APIs más nuevas.</span></p>

<p>Vamos a combinar la API de geolocalización con una API de terceros — la API de Google Maps — que se usa para dibujar la localización retornada por <code>getCurrentPosition()</code> en un mapa de Google. Haremos disponible esta API en nuestra página vinculándonos a ella — encontrarás esta línea en el HTML:</p>

<pre class="brush: html">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>

<p>Para usar la API, primero creamos una instancia del objeto <code>LatLng</code> usando el constructor <code>google.maps.LatLng()</code>, que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:</p>

<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre>

<p>Este objeto quedará establecido como el valor de la propiedad<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">center</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> de un objeto de opciones que hemos llamado </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">myOptions</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">google.maps.Map()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">map_canvas</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), y el objeto de opciones que acabamos de definir.</span></p>

<pre class="brush: js">var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  disableDefaultUI: true
}

var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre>

<p>Una vez hecho, veremos dibujado nuestro mapa.</p>

<p>Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.</p>

<div class="note">
<p><strong>Nota</strong>: no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.</p>
</div>

<h3 id="Tienen_puntos_de_acceso_reconocibles">Tienen puntos de acceso reconocibles</h3>

<p>Cuando uses una API, debes estar seguro que conoces dónde están los puntos de acceso para ella. En la API de Geolocalización esto es bastante sencillo  — es la propiedad {{domxref("Navigator.geolocation")}}, que retorna el objeto del navegador {{domxref("Geolocation")}} que contiene todos los métodos útiles de geolocalización disponibles en su interior.</p>

<p>La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:</p>

<pre class="brush: js">var em = document.createElement('em'); // crear un nuevo elemento em
var para = document.querySelector('p'); // referencia a un elemento p existente
em.textContent = 'Hello there!'; // dar al em algo de contenido textual
para.appendChild(em); // ubicar el em dentro del párrafo</pre>

<p>Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:</span></p>

<pre class="brush: js">var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');</pre>

<p>Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:</p>

<pre class="brush: js">Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
};</pre>

<div class="note">
<p><strong>Nota</strong>: puedes ver este código en acción en nuetro <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (y también verlo <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">funcionando</a>).</p>
</div>

<h3 id="Usan_eventos_para_manejar_cambios_en_su_estado">Usan eventos para manejar cambios en su estado</h3>

<p>Ya hemos discutido anteriormente los eventos en este curso, en nuestro artículo de <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introducción a los eventos</a> — este artículo detalla qué son los eventos del lado del cliente y cómo se usan en el código. Si no estás familiarizado en cómo se trabaja con la API de eventos del lado del cliente, deberías ir a consultar este artículo antes de continuar.</p>

<p>Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen número de ellos. Las propiedades para manejarlos, que nos permiten ejecutar funciones cuando los eventos se producen, generalmente se listan en nuestro material de referencia en secciones de "Manejadores de Eventos" separadas. Como ejemplo simple, instancias del objeto <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (cada uno representa una petición HTTP al servidor para recuperar un nuevo recurso de algún tipo) tienen un número de eventos disponibles, por ejemplo el evento <code>load</code> que es disparado cuando una respuesta ha sido retornada satisfactoriamente conteniendo el recurso solicitado, y ahora está disponible.</p>

<p>El siguiente código aporta un ejemplo simple de cómo se debe usar esto:</p>



<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}</pre>

<div class="note">
<p><strong>Nota</strong>: puedes ver este código en acción en nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">verlo en vivo</a>).</p>
</div>

<p>Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor <code>XMLHttpRequest()</code>, se abre una petición HTTP <code>GET</code> para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.</p>

<p>El manejador <code>onload</code> especifica entonces qué hacer con la respuesta. Ya sabemos que la respuesta será retornada satisfactoriamente y estará disponible tras producirse el evento load (a menos que haya sucedido un error), así que salvamos la respuesta que contiene el código JSON retornado en la variable <code style="font-size: 1rem; letter-spacing: -0.00278rem;">superHeroes</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, luego lo pasamos a dos funciones diferentes para un procesado posterior.</span></p>

<h3 id="Tienen_mecanismos_adicionales_de_seguridad_donde_sea_necesario">Tienen mecanismos adicionales de seguridad donde sea necesario</h3>

<p>Las características de las WebAPI están sujetas a las mismas consideraciones de seguridad que JavaScript y otras tecnologías web (por ejemplo <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), pero a veces tienen mecanismos adicionales de seguridad. Por ejemplo, algunas de las WebAPIs más modernas solamente funcionan en páginas servidas mediante HTTPS debido a que transmiten información potencialmente sensible (algunos ejemplos son <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> y <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p>

<p>Además, algunas WebAPIs solicitarán permiso al usuario para ser activadas cuando se produzcan las llamadas desde el código. Como ejemplo, habrás observado un cuadro de diálogo como éste al probar nuestro ejemplo anterior de <a href="/en-US/docs/Web/API/Geolocation">Geolocalización</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p>

<p>La <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> solicita los permisos de una forma parecida:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>Estos diálogos solicitando permiso se muestran al usuario por motivos de seguridad — si no estuvieran, los sitios podrían rastrear la localización sin que el usuario lo supiera o bombardearlo con un montón de notificaciones molestas.</p>

<h2 id="Resumen">Resumen</h2>

<p>En este punto, deberías tener ya una buena idea de los que son las APIs, cómo trabajan y qué puedes hacer con ellas en tu código JavaScript. Seguramente estarás con ganas de comenzar a hacer cosas divertidas con algunas APIs específicas, así que ¡vamos allá! A continuación veremos cómo manipular documentos con el Modelo de Objetos del Documento (DOM).</p>

<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introducción a las APIs web</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Recuperando información del servidor</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs de terceros</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dibujando gráficos</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs de vídeo y audio</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Almacenamiento en el lado del cliente</a></li>
</ul>