¿Qué es JavaScript?

JavaScript o también conocido bajo la abreviatura de JS, es un lenguaje de programación interpretado.

JavaScript no tiene nada que ver con Java, son lenguajes totalmente distintos

Brendan Eich crea JavaScript

Inventado por Brendan Eich en 1995 para un famoso antiguo navegador (Netscape) en los comienzos de internet.

Se creó en 10 días y en sus inicios se llamaba Mocha y posteriormente LiveScript hasta que finalmente recibió su nombre actual JavaScript.

Nacimiento de EcmaScript ¿Qué es EcmaScript? ¿Por qué nace?

En el boom de internet a partir del 1996, había muchísimas incompatibilidades entre los navegadores cuando las páginas tenían código JavaScript.

Cada navegador interpretaba el código de una manera totalmente diferente creando un obstáculo para los desarrolladores la compatibilidad.

Estos problemas de compatibilidad, provocaron que en 1996 se empezará a crear un estándar para resolver la incompatibilidad. Y finalmente, en el año 1997se crea el estándar EcmaScript.

EcmaScript, busca augmentar al máximo la compatibilidad de los navegadores. Aunque es difícil llegar al 100 % trata de que se aproximen al máximo a esa cifra otorgando unas normas para el lenguaje.

Inicios de JavaScript

JavaScript, aparece a mediados de los años 90 debido a que las conexiones a internet son lentas (por no decir primitivas) lo que provoca que se requiera ejecutar un lenguaje en el lado cliente.

Un ejemplo de esto, es debido a las malas conexiones de aquellos años, el proceso de verificar si un formulario estaba completamente relleno era enviar a servidor una solicitud y que este nos respondiera. Independientemente de si este estaba al completo o no. En el caso de que no estuviera completo, se tenía que repetir el envío y todo esto junto a las conexiones prehistóricas de las que hemos hablado suponían mucho rato de espera.  La solución fue verificar todo esto desde el lado del cliente (desde local desde su navegador) con JavaScript antes de enviar la solicitud al servidor y que, de esta manera, nos aseguremos previamente de que tenemos el formulario rellenado al completo antes de mandarlo. Ahorrando peticiones innecesarias hacía el servidor (lo que supone un ahorro) y tiempo de espera para el usuario (lo que le aporta una mejor experiencia de navegación).

Un poco de historia

Versiones de JavaScript

JavaScript ha ido evolucionando durante lo largo de los años. Actualmente las versiones suelen ir acompañadas de ES junto al año de la versión por ejemplo la versión más actual ahora mismo es ES2018 o también bajo el número siguiente al año. El número de versión siempre va por delante del año por lo que la ES20018 es la versión 9 de EcmaScript.

ES2018 = ES9 (un número por delante del año)

¿Por qué JavaScript es interpretado?

Alguno de los motivos por los qu  JavaScript es un lenguaje interpretado son:

  • Se dice que un lenguaje es interpretado cuando no pasa por una compilación previa para poder ejecutarse.
  • Al no compilarse, detectamos los errores directamente en tiempo de ejecución. Al no tener que realizar el proceso de compilación, el código es algo más lento de ejecutarse, pero no requiere realizar la compilación (ese empaquetado previo). Aunque es prácticamente inapreciable para nosotros.
  • Las instrucciones se leen sentencia a sentencia (línea a línea) de arriba a abajo y de izquierda a derecha leyéndose por el motor del navegador (V8 de Google) que lee y ejecuta instrucción a instrucción (línea a línea) nuestro código JavaScript.

Entornos de Ejecución de JavaScript

JavaScript se puede ejecutar en:

  • Cliente: desde el navegador mediante a un documento HTML (Front End).
  • Servidor: desde la Terminal con Node.js (Back End).

Nosotros nos vamos a centrar en el lado cliente.

¿Dónde está actualmente JavaScript?

Actualmente JavaScript está en todos los lados, tanto en cliente como en servidor.

La creación de frameworks, no ha hecho más que incrementar más aún el uso de JavaScript.

Google, Facebook, Netflix, Ebay, Youtube y muchas más compañías completan una lista sin fin de grandes y no tan grandes empresas que usan este lenguaje.

Alrededor del 75% de todos los sitios web utilizan al menos 1 biblioteca o framework javascript.

JavaScript VanillaJS VS Frameworks

¿Qué es vanillaJS?

JavaScript vainilla o como también conocido como vainilla JS es el nombre con el que se ha hecho popular el utilizar JavaScript nativo, es decir “a pelo” (sin frameworks).

Uno de los principales beneficios de vanillaJS es su velocidad. Muestra de ello es la siguiente comparativa de velocidad sacada de la web de vanilla-js :

¿Qué es un framework?

Un framework o marco de trabajo, nos proporciona una estructura previa que se puede aprovechar para desarrollar un proyecto de forma que nos requiera un menor esfuerzo. Un ejemplo de algunos de los framework más populares de JS son: Angular, React, Vue, etc.

¿Quieres un framework nuevo? El payaso de IT te lo da… Es una especie de meme que se ha creado debido a la gran variedad de nuevos frameworks que constantemente están saliendo para JS. Salen “como churros”.

¿Cómo ejecutamos JavaScript desde un HTML?

Para añadir JavaScript a un documento HTML utilizamos la etiqueta: <SCRIPT></SCRIPT>

Sintaxis de JavaScript

Todas las etiquetas JavaScript deben de acabar con un punto y coma.

Por ejemplo document.write(“Texto”); nos escribirá el contenido de entre las comillas en el interior del documento HTML.

¿Dónde añadimos nuestro JavaScript?

Tenemos varias maneras de introducir JavaScript en un documento HTML. Vamos a verlas:

Dentro del HEAD del documento HTML:

– Escrito directamente dentro del HEAD del HTML:

index.html

El resultado será un documento HTML con “Hola Mundo” escrito en el BODY:

– Enlazando desde un JS externo asociado en el HEAD del HTML:

index.html

Y el archivo JavaScript, tendrá como extersión .js y SIN etiquetas de apertura <SCRIPT> y de cierre </script> en su interior

main.js

El resultado será el mismo que el anterior, un documento HTML con “Hola Mundo” escrito en el BODY:

Dentro del BODY del documento HTML:

Normalmente cuando añadimos el JavaScript desde un documento HTML, lo hacemos desde el final del documento. Aunque lo podemos hacer desde cualquier parte, de esta manera, nos aseguramos primeramente de que hemos cargado el documento HTML por si vamos a trabajar sobre alguno de los elementos de dicho documento. Lo más recomendable es trabajar con un fichero externo que contenga el JavaScript separando ambas capas (tecnologías/lenguajes). Por lo que, lo más recomendable es trabajar siempre enlazando un documento de JS externo desde el final del BODY del HTML.

Y como en la manera anterior, lo podemos cargar de ambas maneras:

– Escrito directamente en la parte inferior del BODY del HTML:

index.html

El resultado será:

– Enlazando desde un JS externo asociado en el HEAD del HTML:

index.html

main.js

El resultado será el mismo que el anterior:

Alternativas a ejecutar JavaScript en nuestro código HTML

Existen alternativas a ejecutar el código en nuestro documento HTML. Vamos a verlas:

Ejecutar el código desde el Inspector del navegador

Para abrir el inspector de navegador en Chrome pulsamos F12 y vamos a la pestaña de console y allí, podemos escribir nuestras instrucciones.

Desde una herramienta REPL (Read–Eval–Print Loop)

Estás herramientas nos permiten aprender, ejecutar, experimentar utilizando tecnologías web. Entre ellas algunas compatibles con JavaScript son:

Vamos a ver un ejemplo con Jsbin:


Espero que os haya gustado, os espero en próximos artículos. Un saludo 🙂