Artículo original escrito por Jessica Wilkins
Artículo original What is JavaScript? JavaScript Code Explained in Plain English
Traducido y adaptado por Erick Saucedo

JavaScript fue creado hace más de 26 años y actualmente es uno de los lenguajes de programación más populares. ¿Pero qué es JavaScript?

JavaScript es usado con HTML y CSS para crear páginas web dinámicas e interactivas y aplicaciones móviles. A menudo lo llamamos uno de los bloques de construcción del desarrollo web.

De acuerdo a W3Techs,

JavaScript es usado como lenguaje de programación del lado del cliente en el  97.6% de todos los sitios web.

Historia de JavaScript

En 1995, el desarrollador de Nestscape Brendan Eich creó la versión uno de JavaScript en tan solo 10 días. Cuando salió por primera vez se llamaba Mocha, luego fue cambiado a LiveScript y finalmente se estableció como JavaScript.

Los jefes de Brendan Eich querían que JavaScript tuviera una sintaxis similar a la de Java. También sentían que JavaScript ayudaría a acelerar el desarrollo web y ser más sencillo de aprender en comparación con Java.

Al paso de los años JavaScript ha crecido y se ha desarrollado en un lenguaje versátil que puede ser usado tanto en web como en aplicaciones móviles.

¿Qué es ECMAScript?

ECMAScript significa European Computer Manufacturers Association Script (Script de la asociación europea de fabricantes de computadoras). De acuerdo a MDN docs,

ECMAScript es el lenguaje de scripting que forma la base de JavaScript.

La asociación creó el estándar ECMA para asegurarse que las páginas web fueran consistentes en diferentes navegadores. Hasta agosto de 2021, hay un total de 12 versiones publicadas de ECMAScript.

¿Java es lo mismo que JavaScript?

Aunque estos dos lenguajes tienen una sintaxis similar y comparten las primeras cuatro letras de "Java", no son el mismo lenguaje.

Aquí hay unas diferencias clave entre los dos lenguajes.

  • Java es un lenguaje de programación compilado. Esto significa que antes de que el programa se ejecute, el código necesita ser traducido al código de la máquina para que la computadora pueda entenderlo.
  • JavaScript en un lenguaje interpretado. En el navegador, un intérprete leerá el código y lo ejecutará sin la necesidad de compilarlo primero.
  • Java es usado como un lenguaje del lado del servidor (backend) mientras que JavaScript es principalmente usado como un lenguaje del lado del cliente (frontend). Pero JavaScript también puede ser usado para crear aplicaciones web backend con Node.js.

¿Cómo trabajan juntos HTML, CSS y JavaScript en una página web?

Ya que hemos aprendido la historia de JavaScript, necesitamos entender cómo trabaja en un sitio web.

HTML representa el contenido, CSS le da el estilo a la página para que se vea bien, y JavaScript hace que el sitio sea interactivo. ¿Pero qué quiere decir interactivo y cómo trabaja JavaScript junto a los otros dos lenguajes?

Veamos un ejemplo para entender mejor cómo trabajan estos tres lenguajes juntos.

En este ejemplo, cuando el usuario da clic al botón un mensaje se mostrará con el número de veces que el usuario ha dado clic. Cuando el conteo alcanza cierto umbral, el mensaje cambiará y se volverá más sarcástico a medida que el conteo aumenta.

Usamos HTML para crear y mostrar el botón en la página.

<button id="btn">Hazme clic</button>

También tenemos este elemento p en nuestro HTML que no contiene ningún texto entre las etiquetas de apertura y de cierre. En JavaScript, el texto se agrega una vez que el usuario ha dado clic en el botón.

<p id="para"></p>

Usamos CSS para darle estilo al botón y centrarlo en la página.

button {
  display: block;
  margin: 20px auto 10px;
  padding: 25px 20px;
  font-size: 1.4rem;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: #3b5998;
  color: white;
}

Para acceder a los elementos de HTML, usamos getElementById. Aquí es donde JavaScript entra.

const btn = document.getElementById("btn");
const para = document.getElementById("para");

La variable llamada count mantiene el rastreo de cuántas veces el usuario ha dado clic al botón. El conteo es constantemente actualizado cada vez que se da clic al botón.

let count = 0;

Este es el arreglo de las respuestas que se mostrarán al usuario.

const respuestasArr = [
  "Has dado clic al botón estas veces: ",
  "Wow, te gusta dar clic a ese botón. Clics del botón: ",
  "¿Por qué continúas dándole clic? Clics del botón: ",
  "Ahora estás siendo molesto. Clics del botón: "
];

Usamos el addEventListener que le dice a la computadora que escuche el evento clic. Una vez que el clic se detecta, entonces aparecerá el mensaje en la pantalla con el conteo.

btn.addEventListener("click", () => {
  count++;
  if (count < 10) {
    para.innerHTML = `${respuestasArr[0]} ${count}`;
  } else if (count >= 10 && count < 15) {
    para.innerHTML = `${respuestasArr[1]} ${count}`;
  } else if (count >= 15 && count < 20) {
    para.innerHTML = `${respuestasArr[2]} ${count}`;
  } else {
    para.innerHTML = `${respuestasArr[3]} ${count}`;
  }
});

Usamos una sentencia if else para revisar cuántas veces se dio clic al botón y mostrar un mensaje diferente basado en qué tan alto es el número del conteo.

Si count es menor a 10, entonces este mensaje se mostrará en la pantalla.

hasdadoclicalbotonestasveces-1

Si count está entre 10 y 14, entonces este es el mensaje que se mostrará en pantalla.

wowtegustadarclicaeseboton-1

Si count está entre 15 y 19, entonces este es el mensaje que se mostrará en pantalla.

porquecontinuasdandoleclic-1

Si count es 20 o mayor, entonces este es el mensaje que se mostrará en pantalla.

ahoraestassiendomolesto-1

¿Cómo trabaja JavaScript en un sitio web real?

Acabamos de ver un ejemplo básico de cómo trabajan HTML, CSS y JavaScript juntos. ¿Pero cómo trabaja JavaScript en sitios web reales?

Echemos un vistazo a la plataforma de aprendizaje de freeCodeCamp. Este es un ejemplo de un desafío de HTML del curso de Diseño Web Responsivo.

image-11

Si logro pasar el desafío, entonces este mensaje aparecerá.

image-12

Pero si mi respuesta es incorrecta, entonces la lección me dirá dónde está el problema.

image-22

¿Pero cómo sabe freeCodeCamp si mi respuesta es correcta o no lo es?

freeCodeCamp escribe una serie de pruebas para cada desafío para asegurarse que el código es correcto. Estas pruebas son escritas en JavaScript.

Estas son las pruebas de JavaScript para el desafío Agrega imágenes a tu sitio web.

tests-1

Cómo empezar a aprender JavaScript

Aquí está una lista de recursos grandiosos donde puedes empezar a aprender JavaScript.

  1. Algoritmos de JavaScript y Estrucuras de Datos (freeCodeCamp)
  2. Learn JavaScript - Full Course for Beginners (freeCodeCamp YouTube channel)
  3. The Modern JavaScript Tutorial (javascript.info)
  4. JavaScript Tutorial (javascripttutorial.net)
  5. LearnJS (learn-js.org)
  6. Learn JavaScript (Codecademy)
  7. JavaScript (SoloLearn)
  8. MDN JavaScript (MDN web docs)
  9. JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour (Programming with Mosh)

Una vez que aprendas lo básico de JavaScript, entonces puede empezar a hacer tus propios proyectos. He creado una lista de 40 Proyectos de JavaScript para Principiantes (artículo en inglés) para que empieces.

Librerías de JavaScript y frameworks

Las librerías y frameworks de JavaScript fueron creados para ayudar a acelerar el desarrollo. Una vez que hayas aprendido JavaScript "vanilla" (lo básico/simple) entonces puedes empezar a aprender una librería o framework.

Hay diversas opciones para escoger, pero no necesitas aprenderlas todas. Investiga ofertas de empleo en tu área para ver cuáles librerías y frameworks están siendo usados.

Aquí hay unas opciones populares.

Aquí hay más sugerencias de recursos de aprendizaje (en inglés).

Conclusión

JavaScript fue creado en 1995, y desde entonces se ha convertido en un lenguaje potente y versátil usado para sitios web, juegos en línea y aplicaciones móviles.

Aunque Java y JavaScript tienen una sintaxis similar y comparten las primeras cuatro letras de "Java", no son el mismo lenguaje. Java es principalmente usado como lenguaje del lado del servidor mientras que JavaScript es usado en el navegador.

HTML, CSS y JavaScript son los tres lenguajes principales de la web. HTML es para el contenido, CSS es para el estilo, y JavaScript es para la interactividad en el sitio.

Espero que hayas encontrado este artículo de ayuda y te deseo la mejor de las suertes en tu viaje de desarrollador web.