Les bases du développement web : Javascript

1. Introduction: Bonjour et bienvenue à Web Development Fundamentals : JavaScript. Je suis Chris, Je suis un développeur web autodidacte et créateur trois des cours ici sur Skillshare, Comprendre le développement Web, Comment construire efficacement des sites Wordpress avec Divi, et plus récemment, Web Development Fundamentals : HTML et CSS. Ce cours est la prochaine étape de notre série de principes de développement Web. Dans la classe précédente, nous avons expliqué comment créer des pages Web avec HTML, puis les styliser avec CSS. Dans cette classe, nous allons apprendre à ajouter plus de fonctionnalités interactives à nos sites Web et applications web avec JavaScript. JavaScript, bien sûr, est l'une des trois technologies de base du web mondial. Il est dit être le langage de programmation le plus populaire au monde et c'est le langage de programmation pour le développement web frontal depuis le début du web. Donc, quel que soit le chemin que vous choisissez de suivre, en tant que développeur web, vous aurez besoin d'une certaine compréhension de JavaScript et plus précisément, comment il se branche sur vos pages Web pour créer sites Web interactifs et Web comme beaucoup de celles que vous utilisez aujourd'hui. Donc, si vous êtes prêt à plonger et apprendre les principes fondamentaux du développement pour le web avec JavaScript, continuez à regarder et je vous verrai dans la prochaine vidéo. 2. Vous aurez besoin de: Donc, avant de commencer, il est important que nous parlions des connaissances requises. Comme je l'ai mentionné dans la dernière vidéo, ce cours est la prochaine étape de notre série de principes fondamentaux de développement web. Donc, si vous êtes nouveau dans le développement web, je vous recommande certainement d'aller prendre ma dernière classe Web Development Fundamentals : HTML & CSS. Sinon, si vous savez déjà comment créer des pages Web, vous êtes au bon endroit pour apprendre à les rendre interactives. Maintenant, pour ceux d'entre vous qui ont suivi ma dernière classe sur HTML et CSS, je ne veux pas trop me répéter en ce qui concerne les deux outils essentiels, qui sont un navigateur web et un éditeur de code. Il est probable que si vous avez déjà fait du HTML et du CSS avant, vous comprenez ce que sont ces outils et comment les utiliser. Sinon, je recommande de me diriger vers la dernière classe sur HTML et CSS, et de passer en revue la leçon « ce dont vous avez besoin » sur cette classe. Fondamentalement, en dehors d'une certaine connaissance du HTML et du CSS, d'un navigateur Web et d'un éditeur de code, vous êtes prêt à entrer directement dans l'apprentissage du JavaScript. Donc, je te vois sur la prochaine vidéo. 3. Introduction à Javascript: Donc, avant de commencer à travailler avec du JavaScript, parlons un peu de ce qu'est JavaScript et comment il s'intègre dans le développement web. Tout d'abord, JavaScript est simplement un langage de programmation. Qu' est-ce qu'un langage de programmation ? Eh bien, selon Wikipédia, un langage de programmation est un langage formel qui spécifie un ensemble d' instructions qui peuvent être utilisées pour produire différents types de sortie. Pourquoi est-ce que je parle de ça ? Eh bien, il est important de différencier un langage de programmation de ce que sont les deux autres langages qui composent le frontend ; HTML et CSS. HTML est un langage de balisage, et CSS est un langage de style. Je sais que cela pourrait sembler abstrait mais il y a certaines choses que les langages de programmation font tous que HTML et CSS ne le font pas. Je parle de calculs explicites, de boucles et de fonctions. Pour nos besoins avec le développement web, tout ce que vous devez savoir sur les langages de programmation, c'est que nous en avons besoin pour rendre nos sites web interactifs. Donc, afin de partager avec vous quelques exemples de ce que JavaScript peut faire, j'ai une page Web de base ouverte ici, que nous allons réellement créer dans une vidéo ultérieure. Mais pour l'instant, on a juste un cap, on a un bouton, et on a un div vide. Ce que j'ai dans mon fichier texte ici est quelques instructions JavaScript que j'ai préparées plus tôt que nous pouvons utiliser pour manipuler cette page. Donc, si je vais dans la console ici, je peux exécuter ces instructions JavaScript directement dans la console, et nous pouvons voir ces changements se produire instantanément. Donc, le premier va obtenir le bouton Pokemon, qui est celui-ci, et il va le cacher. Donc, je vais mettre ça dans ma console, appuyer sur Entrée, et vous pouvez voir qu'il a disparu. Une autre chose que nous pouvons faire est, changer le HTML interne, qui est juste le contenu à l'intérieur d'un élément particulier, donc celui-ci va réellement nous donner du texte à notre div vide. Comme vous pouvez le voir, il est maintenant écrit, « Bienvenue dans la classe ». Si nous passons aux éléments et regardons notre inspecteur, c'est aussi la mise à jour là. Le suivant, nous pouvons également ajouter n'importe quel nombre de style à ce div. Je vais ajouter une marge de 20 pixels. Maintenant, vous pouvez voir, nous avons une marge de 20 pixels. Enfin, je vais prendre la balise de titre, et je vais la changer de Pokemon à Digimon. Si j'appuie sur Entrée, le changement se produit instantanément. Donc, nous allons entrer dans tout cela dans la classe de la façon dont cela fonctionne, mais pour l'instant, ce sont quelques exemples de choses que vous pouvez faire avec JavaScript. Maintenant, la raison pour laquelle nous devons utiliser JavaScript pour faire ce genre de choses c'est parce que le logiciel que nous utilisons pour exécuter JavaScript est nos navigateurs. N' oubliez pas que le navigateur est le programme que vous utilisez actuellement pour naviguer sur Internet. Actuellement, il y a 90 pour cent de chances que le navigateur que vous utilisez en ce moment soit Firefox, Safari, Internet Explorer ou Edge. Par conséquent, si un site Web va fonctionner sur tous ces navigateurs, ils doivent tous se mettre d'accord sur le langage de programmation qu'ils vont exécuter. C' est arrivé à la fin des années 90 si vous êtes intéressé par l'histoire. Mais vraiment, pourquoi nous devons utiliser JavaScript n'est pas si important. Nous avons juste besoin de savoir que nous devons l'utiliser pour le développement web frontend. Ceci est différent des langages de programmation backend, car ils sont tous exécutés côté service. Rappelez-vous que HTML, CSS et JavaScript s'exécutent dans votre navigateur et que le backend s'exécute sur un serveur. Donc, pour nos besoins, nous avons juste besoin de penser à JavaScript comme un langage de programmation pour le frontend. Chaque fois que vous voulez que quelque chose se produise sans recharger une toute nouvelle page, JavaScript est ce que vous devez utiliser. Un exemple que j'aime utiliser est l'application Web Google Sheets. Voyez que je clique et fais glisser sur plusieurs colonnes ici, il y a des commentaires qui se produisent sur la page sans que je recharge la page. Je suis capable de changer la couleur de fond des cellules. Je suis capable de mettre du texte dans des cellules, et de changer la couleur de ce texte, tout sans recharger la page. Maintenant, cela n'est possible qu'en utilisant JavaScript. Si je devais aller ici à ce plug-in que j'ai, et désactiver JavaScript sur la page, puis je recharge cette page, vous verrez maintenant que Google ne me permettra pas d'utiliser cette application parce que cela ne peut tout simplement pas fonctionner sans JavaScript. La seule chose qui fonctionne vraiment sur cette page sont les liens, qui, bien sûr, n'ont pas besoin de JavaScript. Mais si je devais cliquer sur ma page d'accueil pour les feuilles, cela me donne encore cet avertissement. « JavaScript n'est pas activé, donc il ne peut pas être ouvert. Activer et recharger. » Donc, comme vous pouvez le voir ici, pas grand chose est possible sur cette page sans JavaScript. Donc, maintenant, nous avons couvert comment JavaScript est un langage de programmation, comment c'est principalement un langage de programmation frontend, et enfin, que JavaScript est le seul choix lors de la construction de sites web interactifs. Si vous n'êtes toujours pas clair sur ce que fait JavaScript, ne vous inquiétez pas, nous allons utiliser tout ce cours pour passer en revue beaucoup de choses que vous pouvez réaliser avec JavaScript. Donc, sans plus tarder, commençons avec JavaScript dans la prochaine vidéo. 4. Commencer avec JS: Donc, semblant qu'il nous a si bien servi dans la classe précédente sur HTML et CSS, je vais encore une fois me référer à w3schools.com comme le curriculum pour cette classe. Donc, ce que je vais faire est d'ouvrir une nouvelle fenêtre, et de taper w3schools.com. Maintenant que nous sommes sur w3schools.com, nous pouvons voir les menus ici et ici pour HTML, CSS, JavaScript, côté serveur. Rappelez-vous dans la dernière classe, nous avons couvert le HTML et le CSS en utilisant ce curriculum. Mais nous allons cliquer sur JavaScript et cliquez sur Apprendre JavaScript. Donc, ensuite, ce que je veux que vous fassiez est d'ouvrir vos outils de développement, et dans le navigateur Web que j'utilise actuellement, qui est Google Chrome sur Mac OSX, je peux appuyer sur Option Commande I pour faire apparaître les outils de développement. C' est un raccourci qui m'aide à ouvrir les outils de développement très rapidement, mais sinon, je peux trouver développeur en allant dans View, Developer, et en cliquant sur Developer Tools. Donc, comme je l'ai dit dans la dernière classe, vous pourriez utiliser Firefox ou vous pourriez utiliser Safari. C' est une chose similaire dans chacun de ces programmes. Dans Firefox, je crois que vous allez à Outils, puis vous allez à Web Developer, puis vous appuyez sur la console Web et vous êtes en mesure d'obtenir une interface assez similaire ici. Sur Safari, vous aurez juste besoin de vous diriger vers n'importe quelle page en premier. Une fois que vous êtes sur une page, vous pouvez cliquer sur Développer, puis sur Afficher l'inspecteur Web, puis vous obtenez une interface similaire ici également. Donc, dans cette classe, nous allons travailler avec principalement la console JavaScript, donc c'est l'onglet final sur Safari, mais sur Google Chrome c'est en fait le deuxième onglet. Donc, si j'affiche à nouveau les outils de développement, nous avons la console ici. Si vous vous souvenez de la dernière classe, nous avons beaucoup travaillé avec cet onglet Eléments pour inspecter notre HTML et voir quels styles nous appliquons ici dans nos règles CSS. Maintenant, la raison pour laquelle j'ai sauté dans la console tout de suite est parce que c'est très utile pour nous aider à exécuter JavaScript et aussi déboguer le JavaScript qui s'exécute sur notre page. Donc, la console, fondamentalement, nous permet d'interagir avec une page web en, une fois de plus, soit en exécutant des expressions JavaScript dans le contexte de cette page, soit en ayant notre sortie JavaScript quelque chose cette console afin que nous puissions visualisez-le et découvrez ce qui se passe. C' est probablement difficile à conceptualiser en ce moment si vous n'avez aucune expérience avec JavaScript, mais vous verrez très vite que nous commencerons à construire JavaScript que vous commencerez à utiliser la console ici. Donc, ce que je pourrais faire, c'est briser ça en une nouvelle fenêtre. Donc, je peux le faire en cliquant ici et en appuyant sur Undock dans une fenêtre séparée, donc maintenant je l'ai sur le côté. Maintenant, ce que nous pouvons faire dans cette console JavaScript, juste à titre d'exemple, c'est que nous pouvons exécuter n'importe quel JavaScript. Donc, disons par exemple que nous voulions 5 fois 5, et nous appuyons sur Entrée, ça nous donne 25. C' est donc un simple problème de maths. Nous pouvons créer une variable appelée x et appeler cela 5, et puis nous pouvons, fois 5 par x, et voir ce qui se passe, et nous obtenons le même résultat. Donc, nous sommes capables d'exécuter JavaScript ici. Comme vous le verrez, nous utiliserons une partie de la page Web pour l'affecter également à l'aide de cette console. Vous pouvez cliquer ici pour effacer et revenir à l'endroit où vous avez commencé. Maintenant, la console est idéale pour comprendre des choses et tester des choses, mais dès que nous rechargeons la page, nous perdons tout ce que nous avons fait ici. Donc, si je devais définir une variable de x et la rendre 10, comme vous l'avez vu auparavant, nous pouvons utiliser des variables maintenant pour faire n'importe quel calcul pour les problèmes ici. Mais si je recharge la page et puis retourne à cette fenêtre, tout d' abord, je dois effacer tout ce bordel ici. Mais si je tape x, cela arrivera avec une erreur, x n'est pas défini. Donc, ce dont nous avons besoin est d'avoir un fichier JavaScript où nous pouvons stocker toutes nos lignes JavaScript. Maintenant, ce sera une chose future ferons une fois que nous commencerons à mettre en œuvre dans notre projet. Si vous avez compris le développement web, vous verrez comment nous pouvons intégrer un fichier JavaScript dans notre projet. Si vous avez pris la dernière classe sur HTML et CSS, vous saurez comment apporter une feuille de style externe. C' est fondamentalement le même concept qu'une feuille de style externe, nous mettons tout notre code dans un autre fichier et ensuite l'amenons dans notre projet. Mais encore une fois, pour l'instant, nous allons juste utiliser ce qui est dans notre navigateur. Alors, passons directement dans quelques exemples en ce moment. Donc, ici, il est écrit Apprendre par des exemples. Donc, nous pouvons cliquer sur ce lien pour voir quelques exemples Javascript, et nous pouvons cliquer sur Exemples expliqués. Donc, voici quelques-unes des choses que JavaScript peut faire. Il peut modifier le contenu HTML. Ainsi, l'une des nombreuses méthodes JavaScript dans le contexte de HTML est getElementById (). Ce que nous faisons ici, c'est que nous saisissons le document, nous trouvons un élément par l'identifiant de la démo, et nous changeons cet attribut ici, qui est innerHTML en Hello JavaScript. D' accord ? Donc, cliquez sur Essayez-le Yourself pour voir le résultat. Si je clique sur ce bouton qui dit Cliquez sur moi, soudainement, cela a été changé. Maintenant, si je vais cliquer sur Exécuter pour actualiser ici, vous verrez que cette balise de paragraphe a un identifiant de démo. Donc, ce que je fais dans ce bouton, en utilisant cet attribut, et ne vous inquiétez pas, nous allons couvrir ce qui se passe ici dans une vidéo ultérieure. Mais essentiellement, dans l'exemple ici, nous avons ce bouton déclenchant une méthode onclick de ceci, qui définira tout élément qui a un id de démo pour avoir un innerHTML de Hello JavaScript, et innerHTML juste signifie essentiellement tout dans ces deux balises. Donc, vous pouvez voir, quand nous cliquons sur le bouton, tout entre ces deux balises devient maintenant Hello JavaScript, et vous pouvez voir cela se passe en direct sur la page. C' est ce qui est génial à propos de JavaScripts, les changements se produisent tout de suite sans que vous ayez à recharger une autre page. Donc, en revenant aux exemples, nous pouvons également modifier les valeurs d'attribut. Maintenant, pour celui-là, ce que je veux que vous fassiez, c'est mettre en place la console du développeur. Nous allons effacer, et je veux que vous inspectiez cette image, et que vous voyez ce qui se passe ici. C' est la bonne chose à propos de l'inspecteur, nous pouvons voir quels attributs changent quand nous faisons quelque chose. Donc, je vais devoir courir côte à côte pour qu'on puisse voir ce qui se passe. Mais jetez un oeil à la fois à la lumière et ici quand je clique sur ces boutons. Donc, si j'allume la lumière, la lumière s'allume. Éteignez la lumière, la lumière s'éteint. Mais comme vous pouvez le voir ici, ce qui se passe réellement dans le code réel, c'est que les hauteurs changent ici. Donc, je veux que vous regardiez ici quand je cliquerai sur éteindre la lumière, voilà. Maintenant, vous pouvez voir que c'est Pic_ Bulboff. Donc, c'est complètement changer le champ SRC qui vous dit, désolé je dois cliquer dessus, et vous pouvez voir les images complètement changées. C' est en fait l'échange de l'attribut SRC ici pour mettre dans une autre image. Donc, c'est vraiment cool. Nous pouvons également modifier les valeurs d'attribut. Donc, nous pouvons également changer le style HTML, donc CSS fondamentalement. Je vais développer cet exemple et cliquer sur Essayer vous-même. Si je clique ici, vous pouvez voir que la taille de la police est modifiée, et nous l'avons fait en mettant à nouveau l'id de la démo sur une balise p et nous changeons l'attribut du style et le sous-attribut de la taille de la police à 35 pixels. Cela se produit dès que nous cliquons sur le bouton Cliquez sur moi à cause de cet attribut onclick. Encore une fois, nous allons couvrir ce qui est appelé un gestionnaire d'événements dans une vidéo ultérieure. Mais maintenant, juste pour l'exemple, il est bon de savoir ce que JavaScript peut faire. Vous pouvez également masquer et afficher des éléments, donc c'est assez basique. Vous cliquez sur le bouton et il peut masquer certains éléments, et c'est juste en définissant la propriété d'affichage de style sur none. Donc, voici l'exemple pour le spectacle juste pour le rendre complet. Voilà, tu y vas. C'est exactement le contraire. Donc, nous définissons l'attribut display sur bloquer au lieu de none. Maintenant, si vous vous souvenez de retour dans la classe HTML et CSS, je parlais de pourquoi nous définirions un certain élément pour n'afficher aucun, et c'est la situation parfaite pourquoi. Donc, nous avons ce p, il est disponible, il est dans le document, mais il n'apparaît pas. La raison pour laquelle nous voudrions faire cela est que nous avons une situation dans laquelle nous modifions son style d'affichage pour qu'il apparaisse. Donc, ici, lorsque la page se charge, elle ne va pas apparaître parce que le style est défini pour n'afficher aucun, mais dès que nous cliquons sur ce bouton, l'affichage a été changé pour bloquer. Donc, c'est un bon lien avec la dernière classe. Si vous ne saviez pas pourquoi nous faisions ça ou si vous avez juste besoin de voir un exemple, il est là. Cool. Donc, ce sont les exemples de base de JavaScript et je pense que c'est une assez bonne introduction dans ce que JavaScript peut faire. Dans la prochaine vidéo, on va couvrir les choses importantes. Nous allons couvrir la syntaxe et les déclarations. Ensuite, nous allons entrer dans toutes les choses différentes de cette liste, pas nécessairement toutes ces choses, mais toutes les choses importantes à voir avec les bases de JavaScript. Alors, merci de regarder, je te verrai dans la prochaine vidéo. 5. Syntaxe et déclarations JS: Dans la dernière vidéo, nous avons couvert une introduction à JavaScript. Nous avons également partagé quelques exemples courants de ce que JavaScript peut faire. Maintenant, dans cette vidéo, nous allons couvrir est quelque chose qui est très important lors de l' apprentissage de n'importe quel langage de programmation, et c'est la syntaxe. Donc, je vais cliquer sur cet élément de menu pour la syntaxe JS, et nous allons regarder une partie de la syntaxe pour JavaScript. Si vous n'êtes pas familier avec la syntaxe du mot, c'est essentiellement l'ensemble de règles qui détermine comment vous écrivez du code JavaScript, ou syntaxe en général, est fondamentalement la grammaire de la façon dont vous écrivez du code dans une langue particulière. Il y a certaines choses qui sont communes dans chaque langage de programmation comme la déclaration de variables, attribution de valeurs et les valeurs de calcul. Voici quelques exemples de ce que cela ressemblerait en JavaScript. Mais nous allons approfondir tout de suite. En ce qui concerne les types de données, nous avons des nombres et des chaînes communes ici. Numéros, vous n'avez pas à mettre de guillemets simples ou doubles. Vous venez de mettre littéralement quelques chiffres et peu importe si c'est un nombre décimal ou un nombre entier qui est également appelé entier. Il est toujours considéré comme un nombre en JavaScript. Pour les chaînes, et les chaînes, je suppose en tant que terme de programmation, mais ce n'est pas si difficile à comprendre. Ce n'est qu'un texte. Chaque fois que vous écrivez une chaîne, afin que vous puissiez la différencier des mots-clés similaires dans votre code, vous avez toujours des guillemets doubles ou des guillemets simples qui l'entourent. Donc, en faisant défiler vers le bas, nous pouvons voir les variables, et nous pouvons voir comment tout d'abord, déclarer une variable, puis aussi lui attribuer une valeur. D' habitude, c'est fait en une seule fois. Si je clique sur, Essayez-le vous-même, vous pouvez voir ici nous avons déclaré une variable ici. Donc, nous avons le mot clé de var, space, puis un X. Donc, nous déclarons d'abord que nous voulons avoir une variable appelée X, puis nous prenons cette variable et nous lui assignons une valeur de six dans cette opération. Ensuite, nous mettons la valeur de X dans l'écran à travers cet élément appelé démo. Maintenant, généralement cela se fait de manière abrégée, et nous pouvons juste revenir en arrière, cliquer sur Exécuter, et nous pouvons tous les deux déclarer et affecter une variable en une ligne. C' est assez souvent le cas à moins que nous voulions déclarer dans une portée différente et ensuite l'assigner dans une portée différente, que je vous montrerai plus tard lorsque nous couvrons la portée JavaScript. Donc, nous avons des opérateurs qui sont assez communs. Tu viens d'avoir plus, moins l'astérix pour la multiplication et tu as la barre oblique pour la division. Donc, vous pouvez voir ici comment vous écririez un problème de mathématiques pour le résultat de cinq plus six fois par 10. Maintenant, une chose que vous pourriez être confondue avec le langage de programmation, est ce signe égal. Cela ne signifie pas que X est égal à cinq. Cela signifie que cinq est assigné à la variable de X. Maintenant, n'est-ce pas la même chose que vous pourriez demander ? Eh bien, non. Si nous devions écrire une instruction if, qui est fondamentalement juste une instruction qui exécutera du code. Si quelque chose est le cas, nous utilisons double égal ou triple égal. Mais nous allons y aller dans la leçon sur les opérateurs de comparaison, mais pour l'instant, quand vous voyez cela est égal, cela signifie que nous affectons une variable ou une valeur à une variable. Ici, nous couvrons les expressions. C' est assez explicite. Nous recevons un 5 et nous le chronométrons de 10, nous prenons la valeur de X et nous le chronométrons de 10. Mais ici n'est peut-être pas si évident, et c'est ainsi que nous pouvons unir les cordes. Donc, si nous voulions construire une chaîne, peut-être que nous voulions mettre une variable ici, nous sommes capables d'utiliser l'opérateur plus. Donc, vous pouvez faire une chaîne de John plus une chaîne d'un espace plus une chaîne de Doe, et cela évaluera à John espace Doe. instant, cela n'a pas vraiment de sens, mais si nous devions mettre certaines variables, cela pourrait être remplacé par une certaine variable. En fait, je pourrais le démontrer maintenant pour vous les gars. Comme vous pouvez le voir ici, John plus l'espace plus Doe, évalue à John Doe. Mais disons par exemple, je peux aller ici et faire des valeurs X variables, et je tape une chaîne, alors rappelez-vous que j'ai eu nos citations d'ouverture et de fermeture, et peut-être que c'est une initiale, donc nous avons mis en J. Donc ici, au lieu d'un espace, nous mettrons dans X. Maintenant, si nous exécutons cela, vous verrez que la valeur de X, et ce devrait être une chaîne parce que nous mettons ensemble des chaînes, est J, et donc il le met entre celles-ci. C' est un bon exemple de quand vous voulez assembler comme chaînes littérales que vous définissez ici et d'autres variables qui contiennent des chaînes. C' est comme ça que tu ferais. Ils parlent également de mots-clés qui apparaissent dans ce contexte en bleu. Nous avons déjà regardé le mot-clé var, qui indique au navigateur de créer des variables. Ce que vous faites est de mettre var, espace, puis le nom de la variable à déclarer. Voulez-vous déclarer plusieurs variables en même temps ? Vous pouvez simplement utiliser une virgule, puis y mettre une autre variable. Ensuite, après l'avoir déclaré, nous affectons maintenant des valeurs à ces différentes variables. Comme vous pouvez le voir ici, nous utilisons une variable que nous avons déjà déclarée et assignée, nous mettons le résultat de cela contre 10 ici, et nous obtenons une nouvelle variable qui est Y. Une autre chose que vous verrez assez souvent est commentaires. C' est si vous utilisez HTML, CSS, JavaScript ou toute autre langue. Parfois, vous voulez écrire des choses dans le code que vous ne voulez pas être exécuté. Par exemple, vous pouvez expliquer ce qui se passe dans cette ligne. Vous voudrez peut-être dire, cela affecte cinq à la variable X. Vous n'auriez généralement pas à écrire un commentaire aussi basique, car c'est une fonction si basique. En fait, il y a une erreur ici. Je vais m'assurer que ce point-virgule n'est pas dans le commentaire. Si je fais ça, rien ne change. Est juste un commentaire dans le code. Comme vous pouvez le voir ici, nous pouvons également utiliser des commentaires pour garder le code que nous avons écrit mais ne l'avons pas exécuté. Si je supprime juste ce commentaire, et j'ai arrêté le commentaire à partir de là, vous verrez X devient six maintenant et il prendra la dernière valeur attribuée de X et le mettra là. Mais si nous devons y ajouter quelques marques de commentaires, cela reviendra à cinq. Maintenant, gardez juste à l'esprit que cela va commencer le commentaire juste après sur une ligne séparée. Donc, si nous allons à une nouvelle ligne et tapons var y, vous pouvez voir qu'il n'est pas vert maintenant parce que nous commençons une nouvelle ligne. Mais si vous vouliez faire un commentaire sur plusieurs lignes, ce que vous pouvez faire est, ouvrez avec une barre oblique et un astérisque, puis fermez avec un astérix et une barre oblique. Donc, nous pouvons écrire n'importe quel nombre de code d'une plusieurs lignes et ce sera tout un commentaire. Donc, il ne s'exécutera pas. Si je dis, Y est égal à sept et puis, en fait, allons déplacer cela ci-dessous, et disons que X est égal à sept. Laissons ça. Vous verrez qu'il n'est pas en cours d'exécution parce qu'il est à l'intérieur d'un commentaire. Alors que si je supprime ces, et que je l'exécute, vous verrez que x est maintenant sept. En fait, c'est une mauvaise syntaxe parce que je déclare à nouveau la variable. Je peux juste le dire comme ça et X sera maintenant la valeur de sept. Donc, en continuant, il y a d'autres choses en JavaScript qui sont vraiment importantes. La première est que JavaScript est sensible à la casse. Comme vous pouvez le voir ici, LastName avec la majuscule N est différent de lastname, tout en minuscules. Si vous deviez écrire cette variable en majuscules complètement, ce serait une variable toute différente. Cela peut être déroutant pour certains qui proviennent de langages de programmation qui ne sont pas sensibles à la casse. Mais à mon avis, c'est une très bonne fonctionnalité à avoir et c'est parce que nous pouvons utiliser quelque chose appelé Camel Case. Donc Camel Case, pour ceux d'entre vous qui n'ont peut-être pas fait beaucoup de programmation auparavant, est un excellent moyen pour nous de créer des noms de variables lorsque nous avons plusieurs mots dans un seul nom. Donc, comme vous pouvez le voir ici, nous pourrions être tentés de faire le prénom et nous allons juste diviser les mots, mais ce n'est pas autorisé en JavaScript. Une chose que nous pouvons faire est utiliser des traits de soulignement pour séparer les mots, mais une façon beaucoup plus propre que beaucoup de développeurs préfèrent est Camel Case. Donc, c'est mettre en majuscule la première lettre de l'un des mots ou des deux mots. Donc, dans cet exemple, nous mettons en majuscule toutes les premières lettres de chaque mot, mais le plus souvent est le cas de chameau inférieur qui commence par minuscules, puis une fois qu'il arrive à un nouveau mot, la première lettre de ce mot est majuscule. C' est Camel Case. Donc, maintenant nous avons atteint la fin de la page et il est temps d'aller aux instructions JavaScript. Donc, en cliquant simplement sur les instructions JS, nous pouvons jeter un oeil à une instruction JavaScript et nous pouvons la décomposer par les différentes parties qui sont composées de. Nous avons donc des opérateurs de valeurs, des expressions, des mots clés et des commentaires. Donc ici, nous pouvons voir que cette déclaration particulière indique au navigateur d'écrire « Hello Dolly » à l'intérieur d'un élément HTML avec l'ID de la démo. Donc, en passant par cette déclaration, nous commençons par un objet en haut qui est un document et qui cible juste l'ensemble du document, puis nous pouvons aller plus loin en obtenant un élément par ID de démo dans ce document, alors nous pouvons changer un attribut basé sur cet élément particulier. Nous assignons une valeur, donc nous utilisons un opérateur d'affectation et ensuite nous mettons une valeur. Donc, en revenant dans l'autre sens, nous prenons une valeur, nous l'assignons à un attribut qui se trouve sur un élément particulier, nous utilisons pour trouver en prenant le contexte du document, puis en creusant plus profondément. Encore une fois, nous allons passer en revue cette partie particulière du code dans les vidéos ultérieures, alors ne vous inquiétez pas trop de comprendre cela. Mais essentiellement, nous venons juste de décomposer ce qui se passe dans une seule déclaration en ce moment. Une partie très importante des déclarations est des points-virgules. Ainsi, des points-virgules sont nécessaires pour mettre fin à une instruction exécutable. Donc, si vous voulez dire par exemple, déclarer un tas de variables et ensuite affecter des variables, une fois que vous avez terminé une instruction, vous devez mettre un point-virgule. Donc, avec quelques langages si vous mettez quelque chose sur une nouvelle ligne, alors le langage de programmation sait que c'est une nouvelle instruction et il les exécute séparément. Parce que nous devons utiliser des points-virgules avec JavaScript, nous pouvons réellement mettre toutes ces instructions sur la même ligne. Habituellement, ce n'est pas la meilleure idée parce que nous voulons toujours disposer un code bien, avec l'imbrication et de nouvelles lignes afin que nous puissions voir différentes instructions, mais c'est une option disponible pour nous. L' autre chose à noter à propos de JavaScript, c' est qu'il ignore plusieurs espaces, sorte que vous pouvez ajouter autant d'espace blanc que vous le souhaitez à votre projet ou à votre code afin de mieux le comprendre. Donc, ces deux lignes sont équivalentes, mais je pense que la plupart d'entre nous conviendront que c'est un peu plus agréable car cela nous donne un peu plus d'espace blanc, un peu plus de marge de respiration autour de l'opérateur d'affectation, la valeur et la variable. Donc, comme il est dit ici, c'est une bonne idée de placer des espaces autour des opérateurs. Mais nous pourrions essentiellement supprimer tous les espaces ici, ici, ici et ici. Nous ne pouvions pas supprimer cet espace parce que c'est un mot clé et doit se terminer par un espace blanc, mais en termes de cela ici, nous pourrions supprimer tout l'espace blanc et cela fonctionnera toujours, mais ça va juste paraître moche. Donc, il est recommandé de placer de l'espace autour des opérateurs, mais pas essentiel. Donc, encore une fois, chaque instruction est terminée par un point-virgule et cela signifie que nous pouvons mettre plusieurs instructions sur la même ligne comme nous l'avons fait ici, ou alternativement, nous pouvons briser une déclaration vraiment longue en la plaçant sur plusieurs lignes. Tant que nous rompons avec un point-virgule quand c'est fait, il est correct de le diviser sur plusieurs lignes. La prochaine chose est les blocs de code, qui si nous définissons une fonction ou une boucle, nous allons démarrer un bloc qui s'exécute cadre de cette fonction ou partie de cette boucle. Nous le faisons en utilisant des points-virgules. Donc, dans certains langages de programmation, nous avons juste besoin d'une nouvelle ligne ou nous avons un mot-clé qui dira fin à la fin, mais en JavaScript, nous commençons un crochet bouclé et ensuite nous terminons avec un crochet bouclé. Donc, tout ce qui se trouve dans ces deux crochets bouclés fait partie de cette fonction. Cela dit, nous pouvons également utiliser des mots-clés pour mettre fin à un bloc. Donc, vous n'avez pas besoin d'utiliser ces crochets bouclés tout le temps, nous pouvons réellement utiliser des mots-clés mais nous pourrions voir quelques exemples de cela dans une vidéo ultérieure. Pour l'instant, la façon standard de le faire est juste d'ajouter ces crochets bouclés et alors tout dans les crochets bouclés est ce qui fait partie de ce bloc de code. D' accord. Donc, nous avons couvert beaucoup de choses à faire une syntaxe dans cette vidéo. Beaucoup de choses dont nous parlons ici leçons que nous n'avons pas encore apprises en JavaScript, alors ne soyez pas trop inquiet si vous ne comprenez pas tout ce qui se passe ici. Il est important de couvrir ces choses syntaxiques directement parce que disons par exemple que vous faites une erreur syntaxique plus loin sur la piste peut-être parce que vous avez vécu dans un langage de programmation différent et ce n'est pas la même chose que en JavaScript, vous pourriez être frustré de ne pas savoir de quoi vous parlez. Donc, quand il s'agit de syntaxe, il est préférable de simplement suivre les exemples ne pas essayer de trop changer le système et de cette façon, vous serez moins susceptible d'avoir des ruptures dans votre code. Donc, c'est la syntaxe, dans la prochaine vidéo, nous allons couvrir la sortie. 6. Sorties JS: Donc, dans cette vidéo, nous allons couvrir les possibilités d'affichage avec JavaScript. Donc, si je clique sur la sortie JS dans le menu ici, nous pouvons voir que JavaScript peut « afficher » les données de différentes manières. Donc, nous l'avons vu avec HTML interne, donc nous pouvons écrire directement dans l'élément HTML en utilisant HTML interne. Nous pouvons également écrire dans une sortie HTML en utilisant document.write. Donc, comme nous l'avons vu précédemment, il s' agit d'un objet appelé « document », qui représente l'ensemble du document. Ensuite, nous appelons une méthode sur celle de « écrire ». Ensuite, ici, nous pouvons mettre un peu de sortie. Nous arriverons à cet exemple en une seconde, nous pouvons utiliser alerte et c'est vraiment basique que vous voyez beaucoup dans une formation JavaScript, mais si je vais sur ma console et que je viens d'effacer ce qui est là, je peux commencer une alerte à droite Maintenant. Donc, je peux aller « Bonjour Skillshare ! » Maintenant, vous pouvez voir, une alerte apparaît disant, « Bonjour Skillshare ! » Donc, c'est une façon, alerte est un peu obsolète maintenant, elle n'est généralement utilisée que si vous êtes sur le point de supprimer quelque chose, et il est vraiment important d'attirer votre attention afin que vous ayez pu voir cela avant. Si nous lançons ça, ça pourrait dire : « Oh, êtes-vous sûr de vouloir supprimer ? » puis vous appuyez sur « OK », et vous avez terminé la suppression. Le commun que j'utilise beaucoup pour déboguer est console.log. Cela nous permet d'écrire sur la console du navigateur. Ça n'aura pas forcément de sens en ce moment. faire ici parce que nous sommes déjà dans la console, mais dans le code que nous créons, je peux le faire enregistrer quelque chose sur la console. Donc, disons juste, « Hello Console ». Si je lance ça, ça reviendra avec Hello Console. Ce n'est pas un exemple très pratique parce que nous lui donnons l'importation et nous le récupérons directement. Mais ce que vous pouvez faire dans votre code dans votre JavaScript qui est en cours d'exécution sur la page, vous pouvez définir un console.log et afin que vous puissiez obtenir des commentaires sur ce qui se passe, sur votre page sur votre console ici. Alors vous pouvez voir, « Oh, c' est ce que cette variable est, ok. J' ai besoin de changer ça. » Mais encore une fois, nous reviendrons plus tard sur la façon de déboguer le code plus tard dans cette classe. Donc, le premier exemple utilise InnerHTML et je ne veux pas passer beaucoup de temps à cela parce que, nous l'avons déjà couvert dans certains des exemples de base. Nous pouvons essentiellement mettre du HTML entre ces deux balises p. Donc, si j'utilise l'exemple ici, JavaScript est en fait assez intelligent, réalise que nous essayons de mettre une chaîne ici, mais nous avons une opération avec des nombres ici. Il prend le résultat du calcul ici, le convertit en une chaîne de sorte qu'il s'affiche sous forme de texte dans notre balise p ici. Donc, si on inspecte ici, je pose ça pour qu'on puisse voir. Vous pouvez voir que c'est notre p id=demo et à l'intérieur, nous avons le résultat de cette équation qui est 11. Donc, l'exemple suivant est document.write. Donc, nous pouvons l'utiliser à des fins de test, je ne me retrouve jamais en utilisant des écritures de document personnellement parce que j'utilise toujours console.log, mais nous pouvons essayer l'exemple ici. Vous pouvez voir ici, que nous l'avons déjà fait. Mais vous pouvez voir que nous sommes en train d'écrire les résultats de cinq plus six à la page. Donc, la différence entre ceci et le dernier si je vais inspecter, poser ça et inspecter ce 11, il est assis juste dans le document. Il n'a pas de balise p ou quoi que ce soit parce que nous l' écrivons essentiellement dans la section du document où le code est spécifiquement écrit si cela a du sens. Donc, au lieu de dans l'exemple précédent, trouver un élément particulier, puis changer un attribut pour mettre le résultat directement dans un élément HTML qui existe partout sur la page, nous disons simplement, partout où cela est exécuté, écrivez-le à l'écran. Peut-être, nous pouvons peut-être mettre cette balise de script ici. Encore une fois, ce n'est pas un code très propre, mais peut-être que cela fonctionnera. Nous pouvons voir ici que si je l'inspecte, maintenant vous verrez que 11 est écrit à l'intérieur de cette balise p parce que nous avons un script à l'intérieur de cette balise p. Mais ce n'est pas très bon code, ce n'est pas très propre, donc je ne recommanderais pas que si vous vouliez qu'il produise vers ce p, nous utilisions l'exemple précédent en utilisant du HTML interne. Dans ce cas, c'est pourquoi je ne me retrouve jamais vraiment en utilisant document.write, mais c'est une option là. Donc, nous avons couvert l'alerte juste avant, et console.log est celui que j'utilise si souvent pour déboguer. Comme vous le voyez ici, il est dit : « Vous en apprendrez plus sur le débogage dans un chapitre ultérieur. » Certainement pour nos besoins, nous allons apprendre à propos du débogage JavaScript plus tard également. D' accord. Donc, cela couvre la sortie, c'est celui que vous allez utiliser le plus souvent, ou vous allez modifier le contenu sur la page, ne vous inquiétez pas trop de fenêtre alerte ou document.write. Dans la prochaine vidéo, nous allons parler de variables. Donc, j'ai hâte de vous voir dans la prochaine. 7. Variables JS: Dans cette vidéo, nous allons couvrir les variables. Si je vais aux variables JS ici, nous pouvons voir quelques exemples de choses que nous avons déjà vues à partir des leçons sur la syntaxe. Mais faisons défiler vers le bas et couvrirons certaines choses que nous n'avons pas encore vues. Je recommande certainement de revenir à cette page et de la lire pour que vous compreniez tout ce que vous avez vraiment besoin de savoir sur les variables. Mais si vous avez compris, quand nous avons traversé des variables dans l'introduction et la vidéo sur la syntaxe, alors vous devriez en savoir assez pour continuer. Nous avons expliqué comment vous pouvez créer de nombreuses variables dans une instruction en utilisant une virgule, et cette déclaration peut couvrir plusieurs lignes tant que nous terminons cette instruction avec un point-virgule. Quelque chose dont nous n'avons pas encore discuté est la valeur de undefined. Si je déclare une variable de CarName ici, et que je ne lui attribue aucune valeur, quelle en est la valeur ? Donc c'est une bonne question. Si vous ne définissez pas réellement une valeur pour quelque chose, il finit par avoir une valeur indéfinie. Pour voir cela dans notre console, si je devais faire var CarName et puis je viens de sortir CarName, il apparaît comme indéfini. Si je devais attribuer une valeur de Mazda, qui est la voiture que je conduis, il se résoudra à Mazda là-bas. Mais si je tape à nouveau mon CarName et appuyez sur Entrée, il arrive avec une chaîne de Mazda. Avant de lui attribuer une valeur, elle est juste indéfinie, et verra plus tard pourquoi cela est réellement important. Une autre chose importante à noter ici est que si vous redéclarez une variable JavaScript, elle ne perdra pas sa valeur. La variable CarName, nous aurons toujours la valeur de vulvar après l'exécution des instructions. En mettant cette instruction, après avoir défini une valeur sur une variable, il ne l'efface pas réellement et la redéfinit à undefined. Comme vous pouvez le voir ici, nous pouvons faire l'arithmétique. Nous pouvons également ajouter des chaînes ensemble. Le terme technique pour cela est appelé concaténation. Je n'irais pas en parler davantage parce que nous l'avons déjà fait dans l'exemple précédent, mais vous pouvez également utiliser ces opérateurs, non seulement pour ajouter des nombres ensemble, mais aussi pour ajouter des chaînes ensemble. Maintenant, JavaScript est en fait assez intelligent et le fait qu'il ne sera pas erreur lorsque vous essayez de mettre une chaîne et une variable ensemble. Si nous faisons défiler à partir d'ici, nous pouvons voir que vous pouvez réellement utiliser l'opérateur plus dans une seule instruction avec des chaînes et des nombres. Maintenant, certains langages de programmation ne vous permettraient pas de le faire car il verrait que c'est un type de chaîne de données et c'est un type de données de nombre, et il ne saurait pas quoi faire. Peut-être que vous voulez ajouter cinq et deux ensemble pour en faire sept, dans ce cas, vous traiteriez cela comme un nombre, pas une chaîne, o r peut-être que vous voulez ajouter la chaîne de deux à la chaîne de cinq, et dans ce cas vous obtiendrez 52. En JavaScript, il les traitera comme des chaînes car la première valeur est une chaîne. Donc, si nous cliquons ici et essayons, vous pouvez voir que le résultat de l'ajout de cinq en tant que chaîne puis deux et trois en tant que nombre est cinq, deux, trois. C' est la même chose que si nous allions ici, et nous avons explicitement appelé ces chaînes en pointant des guillemets doubles où la valeur réelle est affectée à x, vous obtiendrez les mêmes résultats car il prend juste ces deux nombres et les changer en chaînes basées sur le type de données du premier nombre qui est effectivement déclaré comme une chaîne. Si je devais supprimer les guillemets doubles du premier nombre, cela reviendrait à être un numéro de type de données. Si je cours, vous obtenez cinq plus deux plus trois, et le résultat est 10. Ça peut prendre du temps pour envelopper la tête et c'est cool. Généralement, vous ne devriez pas mélanger les types de données pour moins d'opérations. Si vous voulez faire une opération arithmétique avec des nombres, ne mettez pas les guillemets. Si vous voulez ajouter des chaînes ensemble, assurez-vous d'utiliser des guillemets doubles. Si vous voulez le combiner comme ça, est là que ça commence à devenir un peu délicat, et souvent vous ne vous retrouverez pas à faire cela à moins que ce ne soit une erreur. Tu n'as pas vraiment besoin de t'inquiéter. Le revers de ceci est en changeant l'ordre. Si nous essayons cela, nous pouvons voir que les deux premiers nombres ajoutés ensemble, mais parce qu'il ajoute une chaîne à la fin, il ajoute cinq comme une chaîne, si cela a du sens. C' est la même chose que si nous mettions ces entre parenthèses et cliquez sur Exécuter. Tout ce que nous mettons explicitement les résultats de cela comme un cinq, nous obtiendrions le même résultat. Ce qu'il fait est de résoudre ces deux nombres en les ajoutant ensemble dans une opération arithmétique, puis transformer en une chaîne et de la concaténer à cette chaîne. Encore une fois, c'est des choses que je n'ai pas à traiter régulièrement parce que je suis juste la règle générale. Si je fais l'arithmétique, j'utilise des chiffres. Si je concaténe des chaînes, j'utilise des chaînes, aussi simples que ça. Mais si vous essayez de combiner des chaînes et des nombres, c'est à ce moment que vous commencez à voir une partie de ce comportement funky. Ce sont des variables JavaScript. Dans la prochaine vidéo, nous allons parler un peu plus des opérateurs. Alors je te verrai dans la prochaine. 8. Opérateurs JS: Dans cette vidéo, nous allons couvrir les opérateurs JavaScript. C' est vraiment important parce que, comme nous l'avons mentionné ici, cela ne signifie pas égal, cela signifie affectation. C' est l'une des erreurs les plus courantes avec les opérateurs, mais nous allons creuser plus profondément en ce moment. Ce signe égal signifie l'affectation et c'est l'opérateur le plus commun que vous verrez en JavaScript ou à peu près n'importe quel langage de programmation est nous avons besoin d'assigner des valeurs aux variables. Le signe égal est l'opérateur d'affectation et il affecte une valeur à une variable. L' opérateur d'addition ajoute à des nombres donnés, mais il aussi comme nous l'avons vu avant qu'il puisse ajouter pour donner une chaîne aussi bien ou un terme approprié serait concaténation. Il combine des cordes ensemble pour former une chaîne plus grande. L' opérateur de multiplication multiplie les nombres, c'est ce que vous devez savoir en prenant n'importe quelle classe mathématique de base, addition, soustraction , multiplication et division, vous pouvez également faire quelque chose appelé un module, ce qui vous donne le reste après avoir divisé deux nombres. Il y a deux autres opérateurs ici, l'opérateur d'incrémentation et de décrémentation en JavaScript. Comme vous pouvez le voir ici, ces opérateurs arithmétiques sont entièrement décrits dans le chapitre sur l'arithmétique JS, que nous aborderons brièvement à la fin de cette leçon. Pour accéder aux opérateurs d'affectation JavaScript, les opérateurs d'affectation attribuent des valeurs aux variables JavaScript. Le plus facile est égal, mais il y en a en fait quelques différents. Il y a ces opérateurs abrégés qui nous permettent essentiellement d'économiser de l'espace. Ils ne sont évidemment pas si essentiels, je veux dire que la différence entre écrire ceci et écrire ceci n'est pas énorme mais si vous vouliez gagner du temps et ajouter fondamentalement y à x, vous pouvez le faire avec cela. Si vous vouliez soustraire y de x , puis x être la différence entre ceux que vous pouvez utiliser cet opérateur. Comme nous l'avons vu précédemment, nous avons également des opérateurs de chaîne JavaScript. Nous pouvons concaténer des chaînes en utilisant le plus, et nous pouvons également utiliser le raccourci plus égal pour concaténer des chaînes afin que ce que nous pouvons faire est d'avoir une chaîne ici pour le texte 1, puis nous pouvons l'ajouter en utilisant cet opérateur d'affectation de concaténation . Montrons ça comme un exemple. Nous avons un espace « ce qui est vraiment » et ensuite nous ajoutons à cette « belle journée ». Lorsque nous sortons le texte 1, nous obtenons la chaîne complète. C' est l'équivalent de faire cela, qui est de mettre à nouveau dans le texte 1, puis de mettre un plus afin que vous obteniez exactement le même résultat, c'est juste un raccourci. Pour revenir à la page, nous pouvons ajouter des chaînes et des nombres ensemble comme nous l'avons vu auparavant. Ce sont des exemples que nous avons couverts dans l'une des leçons précédentes, je ne vais pas y revenir, mais la chose importante à noter ici est les opérateurs de comparaison. Comme je l'ai déjà dit, l' une des choses que même en tant que programmeur expérimenté que vous pourriez parfois oublier et surtout en tant que débutant, est que l'opérateur d'affectation, le single égal, ne représente pas égal à et pour cela il est soit double égal ou triple égal. double égal est le commun, mais il y a une légère différence entre ces deux. Celui-ci évaluera à true si le côté gauche est égale à la valeur droite. Celui-ci ne sera évalué à true que si le côté gauche est égal au côté droit et qu'ils sont du même type. C' est un peu plus technique et nous pourrions y entrer plus tard, mais pour l'instant cela devrait suffire pour vous permettre de comparer si deux variables sont égales. Celui-ci n'est pas égal, donc vous venez de mettre un point d'exclamation et un signe égal et cela évaluera à vrai si le côté gauche n'est pas le même que le côté droit, et c'est le même que cela mais le contraire, nous pouvons aussi faire supérieur à, inférieur à, supérieur ou égal à, inférieur ou égal à et puis il y a aussi cet opérateur ternaire. Je ne sais pas si nous allons entrer dans les opérateurs ternaires dans cette classe particulière, mais si vous voulez en savoir plus sur les opérateurs ternaires, certainement chercher. C' est juste une façon plus courte de faire des déclarations if-then fondamentalement. Nous avons également des opérateurs logiques. Si on vérifiait si deux déclarations étaient vraies, on pourrait le faire. Espérons qu'il y en a un exemple ici. Il n'y en a pas. Créons notre propre exemple ici. Essayons quelque chose. Mettons dans une déclaration, cinq égal à cinq. Ça revient vrai. Mettons quatre égal à cinq, faux, c'est ce que nous nous attendions. En utilisant un pas égal, si je fais quatre pas égal à cinq, nous devrions devenir vrai. C'est le contraire. Tu penses peut-être, Chris, il est évident que cinq et cinq sont les mêmes et quatre et cinq ne sont pas les mêmes, pourquoi faisons-nous ça ? Nous pouvons remplacer ces valeurs explicites par des variables. Si je devais déclarer une variable de x égale à 10 et déclarer une variable de y égale à 20. Si je devais mettre une déclaration comme celle-ci, ça revient faux. Si je devais mettre une déclaration comme celle-ci, ça revient vrai parce qu'ils ne sont pas les mêmes. Maintenant, où les opérateurs logiques entrent, je peux combiner deux instructions. Combinons les deux premiers. Nous avons cinq égal à cinq, ce que nous savons va être vrai, mais nous voulons que la déclaration soit vraie seulement si x est égal à y aussi. Si nous mettons x est égal à y, il reviendra faux parce que la première partie est vraie, mais la deuxième partie est fausse. C' est seulement si les deux sont vrais, mais nous pouvons aussi utiliser des tuyaux pour tous. Si je devais faire la même déclaration et mettre des tuyaux à la place, cela est vrai parce que l'un de ces côtés doit être vrai pour que tout soit vrai parce que c'est O. C' est vrai, ce n'est pas vrai, mais un seul d'entre eux doit être vrai pour que tout soit vrai. Nous pouvons également utiliser des nœuds logiques, qui est un point d'exclamation. est peut-être pas clair pour quoi nous utiliserions ça en ce moment, mais si je devais mettre le point d'exclamation vrai, ça reviendra comme faux et si je mets le point d'exclamation faux, ça reviendra comme vrai parce que c'est fondamentalement dire le en face. Ça dit pas vrai et ici ça dit pas faux. Si je vais mettre entre parenthèses, cinq égal à cinq, ça sera faux parce que c'est vrai et c'est demander si ce n'est pas vrai. C' est fondamentalement le contraire. Ici, nous pouvons voir le type d'opérateurs et je l'utilise seulement vraiment, l'exemple le plus commun que je peux penser à l'utiliser serait de vérifier si quelque chose n'est pas défini. Utilisons des noms de variables différents, même nous avons utilisé x auparavant. Je vais juste l'appeler probablement pas le meilleur nom, mais variable. Si je fais un type d'ici et les crochets ouverts mis entre crochets de fermeture variable terminent l'instruction avec le point-virgule, vous verrez qu'il revient comme indéfini. Alors que si j'ai affecté à la variable une valeur d'un qui est juste un nombre et ensuite nous tapons dans le type de variable, revient nombre et si nous devions changer cela en une chaîne, disons juste bonjour et nous avons tapé le type de variable, vous diriez que c'est maintenant une chaîne parce que nous lui assignons une chaîne. type d'opérateur est parfois pratique pour déterminer quel type de données est votre variable. Ici, nous avons un opérateur Bitwise. Honnêtement, je n'ai jamais besoin de les utiliser. Je ne vais pas les couvrir, si vous voulez en savoir plus sur eux, il y a tout un chapitre sur Bitwise. C' est un aperçu des opérateurs, il y a aussi quelques menus différents ici pour l'arithmétique et l'affectation. Rappelez-vous que nous avons parlé de l'augmentation et de la décrémentation. Je vais juste faire défiler jusqu'à ça maintenant. Comme vous pouvez le voir, comme nous y arrivons, il y a le reste que vous pouvez essayer, si vous voulez incrémenter un nombre d'un seul, nous n'avons pas besoin d'écrire la forme longue x égale x plus 1. On peut juste faire x plus plus. C' est une façon très courte de le faire. Par exemple, si je devais supprimer cela en mettant un commentaire, sera juste cinq et je peux faire exactement la même chose en faisant x égal à x plus 1, et ils reviendront comme six. Ce x est égal à x plus 1 est exactement le même que l'utilisation de ceci. C' est juste un raccourci. Commentons simplement cela à nouveau et si je devais faire un moins, maintenant vous verrez que c'est 5 moins 1, mais nous pouvons également utiliser le raccourci pour cela aussi, donc je vais supprimer cela. Au lieu d'utiliser plus sur le x, je vais faire un moins et vous verrez que nous obtenons exactement le même résultat. Nous voyons souvent cet opérateur avec des boucles comme un raccourci, nous n'avons pas besoin de taper x égal plus 1 quand nous pouvons simplement mettre dans cet opérateur abrégé. Pour revenir à la page, nous pouvons regarder la priorité de l'opérateur, mais je suis sûr que cela suit le même ordre que les mathématiques standard. Si vous comprenez vos mathématiques, vous devriez être d'accord avec ça. Ici vous pouvez voir quelques jumbo plus technique. Honnêtement, vous n'avez probablement pas besoin de regarder trop loin là-dedans. Le dernier élément de menu entrera dans est un résumé des opérateurs d'affectation. Comme vous pouvez le voir ici, il y a toutes ces différentes façons d'affecter des variables et ils sont fondamentalement abrégés. Ici, vous pouvez voir que c'est la même chose que ça. Ce sont probablement plus les communs que vous utiliserez si du tout et c'est exactement le même que ce qui est dans cette colonne. Nous avons déjà couvert l'affectation un peu, mais si vous voulez voir certains de ces raccourcis, vous pouvez aller à ce menu, honnêtement n'est pas si important. Si vous mettez dans votre code ceci, ça n'a pas vraiment d'importance. C' est juste que si vous voulez être un peu plus délicat et économiser de l'espace, vous pouvez le faire de cette façon. C' est tout ce dont je voulais parler sur les opérateurs. La plus grande chose et la plus grande erreur de débutant est de penser qu'il s'agit d'un opérateur de comparaison. Ce n'est pas, c'est une affectation et vous pouvez voir qu'elle est utilisée pour l'affectation très souvent, mais parfois quand il arrive à créer une déclaration if puis ou une déclaration de comparaison, les gens sont souvent tentés de dire quelque chose comme ça, cinq équivaut à cinq, mais comme vous pouvez le voir ici, il pense que vous affectez cinq à cinq et cinq est juste un nombre que vous ne pouvez pas attribuer quelque chose à un nombre explicite, il doit être une variable. Si vous vouliez comparer ces deux, vous devrez mettre le signe égal supplémentaire et c'est ainsi que vous obtenez l'opérateur de comparaison égal. C' était la principale chose que je voulais traverser, vous pouvez voir d'autres exemples d'opérateurs ici. Tout cela est disponible sur Internet afin que vous puissiez revenir et le référencer si vous possédez quoi que ce soit. Dans la prochaine vidéo, nous allons en parler plus sur les types de données. Je te verrai dans la prochaine. 9. Structures des données JS: Dans cette vidéo, nous allons parler plus des types de données. Encore une fois, nous avons déjà abordé un peu les types de données dans les leçons d'introduction, mais nous allons plonger un peu plus profondément. Allons à l'élément de menu J, S types de données ici et vous pouvez voir ici une fois que nous avons parlé auparavant, un nombre et une chaîne, mais il est également très fréquent en JavaScript d'avoir des objets. Les objets peuvent être une chose difficile à contourner, mais si nous descendons ici dans l'élément de menu Objets J, S, nous pouvons voir que les objets miroir dans la vie réelle. Dans la vraie vie, une voiture est un objet et une voiture a des propriétés comme le poids et la couleur, et des méthodes comme le démarrage et l'arrêt. Vous pouvez commencer à voir ici qu'en JavaScript nous pourrions avoir la même chose, nous pourrions avoir un objet appelé voiture et à l'intérieur de cela nous pourrions avoir toutes ces propriétés, et comment nous définissons ou comment nous référençons ces propriétés est avec un point et puis leur nom afin que nous puissions attribuer un nom de Fiat à une voiture, nous pouvons donner un modèle de 500, ainsi de suite, ainsi de suite. Ensuite, nous pouvons également assigner des méthodes à un objet, de sorte que nous pouvons avoir une fonction essentiellement, sur la voiture que lorsque nous appelons voiture.start quelque chose se passe. Mais encore une fois, je saute un peu loin, devant moi, revenons au menu sur les types de données, comment nous définissons un objet, je vais sauter en avance sur les nombres et les chaînes et descendre à quelques autres codes booléens. Fondamentalement, les Booléens ne peuvent avoir que deux valeurs, alors rappelez-vous avant quand nous évaluons ces déclarations, comme cinq égalent cinq ? Oui, c'est vrai, vrai est un booléen, donc nous pouvons affecter un booléen comme valeur à une variable. Au lieu de simplement dire cinq égal à cinq et de le mettre et dire que c'est vrai, nous pouvons réellement affecter une variable ici et disons simplement que le code de la variable, est-il vrai, nous pouvons réellement affecter les résultats de l'opérateur de comparaison ici, sorte que nous pouvons dire est cinq la même chose que cinq, si oui, attribuer vrai, est-ce vrai ? Si ce n'est pas assigner false, est-ce vrai. Maintenant, quand je tape, est-ce vrai, ça reviendra comme vrai. Comme vous le verrez, cela n'a probablement pas beaucoup de sens maintenant, mais cela m'aide en fait à créer une opération show ahead, nous ne sommes pas allés dans if then déclarations avant, mais essentiellement, si je veux créer un ici avec si, je pourrais juste dire, est-ce vrai et ensuite exécuter du code plutôt que de taper dans la comparaison explicite que nous avions auparavant de cinq égal à cinq. Maintenant, pour cela, c'est très petit, donc ça n'a pas vraiment d'importance, mais peut-être que vous avez une déclaration énorme et que vous voulez enregistrer la grosse instruction comme une autre variable, vous pouvez le faire et alors ce type de données serait booléen. Si nous vérifions maintenant, type de est vrai, et il reviendra booléen. numéro un est des tableaux, et les tableaux peuvent prendre un peu de temps à s'y habituer, mais ils sont communs dans tous les langages de programmation, nous pouvons assigner un groupe de valeurs à une variable, puis les appeler en fonction des index. Pour le démontrer maintenant, nous allons effacer ma console et faire l'exemple ici. Plutôt que de réinventer ce que j'ai fait ici, je pense que c'est un bon exemple. Maintenant, nous avons des voitures, si nous avons mis des voitures, nous allons obtenir comment la console représente un tableau, c'est comme ceci et le premier nombre nous indique réellement combien de valeurs sont dans le tableau ou combien d'éléments sont dans là, puis nous pouvons cliquer dessus pour voir les différents éléments dans leur index. Cet exemple est assez simple, il est assez facile de voir que, c'est le premier, Saab est la première valeur, c' est-à-dire la deuxième valeur, c' est-à-dire la troisième et en fait l'une des choses déroutantes ici est que le premier est réellement représenté par des zéros alors ne soyez pas confus. Si je tape des voitures avec un support carré, puis zéro, puis terminez le support carré et puis mettez un point-virgule et appuyez sur Entrée, il viendra avec Saab. C' est un peu déroutant, vous seriez aussi des développeurs, c'est que la première valeur dans un tableau est zéro, bien sûr, si nous voulions le suivant, nous tapons juste une et ensuite nous obtenons Volvo. La chose puissante à ce sujet est que si nous avons une valeur de fusil, nous pouvons réellement les parcourir et faire des choses similaires sur toutes les valeurs et vous verrez cela dans une vidéo ultérieure, mais un tableau est ce que nous pourrions donner à une boucle, pour parcourir tous ces éléments et créer du code HTML sur la page. Les tableaux sont très communs et très puissants, donc certainement une bonne chose à apprendre. Maintenant, nous revenons à notre bon ami, l'objet JavaScript. Celui-ci prendra probablement un peu plus de temps à expliquer car c'est le type de données le plus complexe qui existe, et la raison pour laquelle c'est que nous avons une paire de valeurs de nom séparées par des virgules, donc stockait beaucoup de choses dans la seule variable ou le potentiel de stocker beaucoup de choses dans la seule variable. Ici, nous avons un objet et un objet que nous pouvons définir avec ces crochets bouclés et comme vous pouvez le voir ici, nous avons des paires de valeur de nom ou des paires de valeur de clé, et sémantiquement c'est beaucoup plus agréable. Si nous revenons à l'exemple lui et les objets, vous voyez ici comment nous sommes en mesure de saisir le nom d' une voiture ou d'attribuer le nom de cette voiture comme Fiat. Eh bien, si nous allons ici et nous voyons l'exemple, je vais juste copier ça dans ma console, effacer ceci, si je cours ça, maintenant je peux appeler car.type et ça arrive une Fiat. Je peux exécuter car.color et il arrive avec du blanc, et c'est beaucoup plus agréable que ce que nous avions avant avec l'utilisation de numéros d'index, parce que peut-être il y a une gamme de propriétés différentes et cela n'a pas de sens de les aligner. Vous n'allez pas nécessairement les parcourir d'une manière itérative, vous voulez juste être capable de creuser dans une voiture particulière et d'obtenir certains attributs, c'est là que les objets sont très bons. Ce que nous pouvons faire ici sans redéfinir l'objet entier, c'est que nous pouvons changer la valeur de certains d'entre eux, donc je pourrais aller car.color égal, disons noir au lieu de blanc. Maintenant, si je sors voiture à nouveau, vous pouvez voir que c'est ainsi que votre console représentera un objet pour vous, et si je clique sur ce comme il l'a fait avec des tableaux, au lieu de ces numéros d'index, nous avons des noms. Nous avons la couleur noire, modal 500 type Fiat, et c'est donc une belle façon de travailler avec des objets en JavaScript. Je rebondit entre les types de données dans les objets, mais les objets sont un type de données très important donc ceux-ci vont de pair et il y a quelques informations ici sur les objets, puis il va plus en détail là-dedans. Nous avons un type dont nous avons parlé indéfini, dont nous avons parlé de valeurs vides donc si nous devions juste mettre une chaîne vide, essayons cela maintenant. Vous pensez peut-être qu'il pourrait être indéfini parce que la chaîne est vide mais elle est en fait définie toujours comme une chaîne parce que nous mettons ces guillemets. C' est une chaîne vide tout de même, mais c'est toujours une chaîne. Une autre valeur est null, et null n'est fondamentalement rien. Comme il est dit ici, malheureusement en JavaScript, le type de données de null est en fait un objet. Cela peut être un peu déroutant et vous pouvez considérer même un bug en JavaScript qu'un type de null est un objet, il devrait juste être null, mais fondamentalement vous pouvez vider un objet en le définissant à null. Si nous devions utiliser cet exemple, nous avons une personne qui est évidemment un objet parce que nous avons des crochets bouclés ici et nous avons des paires de valeur de nom, mais alors nous pouvons attribuer une valeur de null à cet objet, et si nous saisir le type de celui-ci, c'est toujours un objet. Ce n'est que quelques quarks dans JavaScript, ce ne serait pas la même chose dans la plupart des autres langages de programmation, mais c'est juste une petite chose à couvrir avec JavaScript. Il est important de noter que vous pouvez également vider un objet en le définissant sur undefined, et la différence entre undefined et null est un peu nuancée, mais fondamentalement, le type de undefined va être indéfini, mais le type de null va être un objet, comme nous en avons parlé ici. Rappelez-vous ici que nous avons appris à utiliser les opérateurs de comparaison qui ont deux signes égaux en eux et trois signes égaux en eux. Maintenant, si nous les regardons valeur par rapport à une valeur, elle est évaluée à true, mais si nous les regardons, sont-ils le même type de données ? Bien qu'ils ne le soient certainement pas parce que nous avons juste vérifié le type ici et le différent, donc il sortira comme faux. C' est entrer dans le minutieux et honnêtement, vous n'avez pas besoin d'être trop familier avec cela, mais c'est juste quelque chose à couvrir et il y a quelques exemples plus complexes ici, mais maintenant ça commence à entrer dans les choses plus complexes. Fondamentalement, il est important de savoir ce que sont les objets et il est important de pouvoir appeler des méthodes sur les objets et aussi comprendre les propriétés sur les objets et c'est pourquoi nous allons juste creuser un peu plus profondément dans les objets ici. Comme vous pouvez le voir, nous avons une décoration de la voiture ici avec laquelle nous avons travaillé avant, nous pouvons aussi casser cela sur plusieurs lignes comme celle-ci, donc au lieu de voiture, nous avons quelqu'un ici et nous pouvons définir les attributs de cette personne. Encore une fois, comme nous l'avons montré précédemment, nous pouvons utiliser un point, puis le nom de la propriété pour accéder à une propriété sur cet objet, nous pouvons lui attribuer des valeurs ou simplement sortir les résultats, nous pouvons également le faire de cette façon à travers un carré et ensuite mettre le nom dans une chaîne, c'est aussi une option, donc c'est la même chose que cela et nous pouvons aussi mettre dans des méthodes comme celle-ci. Nous n'avons pas encore couvert les fonctions, mais c'est ainsi que vous déclarez la fonction, nous pouvons le mettre dans un objet et l'assigner au nom de quelque chose. Je ne vais pas approfondir cela parce que nous n'avons pas encore couvert les fonctions, mais c'est ce qui se passe ici. Voici un exemple commun que vous trouverez beaucoup dans les formations JavaScript, est l'exemple de nom complet, c'est juste une fonction simple qui retournera la concaténation de deux des propriétés de l'objet. Nous avons le prénom et le nom, et peut-être que nous ne voulons pas spécifier de nom complet parce qu'il est basé sur les valeurs de ces attributs précédents. Ce que nous pouvons faire est de définir une méthode qui prend le prénom, ajoute un espace entre les deux, puis génère le nom de famille, et nous pouvons utiliser ce mot-clé pour référencer l'objet actuel dans lequel nous sommes. Lorsque nous sommes à l'intérieur de cet objet, il n'a pas encore été complètement défini, donc nous ne voulons pas utiliser le mot personne en ce moment, donc pendant que nous le définissons, nous faisons référence à cet objet que nous utilisons actuellement le mot-clé, ceci. Lorsque nous changeons le HTML interne de ce P aux résultats de cette méthode que nous avons définie ici, nous obtiendrons le prénom avec un espace, puis le nom de famille. Espérons que ce n'est pas trop d'informations, encore une fois, nous allons aller dans les fonctions, je pense que c'est peut-être la prochaine vidéo, mais nous allons certainement y entrer très bientôt. faisant défiler jusqu'à la fin de la page, nous pouvons voir des choses plus complexes ici, pas si important pour couvrir les bases en ce moment. Ce sont les principaux types de données, encore une fois, nous avons couvert le nombre et la chaîne dans leçon précédente et les Booléens ne devraient pas être trop difficiles à comprendre, il n'y a que deux valeurs possibles, vrai ou faux, les objets peuvent prendre un certain temps pour obtenir votre tête et les tableaux sont très communs. Si vous en avez besoin, revenez à cette page ou à toute autre page ici, il y a un menu entier sur les tableaux ici et nous pourrions y aller plus loin dans une leçon ultérieure. Si vous avez besoin d'être clair sur l'un de ces, les principaux, bien sûr, un nombre, une chaîne, un objet et un tableau. C' est un peu sur les types de données, dans la prochaine vidéo, nous allons en fait plonger directement dans les fonctions, ce qui est bon parce que je vous ai jeté dans le fond avec la mise en place d'une fonction ici. Dans la prochaine vidéo, nous allons couvrir les fonctions. Nous allons en expliquer plus sur ce qui se passe ici et le prendre en dehors du contexte d'un objet. Je te vois dans la prochaine vidéo. 10. Fonctions JS: Très bien, donc dans cette vidéo, nous allons couvrir quelque chose qui est super important en JavaScript, et c'est Functions. Donc, si je clique sur l'élément Menu pour Fonctions ici, nous pouvons apprendre ce qu'est une fonction et ce qu'elle fait. Donc, une fonction est juste un bloc de code conçu pour effectuer une classe particulière et il est exécuté quand quelque chose l'appelle. Fondamentalement, ce que nous pouvons faire est de mettre un tas de code dans une fonction et ensuite nous pouvons le coder à différents endroits de notre projet. Maintenant, c'est important si nous avons besoin de réutiliser le code, donc nous avons une fonction commune. Là, je vais utiliser le mot naturellement. Mais oui, si nous avons une chose commune que nous devons exécuter régulièrement, cela n'a pas de sens de l'écrire chaque fois que nous devons le faire. Il est préférable de le définir une fois, puis de l'exécuter plusieurs fois en appelant simplement cette fonction. L' autre chose que nous pouvons faire est d'envoyer des choses à la fonction afin que nous puissions mettre des variables à travers comme ceci. Voici donc un exemple très basique. Essayons nous-mêmes. Nous prenons essentiellement ce que le premier argument que nous avons mis à travers cette fonction et le second argument que nous avons mis à travers cette fonction, et nous retournons le produit des deux, et le produit signifie que nous multiplions les deux ensemble. De quoi viennent ces deux chiffres ? Eh bien, quand on appelle la fonction, on peut mettre ce qu'on appelle des arguments ici. Donc, le premier argument, les quatre, ira juste ici, dans le p1 et le second argument sera trois et ira juste ici. Donc, fondamentalement, ce que fait cette fonction est qu'elle prend le premier nombre et le deuxième nombre et les multiplie ensemble et génère ce que le résultat de cela est. Donc, si nous mettons quatre et trois, nous en aurons 12, parce que c'est ce que nous avons défini cette fonction à faire. Donc, il faut entrer ici. Donc je vais mettre 10 là à la place, exécuter ça, et maintenant tu verras que c'est 30. Mais bien sûr, on a un peu d'avance sur nous-mêmes. Certains d'entre vous n'ont peut-être même pas vu de fonction auparavant, et nous allons donc simplement couvrir la syntaxe brièvement. Donc, nous définissons une fonction en indiquant d'abord la fonction de mot, puis nous mettons le nom de cette fonction, s'il n'y a pas d'arguments qui vont dans. Donc peut-être que nous avons juste explicitement énoncé ces chiffres. Il va toujours revenir 10 fois trois. Alors nous n'avons pas besoin de ces arguments, et donc ce que nous ferions c'est que nous avons toujours besoin d'avoir des crochets ouverts et fermés, mais nous n'avons rien à mettre là-dedans. Ensuite, nous avons un crochets bouclés pour ouvrir le bloc de code. En se souvenant de la leçon de syntaxe, nous parlions de blocs de code. Tout ce qui se trouve dans ces deux crochets bouclés fera partie de la fonction. Vous pouvez donc mettre autant de choses complexes que vous le souhaitez ici, définir des variables et tout ça. Mais à la fin, il retournera un ensemble de valeur et nous pouvons le retourner en utilisant le mot-clé Return. Maintenant, nous allons obtenir le même résultat, mais nous ne pouvons plus mettre d'arguments dynamiques. Donc, si je mets 5 et 10, rien ne se passera, et si nous vérifions notre console, il pourrait même y avoir une erreur parce que nous n'acceptons pas vraiment d'arguments ici. Donc, c'est fondamentalement la syntaxe d'une fonction, et si vous voulez en savoir plus sur la syntaxe ici, vous pouvez voir ici est un exemple. Vous avez la fonction de mot-clé, vous avez le nom de la fonction, vous avez une fermeture ouverte et une fermeture de fin et vous avez autant de paramètres que vous voulez ici. Vous pouvez mettre une quantité infinie, je suis sûr, vous ne voudriez probablement pas mettre un 100 paramètres, mais je pense que vous ne pouvez pas le faire si vous le vouliez vraiment. Alors bien sûr, c'est le code à exécuter entre ces crochets bouclés. Nous avons appris l'instruction return dans cet exemple, et ici, il parle de la raison pour laquelle j'utilise la fonction. Donc, comme je l'ai mentionné précédemment, nous pourrions vouloir réutiliser le code. Donc, nous définissons le code une fois et l'utilisons plusieurs fois. Dans l'exemple ci-dessus, nous aurions facilement pu simplement le faire au lieu d'avoir une fonction et nous aurions pu facilement faire quatre fois trois, et le même résultat sortirait. On n'a pas besoin d'écrire tout ça, mais peut-être qu'on fait une sorte de calcul complexe. Peut-être que nous vérifions un modèle de base de données quand nous devons établir une connexion à une base de données, peut-être que nous pouvons, mais nous ne voulons pas mettre tout cela ici. Donc peut-être que nous voulons juste mettre, MyFunction et mettre certains à des variables et ensuite quels que soient les calculs complexes qui se produisent dans cette fonction, tout ce qu'il fait est de retourner quelque chose et il ira directement ici. Mais encore une fois, il est difficile de le démontrer sans un exemple compliqué en ce moment. Mais sachez juste que ces fonctions peuvent devenir assez grandes, et il est donc beaucoup de sens que nous devons mettre tout le code dans une seule fonction et ensuite nous sommes capables de le réutiliser un tas de fois et aussi l'utiliser beaucoup plus facilement, sachant ce qu'il va nous retourner. Voici donc un autre exemple. Nous pouvons créer une fonction simple appelée toCelsius, et quand il le fera, il faudra un paramètre, un argument, qui sera la température dans Fahrenheit, puis il faudra la température Fahrenheit et effectuer le calcul nécessaire pour le transformer en Celsius. Donc tout ce que nous avons à faire ici, c'est appeler une fonction de Celsius qui traverse un périmètre de la température à Fahrenheit et ensuite il nous renvoie la température équivalente en Celsius. Cela pourrait être un exemple plus pratique pour vous les gars, mais ça peut devenir beaucoup plus complexe. Il est important de noter que le support d'ouverture et de fermeture est essentiel pour invoquer la fonction. Juste ici, si je mets toCelsius sans mettre dans l'ouverture et la fermeture, même si vous ne mettez rien à l'intérieur, vous devez toujours le mettre là parce que sinon il va juste retourner que la définition de la fonction plutôt que le résultat de la fonction. C' est peut-être un peu une différence de nuance pour les développeurs débutants. Mais ouais, sachez juste que ça ne marchera pas à moins que vous mettiez entre crochets d'ouverture et de fermeture. Vous pouvez également utiliser des fonctions pour affecter des variables à des valeurs. Donc, ce que nous pouvons réellement faire est que nous pouvons prendre les résultats de cette fonction ou tout ce que cette fonction retourne et l'affecter directement dans une variable ici. Donc, cela prendra 77 degrés Fahrenheit et convertir en Celsius, puis le mettre directement dans cette variable. Ensuite, nous pouvons le mettre dans une chaîne ici et obtenir le résultat, et nous pouvons aussi simplement sauter cette étape où nous l'assignons et juste le mettre en ligne. C' est aussi une option. Ce sont essentiellement des fonctions. Il devient un peu plus complexe que vous commencez à utiliser des rappels et des choses différentes. Mais pour l'instant, c'est le fonctionnement de base d'une fonction. Vous avez des paramètres ou peut-être même pas des paramètres, et vous avez un bloc de code réutilisable entre les deux, puis vous l'appelez en utilisant à nouveau ce nom, mais en vous assurant d'utiliser ces crochets d'ouverture et de fermeture. Donc, ce sont des fonctions. Dans la vidéo suivante, nous allons couvrir Scope, qui maintenant nous savons comment fonctionnent les fonctions. Il est important de regarder ce qui se passe lorsque nous définissons des variables, déclarera des variables plutôt en dehors des fonctions et à l'intérieur d'elles, et pas seulement des fonctions mais des blocs de code en général. Je te vois dans la prochaine vidéo. 11. Portées JS: Donc, dans cette vidéo, nous allons couvrir quelque chose qui peut être pas si évident pendant que vous développez JavaScript, mais très important et cela pourrait réellement vous entraîner parfois pendant que vous développez pour JavaScript, et c'est l'idée de la portée. Alors allons dans l'élément de menu pour la portée, et nous verrons ici en JavaScript il y a deux types de portée, Local et Global scope. Maintenant, aucune de ces théories n'aura beaucoup de sens sans un exemple. Alors plongons directement dans un exemple juste ici. Les variables JavaScript locales sont des variables déclarées dans une fonction JavaScript. Donc, ils deviennent Locaux à cette fonction et ils ont une portée locale. Ainsi, ils ne peuvent être accessibles qu'au sein de la fonction. S Ceci est un exemple assez explicite. Si je mets un code à CarName ici, cela ne fonctionnera pas, il n'est pas déclaré dans cette portée. Mais je peux l'utiliser ici parce que c'est dans la portée de ce bloc de code. L' alternative est globale, et donc en ce moment je fais une variable. Donc, je déclare et assigne une valeur à une variable plutôt que Volvo au nom de la voiture, et puis dans ma fonction, il est déclaré dans la portée globale. Donc, je peux réellement aller dans ma fonction et la changer, et cela va changer la variable dans la portée globale. Donc, cela peut sembler évident en ce moment, mais une fois que nous commençons à utiliser les deux dans le même contexte, alors vous pouvez commencer à voir comment cela pourrait vous faire monter. Donc, ici, vous pouvez voir que si vous affectez une valeur à une variable qui n'a pas été déclarée, elle deviendra automatiquement une variable globale. Donc, c'est un intéressant dans JavaScript. Si nous ne déclarons pas réellement cela en premier en utilisant le mot-clé var, ce sera en fait une variable globale, même si nous ne l'avons pas réellement déclaré, même dans la portée locale ou la portée globale. Maintenant, il existe un mode que vous pouvez utiliser en JavaScript appelé Strict Mode. En mode strict, vous devez toujours déclarer vos variables, mais nous n'avons pas besoin de trop s'agiter à ce sujet. C' est toujours une bonne idée de déclarer vos variables. Donc, si vous voulez quelque chose comme ça, la meilleure façon de le faire serait de mettre dans une déclaration pour la variable dans la portée globale déjà. Cela vous évitera d'être frappé sur strict, mais aussi c'est bon de noter, comme c'est une bonne occasion de rendre votre déclaration et votre portée explicites. Donc, ici, il est évident que dans notre portée globale, nous déclarons cette variable dans la portée globale. Donc maintenant, il est accessible globalement, mais alors nous lui assignons une valeur dans cette fonction, mais nous pouvons également changer cette valeur et avoir cette valeur hors de cette fonction aussi parce qu'elle est globale. C' est aussi une raison pour laquelle, rappelez-vous, nous avons regardé comment vous pouvez définir une variable comme celle-ci, puis dans une nouvelle ligne, lui donner une valeur comme celle-ci. Souvent, vous attribuez toujours une valeur à une nouvelle variable. Donc, cela n'a souvent pas de sens que vous déclarez et l'assignez dans une étape différente, mais quand vous voulez mettre explicitement quelque chose dans la portée globale comme celle-ci, cela a beaucoup de sens. Donc, si nous devions le déclarer ici, il ne serait disponible que dans la portée locale, mais si je l'enlève et le mets ici, maintenant, nous le déclarons dans la portée globale et en mesure de le modifier dans la fonction mais est toujours mondiale. Espérons que cela commence à avoir du sens, mesure que vous gagnez plus d'expérience avec cela, cela commencera à se solidifier un peu plus. C' est quelque chose sur le contexte du HTML. L' étendue globale en HTML est l'objet de fenêtre, pas important que vous devez comprendre cela. Mais essentiellement la chose avec la portée est si, disons par exemple, vous avez cet exemple et seulement dans la fonction vous affectez une valeur, mais vous vouliez utiliser cette valeur en dehors de cette fonction. Donc, disons par exemple, que je voulais, faisons juste un document. Je sais que j'ai dit que je ne l'utilise pas très souvent, mais dans ce contexte nous permettra d'obtenir quelque chose sur la page tout de suite. Si je documente correctement CarName, vous verrez que rien ne sort, et la raison en est parce que c'est dans la portée locale. Donc, si je devais remettre cela ici et exécuter la fonction, vous verrez que le CarName obtient la sortie. Si nous le remettons ici dans notre exemple que nous avions auparavant, cela n'a pas fonctionné, et au lieu de déclarer la variable ici, nous venons de supprimer la déclaration de cette partie de l'affectation et nous l'avons déclarée en dehors de la fonction dans le à l'échelle mondiale, maintenant, nous sommes en mesure de le faire. Donc, c'est un très petit détail, je suppose en JavaScript, mais il est important de noter parce que ne pas savoir quelque chose comme ça et être coincé ici avec comme, « Eh bien, pourquoi ne puis-je pas sortir ce nom de variable ? » Ça pourrait vous faire monter si vous ne comprenez pas la portée. Donc c'est important de savoir. C' est à peu près ce que je dirai sur la portée. Dans la prochaine vidéo, nous allons couvrir Events. Alors je te verrai sur la prochaine. 12. Évènements JS: Dans cette vidéo, nous allons présenter brièvement EventListeners. EventListeners est quelque chose que nous allons plus en détail une fois que nous allons dans la section HTML DOM. C' est la façon la plus courante d'indiquer un EventListener. Mais vous avez déjà vu un exemple d' EventListener en ligne, alors j'ai pensé que nous allions le présenter dès maintenant. Maintenant, si vous n'êtes pas clair sur ce que sont les événements, ce sont essentiellement des choses qui se produisent sur la page et je sais que c'est vague, mais fondamentalement vous devez configurer un EventListener chaque fois que vous voulez que quelque chose se passe, quand quelque chose d'autre arrive. Par exemple, lorsque le chargement d'une page Web est terminé, vous pouvez avoir quelque chose à se produire. Lorsqu' un champ de saisie est modifié, vous pouvez faire quelque chose se produire, et quand un bouton HTML est cliqué, vous pouvez également exécuter du code. En HTML, vous êtes en fait autorisé à mettre un EventHandler en ligne à l'aide d'un attribut. La syntaxe ou la façon dont vous le faites, consiste à placer le nom de l'événement comme un attribut égal, puis à mettre en tant que chaîne l'instruction que vous voulez exécuter. Voici un exemple ici que nous avons vu quelque chose de similaire auparavant, nous sommes facilement en mesure de voir que nous voulons que cette ligne de code s' exécute sur l'événement onclick sur ce bouton particulier. C' est très explicite car le code est indiqué directement sur le bouton. Ce n'est pas toujours la meilleure façon de faire les choses, comme nous l'avons vu dans la classe précédente sur HTML et CSS, il y a une raison pour laquelle vous voudriez mettre votre code dans un autre fichier plutôt que dans votre élément réel, surtout si vous voulez qu'il exécute certains JavaScript sur plusieurs éléments. Généralement, il est juste plus propre d'avoir un fichier séparé et de configurer un EventListener. nous entrons dans cette vidéo ici, lorsque nous parlons d'EventListeners dans le contexte du DOM, vous verrez que nous sommes capables de cibler un bouton ou un certain nombre d'éléments, puis d'exécuter une instruction basée sur certains événements. Donc, si nous faisons défiler vers le bas, nous pouvons voir quelques événements HTML courants. Parfois, si vous avez juste un événement sur la page et peut-être que vous ne voulez pas écrire un document JavaScript entier, vous pouvez simplement avoir un bouton et cliquer dessus juste pour obtenir un certain résultat. Mais à mesure que votre code devient plus complexe, il est préférable de le déplacer dans son propre fichier. Donc brève petite leçon ici sur les événements JavaScript, je voulais expliquer rapidement ce que nous avons vu plus tôt avec cette méthode onclick, mais essentiellement, ce que vous devez savoir est plus dans cette section que nous allons couvrir une fois que nous entrons dans HTML DOM. C' est tout ce que je voulais couvrir dans cette vidéo. Dans la vidéo suivante, nous allons regarder plus profondément dans les tableaux et comment nous pouvons itérer à travers les tableaux, à travers les boucles. Je te vois dans la prochaine vidéo. 13. Arrays JS: Dans cette leçon, nous allons plonger plus profondément dans l'un des types de données que nous avons découvert précédemment, à savoir les tableaux. Nous allons en apprendre plus sur le fonctionnement des tableaux, et aussi en apprendre davantage sur la boucle car les boucles et les tableaux vont souvent de pair. Donc, pour commencer, cliquez sur l'élément de menu JS tableaux ici. Comme vous pouvez le voir, nous avons déjà vu cet exemple auparavant. Nous pouvons faire défiler vers le bas et nous pouvons voir que nous pouvons définir un nouveau tableau non seulement en mettant entre crochets et les différentes valeurs séparées par des virgules, mais nous pouvons également le mettre comme un nouveau tableau de type de données, puis comme au sein de cette fonction. Maintenant, si je descend, vous pouvez voir ici comment nous ciblons les différents éléments dans un tableau, rappelez-vous que zéro est le premier. Si nous voulions mettre le premier élément du tableau de voitures dans le HTML interne d'un élément de l'ID de démo, nous le ferions comme ceci. Ici, il est à nouveau, zéro est le premier élément dans le tableau, un est le second. Les index de tableau commencent à zéro. Cela pourrait vous faire monter un peu parce que ce n'est pas la chose la plus intuitive pour quelqu'un qui n'est pas programmeur. Ici, nous pouvons également accéder au tableau complet et voyons à quoi cela ressemblerait. Ici, vous pouvez voir que JavaScript est assez intelligent pour savoir qu'il s'agit d'un ensemble de trois chaînes, et il sort juste toutes les chaînes ensemble comme une seule chaîne. Il sort comme Saab virgule Volvo virgule BMW sans espace de mots. L' autre chose qui est intéressant à propos de JavaScript est les tableaux sont des objets. Si nous devons utiliser le type d'opérateur en JavaScript, il renvoie un objet pour les tableaux. Cela soulève la question de, quelle est la différence entre un tableau et un objet ? Vous devriez penser aux tableaux comme utilisant des nombres pour accéder à ses éléments. Personne zéro ici retournera John, personne entre crochets un retournera Doe, et personne entre crochets deux retournera 46. Alors que les objets utilisent des noms pour accéder à ses « membres ». Dans le cas des tableaux, ce pour quoi vous l'utilisez est quelque chose qui suit un flux linéaire. Comme nous le verrons, lorsque nous allons plus bas et parlons de boucle, vous ne voudriez pas nécessairement parcourir tout cela, peut-être que vous voulez juste saisir un bord, il n'y a pas d'ordre linéaire particulier à ces champs. Mais peut-être qu'avec cela, il y a, je sais que cela semble probablement un peu abstrait, mais vous verrez que nous entrons dans les boucles, il est beaucoup plus logique de faire une boucle à travers un tableau qu'un objet. L' autre chose qui est génial à propos des tableaux en JavaScript, est qu'ils sont construits dans les propriétés et les méthodes de tableau, donc si nous voulons trouver la longueur d'un tableau, nous pouvons utiliser la propriété de longueur, et si nous voulons trier notre tableau, nous pouvons le faire en utilisant la méthode de tri. Ici, nous pouvons voir un exemple de la propriété length, et nous avons un tableau avec évidemment quatre éléments ici, nous pouvons simplement appeler la longueur de point sur ce tableau et nous obtenons la longueur de ce tableau. Comme je l'ai dit, nous allions parler de la boucle en ce qui concerne les tableaux, et la meilleure façon de faire une boucle à travers un tableau est une boucle « for ». Je vais ouvrir cela, et vous pouvez voir ici, peut-être que nous voulons formater cette liste en tant que liste HTML, donc nous pouvons utiliser une boucle « for ». Maintenant, ce qui se passe ici, je veux séparer la boucle ici, ce qui se passe est la première instruction de la boucle « for » définit un point de départ pour cet itérateur, donc zéro, et alors c'est l'instruction booléenne, que tant que cela reste vrai, la boucle continuera, et c'est ce que vous voulez arriver chaque fois que la boucle s'exécute. Ça a l'air vraiment compliqué, mais c'est assez simple. C' est juste dire que commencer le marqueur à zéro, augmenter le marqueur d'un à chaque fois que la boucle va, et continuer à fonctionner tant que ce nombre est inférieur à Flen, et Flen ici est juste la longueur du tableau. Fondamentalement dire, sans le Mumbo Jumbo, est d'ajouter cet élément de liste pour chaque fruit de ce tableau de fruits. Ici, vous pouvez voir que nous pouvons remplacer le numéro d'index par une variable qui est en boucle. Dans la première boucle, il va être zéro, et affiche la valeur à la position zéro, qui se souvient est la première position, puis il fait une deuxième boucle et ce nombre devient un, donc il sort Orange, et puis il devient trois, sort Apple, et la raison pour laquelle il incrémente d'un à chaque fois est parce que nous avons utilisé cet opérateur ici. L' instruction ici peut être déroutante pour les programmeurs débutants, mais c'est une convention similaire à chaque fois que vous le faites, c' est essentiellement commencer le marqueur hors chemin que vous le voulez, c' est assez standard à la fin, et juste avoir un booléen pour déterminer combien de temps vous voulez l'exécuter. Ici, si vous vous souvenez, est l'opérateur de concaténation, donc nous démarrons une liste non ordonnée, et nous finissons par une liste non ordonnée ici, et entre-deux, nous ajoutons autant d'éléments de liste que nous avons besoin pour passer par le liste complète des fruits ici dans un tableau. Maintenant, vous pouvez voir comment les tableaux et les boucles fonctionnent bien ensemble. Maintenant, si c'était un objet, peut-être qu'il n'aurait pas de sens de parcourir une liste entière, et c'est peut-être là que les objets et les tableaux, la différence entre eux devient un peu plus évidente. Pour revenir à notre page sur les tableaux JavaScripts, nous pouvons utiliser quelques méthodes pour ajouter des éléments de tableau. L' un des plus courants est la poussée. On peut ajouter Lemon à ce tableau, ça ira juste à la fin. Nous pouvons utiliser la méthode de push, puis la valeur que nous voulons mettre dans. Si nous avons juste un coup d'oeil ici, nous ajoutons Lemon au tableau, et ensuite nous sortons tout le tableau à l'écran, je vais juste lancer cela à nouveau. Comme vous pouvez le voir ici, nous avons une fonction liée à un événement sur un bouton, donc chaque fois que nous cliquons sur ce bouton, il exécutera cette fonction, et si nous descendons ici, ce qui se passe avec la fonction, il faut ce tableau que nous divisons ici, ce qui est des fruits. Il pousse un élément supplémentaire à la fin, puis il change le HTML interne de notre élément avec l'ID de démo, qui est juste ici, au tableau complet qui vient d'être changé. Beaucoup de choses se passent là-bas, mais j'espère que ça a du sens. revenant ici, nous pouvons voir qu'il y a une autre façon de le faire, c' est-à-dire en utilisant une valeur dynamique pour l'index. Je recommande que le garder simple, et nous pouvons également indiquer exactement quelle position dans le tableau nous voulons placer notre élément. Par exemple, si nous voulions changer juste Banana, nous pourrions le faire en mettant zéro ici. Démontrons ça maintenant. Ce que nous avons ici, c'est que nous avons un tableau et si nous comptons ici comme position 0, 1, 2, 3, et comme je le disais en position 6, nous voulons Lemon, et ensuite nous calculons la longueur de ce tableau entier, nous créons une variable de texte vide juste pour commencer, puis nous parcourons les différents fruits, les mettons dans du texte, puis ajoutons une balise de pause après. Ensuite, une fois que cette boucle « for » est faite, nous mettons ce texte comme le HTML interne d'un élément par l'ID de la démo qui est juste ici. Maintenant, la chose intéressante que vous verrez ici, c' est que ça crée ces deux autres positions parce que, comme je vous ai montré juste ici, nous comptons pour obtenir le numéro d'index. Si vous commencez à mettre en position 6, qui est en fait la position 7, alors il y a un écart évident ici. C' est la position 0, 1, 2, 3, 4. Cinq, puis six. Ce qui se passera, vous verrez que votre tableau sera indéfini dans ces deux index qui n'ont pas été définis. Je ne m'inquiéterais pas trop à ce sujet, parce que je ne vois pas souvent ça. Si vous vouliez, juste pour ajouter du citron à la fin d'un tableau, tout ce que vous ferez est juste de changer ceci pour pousser, se débarrasser des égaux, et puis quel que soit l'index qui vient ensuite, il lui attribuera cet élément. Si je lance ça, alors vous n'obtenez pas l'indéfini. Mais si vous voulez indiquer spécifiquement où vous voulez qu'il aille dans le tableau, alors tout ce qui n'a pas été défini apparaîtra comme indéfini. L' autre chose à démontrer ici est que si vous vouliez changer l'un de ces, vous avez juste besoin de connaître son numéro d'index. Par exemple, nous voulions changer l'orange en citron. C' est à la position 1, et si je cours cela, maintenant vous verrez que notre orange a été changé un citron avant de commencer à mettre le tableau à l'écran. Pour revenir à la page, il y a une autre chose appelée tableaux associatifs. Mais en JavaScript, il ne prend pas en charge les tableaux avec des index nommés. Si vous faites quelque chose comme ceci où vous mettez le nom comme index, JavaScript redéfinira le tableau en un objet standard. Ce n'est pas quelque chose sur lequel vous devriez vous accrocher si vous êtes nouveau dans la programmation. Fondamentalement, une autre langue est qu'il y a quelque chose appelé un tableau associatif, et ce tableau associatif vous permet de sélectionner des éléments dans un tableau par un nom. Alors qu'en JavaScript, si vous faites un tableau, c'est juste par index, sinon, vous utilisez simplement un objet. Dites par exemple ici, nous avons défini un tableau de personnes et nous lui avons donné des valeurs à trois positions différentes, et si nous obtenons la longueur, il retournera trois, et si nous regardons la position 0, il est évident que ce sera John parce que nous l'avons défini ici. Mais si nous faisons la même chose et n'utilisons pas d'index numérotés, mais que nous nommons des chaînes à la place, alors nous ne pouvons pas utiliser cet index numéroté, et il finira par être un objet. Démontrons ça dans notre console. J' ai ma console ouverte ici. Si je devais définir un tableau, puis donner ses valeurs basées sur des index basés sur une chaîne, pas un nombre, et j'appuie dessus. Maintenant, si je tape Person, il arrivera à se comporter comme un objet, et nous ne pouvons pas réellement cibler le premier attribut en utilisant zéro. Si je l'ai fait, et ça apparaîtra comme indéfini. Fondamentalement, tout ce que vous devez savoir avec cela est que JavaScript ne prend pas en charge les tableaux avec des index nommés. Si vous essayez de le faire, ce que vous faites est un objet. Cela pose bien sûr la question de savoir quelle est la différence entre les tableaux et les objets ? Voici un moyen vraiment simple de le comprendre ou de résumer la différence, dans les tableaux JavaScript utilisent des index numérotés et les objets utilisent des index nommés. Dans l'exemple de voiture avant, le nom, la marque de la voiture, nous les avons ciblés en prenant leur nom, et en sortant cela. Je reviens à cette leçon, on peut avoir le nom de la voiture. Mais si vous voulez qu'il traverse d'une manière linéaire en utilisant des index numérotés, alors vous utiliseriez un tableau. Ici, c'est juste dire la même chose d'une manière différente. Ici, il parle de la façon dont vous pouvez utiliser le nouveau constructeur pour créer un tableau, vous devriez probablement éviter de le faire. Essayez de le faire de cette façon, pas de cette façon. Si nous descendons plus loin, nous entrons dans un territoire encore plus compliqué. Si le type d'opérateur renvoie un objet pour un tableau, alors comment savez-vous qu'il s'agit d'un tableau ? Il y a en fait une méthode ici que vous pouvez utiliser pour déterminer si un tableau est en fait un tableau ou un objet. Mais encore une fois, vous n'avez pas vraiment besoin de l'utiliser très souvent. Ce que je veux que vous compreniez, c'est ce qu'est un tableau ? Comment mettre à jour un tableau ? Comment sortir un tableau ? Comment faire une boucle à travers un tableau ? Quelle est la différence entre un tableau et un objet ? Techniquement, les tableaux sont des objets, mais la différence entre ce que nous avons montré précédemment dans cette leçon Objets JavaScript, ce que nous faisons maintenant avec les tableaux. Enfin, avant de terminer sur les tableaux, il y a d'autres éléments de menu que vous pourriez vouloir vérifier. Sur cette page, vous pouvez trouver d'autres méthodes que vous pouvez appliquer sur les tableaux à la chaîne. Vous pouvez pop plutôt que pousser, ce qui supprime un élément, pousser nous avons vu avant. Nous pouvons changer, ce qui est le même que la pop, qui l'enlève de l'avant. Il y a un décalage, et nous avons vu comment ça a changé les éléments. Si vous voulez en savoir plus à ce sujet, il y a beaucoup de façons différentes que nous pouvons affecter les tableaux, mais je crains que je vais passer trop de temps à ce sujet si je passe complètement à travers cette page, il y a aussi la méthode de tri des tableaux. Si vous voulez savoir comment prendre votre liste ici que vous avez stockée dans un tableau, et la trier de différentes manières, par des moyens numériques, en la comparant à un certain booléen, faisant toutes sortes de calculs complexes, certainement revenir ici et vérifier ces menus. Mais pour l'instant, tout ce que je veux que vous sachiez sur les tableaux, c'est qu'ils sont juste un moyen de stocker plusieurs valeurs dans une seule variable. Vous pouvez accéder à ces différentes variables à l'aide d'un index numéroté. Les gars, donc c'était tout ce dont je voulais parler sur les tableaux en termes de types de données que nous avons en JavaScript, nous avons des chaînes, nombres, des objets, des tableaux, ce sont probablement les plus communs, mais nous avons des dates, maths , booléens, que nous avons couvert plus tôt. Je ne veux pas entrer trop dans les détails, vous pouvez les vérifier dans la référence ici. Mais fondamentalement, j'ai l'impression que nous sommes tous bons sur les bases des principaux types de données, et dans la prochaine vidéo, nous allons enfin couvrir les conditions. Je te vois dans cette vidéo. 14. Conditions JS: Dans la dernière vidéo, nous avons fini de parler des principaux types de données dans JavaScript. Maintenant, dans cette vidéo, nous allons parler de quelque chose qui est vraiment important en JavaScript et vraiment commun. Vous avez peut-être vu une déclaration « if then », essentiellement ce que c'est, est un conditionnel. Donc, nous allons aller dans cet élément de menu ici pour les conditions JS et en apprendre davantage sur « si alors autre ». Très souvent, lorsque vous écrivez du code, vous voulez effectuer différentes actions en fonction de différentes décisions. façon dont vous pouvez le faire est d'utiliser des instructions conditionnelles. Chaque fois qu'il y a quelque chose que vous voulez arriver, si quelque chose est vrai, alors vous allez utiliser une instruction conditionnelle. C' est comme si tu disais à ton ami  : « J'irai au cinéma si on regarde ce film. Mais si on ne le fait pas, alors je n'irai pas. C' est une déclaration « si alors autre ». Donc, chaque fois que vous vous attrapez vouloir faire quelque chose en JavaScript ou dans la programmation en général, où vous voulez que quelque chose se produise seulement si quelque chose est vrai ou faux, alors vous aurez besoin d'une instruction conditionnelle. Il devrait être assez facile pour nous de comprendre ce qu'une déclaration « if » fait. Tout ce qui se passe, c'est que nous utilisons le mot-clé « if », nous mettons dans une condition entre parenthèses comme celle-ci, puis nous utilisons les crochets bouclés, rappelez-vous, comme un bloc de code pour exécuter du code basé sur si cette condition est vraie. Regardons l'exemple ici. Il est dit, « Si l'heure est inférieure à 18, alors nous voulons attribuer la chaîne de « Bonne journée » à la variable de salutation. » Essayons-le nous-mêmes. Comme vous pouvez le voir, nous avons un nouvel objet date que nous n'avons pas couvert plus tôt parce que c'est quelque chose que vous n'utilisez pas souvent, mais la date est un autre type de données que vous pouvez utiliser. Nous pouvons utiliser cette partie ici pour déterminer combien d'heures se sont écoulées dans la journée. Donc, si le nombre d'heures passées dans la journée est inférieur à 18, alors ce que nous allons faire est de mettre « Good day » dans le HTML interne de l'élément avec l'ID de la démo, qui est juste ici. Donc, au lieu de « Bonsoir », il va dire « Bonne journée » parce qu'en ce moment il est 10h00 dans mon fuseau horaire, donc c'est un exemple assez simple. En descendant, nous pouvons voir que nous pouvons également exécuter une déclaration alternative ou un bloc de code si cette condition est réellement fausse. Dans le cas de savoir si l'heure est inférieure à 18, nous pouvons dire « Bonne journée », sinon nous pouvons dire « Bonsoir ». Je pense que c'est assez simple à comprendre, et nous pouvons aussi aller plus loin et entre notre « if » et notre « else », nous pouvons mettre un « else if » et mettre une autre condition. Jetons un coup d'oeil à cet exemple. Fondamentalement, ce que nous avons ici, c'est que nous avons un moment où nous obtenons les heures actuelles passées dans la journée et nous l'assignons à une variable de temps, puis nous changeons le message d'accueil en fonction de l'heure. Si c'est moins de 10, ce sera « Bonjour » sinon, si le temps est inférieur à 20, donc évidemment si ce n'est pas moins de 10, alors il va être entre 10 et 20. Si c'est le cas, alors nous dirons « Bonne journée ». Alors si ce n'est pas le cas de l'un ou l'autre de ces deux, alors nous dirons « Bonsoir ». Donc, essentiellement ce que nous disons ici, si le temps est égal ou supérieur à 20, alors nous dirons : « Bonsoir. » La chose importante à noter ici est que tout se passe dans l'ordre, nous regardons d'abord si le temps est 10 et sinon, nous passons à celui-ci. Donc, si celui-ci se déclenche, cela signifie que ce n'est pas vrai. Il passera par ces instructions « if » « else if », et dès que c'est vrai, il exécutera n'importe quel bloc de code est à ce niveau, donc il n'ira pas à la suivante. Je le dis juste pour être sûr que vous savez, ils ne sont pas isolés. Donc, si je devais déplacer cela dans sa propre déclaration « if » et me débarrasser du « else », et exécuter ça. ce moment, nous obtenons les mêmes résultats parce qu'il vient de passer 10. Mais disons juste 11 à la place, et je clique sur « Exécuter » sur cela et cliquez sur « Essayer » voir comment il est dit « Bonne journée ». C' est parce que ces deux sont vrais et parce que celui-ci arrive deuxième, il va écraser la valeur que nous avons définie ici. Si nous revenons à ce qu'il était avant, et encore une fois, changez cela à 11, cliquez sur « Exécuter » et cliquez sur « Essayer ». Il dira « Good Morning » parce qu'il frappe ce premier, puis dès que l'une de ces conditions est vraie dans toute cette instruction « i », il exécutera ce code et rien de tout cela ne sera même jeter un coup d'oeil. J' espère que j'ai fait cela très clair, la différence entre mettre dans « else if » et une déclaration complètement nouvelle « if ». Si vous commencez à mettre dans un tas de différents « if if », donc si nous avons fait « else if » le temps est inférieur à 25, et alors nous mettrons dans un autre « else if ». Cela devrait être un signe que vous devez changer votre code, et ce que vous cherchez probablement à faire est d'utiliser une instruction switch. Revenons à ce document ici, et nous allons passer à l'élément de menu suivant pour « Switch ». Comme vous pouvez le voir ici, l'instruction switch est utilisée pour effectuer différentes actions basées sur des conditions différentes, et c'est vraiment l'alternative à « if then » si vous avez beaucoup de cas différents. Plutôt que d'écrire un très long « si ceci », « alors ce » « else if » « this then this » « else if », et juste avoir une déclaration vraiment longue, « if » avec beaucoup de « else if », il est beaucoup plus efficace d'utiliser ce commutateur et il vous permet également de définir une valeur par défaut. Voici comment cela fonctionne : vous commencez par le mot-clé « Switch » et vous mettez la variable ou la chose que vous voulez vérifier dans le premier ensemble de crochets. Ensuite, vous ouvrez des crochets bouclés et faites un bloc de code, puis utilisez le mot-clé « Case » pour vérifier si cette valeur est égale à ce qui est dans votre cas. Ensuite, vous exécutez votre code, puis vous utilisez le mot-clé « Break ». Il y a beaucoup de choses là-bas. Mais fondamentalement, une fois que vous comprenez cela, c'est très simple. Nous regardons juste le jour si c'est dimanche, lundi, mardi, et cela est représenté par ces chiffres. Donc dimanche est 0, lundi est 1. Si nous disons le cas 0, nous voulons que le jour soit égal à dimanche. Si c'est le cas 1, nous voulons que le jour soit égal à lundi. Vous pouvez voir si nous avons écrit ceci dans une déclaration « if then » ou une déclaration « if then else if », nous aurions tellement de « else if » et ce serait tout simplement désordonné. C' est donc une façon beaucoup plus propre de faire un conditionnel où il y a plusieurs cas que vous devez vérifier. Ici, vous pouvez en savoir plus sur le mot-clé break. Fondamentalement, cela nous aide juste à sortir d'un bloc de code. Plutôt que d'avoir des crochets bouclés pour chaque cas, nous avons un deux-points et ensuite nous utilisons le mot-clé « Break » pour mettre fin à ce bloc de code particulier. faisant défiler vers le bas, il y a aussi le mot-clé par défaut. Fondamentalement s'il n'y a pas de correspondance, il sera juste par défaut ce qui est dans la valeur par défaut ici. C' est toujours un bon à avoir dans le sens où vous avez peut-être du code basé sur le texte plus tard dans votre fichier. Si le cas n'était pas six ou zéro, alors vous pourriez avoir un texte indéfini et cela causerait des problèmes plus tard dans votre code. Donc, il est toujours bon d'avoir une valeur par défaut là, juste sur le cas de frange ou dans le cas où il ne correspond pas à six ou zéro ou quoi que ce soit d'autre que vous avez défini dans votre instruction switch. Il y a d'autres exemples ici. Une chose à noter est que les cas commutés utilisent une comparaison stricte. Si vous vous souvenez de ce que signifie ce signe égal à trois signifie, les valeurs doivent être du même type et de même valeur pour correspondre. Rappelez-vous, la comparaison stricte est le même type de fin de valeur. Alors que si vous vous souvenez, le double égal est juste la même valeur, mais pas nécessairement le même type. C' est quelque chose d'important à noter, mais pas nécessairement quelque chose qui ne viendra pas à l'esprit jusqu'à ce que vous commenciez à avoir des problèmes avec votre code et que quelque chose soit changé. Je pense que c'est probablement suffisant pour les conditions. Les conditions sont comme dans la vraie vie, comme si on donnait un ultimatum à quelqu'un, c'est exactement la même chose. Cela ne devrait pas vous prendre trop de temps pour envelopper votre tête autour des instructions « if then » « if else », très commun en JavaScript et l'un des blocs de code les plus courants que vous verrez lorsque vous développez JavaScript. Dans la vidéo suivante, nous allons aller plus loin dans un autre bloc de code commun que vous verrez et qui est des boucles. Si vous vous souvenez dans la vidéo sur les tableaux, nous avons abordé un peu une boucle for, pour faire une boucle à travers un tableau, mais nous allons aller plus loin dans les boucles et vous montrer d'autres boucles dans la vidéo suivante. Je te verrai dans celui-là. 15. Boucles JS: Très bien les gars, nous avons presque fini d'apprendre JavaScript général. Rappelez-vous, JavaScript est un langage de programmation autonome à part entière, mais la façon dont il interagit avec le web est via le DOM. Nous allons en apprendre plus sur HTML DOM dans la section suivante de la classe. Mais pour terminer notre apprentissage sur JavaScript général et comment fonctionne le langage de programmation, je vais juste parler un peu plus de boucles. Si vous vous souvenez, quand nous avons parlé de tableaux, nous avons couvert une boucle JavaScript pour et voici un exemple parfait de ce que vous utiliseriez une boucle. Rappelez-vous que nous avons vu une boucle for avant, et c'est la convention standard pour cela. Pourquoi aurions-nous besoin d'utiliser une boucle ? Peut-être qu'on ne veut pas écrire ça. Le problème avec cela est peut-être que le tableau est plus long que six éléments et nous voulons que cela soit dynamique. Donc, nous aimerions parcourir la liste complète des voitures et nous ne voulons pas avoir à répéter le même code encore et encore. Eh bien, une boucle for est parfaite pour ça comme nous l'avons vu avant. Mais il y a aussi différents types de boucles. Si nous en apprenons plus sur la boucle for ici, c'est une bonne référence pour ceux d'entre vous qui ont peut-être perdu un peu avec la boucle for. Cette première instruction est exécutée une fois avant l'exécution du bloc de code, et la seconde instruction définit la condition d'exécution du bloc de code, et l'instruction 3 est exécutée chaque fois que le bloc de code a été exécuté. Un exemple courant est de définir un marqueur i, démarrer à zéro, et d'envoyer une condition qu'il doit exécuter jusqu'à ce qu'un certain nombre soit atteint, et d'augmenter ce nombre à chaque fois. C' est une façon compliquée de le regarder, mais cela nous donne beaucoup de contrôle sur la façon dont nous voulons que la boucle fonctionne. Sur cette page, vous apprendrez tout sur les boucles, mais nous avons déjà couvert cette convention standard auparavant. Donc ce que je veux vous montrer, c'était pour ça. Nous avons vu comment avec for boucles, nous avons pu faire une boucle à travers un tableau, mais nous pouvons également faire une boucle à travers un objet en utilisant ceci pour dans instruction. Si nous voulions faire une boucle à travers les propriétés d'un objet, comme comment nous ferions une boucle à travers un tableau, nous pouvons utiliser cette déclaration ici. Comme vous pouvez le voir, il prend tous les noms de clés, tous les index nommés, et ne sort que les valeurs. C' est donc un moyen pour nous de faire une boucle à travers un objet comme nous le ferions dans un tableau. Allons à la boucle while, qui est une boucle différente qui est probablement un peu plus facile à comprendre. La boucle while continue et cette déclaration n'est donc pas vraie. Maintenant, cela peut être un peu dangereux parfois parce que vous voulez vous assurer qu'à un moment donné ce n'est pas vrai sinon il va juste continuer à boucler dans une boucle infinie et il peut parfois planter votre code. Comme il est dit ici, si vous oubliez d'augmenter la valeur de la variable utilisée dans la condition, la boucle ne se terminera jamais et il va planter votre navigateur. Dans l'exemple de la boucle for, vous mettez toujours dans une condition ici pour le rendre plus long afin que vous n'ayez généralement pas ce problème, mais parce que bien que ce soit plus simple et qu'il utilise simplement une seule condition, vous avez la chance que si vous n'itérez pas votre numéro ou ne changez pas cette condition, cela pourrait aller dans une boucle infinie. C' est essentiellement une chose similaire à la boucle for, elle est juste structurée un peu différemment. Au lieu de l'itérer comme un paramètre réel dans l'instruction, nous le mettons à la place dans le bloc de code. Il y a aussi la boucle do while, qui est en fait assez similaire. La différence entre while et do while est, il exécutera le bloc de code une fois avant de vérifier si la condition est vraie. Ensuite, il se répète aussi longtemps que la condition est vraie. Do fera toujours l'affaire, mais il ne continuera pas à moins que cette condition soit vraie. Je ne me trouve pas très souvent en utilisant do while, donc je ne m'inquiéterais pas trop à ce sujet. Ici, vous pouvez voir une comparaison côte à côte de pour et pendant et c'est à ce sujet. C' était probablement une brève leçon sur les boucles parce que nous avons déjà abordé un peu à ce sujet dans la leçon de tableaux. Mais les boucles nous permettent de répéter quelque chose encore et encore et de le faire de manière plus dynamique. Comme vous pouvez le voir ici, parfait exemple. Au lieu d'écrire que nous voulions ajouter deux voitures pour chaque index, nous pouvons écrire une boucle à la place. Aussi cela nous permet de vérifier la longueur du tableau et de le faire pour autant d'éléments dans le tableau qu'il y a. Cela couvre JavaScript général. Dans la vidéo suivante, nous allons sauter directement sur la façon dont JavaScript fonctionne avec le DOM. Nous l'avons déjà vu un peu, mais c' est vraiment là que JavaScript se branche sur votre page web existante et fait ce qu'il est connu pour faire, créer des pages Web interactives. Je te vois dans la prochaine vidéo. 16. Introduction à JS HTML DOM: Très bien les gars, j'espère que vous êtes excités parce que dans la section suivante, nous allons examiner comment JavaScript interagit avec HTML et crée des pages Web interactives. Faites défiler jusqu'à ce menu ici pour JavaScript HTML DOM, et cliquez sur l'intro ici. Si vous n'êtes pas familier avec le modèle de l'objet document, chaque fois qu'une page Web est chargée, le navigateur crée un modèle d'objet de document de la page et il est créé en tant qu'arborescence d'objets, essentiellement la structure HTML. Si nous allons dans « Outils de développement » et allons dans « Elements », tous ces HTML, tous ces éléments et comment ils sont tous structurés deviennent le modèle d'objet de document. Comme vous pouvez le voir, comme je survole différents éléments, il met en évidence cet élément, puis je peux cliquer et aller plus loin dans l'arbre. Une façon plus facile de voir cela, j'ai trouvé un excellent exemple en ligne. Si vous voulez juste copier cette adresse dans votre navigateur, sinon vous pouvez juste jeter un oeil sur mon écran. Fondamentalement, il s'agit d'une version simplifiée de ce que nous avons vu auparavant avec tous les détails différents au sein de ces différents éléments. Ici, vous pouvez voir que nous commençons par, en haut du modèle d'objet document est le corps, et ensuite nous avons tout ce que nous avons mis en place. Cela va être différent selon la page que vous avez. Mais la grande chose à propos de cet exemple est que si je clique dessus, il mettra en évidence la partie correspondante de la page. Je ne sais pas ce que sont div5 et div6, mais rien ne s'affiche vraiment. Si je clique sur le corps, il faut tout le corps de la page. Si je vais plus profondément dans div, vous pouvez voir qu'il met en évidence un sous-div de cette div. Ensuite, vous pouvez voir les différents éléments directement dans ce. Comme vous pouvez le voir, il y a un arbre ici, donc nous pouvons imbriquer tout le long de la ligne. Nous pouvons avoir à la toute fin, premier en-tête et deuxième en-tête pour les tables. Lorsque je clique à travers ces, vous pouvez les voir en surbrillance sur la page ici. Si on commence au sommet, on a le corps et ensuite on a cette div. Ensuite, nous allons dans ce div plus petit, puis nous allons dans ce div pour d'autres informations et nous pouvons aller dans le conteneur de liste, regarder le paragraphe en haut, puis la liste réelle, regarder les éléments individuels de la liste, puis qui met fin à l'arbre. Ou nous pouvons recommencer à partir d'ici et aller dans cet enfant de cet élément et ensuite aller dans un autre enfant de cela, qui est une table tbody. Ensuite, nous pouvons regarder les lignes individuelles, puis à l'intérieur de ces lignes, nous pouvons voir les cellules du tableau. Espérons que cette représentation visuelle le rend un peu plus facile pour vous. Mais fondamentalement HTML que nous avons mis en place sur la page, si nous regardons cette page particulière, cela crée un modèle d'objet de document. Maintenant, c'est une chose vraiment conceptuelle, mais essentiellement ce que le modèle d'objet de document nous permet de faire est naviguer dans un document HTML en se déplaçant à travers cet arbre d'objets. Peut-être que cet exemple est trop complexe, mais si je fais apparaître une page Web simple et cliquez sur ce lien ici. Ceci est une simple page Web que je viens littéralement de trouver alors. Si nous allons dans nos outils de développement pour ce clic « Inspecter », nous pouvons voir ici un exemple plus simple. Vous pouvez voir ici nous pouvons réduire et développer les différentes parties de notre modèle d'objet de document ici. La bonne chose à propos de l'utilisation de la section éléments de vos outils de développement est que vous pouvez également voir les balises HTML et toutes les informations qu'elles contiennent. Nous pouvons voir ici que nous avons corps et si nous élargissons cela et nous allons dans cette table, ce n'est pas le meilleur exemple parce que ce site est mis en place comme juste une table, qui n'est pas la façon moderne de le faire, mais bien, nous pouvons voir ici que tous les cette imbrication se déroulant dans une structure arborescente. Lorsque nous survolons ces différents éléments, nous pouvons voir l'équivalent apparaître sur la page Web. Peut-être que c'est une chose difficile à conceptualiser, mais fondamentalement, avoir cette structure d'arbre nous permet de dire, eh bien, par exemple, je veux que le premier div qui est un enfant de ce td ait un attribut de quelque chose. Ou je veux ajouter une méthode on-click au premier enfant de cette td, qui est le premier enfant de cela. Il vous permet d'écrire des sélecteurs qui fonctionnent tout le long de l'arbre et vers le bas de l'arbre. Vous commencerez à voir cela un peu plus une fois que nous commencerons à utiliser des sélecteurs. Mais si vous voulez en savoir plus sur le modèle d'objet de document et la théorie sous-jacente, vous pouvez le lire ici, mais il est important de l'introduire. Chaque fois que je parle du modèle d'objet de document, c'est de cela que je parle. C' est la page Web représentée comme un arbre d'objets qui nous aide à conceptualiser notre page HTML et aussi à cibler les éléments de cette page. C' est l'introduction au DOM HTML. Encore une fois, si vous voulez en savoir plus à ce sujet, voici la page. Dans la prochaine vidéo, nous allons tout apprendre sur le ciblage avec HTML DOM. Je te vois dans la prochaine vidéo. 17. Navigation DOM: Dans la dernière vidéo, nous avons présenté le Document Object Model et vous vous demandez peut-être, eh bien, tout est génial en théorie, mais qu'est-ce que cela fait réellement et pourquoi le Document Object Model est-il important ? C' est une bonne question et une question à laquelle nous espérons répondre dans cette leçon alors que nous discutons de la façon de cibler réellement des éléments HTML et de modifier différentes choses sur la page en fonction du modèle d'objet de document. Si je vais à l'élément de menu DOM éléments ici, nous pouvons trouver des éléments HTML par ID, nom de balise, nom de classe , sélecteurs CSS et collections d'objets. Si vous vous souvenez dans la dernière classe sur HTML et CSS, nous pouvons cibler des éléments HTML en utilisant une variété de moyens et certains d'entre eux que vous auriez vu auparavant à partir de cela. Donc, nous pouvons certainement cibler les éléments par classe et l'ID et le type d'élément qu'ils sont, tout comme nous pouvons le faire avec CSS. Ici, nous pouvons voir un exemple que nous avons découvert au début de notre classe que nous prenons le document, rappelez-vous que c'est au sommet de l'arbre. Ensuite, nous mettons un point pour mettre une méthode là-dessus et nous trouvons un élément avec l'ID d'intro. Juste pour le démontrer encore une fois, ce paragraphe ici est intro et nous voulons cibler cet élément particulier en utilisant son ID. Donc rien de nouveau là-bas. Si nous descendons ici, nous pouvons également cibler les éléments par leur nom de balise. Tout comme quand nous avons fait le sélecteur de niveau d'un élément en CSS, nous pouvons faire une chose similaire en JavaScript pour cibler tous les éléments avec un nom de balise de P. Nous pouvons également le trouver par classe. La méthode que nous utilisons pour cela est getElementsByClassName. Ceux-ci fonctionnent tous de la même manière. Je ne passe pas beaucoup de temps avec eux. Voici un moyen que nous pouvons enchaîner différents sélecteurs comme nous le ferions en CSS et le mettre en JavaScript. En utilisant le sélecteur de requête tous, nous pouvons trouver tous les P avec la classe d'intro. En semblant que vous devriez avoir une compréhension des sélecteurs CSS et CSS avant de prendre cette classe, je ne vais pas plonger profondément dans ce qui se passe ici. Si vous êtes à ce sujet, certainement revenir en arrière et regarder les fondamentaux du développement web, HTML et CSS. Ce sont différentes façons de cibler des éléments HTML. Si je passe dans le menu suivant, nous allons prendre ce que nous avons sélectionné et modifier le contenu. Une façon courante de le faire est avec point innerHTML. Donc, c'est changer une propriété sur cet élément particulier que nous avons ciblé par ID et lui donner une nouvelle valeur. Donc on l'a encore vu avant. C' est juste l'extension de la sélection d'abord d'un élément, puis de lui attribuer une nouvelle valeur. Si je fais défiler vers le bas, ce n'est pas seulement dans un HTML que nous pouvons changer. Nous pouvons changer un attribut comme le SRC d'une image. Nous pouvons changer fondamentalement quelle image apparaît sur une étiquette d'image particulière. C' est ça pour cette leçon. Ensuite, si je vais dans CSS, nous pouvons également changer les styles en utilisant JavaScript. On peut changer la couleur des choses. On peut changer la taille de la police, tout ça. Cela serait bien sûr couramment utilisé avec les événements. Si nous cliquons sur un bouton, nous voulons que quelque chose devienne rouge. Jetons un coup d'oeil à l'exemple. Si je clique sur le bouton, le titre devient rouge. Nous ciblons cet élément par son ID, en le saisissant du style. Puis dans le style, saisissant sa couleur et la changeant en rouge. Donc, cela devrait être assez simple maintenant si votre compréhension de JavaScript. Allons un peu plus loin et regardons la navigation. Tous ces différents éléments ici peuvent être considérés comme des nœuds dans le modèle d'objet de document. Donc, le document entier est un nœud de document. Chaque élément HTML est un nœud d'élément. Le texte à l'intérieur des éléments HTML est des nœuds de texte. Chaque attribut HTML est un nœud d'attribut. En fait, c'est obsolète maintenant. Ignorez celui-là. Les commentaires sont le nœud de commentaire. Fondamentalement, il y a tous ces nœuds et ils sont tous interdépendants et nous pouvons utiliser le modèle d'objet de document et la relation entre ces nœuds pour cibler différentes choses et les réorganiser. Juste un avertissement, nous allons revenir un peu théorique à nouveau et couvrir un peu sur les relations de noeud. Si nous regardons ce HTML de base, M un, deux visualisent la relation entre tous ces éléments qui sont des nœuds dans le modèle d'objet de document. On peut jeter un oeil ici. Nous avons l'élément racine, qui se trouve en haut, qui est notre balise HTML. Ensuite, nous avons la tête, qui est le premier enfant. C' est donc le premier élément qui est un sous-élément de cela. Alors le corps est le deuxième enfant. C' est aussi le dernier enfant. On peut le cibler à la tête en tant que premier enfant. Nous pouvons aussi cibler le corps comme le dernier enfant parce que c'est l'enfant qui est le dernier, évidemment. Inversement, la relation du HTML avec ce premier nœud enfant de la tête est un nœud parent, puis la relation entre la tête et le corps est un frère. C' est comme une structure familiale. Si vous avez ce qui donne naissance à ces deux-là, alors ce sont des enfants et comme vous devez le savoir, si vous avez deux enfants avec les mêmes parents, alors ce sont des frères et sœurs. À partir du HTML ci-dessus, vous pouvez lire que HTML est le nœud racine car il est en haut. Il n'a pas de parents, mais la tête et le corps ont un parent de HTML. Head est le premier enfant de HTML et body est le dernier enfant de HTML. Maintenant, vous pouvez voir que nous pouvons aller plus loin, et c'est là que nous commençons à former des arbres complexes dans le modèle d'objet de document. Nous pouvons voir que la tête a aussi un enfant, juste un enfant et nous pouvons voir que cela a deux enfants. Pourquoi est-ce si important ? Eh bien, c'est important pour naviguer entre les nœuds. Jetons un coup d'oeil à un exemple ici. Nous avons fait l'exemple où nous avons changé le HTML interne d'un élément, ciblant par son ID. Mais que faire si nous voulions cibler un élément par son ID, trouver son premier enfant, puis changer sa valeur. Eh bien, vous pouvez traverser l'arbre en utilisant une propriété comme le premier enfant. Vous pouvez également cibler le premier enfant en indiquant explicitement l'index que vous souhaitez cibler. Cela vous permet de cibler le deuxième enfant en mettant un ici. Le troisième boulot en mettant deux ici. Rappelez-vous, les index des tableaux commencent à zéro. Vous devez toujours en soustraire un dans votre esprit juste pour le ramener à ce que vous pensez être le premier index. Suite à cet exemple, nous pouvons voir ici que nous ne pouvons pas seulement saisir le HTML interne d'un élément avec l'ID de celui-ci et lui attribuer une valeur. Mais nous pouvons également attribuer une valeur qui est basée sur une autre valeur dans notre DOM. Donc, nous copions fondamentalement le HTML interne de l'élément avec l'ID de l'ID 01, qui est juste ici dans cela. Ça devrait être assez évident ce qui va se passer ici. Mais vous pouvez voir ici que nous avons copié le HTML interne du H1 dans cette balise P. En revenant à la page, nous pouvons voir ici comment nous pouvons franchir le modèle d'objet de document. Si nous essayons cela, nous pouvons voir que nous obtenons le même résultat en utilisant le mot-clé de la valeur du nœud. La valeur de nœud n'est pas quelque chose que j'utilise souvent et nous allons parler d'un moyen plus intuitif de cibler les éléments en utilisant jQuery. Donc, ne vous laissez pas trop prendre sur ces mots-clés ici. Mais la chose que je veux que vous compreniez ici, c'est que nous sommes capables cibler non seulement en fournissant, disons, par exemple, cet exemple en fournissant un ID et en le ciblant là-bas. Mais nous sommes également capables de cibler des éléments ou des nœuds par rapport à un élément ou un nœud particulier. Encore une fois, je ne vais pas le démontrer dans une vidéo ultérieure, alors ne vous inquiétez pas trop. L' une des choses que vous voyez souvent à maintes reprises est le document. Nous démarrons chaque sélecteur avec le document car il s'agit du nœud racine. Donc, nous commençons à la racine même. Si nous tapons simplement des documents. Si je vais dans la console et que je tape un document, il n'y a qu'un seul document dans la page HTML et c'est tout le document. Donc, vous n'avez pas besoin de spécifier où se trouve ce document parce que c'est la racine, si cela a du sens. Donc, la convention que vous utiliseriez est un document qui est l'élément racine, puis un sous-élément de cela. Donc essentiellement un nœud enfant. Ça devient un peu complexe maintenant et je me retrouve à me répéter souvent. Mais essentiellement ce que je veux que vous compreniez dans cette vidéo c'est comment nous pouvons cibler différents éléments dans l'arbre. Il ne doit pas nécessairement être getElementById et nous ne pouvons cibler que cet élément, mais nous pouvons cibler des éléments qui l'entourent. On peut cibler un parent de ça. Nous pouvons cibler n'importe quel nombre d'enfants de cet élément. Ainsi, nous pouvons déplacer vers le haut et vers le bas un modèle d'objet de document. Nous allons plonger plus dans cela dans les leçons jQuery en utilisant ce qui s'appelle JavaScript Vanilla, qui est ce que nous utilisons maintenant. Nous utilisons JavaScript sans aucun cadre. Nous pouvons rendre cela beaucoup plus simple en utilisant jQuery. Ne te fais pas trop rattraper. Je voulais juste vous présenter l'idée de DOM Navigation et vous faire savoir que nous pouvons cibler des éléments dans n'importe quelle relation avec quelque chose que nous ciblons avec ID ou classe ou autre. Espérons que le moment où nous arriverons à la sélection avec jQuery, vous avez une connaissance assez solide de ce qui se passe et nous pouvons simplement courir avec elle et vous saurez ce que vous faites. Cela parle un peu de navigation et de trouver comment nous pouvons cibler. Si nous revenons ici, comment nous pouvons cibler différents éléments ou différents nœuds par leur nom de balise, ID, nom de classe. Dans la prochaine vidéo, nous allons aller dans les auditeurs d'événements. Rappelez-vous que nous avons fait des événements plus tôt dans une leçon quand nous parlions de JavaScript général. Mais dans le prochain, nous allons apprendre à configurer un écouteur d'événement dans notre code JavaScript. Je te verrai dans la prochaine vidéo. 18. Écouteurs d’évènement DOM: Si vous vous souvenez ici dans la leçon sur les événements JavaScript, nous avons expliqué comment mettre un écouteur d'événement directement sur un élément en utilisant un attribut. Mais il y a en fait une meilleure façon de le faire, et c'est ce que nous allons apprendre dans cette vidéo. Allons tout d'abord à « DOM Events ». Comme vous pouvez le voir ici quelques exemples d'événements, l'événement souris sur, et l'événement click. Comme vous pouvez le voir, quand je souris dessus, quelque chose se passe quand j'ai cliqué dessus, tout un tas de choses s'est passé. Nous avons vu avant de pouvoir ajouter un attribut d'événement, mais une autre façon nous pouvons le faire est d'affecter des événements en utilisant le DOM HTML. Le DOM HTML nous permet d'assigner des éléments au HTML en utilisant JavaScript et c'est quelque chose que nous pouvons mettre dans une section séparée de notre document. Ça n'a pas à faire la queue. Fondamentalement, nous pouvons cibler l'élément comme nous le ferions normalement par ID ou par un nœud particulier, puis nous pouvons définir le clic sur pour faire une certaine chose. C' est essentiellement le même mot-clé que nous utilisons lorsque nous utilisons un attribut, mais nous le mettons sur la chaîne ici pour sélectionner l'élément, puis mettre l'événement sur l'écouteur d'événement on click. Il y a aussi sur le chargement et sur le changement. Je ne veux pas nécessairement passer en revue tous les différents événements que vous pouvez faire. Vous pouvez certainement les rechercher à travers ces exemples et en apprendre plus sur les spécifiques. Ce que je veux couvrir, c'est comment configurer ces écouteurs d'événements en utilisant le DOM. Nous avons vu l'exemple ici, mais il y a une autre façon de le faire et si nous allons dans l'écouteur d'événement DOM, nous pouvons voir la méthode add event listener. Nous pouvons ajouter un écouteur d'événement sur le clic, et lorsque le clic est déclenché, il fera cette fonction. Essayer ça. Nous avons une fonction appelée date d'affichage, et maintenant nous attachons ce qu'on appelle un écouteur d'événement, qui écoute qu'un certain événement se produise. Nous définissons l'événement qui est et nous définissons la fonction que nous voulons produire lorsque cet événement se produit. Si nous avons essayé en cliquant sur le bouton, nous pouvons voir que l'écouteur d'événement que nous attachons à notre bouton sur le clic fait ce que nous avions l'intention de faire en faisant cette fonction. n'est rien de nouveau que nous avons couvert les événements dans la leçon précédente, mais cette méthode d'écoute d'événement add est peut-être un nouveau concept. Si on descend ici, on peut voir la syntaxe. Nous pouvons simplement dire sur n'importe quel élément particulier, mettre en place un écouteur d'événement pour écouter que je clique et exécute le bloc de code ici. L' autre chose que vous devez noter est que vous pouvez ajouter de nombreux gestionnaires d'événements au même élément. Nous avons ajouté l'écouteur d'événement deux fois ici, et nous sommes en mesure d'attacher un écouteur d'événement au même élément, mais avec des fonctions différentes. Il y a beaucoup plus de choses que vous pouvez faire ici, y compris la suppression de l'écouteur d'événement afin que vous puissiez utiliser les mêmes arguments ou paramètres qu'avant, mais cette fois, vous utilisez simplement la méthode remove event écoutener et vous pouvez supprimez l'écouteur d'événement que vous avez ajouté. Il y a plus de choses que vous pouvez faire avec les écouteurs d' événements mais essentiellement ce que je voulais traverser dans cette vidéo est de savoir comment ajouter un écouteur d'événements, pas nécessairement en ligne comme nous l'avons vu auparavant, mais dans un JavaScript sur une autre page ou même au bas de la page. J' ai mentionné avant que j-query nous permet de mettre dans les écouteurs d'événement d'une manière plus intuitive. Donc, ce n'est pas trop important de se faire prendre sur ça. Nous entrerons à nouveau dans les écouteurs d'événements une fois que nous entrons dans JavaScript. Je voulais juste aller plus loin et vous montrer comment nous pouvons attacher écouteurs d' événements aux objets après les avoir ciblés à travers le modèle d'objet de document. 19. Introduction à Ajax: À ce stade, j'ai l'impression que nous avons toutes les connaissances essentielles en place en termes de JavaScript général et comment JavaScript se rapporte au DOM pour passer à jQuery, qui est ici, jQuery est une bibliothèque JavaScript que nous allons couvrir en seulement une seconde. Mais avant de le faire, je pense qu'il y a un sujet de niveau avancé ici que nous devons au moins introduire, et c'est AJAX. Si vous cliquez sur « AJAX Intro » ici, AJAX est un rêve de développeurs, selon W3Schools car il peut lire données d'un serveur Web après le chargement de la page, mettre à jour une page Web sans recharger la page, et envoyer des données à un serveur Web en arrière-plan. Fondamentalement, AJAX nous permet de travailler avec des données sur une page déjà chargée sans avoir à recharger la page. Dans cette courte leçon, je voulais juste vous présenter l'idée d'AJAX parce que chaque fois que vous voulez interagir avec des données, en utilisant JavaScript, AJAX est vraiment important. Mais en termes d'implémentation de code réelle, jQuery nous aide à rationaliser cela beaucoup plus. Dans la vidéo suivante, lorsque nous entrons dans jQuery et les vidéos restantes, nous allons apprendre à faire un appel AJAX avec jQuery. Mais pour l'instant, je veux juste attirer à la maison ce qu'est AJAX et ce pour quoi vous pouvez l'utiliser. Ici, si je clique sur « Modifier le contenu », vous verrez que le contenu de la page a été modifié. Mais d'où est-ce que ça vient ? En fait, si nous cliquons sur « Essayez-le Yourself », nous verrons ici, et cela ressemble à un désordre. C' est pourquoi je vous dis d'attendre jusqu'à ce que nous arrivions à jQuery parce que c'est juste un peu trop désordonné à mon goût, jQuery, je pense que cela rend beaucoup plus simple. Mais essentiellement le point que je veux traverser ici est lorsque vous cliquez sur ce « Modifier le contenu », vous ne voyez aucun de ce contenu dans le code réel ou sur la page. Ce qui se passe, c'est que vous le chargez à partir d'un autre fichier, et ce fichier est ici. C' est ajax_info.txt. Toutes ces informations y sont stockées. Ce que vous pouvez faire avec AJAX est d'apporter si ce sont des données, s'il s'agit du contenu d'une autre page, vous êtes capable d'ouvrir une requête et de saisir un autre contenu qui ne se trouve pas sur cette page en cours et de l'apporter sans avoir à recharger la page. Chaque fois que vous êtes sur une page Web, que vous soumettez des données ou que vous apportez de nouvelles données, et que la page Web n'a pas besoin de recharger, vous utilisez AJAX car vous pouvez charger des données et soumettre des données via JavaScript. En revenant à ici, nous pouvons voir une fonction appelée LoadDoc. Voici la fonction LoadDoc. Ce n'est pas quelque chose sur lequel je serais trop pris car nous allons le couvrir dans jQuery. Mais essentiellement, nous pouvons définir un écouteur d'événement pour exécuter cet appel AJAX quand évidemment le bouton est cliqué. Si nous faisons défiler vers le bas, nous pouvons en apprendre plus sur la théorie de AJAX. C' est JavaScript asynchrone et XML. Ce n'est pas un langage de programmation. Il utilise simplement une combinaison de cet objet XMLHttpRequest et le DOM HTML, et JavaScript pour afficher ou utiliser les données. Fondamentalement, c'est un peu technique, et vous n'avez pas besoin de connaître tous les rouages internes de celui-ci. Mais généralement lorsque vous êtes sur un site Web, et que vous cliquez sur quelque chose de nouveau, disons, par exemple, si nous cliquons sur un nouvel élément de menu ici, je vais juste cliquer sur cela, voir comment toute la page Web se recharge. Eh bien, dans l'exemple que nous avons montré précédemment, quand nous avons changé le contenu, il a apporté du contenu d'une autre page ou d' un autre fichier sans que nous ayons à recharger la page. C' est essentiellement ce que fait AJAX. Cela aussi, comme je l'ai déjà mentionné, si nous devions soumettre des données plutôt que d'avoir de nouvelles données apparaissent sur la page, nous pouvons aussi le faire sans recharger la page ou charger une nouvelle page. Pour revenir au diagramme, c'est ce qui se passe en arrière-plan lorsque vous effectuez un appel AJAX. Un événement se produit, il crée un objet XMLHttpRequest, et il l'envoie via Internet au serveur, et le serveur crée une réponse, renvoie et tout cela se produit sans que vous ayez à recharger la page. Honnêtement, tu n'as pas besoin de connaître les rouages internes de ça pour l'instant. Mais essentiellement, je voulais vous présenter AJAX avant d'entrer dans jQuery parce que la plupart des sites Web utilisent des données et utilisent un backend. Parfois, il n'est pas préférable pour l'expérience utilisateur de recharger une toute nouvelle page chaque fois que vous voulez faire quelque chose. AJAX est quelque chose que je me trouve couramment utilisé, et vous vous retrouverez probablement en utilisant aussi. Mais encore une fois, nous allons couvrir la façon de faire une requête AJAX ou un appel AJAX dans la section jQuery. Sans plus tarder, passons dans jQuery dans la prochaine leçon. Tout ce que vous avez appris ici, tous les mots clés, nous allons maintenant rendre cela beaucoup plus facile avec un framework JavaScript vraiment cool. Je te vois dans la prochaine vidéo. 20. Introduction à jQuery: Bienvenue les gars. Dans cette vidéo, nous couvrons une introduction à jQuery. Si tous ces différents ordres que nous avons appris plus tôt, semblaient longs et ennuyeux, où sont-ils ? Si tout cela semble un peu long et ennuyeux, eh bien, vous avez de la chance parce que dans jQuery, nous allons apprendre un moyen beaucoup plus facile de faire certaines des choses que nous avons apprises dans ce qu'on appelle Vanilla JavaScript, qui est JavaScript sans cadre ou bibliothèque. Pour couvrir les bases, jQuery est une bibliothèque JavaScript. C' est fondamentalement juste un ensemble de code que nous apportons dans notre projet, et ensuite nous sommes capables d'utiliser ces méthodes jQuery. Il simplifie grandement la programmation JavaScript et il est facile à apprendre. Voici un exemple classique de jQuery. Fondamentalement, vous sélectionnez quelque chose et qui saisit l'objet et vous pouvez exécuter une méthode ou vous pouvez trouver un attribut dans cela. Ici, vous pouvez voir que nous sommes en mesure de cibler le document dans son ensemble. Mais alors aussi ici, vous verrez comme une chaîne que nous avons p et ce que cela fait est qu'il cible toutes les balises p. Maintenant, ce qui est génial à propos de jQuery, c'est qu'il cible exactement la même manière que CSS. Si nous voulions mettre un sélecteur de descendant ici, nous pourrions, si vous vous souvenez de CSS. Essayons ça maintenant. Nous n'avons que trois paragraphes. Mais disons par exemple, si nous avions dans ce paragraphe une portée vers l'avant, alors nous pourrions utiliser un sélecteur descendant pour cibler uniquement la plage. Si on clique dessus, ça disparaîtra. Alors que si nous devions supprimer la portée et revenir à p, vous pouvez cliquer sur le tout. La raison pour laquelle c'est tout, c'est parce que nous utilisons le mot-clé « this ». Désolé, j'ai sauté un peu en avant. En termes de sélecteurs, jQuery est vraiment bon car vous pouvez sélectionner n'importe quel nombre de façons comme vous le feriez en utilisant CSS. Mais regardons ce qui se passe ici. Tout d'abord, nous sélectionnons le « document » à travers ce sélecteur jQuery et en utilisant cette méthode appelée ready. Vous verrez cela assez souvent dans jQuery. Nous n'exécutons le code que lorsque le document est prêt. Ici, nous ajoutons une fonction, puis à l'intérieur de ce support bouclé est ce que nous allons exécuter. Maintenant, assurez-vous, parce qu'il y a un support d'ouverture ici que vous le fermez aussi. Et puis vous terminez la déclaration comme vous le feriez en JavaScript avec un point-virgule. Vous verrez cela très souvent dans jQuery. Vous pouvez le voir là aussi. Nous avons attendu que la page ou le document soit prêt, puis nous mettons un écouteur d'événement. C' est, comme je l'ai dit, dans jQuery, il y a un moyen jQuery de le faire dans l'écouteur d'événement et c'est tout. Nous pouvons simplement mettre « .click », puis ajouter une fonction, et nous pouvons également utiliser le mot-clé de « this » pour cibler la chose que nous avons sélectionnée. Si nous avons « p », « on click », « this » .hide », c'est ce que nous sélectionnons, afin de cacher la balise p, et rappelez-vous avant quand nous avions span et nous avons mis une travée autour du « away » et nous cliquons sur « Run ». Maintenant, cela ne va pas se cacher, cela va affecter juste la portée qui est un descendant de p. Il n'a pas besoin d'être nécessairement le premier enfant. Il pourrait s'agir d'un petit-enfant ou plus loin dans la chaîne. Dans cet exemple, je sais que nous vous avons jeté une tonne de nouvelles choses, mais essentiellement ce que nous avons dans jQuery est un sélecteur, puis une méthode et avec le sélecteur, c'est super puissant car au lieu d'écrire un document. getElementsByTagName et ensuite en allant 'p', comme ceci, nous pouvons juste faire $ ('p'), et cela ne fonctionnera pas à moins que jQuery soit sur la page. C' est vrai, et nous pouvons donc cibler la même chose. Il se présente comme une sortie différente parce que cela va nous attraper une HTMLCollection. Cela nous saisit le HTML réel par défaut. Mais essentiellement, vous pouvez voir que c'est beaucoup plus long que cela. Donc, jQuery simplifie la programmation JavaScript pour nous et le rend un peu plus facile à apprendre. En fait, pour terminer cette introduction dans jQuery parce que c'était un exemple assez lourd, je veux passer par le site jQuery. Si vous juste un tel jQuery dans Google, vous pouvez voir quelques exemples de ce que jQuery fait vraiment bien. Les principales choses que jQuery rationalise pour nous sont DOM Traversal et Manipulation. Nous pouvons utiliser select comme nous le ferions en CSS, pour choisir un bouton avec la clause de continuer, et nous pouvons changer son HTML en une certaine chaîne de texte. Tu verras ça bientôt. Nous pouvons utiliser ses propres écouteurs d'événements, et nous pouvons faire Ajax d'une manière beaucoup plus agréable. Si vous vous souvenez de ce que nous avons vu plus tôt avec l'appel Ajax, c'était beaucoup plus méchant que l'appel Ajax ici. Ce sont trois des principales fonctionnalités de jQuery. Vous ne comprendrez pas complètement à quel point il est plus facile d'utiliser jQuery jusqu'à ce que vous l'utilisiez réellement. Mais maintenant que nous vous avons présenté jQuery, il est temps d'entrer dans certaines des fonctionnalités de jQuery et finalement vous amène à faire certaines de vos propres fonctions. Je te verrai dans la prochaine vidéo. 21. Effets et évènements jQuery: Bienvenue les gars. Dans cette vidéo, nous allons travailler avec jQuery pour produire des effets et nous allons parler d'événements. Comme je l'ai mentionné plus tôt lorsque nous avons d'abord couvert les événements et ensuite nous avons couvert les écouteurs d'événements en ce qui concerne le DOM, j'ai dit que nous sauterions à jQuery à un moment donné et apprendrions à y mettre en place des écouteurs d'événements. Vous savez déjà ce que sont les événements et vous avez déjà vu dans l'écouteur d'événement auparavant, mais avec jQuery, nous pouvons simplement définir un écouteur d'événement à travers cette syntaxe. Essentiellement, tout ce que vous faites est de mettre dans la méthode de Click sur l'élément ou le groupe d'éléments que vous voulez que l'écouteur d'événement continue, puis vous insérez une fonction comme première propriété de cet événement. Maintenant, ici, vous verrez une méthode d'événement jQuery très couramment utilisée, et c'est la méthode prête pour le document. Cela nous permet d'exécuter une fonction lorsque le document est complètement chargé. Si nous allons à l'explication dans la section de syntaxe jQuery, que nous n'avons pas fait, mais vous pouvez revenir et vous référer à cela. Vous remarquerez peut-être que de nombreux exemples que vous verrez en ligne y compris tous les exemples que vous voyez sur ce site, commenceront par document.ready. Ceci est bon pour empêcher tout code jQuery de s'exécuter avant que le chargement du document ne soit terminé. C' est juste la meilleure pratique d'attendre que le document finisse le chargement, puis d'exécuter votre code. Quelques exemples d'actions qui échoueraient si vous essayez de s'exécuter avant que le document ne soit complètement chargé, essayez de masquer un élément qui n'est pas encore créé, ou si vous essayez d'obtenir la taille d'une image qui n'est pas encore chargée, essayez de tout ce qui n'a pas encore été chargé causera des problèmes, donc vous devriez utiliser document.ready, puis définir une fonction ouverte ici et vous pouvez mettre tout votre jQuery là-dedans. Vous verrez cela maintes et maintes fois alors ne vous inquiétez pas de mémoriser cela, vous apprendrez cela au fil du temps. Comme vous pouvez le voir, nous pouvons simplement remplacer dans le cas où nous sommes après, et comme nous l'avons vu précédemment, nous pouvons utiliser le mot-clé ce dans le sélecteur jQuery pour référencer tout ce qu'il est sur lequel il est cliqué. Dans ce cas, si nous double-cliquez sur un certain p, le p particulier sur lequel nous avons double-cliqué est représenté par ceci. Nous avons des exemples d'autres événements, mouseenter, mouseleave, mousedown, mouseup, ainsi de suite, ainsi de suite. Nous pouvons également attacher un gestionnaire d'événements en utilisant la méthode on. La méthode on attache un ou plusieurs gestionnaires d'événements pour les éléments sélectionnés. C' est fondamentalement juste une autre façon de mettre un gestionnaire d'événements, et donc en utilisant cette méthode particulière, c'est juste activé, et puis deux paramètres, le premier paramètre est le nom de l'événement, qui est Click dans ce cas, puis le deuxième paramètre est la fonction dans laquelle vous mettez votre bloc de code dans. À peu près la même chose, juste une méthode et des propriétés légèrement différentes. Comme vous pouvez le voir ici, ce que nous pouvons faire est de définir plusieurs événements sur le même appel de méthode en utilisant ces crochets bouclés et de les diviser en utilisant des virgules. Mais je ne vois pas souvent ça la plupart du temps. C' est normal de faire ça ou de faire ça. C' est un peu sur la syntaxe sur la façon de définir vos écouteurs d'événement dans jQuery. Parlons un peu de ce que sont certaines des choses que vous pourriez faire lorsque vous cliquez sur quelque chose. Comme vous pouvez le voir ici, il y a un exemple, cacher et montrer. Jetons un coup d'oeil à cache-spectacle tout d'abord. Si je clique sur ce panneau, il va masquer et afficher cette partie ici. C' est une méthode jQuery vraiment commune et c'est assez facile. Tout ce qui se passe ici est chaque fois que vous cliquez sur un élément qui a l'ID de hide, il va cacher tous les Ps, et chaque fois que vous cliquez sur un élément qui a l'ID de show, il va afficher tous les Ps. Maintenant, ce qui se passe dans les coulisses, c'est que le style d'affichage est en train de changer. Jetons un coup d'oeil à ça maintenant. C' est la partie qu'on cherche. C' est juste ici dans le code, mais si nous faisons un clic droit dessus et cliquez sur « Inspecter » pour le voir dans notre Inspecteur. Malheureusement, il bloque maintenant donc je vais le mettre ici. Mais si nous cliquons à nouveau sur « Inspecter », nous pouvons voir ici nous avons un P. Voyons ce qui se passe. En fait, nous allons devoir déplacer la fenêtre de notre navigateur ici. Jetons un coup d'oeil à ce qui se passe lorsque nous cliquons sur « Masquer ». Vous pouvez voir ici à partir du flash que quelque chose est en train de changer et que c'est la propriété style. Maintenant, la propriété style n'affiche aucun. Si nous cliquons sur « Afficher », la propriété d'affichage de none disparaît, donc masquer il ajoute une propriété d'affichage de none et montrer qu'il supprime cette propriété d'affichage. Là, vous pouvez voir comment en utilisant une méthode, nous sommes capables de changer la propriété sur cette méthode, qui serait essentiellement la même que si nous disions spécifiquement d'aller à cette propriété de style, aller à l'afficher et le définir sur none, mais dans jQuery, c'est vraiment facile, tout ce que vous devez faire est de mettre la méthode hide là-dedans. Afficher les œuvres à peu près de la même chose. Une autre chose que vous pouvez faire est d'ajouter un paramètre à cacher et qui déterminera la vitesse que vous voulez qu'il cache, donc si vous voulez un peu de retard, vous pouvez mettre une vitesse, c'est en millisecondes, donc ce serait 1 deuxièmement. Vous pouvez également utiliser une méthode à bascule qui vous permet d' utiliser essentiellement le même bouton ou d'utiliser la même entrée pour afficher et masquer. Nous pouvons cliquer sur le même bouton et il va s'afficher ou se cacher. S' il s'affiche actuellement et que vous cliquez dessus, le bascule se déclenche et le cache, et si elle est actuellement affichée et que vous cliquez dessus, bascule agit comme l'équivalent de dot show. Masquer et afficher est un effet jQuery commun. Nous pouvons également s'estomper dans cet exemple, le panneau, mais dans n'importe quel élément d'ailleurs, nous pouvons s' estomper et nous pouvons définir à quelle vitesse nous voulons que cela se produise. Encore une fois, je ne veux pas aller trop longtemps sur tous les effets différents parce que vous pouvez simplement naviguer dans votre propre temps, mais nous pouvons aussi glisser comme ça. Peu importe ce que vous avez de la fantaisie, tout a la même convention. Vous avez juste besoin de rechercher le nom de la méthode et vous êtes capable d'avoir des animations avec votre hide and show. Voyons ce que fait l'animation. Si je clique sur « Démarrer l'animation », vous verrez qu'il anime et modifie le style de cet élément. Ce qui se passe ici, c'est que nous avons une méthode d'animation et dans cette méthode nous mettons dans un objet où nous définissons tous les styles que nous voulons prendre effet à la fin de cette animation. Si nous cliquons et essayons nous-mêmes, cela va animer cette div pour qu'elle soit laissée de 250 pixels, elle aura une opacité de 50 pour cent à la fin, elle va changer sa hauteur et sa largeur. Si je clique sur « Démarrer l'animation », tout à coup il passe de ce qu'il était à l'origine à cela maintenant. C'est plutôt cool. Comme vous pouvez le voir, il y a une gamme d'effets que vous pouvez faire dans jQuery. Vous pouvez également interrompre l'animation comme cela se produit avec cette méthode d'arrêt. Jamais vraiment utilisé celui-là avant. Une autre chose que vous pouvez faire est un rappel. L' accord avec les rappels est que les instructions JavaScript sont exécutées ligne par ligne, mais avec des effets, la prochaine ligne de code peut être exécutée même si l'effet n'est pas terminé. Essentiellement, vous pouvez avoir plusieurs lignes de code en cours d'exécution en même temps. Ce n'est pas toujours linéaire avec les effets. Une chose que vous pouvez faire, et ce n'est pas seulement avec effets jQuery, mais le concept de programmation en général, en particulier avec JavaScript, est d'avoir un rappel. Ici, vous pouvez voir que nous avons caché et que nous avons le premier paramètre aussi lent, mais alors nous pouvons également définir un rappel. Cette fonction est ce qu'on appelle un rappel et elle ne s'exécutera qu'une fois que cela aura terminé. Il y a en fait quelques situations différentes dans lesquelles vous utiliseriez un rappel, mais dans cette situation, il est évident que nous ne voulons que cette alerte indiquant le paragraphe est maintenant caché pour apparaître lorsque le paragraphe a fini de se cacher. Si nous exécutons ceci, vous pouvez maintenant voir que cela ne s'affichera que lorsque le paragraphe est masqué. Nous pouvons réellement attacher ce qui est appelé un rappel à la fin et il dira quand cela a terminé l'exécution, exécuter cette instruction. Cela aide avec le timing en JavaScript. Dans cet élément de menu final, nous avons jQuery chaînage et nous pouvons essentiellement enchaîner tout un tas de méthodes ensemble, ce qui est assez cool. Par exemple, celui-ci changerait la couleur de tout élément ayant un ID de p1 en rouge, puis glisserait vers le haut, puis glisserait vers le bas. Si nous regardons ceci, si nous cliquons dessus, il glissera vers le haut et glissera vers le bas après avoir changé la couleur rouge et l'un se produira après l'autre. Pas un exemple très pratique, mais un exemple de la façon dont vous pouvez enchaîner les méthodes tout de même. C' est à peu près tout pour les événements et les effets jQuery. J' espère que vous pouvez voir ici maintenant à quel point jQuery est cool et comment nous pouvons combiner les écouteurs d'événements et les effets pour obtenir une certaine interactivité sur notre page Web et comme je vous l'ai montré quand nous sommes allés à la page jQuery, si je retourne à la page ici, et affecte est l'une des choses les plus courantes que vous pouvez faire avec jQuery et l'une de ses principales fonctionnalités. Dans la prochaine vidéo, nous allons parler de Traversal et Manipulation, puis dans la vidéo après, nous allons parler d'Ajax. De cette façon, nous allons couvrir les trois principales fonctionnalités de jQuery. Je te vois dans la prochaine vidéo. 22. Traversée jQuery: Tous les bons gars, donc dans cette vidéo, nous allons continuer à apprendre sur jQuery et nous allons couvrir le prochain ensemble de fonctionnalités importantes dans jQuery, qui traverse et manipule. Ça sonne un pantalon très chic, mais qu'est-ce qui traverse réellement ? Eh bien, cela signifie passer à travers différents éléments HTML en fonction de leur relation avec les autres. C' est essentiellement pourquoi j'ai passé tant de temps à parler du DOM et à parler des nœuds et de la façon dont tout fonctionne. Ici vous pouvez voir une autre illustration de l'arbre DOM et avec jQuery traversant, nous sommes facilement en mesure de déplacer vers le haut, vers le bas et latéralement, à partir d'un élément sélectionné et ceci est appelé traversant. Maintenant, je ne peux pas vraiment vous expliquer à quel point c' est important de pouvoir le faire jusqu'à ce que vous soyez coincé et essayez de configurer beaucoup de ces choses avec un document en direct. Mais parfois, vous ne pouvez pas réellement affecter cette plage ou vous voulez cibler toutes les étendues d'une classe de liste de quelque chose. Vous devez être en mesure d'être flexible dans la façon dont vous êtes capable de cibler des éléments et des collections d'éléments. Si cette illustration n'a pas de sens pour vous, vous pouvez en lire plus ici. Par exemple, les éléments div est un parent de ul et c'est l'ancêtre de tout ce qu'il contient. Tous ces descendants sont des descendants de cet ul. Comment traversons le DOM ? Eh bien, on a tout ce menu ici. Parlons des ancêtres. Donc, la façon dont nous pouvons traverser l'arbre est en utilisant parent ou parents, ou parentSuntil. Un commun est parent et donc ce que cela fera est qu'il commencera par sélectionner n'importe quelle plage et il retournera tous les parents immédiats d'une plage. Jetons un coup d'oeil à leur exemple ici. Maintenant, nous commençons à devenir un peu plus compliqué mais essentiellement vous verrez que nous avons des travées imbriquées ici à l'intérieur d'un p dans ce cas et nous en avons un imbriqué à l'intérieur d'une balise li ici. Ce que nous pouvons faire est au lieu de cibler la plage pour chacun d'entre eux, nous pouvons cibler le parent de n'importe quelle plage. Nous pouvons aller span et ensuite nous pouvons utiliser la méthode parent et ensuite tous les parents de span. Nous allons maintenant appliquer cette règle de style deux. Jetez un oeil ici. Voici une représentation visuelle de ce qui se passe. Nous avons ces deux travées que nous ciblons à travers cela et nous disons que chaque parent immédiat d'une travée, nous voulons aussi appliquer la bordure rouge. Vous pouvez voir ici dans ce cas c'est un li, dans ce cas c'est un p. Peu importe quel type de balise particulier il est juste tant que c' le parent immédiat de cet élément que nous ciblons ou groupe de éléments dans ce cas. Nous pouvons également retourner les parents, ce qui renvoie tous les éléments ancêtres d' un élément sélecteur jusqu'à l'élément racine du document. Il ne sélectionne pas seulement le parent immédiat, il sélectionne tous les ancêtres. Vous pouvez voir ici que nous faisons une chose similaire. Nous commençons avec toutes les travées et ensuite nous ciblons tous les parents de toutes les travées. Comme vous pouvez le voir ici, nous avons une portée et au lieu d' appliquer un style directement sur cette plage, nous l'appliquons à tous ses ancêtres. Vous avez li, ul, div et corps, tous auront cette bordure rouge. D'accord ? revenir en arrière, nous avons un autre et c'est parentSuntil, donc avec parentSunTil il retournera tous les éléments ancêtres entre deux arguments donnés. Ce que cela nous permet de faire, c'est de donner un point de coupure, donc ça ne va pas jusqu'à l'arbre parce que tout le long de l'arbre, nous pourrions aller jusqu'au corps entier et souvent ce n'est pas trop pratique. Ce que nous faisons ici, c'est que nous sélectionnons à nouveau toutes les travées et ensuite nous appliquons n'importe quelle méthode que nous avons ici, qui est dans ce cas en appliquant une bordure rouge, nous voulons qu'elle s'applique à tous les parents jusqu'à ce qu'elle atteigne div. On commence ici et on traverse le DOM, te souviens du mot traversal ? et donc nous regardons tous les parents. Voici le premier parent. Oui, on n'a pas encore touché div, alors appliquez la bordure rouge. Ensuite, ce n'est pas un div appliqué une bordure rouge, et celui-ci est aussi celui d'un parent est aussi un ancêtre mais nous ne voulons pas appliquer le style parce que nous avons frappé le point d'attente qui est div. Parce que c'est un div, nous ne sommes plus en train d'atteindre les ancêtres. Plutôt cool, non ? L' alternative est les descendants et c'est un peu plus commun. Nous pouvons cibler tous les enfants, ou nous pouvons utiliser cette méthode de recherche vraiment cool pour rechercher les enfants d'un élément particulier basé sur un sélecteur. Ici, nous sommes capables de cibler tous les enfants de div. Jetons un coup d'oeil à l'exemple, ici où en utilisant le point de départ de tous les divs , puis nous ciblons tous les enfants de tous les divs. Ici, nous avons un div et nous ciblons tous les enfants directs de cette div. En utilisant des enfants, c'est différent des parents. Nous ciblons uniquement les enfants immédiats, pas les petits-enfants, ou plus bas, donc il ne vise pas tous les descendants. Alternativement, si nous voulions cibler tous les descendants et que nous pouvons également filtrer tous les descendants par un sélecteur particulier comme ici, nous pouvons utiliser la méthode find et donc ce que cela fait c'est qu'il commence par div et puis il trouve toutes les étendues dans tous les divs, puis nous pouvons appliquer une méthode à cela. Alors regardons l'exemple pour cela. Encore une fois, nous appliquons la bordure rouge de deux pixels solides et donc ce que nous faisons ici, c'est que nous trouvons tous les divs, puis dans les divs où trouver toutes les travées. Cela affectera toutes les travées qui sont dans un div, ce qui est assez commun. ce moment, vous pouvez voir toutes les travées sont dans les divs mais si nous devions mettre et maintenant la travée à l'extérieur d'un div. Donc, comme vous pouvez le voir, cette plage n'est pas dans un div et nous cliquons sur Exécuter. Cela n'aura pas de bordure rouge, deux pixels solides. Il doit être dans un div. Vous pouvez presque penser à cela comme tous s'étend avec les ancêtres de div. Pour revenir à ici, nous pouvons également retourner tous les descendants d'un div en utilisant cet astérisque. Essayant cela nous-mêmes, si nous voulions cibler tout ce qui est un descendant d'un div, nous pouvons utiliser cet astérisque. Maintenant, j'ai dit que je voulais revenir ici et ce que nous pouvons faire est d'utiliser ce petit filtre ici que nous avons utilisé dans find et nous pouvons le mettre comme une propriété dans la méthode children ainsi et donc ce que cela fait, très similaire à trouver. Il trouvera les descendants qui ne sont que des enfants immédiats de tous les divs et qui correspondent à cette règle de sélection particulière. Rappelez-vous de CSS, cela sélectionnera tous les p avec une classe de premier. Nous avons un p avec une classe de premier ici et il a un ancêtre immédiat de div, fondamentalement div est son parent. Nous appliquons ce style alors que nous pouvons aller jusqu'ici et nous pouvons voir que cela n'a pas la classe de premier, donc cela n'affecte pas ici. Si je devais supprimer cette partie, qui filtre par classe et recommencer, vous verrez chaque enfant immédiat qui est une balise p d'un div aura cette bordure. Mais si nous devions supprimer ce filtre par classe et que nous ne pouvons pas vraiment mettre un p à l'intérieur d'une p. Disons juste que nous recherchons enfants div de div et souvenez-vous que ce ne sont que des enfants immédiats. Si je devais mettre un autre div, disons ici et puis cette div, je vais dire, « Bonjour ». Exécutons cela et vous pouvez voir ici que nous ciblons maintenant les divs enfants immédiats d'un div. Donc, voilà, ce sont deux méthodes que nous pouvons utiliser pour cibler les descendants et parcourir l'arbre DOM. Nous pouvons également traverser latéralement dans l'arbre DOM en utilisant tous ces différents sélecteurs frères. Encore une fois, je ne veux pas entrer dans les détails ici. Si vous comprenez les ancêtres et les descendants, alors vous serez en mesure de comprendre les frères et sœurs assez facilement. Cela va cibler tous les frères et sœurs de n'importe quel h2 et cela va cibler tous les frères et sœurs de h2 qui ont une étiquette de p. Très bien, donc à peu près la même convention qu'avant. Au lieu des enfants, nous ciblons maintenant nos frères et sœurs. Donc, si vous pouvez les comprendre, vous pouvez les comprendre assez bien aussi, je pense. Mais tout est ici pour référence si vous avez besoin de vous y référer, nous avons NextJusqu'au juste comme le parentJusqu'au, donc des concepts très similaires. Enfin, nous avons un filtrage jQuery et nous pouvons l'utiliser pour trouver le premier enfant en utilisant la première méthode, le dernier enfant en utilisant la dernière méthode, et la méthode eq, qui sélectionnera un élément enfant avec cet index. Je vais juste te montrer ça brièvement. Vous pouvez voir ici que nous avons un tas de balises p et dans ce cas, le premier p serait le premier enfant, deuxième enfant, le troisième enfant, le quatrième enfant et donc dans ce cas nous pouvons prendre la deuxième p. en utilisant des numéros d'index ici, donc on représente réellement le deuxième index. Nous pouvons cibler le deuxième index en utilisant eq ici. Donc, si nous voulions cibler la balise du premier paragraphe, juste en mettant un zéro pour cibler la balise du troisième paragraphe, mettez les deux et voilà. Nous pouvons appliquer une couleur d'arrière-plan à cela. Très bien, nous pouvons également utiliser cette méthode de filtre qui met une autre condition sur ce sélecteur donc nous voulons tous les p, mais alors nous voulons seulement filtrer par p est qui ont la classe d'intro. Je ne sais pas pourquoi celui-ci existe, parce que nous pourrions probablement réaliser la même chose en le mettant dans le sélecteur comme ceci. Voyons si ça marche. Ouais, donc cela a le même effet pas sûr de quelle différence est là et nous pouvons aussi faire le contraire qui est cible ou p, puis filtrer tout ce qui est classe d'intro dans notre sélection. Cela a beaucoup plus de sens. Tous les p sauf ceux avec la classe d'intro, nous allons l'appliquer à. Très bien, donc ça couvre à peu près beaucoup de choses que vous pouvez faire en traversant. Dans le cas de manipulation, je veux dire, vous avez une gamme d'options différentes ici. Jetons un coup d'oeil à jQuery get. Il y a tellement de méthodes différentes ici que vous pouvez changer, HTML est une méthode commune. En termes de manipulation, je pense que cette vidéo sur la traversée a déjà assez longtemps. Je vais couvrir la manipulation dans la prochaine vidéo, et nous allons passer par ce menu pour te voir dans la prochaine vidéo. 23. Manipulation jQuery: D' accord tout le monde. Rappelez-vous dans la dernière vidéo, nous venons de terminer la traversée dans jQuery. Maintenant, nous savons comment obtenir un point de départ, cibler un élément particulier ou un groupe d'éléments, puis parcourir de haut en bas l'arbre DOM. Mais maintenant, une fois que nous sommes en mesure de sélectionner un élément particulier d'un groupe d'éléments, quelles sont les choses que nous pouvons faire pour les manipuler ? Dans ce menu pour jQuery HTML, nous avons quelques exemples et informations sur la manipulation DOM. Certains courants ici, texte, HTML et val, ceux-ci font des choses différentes en fonction du contexte. Dans ce contexte particulier où nous essayons de concaténer une chaîne, et nous mettons juste du texte ici sans argument, ce que nous faisons est que nous demandons à jQuery de nous donner le texte de cet élément particulier. Donc, tout élément avec l'ID de test, nous voulons apporter le texte de cela, et ici, tout comme le texte, il y en a un autre appelé HTML, qui inclut le balisage HTML pas seulement du texte. Par exemple, si cet élément avec un ID de test avait des éléments imbriqués, il apporterait cela aussi. Jetons un coup d'oeil à l'exemple. Comme vous pouvez le voir ici, nous avons deux écouteurs d'événement mis en place le bouton 1 sur clic, nous allons exécuter cette fonction qui nous donnera une alerte. Il va commencer par le texte de la chaîne, puis ajouter la valeur de texte de test, ce qui est dans ce cas parce que c'est l'élément avec un ID de tests. Montrons du texte. Là, nous allons et nous pouvons voir ici texte. Il s'agit là d'un texte en gras dans le paragraphe qui est exactement ce que nous avons ici. Si nous devions cliquer sur show HTML, nous pouvons voir la différence. Nous pouvons voir qu'il inclut aussi notre balisage HTML. Donc, en revenant à ici, en bas, vous pouvez voir que vous pouvez également saisir la valeur. La valeur est souvent utilisée avec les entrées. Donc, quand vous faites un formulaire, vous pouvez voir ici nous avons Mickey Mouse comme valeur, mais nous pouvons changer cela, et quand nous cliquons sur ce bouton, prenez la valeur de cette entrée, et nous pouvons voir ici Mickey Souris. Si nous devions changer ça en Mickey et montrer de la valeur, ça arriverait avec Mickey. Maintenant rappelez-vous, j'ai dit que cela dépend du contexte. En le mettant ici, dans le contexte d'une alerte de sortie, tout ce qu'il fait est de sortir du texte à l'écran en concaténant cette chaîne avec le résultat de ceci, nous obtenons simplement le texte. Mais si nous allons dans le menu de configuration ici, nous pouvons dire que nous pouvons utiliser exactement la même méthode dans un contexte différent, et cela va réellement définir du texte. Au lieu de recevoir le texte sur un élément qui a un ID de test1, nous pouvons définir le texte sur un élément qui a l'ID de test1. Jetons un coup d'oeil à l'exemple. Ici, nous avons trois écouteurs d'événements et trois boutons. Si nous cliquons sur le premier bouton, il exécutera cette fonction qui définit le texte de ce paragraphe ici qui a un ID de test1 sur « Bonjour monde ». Si je clique sur définir le texte, vous verrez que nous sommes capables manipuler le texte dans celui-ci pour être ce que nous déclarons être. Ici, nous pouvons insérer du HTML dans test2. Cliquez sur définir HTML et voir que nous sommes en mesure de mettre dans ce HTML, et vous voyez qu'il met déjà en pause le HTML pour nous. Nous ne voyons pas réellement ces balises, mais nous voyons le résultat du HTML. Enfin, nous pouvons définir la valeur de ce champ d'entrée sur Dolly Duck, comme nous l'avons dit ici, et Wallah, voilà. C' est une leçon importante à noter, ces trois méthodes signifieront différentes choses basées sur le contexte et c'est quelque chose que vous pourriez voir tout au long de jQuery obtenir et définir ont souvent les mêmes méthodes, mais le contexte changera ce qu'ils font réellement. C' est tout pour ça, à part la méthode attr. Attr va saisir la valeur d'un certain attribut, donc nous pouvons saisir l'attribut href d'un élément particulier. Ce sera probablement un lien dans ce cas car il a href. Ici vous pouvez voir que nous avons ceci une étiquette. Que faire si nous voulions obtenir la valeur de cet attribut ? Eh bien, nous pouvons l'obtenir en utilisant cette méthode ici, en utilisant A-T-T-R, puis en mettant le nom de l'attribut que nous voulons saisir. Si nous cliquons sur ce bouton, nous pouvons voir que la valeur href est maintenant affichée sur notre écran. Si nous revenons en arrière et allons au menu défini, vous verrez que nous pouvons faire la même chose avec attribut mais en le définissant. Au lieu d'un paramètre, nous en avons maintenant deux, donc nous saisissons n'importe quel nom d'attribut que nous voulons changer, et nous mettons la valeur que nous voulons qu'il soit. Nous allons également ouvrir un parenthèses bouclés avec attribut et en définir plusieurs en même temps. Nous pouvons dire href, nous voulons être ceci et titre, nous voulons être ceci. Jetons un coup d'oeil à ce que cela fait réellement. Si nous cliquons sur ceci pour changer le href et le titre, nous ne pouvons pas voir quoi que ce soit changer sur notre page ici, mais si nous cliquons sur l'inspecter et regardons le code, nous pouvons voir que le href est maintenant ce que nous l'avons défini. Si je déplace cela sur le côté, nous pouvons voir que le href est maintenant ceci parce que nous avons défini cette valeur ici en utilisant attr, et nous avons également défini l'attribut title sur w3Schools jQuery Tutorial ici. Si je devais changer ceci en titre un lien génial, lançons ça, et puis nous allons inspecter cet élément. Vous verrez ici que le titre est un titre jusqu'à ce que nous cliquions sur le bouton et puis maintenant c'est un lien génial. Nous pouvons à la fois obtenir et mettre avec attr aussi. En descendant le menu, nous pouvons voir ajouter ici. Pour ajouter des éléments et du contenu, nous avons ajouté, prepend, après et avant. La différence entre tous ces éléments est que l'ajout insère du contenu à la fin des éléments sélectionnés. Prepend le mettra au début, après que nous mettrons le contenu après les éléments sélectionnés, et avant de l'insérer avant les éléments sélectionnés. Alors jetez un coup d'oeil à ça ici. Nous avons une balise p, et nous allons ajouter du texte à cette balise p. Si je vais dans l'exemple ici et que je clique sur ajouter du texte, nous avons des écouteurs d'événements sur ce bouton et dès que je clique sur ce bouton1, il trouvera tous les ps et ajoutera cette chaîne particulière de HTML. Nous avons deux ps ici et maintenant si nous faisons un clic droit et inspectons cela, nous verrons que nous avons un morceau de texte ajouté avec les balises b dedans pour le rendre gras dans cette p. Encore une fois, il y a beaucoup de façons de le faire. Nous pouvons également préparer avant et après. Je vous encourage à aller lire cette référence. N' allons pas dans tous les exemples en ce moment, mais vous pouvez également supprimer certains éléments, vider les éléments enfants d'un élément sélectionné. Vous pouvez également manipuler CSS en ajoutant des classes, en supprimant des classes, basant des classes et vous pouvez utiliser la propriété CSS pour modifier la valeur de définition des propriétés. Comme vous pouvez le voir, je suis juste en train de passer par la fin ici. Vous avez la référence ici si vous en avez besoin. Mais essentiellement, ce que je voulais vous montrer était ces choses communes pour obtenir et définir des choses communes que vous devrez faire une fois que vous traverserez le DOM, sélectionnez ce que vous voulez sélectionner, puis venez ici pour manipuler. Cela couvre à peu près la deuxième fonctionnalité de base de jQuery, traversal et manipulation. Dans la vidéo suivante, nous allons couvrir la troisième plus grande fonctionnalité de jQuery et c'est AJAX, puis après cela vous amènera dans vos projets de classe. Pas très longtemps, jusqu'à ce que vous soyez prêt à aller dans le monde et à le faire vous-même. Je suis impatient de vous voir dans la prochaine vidéo sur AJAX. Je te verrai alors. 24. AJAX jQuery: Tous les bons gars, donc dans notre dernière vidéo sur jQuery, nous allons couvrir AJAX. Plongons directement dans et couvrirons l'introduction. Comme vous pouvez le voir ici, il utilise le même exemple avant que nous avons vu lorsque nous avons couvert une introduction à AJAX et JavaScript, nous avons déjà couvert ce que fait AJAX. Mais en termes de jQuery, ce que nous pouvons faire avec AJAX est de créer un appel AJAX en utilisant jQuery est des méthodes, que vous pouvez voir ici sans jQuery, codage AJAX peut être un peu délicat. C' est délicat car en tant que différents navigateurs avec une syntaxe différente, et comme vous l'avez vu avant, si je viens d'évoquer cet exemple AJAX à partir de quand nous faisions du JavaScript vanille, c'est ce que vous avez affaire quand vous faites un appel AJAX en utilisant JavaScript sans jQuery. Ici, dans la page suivante, vous pouvez voir comment nous sommes en mesure d'utiliser jQuery pour charger certains contenus en utilisant AJAX. Ici, l'exemple le plus simple est la charge. La charge par points est simple mais très puissante comme elle l'indique ici et nous permet de charger des données à partir d'un serveur et de placer ces données de retour dans un élément sélectionné. C' est une aubaine, alors essayons-le nous-mêmes, et comme vous le voyez ici, nous pouvons simplifier tout cet appel AJAX complexe en utilisant simplement .load, et cela chargera tout le contenu de ce fichier dans ce qui est sélectionné ici. Nous sélectionnons tous les éléments avec un ID de div, qui, parce que nous utilisons ID, ne devrait être qu'un sur la page, et c'est juste ici. Maintenant, si je clique sur ce bouton, maintenant, vous verrez que tout dans cette div a maintenant changé car il est chargé dans un contenu externe. Vraiment cool. Vous pouvez également ajouter un sélecteur jQuery au paramètre URL. Ici, vous allez charger le contenu de l'élément avec un ID de p dans la démo de fichier test.txt dans un div. Il vous permet essentiellement de filtrer. Je veux seulement que les éléments avec un ID de p1 de ce fichier particulier soient chargés dans cet élément particulier qui se trouve sur notre page. Si nous regardons et essayons nous-mêmes. Encore une fois, nous ne pouvons pas voir le contenu de cette page particulière, mais nous pouvons l'imaginer. Si je clique dessus, vous pouvez voir que nous allons seulement obtenir la partie du fichier texte qui est un élément de l'ID de p1. Ici, nous obtenons seulement l'élément avec un ID de p1. Probablement plus commun que la charge dans mon expérience, est d'obtenir et de poster AJAX. Encore une fois, vous avez besoin d'un backend pour ceci ou une source de données à brancher, il est donc difficile de montrer un exemple concret, mais nous pourrions y arriver dans le projet de classe, le jQuery GetMethod demandera des données à partir d'un serveur avec une requête GET. Dans le développement web et la programmation back-end, il y a ces requêtes, code, gets et publications. Cela parle plus du développement web backend. Mais essentiellement, ce que nous faisons ici est d'obtenir des données lorsque nous faisons une demande get. Ici, si j'utilise cette getMethod, je peux cibler l'adresse spécifique, alors je commence une fonction avec deux paramètres, les données et le statut, et je peux récupérer les données et l'état. Jetons un coup d'oeil à ce que ça ressemble. Si je clique sur ce bouton, je recevrai une alerte et il reviendra avec les données qu'il revient de cette adresse, et il reviendra avec un statut aussi. Si je clique sur ces données, ce sont quelques textes d'ici au fichier ASP externe, état, succès. Évidemment, le statut est le succès parce que nous avons récupéré les données. C'est plutôt bien. Si je vais inspecter ça et que je vais en réseau, j' espère pouvoir vous montrer ce qui se passe ici. Déplaçons ça sur le côté, et effacons cette console. Si je clique sur ce bouton, vous verrez que nous avons fait un appel à la démonstration soulignement test.ASP, et maintenant nous pouvons réellement entrer et inspecter ce qui s'est passé. Nous avons fait une demande get à cette URL particulière, et le code d'état est 200, qui est vert et si bon, et nous obtenons un tas d'autres informations ici. Mais je voulais juste démontrer, vous n'avez pas besoin de comprendre pleinement comment utiliser ce panneau, mais je démontre juste qu'une requête s'est produite en arrière-plan, et nous avons récupéré des données avec succès. Si je retourne ici, nous pouvons poster des données en utilisant la méthode jQuery post, donc les paramètres pour cela seront l'endroit où nous voulons l'envoyer, les données à envoyer, et le paramètre de rappel, ce que nous voulons arriver à la fin. On a une chose similaire ici. Cela va confirmer que nous avons été en mesure d'envoyer ces données à cette adresse particulière. Si je clique sur cela, il est dit, Données : Cher Donald Duck. J' espère que vous vivez bien à Duckburg » et le statut est réussi. Au lieu de récupérer ces informations, nous avons les informations ici et nous les envoyons à cette adresse. Encore une fois, n'a pas un sens parfait, sens pratique parfait jusqu'à ce que nous ayons un backend ou un point de données à envoyer ou à partir de, mais c'est AJAX. Essentiellement, c'est l'interface de JavaScript avec le backend. et vous aurez donc besoin de comprendre ce qui se passe dans ces adresses particulières qui devront être transmises soit par votre propre connaissance du backend que vous avez traité vous-même, soit par quelqu'un qui est un back-end développeur ou source de données, ou si vous utilisez une API, vous devrez peut-être vérifier leur documentation et voir ce à quoi vous devez faire votre demande. Mais bien sûr, AJAX est probablement l'un des sujets les plus complexes dans jQuery. Vous pouvez en lire plus à ce sujet. Mais vraiment, vous ne comprendrez pas complètement AJAX tant que vous n'avez pas une compréhension du backend aussi, parce que backend est l'endroit où vous allez obtenir les données. Cela couvre jQuery pour nous. Je suis excité maintenant les gars, parce qu'il est temps pour votre projet de classe. Nous avons couvert toutes les bases dont vous avez besoin pour commencer à travailler avec JavaScript. Dans la vidéo suivante, nous allons commencer avec le projet de classe, et en fait vous faire écrire du code. Je suis excité pour ça. Je te verrai dans la prochaine vidéo. 25. Projet de cours - Introduction: Dans les prochaines vidéos, nous allons parler de vos projets de classe. Comme JavaScript est assez large dans ce qu'il est capable d'accomplir, votre projet de classe est aussi assez large. Tout ce que je veux que vous fassiez est d'utiliser vos nouvelles connaissances de JavaScript pour créer un nouveau projet web ou améliorer un projet web existant que vous avez. Si vous êtes assez confiant pour courir et créer votre propre projet, alors allez-y. Sinon, ce que j'ai fait, c'est que j'ai créé cet exemple de projet, que nous allons voir dans la prochaine vidéo. Mon idée pour cette petite application simple est une page qui fournit une liste de Pokemon. n'y a que deux étapes à franchir. Nous allons avoir un bouton qui va charger dans une liste de Pokemon à partir d'une source externe, puis, nous allons permettre à l'utilisateur de cacher chacun d'eux avec un clic d'un bouton. Honnêtement, il y a tellement de choses différentes que vous pouvez faire avec JavaScript et elles dépendent d'autres éléments et d'autres sources de données, donc il se trouve en quelque sorte au milieu. Il fonctionne mieux lorsque vous souhaitez inclure des fonctionnalités sur une application déjà existante. C' est un exemple assez basique, mais même quand même, vous allez apprendre beaucoup en étant capable de faire quelque chose comme ça. Encore une fois, vous pouvez simplement exécuter avec cette petite description ici, créer votre nouveau projet, ou améliorer un projet existant. Cependant, si vous êtes désemparé ou si vous ne savez pas quoi faire, vous pouvez suivre notre projet de classe. Une fois que nous avons ceci comme point de départ, vous pouvez avoir plus d'idées sur la façon de l'améliorer, et cela pourrait vous donner un peu de confiance pour développer ce projet, ou ramener ces connaissances à vos propres projets. Encore une fois, n'hésitez pas à ignorer la vidéo suivante si vous voulez simplement créer votre propre projet. Après la prochaine vidéo, nous allons entrer dans la conclusion. N' hésitez pas à passer de l'avant à cela. Sinon, si vous voulez vous joindre avec moi pendant que je construis cette petite application, alors restez à l'écoute pour la vidéo suivante. Je te verrai là-bas. 26. Projet de cours - Suivi: Dans cet exemple de projet de classe, nous allons utiliser certaines des choses que nous avons apprises dans les leçons précédentes, telles que Ajax, comme les écouteurs d'événements et un peu de traversée du DOM également. La première étape, charger une liste de Pokemon à partir d'une source externe. Nous allons bien sûr utiliser Ajax pour ça. Et la source externe est ce qu'on appelle une API. Je ne veux pas entrer dans une grande quantité de détails sur les API, car pour moi au moins je trouve beaucoup plus facile à comprendre une fois que je commence à utiliser une API plutôt que de me l'expliquer. Nous allons juste plonger directement dans cela, et ensuite la deuxième partie est que nous allons permettre à l'utilisateur de cacher chacun d'eux en un clic sur un bouton. Honnêtement, nous pourrions ajouter une liste de dix choses différentes ici, mais c'est juste pour vous aider à démarrer, et les premières étapes seront les mêmes pour n'importe quel projet JavaScript en termes de création d'une page web, en apportant jQuery, et commencer à exécuter certains écouteurs d'événements et différentes fonctions. La première chose que je vais faire est d'ouvrir une fenêtre de recherche. Je vais aller sur mon bureau et créer un nouveau dossier pour notre projet. Je vais juste l'appeler projet JS, pas le nom le plus inventif, et tout comme je l'ai fait dans la classe précédente sur HTML et CSS, je vais juste copier l'exemple sur les écoles W3 pour le HTML. Si vous voulez faire la même chose et aller sur w3schools.com, cliquez simplement sur HTML et ils vous donnent un exemple de base. Je vais copier ça. Je vais ensuite ouvrir un éditeur de code. Le mien est atome, et je vais créer un nouveau fichier, coller dans ce code et le sauvegarder tout de suite sans rien changer. Je vais aller dans mon projet et je vais l'appeler Index.html, comme nous l'avons fait dans la classe précédente. vais faire un retrait ici, et ce que je vais faire est de changer le titre de la page en Pokemon, changer le premier titre en Pokemon, et au lieu de cette balise de paragraphe avec un paragraphe aléatoire là-dedans, je vais remplacer cela par un div, lequel nous mettrons le contenu. Je vais d'abord l'ouvrir et le fermer, laisser une place pour l'identité, et je vais appeler ça la liste de poke-list. Avant cela, je vais créer un bouton que je peux utiliser pour cliquer sur, puis j'apporterai la liste de Pokemon à partir de la source externe. Je vais lui donner un identifiant pour obtenir le bouton Pokemon, et puis je vais écrire ce texte là, cool. Je vais mettre ça sur le côté. Ce que vous voulez faire maintenant est de le charger dans votre navigateur. Va saisir ceci, faites-le glisser ici, et maintenant rien ne se passera parce que nous n'avons pas encore de JavaScript. Deux choses que je veux entrer dans le projet avant commencer à écrire du code nous-mêmes sont Bootstrap et jQuery. Vous auriez vu bootstrap dans la classe précédente sur HTML et CSS. Si ce n'est pas le cas, Bootstrap est juste un framework CSS. C' est la bibliothèque HTML, CSS et JavaScript la plus populaire au monde selon leur propre site Web, ce que je vais faire est juste de cliquer sur télécharger ici, et cela va vous donner tous les différents fichiers dans bootstrap, mais nous sommes juste intéressés par les fichiers CSS. Je vais télécharger ça. Il se téléchargera assez rapidement. Je vais ouvrir une nouvelle fenêtre de recherche pour parcourir mon téléchargement. Je vais développer ce répertoire, supprimer l'ancien répertoire dans la corbeille, et je vais aller dans CSS et juste saisir bootstrap.css et puis le faire glisser ici. Je ne vais pas utiliser les autres trucs, donc je suis heureux de supprimer tout ce dossier, et voilà. Nous avons bootstrap dans notre projet. La prochaine chose que nous devons télécharger est jQuery. Si nous cherchons juste jQuery et allons sur leur site Web, nous pouvons à nouveau télécharger jQuery ici et nous pouvons obtenir le compressé ou le développement, n'a pas d'importance. Je vais juste être compressé parce que c'était le premier lien. Je vais revenir à notre projet et je vais cliquer sur Enregistrer. Cool. On a les deux dossiers là-dedans. L' étape suivante consiste à lier, et vous devriez vous souvenir de cela de la classe précédente, ou si vous connaissez déjà un peu de HTML, nous allons le faire dans la tête. Je vais lier la feuille de style en disant link rel="stylesheet », puis je crois que l'attribut est href, et c'est juste bootstrap.css. Ensuite, je vais apporter le script jQuery. Je vais créer deux balises de script. Je vais mettre une adresse ici. Je vais juste copier et coller le nom de fichier exact, le mettre là. Maintenant, ce que je veux faire pendant que nous sommes ici est mis dans notre propre fichier JavaScript, que nous n'avons pas encore construit, et un nom commun pour cela est app.js ou index.js ou main.js. Je vais juste l'appeler app.js. Peu importe ce que vous appelez ça. Pour vérifier si tout fonctionne bien, je vais cliquer sur un nouveau fichier, et je vais mettre dans un journal de console du fichier js chargé. Ensuite, je vais enregistrer cela et aller dans mon projet et utiliser exactement le même nom que j'ai mis dans l'attribut source. C' était app.js, comme vous pouvez le voir ici, app.js, app.js. Nous allons mettre un point-virgule dessus pour nous assurer que, c'est la fin de la déclaration, et maintenant je peux rafraîchir la page. Maintenant, une chose que vous remarquerez est que le style a complètement changé et c'est parce que nous utilisons bootstrap. Juste pour amorcer un fichier, HTML un peu plus avant de continuer, je vais donner au bouton une classe de BTN et ensuite BTN primaire, et cela nous donnera un style de Bootstrap, et l'autre chose est, Je vais placer tout ça dans un div avec le conteneur de classe. Ça va le rendre un peu plus agréable. Tu verras dans une seconde ce que ça fait. Maintenant, lorsque je rafraîchis la page, c'est dans un conteneur qui est réactif. Cool. La dernière chose à vérifier si tout fonctionne est d'aller dans ma console. Je vais le faire avec la commande Alt I sur le Mac, et voilà, il dit ici que le fichier js est chargé, qui signifie que nous sommes en train de charger dans ce. Nous pouvons dire qu'il se charge dans Bootstrap parce que nous obtenons ces styles. Nous pouvons dire qu'il charge notre fichier app.js car il exécute ce code, nous ne sommes pas encore confirmés s'il exécute jQuery. Nous pouvons réellement exécuter quelque chose dans le navigateur en utilisant un sélecteur jQuery. Je vais sélectionner le document. Je vais lancer cela, et vous pouvez voir qu'il sélectionne le document. Nous savons que jQuery fonctionne. Nous savons que nous avons notre fichier JavaScript lié, et nous savons que Bootstrap est également lié. Maintenant, nous sommes prêts à commencer à écrire du code. Maintenant, l'API pour obtenir le Pokemon est @pokeyapi .co. Je vais aller à cette page Web, et comme vous pouvez le voir ici, vous pouvez mettre différentes choses dans cette boîte, cliquez sur « Soumettre », et il vous dira quelle est la réponse. J' ai expérimenté avec cela à l'avance, et pour obtenir la liste de Pokemon, nous avons juste besoin de lancer cette adresse, et vous pouvez littéralement simplement copier l'ensemble, il ne vous permet pas réellement de copier à partir d'ici. Mais si je devais aller dans un endroit différent dans mon navigateur et juste copier cela à travers, vous verrez ici, il viendra comme ça. J' ai en fait un plug-in qui rendra les données un peu plus agréable. Le tien ressemblera à ce qu'il avait avant, avant qu'il ne commence. Donc ce sera juste un tas de textes comme ça l'était pendant une fraction de seconde. Le plug-in que j'utilise pour cela si vous êtes intéressé, est la vue JSON. Oui, si vous voulez que votre JSON apparaisse bien comme ça, avec la possibilité de s'étendre et de se contracter. Vérifiez définitivement la vue JSON. Bref, assez de cette tangente. Je vais garder cette adresse exacte à portée de main parce que dans notre appel Ajax, nous allons appeler cette API particulière. Pour revenir ici, ce que je vais faire est de supprimer ce journal de la console, et je vais commencer avec un document jQuery, et cela commence toujours avec la fonction prête pour le document. Ne sois pas rattrapé par ce que je fais ici. C' est une fonction assez standard, toujours à peu près la même chose. C' est juste une question de mémoriser, et dans cette fonction, vous allez mettre toutes les autres fonctions que vous voulez exécuter sur la page. Cela garantit simplement que le document est prêt avant de commencer à exécuter ces fonctions. La première chose que je veux faire est de configurer un écouteur d'événement, et l'écouteur d'événement que je veux configurer est de vérifier si ce bouton est cliqué, et sur le clic, nous allons charger dans la liste Pokemon. Je vais démarrer un sélecteur jQuery. Rappelez-vous que nous avons appelé le bouton, obtenez le bouton Pokemon. Je vais ouvrir cela, mettre un # dans parce que c'est comme ça que nous ciblons les ID, et je vais utiliser cette méthode de création d'un écouteur d'événement. Fonction et puis tout ce que nous mettons à l'intérieur de ce bloc de code sera ce qui se passe lorsque nous cliquerons sur ce bouton Pokemon. Nous pourrions tester cela et mettre dans le bouton de journal de la console cliqué, et maintenant si je retourne à cette page avec ma console ouverte, si je clique sur le bouton, vous pouvez voir et ce nombre va monter. Il ne le répétera pas. Il va juste mettre un numéro à côté. Si c'est exactement la même chose, vous verrez ce numéro monter et le texte sortira, bouton cliqué. Nous savons que cet écouteur d'événement fonctionne. Mais ce que je veux arriver, c'est que je veux faire une requête Ajax à cette API et apporter ces Pokemon. Ce que je vais faire est de faire une requête get en utilisant jQuery, et le premier paramètre sera l'URL. C' est l'URL juste ici. Le deuxième paramètre va être une fonction. Juste pour se rappeler comment nous créons cette fonction get, je vais revenir aux écoles W3 et aller à la section jQuery et aller dans le menu get posts jQuery. Comme vous pouvez le voir ici, le premier paramètre est l'URL et le second paramètre est le rappel, puis le rappel, nous pouvons mettre une fonction avec deux paramètres. L' un sera les données et l'autre sera le statut. Je vais mettre ces paramètres en mettant mes crochets bouclés, et j'aime toujours terminer chaque déclaration avec un point-virgule pour ne pas me confondre. Je vais créer un peu d'espacement ici juste pour nous donner de la marge de respiration, rendre plus facile à lire. Maintenant que nous avons cette fonction get écrite, ce que nous pouvons faire est de saisir les données. Encore une fois, c'est quelque chose que je fais assez souvent. Je vais juste me connecter sur console à différents stades pour voir où nous en sommes. Si je clique sur « Obtenir Pokemon », et cela prendra un peu de temps parce qu'il le saisit d'une source externe. Vous verrez que nous avons cet objet entrer dans notre console maintenant. Il s'agit des données renvoyées à partir de cette URL. Comme vous pouvez le voir, il y a différents éléments dans cet objet. L' un d'eux est un tableau appelé résultats avec tous les différents résultats ici. Voici la liste que nous recherchons à mettre sur l'écran. Ce que je vais faire est d'utiliser une boucle pour parcourir tous ces éléments et construire une chaîne qui va ensuite mettre dans ce div que nous avons créé ici, mais il n'y a rien dedans. Portez avec moi comme je fais ça. Ce sera un peu de code, mais essentiellement ce que nous allons faire est de créer la chaîne en premier. Je vais l'appeler chaîne var. Pour le démarrer, je vais ouvrir un UL, donc une balise de liste non ordonnée. Vous pouvez voir ici l'opérateur de concaténation, cela va ajouter à la chaîne. En fait, nous devrions configurer cela avec une chaîne vide pour commencer. Je vais mettre dans l'UL parce que nous le voulons avant la boucle. Je vais mettre quelque chose pour après la boucle, qui sera la balise de fermeture. Alors je vais faire la boucle. Nous avons certainement couvert comment faire des boucles, mais nous ne vous avons pas montré la façon jQuery de faire une boucle. La façon jQuery de faire une boucle est avec ce point chaque méthode. Allons simplement à la documentation jQuery et tapez jQuery chacun. Ici vous pouvez voir une description. Il peut être utilisé pour itérer à la fois des objets et des tableaux. Très cool petite fonction. Comme vous pouvez le voir ici, nous mettons l'objet ou le tableau comme premier argument, puis nous avons la fonction ou le rappel comme deuxième argument ou paramètre dans cette fonction. Nous pouvons mettre des paramètres ici pour l'index et la valeur. Avec cela à l'esprit, je vais récupérer les résultats des données. Rappelez-vous que c'était là que se trouvait la liste de Pokemon. Ensuite, je vais mettre dans ma valeur d'index de rappel. Je vais mettre un point-virgule là-dedans. Ce que je vais faire ici est d'ajouter un élément de liste à cette liste ici que nous venons de créer. Je vais mettre la balise LI. Je vais fermer cette balise LI et mettre un point-virgule juste pour être clair que nous avons fini. Alors je vais mettre la valeur. La dernière étape consiste à mettre cela sur l'écran. Comme je l'ai dit, nous allons le mettre dans ce div de liste de poche. La première étape consiste à sélectionner ce div en utilisant un sélecteur jQuery. Je vais utiliser le hachage pour sélectionner n'importe quel élément avec un ID de liste poke, qui est juste celui-ci. Ensuite, je vais utiliser la méthode HTML dans le contexte défini pour mettre dans la chaîne que nous venons de générer. Si j'appuie sur « Enregistrer » sur cela, revenez au projet, cliquez sur « Obtenir Pokemon ». Vous pouvez le voir venir avec juste l'objet, l'objet, l'objet. La raison pour laquelle il fait cela est parce que dans chacun de ces résultats, il y a un autre objet. Vous pouvez voir ici sur le premier résultat, nous avons un objet avec deux attributs, un nom et une URL. Nous devons réellement les séparer et les utiliser séparément. Ce que je vais faire, c'est apparemment qu'on a un lien là-bas, je vais mettre en place une balise de lien. Je vais mettre un href ici. Cela pourrait être un peu déroutant parce que j'utilise l'interpolation de chaînes ici. Mais ce qui se passe ici, c'est que nous devons utiliser des guillemets pour ouvrir la définition de chaîne. Ensuite, nous essayons de mettre une citation pour l'attribut. Nous avons juste besoin de nous assurer que nous alternons entre guillemets doubles et guillemets simples, et nous devrions aller bien. Cela signifie que nous commençons une chaîne, puis nous mettons un guillemet qui va faire partie de la chaîne. Ensuite, nous fermons cette ficelle. En utilisant des avantages, nous pouvons concaténer et cela signifiera que nous rouvrons, puis mettons et finissons là. En fait, on doit mettre une étiquette de clôture là-bas. Ici, je vais mettre dans l'URL. C' est en fait une valeur dans cette valeur, qui est un objet point. Ce sera valeur.url. Ensuite, ici, il va être valeur.name. Je ne pense pas que la valeur ait vraiment de sens dans ce contexte. Nous sommes en mesure de modifier le nom de ce paramètre. Je vais y retourner et je vais l'appeler article. Je pense que c'est un peu plus descriptif. C' est l'item.url et l'item.name. Si je sauvegarde cela, actualisez la page, cliquez sur « Obtenir Pokemon », vous pouvez voir une liste apparaît maintenant. Je peux cliquer sur l'un de ces et il me conduira au noyau de l'API plus détaillé pour ce Pokemon particulier où vous pouvez regarder leurs capacités, vous pouvez regarder leurs statistiques et d'autres bits de données liées à ce Pokemon spécifique. Ce que vous voudriez faire est de construire une page spécifique pour cela, en tirant les données. Dans cette vidéo, nous n'entrerons pas dans cette deuxième étape, mais n'hésitez pas à le faire. Ce que je vais faire à la place est de démontrer un autre onclick EventListener, et en utilisant cet onclick EventListener, nous pouvons cacher différents éléments de cette liste. Si j'entre ici, je ne veux plus faire la liste. Je veux en faire une table. Ce que je vais faire est de changer UL en table. Je vais changer LI en TR pour une ligne de table. Bien sûr, cela va devoir devenir une cellule de table, donc je vais mettre une cellule de table ouverte et fermée là. Ensuite, je vais créer une autre cellule de table. Au sein de ce TD, je vais mettre un autre bouton afin d'ouvrir et de fermer les balises. Au sein de ceux l'étiquette pour le bouton. Ici pour que je puisse le cibler, je vais mettre dans un nom de classe de bouton Hide. Rappelez-vous que nous utilisons déjà des guillemets doubles pour définir la chaîne, donc nous devons utiliser des guillemets simples ici si nous voulons que ces guillemets fassent partie de la chaîne. Si je clique sur enregistrer et que je lance ceci, vous pouvez voir que nous avons une table maintenant, ou peut-être que ce n'est pas si évident, mais c'est une table avec des boutons Masquer. Encore une fois, nous utilisons Bootstrap afin que nous puissions rendre ce look beaucoup plus agréable et très rapidement. Ce que je vais faire, c'est mettre dans des cours pour que ça paraisse plus agréable. Primaire et ici je vais donner à la table une classe de table. Maintenant, si je clique sur Exécuter Pokemon, vous pouvez voir que le style a un peu changé. Il y a plus d'espacement, il y a des lignes entre les rangées et les boutons sont un peu plus beaux. Cool. La prochaine et dernière étape consistera à brancher ces boutons Masquer et à les faire masquer la ligne dans laquelle ils se trouvent. Pour ce faire, je vais configurer un autre EventListener et je vais utiliser le point parce que je cible une classe. Je vais trouver tous les boutons de masquer et mettre un EventListener sur eux. Bouton Masquer. Je vais utiliser la même convention qu'avant. Nous avons cliqué, puis fonction, ouverture du bloc de code. Ce que je veux arriver à l'intérieur de cet EventListener, je vais juste développer ici afin que vous puissiez voir toute la ligne sur la page. Fondamentalement, je suis capable de trouver quel bouton a été cliqué en utilisant le sélecteur de ceci. Mais je ne veux pas cacher juste le bouton, je veux cacher toute la rangée. Si nous utilisons notre connaissance de DOM Traversal pour monter l'arbre, nous avons ce bouton et le parent de ce bouton est une cellule de table. Le parent de cette cellule de tableau est la ligne. Nous sommes capables de cibler la ligne parent du bouton en commençant d'abord un sélecteur jQuery en utilisant le mot-clé this, puis en déplaçant le DOM en utilisant parent une fois, puis parent une seconde fois pour l'obtenir ici. Ensuite, à partir de ce point, nous pouvons simplement exécuter la fonction que nous voulons exécuter dessus. Je vais cliquer sur « Enregistrer » et nous allons revenir en arrière et nous verrons si cela fonctionne. Je clique dessus et ça ne marche pas. Il y a une raison claire. Je voulais vraiment le faire mal pour commencer, parce que je pense que c'est la façon intuitive de le faire. Pourquoi on ne peut pas cacher les boutons ? C' est la chose qui est un problème avec JavaScript que vous obtenez probablement pas dans d'autres langages de programmation, c'est en fait asynchrone. En JavaScript, cela ne se terminera pas et alors il exécutera ceci, cela commencera à fonctionner et pendant que cela est en cours d'exécution, cela ira. Surtout avec l'obtention de données à partir de sources externes, cela peut prendre un certain nombre de temps. Pendant que cela est en cours d'exécution, il ne veut pas retarder le reste du code. Ce que cela signifie pour nous, c'est que nous devons mettre cela dans un endroit où cela ne fonctionnera qu'une fois que cela aura terminé. La façon de le faire est d'utiliser l'état ici. Je vais mettre une déclaration if. S' il y a une signification d'état s'il y a eu un appel réussi, je vais entrer et mettre dans EventListener ici. Ne vous inquiétez pas, nous pouvons imbriquer EventListeners les uns dans les autres, c'est totalement cool. Mets de l'espace là-dedans. Nous allons cliquer sur « Obtenir Pokemon ». Maintenant, lorsque nous cliquons sur le bouton Masquer, il devrait se cacher. Vous pouvez voir que c'est le cas. C' est trouver le parent du bouton sur lequel on a cliqué, qui est TD. Ensuite, il est de trouver le parent de ce qui va être la ligne parent et il le cache. Je peux le faire pour tous les Pokemon de la liste. Je peux récupérer la liste complète à nouveau en cliquant sur « Obtenir Pokemon ». Vous pouvez voir ici, nous avons toujours notre journal de console. Je peux juste me débarrasser de ça maintenant. Maintenant, nous avons une console propre et une application de travail propre. J' espère que cela vous aidera à voir dans un cadre pratique comment vous apporteriez vos connaissances des scripts Java. J' espère que ce n'était pas trop déroutant pour vous les gars. Encore une fois, tu vas apprendre en faisant. Ce que je vous suggère de faire pour apprendre ce genre de choses, c'est de créer vos propres projets, rechercher comment faire ces choses, puis d'aller de l'avant et de les essayer. Si cela ne fonctionne pas, commencez à déboguer, ce qui est en fait ce que nous allons couvrir dans la prochaine vidéo, qui sera notre leçon bonus. Nous allons apprendre à déboguer des trucs dans la prochaine leçon. Si vous êtes un jour coincé et que vous voulez déboguer, vérifiez celui-ci ou peut-être que vous voulez le vérifier tout de suite. C' est à vous de voir. Mais c'est essentiellement le début de notre petit projet de classe exemple. Je suis excité de voir ce que vous venez avec et je vous verrai dans la prochaine vidéo. 27. Bonus : Débugage with Console.log: Maintenant, nous avons vu un peu de cela dans la leçon précédente lorsque nous avons créé cette application Pokemon. Mais je voulais entrer un peu plus en détail sur la façon dont vous alliez déterminer quels sont les problèmes avec votre code, puis les déboguer. Avant la main, il y avait un bon exemple où cela ne fonctionnait pas si j'avais cet écouteur d'événement en dehors de cet appel AJAX. Si je viens de déplacer ça et je vais juste supprimer ça aussi, juste pour qu'il ne flotte pas là vide. Va ici, et c'est là que c'était avant, je pense que non, en fait, c'était là. De toute façon. Peu importe, ça n'a pas été le mauvais endroit. Je vais cliquer sur « Obtenir Pokemon ». Maintenant, comme je le vois, ça ne marche pas , je pense peut-être, pourquoi est-ce ? Je pourrais y retourner et regarder ce code et je pourrais voir que, oui, il n'y a pas de fautes de frappe. Ça devrait déclencher. Cela ne cache pas ce bouton. Une chose que j'utilise assez souvent est le journal de la console, car en JavaScript, il ne va pas flèches quand il ne peut pas trouver this.parent. Ça ne fera rien. C' est frustrant quand vous voulez savoir quel est le problème. Un outil vraiment pratique est console.log. Je vais commenter cela pour qu'il ne fonctionne plus, et je vais utiliser un console.log pour vérifier si l'écouteur d'événement fonctionne réellement. Je vais juste mettre le bouton mots cliqué, appuyez sur « Enregistrer », aller chercher Pokemon, et je vais cliquer sur ces boutons. Le texte ne sort pas dans notre console, qui signifie que cela n'est pas en cours d'exécution, il y a quelque chose de mal avec cette partie du code. Ce n'est pas nécessairement cette partie du code parce que cela ne se produit toujours pas même quand nous nous débarrassons de cela. Ensuite, nous devons penser à ce qui ne va pas avec cette partie et l'une des choses avec JavaScript, comme je l'ai dit dans la dernière vidéo, c'est un problème est le timing. Pour que cela fonctionne réellement, il doit y avoir un tas de boutons de masquage sur la page déjà. Dès que ce code s'exécute, l'écouteur d'événement est configuré et il ne se met pas à jour lorsque de nouveaux éléments arrivent sur la page avec cette classe. Vous devez vous assurer que tous les boutons cachés que vous voulez que l'écouteur d'événement applique ont déjà été chargés sur la page avant de commencer à exécuter cet écouteur d'événement. C' est quelque chose qui exploite même les développeurs expérimentés. Vous devez prendre en compte lorsque l'écouteur d'événement est en cours d'exécution car il ne prend pas en compte les nouveaux éléments lorsqu'ils arrivent sur la page. Une des façons de corriger cela était en nous assurant que nous attendions jusqu'à ce que l'appel AJAX soit terminé avant de lancer ceci. Je vais le remettre ici et voir si le bouton cliqué apparaît maintenant, ce qu'il fait. Nous pouvons nous débarrasser du journal de la console maintenant, voir si cette ligne de code fonctionne, ce qu'elle devrait être. Oui, c'est le cas. L' autre domaine où je peux voir console.log aider ici est de comprendre ce que sont ces différentes choses. Vous avez cette API et vous pouvez la voir ici. Ce sont les données, mais pour y naviguer, vous pouvez cibler différentes parties de la réponse, qui est une réponse JSON. Vous cherchez peut-être aux mauvais endroits. Comme nous l'avions avant, peut-être que je vais juste avoir l'article ici et je ne vais pas aller plus loin dans l'élément pour retirer l'URL et le nom. Si je vais à nouveau dans l'application et je clique sur « Obtenir Pokemon », il va avoir objet de classe Object. Si vous regardez dans le réel, je ne peux pas vous montrer en même temps, mais juste au-dessus de la console ici, si vous regardez pendant que je survole, l'adresse de lien est Object aussi. Si vous cliquez dessus, ce sera évidemment un lien cassé. J' ai encore Pokemon. Dans ce cas, nous sommes comme, ok, ce n'est pas très descriptif. Comment puis-je obtenir le nom réel de ça ? L' une des façons de le faire est d'utiliser le journal de la console. Je vais aller dans le journal de la console et je vais juste sortir l'élément. Donc, je vais cliquer sur « Obtenir Pokemon », et vous pouvez voir ici il sort l'élément pour chaque élément de la liste. Comme vous pouvez le voir ici, nous avons ces objets. Vous devriez être capable de comprendre que c'est un objet, c'est un crochet bouclé avec une paire de valeur de nom. Si je clique sur « Développer » cela, j'ai le nom et l'URL à l'intérieur de cela. À ce stade, vous devriez être comme, je vois, j'ai un objet ici. Pas étonnant, car je le mets comme une chaîne qui ne fonctionne pas et il vient juste avec ce texte aléatoire. J' ai besoin d'aller dans l'objet, où il y a des chaînes, juste ici et juste ici. Pour revenir à notre projet, je vais juste inverser ces deux changements et nous revenons là où nous avons commencé. Nous pouvons également inspecter l'index et peut-être que nous voulons utiliser l'index dans notre projet. Je vais juste utiliser le journal de la console à nouveau. Maintenant, quand je clique sur « Obtenir Pokemon », vous pouvez voir qu'il a le numéro d'index, qui est juste zéro à tous les nombreux il ya. Une autre chose que nous pouvons faire si nous sommes une console enregistrant plusieurs choses, parce que peut-être nous voulons vérifier plusieurs choses, est que nous pouvons réellement combiner une chaîne avec une variable. Je peux mettre index, deux-points, puis mettre dans une virgule, puis mettre dans l'index réel. Nous pouvons voir ici qu'il nous dit Index et il nous dit la valeur que nous tirons. Ce sont quelques exemples d'utilisation du journal de la console pour inspecter les choses dans votre code, puis déterminer où se trouvent les problèmes et résoudre un peu, déboguer un peu. Au fur et à mesure que vous construisez un projet plus complexe, vous devrez résoudre des problèmes plus complexes et c'est la nature de la bête. J' espère que cette vidéo partage avec vous un processus complet en JavaScript lorsque vous avez un problème et que vous ne recevez pas d'erreurs de retour, comment vous pourriez réellement comprendre ce qui se passe réellement dans la carte et comprendre ce que certaines choses utilisent le journal de la console. C' était l'épisode bonus. J' ai que c'était précieux. Dans la vidéo suivante, nous allons terminer la classe et vous allez commencer votre projet de classe si vous ne l'avez pas déjà fait. Je te verrai dans la prochaine vidéo. 28. Conclusion: J' espère que vous êtes maintenant prêt à introduire du JavaScript dans vos propres projets web. Encore une fois, comme je l'ai mentionné dans cette classe, il est un peu difficile de rassembler tout ce que nous avons appris ici aujourd'hui dans un seul projet, mais j'espère que vous prendrez ce que nous avons appris ici et développerez certaines de vos propres idées de site Web. Ou peut-être simplement ajouter une certaine interactivité à votre site web existant. N' oubliez pas que si vous avez besoin de conseils ou de conseils, oubliez pas de laisser un commentaire dans la boîte de discussion, et je ferai de mon mieux pour vous orienter dans la bonne direction. Cela conclut cette classe sur JavaScript. Comme nous l'avons appris dans cette classe, JavaScript est l'un des trois principaux langages que nous utilisons pour développer sur le front, maintenant avec cette classe et la classe précédente, vous devriez être assez à l'aise avec le développement pour le frontend. Bien sûr, cela devient plus compliqué que vous apportez des frameworks JavaScript plus complexes comme React, Angular ou Backbone. Mais c'est un tout autre sujet en soi et peut-être un sujet pour les futures classes. Bref, les gars, merci d'avoir regardé, et j'espère vous revoir dans d'autres cours.