JSCHEATSheet
Source supplémentaire: https://developer.mozilla.org/id/docs/web/javascript/a_re-introduction_to_javascript
Type de données
Variable
Déclaration: enregistrer les variables dans la portée appropriée.
Initialisation: fournir de la mémoire pour les variables.
Affectation: déterminer les valeurs spécifiques en variables.
Exigences variables:
- sans espaces.
- Camelcase.
- ne pas commencer par des chiffres.
- N'utilisez pas de mots clés et de mot réservé.
- Portée variable: local et global.
Var, let & const
Refactorisation: un processus de modification du code pour être meilleur sans changer ses fonctionnalités.
Alasan:
- Readability
- DRY, dont repeat yourself
- Testability
- Performance
- Maintainability
Flux de contrôle
Répétition (boucle)
tandis que un. while (condition) {action}; né La valeur initiale de While (condition de terminaison) {Action; Incrémente / décrément; }
pour (valeur initiale; conditions de terminaison; incrément / décrément) {Action; }
Pour (String, Array, Arguments, TypedArray, Map, Set, Userrables définis par l'utilisateur) const name = 'RAMA'; pour (const n de nom) {console.log (n); }
for in (énumérable / propriété de l'objet) const mhs = {name: 'rama', Âge: 29, e-mail: '[email protected]',}; pour (m dans MHS) {Console.log (MHS [M]); }
faire
Sélection (sélection)
- si else if (condition) {Action 1; } else {Action 2; }
- else if if (condition 1) {Action 1; } else if (condition 2) {Action 2; } else if (condition n) {action n; } else {Action par défaut; }
- Switch Switch (Expression) {Case "Value 1": Action 1; [Break;] Case "Valeur 2": Action 2; [pause;] cas "valeur n": action n; [pause;] Par défaut: action par défaut [Break;]}
Fonction
Portée
- Étendue globale / fenêtre Soit a = 1; console.log (a);
- Fonction Scope Fonction Test () {Soit b = 2; } test (); Console.log (b);
- Block Scope Fonction Test () {Soit C = 3; console.log (c); } test ();
Recursion: une fonction qui se fait appeler.
Mise en œuvre:
- Remplacement de la boucle
- Série Fibonacci
- Recherche et recherche de listes de données Liste et exemples d'arborescence: Fonction factorielle (n) {if (n === 0) Retour 1; Retour n * factoriel (n -1); }
Structure de données
Contexte
- Phase de création dans la portée globale var name = function de nom non défini = fn (), qui est sa fonction elle-même.
- Fenêtre de levage = objet global this = fenêtre
- La fonction de phase d'exécution fait du contexte d'exécution locale
Fermetures
- est une combinaison de fonction et de portée lexicale dans la fonction.
- Une fonction où il a accès à la portée des parents, même si la portée des parents est terminée. Exemple: la fonction nameFunction (param1) {return namalocalFunction (param2) {function body}} Déclaration nameVariable = namafunction (argument1); NameVariable (argument2);
Fonction de flèche
- Une autre forme plus concise que l'expression de la fonction. Exemple: Declaration Identifier = (ParameterList Opt) => {Function Body} Exemple: Selt Number of Numbers = (Param1, Param2) => {Function Body}; // Retour implicite
- Cette fonction de flèche de la fonction de flèche ne peut pas être appliquée à cela. Exemple: Déclaration nameBject = function (param1) {this.prperty1 = string; this.property2 = () => {Function Body}; } Déclaration nameVariable = new NameBject ();
Fonction d'ordre supérieur
Fonction qui fonctionne dans d'autres fonctions (en valeur d'argument / retour). JavaScript traite la fonction comme un objet. Pourquoi: l'abstraction, ce qui doit simplifier un programme car plus le programme A est élevé, plus la complexité est élevée, plus le programmeur est confus.
- Array.pototype.map ()
- Array.pototype.filter ()
- Array.pototype.reduce ()
Modèle littéral
est une chaîne littérale qui permet l'expression. Peut utiliser: ''; ""; Et ;
Avec backtick ( ) peut faire:
- Singleline String:
string text - Multiline String:
string text 1 string text 2 string text 3 - Expression intégrée:
string text ${expression} string text - Fragments HTML
- Interpolation d'expression
- Modèles tagués:
- Échappements / désinfecter les balises HTML
- Traduction et internationalisation (I18N)
- Composants stylisés
Affectations destructuration
Expression sur JS, ce qui nous rend capables de démanteler la valeur de Dr. Array / Property Dr. Object dans une variable distincte.
- Array const try = ['one', 'deux', 'trois']; const [a, b, c] = essai;
- Objet const mhs = {name: 'Ramadyan', âge: 25, e-mail: '[email protected]',}; const {nom, âge, e-mail} = MHS;
- Fonction
- Sur la valeur de retour
- Sur les arguments
Opérateur de propagation
Les opérateurs qui cassent les itters en éléments uniques.
Paramètre de repos
Représente l'argument dans la fonction avec un Jumalh illimité dans un tableau.
Synchrone vs asynchrone
- Tâche d'exécution d'environnement multi-thread vs
- Blocage des techniques de ngodage non bloquantes (entrée-sortie)
- Synchrones vs asynchrone ngoding Engineering (demande HTTP liée)
- Tâche de tâche d'exécution de l'environnement parallèle concurrent (Infra, matériel et virtualisation liées)
Rappel
La fonction envoyée comme paramètre dans une autre fonction.
Exemple: fonction nameFunction (namacallback) {Déclaration de nom Valis = valeur; Rappel (noms); } NameFunction ((nameVar) => {console.log (exécution);});
Promesse
Objet qui représente le succès / l'échec d'un événement asynchrone à l'avenir. Promesse (accompli / rejetée / en attente). Utilisation de callback => Action (Resolve => alors / rejeter => catch / en attente => Enfin).
Exemple: Déclaration de nom var1 = valeur; const namevar2 = new promest ((résoudre, rejeter) => {if (namevar1) {résolve (value);} else {reject (value);}}); namesVar2 .That ((réponse) => console.log (exécution)) .Catch ((réponse) => console.log (exécution));
Ajax et récupérer
Fetch est une méthode d'API JS pour prendre des ressources du réseau et renvoyer la promesse complète (Fullfilée) lorsqu'il y a une réponse disponible. NOTATION: Fetch (ressources, init);
- Ressources: objet URL / Demande (représentation des demandes source).
- INIT: Configuration supplémentaire dans une demande d'objet (exemple: obtenir, post, méthode, en-tête, cache, etc.)
- Réponse: Les résultats du Dr Fetch sous forme de promesse (propriété et méthode).
Async et attendre
- Une fonction qui fonctionne asynchrone (via la boucle d'événement),
- qui produit une promesse (implicite) en tant que valeur de retour,
- Mais la façon d'écrire le code en utilisant l'écriture synchrone (standard).
Une fonction asynchrone peut contenir un mot-clé d'attente pour arrêter temporairement l'exécution de sa fonction en attendant que la promesse se termine (résoudre).
DOM (Document Object Model): La représentation de l'élément HTML dans le document devient un objet. Stocké dans Dom Tree.
Avantages DOM:
En tant qu'interface de programmation basée sur un objet qui représente des documents Web.
Dom rend tous les composants des pages Web accessibles et manipulés.
Composants: éléments HTML, attributs, texte, etc.
Arbre Dom
- NodeList: une collection qui contient n'importe quel nœud.
- HTMLCollection: une collection qui contient des éléments HTML et est en direct.
Hiérarchie:
- Node racine (document): le nœud qui est la source de tous les autres nœuds du DOM.
- Node parent: le nœud qui est d'un niveau au-dessus d'un autre nœud. Ex: le corps est le parent Dr. H1, P, Div & A.
- Nœud enfant: le nœud qui est d'un niveau en dessous d'un autre nœud. Ex: H1 est l'enfant Dr Body.
Type de nœud Type / Node:
- Élément
- attribut
- texte
- Section CDATA
- Référence à l'entité
- Entité
- Instruction de traitement
- Commentaire
- Document
- Type de document
- fragment de documents
- Notation
Sélection DOM
- Comme utiliser des éléments dans HTML:
- GetElementById () = produit des éléments.
- getElementsByTagName () = produit htmlCollection.
- getElementsByClassName () = produit htmlCollection.
- Comme porter un sélecteur sur CSS:
- Queysector () = produit des éléments.
- Queysectorall () = produit des nodelistes.
Manipulation de Dom
- Manipulation des éléments
- element.innerhtml = Modifiez le contenu de l'élément sélectionné.
- élément.style. = Modification du style de l'élément sélectionné.
- element.getAttribute () = Connaissez le contenu de l'attribut.
- element.setTTTribute () = Ajouter des attributs.
- element.reMoveAttribute () = Delete Attributs.
- element.classlist:
- Add () = ajout de classe.
- Supprimer () = supprimer la classe.
- Toggle () = ajout de classe Si ce n'est pas là, supprimez-le s'il y en a.
- Item () = Vérification de la classe avec index.
- Contient () = vérifier la classe en question.
- Remplacer () = modification de la classe.
- Manipulation de nœud
- document.CreateElement ()
- document.CreateTextNode ()
- node.ppendchild ()
- node.insertbefore ()
- parentNode.RemoveChild ()
- parentNode.ReplaceChild ()
Événement DOM
- Handler d'événements = ne peut exécuter que la dernière commande.
- Attribut HTML en ligne
- Méthode d'élément sur
- AddventListener () = peut être exécuté plusieurs fois.
Dom Traversé
- ParentNode = Node de résultat.
- Parentement = le résultat de l'élément.
- NEXTSIBLING = NODE RÉSULTAT.
- NextElementSibling = le résultat de l'élément.
- Adcefibling = Résultats du nœud.
- PREMERSELlementSibling = le résultat de l'élément.
Prévenir par défaut
- Pour éviter l'action par défaut, utilisez la méthode: event.PreventDefault ();
Événement bouillonnant
- Lorsque l'événement sera exécuté, il exécutera l'événement dans Parent avant d'aller à l'enfant. Utilisation d'événements.stoppropagate ();
