En este artículo vemos la manera de poder utilizar Uglify-JS para poder minimizar y también ofuscar el código fuente JavaScript, tanto desde la línea de comandos, como de manera mucho más cómoda usando un menú contextual desde el explorador de archivos de Windows, solo cuando lo pulses con la tecla de mayúsculas apretada, para que no moleste en el día a día. Además de explicar cómo montarlo "a mano", también se entrega un archivo para incorporar esta opción automáticamente. [Más]

Parece una pregunta tonta, pero ¿cuál es la mejor forma de vaciar una matriz en JavaScript?
Aunque la respuesta, una vez conocida, parece muy obvia, lo cierto es que es una pregunta interesante y con varios posibles métodos válidos. [Más]

Una necesidad muy habitual en todo tipo de desarrollos Web es la de poder exportar información que tenemos en la página a archivos descargables que el usuario pueda utilizar.
Para solucionar este problema, muchas veces se recurre a que, cuando el usuario pulsa el botón de exportar, lanzamos una nueva petición al servidor, y el documento descargable se genera al vuelo en el backend, siendo devuelto al usuario a través de Internet. Esto está bien y de hecho es indispensable a veces, según el tipo de información y el formato del archivo que nos interese. Sin embargo, lo que muchos programadores Front-End no saben, es que es posible generar archivos para descarga directamente desde el navegador, usando tan solo JavaScript. Y eso precisamente es lo que voy a explicar hoy en este artículo... [Más]

Por lo que veo en las dudas de mis cursos y atendiendo consultas de la comunidad, a muchos programadores inexpertos les cuesta de entrada ver la diferencia entre paso por referencia y valor de parámetros de funciones, pero también la diferencia entre una variable, un valor y una referencia a un objeto. Esto suele pasar tanto en JavaScript como en otros lenguajes. Veamos un caso típico que genera dudas... Si consideramos este código:function modificaObjeto(obj2){ obj2.nombre = "Objeto"; obj2.valor = 5; } var obj = { nombre: "Pepe", valor: 0 }; modificaObjeto(obj); Lo que hacemos es pasar un objeto a la función, y a través del parámetro de ésta modificamos el objeto en si. Si ahora mostramos ese objeto en la consola veremos que se han modificado sus propiedades, como era de esperar, y que el nombre es "Objeto" y el valor es 5. Es decir, hemos modificado sus valores originales porque hemos cambiado el objeto en sí al que apunta la variable, pero no a donde apunt... [Más]

Expliación detallada de qué es la vulnerabilidad "tabbabbing" y cómo solucionarla en todos los navegadores. [Más]

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]

Cuando depuramos código JavaScript estamos acostumbrados a utilizar las facilidades que nos p [Más]

Cómo evitar el uso de jQuery para tareas sencillas de manipulación de clases CSS en páginas web...

Se explica:
- Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
- Cómo quitar clases
- Cómo añadir clases
- Cómo alternar clases
- Cómo comprobar si un elemento tiene aplicada o no una determinada clase
- Cómo dar soporte a navegadores muy antiguos

tanto en jQuery como en JavaScript puro. [Más]

En JavaScript tenemos básicamente dos formas de definir funciones. La primera y más tradicional es usando la palabra clave function y otorgándole un nombre a la función. Por ejemplo: function miFunc() { ..... //Código de la función } A esto se le llama declaración de funciones.Otro modo muy habitual es, simplemente, asignar una función anónima a una variable para trabajar con ella, algo así: var miFunc = function() { .... //Código de la función } A esto se le llama expresión funcional o asignación de funciones. De hecho es posible, aunque no frecuente, hacer una combinación de ambos estilos:var miFunc = function miFuncion(){ .... //Código de la función }Lo que constituiría una asignación de función con nombre.Todos estos casos son equivalentes, pero solo en apariencia. En todos ellos podemos llamar a la función escribiendo: miFunc(); y aparentemente todo parece funcionar del mismo modo. Sin embargo ¿existe alguna diferencia entre declarar una funció... [Más]

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario. Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos, podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.El problema es que no existe ningún evento como este en HTML/JavaScript.No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta. En este artículo vamos a desarrollar desde ce... [Más]