Esta es la segunda parte de introducción a JavaScript. En la primera entrega revisamos los conceptos básicos de programación con JavaScript y en esta segunda entrega revisaremos el uso de condiciones, entraremos a detalle en el paso de argumentos y veremos la importancia de los arreglos y ciclos. Los códigos de ejemplo usados en este artículo están disponibles para su descarga al final del post.

Uso de condiciones para tomar decisiones.

La función changeFontSize() incrementa el tamaño del texto, pero la única manera de regresarlo a su tamaño original es recargando la pagina. Para mejorar la función se necesita detectar el tamaño actual del texto para que así la función pueda decidir a que tamaño hacer el cambio.

Al igual que otros lenguajes de programación, JavaScript usa condiciones para determinar la acción a tomar. Colocas la condición entre paréntesis precedido de la palabra clave if. El código asociado con la condición es puesto dentro de un par de símbolo de llaves después de la condición. En pseudo código, se vería así:

Si la condición es verdadera, el código es ejecutado. Si es falsa, el código es ignorado. Cuando la condición es falsa puedes usar la palabra clave else para ejecutar código alternativo. De nuevo en pseudo código, se vería así:

También es posible usar condiciones anidadas como:

Nota: Es posible que algunos scripts omitan las llaves después de una condición. Esto solo funciona cuando hay un solo comando después de la condición pero es recomendable siempre usar usa llaves pues ayudan a entender la lógica del código.

La condición es siempre una comparación, donde dos valores pueden ser iguales o que uno sea más grande que el otro. La siguiente tabla lista los principales operadores de comparación.

Tabla1. Operadores de Comparación

Operador	Nombre	Ejemplo	Significado
==	Igualdad	a == b	a y b deben tener el mismo valor.
!=	Desigualdad	a != b	a y b tienen diferentes valores.
>	Mayor que	a > b	a es mayor que b.
>=	Mayor o igual que	a >= b	a es mayor o igual que b.
<	Menor que	a < b	a es menor que b.
<=	Menor o igual que	a <= b	a es menor o igual que b.

Trabajemos con la función changeFontSize() para cambiar el tamaño de letra.

1. Usa el archivo change_02.html
2. Usa el elemento style para cambiar el valor de la propiedad CSS, esto es como si modificaras su valor directamente en su declaración. Dado que la lista de frutas no tiene un estilo definido, no es posible obtener el valor del tamaño de fuente con la carga inicial, por lo que revisamos si el contenido de list.style.fontSize es una cadena vacía para saber si tiene o no algún valor. Podemos indentificar una cadena vacía cin un par de comillas simples. Nuestra función quedará de la siguiente manera:
   function changeFontSize()<br/> {<br/> var list = document.getElementById('fruits');<br/> if (list.style.fontSize == '' || list.style.fontSize == '16px')<br/> {<br/> list.style.fontSize = '20px';<br/> }<br/> else<br/> {<br/> list.style.fontSize = '16px';<br/> }<br/> }<br/>

   1 2 3 4 5 6 7 8 9 10 11 12

   function changeFontSize()<br/> {<br/>       var list = document.getElementById('fruits');<br/>       if (list.style.fontSize == '' || list.style.fontSize == '16px')<br/>       {<br/>             list.style.fontSize = '20px';<br/>       }<br/>       else<br/>       {<br/>             list.style.fontSize = '16px';<br/>       }<br/> }<br/>

   Si list.style.fontSize no tiene valor se le asigna 20px, de lo contrario, se asigna 16px.
   Nota: Uno de los errores mas comunes es usar un solo signo de igual en la comparativa en lugar de dos. Un solo signo de igual sirve para asignar valores mientras que los dos signos sirven para comprar.

3. Guarda la pagina y pruébala. Cuando des un click en el link por primera vez, el tamaño del texto incrementará. Haz click de nuevo para regresar al tamaño original.
4. Al hacer click de nuevo nada pasa, por que la propiedad list-style.fontSize ya no es una cadena vacia, es 16px. La manera más simple de corregir esto es usando el operador de desigualdad de la siguiente manera:
   function changeFontSize()<br/> {<br/> var list = document.getElementById('fruits');<br/> if (list.style.fontSize != '20px')<br/> {<br/> list.style.fontSize = '20px';<br/> }<br/> else<br/> {<br/> list.style.fontSize = '16px';<br/> }<br/> }

   1 2 3 4 5 6 7 8 9 10 11 12

   function changeFontSize()<br/> {<br/>       var list = document.getElementById('fruits');<br/>       if (list.style.fontSize != '20px')<br/>       {<br/>             list.style.fontSize = '20px';<br/>       }<br/>       else<br/>       {<br/>             list.style.fontSize = '16px';<br/>       }<br/> }

   Si list.style.fontSize no es 20px se establece ese valor, de lo contrario se establece a 16px

5. Guarda el archivo y prueba de nuevo. Ahora cada vez que hagas click en el link cambiara el tamaño de letra entre 16px y 20px. El código completo esta en change_03.html

Usando operadores lógicos con condiciones

Aunque hay soluciones más simples al problema de changeFontSize(), es siempre necesario probar como funcionan las múltiples condiciones. Dicha solución es posible usando operadores lógicos, listados en la siguiente tabla
Tabla 2. Operadores Lógicos

Operador	Nombre	Descripción
&&	AND	Ambas condiciones deben ser verdaderas. Si la condición de la izquierda falla entonces la condición de la derecha jamas es evaluada.
||	OR	Alguna condición debe ser verdadera. La condición de la derecha será evaluada si la condición de la izquierda es falsa
!	NOT	Cuando es antepuesta a algún valor true/false invierte su valor. Por lo que un valor verdadero se vuelve «No verdadero», en otras palabras, falso.

La función changeFontSize() ha sido rescrito en el archivo change_04.html para demostrar el uso del operador lógico OR. El código es el siguiente:

La condición ahora evalúa si list.style.fontSize es una cadena vacía o es igual a 16px. Si pruebas change_04.html veras como cambia el tamaño de letra entre 16px y 20px.
Nota: Es necesario repetir la condición en ambos lados del operador, no es posible evaluar el valor de la siguiente manera.

A diferencia de los operadores lógicos AND y OR, el operador lógico NOT es usado con una sola condición. Esto es extremadamente funcional pues JavaScript trata implícitamente los valores como true o false tal como se explica en la siguiente sección.

Entendiendo los valores true y false

Los valores true y false son conocidos como Booleanos (en honor al matemático inglés del siglo XIX, George Boole, cuyo trabajo es considerado como la base de la lógica de las computadoras moderna). JavaScript tiene dos valores booleanos, las palabras claves true y false, que pueden ser mayúsculas y minúsculas.

Los operadores de comparación en la Tabla 1 producen un resultado Booleano, o técnicamente hablando, regresan un true o false. Además JavaScript soporta el concepto de valores que son implícitamente true o false conocidos también como implícitamente verdaderos (truthy) o implícitamente falsos (falsy).

JavaScript considera los siguientes valores como falsos:

• Variables no definidas.
• Variables sin valores (null).
• El resultado de un cálculo aritmético que no sea un número (NaN).
• 0 o ‘0’.
• Cadenas de texto vacías (‘ ’)

Todos los demás valores, a parte de la palabra clave false, son considerados como true.

Nota: Si las palabras clave true y false van entre comillas se convierten en cadenas de texto (strings), por lo que al evaluarlas siempre serán verdaderas (true), como ‘false’, solo si la cadena esta vacía será false.

Cuando la página con la función changeFontSize() se carga por primera vez, list.style.fontSize regresa una cadena vacía, es decir un valor falso. Esto significa que podemos rescribir la función en el archivo change_04.html (El código final esta en change_05.html).

Anteponer a list.style.fontSize con el operador lógico NOT (símbolo de exclamación) expresaría: “si list.style.fontSize es falsa trátala como verdadera”.

Usar el operador lógico NOT con valores implícitos de true y false es muy común en JavaScript. Es usado frecuentemente en valores donde se esperan sean true, Por ejemplo, puedes tener una variable llamada “marcada” y puedes evaluarla como (!marcada) “si no esta marcada”.

Pasar argumentos a una función

La función changefontSize()es bastante limitada en su uso pues solo aplica cambios la lista de frutas. Para reusarlo con otros elementos, es necesario pasar un ID como argumento a la función.

1. Continua trabajando con el mismo archivo o puedes usar change_03.html
2. Escribe ID entre los paréntesis en la definición de la función changeFontSize(). Esto le indica a la función que espera un argumento o parámetro llamado ID. El parámetro es similar a una variable, por tanto no se encuentra entre comillas y sigue las mismas reglas para nombrar una variable (Ver “Fundamentos de JavaScript” en la primera parte de este tutorial)
3. En la primer línea dentro de la función elimina el texto ‘fruits’ dentro de los paréntesis de getElementById(), y remplázalo con id. Asegúrate de eliminar las comillas, pues se estará usando el valor que representa id como valor recibido en el argumento de la función. Las dos primeras líneas de la función deberán verse de la siguiente manera:
   function changeFontSize(id)<br/> {<br/> var list = document.getElementById(id);

   1 2 3

   function changeFontSize(id)<br/>       {<br/>       var list = document.getElementById(id);

   Esto tiene el efecto de pasar a getElementById() cualquier valor que se pasa como argumento a changeFontSize().

4. Escribe ‘fruits’ dentro de los paréntesis de changeFontSize() en el link que dispara el evento onClick. El link debe verse de la siguiente manera:
   < a href="javascript:;" onClick="changeFontSize('fruits')">

   1	< a href="javascript:;" onClick="changeFontSize('fruits')">

   Nota: El atributo onClick pone changeFontSize() entre comillas dobles, por lo que debe usarse comillas simples alrededor del id frutas. Al usar comillas dentro de una cadena de texto, siempre se debe usar comillas del tipo opuesto a las que contienen a la cadena de texto. Si no se puede evitar usar el mismo tipo de comillas, deben ser precedidas por una diagonal invertida (\”)

5. Guarda la página y pruébala. La función debe actuar de la misma manera.
6. Borra la letra “s” al final de la palabra fruits, guarda la página y pruébala de nuevo. Ya no funciona dado que la función no puede encontrar un elemento con el ID fruit.
7. Agrega de nuevo la letra “s” al final de fruit y guarda la página. Puedes comparar tu código si es necesario con change_06.html

Usando arreglos y ciclos

La función changeFontSize() cambia entre dos tamaños de letra. El cambio final que haremos en este viaje relámpago de JavaScript será iterar a través de diferentes tamaños. Para ello debemos almacenar los tamaños en un arreglo y utilizar un ciclo o bucle para pasar por todos los tamaños. Esta sección será algo más compleja que las anteriores así que tomatelo con calma.

Creando un arreglo

Un arreglo es una colección de datos relacionados que pueden ser referenciados a través de una sola variable. Hay dos maneras de crear un arreglo. Una es usando el constructor Array() de la siguiente manera:

La otra manera es creando lo que se conoce como una literal de la siguiente manera:

Usar los corchetes para crear un arreglo es rápido y es más usado actualmente.

Cada elemento, elemento del arreglo, es numerado automáticamente. Para referirse a cada elemento del arreglo, se pone el número del elemento entre corchetes después del nombre del arreglo. En casi todos los lenguajes de programación la numeración comienza en cero, por lo que friends[1] hace referencia al segundo elemento del arreglo, en este caso a Dick, y friends[0] lo hará al primer elemento.

Usando un ciclo o bucle con el arreglo

La razón usual para almacenar elementos en un arreglo es para realizar una misma tarea con cada uno de sus elementos o para seleccionarlos. Los ciclos son usados para iterar a través de cada elemento de un arreglo. JavaScript tiene varios tipos de ciclos o bucles, para este tutorial solo usaremos el ciclo for.
En pseudo código un ciclo for se vería así:

Entre los paréntesis hay tres instrucciones separadas por punto y coma:

• Inicialización: Esto inicializa una o más variables para ser usadas en el ciclo. La variable, o variables, inicializada usualmente mantienen el conteo del número de veces que el ciclo se ejecuta.
• Condición: Esto establece la condición que determinará hasta cuando se ejecutará el ciclo, usualmente al terminar de recorrer un arreglo.
• Incremento: Esto incrementa la variable o variables que llevan el conteo cada vez que se ejecuta el ciclo.

Todos los arreglos tienen una propiedad length (tamaño) que indica el número de elementos que tiene un arreglo. El siguiente código obtiene este dato del arreglo friends:

Hay 3 elementos en el arreglo friends, por lo que numFriends vale 3.

Dado que la numeración de los elementos de un arreglo comienza en cero, debes establecer que la condición es válida siempre que el contador sea menor que el tamaño del arreglo. La variable contador te permitirá acceder a cada elemento en turno del arreglo de la siguiente manera:

La primera vez se ejecuta el ciclo, y la variable i vale 0, lo que hace que friends[i] sea equivalente a friends[0]. El valor de i es incrementado en uno dando acceso al siguiente elemento del arreglo, friends[1]. Luego el contador se incrementa nuevamente ahora a 2 dando acceso a friends[2]. En el siguiente ciclo el contador se incrementa nuevamente pero como el valor de i ya no es menor que 3, entonces el ciclo se detiene.

Ciclo a través de un arreglo de tamaños de letra

Ya con esta información es tiempo de hacer frente a al versión final de la función changeFontSize(). Este ejercicio reúne muchas características de JavaScript, incluyendo la declaración de múltiples variables, creación de un arreglo, ciclos a través de un arreglo, lógica condicional, cálculo aritmético simple y unir valores como una cadena de texto.

1. Continua trabajando con el mismo archivo o puedes usar change_06.html
2. El código que controla el tamaño de letra necesita ser cambiado considerablemente. Por tanto, elimina los bloques de condiciones. Debes dejar el código de la siguiente manera:
   
   function changeFontSize(id)<br/> {<br/> var list = document.getElementById(id);<br/> }

   1 2 3 4

   function changeFontSize(id)<br/> {<br/>       var list = document.getElementById(id);<br/> }

3. La función necesita usar varias variables. Muchos scripts declaran las variables cuando se necesitan, lo que hace que la declaración de variables sea muy dispersa a través del código haciendo que sea difícil su mantenimiento. Es recomendable declarar todas las variables al comienzo de la función. Puedes declarar cada variable en comandos diferentes comenzando con la palabra clave var y terminando con un punto y coma. Otra manera de hacer esta declaración es una lista de variables separadas por comas. Esta es la forma en que lo haremos.

   Elimina el punto y coma después de getElementById(id), y remplázalo con una coma. Ahora crea una nueva línea y agrega una sangría de manera que el código quede alineado con la palabra list. La declaración de las nuevas variables debe verse de la siguiente manera:

   function changeFontSize(id)<br/> {<br/> var list = document.getElementById(id),<br/> fontSize = list.style.fontSize,<br/> sizes = [16, 20, 24, 28],<br/> len = sizes.length,<br/> i;<br/> }

   1 2 3 4 5 6 7 8

   function changeFontSize(id)<br/> {<br/>       var list = document.getElementById(id),<br/>           fontSize = list.style.fontSize,<br/>           sizes = [16, 20, 24, 28],<br/>           len = sizes.length,<br/>           i;<br/> }

   Esto almacena el valor de list.style.fontSize en la variable fontSize. También crea una variable llamada sizes que contiene 4 numeros y almacena el tamaño del arreglo en la variable len. Finalmente crea una variable contador llamada i, pero no le asigna ningún valor.

   No es indispensable indentar el código, pero hace más fácil su lectura. Esta es solo una de esas raras ocasiones cuando se inserta una nueva línea antes del punto y coma y que no genera errores en el código. La coma al final de cada línea indica al motor de JavaScript que es una lista de variables. También debiste notar que los números no están entre comillas pues JavaScript trata a los números diferente que a las cadenas de texto.

4. Cuando la página carga por primera vez, list.style.fontSize no tiene ningún valor, por tanto es necesario usar una condición a parte para establecer el tamaño del texto la primera vez que se ejecuta la función. Ahora tu código debe ver así:
   function changeFontSize(id)<br/> {<br/> var list = document.getElementById(id),<br/> fontSize = list.style.fontSize,<br/> sizes = [16, 20, 24, 28],<br/> len = sizes.length,<br/> i;<br/><br/> if (!fontSize)<br/> {<br/> list.style.fontSize = sizes[1] + 'px';<br/> }<br/> }

   1 2 3 4 5 6 7 8 9 10 11 12

   function changeFontSize(id)<br/> {<br/>       var list = document.getElementById(id),<br/>           fontSize = list.style.fontSize,<br/>           sizes = [16, 20, 24, 28],<br/>           len = sizes.length,<br/>           i;<br/><br/>       if (!fontSize)<br/>       {<br/>             list.style.fontSize = sizes[1] + 'px';<br/>       }<br/> }

   Aquí se hace uso del operador lógico NOT con fontSize. Si fontSize no tiene un valor, JavaScript evalúa dicha condición como falsa. El operador lógico NOT reversa el significado como true, por lo que el código entre llaves se ejecuta la primera vez que la función es disparada.

   JavaScript usa el signo de mas (+) tanto para sumar como para unir texto, por lo que la línea de código dentro de las llaves toma el valor del segundo elemento del arreglo, en este caso 20, y agrega el texto ‘px’. Este nuevo valor (20px) es asignado a list.style.fontSize.

   Probablemente te preguntaras por que necesitas usar list.style.fontSize cuando has creado la varibale fontSize. Esto es por que fontSize solo almacena el valor existente. Para cambiar el tamaño del texto en la página es necesario asignar el valor al objeto style de la lista.

5. Ahora necesitas saber que hacer cuando la función es disparada muchas veces. La variable fontSize contiene el tamaño actual. Por tanto es necesario hacer un ciclo a través del arreglo para encontrar una coincidencia con el tamaño actual y cambiar la fuente al siguiente tamaño. Sin embargo, cuando llegas al final del arreglo ya no hay un siguiente tamaño. Es necesario regresar al primer tamaño de nuevo. Corrijamos el código como sigue y después lo explicamos con más detalle.
   function changeFontSize(id)<br/> {<br/> var list = document.getElementById(id),<br/> fontSize = list.style.fontSize,<br/> sizes = [16, 20, 24, 28],<br/> len = sizes.length,<br/> i;<br/> if (!fontSize)<br/> {<br/> list.style.fontSize = sizes[1] + 'px';<br/> }<br/> else<br/> {<br/> for (i = 0; i &lt; len; i++)<br/> {<br/> if (i == len - 1)<br/> {<br/> list.style.fontSize = sizes[0] + 'px';<br/> }<br/> else if (fontSize == sizes[i] + 'px')<br/> {<br/> list.style.fontSize = sizes[i + 1] + 'px';<br/> break;<br/> }<br/> }<br/> }<br/> }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   function changeFontSize(id)<br/> {<br/>       var list = document.getElementById(id),<br/>       fontSize = list.style.fontSize,<br/>       sizes = [16, 20, 24, 28],<br/>       len = sizes.length,<br/>       i;<br/>       if (!fontSize)<br/>       {<br/>             list.style.fontSize = sizes[1] + 'px';<br/>       }<br/>       else<br/>       {<br/>             for (i = 0; i &lt; len; i++)<br/>             {<br/>                   if (i == len - 1)<br/>                   {<br/>                         list.style.fontSize = sizes[0] + 'px';<br/>                   }<br/>                   else if (fontSize == sizes[i] + 'px')<br/>                   {<br/>                         list.style.fontSize = sizes[i + 1] + 'px';<br/>                         break;<br/>                   }<br/>             }<br/>       }<br/> }

   El ciclo for dentro de las bloque else contiene otro grupo de condiciones. La primer condición comprueba si el contador es igual al valor de la variable len menos uno, en otras palabras, 3. Hay 4 elementos en el arreglo sizes. Contando desde cero, el elemento final es sizes[3]. Si es así, no hay más elementos en el arreglo. Por tanto, el código toma el valor del tamaño del texto desde el primer elemento del arreglo (sizes[0]).

   Si el ciclo no esta en el último elemento del arreglo, la segunda condición es evaluada. Se comprueba si el elemento actual más ‘px’ coincide con el valor de fontSize. Si no coincide, el código es ignorado y el ciclo se vuelve a ejecutar hasta encontrar una coincidencia. Cuando esto sucede. Se construye una cadena de texto con el siguiente elemento del arreglo sizes y el ciclo ya no es requerido por lo que se agrega la palabra clave break para detenerlo.

6. Guarda la página y pruébala en un navegador. Cada vez que des un click en el link, el texto crecerá hasta llegar a su máximo. La siguiente vez que des click, regresará a su tamaño original. Puedes revisar tu código si es necesario contra el archivo change_07.html

¿A dónde ir desde aqui?

Este tutorial te ha mostrado muchos de los conceptos principales de JavaScript, pero esto es solo un acercamiento a un vasto tema. Se ha diseñado un articulo próximo a publicarse, donde se revisan los principios básicos de JQuery. La ventaja de usar JQuery es que suaviza las inconsistencias entre los navegadores y oculta gran parte de la complejidad que hace que muchos diseñadores web no aprendan JavaScript.

Para aprender JavaScript en detalle puedes revisar esta excelente guía del Mozilla Developer Network

También hay una amplia seria de artículos en la sección de “Habilidades Fundamentales de JavaScript” del Web Standards Curriculum gestionado por Opera.

[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.