JavaScript es un poderoso lenguaje de programación desarrollado para Netscape Navigator en 1995. Desde entonces, todos los navegadores web modernos lo han adoptado para agregar funcionalidad a las páginas web y, más recientemente, a las aplicaciones web.
A lo largo de los años desde su creación, JavaScript se ha convertido en una potencia. Ya no se usa solo en la web, ahora se puede encontrar en casi todas partes, incluido el espacio.
En esta publicación, cubriremos el origen, la evolución, el panorama actual y el futuro del lenguaje de programación JavaScript. Vayamos directo a la diversión sin más dilación.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación inventado para satisfacer las necesidades del cambiante panorama de Internet. Desde el principio, ganó popularidad y utilidad, y ahora está presente no solo en el desarrollo web. JavaScript es el buque insignia del desarrollo web interactivo, por lo que no es universal en esta industria. Antes de profundizar en la madriguera del conejo, mira este video sobre la historia de JavaScript.
La programación con JavaScript se ha extendido a todo, desde la programación de computadoras hasta la programación de hardware de la NASA. Además, desde sus inicios, Node.js ha facilitado el soporte de JavaScript para otros fines. Echemos un vistazo más de cerca a algunos de los siguientes casos de uso.
¿Para qué sirve JavaScript?
En el entorno moderno de hoy, JavaScript se usa para todo, gracias a la introducción de Node.js. No importa cómo se ajuste, esta tecnología crea un software sólido para empresas de todo el mundo. Además, empresas como LinkedIn y Medium lo utilizan para crear plataformas en las que los usuarios pueden acceder a sus servicios.
JavaScript puede crear todo tipo de software, como juegos, programas de computadora, aplicaciones web e incluso tecnologías como blockchain. Sin embargo, se puede decir que JavaScript es el lenguaje de programación más popular en Internet. Por ejemplo, más de 125 000 puestos de trabajo en LinkedIn buscan especialistas que trabajen con JavaScript.
Ahora que hemos cubierto el alcance de JavaScript en la industria laboral, hablemos más sobre su uso más común, el desarrollo web.
JavaScript para la creación de páginas web
El uso más popular de JavaScript es el desarrollo web y es una de las herramientas más poderosas que un desarrollador puede tener en su barra de herramientas. Los desarrolladores usan JavaScript en el desarrollo web para agregar interactividad y funcionalidad para mejorar la experiencia del usuario y hacer que Internet sea mucho más agradable.
JavaScript ha ido mucho más allá del desarrollo front-end con el que comenzó. Más recientemente, JavaScript se ha expandido al backend de desarrollo web y se puede usar en toda la pila. Esto significa que los desarrolladores tienen acceso frontal a los métodos CRUD (Crear, Leer, Actualizar, Destruir) y ahora incluso pueden usarse en el backend de un sitio web.
Además, según W3techs, más del 90% de todos los sitios web usan JavaScript. Esto lo convierte en el líder más famoso en tecnología de desarrollo de sitios web. Echemos un vistazo a usos más detallados de JavaScript en el desarrollo web.
- Interactividad frontal: El desarrollo web solo mejora debido a la mayor interactividad y funcionalidad que ofrece JavaScript.
- aplicaciones de internetR: Las aplicaciones web son similares a los sitios web, pero están empaquetadas en una pequeña caja ordenada que mejora el control de seguridad y más.
- juegos de navegador: El navegador web moderno ha recorrido un largo camino; los desarrolladores incluso crean juegos sólidos que se ejecutan en el navegador.
- Desarrollo web back-end: El desarrollo web ha recorrido un largo camino, y ahora JavaScript es tan robusto que incluso se puede usar para administrar el backend de páginas web y aplicaciones web.
Aquí hay una ilustración de todos los posibles casos de uso de JS hoy:
Ahora que hemos cubierto las diferentes formas de usar JavaScript, hablemos de cómo funciona JavaScript.
¿Cómo funciona JavaScript?
JavaScript se considera un lenguaje de secuencias de comandos del lado del cliente, lo que significa que se ejecuta en el navegador del usuario y no en un dispositivo externo. Un ejemplo de un lenguaje que no es del lado del cliente podría ser MySQL, el lenguaje del lado del servidor que maneja cualquier solicitud de base de datos.
JavaScript tampoco requiere que se descargue nada en los dispositivos del usuario, porque los navegadores modernos tienen integrado el software necesario. Esto hace que JavaScript sea mucho más fácil de usar que otros lenguajes.
Esta imagen es un ejemplo de cómo funciona JacaScript detrás de escena, que es diferente de lo que vemos.
Ahora que tiene una mejor idea de cómo funciona JavaScript, pasemos a discutir cómo usar JavaScript en su sitio web.
¿Cómo agregar JavaScript a su sitio web?
Es fácil agregar JavaScript a su sitio web; solo necesita combinar archivos JavaScript de archivos HTML. Si tiene alguna experiencia trabajando con HTML y CSS para el desarrollo web, ya ha experimentado algo similar.
Al igual que con la adición de CSS a HTML, hay una etiqueta HTML llamada «script» que le permite vincular a archivos JavaScript para que el código pueda usarse para manipular el HTML y el CSS de su sitio web.
Echemos un vistazo a cómo se ve la etiqueta de secuencia de comandos HTML. La siguiente línea de código es un ejemplo de una etiqueta de secuencia de comandos y su sintaxis.
<script src="https://blog.hubspot.com/website/yourFile.js"></script> La línea anterior vincula un archivo llamado «https://blog.hubspot.com/website/yourFile.js» (una convención de nomenclatura terrible, pero sirve como ejemplo) con un archivo HTML que vincula los dos. Esto le permite escribir el código en un archivo separado, manteniendo su código HTML limpio y más manejable. El uso de una secuencia de comandos con el atributo src también se considera una buena práctica, ya que mantiene su código separado entre sí, lo que facilita la actualización y el cambio según sea necesario con una molestia mínima.
La etiqueta de script src no es la única forma de agregar JavaScript a su sitio web, pero veamos otra forma. La etiqueta del script también puede inyectar código JavaScript directamente en HTML. Así que veámoslo más a fondo.
<script type="text/JavaScript">JavaScript code goes here</script> Es bastante simple de completar y no es muy diferente de agregar JavaScript externamente.
Un descargo de responsabilidad digno de mención: Dado que su navegador es compatible con JavaScript, tenga en cuenta que no todos los navegadores son compatibles con todas las funciones de JavaScript. Además, no todos los navegadores tendrán habilitado JavaScript, asegúrese de planificarlo.
Ahora que sabe cómo agregar JavaScript a su sitio, consulte el ejemplo de código JavaScript a continuación.
ejemplo de JavaScript
JavaScript es robusto y se puede utilizar para hacer cosas increíbles. Independientemente de los planes de diseño que tenga o esté a punto de construir, hay ciertas reglas que JavaScript debe cumplir. A continuación, veremos un video que cubre la sintaxis y las reglas de JavaScript.
Ahora veamos un gran ejemplo de cómo crear un cambiador de color simple con un generador de números pseudoaleatorios.
/*Function for generating a hex number for new random BG colors*/function randomBgHex(){
let randomHex = Math.floor(Math.random()*900000) + 100000;
document.querySelector('body').style.backgroundColor = `#${randomHex}`;
}/*end randomBgHex*/
El código anterior es un gran ejemplo de cómo puede crear una función poderosa con solo unas pocas líneas de código. Esto puede parecer mucho, así que comencemos dividiéndolo en fragmentos de código más manejables.
Comenzamos declarando una función llamada BGHex aleatorio.
function randomBgHex(){}Luego creas una variable llamada maleficio aleatorio. Y asígnale el valor de la ecuación matemática.
let randomHex = Math.floor(Math.random()*900000) + 100000;El código anterior utiliza Matemáticas objeto yo .piso() método para devolver el entero más grande menor o igual que el número especificado. Entonces el número se genera con . aleatorio (), que, sin parámetro, devuelve un número entre cero y menos de uno. Así que multiplicas ese resultado por 900 000 más 100 000. Esta ecuación asegura que el número resultante corresponderá a las necesidades de un número hexadecimal.
El valor de esta ecuación luego se almacena en una variable y se usa para crear nuestros colores. La siguiente línea de código señalará el elemento HTML y el atributo que desea cambiar, y luego insertará un número hexadecimal usando un literal de cadena.
document.querySelector('body').style.backgroundColor = `#${randomHex}`;La primera parte del código anterior selecciona el contenido del código HTML y elige un color de fondo. Segunda parte `# $ {hexadecimal aleatorio}` usa un carácter literal (denotado por una comilla invertida «) le permite concatenar – o concatenar – # que identifica un número hexadecimal con un valor dentro de nuestra variable maleficio aleatorio.
El resultado de esto sería similar al siguiente.
#236789El hexadecimal de arriba produce un hermoso color azul sombrío.
Puede ver este código en acción visitando el repositorio de GitHub que creé asociado con la siguiente imagen.
Este código en su conjunto generaría un color de fondo aleatorio del contenido HTML cada vez que se carga la página. Este código en algún momento se consideraría «Vanilla JavaScript». Sin embargo, dado que ahora existe una biblioteca llamada Vanilla JS, es mejor llamarla «Standard JS» para evitar confusiones.
Dicho esto, cabe señalar por qué la distinción es tan importante. Las bibliotecas de lenguajes de programación usan una sintaxis ligeramente diferente a la del lenguaje para el que fueron creadas. Entonces, veamos algunos ejemplos de bibliotecas de JavaScript y las diferencias entre ellas y el código estándar.
Bibliotecas JavaScript
Hay varias bibliotecas de JavaScript que pueden ayudarlo a aumentar la velocidad y la claridad de sus actividades de codificación. Las bibliotecas ayudan a mantener su código limpio y maximizar la velocidad y la eficiencia de escribir código de programación. Sin embargo, como resultado, la sintaxis cambia con frecuencia, por lo que existe una curva de aprendizaje para cada biblioteca.
Veamos algunos ejemplos de bibliotecas que puede usar en su flujo de trabajo.
Biblioteca JavaScript JQuery
Jquery es la biblioteca principal para la programación de JavaScript debido a su antigüedad y flexibilidad de uso. Además, mejora el rendimiento y agrega aún más funcionalidad al lenguaje de programación al desarrollar sus nuevas funciones. Pero primero, veamos en qué se diferencia la sintaxis del JavaScript tradicional.
$('#overlay').on( "click", '#prev', function(){
currIdx--;
if (currIdx < 0) {
currIdx = 11;
}
}
Este ejemplo parece complejo, pero centrémonos en un punto, la función más externa de este código.
$('#overlay').on( "click", '#prev',function(){}Este código es Jquery válido, pero sin incluir la biblioteca Jquery producirá un error cuando se use con JS tradicional. Este código también incluye dos cosas a tener en cuenta: el selector $, un método abreviado para apuntar a objetos HTML. Y .en() El método es un detector de eventos que escucha «clics» en la ventana del navegador.
Otra biblioteca popular es React. Hablemos de qué es React y en qué se diferencia del JS estándar.
Reaccionar biblioteca de JavaScript
La biblioteca React es una biblioteca popular diseñada para ayudarlo a crear aplicaciones web. Es sólido y hoy tiene una gran cantidad de colaboradores de código abierto que agregan, prueban y mantienen la biblioteca. Funciona de manera diferente a la mayoría de las bibliotecas y es más complejo, pero veamos la sintaxis solo para mayor claridad.
class ShoppingList extends React.Component {
render() {
return (
<div classname="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
</ul>
</div>
);
}
}
Como puede ver, esto es muy diferente de JavaScript estándar e incluso de Jquery. En React, declara el código HTML en su JavaScript y se procesa cuando se ejecuta el código, lo que difiere del enfoque de desarrollo web estándar.
Hay muchas otras bibliotecas y marcos disponibles para su flujo de trabajo, todos con diferente sintaxis, funcionalidad y flexibilidad. Elegir el adecuado para usted requerirá un poco de investigación sobre estos factores y debe considerarlos cuidadosamente.
Comienza a aprender JavaScript hoy
Esta publicación tiene todo lo que necesita saber para comenzar su viaje de JavaScript, incluidas algunas industrias y aplicaciones. Esta publicación es solo una introducción al idioma, por lo que aprender es diferente.
Sin embargo, aprender JavaScript es fácil y hay muchos recursos en Internet para aprender a programar JavaScript. Aprender JavaScript no requiere que comprenda el desarrollo web, pero probablemente sea la forma más fácil de practicar sus habilidades de programación con JavaScript.
Otras formas en que puede practicar incluyen el uso de sitios como CodePen, que proporciona todo el software que necesita para aprender y hacer su trabajo como desarrollador de JavaScript.
