17 javascript (modelo de objetos) - universitat de valència dom ucm.pdf · javascript el modelo de...

JavaScript

El modelo de objetos

Tecnologías web 17

Tecnologías web JavaScript: El modelo de objetos 17 - 2

En JavaScript los objetos pueden ser considerados colecciones de propiedades (los atributos, su contenido) y métodos (las acciones, su comportamiento)

Las propiedades y los métodos están definidos en la clase del objeto

El lenguaje ya tiene definidas las clases básicas que representan tipos de datos y objetos del navegador

Las propiedades de los objetos también son objetos (de otras clases)

Así, al contener los objetos otros objetos están establecidas relaciones de contenido (clientelismo) que se deben conocer

Conociendo los objetos que contiene otro objeto, se sabe cuáles son los elementos del objeto que se pueden manipular

A continuación se muestran las clases de objetos del navegadoren un diagrama que indica sus relaciones de contenido

El modelo de objetos de JavaScript


WindowTextarea

Frame Layer Text

Link FileUpload

Document Image Password

Area HiddenLocation Anchor Submit

Applet Reset

History Plugin Radio

Form CheckboxButton

Navigator Select Option

Plugin

Los objetos del navegador

La mayoría se pueden identificarcon elementos HTML


Cada vez que en un archivo HTML se encuentra un elemento HTML representado por una clase de objetos, automáticamente se crea su correspondiente objeto

Los objetos también contienen otras propiedades que son valores de tipos simples (clases atómicas)

Algunos objetos se mantienen en colecciones porque se pueden contener varios ejemplares (objetos) de una misma clasePor ejemplo, en un formulario puede haber varios botones, varias casillas, varios cuadros de texto, etc

Aunque se pueden identificar los objetos con nombres únicos para distinguirlos y referenciarlos individualmente, cuando se admiten varios ejemplares se mantienen en colecciones (arrays accedidos por posición y con corchetes como es habitual)

Los objetos del navegador


El documento y sus elementos (objetos) contienen colecciones

Algunas colecciones son:

frames[]: los marcos del documento

applets[]: las applets del documento

embeds[]: los elementos empotrados en el documento

anchors[]: los vínculos del documento

images[]: las imágenes del documento

forms[]: los formularios del documento

elements[]: los elementos de un formulario

options[]: las opciones de un cuadro de selección (Select)

Colecciones de los objetos del navegador


Las clases de objetos intrínsecos describen los elementos que se manejan en los guiones (que los constituyen):

Array: para crear colecciones; no es necesario reservar memoria, ya que se adaptan dinámicamente a las necesidades

Boolean: para valores lógicos

Date: la fecha y la hora

Function: para definir funciones

Math: valores y funciones matemáticas

Number: valores numéricos

Object: los objetos en general

String: cadenas de caracteres

Los objetos intrínsecos


A un objeto se puede hacer referencia de dos formas:

Por su nombre: atributo NAME del elemento HTML(algunos elementos HTML como BODY tienen un nombre predeterminado como document)El nombre se coloca detrás del objeto que lo contiene y separado por un punto (sintaxis de punto)window.status

Por su posición (o nombre de propiedad) en el array de elementos del objeto que lo contiene (sintaxis de array)forms[0] forms["cajaTexto"]

Adicionalmente se puede usar this o self para referenciar al objeto actual; fuera de todo contexto se refiere a la ventana

Si tan sólo manejamos una ventana del navegador podemos omitir el objeto superior de la jerarquía de contenido: window

Referencias a los objetos


Sea el siguiente documento HTML:

<HTML><HEAD><TITLE>Objetos de JavaScript</TITLE></HEAD><BODY><H1>Objetos de los documentos HTML</H1><FORM NAME="miFormulario"><INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato"></FORM></BODY></HTML>

Al interpretar el código HTML se crean diferentes objetos

El primer objeto que se crea es window, objeto de clase Windowque representa la ventana del navegador

Referencias a los objetos: ejemplo


Los demás objetos que se crean estarán dentro del objeto window

<BODY><H1>Objetos de los documentos HTML</H1><FORM NAME="miFormulario"><INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato"></FORM></BODY>

El elemento BODY provoca la creación del objeto document, que representa la página web que se está cargando en el navegadorAl documento se accede con window.document

Dentro del objeto document se crea otro objeto, de clase Form, que representa el formulario definido en la página

Y dentro del objeto de clase Form se crea otro objeto de clase Text, que representa el cuadro de texto del formulario



<FORM NAME="miFormulario"><INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato"></FORM>

Los objetos correspondientes al formulario y al cuadro de texto reciben el nombre que se asigna al atributo NAME del correspondiente elemento HTML

La ventana (window) sólo contiene un documento, al que se accede a través del objeto document; sin embargo, un documento puede tener varios formularios, cuyos objetos se guardan en un array denominado forms; así al formulario se puede acceder (dentro del documento) directamente por su nombre o a través del array (por su posición, 0 en este caso, o por su nombre):

window.document.miFormulariowindow.document.forms[0]window.document.forms["miFormulario"]


La primeraposición de un array es la 0


Nuevamente, en un formulario puede haber varios controles, por lo que se usa un array para mantener los objetos correspondientes acada control; para acceder al objeto de un control se puede usardirectamente su nombre o el array de controles (representado tanto por la propiedad elements como por el nombre del formulario o la correspondiente posición del array forms); el acceso al array se puede realizar por posición o por el nombre del objeto-controlEn este caso, el control es un cuadro de texto (clase Text):window.document.miFormulario.cajaTextowindow.document.miFormulario[0]window.document.miFormulario.elements[0] window.document.forms[0].cajaTextowindow.document.forms[0].elements["cajaTexto"]window.document.forms[0][0] window.document.forms["miFormulario"]["cajaTexto"]



Los objetos que se mantienen en arrays se van colocando en los arrays en el orden en el que se creanPor ejemplo, los controles de un formulario se describen en el archivo HTML con una secuencia de elementos INPUT, SELECT, ...El orden de los elementos en el archivo HTML determina el orden de colocación de los correspondientes objetos en el array elements

Relaciones de contenido entre los objetos:


window documentforms[0]

(miFormulario)Elements[0](cajaTexto)


A través de las propiedades del objeto window podemos manipular las características de la ventana del navegador

Ya sabemos que disponemos de document para acceder al documento (la página web)

Veamos algunas otras propiedades del objeto window:

location: dirección URL de la página window.location

frames: array de marcos window.frames[0]

length: número de frames window.length

status: barra de estado window.status

name: nombre de la ventana window.name

parent: objeto ventana madre de esta ventana (la que generó ésta) window.parent

Algunas propiedades del objeto window


El objeto window puede recibir los mensajes descritos por los métodos de su clase (Window)

Veamos algunos de ellos:

alert(mensaje): muestra el mensaje en un cuadro de mensajewindow.alert("Hola")

confirm(mensaje): muestra el mensaje en un cuadro de confirmación; devuelve true si el usuario pulsa el botón Aceptary false si pulsa Cancelar window.confirm("¿Terminar?")

prompt(mensaje,inicial): para leer un dato; muestra un cuadro de diálogo con el mensaje, un cuadro de texto y botones Aceptar y Cancelar; el valor inicial se coloca en el cuadro de texto; devuelve el valor introducido

window.prompt("Introduce tu edad","20")

close(): cierra la ventana window.close()

Algunos métodos de la clase Window


<HTML><HEAD><TITLE>Mensajes de JavaScript</TITLE><SCRIPT LANGUAGE="JavaScript">

alert("Este cuadro simplemente informa de algo");

sino = confirm("Con este te pregunto algo y me dices si estás de acuerdo (Aceptar) o no (Cancelar)");

alert("El resultado del cuadro anterior ha sido '" + sino + "'");

nombre = prompt("Con este cuadro te pido un dato: ¿Cuál es tu nombre?", "Luis");

alert("Te llamas " + nombre);

close();

</HEAD> //...

Ejemplo de uso de métodos de Window

El objeto window se puede omitir

JS06.html


alert("Este cuadro simplemente informa de algo");



sino = confirm("Con este te pregunto algo y dices si estás de acuerdo (Aceptar) o no (Cancelar)");



alert("El resultado del cuadro anterior ha sido '" + sino + "'");



nombre = prompt("Con este cuadro te pido un dato: ¿Cuál es tu nombre?", "Luis");



alert("Te llamas " + nombre);



close();



moveBy(x,y): desplaza la ventana window.moveBy(100,100)

moveTo(x,y): cambia la posición de la ventanawindow.moveTo(200,100)

resizeBy(x,y): aumenta o disminuye el tamañowindow.resizeBy(50,-50)

resizeTo(ancho,alto): establece el tamañowindow.resizeTo(300,200)

scrollBy(x,y): desplaza el documento en el área de documento de la ventana x píxeles hacia la izquierda e y píxeles hacia abajo

window.resizeBy(50,50)

scrollTo(x,y): coloca el documento en el área de documento de la ventana comenzando por su posición x,y

window.scrollTo(0,100)

Más métodos de la clase Window


<HTML><HEAD><TITLE>Manejo de la ventana</TITLE><SCRIPT LANGUAGE="JavaScript">alert("Vamos a comenzar a manipular la ventana");resizeTo(200,150);alert("Tamaño de la ventana: 200x150");moveTo(0,0);alert("Ventana en la esquina superior izquierda de la pantalla");resizeBy(400,150);alert("Tamaño de la ventana mayor en 400 y 150");moveBy(150,100);alert("Ventana desplazada 150 a la derecha y 100 hacia abajo");</SCRIPT></HEAD>


(sigue...)

JS07.html


<BODY><H1>Manejo de la ventana con JavaScript</H1><H2>Tamaño y posición</H2><P>El tamaño de la ventana se puede controlar con los métodos <B>resizeTo()</B> y <B>resizeBy()</B>.</P><P>La posición de la ventana se puede controlar con los métodos <B>moveTo()</B> y <B>moveBy()</B>.</P><H2>Manejo de la parte visible del documento</H2><P>La parte del documento que se ve en la ventana se puede controlar con los métodos <B>scrollTo()</B> y <B>scrollBy()</B>.</P>


(sigue...)


<SCRIPT LANGUAGE="JavaScript">scrollBy(0,100);alert("Documento desplazado 100px hacia arriba");scrollTo(0,0);alert("Documento otra vez al principio");</SCRIPT></BODY></HTML>




alert("Vamos a comenzar a manipular la ventana");



resizeTo(200,150);alert("Tamaño de la ventana: 200x150");



moveTo(0,0);alert("Ventana en la esquina superior izquierda de la pantalla");



resizeBy(400,150);alert("Tamaño de la ventana mayor en 400 y 150");



moveBy(150,100);alert("Ventana desplazada 150 a la derecha y 100 hacia abajo");



scrollBy(0,100);alert("Documento desplazado 100px hacia arriba");



scrollTo(0,0);alert("Documento otra vez al principio");


Desarrollar una página web que contenga seis botones: dos para hacer la ventana un poco mayor o un poco menor y cuatro más para desplazar la ventana un poco hacia cada dirección

Ejercicio de manejo de la ventana


setInterval(expresión,tiempo): evalúa la expresión cada vez que transcurren tiempo milisegundos; devuelve el identificador que puede usarse con clearInterval()

id=window.setInterval("actualiza()",1000)

clearInterval(id): cancela la tarea periódica establecida con setInterval() identificada con id

window.clearInterval(id)

setTimeout(expresión,tiempo): evalúa la expresión después de pasar tiempo milisegundos; devuelve el identificador que puede usarse con clearTimeout()

id=window.setTimeout("Marquesina()",100)

clearTimeout(id): cancela la tarea programada establecida con setTimeout() identificada con id

window.clearTimeout(id)



Desarrollar una página que contenga dos botones: uno para hacer que la ventana se balancee (vaya un poco hacia la derecha y luego un poco hacia la izquierda y así sucesivamente); el otro botón para parar el movimiento de la ventana

Ejercicio de temporización


open(url,nombre,características): abre el documento en la dirección url indicada en la ventana con el nombre especificado (se crea una nueva si no existe); el tercer argumento establece las características de la nueva ventanaLos tres argumentos son cadenas de caractereswindow.open("http://www.ucm.es","VentanaUCM","") // características implícitas

El nombre se puede usar como destino en un atributo TARGET, pero no es un identificador de ventana para JavaScriptEl identificador de la ventana para JavaScript es lo que devuelve la funciónventana=window.open("http://www.ucm.es","VentanaUCM","");//...ventana.close();



open(url,nombre,características)

la cadena de características contendrá, separadas por comas, asignaciones de valores a las características (característica=valor) para las que el valor por defecto no resulte adecuado

A continuación se muestran las características más usuales:

width: anchura en píxelesheight: altura en píxelestoolbar, location, directories, menubar, status: respectivamente, barra de herramientas, barra de dirección, barra de vínculos, barra de menús y barra de estado(valores posibles: yes/1 o no/0)scrollbars: barras de herramientas (yes/1, no/0 o auto)resizable: cambio de tamaño por el usuario (yes/1 o no/0)left, top: distancias desde la esquina superior izquierda

Características de las ventanas

Las características activablesestán desactivadas por defecto


<HTML><HEAD><TITLE>Creación de ventanas</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">emergente=window.open("emergente.html","miVentana","width=350,height=400,resizable=no,menubar=no,toolbar=no,directories=no,location=no,scrollbars=yes,status=no");emergente.resizeTo(300,200);emergente.alert("Preparado para cerrar la ventana");emergente.close();</SCRIPT></BODY></HTML>

Ejemplos de ventanas emergentes

JS08.html


width=350height=400resizable=nomenubar=notoolbar=nodirectories=nolocation=no,scrollbars=yesstatus=no

Sin poder cambiarlade tamañoSin menús ni barrade herramientasni barra de direcciónni barra de vínculosni barra de estado


350

400


emergente.resizeTo(300,200);emergente.alert("Preparado para cerrar la ventana");

emergente.close();// La cierra



Basta poner el nombre de una característica activable para que se active en la nueva ventana:

window.open("emergente.html","miVentana","width=350,height=200,menubar,directories,scrollbars,status")


Menús, barra de vínculos,barras de desplazamiento

y barra de estado


<HTML><HEAD><TITLE>Ventanas emergentes</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">function nuevaVentana(destino) {window.open(destino,"miVentana","width=200,height=100,scrollbars"); }</SCRIPT><FORM><INPUT TYPE="Button" NAME="Bot1" VALUE="Nueva ventana" onClick="nuevaVentana('emergente.html')"></FORM></BODY></HTML>


JS09.html




<HTML><HEAD><TITLE>Ventanas emergentes</TITLE><SCRIPT LANGUAGE="JavaScript">emergente=window.open("","Ventana1","width=300,height=200,resizable,scrollbars");</SCRIPT></HEAD><BODY><FORM><INPUT TYPE="Button" NAME="Bot1" VALUE="Cargar documento" onClick="emergente.location.href='emergente.html'"></FORM></BODY></HTML>

Carga de un documento en la nueva ventana

JS10.html






Desarrollar una página que pida todo tipo de información necesaria sobre una nueva ventana y permita abrirla

Ejercicio sobre apertura de ventanas


A través de las propiedades del objeto document podemos manipular las características del documento (la página web)

Ya sabemos que disponemos de forms para acceder a los formularios del documento

Veamos algunas otras propiedades del objeto document:

alinkColor: cadena que contiene el color de los vínculos activoswindow.document.alinkColor

applets: array de appletswindow.document.applets[0]

bgColor: cadena que contiene el color de fondowindow.document.bgColor

fgColor: cadena que contiene el color de primer planowindow.document.fgColor

Algunas propiedades del objeto document


images: array de imágeneswindow.document.images[0]

lastModified: cadena con la fecha de la última modificaciónwindow.document.lastModified

linkColor: cadena que contiene el color de los vínculoswindow.document.linkColor

links: array de vínculos de la página(cada uno tiene las propiedades href y target)

window.document.links[0]

title: título del documento window.document.title

URL: dirección del documento cargadowindow.document.URL

vlinkColor: cadena que contiene el color de los vínculos visitadoswindow.document.vlinkColor

Algunas propiedades del objeto document


El objeto document de cada ventana puede recibir los mensajes descritos por los métodos de su clase (Document)

Los más utilizados son:

write(cadena): escribe la cadena HTML en el documentowindow.document.write("<H1>Encabezado</H1>")

writeLn(cadena): escribe la cadena HTML en el documento y coloca un cambio de línea al final

window.document.writeLn("<H1>Encabezado</H1>")

close(): Cierra el documento y fuerza la visualización de su contenido window.document.close()

Algunos métodos de la clase Document


<HTML><HEAD><TITLE>Ventanas emergentes</TITLE><SCRIPT LANGUAGE="JavaScript">function nuevaVentana() {ventana=window.open("","Ventana1","width=300,height=200,status,toolbar,menubar,location");ventana.document.write("<HTML><HEAD><TITLE>ventana nueva</TITLE></HEAD><BODY>");ventana.document.write("<IMG SRC='UCM.jpg'><BR><FORM><INPUT TYPE='Button' VALUE='Cerrar'onClick='self.close()'></FORM></BODY></HTML>");

}</SCRIPT>

Construcción del contenido de una ventana

(sigue...)

JS11.html


</HEAD><BODY BGCOLOR="Blue"><FORM><INPUT TYPE="Button" NAME="Bot1"VALUE="Pulsa aquí para abrir una nueva ventana"onClick="nuevaVentana()"></FORM></BODY></HTML>





<HTML><HEAD><TITLE>Ventana nueva</TITLE></HEAD><BODY><IMG SRC='UCM.jpg'><BR><FORM><INPUT TYPE='Button' VALUE='Cerrar' onClick='self.close()'></FORM></BODY></HTML>

<HTML><HEAD><TITLE>Ventana nueva</TITLE></HEAD><BODY><IMG SRC='UCM.jpg'><BR><FORM><INPUT TYPE='Button' VALUE='Cerrar' onClick='self.close()'></FORM></BODY></HTML>



<HTML><HEAD><TITLE>Ventana de mensaje</TITLE><SCRIPT LANGUAGE="JavaScript">function Mensaje(etiqueta, mens) {ventana=window.open("","mensaje","height=160,width=300");ventana.document.write("<HTML><HEAD><TITLE>¡Información!</TITLE></HEAD><BODY><TABLEBORDER=0><TR><TD WIDTH='90%' HEIGHT='90%'VALIGN=TOP ALIGN=LEFT><FONT SIZE=4>");ventana.document.write("<FONT COLOR='FF0000'><B>"+etiqueta+"</B></FONT><P>"+mens);

Una ventana de mensaje general

(sigue...)

JS12.html


ventana.document.write("</TD><TD WIDTH='10%'></TD></TR><TR><TD></TD><TD VALIGN=TOPALIGN=RIGHT><FORM><INPUT TYPE='BUTTON'VALUE='Aceptar' onClick='self.close()'></FORM></TD></TR></TABLE></BODY></HTML>");ventana.document.close();

}function Ejemplo() {Mensaje("Mensaje","Esta función te permite crearuna ventana de mensaje.");

}</SCRIPT></HEAD>


(sigue...)


<BODY><FORM><P>Pulsa el botón <I>Mensaje</I> para abrir unaventana de mensaje en tu navegador.</P><FORM><P ALIGN="center"><INPUT TYPE="button" VALUE="Mensaje" onclick="Ejemplo()"></P></FORM></BODY></HTML>





<HTML><HEAD><TITLE>¡Información!</TITLE></HEAD><BODY><TABLE BORDER=0><TR><TD WIDTH='90%' HEIGHT='90%' VALIGN=TOP ALIGN=LEFT><FONT SIZE=4 COLOR='FF0000'><B>etiqueta</B></FONT><P>mens</TD><TD WIDTH='10%'></TD></TR><TR><TD></TD><TD VALIGN=TOP ALIGN=RIGHT><FORM><INPUT TYPE='BUTTON' VALUE='Aceptar' onClick='self.close()'></FORM></TD></TR></TABLE></BODY></HTML>

Código HTML de la ventana de mensaje


Desarrollar una página que genere otra página en una nueva ventana con un encabezamiento y un párrafo

La página generadora pedirá el título del documento, el texto del encabezamiento y el texto del párrafo

Además, para el encabezamiento preguntará por el nivel de encabezado y el alineamiento

Y para el párrafo preguntará por el nombre de la fuente a usar, el tamaño (en puntos), el alineamiento y el color

Todos los datos se introducirán con cuadros de texto y es responsabilidad del usuario proporcionar los datos como valores HTML (center, blue, Comic Sans MS, etc.)

La ventana generada con las características dadas tendrá además un botón para cerrarla

Ejercicio sobre generación de documentos


Ejercicio sobre generación de documentos


Como ya vimos, además de un objeto document, el objeto window también contiene otros objetos:

frames: marcos de la ventana (ya veremos más sobre marcos)

history: lista de los URL de las páginas visitadasSu propiedad length contiene el número de entradasAlgunos mensajes que se le pueden pasar son:

back(): carga la página anteriorforward(): carga la página siguientego(posición): carga la página que se encuentra en la posición indicada dentro de la lista de historial

location: mantiene la información de URL de la página actualSi se modifica se carga la página resultante

Otros objetos principales


Algunas propiedades de location son:host: nombre o dirección IP del servidorhref: URL completopathname: parte del URL que representa el camino al recursoport: puerto de acceso (normalmente 80)protocol: protocolo (normalmente http:)hash: nombre del hipervínculo (marcadores)

El objeto navigator contiene información sobre el navegador:appName: nombre del navegadorappVersion: versión del navegadorplugins: array de accesorios (plug-in) instalados

Además, se le puede pasar el mensaje javaEnabled() para comprobar si el navegador tiene habilitado el lenguaje Java

Otros objetos principales


El objeto document mantiene, entre otras, una colección de las imágenes del documento: la propiedad imagesCada elemento de ese array es un objeto de clase Image para el que están definidas las siguientes propiedades:

border: ancho del borde

height, width: altura y anchura

hspace, vspace: espacios horizontal y vertical alrededor

name: nombre dado con el atributo NAMEsrc: archivo que contiene la imagen

complete: indica si la imagen ha sido completamente cargada

Los objetos de clase Image


<HTML><HEAD><TITLE>Emergencia al paso del ratón</TITLE></HEAD><BODY><P ALIGN="center"><FONT SIZE=4 COLOR=DarkGreen>Cuando pases el puntero del ratón por el siguiente vínculo surgirá una nueva ventana:<BR><A HREF="javascript:" onMouseover="m=window.open('emergente.html','', 'width=150,height=150');return true;"onMouseout="m.close(); return true;">Pasa por aquí</A></FONT></P>

Más ejemplos: emergencia al paso del ratón

(sigue...)

JS13.html


<P ALIGN="center"><FONT SIZE=3>La ventana se cerrará automáticamente cuando el puntero del ratón deje de estar sobre el vínculo.</FONT></P><P ALIGN="center"><FONT SIZE=4>También funciona con imágenes:<BR><BR><A HREF="javascript:" onMouseover="m=window.open('emergente.html','', 'width=200,height=130');return true;"onMouseout="m.close(); return true;"><IMG SRC="UCM.jpg" ALIGN=MIDDLE BORDER=2></A></FONT></P></BODY></HTML>





<HTML><HEAD><TITLE>Ventanas</TITLE><SCRIPT LANGUAGE='JavaScript'>function mensaje() {var mens=document.Mensaje.txt.value;msg=open("","Nueva","width=200,height=150");msg.document.write("<HEAD><TITLE>Hola</TITLE></HEAD>");msg.document.write("<P ALIGN='center'><B>Esto eslo que has escrito:</B></P><P ALIGN='center'>",mens, "</P>");msg.document.write("<P ALIGN='center'><FORM><INPUT TYPE='Button' VALUE='Aceptar'"onClick='self.close()'></FORM></P>");

} </SCRIPT>

Más ejemplos: comunicación entre ventanas

(sigue...)

JS14.html


</HEAD><BODY BGCOLOR="Blue"><FORM NAME="Mensaje"><INPUT TYPE="text" NAME="txt" SIZE="30"><INPUT TYPE="button" VALUE="Abrir" onClick="mensaje()"><INPUT TYPE="reset" VALUE="Restablecer"></FORM></BODY></HTML>




17 javascript (modelo de objetos) - universitat de valència dom ucm.pdf · javascript el modelo de...

Documents