Qué es JavaScript, para qué sirve y cómo funciona

JavaScript es un poderoso lenguaje de programación construido para el navegador Netscape en 1995. Todos los navegadores modernos lo adoptaron desde entonces para añadir funciones a los sitios web y, más recientemente, a aplicaciones web.

A lo largo de los años, desde su concepción, JavaScript se ha convertido en un gigante: no se utiliza únicamente por la web, sino que puede encontrarse en casi cualquier lugar, incluso en el espacio.

Este artículo hablaremos de sus orígenes, evolución, dónde se encuentra actualmente y el futuro del lenguaje de programación JavaScript. Sin más demora, empecemos con la diversión.

Antes de que exploremos a profundidad en la madriguera, mira este video sobre JavaScript.   

Video de Bitech Studio

Programar con JavaScript se ha expandido a todo, desde la programación computacional hasta la programación del equipo de la NASA. Además, desde que existe, Node.js ha facilitado que JavaScript se aplique en otros propósitos. Demos un vistazo más de cerca a algunos casos enseguida.

¿Para qué sirve JavaScript?

En el contexto actual, JavaScript se utiliza para todo, gracias a la introducción de Node.js. Esta tecnología crea software robusto para empresas en todo el mundo. Por si fuera poco, organizaciones como LinkedIn y Medium lo implementan al construir plataformas para que los usuarios tengan acceso a sus servicios.

Lo que se puede hacer con JavaScript abarca diferentes tipos de software, como juegos, programas de computadora, aplicaciones web y hasta tecnologías de blockchain. JavaScript es posiblemente el lenguaje de programación más popular de la web. Por ejemplo, más de 125.000 empleos en LinkedIn buscan profesionales con habilidades en JavaScript.

Ya que hemos discutido el alcance de JavaScript en la industria laboral, hablemos más de su uso más común: el desarrollo web.

JavaScript para desarrollo web 

El uso más popular de JavaScript es para el desarrollo web, y es una de las herramientas más poderosas que un desarrollador puede tener en sus manos. Los desarrolladores usan JavaScript en esta área para añadir interactividad y funciones que mejoren la experiencia del usuario y hagan a internet mucho más disfrutable. 

JavaScript se ha expandido más allá del desarrollo de interfaz, que es donde comenzó. Recientemente, JavaScript ha llegado al back-end, o dorsal de desarrollo web. Esto quiere decir que los desarrolladores tienen acceso de interfaz a métodos CRUD (Create, Read, Update, Destroy; en español: Crear, Leer, Actualizar, Destruir) y hasta puede utilizarse en el motor de un sitio web.

Además, de acuerdo con W3techs, más del 90 % de todos los sitios web funcionan con JavaScript. Esto lo convierte en el líder primordial en tecnología de desarrollo web. Hablemos de algunos usos específicos de JavaScript en desarrollo web.

• Interactividad de interfaz o front-end: el desarrollo web mejora solamente por el aumento de la interactividad y funciones que JavaScript ofrece.
• Aplicaciones Web: las aplicaciones web son similares a los sitios, pero en su lugar pueden empacarse en una caja más compacta, que mejora el control de la seguridad y otros aspectos.
• Juegos de navegador: los navegadores web actuales han cambiado mucho; los desarrolladores pueden crear juegos robustos que funcionan en ellos. 
• Desarrollo web dorsal o back-end: el desarrollo web se ha transformado tanto, que JavaScript puede utilizarse para gestionar el back-end de sitios y aplicaciones.

Esta es una ilustración de los usos posibles de Javascript al día de hoy:

Ya que hablamos de los diferentes modos en que JavaScript puede usarse, hablemos de cómo funciona.

¿Cómo funciona JavaScript?

JavaScript está considerado como un lenguaje de programación del lado del cliente. Esto quiere decir que opera en el navegador del usuario y no funciona en un dispositivo externo. Un ejemplo de un lenguaje que no está del lado del cliente sería MySQL, un lenguaje del lado del servidor que gestiona peticiones de cualquier base de datos.

Por otro lado, JavaScript no requiere que nada se descargue a los dispositivos del usuario, ya que los navegadores modernos tienen el software requerido integrado a ellos. Esto hace que JavaScript sea más amigable con el usuario que otros lenguajes.

Esta imagen es un ejemplo de cómo JavaScript trabaja.

Esperamos que esto te dé una mejor idea de cómo opera este lenguaje. A continuación hablaremos sobre cómo utilizarlo en un sitio web.

¿Cómo añadir JavaScript a tu sitio web? 

Añadir JavaScript a tu sitio web es sencillo. Solo necesitas vincular tus archivos JavaScript desde tus archivos HTML. Si tienes alguna experiencia trabajando con HTML y CSS para el desarrollo web, entonces ya has experimentado algo similar.

Muy parecido al añadir CSS a tu HTML, existe una etiqueta HTML llamada «script» que te permite vincular a JavaScript los archivos que tu código puede usar para manipular el HTML y CSS en tu sitio.

Echemos un vistazo a cómo luce una etiqueta de HTML script. La siguiente línea de código es un ejemplo del script y su sintaxis.

<script src="tuArchivo.js"></script>

La línea de arriba conecta un archivo llamado «tuArchivo.js» (terrible nombre, pero sirve como un ejemplo) a tu archivo HTML, conectando ambos. Esto te permite escribir tu código en un archivo separado, lo que mantiene tu HTML limpio y más fácil de manejar. Utilizar el script con el atributo scr también se considera ampliamente como una buena práctica, porque conserva tus códigos separados uno de otro, lo que facilita actualizar y cambiar lo que sea con mínimos problemas.

La etiqueta script con src no es la única manera de añadir JavaScript a tu sitio, así que hablemos de otra. La etiqueta script también puede inyectar código JavaScript directamente en tu HTML, como lo verás a continuación.

<script type="texto/JavaScript">JavaScript código va aquí</script>

Es muy sencillo de completar y no luce tan diferente a añadir JavaScript de forma externa.

Aviso importante: como el navegador maneja JavaScript, es importante considerar que no todos los navegadores soportarán funciones de este lenguaje. De hecho, no todos los navegadores tendrán JavaScript disponible, así que considera esa posibilidad.

Ya que entiendes cómo añadir JavaScript a un sitio web, mira un ejemplo de cómo se ve un código JavaScript.

Ejemplo de JavaScript

JavaScript es robusto y puede usarse para llevar a cabo cosas asombrosas. Sin importar cuáles son tus planes de diseño o lo que esperas construir, aquí te mencionaremos algunas reglas que JavaScript requiere que sigas. A continuación, veremos un video que habla de la sintaxis y las reglas de este lenguaje.

Ahora veamos un gran ejemplo de lo que puedes crear con un simple cambiador de color usando un generador de número pseudo aleatorio.

/*Función para generar una cantidad hex para nuevos colores aleatorios BG*/function randomBgHex(){ permitir randomHex = Math.floor(Math.random()*900000) + 100000; documento.Selectordeconsulta('body').estilo.Colordefondo = `#${randomHex}`;}/*end randomBgHex*/

El código de arriba es un buen ejemplo de cómo puedes crear una función poderosa con solo unas líneas de código. Esto podrá parecer mucho, así que comencemos diseccionando esto en trozos de código más fáciles de manejar. 

Comenzamos declarando una función llamada randomBgHex.

función randomBgHex(){}

Luego creas una variable llamada randomHex. Y la asignas al valor de una ecuación matemática.

permitir randomHex = Math.floor(Math.random()*900000) + 100000;

El código de arriba usa el objeto Math y el método .floor() para regresar el entero más grande menor o igual a un número dado. Enseguida, el número se genera utilizando .random() que, sin un parámetro, regresa un número entre cero y menos de uno. Así que multiplicas el resultado por 900.000 más 100.000. Esta ecuación garantiza que el número que obtengas coincida con las necesidades de un número hexadecimal.

El valor de esta ecuación se almacena en la variable y se utiliza para crear colores. La siguiente línea de código apuntará al elemento y atributo HTML que deseas cambiar y luego insertará el número hex con un literal de cuerda.

documento.Selectordeconsulta('body').estilo.Colordefondo = `#${randomHex}`;

La primera parte del código de arriba selecciona el cuerpo de HTML y apunta al color de fondo. La segunda parte `#${randomHex}`utiliza un literal de cuerda (identificada como la comilla simple) que te permite concatenar (o unir) el # que identifica un número hexadecimal con el valor dentro de nuestra variable randomHex.

El resultado de esto equivaldría a algo similar a lo siguiente.

#236789

El hexadecimal de arriba te da un adorable color azul sombrío.

Puedes ver este código en acción visitando el repo GitHum que creamos asociado con la siguiente imagen.

Fuente de la imagen

Este código, como un todo, generaría un color aleatorio para el fondo del cuerpo HTML en cada carga de página. En algún punto, este código podría considerarse un «JavaScript Vainilla». Sin embargo, como ya existe una biblioteca llamada JS Vainilla, es mejor referirse a él como «JS Estándar» para evitar confusiones.

Dicho esto, debe recalcarse por qué la distinción es tan importante. La programación de bibliotecas de lenguajes utiliza una sintaxis ligeramente diferente al lenguaje en donde se crean. Así que veamos algunos ejemplos de bibliotecas JavaScript y las diferencias entre ellas y el código estándar.

Bibliotecas JavaScript

Existen varias bibliotecas JavaScript que pueden ayudar a mejorar la rapidez y claridad de tus esfuerzos de código. Las bibliotecas contribuyen a mantener tu código limpio y maximizan la velocidad y la eficiencia de escribir tu código de programación. Sin embargo, como resultado, la sintaxis cambia constantemente, así que hay una curva de aprendizaje para cada biblioteca.

Revisemos un par de ejemplos de bibliotecas que puedes usar en tu flujo de trabajo.

Biblioteca JavaScript Jquery 

Jquery es la biblioteca más popular para la programación JavaScript gracias a su longevidad y su flexibilidad de uso. Mejora la eficiencia y añade más funciones al lenguaje de programación al crear utilizando sus nuevas características. Pero, primero, veamos cómo difiere de la sintaxis de un JavaScript tradicional.

$('#superponer').on( "click", '#prev', funcion(){ currIdx--; si (currIdx < 0) { currIdx = 11; }}

Este ejemplo parece complejo, pero enfoquémonos en un solo punto, la función más exterior de este código.

$('#superponer').on( "click", '#prev',funcion(){}

Este código es Jquery válido, pero sin incluir la biblioteca Jquery podría arrojar un error si la usaras con JavaScript tradicional. Este código también incluye dos cosas que vale la pena resaltar: el selector $, un método de atajo para apuntar a objetos HTML; y el método .on() es un escucha de evento que espera oír un «clic» en la ventana del navegador.

Otra biblioteca popular es la que se conoce como React. Hablemos de ella y en cómo se diferencia del JS estándar.

Biblioteca JavaScript React

La biblioteca React ya es muy popular y se creó para facilitar el desarrollo de aplicaciones web. Es robusta y hoy en día tiene una gran cantidad de contribuyentes de código abierto que añaden, prueban y mantienen la biblioteca. Opera de forma distinta a la mayoría de bibliotecas, y es más compleja, pero revisemos la sintaxis para mayor claridad.

clase ListadeCompras extends React.Component { render() { return ( <div classname="lista-de-compras"> <h1>Lista de compras para {this.props.name}</h1> <ul> <li>Pan</li> <li>Leche</li> <li>Huevos</li> </ul> </div> ); }}

Como puedes ver, es mucho más diferente a tu código JavaScript estándar, o incluso de Jquery, si a esas vamos. En React, declaras tu HTML en tu JavaScript, y se traduce después de que el código corre, lo que es distinto a la aproximación del desarrollo web estandarizado.

Muchas otras bibliotecas y marcos de trabajo están disponibles para tu flujo de trabajo, y todos tienen diferencias en la sintaxis, características y flexibilidad. Elegir la correcta para ti requerirá de un poco de investigación y consideración de los diversos factores.

Comienza a aprender JavaScript hoy mismo

Este artículo te inicia en tu viaje hacia el aprendizaje de JavaScript, sin embargo puedes aprender más sobre los tipos de datos en javascript, las expresiones regulares, los arrays, strings, splits, las variables globales, cómo validar formularios y qué es un settimeout; entre otras muchas funciones de javascript.

Aun así, aprender JavaScript es fácil y existen muchos recursos en internet para ayudarte a programar con este lenguaje. No es necesario dominar el desarrollo web, pero esa es quizá la forma más simple de practicar tus habilidades de programación JavaScript.

Otras maneras en que puedes practicar incluyen sitios como CodePen, que proveen todo el software que necesitas para practicar tu trabajo como desarrollador JavaScript.