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.
Objetos
Text
Cuatro
elementos HTML distintos (text, textarea, password y
hidden) son, objetos muy parecidos entre sí. Tienen tres propiedades
verdaderamente importantes:
1.
name. Nombre del elemento, indicado en el atributo NAME de su etiqueta
HTML. Este atributo está presente en todos los objetos que son elementos
de un formulario.
2.
type. Tipo del elemento. Al igual que el anterior, esta propiedad está presente
en todos los objetos que representan elementos de un formulario. En este
caso valdrá siempre “text”.
3.
value. Contiene el valor, es decir, el texto tecleado por el usuario.
Objetos
Checkbox y Radio. En
estos objetos el estado del elemento es de tipo lógico: puede estar
seleccionado o no. Este valor lógico se contiene en la propiedad checked
Objetos
Select y Option
El objeto Select es el más complicado. Esto
es debido a que contiene en su interior un arreglo de objetos
Option. Dispone de dos propiedades:
1.
selectedIndex. Empezando a contar a partir
de cero, indica qué opción está seleccionada. Si hay varias
seleccionadas, indica la opción con el índice más bajo.
2.
options[]. Arreglo que contiene los
objetos Option correspondientes a todas y
cada una de las opciones. El objeto Option, por otro lado, dispone
de otras dos propiedades:
1.
selected. Valor lógico que será verdadero si la opción está
seleccionada.
2.
text. Texto que acompaña a la opción. Otros objetos.
El modelo de objetos del documento define
varios objetos, por así decirlo, “menores”, que no tienen
relación con nada físico de la página en la que estamos. Es decir,
no guardan relación con las etiquetas HTML que estén en ellas escritas.
Son los siguientes:
Objeto
History
Se
accede a este objeto por medio de la referencia
document.history y contiene todas las
direcciones que se han visitado en la sesión actual.
Aunque no permite acceder a él, dispone de varios métodos para sustituir
el documento actual por alguno que el usuario ya haya visitado:
1.
back(). Volver a la página anterior, la sintaxis para utilizarlo es la
siguiente: window.history.back();
2.
forward(). Ir a la página siguiente.
3.
go(donde). Ir a donde se indique, siendo donde
un número tal que go(1)=forward() y go(-1)=back().
Objeto
Location
Se
accede a este objeto por medio de la referencia document.location
y contiene información sobre la dirección de la página actual en varias
propiedades.
1.
href.- Permite el acceso a la
dirección de la página actual. Si lo
cambiamos cambiaremos de página.
2.
protocol.- Protocolo de la página actual. Habitualmente http.
3.
host.- Máquina donde se alberga la página actual.
4.
pathame.- Camino de la página actual
5.
search.- Esta propiedad permite acceder a la última parte de la
dirección, a partir de la interrogación, que son los
parámetros. Puede ser útil para pasar parámetros de
una página a otra.
Objeto
Screen
Se puede acceder a este objeto por medio de la referencia
screen. Nos permitirá conocer la configuración de la pantalla
del usuario, todos sus atributos son de
sólo lectura.
1.
height: Altura de la resolución de la pantalla.
2.
width: Anchura de la resolución de la pantalla.
3.
pixelDepth: Número de bits por pixel.
No hay comentarios:
Publicar un comentario