Développement Web Full Stack pour les débutants - Partie 3 : Javascript et API

1. Bienvenue dans ce cours !: Bienvenue dans le développement web de pile complète pour les débutants. Ce cours est conçu pour vous faire passer d'un débutant à un développeur web, capable non seulement de construire des interfaces utilisateur frontaux d'un site web, mais aussi de concevoir et de construire le back-end pour interagir avec eux. Alors qui suis-je ? m'appelle Chris et je serai votre instructeur pour ce cours. Je suis un développeur web et aussi le producteur de nombreux tutoriels qui enseignent des milliers d'étudiants les compétences dont ils ont besoin pour construire des sites Web et des applications. Ce cours est la troisième partie de la série complète, où nous continuerons à construire sur tout depuis les deux premières parties de ce cours. Ce cours porte sur JavaScript, les API et l'utilisation de sources de données externes. Nous commençons par examiner les bases de JavaScript et le contrôle de flux. Cela vous donnera une introduction aux bases du langage de programmation JavaScript, y compris en arrondissant les choses avec un projet Dragon Slayer. Ensuite, nous continuons notre parcours JavaScript en regardant les manipulations DOM , les fonctions et les événements, puis en terminant la section avec un autre mini projet pour vous donner plus de pratique. Nous passons ensuite aux boucles, tableaux, objets et expressions régulières. Ne vous inquiétez pas si vous n'êtes pas sûr de ce que tout cela signifie est encore. Nous allons couvrir tout ce que vous devez savoir, puis construire un jeu de correspondance de forme amusant. Voyez comment tout va bien ensemble. Nous terminons ce cours en construisant une application de recherche de chansons. C' est là que les choses ont vraiment commencé à devenir intéressantes car nous couvrons API et récupérons des données à partir de sources externes. Ici se connectera à la bibliothèque iTunes. Nous recherchons des données que nous pouvons utiliser dans nos projets. Nous examinons également certaines fonctionnalités JavaScript de nouvelle génération d'ES6 et au-delà. Tout en expliquant les choses d'une manière simple, simple à comprendre, que même les débutants comprendront. En plus de renforcer les choses avec des projets amusants mais stimulants le long du chemin. J' espère que vous êtes tous ravis d'en apprendre davantage sur JavaScript et API dans la troisième partie de ce cours. 2. Télécharger les fichiers de démarrage: Bienvenue les gars. Donc, comme vous le savez déjà, c'est la troisième partie de la série. Il n'est pas essentiel que les deux premières parties soient terminées avant de poursuivre ce cours, vous pouvez simplement zoomer directement si vous voulez simplement en savoir plus sur JavaScript et les API. Cependant, si vous n'avez pas terminé les premières sections, quelque chose que vous aurez besoin de progresser avec ce cours est les fichiers de démarrage pour l'application de recherche de chanson. Si vous allez à la classe et cliquez sur votre projet est ici. Plus tard dans le cours lorsque nous commençons à travailler avec des API, aura la chanson finder.zip, HTML et CSS, ou dicté à partir des sections précédentes du cours. Si vous ne l'avez pas déjà fait, il suffit de télécharger ces données HTML et CSS. Ensuite, vous pouvez continuer avec cette cause comme d'habitude. Mais si vous prenez des parties antérieures ou non, vous aurez également besoin des fichiers de démarrage JavaScript. Ceux-ci incluront tout HTML, et CSS pour nous aider à apprendre JavaScript. Ce que nous dirons était de créer les structures de squelette JavaScript ou chaque leçon individuelle. Ainsi, nous pouvons plonger directement pour apprendre dans nos JavaScripts. Alors allez-y et téléchargez les fichiers dont vous avez besoin. Ensuite, passons à tout apprendre sur JavaScripts. 3. Variables, chaînes et nombres: Nous allons lancer cette section en regardant quelques-unes des plus couramment utilisées et aussi quelques-unes des choses les plus simples que JavaScript a à offrir. Le premier concept est appelé types de données. Les types de données sont assez simples. Comme il semble, est un type de données que nous utilisons. Pour commencer, j'ai ouvert les fichiers de démarrage JavaScript sur le numéro 1, qui est des variables, des chaînes et des nombres. Ouvrez ensuite la page d'index, fois dans un éditeur de texte et aussi à l'intérieur du navigateur. Dans cette vidéo, nous allons regarder deux de ces types de données, savoir des chaînes et des nombres. Une chaîne est juste un texte, comme un nom, et le nombre est, comme vous l'avez deviné, un nombre positif ou négatif, tel que l'âge d'un utilisateur. En outre, nous avons besoin d'un moyen de stocker ces valeurs aussi. C' est là que les variables entrent en jeu. Nous allons passer à Chrome et ouvrir la console, cliquez avec le bouton droit de la souris, puis Inspecter. Ensuite, si nous allons à cet onglet de console, qui est juste ici, c'est une console où nous pouvons exécuter du JavaScript. Comme toujours, si vous utilisez un navigateur différent, tous les principaux navigateurs disposent d'un outil de console. Vous pouvez généralement trouver cette console dans le menu, souvent sous les outils de développement. Nous avons déjà vu l'onglet Eléments et nous avons également examiné brièvement l'onglet Réseau. Cette fois-ci, nous allons utiliser cette console. Pour commencer, nous créons une variable en utilisant le mot-clé var. Allons juste faire défiler pour que nous puissions voir ça un peu mieux. Tapez le mot-clé var. Une variable est simplement un endroit pour stocker nos données, comme une chaîne ou un nombre. Nous donnons ensuite un nom à cette variable. Si nous voulions stocker le nom d'un utilisateur, nous pourrions simplement stocker le nom comme celui-ci. Donc le nom var est égal à « Chris ». Ce symbole égal attribue cette valeur à ce nom de variable Chris. Ensuite, on finira par un point-virgule. Les chaînes doivent être entourées de guillemets. Cela peut être soit des guillemets simples, qui est juste comme ça, ou des guillemets doubles comme nous avons utilisé ici, puis appuyez sur « Entrée ». Pour appeler cela dans la console, il suffit de taper le nom de notre variable. Donc, si nous tapons le nom, nous obtenons alors la valeur de Chris. Nous voyons quelques flèches sur le côté gauche. La flèche des droits est les entrées, que vous mettez dans. Donc, nous avons ajouté le nom de Chris et puis revenons vers nous avons la valeur de Chris. Si nous voulions changer la valeur de cette variable, nous pouvons faire ce qu'on appelle des réaffectations, nous allons juste l'appeler un nom de variable. Tout comme cela sans le mot-clé var et définissez-le à une nouvelle valeur avec un symbole égal. Nous pouvons ajouter un nouveau nom tel que Chris Dixon, puis un point-virgule à la fin et appuyer sur « Entrée ». Maintenant, nous pouvons revenir à la valeur de Chris Dixon. Encore une fois, si vous appelez juste nom, appuyez sur « Entrée », nous allons obtenir est enfin retourné une fois de plus. Nous pouvons créer autant de variables que nous en avons besoin, comme notre âge aussi. Encore une fois, en utilisant le mot-clé var, nous définissons le nom de l'âge et définissons cette valeur sur une valeur de 34. Lorsque vous travaillez avec des nombres, nous n'entourons pas la valeur entre guillemets comme nous l'avons fait avec la chaîne. Il suffit de taper le numéro comme celui-ci, puis de cliquer sur « Entrée ». Si nous appelons notre variable d'âge en tapant l'âge, nous recevons alors la valeur de 34. Parfois, vous voyez non défini aussi, tout comme nous l'avons vu ici, comme lorsque nous définissons une variable. C' est juste parce que rien n'est retourné. Dans ce cas, nous sommes simplement en train de définir ou d'assigner cette variable. Nous aurons notre nom et la variable d'âge déclarés. Mais comment pouvons-nous l'utiliser maintenant ? On pourrait faire quelque chose comme les ajouter à une phrase. Si nous déclarons une nouvelle variable appelée jointes, nous pouvons définir cela égal à une chaîne. Donc « Mon nom est » puis ajoutez un espace. Ensuite, nous pouvons ajouter un symbole plus à ajouter. Si c'est à la fin de cela, je vais ajouter notre variable de nom. Donc ce sera « mon nom est », puis Chris. Ensuite, ajoutez un symbole plus. Pour ajouter une deuxième chaîne, nous pouvons ajouter « et je suis » puis un espace, puis ajouter notre variable d'âge à la fin. Donc ça devrait imprimer  : « Mon nom est » Chris, « et je suis » 34. Joindre des chaînes et des variables comme celle-ci avec le symbole plus est également appelé concaténation ou concat pour abrégé. Mais ce n'est qu'un terme fantaisiste pour les regrouper. Ensuite, appuyez sur « Entrée » et nous pouvons taper joint, qui sont nom de variable. Maintenant, il y a notre chaîne, ce que nous nous attendions. JavaScript est également le langage de script par défaut pour tous les principaux navigateurs. C' est pourquoi tout fonctionne bien à l'intérieur de la console. Mais plus réaliste, nous voulons ajouter au code dans notre projet. Si nous passons à nos fichiers de démarrage, encore une fois, dans notre premier, qui est des variables, des chaînes et des nombres, nous pouvons arriver à travailler ici. Vous n'avez pas besoin d'utiliser les fichiers de démarrage si vous préférez. Mais diriez-vous que tapait toute la structure html dont nous avons besoin à chaque fois. Il sera également pratique pour référence future aussi. JavaScript peut être ajouté même la tête ou la section du corps. Il est souvent préférable de l'ajouter au bas de la section du corps juste avant la balise de fermeture. Cela signifie que vous ci-dessous avez fait la dernière et ne pas bloquer le reste du html du chargement. Le JavaScript est placé à l'intérieur des balises de script. Ouvrons la balise de script d'ouverture et de fermeture. Ensuite, nous pouvons aller de l'avant avec l'ajout de notre code à l'intérieur, comme nous l'avons fait à l'intérieur de la console. Donc, comme nous l'avons fait avant, nous pouvons ajouter notre variable de nom égal à Chris. Pour afficher cela dans la console, nous pouvons faire un console.log. Ensuite, à l'intérieur du crochet, nous pouvons ajouter notre nom de variable. Alors enregistrez cela, effacez la console et rechargez. Voilà notre valeur de Chris. Nous pouvons ensuite réattribuer ce nom comme nous l'avons fait à l'intérieur de la console. Cette fois sans la variable, puis changez ceci pour être mon nom complet. Encore une fois, avec la console, enregistrez la même variable de nom, rechargez, et il y a notre nom de réassignation. Faisons l'âge suivant. Donc l'âge var est égal 34. Nous pouvons également faire notre même chaîne que nous avons fait à l'intérieur de la console de joint. Nous pouvons définir cela égal à « Mon nom est » ajouter un espace. Ensuite, nous pouvons ajouter notre nom de variable, donc ce sera « Mon nom est Chris ». Puis la chaîne de l'espace « et je suis ». Ensuite, ajoutez à la fin, la variable d'âge avec le point-virgule à la fin. Nous pouvons console.log notre nouvelle chaîne de jointes. Sur la console, rechargez, et maintenant on y va, il y a notre chaîne, qui inclut nos variables de notre nom et de notre âge. Nous avons dit plus tôt que nous pouvons utiliser des guillemets doubles ou simples lorsque vous travaillez avec des chaînes. Il y a un cas où nous devons être prudents. Si nous changeons nos guillemets pour être simples, c'est donc unique au début, puis à la fin de cette chaîne, puis remplacez également ces deux ici. Donc maintenant toutes les chaînes sont simples, enregistrez, puis actualisez. Nous voyons que cela fonctionne toujours parfaitement bien. Le problème se pose lorsque nous voulons utiliser l'une des mêmes citations dans notre texte. Si vous optez pour « je suis », au lieu de « je suis », juste comme ça, nous pouvons voir que nous avons une lettre bleue ici pour indiquer un problème. Si nous enregistrons et puis actualisons, nous obtenons une erreur de syntaxe. Cela devrait parce que nos citations ne sont plus par paires et les choses sont un peu mélangées. Réparer cela est assez simple. Tout ce que nous devons faire est d'entourer la section dans le type opposé de guillemets. Donc, ici, plutôt que d'avoir les guillemets simples gratuits, changeons ceux-ci autour de ceux pour être doubles. Juste comme ça. Nous pourrions même changer cette section ici, ou nous pouvons changer tous ces simples pour être doubles, sauf celle que nous voulons ici. De toute façon, cela fonctionnera bien. Enregistrez, puis rechargez. Maintenant, notre travail de cordes est parfaitement bien avec l'apostrophe ici. Donc, c'est juste quelque chose à prendre en compte lors de l'utilisation de citations. Maintenant, nous allons passer à la prochaine vidéo où nous allons jeter un oeil à l'arithmétique JavaScript et aux opérateurs. 4. Arithmétique et opérateurs Javascript: Dans la dernière vidéo, nous avons été introduits des nombres en JavaScript par magasin à notre époque dans une variable. Il y a tellement plus que nous pouvons faire avec ces chiffres. Allons à la console et voyons cela en action. Si nous cliquons sur ce symbole ici et effacons la console, nous pouvons maintenant commencer à jeter un oeil aux chiffres et à l'arithmétique. Commençons par une arithmétique de base, comme la soustraction, la multiplication, l'addition et la division. Donc à l'intérieur ici, nous pouvons simplement le dire 10, enlever cinq, puis retourner, nous obtenons la valeur de cinq. On peut aller de l'avant et en faire 34. Une multiplication est le symbole de début. Tout d'abord, multipliez par 7, et c'est une valeur de 238. L' addition est le symbole plus que vous avez vu auparavant. Donc 12 ajouter 6 est 18. Si nous voulons diviser en JavaScript, c'est la barre oblique avant. Trois divisés par trois nous donne une valeur d'un. Essayons un autre. 12 divisé par 4, ce qui est 3. Nous avons également le module, qui est un symbole de pourcentage. Faisons 12 pour cent, puis 3 pour cent. module est le reste qui reste après la division. Trois va en 12 également. Il ne reste plus rien. La même chose si nous faisons 12 et puis quatre. Quatre va en 12, 3 fois sans plus rien. La valeur est 0. Cependant, si nous changeons pour être 13, puis libre, libre ira dans 13, 4 fois faisant 12. Avec un reste. C' est pourquoi nous obtenons la valeur d'un juste ici. Tous ces ajouts, soustractions, multiplications, divisions, et aussi module, un rôle, ce que nous appelons les opérateurs arithmétiques. Les opérateurs AMA deux en JavaScript. Nous couvrirons ces deux-là pendant que nous suivrons ce cours. Ces opérateurs peuvent également être utilisés pour les valeurs stockées dans des variables également. Passons à notre fichier de démarrage en numéro deux, qui est arithmétique et opérateurs. Fermons ça. Ouvrez notre deuxième page d'index, et ouvrez également cela dans le navigateur. Je vais juste copier le chemin d'ici, puis coller cela dans le navigateur. Examinons d'abord quelques opérateurs arithmétiques à l'intérieur de notre éditeur de code. Donc juste ici, vous pouvez voir tous les opérateurs qui auront à l'intérieur d'un commentaire. Attribuons 0s ceci à partir de variables. Variable, disons qu'on a quitté l'école à l'âge de 16 ans. Alors on pourrait dire notre âge. Mon âge a 34 ans. Ensuite, nous pouvons faire quelques calculs pour déterminer combien d'années depuis que nous avons quitté l'école. Créons une nouvelle variable appelée années depuis l'école. Alors nous pouvons mettre ça à notre âge. Mon âge a 34 ans. Supprimez le nombre d'années depuis que nous avons quitté l'école, qui est stocké à l'intérieur de cette variable. Cela se traduira par 34, à emporter 16. Vérifions cela avec un journal de console. Tout comme nous l'avons fait avant un console.log et puis nous pouvons passer dans notre variable d'années depuis l'école. Maintenant, la console devrait faire ces photos de calcul. Alors rafraîchissez. On a une erreur d'orthographe. Donc, console.log actualiser. Donc, son numéro 18. Une autre chose qui peut amener les gens vers le haut est ce qu'on appelle la priorité de l'opérateur. C' est juste un nom de fantaisie pour l'ordre dans lequel les choses se produisent. Si nous créons une variable qui stocke la valeur des nombres libres, juste comme ceci. Faites défiler vers le bas, nous allons ajouter un commentaire. Donc ordre de fonctionnement. Dessinons un nombre tel que 10 plus 10 multiplié par 2. Puis se trouve à un deuxième journal de console. Nous pouvons connecter à la console la valeur du nombre. Sauvegardez cela, rechargez et vous obtenez la valeur de 30. Si nous revenons en arrière et regardons notre chiffre, nous pouvons nous attendre à ce que le calcul soit exécuté de gauche à droite. Dix plus 10 est 20 multiplié par deux est 40. En fait, ce qui se passe, c'est qu'une multiplication arrive en premier. Dix multiplié par 2 est 20, puis le 10 est ajouté sur, nous donnant une valeur de 30. C' est la valeur que vous voyez dans la console juste ici. C' est parce que la multiplication et aussi la division ont une priorité plus élevée que la soustraction ou l'addition. Si on voulait des changements. Donc le 10 plus 10 arrive en premier. Nous pouvons les envelopper à l'intérieur des parenthèses, également appelées parenthèses. Juste comme ça. Ces parenthèses s' assureront que ce calcul est effectué en premier. Ce sera 20 multiplié par deux avec une valeur de 40. Vérifions cela dans une console en rafraîchissant. Il y a une valeur de 40. Il est intéressant de noter aussi, que si tous les opérateurs ont la même priorité, alors le calcul est effectué de gauche à droite. Ce sera le cas si tous les opérateurs étaient addition ou soustraction. Nous avons dit plus tôt ces ajouts, multiplications et ainsi de suite. Qui a appelé les opérateurs ? Il y a aussi deux autres opérateurs disponibles outils appelés incrément et décrément. Donnons un coup d'envoi à ça. Si maintenant le journal de la console des salaires communs avec les deux barres obliques. Et celui-là aussi. Pour nous donner une console claire. En dessous de cela, nous voulons créer une nouvelle section, et c'est pour incrémenter et décrémenter. Nous savons maintenant que le nombre de variable est une valeur de 40. Si nous devons aller de l'avant et ajouter le nombre plus, plus, juste comme ça, cela augmenterait la valeur d'un à chaque fois. Si nous sauvegardons cela et passons à la console avec un journal de la console du numéro. Cela devrait maintenant incrémenter la valeur de 40 pour être 41. Si nous devions aller de l'avant et augmenter cela à nouveau, nous avons le numéro plus, plus. Cela devrait maintenant nous donner une valeur de 42. C' est quelque chose que nous verrons assez souvent en JavaScript, particulier lors de l'utilisation de boucles. Jetons maintenant un coup d'oeil aux décréments, qui, comme vous l'avez peut-être deviné, réduiront la valeur d'une à chaque fois. Je vais le faire avec les symboles négatifs, juste comme ça et recharger. Maintenant, notre valeur initiale de 40 est maintenant réduite à 39.Ceci est une chose courante à faire pour augmenter dans un endroit appelé, par exemple, ou augmentation du nombre d'articles dans le panier. C' est quelque chose de vraiment utile à savoir lors de l'utilisation de JavaScript. 5. Alerter, solliciter et confirmer: Nous avons déjà examiné l'utilisation du journal de la console dans cette section. Ceci est utile pour imprimer des choses et le débogage. Pendant le développement, Il n'est pas conçu comme un moyen de communiquer avec les utilisations de nos sites Web ou applications. Cependant, il y a quelques moyens, multiples, plus précis, d'autres méthodes que nous pouvons utiliser pour communiquer avec l'utilisateur. Le premier d'entre eux est une alerte. Une alerte est utilisée pour afficher une boîte d'alerte à l'utilisateur. Les alertes sont comme une boîte pop-up avec quelques informations et un bouton correct pour fermer cette fenêtre contextuelle. Au plus basique, nous pouvons simplement sortir quelque chose à l'utilisateur. Passons à nos scripts à l'intérieur de notre fichier de démarrage. Passons au numéro trois, alertes, invites et confirmation. Maintenant, ouvrez cela et puis allez à copier le chemin, puis coller est à l'intérieur du navigateur ou vous pouvez simplement double-cliquer sur le fichier d'index à l'intérieur du dossier. En bas sous le niveau commun d'alerte, qui va sortir un popup d'alerte et puis à l'intérieur, nous pouvons faire tout ce que nous voulons comme un calcul. Dix modules, puis trois donne une sauvegarde et ouvrez cette page d'index dans le navigateur. Actualisé. et il y a notre boîte Alerte sur l'écran avec la valeur de 1. Nous pouvons l'utiliser pour ajouter une taxe aussi au lieu d'un calcul. Rappelez-vous que les chaînes de texte ont les guillemets. Alors disons bonjour, rafraîchir. Comme notre texte juste ici, cette alerte peut même contenir des variables aussi telles que notre exemple de nom d'avant. Nous avions une variable de nom égal à Chris. Nous pourrions aller de l'avant et ajouter ceci à la fin de notre chaîne. Bonjour plus notre nom de variable. Sauvegardez ça et nous irons dit bonjour Chris, à l'intérieur de l'alerte. Si nous allons de l'avant et ajoutons encore plus de texte à notre alerte, ajoutons un peu plus de texte juste après cela. Disons s'il vous plaît connectez-vous pour continuer, enregistrez cela et rechargez. Par défaut. Tout cela reste sur une seule ligne. Nous pouvons casser ceci sur une nouvelle ligne en utilisant une barre oblique inverse, puis un N. A l'intérieur de notre chaîne ici, ajoutons la barre oblique inverse et la N. Cette barre oblique inverse suivie d'un N, peut sembler un peu inhabituelle, mais nous allons couvrir ce que c'est et aussi quelques similaires plus tard quand nous regardons les expressions régulières. Pour l'instant, donnons que sauver, recharger et maintenant est un saut de ligne juste après ce N. Le prochain que je veux vous montrer est prompt. Cela apparaîtra à l'invite de l'utilisateur pour une entrée. Continuons, commentons ces deux-là avec des barres obliques avant, puis descendez à cette section du bal de promo. Commençons par un simple invites qui est le nom des invites, puis les crochets juste après. A l'intérieur, nous pouvons ajouter une chaîne de texte alors bonjour, quel est votre nom ? Avec un point d'interrogation, une page d'index et c'est à quoi ressemble une invite par défaut. Nous obtenons un texte, ce que nous avons fait juste ici, puis nous obtenons une section d'entrée où l'utilisateur peut taper quelques informations. Cela peut même être annulé ou cliquez sur OK. Si nous entrons notre nom comme Chris ici, puis appuyez sur « OK », rien ne semble se passer. C' est parce que nous avons besoin d'un moyen de stocker l'entrée de l'utilisateur. Nous savons déjà que nous pouvons le faire en utilisant une variable. Définissons ces invites sur égale à une variable. Disons que var name est égal aux invites et puis pour voir cela en action, nous pouvons faire un journal de console puis enregistrer la valeur de notre nom juste pour récapituler, nous demandons à l'utilisateur d'entrer leur nom, installera toutes ces entrées à l'intérieur d'une variable appelée name, puis l'afficher dans la console. Sauvons ça et essayons ça. Dites Chris, d'accord, faites un clic droit et inspectez. Ouvrez la console et voilà notre valeur de Chris. Essayons un de plus. Il suffit de taper n'importe quoi à l'intérieur ici et il y a la valeur stockée dans cette variable de nom. Cette invite si renvoie la valeur entrée par l'utilisateur, comme nous venons de voir ou nous pouvons sélectionner la console. Nous cliquons sur le bouton de la console ici, nous obtenons ensuite la valeur de null retournée. Vous rencontrerez souvent à la fois null et indéfini. Ils signifient tous les deux qu'il manque quelque chose. Les deux types de données null et indéfini ont également pris en compte les types de données, tout comme le nombre et la chaîne que vous avez déjà vus. Passons à notre éditeur de texte et créons une alerte. Accueillons le nouvel utilisateur avec l'espace de bienvenue textile comme nom variable, puis ajoutons une chaîne à la toute fin avec un point d'exclamation. Si nous sauvegardons ça, rechargeons, nous pouvons ajouter notre nom, appuyer sur « Okay » et il y a notre chaîne de texte de bienvenue, Chris, avec l'exclamation à la fin. Si nous rechargeons le navigateur et à la place cliquez sur « Annuler », nous obtiendrons le mot bienvenue null. Null fait référence à une référence d'objet vide. Cela n'a peut-être pas trop de sens pour le moment parce que nous n'avons pas encore regardé ce que sont les objets. Mais cela signifie généralement qu'il manque quelque chose. Fondamentalement, prompt retourne même rien. Toute la valeur qui est tapée, indéfinie est un peu plus générique. Un exemple de non défini est lorsqu'une variable est vide. Si nous allons de l'avant et créons une nouvelle variable, disons un nouveau nom et alors nous ne définissons pas de valeur à cela. Si nous alertons la valeur du nouveau nom et puis sauvegardons cela, actualiser, dit nos alertes initiales, annulons la liste et puis nous obtenons notre deuxième alerte qui dit est indéfinie et c'est la valeur de notre variable indéfinie ici. Ensuite, nous voulons jeter un oeil à certains assez similaire à invite. Commentons ces trois lignes ici. Si vous utilisez la commande Code Visual Studio et barre oblique avant commenceront toutes les lignes ensemble. Allons maintenant pour confirmer. Juste en dessous, nous pouvons jeter un oeil à la façon dont une confirmation est utilisée. Tout comme les deux premiers, nous tapons le nom, puis les crochets juste après. Commençons par ajouter une chaîne de texte. Vous devez être plus 16 entrer, disons, s'il vous plaît confirmer et puis évidemment le navigateur fermer d'avant, recharger. C' est le texte que nous voyons ici. Nous avons aussi un bouton d'annulation et d'accord. Cliquez sur l'annulation et aussi d'accord. Rien ne semble se produire lorsque nous cliquons sur ces boutons. Puisque la confirmation n'a pas de champ d'entrée, elle retournera true. Si l'utilisateur clique sur OK, tout tombe est que le bouton Annuler est sélectionné. Nous pouvons le voir à nouveau en définissant cela à une variable. Disons que l'âge var est égal à confirmer. Puis un journal de console, qui passe dans notre variable d'âge. Ensuite, ce vérifier ceci. Ouvrez l'annulation Cliquez sur la console. Rechargeons. Si nous cliquons sur OK, nous obtiendrons la valeur de true alors si nous cliquons sur annuler, nous obtenons la valeur de false. Cette valeur vraie ou fausse est également un autre type de dates JavaScript important qui est appelé booléen. Booléen à simplement une valeur vraie ou fausse. Une fois que nous obtenons ces valeurs vraies ou fausses, nous avons besoin d'un moyen d'en faire quelque chose. Par exemple, si les utilisateurs de plus de 16 ans, nous pouvons les laisser voir la page ou si l'utilisateur est connecté, nous pouvons leur laisser voir la section admin pour aider à décider quoi faire dans ces cas, nous avons des instructions conditionnelles, et c'est ce que nous commencerons à examiner ensuite. 6. Instructions if/else et comparaison: Dans la dernière vidéo, nous avons mentionné des valeurs booléennes qui sont vraies ou fausses. Nous avons également besoin d'un moyen d'effectuer réellement une action basée sur si une valeur est vraie ou fausse. Pour ce faire, nous avons des déclarations conditionnelles. Par exemple, si la santé d'un joueur est nulle ou moins, le joueur perdra la vie. Si un joueur recueille 100 pièces, alors nous pouvons ajouter une vie supplémentaire. Ou si l'heure actuelle est le matin, nous pourrions ajouter un message de bonjour. Si c'était dans l'après-midi, on pourrait changer le message pour « Bonjour ». Fondamentalement, ces déclarations conditionnelles nous permettent décider ce que nous voulons que notre code fasse dans des circonstances différentes. Un type courant d'instruction conditionnelle est If else. Commençons par la section Si. Cela dit fondamentalement si quelque chose est vrai, alors exécutez ce code. Je veux démarrer un fichier. Ouvrons le numéro 4, qui est sinon et la comparaison. Ensuite, je vais ouvrir ça dans le navigateur. Ensuite, jusqu'à notre section de script, nous pouvons commencer à créer une instruction if. Nous ajoutons le mot-clé If suivi des crochets ou des parenthèses. Ensuite, nous ajoutons un ensemble d'accolades, où nous pouvons ajouter notre code que nous voulons exécuter. Disons que nous voulons ajouter une alerte pour notre message. Nous devons ajouter une condition où l'on est alerte à exécuter. A l'intérieur de ces crochets, nous ajoutons notre condition. Nous disons que si 10 est supérieur à 5, alors lancez cette alerte. Ajoutons quelques textes disant que 10 est supérieur à 5. Si c'est vrai, cette alerte sera exécutée. Si ce n'était pas vrai, alors rien ne se passerait du tout. Sauvegardez ça, rechargez et il y a notre alerte disant que 10 est supérieur à 5. Ce symbole supérieur à est un opérateur de comparaison. Il y a beaucoup plus que nous pouvons utiliser, comme le symbole moins de. Maintenant 10 n'est pas moins de 5, donc ce sera faux. Ce qui signifie que si nous allons dans le navigateur et actualisons, la déclaration est maintenant fausse, donc nous ne verrons pas l'alerte. C' est parce que, comme nous l'avons mentionné précédemment, le code ne fonctionnera que si la condition est vraie. Nous pouvons également combiner ces symboles supérieurs et inférieurs à avec l'opérateur égal aussi. Par exemple, si nous changeons cela pour 10. Si nous devions dire si 10 est supérieur à 10, alors faites cette alerte. Actualiser. Nous ne voyons pas l'alerte car 10 n'est pas supérieur à 10. Cependant, si nous voulons exécuter une vérification pour voir si 10 est égal ou supérieur à, nous pouvons les combiner comme ceci. Supérieur ou égal à. Maintenant, notre condition devrait être vraie. Ensuite, on voit l'alerte. Cela fonctionne également avec moins que trop, comme vous pouvez vous y attendre. Si 10 est inférieur ou égal à, lancez l'alerte. Cela peut être déroutant au début parce que nous avons déjà utilisé ce symbole égal pour affecter une valeur à une variable. Avant que nous faisions des choses telles que var x est égal à 5. Ici, nous assignons la valeur de 5 à ce x avec le symbole égal. Au lieu de cela, nous utilisons le double égal. Nous pouvons dire si x est égal à 10, puis alerter la valeur de true. Enregistrez cela et actualisez. Bien sûr, nous ne recevons pas l'alerte apparaissant parce que x n'est pas égal à 10. Nous pouvons également ajouter un point d'exclamation pour faire le contraire. Une exclamation puis égale. Si x n'est pas égal à 10, nous devrions maintenant faire apparaître l'alerte. Essayons autre chose. Si nous ajoutons un nombre, donc nous avons déjà la valeur de x égal 5. Si vous ajoutez une seconde variable de y, et cette fois si nous définissons le nombre à l'intérieur d'une citation comme celle-ci, cela sera maintenant considéré comme une chaîne parce qu'il est à l'intérieur d'une guillemets. Nous pouvons vérifier cela si nous faisons un journal de console pour chaque variable. Faisons un journal de console juste en dessous. Nous pouvons dire type de, puis x. Sauvegardez cela. Si nous ouvrons la console, nous devrions maintenant voir quel type de données est contenu à l'intérieur de x. Nous voyons que le x est un nombre auquel nous nous attendions parce que nous l'avons déclaré juste ici. Cependant, si nous allons de l'avant et que cela soit y, actualisez. Maintenant, nous voyons que le type de données est chaîne parce que cela est ajouté à l'intérieur des guillemets. Avec cette connaissance, voyons comment cela affecte notre comparaison. Allons de l'avant et comparons la valeur de y, qui est une chaîne à 5. Je vais sauver. Ceci est une chaîne et ceci est le nombre. En théorie, ils ne devraient pas marcher. Actualiser. On voit toujours le pop-up. Cela évalue à vrai même s'il compare un nombre à une chaîne. C' est parce que le double égal ne vérifiera la valeur plutôt que le type de données si nous voulons que cette comparaison soit encore plus stricte et vérifie également si la valeur ainsi que le type de date sont égaux. Nous pouvons aller de l'avant et changer cela pour être triple égal. Sauvegardez ça, rechargez. Maintenant, nous ne voyons pas la fenêtre contextuelle car le type de données n'est pas égal. Essayons ceci avec x et x est un nombre. Nous comparons si x est égal à 5, fois en valeur et aussi en type de données. Est bien sûr, il devrait être vrai. Nous voyons le pop-up ou vrai. Cela fonctionne parce que x est de type égal et de valeur à 5. Cependant, nous pourrions également ajouter un point d'exclamation et les deux égaux, ce qui fera exactement le contraire. Cela ne lancera l'alerte que si x n'est pas égal à et la valeur à 5. Si nous sauvegardons et rechargeons, nous ne voyons plus l'alerte. C' est ainsi que nous pouvons utiliser des opérateurs de comparaison, et ils sont vraiment utiles lorsqu'ils sont combinés avec des instructions if. Comme nous venons de le voir, est si l'instruction s'exécutera si un code est vrai. Mais que faire si nous voulons qu'une alternative s'exécute si un code n'est pas vrai ? Pour cela, nous devons ajouter une deuxième condition appelée else. Supprimons cet exemple d'avant et créons une nouvelle variable appelée hungry, et définissons d'abord cela pour être vrai. Ensuite, nous pouvons dire si faim, alors à l'intérieur des citations, nous pouvons alerter, « obtenir de la nourriture ! ». Juste comme ça. Si nous ajoutons simplement le nom de la variable comme ceci, cela vérifiera si la variable est vraie. Ensuite, si c'est le cas, il exécutera du code. Sauvegardons, rafraîchissons, et voici notre texte de prendre de la nourriture. Cependant, si nous voulions une alternative, nous pouvons également ajouter d'autres. Le deuxième bloc de code lancera une alerte si la condition est fausse. Cette fois, disons, peut-être plus tard. Si nous changeons faim pour être faux, cette déclaration si est maintenant fausse. Par conséquent, ce code ne s'exécutera pas. Mais au lieu de cela, l'instruction else lancera des alertes, peut-être plus tard. Essayons cela dans un navigateur. Actualiser. Il y a notre texte de « peut-être plus tard ». Essayons encore une fois en changeant cela à vrai. Maintenant, on va chercher de la nourriture. Ces déclarations if else sont vraiment une partie fondamentale de JavaScript et aussi de la programmation en général. Si vous êtes encore un peu incertain, je vous recommande de revenir sur cette vidéo pour mieux comprendre comment elles fonctionnent. Bien que vous obtiendrez beaucoup plus de pratique pour cette section. Ensuite, nous allons aller encore plus loin en imbriquant ces déclarations ensemble. 7. Imbrication des instructions if else: Passons à nos fichiers de démarrage et à notre section d'instructions conditionnelles d'imbrication. Ici, dans notre dernier exemple était un simple if-else pour vérifier si la condition est vraie. Donc, nous vérifions si la variable de « hungry » était définie sur true. Si c'était le cas, nous avons alerté le texte sur « Obtenir de la nourriture ». Sinon, nous obtiendrons le texte de « Peut-être plus tard ». Parfois, nous pouvons vouloir vérifier si plus d'une condition est vraie avant d'exécuter notre code. Pour cela, nous pouvons imbriquer nos déclarations if-else. Pour voir cela en action, je vais ajouter une deuxième variable. Alors ajoutons une deuxième variable de « envie », et je veux définir ceci sur « Pizza ». Puis à l'intérieur de cette première section « if », je vais imbriquer dans une seconde déclaration « if ». Faisons un peu d'espace pour rendre cela plus clair, donc nous allons dire si « envie » est égal à « Pizza », alors nous pouvons ajouter notre bloc de code pour dire alerte, « Gimme pizza », et nous pouvons également supprimer cette alerte d'ici aussi. Donc, nous vérifions d'abord si la condition est vraie en vérifiant si la personne a faim. Si c'est vrai, il fera alors aussi une deuxième vérification pour voir si l'envie est égale à la pizza, puis il dira « Pizza Gimme ». Sinon, on aura le texte de « Peut-être plus tard ». Sauvegardons cela et ouvrons cela dans le navigateur et rafraîchir et il y a un texte de « Gimme pizza ». Mais si la première condition était vraie, si faim mais que vous n'avez pas envie de pizza ? Donc, changeons cette variable en quelque chose d'autre, comme, « Chinois ». Enregistrez cela, puis actualisez. Donc, nous ne voyons aucune alerte. En effet, bien que la faim soit définie sur true, envie n'est plus définie sur « pizza ». Par conséquent, cette alerte ne s'exécutera pas. Pour ce cas, nous pouvons également fournir une instruction « else », qui est également imbriquée à l'intérieur d'ici. Donc « else », et puis à l'intérieur de ce bloc, nous pouvons mettre une alerte avec le texte de « Lets obtenir de la nourriture ». Rappelez-vous que si vous vouliez ajouter une apostrophe comme ceci, cette citation unique est la même que les deux outers, donc nous devrions changer cela pour être des guillemets doubles pour que cela fonctionne. Donnez cela une sauvegarde, et puis si nous passons au navigateur et puis rechargeons, nous obtenons le texte de, « Allons chercher de la nourriture ». C' est parce que cette déclaration « if » est à l'origine vraie, donc elle passera à la deuxième ici. On n'a pas envie de pizza, donc on n'a pas cette alerte ici. Toute survaleur entraînera l'exécution de l'instruction « else », puis imprimera le texte de, « Allons obtenir de la nourriture », et comme prévu, si nous changeons « hungry » pour être faux, cette instruction « if » ne fonctionnera pas du tout. Au lieu de cela, l'instruction « else » s'exécutera et nous obtiendrons un texte de « Peut-être plus tard ». C' est ainsi que nous pouvons imbriquer des déclarations if-else à l'intérieur des autres. Nous pouvons aller encore plus loin et imbriquer à l'intérieur de cette déclaration « if » aussi, mais généralement nous ne voulons pas aller trop profond parce que cela rend notre code plus complexe et illisible, et il y a souvent des solutions plus élégantes à cela. C' est comme ça que nous pouvons imbriquer nos déclarations conditionnelles, et ensuite nous allons jeter un oeil à Else-if. 8. Sinon si et opérateurs logiques: Nous avons appris que si les instructions vérifient si une condition est vraie, alors sinon attrape tous les cas. Il y a un premier cas que nous pouvons utiliser appelé else if. Nous utilisons autre si pour vérifier une nouvelle condition, si la première condition est fausse. On peut l'utiliser comme ça. Donc, à l'intérieur de notre instruction if else imbriquée, je vais ajouter une instruction else if. Donc juste après cette ouverture, ensemble de bases bouclés, ajoutons d'autres si, puis ouvrez et fermez un nouvel ensemble d'accolades, poussant la dernière instruction else à la fin. A l'intérieur d'ici, nous pouvons ajouter quelques crochets pour vérifier si une condition est vraie. Donc, disons que si la soif est égale à Chinois. Donc encore une fois, nous vérifions si la variable est égale à faim. Alors mettons ceci à vrai. Si c'est le cas, alors se déplace sur ce bloc imbriqué ici. Donc, tout d'abord, il vérifie si l'envie est égale à la pizza, alors il lancera cette alerte ici. Si ce n'est pas le cas, la deuxième condition de else if, sera alors exécutée, et cette fois nous pouvons faire une alerte. Alors disons que cette fois, donnez-moi du chinois, juste comme ça. Si la pizza ou le chinois n'est pas la valeur de l'envie, cette autre déclaration sera exécutée à la fin, disant : « Allons chercher de la nourriture. » Alors, sauvegardez ça. Maintenant, notre envie est chinoise. Nous devrions maintenant voir le texte de me donner chinois. Essayons quelques options supplémentaires. Si on change ça en pizza, on aura de la pizza, et si on change ça pour être quelque chose de différent, disons poulet, rafraîchir. Nous avons un repli disant : « Allons manger. » Aussi juste pour être clair, nous avons ceci autre si bloc, imbriqué à l'intérieur de ces instructions if. Mais cela a parfaitement fonctionné si pas imbriqué. Avant de terminer cette vidéo, je veux vous montrer quelques opérateurs logiques que vous trouverez utiles. Les opérateurs logiques peuvent sembler complexes, mais ils le sont simplement ou non. Nous allons donc commenter cet exemple et jeter un oeil à ces signes communs tout le code d'avant, en laissant dans les deux variables. Donc, disons si faim, alors et avec les deux esperluettes, envie est de pizza. Ensuite, nous pouvons ajouter notre alerte avant de dire : « Donne-moi de la pizza. » Donc maintenant, nous allons vérifier si deux déclarations sont vraies. Donc, nous vérifions si la faim est vraie et aussi si l'envie est égale à la pizza. Changons ça en pizza et voyons ce qui se passe. Rafraîchir. Voilà notre alerte. Si nous fermons ceci et que nous changeons l'un d'eux pour être faux, nous ne voyons pas l'alerte apparaître. Essayons l'inverse. Changeons ça pour être du poulet. Encore une fois, ces deux conditions doivent être vraies pour que ce code s'exécute. Si nous voulons seulement qu'une de ces conditions soit vraie, donc par exemple, si nous avons faim ou envie est sur la nourriture, alors nous pouvons exécuter ce code. Donc, plutôt que ces deux conditions doivent être vraies, nous pouvons exécuter ce code si un seul évalue les quelques. Nous pouvons le faire avec l'opérateur ou, qui est les deux tuyaux, juste comme ça. Maintenant, nous n'avons qu'une de ces conditions évaluées à vrai, qui a faim. Alors enregistrez, actualisez, et maintenant l'alerte fonctionne. Donc, si vous regardez et tout, le dernier que je veux vous montrer est l'opérateur pas. C' est le point d'exclamation que nous avons examiné plus tôt. Nous avons examiné cela en utilisant l'instruction if pour vérifier si quelque chose n'est pas égal. Alors enlevons toute cette section, là et ici, même affamés, alors on peut ajouter un point d'exclamation ici. Donc, si vous n'avez pas faim ou si cela signifie faux, alors nous aurons l'alerte. Donc, tout d'abord, sauvegardons et puis actualisons. On ne voit rien. Cependant, si nous changeons ceci pour être faux et puis exécutons le code, nous voyons maintenant l'alerte. Donc, cela fait fondamentalement le contraire, donc ici nous disons si pas faim, qui est faux, puis exécutez ce code à l'intérieur d'ici. Donc, c'est maintenant pour si d'autre et aussi d'autre si avec les opérateurs logiques. J' espère que cela a du sens et pas trop écrasant. Rappelez-vous, beaucoup de cela prend juste de l'entraînement, et nous en obtiendrons beaucoup plus au fur et à mesure que vous progressez dans ce cours. 9. L'opérateur ternaire: Un autre type d'instruction conditionnelle est appelé l'opérateur ternaire, alors assurez-vous que vous êtes au numéro sept, qui est le fichier de démarrage de l'opérateur ternaire E. Ensuite, nous pouvons nous mettre au travail dans la section de script ci-dessous. L' opérateur ternaire est souvent utilisé comme une alternative plus courte aux instructions if else. C' est aussi une déclaration d'une ligne, sorte qu'il peut sembler un peu plus simple à. Nous commençons par ajouter une condition que nous voulons vérifier, comme un calcul. Nous disons que dix, c'est plus grand que cinq. La condition est ensuite suivie du point d'interrogation, puis nous déclarons ce que nous voulons arriver si le résultat est vrai ou faux. La première instruction est true, séparée par deux points, et la seconde est fausse. Ce que nous disons ici, c'est si dix est supérieur à cinq, le premier est un texte imprimé de vrai, le second est simplement un texte imprimé de faux. Si nous enregistrons ceci dans et ouvrons ce fichier dans le navigateur, actualisons, nous ne voyons rien se produire au début. C' est parce que nous avons besoin de sortir la réponse, comme un journal de console. Avant cela permet d'ajouter un console.log, puis à l'intérieur du crochet, nous pouvons ajouter cet opérateur ternaire complet. Maintenant, si nous sauvegardons, actualisons et puis ouvrons la console, cliquez sur l'onglet de la console, puis nous avons le texte de vrai, parce que dix est supérieur à cinq. Si nous changeons cela à dix, c'est moins de cinq, nous obtenons alors la deuxième option de faux. Essayons ceci et cela tombe à l'intérieur du navigateur. Plus tard, nous examinerons également certaines façons d'afficher les choses sur une page Web plutôt que sur la console ou à l'aide d'alertes. Nous pouvons également bloquer ce résultat dans une variable aussi. Revenons en arrière et ajoutons notre variable de faim sur petite et valeur de recherche de vrai. Je devrais déplacer ce journal de console et ensuite nous pouvons dire, var, si je mange, alors nous pouvons régler ça à notre opérateur ternaire. La condition que nous voulons vérifier est si faim. Si cette valeur est vraie, où le point d'interrogation, puis ajoutez nos deux options. Si c'est vrai, nous dirons, oui, mangons, séparés par un côlon. Si c'est faux, nous dirons pas seulement encore, ajouter un point-virgule à la fin de là et ensuite nous pouvons faire un journal de console. Ensuite, enregistrez les résultats de devrais-je manger. Juste un résumé, nous vérifions cette variable ici, si c'est vrai ou faux. Si c'est vrai, nous allons imprimer dans le texte de Oui, nous allons manger. Si cela a été défini pour être faux, nous obtiendrons alors la deuxième valeur de pas seulement pour l'instant. Ce résultat est installé à l'intérieur d'une variable appelée devrais-je manger et c'est une valeur qui s'affichera dans, à l'intérieur de la console. Après la console maintenant, c'est réglé sur true, donc nous obtenons, oui, nous allons manger. Si c'était faux, pas seulement pour l'instant. Il y a beaucoup plus d'utilisations pour cet outil, comme la construction d'une chaîne de texte avec le résultat. Si nous devions aller de l'avant et dire que la variable est connectée, et nous allons définir cela initialement pour être une valeur de false. Ensuite, nous pouvons aller de l'avant et ajouter une chaîne de texte de bonjour avec de l'espace, puis à l'intérieur des crochets, nous pouvons ajouter notre opérateur ternaire. Tout d'abord, nous allons vérifier notre condition de connexion, le point d'interrogation, puis nos deux options. Tout d'abord, si c'est vrai, nous pouvons alors dire bienvenue. Séparés par un deux-points, nous ajoutons notre fausse condition. Nous pouvons dire s'il vous plaît vous connecter à votre compte et un point-virgule à la toute fin. Maintenant, nous avons besoin d'un moyen d'afficher cela à l'utilisateur afin que nous puissions entourer toute cette section à l'intérieur d'une alerte. Ensuite, les parenthèses sont le début et puis il se ferme alerte à la toute fin avec un crochets de fermeture. On y va. Assurez-vous que nous avons les deux crochets à la fin, un pour l'alerte et le second pour cette section connectée. Donnez cette sauvegarde, rechargez. Tout d'abord, nous avons le texte disant : « Bonjour, veuillez vous connecter à votre compte » parce que nous ne sommes pas connectés. Cependant, si nous définissons ceci pour être une valeur de true, donc nous sommes connectés, recharger et nous recevrons le message de Bonjour bienvenue. Cet opérateur ternaire est vraiment simple à utiliser et aussi une bonne alternative à l'instruction if-else. C' est aussi un peu plus compact sur McCann ajouter tout cela sur une seule ligne pour non seulement tirer dans notre code, mais aussi le rendre plus lisible. 10. L'instruction switch: Bienvenue de retour. Pour cette vidéo, rendez-vous à la section 8 de nos fichiers de démarrage, qui concerne l'instruction switch. C' est le dernier type de déclarations conditionnelles que nous allons couvrir. D' une certaine manière, switch fait un travail similaire aux instructions IF/else, nous avons déjà examiné. Mais la différence est ce qu'il peut vérifier contre autant de conditions que nous le voulons. Ensuite, nous ajoutons une instruction break pour sortir avec le commutateur une fois qu'une correspondance est trouvée. Essayons ceci dans notre section d'instruction switch du code de démarrage. Entre ces scripts. Commençons à nouveau avec la variable. Je vais régler cette nourriture pour animaux. Ça peut être n'importe quelle nourriture qu'on veut. Commençons par des œufs. Nous créons ensuite une instruction switch. La syntaxe est similaire aux instructions if. À l'intérieur des parenthèses, nous ajoutons la condition que nous voulons tester. Nous voulons vérifier la variable alimentaire. À l'intérieur de l'instruction switch, nous pouvons ajouter divers cas pour vérifier s'ils correspondent à cette variable alimentaire. Tout d'abord, ajoutons un cas. On va dire pizza. Cela vérifie si la pizza correspond à cette variable. Si c'est le cas, nous ajoutons un deux-points et ensuite nous pourrions déclarer sur la ligne suivante ce que nous voulons faire. Faisons simplement un console.log. Alors nous dirons que la pizza est géniale. Juste comme ça. Ensuite, nous pouvons ajouter les mots-clés de pause. Nous ajoutons break pour sortir avec les instructions switch, si c'est une correspondance. Si ce n'est pas le cas, il passe ensuite à l'affaire suivante. Ajoutons un nouveau cas ici. Ensuite, on peut vérifier une seconde condition. Disons des œufs. Si c'est une correspondance, nous voulons alors faire un console.log pour afficher le message de, « Les œufs sont génial. » Ensuite, nous sommes à nouveau au mot clé break juste après. Ajoutons un cas de plus. Cette fois, nous allons ajouter du bacon, côlon et ensuite un console.log. Disons : « Le bacon est génial. » Une fois de plus sortir avec les déclarations. C' est tout à fait nos déclarations de commutation. Juste un résumé. Nous créons une variable appelée oeufs. Nous vérifions ensuite les correspondances à l'intérieur d'une instruction switch. Si le cas de pizza est un match, nous imprimons ensuite le texte de notre pizza est génial. Si c'est le cas, alors sortir avec une déclaration et nous ne vérifions pas les cas supplémentaires ci-dessous. Si ce n'est pas une correspondance, qui n'est pas dans ce cas, alors il se déplace vers le bas pour les oeufs, puis affiche le texte des oeufs sont impressionnants. Mais cette fois parce que c'est une correspondance, nous allons sortir de l'instruction switch. Par conséquent, il ne vérifiera même pas ce suivant. Donnons cette sauvegarde et rechargez le navigateur, ouvrez la console, et maintenant nous allons y aller. Eggs est un match, donc nous obtenons le texte des oeufs sont génial. Que faisons-nous si aucun de ces cas ne correspond ? Pour cela, nous ajoutons une valeur par défaut qui agit comme une solution de secours. Tout en bas, je vais ajouter par défaut. Ensuite, juste après cela, nous pouvons ajouter un console.log. Alors pour le texte, disons : « J'aime. » Ensuite, ajoutez un espace. Ensuite, nous pouvons ajouter au nom de notre nourriture. Avec un point-virgule à la fin. Enregistrez cela, puis rechargez le navigateur. Nous obtenons toujours un texte d'oeufs sont géniaux parce que nous avons une correspondance. Cependant, si nous montons et changeons cette nourriture pour être autre chose, comme du fromage. Ce qui ne correspond à aucun de ces trois cas. Par conséquent, la valeur par défaut démarrera. Recharger. On y va. On a un texto de, j'adore. Ensuite, nous passons dans la variable de la nourriture, qui est le fromage. Notez que dans ce cas par défaut, nous avons omis le mot-clé break, car il est à la fin de l'instruction switch. Nous pouvons ajouter cette valeur par défaut partout où nous le voulons, mais n'oubliez pas d'utiliser également une pause si ce n'est pas à la toute fin. Nous pouvons aussi changer un peu les choses autour de. Si nous voulions le même résultat pour plusieurs cas, nous pouvons simplement les combiner comme ça. Disons qu'après la pizza, nous pouvons ajouter un deuxième cas. Allons-y pour les pâtes, encore avec le côlon après. Maintenant, si le cas de la nourriture correspond à la pizza ou aux pâtes. On peut alors dire : « J'aime l'italien. » Alors économisez. Gardions ça comme du fromage pour l'instant. On aura la chute et si on change ça pour être des pâtes. Recharger. J'adore l'italien. Puis pizza et nous avons encore, j'adore l'italien. Avec les instructions switch, nous pouvons également continuer avec autant de cas que nous le voulons. Maintenant, il est temps de commencer à construire un petit jeu pour mettre en pratique les choses que nous avons apprises dans cette section. 11. Il est temps de s'entraîner : le jeu du chasseur de dragons: Nous allons maintenant prendre un peu de temps en apprenant déclarations conditionnelles pour les mettre en pratique dans un jeu amusant appelé, le tueur de dragon. Ils seront assez simples, mais cela nous fera réfléchir à ce que nous voulons faire ensuite, fonction de la condition. Lorsque nous avons terminé la page pour la première fois et que ce sont les projets finis, nous avons d'abord demandé notre nom. Nous pouvons ensuite entrer notre nom et cliquer sur OK. Ensuite, nous passons à notre prochain écran où on nous demande si nous aimerions jouer avec notre nom à l'intérieur de la corde. Si on annule, on aura un textile, peut-être la prochaine fois. Cependant, si nous rechargeons le jeu à notre nom, cliquez sur OK, et puis nous disons, voulez-vous jouer et cliquer sur OK. Nous passons ensuite à la question de savoir qui aimerait incliner le dragon. Encore une fois si nous annulons, nous recevrons un message de retour quand vous aurez assez courageux. Cependant, si nous passons à travers et jouons au jeu à notre nom, aimeriez-vous jouer ? Oui. Aimeriez-vous combattre un dragon ? Cliquez sur OK. Nous avons alors une chance aléatoire d'où sera le dragon. Cette fois, nous avons vaincu le dragon parce que nous comparons cela à un nombre aléatoire qui détermine si nous gagnons ou lâchons. Il y a une chance de 50 à 50, quel sera ce message. Donnons à celui-ci encore une fois. Si nous actualisons à notre nom, puis cliquez sur, cette fois il dit que nous avons perdu. Vous pouvez donner un coup de pouce si vous vous sentez à l'aise de le faire, et je vous encourage vraiment à le faire, si ce n'est seulement pour obtenir un peu plus de pratique. La seule chose que nous n'avons pas encore couverte est de générer des nombres aléatoires, mais vous pouvez facilement regarder la pente si vous le souhaitez. Sinon, je vais aller de l'avant et construire ça maintenant. Fermons ceci, puis allons dans les fichiers de démarrage pour le jeu de la tueuse de dragon. Dans le script, je vais commencer par créer une variable appelée aléatoire, et ce n'est que la section que nous n'avons pas encore couverte. Pour générer un nombre aléatoire, nous utilisons des points mathématiques aléatoires, puis les parenthèses comme ceci, puis faisons un journal de console pour le mot aléatoire. Enregistrer et puis recharger, et en fait c'est quand vous allez à notre projet, ouvrez la console, et il y a notre nombre aléatoire. Si nous continuons à rafraîchir, nous obtenons des valeurs différentes à chaque fois. Un nombre aléatoire dans le script java par défaut est compris entre zéro ou un. Zéro étant inclus, mais un n'a pas été inclus, donc cela finira avec la valeur la plus élevée de 0,999. Si vous continuez à rafraîchir, nous ne voyons aucune valeur supérieure à une. Pour que cela soit facile pour nous, nous allons générer un nombre aléatoire entre zéro et 99. Pour ce faire, nous pouvons d'abord multiplier le nombre aléatoire par 100, et cela nous donnera un nombre si nous actualisons, qui est entre zéro et 99, mais avec beaucoup de décimales différentes. Si nous voulons que ce soit un nombre entier, nous pouvons soit arrondir ce chiffre vers le haut ou vers le bas. Nous pouvons exécuter le nombre vers le bas avec maths dot floor, ou si nous voulons arrondir le nombre, nous pouvons dire maths dot ceil, qui est court pour plafond, puis entoure le reste de notre code à l'intérieur des parenthèses. Maintenant, si nous sauvegardons, puis rechargeons, nous obtenons un nombre aléatoire qui est arrondi. Maintenant nous avons pris soin de ce nombre aléatoire, et la façon dont nous allons l'utiliser c'est que nous allons vérifier, si ce nombre est inférieur à 50, si c'est le cas, nous dirons que vous avez vaincu le dragon, si le nombre aléatoire est supérieur à 50, dira que vous avez perdu. Revenons travailler avec ce jeu. Nous pouvons supprimer le console.log, puis nous allons définir une deuxième variable de nom, et ce nom va être la valeur transmise par l'utilisateur à l'intérieur d'une invite. Quel est votre nom ? Cela ajoutera une invite à l'utilisateur demandant le nom que nous pouvons taper, et cette valeur est stockée dans cette variable. Ensuite veulent souvent créer une nouvelle variable appelée play, et ceci est pour notre deuxième écran, qui va être une confirmation. À l'intérieur de la confirmation, nous pouvons dire bonjour, ajouter un espace, puis ajouter le nom de l'utilisateur. C' est un écran que vous avez vu dans la version finale. Tout d'abord, on a quel est ton nom ? Quand vous tapez votre nom, nous pouvons dire, d'accord, et cette section ici est celle qui restaure à l'intérieur d'une pièce. Alors bonjour nom, et puis la chaîne de texte de, voulez-vous jouer ? Maintenant, nous devons faire quelques vérifications conditionnelles. Tout d'abord, nous allons vérifier si l'utilisateur a sélectionné le jeu. Si le jeu est vrai, alors nous voulons exécuter du code. Si l'utilisateur a choisi de jouer au jeu, voudrait alors créer une nouvelle confirmation, et cette fois, nous allons poser la question de, voulez-vous combattre un dragon ? Si nous allons à la version finie, juste ici, rechargeons, quel est votre nom ? Ensuite, nous avons la section que vous voulez jouer ? Si c'est bon, c'est une section que vous venez de créer disant, voulez-vous combattre un dragon ? Nous devons stocker cela dans une variable. Je vais appeler ma bataille, et les changer. Maintenant, nous avons une valeur vraie ou fausse à l'intérieur de cette variable appelée bataille. Si l'utilisateur veut aller de l'avant et jouer, nous pouvons alors créer un nouveau if déclarations, et cette fois imbriqué dans un jeu. Nous dirons que si la bataille est vraie, alors à l'intérieur, nous voulons une bataille, ou si les utilisateurs ont cliqué sur annuler la bataille sera faux, et alors nous devons fournir d'autres déclarations, donc nous allons dire ne pas se battre. Tout d'abord, traitons de la déclaration else. Si l'utilisateur a choisi de ne pas se battre, fera simplement une alerte, et ainsi alerte peut dire « retour quand vous êtes assez courageux ». Laissez-nous d'abord un test dans le navigateur ou à nos projets. Rafraîchissons. Quel est ton nom ? Tapez ceci et nous vous dirons : « Bonjour Chris, aimerais-tu jouer ? » C' est cette section ici, disant que vous aimeriez jouer ? Si le jeu est vrai, nous avons alors demandé  : « Voulez-vous jouer le dragon », que vous voyez ici ? Rappelez-vous que nous n'avons pas défini de condition, si cela est vrai encore, nous n'avons défini la condition que si l'utilisateur clique sur Annuler. Si l'utilisateur annule, nous devrions recevoir ce message ici. Essayons ça, et on arrive à « revenir quand tu as assez courageux ». Maintenant, nous devons gérer la condition, si l'utilisateur clique sur « ok ». Ajoutons une condition est que l'utilisateur décide de se battre. Avant de mettre en place ces nombres aléatoires entre zéro et 99, et de le stocker dans une variable appelée aléatoire, chaque fois que nous exécutons un aléatoire, nous pouvons alors utiliser l'opérateur ternaire pour vérifier si cela est supérieur à 50, si c'est, nous pouvons alors dire : « Vous avez vaincu le dragon ! 'si ce nombre est inférieur à 50'. On peut dire que tu as perdu. Sauvegardez ça, et donnons-y un coup d'envoi. Tapez quelque chose là-dedans, « aimerait jouer » ? Oui. Aimeriez-vous vous battre ? Ok, et on ne voit aucun résultat à l'écran. C' est parce que nous avons créé notre opérateur ternaire, mais nous n'avons pas affiché les résultats à l'écran. Définissons le résultat comme une variable appelée résultats, et définissons ceci à notre opérateur ternaire. Ensuite, juste après cela, nous pouvons faire un console.log avec la valeur des résultats, et en fait, nous allons changer ceci soit une alerte comme le reste. Sauvegardez, puis sur le navigateur, 'Quel est votre nom ? '.' Aimeriez-vous jouer ? » Oui, 'aimerait se battre ? ' D' accord. Donc nous avons perdu ce temps, essayons encore. Aimeriez-vous jouer ? Oui, et cette fois nous avons vaincu le dragon, parce que le nombre aléatoire doit être dans plus de 50, bon. Ceux qui ont manipulé la plupart des cas utilisés ici, sont ceux utilisés pour jouer, sont ceux utilisés pour combattre. Le dernier cas à gérer, est si l'utilisateur ne veut pas jouer du tout. Si nous actualisons le navigateur, cette fois si nous tapons notre nom, et cliquez sur OK. Nous voulons alors gérer le cas si l'utilisateur ne veut pas jouer, actuellement à l'intérieur de l'ici, nous vérifions si l'utilisateur veut jouer, et si c'est le cas, nous exécutons ensuite ce code. Au lieu de cela, si l'utilisateur clique sur annuler, souhaiterait alors alerter le message indiquant « peut-être la prochaine fois ». Nous pouvons le faire comme une autre déclarations en bas, alors sinon, nous ferons une alerte de « peut-être la prochaine fois ». Sauvegardez ça et donnez-nous un coup de pouce. « Quel est ton nom ? » Cliquez sur OK. Aimeriez-vous jouer ? Cette fois, nous allons cliquer sur Annuler, et le message de peut-être la prochaine fois. Super tout fonctionne maintenant, et j'espère que vous aimez jouer à ce jeu. Ne vous inquiétez pas si c'était quelque chose que vous ne pouviez pas tout à fait gérer, il y a beaucoup de choses à faire là-bas et chaque étape prend juste un peu de réflexion pour décider ce que nous allons faire ensuite. J' espère que tous attendent avec impatience la prochaine section et que je vous y verrai. 12. Manipulation DOM: Bienvenue de retour. Cette vidéo est l'endroit où JavaScript commence à devenir vraiment intéressant en manipulant le DOM. Le DOM signifie Document Object Model et est une représentation arborescente de nos documents Web. Il s'agit d'une interface permettant aux langages de programmation d'accéder et de mettre à jour le contenu et la structure. Ici, nous voyons la même structure que nos pages Web. Du haut, nous avons le document. A l'intérieur il y a un élément HTML racine. Sous cela, nous avons la tête et le corps familiers. Puis suivis par nos éléments, textes et attributs, par exemple. La grande chose à ce sujet est qu'il peut connecter deux langues, comme JavaScript, afin que nous puissions changer les choses. Cela ouvre de nombreuses possibilités, telles que la possibilité d'accéder aux éléments, modifier le contenu, ajouter des attributs et des styles, ou même de créer et de supprimer des éléments. Cela peut sembler complexe, mais c'est assez facile de commencer. Une des façons les plus simples de manipuler le DOM est de saisir un élément sur notre page et de le changer. Par exemple, en sélectionnant les éléments p, puis en changeant le texte. Passons à notre démarreur JavaScript et ouvrons la section de manipulation DOM. Rendez-vous à nos fichiers de démarrage JavaScript et allez à notre numéro 10, qui est la manipulation DOM. A l'intérieur, nous avons d'abord besoin de HTML pour aller de l'avant et changer. A l'intérieur du corps, ouvrons et fermons les éléments p, puis ajoutons du texte à l'intérieur de hello. Ensuite, nous allons ouvrir les éléments span, puis ajouter le texte de l'utilisateur. Cela affichera sur l'écran le texte de l'utilisateur hello. Nous devons ensuite ajouter un ID à cet élément span, afin que nous puissions l'attraper en utilisant JavaScript. Appelons cet ID le nom d'utilisateur. Maintenant, si nous faisons défiler vers le bas jusqu'à notre section de script, qui est juste ci-dessous, nous pouvons commencer par ce qui est appelé, obtenir élément par ID. Ceci est pré-auto-descriptif, cela saisit un élément par l'ID, tel que le nom d'utilisateur. D' abord, nous prenons le document. C' est l'objet du document, qui est essentiellement notre page Web. N' oubliez pas que le DOM signifie Document Object Model. Notre structure arborescente est un modèle de notre page web. Ensuite, après avoir sélectionné ces documents, nous pouvons ensuite affiner cela. Dans ce cas, nous allons sélectionner un ID sur le document, nous allons obtenir des éléments par ID. A l'intérieur des parenthèses, nous pouvons ensuite ajouter le nom de l'ID que nous choisirons. Dans notre cas, c'est un nom d'utilisateur. Ajouter un point-virgule à la fin. Remarquez lorsque vous tapez get elements par ID, nous avons une lettre majuscule pour chaque mot après get. C' est ce que l'on appelle « camel » et cela le rend plus lisible parce que nous pouvons mieux voir le début de chaque mot. Si nous sauvegardons cela et passons au navigateur, nous voyons que rien ne changera. C' est parce que nous avons sélectionné l'élément que nous voulons, mais nous n'avons pas encore fait quoi que ce soit avec. Nous pouvons changer le contenu en définissant le HTML interne. Juste avant le point-virgule, nous ajoutons un .innerHTML. Maintenant, nous pouvons définir ceci comme une valeur telle qu'une chaîne. Disons que Chris, attendez au navigateur, rechargez et maintenant nous voyons le texte de, bonjour Chris. En plus d'utiliser une chaîne de texte pour notre innerHTML, nous pouvons également utiliser une variable aussi. Sélectionnez définir une variable pour notre nom. Le nom Var est égal à une chaîne de Chris. Alors plutôt que notre chaîne juste ici, nous pouvons passer dans notre nom de variable du navigateur et recharger et nous voyons toujours que notre texte de, bonjour Chris, est maintenant sur l'écran, mais cette fois en utilisant une variable. Nous pouvons également changer le style en changeant l'une des valeurs CSS. Juste en dessous de cela, nous pouvons accéder aux mêmes éléments, avec document.getElementById. Encore une fois, nous voulons sélectionner le nom d'utilisateur, le N majuscule pour le nom, puis au lieu de sélectionner le HTML interne, cette fois nous pouvons définir le style et disons que la couleur sombre soit égale à une valeur de rouge. Cela changera la couleur du texte de notre texte à l'intérieur de la plage. Enregistrer, rafraîchir et il y a notre couleur rouge pour le mot Chris. Nous pouvons utiliser n'importe quelle propriété CSS que nous voulons à l'intérieur ici. La seule différence est que nous avons besoin de camel casse toutes les propriétés CSS qui ont plusieurs mots, tels que la couleur de fond et la taille de la police. En CSS, nous ferions normalement quelque chose comme ça. Dire taille de police en utilisant un trait d'union ou un tiret, mais au lieu , lorsque vous utilisez JavaScript, nous devons nous référer à ce boîtier de chameau, que nous voyons juste ici. Plutôt qu'un tiret, nous utilisons une majuscule, comme celle-ci. Ensuite, définissons le texte pour être une valeur de 24 pixels. Voyons cela dans le navigateur et nous y allons. Maintenant, notre texte de Chris est une police plus grande. Nous pouvons également utiliser une classe à la place de cet ID. Allons à notre élément p, puis ajoutons une classe de, bonjour. Ensuite, nous pouvons utiliser document.getElementByClassName. Ajoutons une nouvelle section de getElementByClassName. Cela fonctionne de la même manière que ci-dessus. Nous sélectionnons d'abord le document, puis nous le réduisons en utilisant le nom de la classe. Obtenir les éléments par nom de classe. Passez le nom de notre classe, qui était bonjour, qui correspond à cette section juste ici. Puis un point-virgule à la fin. Remarquez ici lorsque vous utilisez le nom de la classe, nous ajoutons un s à la fin des éléments. C' est parce que nous pouvons avoir plusieurs classes sur notre page. Par exemple, nous pourrions avoir un deuxième ensemble d'éléments p. Si nous allons de l'avant et ajoutons un deuxième ensemble juste ici, puis ajoutons la même classe de bonjour. Maintenant, nous allons ajouter un texte de bienvenue retour. Maintenant, si nous avions plus d'un cours sélectionné, comme nous le faisons ici, comment puis-je savoir lequel nous changeons ? Eh bien, assignons ceci à une variable, puis affichez-le sur la console. Disons que la variable de test est égale à notre première classe. Ensuite, dans un journal de console à l'intérieur du navigateur avec la valeur de test. Vers le navigateur, cliquez avec le bouton droit de la souris et inspectez. À l'intérieur de la console, nous voyons une collection HTML avec deux éléments à l'intérieur des crochets. C' est comme un tableau que nous couvrirons bientôt. Ces deux éléments, nos deux éléments avec la classe de bonjour. Si vous cliquez sur cette flèche ici, nous pouvons également l'ouvrir et en savoir plus sur le contenu. Nous voyons les premiers éléments p avec la classe de hello a une position d'index de zéro. Ensuite, notre deuxième a une position d'index de 1. Nous pouvons accéder à ces deux éléments par cette position d'index. A l'intérieur de la console, si nous disons test, qui est le nom de notre variable, puis à l'intérieur des crochets, nous pouvons accéder à chacun de ces éléments par le numéro d'index. En commençant par zéro, appuyez sur Entrée, et il y a nos premiers éléments p, qui contient nos textes de bonjour Chris. Ensuite, nous pouvons accéder à notre deuxième valeur avec test1, appuyez sur Entrée. C' est notre deuxième élément avec le texte de bienvenue. Ce numéro de position peut également être utilisé à l'intérieur de notre sélecteur. Dans notre code, nous allons saisir tous les éléments avec le nom de classe de bonjour. Ensuite, à l'intérieur des crochets, nous pouvons réduire cela à notre premier, qui est la position zéro. Nous pouvons faire tout ce que nous avons déjà vu. Graphique défini dans le style.color pour être une valeur de violet. Enregistrer, puis recharger. Donc, le premier élément est maintenant violet. Et bien sûr, nous pouvons changer cela pour être un, et cela va maintenant rendre le texte buck de bienvenue violet à la place. Ensuite, nous avons getElementsByTagName. Comme son nom l'indique, nous pouvons sélectionner tous les éléments d'une page par la balise, tels que notre élément p pour le texte ou IMG pour la balise image. En bas tout en bas, ajoutons un commentaire de getElementsByTagName. Encore une fois, cela a un S2 car vous pouvez sélectionner plus d'un élément. Après ici, nous utilisons le document.getElementsBytagName, qui est juste ici, les crochets, puis à l'intérieur des guillemets, nous pouvons ajouter les éléments que nous voulons sélectionner, recadrons tous les éléments p, et une fois de plus, parce que nous ont plus d'un ensemble d'éléments p, nous devons les saisir par le numéro d'index. Le premier est la position zéro, nous pouvons définir le HTML interne et nous allons définir cette valeur de chaîne de changé. Si nous sauvegardons cela et puis rechargeons, nous avons maintenant changé nos éléments p à la position zéro de l'index. Le prochain outil que nous allons regarder basé sur le QuerySelector. C' est tout comme le sélecteur que nous utilisons en CSS. Voyons cela avec une image vide, donc jusqu'au HTML après nos deux éléments p, ajoutons les éléments IMG. Si nous donnons cette sauvegarde, c'était le navigateur, vous voyez que nous ne voyons aucune image sur l'écran parce que nous n'avons pas encore défini d'attributs source. Ajoutons les attributs source en utilisant JavaScript. abord, nous pouvons saisir cette image en utilisant QuerySelector, donc un commentaire de QuerySelector. Ensuite, nous utilisons document.QuerySelector, puis passons le nom de IMG. C' est de la même manière que nous choisirons notre image en CSS. Nous pouvons également le sélectionner avec l'ID et le nom de classe à, et nous allons jeter un oeil à cela dans un instant. En utilisant QuerySelector, nous avons toujours accès au HTML interne et aussi ajouter des styles aussi. Mais pour cet exemple, je vais vous montrer quelque chose de nouveau, et voici comment ajouter un attribut. L' attribut que nous allons ajouter est la source de l'image et nous le faisons en utilisant .setAttribute, à l'intérieur des crochets, nous allons de l'avant et ajoutons deux valeurs. abord est le nom de l'attribut que nous voulons ajouter, qui est source, puis séparé par une virgule, puis le nom de l'image dot.JPEG, vous pouvez utiliser n'importe quelle image de votre choix. Mais j'ai ajouté une image dans le fichier de démarrage, qui est juste ici. Je vais fermer ceci, donner cette sauvegarde, puis recharger le navigateur. Il y a une image qui est maintenant sur l'écran. Si nous ouvrons les outils de développement avec un clic droit et inspectons, puis aller aux éléments. Nous pouvons voir à l'intérieur des outils de développement, nous avons notre section corps, nous avons notre p avec le texte de modifié, notre deuxième élément p, nous accueillons de retour, et aussi notre image avec la source de image.JPEG. Le résultat final est exactement le même que si nous tapions ceci en HTML, mais nous l'avons ajouté en utilisant JavaScript. Nous avons mentionné que lors de l'utilisation de queryselector, nous pouvons sélectionner n'importe quel élément de la même manière que nous le ferions normalement en CSS. En plus du nom de la balise comme l'image, nous pouvons également sélectionner cette image avec une classe ou un ID. Si nous ajoutons un ID à cette image de l'image, puis faisons défiler vers le bas, tout comme lors de l'utilisation de CSS, nous devons utiliser le hachage comme sélecteur, puis le nom de l'ID, maintenant enregistrer et puis recharger. Nous pouvons voir que cela fonctionne toujours, mais cette fois en utilisant l'ID. De même pour la classe, il va changer l'onglet image, une classe d'image. Cette fois, tout comme lors de la sélection en CSS, nous devons utiliser un point comme préfixe, et cela devrait toujours fonctionner à l'intérieur du navigateur. Enfin, quelque chose de similaire à ceci est QuerySelectorAll ; QuerySelector que nous venons de regarder, ne sélectionne que les premiers éléments correspondants sur la page, QuerySelectorAll d'autre part retournera une liste de tous les éléments correspondants éléments. Nous pouvons le voir en ajoutant une deuxième image dans notre HTML. Copiez cette section ici et collez-la ci-dessous en utilisant le même nom de classe. Si nous sauvegardons cela et puis actualisons, nous voyons toujours cette seule image sur l'écran c'est parce que QuerySelector ne sélectionnera que les premiers éléments de la page. Cependant, si nous allons de l'avant et ajoutons QuerySelectorAll qui ressemble ceci, puis faisons document.QuerySelectorAll, cela va de l'avant et retournera une liste de nos deux images. Commençons par marquer la classe de l'image, puis après cela, nous ajoutons les crochets, puis nous pouvons passer dans notre numéro d'index. Comme avant, le numéro d'index de zéro est la première image sur notre page. Si je pouvais juste commenter ce QuerySelector. Maintenant, nous avons sélectionné notre première image, nous pouvons ensuite utiliser setAttributes comme nous venons de regarder, puis passer maintenant la première valeur qui est la source, et la seconde qui est image.JPEG donc cela va sélectionner la première valeur, même comme avec une image sur l'écran. Cependant, si nous voulons ajouter l'image deux fois, nous pourrions copier cette ligne de code ici, puis la coller en une fois de plus. Mais cette fois, sélectionnez la valeur d'index d'un et maintenant nous avons deux images sur l'écran. Sélectionner deux éléments comme celui-ci serait mieux fait avec la boucle, mais nous allons bientôt entrer dans les boucles dans ce cours. Comprendre comment manipuler le DOM est quelque chose de vraiment important à savoir, et c'est là que JavaScript commence vraiment à devenir intéressant. Maintenant, nous savons comment sélectionner des éléments, il est maintenant temps de passer à autre chose. Ensuite, nous allons apprendre tout sur la façon d'ajouter et de supprimer des éléments en utilisant JavaScript. 13. Ajouter et supprimer des éléments avec Javascript: Nous venons d'examiner comment nous pouvons utiliser JavaScript pour manipuler des éléments dans notre DOM, tels que la modification du texte, ajout d'attributs et la définition de styles. Nous allons couvrir comment créer réellement de nouveaux éléments, et aussi comment les supprimer aussi. Allons à nos fichiers de démarrage. Nous allons commencer dans le numéro 11, qui est d'ajouter et de supprimer des éléments avec JavaScript et aussi avoir cela ouvert dans le navigateur. Nous pouvons voir dans nos fichiers de démarrage que nous avons une liste non ordonnée, avec les deux ListItems de pommes et de poires, que nous avons juste ici. Commençons par la section script. Nous allons regarder ce qu'on appelle un document.write. Document.write est un moyen de définir une chaîne de texte à une page. Document.write, puis à l'intérieur des crochets, nous pouvons ajouter une chaîne de texte, comme le document écrire du texte. Si nous sauvegardons cela et rechargeons le navigateur, nous avons maintenant ce texte apparaissant à côté de notre liste non ordonnée. Document.write permet d'ajouter une chaîne de texte simple à une page. Ceci est couramment utilisé à des fins de test, mais cela peut causer des problèmes s'il est mal utilisé. Par exemple, si vous accédez à google.com, puis ouvrez la console, cliquez avec le bouton droit de la souris et Inspecter. A l'intérieur, si nous faisons un document.write, puis passer dans une chaîne de texte, comme bonjour, appuyez sur Entrée, et nous voyons que la page d'accueil de Google a été remplacée par notre écriture de document. Une écriture de document remplacera tout le contenu existant, si la page est déjà chargée. Nous devons être très prudents lors de l'utilisation de cela. Vous verrez en haut du modèle de démarrage, nous avons notre liste non ordonnée, qui est juste ici. C' est une liste que nous pouvons travailler en ajoutant et en supprimant certains ListItems, en utilisant JavaScript. Si nous voulons créer un nouvel élément sur la page en utilisant JavaScript, nous pouvons utiliser la méthode CreateElement. Supprimons ce document.write, puis à l'intérieur ici, nous pouvons faire le document.CreateElement. Créons une variable pour stocker la scène appelée ListItem, et définissons cela sur Document.CreateElement. Juste comme ça. Encore une fois, en utilisant le boîtier de chameau, comme nous l'avons vu auparavant. A l'intérieur des parenthèses, nous pouvons passer sous forme de chaîne, le nom des éléments que nous voulons créer, tels qu'un ListItem. N' importe quel nom de balise d'élément peut être ajouté, tel qu'un élément div ou p. Créer cela ne fera rien seul, car bien que nous l'ayons créé, il y a toujours pas de texte à l'intérieur des éléments. Nous pouvons ajouter du texte en utilisant la méthode CreateText.Method. Ajoutons simplement quelques commentaires, créez un élément. Ensuite, après ici, nous allons créer le TextNode. Nous pouvons également stocker cela à l'intérieur d'une variable appelée ItemText. Ceci est égal à Document.CreateTextNode. Ensuite, à l'intérieur du crochet, vous pouvez passer dans la chaîne de texte que nous voulons ajouter. En collant avec les fruits, je vais ajouter la valeur des bananes. Si nous sauvegardons cela et puis rechargeons le navigateur, je vais à notre page d'index, nous ne voyons toujours pas d'éléments supplémentaires sur l'écran, parce que bien que nous ayons nos éléments que nous avons créés ici, et aussi notre texte que nous avons ici, nous n'avons pas encore ajouté ce texte au contenu de ces éléments. Nous pouvons le faire avec la méthode appendChild. Ajoutons du texte à l'élément. Tout d'abord, prenons notre ListItem, qui est juste là. Nous disons listitem.AppendChild. L' enfant que nous voulons ajouter est ce texte d'élément juste ici. Ajoutez-les à l'intérieur du support, puis enregistrez, puis rechargez. Nous ne voyons toujours pas les éléments à l'écran. Voyons ce qui se passe avec le journal de la console. C' est le journal de la console, la valeur de notre ListItem. Accédez à la console, cliquez avec le bouton droit sur Inspecter. Nous voyons que nous avons créé notre élément. Nous avons notre ListItem d'ouverture et de fermeture, puis le texte des bananes en tant qu'enfant. La dernière étape consiste à utiliser à nouveau appendChild, pour ajouter ce nouvel élément à cette liste existante, qui est juste ici. Cette liste existante a un ID de liste. D' abord attrapons ceci et stockons-le à l'intérieur d'une variable. En bas, sélectionnons la liste des parents. Installez ceci dans une variable appelée liste. Nous savons comment faire cela, c'est document.getElementById. L' ID qu'on a donné est List. Ensuite, nous allons ajouter un point-virgule à la fin, pour stocker cela à l'intérieur de cette variable. nous avons la liste des parents et nous avons l'enfant que nous voulons ajouter. Nous pouvons aller de l'avant et les ajouter maintenant. Ajouter un nouveau ListItem à la liste. Nous faisons cela, nous lister.AppendChild, que nous avons vu auparavant, et l'élément que nous voulons ajouter est le ListItem. Ajouter un point-virgule à la fin. Nous chargeons le navigateur et nous y allons, il y a nos bananes comme un nouveau ListItem. Juste pour résumer ce que nous faisons ici, nous saisissons la liste complète, et la stockons dans une variable. Nous ajoutons ensuite à cette liste, l'enfant, qui est ce nouveau ListItem. Vous vous demandez peut-être pourquoi faire tout cela, au lieu de simplement taper un nouveau look ListItem dans le HTML. Eh bien, il y a beaucoup de cas où nous voulons le faire avec JavaScript. Dans une application à faire par exemple, chaque fois que l'utilisateur tape un nouvel élément à faire, cela pourrait être ajouté à la liste, comme nous l'avons fait ici. Ou par exemple, dans un autre cours que j'ai, nous construisons une application de lecteur de musique, où nous construisons une liste de chansons. En plus d'ajouter des articles à notre liste, nous pouvons également remplacer tous les articles existants que nous avons déjà. Par exemple, si nous voulions remplacer ces poires ListItem, par autre chose, nous pourrions également le faire aussi. Tout d'abord, créons un nouveau ListItem appelé raisins. Alors créons des raisins ListItem. Nous faisons cela comme avant, nous pouvons créer une nouvelle variable appelée nouvelle ListItem, puis définir cela pour être document.CreateElement, l'élément que nous voulons créer est un ListItem. Ensuite, comme nous l'avons vu auparavant, nous pouvons également créer notre TextNode. Disons NewitemText. C' est exactement le même que ce que nous avons fait auparavant, lorsque nous avons créé un ListItem. Ensuite, notre TextNode, les bananes. Mais cette fois, nous allons créer des raisins. Ceci est égal à document.CreateTextNode, texte des raisins, point-virgule à la fin. Ensuite, nous devons ajouter ce texte à cet article. Nous disons newListItem, puis ajoutons l'enfant du nouveau texte d'élément. Juste comme ça. J'ai un NewListItem ici, auquel on accède ici. Nous allons ensuite ajouter l'enfant, qui est un nouveau texte d'élément, qui est le TextNode de raisins. nous avons ce NewListItem. Nous pouvons l'utiliser pour remplacer n'importe lequel des ListItems que nous avons déjà. Comme nous l'avons déjà mentionné, je veux sélectionner des poires, qui est la position d'index d'une. En bas, nous allons créer une variable appelée élément à remplacer, puis document.QuerySelectorAll. On va prendre les ListItems. Ensuite, l'élément que nous voulons est notre position d'index 1. nous avons notre élément que nous voulons ajouter et aussi l'élément que nous voulons remplacer. Nous pouvons maintenant aller de l'avant et utiliser Remplacer enfant pour compléter cela. Juste après ici, sélectionnons notre liste.RemplaceChild. ReplaceChild prend deux valeurs, la première va être notre nouveau ListItem, qui est un nouvel élément. Ensuite, séparés par une virgule, nous ajoutons dans l'élément que nous voulons remplacer, que nous avons stocké dans cette variable ici. Ajoutez la même valeur que notre deuxième valeur, enregistrez cela, puis rechargez. Bon à savoir notre deuxième article est maintenant le raisin, plutôt que ce que nous avions à l'origine, qui est les poires. Enfin, si nous voulions supprimer complètement un élément, plutôt que de le remplacer par autre chose, nous pouvons également utiliser la méthode removeChild. C' est assez simple à faire. Revenons dans notre script. Disons, supprimez un élément. Prenons notre liste. Ensuite, nous utilisons .RemoveChild. À l'intérieur des crochets, tout ce que nous avons à faire est d'ajouter l'enfant que nous voulons supprimer. Si nous voulions enlever nos raisins, qui est stocké dans NewListItem, nous ajoutons simplement ceci en tant que valeur, sauvegardez, puis rechargez. La valeur des raisins a été retirée de notre liste. Lorsque vous supprimez ces éléments, nous devons toujours spécifier le modèle d'abord, qui est notre liste ici. Ensuite, supprimez l'un des éléments enfants, juste comme ceci, plutôt que d'accéder aux éléments à supprimer directement. Nous savons maintenant comment ajouter, supprimer et mettre à jour des éléments en utilisant JavaScript. Passons maintenant à la vidéo suivante. 14. Il est temps de s'entraîner : ajouter des éléments avec Javascript: Nous avons couvert certaines façons d'ajouter, mettre à jour et de supprimer des éléments du DOM. La meilleure façon pour tout cela de coller est d'obtenir un peu de pratique par vous-même sans suivre avec moi. Dans ce défi, j'aimerais que vous alliez de l'avant et créez des éléments en utilisant JavaScript. Ça n'a pas besoin d'être trop complexe. Quelque chose comme tu vois ici va bien. Avec du texte en haut de la page suivi d'une image. Ceux-ci peuvent être placés à l'intérieur d'un conteneur, puis ajouter à l'image et au texte en tant qu'éléments enfants. En outre, vous devrez ajouter la sauce image et tous les attributs à l'utilisation de scripts Java. Récupéré doit le faire dans une vidéo de manipulation DOM. Si vous passez au fichier de démarrage sur le numéro 12, il est temps de vous entraîner. À l'intérieur, vous trouverez du code de base pour vous aider à démarrer. Tout ce que nous avons à faire est de créer une version JavaScript de ce code HTML que nous voyons ici. Bonne chance avec ça. Une fois que vous avez terminé, nous passons aux fonctions JavaScript. 15. Fonctions Javascript: Nous allons maintenant examiner l'utilisation des fonctions JavaScript. Les fonctions sont vraiment importantes et elles supposent FIN, que vous utilisez beaucoup lorsque vous travaillez avec JavaScript ou la programmation en général. Une fonction est un bloc ou un extrait de code, que nous pouvons appeler si nécessaire. Vous pouvez le considérer comme une tâche ou un ensemble de tâches qui sont contenues dans cette fonction. Nous pouvons alors appeler cette fonction chaque fois que nous voulons exécuter le code à l'intérieur. Ces fonctions sont également réutilisables. Nous avons du code que vous voulez répéter plusieurs fois, nous pouvons emballer un code dans une fonction. Commençons dans notre fichier de démarrage de fonctions, dont vous avez ouvert la barre latérale est le numéro 13. Ensuite, jusqu'à nos scripts, nous avons un script vide pour commencer avec. Nous définissons une fonction avec le mot-clé function, suivi du nom que nous voulons lui donner, tel que hi. Ce nom est complètement à nous, mais essayez de choisir quelque chose de descriptif. Ensuite, nous ajoutons aux crochets après, qui sont également connus sous le nom de parenthèses. Ensuite, nous ajoutons un ensemble d'accolades après, et je veux appuyer sur Entrée. Ensuite, dans ces accolades, nous pouvons ajouter le code que vous voulez exécuter, un que nous appelons une fonction. Pour un exemple simple, nous pouvons simplement ajouter alerte. Puis à l'intérieur d'ici, juste un texte hors salut de la fonction. Nous pouvons ajouter autant de lignes de code que nous le voulons à l'intérieur de cette fonction, bien qu'il soit souvent bon de ne pas surcharger la fonction et de la garder simplement pour avertir la tâche connexe. Cette section ici ne fera rien pour l'instant, car nous avons seulement déclaré cette fonction. C' est pourquoi il est parfois appelé une déclaration de fonction, ou une définition de fonction. Pour réellement exécuter ce code, nous voulons appeler ceci par le nom de fonction de hi, suivi par les parenthèses et le point-virgule. Ceci est souvent appelé l'appel d'une fonction. Maintenant, si nous sauvegardons et puis ouvrons cela dans le navigateur, nous obtenons maintenant notre code exécuté de l'intérieur, ce qui est notre alerte de salut de la fonction. Nous pouvons également appeler cette fonction autant de fois que nous le voulons en répétant le même code de fonction. Si nous copions ceci et le collons ci-dessous, nous devrions maintenant voir le problème d'alerte deux fois. Dit notre premier, cliquez sur OK, puis notre deuxième alerte juste après. Cette fonction peut contenir tous les codes que nous aimons. Si nous sommes allés vers le haut et ajouté un div vide. Tout le fait ira pour les éléments p et nous allons garder cela vide, abord ajouter un id de textes. Nous pourrions utiliser cette fonction pour aller de l'avant et changer le HTML interne de nos éléments de texte ici. bas à l'intérieur du corps de la fonction, nous savons comment le faire avec un point de document get element by id. L'id est le texte, que nous avons ici. Ensuite, nous pouvons définir le HTML interne de tous les éléments p pour être une chaîne de texte de la fonction avec un point-virgule à la fin. Maintenant, si nous supprimons un de ces appels de fonction, sauvegardez, puis dans le navigateur, nous obtenons notre alerte, puis notre texte de la fonction. Ce type de fonction est appelé une fonction de nom, simplement parce que nous ajoutons un nom comme nous l'avons fait ici. Il y a aussi une fonction anonyme. C' est là que nous ne donnons pas le nom fonctionnel, place nous pouvons assigner cette fonction à une variable. Nous pouvons supprimer le nom et juste garder ces parenthèses juste après la fonction, puis nous pouvons ajouter une variable. Appelons cela la fonction anonyme, et définissons la valeur égale à cette fonction ici. Nous pouvons alors l'appeler par son nom de fonction anonyme, donc remplacer hi par ceci, suivi par les parenthèses, recharger et leur est notre alerte et aussi les textes de la fonction fonctionne toujours. Les deux façons feront une chose similaire en exécutant le code à l'intérieur de ces accolades juste ici. Il y a cependant une différence, et nous allons regarder ce que cela est vu lorsque nous regardons levage, mais pour l'instant passons à la vidéo suivante, un regard sur les arguments de fonction. 16. Arguments de la fonction: Si nous nous dirigeons vers le fichier de démarrage de cette vidéo, qui est des arguments de fonction, ici nous avons nos éléments p de la dernière vidéo, avec l'idée de texte. Ensuite, une simple fonction nommée, qui va définir le HTML interne, pour être fonction textuelle. Donc, dans la dernière vidéo, nous avons vu quelques utilisations de fonction de base. Mais les fonctions peuvent devenir encore plus utiles, si nous transmettons certaines données. Nous pouvons transmettre ces données lors de l'appel de la fonction, en ajoutant quelques valeurs, à l'intérieur de ces crochets ici. Ces valeurs sont passées à la fonction sont appelées arguments, donc si nous voulons passer un nom, nous pourrions le faire comme ceci. Maintenant, la fonction a accès à ces arguments, en passant le nom que nous voulons faire référence, l'intérieur de ces parenthèses de fonction. Donc, c'est ajouter Nom à l'intérieur d'un ici, et ce nom ici, agit comme une variable. Nous pouvons références à l'intérieur de la fonction, le nom donner ces données à l'intérieur est un ici est appelé un paramètre. Maintenant, nous pouvons utiliser ce nom à l'intérieur de notre fonction, de n'importe quelle manière que vous choisissez. Donc, par exemple, nous pouvons l'utiliser pour définir le HTML interne plutôt que des textes de la fonction, je devrais dire salut, puis un autre nom de variable à la fin. Si nous gardons cela, nous avons maintenant la valeur de salut Chris, et Chris été les arguments qui sont passés dans. Nous pouvons aussi passer plusieurs arguments, par exemple, si le travail de cette fonction était de faire un calcul, comme la multiplication de deux nombres. Changeons cela pour être multiplié, et aussi l'appel de fonction. Disons que nous voulions passer en deux nombres, plutôt qu'une chaîne. Allons-y pour 23, et 15. Nous pouvons alors nommer nos paramètres à l'intérieur ici. Allons au numéro un, et au numéro deux. Ensuite, nous pouvons mettre à jour nos éléments p ici, avec les valeurs du nombre 1 multipliées par le nombre 2. Donc, donnez cela une sauvegarde, puis vers le navigateur. Nous obtenons maintenant la valeur de 345. Si nous devions faire une erreur, comme ne transmettre qu'un de ces arguments, disons 23, recharger. Nous obtenons la valeur de pas un nombre, parce que la fonction essaie toujours de multiplier nos deux valeurs ensemble. Cependant, si nous ne transmettons qu'une seule valeur, et nous avons seulement besoin d'une valeur à l'intérieur ici, recharger, nous obtenons toujours la valeur de 23. Cependant, bien que nous n'ayons pas notre deuxième valeur transmise, qui est le numéro 2. Donc, à la place, si dont la sortie, la valeur du nombre 2, sauvegardez ceci, rechargez, nous obtiendrons la valeur de undefined. Donc, cela ne causera pas de problèmes majeurs, tels que le broyage de notre site Web. Cela signifie simplement qu'une fonction ne peut pas faire son travail sans toutes les données dont elle a besoin. Alternativement, nous pouvons également utiliser le mot-clé return, pour retourner la valeur après le calcul. Cela peut être utile si vous souhaitez stocker une valeur, par exemple, dans une variable, pour une utilisation ultérieure. Donc, d'abord, revenons à notre fonction, et ajoutons nos deuxième arguments. Ensuite, au lieu de mettre à jour le DOM sans get élément byId, ne commenterait pas cela. Au lieu de cela, nous pouvons retourner le calcul du nombre 1 multiplié par le nombre 2 point-virgule à la fin. Maintenant, si nous donnons cela une sauvegarde et puis rechargeons le navigateur, nous voyons que le DOM n'a pas été mis à jour. Au lieu de cela maintenant, cette valeur est renvoyée. Nous pouvons le stocker dans une variable pour une utilisation future. Nous pouvons le faire en bas, par l' art dans une variable appelée somme, et c'est certainement à notre appel de fonction. Ensuite, nous pouvons vérifier que cela fonctionne, en faisant un journal de console, et connectez-vous la valeur de certains, ajouter une variable de somme à l'intérieur ici, ouvrir la console et il y a notre valeur de retour de 345. Maintenant, avez cela stocké à l'intérieur disponible, et c'est maintenant à nous de décider ce que nous voulons faire, qui est la valeur de retour. L' ajout d'arguments est un excellent moyen d'étendre la capacité d'une fonction. Ensuite, nous allons examiner deux concepts JavaScript importants appelés Scope et hissage. 17. Portée et levage: Nous allons maintenant examiner deux choses importantes à comprendre lors de l'utilisation de JavaScript, et cela s'appelle scope et levage. Commencez par la portée et permettez que cela se rapporte à nos variables. Nous regardons maintenant ces termes parce qu'ils ont beaucoup à voir avec les fonctions. Scope détermine essentiellement où nous avons accès à nos variables. abord, passons à notre projet de démarrage et dans la section portée et levage. Ici, nous avons une fonction multiplier, que nous avons vu auparavant. Multiplier les valeurs dans le numéro un et le numéro deux. Tout comme la dernière vidéo, nous avons nos éléments p vides pour afficher les résultats dans le navigateur. Donc, cette fois, plutôt que de passer le numéro un et le numéro deux comme argument à la fonction, nous pouvons aller de l'avant et déclarer ces variables. Disons que var num un est égal à cinq, puis var num deux est égal à 10, si nous sauvegardons cela. Maintenant, ces deux valeurs doivent être multipliées, que nous avons ici puis affichées dans nos éléments p. Recharger. Il y a notre valeur de 50 à l'écran. Cela fonctionne bien parce que les variables que nous avons déclarées ont été déclarées en dehors d'un corps de dysfonctionnement. Cela signifie que ces variables sont globales, toutes ont une portée globale. Les variables globales sont accessibles n'importe où dans notre code. Par exemple, notre variable est accessible ici à l'intérieur de la fonction. Mais nous pouvons également y accéder en dehors de la fonction que nous pourrions voir avec un journal de console. Ils étaient la console journal en dehors du corps de la fonction la valeur de l'une de ces variables. Enregistrez cela, puis rechargez. Nous voyons que non seulement vous avez accès aux variables à l'intérieur de la fonction, nous pouvons également y accéder en dehors de la fonction, ce que nous disons ici avec le journal de la console. Cependant, si nous saisissons ces deux variables ici, puis les découpons, puis les coller à l'intérieur de notre corps de fonction. Nous donne sauver, recharger. Donc, nous voyons maintenant que nos variables peuvent être accédées à l'intérieur de la fonction. Mais nous voyons notre journal de console est lancé et erreur. C' est parce que nous avons déplacé ces deux variables à côté de ce corps de fonction. Cela signifie qu'ils ont maintenant une portée locale plutôt que mondiale. Portée locale signifie que ces variables ne peuvent être accédées localement qu'à l'intérieur de la fonction qui y a été déclarée. C' est pourquoi je vais obtenir l'élément par ID est mis à jour. Notre journal de console, qui est en dehors de la fonction, est maintenant lancé et erreur. Nous pouvons le prouver en déplaçant ce journal de console pour être à l'intérieur de la fonction. Déplaçons cela à l'intérieur des accolades de la fonction. Ensuite, vers le navigateur. Maintenant, le journal de la console a également accès à ces variables locales. Donc, c'est comme ça que la portée fonctionne, tout est à propos de l'endroit où nous déclarons toutes les variables. Rappelez-vous donc que les déclarer en dehors d' une fonction signifiera qu'ils sont globaux et peuvent être accessibles n'importe où. Les variables déclarées à l'intérieur d'une fonction n'ont qu' portée locale et ne peuvent être consultées qu'au sein de la fonction. Ensuite, nous avons un autre de ces mots dont vous entendrez parler appelé hissage. hissage signifie essentiellement que JavaScript va déplacer ou hisser vos variables et fonctions vers le haut de la portée actuelle. Ils ne sont pas déplacés physiquement vers le haut, bien qu'ils soient réellement stockés dans la mémoire, sorte qu'ils peuvent être utilisés à tout moment dans le script. Cela provoque un comportement auquel nous ne pouvons pas nous attendre. Allons à notre exemple d'avant et jetons un coup d'oeil à cela plus en détail. Alors, à notre fonction. Donc, tout d'abord, nous déclarons notre fonction juste ici et ensuite ci-dessous cela ira de l'avant et appellera notre fonction pour l'exécuter. Nous nous attendrions à ce que cette fonction fonctionne parce que le navigateur sait que nous avons déclaré cette fonction d'abord, puis il a appelé le ci-dessous. Notre code est lu de haut en bas. Mais que faire si nous appelons la fonction d'abord avant de la déclarer. Donc, si une humeur se multiplie, devrait ouvrir le haut, appelant donc la fonction avant de le déclarer réellement. Sauvons ça et voyons ce qui se passe. Nous voyons toujours les choses fonctionner parce que, comme nous l'avons dit précédemment, les fonctions sont des variables stockées dans la mémoire. Donc, lorsque cette fonction est appelée juste ici, le navigateur ou l'interprète sait déjà qu'elle existe. Lorsque nous avons regardé les fonctions il y a quelques vidéos, nous avons examiné deux types différents. Ces types que vous voyez ici, qui est une fonction nommée, et aussi une fonction anonyme qui n'a pas de nom. Souviens-toi, ça ressemble à ça. Donc, si nous supprimons le nom et puis l'installons à l'intérieur d'une variable appelée fonction anonyme et définissons cela égal à toutes les fonctions juste ici. Si nous appelons cette fonction vers le bas. Donc, le changement multiplié pour être fonction anonyme. Ensuite, déplacez ceci vers le bas. Enregistrez, puis rechargez. Nous voyons que tout fonctionne toujours parfaitement bien. Nous avons également mentionné en regardant les fonctions anonymes il y a quelques vidéos, qu'il y a une différence entre les fonctions anonymes et les fonctions nommées. Alors que la différence des fonctions anonymes bizarres est lorsqu'elles sont appelées en premier, cela entraînera une erreur. Donc, si déplacez cette fonction anonyme, appelez en haut du navigateur et rechargez. Nous voyons maintenant une erreur dans la console et la niche ne fonctionne plus. C' est donc une différence entre les deux types de fonction. Les fonctions anonymes ne sont pas hissées, ni stockées en mémoire, mais elles sont nommées déclarations de fonction, que nous avons vu d'abord hissées. Le levage se produit aussi avec des variables. Jetons un coup d'oeil à cela, si nous commentons cette fonction, se souvenant du code Visual Studio, c'est une commande ou un contrôle avec une barre oblique. Ensuite, si nous déclarons une variable de x à 10. Ensuite, la deuxième variable de y est égale à cinq. Ensuite, nous allons alerter ces deux valeurs de x et y. Alors ajoutons x et y et séparons ceux-ci avec une chaîne. Ajoutons un symbole de tuyau à l'intérieur ici. Si nous sauvegardons cela et puis rechargeons le navigateur, nous obtenons maintenant notre alerte de 10 puis de cinq. C' est donc le comportement que nous attendrions. Nous avons déclaré une variable de x et y, puis les avons alertées à l'écran. Donc, c'est tout le comportement attendu. Mais que se passerait-il à la place si nous déplaçons l'alerte au-dessus de notre variable de y, sauvegardons ceci et vérifions cela sur le navigateur. Rechargez, et nous obtiendrons la valeur de 10, puis y est indéfini. Donc, nous avons dit avant que les variables soient hissées. Nous nous attendons donc à ce que les valeurs de x et y soient à la fois stockées en mémoire et disponibles lorsque nous appelons cette alerte. Mais ce n'est pas le cas. Il y a donc une chose à savoir. Bien que ces variables soient stockées en mémoire, seule la décoration, telle que la variable x et la variable y, est stockée en mémoire plutôt que la valeur réelle que nous lui avons assignée de cinq et aussi de 10. Donc, pour voir cela plus clairement, passons dans notre exemple. Cette première variable est l'initialisation, cela signifie que nous déclarons une variable de x et assignons la valeur de 10 à cette variable. Une déclaration, d'autre part, est quand nous déclarons simplement un nom de variable sans attribuer de valeur, comme celle-ci ici donc c'est la déclaration. Donc, maintenant, nous connaissons la différence entre l'initialisation et la déclaration. Pourquoi cela serait-il important pour notre code ? Eh bien, quand l'une de ces variables est hissée, même celles où nous définissons une valeur initiale comme celle-ci, seule la déclaration est stockée en mémoire. C' est pourquoi notre variable de y, qui aura ici, est affichée comme indéfinie. La variable y est en fait hissée ou stockée en mémoire. Donc, le navigateur est conscient qu'ils existent, mais il n'est pas conscient de la valeur initiale que nous avons définie à cinq. D' où pourquoi nous obtenons la valeur de undefined. Donc, tout cela peut sembler un peu complexe si cela est nouveau pour vous, mais c'est ainsi que le code est lu. Il est donc très important de comprendre pour éviter tout bug ou comportement attendu. Une des choses à enlever est de toujours déclarer vos variables en haut de la portée. signifie que si les variables sont locales, quisignifie que si les variables sont locales,que nous avions à l'intérieur de la fonction ici, placez-les en haut du corps de la fonction, ou si nous voulons que nos variables soient globales, nous devrions les définir en haut de nos scripts. Donc, déplacons nos x et y vers le haut des scripts, ajoutons ceci au-dessus de nos alertes d'avant. Nous pouvons également définir cela pour être notre valeur de cinq, nous donne sauver et rafraîchir. Maintenant, nous n'avons pas de problème car nos variables sont maintenant définies en haut de la portée actuelle. Donc, devrait même les définir en haut ou au moins au-dessus du code que vous allez y accéder dans notre cas, l'alerte. Cela garantira que notre code est écrit de la même manière qu'il est lu et peut-être en évitant tout comportement inattendu. 18. Fonctions de flèche: Comme la plupart des langages de programmation, JavaScript évolue au fil du temps, ce qui peut changer ou ajouter de nouvelles fonctionnalités et syntaxe. JavaScript est basé sur un langage de script appelé ECMA Scripts, qui vise à normaliser l'implémentation de JavaScript. C' est pourquoi vous entendrez souvent des versions de JavaScript appelées des choses telles que ES5, ES6 ou ES7, par exemple. ES5 ou ECMA script version cinq est une version qui est actuellement entièrement implémentée dans tous les navigateurs sans avoir besoin d'outils. Pour confondre encore plus les choses, vous les entendrez également appeler l'année de chaque publication. ES6 est sorti en 2015, donc vous pouvez également entendre cela appelé ES 2015. fur et à mesure de ce cours, nous utiliserons des fonctionnalités modernes ou une syntaxe de la spécification ES6 et plus haut. Cela signifie simplement une façon plus moderne d'écrire du JavaScript ou une fonctionnalité plus récente. À partir de, dans cette vidéo, nous allons regarder la fonction de flèche ES6. Une fonction flèche est un moyen d'écrire une fonction, que vous avez déjà vu, mais avec une syntaxe plus courte et plus propre. Si nous allons aux fichiers de démarrage dans la section des fonctions fléchées, si nous faisons défiler vers le bas, nous verrons les valeurs du numéro un et du numéro deux multipliées à l'intérieur d'une fonction anonyme, que nous voyons juste ici. Une fonction de flèche ES6 nous permet d'exécuter le même code à l'intérieur de ces accolades, mais en utilisant une syntaxe plus courte. Donc, nous pouvons toujours garder notre variable de fonction anonyme, mais plutôt que d'avoir la fonction de mot, nous pouvons simplement utiliser les parenthèses comme ceci, puis les égaux et supérieurs à symbole, et tout le reste du code à l'intérieur des accolades reste tout simplement le même. Si nous sauvegardons cela et puis rechargeons, nous voyons toujours la valeur de 50 dans le navigateur. Vous pouvez souvent entendre cela appelé une fonction de flèche grasse aussi, raison de l'apparence de la syntaxe avec ce symbole égal et les crochets à angle droit. Ces parenthèses ou parenthèses que nous avons ici, peuvent toujours prendre n'importe quel paramètre et argument, comme nous l'avons déjà vu. Donc, si nous supprimons nos deux variables ici et au lieu de les passer comme arguments. Alors ajoutons un num, un, et puis un num, deux. Nous pouvons ensuite passer ces valeurs en tant qu'arguments lorsque nous appelons la fonction. Donc 5 et 10, sauvegardez, puis sur le navigateur. Cela fonctionne toujours exactement de la même manière qu'avant. Si nous n'avons qu'un seul argument à transmettre, nous pouvons montrer sur cette syntaxe encore plus loin en supprimant complètement les parenthèses. Donc, si nous voulions seulement passer un nombre, comme cinq, deux de notre deuxième paramètre ici. Nous pouvons également supprimer les crochets ou les parenthèses et laisser simplement notre nom de paramètre à l'intérieur d'ici et puis pour éviter toute erreur, nous allons simplement supprimer ce numéro deux d'ici, recharger le navigateur, et maintenant nous allons obtenir la valeur de cinq. Donc, c'est maintenant une syntaxe plus courte et plus propre, et c'est ainsi que nous allons écrire des fonctions pour beaucoup du reste du code pendant ce cours. Donc, tout est génial et fonctionne bien maintenant, et c'est ainsi que nous pouvons utiliser une fonction de flèche ES6. 19. Événements Javascript: Maintenant, il est temps de regarder une autre partie importante de la construction de sites Web, et ce sont des événements JavaScript. Les événements sont déclenchés de plusieurs façons, lorsqu'un bouton est cliqué, cela peut déclencher un événement, quand une souris survole un élément, cela peut déclencher un événement aussi, même lorsque la page se charge pour la première fois, cela peut déclencher un événement onload. Nous pouvons alors décider ce que nous voulons faire lorsque ces événements se produisent. Par exemple, nous pourrions exécuter une fonction lorsqu'un bouton est cliqué, ou nous pourrions changer la couleur d'un élément lorsqu'une souris survole. Ici, sur le site Web des écoles W3 sous les événements HTML DOM, il y a une énorme liste d'événements que nous pouvons écouter, si nous devions faire défiler vers le bas. Tout d'abord, nous avons les événements de la souris, donc nous avons onclick, nous avons ondouble-click, onmouseleave, onmouseenter, onmouseover, out et up. Plus bas, nous avons également des événements de clavier qui sont déclenchés lorsque diverses touches sont pressées. Par exemple, nous pouvons déclencher un événement lorsque le bouton du clavier est enfoncé vers le haut ou vers le bas et il y a à peu près tous les types d'événements pour nous couvrir pour presque tout ce qui peut arriver sur une page Web, y compris les formulaires ici, nous pouvons décider nous voulons faire avec des choses comme onchange, onsearch ou onsubmit, qui est ce qu'il faut faire lorsque le formulaire a été soumis. Il y a aussi des événements de glissement, des événements de presse-papiers, et bien d'autres encore. Nous allons utiliser certaines d'entre elles pendant cette vidéo et cela nous donne tant d'options auxquelles nous pouvons répondre à l'intérieur de notre code. Si nous nous dirigeons vers les fichiers de démarrage, nous pouvons aller de l'avant et jeter un oeil à quelques exemples. Passez au fichier d'événements JavaScript, puis commençons à l'intérieur de notre exemple. Ici, nous avons du texte simple à l'intérieur d'un élément P, puis à l'intérieur du script, nous avons une fonction de flèche. À l'intérieur, nous avons juste changé le style de la taille de la police pour être de 34 pixels, puis exécutez cette fonction. On va aller au navigateur et recharger. C' est le texte que nous avons après que le style a été appliqué. Actuellement, nous appelons notre fonction à l'intérieur du script, qui est juste ici. Si vous vouliez que cette fonction ne s'exécute que lorsque quelque chose se produit, comme un utilisateur déplaçant la souris sur le texte, nous pouvons ajouter cette fonction appelée dans un événement. A l'intérieur de l'élément P juste ici à l'intérieur de l'open in, nous allons ajouter onmouseover, et c'est le nom de l'un des événements que nous avons vus avant et ensuite nous pouvons définir cela égal au nom de notre fonction, qui est ChangeFontSize puis ajoutez les locaux juste après. Cela exécutera alors cette fonction chaque fois que la souris est sur ce texte. Ensuite, nous allons commenter cet appel de fonction droit vers le bas, enregistrer puis sur le navigateur, regarde notre texte de taille standard et maintenant si vous passez le curseur sur la souris, nous voyons maintenant que le texte a été augmenté à 34 pixels. Nous pouvons choisir n'importe quel événement que nous voulons déclencher cette fonction comme onclick. Changons onmouseover pour être onclick, rechargez le navigateur, puis si vous cliquez sur le texte, la fonction est maintenant appelée. Des choses telles que les événements onclick et mouse sont vraiment courantes et nous les verrons beaucoup. Il y a aussi quelques rares que vous pouvez voir dans la liste avant, par exemple si l'utilisateur essaie de copier quelque chose à partir de la page. Ajoutons oncopy, puis nous pouvons commenter ceci, et ensuite faire quelque chose pour nous montrer une alerte, et un message d'arrêter de copier mes affaires, juste comme ça et ensuite enregistrer. Maintenant, si nous faisons un clic droit et puis copions, nous voyons maintenant le message apparaissant à l'écran. Slash supprimez cette alerte d'ici et réinstallez-la. Nous pouvons même exécuter du code lorsque la page a terminé le chargement avec onload. On peut le faire à l'intérieur du corps. Allons à l'intérieur de la balise d'ouverture, puis ajoutons onload. ici plutôt que d'appeler la fonction, je vais juste appliquer du JavaScript à exécuter. Copions ce document.getElementById, juste jusqu'à là et ensuite nous pouvons coller dans notre JavaScript à l'intérieur des citations. Nous saisissons cet élément de texte. Ensuite, nous allons changer le HTML interne pour être notre chaîne de texte de changé. Maintenant, nous gardons ça. Maintenant, dès que la page a été chargée, cela remplacera le texte à modifier. Cette méthode de gestion des événements dans un élément HTML, comme nous l'avons fait avec ces deux exemples, est appelée gestionnaires d'événements en ligne, bien que ce code fonctionne, il est considéré comme une mauvaise pratique de faire des choses comme ceci. Il est préférable de garder le HTML et le JavaScript séparés, même en plaçant le JavaScript dans un fichier séparé et c'est ce que nous examinerons bientôt dans ce cours. allons de l'avant et supprimons les gestionnaires d'événements du HTML. abord, ceux de la section du corps, surtout tout de l'intérieur ici et aussi celui de l'oncopy d'ici, alors nous pouvons travailler en déplaçant tout cela dans notre section de scripts. Commençons par accéder à tous les éléments P ici et stockons-le dans une variable. Disons, var TextElement et set est à, document.QuerySelector. Je vais sélectionner nos éléments P avec la balise P. Nous pouvons ensuite attacher un écouteur d'événement à cet élément de texte. Ajouter, TextElement et then.addEventListener. À l'intérieur des parenthèses, cet écouteur d'événement prend deux valeurs. Tout d'abord, c'est le type d'événements que nous voulons écouter. Disons que cliquez. Ce nom est généralement comme celui que nous avons regardé avant sans le mot sur avant, donc plutôt que onclick, que nous avons utilisé auparavant, nous utilisons simplement click. Aussi surmouseover serait juste mouseover. La deuxième valeur ou le deuxième paramètre séparé par une virgule, est la fonction que nous voulons exécuter. Ajoutons notre fonction anonyme ici, les parenthèses, puis ouvrons et fermons les accolades. Mettez un point-virgule à la fin. À l'intérieur de ce corps de fonction, nous pouvons ensuite exécuter du code. Copions cette section d'avant et en fait, nous pouvons supprimer cette fonction, nous n'avons plus besoin de cela. Supprimons tout ça. Ensuite, à l'intérieur de cette fonction anonyme, nous pouvons ensuite coller cela, et rappelez-vous que c'est celui qui change la taille de la police pour être de 34 pixels. Donnez ça une sauvegarde et puis rechargez, il y a notre texte. Une fois que nous cliquons sur ce bouton, il passe maintenant à 34 pixels. rappelez-vous que c'est une fonction anonyme parce que nous ne pouvons pas donner un nom à cette fonction, elle s'exécute simplement lorsque l'événement est déclenché. Cela peut également être raccourci en utilisant la syntaxe de la fonction flèche, qui est recherchée. Si nous supprimons le mot-clé fonction, puis ajoutons la flèche juste après, qui est égal, puis le plus grand symbole. Vérifiez que cela fonctionne correctement en cliquant sur le texte. L' utilisation de cet écouteur d'événement add serait également utile si vous vouliez écouter tous les éléments P sur une page plutôt qu'un seul. Pour ce faire, nous aurons besoin de les parcourir tous et nous allons couvrir la boucle dans la section suivante, ou si nous voulions donner à cette fonction un nom pour que nous puissions réutiliser ailleurs, nous pouvons découper d'ici et créer une fonction séparée c'est parce qu'il est un peu plus petit, donc tout s'adapte sur une seule ligne. Ensuite, je vais aller de l'avant et copier de cette accolade de fermeture ici directement au début de cette fonction parenthèses. En fait, nous allons couper cet autre endroit puis au-dessus de cela nous pouvons créer notre fonction. Donnez-lui un nom de, var ChangeFontSize, juste comme ça. Ensuite, nous pouvons définir cela égal à la fonction qui a été copiée et l'espace un peu. Maintenant, nous avons notre fonction séparée qui est maintenant autonome et stocké dans la valeur de la taille de la police de changement. Maintenant, au lieu d'avoir ceci comme deuxième argument, nous pouvons maintenant simplement coller dans ce nom de variable et le code devrait fonctionner exactement de la même manière. Rafraîchir, cliquez sur le texte et la fonction fonctionne toujours. Même si nous l'avons maintenant placé dans sa propre variable, cela signifie également maintenant différentes parties de notre code peuvent toujours exécuter cette fonction en accédant à ce nom ici. Remarquez quand nous avons appelé la fonction juste ici, nous n'avons pas ajouté les locaux juste après, comme ceci. C' est parce que notre [inaudible] exécutera la fonction tout de suite. Il n'attend pas d'abord le gestionnaire d'événements. Ajoutons simplement ces dans, enregistrez, et actualisez et nous pouvons voir que le texte est immédiatement 34 pixels avant même que nous ayons cliqué sur le texte plus petit. Supprimons ceux-ci maintenant de cet exemple et disons ceci. C' est tout, maintenant pour notre premier look des événements, ils sont vraiment utiles et quelque chose que nous allons utiliser beaucoup lorsque nous travaillons avec JavaScript. Nous allons continuer à regarder les événements dans la prochaine vidéo, où nous allons regarder l'objet event. 20. L'objet événement: Vous devriez maintenant avoir une idée de ce que sont les événements et ce que nous pouvons en faire. Il y a également des informations supplémentaires qui sont transmises au gestionnaire d'événements, qui est appelé l'objet d'événement. Cette information est tout sur les événements tels que : quel type d'événement il s'agissait, quel élément a été déclenché, et beaucoup plus d'informations que nous allons maintenant examiner. Si nous passons à nos fichiers de démarrage pour les objets d'événements, à l'intérieur d'ici nous avons nos textes et à peu près le même exemple de la dernière vidéo. Nous avons un EventListener qui une fois cliqué, nous allons ensuite changer la FontSize en exécutant cette fonction ici. Donc, à l'intérieur des parenthèses pour cette fonction, qui est cette section ici, nous pouvons ajouter un paramètre juste comme celui-ci. Cela peut être n'importe quel nom de votre choix, mais il est souvent appelé événement ou e pour abrégé, car il contient les informations qui lui sont transmises sur nos événements. Vous pouvez considérer cela comme une variable qui contient cette information, mais quelles informations lui sont transmises ? Eh bien, allons à l'intérieur de notre fonction et faisons un journal de console. On peut jeter un oeil. Console.log la valeur de e. Enregistrez ceci, puis ouvrez ceux-ci dans le navigateur. Cliquez avec le bouton droit de la souris et Inspecter, puis accédez à notre console. Avec cela maintenant ouvert si nous déclenchons cette fonction en cliquant sur notre texte, nous verrions maintenant quelques informations à l'intérieur de la console. Ouvrons ça et voyons ce qu'il contient. si nous faisons défiler vers le bas, nous pouvons voir qu'il y a une énorme quantité d' informations qui est transmise au gestionnaire d'événements. La plupart du temps, vous n'utiliserez jamais vraiment, mais nous pouvons voir quelques informations sur les événements. On voit que c'est un MouseEvents. Nous voyons à quelle position sur l'écran le MouseEvent a été déclenché avec les coordonnées x et y. Nous allons jeter un oeil à ces positions x et y dans un instant. Pour l'instant, si nous faisons défiler encore plus loin jusqu'à la cible qui est juste ici, nous pouvons voir qu'il y a une référence à l'objet qui a distribué les événements. Dans notre cas, ce sont les éléments p avec l'id du texte. Nous pouvons voir cela mieux si nous passons au navigateur. Plutôt que de simplement enregistrer e, nous pouvons sélectionner « e.target » actualiser, déclencher nos événements. Il y a notre cible d'événements, qui est les éléments p avec l'id des textes. Nous pouvons utiliser n'importe quel élément de cette information à l'intérieur de notre code. Par exemple, si nous revenons à la console, connectez-vous aux événements complets et actualisez. Nous avons déjà mentionné que nous avons quelques positions de souris, qui est ClientX et ClientY. C' est la position x et y de l'endroit où nous avons cliqué sur ce texte. Nous pouvons maintenant aller de l'avant et suivre la position de la souris sur nos éléments en utilisant ces clients : X et Y. Retour à notre fonction. Modifions ce document.getElementById de changer le style. Au lieu de cela, nous pouvons changer l'innerHTML des éléments p pour être égal à l'événement auquel vous accédez avec e.clientX, qui est la valeur x de la souris. Ensuite, ajoutons un élément break pour ajouter la valeur y sur une ligne séparée, et nous allons accéder à y avec e.Clienty. Nous ajoutons un point-virgule à la fin. Si nous descendons en dessous de notre fonction à l'EventListener, plutôt que d'écouter des événements de clic, nous pouvons écouter les événements de souris. Cela provoquera le déclenchement des événements chaque fois que la souris se déplace sur les éléments p, qui affichera ensuite les valeurs de x et y. Sauvegardez cela et allez ensuite dans le navigateur, nous pouvons en fait fermer la console vers le bas. Ensuite, chaque fois que nous déplacons la souris sur les éléments p, nous pouvons voir les coordonnées x et y sont mises à jour à chaque fois. C' est ainsi que nous pouvons utiliser les objets d'événement pour obtenir des informations supplémentaires sur l'événement. Comme vous pouvez le voir, il y a beaucoup d'informations qui nous sont transmises et auxquelles nous avons accès. Ensuite, nous allons voir comment nous pouvons rendre notre code plus lisible et organisé en déplaçant notre JavaScript dans des fichiers séparés. 21. Javascript externe: Tout cela dans les fichiers de démarrage JavaScript, il y a un dossier, si vous allez dans le menu appelé JavaScript externe. Si vous ouvrez cette page HTML point d'index, c'est le même code que nous avons terminé la dernière vidéo. Ce que nous allons faire dans cette vidéo est de retirer le JavaScript de ce fichier HTML et de le placer dans son propre fichier séparé. Comme ce que nous avons fait plus tôt avec CSS. Nous devons d'abord aller dans notre dossier de projet et créer un fichier pour l'ajouter avec l'extension dot js. A l'intérieur de ce fichier JavaScript externe, cliquez sur l'icône du nouveau fichier, et nous pouvons appeler cela tout ce que nous voulons. Je veux appeler ce script dot js. Ensuite, nous devons couper le contenu du script pour le point d' index HTML, puis le coller dans ce nouveau fichier. Revenez à l'index, puis faites défiler vers le bas jusqu'à notre section de scripts. Rendons cela un peu plus petit juste pour l'instant et puis si nous coupons tout le contenu de nos scripts en laissant dans ces deux balises en place. Collez cela dans notre fichier dot js scripts et donnez cela une sauvegarde. Bien. Le JavaScript est maintenant dans son fichier séparé, pour que les choses fonctionnent. Nous devons toujours lier ce fichier dans la page d'index en utilisant l'attribut source. Retournez à l'index. Déplaçons simplement les balises de script ensemble. Ensuite, continuons et ajoutons les attributs source. Cela va être un chemin relatif à nos scripts dot js fichier, le fichier script, et aussi cette page d'index sont dans le même niveau de dossier. Nous pouvons simplement ajouter des scripts dot js. Si nous sauvegardons cela et puis allons dans le navigateur, rechargez, et maintenant notre code fonctionne toujours. Chaque fois que nous nous déplacons, les éléments dp obtiendraient maintenant une valeur x et y mise à jour pour la souris. Beaucoup des avantages des fichiers JavaScript externes sont similaires aux fichiers CSS externes. abord, nous avons le HTML séparé, CSS et JavaScript, ce qui rend notre code plus organisé, lisible et maintenable. Aussi avoir JavaScript séparé dans son propre fichier nous permettra de l'utiliser dans plusieurs fichiers HTML. Si nous laissons juste le JavaScript dans les fichiers de script comme nous l'avions auparavant, il ne peut être utilisé que dans ce seul fichier. Nous pouvons également ajouter plusieurs fichiers JavaScript à la page HTML deux tout ce que nous devons faire est d'ajouter plus de balises de script avec l'attribut source pour chaque fichier. Ensuite, nous allons mettre en pratique ce que nous avons appris dans cette section en construisant une calculatrice pour convertir les valeurs de pixel en em. 22. Il est temps de s'entraîner : convertisseur pixel à em: C' est maintenant votre chance de mettre en pratique ce que nous avons appris jusqu'à présent dans ce cours. Nous allons créer une calculatrice qui convertit les valeurs de pixel en em. Rappelez-vous, em est une taille relative, qui est basée sur le conteneur parent. Par exemple, en pixels, si le conteneur parent était de 20 pixels et que nous voulons détecter à l'intérieur de 18 pixels, nous pouvons cliquer sur convertir, puis quand il définit la valeur à 0,9 em. Tout ce dont vous avez besoin pour construire cette calculatrice, vous avez appris jusqu'à présent dans ce cours. Il ne devrait pas lancer de surprises et si nous passons aux fichiers de démarrage, et si nous passons à 20, qui est la calculatrice pixel à em et si vous allez au script.js, nous avons le calcul en haut. Pour obtenir la taille em, nous divisons la taille de pixel requise par la taille de pixel parent et c'est la conversion dont vous aurez besoin pour que cela fonctionne. En outre, si nous passons à la page d'index, vous avez déjà fourni tous les styles et le balisage dont vous aurez besoin pour commencer. Tout ce que vous devez faire sera à l'intérieur du fichier JavaScript. Nous pouvons aller de l'avant et nous concentrer sur l'ajout du JavaScript. Peut sembler un peu complexe, mais tout ce que nous devons faire, est d'obtenir ce calcul, saisir les valeurs pour tous les parents, ainsi que la taille requise, et effectuer ce calcul lorsque ce bouton est cliqué. Bonne chance avec ça, donnez ça un bon coup, et je vous verrai dans la prochaine vidéo où nous allons passer par ma solution. 23. Solution : convertisseur pixel en em: Bienvenue de retour. J'espère que vous avez réussi à faire fonctionner votre calculatrice, ou au moins lui donner un bon coup d'envoi. Je vais maintenant aller de l'avant et vous montrer comment j'ai fait ma version. C' est peut-être une approche différente de la façon dont vous avez fait le vôtre, mais tant que ça marche, c'est bon. Il y a généralement plus d'une façon de faire les choses. Tous les CSS et HTML, comme vous pouvez le voir ici, ont été pris en charge pour nous dans les fichiers de démarrage. Tout ce que nous devons faire est de passer au script.js et de commencer à travailler à l'intérieur d'ici. Allons de l'avant et créons une fonction pour effectuer ce calcul. Je vais appeler le mien calculer, et mettre cela à la fonction ar. A l'intérieur d'ici, je vais commencer par saisir les valeurs des parents et requis. C' est cette boîte ici et celle-ci ici, puis stockez-les à côté des variables. Variable de la valeur parent. Distribuer les documents.GetElementsById et l'ID que nous voulons saisir. Si nous regardons la page d'index, il y a cette entrée parente ici avec l'ID si parents. Ensuite, la deuxième entrée a han Id de requis et nous allons l'utiliser dans un instant. Ajoutons les parents ici. Nous pouvons ensuite saisir la valeur avec la valeur des points, puis nous pourrions faire la même chose pour la valeur requise. La valeur var requise est égale à documents.getElementById. Rappelez-vous l'ID que nous avons examiné auparavant était nécessaire, et puis encore une fois nous pouvons saisir la valeur avec la valeur de point. Maintenant, nous saisissons les deux valeurs des deux champs d'entrée. La troisième variable que je veux créer est pour la sortie, et c'est le résultat que vous voyez ici. C' est l'élément p qui va obtenir les résultats chaque fois que nous effectuons le calcul. Recadrons ceci avec l'ID des résultats, puis stockons-le dans une variable. Les résultats Var sont égaux à document.getSelementById, et les éléments auront des résultats, et nous pouvons simplement stocker cela pour l'instant. Maintenant, nous voulons effectuer ce calcul. Chaque fois que l'utilisateur clique sur ce bouton de conversion, si nous revenons à l'index du html, ce bouton est juste ici. Nous pouvons saisir ce bouton avec un sélecteur de requête, puis ajouter un écouteur d'événement pour chaque clic, puis aller de l'avant et effectuer ce calcul. Le bouton sera installé dans une variable appelée btn, puis document.QuerySelector. Prenez notre bouton, puis appuyez sur btn et nous pouvons aller de l'avant et ajouter le EventListener. A l'intérieur des parenthèses, nous pouvons ajouter deux valeurs. Le premier est clic et c'est le type d'événement que vous voulez écouter. Une fois que le bouton est cliqué, nous voulons alors aller de l'avant et exécuter cette fonction ici. Ajoutons cela comme notre deuxième valeur pour vérifier que cela fonctionne bien, nous pouvons ensuite faire un journal de console à l'intérieur de la fonction, et ensuite nous pouvons enregistrer nos deux valeurs de la valeur parent et la valeur requise. Statut. Vérifiez ces lignes, ok, donc parentValue, puis espace vide, puis la valeur requise. Enregistrez-le sur le navigateur, puis ouvrez la console. Nous allons simplement cliquer sur Convertir d'abord, et nous ne devrions rien voir à l'intérieur de la console car nous sortons les valeurs de ces deux entrées. Ajoutons un peu d'ajustement à l'intérieur ici, 20 et 16 convertis, et donc on y va. Il y a nos deux valeurs à l'intérieur de là. La façon simple d'aller de l'avant et de mettre à jour ce résultat ici est juste de saisir cette variable de résultat ici et de définir l'innerHTML pour être les résultats de ce calcul ici, qui est une valeur requise divisée par la valeur parentValue. Donnons un coup d'envoi à ça. Si nous disons que les résultats point innerHTML est égal à la valeur requise divisée par la valeur parentValue du navigateur, et que ce sont les valeurs dans ici convertit et nous obtiendrons la valeur de 0,6 il les définira à la fois à 20, nous devrions obtenir la valeur de 1 M. C'est une façon simple de faire les choses. Cependant, si nous actualisons et ajoutons seulement une valeur en place convertit clic, nous voyons que nous obtenons le message d'Infinity, ou si nous cliquons simplement sur Convertir sans aucune valeur en place, nous n'obtiendrons pas un nombre. Nous voulons nous protéger contre les champs vides résultant dans ces zones. Nous pouvons le faire en ajoutant une instruction if else à l'intérieur de ce calcul. Ci-dessous, nous pouvons dire si nous pouvons ajouter un point d'exclamation, puis parentValue. Si la valeur parentValue est vide et n'oubliez pas que le tuyau est pour tous ou que la valeur requise est vide. Donc, chacun de ces champs est vide, voudrait alors créer une alerte à l'utilisateur juste avec un simple message de « s'il vous plaît remplir tous les champs. » Juste comme ça, et puis nous pouvons également ajouter une déclaration else. Donc, cette instruction else s'exécutera si tous les champs ont été répondus. Si c'est le cas, nous voulons saisir ces résultats. HTML et allez-y et exécutez ce code et laissez-nous aller dans le navigateur. Maintenant, si cliquez sur converts, vous verrez le message « Veuillez remplir tous les champs ». Essayons un de ces trucs. Sera toujours obtenir le même message, et puis si nous essayons le calcul, tout semble fonctionner correctement. Ok, donc c'est comme ça que j'ai terminé ce projet. Rappelez-vous si le vôtre a l'air un peu différent, tant que ça marche, tout va bien. C' est maintenant la fin de la section sur les manipulations, les fonctions et les événements DOM (Document Object Model). Si certaines choses sont encore source de confusion pour vous, ne vous inquiétez pas trop. Tout le monde apprend à différents pas et il y a beaucoup à prendre ici si vous êtes nouveau à cela. Rappelez-vous que beaucoup de ce que nous avons appris dans cette section seront répétés plusieurs fois au fur et à mesure que vous progresserez dans ce cours. Vous aurez encore beaucoup plus de pratique ou d'utilisation de ces techniques. Je vous verrai maintenant dans la section suivante où nous allons couvrir les boucles, les tableaux et les objets. 24. Tableaux Javascript: Commençons cette nouvelle section en regardant les tableaux JavaScript. Nous avons déjà eu beaucoup de pratiques d' écriture de variables qui, comme nous le savons, stockent une seule valeur. Les tableaux stockent également des valeurs, tout comme une variable, mais nous pouvons en ajouter plus d'une. Passez au fichier de démarrage des tableaux, qui est juste ici. Nous pouvons démarrer un tableau comme une variable normale. Jusqu' au script, nous pouvons utiliser le mot-clé var, puis définir un nom, que vous voulez définir pour notre tableau. Tout comme une variable, nous pouvons également définir nos valeurs, mais nous pouvons en définir plusieurs séparés par des virgules à l'intérieur des crochets. Disons une coupe, une virgule, une chaîne de chien, une virgule et allons-y pour un tigre avec un point-virgule à la fin. Maintenant, sortons ceci avec une alerte. Disons alerte. À l'intérieur de cette alerte, nous pouvons alerter nos animaux. Disons notre alerte à l'intérieur du rechargement du navigateur. Il y a nos trois éléments qui sont à l'intérieur de notre tableau. Ou nous pouvons sortir ceci à un élément, comme nous l'avons déjà vu. Si nous passons à notre HTML, créons un div avec un ID égal aux animaux, qui peut simplement laisser le contenu vide pour l'instant et ensuite descendre à notre script. Ensuite, nous pouvons saisir ceci avec get element par ID. L' ID était des animaux, puis nous pouvons définir le HTML interne comme nous l'avons vu dans beaucoup de temps auparavant et définir ceci à notre tableau d'animaux. Enregistrez, fermez ceci et actualisez et maintenant nous verrons notre tableau à l'écran. Nous n'avons utilisé que des chaînes à l'intérieur de ce tableau, mais nous pouvons également contenir n'importe quel autre type de données, tel que des nombres ou des booléens. Ceux-ci vont exactement de la même manière, séparés par une virgule. Nous ajoutons nos nombres, plutôt des citations, et nous pouvons également définir nos valeurs booléennes de true ou false. Sauvegardez cela, et nous voyons également ces produits comme prévu. Afficher dans notre tableau d'animaux, comme ceci, nous allons afficher tous les éléments à l'intérieur de notre tableau. Mais si nous voulions simplement en sélectionner un particulier, nous pourrions le référencer par sa position dans le tableau. Tout comme nous l'avons vu précédemment, nous pouvons sélectionner un numéro d'index avec les crochets, puis ajouter notre volume d'index. Rappelez-vous les tableaux, tout comme nous l'avons regardé plus tôt, commencez à la position zéro. Sauvegardez cela et maintenant nous devrions obtenir le premier phonème de coupe, et bien sûr nous pouvons changer cela pour être n'importe quel nombre. Si nous voulions Tiger irait zéro, un, puis deux. Définissez ceci sur deux, et il y a un tigre dans le navigateur. Ceci est similaire à ce que nous avons regardé plus tôt lorsque nous avons regardé requête select all et ajouté ces crochets après cela. Avec l'accès aux valeurs d'un tableau. Nous pouvons également utiliser la propriété [inaudible] pour voir combien de valeurs il contient. À notre script, laissez les crochets. Ensuite, nous pouvons dire animals.length, et notre tableau a cinq valeurs différentes. Nous devrions voir la valeur de cinq dans le navigateur. Bien. C'est ainsi que nous pouvons utiliser des tableaux JavaScript. Nous allons continuer avec les tableaux dans la vidéo suivante, où nous allons examiner certaines méthodes de tableau intégrées. 25. Méthodes de tableaux: Dans notre fichier de démarrage pour cette vidéo, qui est le numéro 22, méthodes de tableau, nous avons un tableau similaire d'animaux à la dernière vidéo, qui est juste ici. Nous les affichons ensuite dans un div avec l'identifiant des animaux qui ont amené cela pour obtenir des éléments par ID est vers le bas tout en bas cette fois, que vous pouvez voir ici. En effet, avant de pouvoir afficher ce tableau, il existe des méthodes intégrées que nous pouvons utiliser appelées méthodes Array. Il y a beaucoup de ces méthodes que nous pouvons utiliser. Ici, nous allons examiner quelques-unes des plus courantes. Incluez comment ajouter et supprimer des valeurs d'un tableau en utilisant JavaScript, en commençant par shift. Si nous faisons défiler jusqu'au premier commentaire qui est juste entendu, shift supprimera le premier élément de notre tableau, qui dans notre cas est cat. Tout ce que nous devons faire est d'accéder au tableau par son nom, puis dire dot shift. C' est simple que cela, maintenant si nous ouvrons ce tableau Méthodes à l'intérieur du navigateur, nous voyons maintenant notre première valeur de chat est maintenant supprimée. C' est notre nouveau retour Array vers, maintenant nous avons seulement nos quatre valeurs. Nous pouvons également stocker cet élément supprimé dans une variable si nous le voulions. Tout ce que nous devons faire est d'assigner une variable telle que animal1 et de définir cette valeur égale à nos valeurs de animals.shift. Ensuite, on peut vérifier ça à l'intérieur de la console. Donc, journal de la console, et qui est sortie la valeur de l'animal un, enregistrer, inspecter à l'intérieur de la console. Comme prévu, nous avons notre première valeur de chats. Au lieu de cela, si nous voulions ajouter des éléments au début du tableau, nous pouvons utiliser unshift pour ajouter autant d'éléments que nous le voulons. Diapositive les commentaires sur ces deux lignes ici, puis descendez jusqu'à décaler. Ici, nous pouvons commencer avec le tableau des animaux, comme avant, puis sélectionner la méthode unshift. Encore suivi par les crochets et un point-virgule, puis comme une corde, je vais ajouter quelques nouveaux animaux, comme le léopard, séparés par une virgule, une deuxième valeur d'oiseau. Voyons si notre Leopard et l'oiseau est maintenant dans le navigateur. Cela va maintenant obtenu léopard et oiseau poussé au début de notre Array. Ce nouveau tableau nous est retourné avec ces nouvelles éditions, le shift and unshift, un comme une paire. Ils modifient tous les deux le début d'un tableau. L' outil suivant, appelé Push and Pop, modifie la fin d'un tableau. Commençons par push, qui ajoutera une ou plusieurs valeurs à la fin de ce tableau. Commentons cette ligne ici. Déplacer vers le bas pour pousser. En commençant par nos animaux Array, nous pouvons utiliser la méthode par point push. Ensuite, à l'intérieur, nous pouvons ajouter quelques valeurs supplémentaires. Ajoutons notre léopard et ensuite notre oiseau. Cette fois jusqu'à la fin d'un tableau, actualisez, donc il y a nos cinq premiers éléments d'avant, puis nos deux derniers poussés à la fin du tableau. Ensuite, nous avons pop, ce qui est assez simple. Nous allons appeler la méthode pop pour supprimer le dernier élément du tableau. Commenter cette ligne ici et vers le bas à la section pop ici, c'est assez simple, c'est exactement comme quand nous utilisons animals.shift, mais cette fois nous utilisons animals.pop. Nous n'ajoutons aucune valeur à l'intérieur des crochets car nous supprimons simplement le dernier élément, enregistrez ceci, rechargez, et notre dernière valeur est supprimée du tableau d'origine. Ces quatre méthodes sont géniales, mais elles sont limitées à travailler uniquement avec le début ou la fin d'un tableau. Pour supprimer ou ajouter des éléments dans des positions différentes, nous pouvons utiliser la méthode d'épissure. Assurez-vous que toutes les méthodes que nous venons de regarder sont commentées, et nous sommes retournés au tableau d'origine avec nos cinq éléments, alors nous pouvons appeler animals.splice. Juste ici, vous voyez la méthode d'épissure est venu avec les parenthèses et le point-virgule. Pour commencer à supprimer des éléments, nous devons ajouter deux valeurs entre crochets ou parenthèses. Disons que nous voulions enlever ce tigre, qui est juste là. Rappelez-vous, les tableaux commencent à la position zéro, ce qui signifie que le tigre serait à la position d'index deux. Notre première valeur est deux, alors assurez-vous que cela est orthographié correctement. Épissure comme ça. Ensuite, nous ajoutons notre première position, qui est deux. Si vous avez juste une valeur comme celle-ci, tous les éléments après le numéro deux seront également supprimés. Juste comme ça. Tout à partir du tigre est supprimé, ou nous pouvons ajouter une deuxième valeur, qui est un certain nombre d'éléments à supprimer. réglage doit être un, nous allons seulement enlever notre volume de tigre, laissant notre girafe et notre lion à la fin. C' est ainsi que nous pouvons supprimer des éléments. Mais si au lieu de cela nous voulions remplacer cet article, donc si nous voulions remplacer le lion, nous pouvons simplement ajouter quelques valeurs après cela. Séparé par une virgule, remplacons un lion par un poisson. Rechargez, et on y va. Nous avons encore notre chat original, chien, girafe, lion, les deux poissons remplacent maintenant notre valeur de tigre. Nous pouvons également ajouter plusieurs éléments en deux, tout ce que nous avons à faire est de les séparer par une virgule. Allons prendre un singe cette fois, rafraîchir, et il y a notre accès aux objets au milieu. Enveloppons cette vidéo avec une autre, qui est comment inverser le tableau, qui est retourné dans l'ordre inverse. Tout ce que nous devons faire est de descendre dans une section inverse et de sélectionner les animaux.crochets inverses et point-virgule. Rappelez-vous avant que notre lion soit à la fin et le chat est au début. Si nous actualisons, ceci est maintenant remplacé. Il y a aussi d'autres méthodes de tableau qui peuvent faire diverses choses, et nous en couvrirons plus bientôt. Si vous êtes intéressé par une liste complète, dirigez-vous vers Google et faites une recherche pour Mozilla Array Methods. C' est la réponse, et ce devrait être le premier résultat qui étaye. Sélectionnez ceci, puis nous pouvons faire défiler vers le bas jusqu'à la section de la méthode, ce qui est un peu vers le bas. Continuons, il y a nos propriétés que nous avons regardé Array.length. Voici aussi nos méthodes, n'hésitez pas à regarder à travers toutes ces différentes méthodes et à découvrir comment elles fonctionnent. Nous avons examiné certains d'entre eux jusqu'à présent, donc juste, épisser, déplacer, décaler, pousser et inverser. C' est tout maintenant pour cette vidéo, et je te verrai la prochaine fois. 26. Boucle dans les tableaux : forEach: Dans les prochaines vidéos, nous allons nous concentrer sur la boucle. La boucle facilite la répétition des tâches. Dans cette vidéo, nous allons regarder le pour chaque boucle. La boucle ForEach exécutera une fonction pour chaque élément du tableau. D' abord, passons à nos fichiers de démarrage, alors passons au numéro 23. La boucle à travers les tableaux se ferme. Ici, nous avons un démarreur de base avec notre div vide et ensuite le tableau de nos animaux. Tout d'abord, regardons le problème, si nous voulions faire quelque chose avec ces éléments de tableau, nous devrions sélectionner chaque élément individuellement. Faisons un journal de console, connectons à la console la valeur des animaux. J' étais entre crochets pour sélectionner notre indice de zéro si nous voulions les chats. Ensuite, disons que ToupperCase, suivi des crochets et un point-virgule à la fin [inaudible] est une méthode JavaScript pour transformer une chaîne en majuscules ou majuscules en minuscules est également disponible pour. Maintenant, si nous voulions sélectionner notre deuxième article deux, nous allons copier ceci et coller satisfaire le usé. Ensuite, nous aurons besoin de faire cet élément ForEach à l'intérieur du tableau. Cela prendrait beaucoup de temps et beaucoup de code répétitif. Allons dans le navigateur et dans l'actualisation de la console. La Nasa sera majuscule chat et chien donc, bien sûr, cela prendrait beaucoup de répétition pour le faire pour notre tableau complet. Imaginez si nous avions des centaines de valeurs dans le tableau que nous devons être beaucoup de code répétitif et ce n'est pas génial. C' est là que la boucle pour chaque boucle entre en jeu. ForEach, nous allons exécuter un élément de tableau de fonction ForEach, pour dire que c'était beaucoup de répétition. Passons à notre code, supprimez les journaux de la console, et voyons à quoi cela ressemble. D' abord, nous sélectionnons notre tableau d'animaux, puis nous utilisons point ForEach. Ceci est également communique avec une majuscule E. Bracket point-virgule passera alors dans une fonction que vous voulez exécuter l'élément de tableau foreACH à l'intérieur de ces parenthèses ou parenthèses. Créons une fonction standard, les parenthèses, puis un ensemble d'accolades. Il est entrer et puis à l'intérieur de ces accolades nous pouvons exécuter notre code de fonction. Serait alors passer dans le nom de notre choix, que vous voulez donner à chaque élément de tableau individuel. Appelons chaque élément individuel simplement animal maintenant si nous voulons faire quelque chose avec chaque valeur de tableau, nous pouvons utiliser cette variable animale. Disons alerter notre animal, point-virgule rafraîchir le navigateur. Il y a des chats, des chiens, ça va encore, tigre et ceci est maintenant en boucle à travers chaque élément du tableau. Cette variable animale peut également être utilisée de quelque manière que ce soit. Nous pourrions ajouter du texte supplémentaire. Disons une chaîne d'animal, animal type chaîne la plus proche, puis ajoutez notre variable à la fin. Rafraîchissez le navigateur et voyez maintenant le type animal de chat, chien, tigre, girafe et lion. Ou même en revenant à notre exemple majuscule, nous pourrions utiliser la variable animal et ensuite dire point animal toupperCase. Les crochets se rafraîchissent ensuite maintenant nos valeurs majuscules à l'intérieur des alertes. Nous pouvons pousser tous ces nouveaux éléments en majuscules vers un nouveau tableau deux. abord, créons un nouveau tableau vide donc juste des animaux en peluche qui disent var upperCaseNames. Nous n'avons pas besoin d'ajouter des valeurs, nous pouvons simplement ajouter les crochets pour créer un tableau vide. Nous savons comment pousser des éléments vers un tableau, nous utilisons la méthode par point push, que nous avons regardé dans la dernière vidéo. En bas à l'intérieur de notre boucle, au lieu de notre alerte, nous pouvons dire UpperCaseNames, qui est notre tableau vide juste ici. Ils vont pousser. Puis à l'intérieur du support, l'animal veut pousser installé à l'intérieur de cette variable animale. Animal, et mettons-les en majuscules afin que ToupPercasse les parenthèses. Cette fois plutôt que de sortir un est la console. Faisons notre familier GetElementByID, qui est div de cet animal ici. Ensuite, nous pouvons pousser notre nouveau tableau à cette div. Disons point de document GetSelementsById. Tous les ID de l'animal, nous pouvons définir le point HTML pour être égal à notre nouveau tableau de UpperCaseNames. Faites défiler ce qu'un point-virgule à la fin du navigateur. Il y a un nouveau tableau de valeurs majuscules. Une autre caractéristique de ForEach est la possibilité d'accéder à chaque élément par dépôt ou par numéro d'indice. Tout d'abord, nous ajoutons un deuxième nom de variable de notre choix à l'intérieur de la fonction. Je veux appeler mon index si séparé par une virgule, le nom de la variable de l'index. Ensuite, nous pouvons utiliser cet index en côté de notre fonction alors sortons l'index avant le nom de l'animal et nous rejoindre sur save puis refresh. Maintenant, nous avons la position de l'index ainsi que la valeur donc zéro, un, deux, trois et quatre. Nous pouvons construire ce nouvel élément de tableau comme nous le voulons. Par exemple, si vous voulez ajouter un espace entre l'index et le nom de l'animal, nous pouvons le faire avec une chaîne, disons index plus et vous pourriez avoir de l'espace ou même un tiret. Puis aussi rejoint sur notre animal sur la fin rafraîchir et là nous allons. Enfin, des nombres d'index supérieurs à zéro donc si nous voulions que cela commence un, nous pourrions simplement ajouter plus un à la fin, disons index plus un. Là, nous allons donc maintenant notre numéro d'index commence à partir d'un, ce qui est probablement plus réaliste lors de la sortie à l'utilisateur. Passons maintenant à regarder une nouvelle façon de boucler à travers les tableaux et ceci est appelé carte. 27. Boucler dans des tableaux : carte: Commençons par passer à notre démarreur vide, qui cette fois est le numéro 24. C' était un exemple assez similaire à ce que nous avons regardé dans la dernière vidéo. Nous avons notre div, qui est vide, puis nous avons notre tableau d'animaux. Aussi, nous avons un deuxième tableau, qui est nos animaux mis à UpperCase, qui est créé en utilisant cette boucle ForEach. Maintenant, nous allons regarder une autre façon de boucler à travers les tableaux, qui est appelé carte. abord, je veux vous montrer rapidement quelque chose qui vous aidera à voir la différence entre map et foreach. Si nous allons de l'avant et supprimons le tableau UpperCaseName et le placer, affectez le résultat de la ForEach à une variable. Disons var upperCaseNames et définissez ceci pour être nos animaux.foreach. Maintenant, simplifions cet exemple en supprimant le numéro d'index. Supprimez la deuxième valeur de l'intérieur ici, supprimez le contenu de cette fonction. Ensuite, nous pouvons simplifier cette fonction en renvoyant simplement les animaux array.touppercase. Juste comme ça. Maintenant, tout ce que nous faisons est de faire une boucle à travers notre tableau d'origine, exécutant une fonction qui retournera nos animaux dans UpperCase, puis les stocker dans cette variable. Cela renvoie diamant termine l'exécution de la fonction, puis retourne la nouvelle valeur. Maintenant, nous faisons défiler, nous pouvons voir ce upperCaseNames ici, qui a été à l'écran. Maintenant, référez-vous à cette variable juste ici. Si nous sauvegardons cela et puis rechargeons le navigateur, nous obtenons la valeur de undefined. Attendez ça pour l'instant et nous en parlerons plus dans un instant. Cependant, si nous changeons le foreAch, cette fois pour être map, donc supprimez le mot-clé ForEach d'ici, changez ceci pour be.map. Cette fois, si nous actualisons, nous voyons maintenant les valeurs de notre tableau en majuscule. Ceci est une différence clé entre ForEach une carte, seule l'utilisation de la carte retournera un nouveau tableau. Fondamentalement, ForEach va boucler tous les éléments et faire quelque chose avec eux, comme les faire majuscules et les pousser vers un nouveau tableau, ou même une base de données. Map fera également une boucle sur les éléments et fera quelque chose avec eux, mais elle renvoie également un nouveau tableau avec les éléments transformés, qui aura accès en les stockant à l'intérieur de cette variable. finir, nous pourrions également raccourcir cette fonction en utilisant la fonction auto esc. Juste après .map, nous pouvons supprimer ce mot-clé de fonction ici et garder notre animal et utiliser la flèche. Juste comme ça. Rafraîchir et notre tableau fonctionne toujours. Rappelez-vous également, si nous n'avons qu'un seul paramètre, que nous avons ici, nous pouvons même supprimer les parenthèses et le rendre encore plus court. Rechargez le navigateur et tout fonctionne toujours bien. J' espère que cela a du sens pour la loi des buts, carte et Foreach sont interchangeables. Vous devrez utiliser la carte lorsque vous voulez qu'un nouveau tableau soit retourné. 28. Il est temps de s'entraîner : les tableaux: Avant de passer à regarder plus de types de boucles, je pense que nous devrions prendre une pause et nous assurer que nous comprenons ce que nous avons couvert jusqu'à présent avec des tableaux et aussi en boucle à travers eux. Plus dans les fichiers Stata, alors ouvrez la barre latérale et allez au numéro 25, ce qui est temps de s'entraîner, puis ouvrons ceci. Copions le chemin, puis ouvrons cela à l'intérieur du navigateur. Dans le dossier Stata, j'ai ajouté quelques instructions pour un petit défi pour vous donner plus de pratique. Nous avons un DIV vide avec l'ID des caractères et j'ai également fourni un tableau de noms de caractères de bande dessinée que je voudrais que vous triez dans ordre alphabétique, puis stockez à l'intérieur d'un nouveau tableau. Il y a aussi un petit indice en haut ici à l'intérieur des commentaires. Nous pouvons vous utiliser la méthode de tri de points pour trier le tableau, puis la deuxième partie est d'utiliser la carte de points pour faire une boucle à travers ce nouveau tableau et ajouter le texte de nom avant chaque caractère. Ils ressembleront aux commentaires ici. Le texte du nom, puis la chaîne de Bugs Bunny du tableau, puis le nom Duffy Duck, et ainsi de suite pour chaque élément à l'intérieur de ce tableau. Ensuite, je vais enfin mettre ces valeurs à l'intérieur de cette DIV vide en haut. C' est une excellente chance de renforcer ce que nous avons couvert jusqu'à présent, mais si vous avez du mal à faire fonctionner cela ne vous inquiétez pas, nous allons couvrir la solution dans la prochaine vidéo. 29. Solution-tableaux: Bienvenue de retour. J'espère que ce défi a été quelque chose que vous avez pu relever seul. Sinon, je vais passer par une façon de faire ça. Allons à nos débuts et faisons défiler vers le bas jusqu'à notre script. Allons d'abord pour le numéro 1, qui est d'organiser les éléments dans l'ordre alphabétique, puis stocker à l'intérieur d'une nouvelle variable. Allons vers le bas et utilisons cette méthode de tri par points ici. Disons les caractères, qui est notre nom original .sort. Ensuite, nous devons stocker cela à l'intérieur d'une nouvelle variable, donc c'est assigner, le nom de variable de tri est des caractères. C' est à vous de décider. Essayons cela dans le navigateur. Facteurs à un console.log pour notre tableau de caractères triés. Rafraîchir. Ouvrez la console. Ouvrez le tableau, et il y a notre tableau, qui reviendrait maintenant dans l'ordre alphabétique. Nous pouvons aller de l'avant et supprimer ce journal de console, puis passer au numéro 2. Nous devons retourner un nouveau tableau avec chaque élément ayant le préfixe de nom. Nous devons ajouter cette chaîne de nom avant les sorties de chaque valeur. Pour ce faire, je vais utiliser la fonction de carte, que nous avons examinée récemment. Accédez à nos caractères triés, qui est notre tableau de noms de caractères par ordre alphabétique. Ensuite, nous pouvons appeler .map. Ensuite, nous pouvons passer dans une fonction. Je vais utiliser la fonction flèche ES6 et crée une variable appelée caractère pour chaque élément à l'intérieur du tableau. Crée notre fonction flèche, et à l'intérieur de notre fonction, et nous allons retourner, tout d'abord, la chaîne. Le texte du nom, que vous avez ici, disons le nom, un deux-points, puis le nom de notre caractère individuel, qui est stocké dans cette variable. D' accord. Maintenant, parce que nous retournons la chaîne, nous devons maintenant stocker cela dans la variable. Donc, nous allons dire var et laisser dire les noms de tri et définir ceci à notre fonction. Donc maintenant, nous avons ces stockés dans une variable. Nous pouvons maintenant tous mettre ces le navigateur en utilisant cette idée de caractères. Prenons cette div vide avec un document.getElementById, qui a l'ID des caractères. Définissez le point innerHTML, pour être égal à cette variable ici, de SortNames, point-virgule aux extrémités. Fermez la console, et on y va. Maintenant, il y a toutes nos cordes de Nom : Bugs Bunny, Nom : Daffy Duck, Jessica Rabbit et Roger Rabbit. Nous avons maintenant le préfixe de nom sous forme de chaîne, et ceux-ci sont également dans l'ordre alphabétique. Si vous parvenez à le faire, génial. Si ce n'est pas le cas, considérez cela comme une expérience d'apprentissage. Ensuite, nous allons jeter un oeil à un autre type de boucle, qui est la boucle for. 30. Loop For: Dans les prochaines vidéos, nous allons regarder différents types de boucles. Les boucles que nous avons examinées précédemment sont destinées à être utilisées avec des tableaux. Cependant, la boucle For and while, que nous allons regarder est un peu plus générale et pas exclusive aux tableaux. Disons que nous voulions saisir un de ces caractères et l'ajouter à la liste non ordonnée. Allons aux données. Avoir notre liste vide ou non ordonnée ici. Notre gamme de personnages, comme avant. Si nous voulions ajouter ces caractères à cet UL vide. Pour ce faire, nous devons parcourir chaque élément à l'intérieur ce tableau à des balises li, puis les placer dans la liste non ordonnée. abord, nous pouvons créer une variable vide pour stocker ces noms de caractères avec les balises li. Disons sur les caractères, créez une variable appelée élément et définissez ceci pour être une chaîne vide. Si nous devions le faire manuellement sans utiliser de boucle, nous devons faire quelque chose comme ça. Nous allons saisir notre élément vide, qui est cette variable ici, puis utiliser plus égal. Plus égal ajoutera la valeur à droite à cet élément à gauche. Disons les caractères, qui est notre tableau ici, puis positionnons zéro. Cela affecterait notre valeur Roger Rabbit, qui est juste ici, à notre variable d'article. Nous pourrions ensuite ajouter ceci sur une nouvelle ligne en ajoutant une balise de rupture, puis un point-virgule à la fin. Si nous copions ceci et ajoutons le même trois fois de plus. Encore une fois, manuellement, nous devons faire un, deux et trois. Ensuite, nous allons ajouter ces éléments à cette liste non ordonnée avec un document.getElementById. Vous voulez manquer l'idée de caractères , puis définir le HTML interne pour être égal à notre élément. Si nous disons cela et puis recharger le navigateur, bon. Nos éléments de tableau sont maintenant sur la page, mais cette façon n'est pas idéale car vous pouvez avoir des centaines d'éléments à l'intérieur du tableau. Cela signifierait beaucoup de répétitions. Il faudrait répéter ces lignes plusieurs fois pour chaque élément du tableau. C' est un problème dans lequel une boucle pourrait résoudre pour nous. Nous créons une boucle for juste comme ça. Ajoutons le mot-clé for, les parenthèses, puis ouvrons et fermons les accolades à l'intérieur de ces parenthèses ici. La boucle for prend en trois déclarations. Tout d'abord, c'est ce qu'on appelle l'initialiseur. Disons que c'est notre valeur initiale de i d'être égal à zéro avec le point-virgule à la fin. Ici, nous pouvons définir une variable avec notre valeur initiale est commun pour voir cette variable appelée i, qui signifie incrément. C' est parce que cela est incrémenté avec chaque boucle après le point-virgule. Deuxièmement, c'est la condition. La boucle continuera tant que cette condition est vraie. Nous voulons garder la boucle pour la longueur des caractères à l'intérieur de ce tableau. Nous pouvons dire que si je est inférieur à la longueur des points de caractères, point-virgule à la fin. Troisièmement, nous disons comment nous voulons augmenter la valeur de i avec chaque boucle. Si nous disons i++, cela augmentera la valeur d'une à chaque fois. La première boucle, i commence à la valeur de zéro. Ensuite, après la deuxième boucle, je serai une troisième boucle, je serai deux, et ainsi de suite. Ensuite, comme une fonction, nous pouvons ajouter le code que nous voulons exécuter entre les accolades. Ce code est répété pour chaque boucle, ou dans notre cas, il sera répété pour chaque élément à l'intérieur du tableau. Si cela est déroutant, nous allons consigner la valeur de i pour voir ce qui se passe. Console consignez la valeur de i, ouvrez le navigateur. Ouvrez notre console. Ok, on a zéro, un, deux et trois. Rappelez-vous que nous avons initialisé i à zéro. Il s'agit de la valeur de départ. Nous avons ensuite quatre éléments à l'intérieur du tableau. Il y a quatre valeurs différentes ici. Ces quatre valeurs de zéro à trois devraient également paraître familières. C' est la même chose que nous avons fait au début. Nous avons nos valeurs de zéro à trois comme positions d'index à l'intérieur des crochets. Plutôt que d'avoir ces quatre lignes de code, nous pouvons simplement copier une de ces lignes. Au lieu du journal de la console, nous pouvons maintenant l'ajouter à l'intérieur de notre boucle for. Supprimez ces quatre lignes, nous n'en avons plus besoin. On va utiliser ça avec notre boucle maintenant. Ensuite, la valeur codée en dur de zéro peut maintenant être remplacée par la valeur de i, qui, comme nous le savons, est zéro, un, deux et trois et ainsi de suite. Maintenant, si nous sauvegardons ceci et puis rechargeons, nous avons toujours les mêmes quatre noms sur l'écran ici mais cette fois, nous utilisons la boucle for avec beaucoup moins de code. C' est bon car cela sera répété aussi longtemps que nous avons des éléments dans le tableau. Par exemple, si nous devions aller et ajouter une nouvelle valeur ici, donc cela devrait dire, « Bonjour, » à l'intérieur. Cela sera également ajouté à la fin du tableau. Je vais juste les enlever pour l'instant. Puisque le conteneur de caractères est une liste non ordonnée, ce qui est juste ici, nous pouvons améliorer cette boucle en entourant chaque élément à l'intérieur des balises d'élément de liste. Juste avant les personnages. Allons autre chaîne de li le symbole plus. Ensuite, à la toute fin, changez notre balise de pause pour être notre élément de liste de clôture. donnez cela une sauvegarde, rechargement, maintenant nous voyons que c'est un élément de liste parce que nous avons les puces sur le côté gauche. Si nous faisons également un clic droit et inspectons, Cliquez sur l'inspecteur et choisissez l'un de ces éléments de liste. Nous pouvons maintenant voir sur l'écran que nous avons notre liste non ordonnée et ensuite à l'intérieur nous avons nos quatre éléments de liste, tout comme HTML standard. Si vous vous souvenez de retour dans la vidéo de manipulation DOM, nous avons regardé le sélecteur de requête tout. Si on retourne dans nos fichiers de démarrage. Si vous faites défiler jusqu'au numéro 10, qui est la manipulation DOM, ouvrons rapidement la page d'index. En bas tout en bas, nous avons eu requête, sélectionnez tout, où nous avons sélectionné nos deux images par la position de l'index. Rappelez-vous que nous avons dit que nous pouvons accéder à toutes nos images par ce numéro d'index, mais ce n'est pas non plus idéal parce que nous répétons le code. Plutôt que de dupliquer du code comme celui-ci, ce sont les choses pour lesquelles une boucle for serait utile. Si nous fermons ceci et revenons ensuite à notre fichier de démarrage de boucle for, qui est ici, j'ai fourni deux images différentes à l'intérieur de ce dossier. Nous pouvons aller de l'avant et les ajouter maintenant. Fermez la barre latérale. Si nous allons à nos listes non ordonnées en haut à l'intérieur du HTML, ajoutons une image. Tout d'abord avec la source de bugs lapin, qui a l'extension point PNG. Ensuite, notre deuxième image, cette fois avec la source de jonquille duck.PNG. Fermez ça. Maintenant, j'ai nos deux images. Je vais aller de l'avant et stocker ces références dans une variable appelée images. Jusqu' à notre script. Allons tout en bas et sélectionnons une variable appelée images. Définissez-les pour être document.query, sélectionnez tout, puis saisissez toutes les images avec la balise IMG. Ensuite, nous pouvons utiliser à nouveau la boucle, faire tout ce que nous voulons avec ces images. Je vais saisir le nom de chacun de ces fichiers image à l'écran. Juste en dessous de notre variable d'images. Créons une nouvelle boucle pour. Construire ça comme nous l'avons fait avant. Ensuite, nous pouvons ajouter nos trois valeurs. Tout d'abord, définissons notre initialiseur, je vais être égal à zéro ; nous allons exécuter cette boucle alors que je suis inférieur à des images, qui est notre variable ici.length. Ce sera deux éléments longs car vous avez deux éléments d'image différents sur l'écran. Cela s'exécutera deux fois le point-virgule à la fin. Ensuite, nous allons incrémenter celui-ci sur chaque boucle. Maintenant, examinons les sorties avec un journal de console. La valeur que nous voulons afficher est les images. Nos images variables ici, à l'intérieur des crochets, nous pouvons ajouter i. Cela accèdera à la première image de la première boucle. Ensuite, sur la deuxième boucle, nous allons accéder à la deuxième image parce que je serai égal à un. Commençons par vérifier cela dans le navigateur. Allez sur la console. Il y a nos deux images que nous venons de vivre. Si vous vouliez saisir le nom de la source, nous pourrions utiliser .getattributes. Ensuite, à l'intérieur des parenthèses, l'attribut que nous voulons saisir est la source. Maintenant, revenez au navigateur. Nous obtenons maintenant le nom de l'attribut source pour chaque image. Encore une fois, si avait beaucoup d'images différentes, boucle serait vraiment utile pour quelque chose comme ça. Les boucles peuvent vraiment nous faire gagner beaucoup de temps lors de l'exécution de tâches répétitives. C' est ainsi qu'une boucle for fonctionne. Ensuite, nous allons regarder la boucle while. 31. Loop While: À l'intérieur de notre boucle while démarre le fichier. Nous avons le même exemple que nous avons regardé dans la dernière vidéo avec la boucle for. Nous avons nos images. Nous avons une liste non ordonnée, nous avons un tableau de caractères et ensuite nous poussons nos caractères dans cette div vide. Ensuite, nous avons nos deux images juste en dessous. Cette boucle pour que nous avons regardé précédemment, continuera à fonctionner tant que cette condition est vraie, ce qui est juste ici. Alors que les éléments de Larry à l'intérieur du tableau, cela continuera à fonctionner. Une boucle while, que nous allons regarder maintenant, fait un travail similaire. Mais cette fois, une boucle while s'exécute, tandis qu'une condition est évaluée à true. Nous pouvons modifier cela pour être une boucle sauvage en changeant la chute pour être tout. Nous pouvons également supprimer la première et aussi la troisième déclaration des crochets. Donc, supprimez ces données et i plus, plus. C' est parce qu'une boucle sauvage ne reçoit que la condition à l'intérieur d'ici, et elle continuera à fonctionner tant que cette condition est vraie. Nous devons encore initialiser la première valeur de i, et nous pouvons le faire en dehors de la boucle. Donc juste au-dessus de la boucle, disons var i est égal à zéro. Enfin, nous pouvons incrémenter i sur chaque boucle, tout en bas, sélectionner dire i plus, plus, et nous donner sauver. Donc, pour résumer, cette boucle commencera à zéro, que vous suggérez ici. Il ajoutera ensuite le premier élément du tableau, qui est cette première ligne ici. Et puis une fois que c'est fait, AC va ensuite incrémenter i pour être un. Cela continuera également à fonctionner jusqu'à ce que la valeur de i ne soit plus inférieure à la longueur du tableau. Donc si nous faisons cela, disons que nous devrions toujours avoir nos quatre noms sur l'écran de notre tableau. Mais cette fois en utilisant la boucle while. Avoir le i plus, plus écrit à la toute fin est vraiment important. Si nous oublions les augmentations sur chaque boucle, je serai toujours inférieure à la longueur du tableau, qui signifie que la condition sera toujours vraie et cela entraînera une boucle infinie. Cela provoquera l'écrasement du navigateur. Donc, si nous devions supprimer cela et puis enregistrer, actualiser, nous pouvons voir que le navigateur a du mal à charger. Nous pouvons encore voir la filature dans le coin et aussi nous avons la possibilité d'arrêter de charger la page et le navigateur écrasera. Cependant, beaucoup de navigateurs modernes détecteront également que c'est le cas et cesseront de fonctionner après une période de temps, que vous pouvez voir ici. Alors maintenant, nous allons simplement ajouter ce solos back-end plus de problèmes, puis recharger et nos articles en boucle sont de retour à l'écran. Avant de terminer cette vidéo, jetons un coup d'oeil à un autre exemple. Donc, allons vers le bas et créons plus de variables pour certains nombres. Disons que x est égal à cinq et Y est égal à 10. Ensuite, créez notre boucle while, comme nous l'avons fait avant et puis nous pouvons créer notre condition. Donc, disons que si la valeur de x est inférieure à y, alors nous pouvons exécuter notre boucle. Donc, faisons un console.log la valeur de x, puis nous créons incrément x par un à chaque fois. Donc, alors que la valeur de x est inférieure à y, nous pouvons le sortir sur la console, puis incrémenté d'un à chaque fois. Alors enregistrez ceci sur la console. Rafraîchissez et on y va. C' est des valeurs de cinq à neuf. Si nous voulions que cela aille jusqu'à 10, tout comme la valeur de y. Nous pourrions définir cela pour être inférieur ou égal à et cela va maintenant aller jusqu'à 10. C' est ainsi que nous utilisons une boucle while en JavaScript, et dans la vidéo suivante, nous allons passer à regarder les objets JavaScript. 32. Objets: Bienvenue les gars. Nous allons maintenant regarder les objets JavaScript. Les objets sont la collection de propriétés qui ont un nom et une paire de valeurs. Par exemple, tout comme dans la vie réelle, un ordinateur est un objet. Un ordinateur peut avoir de nombreuses propriétés, par exemple, un nom de propriété du fabricant, et une valeur d'Apple, un nom de propriété de taille de moniteur et une valeur de 22 pouces, ou coller avec nos caractères d'avant, un caractère peut aussi être un objet, avec un nom de propriété de prénom, et une valeur de Mickey, ou un nom de propriété de couleur, et la valeur de rouge. Ce ne sont que des noms et des valeurs qui sont beaucoup ensemble qui construisent un objet. Nous allons créer un objet sur le démarre de l'objet un fichier, qui est juste une balise de script vide. abord, nous définissons de nouveaux objets avec le nouveau mot-clé, donc de nouveaux objets, suivis par les crochets, et le point-virgule. Nous pouvons ensuite assigner ce nouvel objet à une variable et définissons ceci sur le nom du caractère. Si nous passons maintenant à la console, alors faites un clic droit et inspectez, ouvrez ceci, et puis nous pouvons faire un journal de console avec la valeur de caractère, enregistrez cela et puis rechargez. Nous voyons un ensemble d'accolades. C' est juste un objet vide car nous n'avons pas encore ajouté de propriétés. Si nous revenons à notre projet, nous pouvons maintenant les ajouter. Nous pouvons le faire en sélectionnant notre personnage, puis disons point le prénom et définissez cela égal à Bugs. Ensuite, nous pouvons dire le nom de point de caractère égal à Bunny, puis le caractère, et disons que nous avions une image, donc point image égal à une chaîne de bugs lapny dot png. Nous allons en faire une de plus, nous allons dire que la couleur des points de caractères est égale à augmentée, donc ici nous avons donné les objets de caractère, propriétés du prénom, du nom, de l'image et de la couleur, puis nous assignons ces valeurs sur le côté droit. Si nous sauvegardons cela et revenons ensuite à la console, voyons quel effet cela a. Nous voyons maintenant du contenu à l'intérieur de nos accolades, donc notre objet a maintenant quelques propriétés. On peut dire notre prénom de Bugs, notre nom de famille de Bunny et ainsi de suite. Ce sont des paires de valeur de nom, donc le prénom de Bugs est une paire de valeur de nom, le nom de famille de Bunny est aussi une paire de valeur de nom. Nous pouvons accéder à n'importe laquelle de ces propriétés directement avec le nom, juste comme ceci. Passons à notre journal de console et juste en dessous, nous pouvons ajouter un second journal de console. Si nous voulions accéder à la couleur de nos caractères, nous pourrions sélectionner le caractère complet, puis dire la couleur des points, rafraîchir ceci et il y a notre valeur de, qui est cette propriété juste ici. Accédez à nos valeurs comme ceci avec le point est appelé la notation point. Il existe également une deuxième façon d'accéder à ces propriétés, c'est la notation entre crochets. Cette fois, au lieu d'accéder aux propriétés avec les points, nous pouvons faire un journal de console et utiliser à la place ces accolades carrées. Sélectionnez les objets de caractère, les crochets et ensuite nous pouvons accéder à notre couleur, point-virgule à la fin, rafraîchir et il y a nos deux valeurs de gris. D' abord avec la notation de points, puis deuxièmement avec les crochets. Une autre façon de créer un objet est appelé littéral d'objet et plutôt que de déclarer un objet vide, que nous ajoutons juste ici et puis en ajoutant des propriétés avec ces quatre lignes, nous pouvons tout faire à la fois. Commentons cette première méthode ici, puis juste en dessous de cela. Nous pouvons créer notre objet et le stocker à l'intérieur disponible. Disons que var caractère et définissez cela à tous les objets, plutôt que d'avoir un objet vide, nous pouvons maintenant affecter nos paires de valeur de nom, donc disons notre prénom, le deux-points. Notre prénom est Bugs, séparés par une virgule, nous pouvons ajouter notre deuxième nom de famille, et voici Bunny. Encore une fois notre image, donc Bugs-Bunny point png et enfin la couleur. Ces valeurs précédentes que nous avons examinées, ne sont que des chaînes simples. Il peut également s'agir de n'importe quel type de données que nous avons déjà couvert, tel qu'un tableau. Nous pouvons ajouter plusieurs valeurs pour la couleur, donc disons que nous avons une valeur de couleur de gris, puis séparés par une virgule, aussi blanc. Si nous sauvegardons cela et en fait, nous allons supprimer ces journaux de console, juste en laissant notre personnage. Sur la console, il y a nos paires nom-valeur, comme avant, mais cette fois notre couleur est un tableau avec deux valeurs distinctes. Si vous cliquez sur cette flèche ici, nous pouvons alors l'ouvrir et ensuite développer la couleur. La position de l'index de zéro est grise et l'index de un est blanc. Nous pouvons même ajouter des fonctions à nos objets, donc juste après la couleur, nous pouvons ajouter une virgule et ensuite nous allons définir une fonction qui va créer une chaîne qui concatène notre prénom et notre nom de famille. Disons que notre nom complet est égal à une fonction, puis créons une fonction comme nous l'avons vu précédemment. À l'intérieur du corps de la fonction, nous pouvons faire une alerte et à l'intérieur de l'alerte, créons une chaîne disant que mon nom complet est, un espace, puis pouvons ajouter nos propriétés. Disons ce prénom de point, puis ajoutez une chaîne vide pour l'espace, puis à la fin nous allons dire ce nom de point, point-virgule à la fin. Il y a quelques choses à noter ici, tout d'abord, lorsque nous ajoutons une fonction en tant que propriété d'un objet, cela s'appelle une méthode et nous avons également utilisé ce mot-clé pour accéder à nos propriétés. Lorsqu' une fonction est appelée en tant que méthode d'un objet, la valeur de ceci est définie sur ces objets actuels. Par conséquent, nous pouvons accéder à l'une de ces propriétés sur cet objet en utilisant ce point, puis le nom de notre propriété. Si vous donnez ceci une sauvegarde et passez au navigateur, vous pouvez voir notre méthode de nom complet est ici plus si vous voulez réellement exécuter cette méthode et afficher l'alerte, nous devons l'exécuter entre parenthèses. Retour à notre journal de console et dire le nom complet du point de caractère, la parenthèse juste après et maintenant si nous sauvegardons et puis appelons ceci, nous allons maintenant voir notre méthode courir et l'alerte est dans le navigateur et la chaîne de Mon nom complet est Bugs-Bunny, se ferme. C' est maintenant pour notre premier regard sur les objets, ils sont vraiment utiles pour regrouper des informations sur presque n'importe quel type d'élément. Ensuite, nous allons nous en tenir au sujet des Objets et regarder comment nous pouvons les parcourir. 33. Boucle à travers des objets: Tout comme lorsque nous travaillions avec des tableaux, si vous avez beaucoup de propriétés sur un objet, nous pouvons vouloir les parcourir en boucle. C' est plus efficace et moins de code que de sélectionner chaque propriété séparément. À l'intérieur de notre fichier de démarrage, qui est en boucle à travers les objets, nous avons un objet de caractère juste ici, que vous pouvez parcourir en boucle. Je vais créer une variable vide pour commencer, le magasin les résultats. Disons que les résultats Var et me satisfont une chaîne vide. Cela va stocker les résultats de chaque propriété d' objet qui va passer en boucle sous forme de chaîne. La boucle que nous sommes habitués à traverser l'objet est appelée la boucle for in et elle ressemble à ceci. Nous commençons avec une boucle standard à la recherche comme avant. Ensuite, nous partons dans les locaux et définissons notre variable de i, mais cette fois dire dans le caractère. Caractère est le nom de notre objet qui est ici. Maintenant, à l'intérieur du corps de la boucle, nous pouvons faire quelques journaux de la console. Commençons par un console.log pour la valeur de i et voyons ce que nous obtenons. Ouvrons ça à l'intérieur de la console. Cliquez avec le bouton droit de la souris inspecter et maintenant nous pouvons voir que nous obtenons les valeurs de FirstName, LastName, image en couleur. C' est parce que la valeur de i est la clé. Ce sont essentiellement les valeurs sur le côté gauche de nos propriétés. Si nous voulions accéder aux valeurs sur le côté droit de nos propriétés, nous pourrions alors faire un second journal de console. Cette fois, au lieu de i, nous faisons le caractère (i) ; point-virgule à la fin, rafraîchir. Nous pouvons voir que chaque paire est maintenant sur l'écran. Prénom des bugs, Nom du lapin. Si nous voulions mieux les voir, nous pourrions faire un troisième journal de console et simplement ajouter quelque chose pour séparer ces valeurs, comme quelques tirets et là nous allons. Voilà nos propriétés. D' accord. Bon, donc maintenant nous avons accès à toutes ces propriétés et aussi aux noms et valeurs individuellement. Nous pouvons maintenant aller de l'avant et construire nos résultats et créer une chaîne à afficher à l'écran. Passons à notre boucle for et en dessous de ces journaux de console. C' est construire notre ficelle. Nous pouvons accéder à ces variables de résultat ajouter ceci avec plus égaux. Tout d'abord, définissons la valeur de i, qui est nos noms de propriété tels que FirstName et LastName, ajoutons d'aujourd'hui une chaîne avec un deux-points entre et l'espace. Ensuite, juste après cela, nous pouvons ajouter notre nom de propriété tels que les bugs et lapin. Tout comme nous le voyons avec ce journal de console ici. Ajoutons le caractère i, puis ajoutez-les sur leur propre ligne séparée avec une balise de rupture. Nous avons créé un résultat qui est une chaîne de toutes nos propriétés de caractères avec les noms et les valeurs. Nous pouvons maintenant ouvrir ce navigateur à l'intérieur d'un div vide. Allons à la section body, créer un div et ajouter l'id des sorties va être l'emplacement où nous sommes des sorties, notre chaîne de résultats, puis descendez au bas à l'extérieur de la boucle for. Faisons un document.getElementById, nous voulons saisir les sorties, qui est notre div vide, puis définir le innerHTML pour être égal à notre variable de résultat. Si nous enregistrons ceci et ensuite sur notre navigateur, recharger, nous voyons maintenant la chaîne que nous avons créée avec la valeur du nom de propriété suivie d'une balise de rupture. C' est une chaîne que nous avons créée juste ici. Ceci est répété pour chaque élément à l'intérieur de nos objets car nous l'avons ajouté à une boucle for in. C' est ainsi que nous pouvons faire une boucle à travers les objets et c'est vraiment pratique, surtout quand les objets deviennent vraiment grands. Dans la vidéo suivante, nous allons continuer à regarder objets et comment les construire en utilisant la fonction constructeur. 34. Fonction constructeur d'objet: Nous avons déjà examiné plusieurs façons de créer des objets. Ceux-ci sont très bien si nous voulons juste créer un seul objet, comme nous l'avons fait précédemment. Cependant, si nous voulons créer plusieurs objets avec les mêmes propriétés, il existe une autre façon d'utiliser un constructeur, plutôt que de construire un objet et d'ajouter des noms et des valeurs, nous pouvons utiliser la fonction constructeur pour créer fondamentalement un ou un modèle pour chaque objet. Cela nous permettra de créer plusieurs objets en utilisant la même structure. Par exemple, si j'avais plusieurs caractères qui contiendraient généralement les mêmes propriétés, comme un nom et une couleur. Donnons à cela un tour, et je vais démarrer un fichier pour la fonction constructeur d'objet. Dans nos scripts, la fonction constructeur est créée comme une fonction normale que nous avons regardée. Nous utilisons le mot-clé function, puis définissons un nom, tel que caractère. fonctions du constructeur ont généralement une première lettre majuscule, comme nous le voyons ici. Ainsi, nous pouvons les distinguer des fonctions régulières. Nous reviendrons à ça dans un instant. Mais d'abord, nous pouvons créer un nouvel objet basé sur cette fonction constructeur en utilisant le nouveau mot-clé. Juste en dessous de cela, nous allons utiliser le nouveau mot clé, disons, nouveau caractère. Ce caractère ici, doit correspondre au nom de notre fonction juste au-dessus. Ensuite, à l'intérieur des parenthèses, nous pouvons ajouter quelques valeurs que nous voulons utiliser dans les objets. Donc, le prénom, disons Mickey, séparé par une virgule, une deuxième valeur de Mouse, pour le deuxième nom. Nous pouvons ensuite ajouter un tableau de couleurs. Mickey Mouse, on peut utiliser le rouge, on peut aussi dire jaune, et aussi noir aussi. Rendre ça un peu plus petit. Juste après le tableau, nous pouvons ajouter une virgule, puis nous pouvons ajouter un nom pour notre image. Disons mickey-mouse.png, puis ajoutez un point-virgule à la fin. Maintenant, nous avons créé ce nouveau personnage. Nous pouvons maintenant l'assigner à une variable appelée mickey. Super. Nous avons construit un nouveau personnage, nous avons passé quelques valeurs entre parenthèses, mais comment les transmettre ? La réponse est la même qu'une fonction régulière. On peut les transmettre comme arguments. A l'intérieur du constructeur, nous pouvons dire premier, dernier, couleur et image, qui est dans le même ordre que vous avez créé ici. Ici, nous avons nos valeurs pour le prénom, nom, la couleur et l'image. Mais ceux-ci ne sont pas encore liés à nos noms ci-dessus. Nous pouvons le faire à l'intérieur du corps de la fonction. Tout d'abord, disons que ce prénom de point est égal en premier. Cela peut sembler un peu étrange au début, mais ce que nous faisons pour la première valeur est que nous passons dans une chaîne de Mickey, qui est stockée dans cette première variable. Ensuite, le prénom sera Mickey. Aussi en JavaScript, ce mot-clé peut être un peu compliqué à comprendre. Lorsqu' il est utilisé de cette façon, le mot-clé de ceci fait référence à ces objets. Nous pouvons le voir en faisant un console.log et connectez-vous à la valeur de ceci, puis allez à notre console. Nous pouvons voir que ce mot-clé fait référence à notre personnage avec le prénom de Mickey. Ici, nous pouvons également voir notre propriété avec le nom valeur passe, que nous avons déjà ajouté. Cependant, si nous allons de l'avant et déplacons notre console.log pour être en dehors de l'objet actuel, juste comme ceci. Maintenant, nous retournons à notre navigateur. Nous voyons maintenant que nous ne recevons pas notre objet retourné, place, que ce mot-clé fait maintenant référence aux objets de fenêtre. Cet objet fenêtre représente la fenêtre du navigateur. Toutes les fonctions globales, objets et variables qui vont créer, deviendront alors des parties de cette fenêtre. Si nous allons de l'avant et effacons la console et tapons dans la fenêtre, appuyez sur « Entrée », nous obtenons maintenant notre fenêtre retournée, et si nous ouvrons cela, nous pouvons également voir les propriétés sur cette fenêtre objets. A l'intérieur, nous pouvons voir notre fonction de personnage, qui est juste ici. Rappelez-vous aussi, nous avons créé une variable appelée Mickey. Cela sera également bloqué sur l'objet global. Si on fait défiler vers le bas, voici notre variable de Mickey. À l'intérieur de la console peut avoir accès à l'un d'entre eux par leur nom. Disons window.mickey. Appuyez sur « Enter », et il y a notre personnage avec le prénom de Mickey. Nous avons également accès à beaucoup plus de propriétés du navigateur, telles que window.innerWidth. Appuyez sur « Entrée ». Nous pouvons voir en pixels la largeur intérieure du navigateur. Revenons maintenant à notre constructeur. D' abord, nous pouvons supprimer ce console.log, puis nous pouvons ajouter le reste de nos noms de propriété. Deuxièmement, nous avons this.LastName, et cela est égal à la dernière. Cette couleur foncée est égale à la couleur. Ensuite, nous avons enfin this.image est égale à l'image. Voyons maintenant à quoi ressemble Mickey dans le navigateur, avec un console.log. C' est avec console.log avec la valeur de notre variable, qui est Mickey, refresh. Il y a nos objets de caractère, avec notre prénom de Mickey, nom de Mouse. Nous avons un tableau de couleurs avec des valeurs différentes libres, puis notre image à la toute fin, parce que Mickey a maintenant tous les noms et valeurs ajoutés à l'objet. Ces propriétés sont également accessibles individuellement. Par exemple, si nous voulions sélectionner la première couleur, nous pourrions dire mickey.color, puis accéder à la position d'index de 0. Rafraîchissez, et il y a notre première valeur dans le tableau de rouge. Maintenant, ces plans ou ce constructeur que nous avons ici, il met en place maintenant. Nous pouvons aller de l'avant et créer plusieurs objets à partir de ces modèles, comme nous l'avons fait avec Mickey. Juste en dessous de Mickey ici, nous pouvons créer une nouvelle variable, et cette fois nous pouvons l'appeler jonqueuse. Il s'agit également d'un nouvel objet de caractère. Ensuite, à l'intérieur, nous pouvons transmettre nos valeurs, le prénom de Daffy, le deuxième nom de Duck, puis notre gamme de couleurs. Maintenant, définissons les couleurs à l'intérieur ici pour être noir, puis orange. Une virgule juste après notre tableau. Ce sera pour notre image, qui est daffy-duck.png, un point-virgule aux extrémités. Ensuite, faisons un de plus, alors disons que la variable de bugs est égale à un nouveau personnage, à nos valeurs. Le premier est une chaîne de Bugs, le nom de famille de Bunny. Notre tableau avec nos couleurs de gris, et aussi blanc. Une virgule à nouveau, juste après le tableau, et l'image finale de bugs-bunny.png. Allons juste zoomer et vérifier tout ça. Tout ça a l'air bien. Maintenant, si nous console.log l'une de ces valeurs supplémentaires, donc console.log. Ensuite, nous pouvons faire quelque chose comme des bugs, qui est notre troisième objet juste ici. Ciblez le nom, qui devrait sortir à la console la valeur de Bunny, enregistrer et rafraîchir, et là nous allons. Il y a Bunny à l'intérieur de la console. Bien, tout cela semble fonctionner correctement, et c' est la fonction constructeur d'objet, qui est un moyen vraiment utile de créer plusieurs objets avec la même structure. 35. Const et let: Bienvenue dans cette toute nouvelle section. Nous renforcerons ce que vous avez déjà appris en apprenant de nouvelles choses telles que const and let, littéraux de gabarit, des intervalles de réglage et des expressions régulières. Nous allons maintenant mettre nos compétences en pratique en construisant un jeu téléphonique. J' ai déjà ajouté le HTML et CSS dans le fichier de démarrage, donc nous pouvons nous concentrer sur le fonctionnement de ce jeu en utilisant JavaScript. Dans ce jeu, tout ce que nous avons à faire est de cliquer sur le bouton « Match » lorsque deux formes aléatoires sont de la même taille et de la même couleur. C' est la version finie devant nous ici. Tout ce que nous avons à faire est de cliquer sur le bouton « Play », ce qui déclenchera un tableau d'objets qui sont sélectionnés au hasard. Dans ce jeu, tout ce que nous avons besoin de faire est de cliquer sur le bouton « Match » lorsque les deux formes aléatoires sont de la même taille et de la même couleur. Bien que cela semble simple, il y a beaucoup de choses dans les coulisses, et nous aurons beaucoup de pratique avec ce que vous avez déjà appris, ainsi que de nouvelles choses aussi. Nous allons cliquer sur le bouton « Match » lorsque deux sont identiques, nous obtenons ensuite un score. Si la forme est différente, nous obtenons alors un point retiré et le résultat peut devenir négatif. Passons à nos fichiers de démarrage JavaScript, et le code pour cela est au numéro 31, qui est le jeu de matcher de forme. Ici, j'ai l'index sur le fichier script.js déjà ouvert. Je vais copier la page d'index, copier le chemin d'accès du fichier, puis coller cela dans le navigateur pour le faire fonctionner. Nous avons déjà toute la mise en page et le style, donc tout ce que nous devons faire est de travailler dans le fichier script.js. Passons à cela maintenant, ouvrez le script.js. Faisons un peu plus d'espace à l'intérieur de l'éditeur de texte. À l'intérieur, je vais commencer par créer nos formes avec quelques variables pour les stocker. Mais cette fois, nous allons nous concentrer sur deux choses nouvelles. Nous n'allons pas utiliser une variable en utilisant le mot-clé var. En fait, nous ne les utiliserons probablement plus pour le reste de ce cours. Pas parce qu'il y a quelque chose de mal avec les variables. Ils sont toujours parfaitement valides à utiliser. Cependant, dans ES6, que nous avons déjà mentionné, est également connu sous le nom ES 2015, nous avons également deux nouveaux mots-clés que nous pourrions utiliser à la place de var pour démarrer toutes les variables. Le premier est laisser, ce qui nous permet de déclarer également une variable. Nous avons besoin de quelques variables pour ce jeu. Allons de l'avant et créer un score courant laisser. Nous pouvons définir ceci comme une valeur initiale de zéro. Tout comme var, la valeur stockée en utilisant let peut être mise à jour, également appelée réassignée. Il y a un autre avec let et var. Laisser les valeurs sont étendues de bloc. La portée des blocs s'applique à des éléments tels que des fonctions ou des instructions. Fondamentalement n'importe quoi entre un ensemble d'accolades. Si vous vous rappelez quand nous avons regardé la portée, nous avons appris que les variables déclarées à l'intérieur d'une fonction sont récupérées à cette fonction, ce qui signifie que nous ne pouvons pas y accéder ailleurs dans notre code. Aussi les variables déclarées en dehors d'une fonction sont appelées globales. Nous avons accès à eux n'importe où à l'intérieur de notre code. Laissez les valeurs d'un autre côté, sont étendues non seulement au bloc où elles ont été créées, mais aussi partout ailleurs qu'elles sont utilisées. Nous pouvons voir cela mieux avec un exemple simple en utilisant notre variable de score actuelle. Si nous ajoutons ceci à une instruction if, alors créons une instruction if que nous avons déjà appris, et alors nous pouvons dire si le score actuel est inférieur à cinq , ici nous pouvons dire un console.log, et log est la valeur du score actuel. Ensuite, une chaîne, et cela peut dire à l'intérieur. Une fois dans la console, on sait d'où vient son message. Ensuite, faisons un deuxième journal de console en dehors de cette instruction if. Nous allons faire de même, nous allons ajouter le score actuel à une chaîne. Mais cette fois, on dira dehors. Maintenant, si nous passons au navigateur, ouvrez la console, cliquez sur l'onglet « Console », actualisez, et maintenant nous pouvons voir zéro et zéro. Cela s'applique à l'intérieur et à l'extérieur. Ce comportement est attendu. Nous avons déclaré notre valeur let à zéro, puis connectez-le à l'intérieur et à l'extérieur du bloc if. Allons de l'avant et déclarons la même variable, mais cette fois à l'intérieur des instructions if. Faisons la même chose. Nous dirons que le score actuel soit égal à une valeur de 10. Maintenant, allons dans le navigateur et actualisons, maintenant nous allons voir l'effet de la portée des blocs. score actuel à l'intérieur du bloc est une valeur de 10. Mais le score actuel en dehors du bloc est intact. Si ce sont les deux variables, changeons let au var dans les deux cas. Nous verrions maintenant que les deux valeurs seraient 10. Parce que cette variable est déclarée en dehors de ces accolades, ce qui signifie qu'elle a une portée globale. Dans la plupart des cas, nous pouvons utiliser le nouveau mot-clé let, maintenant pour déclarer des variables et c'est ce que nous allons utiliser pour le reste de ce cours. Sélectionnez « Supprimer », tout cet exemple, puis changez ce var pour être laissé. Nous avons également besoin d'autres variables pour ce projet. Allons-y et ajoutez-les maintenant en utilisant notre mot clé let. Nous allons créer une variable appelée laisser jouer. Cela va être initialement défini sur false. Cela sera transformé en vrai lorsque l'utilisateur clique sur le bouton « Lire ». Ensuite, créons deux autres, une pour la forme 1 et une pour la forme 2, forme 1 et la forme 2 sont actuellement non assignées, car nous devons ajouter une valeur aléatoire à celles-ci plus tard lorsque l'utilisateur commence à jouer. Avec le mot-clé let ES6 a également introduit le mot-clé const, qui est court pour constante ou variables, nous déclarons en utilisant var et let peut être changé ou réaffecté. Cependant, si nous savons que notre valeur va toujours rester la même, nous pouvons déclarer une constante à la place. Cela aura également l'avantage de ne pas être accidentellement mis à jour ailleurs dans notre code. Si nous déclarons un const et essayons de mettre à jour une valeur, nous obtiendrons une erreur. Définissons un nombre pour être égal à 10. Alors disons nombre plus plus. Maintenant, nous augmentons la valeur de 10, même si elle est stockée dans une constante. Voyons ce qui se passe à l'intérieur de la console. Si nous essayons de consigner la valeur du nombre, rechargez et nous obtenons une erreur car nous essayons de mettre à jour la valeur d'une constante. Retirons ça pour l'instant. Une constante sera utile pour déclarer les formes que nous voulons utiliser dans ce projet. Nous voulons sélectionner les formes, mais nous n'avons pas besoin de les changer. Chaque forme va être un objet. Nous pouvons donc les ajouter en tant que tableau d'objets. Permet de configurer nos formes appelées constantes, et cela va être un tableau. A l'intérieur de ce tableau, nous pouvons créer notre objet. Nous devons aller de l'avant et créer un bon nombre d'entre eux, donc nous avons quelques formes aléatoires à sélectionner. Définissons la propriété de couleur et ceux-ci peuvent être toutes les couleurs de votre choix. Je veux aller pour la valeur pour la première de FF595E, puis la largeur de 250, et la hauteur. Allons pour 160, puis ajoutez une virgule. Continuons et copions ceci et collez-le en neuf fois de plus, nous donnant 10 objets différents. Nous allons garder les deux premiers comme la même couleur, mais changer la largeur et la hauteur pour être légèrement différentes, donc 150 pour celui-ci, ce troisième, cela va avoir une valeur de FFCA3A, largeur de 320, hauteur changeons cela pour être 170. Le quatrième peut avoir la même couleur, largeur de, allons-y 310, la hauteur de 180. Numéro 5, ça va avoir une couleur de 8AC926. La largeur de 190, hauteur de 160 est très bien. Copions cette couleur, et nous allons créer deux de chaque couleur. La largeur cette fois, allons-y pour 200 puis 175. Encore une fois, tout est aléatoire, alors ne vous inquiétez pas si le vôtre est légèrement différent. Le suivant ici la couleur peut être 1982C4, la largeur de 380, hauteur laisse aller pour 185. Copiez cette couleur, donc ces deux sont les mêmes, puis une hauteur de 400. La largeur pour 400 et une hauteur de 120. Ensuite, la dernière paire, allons-y 6A4C93, 370 et la hauteur de 145, copiez cette couleur et faites la dernière la même chose donc c'est un jumelé à nouveau. Une largeur pour 440 et la hauteur de 160 est bien. Lorsque l'utilisateur clique sur « Play », nous allons regarder à travers ces objets, sélectionnant un aléatoire. Si l'ordinateur sélectionne le même aléatoire pour la forme 1 et la forme 2, ceux-ci seront alors considérés comme une correspondance. Enfin, nous pouvons faire un journal de console rapide de ces objets en les sélectionnant avec le numéro d'index du tableau. Juste en dessous de notre tableau, faites un journal de console et la valeur des formes. Allons-y pour le numéro 2. Vérifiez cela sur la console, et il y a un de nos objets avec la couleur, la largeur et la hauteur. Dans cette vidéo, nous nous sommes concentrés sur l'utilisation des mots clés const et let. Si vous n'êtes pas sûr quand utiliser const and let, vous devez toujours utiliser const si possible, puis utiliser let si vous avez besoin de réaffecter une valeur. Si vous faites une erreur et utilisez const quand il devrait être laissé, c'est complètement bien. La console vous avertira de le modifier. Avec nos formes maintenant prêtes, dans la prochaine vidéo, nous allons voir comment sélectionner au hasard dans ce tableau d'objets. 36. Générer une forme aléatoire: Dans la dernière vidéo, nous avons ajouté un tableau d'objets de forme. Maintenant, nous avons besoin d'un moyen de sélectionner au hasard l'une de ces formes dans notre tableau. Je vais ajouter ceci à une fonction appelée select random shape. Revenons à notre script, nous pouvons maintenant supprimer le journal de la console de la dernière vidéo, puis définir une constante de baie pour notre fonction appelée SelectrandomShape. Ce sera une fonction de tableau ES6. Configurez ça comme ça. Eh bien, maintenant nous pouvons sélectionner l'un de ces éléments de tableau juste au-dessus par le numéro d'index. Donnons un coup d'envoi à ça. Définissons une constante appelée RandomShape et définissons cette valeur égale à notre tableau de formes et sélectionnons l'un des numéros d'index. Effectuez un journal de console. Vérifiez si cela fonctionne correctement avec la valeur d'une forme aléatoire. En fait, nous appellerons ceci RandomSelection, juste pour être un peu plus clair. Console consignez ceci. Ensuite, pour que cela fonctionne, nous devons l'appeler par son nom. Donc, sélectionnez TrandomShape, les parenthèses. Maintenant, cela devrait fonctionner à l'intérieur de la console. Ouvrez-le, rechargez. Nous avons une erreur d'orthographe, donc ça devrait être des formes. Rafraîchir. Maintenant, nous sélectionnons un de nos objets. Plutôt que de coder en dur dans un nombre, nous voulons qu'ils soient sélectionnés au hasard. Pour ce faire, nous pouvons générer un nombre aléatoire, comme nous l'avons vu précédemment. Si nous passons à notre code, ce tableau a 10 objets. Les tableaux commencent également à zéro, donc nous devons générer un nombre aléatoire entre zéro et neuf. Commençons cela à côté de notre fonction. Stockons ceci dans une constante. Je vais appeler ça RandomNum. Nous savons déjà comment le faire avec Math.Random. Rappelez-vous, cela va créer un nombre aléatoire entre zéro et un. Zéro a été inclus mais un ne l'est pas en fait, alors ne passera qu'à 0,999. Vous verrez des locaux après ça. Pour créer ce nombre aléatoire entre zéro et neuf, première chose que nous devons faire est de multiplier ce nombre aléatoire par la longueur de notre tableau de formes. Donc formes.longueur. Ensuite, nous pouvons arrondir ce nombre avec Math.Floor. Juste à un début utiliser Math.Floor, puis ouvrir les parenthèses, puis nous pouvons fermer cela à droite à la toute fin des formes.longueur, point-virgule à la fin. Il suffit de sauter ceci, faisons un deuxième journal de console et ensuite nous pouvons sortir la valeur de notre nombre aléatoire. Il suffit de vérifier que cela fonctionne bien, comme dans le même temps. Rafraîchir. Ça dit 0, 7, 6, 2, et donc 8, il y a 9. Tout cela semble fonctionner dans ok, nous n'obtenons rien de plus élevé que neuf et aurons aussi zéro. Cela semble fonctionner complètement bien. Maintenant, nous l'avons, ce nombre aléatoire entre zéro et neuf. Nous pouvons remplacer le numéro codé en dur d'avant pour notre tableau. Plutôt que de sélectionner le numéro 1, sélectionnons notre nombre aléatoire. Retirez le journal de la console des deux, nous n'avons plus besoin de cela. Donnez cela un « Enregistrer », puis sur la console. Maintenant, si nous continuons à rafraîchir, nous devrions voir un objet différent de notre tableau à chaque fois. Super, donc juste pour terminer cette vidéo, je vais changer ce journal de console. Nous n'avons pas besoin de nous connecter à la console, et à la place, il suffit de renvoyer cette RandomSelection. Cela retournera la valeur afin que nous puissions l'utiliser plus tard. Bien. C'est une partie importante de ce projet, en prenant soin de. Ensuite, nous allons utiliser ces objets aléatoires et l'assigner à nos variables de forme 1 et de forme 2, et aussi répéter ce processus toutes les secondes pour continuer à montrer différentes formes à comparer. 37. Répétition avec setInterval: Dans la dernière vidéo, nous avons créé une fonction qui a sélectionné au hasard une des formes à l'intérieur de notre tableau, qui est juste ici. Dans cette vidéo, nous avons deux objectifs principaux. Nous voulons assigner ces formes aléatoires à nos variables de forme 1 et de forme 2. En outre, nous devons changer les valeurs de forme toutes les secondes pour les mettre à jour à l'écran. Nous savons que cette fonction de forme aléatoire sélective le bas entraîne une forme aléatoire. Donc, nous pouvons aller de l'avant et attribuer ceci à nos variables. Tout d'abord, disons que la forme 1 est égale à sélectionner une forme aléatoire. La même chose pour la forme 2, cela peut également être sélectionné forme aléatoire 2. Maintenant, nous devons exécuter cette fonction de forme aléatoire de sélection toutes les secondes et mettre à jour ces variables ici. Pour ce faire, nous pouvons utiliser une méthode JavaScript appelée setInterval. Cela exécutera cette fonction ou répétera le même code avec un délai entre chaque répétition. Alors nous allons envelopper ces deux ici à l'intérieur de notre méthode d'intervalle de jeu. Alors d'abord découpons ces deux lignes ici. Ensuite, à l'intérieur d'un intervalle défini, nous créons les parenthèses. Ensuite, à l'intérieur, nous pouvons exécuter une fonction ES6 flèche. Alors créons ceci à l'intérieur ici, les accolades, et ensuite nous pouvons coller dans nos deux réaffectations. Un point-virgule à la fin ici, puis nous pouvons ajouter le délai en dehors de ces accolades en millisecondes. Donc 1000, c'est égal à une seconde. Donc maintenant, cette fonction fonctionnera toutes les secondes, nous donnant différentes valeurs pour la forme 1 et la forme 2 chaque fois que cet intervalle sera exécuté. Tout d'abord, vérifions que cela fonctionne en enregistrant les valeurs de la forme 1 et de la forme 2. Donc, le journal de la console, la forme 1, puis un deuxième journal de la console, cette fois pour la forme 2 sur le navigateur. Recharger. Bien. Donc, nous continuons voir deux nouveaux objets apparaissant dans la console et ils semblent avoir des valeurs différentes. Donc, cela fonctionne très bien, mais nous ne voulons pas que ce code s'exécute jusqu'à ce que le joueur frappe qu'il soit jouable en haut. Donc, d'abord, nous pouvons entourer cette minuterie à l'intérieur d'une fonction. Donc juste en dessous de l'intervalle défini, créons notre constante, qui va être une fonction de flèche, et appelons cette forme aléatoire répétée. Encore une fois, ce sera une fonction de flèche. Donc on va mettre ça en place comme ça. Donc, à l'intérieur du corps de cette fonction, nous allons ajouter notre intervalle de jeu. allons donc découper la section que nous avons créée auparavant, puis coller ceci à l'intérieur de notre fonction. Donc maintenant, cet intervalle défini ne fonctionnera que chaque fois qu'un appel répétition forme aléatoire, et nous voulons le faire quand un joueur clique sur le bouton Lecture. Nous allons donc ajouter un gestionnaire sur clic à notre bouton de lecture. Si nous passons à notre page d'index, puis faites défiler vers le bas jusqu'à la section principale, voici notre bouton de lecture ici, qui a un identifiant de jeu. Donc, nous pouvons sélectionner ceci avec get element by id add un gestionnaire de clic pour exécuter notre fonction de forme aléatoire de répétition. En dessous de cela, nous allons ajouter un commentaire de début de jeu. Sélectionnez d'abord notre bouton avec get elements par id. L'id a été play.onclick. Cela va exécuter une fonction de flèche ES6. Ensuite, à l'intérieur, nous pouvons appeler la forme aléatoire répétée, avec les parenthèses après. Donc, cela va aller de l'avant et s'exécuter, enregistrer ceci, puis sur la console, recharger. On ne voit rien en cours d'exécution. Maintenant, si nous cliquons sur le bouton de lecture, nous voyons maintenant nos objets sont maintenant générer. bonnes choses évoluent maintenant bien pour notre jeu. Cependant, nous voulons déplacer les formes vers la console et les afficher à l'écran, et c'est ce que nous allons faire dans la prochaine vidéo. 38. Littérature de modèle: Bienvenue de retour. Il y a maintenant quelques fonctionnalités de base dans notre jeu. Nous générons deux formes aléatoires lorsque nous cliquons sur ce bouton Play en haut. Pour le moment, ces formes sont juste à l'intérieur de la console. Mais dans cette vidéo, nous allons réellement afficher ces formes à l'écran pour que le lecteur puisse les comparer. Nous allons faire cette pile aussi en apprenant comment utiliser les littéraux de modèle. Cela nous permettra essentiellement de créer une chaîne de texte dont les variables sont passées à l'intérieur. Nous avons déjà examiné quelques façons d'inclure des variables avec des chaînes. Passons à nos scripts. Nous avons déjà examiné des méthodes comme celle-ci. Si vous avez créé une variable telle que name et que vous définissez cette valeur comme étant la valeur de Chris, effectuez un journal de console. À l'intérieur, nous avons ajouté des chaînes aux variables, disons « Bonjour », un espace, puis ajoutons notre nom. Sur la console et maintenant nous allons nous attendre à la valeur de Hello Chris. En utilisant des littéraux de modèle plutôt que de joindre ces chaînes et variables avec le symbole plus, nous pouvons construire une seule chaîne en utilisant des backticks. Supprimons tout cela d'ici, et puis si vous cherchez le backtick sur votre clavier, qui est ce symbole juste ici, alors nous pouvons taper la valeur de Hello à l'intérieur. Ensuite, au lieu de se joindre à notre nom de variable, nous pouvons ajouter cette variable à l'intérieur des backticks. Peut passer dans notre expression de variable d'abord en utilisant un symbole $, puis à l'intérieur des accolades, nous pouvons ajouter notre nom de variable, qui ressemble juste à ceci. Si nous sauvegardons cela et passons à la console, nous voyons que la même valeur fonctionne maintenant dans le navigateur. Une autre chose que nous pouvons faire avec les littéraux de modèle est d'avoir du texte multi-lignes. Si nous voulions une chaîne assez longue juste comme ça, puis continuez cela vers le bas sur la deuxième ligne. Nous voyons instantanément avec ces deux couleurs différentes que notre éditeur de texte met en évidence une erreur. Pour ce faire de la manière traditionnelle, nous devrions envelopper chaque ligne à l'intérieur des guillemets, ajouter un saut de ligne, puis le joindre avec le symbole plus. Cependant, lorsque vous utilisez ces littéraux de modèle plus récents, nous pouvons simplement remplacer les guillemets par des backticks, comme cette citation d'ici, ajouter une backtick, également au début. Maintenant, c'est la même couleur, donc il semble maintenant fonctionner, nous n'avons plus l'erreur. Sur la console et il y a notre chaîne multi-ligne qui préserve les sauts de ligne. Maintenant, nous pouvons supprimer cet exemple d'avant. Super maintenant, nous savons comment utiliser ces littéraux de modèle. Nous pouvons les mettre en pratique dans le cadre de nos projets. Jusqu' à notre fonction, qui est la forme aléatoire répétée, d'abord, nous pouvons supprimer ces deux journaux de console parce que nous voulons les afficher à l'écran. Ensuite, nous pouvons créer une chaîne pour contenir nos styles. Les styles que nous voulons contenir sont ces sections des objets. Nous voulons la couleur, nous voulons la largeur, et aussi les hauteurs, et nous allons les définir comme propriétés de style de nos formes. Revenons à notre fonction, allons-y et faisons-le maintenant. À l'intérieur de notre intervalle de jeu, il suffit de souffler notre forme 2 ici. Je vais aller de l'avant et créer une nouvelle constante. Commençons par la forme. Appelons ceci Shape1Styles. Nous allons créer un littéral de modèle, qui va fondamentalement être une chaîne avec tous nos styles contient. Nous pouvons ensuite ajouter les styles à nos formes div, puis cela s'affichera à l'écran. Jetons un coup d'oeil à ça avec les arrières. Tout d'abord, nous allons définir la largeur de notre div à l'intérieur de ces backticks, nous pouvons ajouter le symbole $, puis les accolades pour ajouter notre variable. La variable une fois définie sur cette largeur, est la valeur d'une largeur de chaque objet. Retour vers le bas, définissons ceci soit shape1, qui est stocké dans cette variable ici. Shape1.width, puis nous devons ajouter la valeur de pixel à la fin. Ajouter plus px, point-virgule après cela, alors nous voulons ajouter ceci sur la ligne suivante afin qu'il soit plus clair. L' arrière-plan cette fois. Ajoutons ceci à notre symbole $, ouvrez les accolades, et l'arrière-plan pourrait être shape1.color, point-virgule à la fin. Puis enfin les hauteurs. Cela va être égal à notre variable à l'intérieur ici, et c'est shape1.height, et encore une fois nous devons également ajouter à la fin notre valeur de pixel. Plus px, point-virgule à la fin, et assurez-vous que ces backticks sont juste à la toute fin et juste au début et pas après chaque ligne. Maintenant, nous allons avoir ces styles, nous pouvons les appliquer à nos formes div. Si nous passons à notre page d'index, nous avons un div vide avec shape1 et aussi la shape2. Nous allons ajouter ces propriétés de style à cette div ici. abord, sélectionnons shape1 en utilisant document.getElementById, sélectionnez simplement ceci. Juste après ici, revenons au début et faisons un document.getElementById. Nous voulons saisir la forme 1. Alors ce que nous allons faire est quelque chose que nous avons examiné plus tôt. Nous allons définir l'attribut de style pour cette div. Nous allons définir le CSsText pour être égal à la chaîne qui est créée, qui est stockée dans cette constante appelée Shape1Styles. Ajoutons ceci comme notre CSStext. Styles Shape1avec le point-virgule à la fin. Ce CSSTEXT que nous venons d'utiliser ici, n' est pas quelque chose que nous avons encore vu au cours de ce cours. Cela nous permettra de passer une chaîne de styles, tout comme nous avons créé ici, stockée dans une variable appelée Shape1Styles. Maintenant, vérifions que cela fonctionne dans le navigateur. Si nous sauvegardons cela et puis rechargeons, nous pouvons fermer la console et cliquer sur jouer. Super, c'est notre div Shape1 sur le côté gauche ici. Maintenant, nous pouvons voir toutes les propriétés de style, telles que la couleur, la hauteur et la largeur, et maintenant appliquer en tant que attributs de style, que nous avons ajoutés ici. Maintenant, ce que nous devons faire est de répéter ceci pour notre forme2. Copions notre shape1 ici, et puis nous pourrions coller ceci juste en dessous, puis passons cela pour garder tout aligné bien. Maintenant, ce que nous devons faire est juste de changer shape1 pour être shape2. La même chose pour tous ceux-ci à l'intérieur d'ici, nous pouvons changer cela pour être shape2 sauf pour la couleur et aussi pour la hauteur aussi, et puis comme avant nous pouvons copier cette ligne de code ici, nous pouvons également sélectionner le document.getElementById. Cette fois, nous voulons sélectionner la div shape2, qui est terminée dans la page d'index, qui est cette div ici. Exactement la même chose que nous faisons style.CSSTEXT, et cela va être égal à Shape2Styles. Ajoutez un point-virgule à la fin, puis fermez le navigateur, rechargez et espérons que nous devrions obtenir deux formes aléatoires lorsque nous cliquons sur « Play ». Super, maintenant ces deux formes sont à l'écran, nous avons maintenant besoin d'un moyen de les comparer. Et c'est ce que nous allons regarder dans la prochaine vidéo. 39. Comparer des objets et marquer des points: Maintenant, nous avons deux formes aléatoires apparaissant sur l'écran. Nous avons besoin d'un moyen de comparer ces deux objets en forme. Lorsque le joueur clique sur le bouton, Match, qui est juste ici. Pour commencer, nous avons une variable en haut, qui est appelée lecture, que nous avons définie tôt dans cette section, qui est également définie sur false. À l'intérieur de la fonction de jeu All-Star, nous pouvons changer cette variable pour être vraie une fois que le jeu a commencé. Faites défiler vers le bas jusqu'à notre section d'objectif de stock, qui est juste ici. Ensuite, une fois que l'utilisateur a cliqué sur le bouton, Jouer, nous pouvons alors aller de l'avant et définir le jeu pour être égal à vrai. En dehors de cette fonction, je vais créer un nouveau commentaire, qui est la comparaison. Maintenant, nous pouvons ajouter un gestionnaire d'événements au bouton de correspondance, pour déclencher une fonction lorsqu'il est cliqué. Regardons votre page d'index et cherchons notre bouton de match, qui est juste ici. Cela a un ID de correspondance, donc nous pouvons saisir ceci à l'intérieur de nos scripts, donc document.getElementById, l'ID de match. Ensuite, nous pouvons utiliser un gestionnaire d'événements onclick, déclencher une fonction de flèche ES6. Ensuite, à l'intérieur de cette fonction, nous pouvons ajouter une instruction if pour vérifier si la lecture d'un ensemble à true. Disons, si la variable de jouer, donc nous pouvons simplement dire si jouer, et quand cela est vrai, cela va alors exécuter le code dans l'instruction if. Cela signifie essentiellement que le code à l'intérieur de cette instruction if ne s'exécutera que si le joueur est cliqué, Démarrer. Certainement jouer n'importe quelle variable pour être vrai. Imbriqué à l'intérieur, nous pouvons effectuer une autre instruction if. Ceci sera utilisé pour augmenter le score du joueur, si les objets sont identiques. Laisse imbriquer une seconde instruction if, juste comme ça. Mais comment comparer d'abord les objets pour vérifier s'ils sont identiques ? Pour cela, nous avons quelque chose appelé objects.is. Cela nous permettra de passer et de sortir, façonner des variables à comparer. Objects.Est une autre nouvelle fonctionnalité JavaScript de ES6 ou ES 2015, tout comme les fonctions de flèche et les lets constants, que nous avons regardé avant. À l'intérieur des crochets ici, vous pouvez dire des objets , donc object.is, puis ouvrir les parenthèses juste après. A l'intérieur, nous pouvons passer dans nos valeurs que nous voulons comparer, que vous avez stockées dans les variables de forme 1 et également en forme 2. Si ces deux objets à l'intérieur ici, sont match, alors nous pouvons augmenter le score du joueur. Nous avons le score du joueur en haut, pourrait être réglé à zéro et stocké dans cette variable de score actuelle. Augmentons ça. Si l'objet est une correspondance, nous avons mis le score, plus, plus. Plus dans le index.html, nous avons également un élément span avec l'ID de score, qui est juste ici. Cela nous permettra de recadrer ces éléments, puis de l'augmenter avec le score d'un joueur. Nous pouvons voir cette valeur à l'écran. Revenons maintenant à nos déclarations if. Si ces deux objets, sont correspondent, nous allons augmenter le score d'un, puis sélectionnez le document.getElementById, puis saisir au conteneur span, qui avait l'ID de score. Définissez le code InnerHTML pour qu'il soit égal à une valeur du score actuel. Bien, il suffit de faire sauter ça. Après notre section if que vous venez d'ici, nous allons ajouter nos déclarations l. Ces instructions l s'exécuteront si les objets ne correspondent pas. Cela sera utilisé faire le contraire et puis prendre un point sur le score. Disons autre, le score actuel, et on diminuera ça d'un. Ensuite, faites aussi la même ligne ici, donc document.getElementById, l'ID que nous voulons attraper, est encore une fois le score. Ensuite, obtenez le code HTML interne pour être égal à la partition actuelle. Puis actualisez, et donnons cela un coup de pouce, cliquez sur le bouton Lecture. Maintenant, nous devons cliquer sur ce bouton Match, lorsque ces deux formes sont identiques. Allons les agiter pour qu'ils soient les mêmes. Cela va à la valeur de 1, 2, 3. Cela fonctionne aussi bien. Si nous cliquons dessus lorsque les formes ne correspondent pas, nous voyons perdra un point à chaque fois. Super, tout semble bien fonctionner. Mais avant de dire que cela est terminé, il y a quelques petits problèmes que nous devons aborder. abord, après le début du jeu, si nous continuons à cliquer sur le bouton de lecture, alors commençons le jeu. Ensuite, si nous cliquons plusieurs fois, cela appellera les mois de modèle de fonction de stockage, générant beaucoup de formes aléatoires. En outre, lorsque vous jouez au jeu, nous voulons restreindre l'utilisateur à appuyer uniquement sur ce bouton de match une fois par intervalle défini. Actuellement, si l'utilisateur clique dessus plusieurs fois, le score va continuer à reculer ou à avancer. Nous voulons limiter cela à un seul clic par sélection. Commençons par désactiver le bouton d'arrêt, lorsque le jeu est déjà en cours d'exécution. Nous pouvons le faire à côté de la fonction de jeu. à nos scripts, et allons à la section Star Game ici, qui est le gestionnaire de clics. D' abord, nous devons saisir notre bouton de lecture, qui a un identifiant de jeu, que nous pouvons voir ici. Puis revenons à notre fonction de jeu Star, juste en dessous de l'égalité de jeu vrai. Ajoutons une commande pour dire désactiver le bouton de lecture, lors de la lecture. Document.getElementsById, sélectionnez notre bouton Play, puis nous pouvons définir .disabled pour être égal à true. Testez ceci, puis cliquez sur Lire. Nous voyons dès que vous cliquez sur jouer qu'il devient gris, et nous pouvons, t cliquer sur ce bouton plus. Si nous actualisons, maintenant notre bouton de lecture est de retour à la normale, et nous pouvons redémarrer une nouvelle partie. Ensuite, nous pouvons maintenant passer à arrêter le joueur en cliquant sur ce bouton de match plusieurs fois. Tout d'abord, stockons ce bouton de correspondance à l'intérieur d'une variable. Nous l'avons mis en haut de notre code. Nous allons mettre en place un bouton de correspondance appelé constante, et notre document.getElementById familier. Le bouton que vous voulez sélectionner a l'ID de beaucoup, nous ajoutons un point-virgule à la fin. Je vais commencer cette référence à l'intérieur d'une constante parce que nous allons sélectionner ceci plusieurs fois. Nous allons d'abord désactiver le bouton une fois qu'il a été cliqué, puis réactiver le bouton une fois que le nouvel intervalle de jeu est généré. En bas, nous pouvons définir ce bouton pour être désactivé une fois qu'il a été cliqué. A l'intérieur de la section de comparaison, et nous allons le faire à côté de la section de jeu. Disons que matchbtn.disabled va être égal à vrai. Cela désactivera le bouton une fois qu'il a été cliqué. A l'intérieur de cette fonction onclick, ce bouton doit être réactivé pour chaque cycle. Nous pouvons donc le réactiver chaque fois qu'une nouvelle forme est générée. Jusqu' à la section de l'intervalle défini. Juste après ici, tout en haut, nous pouvons également sélectionner matchbtn.disabled, mais cette fois pour être faux. Testez cela, actualisez le navigateur, cliquez sur, Jouez. Maintenant, notre jeu commence, et si nous essayons de cliquer plusieurs fois sur le bouton de match, cela ne fonctionne que lorsqu'une nouvelle forme est générée, donc nous ne pouvons cliquer dessus qu'une seule fois par sélection. Super, c'est notre jeu. Maintenant terminé. N' hésitez pas à faire des personnalisations, à apporter des modifications ou à jouer avec la vitesse des formes en utilisant notre valeur d'intervalle définie juste ici, ou à expérimenter de nouvelles fonctionnalités que vous aimez. J' espère que vous avez aimé construire ce jeu et au revoir pour l'instant. 40. Introduction aux expressions régulières: Bienvenue les gars. Maintenant, nous allons regarder quelque chose qui est vraiment utile en JavaScript. Il s'agit d'expressions régulières. Les expressions régulières, souvent raccourcies pour rejeter, sont un moyen de trouver un motif ou une combinaison de caractères à l'intérieur d'une chaîne de texte. Par exemple, si nous avions un paragraphe de texte, nous pourrions dire que nous voulions rechercher des espaces doubles et les réduire à un seul espace. Tout ce que nous pouvions rechercher chaque mot dans une phrase, puis changer le premier caractère pour être une lettre majuscule. Rendez-vous à ces fichiers de démarrage. Ensuite, à l'intérieur de la barre latérale, passons au numéro 32, qui est l'introduction aux expressions régulières. A l'intérieur ici, nous avons un simple lorem ipsum texte de démarrage, que vous venez de stocker à l'intérieur des éléments P. Ouvrez cet exemple dans le navigateur. D' abord, nous pouvons saisir ces éléments de texte juste ici et le stocker à l'intérieur d'une variable pour commencer à travailler. Jusqu' à nos scripts, commençons par le texte let est égal au document point Query Sector. Nous voulons saisir nos éléments P, qui stocke notre texte. A cela est vu comme une chaîne, et puis nous voulons saisir le HTML interne. Nous pouvons commencer par les bases et tels que texte pour trouver l'emplacement d'un mot particulier comme une chaîne. Juste en dessous de cela, c'est un assez simple pour rechercher du texte. Tout ce que nous devons faire est de dire recherche de points de texte, puis à l'intérieur du crochet, nous pouvons ajouter une chaîne que vous voulez rechercher. Cherchons l'un de ces mots à l'intérieur d'une chaîne. Allons pour, « amet » ajouter ceci dans les guillemets, A-M-E-T. Maintenant, je vais mettre ça sur la console. D' abord, stockons ces résultats à l'intérieur de la variable. Laissez le nouveau texte égal à notre recherche et ensuite nous pourrions faire un journal de console pour la valeur du nouveau texte. Donnez cela une sauvegarde et ensuite à notre exemple, ouvrez la console et nous obtenons la valeur de 23. C' est parce que le mot que nous avons recherché dans notre chaîne de texte commence à la position 23, ce qui signifie fondamentalement que c'est 23 positions depuis le début. Commentons cet exemple et jetons un coup d'oeil à un nouveau. Nous allons supprimer ce journal de la console découpera cela et en fait il suffit de le coller sur le fond. Nous pouvons l'utiliser avec tous les exemples ci-dessus. Maintenant, nous avons cherché à trouver une chaîne à l'intérieur de notre texte. Une fois que nous avons trouvé une correspondance, nous voulons souvent la remplacer par autre chose. Pour cela, nous avons la méthode de remplacement. Vers le bas sur le texte de remplacement, nous allons chaîne. Nous allons créer le même exemple d'avant afin que le nouveau texte mais cette fois plutôt que de le faire, recherche de point de texte, nous pouvons faire le remplacement de point de texte. Remplacer prend deux valeurs différentes, la première que nous allons ajouter une chaîne à rechercher. Je vais chercher lorem qui est le premier mot à l'intérieur ici et ensuite comme une deuxième valeur séparée par une virgule, nous pouvons ajouter un mot que vous voulez le remplacer par. Allons chercher n'importe quel mot de votre choix. Quel est notre numéro de jetons ? Nous avons également notre journal de la console du nouveau texte vers le bas. Si nous rechargeons le navigateur et jetez un oeil, nous voyons maintenant notre premier mot de lorem a été remplacé par des puces. Cela fonctionne très bien, mais c'est parce que nous avons ajouté le mot lorem. Juste ici, nous avons un L. majuscule qui correspond à notre corde. Si nous pouvions changer cela en minuscules, ça ne marcherait pas. Modifiez-le en minuscules L, actualisez. Je dirai que le mot lorem n'a pas été remplacé cette fois. C' est parce que ce remplacement est sensible à la casse, à la place si nous voulons effectuer une recherche, qui est insensible à la casse, nous pouvons ajouter notre modèle pour rechercher à l'intérieur des barres obliques. Revenons à notre code. Copions cette ligne d'avant. Nous pouvons laisser cet exemple en commentant cela. Nous pouvons coller cela en dessous de ce texte de remplacement par une expression régulière. Plutôt que d'avoir une chaîne de texte comme celle-ci, nous allons créer une expression régulière à l'intérieur de deux barres obliques. Cherchons notre mot de lorem puis nous pouvons ajouter au modificateur I juste après. Si nous sauvegardons cela et puis actualisons, nous voyons maintenant le mot lorem est maintenant remplacé par des puces, même si le L est en minuscules. Le mot lorem n'apparaît qu'une seule fois à l'intérieur de cette chaîne de texte, mais si vous voulez rechercher quelque chose qui apparaît plusieurs fois, tel qu'un simple caractère E. Allons de l'avant et jetons un coup d'oeil à ceci, si nous copions cet exemple, puis commençons coller dans et en dessous de la section Je modifie. Nous pouvons voir ici que le modificateur I, nous allons faire une recherche qui est sensible à la casse, mais vous ne remplacerez que la première correspondance à l'intérieur de notre chaîne. Nous changeons lorem en E, il y a plusieurs occurrences, puis remplace par une majuscule A. Rechargez le navigateur. Maintenant, nous voyons que seule la première occurrence d'un E est remplacée. n'y a plus de majuscules A à l'intérieur de notre chaîne. Cependant, si nous voulons remplacer toutes les occurrences, nous pouvons utiliser le modificateur G cette fois. Copions cette ligne de code ici, commentons ceci, puis collez ceci sous le modificateur G. Tout ce que nous avons à faire est de changer le I pour être un G, recharger le navigateur. Maintenant, nous voyons que toutes les occurrences de E ont été remplacées par une majuscule A. G signifie Global et trouvera remplacer toutes les correspondances dans notre chaîne de texte plutôt que de s'arrêter après la première. Comme quand on utilise le modificateur I. Il ne recherchera qu'une seule lettre, mais si nous voulons faire correspondre plusieurs lettres, nous pouvons les ajouter entre crochets. Jetons un coup d'oeil à ça. Si nous copions cette ligne ici et commentons cela. Laissons cela dans les fichiers de démarrage pour référence future, collez-le sous la section de crochets et puis à l'intérieur de toutes les barres obliques avant, nous pouvons ajouter quelques crochets. A l'intérieur de ces crochets, si nous recherchons H, G ou S. Faisons ces minuscules avec le modificateur G et ajoutons quelque chose qui se démarque. Ajoutons quelques étoiles et en majuscules dira « REMPLACÉ ». Lorsque nous recherchons à travers la chaîne, la première occurrence de H, G ou S sera alors remplacée par la chaîne ici. Enregistrez ceci, puis rechargez et faites défiler vers le haut, nous pouvons voir que la première occurrence a été remplacée par notre chaîne ici. Cela s'arrête également après le premier match. Si nous voulons remplacer toutes les occurrences de H, G ou S. Nous pourrions à nouveau ajouter le modificateur G. Copions cette ligne ici, commentons ceci, puis ajoutons ceci dans la section G modifier. Après notre expression régulière ajoutons le modificateur G, sauvegardez ceci et nous pouvons voir que toutes les correspondances ont maintenant été remplacées. Ces crochets fonctionnent également pour les nombres aussi. Copions ceci, commentons ceci et ajoutons ceci juste au-dessus de notre journal de console à l'intérieur des crochets, au lieu de chercher nos lettres, passons aux chiffres trois à six. Cela va trouver tous les nombres de trois à six, supprimer le G, puis le remplacer par cette chaîne de texte ici. Pour que cela fonctionne, nous devons ajouter un numéro dans notre texte ci-dessus. Allons-y pour le numéro cinq ajouter ceci, recharger. Essayons de le chercher, on y va. Il y a nos textes de remplacé dans une position de notre numéro cinq. Il s'agit d'un premier regard sur l'utilisation d'expressions régulières pour correspondre à un modèle. Si nous Google Mozilla expressions régulières. Vous êtes sur, trouvez beaucoup plus d'exemples sur cette section d'expression régulière. Nous cliquons dessus, puis allons à la documentation de Mozilla. Nous pouvons voir qu'il y a beaucoup de façons différentes de créer des jeux de mots. Si nous faisons défiler vers le bas, certaines de ces expressions régulières sont un outil assez complexe. Je ne vais pas passer par tous ces cas puisque la plupart des cas d'utilisation spécifiques ont été demandés. Vous pouvez trouver presque n'importe quel moyen il correspond à un modèle en utilisant des expressions régulières. Dans la vidéo suivante, nous allons construire un petit projet en utilisant expressions régulières pour prendre les entrées de l'utilisateur et effectuer une recherche et un remplacement. 41. RegEx trouver et remplacer le projet: Bienvenue les gars. Dans cette vidéo, nous allons utiliser des expressions régulières, pour construire une application simple de recherche et de remplacement. À l'intérieur des fichiers de démarrage, nous avons un formulaire de base où l'utilisateur peut taper un mot à l'intérieur de la section de recherche. Ce sera et puis trouver un mot à l'intérieur son texte original et ensuite nous pouvons choisir un mot pour le remplacer par. Une fois que ce bouton Remplacer est sélectionné, ce bouton Remplacer déclenchera une fonction qui fera tout cela arriver. Commençons par ajouter un écouteur d'événement à ce bouton. Plus dans les fichiers de démarrage, c'est le numéro 33 qui est rejette, trouver, remplacer. Ici, nous avons notre formulaire avec les entrées de recherche, les entrées de remplacement, puis notre bouton, qui a l'ID de ReplaceBTN. Revenons à notre script qui est en bas. Comme ça avec document.getElementById. L' ID comme nous venons de voir est RemplaceBTN. Ajoutez ensuite un écouteur d'événement. A l'intérieur des parenthèses, nous savons que nous devons ajouter deux valeurs. Le premier est le nom de l'événement. Nous allons être à l'écoute des événements click. Ensuite, nous allons déclencher une fonction de flèche comme ça. A l'intérieur ici ces quatre choses que nous devons saisir et stocker à l'intérieur des variables. Nous devons saisir les entrées de formulaire pour la section de recherche. Nous devons saisir l'entrée pour la section de remplacement et ensuite nous devons saisir notre texte original, qui est notre premier ensemble d'éléments p. Ensuite, nous devons saisir nos deuxièmes éléments p, qui va contenir notre texte avec les mots remplacés. Ajoutons ces quatre variables à l'intérieur de notre écouteur d'événement. Commençons par saisir notre texte original, puis notre texte modifié à l'intérieur des éléments p. Que les textes originaux soient égaux à documents.querySelectorAll. Le texte original est la première occurrence des éléments p. Ajoutez la balise p à l'intérieur à la position zéro de l'index. Ensuite, copiez cette ligne et collez-la juste en dessous. Celui-ci va être le texte modifié. La seule différence est l'élément p est cette fois à l'index numéro un. Maintenant, nous avons également besoin de stocker les entrées utilisateur qui a un ID ou trouver et également remplacer. Permet d'installer ces deux à l'intérieur d'une variable aussi bien. Que notre FindText soit égal à documents.getElementById, le premier a été trouvé. Nous voulons saisir la valeur de l'utilisateur. Nous avons de la valeur, copiez cette ligne et collez-la à nouveau juste en dessous. Ce sera le texte de remplacement. Remplaçons le texte. L' ID cette fois est remplacé. Ok, bien alors assurez-vous que le vôtre ressemble à cet exemple ici. Maintenant, nous avons toutes les informations dont nous avons besoin stockées dans des variables. Ensuite, nous devons saisir le HTML interne de notre texte original. C' est texturant juste ici, donc tout au bas de notre fonction, disons originalText.innerHTML décrit tout le contenu du texte de notre texte original. Ensuite, nous allons utiliser la méthode de remplacement des points, que nous avons examinée dans la dernière vidéo. Cela tient compte de nos deux valeurs. Le premier est le mot que nous voulons trouver. Ceci est stocké dans une variable appelée FindText puis séparé par une virgule, le mot que nous voulons remplacer. Ceci est stocké à l'intérieur de cette variable de texte de remplacement. Remplacer le texte comme deuxième valeur, le point-virgule à la fin, alors nous pouvons installer cela à l'intérieur d'une variable appelée NewText. Enfin, nous voulons sortir ce NewText dans nos éléments p vides qui est juste ici. Nous avons déjà une liste de référence appelée texte modifié. Ajoutons cela en bas, donc modifiedText.innerHTML va être égal à ce newText juste ici. Ok, bien. Je pense que nous sommes prêts à aller au navigateur et à faire un test. Cherchons un de nos mots. Disons que s'assoit, trouve le mot de s'assoit. Ensuite, remplacez-le par un support. Appuyez sur Remplacer et rien ne semble se passer. Si nous regardons un peu de près et nous ajoutons cela une fois de plus. Si nous cliquons sur ce bouton de remplacement et regardez de très près vers le bas. Nous pouvons voir brièvement le nouveau texte va rincer et ensuite disparaître. C' est parce que, cette partie à l'intérieur des éléments de formulaire. Lorsque nous cliquons sur ce bouton, le comportement par défaut est de soumettre le formulaire. Cela provoque le rechargement de la page. C' est également pourquoi les entrées sont maintenant claires en haut parce que la page a fait une actualisation. Pour résoudre ce problème, nous pouvons empêcher le comportement par défaut de cet événement. abord, nous pouvons ajouter le e, qui est les détails de nos événements, à l'intérieur de la parenthèse de la fonction, alors nous pouvons empêcher le comportement par défaut à l'intérieur du corps de la fonction avec e.preventDefault. Cela empêchera notre formulaire de soumettre et, par conséquent, nous ne verrons pas de rafraîchissement de la page. Essayons encore ça. Nous remplacons assis avec support, cliquez sur « Remplacer » et là, nous allons sous notre nouvelle section technologie. Nous voyons que le mot sit a été remplacé par stand et nous ne voyons plus de rechargement de page. Il y a aussi une autre façon de résoudre cela aussi. Au lieu d'avoir e.preventDefault, nous pouvons supprimer cela. Nous pouvons supprimer notre variable e d'ici et à la place, si nous allons au bouton, à l' intérieur de notre formulaire, nous pouvons également ajouter le type de bouton. Maintenant, c'est un type de bouton plutôt que de soumettre. Cela arrêtera l'action d'envoi par défaut. Maintenant, donnons ça un coup de pouce et cette fois nous allons remplacer Ipsum par l'un des mots. Appuyez sur « Remplacer ». Maintenant, nous avons aussi notre nouveau texte a maintenant ce mot remplacé. La dernière chose à regarder est de savoir comment rendre cette recherche insensible à la casse. Si nous recherchons le mot lorom en utilisant ces petits l et le remplacer par quoi que ce soit. Appuyez sur « Remplacé ». Nous voyons que cela ne fonctionne pas ci-dessous. Vous pouvez penser que nous pourrions simplement ajouter un modificateur comme celui-ci, donc jusqu'à notre nouveau texte à l'intérieur du Find and Remplacer ajoutons nos deux barres obliques avant et ensuite les modificateurs I comme ceci. Cependant, si nous devions dire cela, rafraîchir et donner à ceux-ci un aller, tapez lorem. Nos mots de remplacement, nous voyons que cela ne fonctionne toujours pas. Pour que cela fonctionne, nous devons utiliser une fonction constructeur, alors revenez à nos scripts. Juste un peu nouveau texte que nous allons dire, « Nouvelle expression régulière » comme ça. Ensuite, à l'intérieur de ces crochets, nous allons passer dans ce texte de recherche. Notre design comme notre première valeur. Séparé par une virgule, nous pouvons ajouter le modificateur I. Cette fonction constructeur compilera les résultats, y compris ce modificateur, puis nous pourrions installer cela à l'intérieur d'une variable. Disons trouver, avec modificateur et définissez ceci à notre fonction constructeur. Ensuite, nous pouvons utiliser ce nom de variable et passe par notre remplacement. Plutôt que ce que nous avons ici, passons simplement un nom de variable. Vous devez enregistrer et puis essayons ceci, donc lorem, avec l. minuscule Hit Remplacer et maintenant vous voyez cela fonctionne. Grande, donc cette fonction constructeur compile notre runtime qui est idéal pour les modèles qui peuvent changer. Bien que nous connaissions le modèle que nous recherchons, il peut changer selon le cas des lettres. Super, nous avons maintenant un travail de recherche et de remplacement qui est insensible à la casse. Passons maintenant à la vidéo suivante. 42. HTTP, requête et réponse: Jusqu' à présent, dans ce cours, nous nous sommes penchés principalement sur la façon dont les choses fonctionnent sur le front. Nous avons construit des interfaces utilisateur, différentes mises en page, regardé la conception réactive, et aussi, comment utiliser JavaScript. Tout cela est grand et vraiment important que nous comprenions tout cela. A partir de cette section, nous allons également regarder davantage le back-end des sites web. Comment un site Web interagira avec des serveurs, différentes sources de données et, en général, comment ils communiquent avec des sources externes. Lorsque notre interface utilisateur communique avec des serveurs ou demande généralement des informations, il existe certains concepts que nous devons connaître pour bien comprendre ce qui se passe. Nous n'avons pas besoin d'être un expert pour approfondir chacun de ces concepts. Comme la plupart viennent comme un sujet seul, mais avoir, au moins, une compréhension générale nous aidera vraiment à comprendre ce qui se passe. Le premier concept que nous allons examiner est le modèle de serveur client. Comme vous pouvez le voir ici à partir de la diapositive, sur le côté gauche, nous avons quelques exemples de clients. Un client peut être un navigateur Web, un téléphone ou même un terminal sur notre ordinateur. Fondamentalement, le client est celui qui fait les requêtes, comme une demande de toutes les pages Web que vous voulez afficher. droite, nous avons le serveur qui fournit ces ressources, tous les services que le client demande, comme notre page web, qu'il enverra au client s'il en a. Lorsqu' un client fait une requête, telle que demander une page Web, cela s'appelle une requête HTTP. HTTP signifie Hypertext Transfer Protocol. Il s'agit de la norme ou de la procédure utilisée pour transférer des données hypertextes sur le Web. Le client va de l'avant et fait la demande, puis le serveur essaiera de répondre à cette demande si possible. Il peut répondre avec des choses telles que le HTML requis pour la page Web, toute image ou tout script qui peut être nécessaire aussi. Bien que cela puisse sembler un peu complexe, c'est quelque chose que nous faisons chaque fois que nous visitons un navigateur Web. Tout d'abord, si nous allons à la page d'accueil de Wikipédia, en haut, vous remarquerez que HTTPS est au début. C' est comme le HTTP que nous avons mentionné précédemment. Mais de nos jours, HTTP secure est plus couramment utilisé car il fournit une version cryptée, une plus grande sécurité et la confidentialité. Une fois que nous avons entré une URL et que nous avons cliqué sur « Entrée », le navigateur Web, ou dans notre cas, le client fait maintenant une demande pour cette page Web. Si tout s'est bien passé, le serveur répondra alors avec la page demandée, puis l'affichera dans le navigateur. Ce cycle de réponse à la demande fonctionne également de la même manière pour d'autres clients, tels qu'un terminal informatique, qui est également un client. Ouvrons le terminal. Rendez ça un peu plus grand. Nous utiliserons un terminal plus une fois que nous arriverons à la section nœud de ce cours et vous n'avez pas besoin de suivre la section si vous ne le souhaitez pas. Mais tout ce que je vais utiliser est une commande cURL, qui fait également une requête HTTP à partir du terminal. Nous le faisons en tapant cURL, puis nous pouvons taper notre URL, tout comme nous l'avons regardé auparavant dans le navigateur. HTTPS ://puis www.wikipedia.org. Puis appuyez sur « Entrée ». Ensuite, si nous faisons défiler vers le haut pour voir beaucoup d'informations est retourné à nous. C' est tout le HTML qui est utilisé pour le site Wikipédia. Beaucoup de cela aura l'air commun, comme les divs, nos tags span, et toutes les différentes classes qui sont ajoutées ces. Ça ne peut pas être un peu difficile à lire. C' est parce qu'un terminal ne sait pas comment traiter ce HTML qui nous est renvoyé, donc il est juste affiché sous forme de texte brut. D' un autre côté, un navigateur web sait exactement quoi faire avec ce HTML. Donc, si allez sur le navigateur, et cliquez avec le bouton droit de la souris, puis allez à Afficher la source de la page cela peut aussi être un peu difficile à lire, mais c'est la même information qui est renvoyée du serveur.