Accueil Médias sociaux JavaScript & AJAX pour Dummies Cheat Sheet - les nuls

JavaScript & AJAX pour Dummies Cheat Sheet - les nuls

Vidéo: AJAX Tutorial for Beginners | What is AJAX | Learn AJAX 2025

Vidéo: AJAX Tutorial for Beginners | What is AJAX | Learn AJAX 2025
Anonim

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

D

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
get (url, paramètres)

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.

JavaScript & AJAX pour Dummies Cheat Sheet - les nuls

Le choix des éditeurs

Valide Versus un document XML bien formé - mannequins

Valide Versus un document XML bien formé - mannequins

En 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 - mannequins

Validation de votre page Web HTML5 - mannequins

Peu 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 - nuls

Espacement vertical en HTML - nuls

Pour 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 nuls

Héberger des vidéos Mobile sur YouTube - des nuls

Pour 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 - mannequins

Sites Web QuarkXPress utiles - mannequins

Les 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émoins

Activation de User Agent Switcher dans Safari - Témoins

Lorsque 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 - mannequins

Raccourcis vers les centres de commande dans MYOB - mannequins

Vous 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 nominales

Rapprochement de votre compte bancaire dans Sage 50 - variables nominales

Avant 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 nuls

Solutions et Knowledge in Salesforce. com Service Cloud - les nuls

En 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 ...