Tema 3 Modelo de Objetos Predefinidos en JavaScript
Tema 3 Modelo de Objetos Predefinidos en JavaScript
id=65840
Caso práctico
Antonio tiene una pequeña reunión con Ada y con su tutor Juan, para
comentar los progresos realizados hasta este momento y se pone manos a la
obra con esta nueva sección.
En esta unidad de trabajo profundizaremos en los objetos de más alto nivel en JavaScript, los
cuales estarán disponibles en todas nuestras aplicaciones. Veremos como gestionar los
marcos o frames y la forma de comunicarnos entre múltiples ventanas que tengamos abiertas
en el navegador.
Para terminar con la unidad veremos los objetos nativos en JavaScript, aquellos que están
definidos en el propio lenguaje y que nos van a permitir realizar operaciones matemáticas
complejas, trabajar con cadenas de texto, operaciones de fecha y hora, etc.
Aviso Legal
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 2/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Caso práctico
Una página web, es un documento HTML que será interpretado por los navegadores de
forma gráfica, pero que también va a permitir el acceso al código fuente de la misma.
El Modelo de Objetos del Documento (DOM), permite ver el mismo documento de otra
manera, describiendo el contenido del documento como un conjunto de objetos, sobre los
que un programa de Javascript puede interactuar.
Ahora que ya has visto en la unidad anterior, los fundamentos de la programación, vamos a
profundizar un poco más en lo que se refiere a los objetos, que podremos colocar en la
mayoría de nuestros documentos.
Definimos como objeto, una entidad con una serie de propiedades que definen su estado, y
unos métodos (funciones), que actúan sobre esas propiedades.
nombreObjeto.propiedad
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 3/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
También podemos referenciar a una propiedad de un objeto, por su índice en la creación. Los
índices comienzan por 0.
En esta unidad, nos enfocaremos en objetos de alto nivel, que encontrarás frecuentemente
en tus aplicaciones de JavaScript: window, location, navigator y document. El objetivo, no es
solamente indicarte las nociones básicas para que puedas comenzar a realizar tareas
sencillas, sino también, el prepararte para profundizar en las propiedades y métodos,
gestores de eventos, etc. que encontrarás en unidades posteriores.
En esta unidad, verás solamente las propiedades básicas, y los métodos de los objetos
mencionados anteriormente.
Te mostramos aquí el gráfico del modelo de objetos de alto nivel, para todos los navegadores
que permitan usar JavaScript.
Es muy importante que tengas este gráfico en mente porque va a ser la guía a lo largo de
toda esta unidad.
En esta unidad no hablaremos del uso de frames ya que su uso está totalmente
desaconsejado por motivos de accesibilidad y usabilidad, por lo que te recomendamos no
usarlos.
Autoevaluación
Pregunta
Respuestas
Sí.
No.
Depende de si lleva o no parámetros.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 4/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Retroalimentación
Solución
1. Opción correcta
2. Incorrecto
3. Incorrecto
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 5/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Cómo se ve en el gráfico de la jerarquía de objetos, debajo del objeto window tenemos otros
objetos como el navigator, screen, history, location y el objeto document. Este objeto document será el que
contendrá toda la jerarquía de objetos, que tengamos dentro de nuestra página HTML.
Atención En los navegadores más modernos, los usuarios tienen la posibilidad de abrir las
páginas tanto en nuevas pestañas dentro de un navegador, como en nuevas ventanas de
navegador. Para JavaScript tanto las ventanas de navegador, como las pestañas, son ambos
objetos window.
Para acceder a las propiedades y métodos del objeto window, lo podremos hacer de diferentes
formas, dependiendo más de nuestro estilo, que de requerimientos sintácticos. Así, la forma
más lógica y común de realizar esa referencia, incluiría el objeto window tal y como se muestra
en este ejemplo:
window.nombrePropiedad
window.nombreMétodo( [parámetros] )
Como puedes ver, los parámetros van entre corchetes, indicando que son opcionales y que
dependerán del método al que estemos llamando.
Un objeto window también se podrá referenciar mediante la palabra self, cuando estamos
haciendo la referencia desde el propio documento contenido en esa ventana:
self.nombrePropiedad
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 6/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
self.nombreMétodo( [parámetros] )
Podremos usar cualquiera de las dos referencias anteriores, pero intentaremos dejar la
palabra reservada self, para scripts más complejos en los que tengamos múltiples marcos y
ventanas.
Debido a que el objeto window siempre estará presente cuando ejecutemos nuestros scripts,
podremos omitirlo, en referencias a los objetos dentro de esa ventana. Así que, si escribimos:
nombrePropiedad
nombreMétodo( [parámetros] )
También funcionaría sin ningún problema, porque se asume que esas propiedades o
métodos, son del objeto de mayor jerarquía (el objeto window) en el cuál nos encontramos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 7/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Por ejemplo, si consideramos la siguiente instrucción que abre una nueva ventana de un
tamaño determinado y con el contenido de un documento HTML:
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 8/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
closed
Devuelve un valor Boolean indicando cuando una ventana ha sido cerrada o
no.
defaultStatus Ajusta o devuelve el valor por defecto de la barra de estado de una ventana.
frames
Devuelve un array de todos los marcos (incluidos iframes) de la ventana
actual.
length
Devuelve el número de frames (incluyendo iframes) que hay en dentro de
una ventana.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 9/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
setInterval()
Llama a una función o evalúa una expresión en un intervalo especificado (en
milisegundos).
confirm()
Muestra una ventana emergente con un mensaje, un botón de aceptar y un
botón de cancelar.
Debes conocer
El siguiente enlace amplía información sobre el objeto Window y todas sus
propiedades y métodos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 10/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Este objeto, es parte del objeto window y accedemos a él a través de la propiedad window.location.
Este objeto, es parte del objeto window y accedemos a él a través de la propiedad window.location.
Propiedad Descripción
Cadena que contiene el nombre del servidor y el número del puerto, dentro
host
de la URL.
hostname
Cadena que contiene el nombre de dominio del servidor (o la dirección IP),
dentro de la URL.
port Cadena que contiene el número de puerto del servidor, dentro de la URL.
protocol
Cadena que contiene el protocolo utilizado (incluyendo los dos puntos),
dentro de la URL.
search
Cadena que contiene la información pasada en una llamada a un script,
dentro de la URL.
reload() Vuelve a cargar la URL especificada en la propiedad href del objeto location.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 11/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
“Mil rutas se apartan del fin elegido, pero hay una que llega a él.”
Debes conocer
El siguiente enlace amplía información sobre el objeto Location y todas sus
propiedades y métodos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 12/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Propiedad Descripción
platform
Cadena con la plataforma sobre la que se está ejecutando el programa
cliente.
javaEnabled()
Devuelve true si el cliente permite la utilización de Java, en caso contrario,
devuelve false.
Debes conocer
El siguiente enlace amplía información sobre el objeto Navigator y todas sus
propiedades y métodos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 13/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Autoevaluación
Pregunta
Respuestas
Retroalimentación
Muy bien. Este método te permitirá solicitar datos al usuario, mediante una
ventana de diálogo que podrás usar en tu aplicación.
Solución
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 14/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
1. Incorrecto
2. Incorrecto
3. Opción correcta
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 15/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Colección Descripción
anchors[]
Es un array que contiene todos los
hiperenlaces del documento.
forms[]
Es un array que contiene todos los
formularios del documento.
images[]
Es un array que contiene todas las
imágenes del documento.
links[]
Es un array que contiene todos los enlaces
del documento.
domain
Cadena que contiene el nombre de dominio del servidor que cargó el
documento.
referrer
Cadena que contiene la URL del documento desde el cuál llegamos al
documento actual.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 16/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Método Descripción
getElementById()
Para acceder a un elemento identificado por el id escrito entre
paréntesis.
getElementsByName()
Para acceder a los elementos identificados por el atributo name escrito
entre paréntesis.
getElementsByTagName()
Para acceder a los elementos identificados por el tag o la etiqueta
escrita entre paréntesis.
open()
Abre el flujo de escritura para poder utilizar document.write() o
document.writeln en el documento.
write()
Para poder escribir expresiones HTML o código de JavaScript dentro
de un documento.
writeln()
Lo mismo que write() pero añade un salto de línea al final de cada
instrucción.
Debes conocer
El siguiente enlace amplía información sobre el objeto Document todas sus
propiedades y métodos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 17/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Caso práctico
Ésto le va a ser muy útil para realizar su aplicación ya que tendrá que realizar
diferentes tipos de conversiones de datos, trabajar intensivamente con cadenas
y por supuesto con fechas y horas.
Aunque no hemos visto como crear objetos, sí que ya hemos dado unas pinceladas a lo que
son los objetos, propiedades y métodos.
En esta sección vamos a echar una ojeada a objetos que son nativos en JavaScript, ésto es,
aquello que JavaScript nos da, listos para su utilización en nuestra aplicación.
BERGAMÍN, José.
Reflexiona
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 18/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
¿Te has parado a pensar alguna vez que nuestro mundo está rodeado de
objetos por todas partes?
¿Sabes que también podemos realizar acciones con esos objetos, como
pueden ser encender, apagar, mover, abrir, cerrar, subir temperatura, bajar
temperatura, marcar número, colgar, etc.?
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 19/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
La forma en la que se crean las cadenas en JavaScript, hace que cuando tengamos que
emplear ciertos caracteres especiales en una cadena de texto, tengamos que escaparlos,
empleando el símbolo \ seguido del carácter.
Caracteres de escape y
especiales en
JavaScript
Símbolos Explicación
\\ Barra inclinada.
\b Retroceso.
\t Tabulador.
\n Nueva línea.
\r Salto de línea.
\f Avance de página.
Debes conocer
El siguiente enlace amplía información sobre el objeto String y todas sus
propiedades y métodos.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 20/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 21/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Es decir, cada vez que tengamos una cadena de texto, en realidad es un objeto String que
tiene propiedades y métodos:
cadena.propiedad;
cadena.metodo( [parámetros] );
Propiedad Descripción
Métodos Descripción
charAt()
Devuelve el carácter especificado por la posición que se indica entre
paréntesis.
charCodeAt()
Devuelve el Unicode del carácter especificado por la posición que se
indica entre paréntesis.
indexOf()
Devuelve la posición de la primera ocurrencia del carácter buscado en la
cadena.
lastIndexOf()
Devuelve la posición de la última ocurrencia del carácter buscado en la
cadena.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 22/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Métodos Descripción
replace()
Busca una subcadena en la cadena y la reemplaza por la nueva cadena
especificada.
search()
Busca una subcadena en la cadena y devuelve la posición dónde se
encontró.
substring() Extrae los caracteres de una cadena entre dos índices especificados.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 23/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 24/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Método Descripción
max(x,y,z,...,n) Devuelve el número más alto de los que se pasan como parámetros.
min(x,y,z,...,n) Devuelve el número más bajo de los que se pasan como parámetros.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 25/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Los números y sus valores están definidos internamente en JavaScript, como valores de
doble precisión y de 64 bits.
Propiedad Descripción
toFixed(x) Formatea un número con x digitos decimales después del punto decimal.
Es un sistema numérico en base 8 (usa 8 símbolos) y utiliza los dígitos del 0 al 7 como
representación numérica.
Es un sistema numérico en base 16 (usa 16 símbolos) y utiliza los dígitos del 0 a 9 y las letras
de la A a la F como representación numérica.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 27/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
constructor
Devuelve la función que creó el toString()
Convierte un valor Boolean a una
objeto Boolean. cadena y devuelve el resultado.
Autoevaluación
Pregunta
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 28/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
Respuestas
Sí.
No.
Retroalimentación
Solución
1. Incorrecto
2. Opción correcta
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 29/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
El objeto Date se utiliza para trabajar con fechas y horas. Los objetos
Date se crean con new Date().
Propiedad Descripción
getTime() Devuelve los milisegundos desde media noche del 1 de Enero de 1970.
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 30/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
getUTCDate() Devuelve el día del mes en base a la hora UTC (de 1-31).
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 31/32
3/12/24, 22:24 avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840
https://avanza.educarex.es/cursos/blocks/recopila/recopila.php?id=65840 32/32