JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu Sitio Web, (por ejemplo juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudara a comenzar con este lenguaje extraordinario (JavaScript)  y una idea de ¿qué es posible hacer?.

¿Qué es JavaScript realmente?

JavaScript es un robusto lenguaje de programación que puede ser aplicado a un documento HTML y usado para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla .

Puedes hacer casi cualquier cosa con Javascript. Puedes empezar con pequeñas cosas, con carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos, ¡y mucho más!.

JavaScript por si solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:

  • Interfaces de Programación de Aplicaciones del Navegador (APIs) — APIs construidas dentro de los  navegadores que ofrecen funcionalidades como crear dinámicamente contenido HTML y establecer estilos CSS , hasta capturar y manipular un vídeo desde la webcam del usuario, o generar gráficos 3D y muestras de sonido.
  • APIs de Terceros, que permiten a los desarrolladores incorporar funcionalidades en sus sitios de otros proveedores de contenidos como Twitter o Facebook.
  • Marcos de trabajo y librerías de terceras partes que puedes aplicar a tu HTML para que puedas construir y publicar rápidamente sitios y aplicaciones.

Ya que se supone que este artículo es sólo una introducción ligera a JavaScript, no vamos a confundirte en esta etapa hablando en detalle sobre cual es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en nuestra Área de Aprendizaje en MDN, y en el resto del MDN.

Debajo te presentaremos algunos aspectos del núcleo del lenguaje, y también jugarás con unas pocas características del API del navegador.

Ejemplo "Hola Mundo"

La sección de arriba suena realmente emocionante, y debería serlo — JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.

Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS . Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir  JavaScript básico a tu página para crear el ejemplo de "¡Hola Mundo!" (El estandar en los ejemplos basicos de programación.)

Importante: Si no ha estado siguiendo el resto de nuestro curso , descarga este código de ejemplo y úsalo como punto de partida.

  1. Primero, ve a tu sitio de pruebas y crea un nuevo archivo llamado main.js. Guárdalo en tu carpeta scripts.
  2. A continuación, abre tu archivo index.html e introduce lo siguiente en una nueva línea  justo antes de la etiqueta de cierre </body>:
    <script src="scripts/main.js"></script>
  3. Esto hace básicamente el mismo trabajo que el elemento <link> para CSS — aplica el código Javascript a la página, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la página).
  4. Ahora añade el siguiente código al archivo main.js:
    var miTitulo = document.querySelector('h1');
    miTitulo.innerHTML = 'Hello world!';
  5. Ahora asegúrate de que has guardado los archivos HTML y JavaScript, y abre index.html en el navegador. Deberías ver algo así:

Nota: La razón por la que hemos puesto el elemento <script> casi al final del documento HTML es porque el navegador carga el HTML en el orden en que aparece en el archivo. Si se cargara primero Javascript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es a veces la mejor estrategia.

¿Qué ha ocurrido?

El texto de tu cabecera ha sido cambiado por "Hello world!" usando JavaScript. Hicimos esto primero usando la función querySelector() para obtener una referencia a nuestra cabecera, y almacenarla en una variable llamada miTitulo. Esto es muy similar a lo que hicimos con CSS usando selectores — queremos hacer algo con un elemento, así que tenemos que seleccionarlo primero.

Después de eso, establecimos el valor de la propiedad innerHTML de la variable miTitulo (que representa el contenido de la cabecera) como "Hello world!".

Curso intensivo de bases del lenguaje

Vamos a explicar algunas de las funciones básicas del lenguaje JavaScript, para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.

Importante: En este artículo, trata de introducir las lineas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira Descubrir herramientas para el desarrollador del navegador (en inglés).

Variables

Las variables son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave var, seguida del nombre que le quieras dar:

var nombreDeLaVariable;

Nota: Todas las lineas en JS deben acabar en punto y coma, para indicar que es ahí donde termina la línea. Si no los incluyes puedes obtener resultados inesperados.

Nota: Puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver este artículo sobre las reglas existentes.)

Nota: JavaScript distingue entre mayúsculas y minúsculas — miVariable es una variable distinta a mivariable. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.

Tras declarar una variable, puedes asignarle un valor:

nombreDeLaVariable = 'Bob';

Puedes hacer las dos cosas en la misma línea si lo necesitas:

var nombreDeLaVariable = 'Bob';

Puedes obtener el valor de la variable llamándola por su nombre:

nombreDeLaVariable;

Después de haberle dado un valor a la variable, puedes volver a cambiarlo:

var nombreDeLaVariable = 'Bob';
nombreDeLaVariable = 'Steve';

Nótese que las variables tienen distintos tipos de datos:

Variable Explicación Ejemplo
String Una cadena de texto. Para indicar que la variable es una cadena, debes  escribirlo entre comillas. var miVariable = 'Bob';
Number

Un número. Los números no tienen comillas.

var miVariable = 10;
Boolean Tienen valor verdadero/falso. true/false son palabras especiales en JS, y no necesitan comillas. var miVariable = true;
Array Una estructura que te permite almacenar varios valores en una sola referencia. var miVariable = [1,'Bob','Steve',10];
Llama a cada miembro del array así: miVariable[0], miVariable[1], etc.
Object

Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes.

var miVariable = document.querySelector('h1');
Todos los ejemplos anteriores también.

Entonces, ¿para qué necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programación. Si los valores no pudieran cambiar, entonces no podrías hacer nada dinámico, como personalizar un mensaje de bienvenida de un usuario que visita tu página, cambiar la imagen que se muestra en una galería de imágenes, etc.

Comentarios

Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. En JavaScript, los comentarios de una sola línea se escriben así:

// Esto es un comentario

Pero también puedes escribir comentarios en más de una línea, igual que en CSS:

/*
Esto es un comentario
de varias líneas.
*/

Operadores

Un operador es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores más simples, con algunos ejemplos para probarlos en la consola del navegador.

Operador Explicación Símbolo(s) Ejemplo
Suma/concatenación Se usa para sumar dos números, o juntar dos cadenas en una. + 6 + 9;
"Hola " + "mundo!";
Resta, multiplicación, división Éstos hacen lo que esperarías que hicieran en las matemáticas básicas. -, *, / 9 - 3;
8 * 2; // La multiplicación en JS es un asterisco
9 / 3;
Operador de asignación Los has visto anteriormente: asigna un valor a una variable. = var miVariable = 'Bob';
identidad/igualdad Comprueba si dos valores son iguales entre sí, y devuelve un valor de true/false (booleano). === var miVariable = 3;
miVariable === 4;
Negación, distinto (no igual)
En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT — cambia true por false y viceversa.
!, !==

La expresión básica es true, pero la comparación devuelve false porque lo hemos negado:

var miVariable = 3;
!miVariable === 3;

Aquí estamos comprobando "es miVariable NO igual a 3". Esto devuelve false, porque ES igual a 3.

var miVariable = 3;
miVariable !== 3;

Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira Expresiones y operadores para ver la lista completa.

Nota: Mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variabables correctamente y de que recibes los resultados que esperabas. Por ejemplo, intoduce "35" + "25"  en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en strings — has acabado con los strings concatenados entre sí, y no con los números sumados. Si introduces 35 + 25, obtendrás el resultado correcto.

Condicionales

Las Condicionales son estructuras de código que permiten comprobar si una expresión devuelve true o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada  if ... else. Entonces, por ejemplo:

var helado = 'chocolate';
if (helado === 'chocolate') {
  alert('¡Si, amo el helado de chocolate!');    
} else {
  alert('Awwww, pero mi favorito es el de chocolate...');    
}

La expresión dentro de if ( ... ) es el criterio — este usa al operador de identidad (descrito arriba) para comparar la variable helado con la cadena chocolate para ver si las dos son iguales. Si esta comparación devuelve true, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración else.

Funciones

Las funciones son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:

  1. var nombreDeLaVariable = document.querySelector('h1');
  2. alert('Hola!');

Estas funciones están integradas en el navegador para poder utilizarlas en cualquier momento.

Si ves algo que parece un nombre de variable, pero tiene paréntesis — () — al final, probablemente es una función. Las funciones con frecuencia toman arguments — pedazos de datos que necesitan para hacer su trabajo. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.

Por ejemplo, la función alert() hace aparecer una ventana pop-up dentro de la ventana del navegador, pero nosotros necesitamos asignarle una cadena como un argumento para decirle qué mensaje se debe escribir en la ventana pop-up.

Las buenas noticias es que podemos definir nuestras propias funciones — en el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre si:

function multiplica(num1,num2) {
  var resultado = num1 * num2;
  return resultado;
}

Trata de ejecutar la función de arriba en la consola, después trata de usar la nueva función algunas veces, p.ej:

multiplica(4,7);
multiplica(20,20);
multiplica(0.5,3);

Nota: La sentencia return le dice al navegador que regrese la variable resultado fuera de la función para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones sólo están disponibles dentro de esas funciones. Esto se conoce como Alcance de la Variable. scoping (lee más de variable scoping aquí (En inglés).)

Eventos

Para crear una interacción real en tu sitio WEB, debes usar eventos — Estos son unas estructuras de codigo que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un click (click event), que se activa al hacer click sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego haz click sobre la pagina actual:

document.querySelector('html').onclick = function() {
    alert('Ouch! Deja de pincharme!');
}

Hay muchas maneras de enlazar un evento a un elemento; aqui hemos seleccionado el elemento HTML y le asignamos a su propiedad onclick una función anónima  (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.

Nota que

document.querySelector('html').onclick = function(){};

es equivalente a

var miHTML = document.querySelector('html');
miHTML.onclick = function(){};

es solo un modo mas corto de escribirlo.

Sobrealimentando nuestro website

Ahora vamos a repasar un poco lo básico de JavaScript. Añadiremos un par de funcionalidades a nuestro sitio para demostrar lo que podemos hacer.

Añadiendo un cambiador de imagen

En esta sección añadiremos otra imágen a nuestro sitio usando la DOM API y agregaremos un poco de código para cambiar entre imágenes al hacer click.

  1. Primero que todo, buscar una imagen que le guste para su sitio. Asegúrese que sea del mismo tamaño que la primera, o lo mas cerca posible.
  2. Guarda tu imágen en tu carpeta images.
  3. Renombra esta imágen 'firefox2.png' (sin las comillas).
  4. Ve a tu archivo main.js, y agrega el siguiente JavaScript (si tu JavaScript de "Hola Mundo" esta aún allí, bórralo).
    var miImage = document.querySelector('img');
    
    miImage.onclick = function () {
        var miSrc = miImage.getAttribute('src');
        if (miSrc === 'images/firefox-icon.png') {
          miImage.setAttribute('src','images/firefox2.png');
        } else {
          miImage.setAttribute('src', 'images/firefox-icon.png');
        }
    }
  5. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas click en la imagen, ¡esta debe cambiar por otra!

Almacenas una referencia a tu elemento <img> en la variable miImage. Luego, hacemos que esta propiedad del manejador de evento onclick de la variable sea igual a una función sin nombre (una función "anónima"). Ahora, cada vez que se haga click en la imagen :

  1. Recuperas el valor del atributo src de la imágen.
  2. Usas una condicional para comprobar si el valor src es igual a la ruta de la imagen original:
    1. Si es así, cambias el valor de  src a la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento <img>.
    2. Si no es así (significa que ya fue modificada), cambiaremos el valor de src nuevamente a la ruta de la imágen original , regresando a como era en un principio.

Añadiendo un mensaje de bienvenida personalizado

Luego añadiremos un poco mas de código, para cambiar el título de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página y estará disponible para cuando el regrese - lo guardaremos usando Web Storage API. También se incluirá una opción para cambiar el usuario y por lo tanto también el mensaje de bienvenida en cualquier momento que se requiera.

  1. En index.html, agrega el siguiente codigo antes del elemento <script>:
    <button>Cambiar de usuario</button>
  2. En main.js, agrega el siguiente código al final del archivo, exactamente como está escrito— Esto toma referencia a el nuevo botón que agregamos y al titulo, y los almacena en variables:
    var miBoton = document.querySelector('button');
    var miTitulo = document.querySelector( 'h1');
  3. Ahora agregaremos la siguiente función para poner el saludo personalizado — Esto no hará nada aún, pero arreglaremos esto en un momento:
    function estableceNombreUsuario() {
        var miNombre = prompt('Por favor, ingresa tu nombre.');
        localStorage.setItem('nombre', miNombre);
        miTitulo.textContent = 'Mozilla es fresco,' + miNombre;
    }
    Esta función contiene una función  prompt(), que crea un cuadro de diálogo como  lo hace alert(); la diferencia es que prompt() pide al usuario ingresar un dato, y almacena este dato en una variable cuando el boton OK del cuadro de diálogo es precionado. En este caso, pediremos al usuario que ingrese su nombre. Luego, llamaremos la API localStorage, que nos permite almacenar datos en el navegador y recuperarlos luego. Usaremos la función setItem() de localStorage, que crea y almacena un dato en el elemento llamado 'nombre', y coloca este valor en la variable miNombre que contiene el nombre que el usuario ingresó. Finalmente, establecemos el textContent del título a una cadena, más el nombre de usuario recientemente almacenado.
  4. Luego, agregamos este bloque if ... else — podriamos llamar a esto el código de inicialización, como se ha establecido para cuando carga la app por primera vez:
    if (!localStorage.getItem('nombre')) {
        estableceNombreUsuario();
    }
    else {
        var nombreAlmacenado = localStorage.getItem('nombre');
        miTitulo.textContent = 'Mozilla es fresco,' + nombreAlmacenado;
    }
    Este primer bloque usa el operador negación (logical NOT) para comprobar si el elemento 'nombre' existe — Si no existe, la función  estableceNombreUsuario() se iniciará para crearlo. Si  ya existe  (como por ejemplo cuando el usuario ya ingresó al sitio), recuperamos el dato del nombre usando getItem() y lo fijamos mediante textContent del titulo a la cadena , más el nombre del usuario,  como hicimos dentro de estableceNombreUsuario().
  5. Finalmente, agregamos abajo el evento onclick que manipulará el botón, de modo que cuando sea pulsado se inicie la función  estableceNombreUsuario(). Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el botón:
    miBoton.onclick = function() {
        estableceNombreUsuario();
    }

Ahora cuando visite su sitio por primera vez, este le pedirá su nombre y le dará un mensaje personalizado de bienvenida. Puede cambiar cuantas veces quiera el nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se almacena en el localStorage, este permanecerá después de que cierre el sitio, ¡manteniendo ahí el mensaje personalizado cuando abra el sitio la próxima vez!

Conclusión

Si ha seguido las intrucciones en este artículo, usted tendrá una página que luzca como esta (también puede ver nuestra versión aquí):

Si tuvo problemas, siempre puede comparar su trabajo con nuestro código terminado del ejemplo en Github.

Aquí sólo hemos rozado la superficie de JavaScript. Si usted disfrutó aprendiendo y desea avanzar más, visite nuestra Guia JavaScript.

Etiquetas y colaboradores del documento

 Última actualización por: sillo01,