Si has comenzado a aprender desarrollo web, te habrás dado cuenta que más y más puertas comienzan a abrirse. Mientras la curva de aprendizaje comienza a nivelarse, varios elementos interactivos, optimizaciones y todo aspecto relacionado se vuelve algo muy común. Sea cual sea la razón por la que decidiste estudiar desarrollo web, ya sea con un maestro, en línea o independientemente, probablemente hayas escuchado que la elección más popular es aprender JavaScript. Después de todo, ¡Es EL lenguaje del internet! Pero, ¿Qué tal si te digo que existe otra opción? En este tutorial, explicaremos la diferencia entre JavaScript y jQuery.
Te explicaré todo sobre ambos lenguajes de programación, para qué sirven, sus ventajas y desventajas y mucho más. Más adelante, cuando hayamos comprendido ambos, los compararemos y contrastaremos desde diferentes perspectivas, accesibilidad de código, oportunidades laborales y mucho más. Entonces, no esperemos más, ¡Comencemos!
Contenidos
- 1. JavaScript y jQuery - El Dilema
- 2. jQuery es JavaScript
- 2.1. ¿Qué es JavaScript?
- 2.2. ¿Qué es jQuery?
- 3. jQuery y JavaScript en Código
- 3.1. Conclusión Temprana
- 3.2. Demos un Paso Atrás
- 3.3. Segunda Conclusión Temprana
- 3.4. Objetivos Profesionales
- 4. Funcionalidad Específica
- 4.1. Compatibilidad entre Navegadores
- 4.2. Manipulación DOM
- 4.3. Animaciones y Efectos
- 4.4. APIs
- 5. Conclusión
JavaScript y jQuery - El Dilema
Cuando decides aprender Javascript y buscas soluciones de problemas en línea, encuentras respuestas que sencillamente dicen, "hazlo con jQuery".
La Oferta Activa más Reciente Ahora:
GET 50% OFF
DataCamp Black Friday Sale
During this DataCamp Black Friday, you can access the top-rated courses with a 50% discount. Enroll now for way less!
Tu reacción podría haber sido, "¿Qué es jQuery?", pensaste que sólo tenías que aprender Javascript, pero ¿Existe una alternativa? Creo que no estabas preparado para este dilema entre JavaScript y jQuery...
O tal vez te abarcaste el dilema desde un punto de vista distinto. jQuery fue el método más recomendado para tu sitio web, pero has leído que JavaScript puede hacer todo lo que jQuery puede y mucho más, lo cual te hace un mejor desarrollador.
Ahora seguramente te estás preguntando, "¿Qué es JavaScript?", ¿Por qué no puede ser todo más sencillo?, ¿Puedo solamente usar jQuery?’
Pero espera, mantén esos pensamientos un momento — ¿Te confundiría aún más si te dijera que aprender JavaScript & jQuery NO son dos opciones totalmente distintas?
jQuery es JavaScript
Podríamos haber abarcado el dilema entre aprender JavaScript y jQuery como si fuera una batalla entre ambas tecnologías, pero en realidad la diferencia entre JavaScript y jQuery es que jQuery es solamente una manera distinta de usar JavaScript.
jQuery se conoce comúnmente como un marco de trabajo o biblioteca. Pero antes de analizar ambos términos, nos aseguraremos que nadie tenga dudas sobre, "¿Qué es JavaScript?".
¿Qué es JavaScript?
JavaScript es el lenguaje de programación del navegador, o al menos, hasta muy recientemente - su alcance ha llegado mucho más allá de la ventana del navegador hasta usos como código del lado del servidor.
Su propósito principal es como lenguaje de programación del lado del servidor, escrito en cada navegador de internet, se responsabiliza de los elementos interactivos y dinámicos de un sitio web, tales como atender y alcanzar la opinión del usuario.
Pero, ¿Qué se puede decir sobre jQuery?
¿Qué es jQuery?
Como lo hemos explicado, jQuery es una biblioteca de JavaScript. Esto básicamente significa que es una colección de código JavaScript que puede accederse con una línea de código simplificada, por lo que facilita a los desarrolladores la implementación de JavaScript sin tener que escribir código JavaScript complejo, gracias al código previamente escrito empaquetado en jQuery.
Si estás familiarizado con Bootstrap, una buena analogía sería la relación entre CSS y Bootstrap. Bootstrap es simplemente una colección de comandos CSS que hacen más fácil y rápido añadir estilo a páginas web. jQuery es para JavaScript lo que Bootstrap es para CSS.
Para quienes no conocen Bootstrap, examinemos una tercera analogía para nuestro dilema sobre la diferencia entre JavaScript y jQuery.
Imagina que estás en un bar con tu amigo David. David ha tomado demasiadas cervezas y está hablando muy fuerte. Quieres que David deje de avergonzarte y que deje de hablar tan fuerte.
Para resolverlo, le explicarás a David que has visto a algunas mujeres al fondo del bar que han estado mirando hacia su dirección.
Le explicas que el caballero que estaba sentado a un lado de la mesa junto a ustedes, se ha cambiado de lugar. Le dices a David que su esposa no apreciaría saber que algunos detalles de su relación son compartidos con todos en el bar.
David deja de hablar. Esto es JavaScript haciendo que David deje de hablar.
La estrategia jQuery sería simplemente la siguiente:
‘Deja de hablar, David’.
David deja de hablar. Has logrado lo mismo con menos palabras y de manera más fácil.
Los Hallazgos Más Apreciados
¿Buscas información más detallada sobre temas relacionados? Hemos reunido artículos similares para que puedas dedicar más tiempo a este maravilloso tema. ¡Echa un vistazo!
jQuery y JavaScript en Código
En la primer lección del "Tutorial Interactivo jQuery: Aprenda Cómo Usar Efectos & Eventos jQuery" se marca la diferencia entre el código de JavaScript y jQuery.
Este es un ejemplo de cómo un botón HTML se abre y cierra durante el inicio de sesión.
Este es el código JavaScript:
const login = document.getElementById("login");
const loginMenu = document.getElementById("loginMenu");
login.addEventListener("click", () => {
if(loginMenu.style.display === "none"){
loginMenu.style.display = "inline";
} else {
loginMenu.style.display = "none";
}
});
Mientras que este es el código jQuery:
$("#login").click(() => {
$("#loginMenu").toggle()
});
Lo que tomó nueve líneas de código en JavaScript, se logró con sólo tres líneas de código en jQuery.
Conclusión Temprana
Parece que no vale la pena la discusión, ¿Cierto? Usa jQuery.
Eso habría sido simple hace una década, pero en el 2018 la relevancia de jQuery en el desarrollo web va en declive, y los ejemplos como el código anterior son raros.
Aún hay razones para aprender y usar jQuery, pero si la pregunta es, ¿Aprender JavaScript o jQuery? está incrementando la necesidad por entender y saber usar JavaScript, con sus nuevas competencias hace redundante la funcionalidad de jQuery.
Demos un Paso Atrás
Para demostrar otro argumento sobre la diferencia entre JavaScript y jQuery, vamos a dar un paso atrás y ampliar nuestra analogía un poco más. Has decidido simplemente decirle a David que se calle. Mientras que es una estrategia efectiva para alcanzar tu meta, David está molesto y de malas en el taxi que comparten de regreso a casa.
Si hubieras utilizado la estrategia JavaScript para decirle a David que bajara su voz, podrías compartir sus emociones y mantener su buen humor. Tus poderes de persuasión habrían sido mejores con la estrategia JavaScript, incluso si hubiera significado más esfuerzo.
De manera similar, al aprender JavaScript tus competencias de desarrollo web serán mucho mejores que las que tendrías si sólo aprendieras jQuery. Tal vez decirle a David que guarde silencio sin hacerlo sentir mal, sería impredecible.
En comparación, el comportamiento del comando jQuery podría ser exactamente lo que necesitas, pero es difícil estar seguro sin entender antes el código detrás del funcionamiento de jQuery. Y claro, como jQuery es código JavaScript, tendrás que aprender JavaScript para entender completamente cómo funciona cada comando jQuery.
Es lógico que JavaScript puede hacer todo lo que jQuery puede, y mucho más, porque repitiendo otra vez para dar énfasis, jQuery es JavaScript.
Segunda Conclusión Temprana
Entonces, ¿Cuál es la respuesta? La diferencia entre JavaScript y jQuery es que jQuery es más simple y fácil pero JavaScript es más poderoso y no hace enojar a David. Entonces, la pregunta entre aprender JavaScript o jQuery, ¿Es aprender JavaScript?
Bueno, no realmente. Desafortunadamente, no hay una respuesta general al dilema entre aprender JavaScript o jQuery. Ya sea que necesites jQuery o JavaScript, dependerá de tus objetivos profesionales y la funcionalidad requerida en tu proyecto.
Objetivos Profesionales
Si tu objetivo es ser un desarrollador front-end, la respuesta a la pregunta jQuery y JavaScript es sencilla: tienes que aprender JavaScript. Algunos anuncios de trabajo requerirán jQuery pero para un empleador, seguramente preferirá a los candidatos competentes en JavaScript que a los competentes en jQuery.
Incluso si la compañía utiliza jQuery ampliamente, se asume que el candidato que sabe JavaScript puede aprender jQuery fácil y rápidamente. Aprender JavaScript podría ser más difícil, incluso si dominas jQuery.
Si tu objetivo es ser un diseñador web independiente, JavaScript podría no ser necesario. Si creas sitios web para clientes en un sistema de gestión de contenido como WordPress, la necesidad de JavaScript podrá ser manejada por jQuery o plugins estarán disponibles gratuitamente para añadir funcionalidad a tu sitio.
La gran mayoría de sitios web fueron creados sin la necesidad de código personalizado JavaScript. Entonces si reconoces qué tipo de funcionalidad requiere el sitio web para escribir código JavaScript personalizado o qué no, hay mucho trabajo para un diseñador web con habilidades HTML, CSS y jQuery.
Hasta aquí, he resuelto cuestiones sobre qué es JavaScript y qué es jQuery. Debería estar clara la diferencia entre JavaScript y jQuery, pero el debate entre JavaScript y jQuery sigue en pie para muchos.
Si has tomado una decisión y quieres comenzar a aprender, puedes seguir los enlaces a los dos curso de abajo para comenzar ahora mismo. Si te interesa una comparación más detallada entre ambos lenguajes de programación, continúa leyendo.
Funcionalidad Específica
Ahora que sabes qué es JavaScript y qué es jQuery, y el valor de cada uno en tu elección de carrera, vamos a profundizar en casos específicos.
JavaScript puede hacer todo lo que jQuery puede, ¿Pero hay situaciones específicas en las que es mejor usar código jQuery?
Compatibilidad entre Navegadores
Menciona Internet Explorer a un desarrollador con experiencia y verás cambiar sus caras enrojecerse, ojos sorprendidos, venas saltadas y puños listos mientras contemplan un período oscuro en su carrera cuando muchos utilizaban el infame explorador de Microsoft. Menciona IE8 y ve explotar la cabeza del desarrollador.
Parte del crecimiento de jQuery se le atribuye al hecho de que eliminó brechas entre los navegadores. Muchos de nuestros navegadores actuales interpretan JavaScript de la misma manera, pero hace diez años habían grandes discrepancias entre los navegadores. Podías escribir tu código de muchas maneras diferentes que podía entenderse por cada uno de los navegadores.
O, podías usar jQuery, que hacía todo el trabajo difícil por ti. Una línea de código jQuery podía interpretarse por la biblioteca jQuery en las varias líneas distintas de código JavaScript necesitado para atender a cada uno de los navegadores. Para los desarrolladores, usar jQuery en esas circunstancias no lo tenías que pensar dos veces.
Hoy en día, las diferencias entre navegadores son pequeñas. Y si encuentras discrepancias, por ejemplo cuando usas algunas funciones de la última actualización del lenguaje JavaScript ES6, se recomienda usar una biblioteca polyfill. Las polyfill son bibliotecas que atienden estas diferencias entre navegadores y que pueden implementarse tan sólo con un enlace que haga referencia al CDN polyfill en una etiqueta del código.
Los polyfill modernos detectarán qué navegador utiliza el usuario y alista el código necesario para adaptarse al navegador del usuario. Esto ahorra tiempo de carga, porque es como si el usuario cargara sólo el código necesario, tu sitio web cargará más rápido en su máquina que si hubiera tenido que cargar la biblioteca completa jQuery.
La compatibilidad entre navegadores fue alguna vez una razón clave para usar jQuery, pero ahora la mejor solución al problema no es tan importante como antes.
Manipulación DOM
El DOM o el Modelo de Objetos del Documento, es la interpretación del navegador de la página web que presenta. Si das clic sobre cualquier página web y haces clic en inspeccionar, bajo el panel de elementos, verás el DOM. Podría verse como tu código index.html, pero recuerda que mucho de ese código HTML ha sido renderizado dinámicamente desde un servidor usando código del lado del servidor como PHP.
Los elementos DOM también pueden ser renderizados y manipulados con JavaScript, que es otra área donde jQuery alguna vez demostró su utilidad.
Con jQuery puedes abordar nodos DOM, esencialmente elementos HTML como un encabezado de nivel dos con el código
$(“h2”)
Puedes encadenarlo a una función para que el código haga lo que quieras, como atender a eventos o modificar el DOM para cambiar cosas en tu sitio web mientras el usuario lo usa.
Con JavaScript, puedes hacer lo mismo usando el código,
document.querySelector("h2")
No es una gran diferencia, ¿Cierto? En el pasado, los métodos de manipulación DOM con JavaScript no eran muy consistentes entre navegadores. Además, usar vanilla JavaScript (vanilla JavaScript significa puro, JavaScript sin alteraciones ni bibliotecas) es considerado ser más eficiente – lo que básicamente significa que lo hace más rápido y/o usa menos recursos de memoria.
Otra vez, esto parece ser otro logro para JavaScript. Sin embargo, la popularidad de jQuery significa que verás mucho código jQuery usado en aplicaciones menos recientes, e incluso en aplicaciones recientes porque muchos desarrolladores simplemente se sienten más cómodos usando jQuery.
Nuevas bibliotecas como Bling.js incluso te permiten usar sintaxis jQuery sin cargar la biblioteca completa, demostrando el cariño de los desarrolladores por jQuery.
Mientras que probablemente deberías aprender JavaScript, si sabes que la pérdida relativa de rendimiento no afectará mucho a tus usuarios objetivo, entonces puedes usar jQuery porque sabes que puedes desarrollar más rápido y sencillo que con vanilla JavaScript, esto es completamente lógico.
Entonces, mientras que probablemente deberías aprender vanilla JavaScript para manipulación DOM, si vas a estar trabajando con otros, entender los métodos de manipulación DOM jQuery seguramente será útil en algún momento.
Animaciones y Efectos
jQuery incluye una biblioteca de efectos, incluyendo el método toggle mostrado en la comparación inicial entre jQuery y JavaScript de este artículo. El método toggle es un excelente ejemplo de funcionalidad fácil de alcanzar con jQuery en lugar de usar JavaScript.
Aunque hoy en día, los desarrolladores tienen acceso a animaciones web API junto con transiciones CSS. Estas dos tecnologías son nativas del navegador, lo que significa que tu navegador web las entiende sin la necesidad de cargar ninguna biblioteca, y tendrán un rendimiento más rápido que cargando todas las animaciones de la biblioteca jQuery.
jQuery será un método simple de implementación de animación en algunos casos, pero hoy en día está limitado comparado con el rango de opciones que tienen los desarrolladores que son nativos del navegador.
- Fácil de usar
- Ofrece contenido de calidad
- Muy transparente con sus precios
- Certificados de completitud gratis
- Enfocado en habilidades de ciencia de datos
- Horario de aprendizaje flexible
- Diseño simple (sin información innecesaria)
- Cursos de alta calidad (incluso los gratuitos)
- Variedad de funciones
- Programas Nanodegree
- Ideal para empresas
- Certificados de pago al finalizar
- Bien establecido en la industria
- Una amplia gama de funciones a elegir
- Cursos de nivel universitario
- Cursos de nivel universitario
- Ideal para empresas
- Certificados de terminación de pago
APIs
Otro excelente caso de uso para jQuery en el pasado era su habilidad de efectuar llamadas API. Llamar a un API es extraer los datos de tu sitio web de una fuente externa, por ejemplo, tal vez quieres un mapa personalizado de tu sitio, entonces usas un API para obtener los datos de Google Maps desde Google.
El método de llamada API de jQuery se prefería ante el método nativo XML, pero otra vez, como en otros casos, ahora existe un método superior llamado Fetch, el cual es nativo del navegador y más fácil de usar que jQuery.
¿Sabías qué?
¿Alguna vez te has preguntado qué plataforma de aprendizaje en linea es adecuada para tu carrera?
Los Hallazgos Más Populares
Explora nuestra colección de los más completos artículos, guías y tutoriales relacionados con Exchanges de Cripto. ¡Mantente al tanto y toma decisiones informadas!
Conclusión
A veces la tecnología más útil no es la primera que debemos aprender. El desarrollo web es difícil, y aprender un lenguaje difícil al iniciar tu camino de aprendizaje podría hacer que te rindas completamente.
JavaScript es una herramienta poderosa, pero no creas que podrás aprender JavaScript en días o semanas. Incluso desarrolladores JavaScript con experiencia se sorprenden por su comportamiento.
Como un principiante en programación y desarrollo web, no podrás hacer mucho con tus recien adquiridas habilidades de JavaScript. Pero si ya sabes HTML y CSS, jQuery podría llevar tus proyectos a otro nivel en unos cuantos días.
Muchos desarrolladores web se iniciaron aprendiendo jQuery. Mientras que aprender los fundamentos de JavaScript es probablemente la parte más importante para convertirse en desarrollador front-end, también es importante alcanzar metas a corto plazo, y jQuery es una manera rápida para lograrlo.
Cuando ves tus proyectos cobrar vida con jQuery, te motivarás a aprender más, con JavaScript te tomará algunas semanas de aprendizaje y más errores antes de alcanzar los mismos resultados.
Al aprender jQuery, también comenzarás a entender el poder de JavaScript. Serás capaz de hacer tareas comunes que requieren de un desarrollador JavaScript, pero al salir de tu zona de confort y de lo que puedes lograr con jQuery, aprenderás mucho más sobre lo que puedes lograr al aprender JavaScript.
Referencias Científicas
Acerca de los artículos de Expertos y Analistas
