DIFERENCIAS ENTRE JAVASCRIPT Y JQUERY

JALITZA JULIANA CARRASCAL CORONEL

COD. 191940

UNIVERIDAD FRANCISCO DE PAULA SANTANDER OCAÑA

INGENIERÍA DE SISTEMAS: DESARROLLO DE APLICACIONES WEB

DOCENTE WILDER ANDRES DUARTE NEIRA

NOVIEMBRE 22, 2020

 Diferencias entre JavaScript y jQuery

A diferencia de JavaScript, jQuery no es un idioma, es un código JavaScript

escrito con precisión que se incluye en un solo archivo .js. Con tantas funciones
integradas y características fáciles de usar, los desarrolladores pueden realizar
muchas tareas de manera muy eficiente y sencilla. Y lo mejor de todo es que
puede manejar fácilmente los problemas de los navegadores cruzados, lo que le
facilita hacer más con menos código. Cumple eficientemente las tareas comunes
que de otro modo requerirían muchas líneas de codificación y las une en métodos
con una sola línea de código, lo que aumenta la productividad del desarrollador.
Además, no tiene que aprender nuevas sintaxis para usar jQuery, lo que de hecho
elimina la necesidad de escribir cientos de líneas de códigos.

JavaScript vs jQuery en términos de "Función": Aunque el nombre sugiere que

ambos términos deben estar relacionados de alguna manera, son muy diferentes
entre sí. Si bien JavaScript es un lenguaje de programación interpretado de alto
nivel, jQuery es una biblioteca de scripts multiplataforma que utiliza sintaxis de
JavaScript para mejorar la interactividad del navegador web.

JavaScript vs jQuery en términos de "Propósito": Si bien ambos tienen el mismo

propósito, es decir, hacer que el trabajo del desarrollador sea lo más simple
posible, jQuery es bastante eficiente y fácil de usar que simplifica las cosas
complejas con solo unas pocas líneas de código, que de otro modo requerirían
varias líneas de código con JavaScript en bruto.

JavaScript vs jQuery en términos de "Rendimiento": Necesitará una comprensión

completa y la información de sintaxis de JavaScript para aprovechar al máximo
jQuery. Sin embargo, jQuery es un marco de JavaScript que no puede vivir por sí
mismo. De hecho, utiliza los recursos ofrecidos por JavaScript para simplificar las
cosas mientras manipula DOM, incluyendo muchas tareas.
JavaScript vs jQuery en términos de "Script": Debe escribir su propio script
mientras usa JavaScript, lo que eventualmente tomaría tiempo. jQuery, por otro
lado, no requiere cientos de líneas de código. Los scripts ya existen en las
bibliotecas.

JavaScript vs jQuery en términos de "Características": jQuery hace que sea más

fácil para los desarrolladores realizar varias tareas en lugar de usar solo
JavaScript en bruto. jQuery es rápido, ligero y rico en funciones, lo que hace que
el manejo de eventos, la animación, el desplazamiento de documentos HTML y el
manejo del Ajax sean mucho más fáciles que con el simple JavaScript.

Si bien ambos se parecen mucho en términos de funcionalidad y características,

son muy diferentes de muchas maneras. Si bien JavaScript es un lenguaje de
programación independiente, jQuery es una biblioteca de JavaScript
multiplataforma. Si bien el nombre sugiere que deben estar relacionados de
alguna manera, tienen su parte justa de las diferencias. jQuery es una biblioteca
de JavaScript incorporada que usa las sintaxis dadas por JavaScript para
simplificar las cosas para los desarrolladores para que puedan realizar tareas con
un mínimo de líneas de codificación. Si bien ambos son lenguajes de script del
lado del cliente, JavaScript puede vivir por sí mismo a diferencia de jQuery, que se
basa en JavaScript.

JavaScript
JavaScript es un potente lenguaje de
programación de computadora
utilizado para mejorar la interactividad
en los navegadores web.
jQuery
jQuery es la versión avanzada de
JavaScript, básicamente una biblioteca
de scripts de lenguaje.
 Es una combinación de DOM (modelo
de objeto de documento) y script
ECMA.
Requiere escribir varias líneas de
código.
Tiene DOM. Es una biblioteca escrita
en JavaScript.
No requiere que los desarrolladores
escriban tantas líneas de código. De
hecho, facilita a los desarrolladores
realizar tareas con menos codificación.

Los desarrolladores necesitan escribir Los desarrolladores no necesitan

su propio script, que es un proceso
lento.
JavaScript puede existir sin jQuery.
Ocupa mucho espacio en la
codificación.
escribir líneas de código tan largas.
Los scripts ya existen en las
bibliotecas.
jQuery no puede existir sin JavaScript.
No requiere tanto espacio en la
codificación.

Un ejemplo sencillo para diferenciarlos es:

JavaScript
function cambiarFondo(color){
document.body.style.background=color;
}
Onload=”cambiarFondo(„#ccc‟);”
jQuery
$(„body‟).css(„background‟,‟#ccc‟):

La diferencia, es obvia. jQuery logra cambiar el color de fondo de la página web

con solo una línea de código mientras que JavaScript lo realiza con cuatro líneas.

En este fragmento de código vamos a comparar JavaScript con jQuery. Vamos a

ver cómo utilizar los mismos eventos para acceder al DOM y modificar el CSS con
ambas tecnologías y así podremos asimilar mejor sus diferencias y comenzar a
practicar con jQuery.
Comencemos pintando un botón en nuestro HTML y capturando el
evento onClick de este con JavaScript:

El ejemplo es muy simple. En elemento con id=»boton» llamamos a la

función LanzarEvento() con el evento onclick y la función muestra un pop-up con
un mensaje.

Para realizar este código con jQuery lo realizaríamos así:

Como se ve en el HTML además de añadir la librería jQuery hemos eliminado el
evento onclick del elemento button manteniendo el atributo id=»boton». El resto
es igual de simple. En el JS con $(«#boton») obtenemos el nodo del
elemento boton, le asociamos el evento onclick mediante la función click y una
vez dentro de ella ejecutamos el mensaje por pop-up.

Veamos otro ejemplo donde utilizaremos el evento onclick pero modificaremos el

CSS cambiando el estilo a algún\os elementos de nuestra página.

En este caso, en nuestro HTML después del botón vamos a pintar un cuadrado
azul con un borde naranja y cuando le demos al botón se intercambiaran los
colores de este cuadrado:
De la misma forma que el ejemplo anterior cuando damos al botón se lanza en
evento onclick que llama a la función LazaEvento. En esta función utilizamos una
variable boleana para controlar a que color se debe cambiar el cuadrado. Pero lo
interesante viene en las dos líneas siguientes:

Con el método getElementById obtenemos el nodo del cuadrado, con style

accedemos a las propiedades del estilo y ya
con backgroundColor y borderColor accedemos a la propiedad del color de
fondo y color de borde respectivamente. Como veis le asignamos un valor, y en
el esle del script el contrario.

Como alguno de vosotros ya se habrá dado cuenta no es necesario utilizar la

variable boleana, ya que podríamos haber utilizado la siguiente linea en el if:

El problema es que esto no se cumple en todos los navegadores. Unos nos

devuelven el valor de la propiedad backgroudColor en hexadecimal y otros
en rgb. Y como no es cuestión de este fragmento en entrar en dificultades, he
optado por una simple variable boleana. Recordar que en programación hay
múltiples formas de llegar al mismo resultado.

Veamos el mismo ejemplo en jQuery:

Mantenemos el manejador de eventos click para el elemento button de la misma
forma que en el primer ejemplo de jQuery. Una vez dentro de esta función lo
primero que vemos es la forma de obtener el nodo del cuadrado $(«#Cuadrado»):

Y mediante el método css actualizamos las propiedades que queramos del objeto

a modificar: