You are on page 1of 28

JavaScript para principiantes

JavaScript es un simple, poderoso y popular lenguaje de programacin que est integrado en los navegadores web.

Aprender JavaScript es especialmente til si eres diseador web y ya sabes HTML y CSS, porque es usado para hacer

pginas web interactivas. Sin embargo, JavaScript no est limitado a hacer pginas web interactivas; puedes tambin

usarlo para programacin del lado del servidor utilizando un framework como Node.js.

En este tutorial aprenders algunos conceptos bsicos de JavaScript, incluyendo dos conceptos de programacin

bsica -clculos y variables-. Si quieres aprender a hacer sitios web interactivos. Usando JavaScript, necesitas

aprender los conceptos centrales de la programacin. Usando HTML y JavaScript, puedes cambiar el contenido de

elementos HTML en respuesta a eventos del usuario, como hacer clic en un botn.

Escribir un simple programa de Hola Mundo con JavaScript


Los programas con JavaScript son una secuencia de declaraciones o comandos que son ejecutados por un navegador

en el orden que fueron escritos. El programa ms simple de JavaScript puede ser de una sola lnea, mientras que los

grandes programas pueden ser de miles de lneas. La tradicin de la programacin es que el primer programa que

aprendes es uno que muestra el mensaje: Hello World. El cdigo siguiente es un ejemplo de un programa JavaScript

de Hello World envuelto en unas pocas lneas de cdigo HTML, que permiten que funcione en un navegador web como

una pgina web vlida:

<!doctype html>

<title>JavaScript Test</title>

<script>

alert('Hello World!');

</script>

En el ejemplo de arriba, el cdigo JavaScript es el que est entre el <script> y </script>. Esta lnea contiene un

comando alert de JavaScript que indica al navegador web que muestre un mensaje que contiene el texto entre las

comillas. Observa que en JavaScript, las comillas alrededor del mensaje pueden ser simples o dobles, ambas son

igual.

Si ests familiarizado con HTML, puedes estar preguntndote por qu el ejemplo no contiene etiquetas <html>, <head>

y <body>. En realidad, estas etiquetas son opcionales en HTML4 y HTML5. Los ejemplos de este tutorial siguen

la Gua de estilo de Google, que recomienda dejar fuera las etiquetas opcionales.

Para ejecutar este programa, sigue estos pasos:


1. Copia las cinco lneas de cdigo y pgalas en un editor de texto (como Dreamweaver o Notepad)
2. Guarda el archivo como test.html
3. Abre el archivo usando tu navegador favorito
4. Un mensaje que dice Hello World! aparece en cuanto se carga la pgina
5. Si lo deseas, puedes editar test.html para cambiar el mensaje que aparece en la caja de mensaje, luego guarda el
cdigo y haz clic en F5 mientras tu navegador est activo para actualizar la pgina.

Observa que la declaracin de alert se termina con un punto y coma. En JavaScript, el punto y coma es opcional -a

diferencia de lenguajes de programacin como C y Java-. Sin embargo, ya que hay pocos casos donde no poner punto

y coma causa problemas, se recomienda ponerlo despus de cada comando.

Otra forma de escribir el programa Hello World es mostrar texto directamente en nuestra pgina web. Puedes hacerlo

utilizando el siguiente cdigo:

<!doctype html>

<title>JavaScript Test</title>

<script>

document.body.innerHTML = 'Hello World';

</script>

Cuando esta pgina web cargue, el navegador primero mostrar el texto: Hello Activ. Despus, el navegador

instantneamente ejecutar la lnea de JavaScript entre las etiquetas script, que reemplazan el texto con la frase: Hello

World. Esto sucede rpidamente, el cambio no es an visible para el usuario. Esto funciona por qu

document.body.innerHTML es un poco de cdigo especial de JavaScript que accede a los contenidos de la pgina web

entera. Utilizando document.body.innerHTML = Hello World se establece el contenido de la pgina web para Hello

World. Esto puede parecer confuso al principio, pero una vez que comprendas los conceptos bsicos de JavaScript

comenzar a tomar sentido.

Realizacin de clculos
Calcular valores en JavaScript es similar a calcular sumas en una aplicacin de hoja de clculo como Microsoft Excel.

Por ejemplo, el smbolo * representa la multiplicacin como en JavaScript y Excel. Sin embargo, hay algunas

diferencias. Por ejemplo, en Excel 2^4 significa 2 a la potencia de 4, lo que equivale a 16. En JavaScript, ^ significa

exclusivamente OR, pero eso es un tema para un tutorial ms avanzado.

Todas las reglas de matemticas regulares sobre orden de funcionamiento y uso de parntesis tambin se aplican en

JavaScript. As, por ejemplo, clculos de multiplicacin (*) o divisin (/) ocurren antes de la suma (+) y resta (-). El

siguiente ejemplo de cdigo JavaScript muestra el resultado de un clculo simple en una caja de alerta:

alert(32 + 9 * 1.8);
El clculo de arriba convierte la temperatura actual en Nueva Zelanda de Celsius a Fahrenheit y muestra la respuesta

en una caja de alerta. Si quieres ms detalles de clculos en JavaScript, revisa las lecciones 2-5 de Los Vengadores

del Cdigo.

En comn prctica, es inusual realizar clculos JavaScript con nmeros fijos. Generalmente hablando, es ms probable

que uses clculos JavaScript basado en valores ingresados por el visitante del sitio web. En la siguiente seccin se

mostrar cmo hacerlo.

Trabajando con variables


Una forma para que puedas obtener la entrada de datos de un visitante en el sitio implica el uso del comando prompt

de JavaScript. Por ejemplo, podras utilizar esta lnea de cdigo:

prompt('What is the temperature in Celcius?');

El cdigo anterior muestra una caja de dilogo, que visualiza una pregunta. La caja de dilogo contiene un campo de

texto para que el visitante ingrese su respuesta, junto con un botn de aceptar y cancelar. Para ver lo que aparece en

la caja de dilogo, pega el cdigo dentro de las etiquetas de script de la pgina HTML de la seccin anterior y ejecuta el

cdigo en tu navegador.

Las cajas se muestran con los comandos prompt y alert. Estas se muestran de forma diferente en cada navegador.

Como resultado, generalmente slo sirven al probar programas JavaScript. Mostrar cajas alert estilizadas requiere

mucho cdigo HTML, CSS y JavaScript. Afortunadamente, los desarrolladores web ya han creado cajas alert y han

publicado en lnea su cdigo para que puedas utilizarlo gratis! Si quieres ver algunos ejemplos, consulta la pgina

Interfaz de Usuario en el sitio de JQuery UI. Usar esta herramienta requiere un poco de conocimiento de JavaScript

para implementar las cajas de dilogo en tus propios proyectos, pero es un gran recurso.
Creando variables
En la seccin anterior aprendiste como hacer una pregunta a un usuario, pero cmo vas a almacenar y a usar su

respuesta? Es donde entran las variables. Las variables son marcadores de posicin utilizadas para almacenar

informacin que se recibe y despus se modifica en un programa. Por ejemplo, en las siguientes lneas de cdigo se

crea una variable llamada temperatura y se le asigna un valor numrico 12:

var temperature = 12;

La lnea de cdigo para crear una variable comienza con var (que es la abreviatura de variable). Esto es seguido por el

nombre de la variable, a continuacin el smbolo =, seguido por el valor a almacenar. En matemticas = significa que

dos cosas tienen el mismo valor, como 4*3=2*6=12. En programacin JavaScript, el signo igual significa que el valor es

asignado. Si lees la lnea de cdigo anterior en Espaol regular, diras: Crea una variable denominada temperatura y

asgnale el valor de 12.

Para almacenar una respuesta que un visitante ingresa en una caja de dilogo, puedes usar el siguiente cdigo:
var temperature = prompt('What is the temperature in celcius?');

alert(32 + temperature * 27);

Este cdigo muestra una caja de dilogo con la pregunta. Donde el visitante ingresa una respuesta y da clic en OK, la

respuesta es almacenada en la variable de temperatura Fahrenheit. La siguiente lnea de cdigo utiliza la variable para

calcular el equivalente de la temperatura y mostrar el valor en una caja alert.

Nota: Si el visitante da clic en el botn de Cancel, un valor especial llamado null es almacenado en la variable. Para

saber ms acerca de valores null, revisa la leccin 17 de Vengadores del Cdigo.

Variables Constantes
JavaScript no solo utiliza variables para almacenar un dato ingresado por el usuario. Tambin emplea variables para

almacenar valores constantes que nunca cambian. El siguiente cdigo de ejemplo utiliza una variable constante

(nombrada en maysculas):

var KILOS_TO_POUNDS = 2.2;

var weight = prompt('What is your weight in kilos?');

alert(POUNDS_TO_KILOS * weight);

En el ejemplo de arriba, la primera lnea crea una variable constante que almacena el nmero de libras en un

kilogramo. La siguiente lnea solicita al usuario que ingrese su peso y almacena el valor en la variable nombrada

weight. La lnea final calcula el peso en libras, y entonces muestra el resultado del clculo en una caja alert.

Observa que la variable que almacena el nmero de libras en un kilogramo utiliza letras maysculas. Cuando escribes

JavaScript, no es necesario que nombres las variables con letras maysculas, pero la recomendacin. Cuando veas

variables nombradas todas en maysculas, puedes decir a simple vista que el valor almacenado en la variable es

constante y no va a cambiar.

Las variables constantes hacen el cdigo JavaScript ms fcil de leer. Mientras que solamente podras escribir 2.2, lo

cual requiere que escribas menos, los nombres que asignes a las variables constantes harn que tu cdigo sea ms

fcil de entender. Por ejemplo, si lees el cdigo alert(4+12*27); es improbable saber que se est calculando. Sin

embargo, el siguiente cdigo hace la funcin ms obvia:

var MONTHS_IN_YEAR = 12;

var myAgeInYears = 27;

var monthsSinceMyLastBirthday = 4;

alert(monthsSinceMyLastBirthday + myAgeInYears * MONTHS_IN_YEAR);

El cdigo del ejemplo de arriba calcula el nmero de meses desde tu nacimiento.


Nota: Aprender acerca de otras razones para usar variables, consulta la leccin 5 de Vengadores del Cdigo.

Variables String
Las variables no solo estn diseadas para almacenar nmeros. Las variables tambin pueden almacenar secuencia

de caracteres, que en la programacin son llamadas string. Una variable que almacena texto es llamada variable string.

En cdigo JavaScript, una secuencia de caracteres dentro de comillas se nombra string.

La siguiente lnea de cdigo crea una variable string llamada name y se le asigna el texto Mike.

var name = 'Mike';

El siguiente cdigo solicita al visitante ingresar su nombre y entonces muestra un mensaje que lo saluda por su

nombre:

var name = prompt('What is your name?');

alert('Hello ' + name + ', nice to meet you');

En JavaScript el smbolo de mas (+) tiene dos usos. Cuando se utiliza con nmeros literales y variables numricas se

agregan los nmeros, as 2+4 es 6. Pero cuando el smbolo mas (+) se utiliza con strings, se unen entre s, como este:

Code + Avengers es CodeAvengers.

Combinando clculos con strings


Simplemente mostrando la respuesta a un clculo en una caja alert no es muy til. Es ms til mostrar tambin el texto

que explica el nmero al visitante. En el siguiente cdigo de ejemplo se entiende mejor como mostrar una cadena de

texto:

var KILOS_TO_POUNDS = 2.2;

var weight = prompt('What is your weight in kilos?');

alert('Your weight in pounds is ' + POUNDS_TO_KILOS * weight);

Las primeras dos lneas en este cdigo son igual a las anteriores. En esta versin, se incluye un string antes del clculo

en la tercera lnea. Cuando ejecutas este cdigo e ingresas el peso (73) aparecer la caja alert y mostrar la

declaracin: Su peso en libras es 160.6.

Cuando revisas la tercera lnea, recuerda que la multiplicacin (*) siempre se calcula antes de la suma (+) en

JavaScript. En este ejemplo, el navegador primero calcula POUNDS_TO_KILOS*weight, que en mi caso es 160.6.

Luego se une la respuesta con el string para crear la frase Your weight in pounds is 160.6 y muestras el texto en una

caja alert.

Otro punto importante a considerar es que la variable weight en la segunda lnea realmente almacena un string y no un

nmero. El dato ingresado por el usuario en la caja de dilogo siempre ser almacenado como un string. En este
ejemplo, el clculo funciona de todas maneras, porque cuando el smbolo de multiplicacin (*) es usado entre un string

y un nmero (u otro string), automticamente el string se convierte en un nmero. As que 12 * 5 12 * 5 12 * 5

evaluar al nmero 60. Si ejecutas la lnea: blah * 5 y Five * 5, ambos clculos fallan y el resultado sera un valor

especial JavaScript llamado NaN, que significa: no es un nmero.

Las cosas funcionan un poco diferente con el smbolo de suma (+). Si un signo de mas (+) es usado con un nmero y

un string, ellos se unen entre s, independientemente de si o no se puede convertir el string en un nmero. As que 12

+ 5 12 + 5 12 + 5 proporcionar todo el resultado del string 125. Cuando escribes cdigo JavaScript, asegurate

de tener en cuenta este comportamiento.

Nota: Para obtener una mejor comprensin de agregar strings y nmeros, sigue el cdigo de la leccin 9 de los

Vengadores del Cdigo.

Cambiando el color de fondo basado en el dato que ingresa el


usuario
En esta seccin, aprenders cmo usar mensajes y variables para cambiar el color de fondo de una pgina web. El

siguiente cdigo de ejemplo crea una pgina web con dos botones. Si el visitante da clic en el botn Change Color,

aparece una caja de dilogo que solicita al visitante ingresar un color de fondo. Despus de que el visitante ingresa un

color da clic en OK, el color de fondo de la pgina web es actualizado. Si el visitante da clic en el botn Undo Color, el

color de fondo de la pgina cambia al color anterior. Intenta ejecutar el cdigo siguiente en un navegador para probar

los botones.

<!doctype>

<script>

var oldcolor = 'black';

function changeColor()
{
oldColor = document.body.style.backgroundColor;
var NewColor = 'red';
document.body.style.backgroundColor = NewColor;
}

function undoColor()
{
var newColor = oldColor;
oldColor = document.body.style.backgroundColor;
document.body.style.backgroundColor = newColor;
}

</script>

<button onclick ='changeColor()'> Change Color </button>


<button onclick ='undoColor()'> Undo Color </button>
Si eres nuevo en JavaScript, puede que no ests familiarizado con la palabra funcin. En JavaScript, una funcin es

una palabra clave del inicio de una seccin de cdigo que se ejecuta cuando se produce un evento, como dar clic en un

botn. El cdigo debajo de la funcin changeColor(){ almacena el color de fondo actual en la variable oldColor, y

entonces solicita al visitante que ingrese un nuevo color de fondo, que es utilizado para establecer el nuevo color de

fondo. El cdigo document.body.style.backgroundColor puede acceder al color de fondo actual de la pgina.

A donde ir desde aqu


Los ejemplos de cdigo en este tutorial muestra cmo ejecutar un programa bsico de JavaScript en un navegador

usando una plantilla mnima de HTML. Tambin aprendiste a realizar clculos y trabajar con variables. Observamos

cmo utilizar variables para almacenar los datos ingresados por los visitantes en cajas de dilogo, y luego utilizar el

valor en el clculo. Si te gustara practicar estos conceptos, revisa las lecciones de la 1 a la 10 de los Vengadores del

Cdigo.

Si prefieres, empezar a aprender cmo utilizar las declaraciones if y bucles siguiendo con el resto de lecciones en el

curso de JavaScript Nivel 1 de los Vengadores del Cdigo. Visita el sitio de los Vengadores del Cdigo y convirtete en

un superhroe de codificacin!

La versin original de este artculo est publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y

adaptado en nuestro blog por Margarita Garca.

Introduccin a JavaScript Parte 1


JavaScript es uno de los lenguajes ms importantes usados en el desarrollo web. Tiene muchos usos que van desde la

revisin de datos ingresados en formularios hasta widgets interactivos, como paneles con pestaas, acordeones y

mens desplegables. Tambin es usado para crear galeras de fotos y para buscar nueva informacin de un web

server para actualizar el contenido sin necesidad de recargar la pgina. Combinado con otras tecnologas es

comnmente conocido como Ajax.


Junto con HTML y CSS, el conocimiento de JavaScript es una habilidad clave que cualquier persona involucrada en la

construccin de sitios web debera de saber. Sin embargo muchos diseadores web no lo hacen. JavaScript tiene una

reputacin de ser muy difcil; y los diseadores grficos a menudo insisten en que su rol es disear 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 ms fcil de usar gracias a libreras como jQuery.

Este es el primero de una serie de artculos diseados para ayudarte a comenzar con JavaScript y jQuery. En ellos se

describen las caractersticas bsicas 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, telfonos mviles 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 pgina para que puedan ser eliminados, actualizados, poder

crear nuevos elementos, cambiar los estilos de los existentes o extraer informacin de ellos. Por ejemplo, se pueden

leer los datos ingresados en un formulario, realizar un clculo y desplegar el resultado. Tambin se pueden enviar una

peticin a un web server para mas informacin y con ella actualizar parte de la pgina 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 genealgico. Si el HTML de tu pgina es invlido o muy complejo, el cdigo JavaScript no podr navegar

por el rbol. Del mismo modo, si rompes reglas simples como no usar el mismo ID ms de una vez en una pgina,

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 automtica. Por ejemplo el

evento load se dispara cuando se termina de cargar la pgina en el browser, y es frecuentemente usado para para

inicializar mens desplegables y otros widgets. Otros eventos son disparados por el usuario, el ms comn, cuando

comienza el evento click al pulsar el usuario sobre el botn principal del mouse o hace un tap sobre alguna pantalla

tctil. Otros eventos comunes son el mouseover y el mouseout cuando el usuario pasa el cursor sobre algn elemento

y hace un submit al enviar un formulario.

Los eventos se estn disparando todo el tiempo. Un evento se dispara cada vez que se mueve el mouse, se hace scroll

de una pgina 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 pgina 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 funcin que lo controla entra en accin y realiza las tareas designadas, como abrir o cerrar un men

desplegable, enviar un formulario o cambiar el estilo de un elemento.

Creando una funcin


En lugar de hablar de trminos abstractos, echemos un vistazo a JavaScript en accin.

Como su nombre lo indica, una funcin hace algo. Se trata de una serie de comandos que realizan cualquier tarea o

tareas que le indiques. La manera ms comn de definir una funcin es usando la palabra clave function seguida del

nombre de la funcin, un par de parntesis y un bloque de cdigo agrupado entre smbolo de llaves. T puedes darle

casi cualquier nombre a una funcin, siempre y cuando comience con una letra, un guion bajo (_), o un smbolo de

dlar ($). Adems el nombre no debe contener espacios ni guiones medios. JavaScript es sensible a maysculas y

minsculas, por lo que es comn usar una letra mayscula al inicio de cada palabra a partir de la segunda, (formato

conocido como notacin camel case); por ejemplo changeFontSize.

Para mantener lo ms simple posible, el siguiente cdigo solo cambia el tamao de letra de una lista desordenada.

Puedes encontrar el cdigo 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 cdigo por ti mismo. Los archivos de ejemplo puedes descargarlos de aqu.


1. Abre change_start.html. La pgina contiene un encabezado <h1>, una lista desordenada y un prrafo (ver Figura 1).
La lista desordenada tiene IDs de frutas.

Figura 1. Una funcin de JavaScript ser usada para cambiar el tamao de letra de la lista

2. En la vista de cdigo, inserta una nueva lnea justo despus del cierre de la etiqueta </head> y agrega la
etiqueta<script>. Si la pgina tiene un HTML5 DOCTYPE, ya no ser necesario agregar la
propiedad type=text/javascript. Los navegadores automticamente asumen que el cdigo dentro del
bloque <script> es JavaScript.
3. Antes de agregar cdigo JavaScript, es una buena idea cerrar el bloque <script>. Por tanto, deja una lnea 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 combinacin de caracteres dentro del script.
4. Dentro del bloque <script> escribe el siguiente cdigo:
5. function changeFontSize() {

6.

Esto define una funcin llamada changeFontSize(). Generalmente puedes pasar informacin como argumentos a la

funcin JavaScript. Los argumentos van entre parntesis despus del nombre de la funcin. Esta funcin no recibe

argumentos, pero los parntesis deben ser usados. El cuerpo de la funcin va entre smbolo de llaves y es lo que

agregaremos a continuacin.
7. Escribe dentro de las llaves var list = document. Escribe inmediatamente despus un punto. Tan pronto lo hagas,
versiones recientes de Dreamweaver te mostrar una serie de sugerencias de cdigo (ver Figura 2).

Figura 2. Dreamweaver despliega sugerencias de cdigo para JavaScript

8. Escribe la letra g. Esto traer como sugerencia getElementById(). Pulsa la tecla Enter para insertar el cdigo.
9. Dreamweaver presenta otra sugerencia notificando que la funcin getElementById() espera un ID como argumento.
Escribe comillas,(no importa si son dobles o simples). Si usas Dreamweaver CS5.5 automticamente te presentar una
lista de los IDs disponibles en la pgina (ver Figura 3).

Figura 3. Dreamweaver CS5.5 muestra las sugerencias de IDs disponibles

10. En Dreamweaver CS5.5, pulsa la tecla Enter para insertar el ID fruits. Despus escribe el parntesis que cierra
seguido de un punto y coma (;).

Si estas usando otro programa, necesitas completar el cdigo manualmente. En ambos casos debers tener el cdigo
de la siguiente manera en la definicin de tu funcin:

11. function changeFontSize() {

12.
13. var list = document.getElementById('fruits');

14.

15. }

La lnea de cdigo que acabas de escribir usa la palabra clave var para crear una variable llamada list, la cual

almacena la referencia al elemento de la pgina con el ID fruits. La referencia a fruits de obtiene de un mtodo de

JavaScript llamado document.getElementById();

Nota: Los mtodos son tan esenciales como las funciones, excepto que los mtodos pertenecen a los objetos. No

dejes que la terminologa te confunda. Si ayuda, piensa que los mtodos son un tipo especial de funciones.
16. Inserta una nueva lnea seguida de la ltima que pusiste y agrega el siguiente cdigo:

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

Si estas usando una versin reciente de Dreamweaver, te habrs dado cuenta que las sugerencias de cdigo se lanzan

cada vez que escribes un punto. Lo que hace esta lnea de cdigo es cambiar el tamao de letra en el elemento list, en

otras palabras la lista desordenada con los IDs de frutas.

Probablemente reconocers 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 mayscula la letra que segua.

La definicin completa de la funcin debera verse algo as:


function changeFontSize() {

var list = document.getElementById('fruits');

list.style.fontSize = '20px';

18. Guarda la pgina y prubala en un browser. Nada pasa nada. Aunque se halla definido la funcin, no har nada hasta
que se all disparado el evento. Podrs crear un manejador de eventos dentro de poco, pero primero echa un vistazo
a algunas caractersticas bsicas de JavaScript en este cdigo que acabas de escribir.

Fundamentos de JavaScript
Si ya has tenido experiencia con otros lenguajes de programacin, la mayor parte de esta seccin te ser muy familiar.

En beneficio de los principiantes, explicare la terminologa bsica. Al principio parecer montono, pero har que resto

sea fcil de entender.


La primer lnea dentro de la funcin changeFontSize() crea una variable llamada list. Las variables son una parte

importante de todos los lenguajes de programacin. 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 funcin, siempre se debe usar la palabra clave var. Haciendo esto le

dices JavaScript la variable a usar dentro de la funcin. Omitir la palabra clave var puede producir resultados

impredecibles en scripts ms complejos.

La misma regla aplica tanto para variables como para funciones, como:
El nombre debe comenzar con una letra, guion bajo o el smbolo de dlar.
No se permiten espacios ni guiones medios.

El valor es asignado a la variable usando el smbolo igual (=). El valor a la derecha del signo es asignado a la variable

en la izquierda.

La primer lnea en la funcin changeFontSize() usa document.getElementById(fruits) para asignar a la variable la

referencia de la lista desordenada de frutas. Esto introduce tres caractersticas importantes de JavaScript: Objetos,

notacin de punto y pasar argumentos a una funcin.

En trminos simples, un objeto es una variable que contiene cero o ms valores conocidos como propiedades y

mtodos. Una propiedad es similar a una variable y un mtodo es esencialmente lo mismo que una funcin. Puedes

acceder a propiedades y mtodos de un objeto usando la notacin de punto. El objeto va primero seguido de un punto

y despus de la propiedad o el mtodo. En este caso, getElementById() es un mtodo 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 parntesis despus del nombre del mtodo. Esto se conoce como paso de

argumentos. La razn por la que el argumento va entre comillas es por que JavaScript lo trata como una cadena de

texto. En trminos de programacin 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 lnea en la funcin changeFontSize() lleva la notacin 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 tamao. En otras palabras, la segunda lnea 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. Tcnicamente hablando, el punto y coma es

opcional, por que JavaScript automticamente trata el final de cada lnea que contiene un comando como el final del

comando. Si accidentalmente truncas la lnea de cdigo, JavaScript trata esto como un comando completo

ocasionando que el script falle. Terminar siempre los comandos con punto y coma hace ms fcil de encontrar los

errores.
Suficiente teora por ahora. Regresemos al cdigo y hagamos que la funcin haga algo.

Usando la funcin.
El camino ms simple para usar la funcin es ligndola a un elemento usando algn atributo de HTML como onClick.
1. Contina trabajando con el cdigo del archivo anterior o usa el archivo change_01.html como punto de inicio.
2. Selecciona el texto del ltimo prrafo 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 cdigo e inserta un espacio antes de cerrar la etiqueta <a> y escribe onClick=changeFontSize(). El
prrafo final debe verse de la siguiente manera:

4. <p>

5.

6. <a href="javascript:;" onClick="changeFontSize()">Change list font size</a>.

7.
</p>

8. Guarda la pgina y crgala en algn navegador o activa la vista Live en Dreamweaver.


9. Haz click en el link de el ltimo prrafo (si estas en la vista Live, pulsa la tecla Ctrl en Windows o Command en Mac
mientras estas haciendo click). Si tu cdigo es correcto, el texto en la lista incrementa su tamao como se muestra en
la Figura 4.

Figura 4. La funcin JavaScript ha cambiado el tamao de texto en la lista

Puedes revisar tu cdigo contra el archivo de ejemplo change_02.html.

Detectando errores cuando el script no funciona.


Todos cometemos errores y se tiende a cometer ms cuando estamos aprendiendo algo nuevo. Si hay algn problema

con tu cdigo, el script usualmente falla sin indicar que es lo que esta mal. Todos los navegadores recientes tienen

herramientas integradas que ayudan a depurar tu cdigo. Puedes encontrarlas en los siguientes lugares:
Internet Explorer 8 o superior: Presiona F12 para abrir las Herramientas de Desarrollador y selecciona la pestaa
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 pestaa Avanzadas, selecciona Mostrar el men Desarrollo en la barra de mens. Cierre preferencias.
Ahora seleccione Desarrollo > Mostrar Consola de Errores.
Opera: Seleccionar Herramientas > Avanzadas > Consola de Errores.

Agrega un error deliberado en la funcin changeFontSize() para ver el mensaje de error generado por la consola de

errores del navegador.


1. Cambia el nombre del mtodo getElementById() usando una D mayscula quedando as:var list =
document.getElementByID(fruits);
2. Guarda la pgina y recrgala en el navegador (no es posible usar la vista Live de Dreamweaver para depurar).
3. Haz click en el link del prrafo final. El tamao 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 localizacin en la pgina.

El mensaje de error generado por el navegador puede estar escrito distinto de la figura 5, pero bsicamente dirn la

misma cosa: getElelementID() no es una funcin vlida. Como principiante, entender el porqu de los errores no es

siempre sencillo, pero uno de los errores ms comunes es escribir incorrectamente el nombre de una funcin o mtodo.

Recuerda siempre que JavaScript es sensible a maysculas y minsculas.

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

En el siguiente artculo 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.


Introduccin a JavaScript Parte 2
Esta es la segunda parte de introduccin a JavaScript. En la primera entrega revisamos los conceptos bsicos de

programacin 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 cdigos de ejemplo usados en este artculo

estn disponibles para su descarga al final del post.

Uso de condiciones para tomar decisiones.


La funcin changeFontSize() incrementa el tamao del texto, pero la nica manera de regresarlo a su tamao original

es recargando la pagina. Para mejorar la funcin se necesita detectar el tamao actual del texto para que as la funcin

pueda decidir a que tamao hacer el cambio.

Al igual que otros lenguajes de programacin, JavaScript usa condiciones para determinar la accin a tomar. Colocas

la condicin entre parntesis precedido de la palabra clave if. El cdigo asociado con la condicin es puesto dentro de

un par de smbolo de llaves despus de la condicin. En pseudo cdigo, se vera as:


if(condicin)

Cdigo a ejecutar si la condicin es verdadera.

Si la condicin es verdadera, el cdigo es ejecutado. Si es falsa, el cdigo es ignorado. Cuando la condicin es falsa

puedes usar la palabra clave else para ejecutar cdigo alternativo. De nuevo en pseudo cdigo, se vera as:
Si(condicin)

Cdigo a ejecutar si la condicin es verdadera.

de lo contrario
{

Cdigo a ejecutar si la condicin es falsa.

Tambin es posible usar condiciones anidadas como:


Si(primer condicin)

Cdigo a ejecutar si la primer condicin es verdadera.

de lo contrario si (segunda condicin)

Cdigo a ejecutar si la primer condicin es falsa pero la segunda verdadera

else

Cdigo a ejecutar si las condiciones anteriores han sido falsas

Nota: Es posible que algunos scripts omitan las llaves despus de una condicin. Esto solo funciona cuando hay un

solo comando despus de la condicin pero es recomendable siempre usar usa llaves pues ayudan a entender la

lgica del cdigo.

La condicin es siempre una comparacin, donde dos valores pueden ser iguales o que uno sea ms grande que el

otro. La siguiente tabla lista los principales operadores de comparacin.

Tabla1. Operadores de Comparacin

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 a >= b a es mayor o igual que b.


que

< Menor que a<b a es menor que b.

<= Menor o igual a <= b a es menor o igual que b.


que

Trabajemos con la funcin changeFontSize() para cambiar el tamao 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 declaracin. Dado que la lista de frutas no tiene un estilo definido, no es posible obtener el valor del tamao de
fuente con la carga inicial, por lo que revisamos si el contenido de list.style.fontSize es una cadena vaca para saber si
tiene o no algn valor. Podemos indentificar una cadena vaca cin un par de comillas simples. Nuestra funcin quedar
de la siguiente manera:

3. function changeFontSize()

4. {

5. var list = document.getElementById('fruits');

6. if (list.style.fontSize == '' || list.style.fontSize == '16px')

7. {

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

9. }
10. else

11. {

12. list.style.fontSize = '16px';

13. }

14. }

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.
15. Guarda la pagina y prubala. Cuando des un click en el link por primera vez, el tamao del texto incrementar. Haz
click de nuevo para regresar al tamao original.
16. Al hacer click de nuevo nada pasa, por que la propiedad list-style.fontSize ya no es una cadena vacia, es 16px. La
manera ms simple de corregir esto es usando el operador de desigualdad de la siguiente manera:

17. function changeFontSize()

18. {

19. var list = document.getElementById('fruits');

20. if (list.style.fontSize != '20px')

21. {

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

23. }

24. else

25. {

26. list.style.fontSize = '16px';


27. }

28. }

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


29. Guarda el archivo y prueba de nuevo. Ahora cada vez que hagas click en el link cambiara el tamao de letra entre 16px
y 20px. El cdigo completo esta en change_03.html

Usando operadores lgicos con condiciones


Aunque hay soluciones ms simples al problema de changeFontSize(), es siempre necesario probar como funcionan

las mltiples condiciones. Dicha solucin es posible usando operadores lgicos, listados en la siguiente tabla

Tabla 2. Operadores Lgicos

Operador Nombre Descripcin

&& AND Ambas condiciones deben ser verdaderas. Si la condicin de la izquierda falla entonces la

condicin de la derecha jamas es evaluada.

|| OR Alguna condicin debe ser verdadera. La condicin de la derecha ser evaluada si la

condicin de la izquierda es falsa

! NOT Cuando es antepuesta a algn valor true/false invierte su valor. Por lo que un valor

verdadero se vuelve No verdadero, en otras palabras, falso.

La funcin changeFontSize() ha sido rescrito en el archivo change_04.html para demostrar el uso del operador lgico

OR. El cdigo es el siguiente:

function changeFontSize()

var list = document.getElementById('fruits');

if (list.style.fontSize == '' || list.style.fontSize == '16px')

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

else

list.style.fontSize = '16px';

La condicin ahora evala si list.style.fontSize es una cadena vaca o es igual a 16px. Si pruebas change_04.html

veras como cambia el tamao de letra entre 16px y 20px.

Nota: Es necesario repetir la condicin en ambos lados del operador, no es posible evaluar el valor de la siguiente

manera.
//ESTO NO FUNCIONAR

if (list.style.fontSize == '' || '16px')

A diferencia de los operadores lgicos AND y OR, el operador lgico NOT es usado con una sola condicin. Esto es

extremadamente funcional pues JavaScript trata implcitamente los valores como true o false tal como se explica en la

siguiente seccin.
Entendiendo los valores true y false
Los valores true y false son conocidos como Booleanos (en honor al matemtico ingls del siglo XIX, George Boole,

cuyo trabajo es considerado como la base de la lgica de las computadoras moderna). JavaScript tiene dos valores

booleanos, las palabras claves true y false, que pueden ser maysculas y minsculas.

Los operadores de comparacin en la Tabla 1 producen un resultado Booleano, o tcnicamente hablando, regresan

un true o false. Adems JavaScript soporta el concepto de valores que son implcitamente true o false conocidos

tambin como implcitamente verdaderos (truthy) o implcitamente falsos (falsy).

JavaScript considera los siguientes valores como falsos:


Variables no definidas.
Variables sin valores (null).
El resultado de un clculo aritmtico que no sea un nmero (NaN).
0 o 0.
Cadenas de texto vacas ( )

Todos los dems 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 sern verdaderas (true), como false, solo si la cadena esta vaca ser false.
Cuando la pgina con la funcin changeFontSize() se carga por primera vez, list.style.fontSize regresa una cadena

vaca, es decir un valor falso. Esto significa que podemos rescribir la funcin en el archivo change_04.html (El cdigo

final esta en change_05.html).


function changeFontSize()

var list = document.getElementById('fruits');

if (!list.style.fontSize || list.style.fontSize == '16px')

list.style.fontSize = '20px';

else

list.style.fontSize = '16px';

Anteponer a list.style.fontSize con el operador lgico NOT (smbolo de exclamacin) expresara: si list.style.fontSize es

falsa trtala como verdadera.

Usar el operador lgico NOT con valores implcitos de true y false es muy comn 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 funcin


La funcin 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 funcin.


1. Continua trabajando con el mismo archivo o puedes usar change_03.html
2. Escribe ID entre los parntesis en la definicin de la funcin changeFontSize(). Esto le indica a la funcin que espera
un argumento o parmetro llamado ID. El parmetro 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 lnea dentro de la funcin elimina el texto fruits dentro de los parntesis de getElementById(), y
remplzalo con id. Asegrate de eliminar las comillas, pues se estar usando el valor que representa id como valor
recibido en el argumento de la funcin. Las dos primeras lneas de la funcin debern verse de la siguiente manera:

4. function changeFontSize(id)

5. {

6. var list = document.getElementById(id);

Esto tiene el efecto de pasar a getElementById() cualquier valor que se pasa como argumento a changeFontSize().
7. Escribe fruits dentro de los parntesis de changeFontSize() en el link que dispara el evento onClick. El link debe verse
de la siguiente manera:
8. < 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 (\)


9. Guarda la pgina y prubala. La funcin debe actuar de la misma manera.
10. Borra la letra s al final de la palabra fruits, guarda la pgina y prubala de nuevo. Ya no funciona dado que la funcin
no puede encontrar un elemento con el ID fruit.
11. Agrega de nuevo la letra s al final de fruit y guarda la pgina. Puedes comparar tu cdigo si es necesario con
change_06.html

Usando arreglos y ciclos


La funcin changeFontSize() cambia entre dos tamaos de letra. El cambio final que haremos en este viaje relmpago

de JavaScript ser iterar a travs de diferentes tamaos. Para ello debemos almacenar los tamaos en un arreglo y

utilizar un ciclo o bucle para pasar por todos los tamaos. Esta seccin ser algo ms compleja que las anteriores as

que tomatelo con calma.


Creando un arreglo
Un arreglo es una coleccin de datos relacionados que pueden ser referenciados a travs de una sola variable. Hay

dos maneras de crear un arreglo. Una es usando el constructor Array() de la siguiente manera:
var friends = new Array('Tom', 'Dick', 'Harry');

La otra manera es creando lo que se conoce como una literal de la siguiente manera:
var friends = ['Tom', 'Dick', 'Harry'];

Usar los corchetes para crear un arreglo es rpido y es ms usado actualmente.

Cada elemento, elemento del arreglo, es numerado automticamente. Para referirse a cada elemento del arreglo, se

pone el nmero del elemento entre corchetes despus del nombre del arreglo. En casi todos los lenguajes de
programacin la numeracin 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 razn 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 travs de cada elemento de un arreglo. JavaScript

tiene varios tipos de ciclos o bucles, para este tutorial solo usaremos el ciclo for.

En pseudo cdigo un ciclo for se vera as:


for(Inicializacin; Condicin; Incremento)

Cdigo a ejecutar en cada repeticin del ciclo

Entre los parntesis hay tres instrucciones separadas por punto y coma:
Inicializacin: Esto inicializa una o ms variables para ser usadas en el ciclo. La variable, o variables, inicializada
usualmente mantienen el conteo del nmero de veces que el ciclo se ejecuta.
Condicin: Esto establece la condicin 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 (tamao) que indica el nmero de elementos que tiene un arreglo. El

siguiente cdigo obtiene este dato del arreglo friends:


var numFriends = friends.length;

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

Dado que la numeracin de los elementos de un arreglo comienza en cero, debes establecer que la condicin es vlida

siempre que el contador sea menor que el tamao del arreglo. La variable contador te permitir acceder a cada

elemento en turno del arreglo de la siguiente manera:


for (var i = 0; i < numFriends; i++)

haz algo con friends[i]

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 travs de un arreglo de tamaos de letra
Ya con esta informacin es tiempo de hacer frente a al versin final de la funcin changeFontSize(). Este ejercicio

rene muchas caractersticas de JavaScript, incluyendo la declaracin de mltiples variables, creacin de un arreglo,

ciclos a travs de un arreglo, lgica condicional, clculo aritmtico simple y unir valores como una cadena de texto.
Continua trabajando con el mismo archivo o puedes usar change_06.html
El cdigo que controla el tamao de letra necesita ser cambiado considerablemente. Por tanto, elimina los bloques de
condiciones. Debes dejar el cdigo de la siguiente manera:

function changeFontSize(id)

var list = document.getElementById(id);

La funcin necesita usar varias variables. Muchos scripts declaran las variables cuando se necesitan, lo que hace que la
declaracin de variables sea muy dispersa a travs del cdigo haciendo que sea difcil su mantenimiento. Es recomendable
declarar todas las variables al comienzo de la funcin. 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 declaracin es una lista de variables
separadas por comas. Esta es la forma en que lo haremos.

Elimina el punto y coma despus de getElementById(id), y remplzalo con una coma. Ahora crea una nueva lnea y

agrega una sangra de manera que el cdigo quede alineado con la palabra list. La declaracin de las nuevas variables

debe verse de la siguiente manera:


function changeFontSize(id)

var list = document.getElementById(id),

fontSize = list.style.fontSize,

sizes = [16, 20, 24, 28],

len = sizes.length,

i;

}
Esto almacena el valor de list.style.fontSize en la variable fontSize. Tambin crea una variable llamada sizes que

contiene 4 numeros y almacena el tamao del arreglo en la variable len. Finalmente crea una variable contador

llamada i, pero no le asigna ningn valor.

No es indispensable indentar el cdigo, pero hace ms fcil su lectura. Esta es solo una de esas raras ocasiones

cuando se inserta una nueva lnea antes del punto y coma y que no genera errores en el cdigo. La coma al final de

cada lnea indica al motor de JavaScript que es una lista de variables. Tambin debiste notar que los nmeros no estn

entre comillas pues JavaScript trata a los nmeros diferente que a las cadenas de texto.
Cuando la pgina carga por primera vez, list.style.fontSize no tiene ningn valor, por tanto es necesario usar una condicin a
parte para establecer el tamao del texto la primera vez que se ejecuta la funcin. Ahora tu cdigo debe ver as:

function changeFontSize(id)

var list = document.getElementById(id),

fontSize = list.style.fontSize,

sizes = [16, 20, 24, 28],

len = sizes.length,

i;

if (!fontSize)

list.style.fontSize = sizes[1] + 'px';

Aqu se hace uso del operador lgico NOT con fontSize. Si fontSize no tiene un valor, JavaScript evala dicha

condicin como falsa. El operador lgico NOT reversa el significado como true, por lo que el cdigo entre llaves se

ejecuta la primera vez que la funcin es disparada.


JavaScript usa el signo de mas (+) tanto para sumar como para unir texto, por lo que la lnea de cdigo 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 tamao del texto en la pgina es necesario asignar

el valor al objeto style de la lista.


Ahora necesitas saber que hacer cuando la funcin es disparada muchas veces. La variable fontSize contiene el tamao
actual. Por tanto es necesario hacer un ciclo a travs del arreglo para encontrar una coincidencia con el tamao actual y
cambiar la fuente al siguiente tamao. Sin embargo, cuando llegas al final del arreglo ya no hay un siguiente tamao. Es
necesario regresar al primer tamao de nuevo. Corrijamos el cdigo como sigue y despus lo explicamos con ms detalle.

function changeFontSize(id)

var list = document.getElementById(id),

fontSize = list.style.fontSize,

sizes = [16, 20, 24, 28],

len = sizes.length,

i;

if (!fontSize)

list.style.fontSize = sizes[1] + 'px';

else

for (i = 0; i < len; i++)


{

if (i == len - 1)

list.style.fontSize = sizes[0] + 'px';

else if (fontSize == sizes[i] + 'px')

list.style.fontSize = sizes[i + 1] + 'px';

break;

El ciclo for dentro de las bloque else contiene otro grupo de condiciones. La primer condicin 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 ms elementos en el arreglo. Por tanto, el cdigo toma el

valor del tamao del texto desde el primer elemento del arreglo (sizes[0]).

Si el ciclo no esta en el ltimo elemento del arreglo, la segunda condicin es evaluada. Se comprueba si el elemento

actual ms px coincide con el valor de fontSize. Si no coincide, el cdigo 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.
Guarda la pgina y prubala en un navegador. Cada vez que des un click en el link, el texto crecer hasta llegar a su
mximo. La siguiente vez que des click, regresar a su tamao original. Puedes revisar tu cdigo si es necesario contra el
archivo change_07.html

A dnde 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 diseado un articulo prximo a publicarse, donde se revisan los principios bsicos 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 diseadores web no aprendan JavaScript.

Para aprender JavaScript en detalle puedes revisar esta excelente gua del Mozilla Developer Network

Tambin hay una amplia seria de artculos en la seccin de Habilidades Fundamentales de JavaScript del Web

Standards Curriculum gestionado por Opera.

[Descargar cdigo de ejemplo]

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

Este artculo lo compartimos aqu bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported

License, la versin original puedes encontrarla en este link.

You might also like