Convertir Jquery a Javascript

Como muchos saben, JavaScript es un lenguaje de programación del lado del cliente que se usa para hacer que las páginas web sean interactivas. Junto con HTML y CSS, es uno de los 3 pilares de la programación web front-end.

JavaScript gestiona, de hecho, el comportamiento de los elementos dinámicos de un sitio web, es decir, cómo reaccionan y cambian los contenidos (HTML) y los estilos gráficos (CSS) en la página web (por ejemplo, cuando hace clic en un botón podemos ver un menú o un formulario de inicio de sesión).

La programación en JavaScript era, sin embargo, muy compleja debido a las diferencias entre navegadores y, por ello, está despoblada entre los desarrolladores de “Jquery”, una librería que alineaba la forma de escribir código entre navegadores.

jQuery

Según Wikipedia:
“jQuery es una biblioteca de JavaScript para aplicaciones web, distribuida como software libre, distribuida bajo los términos de la Licencia MIT [1]. Fue creado con el objetivo de simplificar la selección, manipulación, manejo de eventos y animación de elementos DOM en páginas HTML, así como simplificar el uso de la funcionalidad AJAX, el manejo de eventos y la manipulación de CSS.

Sus características permiten a los desarrolladores de JavaScript abstraer interacciones de bajo nivel con el contenido de la página HTML. El enfoque modular de JQuery permite la creación simplificada de aplicaciones web versátiles y contenido dinámico. En 2020, jQuery es la biblioteca de JavaScript más utilizada en Internet, lo que significa que está presente en el 74,4 % de los 10 millones de sitios de Internet más populares según W3Techs [2]".

JQuery actualmente se considera una biblioteca obsoleta, ya que todas sus funciones se han implementado en el lenguaje JavaScript; a pesar de esto, muchas veces encontrarás fragmentos de código que todavía usan jQuery.
¿Cómo proceder en esos casos? ¡No te preocupes! Gracias a este breve artículo, comprenderás cómo traducir jQuery al lenguaje JavaScript.

jQuery CSS

En primer lugar, enfrentemos la conversión de los métodos para modificar el css, de JQuery a Javascript.
Lo primero que hay que hacer para editar un elemento HTML con Javascript es seleccionar este último.

// jQuery : seleccionar todos los elementos con clase “select”

$(".select");


// JavaScript : seleccionar el primer elemento encontrado con clase “select”

document.querySelector(".select");


// Javascript : seleccionar todos los elementos con clase “select”

document.querySelectorAll(".select");

Modificar las clases CSS

• Añadir una clase css:

En jQuery:

$element.addClass(“class-name”);

En JavaScript:

element.classList.add(“class-name”);

• Quitar una clase css:

En jQuery:

$element.removeClass(“class-name”);

En JavaScript:

element.classList.remove(“class-name”);

• Añadir / quitar una clase css si esta está presente o no:

En jQuery:

$element.toggleClass(“class-name”);

En JavaScript:

element.classList.toggle(“class-name”);

• Controlar si un elemento html tiene una clase:

En jQuery:

$element.hasClass(“class-name”);

En JavaScript:

element.classList.has(“class-name”);

Modificar el estilo CSS

Si por ejemplo quisiéramos darle un margen de 10px a un <div>, de jQuery a JavaScript escribiríamos:

// jQuery:

$div.css({ margin: "10px" }) 


// JavaScript:

div.style.margin= "10px"

jQuery on

El segundo concepto fundamental para la manipulación del DOM es el de eventos.

Veamos cómo agregar un evento al clic de un botón, con ambos métodos:

// jQuery:

$(".button").on( ‘click’ ,  function(event) { 

// codigo para ejecutar

});
  

// JavaScript:

document.querySelector(".button").addEventListener("click", (event) => {

// codigo para ejecutar

});

jQuery ready

Otra función fundamental es la función document ready, una función que inicia el código cuando la página ha terminado de cargarse.
En este caso, la conversión de jQuery a js document ready sería la siguiente:

// jQuery:

$(document).ready(function() { 

// codigo para ejecutar

});


// JavaScript:

document.addEventListener("DOMContentLoaded", () => {

// codigo para ejecutar

});

JQUERY AJAX

Las llamadas Ajax son una de las principales razones por las que jQuery se ha extendido; de hecho, hace años, cada navegador implementó diferentes métodos para realizar llamadas asíncronas y los desarrolladores tuvieron que reescribir el código para cada navegador en el que se ejecutaría el sitio. ¡Una locura!

La biblioteca jQuery creó una sintaxis única para que todos los navegadores realicen llamadas asincrónicas y esto lo hizo absolutamente exitoso.

Sin embargo, hasta la fecha, todos los navegadores están alineados y actualizados y todos implementan el método fetch para realizar llamadas asincrónicas. Entonces, veamos cómo traducir una llamada ajax con una fetch.

jQuery:

$.ajax(

    {
        'url': 'https://url/to/your/api',
        'method': 'GET',
        'success': function(response){      
            console.log(response);
        },

        'error':function(){
            alert('errore!');
        }
    }
);

Javascript :

fetch('https://url/to/your/api').then(function(response){

    console.log(response);

}).catch(function(){

    alert('errore!');
});

En resumen, jQuery nació como una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Se ha vuelto bastante famoso por su filosofía de "Escribe menos, haz más" pero, como hemos visto, no ha cambiado mucho con respecto al JavaScript Vanilla actual. Por ello, conviene, hoy por hoy, aprender Javascript directamente e intentar traducir jQuery a Javascript para alinear tu código con el de otros profesionales, con la mayor frecuencia posible.