Vidéo: AJAX Tutorial for Beginners | What is AJAX | Learn AJAX 2025
Par Andy Harris
Les tableaux que vous trouverez ici offrent une référence unique pour les variables de programmation, les commandes, les méthodes et les codages de programmation les plus courants utilisés dans les programmes JavaScript, jQuery et AJAX.
Code à utiliser dans les fonctions JavaScript de manipulation de variables
Comme indiqué dans le tableau suivant, vous pouvez utiliser ces instructions JavaScript dans votre propre code pour créer et modifier des variables dans vos fonctions JavaScript.
Elément | Description |
---|---|
var myVar = 0; | Crée une variable avec une valeur de départ donnée. Le type est déterminé dynamiquement. |
stringVar = prompt ("message") | Envoie un message à l'utilisateur dans une boîte de dialogue, récupère la saisie de texte de l'utilisateur et la stocke dans stringVar. |
stringVar. length | Renvoie la longueur (en caractères) de stringVar. |
stringVar. toUpperCase (), stringVar. toLowerCase () | Convertit stringVar en majuscules ou en minuscules. |
stringVar. substring () | Retourne un sous-ensemble spécifié de stringVar. |
stringVar. indexOf () | Retourne l'emplacement d'une sous-chaîne dans stringVar (ou -1). |
parseInt () | Convertit la chaîne en int. |
parseFloat () | Convertit la chaîne en float. |
toString () | Convertit n'importe quelle variable en chaîne. |
eval () | Évalue la chaîne en code JavaScript. |
Math. ceil () | Convertit n'importe quel nombre en nombre entier en arrondissant à la valeur supérieure. |
Math. floor () | Convertit n'importe quel nombre en nombre entier en arrondissant vers le bas. |
Math. round () | Convertit n'importe quel nombre en entier par un algorithme d'arrondi standard. |
Math. random () | Retourne un flottant aléatoire entre 0 et 1. |
Commandes d'E / S de base en JavaScript
Les programmeurs JavaScript utilisent couramment les commandes présentées dans le tableau suivant pour contrôler les entrées et les sorties basées sur les dialogues dans les programmes à utiliser sur le Web.
Élément | Description |
---|---|
alerte ("message"); | Crée une boîte de dialogue contextuelle contenant "message". |
stringVar = prompt ("message") | Envoie un message à l'utilisateur dans une boîte de dialogue, récupère la saisie de l'utilisateur et la stocke dans stringVar. |
Conditions JavaScript et structures de code de branchement
Consultez le tableau suivant pour connaître les structures de contrôle JavaScript que vous pouvez utiliser dans votre code de programme pour ajouter un comportement de branchement et de bouclage à vos programmes JavaScript.
Elément | Description |
---|---|
if (condition) {
// contenu } else { // plus de contenu } // fin si |
N'exécute le contenu que si la condition est vraie.
La clause else facultative se produit si la condition est fausse. |
switch (expression)
case: valeur; // code pause; par défaut: // code } |
Compare l'expression avec une ou plusieurs valeurs. Si l'expression
est égale à la valeur, exécute le code correspondant. La clause par défaut attrape les valeurs non interceptées. |
pour (i = 0; i // code } // fin pour |
Répète le code i fois. |
While (condition) {
// code } // fin en |
Répète le code tant que la condition est vraie. |
Fonction fnName (paramètres) {
// code } // fonction de fin |
Définit une fonction nommée fnName et
envoie les paramètres. Tout le code à l'intérieur de la fonction sera exécuté lorsque la fonction est appelée. |
Ajouter des opérateurs de comparaison JavaScript aux instructions de condition
JavaScript utilise des opérateurs de comparaison dans les conditions pour effectuer des comparaisons numériques ou alphabétiques de variables avec d'autres variables ou valeurs. En utilisant ces opérateurs, vous pouvez déterminer si une variable est supérieure, inférieure ou égale à une autre variable ou valeur. Vous pouvez également utiliser des combinaisons de ces opérateurs de comparaison.
Nom | Opérateur | Exemple | Notes |
---|---|---|---|
Égalité | == | (x == 3) | Fonctionne avec tous les types de variables, y compris les chaînes. |
Différent de | ! = | (x! = 3) | Vrai si les valeurs ne sont pas égales. |
Moins de | << (x <3) | Comparaison numérique ou alphabétique. | Supérieur à >> |
(x> 3) | Comparaison numérique ou alphabétique. | Inférieur ou égal à | <= |
(x <= 3) | Comparaison numérique ou alphabétique. | Supérieur ou égal à >> = | (x> = 3) |
Comparaison numérique ou alphabétique. | Créer des structures et des objets JavaScript | JavaScript vous permet de créer des lignes de code pour créer des fonctions et des variables afin de créer des tableaux. Vous pouvez mettre des fonctions et des variables ensemble pour créer des objets. | Elément |
Description
fonction fnName (paramètres) {
// code | } // fonction de fin |
Définit une fonction nommée fnName et
envoie les paramètres. Tout le code à l'intérieur de la fonction s'exécutera quand la fonction sera appelée. |
var myArray = new Tableau ("a",
"b", "c"); Crée un tableau. Les éléments peuvent être de n'importe quel type (même les types mixtes |
).
Var myJSON = { |
"name":
"Andy", |
"title":
"Auteur" } Crée un objet JSON. Chaque élément a une paire nom / valeur, et peut contenir n'importe quoi, y compris un tableau (avec des accolades carrées), un autre objet JSON, |
ou une fonction.
Var personne = new Objet (); Personne. name = "Andy"; |
Crée un objet. Vous pouvez ajouter des variables ordinaires (qui deviennent des propriétés) ou des fonctions (qui deviennent des méthodes).
Modification de votre page Web avec JavaScript Méthodes de modèle d'objet de document |
Les méthodes du modèle d'objet de document présentées dans la liste suivante vous offrent un excellent moyen d'accéder à vos pages Web et de les modifier via votre code JavaScript.
myElement = document. getElementById ( |
"
nom
-
" ); : Récupère un élément de la page avec l'ID spécifié et copie une référence à cet élément dans la variable myElement. myElement. innerHTML = " valeur
-
" : Change la valeur de l'élément en "valeur". document. onkeydown = keyListener : Lorsqu'une touche est pressée, une fonction appelée keyListener est automatiquement activée.
-
document. onmousemove = mouseListener : Lorsque la souris est déplacée, une fonction appelée mouseListener est automatiquement activée.
-
setInterval (fonction, ms); : Fonctionne toutes les ms millisecondes.
-
myArray = document. getElementByName (" name
-
" ) : Renvoie un tableau d'objets avec le nom actuel (fréquemment utilisé avec les boutons radio). Ajouter des outils de recherche avec des opérateurs d'expression régulière en JavaScript Le mécanisme d'expression régulière ajoute des outils de recherche extrêmement puissants à votre programmation. Voici certaines des expressions régulières les plus couramment utilisées car elles sont utilisées en JavaScript. Opérateur
et
Description
Modèle
modèle Correspondances |
et Ne | '
correspondent à . (point) N'importe quel caractère sauf |
newline
. E n |
^ | Début de la chaîne
^ a |
pomme
Banane |
$ | Fin de la chaîne
a $ |
banane
Apple |
[caractères] | N'importe lequel d'une liste de
caractères dans |
accolades
[abcABC] A D |
[plage char] > N'importe quel caractère dans | l'intervalle
[a-zA-Z] |
F
9 d |
N'importe quel chiffre |
ddd-dddd |
123-4567
La chose b |
Une limite de mots | btheb
la |
Théâtre
+ |
Une ou plusieurs occurrences | de la
caractère précédent |
d +
1234 Texte * |
Zéro ou plus | occurrences du caractère précédent |
[a-zA-Z] d *
B17, g 7 {chiffre} |
Répétez précédant | caractère
chiffre |
fois
d {3} -d {4} 123-4567 > 999-99-9999 {min, max} Répéter le caractère précédent |
au moins | min
mais pas plus |
que
max fois . {2, 4} Ca, com, info pastèque (segment de motif) Stockez les résultats dans |
la mémoire de motifs | renvoyée avec le code
^ (.). * 1 $ |
gig, wallow
Bobby Méthodes communes du nœud jQuery La bibliothèque jQuery transforme les objets DOM en puissants nœuds jQuery. Le tableau suivant montre quelques-unes des méthodes les plus couramment utilisées du noeud jQuery. |
M | ethod
Description |
addClass (), removeClass (),
toggleClass ()
Applique ou supprime une classe CSS à un nœud jQuery. css ("attribute", | "value") |
Applique une seule règle CSS au noeud jQuery.
Css (JSONObject) |
Applique la liste d'objets JSON des règles CSS et des valeurs au nœud jQuery |
.
html () |
Lit ou modifie le contenu HTML du noeud jQuery. |
text () | Lit ou modifie le contenu du texte d'un nœud jQuery.
val () |
Lit la valeur d'un élément de formulaire. | bind (événement, fonction) |
La fonction Triggers se déclenche lorsqu'un événement se produit. | Show (), hide (), toggle () |
Rend l'élément visible ou disparaît. | animate (paramètres, durée) |
parameters est un objet JSON | constitué de règles CSS et de valeurs. Les valeurs sont régulièrement modifiées |
de la valeur actuelle à la valeur cible sur la durée (mesurée en | millisecondes). |
Sélecteurs et filtres jQuery | Une partie de la puissance de jQuery est basée sur sa capacité à sélectionner des sections particulières de la page.Cette table comprend plusieurs sélecteurs et filtres couramment utilisés.
Sélecteur / Filtre Recherche … $ ("element") |
Tout élément HTML.
$ ("# elementID")
Tout élément avec l'ID donné. | $ (". ClassName") |
Tout élément avec le nom de classe donné. | : en-tête |
Toute balise d'en-tête (h1, h2, h3, etc.). | : animé |
Tout élément en cours d'animation. | : contient (texte) |
Tout élément contenant le texte indiqué. | : vide |
L'élément est vide. | : parent |
Un élément qui contient un autre élément. | : attribute = value |
L'élément a un attribut avec la valeur spécifiée. | : Entrée,: texte,: radio,: image,: bouton, |
etc | Correspond au type d'élément spécifique (particulièrement utile pour les éléments de formulaire |
qui sont toutes les variantes de l'étiquette d'entrée). |
|
Ajouter des classes d'interface utilisateur jQuery aux styles de thème
Ces classes CSS sont définies dans un thème d'interface utilisateur jQuery. Si vous utilisez l'interface utilisateur jQuery, vous pouvez ajouter l'une de ces classes à vos objets pour ajouter les styles de thème. |
Classe
Utilisé sur |
escription
ui-widget
Conteneur externe du widget | Rend l'élément semblable à un widget. | ui-widget-header Rubrique |
Applique un aspect de titre distinctif. | ui-widget-content | Widget |
Applique le style de contenu du widget à l'élément et aux enfants. | ui-state-default | Éléments cliquables |
Affiche l'état standard (non cliqué). | ui-state-hover | Éléments cliquables |
Affiche l'état du survol. | ui-state-focus | Éléments cliquables |
Afficher l'état de mise au point lorsque l'élément a le focus sur le clavier. | ui-state-active | éléments cliquables |
Afficher l'état actif lorsque l'utilisateur clique sur l'élément. | ui-state-highlight | Tout widget ou élément |
Spécifie que l'élément est actuellement en surbrillance. | ui-state-error | Tout widget ou élément |
Spécifie qu'un élément contiendra un message d'erreur ou d'avertissement | . | texte d'erreur d'état d'ui |
élément de texte | Permet la mise en évidence d'erreur sans changer d'autres éléments | (principalement utilisés dans la validation de formulaire).
ui-state-disabled |
Tout widget ou élément | Démontre que le widget est actuellement désactivé. | ui-coin-tout,
ui-coin-tl (etc) |
N'importe quel widget ou élément | Ajoute la taille du coin courant à l'élément. Spécifiez les coins spécifiques | avec tl, tr, bl, br, haut, bas, gauche, droite. |
ui-widget-shadow
Tout widget |
Applique l'effet d'ombre au widget. |
Méthodes jQuery pour envoyer une requête AJAX |
Comme vous pouvez le voir en étudiant le tableau suivant, jQuery fournit plusieurs méthodes pour envoyer une requête AJAX au serveur et analyser les résultats. | Méthode | Description |
Envoyer une requête HTTP GET à l'URL
donnée. Les paramètres sont des objets JSON
encapsulant des données de formulaire (paires nom / valeur). Le résultat est renvoyé en | HTML, XML ou en texte brut. |
post (url, paramètres) | Tout comme get, mais utilise la méthode post, qui cache les paramètres.
load (url, paramètres) Tout comme get (), mais retourne un objet jQuery .L'appel du contenu des objets jQuery est remplacé par les données renvoyées |
(généralement HTML ou XHTML). | getJSON |
Comme get, mais retourne un objet JSON, | qui peut être analysé pour un traitement ultérieur.
![]() |