Que vous appreniez encore Javascript ou que vous soyez un développeur avancé, il peut être utile de conserver une feuille de référence pour les commandes JavaScript courantes. Nous avons compilé une aide-mémoire JavaScript téléchargeable à garder près de votre bureau. Mais d’abord, récapitulons ce qu’est JavaScript et comment il fonctionne.
Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour créer des éléments interactifs d’un site Web, tels que des cartes, des vidéos défilantes et des animations. Il fonctionne en tandem avec d’autres langages de codage, comme HTML et CSS.
Quelle est la différence entre JavaScript, HTML et CSS ?
JavaScript, HTML et CSS sont tous des langages de programmation avec des différences majeures :
HTML est le langage utilisé pour définir le texte et les titres, ainsi que pour intégrer des images sur une page Web
CSS est le langage utilisé pour appliquer un style au contenu HTML, comme les couleurs et les polices.
JavaScript est le langage qui crée du contenu interactif et dynamique comme des graphiques animés, des cartes, des vidéos défilantes, etc.
Où se trouve JavaScript sur votre site Web
JavaScript se trouve dans le HTML de vos pages Web. Il doit être réservé par tags. For example://JS code goes hereVous pouvez également ajouter votre JavaScript à un fichier et créer un lien vers celui-ci dans votre code HTML. Cette forme de lien, parfois appelée « lien externe vers JavaScript », vous aide à garder une trace de votre code.
Il existe des catégories de code JavaScript, notamment :
Variables : une variable est un élément qui peut varier (c’est-à-dire une valeur de données qui peut être modifiée)
Opérateurs : comme avec d’autres langages de programmation, un opérateur exploite une ou plusieurs valeurs de données pour produire un résultat
Fonctions : Une fonction prend une entrée et produit une sortie associée. Il s’agit généralement d’un ensemble d’instructions qui exécute une tâche pour produire un résultat
Boucles : boucle un bloc de code jusqu’à ce que certaines conditions soient remplies
Instructions If – Else : comme un organigramme, les instructions If-Else exécutent des blocs de code si certaines conditions sont vraies. Si les conditions sont fausses, un autre bloc de code est exécuté
Chaînes : les chaînes sont un moyen de stocker du texte. Dans les chaînes, le premier caractère est 0, le deuxième caractère est 1, le troisième caractère est 2, et ainsi de suite
Expressions régulières : également appelée expression rationnelle, une expression régulière est une chaîne de caractères dans un modèle utilisé pour faire correspondre des combinaisons de caractères
Nombres et mathématiques : les nombres et les mathématiques sont des propriétés statiques pour les constantes et les fonctions mathématiques
Dates : Comme son nom l’indique, les dates en JavaScript sont un moment dans le temps qui peut être aussi précis qu’une milliseconde particulière un jour particulier
Nœud DOM : un nœud DOM est un moyen de permettre à JavaScript de mettre à jour dynamiquement le contenu d’une page
Événements : un événement est une modification ou une mise à jour de la page Web qui se produit lors de l’exécution du code JavaScript
Aide-mémoire de commande JavaScript
Lorsque vous travaillez avec JavaScript, essayez notre « aide-mémoire » complète des commandes JavaScript. VariablesCe sont des éléments qui peuvent varier, qui peuvent inclure des variables, des types de données et des tableaux. var La variable la plus courante. Les variables var se déplacent vers le haut lorsque le code est exécuté const Une variable qui ne peut pas être réaffectée et n’est pas accessible avant d’apparaître dans le code let La variable let peut être réaffectée mais pas redéclarée var age = 23 Nombres var x Variables var a = « init » Texte (chaînes) var b = 1 + 2 + 3 Opérations var c = true Déclarations vraies ou fausses const PI = 3.14 Nombres constants var name = {firstName: »John », lastName: »Doe »} Objets concat() Joindre plusieurs tableaux en un seul indexOf() Renvoie la première position à laquelle un élément donné apparaît dans un tableau join() Combine les éléments d’un tableau en une seule chaîne et renvoie la chaîne lastIndexOf() Donne la dernière position à laquelle un élément donné apparaît dans un tableau pop() Supprime le dernier élément d’un tableau push() Ajoute un nouvel élément à la fin reverse() Inverse l’ordre des éléments dans un tableau shift() Supprime le premier élément d’un tableau slice() Extrait une copie d’une partie d’un tableau dans un nouveau tableau de 4 24 sort() Trie les éléments par ordre alphabétique splice() Ajoute des éléments d’une manière et une position spécifiées toString() Convertit les éléments en chaînes unshift() Ajoute un nouvel élément au début valueOf() Renvoie la valeur primitive de l’objet spécifié OpérateursCe sont des valeurs de données uniques ou multiples utilisées pour produire un résultat, y compris les opérateurs de base, les opérateurs de comparaison, les opérateurs logiques et les opérateurs au niveau du bit. (signe plus) + Addition – Soustraction * Multiplication / Division (..) Opérateur de groupement Opérateur de groupement % Reste (deux signes plus) ++ Incrémenter les nombres — Décrémenter les nombres ( 2 signes égaux) == Egal à (3 signes égaux) = == Valeur égale et type égal ! = Différent ! == Valeur différente ou type différent > Supérieur à < Less than >= Supérieur ou égal à Décalage à droite >>> Fonctions de décalage à droite de remplissage à zéroCelles-ci effectuent une tâche pour produire une sortie associée, y compris la sortie de données et les fonctions globales. alert() Une boîte d’alerte s’affiche avec un bouton OK confirm() Affiche une boîte de message avec les options ok/cancel console.log() Écrit des informations dans le navigateur document.write() Écrit directement dans l’invite du document HTML() Un pop up box qui nécessite une entrée utilisateur decodeURI() Décode un URI (Uniform Resource Identifier) créé par encodeURI decodeURIComponent() Décode un composant URI encodeURI() Encode un URI en UTF-8 encodeURIComponent() Encode un URI en utilisant des nombres pour représenter les lettres eval( ) Évalue le code JavaScript représenté sous forme de chaîne isFinite() Détermine si une valeur transmise est un nombre fini isNaN() Détermine si une valeur est NaN ou non Number() Renvoie un nombre converti à partir de son argument parseFloat() Analyse un argument et renvoie un nombre à virgule flottante parseInt() Analyse son argument et renvoie un entier. Boucles Celles-ci se produisent jusqu’à ce que certaines conditions soient remplies. for La manière la plus courante de créer une boucle en JavaScript while Définit les conditions d’une boucle do-while Vérifie à nouveau si les conditions sont remplies break Arrête le cycle de la boucle si les conditions ne sont pas remplies continue Ignore des parties de la boucle si les conditions sont remplies Instructions If – Else Elles sont conçues pour exécuter des blocs de code si certaines conditions sont remplies. if (condition) {//} Si une condition est remplie, faites ceci } else {//} Si une condition n’est pas remplie, faites ceci StringsThese stockent du texte et incluent des caractères d’échappement et des méthodes de chaîne. ‘ Guillemet simple » Guillemet double \ Barre oblique inverse b Retour arrière f Saut de page n Nouvelle ligne r Retour chariot t Tabulation horizontale v Tabulation verticale charAt() Renvoie un caractère à une position spécifiée charCodeAt() Vous donne l’unicode de caractère à une position spécifiée concat() Joint plusieurs chaînes ensemble fromCharCode() Convertit les valeurs unicode UTF-16 en caractères indexOf() Renvoie la position de la première occurrence d’un élément spécifié lastIndexOf() Renvoie la position de la dernière occurrence d’un élément spécifié match() Renvoie toutes les correspondances d’une chaîne replace() Rechercher et remplacer un texte spécifique search() Recherche du texte et renvoie sa position slice() Extrait une section d’une chaîne et la renvoie split() Divise une chaîne en sous-chaînes et la renvoie à une position spécifiée substr() Extrait une chaîne et la renvoie à une position spécifiée sous-chaîne () À l’exclusion des indices négatifs, divise une chaîne en sous-chaînes et la renvoie à une position spécifiée toLowerCase() Convertir en minuscules enUpperCase() Convertir en majuscules valueOf() Renvoie la valeur primitive d’un objet chaîne Expressions régulières Ce sont des modèles, y compris les modificateurs de modèle, crochets, métacaractères et quantificateurs. e Évaluer le remplacement i Effectuer une correspondance insensible à la casse g Effectuer une correspondance globale m Effectuer une correspondance sur plusieurs lignes s Traiter les chaînes comme une seule ligne x Autoriser les commentaires et les espaces dans le motif U Motif non gourmand [abc] Trouvez l’un des caractères entre les crochets [^abc] Trouvez n’importe quel caractère qui n’est pas entre parenthèses [0-9] Utilisé pour trouver n’importe quel chiffre de 0 à 9 [A-z] Trouvez n’importe quel caractère de A majuscule à z minuscule (a|b|c) Trouvez l’une des alternatives séparées par | . Trouver un seul caractère, à l’exception d’un saut de ligne ou d’une fin de ligne w Caractère de mot W Caractère non-mot d Un chiffre DA caractère non-chiffre s Caractère d’espacement S Caractère non-espacement b Trouver une correspondance au début/à la fin d’un mot BA ne correspond pas au début/à la fin d’un mot Caractère NUL n Un caractère de nouvelle ligne f Caractère de saut de page r Caractère de retour chariot t Caractère de tabulation v Caractère de tabulation vertical xxx Le caractère spécifié par un nombre octal xxx xdd Le caractère spécifié par un nombre hexadécimal dd uxxxx Le caractère Unicode spécifié par un nombre hexadécimal xxxx n+ Correspond à toute chaîne qui contient au moins un n Nombres et mathématiquesCe sont des fonctions mathématiques, y compris les propriétés des nombres, les méthodes numériques, les mathématiques propriétés et méthodes mathématiques. MAX_VALUE La valeur numérique maximale représentable en JavaScript MIN_VALUE La plus petite valeur numérique positive représentable en JavaScript NaN La valeur « Not-a-Number » NEGATIVE_INFINITY La valeur Infinity négative POSITIVE_INFINITY La valeur Infinity positive toExponential() Renvoie une chaîne avec un nombre arrondi écrit en notation exponentielle toFixed () Renvoie la chaîne d’un nombre avec un nombre spécifié de décimales toPrecision() Une chaîne d’un nombre écrit avec une longueur spécifiée toString() Renvoie un nombre sous forme de chaîne valueOf() Renvoie un nombre sous forme de nombre E Numéro d’Euler LN2 Le logarithme népérien de 2 LN10 Logarithme népérien de 10 LOG2E Logarithme de base 2 de E LOG10E Logarithme de base 10 de E PI Le nombre PI SQRT1_2 La racine carrée de 1/2 SQRT2 La racine carrée de 2 abs(x) Renvoie la valeur absolue (positive) de x DatesCeux-ci incluent des points spécifiques dans le temps et incluent la date de réglage s, et extraire les valeurs de date et d’heure, et définir une partie d’une date. tan(x) La tangente d’un angle Date() Crée un nouvel objet date avec la date et l’heure actuelles Date(2017, 5, 21, 3, 23, 10, 0) Créez un objet date personnalisé. Les nombres représentent l’année, le mois, le jour, l’heure, les minutes, les secondes, les millisecondes. Vous pouvez omettre tout ce que vous voulez, à l’exception de l’année et du mois. Date(« 2017-06-23 ») Déclaration de date sous forme de chaîne getDate() Récupère le jour du mois sous forme de nombre (1-31) getDay() Le jour de la semaine sous forme de nombre (0-6) getFullYear() Année sous forme un nombre à quatre chiffres (aaaa) getHours() Obtenir l’heure (0-23) getMilliseconds() La milliseconde (0-999) getMinutes() Obtenir la minute (0-59) getMonth() Mois sous forme de nombre (0-11 ) getSeconds() Récupère la seconde (0-59) getTime() Récupère les millisecondes depuis le 1er janvier 1970 getUTCDate() Le jour (date) du mois à la date spécifiée selon l’heure universelle (également disponible pour le jour, le mois, année complète, heures, minutes, etc.) parse Analyse une représentation sous forme de chaîne d’une date et renvoie le nombre de millisecondes depuis le 1er janvier 1970 setDate() Définit le jour sous forme de nombre (1-31) setFullYear() Définit l’année ( mois et jour en option) setHours() Définit l’heure (0-23) setMilliseconds() Définit les millisecondes (0-999) setMinutes() Définit les minutes (0-59) setMo nth() Définit le mois (0-11) setSeconds() Définit les secondes (0-59) setTime() Définit l’heure (millisecondes depuis le 1er janvier 1970) setUTCDate() Définit le jour du mois pour une date spécifiée selon à l’heure universelle (également disponible pour le jour, le mois, l’année complète, les heures, les minutes, etc.) DOM NodeThis permet à JavaScript de mettre à jour la page Web et d’inclure les propriétés de nœud, les méthodes de nœud et les méthodes d’élément. attributs Renvoie une collection en direct de tous les attributs enregistrés dans et élément baseURI Fournit l’URL de base absolue d’un élément HTML childNodes Fournit une collection de nœuds enfants d’un élément firstChild Renvoie le premier nœud enfant d’un élément lastChild Le dernier nœud enfant d’un élément nextSibling Donne vous êtes le nœud suivant au même niveau de l’arborescence des nœuds nodeName Renvoie le nom d’un nœud nodeType Renvoie le type d’un nœud nodeValue Définit ou renvoie la valeur d’un nœud ownerDocument L’objet document de niveau supérieur pour ce nœud parentNode Renvoie le nœud parent d’un element previousSibling Renvoie le nœud précédant immédiatement le nœud actuel textContent Définit ou renvoie le contenu textuel d’un nœud et de ses descendants appendChild() Ajoute un nouveau nœud enfant à un élément en tant que dernier nœud enfant cloneNode() Clone un élément HTML compareDocumentPosition() Compare la position du document de deux éléments ents getFeature() Renvoie un objet qui implémente les API d’une fonctionnalité spécifiée hasAttributes() Renvoie true si un élément a des attributs, sinon false hasChildNodes() Renvoie true si un élément a des nœuds enfants, sinon false insertBefore() Insère un nouveau nœud enfant avant un nœud enfant existant spécifié isDefaultNamespace() Retourne vrai si un namespaceURI spécifié est la valeur par défaut, sinon false isEqualNode() Vérifie si deux éléments sont égaux isSameNode() Vérifie si deux éléments sont le même nœud isSupported() Retourne vrai si une fonctionnalité spécifiée est prise en charge sur l’élément lookupNamespaceURI() Renvoie le namespaceURI associé à un nœud donné lookupPrefix() Renvoie un DOMString contenant le préfixe pour un namespaceURI donné, s’il est présent normalize() Joint les nœuds de texte adjacents et supprime les nœuds de texte vides dans un élément removeChild() Supprime un nœud enfant d’un élément replaceChild() Remplace un nœud enfant dans un élément getAttribute() Renvoie la valeur d’attribut spécifiée d’un nœud d’élément getAttributeNS() Renvoie la valeur de chaîne de l’attribut avec l’espace de noms et le nom spécifiés getAttributeNode() Obtient le nœud d’attribut spécifié getAttributeNodeNS() Renvoie le nœud d’attribut pour le attribut avec l’espace de noms et le nom donnés getElementsByTagName() Fournit une collection de tous les éléments enfants avec le nom de balise spécifié getElementsByTagNameNS() Renvoie une HTMLCollection en direct d’éléments avec un certain nom de balise appartenant à l’espace de noms donné hasAttribute() Renvoie vrai si un élément a tous les attributs, sinon false hasAttributeNS() Fournit une valeur vrai/faux indiquant si l’élément actuel dans un espace de noms donné a l’attribut spécifié removeAttribute() Supprime un attribut spécifié d’un élément removeAttributeNS() Supprime l’attribut spécifié d’un élément dans un certain espace de noms re moveAttributeNode() Supprime un nœud d’attribut spécifié et renvoie le nœud supprimé setAttribute() Définit ou modifie l’attribut spécifié à une valeur spécifiée setAttributeNS() Ajoute un nouvel attribut ou modifie la valeur d’un attribut avec l’espace de noms et le nom donnés setAttributeNode() Définit ou modifie le nœud d’attribut spécifié setAttributeNodeNS() Ajoute un nouveau nœud d’attribut avec espace de noms à un élément ÉvénementsCe sont les mises à jour causées par le code JavaScript et incluent la souris, le clavier, le cadre, le formulaire, le glisser, le presse-papiers, les médias, l’animation et autres. onclick L’événement se produit lorsque l’utilisateur clique sur un élément oncontextmenu L’utilisateur fait un clic droit sur un élément pour ouvrir un menu contextuel ondblclick L’utilisateur double-clique sur un élément onmousedown L’utilisateur appuie sur un bouton de la souris sur un élément onmouseenter Le pointeur se déplace sur un élément onmouseleave Le pointeur sort d’un élément onmousemove Le pointeur se déplace alors qu’il est sur un élément onmouseover Lorsque le pointeur est déplacé sur un élément ou l’un de ses enfants onmouseout L’utilisateur déplace le pointeur de la souris hors d’un élément ou de l’un de ses enfants onmouseup L’utilisateur relâche un bouton de la souris alors qu’il survole un élément onkeydown Lorsque l’utilisateur appuie sur une touche onkeypress Le moment où l’utilisateur commence à appuyer sur une touche onkeyup L’utilisateur relâche une touche onabort Le chargement d’un média est interrompu onbeforeunload L’événement se produit avant que le document ne soit sur le point à décharger en cas d’erreur Une erreur se produit lors du chargement d’un fichier externe onhashchange Des modifications ont été apportées à la partie ancre d’une URL onload Lorsqu’un objet a été chargé onpagehide L’utilisateur quitte une page Web onpageshow Lorsque l’utilisateur navigue vers une page Web onresize La vue du document est redimensionnée onscroll La barre de défilement d’un élément défile au déchargement L’événement se produit lorsqu’une page s’est déchargée onblur Lorsqu’un élément perd le focus onchange Le contenu d’un élément de formulaire change (par, et ) onfocus Un élément obtient le focus onfocusin Lorsqu’un élément est sur le point d’obtenir le focus onfocusout L’élément est sur le point de perdre le focus oninput Entrée utilisateur sur un élément oninvalid Un élément est invalide onreset Un formulaire est réinitialisé onsearch L’utilisateur écrit quelque chose dans un champ de recherche (pour ) onselect L’utilisateur sélectionne du texte (par et ) onsubmit Un formulaire est soumis ondrag Un élément est glissé ondragend L’utilisateur a fini de faire glisser l’élément ondragender L’élément glissé entre dans une cible de dépôt ondragleave Un élément glissé quitte la cible de dépôt ondragover L’élément glissé est au-dessus de la cible de dépôt ondragstart L’utilisateur commence à glisser un élément ondrop L’élément glissé est déposé sur la cible de dépôt oncopy L’utilisateur copie le contenu d’un élément oncut L’utilisateur coupe le contenu d’un élément onpaste Un utilisateur colle le contenu dans un élément onabort Le chargement du média est interrompu oncanplay Le navigateur peut commencer à lire le média (par exemple un le fichier est suffisamment mis en mémoire tampon) oncanplaythrough Lorsque le navigateur peut lire le média sans s’arrêter ondurationchange La durée du média change onended Le média a atteint sa fin onerror Se produit lorsqu’une erreur se produit lors du chargement d’un fichier externe onloadeddata Les données du média sont chargées onloadedm etadata Méta Les métadonnées (telles que les dimensions et la durée) sont chargées onloadstart Le navigateur commence à rechercher le média spécifié en pause Le média est mis en pause soit par l’utilisateur soit automatiquement en cours de lecture Le média a été démarré ou n’est plus en pause en cours de lecture Le média est en cours de lecture après avoir été mis en pause ou arrêté pour la mise en mémoire tampon onprogress Le navigateur est en train de télécharger le média onratechange La vitesse de lecture du média change onseeked L’utilisateur a fini de se déplacer/sauter à une nouvelle position dans le média onseeking L’utilisateur commence à se déplacer/sauter onstalled Le navigateur essaie de charger le média mais il n’est pas disponible en suspension Le navigateur ne charge pas intentionnellement le média lors de la mise à jour La position de lecture a changé (par ex. en raison de l’avance rapide) onvolumechange Le volume du média a changé (y compris la sourdine) onwaiting Le média est en pause mais devrait reprendre (par exemple, la mise en mémoire tampon) animationend Une animation CSS est terminée animationiteration L’animation CSS est répétée animationstart L’animation CSS a commencé transitionend Lancé lorsqu’une transition CSS a terminé Erreurs onmessage Un message est reçu via la source de l’événement onoffline Le navigateur commence à fonctionner hors ligne en ligne Le navigateur commence à fonctionner en ligne onpopstate Lorsque l’historique de la fenêtre change onshow An l’élément est affiché sous forme de menu contextuel sur le stockage Une zone de stockage Web est mise à jour basculement L’utilisateur ouvre ou ferme le element onwheel La molette de la souris roule vers le haut ou vers le bas sur un élément ontouchcancel L’écran tactile est interrompu ontouchend Le doigt de l’utilisateur est retiré d’un écran tactile ontouchmove Un doigt est glissé sur l’écran ontouchstart Le doigt est placé sur l’écran tactile try Permet de définir un bloc de code à tester les erreurs catch Configurer un bloc de code à exécuter en cas d’erreur throw Créer des messages d’erreur personnalisés au lieu des erreurs JavaScript standard Enfin Vous permet d’exécuter du code, après try and catch, quel que soit le nom du résultat Définit ou renvoie le nom de l’erreur message Définit ou renvoie un message d’erreur dans la chaîne à partir de EvalError Une erreur s’est produite dans la fonction eval() RangeError Un nombre est « hors limites » ReferenceError Une référence illégale s’est produite SyntaxError Une erreur de syntaxe s’est produite TypeError Une erreur de type s’est produite URIError An une erreur encodeURI() s’est produite Fenêtre Propriétés close Vérifie si une fenêtre a été fermée ou non et renvoie true ou false defaultStatus Définit ou renvoie le texte par défaut dans la barre d’état d’un document de fenêtre Renvoie l’objet document pour les cadres de fenêtre Renvoie tout