Intégration d'un Script JavaScript dans une Page HTML

Charger du JavaScript dans une page web
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre JavaScript ES6 - Les fondamentaux
Revoir le teaser Je m'abonne
3,5
Transcription

69,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
3,5
69,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de vous montrer :

  • Comment créer et intégrer un fichier JavaScript dans une page HTML
  • L'importance de la séparation du HTML, CSS, et JavaScript
  • Comment vérifier le bon fonctionnement du script à l'aide de la console de votre navigateur

Découvrez comment intégrer un fichier JavaScript dans une page HTML pour une meilleure organisation du code.

Dans cette leçon, nous abordons de manière détaillée la méthode pour intégrer un fichier JavaScript, notamment un fichier index.js, dans une page HTML. Vous apprendrez l'importance de séparer le code en différents fichiers pour maintenir une structure propre et compréhensible. Nous utiliserons la balise <script> pour inclure notre fichier JavaScript, en expliquant pourquoi il est préférable de ne pas mélanger le code JavaScript, CSS et HTML dans un seul document. Nous discuterons également des erreurs courantes, telles que l'utilisation incorrecte des balises autofermantes, et comment les éviter.

À la fin de cette session, vous saurez non seulement comment intégrer votre fichier JavaScript, mais aussi comment vérifier son bon fonctionnement en utilisant la console de votre navigateur. Cette leçon est essentielle pour quiconque souhaite maintenir une structure de projet web professionnelle.

Voir plus
Questions réponses
Pourquoi est-il préférable de séparer le code HTML, CSS et JavaScript ?
La séparation du code permet de maintenir une structure propre et organisée dans les projets de développement, facilitant la maintenance et la lisibilité.
Quelle est la balise correcte pour inclure un fichier JavaScript dans une page HTML ?
La balise correcte est <script src="index.js"></script>.
Comment vérifier si votre script JavaScript fonctionne correctement ?
Vous pouvez vérifier si votre script fonctionne en utilisant la console de votre navigateur pour voir si des messages ou des erreurs sont affichés.
Pour intégrer un fichier index.js ou voilà un script en javascript dans votre page html, on va du coup rester ici dans notre petit dossier html qu'on a créé tout à l'heure. Souvenez-vous, on a mis un index.html, un style.css et cette fois-ci, on va créer un index.js qui va être du javascript. Pardon, et avec touch touch pour créer des fichiers vides. Et ensuite, on va l'ouvrir avec atom. Donc mon fichier est ouvert ici en bas à gauche. On connaît déjà un petit peu le javascript, donc ce qu'on peut faire c'est un console.log et on va dire que ça fonctionne. Ça marche bien, voilà, comme ceci. Et ici à l'intérieur du body, on va vouloir créer plutôt à la fin une balise script comme ceci. Alors ici on pourrait on pourrait écrire du javascript si on a envie mais comme on préfère que ça soit bien propre et que on ait du html dans du html, du css dans du css et du js dans un fichier js, on va charger directement le fichier à l'intérieur de notre index.html, ça sera beaucoup plus propre, je vous invite à faire ça. Le style css c'est pareil, on peut l'intégrer dans du html, le javascript aussi, mais on va éviter les mélanges. Donc du coup on va avoir une balise autofermante comme ceci. Vous pouvez même passer des choses à la ligne comme ça, que ça soit plus clair. Et ici on va dire src égale, et ça va être la source, la source du script et on va lui dire qu'on va aller chercher index.js. Voilà donc si on sauvegarde et qu'on teste. Alors il y a rien qui s'affiche dans la console, oui je vous ai dit une petite bêtise. Malheureusement alors la balise de javascript, malheureusement alors la balise script n'est pas autofermante. Donc on va devoir créer une balise comme ça vide avec rien dedans. Et du coup on va laisser ça en ligne. Donc voilà, donc script n'est pas autofermante comme link, on va devoir mettre un contenu vide à l'intérieur. Mais c'est pas grave parce qu'on a le src qui signifie source, qui va aller chercher notre console log juste ici. Et donc si j'actualise, voilà on a bien dans la console, ça marche bien, je vous ai ouvert la console ici en bas, la console du navigateur chrome. Et notre script.js fonctionne correctement, on peut même l'écrire plusieurs fois. Voilà ça s'écrit, ça s'écrit correctement. Ce qui est bien c'est qu'à chaque fois qu'on actualise donc la console se reset, si jamais vous avez envie de garder votre console, alors j'ai peut-être un petit peu trop zoomé, voilà donc là on a préserve log et du coup vous allez pouvoir tester plusieurs fois que ça fonctionne correctement. Donc moi je vais pas les préserver.

Programme détaillé de la formation

8 commentaires
3,5
8 votes
5
4
3
2
1
C0C23DAC-E0F0-4671-A5DA-98CC3C3F0FD7@cyberlibris.studi.fr
Il y a 2 weeks
Commentaire
RAS
elephorm-1344761@addviseo.com
Il y a 4 months
Commentaire
Le cours sont pas assez adaptés pour une personne qui débute un peu les langages informatiques
85F76F55-E9A7-4111-B6B2-79CB51A205B9@cyberlibris.studi.fr
Il y a 7 months
Commentaire
EXCELLENT
93DAC8BB-E168-4366-B5BE-6F3D0B39B74D@cyberlibris.studi.fr
Il y a 9 months
Commentaire
super
wastiaux.william
Il y a 2 years
Commentaire
Un peu léger, le cour survole toutes les notions de bases. L'idéal est de visionner les cours en x2.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
michaellaunay
Il y a 3 years
Commentaire
Bonne formation pour qui sait déjà programmer dans un autre langage. Une formation sur Javascript avancé serait fort appréciée ;-)
olivierousmail
Il y a 3 years
Commentaire
Formation inadaptée pour un débutant, donne des concepts sans les expliquer, qu'est ce qu'un tableau ? qu'est ce qu'une fonction ? focalise tout le premier module sur l'utilisation de constantes alors qu'on est loin de les utiliser régulièrement.

Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.
lepajollecfranck
Il y a 3 years
Commentaire
Très bons contenus et bonnes explications. Manque d'un second module pour aller plus loin dans l'exemple.

Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons
  • Apprendre Javascript - Les fondamentaux
    Découvrir
    Apprendre le langage de programmation JavaScript
    2h55 29 leçons 4,50 / 5