UB PROG3 WEB TEMA 13 JS DOM

(1)

UNIVERSIDAD DE BELGRANO

PROGRAMACIÓN 3

Profesor:

(2)

Objetos del navegador (DOM)

 Objeto window.

 Objeto navigator.

 Objeto screen.

 Objeto history.

 _{Objeto location.}  _{Objeto document.}  _{Objeto anchor.}

(3)

Objetos del navegador (DOM)

 Objeto window:

 Objeto estrella del DOM, es el más alto dentro de toda la jerarquía.

 _{Encargado de representar la ventana del navegador donde se}

está visualizando la página.

 _{Si el navegador maneja pestañas, cada una de ellas tendrá su}

(4)

Objetos del navegador (DOM)

 Objeto window. Colecciones de objetos:

 window contiene a su vez otros elementos.

 frames: array con la colección de frames o marcos (etiquetas <FRAME> o <IFRAME> que contenga la página.

 _{Se pueden acceder a ellos a través de su posición en el array}

o su nombre (atributo NAME).

(5)

Objetos del navegador (DOM)

 Objeto window. Propiedades:

Propiedades Descripción

name Nombre de la ventana.

length Número de marcos de la ventana actual. frameElement ?

self Ventana actual.

parent Ventana que contiene el marco.

top Devuelve ventana que se encuentra en el nivel más alto.

opener Ventana que abrió la actual. closed Si ventana está cerrada o no. outerHeight, outerWidth Tamaño en pixeles.

innerHeight, innerWidth Tamaño en pixeles (excluye barras)

(6)

Objetos del navegador (DOM)

(7)

Objetos del navegador (DOM)

 Objeto window. Métodos:

Métodos Descripción

alert(msg) Muestra mensaje en un cuadro de diálogo con Aceptar. confirm(msg) Muestra mensaje con Aceptar y Cancelar.

prompt(msg, valor_def) Obtiene valor escrito por el usuario. open(URL, nom, caract,

reemplazar) URL: url que se cargará en la ventana.nom: asocia un nombre a la ventana. close() Cierra la ventana actual.

focus(), blur() Establece o retira el foco de un objeto.

moveBy(x, y) Desplaza la ventana el número de pixeles indicados. moveTo(x, y) Mueve la ventana en una posición concreta.

resizeBy(x, y) Redimensiona la ventana tantos pixeles.

(8)

Objetos del navegador (DOM)

 Objeto window. Métodos:

stop() Detiene la carga de la página. setTimeout(exp,

miliseg) Evalúa una expresión (función) después de esperar a que pasen el número de milisegundos indicados. Devuelve identificador.

setInterval(exp, miliseg) Es método es ejecutado continuamente cada vez que hayan pasado el número de milisegundos especificados. Devuelve identificador.

(9)

Objetos del navegador (DOM)

(10)

Objetos del navegador (DOM)

(11)

Objetos del navegador (DOM)

(12)

Objetos del navegador (DOM)

(13)

Objetos del navegador (DOM)

(14)

Objetos del navegador (DOM)

 Objeto navigator:

(15)

Objetos del navegador (DOM)

 Objeto navigator. Propiedades:

appCodeName Nombre del código del navegador. Actualmente todos los navegadores dan un valor “Mozilla” por temas de compatibilidad.

appName Nombre del navegador. appVersion Versión del navegador.

userAgent Cabecera completa del navegador que se envía en cada petición HTTP.

language Idioma del navegador.

platform Plataforma del Sistema Operativo (Win32, Linux i686, etc.)

cookieEnabled Si el navegador tiene activadas las cookies o no. geolocation Objeto de utilidad para la geolocalización.

(16)

Objetos del navegador (DOM)

 Objeto navigator. Propiedades:

(17)

Objetos del navegador (DOM)

 Objeto navigator. Métodos:

 El número de métodos de este objeto no es muy amplio ya que no se puede modificar ninguna de las características del navegador.

(18)

Objetos del navegador (DOM)

 Objeto screen:

 Mediante el objeto screen se obtiene información de la configuración de pantalla del usuario que está viendo la página.

(19)

Objetos del navegador (DOM)

 Objeto screen. Propiedades:

width, height Indican los píxeles de ancho y alto que tiene la resolución de pantalla actual.

availWidth, availHeight Devuelve anchura y altura que queda libre en el área de trabajo del escritorio, es decir, resta al ancho o alto

total el espacio que ocupan las barras de herramientas que se tenga en el SO.

(20)

Objetos del navegador (DOM)

(21)

Objetos del navegador (DOM)

 Objeto history:

 Se encarga de almacenar el historial de visitas del navegador, es decir, una lista de las páginas por las que se ha estado navegando.

 _{Su principal utilidad reside en la posibilidad de moverse hacia}

adelante o atrás dentro de esa lista.

Propiedad Descripción

(22)

Objetos del navegador (DOM)

 Objeto history. Métodos:

 Los métodos de history ayudan a desplazarse por las páginas del historial.

back(),

forward() Cargan la página inmediatamente anterior (atrás) o posterior (adelante) a la actual. go(posición) Carga una página específica que está en la posición indicada dentro

del historial.

El parámetros posición puede ser un entero (negativo para páginas anteriores, positivo para posteriores) o una cadena que represente una URL.

(23)

Objetos del navegador (DOM)

 Objeto location:

(24)

Objetos del navegador (DOM)

 Objeto location. Propiedades:

Propieda

d Descripción

href Devuelve la URL completa.

hostname Devuelve la parte de la URL que hace referencia al nombre del dominio o dirección IP del servidor donde está alojada la página.

port Puerto por el que se ha accedido al servidor.

host Devuelve el nombre del servidor (hostname) y el número de puerto (port). protocol Protocolo que se ha usado para acceder al servidor (HTTP, HTTPS, FTP, etc.) pathname Contiene la ruta que se sigue dentro del servidor Web hasta alcanzar la

página que se está mostrando.

hash Devuelve la parte de la URL que hay despues de (#). Esto representa un enlace o ancla (anchor).

(25)

Objetos del navegador (DOM)

(26)

Objetos del navegador (DOM)

(27)

Objetos del navegador (DOM)

 Objeto location. Métodos:

 Su función principal es la de interactuar con una URL.

assign(URL) Carga una nueva URL. Se creará una nueva entrada en el objeto history. Es lo mismo que sobreescribir la propiedad href.

replace(URL) Reemplaza la URL actual por otra. No crea una nueva entrada en history sino que reemplaza la actual.

reload(forzar

(28)

Objetos del navegador (DOM)

(29)

Objetos del navegador (DOM)

 Objeto document:

 Cuando se visualiza una página Web, todos sus elementos (texto, imágenes, enlaces, formularios…) quedan representados y accesibles para el código dentro del objeto document.

 _{Por tanto, se puede acceder a todos ellos para modificarlos o}

(30)

Objetos del navegador (DOM)

 Objeto document. Colecciones de objetos:

Objeto

s Descripción

anchors Array con todas las anclas (anchors) del documento. Estos elementos se identifican por la etiqueta <a> y tienen definido el atributo name.

links Contiene todos los enlaces de la página, como un array. Se identifican por la etiqueta <area> o <a> pero con el atributo href definido.

forms Contiene dentro de un array, todas las referencias a los formularios (<form>) de la página.

images Están recopiladas todas las imágenes representadas con la etiqueta <img>.

scripts Devuelve una colección de todos los bloques <script> que existan en la página.

(31)

Objetos del navegador (DOM)

 Objeto document. Colecciones de objetos:

(32)

Objetos del navegador (DOM)

 Objeto document. Propiedades:

Propiedad Descripción

activeElement Devuelve el objeto de la página que tiene el foco en ese momento. doctype Proporciona el objeto definido por la etiqueta <doctype>.

head Obtiene el objeto que representa la cabecera de la página (<head>). title Se trata del título del documento que aparece en la etiqueta <title>. lastModified Dice la fecha de la última modificación del documento.

referrer Indica la URL del documento que llamó al actual a través de un enlace. Si la página actual no ha sido cargada mediante un enlace, devolverá una cadena vacía.

(33)

Objetos del navegador (DOM)

(34)

Objetos del navegador (DOM)

 Objeto document. Métodos:

 _{Los métodos write, writeln, open y close en ningún momento}

modificaran el archivo físico sino que sólo cambiarán el texto visible en pantalla.

write(texto),

writeln(texto Escribe texto HTML en el documento. El método writeln agrega además un salto de línea (<br>) al final del texto que se haya pasado como parámetro.

open() Permite escribir sobre el documento mediante los métodos write o writeln una vez que el documento haya sido cargado.

close() Finaliza la escritura sobre el documento, abierta mediante el método open.

(35)

Objetos del navegador (DOM)

 Objeto document. Métodos:

getElementById(identificador) Devuelve el primer elemento del documento cuyo atributo id coincida con el parámetro identificador. En caso de no encontrarlo da un valor null.

getElementsByName(nombre) Devuelve un array de elementos cuyo atributo name coincida con el indicado.

getElementsByTagName(etiqueta

(36)

Objetos del navegador (DOM)

(37)

Objetos del navegador (DOM)

(38)

Objetos del navegador (DOM)

(39)

Objetos del navegador (DOM)

 Objeto anchor:

 Engloba todas las propiedades y métodos que tienen los enlaces internos al documento, también llamados anclas y anchor.

 _{Dentro de una página Web están identificadas con la etiqueta}

(40)

Objetos del navegador (DOM)

 Objeto anchor. Propiedades:

Propieda

d Descripción

id Identificador del ancla (atributo id). name Nombre del ancla (atributo name).

target Ventana o marco donde se cargará el ancla (atributo target). Valores: _blank: se carga en una ventana nueva.

_self: se carga en la misma ventana. Es el valor defecto. _parent: se carga en la ventana padre.

_top: se carga en la ventana más alta de la jerarquía. nombreMarco: en un marco concreto de la página.

text Propiedad sólo de lectura y permite saber el texto que contiene el ancla (lo que ve el usuario en la página) sin etiqueta HTML.

innerHTM

(41)

Objetos del navegador (DOM)

(42)

Objetos del navegador (DOM)

 Objeto anchor. Métodos:

 Este objeto sólo cuenta con dos métodos referentes a la posesión del foco.

focus()

(43)

Objetos del navegador (DOM)

 Objeto link:

(44)

Objetos del navegador (DOM)

Propieda

d Descripción

id Identificador del enlace (atributo id).

href Devuelve la URL completa del enlace (atributo href).

target Ventana o marco donde se cargará el enlace (atributo target).

hostname Devuelve la parte de la URL que hace referencia al nombre o dirección IP del servidor donde está alojada la página destino.

pathname Contiene la ruta que se sigue hasta alcanzar la página destino. hash Devuelve la parte de la URL que hay después de (#).

search Devuelve la parte de la URL que hay después de (?).

port Indica el puerto por el que se va a acceder al servidor destino.

host Devuelve el nombre del servidor (hostname) y el número del puerto (port). protocol Indica el protocolo que se va a usar para acceder al servidor (ejemplo: http). text Permite saber el texto del enlace (sólo lectura).

innerHTM

(45)

Objetos del navegador (DOM)

(46)

Objetos del navegador (DOM)

 Objeto link. Métodos:

 Este objeto sólo cuenta con dos métodos referentes a la posesión del foco.

focus()

(47)

Objetos del navegador (DOM)

 Objeto image:

 Permite acceder y manipular ciertas características de una imagen contenida en la página.

(48)

Objetos del navegador (DOM)

 Objeto image. Propiedades:

Propieda

d Descripción

id Identificador de la imagen (atributo id). name Nombre de la imagen (atributo name).

src Permite manipular la URL de la imagen que se muestra (atributo src). width,

height Permite conocer y cambiar la anchura y altura de la imagen (atributo width y height). alt Texto alternativo que se muestra al usuario cuando la imagen no puede ser

cargada (atributo alt).

(49)

Objetos del navegador (DOM)

(50)

Ejercicios

 1. Ingresar un color por el prompt y cambiar el color del documento.

 2. Ingresar un número por el prompt y si es menor que 100 mostrar imagen ok.png caso contrario error.png. Las imágenes mostrarlas dentro de un div, modificando con innerHTML.

 _{3. Mostrar en un div el dia de hoy con el siguiente formato:}

(51)

Resuelto

 1. Alternativa 1:

(52)

Resuelto

 2. Alternativa 1:

(53)