Como creo que a cualquiera, a mí me gusta saber de dónde venimos y, en la medida de lo posible, hacia dónde nos dirigimos. Por ello, te muestro esta línea de tiempo en la que se incluyen los principales hitos en el desarrollo y estandarización de JavaScript.

Y ECMAScript no para de evolucionar y ya se está intentando estandarizar la versión 7. Pero nosotros nos atendremos a la versión ES6 que es la que actualmente soportan todos los navegadores modernos.

Pero, seguramente, algunos os estaréis preguntando: ¿qué es JavaScript o ECMAScript y qué nos aporta?

La respuesta es fácil: es simplemente otra capa más en el ciclo de vida del desarrollo de nuestras páginas web. Como bien ya conocéis, hasta ahora estabais utilizando una capa para la estructura y otra para la presentación; pues JavaScript añade otra capa para el desarrollo web que es la del comportamiento.

• HTML: es el lenguaje que define la estructura para dar un sentido al contenido web,.
• CSS: es el lenguaje utilizado para formatear cada uno de los elementos o grupos de elementos.
• JavaScript:  Es un lenguaje de programación que te permite controlar el comportamiento de tu página web. ¡No sabes lo que podrás lograr utilizando JavaScript!

Pasemos ya a ver cómo utilizar JavaScript, que seguro que estás impaciente.

A la hora de programar en cualquier lenguaje de programación, es muy importante que comentes tu código. Aunque hoy día se aconseja que el propio código sea el que esté autodocumentado. Es decir, si una serie de sentencias realizan una determinada acción o función, es mejor y más claro crear una función para dicho propósito con un identificador lo suficientemente claro, que poner el comentario en el código. Pero todo eso lo veremos más adelante.

Los comentarios son sentencias que el intérprete de JavaScript ignora. Sin embargo, estas sentencias permiten a los desarrolladores dejar notas sobre cómo funcionan las cosas en sus scripts.

Los comentarios ocupan espacio dentro de tu código de JavaScript, por lo que cuando alguien se descargue vuestro código necesitará más o menos tiempo, dependiendo del tamaño de vuestro fichero.

JavaScript permite dos estilos de comentarios: de una sola línea o de varias. Ejemplos de comentarios de una única línea o de varias líneas:

// Mi primer comentario

/*
    Mi segundo comentario,
    éste un poco más largo.
*/

Una variable es un contenedor de un valor de un tipo dado al que le damos un identificador. El valor de una variable puede cambiar en el tiempo. También existen las constantes que, al contrario de las variables, su valor no puede cambiar.

Para nombrar una variable o constante sólo podemos utilizar caracteres alfanuméricos [a-zA-Z0-9] y el caracter de subrayado _. No debe comenzar por un número. Tampoco podemos utilizar como identificador una palabra reservada ya que nos daría error. Es conveniente que los nombres, o los identificadores que les damos, sean descriptivos e informen del cometido de dicha variable para que nuestro código sea legible y entendible. También es conveniente seguir la convención lower camel case en la que se utilizan minúsculas para nombrarlas y si es la unión de varias palabras éstas se unen y se distingue entre palabras utilizando la primera letra en mayúscula.

Antes de utilizar una variable deberemos declararla y luego darle un valor, ya que si no su valor será undefined.

Para declarar constantes y variables debemos utilizar las palabras reservadas const, var y let (la primera para las constantes y las otras para las variables en las que ahora nos detendremos).

const pi = 3.14;
var edad = 18;
let nombre = "Bob Esponja";

La palabra var declara una variable y se sigue utilizando por motivos históricos ya que genera algunos problemas que viene a solucionar let.

Debido al hoisting, era posible declarar una variable con var después de ser utilizada y eso funcionaba. Por ejemplo:

edad = 18;
...
...
var edad;

Ese código era válido, pero la verdad es que se hace confuso y más complejo de entender. Pues el hoisting ya no funciona con let, por lo que para utilizar una variable que vamos a declarar con let, primero debemos declararla o de lo contrario nos dará un error.

let edad;
...
edad = 18;

Además con el uso de var, una variable se podía declarar varias veces y era correcto, pero como ves en el ejemplo vuelve a ser confuso.

var edad = 18;
....
var edad = 20;

Eso con let ya no funciona y habría que hacerlo de la siguiente forma:

let edad = 18;
....
edad = 20;

JavaScript es un lenguaje "débilmente tipado", lo cual significa que, a diferencia de otros lenguajes, no es necesario especificar el tipo de dato que vamos a almacenar en una variable y además éste puede cambiar. Esto deberíamos evtarlo para evitar confusiones.

let edad;
edad = '18';    // En este caso contiene una cadena
edad = 18;      // En este caso contiene un número

Aunque los tipos de datos en JavaScript son muy sencillos, a veces te podrás encontrar con casos en los que las operaciones no se realizan correctamente, y eso es debido a la conversión de tipos de datos. JavaScript intenta realizar la mejor conversión cuando realiza esas operaciones, pero a veces no es el tipo de conversión que a ti te interesaría.

Por ejemplo cuando intentamos sumar dos números:

console.log(4 + 7);    // Muestra por consola: 11

Si uno de esos números está en formato de cadena de texto, JavaScript lo que hará es intentar convertir el otro número a una cadena y los concatenará, por ejemplo:

console.log(4 + '7');     // Muestra por consola: 47 (como cadena)

Otro ejemplo podría ser:

console.log(1 + 2 + '3');     // Muestra por consola: 33 (como cadena)

Esto puede resultar ilógico pero sí que tiene su lógica. La expresión se evalúa de izquierda a derecha. La primera operación funciona correctamente devolviendo el valor de 3 pero al intentar sumarle la cadena de texto 3, JavaScript lo que hace es convertir ese número a una cadena de texto y se lo concatenará al  otro 3.

Para convertir cadenas a números dispones de las funciones: parseInt() y parseFloat().

Por ejemplo:

console.log(parseInt('34'));              // Muestra por consola: 34
console.log(parseInt('89.76'));         // Muestra por consola: 89
console.log(parseFloat('34'));          // Muestra por consola: 34
console.log(parseFloat('3.14'));       // Muestra por consola: 3.14
console.log(1 + 2 + parseInt('3'));    // Muestra por consola: 6

Si lo que deseas es realizar la conversión de números a cadenas, es mucho más sencillo, ya que simplemente tendrás que concatenar una cadena vacía al principio, y de esta forma el número será convertido a su cadena equivalente:

console.log('' + 2020);        // Muestra por consola: 2020 (como cadena);

JavaScript es un lenguaje rico en operadores: símbolos y palabras que realizan operaciones sobre uno o varios valores, para obtener un nuevo valor.

Cualquier valor sobre el cuál se realiza una acción (indicada por el operador), se denomina un operando. Una expresión puede contener un operando y un operador (denominado operador unario), como por ejemplo en b++, o bien dos operandos, separados por un operador (denominado operador binario), como por ejemplo en a + b. Incluso exsite algún operador ternario, como luego veremos.

==  !=  === !==  >  >=  <  <=

+   -   *   /   %   ++   - -   +valor  -valor

=    +=    -=    *=    /=    %=    <<=    >=    >>=    >>>=    &=    |=     ˆ =    []

&&  ||  !

&    |     ˆ ∼ <<    >>    >>>

.    []    ()    delete    in    instanceOf    new    this

,    ?:    typeof    void

Plantillas de cadenas (template string)

Con ES6 podemos definir cadenas de una forma más sencilla que como estábamos haciendo hasta ahora. Fíjate en este ejemplo, en el que para utilizar la plantilla de cadenas utilizamos la comilla invertida ` y ponemos las variables encerradas entre ${}.

let nombre = 'Bob Esponja';
console.log(`Hola ${nombre}`);      // Muestra por consola: Hola Bob Esponja

En ES6 también podemos definir cadenas en varias líneas, sin necesidad de utilizar el operador de concatenación +.

Desestructuración

En ES6 también tenemos nuevas formas de asignar valores a variables a partir de un array.

let [personaje1, personaje2] = ['Bob Esponja', 'Calamardo'];
console.log(personaje1);       // Muestra por consola: Bob Esponja
console.log(personaje2);       // Muestra por consola: Calamardo

Esa misma desestructuración también la podemos hacer con objetos.

let personaje = { nombre: 'Bob esponja', edad: 18 };
let { nombre, edad } = personaje;
console.log(nombre);       // Muestra por consola: Bob Esponja
console.log(edad);         // Muestra por consola: 18

? :

Este operador condicional es la forma reducida de la expresión if - else.

La sintaxis formal para este operador condicional es:

(condicion) ? expresionV : expresionF;

Si la condición evalúa a true devuelve expresionV y en caso contrario devuelve expresionF.

let sexo = 'V';
console.log(`Su sexo es ${sexo ? 'varón' : 'hembra'}`);

typeof

Este operador unario se usa para identificar el tipo de una variable o expresión.

let indefinido;
let cadena = '5'
let numero = 5;
console.log(typeof indefinido);       // Muestra por consola: undefined
console.log(typeof cadena);           // Muestra por consola: string
console.log(typeof numero);           // Muestra por consola: number

En esta sección te mostraremos cómo los programas pueden tomar decisiones, y cómo puedes lograr que un script repita un bloque de instrucciones las veces que quieras.

Cuando te levantas cada día tomas decisiones de alguna clase; muchas veces ni te das cuenta de ello, pero lo estás haciendo. Por ejemplo, imagínate que vas a hacer la compra a un supermercado; desde el momento que entras en el supermercado ya estás tomando decisiones: ¿compro primero la leche o compro la verdura?, ¿ese precio es barato o es caro?, ¿el color de ese tinte es azul claro u oscuro?, ¿tengo suficiente dinero para pagar o no?, ¿me llegan estos kilogramos de patatas o no?, ¿pago en efectivo o con tarjeta?, etc.

Otras veces repites un ejercicio físico un número determinado de veces para estar en forma. O realizas cambios a un documento hasta que crees que está perfecto. O preguntas a tus amigos mientras uno no te responda que él es el que tiene ese libro que tanto querías leer.

Es decir, tomamos innumerables decisiones a lo largo del día y la mayor parte de las veces no nos damos ni cuenta de ello. Pero también realizamos acciones repetitivas sin casi darnos ni cuenta.

En las siguientes secciones, verás cómo puedes ejecutar unas u otras instrucciones, dependiendo de ciertas condiciones, y cómo puedes repetir una o varias instrucciones, las veces que te hagan falta.

En los lenguajes de programación, las instrucciones que te permiten controlar las decisiones y bloques de ejecución, se denominan "Estructuras de Control". Una estructura de control, dirige el flujo de ejecución a través de una secuencia de instrucciones, basadas en decisiones simples y en otros factores.

Una parte muy importante de una estructura de control es la "condición". Cada condición es una expresión que se evalúa a true o false.

Sentencia if

La decisión más simple que podemos tomar en un programa, es la de seguir una rama determinada si una determinada condición evalúa a true.

if (condicion) {
      sentencias;
}

Si la condición evalúa a true se ejecutarán las sentencias dentro del bloque encerrado entre llaves.

if (edad >= 18) {
      alert('Ya eres mayor de edad');
}

Sentencia if - else

En este tipo de construcción, decidimos si ejecutar una secuencia u otro en función de que la condición evalúe a true o false.

if (condicion) {
      sentenciasV;
} else {
      sentenciasF;
}

Si la condición evalúa a true ejecutamos sentenciasV y en caso contrario ejecutamos sentenciasF.

if (edad >= 18) {
      alert('Ya eres mayor de edad');
} else {
      alert('Aún eres menor de edad');
}

Recuerda que también existía el operador ternario.

Los bucles son estructuras repetitivas, que se ejecutarán un número de veces fijado expresamente, o que dependerá de si se cumple una determinada condición.

Bucle for.

Este tipo de bucle te deja repetir un bloque de instrucciones un número limitado de veces.

for (expresión inicial; condicion; incremente) {
      sentencias;
}

Primero se ejecuta la expresión inicial o de inicialización. En cada repetición del bucle se evalúa la condición y si ésta evalúa a true, se ejecutan las instrucciones, se ejecuta la sentencia de incremento y se repite el proceso de evaluación, ejecución e incremento hasta que la condición evalúe a false.

let numero = 5;
for (let i = 0; i <= 10; i++) {
      console.log(numero * i);
}

Bucle while.

Este tipo de bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Es más sencillo de comprender que el bucle for, ya que no incorpora en la misma línea la inicialización de las variables, su condición para seguir ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que se tiene que cumplir para que se realice una iteración o repetición.

while (condicion) {
      sentencias;
}

Se ejecutan las sentencias mientras la condición evalúe a true. Por tanto, dentro de dichas sentencias deberá darse la situación para que en algún momento la condición evalúe a false o de lo contrario estaríamos ante un bucle infinito.

let numero = 5;
let i = 0;
while (i <= 10) {
      console.log(numero * i);
      i++;
}

Bucle do - while.

Este tipo de bucle es la última de las estructuras para implementar repeticiones de las que dispone JavaScript, y es una variación del bucle while visto anteriormente. Se utiliza generalmente, cuando no sabemos el número de veces que se habrá de ejecutar el bucle. Es prácticamente igual que el bucle while, con la diferencia, de que sabemos seguro que el bucle por lo menos se ejecutará una vez.

do {
      sentencias;
} while (condicion);

Al igual que en el caso anterior, siempre debe darse que las sentencias en el algún momento hagan que la condición evalúe a false, para evitar el bucle infinito.

let numero = 5;
let i = 0;
do {
      console.log(numero * i);
      i++;
} while (i <= 10);

También existen otras funciones para recorrer colecciones u objetos iterables que veremos más adelante (foreach, map, filter, reduce, ...).

En este apartado pretendo mostrarte un ejemplo completo y totalmente funcional de lo visto hasta ahora.

Cierto es, que para entender el ejemplo tendrás que hacer algunos actos de fe, ya que hay cosas que aún no hemos explicado, pero que creo que son fácilmente entendibles. La idea es que vayas familiarizándote con el entorno que utilices, con la forma de trabajar y sobre todo con la forma de pensar.

Si hay alguna cosa que aún no entiendas no te desesperes, pregunta en el foro, que encantado te responderé a tus dudas. Pero lo que sí quiero es que te centres en las cosas que ya conoces y cómo y por qué las he utilizado. Os animo a todos y todas a que implementéis este ejemplo, utilizando el editor o entorno de vuestra preferencia, lo visualices en el navegador o navegadores que tenéis instalados y que vayáis familiarizándoros con todo.

El ejemplo es muy simple. Un formulario en el que se pide al usuario que introduzca un número entre 0 y 10, ambos inclusive, y una vez que envíe el formulario le muestra la tabla de multiplicar para dicho número introducido.

Veamos primero cómo he estructurado el proyecto.

Una vez vista la estructura, pasemos a ver el formulario y la inclusión de nuestro fichero .js en el archivo index.html.

<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <meta charset="UTF-8">
        <title>Tabla de multiplicar</title>
        <script src="js/tablaMultiplicar.js"></script>
    </head>
    <body>
        <h1>
            Tabla de multiplicar
        </h1>
        <form onsubmit="mostrarTabla()">
            <label for="numero">Introduce el número:</label>
            <input id="numero" type="number" required/>
            <input type="submit" value="Mostrar tabla" />
        </form>
        <div id="tabla">
        </div>
    </body>
</html>

Como podéis apreciar, simplemente incluimos el archivo tablaMultiplicar.js para que su contenido esté accesible. Creamos la estructura del documento, en la que básicamente creamos dos elementos:

• Un formulario para que el usuario introduzca el número del que quiere visualizar su tabla de multiplicar. Este formulario, cuando es enviado (aunque no es enviado a ningún lado, simplemente se valida en lado del cliente), mediante el evento onSubmit del mismo, simplemente llama a la función mostrarTabla() que está definida en nuestro archivo tablaMultiplicar.js.
• Un bloque vacío cuyo id es tabla y en el que luego mostraremos los resultados.

Por otro lado la función mostrarTabla() del archivo tablaMultiplicar.js.

const mostrarTabla = () => {
    this.event.preventDefault();
    const numero = Number(document.getElementById('numero').value);
    if (numero >= 0 && numero <= 10) {
        let tabla = document.getElementById('tabla');
        let tablaMultiplicar = `<h2>Tabla de multiplicar del número ${numero}</h2>`;
        tablaMultiplicar += '<ul>';
        for (let i = 0; i <= 10; i++) {
            tablaMultiplicar += `<li>${numero} * ${i} = ${numero * i}</li>`;
        }
        tablaMultiplicar += '</ul>';
        tabla.innerHTML = tablaMultiplicar;
    } else {
        alert('El número introducido debe estar entre 0 y 10 (ambos inclusive');
        document.getElementById("numero").value = '';
    }
}

Esta función realiza las siguientes acciones.

• Primero de todo previene que el evento se propague. Todo eso lo entenderás mejor más adelante, pero si no lo hiciese, al terminar limpia los campos y no nos deja ver el resultado (te animo a que comentes dicha línea -línea número 2- para que veas lo que sucede).
• Pasa el valor del campo de texto a número y luego comprueba mediante una sentencia condicional si está entre los valores aceptados o no.
  • Si lo está, rellena lo que se quiere mostrar en el bloque cuyo id es tabla mediante un bucle.
  • Si no lo está, alerta al usuario del error y elimina el contenido del campo de texto.

La visualización del mismo en el navegador, es el que muestro a continuación, aunque te animo a que lo visualices tú en el tuyo.