Javascript 1 : INTEGRATION DANS UNE PAGE html

1. Qu'est-ce que le langage Javascript ?
Le Javascript est un langage de programmation majoritairement utilisé sur Internet, conjointement avec les pages web html dans lesquelles il est inclus. Le Javascript permet de « dynamiser » une page html en ajoutant des interactions avec l’utilisateur.
Le Javascript est un langage dit côté client, c’est-à-dire que les scripts sont exécutés par le navigateur de l’internaute (le client). Cela diffère des langages de scripts dits côté serveur qui sont exécutés par le serveur web. C’est le cas des langages comme le PHP.

Cette distinction est importante car la finalité des scripts « côté client » et « côté serveur » n’est pas la même.
Un script « côté serveur » va s’occuper de générer la page web qui sera envoyée au navigateur. Ce dernier va alors afficher la page, puis exécuter les scripts « côté client » tels que le Javascript.
2. Créer un fichier .js
L'Environnement de Développement (IDE)
Comme n'importe quel langage de programmation, pour faire du html, il suffit uniquement d'un éditeur de texte, présent sur n'importe quel ordinateur. Bien que très utile pour dépanner, il est très difficile de construire un projet là-dessus. Mieux vaut se tourner vers un Environnement de Développement (IDE) offrant au minimum une coloration, au mieux compléter le programme au fur et à mesure de son écriture.

Je vous propose deux logiciels gratuits :
  • Notepad ++ offre une coloration pour le html, le CSS et le javascript, très utiles pour la relecture.
  • Visual Studio Code, que j'utilise quotidiennement pour tous langages (Python, Latex, html, CSS, javascript, Django, etc.).
Il existe aussi des éditeurs en ligne, qui permettent une facilité de prise en main des langages html, CSS et javascript simultanément : Quelque soit votre choix, le html s'exécute toujours sur un navigateur.

Un NAVIGATEUR est un logiciel qui permet de parcourir un site web et plus généralement Internet : Google Chrome, Safari, Firefox, Ecosia, Bing, etc.
Sachez que bien qu'ils soient tous des navigateurs, en fonction de votre code, il peut y avoir quelques différences dans l'exécution d'une page html sur le navigateur choisi. N'en soyez pas étonnés !

Mais pourquoi exécuter un html ?

Le fichier Javascript seul ne permet pas de faire apparaître quoi que se soit sur un navigateur. Un fichier Javascript est TOUJOURS l'heureux compagnon d'un fichier html (qui serai bien moins dynamique sans lui) !!
Première page en Javascript
Afin d'être certain que tout le monde puisse suivre, nous allons générer notre première page .js à l'aide d'un simple éditeur de texte.
  1. Se positionner sur le bureau de votre ordinateur, faire un clique-droit et cliquer sur Nouveau > Document texte ;
  2. Nommer ce nouveau fichier hello.js (en acceptant le changement d'extension du fichier) ;
  3. Ouvrir le fichier avec un éditeur de texte et écrire les lignes suivantes, avant d'enregistrer :
                                
    alert('Hello World !') ;
                                
                            
Vous venez de créer votre premier fichier .js, qui permet de générer votre première boîte de dialogue.
Pour en voir l'effet, il est nécessaire de lier ce présent fichier à un fichier .html.
3. Créer un lien entre le fichier .hml et le fichier .js
Le lien entre le script et le fichier .html va se faire grâce à une balise spécifique :
                        
<script src="hello.js"></script>
                        
                    
  1. Créer un fichier .html contenant le squelette de base, et la balise de lien :
                                    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Page 1</title>
            <meta charset="utf-8">
        </head>
        <body>
            <script src="hello.js"></script>
        </body>
    </html>
                                    
                                
    Remarque : vous pouvez positionner la balise un peu où vous souhaitez. Quand le script est très volumineux, on préfère le mettre en fin de .html.
  2. Positionner les deux fichiers .html et hello.js (créer précédemment) dans le même dossier (à terme, vous apprendrez à les séparer dans des dossiers différents, pour plus de clarté !) ;
  3. Exécuter le fichier .html dans votre navigateur.
4. Intégrer un script javascript ponctuellement dans le html
Bien que ce code vous présentera exactement le même rendu, il est préférable d'appliquer un style à chaque balise :
  • Par souci de cohérence de style ;
  • Par souci de travail de programmation.

Il est possible d'intégrer un script directement dans le fichier .html à l'intérieur d'une balise <script></script>, positionnée dans le fichier .html :
                    
<!DOCTYPE html>
<html>
    <script>
    alert('Hello World !') ;
    </script>                 
    <head>
        <title>Page 1</title>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>
                    
                
Cette solution alourdie le fichier .html, qui lors de sa génération va pousser le navigateur à lire tout le Javascript.

Préférez la solution avec un fichier séparé, beaucoup plus propre !!
Sachez que vous pouvez lier autant de fichier Javascript différents que vous voulez.