JavaScript y Manipulación del DOM
viernes, 29 de mayo de 2026 09:23
Integración de JavaScript en HTML
Para que un archivo HTML pueda ejecutar código de JavaScript (JS), es necesario vincularlos mediante
la etiqueta <script>.
• Ubicación recomendada: Se debe incluir al final del elemento <body> (justo antes de la etiqueta
de cierre </body>).
El navegador procesa y carga el documento HTML de arriba hacia abajo. Colocar el script al final
garantiza que primero se cargue toda la estructura y los estilos visuales de la página, evitando que la
carga del código de programación bloquee o retrase el renderizado de la web.
• Incluso si hay código script interno en la página, se recomienda que
vaya al final.
Sintaxis de vinculación:
<script src="[Link]"></script>
Estructura y rutas de archivos
• El estándar para nombrar el archivo principal de JavaScript es [Link] (equivalente al uso de
[Link] en maquetación), aunque también se suelen usar nombres como [Link].
• Si el archivo se encuentra dentro de una carpeta (por ejemplo, una carpeta llamada
"funcionalidades"), se debe especificar la ruta relativa correspondiente:
<script src="funcionalidades/[Link]"></script>
• A diferencia de los scripts, los archivos de estilos (como [Link]) se vinculan dentro de la
etiqueta <head>.
Variables y constantes en JavaScript
A diferencia de lenguajes como Java, JavaScript presenta características particulares en el manejo de
datos:
Tipado débil (No fuertemente tipado)
En JavaScript no es necesario declarar explícitamente el tipo de dato que va a almacenar una
variable. El tipo se define dinámicamente según el valor que se le asigne.
Declaración: Se utiliza la palabra reservada let para crear variables.
let miVariable = 4; // El sistema detecta automáticamente que es un número.
Tipos de datos principales
• String (Texto): Cadenas de caracteres.
Se sugiere utilizar comillas simples (' ') para el código de JavaScript y comillas dobles (" ") para
atributos en HTML.
• Number (Número): A diferencia de Java (que distingue entre int, float, double, etc.), JavaScript
agrupa todos los números (enteros o decimales bajo el único tipo de dato number.
• Boolean (Booleano): Representa valores lógicos de verdadero o falso (true o false).
Constantes (const)
Se declaran con la palabra reservada const. Se utilizan para almacenar valores que no deben cambiar
durante la ejecución del programa.
- Uso en el DOM: En desarrollo web se recurre constantemente a const para guardar elementos
• Boolean (Booleano): Representa valores lógicos de verdadero o falso (true o false).
Constantes (const)
Se declaran con la palabra reservada const. Se utilizan para almacenar valores que no deben cambiar
durante la ejecución del programa.
- Uso en el DOM: En desarrollo web se recurre constantemente a const para guardar elementos
seleccionados del HTML (como un título <h1> o un <button>). Esto se debe a que, a menos que se
elimine activamente del documento, el elemento en sí sigue existiendo como el mismo objeto en la
estructura, por lo que su referencia debe ser constante.
Estructuras de control e iteraciones
La sintaxis de las estructuras lógicas en JavaScript es sumamente similar a la de Java.
Condicionales (if, else if, else)
Siguen la misma estructura lógica para evaluar condiciones sucesivas:
if (condicion1) {
// Código si se cumple la condición 1
} else if (condicion2) {
// Código si se cumple la condición 2
} else {
// Código si no se cumple ninguna
}
Operadores de igualdad
• Asignación (=): Se usa para asignar un valor a una variable.
• Comparación de valor o igualdad débil (==): Compara si los valores son iguales, realizando una
conversión de tipo implícita si es necesario.
• Igualdad estricta (===): Compara tanto el valor como el tipo de dato. Es el operador
recomendado para evitar errores.
• Ejemplo: Con el operador de igualdad estricta, la comparación evalúa de manera exacta. Por
ejemplo, en cadenas de texto, validará que coincidan estrictamente las mayúsculas, minúsculas o
caracteres especiales (como tildes), impidiendo que se ignore cualquier diferencia sutil.
Salida de datos y depuración ([Link])
En lugar de usar [Link]() (como en Java), en JavaScript se utiliza:
[Link]("Mensaje a mostrar");
- Consola del Navegador: Esta instrucción no muestra texto directamente en la página web que ve
el usuario general, sino en la consola de herramientas de desarrollo del navegador (F12 o clic
derecho -> Inspeccionar -> Consola). Es una herramienta fundamental para depurar (debug) y
verificar el flujo del programa.
Control de errores y comentarios
• Comentarios: Al igual que en Java, se utiliza // para comentarios de una sola línea y /* */ para
comentarios multilínea.
• Bloques try-catch: Sirven para envolver secciones de código propensas a errores. Si ocurre un
fallo dentro de un bloque controlado, el error es capturado por el catch y el programa puede
continuar ejecutando el resto de las instrucciones ubicadas debajo sin detenerse por completo.
Bucles e iteraciones
• while: Evalúa primero la condición; si se cumple, ejecuta el bloque de código de forma iterativa.
• do-while: Ejecuta el bloque de código obligatoriamente al menos una vez, y después evalúa la
condición para decidir si repite el ciclo. Es útil cuando se requiere solicitar un dato por primera
vez antes de validarlo.
• for (Iteración por rango): Se utiliza cuando se conoce de antemano el número de iteraciones o el
límite de un arreglo ([Link]).
• Sintaxis:
Bucles e iteraciones
• while: Evalúa primero la condición; si se cumple, ejecuta el bloque de código de forma iterativa.
• do-while: Ejecuta el bloque de código obligatoriamente al menos una vez, y después evalúa la
condición para decidir si repite el ciclo. Es útil cuando se requiere solicitar un dato por primera
vez antes de validarlo.
• for (Iteración por rango): Se utiliza cuando se conoce de antemano el número de iteraciones o el
límite de un arreglo ([Link]).
• Sintaxis:
for (let i = 1; i <= 10; i++) {
// Código que se repite
}
Incrementos/decrementos
• i++ es la abreviatura de i = i + 1 (incremento de uno en uno).
• i-- realiza un decremento (ideal para cuentas regresivas de 10 a 1).
• i += 2 realiza saltos (por ejemplo, para iterar de dos en dos).
Funciones en JavaScript
En Java, los bloques de código ejecutable se dividen formalmente en métodos (funciones que
devuelven un valor con return y exigen declarar un tipo de dato) y procedimientos (que ejecutan
acciones sin retornar nada, definidos como void).
En JavaScript, no existe esa distinción formal: todo se define con la palabra clave function.
Características de las funciones en JS:
• No requieren especificar un tipo de retorno en su declaración.
• Pueden retornar cualquier tipo de dato (un número, un texto, booleanos o incluso estructuras
HTML) o no retornar nada.
• Parámetros: No necesitan que se defina su tipo de dato al declararlos en el cabezal de la
función.
• Orden de parámetros: Al invocar la función, los argumentos deben pasarse en el mismo orden en
que fueron definidos en los parámetros. Si se altera el orden y la función espera operar con un
tipo específico, el código podría fallar.
// Declaración de una función con parámetros
function saludar(nombre, num) {
[Link]("Hola " + nombre + " " + num);
}
// Llamada o invocación de la función
saludar('Julián', 4);
Las funciones de tipo flecha o "arrow functions" representan una alternativa sintáctica para que la
función se llame a sí misma, las cuales se profundizarán más adelante).
Manipulación del DOM (Document object model)
El DOM es la estructura de objetos que representa a nuestro documento HTML. JavaScript nos
permite interactuar con él para volver los sitios web dinámicos.
Selectores de elementos
Para interactuar con un elemento del HTML, primero debemos seleccionarlo desde JavaScript
utilizando el objeto document:
[Link]('selector')
• Permite seleccionar etiquetas ('h1'), clases ('.mi-clase'), etc.
• Particularidad: Solo selecciona el primer elemento que coincida con el criterio de búsqueda
en un recorrido de arriba hacia abajo por el documento.
[Link]('nombreID')
• Selecciona un único elemento mediante su atributo id.
No requiere usar el símbolo de almohadilla (#), solo se escribe el nombre del ID.
[Link]('selector')
• Permite seleccionar etiquetas ('h1'), clases ('.mi-clase'), etc.
• Particularidad: Solo selecciona el primer elemento que coincida con el criterio de búsqueda
en un recorrido de arriba hacia abajo por el documento.
[Link]('nombreID')
• Selecciona un único elemento mediante su atributo id.
No requiere usar el símbolo de almohadilla (#), solo se escribe el nombre del ID.
• Dato técnico de compatibilidad: Aunque los navegadores modernos suelen mapear
automáticamente los ID del HTML como variables globales en JS, se recomienda utilizar siempre
el selector manual para asegurar una compatibilidad del 99% en todos los navegadores.
[Link]('selector')
• Selecciona todos los elementos del documento que coincidan con el selector especificado,
devolviendo una colección de elementos (útil para aplicar cambios grupales).
Métodos para modificar elementos seleccionados
Una vez guardado un elemento en una constante, podemos alterar sus propiedades:
• textContent: Permite leer o modificar el contenido de texto plano de un elemento. No
interpreta etiquetas HTML.
[Link] = 'Nuevo título';
• innerHTML: Permite insertar o modificar el contenido, interpretando
etiquetas de HTML dentro de la cadena de texto asignada.
[Link] = '<strong>Hola</strong>'; // Muestra "Hola" en negrita.
• classList: Método para gestionar las clases CSS aplicadas a un elemento:
- [Link]('clase'): Añade una clase al elemento.
- [Link]('clase'): Quita una clase del elemento.
- [Link]('clase'): Funciona como un interruptor o perilla de luz. Si la clase no está en el
elemento, la agrega; si ya está aplicada, la remueve de forma automática.
• [Link]: Modifica directamente estilos CSS en línea del elemento.
[Link] = 'green';
Eventos y event listeners
Los eventos representan interacciones del usuario con la página. JavaScript utiliza los EventListener
(análogos a los ActionListeners en las interfaces de Java) para "escuchar" y reaccionar a estas
acciones.
Estructura de un event listener:
[Link]('evento', function() {
// Bloque de código que se ejecuta al ocurrir el evento
});
• La función utilizada como segundo argumento generalmente es una función anónima (no
requiere nombre porque es invocada directamente por el propio escuchador de eventos).
Tipos de eventos comunes
• click: Se activa cuando el usuario hace clic en el elemento (botones, enlaces, títulos, etc.).
• submit: Se ejecuta al enviar un formulario (ideal para realizar validaciones previas antes del
envío definitivo).
• input: Se acciona en tiempo real mientras el usuario escribe caracteres dentro de un campo de
texto (<input>).
• mouseover: Equivalente al comportamiento hover de CSS; detecta cuando el puntero del mouse
se posiciona sobre un elemento (por ejemplo, para mostrar tooltips o recuadros informativos).
• change: Se dispara al cambiar la selección en elementos como listas desplegables, checkbox o
botones de opción (radio). Ejemplo práctico: Al seleccionar la opción "Otro" en un formulario, se
puede desencadenar un cambio para desplegar un campo de texto adicional.
• keydown: Registra la presión de teclas físicas (por ejemplo, usar la barra espaciadora para
pausar un video o la tecla Escape para regresar a un menú).
• mouseover: Equivalente al comportamiento hover de CSS; detecta cuando el puntero del mouse
se posiciona sobre un elemento (por ejemplo, para mostrar tooltips o recuadros informativos).
• change: Se dispara al cambiar la selección en elementos como listas desplegables, checkbox o
botones de opción (radio). Ejemplo práctico: Al seleccionar la opción "Otro" en un formulario, se
puede desencadenar un cambio para desplegar un campo de texto adicional.
• keydown: Registra la presión de teclas físicas (por ejemplo, usar la barra espaciadora para
pausar un video o la tecla Escape para regresar a un menú).
Análisis de ejemplos prácticos de la clase
Ejemplo 1: Modificación de texto y color en un H1
• Estructura HTML: Un encabezado <h1> con el ID titulo y un botón con el ID BTN que muestra el
texto "Cambio de texto".
• Lógica en JavaScript ([Link]):
// Selección de elementos por ID
const titulo = [Link]('titulo');
const boton = [Link]('BTN');
// Escucha del clic para modificar texto y estilo CSS
[Link]('click', function() {
[Link] = 'Texto cambiado';
[Link] = 'green';
});
Generador dinámico de elementos de lista con validación
• Lógica en JavaScript: El sistema toma el valor de un campo de entrada de texto (input). Si el
campo está vacío al intentar agregar, modifica un elemento del DOM para mostrar una
advertencia en color rojo ("Escribe tu nombre primero" / "Escribe un ítem primero").
Si contiene texto, crea un elemento de lista (<li>) usando [Link]('li'), crea un
botón de eliminación (<button>) con el texto "Eliminar", asocia el botón al elemento de lista mediante
appendChild(), e inserta todo el conjunto en la lista ordenada o desordenada del HTML.
Uso del operador ternario: Para actualizar el indicador de cantidad de ítems agregados, se utiliza una
estructura condicional compacta
(operador ternario):
// Sintaxis: (condición) ? expresión_si_verdadero : expresión_si_falso
[Link] = (total === 1) ? 'ítem' : 'ítems';
Interruptor de modo oscuro (Dark Mode)
• Lógica en JavaScript: Se asocia un toggle al botón de cambio de modo para alterar la clase del
cuerpo del documento (<body>):
const botonModo = [Link]('boton-modo');
const labelModo = [Link]('label-modo');
[Link]('click', function() {
// Añade o remueve de forma alternada la clase 'oscuro' al body
[Link]('oscuro');
// Comprueba si la clase está presente para actualizar el texto explicativo
if ([Link]('oscuro')) {
[Link] = 'Modo oscuro activado';
} else {
[Link] = 'Modo claro activado';
}
});
Funcionamiento de la cascada CSS: Este sistema aprovecha la naturaleza en cascada de las hojas de
estilo de CSS. Al añadirse la clase .oscuro al elemento <body>, las nuevas reglas de color definidas en
esa clase sobrescriben las propiedades de color claro por defecto que estaban declaradas previamente.