Apprendre JavaScript : de techniques de codage débutantes à avancées

1. Intro: Javascript, parlons de JavaScript. Contrairement au HTML et au CSS, qui sont respectivement des langages de balisage et de feuille de style , JavaScript est un langage de programmation similaire à Python, Java et autres Ce que JavaScript nous permet de faire, c'est d'introduire la logique dans nos sites Web actuellement statiques ou immuables Par exemple, si vous disposiez d'un formulaire permettant à un utilisateur de s' inscrire sur votre site Web, ne serait-il pas formidable qu' une fois connecté, accueilli par son nom soit accueilli par son nom au lieu de recevoir un bonjour générique ? C'est quelque chose que JavaScript va nous permettre de faire. Élevé. Zoe Davidson, ingénieure logicielle et professeur d' université Examinons les tenants et les aboutissants de JavaScript et des langages de programmation en général 2. Projet de classe: Nous allons utiliser ce petit formulaire que nous avons créé ici, et nous allons en fait l' utiliser pour donner à nos utilisateurs notre réponse lorsqu'ils soumettent leurs informations 3. Langage de programmation: Langages de programmation Comme nous l'avons déjà dit, JavaScript est un langage de script qui vous permet d' introduire de la logique et des fonctionnalités dans vos pages Web Mais comment s'y prend-il ? Comme nous l'avons également mentionné, JavaScript est un langage de programmation. Il y a plusieurs choses que la plupart des langages de programmation, sinon tous, ont en commun. Tout comme les autres types de langages informatiques, les langages de programmation sont dans leurs formes les plus simples, simples moyens pour nous de communiquer avec l'ordinateur Javascript, en particulier, nous permet, en tant que programmeurs d' interagir avec le Web via le DOM ou le modèle objet du document Le DOM est une interface de programmation pour les documents Web et agit comme une représentation de cette page afin de pouvoir interagir avec elle, à jour et la modifier en fonction des entrées et des interactions de l'utilisateur Javascript en particulier est le langage que nous utilisons pour interagir avec le DOM. Et 98 % de tous les sites Web utilisent JavaScript côté client. Les langages de programmation ont également tous leur propre syntaxe. Tout comme dans d'autres langues telles que l'anglais et le français, il existe une syntaxe qui définit et explique la manière dont mots s'assemblent pour former des phrases, des paragraphes, etc. la même manière, les langages de programmation ont chacun leur propre syntaxe pour déterminer ce qui constitue une ligne de code complète. Par exemple, comme dans les cours de grammaire à l'école, je passerai pas mal de temps à apprendre et à discuter syntaxe afin nous assurer que nous parlons correctement la langue. Après tout, pensez à importance des virgules en anglais Vous avez peut-être entendu parler d' autres langages de programmation tels que Python, C, Ruby, Java et d'autres. Selon le type d' applications que vous souhaitez créer, l'un de ces langages de programmation peut être mieux adapté à la tâche que d'autres. langages de programmation ont tous leur propre cas d'utilisation et leur propre objectif. L'objectif de ce cours est d'apprendre à interagir avec des applications pour le Web et à les créer. Le meilleur langage de programmation que nous puissions apprendre est JavaScript. Il existe de nombreux autres points communs à tous les langages de programmation, notamment les variables, les structures de contrôle et les structures de données. Nous aborderons chacune d' elles en temps utile. Maintenant que vous en savez un peu plus sur ce qu' est JavaScript et son lien avec le développement Web. Commençons à l'écrire 4. Configuration: JavaScript peut être écrit à deux endroits dans fichiers HTML ou dans son propre fichier JavaScript dédié. Si nous voulons écrire du JavaScript dans un fichier HTML, il suffit d'ajouter la balise script à la section d'en-tête du document. Cette balise de script est réservée à tous les langages de script, qui sont des langages dans lesquels vous pouvez exécuter des commandes en largeur, et c'est là que notre JavaScript pourrait théoriquement résider Tout ce que vous écrivez entre ces balises sera compilé et interprété en tant que JavaScript. Eh bien, c'est très bien pour de très petites applications. Cela pourrait devenir un peu compliqué une fois que nous commencerons à créer des sites Web de plus en plus complexes. Dans ce cas, nous pouvons utiliser le second endroit où JavaScript peut être écrit dans son propre fichier et simplement utiliser une balise de script comme référence, créer un fichier JavaScript distinct, App.js, et connecter les deux. Comme vous l'avez mentionné, JavaScript peut être écrit à deux endroits dans un élément de script de la page HTML entre deux balises de script ou dans son propre fichier. Si nous devions l'écrire dans le fichier HTML, nous l'écririons comme ceci. Nous créons notre balise de script dans la tête, puis nous écrirons notre JavaScript. Nous écrivons donc comme console.log, Hello, World, enregistrez-le. Ensuite, si nous allions sur notre page Web, nous verrions dans la console que nous avons connecté à HelloWorld Ce n'est pas une mauvaise idée lorsque vous réalisez des projets beaucoup plus petits, mais comme vous pouvez le constater, ce n'est pas nécessairement pratique à faire. Si vous avez plusieurs composants et plusieurs couches. Vous pouvez imaginer que votre fichier HTML va commencer à devenir assez long. En règle générale, gardez à l' esprit que vous ne voulez vraiment pas de fichiers plus de 100 lignes , à moins qu'il ne s'agisse d'un composant particulièrement complexe nécessitant toute la logique nécessaire. Idéalement, vous voulez diviser les choses en morceaux et les intégrer selon vos besoins. Pour ce faire, vous devez placer votre code JavaScript dans un fichier distinct. Alors débarrassons-nous de ça. Et c'est en fait allez-y et créez un nouveau fichier, que nous appellerons app.js. JavaScript étant un langage de script, l'élément de script nous permet de connecter des éléments qui sont des scripts Nous pouvons donc créer un script, puis faire comme nous l'avons fait avec la feuille de style, avec une barre oblique à points, sélectionner app.js et fermer notre balise de script C'est bon, on y va. C'est bon d'y aller. Très bien, la balise I script est maintenant connectée 5. Rédiger JavaScript: Écrire du JavaScript. Maintenant que nous savons où JavaScript est utilisé et comment il fonctionne théoriquement, il est temps d'apprendre à écrire. Si vous débutez dans la programmation en JavaScript, nous mettrons un peu plus de temps à apprendre que le HTML et le CSS. Et c'est tout à fait normal. C'est parce que vous apprenez non seulement un nouveau langage, mais aussi un langage de programmation et certains des concepts fondamentaux de la programmation en général. Mais ne vous inquiétez pas, si vous vous y tenez bientôt, ce sera aussi simple que n'importe quelle autre langue. Tout d'abord, accédons à ce fichier app.js vide. Très bien, testons donc notre lien pour nous assurer qu'il fonctionne Créons donc un fichier console.log et nous saisirons hello world, nous l'enregistrerons et nous le verrons sur une console. Génial Vous êtes déjà en train d'écrire du JavaScript. Maintenant, qu'est-ce que tu viens de faire là-bas ? Vous avez simplement demandé à la console, qui est la fenêtre votre onglet Chrome de se connecter ou d'afficher, que vous avez placée entre ces deux crochets. Console.log est une méthode essentielle que même les ingénieurs logiciels avancés utilisent car c'est un excellent moyen de déterminer où vous avez peut-être commis une erreur dans votre code. Un processus connu sous le nom de débogage. Mais pour l'instant, nous n'avons pas besoin ce code, alors commentons-le. Pour commenter quelque chose. En JavaScript, vous maintenez le bouton de commande enfoncé et vous appuyez sur la barre oblique que le message soit simplement commenté. Commenter signifie donc que vous n'avez aucune utilité pour ce code Il ne fonctionne plus activement. Vous pouvez toujours le modifier et le ramener sur votre page. Mais vous n'avez pas nécessairement besoin commentaires, c'est un autre excellent moyen laisser des notes plus conviviales aux autres développeurs Vous pouvez donc dire qu'il s'agit d'un commentaire et simplement faire savoir aux gens ce que vous essayez de faire. Leur travail pourrait dire qu' il s'agit d'un journal de points d'une console de test. Vous pouvez donc le faire savoir aux gens en disant « Hey, ce journal de console n'a pas d'importance » Les commentaires sont vraiment géniaux. Je pense que davantage de personnes devraient mettre plus de commentaires dans le code afin que les autres développeurs puissent comprendre pourquoi quelqu'un a fait un choix simple lorsqu'ils travaillent ensemble . Vous ne voulez pas mettre trop de lignes dans un commentaire, mais juste une courte ligne, un extrait rapide juste pour dire : «   Hé, c'est ce que j'ai fait, pourquoi l'a-t-il fait ? Je pense que c'est vraiment un excellent entraînement. 6. Variables: Variables En informatique, les données sont tout ce qui a du sens pour l'ordinateur. Javascript fournit huit types de données différents : indéfini, nul, booléen, chaîne, nombre, objet, big, objet, big, Dans ce cours, nous allons nous concentrer uniquement sur les six premiers, car en tant que nouvel ingénieur, vous rencontrerez rarement les derniers types de données qui aident un ordinateur à comprendre ce qu'il peut et ne peut pas faire avec une donnée Par exemple, 12 peut être un type numérique ou un type de chaîne. S'il s'agit d'un type numérique, l'ordinateur le traite comme tel. Et il peut être utilisé dans tous les types d' opérations mathématiques telles que l' addition et la soustraction Par exemple, s'il s'agit d'une chaîne, elle sera traitée comme une ligne de caractères, un peu comme une phrase ou un autre groupe de lettres. Les chaînes sont des groupes de caractères utilisés pour stocker des lignes de données de base qui ne sont pas des nombres. Les chaînes contiennent toujours des guillemets alors que les nombres n'en ont pas, et sont également toujours des nombres. Non seulement chaque élément de données a besoin d'un type, mais il a également besoin d'un endroit où les stocker afin qu'il soit possible d'y accéder à maintes reprises. Ce serait une expérience terrible si vous saisissiez un tas d' informations sur une page Web et qu'elles disparaissaient une fois que vous avez quitté la page C'est là que les variables entrent en jeu. Les variables font office d'emplacements de stockage pour chaque valeur particulière. Vous avez peut-être rencontré des variables telles que X et Y et vos cours de mathématiques au lycée Les variables de programmation suivent le même concept. Ils sont une représentation des données que nous stockons. La seule différence est qu'avec JavaScript, ces variables peuvent être de l'un des huit types que nous avons mentionnés au début de cette leçon. Par exemple, si nous codions un site Web avec un formulaire demandant aux utilisateurs leur prénom Nous stockions les données qu'ils nous ont fournies dans une variable. Marquons-le à titre d'exemple pour mieux le comprendre. Très bien, j'ai donc créé le dossier appelé Learn JS Je vais créer un nouveau fichier. Je vais l'appeler app.js. Parlons maintenant des différentes parties de JavaScript et de leur fonctionnement. Ainsi, comme nous venons de le dire, les variables nous permettent de stocker des données dans JavaScript. Ainsi, par exemple, si nous avions un formulaire de site Web demandant aux utilisateurs leur nom. Nous aimerions probablement avoir un moyen d'obtenir ces informations. Créons donc un fichier HTML rapide et créons le formulaire que nous pouvons utiliser Très bien, donc sous cette forme, ça va être un peu similaire à autre avec quelques différences clés Je vais donc créer une entrée de type, de texte numéro de texte. Et nous considérerons cela comme un âge, ferons en sorte que ce soit parfait. Il s'agit donc d'un formulaire très simple qui va simplement prendre, lequel nous demanderons à l'utilisateur son prénom, son nom de famille, son âge ouvert. Vous devriez avoir un bouton d'envoi. Le type d'entrée est donc égal au bouton. Et nous allons juste nous concentrer sur le bouton. Et nous dirons Soumettre. Connectons notre fichier app.js à notre code HTML, comme nous le faisions auparavant avec une balise de script. Et la source sera dot slash app.js. Fermez ça, sauvegardez ça, et nous devrions être prêts à partir. Donc si nous revenons à local, localhost 50, 50, vous savez, je pense que c'est ça Troisièmement, d'accord, nous avons, sommes vraiment, vraiment une forme de base Très bien, nous avons donc notre prénom, notre nom de famille ou notre âge, et notre bouton de soumission Nous voulons donc aller de l'avant et compléter ces données, non ? Supposons que vous souhaitiez qu'un nouvel utilisateur accède à votre site et remplisse ces informations. Hum, vous allez dire comme John Brown et ses 45 ans, non ? Et il soumettra ces informations. Cool. Cependant, rien ne se passe lorsque vous soumettez les informations. Les informations ne vont nulle part. Ce que nous voulons faire maintenant, c'est enregistrer ces informations dans une variable afin de pouvoir au moins les utiliser. Donc, si nous allons inspecter ici, consulter notre console, nous pouvons faire en sorte que ces informations soient envoyées à une variable. Ainsi, lorsque l'utilisateur appuie sur Soumettre, nous pouvons avoir notre formulaire, envoyer les données quelque part. Ce que nous allons faire ici, c'est créer une variable. Il existe donc deux types de variables. Il existe des variables constantes et d'autres variables qui peuvent changer, appelées variables de location, variables constantes Une fois que vous lui avez attribué une valeur, la valeur ne peut pas changer. Les variables Let, en revanche, peuvent changer. Nous voulons donc décider quel type de variable nous voulons utiliser pour la situation. Personnellement, je recommande d'utiliser une variable principale car nous ne connaissons pas réellement la valeur de la variable avant que l' utilisateur ne soumette ses données. Nous pouvons laisser l'utilisateur et faire en sorte que celui qui a maintenant créé la variable user ne soit défini sur rien. Cela ne signifie rien pour l'instant, mais nous pouvons éventuellement lui attribuer une valeur. Il est recommandé d'initialiser une variable avec une valeur, mais cela n'est pas obligatoire. Lorsque vous n'initialisez pas une variable avec une valeur, elle obtient la valeur par défaut undefined Le troisième type de données abordera Tout ce qui n' est pas défini signifie qu'il n'a pas encore été défini de quoi il s'agit La variable n'existe donc pas encore. Cela ne signifie pas qu'il a une valeur nulle, mais c'est le type de données null Null et undefined sont deux types de données très similaires, mais avec des différences subtiles, vous pouvez affecter une variable à la valeur null et elle existera toujours Cela revient à dire à l'ordinateur que vous avez une boîte dans votre unité de stockage, mais que vous savez qu'elle est vide. Si vous attribuez cette même variable à la valeur undefined, vous indiquez à présent à votre ordinateur que la case n'existe pas réellement. Sachez que ce n'est intentionnellement rien alors que l'indéfini n'existe pas. Si nous voulions créer une valeur constante de variable, nous pouvons utiliser CONST et ensuite nous pouvons la donner, nous pourrions, eh bien, appeler cela Vous ne pouvez pas, vous ne pouvez pas non plus avoir variables portant exactement le même nom. Nous pouvons donc appeler cela un âge constant. Ensuite, nous pourrions le définir sur un nombre spécifique ou une chaîne. Nous pouvons donc le régler sur cela, ou nous pouvons le régler sur 45, non ? Quelle que soit la valeur que nous voulons lui attribuer, nous utilisons les égaux pour attribuer une valeur à une variable. Donc, contrairement aux maths, nous sommes égaux à I1 plus un, égal à deux Ce n'est pas un opérateur mathématique dans ce sens, c'est en fait une mission. Un opérateur d'affectation, dont parlera le signe égal. Nous parlerons un peu plus tard des autres façons dont nous pouvons utiliser des égaux pour réellement signifier que ceci est égal à cela. Mais pour l'instant, ce que nous devons savoir, c'est que le seul signe égal singulier est l'assignation. L'âge est donc de 45 ans. On peut y penser comme ça. Comme j'ai indiqué la valeur ici, c'est une bonne idée d'initialiser une variable avec une valeur Nous pouvons donc réellement faire en sorte que l'utilisateur soit égal à ces guillemets vides. Les guillemets ou le moyen d'identifier une chaîne. Si vous le mettez entre guillemets, let user equals, let user equals, cela indique simplement à l'ordinateur qu'il entre guillemets, let user equals, let user equals, cela indique simplement s' agira probablement d'une valeur de chaîne, euh, plus tard, nous pouvons en fait imposer qu'il s'agit d'une chaîne ou d'un nombre ou quoi que ce soit d'autre. Mais c'est quelque chose que nous pouvons faire avec TypeScript. Mais que se passerait-il si nous n' initialisions pas cette valeur, n'est-ce pas ? Et si c'était comme ça, quelle valeur crois-tu que ça aurait ? Nous avons parlé des différents types de données, il y a donc un numéro de chaîne, mais ce ne serait probablement pas un ou l'autre si nous ne lui donnons pas de type. Eh bien, si vous n'êtes pas sûr de quelque chose, nous pouvons simplement l'enregistrer sur la console Donc, si nous allons dans le journal des points de la console, l'utilisateur verra qu'il est en fait indéfini Et si vous vous en souvenez, indéfini signifie que quelque chose n'existe pas. Null signifie que c'est essentiellement zéro car il n'est pas défini. Je le suis, ça veut dire qu'il n'existe pas encore. Une fois que nous lui avons attribué une valeur, elle existera. autre côté, si nous enregistrons l'âge de la console, nous devrions en avoir 45. Et c'est ce à quoi nous l'avons assigné. Une autre chose intéressante que nous pouvons faire est pouvoir enregistrer dans la console le type d'une variable spécifique et cela nous donnera réellement le type. Donc, dans ce cas, le type d'âge est un nombre parce que c'est nous qui lui avons attribué un numéro. Vous pouvez également, comme nous l'avons déjà dit, utiliser, nous pouvons parler, nous pouvons attribuer une valeur nulle à une variable, n'est-ce pas ? Donc CONST, rien. Nous pourrions le mettre à zéro et l'enregistrer. Et ensuite, si nous n' arrivions à rien avec Console.log , nous devrions le savoir. Comme vous le voyez ici, nous avons une valeur nulle dans la console. Nous avons donc spécifiquement indiqué à l'ordinateur qu'il est nul, il n'est rien, qu'il n'est pas destiné à être lu. Une chose à retenir cependant, en particulier en informatique et avec les variables, c'est l'orthographe. Avec JavaScript, il est en fait possible d'avoir deux types différents de variables différentes ayant la même orthographe. Donc je pourrais vraiment faire du CONST, à l'âge. Je peux vieillir avec des minuscules. Je pourrais vieillir avec des majuscules. Et ça ne me donnera pas d'erreur. Cependant, à terme, s'il m'arrive de mal épeler l' endroit où j'utilise l'âge, exemple si je consigne l'âge en majuscules sur la console au lieu de l'âge en minuscules, je pourrais me Il est donc préférable de ne pas le faire et de n'utiliser qu' une seule forme d'orthographe et de majuscule pour vos variables En parlant d'orthographe et de capitalisation en JavaScript, nous utilisons en fait une méthode spéciale de capitalisation appelée CamelCase Camelcase est l'endroit où se trouve la première lettre. La première lettre du premier mot est en minuscule et la première lettre chaque mot suivant est Donc CamelCase, c'est un peu comme un chameau. Ainsi, lorsque vous devez créer plusieurs variables, vous pouvez toujours utiliser CamelCase ou peut-être souhaitez-vous être un peu plus descriptif Vous pouvez donc dire CONST, nom de famille de l'utilisateur est égal à brun. Et voilà. C'est ainsi que vous écririez qu'avec Camel Case, votre utilisateur est simplement en minuscules, le dernier est en majuscule et le nom est également en majuscule Très bien, alors allons un peu plus loin pour voir ce que nous pouvons faire d'autre avec les variables, n'est-ce Nous avons donc notre nom d'utilisateur. Créons un prénom d'utilisateur pour John. Supposons que c'est ce que l'utilisateur a saisi dans notre formulaire Ensuite, nous voulons créer une phrase, peut-être saluer notre utilisateur lorsqu'il clique sur Soumettre , nous voulons lui dire bonjour John Brown Il existe donc différentes manières de procéder. Mais une chose intéressante que nous pouvons faire avec les variables est de les concaténer Nous pouvons donc assembler différentes variables pour créer une phrase ou une autre chaîne significative ou utile pour nous ou pour nos utilisateurs. Utilisez donc la concaténation, ce que vous feriez simplement , et vous diriez que vous l' avez probablement enregistré dans une autre variable, avez probablement enregistré dans une autre variable Vous pourriez donc dire CONST, salutation. Ensuite, vous ne prendriez pas le nom réel de l'utilisateur, mais la variable qui représente son nom et vous les regrouperiez dans une phrase. Pour que nous puissions dire bonjour. Ensuite, nous utilisons le symbole plus pour symboliser essentiellement ce que nous voulons que ces deux éléments soient additionnés Maintenant, comme en maths, mais comme connecté, utilisateur élevé, utilisateur, firstName et LastName Ensuite, nous pourrions même le terminer par un point d'exclamation parce que nous sommes ravis de parler à cette personne C'est ainsi que nous avons notre salutation. accueil est égal à hi plus le nom d'utilisateur, plus le nom de famille. Et tu sais quoi ? Pour une bonne pratique, permettez-moi de mettre un peu d'espace ici juste pour m'assurer qu' il est correctement formaté. Très bien, allons-y saluons le journal de la console et voyons ce que nous obtenons. Nous y voilà. Bonjour John Brown, programme. C'est très excité. Supprimons le premier. Ça dit : Bonjour John Brown. C'est donc essentiellement ainsi que fonctionne la concaténation. Vous pouvez prendre des chaînes, variables et les relier entre elles pour créer un envoi significatif pour les utilisateurs ou une autre utilisation significative similaire. Une autre chose intéressante que vous pouvez faire avec les variables, particulier avec les chaînes, est déterminer le nombre de lettres qu'elles contiennent. Parce que les chaînes ne sont en réalité qu'un ensemble de lettres, voilà la liste des lettres. Techniquement , ils appartiennent également à un autre type de données, qui est un tableau, dont nous parlerons un peu plus tard Mais l'une des méthodes disponibles ou des fonctionnalités que vous pouvez obtenir grâce l'utilisation de tableaux est de pouvoir déterminer leur longueur Donc, si je voulais voir combien de lettres se trouvent dans la chaîne de salutation, je peux simplement créer console.log , puis je mettrai un point après celui-ci pour spécifier qu'il existe une méthode sur cette variable à laquelle je souhaite accéder. En gros, Dot est comme un moyen d'entrer dans quelque chose. Donc si j'ai une boîte et que je sais qu'il y a une fourchette dedans. Je pourrais appuyer sur une fourchette Box point pour mettre la fourchette à l'intérieur de la boîte, ce qui fera la longueur du point de salutation. Et comme la longueur est une propriété associée au message d'accueil, elle doit nous indiquer le nombre de caractères du message d'accueil. Allons-y et enregistrons cela sur la console. 14. Je veux dire, si vous le calculez, c'est comme l'espace HI J0 H BR OWN, puis il y a un autre espace Et le dernier point d' exclamation, c'est 14. Cela nous indique donc exactement la longueur d'une chaîne ou d'un tableau. C'est donc une propriété vraiment intéressante à accéder si vous avez besoin de connaître la longueur de quelque chose, qui sera d' autant plus utile lorsque nous travaillerons avec des ensembles de données de plus en plus volumineux 7. Tableaux: Les tableaux indiquent que nous voulons stocker plusieurs noms ensemble afin de pouvoir y accéder ultérieurement Dans ce cas, nous utiliserons un autre type de données appelé tableau. Un tableau est créé en encapsulant les différents éléments de données qu'il contient à l'aide de crochets et virgules pour séparer chaque élément de Un tableau peut contenir autant d'éléments que vous le souhaitez, mais il est conseillé de ne les utiliser que lorsque vous avez plusieurs données à stocker. Les tableaux peuvent même contenir d'autres tableaux. Ils peuvent contenir des données de tout type. Essayons d'ajouter un tableau à notre page. Très bien, donc un autre fait intéressant propos des langages de codage et en général, c'est que la plupart des langages de codage ne commencent pas à compter un Ils commencent à compter à zéro. C'est ce que l'on appelle l'indexation basée sur zéro, et c'est exactement la façon dont nous avons appris à compter dans Vous trouverez de nombreux langages qui font cela en JavaScript, c'est l'un d'entre eux. Il faudra un certain temps pour s'y habituer, mais je suis sûr que tu peux le faire. Très bien, nous pouvons donc utiliser l'indexation basée sur zéro, pour vraiment nous aider à le fonctionnement interne de différents éléments de données, comme Donc, si nous prenons cet élément de salutation ici, nous prenons ce message d'accueil, la chaîne de filtrage. Nous pouvons en fait utiliser l'indexation à base zéro pour accéder à une lettre spécifique dans Ce que nous allons faire, c'est utiliser ce que l'on appelle la notation entre crochets. Il existe donc deux types de nouvelles notations. Il existe une notation entre crochets et une notation par points. En fait, vous avez déjà utilisé la notation par points en utilisant la propriété de longueur des points d'accueil. En gros, ce que dit la notation par points, c'est : « Hé, je sais que tu as ce truc et qu' il y a quelque chose dedans. Par exemple, si je m'appelle Zoé, la notation par points peut être du genre : « Hé, je veux savoir que Zoé est, Zoé est LastName ou tu sais, c'est Ce sont les choses que vous pourriez noter par points sur moi si j' étais un objet JavaScript. Mais pour ce qui est de ce que nous avons ici, nous avons une salutation qui est une chaîne de lettres, une phrase. Et nous pourrions accéder à une seule lettre dans cette phrase si nous le voulons. Cela peut être très utile lorsque vous avez peut-être une liste de données, des listes de noms. Et vous voulez juste retirer le prénom ou le nom de famille de cette liste ou quelque chose comme ça Mais nous pouvons nous entraîner à l' aide de notre chaîne de vœux. La notation par points kiva signifie que vous devez connaître le nom de la propriété Donc, si vous recherchez l'âge de votre objet, vous devez savoir que cet âge existe. Dans le cas contraire, il renverra undefined. Si je dis « ballon d'accueil », cela devrait renvoyer «   indéfini » car il n'y a aucune propriété de bulle en vert Cependant, si nous utilisons la notation entre crochets, nous pouvons accéder à ces premiers caractères ou moins de caractères, quel que soit le cas. J'aborde donc tout cela avec un index basé sur zéro, car nous allons mettre deux crochets à côté du mot salutation Ensuite, entre crochets, nous allons indiquer à quel personnage nous voulons accéder. Et si c'est le premier personnage, nous n'allons pas en mettre un. Nous allons mettre zéro parce que nous commençons à compter à zéro . Lorsque nous passons au message d'accueil, nous mettrons zéro, puis nous l'enregistrerons. Et nous devrions avoir un H majuscule Voyons ce que nous obtiendrons. Un H. majuscule génial C'est ainsi que nous savons que cela fonctionne. Nous allons recevoir cette première lettre. Si nous en faisons un, nous obtiendrons le I, si nous le faisons, nous obtiendrons cet espace, qui ne ressemblera nous obtiendrons cet espace, à rien. Mais en fait, c'est un peu, donc il y a peu de place là-bas. Ensuite, nous pourrons faire tout cela jusqu'au bout. Maintenant, si nous voulons obtenir la dernière lettre de la chaîne de vœux, une chose que nous pouvons faire est d' accéder à la longueur, puis de faire la longueur moins un. Nous pourrions donc faire un message d'accueil, nous pourrions faire un message d'accueil, puis nous pouvons le faire nouveau entre crochets, longueur des points moins un. Ainsi, avec l'indexation basée sur zéro, vous devez toujours en soustraire un du nombre de montants pour accéder à ce dernier élément, n' dernier élément Donc, si vous avez environ 12344 éléments médiocres et que vous savez que vous êtes, vous êtes, une chaîne de quatre caractères Dans la longueur, il y en aura quatre, mais si vous comptez, ce sera en fait 0123 Donc, si nous en soustrayons un, c'est pour accéder à ce dernier. Si nous soustrayons, si nous ajoutons pour, il essaiera en fait d' accéder à quelque chose qui n'existe pas. Nous voulons donc nous assurer de soustraire un. Lorsque nous recherchons le dernier élément et une chaîne, nous allons utiliser la longueur du point de salutation moins un Et ce sera en fait l'index auquel nous chercherons à accéder. Cela va donc essentiellement donner un nombre, le numéro correct de l'indice Donc, si jamais le message d'accueil change de longueur, peut-être que John changera son nom en Stephen. Et maintenant, le message d'accueil ne comporte plus 14 caractères. Il est peut-être 17 ans. Au lieu de coder 14 en dur comme message d'accueil, numéro d' accueil ou 13 Si nous faisons déjà le calcul, nous pouvons simplement dire, hé, quelle que soit la longueur du dégradé, quel que soit le nom de la personne, nous voulons simplement obtenir la longueur et le dernier caractère n'est pas un point d'exclamation Est-ce une période, quelle qu'elle soit. Si nous cliquons sur Enregistrer, nous devrions obtenir un point d'exclamation Et voilà, ici même sur la console. Point d'exclamation. Très bien, nous avons donc été initiés au concept de tableaux Ces éléments, ces ensembles de données où nous pouvons réunir plusieurs variables, plusieurs chaînes ensemble, peut-être plusieurs éléments d' information ensemble. C'est génial. Il s'agit d'un moyen beaucoup plus simple de réunir toutes nos données en une seule pièce. Ce que nous pouvons faire maintenant, c'est utiliser ces réseaux à notre avantage Donc, plutôt que d'avoir votre âge, nous avons utilisé notre prénom, utilisez votre nom de famille et votre message d'accueil Nous pouvons en fait contenir tout cela dans un tableau Nous pouvons dire CONST, utilisateur, premier utilisateur, premier utilisateur Et plutôt que d'avoir tout cela séparément, nous pouvons dire que le premier utilisateur est égal à. Ou nous pouvons dire, au lieu de, eh bien, débarrassons-nous de cet utilisateur ici. Et nous pouvons dire utilisateur de CONST car les tableaux sont en fait mutables Alors comment nous avons dit qu'on ne peut pas muter, muter une constante. Vous pouvez réellement modifier les tableaux, qu'ils soient déclarés avec une constante CONST ou avec lead Ce qui est vraiment intéressant chez eux. Donc, si nous voulions créer une chaîne représentant notre utilisateur, nous pourrions créer le tableau avec nos crochets, puis nous pourrions dire que l' utilisateur est le prénom de l'utilisateur. Nous allons saisir le nom de famille de l' application utilisateur. Ensuite, nous allons faire en sorte que l'utilisateur fasse l'âge, c'est-à-dire R. Maintenant, notre tableau d'utilisateurs. Ce tableau doit contenir toutes les informations sur notre utilisateur. Donc, si j'utilise console.log, je devrais obtenir toutes ces informations, oui, séparées par des virgules Nous avons donc John Brown avec 45 ans. Donc c'est vraiment cool. Il existe un moyen pour nous de conserver toutes nos données partielles comme si elles étaient regroupées. Par exemple, pour organiser nos données, il n'est pas nécessaire de les disperser. C'est un moyen beaucoup plus facile d' assembler les choses. Donc, comme nous en parlions tout à l'heure, tout comme pour les chaînes, nous pouvons accéder à nombres très différents dans notre tableau, n'est-ce pas ? Disons que nous avions tout un tas d'utilisateurs différents, non ? Alors disons que nous avions le prénom user1, et que nous avions, nous avions un autre utilisateur, non ? Supposons que nous l'ayons fait, je vais changer cela en fonction de l'utilisation ou d'un âge. Et je vais changer ces deux en utilisateur en Const, utilisateur en âge étant égal à trois D'accord ? Nous avons donc désormais deux utilisateurs. Nous avons l'utilisateur 1 et l'utilisateur final. C'est un excellent endroit pour utiliser les commentaires, nous pouvons donc simplement utiliser R1 Nous pouvons simplement être très précis quant à ce dont nous parlons et faire en sorte que les choses paraissent un peu moins encombrées pour les utilisateurs pour Supposons que nous demandions à ces deux utilisateurs d'écrire et que nous voulions stocker uniquement le prénom de ces deux utilisateurs Nous pourrions faire en sorte que les prénoms des utilisateurs CONST soient égaux au prénom de l'utilisateur 1, et de l'utilisateur au prénom, n'est-ce pas ? Ce serait un tableau contenant leurs deux prénoms. Ce qui est plutôt cool. Nous avons tout ce qu'il faut pour nous. Supposons maintenant que nous voulions accéder uniquement au premier prénom de ce tableau Donc, le prénom du premier utilisateur, nous pouvions y accéder en utilisant la notation entre crochets Nous pourrions donc faire console.log via console.log it. Et nous pourrions dire que le prénom de l'utilisateur est entre crochets zéro. Et cela devrait nous donner prénom de notre premier utilisateur, John. Nous l'avons fait correctement. Nous avons obtenu le prénom du premier utilisateur. C'est donc un moyen très utile, par exemple lorsque nous voulons simplement l'appeler la première personne arrivée à la fête rétrécie sur le site Nous voulons leur dire « Hey John et nous voulons leur souhaiter la bienvenue. D'abord. Nous pouvons les parcourir jusqu'à la fin de la liste Parce que c'est une fonctionnalité vraiment intéressante de Arrays. Vous allez regrouper toutes ces données et y accéder en utilisant la notation entre crochets. Mais supposons que vous ne connaissiez pas nécessairement l'index de ce que vous recherchez, n'est-ce pas ? Disons que vous le savez comme John avait organisé la fête, mais vous ne savez pas s'il est le premier, le dernier, le milieu. Je dois trouver le nom. Eh bien, il existe en fait une autre méthode. Donc, tout comme nous avions la méthode de longueur, il existe la méthode de recherche que nous pouvons utiliser sur un tableau afin de trouver une donnée particulière que nous recherchons, nous pouvons prendre le prénom de l'utilisateur. Faut-il utiliser des prénoms, des prénoms d'utilisateurs, des noms. Et on peut appeler Dot, très bien. Et nous pouvons voir que nous en sommes là avec notre documentation. Il y a en fait quelques informations à ce sujet. Il s'agit donc d'une méthode permettant à des tableaux de chaînes de rechercher une chaîne particulière Et puis il vous indique essentiellement comment l'écrire. Ces informations peuvent être un peu confuses, alors voyons si nous pouvons les rechercher sur MTN. Revenons donc à MTN et nous chercherons. Très bien, Array Dot Prototype Dot, Très bien, Cool. La méthode find renvoie donc le premier élément du tableau fourni. Cet aspect satisfait à la fonction de test de fourniture Si aucune valeur ne satisfait la fonction de test, undefined est renvoyé C'est assez simple. Nous prenons donc quel que soit notre tableau, ils l'ont enregistré, la réponse est une variable ici, donc trouvée, puis nous l' appelons simplement sur le tableau. Donc, array dot veut que array1 point trouve quel que soit l'élément Si l'élément est supérieur à dix. Ensuite, ils devraient trouver, ils devraient obtenir, je suppose que c'est le premier qui est trouvé. C'est plutôt cool. Alors voyons si nous pouvons trouver et nous prendrons ce que nous voulons. Donc, en gros, ce qui se passe ici, c'est qu'on prend élément par élément. Il parcourt la liste et essaie de trouver le premier qui répond aux critères. Donc c'est prendre, c'est chercher un élément. Si cet élément est supérieur à dix, il enregistrera cette réponse et la renverra POUR dire «   Hé, nous avons trouvé la réponse ». Voyons donc si nous pouvons faire la même chose. Nous allons faire des équivalents à livres constants et il n'est pas nécessaire de le trouver sur, soit pour autre chose que des noms d'utilisateur constants, point find Nous allons chercher un nom. Si le nom est égal, égal à not. Comme nous l'avons déjà dit, il existe deux types d'égaux, n'est-ce pas ? Il y a le simple égal, double égal et le triple égal. Il s'agit d'une situation où nous utiliserions le double égal pour dire : «   Hé, je veux que cela corresponde à cela ». Donc si le nom est égal à John, si le nom est John, alors je veux que tu le trouves et que tu me le rendes. Donc si nous trouvons console.log, nous devrions récupérer John. Nous avons donc John, mais et si John ne figurait pas dans la liste ? Et si c'était Harry ? Enregistrer cela deviendra indéfini, tout comme la fonction l' a dit Et si nous voulions trouver quelque chose d'un peu plus intéressant ? Et si on voulait trouver un nom ? Trouvez un nom dont le nom est supérieur à, disons cinq. Ils s'appellent tous les deux John, nous devrions changer ça. Alors changeons celui-ci en Stephen, comme nous l'avons mentionné. Donc, si la longueur du nom est supérieure à cinq, il doit renvoyer le nom. Donc ça ne devrait pas renvoyer John, ça devrait renvoyer Steven. Voyons voir. Génial. Nous avons donc retrouvé Steven. Vous pouvez voir comment ces différentes méthodes commencent à s' additionner et à fonctionner ensemble pour créer ce que nous devons trouver Ce sont les bases de l'informatique. Vous commencez à travailler avec des algorithmes qui existent déjà dans l'ordinateur. Vous êtes donc sur la bonne voie pour vraiment apprendre JavaScript. Et encore une fois, vous vous demandez peut-être comment je connais tous ces différents types de données et méthodes. Ce n'est pas parce que j' ai la mémoire. Comme vous pouvez le constater, nous nous contentons littéralement de rechercher sur Google tout ce dont nous avons besoin et que nous n'avons pas vraiment en tête. J'ai donc utilisé la méthode de la longueur sans trop de difficultés. C'est parce que c'est quelque chose que j'ai beaucoup utilisé , mais bon, c'est quelque chose que je n'ai pas utilisé autant. Je l'ai donc vérifié pour m' assurer que j' la bonne implémentation. Et je n'essayais pas juste de l' implémenter du haut de ma tête, je faisais la mauvaise chose et je recevais des erreurs parce que c' était juste une erreur stupide dans mon implémentation. Avant de terminer notre discussion sur les tableaux, passons en revue quelques-unes de ces méthodes essentielles que nous pourrions vouloir utiliser Une autre carte de codage itère essentiellement sur a, un tableau et renvoie les résultats, y compris cette itération Il est donc généralement destiné à faire quelque chose au tableau. Donc, si j'utilise la carte à points des prénoms, je veux prendre le nom et je veux concaténer le nom, peut-être que nom et soleil les nommeront Johnson et Stevenson Et je veux qu'il renvoie la carte. Changeons donc cela en mappé. En théorie, je devrais retrouver Johnson et Stevenson quand je les ai cartographiés Alors voyons voir. Nous avons maintenant une gamme avec Johnson et Stevenson. Vous pouvez donc passer en IMAP sur des éléments individuels du tableau et y apporter des modifications Alors, en utilisant la carte, la suivante, parlons-en pour chacune, car chacune est vraiment similaire à une carte , à une différence près. En fait, ce n'est pas le cas, cela ne renvoie rien. Alors, comment avons-nous pu enregistrer la carte dans une fonction, dans une variable et dans un journal de console sans aucun retour pour chacune d'entre elles. C'est donc censé changer comme la réalité elle-même. Donc, si je voulais changer le prénom de John, ou si je veux qu'il crée un nouveau tableau, j'ai peut-être créé un tableau vide Donc, conc, tableau vide. Et il n'y avait rien dedans. Comme vous vous en souvenez, j'ai déjà dit que les tableaux sont mutables. Cela signifie que vous pouvez y ajouter et en retirer des éléments même après qu'ils aient été créés avec une constante. Alors disons que je voulais ajouter des choses, ajouter des noms à ce tableau vide. Alors peut-être que j'ai pris les prénoms des utilisateurs et qu'au lieu de faire des maths, j'ai fait un pour chacun. Donc, pour chaque nom, je ne l'enregistrerai pas dans une variable. Cette fois, nous allons simplement l'utiliser tel quel. Pour chaque nom, nous allons utiliser une méthode appelée push. Nous allons prendre notre tableau vide et nous allons appuyer, nous allons envoyer le nom. Cela signifie donc que nous prenons littéralement ce nom. Nous l'introduisons dans le réseau. Il devrait donc y avoir un Johnson ou John et un Steven dans notre tableau vide. Configurons cela et créons le tableau vide console.log. En fait, utilisons le tableau vide console.log deux fois. C'est console.log avant et après. Nous ne devrions donc voir que des crochets vides, puis nous devrions voir John et Stephen. Parfait, exactement ce que nous avons obtenu. Les crochets vides et la jaunisse, même si nous savons que c'est réellement appelé , fonctionnent réellement Génial. Voyons une autre méthode. Trancher. Très bien, donc lorsque vous travaillez avec Slice, vous pouvez essentiellement décider avec quelle section du tableau vous souhaitez travailler C'est très intéressant à faire lorsque vous travaillez réellement avec des noms, par exemple. Donc, si j'ai pris Const, slice, si je crée une variable appelée slice, et j'ai pris le prénom de l'utilisateur 2 Et j'en ai ensuite fait une tranche. Là où je commençais peut-être par la deuxième lettre et où je terminais par la quatrième, je devrais avoir une tranche du nom de Stevens Et si je coupe le journal sur console je reçois un pourboire, qui est le milieu du nom de Stevens entre les caractères recherchés C'est comme ça que tu voudrais, tu trancherais comme ça. C'est tout pour moi. C'est pour cela que la meilleure façon d'utiliser Slice est de l'utiliser sur une chaîne ou quelque chose comme ça où j'ai juste besoin d'un sous-ensemble Très bien, la prochaine méthode que nous allons utiliser est l'épissage Splice est très similaire à Splice, mais il modifie en fait le tableau lui-même J'appelle donc Splice on an array. Cela me ramènera une nouvelle gamme. Cela va changer ce tableau depuis le début, l'épisser un peu différemment de ce que prendra Slice, nous allons le faire en fait, nous allons appeler splice sur les prénoms des utilisateurs Donc, ce que nous allons faire, c'est y mettre un numéro de départ. Nous allons donc peut-être commencer par l'index 1, qui correspond aux prénoms de l'utilisateur. Ensuite, nous allons, nous allons en supprimer un. Nous allons supprimer le nom du juge Stevens, puis nous allons ajouter un nouveau nom et nous allons ajouter le nom de Harry Alors enregistrons cela, puis passons au prénom de l'utilisateur console.log. Désolée. Donc, cela aurait dû faire, c'est le prendre, modifier et le renvoyer sous forme de tableau muté. Voyons si c'est le cas. Génial. Maintenant, nous avons 0 et débarrassons-nous de ce fichier console.log. Génial. Maintenant, nous avons John et Harriet au lieu de John et Steven C'est ainsi que nous avions, en gros , épissé quelque chose et y avez mis quelque chose de nouveau Mais vous n'êtes pas obligé de mettre quelque chose de nouveau et vous pouvez simplement le retirer et le laisser en place. Très bien, donc la prochaine question que nous allons examiner est Shift Shift est une autre méthode qui fait également muter un tableau. Lorsque vous appelez shift sur un tableau, cela supprime en fait le premier élément. Vous pouvez maintenant enregistrer ce premier élément ou renvoyer le tableau muté. C'est à vous de choisir. Voyons comment nous l'utiliserions notre tableau de prénoms d'utilisateurs. On pourrait appeler le prénom d'un utilisateur un décalage par points. Et nous n'avons pas besoin de passer de paramètres. Nous allons juste l'appeler comme ça. Donc, si nous sommes un utilisateur de la console, point utilisateur et un prénom, nous devrions simplement savoir qui doit avoir le nom de Stevens ? Donc oui, il n'y a que du suintement. Mais si nous utilisons ce fichier console.log, nous devrions vraiment obtenir le nom de John. John, nous y voilà. Cela dépend donc de ce que vous essayez d'obtenir. Essayes-tu d' obtenir le prénom ? Nous essayons d'obtenir la liste complète sans le premier élément, ou vous essayez d' obtenir la liste complète sans le premier élément. Lequel de ces deux moyens vous permettra d'accéder à ces données ? Encore une fois, le choix vous appartient . La dernière méthode que nous allons vérifier aujourd'hui est unshift Ainsi, comme nous l'avons mentionné, unshift ajoute des éléments au début d'un tableau Supposons que nous ayons votre prénom, mais pourquoi ajouter un nouveau nom au début du tableau ? Nous allons utiliser les prénoms des utilisateurs, point unshift. Et nous ajouterons Harry, le nom de Harry juste là. Si nous utilisons FirstName dans console.log, encore une fois, nous devrions obtenir le tableau avec le nouveau nom Et nous y voilà, Harry, John et Steven. Et ça y est, nous l'avons. Voici quelques-unes des méthodes essentielles que vous pouvez utiliser sur des tableaux qui, je suis sûr vous seront utiles au cours de votre aventure avec JavaScript 8. Fonctions: Fonctions, je veux que jusqu'à présent, nous faisions tout assez manuellement. Je veux dire, bien sûr. L'ordinateur fait le gros du travail, mais il existe un moyen de nous faciliter encore les choses. Plutôt que de nous répéter encore et encore lorsque nous organisons nos données ou que nous demandons des données à l'ordinateur, nous pouvons utiliser ce que l' on appelle une fonction. Une fonction est un morceau de code réutilisable qui nous permet d'accéder à la même logique encore et encore sans la réécrire Les fonctions peuvent également être nommées de manière à ce que nous puissions y accéder n'importe où dans notre fichier ou notre programme. Refactorisons notre code pour créer quelques fonctions de base qui nous simplifieront la vie Très bien, donc la prochaine chose dont nous allons vouloir parler, ce sont les fonctions Je viens de le mentionner tout à l'heure. Les fonctions nous permettent d'arrêter de tout faire manuellement et vraiment tirer parti du fait que nous faisons de la programmation informatique. Et nous pouvons permettre à l'ordinateur de faire une grande partie de ce travail à notre place. Voyons donc comment nous écririons une fonction. Ainsi, dans notre fichier app.js, la façon dont nous commencerions à écrire une fonction, il existe deux méthodes, mais la méthode la plus courante consiste maintenant à utiliser un Const, comme nous l'avons vu précédemment, pour initialiser le nom de la Donc, si nous devions nommer une fonction, appelons-la simplement, par exemple, ma fonction. Et ensuite, au lieu de le faire égal et de ne saisir que la valeur ici, nous mettrions en fait des égaux, puis les parenthèses et un autre égal et une flèche C'est ce qu'on appelle en fait la syntaxe de la fonction flèche. Et c'est une façon particulière d'écrire des fonctions, mais c'est l'une des plus succinctes Il en est ainsi, il a été très couramment adopté. Après notre flèche. Après notre flèche, nous utilisons les bretelles bouclées et c'est C'est ainsi que vous écrivez le format de base d'une fonction. Mais qu'est-ce qu'une fonction ? Cela nécessite un élément de logique et l' implémente essentiellement pour nous. Donc, dans ma fonction, nous pourrions simplement lui donner quelque chose de très simple à faire, comme console.log. Et puis, comme nous l'avons vu précédemment, Hello World. Ainsi, chaque fois que cette fonction est appelée, elle sera console.log. Il se connectera à la console HelloWorld. Mais comment pouvons-nous réellement le faire fonctionner ? Eh bien, lorsque vous avez une fonction, vous ne pouvez pas simplement écrire la fonction et vous attendre à ce qu'elle soit appelée, à ce qu'elle s'exécute. Tu dois vraiment l'appeler. Il est donc très simple d'appeler une fonction. vous suffit de taper le nom de la fonction comme vous nous l'avez déjà vu faire auparavant, et de mettre les parenthèses derrière celui-ci Et une fois que vous l'aurez enregistré, il appellera la fonction. Donc, si nous accédons à notre navigateur et que nous regardons la console, nous verrons à nouveau qu'il s'agit de helloworld Les fonctions sont plutôt sympas à utiliser. Vous pouvez imaginer le niveau de complexité que vous pouvez attribuer ces fonctions et les faire appeler encore et encore pour un certain nombre de problèmes. Il y a donc vraiment de bonnes choses avec lesquelles travailler. Une autre chose que vous devez savoir est que les fonctions peuvent prendre des arguments, comme je l'ai mentionné précédemment, le journal des points de la console est un type de fonction. Helloworld est en fait un argument qui est pris en compte par console.log Donc, rien que dans le cadre de notre fonction ici, nous pourrions en fait modifier un peu cela. Nous pouvions donner, nous pouvions le faire. Nous pouvons en faire une fonction qui s' imprime réellement sur la console. Nous pouvons créer notre propre fichier console.log si vous le souhaitez. Supposons que nous appelions cela notre propre journal de console. Très bien, et c'est juste pour l'entraînement. Vous ne le feriez pas dans la vraie vie, mais vous diriez que vous lui donnez votre propre journal de console, puis que vous nommez un type de paramètre. Vous pouvez le faire très simplement en l'appelant R1, R1 ou R2, selon le nombre d'arguments que vous avez Mais en réalité, tu peux lui donner le nom que tu veux. Vous pourriez donc simplement dire « valeur ». Et puis, au lieu de mettre du code en dur sur la console, du code dur, du codage en dur dans le journal de la console En fait, nous pouvons simplement transmettre le prop de valeur et l' utiliser à la place Maintenant, tout ce que j'ai saisi en tant que paramètre dans notre propre fonction de journal de console, lorsque je l'appellerai, il l' affichera sur la console Si je le disais, bonjour à tous. Au lieu de Hello World, quand je reviens à la console, elle affichera Bonjour tout le monde au lieu de HelloWorld ou de Tous les types de fonctions peuvent prendre des paramètres tant qu'on leur a donné cette capacité et que quelque chose a à voir avec ce paramètre, ce qui est une autre partie vraiment géniale des fonctions, n'est-ce pas ? Nous pouvons l'utiliser de différentes manières. Nous pouvons également renvoyer une valeur à partir d'une fonction, puis enregistrer cette valeur dans une variable. Cette variable peut ensuite être utilisée comme n'importe quelle autre. C'est un moyen très utile d'obtenir des données. Si votre fonction ne possède pas d'instruction return, elle renverra undefined Vous pouvez utiliser ce type de fonctions pour mettre à jour une variable en dehors d' elle-même sans que les données soient renvoyées directement par la fonction. Nous pouvons également renvoyer une valeur à partir d'une fonction, puis simplement enregistrer cette valeur dans une nouvelle variable. Ainsi, par exemple, si nous voulions obtenir la somme d' un ensemble de nombres, n'est-ce pas ? Alors pourquoi ne pas faire CONST, la somme est égale à. Et puis certains accepteront, et il faudra trois arguments. Ça va prendre R1, Argh Ça va prendre un numéro engourdi parce que nous allons prendre Je fais de mon mieux pour être descriptif lorsque vous définissez des paramètres, simplement pour voir les personnes qui reviennent et utilisent votre fonction, pour savoir ce que vous vouliez qu'elles y insèrent. Nous allons donc faire un m1, un m2 et un m3. Et puis certains renverront simplement num1 plus num2 plus le numéro trois C'est donc ça. Il suffit de trois chiffres et certains d'entre eux en tout. Mais ce que nous pouvons faire en fait, au lieu de simplement appeler cette fonction, nous pouvons concevoir. Nous pouvons créer un, nous pouvons créer une variable appelée résultat, puis nous pouvons enregistrer les résultats de cette fonction dans les résultats de cette variable. Nous pouvons donc faire certains des nombres 12.3. Et ensuite, si nous enregistrons la réponse dont nous enregistrons le résultat du journal de console, le total devrait être égal à six. Jetons donc un coup d'œil. Si vous voyez ici, le total est égal à six et nous en avons six, ou en six, c'est la somme de notre fonction ici. C'est donc aussi un moyen très utile si vous voulez simplement appeler quelque chose et que vous souhaitez enregistrer ce résultat et l' utiliser ensuite à un autre endroit. C'est également un excellent moyen de l'avoir. Parfois, il se peut que vous souhaitiez simplement savoir si une fonction fonctionne ou non. Vous n'avez pas nécessairement besoin qu'il renvoie une valeur particulière. Dans ce cas, nous utiliserons un autre type de données appelé booléen. booléens sont un type de données spécial qui ne peut avoir que l'une des deux valeurs Ces mots ne sont pas écrits entre guillemets et sont simplement destinés à être utilisés comme indicateurs pour déterminer si quelque chose a réussi ou non. Par exemple, si vous voulez savoir si votre fonction s'est déroulée comme prévu, vous pouvez renvoyer true dans le cas où elle a fonctionné et false dans le cas contraire. Parfois, cependant, vous voulez simplement savoir si une fonction fonctionne ou non. Vous voulez peut-être simplement savoir si un aspect particulier de votre application fonctionne et si vous souhaitez que cette fonction s'exécute si elle fonctionne, ou si vous voulez que cette fonction renvoie la valeur true si elle fonctionne ou la valeur false si ce n'est pas le cas. C'est ici que nous aborderons ces booléens. Utilisons les déclarations if pour nous aider à déterminer si une personne est en âge de conduire ou non. Faisons donc une liste d'âges. Faisons une liste d'âges. Et nous allons en faire, voyons voir, 12 pour 2 557,70. Nous voulons donc obtenir le nombre renvoyé de personnes âgées de de 16 ans, n'est-ce pas ? Hum, nous pouvons donc créer une fonction afin de filtrer cela pour nous, n'est-ce pas ? Faisons donc le coût de l'âge de conduire. C'est ce que nous appellerons notre fonction. Et nous allons essentiellement le faire. Nous allons maintenant écrire notre déclaration si. La structure de l'instruction if est la suivante. Vous écrivez si, alors ce sont vos conditions. Donc, si le, voyons, va prendre en compte un âge, si l'âge est supérieur à 16, 16 ans. Nous voulons que la fonction renvoie la valeur true. Sinon, nous voulons que la fonction renvoie false, n'est-ce pas ? Si nous enregistrons le résultat. Si nous épargnons, nous obtenons une variable que nous appelons l'âge de conduire avec les âges. Et nous allons utiliser le premier ou le numéro et indexer un, puis nous allons obtenir le résultat console.log. Voyons voir. Voyons ce que nous obtiendrons. Donc, si l'âge est supérieur à 16 ans, renvoyez vrai, sinon renvoyez faux. Faux. C'est donc correct parce que l'âge, l'indice d'agent un est en fait de quatre, ce qui n'est pas supérieur à 16. Mais si nous le changeons en indice de quatre, par exemple, il deviendra vrai parce qu'il s'agit d' une note, c'est-à-dire qu' il s'agit d'un âge de 70 ans. C'est donc une autre façon vraiment intéressante de l'utiliser et nous pourrions probablement l' implémenter dans une sorte de vérification des pilotes, n'est-ce pas ? Ainsi, plutôt que de prendre une série d'âges, nous pourrions déduire que l'âge provient d'un site Web où l'on demande aux gens s'ils sont en âge de conduire ou non, si vous êtes un peu comme demander si quelqu'un veut acheter une voiture. Vérifiez donc s' il y a des personnes en âge de conduire. Vous pouvez également utiliser quelque chose comme ça dans des applications pratiques. Opérateurs ternaires, il existe des manières plus concises d' écrire des instructions if else en utilisant ce que l'on appelle un opérateur ternaire. Un opérateur ternaire n'est qu'une notation abrégée pour cela. Sinon, des instructions qui peuvent condenser en une seule ligne de code Voyons comment cela pourrait être un exemple. façon dont vous écririez ceci, c'est simplement dire que vous donneriez votre valeur. Donc tu dirais ça. Donc, pour ce qui est de l'âge de conduire, de l'âge pour des lustres, direz-vous. Et pour être honnête, nous pourrions même simplement transmettre un chiffre, si nous le dépassons comme 25. Ensuite, nous dirions que si c'est vrai, si c'est vrai, nous voulons que cela redevienne vrai. Sinon, nous voulons qu'il renvoie la valeur false. Et c'est ainsi que nous écririons cela, comment cela fonctionne si la première pièce est notre condition. Quelle que soit la comparaison que nous essayons de faire ou la situation que nous essayons de déterminer. La première, puis nous demanderons, est-ce vrai ? Alors, est-ce que ce que nous avons dit ici est vrai ? Si c'est vrai, cela fera réellement apparaître cette première valeur, n'est-ce pas ? Si c'est vrai, ce sera le résultat ou ces deux-points ici, il reviendra. Faux, c'est faux. Si c'est vrai, il renverra cette première condition ou faux, ce sera le résultat, comme nous l'avons déjà dit, contrairement aux mathématiques, equals est l'opérateur d'affectation, pas l'opérateur d'égalité. L'opérateur d'égalité est assez similaire. C'est juste une version dupliquée, deux signes égaux. Vous pouvez utiliser l'opérateur d' égalité pour déterminer si une chose est égale à une autre. Le résultat d'une comparaison utilisant l' opérateur d'égalité renvoie toujours un booléen, soit vrai si la comparaison est valide, soit faux si elle ne l'est pas Jetons un coup d'œil à quelques exemples de cela. Nous console.log. Un est égal à un. Nous verrons que, fondamentalement, cela redeviendra vrai. Mais si nous faisions que un est égal à deux, cela devrait être faux comme nous nous y attendions. C'est parce que ce n' est pas nécessairement le cas, eh bien, c'est parce que 1,2 sont des nombres différents, non ? Mais la version 1.1 est la même. Mais si l'on fait que la chaîne 1 est égale à 1, on pourrait penser qu' elle renverra la valeur false, qu'elle renvoie en fait la valeur true. Maintenant, ce dernier point est intéressant. Pourquoi le numéro un correspond-il à la chaîne 1 ? C'est parce que l'opérateur de double égalité n'est pas ce que l'on pourrait appeler strict. Cela permettra aux données qui peuvent être converties les unes vers les autres de renvoyer la valeur vraie. Toutefois, si vous voulez être certain que seules les données du même type renvoient la valeur vraie, vous pouvez utiliser son grand frère, l' opérateur d'égalité stricte, composé de trois signes égaux. Essayons-le. Maintenant, si nous voulions comparer si le nombre un était réellement égal à la chaîne un. Nous voulons en être sûrs, par exemple connaître les chiffres à partir de la chaîne. Nous utiliserions trois signes égaux, l'égalité stricte. Et nous voyons ici que lorsque nous l'exécutons, cela nous donne en fait le résultat faux parce que 1, le nombre n'est pas égal à la chaîne, mais nous devons utiliser la stricte égalité C'est le signe triple égal pour obtenir ce résultat Il existe de nombreux types d'opérateurs et de JavaScript. Passons en revue quelques-unes d' entre elles et voyons comment elles fonctionnent. Exclamation equals est un opérateur de comparaison utilisé pour vérifier si deux valeurs ne sont pas égales Elle compare deux valeurs et renvoie la valeur true si elles ne sont pas égales et la valeur false si elles sont égales. Ceci est utilisé pour tester si une valeur est inférieure ou égale à une autre valeur. Elle renvoie true si la première valeur est inférieure ou égale à la seconde valeur et false si la première valeur est supérieure à la seconde valeur. Comme en mathématiques, vous pouvez également utiliser uniquement le plan inférieur à pour comparer si la première valeur est inférieure à la seconde valeur sans que le signe égal soit seconde valeur sans supérieur à N égal. Ceci est utilisé pour tester si une valeur est supérieure ou égale à une autre valeur. Renvoie la valeur true si la première valeur est supérieure ou égale à la seconde valeur et la valeur false si la première valeur est inférieure à la seconde. Encore une fois, comme en mathématiques, vous utilisez simplement le symbole supérieur à pour comparer si la première valeur est supérieure à la seconde en omettant le signe égal à double extrémité Il s'agit de l'opérateur logique AND. Elle est utilisée pour tester si deux conditions sont toutes les deux vraies et renvoie la valeur vraie si les deux conditions sont vraies et fausses. Si l'une des conditions est fausse, il s'agit d'un opérateur logique OR. Il est utilisé pour tester si au moins l'une des deux conditions est vraie et renvoie vrai si au moins l'une des conditions est vraie et faux si les deux conditions sont fausses. Quatre boucles. For-loop est un type d'instruction de flux de contrôle, peu comme une instruction if else. La différence avec les quatre boucles, cependant, est que, comme leur nom l'indique, elles comme leur nom l'indique, bouclent encore et encore jusqu'à ce qu' une condition spécifique soit atteinte pendant un certain temps La syntaxe de base d'une boucle for concerne la condition d'initialisation , puis l'incrémentation ou la décrémentation, puis le code que vous Essayons-les et voyons comment ils sont utilisés dans la pratique. Comme nous l'avons mentionné, la boucle for est une sorte d'instruction du flux de contrôle, n'est-ce pas ? Cela nous permet donc essentiellement d' itérer sur quelque chose pendant un certain nombre d'itérations jusqu'à ce qu'il atteigne le nombre donné Donc, la façon dont nous écririons ceci est de taper quatre. Nous dirions pour n'importe quel numéro qui serait initialisé. Il existe un initialiseur comme pour, disons que je suis égal à zéro Nous exécuterions ceci, ceci, ceci pour une boucle jusqu'à ce que j'atteigne un nombre donné. Supposons que nous l'exécutions jusqu'à ce que je sois supérieur à dix ou inférieur à dix. Nous l'exécuterions jusqu' à ce qu'il atteigne cette condition pour exécuter cette boucle. Ensuite, chaque fois que nous exécutons la boucle, chaque itération de la boucle, nous allons en ajouter une pour arriver à la fin de notre boucle Si nous n'avions pas cette véritable itération, elle fonctionnerait indéfiniment et cela se terminerait, ce qui se traduirait par une boucle infinie Donc, pour chaque fois que je cours, nous allons faire I plus plus, ce qui revient à dire que je serai moi plus lui-même, je plus je plus un. Donc, peu importe ce que je suis à ce moment-là, ajoutez-en un. Ainsi, lorsque nous exécutons cette fonction, nous allons simplement enregistrer sur la console ce que je suis. Nous allons donc me connecter à la console, puis nous verrons combien de fois je reçois. Je me présente. Je pense que ça devrait vraiment être oui, j'ai moins de dix ans. Donc, tant que j'aurai moins de dix ans, je le dirigerai. Et une fois que j'aurai dix ans ou plus, il cessera de fonctionner. Une fois que nous aurons vu cela, nous verrons qu'il est exécuté et qu'il nous a donné les chiffres de zéro à neuf. Très bien, génial. Alors que des boucles. Maintenant que vous maîtrisez les quatre boucles, parlons des boucles entières Elles sont très similaires aux boucles en ce sens qu'elles continuent à tourner en boucle encore et encore jusqu'à ce qu'une condition spécifique soit remplie Ce qui les différencie toutefois, c'est qu'ils ne contiennent que la condition, sorte qu'ils s'exécutent tant que cette condition est vraie. Cependant, les boucles sont un peu délicates car à un moment donné vous devez être sûr que cette condition sera fausse. Sinon, cela donnera lieu à ce que l'on appelle une boucle infinie, ce qui n'est pas une bonne chose. Cela peut bloquer votre navigateur car votre code ne s'arrêtera jamais de s'exécuter. Champ d'application. L'un des sujets les plus importants à comprendre et JavaScript maintenant que nous avons commencé à parler de fonctions est la portée. Et je ne parle pas du bain de bouche. La portée fait référence à l'accessibilité diverses variables, fonctions et autres éléments de données dans votre code pendant l'exécution. Il existe deux types de scope en JavaScript : global et local. La portée globale est une variable, fonction ou un objet qui fonctionne correctement en dehors d' une fonction et auquel on peut accéder par n'importe quel code du programme. La portée locale, quant à elle, est une variable, fonction ou un objet qui a été défini dans une fonction et qui n'est donc accessible que dans les limites de cette fonction Voyons comment cela fonctionne dans la pratique. Pour montrer en gros comment cela fonctionne, créons-en une qui dit VAR globale, variable globale. Je dois dire que je suis mondial. Ensuite, nous en aurons une qui créera une fonction, puis nous y imbriquerons une variable locale. Pour vous en donner une idée, donnez-vous une idée de ce à quoi cela ressemble réellement dans la pratique. Nous allons donc créer une variable appelée bar local, indiquera que je suis local. Et à partir de ce point, vous reviendrez , il vous suffit de renvoyer la fonction. Ainsi, lorsque nous essayons d'accéder à la VAR locale de Console.log, si nous essayons de nous connecter à la console en dehors de la fonction, comme nous le ferons ici, leucovorin constatera que nous ne sommes pas en mesure d'y accéder Il indique la zone de référence, barre locale n'est pas définie. Et c'est parce que la console ne peut pas le voir, n'est-ce pas ? Le reste du code ne sait pas que local existe car il est piégé dans cette fonction. Cependant, si nous essayons de l'enregistrer dans la fonction, vous remarquerez qu'elle s'allume un peu comme nous l'avons fait et vous remarquerez qu'elle s'allume un peu comme nous l'avons qu'elle s'ajoutera réellement une fois que nous appellerons la fonction, bien sûr, elle enregistrera Barnes local sur la console Ça dit que je suis du coin. C'est parce que cette variable est essentiellement piégée dans la fonction elle-même. Mais vous verrez que si nous le faisons avec la variable globale, peu importe, si nous l'enregistrons sur console en dehors de la fonction, ou si nous la journalisons à l'intérieur la fonction parce qu' il s'agit d'une variable globale, elle est accessible aux deux endroits. 9. Objets: Objets. Un objet est un ensemble de paires de valeurs clés qui peuvent représenter un objet réel ou une structure de données complexe Les objets sont l'un des éléments fondamentaux de JavaScript. Ils englobent en fait la plupart des autres types de données, structures de données simples telles que des tableaux ou chaînes de caractères, ou de structures plus complexes telles que des classes, des fonctions et même d'autres objets Un objet peut être créé à l'aide la notation littérale de l'objet, qui utilise des accolades. Les clés d'un objet sont toujours des chaînes, mais les valeurs peuvent être de n'importe quel type de données, y compris d'autres objets Écrivons quelques objets pour voir un exemple de la façon dont tout cela fonctionne. Les objets sont donc l'un des meilleurs aspects de JavaScript. En gros, tout ce que je suis en JavaScript est construit sur ces objets. Et comme dans la vraie vie, les objets peuvent être n'importe quoi. Voyons comment nous écrivons réellement nos objets. Donc, si vous voulez créer notre première constante d' objet, mon objet, et vous en écrivez le nom comme vous écririez le nom d'une variable. Mais au lieu de cela, vous mettez un signe égal, puis vous mettez ces bretelles ondulées Et c'est ainsi que vous savez que c'est un objet. Ensuite, j'ai dit que vous pouvez mettre à peu près n'importe quoi dans un objet . Mais la façon dont nous structurons nos données au sein des objets est que nous avons une clé, qui est essentiellement l'identifiant, puis une valeur qui correspond à cette clé, qui est essentiellement la valeur de celle-ci. C'est ce que l'on appelle une paire clé-valeur. Ils fonctionnent par paires car la clé est l'identifiant et la valeur est la valeur réelle. Nous pouvons accéder à la valeur de la clé en accédant à la clé. La façon de procéder serait donc se rappeler que nous avons déjà parlé de la notation par points. Nous pouvons utiliser la notation par points pour accéder à la valeur de la clé. Donc, la façon dont nous procédons est consigner mon objet sur la console avec la touche point, puis nous serions en mesure d' accéder à n'importe quelle valeur. La console enregistre donc la touche point de mon objet , puis les résultats devraient être une valeur. C'est ainsi que vous pouvez accéder aux valeurs des objets dans JavaScript, dont vous pouvez le faire. Ensuite, si vous enregistrez l'objet lui-même sur la console, cela vous donnera en fait le tout, la clé et la valeur entre accolades Toutefois, vous pouvez faire bien plus que de simples objets de valeur clé. objets peuvent en fait contenir d'autres objets, comme nous l'avons dit, ils peuvent contenir des tableaux, des chaînes Ils peuvent contenir des données de base de n'importe quel type. La clé peut être n'importe quoi. Il n'est pas nécessaire que ce soit le mot clé. Ça peut être comme Apple, ça peut être n'importe quel mot. Vous pouvez donc aussi, comme je l'ai dit, avoir eu des objets dans des objets. Et en fait, cet objet peut être votre maison. Vous pouvez faire tout ce que vous pouvez dire « maison » et vous pourriez parler des différents appareils électroménagers que vous avez dans votre maison, dans votre cuisine, peut-être d'une cuisinière et un four à micro-ondes et je ne sais pas, mais pas d'un four. Vous pouvez avoir une cuisinière à micro-ondes et peut-être avoir votre cuisinière, votre micro-ondes et vous êtes malade, non ? C'est une liste. C'est votre maison, c'est une pièce de votre maison, la cuisine. Et puis c'est une liste des appareils de la cuisine, non ? Ou des listes des objets qui se trouvent dans l'évier de la cuisine, y compris un appareil électroménager. Mais prenons cette idée et allons un peu plus loin. Créons un objet appelé ma maison. Et commençons à le remplir et voyons comment nous pouvons vraiment aller loin avec ces objets. Alors allons-y et donnons ma maison et mon adresse. Peut-être que nous vivons, ajoutez une à trois rues principales. Ensuite, allons-y et donnons-lui une ville. Peut-être que nous vivons à New York. Alors allons-y et nous le donnerons. Que devons-nous lui donner d'autre ? Donnons-lui quelques chambres, peut-être un certain nombre de pièces. Nous vivons à New York, peut-être dans seulement trois pièces. C'est une jolie petite maison dans laquelle nous vivons. Alors donnons-lui aussi, donnons-lui des appareils. Écrivez cet automne sur cette tendance. Donnons-lui une liste, une liste d'appareils. C'est ce que nous avons fait, voyons quel autre. Encore une fois, nous avons un four à micro-ondes. Quoi d'autre ? Nous avons une cuisinière, micro-ondes et nous avons un lave-vaisselle, et nous avons un lave-vaisselle mais cette fois, réduisez le volume. Génial. Voyons ce que je pourrais faire d'autre. Faisons attention aux occupants, faisons moins que le nombre d' occupants que nous avons chez nos résidents. Alors allons-y et listons. Mais utilisons une liste d'objets. Donc, au lieu d'utiliser un seul objet, faisons une liste d'objets. Créons donc le premier. aurai fait, donne-lui un nom. Nous dirons maman, elle va avoir 29 ans, disons qu'elle va encore avoir 29 ans. Et donnons-lui le métier de... Allons chercher ce boulanger et ce professeur. Et nous y voilà. Nous avons l'occupant. premier occupant s'appelle maman, 29 ans, et la profession de l' occupant est enseignante. Génial. Comme je le disais, nous ne pouvons pas nous contenter d'avoir plus d'un occupant, nous devons l'avoir sous forme de liste. Allons-y donc et mettons-les entre crochets, ce qui indique qu' il s'agit d'une liste ou d'un tableau. Et ensuite, créons notre deuxième occupant. Alors allons-y et remplissons-le, nous allons le nommer papa, 35 ans, ingénieur logiciel. Et nous allons passer à autre chose très rapidement. Ensuite, nous pouvons maintenant accéder aux propriétés de cet objet, n'est-ce pas ? Nous pouvons accéder aux propriétés imbriquées. Nous pouvons enregistrer sur console votre maison, la mienne, puis nous pouvons enregistrer sur console l'occupant. Et comme vous le voyez, il le pré-remplit ici, ce qui est plutôt cool. C'est une fonctionnalité JavaScript très intéressante. La fonctionnalité Vs Code, je dois dire, où une fois que vous avez un objet, il s'automatise. C'est comme un intellisense, je crois, mais il vous indique quelles propriétés existent sur ces objets. C'est plutôt cool. Vous ne pouvez donc accéder qu'aux biens immobiliers. Nous allons donc consulter les occupants , puis entrer dans les occupants parce que c'est une liste Souvenez-vous que nous sommes des listes, nous ne pouvons pas simplement notation par points dans une liste. Nous devons utiliser des index. Supposons que l'occupant du premier index accède au père, puis nous nommerons la profession Nous allons donc passer au premier indice, puis nous accèderons à l'occupation. Et oh, voici une erreur intéressante, nous devons faire référence ici. C'est parce que JavaScript est un peu différent de TypeScript, qui fonctionnera sur et dans une leçon ultérieure Mais JavaScript ne déclenche pas nécessairement une erreur lorsqu'un élément est du type incorrect ou une valeur incorrecte dans le code lui-même Il l'appellera une fois que vous aurez essayé d'exécuter ce code Ce n'est pas idéal pour les applications plus volumineuses car vous recevrez alors de nombreuses erreurs lorsque vous écrirez le code et vous ne saurez pas d'où elles proviennent. Mais si vous détectez l'erreur avant d'exécuter le code, alors que vous essayez simplement de l'enregistrer, je pense que c'est beaucoup plus utile. Donc, ici, la raison pour laquelle nous avons eu cette erreur est que dans le tableau, les valeurs un et deux ne sont pas réelles. Ce ne sont pas des clés et ce ne sont pas vraiment des cordes. Ils sont donc comme s'il n'y en avait pas, il n'y avait pas de valeur 1 ou 2 de nom de variable lorsque vous l' écrivez comme ceci. Il ne nous reste donc plus qu' à les transformer en chaînes. Une fois que nous les avons transformées en chaînes, ne nous reste plus qu'à les exécuter à nouveau. Et comme vous pouvez le voir ici, nous avons pu accéder au métier de notre père Donc, ma maison ou les occupants accèdent à l'occupant dans l'index numéro un de la profession, ingénieur logiciel, ce sont nos pères Professions fonctionne assez bien, comme vous pouvez imaginer à quel point cela peut être utile dans un scénario où vous aimez vraiment avoir un objet utilisateur, comme peut-être vous créez un site Web de type Facebook et vous avez un utilisateur et il a une adresse e-mail, un mot de passe, amis, ils ont des photos, ils ont toutes ces différentes parties de les données qui leur sont associées. Vous souhaiterez peut-être les stocker dans un objet et, tout comme nommer l'objet ou lui donner un nom d'utilisateur, vous tout comme nommer l'objet ou lui donner un nom pourriez leur attribuer un identifiant dans l'objet et, en gros, stocker toutes ces données complexes dans cet ensemble de données plus vaste et le maintenir uniforme pour vos utilisateurs. Ainsi, si vous avez un site comptant environ 500 utilisateurs que vous accédez à leur page de profil, vous pouvez accéder aux données de manière uniforme. C'est un autre avantage des objets. Il vous permet d' accéder aux données d'une manière vraiment très uniforme. Et vous n' avez pas nécessairement à vous soucier du fait que si une donnée n'existe pas, vous pouvez lui faire renvoyer une valeur spécifique. Mais neuf fois sur dix, en supposant que les données existent, elles renverront simplement cette valeur et vous serez prêt à partir 10. Forme de base: Bien, maintenant que nous avons fini tout apprendre sur JavaScript, mettons-le en pratique en utilisant certains des éléments que nous avons créés auparavant Tout d'abord, nous allons utiliser ce petit formulaire que nous avons créé ici, et nous allons en fait l'utiliser pour donner à nos utilisateurs notre réponse lorsqu'ils soumettent leurs informations dans notre fichier HTML d'index , comme nous en avons déjà parlé. Ne serait-il pas vraiment cool que nos utilisateurs soumettent leur prénom, leur nom de famille et leur âge ? Peut-être qu'ils ont reçu une sorte de message d'accueil personnalisé, non ? Donc, au lieu d'un utilisateur élevé ou simplement d'un utilisateur élevé, c'est peut-être Hi John. Bonjour Stephen. Bonjour Harry. Allons-y donc et ajoutons cette fonctionnalité particulière. Mais ce que nous allons faire ici, c'est créer une petite balise P. Et nous allons, nous allons lui donner une identification. Souvenez-vous donc de la façon dont nous avons parlé des identifiants et de la manière dont ils peuvent être utilisés pour cibler des éléments spécifiquement à l'aide du CSS. Ils sont également très utiles lorsque vous travaillez avec JavaScript. Nous pouvons donc utiliser les identifiants ici pour cibler un élément spécifique. Nous allons donc utiliser le paramètre ID ici et attribuer à cette balise P un identifiant de salutation. Et c'est avec cela que nous allons travailler lorsque nous créerons nos utilisateurs. Nous allons également procéder en saisissant ce prénom. Nous allons également lui donner un IV du prénom, juste pour savoir quelle entrée nous devons cibler la valeur Donc, pour que tout cela fonctionne, nous allons écrire une fonction JavaScript qui sera appelée lorsque vous appuyez sur le bouton d' envoi. Créons donc une fonction OnClick. Donc, concepts onclick, appelons-le Submit. Soumettre. Nous voulons, nous voulons essentiellement obtenir les informations qui se trouvent dans cette première entrée, nous voulons obtenir la valeur de cette entrée. Pour ce faire, vous pouvez donc cibler la fenêtre, qui est l'objet le plus grand qui contient toutes les informations de la page. Nous allons donc cibler la fenêtre. Comme nous l'avons également mentionné, nous pourrions le faire en utilisant le document. Parce que, comme nous l'avons dit, JavaScript fonctionne avec le modèle d'objet de document. Vous pouvez utiliser window ou document et taper window point get. En fait, utilisons le document. Faisons du document point get element by ID, qui est une méthode disponible sur le document. Et nous allons transmettre l'identifiant que nous avons donné la première entrée appelée prénom. Nous allons le sauver. Et enregistrons simplement le résultat sur la console. Et voyons voir, renvoyons exactement ce que c' est, d' accord, donc onsubmit, nous allons le renvoyer et nous sommes ces boucles console.log qui se contenteront de journaliser sur la console On Submit Je veux juste voir ce qui se passe quand on appelle ça. La dernière chose que nous allons devoir faire ici est de l'appeler à partir du fichier HTML lui-même , car nous devons connecter les deux. Comme nous avons ici notre bouton de type de saisie, nous allons lui attribuer un attribut onclick Et cet attribut ne sera qu' une connexion à nos fonctions JavaScript. Donc, la fonction ultime sur laquelle nous allons nous asseoir, nous allons simplement la remplacer par « Soumettre ». Très bien, alors retournons le document, sortons. Nous n'avons pas parlé des valeurs. Faisons le point du document, obtenons élément par valeur de point d'identification parce que nous voulons la valeur réelle de celui-ci. Très bien, faisons vraiment quelque chose ici. Disons le prénom de Const. Et nous allons, nous allons le définir sur cette valeur. Alors prends ça et je vais le mettre là. Et maintenant, FirstName est la valeur. Nous allons renvoyer FirstName, mais avant de le renvoyer, nous allons également le renvoyer dans console.log D'abord. Très bien, et sauvons ça. Donc, lorsque nous saisissons John et que nous cliquons sur Soumettre, nous y voilà. Cela fonctionne. Nous recevons John lorsque nous cliquons sur le bouton Soumettre. Parfait, c'est exactement ce que nous avions prévu. Maintenant que nous avons cette variable avec laquelle nous pouvons travailler, nous devons maintenant l' utiliser, n'est-ce pas ? Pouvons-nous donc enregistrer cela dans une variable particulière ? Bien sûr, nous pouvons, comme nous l'avons déjà dit, enregistrer le résultat d' une fonction dans une variable. Très bien, alors nous, comment sont les variables du prénom ici ? Que voulons-nous faire d'autre ? Ce que nous voulons, c'est renvoyer ce nom en particulier dans une sorte de message d'accueil à notre utilisateur, n'est-ce pas ? Donc ce que nous allons faire ici, c'est prendre la valeur du prénom, Serena Prenez les résultats et nous allons en fait le mettre dans une fonction de salutation. Créons donc un message d'accueil en tant que fonction. Et nous allons dire que la fonction de salutation devrait revenir. Ou tu sais ce que sera la salutation. Une fonction d'effet secondaire. Ce qu'il va faire, c' est cibler le document, obtenir un élément différent par identifiant. N'oubliez pas que nous avons donné un identifiant à cette balise P. Je peux l'apporter ici sur le côté pour que vous puissiez les voir. Nous avons donc donné à cette balise P un identifiant de salutation. Nous allons donc obtenir élément par identifiant ou identifiant du message d'accueil. Ensuite, il y a cette autre propriété appelée innerHTML Vous avez donc ciblé un élément, vous voulez maintenant placer quelque chose dans son code HTML interne. Nous voulons donc ensuite cibler le code HTML interne à points. Et nous voulons essentiellement mettre le nom de l'utilisateur dans cette phrase. Nous allons donc dire si notre message d'accueil doit être assez simple. Nous allons donc dire bonjour, bonjour. Et puis le nom de la personne, quel qu'il soit. De plus, nous allons prendre en compte un paramètre pour cette fonction appelé user. Ensuite, nous passerons cela à la petite fonction que nous avons ici. Ainsi, lorsque le message d'accueil est appelé, il va prendre le, va accéder au document, récupérer l'élément avec l'idée de salutation. C'est donc notre balise P ici. Il va récupérer le code HTML interne, qui est ce petit espace juste entre les balises P ici. Et il va insérer ce haut plus le nom de l'utilisateur. C'est assez simple. Déplaçons donc cette fonction qui est hissée au-dessus de la fonction d' envoi ici Parce qu'une autre chose importante à savoir à propos de JavaScript est que parfois les fonctions ne sont pas accessibles tant qu'elles ne sont pas créées. Donc, si je devais appeler « salutation », si je devais dire « salutation », dans cette fonction, je pourrais recevoir une erreur indiquant qu' elle a été utilisée avant d'avoir été créée. Parfois, cela provoque des erreurs, parfois non, mais il est préférable de simplement les placer dans l'ordre dans lequel vous les utilisez. Créons donc un message d'accueil. Ensuite, prenons la valeur du prénom et nous la transmettons dans les salutations Nous allons passer du prénom au message d'accueil. Et ça va être, ce sera notre fonction que devons réellement faire, c'est de l'ajouter. Nous devons donc, au lieu de l'appeler, nous devons ajouter qu'il utilisera du code HTML interne. Et nous allons utiliser des plus et des égaux pour obtenir un égal à ceci. Donc, si nous recommençons, cela devrait fonctionner. Nous avons cliqué sur Soumettre. Nous y voilà. Nous l'avons, John. Ce n'est pas tout à fait formaté , d' accord, mais nous pouvons y remédier Parfait Jetons donc un coup d'œil à ce que nous avons fait ici. Nous avons ciblé le document. Nous avons obtenu l'élément par le message d'accueil ID, qui est cette balise P. Nous avons ciblé son code HTML interne et nous l'avons utilisé plus un signe égal. Nous y ajoutons donc quelque chose. Et nous avons ajouté hi et le nom de l'utilisateur. C'est assez simple, non ? Et puis, pour apprécier une bonne salutation amicale, ce n'est qu'une façon de tirer parti de tout ce que nous avons fait avec notre JavaScript jusqu'à présent. Petite fonction super simple à faire. Mais c'est juste un très bon exemple de la façon dont nous pouvons réellement travailler avec les valeurs qui nous ont été données. Comme vous pouvez l'imaginer, nous pourrions le configurer pour faire différentes choses, comme prendre leur nom de famille ou leur âge. Nous pourrions dire : « Hé, vous êtes en âge de conduire, allez obtenir votre permis ou quelque chose comme ça », ou n'importe quelle réponse que vous souhaitez obtenir en fonction de leur âge. Comme vous pouvez le constater, cela peut être utilisé de différentes manières. 11. Formulaire avancé: Jetons maintenant un coup d'œil à notre projet précédent, notre projet HTML et CSS, et voyons comment nous pouvons y ajouter du JavaScript. Comme vous vous en souvenez, nous avons notre site Web ici. Et en gros, ce que nous voulons faire maintenant, c'est probablement y ajouter un peu d' interactivité interactive en utilisant JavaScript, maintenant que nous sommes des professionnels du JavaScript Donc, si vous vous souvenez, il y avait ici cette petite image appelée états actifs. Cela nous donne donc tout un tas d'états actifs différents qu'ils aimeraient que nous ajoutions au formulaire lui-même. Comme vous pouvez le constater, cela signifie en grande partie à l' utilisateur que quelque chose ne peut pas être vide lorsqu'il clique sur Soumettre Il y a donc aussi un petit validateur d' e-mails ici. Alors allons-y et essayons de mettre en œuvre certaines de ces choses. Faisons-le comme ça. Si l'utilisateur essaie de soumettre et que la valeur est nulle, nous voulons renvoyer un message d'erreur. Voyons donc à quoi cela pourrait ressembler. Supposons que nous puissions cibler, utiliser la fonction HTML interne, la propriété HTML interne dont nous venons de parler, ainsi que l'ID pour vraiment atteindre ce que nous essayons de réaliser ici. Alors voyons voir. Si vous remarquez également le, les couleurs autour du bord sont rouges ici. Nous voulons donc probablement faire quelque chose avec le CSS et le stylet C'est donc deux choses que nous voulons faire. Ajoutons donc un onsubmit onclick. Ajoutons une fonction onsubmit. Et il est brun en ce moment parce que nous ne l'avons pas encore fait. Faisons donc cela sur Submit. Génial. Fonction de base Et en cliquant, je l'ai mal orthographié ici aussi. Ils sont réels sur Click. Faites un onsubmit. Génial Très bien, donc dans cette fonction onsubmit, nous voulons essentiellement cibler toutes les valeurs de l'entrée Il existe donc différentes manières de le faire. Nous pourrions les obtenir, allons-y, faisons-le vraiment un peu plus manuellement pour l'instant, faisons ID FirstName Faisons l'identifiant de LastName. Et nous allons faire l'identifiant de la couleur de l'e-mail. Je veux probablement faire quelque chose différent avec certains d'entre eux aussi. Et puis celui de la semaine dernière, oh oui, nous allons créer un identifiant ou un mot de passe. D'accord ? Nous avons donc nos quatre éléments d'entrée avec des identifiants. Ce que nous voulons faire maintenant, c'est obtenir tous ces éléments par identifiant. Et nous pouvons le faire au sein de la fonction onsubmit ou en dehors de celle-ci Donc, si nous voulions simplement créer ces variables ici, nous pourrions utiliser le prénom Génial Nous avons donc maintenant ciblé tous ces éléments. Ainsi, sur submit, nous voudrons ensuite dire si, si la valeur du point d'entrée est égale, égale non égale, est égale à null, alors nous voulons prendre cela, cela prendra cette entrée et nous lui donnerons un nom de classe C'est ce qu'on appelle la liste des classes. point ajoutera, ajoutera le, appellera cela une erreur. Faisons encore une chose ici. Nous allons ajouter un style appelé erreur. Erreur. Et cela changera la bordure en un pixel, un pixel. Rouge uni. C'est ce que nous allons faire pour le moment. Donc, s'il est vide, il ajoutera cette bordure rouge. Voyons si cela fonctionne. Impossible de lire les propriétés d'une valeur de lecture nulle. OK, cela nous donne donc une erreur car il n'y a aucune valeur pour chacune d'elles. Très bien, après quelques recherches, j'ai compris quel était le problème Ce que nous devions vraiment faire, c'est déplacer tous ces éléments au sein de la fonction car, fondamentalement ils n'existent pas, à l'extérieur. Ils n'existent pas pour vous, il n' y a rien que la fonction puisse réellement saisir. Donc, en les intégrant à la fonction, nous arrêtons de traiter cela, de déclencher cet air. Donc, en gros, ce que nous voulons faire, c'est ça. Nous voulons récupérer l'élément add, vérifier si la valeur est égale à cette chaîne vide. Si elle est égale à cette chaîne vide, alors nous voulons prendre cet élément pour entrer dans sa liste de classes, puis ajouter une erreur. Comme vous vous en souvenez, nous avons ajouté une erreur classique en bas de page, qui va donner la bordure, la modifier pour qu'elle soit d'un pixel, une bordure pleine au lieu d'être en pointillés ou en pointillés, et en faire une bordure rouge Donc, en théorie, si nous l'avons fait correctement, lorsque nous cliquons sur le prénom et non sur la valeur, cela va l'ajouter Il va ajouter cette classe d' erreur et il va devenir rouge. Alors cliquons dessus et nous l'avons, il fonctionne correctement. Cela nous indique que, hé, il y a une erreur ici. Génial Ce que nous voulons faire maintenant, c'est parier sur chacun d'entre eux. Allons-y donc et ajoutons rapidement toutes ces autres options. Nous avons donc essentiellement pris toutes les entrées. Nous avons créé un tableau afin pouvoir le parcourir beaucoup plus rapidement. Ensuite, nous avons dit que pour chaque entrée, si la valeur d'entrée n'est rien, nous voulions ajouter l'erreur de classe. C'est tout ce que nous avons fait pour créer cet air pour nous. Très bien, tu y vas. Nous avons vu comment utiliser JavaScript pour interagir avec ce formulaire de manière très basique. Je vous encourage à aller jusqu'au bout, à ajouter les petits points d' exclamation et les petits espaces de texte pour voir jusqu'où vous pouvez réellement aller avec