Outils pour utilisateurs

Outils du site


cours2007:poo1:td:petits_exercices

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-release-1.11.element_window_fx.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 (+element +window)-->
    <script src="../javascript/mootools-release-1.11.element_window_fx.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 :

/* 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
       setText      : Une fonction de mootools qui gère les
                      différence entre navigateurs (IE)
                      Permet de changer le texte contenu
    */
    $('message').setText('Bien pas grand-chose ');
  });
});

Les points importants sont :

  • 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-release-1.11.element_window_fx.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() {
    $('<hi Olive>message</hi>').<hi Blue>setText</hi>('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').setText('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-release-1.11.element_window_fx.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').setText('Bien pas grand-chose ');
  });
 
  ______________________________________________
    _____________________________________________
  ___
 
  _______________________________________________
    _____________________________
  ___
 
  _______________________________________
    $('____').setText('Jojo : Ne l\'écoutez pas');
    $('____').setText('-----------');
  ___
  _______________________________________
    _________________________________
    ________________________________________________________
  ___
 
 ______________________________________________
    $('__________').appendChild(
      new Element( 'li', {
          'styles': {
              'color': 'red'
          }
      }).setText('encore !')
    );
  ___
 
});

Solution :

Exercices

Salutation

Pseudo-code :

Variables :

  • Sexe Caractère M pour masculin F pour féminin
  • Statu Chaîne de caractère marié pour marié ou …
  • Age Entier désigne l’age
  • Réponse Chaîne de caractère recevant la réponse

Début :
Lire (Sexe)
Lire (Statut)
Lire (Age)
Si (Sexe == “M” ){
  Si ( Age < 18 ) {
    Réponse=“Salut p'tit mec” }
    Sinon { Réponse=” Bonjour monseigneur ” }
  }
  sinon {
    si (Statut=“marié” ) {
      Réponse=” Bonjour madame ” }
    sinon {
    si ( Age < 25 ) {
      Réponse=” Salut poupée ” }
    sinon { Réponse=” Bonjour madame ” }
  }
}
Afficher (Réponse)

HTML

salutation.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>Salutation</title>
	<script src="../javascript/mootools-release-1.11.element_window_fx.js" type="text/javascript" charset="utf-8"></script>
 
	<script src="salutation.js" type="text/javascript" charset="utf-8"></script>
</head>
 
<body>
    <form action="#" method="get" accept-charset="utf-8">
        <p>
            <label for="sexe">Sexe</label>
            <input type="text" name="sex" value="" id="sexe" />
        </p>
 
        ___
            ____________________________
            __________________________________________________
        ____
 
        ___
            __________________________________
            ________________________________________________________
        ____
 
        <p><input type="button" value="Salutation" id="salutation" /></p>
    </form>
 
    <p id="message"></p>
</body>
</html>

JavaScript

salutation.js

window.addEvent('domready', function(){
  $('salutation').addEvent('click',function() {
    ___________________________
    _______________________________
    var age = parseInt($('age').value,10);
    var reponse;
 
    if( sexe=="M" ) {
      if ( age<18)  { 
        reponse = "Salut p'tit mec"; 
      } else { 
        ________________________________ 
      __
    ________
      _______________________
        ____________________________
      ________
        _______________
          _________________________ 
        ________ 
          ____________________________
        __
      __
    __
    $('message').setText(reponse);
  });
});

Boucle

Pseudo-code :

Variables :

  • Somme entier valeur de la somme
  • Nbr entier borne supérieure
  • i entier prend les valeurs de 1 à Nbr

Début Boucle Pour :
Lire (Nbr)
Somme = 0
Pour ( i = 1 ; i =< Nbr ; i = i+1 )
  { Somme = Somme + i ) }
Afficher (Somme)
Début Boucle Tant que :
Lire (Nbr)
Somme = 0
i =0
Tant que ( i =< Nbr ; )
  { Somme = Somme + i )
    i = i + 1 }
Afficher (Somme)
Début Répéter jusqu’a :
Lire (Nbr)
Somme = 0
i =0
Répeter
  { Somme = Somme + i ) }
    i = i + 1 } jusqu'à ( i > Nbr )
Afficher (Somme)

HTML

boucle.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>Boucles</title>
    <script src="../javascript/mootools-release-1.11.element_window_fx.js" type="text/javascript" charset="utf-8"></script>
 
    <script src="boucles.js" type="text/javascript" charset="utf-8"></script>
 
</head>
 
<body>
    _____________________________________________________
        ___
            __________________________________
            ________________________________________________________
        ____
        ________________________________________________________
    _______
 
    ____________________
 
</body>
</html>

JavaScript

Boucle pour :
boucle.js

window.addEvent('domready', function(){
  $('boucle').addEvent('click',function() {
    _________________________________________
    ______________
    for (var i=1; i <= nombre; i++) {
      ___________
    };
    ____________________________
  });
});

Boucle tant que :
boucle.js

window.addEvent('domready', function(){
  $('boucle').addEvent('click',function() {
    _________________________________________
    ______________
    ______________
    while (                 ) {
      ___________
      ___________
    };
    ____________________________
  });
});

Boucle jusqu'à :
boucle.js

window.addEvent('domready', function(){
  $('boucle').addEvent('click',function() {
    _________________________________________
    ______________
    ______________
    do {
      ___________
      ___________
    } while (                 ) ;
    ____________________________
  });
});

Monnaie

Pseudo-code :

Variables :

  • Prix entier le prix à payer
  • Donner entier la somme versée
  • Rendre entier la somme à rendre
  • P20 entier le Nbr de coupure de 20 à rendre
  • P10 entier le Nbr de coupure de 10 à rendre
  • P5 entier le Nbr de coupure de 5 à rendre
  • P2 entier le Nbr de piéces de 2 à rendre
  • P1 entier le Nbr de piéces de 1 à rendre

Début :
Rendre = Donner – Prix
Si ( Rendre < 0 )
  { message('montant insuffisant') }
Sinon {
  P20 = Rendre DIV 20
  Rendre = Rendre – (P20 * 20 )
  Afficher(P20)
  P10 = Rendre DIV 10
  Rendre = Rendre – (P10 * 10 )
  Afficher(P10)
  P5 = Rendre DIV 5
  Rendre = Rendre – (5 * 5)
  Afficher(P5)
  P2 = Rendre DIV 2
  Rendre = Rendre – (P2 * 2 )
  Afficher(P20)
  P1 = Rendre DIV 2
  Afficher(Rendre)
}

HTML

  à faire

JavaScript

  à faire
cours2007/poo1/td/petits_exercices.txt · Dernière modification: 2008/04/24 22:00 (modification externe)