Javascript, les bases - 3/x - Où écrire mon code

Menerv · 24 Mars 2018

Le chapitre précédent nous a apprit a utiliser la console développeur de Chrome.

Dans ce cours, nous allons voir où écrire notre code Javascript.
Commençons tout d'abord par créer notre page HTML nommée index.html avec le contenu suivant:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Mon App</title>
    </head>
    <body>
    </body>
</html>

Vous avez deux manière d'intégrer votre code Javascript dans cette page.

INSÉRER LE CODE EN DUR DANS LE HTML

La première méthode consiste à écrire notre Javascript directement dans notre fichier HTML avec la balise <script> comme suit :

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Mon App</title>
    </head>
    <body>
    </body>
    <script>
        console.log("Mon code Javascript fonctionne !")
    </script>
</html>

Ouvrez maintenant la page avec chrome, vous devriez avoir une page blanche. Maintenant ouvrez la console développeur comme nous l'avions vu dans le chapitre précédent, et admirez !
À noter que le bloc <script> peut être positionné dans le <head> ou dans le <body>, mais pour des raisons de perception, nous préféreront, dès que possible, le mettre tout à la fin de notre code HTML.
En effet, les scripts Javascript peuvent être assez lourd à charger et demander un peu de temps pour être exécuté. En plaçant notre code Javascript à la fin du document, lors du chargement de la page, le design et le contenu s'afficheront assez rapidement. À l'inverse, l'affichage sera impacté par le chargement et l'exécution de notre code Javascript et l'utilisateur aura une sensation de "page qui rame" !

INSÉRER LE CODE DANS UN FICHIER JAVASCRIPT A INCLURE

Si la première méthode est convenable pour un simple console.log(), lorsque notre code sera un peu plus gros, nous auront besoin de le positionner dans un fichier à part.
Pour cela, nous allons créer un fichier nommé script.js et y mettre notre code:

JavaScript:

console.log("Super, notre code est positionné dans un fichier script.js !");

Ensuite il est nécessaire de faire appel à notre fichier script.js dans notre HTML ainsi :

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Mon App</title>
    </head>
    <body>
    </body>
    <script src='script.js'></script>
</html>

Rafraîchissez la page, accédez à la console et vous verrez notre nouveau message : Super, notre code est positionné dans un fichier script.js !

Maintenant que nous savons comment écrire notre code Javascript dans une application HTML, nous verrons dans le prochain cours ce que sont les variables et comment les utiliser !

Rechercher

Rechercher

Javascript, les bases - 3/x - Où écrire mon code

Menerv

STAFF