Maison >interface Web >js tutoriel >Javascript complet - De base à avancé
Variables et types de données : var, let, const.
Types primitifs : chaîne, nombre, booléen, nul, non défini, symbole.
Nul vs Non défini (imp):
a. null : est explicitement affecté à une variable pour indiquer qu'elle est intentionnellement vide ou qu'elle n'a aucune valeur.
b. non défini : signifie qu'une variable a été déclarée mais qu'aucune valeur n'a été affectée, ou qu'une fonction ne renvoie rien.
Type : C'est son propre type, non défini.
Types de référence : objet, tableau, fonction.
Structures de contrôle : si, sinon, changez
Boucles : pour, pendant, pendant que, pour…de, pour…dans
Fonctions :
un. Déclarations de fonctions vs expressions
b. Fonctions fléchées
c. Expression de fonction immédiatement invoquée (IIFE)
d. Fonctions d'ordre supérieur (fonctions qui prennent d'autres fonctions comme arguments ou les renvoient)
e. Fonctions de rappel
Promesses : C'est un moyen de gérer les opérations asynchrones.
un. Promesse.all()
b. Promesse.resolve()
c. Promesse.then()
d. Promesse.any()
e. Promesse.race()
f. Promesse.reject()
g.Promise.allSettled()
Async/await : vous permet d'écrire du code asynchrone de manière plus synchrone.
Fonction de rappel : Un rappel est une fonction qui est passée en argument à une autre fonction et est exécutée après l'achèvement de cette fonction principale.
Fermetures : Une fermeture en JavaScript est une fonction qui a accès aux variables dans sa portée parent, même après le retour de la fonction parent.
Portée :
un. Portée mondiale ou locale
b. Portée de la fonction, portée du bloc (avec let et const)
Levage :
un. Levage variable
b. Fonction levage
Boucle d'événements et file d'attente de tâches (microtâches et macrotâches)
Contexte d'exécution : Un contexte d'exécution est l'environnement dans lequel le code est exécuté.
un. Contexte d'exécution global (GEC)
b. Contexte d'exécution de la fonction
Chaîne de portée et contextes d'exécution :
La chaîne Scope est un concept crucial qui détermine la manière dont les variables sont recherchées dans différents contextes lorsqu'une fonction ou un bloc de code est exécuté
Un contexte d'exécution est un concept abstrait qui représente l'environnement dans lequel le code JavaScript est évalué et exécuté. Chaque fois qu'une fonction est invoquée ou qu'un bloc de code est exécuté, un nouveau contexte d'exécution est créé.
Mémoisation : c'est une technique utilisée pour optimiser les fonctions en mettant en cache les résultats d'appels de fonctions coûteux et en réutilisant ces résultats lorsque les mêmes entrées se reproduisent. Cela permet d'éviter les calculs redondants, améliorant ainsi les performances dans les scénarios où une fonction est appelée à plusieurs reprises avec les mêmes arguments.
Debouncing : Limite la vitesse à laquelle une fonction est invoquée. Permet d'éviter plusieurs appels de fonction pour des événements qui se déclenchent fréquemment, tels que des frappes au clavier ou des événements de redimensionnement.
Limitation : garantit qu'une fonction est appelée au plus une fois dans une période de temps donnée, quelle que soit la fréquence de déclenchement de l'événement.
Currying : Pourquoi : Currying transforme une fonction qui prend plusieurs arguments en une série de fonctions qui prennent chacune un argument. Ceci est utile pour appliquer partiellement des arguments.
Où utiliser : Programmation fonctionnelle, réutilisation de fonctions avec des arguments fixes.
setTimeout(), setInterval() et clearTimeout() :
un. setTimeout() : Exécute une fonction après un délai spécifié (en millisecondes).
b. setInterval() : Exécute une fonction à plusieurs reprises à un intervalle spécifié (en millisecondes).
c. clearTimeout() : annule une opération setTimeout() précédemment planifiée.
Littéraux de modèle : les littéraux de modèle, également appelés chaînes de modèle, sont une fonctionnalité de JavaScript qui permet une interpolation de chaîne plus facile et des chaînes multilignes. Ils sont désignés par des guillemets (`) au lieu de guillemets simples ou doubles.
Stockage local et stockage de session :
localStorage : connu pour stocker des données de manière persistante au cours des sessions du navigateur, restant disponibles même après la fermeture du navigateur.
sessionStorage : connu pour stocker des données uniquement pendant la durée d'une seule session de navigateur, en les effaçant lorsque l'onglet ou le navigateur est fermé.
Expressions régulières (RegExp) : Une expression régulière (RegEx ou RegExp) est une séquence de caractères qui définit un modèle de recherche. RegEx est principalement utilisé pour la recherche et la manipulation de chaînes, vous permettant de rechercher, faire correspondre et remplacer des modèles dans le texte.
this Keyword : ce mot-clé fait référence au contexte dans lequel une fonction est exécutée. C'est un mot-clé spécial qui se comporte différemment selon la manière dont une fonction est appelée.
Dans le contexte d'exécution globale (en dehors de toute fonction), cela fait référence à l'objet global (fenêtre dans les navigateurs, global dans Node.js).
Dans une fonction régulière (pas en mode strict), ceci fait référence à l'objet global (fenêtre dans le navigateur).
Lorsqu'une fonction est appelée comme méthode d'un objet, cela fait référence à l'objet sur lequel la méthode est appelée.
POO en JavaScript :
Cours en JavaScript
Classes et objets en JavaScript
Comment créer une classe JavaScript dans ES6
ce mot clé JavaScript
Nouveau mot clé en JavaScript
Constructeur d'objet en JavaScript
Héritage en JavaScript
Encapsulation en JavaScript
Méthodes statiques en JavaScript
POO en JavaScript
Getter et Setter en JavaScript
Opérateurs :
un. Opérateurs arithmétiques : , -, *, /, %
b. Opérateurs de comparaison : ==, ===, !=, !==, >, <, >=, <=
c. Opérateurs logiques : &&, ||, !
d. Opérateurs d'affectation : =, =, -=, *=, /=
e. Opérateurs unaires : , --, typeof, delete
f. Opérateur Ternaire (imp) : condition ? expr1 : expr2
Pause et Continue
pause (sortie de la boucle)
continuer (passer à l'itération suivante)
Les paramètres sont les variables définies dans la déclaration de fonction (ou la signature de fonction) qui spécifient le type de valeurs que la fonction s'attend à recevoir lorsqu'elle est appelée.
Les arguments sont les valeurs réelles transmises à la fonction lorsqu'elle est appelée.
a. Déstructuration de tableaux
b. Déstructuration d'objets
L'opérateur Rest est utilisé pour collecter plusieurs éléments et les regrouper dans un seul tableau ou objet. Il est principalement utilisé dans les paramètres de fonction pour collecter des arguments, ou dans la déstructuration pour collecter les propriétés restantes.
L'opérateur Spread est utilisé pour décompresser les éléments d'un tableau ou d'un objet en éléments ou propriétés individuels. Il vous permet d'étendre ou de « répartir » un itérable (tableau ou objet) en éléments ou propriétés individuels.
31.Délégation d'événements : utilisation d'écouteurs d'événements sur les éléments parents pour gérer les événements des éléments enfants
Fonctions d'ordre supérieur : Une fonction d'ordre supérieur est une fonction qui prend une ou plusieurs fonctions comme arguments ou renvoie une fonction comme résultat.
Fonctions anonymes : Une fonction anonyme est une fonction qui n'a pas de nom. Ces fonctions sont généralement définies en ligne et peuvent être affectées à des variables, transmises comme arguments ou utilisées à d'autres endroits où une fonction est requise.
Caractéristiques clés :
Aucun nom : La fonction est définie sans nom.
Souvent utilisé en ligne : couramment utilisé comme fonctions de rappel ou transmis comme arguments à des fonctions d'ordre supérieur.
Peut être attribué à des variables : peut être attribué à des variables ou à des propriétés comme n'importe quelle autre valeur.
Comment fonctionne la portée lexicale :
Lorsque vous définissez une fonction, elle a accès aux variables qui se trouvent dans sa portée (c'est-à-dire les variables déclarées à l'intérieur de la fonction et les variables des fonctions externes, y compris la portée globale).
Si une fonction est imbriquée dans une autre, la fonction interne peut accéder aux variables de la fonction externe (c'est ce qu'on appelle les fermetures).
push(), pop(), shift(), unshift()
concat(), slice(), splice()
map(), filter(), réduire(), forEach()
trouver(), trouverIndex()
sort(), inverse()
join(), split()
indexOf(), include(), lastIndexOf()
Object.assign(), Object.create(), Object.keys(), Object.values(), Object.entries(), Object.hasOwn(), Object.freeze(), Object.seal()
Chaîne prototype :
Héritage à l'aide de prototypes
Syntaxe de classe, constructeurs, méthodes
Héritage à l'aide d'extensions
constructeur super() et super()
call(), apply() et bind() : pour contrôler le contexte de ceci
Evènement bouillonnant et captation :
Le bouillonnement d'événement se produit lorsqu'un événement est déclenché sur un élément, et l'événement « bouillonne » ensuite de l'élément cible vers ses éléments ancêtres dans l'arborescence DOM. Dans la plupart des cas, les événements bouillonnent par défaut, sauf si vous l'empêchez spécifiquement
La capture d'événements est l'opposé du bouillonnement d'événements. L'événement est d'abord capturé par l'élément racine, puis se répercute sur l'élément cible.
Générateurs et itérateurs :
Pourquoi : Les générateurs permettent une évaluation paresseuse, ce qui signifie qu'ils génèrent des valeurs à la demande plutôt que d'un seul coup. Utile pour les grands ensembles de données ou les séquences infinies.
Où utiliser : implémentation d'itérateurs personnalisés, évaluation paresseuse des séquences.
WeakMap et WeakSet :
Pourquoi : Aide à la gestion de la mémoire en JavaScript. WeakMap et WeakSet permettent le garbage collection de clés ou de valeurs lorsqu'il n'y a plus de références à celles-ci.
Où l'utiliser : gérer les références aux objets sans empêcher le garbage collection. Par exemple, mettre en cache les nœuds DOM là où vous ne souhaitez pas créer de fuites de mémoire.
Polyfill :
Pourquoi : ajoute la prise en charge de fonctionnalités qui ne sont pas disponibles de manière native dans les anciens navigateurs en fournissant un code qui imite les fonctionnalités modernes.
Où l'utiliser : garantir la compatibilité avec les anciens navigateurs (par exemple, les anciennes versions d'Internet Explorer) pour les nouvelles fonctionnalités JavaScript telles que Promise, fetch, etc.
Héritage prototypique :
Pourquoi : JavaScript utilise des prototypes pour l'héritage, plutôt que l'héritage classique orienté objet. Comprendre le fonctionnement de la chaîne de prototypes est essentiel pour comprendre le modèle d'héritage de JavaScript.
Où utiliser : création de hiérarchies d'objets, ajout de méthodes aux constructeurs.
Cookies : Stockage et récupération des cookies en JavaScript
Méthodes de tableau avancées
Array.prototype.find() : Recherche du premier élément d'un tableau qui correspond à une condition
Array.prototype.filter() : Filtrage des éléments en fonction d'une condition
Array.prototype.reduce() : Réduire un tableau en une seule valeur
Array.prototype.map() : Création d'un nouveau tableau en appliquant une fonction à chaque élément
Array.prototype.sort() : Tri des tableaux avec des fonctions de tri personnalisées
Modèle de module : encapsuler le code dans des modules
Modèle Singleton : s'assurer qu'une classe n'a qu'une seule instance
Modèle d'observateur : notifier plusieurs objets lorsque l'état d'un objet change.
Modèle d'usine : fournit un moyen d'instancier des objets tout en gardant la logique de création séparée du reste de l'application.
Modèle de stratégie : vous permet de définir une stratégie (algorithme) pour une opération particulière et de la modifier au moment de l'exécution.
Motif décorateur : ajout dynamique d'un comportement à un objet sans affecter sa structure.
Lazy Loading : retarder le chargement du contenu jusqu'à ce qu'il soit nécessaire.
Travailler avec JSON :
Bases de JSON
Syntaxe JSON, analyse avec JSON.parse(), stringification avec JSON.stringify()
Travailler avec des API
Récupérer des données à partir d'une API à l'aide de fetch()
Gestion des réponses API avec Promises ou Async/Await
Sélection DOM
document.getElementById(), document.querySelector(), document.querySelectorAll()
Gestion des événements
Écouteurs d'événements : addEventListener(), removeEventListener()
event.target, event.preventDefault(), event.stopPropagation()
Modification des éléments DOM
Modification du texte, du HTML, des attributs, des styles
Ajout/suppression d'éléments dynamiquement (createElement(), appendChild(), removeChild())
Traversée DOM
parentNode, childNodes, nextSibling, previousSibling
try...catch...finally : Gestion des erreurs dans le code synchrone
Erreurs personnalisées : création de classes d'erreurs personnalisées
Erreurs de lancement : mot-clé throw pour lancer des erreurs manuellement
Méthodes de chaîne :
charAt(), charCodeAt(), concat(), include(), indexOf(), lastIndexOf(), slice(), split(), toLowerCase(), toUpperCase(), trim(), replace(), search( ), match(), Repeat(), StartWith(), EndsWith(), padStart(), padEnd(), localeCompare(), fromCharCode().
Méthodes de date :
Date.now(), Date.parse(), Date.UTC(), getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), setDate(), setFullYear(), setHours(), setMilliseconds(), setMinutes(), setMonth(), setSeconds(), setTime(), toDateString(), toISOString(), toLocaleDateString(), toLocaleTimeString(), toString().
Générateur : Un générateur en JavaScript est un type spécial de fonction qui vous permet de suspendre et de reprendre son exécution.
fonction*, rendement, suivant(), retour(), lancer().
Proxy JavaScript : Un proxy en JavaScript est un objet spécial qui vous permet d'intercepter et de personnaliser des opérations sur des objets, telles que l'accès aux propriétés, l'affectation, les appels de fonction, etc. Il agit comme un wrapper pour un autre objet et peut redéfinir des opérations fondamentales (comme get, set, deleteProperty, etc.) sur cet objet.
Pièges couramment utilisés (méthodes) :
get(target, prop, Receiver) : intercepte l'accès à la propriété.
set(target, prop, value, Receiver) : intercepte l'affectation de propriété.
has(target, prop) : intercepte l'opérateur in.
deleteProperty(target, prop) : intercepte la suppression de propriété.
apply(target, thisArg, argumentsList) : intercepte les appels de fonction.
construct(target, args) : intercepte le nouvel opérateur.
DefineProperty(target, prop, descriptor) : intercepte la définition de la propriété.
Un clone superficiel d'un objet ou d'un tableau crée une nouvelle instance, mais il copie uniquement les propriétés ou les éléments de niveau supérieur. Si l'objet ou le tableau d'origine contient des références à d'autres objets (objets ou tableaux imbriqués), ces objets internes ne sont pas copiés. Au lieu de cela, le clone superficiel fera référence aux mêmes objets.
Un clone profond crée une copie complètement indépendante de l'objet ou du tableau d'origine. Il copie de manière récursive toutes les propriétés ou éléments, y compris les objets ou tableaux imbriqués. Cela signifie que le clonage profond garantit qu'aucune référence à des objets imbriqués n'est partagée entre l'original et le clone.
L'égalité lâche compare deux valeurs d'égalité après avoir effectué une coercition de type. Cela signifie que les valeurs sont converties en un type commun (si elles sont de types différents) avant de faire la comparaison.
Lors de l'utilisation de ==, JavaScript tente de convertir les opérandes vers le même type avant de les comparer.
L'égalité stricte compare deux valeurs sans effectuer de conversion de type. Il vérifie à la fois la valeur et le type des opérandes.
Pour ===, les opérandes doivent être du même type et de la même valeur pour être considérés comme égaux.
Appel par valeur : Lorsqu'un argument est passé à une fonction par valeur, une copie de la valeur réelle est transmise. Toute modification apportée à l'argument à l'intérieur de la fonction n'affecte pas la variable d'origine en dehors de la fonction.
Quand cela se produit : cela se produit lorsque des types primitifs (comme des nombres, des chaînes, des booléens, des valeurs nulles, non définies et des symboles) sont transmis à une fonction.
Appel par référence : Lorsqu'un argument est passé par référence, la référence (ou l'adresse mémoire) de l'objet réel est passée à la fonction. Cela signifie que toute modification apportée à l'argument à l'intérieur de la fonction modifiera directement l'objet d'origine en dehors de la fonction.
Quand cela se produit : cela se produit lorsque des types non primitifs (comme des objets, des tableaux et des fonctions) sont transmis à une fonction.
Caractéristiques clés d'un ensemble :
Éléments uniques : un ensemble garantit automatiquement que chaque valeur qu'il contient est unique. Si vous essayez d'ajouter une valeur en double, elle sera ignorée.
Ordonné : les éléments d'un ensemble sont ordonnés, ce qui signifie que les valeurs sont stockées dans l'ordre dans lequel elles ont été ajoutées. Cependant, les ensembles n'autorisent pas les entrées en double.
Itérable : les ensembles sont itérables, vous pouvez donc parcourir les éléments d'un ensemble en utilisant for...of ou des méthodes comme .forEach().
Aucun index : contrairement aux tableaux, les éléments Set ne sont pas accessibles par un index. Ils sont stockés par ordre d'insertion, mais vous ne pouvez pas les référencer par un numéro.
Méthodes de base d'un ensemble :
add(value) : ajoute une valeur à l'ensemble. Si la valeur existe déjà, elle ne fait rien (pas de doublons).
has(value) : vérifie si l’ensemble contient la valeur spécifiée. Renvoie vrai ou faux.
delete(value) : supprime la valeur spécifiée de l'ensemble.
clear() : supprime tous les éléments de l'ensemble.
size : renvoie le nombre d'éléments dans l'ensemble.
forEach(callback) : exécute une fonction fournie une fois pour chaque valeur de l'ensemble.
Méthodes de base d'une carte :
set(key, value) : ajoute ou met à jour un élément avec la clé et la valeur spécifiées dans la carte.
get(key) : Récupère la valeur associée à la clé spécifiée.
has(key) : Vérifie si une carte contient une clé.
delete(key) : supprime l'élément associé à la clé spécifiée.
clear() : supprime tous les éléments de la carte.
size : renvoie le nombre de paires clé-valeur dans la carte.
forEach(callback) : exécute une fonction fournie une fois pour chaque paire clé-valeur dans la carte.
keys() : renvoie un objet itérateur contenant toutes les clés de la carte.
valeurs() : renvoie un objet itérateur contenant toutes les valeurs de la carte.
Entry() : renvoie un objet itérateur contenant un tableau de paires [clé, valeur].
L'API Fetch : L'API Fetch nous permet de faire des requêtes asynchrones aux serveurs web depuis le navigateur. Il renvoie une promesse chaque fois qu'une demande est faite, qui est ensuite utilisée pour récupérer la réponse de la demande.
Import/Export :
Modules : En JavaScript, un module est un fichier qui contient du code que vous souhaitez réutiliser. Au lieu de tout avoir dans un seul fichier, vous pouvez diviser votre code en fichiers distincts, puis importer ce dont vous avez besoin. Cela permet de garder le code propre, organisé et maintenable.
Importations : c'est ainsi que vous intégrez des fonctionnalités d'autres modules dans votre fichier actuel.
Exportations : c'est ainsi que vous rendez les variables, fonctions, classes ou objets d'un module disponibles pour une utilisation dans d'autres modules.
Fonctions pures, effets secondaires, mutation d'état et propagation d'événements :
Récursivité :
La récursivité est un concept de programmation fondamental dans lequel une fonction s'appelle elle-même afin de résoudre un problème. La récursivité est souvent utilisée lorsqu'un problème peut être décomposé en sous-problèmes plus petits et similaires. En JavaScript, la récursivité est utile pour des tâches telles que parcourir des arbres, résoudre des énigmes, etc.
Concepts clés :
Cas de base : la condition qui arrête la récursion. Sans cas de base, la récursivité peut conduire à des appels de fonction infinis, provoquant une erreur de débordement de pile.
Cas récursif : la partie de la récursion où la fonction s'appelle avec une version plus petite ou plus simple du problème.
Les méthodes d'application, d'appel et de liaison :
méthodes de fenêtre :
alert(), confirm(), prompt(), setTimeout(), setInterval(), clearTimeout(), clearInterval(), open(), close(), requestAnimationFrame().
Événements de souris :
clic, double-clic, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, menu contextuel.
Événements de clavier :
touche enfoncée, touche enfoncée, touche enfoncée.
Événements de formulaire :
soumettre, modifier, mettre au point, flouter, saisir, réinitialiser, sélectionner, appuyer sur une touche, appuyer sur une touche, appuyer sur une touche.
Débogage :
Partage de ressources inter-origines (CORS) :
Web Workers : un mécanisme permettant d'exécuter des scripts dans les threads d'arrière-plan, permettant à JavaScript d'effectuer des tâches coûteuses en termes de calcul sans bloquer le thread principal.
Service Workers : un script qui s'exécute en arrière-plan de votre navigateur, activant des fonctionnalités telles que les notifications push, la synchronisation en arrière-plan et la mise en cache pour les fonctionnalités hors ligne.
Chargement paresseux ou défilement infini) :
Le chargement paresseux et le défilement infini sont deux techniques couramment utilisées pour améliorer les performances et l'expérience utilisateur dans les applications Web, en particulier lorsqu'il s'agit de grandes quantités de données ou de médias (comme des images, des listes ou des articles).
Lazy Loading est un modèle de conception dans le développement Web dans lequel les ressources (telles que des images, des scripts, des vidéos ou même du contenu) sont chargées uniquement lorsqu'elles sont nécessaires.
L'objectif principal du chargement paresseux est d'améliorer le temps de chargement initial d'une page Web en réduisant le nombre de ressources chargées initialement.
Le défilement infini est une technique qui charge automatiquement plus de contenu à mesure que l'utilisateur fait défiler la page, généralement sans avoir besoin de pagination. Ceci est largement utilisé sur les plateformes de médias sociaux, les sites d'information et toute application Web qui doit afficher de grands ensembles de données (par exemple, Instagram, Twitter, Facebook).
76 : Applications Web progressives (PWA) : création d'applications Web qui fonctionnent hors ligne, fournissent des notifications push et offrent des performances de type natif (via des techniciens de service et d'autres API de navigateur).
78.Mode strict : le mode strict est une fonctionnalité de JavaScript qui garantit que vous évitez les erreurs et les fonctionnalités problématiques.
Scripts intersites (XSS)
Contrefaçon de demande intersite (CSRF)
Politique de sécurité du contenu (CSP)
CORS (Partage de ressources inter-origines)
JWT (jetons Web JSON)
Le TDZ se produit pour les variables déclarées à l'aide de let et const mais pas pour var car les déclarations var sont hissées et initialisées avec undefined.
C'est ça les gars.
Apprendre JavaScript, ou tout autre langage de programmation, peut sembler écrasant au début. Si vous ne comprenez pas un sujet du premier coup, ce n’est pas grave ! Personne ne devient expert du jour au lendemain. La clé est la cohérence, la pratique et la persévérance.
N'oubliez pas que chaque développeur part des bases. Prenez votre temps pour bien comprendre chaque sujet, surtout si vous êtes débutant. Ne précipitez pas le processus et ne vous laissez pas décourager par le nombre de concepts à maîtriser. Continuez à vous entraîner et progressivement, les choses commenceront à cliquer.
Restez patient, restez curieux, et surtout, continuez à coder !
Merci d'avoir pris le temps de lire mon blog ! J'espère que vous l'avez trouvé utile et instructif. Si j'ai manqué des sujets ou des concepts importants, je m'en excuse sincèrement. N'hésitez pas à laisser un commentaire ou à nous contacter si vous avez des questions ou des suggestions. Vos commentaires sont toujours appréciés !
Et n’oubliez pas d’applaudir si vous avez trouvé cela utile ! ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!