PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • L'instruction POUR
  • L'instruction BOUCLE
  • L'instruction TANTQUE
  • Exemple pratique : Utilisation des boucles
  • Projet manipulé
  • Création de la page
  • Création des champs
  • Test de la page
Annexe 4. Les boucles
Ce que vous allez apprendre dans cette leçon
  • L'instruction POUR.
  • L'instruction BOUCLE.
  • L'instruction TANTQUE.
  • Exemple pratique.

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
Les instructions de boucle permettent d'exécuter un traitement de manière récurrente. Selon le nombre d'occurrences (connu ou pas) on utilise une instruction de boucle particulière. Il existe plusieurs instructions pour faire des boucles :
  • POUR ...
  • BOUCLE ...
  • TANTQUE ...

L'instruction POUR

L'instruction POUR est utilisée lorsque l'on connaît le nombre d'occurrences à traiter. Cette instruction permet de gérer le nombre d'occurrences à l'aide d'une variable dans laquelle on va compter les passages effectués dans la boucle.
La syntaxe de l'instruction POUR est la suivante :
POUR Indice = Valeur de départ A Valeur de fin
Traitement à exécuter
FIN
Par exemple, le code suivant exécute 2000 fois le traitement :
POUR nCpt = 1 À 2000
// Traitement à exécuter
FIN
Remarque : Il est possible de définir un pas d'incrémentation de l'indice grâce au mot-clé PAS. Par exemple, le code suivant exécute 200 fois le traitement et la variable nCpt diminue de 10 en 10 :
POUR nCpt = 2000 À 1 PAS -10
// Traitement à exécuter
FIN

L'instruction BOUCLE

L'instruction BOUCLE est utilisée pour faire des boucles lorsque le nombre d'occurrences à traiter n'est pas connu. Dans ce cas, il faut utiliser un test pour sortir de la boucle.
La syntaxe de l'instruction BOUCLE est la suivante :
BOUCLE
Traitement à exécuter
SI <Expression> ALORS SORTIR
FIN
Par exemple :
Compteur est un entier
Compteur = 10
BOUCLE
// Traitement à exécuter
Compteur = Compteur - 1
SI Compteur = 0 ALORS SORTIR
FIN

Astuce

L'instruction BOUCLE permet d'avoir le même comportement qu'une instruction POUR : il suffit d'utiliser la syntaxe avec sortie selon le nombre d'itérations :
BOUCLE (<Nombre d'itérations>)
...
FIN
Exemple :
BOUCLE(10)
// Traitement à exécuter
FIN

L'instruction TANTQUE

L'instruction TANTQUE fonctionne sur le même principe que l'instruction BOUCLE. La différence réside dans le fait que le test de la condition de sortie est effectué AVANT l'exécution du code de la boucle. Ce test permet de comparer une variable. Cette variable commence à une valeur de départ et est modifiée dans la boucle jusqu'à arriver à la valeur qui provoque la sortie de la boucle.
La syntaxe de l'instruction TANTQUE est la suivante :
<Initialisation de la variable à sa valeur de début>
TANTQUE <Comparaison de la variable à sa valeur de fin>
Traitement à exécuter
<Modification de la variable>
FIN
Par exemple :
Compteur est un entier
Compteur = 0
TANTQUE Compteur<10
// Traitement à exécuter
Compteur = Compteur + 1
FIN
Exemple pratique : Utilisation des boucles
Pour tester l'utilisation des boucles, nous allons créer une page dans laquelle nous allons déplacer un champ Image.

Projet manipulé

Pour manipuler les différents concepts de cette leçon, nous allons réaliser différentes pages. Ces pages vont être créées dans le projet "Mes_Premières_Pages".
  • Ouvrez si nécessaire le projet "Mes_Premières_Pages".
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Cliquez sur "Cours d'auto-formation" et sélectionnez le premier projet "Mes premières pages (Exercice)".

Création de la page

  • Créez une nouvelle page vierge :
    1. Cliquez sur Création parmi les boutons d'accès rapide. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page". L'assistant de création de pages s'affiche.
    2. Sélectionnez "Vierge".
    3. Validez. La page est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît.
    4. Indiquez le titre de la page "Boucles". Le nom de la page "PAGE_Boucles" est automatiquement proposé.
    5. Validez les informations affichées dans la fenêtre de sauvegarde en cliquant sur le bouton vert.

Création des champs

Nous allons tout d'abord créer le champ Image puis nous créerons les boutons permettant de manipuler cette image.
  • Pour créer un champ Image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image". Positionnez le champ dans la page.
    2. Faites un clic droit sur le champ et sélectionnez l'option "Description".
    3. Dans l'onglet "Général", modifiez le nom du champ : ce champ a pour nom IMG_Animal.
    4. Nous allons associer une image à l'onglet grâce au catalogue d'images de WEBDEV.

      Note

      Dès qu'une image peut être affichée dans un champ ou une page, WEBDEV propose d'utiliser le catalogue d'images. Ce catalogue d'images est lancé via l'option "Catalogue" (disponible en cliquant sur le bouton Menu déroulant). Ce catalogue contient plusieurs milliers d'images, de cliparts, ...
    5. Cliquez sur le bouton Menu déroulant à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue". La fenêtre du catalogue d'images apparaît.
    6. Saisissez "Animal" dans la zone de recherche. Lancez la recherche en cliquant sur la loupe.
      Catalogue d'images
    7. Sélectionnez l'image Image et validez (bouton vert).
    8. Une fenêtre permettant de paramétrer l'image apparaît.
      Paramètres de l'image
    9. Conservez les options par défaut et validez.
    10. Le chemin de l'image apparaît dans la fenêtre de description du champ Image.
    11. Dans l'onglet "IHM", dans la zone "Superposition et déplacement", cochez l'option "Le champ peut être superposé".
    12. Validez la fenêtre de description du champ.
    13. Positionnez le champ Image en haut à gauche de la page.
    14. Sauvez la page (Ctrl + S ou cliquez sur Sauver parmi les boutons d'accès rapide).
  • Nous allons maintenant créer un bouton permettant à l'image de se déplacer de 300 pixels vers la droite dans la page. nous allons pour cela utiliser l'instruction POUR du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple sous le champ Image).
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction POUR".
    4. Validez la saisie avec la touche Entrée.
    5. Affichez la fenêtre de description du champ (combinaison de touches Alt + Entrée).
    6. Dans l'onglet "Général", dans la zone "Action du bouton" :
      • pour l'option "Type", sélectionnez "Exécuter les codes navigateur uniquement".
      • pour l'option "Lors de l'action", sélectionnez "Ne rien envoyer au serveur".
    7. Validez la fenêtre de description du champ.
    8. Affichez les traitements associés au bouton (touche F2).
    9. Saisissez le code de clic navigateur suivant :
      // Déplace l'image horizontalement de 300 pixels
      POUR i = 1 À 300
      IMG_Animal..X++
      FIN
      Ce code permet de modifier l'abscisse du champ Image (propriété ..X) dans une boucle de 1 à 300. A chaque tour de boucle, l'abscisse augmente d'un pixel.

Note

Lors de la saisie des instructions conditionnelles sous l'éditeur de code, l'éditeur de code propose dans une liste les différentes syntaxes possibles.
Si vous sélectionnez une de ces syntaxes, la structure de l'instruction est automatiquement insérée dans l'éditeur de code. Il suffit de saisir le code correspondant à chaque partie de l'instruction.
  • Créons maintenant un bouton permettant de déplacer l'image jusqu'à ce que le bord de l'image soit à 1200 pixels. Nous allons pour cela utiliser l'instruction TANTQUE du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple à droite du bouton POUR).
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction TANTQUE".
    4. Validez la saisie avec la touche Entrée.
    5. Affichez la fenêtre de description du champ (combinaison de touches Alt Entrée).
    6. Dans l'onglet "Général", dans la zone "Action du bouton" :
      • pour l'option "Type", sélectionnez "Exécuter les codes navigateur uniquement".
      • pour l'option "Lors de l'action", sélectionnez "Ne rien envoyer au serveur".
    7. Affichez les traitements associés au bouton (touche F2).
    8. Saisissez le code de clic navigateur suivant :
      TANTQUE IMG_Animal..X < 1200
      IMG_Animal..X++
      FIN
      Ce code permet de modifier l'abscisse du champ Image (propriété ..X) jusqu'à ce qu'une condition soit vraie. Dans notre cas, cette condition est la suivante : il faut que la position de l'image (sa propriété ..X) corresponde à 1200.

      Astuce

      Lorsqu'une ligne de code est trop longue pour rentrer dans la fenêtre de l'éditeur de code, il est possible de la couper en 2 en utilisant le retour à la ligne.
  • Créons maintenant un dernier bouton permettant de déplacer l'image jusqu'au bord gauche de la page. Nous allons pour cela utiliser l'instruction BOUCLE du WLangage.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Champ Bouton.
    2. Cliquez à l'emplacement de création du bouton (par exemple à droite du bouton TANT QUE).
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition. Saisissez le libellé "Instruction BOUCLE".
    4. Validez la saisie avec la touche Entrée.
    5. Affichez la fenêtre de description du champ (combinaison de touches Alt + Entrée).
    6. Dans l'onglet "Général", dans la zone "Action du bouton" :
      • pour l'option "Type", sélectionnez "Exécuter les codes navigateur uniquement".
      • pour l'option "Lors de l'action", sélectionnez "Ne rien envoyer au serveur".
    7. Validez la fenêtre de description du champ.
    8. Affichez les traitements associés au bouton (touche F2).
    9. Saisissez le code de clic navigateur suivant :
      // Déplace l'image à gauche
      BOUCLE
      IMG_Animal..X--
      SI IMG_Animal..X <= 0 ALORS SORTIR
      FIN

      Ce code permet de modifier l'abscisse du champ Image (propriété ..X). A chaque tour, une condition est vérifiée. Si cette condition est vraie, le programme sort de la boucle. Dans notre cas, la condition est la suivante :
      • la position de l'image est 0,
      • la position de l'image est inférieure à 0 (permet de gérer le cas où l'utilisateur appuie plusieurs fois sur le bouton).

Note

Lors de la saisie de ce code, l'instruction BOUCLE peut apparaître soulignée d'un trait vert, et un warning peut apparaître dans le volet des erreurs de compilation.
Ce warning rappelle qu'une instruction de sortie doit être présente dans le code de la boucle pour éviter une boucle infinie.

Test de la page

  • Nous allons tester la page :
    1. Cliquez sur GO de page parmi les boutons d'accès rapide (ou utilisez la touche F9).
    2. La page que vous avez créée se lance en exécution.
    3. Cliquez sur les différents boutons.
      Test de la page
    4. Fermez la page de test.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire