ES

www.codigo-facil.com > Mi framework en Javascript, los selectores

Mi framework en Javascript


Capitulo 3 : Los selectores

Capitulos

Mi framework en Javascript, introduccion

Primer capitulo de una serie donde veremos en que consiste y como desarrollar nuestro propio framework en javascript.

Mi framework en Javascript, la clase principal

En este capitulo definiremos la base de nuestro framework, crearemos una clase base a partir de la cual iremos incluyendo todas las funcionalidades del framework.

Mi framework en Javascript, los selectores

Los selectores son uno de los pilares fundamentales a partir del cual se desarrollan el resto de funcionalidades del framework. En el capitulo que nos ocupa veremos que son exactamente y como implementarlos.

Mi framework en Javascript, la funcion CSS

En este capitulo veremos como implementar una funcion, que nos permita cambiar el aspecto de cualquier elemento incluido en nuestra pagina html, a traves de la utilizacion de las propiedades CSS.

Mi framework en Javascript, efectos parte 1

En este capitulo vamos a incluir una funcionalidad a nuestro framework que nos permita aplicar efectos para poder mover o cambiar de tamaño cualquier elemento de nuestro documento HTML.

Mi framework en Javascript, efectos parte 2

En este articulo vamos a desarrollar una funcion para nuestro framework, que nos permita crear efectos de transicion entre 2 colores diferentes.

Mi framework en Javascript, transparencias

En este articulo veremos como modificar la propiedad alpha de cualquier elemento de nuestro documento HTML, para crear asi transparencias haciendo mas artactivo el diseño de nuestra pagina.

Que es un selector?


El concepto de selector tal y como lo vamos a implementar en el framework esta basadao en el utilizado en las hojas de estilo o CSS. Son utilizados para referenciar elemento(s) de nuestro documento HTML.

En CSS existen varias formas de aplicar un selector, a traves del id de un elemento, mediante su atributo class, o seleccionando varios elementos a traves del tag HTML que los representa. Tambien podremos realizar selectores un poco mas complejos como obtener elementos que esten dentro de un determinado conjunto, en funcion a una regla especifica, como sucede en CSS.

Por finalizar solo aclarar que no voy a llegar a implementar los selectores con todas las posibilidades, ni con la profundidad que tienen en CSS, para no complicarnos demasiado la vida. Aunque garantizo que el resultado final cubrira de sobra las principales necesidades que podamos tener.

Su implementacion


En el capitulo anterior, quedo pendiente la implementacion de la funcion "get()". Esta es una funcion puente que se encarga de ejecutar la busqueda dentro del documento en funcion de parametro que se pasa.

No debemos olvidar que este codigo habra que colocarlo en la clase base, implementada en el capitulo anterior, en la zona destinada a incluir nuevas funciones.
  1. /*
  2. Funcion "get", utilizada para invocar la busqueda a traves del selector
  3. */
  4. this.get = function (selector)
  5. {
  6.   /*
  7.   Primero analizo el parametro que se le pasa
  8.   para saber si es una cadena de texto
  9.   */
  10.   if (typeof selector==="string")
  11.   {
  12.     /*
  13.     creo el array que contendra los elementos
  14.     que coincidan con el selector
  15.     */
  16.     this.objs =new Array();
  17.     var filtro = selector.split(' ');

  18.     if (filtro.length===1)
  19.     {
  20.       /*invoco esta funcion para buscar dentro del DOM
  21.       del documento  HTML*/
  22.       this.searchDom(document.body , document,selector);
  23.     }
  24.     else
  25.     {
  26.       this.searchDom(document.body , filtro[0] , filtro[1]);
  27.     }
  28.   }

  29.   /*
  30.   devuelvo el objeto actual para poder seguir
  31.   trabajando con el si fuera necesario
  32.   */
  33.   return this;
  34. }
  35. /*
  36. fin funcion "get"
  37. */
Comentarios del codigo :


La funcion "get()" es un paso previo a la ejecucion de la verdadera funcion que busca en el DOM (document object model) de nuestro HTML.
   
Se encarga de analizar el parametro que le pasamos, y en segun los resultados ejecuta la funcion "searchDom".

El analisis del parametro determina alguna de las siguientes posibilidades :
  1. Compruebo que es una cadena de texto. En caso afirmativo, preparo una cache con los elementos que voy a obtener de la busqueda, y despues compruebo cuantas palabras hay en la cadena de texto. En funcion del numero de palabras (variable filtro) determino alguno de estos casos posibles :
    1. Si el filtro lo compone una palabra, quiere decir que voy a lanzar una busqueda sencilla.
    2. Si existen 2 palabras , esto quiere decir que la busqueda es mas compleja, ya que quiero buscar los elementos que pertenezcan a un filtro previamente realizado.  En esta caso la primera palabra determina el conjunto y la segunda los elementos a seleccionar de este conjunto.
Aun nos queda implementar la funcion que realmente realiza la busqueda, y es lo que vamos a ver a continuacion.

Implemantacion de la funcion "searchDom" y "addObjects"
  1. /*
  2. Funcion que añade los elementos que coincidan
  3. con el filtro a la cache de elementos
  4. */
  5. this.addObjects=function(values)
  6. {
  7.   var i=0;
  8.   for (i=0; i<values.length; i++)
  9.   {
  10.     this.objs[this.objs.length] = values[i];
  11.   }
  12. }

  13. /*
  14. Funcion que se encarga de buscar en el DOM
  15. del HTML para incorporar los elementos a la
  16. cache segun los filtros, solo comentar que es
  17. una funcion recursiva por lo tanto hasta que se
  18. llegue a la condicion de salida se seguira ejecutando
  19. */ 
  20. this.searchDom = function(context,parentDom,filter)
  21. {
  22. //variabes de apoyo para operaciones
  23. var objTmp = null;
  24. var strTmp = '';

  25. //context =  espacio donde se debe buscar
  26. if (context)
  27. {
  28.   /*
  29.   Caso mas simple ya que es una busqueda
  30.   sencilla, no se ha especificado un conjunto
  31.   previo de busqueda
  32.   */
  33.   if (parentDom && parentDom.getElementById )
  34.   {
  35.     /*
  36.     Paso a analizar el filtro para aplicar el metodo
  37.     de busqueda adecuado :
  38.     Si empieza por "." se quiere buscar por el atributo "class"
  39.    
  40.     Si empieza por "<" se quiere buscar por un
  41.     determinado tag HTML

  42.     En caso contrario si quiere obtener un elemento
  43.     por su atributo "id"
  44.     */
  45.     if(filter.charAt(0)=='.')
  46.     {
  47.     this.searchDom(document.body,null,filter);
  48.     }
  49.     else
  50.     if (filter.charAt(0)=='<')
  51.     {
  52.       strTmp = filter.substring(1,filter.length-1);
  53.       objTmp = parentDom.getElementsByTagName(strTmp);
  54.       this.addObjects(objTmp);
  55.     }
  56.     else
  57.     {
  58.       if (parentDom.getElementById(selector))
  59.         {
  60.         objTmp = parentDom.getElementById(selector);
  61.         this.objs[this.objs.length] = objTmp;
  62.         }
  63.     }
  64.   }
  65.   else
  66.   if (parentDom && parentDom.charAt(0)!='.' &&
  67.       parentDom.charAt(0)!='<')
  68.   {
  69.      /*
  70.     Si entra aqui es por que se ha definido un conjunto
  71.     pero es un caso sencillo ya que este conjunto se
  72.     corresponde a un elemento obtenido por si atributo "Id"
  73.     */
  74.     switch(filter.charAt(0))
  75.     {
  76.     /*
  77.     Analizo el filtro que utilizo, si estoy buscando por
  78.     tags HTML entonces me puedo beneficiar de la
  79.     funcion nativa "getElementsByTagName", en
  80.     caso contrario hago la llamada recursiva para
  81.     recorrer los elementos del conjunto solicitado
  82.     */
  83.       case '<':   
  84.         strTmp = filter.substring (1, filter.length-1 );
  85.         objTmp = document.getElementById(parentDom);                       
  86.         objTmp = objTmp.getElementsByTagName( strTmp );                       
  87.         this.addObjects(objTmp);
  88.       break
  89.       default :
  90.         objTmp = document.getElementById(parentDom);
  91.         this.searchDom(objTmp,null,filter);
  92.     }
  93.    
  94.   }
  95.   else
  96.   {
  97.     /*
  98.     Si entra aqui es porque no se puede aplicar ninguna de las
  99.     soluciones anteriores, por lo tanto empiezo a recorrer
  100.     los elementos que se encuentran dentro del context
  101.     para ir extrayendo los valores que correspondan con los
  102.     filtros, no olvidar que existe una regla de conjunto a
  103.     comprobar, asi que en caso que el elemento coincida
  104.     con el conjunto especificado se volvera a lanzar la busqueda
  105.     para extraer coincidencias
  106.     */
  107.     var i=0;
  108.     for (i=0;i<context.childNodes.length;i++)
  109.     {
  110.       if (parentDom &&
  111.       context.childNodes[i]['className'] ==
  112.       parentDom.substring (1, parentDom.length ) )
  113.       {
  114.         switch(filter.charAt(0))
  115.         {
  116.           case '<':
  117.             strTmp = filter.substring (1, filter.length-1 );
  118.             objTmp = context.childNodes[i];
  119.             objTmp = objTmp.getElementsByTagName( strTmp );
  120.             this.addObjects(objTmp);
  121.           break
  122.           default :
  123.             objTmp = context.childNodes[i];   
  124.             this.searchDom(objTmp,null,filter);
  125.         } 
  126.        
  127.       }
  128.       else
  129.       if (parentDom &&
  130.       context.childNodes[i]['nodeName'] ==
  131.       parentDom.substring(1, parentDom.length-1 ).toUpperCase() )
  132.       {
  133.         switch(filter.charAt(0))
  134.         {
  135.         case '<':
  136.           strTmp = filter.substring (1, filter.length-1 );
  137.           objTmp = context.childNodes[i];
  138.           objTmp = objTmp.getElementsByTagName( strtmp );
  139.           this.addObjects(objTmp); 
  140.         break   
  141.        default :
  142.          objTmp = context.childNodes[i];   
  143.          this.searchDom(objTmp,null,filter);           
  144.         }
  145.       }
  146.       else
  147.       if (!parentDom )
  148.       {
  149.         /*
  150.         Si eentra aqui es porque no hay definido ninguna regla de
  151.         para determinar un conjunto, por lo tanto compruebo si
  152.         el elemento se corresponde a la regla del filtro para
  153.         añadirlo o no
  154.         */
  155.         switch(filter.charAt(0))
  156.         {
  157.         case '.':
  158.           strTmp = filter.substring (1 ,filter.length );
  159.           if ( context.childNodes[i]['className'] == strTmp)
  160.           {
  161.           this.objs[this.objs.length] = context.childNodes[i];
  162.           }
  163.           this.searchDom(context.childNodes[i],parentDom,filter);
  164.         break
  165.         default:
  166.           if(context.childNodes[i]['id']==filter)
  167.             this.objs[this.objs.length] = context.childNodes[i];
  168.           this.searchDom(context.childNodes[i],parentDom,filter);
  169.         }
  170.       }
  171.       else
  172.       if (context.childNodes[i]['nodeType']==1)
  173.       {
  174.         /*
  175.         Existe un conjunto a buscar pero el elemento
  176.         comparado no coincide con la regla y ademas
  177.         es un elemento HTML,  podria ser que los
  178.         elementos que hay dentro si, por lo tanto lanzo
  179.         busqueda recursiva dentro de este elemento
  180.         para buscar coincidencias
  181.         */
  182.         this.searchDom(context.childNodes[i],parentDom,filter);
  183.       }
  184.     }
  185.   }
  186. }
  187. }
Analisis de la funcion "searchDom":

Es posible que el codigo resultante cueste un poco de digerir a primera vista, asi que voy a comentar los aspectos fundamentales en los que me he basado para su implementacion.

Su finalidad :

El objetivo es recorrer los elementos que componen nuestro documento (DOM) comprobando cuales coinciden con el criterio de busqueda especificado, para incluirlos en la cache del objeto principal.

Destacar que como el DOM (document object model) de nuesto HTML esta estructurado en forma de arbol, es decir que un elemento puede incluir otros elementos hijos y asi sucesivamente, esta es una funcion recursiva, para poder recorrer todos los elementos y realizar las correspondientes comprobaciones.

Los parametros :

Admite 3 parametros :
  • "context", es el elemento a partir del cual se hace un recorrido a traves de los elementos que estan bajo su dominio.
  • "parentDom", es un parametro que se utiliza para especificar un rango de busqueda, donde todos los elementos que busquemos deben pertencer a este rango, en caso de ser especificado. Si no hay ningun conjunto especificado por defecto toma como valor el objeto document. En caso de que queramos efectuar una busqueda avanzada y especificar un rango de busqueda basta con dejar un espacio en blanco entre las 2 opciones.

    Ejemplo:

    1. <script>
    2. /*
    3. Quiero buscar todos los elementos <b> que pertenezcan
    4. al contenedor <div> y cambiarles el color de la fuente.
    5. */
    6. $("<div> <b>").css("color:#ff00ff");
    7. </script>
  • "filter", es la cadena de texto que permite especificar una condicion de busqueda. Tenemos 3 opciones a la hora de construir este filtro.
    • ".class", quiero buscar todos los elementos a traves del atributo class.
    • "<tag>", quiero obtener todos aquellos elementos que se correspondan con el tag HTML especificado.
    • "id", quiero buscar un elemento a traves de su atributo id
Conclusion :

E
sta es la funcion que se encarga de obtener los elementos a traves de un selector, realmente nosotros nunca la vamos a invocar, sera la funcion "get" quien se encargue de esta tarea, por lo que no debe de preocuparnos sin en un principio no hemos entendido del todo su funcionamiento.

Con todo lo que hemos visto en el capitulo de hoy ya tenemos el codigo necesario para poder vincular el framework a nuestro proyecto sin que de error, solo debemos copiar el codigo correspondiente a las funciones "addObjects", "searchDom", "get" y pegarlo en la clase que habiamos creado en el capitulo anterior.

En el siguiente capitulo empezaremos a ver los primeros resultados de como trabaja el framework, ya que implementaremos la primera funcion para poder interactuar con elementos obtenidos a traves del selector y cambiaremos sus atributos CSS.

Gracias tod@s por vuestro apoyo y nos vemos en futuras publicaciones.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
0