script

Un script JavaScript dans la page html

Nous avons vu comment exécuter un script js depuis l'ardoise firefox.

Nous voyons ici un premier exemple de script écrit dans la page html.

Pour écrire un script dans la page html, il suffit de l'inscrire entre les balises ouvrante et fermante script.

Exemple.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> hello </title>
    </head>
    <body>
    
    	<p> </p>
        <script>
        document.getElementsByTagName("p")[0].innerHTML = "Bonjour";  
        </script>
    </body>
</html>

Copiez et collez ce code dans une page vierge, que vous nommerez avec l'extension html. Puis ouvrez la avec un navigateur.

Au passage, expliquons un peu ce code :

document.getElementsByTagName("p") est un tableau contenant tous les éléments html de type paragraphe (c'est à dire compris entre <p> et </p>) de la page html.
On sélectionne le premier élément de ce tableau (ici, c'est le seul) par l'indice 0 : document.getElementsByTagName("p")[0].
On redéfinit ensuite son contenu html (qui était initialement vide) : document.getElementsByTagName("p")[0].innerHTML = "Bonjour"; .

Exemple 2.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  for </title>
    </head>
    <body>
        <script>
            for (let i = 1; i < 11; i++) {
				document.write(i * i + "<br>");
			}
        </script>
    </body>
</html>

Testez de même ce code dans une page vierge.

Script dans une page à part

Il est possible également d'écrire un script dans une page qui ne contiendra que ce script. Cette page sera alors nommée avec l'extension js. La page html qui utilise ce script contient dans ce cas un lien vers cette page.

Cette façon de procéder est utile à chaque fois qu'un script est utilisé dans plusieurs pages d'un site. Si le script était copié dans chaque page dans laquelle il est utilisé, toute modification de ce script demanderait de modifier une à une chacune des pages dans lesquelles on a copié le script. Tandis qu'avec la technique d'une page js et d'un simple lien sur cette page dans chaque page html l'utilisant, il suffira de modifier l'unique page du script pour que la modification soit immédiatement répercutée sur toutes les pages html. C'est ce que l'on appelle souvent le principe de "factorisation du code" que vous retrouverez dans de nombreux contextes.

Par exemple, sur ces pages de cours, lorsque vous cliquez sur un carré bleu en fin d'énoncé d'exercice pour voir une solution, c'est en fait un script JS qui se charge d'afficher la solution. Ce script n'est bien entendu écrit qu'une seule fois pour toutes les pages dans un fichier séparé.