En este Laboratorio (Lab), te adentrarás en el mundo del desarrollo web a través de los ojos de Alex, un joven desarrollador web encargado de crear un rastreador financiero personal dinámico. El objetivo es construir una aplicación amigable para el usuario que permita a los usuarios ingresar y rastrear 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 tiene como objetivo simplificar la gestión financiera personal, sino también presentarte los conceptos fundamentales de JavaScript y la manipulación del DOM (Document Object Model).
Trabajaremos a través de 5 laboratorios (labs) para completar el proyecto EconoMe.
Puntos de conocimiento:
Declaraciones de variables (let, const)
Conceptos básicos de manipulación del DOM (obtener elementos, modificar el contenido de los elementos)
Escucha de eventos (addEventListener)
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"])
javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"])
javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"])
javascript/BasicConceptsGroup -.-> javascript/variables("Variables")
javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types")
javascript/AdvancedConceptsGroup -.-> javascript/es6("ES6 Features")
javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection")
javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation")
javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling")
javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal")
subgraph Lab Skills
javascript/variables -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/data_types -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/es6 -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/dom_select -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/dom_manip -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/event_handle -.-> lab-290729{{"JavaScript y DOM Básicos"}}
javascript/dom_traverse -.-> lab-290729{{"JavaScript y DOM Básicos"}}
end
JavaScript Básico
JavaScript es un lenguaje simple, orientado a objetos y basado en eventos. Se descarga desde el servidor al cliente y se ejecuta en el navegador.
Se puede utilizar con HTML y en la Web, y más ampliamente en servidores, PC, laptops, tabletas y teléfonos inteligentes.
Sus características incluyen:
Típicamente se utiliza para escribir scripts del lado del cliente.
Se utiliza principalmente para agregar comportamiento interactivo en páginas HTML.
Es un lenguaje interpretado, se ejecuta a medida que se interpreta.
Entonces, ¿cómo incluimos JavaScript en HTML?
El método de inclusión es similar al de CSS y se puede hacer de tres maneras:
Directamente en las etiquetas HTML, para código JavaScript especialmente corto.
Utilizando la etiqueta <script>, el código JavaScript se puede incrustar en la sección <head> y <body> del documento HTML.
Utilizando un archivo JavaScript externo, escribe el código del script JavaScript en un archivo con la extensión .js e inclúyelo configurando el atributo src de la etiqueta <script>.
Por ejemplo, si presionamos F12, podemos ver que esta página incluye muchos archivos JavaScript externos, y al hacer clic en Event Listeners (Escuchadores de eventos), podemos observar que hay muchos tipos de eventos dentro de la página.
Ahora, agreguemos la etiqueta <script> a ~/project/index.html para incluir el archivo script.js.
A continuación, aprendamos cómo definir variables en JavaScript.
¿Qué son las Variables?
Las variables se pueden considerar como contenedores para almacenar información. En programación, utilizamos variables para almacenar valores de datos. JavaScript es un lenguaje de tipado dinámico, lo que significa que no es necesario declarar el tipo de una variable. El tipo se determinará automáticamente durante la ejecución del programa.
Declaración de Variables
En JavaScript, se pueden utilizar las palabras clave var, let o const para declarar variables:
var: Antes de ES6, var era la forma principal de declarar variables y tiene ámbito de función (function scope).
let: Introducida en ES6, let permite declarar variables locales con ámbito de bloque (block-scoped).
const: También introducida en ES6, se utiliza para declarar una constante que no se puede cambiar una vez declarada.
Por ejemplo:
var name = "Alice"; // Usando var para declarar una variable
let age = 30; // Usando let para declarar una variable
const city = "London"; // Usando const para declarar una constante
Tipos de Variables
En JavaScript, hay varios tipos de datos diferentes:
String: Datos de texto, como "Hello, World!".
Number: Números enteros o de punto flotante, como 42 o 3.14.
Boolean: true o false.
Object: Puede almacenar múltiples valores o estructuras de datos complejas.
null y undefined: Tipos especiales que representan "sin valor" y "valor no definido", respectivamente.
Uso de Variables
Una vez que se declaran las variables, se pueden utilizar en el programa:
console.log(name); // Muestra en consola: Alice
console.log("Age: " + age); // Muestra en consola: Age: 30
console.log(city + " is a beautiful city"); // Muestra en consola: London is a beautiful city
El método estático console.log() muestra un mensaje en la consola.
Manipulación del DOM
El DOM (Documento Objecto Modelo) es una interfaz multiplataforma e independiente del lenguaje que trata los documentos HTML y XML como una estructura de árbol, donde cada nodo es una parte del documento, como elementos, atributos y contenido de texto.
Acceso a Elementos del DOM
Para manipular el contenido de una página web, primero debes acceder a los elementos en el árbol del DOM. Puedes utilizar varios métodos para acceder a los elementos, como por su ID, nombre de clase o nombre de etiqueta:
let elementById = document.getElementById("elementId"); // Acceder a un elemento por su ID
let elementsByClassName = document.getElementsByClassName("className"); // Acceder a una colección de elementos por su nombre de clase
let elementsByTagName = document.getElementsByTagName("tagName"); // Acceder a una colección de elementos por su nombre de etiqueta
Agrega el siguiente código al archivo ~/project/script.js del proyecto EconoMe:
Una vez que tienes una referencia a un elemento, puedes modificar su contenido. Las propiedades innerHTML y textContent se utilizan comúnmente para este propósito.
Por ejemplo, para insertar <p>New HTML content</p> en un elemento div con id=content y reemplazar "Hello" con "New text content" en un elemento span con id=info, utilizarías el siguiente código JavaScript:
Adición y Eliminación de Elementos
Puedes agregar o eliminar elementos dinámicamente en la página utilizando JavaScript.
Por ejemplo:
// Crear un nuevo elemento
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Agregar el nuevo elemento al cuerpo del documento
document.body.removeChild(newElement); // Eliminar el elemento del cuerpo del documento
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 <body>.
El método document.body.removeChild() elimina el elemento del elemento <body>.
Los escuchadores de eventos (event listeners) te permiten responder a las acciones del usuario.
addEventListener("event", function () {});
Como clics, pasar el cursor por encima o pulsaciones de teclas:
elementById.addEventListener("click", function () {
console.log("Element was clicked!");
});
Después de aprender las operaciones básicas del DOM, puedes 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; // Índice del elemento arrastrado
});
El evento DOMContentLoaded en JavaScript se dispara cuando el documento HTML inicial se ha cargado y analizado completamente, 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.
En este laboratorio (lab) no es necesario previsualizar el efecto en este momento. Lo revisaremos después de completar el código en los siguientes pasos.
En este laboratorio (lab), has comenzado el viaje de construir una parte básica pero fundamental de un seguimiento de finanzas personales con Alex. Has establecido las bases 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 principal lección es comprender cómo JavaScript interactúa con los elementos HTML para cambiar dinámicamente el contenido de una página web, sentando las bases para características más interactivas en los siguientes pasos.
Este enfoque práctico no solo refuerza tu comprensión de JavaScript y la manipulación del DOM, sino que también simula escenarios reales de desarrollo web, preparándote para proyectos más complejos en el futuro.
