Introducción a JavaScript
Fundamentos de JavaScript para Principiantes
Instalación y Configuración de JavaScript en Visual Studio Code
Instalación y configuración de Visual Studio Code y Node.js en Windows
Variables y Buenas Prácticas en JavaScript
Tipos de Datos en JavaScript: Primitivos y Complejos
Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings
Números y Operaciones Matemáticas en JavaScript
Conversión de Tipos en JavaScript: Implícita y Explícita
Conversión de Tipos en JavaScript: Explícita e Implícita
Estructuras de Control y Lógica
Operadores de Comparación en JavaScript: Igualdad y Desigualdad
Operadores Lógicos en Programación: AND, OR y NOT
Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript
Juego de Adivinanza: Programación con Estructuras Condicionales
Estructura y uso del condicional Switch en programación
Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript
Iteración con for-of en JavaScript para arrays y strings
Iteración sobre Objetos con forIn en JavaScript
Uso del ciclo while para iteración en programación
Ciclos doWhile: Estructura y Diferencias con While
Funciones y This
Funciones en JavaScript: Cómo Calcular Precios con Descuentos
Diferencias entre Funciones y Métodos en JavaScript
Funciones Puras e Impuras en Programación: Conceptos y Ejemplos
Arrow Functions y Enlace Léxico en JavaScript
Scope y Contextos de Ejecución en JavaScript
Closures y Ámbito Léxico en JavaScript
Fundamentos del Desarrollo Web: Frontend y Backend
Manipulación de Arrays
Arrays: Propiedades, Acceso y Creación en Programación
Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos
Métodos push y pop para modificar arrays en JavaScript
Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos
Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos
Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos
Uso del método slice para extraer porciones de un array en JavaScript
Uso del Spread Operator en JavaScript: Copia, Combinación y Más
Programación Orientada a Objetos
Programación Orientada a Objetos en JavaScript: Conceptos y Práctica
Creación y Manipulación de Objetos en JavaScript
Función constructora y gestión de instancias en JavaScript
Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna
Programación Orientada a Objetos en JavaScript: Clases y Prototipos
Prototipos y Herencia en JavaScript: Construcción y Uso Práctico
Métodos y herencia prototípica en JavaScript
Uso de "this" en Clases y Funciones Constructoras
Validación de Usuarios en una Red Social: Algoritmo Básico
Implementación de la Función Sign-In y Validación de Usuario
Asincronía en JavaScript
Programación Síncrona y Asíncrona en JavaScript
Promesas en JavaScript: Asincronía y Manejo de Estados
Uso de Async/Await para Promesas Asíncronas en JavaScript
Peticiones asíncronas con for await en JavaScript
Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición
Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network
Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE
Envío de Datos al Servidor con JavaScript y Fetch API
Eliminar Posts con JavaScript y Delegación de Eventos
Manejo de IDs en JavaScript para eliminar artículos del DOM
Actualizaciones y Nuevas Funciones en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE
51/55¿Cómo hacer peticiones HTTP escalables en JavaScript?
Las peticiones HTTP son fundamentales para la interacción con servidores y APIs, un proceso esencial en la creación de aplicaciones web. Implementar estas peticiones de manera eficiente puede marcar una gran diferencia en el rendimiento general de una aplicación. Aquí aprenderás a estructurar un código de JavaScript que permita realizar peticiones como GET, POST y DELETE de forma escalable.
¿Qué estructura necesita una función para realizar peticiones HTTP?
Para gestionar las peticiones HTTP de manera centralizada, utilizaremos la función sendHttpRequest. Esta función se encargará de recibir el método HTTP, la URL y el tipo de datos que se enviarán en la petición.
function sendHttpRequest(method, url, data) {
return fetch(url, {
method: method,
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json());
}
¿Cómo utilizar fetchPost para obtener datos?
La función fetchPost es la encargada de hacer uso de sendHttpRequest para realizar una petición GET que recuperará posts de una URL específica.
async function fetchPost() {
const responseData = await sendHttpRequest('GET', 'https://jsonplaceholder.typicode.com/posts');
console.log(responseData);
}
¿Cómo imprimir y manipular datos en el DOM?
Una vez que se obtiene la respuesta del servidor, es crucial mostrar esos datos en la interfaz. Para ello, se utiliza la manipulación del DOM en JavaScript.
const listElement = document.getElementById('post-list');
function renderPosts(posts) {
for (const post of posts) {
const postElement = document.createElement('article');
postElement.className = 'post';
const postTitle = document.createElement('h2');
postTitle.textContent = post.title;
const postBody = document.createElement('p');
postBody.textContent = post.body;
postElement.appendChild(postTitle);
postElement.appendChild(postBody);
listElement.appendChild(postElement);
}
}
// Llamar a fetchPost y renderizar los posts en el DOM.
fetchPost().then(responseData => {
renderPosts(responseData);
});
¿Cómo interactuar con botones para cargar contenido?
Para completar la interacción, necesitamos garantizar que la función fetchPost se ejecute al hacer clic en un botón específico.
const fetchButton = document.getElementById('fetch-button');
fetchButton.addEventListener('click', fetchPost);
Por medio de este proceso, puedes cargar datos desde un servidor y mostrarlos directamente en tu aplicación, manteniendo tus peticiones HTTP organizadas y escalables. A través de la práctica continua, dominarás la manipulación del DOM, el uso del API Fetch y el manejo de promesas, habilidades esenciales para cualquier desarrollador web moderno. ¡Sigue avanzando y mejorando tus habilidades!
Aportes 17
Preguntas 2
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?