Explorando la Categoría: "Javascript"
Ordenar tablas con javascript de forma sencilla : Tablesorter
Anotaciones, Javascript
24 de Mayo del 2008
Leyendo weintenta me encuentro con este fantástico plugin de jquery para ordenar tablas de forma automática con javascript. Su uso es muy sencillo, más información en webintenta y un ejemplo de su uso aquí
Wordpress 2.6 incluye Google Gears para trabajar offline
BBDD, Javascript, Joomla, Wordpress
16 de Mayo del 2008
Leyendo anieto2k me entero que en la versión 2.6 de Wordpress se incluirá la tecnología Google Gears para trabajar offline, de esta manera se podrá seguir ecribiendo artículos aunque estemos en el campo sin conexión a internet, y después, en cuanto el navegador detecte una conexión, se sincronizará con la web y publicará todo el contenido escrito, un gran acierto
Cada vez se hace más potente la programación web y las posibilidades se hacen infinitas.
Google Gears es una implementación de Google para almacenar datos en el cliente y aún no esta muy extendido su uso, pero en el futuro standard HTML 5 esta prevista la inclusión de una BBDD en el navegador para facilitar la labor al programador y hacer las aplicaciones más dinamicas.
Ahora la pregunta para mí es: ¿Para cuando una cosa así en Joomla? , espero que no tarde mucho en desarrollarse.
Firebug es una de las extensiones que hacen de firefox el mejor navegador web para mi gusto.
Con firebug podremos inspeccionar todo el código de una página web, incluso si modificamos el DOM dinámicamente, Firebug lo mostrará.
Permite ir modificando el código CSS de la web e ir viendo los cambios en tiempo real sin necesidad de refrescar la página.
También permite modificar el código javascript e incluye un debuger de javascript.
Lleva un control de todas las peticiones http que se producen y muestra absolutamente todos los detalles y contenido de la petición, muy útil para ver que esta devolviendo una petición AJAX.
Lo uso desde aproximadamente 8 meses y ya no puedo desarrollar sin él.
Recientemente Microsoft a copiado la idea para su nuevo navegador , el Internet Explorer 8, y aunque de rabia que copien un software no comercial y libre, la verdad es que se agradece tener esta utilidad en Internet Explorer, ya que se me hacía un mundo depurar mis proyectos en este navegador.
En Css-Tricks han puesto la primera parte de un screencast sobre esta extensión, aunque esta en ingles se ve muy bien las posibilidades de Firebug.
Solo he hablado de unas pocas de todas las funcionalidades que tiene Firebug, lo mejor es instalarlo y probarlo.
Después de un largo tiempo sin escribir por motivos de trabajo, vuelvo al blog. Hoy voy a anotar un truco con jQuery que puede ahorrarnos mucho código: la función toogle.
La función toogle actúa como un interruptor, de manera que acepta dos parámetros, que serán dos funciones, una para cuando actives el interruptor y otra para cuando lo desactives.
Vamos a ver un ejemplo en el cual añadiremos una clase css a un div pulsando en un botón, de manera que cuando pinchemos en el botón , el div pasará a tener un color de fondo rojo y cuando volvamos a pulsar, el color de fondo desaparecerá.
Vamos a ver el ejemplo:
Primero creamos la clase css:
-
-
.rojo{
-
background:red;
-
width:200px;
-
height:300px;
-
}
-
Después introducimos el siguiente código javascript en en el head de nuestro documento html:
-
-
<script type="text/javascript">
-
-
$(document).ready(function() {
-
$(‘#conmutador’).toggle(function() {
-
$(‘#contenedor’).addClass(‘rojo’);
-
}, function() {
-
$(‘#contenedor’).removeClass(‘rojo’);
-
});
-
});
-
</script>
-
Usamos los selectores de jQuery para obtener el objeto con id conmutador y le aplicacamos la función toogle.
Y este es el código html que va dentro del body:
-
-
<h1>Pruebas de jQuery</h1>
-
-
<button id="conmutador">Conmutador</button>
-
<div id="contenedor"></div>
-
Ya tenemos nuestro interruptor en javascript con unas pocas líneas de código.
Cuando queremos programar en javascript más alla de escribir unas cuantas lineas, es conveniente usar un framework de desarrollo por varios motivos:
- Cantidad de funciones escritas que nos ahorrarán mucho trabajo.
- Podremos escribir menos código y más compacto.
- Código más legible y mantenible.
- El código generado es crossbrowser, funcionará igual en todos los navegadores.
- Compatible con CSS 3
- Seguro que hay muchas más…
Existen muchos frameworks a la hora de trabajar con javascript. Uno de los más famosos es prototype, quizás por que es el más antiguo.
Javascript se ha convertido en un lenguaje muy importante en Internet, ha dejado verse como un lenguaje con el cual hacer alguna animación y poco más , para convertirse en uno de los pilares de la web 2.0.
Por todo esto me estoy poniendo al día en una librería que a mi me ha gustado mucho: jQuery.
Me gusta por la sencillez con la que puedes empezar a programar y la cantidad de código que ahorras al usarla, además de ser muy lijera.
También me gusta mucho Dojo , un framework muy interesante también y que incluye soporte para persistencia de datos en el lado del cliente, usando para ello Google Gears u otras tecnologías, pero de las que te abstrae y unicamente tendremos que aprender a usar los objetos de Dojo. Parece muy interesante y con seguridad le daré una revisión en un futuro.
Pero vamos a ver que nos ofrece JQuery. Lo primero que vamos a ver es el evento ready, el cual podremos empezar a ejecutar código javascript una vez cargado el DOM.
Si no usaramos esta función y usaramos el clasico evento “onload”, y tubieramos 100 imágenes en la página, tendriamos que esperar a que se bajaran estas 100 imágenes para que el código se empezara a ejecutar. En cambio el evento ready permite que el código javascript se empiece a ejecutar cuando el objeto DOM de la página este cargado, antes de que se bajen las imágenes.
Vamos a ver un ejemplo:
-
$(document).ready(function() {
-
$(‘.rojoNegrita’).addClass(‘grandeAzul’);
-
});
-
$( ) se utiliza para seleccionar partes del documento HTML. Normalmente recibe como parámetro un string que puede contenet cualquier selector de CSS.
Con la funcion .addClass() se puede añadir la case pasada como parámetro del objeto DOM.
Asociamos una función al evento $(document).ready mediante el cual no tendremos que esperar a que se carguen las imágenes , videos, etc.. en la página, y se ejecutará cuando el DOM del documento HTML este listo.
SELECTORES EN JQUERY
- ETIQUETA: $(’p') devuelve todos los párrafos de la página.
- ID: $(’#cabecera’) devuelve el elemento de la página que con id cabecera.
- CLASE: $(’.negrita-rojo’) devuelve todos los elementos de la página que contengan la clase negrita-rojo.
jQuery soporta un conjunto básico de los selectors XPath. Por ejemplo :
Para seleccionar todos los párrafos de la página que implementen alguna clase escribiríamos :
-
$(‘p[@class]’)
-
Para obtener todos los divs que contengan algun párrafo dentro, escribiríamos:
-
$(‘div[p]’)
-
Se pude utilizar lo operadores ^= , $= y *=.
- ^= : para obtener los elementos de una página HTML que contengan un atibuto que empieze por un valor determinado.
- $= : que acabe por un valor determinado.
- *= : que contenga un valor determinado.
Por ejemplo :
-
$(document).ready(function() {
-
$(‘a[@href^="mailto:"]’).addClass(‘mailto’);
-
$(‘a[@href$=".pdf"]’).addClass(‘enlacePdf’);
-
$(‘a[@href*= “sitio.com"]’).addClass(‘sitio’);
-
});
-
Estas clases css deben estar previamente definidas en la página, por ejemplo:
-
.mailto { color: red; }
-
.enlacePdf { color:green; }
-
.sitio { color: yellow; }
-
De esta forma, los enlaces de tipo malito apareceran en rojo, los enlaces a ficheros pdf verdes y los enlaces a “sitio.com” apareceran en amarillo.
SELECTORES PERSONALIZADOS
Además, jQuery nos provee de selectores personalizados. La sintaxis de estos selectores de jQuery es la misma que la de las pseudoclases de CSS.
Mediante :eq(2) podemos obtener el tercer elemento de la lista devuelta. Se obtiene el tercero ya que las listas devueltas por jQuery son “zero-based”, es decir, empiezan contar desde 0, por lo tanto el 2 es el tercer elemento de la lista.
-
enlace = $(‘a.enlacePdf:eq(2)’)
-
En este caso la variable enlace almacena una referencia al tercer enlace que implementa la clase “enlacePdf”.
DAR ESTILO A LAS ELEMENTOS ALTERNOS
Hay ocasiones en que queremos dar estilo a una tabla para que cada fila salga con un color de fondo diferente, segun sea par o impar, para así conseguir una mayor legibilidad.
Para conseguir este efecto jQuery nos provee de dos selectores propios ( o personalizados ) ; “:odd” y “:even”.
-
.impar {
-
background-color: #D6D3CE;
-
}
-
.par {
-
background-color: #FFFFFF;
-
}
-
Después, mediante los selectors :odd y :even , aplicamos los estilos a cada elemento tr de la página.
-
$(document).ready(function() {
-
$(‘tr:odd’).addClass(‘impar’);
-
$(‘tr:even’).addClass(‘par’);
-
});
-
Por último, el selector personalizado “:contains” seleccionara los elementos que contengan el string pasado como parámetro al selector.
-
var parrafos = $(‘p:contains("Hola")’) ;
-
La variable párrafos contendrá una lista de elementos que contengan el string “Hola”. Después podriamos aplicarles un estilo a estos parrafos :
-
parrafos.addClass(’subrayado’);
-
De esta forma aplicamos la clase subrayado a todos los párrafos que contengan la palabra “Hola”.
