Fundamentos de JavaScript

Que 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 características como el ajuste de diseños, haciendo que algunas cosas pasen cuando un botón es presionado, carrusel, y galerias de imágenes — pero eventualmente como vas adquiriendo experiencia con el lenguaje estarás en capacidad de crear juegos, gráficos 2D y 3D animados, aplicaciones con bases de datos, y mas.

JavaScript por si solo es bastante compacto, pero es muy flexible, y los desarrolladores han escrito gran cantidad de herramientas basados en el núcleo del lenguaje JavaScript para proveer acceso a diversas funcionalidades mas fácilmente. Esto Incluye:

• Interfaces de Programación de Aplicaciones (APIs) construidas dentro de los  web browsers que permiten hacer cualquier cosa, desde crear contenido HTML y establecer estilos CSS , hasta capturar y manipular un video desde la webcam , o generar graficos 3D y sonidos de ejemplo.
• APIs de Tercera Generación, para permitir incluir en sus sitios, funcionalidades de otros propietarios como Twitter o Facebook.
• Frameworks de tercera generación y librerias que puedes aplicar a tu HTML para que puedas construir y publicar rápidamente sitios y aplicaciones.

Ejemplo "Hola Mundo"

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

Sin embargo, JavaScript es un poco más complejo de usar con HTML y CSS, y deberás comenzar poco a poco, y continuar trabajando en pequeños pasos. Para comenzar, mostraremos como añadir  Javascript Básico a su página, para crear el ejemplo de "Hola Mundo" (El estandar en los ejemplos basicos de programación.)

1. Primero, ve a tu sitio de pruebas y crea un nuevo archivo llamado main.js. Guardalo en tu carpeta scripts.
2. A continuación, abre tu archivo index.html e introduce lo siguiente en una nueva linea  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í:

¿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 al nuestra cabecera, y almacenarla en una variable llamada myHeading. 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 myHeading (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.

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 miVariable;

Tras declarar una variable, puedes asignarle un valor:

miVariable = 'Bob';

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

var miVariable = 'Bob';

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

miVariable;

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

var miVariable = 'Bob';
miVariable = 'Steve';

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

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

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

Condicionales

Las Condicionales son estructuras de código que permiten comprobar si una expresión evalúa true o not, 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 iceCream con la cadena chocolate para ver si las dos son iguales. Si esta comparación evalúa en 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

Functions 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 miVariable = 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 supone 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);

Eventos

Para crear una real interación 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 en un clik (click event), que se activa al hacer click sobre algo. Para demostrar esto, Trata de ingresar 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 construimos su propiedad onclick asiganandole una función anónima  (función sin nombre) que contiene el código que se ejecutara 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 basico de javascript, añadiremos un par de rasgos a nuestro sitio para dar los primeros pasos dentro de lo posible.

Añadiendo un cambiador de imagen

En esta seccion añadiremos otra imagen a nuestro sitio, y agregaremos un javascript simple 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 imagen en tu carpeta images.
3. Ve a tu archivo main.js, y agrega el siguiente codigo JavaScript (si tu codigo de "Hola Mundo" esta allí, borralo):

   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');
       }
   }

4. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas click en la imagen, esta debe cambiar por otra!

Asi que así, almacenamos una referencia a nuestro elemento imagen en la variable miImage. Luego, hacemos que al activar el evento onclick hacemos que su atributo sea igual a una función anónima. Ahora, siempre que se haga click en la imagen :

1. Recuperaremos el valor del atibuto src.
2. Usamos una condicional para comprobar si el valor src es igual a la ruta de la imagen original:
   1. Si así es, cambiamos el valor de  src a la ruta de la 2da imagen, forzando a que se cargue otra imagen en el elemneto <image>.
   2. Si no es así (es porque su ruta ya fue modificada), cambiaremos el valor de src nuevamente a la ruta de la imagen original , regresando a como era en un principio.

Añadiendo un mensaje de bienvenida personalizado

Luego añadiremos un poco mas de codigo, para cambiar el titulo de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. este mensaje de bienvenida permanecera luego de que el usuario abandona la página y estara disponible para cuando el regrese. 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 hara nada aún, pero luego lo usaremos:

   function seleccionnombre() {
       var miNombre = prompt('por favor ingresa tu nombre.');
       localStorage.setItem('nombre', miNombre);
       miTitulo.innerHTML = 'Mozilla is cool, ' + 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, lammaremos una API llamada localStorage, que nos permite almacenar datos en el navegador, y recuperarlos luego. usaremos localStorage's setItem() función que crea y almacena un dato en el item llamado 'name', y coloca este valor en la variable myName que contiene el nombre que el usuario ingresó. Finalmente, establecemos el innerHTML de el titulo a una cadena, mas el nombre de usuario.
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')) {
       seleccionnombre();
   }
   else {
       var storedName = localStorage.getItem('nombre');
       miTitulo.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   Este primer bloque usa el operador negación (logical NOT) para comprobar si el articulo name existe — Si no existe, la función  seleccionnombre() se iniciará para crearlo. Si  ya existe  (como por ejemplo cuando el usuario ya ingreso al sitio), recuperamos el dato del nombre usando getItem() y lo fijamos mediante innerHTML a la cadena del titulo, más el nombre del usuario,  el mismo que se definio en seleccionnombre().
5. Finalmente, agregamos abajo el evento onclick que manipulará el botón, de modo que cuando sea pulsado se inicie la función  seleccionnombre(). Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al hacer click sobre el botón:

   miBoton.onclick = function() {
       seleccionnombre();
   }

Ahora cuando visite su sitio por primera vez, este le pedirá su nombre y le dara un mensaje personalizado de bienvenida. Puede cambiar cuantas veces quiera el nombre al presionar el botón. Y como adicional, como el nombre se almacena en el localStorage, este permanecerá luego de que cierre el sitio, así que su mensaje personalizado estar hay cada vez que visite el sitio!

Conclusión

Si a seguido las intrucciones en este articulo, usted tendrá una página que luzca como esta (usted también puede ver nuestra version aqui):

Si se atasco, siempre puede comparar su trabajo con el nuestro código terminado del ejemplo en Github.

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