Programación Orientado por Objeto (OOP) toma una poco de trabajo para acostumbrarse, pero te digo que si haz comprendido todo hasta el momento, probablemente no tendrás ninguna dificultad comprendiendo esta lección.
Quieres utilizar objetos cuando sea que necesites crear mas de uno de cualquier otra cosa. Pero creando un objeto genérico, puedes utilizar este para crear cualquier número de ellos sin duplicar mucho de tu código. Esto tiene un impacto muy grande en tu codificación porque significa que no tienes que escribir mucho mas código, todo esta organizado bellamente y el JavaScript ejecutara más ligero.
Puedes verNetscape's JavaScript Guia para una explicación comprendida de como crear objetos nuevos. En esta lección te daré un pequeño vistazo de OOP y te mostrare de como hacer un simple objeto que se pueda utilizar indefinidas veces con capas funcionando. Todo lo que haré en esta Guía desde este punto en adelante será basado en objeto.
Cuando creas objetos, realmente lo que estas haciendo es colectando un montón de diferentes variables adentro de un bonito paquete al cual podrás accesar fácilmente mas tarde. Cada objeto está dentro de su propio paquete y los variables en estos paquetes están referidos como propiedades properties. Puedes escribir funciones las cuales pueden manipular solo las variables (propiedades) de ese objeto, estas están referidas como métodos methods.
Utilizando objetos ayuda bastante porque estos son diseñados para que estos sean reproducidos para hacer muchos objetos diferentes los cuales serán utilizados similarmente. No deseo confundirte en este momento, digamos que tenemos un objeto genérico llamado bloc "block". Entonces decidimos que queremos tener bastantes blocs (block1, block2, block3 etc.) los cuales todos tienen variables similares (altura "height", ancho "width", profundidad "depth" etc.). Al utilizar programación orientados de objetos, los variables en los blocs estarán todos reunidos juntos en este formato :
| Object Name | block1 | block2 | block3 |
| property 1 | block1.width | block2.width | block3.width |
| property 2 | block1.height | block2.height | block3.height |
| property 3 | block1.depth | block2.depth | block3.depth |
Este es el básico formato para todos los objetos JavaScript:
function objectName(arguments) {
this.propertyName = somevalue
}
Así para crear este genérico objeto bloc "block", el código aparecerá algo como así:
function block(width,height,depth) {
this.width = width
this.height = height
this.depth = depth
}
Note que cualquier variable definido con (este) "this" enfrente de esté se volverá una propiedad del objeto. Muchas de las propiedades serán asignadas inicialmente valores basados en esos pasados en el argumento, pero también puedes fijar a otro conjunto de propiedades de lo que quieras, por ejemplo:
function block(width,height,depth) {
this.width = width
this.height = height
this.depth = depth
this.color = "red"
}
...hará que el ancho, la altura y la profundidad cambie dependiendo de como es iniciado, pero todos los blocs tendrán una propiedad de color de rojo "red".
Una vez que esta función genérica es creada, podrás reproducir objetos basados en este código, esto es referido como creando un " instance" de un objeto. El formato para crear instances de un objeto definido el mismo; es así:
newObjectName = new objectName(arguments)
Entonces para crear un bloc con objetos llamado block1, block2, y block3 escribirás :
block1 = new block(10,20,30) block2 = new block(5,20,10) block3 = new block(15,30,15)
Después que estos han sido definidos podrás hacer lo que desees con el objeto, chequear sus propiedades, o cambiarlas. Propiedades de un objeto funcionan exactamente de la misma manera como hacen los variables normales.
Una vez que tengas la función del objeto creada, podrás extender la funcionalidad del objeto con solo crear métodos para este. El formato para crear se hace de la siguiente manera :
function objectName(arguments) {
this.propertyName = somevalue
this.methodName = methodFunction
}
function methodFunction(arguments) {
// escribe algún código para el objeto
}
El methodFuncion() funciona como cualquier otra función, excepto que cuando llamas a la función tienes que agregar el nombre del objeto el cual desees aplicar la función :
newObjectName.methodFunction()
Entonces utilizando esta idea, podemos agregar un método al objeto bloc el cual calculará el volumen del bloc y devuelve el valor:
function block(width,height,depth) {
this.width = width
this.height = height
this.depth = depth
this.color = "red"
this.volume = blockVolume
}
function blockVolume() {
return this.width*this.height*this.depth
}
Para encontrar el volumen de block1 debes de escribir:
block1.volume()
Ejemplo: newobjects1.html este tiene un simple ejemplo de un objeto bloc y te permite chequear los valores de las propiedades y la advertencia del volumen utilizado .
Utilizando los conceptos de las lecciones anteriores, podemos aplicar a la programación de objetos orientados de hacer que la función de trabajar con capas sea una tarea más fácil. En lugar de siempre escribir de vuelta un código de iniciación para el indicador variable, puedes crear un objeto genérico que hace la misma cosa con solo una línea de código.
Recuerda devuelta que hacen los indicadores variables:
if (ns4) layer1 = document.layer1Div else if (ie4) layer1 = layer1Div.style
...el cual es sinónimo con:
if (ns4) layer1 = document.layers["layer1Div"] else if (ie4) layer1 = document.all["layer1Div"].style
En este caso, capa "layer1" es una variable de referencia la cual apunta a las propiedades de las capa de los CSS llamada "layer1DIV". Si haz estado utilizando variables indicadores tu mismo, debes de saber que para crear muchos indicadores variables es un poco incómodo. Para arreglar ese problema haré un objeto genérico que creara una propiedad css la cual hace las mismas cosas que los indicadores variables hacen:
function layerObj(id) {
if (ns4) this.css = document.layers[id]
else if (ie4) this.css = document.all[id].style
}
Para utilizar este objeto layerObj, ahora puedes iniciar tus indicadores variables con solo:
layer1 = new layerObj("layer1Div")
Una vez que el objeto capa "layer1" es iniciado podrás accesar las propiedades de las css de "layer1Div" con solo utilizando:
layer1.css.left layer1.css.top layer1.css.visibility etc....
Entonces lo que realmente cambia es el extra css entre el total. Podemos extender el objeto layerObj con definir automáticamente las propiedades x y y las cuales representarán las propiedades de la izquierda y arriba de la capa:
function layerObj(id) {
if (ns4) {
this.css = document.layers[id]
this.x = this.css.left
this.y = this.css.top
}
else if (ie4) {
this.css = document.all[id].style
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
}
}
De nuevo si deseáramos crear un objeto capa1:
layer1 = new layerObj("layer1Div")
El objeto layer1 tendrá estas propiedades:
layer1.css layer1.x layer1.y
Nota que podemos utilizar X y Y como nuestras propiedades porque este es nuestro objeto con el cual estamos trabajando. Yo antes estaba utilizando los xpos y ypos porque Netscape incluyen ya esas propiedades como parte de su propio objeto Layer. Desde que estamos creando un nuevo objeto podemos llamar las propiedades como queramos.
Ejemplo: newobjects2.html muestra a un ejemplo utilizando este objeto y te permite de chequear los valores de las propiedades.
Podemos extender la funcionalidad del objeto layerObj para que sea más fácil de manipular capas como sea creáramos funciones individuales separadas. Recuerda en la lección Moviendo Layers hice una función genérica la cual puede ser utilizada para mover una capa a cualquier posición en la pantalla:
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
Esas funciones trasladadas en métodos de objeto "layerObj" se verá así:
function layerObj(id) {
if (ns4) {
this.css = document.layers[id]
this.x = this.css.left
this.y = this.css.top
}
else if (ie4) {
this.css = document.all[id].style
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
}
this.moveBy = layerObjMoveBy
this.moveTo = layerObjMoveTo
}
function layerObjMoveBy(x,y) {
this.x += x
this.css.left = this.x
this.y += y
this.css.top = this.y
}
function layerObjMoveTo(x,y) {
this.x = x
this.css.left = this.x
this.y = y
this.css.top = this.y
}
Otra vez si deseáramos crear un objeto layer1:
layer1 = new layerObj("layer1Div")
Podemos entonces mover la capa con solo utilizar los métodos moveBy() o moveTo():
layer1.moveBy(-5,10) layer1.moveTo(100,100) etc.
Jemplo: newobjects3.html muestra un ejemplo utilizando estos métodos.
Este pequeño objeto solamente podrá ser utilizado en instantes específicos donde lo único que necesitas hacer es de mover una capa alrededor en una simple manera. La forma en que he hecho este objeto no tome an cuenta capas añadidas, así que si necesitas utilizar capas añadidas tendrás que cambiar el código para incluir la capa extra del pariente. En la lección El Dynamic Layer Objeto he utilizado estas técnicas creando una solución unificada y cross-browser para trabajar con capas y creando métodos para animaciones.
| Casa | Próxima Lección: Objeto Chequedor de Browser |