JSDoc: documentar javascript

ByLuis

JSDoc es una aplicación realizada en Perl que nos genera la documentación de nuestros scripts Javascript de forma automática. Basado en el conocido javadoc, obtiene los comentarios de documentación (/** … */) para obtener la información sobre las funciones.

Así, por ejemplo, si tenemos la siguiente función:

/**
* Figura es una clase abstracta. Define
* lo que otras subclases heredarán de una
* figura geométrica genérica
* @constructor
*/
function Figura(color){
this.color = color;
}

obtendremos lo siguiente:

Constructor Summary
Shape ()
Construct a new Shape object.

JSDoc

Vía / Blogging Dashin

TrimQuery: usa SQL en Javascript

ByLuis

TrimQuery es un script que permite usar sentencias SQL para obtener datos contenidos en un objeto JSON.

Entre las características que permite, nos encontramos con:

  • Codificado en Javascript estándar.
  • Admite SELECT … FROM.
  • Cláusulas WHERE.
  • Ordenación (ORDER BY) de varias columnas de forma ascendente (ASC) y descendente (DESC).
  • Alias (AS).
  • Agrupaciones (GROUP BY y HAVING).
  • Funciones: SUM, COUNT y AVG.
  • Joins
  • LIMIT y offsets.
  • Parametrización.
  • Es ligero (más o menos), ya que ocupa menos de 700 líneas.

Si por ejemplo disponemos del siguiente objeto:

Invoice  : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]

Podemos obtener datos con la siguiente consulta:

SELECT Customer.id, Customer.acctBalance, Invoice.total
FROM Customer, Invoice
WHERE Customer.id = Invoice.custId
ORDER BY Customer.id

Es sensible a mayúsculas y minúsculas, ya que diferencia entre FROM y from.

Demo

TrimQuery

Vía / dzone

XRegExp: ampliación de expresiones regulares en Javascript

ByLuis

XRegExp es una ampliación de Javascript para las expresiones regulares, las cuales en Javascript flaquean a la hora de los modificadores.
En este caso, añade los modificadores s y x, lo cual amplía el uso que podemos darle a las expresiones regulares. El modificador s permite que el punto “.”, que representa a cualquier carácter, represente también al salto de línea, el cual suele ignorar. El modificar x ignora los espacios en la expresión regular, y así poder crear unas expresiones regulares más legibles.
XRegExp
Vía / dzone

Controlar el número de teclas de un textarea

ByLuis

Algo que hay que tener en cuenta muchas veces cuando trabajamos con formularios es la longitud del texto que introducimos en los textarea, ya que en muchos casos esa información se almacena en la BD y puede que el campo en dónde se guarda tenga un límite de tamaño.

textarea.png

No tengo muy claro según lo que dicta la accesibilidad y la usabilidad, si el ejemplo que muestro es del todo correcto. Lo normal es que si se supera la longitud de texto máximo, no deje introducir ningún carácter más. Pero en este caso simplemente vamos a avisar mediante una barra de progreso cuánto texto hemos introducido y cuánto nos queda. ¿Por qué? pues porque personalmente me ha pasado que muchas veces, al escribir mirando el teclado, ni me fijo en lo que pasa en la pantalla, por lo que me he podido pasar pulsando teclas un buen rato y no fijarme en que no se escribía nada. O también, cuando se hace un copy/paste, el texto puede ser mayor que lo permitido. En ambos casos es mejor tener el texto completo e ir reduciéndolo.

Como creo que quizás pueda serle útil a alguien este ejemplo, el desarrollo va a ser muy sencillo, ya que algunas veces los comentarios que recibimos de scripts antiguos son de gente con poco conocimiento. Luego, quien quiera usar JSON o Ajax (no sé para qué) o lo que quiera, que lo haga.

El procedimiento es sencillo, disponemos de un textarea, con un ancho definido mediante estilos. También existe una capa del mismo ancho que el textarea, y que se situará debajo del textarea. En el textarea se capturará el evento onkeyup, para que cuando se pulse una tecla, podamos ver la longitud del texto y modificar la barra de progreso.

<textarea onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso">(0 / 250)</div>
textarea {
width: 300px;
height: 200px;
}
#progreso {
background: url(textarea.png) no-repeat;
background-position: -300px 0px;
width: 300px;
height: 14px;
text-align: center;
color: #000000;
font-size: 8pt;
font-family: Arial;
text-transform: uppercase;
}

La barra de progreso funciona de la siguiente manera, el fondo es una imagen con el progreso, inicialmente estará desplazada a la izquierda el tamaño de la barra. Por ejemplo, si la barra tiene un ancho de 300px, la posición izquierda del fondo será -300px. Cuando se pulse una tecla, se recalculará la posición izquierda, según la longitud del texto. Si la longitud supera el máximo, el fondo no será la imagen, sino de color rojo para avisar del error.

var max=250;
var ancho=300;
function progreso_tecla(obj) {
var progreso = document.getElementById("progreso");
if (obj.value.length < max) {
progreso.style.backgroundColor = "#FFFFFF";
progreso.style.backgroundImage = "url(textarea.png)";
progreso.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(obj.value.length))/250);
progreso.style.backgroundPosition = "-"+pos+"px 0px";
} else {
progreso.style.backgroundColor = "#CC0000";
progreso.style.backgroundImage = "url()";
progreso.style.color = "#FFFFFF";
}
progreso.innerHTML = "("+obj.value.length+" / "+max+")";
}

Ejemplo

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone

|

Novedades en Javascript 1.8

ByLuis

Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.

Notación Lambda

La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.

Por ejemplo, la siguiente función:

function(x) { return x * x; }

pasaría a ser:

function(x) x * x

Generador de expresiones

Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artículo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:

// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]

También se pueden utilizar para comprimir arrays, por ejemplo quedarnos solo con los valores pares:

[i for (i in lista) if (i % 2 == 0)]

Reducción de arrays

Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.

La nomenclatura sería de la siguiente forma:

miArray.reduce( fn [, val_inicial] );
// La función sería de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});

Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:

[x for ( x in 100 )].reduce(function(a,b) a+b);

JavaScript 1.8 Progress

Vía / dzone

|

FUEL: framework para desarrollo de extensiones de Firefox

ByLuis

FUEL es un framework cuyo sentido es ayudar a realizar extensiones para Firefox de forma sencilla que accedan a las herramientas y a nivel del systema de aplicación. Para ello proveerá unas librerías estables y documentadas, obteniendo extensiones más estables y por consiguiente una aplicación más estable también.
Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.
Es importante resaltar también que nos ayudará al acceso a datos (bookmarks, microsumarios y proveedores de búsquedas), al monitoreo de eventos y notificaciones, e interactuación con el UI de la aplicación.
Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicación XUL nos encontramos con unas librerías un tanto enrevesadas.
FUEL
Vía / Ajaxline

JSINER: objetos y herencia en Javascript

ByLuis

JSINER es una librería de Javascript que pretende facilitar la programación orientada a objetos y la dependencia en la gestión de scripts en ficheros externos.

Para el tema de la herencia, el autor define una herencia lazy, cuyas características son las siguientes:

  • Tiene las mismas características que la herencia mediante prototype.
  • No es necesario orden alguno en la declaración de los scripts externos.
  • En la mayoría de los casos la carga del HTML es más rápida, ya que los scripts se cargan solo en el momento en el que se necesitan.
  • Las dependencias se declaran en un modo más específico y las dependencias entre clases solo en scripts concretos.
  • Los scripts solo se cargan cuando se necesitan.

JSINER

|

jQPie: interfaz PHP para jQuery

ByLuis

jQPie es una interfaz ligera en PHP para jQuery, permitiendo muchos modos de interactuación.
A parte de ser ligero, maneja XML, HTML y JSON y tiene una API sencilla. Incluye un plugin para autocompletado, y está pensado para ofrecer otros plugins usar o como ejemplos.
Con jQPie podemos obtener y procesar datos de forma sencilla desde PHP, incluir código HTML generado mediante PHP en elementos de la página, llamar a funciones PHP directamente desde las páginas y más funcionalidades interesantes.
jQPie
Vía / PHPDeveloper.org

Esquinas redondeadas mediante Canvas

ByLuis

El tema de las esquinas redondeadas es algo bastante frecuente en los sitios de desarrollo web, pero antes no había visto ninguno que lo hiciera usando Canvas.
corner.png
El script del que hablamos añade varios efectos a nuestras imágenes de forma no obtrusiva, usando para ello canvas. Navegadores como Mozilla Firefox 1.5+, Opera 9+ y Safari mostrarán los efectos indicados, mientras que navegadores antiguos y el Internet Explorer no mostrarán nada.
Para incluir los efectos se debe modificar el class y añadir diversos tipos para cada efecto y así poder hacer combinaciones. Entre los efectos nos encontramos: esquinas redondeadas, efecto shading (con transparencia configurable) y sombras.
Corner.js
Vía / dzone