** qui va alors se placer à côté de celui des cases à cocher. La page HTML est modifiée ainsi : <code html> <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> </code> <WRAP center round info> **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>**. </WRAP> * le fichiers de style CSS **style.css** contient les informations suivantes : <code css> #casefleches { float:left; } </code> Voici le résultat à obtenir : {{ :isn:javascript_02.png?nolink |}} ==== 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>: <code html> <script type="text/javascript" src="voiture.js"></script> </code> 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 : <code javascript> // 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'); </code> <WRAP center round info> **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. </WRAP> ==== 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 <code 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'); } } </code> <WRAP center round info> **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. </WRAP> ==== Le résultat avec Trinket.io ==== <html> <iframe src="https://trinket.io/embed/html/5ec8f3fefc" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe> </html> ==== 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 <span></span> 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 **** : <code html> <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> </code> * sélection de la balise **<span>%% <code javascript> var afficheVitesse = document.getElementById('afficheVitesse'); </code> * affichage de la vitesse <code javascript> 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 = “”; } </code>