Javascript moderne pour les débutants : Partie 1

1. Bienvenue dans le cours !: Hé. Bienvenue dans ce cours. Comme nous le savons tous, l'apprentissage nouvelles compétences peut s'avérer difficile, et JavaScript ne fait pas exception. JavaScript dispose d'un si large éventail de fonctionnalités et de choses qui peuvent être utiles, ce qui peut souvent laisser les débutants dans une situation difficile à se demander par où commencer. C'est pourquoi j'ai créé ce cours. En le travaillant dès le début, je vais vous montrer ce qu'est JavaScript, ce qu'il peut faire et pourquoi nous l'utilisons même. Ce cours couvre tout ce que vous devez savoir pour devenir un développeur JavaScript compétent. Si vous n'avez pas suivi un de mes cours auparavant, m'appelle Chris, et je crée sites Web depuis plus de 20 ans, et j'enseigne ces compétences depuis plus de sept ans, les deux cours vidéo aux côtés bootcamps de développement Web de premier plan. s'agit de la partie 1 de 2, et cela vous donnera une excellente base en JavaScript de toutes les bases, y compris les tableaux, les fonctions, les objets, les événements et le DOM, API Web et tous les détails dont vous avez besoin. à savoir entre les deux. Tous ces sujets sont abordés de manière claire et structurée, tout en construisant des projets pratiques au fur et à mesure, y compris des exemples d'utilisation réels, ainsi que quelques mini-défis. À la fin, nous avons également mis en place toutes ces compétences en construisant un lecteur vidéo de travail, comprenant des contrôles entièrement personnalisés, mais aussi un jeu de dépôt de forme amusant, l'aide de l'API glisser-déposer. Il inclut un dossier de projet auquel nous ajouterons au fur et à mesure que nous progressons dans cette classe, et il sera également développé comme référence utile à l'avenir. Merci de l'intérêt que vous portez à ce cours, et je vous verrai dans la première leçon. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de reprendre un autre cours. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul une fois que vous avez terminé le cours, revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Plus d'informations sur le projet de classe dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Voyons ce que Javascript peut faire !: Comprendre le côté théorique de JavaScript est vraiment important, et nous y arriverons très bientôt, mais rien de tel que de voir exactement ce qu'il peut faire juste devant vous. Pour voir ce que JavaScript peut faire, nous allons ouvrir une page Web. Ici, je suis sur le réseau de développeurs Mozilla. C'est developer.mozilla.org. Cela fonctionnera également sur n'importe quelle autre page Web, vous pouvez donc en choisir une autre si vous le souhaitez. Je ne vais pas vous montrer comment JavaScript peut être utilisé pour contrôler ou modifier n'importe quel site Web. Maintenant, juste un petit mot avant d' aller plus loin dans cette vidéo. Il peut y avoir une ou deux choses qui semblent complexes ou peu familières, donc si vous n'êtes pas habitué au codage ou au JavaScript, certaines choses peuvent sembler un peu intimidantes, mais soyez simplement conscient, c'est juste pour vous donne quelques guides sur ce que JavaScript peut faire. Nous ne nous attendons pas à ce que vous vous souviez de tout cela, et nous couvrirons tout ce que nous avons vécu au fur et à mesure que vous avancez dans le cours. Pensez à cela comme un petit dégustateur pour vous enthousiasmer par ce que JavaScript peut faire sur une page Web. Pour voir ce que JavaScript peut faire, je vais ouvrir outils de développement à l'intérieur de Google Chrome, qui fait un clic droit, puis je vais passer à Inspecter. Faisons simplement un peu plus grand pour qu'il soit plus visible. Si vous utilisez un autre navigateur, tel que Safari ou Firefox ou Edge, la plupart des outils de développement sont très similaires Vous devriez donc vous en sortir si vous souhaitez utiliser un autre navigateur. Mais si vous voulez exactement les mêmes choses, je suivrais Google Chrome. La première chose que nous voyons ici est cet onglet Elements, qui a accès à toute la structure HTML qui compose cette page Web. Nous pouvons soit survoler n'importe laquelle de ces lignes de code, et il mettra en surbrillance à gauche la section sur laquelle nous travaillons actuellement, ou nous pourrions également cliquer sur cette flèche, qui est l'inspecteur, et sélectionnez l'une de ces sections ou éléments sur la page. Par exemple, passons à ce titre de niveau 1 et cliquons dessus. Cela mettra instantanément en surbrillance ce titre de niveau 1 à l'intérieur du code, et quand il est sélectionné, vous remarquerez sur la droite que vous avez cela équivaut à 0$, puis nous verrons cette fenêtre contextuelle juste en dessous de laquelle dit utiliser $0 à l'intérieur de la console pour faire référence à ces éléments. Nous pouvons utiliser $0 dans cet onglet Console pour sélectionner l'un de nos éléments ou sections, puis appliquer du JavaScript également. Confirmons simplement que nous avons sélectionné les bons éléments avec 0$, puis nous récupérons notre titre de niveau 1. Nous avons sélectionné cet élément, mais que pouvons-nous en faire ? Eh bien, la liste est énorme, et nous allons seulement gratter la surface ici, et nous en couvrirons beaucoup plus pendant ce cours. Si nous sélectionnons à nouveau 0$ pour pointer vers notre en-tête de niveau 1, puis un point, nous pouvons voir ci-dessous que nous avons accès à de nombreuses options différentes que nous pouvons utiliser sur cet élément. Un texte commun, que nous utiliserons beaucoup dans ce cours, est ce que l'on appelle le texte intérieur. Le texte intérieur permet de simplement modifier le contenu entre la balise d'ouverture et la balise de fermeture. Il disposera de ce texte de ressources pour les développeurs. Si nous le voulons, nous pouvons définir cette valeur égale à n'importe quelle nouvelle chaîne de texte. Ouvrez les devis. Nous pouvons utiliser des guillemets simples ou doubles, même un seul va bien, puis nous pouvons définir ce texte comme n'importe quoi d'autre que vous voulez. Allons-y, j'ai changé, puis nous récupérons immédiatement le texte récemment retourné dans la console, et nous pouvons également voir que la page Web a également été mise à jour. Avant d'aller plus loin, ne vous inquiétez pas de ces changements. ne s'agit pas de mettre à jour le site Web réel. Ce n'est qu'à l'intérieur de notre propre navigateur. Tout ce que nous devons faire, c'est simplement rafraîchir le navigateur et celui-ci sera rétabli dans la version d'origine. De plus, nous le faisons, nous réinitialisons maintenant notre $0, et cela retournera désormais indéfini. Nous examinerons l'indéfini plus en détail tout au long de ce cours. Mais pour l'instant, nous pouvons le considérer comme tout simplement qu' aucun élément n'a été attribué à ce 0$. Comme auparavant, nous devons revenir dans l'onglet Eléments pour sélectionner l'une de ces sections ou éléments avec lesquels vous souhaitez travailler. Allons chercher l'un de ces liens en haut. Encore une fois, utilisez la flèche, et nous pouvons survoler n'importe lequel de ces boutons. Cliquez sur ce bouton. Nous avons ce bouton avec le bouton ID of Feedback, qui devrait maintenant être attribué à 0$. allons le sélectionner, et nous voyons que notre bouton est maintenant renvoyé. Encore une fois, 0$ puis le point nous donnera accès à une gamme de fonctionnalités que nous pouvons appliquer à cet élément. L'une d'elles est la propriété style, et à partir de là, nous pouvons également ajouter une propriété de style supplémentaire que nous souhaitons appliquer à ce bouton particulier. Tout comme avec le CSS normal, si vous avez utilisé CSS par le passé, toutes les mêmes propriétés de style sont disponibles à l'intérieur de la console. Un exemple peut être la couleur du texte, que nous pouvons définir sur n'importe quelle valeur qui est une couleur CSS valide. Appuyez sur « Entrée ». Néanmoins, mettez immédiatement à jour à l'intérieur du navigateur. Appuyez sur le bouton et nous pouvons également ajouter une deuxième propriété. Allons chercher la famille de polices. Encore une fois, nous pouvons modifier cela à l'intérieur des guillemets pour qu'il s'agisse d'une famille de polices cursive différente. Comme prévu, le navigateur sera automatiquement mis à jour. Une chose à noter lorsque vous travaillez avec des styles est nous voyons ici que la propriété de couleur est définie sur rose vif, et cela fonctionne comme une feuille de style classique. Cependant, lorsque nous avons deux mots tels que police et famille, en CSS normal, nous garderions tout cela en minuscules et séparons cela par un trait d'union, donc nous l'écrirons comme ceci en deux mots avec le tableau de bord à l'intérieur. Mais au lieu de cela, lorsque vous utilisez JavaScript, si nous avons deux mots ou plus, nous devons changer cela en ce qu'on appelle CamelCase, et chaque mot après le premier commence par une majuscule. C'est à peu près la seule chose dont vous devez vous souvenir à ce stade. Nous avons accès à toutes les mêmes propriétés CSS, mais nous devons les taper comme CamelCase lorsque vous utilisez JavaScript. Une autre chose que nous allons maintenant examiner est celle des événements. Encore une fois, nous avons une section dédiée aux événements plus tard dans le cours. Mais pour l'instant, je veux juste vous exciter un peu de ce que JavaScript peut faire lorsque vous interagissez avec l'utilisateur. Pour en voir un exemple, nous pouvons demander au navigateur d'écouter un événement de souris exemple lorsqu'une souris survole cet élément particulier. Nous pouvons le faire à nouveau en sélectionnant notre bouton avec 0$, puis nous pouvons utiliser un événement appelé onmouseover. Cela permet de détecter lorsque la souris survole cet élément particulier. Ensuite, nous allons déclencher ce qu'on appelle une fonction. Une fonction ressemble à une tâche qui va s' exécuter lorsque la souris survole ce bouton particulier. Ne vous inquiétez pas si cela ne semble pas familier, nous avons beaucoup plus de détails sur les fonctions à venir. Mais pour l'instant, tout ce que nous allons faire est de sélectionner cet élément particulier. Encore une fois, accédez à la propriété style, et cette fois-ci, faisons en sorte que l'arrière-plan soit égal à n'importe quelle couleur, telle que l'orange. Appuyez sur « Entrée », et cet événement mouseover sera désormais activé. Si nous plaçons maintenant la souris sur ces éléments particuliers, l'arrière-plan est maintenant modifié pour devenir orange. C'est un moyen de tester rapidement les choses dans le navigateur. Mais quand il s'agit d'écrire vrai code JavaScript dans notre éditeur de texte, 0$ ne fonctionnera pas, 0$ ne fonctionne que dans les outils de développement du navigateur. Au lieu de cela, nous avons besoin d'un moyen d'accéder à ces éléments depuis la page de l'extérieur. Par exemple, revenez à la page de l'élément, et ce que nous allons faire est sélectionner une autre section. Allons pour le principal, qui a l'ID du contenu. Bien sûr, nous pourrions accéder à 0$ puisque nous sommes dans les outils de développement, mais nous devons nous habituer à accéder à ces éléments à partir d'un éditeur de texte. Pour ce faire, nous commençons par le niveau le plus élevé, et c'est en accédant aux documents. Nous constatons tout de suite que la page complète sera mise en surbrillance. Cela est dû au fait que le document est cette page Web réelle. Ensuite, une fois que nous avons sélectionné la page complète comme celle-ci, nous avons besoin d'un moyen de filtrer cette page jusqu' à l'élément particulier que nous voulons. JavaScript nous fournit certaines méthodes que nous pouvons utiliser pour filtrer cette page. Comme nous pouvons le voir ici avec cet auto-complet, nous pouvons sélectionner un élément par l'ID, par le nom de la classe et également par le nom de l'élément , mais plus que ceux-ci ultérieurement. Je vais opter pour GetElementByID, puis à l'intérieur des crochets, nous pouvons passer l'ID de l'élément que nous voulons sélectionner. En regardant l'onglet Eléments, nous voyons que cette section principale a l'ID égal au contenu sous forme de chaîne. Passez ceci, et notez également ici qu'il s'agit aussi de CamelCase. Tout comme la famille de polices ci-dessus, chaque mot après le premier commence par une majuscule. Appuyez sur « Entrée ». Cela renvoie ensuite notre principal avec l'ID du contenu. Nous sommes exactement dans la même position que lorsque nous utilisons 0$. Si nous appuyons, nous obtenons la même ligne de code. Nous pouvons ensuite utiliser dot pour accéder aux mêmes fonctionnalités que celles que nous avons utilisées auparavant. Par exemple, définissez le style, puis appliquons l'opacité CSS égale à 0,3. Cela n'est pas appliqué, nous pouvons toujours faire tout autre chose que nous avions auparavant, comme le fond. C'est égal à n'importe quoi. Allons-y pour le rouge. On y va. Le fond de la section principale a maintenant été transformé en rouge. Rafraîchissons et rétablissons cela à son état d'origine. JavaScript ne se limite pas à modifier uniquement les éléments de notre page. Nous pouvons également l'utiliser pour faire beaucoup plus. Nous avons accès aux fonctionnalités de date, nous pouvons accéder à des minuteurs et à certaines fonctionnalités mathématiques. Par exemple, additionnons deux chiffres. Nous dirons que 5 plus 11 est 16, 7 plats à emporter 2 c'est 5. Nous avons également beaucoup d'autres fonctionnalités mathématiques, sorte que nous pouvons sélectionner l'objet mathématique puis pointer, puis faire défiler. Nous pouvons voir que nous avons beaucoup d'options différentes, mais une option populaire est math.Random. Ajoutez les crochets juste après et appuyez sur « Entrée », ce qui générera un nombre aléatoire compris entre zéro et un. Si nous continuons à essayer cela, nous obtenons une valeur différente à chaque fois. Ce n'est qu'un petit aperçu de ce que JavaScript peut faire et de la façon dont nous pouvons l'utiliser pour interagir avec une page Web. Il y a beaucoup d'autres choses à apprendre, et nous en découvrirons davantage fur et à mesure que nous progresserons dans ce cours. 4. Télécharger les fichiers de démarrage: Tout au long de ce cours, nous allons écrire beaucoup de code JavaScript. Pour nous aider en cours de route, je vous ai fourni un dossier appelé les fichiers de démarrage JavaScript modernes. Si vous allez sur github.com/chrisdixon161, puis dans le référentiel qui est modern-javascript-starter-files. À partir de là, vous pouvez télécharger cet ensemble complet de fichiers, qui sont les fichiers de démarrage dont vous aurez besoin pour chaque leçon de ce cours. Par exemple, lorsque vous allez dans la première section, nous trouverons une liste de toutes les leçons de cette section. Chacun de ces dossiers contient le minimum minimal dont vous aurez besoin pour commencer par chacune de ces leçons. Le but de ces dossiers est de nous donner un point de départ, sorte que nous puissions simplement nous renseigner directement sur JavaScript sans, par exemple, avoir besoin d'écrire tout le code HTML requis. Un autre avantage de tous ces fichiers est qu'il nous donne également une référence pour toutes les leçons que nous avons faites dans le passé. Au fur et à mesure que nous cochons chacune de ces leçons, nous avons une référence que vous pouvez consulter en arrière si jamais vous êtes coincé dans le futur. C'est tout ce que nous devons faire. Il suffit d'aller l'avant et de télécharger le dossier. Vous pouvez le faire sur les points d'entrée du dossier principal. Cliquez sur le bouton « Code » juste ici et vous pouvez télécharger le fichier ZIP complet que nous allons ouvrir dans notre code Visual Studio. Une fois ce fichier téléchargé, vous devez disposer d'un fichier ZIP que vous pouvez extraire, généralement en double-cliquant sur le dossier puis en le faisant glisser dans votre éditeur de texte. J'utilise Visual Studio Code et vous devriez voir toutes les sections disponibles sur la gauche. C'est ça, ce sont nos fichiers de démarrage complets. Nous pouvons maintenant tout apprendre sur JavaScript. 5. Où ajouter Javascript: Bienvenue au début de cette section. Nous allons maintenant jeter un coup d'œil à JavaScript et nous allons passer du navigateur à nos propres fichiers JavaScript. la section précédente, nous avons téléchargé les fichiers de démarrage fournis avec ce cours. Si vous ne les avez pas téléchargées, revenez à cette vidéo et téléchargez-les depuis GitHub. Une fois cela fait, vous devrez décompresser le package et le faire glisser dans Visual Studio Code pour l'ouvrir. Sur la droite, j'ai ouvert Google Chrome en tant que navigateur. Ce que nous allons faire maintenant, c'est de commencer dès le début et de regarder exactement où nous pouvons ajouter JavaScript dans nos fichiers. Auparavant, nous avons saisi du code directement dans la console du navigateur, mais de façon réaliste, il est presque toujours écrit dans nos propres fichiers. Par où commence-t-on ? Eh bien, à l'intérieur de Visual Studio Code dans nos fichiers de démarrage, rendez-vous dans notre première section, qui est la base de JavaScript et vous remarquerez que les nombres lointains commencent à 02. C'est parce que pour cette leçon particulière, nous allons commencer dès le début et mettre en place les choses nous-mêmes, et ensuite, pour toutes les autres leçons, elles auront un peu de chaufferie disponible pour que nous puissions y accéder. Nous pouvons simplement passer directement à l'écriture de notre code JavaScript. Pour celui-ci avec les bases JavaScript sélectionnées, cliquez sur cette icône ici, qui consiste à créer un nouveau dossier, puis cela peut être 01. Je vais appeler ça où ajouter JavaScript. Encore une fois, assurez-vous que cela se trouve dans le dossier de base JavaScript, puis , avec ce premier dossier sélectionné, cliquez sur cette icône ici, qui est un nouveau fichier, et cela s'ouvrira à l'intérieur d'ici. Nous appellerons cela le point d'index HTML. Appuyez sur Entrée. Il devrait être à l'intérieur de notre nouveau dossier. , ajoutez une structure HTML de base pour l'ouvrir l'intérieur, ajoutez une structure HTML de base pour l'ouvrir dans le navigateur et Visual Studio Code est livré avec un plug-in ou reconstruit sous le nom d'Emmet. Cela nous donnera un peu de code et quelques raccourcis simples. L'un des plus utiles est le deux-points HTML cinq. Appuyez sur Entrée. Cela nous donnera tout le code de démarrage HTML de base dont nous avons besoin. Encore une fois, tout cela sera disponible dans tous les autres dossiers, donc c'est uniquement pour cette leçon. Le titre, où ajouter JavaScript. Ensuite, nous avons besoin des éléments qui fonctionnent réellement tels qu'un en-tête de page. Placer quelque chose comme h1 et du texte à l'intérieur d'ici. Avoir ces éléments en place ici signifie que nous pouvons utiliser JavaScript pour accéder à ces éléments, comme nous l'avons vu plus tôt dans la console. Tout ce dont vous avez besoin pour l'ouvrir dans le navigateur est d'enregistrer ce fichier avec Command ou Control S. Ensuite, si nous cliquons avec le bouton droit sur ce nom de fichier juste ici, passez à Copier le chemin, puis nous pouvons coller ce fichier à l'intérieur du navigateur. Sinon, si vous le souhaitez, vous pouvez entrer dans le dossier principal juste ici. Vous pouvez ensuite accéder au dossier actuel et double-cliquer sur cette page d'index. Cela s'ouvrira ensuite dans votre navigateur par défaut. Pour pouvoir accéder à ces éléments à l'aide de JavaScript, une des façons dont nous pouvons le faire consiste à ajouter AID. Je vais nous donner une carte d'identité de titre. N'oubliez pas que chaque ID particulier doit être unique à cette page HTML. Assurez-vous que nous n'avons qu'un seul identifiant de titre dans ce fichier HTML. Cela permet à notre JavaScript de sélectionner facilement et facilement à notre JavaScript de les éléments que vous souhaitez. Ensuite, en dessous et juste au-dessus de notre balise de corps de fermeture, nous pouvons insérer nos balises de script. Nous avons également une étiquette d'ouverture et une balise de fermeture. C'est l'endroit où nous pouvons placer notre code JavaScript. Juste au-dessus du corps se trouve un emplacement où nous pouvons ajouter JavaScript et est également au-dessus des emplacements que nous allons voir bientôt. Plus tôt, lorsque nous étions à l'intérieur de la console, n'oubliez pas que nous avons cherché à sélectionner chaque élément particulier avec le symbole dollar zéro. Rappelez-vous également que nous avons dit que c'est unique à la console. Nous avons besoin d'une autre façon de sélectionner nos éléments à l'intérieur de l'éditeur de texte. Eh bien, ici, nous allons faire exactement la même chose que celle que nous avons regardée dans la console. Nous allons d'abord sélectionner le document. Le document est ce document HTML complet lequel nous travaillons actuellement. Il va sélectionner cette option, puis nous devons filtrer ces documents en fonction de l'élément particulier que nous voulons sélectionner. Rappelez-vous que nous avons examiné une méthode appelée get elements by ID. Encore une fois, c'est CamelCase. Chaque mot après le premier commence par une majuscule entre crochets, et les citations transmettent ensuite un identifiant unique que vous souhaitez sélectionner. Dans notre cas, nous allons prendre le titre. Déplacez ça ici. Nous avons envisagé de modifier le contenu interne ou le texte intérieur de cet élément avec .innertext. Il s'agit d'une propriété dans laquelle nous pouvons ajouter une nouvelle chaîne de texte entre les guillemets simples ou doubles. Il suffit de changer cela en JavaScript pour l' instant et d'enregistrer ce fichier. Ensuite, si nous passons au navigateur et que nous le rechargeons, cela a maintenant sélectionné notre en-tête de niveau 1 et modifié le code HTML interne. Fermons simplement la barre latérale pour avoir un peu plus d'espace. Toutes les mêmes propriétés que celles que nous avons examinées dans la vidéo de la console s'appliquent toujours, telles que l'ajout de styles différents. Encore une fois, nous pouvons accéder aux mêmes éléments avec get element by ID, et nous pouvons également modifier les styles de cet élément particulier. Modifions la couleur du texte pour qu'elle soit égale à orange. Rafraîchissez et tout cela s'appliquera. Une autre façon d'ajouter JavaScript consiste à ajouter ce code en ligne. L'ajout de cet élément en ligne signifie que nous l'ajoutons directement à l'intérieur de nos éléments et que nous ajoutons cela à l'intérieur de la balise d'ouverture des éléments. Nous ajouterons ceci comme nous ajouterions du CSS en ligne. Dans une vidéo précédente, nous avons examiné très brièvement les événements, où nous avons regardé l'événement sur la souris. Examinons ici l'événement on-click, qui sera déclenché lorsque l'utilisateur clique sur cet élément particulier. Tout ce que nous allons faire à l'intérieur de ce gestionnaire d' événements sur clic , c'est de déclencher une alerte. Une alerte est une fenêtre contextuelle dans le navigateur. Ajoutons simplement cela avec le texte cliqué. Enregistrez-le et actualisez le navigateur. Déplacez la souris sur les éléments et cliquez sur. Je vais maintenant voir une alerte de page. C'est probablement quelque chose que vous avez vu en naviguant sur le Web par le passé. Tout ce que nous devons faire pour supprimer cela, c'est de cliquer sur le bouton OK et celui-ci sera alors fermé. Enlevons simplement ça. Sachez également qu'il est généralement découragé de garder notre JavaScript en ligne comme cela, car il mélange notre code HTML et notre JavaScript et rend les choses moins lisibles et organisées. Si possible, gardez tout cela séparé, comme nous l'avons fait ici, et nous examinerons également comment l'ajouter dans un fichier séparé en un instant. Il est contenu dans une balise de script et nous pouvons ajouter autant de balises de script que vous le souhaitez. Il peut également être situé n'importe où sur cette page, y compris à l'intérieur de la section de tête. Cela fonctionne exactement de la même manière si nous saisissons toute cette section de script, puis Commande ou Control X pour couper cela à sa place. Placez-le à l'intérieur de la section de tête avec la commande ou le contrôle V pour le coller dans le navigateur. À l'intérieur, nous pouvons voir que le titre de la page d'origine est rétabli. Depuis que nous avons déplacé la balise de script vers la section principale, aucun de ces JavaScript ne semble s'appliquer. Jetons donc un coup d'œil à l'intérieur de la console et voyons si nous pouvons détecter des erreurs. Cliquez avec le bouton droit de la souris et inspectez Cliquez sur l'onglet Console en haut. Nous voyons que nous ne pouvons pas définir la propriété innertext de null. Lorsque nous obtenons une erreur, c'est souvent une bonne idée de se diriger vers la console et cela nous donne souvent un pointeur sur le problème. Le problème actuel est dû au fait que la page HTML est chargée de haut en bas. Le script à l'intérieur de la section de tête est donc chargé avant même de savoir que cet élément de titre existe, qui provoque alors une erreur. Si nous devons ajouter un script à l'intérieur de la section principale comme celui-ci, cela peut souvent causer des problèmes si nous devons accéder à l'un de nos éléments DOM. C'est pourquoi nous voyons souvent JavaScript à la fin de la section du corps. Il permet de charger rapidement les éléments et n'empêche pas le chargement du code HTML sur la page. Vous verrez cependant certaines bibliothèques JavaScript tierces qui ont besoin de charger le script dans la section de tête pour que la bibliothèque fonctionne correctement. De plus, ces bibliothèques tierces, ainsi que notre propre code, sont généralement séparées dans leur propre fichier de script. fait de déplacer tout ce JavaScript dans son propre fichier rendra ces documents HTML beaucoup plus lisibles et faciles à gérer. Pour ce faire, ouvrez d'abord la barre latérale puis à l'intérieur du dossier où ajouter JavaScript, cliquez sur l'icône du nouveau fichier, puis nous pourrons donner le nom de notre choix. Je vais passer au scénario 1. Ensuite, il doit avoir l'extension dot js. Appuyez sur Entrée. De retour sur notre page d'index, nous pouvons copier le contenu entre les balises de script. Prenez ces deux lignes de code, mettez-les en place. Collez-les dans notre nouveau fichier de script. Ce fichier de script n'a pas besoin des balises de script environnantes car nous savons déjà qu'il s'agit d'un fichier JavaScript de l'extension dot js. Mais ce que nous devons faire, c'est relier ces deux fichiers ensemble. À l'heure actuelle, il s'agit de deux fichiers distincts indépendants l'un de l'autre. Dans le fichier d'index, nous devons pointer vers ce nouveau fichier de script. Nous pouvons le faire à l'intérieur des balises de script plutôt que d'avoir le code situé à l'intérieur comme nous l'avons fait auparavant. Ce que nous pouvons faire, c'est d'ajouter les attributs source. L'attribut source correspond essentiellement l'emplacement de ce fichier par rapport à l'endroit où nous nous trouvons actuellement. Cela fonctionne exactement de la même manière que l'ajout d'une feuille de style. Puisque ce fichier est à côté de l'autre, nous pouvons le pointer avec la source du script 1 point js. Si cela se trouve à l'intérieur d' un dossier JavaScript, par exemple, nous devons aller dans le dossier JavaScript, puis transférer une barre oblique dans notre script. Nous n'avons pas cela, donc c'est simplement un script one dot js. Assurez-vous que nos deux fichiers sont enregistrés, puis sur le navigateur, actualisez. nous constatons le même problème dans le navigateur. Nous ne pouvons pas définir la propriété innertext de null. Cela est logique car nous continuons de charger la balise de script à l'intérieur de la section de tête. Nous essayons d'appliquer cela à un élément avant même qu'il ne soit chargé. Nous pourrions écrire du code personnalisé pour attendre le chargement du code HTML en premier ou nous pouvons regarder des techniques plus modernes dans la vidéo à venir. 6. Async et Defer: À l'intérieur de nos fichiers de démarrage, nous allons fermer ce fichier à partir de la dernière vidéo pour qu'il n'y ait pas de confusion. Ensuite, allez à la leçon 2, qui est asynchrone et reportez-vous. Double-cliquez sur la page d'index pour l'ouvrir. Puisque nous sommes maintenant dans un nouveau fichier, nous devons le copier ou copier le chemin , puis le coller à l'intérieur du navigateur. Nous voyons tout de suite que nous avons toujours la même erreur que la vidéo précédente. C'est parce que c'est à peu près le même fichier ou le même code de fin que celui que nous avions dans la dernière vidéo. Nous avons notre script, puis nous avons également notre en-tête de niveau 1 et le même contenu dans le fichier de script. Vous devrez le faire pour chaque vidéo que nous allons voir. Nous devons ouvrir la page d'index et assurer qu'il s'agit du bon titre de la page. Dans la dernière vidéo, nous avons découvert un problème lors du chargement trop tôt de nos fichiers JavaScript. Cela peut causer deux problèmes. abord, il se peut que nous ayons besoin d'accéder à l'élément HTML avant même d'être créé, comme nous le voyons ici, et deuxièmement, peut que nous ayons beaucoup de se peut que nous ayons beaucoup de code JavaScript dans ce fichier. Cela pourrait vraiment ralentir le chargement du reste de notre page. Si le script 1 était un fichier vraiment énorme, l'utilisateur ne verrait aucun code HTML chargé sur la page tant que ce script n'aurait pas terminé son exécution. Nous allons maintenant examiner deux façons que nous pouvons utiliser pour réparer tout cet async et différer. L'asynchrone et le report sont tous deux des attributs que nous pouvons ajouter à l'intérieur des éléments de script. abord, jetons un coup d'œil à l'asynchrone et fermons la barre latérale pour un peu plus d'espace. Assurez-vous que ce fichier est enregistré et actualisez le navigateur. suite, nous voyons que l'erreur a disparu. Le JavaScript a été appliqué à notre élément et nous ne voyons aucune erreur à l'intérieur de la console. Essayons de différer. Placez ceci et actualisez le navigateur et nous avons exactement le même résultat. Tout fonctionne parfaitement bien. Avec ces deux fonctions, quelle est la différence exactement ? Eh bien, nous avons d'abord asynchrone, et asynchrone est l'abréviation d'asynchrone. C'est un terme auquel nous reviendrons plus tard. Mais pour ce cas d'utilisation particulier, async va télécharger ce script même temps que le reste de notre contenu HTML. Mais pour comprendre ce que fait réellement asynchrone, nous devons regarder un peu plus loin. Imaginez maintenant, plutôt que d'avoir notre script dans notre page d'index à l'intérieur de l' éditeur de texte comme nous le faisons ici, imaginez qu'il s'agissait d'un site Web en direct. S'il s'agissait d'un site Web en direct, nos scripts et notre page d'index seront stockés sur un serveur Web. Lorsque l'utilisateur visite notre page pour la première fois, le contenu de ces fichiers devra être téléchargé. Lorsque nous marquons ce script comme un script asynchrone, ce code JavaScript sera téléchargé même temps que notre contenu HTML. Cela signifie que plutôt que de bloquer notre code HTML, le code HTML est toujours téléchargé puis rendu dans le navigateur, ce qui ne devrait pas entraîner de ralentissement important de notre contenu. Ensuite, il exécutera le contenu de notre script dès que le téléchargement