Javascript

Documentación oficial de prototype: por fin!

ByLuis January 19, 2007

Prototype ya dispone de documentaciÃ³n oficial. Aprovechando el lanzamiento de la versiÃ³n 1.5 de la famosa librerÃa han publicado la documentaciÃ³n de la API, un blog y una secciÃ³n de tutoriales.
La documentaciÃ³n estÃ¡ realmente bien. Bien organizada y bajo un diseÃ±o limpio y claro. Pero se echan de menos dos cosas: la posibilidad de que la gente envÃe comentarios y ejemplos como ocurre con la documentaciÃ³n de PHP y un buscador. Respecto al buscador, proporcionan un bookmarklet que cumple esa funciÃ³n pero parece una soluciÃ³n forzada.
La secciÃ³n de tutoriales y consejos estÃ¡ todavÃa muy vacÃa pero es una buena idea el que la hayan implementado. Actualmente ofrecen dos documentos: IntroducciÃ³n a AJAX y CÃ³mo Prototype extiende DOM.
Y el blog, genial. TodavÃa esta vacÃo pero es lÃ³gico… lo acaban de publicar! Desde luego yo ya me he suscrito a las RSS
VÃa / Anieto2k

Javascript

Mejor técnica para herencia en Javascript

ByLuis March 26, 2007

Muy buen artÃculo que nos explica paso a paso cÃ³mo conseguir implementar la herencia en Javascript. Aunque Javascript no es un lenguaje pensado en la orientaciÃ³n a objetos, Ãºltimamente debido al Ajax y a las librerÃas que van apareciendo, nos solemos encontrar con la necesidad de implementar OO en nuestras aplicaciones clientes y, en casos menos frecuentes, tratar el tema de la herencia en Javascript.
Este artÃculo nos explica desde el inicio de herencia entre clases, hasta los problemas con los que nos vamos encontrando. El problema mÃ¡s frecuente es cuando una clase llama a un mÃ©todo de la clase padre, si se usa this en la clase padre, usarÃ¡ la clase padre, y no la hija, que es lo que se supone que se espera que haga.
Otro problema que nos explica, es la necesidad de indicar cuÃ¡l es la clase padre, para poder referenciarla. Si se especifica directamente, se puede solucionar el problema, pero si la estructura de clases es compleja, especificar en cada una de ellas cuÃ¡l es el progenitor, nos encontramos con una estructura difÃcil de mantener.
A parte de resolvernos la realizaciÃ³n de herencia entre clases en Javascript, este artÃculo nos enseÃ±a a resolver los problemas que nos podemos encontrar, ya que hubiera sido mÃ¡s sencillo darnos la soluciÃ³n, explicarla y listo, pero sin embargo lo que hace es ofrecer soluciones iniciales, ver que problemas representa y luego solucionarlos y pasar a otra versiÃ³n mejorada.
TambiÃ©n me gustarÃa destacar la explicaciÃ³n de los mÃ©todos call() y apply() que poseen las funciones en Javascript. Hay que tener en cuenta que en Javascript las funciones son tratadas como objetos, admiten propiedades y mÃ©todos. El mÃ©todo call() permite especificar el this utilizado, mientras que el mÃ©todo apply() el array de argumentos que se le pasa a la funciÃ³n.
Introducing the best Javascript Inheritance Technique

Javascript

Evitar spam en formularios mediante Javascript

ByLuis January 26, 2009

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

Javascript

JSDoc: documentar javascript

ByLuis July 5, 2007

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

Javascript

NitobiBug: debug para Javascript

ByLuis June 3, 2008

NitobiBug es un script similar a Firebug que nos permite realizar debugs en nuestros scripts. Permite mostrar una ventana emergente con el contenido de objetos (diferenciando entre tipos), elementos DOM o simplemente mensajes.

Usarlo es tan sencillo como esto:

var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);

Y para instalarlo solo hay que añadir el archivo js.

Una alternativa a Firebug, sobre todo para IE, pero me sigo quedando con Firebug.

NitobiBug

How to | Javascript | Laboratorio

Laboratorio: Comparar productos mediante drag & drop

ByLuis June 21, 2006

El otro dÃa contÃ¡bamos como realizar drag&drop de elementos HTML y en el ejemplo lo que hacÃamos era recolocar los elementos dentro del HTML. IndicÃ¡bamos que una buena utilidad para este efecto podrÃa ser para realizar comparativas de productos en una tienda.

Javascript

Añadir contenido a los datepicker de jQuery UI

ByLuis October 11, 2012

En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

// Añadimos datepicker al input que queremos
jQuery('.fecha')
  .datepicker({
    showButtonPanel: true,
    dateFormat: "DD, d MM, yy" 
  });

// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    jQuery.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
    // Se le añade el valor del nuevo campo select que hemos incluido
    target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}

Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
  var html = jQuery.datepicker._generateHTMLExtended(inst);
  var div = jQuery('').html(html);
  div.find('table:first').after('Horario:
');
  return div.html();
}

// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
  var $obj = jQuery('.fecha');
  $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});

Similar Posts