Javascript pour les débutants (comprend 6+ projets de la vie réelle)

1. Bienvenue dans JavaScript pour les débutants: JavaScript, le langage de programmation le plus chaud aujourd'hui, sites Web complets aux APS mobiles en passant par des programmes comme Slack et Spotify, JavaScript est partout. C' est le langage de programmation moderne que chaque développeur doit connaître. Si votre tout nouveau développement Web et ne sait pas par où commencer, cherchez pas plus loin. Ce cours est absolument pour vous. Dans ce cours, vous apprendrez tout ce que vous devez savoir pour avoir une bonne compréhension des fondamentaux de JavaScript. Peu importe si vous êtes déjà super qualifié dans le développement Web ou votre tout nouveau décodage. Ce cours a été conçu pour vous. JavaScript est l'un des langages de codage les plus populaires au monde, et c'est une alerte Superfund. Dans ce cours, vous apprendrez les bases de JavaScript, les variables, la page Web, l' interactivité, interactivité, types de données et les structures de données, les instructions conditionnelles, les fonctions, JavaScript, bizarreries qui le rendent différent de tous les autres langages, objets, classes et programmation orientée objet. AP Eyes et Ajax requêtes et tout ce qui se trouve entre les deux. Il y a aussi cinq mini-projets pour une pratique immédiate, et un dernier projet pour tester vos connaissances globales. Rejoignez dès aujourd'hui pour devenir un développeur JavaScript 2. 7 faits de JavaScript: Salut, fin. Bienvenue sur Javascript pour les débutants. Très bien, je pense que nous devrions commencer par dire ce qu'est JavaScript, où il est disponible et de plus, ce qu'il n'est pas. Commençons par le numéro un. Qu' est-ce que Javascript ? Pas JavaScript n'est pas Java. Il y a une grande distinction entre Java et JavaScript. Java a été autour plus longtemps que JavaScript. JavaScript a été nommé seulement JavaScript afin qu'il puisse tirer parti d'une partie de la popularité derrière Jave a back en 1995. Et en fait, ils ne sont pas liés du tout. En fait, Jaffa est strictement un langage côté serveur, et JavaScript est presque strictement un langage de front, bien qu'il puisse être utilisé comme un langage côté serveur maintenant parce qu'il a été adapté pour fonctionner cette façon. La clé à emporter ici est Java n'est pas un script Java. Donc, chaque fois que vous parlez de JavaScript, s'il vous plaît n'appelez pas seulement Java, car cela va confondre les autres développeurs. Numéro deux. Chaque navigateur Web l'utilise. 100% de tous les navigateurs Web utilisent JavaScript. Maintenant, vous en tant qu'utilisateur sur disons, chrome ou Firefox. Vous pouvez décider de désactiver javascript si vous le souhaitez, mais votre navigateur est livré avec lui donc chaque fois que vous téléchargez un navigateur. Firefox Chrome Safari Edge Même Internet Explorer est livré avec la prise en charge de JavaScript. En fait, JavaScript est en fait le seul langage que vous pouvez utiliser sur le front end. Donc, mettons que là-dedans à JavaScript est le langage de codage Onley que vous pouvez utiliser sur le front end. C' est le seul. Il y a HTML, CSS et JavaScript, et cela constitue l'ensemble du front et de la pile de n'importe quel site Web. HTML et CSS ne sont pas des langages. JavaScript est un langage de codage, et il est le seul là-bas, et cela contribue en fait à sa croissance massive et à sa popularité. Parce qu'il n'y a pas d'autres choix. Vous devez connaître JavaScript pour être un développeur frontal et Web. Ok, numéro quatre. En tant que développeur, vous allez entendre beaucoup de mots. Vous allez entendre des choses comme la vue Jake Weary React, bibliothèques angulaires et les frameworks. Il y a une différence entre tous ces éléments, et nous allons en parler davantage au fur et à mesure que le cours se poursuivra. Mais dans les coulisses derrière Jake Weary réagir vue et angulaire, c'est juste javascript vanille. Tout est écrit en JavaScript ennuyeux. Une bibliothèque est un fichier JavaScript ou un ensemble de fonctions qui vous permet de faire des raccourcis. Donc, je, par exemple, J Query est une bibliothèque, et c'est parce qu'il ne vient pas vraiment avec toutes les choses supplémentaires que ah framework complet fait. Et un framework est comme vous réactif ou angulaire, où il vient avec plus que des écouteurs d'événements de liaison. Cela vient avec une certaine façon d'écrire des choses qui vient avec un certain style, ah, style de codage. C' est sur la façon dont vous écrivez réellement votre code, et il fait presque tout ce dont vous avez besoin. C' est donc la différence entre une bibliothèque et un framework. Mais nous en parlerons plus à l'avenir. Numéro cinq. Pouvez-vous utiliser JavaScript en ligne ou hors ligne ? Oui, la réponse est oui. Vous pouvez utiliser Js hors ligne. Pourquoi je dis ça ? Ou comment dire que Plutôt est JavaScript chaque fois que vous frappez un site Web, chaque fois que vous avez un site Web, votre navigateur télécharge un tas de HTML CSS et JavaScript avec des images et peut-être quelques autres fichiers, et votre essaie d'encaisser ceux afin qu'il n'ait pas à le recharger encore et encore. Une fois que vous avez un fichier javascript, vous pouvez exécuter ce fichier dans votre navigateur, même si vous n'avez pas Internet. Donc, même si vous n'avez pas Internet tout au long de ce cours, devinez quoi ? Vous pouvez simplement ouvrir votre navigateur et vous pouvez taper du code ici, ce qui est quelque chose que je vais vous montrer juste un peu. Et il va juste dire Salut monde et c'est JavaScript. Donc tu n'as pas besoin d'Internet pour ça. Cela dit, beaucoup de sites Web ont encore une sorte de p I là-bas et vous allez toujours avoir besoin d' Internet pour réellement tirer parti de l'utilisation complète de JavaScript. Cependant, vous n'en avez pas nécessairement besoin tout le temps. Fichiers JavaScript fichiers fichiers JavaScript et dans dot Js Donc, tout comme un HTML lorsque vous appreniez html, il était point html ou CSS était point CSS ou dot python et a enseigné tarte, non ? Donc c'est la même chose, alors pointez Js et vous allez voir ça partout aussi. Donc, tous les fichiers JavaScript se terminent par point Js et dernier mais pas le moindre, vous pouvez créer des programmes entiers en utilisant JavaScript ces jours-ci, donc il a commencé. Il était une fois, vous ne pouviez créer des programmes que dans certaines langues comme C ou C plus. Et puis il s'est en quelque sorte déplacé vers des choses comme python recon. Créez des programmes python entiers pour un système d'exploitation, et maintenant vous pouvez faire la même chose avec JavaScript. Et ce qui est bien à ce sujet, c'est que c'est une langue pour les gouverner tous. Donc, ce que vous pouvez faire est que vous pouvez créer un programme entier, et il peut être sur plusieurs systèmes d'exploitation. Ça peut marcher dessus. Votre appareil mobile est n'a pas d'importance de son IOS ou Android ou Windows ou Mac ou Lennox ou quoi que ce soit d'autre. C' est un système pour tous les gouverner. Et un bon exemple de ceci est Spotify, Spotify et mlack. Ces deux applications d'air énormes qui ont depuis très longtemps utilisé quelque chose appelé Electron. Et ce que cela fait, c'est qu'il compile fondamentalement tout votre JavaScript dans un programme réel, puis vous pouvez aller et l'envoyer à des gens pour le télécharger sur Windows, Linux, Mac OS, Android, iPhone, vous le nommez. Il y a un soutien. Et maintenant JavaScript qui est en fait écrire cette note. JavaScript est utilisé pour créer des programmes entiers, donc c'est une sorte de sept faits amusants sur deux JavaScript. Nous allons entrer dans beaucoup plus de choses au fur et à mesure que le temps passe pour terminer cette vidéo sur la gauche. Vous voyez, mon éditeur que j'utilise ves codé est fait par Microsoft est complètement gratuit. Et vous pouvez l'obtenir en le téléchargeant simplement. Vous allez avoir besoin d'un éditeur de texte comme celui-ci. Donc, si vous n'en avez pas déjà un, je suggérerais le code V sur la droite. J' ai simplement Google Chrome ouvert. C' est un navigateur. Et en fait, tout ce que j'ai fait ici, c'est que je suis allé à un bateau blanc. Donc nouvelle page, faites un clic droit inspecter. Et si vous allez dans votre console ici et nous allons agrandir cela, vous allez réellement écrire javascript ici aussi. Bonjour. Salut. J' aime juste ça et nous avons du javascript. Donc vous allez voir que mon écran est divisé en deux. Donc j'ai mon éditeur à gauche, et puis j'ai juste ah, navigateur à droite. Quelque chose comme ça. Si vous avez deux moniteurs que vous pouvez utiliser pour les moniteurs, vous pouvez simplement basculer entre le plein écran sur le code V s ou votre éditeur de texte et chrome ou tout navigateur que vous voulez utiliser. Ça n'a pas besoin d'être Crumb. Mais c'est comme ça que je l'ai mis en place dans la vidéo pour que vous puissiez voir tout cela juste mis en place devant vous. Là où cela dit, passons à notre prochaine leçon où nous allons créer notre premier script JavaScript. 3. Votre premier script: Bon, allons sauter directement dans JavaScript. À ce stade, vous devriez avoir un éditeur de texte comme le code V. Adam Sublime. Quelque chose comme ça. Et tout ce que nous allons faire, c'est créer un nouveau fichier. Et je vais juste dire cela comme un fichier html point et je vais appeler ceci votre premier script dot html. Donc, au début, il semble que nous créons un fichier HTML, et en fait, nous le sommes. Donc, je vais créer fera que plus petit. Je ne suis pas pour créer une petite mise en page HTML cinq ici, et la première chose que je veux faire est de créer un java dépouillé et donc à l'intérieur de mon HTML, généralement au bas de votre page juste avant la balise body. Tu es l'étiquette de fin de corps. Nous mettons une balise appelée Script dans le script Here et le script slash, et c'est ainsi que nous faisons à peu près n'importe quoi avec javascript à l'intérieur de la page. Maintenant, si vous suivez ce cours, Vraiment, vous n'avez pas vraiment besoin de ces trucs. Vous avez juste besoin du corps de tête html de type doc, puis mettez le script à l'intérieur de votre corps. Je vais juste laisser ça là-dedans juste, vous savez, vous savez, pour des raisons parce que la lourde escorte le met automatiquement là dedans pour moi, donc je vais juste le garder là-dedans. Appelons ça votre premier script. Et là où nous avons notre script ici, tout ce que je vais faire est de taper alerte, entre guillemets. Mark. Salut. Je m'appelle Caleb. Et puis j'ai mis une fin entre guillemets et crochets ou parenthèses sans fin, puis un point-virgule. Et donc si j'enregistre ce fichier et je vais dans chrome et je touche simplement commando ou control Oh, vous pouvez également aller dans le fichier ouvert. Et si je viens d'ouvrir ce fichier, il exécutera automatiquement mon JavaScript pour moi. Et donc il y a une alerte ici. Cette petite boîte ennuyeuse qui apparaît dit Salut, je m'appelle Caleb. Et chaque fois que je rafraîchis la page, ça dit Salut. Je m'appelle Caleb. Salut. Je m'appelle Caleb. Refaisons-le. Salut. Je m'appelle Caleb. Que se passe-t-il si je clique une fois de plus ? Ça dira bonjour. Je m'appelle Caleb. Et c'est parce que tout entre cette balise ici cette balise de script d'ouverture dans cette balise de script de fermeture . Tout ce javascript va s'exécuter. Maintenant, à ce stade, nous ne connaissons pas des choses comme la syntaxe, qui est comme la structure du langage. Pourquoi avons-nous un point-virgule ? Pourquoi avons-nous une parenthèse ? Pourquoi avons-nous des guillemets ? Qu' est-ce qu'une alerte ? Nous ne connaissons pas encore ces choses, et en fait, c'est OK. Mais pour l'instant, ce que je voudrais vous faire, c'est juste créer un petit script comme celui-ci. Donc, si vous avez besoin de vous sentir libre dépôt vidéo et juste créer un script dit bonjour, mon nom est quel que soit votre nom, et assurez-vous juste que c'est une alerte. Assurez-vous que cela ressemble beaucoup à mon code ici. Le plus important est de mentir. 15 Ligne de remorquage 17 ici. Tu n'as pas à t'inquiéter trop pour ça. Nous ne cherchons pas à créer un site web réactif, ce qui est essentiellement ce que cela fait. Nous voulons juste du javascript pour s'exécuter, puis l'ouvrir dans votre navigateur. Il y a une alternative à faire cela si vous le souhaitez. Vous n'avez pas à le faire dans le dossier. Vous pouvez également le faire directement dans votre navigateur. Donc, si vous ouvrez une page, cliquez droit Inspecteur, et vous allez vouloir cliquer sur les tablettes en tant que consul. Et ici, C'est juste votre console JavaScript. Votre capacité d'écrire n'importe quel javascript que vous voulez. Donc, par exemple, je pourrais dire alerter JavaScript pour les débutants si je pouvais l'épeler correctement. Et on y va. Il dit javascript pour les débutants, et vous remarquez qu'il ressemble exactement au même code que ce que j'ai écrit ici. Le texte est différent à l'intérieur de celui-ci. On en parlera plus tard. Ah, mais en gros, c'est exactement le même. Pour que tu puisses le faire comme ça. Ou si vous le vouliez. Vous pouvez utiliser le code pen dot io, qui est un outil pour la boxe au sable HTML CSS et JavaScript. Et je vais te montrer ça dans quelques vidéos à partir de maintenant. Mais ce sont les deux principales façons d'exécuter JavaScript. Fondamentalement, vos gros scripts vont ici. Et si jamais vous avez besoin de tester quelque chose hey, ouvrez simplement votre navigateur. Droit. Cliquez sur, inspecter. Allez dans votre console et vous pouvez écrire n'importe quel javascript que vous voulez. La prochaine chose à savoir est comment relions-nous aux fichiers JavaScript ? Eh bien, si vous êtes familier avec HTML et CSS en CSS, c'est un lien. Éléments en JavaScript. Nous faisons un script SRC au lieu d'un brouillon. SRC est égal à Let's go scripts et votre premier point de script Js que nous pourrions faire type est égal à importe quel type que nous voulons qu'il soit. Et on vient de fermer le script. Et ce que cela va faire est d'essayer de charger à partir du dossier des scripts et va chercher votre premier script jazz. Maintenant, cela n'existe pas, donc cela ne fonctionnera pas. Mais c'est ainsi que vous utiliseriez un fichier externe. Donc, si vous avez plusieurs fichiers HTML sur lesquels vous voulez que JavaScript fonctionne, vous n'avez pas besoin de le copier et de le coller. Vous pouvez simplement utiliser un fichier externe, et c'est quelque chose que vous auriez dû apprendre en CSS et HTML aussi. Donc, votre tâche pour cette vidéo est de simplement créer un script dans une balise de script ouverte, une balise dépouillée de fermeture. Assurez-vous qu'il est juste au-dessus de votre corps. Je ne veux pas ça dans la tête comme je l'ai écrit là-haut. Débarrassons-nous de ça. Vous voulez juste au-dessus de votre balise de corps slash et vous savez, vous avez tout votre HTML ici, puis juste des alertes au monde. Bonjour. Mon nom l'est. Et puis quel que soit ton nom, une fois que tu as fait ça, passons à la leçon suivante. 4. Une courte histoire: d' Parlonsd'un bref historique de JavaScript. Je sais que ce n'est pas la chose la plus importante au monde. Je sais aussi que ce n'est pas la chose la plus intéressante au monde. Mais c'est, à mon avis, un élément fondamental de l'apprentissage d'une langue. Vous voulez en quelque sorte comprendre d'où il venait pour projeter où il va. Et JavaScript, pour moi a une histoire assez intéressante. Donc, les premières choses d'abord JavaScript était ou est. En fait, Jeff Script est un langage de programmation relativement nouveau. En fait, il s'appelle You Haves a Script parce qu'il s'agissait d'un langage de script. Ce n'était pas en fait un langage de programmation complet jusqu'à récemment. Il a été développé en 1995 et il a été entièrement réalisé en 10 jours. Maintenant, le JavaScript que nous écrivons aujourd'hui beaucoup plus complexe et a pris beaucoup plus de 10 jours pour créer. Mais le prototype JavaScript original n'a pris qu'environ 10 jours à la fin des années 90. entrant dans les deux premiers milliers, beaucoup de gens pensaient que JavaScript était une mode parce que vous deviez écrire un langage de programmation pour faire fonctionner un site Web, et vous deviez écrire un langage de programmation sur le back-end donc que vous pouviez faire choses comme accepter les paiements et que vous deviez écrire un langage de programmation sur le front afin que vous puissiez avoir de petites interactions et cela ne pouvait pas faire beaucoup à l'époque. Donc, il est compréhensible de penser pourquoi ça aurait été un gros. Mais alors, comme plus de gens sont venus en ligne et que plus de gens voulaient des interactions, JavaScript n'a pas vraiment décollé. Pas très bien de toute façon. Flash est devenu le langage d'animation par défaut maintenant, comme la plupart d'entre nous le savent, clignote plus vraiment autour. Et c'est essentiellement tout JavaScript. Et c'est parce que Flash avait trop de problèmes de sécurité et JavaScript bien, comme il arrivait à maturité lentement en arrière-plan, il était capable de faire de plus en plus de choses que Flash était capable de dio et finalement juste complètement remplacé. Quand un jour Google et un tas d'autres personnes ont dit plus flash. C' est un problème de sécurité majeur, et Flash a été donné une chronologie comme, Hey, vous avez quelques années à vivre, et puis nous coupons votre soutien. Nous coupons votre soutien à la vie, et nous allons avec JavaScript pour que tout le monde soit prêt pour cela. Et c'est ce qui a fini par arriver. Et donc la gorge cette période. Alors que Flash était en quelque sorte sur ses dernières jambes, JavaScript s'est vraiment emparé. Les gens ont vraiment commencé à l'adopter et à le rendre meilleur et à faire toutes sortes de bibliothèques et cadres que nous utilisons aujourd'hui. J' avais mentionné il y a quelques vidéos que JavaScript est le front Onley et le langage de programmation là-bas, et bien, c'était vrai à un moment donné. Ce n'est pas tout à fait vrai. Il existe d'autres langages de programmation que vous pouvez utiliser sur le front, mais ce ne sont pas vraiment quatre sites Web de plus que donc des langages de programmation. Et les plus grandes menaces pour les succès JavaScript est celui appelé assemblage Web, ou floraison pour abrégé. En fait, il n'a même pas obtenu le support approprié du navigateur jusqu'à la fin de 2017 début 2018. Maintenant, l'assemblage Web est fondamentalement un langage de programmation réel. Un langage de programmation riel qui fonctionne très, très, très rapide est beaucoup plus efficace que JavaScript pour votre navigateur. Cependant, il n'a pas vraiment décollé, et je pense qu'il n'a pas décollé parce que JavaScript a grandi si rapidement en quelques années , vraiment, environ une décennie et l'assemblage Web était en retard. Lancement de remorquage. Ils étaient censés se lancer bien avant 2017. À l'origine, JavaScript s'est simplement développé trop rapidement pour que l'assemblage Web puisse rattraper le retard. Cela dit, si Webb Assembly était devenu une norme, ce serait un grand bond en avant pour fondamentalement tous les sites Web ou tout programme qui fonctionne à travers un navigateur. Mais je ne pense pas que ça arrivera bientôt. Mais, hé, ce n'est ni ici ni là, parce qu'on apprend. JavaScript et JavaScript a une énorme demande aujourd'hui, Mais il est juste bon de savoir que si un jour JavaScript devait être remplacé pour le développement frontal et Web , serait probablement par assemblage Web et transfert si rapide quelques années. Nous avons maintenant un JavaScript côté serveur, appelé noeud dot Js, et est massivement populaire frameworks comme React, créé par Facebook et view dot Js. Il y avait un autre appelé angulaire, créé par Google et essentiellement voir point Js huit jusqu'à toute la communauté angulaire. Ah, et React est le roi des frameworks JavaScript. Mais en revenant en revenir sur ce node.js. Fondamentalement, il y a un moteur qui peut lire votre javascript et le décomposer en code très performant , et donc vous pouvez écrire javascript et votre ordinateur. Fondamentalement, vous pouvez le penser comme un moyen car il compile votre JavaScript en C et puis comme il exécute votre code C, je fais des citations aériennes ici, mais votre code C. C' est en fait beaucoup plus rapide. Et donc c'est JavaScript côté serveur, qui signifie que vous pouvez réellement écrire du JavaScript sur une machine Linux et l'avoir connecté à une base de données et toutes ces choses assez nouvelles. C' est assez populaire de nos jours, et la bonne chose à ce sujet est que vous pouvez écrire un langage de programmation sur le front, un langage de programmation sur le backend, et vous pouvez écrire fondamentalement n'importe quel programme dont vous avez jamais besoin doit être connecté à Internet. Vous avez javascript vers le bas pat, et vous pourriez faire tant de choses avec elle. Cela dit, quand il s'agit des langages côté serveur, il n'est toujours pas aussi puissant que des langages comme Python peuvent en faire beaucoup plus. Par exemple, beaucoup d'intelligence artificielle IA et ML Machine Learning sont écrits en Python. Ce n'est pas écrit en JavaScript, donc c'est un bref historique sur JavaScript. Où va aller ? Personne ne sait vraiment. Je soupçonne que JavaScript va continuer à décoller. C' est le seul langage de programmation pour un site web. Et pour que de plus en plus de gens arrivent en ligne, il devient de plus en plus populaire. n'y a pas le choix. Il doit grandir, et vous pouvez y penser comme ça. JavaScript est le seul enfant dans une famille, et il reçoit donc toute l'attention. Alors que lorsque vous parlez d'autres langages de programmation comme C ou Cortland ou Java ou python ou tout autre langage de programmation là-bas, vous pouvez fondamentalement échanger à chaud la plupart de ceux-ci. Dans un sens, vous pouvez écrire un programme entier en C. Vous pouvez également écrire un programme entier en Python. Où est-ce que vous n'avez pas vraiment ce choix quand il s'agit de développement Web frontal. Et donc nous utilisons toujours JavaScript. Et je pense qu'à cause de cela JavaScript va vraiment décoller ah, beaucoup plus que ce qu'il a déjà dans les années à venir. 5. Introduction aux variables: Bonjour et bienvenue dans cette vidéo, nous allons parler de variables. Maintenant, si vous n'êtes pas très intéressé par les maths, si vous n'aimez pas les maths, peut-être que vous n'êtes pas doué en maths et que vous entendez le mot variables et que vous paniquez un peu. Ne vous inquiétez pas. En fait, ce n'est pas aussi complexe qu'il n'y paraît. Beaucoup de gens pensent aux variables comme, Hey, nous allons avoir raison dans le calcul. Et pour être tout à fait honnête, moi, je suis assis comme ma personne. Je ne connais pas le calcul, et je travaille avec des variables tous les jours. Des centaines, peut-être même des milliers. variables sont fondamentalement juste un moyen de stocker de petits morceaux de données sur votre ordinateur, puis les utiliser plus tard. Vous pouvez les manipuler, vous pouvez les vérifier. Vous pouvez demander à votre ordinateur d'exécuter une certaine commande en fonction d'un type particulier de variable et de la valeur que cette variable contient. Jetons donc un coup d'oeil à ce à quoi ressemble une variable. Et donc je vais juste créer un site Web HTML 5 ici, et vous savez quoi ? Je n'ai pas besoin de tous ces trucs qui nous appellent des variables de taureaux et parce qu'on n' aura pas de melon HD ici. Je veux dire, nous le mettrons ici en général, mais nous ne le ferons pas. Nous allons juste écrire du JavaScript de base pour l'instant. Donc on va rester avec une balise de script et ici, on va mettre une autre balise de script. Et donc, quand nous commençons à parler de variables, en fait, tout ce que nous voulons dire, c'est un morceau de données que nous pouvons échanger. Et nous le faisons avec var. Et c'est très intéressant qu'il dit modèle Django. Laisse-moi changer rapidement. C' est au HTML régulier. On y va. Nous avons donc une déclaration VAR. Cela signifie Variable et Vier dit fondamentalement qu'ils JavaScript. Juste pour que vous sachiez, nous sommes sur le point de déclarer une variable et ensuite vous lui donnez un nom, donc tout ce que vous voulez que ce nom soit égal à Et puis il y a différentes façons de déclarer différents types de variables et nous allons entrer dans ces heures supplémentaires. Donc, nous allons garder les choses simples pour l'instant. Donc je vais juste dire que je m'appelle Caleb et qu'on agrandisse ça ici. J' ai donc une variable. Il s'appelle le nom et la valeur est Caleb. Et donc nous connaissons déjà cette fonction d'alerte. On en parlera beaucoup plus sur la route. Si je viens de dire simplement le nom d'alerte et j'ouvre cette page dans Google Chrome, vous pouvez réellement le voir. Ça dit juste Caleb. C' est tout ce qu'il fait. Si je voulais échanger ça à tout moment, je reçois, disons, Caleb, Darlene, sauf que je vais aller ici à Refresh dit Caleb, disant que tu pourrais faire plus que ça. Donc, nous allons créer une autre variable. Appelons ça bien sûr. Quel cours suivons-nous actuellement ? ce moment, nous prenons JavaScript pour les débutants, et vous pouvez voir qu'il s'est enveloppé sur une nouvelle ligne. En fait, c'est OK. C' est juste parce que mon téléphone est un peu trop gros ici. Ensuite, en dessous, vous pourriez dire cours d'alerte et allons-y, rafraîchir notre page et c'est javascript pour les débutants. Et donc c'est vraiment tout de variable est maintenant que vous pouvez réaffecter une facture très à tout moment, donc nous n'utilisons plus de nom. Je l'ai mentionné tout à l'heure. demi-deux-points, c'est une chose. Généralement, cela indique à un ordinateur que hey, c'est la fin de la ligne et tout ce qui vient après cela est une nouvelle déclaration, donc juste à titre d'exemple, nous ne voudrions pas mettre ces deux sur la même ligne comme ceci, parce que si on a fait ça et que l' on touche rafraichir, on ne verra rien. En fait, vous pouvez effectivement faire un clic droit, inspecter et vous pouvez voir que nous avons une erreur ici et ouvrons notre consul et vous pouvez voir que nous avons une erreur ici dit quelque chose qui est trop difficile à lire dans. On y va. Non attrapé, syntaxe, erreur, jeton inattendu var Et il nous dit exactement où il est. Donc si je clique dessus et dit la ligne 11 et me montre ici donc c'est plutôt cool. Donc c'est un petit conseil pro de débogage là pour vous. Et donc même mes rédacteurs en chef disent, Hey, quelque chose ne va pas ici. Et donc ce que nous voulons faire, c'est généralement mettre ça sur une nouvelle ligne et mettre un point-virgule à la fin. C' est la façon la plus simple de nous maintenir, et si nous cliquons, actualisons à nouveau, il nous avertit comme prévu, et il n'y a pas d'erreur dans notre conseil. Et en passant, chaque fois que vous rencontrez un JavaScript, ils ouvrent toujours votre console. Jetez un oeil à ce que ce domaine est parce qu'il peut vous dire en tant que développeur javascript. Quel est le problème, en fait, comme peut-être c'est quelque chose que l'utilisateur a fait. C' est peut-être quelque chose que le développeur a fait. À la fin de ce cours, vous serez en mesure de savoir exactement à qui est la faute. Habituellement, c'est les développeurs. Ils n'ont pas implémenté quelque chose correctement. Ok, donc on a le nom et le cours de la variable, et on est juste en train d'alerter ça. Allons de l'avant et écrasons notre variable. Maintenant, nous pourrions tout simplement avoir. Notre cours est égal à Python pour les débutants. Et comme je le dis et je vais rafraîchir cette page, il va maintenant dire python pour les débutants. Et ça marche. Donc, fondamentalement, nous avons créé une variable. On ne l'a pas utilisé du tout. Et puis nous avons surmonté le tout avec une nouvelle valeur ici Maintenant, parce que cette variable a déjà été déclarée à partir de notre cela arrive à hisser une chose dont nous parlerons plus tard sur la route. On n'a pas besoin de déclarer bar à nouveau. C' est déjà là, donc nous n'avons vraiment besoin de déclarer var qu'une fois sur une variable particulière. Et après ça, nous n'avons plus vraiment besoin de faire ça. Alors allons de l'avant et sauvegardons cela et appuyez sur actualiser les finances. Python for Beginners Council ne s'est pas plaint. Les choses avaient l'air bien. D' accord. Une autre chose que nous devrions examiner, c'est ce qu'il y a avec ça. Donc vous voyez ces guillemets ? Il y a deux autres façons de le faire. Donc, nous pourrions faire, par exemple, de notre âge. Quel âge ai-je ? Eh bien, j'ai 30 ans. On pourrait faire ça. Et si j'alerte l'âge et actualise cette page, il est écrit 30. Et si je vais ici et taper l'âge, il semble déjà exister. Ça me donne aussi 30. Et si je tape dans le cours ici, il existe déjà. Oh, mon navigateur comprend qu'il y a des variables ici qui sont accessibles au conseil . Et donc maintenant, nous commençons en quelque sorte à interagir avec JavaScript dans une balise de script ou un fichier Js dot . Si nous devions le déplacer vers un fichier externe, et ici, nous pouvons également accéder à certaines de ces variables. Nous commençons donc en quelque sorte à connecter notre éditeur et notre terminal de navigateurs ou le conseil. Donc, nous voyons ici, l'âge n'a pas de citations autour d'elle il peut. Il peut avoir des citations autour d'elle. Ah, vous pouvez aussi voir que le point-virgule était fondamentalement facultatif. Je n'en avais pas besoin, et c'est bon parce que je mettais mon manteau sur de nouvelles lignes. Et JavaScript est assez intelligent ces jours-ci pour comprendre que pour une bonne pratique, allons de l'avant avec ce cynique là-dedans et rafraîchir notre page, et il est toujours dit que 30 ne semble pas différent. Mais si je tape ici l'âge, vous pouvez voir qu'il a les citations autour d'elle. Il s'agit d'une différence fondamentale entre les différents types de variables. Nous parlerons de tout cela sur la route, mais il est important d'avoir l'idée dès maintenant. C' est une variable appelée une variable, une action variable appelée var var one. Tout ce qui a une phrase ou des espaces dedans. Toute sorte d'espace est comme ce que vous voyez ici qui doit être entre guillemets donc nous ne pouvons pas juste mettre 30 30 30 30 30 30 30 avec des espaces là-dedans et alerte de la nôtre. Cela va nous donner une erreur. On y va. Nombre inattendu, mais si nous mettons des citations autour d'elle, donnez ceci une actualisation ? Ça marche. Donc, à ce stade, vous devriez être un peu confus si vous êtes tout nouveau en javascript sur ce que tout cela concerne. Donc, lorsque nous utilisons des guillemets, cela s'appelle une chaîne. Donc c'est une chaîne, et c'est un type de variable qui dit fondamentalement, Hey, c'est une phrase et puis nous avons Sauvegardons nos deux ici est égal à juste le nombre 30 ou n'importe quel nombre ou 30.5, quelque chose comme ça. Et cela s'appelle un nombre. Ou dans d'autres langages de programmation. On l'appelle parfois un entier. En fait, dans ce cas, ce serait à flot. Mais ce n'est ni ici ni là. En ce moment, nous aborderons cela un peu plus tard. Et JavaScript résume bien cela est et ils disent, comment nous ne nous soucions pas si elle a un point décimal ou non. On s'en soucie juste. C' est un numéro ? Ce n'est pas un numéro ? Et donc, quand vous avez affaire strictement à un nombre, vous n'avez pas besoin de citations autour d'elle. n'y a pas d'espace là-dedans. Vous avez juste des nombres et des points décimaux, et c'est tout. Pas de virgules, pas de dollar ne signe rien de tel. Il s'agit simplement de chiffres et d'une période. Donc maintenant, si je vais de l'avant et que je dis, Alertons loin, aussi. Et ce que je veux faire ici, c'est m'en débarrasser. Rafraîchissez notre page. Ça va dire 30,5, et c'est là. Si je tape beaucoup trop, vous pouvez voir 30.5 n'a pas de guillemets autour. Faisons que plus grand n'a pas de guillemets autour d'elle. Mais Var on le fait. Et c'est parce que c'est une chaîne et loin, aussi, est un nombre. Alors pourquoi est-ce important en ce moment ? Grande question. Eh bien, comme nous apprenons JavaScript en ce moment, ce n'est pas important pour nous. Mais cela deviendra important pour nous très, très bientôt. Et je pense que plus tôt les gens comprennent ce genre de différence dans un type variable, mieux votre programmation sera sur la route. Donc c'est tout ce qu'il y a vraiment pour cette vidéo particulière dans la prochaine. Allons de l'avant et commençons à tuer quelques variables ensemble afin que vous puissiez réellement voir comment une variable est supposée fonctionner orteil, parce que maintenant ces variables et je veux dire que nous les enduisons dur, donc ce ne sont pas vraiment des variables disaient juste, Hey, attribuez des cours égaux à JavaScript pour les débutants, puis remplacez-le immédiatement. Donc ça ne sert à rien. La variable doit être quelque chose qui peut changer. Et, hé, si vous ne comprenez pas complètement cette vidéo, ne vous inquiétez pas pour ça. Passez à la suivante de toute façon, et finalement cela va tout simplement cliquer en place. Cela devient beaucoup plus facile une fois que nous commençons à écrire plus de JavaScript ensemble. 6. Variables de fusion: Bonjour, End. Bienvenue de retour. Dans la dernière leçon, nous avons appris un peu sur les variables. Dans ce dernier, nous allons apprendre comment nous pouvons les fusionner ensemble. Non, fusionner des variables ensemble comme combiner des phrases, est appelé Concoct une nation. Tu vois ce mot ici ? Concaténation. Vous le verrez souvent comme le mot vient chat aussi. Pourquoi ça s'appelle Cat Nation ? Je ne sais pas. On pourrait appeler émerger. Mais hé, les développeurs aiment leurs mots fantaisistes. On appelle ça la concaténation. Maintenant, dans cette vidéo, je vais vraiment faire la plupart de cela dans la console. Donc, je vais à la console et allons de l'avant et faire le chrome plus grand parce que nous pouvons. Et ainsi de suite à ma gauche, j'ai juste ah, fusionnant des variables que HTML ouvre. C' est juste le code source ici. y a actuellement rien là-dedans, pas de JavaScript, et ça ressemble à une page blanche, et nous avons un terminal ici. Pour que je puisse dire alerte. Salut, et ça marchera. Allons de l'avant et éclaircissons ce conseil clair et créons un couple de variables ensemble et puis chat peut-il en avoir besoin ? Alors créons un âge et une introduction à qui je suis. Donc disons que Var intra était égal à Salut, mon nom est Caleb, et je suis quelque chose, quelque chose, quelque chose d'âge. Donc c'est mon intro. Et si je tape que vous pouvez voir qu'il crache juste exactement ce que j'avais déjà écrit. Maintenant, si je tape de notre âge est égal à 30 type et l'âge à nouveau, nous pouvons voir que l'âge n'a pas de citations autour d'elle. Donc nous savons que c'est en fait un numéro, et nous voulons injecter ce numéro ici. Alors comment on va faire ça ? Eh bien, on a fait ça en quelque sorte à l'envers parce qu'on a défini ça. Tout d'abord, nous définissons l'introduction d'abord, puis nous définissons leur âge. Mais devinez quoi ? Nous pouvons écraser les variables afin que nous puissions dire intro, et cela nous dit ce que l'intro est déjà égal au lieu d'avoir juste ce vide ici. Ce que je peux faire, c'est que je peux réellement quitter la phrase en mettant un autre guillemet là-dedans , mettre un signe plus, puis la variable, autre signe plus et ensuite une citation. Et il y a différentes façons de le faire et javascript plus moderne. Mais tu vas voir ça partout. Nous allons d'abord apprendre de cette façon. Et donc, en gros, ça veut dire, Hey, intro, tu défie déjà donc on n'a pas besoin d'utiliser les orteils. VAR dit Salut, je m'appelle Calvo. Bon vieux Calvo tabl e in. Mon nom est Caleb et moi, et puis il quitte la phrase et dit, Hey, Hey, ajoutez aussi l'âge dans leur valeur quelle que soit la valeur. Mettez-la là et puis Oh, hey, recommencez cette phrase avec un autre signe plus, puis une autre citation et mettez-y le reste de la phrase. Et donc si on frappe Entrée, on peut voir Salut, mon nom est Caleb et j'ai 30 ans, et honnêtement, c'est tout ce qu'il y a pour concocter la nation. Maintenant, le problème se pose lorsque vous essayez de concocter des nombres Nate. Donc, si je crée une autre variable appelée, euh , numéro deux , je suppose, et nous allons faire que 40.123 nous pouvons voir ici Numb est égal à 40.123 Maintenant que se passe-t-il si je voulais dire 30 40.123 Donc le nombre devrait regarder 3040.123 Comment allons-nous que le cabinet peut ? C' est plus compliqué parce que ces numéros d'air et quand vous faites un signe plus avec des nombres dans la plupart des langages de programmation, il ajoute simplement les nombres ensemble, et ce n'est pas ce que nous voulons. Donc, si nous avons fait l'âge plus engourdi pour regarder cela, cela nous donne un nombre que nous ne voulons pas 70.12 à 99999 C'est une petite chose drôle en informatique où il n'y a en fait pas de numéro de trou sur JavaScript fonctionne occasionnellement dans Ceci est en fait un exemple assez cool. Mais au lieu de dire 70.123, il dit 70.12 à 99. Nn nn Nn et Infinity, l' infini et ainsi de suite. Mais ce n'est pas ce que nous voulons. Alors, comment les fusionner ensemble ? Quoi ? On peut le faire en contaminant une chaîne ici. Alors tu te souviens de la dernière leçon ? cordes et les nombres du côté droit sont un peu différents. Un peu important à savoir. Eh bien, déjà nous avons besoin de connaître la différence ici afin que nous puissions le faire et toujours dit était, Hey, prendre le numéro 30 ajouté à une chaîne vide et une phrase vide, puis ajouter le deuxième numéro à elle. Et donc si on touche Entrée, on peut voir que ce n'est plus un nombre. C' est une chaîne et nous pouvons lui dire de chaîne car elle a des guillemets autour d'elle. Et donc cela signifie que c'est une chaîne de 3040.123 Notez également comment il dit 0.123 et pas 1 à 29999999 est parce que ce n'est pas un nombre. L' ordinateur n'a pas besoin de trouver un nombre arrondi comme ça. Il suffit de dire, Oh, c' est une ficelle. Donc oui, je comprends qu'il y a des chiffres ici, mais on n'a pas besoin de faire un tas de maths dans les coulisses pour que ça marche. C' est comme si c'était des lettres anglaises régulières. Negus n'a pas besoin d'être des lettres anglaises. Ça pourrait être n'importe quelle lettre. Vraiment ? Ah, mais ouais, juste la différence entre les lettres et les chiffres ici. Et donc celui-ci pense maintenant que ces air sont toutes essentiellement des lettres au lieu de chiffres. Alors allons de l'avant et ajoutons une phrase avec deux chats. Donc disons ah de notre chat un. Son nom va être un Zephyr. Est-ce pour et de notre chat deux est égal à Henry. Donc ce sont mes deux chats. Au fait, vous allez voir ça indéfini. Chaque fois que vous utilisez Vyron, cela entre dans le levage. C' est une fonctionnalité JavaScript plus compliquée à aborder En ce moment, nous aborderons cela un peu plus tard. Mais si vous voyez indéfini comme ça, ne vous inquiétez pas. Rien n'est mal. C' est juste une sorte de JavaScript loin d'enregistrer une variable, puis d'enregistrer la valeur de la variable. Ça s'appelle encore le levage. On s'en occupera à l'avenir. Et donc maintenant je veux dire, phrase var est égale à j'ai deux chats et le 1er 1 va être chat un. Et le 2e 1 va être chat aussi, et on pourrait juste le laisser ici comme ça. Et donc ce qu'on dit ici, c'est que j'ai une phrase. Mais je veux aussi mettre la variable de chat un là-dedans donc quoi que ce soit, c'est Zephyr. Mais ça pourrait être n'importe quel autre nom dans le monde. Et peut-être que ça a été écrit 100 fois. On ne sait pas. Quel que soit le résultat final, on va le mettre ici, et ensuite on va contaminer un autre morceau de la phrase, juste la fin du mot. Et puis, en utilisant le signe plus, nous allons concocter Nate Henry. On est juste un chat aussi, aussi, alors allons de l'avant et tapez une phrase et vous pouvez voir que j'ai deux chats, Zephyr et Henry. De plus, nous pourrions en fait aller encore plus loin dans ce domaine aussi. On pourrait dio de notre âge un. Donc, disons que Age of Cat One aura quatre ans et que nous aurons deux ans. C' est un chat quel que soit cet âge. On sait que c'est Henry. Je sais que son âge est aussi, aussi, alors nous avons un chat de quatre ans et un chat de deux ans. Maintenant, nous voulons en fait peut capitaine huit dans une autre phrase peut caféiné déjà donc phrase a déjà été définie, et comme vous pouvez le voir, je peux prendre cela dans ma console et il me dit, une sorte de fané sortez le texte. J' ai deux chats, Zephyr et Henry. Allons de l'avant et disons que la phrase est égale à la phrase plus, donc ça va prendre cette valeur, et on va avoir besoin de quelque chose en plus de ça ? Donc, nous voulons mettre ah, point à la toute fin ici et disons qu'ils ont quelque chose d'années, donc quelque chose et quelque chose d'années, donc quatre dedans est ce que nous voulons entrer ici. Donc ça m'aide toujours quand j'apprenais à concocter. Nate est juste mis comme des traits de soulignement là-dedans. Et puis vous pouvez simplement faire votre drôle de concaténation genre de style ici, où vous avez la citation de clôture plus signe et puis ici nous pourrions mettre l'âge un signe plus citation et vous pouvez voir que c'est un ordre opposé. Alors va citation plus signe, et puis pour revenir dans Toi, fais plus I dans Citation, et on va faire la même chose ici. Et c'est juste pour que je vais avoir deux ans et allons-y et frapper. Entrez. Oh, et au fait, on peut mettre des points-virgules à la fin de tout ça. Mais nous n'avons pas forcément à le faire parce que notre consul ou chrome dans ce cas sait que chaque commande est sa propre commande, donc nous n'avons pas à le faire un point-virgule. Mais encore une fois, c'est juste une bonne pratique à suivre. Comme Javascript vieillit, nous utilisons des points-virgules beaucoup moins et cool. Tu criais probablement à l'écran en disant, Caleb, l'âge n'existe pas. C' est ce qu'on appelle l'âge 1. Vous pouvez voir ça ici. Je n'ai pas appelé ça à l'âge de 2 ans. Je viens juste d'appeler ça un juge. Et alors, allons-y et refaisons ça. Nous pourrions aussi simplement redéfinir ou simplement définir une variable appelée Age Two, et cela le corrigerait. Allons de l'avant et changeons nous en vieillissant. Et on y va. Et maintenant il est dit que j'ai deux chats, Zephyr et Henry, et ils ont quatre et deux ans. Et donc si je vais de l'avant et que je prends la peine à nouveau pour agrandir ça, j'ai deux chats dont ils ont 4 ans de F 100. Donc j'ai vieilli ici. On sait qu'on a deux ans, on a l'âge d'un, parce qu'on sait qu'on a un chat. On a Cat 2 et on a la peine. Nous avons donc fait un tas de déclarations de variables ici. Nous avons défini des variables et nous les avons fusionnées dans une phrase. Et puis nous en sortons une fois de plus dans cette phrase. Donc, c'est essentiellement tout ce qu'il y a pour concocter la nation. Maintenant, vous allez voir cela partout parce que javascript est un langage où vous pouvez modifier votre page Web, votre HTML et même votre CSS, et vous allez vouloir éventuellement prendre une variable et remplacer du texte sur votre page avec quelle que soit la valeur de cette variable. Et c'est ainsi que nous pouvons Cat Nation. Maintenant, si vous êtes intéressé à donner un coup de feu, vous pouvez faire exactement ce que j'ai fait dans cette variable et juste dire, Hey, mon nom est quel que soit votre nom. J' ai un chat ou un chien ou j'ai Combien de livres avez-vous ? Peut-être que tu as 1000 livres et que tu pourrais faire quelque chose comme ça. C' est toujours bon d'y aller et de nous donner une chance. N' oublie pas. Si jamais vous avez des questions, je suis là pour vous aider. Vous pouvez toujours laisser un commentaire ou une question ci-dessous 7. Logging de console: Bon, bienvenue. Dans la dernière leçon, nous avons parlé Livre et chat Nation. Et cette leçon que nous allons parler de nation non encaissée. Nous allons en fait chercher une meilleure façon d'imprimer des variables à notre consul au lieu d' utiliser alert. Donc, jusqu'à maintenant, nous avons dit test d'alerte et puis quand nous actualisons notre page, cela nous ennuie avec cela. Et chaque fois qu'on se rafraîchit, ça nous ennuie avec ça. Et vous savez, au début, quand vous démarrez JavaScript, ce n'est pas une grosse affaire. Mais vous ne voyez pas vraiment cette fonctionnalité dans la nature. Les gens n'utilisent plus trop souvent les alertes. Sauf si c'est comme, Oh, tu as commencé à écrire un post et puis tu as appuyé sur le bouton Retour. Vous êtes sûr ? Parce que que tu veux vraiment partir ? C' est une chose totalement différente, en fait. Juste une sorte de ressemblance. Donc ici, ce que nous voulons faire, c'est juste enregistrer quelque chose à notre consul ici. Et donc quel que soit le javascript re nous ici, n'importe quoi. Ça pourrait être littéralement n'importe quoi. Nous voulons juste le mettre dans la console que nous pouvons voir ce que c'est, et c'est un moyen très, très utile de déboguer votre JavaScript. Alors allons de l'avant et créons une variable. Et je vais dire que mon nom est Caleb Tallinn et de notre profession. Je suis professeur de métier. Oui, c' est tout à fait vrai. Aussi développeur Web, Donc enseignant et développeur Web. Et débarrassons-nous de cette alerte. Et disons que vous avez juste à mettre votre chapeau d'imagination ici une seconde. Mais disons que nous avons 10 000 lignes de JavaScript et que nous ne savons pas quelle est la valeur du nom actuellement. Et donc nous avons une ville de code, et ce que nous allons faire c'est que nous allons juste faire semblant que c'est bien là, et nous ne pouvons pas vraiment y accéder facilement, mais nous voulons voir ce que c'est. Donc, oui, on pourrait faire le nom d'alerte, et quand je viendrai ici, ça me dira ce que c'est. Mais c'est ennuyeux. Et si vous étiez dans une boucle, on parlera de boucles plus tard. Cela pourrait s'exécuter pour 100 1000 générations. Il va juste continuer à vous alerter encore et encore et encore et encore et encore. Votre navigateur peut même planter à partir de celui-ci. Qui sait ? Ce n'est pas une bonne façon de vivre votre vie. Une meilleure façon de vivre votre vie comme Allons ici et disons, consul dot Log. Et ensuite on pourrait mettre tout ce qu'on veut ici. Donc, disons le nom et ensuite une virgule et mettons la variable de nom dans l'année afin que ce soit réellement mettre le nom de Colon et donc vous pouvez voir que c'est une chaîne et c'est une variable. Allons-y et rafraîchissons votre page ici, et je vais devoir le rendre un peu plus petit. Merci. Donc, nous pouvons voir le nom Caleb Tallinn, et il exécute en ligne. 29 du fichier appelé 60 Underscore console underscore log dot html Et si je clique dessus, il me dira exactement où cela est exécuté. C' est un excellent moyen de déboguer votre code. En fait, c'est juste un très bon moyen de comprendre ce qui se passe dans le code. En général, allons de l'avant et tapez profession ici et encore. Je viens d'ajouter une virgule et on peut voir ici. Ça dit. Mon nom est Caleb Tallinn et professeur et développeur Web est ma profession alors aller de l'avant ? Nous allons probablement utiliser le journal de la console beaucoup plus souvent que ce que nous allons utiliser. Alert Alert est juste un peu odieux, et ça craint de devoir cliquer dessus tout le temps. Et c'est comme, Hey, voici alerte. Ok, voici un autre clic d'alerte. OK, voici un autre clic d'alerte OK, et juste il obtient un peu de manane comme un peu trop, d'autant que vous commencez à écrire de plus en plus de code. Et le bon côté à ce sujet est que lorsque vous écrivez du code qui va sur un site Web en direct, il ne va apparaître que dans votre console. Donc si je me débarrasse de ce conseil ici et que je me rafraîchis, rien ne se passe. Lisa semble que rien ne se passe. Mais si je clique droit, inspecte, va dans mon conseil, ça continue orteil arriver. Et donc vraiment seulement un développeurs va jamais voir cela. Et si vous testez quelque chose en production sur un site Web en direct, vous pouvez toujours utiliser cette méthode. Maintenant, il y a quelques autres que vous pouvez utiliser pour que nous puissions faire avertissement de point de console, danger étranger qui est allé en minuscules et je veux majuscules Ah, celui-ci va avertissement jaune. Un danger étranger. Et nous pourrions aussi le faire. Consul, faisons cette erreur d'erreur de point d'avocat inférieur, et nous allons juste le rythme encore et encore. Et parce qu'ils sont tous dans leurs nouvelles lignes, ils n'ont pas besoin d'un point-virgule. Mais jetons-le là de toute façon. Et maintenant, nous allons voir un avertissement, un journal de console régulier et une erreur. Et c'est là. Nous avons un avertissement. Un danger étranger. Mon nom est Caleb, l' appelant un professeur, un développeur Web, et aussi erreur, erreur, erreur, erreur et aussi les lignes respectives qu'ils ont tous lieu en ligne. 28 9 29 et ligne 30. Donc c'est une meilleure façon de vivre. Votre vie JavaScript est d'utiliser le journal de la console. Vous n'allez pas utiliser l'erreur Console War Council trop souvent. Généralement, nous utilisons simplement le journal de la console. Maintenant, si vous venez d'un autre langage de programmation, c'est très similaire à la fonction d'impression. Donc, si vous utilisez Python, par exemple, c'est comme print. Si vous venez d'un énorme arrière-plan P, c'est comme dire quelque chose d'écho et la façon Javascript est simplement rejetée. Il l'a fait. Ah, consul dot log. Donc, encore une fois, nous allons utiliser le journal de la console beaucoup plus, donc vous allez vouloir vous assurer que vous savez comment ouvrir à nouveau ce consul dans votre page. C' est son clic droit. Inspectez bien. En général, ouvrez d'abord vos éléments, et il vous suffit de cliquer. Consul. Parfois, vous devez aller ici et cliquer sur Consul, selon la taille de votre écran. Ah, mais il y a toujours un onglet consul là-dedans, et vous pouvez toujours l'ouvrir et voir ce que fait le code s'il vous donne avertissements, journaux ou des erreurs. 8. Choisir des éléments HTML: Bonjour et bienvenue dans cette leçon. Nous allons entrer dans une partie de la raison réelle pour laquelle nous apprenons JavaScript et c'est de modifier des éléments HTML. Et donc la première chose que nous voulons faire est de créer une balise de script. Nous avons toujours besoin que le script soit juste au-dessus du corps. Oh, au fait, la raison pour laquelle c'est au-dessus du corps et pas dans sa tête. Eh bien, nous avions l'habitude de mettre javascript dans la tête, mais maintenant nous mettons javascript au bas de sa page afin que tout le lait supplémentaire HD décharger. Tout d'abord, nous le mettons au bas de la page de sorte que, par exemple, si nous avons et h un dans le monde bonjour ici et nous venons de rafraîchir votre page, nous voyons bonjour monde. Et fondamentalement, si nous allons utiliser des éléments et JavaScript, cela doit exister en premier. Le code HTML doit être là avant le chargement du JavaScript. Et dans certains cas, si vous mettez javascript au-dessus, le javascript se chargera. Il va alors essayer de chercher un H appelé Hello World ou a un texte de bonjour monde dedans et il ne le trouvera pas parce qu'il n'a pas été chargé. Et oui, oui, une ligne peut faire une différence. Donc, dans la plupart des langages de programmation, généralement un programme s'exécute de haut en bas. JavaScript n'est pas différent. Il va de haut en bas. Et donc on va mettre bonjour World ici. Ah, et donnons ceci un I. Donc, c' est juste un HTML de base et j'ai un cours HTML si vous avez besoin d'un peu de mise à jour HTML rapide appelé le développeur HTML ultime. Et donc, donnons juste un test. Maintenant. Quand on nous sauve et nous rafraîchit, cela ne va rien faire. Ça ne fera rien pour nous. Et donc ce que nous devons faire, c'est que nous devons apprendre à sélectionner réellement cet élément et ensuite pouvoir le modifier un peu. Et donc JavaScript est largement connu pour travailler avec le balisage HTML et X HTML essentiellement tout ce qui a des balises comme celle-ci. JavaScript est assez bon pour travailler avec, presque comme il a été conçu pour fonctionner de cette façon. Il existe donc de nombreuses façons de sélectionner un élément HTML ou un groupe d'éléments ou comme tous les éléments H sur une page. Mais on ne va pas faire ça. Nous allons juste rester avec quelque chose de base appelé get element par I D. et donc ça ressemble à ceci. C' est Ah, déplacez ça. Documents point obtenir élément par i d. Et puis nous avons juste mis l'idée ici, et donc ce i d correspond au test, et c'est là-haut. Et si on nous sauve à nouveau, on ne verra rien se passer. Peu importe combien de fois vous actualisez tout ce qu'il fait est d'attraper cette note d'élément. Donc, cela s'appelle un noeud. Nous devons réellement stocker cela dans une variable. Alors allons de l'avant et mettons ceci dans une variable appelée test. Et encore une fois, si on rafraîchit ta page, rien ne se passera. Mais que se passe-t-il si on passe à notre test de type consulaire ? Oh, regarde ça, dit H. One avec une idée de tests. Et c'est en fait la sélection pour nous. Regarde ça. Donc déplacé vers le bas. Rien ne monte, et il l'a choisi pour nous. Maintenant, on peut faire des choses. Donc, si nous avions point, nous pouvons voir toutes sortes de choses différentes ici et c'est là que JavaScript arrive à être. Un très, très grand monde. Il y a tellement de choses en fait, jusqu'à présent, nous regardons les écouteurs d'événements, plus d'écouteurs d'événements, plus d'écouteurs d'événements, plus d'écouteurs d'événements. Et ça continue à aller et à aller. On peut changer ce style. On peut changer la balise de titre. Si nous voulions l'animer, nous pourrions lui donner un nom de classe ou supprimer un nom de classe. On pourrait faire toutes sortes de choses ici. Mais allons de l'avant et comprendre ce que le Texas et ceci est juste point texte intérieur et cela va juste nous donner la taxe. Nous pouvons également le faire avec HTML. Nous faisons point HTML interne et donc nous pouvons voir que cela dit maintenant bonjour monde, sachant que nous pouvons maintenant aller ici et dire point de test inter html et c'est si nous voulons écrire HTML afin que nous puissions dire, euh, faire un Bien que ce soit dépréciant. Faisons une prise sous-jacente de toute façon depuis deux comment bas slash vous monde et allons de l'avant et nous sauver et voir ce qui se passe. Bon sang ! Regarde ça. Il l'a souligné pour nous. Mais si nous allons voir réellement la source de la page, il n'y a pas de soulignement. C' est tout. JavaScript. Donc ce que Javascript a fait a été dit, Hey, attrape ce noeud. Prenez cet élément H un, celui-ci ici et changer l'Inter html. Maintenant, ce que nous pourrions faire est que nous pourrions stocker les vieux trucs, aussi, donc nous pourrions dire que l'Inter html va être élevé. Bienvenue aux débutants de plancher JavaScript, mais allons de l'avant et stockons les vieux trucs. Faisons de notre ancien texte. Faisons que le cas de chameau soit égal à test point inter html, et cela va juste saisir cet inter HTML et le stocker dans une variable et sera en mesure d'y accéder via une console. Alors allons-y et sauvegardons ça. Salut, Bienvenue sur JavaScript pour les débutants. Et si nous essayons d'accéder à ce bowling ici appelé vieux texte, nous devrions juste pouvoir écrire. Rendons ça plus grand. Eh bien, j'ai ah, bonjour. Il est là. C' est les vieux trucs. Nous avons stocké les vieux trucs dans une variable avant de les changer. Et maintenant, nous pouvons réellement le changer aussi, parce que nous avons toujours accès à tester en tant que nœud. Allons de l'avant et changeons le texte intérieur à l'ancien texte. Et maintenant, nous utilisons des variables assez efficacement à ce stade. Et en même temps, nous saisissons aussi tous ces éléments HTML ce noeud et nous disons, Hey, ouais, ouais, je comprends que vous vouliez dire bonjour, monde, mais, hey, quand la page se charge et contre le JavaScript fonctionne réellement un peu de magie et le changer pour nous,c' nous, est ce que Javascript a fait pour nous. Maintenant encore une fois, il y a beaucoup de choses différentes que nous pouvons faire sur un nœud HTML, donc nous pourrions taper un point de test et ensuite nous pourrions littéralement simplement faire défiler cela pendant jours et des jours et des jours et des jours. Et vous pouvez voir cette liste continue et continue et sur lui. Et donc JavaScript est un monde vraiment grand en tout. Honnêtement, nous n'allons pas apprendre sur toutes les choses ici parce que nous allons rester ici pendant très, très longtemps. Ma méthodologie d'enseignement est de vous apprendre comment apprendre efficacement de sorte que si sur la route vous travaillez dans une entreprise et qu'ils utilisent quelque chose appelé défiler vers Eh bien, vous savez comment accéder à défiler et vous savez comment comprendre ce que c'est. Même si nous ne l'apprenons pas dans ce cours maintenant, nous allons apprendre beaucoup dans ce cours. Mais il n'y a pas de moyen possible d'apprendre chaque chose. Donc, ce que je voudrais que vous fassiez comme, ah, petit test un peu, un peu de mains sur l'expérience de création d'un nouveau fichier html et juste de créer n'importe quelle balise Il n'a pas besoin d'être dans une église. On lui donne un ni de quelque chose. Peu importe ce que ces idées tant qu'il correspond à cette valeur ici. Pas celle-là. C' est le nom de notre variable. Mais celui-ci ici et celui-ci ici, ils doivent correspondre. Donc, créez cet élément, puis sélectionnez le nœud avec l'élément get par I d Remember, nous avons utilisé des documents dot get éléments par idée. Nous parlerons plus de ce que ce point signifie sur la route quand nous entrons dans le javascript plus avancé et puis juste changer le html interne, peut-être le donner souligné, peut-être en italique, peut-être le rendre audacieux. Vous faites tout ce que vous aimez ce que vous écrivez n'importe quel HTML que vous voulez dedans tant que vous utilisez inter html. Et si jamais vous allez juste changer l'inter tax, vous pouvez toujours simplement faire du texte intérieur. Et puis votre navigateur n'a pas besoin d'analyser et de rendre un tas de JavaScript ou pas JavaScript html. Il pourrait simplement faire du texte régulier, ce qui est en fait beaucoup plus efficace. Vas-y, donne-lui un coup de feu. Si vous êtes coincé, laissez une question ci-dessous et je suis heureux de vous aider. Sinon, passons à la leçon suivante. 9. Une façon de partager du code: Ok, parlons d'un moyen pour vous de partager votre code. C' est relativement simple. Donc si vous n'utilisez pas get si vous ne savez pas que je reçois ou que je reçois Hub, je ne vais pas vous forcer ça maintenant. C' est bon de savoir, mais en ce moment, si vous ne le savez pas, sachez simplement qu'il existe une meilleure façon de partager HTML CSS et JavaScript, et c'est sous la forme de stylo de code. Donc, si vous allez à code pen dot io et vous pouvez cliquer sur le bouton, cela a juste commencer le revêtement. Et vraiment, tout cela va faire pour nous est de créer trois sections où nous avons HTML, CSS et JavaScript, et nous pouvons littéralement redresser n'importe quel HTML CSS et JavaScript dans votre que nous voulons. Et puis nous pouvons enregistrer tout ce code, et ensuite nous pouvons le partager avec quelqu'un d'autre afin qu'ils puissent voir le code aussi. Alors allons-y, et je vais mettre chacun ici et dire Salut, mon nom est Caleb, et ce que je vais faire, c'est que je vais javascript un peu, mais je D Span est égal au nom donc html ne regarde pas différent. Ah, le CSS. Changeons la portée. Changeons cette plage pour avoir une décoration de texte de sous-jacent Et dans le JavaScript, allons de l' avant et sélectionnons le nom comme un I d et le changer. On va créer une variable. On va l'appeler Nom est égal au document point Get, en fait, changeons son point de vue. Je n'aime pas vraiment ce point de vue. Faisons-le, oui, celui-ci est un peu mieux ici, et on peut aussi le faire un peu mieux, mais on n'a plus besoin de voir les C s. Ok, ça a l'air un peu mieux. Oui. On y va. D' accord. Document. Ne prends pas d'élément par i d c'est une affaire de chameau. Donc chaque mot qui n'est pas le premier mot a une majuscule. Nous voulons obtenir un nom qui correspond à cette idée ici le nom point Le texte intérieur est égal à et disons que cela a été détourné par mon chat nommé Zephyr. Et allons de l'avant et donnons un coffre-fort. Et Ono me demande de me connecter. Vous pouvez totalement vous connecter en créant le nombre. C' est complètement gratuit. Ok, donc je viens de me connecter, et on y va. Nous voulons juste changer le texte afin que nous l'enregistrons et vous pouvez voir dans mon L dit code pen dot io slash Caleb Holley et slash pen et puis un hachage, et vous pouvez en fait simplement copier et coller le code entier à quelqu'un d'autre. Donc, si j'ouvre ceci dans un nouvel onglet, il va enregistrer tout mon code ici. C' est plutôt cool. Et c'est donc un excellent moyen de partager votre code. Vous pouvez également le changer. Alors le nom a changé par mon chat. Et quand un rafraîchissement ici, il a également changé le nom Là, il est là. Maintenant, si vous travaillez avec le Consul Law, vous pouvez aussi ouvrir ce consul ici. Et vous pouvez conta log vraiment tout ce que vous voulez afin que nous puissions faire un nouveau test de journal de point de console , et il apparaît dans leur cool afin que vous puissiez collecter enregistrer à tout moment. Vous pouvez même prendre le code de quelqu'un et le fork, ce qui signifie fondamentalement, vous allez créer une copie dans votre compte de leur code afin qu'il ne change pas tout leur code , mais il est enregistré dans votre compte et vous pouvez comme ça et vous faites toutes sortes de choses. Vous changez votre vue, mais surtout vous pouvez prendre que vous êtes l. Et vous pouvez copier et coller. C' est deux amis. Vous pouvez poser une question avec une fille avec votre exemple de code ici comme un Caleb. Pourquoi ça ne marche pas ? Et tu pourrais mettre tout ton code là-dedans. C' est une super excellente façon de partager du code et de demander des commentaires et de demander de l'aide. Et enfin, lorsque vous créez un projet, si vous le souhaitez, vous pouvez toujours utiliser le stylet de code et simplement partager l'écran final. Vous pouvez prendre une capture d'écran de l'écran final et partager le stylo de code que vous comtez dans votre projet de partage de compétences. Bien sûr, si vous ne voulez pas utiliser le stylet de code, si vous ne voulez pas créer de compte, vous n'avez pas à le faire. Vous pouvez continuer à utiliser des fichiers HTML et JavaScript et prendre des captures d'écran. C' est tout à fait correct de juste une fois de plus. N' oubliez pas, vous pouvez toujours partager votre projet avec le reste du groupe et, surtout, moi. Je vais jeter un oeil à votre code et votre produit final, et vous savez que Si vous voulez des commentaires, je peux également vous donner des commentaires. Mais vous devez d'abord faire ce projet sur le partage des compétences et aller de l'avant. C' est certainement une bonne idée de mettre n'importe quel code que vous écrivez ici. Ah, dans un projet de partage de compétences pour que je puisse vraiment vous donner des commentaires à ce sujet. Je ne vais pas utiliser trop de stylo de code pendant le reste de ce cours. Je pensais juste que ce serait un excellent moyen de vous montrer comment vous pouvez partager votre code d'une manière agréable et propre. 10. Projet JavaScript Mini #1: Bon, jetons un coup d'oeil à notre premier mini projet. Il est temps de commencer à mettre en pratique certaines des choses que nous avons appris car quelle meilleure façon de mettre en pratique l'expérience que de l'expérimenter réellement ? Donc, nous avons appris un peu jusqu'à présent, et nous allons utiliser seulement quelques-unes des pièces que nous avons apprises. Et ce que nous voulons faire, c'est que nous voulons dans ce mini projet, concocter une chaîne et une variable ensemble. Et puis je veux que vous sortiez cette chaîne sur la page de cette variable finale. Je veux que vous affichiez cela sur la page en sélectionnant un élément et en changeant le HTML interne. Alors nous allons ah, écrivons vite ça. Numéro un. Créez un script. Vous pouvez attraper une chaîne et une variable ensemble Number deux, en utilisant point inter html et obtenir l'élément par I d. Changez le html interne d'un élément pour être ce que votre variable est. Donc c'est vraiment ça. Cela ne semble pas beaucoup au début, mais vous alliez le faire encore et encore et encore dans votre carrière de développement Web . Et donc c'est vraiment, vraiment une bonne pratique dès le brassard. Maintenant, si vous voulez voir la solution, continuez juste à regarder cette vidéo et je vais vous montrer exactement comment je le fais. Sinon, si vous voulez lui donner un coup de feu, il est maintenant temps de mettre la vidéo en pause et d'essayer de le faire par vous-même, ce que je vous exhorte fortement à faire. Essayez certainement de le faire par vous-même d'abord. Mais tu sais quoi ? Si tu n'as pas confiance en faire tout ça, c'est bon. Vous pouvez regarder ma solution, et ensuite vous pouvez lui donner un coup après, si vous voulez. Donc je vais en créer un H ici. Juste un gros SMS, et je vais dire que mon chat préféré est et ensuite ici, je vais mettre un peu de nom de chat, une idée du nom de chat, et ça va commencer par le nom Zephyr. Et quand je rafraîchis ma page ici, vous pouvez voir mon chat préféré est l'effort. Maintenant, ce que je veux faire, c'est que je veux échanger ses efforts contre autre chose. Maintenant, je vais prendre une route un peu plus compliquée ici, et je dois commencer par mon script, non ? Donc je vais commencer par une balise de script d'ouverture et de fermeture, et je dois sélectionner le nom de chat. Donc le nom de chat variable est égal à documents point Get élément par I. D. Nom de chat. Et si je sauve et me rafraîchis, vous verrez. Hé, il ne s'est rien passé. C' est prévu. Tout ce que nous avons fait était de mettre une note dans une variable. Et si nous faisons cela, si nous tapons le nom de chat, vous pouvez réellement voir qu'il est sélectionné années. Alors, nous allons charnières. Nom de chat et il est juste de sélectionner Zephyr. C' est ça. Maintenant, le but est de prendre fondamentalement une corde et peut Katyn huit à cette corde. Alors allons de l'avant et fait est une méthode un peu plus compliquée. Et appelons cette variable appelée Zephyr, et nous allons obtenir le texte intérieur du point de nom de chat. Et si nous faisons consul dot log est jamais et actualiser notre page ici, il dit effort juste comme ça . Juste là-dedans. C' est un peu squishy, mais bon, c'est OK parce que c'est juste pour le débogage de toute façon, donc nous avons son effort là-dedans, et c'est le texte actuel. C' est le texte intérieur actuel. Mais pour ce mini projet, nous voulons concocter. Besoin d'une chaîne et d'une variable. Donc, nous avons une très intimidation ici. Donc, nous pouvons Cat nommer la chaîne à elle. Alors, changeons nous. Nous allons l'écraser. Nous allons faire Zephyr est égal à Zephyr et nous allons cum une chaîne à elle. Donc, il va dire que mon chat préféré est Zephyr est égal à Zephyr, peu importe ce qui est actuellement. Donc c'est juste ce texte ici et Henry maintenant cette phrase ne va pas avoir de sens , parce que je suis pluriel. Je l'ai fait. Mais c'est bon. On n'a pas besoin de le faire pour le moment. On a juste besoin de faire en sorte que ça marche. Et donc allons de l'avant et tapez le nom de chat sur le texte intérieur point ou HTML interne est égal à souffrir, et donc cela devient un peu désordonné. Mais hé, allons nous rafraîchir dit que mon chat préféré est jamais et Henry maintenant, en fait, une meilleure façon de le faire n'est pas nécessairement l'emporter dessus. Ce n'était qu'un exemple. Nous aimerions probablement une nouvelle variable pour ce que l'on appelle les chats, et nous changerions aussi deux chats. Donc on va créer une nouvelle variable appelée « Quotidiens » a son nom là-dedans Plus et Henry. Donc si nous travaillons à travers cela à l'envers, nous avons des chats est égal à Zephyr. Qu' est-ce que jamais zéphyrs égal au chat nommé texte intérieur ? Eh bien, c'est en utilisant une variable appelée nom de chat. Nous savons que c'est cet élément ici et que nous obtenons cet intertexte. Donc nous savons que Zephyr est fondamentalement cette valeur ici. C' est à peu près ce que c'est. En fait, c'est exactement ce que c'est. C' est comme dire Zephyr, Katyn, Katyn, Huit et Henry. Et quand vous les assemblez, ça ressemble à ceci. Et c'est ce que dans ses e-mails H e va être, votre HTML interne va maintenant être un Zephyr et Henry. Et c'est comme ça que ça marche. Et si jamais vous avez besoin de remplacer des variables par des chaînes à revêtement dur comme des chaînes ou d'autres valeurs, c'est totalement correct. Honnêtement, tout ce qui vous aide à apprendre ça à votre manière, c'est bon, alors allons-y et sauvez-nous. Actualiser. Et nous pouvons voir que le nom de chat est encore ici nom de chat et son aime tout ça cool et c' est comme ça que nous le remplacons. Maintenant. Si nous voulions vérifier cela, nous pourrions toujours voir la source de la page. Et à notre avis, les sources de la page disent, mon chat préféré est Zephyr. Cependant, quand vous le visualisez réellement avec JavaScript activé, il dit, mon chat préféré est jamais et Henry. Ok, donc c'est comme ça qu'on ferait ça. N' oubliez pas, vous pouvez toujours créer un stylo de code, et vous pouvez le partager sur le partage de compétences dans votre projet. Ou vous pouvez simplement prendre tout votre code. Vous pouvez le copier et le coller là. Vous pouvez prendre une capture d'écran de la façon dont cela fonctionne. Vous pouvez en quelque sorte faire, ah, studio visuel sur la gauche, puis la sortie finale sur la droite. Vous pouvez prendre une photo sur grand écran de ça et juste le dire dans votre projet, et je peux jeter un coup d'oeil et vous donner des commentaires et de la haine. Si vous êtes coincé là-dessus, n'oubliez pas. Vous pouvez toujours laisser des questions, des commentaires et des préoccupations ci-dessous, et j'y arriverai dès que possible 11. Manipulation String: Hé, là. J' espère que vous avez apprécié ce projet. Nous allons en faire quelques autres sur la route et, ah, ah, nous allons en quelque sorte apprendre un tas de choses entre eux pour que nous puissions, vous savez, apprendre un peu de pratique, apprendre un peu de pratique, un peu de pratique petit. Je pense que c'est une très bonne façon d'apprendre JavaScript. Et donc dans cette vidéo, nous allons en apprendre davantage sur la manipulation de cordes, et cela semble fantaisie, mais vraiment ce n'est pas le cas. Il est en fait super commun en JavaScript de sorte que la manipulation de chaîne est fondamentalement que nous prenons une variable qui est comme une phrase ou peut-être un nombre, et nous avons manipulé. On le change. Nous le forçons à être quelque chose de différent, et il y a plusieurs façons différentes de nous faire. Mais dans cette vidéo, nous allons juste passer en revue quelques-unes d'entre elles. Donc, nous allons passer en minuscules en majuscules, fractionner la tranche et la sous-chaîne jointes. Il y en a beaucoup plus, mais je pense que c'est un très, vraiment bon moyen. Est-ce que vous vous habituez à la façon dont nous pouvons manipuler certaines données ? Donc, d'abord et avant tout, créons un H avec un i d de phrase et allons de l'avant et mettons un peu de Lauren Ipsum ici. Et quand je dis ça, ça va paraître ennuyeux. Et c'est bon. Nous n'essayons pas de rendre ça agréable en ce moment. Nous essayons simplement de faire du javascript. JavaScript ne signifie pas nécessairement les choses. CSS signifie que les choses sont belles. JavaScript signifie que les choses sont fonctionnelles. Et alors, allons de l'avant et créons un script ici. Et nous voulons saisir tout ce texte ici. Tout ce Laura MIP. Hum, donc nous pourrions savoir que nos phrases sont égales à et ensuite nous pourrions être plus faibles MIP, hum là-dedans. Ou nous pourrions le faire de la manière javascript et dire que les documents obtiennent l'élément par i d phrase. Appelons ce nœud de phrase, et je suis assez pour le rendre plus petit. Espérons que c'est toujours bon à voir. Et puis faisons de nos phrases. Aigle à phrase noeud point texte intérieur et allons de l'avant. Il suffit de consigner ce journal de points du conseil La phrase va être une phrase. Et lorsque nous actualisons et faites un clic droit, inspectez chaque clic, inspectez et allez à notre conseil. Ah, c'est là. Nous voyons tout ce texte grossier ici, et celui-ci pourrait en fait être mieux si nous changeons la vue à Let's Changeons a to bottom. Et donc nous avons une phrase ici et c'est un tas de trucs Lauren Ipsum pour qu'on puisse aller avant, de l' avant,se débarrasser du journal de la console On sait que ça marche et que notre phrase est en fait, une chaîne. Comment savons-nous que c'est une ficelle ? Eh bien, nous pourrions toujours faire le type de phrase nous dit que c'est une chaîne qui est assez cool. Nous pouvons aussi simplement taper une phrase et parce qu'il a des citations autour, vous savez, c'est une chaîne, alors nous allons juste clarifier cela et mettons la phrase là-bas et vous pouvez voir que c'est une sorte de s'y mettant en évidence. Mais il ne fait rien pour l'instant. Tellement cool. Nous avons notre texte de phrase maintenant. Et si tu voulais tout faire en majuscules ? Nous allons faire var La phrase supérieure est égale à envoyer en début de majuscules. C' est littéralement tout ce que nous avons à faire, et nous pouvons réellement tester cela dans notre consul, aussi nous pourrions envoyer le goujon vers le haut, et vous pouvez voir que c'est un sentiment d'auto pour moi, puis ouvrir et fermer le support. Et ce que cela dit, c'est que c'est une fonction. Nous en apprendrons plus sur les fonctions en cours de route. Mais fondamentalement, cela va prendre notre phrase, le texte de Lauren Ipsum, et il va en faire quelque chose, et c' est ce que cela signifie. Ces crochets d'ouverture et de fermeture ou ces parenthèses signifient qu'il va en faire quelque chose . Allons de l'avant et frappons, entrez et regardons ça. Tout est en majuscules maintenant, tout ça. Donc, nous savons que cela fonctionne, et nous pouvons simplement le garder là-dedans. Nous pouvons également faire de notre phrase inférieure et allons de l'avant et faire la phrase point à minuscules. Et en passant, nous créons de nouvelles variables ici basées sur ce que cette chaîne est cette variable. Donc, on ne remporte pas la sentence encore et encore. On prend la même phrase, qui est cette valeur ici, les MiPS de Laure Um et on dit hé, faites en majuscules. Ça ne marchera pas non plus. Hey, faites-le en majuscules. Et puis aussi hey, faites en minuscules et donc fondamentalement, nous copions les données encore et encore sans les remplacer. Donc, si jamais tu veux voir ça marcher, on pourrait y aller. Copions ça. Prenez tout ce que Copy Coller et tapons une phrase inférieure. Maintenant, nous pouvons voir que tout est en minuscules. Le premier l devrait être en majuscules. Ce n'est pas le cas. C' est plus bas. affaire est juste ici. Devrait être en majuscules. Ce n'est pas le cas. C' est en minuscule. Et ça a fonctionné. Et si on voulait juste avoir, genre, les 10 premiers caractères d'une phrase ? Pour quelque raison que ce soit, nous voulons juste le 1er 10 et c'est en fait étrangement utile. Vous ne penseriez pas que vous utiliseriez quelque chose comme Juste obtenir le 1er 10 ou le 1er 4 mais oui, nous l'utilisons un peu en JavaScript. Alors allons de l'avant et créons une sous-chaîne. Donc, nous allons appeler ce 1er 10 Chars est égal à cela signifie caractères phrase point sous chaîne, et cela va prendre deux paramètres optionnels ici, vraiment hors des premiers. Pas vraiment option. Alors faisons 10 et ne faisons pas ça ici. Allons-y et faisons-le juste ici où nous pouvons expérimenter pour voir ce qui revient ici, dit M. Dolar. Assis. Omettre. Alors, ce que ça fait c' , est de dire, Hey, Hey, commence au personnage 10 et attrape tout le reste. Donc nous avons 123456789 10. Donc, il a fallu ces 10 premiers caractères et complètement ignoré eux, et il a commencé ici M dolar sit omit, probablement massacrer ce latin, d'ailleurs. Et on peut vraiment le voir. C' est ce qu'il revient ici. M dolar Asseyez-vous dedans. Cool. Et c'est ainsi que nous utilisons la sous-chaîne. C' est plutôt cool. Je ne savais pas vraiment que le conseil ferait ça, mais ça me donne d'une longueur facultative. Combien de caractères voulons-nous pour pouvoir commencer au 10e caractère et disons que nous voulons juste les 10 caractères suivants. Il y a 10 11 12 13 14 15 16 17. On pourrait faire le suivant. C' est un 30. On y va. Nous avons donc entre le personnage 11 et le personnage 30 qui se présente ici. Et c'est donc ce que fait la sous-chaîne. Et c'est vraiment utile. Parce que parfois, tu sais, peut-être qu'un utilisateur saisit que toi, Earl, et ils ne mettent pas www en face. Et peut-être que votre site Web nécessite cela ou http afin de le transformer en un lien approprié. C' est là que nous faisons quelque chose comme ça. Alors allons-y. Ça va être les 10 premiers caractères. Faisons zéro et 10 et faisons zéro et 10 ici parce que c'est fondamentalement un aperçu en direct . Zéro et 10. Nous voyons Laura Ipsen vous permet 11 Lauren Ipsum 1er 10 Et parce que cette variable dit 1er 10 caractères, faisons 11 premiers caractères. Ok, ces deux prochaines vont introduire un nouveau type de données. Donc, nous connaissons les chaînes et nous connaissons les nombres. Nous n'avons pas trop utilisé les chiffres, mais nous les connaissons maintenant. Que se passe-t-il si nous voulions obtenir tous les mots individuels ici ? Eh bien, en javascript, nous avons cette méthode appelée Split, et fondamentalement nous pouvons lui dire de diviser n'importe quoi. Alors divisez n'importe quoi ici et on peut dire quoi diviser. Donc nous disons divisé sur chaque phrase. Ce que cela va faire, c'est prendre chaque espace ici, comme ce que nous avons ici. Donc, il va juste correspondre à ce qu'il y a dedans, et cela va transformer cela en une liste va le transformer en un tableau. Alors allons de l'avant et faisons un exemple en direct. Ne faites pas de division de points de phrase et partageons sur chaque espace. Et nous allons faire des mots est égal à et regarder cela. Nous avons tous les mots différents dans votre et si je le fais plus grand, nous avons tous les mots différents et nous pouvons réellement ouvrir et fermer ceci et cela va nous montrer tous les mots. Donc nous avons une liste maintenant. Maintenant, ces air ont appelé une augmentation et JavaScript cet appel et un rayon me permettent de taper ça. Il s'appelle un tableau Hurry array, Et donc vraiment, tout dans le tableau est une liste géante de nombres ou de chaînes ou d'objets, que nous n'avons pas appris, ou toutes sortes d'autres types de données et de types de données qui nous n'avons pas encore appris. Et il peut les tenir tous dans une liste et il maintiendra cet ordre. Donc on peut voir Florham Ipsum Dolar a dit que j'ai rencontré ainsi de suite et ainsi de suite et ainsi de suite. Donc maintenant, nous pouvons aller ici et nous pouvons dire que Vier tous les mots est égal à la phrase point divisé et le diviser sur chaque espace. Et allons de l'avant et faisons consul dot consigner tous les mots. Je n'ai pas donné cela une actualisation et ce journal de console pour moi et cela m'a donné tous les mots. Maintenant, où est-ce utile ? l'heure actuelle, aux États-Unis, ce n'est pas très utile. Mais sur la route, cela pourrait être très, très utile. Nous pouvons utiliser une chose appelée une boucle quatre et boucle à travers chacun et effectuer en action sur eux. Nous n'allons pas entrer dans cela tout de suite parce que c'est un peu plus compliqué que ce que nous aimons généralement faire au tout début de JavaScript. J' ai juste l'impression que ça pourrait submerger certaines personnes. Cela m'a certainement submergé quand j'apprenais JavaScript dans la journée. Et donc j'aimerais garder ça, vous savez, gentil et simple. Apprenez pas à pas, mais d'accord, donc nous avons tous ces mots différents ici et disons, Disons que pour une raison quelconque, nous voulions les réconcilier tous ensemble. Mais nous ne voulions pas le retrouver ensemble en utilisant un espace simple. Nous ne voulons plus que la phrase ressemble à une phrase normale. Peut-être voulons-nous mettre des parenthèses autour de chaque mot. Eh bien, on pourrait faire ça. On pourrait faire loin. On va joindre les mots ici et on va les regrouper ensemble. Donc nous allons prendre tous les mots et non pas la phrase. Nous voulons prendre celui-ci parce que c'est la liste. Tous les mots ne se joignent pas, puis il faut une chaîne. Que veut-on y joindre ? Eh bien, si nous faisons cela et que c'est en fait juste sauver ceci et voyons quels mots de crochets ressemble un regard de ces mots de crochets a toutes les différentes parenthèses autour d'elle, à l'exception du 1er 1 dans le dernier. Eh bien, devine quoi ? Nous pouvons faire un peu de corde et de chat nation ici pour que nous puissions ajouter un crochet là et nous pouvons faire un crochet ici et rafraîchissant. Allons vous tenir des mots et ha ha ! Regarde ça. Tous nos mots ont des crochets autour de lui maintenant. Et juste pour le plaisir. Que faire si nous avons fait le noeud de phrase point dans son texte est égal aux mots entre crochets. Hé, regarde ça. Donc maintenant, nous faisons quelque chose avec notre page. C' est plutôt cool. Donc je vais supprimer ça parce que je ne veux pas encore changer ça. Et il y en a un de plus dont je veux parler. Et donc, vraiment, quand on regarde ça et ça, on se sépare et on se joint. Donc Split va prendre une phrase et la diviser en fonction de ce que vous voulez la diviser par . Dans ce cas, nous avons utilisé juste un espace régulier, puis nous avons pris n'importe quelle liste de mots et nous avons dit, en fait, les joindre tous ensemble avec autre chose. Et donc ça a l'air un peu bizarre. Nous n'avons pas vraiment besoin d'utiliser des parenthèses fermant comme ceci. Nous pourrions si nous voulions utiliser un tas d'espaces, et c'est aller de l'avant, rafraîchir et taper des mots entre crochets et regarder cela pour que nous puissions le faire aussi. Et donc joindre et diviser travaillent généralement en tandem ensemble. Et il y en a un de plus ici. Et si nous allons de l'avant, vraiment nous rafraîchir. Et faisons tous les mots. Nous avons cette liste de mots ici. Et si on voulait juste les 3 premiers mots ? Alors allons de l'avant et tapez tous les mots dot slice et cela va dire que c'est une fonction. C' est ce que veut dire le F. C' est une fonction. Où devrait-il commencer et où devrait-il se terminer ? Commençons à zéro, car quand il s'agit d'ordinateurs, nous commençons à compter à zéro. En tant qu'humains, on commence à compter. 12345 ordinateurs. ordinateurs ne vont pas ? 012345 ? Parce que pour un ordinateur, zéro est un nombre pour un humain. Zéro ne veut rien dire. Il n'y a littéralement rien là-bas. Alors numéro zéro et passons au numéro trois. Et ça va nous donner les 3 premiers mots. Laura, euh, Epsom Dolar, alors ? Et puis nous pouvons aller de l'avant dans notre code, et nous pouvons dire loin, trois premiers mots sont égaux à la phrase. Non, ce n'est pas juste. Je me suis déjà trompé. Tous les mots point tranche et juste prendre le 1er 3 Il suffit de saisir une tranche de celui-ci. Donc on veut juste trancher ça. c' était Sic' étaitune tarte géante, on veut trois morceaux. Alternativement, nous pourrions aussi dio mots dot slice. Et que se passe-t-il si on venait de dire « Commencer à celui-là » ? Donc six en ont fait un de trop. Je suppose que sur celui-là, parce que je ne les ai pas comptés, dit Ahmed. Tous les mots point tranche commencent au numéro cinq et vont à la toute fin afin que vous puissiez voir ici. Ah, il y a 20 articles dans cette liste. Encore une fois, nous allons parler plus des listes en bas de la route. Ils sont super utiles, en fait. Pas super compliqué non plus, non plus, mais ça va commencer au numéro 5, donc ça va commencer le 012345 et c'est celui qu'on lui a dit de commencer. Commencer sur la tournée consécutive aurait probablement dû utiliser des mots que je peux réellement lire. Euh, oui, il y en a. Ça commence en tournée consécutive, et maintenant ce qu'on peut faire c'est dire, Hey, on veut juste chaque mot entre le cinquième mot et le dixième mot. Nous les voulons tous et nous voulons les mettre dans une phrase. Donc maintenant, nous pouvons faire quelque chose d'assez soigné avec ça. Alors allons-y. allons saisir les mots du milieu loin est égal à tous les mots tranche de points et nous voulons saisir le numéro cinq au numéro 10 et alors nous pouvons faire de notre je ne l'appelle pas il fait phrase mots du milieu point rejoindre et nous allons les rejoindre avec un juste un espace régulier. Et puis allons de l'avant et faisons la phrase. Le texte interne de point de noeud est égal à faire une phrase, et c'est juste donner une rafraîchissement et regarder comment cela va prendre, probablement d'ici à ici ish je devine, parce que je ne compte pas les mots et il va remplacer ce texte avec ceux du milieu . Tutta comme ça. Il vient de les remplacer pour nous et encore une dernière fois. Si nous allons voir notre source de page Regardez cela. Nous avons tout ici. Mais hé, Javascript a dit non. Prenez le noeud de phrase, prenez cet intertexte afin que nous puissions travailler avec nous en tant que variable. Et donc nous avons une copie de la phrase ici. Une copie de la phrase ici, une copie de la phrase ici, ici et puis avec ceux-ci, nous pouvons faire différentes choses si nous le voulions, et comme à la fin où fondamentalement nous avons pris cette phrase, nous avons pris cette phrase. Nous avons repris tous ces mots et nous l'avons rompu en fonction de l'espacement. Et puis nous avons transformé tous ces mots en mots entre crochets. Donc il n'y avait plus d'espaces, juste des parenthèses partout. Et c'est là que le congé s'arrête parce qu'on n'a rien fait avec ça. Puis on a dit, prenez les 3 premiers mots et on a dit : Ok, Ok, eh bien, il y a une liste de mots ici séparés par l'espace. C' est ce qui se divise ici. Et nous avons dit : Prenez le 1er 3 Alors nous avons attrapé Laura Ipsum Dolar, et c'était les 3 premiers mots. Et puis on a dit : Nous ne ferons rien avec ça. Prenons les mots du milieu. Reprenons tous les mots. C' est tout ce Split sur l'espace, attrape le numéro cinq. Alors 012345 et puis ramasser jusqu'au 10e mot. Donc, 12 trois ou 89 et ensuite fait. Et puis on a dit, Hey, tu sais ce qui a saisi ces 10 mots et les a remis dans une phrase pour qu'on ne veuille pas une liste de choses. Nous voulons juste une phrase régulière et ensuite nous avons dit que je change ce texte, que je change pour que ces cinq mots soient. Et c'est là. Nous avons ces cinq mots comme ça. C' est donc une introduction de base dans la manipulation de chaînes. Maintenant, à ce stade, vous pensez probablement, Hey, Hey, ce n'est pas utile du tout. Mais dans les leçons à venir, nous allons en profiter. Donc, il est vraiment, vraiment bon de savoir que ceux-ci existent, même si vous ne les utilisez pas tous les jours est bon de savoir qu'ils existent. Maintenant, moi en tant que développeur a un développeur de pile complète qui inclut le front end. Je les utilise presque tous les jours. Mais, hé, si ça ressemble à beaucoup de pression, tu apprends toujours. JavaScript. Souviens-toi, tu apprends toujours. Vous êtes un étudiant de JavaScript. Tu n'as pas besoin d'être le meilleur. Tu n'as pas besoin de savoir tout ça. Votre tête peut toujours google il Conseil Pro. Tous ses développeurs senior, nous filles choses non stop toute la journée. Alors ne te sens pas mal si tu dois le google et enfin, n'as pas l'impression de devoir te souvenir de tout ça parce que, franchement, franchement, tu ne le fais pas. Vous avez juste besoin de savoir que ces types de fonctions existent. Donc c'est comme si vous vouliez prendre tous vos mots et le rendre majuscule, vous n'avez pas vraiment besoin de vous rappeler que c'est point à majuscules. Vous avez juste besoin de vous rappeler comment y accéder. Et donc, par exemple, nous pourrions faire un point de phrase et je viens de vous taper en majuscules et regarder ça. Cela me donne en majuscules, et tout ce que j'ai à faire est d'ajouter des parenthèses autour, et ça le fait pour moi. Et c'est comme un petit rappel tout le temps. Il est toujours là, et vous n'avez pas à ressentir la pression de tout savoir tout de suite. Maintenant, j'apprécierais vraiment si vous pouviez donner une chance à ça. Il suffit de passer par chacune d'elles, écrire à la main. Je sais que ça peut sucer écrire des choses à la main, mais si tu l'écris à la main, tu vas créer de la mémoire musculaire. Et un jour, quand ton cerveau est tombé et que tu ne t'en souviens pas vraiment, tu sais ce que tes doigts allaient commencer à taper et ils savent ce qu'ils font. Tu penses à autre chose et tes doigts air juste faire le travail, et ça marche vraiment comme ça. Alors allez-y, donnez ça un coup de feu, et puis nous reprendrons la leçon suivante chaque fois que vous serez prêt et apprenons à accepter des commentaires des utilisateurs et à en faire usage. 12. Accepter des entrées utilisateur: Bonjour, Bienvenue. J' espère que je ne t'ai pas perdu sur la vidéo de manipulation de cordes. Je sais que c'était un peu long. Il y a beaucoup à apprendre là-dedans, mais c'est aussi très, très important à savoir dans cette vidéo que nous allons apprendre à accepter les entrées des utilisateurs sous la forme d'une invite. Et donc quand nous ouvrons une page, elle peut demander votre nom ou un âge ou quelque chose comme ça, et ensuite vous pouvez réellement travailler avec ça. Et puis vous pouvez le transformer en majuscules ou minuscules ou quoi que ce soit comme ça. Donc, j'ai juste un fichier HTML ici, et je vais créer un nouveau script. Et déplacons ce genre de au centre de l'écran ici et créons un nouveau script et nous allons utiliser une toute nouvelle fonction. Ça ressemble beaucoup à une alerte, mais ce n'est pas alerte. Il s'appelle Prompt, et cela va juste inviter quelqu'un à entrer pour que nous puissions dire prompt et quel est votre nom ? Et quand je rafraîchis ça dit : Quel est ton nom ? Je vais taper Caleb. Rien ne se passe. C' est parce que tout ce qu'il a fait a été demandé mon nom. Je ne l'ai pas stocké dans une variable. Je n'ai pas forcé le HTML à changer. Nous n'avons pas mis à jour le modèle d'objet de document. On n'a rien fait. On vient de dire : Quel est ton nom ? Et c'est tout. Donc, alors que c'est une fonction cool, ce n'est actuellement pas utile. Alors allons-y et rendons-le utile. Donc, sauvegardons notre nom est égal à demander quel est votre nom ? Et puis nous allons de l'avant et le journal de console que consul dot log votre nom est et nom actualiser. Mettez Caleb une fois de plus. Ha. Ton nom est Caleb comme ça. Et c'est ainsi que vous demandez à quelqu'un de vraiment n'importe quel type de données. Maintenant, la grande chose à prendre note ici est que chaque fois que vous utilisez prompt, l'entrée revient toujours sous forme de chaîne. Donc, si vous essayez d'ajouter des nombres ensemble, donc si vous devez promettre, comme entrer le numéro un, puis entrer le numéro deux, puis peut-être le numéro trois, vous pourriez ne pas obtenir les résultats que vous recherchez. Et à titre d'exemple, allons de l'avant et tapez le nom et nous pouvons voir qu'il a des guillemets autour, donc nous savons que c'est une chaîne, mais nous pouvons toujours taper le type de nom, et cela me dit que c'est une chaîne. Alors allons-y et débarrassons-nous de cela et injectons ce changement. Ces soulignements ici de l'entrée personnalisée à quelle que soit la valeur que quelqu'un a mis là. Alors, quand je dis quel est ton nom ? Et je tape Caleb, ces traits de soulignement. Ça devrait changer à Caleb. Alors les premières choses d'abord. On doit prendre ce mot cette h 3. Allons de l'avant, créez une nouvelle variable. Ça s'appelle H trois notes. Je suppose que les documents doivent obtenir Elham signifié par i d. et nous allons utiliser une entrée personnalisée à nouveau. Ça correspond juste ici. Et on pourrait dire que les h 3 ne savent pas. Le texte intérieur néerlandais est égal à quel que soit le nom. Allons de l'avant et rafraîchissons et disons : Quel est ton nom ? Mon nom va être Caleb. Ah, regarde ça. Ton nom était ou est Caleb. C' est changer ce que c'est parce que je ne suis pas passé. Je suis présent. Maintenant. Et si nous voulions faire une sorte de manipulation de chaîne là-dessus ? Et si je voulais m'assurer que l l'entrée tout est toujours en minuscules. On pourrait faire deux choses si on sait que c'est toujours, toujours, toujours, toujours, toujours, toujours,toujours en minuscules. On pourrait faire deux choses si on sait que c'est toujours, toujours, toujours, toujours, toujours, toujours, Nous pourrions le changer tout de suite parce qu'un nom est égal au nom point à minuscules. Et chaque fois que nous référençons le nom sur la route, comme ici, il sera toujours en minuscules. Alors donnons un exemple à ceci. Caleb dans toutes les majuscules et j'ai frappé OK et il apparaît en minuscules. C' est ce que nous attendons maintenant. Si vous ne voulez pas que cela soit toujours en minuscules et que vous voulez préserver les entrées de l'utilisateur et que vous vouliez juste être en minuscules, juste une fois que vous pourriez faire point en minuscules ici, et alors nous pourrions tous ragoût comme un journal de console, et nous pouvons enregistrer le nom d'origine. Et donc ce qu'on fait c'est dire, Hey, quel est ton magasin de noms aussi invariable. Ensuite, on prend la note de trois ans. C' est cette entrée personnalisée et nous disons, Hey, attrapons cet intertexte et changeons-le. Changons-le à ce que les utilisateurs ont saisi. Mais nous allons en fait nous assurer que c'est toujours en minuscules et ensuite Let's Consul a enregistré le nom. Maintenant, à ce stade, pensez-vous que le nom sera tout en minuscules quand nous ferons un journal de console ? Le nom sera-t-il entièrement en minuscules ? Parce qu'on a dit que c'est une minuscule ici ou tu penses que ce ne sera pas une minuscule parce qu'on ne l'a changé qu'une fois ? Maintenant, c'est en fait une bonne question, parce que différents langages de programmation fonctionnent différemment à cet égard. Alors essayons avec ça. Allons de l'avant et mettons Caleb dans toutes les majuscules et nous pouvons voir toutes les minuscules. Mais quand on console le journal, tout est en majuscules. Donc, cela ne l'a pas vraiment changé du tout. Donc ce que nous avons fait ici nommé en minuscules Il n'a pas vraiment changé la valeur du nom. Ça a juste changé une fois. Il a juste changé la valeur de cette fois, mais il n'a pas vraiment changé le nom entier pour toujours. Et donc c'est là que nous entrons dans une manipulation beaucoup plus variable, la manipulation de chaînes, des choses comme ça. Parce que maintenant nous pouvons préserver l'entrée de l'utilisateur. C' est le nom. Et nous pouvons dire, en fait, vous savez, juste dans ce cas, faire en minuscules, mais dans tous les autres cas, garder la même chose parce que nous pourrions vouloir faire quelque chose avec ça. C' est donc un moyen très simple d'accepter l'entrée de l'utilisateur. Et dans la nature, dans un site Web en direct, vous ne voyez pas ceci utilisé, vous voyez des champs de texte utilisés, vous voyez des zones de texte déroulantes , des choses comme ça, et nous allons arriver à tout cela. Mais nous devons apprendre à gérer les entrées des utilisateurs pour commencer, et c'est un très bon tremplin pour cela. Nous avons donc appris à accepter les entrées de quelqu'un, enregistrer dans une variable, saisir un nœud, puis à changer la valeur de cette note pour être quelle que soit l'invite, quelle que soit l'entrée de l'utilisateur. Et ce genre de nous prépare à une chose appelée écouteurs d'événements, les écouteurs événements sont comment nous pouvons dire fondamentalement, Hey, Hey, chaque fois que quelqu'un tape dans une zone de texte ou change un champ de sélection, affaiblir, faire quelque chose basé sur ça. Et c'est à ce stade que notre code devient réellement assez dynamique parce que jusqu'à présent nous n'avons pas été en mesure d'accepter des entrées personnalisées. Nous avons eu des alertes qui nous disent des choses, mais nous n'avons jamais été en mesure d'injecter texte ou des informations variables sur la page. Et maintenant on peut. Et donc je pense que, pour les deux prochaines vidéos allaient aux pieds, apprendre à travailler un peu avec cela, et cela va vraiment nous préparer pour le JavaScript plus futur. Lorsque nous traitons avec les écouteurs d'événement et plus d'entrée utilisateur et comment gérer tout cela. Et juste comme un rafraîchissement, allons de l'avant et disons le nom et faisons le nom d'alerte. Quel est votre nom ? Je m'appelle Kate Lubbe, et ils vont cliquer. OK, ça va juste alerter. Je m'appelle Caleb. Je m'appelle Galeb, juste comme ça. Et c'est tout ce qu'il y a pour demander et alerter. Et maintenant, vous êtes un pro rapide et alerte pour être totalement honnête. Ok, donc j'ai juste défait ça maintenant que se passe-t-il si tu veux un défaut ? Texan, disons que vous bricolez et que vous savez que vous expérimentez. Vous apprenez à jouer avec javascript comme vous devriez l'être, mais chaque fois que vous actualisez la page, vous devez taper le nom. Finalement, tu vas commencer à taper et des trucs comme ça qui ne sont pas super utiles. Donnons-lui une valeur par défaut. Allons de l'avant et le deuxième paramètre de prompt va être. Je mets juste mon nom. Quel est votre nom ? Caleb ? Et quand je rafraîchis, il est automatiquement rempli pour moi. Et une autre chose à noter ici est quand nous rafraîchissons, allons nous débarrasser de cela et nous allons cliquer sur OK, et allons ici et dire Quel est le nom ? Nom est une chaîne vide. Il n'y a rien là-dedans maintenant. Que se passe-t-il si cliquez sur Annuler au lieu de le laisser vide alors qu'il dit Mon nom est nul, Alors continuons et voyons quel est le nom. Le nom est une chaîne appelée Non ou il semble. Vérifions que vous tapez un nom, et c'est une chaîne, et donc fondamentalement il n'y a rien ici. Dans la vidéo suivante, nous allons en apprendre davantage sur ces choses, appelées opérateurs de comparaison pour nous assurer que notre entrée est réellement ce que nous attendons et si ce n'est pas le cas, faites autre chose, et ce est la façon dont nous donnons aux ordinateurs des commandes basées sur l'entrée de l'utilisateur. Donc, sautons sur la prochaine vidéo où nous apprenons sur les opérateurs de comparaison, et c'est vraiment là que tout ce que nous avons appris jusqu'à présent se transforme en programmation riel 13. Introduction aux opérateurs de comparaison: Ok, jetons un coup d'oeil aux opérateurs de comparaison. Les opérateurs sont les petits morceaux de logique d'un programme qui nous disent de faire une certaine chose ou ne pas faire une certaine chose. Fondamentalement, c'est la façon dont nous avons pris des mesures basées sur une valeur variable. C' est là que les variables deviennent vraiment super importance, pas seulement pour alerter les choses ou la journalisation de la console, c'est pour donner à un programme une tâche particulière à faire. Ou peut-être pas pour dio. Et donc un opérateur de comparaison ressemble fondamentalement à ceci. Allons-y, faisons de la place ici. Il dit essentiellement, Si votre nom est Caleb, faites quelque chose d'autre ou faites autre chose qui est fondamentalement tout ce qu'il est. Et en fait, dans le monde de Python, cela ressemble beaucoup à ceci. Très, très, très similaire. JavaScript a un type différent de syntaxe, donc la façon dont nous le faisons ressembler, allons de l'avant et créons une balise de script ici. Et jetons un coup d'oeil à notre première déclaration si. Donc, nous allons coder ceci et ensuite nous allons le transformer en une invite où nous pouvons réellement accepter l'entrée de l'utilisateur. Donc nous allons faire loin nom est égal à Caleb. On va devoir faire ce petit peu plus petit ici. Et puis on pourrait dire, si parenthèses ? Parce que ça fait de l'action, n'est-ce pas ? Si ça va faire une action, vous aurez besoin de quelques parenthèses là-dedans si le nom est égal à Caleb Ouverture Curly crochet fermeture bouclée juste comme ça. Et c'est une déclaration if. Donc vous dites, Hey, si une variable est égale à ce que vous attendez à ce qu'elle soit égale à alerter, faites quelque chose et allons de l'avant et rafraîchissons et il dit, Faites quelque chose maintenant pourquoi avez-vous fait ça ? Parce que vous pouvez vraiment voir que ce nom est égal à Caleb. Et si le nom est égal à Caleb maintenant, il y a une mise en garde ici est que nous utilisons pour égaler les signes. Un signe égal signifie que c'est la variable. La variable est égale à quelle que soit cette valeur. C' est un signe égal à des signes égaux. Ça veut dire, c'est le nom de Caleb, que nous vérifions pour s'assurer que c'est vraiment le bon nom. Donc celui-ci est appelé un opérateur d'affectation, et celui-ci est un opérateur de comparaison. Maintenant, il y a plusieurs autres opérateurs de comparaison là-bas, mais nous allons vraiment apprendre ce 1er 1 Pour l'instant, pour le garder agréable et simple. Alors maintenant, changeons ceci pour demander quel est votre nom ? Et maintenant je peux rafraîchir va dire Quel est ton nom ? Et si je tape un autre nom, je serai mon chat un instant. Il s'appelle Zephyr. Je vais taper Zephyr. Rien ne se passe. Et c'est parce que si on entre ici et qu'on tape un nom, on peut le voir. Zéphyr. Et nous disons, Hey, si le nom est égal à Caleb, faites quelque chose, Ce n'est pas Actuellement, il dit son effort, Mais si nous actualisons et je tape Caleb avec une majuscule donc il correspond à cette valeur droite là, dit-il, faites quelque chose de cool. Donc, maintenant, nous avons quelque chose avec qui travailler. Ici, nous pouvons dire, Hey, demandez à l'utilisateur des informations, et si ces informations correspondent à ce que nous attendons, Affaiblir, faites autre chose. Alors maintenant, faisons cela un peu amusant ou faisons un H ici je d est égal à juste appeler Bienvenue. Et transformons cela en huit nœuds de notre nœud de bienvenue est égal à documents point Get élément par idée, il remplit automatiquement pour moi C'est joli nom. Rends-le plus petit. Donc, il tient sur une ligne. Et maintenant nous avons ceci ici, et nous pouvons dire, Hey, si le nom est Caleb, Note de bienvenue point Le texte intérieur est égal à accueillir sur votre site, Caleb. Et avant de donner un coup de feu Ah, j'ai juste remarqué que nous avons un document je reçois l élément par i d. Ce n'est pas le nom. Bienvenue. Dans ma crise d'excitation, j'ai eu un peu trop d'avance sur moi là-bas et, vous savez, le fait amusant qui nous arrive tous. Alors maintenant je vais frapper, rafraîchir et dire, Quel est ton nom ? Je vais dire que je m'appelle Caleb. Et maintenant il est dit : Bienvenue sur votre site, Caleb. Et si je dis un autre nom, si je dis que mon nom est non, pas Zephyr. Soyons Batman. Je m'appelle Babin ne fait rien. Batman n'est pas censé être là. Et Snow, nous avons une logique et quelque chose qui se passe basé sur le fait que mon nom est Caleb. Et si on avait besoin que ça soit un peu plus accepté ? Parce qu'en ce moment, vous avez besoin d'un K. majuscule Caleb avec un R majuscule, un K minuscule, rien ne se passe. Ok, eh bien, maintenant nous devons vraiment changer ça. Nous devons dire que si le nom est égal à Caleb avec une minuscule K. Eh bien, ça ne changera pas pour ça. Et ça, ça, ça et ça. Ce sont toutes les différentes variations et mélanger et les assortir, Bien sûr. Donc, ce que nous pouvons faire, c'est que nous pouvons dire, si nous sommes nommés en minuscules. Donc nous allons prendre tout ce que le nom est transformé en minuscules et ensuite comparer la valeur minuscule . Allons-y et faisons-le. Vous permet tout Caleb en majuscules. Et puis disons d'accord et dit : Bienvenue sur votre site, Caleb. Et c'est parce qu'on a dit, Hey, si le nom toutes les lettres majuscules, Caleb, et ensuite on le force à être plus bas. Cas est égal à Caleb minuscule. Et maintenant, ça va correspondre à chacun. On pourrait dire K a l o b. Ça marche toujours. Et c'est là que la manipulation des chaînes devient très, très utile. Donc maintenant, à ce stade, nous devons jeter un oeil à la déclaration réelle si elle-même. Ce qui rend ce déclencheur alors que ce n'est pas seulement le fait qu'il correspond à Caleb. Oui. Il cherche une correspondance avec la logique derrière elle dit, Est-ce que cette déclaration est vraie ? Est-ce que le nom point en minuscules est égal ? Caleb ? Si quelqu'un devait taper Caleb comme ça, ça correspondrait ? Si quelqu'un devait taper Caleb comme ça, ça Non, ces air sont différents d'un ordinateur. Mais nous avons dit à la minuscule, ce qui revient à dire : Caleb est-il égal à Caleb ? Et si oui, ce serait vrai, Votre ordinateur dit Yep. C' est vrai. Logiquement. Bip, bip, bip, bip. Oui, c'est vrai. Fais ça faire quelque chose. Et donc vos déclarations if devraient toujours retourner true. Et puis que se passe-t-il si on ne revient pas ? C' est vrai, comment gérer quelque chose qui est le contraire de vrai ? Comment gérer quelque chose de faux, ou comment gérer plusieurs scénarios ? Eh bien, ce sont des choses que nous allons entrer dans juste un peu pour l'instant, je pense que nous devrions juste pratiquer un simple opérateur de comparaison juste pour en tirer le coup , parce que c' est là que nous pouvons avoir beaucoup de plaisir avec elle. Nous pouvons faire n'importe quoi avec notre site Web à ce stade. basé sur des déclarations just if. Et puis, enfin, jetons un coup d'oeil plus rapide à la syntaxe ici. Donc, nous avons si les parenthèses et puis à l'intérieur de ces parenthèses, donc je pourrais réellement supprimer cela si ce qui est ici est vrai, donc si la valeur un est égale à la valeur à, alors vous avez quelques crochets bouclés. Vous avez l'ouverture du support bouclé et en fermant le support bouclé, faites des trucs ici. Et si ce n'est pas vrai, si vos déclarations if ne s'avèrent pas vraies, cela ne s'exécute pas du tout. Il saute juste votre programme, dit qu'il n'y a rien là-bas. Je ne vais rien faire avec ça. Et c'est essentiellement le cœur de chaque langage de programmation sur la planète. Si vous voulez entrer dans l'intelligence artificielle, si vous voulez entrer dans l'apprentissage automatique, devinez ce que la plupart de cela est une tonne de. Si des instructions, c'est si un point de données correspond à une certaine valeur. Si un ensemble de données correspond exactement au résultat que vous attendez. Si ce n'est pas le cas, faites autre chose qui est vraiment tout ce que c'est. Même si vous regardez vous savez, plus de films fantastiques comme moi robot, vous connaissez la machine, Le soleil était son nom. Sonny va regarder autour de lui et il analysera toute l'image. Et vous direz s'il y a une personne là-bas, dites bonjour. S' il n'y a personne là-bas, continuez à marcher. Donc, c'est une déclaration if else. Et à la fin de la journée dans la programmation, tout se résume à quelque chose appelé un booléen. C' est vrai ou faux. C' est ce n'est pas vraiment beaucoup de terrain d'entente là-bas. Et c'est tout ce qu'on fait ici, c'est qu'on dit, , c'est vrai ? Une de cette déclaration ? Si cette instruction if est vraie, faites quelque chose. Et si ce n'est pas le cas, peut-être faire autre chose. Mais nous en apprendrons plus à ce sujet dans une future leçon. Donc, ce que je voudrais que vous fassiez, demandez votre nom en utilisant une invite, puis vérifiez si ce nom correspond à une valeur que vous recherchez. Et si cela correspond à cette valeur, alors faites autre chose. Il suffit d'écrire une déclaration if et de s'y habituer. Et n'oubliez pas, vous pouvez expérimenter. Tu ne vas rien casser. Tu pourrais toujours le faire si je m'appelle Nathan. Si je m'appelle Zephyr, quelque chose comme ça, il pourrait aussi le faire. Je doutais que les données au lieu de minuscules vous pourriez faire à un cas d'oiseau. Tu pourrais faire quelque chose comme ça. Tu fais toutes sortes de choses, alors n'oublie pas de bricoler autour de ça. Amusez-vous à l'expérience. Vous avez le droit d'expérimenter. Et encore une fois, il n'y a aucun moyen possible de casser quoi que ce soit sur votre ordinateur en écrivant ceci, vous êtes totalement sûr d'expérimenter au contenu de votre cœur. 14. Manier des opérateurs opposés: bonjour et bienvenue. Dans la dernière leçon, nous avons appris sur les opérateurs de comparaison. Dans cette leçon, nous allons apprendre comment gérer le contraire de quelque chose qui est vrai. Donc, par exemple, si on a un script qui me demande mon nom et qui dit, Hey, si mon nom est Caleb, bienvenue moi. Et si mon nom n'est pas Caleb ? Que faire si vous demandez un cours et que ce n'est pas JavaScript pour les débutants ? Allons-y et faisons-le. Maintenant, disons que var qui a été appelé entrée est égal à invite. Quel cours prenez-vous ? Et puis nous pourrions dire avec une déclaration if si le point d'entrée en minuscules est égal à JavaScript pour les débutants et que juste assurez-vous que cela n'a pas d'importance s'il y a Ah, lettre majuscule ou pas de lettre majuscule, puis faisons ce plus petit accolades. Et puis on pourrait dire, tu sais, faire quelque chose ici. Et donc nous sommes déjà familiers avec cela. En fait, nous pourrions réellement nettoyer cela jusqu'à nous pourrions dire, entrée plus faible. Appelons simplement que de notre entrée diminue égale à, et nous allons juste créer une nouvelle variable appelée, mettre plus bas, et cela correspond juste à celui-ci ici. Mais que faire si le cours n'est pas JavaScript pour les débutants ? Et si vous suivez un autre cours de la mienne appelé Javascript Essentials ? Eh bien, tu dois être capable de gérer ça. En fait, que se passe-t-il si quelqu'un tape dans quelque chose qui n'est pas ce alors que vous avez besoin d'une déclaration else  ? Donc, si quelque chose d'autre fait autre chose et vraiment ça se résume à quelque chose comme ça. Vous pouvez lire ceci comme une phrase pour faire de l'espace ici. Et vous pourriez dire, vous savez, si le cours est javascript pour les débutants, faites une chose autrement ou faites autre chose. Et en fait, c'est intéressant, parce que si nous disons cela, c'est python. Mme Python a envoyé la syntaxe. Et donc, en apprenant la syntaxe javascript ici déjà un peu familier avec la syntaxe python. Donc non, vos compétences et python ou vos compétences et javascript sont plutôt payantes parce que vous apprenez à appliquer la logique dans d'autres langues. Ça a l'air un peu différent, mais oui, c' est comme ça que ça marche. Et donc vous pouvez réellement lire ceci comme une phrase si les cours javascript pour les débutants font quelque chose. Mais si ce n'est pas le cas, faites autre chose. C' est tout ce que c'est. Et donc le monde de la programmation est vraiment juste composé de déclarations, si else. C' est un tas de if déclarations l et ah, hybride des deux appelées et si ailleurs, sinon f en fonction de votre langue. Donc, si c'est JavaScript pour les débutants, ajoutons ajouter. Ah, message de bienvenue. Et si ce n'est pas le cas, disons que vous êtes dans la mauvaise voie. On a besoin de quelque chose à faire ici, donc c'est un H. Donnons à cela un nom de texte et i d de texte et nous devons prendre un nœud ici. Alors attrapons ce noeud. Le texte Vier est égal à documents point get élément par i d texte. Et puis, disons que le texte point html interne est égal à Il est trop fort. Bienvenue. C' est si fort pour JavaScript pour Faisons un autre débutant fort. Et maintenant, nous écrivons du html à l'intérieur de son JavaScript. Et si ce n'est pas le cas ? Droit ? On pourrait le faire et le copier, parce queje ne veux pas tout écrire à nouveau. On pourrait le faire et le copier, parce que On pourrait juste dire que tu es dans le mauvais cours et regarder ça. Quel cours prenez-vous ? Ok, eh bien, disons que je prends un autre cours que j'ai appelé javascript Essentials. Ouais, parce que je suis dans le mauvais cours parce que nous ne sommes pas dans l'essentiel javascript. En fait, celui pour lequel je suis en JavaScript et c'est vraiment gâché une fois mis tout en majuscules ou le dernier mot sera des majuscules. JavaScript pour les débutants. Bienvenue sur JavaScript pour les débutants. Et si nous voyons notre source ici, nous n'avons pas vraiment l'air d'être audacieux, mais c'est le cas. On a un élément fort. Nous avons un élément fort ici et un texte régulier ici. Alors on y va. Et c'est comme ça que vous faites dans, si else déclaration. Donc, fondamentalement, vous dites, Hey, si c'est vrai, si nous sommes en fait en JavaScript pour les débutants, exécutez cela autrement n'a pas vraiment d'importance quelle est la réponse. Nous disons n'importe quelle autre réponse dans le monde, exécutez cette ligne. Alors allez-y. Donne-lui un coup de feu. Vous allez avoir besoin de savoir comment le faire pour notre mini projet qui arrive. Vous allez certainement avoir besoin de savoir comment le faire si autre déclaration et à ce stade , si vous êtes coincé avec cela, n'oubliez pas, vous pouvez toujours laisser une question ci-dessous. Je suis toujours là pour aider 15. Mini projet JavaScript #2: Bienvenue dans votre deuxième mini projet. Celui-ci a à voir avec les opérateurs de comparaison. J' espère donc que vous avez regardé les deux vidéos précédentes dans ce grand projet. Ce que je voudrais que vous fassiez est demander à l'utilisateur pour un Earl, puis vérifiez pour voir si ce lien commence par http. Et si cela ne commence pas par http, je veux que vous répariez ce lien. Donc, corrigez la variable, puis injecte cela comme un lien dans la page. Et donc, pour la pièce numéro un, vous allez vouloir utiliser l'invite pour la deuxième partie, vous allez vouloir utiliser la sous-chaîne. La partie numéro trois est que vous allez vouloir utiliser et si peut-être l'instruction ou les instructions d'autre , puis la partie numéro quatre, vous allez vouloir saisir un noeud d'éléments HTML et changer l'orteil HTML interne, avoir plus de html à l'intérieur de celui-ci. Je vais faire ce projet juste en face de vous aussi dans la même vidéo, mais je pense que ce serait mieux si vous pouviez mettre la vidéo en pause maintenant et simplement lui donner un coup de vue vous-même . Allez aussi loin que possible et vous savez quoi ? Si vous êtes coincé, il suffit de reprendre la vidéo et vous pouvez regarder exactement comment je finis par le faire. Alors allez-y, cliquez sur Pause. Donne-lui un coup de feu et je te verrai dans quelques minutes quand tu frapperas le CV. Ok, Donc la première étape était que nous devions demander l'entrée à l'utilisateur. Donc, nous allons créer un script ici où nous mettons notre JavaScript et c'est un feu. Toi où je suis égal à demander. Entrez un u R l quel que soit ce qui va être. Et donc on va faire ça pièce par pièce. Ici, je vais me rafraîchir. Entrez, Vous êtes dehors et je pourrais faire le codage pour tout le monde dot com ne fait rien comme prévu. Donc on a juste une fille dans une variable, mais on n'a rien fait avec ça. Allons de l'avant et passons à l'étape numéro deux. Voyons si cela commence par http ou s'il ne commence pas par http donc nous pouvons dire si vous êtes propres chaînes sous point jusqu'à la chaîne 04 donc commence à zéro caractère, qui est un dans le langage de l'ordinateur. Aller au quatrième caractère est égal à http alors il est bon et nous pouvons consoles log que nous pouvons dire Conseil ne pas enregistrer l'euro est bon, Sinon, nous devons le réparer. Donc consul dot Warren et si mauvais toi, Earl Bad, Bad. Tu es malade. Allons-y. Donnez un coup de feu, alors je vais de l'avant. Tout type de codage pour tout le monde point com et il n'est pas conseillé au chaud si vous criez à l'écran. Euh, ouais, c'est un bon appel. C' est amusant usé. En fait, euh, coder pour tout le monde dot com est essayer à nouveau et dit, Mauvais vous l'êtes. Eh bien, si je rafraîchis la page et dis H T T p Golin slash revêtement pour tout le monde dot com et dit que la fille est bonne ? Ok, donc on a une déclaration de travail si autre ici. Donc, si l'u. R L est bon, nous n'avons pas vraiment besoin de faire quoi que ce soit. Mais si l'u. R L est mauvais, il faut le réparer. Alors allons-y et réparons ça. U R l nous allons maintenant le réparer en disant que l'u. R L est égal à la barre oblique http du côlon et ensuite nous allons juste contaminer le reste de la fille. Oui, on peut se débarrasser de ces journaux de consul si on veut. Est-ce qu'ils ne font pas vraiment quoi que ce soit sur. La dernière étape était que nous devons sélectionner un élément HTML par son i d et changer le HTML interne pour avoir un lien dedans. Alors allons-y et faisons-le. Maintenant, nous allons créer un paragraphe. Disons que c'est le lien et créons juste une travée vide ici qui s' appelle Link ne sera rien là-dedans. Donc, lorsque nous actualisons la page, vous voyez qu'elle est annulée. Il dit juste que c'est le lien que nous pouvons réellement voir que même a un air de type non attrapé ne peut pas lire la sous-chaîne de propriété de Non, car il n'y a rien là-dedans. C' est ce qui se passe quand on clique. Annuler. À ce stade, nous devrions avoir un peu de travail. Vous supposez que vous tapez quelque chose là-dedans, et ensuite nous avons juste besoin de le mettre ici. Alors attrapons ce noeud. Faisons le noeud de lien var est égal à ou je suppose que c'est un intervalle de notes. Oh SPAN note est égal au document. Je reçois l'élément par i D et juste appelé Link et allons de l'avant et mettre le noeud de span HTML interne est égal à l'URL, donc nous sommes presque là. Allons de l'avant et disons le codage pour tout le monde dot com. Il l'a réparé pour moi. Cool. Mais en fin de compte, ce n'est pas tout à fait ce que nous recherchons. Nous voulons en fait que ce soit un lien vers le codage pour tout le monde dot com. Donc, nous devons mettre cela dans un code HTML et c'est là que c'est boire et Cat Nation entre donc nous pourrions le faire de deux façons différentes. On pourrait tout dire en une seule ligne. A h r E f est égal à, puis à la fermeture. Et ensuite on pourrait y aller et dire contaminer ça et on pourrait mettre l'U. R LL ici. Et puis on peut aussi contaminer ici avec la fille. Et donc cela fonctionnera revêtement pour tout le monde dot com. Et quand je clique dessus et vous pouvez réellement le voir dit, citant pour tout le monde dot com, boom charge le site. C' est plutôt sympa. Ou si vous vouliez écrire un code légèrement plus propre, nous pourrions aussi dire que HTML va créer une nouvelle variable appelée HTML et de cette façon nous avons notre HTML dans une nouvelle ligne, et il ne semble pas aussi bondé donc nous pouvons faire la même chose ici. Nous ne pouvons pas dire google dot com et ne nous emmène pas à http google dot com Il y a en fait un raccourci. Ah, nous avons actuellement une déclaration if vide. Alors, pourquoi même écrire ça ? Donc ce qu'on pourrait dire, c'est qu'on pourrait sauter tout ça. Débarrassez-vous de la déclaration else et nous obtenons, disons , si ce n'est pas le cas de comparer quelque chose pour s'assurer qu'il est vrai, vous dites à des signes égaux, dire quelque chose n'est pas vrai ou pas la même chose. Plutôt, vous dites, exclamation signe égal. Et cela dit pas la même chose. Donc, nous allons juste zoomer et ça ressemble à ceci, pas la même chose. Et donc ce que nous disons ici est si la fille dans les 4 premiers caractères n'est pas http, assurez-vous qu'il est http. Et puis nous nous sommes débarrassés de cette autre déclaration. Donc maintenant, nous disons, fondamentalement, si cela ne commence pas par http, il doit donc écraser l'euro. Donnons un coup de feu à ça. Allons ici, rafraîchissez-vous. La dernière fois, quel côté voulons-nous aller vers vous ? Allons sur facebook dot com et bam, ça marche. Et si nous avons déjà mis http là ? Vous savez, une copie et coller Vous êtes tout ce qui est déjà dans leur http YouTube Elcom. Ça marche aussi, donc tout va bien. Cela fonctionne parfaitement bien. Et c'est donc tout le projet de nombreux. Et donc ce que nous avons utilisé est rapide. Nous utilisons une déclaration if. En fait, nous avons utilisé une déclaration else techniquement, et ensuite nous combinons ça en une ligne. On en parlera un peu plus tard. Tu n'avais pas à le savoir sur le dessus de ta tête. Ensuite, nous avons attrapé notre SPEN et ensuite nous avons injecté du HTML dedans. De plus, nous pourrions réellement le faire. On pourrait vérifier aussi si quelqu'un a annulé. Qu' est-ce que tu es dehors ? Eh bien, que vous êtes l est égal à savoir type de nouvelle URL est un objet. Et donc nous savons que ce sera une sorte de type de données, et en fait vous pourriez ne pas le savoir et c'est bon. Vous n'avez pas vraiment besoin de savoir que ce que je vais faire est de vous montrer quelque chose d'assez cool, à mon avis. Donc nous pourrions dire si la fille est égale à savoir Alert, Annuler ceci rapidement parce que nous ne voulons pas qu'il s'exécute. Alors allons-y. Annulez ceci rapidement parce que nous ne voulons pas qu'il s'exécute. Et donc nous pourrions dire que si la fille est égale à savoir, puis annuler cette autre chose et ensuite nous pourrions envelopper tout le reste dans cette déclaration est maintenant que nous sommes en train de dire que si fondamentalement personne n'a cliqué sur le conseil, nous sommes bons. Mais si quelqu'un a un conseil rapide, on va dire alerte à ça, on va dire, annuler ça rapidement. En fait, en fait, ce que nous pourrions faire est que nous ne pourrions absolument rien faire ou nous pourrions faire un point de console jamais manquant d'entrée. Sinon, si quelqu'un mettait quelque chose là-dedans, nous pourrions alors faire une déclaration if ici. Et ensuite, nous pourrions faire le reste de notre logique. Et alors allons-y et donnons-nous un coup de feu. Annuler l'entrée manquante juste comme nous l'avions prévu. Alors, voilà. C' est votre mini projet numéro deux. J' ai fait un tas de choses ici que je ne m'attendais pas à ce que tu saches par exemple, si tu es, je suis égal à savoir. Oui, j'ai sorti ça d'un chapeau. Tu n'étais pas encore au courant ? L' instruction if not. Tu ne le savais pas encore non plus. C' est bon. On apprend des choses ensemble en même temps. Nous allons passer en revue toutes ces choses un peu plus tard, et j'aime en quelque sorte laisser tomber certaines. Je les appelle « Golden Nuggets ». Juste ces petits indices de choses légèrement plus avancées à l'intérieur du code. Ça a déjà du sens. Donc tu te pousses constamment. Tu ne te pousses pas trop fort. N' oublie pas, tu peux toujours mettre ça dans un stylo à code. N' oublie pas, Ou, tu sais, tu pourrais juste prendre une capture d'écran comme ce que j'ai ici. Vous avez votre éditeur sur la gauche, et vous avez votre navigateur sur la droite, et vous pouvez prendre des captures d'écran et le partager dans votre projet de partage de compétences. 16. Manier des cas spéciaux: D' accord. Nous savons un peu sur les opérateurs de comparaison et sur la façon de gérer quelque chose qui retourne vrai. Et quelque chose qui retourne faux. Nous savons qu'ils sont, si les déclarations et autres déclarations. Mais si on veut faire plus que ça ? Quoi ? On pourrait faire quelque chose comme ça. Tu sais, si notre nom est égal à Caleb et qu'on pourrait dire si le nom est égal à Caleb, faites quelque chose ici, ok ? Et si ce n'est pas Caleb ? Et si le nom est Zephyr ? Eh bien, alors nous devrions le faire si le nom est égal à un Zephyr. Skins jamais agir ici et puis nous avons une déclaration else. Et si le nom n'est pas Zephyr ? Et si ce n'est pas aussi Caleb Wars jamais ? Et si le nom si le nom est égal à Henry Henry Action ici ailleurs ? Et si le nom n'est pas Caleb Zephyr ou Henry ? Et ça continue et encore et encore et encore, et ça devient vraiment dégueulasse. Je veux dire, même en regardant ça maintenant, c'est un peu déroutant à l'œil nu. Regardez-le et vous partez. C' est beaucoup de nidification, et cela pourrait durer éternellement. Heureusement, il y a une meilleure façon de gérer cela. Dans le monde du JavaScript, il y a en fait deux façons de le faire. Je vais te montrer le chemin principal. La façon la plus courante. Ils ne vous montreraient pas un autre moyen. C' est un peu moins commun, mais aussi un super utile. Donc, ce que nous pouvons faire, c'est si le nom est égal à Caleb. Super. Tu sais, le conseil n'est pas génial. Ok, nous pouvons aussi faire autre chose si le nom est égal à Zephyr et ensuite nous obtenons, disons, disons journal de points du conseil no. Et puis on peut dire autre si le nom est égal à Henry Consul, ce journal petit moi. Oh, parce que c'est un petit minou. Et enfin, si ce n'est pas Caleb ou Zephyr ou Henry Conseil dot Warren pas géré quelque chose comme ça. Et allons de l'avant et donnons un rafraîchissement, et nous pouvons voir qu'il est dit génial dans votre nous allons rendre ce plus petit. Et si on change ce nom en Zephyr, me dit. Oh, si on change ce nom en Henry, on sait qu'on va dire petit Meo parce que c'est ce qu'on a écrit. Un petit méo et si on le change à quelqu'un d'autre, on le change en chien. Oh, chien, ce n'est pas géré. Et c'est ainsi que nous nous éloignons de l'imbrication des déclarations si à l'intérieur des déclarations if, nous pouvons les garder belles et plates comme ceci. Et en fait, mon éditeur et la plupart des éditeurs vous permettront de le faire parce que vous avez des crochets bouclés ici, vous pouvez réellement les fermer. Et maintenant, il a l'air beaucoup plus propre. Vous pouvez en fait lire ceci. Si le nom est égal à Caleb, ça va faire quelque chose. Si c'est égal à Zephyr, fais quelque chose, Henry, fais quelque chose, ou si c'est autre chose, fais autre chose. Et si jamais tu regardes beaucoup de code, tu es genre, Ah, Ah, que se passe-t-il si le nom est Zephyr ? Ouvre juste ce repas de journal de la console. Et c'est ainsi que nous nous éloignons d'un imbriqué. Si les instructions maintenant en Javascript, il y a une autre façon de le faire, et beaucoup d'autres langues l'ont également. C' est ce qu'on appelle une instruction switch. Vous ne le voyez plus trop souvent, mais c'est certainement une chose sur laquelle vous pouvez vous appuyer chaque fois que vous avez beaucoup de, sinon si d'autres déclarations. Donc, vous dites juste switch et vous lui donnez une variable, quoi que ce soit qui va être des crochets bouclés et ensuite vous lui donnez un cas. Donc l'affaire va être Caleb. Et puis si l'affaire est Caleb, vous pourriez dire le journal des points du conseil euh, Caleb. Et puis on dit « pause ». Et c'est comme une instruction if Onley au lieu d'utiliser des accolades, utilisaient un deux-points. Et au lieu de cette accolade bouclée, on utilise le mot pause. Nous verrons le mot briser beaucoup plus quand nous arriverons à des boucles de fil. Quatre boucles pour chaque boucle, des choses comme ça, nous pourrions lui donner un autre cas. N' importe quel autre nom qu'on pourrait dire, Nathan Consul Dot Log. Salut, Nathan Break. Et puis nous pourrions le dire et ainsi de suite et ainsi de suite. Ou si nous voulions juste attraper n'importe quel autre scénario, nous pourrions simplement dire par défaut point de conseil avertir pas géré et casser. Allons de l'avant et nous allons changer de nom. C' est des changements au membre de la famille. Et créons Var. Membre de la famille est égal pour commencer avec Caleb, je serai moi et dit, Salut, Caleb. Et si je le changeais en Nathan Hi, Nathan. Et si je le changeais en Wade ? Pas manipulé sur 9 22 comme ça, pas traité la ligne 22. Donc, c'est fondamentalement la même façon de faire. Et si d'autre déclaration certaines personnes comme de cette façon, certaines personnes aiment le if else if way, personnellement, personnellement, je me penche vers le if else if else way, il semble juste un peu plus explicite. Et tout le monde ne connaît pas la fonctionnalité du commutateur. Donc, il peut être un peu plus difficile pour quelqu'un qui n'a jamais vu une instruction switch comme celle-ci avant de comprendre ce qui se passe, alors que chaque programmeur dans lequel vous courez saura si sinon si et else déclarations. Et donc une chose à noter ici est d'essayer de faire correspondre ce premier cas et d'arrêter. Donc, ce que nous disons ici, c'est si le membre de la famille est Caleb , console , haut, Caleb, et puis arrête. Ne fais pas les autres, comme ici. Si le nom est égal à Caleb, alors il suffit d'exécuter celui-ci. Mais ce n'est pas le cas. Alors ça va essayer de le faire. Celui-ci ne correspond pas ? Non. Alors ça va essayer de le faire. Est-ce que ça correspond ? Non. Ensuite, il va faire la déclaration else. Et cette instruction L est en fait facultative. Vous n'avez pas besoin d'avoir cela dans leur, vous pouvez dire si le nom est Caleb Mots que pour, ou Henry a pris des mesures. Et si c'est autre chose, ne faites rien du tout. Vous pourriez tout à fait le droit, donc ce que je voudrais que vous fassiez pour quelques expériences pratiques ici est juste. Et si d'autre chose, il n'a pas besoin d'être grand, il n'a pas à être complexe, vous savez, juste comme quelque chose. Ce que j'ai ici, juste un tas d'enregistrement de console. C' est tout à fait correct. Je veux juste que vous ayez une expérience avec la syntaxe else if et vraiment, quand il s'agit de cette intacte, il semble juste que quelqu'un a attrapé une instruction If comme celle-ci ici et dans leur déclaration else , ils l'ont juste collé. C' est tout ce que c'est de donner une chance à ça. N' oubliez pas de vous amuser avec ça, et quand vous en aurez fini, passons à la leçon suivante. 17. Commentaires de code: Bon, bienvenue à une autre leçon sur l'apprentissage du JavaScript. Nous allons parler des commentaires de code maintenant, généralement, généralement, dans un cours, je mets les commentaires de code d'abord, mais franchement, ils sont ennuyeux. Malheureusement, ils sont également super utiles, et il est logique de les apprendre. Et donc je voulais en quelque sorte reporter ça et passer à quelques trucs de bailleur avant d' entrer dans, tu sais, tu sais, choses qui ne sont pas aussi amusantes que des commentaires de code. Donc, à ce stade, si vous ne savez pas ce qu'est un commentaire de code, vous devriez demander à Caleb. Qu' est-ce qu'un commentaire de code ? Eh bien, un commentaire de code est fondamentalement un moyen de prendre un morceau de code que vous avez écrit et dire à votre navigateur de ne pas l'exécuter. J' ai donc un exemple ici. Commentaire du journal de la console Une fin à et si je rafraîchis ma page, nous verrons juste commentaire. Un et deux. En fait, nous allons faire deux montrer quatre fois à un commentaire un, puis 222 et deux. Donc, disons que nous avons un tas de code ici sur une ligne et que nous ne voulons pas qu'il soit exécuté du tout. Nous disons, Hey, javascript, ne l'exécutez pas et tout ce que nous faisons est de mettre une barre oblique avec une autre barre oblique ensemble, et cela crée un commentaire de ligne unique. Donc, si je sauvegarde ceci et actualise le commentaire, on ne s'affiche plus ici. Maintenant, quand il s'agit de commentaires multi-lignes, plupart des éditeurs que vous pouvez frapper comme une barre oblique de commande short comme CMD plus Slash. Ou si vous êtes sur Windows, c'est généralement une barre oblique de contrôle quelque chose comme ça, et vous pouvez sélectionner toutes ces lignes et vous pouvez les commenter toutes en même temps. Mais ce n'est pas un commentaire multi-ligne qui commente chaque ligne individuellement. Donc, si nous voulions nous débarrasser de tous, nous ferions une barre oblique puis un astérisque, puis à la fin nous ferions un astérisque puis une barre oblique, et cela commentera tout entre ces deux points. Et donc si vous supprimez l'espace, vous verrez mon code devient gris, et ça va continuer pour toujours et toujours. Donc, si je fais conseil, vous pouvez voir que mon code est toujours gris année consul dot log. Est-ce que je viens et qu'on se débarrasse de celui-là ? Oh regarde ça. Il y a en fait une erreur de syntaxe parce que le commentaire n'a jamais été fermé. Mais si on fait un astérisque et une barre oblique juste après ce dicton, Hey, tout entre ici vient de commenter. Donc, économisez rafraîchissant. Est-ce que je viens ? Oui, vous le savez. Vous venez parce que toutes les autres lignes que Air a commentées. Donc, voyons notre source de page et nous pouvons voir qu'il y a un commentaire ici, et il y a un commentaire, un commentaire multi-ligne ici se débarrasser de tout le numéro deux. Vous pouvez également commenter la fin d'une ligne. Donc, au lieu d'avoir juste un commentaire au tout début, vous pourriez avoir un commentaire après cela afin que vous puissiez enregistrer notre nom est égal à Caleb. Et puis, si vous vouliez faire une note de code un commentaire de code quand vous mettez deux barres obliques après et dites, C'est mon nom et cela ne va pas s'exécuter non plus. Mais comme quelqu'un comme un autre développeur regarde votre Cohen dit nom Var. Qu' est-ce que c'est censé être ? Quel genre de nom est censé être le nom d'une personne et dire que c'est mon nom ? Bon, Bon, je sais que c'est le nom des développeurs maintenant, donc je peux me rafraîchir. Et ça dit juste que chaque fois que je me rafraîchis, est-ce que je viens ? Oui, tu te pointes. Et quand je rafraîchis ce nom var est Caleb et nous allons nous assurer que cela fonctionne toujours, cela va ici et tapez un nom. Son nom est Caleb ha ha. Regarde ça. Et quoi que ce soit à droite de vos doubles barres obliques ne va pas apparaître. Ça va être commenté. Donc, en allant de l'avant, vous allez me voir faire beaucoup plus de commentaires de code. C' est une très bonne façon d'écrire un tas de code qui n'a pas réellement besoin d'exécuter , et c'est aussi un très bon moyen de, tout comme tester les choses. Donc, si vous voulez un consul long quelque chose et vous n'êtes pas sûr si vous allez l'utiliser plus tard , juste commenté ou un commentaire peu commun pour commenter le commentaire. C' est tout ce qu'il y a à coder les commentaires pas super super intéressant comme un sujet à apprendre , mais très mais très, très important, et vous allez voir cela partout dans chaque langage de programmation, vous verrez des commentaires de code partout 18. Introduction à l'arithmétique: Parlons un peu de l'arithmétique. Donc, en gros, c'est juste un mot de fantaisie pour les maths. Vous savez, addition de division de multiplication, soustraction sur. Ensuite, vous avez des choses comme les modules, qui est le reste et les exposants, et c'est vraiment tout ce qu'il y a. Et puis, vous savez, il y a quelques fonctions supplémentaires que nous pourrions prendre pour, genre, signe et co sign. Et je plaisante. On ne va pas faire tout ça. On va travailler avec les trucs de base pour l'instant. En fait, c'est vraiment tout ce que nous allons travailler, parce que quand il s'agit de codage quand il s'agit de programmation, il s'avère que la plupart d'entre nous codeurs air. En fait, nous sommes un peu paresseux, et nous ne sommes pas intéressés à écrire toutes sortes de maths compliquées. Nous ne voulons pas entrer dans le calcul, les algorithmes et les choses comme ça. Oui, les algorithmes sont un mot à la mode, et c'est amusant d'en parler. Mais à la fin de la journée, voulons-nous passer huit heures par jour à écrire qui savent honnêtement que la plupart d'entre nous ne le savent pas. Et la bonne chose à propos du revêtement, c'est que tu n'as pas à le faire. Vous pouvez vous en sortir avec un calcul simple et simple. Et donc, dans cette vidéo, nous allons en apprendre un peu plus. Vous savez, une partie de l'arithmétique de base derrière JavaScript et vraiment, nous allons juste rester avec l'addition de multiplication, soustraction et la division. Ok, alors allons-y et créons une variable ici. Donc, nous avons la variable numéro un est égal à 100 alors nous avons variable. Deux, c'est égal à je ne sais pas, disons 33.5. Honnêtement, je suis juste en train d'inventer des chiffres à ce stade. Maintenant. Si nous voulions faire, disons, diviser ces chiffres, disons que nous voulions diviser 100 par 33. On pourrait en faire un engourdi divisé par engourdi et vous pouvez voir que ça va me donner le nombre exact ici. Et c'est donc la division. C' est juste une ceinture. C' est tout ce que c'est. Et si on voulait multiplier ces nombres, c'est juste l'astérisque. Donc vous faites, Ah, décalez et puis le numéro huit et vous obtiendrez un astérisque, bien que sur certains claviers, cela pourrait être un peu différent. Mais sur un clavier standard, c'est le décalage huit pour obtenir cet astérisque, et vous allez faire la soustraction de multiplication n'est qu'un tiret, et l'addition est juste un signe plus, et c'est tout ce qu'il y a à faire. Et honnêtement, c'est très rare d'utiliser quelque chose de plus avancé que ça. Parfois, nous allons entrer dans quelque chose comme Module ISS, ce qui vous donnera le reste de quelque chose. Donc, si nous avons fait 10 module ISS trois puits, 10 divisé par trois va trois fois et puis il y a un reste de ceux qui était 369 et puis 10. Moins neuf, c'est un. Donc, en gros, on se souvient juste de Long Division. Eh bien, c'est comme ça. Et puis c'est le reste. Et puis nous avons aussi des exposants, ce qui est juste de multiplier les signes ensemble. Maintenant, il y a une règle. Lorsque vous travaillez avec des formules plus grandes, vous voulez également garder à l'esprit. Ah, la règle de la masse au lit et c'est en fait un acronyme différent pour plusieurs régions du monde. Mais la façon dont je me souviens c'est de la masse au lit. Vous avez des parenthèses, division exposants, puis multiplication, puis ajout supplémentaire, soustraction barre oblique, selon ce qui vient premier sous. Je ne sais pas comment épeler cette sous-attraction apparemment, et donc l'idée ici est quand vous avez des mathématiques avancées Ce n'est pas vraiment avancé, mais c'est un peu plus avancé. Je suppose. Il y a un ordre d'opérations et c'est le désordre du lit. Donc, chaque fois que vous voyez des parenthèses, faites d'abord vos parenthèses, faites les maths à l'intérieur de cela d'abord, puis les exposants à l'intérieur de ces parenthèses, puis la division et la multiplication, selon la première de ces deux éventualités de gauche à droite, puis addition ou soustraction, selon la première éventualité, de gauche à droite. Donc un exemple de cela serait si nous voulions savoir ce que 30 degrés Celsius est dans Fahrenheit afin que nous puissions faire Celsius est égal à 30. Et puis pour comprendre quelle est la réponse. Eh bien, vous pourriez voir Dio Time 1.8 plus 32 et en fait vous débarrasser de See, ça devrait prévisualiser pour nous. On y va. Donc c'est 86 F maintenant. L' ordre des opérations où cela devient important est que nous l'avons fait en arrière plus 32 fois , 1.8. Nous avions un nombre légèrement différent, et même si ce n'est pas une grosse affaire, il n'y a que 1,6 degrés de différence et même si ce n'est pas une grosse affaire, il n'y a que 1,6 degrés de différencepar rapport aux températures normales. Si vous étiez à 1,6 degrés dans un cercle, cela pourrait être significativement différent, surtout si vous essayez de pointer un télescope vers une étoile en particulier. Eh bien, tu vas rater ça de beaucoup. Et c'est donc juste un exemple simple. Mais votre ordre d'opérations est important. Et donc c'est la même chose que, tu sais, faire tes parenthèses en premier. Donc, vous avez C, qui est 30 multiplié par 1,8 plus 32. Et donc il va le faire d'abord et ensuite quoi que ce soit, il va ajouter 32 en plus. Et c'est donc un cours super rapide sur l'algèbre de base. Juste être simple ordre des opérations. Et encore une fois, vous n'avez vraiment pas besoin d'en savoir trop à ce sujet parce que pour la plupart, nous ne faisons pas beaucoup de maths jusqu'à ce que nous soyons dans vous n'avez vraiment pas besoin d'en savoir trop à ce sujet parce que pour la plupart, nous ne faisons pas beaucoup de maths jusqu'à ce que nous soyons dans le pétrin de quelque chose de super complexe. Et pour la plupart d'entre nous, ça n'arrive pas. C' était donc votre introduction à l'arithmétique. Juste comme un résumé rapide. Ici, vous avez num un divisé par engourdi pour donc vous avez un signe de division ici. La multiplication est votre astérisque. La soustraction n'est qu'un tiret. Juste le signe de soustraction, puis le signe plus à ajouter. Et si vous vouliez le module iss. Vous pourriez utiliser le signe du pourcentage. Et si tu le veux et les exposants, je n'ai aucune idée de ce que ça va servir. Oui, comme un très grand nombre. Vous utilisez deux astérisques côte à côte, donc il ressemble à multiplier, multiplier, ce qui est exposants. 19. Logic Boolean: Très bien, nous allons introduire un nouveau type de données appelé le booléen, et vous voyez qu'ici et encore, c'est juste un terme de programmeurs fantaisie pour soit quelque chose est vrai ou c'est faux. C' est ça. C' est un ou zéro, vrai ou faux, sur ou hors noir et blanc jour et nuit. n'y a pas entre les deux. Et vous savez comment les gens pensent toujours que les robots ou les machines ne pensent qu'en noir et blanc. Eh bien, ils n'ont pas tout à fait tort parce que beaucoup de logique se résume à vrai et faux, et il n'y a pas beaucoup de dons entre leurs maintenant affaiblis. Tu sais, quand il s'agit de machine learning, on peut donner une réponse comme 0.6, et cela se penche plus vers vrai que faux, et on peut travailler avec ça. Mais ce n'est pas la même chose que la logique booléenne. Nous savons que 0.6 est un nombre, et la logique booléenne est vraie ou fausse, donc nous pouvons travailler avec nous de différentes façons. Mais d'abord et avant tout, allons de l'avant et créons un script, et dans ce script, allons de l'avant et créons une variable booléenne. Donc c'est créatif. Variable est cat est égal à true. Parlons donc de mon chat Zephyr. Et nous pouvons dire : Mon chat est-il vrai ou faux ? Et donc nous pourrions dire dans une comparaison Opérateur est chat, et donc nous pouvons réellement le faire. Quelques façons que nous pouvons faire est que Cat est égal à vrai, ce qui est la façon la plus explicite de l'écrire. Mais c'est un peu inutile, car lorsque vous faites n'importe quelle sorte d'opérateur de comparaison, il vérifie toujours si cette instruction finit par être vraie. Et alors que cela est déjà vrai, donc nous pourrions raccourcir cela et juste dire est chat. C' était un journal de points de console. Zephyr est un chat, et allons de l'avant et des inspecteurs et ouvrir notre Conseil Conseil Conseil Conseil. Il est en fait commuté en bas. On y va, et ça dit que Zephyr est un chat, et si on voulait que ça soit faux, on pourrait juste dire, Hey, Hey, tu sais ce qu'est le chat faux ? Peut-être que j'ai un chien et que je l'ai appelé Zephyr aussi. Et rien ne va apparaître, Cependant, parce que nous savons à Cependant, propos de la déclaration d'autre, nous pouvons maintenant dire conseil journal point n'est pas un chat et nous y allons. Et maintenant, nous pouvons juste parler de vrai et faux est un chat n'est pas un chat. Nous pourrions même devenir beaucoup plus compliqués avec ça si nous le voulions. Et nous pourrions demander à l'utilisateur un nom afin que nous puissions dire de notre nom est égal à prompt et son nom Si le point de nom en minuscules est égal à nous faire que plus petit est jamais est chat est égal à vrai. Allons ce soir dans un virus. Eh bien, sinon nous allons sauver notre chat est égal à faux et je suis juste vraiment presque de lancer des points-virgules ici. Ils ne sont pas nécessaires, mais la bonne pratique d'être de toute façon parce que tout JavaScript, une fois compilé dans la production obtient Min ified et écrasé, et tout devient une ligne de javascript et donc il finit par mettre des points-virgules là-dedans toute façon, c'est donc une bonne pratique à avoir, mais pas toujours nécessaire. Et puis nous pourrions dire ici, vous savez, en fait, en fait, dans la vraie vie, nous aurions une autre logique et ici, basé sur la variable, est cat. Et puis nous pourrions dire si est alerte chat. Tu es un chat minou. Et nous avons une immunité contre Miami maintenant. Alerte. Tu n'es pas un chat. Tu n'es pas un enfant. Il a eu du tout. Ok, donc je me rafraîchis. Et si on marche à travers ça va me demander le nom en ton nom. Ok, je vais taper Zephyr. Je vais l'épeler, non ? Ces efforts, et il va prendre ce nom en minuscules et vérifier si cela correspond. Des minuscules jamais. Alors j'ai frappé. OK, et il est dit que votre chat va de l'avant. Il dit qu'il est d'accord, il y a une variable ici. Est Cat est égal à vrai. Est-ce une logique d'autres trucs magiques dans les coulisses, puis avec une autre déclaration If , si c'est une alerte de chat, vous êtes un chat. Et c'est donc votre introduction de base dans la logique booléenne. Maintenant, il y a une autre façon de faire ça. On peut raccourcir If et Ellis. Alors allons-y. Et tu sais quoi ? Oui, gardons ça. J' aime ça. C' est là-dedans. Cela rend nos programmes un peu plus compliqués, donc nous pouvons également raccourcir l'instruction if else. Donc si on voulait juste vérifier si quelque chose était faux. On pourrait le faire. Si c'est. Cat est égal à fausse alerte, pas un chat. Alors allons-y, et je vais lui donner une valeur par défaut aussi, donc je n'ai pas à prendre cela encore et encore. Zéphyr. Tu es un chat qui exécute la ligne 21 ici. Et rien parce que ce n'était pas faux, donc ça n'a pas été exécuté. Mais si on disait Henry, mes autres chats ? Il dit que Vous n'êtes pas un chat qui exécute la ligne 23, il va également exécuter les lignes 27 à 29 dit pas un chat. C' est juste là. Maintenant, nous pouvons aussi raccourcir ce raccourci de la même façon que nous l'avons fait. Si est chat, nous pouvons faire le contraire en disant, Exclamation travail est chat. C' est dire faux. Alors allons-y. Et ce que je vais faire ici, c'est aller de l'avant et mettre ça sur des lignes séparées. Déplaçons ça pour que vous puissiez le voir. Donc, cela va être faux aussi. Donc, c'est en gros dire que si le chat est faux, sortons ça. Si c'est le cas, le chat est faux. C' est ce que cela dit ici, vous pourriez aussi, si vous vouliez, Vous pourriez dire, Si est chat n'est pas égal vrai, il ne sera jamais vrai ou faux. Donc, si c'est faux que cela, est le bloc false à exécuter, exécuter. Et il y a donc plusieurs façons différentes de le faire. Généralement, la façon la plus courante que vous allez voir cela dans la nature est si est chat parce que c' faux. C' est le moyen le plus court de corriger si ce n'est pas un chat, et si nous nous dirigeons vers notre conseil ici, nous avons une variable appelée Is Cat. C' est faux. Et si on fait le type de chat, on va voir que c'est un booléen maintenant. Une chose que j'ai sauté que je ne voulais pas ignorer était quand vous avez un booléen où nous entendons VAR est, chat est égal à vrai ou faux. Nous ne le mettons pas entre guillemets comme celui-ci parce que c'est une chaîne qui n'est pas la même que true ou false. Une chaîne peut être n'importe quel nombre de caractères lettres qu'elle peut mélanger et faire correspondre des espaces et caractères spéciaux et tout ce que Booléen ne peut pas un booléen ne peut être vrai ou faux. Et donc c'est, je pense, un assez bon cours de crash dans la logique booléenne. Ça ne devient vraiment pas plus compliqué que ça. partie la plus compliquée est quand vous voyez si des instructions comme celle-ci. Donc, si est chat quand votre premier à regarder cela, Si vous n'avez jamais vu une déclaration if avant, vous êtes probablement penser, Qu'est-ce que cela signifie ? Eh bien, c'est dire que c'est vrai et si jamais tu vois si le point d'exclamation est un chat, c'est la même chose que de dire si le chat est faux, donc tu sais, gentil et simple comme ça. Ce que je voudrais que vous fassiez , c'est que vous savez, juste bricoler avec cela obtient une idée de la façon dont la logique booléenne fonctionne et juste créer quelques if else en utilisant la logique booléenne, vous allez pour voir des milliards chaque jour. C' est le moyen le plus rapide d'obtenir une réponse oui ou non. Et encore une chose avant d'y aller. logique booléenne peut également être représentée par des et des zéros. J' ai presque oublié que c'est important ici. Défilons ici, faisons de la place. Nous pourrions aussi dire loin est chat est égal à un, donc c'est le même que vrai, et Var est chat est égal à zéro. C' est faux, et cela fonctionne sur presque tous les langages de programmation. Si c'est Cata parce que ce sera vrai. Ou vous pourriez aussi dire, Si est chat et ce sera faux, quelque chose dans ces lignes et qui fonctionnera totalement pour vous. Alors peut-être aussi donner une chance à ça. Essayez d'affecter une variable à true ou false, puis essayez d'affecter la variable 21 ou zéro et jouez simplement avec certaines instructions if else . 20. Faire des listes avec des tableaux: Bonjour et bienvenue dans cette vidéo, nous allons parler de quelque chose appelé un Array. Maintenant, avec toutes les choses liées au développeur et tableau est juste un terme de fantaisie pour ah liste. C' est tout ce que c'est. Nous allons juste créer ah, liste de variables peut être, ah, liste de chaînes, ins booléens. On pourrait faire une liste de listes si on le voulait. Et dans certaines langues, comme Python, nous l'appelons même une liste. Mais en JavaScript est appelé un tableau. Alors allons-y et rendons cette plus grande cause je pense que nous pouvons faire tout cela sans réellement écrire de code dans un fichier. Et donc un tableau est vraiment, vraiment facile à créer, Donc il y a quelques façons différentes de créer un tableau, mais nous pourrions juste dire comme une variable R r, un R est égal à. Et puis nous avons un support rigide d'ouverture et de fermeture, et à l'intérieur, nous mettons peut-être mon nom, puis une virgule, et parce que c'est une chaîne, vous mettez des citations autour et puis mettez le nom de mon chat Zephyr, puis Akama. Et puis si je le voulais, je pourrais mettre vrai ici en tant que booléen, mais faux. Et il y a un booléen que je pourrais mettre mon âge là-dedans. Je pourrais y mettre l'agent Zephyrs. Maintenant rien de tout cela n'est mappé, donc ce n'est pas vraiment compréhensible à quoi toutes ces données se rapportent réellement. Mais si nous devions changer tout cela et dire qu'ils sont non, pas si appelés un sont appelées un sont appelées il noms est égal à une liste de noms que nous pourrions dire, Caleb Zephyr, Henry et un chien Oh, n'y allez pas nous allons et juste appuyez sur, Entrée. Et même si nous essayons d'y accéder à nouveau, nous avons une liste ici et elle indique entre parenthèses qu'il y en a quatre. Ça veut dire qu'il y a quatre objets pour qu'on puisse voir. Et ici, nous avons ces choses appelées Indices. Ces numéros d'air. C' est votre valeur d'index. Donc, il commence à zéro parce que l'ordinateur commence à compter à zéro. Donc zéro Caleb un est effort pour Henry trois Dog. Oh, maintenant non seulement nous pouvons parcourir toutes ces différentes valeurs et vous savez, performance ou l'inaction sur elles, nous pouvons saisir chacune individuellement aussi. Donc on pourrait dire var. Caleb est égal à des noms et si je voulais en prendre un, je pourrais juste saisir. Disons zéro. Maintenant, si c'est un peu déroutant, vous pouvez toujours tester cela dans votre console également. Donc, ce sont les noms, et ensuite vous avez votre support et votre numéro d'index, donc je veux le numéro zéro. Donc ce zéro ici va correspondre à ce zéro juste ici et va dire, Caleb, Caleb, et si je veux un chien Oh, j'utiliserais l'index numéro trois et encore les ordinateurs commencent à compter au numéro zéro pour un humain, le nombre zéro ne signifie rien. n'y a rien dans un ordinateur, les ordinateurs disent, Oh, le nombre zéro est en fait un nombre parce qu'un ordinateur ne comprend pas le concept de rien. Techniquement, il comprend juste qu'il y a un nombre et c'est zéro, donc ça commence à zéro. Donc, si nous voulons un chien Oh, nous utiliserons le nom du support dur du tableau, puis le numéro d'index, puis un support dur de fermeture. Et on pourrait appeler ça si on le voulait. Da go est égal à, et ensuite on pourrait faire ce qu'on veut avec Douglas pour faire des majuscules. Oh, dans toutes les casquettes comme ça. C' est ainsi que nous créons fondamentalement un tableau. Il y a une autre façon de créer un tableau. On pourrait faire un tableau de nombres. Appelons ça numbs est égal à, et nous pouvons juste lui donner un tableau réel. Nous avons appelé Array avec une majuscule A et ensuite nous pourrions faire 1 99 Je ne sais pas, 23 et vous pouvez voir qu'il a créé exactement le même objet. Donc vous savez, vous avez les supports durs par ici. On a des indices ici pour faire des engourdissements. Cela va devenir un peu déroutant, mais engourdi aussi. Si nous avons fait le nom de variable numbs et nous mettons l'index de deux dedans va mapper au nombre 23 donc, assez sûr, il le fait. Il correspond au numéro 23 maintenant. Ok, éclairons ça et travaillons avec les noms. Si nous prenons des noms, notre conseil nous dit automatiquement qu'il y a quatre points là-dedans. Que faire si nous voulons vérifier s'il y a réellement quatre articles ? Eh bien, nous pourrions faire des noms longueur point et c'est une propriété sur l'objet noms parlera plus propriétés et des objets et des méthodes et toutes sortes de choses complexes un peu tard. Mais pour l'instant, vous pouvez savoir que si vous faites une longueur de points, vous obtiendrez le nombre total d'éléments dans votre tableau. Et c'est la force que quatre ici correspond que pour leur maintenant, nous avons aussi une variable appelée Dog. Oh, et c'est une ficelle. C' est donc en quelque sorte hors du cadre de cette leçon particulière. Mais nous pourrions aussi utiliser la longueur sur DA Go pour obtenir le nombre total de caractères. Il y a donc une différence ici. La différence étant les noms est un tableau, et c'est là que les types de données, il est vraiment important que nous sachions quel type de données nous travaillons . Vos noms sont un tableau, et si nous utilisons la longueur des points va obtenir le nombre total d'éléments dans leur alors que le chien oh est une chaîne. Et si nous utilisons la longueur des points, il nous obtient le nombre total de caractères dedans. Et juste pour qu'on sache que travailler avec leur chien Oh c'est en fait Dogg. Oh, donc il y a cinq caractères et c'est pour ça qu'il en a renvoyé cinq ici maintenant. OK, c'est cool. C' est un tableau. Donc vous savez, nous avons deux façons différentes de créer un tableau que nous pourrions faire. Un R est égal à un tableau avec nos éléments dedans. Ou nous pourrions simplement faire le raccourci et utiliser des supports durs. J' aime utiliser les crochets durs, mais parfois j'utilise un R R K. Pourquoi juste être super explicite, en fonction du code sur lequel je travaille. Mais c'est à toi de décider comme tu veux le faire. Aucun moyen n'est faux. Ni les moyens, non ? Ok, regardons ajouter quelque chose à un tableau. Donc, nous avons un tableau appelé noms, et nous voulons ajouter une personne de plus ici ou un nom de plus ou peut-être un autre animal de compagnie. Allons de l'avant et disons que les noms poussent et nous voulons pousser quelque chose dans ce tableau. Mettons le mot perroquet là-dedans, et vous allez voir qu'il a automatiquement renvoyé le nombre d'éléments dans le tableau, et si nous reprenons des noms, nous pouvons voir qu'il y a toujours le chien Henry de Caleb. Oh, et le nouveau parent et le nombre total d'articles est de cinq maintenant, si on voulait sortir quelque chose d'ici. Qu' est-ce qu'on peut trancher ? Donc, disons que nous voulions obtenir Ah, le 1er 2 éléments ici, nous pourrions faire deux éléments est égal à noms tranche de points Où commencer, où finir a commencé ? Zéro. Et ça aussi. Et nous y voilà. Nous obtenons deux articles, Caleb met fin à l'effort. Et donc il a juste découpé le tableau et en quelque sorte juste de dire, Vous savez quoi, tranchez-le juste en bas de ce genre de ligne centrale. Vous êtes presque au centre et retirez Henry Dog un parent. En fait, ce qu'il dit est de copier Caleb dans Zephyr et de le mettre dans un nouveau tableau appelé deux éléments. Maintenant, si nous voulions juste obtenir le dernier élément et que vous allez voir celui-ci beaucoup, aussi, nous avons utilisé dot pop, nous avons utilisé dot pop, et c'est la même chose dans plusieurs langages de programmation. Il est clair que nous avons des noms ici et que nous voulons Parrot. Allons de l'avant et créer une nouvelle variable appelée Parrot est égal aux noms de points pop, et c'est juste point pop avec des parenthèses autour d'elle et regarder ce Perritt est maintenant égal à perroquet. Si nous avons fait le type de parent, et ce sera une chaîne parce qu'il n'a pas retourné un tableau. Il vient de retourner ce dernier article de l'année. Mais plus intéressant, ce qu'il a fait, c'est que si on tape des noms, il s'est débarrassé des parents. Ce qu'il a fait était à l'intérieur de saisir le dernier élément du tableau, en fait le supprimer de ce tableau et le mettre n'importe où. Maintenant, nous n'avons pas nécessairement besoin de stocker cela dans une variable non plus. On pourrait faire des noms de points pop, et ça ne va pas stocker le dernier n'importe où. Donc le dernier est le chien. Oh, ça revient, chien. Oh, mais nous n'avons pas commencé et variable, donc ce n'est plus accessible pour nous. Et si nous tapons des noms, nous n'avons que trois noms. Et c'est donc une bonne introduction dans une augmentation A. Devenez vraiment, vraiment puissant quand nous obtenons des boucles d'orteil Maurin. Ainsi, par exemple, pour chaque nom dans les noms, nous obtenons dire bonjour. Je m'appelle Caleb. Bonjour. Mon nom est toujours Hello. Je m'appelle Henry. Nous allons en trois lignes encore et encore et encore. Et si ce tableau était long de 100 éléments, nous n'aurions encore qu'à écrire trois lignes de code au lieu d'avoir à dire au conseil ce journal. Je m'appelle Caleb, puis le consulat. Mon nom est jamais considéré comme journal. Je m'appelle Henry Constant Log. Je m'appelle Dog. Oh, vous comprenez le point. Ainsi de suite et ainsi de suite. Nous allons parler beaucoup plus d'une augmentation sur la route. Mais pour l'instant, vous êtes maintenant pleinement introduit dans le monde d'une augmentation dans un nouveau type de données appelé un tableau. Et tout comme un résumé rapide de la chose la plus importante que vous pouvez savoir sur un tableau ce moment sont les indices. Donc si on a fait ça, on ouvre ça. Si nous voulions obtenir son effort, lequel en C utiliserons-nous ? On utiliserait le numéro un. Ce n'est pas le premier élément, car le premier élément est Caleb. C' est le deuxième article. Et donc nous mettons chaque nombre par moins un, parce que l'ordinateur commence à compter à zéro. C' est la clé à emporter ici. Donc, je recommande fortement que vous ayez un peu d'expérience dans l'écriture d'une augmentation. Tu n'as pas à faire grand-chose avec eux. Vous pouvez simplement créer un tableau simple avec des noms et ensuite peut-être juste obtenir le milieu en utilisant un index. Sinon, si vous vous sentez déjà assez à l'aise avec cela, passons à la leçon suivante. 21. Vérifier les types variables: d' accord. Jusqu' à présent, nous avons appris sur les chaînes, nombres, les tableaux, ins booléens, et il y en a quelques autres que nous allons apprendre sur la route. Mais pour l'instant, je voudrais expliquer une fonction particulière que j'ai utilisée pour vous montrer si quelque chose est un booléen ou une chaîne ou un tableau ou un nombre. Maintenant, derrière tout cela, ces différents types de variables se trouvent ce qu'on appelle un type de données ou, dans certaines langues, une structure de données. Alors allons de l'avant et regardons quelques-unes d'entre elles. Donc, il est créé de notre âge est égal à 30. Ok, nous savons que c'est un numéro, mais qu'est-ce que Javascript pense que c'est ? Est-ce que ça pense que c'est un numéro de chaîne ? Quelque chose comme ça ? Créons un autre dans votre nom Vyron est égal à JavaScript. Quatre débutants. Que pense JavaScript ? Cette variable est ? Var. Tu sais qu'on l'a déjà fait. Son chat, vrai ou faux ? Et nous allons créer un de nos voitures de plus est égal aux gens Wagon Lambeau et Audie Audio. Audie. Quelque chose comme ça. Oui, remettons-le sur une ligne. Et quand on rafraîchira ta page, on ne verra rien arriver. Nous avons déclaré un tas de variables, mais nous ne faisons rien avec elles. Allons de l'avant et connectons chaque console. Donc, consul dot log age est. Et ici, nous allons utiliser une fonction appelée Type Of et il va simplement dire âges et ensuite ce qu'il est réellement. Allons-y et sauvez-nous. Nous allons voir des âges un nombre qui est le type de variable ou le type de données. Allons de l'avant et en créer un autre ici. Dites que le nom est le nom de ce cours est ce qui va être chat va être à faire. Faire, c'est cata. Et enfin, nous avons des voitures. Les données sont-elles pour les voitures ? Ok, donc avant que je rafraîchisse ma page en fait va faire de l'espace ici pour que cela semble vraiment peu rebord une balle, nous savons que l'âge est un nombre, JavaScript nous a dit que c'est un nombre. Qu' est-ce que tu en penses ? Le nom est de Qu'est-ce que vous pensez que le chat est et que pensez-vous que les voitures sont ? À un moment donné, nous avons parcouru tous ces éléments, mais nous n'avons pas réellement exploré leurs types de données. Je veux dire, nous l'avons en quelque sorte , mais pas complètement. Si j'appuie sur, Actualiser sur cette page nous sauvera et appuyez sur Actualiser. On va voir que l'âge est un nombre. Nom est une chaîne est Cat est un booléen et voitures est un tableau, donc l'âge est un nombre. Le nom est une chaîne est un chat est un 1.000.000.000.000.000 voitures est Oh, qu'est-ce que c'est ? Ce n'est pas un tableau. Eh bien, c'est intéressant. Même si nous avons dit que c'était un tableau, c'est en fait cette chose appelée un objet. Et ce qui est intéressant, même si nous faisons cela, faites, faites, faites , faites , faites , faites, faites, continuons et changeons pour le tableau de mots. Nous allons voir que cela ne change pas Hit, rafraîchir, et il dit toujours que les voitures sont un objet. Qu' est-ce qu'il y a avec ça ? Eh bien, en JavaScript et dans beaucoup d'autres langages, langages de programmation orientés objet. Nous avons cette idée d'un objet, et un objet est vraiment juste une structure de données qui vous permet d' y avoir plusieurs composants . Alors qu'un âge dans ce cas, un nombre est juste un nombre. Vous ne pouvez pas vraiment faire trop avec cela, vous ne pouvez pas le transformer en majuscules ou en minuscules. Vous ne pouvez pas le faire apparaître, donc vous ne pouvez pas vousdébarrasser du vous dernier élément parce qu'il n'y a qu'un seul élément ici. Ce n'est même pas une liste ou un tableau. On ne peut rien faire avec ça. Nous ne pouvons pas y ajouter trop de fonctions personnalisées. C' est juste un nombre, alors qu'avec la variable appelée voitures, c'est un objet et nous pouvons en faire beaucoup plus avec des objets. Allons de l'avant et jeter un oeil à ce véritable point de voitures rapides et tout ce que j'ai à faire Vous pouvez voir qu'il dit, Can tableau Cat ici est frappé point et puis juste défiler vers le bas et vous pouvez voir toutes ces choses différentes que je peux effectuer sur ce type particulier d'objet. Maintenant, nous allons entrer dans les objets beaucoup plus en profondeur sur la route. Donc, vous n'avez pas à vous soucier de savoir la différence entre un tableau et un objet moment, parce que oui, eh bien, couvrir totalement cela dans ce cours. Mais la chose que je voulais vous faire prendre conscience est différents types de données en utilisant le type de fonction d'un type de voitures, et cela nous donne un objet. Pourquoi est-ce important ? Eh bien, regardons la différence entre une propriété particulière. Donc si on vieillit, longueur de points ce qu'on n'a pas d'âge, chéri. C' est parce qu'il y a un numéro. n'y a pas de longueur à un nombre. Je veux dire, en termes humains, il y en a. Mais à un ordinateur, il n'y en a pas. Il dit juste que le numéro. Je veux dire, qu'est-ce que tu veux pour moi ? Et le nombre est le nombre, et donc les chiffres sont assez basiques. Si nous avons dit la longueur du point de nom, nous savons que c'est une chaîne. Si nous avons nommé longueur de point, nous savons que celui-ci est en particulier une chaîne, donc il va compter le nombre de caractères qu'il contient. Donc J a v A S e r I p t espace pour l'espace b e g i N e. R s 22 caractères maintenant que si nous avons fait est la longueur de point de chat indéfinie. Il n'a même pas de propriété appelée length. La même chose avec les nombres n'a pas une propriété appelée comme nous ne pouvons pas l'utiliser, mais avec les voitures parce que c'est un objet ou comme nous le connaissons actuellement comme un tableau, nous pouvons faire la longueur des points et cela retournera trois. Ce qui est important à savoir, c'est que si j'ai fait ça mal, si nous l'avons fait, si nous avons fait des voitures de longueur, nous allons en obtenir trois comme le nombre total de voitures que nous avons. Volkswagen, Lambo et Audie. Mais si on a nommé la longueur des points, ignorez celle que j'ai foiré avec la faute de frappe. Si nous n'avons pas joué la longueur des points, nous allons obtenir le nombre total de personnages, et c'est donc très différent. Et donc si vous essayez de faire la longueur des points sur une chaîne par rapport à la longueur des points sur un tableau, vous allez obtenir des réponses différentes. Et cela pourrait changer votre logique sur la route, vous pourriez dire, si le tableau a cinq noms et qu'il fait quelque chose. Mais si votre logique dit, si la longueur de point variable est égale à cinq et que quelqu'un tape simplement un mot avec cinq lettres dedans, cela va également se déclencher. Et donc c'est une sorte de différence entre les types de données est, vous savez, certains d'entre eux ont certaines fonctions ou propriétés sur eux que nous pouvons utiliser, et certains d'entre eux ne le font pas et donc vous allez inévitablement tomber dans ce chemin où vous ''re comme, oh la longueur de point sur le nom est 22 mais la longueur de point sur les voitures est de trois. Pourquoi c'est ça ? Parce que quand je compte les voitures, il y en a aussi. Plus cinq est sept plus quatre est 11. Donc, vous pensez que le retour retour 11. Mais non, ça ne le fait pas. Il retourne trois causes trois éléments là-dedans. Maintenant, tu n'auras pas besoin de ça tout de suite. Mais il est très bon de savoir, et j'ai été de temps en temps vous montrant la fonction appelée le type de juste pour vous montrer ce que c'est. Donc, si vous êtes un jour préoccupé par ce qu'est une variable particulière ou quel est le type de données, vous pouvez toujours utiliser le type de fonction de, mettre votre nom de variable là-dedans avec des parenthèses autour d'elle et ressemble juste à ça. Et ça te dira Oh, je suis booléen. Oh, je suis un objet. Je suis un numéro. Donc il n'y a rien à voir avec cette leçon particulière. Je voulais juste vous montrer ceci juste pour que vous soyez au courant parce que vous allez rencontrer ce problème sur la route, et je voulais juste que vous soyez prêt pour ça 22. Casting variable: accord, nous avons examiné la vérification des types de variables. Nous avons examiné différents types de données ou types de variables. Nous connaissons des nombres, chaînes booléennes, des tableaux, des choses comme ça. Mais de temps en temps, vous allez vouloir faire cette chose appelée typecasting. Donc, si vous avez, par exemple, ah, l'âge variable est égal à 30 et que vous voulez que ce soit bien un nombre, actuellement, c'est une chaîne. Nous allons faire que le conseil ne consigne pas le type d'âge, et il dit que c'est une chaîne, mais c'est en fait un nombre, a juste des citations autour d'elle. Donc, ce que nous pouvons dio est cette chose appelée type casting, où fondamentalement, nous prenons une variable particulière et nous essayons de la transformer avec force en un type différent de variable. Ainsi, par exemple, l'âge que nous pourrions taper nous jeter comme un nombre en tapant le numéro avec la fin du capital, puis l'âge. Et si nous actualisons ça, il dit maintenant que c'est un numéro. Donc, c'est comme ça que nous dactylisions en nombre. Maintenant, là où cela devient important, c'est, disons que vous demandez l'âge de quelqu'un jusqu'à présent, l' âge est égal pour inciter votre âge est, et c'est faire le conseil point log type d'âge, et nous allons voir ici, Je vais taper 30 et ça va dire que c'est une ficelle. Ce que nous prenons dans un nombre. Nous n'avons pas tapé une force, mais parce qu'il ne sait pas ce que vous allez mettre en lettres ou en chiffres ou vrai ou faux , il suppose simplement que ce sera une chaîne. Donc, si nous tapons true, c'est toujours une chaîne. Mais ce que nous pouvons faire, c'est que nous pouvons taper ceci maintenant pour que nous puissions dire que l'âge est égal à l'âge du nombre, et quand nous faisons cela, cela fonctionnera. Cependant, il y a une petite mise en garde ici quand nous essayons de le faire à nouveau et nous allons taper le mot heures. Mais mon nom Caleb dit que c'est toujours un numéro qui est cool. Mais quel est ce chiffre ? Dactylographions et vieillissons, dit Nan. Il s'agit d'un autre type de données JavaScript, et A N signifie pas un nombre. Ce n'est pas un numéro. Il ne sait pas quoi en faire. Et si nous actualisons votre page et nous allons simplement taper 123 et vérifier l'âge ici, il est écrit 123 donc ça va marcher ou ça ne va pas marcher et donc vous devez vraiment savoir ce que vos données sont censées être. Si vous demandez l'âge de quelqu'un, vous pouvez toujours dire, l'âge est-il réellement le nombre ? Et maintenant, nous pouvons essayer de tester cela. Nous pouvons dire, Si l'âge alerte, vous avez un bon numéro. Allons de l'avant et donnons un coup à ça, c'est du type à Caleb, et ça ne marchera pas pour moi, est-ce pas ? Mais si on en faisait 30 ? Il dit que vous avez un bon numéro, et c'est parce que ce numéro s'est avéré être un bon nombre. Et donc quand nous apprenions à propos de milliards, fondamentalement n'importe quel nombre en JavaScript qui n'est pas le nombre zéro est vrai dans certains. autre langue est que ce pourrait être les opposés. Mais en Javascript, à moins qu'il ne soit explicitement zéro, il est toujours considéré comme vrai. Nan est considéré comme faux. Ce n'est pas un nombre, mais si vous lui donnez un autre numéro, c'est vrai. Donc ça marche si bien. Maintenant, nous pouvons dire que nous avons un bon nombre ici. On peut détecter si c'est un nombre réel. Ok, donc maintenant on a un bon numéro. Donc maintenant, ce que nous pouvons faire, c'est que nous pouvons réellement détecter si le nombre est quelque chose. Maintenant, nous n'avons pas encore eu plus d'opérateurs de comparaison, et c'est un peu un avant-goût dans la prochaine douzaine. Mais nous pourrions dire que si l'âge est supérieur ou égal à 18 journal de points du conseil, vous pouvez voter. Alors maintenant, ça va me demander mon âge. Je vais mettre un agent va le lancer comme un numéro va dire, est-ce vraiment le nombre ? Oh, il est en fait alerte numérique que vous avez un bon numéro et ensuite va dire, Hey, si votre âge est supérieur au nombre de 18, vous pouvez voter et ainsi dit que vous avez un bon numéro. Et bien sûr, vous pouvez voter et aussi les journaux de console, le type d'âge, qui est un nombre que nous pouvons également prendre. Lancez dans l'autre sens. Il n'a pas besoin d'être d'une chaîne à un nombre. On pourrait passer d'un numéro deux cordes. Disons que de notre âge est égal à une chaîne. Non. Nancy, la mauvaise façon de notre âge est un nombre de 30 et nous voulions dire en fait, l'âge va être une chaîne qui nous a forcés à être un dialogue de corde et de consul. Mettons l'âge là-dedans et le type d'âge. Euh, c'est une ficelle maintenant. La bonne chose à ce sujet est parce que c'est maintenant une chaîne que nous pouvons faire la longueur des points d'âge. Nous pouvons voir qu'il y a deux caractères là-dedans, alors qu'avec un nombre nous n'étions pas en mesure de le faire avant. Et il y a donc des avantages à typecasting. Nous pouvons aussi le faire avec comme booléen est et des choses comme ça aussi. Alors essayons ça. C' est se var est Cat est égal à sa chaîne, Mais allons-y et jetons ceci comme un booléen. Donc, est Cat est égal à Booléen de Is Cat, Donc nous sommes juste en train de se surpasser avec lui-même en tant que booléen. Voyons ce qui se passe ici. C' est copier ceci vers le bas et peu commun. Et changeons l'âge en Cat. Regarde ça. C' est vrai, et il a compris que vrai comme un mot pourrait être confirmé aussi vrai qu'un booléen. Et maintenant, nous pouvons dire, si est chat ou si n'est pas un chat, ok, et faisons un de plus ici. Faisons cours Var est égal à Js pour les débutants. Maintenant, nous savons que c'est déjà une chaîne parce que bien, nous l'avons déclarée comme une chaîne. Dès que j'avais des espaces, nous avons mis des citations autour d'elle. Disons que nous voulons transformer cela en un tableau. Ce que nous pourrions faire est bien sûr égal à tableau. Bien sûr. Alors maintenant, quand je rafraîchis la page et qu'on va bien, euh, regarde ça. Il est maintenant dans une course. Il n'y a qu'un seul élément dedans. Il n'a vraiment que celui en desy ou index pour Heather. Ah, mais c'est un tableau. Et maintenant, nous pourrions faire, par exemple, cours enseigné longueur et obtenir combien d'articles sont ici ? Eh bien, il y a seulement celui qui n'est pas la même chose que d'obtenir la longueur d'une chaîne qui serait supérieure à 10 quel que soit ce nombre va être. Et en fait, on pourrait le faire. Bien sûr. Zéro ne fait pas de longueur. C' est 16 et donc affaiblir typecast dans fondamentalement n'importe quel autre type de données en javascript. Tout ce qu'on a à faire c'est dire Hey, c'est un booléen. Hé, c'est une ficelle. Hey, c'est un tableau ou hey, c'est un nombre et comme nous apprenons plus de types de données, nous pouvons en créer de nouveaux aussi. Et donc fondamentalement, c'est comme ça que nous lançons des variables, et c'est vraiment tout ce qu'il y a. Et cela vous aide vraiment lorsque vous utilisez certaines propriétés ou méthodes ou que vous essayez de comprendre comment travailler avec des types de données particuliers à nouveau. Cela devient de plus en plus pertinent à mesure que nous traversons ce cours, et il devient de plus en plus pertinent dans le JavaScript moderne. Il est donc bon de savoir, même si vous ne l'utilisez pas tous les jours en ce moment, vous finirez par l'utiliser un peu plus tard. 23. Plus d'opérateurs de comparaison: déjà. Jetons un coup d'oeil à quelques autres opérateurs de comparaison. Jusqu' à présent, nous avons vraiment seulement travaillé avec est égal ou n'est pas égal à. Et si quelque chose est vrai ou si quelque chose est faux, il y a en fait beaucoup plus affaibli Dio, par exemple, nous pouvons voir si quelque chose n'est pas égal à ce que nous avons en quelque sorte tamponné, mais pas formellement. Donc nous allons jeter un coup d'oeil à celui-ci dans un petit peu. Nous avons aussi est supérieur ou égal à est supérieur à est inférieur à est inférieur ou égal à Teoh. Et puis nous avons, enfin, un opérateur de comparaison strict, qui arrivera à la toute fin de cette vidéo. Alors les premières choses d'abord. Regardons l'opérateur n'est pas. Allons de l'avant et commentons cela, et nous devons donc pouvoir comparer. Quelque chose n'est pas. Nous avons déjà examiné cela, mais jetons un coup d'oeil formellement maintenant. Nous avons donc une variable. Et disons que le cours est égal à juste un cours JavaScript ou quelque chose, vous savez, simple à comparer. Et nous pourrions dire que si le cours est égal au journal de points Js Conseil est le cours de J s. Et allons-y, rendons ce petit peu plus petit et rafraîchissons notre page. Et il est dit, est un cours de J.S régulier. Ok, pas de problème avec ça. Mais que faire si ce n'est pas le cas ? Eh bien, ça ne va rien faire. Mais allons-y et changeons ça. Disons que si le cours n'est pas un cours J s, disons que si le cours n'est pas un cours PHP maintenant, cette logique n'a pas vraiment beaucoup de sens. Mais c'est un bon exemple de la façon d'utiliser le contraire. Un opérateur de comparaison. On est en train de dire ici. JavaScript. La chaîne JavaScript n'est pas égale à PHP. Sont-ils différents ? C' est correct. Cette déclaration est correcte, donc elle renvoie true. Et donc ce que l'ordinateur voit dans les coulisses, c'est Yep. Si c'est vrai, ce qui est vrai, exécutez ceci. Et donc c'est une sorte de comment nous arrivons à ce point en utilisant l'opérateur not ou l' opérateur not equal. Plutôt ensuite, nous avons plus que donc allons-y et créons un âge. L' âge est égal à 17 et nous pouvons dire que si l'âge est supérieur à 10, puis le journal de points de console vous pouvez jouer au football ou quelque chose dans ces lignes. Allons de l'avant et rafraîchissons-y. Ça dit que tu peux jouer au foot maintenant. Ce que cela fait est de nouveau. Fondamentalement, nous pouvons remplacer ce dicton un 17 plus grand que le nombre 10. Oui, ça l'est. Donc, cette instruction s'avère vraie, et parce que c'est vrai, elle exécutera ce bloc de code. Que se passe-t-il si nous disions, Oh, pour jouer au football professionnel, vous devez avoir 18 ans ou plus. Tu peux jouer au soccer pro. Rallongeons cette étape plus petite et donnons ça une économie. Rien ne se passe parce que cela renvoie faux. Cela veut dire, si l'âge de 17 ans est supérieur à 18 ans était 17 un plus grand nombre que 18 ? Non, cela s'avère faux, donc il ne s'exécute pas. Rappelez-vous si les déclarations ont toujours besoin que cette conclusion finale soit vraie. Ensuite, nous pouvons faire la même chose, mais nous pouvons dire est supérieur ou égal à. Quand utiliserons-nous ça ? Disons que votre âge est de 18 ans et que vous devez avoir au moins 18 ans pour voter, vous pouvez voter. Nous pouvons également faire une déclaration d'autre if ici. Sinon, si l'âge est supérieur à 21 ans, je nous prépare délibérément pour un échec sur celui-ci, et je te montrerai dans une seconde, tu peux boire de l'alcool. Ça dit que tu peux voter. Mais c'est aussi vrai. L' âge est également supérieur à 21 ans maintenant. Nous avons appris cela il y a un peu de temps, mais il est toujours bon de revenir sur les fondamentaux et JavaScript. Ça va de haut en bas et dit : Oui, Oui, c'est vrai. C' est l'instruction if à laquelle nous voulons nous connecter et ne vous inquiétez pas de quoi que ce soit d'autre en dessous . Donc, ceci d'autre si l'instruction est ignorée. Mais ce que nous pouvons faire, c'est si nous nous débarrassons de l'autre et en créons un autre. Si déclaration, il dit toujours, vous ne pouvez voter. Mais si on fait ça, on peut voter et boire de l'alcool. Là encore, où utilises-tu quelque chose comme ça ? Si vous vérifiez l'âge de quelqu'un,les jeunes de 18 ans ont le droit de voter. Si vous vérifiez l'âge de quelqu'un, Ce ne sont pas des personnes de plus de 18 ans ou des personnes de plus de 17 ans. Dans la vie, nous disons que les personnes âgées de 18 ans ou plus ont le droit de voter les personnes âgées de 21 ans ou plus aux États-Unis sont autorisées à boire de l'alcool. Nous pouvons aussi faire fondamentalement le contraire, donc nous pourrions dire, Mais c'est une variable. Faisons quelque chose de différent ici. Le nom long est égal à Caleb Tallinn, donc ce sera mon nom complet. utilisons pas longtemps parce que ce n'est pas un nom long. Mais faisons le nom complet. Et nous pourrions dire, si le nom complet point Longueur est supérieur à 10. Journal de confidante, nom long. Et ça dit que j'ai un long match. Ok, eh bien, on l'a déjà fait. Mais que faire si c'est moins que ce que nous pourrions dire C'est un nom court, C'est maintenant que nous pouvons dire, Hey, si ce nom a 012345678 ou neuf caractères parce qu'il est inférieur au nombre 10 cela dira Nom court. Il n'a pas ça. Allons de l'avant et raccourci mon nom à mon prénom et il dit nom court. Donc c'est moins que l'opérateur. Nous pouvons aussi faire moins ou égal à si nous le voulions. Disons que notre nom est égal à John Smith ce que nous avons ici. On a 10 personnages ici. C' est un nom parfait, en fait. Devrait être utilisé dans le premier exemple que nous pourrions faire. Si la longueur du point de nom est inférieure ou égale à 10 log du Conseil, la longueur totale est inférieure ou égale à 10. Et allons-y. Et nous allons aussi mettre cela sur de nouvelles lignes parce que nous pouvons. JavaScript nous obtient, nous donne toutes sortes d'espaces blancs. Mettez ceci comme le deuxième paramètre ici et, disons que la longueur totale du point de nom est inférieure à 10 et nous pouvons voir que la valeur réelle ici est 10. Lesquelles autres devons-nous traverser ? Ah, je pense, vraiment. Le principal que nous avons ici est la comparaison stricte. Donc tous ces autres air mathématiques vraiment basiques est quelque chose de plus que moins que égal à Vraiment, c'est tout ce qu'il est. Là où il devient un peu bizarre est le triple signe égal en JavaScript. Ceci est une comparaison stricte, donc cela signifie que non seulement la valeur doit correspondre, mais que le type de données doit également correspondre, et c'est en fait beaucoup plus de performances. Cela fonctionne beaucoup mieux sur votre ordinateur. C' est un code beaucoup plus rapide car il n'a pas à essayer de déterminer vraiment d'autres facteurs . C' est juste que c' est un bon type de données ? Oui. Est-ce la bonne valeur dans le type de données ? Oui, avancez. Il n'a pas besoin d'essayer les orteils, disons , , c' est trois comme trois ? Je veux dire, JavaScript ne le sait pas. Donc, il essaie de le comprendre ou est vrai. Tu sais, la même chose que vrai. L' un est une chaîne, un est un booléen, et il doit en quelque sorte comprendre cela. Alors que si vous pouvez vous en débarrasser en utilisant une comparaison stricte, vos programmes, vos scripts seront en fait beaucoup plus rapides. Ce n'est pas sensiblement plus rapide à l'œil humain. Cependant, lorsque vous avez affaire à de gros programmes, peut-être que vous commencez à compiler beaucoup de données. Comme ce que fait Netflix. Peut-être que tu veux ce genre de performance. Peu importe, vous allez voir un opérateur strict dans la nature un peu parce qu'il est assez commun dans JavaScript moderne. Alors jetons un coup d'oeil à ça. C' est le plus gros à prendre note. L' âge est égal à Disons 30 et regardez ceci. Si l'âge est égal à 30 Consul dot log, vous avez 30 et assez sûr, il dit que vous avez 30. Bien que l'âge soit une chaîne et que ce soit un entier ou un nombre, sont deux types de données différents, et donc cela fonctionne toujours. Il comprend toujours que Hey, ouais, ça pourrait encore être un numéro aussi bien. Donc, cela signifie que JavaScript est un langage faiblement typé. Cela signifie que vous pouvez en quelque sorte gâcher avec elle et échapper à certaines des règles générales que vous trouverez dans les langages de programmation comme C ou Python. Alors maintenant que se passe-t-il si nous faisons une comparaison stricte ? Si nous faisons la comparaison de bande avec trois signes égaux, faisons que plus grands trois signes égaux. Cela ne va pas s'exécuter. En fait, nous allons à un point de console d'instruction else faire, avertir, mauvais type de données, et rendons cela plus petit. Allons-y. Enregistrez cela et actualisez la page et il indique le type de données incorrect. Pourquoi est-ce le mauvais type de données ? Eh bien, c'est parce que nous lui avons donné une chaîne et nous disons par rapport à un nombre, donc ce que cela dit est, String 30 est égal au nombre 30. Ce n'est pas la même chose dans le monde des types de données. Ils ne sont pas les mêmes. La valeur est la même pour un humain. C' est la même chose pour un ordinateur. C' est différent. Et donc vous pouvez en quelque sorte penser que la chaîne est égale au nombre. Eh bien, ça ne marche pas de la même façon. Vous ne pouvez pas comparer une chaîne à un nombre qui est comme donc c'est un peu comme comparer une pastèque à un rocher. Ah, oui, leur forme peut être la même, mais fondamentalement, ils sont différents. Ce sont des choses complètement différentes. Et donc vous allez voir cette comparaison stricte dans la nature, et je veux juste que vous soyez prêt pour ça. Allons-y et retouchons ça. Allons-y et économisons. Rafraîchir dit. Type de données incorrect. Et si nous changeons cela en un entier ou un nombre, comme on l'appelle, JavaScript dit, vous avez 30 ans. Même si je l'ai fait, 0.0 dit toujours que tu avais 30 ans. Vous savez, si vous venez d'un autre langage de programmation, vous êtes probablement familier avec les décimales ou les flotteurs en JavaScript, les décimales, flotteurs et les entiers sont tous la même chose, c' est égal à un nombre. Allons de l'avant et jetons cela sur une nouvelle ligne, afin que nous puissions garder cela dans nos notes. Et c'est donc une petite introduction rapide, je suppose. Et c'était donc la leçon des opérateurs de comparaison. Où nous avons regardé n'est pas égal est supérieur ou égal à est supérieur à est inférieur ou égal à n une comparaison stricte. Ce sont les opérateurs les plus communs que vous allez trouver est très rare, que vous jamais trouver autre chose que ceux-ci. Et comme un dernier exemple ici avec la comparaison stricte, Allons-y et retournons cela en arrière. Tu sais ce que je veux dire ? Une copie, tout ça parce que j'aime cet exemple comme il est. Donc, il est commun est mort dehors. Copiez ce collé là plutôt et faisons 30. Donc, cela va nous donner un mauvais type de données. Eh bien, dans la dernière leçon, nous avons parlé de la typographie ou de la coulée variable. Allons-y et forçons à être un numéro Bam. Ça marche. Donc nous avions une chaîne à l'origine et nous avons dit, Oh, c'est une chaîne. Nous nous attendons à ce que ce soit un numéro qui va de l'avant. Nous voulons toujours que ce soit un numéro. Donc, nous avons plus écrit la variable appelée Age. Nous tapons le casted comme un nombre et le paramètre de la fonction de nombre que nous voyons ici est fondamentalement celui et sortie 30 comme un nombre. Et maintenant, quand nous faisons la comparaison stricte, cela fonctionne. est donc tout ce que nous avons pour plus d'opérateurs de comparaison. Prenez certainement quelques minutes de votre journée et bricolez avec ceux-ci, surtout le dernier avec des comparaisons strictes. C' est une question très importante. Tous les autres, je pense que la plupart des gens peuvent les obtenir. Preeti rapidement. C' est vraiment juste Hey, un numéro est plus grand que l'autre ? Ou est-ce qu'une chose correspond à autre chose ? Vous n'avez pas besoin d'être un professionnel à ce stade, vous avez juste besoin d'être un peu familier afin que dans le prochain mini projet, quand on vous demande de créer une comparaison stricte ou qu'on vous demande d'écrire du code pour un client ou votre prochain employeur et vous voyez quelque chose comme ça, vous ne partez pas. Qu' est-ce que c'est ? Tu peux dire ? Oh, je sais exactement ce que c'est. Donc, voilà, vous préparer pour le succès. Quand vous avez terminé, passons à la prochaine leçon et pensons que la prochaine leçon sera un mini-projet. Alors, nous allons nous amuser un peu avec ça. 24. Mini projet #3: bienvenue à de nombreux projets. Numéro trois dans ce petit défi, ce que j'aimerais que vous fassiez est de demander un numéro à l'utilisateur, puis de lancer ce nombre à un nombre réel parce que nous savons ce qui va revenir sous forme de chaîne. Donc, lancez-le comme un nombre, puis assurez-vous que ce nombre est valide. Il ne peut pas être N a n et n signifie pas un nombre. Assurez-vous qu'il s'agit en fait d'un nombre. Et puis si ce nombre est supérieur à 18 ou 21 ce que vous voulez, alors et changez le texte à l'écran pour dire oui, vous êtes autorisé. Donc, comme quelques conseils ici, Donc l'étape numéro un a demandé le numéro d'utilisateur. J' ai demandé à l'utilisateur un nombre que vous allez utiliser invite lancer l'entrée à un nombre. Vous allez utiliser le numéro avec une fin de capital. Assurez-vous que le numéro est valide. Donc, vous allez avoir besoin d'une déclaration if là-dedans, et puis si ce nombre est plus de 18 vérifier ou changer du texte sur la page pour dire félicitations. Vous avez plus de 18 ans ou oui, vous pouvez voter ou, vous savez, faire une action particulière. Donc je sais que ce mini projet est un peu sec, mais c'est vraiment, vraiment une bonne pratique parce que vous allez utiliser des choses comme ça tout le temps dans la vraie vie . JavaScript. Maintenant, comme toujours, je vais vous fournir ma solution ainsi que beaucoup de choses dans la vie. Il y a différentes façons d'y arriver, mais je vais vous montrer ma façon de le faire. Mais j'aimerais que vous puissiez, en quelques secondes, mettre en pause cette vidéo et lui donner un coup de vue par vous-même. Et si vous êtes coincé, alors vous savez, reprenez la vidéo et vous pouvez regarder ma solution. Ou si vous voulez juste, vous pouvez juste regarder ma solution et ensuite essayer de l'entrer vous-même. Quelle que soit la façon qui vous aide à apprendre le meilleur. D' accord. Je vais donc commencer sur ce mini projet. Les premières choses d'abord. Nous devons demander à l'utilisateur un numéro, lancer l'entrée sur un nombre, vérifier que le nombre est valide, puis si ce nombre est 18, dites quelque chose comme si vous êtes autorisé à voter. Alors allons de l'avant et écrivons du javascript. Donc, ici, nous voulons demander à l'utilisateur pour un nombre de notre nombre est égal à invite. Entrez un nombre. Deuxième étape. Nous devons nous lancer comme un nombre parce que si nous avons consul le type de log de point engourdi, ce sera une chaîne. Rendons ça un peu plus grand qui finira par être une corde. Donc nous avons besoin que ce soit un numéro. Alors allons de l'avant et prenons nous jeter comme un nombre engourdi et un nombre. Là, nous allons et nous devons nous assurer que ce nombre est réellement valide, parce que si quelqu'un tape quelque chose qui n'est pas un nombre va retourner et A n et A et pas un nombre. Donc nous devons dire, si engourdi, nous devons dire, Hey, c'est certainement un nombre Donc si c'est un nombre, allons de l'avant et exécuter quelque chose ici et ensuite nous pouvons dire si engourdi est égal à ou supérieur à 18. En fait, l'instruction dit plus de 18 ans. Si tu veux t'ennuyer, mon pote, tu sais qu' mon pote, on va faire plus grand que le nôtre ou égal à. Donc, si vous avez 18 ans ou plus, vous pouvez saisir un élément de la page et changer son nous allons créer un élément ici de notre Elem est égal à document point get élément par i d. Et appelons simplement ceci l m. Faites-en une étape plus petit ici afin que nous puissions tout voir en une ligne et ensuite nous pouvons dio l m point dans son texte Ou nous pourrions faire inter html et dire que vous êtes 18 ou plus maintenant c'est tout génial, mais obtenir un élément par i d avec une idée d'élément de e l E M n'existe pas encore, alors allons-y avant et de se débarrasser de cela. Et créons un H quatre avec un i d de e l E m et laissez-le à cela. Alors actualisons votre page. Entrez un nombre. Allons-y et tapez Caleb. Pas avec des citations, bien que les citations ne font pas mal. Ouais, rien ne se passe. Et hé, au fait, ça est revenu comme une ficelle. Allons de l'avant et type de numéro. Disons que j'ai 17 ans Ok, eh bien, ça ne va toujours pas marcher parce que, vous savez, vous savez,cela aurait pu être exécuté, mais il n'a pas passé cette instruction if, et il dit toujours que c'est une chaîne qui est censé le faire. En fait, descendons ici et changeons de chaîne en nombre. Donc, cela va maintenant dire chaîne et les nombres, alors ne pas ici, il va dire chaîne et le nombre. Rafraîchissons une fois de plus. Donnons-lui mon âge approprié de 30 ans et ce 2e 1 ne s'est pas montré parce que je n'ai pas enregistré mon dossier. Alors nous allons vite faire cet âge de 30 ans. Il est là. Numéro de chaîne. Vous avez 18 ans ou plus, et c'est le mini projet en un mot. Donc c'est tout ce qu'on fait. Ok, donc si tu veux aller plus loin, on n'a pas encore appris ça. Mais si vous le vouliez, vous pourriez transformer nos deux déclarations if, parce que c'est l'un à l'intérieur de l'autre en un. Si déclaration. Alors allons de l'avant et supprimez-le et amenez-le orteil une ligne et disons, et donc ce que cela dit est si le nombre est réellement nombre, Donc si c'est vrai et que le nombre est supérieur à 18, alors exécutez ceci. Sinon ne va rien faire. Essayons encore ça. 30 bam ! Juste comme ça. Donc on n'a pas appris ça. Je ne m'attends pas à ce que tu le saches maintenant, mais c'est une petite chose cool qu'on peut bricoler à l'avenir. Donc, c'est beaucoup de projet numéro trois tous emballés. Si vous ne nous avez pas donné un coup de feu pour essayer définitivement cela par vous-même, essayez de ne pas avoir à référencer le matériel vidéo si vous n'avez pas à le faire et essayez de le faire simplement à partir de la mémoire. Si vous êtes coincé. Hé, c'est bon. Reprenez la vidéo. Vous pouvez le surveiller. Pas de problème là-bas, mais c'est bon de faire transpirer votre cerveau une fois que vous avez fini avec ça. Si vous êtes satisfait de votre solution, passons à la prochaine leçon. Et hé, n'oublie pas. Prenez une capture d'écran de votre code et jetez-le dans votre projet ci-dessous pour partager vos compétences afin que non, je puisse jeter un oeil à certains de votre manteau et vous pouvez partager et inspirer d'autres personnes aussi bien 25. Fonctions: Hey, comment bas ? J' espère que ce projet de dernière minute s'est bien passé pour vous dans cette vidéo. Nous allons apprendre un fondamental de la programmation, et c'est ce qu'on appelle une fonction. Maintenant. Une fonction est vraiment juste une façon d'écrire un morceau de code afin que vous n'ayez pas à l'écrire encore et encore et encore et encore. Il y a un avantage et un inconvénient à cela. Donc, l'avantage d'écrire juste du code une fois et de l'utiliser encore et encore est qu'il est moins de code à maintenir, donc vous n'avez pas à vous soucier de réparer quelque chose. S' il y a un problème, vous n'avez pas à le réparer 10 fois. Vous pouvez simplement le réparer une fois, et il prendra effet 10 fois différentes ou partout où vous utilisez. Il y en aura dans une seconde. Tu as vraiment besoin que les orteils le réparent au seul endroit. Maintenant, une fonction a un inconvénient, et cet inconvénient est qu'elle est un peu difficile à comprendre au début, donc si vous êtes tout nouveau dans la programmation, cela pourrait nuire un peu à votre cerveau. Mais supporte moi là-dessus, je veux que vous travailliez là-dessus jusqu'à ce que cela soit logique parce que vous allez voir des fonctions dans chaque langage de programmation. Vous allez voir des fonctions aussi souvent que vous voyez des variables dans le monde de JavaScript, et cela rend vraiment votre code plus facile à utiliser. Donc, dans cette vidéo, je vais juste vous montrer à quoi ressemble une fonction et nous n'allons pas réellement écrire une fonction. On va le faire dans la prochaine vidéo, mais je veux juste te montrer à quoi ça ressemble maintenant. Alors rendons ce chemin plus grand. Et nous avons une fonction. Donc, cela commence par la fonction de mot. Vous pouvez voir que le code de mon éditeur V a mis en évidence qu'il dit fonction, alors que, vous savez, si ce n'était pas un mot clé, ce serait génial. Mais c'est un mot clé, donc c'est beau et coloré, donc nous commençons par la fonction de mot et nous donnons un nom à la fonction. Alors donnons à cela le nom de la salutation. Et puis nous mettons des parenthèses parce que c'est une fonction et parce qu'il va prendre une sorte d'action. Généralement, il y a un ensemble de parenthèses après, et puis ici, nous pouvons simplement dire, consul dot log Bonjour, monde. Et donc tout le code que vous voulez exécuter à l'intérieur de votre fonction va entre ces accolades . Cela ressemble beaucoup à une déclaration if, en fait. Et puis pour exécuter votre fonction, tout ce que vous avez à faire est de taper salutation avec vos parenthèses, et cela dira bonjour, monde. Donc, si je l'ouvre en chrome, vous allez voir ici Il dit, bonjour, bonjour, fonctions du monde Maintenant peuvent prendre ces choses appelées paramètres ou arguments. Et donc vous pouvez dire quel est le nom de quelqu'un Donc vous pouvez passer un nom dans cette fonction particulière , et ensuite vous pouvez le contaminer. Vous pouvez dire bonjour plus nom. Et vous pouvez utiliser ce nom de variable à l'intérieur de ces crochets, puis pour passer un nom, vous passez juste comme une chaîne ou un nombre ou un booléen ou quelque chose comme ça. On va passer une chaîne appelée Caleb et on va rafraîchir notre page. Et ça dit ici Bonjour, Caleb. Et maintenant, à l'intérieur de notre fonction, nous avons cette capacité à utiliser n'importe quel nom. Et ce que ça fait, c'est dire, Hey, il y a un paramètre ici. Il y a un paramètre ici. Disons que le nom est maintenant égal à Caleb dans fondamentalement ce qu'il fait dans les coulisses est de dire Nom est égal à Caleb. Maintenant, si vous voulez plusieurs paramètres, absolument, vous pouvez le faire. Disons qu'il y a un nom et qu'il y a un âge. Alors disons bonjour Nom et âge est Mettons l'âge là-dedans et nous devons aussi passer à un âge. Donc il y a deux paramètres ici. Nous devons nous assurer d'avoir deux paramètres ici. Nous le faisons en les séparant par une virgule, et nous l'avons déjà vu avec le journal des points du conseil. Et puis on a dit quelque chose, puis on a eu une virgule et on a dit autre chose. Et donc ce que cela dit est qu'il y a un objet appelé Consul arrivera à des objets plus tard, mais fondamentalement il y a une fonction appelée log. C' est le premier paramètre. C' est le deuxième paramètre, et il n'est pas différent de notre fonction ici appelée Greeting, où nous avons notre premier paramètre et ensuite nous avons notre deuxième paramètre. Alors sauvegardons que l'ouverture, chrome et rafraîchir et ça dit Bonjour, Caleb. L' âge est de 30 ans. Donc maintenant, nous avons en fait deux paramètres ou deux arguments à l'intérieur de notre fonction de salutation. Il y a deux points de plus que nous devrions examiner. L' un est en JavaScript plus moderne. Nous pouvons également nous donner un âge par défaut ou un nom par défaut. Alors allons-y et peut-être même faire ça. C' est un nom par défaut va être son effort. Mon chat et son âge n'a pas 30 ans. Il a quatre ans. Allons-y et débarrassons-nous de ces paramètres. Donc, ce que nous disons ici est s'il n'y a pas de paramètre de nom comme le 1er 1 il ressemblait à ceci. S' il n'y a pas de paramètre name, supposez simplement que le nom est Zephyr. S' il n'y a pas de deuxième paramètre appelé âge, il suffit de supposer les âges quatre. Alors allons-y. Sauvegardez. Rafraîchissant. Ça dit Bonjour, Zephyr Age. Pour ce JavaScript relativement nouveau, c'est en fait super utile. Beaucoup de langages de programmation ont eu cela depuis de nombreuses, nombreuses, de nombreuses années, et il est enfin temps pour JavaScript de l'utiliser aussi est une belle fonctionnalité. Maintenant, la dernière chose à savoir sur les fonctions, au moins pour cette vidéo particulière est une fonction peut retourner de valeur et nous le faisons avec le mot-clé appelé Retour et cela peut retourner n'importe quoi. Alors allons de l'avant et retournons l'espace x et c'est tout ce qui va retourner Semi. deux-points sont facultatifs quand il est sur une nouvelle ligne, mais continuons par souci de continuité. Et donc, lorsque nous actualisons votre page, nous ne verrons pas Space X apparaître nulle part. Ce que cela fait est de dire, Hey, si cette fonction s'exécute et qu'elle est stockée dans une variable, cette valeur de variables va maintenant être Space X, Alors allons de l'avant et sauvegardons la salutation dans une variable. Jusqu' à présent, je viens d'appeler var, nom de variable nommée est égal à salutation. Il va toujours exécuter le journal de la console car il exécute toujours cette fonction. Cependant, de notre nom va maintenant être ce qui est retourné ici et cela pourrait être un tableau pourrait être un objet. Ça pourrait être une chaîne Ah booléenne un nombre, tu le nommes. C' est peut-être n'importe quoi que vous vouliez revenir, mais vous n'en obtenez qu'un. Vous ne pouvez retourner qu'une seule fois, et quoi que ce soit ici n'est pas exécuté. alors regardez ça. Consul dot log ne fonctionne pas. Donc, dans cet exemple suivant, nous allons voir que ce journal de la console ne va pas fonctionner. Mais le nom var va aussi être Space X en tant que chaînes. Allons-y et donnons une chance à ça. Ok, je rafraîchis Issa Hello est l'effort de quatre ans. Le journal de la console n'a pas fonctionné. s'est pas présenté parce que quoi que ce soit en dessous de l'instruction return ne fonctionne pas. Allons-y et débarrassez-vous de lui car c'est inutile et jetons un coup d'oeil au nom var. Regardez cela, il est dit Varney MySpace, Six de notre nom ici a la valeur de Space X, et vous pouvez faire n'importe quoi avec des variables pour que vous puissiez faire de l'âge aux exposants de l'âge, ce qui pourrait devenir vraiment dangereux si vous 're en utilisant un grand, grand nombre. Mais dans ce cas va être quatre à la puissance de quatre, et c'est ce que le nombre va être. Donc, disons un nouveau numéro et ok, il a fait nos journaux de console réguliers. Maintenant, nous allons taper un nouveau numéro et nous voyons 256. On a eu ça parce que quatre fois quatre fois quatre fois quatre fois quatre fois, c'est 256. Et puis enfin, quand il s'agit d'utiliser une fonction, tout ce que nous avons à faire est de nouveau à Stan. Elle détestait re initialiser Allons-y et disons, Caleb et 30. Allons de l'avant et créons un nouveau ici et ça va être Henry et lui, et donc ça va être, vous savez, vous savez, changeons ce retour en quelque chose qui a du sens. Rendons juste le nom. Et donc ça va être le nom par défaut et ça va être Caleb et celui-ci va être Henry. Alors regarde ça pendant que je frappe, Refresh dit. Salut, Zephyr. Quatre ans. Ensuite, il revient. Le nom le stocke dans une variable appelée nom par défaut. Ensuite, vous allez à la ligne suivante dit, Oh, il y a une fonction apparaître. OK, exécutez ce code. Nous lui avons donné un nom appelé Caleb, et nous lui avons donné l'âge de 30 ans. Bonjour, Caleb. L' âge est de 30 ans. Ok, alors c'est le cas. Cette ligne le stocke dans la variable appelée Caleb. Suivant, à la ligne 18, , il y en a un dans ton appelé Henry. Il dirige une fonction appelée salutation, comme les deux autres fois, ça va dire, OK, OK, eh bien, je vais m'arrêter ici. Recherchez une fonction appelée salutation. La première valeur est Henry. Donc, nous n'allons pas utiliser la valeur par défaut de son âge. Nous n'allons pas utiliser la valeur par défaut de quatre. Et donc ça va dire bonjour, Henry. L' âge est aussi, et puis il va lui rendre son nom. Cette partie ici va stocker cela dans une variable appelée Henry. Et bien sûr, on voit Bonjour, Henry. Des âges aussi. Donc, si nous allons de l'avant et dire des noms par défaut à partir d'ici, nous souffrons. Kayla est Caleb. Henry, c'est Henry. Les fonctions sont donc un point critique lorsqu'il s'agit de programmer dans n'importe quel langage, pas seulement javascript, mais dans n'importe quelle langue. Et ils travaillent presque tous de la même façon. Vous avez un moyen de le définir. Vous lui donnez un nom, vous lui donnez quelques paramètres si vous le souhaitez. Ah, vous effectuez une sorte de logique ici, ou dans ce cas, nous faisons juste un journal de console et vous renvoyez quelque chose, et peut-être que vous le stockez dans une variable, et alors vous pourriez faire quelque chose avec cette variable en bas de la ligne, donc ce sont des fonctions en un mot. Dans la leçon suivante, allons-y et mettons-nous la main sérieuse sur l'entraînement avec des fonctions que nous allons corriger. Un certain nombre d'entre eux vont être assez rapides. Mais tu peux toujours ralentir la vidéo. Vous pouvez toujours l'arrêter et l'essayer vous-même, et je suis là pour vous guider à chaque étape du chemin. 26. S'exercer avec des fonctions: dans le monde de la programmation, il y a quelques obstacles qui sont difficiles pour l'esprit à enrouler autour du 1er 1 Ses fonctions. Cela peut être difficile à comprendre au début, et vraiment, vous avez juste besoin de vous entraîner encore et encore jusqu'à ce qu'il clique juste dans votre cerveau. Juste comme ça. La suivante est des boucles, et ensuite nous avons apporté des objets et des programmes orientés objet et des choses comme ça. Mais le 1er 1 est les fonctions, et une fois que vous comprenez les fonctions, les choses deviennent beaucoup plus faciles. Mais c'est le premier obstacle mental majeur à surmonter, donc c'est vraiment bon pour nous d'avoir une pratique sérieuse avec des fonctions en ce moment. Maintenant, les fonctions font partie de la vie quotidienne. On a besoin de savoir ça. Vous ne pouvez pas écrire JavaScript sans fonctions. , En fait, c' était un mensonge. Tu pourrais, mais tu n'iras pas très loin. Votre code général ou votre application entière va être extrêmement basique et pas très dynamique, et cela va devenir très, très long, et vous allez copier et coller beaucoup. Maintenant, il y a une règle générale et une programmation appelée Dry, qui signifie ne pas vous répéter, et comment nous faisons cela est avec une chose appelée une fonction, donc nous pouvons écrire la logique juste une fois, et nous pouvons l'exécuter encore et encore et encore une fois. Et donc, par exemple, si nous convertissons Celsius en Farron Heights et que nous avons écrit la formule 10 fois et nous avons réalisé que nous avons eu la mauvaise formule et que c'est dans quatre fichiers différents , nous allons devoir changer ces quatre fichiers différents en trouver et les remplacer sur tous. Ce genre de craint, Alors que si c'était juste une fonction, vous pourriez juste réparer la fonction une fois, et il la fixe partout ailleurs. Maintenant, les fonctions peuvent être un peu déroutantes si au début. Mais tu sais quoi ? Honnêtement, continuez à travailler dessus parce qu'ils deviennent plus faciles avec le temps. Et je pense que sans plus tarder, nous devrions vraiment sauter là-dedans. Donc, nous allons d'abord créer une fonction simple et inutile qui ajoute 100 divise par trois et allons juste prendre un nombre, diviser par 100 ou plutôt ajouter 100 puis diviser par trois et retourner quel que soit ce nombre est donc nous commençons par la fonction. C' est un mot-clé et appelons-le juste faire des maths et ça va prendre le nombre que nous lui donnons . Nous avons quelques crochets d'ouverture et bouclés pour qu'il fasse une certaine logique ici maintenant, nous ne savons pas si ce nombre va réellement être un nombre. Nous pourrions nous assurer que c'est un nombre, donc nous pourrions toujours dire Numb est égal au nombre engourdi et nous allons nous assurer que c'est bien orthographié . On y va et on peut dire que si engourdi est un chiffre réel, alors on pourrait faire des choses ici ailleurs, pas un numéro Riel. Et maintenant notre fonction est divisée en deux parce que nous avons une déclaration if else ici maintenant , nous pourrions faire une déclaration de retour ici. Nous pouvons aussi faire une déclaration de retour ici et ici, alors faisons-le. Si ce n'est pas un nombre réel, retournons juste un booléen de false et si c'est un nombre réel, alors faites faire faire est un nombre réel. Nous avons dit que nous voulions que ce nombre ajoute 100 diviser par trois. Disons que de notre nouveau nombre est égal à NUM plus 100 diviser par trois. Et si nous voulons nous assurer que cela se passe strictement de cette façon, nous pouvons utiliser la règle du lit, mademoiselle Crochets, exposants, division, division, addition de multiplication, soustraction. Donc ça va faire le numéro plus 101e tout ce qui s'avère être. Et puis il va être divisé par trois. Et revenons juste un nouveau numéro. Donc, soit cela va retourner faux, soit il va retourner le nouveau numéro. Et rendons ça un peu plus petit pour que nous puissions le voir sur une page. Et ne viens pas, disons de notre coutume, Numb est égal à faire des maths, quel que soit le nombre qu'on veut lui donner. Alors donnons-lui 343 parce que des nombres aléatoires sauvent ça. Et si vous deviez ouvrir ceci dans votre page en ce moment, vous verrez que rien ne se passe parce que nous avons effectué toute cette logique et nous avons renvoyé soit un booléen, soit un nombre dans cette variable particulière appelée Custom Numb. Mais nous n'avons rien fait avec les personnalisés, nous ne l'avons pas enregistré de console ou quelque chose comme ça. Alors allons de l'avant et connectez-vous à la console maintenant. Consul dot log personnalisé numb. Maintenant, ouvrons sa page et appuyez sur Actualiser, et pour que nous puissions voir le numéro. Voici 147 point 6666666666666 Et si nous lui donnons quelque chose Ce n'est pas un nombre ? Disons que le numéro est Caleb. Caleb n'est pas un numéro. Je suis une personne, pas un numéro. Il renvoie false car ce n'était pas un nombre. Cela ne s'est pas déroulé comme nous l'avions prévu. Maintenant, devrions-nous vouloir exécuter cette fonction encore et encore et encore ? On pourrait simplement le faire. On pourrait dire, faisons-le avec 30. Changeons toutes ces choses ne font pas. Déplaçons cela vers le haut et continuons et conservez simplement chacun d'entre eux par console. Et c'est donc le cas. Ça va juste consigner chaque numéro. Nous sommes juste constamment en train de remplacer la même variable ici. Allons de l'avant et voyons ce que cela revient. 1er 1 est faux, et c'est parce que le nom était Caleb. Oui, ce n'est pas un numéro. Le 2ème 1 était 30 donc nous avons ajouté 100 divisé par trois et nous obtenons 43.3. Répéter le suivant était 50 donc 50 plus 100 est 1 50 Diviser par trois est 50. Ça s'est vraiment bien passé. 501 plus 100 divisé par trois, 200.3 répétant. Ensuite, nous obtenons 41 moins 90. C' est une question intéressante. Donc moins 90 plus 100 est juste 10 10. Divisé par trois est 3.3 répétant, puis trois plus 101 103 divisé par trois. 34.3. C' était beaucoup de trois. Wow ! Et c'est donc le pouvoir derrière une fonction. Et, hé, si l'un d'entre eux s'avère être incorrect, on peut toujours revenir ici et dire, Oh, en fait, ce n'était pas censé être divisé par trois était censé être divisé par quatre. Et regarde ça Tous ces chiffres changent. Donc si vous êtes intéressé à travailler avec moi, voici ce que vous pouvez faire. Créez votre première fonction et passez simplement un nombre comme son seul et unique paramètre, puis travaillez simplement avec un nombre un peu, même si vous renvoyez juste engourdi. C' est mieux que rien, alors allez-y et donnez-lui un coup de feu. Sinon, nous allons passer à la fonction suivante, qui va être un peu différente. Mais, tu sais, c'est la même chose. Créons une autre fonction ici. Mais cette fois, nous allons créer une fonction basée sur quelque chose que JavaScript fait. Tu as remarqué comment on a écrit un document ? Je reçois l'élément par i d. Et puis quel que soit l'élément est l'élément i d Nous l'avons écrit beaucoup. On peut raccourcir ça. En fait, vous voyez cela beaucoup dans beaucoup de bibliothèques JavaScript. On peut écrire une fonction, on l'appellera le signe du dollar et on va passer le I D. Affaiblir dio est affaibli simplement retourner cela. Et maintenant, nous avons une fonction appelée signe du dollar. Il faut un je d quelles que soient ces idées. Et il dit, Hey, les documents retournés dot get element par i d. Nous devons changer cela à notre variable, et il va chercher ce modèle d'objet de document interne, et il va simplement renvoyez-le. Ensuite, on pourra travailler avec un peu plus tard. Alors essayons ça. Disons que le titre Var est égal à l'idée de titre et que nous voulons changer. Le texte interne du point de titre est égal au texte interne personnalisé, et nous devons vraiment nous assurer que cela existe. Alors allons de l'avant et créons chacun ici avec une idée de titre. Il n'y a rien dedans. JavaScript remplira cela pour nous. Et juste pour s'assurer qu'on sache ce qui se passe, votre journal de console I est. Et cela ressemble à une fonction. Non, cela ne fonctionne-t-il pas du second paramètre journal premier paramètre. Ouvrons sa page et appuyez sur Actualiser, et nous allons voir le texte interne personnalisé. Le faux était de celui-là, là-haut. Allons de l'avant et commentons cela pour l'instant et vous pouvez voir le titre des idées. Donc ce que cela fait est de dire, Hey, obtenez l'élément par son I d de titre correspond ici. Stockez cela dans une variable avec vos relevés de retour. C' est ce qu'on a fait. Nous l'avons stocké dans une variable appelée title, et ensuite nous pouvons l'utiliser. C' est exactement la même chose que de faire ça. Supporte juste avec moi ici. C' est exactement la même chose qui fait ça. Seulement maintenant tu écris beaucoup moins. Et si jamais vous vouliez en créer un autre, vous pourriez toujours faire de notre élément personnalisé. Quel que soit votre élément est égal à personnalisé I d. Et puis personnalisé Ellam dot html interne est égal à quelque chose ici. Vous pourriez faire quelque chose comme ça et maintenant vous le coupez à court terme. Maintenant, vous n'écrivez pas de documents. Ne pas obtenir d'élément par i d parenthèses. Quelles que soient vos idées encore et encore et encore. Tu écris juste un signe de dollar. C' est donc une belle façon de couper à court terme. Rencontre. Enfin, continuons et créons une fonction où nous convertissons Celsius en Fahrenheit. Donc nous commençons par la fonction qui s'appelle C pour voir si je peux épeler ça correctement la première fois juste dans la haine. En fait, c'est faire ça. Ça s'appelle, euh, ouais, je n'aime pas vraiment ça. C' est le cas ? C' est juste pour voir deux f et nous pouvons ajouter un commentaire ici. Ah, Celsius à la hauteur de l'air monté. Maintenant, nous devons donner un numéro. Quel est le numéro Celsius ? Alors tu vois, engourdi ? Quelque chose comme ça n'a pas besoin d'avoir une boîte de soulignement. Si tu veux, on doit faire des calculs ici. Alors faisons variable de notre Fahrenheit Fahrenheit Il est égal à ce que sont les mathématiques que nous voulons faire. La variable Fahrenheit est égale à ce qu'est Celsius. S O. C. Nombre de fois 1,8 plus 32. Et alors mettons les crochets ici. Donc c'est toujours exécuté en premier, c'est juste l'ordre des opérations. Vous n'en avez pas nécessairement besoin parce que la multiplication va venir avant la division. Ce n'est pas l'ici ni là qui n'est que des maths. Et ensuite, nous pourrons revenir belle nuit. Maintenant, on ne fait aucun contrôle. Tu n'étais pas en train de taper. Voir engourdissement comme un paramètre en tant que variable, nous supposons simplement qu'il s'agit d'un certain nombre. Alors allons de l'avant et créer quelques variables dans votre nous sommes allés loin. Disons avec zéro degrés est donc C à F bien, pour mettre le nombre zéro là, donc peu importe ce qui va être et vous permet de conseiller point log zéro. Hey, fait marrant. Vous pouvez également mettre des lignes de code sur la même ligne tant qu'il y a un point-virgule. Donc votre ordinateur va lire ceci de haut en bas et dire que le zéro feu est égal à et qu'ils arrivent à la demi-finale, dit Colon. Oh, hey, Ok, eh bien, cette partie est terminée, alors allons de l'avant et exécutons ça comme si c'était sur sa propre ligne. Donc on va faire ça. Un. Quelle est la température ambiante alors que la température ambiante en Celsius est de 20 ? Appelons cela 20 et ce qui fait bouillir si ébullition en Celsius est de 100 degrés. Qu' est-ce que c'est dans la bonne nuit et juste pour s'amuser ? Z's Faisons la congélation et mettons un certain nombre de moins 40. Alors, qu'est-ce que moins 40 dans la bonne nuit ? Allons-y. Page de mise à jour. Donc, nous avons que va se connecter à partir de notre fonction précédente, mais nous pouvons voir zéro degrés Celsius est égal à 32 degrés bonne nuit. C' est exact. 20 degrés est 68 F et la congélation moins 40 Celsius est la même en hauteur. C' est aussi moins 40. Pourquoi est-ce important à savoir ? Eh bien, parce qu'on fait des maths ici. Et si on voulait corriger ça manuellement ? À chaque fois ? On devrait remplacer ça par n'importe quel numéro qui n'est pas là. donc zéro fois 1.8 plus 32 l'écrivaient à nouveau. Et puis on doit en faire 20 et ensuite on doit en faire 100 on devrait écrire ça à chaque fois. Et nous ne sommes pas intéressés à passer toute la journée à taper. Nous sommes intéressés à écrire un bon code. Donc, ce que nous faisons, c'est que nous le jetons dans une fonction. Et tu sais quel est le pire scénario ? Et si toutes ces choses sont fausses ? Et si au lieu de 32 il y avait une faute de frappe et que c'était 31 ? Ça ne va pas faire une grande différence quand il s'agit de Fahrenheit, quand on parlede la température ambiante. Ça ne va pas faire une grande différence quand il s'agit de Fahrenheit, quand on parle quand on parlede la température ambiante. Mais le numéro est toujours faux. Et donc, nous devrions passer à travers et les réparer tous en même temps. Pour ça, ce n'est pas une façon de vivre ta vie. Et si ce n'était pas une fonction, alors que l'erreur aurait été 31 ici et tout ce que nous avons à faire est de le changer à 32, tous les quatre sont corrigés avec une seule frappe. Donc maintenant, nous sommes beaucoup plus conscients de l'endroit où nous passons notre temps. En fait, nous pouvons même raccourcir cela. Nous n'avons pas besoin de mettre cela comme une variable. On peut aller de l'avant et retourner ce qu'est le Celsius en tant que numéro. Times 1.8 plus 32. Très bien, c'est trois fonctions différentes en JavaScript à l'heure actuelle. Vous devriez être au moins familier avec la syntaxe avec son apparence avant de passer à votre prochain mini projet. Ce que je voudrais vraiment que vous fassiez Dio, c'est essayer d'écrire une fonction par vous-même. Ça n'a pas besoin d'être utile. La première fonction bleue que j'ai écrite ici a été ajoute 100 divise par quatre comme je ne vais jamais utiliser cette fonction dans la vie réelle. Mais c'est une bonne pratique, alors n'oubliez pas que les fonctions de rappel commencent par une fonction de mot-clé. Il a une sorte de nom, parenthèses et puis vous avez des arguments l'air optionnel. Vous ne pouvez absolument rien faire si vous le vouliez et a une instruction return pour stocker toutes les données que vous voulez dans une variable. Donc, retournez quelque chose et ensuite exécuter vous pourriez faire de notre nom est égal à nom comme ça. Ou si vous vouliez juste l'exécuter, ne stockez rien dans une variable. Vous pouvez aussi le faire de cette façon. Alors allez-y, donnez-nous une chance. Je ne vais pas vous dire quel genre de fonction à droite. Ce n'est ni ici ni là. Il pourrait s'agir d'un bon type de fonction, d'une fonction utile dans la vie réelle ou non. Ça n'a pas vraiment d'importance. Soyez aussi compliqué ou simple que vous le souhaitez. Je veux juste que vous puissiez écrire une fonction, parce que dans notre mini projet, nous allons écrire une fonction. Allez-y. Donne-lui un coup de feu. N' oublie pas que je suis là pour t'aider. Vous avez une section commune ci-dessous. N' oublie pas. Si vous avez une question, veuillez poser votre question. Je suis là pour vous aider. Je veux que ce soit facile pour toi. Sinon, allons de l'avant et commençons sur ce prochain mini projet parce que c'est là que les choses commencent à s'amuser un peu. Je pense que ça va devenir plus drôle à partir d'ici. 27. Mini projet JavaScript #4: Bonjour et bienvenue à de nombreux projets numéro quatre. Nous allons créer une calculatrice de conseils, et cela a vraiment juste à voir avec les fonctions. Les fonctions sont si importantes. Je vous prévenais dans les dernières vidéos que vous devez connaître les fonctions, et je dirais juste pratique les fonctions jusqu'à ce que vous l'ayez. C' est donc une très bonne façon de pratiquer une fonction. Donc, dans ce projet de nombreux, ce que je voudrais que vous fassiez est de créer un conseil simple. La calculatrice doit accepter deux paramètres. Votre 1er 1 doit correspondre au montant total de votre facture. Disons que vous allez au restaurant et que votre facture s'élève à 25$. Doit accepter $25 comme un paramètre, et le second paramètre est votre pourcentage de pourboire. Combien voulez-vous pourboire ? Faites de ce second paramètre votre paramètre tip. Rendez cela facultatif. Donnez-lui une valeur par défaut. Peu importe ce que votre valeur par défaut est si vous pensez que le pourboire devrait être un minimum de 15%, allez pour 15%. Si vous pensez que le basculement de 15% est absurde et qu'il ne devrait jamais être supérieur à cinq, faites votre paramètre de tip La valeur par défaut. Cinq. Enfin, je veux que vous retourniez le montant total et l'enregistrez dans une variable, puis peut-être que la console consigne ce montant total à votre page. Comme toujours, je vais travailler à travers cela juste après cela, mais j'aimerais que vous donniez ceci un coup d'oeil en premier, alors n'hésitez pas à mettre la vidéo en pause. Donne-lui un coup de feu. Essayez de votre mieux. Si vous êtes coincé, il suffit de reprendre la vidéo et vous pouvez regarder ma solution à cela. Très bien, c'est ma solution à la calculatrice de pourboires, alors allons-y. Et d'abord, nous devons créer un script afin script. Vous pouvez également le faire dans un fichier externe. Si vous le vouliez. La première chose que nous devons faire est de créer une fonction si fonction. Appelons-le juste conseil, et il doit accepter deux paramètres. Donc, il est un montant total de la facture sont en fait costume montant total et un pourcentage de pourboire. Ce pourcentage de pourboire doit être facultatif avec une valeur par défaut. Alors disons 10. Ce 10 % va être 10 %. Et nous allons juste zoomer ici, rendre ça agréable et grand sur Allons-y et travailler sur certains de ces maths. Donc, le montant total du pourboire va être de notre montant de pourboire est égal au montant total. Astuce des temps. Eh bien, ça ne va pas forcément marcher parce que notre pourboire est un nombre complet. Et si vous êtes Bill était 25$, vous avez dit 25 fois 10, c'est 250$. Ça ne va pas se passer bien. Nous allons donc écraser la pointe de la variable. C' est un conseil qui va être ce qu'il est actuellement divisé par 100 qui va nous donner quelque chose comme, vous savez, au lieu de 10 va être 0.10 Et donc notre montant de pourboire ici va maintenant être 0.10 Donc c'est va être comme si c'était 25 fois 0,10 comme ça. Mais nous le faisons dans le langage des variables à la place. C' est donc notre montant total de pourboires. Et nous pourrions si nous voulions juste retourner le montant du pourboire. On pourrait dire le montant du pourboire de retour et on aurait fini. Et si nous voulons retourner le montant total afin que nous ne nous soucions pas vraiment de pourboire 10% ou 15% ou quelque chose comme ça. Nous voulons simplement nous assurer que notre bill final ou notre fonction donne plutôt le montant final de la facture. Donc, si nous avons une facture de 25$ et que nous voulons bien pourboire 10 %, nous devons ajouter 10 % sur 25. Donc maintenant, nous avons notre montant de pourboire et nous pourrions dio ah, montant total. On pourrait même écraser celui-ci parce qu'on ne l'utilisera plus. Le montant total est égal au montant total, plus votre pourboire. Et puis ici, faisons le montant total. C' est ce que nous allons revenir. Et voyons si j'ai des fautes de frappe ou si j'ai fait ça mal. Donc, créons une variable ici. Donc, c'est une quantité de pourboire var. Non, faisons Var facture totale. Nous ne faisons pas le montant de pourboire que nous faisons Total Bill est égal à pourboire. Quelle est ma facture ? C' est 25$ combien je veux ? Un conseil, Disons 10%, puis consul dot log facture totale. Allons de l'avant et nous pouvons voir que mon bill est de 25.1. Ça ne semble pas juste, n'est-ce pas ? Parce que 10% de 25 est 2.5. Il devrait donc être 27,5. Quelque chose ne va pas. Qu' est-ce que ça pourrait être ? Donc maintenant, que nous nous déboguons, nous pourrions faire le montant de l'astuce point du conseil est le montant de la pointe, et alors nous pourrions aussi dio conseil dot log total montant est le montant total et nous pouvons voir ce qui se passe ici. Et puis nous pouvons aussi consul comme ce conseil conseil conseil conseil conseil conseil conseil conseil conseil comme, ah pour cent est et puis quel que soit le conseil va être Donc nous allons actualiser la page conseil en pourcentage de 0,1. Mais le montant total n'est pas juste. Quelque chose n'est pas là. Pourquoi c'est ça ? Oh, regarde ça. Il y avait une faute de frappe que j'ai utilisée et c'était censé être une quantité de pourboire. Et donc on y va. On a du débogage en direct pour toi. Je vais juste me débarrasser de tous ces registres du conseil et de la page de mise à jour et regarder ce 27.5. Et avec cela, le mini projet est terminé. Maintenant, je sais à l'étape quatre dit retourné le montant total et l'enregistrer à une variable. Mais si vous vouliez juste retourner le montant du pourboire, vous pourriez en fait prolonger cela aussi bien. Vous pouvez dire que l'Astuce de retour est égal à false. Mais si la pointe retournée seulement est égale à true. Donc, si le conseil est retourné, Lee est égal à vrai. Nous pourrions retourner juste le montant du pourboire et ensuite ici nous pourrions dire non, ne faisons pas celui-là. Allons de l'avant et copions ceci parce que c'est bien comme il est. Pointe totale. Donnons ça vrai. Nous avons besoin que ce soit un pourboire total aussi, et commentons cela. Et puis allons de l'avant et ah ha regarder ce pourboire total 2,5$. Et peu commun, et nous verrons les deux dans l'année. Et maintenant, nous avons, ah, fonction signifie que cette pointe de retour seule partie était parascolaire, mais nous avons un fonctionnement ici qui peut retourner l'une des deux choses, soit le montant de la pointe ou le montant total de la pointe. Aussi, prenez note que je n'ai pas utilisé une déclaration else. Je n'ai pas utilisé une déclaration else parce que je n'avais pas besoin de dire si un conseil retourné sur Lee , puis juste retourné le conseil que sinon, dans tous les autres cas, juste retourné le montant total. C' est exactement le même test. Dans ce scénario particulier, c'est exactement la même chose. Donc là, vous l'avez. Autrement dit, beaucoup de projet numéro quatre années calculatrice de conseil tous compris. Si vous vouliez rendre cela vraiment fantaisie, vous pourriez réellement interroger votre page pour un élément et changer un tas de texte là-bas aussi . Donc, votre page semble en fait faire quelque chose au lieu de simplement consigner quelque chose dans la console ici. Parce qu'en ce moment, si quelqu'un essayait d'utiliser cela et que non développeur ne connaîtrait pas orteil, regardez dans la console. Et, comme toujours, si vous avez des questions, n'oubliez pas, vous pouvez les laisser en bas. Je suis heureux de vous aider à tout moment. Une fois que vous avez terminé avec ce grand projet, nous allons passer la leçon suivante et en apprendre un peu plus sur la requête. Sélecteurs 28. Sélecteurs d'application: D' accord. Bonjour. J' espère que le dernier projet s'est bien passé. C' est le moment où nous commençons à obtenir un peu de fans ici avec notre code. Donc on va commencer à interagir avec notre page. Jusqu' à présent, nous avons utilisé document point get élément par idée, et nous avons commencé à obtenir le i. D. Chaque élément unique, qui signifie jusqu'à présent, partout dans le HTML doit avoir un i. Et c'est juste honnêtement, pas moyen de vivre ta vie. Que faire si vous vouliez simplement sélectionner le petit élément ou juste un lien ou juste un lien particulier  ? Que faire si vous vouliez sélectionner quelque chose par sa classe ? Que faire si vous vouliez sélectionner plusieurs éléments qui ont tous quelque chose en commun ? Nous pouvons le faire avec JavaScript, remarque JavaScript plus moderne, et vous ne verrez pas cela un JavaScript plus ancien Et c'est en fait OK, parce que c'est super bien supporté. Donc, pour cela, vous allez avoir besoin d'en savoir un peu sur CSS. Donc, dans le monde de CSS comme un petit cours de crash rapide que vous avez, c'est une classe, et puis vous avez et je d déclaration. Et puis vous avez une déclaration d'élément et c'est juste à peu près tout. Et puis on pourra devenir plus fantastiques avec les deux. Donc, nous aimons la classe, puis un élément enfant avec le I d de I d, puis un élément enfant d'un lien et affaiblissons le style de cette façon. Et donc point signifie hashtag de classe signifie i d. Et si aucun d'entre eux n'est présenté, alors nous supposons que c'est un élément. C' est donc un cours rapide et rapide sur les sélecteurs CSS. C' est le plus rapide. Je crois que je l'ai déjà expliqué. Mais hé, n' apprenons pas à propos de CSS. Allons en fait dans certains de ces trucs grossiers parce que ça va être assez amusant. Donc, nous avons cette nouvelle chose appelée un sélecteur de requête. Alors allons de l'avant et écrire un sélecteur de requête et nous allons juste obtenir le titre tel que le titre Vire et nous allons rendre cela juste un peu plus grand ici. Titre de feu et nous voulons l'obtenir par son I D. Ok, eh bien, nous pourrions le faire pour que nous puissions faire des documents, ne pas obtenir l'élément par i d titre, puis le titre ne pas le texte interne est égal à changé par défaut est va dire bonjour monde. C' est le titre et c'est bon d'avoir un élément enfant là-dedans, un petit élément, et ça m'a juste changé aussi. Si nous chargeons ça, ça a juste changé. Ok, donc on sait que ça marche, mais on ne veut pas l'obtenir par son I d. alors donnons-nous un cours. La classe est égale au titre et allons de l'avant et juste abandonner cette idée parce que nous l'avons utilisé si souvent et honnêtement, pas beaucoup d'éléments ont des idées. Alors allons de l'avant et essayons de l'obtenir par son titre ou sa classe appelée titre. Donc, nous le faisons. Titre du point du sélecteur de requête Tout comme c'est CSS. Donc, nous allons attraper le 1er 1 maintenant sélecteurs de requête, va seulement attraper le 1er 1 Donc s'il y a un autre élément ici avec un nom de classe de titre, il va seulement attraper le 1er 1 pour trouver se déplacer de haut en bas. Assurez-vous donc que quelle que soit la classe que vous utilisez est unique. Dans ce cas, il serait, ah, ah, meilleure pratique d'utiliser un I d plutôt qu'une classe, mais continuons et nous donnons un coup de toute façon changé en utilisant une classe bam modifiée en utilisant une classe. Et si nous faisons ce titre, nous pouvons réellement voir dès que je le tape ici, c'est sélectionner ce nœud entier. Ok, je dois partager ça parce que je veux maintenant sélectionner le petit. Comment sélectionner un élément à l'intérieur d'un élément ? Eh bien, si je le voulais, je pourrais faire loin. Small est égal au sélecteur de requête point de document et tapez simplement petit et cela l'obtiendra. Cela l'obtiendra par son nom d'élément afin que nous puissions faire quelque chose comme en ligne. 21 petit texte intérieur de point est égal à wow, je suis minuscule texte. Et voilà, pendant que je suis minuscule impôt, tous les plafonds. Mais ça n'a pas changé le monde du bonjour. C' est le titre. Il vient juste d'avoir celui-là. Donc c'est plutôt cool. On pourrait le faire aussi. Et si quelque part en bas de la route nous avons une grande classe, Peut-être que c'est ah carte d'une sorte et nous voulons obtenir un élément particulier à l'intérieur de celui-ci. Alors faisons semblant que c'est beaucoup plus complexe et beaucoup plus grand. Nous avons donc une classe appelée title et nous voulons obtenir juste le petit élément. Rappelez-vous, sélecteur de requête va obtenir le premier petit qu'il trouve. Donc, nous allons réellement créer un exemple ici. Petit. Celui-ci est le premier et regarde. Changer moi pour ne va pas changer, mais celui-ci va d'abord changer et il est là. Il a sélectionné le premier petit. Il n'a pas sélectionné le 2ème 1 Il a juste obtenu le 1er 1 Et si on voulait obtenir celui-ci ? Eh bien, actuellement, nous n'avons pas le moyen de le faire. Nous ne savons pas comment obtenir le 2ème 1 Alors allons de l'avant et prenons juste le 2ème 1 Donc ce que nous pouvons faire ici est de commenter ceci. Nous allons en créer un autre ici appelé. On l'appellera aussi Petit Virus. Small est égal à, et puis nous pouvons faire la requête de point de titre, sélecteur, petit. Et donc, au lieu d'obtenir l'ensemble du document ou du modèle d'objet de document et de le regarder à travers, nous examinons simplement le titre dans North Ince. Tout ce qui est à l'intérieur de ce titre avec un élément appelé Small a attrapé le 1er 1 là. Donc maintenant, nous pourrions faire un petit point dans son texte est égal à quoi, quoi ? Quoi ? Quoi ? Wow, et bam. Regarde ça. Le 1er 1 est inchangé. Le 2ème 1 est changé. Impressionnant. Donc, maintenant, nous savons comment sélectionner un élément par sa classe, et nous savons comment sélectionner un élément qui est un élément enfant de cet élément original. Dans ce cas, nous avons sélectionné l'élément enfant de l'élément H. Ok, je vais les commenter et allons de l'avant et changer juste le texte du lien. Nous pouvons le faire aussi. On l'a déjà vu, mais quelques exemples de plus ne font jamais mal jusqu'à présent. A pour mon ancre invité est égal à des documents. Requête néerlandaise, sélecteur A et faisons un texte intérieur point est égal à codage pour tout le monde dot com bam codage pour tout le monde dot com. Donc, il y a cet exemple est, eh bien, c'est juste sélectionner un élément basé sur le nom de l'élément réel. Pas une classe, pas un I d. juste le nom de l'élément. Maintenant, tout est bien et bien. Allons de l'avant et commentons cette ode et aussi celle-ci. Allons de l'avant et créons une instance où nous devons sélectionner plusieurs classes. Donc, nous allons créer un nordeste de ennuyeux une liste Norden rien de fantaisie ici. Et faisons L I numéro un allié. Et où tu vas aller encore et encore et encore. Donc ici, j'ai un nordeste avec sept éléments dedans. Alors allons-y. Numéro 1234567 Nous avons donc des éléments de liste ici. Que se passe-t-il si je voulais sélectionner tous ces éléments de liste ? Comment je vais faire ça ? Eh bien, ce que je pourrais faire est d'ouvrir une nouvelle balise de script ici, et vous pouvez réellement voir que le code V va essayer de compléter automatiquement cela pour moi. Donc, ce sont des alliés du var. J' aimerais pouvoir le faire apostrophe là. Mais les alliés sont égaux aux documents. Puis regarde le sélecteur Queary tout, et nous pouvons lui donner exactement la même chose. Dans ce cas, nous voulons juste sélectionner un élément. Non, on ne va pas encore faire quoi que ce soit avec ça, mais jetons un coup d'oeil et soyons vraiment petits. Et puis nous allons juste rafraîchir et l'a fait, euh, Alliés, ça va vous sembler un peu familier maintenant. Faisons ce gros rouleau de tambour, s'il vous plaît. C' est un mot. Une liste. Mais, hé, quand on regarde ça, ça ressemble pas beaucoup à un tableau ? Donc, une fois que nous avons appris à faire une boucle à travers un tableau, nous pouvons apprendre à regarder à travers un nœud lis assez facilement. Et il est livré avec toutes sortes de choses ici, aussi. Ok, donc dans notre liste d'alliés, nous avons Index de zéro à six ou en termes humains, un à sept. Prenons le 1er 1 et modifions ce texte. Comment ferons-nous ça ? Parce que c'est un tableau avec un index. Eh bien, nous savons que c'est fondamentalement un tableau. On dirait un tableau. On pourrait prendre le 1er 1 On y va. On peut vraiment voir ça. Il est mis en évidence dans mon modèle d'objet de document. Et puis je pourrais le faire dans son texte. Et je pourrais changer ça à n'importe quoi. Je veux tout ce que je veux et regarde ça. Ça a marché. Donc maintenant, nous pouvons changer n'importe lequel de ces choses. Disons qu'on voulait le numéro cinq. Eh bien, quel est ce numéro ? Rappelez-vous, ordinateur, commencez à compter au numéro zéro, pas au numéro un. Donc on veut y retourner. Un pour ça. Sélectionné le html interne d'un point droit est égal à H R. Oui. Salut. Salut. Salut. Salut. Salut. Bam. Maintenant, il y a un lien en toi. Et en fait, si nous faisons un clic droit et l'inspectons lorsque vous verrez que nous avons ajouté un lien vers notre modèle d' objet de document . C' est tout neuf. Ce n'était pas là dans le code source. Nous l'avons ajouté dynamiquement. Ok, maintenant, c'est amusant et des jeux. Mais que se passe-t-il si nous voulions obtenir la valeur d'un champ de texte ou d'une entrée de texte ? Alors allons de l'avant et créons un nouvel exemple ici. Mm. On va créer une entrée. Je vais juste lui donner un type de style de texte. Faisons un grand rembourrage. 30 pixels. Taille de la police, 30 pixels. Donc, tu sais, assez gros. Donnons-lui un nom de classe. Quelque chose qui était en quelque sorte familier. Si vous avez déjà travaillé avec bootstrap appelé contrôle de formulaire. Maintenant, cela ne va pas être beau, mais il aura un nom de classe. Ok, Cool. Nous avons une grande zone de texte ici assez facile. Et si nous voulons obtenir cette valeur ? Eh bien, donnons-nous une valeur par défaut de la valeur à Low World blah, blah parce que cela n'a pas vraiment d'importance ce que c'est. Nous voulons juste obtenir cette valeur. Allons de l'avant et créons un sélecteur de requête où nous pouvons réellement obtenir cette valeur. Donc, nous avons un nouveau script ici, et appelons cette variable entrée est égale aux documents dot queary sélecteur, et nous voulons juste sélectionner le 1er 1 cause il n'y a qu'un seul contrôle de forme point ici quand cela nous donnera notre 1er 1 Puis nous pourrions faire l'entrée du journal des points du conseil, puis simplement la valeur. Et c'est juste la valeur du médecin. Alors allons de l'avant et rafraîchissons votre page. On peut voir Bonjour monde bla, bla, bla. C' est exactement ce qu'il y a ici. Et si on change ça pour salut, je change là aussi. Bon, donc comme un petit rafraîchissement rapide de tout, nous sommes allés chercher un élément par son titre et seulement un d'entre eux. Nous utilisons le sélecteur de requête, et vous pouvez utiliser les électeurs CSS, comme vous le feriez normalement dans CSS. Et puis on a juste changé la taxe intérieure. Pas grand-chose. Ensuite, nous avons dit, en fait, allons juste obtenir ces petits, mais c' était le 1er 1 et nous devons sur la page donc il a juste changé le 1er 1 Ensuite, nous avons dit Créons une autre variable appelée petite. Mais au lieu d'interroger le document, nous nous sommes interrogés uniquement sur le titre, que nous avons déjà sélectionné ici. C' est une note qui existe. Et donc il y a un titre ici et nous allons dire dans ce titre, chercher un petit élément et à l'intérieur de ça vient de changer la taxe intérieure pour Wow ! Wow ! Wow ! Wow ! Wow ! Et puis on a dit : Hey, Hey, tu sais quoi ? Nous voulons juste saisir un lien régulier juste le 1er 1 sur la page et changer l'inter texte un revêtement pour tout le monde dot com Pas grand-chose. Et puis on a dit : Oh, Oh, en fait, prenons plusieurs éléments. Prenons tous les Alliés Il a créé un tableau comme un objet appelé un noeud une liste, et il a attrapé tous les alliés, tous les sept d'entre eux. Et puis nous avons pu le changer en sélectionnant simplement un à la fois avec son numéro d' index approprié . Et enfin, nous n'avons pas de champ d'entrée ici avec une classe de contrôle de formulaire, que nous saisissons. n'y en avait qu'un, donc nous avons utilisé un sélecteur de requête, pas un sélecteur effrayant, tout comme nous l'avons fait avec les alliés. Ça a attrapé tous les sept. Cela saisit juste le 1er 1 que vous pouvez trouver sur une page, et alors nous ne pouvons pas avec la valeur d'entrée. Donc, quelle que soit la valeur sur la page, nous avons été en mesure d'obtenir cela et de le connecter à la console. Maintenant, nous commençons à construire une certaine interactivité entre l'utilisateur et nous. Maintenant, votre plus grande chose à emporter est honnêtement, celui-là, c'est probablement la plus simple. Donc, ce que je voudrais que vous fassiez comme une petite tâche rapide, un peu de devoirs donner à cela un coup de feu, créer une nouvelle entrée, puis utiliser un document un sélecteur de requête pour saisir cette entrée, Peut-être utiliser une classe utiliser un I D. Peut-être utilisez simplement le nom des éléments réguliers appelé entrée. Donnez-lui une valeur par défaut, puis consignez la valeur par défaut de la console. Si vous pouviez le faire, nous sommes ravis de passer à la prochaine leçon parce que nous allons commencer à travailler avec beaucoup plus d' événements, et c'est là que notre JavaScript devient beaucoup plus dynamique et devient beaucoup plus amusant. Non pas que ce n'était pas amusant du tout, mais nous avons vraiment dû passer à travers beaucoup de choses fondamentales pour arriver ici. Mais maintenant, nous pouvons commencer à créer des pages qui ont des écouteurs d'événements. Nous pouvons déclencher des événements lorsque quelqu'un clique sur un bouton ou soumet un ancien type dans un champ de texte . Alors allez-y, donnez-nous un coup de feu. N' oublie pas. Si vous avez des questions, laissez-le tomber. Sois bas pour moi. Je suis toujours heureux de vous aider. Sinon, si vous ressentez confiance dans cette leçon, passons à la prochaine où nous allons en apprendre davantage sur les événements. 29. Introduction aux événements: sont ce qui rend javascript vraiment génial. Lorsque quelqu'un fait quelque chose comme taper dans un champ de texte ou cliquer sur quelque chose, cliquez sur un bouton de défilement, soumettez un formulaire. C' est ce qui rend Javascript vraiment interactif. Maintenant, il y a vraiment deux façons principales que nous pouvons faire ce week-end crée un écouteur d'événement, que nous allons couvrir dans une vidéo plus tard. Ou nous pouvons créer des événements basés sur HTML, qui est ce que nous allons nous en tenir pour l'instant parce que c'est une belle transition en JavaScript. Lier les écouteurs d'événement ID. Alors oublie que j'ai dit la dernière partie. Commençons simplement par un simple bouton. Alors allons de l'avant et créons un bouton ici. On a un bouton. BBT classique nbt n primaire. Si vous utilisez bootstrap ou quelque chose comme ça, assurez-vous qu'il s'agit d'un bouton normal. Donc, le type est égal à bouton, et cela va dire Cliquez sur moi. D' accord. On a un bouton ennuyeux ici. Et quand je clique dessus, oui, ça ne fait rien, mais ce qu'on peut faire, c'est utiliser en cliquant. Donc, si vous vous souvenez de l'avoir utilisé en HTML ou si vous vous souvenez d'avoir appris à ce sujet, nous le voyons. C' est là que nous allons utiliser sur clic. Maintenant. Il y a plusieurs autres événements. Il y a sur soumettre sur Cliquez ainsi de suite et ainsi de suite. Il y en a des tonnes. Je ne pouvais pas les parcourir tous, mais l'événement on click est celui que nous allons utiliser pour déclencher du JavaScript. Alors allons de l'avant et mettons ceci sur des lignes séparées. Donc c'est juste un peu plus agréable. Et sur Click, nous voulons exécuter une fonction JavaScript. Donc, nous allons créer une fonction appelée Click Me mettre des parenthèses là-dedans, et nous avons aussi besoin de JavaScript ici aussi. Donc, fonction de script. Cliquez sur moi et ça correspond à celui-ci ici, et ça ne va rien faire du tout, et ça ne va pas prendre de paramètres du tout. C' est juste pour la console de cuisinier et c'est tout. Agréable et simple. Mais regarde ça. Je peux spamper ça encore et encore et encore, et ça continue à être cliqué. Et donc c'est vraiment la base derrière un événement click est chaque fois que quelqu'un clique sur le bouton va exécuter du JavaScript, une fonction appelée Click Me Now, nous pourrions en fait obtenir un peu plus fantaisiste avec nous pour obtenir. Jusqu' à présent, le total des clics est égal à zéro. Faisons ça. Le nombre total de clics est égal au nombre total de clics, plus un. Alternativement, si vous venez d'autres langues, il peut être plus facile pour vous de faire des clics totaux plus plus, c'est la même chose que fait. Plus un et nous allons faire le journal de points de console. Vous avez cliqué sur ce bouton Total clics fois et juste pour que nous puissions voir cela sur une ligne afin qu'il semble un peu plus agréable. Vous avez cliqué sur ce bouton Nombre total de clics, donc vous avez cliqué une fois deux, trois fois, quatre fois. Donnez-nous un rafraîchissement. Vous cliquez dessus une fois deux fois une fois. J' aime ça deux fois trois fois quatre fois, et ça continue et encore. Et c'est donc un événement click. Et vraiment, ce que JavaScript est tout au sujet des événements, parce que pourquoi avoir du JavaScript en cours d'exécution si quelqu'un ne va pas avoir un événement en cours  ? Si vous n'avez pas besoin d'interaction utilisateur, vous n'avez probablement pas besoin de JavaScript du tout. Alors allons-y et rendons cela un peu plus intéressant. Créons une calculatrice très basique qu'il va être. Fondamentalement, quelqu'un ajoute un numéro deux, un nombre qui existe déjà. Alors allons de l'avant et commençons ça à partir de zéro. Donc, nous avons une contribution. Le type de champ va être un nombre. La classe pourrait être comme un contrôle de formulaire parce que nous le voyons beaucoup dans bootstrap. Et allons-y et donnons-nous un style de base. Donc rembourrage 30 pixels, taille amusante, 30 pixels, couleur, bordure bleue, un pixel, bleu uni. Et ça devrait avoir l'air assez bien. C' est beaucoup trop grand. Faisons ça. Est-ce que c'est un peu plus petit. On y va. Donc, on a un champ numérique ici. Ok, maintenant il nous faut un bouton. Alors allons-y. Créez un saut de ligne et ceci à un bouton pour obtenir un bouton dans. La classe d'année est égale à je ne connais pas Bt et a été battu Ian Primary. Comme dans Bootstrap. Nous n'utilisons pas bootstrap, pas encore. Donc ça ne va rien faire, mais on pourrait aussi le style, c'est si on le voulait. Je n'ajoute pas 100 donc quel que soit le nombre sera ajouté au nombre 100. Donc c'est vraiment la moitié d'une calculatrice à ce stade parce que nous ne donnons pas deux chiffres. On en donne juste un et on dit, on va en ajouter 100. Maintenant, faisons de ça un petit bailleur de fonds et faisons en sorte que cette page fasse quelque chose de différent. Alors faisons, ah, jetons chacun ici. Le total est et alors on pourrait dire « span ». Et puis quel que soit ce total. Alors. Actuellement, lorsque nous chargeons la page, il n'y a pas de total. Voyons à quoi ça ressemble. On avait un champ numérique ici, ce qui a l'air dégoûtant. Ensuite, nous pouvons ajouter 100 et le total n'est rien encore. Ajoutons du JavaScript pour rendre ce script amusant. On doit toujours ajouter 100 parce que c'est ce qu'on fait. Disons que Vyron, um est égal à 100. C' est juste une sorte de la façon dont cet exemple se déroule. Suivant. Nous devons créer une sorte de fonctionnalité sur clic, donc je sur Click est égal à Appelons Calculer et nous mettons cela sur notre bouton. Maintenant, nous pourrions faire fonction calculer il ne va pas prendre de paramètres car il va récupérer automatiquement des valeurs de la page. Donc maintenant, nous devons saisir ce champ d'entrée, qui a une classe de contrôle de formulaire. C' est le seul ici, donc nous pouvons juste faire un sélecteur Corey régulier au lieu du sélecteur de requête. Jusqu' à présent, entrée est égale aux documents dot queary sélecteur et sélectionnée par sa classe CSS de notre valeur va être valeur point d'entrée. Mais nous allons typeCast que comme un nombre, assurez-vous que c'est toujours un nombre, et ensuite nous pourrions faire, vous savez, si la valeur. Donc, si c'est vraiment le nombre, nous n'allons pas aller aussi loin là-dedans. Je pense que cela va polluer un peu cette leçon, mais nous pourrions aussi faire quelque chose comme si la valeur totale est égale à la valeur plus 100. Que 100 existent déjà dans un engourdi appelé très audacieux juste là. Maintenant, nous avons une valeur totale et nous devons choisir ce type. Donc, nous allons créer un sélecteur de requête pour saisir le H. Et puis créons un autre sélecteur de carrière pour saisir la portée, et nous pourrions simplement sélectionner ce groupe parce que c'est le seul sur la page. Mais si ce n'était pas le cas ? Ce n'était pas le seul sur les pages pourrait être un peu plus compliqué. Créons var. Age 1 est égal au sélecteur de points queary de documents. Nous savons que c'est le seul sur la page, donc nous pouvons simplement utiliser un sélecteur de requête régulière H un et ensuite nous pourrions faire la portée de loin est égale à H un point intervalle de sélecteur de requête. Maintenant que nous avons cela là-dedans, nous pouvons dire dépenser le texte intérieur point est égal à quel que soit le nombre. Alors mettons la valeur totale là-dedans. Et voyons si Caleb a fait des erreurs. Le journal de la console ne se plaint pas de quoi que ce soit qui a mis un numéro ici. Mettons le numéro neuf Oh, ouais, regarde ça. Il ne peut pas trouver quelque chose que je ne peux pas définir la propriété entre le texte de No. Oh, il ne sait pas où trouver ça. Donc maintenant, nous déboguons, et c'est une grande partie du codage aussi. Je suis en fait heureux que certaines de ces erreurs apparaissent donc vous pouvez réellement voir comment quelqu'un fait ce genre de débogage. Donc on a une fonction ici et on veut attraper ce hone. Alors attrapons ça. Et quand nous tapons H 10, regardez ça. C' est parce que ce n'est pas le seul âge sur la page, hein ? On pourrait faire l'une des deux choses. Nous pourrions nous débarrasser de celui-ci, ou nous pourrions le faire de la façon javascript et nous pourrions faire des requêtes, sélecteur, tout mais parce que cela revient et une pluie, nous savons tout sur l'indexation, et nous savons qu'il y a au moins deux H là-dedans. Nous voulons le 2ème 1 Il suffit de prendre un, parce que rappelez-vous, ordinateur, commencer à compter à zéro, pas le numéro un. Essayons encore ça. C' est juste de se débarrasser de ça. Et mettons le neuf numéro 23. Oh, regarde ça. Et maintenant, nous avons un peu une calculatrice pour pouvoir mettre n'importe quel numéro que je veux ici. Et ça va juste en ajouter 100. Et si je n'ai rien là-dedans ? Rien. Et si j'essayais de mettre le nom Caleb ? Oh, c'est un champ numérique, donc html ne me permet pas de mettre des chiffres sont des lettres. Il ne veut que des chiffres si cool. C' est un peu de sécurité là-bas. Alors faisons 01 Que se passe-t-il là ? Il est encore 101 Et maintenant, à ce stade, nous avons un peu un prototype de calculatrice qui fonctionne. n'y a rien dans le journal de la console. Nous faisons tout cela sur la page actuelle et maintenant nos pages deviennent beaucoup plus dynamiques. C' est là que ça devient beaucoup, pas plus drôle, parce que vous pouvez réellement voir vos progrès en ce moment maintenant revenir à notre fonction. Nous ne retournons rien en fait, mais parce que c'est un écouteur d'événement, il n'a pas besoin de retourner quoi que ce soit. Il a juste besoin d'orteil exécuter un tas de code. Et c'est ce qu'on a fait. Nous avons dit, Hey, exécutez ces six lignes de code mais, vous savez, enveloppez-le dans un nom appelé Calculates que nous pouvons juste taper ici. Donc, vraiment, nous l'avons emballé dans une belle boîte Amazon, et nous avons dit, Hey, cette boîte a un autocollant appelé Calculer, et à l'intérieur de cette boîte il y a six commandes. Lorsque vous ouvrez cette boîte, la boîte de calcul il y a six commandes dans leurs six éléments, et c'est donc la base derrière les événements JavaScript. Maintenant, il y a une façon beaucoup plus JavaScript de le faire, appelé un écouteur d'événement. Mais c'est un très bon Segway dans ce maintenant, ce que j'aimerais que vous fassiez, c'est essayer ceci. Créez un événement sur clic qui utilise à nouveau une fonction. Il n'a pas besoin d'être super compliqué. Ne vous sentez pas obligé d'impressionner quelqu'un avec ça. Il a juste besoin de faire quelque chose, n'importe quoi. Il pourrait même se connecter à la console si vous le vouliez. Si vous êtes coincé en chemin Hé, il y a une section commune en bas. N' oublie pas, je suis là pour t'aider. Et si vous vous sentez plutôt confiant que vous avez cette note, passons à un plus grand projet. 30. Projet de calculateur de conseil JavaScript: D' accord. Bonjour et bienvenue à votre premier grand projet ish. Nous avons fait un tas de projets jusqu'à maintenant, et à ce stade, nous allons travailler sur un projet plus important. Donc, un point nous avons réellement travaillé sur une calculatrice de conseils, et nous avons juste écrit le javascript pour cela, mais nous n'avons pas réellement écrit le front end, ce qui est un aspect important de JavaScript. Donc, dans ce projet, nous allons créer une calculatrice de conseils et afficher réellement les totaux dans le modèle d'objet de document dans le navigateur réel. Donc il y a quelques choses que j'aimerais que vous fassiez. Tout d'abord, vous avez besoin d'avoir un montant de facture aussi important que cela va être. Nous avons besoin d'un champ de saisie pour saisir cette valeur ce nombre, nous avons besoin d'un pourcentage de pourboire, et ensuite nous allons avoir besoin d'une sorte d'événement. Donc, quand nous cliquons sur Calculer , pourboire et facture totale , cela va réellement fonctionner ces chiffres, et ensuite il va nous dire combien nous devrions pourboire et combien la facture totale sera avec le pourboire. Donc, pour cela, nous allons utiliser l'événement on click sur le bouton et ensuite nous allons également utiliser quelques sélecteurs de requête pour saisir ces valeurs, donc il devrait y avoir un événement de calcul et des événements sur clic. Ainsi, chaque fois que vous cliquez sur ce bouton, il calcule le pourboire total et la facture totale avec la pointe au-dessus de celui-ci. Il est censé saisir les chiffres, quels que soient les chiffres qui sont ici au moment où vous cliquez sur le bouton, puis il va afficher le montant total du pourboire et le montant total du pourboire avec la facture en plus de cela. Maintenant, comme vous pouvez le voir, j'ai déjà un peu de ah, la disposition construite ici. J' utilise juste des bootstraps réguliers, donc il n'y a rien de fantaisie qui se passe, et nous allons utiliser un javascript vanille pour faire cela. Maintenant, vous allez utiliser une fonction Ah, et un événement et un certain nombre de sélecteurs de requête. Maintenant, j'aimerais que tu lui donnes un coup de feu tout seul. Voyez si vous pouvez le comprendre par vous-même. À ce stade, vous pouvez mettre la vidéo en pause ici et lui donner une photo. Ça ne devrait pas prendre plus de 15 ou 20 minutes au total. Et hé, tu sais quoi ? Si vous êtes coincé, il suffit de reprendre la vidéo et je vais vous montrer exactement comment je vais sur la solution. Bon, jetons un oeil à la façon dont je créerais une calculatrice de conseils en utilisant des champs de saisie et un bouton . Alors passons par mon vous, j'ai d'abord le html juste pour que vous sachiez ce que je travaille ici ici. J' ai une étiquette pour le montant de la facture et pour le montant de la facture, et c'est juste la facture totale normale. On va mettre un numéro là-dedans. Par exemple, 25 99. Quel que soit le coût du repas, disons que vous êtes dans un restaurant au coût 25 99. C' est le montant de la facture, donc je vais utiliser un I D. Mais vous pouvez utiliser un cours si vous le voulez. Tu pourrais utiliser n'importe quoi d'autre. Quelle que soit la façon dont vous voulez sélectionner cet élément, c'est à vous de décider. Mais je vais utiliser un I D parce que c'est le seul qui sera sur cette page. J' ai fait la même chose avec un pourboire. Montant à montant sélectif va être un pourcentage a un I D. Nous pouvons voir que ici les idées, montant de pourboire et l'espace réservé est AII comme neuf ou 9% et nous allons devoir prendre ce 9% et le transformer en une décimale. Et puis on a un bouton ici. Donc, nous avons, vous savez, peu plus de formatage ici, mais surtout nous avons un bouton qui indique Calculer l'astuce et la facture totale. Et enfin, nous avons une ligne que nous ne pouvons pas encore voir, et je vais en fait démontrer ceci 123 puis 456 Et voici où nous allons afficher le montant du pourboire et le total avec le pourboire, donc juste parce que je n'ai pas de dans leur, il semble qu'il soit actuellement invisible. Donc, quand cela est calculé, nous allons remplir ces dibs avec une sorte de texte ou HTML dedans. Allons de l'avant et commençons ça. Disséquons ce mouvement en arrière. Nous voulons ce formulaire quand ce n'est pas vraiment un formulaire. C' est un événement. Il n'utilise pas de formulaire. Les éléments ne soumettaient pas de formulaire. On a besoin d'un événement sur le bouton. Donc, chaque fois que quelqu'un clique sur ce bouton, il doit faire quelque chose d'abord. Tout d'abord, nous allons sur notre bouton et nous utilisons sur clic, puis nous devons lui donner un nom de fonction. Alors donnons-lui, ah, fonction, but de calculer. Et à ce moment-là, le projet commence vraiment à nous guider. Donc nous avons calculé qu'ils ne vont pas rendre ça juste un peu plus grand. Ici, nous avons un fonctionnement ici appelé Calculer, et maintenant nous devons ajouter un script ici, et nous devons créer une fonction appelée Calculer. Maintenant, nous ne savons pas encore ce que cela va prendre, mais nous savons que nous avons une fonction appelée Calculer et qu'elle doit exister. Alors allons de l'avant dans un journal de console cliqué. Et quand je rafraîchis la page et ouvre mes outils d'inspection ici au conseil, et nous allons juste agrandir cela, cliquez ici, cliquez, cliquez, cliquez, cliquez comme OK, bon. L' événement click est que nous travaillons. Suivant. Nous devons être en mesure de saisir le montant total de la facture et le montant total des pourboires. Alors comment on va attraper ces éléments ? Eh bien, nous savons que ces éléments sont des intrants, donc nous devons en saisir la valeur. Actuellement, il n'y a pas de valeur là-dedans, mais quand nous tapons, il pourrait y avoir une valeur là-dedans. Alors allons de l'avant et créons un sélecteur de requête pour chacun d'eux. Il a été créé variable pour le montant de la facture et ça va être des documents point Non, nous n'allons pas utiliser le sélecteur de critiques Nous allons utiliser get element par i d. Et qu'est-ce que c'était ? Je d. Nous avons le montant de la facture et le montant du pourboire sentir le montant et nous avons la même chose ici. Montant du pourboire. C' est près du bas sud. Difficile à voir maintenant. Ce ne sont que les nœuds, ces air, les éléments HTML. Ce n'est pas la valeur réelle. Donc, nous pourrions à ce stade faire quelque chose comme la valeur de point. Ou nous pourrions les mettre dans de nouvelles variables ou écraser les variables existantes avec quelque chose comme la quantité de pointe est égale à la quantité de pointe cette valeur. Et je n'ai pas écrit ça correctement, parce que c'est techniquement une variable différente. On y va. Donc on pourrait le faire de deux façons ici. Je vais laisser ces deux là comme un exemple. Maintenant, ce point, on ne sait pas si l'un ou l'autre de ces chiffres, donc on va devoir travailler avec ça. Un peu et allons de l'avant et jetons ces chiffres en chiffres. Disons que le montant du projet de loi est égal au montant de la facture, et ici, nous voulons simplement nous donner un nombre et nous voulons faire la même chose avec le montant du pourboire. Mais on pourrait même le faire ici comme ça. Et en fait, nous pourrions même le faire de cette façon. Alors maintenant, allons de l'avant et journal de la console. Conseil de costume de Liza. J' ai pensé, le montant de la facture et le montant du pourboire. Et donc quand je rafraîchis la page et que je mets un numéro ici, disons que 12 est le 1er 1 et 34 est le 2ème 1 Nous voyons 12 et 34. Donc, nous savons que ceux-ci fonctionnent. Et si nous devions consigner le type de chacun, nous saurions qu'ils seraient un nombre. Donc, nous pouvons maintenant faire des maths appropriées avec eux. On n'a pas à s'inquiéter pour Katyn ? C' est pour que le total s'avère être 1234 Nous savons que si nous devions les additionner, ce serait 46 au lieu de 1234 Donc c'est une édition réelle et non pas pris Capitaine ation, et nous nous assurons que c'est le cas en utilisant un nombre. Non, le montant du pourboire est actuellement un nombre. Le montant du pourboire est par défaut. Eh bien, par défaut, c'est neuf. Mais en ce moment, j'ai 34 montrant, donc par défaut est neuf comme texte de l'espace réservé. Ce n'est pas ce que la valeur par défaut réelle est, mais il dit que c'est vous connaissez exemple. Neuf. Nous devons transformer cela en décimal, alors continuons et changeons. Le montant de la pointe est égal à la quantité de pointe divisée par 100 de sorte que juste change neuf. Disons que neuf va se transformer en 0.9 C'est essentiellement tout ce que ça va dio. Et maintenant, à ce stade, nous devons créer un montant total de pourboire. J' ai donc des conventions de dénomination assez mauvaises ici parce que je l'appelle juste quantité de pourboire . Vous voudrez peut-être renommer le vôtre pour qu'il soit un peu plus verbeux, peu plus discret, sorte que vous sachiez toujours avec quoi vous travaillez. Je vais juste utiliser le montant du pourboire ici, et je vais créer une nouvelle variable appelée Total Tip de notre pourboire total est égal au montant de la facture fois, le montant du pourboire et c'est tout. Et à ce stade, si j'enregistre et actualise la page, il n'y a pas d'erreurs ici. Et je sais que je peux maintenant sélectionner ceci et mettre la pointe totale là-dedans. Alors allons-y et faisons-le. Faisons des documents. Ne pas interroger le sélecteur. Nous voulons utiliser la quantité de pourboire. Point de sélecteur CSS inter html. Nous le faisons généralement en quelques étapes différentes, mais dans ce cas, nous allons tout faire en une seule ligne. Et que l'Inter html va simplement être la pointe totale que nous pourrions utiliser HTML interne ou avec l'utilisation . intertextes n'utilisaient pas le HTML, donc nous devrions probablement utiliser inter text. Mais on voudra peut-être pimenter ça un peu plus tard. Ok, donc je mets disons 50 et 10. Et si cela fonctionne sur le montant total du pourboire devrait être cinq et tout le monde dit cinq juste là. C' est un peu petit. Nous allons rendre cela plus grand et en fait, parce que c'est HTML, nous pourrions dire mâle HD, pointe totale et ensuite ici nous pourrions faire un petit élément dans Katyn a mangé tout cela. Et en fait, ce que je veux faire est de diviser cela en de nouvelles lignes. Donc, faisons var tip html, et cela le garde juste agréable et propre en le mettant sur deux lignes. Et donc j'ai fermé la petite balise et la balise H three, puis j'ai mis tip HTML ici et réexécutons ceci. Donc encore une fois, mettons quelque chose comme 100 mettre un montant total de pourboire de 25%. Donc, nous savons que 25 sur 100 va être 25 sur un total de pourboire 25. On pourrait y mettre un signe de dollar si tu sais que tu travailles avec des dollars et quelque chose qu' on n'a pas appris. Mais, tu sais, ça pourrait être amusant de travailler avec. Si vous voulez des points décimaux là-dedans, vous pouvez faire pour corriger deux et que Assurez-vous juste qu'il y a toujours deux points décimaux là-dedans , alors continuons et rafraîchissons et donnons à ceci un tir. 125 et cela dira 25.0 Donc je ne m'attends pas à ce que vous sachiez le pour réparer les choses, mais , hé, c'est un petit truc cool, et j'aime jeter ces petits trucs et astuces dans ces solutions de projets aussi bien. Une sorte de vous familiariser avec certaines des différentes façons. Nous pouvons faire des choses en JavaScript sans nécessairement avoir besoin d'une leçon entière autour de lui. Donc, nous avons notre tep total. Il nous faut maintenant le montant total des factures. Faisons var montant total de la facture, et tout ce que nous voulons faire ici est d'ajouter le pourboire total, celui que nous avons déjà calculé au montant de la facture. C' est le montant normal de la facture. Et continuons et copions cette ligne ici parce qu'on ne changera pas trop. Donc, conseil HD mail va être. C' est un projet de loi html total avec pourboire, et nous allons devoir changer cela pour correspondre au montant total de la facture. Et donc cette variable correspond maintenant à cela très. Mais mettons cela sur des lignes séparées aussi. Faisons ça. Rends-le agréable et facile à lire. Et puis, enfin, nous avons juste besoin de prendre notre élément de note des mâles HD. Nous avons besoin d'utiliser un sélecteur de requête de document point sélecteur de requête. Nous ne voulons pas le montant de pourboire que nous voulons au total avec pourboires. Si si total avec pointe et nous pourrions faire intérieur. HTML est égal à Bill HTML. Allons-y et rafraîchissons et donnons-nous un coup de feu. Faisons quelques chiffres de base pour que nous sachions que cela va toujours fonctionner. Donc nous avons une facture de 100$ dans un pourboire de 25,25 %, pas 25$ sur 125 % des centaines qui seront 25$. Donc, le montant du pourboire devrait dire 25 et ensuite le montant total de la facture. En supposant que nous avons tout fait correctement, ça va coûter 125$ et boum. Juste comme ça, nous avons un pourboire total 25$ avec le pourboire 125$. Et allons de l'avant et faire quelque chose d'un peu plus fou, parce que les factures ne sont généralement pas seulement 100$, disons 87 point 43 donc il est 7,43$ et montant pourboire en pourcentage. Donc peut-être que vous aimez généralement donner 15% et vous ne voulez pas travailler sur ce maths dans votre tête Donc vous venez de cliquer, calculer le pourboire et la facture totale et il vous dit que à votre nouveau pourboire va être 13. 11 et votre facture totale sera de $100.54. Alors, voilà. C' est un projet de calculatrice. C' est le projet de calculatrice de pointe est un projet plus grand, et nous utilisons un peu plus de fonctionnalités dans le modèle d'objet de document. Donc, nous utilisons réellement des valeurs d'entrée étaient en fait le calcul avec une fonction. Nous ne retournons même rien parce que cela a plus à voir avec les événements et ne pas vraiment stocker les données en tant que variable. On n'a pas vraiment besoin de rendre quoi que ce soit. Mais si nous le voulions, juste pour une bonne mesure, nous pourrions toujours retourner le montant total de la facture comme celle-ci. Ou si nous voulions mettre cela dans un tableau, nous pourrions dire, Ah, Ah total du pourboire, le montant total du pourboire virgule le montant total de la facture. Je sais que nous avons accès à cette fonction dans la console du navigateur afin que nous puissions exécuter, calculer, et il va juste saisir les numéros de notre page automatiquement et va retourner un tableau avec le montant de la pointe et le montant de la facture pourboire total dans la facture totale. Alors allons-y et donnons-nous un peu de fraîcheur. Et faisons ça. Disons 92,67 et le montant total des pourboires sera de huit. Et ici, nous pouvons dire que les totaux vont être calculés et cela ne prend aucun paramètre. Il saisit automatiquement les paramètres dont il a besoin dans les champs d'entrée de votre modèle d'objet de document. Et regarde ça. Il change automatiquement notre page. De plus, il renvoie également le montant total de la pointe plus la facture totale avec la pointe, bien qu'il semble qu'il ait renvoyé des chaînes. Donc, si vous le vouliez, vous pourriez changer ça en un numéro. Mais, euh, donc c'est tout ce qu'il y a pour la calculatrice de pourboires. J' espère que tu as appris quelque chose de vraiment cool. Et comme toujours, si vous avez des questions, des préoccupations, commentaires, vous pouvez toujours les laisser ci-dessous. N' oubliez pas, vous pouvez toujours prendre tout votre code. Vous pouvez prendre une capture d'écran de votre code comme moi. J' ai mon éditeur juste ici, et puis j'ai mon produit final juste ici. Vous pouvez prendre une capture d'écran de cela et partager cela comme votre projet. Ou vous pouvez le jeter dans un stylo de code. Si vous aimez mieux cela et que vous pouvez partager votre stylo de code. Tu es Ellen. Je peux jeter un oeil au code réel et à la fonctionnalité de celui-ci pour vous aussi. 31. Fonctions Anonymous: déjà. Jetons un coup d'oeil aux fonctions anonymes avant de le faire. J' espère que ce dernier projet s'est bien passé, où vous avez créé une calculatrice de pointe complète à partir de zéro et une sorte de transition de cela vers des choses plus basées sur la fonction. Donc, ceux-ci deviennent un peu plus de choses JavaScript e où une idée comme une fonction anonyme peut ne pas exister dans tous les langages de programmation. Mais c'est certainement une chose très courante dans le monde de JavaScript. Quand il s'agit d'une fonction, nous avons une fonction de mot-clé, quel que soit le nom de votre fonction. Param un paramètre pour un tas de choses. Rends un truc ici. C' est votre fonction de base. Je vais aller de l'avant, commenter ceci et allons de l'avant et regardons à quoi ressemble une fonction anonyme. Donc, une fonction anonyme est une fonction sans nom, et cela devient un peu plus dans la portée, dont nous parlerons un peu plus tard. La portée est essentiellement l'endroit où les variables peuvent être utilisées ou où les fonctions peuvent être utilisées. Mais on parlera de ça sur la route. Vous n'avez pas à vous inquiéter pour ça maintenant. Jetons un coup d'oeil à une fonction anonyme afin que la fonction anonyme puisse être stockée dans une variable, donc nous avons variable get name. Et puis au lieu de créer un nom de fonction, nous donnons juste à cela une fonction de fonction régulière, et ensuite nous pourrions lui donner un paramètre si nous le voulons. Mais nous ne le ferons pas à ce stade et puis comme une fonction régulière, nous pourrions retourner quelque chose ici. Donc, par exemple, je pourrais retourner mon nom Caleb transport. Et quand j'ai ouvert cela dans mon navigateur, si je tape get name Oh, c'est une fonction. Regarde ça. Ce n'est pas une variable dans. Si je fais du type get name, nous allons voir que c'est une fonction. Alors, comment pouvons-nous obtenir ça maintenant ? Donc, ça ressemble à une fonction. Fondamentalement, nous stockons juste pour fonctionner dans une variable. Maintenant, pour que cela fonctionne, nous devons ajouter des parenthèses car c'est une fonction, pas une variable. Il se trouve juste d'être nommé comme si c'était une variable. Donc, nous utilisons le nom avec les parenthèses ici, rendre ça un peu plus grand, et vous verrez Caleb raconter. Nous pouvons également stocker cela dans une autre variable, aussi. Donc c'est une variable. C' est comme ça qu'on va appeler ça la variable un, parce que je suis créatif de cette façon. Et ensuite, je pourrais faire le conseil. Faisons un avertissement. Feu un. C' est là, Caleb dit. Et c'est donc vraiment tout ce qu'il y a à une fonction anonyme. Maintenant, en ce moment, vous pensez probablement, , pourquoi aurais-je besoin de ça si je pouvais écrire une fonction régulière ? Eh bien, une fonction anonyme est fondamentalement, si vous avez un tas de logique ou vraiment n'importe quelle logique que vous voulez effectuer une seule fois, elle n'a pas nécessairement besoin d'aller dans une fonction. Les fonctions sont destinées à être utilisées encore et encore. Mais si vous avez du code de groupe où vous effectuez une sorte de logique, ou peut-être que vous obtenez une valeur du modèle d'objet de document à partir de votre HTML et que vous ne l'obtenez qu'une seule fois. Eh bien, alors peut-être le mettre dans une fonction anonyme, une fonction qui ne devrait être exécutée qu'une seule fois est une bonne idée. Et donnons à ceci un exemple solide ici. Donc, j'ai déjà bootstrap ici, et ce que je vais faire est juste de mettre en place une mise en page bootstrap simple. Ok, donc ici j'ai une rangée de conteneurs. Appelez-le pas grand-chose. Nous avons un texte d'entrée qui a une classe de contrôle de formulaire et une classe personnalisée ici appelé Js Custom name. C' est celui que nous allons vouloir utiliser ici. Donc, dans notre fonction anonyme, ce que nous pourrions faire est de retourner le sélecteur de requête point de document mettre notre sélecteur de requête là-dedans, don valeur. Et maintenant, le nom va être ce qu'on lui dira d'être. Donc, si je rafraîchis votre page ici, nous avons une entrée. C' est en fait le haut de la page était un peu difficile à voir, mais si je dis John Smith et puis j'exécute get name ? Je m'appelle John Smith. Alors maintenant, je pourrais le dire. Maintenant on peut nous changer pour n'importe quoi, Caleb Colleen. Et ici, je pourrais courir chercher un nom à nouveau, tout comme une fonction régulière. Ou je pourrais stocker ceci dans le nom pour que je puisse dire que le nom est égal pour obtenir le nom. Et maintenant le nom sera toujours le nom. Peu importe combien de fois je change. Donc, si je change est de retour à John Smith et que je tape un nom, il reste comme Caleb dire parce que nous avons obtenu le nom d'origine et ensuite nous avons commencé comme une variable. Maintenant, la grande chose ici est quand vous utilisez une fonction anonyme, vraiment, vous ne devriez essayer de l'utiliser qu'une fois que vous avez une ou deux ou trois ou peut-être plus de lignes de code, et tout est juste censé aller dans un variable régulière. Donc, au lieu de stocker cela comme une variable, ce que nous pouvons faire est que nous pouvons utiliser get name comme une fonction presque comme si c'était une variable. Alors allons de l'avant et faisons le journal des points du conseil. Salut, mon nom est et c'est peut chat obtenir le nom ici comme une fonction pas comme une variable. Et ça dit : Salut, Salut, je m'appelle John Smith. Et si je retourne ça à Caleb Tallinn et que je le relance, la même chose va changer. Ça va dire bonjour, je m'appelle Caleb. Et il y a donc un cas d'utilisation pour cela. Nous n'allons pas trop entrer dans cela maintenant, mais en bas de la route, vous allez voir beaucoup de cela dans le javascript plus avancé. Et puis si nous voulions réellement faire cela automatiquement, donc nous n'avons pas à exécuter cela à chaque fois. Nous pouvons juste l'exécuter dès que la page se charge. Nous pouvons envelopper cela entre parenthèses à deux autres ensembles de parenthèses à la fin et un point-virgule , et c'est ce que nous appelons une fonction immédiatement invoquée. Et je f e Nous en parlerons plus dans la prochaine leçon, mais fondamentalement, cela va s'enfuir tout de suite. Donc, si je rafraîchis la page ici et que je tape get name pas comme une fonction mais comme une variable, nous pouvons voir qui a déjà fonctionné se trouve qu'il n'y a rien là-dedans. Donc, continuons et modifions cette valeur par défaut. Allons faire du kylo ren. Donc la valeur par défaut ici est kylo ren, et si je me débarrasse de cela et tapez, obtenez le nom il dit Kylo Ren. Donc maintenant, nous avons une fonction qui fonctionne automatiquement une seule fois et le stocke comme un nom de variable appelé Get Name. Et c'est ainsi que nous utilisons à nouveau les fonctions immédiatement appelées. On en parlera plus dans la prochaine leçon, donc je vais juste annuler ça pour votre tâche. Dans cette leçon, il n'y a pas de tâche. Je vais garder ça encore là, c'est juste quelque chose qui est vraiment bon à savoir. Tu vas voir ça beaucoup plus loin sur la route. Lorsque vous commencez à sortir en quelque sorte dans le sauvage JavaScript, vous allez les utiliser beaucoup plus souvent, mais essentiellement cela fonctionne exactement de la même manière qu'une fonction afin que vous puissiez passer un paramètre si vous le souhaitez, et ensuite vous pourriez l'appeler comme si c'était une fonction régulière. 32. IIFE: Ok, jetons un oeil à ce qu'on appelle une fonction immédiatement invoquée. Fondamentalement, c'est une fonction qui s'exécute tout de suite. Donc, dans la nature, en JavaScript régulier, nous allons voir une fonction régulière qui ressemble à ceci. Nous avons un mot-clé de fonction régulier que le nom de la fonction, peut-être quelques paramètres, et il renvoie quelque chose. Nous ne savons pas ce qui va revenir. Vous pouvez retourner n'importe quoi. Ensuite, Pour exécuter cette fonction, nous devons toujours faire quelque chose comme ce nom de fonction mis dans le premier paramètre, mettre en second paramètre et peut-être commencer comme vous le savez, une variable d'une sorte, et qui l'exécute automatiquement dans la dernière leçon. Ce que nous avons regardé était quelque chose d'un peu différent, une fonction anonyme, et nous sommes en quelque sorte entrés dans et je f e et immédiatement invoqué la fonction Expression est en fait ce qu'il est appelé pour me laisser écrire cela. J' ai dit que je f e, mais je n'ai pas tout dit, donc je f e est égal à l'expression de fonction immédiatement invoquée. Et donc ce ne sont essentiellement que des fonctions qui s'exécutent automatiquement. Et quand nous le ferons, nous verrons que cela fonctionne réellement. Alors allons-y et rafraîchissons. J' ai une valeur par défaut dans mon champ de saisie parce que c'est ce qui saisit le sélecteur de curry de document Js doc Nom personnalisé et il renvoie la valeur. Donc, j'ai la valeur par défaut de kylo ren et quand je rafraîchis ressemble à rien ne se passe. Mais quand vous utilisez get name affiche son kylo ren, donc pour créer une fonction immédiatement invoquée. Fondamentalement, tout ce que nous faisons c'est que nous prenons une fonction. On va le faire d'abord. Celui-ci est une fonction anonyme, donc nous mettons juste un crochet d'ouverture au début de la parenthèse à la fin, puis un ensemble de parenthèses ou de parenthèses, plutôt un ensemble de parenthèses à la fin. Et cela dit Javascript. Hey, dès que vous voyez cette fonction, exécutez-la. Et il le fait. Et donc non, nous pouvons simplement utiliser get name au lieu de ce que nous aurions dû faire avec la fonction régulière , qui est obtenir le nom en tant que fonction. Vous pouvez réellement voir qu'il y a un air de type non attrapé ici dit get name n'est pas une fonction ce n'est pas. Il était une fonction, mais il a effectivement retourné de valeur ici automatiquement. Donc maintenant get name est en fait juste une variable avec une valeur dedans. C' est ainsi que nous transformons une fonction anonyme en une expression de fonction immédiatement invoquée. Si nous voulions une fonction régulière, ne faisons pas ça. Faisons une note ici. En fait, c'est un I I I fi avec une fonction Nana Miss. Si nous voulions créer une nouvelle fonction qui s'exécute automatiquement pourrait faire littéralement n'importe quoi, nous pourrions simplement créer une fonction comme celle-ci. Donnez-lui un nom. Donc, disons charger l'application. Ça va être notre nom. Et ici va dire consul dot log app est en train de charger. Il va y avoir une sorte de logique ici. Peut-être que votre page allait faire quelque chose. Peut-être qu'il y a une animation. Peut-être que tu dois attendre quelque chose. Et puis à la fin, vous pourriez dire que le journal de points du conseil AP est chargé. Eh bien, en ce moment, c'est une fonction régulière, donc ça ne va rien faire. Si nous chargeons la page, nous allons voir qu'aucun de ces journaux de consul n'apparaît et laissez-moi avoir peur de ça là-bas. Et quand je vous rafraîchis, rien de tout ça n'apparaît. Je vais en fait devoir exécuter l'application de chargement comme une fonction pour ce travail d'orteil. Mais que se passe-t-il si vous avez toutes sortes de logique ici et que vous ne voulez pas nécessairement exécuter l' application de chargement  ? C' est censé fonctionner automatiquement. Eh bien, je veux dire, il n'y a rien de mal à le faire de cette façon. Ou vous pourriez simplement le dire à JavaScript. Hey, lance ça automatiquement n'a pas d'importance comme ça s'appelle. On n'a pas à le faire. Au lieu de cela, elle l'a mangé. Nous n'avons pas à le charger, juste effectuer juste dès qu'il est là, Laissez-le exécuter. Et maintenant, quand je rafraîchis la page, nous allons voir que les journaux du consul apparaissent tous les deux comme cette application est chargée . Donc encore une fois, juste comme un rafraîchissement rapide. Tout ce que nous faisons est de mettre entre parenthèses d'ouverture au début de la fonction, puis une à la fin de la fonction, puis un ensemble de parenthèses d'ouverture et de fermeture à la toute fin et qui disent juste JavaScript. Hé, même si c'est une fonction, exécutez-la automatiquement à nouveau. Il n'y a pas de devoirs, mais chaque fois que vous regardez une bibliothèque JavaScript ou un framework, vous allez voir ce genre d'expression partout. Et au début, vous pensez , Eh bien, pourquoi y a-t-il autant de parenthèses partout ? Et c'est tout ce que ça veut dire. Cela signifie simplement que nous allons simplement exécuter ce qui se trouve entre cela automatiquement. C' est tout ce qu'il dit. Et c'est donc un fonds fantastique avec JavaScript. 33. Le mot clé: Parlons d'un sujet, un mot-clé qui est un peu effrayant pour beaucoup de nouveaux développeurs. Et c'est le mot-clé this quand je dis mot clé, je veux dire, c'est un mot réservé, donc nous avons des mots réservés comme fonction de retour, var. Et maintenant le mot ceci. Donc, en général, vous ne voulez pas utiliser l'un de ces mots-clés comme noms de variables. Donc, le mot-clé ce fait vraiment simplement référence à un objet avec lequel exécute une enchère actuelle de code JavaScript. Ça veut dire que moi, je parle d'elle-même. Donc, dans l'exemple d'une fonction, nous avons une fonction get person, et nous pourrions lui donner un nom et ensuite nous pourrions faire le nom de retour. Variable de fonction donc assez simple. Kayla était égal pour obtenir personne Caleb. Et donc ça va juste revenir. Caleb est égal à Caleb, et chaque fois que tu verras ça, tu verras ce point quelque chose. Peut-être que c'est une fonction avec des parenthèses. Peut-être que c'est ce point Une autre variable ne fonctionne pas. Quelque chose comme ça va entrer dans le bon nom un peu plus tard sur la route. Ou peut-être que c'est juste ce nom de point. Chaque fois que vous voyez ce point ce à quoi cela fait référence est votre fonction ou si vous êtes à l'intérieur d' un objet dont nous n'avons pas encore parlé, Nous ne l'avons pas formellement appris. Il va juste faire référence à lui-même. Donc, vraiment, ce que cela dit est ce nom de point de fonction actuel et c'est le mot clé ici. Et donc une bonne chose que nous pouvons faire ici est que nous pouvons commencer à assigner des variables à l'intérieur d'une fonction, et nous pouvons assigner une variable normale donc, comme le nom de feu est égal au nom. Mais nous avons déjà ça ici. Au lieu de ça, je vais te montrer une chose cool qu'on peut faire. Nous faisons loin ce nom de point est égal au nom. Et si nous changeons le nom de retour pour retourner ceci. Donc il suffit de retourner cet objet particulier que nous pourrions dire, Caleb nom de point et obtenir mon nom. Alors allons-y, sauve-nous et donne-nous un peu de fraîcheur. Et cela est déjà en cours d'exécution que Caleb est égal à obtenir personne jusqu'à présent. Caleb Bizarre. Quel est ce genre de Caleb ? Oh, c'est un objet, quelque chose que nous n'avons pas appris formellement sur ce que nous commençons à faire la transition. Mais la bonne chose à propos de ce mot-clé est maintenant que je peux faire Caleb nom de point regarder cela. Il est là. Je le fais. Ce point Profession est égal à Enseignant et Dev sauver Refresh, Caleb dot profession. Caleb est professeur et développeur. Nom de point Caleb. Mon nom est Caleb, et donc maintenant nous avons une variable avec des variables à l'intérieur de cette variable qui sont accessibles par la notation de points. Et tu vas voir ça partout et des jabs. C' est incroyablement commun. Cette notation de point Fondamentalement, tout ce que nous disons ici, c'est que vous savez, si nous devions écrire ceci manuellement, et si cela était autorisé en javascript, n'est pas le cas. Mais si elle était autorisée en javascript, ce serait vier. Nom de point Caleb est égal à Caleb et var Caleb profession point est égal à Enseignant et Dev, et c'est essentiellement ce que cela fait ici. Ce n'est pas techniquement acceptable comme ça, mais oui, c'est à peu près ce qu'on fait. Ce n'est pas techniquement acceptable comme ça, mais oui, c' Donc, nous disons, Hey, vous avez variable un var un point un interne de sont deux côtés à vier interne aussi, et ensuite vous pouvez juste référencer ce qui va être si interne. Var à. La bonne chose à ce sujet est maintenant tout d'un coup, au lieu d'écrire deux variables par personne. Nous pourrions écrire deux variables à l'intérieur d'une fonction, et alors la variable elle-même pourrait être juste une ligne. Et nous ne devons le dire qu'une seule fois, et ensuite nous pouvons le réutiliser encore et encore. Et donc plus vous écrivez de code, plus votre code devient complexe. Il devient parce que votre écriture réelle du dernier code moins est souvent mieux maintenant, tout comme un été rapide ici. Une référence re rapide chaque fois que vous voyez ce point, il fait référence à une fonction peut ou ne peut pas avoir un paramètre peut être juste une fonction régulière. Cela pourrait faire référence à un objet, dont nous parlerons plus en bas de la route, mais essentiellement il fait référence à tout ce qui est à l'intérieur de ses parenthèses à l'intérieur de cet écosystème ici, cela signifie juste lui-même. C' est tout ce que c'est. Donc, chaque fois que votre javascript d'apprentissage ou que vous apprenez PHP donc en PHP, je crois que c'est égal à, et puis quel que soit votre nom var est. Ah, si vous apprenez Python, je crois que c'est juste un doute de soi. Quel que soit votre nom var, ce dollar signe ceci et moi dans différentes langues font tous référence exactement à la même chose. Maintenant, ce moment dans le temps, vous n'avez pas besoin de savoir comment utiliser cela trop. On va y aller un peu plus tard. Mais comme vous apprenez JavaScript, vous alliez voir beaucoup de choses, et je voulais juste que vous soyez prêt. Donc, comme quand tu vois ça, tu n'y vas pas. Euh, qu'est-ce que c'est ? Je ne comprends pas comment ça marche. C' est tout à fait correct. Parce que maintenant vous comprenez que c'est essentiellement dire, Hey, get person dot Name est égal à n'importe quel nom était, qui est comme ça. Et cette profession difficile est essentiellement dire Get personne dot profession, qui est une variable à l'intérieur de la fonction. Donc ça parle vraiment de lui-même maintenant. C' est un peu un concept de flexion de l'esprit au début. Donc si vous ne l'obtenez pas tout de suite, ne vous inquiétez pas pour ça. Ne te tabasse pas. Ne sois pas trop dur avec toi-même. Cela vient avec la pratique, donc il n'y a pas de devoirs pour cette leçon particulière. Je voulais juste te montrer ça, te familiariser un peu avec ça et te faciliter l'idée d'objets dont on va parler. Et je sais que je continue de le dire, mais les objets font partie intégrante de la programmation orientée objet, et nous devons en quelque sorte être préparés pour cela. Alors, voilà. C' est le mot-clé this. Cela signifie juste que tout ce que votre code fait référence à cet ensemble particulier de crochets bouclés, c'est tout ce que cela signifie. J' espère que ça a du sens, et je te verrai dans la prochaine leçon. 34. Portée: Bonjour et bienvenue. Je sais qu'on a beaucoup parlé de fonctions ces derniers temps. Je pense qu'on devrait faire une pause un peu. Pour la plupart, nous avons fini avec des fonctions, du moins pour un peu. Hey, alors parlons de portée. Scope est un sujet sur lequel j'ai délibérément dansé. La portée est fondamentalement où nos variables à haute voix orteil vivent. Donc, nous avons créé une sorte très audacieuse juste de dans notre script ici. Le nom de la variable, en fait variable , bien sûr, est égal à JavaScript pour les débutants. Et nous pouvons utiliser cette variable n'importe où dans notre script. Donc, si nous avons créé une fonction, faire ah chose que nous pourrions dire le cours de journal de point de console. Nous pourrions même retourner cours parce que nous avons défini cette variable ici et nous allons l' utiliser à l'intérieur de cette fonction. Alors allons de l'avant et rafraîchissons notre page et tapez simplement, bien sûr, comme une variable. On va voir javascript pour les débutants. Assez sûr, et puis faites ah, quelque chose est une fonction que nous pouvons voir. Il est présenté par ce f bouclé. Nous mettons des parenthèses autour d'elle ou après il a plutôt frappé entrer et nous allons voir javascript pour les débutants est journal de la console, et il retourne Javascript pour les débutants. Il s'agit d'une introduction à la définition de la portée. Donc, l'idée est que si vous avez une variable qui est en dehors d'une fonction, vous pouvez utiliser cette variable à l'intérieur d'une fonction. Et donc, vraiment, c'est votre portée extérieure. Vous pouvez penser à cela comme, comme l'atmosphère autour de notre planète. Peu importe où vous êtes, vous êtes à peu près accessible à quelque chose qui se trouve dans l'atmosphère. Oxygène ou azote ou hydrogène. Quelque chose comme ça. Et la planète elle-même serait la fonction. Et donc parce que cette variable ici sorte d'enroule autour de toutes les autres fonctions qui sont, vous savez, pensez à cela comme sur la même ligne ici, sorte d'enroulements autour de laquelle vous pouvez l'utiliser à l'intérieur d'une fonction. Maintenant, le contraire n'est absolument pas vrai. C' est très important à noter. Donc, si nous avons créé variable dans votre barre, enseignant est égal à Caleb Tallinn et peu importe ce que nous retournons ou ce que nous consoles journal. En fait, nous pouvons même nous débarrasser des deux. Et nous avons fait consul dot log teacher, Cela ne va pas fonctionner parce que cette variable est portée à cette fonction. Allez-y et donnez-nous un rafraîchissement et vous pouvez voir cette référence non interceptée. Chaque enseignant n'est pas défini. Et c'est parce que même si elle est définie ici et que nous pouvons console, connectez-le dans votre montre ce journal de console, allons-y et faisons des points d'exclamation pour le 1er 1 et pour le 2ème 1 est hors de l'école. Et puis nous allons faire quelque chose. Donc, nous allons réellement exécuter cette fonction. En fait, nous pourrions transformer ça en I F E si nous le voulions. On pourrait faire quelque chose comme ça. Allons-y, rafraîchissez-vous et ça dit : Hey, Hey, professeur est là. C' est dans la fonction, mais il n'est pas accessible en dehors de la fonction. Et donc le contraire de ce que je disais à l'origine n'est pas vrai. Mais regardez-nous. Nous pouvons toujours utiliser bien sûr à l'intérieur de la fonction, même si c'est une expression de fonction immédiatement invoquée. C' est là. Voilà mon nom. Il y a le nom du cours, variable locale, variable globale et ceux des noms réels que nous avons tendance à utiliser. Et donc lorsque vous avez une variable globale et que vous pouvez l'utiliser localement, dans n'importe quel type de fonction que vous voulez. Lorsque vous définissez une variable locale à l'intérieur d'une fonction, vous ne pouvez pas l'utiliser globalement. Et toute cette chose ici n'est pas spécifique à JavaScript. Bien que la façon dont JavaScript le fait est un peu bizarre. En JavaScript. Vous pouvez créer la variable ici et y accéder immédiatement sans la passer par le paramètre ah dans d'autres langues. Ce n'est pas tout à fait vrai. Vous devez offrir souvent mettre cours là et puis nous allons nous débarrasser de cela. Je suis juste parce que nous voulons garder cela simple, vous passeriez au cours, et ensuite vous diriez quelque chose comme ça, faites une chose et ensuite vous passez dans la variable de cours et ensuite vous seriez capable de l'utiliser ici. Et donc quand on donne un coup de feu, ça va marcher. Ça va dire trois points d'exclamation. Professeur et puis trois points d'exclamation. Le cours qui est à l'extérieur, puis en dehors de la portée, ne va toujours pas me donner le professeur. Et bien sûr, chaque fois que je rafraîchis trois points d'exclamation, professeur nommé par exclamation marque le nom du cours parce que nous l'avons passé, donc beaucoup de langues le font de cette façon. Mais en JavaScript, vous n'avez pas besoin de le transmettre explicitement car une variable globale a automatiquement compétence dans un écosystème local comme une fonction. Et donc quand je frapperai, vous verrez que rien n'a changé. Alors allons de l'avant et créons des commentaires de code. Quelques notes. C' est, ah, variable globale parce que cette fonction est autorisée à être ouverte. Ceci est également appelé une fonction globale. C' est une fonction globale, et puis nous allons juste exécuter la fonction, exécuter la fonction et un simple journal de points du conseil. Pas grand-chose là-bas, et cette variable ici. C' est la très importante. Il s'agit d'une variable locale, et les variables locales ne sont accessibles que dans leur écosystème écologique local. Donc, ce n'est accessible que et c'est un écosystème local, puis aux journaux de console. Et maintenant, nous avons correctement commenté et documenté notre code. Et donc la façon de penser à cela est que les variables globales sont autorisées à être n'importe où. En supposant qu'ils sont définis ou qu'ils sont créés en dehors d'un écosystème local, ils sont autorisés partout ailleurs. Et s'ils sont définis à l'intérieur d'un écosystème local comme une fonction, ils ne sont pas autorisés à quitter cet écosystème local. Ils peuvent Onley vivre à l'intérieur de la fonction, leur local. Mais encore une fois, les variables globales ont compétence pour être fondamentalement n'importe où à n'importe quel moment dans le temps. Donc ce que j'aimerais que tu fasses, c'est que tu essaies de briser ça du mieux que tu peux. Donc, créez une fonction créatrice variable globale. Essayez d'accéder à cette variable globale à l'intérieur de la fonction sans la passer, et ne lui donnez pas de paramètre. Essayez simplement d'y accéder à partir de la fonction, puis créez un accès variable local que dans la fonction. Mais alors, en dehors de cela, essayez d'accéder à cette variable locale en dehors de la fonction. Donc, créez une variable globale qui fonctionne à l'intérieur de la fonction, puis créez une variable locale qui ne fonctionne pas en dehors d'une fonction. Donnez ça un coup de feu et vous devriez voir le même air que j'ai rencontré, et c'est vraiment tout ce qu'il y a à portée de vue. Donc, chaque fois que vous êtes dans la nature et que vous voyez une erreur qui dit non pris, variable d'air de référence n'est pas définie. C' est parce qu'il est probablement hors de portée ou que la variable n'existe pas encore 35. Hoisting: Ok, parlons d'une chose bizarre que JavaScript fait. C' est une bizarrerie JavaScript. C' est ce qu'on appelle le levage, pas le soulage, le levage. cloué en JavaScript chaque fois que vous voyez le mot var, que nous avons vu partout, Fondamentalement ce que cela dit est tout ce que votre variable se déplace vers le haut de sa portée. Mais ne lui donnez pas encore de valeur. Ainsi, par exemple, fonction get person, et nous avons créé une variable locale ici. Nous connaissons les variables locales à partir de la leçon de portée. Le nom Var est égal à Caleb, et puis nous pourrions faire quelque chose de super simple, comme un nom de journal de console. Et puis si nous courons, mettez une personne à l'intérieur de notre page ici, obtenez une personne avec des parenthèses parce que c'est une fonction. Ça va dire, Caleb, Caleb, mais vous remarquez cette chose indéfinie. C' est à cause d'un levage variable. Faisons un exemple ici. Nous savons que le code fonctionne de haut en bas, et nous faisons le nom de variable de journal de points du conseil. Cela devrait nous donner une erreur car cela n'est pas encore défini. Le nom de la variable n'est pas défini ci-dessus, donc cela ne devrait pas fonctionner, puis nous le définissons, puis nous annulons le nom enregistré. Donnons un coup de feu à ça. Voyons ce qui se passe ici. Attraper la personne. Nous voyons Undefined Caleb Undefined. Et donc, à ce stade, nous savons qu'undefined était haut de gamme et nous pourrions réellement le faire. Rendons ça plus facile. Var pas encore réglé qui rimait, et qui était involontaire. La barre est définie, et c'est actualiser et réexécuter cette fonction. Et là, on va voir. Var n'est pas encore défini, et c'est la valeur indéfinie en JavaScript. Undefined est essentiellement un type de données. C' est comme un numéro. C' est juste comme une chaîne ou une fonction booléenne ou un tableau. Il s'agit d'un autre type de données. C' est indéfini. Et vraiment, ce que cela signifie, c'est, et vous allez voir cela un peu dans la nature To est juste de déclarer des variables. Nom de var. C' est exactement la même chose qui fait ça. Donc nous avons dit, Hey, il y a une variable, mais elle n'a pas de valeur, donc pas de valeur. Bien qu'il s'agisse d'une chaîne qui dit aucune valeur, il a donc une valeur, non est aussi une valeur. Ça veut dire qu'il n'y a rien dedans. Vous lui avez explicitement dit qu'il n'y avait rien dedans. En JavaScript, undefined signifie que la variable a été définie, mais il n'y a pas de valeur dedans. Actuellement, l'interpréteur JavaScript n'a aucune idée de ce que c'est censé être. Et donc cela va être indéfini. Allons-y et sauvegardons ça, et on va voir si on réexécute cette fonction. Nous devrions faire cela et I I F E dit Variable n'est pas définie encore indéfinie, puis elle est définie. Et puis nous avons notre indéfini habituel là-dedans, que nous pouvons ignorer. Ce dernier va aller de l'avant et créer et immédiatement invoqué fonction parce que je ne veux pas continuer à écrire cela. Et allons-y. On y va. Ça a l'air beaucoup mieux. Et donc hisser est cette idée que dès que votre navigateur interprète JavaScript dès qu'il lit le code, il dit, Hé, Hé, dans cette fonction, y a-t-il des variables ? Dit hum, laissez-moi regarder avant de faire quoi que ce soit et ensuite dire, Oh, ouais, il y a une variable ici, OK. Ah, je me fiche de la valeur. Je veux juste m'assurer que cela est défini. Donc, c'est le cas en gros. Cela le déplace vers le haut, et à ce stade, nous sommes vraiment en train de dire que le nom est égal à Caleb. On n'a pas à déclarer Vier parce qu'il va déjà être là-haut. C' est essentiellement ce qui est en train de faire. On ne le fait pas comme ça. Pas nécessairement. Pas exactement comme ça. Mais c'est bon. C' est bon, parce que nous savons dès que nous créons n'importe quelle sorte de variable qui va être hissée au sommet de sa portée, qui est ici entre ces crochets bouclés et ensuite basé sur la portée, diminuent la leçon précédente. Nous savons que nous ne pouvons pas accéder au nom de variable en dehors de ces fonctions. Allons de l'avant et faisons le journal de points de console et c'est un nom est nom. Nous savons qu'il s'agit d'une variable locale. Il est automatiquement hissé vers le haut comme s'il était automatiquement réglé sans valeur . Et puis ici, nous avons simplement dit : Oh, Oh, en fait, nous avons une valeur, donc il y a un petit morceau de mémoire alloué dans votre ordinateur pour ce nom de variable. Espérons que tu l'utilises et qu'on a dit, oui , ok, voilà. Nous allons l'utiliser, et parce que c'est une variable locale, elle n'est pas accessible dans la portée globale Donc, quand nous actualisons votre page, c'est embarrassant car il dit toujours Mon nom est Caleb. Euh, en fait, la raison est que j'ai de l'histoire ici. Variable nommée Caleb. J' ai juste fait ça. Elle est tuée. Si j'ai changé celui-là, changeons tout ça. Change celle-là, celle-là et celle-là. Et les changements à mon nom où je n'ai pas déjà celui stocké dans mon navigateur. Alors rafraîchissez. Et voilà, c'est mieux. Et donc il dit que mon nom n'est pas défini et parce que cela est à nouveau dû à la portée de cette variable est en quelque sorte liée. Il est verrouillé à cette zone particulière. On ne peut pas l'utiliser en dehors d'ici. Même si le levage dit, Hey, le nom de la variable est qu'on va le déplacer en haut de la portée. Il est verrouillé à cette portée donc il ne peut pas sortir. Maintenant, jetons un coup d'œil aux types de données indéfinis, alors faisons de. Alors créons une variable ici et appelons ça un ordinateur, accord ? Il a retourné sa valeur. Sa valeur n'est pas définie. Faisons le type d'ordinateur et nous voyons qu'il est indéfini. Que faire si nous jetons ceci dans une instruction if If Computer est égal à indéfini Alert est indéfini, indéfini, pas sous find. Regarde ça. C' est indéfini. Nous pourrions même faire une comparaison stricte ici, aussi, nous pouvons le faire si l'ordinateur est passé à trois. Donc, trois signes égaux est égal à alerte indéfinie, strictement indéfinie. Et regarde ça. Il dit que c'est strictement indéfini. Et c'est parce que l'ordinateur n'a aucune valeur en un an. Maintenant on peut dire que l'ordinateur est égal à ce que je ne sais pas, Mac OS, je suppose, et c'est réexécuter Ces rien ne s'est passé. Que faire si je fais la comparaison pas stricte avec seulement deux signes égaux ? Rien ne se passe. Et donc à quoi cela ressemblerait dans son code, c'est si nous le voulions. On pourrait le faire. Si mon nom est égal à indéfini, alors définissons-le ici. Mon nom est égal à Caleb. Allons-y. Débarrassez-vous de ça maintenant. Si nous nous sauvegardons et nous avons essayé de rafraîchir votre page, nous allons recevoir une erreur comme celle-ci, il est dit erreur de référence non interceptée. Mon nom n'est pas défini. On ne l'a pas encore défini. Il pense qu'il est censé être là, mais nous n'avons pas utilisé le mot-clé VAR. Et si on faisait ça ? Jetons ici. Faisons le var mon nom. Il suffit de le jeter en bas. C' est hisser à son meilleur. Nous rafraîchissons la page et nous y allons. Ça marche en fait. Donc ce qu'ils ont dit c'est, Hey, déplacer cette variable jusqu'au sommet comme si elle vivait ici. Mon nom est là-haut. C' est actuellement indéfini. n'y a pas de valeur. On ne sait pas ce que c'est. Donc dit, Hey, si mon nom n'est pas défini, s'il n'y a pas de valeur, il suffit de le réassigner. Assurez-vous qu'il a une valeur de Caleb et ensuite nous pouvons l'utiliser ici maintenant pour rendre cela un peu plus compliqué et juste pour obtenir plus de temps avec le mot clé que nous pourrions toujours faire. Changeons ce changement de et je e à une fonction régulière. Nous pourrions toujours vérifier si un paramètre est défini ou non. S' il n'y a pas de valeur par défaut. Donc nous pourrions dire, vous savez que le nom par défaut est égal à Caleb. C' est génial, mais s'il n'y en a pas ? Souvent, tu vas voir quelque chose comme ça. Et s'il y en a un qui n'est pas passé ? Et si on l'avait fait ? Nom du journal du point de console du consul. Alors que se passe-t-il quand on sauvegarde ça et qu'on essaie d'imprimer ça avec le journal de la console Sue ? Quel que soit ce nom, rafraîchissez. Et nous devons exécuter ceux obtenir des parenthèses de personne. Ça dit quelque chose. Non défini. Ok, eh bien, on ne lui a pas donné de nom, mais maintenant on peut vérifier si c'est vraiment là. Alors on peut quoi ? Nous n'avons pas donné de nom, mais maintenant nous pouvons vérifier si ce nom n'est pas défini et définir un nom par défaut. On peut le faire de la façon manuelle. Donc, au lieu de donner une valeur par défaut telle que celle-ci, si vous utilisez JavaScript sur un navigateur plus ancien comme Internet Explorer, il peut ne pas prendre en charge quelque chose comme celui-ci. Donc, vous allez vouloir écrire du code rétrocompatible qui dit que si le nom est égal à dépouillé strictement égal à indéfini, nous pouvons le définir ici. Le nom est égal à Caleb. Allons de l'avant et rafraîchissons. Prends du poison. Bam ! Un truc, Caleb, c'est un journal de console ici. Dit quelque chose. Caleb, on ne lui a pas donné de nom. Donc maintenant, le nom par défaut est Caleb. Nous l'avons écrit manuellement, et nous pouvons toujours lui donner un nom, aussi. Donc on pourrait dire que c'est l'effort, mon petit chat et ça va dire, Oh, c'est vraiment défini Donc, tu sais, juste sauter toute cette déclaration if. Et c'est là que le levage, la portée et l'indéfini se rencontrent. Et comme un résumé rapide, indéfini signifie essentiellement qu'il n'y a pas de type de données associé à une variable particulière . Pourtant, chaque fois que vous définissez une variable, peu importe où vous la définissez de notre nom est égal à tout ce que ce nom va être, JavaScript nous lit et dit, Oh, allons déplacer cela vers le haut. Il est actuellement indéfini jusqu'à ce que vous le définissiez plus tard. C' est ce qu'on appelle hissage et portée est le fait que ce nom n'est pas autorisé à laisser ces parenthèses qui est la portée. Donc j'espère que tout cela a du sens. Il y a beaucoup à décompresser dans cette vidéo en particulier, mais nous avions besoin d'apprendre un tas d'autres choses pour que cela commence à avoir du sens. n'y a pas de devoirs pour ça. Je veux vraiment que vous soyez capable de digérer cela si vous voulez vous sentir libre de bricoler avec un peu de votre propre code et en quelque sorte de prendre le coup de cela. Mais cela dans les deux dernières leçons étaient des fondamentaux JavaScript. Ces air pas super choses amusantes à apprendre nécessairement. Mais ils sont très importants. Vous allez rencontrer des problèmes dans le futur où ces sujets comme la portée et levage vont vous aider un peu. Vous comprendrez pourquoi vous pourriez avoir une erreur particulière. Suivant. Passons à quelque chose de bien plus amusant. Apprenons à propos de la deuxième façon de lier les événements à notre page. 36. Introduction aux écouteurs d'événement: Ok, apprenons quelque chose d'amusant. On apprenait un noyau de bateau. JavaScript. Les fondamentaux, comme le hissage de fonctions anonymes, fonction immédiatement invoquée, les expressions, portée, des choses comme ça. Toutes les choses très importantes. Mais il est vrai que ce ne sont pas les choses les plus drôles à apprendre. Alors, changeons ça. En savoir plus sur un événement écouteur d'événement. auditeurs sont, j'allais dire hilarants, mais ils ne sont pas hilarants. Ils sont extrêmement utiles et aussi amusants. Eso Ils sont appelés écouteurs d'événements, et nous en quelque sorte plonger dans cela à un moment donné où nous avons écrit Button on Click est égal à ouais, quelque chose que nous lui avons dit d'exécuter une fonction particulière. Et donc nous modifions réellement notre HTML. modification de votre code HTML n'est pas toujours possible, et parfois vous voulez simplement que les choses fonctionnent automatiquement. Et alors quoi ? Ce que nous pouvons faire est que nous pouvons créer un peu de code JavaScript appelé un écouteur d'événement, et il est lié à un élément de nœud particulier ou ah, javascript, pas de Doran. élément Html a émergé les deux mots là ensemble pour créer un élément de nœud. Donc, l'écouteur d'événement est fondamentalement juste une fonction qui est liée à votre orteil de page Web. Écoutez les clics d'événements chaque fois que vous tapez une touche chaque fois que vous faites défiler la page vers le bas. Quelque chose comme ça. Maintenant, les deux écouteurs d'événements les plus courants là-bas, de loin sont la pression sur le clic et la touche. Ainsi, chaque fois que vous tapez dans un champ de texte ou un champ de saisie, ou chaque fois que vous cliquez sur quelque chose, il peut déclencher. Ah, il y en a un autre qui s'appelle Blur. Ainsi, chaque fois que vous cliquez dans un champ de texte et que vous partez, il peut être en mesure d'effectuer une action à ce stade. Mais ces deux-là semblent être les plus populaires. Le flou est toujours très, très populaire. Et puis il n'y a que des tonnes et des tonnes d'auditeurs d'événements là-bas. Nous ne pouvons pas tous les apprendre, mais heureusement, ils travaillent presque de la même façon, donc nous devons vraiment apprendre un ou deux d'entre eux. Et puis vous pouvez utiliser n'importe quel écouteur d'événement que vous voulez. Nous allons donc créer un écouteur d'événement simple qui va compter le nombre de fois qu'un bouton est cliqué. Donc c'est à un cours ici. Faisons Bt nbt en primaire. C' est juste bootstrap Bt un LG, et cela a donné une classe de bouton Js, et cela va juste dire, Cliquez sur moi. Il est assurez-vous que cela semble bien sur notre page dit, Cliquez sur moi donc vous savez, un bouton ennuyeux. La première chose que nous devons faire est que nous devons réellement saisir ce bouton en utilisant une sorte de requêtes. Électeur obtenir élément par I d. fonctionnerait. Ah, nous pourrions utiliser un sélecteur de requête régulier, qui est ce que nous allons faire dio n'a pas vraiment d'importance comment vous obtenez cet élément. Vous avez juste besoin de pouvoir sélectionner ce nœud. Alors allons de l'avant et créons vier. Bt N est égal au sélecteur de requête de stud de document. Nous n'allons pas utiliser le sélecteur de création tout parce qu'il n'y a qu'un seul ici que nous voulons sélectionner. Donc nous utilisons le bouton Js et ça va nous donner un bouton. Alors allons de l'avant, rafraîchir et regarder. Cela va type de BCN et il met automatiquement en évidence mon bouton ici, comme vous pouvez le voir. Donc, nous avons ce bouton comme une note et quand nous faisons type de bouton, vous pouvez réellement voir que c'est un objet. On a des objets d'orteils, je le jure. Je vous promets qu'ils viennent maintenant Tout ce que nous avons à faire est de dire BTM C'est le nom de cette variable ici. Ajouter un écouteur d'événement Quel type d'écouteur voulons-nous ? Celui-ci va être un clic tout comme nous avons sur Click, qui était sur clic. Nous l'appelons simplement Click in JavaScript Et puis nous donnons à cela une fonction et nous allons passer dans l'événement. Et donc, à ce stade, nous sommes en quelque sorte familiers avec l'idée de la notation par points. Donc nous avons un bouton ici et nous savons que le point de bouton dans son texte est égal à cliquer sur moi, s'il vous plaît. Donc, nous pouvons changer une notation de point qui est juste une sorte de notation de point à son meilleur. Donc nous disons, Hey, prenez le bouton à l'écouteur d'événement, c'est une fonction. Et donc le premier paramètre est quel genre d'événement ? Les auditeurs qui disaient, Hey, écoutez les clics et le deuxième paramètre, nous ne l'avons pas encore vu, mais le deuxième paramètre est en fait ah, fonction ressemble essentiellement à ceci seulement étaient l'écrire sur le long chemin. Nous avons donc une fonction ici, et l'écouteur d'événement passera toujours dans l'événement à cet écouteur particulier. Alors voici ce qu'on peut faire. À ce stade, nous pouvons dire faire quelque chose ici, mais nous voulons compter sur le nombre de clics. Donc, disons que le total des clics est égal à zéro. Et parce qu'il s'agit d'une variable globale, nous pouvons y accéder localement. Le nombre total de clics est égal au nombre total de clics, plus un, ce qui est essentiellement le même que le nombre total de clics plus plus. Et puis nous allons créer un autre élément sur la page qui compte ou affiche plutôt affiche le total des clics. Donc, Div I d. Total clique quelque chose comme ça et prenons cet élément aussi. Donc, faisons le document point obtenir élément par i d. Total clics point dans son texte est égal au total des clics. Allons-y et donnons une chance à ça. Donc dit Cliquez sur moi et il compte encore et encore et encore. Je vais rendre ça beaucoup plus grand en changeant ça d'un div à un H. Et je vais aussi zoomer ici. Regarde ça. Ça compte pour moi. Nous n'avons pas écrit de code HTML supplémentaire pour l'écouteur d'événement. Nous venons d'écrire un écouteur d'événement JavaScript add. Et tu te rappelles quand on apprenait la portée, il y a quelques leçons t' ennuyaient à mort avec celle-ci. Mais c'est là que cela devient important, parce que si nous avons déplacé le total des clics ici, Scope dit , Eh bien, ce sera toujours zéro. Chaque fois que cette fonction exécute cet événement, écouteur est exécuté. Chaque fois que nous cliquons sur le bouton, nous réinitialisons ce 20 et cela ne fonctionnera pas. C' est toujours une interview. On le réinitialise. Zéro en ajoute un. Mais si nous définissons que c'est globalement et que nous le modifions localement, ce sera zéro, puis un, puis deux, puis trois, puis quatre, puis cinq et ainsi de suite et ainsi de suite. On y va. Nous avons un écouteur d'événement JavaScript. Maintenant, c'est plutôt cool, mais ce n'est pas aussi cool que de pouvoir saisir du texte à partir d'un champ de saisie, ce que nous allons faire dans la prochaine leçon. Donc tu n'as rien à faire dans cette dernière. Il n'y a pas de devoirs. Je veux juste que vous jetiez un oeil à ce genre de syntaxe. Donc, nous avons bouton point ajouter l'écouteur d'événement. Son premier paramètre est le type d'événement. Nous avons dit que ce sera un type de clic et que le deuxième paramètre nous passons dans une fonction entière et une dernière chose à noter avant de passer à la leçon suivante, nous pouvons réellement déplacer cette fonction entière, lui donner un nom d'annonce clique, donc l'annonce de fonction clique et donc le deuxième paramètre est simplement le nom de la fonction. Alors allons de l'avant, rafraîchir, et cela fonctionne aussi bien. 37. Obtenir des valeurs d'entrée: Hé, là. Dans la dernière leçon, nous avons appris sur l'écouteur d'événement click, qui ressemblait beaucoup à ces boutons point ad he event écouteur click, puis un nom de fonction. Dans cette vidéo, nous allons essayer d'obtenir la valeur exacte de quelque chose à partir d'un champ de saisie. Donc peut-être qu'on demande le nom de quelqu'un et qu'on veut que ce nom soit sur chaque frappe. Nous pouvons le faire tout d'abord, mettre de côté html. Nous avons donc le nom du point de contrôle de forme de point d'entrée Js, et nous allons sélectionner ceci par son nom. Et puis peut-être que nous allons également afficher un message de bienvenue à la page. Alors, bonjour deux, et peu importe ce nom. Donc, nous allons vouloir sélectionner ceci dans le monde de JavaScript. Nous allons avoir besoin d'une sorte d'élément pour juste changer ça. On pourrait tout changer. On pourrait dire bonjour, Caleb. Bonjour, c'est l'effort. Bonjour, Henry. Ou on pourrait juste changer le nom si on voulait juste faire une façon particulière. Changeons la portée. La classe est égale à Js changement de nom. Et quand on démarre ça sur sa page et qu'il y a un champ de saisie ici, ok ? Et puis il suffit de faire défiler vers le bas jusqu'à notre JavaScript. Maintenant, la première chose que nous devons faire est que nous avons réellement besoin de sélectionner ce champ d'entrée. On lui a donné un nom de jazz. C' est la classe. Semble Prenons ce var comme une entrée et cette entrée comme un feu. Donc, sélecteur de requête de points de documents Nous allons prendre juste le 1er Js, pas le nom. Et maintenant, nous voulons lier un écouteur d'événement à cela. Donc, nous faisons l'entrée point add écouteur d'événement. Nous pourrions faire la clé, et ensuite nous pouvons lui donner une fonction comme deuxième paramètre. Et ce sera l'événement qu'il va toujours passer dans l'événement. Ah, beaucoup de fois, vous allez juste voir la lettre e qui signifie événement était vraiment juste renommer l'entrée de variable. Ça n'a pas vraiment d'importance d'être plus explicite. J' aime l'appeler événement, mais dans la production, je l'appelle souvent juste E. Mais gardons cela simple et événement universitaire, et alors nous pourrions faire une valeur de point cible de point d'événement de journal de point de conseil Donc vous pensez que ce serait juste valeur de point d'événement ? Mais ça ne marchera pas. Nous avons besoin de l'événement en fait, puis de cibler cette valeur. Alors allons-y et sauvegardons ça. Et chaque fois que nous tapons quelque chose ici, nous allons le voir apparaître dans le consul et parfois en fait taper trop vite pour que c'est un k un L O B . Donc c'est la clé en main. On pourrait faire la clé vers le bas. Il y a une différence. C' est comme lorsque vous appuyez sur la lettre de votre clavier et que votre doigt n'a pas encore bougé vers le haut. C' est la clé enfoncée. touche vers le haut est lorsque votre doigt se lève de la frappe. Mais allons de l'avant et restons juste à suivre régulièrement parce que celui-là va nous donner la pleine valeur. Dès que je frappe, Kay dit K A L O B. Dès que je tape, ça me donne toute la valeur. Maintenant, nous devons aller de l'avant et changer ce nom. Donc, nous allons interroger notre modèle d'objet de document notre HTML Pour cela, ils sont le nom, pas l'entrée nommée. Ça semble un peu bizarre de le nommer cet élément de nom, je suppose, parce que pourquoi pas ? Documents dot requête Donc verrouillé porte jazz changement nom. Et puis parce que nous ne voulons pas redéfinir ça à chaque fois. Chaque fois qu'on appuie sur une touche, c'est juste un peu plus efficace de cette façon. Nous pourrions juste utiliser la variable do inter text est égale à la valeur de point cible de point d'événement. Allons-y et débarrassons-nous de ça. Et cela va changer au fur et à mesure que je tape. Bonjour, Caleb. Salut, Zephyr. Bonjour, Henry. Bonjour, d'Argo. Bonjour. Mon nom est Caleb et j'aime Coda, y compris deux ont fait le codage d'édition et là vous l'avez. Et encore une fois, ce n'est que le deuxième paramètre, puis d'étendre sur cela encore un peu plus loin. Cette fonction ici en tant que paramètre est techniquement appelée une fonction de rappel, une fonction de rappel, ou juste un rappel pour court. Et ce que cela signifie, c'est chaque fois que vous appuyez sur une touche et que votre doigt se déplace du clavier, il va exécuter une fonction. Et donc ce que nous pourrions faire ici, c'est que nous pouvons réellement supprimer cela et définissons une fonction fonctionnelle ici appelée call back juste pour garder cela simple. On donne ce nom là-dedans, et ça va l'exécuter. Peu importe le nom de ce nom. Le nom pourrait être quelque chose n'a pas d'importance, mais il est techniquement appelé une fonction de rappel, donc je vais l'appeler Call back. Donc, pendant que vous lisez ceci, vous allez entrer à la touche d'écouteur d'événement vers le haut et après tout, il va exécuter une fonction de rappel. Donc, vous cliquez, enregistrez, actualisez votre page et cela continue de fonctionner. Oui, regarde ça. C' est plutôt génial. Et c'est amusant. Donc maintenant, si vous combinez cela avec l'écouteur d'événement de clic, vous pouvez changer toutes sortes de choses sur votre page en fonction des événements de clic ou des événements de clé, vous pouvez faire toutes sortes d'autres choses. Donc maintenant, si vous êtes intéressé par, ah, peu d'activité parascolaire, ce que vous pouvez faire est de sauter sur la machine Google et juste chercher un événement JavaScript différent . Types d'écouteur. Il y en a beaucoup là-bas. Vous n'avez pas besoin de connaître la plupart d'entre eux pour être totalement honnête, mais vous devriez savoir qu'il y a beaucoup là-bas et je ne peux pas peut-être passer sur chacun parce que cette série de vidéos va devenir très, très longue et gonflée et je Je ne veux pas perdre ton temps comme ça. Apprenez à une personne comment ajouter des écouteurs d'événement, et peu importe ce qu'est l'écouteur. Tu pourras t'en occuper à l'avenir, donc c'est une sorte de philosophie d'enseignement. Donc, cela obtient des valeurs d'entrée avec un écouteur d'événement JavaScript. Dans la leçon suivante, allons de l'avant et changer quelques couleurs CSS avec les écouteurs d'événements et rendre notre page super dynamique. Donc nous ne changeons plus que du texte. On va changer quelque chose qui a vraiment à voir avec le style de page. 38. Modifier des CSS avec des écouteurs d'événement: haut dans les deux dernières leçons que nous avons apprises au sujet des auditeurs d'événements. Nous avons utilisé l'écouteur d'événement click, et nous avons utilisé l'écouteur d'événement key up. Mais faisons quelque chose de amusant, parce que jusqu'à maintenant nous changeons juste un peu de HTML dans un peu de texte intérieur, et c'est vous savez que c'est OK parce que cela rend nos pages dynamiques, mais ce n'est pas aussi amusant ou est visuellement attrayant que je pense que cela pourrait être. Continuons donc dans cette leçon et créons un nouvel écouteur d'événement qui va changer le texte basé sur les pages, couleur et la couleur d'arrière-plan. Donc nous avons besoin de quelques années de melon HD. Faisons H un. Bonjour Monde Maintenant, ne faisons pas Bonjour, monde. Nous sommes bien au-delà du monde Hello. Faisons changer CSS avec les écouteurs d'événements. Maintenant, nous avons besoin d'un champ d'entrée. Créons un négatif avec une entrée, juste un texte normal et je vais styler ceci pour que vous ayez une sorte de style. Nous allons dio taper 30 pixels et aussi la taille de la police 30 pixels. Faisons en gros, et nous avons besoin d'une étiquette ici couleur de fond et continuons et dupliquons ceci. Appelez ceci une couleur de texte, même chose et puis ajoutons une classe dans ces deux classes égale à Js quelque chose autour là. Et je viens d'appeler Js juste pour que je sache que c'est juste pour JavaScript, JavaScript, couleur BG et faisons la couleur du texte JavaScript. Et si on regarde sa page, ça va être moche. Ouais, ajoute plutôt grossier. Mais tu sais quoi ? C' est ce que c'est. Donc l'idée est que nous pouvons taper ici comme ça, et ça va changer la couleur de fond de sa page et changer la couleur de la police de notre page. Nous devons donc créer deux écouteurs d'événements pour cela. Crab, le premier écouteur d'événement avant la couleur de fond. Jusqu' à présent, couleur BG est égale au sélecteur de requête point de documents assez bon, et nous allons également saisir la couleur du texte Js couleur Js, et nous allons appeler cette couleur de texte unique. Maintenant, nous devons ajouter notre écouteur d'événement, donc faisons BG color dot add event écoutener key up parce que nous tapons dans un champ de texte, nous allons lui passer une fonction de rappel qui prend automatiquement un paramètre appelé événement. Et puis nous allons simplement consigner cela pour l'instant. Annulation de la valeur du point cible de point d'événement de journal, peu importe ce qui va être, et nous allons aller de l'avant et dupliquer tout cela. Copie passée. Une couleur de texte et va faire exactement la même chose. Disons que la couleur BG dans ce journal de la console et que c'est faire la couleur du texte dans ce journal de la console. Actualiser la couleur BG. On peut voir ça là-dedans et ensuite x couleur. On peut le voir dans leur chlor, comme je l'ai appelé. Non, il veut essentiellement changer le texte des pages, couleur et la couleur de fond des pages. Nous n'avons pas appris à le faire en JavaScript. Oui, ça va être assez amusant pour ça. Allons de l'avant et attrapons tout le corps du document, puis nous allons changer le style du corps, la couleur de fond. Donc, nous allons faire de Notre corps est égal à des documents enseignés requête, sélecteur. Prenons juste le corps et ensuite on pourrait faire un point de style de point de corps. La couleur d'arrière-plan est égale aux événements qui ciblent cette valeur. Et donc tout ce qu'on a fait ici, c'est dire , Hey, attrapons tout le corps. C' est l'élément du corps qui vient de là, puis le style dessus. Donc, nous voyons cette notation de points beaucoup plus souvent. Maintenant, ce style va avoir une couleur de fond. Techniquement, c'est la couleur de tiret d'arrière-plan, mais en Javascript, vous ne pouvez pas utiliser un tiret dans une propriété ou un nom de variable. Donc ce qu'on fait, c'est qu'on le casse. Donc, chaque fois que vous voyez un tiret dans une déclaration CSS, pas Dash C, il est juste en majuscules Voir, ou si c'était, ah, ah, image d' arrière-plan, ce ne serait pas une image d'arrière-plan. Ce serait un capital de base. J' image camel boîtier donc elle a une couleur de fond. Et voyons si cela fonctionne. Couleur d'arrière-plan Rouge. Oh, regarde cette couleur de fond bleu couleur de fond. Faisons une couleur hexadécimale noire. C' est plutôt soigné. Ça commence un travail. Ok, faisons la même chose avec notre couleur de texte. Maintenant, nous pouvons obtenir plus efficace avec cela parce que sur chaque clé, nous interrogeons la page pour l'élément body. , Heureusement, il n'y en a jamais qu'un, donc c'est facile à trouver. Mais vous savez, si vous tapez le mot rouge R E. D, il va l'exécuter trois fois, et à mesure que votre page devient de plus en plus grande, cela devient de plus en plus lent, et donc nous allons déplacez simplement cela dans la portée globale, et nous n'avons pas à nous soucier de l'effacer plus d'une fois parce qu'il sera toujours disponible pour nous et dans sa couleur de texte. On pourrait utiliser ça en le collant ici, et j'ai collé le mauvais. Donc, euh, vous n'avez rien vu. Et donc ici, nous disons juste, le style du corps, pas la couleur de fond. Juste la couleur de police normale sera quelle que soit cette valeur cible d'événement pour la couleur du texte de cette note, continuons. Actualiser la couleur du texte. Disons blanc. On dirait que tout a disparu. Que faire si je sélectionne tout ? Il est toujours là. La couleur de fond va être lue ou bleue ou verte qui est si difficile à voir. Ou noir et jaune, noir et jaune, noir et jaune. Et c'est ainsi que nous allons changer CSS avec les écouteurs d'événements. Maintenant, à tout moment, vous pouvez même modifier un CSS lors du chargement initial de vos pages. Donc si nous le voulions. Allons de l'avant et changeons la couleur BG en utilisant JavaScript afin que le style de point de couleur BG se termine, aussi. La couleur d'arrière-plan est égale à la lecture comme le chargement de la page qui va être lu. Et ha a fait cela mal parce que j'ai sélectionné la couleur BG. J' ai devancé moi-même. J' étais un peu trop excité là-bas. Donc je vais faire, c'est juste annuler ça et on va descendre. Et au lieu de la couleur BG, faisons le corps. On y va. Ça a l'air mieux. Ah, nous pourrions également changer la couleur par défaut aussi faire noir, qui était probablement déjà traîneaux. Vous attendez ? On y va. Et cela va avec n'importe quel CSS que vous avez confiné. Ainsi, par exemple, BG Color. Disons que nous voulions ajouter quelques arrondis. Faisons le style de point de couleur BG Ce rayon de bordure va être Donnons-lui un rayon de bordure de 10 pixels . Regarde ça. L' air maintenant autour dans un peu. Donnons-lui une bordure qui a une bordure de trois picks est pointillée en noir. Hé, regarde ça. Je veux dire, c'est plutôt moche. Ne vous méprenez pas, et nous ne voulons jamais déployer ça dans la vraie vie. Mais maintenant, nous sommes en train de changer CSS avec javascript. Nous n'écrivons pas vraiment CSS. Je veux dire, c'est CSS, je suppose, mais nous n'en écrivons pas. Les styles réels laissaient JavaScript vous, tout cela. Et en tapant ici, ça va changer pour nous, ce qui est plutôt cool. Maintenant. Nous pourrions aller plus loin. On pourrait dire, Hey, peut-être que les couleurs de fond ne peuvent être qu'une certaine couleur. Allons de l'avant et ajoutons ceci comme une variable afin que nous n'ayons pas à taper l'événement cette valeur cible tout le temps et faisons une instruction if. Mieux encore, faisons une déclaration switch. On n'a pas encore trop vu ça, alors changez de couleur. En fait, nous devons assigner ça. C' est deux cas égaux au bleu, et on pourrait le faire. En fait, quoi ? On pourrait même les empiler ensemble. Donc c'est un peu intéressant. Lecture bleue, Attendre, puis par défaut. Ça va toujours être qu'on a besoin d'une pause dans ta pause. La couleur par défaut sera toujours blanche et une erreur de syntaxe. C' était ma faute. Je voulais juste écrire ça. Vous pourriez dire que c'était une erreur de syntaxe parce que tout cela tournait gris eso. Fondamentalement, c'est dire , hey, saisir chaque couleur ou quelle que soit la couleur que c'est actuellement et dit si c'est rouge, blanc ou bleu, puis changer la couleur de fond en rouge, blanc ou bleu. Sinon, changez toujours. Le blanc juste garder blanc est la valeur par défaut. Et maintenant, nous limitons réellement l'entrée des utilisateurs. Donc, si je tape du noir, il devient juste blanc orteil par défaut. Mais si je tape du rouge, ça marchera. œuvres bleues. Blanc fonctionne de toute évidence. En fait, on ne veut pas attendre. Nous voulons que ce soit jaune parce que le blanc est déjà là-haut, donc cela n'a pas de sens d'avoir des œuvres blanches. Et si je tape quelque chose ici est juste jaune par défaut. Et voilà, vous y allez. C' est un bon exemple de la façon d'utiliser un écouteur d'événement comment utiliser des sélecteurs de requête en modifiant le style CSS. Nous utilisons même une fonction de rappel. Nous avons utilisé une instruction switch que nous avons utilisée pour les écouteurs d'événements et nous avons modifié le style par défaut lors du chargement de la page. Donc, nous avons beaucoup accompli dans cette vidéo. Donc, ce que j'aimerais que vous fassiez, c'est juste mettre la main sur l'expérience avec tout ce que j'ai écrit dans cette vidéo. Allez-y, créez des sélecteurs cruellement, essayez de changer le style, puis créez une entrée et essayez d'ajouter un écouteur d'événement avec une touche vers le haut et une fonction de rappel . Et peut-être qu'il n'a pas besoin d'avoir une instruction switch qui pourrait être un peu compliquée pour ce que nous utilisons actuellement. Mais vous pouvez dire que la couleur du point de style de point de corps est quelle que soit cette couleur que vous tapez dans le champ de saisie. Vas-y, donne-lui un coup, bricole-toi encore avec. Tu ne pourras rien casser. Alors faites de votre mieux et, honnêtement, amusez-vous avec ça. J' aime toujours bricoler, et j'aime essayer de briser les choses et de comprendre où est le bord de chaque sorte de sujet que j'ai appris, comme, Jusqu'où puis-je pousser quelque chose exactement, et cela me donne beaucoup d'expérience pratique. J' aime vraiment faire ça. Sinon, si vous vous sentez assez confiant avec cela, je pense que nous devrions passer à notre prochain mini projet. 39. Mini projet #5: Bonjour, End. Bienvenue de retour. Nous allons commencer notre prochain mini projet ici. Maintenant, l'idée derrière ce projet est tout au sujet des écouteurs d'événements. Donc, ce mini projet, ce que je voudrais que vous fassiez est de créer trois éléments d'entrée. Et puis je veux qu'ils fassent des choses différentes avec les différents événements. Les écouteurs changent la couleur d'arrière-plan, changent la couleur du texte et modifient la taille de la police de la page au fur et à mesure que vous tapez Ils devraient donc être des champs d'entrée. Et vous devriez regarder l'écouteur d'événement key up, Et chaque fois que quelqu'un appuie sur une touche dans l'un de ces champs d'entrée, il devrait exécuter votre écouteur d'événement et essayer d'apporter une modification sur votre page. Maintenant, nous avons essentiellement fait cela dans la dernière vidéo où nous changeons comme des couleurs CSS avec des écouteurs d' événements comme vous avez tapé. Vous n'avez pas besoin d'obtenir cette avance, mais je veux juste que vous ayez un peu de main sur l'expérience avec les écouteurs d'événements JavaScript droits . Alors allez-y et donnez-lui un coup de feu. Essayez si vous pouvez tout faire de la mémoire. Si tu ne peux pas, c'est bon, mais c'est bon de faire transpirer un peu le cerveau. Et comme toujours, si vous êtes coincé, vous pouvez toujours référencer l'autre matériau. C' est tout à fait correct. Personne ne va te faire honte pour ça. Et je suggère maintenant que vous mettiez cette vidéo en pause parce que je suis sur le point de fonder cela noir et ensuite je vais commencer avec ma solution de la façon dont je l'implémenterais. Alors allez-y, Posit Video. Donnez une photo, puis quand vous avez terminé, reprenez cette vidéo et vous pourrez regarder ma solution. Ce n'est pas la solution parfaite, mais c'est une solution. Il y a tellement de façons différentes de faire des choses dans les langages de programmation comme Javascript et Python, tous ces autres langages qu'il n'y a pas de moyen parfait de le faire. Mais je vais vous montrer ma solution. Alors, arrêtez maintenant et donnez ça un coup de feu. Très bien, je vais vous montrer ma solution à de nombreux auditeurs d'événements du projet numéro cinq. Les premières choses d'abord. Nous devons créer trois éléments d'entrée. Vous voulez changer la couleur d'arrière-plan un pour changer la couleur du texte et souhaitez modifier la taille de la police de la page au fur et à mesure que vous tapez. Tout cela devrait être que vous tapez un peu pour entrer dans le code de mon éditeur V ici, et les premières choses d'abord j'ai besoin de trois éléments d'entrée, donc je ne vais pas faire une belle page à la recherche par aucun moyen. Je vais simplement créer un tas d'étiquettes et d'entrées dibs. Donc Div nous allons avoir une étiquette ici, et cette étiquette va être pour la couleur de fond BG à nouveau, c'est juste une étiquette régulière. Et puis allons de l'avant et à une entrée dans la forme ici contrôler un bootstrap de base là-dedans et le I D va être couleur BG. Et donc cette idée va correspondre à ce label quatre ou quatre. Attribut ici et nous arrêtons et actualisons votre page. Nous allons voir à propos de la couleur de fond ici. Rien ne va se passer. Nous n'avons pas encore écrit de JavaScript. Maintenant, nous voulons essentiellement copier cette couleur d'arrière-plan deux fois le texte, le texte, couleur et la taille de la police, et celui-ci va être un nombre, donc il change à la taille du téléphone. Changons ça à la couleur du texte, et ce que je vais faire est quelque chose que vous verrez une bonne quantité dans la nature. Mais au lieu d'obtenir ces éléments par leurs idées, ce que nous pourrions certainement être un moyen très rapide de le faire. Je vais les obtenir par leur sélecteur CSS en utilisant un préfixe JavaScript. Donc Js et puis la couleur BG va être la 1ère couleur de texte Js est le 2ème 1 et la taille de la police Js est la 3ème 1 Okay, actualisons et vous savez que ce n'est pas la plus grande page mais ça fait le travail Maintenant, nous devons créer des sélecteurs de requête, Nous devons saisir les trois champs de saisie, alors continuons et créatifs sont variables. Disons que la couleur BG va être que je vais juste déplacer ce document ici sélecteur de requête point et nous voulons seulement la 1ère couleur BG 1 Donc Js qui correspond à celui-ci ici et ici nous voulons la couleur du texte et celui-ci va être la couleur du texte et puis le 3ème 1 est va être la taille amusante et celui-ci va être amusant et tiret soupirs Ok, à ce stade dans le temps parce que nous écrivons du javascript, je vais faire un clic droit inspecter, aller sur ma console rafraîchir et j'utilise juste firefox pour cela et je voir qu'il n'y a pas d'erreurs dans les années. Ainsi, par exemple, cela créerait là. Voir Référence Air, l'art. D. A s n'est pas défini. Donc on n'a pas eu d'erreurs comme ça. Donc nous pouvons supposer que les choses ont l'air bien. Ensuite, nous voulons changer la couleur d'arrière-plan, le texte, la couleur texte, taille de la police de page au fur et à mesure que nous tapons. Nous avons donc besoin d'un sélecteur de requête de plus ici. Nous devons être capables de changer ces styles sur le corps. Allons-y. Le corps de Vier est égal au sélecteur de requête de points de documents. Au lieu d'ajouter un sélecteur C s pour une classe, nous allons juste utiliser un sélecteur de collecte CSS régulier pour le corps. Maintenant, nous devons ajouter ou des écouteurs d'événement. Donc, disons BG color dot add event écouteur. Nous allons dire sur la touche exécutez cette fonction particulière avec l'événement à l'intérieur de celui-ci, Et juste pour nous assurer que cela fonctionne en fait, nous allons consigner la valeur de point cible de point d'événement Rafraîchissez votre page. Pas d'erreurs. Et en tapant, il apparaît ici. Ok, donc ça a l'air bien. C' est gentil et sain. Donc maintenant, pour la couleur BG, tout ce que nous voulons faire est dire corps, couleur de fond point de style néerlandais. Rappelez-vous C'est l'affaire Camel comme celle-ci et JavaScript. n'y a pas de tirets dans les variables JavaScript, donc nous utilisons le boîtier de chameau. La couleur d'arrière-plan est égale à la valeur de point cible de point d'événement, et c'est tout. On n'a pas besoin de rendre quoi que ce soit. On n'a pas besoin de faire quoi que ce soit de fantaisie. Allons-y et donnons une chance à ça. Bam ! Tout comme cette couleur de fond devient rouge lorsque je tape le mot rouge. Non, vraiment, vraiment, tout ce qu'on a à faire, c'est de copier des visages quelques fois. Couleur d'arrière-plan. Celui-ci va être un point de couleur de texte Ajouter un écouteur d'événement sur la couleur de fond de point de style de corps . Non, nous voulons changer cela en couleur de texte, qui en CSS est juste appelée couleur. Et cela va être la valeur cible de l'événement. Et dans le dernier va être point de taille de police à l'écouteur d'événement à nouveau. Touchez la fonction de rappel avec un paramètre d'événement là-dedans, et nous allons dire que la taille de la police de point de style de point de corps est égale à ce que c'est. De plus, nous allons Kincannon huit, peut-être des pixels, ou si vous voulez faire des ems ou des béliers, vous pouvez le faire aussi. Je vais rester avec des pixels pour que je puisse utiliser un numéro régulier, et ça ne va pas rendre cette page deux ridicule plus ridicule qu'il ne l'est déjà . Allons-y. Appuyez sur Actualiser. n'y a aucune erreur dans mes consuls JavaScript. Déplaçons ça un peu. La couleur de fond va être bleue. La couleur du texte va être blanche. La taille de la police sera de neuf pixels. Ah, peut-être 90 pixels. Je veux dire, vraiment ridicule. Faisons quelque chose d'un peu plus grand. Nous avons donc une taille de police de 25 pixels, texte de la couleur de fond blanc de bleu, et cela change au fur et à mesure que nous tapons. Nous pouvons même utiliser des valeurs hexadécimales ici aussi. AB 00 C'est rouge F F zéro qui est jaune ou jaune ou aqua. Et c'est ainsi que nous allons créer une page qui va changer à peu près au fur et à mesure que vous tapez dans différents champs de saisie. Donc tous ensemble, nous utilisons le total de 369 13 lignes de JavaScript pour créer une page complètement dynamique basée sur ce que l'utilisateur veut. Et c'est tout ce qu'il y a à ce mini projet. Maintenant, si vous êtes en partage de compétences, n'oubliez pas que vous pouvez créer votre projet de cours et le partager soit via un stylo de code, soit vous pouvez le partager ou vous pouvez partager votre code exact. Vous pouvez prendre une capture d'écran de votre code et aussi la page qui fonctionne réellement. N' hésitez pas à partager votre projet avec le reste du groupe. Vous finissez probablement par créer un tas d'inspiration pour beaucoup d'autres personnes, ce qui est toujours utile à d'autres personnes aussi. En plus, je vous donnerai quelques commentaires si vous voulez. 40. Objets: Ok, aujourd'hui, c'est le grand jour. C' est le grand moment. On a parlé de cette chose appelée un objet tant de fois, et je dis qu'on va en apprendre davantage. On va en apprendre plus. Finalement, on va en apprendre plus. C' est le moment où nous allons en apprendre davantage. Donc, un objet est une idée terriblement, terriblement nommée pour un moyen de stocker des données. Parce que si vous pensez à un objet, , pensez à tenir quoi que ce soit dans votre main. Et si quelqu'un devait décrire cet élément qui est dans votre main, le mot objet pourrait s'adapter à n'importe quel élément physique qui a vraiment n'importe quelle sorte de masse ou de poids à elle pourrait être considéré comme un objet qui n'est pas très utile. Alors qu'un tableau fondamentalement, c'est un terme de développeur fantaisie pour une liste. Juste une liste de choses variable une variable. Si je pouvais épeler cette variable droite est une valeur qui change. C' est en fait dans le nom. Il est variable. En JavaScript, un nombre est évidemment juste un nombre, et dans une fonction, nous savons qu'une fonction est réellement censée faire quelque chose. Mais le mot objet est comme quoi ? Qu' est-ce qu'un objet maintenant ? ont fondamentalement une complexité infinie. Donc je pense que nous devrions faire un pas à la fois, et nous n'avons pas vraiment besoin de tout savoir maintenant. Ce sera juste trop d'informations qui sera une surcharge d'informations. Donc ce que je vais faire, c'est vous présenter des objets de manière plus amicale. Donc, nous savons que lorsque nous créons une liste en JavaScript, nous pouvons créer dans une course. Disons, Ah, créons des noms est égal à un tableau. Caleb Nathan finit toujours et c'était mon genre de capitale. R. Et donc quand je tape des noms comme celui-ci, c'est clair que les noms de type. Si je voulais obtenir Nathan, je devrais taper les noms de support, le numéro un et puis un autre crochet, et cela me donnera l'index ici. Mais si je voulais que Teoh stocke un tas de données sur une personne en particulier ? J' ai dit qu'une personne en particulier s'appelait Caleb. Il a 30 ans et il a deux chats. Non, c'est sympa, mais nous ne savons pas si c'est nécessairement le bon ordre, parce que si je disais hey, de tous ces nombres sur toutes ces variables. Au contraire, combien de chats Caleb a-t-il ? Eh bien, tu devinerais aussi. Mais pour tout ce que vous savez, j'ai peut-être 30 chats et je n'en ai parlé que. Et il y a donc cette zone grise, et nous ne savons pas comment y accéder correctement avec un objet que nous pouvons nommer. Alors allons de l'avant et créons un objet. Donc, nous allons créer un objet de personne, et l'objet ressemble juste à ceci. C' est une parenthèse, et on lui donne un nom. Alors allons de l'avant et appelons réellement ce nom et vous pouvez voir qu'il y a des parenthèses ne sont pas des parenthèses. Vous pouvez voir qu'il y a des citations autour de cela. Il peut s'agir de citations simples ou doubles. Peu importe le deux-points, et puis quel que soit le nom, donc va être fondamentalement ressemble à une chaîne est égale à utiliser. Un signe deux-points est égal à presque n'importe quel type de variable. Ça pourrait être un numéro. Ça pourrait être une fonction. Ça pourrait être un tableau. Ça pourrait être non, ça pourrait être un autre objet. Et allons de l'avant et en créer un autre. À ton âge. Mon âge va être 30 et le nombre de chats que je dois et pour nous fermer, nous lui donnons juste une fermeture, parenthèses ou pas. Apprentis, un coup de crochet bouclé de fermeture, Entrez et nous y allons. Nous avons maintenant un objet. Et au lieu de dire, Eh bien, c'est un tableau où il est juste comme Caleb, 32 est ce à l'intérieur avant que cela dit maintenant en fait l'âge est égal à 30 chats pour nommer est Caleb. Donc maintenant chaque fois que je prends personne, je peux prendre personne point Age me donne 30 nom de point me donne le nom de personne point Cats me donne le nombre de chats, et maintenant nous avons en fait assigné un nom à fondamentalement une liste ou un tableau, et vous pouvez presque les considérer comme des variables internes. Nous avons donc une personne appelée très audacieuse. Mais à l'intérieur de cela, il y a une variable appelée variable d'âge appelée nom et variable appelée chats. Maintenant, la principale chose à savoir sur un objet est oui. Il est livré avec un grand nom, donc vous pouvez nommer à peu près n'importe quoi ici. Donc, le nom de point de personne me donne mon nom, ce qui est fantastique, mais vous pouvez également y ajouter et utiliser le mot-clé this. Donc on en a un peu appris un peu. Nous avons appris dans la leçon de tableau où nous pourrions faire tout ce que le tableau est appelé point Push, et cela va réellement pousser quelque chose à la personne du tableau ne fonctionne pas tout à fait de la même manière. On peut littéralement créer n'importe quoi. Donc personne, faisons quelque chose de très intéressant ici. Quel son fait cette personne ? Donc, pour créer un tout nouveau point de données à l'intérieur de cet objet, il ressemble beaucoup à un tableau. Nous lui donnons le nom de variable que nous voulons y est égal, et alors quoi que nous voulons qu'il soit égal dans ce cas, je vais nous donner une fonction et je vais au journal des points du conseil. Quel son le tue-t-il ? Que dit le Caleb ? Ce type me dit. Oh, je ne sais pas pourquoi, mais je vais me dire comment frapper Enter, sauver. Et maintenant, nous pouvons réellement voir la fonction elle-même. C' est ce qu'il retourne à la fonction. Ça s'appelle Sound n'a pas d'arguments. Ok, donc je viens de l'effacer. Maintenant, si je voulais vraiment voir ce qu'il y a dans l'objet de personne, je pourrais juste taper personne, et nous allons voir qu'il y a un juge, nom de chat et un son. Un son comme une fonction nous donne tous les détails là-dedans maintenant. Je peux aussi juste faire des parenthèses sonores de point de fonction parce que c'est une fonction. Les fonctions sont des actions, les actions ont besoin de parenthèses. J' ai frappé. Entrez, assurez-vous que j'ai activé les journaux ici afin que le journal de la console s'affiche réellement et qu'il m' indique . Et donc non, non seulement ma personne a une variable à l'intérieur, mais ma personne a aussi, ah, fonction à l'intérieur. Maintenant, quand il s'agit de variables et de fonctions à l'intérieur d'un objet plus à l'intérieur d'une classe, ils ont généralement des noms différents, ce qui indique aux autres développeurs quelle est la portée. Donc, généralement, nous avons un nom de variable est égal à Caleb, et cela est juste appelé variable. On l'a déjà vu 100 fois. Ensuite, nous avons aussi une fonction quelque chose, et il fait quelque chose ici et cela Il est appelé une fonction quand nous traitons d'un objet donc de notre nouvel objet est égal à, et le nom va être Caleb, Par d'ailleurs, peu importe que nous utilisions des apostrophes ou des guillemets simples. Ça n'a pas vraiment d'importance. C' est un coma là-bas. Donc, le JavaScript sait qu'il va y avoir un autre objet ici. Un autre élément de données. Cette chose n'est plus appelée variable. C' est ce qu'on appelle une propriété et une fonction. Donc, comme quand nous avons écrit, son est égal à fonctionner quelque chose ici. C' est ce qu'on appelle une méthode, donc nous allons revenir pour entendre la personne point Age va être une propriété. Il agit comme une variable. Fondamentalement, la même chose est variable, mais ce que nous disons est que cette variable appartient en fait à un objet, ou dans d'autres langues, elle appartient à une classe. De même, avec le son est une fonction, mais c'est à l'intérieur d'un objet, donc nous l'appelons une méthode a exactement les mêmes propriétés, et cela fonctionne exactement de la même manière qu'une fonction. La seule différence est que c'est maintenant à l'intérieur d'un objet, donc nous l'appelons une méthode, et c'est vraiment juste une convention de nommage, sorte que lorsque vous parlez à d'autres développeurs, ils peuvent comprendre ce qui se passe maintenant. Pourquoi est-ce important ? C' est important parce que nous pourrions dire personne point son. Écrivons. Ceci est égal à la fonction et nous voulons consoles enregistrer le nom. Donc nous faisons ce nom de point et si nous faisons un son de point de personne, il me donne mon nom. Maintenant, c'est là que le mot clé est vraiment utile parce que jetons un coup d'oeil à cette personne. Objet une fois de plus parce que nous avons exécuté une fonction qui est à l'intérieur d'un objet. Le mot-clé this fait référence à l'objet entier, pas seulement à la fonction. C' est l'objet entier et donc à l'intérieur d'une fonction. Grattez que l'intérieur d'une méthode, nous pouvons utiliser ce nom de point pour commencer l'âge ne chats juste sur le nom. Nous pourrions même retourner lui-même si nous le voulions, ce que nous n'allons pas à Mais nous pourrions retourner l'objet entier si nous voulions acheter juste disant Retourner ce Allons de l'avant et créer une toute nouvelle méthode ici appelée point de personne Obtenir des chats. Cela va être une fonction et tout cela va faire est alerte et le nombre de chats que j'ai alerter ce point Chats, En fait, En fait, laissez le faire ce nom de point Capitaine E doit arrêter les chats. On y va. Donc ça va dire que Caleb a deux chats. Allons-y et fermons cette fonction. Ok, c'était réglé. Si nous regardons à nouveau l'objet de la personne, nous avons une fonction dans votre appelé get Cats. Nous pourrions passer des paramètres là si nous le voulions aussi. Tout comme une fonction régulière. Rendons cette personne, n'attrapez pas de chats et laissez-moi bouger ça. Et ça dit que Caleb a deux chats. Et donc, quand nous avons appris à propos du mot-clé vis, ce n'était pas vraiment super utile. Mais quand nous commençons à travailler avec des objets, cela devient beaucoup plus utile. Pourquoi utiliseriez-vous ça ? Pourquoi utiliseriez-vous un objet comme celui-ci ? Eh bien, vous pourriez dire que la personne objet est égale à Caleb. Je fais un bruit. J' ai un agent ici 30 et j'ai des chats à faire. Et remplissons tout ça. Le Conseil ne se connecte pas. Non. Donc la raison pour laquelle nous utilisions ceci est parce que maintenant nous pouvons utiliser le nom de point de personne ou comment pouvons-nous changer cela en Caleb ? Moi ? Nous allons juste me prendre comme exemple. Le nom du point de Caleb sera Caleb. Peut-être que c'est mon nom complet. Caleb racontant l'âge de point de Caleb. Au fur et à mesure que vous lisez ceci, cela a plus de sens. Maintenant le Caleb, Very Buller, l'objet Carotte Caleb. Quel est son âge ? Combien de chats a-t-il ? Et cela devient beaucoup plus verbeux. Donc, quand vous le lisez, cela a beaucoup plus de sens, et vous pourriez faire la même chose avec presque n'importe qui. Disons qu'on avait une autre personne ici et qu'il s'appelle Zephyr, qui est en fait mon chat. Il me dit comment il a son âge pour combien de chats a-t-il ? Aucun. Il n'en a pas. En fait, il l'a fait. Il a un petit frère. Donc il a un chat. Et maintenant je pourrais dire ses chats d'effort, et ça va me donner un ou son effort, ce son et ça va consoles. Là encore, où cela entre-t-il vraiment en jeu ? Parce qu'en ce moment, nous n'utilisons qu'un seul objet. Eh bien, cela entre en jeu parce que jusqu'à ce stade, nous avons dû stocker tout cela dans des variables séparées afin que nous ayons une variable qui ressemble quelque chose est que son nom est égal à quel que soit son nom. Zéphyr Zéphyr. L' âge est égal à quatre que jamais les chats est égal à un est que pour le son est égal à moi. Oh, et alors on devrait faire le conseil Ne pas se connecter. C' est pour le son ? Et maintenant, nous avons écrit quatre variables. Et si nous voulions une copie de ceci à quelqu'un d'autre, nous devons le droit pour plus de variables. Et si nous voulions populace à nouveau, nous devrons deviner ce copier-coller encore et encore et encore. Et maintenant, nous avons 12 variables dans la portée globale des choses. Cela fait vraiment juste un gros gâchis de la portée globale, alors qu'avec ah, un bel objet, nous obtenons juste le nom de la variable régulière. De plus, nous obtenons ces propriétés et méthodes à l'intérieur de celui-ci. Maintenant, juste comme un petit rafraîchissement rapide ici, j'ai raté celui là dedans comme un petit rafraîchissement rapide ici. Jetons un coup d'oeil à la syntaxe d'un objet. Donc, la syntaxe de l'objet va ressembler à ceci. J' ai une variable d'un certain type et vous avez à votre nom de variable est égal à un objet. Donc c'est votre ouverture et fermeture des supports bouclés là-dedans. Et puis vous avez un deux-points clé, pas juste valeur. Et puis si vous en avez plus, vous lancez une virgule là-dedans, puis vous allez clé à valeur à nouveau. Si tu as plus de frisson, viens là-dedans. Sinon, ce dernier n'a pas de virgule. Et puis quand vous voulez accéder à l'un d'entre nous, vous pouvez simplement écrire le nom de l'objet et un peu comme comment nous accédons aux choses dans un tableau au lieu d'utiliser 0123456 et ainsi de suite. Donc... On vient d'utiliser le nom de la clé. Donc, la clé va retourner la valeur et aussi la clé à va retourner la valeur à maintenant. C' est l'ensemble juste derrière un objet. Vous n'allez probablement pas les utiliser trop souvent jusqu'à ce que vous ayez beaucoup plus d'expérience avec JavaScript et tout d'un coup ils seront partout. Tu vas en quelque sorte de 0 200en en cinq secondes. Dès que vous commencez à les voir, vous allez commencer à les utiliser partout. Mais comme vous apprenez juste le javascript, vous n'allez pas les utiliser partout. Pas encore. Alors quoi ? Je voudrais que vous fassiez une petite tâche pour cette vidéo vient de créer Object. Peut-être que c'est toi. Donc, créez une variable. Quel que soit votre nom, créez l'objet. Donnez-lui un nom, un son. Ah, un âge, peut-être votre nourriture préférée, peut-être votre site web. Et puis essayez juste d'exécuter certains des trucs à l'intérieur du conseil de votre navigateur. Allez-y et donnez-lui un coup de feu. N' oublie pas. Si vous avez des questions, des commentaires, des préoccupations, vous pouvez les laisser tomber. Sois bas. Je suis là pour vous aider en un coup d'œil. Les objets sont une chose très intéressante en JavaScript. J' espère que cette explication allait bien. C' est Ceci est l'un de ces obstacles quand il s'agit de la programmation est de comprendre les objets. Mais une fois que vous l'aurez, il n' y a pas de retour en arrière. Donc certainement obtenir un peu de pratique là va être très, très important sur la route. 41. Pour les boucles: un bas de gamme Bienvenue de retour. Nous allons commencer à aborder le concept qui est vraiment important dans la programmation, et ce concept est une boucle. Donc, l'idée est que vous avez une fonction particulière ou que vous définissez un code ou quelque chose. Vous voulez faire plus d'une fois encore et encore automatiquement. Disons que vous avez un tas de noms. Donc vous avez Caleb, Nathan et Zephyr, et pour chacun de ces noms, vous voulez capitaliser. Vous voulez peut-être mettre à gmail dot com ou quelque chose à la fin de celui-ci pour obtenir une adresse e-mail . Tu veux faire quelque chose à ces trois. C' est là qu'une boucle quatre entrerait et ce n'est pas seulement trois. Il pourrait s'agir d'un élément qui est dans un tableau. On en parlera dans une seconde. Ils pourraient être deux objets, trois objets, 3000 articles. Ça n'a pas vraiment d'importance. Ça va continuer à boucler jusqu'à ce que tout soit fait. Jetons donc un coup d'oeil à une boucle quatre. Donc quatre boucles va ressembler à ça. Nous avons un mot clé pour nous l'avons dit. Une variable I est égale à zéro. Donc c'est notre intervalle. Peu importe ce qui va commencer, c'est essentiellement notre compteur. On en parlera plus dans une seconde. Combien de temps cela devrait-il durer ? Disons que je dois avoir moins de 10 ans. Et puis après chaque aération Lupin juste en incrément I par un. Alors faisons moi plus conseil. Ne vous connectez pas. Et donc ce que cela dit est pour la variable. Je vais commencer à zéro tant que j'ai moins de 10 ans. Console, journal, quel que soit ce numéro, et à la fin de chaque génération, c'est un peu comme dire que je suis égal à I plus un. C' est ce qu'on fait à la fin. Mais cette fois, on n'a pas besoin d'écrire ça. Alors allons-y et sauvez-nous et ouvrons cela dans notre navigateur et rafraîchissez notre page et nous allons voir 0123456789 et vous remarquez que tout se passe en ligne. 18. Donc quand je clique dessus et que je déplace ça sur le mensonge de 18 ans assez sûr, il y a le journal du conseil juste comme ça ? Donc sur ce point, vous pensez probablement, Hey, c'est un peu cool, mais honnêtement, je ne sais pas où je vais m'en servir. Alors créons un exemple de la vie réelle ici. Créons une course A. Nous avons une variable de noms, et cela va être un tableau. On a Caleb, Nathan Suffrer et Henry. Et disons que nous voulons regarder à travers tout ça. Comment allons-nous faire ça ? Donc, à la place, je vais commenter ça juste pour que vous puissiez nous référencer plus tard si vous voulez. Nous allons créer un nouveau quatre Lupin ici. Voyons en fait ce que le code de V veut remplir automatiquement cela avec. Ouais, en fait, c'est assez parfait. Il fait quelques choses ici dont on n'a pas encore appris, alors je vais annuler ça. Mais si vous utilisez le code V, vous pouvez simplement cliquer sur quatre onglet. Donc, votre boucle for commence avec votre quatre mots-clés pour variable. Je suis égal à zéro. Nous voulons regarder combien de fois nous voulons boucler le nombre d'éléments qui sont dans ce tableau. Donc, disons que les noms de la longueur des points et que je suis moins que les noms de la longueur des points. Donc, ce que cela dit est une za longtemps que les yeux moins de quatre continuent à rouler. Et puis à la fin de chaque génération, disons incréments. J' en achète un que nous pourrions mettre en œuvre par deux. Nous avions multiplié par 10 si nous le voulions. Mais le plus souvent, vous allez le voir juste incrémenter par un. Et puis nous pourrions créer un nouveau bowling ici et dire, Ah, cette variable est le nom actuel. Et parce que c'est une liste que nous devons accéder à ces noms, Caleb va être Index zéro index un à index trois. Et donc on peut maintenant dire que je m'appelle. Le 1er 1 va être nul. Donc, dans la première itération, puis une fois que c'est fait, cela va essentiellement dire dans les coulisses, je suis égal à I plus un, et donc ça fonctionne une deuxième fois. Et puis celui-ci sera Nathan, puis Zephyr et Henry. Mais nous stockons tout cela dans une variable appelée I Just Interval Stands for Interval. Je suis égal à l'intervalle. Allons de l'avant et console Loggers Council ne consigne pas le nom actuel. Rafraîchir notre page Comment nous obtenons Caleb Nathan et Henry Cool. Donc maintenant, nous faisons quelque chose avec un tableau parce que jusqu'à ce point, une augmentation pour nous. Il suffit de stocker une liste de données, et ce n'est pas vraiment super utile à moins que nous sachions exactement ce qu'il contient maintenant. Nous n'avons pas besoin de savoir ce qu'il y a exactement dedans, alors allons-y et rendons cela un peu plus compliqué. Créons une fonction ici où nous allons transformer une entrée en minuscules et upend à gmail dot com. Donc, la fonction. Appelons ceci à l'adresse e-mail, et il va prendre un nom et nous pouvons tout faire en une seule ligne maintenant afin que nous puissions faire le nom qui vient de ce paramètre ici point en minuscules plus à gmail dot com. Et donc c'est juste peut Capitaine se terminant à Gmail dot com sur son boîtier inférieur, tous les noms Donc maintenant nous pouvons prendre que vous pouvez l'appliquer ici. Nous disons que le nom actuel sera quel que soit le nom actuel dans notre tableau. C' est là que ça devient un peu plus compliqué. On va passer ce nom. Quel que soit ce nom. ici comme paramètre dans l'adresse e-mail, et cela va retourner quel que soit le nom. Cat en minuscules et en conserve Nate à gmail dot com Alors maintenant, allons de l'avant et donnons à cela une sauvegarde . Et regarde ça. Caleb, Un génie Nathan Ojima, Zephyr Jima et Henry à gmail dot com. C' est non, on fait quelque chose d'utile ici. Maintenant. La bonne chose derrière cela, c'est que nous n'écrivons pas autant de code. Et comme votre Reagan est plus long et plus long, vous n'écrivez plus de code, ce qui est vraiment, vraiment sympa. En fait, nous pourrions, si nous voulions même réduire cela et au lieu du nom, nous allons utiliser des noms. Allons-y et débarrassons-nous de ça. Ne le supprimons pas réellement. Allons juste commenté. Et maintenant, en 1234 cinq lignes de code, nous pouvons exécuter ces quatre. Consul Lux, ce qui ne semble pas beaucoup, mais si on faisait quelque chose de plus fou ? Allons-y et faisons une boucle Laura Epsom, alors prenons Florham 50. Et donc nous avons juste 50 mots d'ipsum chaud ici divisé par points sur chaque espace et ce que cela va faire est, disons, diviser leur scission, leur scission, leur scission là tout le chemin vers le bas. Et cela pourrait être l'utilisateur entrée sa balle. On pourrait le diviser. Et nous changeons de noms. Deux mots juste parce que ça va sembler un peu plus agréable et qu'on le change de noms. Deux mots ici aussi. Donc, commencez zéro invariable ou intervalle zéro. Continuez aussi longtemps qu'il y a des mots dans cette érection. Nous savons que ce n'est pas un tableau car nous utilisons un point split après chaque aération Lupin aller de l'avant et incrémente le nombre. J' achète un nom actuel. Donc nous allons faire ce courrier électronique actuel Ce que nous allons dire et ce que nous faisons ici, c'est que nous disons que cet email actuel va être quel que soit le mot est de Can Katyn huit minuscules à gmail dot com. Donc ça va prendre chaque mot ici. En minuscules chacun, puis ajoutez gmail dot com, ce qui est un exemple assez inutile. Mais cela montrera la puissance des boucles. Regarde ça. Il y en a maintenant 50 à l'intérieur. Nous n'avons pas écrit de lignes de code supplémentaires. Nous avons une ligne de code ici. C' est juste sur plusieurs lignes parce qu'il y a une longue chaîne là-dedans. Mon éditeur aime orteil le décomposer en plusieurs lignes. Donc, une ligne à la ligne trois ligne quatre dans exactement les mêmes cinq lignes de code. On a 50 sorties maintenant, ce n'est pas très utile, et tu vas les voir partout. C' est très populaire dans toutes les programmations, en particulier en JavaScript. Disons que vous vouliez seulement le 1er 10 Ok, eh bien, ce qu'on pourrait faire, c'est qu'on peut sortir de cette boucle à tout moment ou qu'on pourrait continuer. Maintenant, ce que nous pourrions faire, c'est dire, si j'ai 10 ans. Donc c'est le 10e mot. Je ne sais pas pourquoi nous ferions cela dans cet exemple, puisque nous voulons faire une boucle sur chaque mot. Mais nous allons dire, Hey, Hey, dès que j'arrive au 10e nombre incréments jusqu'au 10e numéro, tout simplement casser sinon continuer à fonctionner normalement. Et donc cela va seulement montrer le 1er 10 Et ce que nous pouvons faire ici, c'est que nous pouvons réellement consul log I plus l'email actuel afin que nous puissions voir tous ces et ce que cela nous montrera est de 0 à 9. Et c'est là. Nous avons 0 à 9, techniquement 10 articles parce que nous commençons par le nombre zéro. Donc, si vous comptez sur votre main, 0123456789 Vous avez les 10 doigts sur votre main pointant vers l'extérieur. Donc, vous êtes là. Et on a dit, Hey, au 10e intervalle, juste sortir de la boucle. Ne montrez plus. Allons de l'avant et le commentaire ne voit pas ce qui se passe. Cela descendra jusqu'au numéro 50 ou au 49e Index. Allons de l'avant et commentons cela. Et faisons quelque chose d'un peu plus intéressant. On va utiliser des maths de base ici. Nous allons utiliser ce truc appelé modules, dont nous n'avons pas vraiment appris, et c'est bon. Tu n'as pas vraiment besoin d'en savoir trop sur celui-là. Nous allons dire que si je module ISS 2 est égal à zéro. Donc, c'est dire que tout ce que je suis divisé par deux a un reste de zéro continuer, et cela va sauter au-dessus de la boucle. Donc, quoi que ce soit ici, par exemple, ce journal de console. Cela ne fonctionnera pas. La déclaration continue dit essentiellement, Hey, tout ce qui suit ici. Si cela se poursuit, l' instruction est exécutée. Ce truc n'est pas exécuté. Passez à la prochaine génération. Allons de l'avant et sauvegardons ça et voyons ce qui se passe ici. Nous obtenons tous les 2 1 Donc, par exemple, nous ne voyons pas le numéro 10 ici. 10 divisé par deux est cinq avec le reste de zéro. Et donc parce que c'est vrai, il va continuer à ne pas consommer. Donc, c'est comme ça que nous créons des roses uniformes et bizarres et comme des tables quand vous avez, comme une ligne grise route blanche, route grise, route blanche, route grise, rangée blanche C'est essentiellement tout ce que nous faisons. C' est donc votre introduction en quatre boucles. C' est en fait aussi l'introduction dans les boucles sauvages et pour chaque boucle vers d'autres boucles, nous allons entrer tout de suite. Ce que je voudrais que vous fassiez avant de passer à autre chose est de créer une boucle de base pour. Alors allez-y, utilisez la variable de quatre mots clés. Je suis égal à zéro. Je suis moins que, ou peut-être moins que et égale à ah longueur particulière. Je plus, n'oubliez pas d'ajouter cela et puis peut-être juste le journal de la console, peu importe ce que je suis actuellement. Et c'est tout ce que j'aimerais que tu fasses. Juste obtenir un peu de main sur l'expérience avec elle. Vous n'avez pas besoin d'être un professionnel ajouté pour passer à la prochaine leçon du tout. Je veux juste que vous vous familiarisiez un peu avec cette syntaxe bizarre de la façon dont ce code est en quelque sorte décrit en utilisant des personnages drôles dans un ordre drôle. 42. Boules boucles: Jetons un coup d'oeil à cette idée d'une boucle sauvage d'un certain temps. Nous avons donc appris à propos d'une boucle quatre dans une boucle for. En gros, , je vais boucler les orteils jusqu'à ce que tu me dises d'arrêter de boucler. Une boucle sauvage ne sera pas une boucle sauvage. Si vous n'êtes pas prudent avec cela, on continuera pour toujours jusqu'à ce que votre ordinateur manque de mémoire et que votre navigateur se bloque. Ou si vous êtes sur un ordinateur plus ancien, votre ordinateur se bloque. Donc soyez très prudent avec cette boucle sauvage. Celui-ci est très, très important à comprendre avant d'en écrire un dans le pire des cas, c' est que vous savez, peut-être que votre ordinateur manque de mémoire et que vous devez lui redémarrer, pas la pire chose dans le monde, mais généralement votre ordinateur se verrouille juste. Tu lui donnes un redémarrage. Ne réexécutez pas le script et vous êtes prêt à y aller. Alors regardons un moment. Boucles, syntaxe. Donc, ce qui va se passer ici, c'est que tu as un moment. Quelque chose est vrai. Fais un tas de trucs ici. Cela se résume vraiment à quelque chose de si simple, et donc ce que nous pourrions dire ici est var Numb est égal à zéro. Et disons que si le nombre est inférieur ou égal à 1000, nous pourrions consigner l'engourdi . Non, ne l'exécutez pas à ce stade parce que ça va durer éternellement. On n'a rien fait avec le numéro dans la boucle quatre. On l'a fait. Nous l'avons automatiquement implémenté dans une boucle while que nous ne l'avons pas fait. Nous devons donc le mettre manuellement à la fin de notre Lubar au début d'une boucle. Quelque part là-dedans, nous devons incrémenter le nombre. Donc, nous pourrions dire que le nombre est égal au nombre plus un ou nous pourrions tout simplement faire aucun plus et cela nous donnera 12345 ainsi de suite et ainsi de suite. Allons-y et donnons une chance à ça. Et quand je rafraîchis ceci, cela va consigner le numéro 1000 fois et assez sûr, il est là, et je peux juste garder le curling. Continuez à faire défiler et vous voyez qu'il y a en fait 1000 là-dedans Maintenant, quand voudriez-vous utiliser quelque chose comme ça ? Eh bien, ce qu'on pourrait faire, c'est demander à l'utilisateur une sorte de commentaires. Donc, disons que var numb va être nombre et nous allons inviter l'utilisateur pour un nombre . Donne-moi un numéro et on va lancer ce message à un numéro. Et puis passons ça et disons que la barre de départ engourdie est égale à zéro, pas 90 Et débarrassons-nous de cela. Changeons ça. Faisons commencer Numb est moins que engourdi. Et donc ce que nous disons est toujours commencé le numéro zéro et aller jusqu'à ce qu'il atteigne ce que l'utilisateur dit, Peut-être que c'est le numéro 10. Peut-être que c'est le nombre de 10 millions va courir jusqu'à ce qu'il atteigne ce chiffre. Aussi, nous devons faire attention ici parce que c'est le nombre que nous essayons d'augmenter. Donc, même si c'est vrai, nous devons aller de l'avant, les échanger. Donc, fondamentalement, ce que cela dit est zéro. Peut-être que l'utilisateur tapé dans 1000 est ici moins de 1000. Oui, c'est le cas. Alors exécutez un, puis deux, puis trois, puis quatre, puis 5000 fois jusqu'à ce qu'il arrive à est 1000 de moins que 1000. Ce n'est pas le cas. C' est faux. Et donc il arrête de s'exécuter. Allons-y et donnons une chance à ça. Déplacez ça pour qu'on me demande un numéro. Rafraîchir. Donne-moi un numéro. Je vais rouler mon Dyson. Je vais dire 89. Et le consul a enregistré 89 parce que j'ai fait le mauvais ici. Si tu regardes ton écran, Caleb, tu as oublié d'en changer un. Tu as raison. J' ai fait ce consul enregistré 89 parce que c'était le numéro que j'ai entré. Je voulais que Konta consigne le numéro de départ. Le nombre qui va constamment s'incrémente. Allons-y et donnons-y un coup de feu. Faisons semblant que le 1er 1 n'est pas arrivé et le numéro 89 est là. Commence à zéro. Il descend à 88. Rappelez-vous, l'ordinateur commence à compter au nombre zéro. Bien que si nous le voulions, nous pourrions dire que ce sera un est inférieur ou égal à. Allons-y et rafraîchissons 89. Et cela nous donnera les numéros 1 à 89. C' est là. dernier numéro est 89 1er numéro est un. Et c'est donc un moment. Boucle. Maintenant, dans le javascript moderne, vous voyez ça ? Ah, beaucoup moins que ce que tu avais à l'époque. Ils étaient partout. Ceux-ci sont moins populaires maintenant parce que quatre boucles et la pour chaque boucle, dont nous parlerons dans la prochaine vidéo a fondamentalement pris là-bas. De meilleures formes de boucles pour JavaScript. Mais tu vas toujours voir celui-là dehors. Et si tu te demandes, Caleb, où je vais utiliser une boucle sauvage ? Et si vous vouliez créer une liste ah de quelque chose Donc, en fait, avant de passer à la leçon suivante, allons de l'avant et créons un autre exemple ici. Donc je vais commenter ça pour qu'il n'utilise pas mes ressources informatiques. Et créons une liste. Donc, nous avons des classes UL Eagle Js liste vous slash bien, et quand je rafraîchis ma page, nous ne voyons rien ici. En fait, faisons ceci chaque liste. Nous avons donc une liste ici, mais il n'y a pas d'élément de liste, donc nous allons devoir créer des éléments de liste. Donc, nous allons utiliser le sélecteur de requête pour saisir cet élément Jusqu'à présent, liste ou plutôt, vous l est égal aux documents dot queary sélecteurs à Lecter. n'y en a qu'un pour qu'on puisse l'utiliser. Allons de l'avant et créons du code HTML pour cela. Donc vier html est égal à une chaîne vide. Et puis passons à travers cela un certain nombre de fois. Alors que quelque chose est vrai. HTML est Eagle deux html plus Ally, quel que soit le nombre va être. Appelons ça le numéro, je suppose. Ça pourrait être n'importe quoi. Nous n'avons pas encore été aussi loin, alors ils sont avec moi Slash Ally. Et maintenant, nous sommes juste en train d'écrire un tas de html ici disant, Hey, ça commence avec rien. Mettez un allié là-dedans. La deuxième itération arrive, dit qu'il y a un L. J'en ai mis un autre là-dedans. troisième génération arrive, il y a des alliés là dedans. Mets un autre là-dedans. Alors allons de l'avant et demandez à l'utilisateur. Pour un certain nombre de notre engourdissement est égal à Jetons ceci comme une invite de nombre. Donne-moi un numéro et on va dire que le numéro de départ qui commence engourdi sera nul. Et alors que le départ engourdi est inférieur au nombre, allons-y et commençons réellement celui-ci pour qu'on puisse compter comme des humains, pas comme des ordinateurs. Donc le numéro de départ va être un. Et tant que ce nombre est inférieur ou égal à ce que la personne vous donne est cela continuera à fonctionner. Rappelez-vous, cela doit être implémenté manuellement. Donc, incrémentons manuellement cela. Et à ce stade, rien ne va se passer. Nous venons de charger cette variable appelée HTML avec un tas de HTML. Maintenant, nous devons aller de l'avant dans rul et effectivement l'ajouter dans notre modèle d'objet de document. Alors allons-y. Tapez que ul interne HTML est égal à n'importe quelle variable HTML. Rafraîchir. Donne-moi un numéro. Ok, faisons 42 et encore, il n'en a que 42 encore et encore. Allons de l'avant et nous allons taper l'itération dans l'oration va être quel que soit le numéro de départ . Essayons encore ça. Le numéro 42, c'est là. C' est l'oration. 123456789 jusqu'au 42. Et donc, alors que Loop a réellement sa place dans le monde JavaScript, c'est juste un peu moins populaire de nos jours. Mais il est encore très bon à savoir. Tu n'as rien à faire dans cette vidéo. Passons à la suivante où nous avons eu, nous allons travailler avec certains des modèles d' objets de document et nous allons utiliser cette chose appelée une boucle de quatre h, qui est vraiment, vraiment utile. 43. Pour chaque boules: Bon, regardons probablement la version la plus utile d'une boucle dans l'univers JavaScript . C' est ce qu'on appelle une boucle quatre chaque. Et parce que nous avons tendance à cameler les choses en javascript, il ressemble à ceci pour chaque minuscule F majuscule E. Nous allons entrer dans la syntaxe de nous en juste une seconde. Donc, pour chaque boucle sont relativement nouveaux à JavaScript. D' autres langues ont eu ces Fort Ages. JavaScript n'a obtenu cela que récemment au cours des dernières années, et cela a été une amélioration majeure de l'écosystème JavaScript. Donc, pour les âges, fondamentalement un raccourci pour la boucle quatre qui ressemble quelque chose le long de ces lignes. Donc, vous aviez variable est égale à zéro. Faites quelque chose pour la longueur d'un tableau et incrémente automatiquement. Ce que cela va faire à la place est juste de dire, Hey, vous avez une liste de noms, vous avez un tableau de noms. Il y en a cinq là-dedans. Je vais parcourir chacun d'eux pour toi. Alors donnons à ceci un exemple ici. Les noms profonds sont égaux à un tableau de Caleb. Nathan est jamais et Henry a presque écrit la fin du mot et donc auparavant, comment nous aurions à regarder à travers. Ceux-ci sont en quelque sorte en fait grandir, donc nous devrions faire pour var. Je suis égal à zéro. Je suis inférieur ou égal à savoir. Juste les noms de la nuit dernière longueur point I plus. Et puis nous pourrions consoler les noms de journaux de doute que je et cela nous donnera tous. Allons de l'avant et rafraîchissons votre page et nous verrons que cela fonctionne. Mais quand tu écris ça, ça a l'air un peu trop. Il y a un moyen plus simple de le faire. Le moyen le plus simple de le faire est de passer par quatre boucles de chaque. Allons de l'avant et tapez les noms point pour chacun et cela va prendre une fonction, et cette fonction a deux paramètres en elle comme le nom et l'index. Et donc le nom sera quelle que soit la valeur ici, donc il pourrait ne pas être appelé nom. Vous pouvez les renommer si vous voulez, mais parce que ce sont des noms, je vais appeler ces noms, et ce sera l'itération de la boucle, donc le conseil ne consigne pas quel que soit l'index quel que soit le nom, et cela semble déjà beaucoup plus facile Allons de l'avant et actualisons cette page. Nous avons l'effort de Caleb Nathan et Henry comme ça. Agréable et facile comme ça devrait être. Pas plus de traiter avec nos propres générateurs et notre entier d'aérateur it encore et encore et encore. On n'a pas besoin d'incrémenter ça. On n'a même pas à s'en soucier. Il va juste dire, Hey, il y a quatre articles ici. Passons à travers cela quatre fois Maintenant, il est toujours important de connaître les deux parce que c'est l'ancienne façon de le faire. Vous allez voir cela partout pour une compatibilité descendante allant de l'avant en JavaScript. A partir de là, vous allez voir beaucoup de pour chaque boucle. Maintenant, où cela devient-il réellement utile ? Et si nous voulions obtenir tout le texte intérieur de chaque allié, donc même allié ici , donc je point Js texte et je ne sais pas, point un. Il suffit de le faire encore et encore et encore. Ok, donc je viens de faire 17 éléments de liste, tous avec la même classe, et je veux sélectionner tous ces éléments en boucle à travers eux et obtenir le texte ici. Comment je vais faire ça ? Allons de l'avant, commençons cela et utilisons un sélecteur de requête tout Donc, faisons de nos alliés est égal à documents dot sélecteur cree tous et nous voulons sélectionner tous les éléments de texte Js ou plutôt, tous les éléments de la liste avec une classe de Js textes. Maintenant, passons à travers ces. Nous avons des alliés point pour chacun prend une fonction. Ça va être tout ce qu'il y a ici. Donc ça va être notre note particulière et ensuite ça va nous donner notre indice. Maintenant. Que se passe-t-il si nous avons juste un journal de points consul ? Ok, pas tout à fait. Texte interne du nœud de dialogue Consul. Allez-y et rafraîchissez votre page et assez sûr, tout apparaît dans son JavaScript. Donc, nous avons réussi à parcourir 17 éléments de liste et obtenir le texte de chacun dans 1234 lignes de code et cela nous permet également d'activer le sélecteur de requête tout Nous n'avons pas vraiment été en mesure de nous utiliser trop parce que jusqu'à ce point, bien que nous connaissions des listes ou une augmentation, nous ne savions pas vraiment comment les parcourir maintenant, nous le pouvons. Vous pouvez également utiliser la vieille boucle de l'école si vous vouliez le faire de cette façon. Mais c'est tellement plus propre maintenant, juste pour le plaisir. Z Allons de l'avant et en fait changer l'inter texte de cette note. Donc, allons noeud point inter texte. Et juste pour rendre cela ultra clair, où nous avons eu noeud était, si je fais ce type dans les alliés, cela me donne une liste de notes ici, et chacun d'entre eux est comme une requête, sélecteur, sélecteur de requête régulière. Et donc nous venons de renommer le sélecteur de requête régulier pour avoir essentiellement un nom de variable, qui est appelé Note. Et là, nous avons accès à toutes ces choses différentes, et nous avons juste dit, Hey, prenez cette note et puis obtenez le texte intérieur. Allons de l'avant et change inter texte à quelque chose de différent. Cet inter Tex va être multiplié par 12. Peu importe ce que ça va être. Et essayons ça. Ajoutons quelques crochets autour de là et le chat Nate une chaîne et voyons si cela va fonctionner comme nous avions l'intention de travailler. Donc, cela devrait dire qu'un nombre est le nombre, et bien sûr, il est là. Zéro multiplié par 12 01 fois 12 est 12. 16 fois 12 est 1 92 C'est maintenant fondamentalement à nouveau, avec seulement quatre lignes de code. Vous pouvez ignorer le commentaire qui n'est plus nécessaire. Avec quatre lignes de code, nous avons pu parcourir chaque élément ici et le changer pour être ce que nous voulions qu'il soit . Maintenant, allons-y et faisons encore une chose. Disons qu'on veut réduire cette liste. Ça va être marrant. Disons que nous voulons réduire cette liste à seulement 10 articles les 10 premiers articles. Donc, ce que nous allons dire ici, c'est si l'indice est égal à 10 ? Non. Ça va être exactement 10. Si elle est supérieure ou égale à 10, allons-y et supprimez cette note. Supprimons simplement du modèle d'objet de document entièrement. Et puis continuons aussi. Et donc cela ne va jamais courir que sur la 10e itération ou plus, et cela ne va jamais courir. En supposant que continuer n' est jamais exécuté, va s'exécuter à partir de zéro dans le nombre 10. Mais nous ne sommes pas forcément en boucle ici. Ceci est une fonction qui est exécutée à partir de chaque élément particulier dans une liste ou dans un tableau . Comment allons-nous continuer ? Nous ne pouvons pas continuer car continuer est un mot clé qui est réservé aux boucles. Exclusivement, nous sommes à l'intérieur d'une fonction. Donc, ce que nous pouvons faire, c'est retourner faux. Et je voudrais que vous expérimentiez aussi avec retourner vrai et juste revenir en général. Mais allons-y et revenons faux. Et quand un rafraîchissement de la page, nous pouvons voir ici. 0123456789 Nous avons 10 articles là-dedans au total, et il s'est débarrassé de tous les autres. Allons de l'avant et commençons en fait cela afin que nous puissions voir ces index correctement. L' article 1 à 10 est disponible. Nous nous sommes débarrassés de 11 à 17 donc c'est quatre. Chaque boucle. En un mot. C' est vraiment vraiment sympa, parce que maintenant nous pouvons vraiment très, très facilement saisir plusieurs éléments de notre page et faire quelque chose avec eux . Quoi que ce soit, c'est à vous de choisir. Mais maintenant, vous savez comment travailler avec quatre boucles, boucles sauvages et pour chaque boucle, j'apprécierais vraiment si vous pouviez prendre quelques minutes et juste juste recréé l'exemple que j'ai créé dans cette vidéo. Juste pour que vous ayez un peu d'expérience avec le point pour chaque notation avec une fonction de rappel ici, ceux-ci allaient être incroyablement utiles. Aller de l'avant vous permet d'exécuter fondamentalement un morceau de code encore et encore et encore sans avoir à copier et coller encore et encore et encore et encore. Alors allez-y, donnez-lui un coup de feu. Et quand vous êtes prêt dans votre sentiment de confiance, passons à la prochaine vidéo. 44. Projet de jeu de JavaScript: D' accord. Nous venons d'apprendre sur les objets et les boucles. Ce sont deux éléments fondamentaux de programmation orientée objet tels que javascript. Maintenant, ce que j'aimerais que vous fassiez pour un autre projet qui entend des projets plus importants, en fait, pas plus grands. Il faudra juste un peu plus d'efforts pour vous emballer l'esprit. C' est que je veux que tu crées un jeu de devinettes. Maintenant, quoi que tu fasses, c'est totalement à toi de décider. Vous pouvez faire des os très nus, ou vous pouvez le rendre vraiment, vraiment beau et utiliser le modèle d'objet de document. Vous pouvez le rendre aussi simple ou complexe que vous le souhaitez. L' idée derrière ce jeu de devinettes est que vous devriez demander à quelqu'un. Il s'agit peut-être d'une invite ou d'une zone de saisie ou d'un champ de texte. Dis, hé, entrez un numéro. Et si ce nombre est le bon nombre, alors sortez de la boucle. Sinon, je veux que vous continuiez à le traverser. Non, ça a l'air un peu compliqué, mais ce que je veux que vous fassiez essentiellement en un. Créez une boucle qui demande toujours un nombre, puis deux. Si le nombre est incorrect, demandez à nouveau et soyez juste vraiment ennuyeux à ce sujet. Et puis si le nombre est correct. Sortez de la boucle. Donc je vais vous laisser le soin de vous. Je ne vais pas vous donner d'autres indices. Je veux que tu essaies de trouver comment faire ça par tes propres moyens. En fait, menti. Je vais vous donner un indice. Rappelez-vous que les boucles continueront toujours aussi longtemps qu'une déclaration particulière est vraie. Donc, si la logique de boucle est toujours vraie, elle continuera à fonctionner. Si ce n'est pas vrai, il ne continuera pas à fonctionner. Il sortira de la boucle. Allez-y et donnez-nous une chance. Si vous êtes vraiment, vraiment coincé, vous pouvez juste regarder le reste de cette vidéo et je vais vous montrer la façon dont je le fais posit vidéo ici. Je vais fondre cette vidéo et me faner à nouveau et je te verrai. Espérons que dans quelques minutes. D' accord. Je veux créer une boucle qui va demander un numéro. Donc la première chose est que je dois demander un numéro. Jusqu' à présent, num est égal à prompt. Quel est le numéro ? Et je vais faire ce os très nu donc j'utilise prompt. Mais vous voudrez peut-être utiliser quelque chose de différent et ensuite je vais lancer ce que cette entrée est comme un nombre réel. Et puis je veux dire que si c'est un numéro, je pourrais faire quelque chose ici. Ensuite, je peux aussi dire si le nombre est égal au nombre magique, faites quelque chose ici. Donc maintenant, nous avons besoin d'un numéro magique dans votre, le nombre magique va être 42. Et donc ce que nous disons est de demander à l'utilisateur un numéro s'il correspond à 42 que nous pourrions également code dur ici si nous voulions quelque chose comme ça. Alors tu gagnes. Donc, vous avez gagné et nous allons de l'avant et faisons ce journal de console. Tu gagnes. Allons de l'avant et rafraîchissons. Ça va me demander un numéro. Si je ne mets rien 41. Si je mets 42 bûches, ça dit que je gagne. C' est fantastique, mais ce n'est pas tout à fait ce que je voulais faire. J' ai dit, si les chiffres sont incorrects, demandez à nouveau. Ok, eh bien, si le numéro est incorrect, vous pouvez le faire ici et on me demande encore une fois. Mais cela ne va courir qu'une seule fois. Et à ce stade, je n'ai pas besoin de copier et coller tout ça ici comme ça. Et si c'est faux encore, je dois copier et coller le tout ici et nous pouvons voir comment ça devient assez grossier assez rapidement. Allez-y, collez le tout ici encore, encore et encore et encore et encore et encore. Combien de fois allez-vous faire ça ? Aucun. Je ne veux pas que tu fasses ça plusieurs fois. C' est là que les boucles entrent en jeu. Donc on ne va pas faire une autre déclaration ici. Ce qu'on va faire, c'est faire une boucle. Alors que vrai, parce que nous savons que les boucles s'exécutent toujours quand elles sont vraies. On va demander le numéro à chaque fois. Mettons ça dans notre boucle. Donc, pour chaque génération va vous demander quel est le nombre. Si ce nombre est un nombre valide et que ce nombre est égal au nombre magique, il dira que vous gagnez. Donc c'est alerte, tu gagnes. Sinon, cela ne va pas correspondre. Donc ne rien faire si ce n'est même pas un nombre. Il va demander à nouveau un bon nombre, mais nous avons un petit problème ici. Cela va juste continuer à demander encore et encore et encore. Et donc ce que je vais faire, c'est que je vais sortir de cette boucle comme ça. Donc, même s'il y a, si des déclarations ici, les boucles savent toujours que c'est dans une boucle et nous pouvons fondamentalement toujours utiliser break, continuons et donnons ceci un coup de feu. Rafraîchir. Quel est le numéro 12 ? Non. 32. Non, un numéro de fou. Non. 42. Ah ha ! Je gagne et c'est un jeu de devinettes. Maintenant, il y a un moyen de nettoyer tout ça. Nous pouvons utiliser des instructions if supplémentaires, donc nous pouvons dire si le nombre est en fait un nombre, et cela doit être vrai aussi. Donc, si c'est un nombre et que le nombre est égal au nombre magique, il va alerter que nous avons un break out une boucle et nous avons terminé. Donc, dans environ huit ou neuf lignes de code, nous avons réussi à faire un jeu de devinettes très nues, et si jamais vous vouliez changer ce nombre, vous pourriez changer ce nombre aussi. Allons nous changer 109. Je ne sais pas si ça a un sens significatif dans ma vie. Je verrais 108. Non, c'est faux. 110. Non, c'est faux. 109 l'ont envoyé par la poste. Et quand vous gagnez, peut-être que vous changez le style d'arrière-plan de votre page entière. Changer la couleur de fond en bleu, ajouter du texte dans leur dire que vous avez gagné, qui, en fait, si nous voulions rendre ça un peu plus chic, nous pourrions totalement. Donc, nous avons notre corps est égal à des documents. sélecteur de requête néerlandais a saisi le corps. Nous ne voulons pas mettre cela dans la boucle parce que nous n'avons besoin qu'une seule fois de vraiment l'attraper. Il n'a pas besoin d'être dans une boucle, et alors nous pourrions faire Body dot Style que la couleur de fond est égale au bleu. Faisons le point de style de point de corps La couleur est égale au blanc et le point de corps inter HD miles égal à Hun . Vous gagnez et vous sortez de la boucle. Essayons encore ça. Quel est le numéro 12 ? Non. 32. Non. 109 Je gagne. Et à partir d'ici, je sais que vous pouvez vraiment faire venir ces fans ici et les fans ici maintenant pour comprendre ce qui se passe ici. Je viens de dire, Exécutez cette boucle blanche pour toujours. Jusqu' à ce qu'on dise le contraire, est-ce qu'on en sort délibérément ? Nous n'utilisons pas de chiffres particuliers ou quoi que ce soit du genre. Nous utilisons juste une boucle qui va s'exécuter pour toujours jusqu'à ce qu'on dise le contraire. Et c'est ainsi que nous créons un simple jeu de devinettes. Si vous avez des questions, des commentaires ou des préoccupations au sujet de ce projet particulier, allez-y. Laisse-les en bas. Et n'oubliez pas que vous pouvez mettre à jour votre projet de partage de compétences avec le dernier code que vous possédez . Faites une capture d'écran ou partagez une vidéo ou partagez votre manteau sur le stylo de code. Partager votre projet est un excellent moyen de montrer que vous faites des progrès vers le reste de la classe. 45. Laissez et const: Ces dernières années, JavaScript a fait beaucoup de progrès en tant que langage de programmation réel. Cela a commencé comme juste un langage de script. Ainsi le script de nom. Mais il a vraiment évolué dans sa propre langue au cours des 5 à 10 dernières années environ. Et avec cela vient quelques changements assez cool. Mais certaines choses qui sont un peu différentes des autres langages de programmation aussi. Et celui dont je veux parler dans cette vidéo est let and const let and constant donc jusqu' à maintenant, nous avons été en train de définir chaque variable avec var. Le nom Var est égal à Caleb. Nous pourrions également utiliser let name est égal à Caleb et nous pourrions également utiliser le nom constant est égal à Caleb. Nous pourrions utiliser n'importe lequel de ces trois maintenant il y a des différences ici. Nous connaissons le var et le levage. Si vous ne vous souvenez pas de ce qu'est le levage, revenez à cette vidéo de levage et prenez juste un peu de temps pour vous assurer que vous êtes familier avec ce que le levage est. Nous savons à nouveau à propos de la portée. Il y a une vidéo sur la portée. Tu vas vouloir regarder celle-là encore. Assurez-vous que vous êtes un peu familier avec l'idée de portée car laisser et constante R Block portée. Et donc ce que cela signifie est le nom var est égal à Caleb est accessible dans une fonction comme cette fonction. Récupère le nom du journal des points du conseil. Je pourrais même le faire. Je pourrais faire le nom est égal au nouveau nom, et puis je pourrais consigner le nouveau nom ici. Donc le nom du journal de la console à nouveau et continuons, commentez-les. Et puis exécutons cette fonction ici. Et ainsi dit Caleb et son nouveau nom. Et donc la bonne chose à propos de loin est que c'est maintenant dans la portée globale et une fonction peut l'utiliser. Nous pouvons même écraser quelle que soit la valeur dès que nous appelons la fonction. Et puis le nom change en fait avec let et constamment. Ne comprends pas ça. En fait, nous obtenons plus de restrictions. Maintenant. La chose intéressante à propos des bons langages de programmation, vous voulez des restrictions. Cela ne semble pas comme ça au début, mais en fait vous le faites parce que moins vous avez de liberté dans un langage de programmation signifie généralement que plus le langage s'exécutera rapidement. moyens vont prendre moins de mémoire dans votre ordinateur signifie que plus de gens vont écrire code qui ressemble exactement de la même manière signifie de meilleures normes. Fondamentalement, c'est moins un gâchis s'il y a plus de règles là-dedans et ce que laisser et constante faire est d' introduire plus de règles. Alors allons de l'avant et créons l'exemple ici. Nous avons donc une variable, et le cours est égal à JavaScript pour les débutants. Et ce que nous pouvons dire ici est si le cours est égal à JavaScript pour les débutants, consul dot lug ce cours. Je veux juste m'assurer que ça marche. Alors allons de l'avant et rafraîchissons notre page. Bien sûr, il est dit ce cours maintenant. Si je voulais définir une autre variable, je ferais loin Quelque chose est égal à autre chose. Et puis je pourrais dire, Consul, ne consigne pas quelque chose. Alors regarde ça. Cela fonctionnera toujours quelque chose. Ce que fait, c'est qu'il dit Hey , vous avez une variable, mais je vais l'étendre à ces crochets bouclés, et donc quand vous essayez de consigner quelque chose en dehors de ces crochets bouclés, cela ne fonctionnera pas. Faisons un coup de feu et voyons de quoi il se plaint. Il y a une erreur dans l'air de référence. Quelque chose n'est pas défini J'aime comment il a utilisé quelque chose comme si elle faisait réellement partie de l'air . Allons de l'avant et changeons ça aussi. Un nouveau var. Voilà, un nouveau virus, pas défini. Cela semble un peu plus verbeux, bien que nous puissions voir qu'une nouvelle barre est réellement définie. Mais ce que cela veut dire, c'est que cette variable ne peut être utilisée qu'entre ces parenthèses. C' est des accolades bouclées. Et alors quoi ? Laissez-nous nous permet d'utiliser cette variable Onley à l'intérieur d'ici, donc elle est portée à ces crochets bouclés. Mais nous pouvons aussi nous pouvons aussi le surpasser. Donc, nous allons vous écraser les variables que l'air portée à votre ensemble de parenthèses bouclés le plus proche . Et donc si je déplace ça ici, on verra que le journal de la console crachera autre chose. Bien sûr, ça dit autre chose. Et si j'essaie de console, connectez-vous à nouveau une seconde fois, nous allons obtenir à la fois un journal et une erreur, donc nous obtenons un journal et une erreur. Donc, la principale différence entre Var et laisser est portée à nouveau ces accolades bouclés. Il est important de savoir que parce que vous allez voir du code là-bas qui dit, Laissez quel que soit le nom de la variable, est égal à quelque chose, et alors vous ne serez pas en mesure d'y accéder en dehors de ses accolades parents. Mais allons-y et jetons un coup d'oeil à Const. Donc vous entendez ce CONST. C' est un peu la même chose. Const. Est une variable qui est étendue à ses accolades les plus proches, appelée Scoping de bloc. Mais Const est synonyme de constante. C' est une variable qui ne peut pas changer, ce qui est une façon drôle de dire fondamentalement que c'est une valeur, et cette valeur ne changera jamais, jamais, jamais, jamais, jamais, jamais, jamais, jamais,jamais. Et donc ce n'est plus vraiment une variable plus qu'un point de données constant qui ne changera jamais et donc, avec constante, n' ont pas été autorisés à le remplacer. Donc, si nous nous débarrassons de cela, cela fonctionnera parfaitement. Le financement dit quelque chose. Si nous essayons d'écraser cela parce qu'il a déjà été défini ici. Si nous essayons de le redéfinir, ça va nous jeter une erreur. Regardez ces affectations non valides à Const. Un nouveau virus. Vous n'êtes pas autorisé à réaffecter quoi que ce soit à un concert, donc il y a effectivement un avantage à cela lors de l'utilisation d'une variable régulière , par exemple , bien sûr, il est livré avec un tas de méthodes essentiellement sur la chaîne objet. Il est livré avec un tas de choses différentes ici. Nous pouvons voir une tonne d'entre eux dans votre aussi, et certains d'entre eux nous permettent de changer réellement la valeur. Bien sûr, alors que Const ne nous permet pas de le faire, Const ne vient pas avec toutes les fonctionnalités qu'une variable régulière vient avec parce qu'elle ne peut pas changer. Alors, quel est le point de lui assigner une méthode ou une fonction si nous ne pouvons pas changer cette valeur du tout ? Donc, il y a en fait un assez gros gain de performance, et parce qu'il est à portée de bloc, vous n'avez pas à vous inquiéter de cette fuite hors de cela. Si l'instruction de votre fonction javascript, votre programme JavaScript n'a pas à se soucier de stocker beaucoup de cela en mémoire pendant trop longtemps, et c'est donc juste un moyen vraiment rapide d'utiliser des variables. Maintenant, si tout ça semble un peu trop fou pour toi, tu peux y penser comme ça. Var est fondamentalement une variable qui peut être portée à l'environnement global. Laissez bloquer la portée aux parenthèses bouclées les plus proches. En fait, faisons ceci laissez et const notre bloc étendu aux parenthèses bouclées les plus proches. On peut changer. La constante ne peut pas être modifiée. Et c'est la principale différence. Et vous allez les voir partout dans le JavaScript moderne. Nous avons donc utilisé VAR jusqu'à présent. Mais en avançant, nous allons probablement utiliser le feu. Laissez et const vous savez ce que je voudrais que vous fassiez car, Ah, petite tâche rapide ici est de créer une variable let à l'intérieur d'une instruction if ou d'une boucle for ou quelque chose, puis essayez d'y accéder en dehors de votre si , puis à droite, une constante de variable const. Et puis essayez juste de changer la valeur de cette variable const et cela vous lancera une erreur . Une fois que vous avez connu ces erreurs et comment elles fonctionnent réellement, cela commence à avoir beaucoup plus de sens et nous allons les utiliser à l'avenir. Vous obtiendrez beaucoup plus d'expérience avec ces derniers au fur et à mesure que nous progresserons dans le reste de ce cours 46. Introduction à OOP: Okay, maintenant nous entrons dans certains des trucs amusants. C' est de la programmation réelle. Cela a moins à voir avec le modèle d'objet de document. Plus qu'a à voir avec les fondamentaux de programmation réels avec une chose appelée un langage de programmation orienté objet dans 00 P. Maintenant, alors que cela semble un peu complexe et au début va sembler un peu complexe, vraiment, tout ce que c'est un moyen pour vous de regrouper vos variables et fonctions afin de garder votre code bien organisé et de réduire les doubles emplois. Alors rappelez-vous quand nous avons créé un objet de personne dans la vidéo d'objet ? Nous avons créé quelque chose comme ce nom suite à Kaye Love et l'âge est égal à 30 Yadi Yadi Yadi sur quelque chose comme ça. C' est ce qu'on a fini par créer. Ceci est fondamentalement une programmation orientée objet parce que nous avons un objet ici, et ensuite nous avons la propriété point objet dans ce retour. Caleb personne dot âge est égal à 30. Il y a en fait une façon plus agréable d'écrire ceci en JavaScript plus moderne, et c'est à travers cette idée d'une classe. Et la bonne chose à propos d'une classe est fondamentalement vous pouvez prendre votre objet de personne entière et vous pouvez le copier et le coller encore et encore. Vous pouvez lui donner des valeurs par défaut afin qu'il crée fondamentalement cet objet pour vous avec une seule ligne de code. Vous avez juste à écrire cette fonctionnalité d'abord. Alors jetons un coup d'oeil à ça. Nous avons classe, personne, et c'est essentiellement à quoi ressemble votre syntaxe. Il est juste classe de mot clé. Quel que soit le nom de votre classe, en général, ça commence par un P. majuscule , mais c' est à vous de décider. Et puis ici, nous avons des fonctions et des variables appelées méthodes et propriétés. Donc nous avons une fonction ici appelée Faire son, et tout cela va faire, c'est le conseil. Ne me connecte pas. Oh, maintenant deux dans Stan, elle a mangé ou pour démarrer une classe comme celle-ci parce que ce code peut avoir été exécuté en arrière-plan mais n'est en fait stocké nulle part. Maintenant, c'est une sorte de ce que cela ressemblerait si nous écrivions une fonction régulière ici. Allons-y et débarrassons-nous de ça. Nous n'en avons pas besoin parce que javascript est assez intelligent pour le savoir. Hey, ce n'est pas une variable. C' est une fonction. Et maintenant à Stan. Elle a mangé ça pour commencer ce cours. Nous allons en fait stocker cela dans une sorte de variable pour que nous puissions faire Const. Caleb est égal à une nouvelle personne. Donc c'est notre syntaxe ici. On a la classe des mots clés. Quel que soit le nom de classe qui correspond ici l'ouverture et la fermeture des accolades. Et puis nous avons juste une fonction simple ici. C' est une fonction à l'intérieur d'un objet que les classes sont des objets. Et donc nous appelons cela une méthode. Et alors on a dit, Hey, utilisez const. Kayla parce que cela ne va pas changer les choses à l'intérieur pourrait changer. Mais cela lui-même ne va pas changer et puis faire le point Caleb faire son avec des parenthèses là-dedans parce que c'est une fonction, c'est une méthode. Allons de l'avant page de rafraîchissement, et nous pouvons voir que ça me dit. Oh, maintenant pourquoi est-ce si génial ? Eh bien, parce que maintenant je peux faire une autre personne. Je peux l'appeler Nathan, et on peut faire le même bruit. Et tout ce que j'ai fait, c'était juste. Une ligne de code supplémentaire et il a tout pris ici et l'a appliqué à cette ligne de code supplémentaire a commencé dans une variable dans un ancien Nathan constant. Et maintenant, nous allons tous les deux faire le son de Miao, donc cela apparaîtra deux fois. Miami. Tu vois ça à leur qui veut dire qu'il est apparu deux fois. Allez-y et annulez ça. Maintenant, allons de l'avant et ajoutons quelques valeurs par défaut. Donc, disons qu'une personne a besoin d'une personne a besoin d'un nom et d'un âge et de leur nourriture préférée. Donc, contrairement à une fonction où ce serait comme le nom, l'âge et la nourriture, nous le faisons en quelque sorte. Mais nous devons faire le long chemin pour cela. Nous créons donc une nouvelle fonction, une nouvelle méthode ici appelée Construct. C' est un nom de fonction magique. Vous pouvez voir qu'il est rose. C' est un mot réservé qui est un mot clé. Et puis nous pouvons transmettre ces valeurs ici pour pouvoir dire : Quel est le nom de la personne ? Quel est l'âge de la personne ? Quelle est la nourriture préférée de la personne ? C' est une fonction qu'il ne dit tout simplement pas fonction devant elle. Mais c'est une fonction. Et puis nous pourrions dire, Consul, ce nom de journal, vieillir la nourriture et aller de l'avant et jeter les valeurs par défaut ici. Donc mon nom sera Caleb. Mon âge va avoir 30 ans et ma nourriture préférée sera Zahk. Rafraîchir dit Caleb. La trentaine est si maintenant. En fait, nous avons mis des valeurs dans notre nouvelle classe. On pourrait aller de l'avant et en créer un nouveau. Débarrassez-vous de faire son. On n'a pas besoin de cette nouvelle personne. Celui-ci sera Nathan et il aura 28 ans. Sa nourriture préférée sera une salade . Et on va voir Caleb, 30 Pizza Nathan, 28 salade. Et nous pourrions le faire encore et encore et encore. Et chaque fois que nous ajoutons plus de code ici, cela va affecter les deux également, ce qui est vraiment sympa. Et maintenant, nous écrivons un seul morceau de code qui peut affecter plusieurs sections d'un site Web ou plusieurs éléments de fonctionnalité. Maintenant, si je voulais que ça dise que Caleb dit mm à, et peu importe la nourriture, malheureusement, malheureusement parce que c'est un objet, on ne peut pas juste dire de la nourriture, et on ne peut pas juste dire nom. Cela ne va tout simplement pas marcher. Alors allons de l'avant faire Caleb dot faire du son Yammer son. C' est en fait réparer cette syntaxe là. Sauvegarder cela et rafraîchir et la nourriture n'est pas définie. Bien que la nourriture soit là, nous l'avons donnée ici. On l'a même passé ici et ici. Mais pour une raison quelconque sont coda dire que la nourriture n'est pas définie. Et c'est là encore que cette idée de ce mot clé entre en jeu. Donc, dans notre méthode de construction magique ici, nous pourrions le faire. Nom du point est égal au nom de cet âge de point est égal à Nous pourrions le jeter si nous voulions Age ce point Food est égal à la nourriture et nous pourrions nous débarrasser de cela. Et ce que ça veut dire, c'est, Hey, il y a une propriété dans cette classe de personnes appelée nom. Il y en a un autre qui s'appelle l'âge, et il y en a un autre qui s'appelle la nourriture. Et donc quand nous transmettrons nos paramètres dans cette classe de personne Caleb, 30 pizza, ça va dire Ok, eh bien , oui , bien sûr, je comprends que tout cela est transmis à la première fonction, mais aussi rendre disponible à travers toute la classe. Donc maintenant je pourrais changer ça à ce nom de point dit nourriture pour lui dire à cette nourriture point, plutôt. Et mettons cela sur plusieurs lignes parce que nous le pouvons. Et maintenant cela va dire, Caleb dit MM à la pizza. Et encore tout ce que je fais ici en disant, Const. Caleb est égal à une nouvelle classe de personnes. Le nom est Caleb. La nourriture préférée de 30 ans est la pizza, et encore une fois, qui correspond juste ici comme une fonction régulière. Il se trouve que celui-ci doit être appelé construction. Allons de l'avant et rafraîchissons ceci et dit, Caleb dit à la pizza Et encore une fois, la clé ici est vraiment le mot clé ce. Allons de l'avant et rafraîchissons ceci et dit, Caleb dit à la pizza Et encore une fois, C' est ce qui vous permet de transporter cette variable vers n'importe quelle autre fonction à l'intérieur de la classe person. Mais si cela aide, je trouve que cela m'a vraiment aidé quand j'apprenais à l'origine de cette façon dans l'époque. On dirait que ce nom est égal à n'importe quel nom. Cet âge est égal à quel que soit l'âge, et cet aliment à pois est égal à tout ce que la nourriture va être. Et tout cela veut dire, Hey, Hey, il y a une variable en dehors de cette portée de fonction appelée ce nom de point et juste l'assigner à quoi que ce soit. Il y en a un autre qui s'appelle l'âge des points. Affectez-le à ce que nous voulions être juge et à ce point food. Et donc, pensez-y comme ça. Nous prenons juste une variable d'une portée plus élevée et en changeons la valeur sur Lee. On n'a pas besoin d'écrire ça. Et si nous le voulions, nous pourrions aussi venir ici. Et on pourrait dire, Nathan point faire du son, faire des chiffres sonnent rafraîchir la page. Cela dira, dit Caleb, emménager dans la pizza. Le suivant va aussi dire, Nathan dit bientôt à Salad, juste comme ça maintenant, juste comme ça maintenant, cela peut ne pas sembler super utile à ce stade, mais à mesure que votre logique grandit, il est logique de regrouper les choses qui sont ensemble. Donc, au lieu d'avoir un tableau, un objet et un tas de fonctions pour une seule personne en particulier, puis de copier et de coller encore et encore pour une deuxième et la troisième et quatrième personne, nous pourrions envelopper tout cela ensemble parce que tout est lié à une classe et puis dites simplement hey, utilisez une nouvelle personne. Nous pouvons même étendre cela sur la route si nous le voulions, pour faire des choses supplémentaires, afin que nous puissions dire que c'est la base. Mais si nous voulions dire que si une personne fait partie de l'armée, elle a des fonctions supplémentaires ou des fonctionnalités supplémentaires. On ne va pas entrer dans ça dans cette vidéo. Cela résume fondamentalement toute la leçon de classe. Mais ce que j'aimerais que vous fassiez, c'est que vous donniez un coup de feu. Créer une classe, créer une fonction de construction magique er. Nous pouvons prendre tous les paramètres que vous voulez. Vous allez certainement vouloir utiliser le mot-clé ce, puis créer une fonction. Une autre fonction n'a pas d'importance ce qu'elle est appelée et essayez d'y accéder. Par exemple, cette nourriture point. Même si nous n'avons pas transmis la nourriture ici, nous avons pu l'obtenir en disant cette nourriture point parce que cela fait référence à toute la classe elle-même. Enfin, au lieu de cela, elle a mangé votre classe en disant, Const, votre nom est égal à une nouvelle personne ou à tout ce que votre classe va être, puis exécutez la méthode là, que la mine de fonction a été appelée Make sound. Vous pouvez exécuter le vôtre avec votre nom point de votre nom de fonction, puis des parenthèses. C' est aussi l'une de ces idées qui est un gros obstacle pour les programmeurs à surmonter. Mais une fois que vous apprenez sur la programmation orientée objet et que cela commence à avoir beaucoup plus de sens pour vous, la vie devient beaucoup plus facile en tant que développeur et vous sautez de ce statut débutant ou junior à un statut intermédiaire. Parce que vous commencez à comprendre comment les données se rapportent à elles-mêmes pour deux autres fonctions ou comment regrouper les choses, et tout commence juste à se réunir. Alors, donne-nous une chance. Et, hé, si vous avez des questions, n'oubliez pas qu'il y a une section commune vers le bas. Sois bas. Je suis heureux de vous aider à tout moment. S' il vous plaît poser des questions si vous avez besoin d'aide. 47. Extended les cours: d' accord. Dans cette dernière leçon, nous avons parlé d'une introduction à la programmation orientée objet, et nous avons parlé de choses comme les propriétés, les méthodes , la construction magique, er et le mot-clé this dans cette leçon, nous allons passer en revue un peu plus de cela. Honnêtement, si vous êtes tout nouveau en JavaScript, cela va être très théorique pour vous en ce moment. Ce sera beaucoup plus applicable pour vous comme votre carrière en tant que développeur JavaScript sur la route . Mais à partir d'aujourd'hui, si vous êtes tout nouveau en JavaScript, honnêtement, n'hésitez pas à regarder cette vidéo. Tu n'as rien à faire avec ça. C' est juste bon de connaître le concept derrière lui, sorte que lorsque vous êtes initié à cela en bas de la route, ne sera pas super effrayant ou quoi que ce soit comme ça. Vous serez suffisamment équipé pour gérer les cours, et dans cette leçon, nous allons créer une classe, puis nous allons l'étendre. Et un très bon exemple de cela est juste quelque chose de super basique. Disons que nous avons une classe d'animal, et qu'est-ce que chaque animal a en commun ? Donc, nous avons une classe er construction ou construire votre méthode ici. Et c'est là que nous mettons toutes nos valeurs par défaut ou nos paramètres par défaut. Disons que chaque animal a un nom ou plutôt pas un nom, mais une espèce. Il a aussi un poids et oui, puis juste une taille. Donc nous allons juste faire ces trois ici, et ensuite nous allons juste dire que cela fait que Species est égal aux espèces, qui semble vraiment bizarre que nous écrivions ceci comme ça, mais cela nous permet d'utiliser ces variables sur l'ensemble classe d'animaux. Attendez. Nous pourrions aussi lancer cela comme un nombre si nous le voulions. Nous le voulions. On pourrait lancer ça comme une corde. Donc c'est toujours une ficelle. Et puis on pourrait dire que cette hauteur de point est égale à la fonte. C' est une hauteur de nombre. Et puis nous pourrions créer une belle petite méthode. Et ici vient d'appeler, je ne sais pas, obtenir des infos. Alors obtenez des informations sur cet animal particulier. Il n'a pas de paramètres parce que par magie il va juste obtenir l'espèce de point. Ce n'est pas Attendez. Ce n'est pas la hauteur, parce que c'est comme dire des espèces de points animaux. Quel que soit cet animal, attendez, quel que soit cet animal, hauteur de point, quel que soit cet animal. Et donc cette fonction comprend déjà le concept de ceci. C' est maintenant qu'on peut dire, Consul, ne consigne pas ce point Espèce façon ça Attendez, on ne sait pas si c'est des kilogrammes ou quoi que ce soit. Donc on va juste laisser celui-ci sans aucune sorte de mesure ou on ne sait pas si c'est des kilos ou des kilos, alors on va juste laisser ça comme c'est un numéro normal. Et cette hauteur de conduit est haute ? Ainsi, par exemple, un Tiger Ways 400 mesure trois pieds de haut. On ne sait pas si ce sont des kilos ou des pieds ou quelque chose comme ça. Donc on va rester avec des chiffres réguliers pour l'instant pour garder ça assez simple. Et je vais rendre ça un peu plus petit pour qu'on puisse en voir plus sur l'écran. Allons de l'avant et debout feuille un tout nouvel animal. Donc disons const. tigre est égal à un animal. Un nouvel animal. On va dire, Tiger, poids est de 200, sa hauteur est de 36 pouces. Quelque chose comme ça. Et puis nous pourrions faire tigre dot obtenir des informations et cela va juste consoles log. C' est le poids et la taille de l'espèce dans une phrase pour nous. Allons de l'avant et rafraîchissons-y. C' est Tiger pèse 200, c'est 36. Donc pas le plus grand anglais là-bas, mais vous comprenez le point. C' est donc un cours régulier, et c'est exactement ce que nous avons fait dans la dernière vidéo. Maintenant, allons de l'avant et prolongons cela. Ce que cela signifie, c'est que nous pouvons écrire une autre classe qui hérite déjà de toutes ces données, et nous pouvons en ajouter plus si nous le voulions. Alors allons-y. Et ce que je vais faire ici, c'est que tout cela en une seule ligne juste pour qu'on puisse en quelque sorte résumer ça en un seul point de vue un peu plus facile. Et créons une nouvelle classe pour un animal de compagnie comme un chat ordinaire. Donc, nous faisons le mot-clé chat classe étend animal, et donc ce chat va déjà obtenir des constructeurs tels que les espèces, poids et la taille, et il va aussi obtenir la méthode d'obtenir des informations Maintenant. Ce que nous pourrions faire ici, c'est que nous construisons un instructeur er kamau. Passons dans l'espèce, le poids et la taille et nous pourrions exécuter tout ça si nous le voulions, ou nous pourrions dire que parce qu'il s'étend de l'animal, nous pourrions juste exécuter exactement la même fonction. Vous pouvez voir qu'ils sont en fait mis en surbrillance lorsque j'en sélectionne un. Il sélectionne les deux parce qu'ils ont quelque chose de similaire. Avoir une fonctionnalité similaire ici afin que nous puissions faire cette chose appelée Super, qui est vraiment cool parce que cela s'étend parce que chat étend animal. Nous pouvons exécuter cette fonction appelée Super et il dit, Oh, allez à l'animal et exécutez n'importe quelle fonction est actuellement. Allons de l'avant et jetons le poids et la taille des espèces là-dedans. Et nous pouvons aussi ajouter quelque chose de tout nouveau pour que nous puissions faire cette couleur de point et disons que j'ai un chat orange, ce qui est en fait faux. J' ai un grand et un chat noir. Faisons ça. Donc aucun animal n'a pas cette couleur. Ce n'est pas du tout là-haut. Mais le chat le fait. Cat a tous ces trucs. Nous disons Hey, exécutez Super Donc, en gros, exécutez tous ces trucs avec ces trois paramètres là-dedans, ce qui est exactement ce qu'il fait, va définir le poids et la taille de l'espèce. Et ils disaient, Hey, ajoutez aussi la couleur pour. Alors, il est génial. Et on peut toujours garder ça ici. Si nous voulions lui dans un commentaire ce sur, il doit changer cela là. Je vais le commenter et je vais créer un nouveau cours de chat. Allons-y, Const. Son effort est égal à nouveau chat, pas animal. Nous définissons une nouvelle classe ici. Il s'étend juste des espèces animales. C' est un chat en quelque sorte inutile parce qu'on sait que ce sera un chat. Quel est son poids ? Il pèse 13£. Et quelle est cette hauteur ? Je ne sais pas. Je pense qu'il mesure 13 ou 14 pouces de haut, quelque chose qui est un chat assez gros. Et puis nous pourrions faire consoles dot log Zephyr et jeter un oeil à ce qui se passe réellement dans les coulisses ici et voir si la couleur apparaît, alors rafraîchissez. On a un objet ici. La couleur est géniale. Regarde, c'est là. Hauteur de 13 espèces est un chat et les salaires 13. Et si nous voulions faire, c'est de ne pas avoir d'infos. Il n'est pas vraiment là-dedans. C' est dans la classe des parents. C' est celui dont on s'étend. Et donc cela dira que Cat pèse 13 et a 13 de nouveau. Terrible anglais. Mais ce n'est pas vraiment le but ici. Le chat pèse 13 et 13 de hauteur, comme prévu. Et c'est juste comme dire, Si je copie tout cela dans l'année et que je m'en débarrasse ici et que je dis que cette couleur de point est égale à Gray, c'est juste comme dire que seulement cette fois nous avons pu écrire moins de code. La bonne chose à ce sujet est que si jamais nous avons prolongé cela à nouveau, nous pourrions dire que le chien de classe étend Animal et chien aura également le poids et la taille de l'espèce, donc nous n'avons pas à redéfinir cela. Il aura une méthode ici appelée Get Info donc nous n'avons pas à redéfinir cela. Et c'est juste un moyen facile de copier ceci encore et encore. Et pour qu'on puisse dire Const. Thiago est égal à nouveau chien Vito. Il est de quelle taille ? Je ne sais pas. Il est énorme. C' est comme 3,5 pieds de haut. Et c'était en fait, c'est attendre donc son poids serait d'environ 140£, il fait 3,5 pieds de haut. C' est un grand chien. Mais maintenant, on pourrait diriger Zephyr. On pourrait faire Dargo dot obtenir des informations sur ce qui dira Vito pèse 140 est 3.5. Et donc encore une fois, c'est tout à fait théorique. À ce stade, nous n'allons pas trop utiliser ça sur la route. Mais vous allez voir cela dans la nature et son JavaScript grandit et grandit et grandit. Tu vas voir ça beaucoup plus. Vous allez voir cela dans beaucoup d'autres langages de programmation, tels que Python et PHP aussi. Faisons un exemple de plus. Toi. Débarrassons-nous du chien. On n'a pas besoin de ça là-dedans. Et créons une toute nouvelle méthode pour notre chat. Donc, créons une méthode où le chat est des règles de sommeil. Appelez ça le sommeil consul dot log ce nom de point Eh bien, c'est bon. n'y a pas de nom là-dedans. Cette espèce de point dort 16 heures par jour, donc Cat dort 16 heures par jour. Nous pourrions aller de l'avant et maintenant utiliser ça. Donc, au lieu de Zephyr dot obtenir des informations, nous pourrions utiliser son sommeil de point d'effort et ceci est seulement disponible sur la classe de chat. Donc si on écrivait des animaux ici, ça ne marcherait pas. Mais si nous avons écrit Cat, ça marchera. Alors allons-y. Rafraîchissez notre page. Cat part 16 heures par jour. Parfait. C' est ce que tu appellerais un cours parfait. Et enfin, un autre exemple ici que nous pourrions faire dans la classe des animaux ici. Faisons une fonction de parole, Speak méthode conseil dot log. Je dis quelque chose. On ne sait pas ce qu'est cet animal. On ne sait pas ce qui va dire. Et un chat, on peut dire qu'un chat me dit toujours. Oh, pour que nous puissions écraser ça en disant « Parlez conseil », ne vous connectez pas », ne parlez pas » Nous voulons dire « non ». Et puis au lieu de dormir, nous pourrions dormir, puis parler, puis dormir et disons que c'est faire une sieste Donc Cat fait une sieste. Alors il va se lever. Il va parler, et il va encore faire une sieste. Rafraîchir Cat fait une sieste. Miao chat est en train de l'avoir et donc nous avons réussi à nous écrire. Et si cela n'existait pas, cela va hériter de la méthode speak de sa classe parent de la classe qui étend la classe animale. Donc, il va dire que je dis une chose qui n'est pas utile. Ça dit que Cat fait une sieste. Je dis quelque chose. Cat fait une sieste. Donc, fondamentalement, tout ce que nous avons fait était d'écraser la méthode par défaut fournie avec Animal. Enfin, apprenons comment enchaîner des fonctions, enchaîner des méthodes ensemble parce que dans d'autres parties de JavaScript, vous allez voir des choses comme celle-ci où c'est comme son effort, pas dormir. Ne parle pas de sommeil. C' est comme, comment tu les change ensemble ? C' est en fait assez facile. Donc, lorsque vous avez affaire à un objet d'un type quelconque, nous savons que les classes sont des objets. Tout ce que tu as à faire, c'est dire que tu rentres ça. Cela va retourner l'objet chat entier. Et si vous le faites ici pour retourner cela chaque fois que vous exécutez son effort, pas dormir, il va consoler les espèces de journal fait une sieste, alors va retourner ce qui est fondamentalement tout ce code ici. Ça va rendre tout ça, ce qui veut dire qu'on est maintenant en mesure de changer son ensemble. Donc, alors vous pouvez utiliser parler et parce qu'il se retourne fondamentalement tout ce code à nouveau, vous pouvez alors exécuter le sommeil. Alors allons-y. Enregistrez cette actualisation et Walla comme ça. Maintenant, nous avons une classe étendue et nous changeons les méthodes ensemble. Donc, nous entrons dans vraiment, vraiment sympa JavaScript ici et franchement, moi, avec la plupart des Javascript Dev préfèrent juste avoir cette notation de point ici. Donc, au lieu de son effort, ne pas dormir et n'a jamais parlé. Et puis Zephyr pas dormir et se séparer est encore et encore et encore. Nous pouvons simplement mettre tout cela sur une ligne, donc c'est étendre une classe à nouveau. Vous n'avez pas besoin d'en savoir trop à ce sujet. En fait, nous n'allons pas nous entraîner à étendre les cours dans cette classe juste parce que ce n'est pas quelque chose qui va vous être incroyablement utile en ce moment. Quoi ? C' est l'une de ces compétences que vous devriez juste parler dans votre poche arrière pour l'instant parce que finalement vous allez voir cela dans la nature. Et il va être important pour vous de comprendre ce que c'est, ou au moins d'avoir un vague souvenir de ça. Une fois où Caleb vous a parlé pendant 15 minutes de ce que le mot clé extension signifie avec construire er et chaîner les méthodes ensemble et des choses comme ça. Alors rangez cette vidéo dans votre poche arrière, et si vous vous sentez un peu épicé, vous pouvez faire une photo. Vous pouvez essayer d'écrire ceci si vous voulez. Personnellement, je pense que ce serait une bonne idée. Mais si vous ne voulez pas connaître la pression, nous pouvons passer à la prochaine leçon chaque fois que vous vous sentez bien et prêt. 48. Projet de modèle JavaScript: Ok, c'est le moment où nous commençons à mettre beaucoup de ces compétences ensemble. Ce projet va être un peu plus difficile. Nous allons créer un mobile à partir de zéro. Maintenant, si vous ne savez pas ce qu'est un mobile, c'est vous savez, chaque fois que vous cliquez sur un bouton et que l'arrière-plan de la page devient plus noir ou sombre, et ensuite vous avez, genre ou sombre, et ensuite vous avez, , une petite fenêtre interne à l'intérieur de votre page. C' est ce qu'est un mobile. Nous allons en créer un à partir de zéro. Maintenant, si vous ne connaissez pas beaucoup de CSS, c'est bon. Vous êtes motile n'a pas besoin d'être belle par tous les moyens. Il a juste besoin d'être fonctionnel. C' est la clé de JavaScript est la fonctionnalité. Donc, ce que j'aimerais que vous fassiez est de créer un bouton qui va ouvrir un motel, créer un bouton qui va fermer le mobile, et ensuite je veux que vous écriviez tout cela à l'intérieur d'un objet ou d'une classe. C' est à vous de décider. Si les objets ont plus de sens pour vous à ce stade, redressez-les dans un objet. Si une classe a plus de sens pour vous, juste à l'intérieur d'une classe. Assurez-vous que vous avez vos fonctions ou vos méthodes à l'intérieur de votre objet dans votre classe et faites tout ce que vous devez faire pour que cela fonctionne. Maintenant, vous allez également devoir écrire un peu de HTML parce que votre page nécessite la structure mobile réelle qu'ils disent nécessite très lâchement, il ne nécessite pas réellement. Vous pouvez également obtenir javascript pour créer cela dynamiquement si vous le souhaitez. Pour cela, vous allez devoir écrire quelques écouteurs d'événements, et vous devrez également les écrire à l'intérieur d'un objet ou d'une classe. Donc, si vous mélangez ces deux ensemble, vous devriez être en mesure de créer un mobile assez facilement. Encore une fois, ce n'est pas nécessairement une question de beauté. Il s'agit de fonctionnalité. Tu peux toujours faire quelque chose de plus beau orteil. Regardez l'utilisation de CSS. C' est tout à fait bien. C' est plus d'une chose CSS que nous voulons faire juste JavaScript si concentré en grande partie sur la fonctionnalité. Donnez un coup de feu à ça. Essayez de le faire vous-même sans googler quoi que ce soit sans avoir à référencer d'autres vidéos . Faites transpirer votre cerveau. Ce projet beaucoup ce motile de programmation orienté objet est censé être un peu plus difficile. Allez aussi loin que vous le pouvez avec ça. Essayez de trouver la solution par vous-même. Mais tu sais quoi ? Si vous êtes vraiment coincé et que vous ne pouvez pas faire plus de progrès, vous pouvez certainement référencer les autres vidéos. Hop sur l'ancienne machine Google ou juste regarder le reste de cette vidéo parce que je suis sur le point de vous montrer la façon dont je le ferais. Mais donne-nous une chance. Je vais fondre ça en noir et ensuite tu peux frapper, faire une pause, et puis soit quand tu auras fini, soit si tu es coincé, tu peux reprendre cette vidéo et tu peux voir comment je le ferais. Allons-y et donnons-nous une chance, accord ? La première chose est la première. Nous avons besoin du motile html réel. Donc je vais créer un div ici et je vais faire un peu grossier dans le style de ligne. Donc la position de style. Absolu, en fait, faisons position Fixe haut 50% gauche, 50% bordure, un pixel, rouge solide. Ça va être super moche. La couleur de fond va également être lue. Le avec va être 50% et nous allons lui donner un rembourrage de 20 pixels Voyons quoi cela ressemble. Oui. Ok, donc c'est, tu sais, une grosse boîte rouge laide. Transformons la traduction. Moins 50% moins 50%. Et on y va. Il est au centre de notre page. Allons de l'avant et déplaçons ça. Il est donc au centre de notre page maintenant. Et enfin, nous voulons en afficher aucun. Assurez-vous qu'il ne s'affiche pas du tout. On y va. Comme si elle n'avait jamais existé. Suivant. On doit être capable de saisir ça. Alors allons de l'avant et donnez-nous un mobile de classe Js. Et pendant qu'on fait ça, tu sais quoi ? Nous pourrions aussi bien jeter cela dans le CSS approprié. Alors attrapons ça. Et donnons à ça une classe de juste un motile régulier jeter notre classe semble point motile et je vais retoucher. Ne faites ne sélectionnez que des demi-deux-points Nouvelle ligne bam juste comme ça. Et juste pour s'assurer que cela fonctionne, débarrassons-nous de n'afficher aucun, et il n'apparaît toujours pas. Et je te parie que c'est parce que j'ai installé bootstrap. Donc, je vais désinstaller bootstrap, sortez d'ici. Bootstrap, on n'a pas besoin de toi. Nous savons comment écrire nos propres CSS et JavaScript. Maintenant allez-y et obtenez le rouge d'affichage. Aucun. Bam ! C' est là. Ok, cool. Ouais, c'était un truc de bootstrap, et c'était juste en utilisant la classe de motile. On s'est débarrassés de cette fin. Maintenant, nous en avons la pleine propriété. D' accord ? Nous devons créer un bouton qui va ouvrir le mobile, et nous devons créer sur va fermer le mobile. Donc, nous allons créer un bouton ici, il classe de bouton régulière Js ouvert motile ouvert Cela va toujours dire gros bouton laid et actuellement ne fait rien. Maintenant, continuons et créons un écouteur d'événement pour le motile ouvert. Donc ouvrir le bouton si constant ouvert BT N est égal à documents point sélecteur de requête que le jazz ouvert motile Il n'y en a qu'un pour que nous puissions totalement utiliser le sélecteur Cree au lieu de Crease Lecter tous et nous pourrions faire ouvrir bt n dot ajouter l'écouteur d'événement c'est un clic va être l'événement et tout ce que nous voulons dio est de saisir le motile et de l'afficher Donc maintenant nous devons saisir le modèle CONST. modèle motile est égal à documents point de recherche sélecteur de point Js modèle. Nous allons juste sélectionner ceci et nous allons dire que Motile que le style ne s'affiche pas est égal à Nous allons juste le changer en initial, qui va être tout ce qu'il était avant que nous lui disions d'être Display none. Actualisez votre page. Ha ! Ça marche. Je veux dire, ça ne s'ouvre que, mais c'est plutôt bon. Ok, allons en fait et styliser ça. Juste un peu plus agréable cause que le rouge est tout simplement phénoménalement terrible avec 80% qui est hors de max avec 800 pixels pour les navigateurs super énormes, Border va être un pixel. Fond noir solide va être blanc. C' est à une ombre de boîte. Cinq choix ces cinq pixels noir affichage aucun. Enlevez ça. Ouais, encore assez bien. On ne cherche pas la beauté. On s'assure juste que ça marche. Allons de l'avant dans notre mobile. C' est à un titre. C' est un paragraphe modèle, Laura, Um, 50. Et si nous actualisons votre page et l'ouvrons, c'est un motile et il se couche juste au-dessus du reste de la page. Maintenant, nous avons besoin d'un élément proche ici, Alors allons de l'avant et ajoutons un bouton ici. La classe de bouton est égale à Js proche motile. Nous pourrions aussi l'obtenir par son idée si nous le voulions. Peu importe le modèle proche. Et maintenant, nous devons ajouter l'événement de clôture. Alors faisons ça. Et je sais que j'ai dit, Faisons ceci et des objets ou à l'intérieur d'une classe et nous allons à Mais parce que nous apprenons JavaScript va être plus facile si nous avons juste comme nous le savons et ensuite en quelque sorte le rendre plus avancé à partir de là. Donc, nous avons un bouton ouvert maintenant nous avons un bouton de fermeture et il est très, très similaire à l'écouteur d'événement de bouton ouvert. Donc, l'affichage de points de style de point motile va être affiché Aucun. Allons-y. Nous avons une erreur. Ce qui ne dit jamais Fermer bouton est non. C' est parce que ce n'est pas du jazz, mais du motile C'est du jazz proche motile. Si vous criez à votre écran en disant Caleb, vous ne vous trompez pas Good catch. Ok, plus d'erreur. Motile ouvert fermer Motile ouvert motile fermer motile Ok, on se rapproche assez maintenant. La dernière chose que nous devions faire était d'écrire tout cela à l'intérieur d'un objet ou d'une classe. Maintenant encore parce que nous sommes nouveaux en JavaScript. On ne va pas immédiatement jeter tout ça dans un objet ou une classe. On va l'écrire comme on sait l'écrire, et ensuite on pourra le rendre plus compliqué. Alors allons de l'avant et créons une classe si classe, appelons-la motile. On pourrait avoir une construction ici et ça pourrait faire des trucs et ensuite on aurait pu le rendre un peu plus grand. Et puis nous avons une méthode ouverte et ensuite nous pourrions avoir une méthode proche. Et donc peu commun que d'accord, et puis dans sa construction, ou qu'est-ce qu'un morceau de données dont nous avons besoin pour accéder à travers la construction de la méthode ouverte et les méthodes de vêtements ? Alors que nous avons besoin de la motile chaque fois que nous avons besoin de ce motile, nous n'utilisons pas constante ici parce que si nous voulons accéder à la motile à l'intérieur de l'open dans la méthode close, nous faisons ce point Motile est égal au seul motel sur la page. Alors que se passe-t-il quand nous disons ouvert pendant que nous devons ouvrir ce moteur. Donc, nous allons saisir ceci et nous allons dire ce motile de point C'est ce gars ici point style affichage point capable d'initier et ensuite nous allons le fermer en faisant fondamentalement la même chose. Ce style de point motile de point. Cet affichage est égal à zéro. Ok, donnons ça une économie rapide et rafraîchissons-le. Avez-vous des erreurs ou des avertissements dans votre nouveau livre ? Cela fonctionne-t-il nouveau parce que le modèle n'est plus défini. Et c'est parce que nous avons des auditeurs d'événements ici qui cherchent cela. Donc, au lieu de cela, ce qu'on peut faire, c'est qu'on peut faire un mix ici, donc on a une motile régulière et on va de l'avant et on va juste suivre les choses ici. Mais maintenant, nous devons définir ce motile. Donc, ce que nous pourrions dire est motile constant est égal à nouveau motile et au lieu de mettre cela , nous pourrions faire le point mobile ouvert et ici nous pourrions dio motile vêtements sombres et en fait nous pourrions effectivement garder tout cela ensemble qui fait pas besoin d'être au-dessus du modèle du tout. Et donc ce que nous avons fait c'est que nous avons pris notre cachette le mobile et ouvert le mobile ce genre de fonctionnalité, plus le sélecteur lui-même. Et nous l'avons mis dans sa propre classe. Et maintenant on pourrait juste faire, comme un point mortel ouvrir des vêtements à pois motiles et rafraîchir votre page. C' est un motile ferme le modèle. Ah, donc c'est plutôt sympa. Et comme ça, nous avons une classe ouvrière avec construire ce modèle haut qui nous permet d'utiliser ce motile de points à travers plusieurs méthodes. Que nous venions de changer le style, c'est un lecteur de pli là-dedans. Il est quelques autres sélectionneurs de carrière. Nous avons créé un nouveau motile, puis nous avons ajouté quelques écouteurs d'événements. Non, si on voulait nous prolonger ? On pourrait. On pourrait facilement étendre ça. Et si nous voulions changer le titre et le texte ? Eh bien, allons-y et changeons Cette classe digère le texte motile de la classe de titre Js et nous pourrions vous le savoir, Phyllis avec des valeurs par défaut régulières et nous pourrions aussi les changer ainsi pour que nous puissions faire quelque chose comme ça. Construct va prendre un titre. Il va également prendre du texte et tout de suite nous pourrions faire ce sélecteur de requête de point motile . Nous pourrions trouver le titre motile Js changer que le texte intérieur deux titre, pas le texte et alors nous pourrions faire la même chose à nouveau avec le texte est égal au texte. Et ce que cela veut dire, c'est que nous avons déjà le mobile. Ceci est notre note d'éléments et puis nous allons en trouver un nouveau ici, juste le 1er 1 appelé Titre et dans le 2ème 1 appelé texte texte. Là, nous allons se termine à l'Inter texte au titre et au texte. Rendons cela optionnel cependant. Donc, disons que si le titre n'est pas égal à indéfini maintenant, nous pouvons réellement définir ceci. Si le texte n'est pas égal à indéfini maintenant, nous pouvons également le définir. Et donc quand nous rafraîchissons modèle ouvert de vêtements qui fonctionne. Et si nous voulions ouvrir notre motile avec un nouveau titre, nouveau titre et un nouveau texte Nouveau texte ici ? Donc, c'est à quoi il ressemble actuellement. C' est un motif Un tas de rafraîchissement d'ipsum chaud. Ceci est un nouveau titre motile nouveau texte ici. En fait, nous pourrions même aller plus loin ici, nous pourrions dire que ce titre de point est égal à titre. Ce texte n'est pas égal au texte, et alors nous pourrions jeter cela dans sa propre méthode aussi. Alors allons de l'avant et disons Nouvelle méthode, changer de contenu. Il n'a pas besoin de prendre quoi que ce soit. Jetons ça ici et nous allons dire, Si ce n'est pas le cas, titre n'est pas indéfini. Cette taxe n'est pas indéfinie. Ensuite, on va prendre le mobile. Sélectionnez également le titre à l'intérieur de celui-ci. C' est comme détecter à l'intérieur. Et au lieu du titre, nous voulons ce titre point ce point Tex. Et encore une fois, on fait ça parce que ça a été mis en place ici. On a le titre. Pour tout ce que nous savons, c'est en fait tout simplement indéfini. Nous avons même défini une valeur par défaut dans votre, donc ce n'est pas un titre par défaut. Et définissons un texte par défaut ici. Texte par défaut. Ok, allons-y. Actualiser cette page Manquant un paramètre. Où as-tu manqué quelque chose ? Le texte est égal à la valeur par défaut. C' est là. Merci, avocat, de m'avoir aidé sans son bougeur. plutôt Retournonsplutôtau conseil. Actualiser Aucune erreur. Ouvrez Motile. C' est un motel. La raison pour laquelle cela n'a pas changé était parce que nous n'avons pas encore utilisé le contenu de modification, alors ouvrons Motile nous avons ceci. On a un objet avec un tas de trucs ici. On a le titre et le texte. La propriété motile est l'élément de note réel lui-même. Alors faisons point motile et ce que nous avons ici, nous avons près si nous voulions à mon petit point ouvert si nous voulions motiver le contenu de changement de point et il est là. Ok, donc c'était un motile amusant qu'on a fait là-bas. Nous avons fait beaucoup de choses. Nous l'avons étendu beaucoup plus que je ne l'avais prévu étendre, mais je pense que c'est en fait un bon exercice pour créer votre propre mobile. Si vous n'êtes pas génial avec CSS, n'oubliez pas que vous pouvez toujours copier mon code ici qui va créer un motile de base pour vous . Je suis allé bien au-delà de ce que cette tâche originale demandait, mais je pense aussi que j'ai montré des choses cool ici pour vous aussi. En fait, il y en a une de plus que je veux te montrer. Une autre est que nous n'avons pas à utiliser le titre dans le texte du tout. Allons-y et nous allons nous débarrasser de ce titre de point et nous allons nous débarrasser de cela, pas de texte, et nous pourrions dire juste ici titre et texte. Et puis si nous actualisons motile ouvert, nous avons un modèle ici point change contenu Titre va être nouveau titre ha motile qui change nouveau titre et nouveau texte ici comme une fonction régulière. Donc maintenant, nous passons en fait des paramètres dans une méthode. Et vous pourriez écrire ce code ici aussi si vous le vouliez. Là, tu ne l'as pas fait. C' est ainsi que je créerais un motile en utilisant des classes JavaScript et quelques écouteurs d'événements. En fait, juste quelques écouteurs d'événement, et je change même une partie du contenu là-dedans aussi. N' hésitez pas à répliquer cela. Sentez Frieda voler ce code exact et bricoler avec lui et comprendre comment ça marche. Si vous êtes satisfait de votre solution ou si vous êtes satisfait de ma solution, nous pouvons passer à la vidéo suivante. Et n'oubliez pas que vous pouvez mettre à jour votre projet de partage de compétences avec le dernier code que vous possédez , ou vous pouvez partager une capture d'écran de ce que vous êtes mobile ou une vidéo ou un stylo de code. De toute façon, vous pouvez mettre à jour votre projet de partage de compétences avec votre dernier code. Une fois que vous aurez fait ça, passons à la suivante. 49. Édition à la maison: Ok, on est sur le tronçon de la maison. Nous allons passer en revue quelques JavaScript plus récents, des choses que vous allez voir partout. Quelques-uns d'entre eux incluaient des libéraux gabarits. C' est mieux pour Katyn. Huit, ces grossières cordes qu'on a essayé de contaminer. Il y a une façon beaucoup plus agréable de le faire. Objets libéraux. Vous allez entendre ce terme partout. Et ils ne sont pas vraiment un effrayant comme ils semblent là-bas, En fait, très, très, très gentil et simple. On va parler de fonctions destructrices et aérodynamiques et de choses comme ça. Ensuite, nous allons entrer dans l'ajout et la suppression de classes dynamiquement avec JavaScript afin que toute votre page puisse réellement être très, très dynamique. Et vous pouvez le rendre très dynamique en ajoutant des classes CSS entières à un élément ou les supprimant d'un élément. Ensuite, vous pouvez laisser CSS faire des choses comme des transitions et des animations, ce qui est vraiment agréable, parce que fondamentalement, nous déchargerions notre animation javascript générale. Donc un tas de maths que nous devrions trouver pour laisser le moteur CSS faire tout ce qu' il fait. Et puis, enfin, nous allons avoir un dernier projet où bien, en fait, je vais vous dire ce que c'est que vous allez devoir y aller et découvrir. Mais il va utiliser beaucoup de composants différents de ce que nous avons déjà appris . Donc, une fois que vous êtes prêt à partir, passons à la section suivante et sautez dans le modèle. Les libéraux s'opposent à la structuration des fonctions aérodynamiques et bien plus encore. 50. Modèles littéraires: Ok, jetons un coup d'oeil à ce truc appelé une temp. Tard, littéral, donc modèle, littéral. C' est une meilleure façon de pouvoir chatter des variables Nate avec vos chaînes et mettre essentiellement des variables de côté à l'intérieur d'une chaîne. Et donc, si jamais vous avez voulu imprimer une déclaration,par exemple, par exemple, nom est égal à Caleb, et vous vouliez dire journal de points du conseil. Salut, je m'appelle. Ensuite, vous fermez votre chaîne à un signe plus, puis votre variable. Et s'il y en a plus à un signe plus, je sonne plus de trucs ici. Fermez votre chaîne plus signe à une variable et ainsi de suite et ainsi de suite. Et il y a donc une phrase terrible. Salut, je m'appelle Caleb Moore. Remplissez votre Caleb. Et c'est ainsi que nous avons fait la concaténation de chaînes jusqu'à présent. C' est en fait un bien meilleur moyen dans un JavaScript relativement récent. Vous pouvez faire cette chose appelée un littéral de modèle, et au lieu d'avoir à écrire cette syntaxe brute, qui dès que vous commencez à écrire comme HTML et des choses dedans, elle devient assez, assez grossière. Ce que nous pourrions faire à la place, c'est que nous pourrions dire que le journal des points du conseil utilisait des tiques arrière. Notez que ce n'est pas une apostrophe. Ce n'est pas un guillemet. C' est une tique de retour. Et ensuite tu pourras dire bonjour. Mon nom est le signe du dollar qui ouvre et ferme Curly Brace. Et puis vous mettez le nom de la variable là juste comme ça. Et ça n'a pas l'air plus propre ? Parce que cela dit littéralement bonjour, mon nom est Oh, au fait, c'est une variable venant de l'extérieur de cette chaîne. Je m'appelle Caleb Bam juste comme ça. Et c'est donc tout ce qu'il y a vraiment à un modèle, littéral. Maintenant, la syntaxe derrière elle semble un peu drôle. Alors allons de l'avant et créons un exemple de plus Ici, créons une phrase. Une phrase constante parce qu'on ne va pas nous changer. Nous allons utiliser un littéral de modèle, et il va dire bonjour. Mon nom est à nouveau signe Dollar ouverture et fermeture accolade. Ensuite, vous mettez votre nom de variable à l'intérieur de là. Ce nom de variable vient d'ici. Bienvenue à mon cours sur Javascript JavaScript. Et puis il a juste cette coche arrière et une coche qui s'ouvre en arrière. Donc, ce n'est pas apostrophes n'est pas des guillemets. C' est une coche arrière aller de l'avant, claquez ce bouton d'entrée. Ça va dire parce que tout ce que nous avons fait était de définir une variable ici ou une constante plutôt, et allons de l'avant et tapez phrase et voilà, ça dit. Je m'appelle Caleb. Bienvenue à mon cours sur JavaScript et juste pour le plaisir, Z Allons de l'avant et jetons un coup d'oeil au type de la phrase. C' est toujours une chaîne, et c'est donc une meilleure façon de concoquer des variables dans une chaîne pour n'importe quelle forme de sortie. C' est vraiment, vraiment sympa, mais j'aimerais que tu fasses juste une minute et essaie juste d'écrire un de ces entraîneurs, non ? Ah, constante avec une variable. C' est peut-être ton nom. Peut-être que c'est ton âge. Peut-être que c'est le nombre d'animaux que vous avez et juste le jeter dans une chaîne littérale modèle. Une fois que vous aurez compris cela, passons à la prochaine vidéo 51. Literals d'objets: Bonjour et bienvenue. Retour dans la dernière vidéo, nous avons appris sur un littéral de modèle. Dans cette vidéo, nous allons en apprendre davantage sur une chose appelée un objet littéral. Et donc celui-ci est un peu plus compliqué qu'un modèle, littéral et compliqué. Je veux dire, en fait, cela réduit juste combien de code nous devons écrire, ce qui est vraiment sympa. Alors allons de l'avant et créons un nouvel objet ici, juste un objet régulier. Alors disons, CONST. Personne est égal à Et puis je vais mettre mon nom ici et mon nom sera Caleb , et ensuite je pourrai y , accéder avec le nom de point de personne. Donc c'est un objet régulier. Maintenant, que faire si je voulais définir une fonction ici ou une méthode, comme on l'appelle ? On va faire parler Caleb, et ça va être une fonction appelée Speak, et ça va consigner quelque chose. Journal de la console, je dis loup. J' avais l'habitude de me dire dehors. Maintenant, je dis loup, et cela est accessible par la parole. Allons de l'avant et sauvegardons ça. Et ça dit, je dis loup. Bon, Bon, quel objet dit Literal ? Vous n'avez pas vraiment besoin de cela parce que ce nom et ce nom sont exactement les mêmes. Allez-y et découpez ces trucs ici, et donc vous verrez juste ci-dessus. C' est une virgule parce qu'il y a une paire de valeur clé là-dedans et au lieu de dire parler est égal à parler, nous disons juste, Hey, il y a une fonction ici. Ça s'appelle Speak. Allez-y et sauvegardez cela et rafraîchissez. Cela fonctionne aussi, Et c'est donc ce que fait un objet littéral. C' est un raccourci dans un objet. Donc, si j'en ai créé un de plus ici, Mais cette fois je veux le faire avec une propriété ou une variable à l'intérieur d'un objet. Je vais juste utiliser un mot aléatoire. Voici donc nous allons créer une autre constante ici. Ça s'appelle Computer, et ça va être une chaîne appelée Computer. Eh bien, moment, ce que nous aurions à dio c'est que l'ordinateur est égal à l'ordinateur ou ça. Essentiellement, c'est la même chose. Mais parce que ce sont les mêmes valeurs, allons de l'avant, découpons ça. Et donc au lieu d'avoir essentiellement des parenthèses ici disant Javascript, Hey, c'est en fait une fonction disaient, Hey , ordinateur, la clé et la valeur sont exactement les mêmes. Allons-y et console. Enregistrez ceci. Laissons l'ordinateur. C' est pour consul dot Log. Et là, c'est l'ordinateur. Et maintenant, nous n'écrivons pas sur le long chemin. Nous n'avons plus à écrire. L' ordinateur est égal à l'ordinateur ou à la façon dont nous l'aurions écrit à l'origine. Ordinateur. On n'a pas à le faire comme ça. Nous pouvons maintenant le faire de cette façon, qui est vraiment, vraiment sympa. Et donc c'est tout un objet, Literal dit que votre clé est la même que votre valeur ou quand il s'agit d'une méthode, vous dites que la clé de la méthode est également le nom de la fonction. Et donc c'est juste un raccourci. Écrire moins de code rend la vie un peu plus facile. Si vous vous sentez épicé, allez-y et donnez-lui un coup de feu. N' oublie pas. Si vous avez des questions sur la façon dont cela fonctionne, vous pouvez les laisser tomber. Sois bas. Je suis là pour vous aider. Sinon, quand vous vous sentez confiant, passons à la vidéo suivante 52. Destructurer des rayons, objets et tout le reste: Bonjour. Parlons de cette idée de la structuration. Maintenant. Avant même d'entrer dans cela, je vais vous dire qu'il y a deux façons de tirer des données d'un tableau ou d'un objet. Et donc je pense que la meilleure façon d'apprendre cela est juste de le faire. Donc je vais réduire un peu l'espacement ici et ce côté, parce que ça devenait un peu grand. Et donc si nous avons un tableau, alors créons une variable régulière. Il s'appelle un Are court pour tableau, et il a des noms ici. Il y a Caleb, Nathan et Zephyr. Maintenant, si je voulais amener Caleb O à ça, je dois dire que c'est une constante. Caleb est égal à un RR zéro et Const. Nathan est égal à un R R R 1. Nous pourrions parcourir cela et essayer d'assigner ceci, mais fondamentalement, nous l'assignons juste à une autre variable sous la forme d'un tableau ou d'un objet. Et donc, vous savez, si vous avez, par exemple, un tableau qui contient 100 noms, vous ne voulez pas le faire 100 fois. C' est assez douloureux. Et donc ce que nous pouvons faire à la place, c'est cette idée de structuration. Et vraiment tout ce qu'on dit, c'est que nous voulons les saisir et les jeter dans leurs propres variables. Alors allons de l'avant et d structurer ce tableau. Allons de l'avant et créons. Utilisons un let et cela va ressembler à une liste mais du mauvais côté d'une variable. Donc, c'est sur le côté gauche. Au lieu du côté droit des signes égaux, ça va ressembler à ça, ce qui a l'air un peu bizarre, mais on va briser ça. Donc, d'abord, nous voulons obtenir Caleb, Nathan et Zephyr, puis au lieu de et juste ici, mettons juste la variable de tableau. Allons de l'avant et sauvegardez cette actualisation Notre page semble que rien ne s'est passé, mais il est tout ici maintenant, Tout d'un coup, ces variables réelles d'air qui peuvent être accessibles dans votre application. Maintenant, ce n'est pas vraiment un exemple super utile pour être totalement honnête. Ok, alors créons un nouvel exemple ici. Quelque chose de plus utile. Euh, je vais demander mon nom. Demander. Quel est votre nom complet ? Et donc nous savons que cela va retourner une chaîne. Donc ça va être une chaîne. Nous savons que mon nom sera le transport basé sur Caleb, et donc nous pouvons le partager ici. Et puis nous pourrions faire var ou plutôt, laisser le prénom nom nom de famille est égal au point complet divisé sur chaque espace. Maintenant, il y a des défauts de logique dans cela parce que et si quelqu'un met plusieurs espaces ici  ? Oui, ça va casser le script. Cependant, dans cet exemple, est pas le cas. Donc, idéalement, lorsque vous travaillez en production ou en JavaScript plus professionnel, vous aurez des moyens d'atténuer ce problème particulier où quelqu'un met dans plusieurs espaces. Peut-être que vous avez réduit plusieurs espaces en un seul espace. Allons-y. Console Loggers Council dot log Le prénom est le prénom et le nom de famille est le nom de famille . Allons-y, Rafraîchir. Quel est mon nom complet ? Caleb. Grand Lean. C' est à propos de mon propre nom. Ils ont tort. Caleb est le prénom. Appeler est le nom de famille. Et c'est donc de structurer d'une meilleure façon. Sans structuration d, nous aurions dû le faire d'une manière différente, Alors allons de l'avant et commentons cela. Ce que nous aurions dû faire était le nom complet est égal au nom complet point split. Donc, nous devons le diviser de toute façon. Et puis nous pourrions faire var laisser ou const. Faisons le contre parce que mon nom ne va pas changer. Prénom est égal à un nom complet, et il est l'index zéro dans le 1er 1 du tableau et le nom de famille. Et quand je rafraîchis la page, donne-nous un coup. N' utilisons pas mon nom. Utilisons John Smith. John est le prénom Smith son nom de famille, donc ça marche toujours. Mais de cette façon, nous avons dû écrire plus de lignes de code, nous avions droit trois lignes de code de plus , ou, je suppose, deux lignes de code de plus. Au lieu de simplement écrire une ligne de code. Il va le commenter. Gardez ceci ici et vous pouvez référencer ce code à tout moment. Donc, c'est D structurant un tableau. Il y a en fait beaucoup plus à cela, cela, donc c'est juste une structuration régulière. Je vais commenter ces trucs parce que je ne veux pas que ça fonctionne maintenant. Et si on l'avait fait ? Revenons à notre premier exemple ici. Et si nous avons plus que ces noms, mais nous voulons juste le 1er 3 pour quelque raison que ce soit. Donc je veux avoir Caleb, Nathan et Zephyr. Mais s'il y avait aussi Prairie Henry Veto et Maya ? Si on fait ça, que va-t-il se passer ? Et j'invite toujours les gens à essayer des choses que vous n'êtes pas Vous n'allez pas casser quoi que ce soit en exécutant javascript localement sur votre ordinateur. C' est bon de tester les choses, donc si ça casse, c'est tout à fait bien. Allons de l'avant et frappons. Rafraîchir. OK, on a Caleb. On a Nathan. On a Zephyr. Nous n'avons probablement pas Prairie. Non. On n'a pas Henry. Non met le veto de l'autre. Maya, ce sont tous des airs de référence. Ces variables n'existent pas encore, alors que faire si nous voulions obtenir le reste d'entre elles ? Eh bien, en JavaScript, il y a ce truc appelé repos. Et donc à la place, ce qu'on peut dire c'est que je vais copier ça parce que je ne veux plus parler de tout ça. On va structurer Caleb, Nathan et Zephyr. Ce ne sont que les 3 premiers, ils n'ont pas besoin d'être le même nom qui pourrait être autre chose. Et en JavaScript, regardez dans cette chose où nous avons ce point de fantaisie, point de repos, et puis allons de l'avant et consul, ne connectez pas le reste. Allons de l'avant et rafraîchissons. Journal de la console. Nous avons Prairie Henry Veto et Maya qui sont toutes les autres qui sont ici maintenant, c'est ce qu'on appelle l'arrestation. Vous n'avez pas besoin d'utiliser le nom rest. Ça pourrait être autre chose. Il est signifié par la syntaxe point, point point, point Hurley, point, point Hurley, point,point. Disons que tout le monde vient d'approuver ça. On n'a pas besoin d'appeler ça repos et voilà, ça marche exactement comme on s'attendait. D' accord, je vais partager ça, et on en a une de plus. Nous pouvons également d structurer des objets. Alors allons de l'avant et créons un nouvel objet. La personne de l'objet va l'être. Ça va être méchant parce que les raisons que je suppose. Le nom va être Caleb de mon âge. Ce qui va être 30 et le nombre de chats que j'ai va être, aussi. Et ma nourriture préférée va être la pizza Donc encore une fois nous rencontrons le même problème où si je voulais juste obtenir mon nom et le stocker dans une variable, je devrais écrire. Le nom de la constante est égal au nom du point de la personne. Const. L' âge est égal à l'âge de la personne point Const. Katz est égal aux chats de points de personne. Je pense que vous avez l'idée ici à la place. Affaiblir la structure de cette Et alors allons de l'avant et jetons tout ça dedans. Faisons-le, laisse-là. Je suppose. Alors. Faisons-le. Allons et nous ne travaillons pas avec un tableau, donc nous n'allons pas utiliser la course A et la taxe. Nous allons utiliser la syntaxe de l'objet, et cela va ressembler à ceci, fondamentalement, fondamentalement, est le signe de l'objet sur le signe de l'objet droit sur la gauche à droite. Nous pouvons réellement nous remplacer par la variable d'objet réelle elle-même. Donc, c'est comme dire que tout ça est là. Et puis disons que je voulais juste avoir le nom et la nourriture que je pouvais faire. Le nom et le nom du journal de point du conseil alimentaire est le nom et la nourriture est la nourriture. Allons-y. Donnez un coup de feu à ça. Il s'appelle Caleb. La nourriture est de la pizza. Celui-ci n'avait pas à aller dans l'ordre. Il l'a fait. Avec le tableau quand nous d structuré un tableau, mais avec un objet parce que tout est nommé toujours eu est hey, obtenez le nom. Donc c'est la clé ici. Obtenez aussi la clé appelée nourriture Tous les autres Maintenant, nous ne nous soucions pas, mais allons aller plus loin. Nous pouvons en fait devenir un peu plus compliqué avec cela parce que si ce nom de clé est quelque chose d'obscur comme le prénom pour l'utilisateur ? Pourquoi ça arriverait ? Je ne sais pas, mais parfois des choses comme ça arrivent. Et donc tu devrais mettre ce nom là-dedans. C' est juste terrible. Et donc, mais assurez-vous juste que cela fonctionne. Sauvons gratuitement frais. Et c'est là. Mon nom est Caleb, mais maintenant vous avez cette variable brute appelée prénom pour l'utilisateur. Ce que nous pouvons faire est de réaffecter ceci et parce que fondamentalement, nous créons un objet sur la gauche ici, puis réaffectons la clé à un nom de variable qui était un peu déroutant. On peut dire que c' est la clé qu'on veut extraire. Et quel est le nom de la variable que nous voulons utiliser. Appelons simplement le prénom et nous pouvons si cela est plus logique pour vous, mettez cela sur plusieurs lignes aussi. Allons-y. Mais il y a sur plusieurs lignes et cela semble juste un peu plus propre, surtout avec mon plaisir étant si grand. Mais c'est essentiellement dire, Hey, attrape cette clé et ensuite nous allons l'assigner à la variable appelée prénom. Allez-y, enregistrez et actualisez. Et bien sûr, ça marche toujours. Et juste pour vraiment s'assurer que ça marche. Certainement pas. Caleb. Il est là. Le nom n'est certainement pas Caleb. Nous savons donc que cela fonctionne et donc trop réaffecté. Tout ce que tu as à faire, c'est dire de la nourriture. Mettez un deux-points là-dedans. Donc c'est ta clé. Donc, en fait, ça va être ta clé. Et puis quel que soit votre nouveau nom de VAR, dans ce cas, nous allons dire que la nourriture va être remappée à la nourriture préférée. Et maintenant, c'est un peu plus verbeux dans le reste de notre application. Pour qu'on puisse dire de la nourriture préférée. Il est là. Nous pourrions même aller jusqu'à définir des propriétés qui n'existent même pas encore, donc je vais juste annuler une partie de cela. Gardez ça bien et bien rangé. Ok, donc j'ai juste défait un tas de code de genre. Ça a l'air beau et propre. Et s'il y avait une propriété ici que je cherche ? Cela n'existe pas. Disons que pour une raison quelconque, je suis censé avoir une couleur préférée. Et disons que la couleur est censée être bleue. Mais pour une raison quelconque, cet objet de personne n'a pas que tandis que ce que nous obtenons dire ici est la couleur et alors nous pouvons juste dire est égal au bleu. Et quand je fais cette nourriture préférée est ce changement à la couleur de la foi, et il est là. La couleur préférée est le bleu, et maintenant nous sommes en train de définir la valeur par défaut. Mais que se passe-t-il si cela est dans votre Ceci existe déjà ? Nous changeons pour lire. Tu crois que ça va rester bleu parce que nous signons des couleurs égales au bleu ? Ou pensez-vous que ça va essayer de saisir ça ? Et s'il n'existe pas, utilisez la couleur bleue. Allons de l'avant et expérimentons et découvrons et encore une fois, je recommande toujours juste de tester des choses. Ça pourrait être amusant. Juste un test pour voir comment ils fonctionnent dans les coulisses. Ok, donc j'ai frappé Refresh, et sa couleur préférée est le rouge. Malgré ce dicton bleu, c'est parce qu'il existe réellement dans l'objet de la personne. Ceci est juste de définir une valeur par défaut, comme lorsque nous écrivions une fonction avec une valeur par défaut pour un paramètre. C' est exactement la même chose que nous faisons ici maintenant ce que je vais vous laisser faire vous-même comme une petite expérience ici, c'est que je veux que vous créiez un objet comme celui-ci, et ensuite je veux que vous structuriez cet objet. Mais ce que je veux que vous fassiez, c'est utiliser l'arrestation, et je veux que vous trouviez ce qui est stocké dans ce repos. Vous devrez peut-être ajouter de nouvelles propriétés ici pour vous assurer que ce reste montre quelque chose de supplémentaire. Ou peut-être pas. Ça dépend de la façon dont vous l'écrivez. Mais je vous incite à donner une chance à ça. Juste bricoler avec elle et amusez-vous un peu. Voir ce que ce reste fait le journal de la console point de repos. Donc, au conseil de fin, je ne fais pas de repos et je vois juste ce que ça revient alors allez-y, donne-le un coup. Si vous ne comprenez pas tout dans cette vidéo, devinez quoi ? C' est tout à fait correct. On ne s'attendait pas à ce que vous sachiez toutes les choses de chaque vidéo allant de l'avant en permanence . C' est le codage ne fonctionne pas comme ça. Apprenez autant que vous le pouvez. Et quand vous vous sentez un peu marre ou conseil de structuration et passez à la suivante , la leçon suivante. Et si jamais vous voyez de structuration dans la nature, peut-être que vous lisez du code source et vous allez comment ça se fait, il dit, Allons accolade Nom. Couleur alimentaire. accolade bouclée est égale à un objet. Ou peut-être que vous voyez un tableau structuré en D. soit, Quoi qu'il ensoit, vous allez être prêt pour le code qui vous sera lancé. 53. Timeouts: Bonjour, End. Bienvenue de retour. Jetons un coup d'oeil à cette nouvelle chose appelée un temps d'arrêt. Donc, dans le monde de JavaScript, nous pouvons réellement dire à un code de ne pas fonctionner pendant un certain temps. Et cela s'appelle un temps d'arrêt. Jetons donc un coup d'oeil à la syntaxe derrière un temps d'arrêt. Nous utilisons ce mot-clé appelé Définir le temps d'attente. Ce n'est pas en fait un mot-clé comme un nom de fonction défini time out, et alors nous pourrions lui passer une fonction si nous le voulions. Et c'est notre rappel. Et puis notre deuxième paramètre va simplement l'être. Combien de temps devrions-nous expirer en millisecondes ? Donc, 1000 millisecondes est égal à une seconde jusqu'à ce que nous écrivions ceci en millisecondes. En outre, nous pourrions aussi simplement dire la fonction de rappel, quelle que soit cette fonction va être appelée. Donc, cela ressemblerait à une fonction, quelque chose comme ça. Et donc c'est vraiment un temps fixe. Il semble qu'il va exécuter une fonction particulière, et il va attendre 1000 millisecondes, ou 5000 millisecondes, ou 42 millisecondes avant qu'il ne s'exécute réellement. Jetons un coup d'oeil à ce que cela ressemble réellement Dit pour fixer le temps d'attente. Réglez le temps d'attente. C' est une fonction ici ? Et on va juste se déconnecter du conseil et on va attendre trois secondes. Rappelez-vous, c'est des millisecondes. Donc c'est l'équivalent de trois secondes, et je vais rafraîchir ma page ici. Tu peux vraiment me regarder faire ça, et ensuite on compte ensemble, et c'est là. Ça a pris trois secondes. C' est un peu plus difficile à détecter. Donc, ce que nous pouvons faire à la place, c'est que nous pouvons rafraîchir notre page, et ensuite nous pouvons changer comme la couleur de fond de la page. Faisons corps const. Rappelez-vous, const va être étendue de bloc à ce bloc particulier ici. Donc, le corps va être le sélecteur de requête point de documents, le corps, puis le style de point de corps que la couleur d'arrière-plan est égale au bleu. Ça change aussi. Coloré au blanc, juste la couleur du texte. Allons-y. Donne-lui un peu de fraîcheur et on attend, mec. C' est là. Et au bout de trois secondes, bien sûr, la page a changé. Que se passe-t-il quand on met un journal de console ici ? Journal de la console, premier journal de la console. Et on en a mis un ici. Il s'agit du troisième journal de la console. Et juste pour la postérité. Disons qu'il s'agit du deuxième journal de la console. Donc parce que ça fait un temps ici, est-ce qu'on pense que ça va faire ça ? Attendez trois secondes, puis exécutez ceci et puis exécutez cette ligne ? Ou est-ce qu'on pense que ça va fonctionner ? Dis, oui, il y a un temps ici. Exécutez le troisième journal de la console, puis trois secondes après qu'il arrive à cette ligne particulière ici , il va exécuter ceci. Que crois-tu qu'il va se passer ? Allons-y. Enregistrement de l'actualisation et de la première 3e et deuxième journal de la console du boom. C' est donc une introduction légère dans le monde du code asynchrone. Ce que cela signifie, c'est que votre ordinateur va lire ce code de haut en bas. Il va lire cette ligne aussi. Oui. Ok, je peux exécuter ça. Il va lire cette ligne et dire, Oh, c'est un temps sur trois secondes. Je comprends que je vais enregistrer ça, donc je vais mettre ça dans mon esprit, et je vais passer à autre chose. Mais à partir de la milliseconde absolue ou microseconde que votre ordinateur atteint cette ligne juste ici. Ça va commencer à compter jusqu'à trois. Ça va aller de 1 à 3. Et pendant qu'il le fait en arrière-plan, il a déjà couru que probablement un tas d'autres codes, puis bien ici après que des tas d' autres codes ont déjà été exécutés. Il va exécuter cette fonction de temporisation définie, donc il va l'exécuter ici. Et c'est donc une introduction légère dans le temps défini et le code asynchrone. 54. Intervales: dans le monde de Javascript. Il y a cette idée que vous pouvez exécuter du code encore et encore et encore jusqu'à ce qu'il soit dit d'arrêter de fonctionner. Et c'est un intervalle. Et comme fixer un temps d'arrêt, nous avons dit un intervalle de la même façon. Donc, nous utiliserions un intervalle défini. Il prend une fonction comme sorte de la fonction de rappel, puis un temps comme un second paramètre . Et donc, disons pour chaque seconde, c'est à nouveau millisecondes comme dans le temps défini. C' est une seconde. Donc, nous allons nous utiliser en millisecondes et nous voulons juste consoles dot log. Je cours. Et quand nous actualiserons notre page, nous allons voir que cela fonctionne toutes les secondes encore et encore et encore. On peut voir que cela compte ici. Chaque seconde va continuer à courir encore et encore et encore, et cela ne fait rien d'utile, mais dans la nature. Lorsque vous écrivez du code riel, vous pourriez réellement vouloir effectuer une requête Ajax à un serveur chaque seconde pour voir si les utilisateurs ah connectent le dîner pour garder un cookie en vie ou peut-être envoyer les données du navigateur à un service. Il y a beaucoup d'utilisations pour cela. Il y a aussi un bon cas d'utilisation pour se débarrasser de cela. Donc, ce que nous pouvons faire est de mettre ceci dans une variable donc devrait créer une variable régulière ici. Appelons ça. C' est un plus long et donc il va juste se connecter, et quand je rafraîchis la page, il fonctionnera toujours. C' est dans une variable, mais cette fonction, cette fonction d'intervalle défini est réellement exécutée et elle est stockée dans cette variable. Disons maintenant que nous voulions nous débarrasser de ce bien, comme un meilleur exemple. Faisons-le bien au Consul. Nous allons faire un intervalle clair, et nous lui donnons juste le nom de la variable plus longtemps et vous pouvez voir qu'il s'est arrêté au numéro 22. Le numéro 22 n'est pas important. Il se trouve que je l'ai arrêté quand il comptait au numéro 22. Et alors, allons de l'avant et créons un temps d'arrêt avec un intervalle. Allons fixer le temps libre. On va mettre une fonction ici, et on va effacer cet intervalle clair de lager. Et cette fois-ci aura lieu au bout de cinq secondes. Et donc cela va courir cinq fois, et après cinq secondes, il arrêtera de courir. Allons-y et rafraîchissons, et on attend trois, quatre, cinq. Je ne sais pas. Regarde ça. Je n'ai pas tout à fait atteint cinq maintenant, n'est-ce pas ? Maintenant, cela revient au temps de traitement de vos ordinateurs. Et si on faisait 5,5 secondes ? Voyons ce qui se passe ici. Donc ça va passer à deux, puis à trois et puis à quatre. Et puis c'est là. Cinq. Et donc tout ce que nous avions à faire là-bas était vraiment monté ce numéro juste un peu, juste pour être sûr que cela fonctionne toujours cinq fois. Il y a certainement une meilleure façon de le faire, mais c'est juste une façon de le mélanger et de le faire correspondre. Un intervalle fixe, et il a mis le temps ensemble 55. Des APIs et Ajax utilisant Fetch: Ok, jetons un oeil à une requête Ajax en utilisant le fetch A p I Maintenant, cela devient assez JavaScript e et honnêtement, ce n'est pas super débutant amical, mais je vais mettre cela là-bas de toute façon parce que c'est en fait très important quand il s' agit de faire des applications d'une seule page, par exemple. Vous savez, quand vous êtes sur facebook dot com et que vous cliquez sur un lien et que la page ne clignote pas, seules certaines sections se mettent à jour. C'est en utilisant la récupération d'un p I. Donc, c'est essentiellement la création d'une requête Ajax disant, Hey, serveur facebook dot com ou app dot facebook dot com Quoi qu'il en soit, je veux un tas de données en retour, et puis je vais rendre ce que ces données utilisent JavaScript va écrire mon propre HTML et puis je vais mettre à jour la page juste dans cette section particulière Donc, vous n'avez pas à faire une requête http complète et effacer la base de données pour les informations de l'utilisateur et des choses comme ça . Ça va juste mettre à jour une petite section du site. C' est essentiellement ce que fait aller chercher. Et donc nous allons avoir besoin d'un A P I pour ça. Alors faisons les Star Wars. Un P I marécageux bon vieux, marécageux et allons-y et ah, nous allons obtenir l'AP marécageux que j'entends. En fait, je crois que c'est ici. Oui, c'est le lien que nous voulons. Donc ça va nous dire que c'est marécageux. Dot point c o slash ap Je slash les gens un ni planètes trois ou vaisseau neuf Aller avec les gens. Un. Qui est ce Luke Skywalker ? Bien sûr. Bien sûr que c'est Luke. Et si on veut obtenir ce Jason Data ? Comment allons-nous faire en sorte que ça marche ? Eh bien, ce qu'on peut faire est juste. Une récupération. Et alors, allons de l'avant et écrivons un peu de recherche ici. Nous pourrions simplement utiliser le mot usine, vous le donner ou moi, ce qui était pour le faire. Vous êtes tous ici, et on dirait que c'est fait, mais ce n'est pas le cas. Ensuite, nous allons utiliser le mot-clé then, donc fondamentalement, cela va effectuer la requête Ajax. Il y a d'autres paramètres que vous pouvez ajouter si vous ne voulez pas faire une demande de get régulière , vous pouvez faire un post, demander un tas d'autres choses là-dedans aussi. On ne va pas passer en revue toutes ces rubriques. Donc, l'étape suivante est d'utiliser dot Alors tout ce que j'ai fait ici était de le mettre sur une nouvelle ligne. Donc c'est la même chose que ça. Il semble juste un peu plus lisible de cette façon de fonctionner, quelle que soit cette réponse. Et je vais retourner point de réponse Jason. Donc, je suis juste pour m'assurer que tout ce qui revient de ce que vous Earl dans le nom de variable appelé réponse, je vais alors j sahn Si je m'assure que ce n'est pas Jason Format, vous savez, si vous n'avez jamais regardé Jason avant, cela ressemble beaucoup à un objet JavaScript. En fait, il est presque identique à un objet javascript. Vous avez votre orthèse bouclée d'ouverture. Vous avez une paire de valeur clé, une virgule, une paire de valeur clé, une virgule, une paire de valeur clé. Certes, ceux-ci ne pourraient probablement pas être des chaînes. Ce pourrait être juste des nombres, mais nous pouvons le laisser comme une chaîne pour l'instant. Donc ce que ça fait, c'est dire Hey, attends que ça arrive. Et quand cela se produit, quand nous obtenons une réponse dans cette fonction particulière, allez-y et transformez ça en Jason. Assurez-vous que c'est Jason, et nous savons que c'est Jason, parce que c'est des cerceaux au format Jason. Je clique sur un lien là. Nous savons que c'est Jason parce que c'est Jason formatage, et ensuite nous allons écrire un point de plus ici fonction Puis. Et nous pourrions faire tout ce que nous voulons avec cette réponse. Vraiment ? Donc, nous avons mis nos s et ici pour une réponse, il était juste journal de la console sont oui. Revenons à notre page et appuyez sur Rafraîchir et vous ne pouvez pas voir qu'il a fait toutes ces choses différentes . Mais il a créé un objet pour nous ici. Et nous avons donc notre année de naissance. Nous avons créé, édité la saison du film avec l'U R. L, c'est que nous pourrions ensuite aller sur le hit. C'est une liste pour que nous puissions aller et parcourir tous ceux en boucle si nous le voulions. Genre, couleur de cheveux, monde de la maison, toutes ces choses que nous pouvons aller et obtenir toutes ces informations si nous le voulions aussi. Maintenant, c'est un moyen très simple de créer une requête Ajax avec JavaScript vanille en utilisant le fetch a p je à nouveau juste toe sorte de vous montrer comment cela fonctionne. Utilisez le mot « chercher ». Il semble qu'une fonction ait des parenthèses. Il faut un paramètre ici. C' est votre UL. Il y a d'autres paramètres que vous pouvez définir. Je laisserai ça à vous si vous voulez aller explorer ça maintenant ou peut-être explorer ça plus tard dans votre carrière. Une fois que nous avons fini d'attendre que ça revienne, nous disons, Ok, une fois que c'est fait, alors allez faire ça. Et nous avons dit, OK, eh bien, peu importe ces réponses, nous voulions nous assurer que c'est Jason n'a pas forcément besoin d'être Jason. Peut-être que c'est XML. Peut-être que vous devez analyser du XML, faire autre chose avec un A p I. Et puis quand cela est fait, quoi que ce soit retourné sera cette variable ici. Donc je l'ai appelé Rez. Un court-métrage pour la réponse. Vous voyez notre ES un peu. Parfois, vous verrez certaines personnes juste dire notre C'est aussi court pour rez, ce qui est court pour la réponse. Alors on change ça ensemble et on dit, Hey, Hey, une fois que c'est fait, faites-vous celui-là et conta de le consigner. Maintenant, nous pouvons regrouper beaucoup d'autres choses que nous avons appris, comme la portée et dire, Hey, allons de l'avant et obtenir Luke Skywalker si constant Luke est égal à juste un objet vide. Et puis on pourrait dire que Luke est égal à ce que ce conseil réponse point journal Luke. Et comme dans son set, intervalle moins. Et allons de l'avant et voyons ce qui se passe ici quand nous faisons le journal consulat avant consul dot log après. Et où crois-tu que ça va courir ? On pourrait même faire un journal de console ici le journal des points du conseil puis le journal de la console numéro un, puis le numéro deux. Et donc, en tant qu'humains, nous lisons cela aussi. Ce sera le 1er 1 puis un, puis deux et après. Mais c'est comme ça que ça marche vraiment ? Allons de l'avant et rafraîchissons la page que nous obtenons avant puis un, puis deux, et puis nous obtenons une affectation invalide à const. Parce que regarde ça. J' ai dit une constante pour être un objet vide. Ce que cela aurait dû être un laisser Ok, ici, vous Cela fonctionne mieux. Donc, nous avons avant après puis un, puis deux et puis toutes les informations Luke Skywalker avant, après cela était en attente sur une réponse d'un autre site Web. Donc peut-être que le sentiment de prendre une seconde ou cinq secondes ou 30 secondes va alors le traiter , le traiter une seconde fois, puis le journal de la console. Luc. Maintenant, qu'est-ce que tout ça veut dire ? C' est fondamentalement votre récupérer un p I en utilisant des promesses JavaScript. Et la bonne chose à ce sujet est que vous pouvez réellement diviser les choses en fonction un. Et puis vous pourriez diviser cela en une fonction si vous le vouliez, et cela semble juste beaucoup plus propre. Faites ça et gardez ça comme c'était, mais maintenant le problème avec ce que nous avons écrit ici est que si vous avez repéré ceci, nous avons laissé Luke est égal à Justin objet vide, et nous sommes en train de définir. Luke est égal à la réponse de Jason, mais parce que cela fonctionne, cela a un temps d'attente. Donc c'est asynchrone. Donc, il fait quelque chose en arrière-plan, et puis cela fonctionne immédiatement après celui-ci. Au moins, ça a l'air comme ça. Nous n'avons pas encore accès à regarder, donc le conseil n'enregistre pas Luke et allons de l'avant et dire Luke, pour qu'on puisse identifier ce journal du conseil. On avait un objet vide. C' est parce que c'est ce qu'on a mis en place ici. On a dit que c'était un objet vide et Onley après un petit moment. On a vraiment récupéré la réponse et on a dit, Hey, remplacer ? Bon, donc j'ai juste nettoyé ça. Je pense qu'on devrait faire encore une chose. Revenons donc à notre objet que nous obtenons du point marécageux c o a p I et prenons les films. Donc c'est une liste que nous pouvons voir. C' est une liste parce qu'elle a les crochets durs ici. Luke Skywalker n'est pas cinq films, donc 1234 et cinq Vous pouvez aussi voir qu'il y a une longueur de cinq. Allons de l'avant et d structurer ceci et nous allons juste obtenir les 3 premiers films pour que nous sachions que c'est un tableau, mais c'est à l'intérieur d'un objet. Alors, comment on a des films ? Eh bien, films viennent d'un objet appelé Eh bien, on l'appelait Luke pour qu'on puisse regarder des films et ce serait un tableau. Maintenant, nous savons que c'est le tableau affaiblir maintenant D structure que les données. Donc on pourrait dire, Const, que tu es un. Vous l'étiez tous aussi, et vous êtes tous les trois. Nous ne savons pas nécessairement ce que c'est. Nous savons que nous travaillons avec un tableau, donc nous devons utiliser la syntaxe de type de taux. Mettons aussi l'arrestation ici d'autres films, alors ne l'appelons pas vous aider 12 et 3. Faisons ce film 12 et 3 est égal à Luke dot films. Maintenant, cela ne va rien faire parce que nous n'utilisons pas le film 123 ou les films et aussi Constance Block portée à cela donc nous ne pouvons pas vraiment l'utiliser au-delà de cette fonction particulière. Mais on pourrait dire Quel est le deuxième film de la console de film à quoi que ce soit . Et le voilà. C' est le film. Alors allons de l'avant et copions l'emplacement du lien. C' était filmé numéro six et identité. Ça serait, euh, on regarde Luke Skywalker ici des films pour 6317 263 un sur sept. Donc film pour avoir une idée de six et on peut voir ça juste ici qui était film à. Nous l'avons fait avec un rayon de structuration, et cela nous a amenés à cela. Et puis nous pourrions effectuer une requête de récupération à ce sujet si nous le voulions aussi, une autre chose que nous pourrions faire est de laisser ah, commentons cela parce que c'est un peu soigné, mais pas utile. Je vais changer ça aussi. Nous pouvions parcourir chaque film et obtenir chacun de ceux-ci afin que nous puissions dio luke dot films dot pour chaque passage d'une fonction. Ce sera l'URL, puis le point du conseil d'index enregistre l'index et puis le comte , ce ne sera pas dans un ordre particulier va être quel que soit l'ordre qu'un p je retourne une augmentation, garder leur ordre. Donc, cela va dire à 6317 Allons-y, économisez rafraîchissement. Et maintenant, nous avons 26317 dans le même ordre que le swap edotco nous a donné. Mais dans notre boucle, nous avons l'indice zéro à quatre dans l'ordre. Maintenant, si vous vouliez vraiment avoir de la fantaisie avec ça, ce que vous pourriez faire c'est que vous pourriez prendre ceci pour chacun et vous pourriez aller chercher chaque film ici et obtenir ces données ainsi et ainsi de suite et ainsi de suite. Et pendant que vous le faites, vous étiez en train de construire votre propre formulaire d'application d'une seule page. En gros, vous utilisez juste un A P I pour récupérer des données. Maintenant, c'est un concept assez complexe en JavaScript. Je ne m'attends pas à ce que tu le saches tout de suite. Je ne m'attends même pas à ce que tu le saches pendant un certain temps. Mais il est bon de savoir que cette option est là. Vous allez voir ça un peu, surtout aller de l'avant dans les années à venir. Fetch est partout. C' est un excellent moyen d'utiliser les requêtes Ajax et juste pour la postérité. Faisons en sorte que nous sachions ce qu'est Ajax. Ajax est une route d'évier, ce javascript et XML, ou dans ce cas, c'est Jason. Donc un juge, je suppose. Age J A. J A l'origine, il a été conçu pour XML. Donc là, vous leçon rapide sur Ajax et chercher et promesses. Nous utilisons la structuration. Nous avons utilisé un pour chaque boucle. Nous obtenons maintenant super javascript e avec un A p I. C'est super cool à nouveau. Je ne m'attends pas à ce que vous sachiez tout cela, alors n'ayez pas l'impression que vous devriez être submergé par nous tous. N' hésitez pas à donner un coup de feu pour bricoler avec elle ? Absolument. Mais tu sais quoi ? Si ça ne clique pas dans votre cerveau tout de suite, c'est bon. Il finira par le faire. Une fois que vous êtes satisfait de cela, allons de l'avant et regardons la prochaine vidéo. 56. Fonctions de flèche: en JavaScript moderne. Il y a cette idée d'une fonction de flèche et vraiment, ce qu'il s'agit d'un type spécial de fonction. Ceci est relativement nouveau et est un peu différent des autres types de fonctions que nous avons appris dans ce cours. Donc, juste comme un petit résumé rapide, une fonction régulière a une fonction de mot-clé et puis un nom, et puis soit pas de paramètres, soit un paramètre ou plusieurs paramètres, et puis elle retourne, retourne quelque chose, il renvoie une chose. Il y a aussi des fonctions anonymes, donc vous pouvez le mettre dans, comme un nom de variable. Donc, comme Const, Caleb est égal à fonction. Retourne des trucs, Caleb. Et puis nous pourrions toujours envelopper ces dans et je f e et immédiatement invoqué fonction. Donc ça va fonctionner automatiquement, et nous pourrions faire la même chose ici. C' est donc un résumé rapide de ce que nous avons déjà appris sur les fonctions. Maintenant, en JavaScript, chaque fois que vous avez le droit de fonctionner, tout comme lorsque vous avez un objet, vous avez accès à ce mot-clé même chose avec une nouvelle classe et une méthode à l'intérieur de celui-ci. Donc, vous avez un nom funk ici, vous avez accès à cette même chose dans un objet, donc CONST Person est égal au nom funk ici, nom de fonction ici, et vous avez accès à cela. Et ce que cela signifie vraiment, c'est qu'il fait référence à cette fonction. Cela signifie que cette classe, cela signifie cet objet. Donc, quoi que ce soit le définissant, c' est ce que signifie ce mot clé lorsque nous commençons à parler de fonctions aérodynamiques qui n' existent plus. Donc, lorsque nous utilisons une fonction de flèche, la grande différence entre une fonction étroite et une fonction irrégulière est autre que la syntaxe semble différente. Il n'a pas non plus ce point quel que soit le nom ou ce point quelle que soit la fonction de nom n'a pas que ce n'est pas lié. Non, La bonne chose à ce sujet une fonction de flèche est, si cela n'est pas lié à votre fonction ou à l'objet définissant qui signifie JavaScript plus rapide. Si vous n'avez pas besoin de réaffecter constamment des variables ou de stocker des choses en mémoire , votre ordinateur peut réellement fonctionner plus rapidement. Maintenant, ce n'est pas sensiblement plus rapide pour un humain, Mais si vous avez 10 millions de lignes de JavaScript, oui, ça pourrait devenir un peu plus rapide, un peu plus rapide, en fonction de la logique que vous écrivez. Jetons un coup d'oeil à une fonction de flèche régulière ici, alors disons juste saluer. Faisons qu'un peu plus grand soit égal à l'ouverture et à la fermeture des parenthèses. Donc, nous avons nos supports là-bas. Flèche grasse. C' est pourquoi nous l'appelons une fonction de flèche, puis accolades. Non, tu dis juste bonjour monde. Et pour exécuter cela, nous pourrions juste saluer entre parenthèses. Allons-y. Chargez cela dans notre navigateur. J' utilise Firefox. J' ai frappé Refresh, et ça ne fait rien. Allons-y et faisons-le ici de toute façon, et ça va dire d'accord. La raison pour laquelle cela ne fait rien, c'est parce qu'il retourne quelque chose. Donc, si on dit Const. High est égal à saluer la page de rafraîchissement, dire bonjour et il dit aussi bonjour monde. Donc, c'est juste comme une fonction régulière. C' est juste un peu différent à ce stade. Donc, c'est dire que c'est votre fonction. Nom est égal à une fonction de flèche, donc il n'y a pas ce mot-clé qui n'existe pas ici ce point tout ce qui n'existe pas et il va juste exécuter ceci maintenant. Et si vous vouliez un paramètre dans votre puits, si vous vouliez un paramètre ici, vous pourriez dire quelque chose comme le nom. Bonjour. Et puis allons de l'avant et utilisons un littéral de modèle. Donc, les tiques arrière. Bonjour, nom et journal de points de console. Salut page de rafraîchissement. Et ça dit, 00 c'est indéfini. Alors que c'est parce qu'on n'a pas mis de nom là-dedans. Allons-y et mettons mon nom Caleb. Bonjour, Caleb. Salut, Zephyr. Et ainsi de suite et ainsi de suite et ainsi de suite. Nous pourrions également mettre un autre paramètre ici appelé un lieu. Alors, euh, bienvenue à et ensuite lieu et ils n'ont pas besoin d'être nom ou lieu. Ils peuvent être tout ce que vous voulez. On va mettre une place ici à Atlantis, un endroit où mes chats détesteraient vraiment être parce que c'est aqueux. Mais ça dit Bonjour, Zephyr. Bienvenue à Atlantis. Et c'est ainsi que nous aurions droit dans une fonction de rangée. Maintenant, annulons ce dernier exemple ici. Et allons-y et débarrassez-vous de ces crochets. S' il n'y a qu'un seul paramètre ici, nous n'avons pas besoin de parenthèses. C' est seulement si nous avons deux paramètres ou plus que nous avons besoin de ces parenthèses dans votre nous n'avons que le seul donc nous allons dire la fonction. Greet a un paramètre appelé nom, et puis il va exécuter tout ce qui est à l'intérieur de ces accolades et donc nous pouvons aller de l'avant et nous débarrasser de cela. Et changeons ça à Henry. Et ça va juste dire bonjour, Henry. Maintenant, nous pouvons vraiment obtenir Mawr mince avec nous. On n'a pas besoin de ça ici. Si ce que vous faites est juste de rendre quelque chose tout de suite, nous pouvons vraiment nous en débarrasser complètement. Et donc cela semble un peu bizarre, mais c'est une fonction manque le paramètre, et cela va retourner tout ce qui est actuellement ici. Et donc, quand je rafraîchis ma page, cela fonctionne toujours. Et puis pour plusieurs paramètres encore, on pourrait juste mettre en place ici. Bonjour. Je ne dirai rien de gentil. Endroit intéressant. Rends ça un peu plus petit. Donc, la fonction greet a un paramètre de nom paramètre place va dire bonjour. Quel que soit le nom, quels que soient les lieux. Et Henry est au Canada. Et donc bonjour, Henry Canada. Et c'est donc, pour la plupart, tout ce qu'il y a vraiment à une fonction de flèche, et c'est vraiment la même chose que dire fonction. Greet a un nom dans un endroit. Retour. Eh bien, c'est vrai. C' est l'ancienne façon. Bonjour, Nom, Nom, s'il vous plaît. C' est donc l'ancienne façon d'écrire une fonction avec l'ancienne façon de contaminer les chaînes. Et c'est la nouvelle façon de le faire. Vous allez voir ces deux méthodes partout dans le monde, donc c'est bon d'être familier avec les deux. Mais c'est vraiment tout ce qu'il y a à savoir sur la fonction flèche. Cela et ce nom de point est égal à nom. Et puis vous pourriez faire consul, ne pas enregistrer ce nom de point si vous le vouliez. Cela n'existe pas ici. Il n'y a pas ce mot clé. Ce n'est pas lié. Maintenant, regardons comment cela va fonctionner. Peut-être un quatre boucles chacune. Commentons ceci. Je dois vraiment changer ça. Commentons ceci et obtenons une liste de choses ici. Donc, euh, créons un tableau. Nous allons créer un const A r r. Est égal à JavaScript, python PHP. Et puis dans le code V, je vais juste taper pour chaque Nope pour chaque onglet hit et va dire, Quel est votre premier tableau quand mon lever un R C'est ceci ici et puis pour chaque élément . C' est une grosse flèche. C' est une fonction aérodynamique de graisse. Donc nous disons cet élément ici, quoi que ce soit, nous pouvons maintenant travailler avec. Alors passons des éléments au langage, car ce sera JavaScript, python ou PHP. Et faisons la console, ne connectez pas la langue et actualisez votre page Transcript. Python patri. Alors on y va. Nous commençons à remplacer la fonction régulière par une fonction aérodynamique de graisse. Si vous n'avez pas besoin du mot-clé this, vous pourriez aussi bien juste d'utiliser la fonction de flèche de graisse. Techniquement, c'est moins de code et moins de charge sur votre ordinateur. Allons de l'avant et créons un temps défini en utilisant une fonction de flèche afin de définir le temps d'attente. C' est comme ça qu'on l'a écrit avant, et on va dire Attendez une seconde. Eh bien, nous n'avons pas besoin de le faire maintenant parce qu'il n'y a pas de paramètres ici. Qu' est-ce qu'on fait ? On ne peut pas faire ça. Au lieu de cela, nous passons un ensemble vide de paramètres et puis nous disons, consul dot log yea, j'ai attendu Jascha Python PHP et puis, oui, j'ai attendu. Rendons ça un peu plus dramatique ici et c'est du spam. Le conseil l'attend. Je suis là, c'est. Oui, j'ai attendu encore et encore et encore et ce sont vos fonctions d'Errol. Ok, donc je suggère de nous donner une chance. Vous allez écrire une bonne quantité de fonctions aérodynamiques à l'avenir si vous allez être un développeur JavaScript et donc vous pourriez aussi bien vous y habituer Maintenant, la bonne chose est, il est en fait très facile de s'y habituer. Une ligne au lieu de plusieurs lignes est toujours très agréable. Et comme toujours, n'oublie pas que je suis là. Si vous avez des questions, laissez vos questions, commentaires ou préoccupations vers le bas Boogaloo et je serai heureux de vous aider 57. Ajouter et supprimer des cours CSS: Jetons maintenant un coup d'oeil à la façon dont nous pouvons ajouter et supprimer des classes CSS. Deux éléments dans notre modèle d'objet document. Donc, en avant et le développement Web, nous comptons très fortement sur cette classe est égale à, et puis quels que soient les noms de classe air ici. Alors peut-être que nous avons un nom de classe ici de rouge, bleu et blanc, je suppose que nous pouvons changer la couleur du texte pour lire la couleur du texte en bleu couleur orteil blanc . Comment pouvons-nous réellement les supprimer ? Eh bien, tout d'abord, pour mettre en place cette démo, nous allons devoir créer un style CSS. Donc, la couleur rouge point de style est égale à la lecture point bleu va être bleu. Et ne faisons pas blanc parce qu'il va y avoir un fond blanc conduit à la place faire noir. Aucun noir ne fonctionnera pas non plus, parce que le noir est par défaut. Allons de l'avant et y aller avec le vert. Débarrassez-vous de nos cours. Allons de l'avant et rafraîchissons votre page. Et pourtant, bien sûr, rien ne se passe. Nous n'avons pas réellement ajouté ces classes. Si nous avons ajouté la lecture, nous allons voir notre technologie couper leur couleur de texte tourne à lire. Débarrassez-vous de cela et ce que nous devons faire est de saisir cet élément en utilisant une sorte de sélecteur de requête . Disons qu'on a une const ici. H un est égal au sélecteur de requête point de documents et nous voulons juste saisir cet âge un. Maintenant, ce que nous pouvons faire est H une liste de points de classe de points, et nous pouvons ajouter C'est un bleu. Et donc cela va saisir la liste des cours. Actuellement, il n'y a rien là-dedans, et ça va y ajouter du bleu. Alors, continuons à sauver. Et dès que j'ai frappé Refresh. Ça va devenir bleu comme ça. En fait, on en a déjà un ici. On a accès à ça. Nous pouvons faire H un le point de liste de classe annonce Non, n' ajoutons pas Nous allons supprimer le bleu OK, changements de texte. Encore une fois, Faisons H un point de liste de classe Ajouter rouge Perfect. Allons de l'avant et ajoutons du bleu ainsi et nous pouvons voir quand nous regardons la note h une qu'il a la classe rouge et bleu dedans. Maintenant, la raison qui est bleu est à cause du style CSS. Donc le rouge est venu en premier, puis le bleu a été le dernier exécuté. Donc naturellement, CSS va dire que je vais écouter la dernière règle dont on m'a parlé. Je vais utiliser celui-là. C' est la raison pour laquelle il fait ça. Si nous avions aussi dit que chaque point de liste de classe ajouter vert, qui est le dernier sur sa liste ici, il devient vert. Bon, que se passe-t-il si vous voulez ajouter plusieurs classes ? Eh bien, vous pourriez faire H une liste de points de classe de points annonce bleu, rouge, vert, ainsi de suite et ainsi de suite. Ça ne va pas marcher. Cela va probablement vous jeter une erreur. Jetons un coup d'oeil à ça. Oui, chaîne d'erreur de caractère non valide contient un caractère non valide. Fondamentalement, il y a ça. Il y a un espace là-dedans et il ne devrait pas y en avoir au lieu de cela, ce que nous faisons c'est que nous lui passons une liste infinie de paramètres. Le 1er 1 va être bleu, puis le 2ème 1 va être lu maintenant. Cela ne fonctionnera pas nécessairement parce qu'ils sont déjà définis. Alors allons de l'avant et retirons ceux-ci. Retirons le vert et le bleu et il devrait redevenir rouge. Bleu vert. Et là, c'est notre CSS. Notre H devient rouge et juste comme ça. Et c'est ainsi que vous ajoutez et supprimez. Et si vous vouliez supprimer, juste comme un exemple rapide, fois de plus la liste de classe point ad un paramètre bleu second paramètre vert. CSS va dire que celui qui vient en dernier, je vais honorer le plus, Donc cela va devenir vert, comme prévu. 58. Projet final JavaScript: d' accord. C' est le moment où nous allons travailler sur notre projet final, et ce projet final ne va pas utiliser tout ce que nous avons appris, mais une bonne partie de toutes les choses vraiment importantes. Et donc votre projet final devrait le faire. Chaque fois que vous mettez votre souris sur une de ces lettres, il va juste animer un peu. Cela va être un mélange entre CSS et JavaScript. Si vous n'êtes pas super fort et CSS, c'est bon. Vous n'avez pas à le faire animer nécessairement comme ça. Vous pouvez le faire avoir ah, bordure ou changer la couleur de la police ou quelque chose comme ça. Ça n'a pas besoin d'être aussi fantaisiste. Je l'ai fait ici. Maintenant, pour commencer avec ça, j'aimerais que vous créiez un titre. Donc, créez du texte sur votre page. Je viens d'écrire Final Project pour le mien. Sélectionnez le titre en utilisant votre javascript et puis vous allez vous demander. Divisez le titre par tous ses caractères. Vous allez vouloir saisir chaque caractère ici, et puis vous allez vouloir fondamentalement rejoindre tous ces caractères avec un peu de HTML autour d'eux et ensuite vous pouvez sélectionner chaque caractère par la classe qui est autour d'elle et ajouter un écouteur d'événement pour chacun d'eux. Donc, vous allez devoir utiliser quelques boucles ici. Et puis chaque fois que vous mettez votre souris sur un, vous devriez être en mesure de changer le style de la classe. Donc, ajoutez ou supprimez à nouveau une classe. Cela va nécessiter un peu de CSS. Mais hé, tu sais quoi ? Si vous n'êtes pas super fort avec CSS, il n'a pas besoin d'être fantaisie. Il doit juste être fonctionnel. C' est ce que javascript est. Dysfonctionnalité JavaScript. CSS est la beauté, donc j'ai mélangé les deux ici, mais nous avons vraiment besoin de se concentrer sur la fonctionnalité. Donc c'est mon affichage final. C' est exactement ce que j'ai eu ici, et j'aimerais que vous essayiez d'écrire ceci par vous-même pour cela parce que c'est assez complexe. Certainement se sentir libre de référencer les autres vidéos à nouveau, ou l'un des codes source certainement utilisé Google ou Stack Overflow ou Mozilla Developer Network, MD fin comme toute sorte de référence. Vous devez faire cela, prendre beaucoup de temps que vous avez besoin et essayer de travailler vous-même. Donc, dans un instant, je vais rendre l'écran noir. Et j'aimerais que tu mettes la vidéo en pause et que tu lui donnes une photo. Essayez de faire de votre mieux pour le faire par vous-même. Maintenant, évidemment, si vous êtes coincé, vous pouvez juste appuyer sur CV sur la vidéo et vous pouvez voir comment je le fais. Je vais vous montrer exactement comment je suis arrivé à ce point pour que je puisse le faire. Alors allez-y, mettez la vidéo en pause et donnez-la une photo. Bon, commencer avec mon point de vue sur cette solution particulière. Donc, la première chose que nous devons faire est de créer un titre. Je vais juste utiliser le H ici appelé Final Project. Alors que celui-là est fait. Allons-y, débarrassez-vous de ça de notre liste. Ensuite, sélectionnez le titre en JavaScript, nous allons donc devoir sélectionner ce titre. Alors allons de l'avant et créons une constante. Chacun est égal à documents point sélecteur de requête se porte verrouillée, et je vais juste sélectionner le H. C' est le seul H sur la page donc je peux le faire. Ensuite, je veux attraper tous les personnages du titre. Donc, je veux avoir tout ça. Alors allons de l'avant et créer une nouvelle constante ici appelée texte et cela va être 81 points texte intérieur sur cela. Je veux diviser tout le personnage du titre, donc je veux saisir chacun. Et donc ce que je veux faire ici est transformé en un tableau. Donc, je vais utiliser le point split et on va se diviser sur absolument rien. Et débarrassons-nous de celui-là et celui-là. Et maintenant, nous devons rejoindre chaque lettre avec un cours. Et donc nous devons parcourir tout ce texte et pour chacun ici, nous devons mettre une sorte de classe autour. Donc, ce que je pense est la lettre de classe J fractionnée afin que je puisse le sélectionner avec javascript quelque chose comme ça, et je vais passer par chacun. Donc, il va y avoir une travée autour de la travée F A autour de l'œil et un l p r o j E C T. Et je vais aussi vouloir ne pas inclure l'espace. Alors comment on va faire ça ? Eh bien, nous allons avoir besoin de créer un nouveau HTML à mettre ici. Certains créeraient une nouvelle variable appelée HTML, et ce sera juste une chaîne vide pour l'instant. Ensuite, je veux regarder à travers tout le texte. Donc, ce n'est pas vraiment texter ces lettres et faisons des lettres point pour chaque lettre que nous avons, nous avons une seule lettre et nous allons utiliser une grosse flèche ici. Et on pourrait travailler avec cette lettre. Donc maintenant, nous pouvons dire que HTML est égal à HTML plus span. La classe est égale à ce que les classes vont être. On ne sait pas encore. Quelle que soit la lettre ouverte, je vais le remplir avec L pour l'instant. Et c'est ce dont il a besoin pour ressembler à quelque chose comme ça. Maintenant, nous devons mettre les données ici. Je ne veux pas faire beaucoup de concaténation ici. Je veux utiliser un littéral de modèle, et la lettre peut juste être la lettre variable. La classe ici va être lettre et lettre J. Donc, la lettre va être ce que j'utilise CSS pour sélectionner et la lettre J va juste être un sélecteur JavaScript, donc je suis en quelque sorte de garder ces deux mondes séparés. Maintenant, à ce stade, je peux sélectionner mon H à nouveau et faire le point interne html est égal à html. Allons-y et ouvrons sa page et rafraîchissons Ouvrez notre consul et où est notre H ? Regarde ça. Nous avons une portée autour de chacun avec des classes de lettres et de lettres J dedans. Donc c'est vraiment bon. C' est exactement ce qu'on veut. Malheureusement, il a aussi l'espace là-dedans. Donc, nous devons détecter ça. Donc, si la lettre n'est pas égale à un espace vide, alors nous pouvons définir une sorte de classes. Les classes sont égales à vous quelque chose. Et aussi nous allons définir la classe apparaît classes est égale à par défaut va être vide. Et puis si la lettre est autre chose qu'un espace qui est également ajouter ces classes et vous-même à la lettre J et nous voulons juste remplacer cela par des classes. Et c'est une portée de bloc aussi. Ces crochets ici donc je n'ai pas à m'inquiéter de cette fuite en dehors de ma portée pour le pour chaque boucle. Allons-y, rafraîchissez notre page. Et on y va. On n'a pas de cours là-dedans. Il y a d'autres façons de le faire aussi. Vous pourriez dire ça avec quelques ajustements supplémentaires, mais nous ne le ferons pas. D' accord, quelle est la prochaine sur la liste ? Nous devons ajouter un écouteur d'événement à chacun d'entre eux. D' accord, donc avant de faire ça, nous devons sélectionner chacun d'entre eux. Maintenant, ils ont tous une chose en commun, c'est cette classe. Quoi ? Ils auront les deux classes en commun, mais nous allons utiliser le sélecteur de lettres Js, alors allons-y. Une nouvelle lettre const Js verte est égale à des documents, sélecteur de requête néerlandais tout parce que nous voulons tous d'entre eux et nous allons sélectionner R J lettre . Maintenant, nous devons parcourir chacun de ces éléments et ajouter deux écouteurs d'événement un pour quand nous mettons notre bouche sur une lettre et un pour quand nous retirons notre plus de la lettre. Donc, nous allons créer un pour chaque boucle, donc les lettres Js point pour chaque que nous allons passer dans le nœud, et la note que nous obtenons ici est chaque élément de lettre Js unique. Donc, c'est une note. C' est un noeud. C' est un noeud de noeud. Nous ne sélectionnons pas ce noeud de noeud. Non, non, non. Et sans aucun doute. Donc, nous disons que pour chacun de ces nœuds ont saisi la note individuelle et faire quelque chose avec elle. Et c'est à ce stade que nous pouvons ajouter nos écouteurs d'événements. Faisons simplement défiler cela, aucun point ajouter l'écouteur d'événement et lequel voulons-nous ? Nous voulons passer la souris chaque fois que nous mettons notre bouche sur l'écouteur d'événement, et il va avoir un fonctionnement ici avec l'événement, et c'est juste la console. Connectez cette console, connectez ce point Intertek, donc ça va se console. Enregistrez la lettre maintenant la raison pour laquelle nous utilisons la fonction ici au lieu d'une fonction aérodynamique Eh bien, nous utilisons une fonction flèche ici, mais nous utilisons une fonction régulière ici est parce que nous avons besoin de cela. Nous avons besoin de cela pour se référer au nœud, qui vient d'ici. Allons-y, économisez, donnez-nous un rafraîchissement. Ouvrez. Notre consul et notre sélecteur de requêtes n'est pas une chose. sélecteur de requête est une chose. Nous y allons et mettons le plus sur le projet final et vous pouvez voir qu'il commence à énoncer dans mon conseil. Donc c'est parfait. C' est ce qu'on veut. Maintenant, nous devons en ajouter un autre ici pour la souris dehors, la souris dehors. Donc, chaque fois que nous déplaçons notre souris hors de cet élément particulier et disons simplement, allons-y, rafraîchissons et mettez-le sur le P out de out f out. Donc ça marche parfaitement. Donc maintenant, nous avons des écouteurs d'événements sur chacun d'eux. La dernière chose que nous devons faire, c'est sur notre bouche. La lettre devrait animer en utilisant CSS, donc nous devons ajouter et supprimer des classes ici. Donc, ici, nous pouvons faire cette liste de points de la liste de classes de points, et je vais ajouter une classe appelée Active et sur la souris dehors. Nous allons supprimer cette classe et regardons comment cela fonctionne. Ouvrons notre page d'actualisation de l'inspecteur, et chaque fois que je mets ma souris ici, vous pouvez réellement voir que les classes changent en fait. Donc maintenant, la dernière chose que nous devons faire est de faire la souris sur la lettre réellement animer en utilisant CSS. En ce moment, nous pouvons utiliser la classe appelée lettre, et si nous passons dessus, il y a aussi une classe là-bas appelée Active, donc nous pouvons utiliser les deux ensemble. Donc je vais m'en débarrasser parce que ce n'est plus nécessaire. Et nous allons d'abord écrire quelques premières choses CSS. Je vais vouloir changer des trucs de corps. Je veux changer la couleur de fond afin que ce ne soit pas juste un blanc droit. Faisons le blanc cassé. Ensuite, textons le centre de la ligne parce que je veux que tout le texte sur la page soit centré. Suivant. Allons de l'avant et sélectionnez lettre et ajoutons un style par défaut à chaque lettre. Disons que la taille de police qu'il va être assez grande économiserait 90 pixels. La famille Forint. J' ai déjà un front personnalisé chargé ici, et c'est Pacific. Disons que la famille de polices sera Pacific. Oh, ou cursive. Si elle ne charge pas de Google, va juste charger quelque chose de malédiction d'affichage dans les blocs de ligne que nous pourrions faire certaines de ces animations fonctionner correctement. Changeons la couleur, aussi 999 Rafraîchir. Ok, ok. Ça arrive bien maintenant. Nous devons ajouter une classe active, donc point lettre point actif. Et nous allons simplement transformer cette échelle de transformation 1.5 rendre la lettre seulement 50% plus grande. Et c'est aussi tourné, je suppose que faire tourner 20 degrés. Maintenant, changeons la couleur pour quelque chose comme le vert. Oh, regarde que c'est d'arriver là. Ok, donc ça a l'air un peu agité, mais on pourrait nous arranger assez facilement avec du CSS. Allons de l'avant et ajoutons un trans ish en transition. On va tout dire parce que je vais être un peu paresseux ici. Disons qu'ils prendront 250 millisecondes pour se détendre. Il est à l'intérieur et à l'extérieur. Rafraîchissez notre page. Je le suis. Regardez ce projet final terminé. Jetons un coup d'oeil à ce que j'ai fait. Encore une fois, j'ai attrapé le h. C' est ce type ici, a saisi toutes les lettres à l'intérieur, et puis je l' ai divisée en se basant sur absolument rien. Donc j'ai séparé chaque lettre ici en un tableau. J' ai ensuite dit pour chaque lettre dans ce tableau, passons à travers et laissons un stylo, un peu d'orteil html une chaîne. Maintenant, nous aurions pu utiliser un tableau et utiliser l'articulation point aussi. C' est une autre façon de procéder. J' ai juste utilisé une chaîne régulière. Nous utilisons un littéral de modèle ici avec quelques variables qui ont rendu notre nation de cap agréable et lisse. Puis j'ai dit, Hey, quand tu as fini, ce changement que l'orteil interne html de chacun, peu importe ce qui est sorti de la boucle. Et puis j'ai dit, OK, eh bien, parce qu'il y a cette lettre Js dedans pour chaque lettre. Allons-y, attrapons tout ça. Ensuite, passons en boucle chaque et là nous avons chaque note. Chaque élément qui a une lettre Js en tant que classe est sa propre note. Et donc ce nœud a maintenant un écouteur d'événement pour la souris sur. Et chaque fois que nous passons la souris comme la classe d'actif et il y a un autre écouteur d'événement. Donc, chaque fois que nous sortons la bouche, il supprime la classe des actifs. Enfin, je l'ai fait paraître joli avec un peu de CSS. Donc juste peu de style de fond de corps là-bas. La lettre elle-même a une taille de police plus grande Ah, affichage de la famille de points personnalisés dans le bloc de ligne parce que nous utilisons une plage. Nous devons donc l'utiliser dans l'ordre. Teoh utiliser transformer correctement, changer la couleur du téléphone, la couleur de police par défaut et lui a donné une transition. Donc, il va prendre 0,25 seconde pour passer dans et hors de son animation, et son animation vient de son état actif. Donc, chaque fois que la lettre, chaque fois qu'il y a un élément qui a la classe de lettre et qu'il a également une classe d'actif même temps, nous allons la transformer pour être 50% plus grand, tourner 20 degrés et changer le couleur de la police au vert, fait et fait. Enfin, nous vérifions notre conseil. Nous nous assurons qu'il n'y a plus de journaux, donc nous ne sommes pas consul journalisation quoi que ce soit, car ce n'est pas nécessaire. Et aussi il n'y a pas d'avertissements. n'y a pas d'erreurs. n'y a pas d'info ou de débogage. Tout semble sain et heureux. Nous avons terminé notre projet final ensemble, et c'est mon point de vue sur la solution. Il y a encore plusieurs façons différentes de le faire, mais cela utilise beaucoup des plus grands morceaux de javascript que nous avons appris la gorge ce cours et enfin pour tout ce que vous partagez les développeurs là-bas ? J' aimerais vraiment si vous pouviez partager votre code, prendre une capture d'écran de ceci et le mettre dans un projet de partage de compétences. Ce sera génial pour moi de voir le genre de progrès que vous faites, mais je peux aussi vous aider avec des conseils et des commentaires à l'appui. Alors n'oubliez pas de mettre à jour votre projet JavaScript, puis je vais jeter un coup d'oeil. 59. Résumé Javascript pour les débutants: d' accord. Tu l'as fait. Tu as traversé ce cours. C' est vraiment une grosse affaire. Assurez-vous de vous féliciter. Achète-toi quelque chose de bien. Achète-toi un bon repas. Faites quelque chose pour vraiment vous récompenser parce que vous avez traversé plus de 50 vidéos de JavaScript et, ah, ça vaut la peine de vous récompenser. Maintenant. Nous avons appris beaucoup de JavaScript, mais honnêtement, c'est juste une introduction à JavaScript. Il y a un monde JavaScript beaucoup plus grand là-bas, y compris des choses comme NPM du gestionnaire de paquets de nœuds ou des frameworks comme React and view dot Js ou bibliothèques comme Slick Dodge. Quant à la création de cellules de soins étonnantes ou J Query pour la création et l'écriture de JavaScript qui est rétrocompatible. Donc, vous n'avez pas à vous soucier que JavaScript ne fonctionne pas sur les anciens navigateurs. Il y a aussi beaucoup d'outils que vous pouvez installer avec, comme node, gestionnaire de paquets et node.js. Et il peut compiler votre javascript dans ce que j'appelle JavaScript factice, où fondamentalement vous, juste fantaisie JavaScript moderne, et il le compile dans un fichier différent que les anciens navigateurs, comme Internet Explorer 11 peuvent comprendre. Donc, si vous aimez le monde du javascript et que vous voulez continuer à approfondir de plus en plus . Votre prochain pari est probablement de continuer à apprendre JavaScript. Donc, si vous étiez intéressé à continuer d'apprendre le javascript et de devenir un jet JavaScript vraiment, vraiment fort , puissant, je puis vous allez probablement vouloir commencer à apprendre un peu plus des choses avancées obtenir dans les vrais détails grossiers de toutes ces choses différentes que nous avons appris toutes les différentes méthodes que vous pouvez utiliser, comme des chaînes et des tableaux et des choses comme ça. Tous les différents auditeurs d'événements, à droite, plus de classes, des choses comme ça. Et puis vous allez vouloir sauter dans probablement un gestionnaire de paquets de notes afin que vous puissiez utiliser code d'autres personnes dans vos projets et ensuite peut-être commencer à apprendre un point de vue du réacteur Js et que vous avez votre objectif était d'apprendre javascript afin que vous puissiez être un front et développeur web . Eh bien, vous avez maintenant assez de compétences que vous pouvez réellement aller et postuler pour être un développeur frontal et Web . Vous savez, beaucoup de JavaScript sortis de la boîte. Et c'est une très bonne longueur d'avance. Encore une fois, félicitations pour avoir terminé tout ce cours. Oui. S' il vous plaît assurez-vous de vous récompenser vous-même. Il est vraiment important pour vous de vous récompenser pour tout le travail que vous avez accompli. Je m'appelle Caleb disant que vous pouvez me trouver sur Internet. Mais plus important encore, si vous avez des questions, des commentaires, préoccupations ou des commentaires, vous pouvez toujours les laisser dans la section des commentaires ci-dessous. J' ai lu tout ce qui arrive, et j'essaie de répondre à tout le monde en temps opportun. , Encore une fois, merci d'avoir suivi ce cours. J' espère que vous avez beaucoup appris. J' espère que vous avez passé un bon moment à apprendre du JavaScript. Vous avez de bonnes mains sur l'expérience, et enfin, j'aimerais vous voir dans le monde entier. Alors n'oubliez pas, vous pouvez rejoindre le groupe Facebook, le groupe d'apprentissage du code Facebook. Vous pouvez toujours laisser des commentaires ou des questions en bas de vous. J' ai lu tout ce qui arrive et j'essaie d'être aussi utile que possible. Et j'espère que vous avez passé un bon moment dans ce cours.