JavaScript Tutoriales

En este laboratorio (Lab), entrarás al mundo del desarrollo web a través de los ojos de Alex, un desarrollador web en formación encargado de crear un seguimiento dinámico de finanzas personales. El objetivo es construir una aplicación amigable para el usuario que permita a los usuarios ingresar y seguir sus gastos e ingresos diarios. El objetivo es claro: desarrollar una interfaz que sea intuitiva y atractiva, asegurando que los usuarios puedan administrar fácilmente sus finanzas sin problemas. Este proyecto no solo busca simplificar la gestión de finanzas personales, sino también introducirte a los conceptos fundamentales de JavaScript y la manipulación del DOM.

En este proyecto, aprenderás a crear una simple accordion plegable utilizando HTML, CSS y JavaScript. La accordion plegable es un elemento de interfaz de usuario común que permite a los usuarios expandir y contraer secciones de contenido, lo que la convierte en una característica útil para mostrar información de manera compacta y organizada.

En este proyecto, aprenderás a crear un sistema de semáforos que cambia el color de la luz de roja a verde después de un intervalo de tiempo determinado. Este proyecto te ayudará a entender los conceptos básicos de JavaScript y cómo manipular el DOM para mostrar diferentes elementos basados en eventos basados en el tiempo.

En este proyecto, aprenderás a construir una aplicación de votación que permite a los usuarios crear y administrar opciones de votación, así como eliminar opciones si es necesario. La aplicación también incluye características para el soporte de selección múltiple y los resultados de votación públicos.

En este proyecto, aprenderás a crear un sencillo juego 'Fruit for Fun' utilizando HTML, CSS y JavaScript. El juego consiste en emparejar pares de imágenes de frutas haciendo clic en los cuadrados del tablero de juego.

En este proyecto, aprenderás a crear un sencillo juego de apilamiento de frutas utilizando HTML, CSS y JavaScript. El objetivo es apilar los elementos de fruta que caen en la parte superior de la página en la caja ubicada en la parte inferior. Si hay tres frutas idénticas en la caja, se eliminarán automáticamente.

Este proyecto te guía a través del proceso de implementar un modelo MobileNetV2 pre-entrenado utilizando TensorFlow.js dentro de una aplicación web Flask. MobileNetV2 es una red neuronal profunda ligera utilizada principalmente para la clasificación de imágenes. TensorFlow.js permite ejecutar modelos de aprendizaje automático directamente en el navegador, lo que posibilita aplicaciones web interactivas. Flask, un marco web de Python, servirá como el backend para alojar nuestra aplicación. Al final de este proyecto, tendrás una aplicación web en funcionamiento que clasifica imágenes en tiempo real utilizando el modelo MobileNetV2.

En este laboratorio, situado en el bullicioso entorno de startups de 'FinTech Valley', te convertirás en Alex, un joven ingeniero de software encargado de mejorar el sistema de seguimiento financiero de una empresa tecnológica en rápido crecimiento. El equipo financiero de la empresa necesita una forma dinámica de visualizar la salud financiera general de la organización. Tu objetivo es implementar una característica en su aplicación de contabilidad basada en la web existente que calcule y muestre el ingreso total, los gastos totales y el balance neto, brindando información financiera en tiempo real.

En este Laboratorio, la jornada de Alex en el desarrollo del seguidor de finanzas personales entra en una etapa avanzada, centrándose en mejorar la interactividad de la aplicación a través de técnicas sofisticadas de manejo de eventos. La escena se desarrolla en una sesión de sesiones de idea generación en la startup tecnológica, donde Alex propone agregar una característica de arrastrar y soltar para reordenar los registros financieros. Esta ambiciosa meta tiene como objetivo brindar a los usuarios una forma intuitiva de organizar sus registros, reflejando la naturaleza fluida de la gestión de finanzas personales. Lograr esto requiere que Alex explore los eventos DOM avanzados y manipule los elementos de una manera que sea atractiva visualmente y amigable para el usuario.

En este laboratorio, acompañamos a Alex, un desarrollador web decidido en una empresa tecnológica en full actividad, que ahora se aventura en el campo de la persistencia de datos. Después de crear con éxito un mecanismo para rastrear y mostrar registros financieros en el seguidor de finanzas personales, el siguiente desafío es garantizar que estos registros persistan a través de las sesiones del navegador. El objetivo es permitir a los usuarios volver a la aplicación y encontrar todos sus datos previamente ingresados intactos, mejorando la usabilidad de la aplicación y la satisfacción del usuario. Esta tarea introduce a Alex al concepto de almacenamiento web, en particular aprovechando la API localStorage para guardar y recuperar el estado de la aplicación.

2048 es un juego extremadamente popular y fácil de aprender que ha tomado el mundo por la tormenta. Si aún no lo has jugado, puedes descargarlo en tu teléfono móvil para probarlo. Este proyecto te guiará en el uso de HTML, CSS, JavaScript y jQuery para crear una versión web del juego 2048.

En este laboratorio, continuamos siguiendo a Alex en su camino como desarrollador web en una startup tecnológica. La escena se desarrolla en el espacio de trabajo del equipo de desarrollo, donde a Alex se le encomienda mejorar el rastreador de finanzas personales incorporando la capacidad de manejar múltiples registros financieros. Esta característica crucial requiere que Alex profundice en los arrays y objetos de JavaScript, almacenando cada registro financiero como un objeto dentro de un array. El objetivo es crear una aplicación dinámica e interactiva que no solo rastree sino que también organice eficientemente los datos financieros de los usuarios. A través de este empeño, Alex pretende brindar a los usuarios una visión clara de sus actividades financieras, haciéndola más útil y atractiva.

En este proyecto, aprenderás a crear un tablero de control de ventas en tiempo real utilizando la biblioteca Echarts. El tablero de control mostrará los datos de ventas y volumen en un formato visualmente atractivo y fácil de entender.

En este proyecto, aprenderás a crear una aplicación web interactiva de colección de películas utilizando HTML, CSS y JavaScript (jQuery). La aplicación permite a los usuarios marcar sus películas favoritas y, cuando se crea una colección de películas favoritas, se muestra un mensaje de éxito.

Este proyecto, el 'Juego de rompecabezas Flip con jQuery', ofrece una experiencia práctica en el desarrollo web, centrándose en JavaScript, jQuery y Bootstrap. Implica la programación orientada a objetos en JavaScript y aborda el problema común del enlace de 'this' en el contexto del desarrollo web. El juego se implementa utilizando jQuery y Bootstrap 3 para la interfaz de usuario. Si bien es útil tener conocimientos de Bootstrap, la lógica central del proyecto se construye con jQuery y JavaScript.

En este proyecto, aprenderás a crear una aplicación simple de sorteo de premios utilizando JavaScript y jQuery. La aplicación simulará un sorteo de premios rotando una lista de premios y mostrando el premio ganador cuando la rotación se detiene.

En este proyecto, aprenderás a crear una aplicación de filtro de colores utilizando React. La aplicación permitirá a los usuarios filtrar una lista de colores escribiendo el nombre del color que buscan. Este proyecto te ayudará a entender cómo trabajar con la gestión de estado, el manejo de eventos y la renderización condicional en React.

En este proyecto, crearemos un sencillo editor de Markdown basado en la web que ofrece una vista previa HTML en vivo a medida que escribes. Utilizando bibliotecas como Ace Editor, marked y highlight.js, desarrollarás un editor intuitivo que no solo permite escribir en Markdown, sino que también guarda datos a través de las sesiones del navegador y resalta fragmentos de código en la vista previa.