Archivo etiqueta JavaScript
Estadísticas en JavaScript
Por Scipion - JavaScript, Web - 5 Junio 2010
Ya que hace tiempo que no escribo nada, voy a mostra una extensión de jQuery que hace maravillas con gráficas para representar los datos indicados. La biblioteca es bastante útil para los que necesiten mostrar estadísticas en una web.
Aunque hace tiempo que existe, Highchars me ha sorprendido por la gran versatilidad que tiene. Gráficas de barras, de rectas, acumulados etc y varias posibilidades de diseño para cada tipo.
Usarla es igual de fácil que cualquier extensión de jQuery con la única diferencia que hay que indicar los datos a representar:
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-1',
defaultSeriesType: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
En la variable series es donde se encuentran los datos indicados, ahí cada campo data es un vector con toda la información a representar. Pero de todas formas ellos explican bien como se debe de usar la biblioteca. Si tienes ya experiencia con jQuery no te resultará dificil para nada. La biblioteca completa la podeis descargar aquí de la página oficial.
Algunos gráficos vinenen preparados para introducir movimiento en la representación, los llaman dinamic chars. Vienen al pelo para trabajar con ajax y descargar datos de la web periodicamente sin necesidad de recargar la página.
Así que parece que se lo han montado bastante bien los chicos de HighChars.
Closures en JavaScript. Patrón Modulo
Por Scipion - Ingenieria del software, JavaScript - 19 Marzo 2010
Si hace un tiemplo comentaba que en JavaScript el patrón singleton es implícito, voy a revisar otro patrón que sirve para modularizar nuestro código. Las clausuras de JavaScript o Closure es algo que tiene que conocer cualquiera que se dedique en profundidad a este lenguaje.
Closures
Una closure es en definitiva un objeto que es definido e instanciado en el momento de su declaración. Así hay que tener en cuenta que esta metodología cumple el patron modulo, al declarar el módulo, y el singleton, ya que no permite reinstanciaciones del mismo objeto porque se declara y se ejecuta.
var clos = (function(){
var vprivada=999; // solo accesible desde esta closure
function fprivada(param){
vprivada=param;
}
var prop={};
prop.funcion=function(){
document.write("123456789");
}
prop.variable=119;
return prop;
}());
Como la función es ejecutada al mismo tiempo que es declarada es necesario devolver el objeto que se genera dentro de ella. Si no asignamos la función a nada la closure es anónima, pero no deja de ejecutarse por ello.
Aumentar la closure
Para ampliar las propiedades de nuestro objeto podemos escribir otra closure y asignársela, el problema es que si lo hacemos sin más perdemos las propiedades anteriores, por eso debemos pasarle por parámetro todo el código anterior, es decir, la misma closure.
var clos=(function(prop2){
prop2.funcion2=function(){
document.write("999888777");
}
prop2.variable2=219;
return prop2;
}(clos));
En caso de que no exista podemos crear una nueva closure al vuelo para evitar los errores de ejecución.
var clos=(function(prop){
...
return prop;
}( clos|| {} ));
De esta manera podemos distribuir nuestro código entre distintos archivos en caso de que fuese necesario. En una página donde tengamos implementadas pocas funcionalidades esto no es necesario, pero cuando va creciendo la cantidad de cosas que queremos hacer con JavaScript, modularizar el código de esta manera resulta bastante útil.
También es importante saber que podemos extender nuestra closure con otras para hacerla más rica. Así incorporando librerías de terceros (como jQuery) podemos personalizar el producto a nuestras necesidades. Esto podria considerarse un tipo de herencia implicita, para ver la herencia explicita aquí.
Ya he visto que en ciertos perfiles laborales se indica explícitamente el conocimiento de closures. Cuando estamos programando en paralelo con un compañero de trabajo y se dividen las funcionalidades a programar, debe de hacerse con aumentos de closures, que hace fácil unificar el código y también puede permitir acotar a la hora de buscar fallos.
Patrón Singleton implícito en JavaScript
Por Scipion - Ingenieria del software, JavaScript - 6 Marzo 2010
Uno de los tantos patrones arquitectónicos en ingeniería del software es el llamado Singleton. No voy a explicar el patrón singleton por completo, simplemente decír que como idea principal se define una clase de la que solo existirá una instancia.
Por lo tanto en una clase qu cumpla con el singleton se define el método getInstancia() que solo se ocupa de devolver la única instancia existente. Así que el constructor no se ejecuta siempre, solamente invoca cuando no existe ninguna instancia. Cuando si la hay se devuelve la referencia a ella. Así de sencillo.
Y esto se implementa así en cualquier lenguaje orientado a objetos. De hecho incluso en JavaScript se puede implementar una clase con estas caracteristicas, el unico problema es que en JavaScript no hay métodos privados y siempre podría hacer un new miClase() y me devolveria una instancia nueva.
Pues bien, hay una caracteristica en JavaScript que me hace pensar que esto se puede hacer sin ningun problema, solo por las caracteristicas del propio lenguaje, ya que una funcion es una funcion y una variable también puede serlo etc. y jugando con esto podemos definir una clase que compla el partrón implicitamente y otra que no.
Definir el objeto
Objeto que no cumple el patrón singleton:
function objetoNoSingleton(){
this.cadena = "cadena de texto";
this.metodo = function(){
alert(cadena);
}
}
Objeto que cumple el patrón singleton:
var objetoSingleton = {
cadena : "cadena de texto",
metodo : function() {
alert(cadena);
}
}
Este objeto singleton es una variable y un objeto, pero es un objeto de clase irreproducible, de hecho al ejecutar new objetoSingleton() la instrucción falla.
Añadiendo funcionalidades
Existen diferencias de sintaxis debido al lenguaje. De hecho si queremos utilizar la propiedad prototype (no la libreria) para añadir métodos o variables a los objetos también existen diferencias.
Objeto que no cumple el patrón singleton:
objetoNoSingleton.prototype.valor2 = "valor dos";
objetoNoSingleton.prototype.metodo2 = function(){
alert(valor2);
}
Para ser ejecutado necesitamos una instancia ya que estamos añadiendo funcionalidades a una clase no a un objeto en particular:
var instanciaNoSingleton = new objetoNoSingleton(); instanciaNoSingleton.metodo2();
Objeto que cumple el patrón singleton no hay que usar prototype. Crear un nuevo elemento en el objeto es simplemente nombrarlo y asignarle valor porque ya es una instancia.
objetoSingleton.valor2 = "valor dos";
objetoSingleton.metodo2 = function(){
alert(valor2);
}
objetoSingleton.metodo2();
Con un objeto único se elimina el método getInstancia() típico del patrón Singleton, pero en si también desaparece la función new, por lo que en realidad el objeto a usar va a ser siempre la misma instancia.
Validar formularios en JavaScript
Por Scipion - Aplicacion web, JavaScript - 19 Febrero 2010
En toda aplicación web de hoy en día no pasa sin que el usuario meta la pata, aunque sea de forma premeditada, por eso los fromularios hay que comprobar que no nos la cuelan. Validar los datos hay algo que siempre hay que hacer en el lado del servidor, pero le podemos dar agilidad a la web si antes de mandar el formulario lo verificamos en el lado del cliente.
Esto para nada es un problema nuevo, y ya se ha intentado solucionar de muchas maneras en JavaScript. Algunas de las librerias(bibliotecas) son especificas para validación, otras son usos especificos de otras más genericas. En cualquier caso si quieres ponerte a escribir tus funciones JS que validen los formularios que sepas que estas Reinventando la Rueda, porque ya se ha hecho unas cuantas veces:
Ketchup basado en JQuery:
http://demos.usejquery.com/ketchup-plugin/
Vanadium:
JQuery:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ (demo)
Validation con Prototype:
http://tetlaw.id.au/view/javascript/really-easy-field-validation (demo)
MooTools:
http://mootools.floor.ch/en/demos/formcheck/ (demo)
JsVal:
http://jsval.fantastic-bits.de/
Validanguage:
http://www.drlongghost.com/validanguage.php (demo)
Django (basado en Google App Engine):
http://code.google.com/appengine/articles/djangoforms.html
LiveValidation:
http://livevalidation.com/ (demo/ejemplos)
wForms:
http://www.formassembly.com/wForms/ (demo)
Yav (última versión del 2008):
JSValidate/JValidate:
http://www.jsvalidate.com/ , http://www.jvalidate.com/
fValidator:
http://zendold.lojcomm.com.br/fvalidator/
qForms (últmia versión del 2007):
http://www.pengoworks.com/index.cfm?action=get:qforms
Validatious:
Si te quieres montar tu propia libreria puedes empezar con los ejemplos propuestos en w3schools.
Libreria de validacion abandonada en 2004 chrysalis.
A parte de la validación el elemento visual es también algo que deja que desear bastante en los formularios. CustomFormElements da un aspecto agradable a los formularios web, incluso se pueden parecer a aplicaciones de escritorio. Está disponible para usar con Mootools y JQuery.
CoffeeScript enriquece y optimizar JavaScript
Por Scipion - JavaScript, Lenguajes de Script - 10 Febrero 2010
Leo en GitHub que CoffeScript es un proyecto para JavaScrit que realiza la misma tarea que SASS en CSS (¿cueces o enriqueces?).
CoffeeScript ofrece una sintaxis concisa inspirado por Ruby y Python, listas por comprensión, los operadores existencial para eliminar los controles typeof molestos, y un modelo de herencia fiable para arrancar. ☕CoffeeScript
Algunos proyectos ya están apareciendo, como en rack de café e incluso una reescritura de underscore.js, Se puede comarar la version en JS pura (0.5.8) con la reescrita en Coffee (0.5.7), aunque no son la misma versión, entre versiones no cambian muchas cosas, y se puede ver que se clarifica el código y se ahorran unas cuantas lineas.
En su web comentan que CoffeeScript tiene los mismos “genes” que JS pero distinto estilo (XD). Aun está creciendo pero tiene buena pinta el lenguaje.
Estos lenguajes orientados a programadores muy especificos parece que sean una locura, pero para aplicaciones web con mucho uso JS pueden ser útiles (y con programadores que conozcan ruby o pyton aun más). Se puede decir que son lenguajes en el final del long tail, muchos frameworks también empezaron siendo para unos pocos.
Programando en javascript en el navegador
Por Scipion - Aplicacion web, JavaScript, Navegadores, SEO - 29 Enero 2010
He probando por recomendación de ThinkWasabi una herramientilla bastante util que se llama Quix. Tiene muchisimas funcionalidades y funcina a base de comandos, por eso es interesante mirarse la ayuda que tiene para ejecutarlos. Tiene cosas utiles para SEO y reducción de URLs, en fin lo que le pedirias a un monton de addons pero solo en uno y bueno … por comandos, al que no le guste nada, pero está bastante bien.
Quix
Va directamente desde el navegador, lo arrastas y lo pegas y te sale una pantallita donde escribes el comando.
Pero lo que arrastras es en realidad un método en JavaScript que se va a ejecutar cada vez que pinches en el enlace que arrastras a la barra de marcadores (en firefox, como se llama en los otros navegadores).
En la barra de estado cuando estas encima del enlace se ve claramente que es codigo JavaScritp que va a invocar a la función ‘Quix()’ y empieza la declaración de la función. Por curiosidad me he CopiadoYPegado el codigillo para verlo.
El texto debidamente tabulado quedaria algo así:
javascript:Quix();
function%20Quix(){
var%20e=encodeURIComponent;
var%20t=window.getSelection?window.getSelection():(
document.getSelection?document.getSelection():(
document.selection?document.selection.createRange().text:''
)
);
var%20c=window.prompt('Quix:%20Type%20`help`%20for%20a%20list%20of%20commands:');
if(t!=''){
if(c){
c+='%20'+t;
}
else{
c=''+t;
}
}
if(c){
var%20u='http://quixapp.com/go/?c='+e(c)+'&t='
+(document.title?e(document.title):'')+'&s='+'&v=080'+'&u='
+(document.location?e(document.location):'');
d=''+document.location;
if(d.substr(0,4)!='http'){
window.location=u+'&mode=direct';
}
else{
heads=document.getElementsByTagName('head');
if(c.substring(0,1)=='%20'){
var%20w=window.open(u+'&mode=direct');
w.focus();
}
else%20if(heads.length==0){
window.location=u+'&mode=direct';
}
else{
q=document.getElementById('quix');
if(q){
q.parentNode.removeChild(q);
}
sc=document.createElement('script');
sc.src=u;
sc.id='quix';
sc.type='text/javascript';
void(heads[0].appendChild(sc));
}
}
}
}
La funcioncilla tiene su tela, pero lo unico que cambia respecto al javascript normal es que los espacios se cambian por %20 para que el navegador no se haga un lio. Pero a parte de esto te puedes escribir tus funciones todo lo largas que quieras e incrustarlas en el navegador tal cual.
Al fin y al cabo el navegador interpreta/ejecuta un mazo de elementos en html, css y javascript por no contar los aplets de java, los objetos flash y ahora los silverlight/moonlight que se le envia desde el servidor. Que le importa hacerlo tambien en local.
La mayoria de los add-ons de firefox se hacen de forma similar, al final siempre se llama a la maquina virtual de JS para que haga algo, ya sea conectar por ajax con algun servidor que da el servicio o con alguna clase Java compilada que te ha instalado la extensión.