MANUAL DE PROTOTYPE
introdución al Javascript
Hola a todos, me gustaría antes de comenzar este cursito utilizar este pequeño párrafo a modo de introducción para así poder presentarme y presentaros en que consistirán los artículos que por entregas iré subiendo a “esta nuestra comunidad”.
Bueno antes de empezar deciros que se me ocurrió crear este curso para dar a conocer mas a fondo el lenguaje de programación web Javascript, conocer ya no solo lo que la mayoría de los que esteis leyendo sabréis si no adentrarnos mas a fondo en la metodología de JavaScript Notation Object (JSON) y por lo tanto en la OOP utilizando JS para así después tratar las librerías que muchos de los lectores habrán visto y conocerán como prototype, Ruby on Rails, etc…., librerías
desarrolladas en JSON, de las cuales se intentará dar un pequeño glosario o guía de referencia de los metodos, clases u objetos desarrollados y además tras el conocimiento de esta metodología poder implementar nosotros mismo estas librerías para nuestro uso e incluso crearnos nuevas librerías que nos hagan la vida mas sencilla.
De este modo durante el tiempo que dure este pequeño manual, nos meteremos con la creación de Objetos, Objetos globales, metodos y variables publicas y privadas, creación de clases, herencia entre ellas, y en definitiva mostrar todo el poder y la energía que tiene un lenguaje de programación que durante tantos años y por diversos motivos se ha visto relegado a un simple conocimiento y abandonado a programadores amateurs debido a la falta o la mala documentación que se ha desarrollado sobre el.
En cada entrega de las nuevas lecciones se adjuntaran ejemplos que servirán de ayuda a la hora de comprender lo que se intenta explicar, y digo intenta porque a veces aunque se procure explicar algo correctamente no se consigue llegar con claridad a los oyentes o en este caso lectores. De todos modos si en alguna lección hay algo que aun así no se consigue
explicar correctamente se podrá dejar comentarios para así todos ayudarnos mutuamente.
Y ahora ya comenzaremos con el primer tema en el que introduciremos al lector al lenguaje JS y en cierta medida a la OOP en base al JavaScript.
Introducción al Javascript orientado a objetos.
Para comenzar diremos que Javascript es uno de los lenguajes mas conocidos y utilizados del mundo, aun así su conocimiento y desarrollo se ha dejado para amateurs, de echo es
bastante común el comentario de que un programador que se precie no se dedica a Javascript. ¿Y a que es debido esta “leyenda urbana”?. Pues bien entre otras muchas cosas es debido a que:
- Principalmente la especificación publicada por ECMA es de una calidad un tanto mala, ya que es difícil de leer y de comprender, y esto ha ocasionado por ejemplo, que algunos autores de libros de JavaScript no hayan podido utilizarlo para actualizar y mejorar los contenidos de sus publicaciones y el conocimiento sobre este lenguaje, y para el que se haya decidido a bajar las especificaciones de ECMA como fue mi caso, se hayan perdido un poco en la búsqueda de nuevos conocimientos
- Las primeras versiones de Javascript eran bastante débiles, ya que carecían de herencia, funciones internas….
- ECMA se preocupa mas en crear nuevas versiones en vez de dar a conocer y desarrollar una versión completa y facil de entender, lo cual agrava mas aún el problema que es la existencia de infinidad de versiones.
- La existencia de Errores de diseño, como la sobrecarga de “+” para encadenar o anexionar, la política de palabras reservadas demasiada extricta y la inserción del punto y coma al final de las sentencias.
- Y por supuesto los malos libros que contienen errores, poco ejemplos y promueven malas práticas.
Una vez definidos los problemas encontrados en el aprendizaje y divulgación del JavaScript entraremos a explicar por encima la OOP en Javascript.
Javascript Orientado a Objetos:
Se que en este preciso instante algunos pensareis ¿para qué complicarnos la vida programando javascript orientado a Objetos?, pues la respuesta es tan sencilla como eficiente:
- Robustez.
- Simplificación de código
- Reutilización.
- Encapsulamiento.
Entre otros muchos beneficios.
Además olvidaremos las archiconocidas y utilizadas variables globales, que una vez que el código va creciendo realmente no sabes de donde han salido ni en donde se utilizan. Se que, y lo digo por experiencia, a veces las novedades nos asustan, o simplemente nos negamos a aprender porque lo que conocemos es muy eficiente y nos sirve, En resumen, toda esta nueva metodología de programación existe y se utiliza por algo……….asi que, ¿por qué negarnos a conocerla y ponerla en práctica?
Ahora ya, decir que Javascript no es Java y tampoco es java interpretado; Java es Java y javaScript es Javascript. También deciros que sí esta orientado a Objetos, de echo tiene objetos que contienen datos y métodos que interaccionan con los datos de estos u otros objetos. Algo de lo que no dispone Javascript es de clases, pero si que existen constructores que nos resultan muy útiles al a hora de desarrollarlas.
Código Script del constructor de clases
//Construimos el objeto
function constructorObjeto(idObj) {
//Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML.
this.innerTexto = document.getElementById(idObj).innerHTML;
//Me creo un metodo público que me saca por medio de un alert el string que le pase
this.sacarInnerTexto =function(strTexto) {
alert(strTexto);
}
}
function LlamarAlObjeto(paramValue) {
// Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables
var miObjeto = new constructorObjeto(paramValue);
//Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.sacarInnerTexto(miObjeto.innerTexto);
}
Código HTML del constructor de clases
<div>
<div>
<h1>Ejemplo de constructor de un Objeto</h1>
<a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamar al Objeto</a>
</div>
</div>
Ademas en los objetos que creemos también podemos dotarlos de métodos y variables privadas que no podrán ser utilizadas desde ningun otro objeto o metodo de la aplicación fuera de su contexto, osea su objeto.
//Construimos el objeto
function constructorObjeto(idObj) {
//Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML.
this.innerTexto = document.getElementById(idObj).innerHTML;
//Me creo un metodo público que me saca por medio de un alert el string que le pase
this.sacarInnerTexto = function(strTexto) {
alert(strTexto);
}
}
function LlamarAlObjeto(paramValue) {
// Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables
var miObjeto = new constructorObjeto(paramValue);
//Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto miObjeto.sacarInnerTexto(miObjeto.innerTexto);
}
Código HTML del creador de métodos y variables públicas
<div>
<div>
<h1>Ejemplo de creación de metodo y variables
públicas</h1>
<a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamar al Objeto</a>
</div>
</div>
Código Script del creador de métodos y variables privadas
//Construimos el objeto
function constructorObjeto(idObj) {
//Defino metodos y variables privadas que no pueden ser accesibles desde fuera del objeto
var texto = “Texto privado”;
var metodoPrivado = function () {
alert(texto+”—-Esto es un metodo privado que utiliza una variable privada y que se accede a el solo desde dentro del objeto”)
}
metodoPrivado();
}
function LlamarAlObjeto(paramValue) {
// Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables
var miObjeto = new constructorObjeto(paramValue);
}
Código HTML del creador de métodos y variables privadas
<div>
<div>
<h1>Ejemplo de creación de metodo y variables privadas</h1>
<a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamada correcta a un metodo privado</a>
</div>
</div>
Y ya para finalizar este tema en el que se trata el lenguaje JS a modo de introducción hablaremos de la herencia entre clases. En relación a este aspecto he de decir que tras buscar por internet la posibilidad de Herencia, me he encontrado con algunos ejemplos que principalmente no funcionan, como es el caso del ejemplo de herencias que nos muestra “Douglas Crockford”.
En este caso y tras probar las posibilidades de herencia me di cuenta de que o no sabia exactamente como funcionaba o es que realmente no se soporta este tipo de herencia, yo he llegado a la conclusión de que no lo soporta.
Posteriormente vi que la librería prototype ha desarrollado un metodo por el cual se pueden realizar herencias entre clases. Pero aún así seguí buscando la forma de tener una metodología propia para poder implementar las herencias en nuestro propia librería de JS. Y así llegué a un post en el que se trataba el tema en cuestión y en el cuál “Harry Fuecks” nos ha abierto la puerta a dotar a nuestrar propias librerías de herencia entre clases. ¿Y como es esto?, pues es tan sencillo como crearnos un objeto que lo que haga sea recorrer cada par “nombre:variable” del objeto que pasamos como original y asignárselo a nuevos pares “nombre:variable” del objeto al que deseamos copiar la herencia.
Bueno por si no me he explicado bien vamos a ver unos ejemplos para así ver su funcionamiento.
constructor de un objeto creador de herencias
function creaHerencia(objDestino, objOrigen) {
var sConstructor = objOrigen.toString();
var aMatch = sConstructor.match( /\s*function (.*)\(/ );
if ( aMatch != null ) {
objDestino.prototype[aMatch[1]] = objOrigen;
}
for (var m in objOrigen.prototype) {
objDestino.prototype[m] =objOrigen.prototype[m];
}
};
Código Script del creador de herencias
//Funcion que copia las clases
function creaHerencia(objDestino, objOrigen) {
var sConstructor = objOrigen.toString();
var aMatch = sConstructor.match( /\s*function(.*)\(/ );
if ( aMatch != null ) {objDestino.prototype[aMatch[1]] = objOrigen; }
for (var m in objOrigen.prototype) {
objDestino.prototype[m] =objOrigen.prototype[m];
}
};
// Funcion que crea las variablespropias de cada objeto
function creaciondeIdentificadores(obj) {
this.id = document.getElementById(obj)};
// metodo del objeto “creaciondeIdentificadores” que saca el mensaje de alerta
creaciondeIdentificadores.prototype.identificador = function() {
alert(“el valor del campo es:”+this.id.value);
};
function datosCampo(obj) {
// Llamamos al objeto de referencia
this.creaciondeIdentificadores(obj);
};
// Llamamos a la funcion que hara que datosCampo herede de creaciondeIdentificadores creaHerencia(datosCampo, creaciondeIdentificadores); function verValordeCampos(obj) {
var obj = new datosCampo(obj.id);
obj.identificador();
}
Código HTML del creador de herencias
<div>
<div>
<h1>Ejemplo de creación de herencias</h1>
< input type=”text” value=”" name=”campo1″ id=”campo1″ onblur=”verValordeCampos(this)”>
</div>
</div>
FUENTE: ajax hispano