Fonctions Javascript : fonctions maîtres, fonctions de flèches avec projets

1. Introduction du cours: Salut, voilà. Bienvenue sur les partitions des fonctions JavaScript en construisant de vrais projets. m'appelle Wessel et je suis ravi de vous guider ce voyage passionnant dans le monde des fonctions JavaScript Les fonctions sont l'épine dorsale de JavaScript ou de tout langage de programmation que vous apprenez. Il permet un code efficace et modulaire que les développeurs peuvent écrire. Dans ce cours, nous aborderons ce concept de fonctions, depuis les bases de la définition et de l' appel de fonctions jusqu'à la compréhension des paramètres et des arguments. Nous aborderons également les notions de base telles que l'appel fonctions, ainsi que les sujets avancés tels que les expressions, les fonctions de flèche et même les méthodes au sein d'objets et de tableaux. Maintenant, voici ce que nous allons aborder. Nous parlerons des fonctions en JavaScript. Nous parlerons également des paramètres et des arguments. Quels sont les paramètres et quoi ces deux termes se différencient l'un de l'autre. Comment pouvez-vous renvoyer des valeurs à partir d'une fonction ? Ici, nous allons parler de la façon dont la fonction traite les données et renvoie les valeurs. Nous parlerons des expressions de fonction et des fonctions de flèche. C'est l'un des sujets cruciaux sur lesquels les apprenants rencontrent souvent des difficultés. Nous parlerons également des fonctions à l'intérieur des objets et des méthodes matricielles. Tout dépend donc du cours, et ce cours comporte également projets pratiques dans lesquels nous appliquerons tout ce que nous avons appris dans ce cours en particulier pour créer quelque chose de significatif. En fin de compte, vous aurez une solide compréhension de ce que sont les fonctions, et ces connaissances vous permettront de créer des programmes Jaw Script interactifs et étonnants. Ce cours convient aux développeurs de tous niveaux. Que vous soyez un débutant, apprenant intermédiaire ou une personne avancée qui souhaite parfaire ses compétences en Jascript, ce cours peut vous apporter des connaissances incroyables et des pratiques que vous n'avez jamais entendues auparavant Cela dit, êtes-vous prêt à maîtriser l'art des fonctions Ja Script et à transformer votre façon d'écrire ? Allons plus loin et commençons ensemble. Je te verrai de l'autre côté. 2. Débloquer des fonctions Javascript : les principes fondamentaux: Salut, alors maintenant il est temps de commencer à parler des fonctions en JavaScript. Maintenant, qu'est-ce qu'une fonction tout d'abord ? Maintenant, une fonction est essentiellement un bloc de code. Ce sont donc plusieurs lignes de code qui sont regroupées, et elles sont conçues pour effectuer une tâche spécifique. L'avantage de la fonction est qu'elle peut être réutilisée plusieurs fois dans le programme Maintenant, laissez-moi vous montrer comment vous écririez des fonctions et pourquoi écririez-vous, ainsi. D'accord ? Supposons donc que nous ayons une tâche très simple qui consiste à saluer un utilisateur. D'accord ? Je vais donc dire bonjour et disons que je salue un utilisateur. Le nom d'utilisateur est Alice Awa. D'accord ? C'est ce que je fais. Disons maintenant que je souhaite faire cette salutation trois fois. D'accord ? Donc, bien sûr, je vais copier P trois fois. Donc je le salue trois fois, non ? Saluer l'utilisateur à trois reprises. Supposons maintenant que je souhaite modifier un message ici dans le message d'accueil, n'est-ce pas ? Et cela devrait se refléter dans tous les messages. Supposons donc que le changement je souhaite faire soit d'ajouter une autre exclamation D'accord ? Maintenant, je dois m' assurer de le mettre à jour partout où j' utilise cette grille Et si je sauvegarde ceci, je verrai le résultat ici. C'est bon. Mais maintenant, ce n'est pas grave, si le groupe de déclarations aime ici, il ne reste plus qu' à saluer, n'est-ce pas ? Il ne s'agit que d' une seule déclaration, et tout changement ici est gérable car la base de code n'est pas si énorme Maintenant, ce que je voudrais faire, c'est me tourner vers la commodité, n'est-ce pas ? Et nous pouvons faciliter cela à l'aide de la fonction. Maintenant, laissez-moi vous montrer comment les fonctions peuvent vous faciliter la vie. Donc, tout d'abord, je dois créer une fonction ici pour que nous puissions l'utiliser. Je peux donc utiliser ce mot-clé de fonction. Tu peux voir. Et vous avez deux options, l' instruction de fonction et la fonction ici. Si vous sélectionnez la fonction, elle introduira la fonction pour vous, le mot clé. Mais je voudrais avoir l'énoncé de la fonction. Vous pouvez donc voir que cela est apparu. Maintenant, un espace réservé pour les paramètres de nom est automatiquement ajouté, et il a ajouté ces accolades, n' est-ce pas ? Je vais donc mettre à jour le nom ici pour saluer, d'accord ? Et à la place des paramètres, je vais simplement le supprimer pour le moment et je le ferai dans le corps Alors cette attelle bouclée, d'accord ? Avec ces bretelles bouclées, vous pouvez avoir un corps fonctionnel, non ? J'utilise ce terme « corps fonctionnel ». Maintenant, qu'est-ce que Function Body ? corps de la fonction est le bloc de code qui peut être exécuté lorsque cette fonction est appelée, d'accord ? Supposons que je déplace ce code ici. OK. Et maintenant, je n'ai plus besoin d' appeler le message d'accueil de cette façon ou de saluer l'utilisateur de cette façon. OK. Au lieu de cela, je peux appeler cette fonction, n'est-ce pas ? Alors maintenant j'ai cette fonction d'accueil, d'accord ? Le nom de la fonction est greet. Donc, chaque fonction que vous créez doit avoir un nom, d'accord ? Et vous lui attribuez un nom parce que vous devrez appeler cette fonction plus tard, n'est-ce pas ? Alors maintenant, si je veux appeler cette fonction, je vais dire bonjour, et les crochets s' ouvriront et se fermeront. Maintenant, si je sauvegarde ceci, vous verrez que Hello Alice est en cours d' impression ici, d'accord ? Si je souhaite saluer l'utilisateur trois fois, comme je l'avais initialement demandé, je peux le faire appeler trois fois, et vous le verrez apparaître Maintenant, si je veux modifier le message, disons que si je veux me débarrasser de cette exclamation supplémentaire qui a été ajoutée, je dois effectuer cette modification à un seul endroit, n'est-ce pas ? Et cela se reflète partout, et cela se reflète partout, essentiellement, partout où cette fonction est appelée, ou parce qu'il s'agit d' un seul bloc de code qui est réutilisé et appelé plusieurs fois Ici, dans cette approche, vous dupliquez le code Vous dupliquez le journal des points de la console trois fois pour effectuer cette tâche trois fois, n' est-ce pas ? Mais ici, vous ne dupliquez pas le code. Le journal à points de la console est écrit une seule fois. Mais si vous souhaitez effectuer cette tâche trois fois, vous appelez la fonction deux fois, car cette instruction de journalisation par points de console se trouve désormais dans une fonction. D'accord ? Revenons donc à la définition. Une fonction est un bloc de code. Vous pouvez voir qu'il s'agit d'un bloc de code. Vous pouvez maintenant avoir plusieurs déclarations ici. Supposons que je souhaite également saluer l'utilisateur et lui dire que vous êtes maintenant connecté. OK, quelque chose comme ça. J'affiche ce genre de messages. D'accord ? Tu peux voir Hello Alice, tu es maintenant connecté. Bonjour Alice, vous êtes maintenant connectée. Bonjour Alice, tu es maintenant enfermée. Il arrive trois fois par message. D'accord ? Il s'agit donc d'un bloc de code. Désormais, entre accolades, vous pouvez avoir plusieurs lignes d'instructions, plusieurs lignes de code JavaScript, qui font partie de cette fonction et sont invoquées ou appelées chaque fois que cette fonction est Et la partie suivante indique qu'il est conçu pour effectuer une tâche spécifique. Vous regroupez essentiellement plusieurs instructions et vous les nommez en tant que fonction conçue pour effectuer une tâche particulière. Par exemple, ici, il est conçu pour saluer l'utilisateur, n'est-ce pas ? Et vous utilisez ce mot-clé de fonction ici. C'est quelque chose à ne pas manquer si vous créez des fonctions de cette façon, d'accord ? Et il peut être réutilisé plusieurs fois. Vous êtes donc en train d'appeler ce bloc de code trois fois ici, n'est-ce pas ? Pas une, deux fois. Et vous pouvez l'appeler un certain nombre de fois, par exemple le nombre de fois que vous voulez l'appeler ou selon les exigences. Hein ? C'est donc une fonction pour vous en JavaScript. Maintenant, si vous venez d'un autre langage de programmation comme Python ou Java, vous devez être conscient de ce concept de fonction ou de méthode, n'est-ce pas ? Cela fonctionne donc de la même manière en JavaScript, mais la syntaxe est un peu différente. D'accord ? J'espère donc que cela vous a été utile. 3. Flux de données dynamiques : Maîtriser les paramètres et les arguments: heure actuelle, j'ai une fonction nommée GET, qui est utilisée pour saluer les utilisateurs. Et ici, dans ce bloc de code, j'ai toute l'opération d'accueil des utilisateurs. Et le fonctionnement est qu'il existe quelques instructions d'impression, telles que les instructions du journal de la console qui impriment deux messages, deux messages distincts sur la console. J'appelle cette fonction trois fois. Par conséquent, vous voyez six messages imprimés sur la console, n'est-ce pas ? Maintenant, ici, le message que vous voyez est plutôt statique. Et si plus tard ou à l'avenir, je souhaitais personnaliser le message pour chaque utilisateur, et si je voulais appeler chaque utilisateur par son nom ? Parce que cette fonction n'est actuellement utilisée que pour saluer Alice et aucun autre utilisateur. Dans ce cas, JavaScript vous permet de transmettre des paramètres de fonction comme n' importe quel autre langage de programmation. Disons que je souhaite que le nom soit aussi dynamique, d'accord ? Je peux donc accepter le nom ici. C'est bon. Je ne précise pas le type de données, veuillez prendre note ici. Et puis ici, au lieu d'Alice, ce que je fais, c'est que j'ai 1 dollar, oups, donc je vais devoir ajouter 1 dollar et je dirais Alice Désolé, pas Alice, je vais avoir un nom. Et puis ce sera un modèle latéral, comme celui-ci. C'est bon. Et puis si je l'enregistre, je vais recevoir une erreur disant « indéfini », car ce nom n'est pas encore initialisé, Nous allons donc le faire sous peu. Mais le point que je veux mentionner ici c'est que ce que vous êtes en train de transmettre ici, nom est un paramètre de fonction. D'accord ? Maintenant, pour appeler la fonction de la bonne manière avec des paramètres, vous devez transmettre quelque chose appelé arguments, n'est-ce pas ? Donc, ici, nous devons maintenant transmettre les arguments de la fonction car le nom passe comme indéfini. Vous pouvez voir « non défini Il imprime trois fois, et les trois fois, c'est indéfini, non Je vais donc transmettre le nom ici, afin que je puisse dire Alice une fois, puis John, et ensuite Lucy, non ? Et si je sauvegarde ceci, vous verrez Hello Alice, Hello John et Hello Lucy, n'est-ce pas ? Donc ce truc ici n'est qu'une dispute, d'accord ? Ce sont des arguments de fonction que je transmets aux paramètres de la fonction. Alors pourquoi faisons-nous passer les arguments ? Parce que la fonction accepte des paramètres. Et ici, vous pouvez voir que le nom est le nom du paramètre que nous souhaitons initialiser ici, d'accord ? Ensuite, cela est utilisé dans la fonction de la manière dont la fonction souhaite l'utiliser. Je veux donc que vous vous souveniez tous de la différence entre un paramètre et un argument. Ils ne sont pas tous les deux pareils, non ? La plupart des programmeurs sont donc confus et je ne sais pas quelle est la différence entre un paramètre et un argument Ils pensent qu'ils sont pareils, non ? Donc, ce truc ici est un paramètre. Si vous passez la souris dessus, le nom du paramètre sera indiqué. Et ce truc ici est un argument parce que c'est une valeur que vous transmettez et en utilisant cette valeur, le paramètre est réellement initialisé Il s'agit donc d'un argument. C'est bon. Donc, cet argument de fonction est utilisé, et ce sont les paramètres de la fonction qui sont déclarés. D'accord ? Maintenant, c'est une fonction avec un seul paramètre. Il y aura des scénarios dans lesquels vous souhaiterez transmettre plusieurs valeurs, plusieurs arguments dans une fonction, n'est-ce pas ? Dans ce cas, vous pouvez bien sûr avoir plusieurs paramètres. Ici, je peux ajouter H ici, et je peux ajouter un autre journal de console ici. D'accord. Vous venez de ou, je dirais, nous imprimerons le Ho. OK, quelque chose comme ça, et je vais me débarrasser des virgules inversées ici et ajouter des coches Bac . C'est bon. Maintenant je peux les sauver. D'accord. Une fois que vous l'avez enregistré, vous verrez que undefined est imprimé Maintenant, cette fonction accepte deux paramètres, mais nous n' en transmettons qu'un seul, n'est-ce pas ? Nous devons donc également transmettre le deuxième paramètre. Je peux donc dire 22 ici. Cela peut être 21 ans, et vous pouvez passer à n'importe quel âge ici. Ça pourrait être 29, quelque chose comme ça. Sauvegardez ceci, vous verrez, Bonjour Alice, vous avez 22 ans Vous êtes maintenant enfermé . Bonjour, John, tu as 21 ans. Vous êtes maintenant enfermé. Bonjour Lucy, tu as 29 ans et tu es maintenant Alors, qu'est-ce que cela nous indique que la fonction peut avoir plusieurs paramètres lui permettant de définir une fonction ? D'accord ? Vous pouvez donc définir une fonction avec plusieurs paramètres, et si vous avez une fonction avec plusieurs paramètres, vous devez également transmettre plusieurs arguments afin qu'elle puisse vraiment bien l' initialiser C'est bon. Maintenant, il y a une chose que je voudrais noter, je veux que vous preniez tous note de cette partie du paramètre, le premier paramètre ici, nom est une chaîne, et ceci est un nombre. D'accord ? Maintenant, en fin de compte, ce que je peux faire, c'est ajouter un type ici, type de et je peux simplement dire l'âge ici. D'accord. Et je peux faire de même pour le nom. C'est bon. Passons donc au nom, tapez-le, et je vais enregistrer le nom. Et une fois que je l'ai enregistré, vous verrez, Hello Alice string, vous avez 22 ans. D'accord ? Donc, un paramètre de fonction ici est un nombre et l' autre est une chaîne. D'accord. Maintenant, et si je le change en chaîne ? Laisse-moi enregistrer ça. Oups. Alors laisse-moi enregistrer ça. Maintenant, tu vas voir pour Lousy. Bonjour, Lucy. Lucy est donc une ficelle, et une femme de 29 ans est également une ficelle ici D'accord. Mais pour le reste, le premier paramètre est une chaîne, et le second est un nombre ici. D'accord ? Donc, ce que je fais, c'est que je reçois le type de chaque changement pour chaque appel de fonction ici. accord, vous pouvez voir ici, et c'est possible parce que Ja Script est dactylographié dynamiquement Il n'est donc pas nécessaire de déclarer ou de définir un type de données lorsque vous créez des variables. Et ces paramètres sont essentiellement des variables, n'est-ce pas ? Il s'agit de variables qui n'existent que dans le bloc fonctionnel. Donc c'est un bloc fonctionnel ici, d'accord ? Ces bretelles bouclées dans lesquelles vous voyez deux bretelles CRY, c'est ce qu'est un bloc fonctionnel, et ce nom et cet âge n'existent que Donc, si tu essaies d'utiliser ton nom ici, d'accord ? Désolé, pas ça. Je peux donc dire console point log et laissez-moi dire nom ici. Si j'essaie de le faire, je ne verrai aucune sortie. Même pour H, je ne verrai aucune sortie. Tu peux voir, d'accord ? Le nom et l'âge n' existent donc que dans le bloc de fonctions et non en dehors de celui-ci, n'est-ce pas ? Et ces deux variables sont des paramètres pour cette fonction, d'accord ? Et vous pouvez modifier dynamiquement le type des paramètres c'est ce que vous pouvez voir ici, n'est-ce pas ? Donc oui, c'est dactylographié de manière complètement dynamique. Maintenant, une autre chose que je voudrais souligner ici est l'ordre. Parmi les paramètres et les arguments, cela compte. D'accord ? Donc, par exemple, si je change d'âge ici et si je change de nom ici. D'accord ? Donc j'ai d'abord atteint l'âge. Si je sauvegarde ça, tu verras, bonjour numéro 22, tu as Alice ans, ce qui est absolument faux, non ? Parce que nous échangeons, nous échangeons l'ordre ici, non ? Donc, si je fais le contrôle ici, vous pouvez voir que tout va bien maintenant. D'accord ? Et aussi, cela doit être inscrit dans l'ordre. OK, il est donc initialisé dans l'ordre. Ce premier paramètre sera donc initialisé avec Ale, 22 sera initialisé avec chacun L'ordre est donc très important. D'accord ? Donc, si vous avez dix paramètres, vous pouvez avoir un nombre, vous pouvez avoir plusieurs paramètres. Ici, je donne juste un exemple de un ou deux, mais vous pouvez avoir trois, quatre, cinq ou dix paramètres. C'est tout à fait normal, non ? Mais si vous avez autant de paramètres, assurez-vous de transmettre les valeurs dans l'ordre et de ne pas perturber l'ordre car le résultat que vous obtiendrez sera totalement gâché J'espère donc que tout va bien pour le moment. C'est bon. Alors maintenant, je veux parler des paramètres par défaut, et pour cela, je vais simplement dupliquer cette fonction. Je vais juste copier-coller, d'accord ? Et vous pouvez voir, je vais juste renommer cette fonction, d'accord ? Je vais dire « saluez la personne ici », et je n'aurai qu'un seul paramètre des fins de démonstration. D'accord, je vais me débarrasser de toutes les autres déclarations ici Nous allons garder les choses simples. D'accord ? C'est donc ma fonction, qui est la fonction d'accueil. Désolé, saluez la personne, ça s' appelle, c'est vrai, ce n'est pas une bonne fonction. Une autre chose que vous pouvez remarquer ici est un seul programme de script Jaw peut avoir plusieurs fonctions définies à des fins différentes, bien sûr, n'est-ce pas ? Je suis donc en train de créer un autre type de message d'accueil, n'est-ce pas ? Maintenant, permettez-moi d'appeler ça ici. D'accord ? Si je l'enregistre, vous ne verrez aucune erreur. D'accord ? Maintenant, permettez-moi d'appeler cette personne d'accueil, et j'ai appelé cette fonction. D'accord ? Maintenant, au moment où vous appelez cette fonction sans aucun argument, vous voyez que vous voyez que hello undefined Pourquoi voyez-vous «   Hello Undefined » ? Comme ce nom n' est pas encore défini, il n'a aucune valeur car vous n'avez pas transmis l' argument, d'accord ? Il existe maintenant des scénarios dans lesquels vous souhaiterez définir des valeurs ou des paramètres par défaut , car le collier ou personne qui appelle la fonction risque ne pas toujours transmettre les valeurs. Dans ce cas, vous souhaiterez peut-être avoir un ensemble de valeurs par défaut avec lequel le paramètre est initialisé Maintenant, une solution est d'avoir une valeur par défaut ici, d'accord ? Mais ce n'est pas une bonne chose. C'est bon. Je peux avoir une valeur par défaut, comme guest over here. D'accord. Et je peux enregistrer ce bonjour invité. Mais ce n'est pas une bonne façon de faire les choses. Si je transmets réellement une valeur, cette valeur sera remplacée Et si je ne veux pas que cela soit annulé, je dois ajouter des vérifications inutiles ici. D'accord ? Mais le script Ja fournit un moyen simple de le faire. C'est bon. Ce que vous pouvez faire, c'est que lorsque vous déclarez le paramètre ici, vous pouvez réellement initialiser le paramètre avec une valeur par défaut, comme ceci OK, quelque chose comme ça. Si vous l'enregistrez, vous verrez Hello Guest s' imprimer ici. C'est bon. Maintenant, si vous ne transmettez aucun paramètre, vous voyez cette sortie. Si vous transmettez un paramètre quelconque. Donc, si je dis bonjour Ron, accord, si je sauvegarde ceci, vous verrez Hello Ron être imprimé. D'accord ? Donc, si vous transmettez un quelconque type de paramètre, vous verrez que ce paramètre est, désolé, si vous transmettez un quelconque type d'argument, pas un paramètre, si vous transmettez un quelconque type d'argument, vous verrez cet argument être utilisé. Mais si vous ne transmettez aucun argument, la valeur par défaut sera utilisée, condition que vous ayez défini une valeur par défaut ici, d'accord ? Voici donc un exemple de fonction avec paramètre par défaut. De la valeur, non ? C'est donc en cela que cela est très utile aux gens. Il y aura des scénarios. Par exemple, c'est une personne d'accueil, non ? Donc, si vous n'avez pas le nom de l'utilisateur ici, d'accord ? Le nom de l'invité peut être initialisé ici, n'est-ce pas ? Et puis ce qui peut arriver, c'est que l'invité est utilisé. Si le nom n'est pas disponible, invité si vous ne souhaitez pas utiliser invité, vous devez transmettre le nom, nom réel de l'utilisateur. D'accord ? Quoi qu'il en soit, l'utilisateur verra un résultat décent. Il ne verra pas Hello indéfini. C'est vrai. Ce sera donc une sortie décente, non ? Maintenant, il s'agit d'une fonction avec une valeur de paramètre par défaut. C'est bon. Je veux parler de fonction avec paramètre de repos. D'accord ? Fonctionne donc avec le paramètre de repos. C'est bon. Maintenant, que signifie une fonction avec le paramètre rest ? C'est bon. Disons donc que j'ai une fonction appelée calculer la somme. Très bien, disons. Et ici, à la place du paramètre, j'ai deux paramètres A P, c'est vrai. Et ce que fait cette fonction, c'est qu'elle indiquera console point log. Il va juste faire A plus B ici. C'est bon. Maintenant, je souhaite appeler cette fonction, n'est-ce pas ? Donc, ce que je vais faire, c'est calculer la somme. Je passerai en 1020. C'est assez simple. Il en imprimera donc 30 comme sortie comme prévu, n'est-ce pas ? Maintenant, le scénario ou l'énoncé du problème est que cela fonctionnera bien ou que cela fonctionnera si vous savez combien d'arguments vous allez faire passer, n'est-ce pas ? Maintenant, si vous n'êtes pas sûr du nombre d' arguments que vous allez transmettre à la fonction, dans ce cas, vous pouvez utiliser un nombre variable d'arguments, n'est-ce pas ? Vous devez donc changer la syntaxe ici pour cela, et vous devez ajouter trois points comme celui-ci, et vous pouvez dire des chiffres, n'est-ce pas ? Maintenant, cela indique que les nombres sont le nom du paramètre. D'accord. Mais c'est un nombre variable, non ? Le nombre n'est pas fixe. C'est bon. Maintenant, la question est de savoir comment allez-vous l'utiliser dans la fonction si le nombre n'est pas fixe ? C'est bon. Pour cela, il va falloir utiliser quatre boucles. OK, donc je vais dire que la somme est égale à zéro. Et je dirais quatre. Donc, si vous venez d' un autre langage de programmation, accord, comme Java, C plus plus, ou tout autre langage de programmation, il est probable que vous sachiez ce que sont les boucles, n'est-ce pas ? Si tu n'es pas au courant, alors c'est tout à fait normal. Reste juste avec moi. Nous aborderons tout au fur et à mesure. C'est bon. Mais pour l'instant, j' ajoute ces quatre boucles, et je dirais somme plus égale à, et je vais dire ici. D'accord. Et puis à la fin, je peux me connecter à la console ici. D'accord. Et je peux en dire un peu, d'accord. Quelque chose comme ça, non ? Maintenant, je suis passé en 1020, ce qui me donne 30 en conséquence OK, je peux passer en 1020 puis en 30. Je vais en donner 60 en conséquence. Je peux le copier à nouveau, et je peux en transmettre dix, 20, 30, et je peux en transmettre 80. Vous pouvez voir que cela donne 140 points, n'est-ce pas ? Cela va donc continuer, n'est-ce pas, car le nombre de paramètres acceptés par cette fonction est variable à cause de cette syntaxe, n'est-ce pas ? Vous pouvez donc transmettre autant d'arguments que vous le souhaitez. Selon vos besoins, non ? C'est donc quelque chose dont vous devez être conscient. C'est ce que l'on appelle le paramètre de repos. Vous pouvez voir ici qu'il s' agit d'un paramètre de repos. C'est bon. Donc oui, c'est fait. De plus, un exemple que je souhaite vous montrer est celui d'un booléen, Vous pouvez donc même transmettre des paramètres booléens, et comment pouvez-vous utiliser des paramètres booléens Maintenant, disons, si je veux vérifier si un membre est éligible à une réduction ou non, n'est-ce pas ? Et un utilisateur peut bénéficier d'une réduction s'il est membre. D'accord ? Je peux donc dire «   fonctionne ici », vérifiez l'éligibilité » ici. D'accord. Le paramètre est, disons, euh, je peux dire que je peux dire qu' il est membre ici. D'accord. Je vais rester simple, et je dirais console point log ici. Et dans ce cadre, je vais faire vérifier un opérateur ternaire. D'accord ? Donc je dirais qu'il est membre. S'il s'agit d'un membre, dans ce cas, éligible, sinon, imprimez-le. Qu'est-ce qui sera imprimé ? Non éligible. Quelque chose comme ça. D'accord. Et oui. OK, j'ai donc fait une erreur de syntaxe. Ce serait quelque chose comme ça, et ici, ce serait Colin. D'accord. Donc oui, c'est fait. D'accord. Donc, ce que vous êtes en train de faire est là, laissez-moi prendre ces deux nouvelles lignes pour que ce soit beaucoup plus lisible, vous pouvez voir ce que j'ai fait. Je suis en train de vérifier l'éligibilité réduction à l'aide de cette variable booléenne Donc, s'il est membre, il est éligible, sinon il ne l'est pas. D'accord. Et très simplement, vous pouvez appeler ça. C'est un chèque d'éligibilité, vous pouvez le dire, c'est vrai. D'accord. Vous pouvez donc voir qu'il est éligible, et si vous le remplacez par faux, il n'est pas éligible. C'est bon. est donc ce que vous considérez comme le résultat. C'est bon. Maintenant, il s'agissait de fonctions basées sur des variables. C'est bon. Vous pouvez même avoir des fonctions avec un objet. D'accord ? Fonctionne donc avec des objets en paramètre. C'est bon. Dans ce cas, je vais créer une fonction ici. Supposons que nous souhaitions imprimer l'adresse. OK, donc l'adresse peut être compliquée, non ? Et dans ce cas, disons que nous le sommes, disons que nous souhaitons avoir la rue ici, j'aurai la ville et j'aurai le SEP. OK, je vais avoir ces choses. D'accord. Et je dirais console point log ici. Et avec les backticks, je vais dire adresse. D'accord. Ensuite, j' imprimerai l'adresse. Désolé, ce sera rue, puis ce sera rue après rue. Il y a la ville et le code postal. OK, donc je vais dire ville. Et puis ce sera ZIP. C'est bon. J'ai donc cette fonction, d'accord, qui a trois paramètres ou qui a un seul objet avec ces trois propriétés ici. D'accord. Maintenant, comment ferais-tu refroidir ça ici ? D'accord. Donc, pour le collecter, je peux simplement appeler l'adresse d'impression, d'accord ? Et j'aurais pu laisser l'adresse ici. Et je peux dire rue comme rue 1, d'accord, quelque chose comme ça. Vous pouvez avoir n'importe quelle adresse fictive. Je peux en avoir une en ville. OK, j'ajoute toutes les adresses factices. Vous pouvez dire ZIP et vous pouvez dire quelque chose comme ça par ici. D'accord. Donc oui, c'est ce qu'il y a ici. Et je vais terminer, j' ai un point-virgule, puis je vais passer l'adresse a. Maintenant, si vous voyez le résultat, vous pouvez voir l'adresse Street 1, la ville 1, et vous pouvez voir ceci imprimé ici J' obtiens donc la sortie sur plusieurs lignes parce que j'ai ajouté la séparation des lignes. Donc je vais juste revenir en arrière et je vais tout déplacer sur une seule ligne, et vous pouvez voir le résultat maintenant, non ? Voici donc comment vous pouvez faire passer les objets. C'est bon. Vous pouvez même avoir une adresse imprimée ici. Il s'agit également d'une autre syntaxe, et vous pouvez créer l'objet directement ici. Vous pouvez donc dire street Colin ABC. D'accord. De cette façon, vous pouvez également passer. C'est vrai. Vous pouvez voir que Street est en train d'être dépassée maintenant et que les deux autres ne sont pas définies, n'est-ce Il est donc important que la clé soit correcte pour toutes les paires clé-valeur. C'est bon. Donc ici, vous pouvez dire ville deux, deux, sauver. Vous pouvez voir le résultat, oui. D'accord. Vous pouvez donc transmettre ou créer un objet dynamiquement comme celui-ci également ici. C'est bon. Et aussi, une autre chose que je souhaite souligner ici concerne les tableaux, d'accord ? Les fonctions peuvent donc également être utilisées avec des tableaux en tant que paramètres. C'est bon. Maintenant, dans ce cas, ce que nous allons faire, c'est avoir une fonction. Je vais dire imprimer les numéros et j'aurai des chiffres comme paramètre ici, et je peux dire journal des points de la console, et je peux dire chiffres, quelque chose comme ça. C'est bon. Et je peux appeler cela une fonction. Alors laisse-moi appeler ça. Je vais dire « imprimer les numéros » et laisser moi m'occuper de ça. Je peux dire un, deux, trois, quatre, cinq, six. accord ? Si je l'enregistre, vous verrez le tableau être transmis à la fonction. Il s'agit donc également d'un exemple de fonction avec tableau. C'est bon. C'est donc tout ce que j'avais pour parler des différents paramètres. Je veux dire, les paramètres de la fonction et les arguments de la fonction. C'est bon. J'espère que ce concept est clair. La distinction entre paramètres et arguments est également clarifiée, et j'espère que vous savez comment créer des fonctions qui acceptent différents arguments, et vous pouvez les utiliser en JavaScript. accord ? J'espère donc que cela a été utile. 4. Sorties de fonctions dévoilées : Explication des valeurs de retour: Disons maintenant que j'ai une fonction qui peut m'aider à obtenir un carré de valeur, d'accord ? Maintenant, SQUA, c'est bon. Et pour cela, j'accepte un numéro ici. C'est bon. Et qu'est-ce qu'un carré ? Un carré est un nombre multiplié par lui-même. Je vais donc dire « laisser le résultat », et je vais dire « numéroter en nombre ». OK. Maintenant c'est fait. Je peux faire un journal de console ici. OK, journal des points de la console, je peux dire le résultat. C'est bon. Maintenant, je vais appeler cette fonction. Je vais dire « get square », et j'appellerai quatre. Maintenant, qu'est-ce qu'un carré de quatre ? Il en est 16. Vous verrez donc 16 en sortie. C'est bon. Maintenant, ce qui se passe ici, c'est que nous passons cet argument quatre à ce paramètre à cette fonction, et ce paramètre est initialisé avec quatre, puis le calcul a lieu où le résultat est initialisé avec quatre sur quatre, soit 16, puis vous obtenez 16 comme résultat, Maintenant, ce 16 ou le résultat n'est pas accessible en dehors de cette fonction, n'est-ce pas ? Maintenant, il y aura des scénarios dans lesquels vous voudrez peut-être effectuer un certain type de traitement, d'accord, certains types d'opérations, lesquels vous traitez des données, des informations, puis vous voudrez obtenir cette valeur traitée. Ici, nous ne récupérons pas la valeur traitée d'où nous avons appelé, n'est-ce pas ? Nous demandons donc ici à la fonction d' obtenir le carré de quatre. Mais que faire si je veux utiliser Square ici ? Je ne peux pas. Je ne peux pas accéder au résultat ici. OK ? Donc, si je déplace simplement cette déclaration d'ici à ici, cela ne fonctionnera pas, n'est-ce pas ? Vous pouvez voir que le résultat n' est pas défini. Et la raison en est que le résultat est créé dans ce bloc de fonctions, il existe donc là-bas lui-même, n'est-ce pas ? Vous ne pouvez pas y accéder en dehors du bloc fonctionnel. Alors, comment puis-je obtenir les données du processus ? Depuis la fonction. Maintenant, c'est ici que vous pouvez renvoyer les valeurs, n'est-ce pas ? Donc, ici, au lieu de l' imprimer ici, je peux simplement dire « retour ». Je peux utiliser ce mot clé de retour ici. Vous pouvez voir ce retour, et je peux dire que c'est un résultat. OK ? Maintenant, ce qui se passera à la suite de cela, le résultat serait renvoyé. OK ? Et où est-il renvoyé, quel que soit l'endroit où vous appelez la fonction ? Ainsi, où que vous soyez, quelle que soit la position où vous appelez la fonction, ce résultat est renvoyé. Mais le fait est que vous ne le voyez pas ici, n'est-ce pas ? Donc, pour obtenir le résultat, vous devez l'attraper, et comment l'obtenez-vous ? Tu peux dire carré numb ici. Vous pouvez créer une variable et vous pouvez l'attraper de cette façon, ou vous pouvez imprimer cette variable. Vous verrez donc maintenant 16 en sortie. Donc, ce que nous faisons essentiellement ici c'est que nous créons une fonction g carré pour traiter ou obtenir le carré d'un nombre et cela peut être n'importe quel nombre, et nous obtenons le résultat ici, et nous l'enregistrons ici. Hein ? Maintenant, cette façon de faire les choses s'appelle renvoyer la valeur d'une fonction. Et ici, nous obtenons cette valeur et nous procédons à un traitement supplémentaire, n'est-ce pas ? Donc oui, c'est ainsi que vous pouvez retourner et utiliser les valeurs d' une fonction particulière. Maintenant, le truc ici est nous ne renvoyons qu' une seule valeur. Bien entendu, vous pouvez également avoir des fonctions qui renvoient plusieurs valeurs. Comment ferais-tu ça ? Je peux donc avoir une fonction OK, ici et je peux dire « obtenir des informations sur l'utilisateur ». OK ? Et je peux dire nom, virgule H. OK. Je peux dire retour. Je peux dire le nom d'utilisateur, le nom de Colden ici OK. Et je peux dire utilisateur H et je peux dire g ici. OK. Donc c'est fait, et c'est bon. C'est donc fait, et au lieu d'ajouter ceci, je vais m'en débarrasser et le faire initialiser de cette façon OK. Je fais donc un test de nom, et je vais avoir H comme test. OK. Maintenant, comment puis-je obtenir cette valeur à l'endroit où je l'appelle ? OK ? Donc, ce que je peux faire, c'est voir le journal des points de la console. OK. Je peux tout de suite dire que je peux dire G. Désolé, je ne comprends pas Oh, oui, ça commence par G en fait, informations utilisateur de G, et je peux juste l'appeler ainsi. Et vous verrez les informations utilisateur être imprimées ici, n'est-ce pas ? Au lieu de l'imprimer sur la console, vous pouvez également le déballer, n'est-ce Ici, deux propriétés entrent, username et user H. Vous pouvez donc décompresser et les affecter à des variables distinctes Comment faites-vous cela ? Vous pouvez donc dire « non » ici. Vous pouvez dire « utilisez un nom ». Et vous pouvez dire «   utilisateur g » ici. OK ? Est-ce que c'est bon, vous créez ici et vous appelez pour obtenir des informations sur l'utilisateur. C'est bon. Et maintenant, si vous vous connectez par points sur la console ici, nom d'utilisateur, virgule, utilisateur H. Vous pouvez voir que le nom est ceci et H est ceci. OK ? Maintenant, ce que nous faisons, c'est lorsque nous obtenons la valeur. Ainsi, lorsque la valeur est renvoyée par get user info, elle est renvoyée sous forme d'objet. Donc c'est en fait un objet ici, paires clé-valeur, n'est-ce pas ? Voici comment vous pouvez renvoyer plusieurs valeurs à partir d'une fonction. Et nous obtenons un objet en tant que type de retour. Donc, ce que nous faisons, c'est soit nous pouvons imprimer sur la console, accord, nous ne voulons pas l'imprimer. Nous voulons le gérer de manière personnalisée. Vous pouvez donc décompresser ces valeurs et les affecter à des variables distinctes en utilisant la syntaxe OK ? Vous avez donc la liste des variables ici et assurez-vous qu'elles correspondent au nom ici, car si je dis nom d'utilisateur un, et si je l'enregistre, vous verrez que nom d'utilisateur n'est pas correct, ici. J'adorerai le premier nom d'utilisateur, et je vais le sauvegarder. Vous verrez que le nom d'utilisateur 1 n'est pas défini maintenant. Pourquoi ? Parce que le nom de la propriété est username, et vous êtes en train de la déballer dans une variable avec un nom différent OK ? Donc le nom est en cours de correspondance, vous pouvez le voir, n'est-ce pas ? Cela devrait donc fonctionner. Et cette syntaxe dans laquelle nous créons des variables de cette façon à partir d' un objet est connue sous le nom de déstructuration OK ? Et vous lirez souvent ce terme de déstructuration d'objets Nous sommes en train de déstructurer les objets. Qu'est-ce que la déstructuration ? En termes simples, nous sommes en train de déballer les objets, d'accord ? L'objet utilise cette syntaxe, non ? Il possède un attribut username et un utilisateur H. Vous êtes le déballer et de créer une variable appelée username, vous lui attribuez cette valeur, n'est-ce pas Cette valeur, oui. Ensuite, vous créez l'utilisateur He et vous lui attribuez cette valeur C'est assez simple. Nous sommes en train de le déballer, et c'est ce qu'est la déstructuration d'objets Et ici, avec le recul, pas avec le recul, en fait, il est assez clair que cette synta ou ce concept en particulier sont utilisés ici pour déstructurer les objets C'est bon. C' est ainsi que vous pouvez faire en sorte que la fonction renvoie plusieurs valeurs, sous forme d'objets, bien sûr. OK ? Maintenant, voici comment vous pouvez renvoyer un objet, n'est-ce pas ? Et je vous ai également montré comment vous pouvez utiliser un objet de l'endroit où vous l'appelez. Maintenant, une autre façon de faire les choses ou renvoyer plusieurs valeurs est que vous pouvez avoir une fonction, renvoyer un tableau, n'est-ce pas ? Vous pouvez donc également le faire. Maintenant, comment ferais-tu ça ? Alors laisse-moi te le montrer. Vous pouvez donc voir la fonction et vous pouvez dire obtenir la dimension ici. OK. Je n' accepterai aucun paramètre. Supposons donc que nous créons une fonction pour obtenir la dimension. Je vais dire retour, et nous pouvons immédiatement avoir un tableau ici. Je peux dire 200, 300, 500. OK. Et je peux simplement appeler Console point log get dimension ici. OK. Et vous pouvez voir le résultat ici. OK, donc c'est également faisable, d'accord ? Maintenant, vous pouvez même déstructurer le tableau ici en variables individuelles OK ? Comment le ferais-tu ? OK ? Nous savons d' ailleurs déjà comment fonctionne la déstructuration Donc je vais dire que je retourne ici 200300500, non ? Je peux donc dire largeur OK. Je peux dire hauteur, je peux dire profondeur ici. OK. Je vais m'en débarrasser et je vais le récupérer. Je dirais que c'est égal pour obtenir des dimensions. OK. Et je peux dire Console, point, connectez-vous ici. Je vais dire largeur, hauteur et profondeur, quelque chose comme ça. OK. Oups. Ce n'est donc pas défini Je vais voir où se situe le problème. La syntaxe est donc un peu différente ici. Au lieu de bretelles bouclées, il y aura des crochets ronds OK ? Oh désolé, pas rond, entre crochets. J'en suis désolée. OK. Donc, si vous enregistrez ceci, vous pouvez voir 200300500 Cela a fonctionné, non ? Il s'agit donc d'une augmentation de salaire ici. OK ? Il y a une chose dont je veux que vous parliez, c'est ici dans cette fonction. OK ? Laissez-moi le copier ici. OK. Je vais commenter ceci. Je ne supprime pas ce code pour que vous puissiez voir les modifications que nous apportons. Voilà le code, d'accord ? Ici, ce que je fais, c'est que je crée en fait une variable. Nous n'avons pas besoin de créer cette variable ici. Je peux simplement le couper et renvoyer le calcul, quelque chose comme ça. C'est également très bien. Il y a une autre façon de faire les choses. Vous pouvez en voir 16. C'est ce qu'on appelle la forme abrégée, non ? Donc oui, c'est ainsi que vous pouvez retourner la fonction. Désolée. C'est ainsi que vous pouvez renvoyer des valeurs et différents types de valeurs à partir de la fonction. Maintenant, vous pouvez également avoir Function sans retour ici. OK ? Je peux donc avoir une fonction appelée say hello. C'est quelque chose que vous connaissez déjà ou que vous devez déjà savoir, et vous pouvez dire : je veux vous montrer comment les choses fonctionnent si vous essayez d'accepter la valeur d' une fonction qui ne renvoie rien. OK ? Je dois donc dire bonjour. Cela ne renvoie rien. OK ? Je peux te dire bonjour ici. OK. Vous verrez Hello imprimé. OK ? Maintenant, si je dis point console, connectez-vous ici et si je dis « OK ». Et si j'essaie d'accepter le message comme retour de cette fonction particulière. Cette fonction ne renvoie rien, mais je crée quand même un message et essaie d'accepter tout ce qu'elle renvoie, vous serez indéfini Ça ne rapporte rien, n'est-ce pas ? Donc, bien sûr, vous allez devenir indéfini, n'est-ce pas ? Donc oui, c'est à peu près ça, d'accord. Vous pouvez aussi en avoir , alors je veux vous montrer un autre cas ici. Alors voilà, je retourne numéro en numéro, d'accord ? Maintenant, permettez-moi d'ajouter de l'attention après cela, d'accord ? Je vais dire bonjour. Voyons ce qui va se passer. Si je l'enregistre, vous verrez que cette instruction n' est jamais exécutée. Vous verrez également qu' il est rétrogradé. Tu peux voir ça ? Il ne s'agit pas d'une sortie de niveau, mais d'une sortie de niveau Si vous passez la souris dessus, vous verrez un code inaccessible détecté Que signifie un code inaccessible ? OK ? Donc, ce qui se passe, c'est qu'en fait, si vous avez une sorte d'instruction après l'instruction return, je répète que si vous avez une sorte d' instruction après l'instruction return, alors cette instruction ne sera jamais exécutée, n'est-ce pas ? Comment sera-t-il exécuté ? Parce que vous revenez en fait d'ici. Tu as dit retour. Le retour signifie que vous arrivez à l'endroit d'où vous êtes appelée la fonction, n'est-ce pas ? Vous arrivez à l'endroit d' où vous appelez la fonction. Cela ne sera donc jamais exécuté. C'est donc, bien sûr, un code inaccessible, n'est-ce pas ? Cela ne sera jamais exécuté, n'est-ce pas ? Maintenant, permettez-moi de rendre les choses un peu intéressantes, non ? Vous pouvez donc avoir une fonction. Avec plusieurs valeurs de retour ou instructions de retour. Pas des valeurs. Je devrais dire des instructions de retour, car nous avons déjà vu comment renvoyer plusieurs valeurs sous forme d'objets et de tableaux, n'est-ce pas ? Disons donc que j'ai une fonction dans laquelle je souhaite vérifier chacun des utilisateurs. Je vérifie l'âge et j' accepte l'âge ici. OK. Maintenant, je peux dire l'âge si l'âge est supérieur à 18 ans, d'accord ? Ensuite, j'utilise l'opérateur ternaire. Je dis OK, revenez adulte. Quelque chose comme ça. Donc c'est un adulte de retour si l'âge est réellement supérieur à 18 ans, d'accord ? Et oups, cela ne nous permet pas de revenir ici, opérateur ternaire. Je vais devoir utiliser mon traitement ici. OK, donc je dirais que j'ai plus de 18 ans , alors dans ce cas, d'accord ? Je vais vouloir rentrer adulte, non ? Je reviens adulte. OK ? Sinon, ce que je vais retourner est mineur. Disons. OK. Donc oui, c'est fait, et je vais avoir des points-virgules OK. Donc, ce qui se passe c'est d'observer cela attentivement, les gars, d'accord ? J'ai une fonction où j'ai deux instructions de retour, return adult, return minor, d'accord ? C'est donc absolument valide, d'accord, car ces deux instructions de retour ne sont pas exécutées en même temps. L'une ou l'autre sera exécutée en fonction de la condition, n'est-ce pas ? Donc, si la condition est vraie, elle sera exécutée. Si la condition est fausse, sera exécutée, n'est-ce pas ? Voici comment fonctionne l'instruction if. Nous vérifions donc d'abord cette condition, puis nous l'exécutons, n'est-ce pas ? Vous pouvez donc avoir plusieurs relevés de retour. C'est tout à fait normal ici. C'est bon. Et si j'essaie de le lancer ici, je peux dire « console point log » ici. OK, et je peux dire « Vérifiez », âge », laissez-moi passer 14 ans ici. OK, je vais le copier et le sauvegarder. Vous verrez la sortie mineure. Si je recommence à 24 ans, tu verras un adulte. C'est bon. Nous utilisons donc ici les instructions return with if, ce qui est absolument valide. Il n'y a aucun problème en tant que tel, d'accord ? J'espère donc que cela a du sens maintenant quant à façon dont la fonction peut renvoyer des valeurs dans des scénarios multiples et différents. C'est bon. J'espère donc que cela vous sera utile. 5. Conception de code : exploration des expressions de fonctions en JavaScript: Il est donc temps de parler des expressions de fonction. Disons que j'ai une fonction très simple, qui est utilisée pour dire bonjour, n'est-ce pas ? Et je peux l'appeler comme ça. Rien de magique ici. Nous verrons le résultat en guise de bonjour. OK ? Maintenant, une autre chose que je veux souligner ici est qu'en haut, si vous ajoutez un appel de fonction comme celui-ci, vous verrez le résultat avant même que la fonction ne soit déclarée. Ainsi, même avant la déclaration de la fonction, si vous essayez d'ajouter say hello ou d'appeler la fonction que vous allez déclarer, elle fonctionnera toujours. Vous n'aurez aucune erreur. D'accord ? Passons maintenant au sujet des expressions de fonction, que sont les expressions de fonction ? Vous pouvez donc créer une variable, comme celle-ci. Vous pouvez dire « Let Create » ici. Et vous pouvez lui attribuer une fonction, non ? C'est donc quelque chose que vous pouvez faire. C'est bon. Donc, ce que je vais faire, c'est supprimer ça. Je ne créerai pas de nouvelle fonction. Au lieu de cela, je vais couper ça et je vais ajouter ce truc ici, d'accord ? Et oui, c'est tout à fait valable ici. OK ? C'est quelque chose que vous pouvez faire en JavaScript. OK ? Tu peux appeler Greet quelque chose comme ça, et tu peux voir, OK, C hello. OK. Il faut donc que ça disparaisse d'ici. Le nom C hello doit disparaître, non ? Et une fois que S hello passe, vous devez aimer le commentaire. OK. Et vous pouvez voir que vous pouvez maintenant appeler cette fonction particulière en utilisant Greet. OK ? Donc, ce que nous faisons ici, c'est que nous avons en fait une sorte de variable qui pointe maintenant vers cette définition de fonction. Et lorsque vous faites référence à cette variable, vous pouvez appeler la fonction en utilisant cette variable elle-même. OK ? Il s'agit donc d'un exemple d'expression de fonction. Maintenant, la façon dont tout cela fonctionne, c' est que la première fonction anonyme est créée. OK ? Fonction anonyme, c'est-à-dire qu'une fonction sans nom est créée, parce que nous n'ajoutons pas de nom ici, d'accord ? Donc, une fonction sans nom est créée, et elle est assignée à cette variable appelée Grit, d'accord ? Et puis vous pouvez utiliser la cupidité pour appeler la fonction. Maintenant, si je copie cet appel de fonction, et si je l'ajoute en haut, vous verrez que grit n'est pas encore initialisé ou que grit n'existe pas. C'est bon. Donc, contrairement à say hello, où nous avons pu appeler la fonction avec son nom de fonction, nous ne pouvons pas appeler la fonction avec greet car grit est essentiellement une référence que nous avons créée qui pointe vers cette fonction OK ? Donc c'est quelque chose que tu dois savoir, d'accord ? Vous ne pouvez pas appeler grit avant sa définition dans le code. Vous devez le définir avant de l'utiliser. accord ? Donc oui, il s'agit de l'expression de la fonction. Maintenant, ce que nous faisons ici lorsque nous assignons la fonction de cette façon, nous créons en fait une expression OK ? Il s'agit donc d'un exemple d'expression de fonction. Vous pouvez même ajouter une fonction, à droite, qui renvoie quelque chose. OK ? Alors permettez-moi également de dire multiplions. OK. Disons que nous voulons avoir une fonction pour multiplier quelque chose. Je vais ajouter une fonction ici. Le paramètre est E P ici, et je dirais renvoie A dans B, car cette fonction multiplie les deux nombres et renvoie. OK ? Maintenant, vous pouvez dire multipliez par ici, dix, 20. OK. Et si je garde ça. OK, donc il revient simplement. Nous devons imprimer la valeur si nous voulons l'utiliser ou l'afficher aux utilisateurs. Je ne donne toujours pas le résultat cause de cette ligne à cause de cette ligne en haut, nous recevons une erreur. Donc, si vous enregistrez ceci après l'avoir commenté, vous obtiendrez un multiplicateur ici, vous pouvez voir, et vous pouvez voir le résultat de la multiplication ici. OK ? C'est donc également faisable lorsque vous avez une fonction qui renvoie quelque chose et que vous assignez cette fonction à une variable Il s'agit donc d'une fonction anonyme ou d'une fonction sans nom que vous assignez à une variable C'est bon. Maintenant, une autre chose que je veux souligner ici est que les fonctions en JavaScript sont des objets. OK ? Ce sont donc des objets, ce qui signifie que si vous avez une fonction, d'accord, laissez-moi créer une fonction ici. OK ? Donc ici, je vais dire que les fonctions sont des objets. C'est bon. Et je vais avoir une définition de fonction. Je l'appellerai GET. OK. Aucun paramètre. Je vais dire console point log, et je vais rapidement dire bonjour ici. OK ? Donc oui, c' est une fonction. Maintenant, ce que vous pouvez faire, c'est que nous avons cette fonction. OK ? OK, GET a déjà été défini, alors dites bonjour, ou dites bonjour. C'est bon. Donc si tu appelles pour dire bonjour, ça marchera, bien sûr, rien de magique, non ? Maintenant, rebonjour. Je vais imprimer quelque chose. Bonjour encore une fois, way. Pour que nous sachions que cela provient de cette fonction. Bonjour encore une fois, cela vient de cette fonction. C'est bon. Ce que vous pouvez faire, c'est avoir une variable. Vous pouvez dire A ici, et vous pouvez assigner à dire bonjour ici. OK ? Donc, ce qui se passe ici c'est cette fonction ou cette variable, je dois dire. C'est bon. Cette variable fait également référence à cette fonction maintenant, n'est-ce pas ? Et tu peux simplement dire «  A », et tu te reverras. C'est bon. Vous pouvez donc voir que vous assignez une fonction essentiellement à une variable Et cela est possible parce que les fonctions sont des objets en JavaScript. OK. Et vous pouvez utiliser A pour appeler cette fonction particulière. C'est bon. J'espère que cela a du sens, non ? Voilà donc quelques concepts que je souhaite aborder. J'espère que cela vous a été utile. 6. Les bases du Javascript moderne : maîtriser les fonctions de flèche: Il est donc temps de parler des fonctions des flèches. Maintenant, que sont les fonctions des flèches ? Désormais, les fonctions de flèche sont de la syntaxe, et cette syntaxe permet d'écrire des fonctions en JavaScript de manière plus concise de créer et d'écrire des fonctions en JavaScript de manière plus concise. accord ? Maintenant, si vous deviez créer une fonction, que feriez-vous ? Vous diriez fonction, dites bonjour, et je dirais simplement bonjour ici. OK ? Donc je dirais Console, log, et je dirais bonjour. OK ? Il s'agit d'une fonction. Et, bien sûr, si je dois l'appeler, je l' appellerai simplement de cette façon, en lui disant bonjour. Il s'agit d'une méthode de base pour créer des fonctions en JavaScript. Maintenant, vous pouvez utiliser l'expression de la fonction, n'est-ce pas ? Et vous pouvez dire, et greet est égal à, et vous pouvez vous débarrasser de ce genre de syntaxe ici. OK ? Ou laissez-moi conserver cette syntaxe ici en haut. OK, pour que nous voyions comment nous progressons et je vais m'en débarrasser ici C'est bon. Et c'est aussi une autre façon de créer de la fonction. Mais ici, nous utilisons une expression de fonction où nous assignons une fonction à une variable. OK ? Alors maintenant, cette variable pointe vers cette fonction particulière. Maintenant, en JavaScript, vous pouvez améliorer ou le rendre encore plus concis. C'est bon. Donc ce que tu peux faire, c'est dire ici, cret, je vais dire « Greet Arrow Nous verrons quelle est la fonction des flèches. Vous pouvez donc tout d'abord ignorer ce mot-clé de fonction ici. Très bien, vous pouvez vous débarrasser de ce mot-clé de fonction. Et comme notre fonction consiste à n' avoir qu'une seule déclaration, je peux simplement me débarrasser des phrases et je peux simplement dire, ou je peux simplement faire quelque chose comme ça. C'est bon. J' utilise donc la flèche ici pour définir le corps de la fonction ou la définition de la fonction. Maintenant, je peux dire « Greet Arrow » ici. Je peux le sauvegarder et vous verrez Bonjour » s'imprimer sur la console. C'est bon. Cette syntaxe est donc une syntaxe de la fonction flèche. Et vous pouvez voir qu'il s'agit d'une création de fonction d'une manière normale, accord, avec juste la syntaxe normale. Il s'agit d'une expression de fonction dans laquelle vous assignez une fonction à une variable Et voilà, vous êtes en train de rendre cette syntaxe ou expression de fonction encore plus concise et vous utilisez la flèche ici. Voici donc les fonctions de flèche, à droite, dans lesquelles vous pouvez créer des fonctions de cette façon. Maintenant, bien sûr, c' est beaucoup plus concis Si vous créez simplement une fonction pour effectuer une seule ligne d' opération, par exemple, n'importe quelle ligne d'opération, comme imprimer quelque chose, enregistrer quelque chose ou traiter quelque chose en une seule ligne, alors de cette façon, alors de cette façon, la fonction flèche est beaucoup plus concise que de faire les choses de cette façon ou de cette façon, n'est-ce pas ? Ce n'est qu'une option. C'est bon. Et vous verrez beaucoup de code utilisant les fonctions de flèche. accord ? Maintenant, la question est là, cette fonction est sur une ligne, n'est-ce pas ? Alors, est-ce comme si la fonction flèche était simplement utilisée pour une seule ligne de déclaration ? Absolument pas. Donc, si le corps de la fonction comporte plusieurs instructions. Donc ici, je peux dire créer une flèche, multiple, d'accord ? Et je peux dire ici, d'accord ? Donc, ici, je vais ajouter du corps, quelque chose comme ça, et je peux dire, ici, je vais le copier et je vais le retoucher. H deux. OK ? Voici donc bonjour un, et voici comment deux. C'est bon. Et j'ai juste besoin de l'appeler pour pouvoir dire créer une flèche multiple et, euh, simplement ajouter pour que vous puissiez voir bonjour un, bonjour deux. Vous pouvez donc également avoir plusieurs lignes de code dans les fonctions de flèche. C'est bon. Maintenant, créons et voyons rapidement différentes fonctions de flèche dans différents scénarios, à droite. Alors, comment se comporterait la fonction flèche s'il y avait des paramètres, n'est-ce pas ? Nous avons donc vu que c'est ainsi que vous pouvez créer sans paramètres, n'est-ce pas ? Donc, avec les paramètres, vous allez simplement ajouter un paramètre ici, d'accord Ainsi, par exemple , ici même, je peux mettre à jour cet exemple ici. OK. Permettez-moi de le dupliquer ici. OK. Maintenant, ici, je peux dire param 1 OK. Il n'y a donc qu' un seul paramètre, donc je peux dire le nom ici, d'accord. Et je vais simplement le convertir en modèle littéral. OK, parce que c'est plus pratique, et je peux dire plus grand et nom ici, non Maintenant, je dois donner mon nom ici. OK. Donc je vais dire Crete arrow, et je vais dire param 1 OK. Et je peux dire John. OK. Et si je garde ceci, vous en verrez un, bonjour, John, n'est-ce pas ? Voici donc comment vous pouvez transmettre les paramètres, d'accord. Vous pouvez même transmettre plusieurs paramètres si vous le souhaitez. Je peux donc dire le deuxième paramètre. Nous transmettons donc ici deux paramètres, donc je peux également dire H ici, d'accord Et ici, je peux simplement reproduire cette syntaxe, d'accord ? Ici. Je vais utiliser des modèles littéraux, et ici, je vais dire H. D'accord. Et ici, je vais juste le copier. Nous allons donc dire le deuxième paramètre, et je passe John, ainsi que 34 ou 32 Je vais enregistrer ça et tu pourras voir bonjour un, John, bonjour deux, 32, non ? Vous transmettez donc plusieurs paramètres, et vous avez également un corps fonctionnel, n'est-ce pas ? Vous pouvez également vous procurer celui-ci. OK ? Permettez-moi donc d'y répondre en une seule déclaration ici. OK, prends une flèche, je vais en dire une, je vais passer le nom ici. OK. Et je peux ajouter un nom ici. Quelque chose comme ça. OK ? Maintenant, si j' appelle cette fonction, obtiens R un ou salue R un, d'accord. Super R one et je ne peux rien transmettre, d'accord ? Et si vous sauvegardez ceci, vous pourrez voir Bonjour Nadar, non ? Donc, ici, il s'agit d'une fonction d'une seule ligne, en fait. Ça ne se passe pas comme plusieurs lignes. Cette fonction n'a qu'une seule ligne, et vous pouvez même transmettre un paramètre ici, n'est-ce pas ? Vous pouvez donc avoir des paramètres uniques, des paramètres multiples. Vous pouvez même renvoyer des valeurs, non ? Permettez-moi donc d'écrire dans l' exemple ici. OK ? Donc, ce que je peux faire, c'est dire, somme, et je dirais que c'est égal à, d'accord. Permettez-moi donc d'abord de créer en utilisant une syntaxe normale, afin que nous la déduisions ensuite en fonctions de flèche. OK. Donc ici je peux dire s et oups, je peux dire s, et ici je peux dire E P, et cela revient simplement, E plus P. D'accord. C'est ça. C'est assez simple. Et maintenant, je peux dire la somme, non ? Je peux dire 1020, non ? Et je vais tout mettre dans le journal de la console. OK ? Donc parce que nous revenons simplement et que nous n'imprimons rien, n'est-ce pas ? Il ne sera donc pas affiché sur la console. Vous pouvez donc voir que nous en voyons 30 ici, n'est-ce pas ? Maintenant, si je dois convertir cela en une expression de fonction, je peux dire « let » et je peux en dire un peu ici. OK ? Je vais garder le même nom. Débarrassons-nous de ça. OK. Il s' agit maintenant d'une expression de fonction. Vous pouvez en voir 30. Maintenant, si je devais convertir cela en fonction flèche, comment ferais-je ? Donc ici, je peux tout d'abord me débarrasser de la fonction, d'accord. Et puis je vais commencer à voir des marques rouges ici, non ? Vous pouvez donc voir la flèche attendue. Ici, je peux voir une flèche. OK, et ça y est. Vous pouvez voir qu' il s'agit d'une fonction flèche. Et je n'en ai même pas besoin ici. D'accord, parce qu'il n'y a qu'une seule ligne de code, donc vous pouvez voir ce que c'est. Et vous n'avez même pas besoin du mot clé return, d'ailleurs, si vous revenez et qu'il ne contient qu'une seule ligne de code, vous pouvez voir, n'est-ce pas ? Tu sais, ça y est. Je vais juste ajouter de l'espace. Tu sais, c'est ça. Alors, est-ce propre ? Tu es en train de dire qu'il faut faire la somme. C'est un paramètre, une flèche, vous dites A plus B. Il n'y a pas de mot clé de retour, est donc automatiquement renvoyé. Il est entendu qu'elle sera renvoyée ou que cette valeur doit être rétablie, n'est-ce pas ? Alors, dans quelle mesure est-ce concis par rapport à l'ancienne façon de faire les choses, n'est-ce pas ? C'est assez simple, assez facile, et cela rend la syntaxe beaucoup plus lisible et concise, comme vous pouvez l' imaginer ici, d'accord ? Donc, les valeurs de retour sont ce que je vais écrire ici. J'espère donc que vous avez pu suivre, et j'espère que l' explication des fonctions des flèches vous a été utile. 7. Des objets personnalisés : exploiter les fonctions qu'ils contiennent: Parlons donc de la façon dont vous pouvez utiliser les fonctions à l'intérieur des objets. Maintenant, disons que j'ai un objet appelé « personne » ici, d'accord ? Et je vais avoir quelques propriétés ici. OK. Donc je vais dire Alice ici. OK. Et je peux dire « vas-y », « g » c'est 33. OK, j'ai oublié une virgule. OK, je peux dire « console point log » ici. Oups, et je peux dire que c'est une personne qui a pensé à H. D'accord. Maintenant, je peux ajouter des tactiques ici. Je peux le convertir en modèle littéral, et je peux dire, Bonjour, je le suis OK. Et je peux même ajouter une expression ici. OK. Maintenant, ce sera le nom. D'accord, parce que le nom est ce qui a du sens. Et si je garde ça, tu verras, bonjour, je suis Alice. C'est bon. Donc, ce que nous faisons, c'est faire référence aux propriétés des objets en utilisant la notation par points ici, n'est-ce pas ? Maintenant, vous pouvez avoir des fonctions à l'intérieur des objets. Maintenant, si vous ajoutez des fonctions à l'intérieur d'objets, elles sont appelées méthodes, n'est-ce pas ? Donc ici, je peux simplement continuer à ajouter des déclarations ici, je peux dire mon âge ici, je peux imprimer le point H de mon âge ici. OK ? Mais cela ne fait pas partie de l'objet. Je peux donc ajouter ce truc à l'intérieur de l'objet à l' aide de la fonction, comme je l'ai dit, donc je vais juste le découper ici. OK ? Et je vais d'abord ajouter une virgule car les méthodes que vous ajoutez, comme je l'ai dit, fonctionnent à l'intérieur d'un objet sont appelées méthodes, n'est-ce pas ? Donc, si vous ajoutez une méthode ici maintenant, d'accord, doit être séparée par des virgules car c'est un attribut, droit ou une propriété, devrais-je dire Donc je vais dire Grit ici. Je vais dire une fonction comme celle-ci, et je vais l'ajouter ici. OK ? Si je le garde, rien ne se passera car j'ai besoin de le refroidir. Alors je vais dire « Oh, je ne serai pas accueilli ». Je vais dire « personne point Greet away ». OK ? Je n'ai pas besoin d' appeler le journal des points de la console ici parce que je fais déjà le journal des points de la console cette méthode ici, n'est-ce pas ? Donc je vais dire « Person point Greg », et je vais voir ça. Vous verrez, bonjour, je suis Alice, non ? Je vais juste m'en débarrasser d'une seule façon. OK ? C'est donc faisable Maintenant, je vais appeler cet objet une personne Alice. Je remplacerai Alice ici et ici. Cela fonctionne bien. Maintenant, je vais ajouter une autre personne ici, qui est la réplique de cet objet ici, et je vais dire la personne John ici. OK. Je vais copier son nom, personne, John, personne, John, et je vais le dupliquer ici, et je vais dire personne John. Tu peux voir ? Bonjour, je m'appelle Alice. Bonjour, je m'appelle John. D'accord. Cela fonctionne donc bien jusqu'à présent, tout va bien. D'accord. Maintenant, nous avons créé des fonctions ici à l' aide de l' expression fonctionnelle, n'est-ce pas ? Vous pouvez donc vous débarrasser de la fonction ici, le mot-clé function, et vous pouvez convertir en fonction flèche. OK ? Donc, ce que je peux faire ici, c'est simplement m'en débarrasser et ajouter ce type de syntaxe ici. OK. Je peux m'en débarrasser et utiliser ce type de syntaxe ici. Oups. Ce genre de syntaxe, non ? Cela fonctionnera donc bien. Et si vous l'enregistrez, cela fonctionnera bien. Aucune modification de la sortie. Ces méthodes ont donc été créées. C'est bon. Maintenant, je peux aussi me débarrasser de la presse à boucles, et je peux la rendre encore plus concise parce que j'utilise les fonctions des flèches maintenant, n'est-ce pas ? Je vais donc passer à cette syntaxe. OK. Et à la fin, je vais supprimer le point-virgule. OK. Si je sauvegarde ceci, aucun changement dans la sortie. D'accord ? Maintenant, je voudrais également parler d' un mot clé qui existe, ce mot-clé. Maintenant, je vois personalis qui est le nom de cet objet en particulier, n'est-ce pas ? Mais en fait, ce que je fais, c'est que je fais référence à un attribut de nom ou à une propriété de nom en utilisant ce nom d'objet. Cela n'est pas obligatoire. Ce que je peux faire, c'est simplement m'en servir ici. Il s'agit d'un mot-clé en JavaScript qui est utilisé pour faire référence à l' objet actuel, n'est-ce pas ? Donc, si vous passez la souris dessus, d'accord, vous verrez ce type de mot clé de test global Si je sauvegarde ça, d'accord ? accord, cela ne fonctionne pas car les deux sont convertis en fonctions de flèche. C'est bon. Donc, une chose dont vous devez vous souvenir est que si vous utilisez ce mot-clé, il ne fonctionnera pas dans les fonctions fléchées Vous devez donc dire fonction ici, et vous devez l'enregistrer. OK, et je dois m'en débarrasser. Je vais donc devoir faire une petite inversion car ce mot clé ne fonctionnera pas dans cette syntaxe particulière ici OK. Je vais donc passer à nouveau à ce type de syntaxe. OK. Donc, vous pouvez voir, bonjour, je suis Alice qui travaille ici. Vous en faites donc maintenant usage. Si vous passez la souris dessus, vous verrez que cela fait référence au nom, au g et au message d'accueil Si vous modifiez cela ici , bien sûr, cela ne fonctionnera pas car vous venez de voir cela ne fonctionnera pas dans les fonctions des flèches. Et si vous passez la souris dessus, vous avez impression que cela fait référence à un problème mondial OK ? Mais celui-ci fait référence à cela ici, ou aux autres attributs de l'objet. C'est bon. Vous pouvez donc voir le résultat. La sortie n'est pas correcte. OK ? Je vais donc m'en tenir à la personne John ici. Donc, une chose que vous pouvez retenir ici est que si vous l'utilisez ou si votre méthode dans l'objet implique de l'utiliser, vous ne devriez pas utiliser fonction flèche dans l' objet ici, n'est-ce pas ? La syntaxe ne doit pas être utilisée. Vous devez utiliser ce type de syntaxe. C'est bon. J'espère donc que cela vous sera utile. Maintenant, vous pouvez faire beaucoup de choses avec les méthodes contenues dans les objets, d'accord ? Donc, si vous venez ici, je vais vous donner un contre-exemple ici. OK. Maintenant, que va faire le compteur ? Cela va vous apprendre comment vous pouvez transmettre les paramètres et comment les renvoyer depuis l'objet, n'est-ce pas ? Je vais donc dire const, ou je peux simplement dire « laissez ici », « contrer OK. Et je dirais valeur. Ce compteur a donc une valeur initiale de zéro. OK. Et je peux parler d'augmentation ici. C'est donc une fonction que je crée une fonction d'incrémentation, et je dirai valeur de retour La valeur doit maintenant être incrémentée. Vous pouvez donc voir que cette valeur de point a été ajoutée et vous pouvez l'incrémenter ici Je peux donc dire cette valeur de point plus égale, et je peux en dire une ici. OK ? Et gardez-le jusqu'à présent, tout va bien. Maintenant, si je fais défiler l'écran vers le bas, je dois l' invoquer ici pour pouvoir dire Console, point log ici, et je dois dire compteur, point, je dois dire incrément Vous pouvez le voir incrémenté d'une unité, je peux le copier. OK, je peux l'incrémenter de deux, incrémenter de trois, incrémenter de quatre, etc. Voici un exemple de la façon dont vous pouvez renvoyer des valeurs à partir d'une méthode définie dans l'objet I should say, n'est-ce pas ? Je vais vous montrer un autre exemple où vous pouvez également accepter le paramètre et le retourner. Supposons que je souhaite augmenter la valeur d'un certain montant Je vais donc le dupliquer. Je vais ajouter une virgule Ici, je peux dire incrémenter B et j'accepterai une valeur nulle ici, et j'ajouterai cette valeur num ici. OK ? Et je vais renvoyer la valeur. Maintenant, voici ce que je dois faire, si je viens, je peux dire incrémenter Pi, et je peux en ajouter dix ici Donc, idéalement, la sortie devrait être 14. Si je sauvegarde ceci, vous pouvez voir que la sortie est 14. Vous transmettez donc ce paramètre et vous l'obtenez en sortie. C'est bon. C'est ainsi que vous pouvez transmettre les paramètres et vous pouvez également obtenir les valeurs de retour à partir des méthodes, comme les fonctions au sein des objets sont appelées méthodes. Je les appelle donc des méthodes. OK. Mais si vous créez des méthodes dans un compteur, voici comment elles fonctionneront. C'est bon. Maintenant, un autre exemple que je voudrais vous donner ici concerne les objets dynamiques ici. Désolé, ce ne sont pas des objets dynamiques, mais je dirais que c' est un moyen de définir des méthodes de manière dynamique. OK ? Définissez donc les méthodes de manière dynamique. C'est bon. Disons que j'ai une méthode. D'accord, je vais appeler cette méthode dynamique. OK. C'est un exemple de la façon dont vous pouvez créer des méthodes dynamiques. Donc j'ai ceci, et disons qu'il a un attribut, je vais ajouter un attribut, juste comme ça. Je l'appellerai valeur zéro. OK. Ce que vous pouvez faire, c'est créer le journal de la console et vous pouvez voir la valeur du point de la méthode dynamique. Huit. Cela vous donnera donc zéro, bien sûr. Maintenant, je n'ai pas ajouté de méthode à l'intérieur. Vous pouvez ajouter une méthode dynamiquement une fois que l' objet a été créé. Tu peux le faire. Oui Comment ferais-tu ça ? Alors voilà, tu peux venir. Vous pouvez dire méthode dynamique, tot. OK. Laissez-moi faire défiler la page vers le haut pour qu'elle soit visible. Donc méthode dynamique , tout, je peux dire, disons haut ici et je peux dire fonction. OK. Et je n'ai pas besoin de paramètres. Je vais dire console point log ici, et je vais dire bonjour dynamique, non ? Et oups, je vais descendre et je vais dire « méthode dynamique point ». Je vais dire Chi, quelque chose comme ça. Vous verrez le résultat hello dynamic ici. Donc, cette fonction ou cette méthode, je dois dire, a été ajoutée dynamiquement à l'objet après sa création. C'est donc tout à fait possible. Les méthodes peuvent être ajoutées aux objets à tout moment du programme, pas seulement au moment de leur création. Gardez cela à l'esprit, d'accord, vous pourriez voir du code dans lequel les choses se passent ainsi, alors ne vous y trompez pas. OK, c'est normal en JavaScript. C'est bon. Maintenant, il s' agit d'objets normaux. Je voudrais également parler un peu des objets imbriqués, d' accord, comment fonctionneraient les fonctions dans les objets imbriqués, n'est-ce fonctionneraient les fonctions dans les objets imbriqués, Pour cela, nous allons prendre un exemple de voiture. OK. Je vais donc créer rapidement un objet automobile. Supposons que la voiture possède un attribut appelé marque. Il a la marque Toyota , d'accord ? Ensuite, je vais dire qu'il y a un objet imbriqué ici appelé specs Dans les spécifications, j'appellerai l'attribut vitesse. Et j'aurai une fonction appelée spécifications d'affichage. C'est donc une méthode, en fait, qui ne fonctionne pas. Désolée. OK. Donc, ne confondez pas les terminologies avec les terminologies J'ai l'habitude de le faire, mais j'espère que vous l' appellerez toujours méthode, parce qu'on les appelle méthodes au sein d' objets, n'est-ce pas ? Vous pouvez donc dire que la vitesse est ou vous pouvez simplement afficher la vitesse ici. Je peux donc dire vitesse et j' ajouterai que vous pouvez dire cela jusqu'à la vitesse. OK. Maintenant c'est fait. Maintenant, comment appelleriez-vous ces spécifications déplacées, n'est-ce pas ? C'est donc un objet dans un objet, non ? Je n'ai donc pas besoin de faire le journal de la console. Je vais juste m'en débarrasser. Mais je peux dire « spécifications du panier », « tout » , «   spécifications déplacées ». Tu peux voir. Vous verrez donc que la vitesse est de 120. C'est ainsi que vous pouvez faire référence à des méthodes créées dans des objets imbriqués, à des objets dans des objets C'est ainsi que vous pouvez faire les choses. C'est bon. J' espère donc que cela vous sera utile et j' espère que vous avez pu suivre le fonctionnement des méthodes au sein des objets imbriqués C'est bon. Il existe également une version abrégée. OK. Maintenant, laissez-moi vous le montrer. Un droit ? Donc, ce que je ferais, c'est utiliser un objet existant ici. OK. Je vais utiliser un objet existant. OK. Donc, version abrégée ici. C'est donc un raccourci pour dire «   personne ». OK. Je vais appeler cette personne en abrégé C'est bon. Et maintenant, ce que nous pouvons faire, c'est qu'au lieu d' avoir ce genre de syntaxe ici, je peux simplement avoir une fonction comme celle-ci. OK. Je n'utilise donc pas les fonctions de flèche ici. Gardez cela à l'esprit, d'accord. Mais je vais ajouter un point-virgule et ceci. OK. Et oui, c'est ça. Et vous pouvez utiliser la sténographie des personnes ici. C'est bon. Et cela devrait très bien fonctionner. Tu peux voir. OK, en disant bonjour, je suis John parce que cela fait référence à la personne John. Vous pouvez le voir ici. OK. Donc, vous pouvez voir, bonjour, je suis un raccourci. C'est bon. Et il s'agit d'une version abrégée, vous pouvez également voir ce type de syntaxe lorsque vous travaillez avec OK ? Les méthodes ont donc été créées de cette façon. C'est bon. C'est donc une solution, d'accord. Une autre méthode consiste à utiliser les fonctions de flèche, puis vous avez également une expression de fonction comme ce type de syntaxe, n'est-ce pas ? sont donc tous valides Ils sont donc tous valides et fonctionneraient parfaitement. C'est bon. J'espère donc que c'est clair pour vous tous, et j'espère que cela vous a été utile. 8. Tableaux de surcharge : Méthodes avancées en JavaScript: Maintenant, lorsque vous travaillez avec des tableaux, Ja Script fournit de nombreuses méthodes intégrées Et vous pouvez utiliser ces méthodes pour mieux travailler ou pour effectuer de nombreuses tâches lorsque vous travaillez avec des tableaux. C'est bon. Nous allons maintenant examiner un certain nombre de méthodes existantes, et vous comprendrez mieux ce que sont ces méthodes et comment vous pouvez utiliser dans votre programmation quotidienne. Donc, ici, vous pouvez voir cette liste, à droite. Euh, il y a donc cette carte, filtrez, réduisez le fourrage. Nous allons passer en revue chacun d'eux, non, et je vais tout expliquer un par un, non ? Donc, d'abord, nous allons parler de la carte ici. D'accord. Je vais juste le noter, et je vais juste l'amener à la nouvelle ligne. Ici, je vais juste zoomer un peu. C'est bon. Maintenant, qu'est-ce qu'une carte ? Maintenant, la méthode map transforme chaque élément dans un tableau et renvoie simplement un nouveau tableau. Comment cela fonctionne-t-il ? Maintenant, cette transformation peut être n'importe quelle opération ou transformation que vous souhaitez effectuer sur chaque élément du tableau et que vous souhaitez collecter à nouveau tous les éléments transformés dans un tableau. Permettez-moi maintenant de vous donner un exemple de la façon dont vous pouvez utiliser la carte. Disons maintenant que j'ai un tableau appelé nombres. C'est bon. Disons que c'est un simple tableau, il contient des éléments comme un, deux, trois, quatre et cinq ici. C'est bon. Maintenant, disons que j' ai une exigence selon laquelle je veux doubler chaque élément de ce tableau. OK ? Il y a donc ces nombreux éléments et je veux doubler chaque élément existant. Donc deux deviennent quatre, un reste un ou un devient deux, en fait, d'accord ? Devient quatre, trois devient six, quatre devient huit et cinq devient dix. C'est bon. Donc, ce que je peux faire, c'est avoir une réception ici, d'accord ? Je peux donc avoir une fonction appelée double ici. OK. Et le paramètre peut être nul ici. OK. Et je peux te dire de ramener le nombre à deux. Maintenant, c'est une fonction qui va m'aider à doubler chaque élément. Maintenant, comment vais-je appliquer cette fonction à chaque élément du tableau ? OK ? Donc pour cela, ce que je vais faire c'est dire des chiffres, qui sont un tableau ici. Je vais dire point. Dès que vous dites point, vous verrez que ce sont toutes les méthodes auxquelles vous avez accès, n'est-ce pas ? Et vous avez une méthode ici, c'est la carte. Nous allons donc dire carte ici. OK ? Si vous passez la souris dessus, vous verrez qu'il appelle la fonction de rappel définie sur chaque élément d' un tableau et renvoie un tableau contenant le résultat OK ? Donc je vais dire carte, et je vais transmettre la fonction ici, d'accord ? Je vais simplement dire OK. Hein ? Maintenant, cela va appliquer cette fonction à chaque élément du tableau. accord ? Maintenant, le retour ici est à nouveau un tableau. Donc, ce que je dois faire, c'est rassembler les éléments doublés dans un tableau. Je dois donc dire des nombres doublés ou doubles, quelque chose comme ça. OK ? Et puis je peux dire point console Log over here. OK. Oups, donc je dois dire console point log, et je dois dire double chiffres, quelque chose comme ça. C'est bon. Et ils devraient donner le résultat. Maintenant, vous pouvez voir ici, deux, quatre, six, huit, dix, n'est-ce pas ? Chaque élément a donc été doublé. Comment cela a-t-il fonctionné ? Cela a fonctionné à l' aide de la fonction cartographique, désolé, de la méthode cartographique dans les tableaux Nous avons donc appliqué cette fonction particulière appelée double que nous avons créée ici, droite, à chaque élément du tableau. OK ? Vous pouvez donc même avoir un journal de console ici. Dites console point log, et vous pouvez dire ici, vous pouvez imprimer num ici. OK. Ainsi, vous saurez par quel numéro cela est appelé. Vous pouvez donc voir qu'il a été appelé un, deux, trois, quatre et cinq. Si je change ça à 14 ici. Et si je sauvegarde ceci, vous verrez passer à 14. Il est donc appelé pour chaque élément existant dans le tableau. OK ? Nous n'avons pas besoin de ce journal de console. D'accord, nous venons de commencer cela pour obtenir des informations supplémentaires, mais voici comment cela fonctionnera. C'est bon. J'espère donc que cela montre assez clairement comment cela fonctionne et comment la carte peut être utile. Maintenant, nous avons une fonction séparée ici, non ? Il s'agit d'une fonction nommée. Vous pouvez en fait le convertir en une fonction sans nom ou en une fonction anonyme OK, vous n'avez donc pas besoin d'une déclaration de fonction séparée pour cela. Maintenant, qu'est-ce que je veux dire, comment ferais-tu cela ? OK ? Je ne vais donc pas le supprimer, mais en fait je le copierais ici. OK ? Maintenant, c'est un exemple d'utilisation de l'anonymat, n'est-ce pas ? Fonction anonyme, juste ici. C'est ainsi que nous avons obtenu les nombres doubles auxquels nous appliquions cette fonction à chaque élément du tableau en utilisant la carte, n'est-ce pas ? Je vais donc dire double anonymat. OK. Et ici, au lieu de transmettre cette fonction ici, ce que je peux faire, c'est que je peux obtenir cette définition complète ici. Je peux le copier et le coller ici. Et au lieu du double, ce sera une fonction. OK. Je serai le mot-clé de la fonction. OK. Permettez-moi donc de faire défiler un peu la page vers le bas et de zoomer un peu en arrière. Vous pouvez donc voir cette syntaxe ici. Je dis qu'il faut être doublement anonyme. Donc, cela peut être n'importe quelle variable que vous avez, qui peut faire le travail de collecte de tableaux, d'accord ? Les tableaux, comme dans ce truc, toute cette opération renverra un tableau, n'est-ce pas ? Vous avez donc besoin de quelque chose pour le collectionner, non ? Je dis donc une carte à points avec des chiffres. Et au lieu de transmettre le nom de la fonction, je la crée directement ici. Je dis donc function, num, renvoie num en deux. C'est ce que je fais tout de suite. C'est bon. Ensuite, je peux simplement obtenir ce journal de console ici. Et je peux simplement dire « double anonymat », et je peux enregistrer ça. Le résultat que vous obtiendrez sera le même. Vous pouvez voir qu'il s'agit de la sortie du code précédent et de la sortie du code actuel. OK ? Il n'y a aucun changement dans le résultat, mais il y a une syntaxe similaire à celle que nous avons écrite dans celui-ci. OK ? C'est très concis. OK, concis alors le premier. OK ? Donc oui, c' est un exemple de fonction anonyme dans laquelle nous créons une fonction sans nom juste pour cette opération Alors, quand utiliseriez-vous ce type de syntaxe, et quand utiliseriez-vous ce type de syntaxe ? Donc, si vous souhaitez que la fonction soit réutilisée à plusieurs autres endroits en dehors de ce tableau, vous devez avoir une fonction distincte et vous pouvez utiliser ce type de syntaxe Mais disons que si vous créez une fonction uniquement dans le but de transformer un tableau, vous pouvez avoir cette fonction comme ceci. C'est beaucoup plus concis et beaucoup plus lisible. Vous pouvez aller un peu plus loin ici. Je vais juste dupliquer le tout ici. OK. Vous pouvez aller plus loin et au lieu d'une fonction anonyme, comme ici , je peux voir la fonction des flèches. Donc, ici, je vais vous montrer un exemple utilisant la fonction flèche. OK ? Donc ici, vous pouvez dire flèche, accord, fonction cartographique, et ici, nous voyons zéro, n'est-ce pas ? Toute cette syntaxe sera donc convertie en fonction de flèche. Ce mot-clé de fonction n' est donc pas nécessaire, d'accord ? Et puis cela devient une sorte de syntaxe de fonction flèche. OK ? Et puis au lieu d' imprimer le double anonyme, j'imprimerai la double flèche. OK ? Vous pouvez voir que le résultat est le même, non ? Désormais, cette syntaxe peut être encore réduite. OK ? Nous n'avons pas besoin de bretelles bouclées car il n'y a qu'une seule affirmation, n'est-ce Il n'y a qu'une seule déclaration. Des bretelles bouclées sont donc Non, ce n'est pas nécessaire, non ? Alors je vais venir ici, je vais me débarrasser des bretelles bouclées, et ça se fait en une seule ligne, non ? Le retour n'est pas non plus nécessaire pour le moment. OK. Je vais donc me débarrasser du retour. Tu peux voir. Et ces parenthèses, les crochets ne sont pas non plus nécessaires. Je vais m'en débarrasser aussi. Vous pouvez voir à quel point c'est concis, n'est-ce pas ? Vous pouvez donc voir que dans cette expression ou simplement dans cette déclaration, nous transformons en fait l'ensemble du tableau ici. Si vous l'enregistrez, le résultat ne change pas. Vous obtenez le même résultat, mais regardez la syntaxe, les gens, n'est-ce pas ? Il s'agit de la première syntaxe. Observez attentivement. Fonction séparée. transmettez le nom de la fonction ici, vous appliquez cette fonction à chaque élément du tableau, n'est-ce pas ? Vous obtenez l' élément transformé, vous l'imprimez. Vous utilisez une fonction anonyme dans laquelle vous transmettez cette fonction ici. Il s'agit d'une fonction anonyme sans nom. Vous appliquez cette fonction à chaque élément de DRA. Enfin, en utilisant les fonctions de flèche, vous pouvez constater que la syntaxe est beaucoup plus simplifiée, concise et facile à lire. OK. Vous verrez donc que ce type de syntaxe est beaucoup utilisé. D'accord, beaucoup de gens sont confus et ne comprennent pas ce qui se passe ici, en particulier ceux qui découvrent JavaScript. accord ? Si vous avez une bonne expérience de JavaScript, vous savez peut-être ce que c'est. Mais les personnes qui découvrent JavaScript et utilisent différents langages de programmation comme Java, C plus plus, Python, d'accord ? C'est souvent difficile pour eux parce que, vous savez, tout cela a été réduit à une si petite expression ici. C'est vrai. J'espère donc que c' est assez clair. J'y suis volontairement allée étape par étape. Je vous ai d'abord montré comment cela se fait, comment vous pouvez transmettre une fonction nommée ici. Vous pouvez voir comment vous pouvez avoir une fonction anonyme et comment vous pouvez avoir directement une fonction flèche. La plupart des didacticiels thématiques traitent directement des fonctions des flèches. OK. Donc, si vous découvrez la méthode cartographique dans RAS, ils aborderont directement l'utilisation de cette syntaxe, n'est-ce pas ? Mais je voulais que vous compreniez tous et que vous partiez étape par étape, non ? Maintenant, nous pouvons appliquer ce type de syntaxe à toutes les autres méthodes, n'est-ce pas, parce que vous en avez compris une, vous trouverez donc très facile de comprendre le reste, n'est-ce pas ? Il s'agit donc d'une carte. Vous pouvez effectuer toutes sortes de transformations, personnes, n'importe quelle sorte de transformation. si vous voulez faire ces trois X, ou dix X, par exemple, vous obtiendrez dix, 20, 30, 40, 50, d'accord ? Toute sorte de transformation, non ? Il s'agit donc d'une carte. Maintenant, le suivant dans la ligne ou le suivant dans la file d'attente est le filtre. OK ? Maintenant, qu'est-ce qu'un filtre ? Je vais juste le démonter. OK ? Le filtre retournera donc dans un nouveau tableau avec les éléments qui répondent à une condition. Maintenant, il y aura des scénarios dans lesquels vous souhaiterez filtrer les éléments d'un tableau en fonction d'une certaine condition, n'est-ce pas ? Donc, dans ce cas, vous voudrez peut-être filtrer, n'est-ce pas ? Et c'est là que le filtre entre en scène. Maintenant, le filtre est une méthode qui offre une manière très concise de le faire. OK ? Supposons donc que nous ayons ce tableau num d'accord avec deux, quatre, désolé. Ce n' est pas l'élément. C'est un, deux, trois, quatre, cinq. Hein ? C'est ce qu'est le tableau. Disons que je veux obtenir la liste des nombres pairs. Je peux donc dire des nombres pairs constants ici, et je peux dire que les nombres pointent. Je peux dire filtre, quelque chose comme ça. Et ici, je peux dire num Je peux dire que num modulo deux est égal à zéro ici OK. Et puis vous pouvez simplement imprimer dans le menu Oups Vous pouvez donc simplement imprimer les nombres pairs ici. C'est donc quelque chose comme ça. OK ? J'ai donc une erreur indiquant que N n'est pas défini. OK, ça ne devrait pas être N, c'est num. Mlle l'impression. Il me manque de taper Num. OK. Vous pouvez donc voir qu'il s'agit d'une liste de nombres pairs. Donc, ce qui se passe, c'est que c'est un test dont nous avons parlé ici, n'est-ce pas ? Il s'agit d'un test. Donc, quel que soit l'élément qui réussit ce test, il est renvoyé et ajouté à ce nouveau tableau ou il est filtré et ajouté à ce nouveau tableau, n'est-ce pas ? Et vous imprimez dans cette nouvelle matrice, n'est-ce pas ? L'ensemble du tableau est donc filtré et vous avez un tableau filtré qui répond à cette condition, n'est-ce pas ? Maintenant, disons que si vous en avez trois ici, vous n' obtiendrez que des nombres divisibles par trois Vous pouvez en voir trois ici. OK. Voilà comment fonctionne le filtre, d'accord. La méthode suivante que j'ai consiste à réduire. Maintenant, qu'est-ce que réduire ? Reduce fera le travail de réduire le tableau à une seule valeur, n'est-ce pas ? Maintenant, cela se fait en appliquant une fonction, d'accord ? Et il peut y nombreux cas d'utilisation si vous voulez ajouter, disons , la somme, si vous voulez obtenir la somme de tous les éléments d'un tableau, vous pouvez utiliser reduce ici. Je vais donc m'en tenir à notre exemple de tableau, et disons que nous voulons obtenir la somme de tous les membres du tableau, n'est-ce pas ? Je peux donc dire des chiffres ici. C'est ce que nos réseaux, je peux dire, réduisent ici. Je veux donc réduire ce tableau. OK. Maintenant, il va falloir que je passe l'accumulateur. OK. Je vais donc dire accumulateur. Vous pouvez voir la syntaxe ici. Vous pouvez obtenir la valeur précédente, OK, et vous pouvez obtenir le nombre réel. Je vais donc appeler Accumulator ici et je vais voir la valeur actuelle OK. Alors c'est ce que je vais dire, d'accord ? Et vous pouvez voir la documentation d'une fonction qui accepte jusqu'à quatre arguments La méta à somme réduite appelle la fonction de rappel une fois pour chaque élément du tableau, n'est-ce pas ? Je vais donc dire accumulateur. Qu'est-ce qu'un accumulateur ? Ainsi, l'accumulateur accumulera la valeur de retour des rappels OK ? Donc, à chaque itération, d'accord ? À chaque itération, nous aurons accès à la valeur actuelle, n'est-ce pas ? Alors, quand est-ce le cas, laissez-moi faire défiler la page vers le haut. Donc, lorsque l'itération est faite avec un, d'accord, il en prendra un en photo Cela l'ajoutera à la somme. Ensuite, à l'itération suivante, il ajoutera deux à la somme Et quelle que soit la somme à chaque itération, elle est détenue par un accumulateur, n'est-ce pas ? Par ici. Nous disons donc accumulateur, valeur actuelle, et ici, je vais dire accumulateur plus valeur actuelle OK, c'est ça. Et puis je vais dire « connectez-vous à la console » ici. Je vais me connecter à la console, et je dois le collecter dans Je dois le collecter, oups J'ai donc besoin de le rassembler dans une variable, disons, disons, somme. Et je vais en prendre un peu ici. Maintenant, si je dis Enregistrer, vous verrez 15 sorties SD. C'est bon. J' espère donc que cela a du sens quant à la façon dont cela fonctionne, n'est-ce pas ? Et vous avez une bonne lucidité ici. OK, donc j'ai changé de ligne , juste pour qu' il soit réellement visible pour vous tous, mais ce n'était pas le cas . C'est bon. Mais oui, c' est en cela que consiste toute la méthode de réduction. C'est bon. Maintenant, nous avons pour chacun d'eux. Maintenant c'est pour chacun. Ainsi, for each exécutera la fonction fournie une fois pour chaque élément du tableau. OK. Donc, ce que je peux faire ici, c'est passer à la nouvelle ligne. OK. Quelque chose comme ça. Maintenant, je peux dire un chiffre. OK, les chiffres sont enseignés pour chacun, je peux le dire. Donc, pour chaque élément du tableau, ce que je veux faire, c'est l'imprimer, disons. Je vais envoyer le résultat sur la console, et ici, je vais l'imprimer. Oups, ça me manque de le supprimer, je vais le sauvegarder. Vous pouvez voir un, deux, trois, quatre, cinq, donc c' est un tableau, n'est-ce pas ? Voici donc comment fonctionne chacune quatre. Vous pouvez appliquer n'importe quelle fonction à chaque élément du tableau. D'accord ? Nous avons quelque chose appelé « trouver » ici. Fine renverra le premier élément qui répondra à une condition particulière ici. OK ? C'est donc ce qu'est trouver. OK ? Et comment pouvez-vous en faire usage ? Supposons donc que nous voulions obtenir le premier nombre pair du tableau, n'est-ce pas ? Disons que c'est ce qu' il faut faire. Je peux donc dire que les nombres ne se trouvent pas ici, et je peux dire que le nombre est nul ici, et ce sera que le pourcentage deux est égal à zéro, quelque chose comme ça. OK. Et j'ai besoin de le collecter donc je dois le collecter en fait, directement dans une variable afin que je puisse dire « laissez-le d'abord pair », je l'appellerai le premier numéro de Steven. Et je dirais « connectez-vous ici », journal de la console », et je dirais « pour Steven ». Sauvegardez ceci et vous verrez que le premier événement est deux par ici, n'est-ce pas ? Cela permettra donc d'obtenir le premier élément qui répond à une condition particulière. C'est bon. J'espère que c'est clair. Nous en avons quelques uns ici. Certains vérifieront donc si au moins un élément passe un test particulier, non ? C'est donc ce qu'il vérifiera. Et ici, je vais juste m'en servir. Maintenant, la définition de sum indique qu'elle vérifiera si au moins un élément passe un test particulier. Maintenant, ce sont des tests que vous devez définir comme fonction ici. Et si le test est réussi par au moins un élément du tableau, vous obtiendrez un booléen vrai, Cela renvoie donc un booléen. Je peux donc dire des chiffres ici, points, et nous pouvons utiliser la somme ici. OK. Et je vais dire non. OK. Et la condition que je veux vérifier est un nombre inférieur à zéro, disons, par exemple. OK ? Cela va donc renvoyer un booléen, donc je peux dire let et a un négatif OK, donc si le résultat est négatif, cela me donnera une série booléenne de chutes Je peux l'enregistrer et je dirais que c'est négatif. Si je garde ça, tu vas voir des chutes. Ce tableau n'a donc aucune sorte de nombre négatif. OK. Vous pouvez en fait le remplacer pour obtenir un tableau de nombres négatifs. Vous pouvez donc dire moins un, deux, trois, oups, trois, quatre, etc., n'est-ce pas ? Il y a donc des nombres négatifs, non ? J'accueille un groupe à la volée. Si je sauvegarde ceci, vous obtiendrez une sortie TruSC. Il est donc logique de savoir comment cela peut être utilisé pour vérifier qu'au moins un élément passe un test. Maintenant, cela est utile dans les scénarios, si vous souhaitez exécuter une vérification rapide sur le tableau et obtenir un booléen, oui ou non, et sur la base de ce booléen, oui ou non, vous voudrez peut-être faire quelque chose OK ? C'est donc là que c'est utile ici. OK. Chaque. Maintenant, tout n' est qu'une évocation de somme Certains vérifieront donc si au moins un élément passe un test, mais tous vérifieront si tous les éléments réussissent un test. Je peux donc le reproduire ici, et je peux dire, a ou je vais simplement dire tout, d'accord. Et je vais imprimer tout ça ici. Et au lieu de la somme, je vais tout avoir. Alors, est-ce que chaque élément est inférieur à zéro ? Le résultat est faux ? Non, parce qu'un élément est en fait chaque élément. La condition est donc que chaque élément soit inférieur à zéro ? C'est donc faux. Désolée, je me suis un peu embrouillée. Donc, comme nous avons trois éléments qui ne sont pas inférieurs à zéro, un est inférieur à zéro, n'est-ce pas ? Donc c'est tout à fait normal. Maintenant, si j'en retire le négatif , d'accord, vous verrez que cela donne des faux ici Et c'est parce que tous les éléments ne sont pas inférieurs à zéro. Donc, pour être vraie ici, je vais devoir toutes les rendre négatives. Et si j'économise, tu seras honnête parce que maintenant tous les éléments sont négatifs ici, d'accord ? Vous pouvez donc effectuer ce type de vérification à l'aide de tous. Tu as un concat. C'est bon. C'est donc une autre chose intéressante, d'accord ? Si vous souhaitez combiner deux tableaux en un seul, vous pouvez l'utiliser Disons que j'ai plus de chiffres ici. OK. Il y a plus de six, sept et huit ici, non ? Donc ce que je peux faire, c'est dire chiffres ou me laisser dire d'accord, des chiffres, je vais dire que les chiffres sont concats ici et je peux dire plus de chiffres, non Et je peux l'attribuer à un nouveau tableau, non ? Je peux donc dire let new array, quelque chose comme ça. Je vais imprimer dans un nouveau tableau. OK. Je dirais connexion à la console ici, et je dirais nouveau tableau. Je vais enregistrer ceci et vous pourrez voir, un, deux, trois, quatre, cinq, six, 79. C'est bon. Je peux également en ajouter huit ici. Je ne sais pas pourquoi je l'ai raté. Alors oui, tu l'as, non ? Donc oui, c'est concat. Il va se concentrer sur deux tableaux, trancher. Slice renverra donc une partie d'un tableau, d'accord. Laisse-moi te montrer ça. Je peux donc vous dire laisser les tranches engourdies par ici. OK. Et je peux dire des chiffres ici. Euh, numbers, tot, slice, et je peux spécifier ici que je veux l'index de début de l' index un indexe les trois parties du tableau. OK. Maintenant, je peux les enregistrer, les enregistrer ici pour pouvoir dire slice numb. Vous pouvez en voir deux et trois. OK ? Donc deux et trois par ici. Vous ne faites donc que découper le tableau. OK. Épisser maintenant, qu'est-ce que le tranchage ? Cela vous aidera à retirer ou à remplacer les éléments. OK. Maintenant, comment est-ce que cela fonctionne ? Alors laisse-moi te montrer ça. Disons donc que j'ai des fruits. Très bien, alors laissez-moi faire défiler la page vers le bas. Je peux donc dire « laissons les fruits ici ». OK, je peux dire Apple. Je peux avoir des bananes, oups bananes OK, et disons orange. OK. OK. C'est fait. Et disons que je veux, je veux retirer la banane et ajouter de la mangue. Donc je dirais fruits, tot, épissure. OK. Je dirais à un index. OK ? Je spécifie donc à un index, supprimez-en un. OK. Vous pouvez voir le nombre de suppressions. Donc, en commençant un index, supprimez un élément et ajoutez de la mangue. Quelque chose comme ça. OK ? Et puis si vous imprimez des fruits, vous verrez le résultat sous forme de pomme, mangue et d'orange, vous pouvez le voir. Donc oui, c'est comme ça que ça marche. Joignez-vous. Maintenant, que signifie adhérer ? Il est donc parfois nécessaire de joindre et de regrouper tous les éléments d'un tableau dans une chaîne. Vous pouvez donc absolument le faire. Je peux donc dire « laissons porter tous les fruits ». OK, je peux dire « fruits qui adhèrent » et comment est-ce que je veux m'inscrire ? C'est donc un séparateur que je veux ajouter ici. OK. Je vais donc ajouter une virgule Je veux que tous les noms de fruits soient séparés, et je peux dire tous les fruits ici. Vous pouvez voir des pommes, des mangues, des oranges. Quoi que j'ajoute ici, si j'ajoute une exclamation, vous verrez une exclamation être ajoutée pour tous les éléments, Je vais donc rester dans le coma parce que c'est ce qui semble naturel ici, non ? Inverser. Maintenant, l'inverse est assez simple, assez direct. Vous pouvez obtenir l'inverse d' un nombre à l' aide de cette méthode. Je peux donc dire que les chiffres pointent à l'envers. Quelque chose comme ça. OK. Et ici, je peux dire journal des points de la console, et je peux dire numéro inversé. Tu auras 54321. D'accord ? En quelque sorte, bien sûr, comme son nom l'indique, assez facile à identifier et à comprendre. OK ? Vous pouvez trier les éléments dans un tableau, non ? Vous pouvez donc dire « triez-le ». Et vous pouvez dire des chiffres ici, T, trier. OK. Et vous pouvez réellement le spécifier ici. Je vais donc en finir ici. OK. Je n'ajouterai aucune logique, puis nous ajouterons la logique et nous verrons quels sont les problèmes que nous sommes en train de résoudre. OK ? Donc, si vous utilisez le tri de cette façon. OK ? En fait, la fonction que nous avons créée est déjà triée, n'est-ce pas ? Alors permettez-moi de mettre à jour les chiffres ici. OK. Je vais donc mettre à jour les chiffres. Je vais dire trois, un, et j'ajouterai dix ici et deux, par exemple. OK. Et je vais voir ça. Maintenant, vous verrez qu'il n'est pas trié dans l'ordre croissant OK ? Maintenant, c'est parce qu' il s'agit par défaut d'une chaîne de caractères. Donc, cette comparaison, parce que ce qui se passe, c'est que la comparaison se fait sous forme de chaîne. Les chiffres ne sont donc pas triés correctement. Maintenant, pour régler les choses correctement, nous pouvons ajouter deux arguments, en utilisant les fonctions de flèche, utilisant les fonctions de flèche, afin que je puisse dire A et B ici, et je vais utiliser deux arguments, et je vais dire A moins B ici. OK, par ici. Et si je sauvegarde ceci, vous en verrez un, deux, trois et dix. C'est donc réglé ici maintenant. Mais quelle magie cette logique a-t-elle apportée à ce système de tri ici ? OK ? Et comment cela a-t-il fonctionné ? C'est bon. Donc, ce qui s'est passé A et B sont les deux éléments des tableaux qui seront comparés à un moment donné, n'est-ce pas ? Et cette comparaison se fera par méthode de tri ici. OK. Ces deux arguments sont donc passés en premier. OK, deux arguments sont passés dans ces paramètres. Et puis ce qui s' est passé, c'est que A moins B est calculé. Maintenant, si A moins B, disons maintenant si cela fonctionne sur trois et un, non ? A c'est trois et un c'est B. D'accord ? Maintenant, A moins B est égal à deux. Le chiffre est positif. Hein ? Donc B sera trié avant A car si le nombre est positif, cela signifie que B est plus petit que A. Donc B viendra en premier. Si le nombre est négatif, alors ce qui se passera c'est que A sera déplacé avant B, dans ce cas, n'est-ce pas ? Et si le rendement est nul ici, alors les deux seront considérés comme égaux et ils seront traités de la même manière. OK, donc c'est SOT qui s'en occupe ici. Il suffit de le transmettre car avec l'aide du signe moins ici, ils sont traités comme des nombres et non comme des chaînes. C'est bon. Voici donc comment fonctionnera le tri lorsque vous utiliserez le SOT ici. C'est bon. Cela concerne donc les fonctions ou je devrais dire méthodes en JavaScript en ce qui concerne les tableaux, n'est-ce pas ? Et c'est ainsi que vous pouvez en faire usage. Vous pouvez donc voir comment nous avons commencé au départ. Nous avons commencé par les principes de base, comme la façon dont vous pouvez transmettre une référence de fonction ici dans la méthode map. Ensuite, nous l'avons converti en anonyme, puis nous avons converti cet anonyme en carte ici. Désolé, ce n'est pas une carte, les flèches fonctionnent, je dois dire, non ? Et puis nous avons vu toutes les fonctions, toutes les méthodes qui existent avec des tableaux, n'est-ce pas ? Vous pouvez donc voir trier, inverser. Tous ces outils sont utiles à un moment donné lorsque vous programmez et travaillez avec des tableaux pour vous faire gagner beaucoup de temps et également beaucoup de code, en rendant votre code beaucoup plus lisible, mais en vous aidant à faire les choses de manière beaucoup plus concise et lisible. C'est bon. J'espère donc que vous avez pu suivre ce guide étape par étape, et j'espère qu'il vous a été très utile. 9. Projet sous la projection : Créez votre propre convertisseur d'unités: Bien, alors comment allez-vous tous ? Il est donc temps de construire un convertisseur d'unités qui se chargera de chaque tâche de conversion d'une valeur en différentes unités. Il va donc passer d'une unité à l'autre. Si, par exemple, je saisis 100 ici ou si je laisse passer 110. Supposons que je veuille convertir des mètres en pieds, je peux le faire convertir, et vous pouvez voir que 110 mètres, c'est autant de flux. Maintenant, je peux dire 150 ici. Je peux convertir cela de kilogrammes en livres. Vous pouvez voir que c' est maintenant en livres, et je peux même le convertir de Selsius en Fahrenheit Vous pouvez donc voir qu'un 50 degrés Celsius équivaut à 302 degrés Fahrenheit. Il s'agit donc d'un simple convertisseur d'unités et d'une interface assez simple, rien de trop sophistiqué ou de châssis C'est bon. Alors allons-y et développons cela. Je passe donc rapidement au code VS, et nous avons ce fichier HTML, le fichier CSS et le fichier d'index JS dans un dossier. Ces trois fichiers existent dans le même dossier. J'ai ce code HTML ici et je vais commencer à le modifier ici. Le titre de cette page particulière sera « convertisseur d'unités » ici. Je vais juste m'en débarrasser, et j'aurai le même texte de conversion d' unités ici que le tag H one. C'est bon. Maintenant, ce dont j'ai besoin ici, c'est tout d'abord, j'ai besoin d'une contribution. C'est bon. Je vais donc dire entrée à partir de laquelle je vais entrer la valeur que je souhaite convertir. Cette entrée sera un chiffre ici. Le type est un nombre. L'ID est une valeur d'entrée car je dois y faire référence à partir de JavaScript afin de pouvoir obtenir les valeurs d'entrée saisies par l'utilisateur. J'ai besoin d'une carte d'identité ici. Je vais avoir un espace réservé appelé Enter value. Oups, quelque chose comme ça, non ? Et je vais juste fermer ça. La saisie est donc terminée. Maintenant, ce que je dois faire, c'est avoir huit listes déroulantes, et pour cela, je vais utiliser Select ici, et je vais voir ID comme type de conversion ici. Quel type de conversion je souhaite donc faire ? Dans ce cadre, je vais avoir l'option OK. Maintenant, l'option est d'installer des compteurs ici. La valeur, donc je vais avoir de la valeur ici. La valeur est comprise entre M et FT, non ? Je vais donc avoir des valeurs individuelles à cela, que je pourrai utiliser. Donc ici, je vais dire des mètres aux pieds. Cela va être des kilogrammes à des livres, des kilos à des livres. OK, ça va être de KG à LP. C'est bon. Et, euh, alors ça va faire C Celsius. OK. Ce que je veux dire, c'est une hauteur de Celsius à Fahren Quelque chose comme ça. D'accord ? Oups. Donc, oui, j'ai corrigé l'orthographe, et oui, c'est ce que c'est Donc, ce sera C à F ici. OK. C'est chose faite. Nous avons ce convertisseur d'unités, la zone de texte et cette liste déroulante que vous pouvez voir pour la sélection des valeurs, Maintenant, une fois que c'est fait, après sélection et que tout est fait, j'ai besoin d' un modèle ici, non ? Je peux donc dire que l' ID du modèle est converti. D'accord ? Ce sera l'identifiant. Et je peux avoir un texte appelé Convert ici. D'accord ? Il s'agit donc d'un bouton qui s'affiche. Et après cela, je dois également afficher la valeur convertie. Je vais donc avoir un tag P, qui va dire, oups, je vais avoir donc pas besoin d'un identifiant ici, mais je peux simplement dire de le convertir La valeur est o Je vais afficher la valeur dans un intervalle ici. D'accord ? Et je vais avoir zéro au départ, et je peux avoir l'identifiant tel que converti. De la valeur, quelque chose comme ça. OK. Donc c'est fait, vous pouvez le voir, la valeur convertie est zéro. C'est bon. C'est donc tout dans le code HTML. OK. Il n'y a pas grand-chose que nous allons faire dans le code HTML. Assurez-vous simplement que le fichier Ja Script est lié comme ceci et vous pouvez également avoir le fichier CSS lié ici. Je vais donc juste avoir le lien pour le CSS, et je vais le faire en haut. OK. Donc, dans la tête, je vais juste avoir un lien ici. Eh bien, je dirais feuille de style. OK. Et je dirais href, styles point css C'est bon. C'est chose faite. Ok, ouais, ça y est. C'est donc cela, extrait de la partie HTML. Passons maintenant à la partie Jascript, et voyons comment vous pouvez créer un convertisseur Junit en utilisant JavaScript et donner un peu de vie à cette page Web Cette page Web est assez statique pour le moment. Rien ne se passerait si vous finissez la conversion NC des valeurs, n'est-ce pas ? Parce qu'il n'y a pas de vie. Alors, qui va ajouter de la vie ? Jascript, bien sûr Maintenant, la première chose dont j'ai besoin ici ce sont différentes fonctions, non ? Donc, pour ces conversions que je vais faire, j'ai besoin d'un moyen de les faire. Et ce que je peux faire, c'est que pour chaque conversion que je souhaite faire, je vais créer une fonction, n'est-ce pas ? Donc, la première conversion que je fais ici est de mètres en pieds, puis de kilogrammes en livres, de degrés Celsius en degrés Fahrenheit J'ai trois fonctions, c'est vrai, et j'ai besoin d'un écouteur ici qui écoute le clic sur le bouton de Convertir C'est donc quelque chose que nous devons faire. C'est bon. Je ne vais donc pas simplement avoir des fonctions normales. Bien sûr, vous pouvez exécuter des fonctions normales, mais je vais avoir un objet, que je vais appeler Unit converter, et je vais créer les méthodes à l'intérieur de cet objet, n' est-ce pas ? Donc je vais dire M à F T, non ? Et je vais dire fonction ici. OK. Et je vais juste m'en débarrasser ici, le paramètre sera le même s'il s'agit de mètres par pieds, donc le paramètre des paramètres sera en mètres, non ? Et je peux dire « retour ». Je peux dire quelques mètres plus loin. Et comment convertir un mètre en pieds ? Vous devez donc multiplier un mètre par 28084, non ? Il s'agit donc d'une formule standard. Il n'y a rien d'extraordinaire ici. D'accord ? Donc oui, c'est fait. Je comprends que je reçois une erreur, c'est parce que j'ai raté un égal ici. OK. C'est donc chose faite. C'est la première méthode que j'ai M, qui est des mètres aux pieds. Je vais avoir KG to B ici. D'accord ? Ce sera une autre fonction ici, acceptera les kilogrammes parce que nous convertissons les kilogrammes en livres, n'est-ce pas ? Je vais donc dire « retour ». Je vais dire kilos dedans. Et nous allons multiplier cette valeur par 2,2 0462. agit donc d'un multiplicateur standard si vous voulez convertir des kilogrammes en livres, vous pouvez simplement rechercher sur Google comment convertir des kilogrammes en livres et vous trouverez un certain nombre de formules, j'utilise celle-ci. D'accord ? C'est donc un multiplicateur que vous avez C F. Donc c'est pour des degrés Celsius à Fahrenheit ici Je vais ajouter une fonction. Je vais dire Celsius, quelque chose comme ça, puis ici, je vais dire retour. Il existe une formule pour convertir les degrés Celsius en degrés Fahrenit. Je vais le multiplier de force par neuf par cinq ici et je vais dire plus 32, quelque chose comme ça. OK. Ce sont donc toutes les fonctions, je dois dire. Nous avons donc créé des méthodes dans un objet, et, bien sûr, vous pouvez créer ces méthodes à l'extérieur ainsi que des fonctions. raison pour laquelle j'ai créé dans un objet est à des fins de regroupement logique. Maintenant, chaque fois que vous utilisez un programme de script JAW, vous pouvez créer des objets à des fins de regroupement, n'est-ce pas ? Donc, ici, je regroupe ces méthodes, n'est-ce pas ? C'est donc chose faite. Je vais donc commencer à définir le récepteur ici, donc je vais dire le document ici Oups. Cela a été converti en document. OK. Je vais dire point et obtenir l'élément par identifiant ici. D'accord, et je vais dire «   convertissez-vous ». Pourquoi convertir ? Parce que c'est l'identifiant que nous avons défini ici dans le code HTML pour le bouton, n'est-ce pas ? C'est donc à cela que nous devons faire référence si vous faites référence au bouton ici et je dirais au clic ici. D'accord ? Donc, en cliquant dessus, nous devons utiliser les fonctions de flèche, et je vais avoir la logique de ce qui se passe au clic. D'accord ? Désormais, la logique peut être aussi simple que l'affichage d'une alerte. D'accord ? Si je sauvegarde ceci et si je dis convertir, d'accord ? Aucune boîte d'alerte ne s'affiche. Cela ne fonctionne donc pas car ici, le C pour clic ne peut pas être en majuscules. Elle doit être petite. C'est un petit mot. D'accord ? Tout se fait en un clic. Maintenant, si je change cela, cela fonctionnera. Tu peux voir. Maintenant, nous devons avoir la logique ici. OK ? Cela se déclenche donc en cliquant sur le bouton. OK. Quelle est donc la logique ? Comment définirons-nous la logique ? Donc, tout d'abord, nous devons voir quelle option est sélectionnée parmi celles-ci. OK. Donc, dans cette liste déroulante, quelle option est sélectionnée, n'est-ce pas ? Ensuite, une fois que nous l' avons également, nous devons obtenir la valeur du texte d'entrée ici car c' est une valeur que nous allons convertir. Donc, la valeur du texte d'entrée et l'option dans le menu déroulant. Nous avons besoin de ces deux choses pour arriver ici. OK. Je vais donc dire « laissez la valeur d'entrée ici », et je peux dire « point du document ». Je peux dire obtenir l'élément par identifiant ici. OK. Et je dirais valeur d'entrée. OK. Qu'est-ce que la valeur d'entrée ? La valeur d'entrée est l'ID que vous avez attribué ici. C'est ce que nous obtenons ici. D'accord ? C'est fait, et nous dirons la valeur du point ici. OK. Nous l'avons ici. Maintenant, ce serait dans une chaîne par défaut, non ? Vous devez vous en servir pour le calcul, n'est-ce pas ? Parce que vous allez transmettre cette valeur à cette fonction. Donc, ce que nous pouvons faire, c'est faire une conversion explicite ici. Nous pouvons dire « pass float » et oups, vous pouvez venir ici et ici, vous pouvez ceci, quelque chose comme ça, non ? Nous avons donc une valeur flottante de tout ce que l'utilisateur a saisi dans le TextFX C'est bon, c'est fait. Maintenant, je peux dire « laissons la conversion ». Tapez ici. Quel est le type de conversion ? Quel type de conversion souhaitez-vous faire ici ? Je peux donc dire que le document ne reçoit pas l'élément par identifiant. Et je vais parler du type de conversion. OK. Maintenant, ce que je recommande est ici, vous devriez le copier. Vous pouvez donc voir ici que c'est l'identifiant. Vous pouvez copier cet identifiant et l'ajouter ici. OK, plutôt que de taper. Parce que s'il y a une seule erreur, vous n'obtiendrez pas la valeur correcte. Et je peux dire valeur ici, non ? Et ensuite, une fois que nous l'aurons, je pourrai l'afficher en alerte. Je peux dire valeur d'entrée, virgule, je peux dire type Cosion. Quelque chose comme ça. Vous pouvez voir NN, je peux entrer 100. Vous en voyez 100 ici, permettez-moi de réunir ces deux-là. Je peux donc dire quelque chose comme ça. OK. Donc, si vous en ajoutez 200, vous verrez 200 mètres aux pieds, n'est-ce pas ? Si je passe des kilogrammes aux livres, vous verrez KG à LB, n'est-ce pas ? Parce que tu en as la valeur. Par ici. Quelle en est la valeur ? La valeur est quelque chose que vous avez défini ici par rapport à l'option. Chaque option a une valeur et vous faites référence à la valeur ici en HTML. Vous pouvez voir Celsis à Fahrenit C F. Donc, vous obtenez tout parfaitement, même si vous entrez, disons, si je saisis une valeur à virgule flottante, vous obtiendrez cette valeur complète ici vous obtiendrez cette valeur complète D'accord ? Jusqu'à présent, tout va bien, nous sommes donc en mesure de récupérer tout ce que l'utilisateur saisit dans ce que nous appelons le formulaire ici, n'est-ce pas ? Maintenant, ce que je vais faire, c'est que je peux ajouter une variable ici. Je peux donc dire convertissez-le. Valeur. Alors, par quoi est convertie la valeur ? D'accord ? Je peux donc dire valeur convertie. D'accord, et la valeur convertie est égale à, donc je peux utiliser le type de conversion ici. Maintenant, je vais avoir une condition si le type de conversion est égal à M deux FT. D'accord ? Si le type de conversion est égal à M en FT, je dirais convertisseur d'unités en FT parce qu'il s'agit d'une fonction ou du nom de la méthode, je dois dire que je transmettrai la valeur d'entrée. OK. Sinon, ce que je ferais est ici. OK, sinon, j'aurais une autre vérification ici. Je dirais que le type de conversion est égal à. Je vais dire KG à LP. Assurez-vous simplement d'avoir correctement ces mots clés. Si vous le souhaitez, vous pouvez le copier depuis le fichier HTML. Mais toute faute de frappe entraînera une erreur de condition. D'accord ? Vous pouvez donc dire étiquette de convertisseur d'unités, vous pouvez dire KG en LB ici et vous pouvez transmettre la valeur d'entrée. Quelque chose comme ça. C'est chose faite. Je vais envoyer un colon ici. Maintenant, si les deux sont faux, s'il n'y a pas de correspondance pour les deux, je vais apprendre le convertisseur d'unités en C F parce que c'est ce qui reste, n'est-ce pas ? Il doit donc être sélectionné de manière distincte. Cette formule est donc terminée. Cette condition est terminée. Ce que nous faisons ici, c'est vérifier ici si le type de conversion est un compteur adapté. Si c'est vrai, à l'aide d'un opérateur ternaire, nous effectuons cet appel ici, cet appel de méthode Si ce n'est pas le cas, nous avons un autre opérateur ternaire ici Lequel est imbriqué. Nous allons donc faire un autre contrôle. Si c'est vrai, si c'est vrai, alors c'est exécuté, sinon, c'est exécuté parce que c' est ce qui reste, n'est-ce pas ? Donc ça doit être l'un ou l'autre de ces trois, non ? Maintenant, ce que je vais faire c'est dire document, point, obtenir l'élément par identifiant, et ici, je vais dire valeur convertie. D'accord ? Pourquoi convertir une valeur ? Parce que nous avons cet identifiant pour Span. Nous allons donc obtenir cette valeur convertie. D'accord ? Je vais parler du contenu en texte à points. Quelque chose comme ça. Je vais dire valeur convertie ici. OK ? Parce que c'est une variable qui a cette valeur créée, n'est-ce pas ? C'est donc chose faite. Maintenant, ce que je peux faire, c'est enregistrer ceci et nous laisser le tester. Donc, si je dis 100 mètres en pieds, convertissez-vous, vous pouvez voir. Il y a le rendement en kilogrammes en livres. Voilà le résultat. Si vous avez des degrés Celsius à Fahrenheit, voici le résultat. Tu peux voir. Maintenant, une amélioration que vous pouvez faire est qu'il y a trois décimales ou qu'il y aura certain nombre de décimales car il n'y a aucune restriction Vous pouvez donc ajouter tot à fixed ici et vous pouvez dire ici, quelque chose comme ça. Alors maintenant, il sera fixé à deux décimales ici, 220,46 OK ? Quelque chose comme ça, par ici. C'est bon. Donc oui, il s' agit de la façon dont vous pouvez créer une devise ou, désolé, pas une devise. Ce convertisseur d'unités. Je suis désolée. C'est bon. Vous pouvez avoir une certaine validation ici afin de pouvoir dire si ce n'est pas égal à un nombre. OK. Désolé, c'est AN. Ensuite, je dois transmettre la valeur d'entrée ici, puis vous exécuterez ceci, o. Ensuite, vous exécuterez ceci, vous déplacerez cette dernière phrase à la fin ici , quelque chose comme ceci. OK. Et je vais ajouter ceci ici. OK, c'est fait. Et si cette condition échoue, vous pouvez afficher une alerte. OK, veuillez saisir un numéro valide. Donc, une petite validation ici, contrôle de validation qui garantira que le numéro saisi par l'utilisateur ici est valide. OK ? C'est ce que fera cette vérification. OK. Donc disons que si j' entre 100 ici, ça marchera bien. Mais si j'ai saisi 100 ou autre chose ici, je ne peux rien taper ici car ce type est un nombre. Mais j'ai quand même ajouté cette vérification ici. Si par hasard, il ne s'agit pas d'un nombre, il s'agit d'une condition Nian, elle renvoie donc une valeur booléenne qui indique si la valeur est une valeur réservée Nian, et non un Si c'est un, qui n' est pas égal à, donc si cette condition est vraie, alors seule celle-ci sera exécutée, sinon vous obtiendrez une erreur. Ici, c'est une alerte. C'est bon. C'est donc fait jusqu'à présent. Maintenant, nous allons passer aux styles ici. Nous allons ajouter un style de base et nous allons lui donner une apparence décente ici. OK. Je vais donc commencer par Body, ici. Tout de suite, je dirais famille de polices. Je vais sélectionner Sinef ici. OK. Quelque chose comme ça. Et puis j'ai du texte aligné ici. Je dirais le centre. Je dirais marge, la marge sera nulle. Laissez-moi voir si c'est le cas. Vous pouvez voir que tout est centré maintenant. La marge est également égale à zéro rembourrage, je dirais 20 pixels ici Je dirais que la couleur de fond est que je peux avoir cette Alice bleue. Tu peux sélectionner ce que tu veux, d'accord ? J'ai un petit thème bleuté. Si vous voulez du blanc, vous pouvez sélectionner de la fumée blanche. Cela dépend totalement de votre choix, n'est-ce pas ? Vous pouvez sélectionner ce que vous voulez ici. OK. C'est chose faite. Je vais ajouter un espace. Maintenant, après le corps, je vais passer à H one. H one est l'endroit où nous affichons cette unité pour convertir un titre ici. Donc je vais dire couleur, et je peux avoir du noir. Je devrais avoir du noir ici. Je vais juste m'en tenir au noir. Vous pouvez le personnaliser si vous le souhaitez, d'accord. Maintenant, pour la saisie, entrez où le type est un nombre, d'accord. Donc, d'accord et je vais ajouter une virgule pour sélectionner ici OK. Pour les deux , je dois ajouter, disons, du rembourrage OK. Il n'y a donc pas de rembourrage Donc, si vous entrez 100 ici, il n'y a pas de rembourrage, donc je dirais rembourrage, deux points sur dix pixels OK. Vous pouvez voir une bonne quantité de rembourrage, vous pouvez ajouter de la marge ici OK, marge de dix pixels. OK, vous pouvez voir un peu d'espacement maintenant. OK. Et vous pouvez dire «   frontière » par ici. La bordure est donc d'un pixel, solide, et je peux dire HTd. Donc, ce code couleur que j'utilise pour la bordure, vous pouvez le voir, il est en quelque sorte grisé OK. Et je peux parler de rayon frontalier. Je vais donc juste lui donner une impression ronde. OK, donc je vais juste ajouter cinq pixels. Les bordures seront donc maintenant légèrement arrondies, légèrement arrondies de cinq pixels. Désolé, légèrement arrondi de cinq pixels par ici. Je suis désolée OK, c'est fait. Largeur, j' ajouterai que les largeurs peuvent être de 200 pixels ici OK. Donc c'est fait pour les deux, d'accord ? Pour le bouton. OK, le bouton a l'air brut en ce moment. Alors laissez-moi faire quelque chose pour le bouton ici. Oups. Pour le bouton, je dirais d'abord un rembourrage, un rembourrage de dix pixels et 20 pixels. OK. Ensuite, je peux avoir des cerceaux de couleur d' arrière-plan. Il doit donc s'agir d'un point-virgule, couleur d'arrière-plan. OK. La couleur de fond peut être, je dirais, le bleu. Je vais voir si c'est bleu, mais les bordures sont mauvaises. OK, je dois dire. J'aurai peut-être Border comme nonne. Voir si oui. Boda est nonne Je peux dire que la couleur est blanche. Blanc là où c'est blanc ici, vous pouvez voir convertir le blanc. Vous pouvez avoir un rayon de bordure, un rayon de bordure, je peux dire fi pixel parce que je l'ai donné pour les autres éléments. OK. Maintenant, curso, si vous passez la souris dessus, je veux que cela change, donc je peux dire pointeur de curseur Alors maintenant, si je passe par ici, vous pouvez voir le curseur tourner pour le pointeur. OK. C'est chose faite. Je peux également ajouter un effet de survol. Donc, bouton, deux points, je peux dire *** et je peux dire couleur de fond. Et je peux avoir du bleu foncé. Donc, si vous passez la souris dessus, vous verrez du bleu foncé. Une sorte d'effet, non ? Maintenant c'est fait, et nous pouvons avoir un style pour l'affichage, qui est pour les balises P. Cela peut être la taille de la police. Je vais simplement augmenter la taille de police à 18. Je vais juste le changer à 18 et j'aurai une marge de dix pixels, disons. Si vous sauvegardez ceci, vous l'avez. OK. Maintenant, je zoome un peu. D'accord ? Je zoome donc un peu. Vous pouvez voir ici pour que les étudiants puissent le voir correctement, mais vous pouvez voir le résultat ici. OK, donc ça a l'air plutôt décent maintenant. J'ai également ouvert l'application en mode plein écran, afin que vous ayez une meilleure vue. OK, 2 200 et vous pouvez voir les conversions ici, non ? Cela fonctionnera donc bien. OK ? Ça a l'air plutôt décent. Vous pouvez personnaliser le CSS en fonction de vos besoins. Vous pouvez modifier la couleur en fonction de vos préférences de couleur. D'accord ? Il s'agit donc de l' unité Coto utilisant le script jaw J'espère que c'était super amusant. 10. Présentation du projet : créer une appli dynamique de to-do list avec Javascript: Bien, il est donc temps que nous parlions d'une application de liste de tâches utilisant JAScript, HTML et CSS Vous pouvez donc voir ici cette application que nous allons créer, et vous pouvez voir qu' il y en a une à faire déjà été ajoutée aux fonctions learn Ja Script. C'est bon. Je peux ajouter d'autres todos à partir de cette zone de saisie ici. Je peux dire, apprenez Spring Boot, et je peux dire ajouter une tâche. Je peux apporter des courses. OK. Quelque chose comme ça. Et vous pouvez ajouter les tâches. Vous pouvez les percer, et vous pouvez également les marquer comme terminés. Très bien, il s'agit donc d'une application simple que nous allons créer. Nous allons utiliser JavaScript, HTML et CSS. accord ? Excités, allons-y directement. Je suis donc dans le code Visual Studio, qui est l'éditeur que je vais utiliser. J'ai également ce navigateur ouvert sur le côté avec Live Server. J'ai trois fichiers : point d'index ouvert, style HTML , point css et point d'index Gs. Maintenant, avant de continuer, assurez-vous que ces trois fichiers se trouvent dans le même dossier. C'est bon. Je vais maintenant commencer par le fichier HTML. Je vais d'abord ajouter une exclamation. Oups. Je suis en fait dans un fichier JavaScript, donc je vais passer au fichier HTML. J'ajouterai une exclamation, et je trouverai un code standard ici. D'accord. Donc, ici, je peux donner le titre du document sous forme d' application de liste de tâches, d'accord ? Quelque chose comme ça. C'est bon. Et vous pouvez même avoir un tag E H ici comme titre. OK ? Je peux donc dire « H one ». Et vous pouvez dire de faire la liste ici. OK, quelque chose comme ça. C'est bon. Maintenant, nous allons avoir besoin de deux choses ici. L'un est l'entrée et l'autre est ePaton, d'accord ? Je vais donc d'abord créer un div, et je vais avoir une entrée ici comme celle-ci. Je vais appeler ça comme oups, désolé, tapez sous forme de texte ici. OK. ID est l'ID saisi par la tâche. Je dois lui attribuer un ID car je ferai référence à cet élément directement script Ja afin de pouvoir obtenir ce que l'utilisateur a réellement saisi ici. Je vais vous dire d'entrer votre tâche, quelque chose comme ça. C'est bon. Maintenant, sur la ligne suivante après la saisie, je vais avoir un bouton ici, non ? Donc, le bouton indiquera ID, et je l'appellerai ajouter une tâche ici, quelque chose comme ça. Et puis ce sera ajouter une tâche, quelque chose comme OK. C'est fait, puis je pense que tout va bien ici. OK. Laisse-moi voir. Nous ne voyons aucune sorte de résultat ici. Je vois donc le résultat maintenant après l'actualisation, d'accord. Et oui, il s'agit donc de la saisie et du bouton, nous allons garder le HTML très simple. OK, j'ai un bouton de saisie, et je vais créer une liste non ordonnée ici, qui sera utilisée pour afficher la liste des tâches. OK. Je vais donc appeler cela liste de tâches, quelque chose comme ça. OK ? Ici, script sous la balise script, je vais avoir SRC, et je vais l' appeler car je vais le lier à Index G ici Et en haut, je peux avoir une feuille de style ici, donc je peux dire lien, RL, je dirais feuille de style. OK. Et je vais fermer ça. Je mentionnerai également la balise F, et je dirai que les styles pointent sur le CSS. Jusqu'ici, tout va bien. OK, le HTML est donc terminé. Nous avons fait en sorte que les choses soient vraiment très simples. Vous pouvez voir que c'est le conteneur ici, qui contient le type d'entrée et le bouton. OK ? Je peux lui attribuer un identifiant ici afin que nous puissions l' utiliser plus tard pour le style. Je peux dire conteneur de tâches ici. D'accord. Voici donc le contenu de la tâche ici où j'ai une entrée et un bouton C'est là que toute l'action se passe. Et puis j'ai une liste non ordonnée où j' affiche la liste des éléments ou la liste des tâches à faire. C'est chose faite. Je vais maintenant passer à Index GS. D'accord ? Il s'agit d'un fichier JavaScript dans lequel nous allons écrire du code qui nous aidera à donner un peu de vie à ce code HTML. OK, donc ça ne fait littéralement rien pour le moment, d'accord ? Donc, tout d'abord, nous aurons besoin d' un moyen de stocker et de gérer notre liste de choses à faire, n'est-ce pas ? Et nous aurons également besoin d'un moyen, essentiellement d' écouter cet événement. Ainsi, chaque fois que l'utilisateur clique sur une tâche, nous devons nous assurer que la tâche est ajoutée à l'application. Une fois la tâche ajoutée dans l'application, nous devrons également la rendre. D'accord. Donc, des choses comme le rendu, l' ajout d'une tâche, d'accord , le marquage de la tâche comme terminée, tout cela sera géré dans l' application elle-même. Donc, ce que nous allons faire, c'est avoir un objet, d'accord ? Je vais donc commencer par créer un objet. Je vais dire de faire une application ici. D'accord. Et voici comment je vais le créer. Maintenant, je vais avoir un tableau, car l'application peut avoir plusieurs tâches, n'est-ce pas ? Je vais donc avoir un tableau, qui sera utilisé pour stocker les tâches ici. Maintenant, je vais vous présenter quelques méthodes ici. L'un d'eux est à la tâche, d'accord ? C'est donc la première méthode ici. D'accord. Ensuite, je vais avoir une autre méthode, qui est la tâche de basculement Cela va être utilisé pour basculer. Donc, si vous dites que cette tâche est terminée, si vous cliquez sur la tâche, elle sera marquée comme terminée. Si vous cliquez à nouveau, cliquez dessus, il sera marqué comme non dix. D'accord ? Il s'agit donc essentiellement de basculer ici. Et ici, cette fonction ou cette méthode va accepter l'index ici. C'est chose faite. Je vais devoir supprimer les tâches terminées, d'accord ? C'est donc aussi ce que nous pouvons avoir , je peux dire, supprimer les tâches terminées. D'accord. Et, euh, je vais prendre ça. D'accord. Cela va donc nous aider à supprimer les tâches terminées, d'accord ? Et je vais avoir une méthode pour le rendu des tâches ici. D'accord ? Je vais donc parler de tâches de rendu, quelque chose comme ça, et ici, ce sera comme ça. C'est bon. C'est donc chose faite. D'accord ? Voici comment sera l'objet. Cet objet aura l'attribut de tâche pour stocker la tâche, et toutes les méthodes permettant essentiellement de gérer les tâches, n'est-ce pas ? Maintenant, ce que je vais faire, c'est dire « document ici », en pensant « Oups, document tot Je vais dire obtenir un élément par identifiant ici, et je vais dire à la tâche ici. Quelle est la tâche à accomplir ? À la tâche se trouve le bouton ici. D'accord ? Vous pouvez voir qu'il s'agit d'un bouton. Nous avons donc le bouton, et sur le bouton, je vais dire de cliquer ici. D'accord. Je vais utiliser les fonctions de flèche, comme ça. Et ici, je vais avoir la logique de ce qui est censé se passer lorsqu'un utilisateur clique sur la tâche ici. OK, sur le bouton, je veux dire, d'accord ? Donc ici, tout d'abord, je peux afficher une alerte. Je peux juste tester si cet écouteur fonctionne correctement. Cela devrait. Donc, si je dis ajouter, OK, ça ne s'affiche pas, c'est parce que c'est du capital. J'en suis désolée. OK. Donc, vous pouvez voir ici, bonjour. OK, ça marche bien. Cela se déclenche donc en cliquant sur le bouton. Jusqu'ici, tout va bien. Maintenant, quelles sont les tâches que nous devons accomplir au sein de cet auditeur Tout d'abord, nous devons obtenir ce qui est saisi dans cette tâche. Comment allons-nous l'obtenir ? C'est ce que nous obtiendrons à partir de cette entrée. Nous avons saisi cette tâche d'identification, n'est-ce pas ? Ensuite, une fois que nous aurons le texte saisi ici, nous allons appeler à la tâche et ajouter cette tâche au nous allons appeler à la tâche et tableau des tâches, n'est-ce pas ? Ensuite, nous allons réinitialiser cette zone de saisie une chaîne vide car elle est effacée parce que la tâche est ajoutée, n'est-ce pas ? Donc, ce que je vais faire, c'est dire de laisser la saisie des tâches ici. D'accord, je vais dire point du document, obtenir l'élément par identifiant. Et laissez-moi vous renseigner sur les tâches ici. D'accord ? Je vais donc parler de saisie de tâches. Assurez-vous d'avoir cette référence d'identification. Cette référence d'ID doit être identique celle que vous avez définie ici dans le code HTML. C'est bon. C'est donc chose faite. C'est en train de prendre soin de vous ici. D'accord. Maintenant, ce que je dois faire ici, c'est bon, c'est fait. Je vais venir ici. Je vais dire de faire un point d'application par tâche, et je vais dire saisie de tâche, point, valeur. D'accord. Donc, ce que je fais, c'est dire saisie de tâches. C'est donc l' élément que j'ai obtenu, et je parle de valeur en points. Ouais D'accord. Ensuite, je dois réinitialiser ce champ ici, pas vrai ? Je vais donc ajouter une chaîne vide, quelque chose comme ça. Cela va effacer le champ de saisie, non ? Je peux donc dire test à la tâche. Vous pouvez voir qu'il est en train d'être effacé, mais qu'il n'est pas ajouté pour le moment. Pourquoi ? Parce que cette fonction ou cette méthode n'a littéralement rien. C'est une méthode vide de sens. OK ? Nous devons définir tout cela. Nous n'avons pas encore défini tout cela. C'est bon. Alors maintenant, ce que je vais faire, c'est commencer par les mauvais traitements ici. D'accord. S'il y a une tâche, ou je peux le faire si vous voulez la valider, vous pouvez ajouter une vérification ici dans laquelle vous vérifiez si la tâche existe. Ou ce que vous pouvez faire, c'est que vous pouvez immédiatement dire cette tâche par points, désolée, cette tâche par points est poussée ici. Nous devons donc déplacer ou ajouter cette tâche particulière à cette tâche ici. D'accord ? Et là, je vais dire texto, Colin OK, donc c'est la tâche, et je dirais terminée. Est-ce terminé ? Je dirais qu'il tombe. D'accord ? Quelque chose comme ça. OK. Et une fois que c'est fait, je dois appeler render. Donc, ce rendu par points. Quelque chose comme ça. Que l'interface utilisateur ait besoin d'être actualisée, la bonne interface utilisateur une fois la tâche ajoutée, la liste des tâches devrait être actualisée, et c'est pourquoi j'appelle ce rendu par points ici. OK, c'est fait. Donc, en gros, demander à chaque tâche individuelle de ce tableau a deux choses. Le premier est la tâche elle-même et savoir si la tâche est marquée comme terminée ou non. Jusqu'ici, tout va bien. Nous devons maintenant basculer entre les tâches. D'accord ? Donc, ce que nous allons faire, c'est dire ce point tâches. Je vais obtenir la tâche à partir de l' index ici parce que nous avons accès à l'index. Je dirais que ce n'est pas terminé. D'accord. Ce sera donc l'inverse de savoir si c'est terminé ou non. Je vais dire ce point tâches, et je dirais index ici, valeur terminée par point. J'inverse juste cette valeur ici. Ainsi, quelle que soit la valeur stockée dans l'attribut terminé de cette tâche particulière, elle est inversée et attribuée à nouveau. C'est ce qui se passe. C'est ça. Maintenant, après avoir effectué cette modification, je dois afficher l' interface, n'est-ce pas ? Alors, affichez l'interface utilisateur ici. Je vais dire que ce point rend des tâches. Quelque chose comme ça. C'est chose faite. Je dois supprimer les tâches terminées. D'accord. Donc, ce que je ferais, c'est dire, afin que nous puissions utiliser un filtre ici, n'est-ce pas ? Vous pouvez donc dire cela aux tâches ici. D'accord ? Et vous pouvez dire tâches par points , filtrer ici, et je dirai tâche ici, utiliser la fonction flèche, et je dirai si la tâche est terminée. Quelque chose comme ça. OK. Donc, quelle que soit la tâche terminée, elle sera supprimée et je dirais ce point Render les tâches, quelque chose comme ça. D'accord. Maintenant, comment rendriez-vous la tâche, n'est-ce pas ? Donc, pour cela, nous devons afficher la tâche ici dans la liste des tâches, n'est-ce pas ? Donc, ce que je ferais, c'est simplement le copier pour gagner du temps. D'accord. Et ici, je dirais liste de tâches. D'accord. Et l'identifiant ici est une liste de tâches, non ? Je vais donc ajouter une liste de tâches ici. OK. La liste des tâches est ajoutée. Maintenant, ce que nous devons faire, c'est OK. Donc voilà, je vais vraiment effacer la liste actuelle. D'accord ? Tout d'abord, nous devons effacer la liste actuelle. Je vais te dire pourquoi je fais ça, d'accord ? Ce sera clair pour vous dans peu de temps. Le HTML est égal. J'efface donc d'abord la liste actuelle parce que nous sommes en train de réafficher la tâche, n'est-ce pas ? Donc, si vous n'effacez pas le code HTML interne, si vous n'effacez pas la liste des tâches en cours, la liste sera dupliquée, n'est-ce J'espère que cela a du sens. Maintenant, ce que nous devons faire, c'est dire que ce point correspond à chacun d'entre eux ici. OK. Et dans ce cadre, je vais avoir une fonction, et je vais dire index des tâches. Donc, la tâche et l'index ici sont quelque chose qui va être transmis. D'accord. Et je vais avoir la fonction flèche. D'accord. Et dans ce cadre, je vais dire const Li Okay. Et je vais dire « document point get element by ID ». Désolé, je ne vais pas obtenir les éléments par identifiant car nous n'avons pas créé LI. Donc, au sein d'UL, vous aurez des éléments LI, n'est-ce pas ? Je vais donc dire créer un élément ici. Je dirais de créer Li ici. D'accord, car vous voulez le rendre sous forme de liste. Et puis je dirai Litt text content. Ensuite, je vais écrire le texte du point de tâche ici. D'accord. Et puis je dirais que je ne clique pas ici. D'accord, nous devons également ajouter un clic à la liste ici parce qu'en cliquant dessus , la tâche bascule, donc je vais dire cette tâche à bascule, et je vais transmettre l'index du clic ici C'est chose faite. OK. Maintenant, je vais dire que si la tâche est terminée, nous serons là. D'accord. Ensuite, vous pouvez ajouter la liste des classes I'll i point. J'ajoute donc la classe ici. OK, n'en ajoutez pas. Je dirais terminé. J'ajoute une classe à cet élément HTML si la tâche est marquée comme terminée. D'accord ? Vous ajoutez donc ici une classe comme classe ID pour le CSS. C'est ce que j'ajoute ici à partir du Javascript. Vous pouvez donc dire element point class list. Vous êtes en train de l'ajouter à la liste des classes, c'est terminé. Et puis nous pouvons avoir du CSS contre cela. Cela a du sens. Et puis ici, vous pouvez dire « liste des tâches », tot up » et « enfant ». Quelque chose comme ça. Je vais l' ajouter à l'interface utilisateur. OK. Laissez-nous le tester. Je dirais test. Vous pouvez voir que le test est rendu à 100. Ceci est également en cours de rendu. D'accord. Cela est donc rendu deux fois ici. Il y a que cela a été rendu deux fois. Il y a donc un problème. OK ? Le problème est donc que le code HTML n' est pas effacé ici. D'accord ? J'espère donc que vous comprenez l'importance de cette déclaration ici maintenant. Cela ne fonctionne pas réellement. Et vous pouvez voir que la liste complète est à nouveau rendue. Donc, si j'ajoute 200 ici, vous pouvez voir le test, 100, 200. Il refait le rendu de tout. OK, chaque fois que vous ajoutez la tâche. Ce ne sera donc pas ça.in HTML. Ce sera taskls point HTML. Si je sauvegarde ceci, je peux dire test. C'est un test supplémentaire. Si je vois 100, cela ajoutera 100. Vous pouvez voir que cela fonctionne bien maintenant. C'est bon. Maintenant, les tâches sont également marquées comme terminées, mais la tâche d'achèvement que vous devrez gérer en CSS , car une classe est en cours d'ajout, allez ici. Si vous regardez le cours, d'accord, laissez-moi vous montrer. Vous voyez donc le Li ici. C'est 100, non ? En fait, cliquez sur ce 100. D'accord. La classe n'est pas encore ajoutée ici. OK ? Il devrait être ajouté. Donc, en fait, en cliquant dessus, completed doit être ajouté dynamiquement en tant que nom de classe ici. Mais ce n'est pas le cas. Voyons quel est le problème. Au clic, nous constatons que les tâches changent, et pour chaque tâche terminée, la liste des classes doit être ajoutée Ça va. OK, ici, je vois que c'est un C majuscule. Ce n' est pas correct. Cela devrait être petit. D'accord. Voyons maintenant ce qui se passe. Il n'y a donc aucune tâche ici. Permettez-moi d'ajouter une tâche. Je vais ajouter un test. OK. J'ai une mission. Si je clique dessus, vous pouvez voir que le cours est terminé pour cela. Tu peux voir. Maintenant, si vous ajoutez n'importe quel CSS pour la classe terminée, vous pouvez ajouter le CSS de strike through. Cela apparaîtra donc comme barré, parce que vous avez appliqué ce CSS. Il vous suffit de dire classe pour les éléments, une fois la classe terminée. D'accord, vous devez ajouter ce type d' effet complet dans le CSS. Très bien, donc ça va être géré. D'accord ? La candidature est donc presque terminée, d'accord ? Nous en avons terminé avec la demande. Vous pouvez voir que tout est fait. Toutes les fonctionnalités fonctionnent correctement. D'accord. Nous allons maintenant passer au CSS, et nous allons ajouter un style de base à notre application. C'est bon. Nous allons maintenant commencer par le body tag ici. D'accord ? Bien sûr, la famille de polices, et nous verrons Ariel Helveta, Albatica Si c'est bon, d'accord, texte ou ligne. Je vais dire Cena ici. Je vais ajouter Oops, pas la résolution maximale, mais la marge ici Je vais dire zéro. OK. Et permettez-moi d'ajouter du rembourrage Je dirais 20 pixels. OK. Laissez-moi voir et voir ce qui se passe. OK, un peu de changement. Oh, vous pouvez ajouter une couleur de fond ou ce que vous voulez. J'ajouterai que c'est du bleu. D'accord. Ça a l'air un peu bleuté. Si tu veux autre chose, euh, comme ici. Voir. Du blanc si antique. Vous pouvez également l'ajouter. D'accord. Tout dépend de votre choix, de ce que vous souhaitez. Ou écran, je vais laisser l'affichage fléchir ici. D'accord. La direction du flex est, je dirais, colonne. D'accord. Et puis alignez les éléments, je dirais au centre. Je vais enregistrer ça. D'accord. C'est fait. Chacun. D'accord. Donc, à chacun, je vais simplement lui attribuer une couleur de manière explicite. J'appellerai cette couleur le noir. D'accord. C'est fait. C'est bon. Maintenant, venons-en ici. Je vais voir ça. Si vous venez ici, il existe ce conteneur de tâches. Je vais obtenir cet identifiant de conteneur de tâches ici. D'accord. Je vais dire hash C'est ainsi que vous faites référence à n'importe quel identifiant d'élément en CSS à l'aide du hachage D'accord. Je dirais Display Flex, et nous devons ajouter que nous devons justifier le contenu. Je dirais le centre. D'accord. Cela se présente donc maintenant en une seule ligne, comme vous pouvez le voir ici. Et je dirais marge inférieure. D'accord. Et ce sera 15 pixels. D'accord. Il ne s'agit donc pas en fait d'une vue en plein écran, mais si vous passez à la vue plein écran ici, si j'actualise, vous pouvez voir que c'est ainsi que cela apparaît en ce moment, et je peux simplement ajouter une tâche. Tu peux voir. OK ? Donc oui, c'est à ça que ça ressemble en ce moment, marge inférieure. OK, c'est fait maintenant. Je peux ajouter un peu de style pour la saisie ici. D'accord. Je dirais que le type de texte est égal au texte, quelque chose comme ça, et je dirais ici, en ajoutant dix pixels Regarde si ça va. Je dirais que la largeur ici est de 200 pixels. D'accord. Je dirais frontière. OK, la bordure peut être d'un pixel. OK, il n'y a plus de frontière maintenant, tu peux le voir. D'accord. Maintenant, encore une chose est que je pense que je devrais également l'optimiser pour une taille d'écran plus petite. D'accord. Ce que je vais faire, c'est ajouter une requête multimédia ici, média et dire ici. Ce sera donc une largeur maximale. OK, quelque chose comme ça, et la largeur maximale sera donc de 600 pixels. OK. Je vais donc ajouter un peu de style ici pour la même chose, non ? Je peux donc dire conteneur de tâches hashtag. D'accord. Je dirais la direction flexible. Je vais dire colonne ici pour qu'elle soit alignée verticalement alors que la taille de l' écran est essentiellement plus petite. Donc, la zone de saisie des boutons est alignée verticalement parce qu'elle n'avait pas l'air bien, ou, horizontalement, en gros, vue côte à côte, n'est-ce pas ? Je viens donc d'ajouter ceci. Il est donc aligné horizontalement ici, désolé, aligné verticalement lorsque la taille de l'écran est petite, mais horizontalement comme ça si la taille de l'écran est large. D'accord ? Ainsi, lorsque la taille de l'écran est petite, ce CSS est applicable. D'accord ? Je peux même ajouter du CSS pour cela ici. D'accord. Je vais donc saisir un type de texte. La largeur du texte est un rembourrage dont je n'ai pas besoin Je vais éviter le rembourrage. La largeur est de 100 % ici. Marge par ici. Je dirais donc que la marge est de cinq pixels et zéro. Euh, comme ça. Et je peux dire UL. La liste non ordonnée peut donc être d'une largeur 90 %. Quelque chose comme ça. D'accord. C'est donc chose faite. D'accord ? C'est pour les petits écrans. Je reviendrai ici. OK. Je disais donc une poudre d'un pixel. OK. Je dirais solide ici, et j'aurai cette frontière ici. Ça a l'air bien, pour le moment, tu peux le voir. Ça a l'air bien. OK ? Nous devons ajouter d'autres éléments, comme le rayon. OK, rayon de cinq pixels, par exemple. OK, cinq pixels semblent corrects à mon avis si vous sauvegardez ceci, non ? Et je vais ajouter une marge, donc une marge par ici, disons, une marge de dix pixels. D'accord. C'est fait, je suppose. C'est bon. La saisie est terminée. Nous allons maintenant personnaliser le bouton ici. Alors, comment stylisons-nous le bouton ? D'accord. Donc, sur le bouton, on peut dire, euh, rembourrage, je dirais dix pixels et 15 pixels ici et la couleur de fond est bleue D'accord. Et puis la couleur du blanc. Si vous l'enregistrez, vous pouvez voir. Mais le corps n'est pas beau, donc la bordure n'en désactivera aucun. OK, la frontière a disparu. Je peux avoir le rayon de la frontière ici. OK, F pixel, comme ça. Et puis je peux avoir le pointeur du curseur. Donc, pour le moment, il ne se transforme pas en pointeur. Mais si vous survolez maintenant pour voir, ce curseur devient un pointeur D'accord. Et je peux même ajouter un effet Colin Hov. OK, donc je vais dire couleur de fond. C'est bleu foncé. D'accord ? Donc, si vous survolez, il sera bleu foncé Simple. Maintenant, je vais ajouter un peu de style pour la liste durable. Je vais le copier. OK. Et ici, nous aurons une largeur de 50 %, et je dirais que le type de style de liste est nul ici. OK, donc je ne veux pas que ces points apparaissent. Je dirais donc le type de style de liste, aucun. Cela ne semble pas bon. Je dirais que le rembourrage est nul. D'accord. L'ajustement est de 50 % et la marge est de zéro. Automatique. OK, c'est fait. Et oui, je pense que c'est ça. Il suffit d'ajouter un CSS pour terminer. OK. Je dirais donc terminé. Article par ici. J'ajouterai cette tâche et je cliquerai dessus pour qu' elle soit marquée comme terminée. Très bien, donc je dirais terminé. OK. Je fais donc référence à une classe terminée comme ce point terminé. C'est ainsi que vous faites référence. Je dirais décoration de texte, donc je dois passer à travers, non ? Donc je vais dire ici, faites la queue. C'est le nom de la propriété. OK, donc les deux sont frappés, je suppose que les deux sont marqués comme terminés. Je vais donc dire test. OK, ce n'est pas terminé, et je peux dire qu' il faut le terminer. Tâche d'accord. Voici quelques tâches factices que j'ajoute. Si je clique dessus, vous verrez que c'est terminé. D'accord ? Si je le marque comme terminé, vous verrez que c'est terminé. D'accord ? Cela fonctionne donc bien. Décoration du texte terminée. Je dirais que la couleur est le gris. OK, quelque chose comme ça, ça devrait avoir l'air correct, oui. D'accord. Je suppose que tout va bien maintenant, non ? Je peux en ajouter d'autres. OK, la tâche est donc en train d'être ajoutée. OK. Tu peux voir. Nous pouvons également ajouter un style pour chaque tâche ici. D'accord. Donc, ce que je peux faire ici, c'est qu'après UL ici, je peux ajouter LI. OK. Je peux voir que le style pour chaque tâche pourrait consister à un rembourrage de dix pixels D'accord. Je peux ajouter une bordure ici, bordure d'un pixel, solide, et je pourrais appeler cela de la fumée blanche. Tu peux voir. OK, ça n'a vraiment pas l' air bien. J'ai donc un code couleur, TTT. Je vais ajouter ça. OK ? Mais ça n'a pas l'air bien vu en arrière-plan, si vous y jetez un œil, d'accord ? Donc, ce que je peux faire, c'est faire défiler l'écran vers le haut, et je vais changer cet arrière-plan en hachage. Je peux dire un quatre, un quatre, un quatre, quelque chose comme ça D'accord ? Une sorte de couleur blanche bleutée Ça a l'air correct maintenant. OK. Donc ici, je dois ajouter du rayon. Cela ne me semble pas trop carré, trop carré, non ? Donc, ce que je peux faire, c'est ajouter un rayon de probablement cinq pixels. Voyons voir. OK. Rayon de cinq pixels. Sauvegardez ceci. D'accord. Et puis je peux dire Marge ici. Cinq pixels et zéro ici. Ça a l'air décent maintenant. Tu peux voir. De plus, si je passe la souris dessus, idéalement, je souhaite avoir le pointeur du curseur Je dirais I Cursor. Pointeur. Vous pouvez voir un pointeur entrer, n'est-ce pas ? Donc ça a l'air super maintenant. D'accord ? Au moins décent, je dirais. D'accord. Je vais simplement l'actualiser et vous pouvez également ajouter une tâche par défaut ici si vous le souhaitez. Donc, ici en JavaScript, ce que je peux faire, c'est que je peux ajouter que je peux appeler la méthode. OK, donc je peux dire todo app point at task ici. La tâche par défaut est apprendre le JavaScript. Quelque chose comme ça. OK. Tu peux voir. C'est donc ajouté maintenant. Chaque fois que vous chargez l'application, il s'agit de la tâche par défaut qui est ajoutée. D'accord ? Et vous pouvez ajouter une tâche ou apprendre C Shop , par exemple apprendre Java. OK, vous pouvez les marquer comme terminés. J'espère donc que cela vous sera utile et j'espère que vous avez apprécié de créer cette application Studio avec moi en utilisant, bien sûr, Ja Script, HTML et CSS 11. Conclusion du cours: Et cela nous amène à la fin de ce cours exceptionnel dans lequel nous explorons les possibilités infinies des fonctions Jascript Tout au long de ce cours, nous approfondissons le cœur des fonctions JavaScript, lequel nous explorons toutes les fonctions , des élémentaires aux sujets plus avancés tels que les paramètres, les valeurs de retour, les expressions de fonction et les fonctions de flèche Nous nous sommes même aventurés dans le monde des fonctions sein des méthodes d'objets et de tableaux, ce qui vous a permis de bien comprendre comment écrire du code modulaire et efficace Mais notre voyage ne s'est pas arrêté là. Nous avons également réalisé quelques projets pratiques dans le cadre desquels nous avons mis en toutes les connaissances ou tout ce que nous avons application toutes les connaissances ou tout ce que nous avons acquis au cours de ce cours. Ces projets ont non seulement renforcé votre apprentissage, mais vous ont également permis d'acquérir des connaissances et une compréhension pratiques. Et ces projets sont tels projets que vous pouvez même les utiliser dans votre portefeuille. N'oubliez pas que la maîtrise de toute compétence en programmation n' est qu'un début. La véritable puissance de JavaScript réside dans l'expérimentation et la pratique continues. Je vous encourage à continuer à développer, affiner votre code et à utiliser les choses que vous avez apprises aujourd'hui dans les projets que vous créez. Merci d'avoir été un apprenant engagé et enthousiaste tout au long de ce cours J'espère que vous avez acquis suffisamment confiance en vos compétences en matière de rédaction de postes et que vous êtes impatient de vous attaquer à des projets encore plus ambitieux à l'avenir. Avec ce cours, vous avez un projet de classe que vous trouverez dans la section des projets, que je vous encourage à compléter et à partager avec toute la classe là-bas. C'est donc la fin de notre voyage ensemble, bonne programmation et bonne chance.