4.2 Modelo de objetos con lenguaje script
La programación orientada a objetos se ha popularizado enormemente en los últimos días, y ya resulta difícil encontrar lenguajes de programación que no tengan una versión o que no estén basados en esta filosofía. JavaScript no se queda al margen de esta tendencia, y aunque no permite dos de las características clásicas de los lenguajes orientados a objetos ni la herencia ni el polimorfismo, sí permite la creación y manipulación de objetos sencil os, y la definición de métodos y propiedades para dichos objetos. El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador, así como otras características del proceso de navegación como son el historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador. Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aísla al programador de la necesidad de conocer cómo están implementadas internamente dichas funciones. De este modo, la programación orientada a objetos resulta muy intuitiva, y más próxima al conocimiento humano. Como vemos en el siguiente ejemplo de JavaScript, para escribir un mensaje en un cuadro de diálogo utilizamos:
window.alert(“¡Hola mundo!”)
Si bien no conocemos como funciona internamente la función alert(), sabemos cómo invocarla. La abstracción es tal que nos basta con saber que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades.
Objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la última sesión. Aún cuando el objeto se llame Window, disponemos siempre de una referencia a él llamada window, y todas las propiedades y métodos que l amamos sin utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window. Este hecho es común a todos los objetos del Modelo. Los métodos más comunes del objeto son los siguientes:
1. open(URL, nombre, propiedades).Permite crear y abrir una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, si no simplemente invocamos el método: el navegador automáticamente sabrá que pertenece al objeto window. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con una página en blanco. El nombre será el que queramos que se utilice como parámetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:
- toolbar[=yes|no]
- location[=yes|no]
- directories[=yes|no]
- status[=yes|no]
- menubar[=yes|no]
- scrollbars[=yes|no]
- resizable[=yes|no]
- width=pixels
- height=pixels
2. close() . Cierra la ventana, esta mostrará al usuario una ventana de confirmación para que decida él si quiere o no cerrarla, esto se hace por motivos de seguridad.
3. alert(mensaje).Muestra una ventana de diálogo con el mensaje especificado.
4. confirm(mensaje).Muestra una ventana de diálogo con el mensaje especificado y dos botones. Si el usuario pulsa OK, el método devuelve true. Si, en cambio, pulsa Cancelar, devolverá false.
5. prompt(mensaje, sugerencia). Muestra una ventana de diálogo con el mensaje especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor inicial será igual a sugerencia. Si el usuario pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolverá el valor null.
Dado que este valor se considera igual a false, podemos comprobarlo directamente en una condición para ver que ha hecho el usuario.
Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado el botón de Aceptar:
var contestacion = prompt(“¿Cómo te llamas?”, “”);
if (contestacion)
alert(“Hola, ” + contestacion);
6. status.Define la cadena de caracteres que saldrá en la barra de estado en un momento dado.
7. defaultStatus. Define la cadena de caracteres que saldrá por defecto en la barra de estado. Cuando no la especificamos, defaultStatus será igual al último valor que tomó status.
8. setTimeout(“función”,tiempo). Llama a función cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.
Objeto Frame: Para acceder al código o a objetos como Window o Document de otros frames, Javascript utiliza el objeto Frame con las etiquetas FRAME y FRAMESET, este objeto permite acceder a los frames que hemos declarado en él por medio del arreglo frames. Es decir, si en nuestro documento estuviera la siguiente línea:
<FRAME NAME=”principal” SRC=”MiPagina.html”>
Podríamos acceder a su objeto Window por medio de la referencia window.frames[“principal”], a su vez, desde el documento “hijo”, es decir, desde el documento que está encerrado en un marco, podemos acceder al padre por medio de la referencia parent. También podemos acceder al documento que esté arriba del todo en esta jerarquía por medio de top. Por ejemplo:
window == window.top
Esta igualdad comprobará si nuestro documento está en la ventana principal o en un frame.
Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a él por medio de la referencia document. Su mayor importancia viene por el número de arreglos que posee, que referencian a objetos Image, Form o Link, los cuales permiten acceder a las imágenes, formularios y enlaces del documento, respectivamente. Entre sus métodos y propiedades más importantes se encuentran los siguientes:
1. lastModified. Contiene la fecha y hora en que se modificó el documento por última vez y se suele usar en conjunción con write para añadir al final del documento estas características.
2. bicolor. Modifica el color de fondo del documento. El color deberá estar en el formato usado en HTML. Es decir, puede ser red o FF0000.
3. forms[]. Arreglo que contiene los formularios del documento. El primero será el número 0, el segundo el 1, etc.
4. images[]. Arreglo que contiene las imágenes del documento. Se ordenan igual que en el anterior caso, aunque también permiten ser accedidas con el nombre como índice. Es decir, a una imagen definida como <IMG SRC=”..” NAME=”miImagen”> se puede acceder con document.inages[“miImagen”].
5. links[]. Arreglo que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no se suele utilizar en el código Javascript. Su razón de ser es que, al ser los enlaces objetos, permiten incluir código Javascript en ellos por medio de la pseudo-URL javascript:codigo.
6. write(cadena) writeln(cadena). Escribe el código HTML indicado en cadena en nuestro documento HTML. writeln hace lo mismo, pero incluyendo al final un retorno de carro.
7. open(). Abre un nuevo documento para escribir. Un documento debe estar abierto para poder escribir en él. Sin embargo, no se utiliza mucho ya que los dos métodos anteriores abren automáticamente el documento si no lo está ya.
8. close(). Cierra el documento, impidiendo escribir de nuevo en él.
Objeto Image. Este objeto representa a una imagen. Se puede acceder a las diversas imágenes del documento por medio del arreglo de referencias document.images[]. Sus propiedades más importantes son:
1. src. Contiene el archivo de la imagen.
2. complete. Valor lógico que será true si la imagen ha terminado ya de cargarse.
También dispone de diversas propiedades de sólo lectura que se corresponden con los atributos de la etiqueta <IMG> como, por ejemplo, width o border.
Objeto Form
Cada forma en un documento crea un objeto Form, Porque un documento puede contener más de una forma. Los objetos Forma son almacenados en un arreglo llamado forms. La primer forma en la página es forms[0] y así sucesivamente. Los métodos y propiedades más importantes del objeto Form son los siguientes:
1. submit(). Envía el formulario.
2. reset(). Devuelve los valores de un formulario a su estado inicial.
3. elements[]. Contiene todos y cada uno de los elementos de los que consta el formulario, es decir, los botones, cajas de textos, listas desplegables, etc. que componen un formulario. Cada elemento puede ser un objeto distinto, por lo que deberemos averiguar de qué tipo son por medio de la propiedad común type.
http://html.conclase.net/w3c/html401-es/interact/scripts.html
http://www.w3.org/2005/03/DOM3Core-es/introduccion.html
No hay comentarios.:
Publicar un comentario