Resumen del tema
Modelo de Objetos Predefinidos en JavaScript: Guía de Referencia Técnica
Resumen Ejecutivo
JavaScript es un lenguaje basado en objetos donde cada entidad se define por sus propiedades (estado) y sus métodos (funciones de acción). Este documento sintetiza la jerarquía y funcionalidad de los objetos de alto nivel y los objetos nativos integrados en el lenguaje.
El objeto window se sitúa en la cúspide de la jerarquía, actuando como contenedor global de toda la interfaz del navegador. Bajo su jurisdicción se encuentran objetos críticos como location (gestión de URLs), navigator (información del cliente), y document, el cual proporciona la interfaz DOM (Document Object Model) para la manipulación de documentos HTML y XML. Complementariamente, JavaScript ofrece objetos nativos como String, Math, Number, Boolean y Date, que facilitan el tratamiento de datos y operaciones lógicas, matemáticas y cronológicas.
--------------------------------------------------------------------------------
1. Fundamentos del Modelo de Objetos
En JavaScript, un objeto es una entidad con una estructura definida que permite interactuar con sus componentes mediante la siguiente sintaxis:
* Propiedades: nombreObjeto.propiedad (o mediante su índice numérico comenzando en 0).
* Métodos: nombreObjeto.metodo([parámetros]). Los paréntesis son obligatorios para invocar la función, incluso sin parámetros.
El Modelo de Objetos del Documento (DOM)
El W3C define el DOM como una API (Interfaz de Programación de Aplicaciones) para documentos HTML válidos y XML bien construidos. Este modelo describe el contenido del documento como un conjunto de objetos sobre los cuales JavaScript puede actuar, definiendo su estructura lógica y el modo de acceso y manipulación.
--------------------------------------------------------------------------------
2. Objetos de Alto Nivel del Navegador
2.1. El Objeto window
Representa la ventana o pestaña abierta en el navegador. Es el objeto de mayor jerarquía y se define en memoria tan pronto como se abre una ventana, incluso si no hay un documento cargado.
* Alcance: Incluye el área de contenido, barras de desplazamiento, herramientas y estado.
* Referencia: Puede referenciarse como window o self. Dado que es el contenedor global, sus propiedades y métodos pueden invocarse omitiendo el nombre del objeto (ej. alert() en lugar de window.alert()).
* Gestión de Sub-ventanas: Aunque un script no crea la ventana principal, puede generar sub-ventanas mediante window.open(url, nombre, apariencia). Es crucial asignar esta apertura a una variable para poder manipular la sub-ventana posteriormente (ej. subVentana.close()).
Propiedades Clave Descripción
closed Indica si la ventana ha sido cerrada (Booleano).
document Devuelve el objeto document asociado.
opener Referencia a la ventana que abrió la actual.
frames[] Array con todos los marcos (incluidos iframes).
Métodos Críticos Funcionalidad
alert() / confirm() / prompt() Ventanas emergentes para avisos, confirmaciones o entrada de datos.
setInterval() / clearInterval() Gestión de cronómetros y ejecución por intervalos.
focus() / blur() Control del foco de la ventana.
2.2. El Objeto location
Contiene información detallada sobre la URL actual y permite la navegación.
* Propiedades de URL: href (URL completa), hostname (dominio/IP), pathname (ruta del recurso), protocol (ej. https:), y port.
* Métodos de Navegación:
* assign(): Carga un documento nuevo.
* reload(): Recarga la página actual.
* replace(): Sustituye la URL actual en el historial por una nueva.
2.3. El Objeto navigator
Proporciona datos sobre el navegador y el entorno del cliente.
* Propiedades principales: appName (nombre del cliente), appVersion, platform (sistema operativo), y userAgent (cabecera completa enviada en peticiones HTTP).
* Método: javaEnabled() para verificar el soporte de Java.
2.4. El Objeto document
Es el objeto que representa el documento HTML cargado. Es la puerta de acceso a todos los elementos de la página.
* Colecciones (Arrays): images[], forms[], links[], y anchors[].
* Métodos de Selección de Elementos:
* getElementById(id): Acceso por identificador único.
* getElementsByName(name): Acceso por atributo name.
* getElementsByTagName(tag): Acceso por etiqueta HTML.
* Escritura: write() y writeln() permiten insertar código o texto directamente en el flujo del documento.
--------------------------------------------------------------------------------
3. Objetos Nativos de JavaScript
3.1. Objeto String
Se utiliza para manipular cadenas de texto. Las cadenas pueden crearse de forma primitiva o mediante el constructor new String().
* Caracteres de Escape: Se utiliza la barra inclinada \ para incluir caracteres especiales como \" (comillas), \n (nueva línea), \t (tabulador) o \\ (barra).
* Propiedad: length (devuelve la longitud de la cadena).
* Métodos destacados: charAt(), indexOf(), replace(), slice(), split(), toLowerCase(), y toUpperCase().
3.2. Objeto Math
Proporciona constantes y funciones matemáticas. No tiene constructor, por lo que no se instancia (no se usa new Math()). Se accede directamente mediante el nombre del objeto.
* Propiedades: Math.PI, Math.E.
* Métodos: Math.random() (número entre 0 y 1), Math.sqrt() (raíz cuadrada), Math.round() (redondeo al entero más próximo).
3.3. Objeto Number
Actúa como un envoltorio para valores numéricos de doble precisión (64 bits).
* Límites: Define el rango soportado: MAX_VALUE (1.79E+308) y MIN_VALUE (2.22E-308). Valores excedentes resultan en POSITIVE_INFINITY o NEGATIVE_INFINITY.
* Conversión: El método toString(base) permite convertir el número a cadenas en formato binario (base 2), octal (base 8) o hexadecimal (base 16).
3.4. Objeto Date
Fundamental para la gestión de fechas y horas. Se instancia siempre mediante new Date().
* Obtención de datos: getDate() (día del mes 1-31), getDay() (día de la semana 0-6), getFullYear(), getMonth() (mes 0-11), y getTime() (milisegundos desde el 1 de enero de 1970).
--------------------------------------------------------------------------------
4. Consideraciones sobre Marcos (Frames)
Aunque los navegadores permiten el uso de frames e iframes, las fuentes técnicas destacan lo siguiente:
1. Desuso: Su utilización está totalmente desaconsejada por motivos de accesibilidad y usabilidad.
2. Jerarquía: Si un documento contiene marcos, el navegador crea un objeto window para el documento principal y uno adicional para cada marco.
3. Navegación entre marcos: Para referenciar marcos desde un frameset, se utiliza frames[n]. Para acceder al padre desde un marco hijo, se emplean las palabras reservadas parent o top. Todos los marcos de un mismo documento pertenecen a la misma ventana global.
Guía de estudio
Guía de Estudio: Modelo de Objetos Predefinidos en JavaScript
Esta guía ha sido diseñada para profundizar en el conocimiento de los objetos de alto nivel y los objetos nativos de JavaScript, basándose en la estructura del Modelo de Objetos del Documento (DOM) y la jerarquía de ventanas del navegador.
Cuestionario de Repaso
A continuación, se presentan diez preguntas de respuesta corta para evaluar la comprensión de los conceptos fundamentales presentados en el material de estudio.
1. ¿Qué define el Modelo de Objetos del Documento (DOM) según el W3C?
2. ¿Cuál es la función principal del objeto window en la jerarquía de JavaScript?
3. ¿Cómo puede un script crear y gestionar una subventana de forma que pueda cerrarla posteriormente?
4. ¿En qué situaciones resulta útil emplear la palabra reservada self en lugar de window?
5. ¿Qué tipo de información proporciona el objeto location y cómo se accede a él?
6. ¿Para qué sirve el objeto navigator y qué propiedad permite identificar la cabecera del agente HTTP?
7. ¿Qué diferencia fundamental existe entre el objeto Math y otros objetos nativos como String o Date en cuanto a su creación?
8. ¿Cuáles son las colecciones principales del objeto document que permiten acceder a elementos específicos del HTML?
9. ¿Cómo maneja JavaScript los números que exceden los rangos máximo y mínimo permitidos en el objeto Number?
10. ¿De qué formas se puede instanciar un objeto de tipo Date para trabajar con fechas y horas?
--------------------------------------------------------------------------------
Clave de Respuestas
1. El W3C define el DOM como una interfaz de programación de aplicaciones (API) para documentos HTML válidos y XML bien construidos. Este modelo describe el contenido del documento como un conjunto de objetos organizados lógicamente, permitiendo que programas de JavaScript accedan a ellos y los manipulen.
2. El objeto window es el contenedor principal de todo el contenido visualizado en el navegador y se sitúa en la cima de la jerarquía. Su influencia abarca no solo el área de contenido donde se cargan los documentos, sino también las dimensiones de la ventana y elementos periféricos como barras de herramientas y de estado.
3. Un script utiliza el método window.open() asignando el resultado a una variable, por ejemplo, let subVentana = window.open(...). A través de esa variable, el script original mantiene una referencia que permite realizar acciones sobre la nueva ventana, como cerrarla mediante la instrucción subVentana.close().
4. La palabra self se utiliza para referenciar a la ventana actual desde el propio documento contenido en ella. Aunque es intercambiable con window en la mayoría de los casos, se recomienda su uso en scripts complejos que gestionan múltiples marcos (frames) o ventanas para mejorar la claridad de la referencia.
5. El objeto location contiene información detallada sobre la URL actual del documento cargado. Es una propiedad del objeto window, por lo que se accede habitualmente mediante window.location, y permite conocer desde el protocolo utilizado hasta el nombre del servidor y el puerto.
6. El objeto navigator contiene información técnica sobre el navegador o cliente que se está utilizando para visualizar el documento. La propiedad userAgent es la que almacena la cabecera completa del agente enviada en la petición HTTP, incluyendo datos sobre el nombre en código y la versión.
7. A diferencia de String o Date, el objeto Math no posee un constructor, lo que significa que no se puede instanciar con la palabra clave new. Para utilizar sus propiedades y métodos, como Math.PI o Math.random(), se debe llamar directamente al objeto global Math.
8. El objeto document organiza los elementos del HTML en arrays o colecciones específicas: anchors[] para hiperenlaces, forms[] para formularios, images[] para fotografías e imágenes, y links[] para todos los enlaces del documento.
9. JavaScript define internamente los números como valores de 64 bits de doble precisión. Si un número supera el valor máximo permitido (MAX_VALUE), se considera infinito positivo (POSITIVE_INFINITY), y si es inferior al mínimo (MIN_VALUE), se trata como infinito negativo (NEGATIVE_INFINITY).
10. Existen cuatro formas de instanciar un objeto Date: sin parámetros para la fecha actual (new Date()), pasando milisegundos, proporcionando una cadena de fecha, o especificando individualmente el año, mes, día, horas, minutos, segundos y milisegundos.
--------------------------------------------------------------------------------
Temas de Reflexión y Ensayo
Se sugieren los siguientes temas para desarrollar una comprensión más profunda de la arquitectura de objetos en JavaScript.
1. La Jerarquía de Objetos de Alto Nivel: Analice la relación de dependencia entre el objeto window y sus objetos subordinados (document, location, navigator). Explique por qué el objeto window se considera el contenedor global.
2. Interactividad y Manipulación del DOM: Discuta cómo la concepción del documento HTML como un conjunto de objetos transformó la capacidad de los programadores para crear aplicaciones web dinámicas utilizando la API del DOM.
3. Gestión de Ventanas y Experiencia de Usuario: Evalúe las capacidades de JavaScript para abrir y cerrar ventanas o pestañas. Considere las implicaciones de seguridad y usabilidad cuando un script intenta cerrar la ventana principal frente a una subventana creada por él mismo.
4. Objetos Nativos vs. Objetos del Navegador: Compare las funciones de los objetos nativos (como String, Math y Number) con los objetos del navegador. Explique cómo los objetos nativos facilitan la lógica de programación independientemente del entorno visual.
5. Accesibilidad y Estructuras de Contenido: Basándose en la recomendación de evitar el uso de frames, reflexione sobre por qué ciertas estructuras lógicas de objetos pueden afectar la usabilidad de una página web y qué alternativas ofrece el objeto document para acceder a elementos.
--------------------------------------------------------------------------------
Glosario de Términos Clave
Término Definición
API Interfaz de programación de aplicaciones; en el contexto del DOM, permite la manipulación de documentos HTML/XML.
Boolean Objeto nativo utilizado para convertir valores no lógicos en valores lógicos: true (verdadero) o false (falso).
DOM Document Object Model; representación de un documento como una estructura lógica de objetos que JavaScript puede interactuar.
Document Objeto que representa el documento HTML cargado en una ventana y proporciona acceso a todos sus elementos.
Location Objeto que contiene información sobre la URL del documento actual y permite la navegación a nuevas direcciones.
Math Objeto nativo que proporciona constantes y funciones matemáticas; no requiere instanciación (no tiene constructor).
Método Función asociada a un objeto que define una acción que este puede realizar sobre sus propiedades o el entorno.
Navigator Objeto que almacena información sobre el software del navegador, incluyendo versión, plataforma y capacidades como el uso de cookies.
Number Objeto envoltorio para valores numéricos primitivos que define los rangos de precisión y límites de los números en JavaScript.
Objeto Entidad de programación que posee un estado (definido por propiedades) y un comportamiento (definido por métodos).
Propiedad Característica o atributo de un objeto que define su estado actual.
String Objeto nativo que representa una secuencia de caracteres de texto, rodeada de comillas, y posee métodos para manipulación de texto.
Unicode Estándar de codificación de caracteres que puede ser manipulado mediante métodos del objeto String como charCodeAt().
UserAgent Cadena de texto que identifica al navegador y al sistema operativo ante un servidor web.
Window El objeto de más alto nivel en la jerarquía del navegador; representa una ventana o pestaña abierta.