JASoft.org

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

MENÚ - JASoft: JM Alarcón

Escribiendo código JavaScript limpio: funciones anónimas auto-ejecutables

Un patrón muy utilizado a la hora de escribir código JavaScript son las funciones anónimas auto-ejecutables. La idea es la siguiente: aprovechar las propiedades de ámbito de las variables de JavaScript y el uso de clausuras para escribir código más limpio que no interfiera con otro código JavaScript que pudiera haber en la página. De hecho es la técnica que utilizan muchas de las bibliotecas importantes para inicializarse. Por ejemplo, consideremos el siguiente fragmento de código JavaScript: var v1 = 0; function miFunc1(){ v1 = 5; alert(v1); } function miFunc2(){ v1 = 10; alert(v1); } En este código tan sencillo estamos definiendo una variable y dos funciones. Dado que desde ambas funciones debemos poder acceder a la misma variable común "x", la declaramos de manera global, siendo accesible desde toda la página. Este código, si bien funcionará correctamente, tie... [Más]

Off-Topic: Nuevo curso de programación profesional con JavaScript

Los que seguís con asiduidad este blog habréis notado que he estado un poco ausente durante las últimas semanas. Aparte de que he estado creando mucho material para nuestro blog para programadores de campusMVP, el principal motivo ha sido que durante los meses de verano y hasta finales de la semana pasada he estado trabajando duramente en crear un nuevo curso para campusMVP: JavaScript profesional para desarrolladores y diseñadores web Ha sido un trabajo bastante duro a pesar de que ya he escrito varios libros sobre el tema, principalmente porque he tratado de crear un curso muy práctico, y al mismo tiempo que sirviera para el mayor número de programadores posible. Para ello, aparte de la teoría correspondiente (que es mucha) he grabado más de 13 horas de vídeos prácticos y muchos ejemplos Esto que puede parecer relativamente poco, es mucho para un curso como este que tiene además gran cantidad de material teórico escrito (que también es muy necesario). Y es que además, entre preparaci... [Más]

Uso de condiciones complejas en instrucciones switch de JavaScript (y otros lenguajes)

La instrucción switch en JavaScript nos permite tomar decisiones a partir de una lista de posibles valores que se compraran con una variable. Por ejemplo, si tenemos una variable "x" y queremos realizar una acción en función del valor que tenga ésta, escribiremos esto: switch (x) {   case 0:      //Acción para el 0      break;   case 1:      //Acción para el 1      break;   case 2:      //Acción para el 2      break;    ........   default:      //Acción por defecto} Esta instrucción de control de flujo nos evita tener que crear multitud de condicionales if-then anidados para conseguir el mismo efecto. Así, podemos poner cada uno de los valores posibles y realizar las acciones pertinent... [Más]

Evitar parpadeo de color blanco mientras carga un marco interno en una página HTML

Hoy un truco rápido pero interesante. Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo <iframe src=“/modulo/OtraPagina.aspx” style=”width:100%;height:30px;”> Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional. Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML... [Más]

Booleanos, pseudo-booleanos, operadores y condicionales en JavaScript: mucho más complejo de lo que parece

Lo que voy a explicar hoy tiene mucho más trasfondo del que puede parecer a simple vista, y es aplicable no solo a JavaScript sino a cualquier lenguaje débilmente tipado que maneje valores que se pueden evaluar automáticamente como si fueran booleanos. En JavaScript existen valores booleanos (true y false) pero existen también otros valores que usados en el contexto de un operador booleano se comportan también como si fueran booleanos. A los tipos de datos no booleanos que se interpretan como verdadero cuando se evalúan se les denomina valores "truly" (o como les llamo yo en español: valores "verdadosos"). Cuando se evalúan como falsos se les denomina valores "falsy" (o valores "falsosos"). Condicionales y conversiones implícitas Por ejemplo consideremos este código:   var v = "cualquier cosa"; if (v) alert("verdadero"); else alert("falso"); ¿Cuál crees que será... [Más]

Problemas para detectar Internet Explorer 11 y cómo solucionarlos

Con la reciente Preview de la siguiente versión de Windows 8 (Windows 8.1) se ha incluido también un avance de la próxima versión del navegador de Microsoft, Internet Explorer 11. Con IE11 Microsoft está cada vez más cerca de conseguir el nivel de compatibilidad con los estándares de la W3C (HTML5 y CSS3) que tienen otros navegadores de la competencia. De hecho, parece que quieren parecerse tanto a los competidores que han hecho más difícil el poder identificar al navegador, por lo que mucho código viejo puede que llegue a confundirse. Generalmente se utilizan dos técnicas para distinguir al navegador actual, dependiendo de si lo estamos haciendo en el lado servidor o en el lado cliente. Detección en el lado servidor En el lado servidor se utiliza la Cadena de Agente de Usuario (UAS), que es una cadena de texto que todos los navegadores envían al servidor con cada petición y que los i... [Más]

jQuery 2.0 ya está disponible… pero no corras a descargarlo todavía

Hace dos días se liberó la versión 2.0 de jQuery, el plugin más conocido y el más utilizado por todos los desarrolladores web del mundo. Por regla general una nueva versión de cualquier cosa siempre es bien recibida, ya que aporta soluciones a bugs y nuevas características, y generalmente siendo compatible hacia atrás. Así que todos corremos a descargarla y probarla en nuestros sistemas. En este caso va a ser mejor que te lo pienses dos veces… La versión 2.0 de jQuery NO ofrece características nuevas, y soluciona un mínimo número de bugs. Sus desarrolladores se han centrado en una cosa fundamentalmente: eliminar código de compatibilidad con Internet Explorer 6, 7 y 8 que les complicaba mucho la vida y hacía que perdiera un poco de rendimiento. Así que la única novedad real de jQuery 2.0 es que no ofrece soporte para IE 6, 7 y 8. Al mismo tiempo han liberado l... [Más]

Live Tiles para aplicaciones web en Windows 8

Windows 8 supone un cambio radical en cuanto a las interfaces de usuario se refiere, dentro del mundo Windows. Se ha eliminado por completo el clásico menú de inicio que nos había acompañado durante mas de 17 años (desde Windows 95) y todo gira ahora en torno a la nueva página de inicio: Como casi siempre que Microsoft lanza algo nuevo, y especialmente siendo un cambio tan radical como este, las opiniones están polarizadas y no suele haber término medio: o lo adoras o lo odias a muerte. Personalmente he de reconocer que fui de estos últimos cuando probé por primera vez Windows 8 hace alrededor de un año en las primeras versiones preview. No me gustaba nada. Lo cierto es que un año después no sólo he cambiado de opinión, sino que me gusta mucho, especialmente si dispones de una pantalla táctil (no tanto en un PC normal, donde la ventaja no es tan perceptible). Una vez que dominas los cuatro gestos que necesitas conocer y sobre todo cuando ves la gran ventaja que ofrece (incluso en es... [Más]

Elevación de variables (hoisting) en JavaScript

En esta ocasión quiero hablar de un efecto quizá poco conocido pero importante del modo en que procesa el código JavaScript. En JavaScript existen variables globales, las cuales tienen sus ventajas en un lenguaje como este, pero también están llenas de peligros, y variables locales, cuyo ámbito se circunscribe exclusivamente a las funciones en las que se declaran. Podemos utilizar una variable global desde dentro de una función cualquiera, ya que están accesibles desde cualquier lugar de la página, por ejemplo: //Variable global var name = "Jose"; function HelloWorld(){   alert(name); } HelloWorld(); Al hacer esto saltará el mensaje con el nombre que hay en la variable. Bastante obvio. Bien, pero ¿qué pasa si definimos una variable con el mismo nombre dentro de la función?: //Variable global var name = "Jose"; function HelloWorld(){   //Variable local   var name = "P... [Más]

Cómo mostrar notificaciones de escritorio con Chrome

 ATENCIÓN OBSOLETO Con Chrome 35, lanzado en mayo de 2014, todo lo explicado en este artículo ha dejado de ser funcionar ya que se ha eliminado el soporte para esta API. Ahora existe una API nueva, estándar, basada en la que dicta la W3C y que además funciona en varios navegadores. Tienes todos los detalles en este artículo. Google Chrome posee una característica sensacional que le permite mostrar notificaciones en el escritorio desde código JavaScript. Lo estupendo de estas notificaciones es que se ven en el escritorio y las puedes mostrar en cualquier momento, aunque el navegador no esté en primer plano o esté minimizado. Si tu aplicación comprueba información en segundo plano con AJAX (como hace GMail con los nuevos correos) el usuario puede dejar el navegador minimizado y aún así recibirá notificaciones cuando haya algo nuevo que atender. Como vemos las posibilidades son muchas Nota: Internet Explorer dispone de un método createPopup disponible desde la versión 7 análogo a... [Más]