Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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 :  
{{ :isn:javascript_01.png?nolink |}}

===== 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 HTM**L c'est à dire juste avant la fermeture de l’élément **<body>**.
<code html>
<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <script>
        alert('Hello world!');
    </script>
    <script src="voirure.js"></script>
</body>
</html>
</code>

===== 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 : \\ 
-{{:isn:imgflecheDroite.png?nolink&50|imgflecheDroite.png}} - {{:isn:imgflecheGauche.png?nolink&50 |imgflecheGauche.png}} - {{:isn:imgflecheAvancer.png?nolink&50|imgflecheAvancer.png}} - {{:isn:imgflecheReculer.png?nolink&50|imgflecheReculer.png}} - {{:isn:fleche-blanche-paysage.png?nolink&50|fleche-blanche-paysage.png}} - {{:isn:fleche-blanche-portrait.png?nolink&50|fleche-blanche-portrait.png}} -

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 3x3 placé dans un bloc **%%<div>%%** 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 **%%<span>%%** :
<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>
<WRAP center round info>
**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**. 
</WRAP>

<WRAP center round info>
Le code complet de la page : {{:isn:index.html.pdf|}}
</WRAP>


===== 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 ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
