JavaScript vs jQuery: diferencias clave que necesita saber

Conocemos JavaScript y JQuery desde hace bastantes años. JavaScript se inventó antes que jQuery. Ambos son poderosos y se utilizan en el desarrollo web y se utilizan con el mismo propósito, es decir, para hacer que la página web sea interactiva y dinámica. En otras palabras, dan vida a las páginas web. La gente puede preguntarse que si se utilizan para el mismo propósito, ¿por qué estos dos conceptos separados? En este artículo de JavaScript vs jQuery, descubriremos cuál es mejor que el otro en la siguiente secuencia:

• JavaScript: un lenguaje poderoso en el desarrollo web
• JQuery: una biblioteca desarrollada a partir de JavaScript
• Por qué se crea JQuery y cuáles son las capacidades especiales de JQuery
• Diferencia entre JavaScript y JQuery con ejemplos
  • Añadiendo JavaScript y JQuery en nuestro documento HTML
  • DOM transversal y manipulación
  • Manejo de eventos
  • Llamadas Ajax
  • Animación

JavaScript: un lenguaje poderoso en el desarrollo web

JavaScript es un lenguaje de programación que se utiliza para agregar interactividad a nuestras páginas web. Es una de las tres tecnologías centrales junto con HTML y CSS que se utilizan para crear páginas web. Mientras que HTML y CSS definen la estructura de la página web y el aspecto / estilo de las páginas web, JavaScript se utiliza para hacer que la página web sea dinámica al agregarle interactividad, lo que significa que con JavaScript podemos agregar algún código para hacer clic con el mouse, pasar el mouse y otros eventos en la página web y mucho más.

cómo inicializar un objeto en Python

JavaScript es compatible con todos los navegadores web y los navegadores web tienen un motor JavaScript incorporado para identificar el código JavaScript y trabajar con él. Por lo tanto, JavaScript es principalmente un lenguaje del lado del cliente. Es un lenguaje que se puede utilizar como lenguaje de procedimiento y como lenguaje orientado a objetos basado en prototipos. Cuando usamos JavaScript primario, estamos trabajando con el lenguaje de procedimiento, mientras que JavaScript avanzado usa conceptos orientados a objetos.

Sigamos con nuestro JavaScript vs jQuery y comprendamos la biblioteca desarrollada a partir de JavaScript.

jQuery: una biblioteca desarrollada a partir de JavaScript

A lo largo de los años, JavaScript se ha convertido en un lenguaje poderoso para el desarrollo web. Han surgido muchas bibliotecas y marcos que se construyen sobre JavaScript. Estas bibliotecas y marcos se desarrollan para expandir la capacidad de JavaScript, hacer muchas cosas con él y también para facilitar el trabajo del desarrollador.

jQuery es una de esas bibliotecas de JavaScript que se construye a partir de ella. Es la biblioteca JavaScript más popular inventada por John Resign y fue lanzada en enero de 2006 en BarCamp NYC. jQuery es gratis, una biblioteca de código abierto, con licencia MIT License. Esto tiene una característica poderosa de compatibilidad entre navegadores. Puede manejar fácilmente problemas entre navegadores que podemos enfrentar con JavaScript. Por lo tanto, muchos desarrolladores usan jQuery para evitar problemas de compatibilidad entre navegadores.

Ahora sigamos con nuestro blog JavaScript vs jQuery y veamos por qué se creó jQuery.

¿Por qué se crea jQuery y cuáles son las capacidades especiales de jQuery?

En JavaScript, tenemos que escribir mucho código para operaciones básicas mientras que con jQuery se pueden realizar las mismas operaciones con una sola línea de código. Por lo tanto, a los desarrolladores les resulta más fácil trabajar con jQuery que con JavaScript.

• Aunque JavaScript es el lenguaje básico del que ha evolucionado jQuery, jQuery hace que el manejo de eventos, la manipulación del DOM y las llamadas Ajax sean mucho más fáciles que JavaScript. jQuery también nos permite agregar efectos animados en nuestra página web, lo que requiere mucho esfuerzo y líneas de código con JavaScript.
• jQuery tiene complementos incorporados para realizar una operación en una página web. Solo tenemos que incluir o importar el plugin en nuestra página web para poder utilizarlo. Así, los plugins nos permiten crear abstracciones de animaciones e interacciones o efectos.
• También podemos hacer nuestro complemento personalizado con jQuery. Si requerimos que se haga una animación en una página web de cierta manera, podemos desarrollar un plugin de acuerdo al requerimiento y usarlo en nuestra página web.
• jQuery también tiene una biblioteca de widgets de IU de alto nivel. Esta biblioteca de widgets tiene una amplia gama de complementos que podemos importar en nuestra página web y usarla para crear páginas web fáciles de usar.

Entendamos la diferencia.

JavaScript vs jQuery

Continuando con la diferencia entre JavaScript y jQuery con Example.

JavaScript vs jQuery con ejemplos

Veamos los ejemplos.

Añadiendo JavaScript y jQuery en nuestro documento HTML

JavaScript se agrega directamente en el documento HTML dentro de la etiqueta o se puede agregar un archivo JavaScript externo en un documento HTML usando el atributo src.
Escrito directamente dentro de la etiqueta del script:

alert ('Este cuadro de alerta fue llamado con el evento onload')

Para usar jQuery, descargamos el archivo de su sitio web y referimos la ruta del archivo jQuery descargado en el atributo src de la etiqueta SCRIPT o podemos obtenerlo directamente de CDN (Red de entrega de contenido).

Usando CDN :

Comprendamos la manipulación y el desplazamiento de DOM

DOM transversal y manipulación

En JavaScript:

Podemos seleccionar un elemento DOM en JavaScript usando el método document.getElementById () o usando el método document.querySelector ().

var mydiv = document.querySelector ('# div1')

o

document.getElementById ('# div1')

En jQuery:

Aquí, solo tendremos que usar el símbolo $ con el selector entre paréntesis.

$ (selector) $ (“# div1”) - El selector es un id 'div1' $ (“. div1”) - El selector es una clase 'div1' $ (“p”) - El selector es el párrafo en el Página HTML

En la declaración anterior, $ es un signo que se usa para acceder a jQuery, el selector es un elemento HTML.

Agregar estilos en JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Añadiendo estilos en jQuery:

$ ('# myDiv'). css ('color de fondo', '# FFF')

El selector #myDiv se refiere al identificador 'myDiv'

La selección y manipulación de elementos DOM es mucho más concisa en jQuery que en JavaScript.

Continuando con el manejo de eventos.

Manejo de eventos

En JavaScript, seleccionamos un elemento HTML:

document.getElementById ('# button1'). addEventListener ('click ”, myCallback) function myCallback () {console (“ dentro de la función myCallback ”)}

Aquí se usa el método getElementById () para seleccionar un elemento por su id, luego usamos el método addEventListener () para agregar un detector de eventos al evento. En este ejemplo, agregamos la función myCallback como escucha del evento 'click'.

También podemos usar una función anónima en el ejemplo anterior:

document.getElementById ('# button1'). addEventListener ('click ”, function () {console.log (“ dentro de la función ”)})

El eventListener se puede eliminar mediante el método removeEventListener ()

document.getElementById ('# button1'). removeEventListener ('clic', myCallback)

En jQuery

jQuery tiene eventos predefinidos para casi todas las acciones DOM. Podemos usar el evento jQuery específico para una acción.

$ ('P'). Click (function () {// click action})

Otros ejemplos son:

$ ('# Button1'). Dblclick (function () {// acción para el evento de doble clic en el elemento html con id 'button1'}

El método 'on' de JQuery se utiliza para agregar uno o más eventos a un elemento DOM.

$ (“# Button1”). On (“click”, function () {// action here})

Podemos agregar múltiples eventos y múltiples controladores de eventos con el método on.

$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})

Dos o más eventos pueden tener el mismo controlador que se muestra a continuación:

$ (“# Button1”). On (“click dblclick”, function () {// action here})

Por lo tanto, vemos que con un código menor y conciso, el manejo de eventos es más fácil en jQuery que en JavaScript.

que es el marco de primavera

Continuando con Ajax Calls.

Llamadas Ajax

En JavaScript

JavaScript utilizó un objeto XMLHttpRequest para enviar una solicitud Ajax a un servidor. XMLHttpRequest tiene varios métodos para realizar la llamada Ajax. Los dos métodos comunes son open (método, URL, async, usuario, PSW), send () y send (string).
Primero creemos una XMLHttpRequest:

var xhttp = new XMLHttpRequest () Luego use este objeto para llamar al método abierto: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

El método abierto realiza una solicitud de obtención a un servidor / ubicación, el verdadero especifica que la solicitud es asincrónica. Si el valor es falso, significa que la solicitud es síncrona.

Hacer una solicitud de publicación:

var xhttp = new XMLHttpRequest () Luego use este objeto para llamar al método abierto y hacer una solicitud de publicación: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Para publicar datos con la solicitud, usamos el método setRequestHeader de xhttp para definir el tipo de datos que se enviarán y el método de envío envía los datos en pares clave / valor:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

En jQuery

jQuery tiene varios métodos incorporados para realizar llamadas Ajax. Con estos métodos, podemos llamar a cualquier dato del servidor y actualizar una parte de la página web con los datos. Los métodos jQuery facilitan las llamadas Ajax.
El método jQuery load (): este método obtiene datos de una URL y carga los datos en un selector HTML.
$ ('P'). Load (URL, datos, devolución de llamada)
La URL es la ubicación a la que se llama para los datos, el parámetro de datos opcional son los datos (pares clave / valor) que queremos enviar junto con la llamada y el parámetro opcional 'callback' es el método que queremos ejecutar después de la carga. esta completado.

El método jQuery $ .get () y $ .post (): este método obtiene datos de una URL y los carga en un selector HTML.
$ .get (URL, devolución de llamada)
La URL es la ubicación a la que se llama para los datos y la devolución de llamada es el método que queremos ejecutar después de que se complete la carga.

$ .post (URL, datos, devolución de llamada)
La URL es la ubicación a la que se llama para los datos, los datos son el par clave / valor que queremos enviar con la llamada y la devolución de llamada es el método que queremos ejecutar después de que se complete la carga. Aquí los datos y los parámetros de devolución de llamada son opcionales.

Las llamadas de jQuery Ajax son más concisas que JavaScript. En JavaScript, estamos usando un objeto XMLHTTPRequest, en jQuery no tenemos que usar dicho objeto.

Continuando con la animación.

Animación

En JavaScript

JavaScript no tiene una función de animación específica como la función jQuery animate (). En JavaScript, el efecto de animación se logra principalmente manipulando el estilo del elemento o usando las propiedades de transformación, traducción o animación de CSS. JavaScript también usa los métodos setInterval (), clearInterval (), setTimeout () y clearTimeout () para efectos de animación.

setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}

La animación en JavaScript se trata principalmente de manipular las propiedades de CSS.

En jQuery

jQuery tiene muchos métodos incorporados para agregar animaciones o efectos en elementos HTML. Revisemos algunos de ellos.
El método animate (): este método se usa para agregar animación en un elemento.

$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})

El método show (): este método se utiliza para hacer visible un elemento desde un estado oculto.

$ ('# button1'). click (function () {$ ('# div1'). show ()})

El método hide (): este método se utiliza para ocultar un elemento de un estado visible.

$ ('# button1'). click (function () {$ ('# div1'). hide ()})

jQuery tiene sus propios métodos para producir animaciones y efectos en una página web.

En resumen, JavaScript es un lenguaje para el desarrollo web, jQuery es una biblioteca que se originó en JavaScript. JavaScript y jQuery tienen su propia importancia en el desarrollo web.

que es un evento en javascript

Ahora que conoce los bucles de JavaScript, consulte el por Edureka. La capacitación para la certificación en desarrollo web lo ayudará a aprender a crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3).

Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios de 'JavaScript vs jQuery' y nos comunicaremos con usted.