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.
Le choix des éditeurs
Valide Versus un document XML bien formé - mannequinsEn XML, un document valide doit se conformer aux règles de sa définition DTD (Document Type Definition) ou schéma, qui définit quels éléments peuvent apparaître dans le document et comment les éléments peuvent s'imbriquer les uns dans les autres. Si un document n'est pas bien formé, il ne va pas très loin dans le monde XML, donc vous avez besoin de ... 
Validation de votre page Web HTML5 - mannequinsPeu importe votre précaution, vous faites parfois des bêtises lorsque coder vos pages Web HTML5. Un outil comme un correcteur orthographique pour le code serait génial. Et voilà, il existe un tel outil de vérification de code. Le W3C Markup Validation Service, présenté par les mêmes personnes qui ont élaboré les normes ... 
Espacement vertical en HTML - nulsPour le codage du contenu de la page en HTML pour vos pages Web, vous pourriez demander: «Comment puis-je me débarrasser de cet espacement (vertical)? "Entre les paragraphes. Ou, "Comment ajouter un espacement (vertical) entre les éléments de la liste? "D'abord, il sera utile de comprendre d'où vient cet espacement vertical. Espacement vertical en HTML ... Le choix des éditeurs
Héberger des vidéos Mobile sur YouTube - des nulsPour les webmestres mobiles qui ne veulent pas se démener Sur de nouveaux lexiques de spécifications techniques, l'option la plus simple est de laisser YouTube, représenté sur la figure, faire tout le travail d'hébergement et de diffusion de la vidéo. YouTube rend toutes ses vidéos mobiles conviviales, offrant la meilleure version pour chaque appareil. Lorsque vous téléchargez ... 
Sites Web QuarkXPress utiles - mannequinsLes utilisateurs de quarkXPress ont accès à une foule d'informations et de cadeaux liés à QuarkXPress. La prochaine fois que vous êtes en ligne, consultez certains de ces sites QuarkXPress et de publication assistée par ordinateur. Sites XTensions Des centaines de XTensions commerciales pour QuarkXPress sont disponibles pour Mac et Windows; ces XTensions gèrent un large éventail de tâches que QuarkXPress ne peut pas faire. Beaucoup d'informations ... 
Activation de User Agent Switcher dans Safari - TémoinsLorsque vous testez un site Web Destiné à l'iPhone et l'iPad sur un ordinateur de bureau, si le script de détection de périphérique sur un serveur reconnaît que vous utilisez un navigateur sur un ordinateur, il ne vous montre pas la version du téléphone. C'est là que l'agent utilisateur entre dans l'image. Safari inclut des fonctionnalités spéciales qui permettent ... Le choix des éditeurs
Raccourcis vers les centres de commande dans MYOB - mannequinsVous pouvez vous rendre directement au centre de commande de votre choix MYOB. Appuyez sur la touche Ctrl de votre PC tout en appuyant sur l'un de ces chiffres - et vous allez au centre de commande de votre désir! Combinaison de touches Raccourci Résultat Ctrl-1 Centre de commande des comptes Ctrl-2 Centre de commande bancaire Ctrl-3 Centre de commande des ventes Ctrl-4 ... 
Rapprochement de votre compte bancaire dans Sage 50 - variables nominalesAvant de commencer un rapprochement bancaire dans Sage 50, vous devez pour vous assurer que vous avez saisi la majorité de vos transactions financières pendant la période de réconciliation. Traditionnellement, les comptables réconcilient le compte bancaire à la fin de chaque mois, une fois qu'ils ont reçu leurs relevés bancaires. Cependant, l'avènement de la banque en ligne ... 
Solutions et Knowledge in Salesforce. com Service Cloud - les nulsEn tant qu'agent, vous devez savoir quels outils sont à votre disposition dans Service Cloud pour faciliter votre travail. Plus spécifiquement, Salesforce propose deux outils majeurs de résolution de problèmes pour les clients et les agents de support, Solutions et Knowledge. Quelle est la différence, demandez-vous? Avant de regarder les différences, voici ce qu'elles contiennent ... |
