Esto puede llevar a que el estilo visual de nuestro Firefox 3 no sea el más agradable o como lo queremos. A pesar de que no me molesta el tema, decidí instalar uno de mis habituales temas de cuando uso Firefox en windows: Kempelton

Sin embargo, cuando segui el link al tema Kempleton en Mozilla.org, me encontre con la siguiente sorpresa:

“Kempelton is not avaliable for Linux”

De modo que no podía instalarlo, eh? Decidí probar “por la fuerza”, es decir, buscando el archivo .jar e instalandolo directamente en Firefox. Encontré el linx facilmente en el html:

Acto seguido, use el link de descarga de Kempelton para windows, bajé el .jar a mi escritorio y lo arrastré hasta la ventana de temas de Firefox.

Voilá! La pantalla de instalación de themes apareció. Era cuestion de solo instalar y reiniciar.

La razón para que no este disponible en Linux parece ser la desaparición de los menus de FF cuando les haces click o hover. Para mi este no es un problema tan grave, pues estoy acostumbrado a usar shortcuts. Por ultimo, un preview de Kempleton corriendo en Firefox 3 (Ubuntu):

(Click para agrandar)

Nota para entender este post: Esta es una crónica real, donde relato mi quest por entender por que algunos tienen host en clab y otros pobres mortales (lease Lunatic), no…

Era tarde, y los resquicios de la ultima partida de Counter Strike repercutían en mi cabeza todavía. Gritaba “Fire in the hole!!!” mientras dibujaba con emoción un rectángulo en Fireworks. De repente, sucedió. Encontré un alma que dudaba como yo de las oscuras estratagemas del hosting en Clab. Oh, pero cuanta inocencia:

Con los pocos usuarios que tiene Cristalab, debe ser relativamente fácil dar hosting gratis a todos, NO? . Update: Si, es sarcasmo ¬¬

Nota: Ya en serio, sé que estos contenidos light no suplen los posts “buenos”, con info, tutos o links interesantes. Pero de cualquier manera, puedes burlarte de elfleat y visitar tres blogs que se hospedan gratuitamente. Asi que PTJ

Update: Yaraher descubrió que faltaba el link hacia XK, e intuyó que era por cobardía a su reacción. Bueno, ya construi un bunker y contraté a Teh Loro’s Tm protection. Asi que ahi está el susodicho link. *snif, mi integridad física

Gracias a las ventajas que trae el sh (syntax highliting) he decidido implementar una solucion basada en javascript, mas concretamente en jQuery. Es un plugin llamado chili, de uso relativamente sencillo (aunque su implementacion me costó un poco, pero más por mi culpa que por la del plugin).

Pasate por la web oficial de chili, y echale un vistazo, es recomendadisimo. Luego quizá haré un buen review indicando uso, instalacion, etc.

Para dar una pequeña demostración, pondré un ejemplo de código en Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" initialize="init();">
   <mx:Script>
        <![CDATA[
      public var clabRss:XML
         public function init():void{
            var req:URLRequest = new URLRequest("http://www.cristalab.com/rss.php");
            var xmlLoader:URLLoader = new URLLoader();
            xmlLoader.load(req);
            xmlLoader.addEventListener(Event.COMPLETE,onLoadComplete)
         }
         public function onLoadComplete(event:Event):void{
               clabRss = XML(event.target.data);
               main.title=clabRss.channel.title
               posts.labelField = "title";
               posts.dataProvider=clabRss.channel.item;
               posts.selectedIndex=0;
               titleTxt.text=clabRss.channel.item[0].title
               description.text=clabRss.channel.item[0].description;
         }
         public function filter(evt:Event):void{
            if(evt.target.text==""){
               posts.dataProvider=clabRss.channel.item;
            }else{

               posts.dataProvider=clabRss.channel.item.(title.indexOf(evt.target.text)!=-1)
            }
         }

      ]]>
   </mx:Script>
   <mx:Panel id="main" width="100%" height="100%" layout="absolute">
      <mx:Text y="10" text="Cargando…" fontWeight="bold" fontSize="36" id="titleTxt" height="168" left="10" right="10"/>
      <mx:TextArea right="20" left="10" id="description" wordWrap="true" editable="false" bottom="75" top="150"/>
      <mx:Button x="10" label="Copy Link" bottom="25" toolTip="{posts.selectedItem.link}" click="{System.setClipboard(posts.selectedItem.link)}"/>
   </mx:Panel>
   <mx:VBox height="100%">
   <mx:Label text="Filtrar:" fontWeight="bold"/>
   <mx:TextInput id="searchBox" width="100%" change="filter(event)"/>
   <mx:List height="100%" id="posts" width="300" change="{titleTxt.text=posts.selectedItem.title;description.text=posts.selectedItem.description;}"></mx:List>
   </mx:VBox>
</mx:Application>

y

package
{
   import flash.display.*;
   import flash.events.*;
   import flash.ui.Keyboard;
   import flash.utils.Timer; 

   public class Mario extends MovieClip
   { 

      private var enMovimiento:Boolean = false;
      private var temporizador:Timer = new Timer(10,0);
      private var teclaPulsada:uint;
      private var contendorPuntos:Sprite = new Sprite(); 

      private var contactoConCamino_Arriba:Boolean;
      private var contactoConCamino_Abajo:Boolean;
      private var contactoConCamino_Izquierda:Boolean;
      private var contactoConCamino_Derecha:Boolean; 

      public function Mario()
      {
         lineas.visible = false;
         puntos.visible = false;
         stage.addEventListener(KeyboardEvent.KEY_DOWN,tecla);
         temporizador.addEventListener(TimerEvent.TIMER,mover);
      }
      private function tecla(e:KeyboardEvent):void
      {
         if (enMovimiento == false) {
            this.contactoConCamino_Arriba= false;
            this.contactoConCamino_Abajo= false;
            this.contactoConCamino_Izquierda= false;
            this.contactoConCamino_Derecha= false; 

            teclaPulsada = e.keyCode;
            palparCaminos();
            temporizador.start();
            enMovimiento = true;
         } 

      }
      private function mover(e:TimerEvent):void
      { 

         var velocidad:uint = 2; 

         if (teclaPulsada == 39 && this.contactoConCamino_Derecha == true) // 39 es RIGHT
         {
            mario.x += velocidad;
         }
         if (teclaPulsada == 37 && this.contactoConCamino_Izquierda== true) // 37 es LEFT
         {
            mario.x -= velocidad;
         }
         if (teclaPulsada == 38 && this.contactoConCamino_Arriba == true) // 39 es UP
         {
            mario.y -= velocidad;
         }
         if (teclaPulsada == 40 && this.contactoConCamino_Abajo== true) // 40 es DOWN
         {
            mario.y += velocidad;
         } 

         for (var i:uint = 0; i <= puntos.numChildren-1; i++) {
            // En el mc llamado mario hay un MC llamado centro que sirve como detector..
            // ... de coliciones
            // Si centro coliciona con cualquier punto se detiene
            if (mario.centro.hitTestObject(puntos.getChildAt(i)) == true) {
               temporizador.stop();
               enMovimiento = false;
            }
         }
      }
      // Funcion que le indica a Mario, que caminos puede cojer
      // Mas tecnico. Dependiendo de que lineas tenga arriba, abajo, derecha o izquierda...
      // ...se podra mover en una direccion
      // En el MC llamado mario hay 4 MC que sirven como vigotes de un gato, para saber..
      // que lineas tiene cerca 

      private function palparCaminos():void
      {
         for (var i:uint = 0; i <= lineas.numChildren-1; i++) {
            if (mario.arriba.hitTestObject(lineas.getChildAt(i)) == true) {
               this.contactoConCamino_Arriba= true;
            }
            if (mario.abajo.hitTestObject(lineas.getChildAt(i)) == true) {
               this.contactoConCamino_Abajo= true;
            }
            if (mario.izquierda.hitTestObject(lineas.getChildAt(i)) == true) {
               this.contactoConCamino_Izquierda= true;
            }
            if (mario.derecha.hitTestObject(lineas.getChildAt(i)) == true) {
               this.contactoConCamino_Derecha= true;
            }
         }
      }
   }
}

No siendo más… hasta otra

Cuando bajé el alpha (hace ya algunos meses) y compilé mis primeras aplicaciones, sentí que le faltaba mucho por abarcar: No habia manejo de entorno, ni de ventanas… es decir, con html y javascript podias crear una aplicacion web de escritorio, pero no usar el sistema del cliente para nada.

Tuve una gran sorpresa cuando descargue el SDK de AIR beta 2. Este incorpora metodos mucho mas extensos, accesibles incluso desde Javascript simple, para controlar todo lo mencionado anteriormente simplemente incluyendo un archivo .js. El método de escribir la aplicacion se simplificó con esta version, asi como se ganó estabilidad y velocidad en el compilador. Un ejemplo de lo que podemos conseguir, usando solo javascript y air, es:

var sourceFile = air.File.documentsDirectory;
sourceFile = sourceFile.resolvePath("Apollo Test/test1.txt");
var destination = air.File.documentsDirectory;
destination = destination.resolvePath("Apollo Test/test2.txt");

if (sourceFile.copyTo(destination, true)) {
    air.trace("Done.")
}

Simple y genial. Además, hay una documentación excelente al respecto. En lo personal, le veo un gran futuro al AIR. De hecho, ya vemos muchas aplicaciones que estan hechas en este formato. ¿Long live adobe?

Puedes descargar el ultimo SDK en el siguiente enlace, asi como la documentacion:
Adobe AIR

PD: Como nota curiosa… has visto ya adobeair.com? XD

Por medio de Base64, un sistema de codificación, podemos transformar cualquier tipo de archivo a caracteres simples ( texto plano ). Esto resulta muy útil cuando no queremos crear por ejemplo multiples archivos de imagen para adjuntarlos.

Si conocen Stylish, una extension para firefox, se preguntaran como hacen los autores de un tema para que en un archivo de css vayan incluidas las imagenes. Pues… base64 es la solucion. Además es ideal para hostings restrictivos, pues lo que estas arhcivando es simple texto.

Estructura

La estructura basica que tiene un archivo codificado en base64 es la siguiente. El ejemplo es de un archivo png:

data:image/png;base64,MuChasLetrasyNum3r0s

Entonces… examinemos despacio cada uno de los componentes.

data:image/png
Nos indica que tipo de archivo estamos enlazando. Podemos reemplazar el “image/png” por el MIME type del tipo de archivo que vamos a usar. Una lista de MIME types esta disponible para que no te pierdas en esa parte.

Lo siguiente, base64, simplemente indica que el texto siguiente está codificado en base64.

MuChasLetrasyNum3r0s : Compone el archivo codificado en texto plano. Eso es lo divertido, lo que te voy a enseñar a continuacion

Codificar en Base64

Php tiene dos funciones nativas que nos pueden ser muy utiles en este aspecto: base64_encode y base64_decode

Entonces, sabiendo eso, solo nos queda crear una funcion sencilla para leer un archivo y convertirlo:

<?php
function codificarImagen ($imagen) {
	echo "data:image/png;base64,".base64_encode(file_get_contents($imagen));
};
codificarImagen("imagen.png");
?>

Lo anterior nos devuelve la imagen png convertida a base64. Fácil, no?

Usemos lo aprendido

Bueno, genial, tranforme mi linda imagen a un monton de numeros y letras raros. ¿Y?

La buena noticia es que no tienes que hacer nada mas. Simplemente usa tu supertexto para todo:

 Una imagen normal 
<img title="Imagen en Base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA…." />

 Una imagen de fondo en css:
<style type="text/css">
div.imagen{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA….);
}
</style>

 Un css completo: 
<link href="data:text/css;base64,iVBORw0KGgoAAAANSUhEUgA.." rel="stylesheet" type="text/css" />

 Un js completo: 
<script src="data:text/javascript;base64,iVBORw0KGgoAAAANSUhEUgA…" type="text/javascript"></script>

Y creo que ya entendieron el mensaje.

Problemas?

Desafortunadamente, y como sucede normalmente con lo cool, ie6 no soporta la codificacion en Base64. Sin embargo, los otros browsers (los decentes, como Firefox, Opera, Safari, etc) si, e incluso hay hacks para que funcione en el “bendito”. Uno de los mejores es el siguiente:
Fix para Base64 en ie6, por Dean Edwards

Recomendaciones

Las imagenes y archivos aparte no son malos, de modo que usa esta tecnica cuando se justifique, no vayas a empezar a codificar todas tus imagenes XD (so, es decir que no abuses). Lo otro es que logicamente a archivos mayores, el tamaño de la cadena de texto generada es mayor. Y por ultimo, no siempre se gana tamaño al codificar una imagen: A veces (bueh, la verdad, no se si siempre) se gana tamaño al ser convertido en texto. Esperen comparativas U_U

Links

• Si no tienes php en tu maquina, usa este Conversor a Base64.
• Si quieres que vean tus cool imagenes en ie6, usa el Fix para Base64 en ie6, por Dean Edwards o la version sexy de este: Sexy Base64 fix para ie6
• Si quieres aprender de Base64, pues Base64

Un saludo

Este tutorial ya tiene algo de tiempo rondando por Internet, especificamente en Cristalab. No lo había publicado en mi blog por que… bueno, la verdad no se por que XD. Pero la idea es basicamente aprender lo basico de jQuery.

¿Que es jQuery?

jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de
una web por medio del DOM. Lo que la hace
tan especial es su sencillez y su reducido tamaño.

¿Por que debería usarlo?

La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las
caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y
window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos
problemas.

¿Como empiezo a usarlo?

Lo primero que debes hacer, es descargarlo de la web oficial: jQuery . Una vez descargada la libreria (son más o menos 16k) puedes
proceder a tu primer script:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecución y sintaxis básica

jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo
“$”. Ahora, la forma de una sentencia es la siguiente:


$(elemento).evento(funcion-o-parametro);

La manera de inicializar jQuery es muy util:


$(document).ready(function(){
//Aqui tu codigo
});

Ready es un método propio de jQuery, que revisa si el
DOM está listo para usarse. Es más util
que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados
(como scripts e imagenes) paa ejecutar. El “ready”, en cambio, espera solo a la estructura.

Acceso a elementos y eventos

Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en
CSS. Con estos metodos, seleccionaremos diferentes
elementos de la pagina, con los cuales interactuaremos:

Los eventos responden a una interacción del usuario con la pagina o de la misma pagina de manera interna:
Por ejemplo, cuando el usuario hace click o se termina de ejecutar una funcion.

Los eventos que se pueden usar en jQuery son los mismos que usariamos normalmente en JavaScript. El unico cambio es la
supresión del “on” inicial: mouseover, click, focus, etc

Veamos todo junto

Veamos un ejemplo de lo visto hasta ahora:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Prueba de jQuery</title>
        <script src="jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
		

			$(document).ready(function (){
				//Aqui asignamos el click al elemento <a>
				$("a").click(function (){
					alert("Presionaste un <a>");
				});
			});

		</script>
	</head>
  <body>
	<a href="#"> Presioname! </a>
  </body>
</html>

Al presionar cualquier etiqueta “a” del documento, se ejecutaria el alert.

Añadir o retirar clases

Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases.
Con jQuery, estas pueden ser asignadas dinamicamente:


$("a").addClass("boton");

O tambien removidas:


$("a").removeClass("boton");

Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Prueba de jQuery
    </title>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">

	$(document).ready(function (){
		//Aqui asignamos el click al elemento <a>
		$("a").click(function (){
			alert("Presionaste un <a>");
			//Aqui removemos la clase!
			$("a").removeClass("boton");
		});
		//Aqui añadimos la clase a los elementos <a>
		$("a").addClass("boton");
	});
</script>

<style type="text/css">

	.boton{
	color:#f00;
	display:block;
	width:100px;
	text-align:center;
	border:#f00 solid 1px;
	}

</style>

  </head>
  <body>
    <a href="#" class="algo">Presioname!</a>
  </body>
</html>

Al ejecutarse el script, todos los “a”, tomarán la clase “boton”, que tiene propiedades de CSS.
Sin embargo, al oprimir el elemento, la clase es removida.

Efectos especiales

Esta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos
y faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se
usan:

“Callbacks”, llamar funciones y pasar parametros

Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma
tradicional:

funcion();

Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo,
permiten un parámetro opcional, el de “callback”. De modo que la sintaxis para un efecto con
callback, sería (por ejemplo) la siguiente:


$(objeto).show("velocidad", funcion);

Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el
siguiente:

$(objeto).show("slow", function(){
lafuncion("parametro1","parametro2");
});

Conclusiones

Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus
funcionalidades. Para conocer más a fondo esta librería, puedes visitar los siguientes vinculos:

• Página principal de jQuery
• Documentación de jQuery
• Tutoriales de jQuery
• Descargas de jQuery
• Blog de jQuery

Que es jQuery UI? (Traducido)

jQuery UI es un set de interacciones y widgets personalizables, escritos en base a la librería jQuery, que puedes usar para construir aplicaciones web altamente interactivas.

Página del proyecto de jQuery ui

El núcleo de la librería se centra alrededor de interacciones del mouse, soltar y agarrar (drag & drop), sortear, seleccionar y redimensionar.

En base a esas interacciones, hay construídos varios “widgets” reusables y útiles: Acordeones, calendarios, diálogos, sliders, organizadores de tablas y pestañas

Finalmente, la librería está terminada por algunos efectos que puedes usar para dar vida a tu sitio, como magnifier (el efecto de tsunami o el del docklet de Mac) y sombras

Elementos y documentacion

Hay una graaan cantidad de elementos, con muchas las opciones para probar… muy buenos:

• Draggables : Hace que items sean arrastrables por el mouse
• Droppables : Hace que los items sean soltables por el mouse
• Sortables : Hace que una lista de items sea sorteable
• Selectables : Hace que una lista de items sea seleccionable con el mouse o el teclado
• Resizables : Hace a un elemento redimensionable
• Accordion : Un panel de contenidos colapsable
• Calendar : Un widget dinamico para escoger fechas
• Dialog : Ventanas modales y dialogos de confirmacion
• Slider : Un slider deslizable con el mouse
• Table : Una tabla que se puede sortear
• Tabs: Un panel con pestañas.
• Shadow : Genera sombras (drop shadows) dinamicamente
• Magnifier : Aumenta o disminuye el tamaño de un elemento basandose en la proximidad

Demos

En el momento hay un demo bastante bueno, que muestra las posibilidades de el ui:
Update: jQuery ui demo

Adicionalmente, cada elemento del ui tiene una pagina de demo, donde podremos ver las opciones del elemento, sus combinaciones y etc. Solo buscalas en la pagina de cada elemento.

Notas de uso

Para reducir el tamaño de tu pagina y no tener que cargar todos los modulos asi no los vayas a usar, jQuery ui está dividido en varios “compenentes”. Los nombres de estos son mas o menos ui.nombre.js para cada uno.Cada componente tiene sus dependencias: Por ejemplo el componente draggable depende de ui.mouse.js, que es donde se definen las interacciones con el mouse.

Así que para, por ejemplo, usar los draggables debes hacer lo siguiente:

<script src="jquery.js"></script>

<script src="ui.mouse.js"></script>

<script src="ui.draggable.js"></script>

<!--y si quieres tener las opciones extra:-->

<script src="ui.draggable.ext.js"></script>

Cool, no?

Desarrollo

Actualmente se están desarrollando bastantes módulos. Algunos no están totalmente listos para usar, pero si confías en el poder luminoso de la fuerza, puedes buscar algunos en el folder “ui” de el SVN de jQuery. Ahi encontrarás (o tal vez no XD) plugins indocumentados que te puedan ser útiles.

Algunos sobre los que se está trabajando son: Menu, Control de formularios, Arbol, Splitter (?), Editor de texto enriquecido y Uploader.

So…

Ya saben, todo está en experimentar. Viendo los demos realmente te inspiras: El componente modal puede ser muy bueno para reemplazar alerts, el efecto Magnify está muy bien logrado, etc. Asi que… long live jQuery ( y si era con f, ptj )

Como eso es tan poco frecuente cuando yo instalo un blog… estoy probando todas las caracteristicas

Bye

JavaScript es un lenguaje de programacion/scripting ampliamente subestimado e infravalorado. La principal razón de esto es por como surgió: Fue desarrollado primero para un solo navegador (Netscape Navigator) pero pronto, al ver su potencial, fue integrado a la mayoría de navegadores web por sus fabricantes.

Como suele suceder con los lenguajes de creación web, pronto surgió el caos: Extensiones, atributos o métodos no estandares fueron implementados por uno u otro navegador, causando que muchas veces se tuviera que crear un código dos veces, para que corriera en cualquier escenario. Así, gracias a esta falta de estandarización, muchos tomaron al JavaScript como una mala práctica (No les recuerda al CSS?).

Otra de las razones que existen para las criticas hacia JavaScript, es que no esta basado en clases, si no en prototípos (más adelante la explicacion). Para muchos hardcoders que programan en Java o C++ es preferible la construcción de objetos con clases, por ventajas que ya conocemos, y un lenguaje que no las posea no es tan extensible o usable. Además, la extrema simplicidad del JS y su mal uso han originado horrores que todos hemos sufrido (popups, SnapShots, textos parpadeantes, propagandas dinamicas, etc). Y principalmente a eso le debemos el preconcepto hacia el JS.

Sin embargo, gracias a que el ECMAscript es basado en prototípos, el JavaScript tambien lo es lo que lo convierte en un lenguaje orientado a objetos (OOP, por Object Oriented Programming o POO, en español, por Programación Orientada a Objetos). Este tutorial pretende observar como se construyen los objetos en javascript, y como se pueden usar.

Clases vs prototípos

Como ya se mencionó, JS es basado en prototípos. Un prototípo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos.

Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototípo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos:

[Objeto = Prototípo]{
  [ Propiedad = Variable ]
  [ Método    = Funcion  ]
}

Creación del objeto

Entonces, iniciemos la creación del objeto: Para este ejemplo usemos los tradicionales animales. La creación de un objeto se hace con una funcion, que será la constructora, y a la vez la que identifique el objeto.

Creemos una “clase” Gato para empezar… por que todos aman crear las clases “gato”. (Si no me crees, revisa los tutoriales de POO. Si no hay un Gato ahi, el tutorial no vale la pena XD).

Hay dos formas de definir la funcion constructora: Definir una funcion o definir una variable cuyo contenido sea una función. Puede parecer redundante, pero lo es =_=. Veamos ambas formas:

function Gato( parametros ){
	// Codigo
};

o

var Gato= function( parametros ){
	// Codigo
};

Nota: Para el resto del tuto vamos a usar la segunda forma

Propiedades del objeto

Como vimos anteriormente, las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la funcion constructora, marcadas con “this”, para poder ser accesadas como parte del objeto. Las variables reciben parametros que se envian al crear una nueva instancia del objeto (para nuestros propositos, al crear un nuevo gato).

Entonces veamos el ejemplo con nuestro objeto Gato. Un gato tiene como propiedades básicas… digamos que su nombre, su color, y su edad. Entonces estas propiedades serán las que reciba la funcion constructora para ser asignadas, Veamos como:

var Gato= function(nombre, color, edad){
  this.nombre= nombre;
  this.color= color;
  this.edad= edad;
}

Con lo anterior, definimos el Gato, y cómo es ese gato. Sin embargo, algunos de los que son conocedores de la OOP ya deben estar pensando… ¿Y el strict data typing?. El script data typing es lo que regula el tipo de datos que entran a un objeto, y asi mismo el cómo se comportan. Por lo general, los lenguajes basados en clases son muy estrctos con respecto a los tipos de datos que se usan.

Por fortuna, en JS podemos emular el SDT, asignando los tipos de variables de entrada y (si eres un maniaco) chequeando que los valores sean correctos:

var Gato= function(nombre, color, edad){
  this.nombre= new String(nombre);
  this.color= new String(color);
  this.edad= new Number(edad);
  //Por ejemplo
  if( isNaN ( this.edad ) ){
	alert("Error en el data-typing, edad no es un numero");
  }
}

Pues perfecto. Hemos creado la definición de nuestro objeto. Sin embargo nos falta un pequeño detalle. ¡Usar el objeto! Asi que vamos a crear un gato nuevo, y a asignarle las propiedades que ya vimos arriba:

var Michi= new Gato("Michifu", "azul", 2);

Con esto hemos creado una instancia de nuestro objeto, un simpatico “Gato” que se llama Michifu, tiene dos años y es … azul. Azul? Lo importante es que el código funcione, no?

Si queremos comprobar alguna de las propiedades de nuestro objeto lo haríamos así: Variable_que_define_el_objeto (punto) propiedad_deseada. Asi que, por ejemplo, veamos el color del gato Michifu:

alert("El gato es de color "+Michi.color);

Lo que nos da el resultado: “El gato es de color azul”;

Métodos

Ahora, veamos los métodos del objeto. Como mencioné arriba, un metodo es una funcion dentro del objeto. Hay varios metodos para crear un método nuevo: Extendiendo el prototípo, creando una variable tipo funcion, o vinculando una funcion externa al objeto. Veamos todos los casos, y de paso creemos un par de “acciones” para nuestro gato. En los comportamientos basicos del gato, encontramos comer y descansar, asi que:

Método 1: Vinculación externa

Con este metodo declaramos que una de las propiedades, llamará a una funcion externa:

  [...]

  this.comer= comerExterna;

  [...]

  function comerExterna(){
	alert(”El gato “+this.nombre+” se comió un ratón”)
  }

  [...]

  Michi.comer();

  [ Salida = "El gato Michifu se comió un ratón" ]

Método 2: Extension del prototipo

Como los objetos estan compuestos por prototipos en JavaScript, nosotros podemos aumentarle metodos al prototipo del objeto directamente, de la siguiente manera:

[ No tocamos la funcion constructora ]

Gato.prototype.comer= function(){
 alert(”El gato “+this.nombre+” se comió un ratón”)
}

[...]

Michi.comer();

[ Salida = "El gato Michifu se comió un ratón" ]

Método 3: Definicion en la funcion constructora

Con este método, asignamos una propiedad como funcion dentro de la constructora:

[...]

this.comer= function(){
 alert(”El gato “+this.nombre+” se comió un ratón”);
};

[...]

Michi.comer();

[ Salida = "El gato Michifu se comió un ratón" ]

Nótese que en los tres métodos, es posible pasar parametros a la funcion de la manera normal en que cualquier funcion trabaja. Además, en cualquiera de los metodos, this se refiere al objeto (en este caso Gato)

Herencia

Uno de las caracteristicas más interesante de la OOP, es la herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototípos. Entonces, ya tenemos un Gato, verdad? Ahora, creemos una raza de gatos, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato:

var Gato= function(){
	this.ojos= 2;
	this.piernas= 4;
};
var Siames= function(){
	this.color= "blanco";
	this.color_ojos= "azul";
}
//Como vemos, ambos tienen propiedades distintas.
//Ahora, heredemos:
Siames.prototype= new Gato();
//Eso hace que se copie el prototipo de Gato y se añada al de Siames.

//Probemos a ver si es cierto
var Catboy= new Siames;
alert(Catboy.ojos);
//Retorna 2! ^_^
alert(Catboy.color);
//Retorna "blanco", asi que conserva sus propiedades

Métodos y propiedades privadas

En lo que hemos visto hasta ahora, los metodos y funciones eran totalmente publicos: Modificables y legibles desde cualquier parte. Echemos un vistazo a como “privatizar” variables:

var Gato= function(nombre){
	this.nombre= nombre;
	//Creamos una variable privada sin asignarle "this" a esta
	var frecuencia= "moderada";
	// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
	function irAlBano(frecuencia){
		alert("El gato va al baño con frecuencia "+frecuencia);
	};
	irAlBano(frecuencia);
}
var Michin= new Gato("Michifu");

El código anterior crea la variable privada “frecuencia”, y la funcion privada “irAlBano”. Para comprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelve undefined

Sin embargo, aun podemos usar esas variables o funciones tanto en la funcion constructora, como por funciones “getter” o “setter”… las cuales no tienen un atributo “get” o “set” definido, simplemente son funciones que nos permiten leer las propiedades:

var Gato= function(nombre){
	this.nombre= nombre;
	//Creamos una variable privada sin asignarle "this" a esta
	var frecuencia= "moderada";
	// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
	function irAlBano(frecuencia){
		alert("El gato va al baño con frecuencia "+frecuencia);
	};
	this.leerFrec= function(){
		irAlBano(frecuencia);
	};
}
var Michin= new Gato("Michifu");
Michin.leerFrec();

//Nos retorna "El gato va al baño con frecuencia moderada" 

Extension de objetos nativos mediante el prototípo

Como todos los objetos de JS tienen prototipo, nos podemos divertir añadiendo utilidades a nuestros objetos de siempre. Añadamole una funcion a Array, por ejemplo:

Array.prototype.coincidencias= function(palabra){
	coincidencias= 0;
	for(i=0; i< this.length; i++){
		if( this[i] == palabra ){
			coincidencias++;
		}
	}
	alert(”Se encontraron “+coincidencias+” coincidencia(s) de la palabra”);
};
// Podemos usar el array siguiente:
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Ramm”,”Fael”);
// O este
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Mx”,”Mx”);

//Y luego
clabbers.coincidencias(”Mx”);
//Entonces la funcion nos notificará cuantas veces esta una palabra en un array. Cool, no?

Conclusiones

Como vimos, entender la composición del prototipo de un objeto en JS puede ser terriblemente útil. Y entender como trabajar con clases en este lenguaje nos puede hacer más facil la vida: Reutilizar código, ganar velocidad en desarrollo, o dividir el trabajo entre varias personas se vuelve muy sencillo (como ocurre con la POO en general).

Adicionalmente a lo visto, si se quiere mayor similitud la POO clásica, se puede mandar un valor de retorno a cada funcion (como Void usamos True o False) y comprobar si los tipos de datos son correctos con condicionales.

Ahora, una implementacion de POO en JS combinada con jQuery u otra librería similar, puede resultar muy potente cuando de DOM se trata. A desarrollar

Es bastante gordo, y parece que me va a dar entretenimiento varios dias
Cuando tenga la cámara a la mano pongo las fotos de mi libro. Por ahora, un shot de la caratula de mi edicion

Como consecuencia: Me desconectaré un poco del inter-world por estos dias, pero mi Gtalk está prendido para hablar si se solicita. Tambien acepto los retos de CS que sean. Es posible que me demore un poco mas aprobando los comments… pero no se frenen de dejarlos por ello
Update: Si anduve por ahi rondando, sepan que tuve que terminar un jodido taller (trabajo, para los no-colombianos) de física… asi que no pude leer. Hoy empiezo oficialmente
Por cierto, el nuevo host ya sale en Google!