Similar Posts
Algo de Javascript avanzado
ByLuis
Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mÃ) es que al querer dar buenas noticias y buenos scripts, te hace estar al dÃa.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendÃa, incluso me decÃa si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript
Indicar calidad de la password con Javascript
ByLuis
Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librerÃa, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
VÃa / WebAppers
7 reglas para realizar Javascript de calidad
ByLuis
Siete consejos para realizar un javascript de calidad y no intrusivo:
- No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
- Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
- Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
- Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
- Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
- Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
- Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y entendible.
The seven rules of Unobtrusive JavaScript
Vía / @dcedilotte
Highlight.js: resalta código automáticamente
ByLuis
Si hace unos dÃas hablábamos de CodePress, hoy vamos a hablar de otro Javascript parecido que resalta el código que se introduce en tu HTML entre las etiquetas <pre><code> … </code></pre>.
En este caso detecta automáticamente el lenguaje de programación, aunque se puede indicar también en el class de la etiqueta code, o también se puede ignorar el cógido si ponemos como estilo no-highlight.
Los lenguajes que reconoce son los siguientes: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C. A parte permite exportar el código HTML generado y añadirlo como plugin para WordPress.
Highlight.js
VÃa / WebAppers
Hacer un botón de ‘Ver código fuente’
ByLuis
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.
Uso correcto de los selectores en jQuery
ByLuis
Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:
$('.boton')Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:
- Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
- Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
- Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
- Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)