Javascript moderne pour les débutants : Partie 1 | Chris Dixon | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Javascript moderne pour les débutants : Partie 1

teacher avatar Chris Dixon, Web Developer & Online Teacher

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bienvenue au cours !

      1:59

    • 2.

      Partagez votre travail sur Skillshare !

      1:09

    • 3.

      Voyons ce que Javascript peut faire !

      11:12

    • 4.

      Télécharger les fichiers de démarrage

      1:52

    • 5.

      Où ajouter Javascript

      11:31

    • 6.

      Async et Defer

      8:15

    • 7.

      Travailler avec des chaînes

      6:48

    • 8.

      Stocker des données avec des variables

      10:35

    • 9.

      Mélanger des chaînes avec des variables

      4:00

    • 10.

      Types de données : numéros

      6:40

    • 11.

      Types de données : booléen, nul et indéfini

      7:27

    • 12.

      Commentaires, points-virgules et ASI

      8:15

    • 13.

      Opérateurs : projet et comparaison

      9:29

    • 14.

      Opérateurs : logique et arithmétique

      8:23

    • 15.

      Introduction aux tableaux et aux types d'objets

      5:33

    • 16.

      Introduction aux objets

      7:19

    • 17.

      Introduction aux fonctions

      13:22

    • 18.

      Le constructeur de tableau

      5:22

    • 19.

      Introduction aux propriétés, aux méthodes et le prototype

      5:21

    • 20.

      Modifier les tableaux

      12:07

    • 21.

      Retourner de nouvelles valeurs

      9:21

    • 22.

      Méthodes d'itération

      14:29

    • 23.

      Réducteurs

      7:31

    • 24.

      Carte et forEach

      9:36

    • 25.

      Déstructurer des tableaux

      4:27

    • 26.

      Valeurs uniques avec jeu

      4:33

    • 27.

      Tableaux à deux dimensions

      3:49

    • 28.

      L'objet global et les fonctions intégrées

      9:40

    • 29.

      Expressions de fonctions

      8:50

    • 30.

      Expressions de fonctions immédiatement invoquées

      5:58

    • 31.

      Anonyme ou nommé ?

      8:30

    • 32.

      Une fonction ou une méthode ?

      8:13

    • 33.

      Fonctions de flèche

      6:08

    • 34.

      Valeurs de paramètre par défaut et utilisation de Rest

      8:02

    • 35.

      Qu'est-ce que le DOM ?

      2:54

    • 36.

      Sélectionner des éléments

      9:35

    • 37.

      Modifier des valeurs et des attributs

      14:00

    • 38.

      Modifier des éléments CSS

      7:45

    • 39.

      Créer de nouveaux éléments

      18:17

    • 40.

      Ajouter des éléments à la page

      7:06

    • 41.

      Cloner et supprimer des éléments

      4:04

    • 42.

      Mini défi

      1:42

    • 43.

      Boucler avec des éléments DOM

      10:30

    • 44.

      Introduction aux événements

      1:43

    • 45.

      Écoute des événements

      10:42

    • 46.

      Écoute d'événements multiples et de données d'événements

      8:07

    • 47.

      Propagation d'évènement

      8:42

    • 48.

      Organiser des événements une fois

      1:51

    • 49.

      Empêcher le comportement par défaut et l'option passive

      12:09

    • 50.

      Supprimer les écouteurs d'événements

      5:44

    • 51.

      Collection HTML ou NodeList ?

      6:02

    • 52.

      Mini défi : créer un bouton mode foncé

      8:24

    • 53.

      Projet de lecteur vidéo : créer l'UI

      14:41

    • 54.

      Projet de lecteur vidéo : événements vidéo, propriétés et méthodes

      15:34

    • 55.

      Jeu Shape Drop : créer l'UI

      8:15

    • 56.

      Jeu Shape Drop : glisser / déplacer des événements

      13:47

    • 57.

      Jeu Shape Drop : gérer le score et la fin du jeu

      8:27

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

4 488

apprenants

20

projets

À propos de ce cours

Bienvenue sur le JavaScript moderne pour les débutants !

Prenez les fichiers de démarrage ici.

Il est difficile d'acquérir n'importe quelle compétence et le Javascript n'est pas une exception !

Javascript a une aussi large gamme de fonctionnalités et de choses qu'il peut faire. Il est parfois en tant que débutant, nous n'avons aucune idée de où commencer.

C'est pourquoi j'ai conçu ce cours…

En travaillant dès le début, je vais vous montrer ce que Javascript est, ce qu'il peut faire, et pourquoi nous l'utilisons.

Ce cours couvre tout ce que vous devez savoir pour devenir un développeur Javascript compétent.

Ce cours est destiné aux débutants qui sont en cours de Javascript, ou si vous avez un peu d'expérience et que vous recherchez un cours complet pour vous amener à un niveau supérieur. Vous devez au moins avoir une petite expérience en HTML et CSS pour tirer le meilleur parti de ce cours.

Si vous n'avez pas suivi l'un de mes cours, je m'appelle Chris et je suis en train de développer des sites Web depuis plus de 20 ans.

En plus de enseigner de nouveaux développeurs depuis plus de 7 ans, en cours de vidéos et en cours de démarrage en ligne aussi.

Il s'agit de la première partie de 2, qui vous apportera une base de données sur tous les bases, y compris les tableaux, fonctions, objets, événements et DOM, les API Web et tous les détails que vous devez connaître.

Tous ces sujets sont abordés de manière claire et structurée, tout en élaborant des projets concrets au fur et à mesure.

Y compris les exemples d'utilisation en réalité et les mini défis.

Au final, nous avons également mis en place toutes ces compétences en développant un lecteur vidéo en travail, y compris des contrôles entièrement personnalisés. Et également un jeu de gouttes de forme amusant en utilisant le glisser-déposer.

Il comprend un dossier de projet que nous ajouterons, qui servira de référence utile à l'avenir.

Merci de votre intérêt pour ce cours, et je vous verrai dans la première leçon...

Rencontrez votre enseignant·e

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

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