Table des matières

Activité Javascript N°1 - interagir avec la page HTML

Activité Javascript N°1 - interagir avec la page HTML

Présentation de javascript

JavaScript est un langage de programmation de scripts orienté objet qui est utilisable dans les navigateurs actuels car ceux-ci intègre un interpréteur JavaScript.

Le code javascript s'inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l'utilisateur, des animations, de l'aide à la navigation, etc.

JavaScript est un langage dit client-side, 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 server-side qui sont exécutés par le serveur Web comme le langage PHP.

Utiliser Javascript dans un navigateur

Tous les navigateurs récents proposent des outils de développement qui permettent d'écrire et de tester votre code javascript.

lancer Firefox
à partir du menu Développement web, lancez la console Web.
dans l'onglet Console, vous pouvez tapez des instructions javscript :

Placer du code javascript dans la page HTML

Il y a 2 manières d'inclure du code javacsript dans une page HTML :

en incluant un fichier avec l'extension .js grâce à sa déclaration dans l'entête de la page HTML,
en ajoutant du code javascript entre les balises <script> </script>. Dans ce cas, il est conseillé de faire ces ajouts de code à la fin de la page HTML c'est à dire juste avant la fermeture de l’élément <body>.

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <script>
        alert('Hello world!');
    </script>
    <script src="voirure.js"></script>
</body>
</html>

Modifier un élément suite à une action

La page de la voiture va être modifiée afin d'afficher les flèches de direction si les cases à cocher sont activées.

Ajout d'un tableau de flèches

Dans le dossier du projet, créez un dossier images et mettez dans ce dossier les quatre images suivantes :
- - - - - - -

L'utilisation de bloc HTML <div> va permettre de placer le tableau de flèches à droite des cases à cocher :

les cases à cocher sont placées dans un bloc <div> dont le style CSS le positionne comme flottant à gauche (float:left;),
les images des quatre flèches de direction sont dans un tableau de dimension 3×3 placé dans un bloc <div> qui va alors se placer à côté de celui des cases à cocher. La page HTML est modifiée ainsi :

 <fieldset>
  <legend>Cochez les flèches à activer :</legend> 
  <div id="casefleches">
  <input type="checkbox" name="flecheAvancer" id="flecheAvancer" /> <label for="flecheAvancer">Avancer</label><br />
  <input type="checkbox" name="flecheReculer" id="flecheReculer" /> <label for="flecheReculer">Reculer</label><br />
  <input type="checkbox" name="flecheDroite" id="flecheDroite" /> <label for="flecheDroite">Droite</label><br />
  <input type="checkbox" name="flecheGauche" id="flecheGauche" /> <label for="flecheGauche">Gauche</label>
  </div>
  <div id="imafleches">
    <table>
   <tr>
     <td></td>
     <td><img id="imgflecheAvancer" src="imgflecheavancer.png" /></td>
	 <td></td>
   </tr>
   </tr>
     <td><img id="imgflecheGauche" src="imgflechegauche.png" /></td>
	 <td></td>
	 <td><img id="imgflecheDroite" src="imgflechedroite.png" /></td>
   </tr>
   <tr>
     <td></td>
     <td><img id="imgflecheReculer" src="imgflechereculer.png" /></td>
	 <td></td>
   </tr>
  </div>
 </fieldset>

Explications :

Chaque bloc <div> dispose d'un id pour leur attribuer un style CSS si nécessaire,
un tableau est créé avec le couple de balise <table> </table>,
une ligne du tableau est créée avec le couple de baise <tr> </tr>,
une cellule d'une ligne est créée avec le couple de balises <td> </td>.

le fichiers de style CSS style.css contient les informations suivantes :

#casefleches {
  float:left;
}

Voici le résultat à obtenir :

Afficher les images des flèches avec javascript

Crée un fichier voiture.js
Ajoute cette balise à la fin du fichier HTML, avant la balise </body>:

<script type="text/javascript" src="voiture.js"></script>

Au lancement de la page les images ne doivent pas être affichées. Pour cela le script doit :

sélectionner les quatre éléments image à partir de leur id,
modifier la propriété des balises src afin d'indiquer l'image fleche-blanche-paysage.png pour les flèches de direction et l'image fleche-blanche-portrait.png pour les flèches de mouvement. Ces images sont blanches de telle sorte que rien ne semble s'afficher sur la page.

Le script javascritp du fichier voiture.js va contenir les instructions suivantes :

// affichage des fleches blanches
var imgFlecheAvancer = document.getElementById('imgFlecheAvancer');
imgFlecheAvancer.setAttribute('src', 'fleche-blanche-portrait.png');
var imgFlecheReculer = document.getElementById('imgFlecheReculer');
imgFlecheReculer.setAttribute('src', 'fleche-blanche-portrait.png');
var imgFlecheDroite = document.getElementById('imgFlecheDroite');
imgFlecheDroite.setAttribute('src', 'fleche-blanche-paysage.png');
var imgFlechegGauche = document.getElementById('imgFlecheGauche');
imgFlecheGauche.setAttribute('src', 'fleche-blanche-paysage.png');

Explications :

une des méthodes pour accéder à un élément en connaissant son ID est d'utiliser la méthode getElementById() de l'objet document qui représente la page HTML,
il est plus simple de mémoriser la référence à cet élément en le plaçant dans une variable déclarée avec le mot clé var,
une instruction javascript se termine toujours avec un point-virgule ; ,
Pour interagir avec les attributs d'un élément, deux méthodes sont disponibles :
- getAttribute() pour lire la valeur d'un attribut,
- setAttribute() modifier la valeur d'un attribut en précisant le nom de l'attribut et la nouvelle valeur à donner.

Changer l'image d'une flèche en fonction des cases à cocher

Pour afficher la bonne image d'une flèche en fonction de l'activation d'une case à cocher il faut :

ajouter un gestionnaire d'événement sur la case à cocher, c'est à dire de pouvoir déclencher l'exécution d'une fonction dès qu'une action se produit sur la case à cocher : cocher ou décocher.

Voici une liste de quelques événements principaux ainsi que les actions qui les déclenchent :

Nom de l'événement	Action pour le déclencher
click	Cliquer (appuyer puis relâcher) avec la souris sur l'élément
dblclick	Double-cliquer sur l'élément
mouseover	Survoler avec la souris l'élément
mouseout	Faire sortir le curseur de l'élément
mousedown	Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément
mouseup	Relâcher le bouton gauche de la souris sur l'élément
mousemove	Faire déplacer le curseur sur l'élément
keydown	Appuyer (sans relâcher) sur une touche de clavier sur l'élément
keyup	Relâcher une touche de clavier sur l'élément
keypress	Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
focus	Cibler l'élément
blur	Annuler le « ciblage » de l'élément
change	Changer la valeur d'un élément spécifique aux formulaires (input,checkbox, etc.)
select	Sélectionner le contenu d'un champ de texte (input,textarea, etc.)

ajoutez le code suivant au script javascript

// Ajout des gestionnaires d'événement clic de souris sur les cases à cocher
var flecheReculer = document.getElementById('flechereculer')
flecheAvancer.addEventListener('change',afficheImageAvancer);
var flecheReculer = document.getElementById('flechereculer')
flecheReculer.addEventListener('change', afficheImageReculer);
var flecheDroite = document.getElementById('flechedroite')
flecheDroite.addEventListener('change', afficheImageDroite); 
var flecheGauche = document.getElementById('flechegauche')
flecheGauche.addEventListener('change', afficheImageGauche);
 
function afficheImageAvancer() {
   alert('id ' + this.id + 'est : ' + this.checked)
	if (this.checked) {
	    imgFlecheAvancer.setAttribute('src', 'imgflecheavancer.png');
	} else {
        imgFlecheAvancer.setAttribute('src', 'fleche-blanche-portrait.png');
    }	
}

Explication :

chaque case à cocher est identifiée par son id grâce à la méthode getElementById() et cette référence est enregistrée dans une variable.
la méthode addEventListener() :
- ajoute l'événement change à la case à cocher,
- le 2ème paramètre de cette méthode indique quelle fonction sera exécutée lorsque l'événement surviendra.

Pour cela, la fonction est indiquée SANS PARENTHESE afin de ne pas l'exécuter mais uniquement la référencer.

la fonction à exécuter est déclarée avec le mot clé function et le code est mise entre accolades ( { et } ),
seule la fonction qui gère l'affichage de la flèche Avancer est présentée,
le mot clé this est une propriété pointant sur l'objet actuellement en cours d'utilisation c'est la case à cocher qui a déclenché l'événement.
l'instruction alert(); affiche un pop-up indiquant si la case à cocher est cochée true ou non False en concaténant plusieurs informations.
un test if vérifie si la case est cochée et modifie la propriété src pour afficher l'image. Sinon l'image blanche est affichée.

Le résultat avec Trinket.io

Préciser la vitesse du moteur

Il peut être intéressant d'afficher une information textuelle comme la vitesse du moteur. Pour cela :

un élément est ajouté dans la page à l'endroit où doit être affichée l'information,
le script javascript doit écrire dans cet élément la vitesse du moteur quand celui-ci fonctionne.

ajout de la balise <span> :

     <td><img id="imgflecheGauche" src="images/imgflecheGauche.png" /></td>
	 <td><span id="afficheVitesse"></span></td>
	 <td><img id="imgflecheDroite" src="images/imgflecheDroite.png" /></td>
   </tr>

sélection de la balise <span>

var afficheVitesse = document.getElementById('afficheVitesse');

affichage de la vitesse

function afficheImageAvancer() {
	if (this.checked) {
	    imgflecheAvancer.setAttribute('src', 'images/imgflecheAvancer.png');
	    afficheVitesse.innerHTML = document.getElementById('vitesse1').value; 
	} else {
        imgflecheAvancer.setAttribute('src', 'images/fleche-blanche-portrait.png');
	    afficheVitesse.innerHTML = ""; 
    }

Explications :

la propriété innerHTML permet de lire et de modifier le contenu d'un élément HTML sous forme de texte,
l'attribut value de la balise input permet de lire et de modifier le contenu de ce champ de formulaire.

Le code complet de la page : index.html.pdf

Allez plus loin en javascript

Voici une ressource parmi d'autres pour découvrir Javascript :

https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript

Activité Les langages pour créer des sites Web ...

Les langages pour créer des sites Web