Contenido verificado asociado a este RA
Objetos Predefinidos del Lenguaje JavaScript: Fundamentos y Uso
Esta unidad introduce los objetos predefinidos fundamentales de JavaScript, como String, Number, Boolean, Array, Date y Math, explicando su propósito y cómo sus propiedades y métodos facilitan la manipulación de datos y la lógica de programación. Se enfatiza su aplicación práctica en el desarrollo web.
Interacción con el Navegador y el Documento: Objetos Window y Document (DOM)
Esta unidad explora los objetos `window` y `document`, pilares de la interacción JavaScript con el navegador y el contenido HTML. Se detalla cómo acceder a elementos del DOM, modificar su estructura y estilo, y gestionar la navegación y las propiedades de la ventana del navegador.
Gestión de Múltiples Ventanas, Marcos y Almacenamiento de Datos en Cliente
Esta unidad aborda la interacción entre múltiples ventanas y marcos (iframes) en el navegador, así como el uso de cookies para almacenar y recuperar información persistente en el lado del cliente, fundamental para mantener estados de usuario o preferencias.
Depuración y Documentación de Código JavaScript
Esta unidad cubre las técnicas esenciales para depurar código JavaScript en el navegador, identificar y corregir errores, y la importancia de documentar el código de manera efectiva para mejorar su mantenibilidad y comprensión por otros desarrolladores.
Conceptos clave
Objeto predefinidoPropiedadMétodoInstanciaObjeto estáticoManipulación de datosObjeto WindowObjeto DocumentDOM (Document Object Model)Manipulación del DOMNodos HTMLSelectores CSSEventos del navegadorComunicación entre ventanasIframeSame-Origin Policywindow.postMessageCookies
Errores que conviene evitar
- Confundir métodos de instancia con métodos estáticos: Por ejemplo, intentar `String.substring()` en lugar de `miCadena.substring()`. Causa: No entender que algunos métodos requieren una instancia del objeto. Corrección: Recordar que `Math` es estático, mientras que `String`, `Number`, `Array`, `Date` requieren una instancia para la mayoría de sus métodos.
- No verificar tipos antes de usar métodos: Intentar usar un método de `String` en una variable que contiene un `Number` o `undefined`. Causa: Asumir el tipo de dato. Corrección: Usar `typeof` o `instanceof` para verificar el tipo antes de llamar a métodos específicos.
- Intentar manipular el DOM antes de que esté completamente cargado: Causa: El script se ejecuta antes de que los elementos HTML existan. Corrección: Colocar el script al final del `<body>` o usar `DOMContentLoaded` (`document.addEventListener('DOMContentLoaded', function() { ... });`).
- Usar `innerHTML` para contenido generado por el usuario sin sanitizar: Causa: Riesgo de inyección de código (XSS). Corrección: Usar `textContent` para insertar texto plano o sanitizar cuidadosamente el HTML si es necesario.
- Confundir `getElementById` (singular) con `getElementsByClassName` o `querySelectorAll` (colecciones): Causa: Esperar un solo elemento cuando se devuelve una NodeList o HTMLCollection. Corrección: Iterar sobre las colecciones (`for...of` o `forEach`) o acceder a elementos por índice (`[0]`).
- Ignorar la Same-Origin Policy: Intentar acceder directamente al contenido de un iframe de otro dominio. Causa: Violación de seguridad del navegador. Corrección: Usar `window.postMessage()` para una comunicación segura entre orígenes diferentes, o asegurarse de que todos los recursos provengan del mismo origen.
- No establecer la fecha de caducidad (`expires`) para cookies persistentes: Causa: La cookie se convierte en una cookie de sesión y se elimina al cerrar el navegador, perdiendo la persistencia deseada. Corrección: Siempre especificar `expires` con una fecha futura para cookies que deben persistir.
- No sanitizar los valores de las cookies al leerlos: Causa: Riesgo de inyección de código si un atacante ha logrado modificar la cookie. Corrección: Tratar siempre los valores de las cookies como datos potencialmente no seguros y sanitizarlos antes de usarlos en el DOM o en lógica sensible.