No se puede llegar muy lejos en la tecnología sin entrar en JavaScript. Lo más probable es que estés aquí, ahora mismo, porque has oído el término y sabes que tienes que entenderlo. Veamos entonces ¿Qué es JavaScript?
La buena noticia es que: JavaScript no da tanto miedo como suena y sí, puedes aprender a usarlo.
1. ¿Qué es JavaScript? Una explicación detallada
Si esperas hacer una carrera en la tecnología, tu pregunta podría sonar más como..: “¿Qué es JavaScript y lo necesito?”
Si estás interesado en el desarrollo de la web, la respuesta es un rotundo sí. Así que con eso fuera del camino, vamos a profundizar un poco más en cómo funciona el JavaScript.
EL PODER DE 3: HTML, CSS Y JAVASCRIPT
Cuando la mayoría de la gente aprende a codificar, empieza con el viejo y buen HTML y CSS. De ahí, pasan a JavaScript. ¡Lo cual tiene sentido! Los tres elementos juntos forman la columna vertebral del desarrollo web.
Para aquellos que no están familiarizados:
- HTML. Es la estructura de tu página, los encabezados, el cuerpo del texto, las imágenes que quieras incluir…
- CSS. Controla el aspecto de la página (es lo que usarás para personalizar las fuentes, los colores de fondo, etc.)
- JavaScript es el tercer elemento mágico. Una vez que has creado tu estructura (HTML) y tu onda estética (CSS), JavaScript hace que tu sitio o proyecto sea dinámico.
JavaScript se utiliza para automatizar y animar
He mencionado antes que el JavaScript es un “lenguaje de scripts”. Los lenguajes de programación son lenguajes de codificación utilizados para automatizar procesos que de otra manera los usuarios tendrían que ejecutar por su cuenta, paso a paso.
Sin embargo, cualquier cambio en las páginas web que se visitan requeriría recargar la página manualmente o navegar por una serie de menús estáticos para llegar al contenido que se busca.
Un lenguaje de scripts como JavaScript (JS, para los que saben) hace el trabajo pesado diciendo a los programas de ordenador como sitios web o aplicaciones web que “hagan algo”.
En el caso de JavaScript, esto significa decir a esas características dinámicas descritas anteriormente que hagan lo que sea que hagan, como decir a las imágenes que se animen a sí mismas, a las fotos que se muevan a través de una presentación de diapositivas, o a las sugerencias de autocompletar para responder a las indicaciones.
Es el “guión” en JavaScript que hace que estas cosas sucedan aparentemente por sí solas.
Mientras tanto, debido a que JavaScript es una parte integral de la funcionalidad de la web, todos los principales navegadores web vienen con motores incorporados que pueden renderizar JavaScript.
Esto significa que los comandos JS pueden ser escritos directamente en un documento HTML y los navegadores web serán capaces de entenderlos.
En otras palabras, el uso de JavaScript no requiere descargar ningún programa o compilador adicional.
2. ¿Para qué se usa JavaScript?
Hemos cubierto esto un poco en el punto anterior, pero aquí hay una lista rápida de las principales cosas para las que se usa JavaScript.
- Añadiendo interactividad a los sitios web, si quieres que un sitio web sea más que una página estática de texto, necesitarás hacer algo de JavaScripting.
- Desarrollo de aplicaciones para móviles: JavaScript no es sólo para sitios web… se utiliza para crear esas aplicaciones que tienes en tu teléfono y en tu tableta también.
- Creación de juegos basados en el navegador web: ¿alguna vez has jugado a un juego directamente desde tu navegador web? JavaScript probablemente ayudó a que eso sucediera.
- El desarrollo web de la parte de atrás, sí, JavaScript se usa mayormente en la parte delantera de las cosas, pero es un lenguaje de scripts lo suficientemente versátil para ser usado en la infraestructura de la parte de atrás, también.
3. ¿Cómo funciona JavaScript?
JavaScript está incrustado en una página web o está incluido en un archivo .js.
JavaScript es también un lenguaje del “lado del cliente” (en lugar de un lenguaje del “lado del servidor”), que es una forma elegante de decir que se descarga en las computadoras de los visitantes del sitio y luego se procesa.
¿Cómo se añade JavaScript a un sitio web?
En realidad, añadir código JavaScript a una página web es un proceso bastante simple (y familiar si has hecho algún tipo de codificación con HTML y CSS).
El JavaScript puede ser añadido directamente al código de una página usando etiquetas <script> y dándoles el atributo de tipo text/javascript.
Honestamente, JavaScript se ve muy similar a agregar CSS a un sitio. Aquí hay una comparación lado a lado:
CSS:
<estilo>
El CSS va aquí
</estilo>
JavaScript:
<script type=”text/javascript”>
El código JavaScript va aquí
</script>
¡Voila! El código JavaScript también puede ser añadido a una página como un archivo de encabezado separado con la extensión .js (generalmente se hace si se trata de un código que se quiere incluir en varias páginas a la vez).
El script se descarga y procesa en el navegador de cada individuo, convirtiéndolo en los objetos y efectos dinámicos que ven en su pantalla.
Una advertencia, sin embargo: ya que JavaScript es procesado por los navegadores individuales, es posible que un usuario pueda tener JavaScript desactivado en su extremo.
Los sitios que usan JavaScript necesitan tener un plan de respaldo para evitar que se rompa cuando esto suceda.
4. ¿Qué es Vanilla JavaScript?
Cuando escarbas en JavaScript eventualmente escucharás el término “Vanilla JavaScript”. ¿Y eso qué significa?
JavaScript vainilla es el lenguaje JavaScript “tal cual” sin usar ninguna herramienta para hacer el proceso de codificación más fácil o más eficiente.
Para darte una idea de cómo es el Vanilla JavaScript, considera el siguiente ejemplo básico de código JavaScript.
Si quisieras que los usuarios recibieran un mensaje de confirmación de “gracias por registrarse” después de inscribirse en una oferta o servicio de un sitio web, lo codificarías directamente en una página HTML (entre <script> tags) como esta:
<script>
window.onload = initAll;
function initAll() {
document.getElementById(“submit”).onclick = submitMessage;
}
función submitMessage() {
var saludo = document.getElementById(“nombre”).getAtributo(“valor”);
document.getElementById(“headline”).innerHTML = “Gracias por unirse a nuestra lista de correo electrónico”, + saludo;
return false;
}
</script>
Vanilla JS como este puede ser usado para crear proyectos de JavaScript, pero a medida que te familiarizas con el lenguaje JavaScript, hay diferentes herramientas que puedes implementar para hacer JS más fácil y eficiente de usar.
5. JavaScript avanzado: Frameworks y Bibliotecas (Herramientas para hacer JS más fácil)
Como se puede imaginar, el uso de JavaScript vainilla solo toma… para siempre y para los desarrolladores web el tiempo es dinero.
Es por eso que los frameworks y librerías de JavaScript (herramientas que hacen a JS mucho más fácil de usar) son tus nuevos mejores amigos.
JQUERY-LA BIBLIOTECA O.G. DE JAVASCRIPT
Cuando trabajas con JavaScript, notarás que las funciones y características de JS se muestran regularmente en múltiples sitios web o aplicaciones web, cosas como animaciones de menú y fundidos, formularios de carga de archivos y galerías de imágenes.
Aunque podrías codificar cada una de estas cosas desde el principio cada vez que lo necesites, tu vida de codificador se sentirá mucho más fácil si utilizas bibliotecas de codificación como jQuery en su lugar.
La librería jQuery está compuesta por funciones de codificación de JavaScript que pueden ser realizadas a través de comandos jQuery de una sola línea. Por ejemplo, el ejemplo de código JavaScript anterior se ve así si se realiza usando código jQuery en su lugar:
<script>
$(“#submit”).click(function () {
saludo var = $(“#nombre”).val();
$(“#headline”).html(“Gracias por unirse a nuestra lista de correo electrónico, ” + saludo);
devuelve falso;
});
<script/>
Como puedes ver, el enfoque de programación de jQuery es mucho más conciso y puede ser reutilizado en cualquier momento que quieras realizar la misma función de JavaScript mientras codificas un sitio web o una aplicación web.
Además de ejemplos como el anterior (que se consideran fragmentos de jQuery – fragmentos de código insertados directamente desde la biblioteca jQuery para realizar funciones dedicadas), el código jQuery puede ser reunido para crear plugins más complicados.
Los plugins de jQuery pueden ser encontrados directamente desde el repositorio de la interfaz de usuario de jQuery, donde el código fuente está disponible para copiar y pegar.
React JS – El mejor amigo del desarrollador de Front-End
Junto con jQuery, React JS es otra biblioteca clave de JavaScript para desarrolladores web. React JS es una librería JavaScript de primera línea desarrollada por Facebook en 2011 y diseñada específicamente para construir interfaces de usuario.
Si no estás familiarizado, las UIs son la colección de menús en pantalla, barras de búsqueda, botones y cualquier otra cosa con la que alguien interactúa para usar un sitio web o una aplicación y aunque PUEDES construirlas minuciosamente a mano con JavaScript, ¿quién tiene tiempo para eso?
React permite a los desarrolladores utilizar código preescrito para los objetos y efectos repetitivos del menú (como formularios interactivos, funciones de auto-completar, animaciones de menú de entrada o salida, etc.) y también mejora la velocidad y el rendimiento general del sitio a través de la función llamada Virtual DOM (que puede leerse aquí).
Aprender a usar React JS hará su vida mucho más fácil como desarrollador de JavaScript y también lo hará mucho más “contratable”.
Otras librerias y frameworks JavaScript
Mientras que las bibliotecas JS como jQuery y React funcionan como navajas digitales del ejército suizo para necesidades de codificación individuales, los desarrolladores de front-end pueden llevar las cosas un paso más allá utilizando herramientas llamadas marcos JavaScript.
Extendiendo más allá de la funcionalidad de parches de jQuery, los marcos JS proveen a los desarrolladores de JavaScript con plantillas completas para sitios web o aplicaciones web.
Los marcos JS crean espacios en esas plantillas donde se recomienda que vaya el código JS, así como código pre-escrito (muy parecido a jQuery) que puede ser conectado a esos espacios.
Mientras que hay un número de marcos que pueden ser considerados como estándares de la industria (por ejemplo, Vue y Angular), su mejor apuesta al escoger uno para aprender es considerar empleadores o clientes potenciales e identificar cuál marco JS – si alguno – les favorece.
Tenga en cuenta que, una vez que ha aprendido un marco, es relativamente fácil elegir más.
5. Cómo aprender JavaScript
¿El truco aquí? Mientras que HTML y CSS son las habilidades que te permitirán codificar una página web básica, JavaScript es el lenguaje de programación que dará vida a esa página.
Aunque el HTML y el CSS por sí mismos te pondrán en posición de hacer el trabajo de un desarrollador principiante, tomarse el tiempo para aprender JavaScript ayudará a que tus perspectivas de trabajo aumenten exponencialmente.
Si estás listo para un tutorial completo de JavaScript, no busques más. Este curso dirigido por un instructor le guiará a través de los entresijos del lenguaje JavaScript y de la biblioteca jQuery, así como de HTML, CSS y otras habilidades críticas para desarrolladores web.
