Professional Documents
Culture Documents
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.
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
<!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.
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
Otra forma de escribir el programa Hello World es mostrar texto directamente en nuestra pgina web. Puedes hacerlo
<!doctype html>
<title>JavaScript Test</title>
<script>
</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
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
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
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
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
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?');
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
Nota: Si el visitante da clic en el botn de Cancel, un valor especial llamado null es almacenado en la variable. Para
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):
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
var monthsSinceMyLastBirthday = 4;
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.
La siguiente lnea de cdigo crea una variable string llamada name y se le asigna el texto Mike.
El siguiente cdigo solicita al visitante ingresar su nombre y entonces muestra un mensaje que lo saluda por su
nombre:
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:
que explica el nmero al visitante. En el siguiente cdigo de ejemplo se entiende mejor como mostrar una cadena de
texto:
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
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
evaluar al nmero 60. Si ejecutas la lnea: blah * 5 y Five * 5, ambos clculos fallan y el resultado sera un valor
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
Nota: Para obtener una mejor comprensin de agregar strings y nmeros, sigue el cdigo de la leccin 9 de los
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>
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>
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
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
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
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.
frecuentemente para programar juegos, telfonos mviles y otros dispositivos como Amazon Kindle, Aunque Java
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,
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
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
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
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
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).
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).
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:
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
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:
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
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.
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
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
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
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.
referencia de la lista desordenada de frutas. Esto introduce tres caractersticas importantes de JavaScript: Objetos,
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
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.
7.
</p>
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
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.
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
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
es recargando la pagina. Para mejorar la funcin se necesita detectar el tamao actual del texto para que as la funcin
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
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)
de lo contrario
{
else
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
La condicin es siempre una comparacin, donde dos valores pueden ser iguales o que uno sea ms grande que el
3. function changeFontSize()
4. {
7. {
8. list.style.fontSize = '20px';
9. }
10. else
11. {
13. }
14. }
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:
18. {
21. {
23. }
24. else
25. {
28. }
las mltiples condiciones. Dicha solucin es posible usando operadores lgicos, listados en la siguiente tabla
&& AND Ambas condiciones deben ser verdaderas. Si la condicin de la izquierda falla entonces la
! NOT Cuando es antepuesta a algn valor true/false invierte su valor. Por lo que un valor
La funcin changeFontSize() ha sido rescrito en el archivo change_04.html para demostrar el uso del operador lgico
function changeFontSize()
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
Nota: Es necesario repetir la condicin en ambos lados del operador, no es posible evaluar el valor de la siguiente
manera.
//ESTO NO FUNCIONAR
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
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
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
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
4. function changeFontSize(id)
5. {
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
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
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'];
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,
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.
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
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
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
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)
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
fontSize = list.style.fontSize,
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
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)
fontSize = list.style.fontSize,
len = sizes.length,
i;
if (!fontSize)
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
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
function changeFontSize(id)
fontSize = list.style.fontSize,
len = sizes.length,
i;
if (!fontSize)
else
if (i == len - 1)
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
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
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
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