Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:td:mise_en_jambe

Mise en jambe

Petits exercices en JavaScript

Le minimum pour du JavaScript

L'exemple suivant se base sur l'utilisation de Librairies Mootools.

Les raisons de l'usage d'une librairie seront abordées en cours.

Organisation des fichiers :

javascript/
	mootools-1.2.1-core-nc.js
minimal/
	minimal.html
	minimal.js
  • javascript : un répertoire pour placer le code JavaScript
    • mootools-release-1.11.element_window_fx.js : une version de la librairie Mootools
  • minimal : un répertoire où on place l'exemple
    • minimal.html : Le code HTML de l'exemple
    • minimal.js : Le code JavaScript de l'exemple.

Vous pouvez télécharger une copie de ces fichiers.

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>minimal</title>
    <!-- Charge la libraire mootools -->
    <script src="../javascript/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
    <!-- Votre propre script -->
    <script src="minimal.js" type="text/javascript" charset="utf-8"></script>
 
</head>
 
<body>
    <!-- Un Formulaire avec un bouton 
         # est utilisé pour symboliser que le formulaire ne fait rien 
            (en fait retourne à la même page au même endroit)-->
    <form action="#" method="get" accept-charset="utf-8">
        <!-- Un simple bouton : IMPORTANT un id pour pouvoir le retrouver -->
        <p><input type="button" value="Dis-moi tout" id='dis_moi_tout'/></p>
    </form>
    <!-- Du code HTML que l'on va changer IMPORTANT un id pour pouvoir le retrouver -->
    <p id="message">Le message à changer</p>
 
</body>
</html>

Les points importants sont :

  • On charge la libraire Javascript Mootools
  • On charge son propre code JavaScript
  • Les boutons se placent dans un formulaire
  • Les éléments avec lesquels on souhaite interagir doivent être identifiables.
    • Le plus simple est d'utiliser un id.

Code JavaScript :

/* Déclarations pour http://jslint.com/ */
 
/*jslint 
  white: true, 
  bitwise: true,
  eqeqeq: true,
  newcap: true,
  nomen: true,
  onevar: false,
  plusplus: true,
  regexp: true,
  undef: true,
  browser: true,
*/
 
/*global $
*/
 
/*members addEvent, set
*/
 
/* Le premier point c'est que l'on ne peut 
   interagir avec la page que lorsqu'elle est chargée :
    window   : la fenétre.
    addEvent : ajoute un écouteur d'événement.
    domready : le nom de l'événement auquel réagir
    function() {} : Une fonction anonyme -> quoi faire
*/
window.addEvent('domready', function () {
    /* $()           : un raccourci, permet de retrouver par id
       dis_moi_tout  : l'id de l'élément à retrouver
       addEvent      : ajoute un écouteur d'événement.
       click         : le nom de l'événement
       function() {} : Une fonction anonyme -> quoi faire
    */
    $('dis_moi_tout').addEvent('click', function () {
        /* $('message') : retrouve l'élément d'id message
           set   : Une fonction de mootools qui gère les
                   différences entre navigateurs (IE)
                   Permets de changer différentes propriétés
                   ici, le texte contenu
        */
        $('message').set('text', 'Bien pas grand-chose');
    });
});

Les points importants sont :

  • JSLint permet d'éviter beaucoup d'erreurs
  • Toute interaction avec la page doit se faire après son chargement.
  • Le moyen d'interagir avec la page est l'utilisation d'événements.
  • Le moyen le plus courant pour accéder à des éléments; est d'utiliser un id.
  • On a toute latitude pour modifier le contenu de la page.

Pour ne pas prendre peur, une version en abrégé :

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>minimal</title>
    <script src="../javascript/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
    <!-- Votre propre script -->
    <script src="minimal.js" type="text/javascript" charset="utf-8"></script>
 
</head>
 
<body>
    <form action="#" method="get" accept-charset="utf-8">
        <p><input type="button" value="Dis-moi tout" id='dis_moi_tout'/></p>
    </form>
    <p id="message">Le message à changer</p>
</body>
</html>

En bref, on a du code HTML et on charge des scripts

Code JavaScript :

window.addEvent('domready', function () {
    $('dis_moi_tout').addEvent('click', function () {
        $('message').set('text', 'Bien pas grand-chose');
    });
});

Là, ne pas comprendre c'est normal.

Lecture du code

On peut le lire de la façon suivante :

$('dis_moi_tout').addEvent('click', function () {
$('message').set('text', 'Bien pas grand-chose ');
});

quand on click sur le bouton dis_moi_tout, on change le texte du paragraphe message

Dis avec du vocabulaire informatique :

  • On ajoute un gestionnaire pour l'événement click à l'élément d'id dis_moi_tout
  • On change le texte contenu par l'élément d'id message

Questions à deux francs :

  • Quel est le plus important des paragraphes précédant ?
  • Dans quel ordre les écrire ?.

Mise en jambe

Compléter le code suivant :

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>Mise en jambe</title>
    <script src="../javascript/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
    <!-- Votre propre script -->
    <script src="mise_en_jambe.js" type="text/javascript" charset="utf-8"></script>
 
</head>
 
<body>
     <form action="#" method="get" accept-charset="utf-8">
        <p><input type="input" value="Dis-moi tout" id='dis_moi_tout'/></p>
    </form>
    <p id="message">Le message à changer</p>
 
    <form action="#" method="get" accept-charset="utf-8">
        <p><input type="button" value="Mais encore" id='mais_encore'/></p>
    </form>
    <!-- message à remplacer par : Vraiment rien -->
    <p id="second_message">La c'est autre chose</p>
 
    <p id="____________">
        Vous voullez que je vous dise : <span id="____">quoi ?</span>
    </p>
 
    _____________Jojo : C'est lui qui à commencer____
    _____________Jack : Non c'est toi____
 
    <ul id="__________">
        <li>On y vas ?</li>
    </ul>
</body>
</html>

Code JavaScript :

window.addEvent('domready', function () {
 
  $('dis_moi_tout').addEvent('click', function () {
    $('message').set('text', 'Bien pas grand-chose ');
  });
 
  ______________________________________________
    _____________________________________________
  ___
 
  _______________________________________________
    _____________________________
  ___
 
  _______________________________________
    $('____').set('text', 'Jojo : Ne l\'écoutez pas');
    $('____').set('text', '-----------');
  ___
  _______________________________________
    _________________________________
    ________________________________________________________
  ___
 
 ______________________________________________
    $('__________').appendChild(
      new Element('li', {
          'styles': {
              'color': 'red'
          }
      }).set('text', 'encore !')
    );
  ___
 
});

Solution :

cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/td/mise_en_jambe.txt · Dernière modification: 2009/04/12 22:00 (modification externe)