jQuery - Principes de base

jQuery est un framework construit à l'aide des capacités JavaScript. Ainsi, vous pouvez utiliser toutes les fonctions et autres capacités disponibles dans JavaScript. Ce chapitre explique les concepts les plus basiques mais fréquemment utilisés dans jQuery.

Chaîne

Une chaîne en JavaScript est un objet immuable qui ne contient aucun, un ou plusieurs caractères. Voici les exemples valides d'une chaîne JavaScript -

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Nombres

Les nombres en JavaScript sont des valeurs IEEE 754 au format 64 bits double précision. Ils sont immuables, tout comme des chaînes. Voici les exemples valides de numéros JavaScript -

5350
120.27
0.26

Booléen

Un booléen en JavaScript peut être soit true ou false. Si un nombre est égal à zéro, la valeur par défaut est false. Si une chaîne vide par défaut est false.

Voici les exemples valides d'un booléen JavaScript -

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objets

JavaScript supporte très bien le concept Object. Vous pouvez créer un objet en utilisant le littéral objet comme suit -

var emp = {
   name: "Zara",
   age: 10
};

Vous pouvez écrire et lire les propriétés d'un objet en utilisant la notation par points comme suit -

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Tableaux

Vous pouvez définir des tableaux en utilisant le littéral de tableau comme suit -

var x = [];
var y = [1, 2, 3, 4, 5];

Un tableau a un length propriété utile pour l'itération -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Les fonctions

Une fonction en JavaScript peut être nommée ou anonyme. Une fonction nommée peut être définie à l'aide du mot-clé de fonction comme suit -

function named(){
   // do some stuff here
}

Une fonction anonyme peut être définie de la même manière qu'une fonction normale mais elle n'aurait pas de nom.

Une fonction anonyme peut être affectée à une variable ou transmise à une méthode comme indiqué ci-dessous.

var handler = function (){
   // do some stuff here
}

JQuery utilise très fréquemment des fonctions anonymes comme suit -

$(document).ready(function(){
   // do some stuff here
});

Arguments

Les arguments de variable JavaScript sont une sorte de tableau qui a la propriété length . L'exemple suivant l'explique très bien -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

L'objet arguments a également une propriété callee , qui fait référence à la fonction dans laquelle vous êtes. Par exemple -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Le contexte

Mot clé JavaScript célèbre thisfait toujours référence au contexte actuel. Dans une fonctionthis le contexte peut changer, selon la façon dont la fonction est appelée -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Vous pouvez spécifier le contexte d'un appel de fonction à l'aide des méthodes intégrées aux fonctions call() et apply() méthodes.

La différence entre eux est la façon dont ils transmettent les arguments. Call transmet tous les arguments en tant qu'arguments à la fonction, tandis que apply accepte un tableau comme arguments.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Portée

La portée d'une variable est la région de votre programme dans laquelle elle est définie. La variable JavaScript n'aura que deux portées.

Global Variables - Une variable globale a une portée globale, ce qui signifie qu'elle est définie partout dans votre code JavaScript.
Local Variables- Une variable locale ne sera visible que dans une fonction où elle est définie. Les paramètres de fonction sont toujours locaux à cette fonction.

Dans le corps d'une fonction, une variable locale est prioritaire sur une variable globale du même nom -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Rappeler

Un rappel est une simple fonction JavaScript transmise à une méthode en tant qu'argument ou option. Certains rappels ne sont que des événements, appelés pour donner à l'utilisateur une chance de réagir lorsqu'un certain état est déclenché.

Le système d'événements de jQuery utilise de tels rappels partout par exemple -

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

La plupart des rappels fournissent des arguments et un contexte. Dans l'exemple du gestionnaire d'événements, le rappel est appelé avec un argument, un Event.

Certains rappels sont nécessaires pour renvoyer quelque chose, d'autres rendent cette valeur de retour facultative. Pour empêcher une soumission de formulaire, un gestionnaire d'événements d'envoi peut renvoyer false comme suit -

$("#myform").submit(function() {
   return false;
});

Fermetures

Les fermetures sont créées chaque fois qu'une variable définie en dehors de la portée actuelle est accessible depuis une certaine portée interne.

L'exemple suivant montre comment la variable counter est visible dans les fonctions de création, d'incrémentation et d'impression, mais pas en dehors d'elles -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Ce modèle vous permet de créer des objets avec des méthodes qui opèrent sur des données qui ne sont pas visibles du monde extérieur. Il faut noter quedata hiding est la base même de la programmation orientée objet.

Modèle de proxy

Un proxy est un objet qui peut être utilisé pour contrôler l'accès à un autre objet. Il implémente la même interface que cet autre objet et lui transmet toutes les invocations de méthode. Cet autre objet est souvent appelé le vrai sujet.

Un proxy peut être instancié à la place de ce sujet réel et lui permettre d'être accessible à distance. Nous pouvons enregistrer la méthode setArray de jQuery dans une fermeture et l'écraser comme suit -

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Ce qui précède enveloppe son code dans une fonction pour masquer la variable mandatée . Le proxy enregistre ensuite tous les appels à la méthode et délègue l'appel à la méthode d'origine. L' utilisation de apply (this, arguments) garantit que l'appelant ne pourra pas remarquer la différence entre la méthode d'origine et la méthode mandatée.

Fonctions intégrées

JavaScript est livré avec un ensemble utile de fonctions intégrées. Ces méthodes peuvent être utilisées pour manipuler des chaînes, des nombres et des dates.

Voici les fonctions JavaScript importantes -

Sr.No.	Méthode et description
1	charAt() Renvoie le caractère à l'index spécifié.
2	concat() Combine le texte de deux chaînes et renvoie une nouvelle chaîne.
3	forEach() Appelle une fonction pour chaque élément du tableau.
4	indexOf() Renvoie l'index dans l'objet String appelant de la première occurrence de la valeur spécifiée, ou -1 s'il est introuvable.
5	length() Renvoie la longueur de la chaîne.
6	pop() Supprime le dernier élément d'un tableau et renvoie cet élément.
sept	push() Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.
8	reverse() Inverse l'ordre des éléments d'un tableau - le premier devient le dernier et le dernier devient le premier.
9	sort() Trie les éléments d'un tableau.
dix	substr() Renvoie les caractères d'une chaîne commençant à l'emplacement spécifié jusqu'au nombre de caractères spécifié.
11	toLowerCase() Renvoie la valeur de la chaîne appelante convertie en minuscules.
12	toString() Renvoie la représentation sous forme de chaîne de la valeur du nombre.
13	toUpperCase() Renvoie la valeur de la chaîne appelante convertie en majuscules.

Le modèle objet de document

Le modèle d'objet de document est une structure arborescente de divers éléments HTML comme suit -

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Cela produira le résultat suivant -

Voici les points importants concernant l'arborescence ci-dessus -

Le <html> est l'ancêtre de tous les autres éléments; en d'autres termes, tous les autres éléments sont des descendants de <html>.
Les éléments <head> et <body> ne sont pas seulement des descendants, mais aussi des enfants de <html>.
De même, en plus d'être l'ancêtre de <head> et <body>, <html> est également leur parent.
Les éléments <p> sont les enfants (et descendants) de <div>, les descendants de <body> et <html>, et les frères et sœurs des autres éléments <p>.

Tout en apprenant les concepts de jQuery, il sera utile d'avoir une compréhension du DOM.Si vous n'êtes pas au courant du DOM, je vous suggère de suivre notre tutoriel simple sur le didacticiel DOM .

↰ Previous page Next page ↱