JavaScript

Comencemos por volver a examinar un diagrama:

Server, url de la imagen: /images/client-server-1-removebg-preview.png

Recuerda que en la mayoría de las interacciones en línea, tenemos un cliente/usuario que envía una solicitud HTTP a un servidor, que devuelve una respuesta HTTP. Todo el código Python que hemos escrito hasta ahora utilizando Django se ha ejecutado en un servidor. JavaScript nos permitirá ejecutar código en el lado del cliente, lo que significa que no es necesario interactuar con el servidor mientras se está ejecutando, lo que permite que nuestros sitios web sean mucho más interactivos.

Para agregar algo de JavaScript a nuestra página, podemos agregar un par de etiquetas<script>en algún lugar de nuestra página HTML. Usamos las etiquetas<script>para indicar al navegador que cualquier cosa que escribamos entre las dos etiquetas es código JavaScript que deseamos ejecutar cuando un usuario visita nuestro sitio. Nuestro primer programa podría verse algo así:

javascript

1alert('Hola, terrícolas!');

La función alert en JavaScript muestra un mensaje al usuario que luego pueden cerrar. Para mostrar dónde encajaría esto en un documento HTML real, aquí tienes un ejemplo de una página sencilla con algo de JavaScript:

javascript

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Mi Página con JavaScript</title>
5  </head>
6  <body>
7    <h1>Bienvenido a mi página</h1>
8    <p>Haz clic en el botón para ver un mensaje de alerta.</p>
9
10    <button onclick="showAlert()">Mostrar Alerta</button>
11
12    <script>
13      // Función para mostrar una alerta
14      function showAlert() {
15        alert("¡Hola, esta es una alerta de JavaScript!");
16      }
17    </script>
18  </body>
19</html>

Eventos

Una característica de JavaScript que lo hace útil para la programación web es que admite laProgramación Orientada a Eventos.

La Programación Orientada a Eventos es un paradigma de programación que se centra en la detección de eventos y las acciones que deben realizarse cuando se detecta un evento.

Un evento puede ser casi cualquier cosa, como hacer clic en un botón, mover el cursor, escribir una respuesta o cargar una página. Casi todo lo que un usuario hace para interactuar con una página web se puede considerar como un evento. En JavaScript, utilizamosEscuchadores de Eventosque esperan a que ocurran ciertos eventos y luego ejecutan algún código.

Comencemos por convertir nuestro JavaScript anterior en unafunciónllamadahola:

javascript

1function hola() {
2  alert("Hola mundanos!")
3}

Ahora, trabajemos en ejecutar esta función cada vez que se haga clic en un botón. Para hacerlo, crearemos un botón HTML en nuestra página con un atributo onclick, que proporciona al navegador instrucciones sobre lo que debe suceder cuando se hace clic en el botón:

html

1<button onclick="hola()">Click Here</button>

Variables

JavaScript es un lenguaje de programación, al igual que Python, C o cualquier otro lenguaje con el que hayas trabajado antes, lo que significa que tiene muchas de las mismas características que otros lenguajes, incluyendo variables. Hay tres palabras clave que podemos usar para asignar valores en JavaScript:

var: se utiliza para definir una variable globalmente.

javascript

1var age = 20;

const: se utiliza para definir un valor que no cambiará.

javascript

1const PI = 3.14;

let: se utiliza para definir una variable que está limitada en alcance al bloque actual, como una función o un bucle.

javascript

1let counter = 1;

Para un ejemplo de cómo podemos usar una variable, echemos un vistazo a una página que lleva un contador:

javascript

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Contador en JavaScript</title>
5  </head>
6  <body>
7    <h1>Contador</h1>
8    <p id="counter">0</p>
9    <button onclick="incrementCounter(alert(counterValue))">Incrementar</button>
10
11    <script>
12      // Variable para almacenar el contador
13      let counterValue = 0;
14
15      // Función para incrementar el contador
16      function incrementCounter() {
17        counterValue++;
18        document.getElementById("counter").innerText = counterValue;
19      }
20    </script>
21  </body>
22</html>

querySelector

Además de permitirnos mostrar mensajes a través de alertas, JavaScript también nos permite cambiar elementos en la página. Para hacer esto, primero debemos introducir una función llamada document.querySelector. Esta función busca y devuelve elementos del DOM. Por ejemplo, la utilizaríamos de la siguiente manera:

javascript

1const element = document.querySelector(selector);
2
3let heading = document.querySelector('h1');

para extraer un encabezado. Luego, para manipular el elemento que hemos encontrado recientemente, podemos cambiar su propiedad innerHTML:

javascript

1// Encuentra el primer encabezado h1 en el DOM
2const headingElement = document.querySelector('h1');
3// Cambia el contenido del encabezado
4headingElement.innerHTML = 'Nuevo texto para el encabezado';

Al igual que en Python, también podemos aprovechar lascondicionesen JavaScript. Por ejemplo, supongamos que en lugar de cambiar siempre nuestro encabezado a "Goodbye!", queremos alternar entre"Hola!"y"Adios!". Nuestra página podría verse algo así. Ten en cuenta que en JavaScript utilizamos===como una comparación más estricta entre dos elementos que también verifica que los objetos sean del mismo tipo. Por lo general, es recomendable usar===siempre que sea posible.

javascript

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4      <title>Contador</title>
5      <script>
6          function hello() {
7              const header = document.querySelector('h1');
8              if (header.innerHTML === 'Bienvenidos!') {
9                  header.innerHTML = 'Adiós..!';
10              }
11              else {
12                  header.innerHTML = 'Bienvenidos!';
13              }
14          }
15      </script>
16  </head>
17  <body>
18      <h1>Hola!</h1>
19      <button onclick="hello()">Haz click aquí</button>
20  </body>
21</html>

Manipuación del DOM

Utilicemos esta idea de manipulación del DOM para mejorar nuestra página de contador:

javascript

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <title>Count</title>
5        <script>
6            let counter = 0;
7            function count() {
8                counter++;
9                document.querySelector('h1').innerHTML = counter;
10            }
11        </script>
12    </head>
13    <body>
14        <h1>0</h1>
15        <button onclick="count()">Count</button>
16    </body>
17</html>

Podemos hacer que esta página sea aún más interesante mostrando una alerta cada vez que el contador llegue a un múltiplo de diez. En esta alerta, queremos formatear una cadena para personalizar el mensaje, lo cual en JavaScript podemos hacer utilizando plantillas literales (template literals). Las plantillas literales requieren que haya comillas invertidas(backticks, `` ) en windows: alt + 96; alrededor de toda la expresión y un signo peso($)y llaves{...}alrededor de cualquier sustitución. Por ejemplo, cambiemos nuestra función de conteo de la siguiente manera:

javascript

1function count() {
2    counter++;
3    document.querySelector('h1').innerHTML = counter;
4    
5    if (counter % 10 === 0) {
6        alert('Count is now ${counter}')
7    }
8}

Ahora, veamos algunas formas en las que podemos mejorar el diseño de esta página. En primer lugar, al igual que tratamos de evitar el estilo en línea con CSS, queremos evitar el uso de JavaScript en línea tanto como sea posible. Podemos hacerlo en nuestro ejemplo de contador agregando una línea de script que cambia el atributoonclickde un botón en la página y eliminando el atributoonclickdel interior de la etiqueta delbotón.

javascript

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Contador en JavaScript</title>
5    <script>
6      // Variable para almacenar el contador
7      let counterValue = 0;
8
9      // Función para incrementar el contador y mostrar una alerta si es múltiplo de 10
10      function incrementCounter() {
11        counterValue++;
12        document.querySelector('h1').innerHTML = counterValue;
13
14        if (counterValue % 10 === 0) {
15          alert('Count is now ' + counterValue);
16        }
17      }
18
19      // Función para cambiar el evento onclick del botón
20      function setupCounterButton() {
21        const button = document.querySelector('#counterButton');
22        button.onclick = incrementCounter;
23      }
24    </script>
25  </head>
26  <body>
27    <h1>Contador</h1>
28    <p id="counter">0</p>
29    <button id="counterButton">Incrementar</button>
30
31    <script>
32    // Llamamos a la función para configurar el botón una vez que se haya cargado el DOM
33      window.onload = setupCounterButton;
34    </script>
35  </body>
36</html>

Una cosa importante a tener en cuenta acerca de lo que acabamos de hacer es que no estamos llamando a la función "count" añadiendo paréntesis después, sino que simplemente estamos nombrando la función. Esto especifica que solo deseamos llamar a esta función cuando se haga clic en el botón. Esto funciona porque, al igual que en Python, JavaScript admite la programación funcional, por lo que las funciones pueden tratarse como valores por sí mismas.

Sin embargo, el cambio anterior por sí solo no es suficiente, como podemos ver al inspeccionar la página y observar la consola de nuestro navegador.

javascript

1document.querySelector('button').onclick = count;

Javascipt query, url de la imagen: /images/error0.png

Este error surgió porque cuando JavaScript buscó un elemento utilizando document.querySelector('button'), no encontró nada. Esto se debe a que toma un pequeño tiempo para que la página se cargue y nuestro código JavaScript se ejecutó antes de que el botón se renderizara. Para tener en cuenta esto, podemos especificar que el código se ejecutará solo después de que la página se haya cargado utilizando la función addEventListener. Esta función toma dos argumentos:

El evento al que escuchar (por ejemplo,"click").
Una función que se ejecutará cuando se detecte el evento (por ejemplo, la función"hello" de arriba).

Podemos utilizar esta función para ejecutar el código solo una vez que todo el contenido se haya cargado:

javascript

1// Esperar a que la página se cargue por completo antes de ejecutar el código
2document.addEventListener('DOMContentLoaded', function() {
3    // Otro código acá
4});
5// Otro ejemplo
6
7window.addEventListener('load', function() {
8  // El código que deseamos ejecutar después de que la página se ha cargado
9  // Puede incluir configuraciones, interacciones con elementos, etc.
10});

En el ejemplo anterior, hemos utilizado una funciónanónima, que es una función a la que nunca se le da un nombre. Reuniendo todo esto, nuestro código JavaScript ahora se ve de la siguiente manera:

javascript

1let counter = 0;
2
3function count() {
4    counter++;
5    document.querySelector('h1').innerHTML = counter;
6    
7    if (counter % 10 === 0) {
8        alert('Count is now ${counter}')
9    }
10}
11
12document.addEventListener('DOMContentLoaded', function() {
13    document.querySelector('button').onclick = count;
14});

Otra forma en la que podemos mejorar nuestro diseño es moviendo nuestro JavaScript a un archivo separado. La manera de hacerlo es muy similar a cómo colocamos nuestro CSS en un archivo separado para dar estilo:

Escribe todo tu código JavaScript en un archivo separado que termine en.js, quizásindex.js.
Añade un atributo src a la etiqueta<script>que apunte a este nuevo archivo.

Para nuestra página de contador, podríamos tener un archivo llamado counter.html que se ve así:

html

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <title>Count</title>
5        <script src="counter.js"></script>
6    </head>
7    <body>
8        <h1>0</h1>
9        <button>Count</button>
10    </body>
11</html>

Y un archivo llamadocounter.jsque se vería de la siguiente manera:

javascript

1let counter = 0;
2
3function count() {
4    counter++;
5    document.querySelector('h1').innerHTML = counter;
6    
7    if (counter % 10 === 0) {
8        alert('Count is now ${counter}');
9    }
10}
11
12document.addEventListener('DOMContentLoaded', function() {
13    document.querySelector('button').onclick = count;
14});

Tener JavaScript en un archivo separado es útil por varias razones:

Atractivo visual: Nuestros archivos HTML y JavaScript individuales se vuelven más legibles. Acceso entre archivos HTML: Ahora podemos tener varios archivos HTML que comparten el mismo JavaScript
Colaboración: Ahora es fácil que una persona trabaje en el JavaScript mientras otra trabaja en el HTML.
Importación: Tenemos la capacidad de importar bibliotecas de JavaScript que otras personas ya han escrito. Por ejemplo,Bootstraptiene su propia biblioteca de JavaScript que puedes incluir para hacer tu sitio más interactivo.

Comencemos con otro ejemplo de una página que puede ser un poco más interactiva. A continuación, crearemos una página en la que un usuario pueda escribir su nombre para obtener un saludo personalizado.

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <title>Hola</title>
5    <script>
6        document.addEventListener('DOMContentLoaded', function() {
7            document.querySelector('form').onsubmit = function() {
8                const name = document.querySelector('#name').value;
9                alert(`Hola, ${name}`);
10            };
11        });
12    </script>
13</head>
14<body>
15    <form>
16        <input autofocus id="name" placeholder="Name" type="text">
17        <input type="submit">
18    </form>
19</body>
20</html>

Si ustedes lo prueban pueden ver que el nombre que pongas lo va a mostrar en el alert:

Alerta de javascript, url de la imagen: /images/javascript-alert-name.png

Otro nombre:

Alerta de javascript, url de la imagen: /images/javascript-alert-name2.png

Algunas notas sobre la página anterior:

Usamos el campo de enfoque automático (autofocus) en la entrada de nombre para indicar que el cursor debe situarse dentro de ese campo tan pronto como se carga la página.
Utilizamos #name dentro de document.querySelector para encontrar un elemento con un identificador(id)de"name". Podemos utilizar los mismos selectores en esta función que podríamos usar en CSS.
Utilizamos el atributo value de un campo de entrada para obtener lo que se ha escrito en él.

¡Podemos hacer más que simplemente añadir HTML a nuestra página utilizando JavaScript! También podemos cambiar el estilo de una página. En la página a continuación, utilizamos botones para cambiar el color de nuestro encabezado.

javascript

1<!DOCTYPE html>
2<html lang="en">
3<head>
4     <title>Colors</title>
5     <script>
6         document.addEventListener('DOMContentLoaded', function() {
7            document.querySelectorAll('button').forEach(function(button) {
8                button.onclick = function() {
9                    document.querySelector("#hello").style.color = button.dataset.color;
10                }
11            });
12         });
13     </script>
14</head>
15<body>
16    <h1 id="hello">Hello</h1>
17    <button data-color="red">Red</button>
18    <button data-color="blue">Blue</button>
19    <button data-color="green">Green</button>
20</body>
21</html>

Algunas notas en la página anterior:

Cambiamos el estilo de un elemento utilizando el atributostyle.ALGO.
Utilizamos el atributodata-ALGOpara asignar datos a un elemento HTML. Posteriormente, podemos acceder a esos datos en JavaScript utilizando la propiedad dataset del elemento.
Usamos la funciónquerySelectorAllpara obtener una lista de nodos (similar a una lista en Python o a un arreglo en JavaScript) con todos los elementos que coinciden con la consulta.
La funciónforEachen JavaScript toma como argumento otra función y aplica esa función a cada elemento en una lista o arreglo.

Consola Javascript

La consola es una herramienta útil para probar pequeños fragmentos de código y depurar. Puedes escribir y ejecutar código JavaScript en la consola, la cual se encuentra al inspeccionar un elemento en tu navegador web y luego haciendo clic en "consola" (el proceso exacto puede variar según el navegador). Una herramienta útil para la depuración es imprimir en la consola, lo cual puedes hacer utilizando la funciónconsole.log. Por ejemplo, en la página"colors.html"mencionada arriba, puedo agregar la siguiente línea:

javascript

1console.log(document.querySelectorAll('button'));

Lista de consola, url de la imagen: /images/consoleList.png

Funciones Flecha

Funciones de Flecha Además de la notación tradicional de funciones que hemos visto anteriormente, JavaScript ahora nos proporciona la capacidad de utilizar Funciones de Flecha, donde tenemos una entrada (o paréntesis cuando no hay entrada) seguida de=>y luego algún código que se ejecutará. Por ejemplo, podemos modificar nuestro script anterior para utilizar una función de flecha anónima:

javascript

1document.addEventListener('DOMContentLoaded', () => {
2    document.querySelectorAll('button').forEach(button => {
3        button.onclick = () => {
4            document.querySelector("#hello").style.color = button.dataset.color;
5        }
6    });
7});

También podemos tener funciones con nombres que utilizan flechas, como en esta reescritura de la funcióncount:

javascript

1count = () => {
2    counter++;
3    document.querySelector('h1').innerHTML = counter;
4    
5    if (counter % 10 === 0) {
6        alert(`Count is now ${counter}`)
7    }
8}

Para obtener una idea sobre algunos otros eventos que podemos utilizar, veamos cómo podemos implementar nuestro cambiador de colores utilizando un menú desplegable en lugar de tres botones separados. Podemos detectar cambios en un elemento select utilizando el atributoonchange. En JavaScript, esto es una palabra clave que cambia según el contexto en el que se utiliza. En el caso de un manejador de eventos,thisse refiere al objeto que desencadenó el evento.

javascript

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4      <title>Colores</title>
5      <script>
6          document.addEventListener('DOMContentLoaded', function() {
7              document.querySelector('select').onchange = function() {
8                  document.querySelector('#hola').style.color = this.value;
9              }
10          });
11      </script>
12  </head>
13  <body>
14      <h1 id="hola">Hola Javascript!</h1>
15      <select>
16          <option value="black">Negro</option>
17          <option value="red">Rojo</option>
18          <option value="blue">Azul</option>
19          <option value="green">Verde</option>
20      </select>
21              
22  </body>
23</html>

Hay muchos otros eventos que podemos detectar en Javascript incluyendo los más comunes, a continuación:

onclick
onmouseover
onkeydown
onkeyup
onload
onblur
...

TODO List

Para aplicar algunas de las cosas que hemos aprendido en esta conferencia, trabajemos en la creación de una lista de tareas(TODO List) completamente en JavaScript. Comenzaremos escribiendo la estructura HTML de la página. Observa a continuación cómo dejamos espacio para una lista no ordenada, pero aún no agregamos elementos a ella. También observa que agregamos un enlace atasks.js, donde escribiremos nuestro JavaScript.

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Tareas</title>
7</head>
8<body>
9    <h1>Lista de Tareas</h1>
10    <ul id="tareas"></ul>
11  <form id="taskForm">
12    <input id="task" placeholder="Nueva Tarea" type="text" />
13    <button id="submit" type="submit">Agregar Tarea</button>
14  </form>
15    </body>
16</html>

Ahora, aquí está nuestro código que podemos mantener entasks.js. Algunas notas sobre lo que verás a continuación:

Este código es ligeramente diferente al código de la conferencia. Aquí, solo consultamos nuestro botón de envío y el campo de entrada de tareas una vez al principio y almacenamos esos dos valores en las variables submit y newTask.
Podemos habilitar/deshabilitar un botón estableciendo su atributo disabled en false/true.
En JavaScript, usamos.lengthpara encontrar la longitud de objetos como cadenas y arreglos.
Al final del script, agregamos la línea return false. Esto evita la presentación predeterminada del formulario, que implica recargar la página actual o redirigir a una nueva.
En JavaScript, podemos crear elementos HTML utilizando la funcióncreateElement. Luego, podemos agregar esos elementos al DOM utilizando la funciónappend.

javascript

1// Espera a que el DOM esté completamente cargado antes de ejecutar el código
2document.addEventListener('DOMContentLoaded', function() {
3  // Función auxiliar para seleccionar elementos del DOM
4  const $ = (selector) => document.querySelector(selector);
5
6  // Obtén referencias a los elementos del DOM que necesitaremos
7  const tasksList = $('#tareas'); // Lista de tareas (ul)
8  const taskForm = $('#taskForm'); // Formulario de tareas
9  const newTaskInput = $('#task'); // Input para la nueva tarea
10
11  // Agrega un evento de escucha al formulario cuando se envía
12  taskForm.addEventListener('submit', function(event) {
13    // Previene el comportamiento predeterminado del formulario (evita la recarga de la página)
14    event.preventDefault();
15
16    // Obtiene el texto de la nueva tarea y elimina los espacios en blanco al principio y al final
17    const taskText = newTaskInput.value.trim();
18
19    // Verifica que el texto de la tarea no esté vacío
20    if (taskText !== "") {
21      // Crea un nuevo elemento de lista (li) en el DOM
22      const li = document.createElement('li');
23
24      // Establece el texto del elemento de lista con el texto de la nueva tarea
25      li.textContent = taskText;
26
27      // Agrega el elemento de lista a la lista de tareas (ul)
28      tasksList.appendChild(li);
29
30      // Limpia el input de la nueva tarea después de agregarla a la lista
31      newTaskInput.value = "";
32    }
33  });
34  });

Intérvalos

Además de especificar que las funciones se ejecutan cuando se desencadena un evento, también podemos programar funciones para que se ejecuten después de un período de tiempo determinado. Por ejemplo, volvamos al script de nuestra página de contador y agreguemos un intervalo para que, incluso si el usuario no hace clic en nada, el contador se incremente cada segundo. Para hacer esto, utilizamos la funciónsetIntervals, que toma como argumento una función que se ejecutará y un intervalo de tiempo (en milisegundos) entre las ejecuciones de la función.

javascript

1let counter = 0;
2            
3function count() {
4    counter++;
5    document.querySelector('h1').innerHTML = counter;
6}
7
8document.addEventListener('DOMContentLoaded', function() {
9    document.querySelector('button').onclick = count;
10
11    setInterval(count, 1000);
12});

Almacenamiento Local

Una cosa a notar sobre todos nuestros sitios hasta ahora es que cada vez que recargamos la página, toda nuestra información se pierde. El color del encabezado vuelve a ser negro, el contador vuelve a 0 y todas las tareas se borran. A veces esto es lo que pretendemos, pero otras veces querremos poder almacenar información que podamos utilizar cuando un usuario regrese al sitio.

Una forma de hacerlo es utilizando el Almacenamiento Local (Local Storage), es decir, almacenar información en el navegador web del usuario que podamos acceder más tarde. Esta información se almacena como un conjunto de pares clave-valor, casi como un diccionario en Python. Para utilizar el almacenamiento local, utilizaremos dos funciones clave:

localStorage.getItem(key): Esta función busca una entrada en el almacenamiento local con una clave dada y devuelve el valor asociado con esa clave.
localStorage.setItem(key, value): Esta función establece una entrada en el almacenamiento local, asociando la clave con un nuevo valor.

Veamos cómo podemos usar estas nuevas funciones para actualizar nuestro contador. En el código a continuación,

javascript

1// Verificar si ya existe un valor en el almacenamiento local
2if (!localStorage.getItem('counter')) {
3
4    // Si no existe, establecer el contador en 0 en el almacenamiento local
5    localStorage.setItem('counter', 0);
6}
7            
8function count() {
9    // Recuperar el valor del contador desde el almacenamiento local
10    let counter = localStorage.getItem('counter');
11
12    // Actualizar el contador
13    counter++;
14    document.querySelector('h1').innerHTML = counter;
15
16    // Almacenar el contador en el almacenamiento local
17    localStorage.setItem('counter', counter);
18}
19
20document.addEventListener('DOMContentLoaded', function() {
21    // Establecer el encabezado con el valor actual en el almacenamiento local
22    document.querySelector('h1').innerHTML = localStorage.getItem('counter');
23    document.querySelector('button').onclick = count;
24});

APIs

las APIs (Interfaz de Programación de Aplicaciones) pueden referirse a diversas interfaces que permiten a los desarrolladores interactuar con funciones específicas de plataformas, navegadores web u otros servicios. A continuación, se mencionan algunos tipos comunes de APIs en el contexto de JavaScript:

APIs del Navegador (Web APIs):Los navegadores web proporcionan una serie de APIs que permiten a los desarrolladores interactuar con funciones específicas del navegador. Algunas de las APIs del navegador más comunes incluyen:
- DOM API: Para manipular la estructura del documento HTML y XML.
- XMLHttpRequest / Fetch API: Para realizar solicitudes HTTP desde el navegador.
- Geolocation API: Para acceder a la ubicación del usuario.
- Canvas API: Para dibujar gráficos en el navegador.
- Web Storage API: Para almacenar datos localmente en el navegador.
APIs de terceros:Muchos servicios externos ofrecen APIs que permiten a los desarrolladores interactuar con sus plataformas y acceder a sus datos. Ejemplos incluyen:
- API de Twitter: Para acceder a datos de Twitter.
- API de Google Maps: Para integrar mapas en una aplicación.
- API de OpenWeatherMap: Para obtener datos meteorológicos.
Node.js APIs:En el entorno del servidor con Node.js, existen APIs incorporadas para realizar operaciones de entrada/salida, manejar eventos y más.
- File System API: Para interactuar con el sistema de archivos.
- HTTP / HTTPS API: Para crear servidores y realizar solicitudes HTTP.
- EventEmitter API: Para trabajar con eventos.
APIs de Base de DatosAl trabajar con bases de datos, se utilizan APIs específicas para interactuar con la base de datos. Por ejemplo:
- MongoDB tiene su propia API para interactuar con bases de datos NoSQL.
- MySQL proporciona una API para trabajar con bases de datos relacionales.
APIs de Servicios en la NubeMuchos servicios en la nube ofrecen APIs para interactuar con sus servicios. Ejemplos incluyen:
- AWS SDK: Para interactuar con los servicios de Amazon Web Services.
- Google Cloud Client Libraries: Para acceder a servicios en la nube de Google.
RESTful APIs y GraphQL:Muchas aplicaciones web modernas utilizan APIs RESTful o GraphQL para la comunicación entre el cliente y el servidor.

Estas son solo algunas categorías de APIs en el contexto de JavaScript. La elección de una API específica dependerá del tipo de desarrollo que estés realizando y de los servicios con los que necesitas interactuar.

Objetos en Javascript

Unobjeto de JavaScriptes muy similar a un diccionario en Python, ya que nos permite almacenar pares clave-valor. Por ejemplo, podría crear un objeto de JavaScript que represente a Harry Potter:

javascript

1const harryPotter = {
2    name: "Harry Potter",
3    age: 17,
4    house: "Gryffindor",
5    wand: "Holly and phoenix feather, 11 inches",
6    friends: ["Hermione Granger", "Ron Weasley"],
7    isWizard: true
8};

Puedo acceder o cambiar partes de este objeto utilizando tanto la notación de corchetes como la notación de punto:

javascript

1console.log(harryPotter.name); // Muestra "Harry Potter"
2console.log(harryPotter.age); // Muestra 17

Acceder a los valores utilizando la notación de corchetes:

javascript

1console.log(harryPotter['name']); // Muestra "Harry Potter"
2console.log(harryPotter['age']); // Muestra 17

Otro ejemplo:

javascript

1let person = {
2    first: 'Harry',
3    last: 'Potter'
4};

Consola, url de la imagen: /images/console.png

Una forma en la que los objetos de JavaScript son realmente útiles es en la transferencia de datos de un sitio a otro, especialmente al usarAPIs.

Una API, o Interfaz de Programación de Aplicaciones, es una forma estructurada de comunicación entre dos aplicaciones diferentes.

Por ejemplo, es posible que deseemos que nuestra aplicación obtenga información de Google Maps, Amazon o algún servicio meteorológico. Podemos hacer esto realizando llamadas a la API de un servicio, la cual nos devolverá datos estructurados, a menudo en formato JSON(Notación de Objetos JavaScript). Por ejemplo, un vuelo en formatoJSONpodría verse así:

javascript

1{
2    "origin": "New York",
3    "destination": "London",
4    "duration": 415
5}

Los valores dentro de un JSON no tienen por qué ser solo cadenas y números, como en el ejemplo anterior. También podemos almacenar listas o incluso otros objetos de JavaScript:

javascript

1{
2  "flightNumber": "A123",
3  "departureCity": "New York",
4  "arrivalCity": "Los Angeles",
5  "passengers": ["Alice", "Bob", "Charlie"],
6  "aircraft": {
7    "model": "Boeing 747",
8    "seats": 400
9  }
10}

Cambio de moneda

Para mostrar cómo podemos usar API en nuestras aplicaciones, trabajemos en la construcción de una aplicación donde podemos encontrar tasas de cambio entre dos monedas. A lo largo del ejercicio, utilizaremos la API de tipos de cambio delBanco Central Europeo. Si visitas su sitio web, verás la documentación de la API, que generalmente es un buen lugar para comenzar cuando deseas utilizar una API. Podemos probar esta API visitando la URL:https://api.exchangeratesapi.io/latest?base=USD. Cuando visites esta página, verás la tasa de cambio entre el dólar estadounidense y muchas otras monedas, escrita en formato JSON. También puedes cambiar el parámetro GET en la URL de USD a cualquier otro código de moneda para cambiar las tasas que obtienes.

Echemos un vistazo a cómo implementar esta API en una aplicación creando un nuevo archivo HTML llamado "currency.html" y vinculándolo a un archivo JavaScript, pero dejemos el cuerpo del archivo HTML vacío:

html

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <title>Currency Exchange</title>
5        <script src="currency.js"></script>
6    </head>
7    <body></body>
8</html>

Ahora, utilizaremos algo llamado AJAX, o Asynchronous JavaScript And XML (JavaScript y XML asincrónicos), que nos permite acceder a información de páginas externas incluso después de que nuestra página se haya cargado. Para hacerlo, utilizaremos la función fetch, que nos permitirá enviar una solicitudHTTP. La función fetch devuelve una promesa. No entraremos en detalles sobre qué es una promesa aquí, pero podemos pensar en ella como un valor que llegará en algún momento, pero no necesariamente de inmediato. Tratamos con promesas proporcionándoles un atributo.thenque describe qué hacer cuando obtenemos una respuesta. El fragmento de código a continuación registrará nuestra respuesta en la consola.

javascript

1document.addEventListener('DOMContentLoaded', function() {
2    // Enviar una solicitud GET a la URL
3    fetch('https://api.exchangeratesapi.io/latest?base=USD')
4    // Convertir la respuesta a formato JSON
5    .then(response => response.json())
6    .then(data => {
7        // Registrar los datos en la consola
8        console.log(data);
9    });
10});

Log, url de la imagen: /images/curr_log.png

Un punto importante sobre el código anterior es que el argumento de .then siempre es una función. Aunque parece que estamos creando las variables response y data, en realidad son los parámetros de dos funciones anónimas.

En lugar de simplemente registrar estos datos, podemos usar JavaScript para mostrar un mensaje en la pantalla, como se muestra en el siguiente código:

javascript

1document.addEventListener('DOMContentLoaded', function() {
2    // Enviar una solicitud GET a la URL
3    fetch('https://api.exchangeratesapi.io/latest?base=USD')
4    // Convertir la respuesta a formato JSON
5    .then(response => response.json())
6    .then(data => {
7        // Obtener la tasa de cambio de los datos
8        const tasaDeCambio = data.rates.EUR;
9
10        // Mostrar un mensaje en la pantalla
11        document.querySelector('body').innerHTML = `1 USD es igual a ${tasaDeCambio.toFixed(3)} EUR.`;
12    });
13});

Intercambio de divisas, url de la imagen: /images/exchange.png

Ahora, vamos a hacer que el sitio sea un poco más interactivo al permitir que el usuario elija la moneda que le gustaría ver. Comenzaremos modificando nuestro HTML para permitir al usuario ingresar una moneda:

html

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <title>Currency Exchange</title>
5        <script src="currency.js"></script>
6    </head>
7    <body>
8        <form>
9            <input id="currency" placeholder="Currency" type="text">
10            <input type="submit" value="Convert">
11        </form>
12        <div id="result"></div>
13    </body>
14</html>

Ahora, haremos algunos cambios en nuestro JavaScript para que solo se actualice cuando se envíe el formulario y para que tenga en cuenta la entrada del usuario. También agregaremos algunas verificaciones de errores aquí:

javascript

1document.addEventListener('DOMContentLoaded', function() {
2    document.querySelector('form').onsubmit = function() {
3
4        // Enviar una solicitud GET a la URL
5        fetch('https://api.exchangeratesapi.io/latest?base=USD')
6        // Convertir la respuesta a formato JSON
7        .then(response => response.json())
8        .then(data => {
9            // Obtener la moneda ingresada por el usuario y convertirla a mayúsculas
10            const currency = document.querySelector('#currency').value.toUpperCase();
11
12            // Obtener la tasa de cambio de los datos
13            const rate = data.rates[currency];
14
15            // Verificar si la moneda es válida:
16            if (rate !== undefined) {
17                // Mostrar el tipo de cambio en la pantalla
18                document.querySelector('#result').innerHTML = 
19                `1 USD es igual a ${rate.toFixed(3)} ${currency}.`;
20            }
21            else {
22                // Mostrar un mensaje de error en la pantalla
23                document.querySelector('#result').innerHTML = 'Moneda no válida.';
24            }
25        })
26        // Capturar cualquier error y registrarlo en la consola
27        .catch(error => {
28            console.log('Error:', error);
29        });
30        // Prevenir la presentación por defecto del formulario
31        return false;
32    }
33});

A continuación veremos un ejemplo que lo tengo implementado en el sitio.

Convertir Divisas

Última actualización de la API:

Al día de la fecha

Más adelante vamos a ver como uso este ejemplo de API routes de Next.js donde actualizo los datos desde Google Sheets (Como base de datos dinámica), haciendo un fetch del link del archivo.csvel cual podemos actualizar los valores de las divisas.

End-Point API

En esta sección, nos centraremos en la creación de un endpoint API con la capacidad única de actualizarse dinámicamente desde Google Sheets. Esto significa que los cambios realizados en la hoja de cálculo se reflejarán automáticamente en la API. Al finalizar, tendremos una API robusta y flexible que se mantiene actualizada mediante Google Sheets, mejorando la usabilidad y proporcionando información precisa de las tasas de cambio. La conexión dinámica asegura la actualización en tiempo real, mejorando la confiabilidad de los datos y brindando a los usuarios una experiencia más actualizada. La gestión eficiente de las variaciones monetarias en Google Sheets simplifica la tarea de mantener la información actualizada sin necesidad de conocimientos técnicos especializados.

Empezamos

Si estamos en un proyecto con librerías como React y usando de frame Nextjs, dentro de la carpetasrcvamos a crear una carpeta llamadaapiy luego dentro de ella un archivocurrency.jsque lo vamos a programar después, primero vamos nuestra hoja de cálculos deGoogle Sheets

En esta hoja de cálculos, vamos hacer un ejemplo rápido. Ustedes lo pueden completar con más datos si quieren y necesitan.

Seleccionamos hoja de cálculo en blanco, y podemos visualizar de la siuiente manera el documento:

En la primera fila de nuestra hoja de cálculo en Google Sheets, asignaremos nombres específicos a cada columna, los cuales actuarán como nombres que serán referenciados desde nuestro código en JavaScript. Estos nombres proporcionarán una manera organizada y significativa de identificar y acceder a los datos correspondientes en la hoja de cálculo.

En este caso he usadocurrency, rates y updatelos cuales en currency o divisa en español, irían los nombres en mayúsculas de las divisas abreviadas. En el ejemplo tenemos:ARS - BRL - EUR - GBP - BTC - COP - JPY - CHP - UYP - BBP - PGP

Evidentemente esto se podría llenar con todas las divisas que faltan, pero se lo dejo a criterio de cada uno. Para buscar los precios actualizados ya sabemos dónde ir a buscar:

En la columnaupdatepodemos poner la fecha de nuestra última actualización.

Para exportar el documento en formato.csvseguimos estos pasos:

Una vez creada nuestra tabla, podemos acceder a ella mediante la opción de Google para compartir y publicar en la web. Vamos a la opción deArchivo=>Compartir=>Publicar en la Web.

A continuación nos aparecerá una ventana como ésta:

Seleccionamos valores separados por comas que es un archivo.csvy le damos enPublicar.

Esto nos generará un link con nuestro archivo de google sheets en formato.csvpara poder requerirlo en nestra aplicación web. A continuación veremos lo siguiente:

Una vez tenemos nuestro link, lo podemos pegar en unaconstcomo lo tengo en mi caso:

javascript

1export const currencyGoogleSheetsURL = "TU_LINK_DE_GOOGLE_SHEETS"

A programar

Vamos a ver las siguientes funciones en nuestro archivocurrency.jsde la siguinete manera:

javascript

1// 1. En primer lugar la función que obtiene la información asincrónica
2import { currencyGoogleSheetsURL } from '@/components/Constants'
3
4const dataFetch = async () => {
5  const response = await fetch(currencyGoogleSheetsURL)
6  const csvData = await response.text()
7
8// 2. Podemos manejar si recibimos respuesta de manera correcta
9  if (!response.ok) {
10    throw new Error(`No es posible obtener los datos, ${response.status}`)
11  }
12
13// 3. Manejamos el archivo en formato csv de la siguinte manera
14const parsedData = csvData
15.split('\n')
16.slice(1) 
17.map((row) => {
18  const items = [currency, rates, update] = row.split(',')
19  .map((items) => items.trim()) 
20      
21  return {
22    currency, 
23    rates: parsedFloat(rates), 
24    update
25  }
26  return parsedData
27})
28}

Desglosamos un poquito el código:

La funcióndataFetches una función asíncrona que espera una respuesta.
La constanteresponsesiempre que sea asíncrona, espera una respuesta como promesa, por lo que debe incluir unawait.
La constantecsvDatatambien debe incluir unawaity la respuesta la convertimos en texto con la funcióntext().
Manejamos la respuesta de los datos, si la respuesta no es correctaif (!response.ok)arrojamos un errorthrow new Error()
La constanteparsedDatale asigna el valor de csvData, que se supone que es una cadena que contiene datos en formato CSV. Para poder manipularlo de la siguiente manera:
- .split('\n'): Utiliza el método split para dividir la cadena en un array de strings, utilizando el salto de línea ('\n') como separador. Esto crea un array donde cada elemento es una línea del CSV.
- .slice(1): Utiliza el método slice para eliminar la primera línea del array (índice 0), que generalmente es la cabecera del CSV.
- .map((row) => {...}): Utiliza el método map para iterar sobre cada línea del CSV y realizar operaciones en cada una.
- La constanteitems = [currency, rates, update] = row.split(','): Divide cada línea en elementos utilizando la coma como separador y asigna cada elemento a las variables currency, rates, y update. La notación[currency, rates, update]crea un array y asigna cada elemento a las variables correspondientes.
- .map((item) => item.trim()): Para cada elemento en el array creado en el paso anterior, utiliza map nuevamente para eliminar los espacios en blanco al principio y al final de cada elemento mediante el métodotrim().
- return { currency, rates: parsedFloat(), update }: Retorna un objeto con las propiedades currency, rates, y update, utilizando los valores de las variables currency, rates, y update que se asignaron anteriormente, y al valor rates se convierte de un valor decimal a un valor flotante con la funciónparsedFloat().
- Por último devolvemos los datos analizados con unreturn parsedData

Bien hasta aquí tenemos la función para traer la información de nestra tabla de datos en Google Sheets. Normalmente un archivo para crear un endpoint API empieza de la siguiente manera:

javascript

1export default async function apiExample(req, res) {
2  try {
3    res.status(200).json({
4      succes: true,
5      timestamp: new Date().toLocaleDateString('es-Es', {
6        year: 'numeric',
7        month: 'long',
8        day: '2-digit',
9        hour: '2-digit',
10        minute: '2-digit',
11      }),
12      base: 'USD',
13      rates: {
14        ARS: '857.39',
15        EUR: '0.93',
16        GBP: '0.79',
17        BRL: '4.95',
18        COP: '3939',
19        JPY: '149',
20        BTC: '0.000002',
21        CHP: '970',
22        UYP: '39.06',
23        BBP: '6.9',
24        PGP: '7280',
25        AUD: '1.29',
26        CAD: '1.25',
27        INR: '74.93',
28        MXN: '20.27',
29        NZD: '1.37',
30        SGD: '1.34',
31        ZAR: '15.46',
32        CNY: '6.43',
33        HKD: '7.78',
34        KRW: '1177.50',
35        TRY: '9.35',
36        IDR: '14220',
37        RUB: '75.85',
38        SEK: '8.60',
39        CHF: '0.91',
40        NOK: '9.15',
41      },
42    });
43  } catch (error) {
44    console.error('Error en el fetching y procesamientos de los datos:', error);
45    res.status(500).json({ success: false, error: 'Error interno del Servidor' });
46  }
47}

Esto nos permite crear un API endpoint con el siguienteJSON, pueden chequear la APIaquí, veremos el siguiente resultado:

Listo esta es la forma más rápida de crear una API, podríamos hacer unfetchde estos datos en cualquier componente que creemos para la obtención de estos datos, pero dijimos que íbamos hacerla un poco más compleja para que sea más eficiente la forma de actualizar los datos sin estar sentados detrás de nuestro editor de código favorito!

Bien, vamos a hacer nuestro archivocurrency.js más completo, manejando los arrays de manera eficiente. ¿Cómo lo hacemos? Para ello, utilizaremos nuestro acumulador que es la función.reduce, que nos permite acumular los elementos de un array y convertirlo en un objeto:

javascript

1const currencyData = await fethData()
2const lastUpdate = currencyData.lenght > 0 ? currencyData[0].update : ''
3const ratesObject = currencyData.reduce((acc, { currency, rates }) => {
4  acc[currency] = rates;
5  return acc;
6}, {});

Desglosamos:

La constantecurrencyData:Aquí se utiliza la palabra clave await para esperar a que la función fetchData() se resuelva antes de continuar con la ejecución del código.
La constantelastUpdate: Se verifica si currencyData tiene elementos. Si es así, se asigna el valor de la propiedad update del primer elemento de currencyData a la variable lastUpdate. Si no hay elementos, se asigna una cadena vacía a lastUpdate.
En la constanteratesObject: Se utiliza el métodoreducepara convertir el arraycurrencyDataen un objeto llamadoratesObject. La función.reducetoma una función de retorno de llamada y un valor inicial, en este caso, un objeto vacío{}y realiza una operación acumulativa sobre cada elemento del array. La función de retorno de llamada recibe dos parámetros:acc(el acumulador) y un elemento desestructurado{(currency, rates)}del array. En cada iteración, se agrega una nueva propiedad al objetoacc, donde la clave escurrencyy el valor esrates. Al final, reduce devuelve el objeto acc, que ahora contiene todas las tasas de cambio organizadas por su moneda.

Luego nos queda crear elJSONcon los datos obtenidos de Google Sheets.

javascript

1res.status(200).json({
2  success: true,
3  timestamp: new Date().toLocaleDateString('es-Es, {
4    year: "numeric",
5    month: "2 digits",
6    day: "2 digits",
7  })
8  base 'USD',
9  update: lastUpdate,
10  rates: ratesObjetc // Nuestro objeto de arrays
11})

Bien con esto ya seremos capaces de tener nuestra API que se podrá actualizar desde una hoja de cálculos en Google Sheets, no olviden de hacer untryy un catchpara manejar errores en bloques de código. Nos quedaría de la siguiente forma:

javascript

1import { currencyGoogleSheetsURL } from '../../components/Constants';
2
3export default async function handlerCurrency(req, res) {
4  'use-client';
5  try {
6    const fetchData = async () => {
7      const response = await fetch(currencyGoogleSheetsURL);
8
9      if (!response.ok) {
10        throw new Error(`Failed to fetch data. Status: ${response.status}`);
11      }
12
13      const csvItem = await response.text();
14      const parsedItems = csvItem
15        .split('\n')
16        .slice(1)
17        .map((row) => {
18          const [currency, rates, update] = row
19            .split(',')
20            .map((item) => item.trim());
21          return {
22            currency,
23            rates: parseFloat(rates),
24            update,
25          };
26        });
27      return parsedItems;
28    };
29
30    const currencyData = await fetchData();
31    const lastUpdate = currencyData.length > 0 ? currencyData[0].update : '';
32    const ratesObject = currencyData.reduce((acc, { currency, rates }) => {
33      acc[currency] = rates;
34      return acc;
35    }, {});
36
37    res.status(200).json({
38      success: true,
39      timestamp: new Date().toLocaleDateString('es-Es', {
40        year: 'numeric',
41        month: 'long',
42        day: 'numeric',
43      }),
44      base: 'USD',
45      update: lastUpdate,
46      rates: ratesObject,
47    });
48  } catch (error) {
49    console.error('Error fetching and processing currency data:', error);
50    res.status(500).json({ success: false, error: 'Internal Server Error' });
51  }
52}

Por último nos queda poder recibir estos datos en nuestro componente, creamos en nuestra carpeta📁componentsun archivo llamado por ejemploCurrencyComponent.js

javascript

1//CurrencyComponent.js
2
3import { useState, useEffect } from 'react';
4
5const DataCurrency = () => {
6  const [currency, setCurrency] = useState('');
7
8  useEffect(() => {
9    const dataFetch = async () => {
10      const response = await fetch('/api/currency');
11      const data = await response.json();
12      setCurrency(data);
13    };
14
15    dataFetch();
16  }, []);
17
18  return (
19    <>
20    {/* HTML... */}
21    </>
22  )
23};

Con esta información ya podremos recibir nuestroJSONpero tendremos que devolver en unHTMLlo siguiente:

html

1<div className="w-1/2 justify-center mx-auto">
2  <table className="table border-collapse border p-2 flex-wrap text-balance">
3    <thead className=" bg-bg-card">
4      <tr className="border">
5        <th>Divisas hoy {currency.timestamp}</th>
6        <th>Tipo de Cambio</th>
7        <th>Actualización: {currency.update}</th>
8      </tr>
9    </thead>
10    <tbody>
11      {currency && (
12        <>
13          <tr>
14            <td>{`1 ${currency.base}`}</td>
15            <td>{currency.rates.EUR}</td>
16            <td>Euros</td>
17          </tr>
18          <tr>
19            <td>{`1 ${currency.base}`}</td>
20            <td>{currency.rates.ARS}</td>
21            <td>Peso Argentino</td>
22          </tr>
23          <tr>
24            <td>{`1 ${currency.base}`}</td>
25            <td>{currency.rates.BRL}</td>
26            <td>Real Brasilero</td>
27          </tr>
28          <tr>
29            <td>{`1 ${currency.base}`}</td>
30            <td>{currency.rates.CHP}</td>
31            <td>Peso Chileno</td>
32          </tr>
33          <tr>
34            <td>{`1 ${currency.base}`}</td>
35            <td>{currency.rates.GBP}</td>
36            <td>Libra Esterlina</td>
37          </tr>
38        </>
39      )}
40    </tbody>
41  </table>
42</div>

Este ejemplo muestra cómo recibir y procesar datos en un componente React utilizando la información obtenida de una API. Dependiendo de nuestras necesidades específicas, podemos adaptar la visualización de estos datos. En este caso, los datos provienen de la API/api/currencyy lo veremos así:

Divisas hoy	Tipo de Cambio	Actualización:

¡Eso es todo para este curso deJs! La próxima vez, trabajaré para crear interfaces de usuario aún más atractivas.

JavaScript

Índice

Javascript

Funciones Flecha

TODO List

Cambio de moneda

Empezamos

A programar

Compartir en las redes: