C12 Interaction dans une page web

Activités

Activité 1 : Rappels : HTML et CSS

Quelques rappels
1. Lancer VSCode, créer un fichier intitulé qcm.html, y insérer la structure de base d'un fichier HTML (par exemple en tapant Ctrl+Space). On trouve dans l'entête la ligne :
```
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
```
  Quel est l'objectif de cette ligne ?
2. Remplacer le nom de la feuille de style par qcm.css et créer le fichier correspondant.
Dans le fichier qcm.html, ajouter les élément suivants :
1. un titre (balise <h1> ... </h1>)
2. un paragraphe de présentation du qcm (balise <p> ... </p>)
3. les questions de votre qcm contenant chacune un titre, un énoncé et une liste de réponses possibles. Un exemple est proposé ci-dessous :
```
<form>
    <span class="titre">Histoire de Javascript</span><br>
    <span class="enonce">En quelle année est né Javascript ?</span><br>
    <input type="radio" name="HJS"> 1990<br>
    <input type="radio" name="HJS"> 1995<br>
    <input type="radio" name="HJS"> 2000<br>
    <input type="radio" name="HJS"> 2005<br>
</form>
```
  Aide
  
  Faites vos propres recherches sur le Web, sur les balises de formulaires en HTML.
4. un bouton de validation du formulaire (balise <input type="submit">)
5. une zone ou apparaîtra le résultat de la validation des réponses (balise <div> .... </div>)
Création du css
1. Quel est le rôle de class="titre" dans la balise <span> entourant la question ?
2. Ouvrir le fichier qcm.css crée plus haut et y créer un style titre permettant d'avoir les titres de questions dans la couleur et le format de votre choix.
3. Faire de même pour les autres éléments de la page (titre, description, bouton de formulaire, ...)
Vers l'interaction
Notre page web est terminée, mais pour le moment cliquer sur le bouton de validation du formulaire ne produit aucun résultat. Les données récupérées dans un formulaire peuvent être traitées du côté du serveur (on parle alors en anglais de server-side scripting). Dans ce cas l'un des langages les plus populaires est php. Mais les données d'un formulaire peuvent aussi être traitées sur la machine du client (client-side scripting) et le langage alors utilisé est Javascript.
1. Quels sont les dangers potentiels lorsqu'une page Web exécute un programme sur votre ordinateur ?
2. Peut-on configurer son navigateur pour empêcher l'exécution de script ?
3. Quelles solutions ont été adoptées pour limiter les problèmes causées par le server-side scripting ?

Activité 2 : De l'interactivité avec Javascript

Nous devons commencer par indiquer que le bouton de validation de notre formulaire doit exécuter du code javascript (noter bien que ce bouton peut aussi permettre d'envoyer les données du formulaire vers un script coté serveur). La fonction de traitement des résultats du qcm doit être appelée lorsque l'utilisateur clique sur le bouton de validation du formulaire.

Modifier le bouton de validation du formulaire en :
```
<input type="submit" value="valider" onclick="javascript : resultat()">
```
Nous venons d'indiquer que lorsque l'utilisateur clique sur ce bouton, il faut exécuter la fonction resultat(). Un clic sur un bouton est un événement, et nous verrons que Javascript peut en gérer bien d'autres. La fonction resultat() reste bien sur encore à définir !
Dans l'entête de la page HTML obtenu dans VSCode se trouve la ligne :
```
<script src='main.js'></script>
```
1. Quel est l'objectif de cette ligne ?
2. Changer le nom du fichier javascript en qcm.js (au lieu de main.js) créer ce fichier y taper les lignes suivantes :
```
function resultat()
{
    alert("Javascript est dans la place !!!");
}
```
3. Tester alors l'effet produit par un clic dans votre page sur le bouton de validation
4. Comparer la syntaxe de définition d'une fonction en javascript à celle de Python.
5. Faire vos propres recherches sur les événements en Javascript, est-il possible de lancer l'exécution de la fonction resultat() lors d'un double clic ? lors d'un simple survol ? Quels sont les événements associés ? Tester

Modifier le code de la fonction resultat() dans le fichier qcm.js en :

function resultat() 
{
        // on récupère le contenu du bouton radio de la question  'HJS'
        reponse_question1 = document.getElementsByName("HJS")
        // c'est la bonne réponse lorsque la 2eme proposition (numérotée à partir de 0) est cochée 
        if (reponse_question1[1].checked) 
            {alert("bonne réponse")}
        else 
            {alert("mauvaise réponse")}
}

Comment insère-t-on des commentaires en Javascript ?
Comment a-t-on récupéré l'état du bouton radio de la question identifié par name='HJS' ?

Inventer un qcm de plusieurs questions, prévoir une zone de réponse (balise <div>...</div>) dans la page html. Cette zone pourrait contenir au départ un message comme "Votre score apparaitra ici lorsque vous aurez valider vos réponses". Puis, introduire une variable javascript permettant de compter le nombre de bonnes réponses de l'utilisateur et afficher le score dans cette zone.

Cours

Vous pouvez télécharger une copie au format pdf du diaporama de synthèse de cours présenté en classe :

Diaporama de cours

Attention

Ce diaporama ne vous donne que quelques points de repères lors de vos révisions. Il devrait être complété par la relecture attentive de vos propres notes de cours et par une révision approfondie des exercices.

QCM

1. Dans le programme Javascript ci-dessous, quelle est la notation qui délimite le bloc d'instructions exécuté à chaque passage dans la boucle while ?

var i=0
while (i<10) {
    alert(i);
    i = i + 1;
}
alert("Fin")

2. Quel mot clé permet de commencer la définition d'une fonction en Javascript ?

3. Parmi les balises HTML ci-dessous, quelle est celle qui permet à l'utilisateur de saisir son nom dans un formulaire en respectant la norme HTML ?

4. Parmi les propriétés suivantes d'une balise <button> dans une page HTML, laquelle doit être rédigé en Javascript ?

5. Quelle est la machine qui va exécuter un programme Javascript inclus dans une page HTML ?

Exercices

Exercice 1 : Corriger un programme Javascript

Une page html contient une balise <div id="message">...</div>, le programme suivant doit modifier cette zone de texte et y afficher "Bravo !" mais il comporte de nombreuses erreurs, les corriger.

function affiche():
        document.GetElementByid("message").innerHTML="Bravo !";

Exercice 2 : Quelques événements

Recopier puis tester, dans le squelette d'une page html les lignes suivantes :

<form>
        <input type="button" onclick="javascript:alert('Hello world !');" value="un bouton">
</form>

Que se passe-t-il si on clique plusieurs fois successivement sur ce bouton, pourquoi ?
Modifier le code de la page de façon à ce que la boîte d'alerte s'affiche :
- lors d'un double clic
- lorsque la souris survole le bouton
- lorsque la souris quitte le bouton

Exercice 3 : Indice de masse corporelle

Créer une page html contenant un formulaire demandant à l'utilisateur son poids et sa taille.
Créer un script Javascript traitant les données de ce formulaire pour calculer l'indice de masse corporelle (imc) c'est à dire poids sur taille au carré
Suivant la valeur de l'imc, créer une variable Javascript contenant l'interprétation associée (dénutrition, maigreur, poids ideal, ...)

Aide

On pourra consulter par exemple la page wikipedia sur ce sujet
Communiquer les résultats à l'utilisateur par une modification d'un élément de la page ou via une boîte d'alerte.

Exercice 4 : Idées de mini projet

Créer en utilisant Javascript, une page web permettant de :

mesurer son temps de réaction.

Aide

Ce site montre un exemple (très abouti) de ce qui est attendu.
convertir des unités par exemples francs en euros, ou degrés Celsius en degrés Fahrenheit.
afficher une couleur en donnant son code (R,G,B)