JavaScript es uno de los lenguajes más importantes usados en el desarrollo web. Tiene muchos usos que van desde la revisión de datos ingresados en formularios hasta widgets interactivos, como paneles con pestañas, acordeones y menús desplegables. También es usado para crear galerías de fotos y para buscar nueva información de un web server para actualizar el contenido sin necesidad de recargar la página. Combinado con otras tecnologías es comúnmente conocido como Ajax.

Junto con HTML y CSS, el conocimiento de JavaScript es una habilidad clave que cualquier persona involucrada en la construcción de sitios web debería de saber. Sin embargo muchos diseñadores web no lo hacen. JavaScript tiene una reputación de ser muy difícil; y los diseñadores gráficos a menudo insisten en que su rol es diseñar y no programar. Incluso si nunca programas nada en JavaScript es importante entender como la estructura de tus sitios web afecta el trabajo de un programador en JavaScript. JavaScript se ha vuelto más fácil de usar gracias a librerías como jQuery.

Este es el primero de una serie de artículos diseñados para ayudarte a comenzar con JavaScript y jQuery. En ellos se describen las características básicas del lenguaje que necesitas saber antes de adentrarte en jQuery.

¿Qué es JavaScript y para qué sirve?

A pesar de la similitud de nombres JavaScript no es Java. No son lenguajes relacionados. Java es usado frecuentemente para programar juegos, teléfonos móviles y otros dispositivos como Amazon Kindle, Aunque Java puede ser usado en websites, rara vez es usado para ello

JavaScript, por el contrario, es un lenguaje ligero pero potente que normalmente corre dentro del web browser. Su rol es proveer el acceso a los diferentes elementos de una página para que puedan ser eliminados, actualizados, poder crear nuevos elementos, cambiar los estilos de los existentes o extraer información de ellos. Por ejemplo,  se pueden leer los datos ingresados en un formulario, realizar un cálculo y desplegar el resultado. También se pueden enviar una petición a un web server para mas información y con ella actualizar parte de la página sin necesidad de recargarla.

JavaScript realiza estas tareas mediante el acceso al Document Object Model (DOM). El DOM es una estructura similar a un árbol genealógico.  Si el HTML de tu página es inválido o muy complejo, el código JavaScript no podrá navegar por el árbol. Del mismo modo, si rompes reglas simples como no usar el mismo ID más de una vez en una página, JavaScript se vuelve confuso y simplemente te rindes.

La importancia de los eventos

JavaScript es un lenguaje orientado a eventos. Algunos eventos son disparados de forma automática. Por ejemplo el evento load se dispara cuando se termina de cargar la página en el browser, y es frecuentemente usado para para inicializar menús desplegables y otros widgets. Otros eventos son disparados por el usuario, el más común, cuando comienza el evento click al pulsar el usuario sobre el botón principal del mouse o hace un tap sobre alguna pantalla táctil. Otros eventos comunes son el mouseover y el mouseout cuando el usuario pasa el cursor sobre algún elemento y hace un submit al enviar un formulario.

Los eventos se están disparando todo el tiempo. Un evento se dispara cada vez que se mueve el mouse, se hace scroll de una página o se presiona una tecla. Seria un caos si el browser tuviera que responder a todos los eventos. En lugar de eso, tu como developer, creas funciones para manejar ciertos eventos y los asocias con elementos de la página que quieres que respondan a dichos eventos. Esto se conoce como enlazar o hacer binding de manejador de eventos.

Las funciones que manejan los eventos solo se sientan y esperan, o escuchan, al evento. Cuando el evento asociado es disparado, la función que lo controla entra en acción y realiza las tareas designadas, como abrir o cerrar un menú desplegable, enviar un formulario o cambiar el estilo de un elemento.

Creando una función

En lugar de hablar de términos abstractos, echemos un vistazo a JavaScript en acción.

Como su nombre lo indica, una función hace algo.  Se trata de una serie de comandos que realizan cualquier tarea o tareas que le indiques. La manera más común de definir una función es usando la palabra clave “function” seguida del nombre de la función, un par de paréntesis y un bloque de código agrupado entre símbolo de llaves. Tú puedes darle casi cualquier nombre a una función, siempre y cuando comience con una letra, un guion bajo (_), o un símbolo de dólar ($). Además el nombre no debe contener espacios ni guiones medios. JavaScript es sensible a mayúsculas y minúsculas, por lo que es común usar una letra mayúscula al inicio de cada palabra a partir de la segunda, (formato conocido como notación “camel case”); por ejemplo  “changeFontSize”.

Para mantener lo más simple posible, el siguiente código solo cambia el tamaño de letra de una lista desordenada. Puedes encontrar el código terminado en el archivo  change_01.html de los archivos de ejemplo, pero para que te des una idea de lo que es escribir JavaScript te recomiendo usar Dreamweaver, o cualquier editor de texto, y que escribas el código por ti mismo. Los archivos de ejemplo puedes descargarlos de aquí.

1. Abre change_start.html. La página contiene un encabezado <h1>, una lista desordenada y un párrafo (ver Figura 1).  La lista desordenada tiene ID’s de frutas.
   
   ^{Figura 1. Una función de JavaScript será usada para cambiar el tamaño de letra de la lista}
2. En la vista de código, inserta una nueva línea justo después del cierre de la etiqueta </head> y agrega la etiqueta <script>. Si la página tiene un HTML5 DOCTYPE, ya no será necesario agregar la propiedad  type=”text/javascript”. Los navegadores automáticamente asumen que el código dentro del bloque <script> es JavaScript.
3. Antes de agregar código JavaScript, es una buena idea cerrar el bloque <script>. Por tanto, deja una línea en blanco y en seguida escribe </script>.
   Nota que Dreamweaver no autocompleta la etiqueta cuando escribes </. Es necesario completarlo manualmente. Esto es por que puede existir la misma combinación de caracteres dentro del script.
4. Dentro del bloque <script> escribe el siguiente código:
   function changeFontSize() { <br/><br/> }

   1 2 3

   function changeFontSize() { <br/><br/> }

   Esto define una función llamada changeFontSize(). Generalmente puedes pasar información como argumentos a la función JavaScript. Los argumentos van entre paréntesis después del nombre de la función. Esta función no recibe argumentos, pero los paréntesis deben ser usados. El cuerpo de la función va entre símbolo de llaves y es lo que agregaremos a continuación.

5. Escribe dentro de las llaves  var list = document. Escribe inmediatamente después un punto. Tan pronto lo hagas, versiones recientes de Dreamweaver te mostrará una serie de sugerencias de código (ver Figura 2).
   
   ^{Figura 2. Dreamweaver despliega sugerencias de código para JavaScript}
6. Escribe la letra g. Esto traerá como sugerencia getElementById(). Pulsa la tecla Enter para insertar el código.
7. Dreamweaver presenta otra sugerencia notificando que la función getElementById() espera un ID como argumento. Escribe comillas,(no importa si son dobles o simples). Si usas Dreamweaver CS5.5 automáticamente te presentará una lista de los ID’s disponibles en la página (ver Figura 3).
   
   ^{Figura 3. Dreamweaver CS5.5 muestra las sugerencias de ID’s disponibles}
8. En Dreamweaver CS5.5, pulsa la tecla Enter para insertar el ID  fruits. Después escribe el paréntesis que cierra seguido de un punto y coma (;).
   Si estas usando otro programa, necesitas completar el código manualmente. En ambos casos deberás tener el código de la siguiente manera en la definición de tu función:
   function changeFontSize() { <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list = document.getElementById('fruits'); <br/> }

   1 2 3 4 5

   function changeFontSize() { <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list = document.getElementById('fruits'); <br/> }

   La línea de código que acabas de escribir usa la palabra clave var para crear una variable llamada list, la cual almacena la referencia al elemento de la página con el ID fruits. La referencia a fruits de obtiene de un método de JavaScript llamado document.getElementById();

   Nota: Los métodos son tan esenciales como las funciones, excepto que los métodos pertenecen a los objetos. No dejes que la terminología te confunda. Si ayuda, piensa que los métodos son un tipo especial de funciones.

9. Inserta una nueva línea seguida de la última que pusiste y agrega el siguiente código:
   
   list.style.fontSize = '20px';

   1	list.style.fontSize = '20px';

   Si estas usando una versión reciente de Dreamweaver, te habrás dado cuenta que las sugerencias de código se lanzan cada vez que escribes un punto. Lo que hace esta línea de código es cambiar el tamaño de letra en el elemento list, en otras palabras la lista desordenada con los ID’s de frutas.

   Probablemente reconocerás el texto fontSize por su similitud con la propiedad CSS font-size. JavaScript no permite guiones medios en los nombres. Por tanto se remueve el guion y se vuelve mayúscula la letra que seguía.

   La definición completa de la función debería verse algo así:

   function changeFontSize() { <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list = document.getElementById('fruits'); <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list.style.fontSize = '20px'; <br/> }

   1 2 3 4 5 6 7

   function changeFontSize() { <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list = document.getElementById('fruits'); <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list.style.fontSize = '20px'; <br/> }

10. Guarda la página y pruébala en un browser. Nada pasa nada. Aunque se halla definido la función, no hará nada hasta que se allá disparado el evento. Podrás crear  un manejador de eventos dentro de poco, pero primero echa un vistazo a algunas características básicas de JavaScript en este código que acabas de escribir.

Fundamentos de JavaScript

Si ya has tenido experiencia con otros lenguajes de programación, la mayor parte de esta sección te será muy familiar. En beneficio de los principiantes, explicare la terminología básica. Al principio parecerá monótono, pero hará que resto sea fácil de entender.

La primer línea dentro de la función changeFontSize() crea una variable llamada list. Las variables son una parte importante de todos los lenguajes de programación. Una variable usualmente almacena un valor que no necesariamente se conoce de antemano. El nombre  de la variable sigue siendo el mismo pero su valor puede cambiar. Tomando un ejemplo de la vida real, tu cuenta de banco es similar a una variable. Las cantidades cambian constantemente, pero nombre de la cuenta siempre es el mismo.

Cuando se define una variable dentro de una función, siempre se debe usar la palabra clave var. Haciendo esto le dices  JavaScript la variable a usar dentro de la función. Omitir la palabra clave var puede producir resultados impredecibles en scripts más complejos.

La misma regla aplica tanto para variables como para funciones, como:

• El nombre debe comenzar con una letra, guion bajo o el símbolo de dólar.
• No se permiten espacios  ni guiones medios.

El valor es asignado a la variable usando el símbolo igual (=). El valor a la derecha del signo es asignado a la variable en la izquierda.

La primer línea en la función changeFontSize() usa document.getElementById(‘fruits’) para asignar a la variable la referencia de la lista desordenada de frutas. Esto introduce tres características importantes de JavaScript: Objetos, notación de punto y pasar argumentos a una función.

En términos simples, un objeto es una variable que contiene cero o más valores conocidos como propiedades y métodos. Una propiedad es similar a una variable y un método es esencialmente lo mismo que una función. Puedes acceder a propiedades y métodos de un objeto usando la notación de punto. El objeto va primero seguido de un punto y después de la propiedad o el método. En este caso, getElementById() es un método del objeto document.

El nombre getElementById() es auto explicativo: obtiene la referencia de un elemento usando su ID. El ID debe ser colocado entre comillas dentro de los paréntesis después del nombre del método.  Esto se conoce como paso de argumentos. La razón por la que el argumento va entre comillas es por que JavaScript lo trata como una cadena de texto. En términos de programación una cadena de texto es conocido como string (por que es una cadena de caracteres). No importa si usas comillas dobles o simples,  pero las comillas deben ser las mismas.

La segunda línea en la función changeFontSize() lleva la notación de punto un paso mas allá. Accede al objeto estilo  del elemento almacenado en la variable list y accede a la propiedad fontSize así: list.style.fontSize. El valor asignado es un string que contiene el nuevo tamaño. En otras palabras, la segunda línea establece la propiedad CSS font-size de la lista de frutas a 20px.

Hay un último punto a saber. Cada comando termina con punto y coma. Técnicamente hablando, el punto y coma es opcional, por que JavaScript automáticamente trata el final de cada línea que contiene un comando como el final del comando. Si accidentalmente truncas la línea de código, JavaScript trata esto como un comando completo ocasionando que el script falle. Terminar siempre los comandos con punto y coma hace más fácil de encontrar los errores.

Suficiente teoría por ahora. Regresemos al código y hagamos que la función haga algo.

Usando la función.

El camino más simple para usar la función es ligándola a un elemento usando algún atributo de HTML como onClick.

1. Continúa trabajando con el código del archivo anterior o usa el archivo change_01.html como punto de inicio.
2. Selecciona el texto del último párrafo y escribe javascript:; en el campo Link del inspector de propiedades del modo HTML de Dreamweaver. Esto agrega un link falso al texto.
3. Abre la vista código e inserta un espacio antes de cerrar la etiqueta <a> y escribe onClick=”changeFontSize()”. El párrafo final debe verse de la siguiente manera:
   
   
   &lt;p&gt; <br/>&nbsp; &lt;a href="javascript:;" onClick="changeFontSize()"&gt;Change list font size&lt;/a&gt;. <br/>&lt;/p&gt;

   1 2 3 4

   &lt;p&gt; <br/>&nbsp; &lt;a href="javascript:;" onClick="changeFontSize()"&gt;Change list font size&lt;/a&gt;. <br/>&lt;/p&gt;

4. Guarda la página y cárgala en algún navegador o activa la vista Live en Dreamweaver.
5. Haz click en el link de el último párrafo (si estas en la vista Live, pulsa la tecla Ctrl en Windows o Command en Mac mientras estas haciendo click). Si tu código es correcto, el texto en la lista incrementa su tamaño como se muestra en la Figura 4.
   
   ^{Figura 4. La función  JavaScript ha cambiado el tamaño de texto en la lista}

Puedes revisar  tu código contra el archivo de ejemplo change_02.html.

Detectando errores cuando el script no funciona.

Todos cometemos errores y se tiende a cometer más cuando estamos aprendiendo algo nuevo. Si hay algún problema con tu código, el script usualmente falla sin indicar que es lo que esta mal. Todos los navegadores recientes tienen herramientas integradas que ayudan a depurar  tu código. Puedes encontrarlas en los siguientes lugares:

• Internet Explorer 8 o superior: Presiona F12 para abrir las Herramientas de Desarrollador y selecciona la pestaña llamada consola.
• Firefox 4 o superior: Selecciona el menú Web Developer > Consola de Errores
• Google Chrome: Selecciona herramientas > Herramientas de Desarrollador
• Safari: Habilita el menú Desarrollador seleccionado el menú Editar > Preferencias (Windows) o Safari > Preferencias (MAC). En la pestaña Avanzadas, selecciona “Mostrar el menú Desarrollo en la barra de menús”. Cierre preferencias. Ahora seleccione Desarrollo > Mostrar Consola de Errores.
• Opera: Seleccionar Herramientas > Avanzadas > Consola de Errores.

Agrega un error deliberado en la función changeFontSize() para ver el mensaje de error generado por la consola de errores del navegador.

1. Cambia el nombre del método getElementById() usando una D mayúscula quedando así:var list = document.getElementByID(‘fruits’);
2. Guarda la página y recárgala en el navegador (no es posible usar la vista Live de Dreamweaver para depurar).
3. Haz click en el link del párrafo final. El tamaño de letra de la lista no cambia.
4. Abre la consola de error de tu navegador. Debes ver un mensaje similar al de la Figura 5.
   
   ^{Figura 5. La consola de errores identifica el error y su localización en la página.}

   El  mensaje de error generado por el navegador puede estar escrito distinto de la figura 5, pero básicamente dirán la misma cosa: getElelementID() no es una función válida. Como principiante, entender el porqué de los errores no es siempre sencillo, pero uno de los errores más comunes es escribir incorrectamente el nombre de una función o método.

   Recuerda siempre que JavaScript es sensible a mayúsculas y minúsculas.

   Todas las consolas de errores, excepto el de Opera, proveen un link, que te lleva a la línea que contiene el error.

En el siguiente artículo de esta serie revisaremos el uso de condiciones, entraremos a detalle en el paso de argumentos y veremos la importancia de los arreglos y ciclos.

[Descargar código de ejemplo]

Recuerda que en Activ tenemos un curso de jQuery con el cual podrás llevar tu conocimiento de JavaScript a otro nivel.

Este artículo lo compartimos aquí bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, la versión original puedes encontrarla en este link.