Introducción

En este laboratorio, ingresará al mundo del desarrollo web a través de los ojos de Alex, un desarrollador web en ciernes encargado de crear un rastreador dinámico de finanzas personales. Crear una aplicación fácil de usar que permita a los usuarios ingresar y realizar un seguimiento de sus gastos e ingresos diarios. El objetivo es claro: desarrollar una interfaz que sea intuitiva y atractiva, garantizando que los usuarios puedan administrar fácilmente sus finanzas sin ningún problema. Este proyecto no solo tiene como objetivo simplificar la gestión de las finanzas personales sino también presentarle los conceptos fundamentales de JavaScript y la manipulación DOM.

Trabajaremos en 5 laboratorios para completar el proyecto EconoMe.

Puntos de conocimiento:

• Declaraciones de variables (let, const)
• Conceptos básicos de manipulación DOM (obtener elementos, modificar el contenido de los elementos)
• Escucha de eventos (addEventListener)

JavaScript básico

JavaScript es un lenguaje simple, orientado a objetos y controlado por eventos. Se descarga del servidor al cliente y lo ejecuta el navegador.

Se puede utilizar con HTML y la Web, y de manera más amplia en servidores, PC, portátiles, tabletas y teléfonos inteligentes.

Sus características incluyen:

• Normalmente se utiliza para escribir scripts del lado del cliente.
• Se utiliza principalmente para agregar comportamiento interactivo en páginas HTML.
• Es un lenguaje interpretado, ejecutado tal como es interpretado.

Entonces, ¿cómo incluimos JavaScript en HTML?

El método de inclusión es similar al CSS y se puede realizar de tres maneras:

• Directamente en las etiquetas HTML, para código JavaScript especialmente corto.
• Utilizando la etiqueta
• Utilizando un archivo JavaScript externo, escriba el código del script JavaScript en un archivo con un sufijo .js e inclúyalo configurando el atributo src de la etiqueta

Por ejemplo, si presionamos F12, podemos ver que muchos archivos JavaScript externos están incluidos en esta página, y al hacer clic en Event Listeners, podemos observar que hay muchos tipos de eventos dentro de la página. página.

Ahora, agreguemos la etiqueta

¡A continuación, aprendamos cómo definir variables en JavaScript!

¿Qué son las variables?

Las variables pueden verse como contenedores para almacenar información. En programación, utilizamos variables para almacenar valores de datos. JavaScript es un lenguaje de tipo dinámico, lo que significa que no es necesario declarar el tipo de variable. El tipo se determinará automáticamente durante la ejecución del programa.

Declaración de variables

En JavaScript, puedes usar las palabras clave var, let o const para declarar variables:

• var: antes de ES6, var era la forma principal de declarar variables y tiene alcance de función.
• let: Introducido en ES6, let le permite declarar variables locales con ámbito de bloque.
• const: también introducido en ES6, utilizado para declarar una constante que no se puede cambiar una vez declarada.

Por ejemplo:

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

Tipos de variables

En JavaScript, existen varios tipos de datos diferentes:

• Cadena: datos de texto, como "¡Hola mundo!".
• Número: números enteros o de punto flotante, como 42 o 3,14.
• Booleano: verdadero o falso.
• Objeto: Puede almacenar múltiples valores o estructuras de datos complejas.
• nulo e indefinido: tipos especiales que representan "sin valor" y "valor no definido", respectivamente.

Usando variables

Una vez declaradas las variables, puedes usarlas en tu programa:

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

El método estático console.log() envía un mensaje a la consola.

Manipulación DOM

DOM (Document Object Model) es una interfaz multiplataforma independiente del lenguaje que trata los documentos HTML y XML como una estructura de árbol , donde cada nodo es parte del documento, como elementos, atributos y contenido de texto.

Accediendo a elementos DOM

Para manipular el contenido de una página web, primero debe acceder a los elementos en el árbol DOM. Puede utilizar varios métodos para acceder a elementos, como por su ID, nombre de clase o nombre de etiqueta:

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

Agregue el siguiente código al archivo ~/project/script.js del proyecto EconoMe:

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

Modificar el contenido del elemento

Una vez que tienes una referencia a un elemento, puedes modificar su contenido. Las propiedades InnerHTML y textContent se usan comúnmente para este propósito.

Por ejemplo, para insertar

Nuevo contenido HTML

Agregar y eliminar elementos

Puedes agregar o eliminar elementos dinámicamente en la página usando JavaScript.

Por ejemplo:

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• En un documento HTML, el método document.createElement() crea el elemento HTML.
• El método document.body.appendChild() agrega el nuevo elemento al final del elemento .
• El método document.body.removeChild() elimina el elemento del elemento .

Manejo de eventos

Los detectores de eventos te permiten responder a las acciones del usuario.

addEventListener("event", function () {});

como clics, desplazamiento del cursor o pulsaciones de teclas:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

Después de aprender las operaciones básicas de DOM, puede agregar el siguiente código al archivo ~/project/script.js del proyecto EconoMe:

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

El evento DOMContentLoaded en JavaScript se activa cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los submarcos terminen de cargarse. Esto lo convierte en un evento importante para ejecutar código JavaScript tan pronto como el DOM esté listo, asegurando que el script interactúe con elementos HTML completamente analizados.

Esta práctica de laboratorio no requiere obtener una vista previa del efecto en este momento. Lo revisaremos después de completar el código en los siguientes pasos.

Resumen

En este laboratorio, te embarcaste en el viaje de construir una parte básica pero fundamental de un rastreador de finanzas personales con Alex. Ha preparado el escenario para una aplicación web dinámica configurando el entorno del proyecto y utilizando JavaScript para manipular el DOM, mostrando los estados financieros iniciales. La conclusión clave es comprender cómo interactúa JavaScript con los elementos HTML para cambiar dinámicamente el contenido de una página web, sentando las bases para funciones más interactivas en los siguientes pasos.

Este enfoque práctico no solo solidifica tu comprensión de la manipulación de JavaScript y DOM, sino que también simula escenarios de desarrollo web del mundo real, preparándote para futuros proyectos más complejos.

? Practica ahora: JavaScript básico y DOM

¿Quieres saber más?

• ? Conozca los últimos árboles de habilidades de JavaScript
• ? Leer más tutoriales de JavaScript
• ? Únase a nuestro Discord o envíenos un tweet a @WeAreLabEx