JavaScript es un simple, poderoso y popular lenguaje de programación que está integrado en los navegadores web. Aprender JavaScript es especialmente útil si eres diseñador web y ya sabes HTML y CSS, porque es usado para hacer páginas web interactivas. Sin embargo, JavaScript no está limitado a hacer páginas web interactivas; puedes también usarlo para programación del lado del servidor utilizando un framework como Node.js.
En este tutorial aprenderás algunos conceptos básicos de JavaScript, incluyendo dos conceptos de programación básica -cálculos y variables-. Si quieres aprender a hacer sitios web interactivos. Usando JavaScript, necesitas aprender los conceptos centrales de la programación. Usando HTML y JavaScript, puedes cambiar el contenido de elementos HTML en respuesta a eventos del usuario, como hacer clic en un botón.
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 más simple de JavaScript puede ser de una sola línea, mientras que los grandes programas pueden ser de miles de líneas. La tradición de la programación es que el primer programa que aprendes es uno que muestra el mensaje: Hello World. El código siguiente es un ejemplo de un programa JavaScript de Hello World envuelto en unas pocas líneas de código HTML, que permiten que funcione en un navegador web como una página web válida:
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <title>JavaScript Test</title> <script> alert('Hello World!'); </script> |
En el ejemplo de arriba, el código JavaScript es el que está entre el <script> y </script>. Esta línea 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 estás familiarizado con HTML, puedes estar preguntándote 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 Guía de estilo de Google, que recomienda dejar fuera las etiquetas opcionales.
Para ejecutar este programa, sigue estos pasos:
- Copia las cinco líneas de código y pégalas en un editor de texto (como Dreamweaver o Notepad)
- Guarda el archivo como test.html
- Abre el archivo usando tu navegador favorito
- Un mensaje que dice Hello World! aparece en cuanto se carga la página
- Si lo deseas, puedes editar test.html para cambiar el mensaje que aparece en la caja de mensaje, luego guarda el código y haz clic en F5 mientras tu navegador está activo para actualizar la página.
Observa que la declaración de alert se termina con un punto y coma. En JavaScript, el punto y coma es opcional -a diferencia de lenguajes de programación como C y Java-. Sin embargo, ya que hay pocos casos donde no poner punto y coma causa problemas, se recomienda ponerlo después de cada comando.
Otra forma de escribir el programa Hello World es mostrar texto directamente en nuestra página web. Puedes hacerlo utilizando el siguiente código:
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <title>JavaScript Test</title> <script> document.body.innerHTML = 'Hello World'; </script> |
Cuando esta página web cargue, el navegador primero mostrará el texto: Hello Activ. Después, el navegador instantáneamente ejecutará la línea de JavaScript entre las etiquetas script, que reemplazan el texto con la frase: Hello World. Esto sucede rápidamente, el cambio no es aún visible para el usuario. Esto funciona por qué document.body.innerHTML es un poco de código especial de JavaScript que accede a los contenidos de la página web entera. Utilizando document.body.innerHTML = ‘Hello World’ se establece el contenido de la página web para Hello World. Esto puede parecer confuso al principio, pero una vez que comprendas los conceptos básicos de JavaScript comenzará a tomar sentido.
Realización de cálculos
Calcular valores en JavaScript es similar a calcular sumas en una aplicación de hoja de cálculo como Microsoft Excel. Por ejemplo, el símbolo * representa la multiplicación 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 más avanzado.
Todas las reglas de matemáticas regulares sobre orden de funcionamiento y uso de paréntesis también se aplican en JavaScript. Así, por ejemplo, cálculos de multiplicación (*) o división (/) ocurren antes de la suma (+) y resta (-). El siguiente ejemplo de código JavaScript muestra el resultado de un cálculo simple en una caja de alerta:
|
1 |
alert(32 + 9 * 1.8); |
El cálculo de arriba convierte la temperatura actual en Nueva Zelanda de Celsius a Fahrenheit y muestra la respuesta en una caja de alerta. Si quieres más detalles de cálculos en JavaScript, revisa las lecciones 2-5 de Los Vengadores del Código.
En común práctica, es inusual realizar cálculos JavaScript con números fijos. Generalmente hablando, es más probable que uses cálculos JavaScript basado en valores ingresados por el visitante del sitio web. En la siguiente sección se mostrará cómo 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, podrías utilizar esta línea de código:
|
1 |
prompt('What is the temperature in Celcius?'); |
El código anterior muestra una caja de diálogo, que visualiza una pregunta. La caja de diálogo contiene un campo de texto para que el visitante ingrese su respuesta, junto con un botón de aceptar y cancelar. Para ver lo que aparece en la caja de diálogo, pega el código dentro de las etiquetas de script de la página HTML de la sección anterior y ejecuta el código 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 sólo sirven al probar programas JavaScript. Mostrar cajas alert estilizadas requiere mucho código HTML, CSS y JavaScript. Afortunadamente, los desarrolladores web ya han creado cajas alert y han publicado en línea su código para que puedas utilizarlo gratis! Si quieres ver algunos ejemplos, consulta la página Interfaz de Usuario en el sitio de JQuery UI. Usar esta herramienta requiere un poco de conocimiento de JavaScript para implementar las cajas de diálogo en tus propios proyectos, pero es un gran recurso.
Creando variables
En la sección anterior aprendiste como hacer una pregunta a un usuario, pero ¿cómo vas a almacenar y a usar su respuesta? Es donde entran las variables. Las variables son marcadores de posición utilizadas para almacenar información que se recibe y después se modifica en un programa. Por ejemplo, en las siguientes líneas de código se crea una variable llamada temperatura y se le asigna un valor numérico 12:
|
1 |
var temperature = 12; |
La línea de código para crear una variable comienza con var (que es la abreviatura de variable). Esto es seguido por el nombre de la variable, a continuación el símbolo =, seguido por el valor a almacenar. En matemáticas = significa que dos cosas tienen el mismo valor, como 4*3=2*6=12. En programación JavaScript, el signo igual significa que el valor es asignado. Si lees la línea de código anterior en Español regular, dirías: Crea una variable denominada temperatura y asígnale el valor de 12.
Para almacenar una respuesta que un visitante ingresa en una caja de diálogo, puedes usar el siguiente código:
|
1 2 3 |
var temperature = prompt('What is the temperature in celcius?'); alert(32 + temperature * 27); |
Este código muestra una caja de diálogo 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 línea de código 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 botón de Cancel, un valor especial llamado null es almacenado en la variable. Para saber más acerca de valores null, revisa la lección 17 de Vengadores del Código.
Variables Constantes
JavaScript no solo utiliza variables para almacenar un dato ingresado por el usuario. También emplea variables para almacenar valores constantes que nunca cambian. El siguiente código de ejemplo utiliza una variable constante (nombrada en mayúsculas):
|
1 2 3 4 5 |
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 línea crea una variable constante que almacena el número de libras en un kilogramo. La siguiente línea solicita al usuario que ingrese su peso y almacena el valor en la variable nombrada weight. La línea final calcula el peso en libras, y entonces muestra el resultado del cálculo en una caja alert.
Observa que la variable que almacena el número de libras en un kilogramo utiliza letras mayúsculas. Cuando escribes JavaScript, no es necesario que nombres las variables con letras mayúsculas, pero la recomendación. Cuando veas variables nombradas todas en mayúsculas, puedes decir a simple vista que el valor almacenado en la variable es constante y no va a cambiar.
Las variables constantes hacen el código JavaScript más fácil de leer. Mientras que solamente podrías escribir 2.2, lo cual requiere que escribas menos, los nombres que asignes a las variables constantes harán que tu código sea más fácil de entender. Por ejemplo, si lees el código alert(4+12*27); es improbable saber que se está calculando. Sin embargo, el siguiente código hace la función más obvia:
|
1 2 3 4 5 6 7 |
var MONTHS_IN_YEAR = 12; var myAgeInYears = 27; var monthsSinceMyLastBirthday = 4; alert(monthsSinceBirthday + myAgeInYears * MONTHS_IN_YEAR); |
El código del ejemplo de arriba calcula el número de meses desde tu nacimiento.
Nota: Aprender acerca de otras razones para usar variables, consulta la lección 5 de Vengadores del Código.
Variables String
Las variables no solo están diseñadas para almacenar números. Las variables también pueden almacenar secuencia de caracteres, que en la programación son llamadas string. Una variable que almacena texto es llamada variable string. En código JavaScript, una secuencia de caracteres dentro de comillas se nombra string.
La siguiente línea de código crea una variable string llamada name y se le asigna el texto Mike.
|
1 |
var name = 'Mike'; |
El siguiente código solicita al visitante ingresar su nombre y entonces muestra un mensaje que lo saluda por su nombre:
|
1 2 3 |
var name = prompt('What is your name?'); alert('Hello ' + name + ', nice to meet you'); |
En JavaScript el símbolo de mas (+) tiene dos usos. Cuando se utiliza con números literales y variables numéricas se agregan los números, así 2+4 es 6. Pero cuando el símbolo mas (+) se utiliza con strings, se unen entre sí, como este: ‘Code’ + ‘Avengers’ es ‘CodeAvengers’.
Combinando cálculos con strings
Simplemente mostrando la respuesta a un cálculo en una caja alert no es muy útil. Es más útil mostrar también el texto que explica el número al visitante. En el siguiente código de ejemplo se entiende mejor como mostrar una cadena de texto:
|
1 2 3 4 5 |
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 líneas en este código son igual a las anteriores. En esta versión, se incluye un string antes del cálculo en la tercera línea. Cuando ejecutas este código e ingresas el peso (73) aparecerá la caja alert y mostrará la declaración: Su peso en libras es 160.6.
Cuando revisas la tercera línea, recuerda que la multiplicación (*) 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 línea realmente almacena un string y no un número. El dato ingresado por el usuario en la caja de diálogo siempre será almacenado como un string. En este ejemplo, el cálculo funciona de todas maneras, porque cuando el símbolo de multiplicación (*) es usado entre un string y un número (u otro string), automáticamente el string se convierte en un número. Así que ’12’ * 5 ó ’12’ * ‘5’ ó 12 * 5 evaluará al número 60. Si ejecutas la línea: ‘blah’ * 5 y ‘Five’ * 5, ambos cálculos fallan y el resultado sería un valor especial JavaScript llamado NaN, que significa: no es un número.
Las cosas funcionan un poco diferente con el símbolo de suma (+). Si un signo de mas (+) es usado con un número y un string, ellos se unen entre sí, independientemente de si o no se puede convertir el string en un número. Así que ’12’ + 5 ó ’12’ + ‘5’ ó ’12’ + 5 proporcionará todo el resultado del string ‘125’. Cuando escribes código JavaScript, asegurate de tener en cuenta este comportamiento.
Nota: Para obtener una mejor comprensión de agregar strings y números, sigue el código de la lección 9 de los Vengadores del Código.
Cambiando el color de fondo basado en el dato que ingresa el usuario
En esta sección, aprenderás cómo usar mensajes y variables para cambiar el color de fondo de una página web. El siguiente código de ejemplo crea una página web con dos botones. Si el visitante da clic en el botón Change Color, aparece una caja de diálogo que solicita al visitante ingresar un color de fondo. Después de que el visitante ingresa un color da clic en OK, el color de fondo de la página web es actualizado. Si el visitante da clic en el botón Undo Color, el color de fondo de la página cambia al color anterior. Intenta ejecutar el código siguiente en un navegador para probar los botones.
|
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 28 29 30 31 |
<!doctype> <script> var oldColor = 'black'; function changeColor() { oldColor = document.body.style.backgroundColor; var newColor = prompt('Enter a color:'); 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 estés familiarizado con la palabra función. En JavaScript, una función es una palabra clave del inicio de una sección de código que se ejecuta cuando se produce un evento, como dar clic en un botón. El código debajo de la función 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 código document.body.style.backgroundColor puede acceder al color de fondo actual de la página.
A donde ir desde aquí
Los ejemplos de código en este tutorial muestra cómo ejecutar un programa básico de JavaScript en un navegador usando una plantilla mínima de HTML. También aprendiste a realizar cálculos y trabajar con variables. Observamos cómo utilizar variables para almacenar los datos ingresados por los visitantes en cajas de diálogo, y luego utilizar el valor en el cálculo. Si te gustaría practicar estos conceptos, revisa las lecciones de la 1 a la 10 de los Vengadores del Código.
Si prefieres, empezar a aprender cómo utilizar las declaraciones if y bucles siguiendo con el resto de lecciones en el curso de JavaScript Nivel 1 de los Vengadores del Código. Visita el sitio de los Vengadores del Código y conviértete en un superhéroe de codificación!
La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.
Gracias, mejor manera de iniciar no tuve.
Ahora a seguir practicando y mejorando.