5XINT

Apparence

La balise script ​

Introduction ​

La balise script est un élément essentiel du langage JavaScript dans le contexte du développement web. Elle permet d'inclure du code JavaScript dans une page HTML, ce qui offre de nombreuses possibilités d'interactivité et de dynamisme.

Elle peut être utilisée de différentes manières, que ce soit en l'incluant directement dans le code HTML, en faisant référence à un fichier JavaScript externe ou en utilisant un bundler pour regrouper et optimiser le code JavaScript.

Dans ce chapitre, nous allons explorer les différentes façons d'inclure du JavaScript dans une page web en utilisant la balise script. Nous examinerons les avantages et les inconvénients de chaque méthode, ainsi que les attributs disponibles pour personnaliser le comportement de la balise script.

Différentes façons d'inclure du JavaScript dans une page ​

Lorsque vous souhaitez inclure du code JavaScript dans une page web, vous avez plusieurs options à votre disposition. Dans cette section, nous allons explorer les différentes façons d'inclure du JavaScript, en commençant par l'inclusion inline.

A. Inline ​

L'inclusion inline consiste à incorporer directement du code JavaScript dans le corps du document HTML. Cela se fait en utilisant l'attribut onclick, onload, onsubmit, ou tout autre événement JavaScript directement dans les balises HTML. Par exemple :

html
<button onclick="alert('Hello, world!')">Cliquez ici</button>

L'inclusion inline est simple à mettre en œuvre, mais elle présente quelques inconvénients. Tout d'abord, le code JavaScript est mélangé avec le code HTML, ce qui rend la maintenance et la lisibilité du code plus difficiles. De plus, si vous avez besoin d'utiliser le même code JavaScript sur plusieurs pages, vous devrez le répéter à chaque fois, ce qui peut entraîner une duplication de code.

Malgré ces inconvénients, l'inclusion inline peut être utile pour de petits morceaux de code ou pour des démonstrations rapides. Cependant, pour des projets plus importants, il est préférable d'utiliser d'autres méthodes d'inclusion.

B. Balise script ​

La méthode la plus courante pour inclure du JavaScript dans une page web est d'utiliser la balise script. La balise script est un élément HTML qui permet d'inclure du code JavaScript directement dans le document HTML.

Voici un exemple d'utilisation de la balise script :

html
<script>
    // Code JavaScript ici
</script>

Le code JavaScript est placé entre les balises <script> et </script>. Vous pouvez écrire le code directement à l'intérieur des balises ou faire référence à un fichier JavaScript externe en utilisant l'attribut src.

Syntaxe de la balise script ​

La balise script peut être utilisée de différentes manières en fonction de vos besoins. Voici les différentes syntaxes possibles :

  1. Inclusion du code JavaScript directement entre les balises :
html
<script>
    // Code JavaScript ici
</script>
  1. Inclusion d'un fichier JavaScript externe :
html
<script src="chemin/vers/fichier.js"></script>

L'attribut src permet de spécifier l'URL du fichier JavaScript externe à inclure. Le navigateur va alors charger et exécuter le fichier JavaScript.

Placement de la balise script dans le code HTML ​

La balise script peut être placée à différents endroits dans le code HTML, en fonction de vos besoins. Voici les emplacements courants :

  • Dans l'en-tête (<head>) : le code JavaScript est chargé et exécuté avant le rendu de la page. Cela peut être utile pour définir des variables globales ou des fonctions utilisées dans tout le document.
html
<head>
    <script>
        // Code JavaScript ici
    </script>
</head>
  • Avant la fermeture du corps (</body>) : le code JavaScript est chargé et exécuté après le rendu de la page. Cela peut être utile pour manipuler le contenu de la page une fois qu'il est affiché.
html
<body>
    <!-- Contenu de la page -->

    <script>
        // Code JavaScript ici
    </script>
</body>
  • À l'intérieur d'un élément spécifique : le code JavaScript est chargé et exécuté lorsque l'élément spécifié est rencontré. Cela peut être utilisé pour des fonctionnalités spécifiques à un élément.
html
<div>
    <!-- Contenu de la div -->

    <script>
        // Code JavaScript ici
    </script>
</div>

Attributs possibles pour la balise script ​

La balise script prend en charge plusieurs attributs qui permettent de personnaliser son comportement. Voici quelques attributs couramment utilisés :

  • src : spécifie l'URL du fichier JavaScript externe à inclure.
  • type : indique le type de contenu du script. La valeur habituelle est "text/javascript".
  • async : spécifie que le script est exécuté de manière asynchrone, ce qui signifie qu'il n'attend pas que le script soit chargé avant de continuer à traiter la page.
  • defer : indique que le script est exécuté après le chargement de la page, mais avant l'événement DOMContentLoaded. Cela permet de garantir que le script ne bloque pas le rendu initial de la page.
  • crossorigin : permet de spécifier les politiques de sécurité pour les requêtes de ressources externes. Cela peut être utile lorsque vous chargez un fichier JavaScript depuis un autre domaine.

Il est important de noter que certains attributs, tels que async et defer, ne sont pas pris en charge par tous les navigateurs. Assurez-vous donc de les utiliser avec prudence et de tester votre code sur différents navigateurs pour garantir une compatibilité maximale.

C. Fichier à part ​

Une autre façon courante d'inclure du JavaScript dans une page web est d'utiliser un fichier JavaScript externe. Plutôt que d'inclure le code JavaScript directement dans le document HTML, vous pouvez créer un fichier JavaScript séparé avec une extension .js et le faire référencer dans votre page HTML.

Voici comment inclure un fichier JavaScript externe dans une page HTML :

html
<script src="chemin/vers/fichier.js"></script>

L'attribut src de la balise script est utilisé pour spécifier l'URL du fichier JavaScript externe à inclure. Le navigateur va alors charger et exécuter le fichier JavaScript.

L'utilisation d'un fichier JavaScript externe présente plusieurs avantages. Tout d'abord, cela permet de séparer le code JavaScript du code HTML, ce qui facilite la maintenance et la lisibilité du code. De plus, si vous avez besoin d'utiliser le même code JavaScript sur plusieurs pages, vous n'avez qu'à inclure le fichier externe une seule fois, ce qui évite la duplication de code.

D. Bundler ​

Une autre approche pour inclure du JavaScript dans une page web est d'utiliser un bundler. Un bundler est un outil qui permet de regrouper et d'optimiser le code JavaScript en vue d'une utilisation plus efficace dans une application web.

Les bundlers tels que Webpack, Parcel ou Vite sont capables de traiter des fichiers JavaScript modulaires et de les regrouper en un seul fichier optimisé pour le chargement et l'exécution dans le navigateur.

L'utilisation d'un bundler présente plusieurs avantages. Il permet de gérer les dépendances entre les fichiers JavaScript, d'optimiser le code en supprimant les parties inutilisées et de réduire la taille du fichier final. De plus, les bundlers offrent des fonctionnalités avancées telles que le support des modules ES6, la gestion des polyfills et l'intégration de tâches supplémentaires telles que la minification, la compression et l'obfuscation du code.

Il est important de noter que l'utilisation d'un bundler peut être plus complexe et nécessite une configuration supplémentaire. Cependant, pour des projets de grande envergure ou nécessitant une optimisation avancée du code JavaScript, l'utilisation d'un bundler peut être très bénéfique.

Conclusion ​

Dans ce chapitre, nous avons exploré les différentes façons d'inclure du JavaScript dans une page web en utilisant la balise script. Nous avons examiné l'inclusion inline, l'utilisation de la balise script pour inclure du code JavaScript directement dans le document HTML, l'inclusion d'un fichier JavaScript externe et l'utilisation d'un bundler pour optimiser le code JavaScript.

Chaque méthode d'inclusion a ses avantages et ses inconvénients, et le choix dépendra des besoins spécifiques de votre projet. L'inclusion inline peut être pratique pour de petits morceaux de code ou des démonstrations rapides, tandis que l'utilisation de la balise script ou d'un fichier JavaScript externe offre une meilleure séparation du code et une meilleure maintenabilité. Enfin, l'utilisation d'un bundler peut être bénéfique pour des projets de grande envergure nécessitant une optimisation avancée du code JavaScript.

Il est essentiel de comprendre les différentes méthodes d'inclusion et de choisir celle qui convient le mieux à votre projet. En comprenant les attributs de la balise script et en utilisant les bonnes pratiques, vous pourrez créer des pages web interactives et dynamiques en utilisant le langage JavaScript.

Dans les prochains chapitres, nous explorerons davantage le langage JavaScript en abordant des sujets tels que les variables, les opérateurs, les fonctions, les conditions et bien plus encore.

Sources ​

  1. Attribut defer des scripts HTML (W3Schools) : Cette page explique en détail l'attribut defer des scripts HTML. L'attribut defer permet de spécifier que le script est téléchargé en parallèle de l'analyse de la page et exécuté après que la page ait fini d'être analysée.

  2. Balise script HTML (W3Schools) : Cette page présente en détail la balise script HTML et ses attributs, y compris async, defer, integrity, etc.

  3. Attribut integrity des scripts HTML (W3Schools) : Cette page explique l'attribut integrity des scripts HTML, qui permet de vérifier si le code du script a été modifié ou non.

  4. Attribut nonce - HTML (MDN) : Cette page de la documentation MDN explique l'attribut nonce en détail. L'attribut nonce est utilisé pour autoriser spécifiquement certains scripts ou styles en ligne, et il aide à éviter l'utilisation de la directive unsafe-inline dans les politiques de sécurité des contenus.

  5. Attribut crossorigin - HTML (MDN) : Cette page de la documentation MDN explique l'attribut crossorigin en détail. L'attribut crossorigin permet de configurer les requêtes cross-origin pour les ressources chargées par les éléments <script>, <img>, <audio>, <video> et <link>.

  6. Élément <script> - HTML (MDN) : Cette page de la documentation MDN fournit une référence complète sur l'élément <script> en HTML, y compris les attributs tels que async, defer, integrity, etc.

  7. Attribut rel=preload - HTML (MDN) : Cette page de la documentation MDN explique l'attribut rel=preload en détail. L'attribut rel=preload permet de déclarer des requêtes de téléchargement anticipé dans la balise <link> HTML, ce qui permet de charger les ressources plus tôt dans le cycle de vie de la page.

  8. CSP: script-src (MDN) : Cette page de la documentation MDN explique la directive script-src de la CSP (Content Security Policy) en détail. La directive script-src permet de spécifier les sources valides pour les scripts JavaScript dans une politique de sécurité des contenus.

Copyright © 2023 Thibault Six