Borchani.COM – Blog

Como utilizar JSON con PHP
Si estamos utilizando PHP4 necesitaremos una clase que encargue de codificar/decodificar los datos en formato JSON. Para ello descargamos la clase JSON.php. Luego de ello la incluimos en nuestro archivo y la inicializamos llamando a Services_JSON para luego decodificar los datos con el método decode.

require_once(“JSON.php”);
$json = new Services_JSON;
$obj = $json->decode($data)

Ejemplo de uso
Para desarrollar nuestro ejemplo, obtendremos los datos de Google AJAX Search API, el cual es un servicio que nos utilizar los resultados de búsqueda de Google y devuelve los datos en JSON. Para ello si deseamos obtener los datos de la búsqueda de la palabra ‘Google’ podremos acceder a http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google, el cual devolverá los resultados en el siguiente formato:

{“responseData”:
{ “results”: [
  {
   "GsearchResultClass": "GwebSearch",
   "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
   "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
   "visibleUrl": "en.wikipedia.org",
   "cacheUrl": "http://www.google.com/search?...",
   "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
   "titleNoFormatting": "Paris Hilton",
   "content": "In 2006, she released her debut..."
  },
  {
   "GsearchResultClass": "GwebSearch",
   "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
   "url": "http://www.imdb.com/name/nm0385296/",
   "visibleUrl": "www.imdb.com",
   "cacheUrl": "http://www.google.com/search?...",
   "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
   "titleNoFormatting": "Paris Hilton",
   "content": "Self: Zoolander. Socialite..."
  },
  ...
 ],
 ”cursor”: {
  “pages”: [
   { "start": "0", "label": 1 },
   { "start": "4", "label": 2 },
   { "start": "8", "label": 3 },
   { "start": "12","label": 4 }
  ],
  “estimatedResultCount”: “59600000″,
  “currentPageIndex”: 0,
  “moreResultsUrl”: “http://www.google.com/search?…”
 }
}, 200, null)
}
Como pueden ver, toda la información esta estructurada como un objeto con lo cual es muy sencillo de acceder a todos los elementos como veremos a continuación.

Ahora el siguiente paso es obtener los datos de la ruta indicada y decodificarlas para posteriormente mostrarlas en nuestro HTML. Nótese que para hacer uso de este servicio es necesario tener un key, el cual es gratuito y lo pueden obtener en Sign-up for an AJAX Search API Key.

require_once(“JSON.php”);  
// read data
$aQue = “Google”;
$aKey = “TU_API_KEY”;
$aUrl = “http://ajax.googleapis.com/ajax/services/search/web“;
if (isset($_GET['q'])){
   $aQue = urlencode($_GET['q']);
}
$data = file_get_contents($aUrl.”?v=1.0&key=”.$aKey.”&q=”.$aQue);
// decode data
$json = new Services_JSON;
$obj = $json->decode($data);

Hasta este punto tenemos los datos en la variable $obj, luego en el cuerpo de nuestro html hacemos un recorrido por cada elemento de los resultados. Como se puede ver en el siguiente código se accede a los elementos como objetos de manera sencilla.

$results = $obj->responseData->results;
for ($i=0; $i<sizeof($results); $i++) {
    $tmp = $results[$i];
    $tmpHTML.= “<a href=\”".$tmp->url.”\”>”.$tmp->title.”</a>”;
    $tmpHTML.= “<br />”.$tmp->content.”<br/>”;
    $tmpHTML.= “<i>”.$tmp->url.”</i><br /><br />”;
}
echo $tmpHTML;

Podemos mejorar nuestro ejemplo si le agregamos una caja de texto para que ingrese su búsqueda y además de una hoja de estilos para que se vean mejor los resultados, con lo cual obtenemos /json/php.php.

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:

1.  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
2. Las primeras versiones de Javascript eran bastante débiles, ya que carecían de herencia, funciones internas….
3. 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.
4. 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.
5. 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:

1. Robustez.
2. Simplificación de código
3. Reutilización.
4. 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

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:

Tipo de elemento Modo de llamado
Etiqueta Nombre de la etiqueta. Ejemplos: “a”, “strong”, “div” 
Elemento con un Id  Id precedido por el signo “#”. Ejemplos: “#principal”,”#texto” 
Elemento con una clase (class) Clase precedida por un punto (.). Ejemplos: “.codigo”, “.titulo” 
Nota: Tambien funcionan muchos de los selectores de CSS como “>”, “*”, etc. Un ejemplo de su uso seria: $(“* > a”).click( function(){alert(“nada”);});
Los eventos que se pueden usar son los mismos que usariamos normalmente. 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=”#”>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:

Nombre del efecto Descripcion Descripcion de los parámetros
Show (Mostrar) Modifica los atributos alto, ancho y transparencia, partiendo de 0.

$(objeto).show(“velocidad”) Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).
Hide (Ocultar) Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales hasta llegar a 0.

$(objeto).hide(“velocidad”)
Slide Down (Aparecer hacia abajo) Modifica los atributos alto y transparencia, partiendo de 0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”.

$(objeto).slideDown(“velocidad”)
Slide Up (Aparecer hacia arriba) Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a 0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”.

$(objeto).slideUp(“velocidad”)
Fade In(Aparecer) Modifica el atributo transparencia desde 0.

$(objeto).fadeIn(“velocidad”)
Fade Out(Desaparecer) Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.

$(objeto).fadeOut(“velocidad”)
Center (Centrar) Centra un elemento con respecto a su “parent”.

$(objeto).center(“velocidad”);
Fade To(Cambiar transparencia) Modifica el atributo transparencia a un valor especifico.

$(objeto).fadeTo(“velocidad”, transparencia) Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).

Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento. 
Animate (Animar) Modifica un atributo especifico.

$(objeto).animate(“propiedades”,”velocidad”); Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow” (lento), “normal”, o “fast” (rápido).

Propiedades: Una o más propiedades con valor numérico en CSS, por ejemplo width y height. La llamada seria:
$(objeto).animate({width:20,height:200}, “slow”);

“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);Nota: La funcion debe colocarse sin los parentesis y sin comillas
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″);
});

fuente:cristalab