Javascript es una herramienta bastante incomprendida - hasta hace poco nadie le hacía realmente mucho caso salvo para crear ventanas pop-up o enmascarar enlaces - pero es una herramienta potente y cada vez más gente la utiliza para crear cosas buenas.

Pero ¡hay mucha confusión! Algunas personas están confundiendo las posibilidades de Javascript con las de otros lenguajes como PHP o ASP, por tanto aquí va una lista de malentendidos que veo una y otra vez:

1. Javascript no puede acceder al sistema local de archivos. No puedes leer o escribir en la computadora del usuario - se trata de una medida de seguridad para evitar que los sitios hagan lo que quieran con tu ordenador, por ejemplo, introducirte un virus.
2. Javascript tampoco puede acceder al sistema de archivos remoto. Solía aceptarse como verdad que no podías acceder a archivos almacenados en el server… Las cosas han cambiado mucho con la expansión del soporte para XMLHttpRequest pero de todas formas sólo tienes HTTP para jugar - no puedes mover archivos, renombrarlos o cambiarles los permisos sólo mediante javascript
3. Javascript no puede ejecutar aplicaciones fuera del navegador. Al igual que el punto 1 se trata de una medida de seguridad
4. Javascript no puede acceder a tu scanner/impresora/webcam. Javascript no tiene acceso a tus periféricos si no utilizamos algún componente de terceras partes
5. Javascript no puede modificar la URL mostrada por el navegador. Otra medida de seguridad para evitar que cualquier sitio suplante la identidad de otro.
6. Javascript no puede modificar el historial del navegador.
7. Javascript no puede acceder a tu base de datos. Para acceder a tus bases de datos tendrás que utilizar un lenguaje del lado del servidor como PHP o ASP
8. Javascript no puede “encriptar” tu HTML ni evitar el “robo de imágenes”. Si se puede ver se puede copiar, no pierdas el tiempo con “medidas de seguridad” tan fáciles de saltarse.
9. Javascript no puede controlar el teclado o el ratón del usuario. No, no vas a poder controlar el ratón de tus visitantes y hacerles dar click en tus anuncios.
10. Javascript no puede utilizar múltiples hilos de ejecución. Existen algunos movimientos para tratar de crear una librería que pueda conseguirlo pero, de momento, no te preocupes de optimizar tu Javascript para ordenadores de doble núcleo.

Javascript es una herramienta maravillosa para mejorar la usabilidad de las aplicaciones web. Es una capa extra entre la estructura (HTML) y el diseño (CSS). Javascript nos permite alterar el comportamiento de un elemento.

Uno de los problemas con los que nos encontramos a la hora de desarrollar aplicaciones web con javascript son problemas de accesibilidad derivados al no contemplar la posibilidad de que un usuario nos visite con un navegador que no interprete este lenguaje. Una técnica para corregir este problema sería el separar el javascript de las otras 2 capas del desarrollo web (estructura y diseño), esto recibe el nombre de Javascript no obstructivo o Javascript Accesible.

La frase, “¡¡Divide y vencerás!!” se adapta perféctamente a esta idea, en la cual separaremos cada capa en su respectivo fichero, de forma que en cuanto a mantenimiento (la etapa más costosa y larga del desarrollo de una aplicación) e incluso la comprensión de la aplicación se verán afectadas positivamente en cualquier aplicación.

Operación limpieza
El desarrollo web ha cambiado en los últimos años, estamos dejando de mezclar la presentación de la estructura, lo que nos está facilitando el trabajo de mantenimiento, modificación y mejora de nuestras aplicaciones. El código que hace años usábamos esta dando lugar a otro más complejo y fácil de mantener.

Este código con todos los atributos referentes a la presentación en el código nos obliga a recorrer toda la aplicación para modificar cualquier aspecto que deseemos modificar. Por este motivo, nuestro código empieza a coger un poco de sensatez y nos permite separar las 2 capas, diseño y estructura.

Y aún podemos ir más allá…

La misma evolución ha sufrido el desarrollo con Javascript.

Reglas del Javascript no obstructivo

1. Nunca, bajo ninguna circunstancia incluyas javascript directamente en el documento.
Una de las mayores ventajas del Javascript es que al igual que CSS permite la ejecución en ficheros externos. Esto nos permite incluir los ficheros que necesitemos para cada páginas, ajustando al máximo el peso de la aplicación. Además si has de cambiar alguna funcionalidad de la aplicación únicamente has de modificar el fichero JS en cuestión.

Pero para poder disfrutar de esta propiedad siempre tendremos que hacer referencia a nuestro/s javascript desde el fichero HTML, añadiendo entre los tags <head></head> la siguiente línea haciendo alusión al fichero que deseamos adherir a nuestro proyecto.

2. Javascript es una mejora, no un sistema de seguridad.
Nosotros solo podemos usar Javascript como una mejora, debemos de pensar que no siempre podremos disponer de él y que agentes externos pueden deshabilitarlo sin darnos opción a activarlo, asi que hemos de programar pensando en que cualquier persona en este problema también debe poder usar nuestra aplicación.

Para ello podemos ver un ejemplo de javascript en el que vemos como valida un formulario.

Esto es perfectamente válido, nos permite controlar el formulario sin perjudicar a los usuarios que no tiene Javascript. De modo que en caso de no tenerlo activado únicamente tendremos que tener en cuenta que en la página de recepción de datos tendremos que validarlos directamente en el servidor, devolviendo al usuario a la página anterior en caso de que no sean válidos.

Otra forma de afrontar el problema sería la siguiente.

De esta forma estamos condenando al fracaso nuestra aplicación ya que si el navegador de nuestro usuario no soporta la llamada onclick, no podrá realizar un submit ya que nuestro boton es del tipo button.

3. Checkea la disponibilidad de un objeto antes de acceder a él.
Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del período de ejecución. Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.

Antes de usar el elemento o, comprobamos que exista, así conseguimos una robustez en nuestra aplicación que el usuario agradecerá. Esta técnica es muy usada para el famoso cross-browsing.

4. Crea un Javascript no especifico para un navegador
Quizás la regla más complicada de todas, pero la más importante. Al igual que tenemos que tener en cuenta navegadores sin Javascript hemos de tener en cuenta todos los navegadores, para ello usaremos la regla anterior como la mejor baza a nuestro favor.

Comprobamos la existencia del método getElementById y createTextNode del objeto document antes de usarlo, así nos aseguramos una victoria al lanzar esta función.

5. No uses variables de otros scripts.
Cuando creemos una función o funcionalidad debemos estar seguros de usar variables locales para dicha función o funcionalidad. De esta forma nos prevenimos de que otras funciones o funcionalidades modifiquen nuestras variables.

6. Mantén los efectos de ratón de forma independiente
Tener en cuenta que el javascript esté activo o no no es suficiente. Hemos de tener en cuenta que hay usuarios que no pueden utilizar el ratón para navegar como normalmente se hace, esto obliga a usar el teclado para realizar todas las tareas que requiera nuestra aplicación. Un problema típico es el onchange o onblur en los elementos de un formulario ya que el teclado ejecuta estos eventos de forma distinta que el ratón.

El problema que tenemos aqui es que cada vez que hacemos nos desplazamos hacia abajo desde nuestro teclado, estamos realizando la función send(), no siendo el resultado deseado (en FF parece no pasar). Los usuarios con experiencia sabrán que usan alt+abajo podrán omitir este evento.

La forma de solucionar esto es delegando la obtención del valor al evento onsubmit, de forma que podremos realizar cuantos cambios deseemos sobre nuestro formulario y únicamente lanzará la función al realizar el submit.

¿Que pasa con onkeypress?

Según la W3C, en estos casos.
Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
• Use “onmousedown” with “onkeydown”.
• Use “onmouseup” with “onkeyup”
• Use “onclick” with “onkeypress”

Esto suena perfecto en la teoría pero en la vida real el evento onkeypress está mal soportado por diferentes navegadores. Los usuarios que dependen del teclado para navegar normalmente tienen una configuración para simular los clicks, intro o espacio. Entonces esto nos lanza el evento onclick.

Cómo alcanzar lo que deseamos cambiar
Para un desarrollador javascript inexperto, el HTML es un patio de juegos.

O incluso puede ser un poco más avanzado…

En cualquier caso los eventos son llamados desde el HTML y si la función cambia de nombre, tendremos que cambiarlo en cada documento.Para ello debemos saber que usar y cuando usarlo, por ejemplo para este rollover, usaremos CSS que cumple nuestra misión sin alterar en nada la accesibilidad ni el resultado.

En este apéndice aprenderemos a insertar código JavaScript en nuestras páginas. Como sabemos, las páginas web se componen de código HTML (HyperText Markup Language), y para incluir el código Javascript utilizamos una marca HTML, <script>. Esta marca puede encontrarse en cualquier parte de la página web, tanto en el <head> como en el <body>.

Este ejemplo mostrará un numero ‘2′ en el navegador.

Además, podemos especificarle el lenguaje en el que queremos programar. Existen otros lenguajes para navegador como Visual Basic Script y PerlScript, pero nosotros usamos Javascript porque es universal: todos los navegadores lo soportan, mientras que los otros dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos escribir lo siguiente:

De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la misma página, como en el caso de que queramos enlazar una película flash con nuestra pagina web.

Otra forma de escribir Javascript en una página web es utilizando los eventos de las etiquetas HTML. Las etiquetas HTML tienen varios “eventos” que responden a determinados sucesos, como por ejemplo el click del ratón, el envío de un formulario, o la carga de una página. Por ejemplo, si queremos que aparezca un mensaje al cargar la página que estamos viendo, haríamos algo como esto:

Esto hará que aparezca un mensaje nada más cargar la página web. También podemos aplicar estos eventos como enlaces, botones, imágenes, etc… Prácticamente cualquier etiqueta HTML soporta eventos como onclick, que permite responder a una pulsación del botón izquierdo del ratón.

En este ejemplo vemos cómo al mismo tiempo que vamos a Google, el navegador nos avisa de lo que vamos a hacer antes de que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de enviar los datos (e incluso, evitar su envío si no son correctos), comprobar dónde pinchamos en una imagen, etc…, observando los cambios en los objetos Javascript.

Y una última manera de ejecutar código Javascript es adjuntando un archivo al código principal, de tal forma que podemos agrupar las funciones, clases y demás en un archivo, y reutilizar ese archivo tantas veces como queramos posteriormente. Un ejemplo puede ser éste:

En este ejemplo vemos cómo podemos incluir un código Javascript desde otro archivo y utilizar las funciones incluidas dentro de nuestro código, en tantos archivos como queramos. De esta forma podemos reutilizar el código todo lo necesario.

Los comentarios.
Los comentarios son uno de los elementos más despreciados en todos los lenguajes de programación, pero son de suma utilidad: permiten aclarar y sintetizar el código, además de servir de eventuales “ocultadores” de código, ya que todo lo que se encuentra en un comentario no es interpretado por el navegador. Podemos escribir comentarios de dos formas diferentes:

Ponemos dos barras normales para crear un comentario de una línea. Este comentario también lo podemos usar en el caso de que queramos ocultar una línea concreta de la ejecución del programa. Si queremos realizar un comentario de múltiples líneas, haremos:

De esta forma, podemos comentar varias líneas de texto o código en un bloque. Esto es bastante interesante cuando tenemos que ocultar una gran cantidad de código continuo, que de otra forma tendríamos que comentar línea a línea con las dos barras.

Los comentarios en el código son muy útiles para ayudar a comprender el sentido del programa, tanto para el creador del código como para otros que puedan leerlo.

El lenguaje JavaScript es uno de los más utilizados en la web y es uno de los códigos más versátiles a la hora de aplicarlo en la creación de tu sitio.

Para todos los desarrolladores que suelen trabajar con JavaScript a continuación les dejamos 10 tips, que consideramos los mejores, para que mejoren su codificación Javascript al máximo.

1. Utiliza el atributo defer sólo para scripts IE externos
Esto no es algo necesariamente obligatorio, pero puede resultar útil a veces. El atributo defer está declarado dentro de un tag <script> en XHTML, de esta forma:

El propósito de defer es decirle al script linkeado externamente que espere a que la página termine de cargar antes de ponerse a andar. Lo mismo se puede lograr por medio de métodos no-obstrusivos de Javascript, que usualmente incluye código que previene que los scripts se ejecuten hasta que el DOM termine de cargar.

Las ventajas de defer ocurren en conexión con Internet Explorer, dado que este navegador es el único que soporta este atributo. Por lo que si necesitas un script rápido para utilizar sólo en IE, y no te molesta que la página entera se cargue antes de que este se ejecute, simplemente añade defer=”defer” en tu etiqueta <script> y eso solucionará el problema. Un uso práctico para defer es solucionar el problema de la transparencia PNG en IE6.

NOTA: El atributo defer debe ser utilizado al esconder un script de otros navegadores mediante un comentario condicional que etiquete un script IE-solo, de otra forma el script funcionará normalmente en otros navegadores.

2. Utiliza una sección CData para prevenir XHTML de errores estrictos de validación
La mayoría de tus scripts residirán en archivos externos, y serán llamados en una etiqueta <script> ya sea en <head> del documento, o justo antes del tag finalizador </body>.

Pero puede que haya una instancia en la que estés incluyendo Javascript directamente en la misma página HTML, dentro de la etiqueta <script>, de esta forma:

¿Notan el símbolo “menor”, que es parte de la declaración id? Este símbolo causará errores de validación en tu página a menos que envuelvas tu código en una sección CData, de esta forma:

3. Evita las palabras claves JavaScript al crear identificadores de usuario
Muchas palabras son reservadas como palabras claves en JavaScript, por lo que deberías evitar utilizarlas como nombres de variables u otros identificadores personales. La lista completa de palabras claves es la que sigue:

• break
• case
• catch
• continue
• default
• delete
• do
• else
• finally
• for
• function
• if
• in
• instanceof
• new
• return
• switch
• this
• throw
• try
• typeof
• var
• void
• while
• with

4. Evita las palabras Javascript reservadas al crear identificadores de usuario
Existen también palabras JavaScript reservadas, que no necesariamente son utilizadas actualmente en el lenguaje, pero están reservadas para su uso futuro como palabras claves. Estas palabras son las siguientes:

• abstract
• boolean
• byte
• char
• class
• const
• debugger
• double
• enum
• export
• extends
• final
• float
• goto
• implements
• import
• int
• interface
• long
• native
• package
• private
• protected
• public
• short
• static
• super
• synchronized
• throws
• transient
• volatile

5. No cambies el tipo de una variable después de la declaración inicial
En JavaScript, técnicamente, lo siguiente es perfectamente legal:

Luego de la declaración inicial de la variable como una cuerda en la línea 1, en la línea 2 su valor es cambiado y su tipo de información también. Esto no es bueno y debería evitarse.

6. No utilices variables globales
Para prevenir posibles conflictos, en el 99% de los casos, utiliza la palabra clave var al declarar inicialmente las variables y sus valores. Esto asegura que tus variables estén localizadas y no sean accesibles fuera de la función en la que han sido declaradas. Así que si utilizas el mismo nombre de variable en dos funciones diferentes, no habrá conflicto dado que cada variable será abolida en el momento en que su función termine de ejecutarse.

7. JavaScript discrimina mayúsculas y minúsculas
Recuerda que las siguientes dos variables representan dos contenedores completamente distintos:

Así que utiliza prácticas buenas y consistentes en tus identificadores para asegurarte de no declarar dos variables diferentes cuando en realidad sólo querías crear una.

8. Utiliza switch para manejar condiciones múltiples
No hagas esto:

Haz esto:

El segundo bloque de código logra exactamente lo mismo que el primero, pero el segundo está limpio, es fácil de leer, de mantener y de modificar.

9. Utiliza try-catch para prevenir que los errores se muestren a los usuarios
Al envolver todo tu código en una declaración try-catch, puedes asegurarte que los usuarios nunca vean un desagradable error JavaScript. Cómo esto:

En el código de abajo, hemos intentado llamar a una función que no existe, para forzar un error. El navegador no mostrará el típico error “not an object” o “object expected” , pero en su lugar mostrará el error personalizado que hemos incluido en la sección catch. También puedes dejar la sección catch vacía, y nada sucederá en el lado del cliente, o podrías crear una función para llamar dentro de la sección catch y manejar el error de forma tranquila para tus propios propósitos de debuggeo.

Ten presente que esto puede causar que los errores se escondan también del desarrollador, por lo que buena documentación de código y comentarios sería útil aquí.

10. Realiza comentarios multi-línea legibles, pero simples
En JavaScript, puedes comentar una línea de código poniendo // al principio de la misma. También puedes comentar un bloque de código como se muestra aquí

Algunas veces necesitarás incluir una línea de comentario más larga y múltiple. Un buen método para usar que es fácil de localizar en el código es el siguiente:

Eso es todo. Diez prácticas JavaScript simples que esperamos les sirvan a todos.

¿Qué consejo añadirían ustedes?

Hoy en día muchos usuarios utilizan el bloqueador automático de popups en su navegador, y otro tanto lo tienen configurado por default sin siquiera saberlo.

Si necesitas usar un pop-up en tu sitio porque no te queda otra, te recomiendo primero chequear por Javascript si el navegador del usuario tiene habilitado el bloqueador y, en caso de ser así, realizar alguna otra maniobra para avisarle que permita esa ventana emergente.

Puedes usar esta técnica para mostrar un mensaje estilo: "Por favor deshabilita el bloqueador de ventanas emergentes y vuelve a hacer clic en Descargar archivo".

Lo primero es dar la directiva de abrir la nueva ventana, guardando lo que devuelva la función. Entonces chequeamos si existe el objeto. Si no, podemos disparar un alert() informando el bloqueador puede estar activo, o usar cualquier medio que nos parezca más efectivo.

¿Qué otras formas de resolver el tema de los pop-up blockers conoces?

Más de alguna vez nos hemos preguntado cómo funciona el menú superior del sitio. Ese movimiento de la etiqueta que de tan fluido parece ser Flash. Bueno, para eso se utiliza una librería JavaScript gratuita llamada script.aculo.us, la que a través de un simple comando y fácil configuración permite ese y otros muchos interesantes efectos. Existen algunas otras librerías, también gratis que hacen lo mismo. Tal es el caso de mootools, jquery o simpleJs. Es decisión de cada uno cuál utilizar.

Bien, para el ejemplo específico del efecto del menú de este sitio, se utilizó Effect.toggle(), el que permite con un sólo onclick() (en un <a>, <span>, etc) mostrar y esconder el div con el id que necesitamos. En el fondo se trata de eso, tenemos un div, le damos un id específico y único, el que a través del onclick le decimos que muestre ese div si está escondido, o que lo esconda si está visible. Para que el div esté escondido desde un inicio, le damos un display: none; en el mismo HTML o en una hoja de estilos externa, como prefieras. Como la mayoría de las veces, muestro un ejemplo visual y código utilizado explicado. Primero, el código HTML:

Fijarse que al onclick se le agregó el id cajatexto, al igual que el div que queremos que se vea el efecto aplicado.

Ver ejemplo

Debemos agregar 2 elementos JavaScript a la página que queremos que ocurra el efecto: prototype.js y scriptaculous.js (en ese mismo orden).

Como dije, script.aculo.us ofrece muchas más funcionalidades, además de efectos. Chequeen su sitio para más información.

Hasta ahora los ejemplos que he visto de creación de gradientes en Javascript no me convencen demasiado ya que, o usan imágenes de fondo con el degradado aplicado en ellas (imágenes que es necesario generar con algún editor o con lenguaje de servidor), o utilizan diferentes métodos de clipeo o división de capas (todo termina en un largo bucle en el que se recorre cada una de las subdivisiones generadas con el fin de aplicarle el color necesario para lograr el gradiente). En especial este último método puede consumir demasiados recursos si la superficie a cubrir es extensa.

Afortunadamente, gracias a la compatibilidad del elemento canvas con todos los navegadores modernos y a los filtros propietarios de Explorer, podemos, de manera crossBrowser, generar gradientes livianos en javascript, con un mínimo consumo de recursos y sin usar imágenes u otros extras.

Veamos algunos ejemplos:

Código utilizado: