%%** dispose d'un **id** pour leur attribuer un style CSS si nécessaire,
* un **tableau** est créé avec le couple de balise **
**,
* une ligne du tableau est créée avec le couple de baise **
**,
* une cellule d'une ligne est créée avec le couple de balises **
| **.
* le fichiers de style CSS **style.css** contient les informations suivantes :
#casefleches {
float:left;
}
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 :
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 **%%
%%** :
 |
|
 |
* sélection de la balise **%%%%**
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 : {{:isn: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 ... ====
* [[isn:langageweb|Les langages pour créer des sites Web]]