Aller au contenu

Comportement d'une page web

Ce cours a pour support des activités où vous devrez écrire le code JavaScript d'une page dont le code HTML et CSS vous est fourni. Vous pouvez télécharger le code de base de toutes les activités en cliquant sur ce lien, puis le décompresser à l'aide d'un outils comme 7z.

Activité 1: evenements

En général, le comportement d'un élément dans une page web est des réactions à des évènements.

Par exemple, voici un bouton :

OFF

Et la description de son comportement : 

Evènement : L'utilisateur clique (sur le bouton)
Réaction  : si le texte du bouton est ON, le texte devient OFF
            si le texte du bouton est OFF, le texte devient ON

Le langage JavaScript (abrégé JS par la suite) nous permet d'exprimer une description similaire dans un format compréhensible par le navigateur.

JavaScript

Dans le dossier 01_evenements de l'activité, vous trouverez un fichier HTML evenements.html.

Ouvrez-le d'abord avec un navigateur. Vous devriez voir une page avec Hello, world ! centré.

Ouvrez-le ensuite avec un éditeur de code. Vous pouvez constater la présence d'un élément script dans le head : 

<script src="evenements.js"></script>

Il indique au navigateur que le comportement de la page est renseigné dans le fichier evenements.js. Au moment de charger la page, le navigateur va donc également charger le fichier evenements.js, et executer le code JS qui s'y trouve.

Console

Essayons d'observer ce comportement.

Dans le fichier JS, ajoutez la ligne suivante : 

console.log("Bonjour !");

console.log est l'équivalent en JS de print en Python. N'oubliez pas le ; !

Rechargez la page 01_evenements.html dans le navigateur. Et... rien ne se passe ?

C'est normal, console.log n'affiche pas du texte dans la page web, mais dans la console du navigateur. Pour voir la console dans Firefox, on appuie sur F12, ce qui fait apparaître les outils développeur :

f12 firefox

Puis on sélectionne l'onglet console :

console onglet

Et on peut voir notre Bonjour ! apparaître !

bonjour console

C'est dans la console que seront affichés les messages d'erreur de JS, comme par exemple une erreur de syntaxe. On pourra également s'en servir pour afficher des valeurs pour débogger notre code. A noter que, comme dans la console de thonny, on peut écrire du code JS directement dans la console.

chargement de page

Essayons maintenant de modifier la page web à l'aide du JS. Ajoutez la ligne suivante dans le fichier JS : 

document.getElementById("affichage").innerHTML = "Bravo !";

Dans cette ligne, document représente la page web.

La méthode getElementById permet de récupérer un élément HTML à partir de son identifiant, ici affichage. Cet élément corresponds, dans le HTML, à : 

<p id="affichage">
    Hello, world !
</p>

innerHTML est le contenu de l'élément (pour l'instant, Hello, world !). Donc, après l'execution de la ligne, on devrait avoir : 

<p id="affichage">
    Bravo !
</p>

Essayez de recharger la page dans le navigateur. Vous devriez avoir un message d'erreur :

error null

Il nous indique que getElementById("affichage") a renvoyé null, autrement dit que l'élement d'identifiant affichage n'existe pas. Mais pourtant, il est dans notre code HTML, non ?

En fait, c'est parce qu'au moment où le code JS est exécuté, notre élement affichage n'existe pas encore, puisque le navigateur n'a pas encore chargé la page.

On va donc faire en sorte que notre code s'execute quand la page est chargée. En JS, quand la page est chargée, l'élement window emmet un évènement load. On va donc ajouter notre modification de la page comme une réaction à cet évènement.

On commence par définir une fonction qui décrit la réaction :

function reaction_page_chargee() {
    document.getElementById("affichage").innerHTML = "Bravo !";
}

Puis on l'enregistre comme une réaction à l'élément load sur la fenêtre : 

window.addEventListener("load", reaction_page_chargee);

Rechargez la page, vous devriez maintenant voir apparaître Bravo ! à la place de Hello, world !.

window représente la fenêtre de la page. addEventListener est une méthode qui permet d'ajouter une réaction à un évènement. Le premier paramètre est le nom de l'évènement, ici "load". Le second paramètre est une fonction de la réaction.

Autre syntaxe

En JavaScript, on peut définir des fonctions sans leur donner de nom directement comme un paramètre : 

function () {
    instructions
}

C'est très utile quand on définit des réactions. On aurait pu définir la fonction de réaction directement au moment de l'enregistrer comme une réaction :

window.addEventListener("load", function () {
    document.getElementById("affichage").innerHTML = "Bravo !";
});

Cette manière de représenter un programme comme une réaction à des évènements est appelé programmation évènementielle. Elle peut prendre de nombreuses formes et se retrouve dans de nombreux langage. Elle est omniprésente dans la conception d'interfaces graphiques et web, pour laquelle elle est particulièrement adaptée.

Activité 2 : clic sur un bouton

Vous pouvez trouver dans le dossier de l'activité 2 une page web qui comporte un bouton et un texte qui invite à cliquer sur le bouton. On veut écrire le code JS de la page dans le fichier clic.js de manière à ce que si l'on clique sur le bouton, le texte devienne Bravo !.

Pour commencer, on peut observer la page à l'aide de l'inspecteur de code. Le bouton a pour identifiant clique-ici, et le texte a pour identifiant affichage.

Il nous faut donc écrire une réaction qui change le texte de l'affichage en Bravo !.

On peut simplement réutiliser une partie du code vu à l'activité précédente : 

function afficher_bravo(){
    document.getElementById("affichage").innerHTML = "Bravo !";
}

Ensuite, on veut, une fois la page chargée, enregistrer notre affichage comme une réponse à l'évènement click sur le bouton.

function reaction_page_chargee() {
    document.getElementById("clique-ici").addEventListener("click", afficher_bravo);
}

Finalement, on ajoute la réaction de la page à l'évènement de chargement de la page : 

 window.addEventListener("load", reaction_page_chargee);

Activité 3 : compteur

Vous pouvez trouver dans le dossier de l'activité 3 une page web qui comporte un bouton et un texte, 0. On veut écrire le code JS de la page dans le fichier compteur.js de manière à ce que si l'on clique sur le bouton, le nombre représenté dans la partie texte est augmenté de 1.

Aide 1

Pour créer une variable en JS, on utilise le mot clé let : 

let ma_variable = 2

Aide 2

Pour convertir une chaîne de caractère en entier, on utilise : 

parseInt("mon nombre ici", 10);

Par exemple : 

let val = parseInt("123", 10); 
///ici val vaut 123.

Pour convertir un entier en chaîne de caractère, on utilise : 

ma_variable_entiere.toString();

Par exemple : 

let val = 10;
let string = val.toString();

Aide 3

Commencez par écrire une fonction ajouter_1 qui:

  • récupère le texte de l'affichage
  • la convertis en entier
  • lui ajoute 1
  • convertis le résultat en chaîne
  • en fait le texte de l'affichage

Puis inspirez-vous du code de l'activité précédente pour enregistrer cette fonction comme réaction à l'évènement du clic sur le bouton.

Activité 4 : intervalle

Vous pouvez trouver dans le dossier de l'activité 4 une page web qui comporte un texte représentant un nombre, 0. On veut écrire le code JS de la page dans le fichier intervalle.js de manière à ce que chaque seconde, le nombre soit augmenté de 1.

Aide 1

Vous pouvez réutiliser la fonction ajouter_1 de l'activité précédente.

Aide 2

En JS, la fonction setInterval permet d'appeler une fonction à intervalle régulier, par exemple pour appeler une fonction hello chaque seconde, on fait : 

function hello () {
    console.log("hello");
}

setInterval(hello, 1000);

Aide 3

Quand la page web est chargée, utilisez la fonction setInterval pour appeler chaque seconde la fonction ajouter_1.

Activité 5 : chronometre

Nous allons faire un chronomètre minimaliste.

Vous pouvez trouver dans le dossier de l'activité 5 une page web qui comporte un bouton et un texte représentant un nombre, 0. On veut écrire le code JS de la page dans le fichier chronometre.js, pour que la page se comporte de la manière suivante :

Quand on clique sur le bouton :

  • Si le texte du bouton est Start, alors le texte du bouton devient Stop, et le chronomètre démarre : le nombre est augmenté de 1 à chaque seconde.
  • Si le texte du bouton est Stop, alors le texte du bouton devient Reset, et chronomètre s'arrête.
  • Si le texte du bouton est Reset, alors le texte du bouton devient Start, et le nombre est remis à zéro.

Aide 1

En JS, l'instruction conditionnelle if a la syntaxe suivante : 

if (condition){
    instructions
}

Par exemple, si on veut tester que la variable a a la valeur "Start", on fait : 

if (a === "Start"){
    // ...
}

Le if... else if... else est un peu simulaire : 

if (condition1){
    instructions1
} else if (condition2) {
    instructions2
} else {
    instructions
}

Aide 2

La fonction setInterval retourne un identifiant qui permet d'arrêter la répétition à l'aide de la fonction clearInterval. 

let id_interval = setInterval(hello, 1000);
clearInterval(id);

Vous pouvez, par exemple, le stocker dans une variable déclarée directement dans le fichier chronometre.js, en dehors de toute fonction.

Activité 6 : test de réaction

Et si on testait nos propres capacités de réaction ?

Vous pouvez trouver dans le dossier de l'activité 6 une page web avec un élément de texte, initialement Cliquez .... L'idée est simple :

Si l'utilisateur clique n'importe où sur la page:

  • Si le texte de la page est Cliquez ...:

    • Le texte passe à Attendez ...
    • L'arrière plan de la page change de couleur

    • Un compte à rebours aléatoire en milisecondes est mis en place, entre 5 et 10 secondes. A la fin du compte à rebours :

      • Le texte passe à CLIQUEZ !!!
      • L'arrière plan de la page revient à sa couleur initiale.
      • Un chronomètre démarre.

  • Si le texte de la page est Attendez ...:

    • La page reprends sa couleur initiale
    • Le texte devient Trop tôt !.
    • Le compte à rebours est arrêté ou ignoré.

  • Si le texte de la page est CLIQUEZ !!!:

    • Le texte devient la valeur du chronomètre, en milisecondes, suivi de ms.
    • Le chronomètre est arrêté

  • Si le texte de la page est différent de toutes ces options :

    • Le texte devient Cliquez ...

Remarque 1

Dans cette activité, vous êtes autorisés à modifier le CSS et le HTML de la page pour arriver à vos fins. A noter toutefois qu'il est possible de faire tout en JS, sans toucher au HTML ou au CSS.

Remarque 2

Il n'y a pas d'aide particulière, parce que c'est une activité de fin de cours, donc c'est à vous de réfléchir. Toutefois, si vous pensez avoir besoin d'aide, vous pouvez demander au professeur, qui vous donnera de l'aide ou vous orientera vers des ressources où vous pourrez trouver des solutions à vos problèmes.

Remarque 3

C'est presque une aide... Mais il vous est conseillé de vous attaquer au problème petit à petit. Commencez par exemple par trouver comment changer la couleur de l'arrière plan de la page, puis comment créer un nombre aléatoire, puis comment faire un compte à rebours. Définissez des fonctions pour chaque tâche.