JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

La dificultad para entender las variables con referencias a objetos

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]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

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]

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

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]

JavaScript: ¿qué diferencia hay entre funciones anónimas y con nombre?

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]

Detectar la aparición y desaparición de un elemento: evento "inViewport"

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]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Cómo obtener una referencia al ámbito global en cualquier entorno JavaScript (HTML, Node.js, Windows Scripting Host...)

El ámbito global de JavaScript es el ámbito superior en el que se definen las variables y que contiene algunas de las funcionalidades globales del entorno de ejecución. Se trata de un objeto especial que: Siempre está disponible Se llama de manera implícita, es decir, no es necesario mencionar su nombre explícitamente para usar sus métodos o propiedades, al contrario que con cualquier otro objeto. Según indica el estándar ECMAScript, este objeto global no dispone de constructor ni de prototipo y no se puede invocar como una función al igual que el resto de los objetos. Si en un fragmento de código JavaScript definimos una variable o una función como estas fuera de todo contexto, o sea, para simplificar, sin ser dentro de una función): var miVar = 0; function sumar(a, b) { return a+b; } Lo que estamos haciendo es crear sendos miembros en el objeto global, que es el que constituye ... [Más]

Módulo para notificaciones web desde el navegador con HTML5

Estos días he estado creando un módulo JavaScript para facilitar el uso de las notificaciones del navegador usando la API estándar "Web Notifications" del World Wide Web Consortium (W3C). La idea es poder mostrar notificaciones nativas al usuario (de las que aparecen al lado del reloj en Windows, por ejemplo) pero desde aplicaciones web. Por ejemplo, cuando llega un nuevo correo (como hace GMail), o cualquier otra circunstancia que necesitemos notificar en segundo plano al usuario, pero desde el navegador. Actualmente el único navegador que NO las soporta es Internet Explorer / Edge, y no parece que tengan intención de soportarlas tampoco, pero en todos los demás funcionarán sin problemas. En su día escribí un artículo explicando con detalle cómo utilizarlas "a pelo", sin usar ninguna biblioteca intermedia. Esto es una especie de continuación. Lo que he hecho es crear una biblioteca que, en mi opini&... [Más]