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]

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]

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]

    ATENCIÓN Este post lo he actualizado y ahora tienes una biblioteca específica Open Source en Github para ayudarte a sacar partido a las notificaciones de los navegadores. Pulsa aquí para acceder. Los navegadores son, cada vez más, los sistemas operativos modernos. A lo que me refiero es a que la mayoría de las aplicaciones que usamos en el día a día residen cada vez más en el navegador y menos en aplicaciones específicas en el escritorio. Por ello, desde HTML5 tenemos que poder hacer más cosas que tradicionalmente eran coto exclusivo de las aplicaciones de escritorio. Una de ellas es la posibilidad de enviar notificaciones ante ciertos eventos: Chrome Firefox Gracias a la API de notificaciones de HTML5 es posible conseguirlo, aunque tiene sus detalles que debemos controlar. Actualmente Internet Explorer es el único navegador que no soporta la API de notificaciones de HTML5, ... [Más]

Si alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código). La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS? Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS. Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas qu... [Más]

Nota: He estado un poco “missing” desde hace un tiempo, casi un mes, entre otras muchas cosas por que he estado muy involucrado en el lanzamiento de nuestra zona de recursos para programadores en campusMVP.es. En ella encontrarás muchas cosas interesantes para programadores, sobre todo los que se inician, y podrás encontrar trucos, conceptos de base, vídeos prácticos, noticias, y mucho más. Añádelo a favoritos :-) Ahora, para compensar, un artículo bastante a fondo sobre un tema muy interesante... ;-) De toda la vida estamos acostumbrados a que, cuando visualizamos un vídeo, tengamos la opción de verlo a pantalla completa, para poder apreciar todos los detalles y verlo en alta definición. En lo que no se fijaba casi nadie es en que, hasta hace relativamente poco, todos esos visores de vídeo estaban basados en Flash y en menor medida en Silverlight, y esa capacidad de verse a toda pantalla... [Más]

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]

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]

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]

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]