Manipuler les données Agtweb

Eléments manipulés

Les éléments qui peuvent être manipulés avec AlgoTouch sont : les variables, les constantes, les tableaux, les variables index, les index.

Les variables
Les variables sont représentées par une boîte avec un nom et un contenu. Le type de la variable est entier ou caractère.
Les constantes
Les constantes sont similaires aux variables mais le système ne permet pas leur modification. Pour les différencier des variables, elles ont une couleur différente (rouge par défaut). On distingue deux types de constantes: les constantes nommées (par exemple AgeLimite valant 25) et les valeurs (par exemple 3).
Les tableaux
Les tableaux sont représentés par une zone rectangulaire avec un nom et contenant les éléments du tableau de type entier ou caractère. Des tableaux de taille et de contenu différents peuvent être créés. Lors de la création d’un tableau, une constante représentant la longueur du tableau est créée automatiquement. Elle porte le même nom que le tableau avec l’extension .length.
Les variables index
Les variables index sont des variables dédiées. Une variable d’index est une variable entière attachée à un tableau spécifique. AlgoTouch montre graphiquement quel élément du tableau est effectivement pointé par chaque variable d’index.
Les index
Un index désigne la variable t[i] si t est un tableau et i est une variable d’index attachée au tableau t. Il peut être manipulé comme une variable standard.
Les macros
Une macro est une suite d’instruction (macro simple) ou une boucle unique (macro boucle) avec un nom et un rôle.

Trois autres éléments ont un rôle important pour faciliter les interactions : la poubelle, l’écran et le clavier.

La poubelle
Pour supprimer un élément, il suffit de le déposer sur la poubelle.
L’écran
Pour afficher le contenu d’une variable, il suffit de la déposer sur l’écran. Cette manipulation produit l’instruction d’affichage du contenu de la variable.
Le clavier
Pour demander à l’utilisateur de saisir une valeur pour la placer dans une variable, il suffit de déplacer le clavier sur la variable. Cette manipulation produit l’instruction de saisie d’une valeur.

Création d’un élément

Les éléments que l’on peut créer sont des variables, des constantes, des tableaux, des variables index, des macros. Tous ces éléments portent un nom différent. Ce nom, donné par l’utilisateur, est composé de lettres (minuscules ou majuscules) et/ou de chiffres et/ou du caractère “_” mais il doit commencer par une lettre.

Le nom ne doit pas être un mot clé du langage AlgoTouch.

Utiliser le menu Élément ou la barre d’outils

  • Variable Variable : création avec un bouton d’icône ou par le menu Élément → Variable : une variable est créée avec un nom et un rôle fourni par l’utilisateur. Elle est de type entier ou caractère. La variable est initialisée avec 0 ou le caractère espace en fonction de son type.
  • Constante : création par le menu Elément → Constante : une constante nommée est créée avec un nom, un rôle, un type et une valeur fournie par l’utilisateur. Une constante simple est créée en donnant uniquement sa valeur.
  • Array Tableau : création rapide d’un tableau standard. Le nom, le rôle et le type sont fournis par l’utilisateur. Un tableau de 10 éléments est créé avec des valeurs aléatoires entre 0 et 100 ou entre ‘a’ et ‘z’ suivant le type. A noter qu’une constante contenant la taille du tableau est créée automatiquement.
  • Index Variable index : un tableau doit d’abord être sélectionné car une variable index est une variable associée à un tableau. Création avec l’icône ou par le menu Elément → Index. Trois éléments sont créés : une variable utilisée comme une variable index, l’index avec une icône qui désigne a[index] et une flèche (verte par défaut) dessinée en face de la variable du tableau associée a[index]; lorsque la valeur de la variable index est modifiée, la position de la flèche est mise à jour. Si la valeur de la variable index est hors des limites du tableau, la flèche change de couleur (rouge par défaut).
  • Création d’un tableau personnalisé : utiliser le menu Elément → Tableau général : une fenêtre de dialogue permet à l’utilisateur de créer un tableau personnalisé. Outre le tableau, une constante contenant la taille de celui-ci est créée automatiquement.
Création d'un tableau personnalisé

Sélection d’un élément et dé-sélection

Certains éléments peuvent être sélectionnés pour engager une action les concernant. Clic gauche pour sélectionner : l’élément est surligné (entouré de rouge par défaut). En fonction de l’élément certains éléments des menus ou de la barre d’outils sont actifs. Clic gauche sur un autre élément ou sur l’arrière-plan pour désélectionner.

Déplacement d’un élément

Presser avec le bouton gauche de la souris, sur l’élément à déplacer, puis  le faire glisser vers un emplacement vide et enfin relâcher la souris. L’élément est déplacé à l’endroit final.

Dans le cas de déplacement de tous types de variables, si l’emplacement final est aussi une variable, l’opération est transformée en affectation.

Noter : le système interdit le déplacement des éléments en dehors de la zone de conception (coordonnées x ou y négatives).

Dans le cas du déplacement d’un tableau, la constante de longueur du tableau et les index attachés se déplacent également.

Modification d’un élément

Les valeurs des constantes nommées et des tableaux peuvent être modifiées

  • Sélectionner l’élément
  • Menu Élément → Modifier
  • Changer la valeur de la constante ou les valeurs du tableau.

Renommage d’un élément

Les variables, les constantes nommées, les variables index, les tableaux et les macros peuvent être renommés pour définir des identificateurs plus explicites. Le rôle de l’élément peut également être redéfini.

  • Sélectionner l’élément
  • Menu Élément → Renommer
  • Taper un nouveau nom et modifier le rôle si nécessaire.

Suppression d’un élément

Tout élément peut être supprimé sauf les constantes prédéfinies. Cependant, il ne doit être utilisé dans aucune macro. Si c’est le cas, un message d’erreur est affiché.

A noter : on ne peut supprimer une macro si c’est la dernière. En effet, un programme AlgoTouch doit toujours contenir au moins une macro (simple ou boucle).

  • Sélectionner l’élément
  • Menu Élément → Supprimer
  • Si l’élément est utilisé ou s’il s’agit de la dernière macro, un message d’erreur est affiché.

Raccourci : déplacer l’élément à supprimer sur la corbeille.

Actions sur les variables

Affectation

Une affectation est une opération qui consiste à déposer une valeur dans tout type de variable. La valeur d’origine est soit une variable, soit une constante, soit une variable index (exemple i), soit une variable de tableau (exemple a[3]) ou soit un index (exemple a[i]).

  • Appuyer avec le bouton gauche sur l’élément d’origine, une boite contenant la valeur de l’objet est affichée.
  • Faire glisser la valeur sur l’élément de destination qui est alors surligné : variable, variable index, variable d’un tableau ou index d’un tableau.
  • Déposer la valeur en relâchant le bouton de la souris. L’instruction associée apparaît sur la zone de la console.

A noter :

  • une constante ne peut être modifiée (elle n’est pas surlignée si la valeur passe au dessus!).
  • si la destination est vide, l’opération effectuée est un déplacement de l’élément d’origine

Modification du contenu d’une variable

  1. Sélectionner une variable
  2. Menu Opération → Saisir valeur
  3. Une boîte de dialogue apparaît demandant une nouvelle valeur.
  4. Une autre zone de saisie attend la question qui doit être posée à l’utilisateur dans le cas d’une opération de saisie lors de l’exécution d’un programme. Ceci est utile seulement pendant l’enregistrement d’une instruction d’entrée, voir opération de lecture.
Raccourcis :
  • effectuer un clic droit sur la variable
  • déplacer le clavier sur la variable

Affichage du contenu d’une variable

  1. Sélectionner une variable
  2. Menu Opération → Afficher valeur
  3. Une boîte de dialogue apparaît affichant la valeur de la variable sélectionnée.
  4. Une zone de saisie attend le message qui sera affiché avec la valeur dans le cas d’une opération d’affichage de valeur dans un programme. Ceci est seulement utile pendant l’enregistrement d’une instruction d’affichage, voir opération d’écriture.

Raccourci:

  • Déplacer la variable sur l’icône représentant un écran

Opérations arithmétiques

Il est possible d’exécuter une opération telle que :
   p = x op y ;
  1. Dans le menu Opération, choisir l’opération (+, -, *, /, %). Un opérateur apparaît avec 2 places pour les opérandes et une pour le résultat. Une icône représentant l’opération est affichée : elle est grisée signifiant que l’opération n’est pas encore définie.
  2. Déplacez la valeur x sur l’opérande de gauche. A ce stade, il est encore possible d’annuler l’opération en déplaçant l’opérateur sur l’icône de la corbeille.
  3. Déplacez la valeur y sur l’opérande de droite. Le résultat apparaît et l’icône de l’opérateur (x par exemple) apparaît en vert (prêt pour validation).
      Opérateur de multiplication
  4. Déplacer la valeur du résultat sur la variable p. L’opération a été effectuée et l’opérateur disparaît.

Incrément ou décrément d’une variable

Ces opérations étant très souvent utilisées, pour augmenter ou pour diminuer une variable dans une boucle par exemple, des raccourcis ont été introduits :

  • pour incrémenter une variable simple ou d’index,
    1. effectuer un appui sur le bouton gauche de la souris à gauche de la variable
    2. déplacer la à l’intérieur de la variable
    3. relâcher.
  • pour décrémenter une variable simple ou d’index,
    1. effectuer un appui sur le bouton gauche de la souris à droite de la variable
    2. déplacer la à l’intérieur de la variable
    3. relâcher.

Actions sur les tableaux

Modification du contenu de tableau

Effectuer un clic droit sur le tableau. Une fenêtre de dialogue proposera différentes configurations comme dans le cas de la création d’un tableau personnalisé :

  • Modifier la taille du tableau.
  • Mettre toutes les variables à la même valeur.
  • Placer des valeurs croissantes à partir d’une certaine valeur.
  • Placer des valeurs décroissantes à partir d’une certaine valeur.
  • Définir une étendue de valeur et choisir de remplir le tableau soit avec des valeurs aléatoires, soit avec des valeurs aléatoires croissantes, soit avec des valeurs aléatoires décroissantes.
  • Définir la liste des valeurs du tableau. Dans le cas des entiers, les valeurs sont séparées par des espaces ou des virgules. Dans le cas des caractères, les caractères sont listés à la suite car l’espace est un caractère. Si le nombre de valeurs est inférieur à la taille, le tableau est complété par des 0 ou des espaces suivant le cas.
  • Mélanger les valeurs actuelles.

Comparaison

L’objectif est de comparer le contenu de deux éléments x et y (variable, constante, variable index, index). La procédure est la suivante :
  1. Cliquer sur Scale pour faire apparaître une balance avec deux plateaux. L’icône est affichée : elle permet d’annuler la comparaison.
  2. Glisser la valeur x sur le plateau de gauche. A ce stade, il est encore possible d’annuler la comparaison avec
  3. Glisser la valeur y sur le plateau de droite. L’icône de la balance est modifié Activate indiquant que la comparaison peut être effectuée. A ce stade, il est encore possible de modifier l’une ou l’autre valeur sur l’un des plateaux
  4. Cliquer surActivate pour activer la balance. Les plateaux bougent si les deux valeurs sont différentes. La plus grande valeur est la plus lourde. Le résultat de la comparaison est affiché sur la fenêtre de la balance (par exemple x>y).
  5. L’utilisateur est invité à modifier (étendre) éventuellement la condition.
    • Par exemple, x>y peut être changé par x>=y ou par x!=y.
    • Autre exemple, x==y peut être changé par x>=y ou par x<=y.
    • Après validation, l’instruction de la condition associée, par exemple
          if (x>y){ 
      
      est affichée sur la console.
  6. En mode enregistrement, l’utilisateur doit enregistrer les opérations associées à cette condition (tous types d’instructions y compris des tests). L’icône, “porte de sortie” Close est affichée sur la balance.
  7. Cliquer sur Close  pour terminer la séquence d’opérations. La console affiche le bloc else associé au test. Ce bloc ne contient pas de code effectif puisque ce cas n’a pas encore été traité. Par exemple :
        } else { // TODO 
                 // x >= y
        }
    
    La balance disparaît.
Raccourci : à tout moment l’utilisateur peut annuler la comparaison en plaçant le comparateur sur la corbeille.

Opérations de saisie et d’affichage

Opération de saisie de valeur (lecture)

  1. sélectionner la variable à affecter
  2. puis le menu Opération → Saisir valeur.
  3. une fenêtre de dialogue apparaît demandant de saisir la nouvelle valeur et la question qui doit être demandée à l’utilisateur lors de la ré-exécution de cette opération. Quand le programme est exécuté, une fenêtre de dialogue affichera la question et attendra la valeur à affecter à x.

Raccourcis :

  • effectuer un clic droit sur la variable.
  • déposer le clavier sur la variable

Note : si cette action est effectuée pendant un enregistrement, une instruction dite d’entrée est produite. Par exemple :

Read "Question " x

Opération d’affichage d’une valeur (écriture)

  1. sélectionner la variable à afficher
  2. puis le menu Opération → Afficher valeur
  3. une fenêtre de dialogue apparaît avec la valeur de la variable et le message qui doit être affiché lors de la ré-exécution de cette opération. Quand le programme est exécuté, une fenêtre de dialogue affichera le message et la valeur de x.

Raccourci :

  • déplacer la variable sur l’écran

Note : si cette action est effectuée pendant un enregistrement, une instruction dite de sortie est produite. Par exemple :

Write "Message " x

Fichiers et exports

Opérations sur fichier

  • Fichier → Nouveau : création d’un nouveau programme. Il contient quelques constantes et une macro nommée Main (qui signifie principal en anglais).

    Attention: avant de créer le nouveau programme, vérifier que le programme en cours a été enregistré sinon il est perdu.

  • Fichier → Ouvrir : charge un programme existant (extension de fichier .json)
  • Fichier → Enregistrer : enregistrer le programme en cours ou demander un nom si le programme est nouveau.
  • Fichier → Enregistrer sous : enregistrer le programme sous un nouveau nom

Génération d’URL

Il est intéressant de pouvoir lancer directement AlgoTouch avec soit l’ensemble des éléments qui constitueront le programme ou soit un programme déjà fait. L’idée, empruntée au système PythonTutor, consiste à utiliser le mécanisme de passage de paramètres associé à une adresse de site. Cela consiste à ajouter à l’adresse du site AlgoTouch, appelée URL pour Uniform Ressource Locator, le code d’un programme dans un format adapté.

 

Exemple de lancement d’un programme contenant une macro Do vide :

https://algotouch.irisa.fr/agt/?json=[["macroDo",0,0,"Main","Ex",{}]]

Pour créer cette URL, l’utilisateur doit :

  • créer le programme qu’il souhaite;
  • lancer
    Fichier -> Générer l'URL

    une adresse est copiée dans le presse-papier;

  • copier l’adresse obtenue, en fonction des besoins, dans le sujet d’un exercice, sur une page web ou dans un courriel par exemples.l

Annexes

Règles de nommage

Les objets manipulés (variables, tableaux, macros) portent un nom qui doit respecter les règles suivantes :

  • il est constitué de lettres minuscules ou majuscules, de chiffres ou du caractère “_”
  • il doit commencer par une lettre
  • il ne doit pas être un mot clé du langage

Mots clés du langage AlgoTouch

Les mots clé suivants sont réservés au logiciel AlgoTouch. Ils ne doivent pas être utilisés pour nommer des éléments du programme.

  • int
  • char
  • const
  • index
  • if
  • else
  • Read
  • Write
  • Define
  • Do
  • From
  • Until
  • Loop
  • Terminate
  • End