JavaScript vs jQuery: les principales différences à connaître

Dans ce JavaScript vs jQuery, nous découvrirons ce qui est meilleur que l'autre. Les deux sont puissants et sont utilisés dans le développement Web dans le même but.

Nous connaissons JavaScript et JQuery depuis plusieurs années. JavaScript a été inventé avant jQuery. Les deux sont puissants et sont utilisés dans le développement Web et sont utilisés dans le même but, c'est-à-dire pour rendre la page Web interactive et dynamique. En d'autres termes, ils donnent vie aux pages Web. Les gens peuvent se demander que s'ils sont utilisés dans le même but, pourquoi ces deux concepts distincts? Dans cet article JavaScript vs jQuery, nous découvrirons ce qui est meilleur que l'autre dans la séquence suivante:



JavaScript: un langage puissant dans le développement Web

JavaScript est un langage de script utilisé pour ajouter de l'interactivité à nos pages Web. C'est l'une des trois technologies de base avec HTML et CSS qui sont utilisées pour créer des pages Web. Alors que HTML et CSS définissent la structure de la page Web et l'apparence / le style des pages Web, JavaScript est utilisé pour rendre la page Web dynamique en y ajoutant de l'interactivité, ce qui signifie qu'avec JavaScript, nous pouvons ajouter du code pour le clic de la souris, le survol de la souris et autres événements sur la page Web et bien plus encore.



JavaScript- javascript vs jquery - edureka

JavaScript est pris en charge par tous les navigateurs Web et les navigateurs Web ont un moteur JavaScript intégré pour identifier le code JavaScript et l'utiliser. Ainsi, JavaScript est principalement un langage côté client. C'est un langage qui peut être utilisé comme langage procédural ainsi que comme langage orienté objet basé sur un prototype. Lorsque nous utilisons JavaScript primaire, nous travaillons avec le langage procédural tandis que JavaScript avancé utilise des concepts orientés objet.



Passons à notre JavaScript vs jQuery et comprenons la bibliothèque développée à partir de JavaScript.

jQuery: une bibliothèque développée à partir de JavaScript

Au fil des années, JavaScript s'est avéré être un langage puissant pour le développement Web. Il existe de nombreuses bibliothèques et frameworks qui ont été créés et reposent sur JavaScript. Ces bibliothèques et frameworks sont développés pour étendre la capacité de JavaScript, faire beaucoup de choses avec lui et aussi pour faciliter le travail du développeur.



jQuery est l'une de ces bibliothèques de JavaScript qui en est issue. Il s'agit de la bibliothèque JavaScript la plus populaire inventée par John Resign et publiée en janvier 2006 à BarCamp NYC. jQuery est gratuit, une bibliothèque open-source, sous licence MIT. Cela a une fonctionnalité puissante de compatibilité entre navigateurs. Il peut facilement gérer les problèmes multi-navigateurs auxquels nous pouvons faire face avec JavaScript. Ainsi, de nombreux développeurs utilisent jQuery pour éviter les problèmes de compatibilité entre navigateurs.

Passons maintenant à notre blog JavaScript vs jQuery et voyons pourquoi jQuery a été créé.

Pourquoi jQuery est créé et quelles sont les capacités spéciales de jQuery?

En JavaScript, nous devons écrire beaucoup de code pour les opérations de base tandis qu'avec jQuery, les mêmes opérations peuvent être effectuées avec une seule ligne de code. Par conséquent, les développeurs trouvent plus facile de travailler avec jQuery qu'avec JavaScript.

  • Bien que JavaScript soit le langage de base à partir duquel jQuery a évolué, jQuery rend la gestion des événements, la manipulation DOM, les appels Ajax beaucoup plus faciles que JavaScript. jQuery nous permet également d'ajouter des effets animés sur notre page Web, ce qui prend beaucoup de peine et des lignes de code avec JavaScript.
  • jQuery a des plugins intégrés pour effectuer une opération sur une page Web. Nous devons simplement inclure ou importer le plugin dans notre page Web pour l'utiliser. Ainsi les plugins nous permettent de créer des abstractions d'animations et d'interactions ou d'effets.
  • Nous pouvons également créer notre plugin personnalisé avec jQuery. Si nous avons besoin d'une animation sur une page Web d'une certaine manière, nous pouvons développer un plugin en fonction de l'exigence et l'utiliser sur notre page Web.
  • jQuery dispose également d'une bibliothèque de widgets d'interface utilisateur de haut niveau. Cette bibliothèque de widgets contient toute une gamme de plugins que nous pouvons importer sur notre page Web et l'utiliser pour créer des pages Web conviviales.

Comprenons la différence.

JavaScript vs jQuery

FonctionnalitésJavaScriptjQuery
ExistenceJavaScript est un langage indépendant et peut exister seul.jQuery est une bibliothèque JavaScript. Il n'aurait pas été inventé si JavaScript n'était pas là. jQuery dépend toujours de JavaScript car il doit être converti en JavaScript pour que le moteur JavaScript intégré au navigateur puisse l'interpréter et l'exécuter.
LangueIl s'agit d'un langage de script interprété côté client de haut niveau. Ceci est une combinaison de script ECMA et DOM (Document Object Model)C'est une bibliothèque JavaScript légère. Il n'a que le DOM
CodageJavaScript utilise plus de lignes de code car nous devons écrire notre propre codejQuery utilise moins de lignes de code que JavaScript pour la même fonctionnalité car le code est déjà écrit dans sa bibliothèque, il suffit d'importer la bibliothèque et d'utiliser la fonction / méthode appropriée de la bibliothèque dans notre code.
UsageLe code JavaScript est écrit à l'intérieur de la balise de script dans une page HTML
Nous devons importer le jQuery à partir du CDN ou d'un emplacement où la bibliothèque jQuery est téléchargée afin de l'utiliser. Le code jQuery est également écrit à l'intérieur de la balise de script sur la page HTML.
AnimationsNous pouvons faire des animations en JavaScript avec de nombreuses lignes de code. Les animations sont principalement réalisées en manipulant le style d'une page Html.Dans jQuery, nous pouvons facilement ajouter des effets d'animation avec moins de lignes de code.
ConvivialitéJavaScript peut être fastidieux pour le développeur car il peut prendre un certain nombre de lignes de code pour atteindre une fonctionnalitéjQuery est plus convivial que JavaScript avec quelques lignes de code
Compatibilité entre navigateursEn JavaScript, nous pouvons avoir à gérer la compatibilité entre navigateurs en écrivant du code supplémentaire ou une solution de contournement.jQuery est compatible avec tous les navigateurs. Nous n'avons pas à nous soucier d'écrire une solution de contournement ou un code supplémentaire pour rendre notre code compatible avec un navigateur.
PerformanceLe JavaScript pur peut être plus rapide pour la sélection / manipulation DOM que jQuery car JavaScript est directement traité par le navigateur.jQuery doit être converti en JavaScript pour qu'il s'exécute dans un navigateur.
Gestion des événements, interactivité et appels AjaxTout cela peut être fait en JavaScript mais il se peut que nous devions écrire de nombreuses lignes de code.Tout cela peut être fait facilement avec jQuery avec moins de lignes de code. Il est plus facile dans jQuery d'ajouter de l'interactivité, des animations et également de faire des appels ajax car les fonctions sont déjà prédéfinies dans la bibliothèque. Nous utilisons simplement ces fonctions dans notre code aux endroits requis.
VerbositéJavaScript est verbeux car il faut écrire de nombreuses lignes de code pour une fonctionnalitéjQuery est concis et utilise moins de lignes de code, parfois une seule ligne de code.
Taille et poidsÉtant un langage, il est plus lourd que jQueryÉtant une bibliothèque, c'est léger. Il a une version minifiée de son code qui le rend léger.
Réutilisabilité et maintenabilitéLe code JavaScript peut être détaillé et peut donc être difficile à maintenir et à réutiliser.Avec moins de lignes de code, jQuery est plus maintenable car nous n'avons qu'à appeler les fonctions prédéfinies dans la bibliothèque jQuery dans notre code. Cela nous permet également de réutiliser facilement les fonctions jQuery à différents endroits du code.

Passer à la différence entre JavaScript et jQuery avec Example.

JavaScript vs jQuery avec des exemples

Regardons les exemples.

Ajout de JavaScript et jQuery dans notre document HTML

JavaScript est ajouté directement dans le document HTML à l'intérieur de la balise ou un fichier JavaScript externe peut être ajouté dans un document HTML à l'aide de l'attribut src.
Écrit directement dans la balise script:

comment trouver palindrome en java
alert ('Cette boîte d'alerte a été appelée avec l'événement onload')

Pour utiliser jQuery, nous téléchargeons le fichier à partir de son site Web et nous référons le chemin du fichier jQuery téléchargé dans l'attribut src de la balise SCRIPT ou nous pouvons l'obtenir directement à partir du CDN (Content delivery network).

 

Utilisation de CDN :

 

Comprenons la traversée et la manipulation DOM

Traversée et manipulation DOM

En JavaScript:

Nous pouvons sélectionner un élément DOM en JavaScript en utilisant la méthode document.getElementById () ou en utilisant la méthode document.querySelector ().

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

ou

document.getElementById ('# div1')

Dans jQuery:

Ici, nous devrons utiliser uniquement le symbole $ avec le sélecteur entre parenthèses.

$ (selector) $ ('# div1') - Le sélecteur est un id 'div1' $ ('. div1') - Le sélecteur est une classe 'div1' $ ('p') - Le sélecteur est le paragraphe dans le Page HTML

Dans l'instruction ci-dessus, $ est un signe utilisé pour accéder à jQuery, le sélecteur est un élément HTML.

Ajout de styles en JavaScript:

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

Ajout de styles dans jQuery:

$ ('# myDiv'). css ('background-color', '# FFF')

Le sélecteur #myDiv fait référence à l'identifiant «myDiv»

La sélection et la manipulation des éléments DOM sont beaucoup plus concises dans jQuery que dans JavaScript.

Passons à la gestion des événements.

Gestion des événements

En JavaScript, nous sélectionnons un élément HTML:

document.getElementById ('# button1'). addEventListener ('click', myCallback) function myCallback () {console ('inside myCallback function')}

Ici, la méthode getElementById () est utilisée pour sélectionner un élément par son id, puis nous utilisons la méthode addEventListener () pour ajouter un écouteur d'événement à l'événement. Dans cet exemple, nous ajoutons la fonction myCallback en tant qu’écouteur à l’événement ‘click’.

Nous pouvons également utiliser une fonction anonyme dans l'exemple ci-dessus:

convertir décimal en binaire en python
document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('inside the function')})

Le eventListener peut être supprimé à l'aide de la méthode removeEventListener ()

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

Dans jQuery

jQuery a des événements prédéfinis pour presque toutes les actions DOM. Nous pouvons utiliser l'événement jQuery spécifique pour une action.

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

D'autres exemples sont:

$ ('# Button1'). Dblclick (function () {// action pour l'événement de double-clic sur l'élément html avec l'ID 'button1'}

La méthode JQuery «on» est utilisée pour ajouter un ou plusieurs événements à un élément DOM.

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

Nous pouvons ajouter plusieurs événements et plusieurs gestionnaires d'événements avec la méthode on.

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

Deux événements ou plus peuvent avoir le même gestionnaire que ci-dessous:

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

Ainsi, nous voyons qu'avec du code moins concis, la gestion des événements est plus facile dans jQuery que dans JavaScript.

Passons aux appels Ajax.

Appels Ajax

En JavaScript

JavaScript a utilisé un objet XMLHttpRequest pour envoyer une requête Ajax à un serveur. Le XMLHttpRequest a plusieurs méthodes pour effectuer l'appel Ajax. Les deux méthodes courantes sont open (méthode, URL, async, utilisateur, PSW), send () et send (string).
Créons d'abord une XMLHttpRequest:

var xhttp = new XMLHttpRequest () Ensuite, utilisez cet objet pour appeler la méthode ouverte: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

La méthode open fait une demande d'obtention à un serveur / emplacement, le vrai spécifie que la demande est asynchrone. Si la valeur est false, cela signifie que la demande est synchrone.

Faire une demande de publication:

var xhttp = new XMLHttpRequest () Ensuite, utilisez cet objet pour appeler la méthode open et faire une demande de publication: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Pour publier des données avec la requête, nous utilisons la méthode setRequestHeader de xhttp pour définir le type de données à envoyer et la méthode d'envoi envoie les données par paires clé / valeur:

différence entre le remplacement et la surcharge en java
xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('nom = Ravi & nom = Kumar')

Dans jQuery

jQuery a plusieurs méthodes intégrées pour effectuer des appels Ajax. Avec ces méthodes, nous pouvons appeler toutes les données du serveur et mettre à jour une partie de la page Web avec les données. Les méthodes jQuery facilitent les appels Ajax.
La méthode jQuery load (): Cette méthode récupère les données d'une URL et charge les données dans un sélecteur HTML.
$ ('P'). Load (URL, données, rappel)
L'URL est l'emplacement qui est appelé pour les données, le paramètre de données facultatif est les données (paires clé / valeur) que nous voulons envoyer avec l'appel et le paramètre facultatif 'callback' est la méthode que nous voulons exécuter après le chargement est terminé.

La méthode jQuery $ .get () et $ .post (): Cette méthode récupère les données d'une URL et charge les données dans un sélecteur HTML.
$ .get (URL, rappel)
L'URL est l'emplacement qui est appelé pour les données et le rappel est la méthode que nous voulons exécuter une fois le chargement terminé.

$ .post (URL, données, rappel)
L'URL est l'emplacement qui est appelé pour les données, les données sont la paire clé / valeur que nous voulons envoyer avec l'appel et le rappel est la méthode que nous voulons exécuter une fois le chargement terminé. Ici, les données et les paramètres de rappel sont facultatifs.

Les appels jQuery Ajax sont plus concis que JavaScript. En JavaScript, nous utilisons un objet XMLHTTPRequest, dans jQuery, nous n'avons pas à utiliser un tel objet.

Passons à l'animation.

Animation

En JavaScript

JavaScript n'a pas de fonction d'animation spécifique comme la fonction jQuery animate (). En JavaScript, l'effet d'animation est principalement obtenu en manipulant le style de l'élément ou en utilisant des propriétés de transformation, de traduction ou d'animation CSS. JavaScript utilise également les méthodes setInterval (), clearInterval (), setTimeout () et clearTimeout () pour les effets d'animation.

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

L'animation en JavaScript consiste principalement à manipuler les propriétés CSS.

Dans jQuery

jQuery a de nombreuses méthodes intégrées pour ajouter des animations ou des effets sur des éléments HTML. Vérifions quelques-uns d’entre eux.
La méthode animate (): Cette méthode est utilisée pour ajouter une animation sur un élément.

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

La méthode show (): Cette méthode est utilisée pour rendre un élément visible à partir d'un état masqué.

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

La méthode hide (): Cette méthode est utilisée pour masquer un élément d'un état visible.

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

jQuery a ses propres méthodes pour produire des animations et des effets dans une page Web.

Pour résumer, JavaScript est un langage de développement Web, jQuery est une bibliothèque issue de JavaScript. JavaScript et jQuery ont leur propre importance dans le développement Web.

Maintenant que vous connaissez les boucles JavaScript, consultez la par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «JavaScript vs jQuery» et nous vous répondrons.