TikZ pour l'impatientmath.et.info.free.fr/Algorithmique/educAlgoDoc.pdf · 2011-06-26 · 4...

éducAlgo

Comment définir un nouvel exercice d’algorithmique

26 juin 2011

Quel est l’objectif de ce document ?

L’objectif de ce document est de montrer sur un exemple comment définirun nouvel exercice, et comment le faire apparaître dans le menu des exercicesde l’application éducAlgo.

À qui s’adresse ce document ?

Les professeurs qui proposeront l’application éducAlgo à leurs élèves neseront jamais satisfaits par la liste des exercices fournis par défaut. Donc, ilsvoudront en créer de nouveaux.

Ce document est donc destiné aux auteurs d’exercices.éducAlgo est une application Web, conçue pour être placée sur un site

Internet. Ceux qui ont déjà créé un site Internet seront donc déjà préparés àce qui les attend.

Quelles sont les contraintes techniques ?

La définition des exercices utilise le langage JavaScript qui est interprétépar tous les navigateurs Internet modernes, respectueux des standards duWeb, comme Firefox Safari ou Chrome.

Un minimum de connaissances du langage JavaScript est donc requis.

Mais aucune difficulté technique n’est insurmontable, et la consultationdes exemples doit permettre à un débutant motivé de définir sans trop dedifficultés de nouveaux exercices.

Table des matièresQuel est l’objectif de ce document ? . . . . . . . . . . . . . . . 1À qui s’adresse ce document ? . . . . . . . . . . . . . . . . . . 1Quelles sont les contraintes techniques ? . . . . . . . . . . . . . 1

1 Interface de l’application 4

2 Exemple d’exercice d’algorithmique 5

3 Définition de l’exercice 63.1 item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 sujet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.3 En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4 Définition des boutons et messages dynamiques 84.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4.1.1 Variables de Lecture . . . . . . . . . . . . . . . . . . . 84.2 Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.2.1 Expression Constante . . . . . . . . . . . . . . . . . . . 94.2.2 Expression valeur d’une Variable . . . . . . . . . . . . 104.2.3 Expression calculée (valeur d’une fonction) . . . . . . . 10

4.3 Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.4 Commentaires contextuels . . . . . . . . . . . . . . . . . . . . 124.5 Aides pédagogiques . . . . . . . . . . . . . . . . . . . . . . . . 134.6 En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5 Définition des Contraintes de Lecture 165.1 Lire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165.2 En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

6 Définition de l’Algorithme 186.1 Instructions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6.1.1 Lecture . . . . . . . . . . . . . . . . . . . . . . . . . . 196.1.2 Affectation . . . . . . . . . . . . . . . . . . . . . . . . 206.1.3 Affichage . . . . . . . . . . . . . . . . . . . . . . . . . . 216.1.4 Commentaire . . . . . . . . . . . . . . . . . . . . . . . 22

6.2 Contrôles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226.2.1 Boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . 226.2.2 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.2.3 Stop . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

6.3 Techniques avancées . . . . . . . . . . . . . . . . . . . . . . . 24

2

6.4 En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

7 Installation dans l’application 277.1 Structure de l’application . . . . . . . . . . . . . . . . . . . . . 277.2 La page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . 29

7.2.1 Déclarations des Exercices . . . . . . . . . . . . . . . . 297.2.2 Connexion du moteur de l’application . . . . . . . . . . 30

7.3 En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

A Le fichier Demo.js 33

B Le fichier index.html 36

C Instruction le Lecture 38C.1 Forme : Soit un nombre . . . . . . . . . . . . . . . . . . . . . 38C.2 Forme : Soit une liste . . . . . . . . . . . . . . . . . . . . . . . 39

D Création d’un nouvel exercice 40D.1 Choix d’un algorithme . . . . . . . . . . . . . . . . . . . . . . 40D.2 Débug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

D.2.1 Expression "A - 1" non définie . . . . . . . . . . . . . 42D.2.2 ReferenceError : Can’t find variable : K . . . . . . . . . 43D.2.3 TypeError : Result of expression is not an object . . . 43D.2.4 Boucles infinies . . . . . . . . . . . . . . . . . . . . . . 44D.2.5 Autres erreurs . . . . . . . . . . . . . . . . . . . . . . . 44

D.3 Quelques conseils au sujet du style . . . . . . . . . . . . . . . 45

E Le langage JavaScript 46E.1 Les types JavaScript . . . . . . . . . . . . . . . . . . . . . . . 46E.2 Opérateurs et Fonctions . . . . . . . . . . . . . . . . . . . . . 46

E.2.1 Opérateurs mathématiques . . . . . . . . . . . . . . . . 46E.2.2 Opérateurs logiques . . . . . . . . . . . . . . . . . . . . 47E.2.3 Fonctions mathématiques . . . . . . . . . . . . . . . . 47

E.3 Objets, JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . 47E.4 Traitement des listes, Array . . . . . . . . . . . . . . . . . . . 48E.5 Liens vers les outils de programmation . . . . . . . . . . . . . 51

F Texte HTML ou XHTML et Styles CSS 52F.1 Présentation pédagogique en HTML . . . . . . . . . . . . . . . 52F.2 CSS, Cascading Style Sheets . . . . . . . . . . . . . . . . . . . 53

G Encodage du Texte en UTF-8 54

3

1 Interface de l’applicationPour comprendre ce qu’il est nécessaire de déclarer pour définir un nouvel

exercice, analysons d’abord comment cet exercice est présenté dans la fenêtrede l’application éducAlgo.

Menu des Exercices

Boutons dynamiques

sujet de l'exercice item de l'exercice solution de l'exercice

Un exercice est défini par :– un titre qui sert comme item dans le menu des exercices– un énoncé appelé sujet et placé sous l’item de menu sélectionné– la solution de l’algorithme est rédigée et affichée sous le sujet

Pour rédiger la solution de l’algorithme on dispose de boutons qui changentdynamiquement selon l’exercice choisi. Ces boutons définissent :

– les variables utilisables dans l’exercice– les expressions qu’il est possible d’évaluer– les conditions pour contrôler les boucles ou les tests

Remarque : Les instructions de lecture sont imposées par l’exercice choisi,elles ne sont pas modifiables par l’utilisateur. Ceci permet à l’application decontrôler la validité des valeurs saisies par l’utilisateur et de fixer leur ordre.

Chaque lecture est ainsi contrôlée par une contrainte de validité.

En résumé : Pour déclarer un nouvel exercice, l’auteur devra définir :un item, un sujet, des variables, des expressions, des conditions, descontraintes et une solution.

4

2 Exemple d’exercice d’algorithmiquePour expliquer comment déclarer un nouvel exercice, nous allons choisir

un exemple d’algorithme sans grand intérêt pratique.Cet exemple a été construit pour permettre la présentation des différentes

options disponibles dans l’application pour déclarer un exercice.

Attention : L’image ci-dessus représente ce que l’utilisateur verra dansl’application éducAlgo une fois que l’exercice sera créé.

On explique dans ce document comment déclarer cet exercice.On ne parle pas, pour l’instant, du travail préalable de mise au point qu’il

a été nécessaire de fournir pour créer cet exercice.On trouvera cependant en annexe D à la page 40 des indications et des

conseils pour la réalisation de cette tâche préalable.

5

3 Définition de l’exercicePour déclarer chaque nouvel exercice on crée un fichier texte pur conte-

nant du code JavaScript encodé au format UTF-8 et dont le nom va seterminer par l’extension .js pour JavaScript. Pour avoir plus d’informationssur le problèmes d’encodage, on consultera l’annexe G page 54.

Pour cet exemple de démonstration, le fichier se nommera Demo.js

Pour ceux qui connaissent le langage JavaScript, l’exécution de ce fichiera pour effet de construire une représentation interne de l’exercice sous formed’objets et de mémoriser cette représentation dans une base de données del’application nommée BDE (pour Base Des Exercices).

Que ceux qui ne connaissent pas JavaScript se rassurent, il leur suffitsimplement de savoir que s’il respectent les règles de déclaration, leur exercicesera simplement mémorisé par l’application pour un usage ultérieur.

Le fichier Demo.js, dont le listing complet va être commenté ci-dessousen détail, et donné en annexe A à la page 33.

Attention : Le fichier Demo.js est en texte pur encodé en UTF-8. Ilfaut donc utiliser un éditeur de texte capable de lire cet encodage.

Nous allons, pour cet exercice, présenter pas à pas les différents élémentsà déclarer, et pour chacun, la syntaxe de la déclaration.

3.1 item

On commence par enregistrer l’exercice dans la base de données avec :

BDE.ajouterExercice("Peut-on faire 5 soustractions ?");

Ce nouvel exercice de titre "Peut-on faire 5 soustractions ?" estainsi créé et ajouté à BDE, la base de données des exercices.

Ce titre servira d’item à sélectionner dans le menu des exercices.Pour la suite, on pourra compléter la définition en faisant référence à cet

exercice avec BDE.exo

6

3.2 sujet

Ainsi, on peut ensuite définir l’énoncé de l’exercice avec :

BDE.exo.sujet = "Soit un nombre entier A positif <br />Soit un nombre entier B inférieur à A <br />Quel est le plus grand des deux nombres A et 5 B";

Remarque : Le texte du sujet sera placé dans le cadre bleu clair situésous le menu des exercices comme du texte HTML. Le texte est donc formatéselon la taille de la case.

Par contre, pour faire un peu de mise en page ou si on veut affichercertains caractères spéciaux, il est possible d’y inclure des balises ou desentités HTML, comme par exemple :

– pour les symboles mathématiques < ou > utiliser < ou >– pour ajouter un espace utiliser – pour passer à la ligne utiliser <br />– pour écrire Ae utiliser A<sup>e</sup>– pour écrire Ai utiliser A<sub>i</sub>– on peut aussi écrire en <b>gras</b> ou en <i>italique</i>

Cependant, il est fortement conseillé d’éviter tout excès de fioritures etde se limiter, pour le sujet, à du texte ordinaire.

On trouvera des indication supplémentaires sur le problème de l’encodagedes textes à l’annexe G page 54.

3.3 En résumé

Syntaxe : On enregistre un nouvel exercice dans la base sous la forme :BDE.ajouterExercice( "titre-court-de-l’exercice" );

Syntaxe : On définit l’énoncé de ce nouvel exercice sous la forme :BDE.exo.sujet = "texte-HTML-de-l’énoncé";

7

4 Définition des boutons et messages dynamiquesComme on le voit sur la figure

ci-contre, pour toutes les variables,les expressions et les conditions né-cessaires pour définir l’algorithme,des boutons spécifiques sont appa-rus lors de la sélection de l’exercicedans le menu.

L’auteur doit donc d’abord dé-cider quels outils (boutons) il désirefournir à l’utilisateur pour résoudrele problème.

Il est ensuite nécessaire de décla-rer les boutons à afficher et il fautdéfinir les calculs à effectuer pourévaluer expressions ou conditions.

Les étiquettes de tous ces boutons sont des textes qui vont servir de clépour référencer les objets internes qui représentent les variables, les expres-sions et les conditions utilisées pour définir l’exercice.

Rappelons que le fichier Demo.js est en texte pur encodé en UTF-8, ce quipermet d’utiliser des symboles spéciaux comme π, ≤ ou ≥ dans les étiquettesclés des expressions ou des conditions. On peut même utiliser le HTML quiest du texte.

4.1 Variables

Les variables sont faciles à déclarer, il suffit d’en fournir la liste dansl’ordre où on veut les voir apparaître dans la liste des boutons.

Ainsi pour notre exemple :

BDE.exo.definirVariables("A", "B", "K");

4.1.1 Variables de Lecture

Pour des raisons pédagogiques, l’auteur peut vouloir interdire à l’utilisa-teur d’affecter de nouvelles valeur à une Variable de Lecture, c’est-à-dire à

8

une variable qui figure dans une instruction de Lecture et qui contient unevaleur donnée par l’utilisateur en réponse à cette instruction de Lecture.

Par exemple si l’algorithme contient Lire un nombre N dans la partie« Entrée », l’auteur peut déclarer :

BDE.exo.definirVariablesDeLecture("N");

Dans ce cas, un bouton « N » sera affiché dans le cadre des Expressions,mais aucun dans celui des Variables. Ainsi, l’utilisateur pourra utiliser lavaleur de N lue, mais ne pourra pas lui en affecter une nouvelle.

Pour des informations complémentaires sur l’instruction de Lecture, onconsultera l’annexe C page 38.

4.2 Expressions

Pour les expressions, c’est un peu plus compliqué, il faut les définir uneà une dans l’ordre où on veut les voir apparaître dans la liste des boutons,mais, de plus, il faut préciser comment elle seront évaluées en définissant unefonction de calcul programmée en JavaScript.

Nous voyons ci-dessus les différents types d’expressions proposées pourl’exercice. Les étiquettes choisies par l’auteur, pour des raisons pédagogiquespersonnelles, sont assez expressives mais représenteront lors de leur évalua-tion des résultats de types assez variés.

Pour faciliter le travail de définition que l’auteur va fournir, on proposetrois méthodes de définition différentes.

4.2.1 Expression Constante

Dans cet exemple, il y a 5 expressions constantes.– 3 expressions constantes numériques

9

BDE.exo.definirExpressionConstante("0", 0);BDE.exo.definirExpressionConstante("1", 1);BDE.exo.definirExpressionConstante("5", 5);

– 2 expressions constantes textuelles (chaîne de caractères)

BDE.exo.definirExpressionConstante("A ≥ 5 B", "A ≥ 5 B");BDE.exo.definirExpressionConstante("A < 5 B", "A < 5 B");

Ces dernières expressions permettent d’afficher des messages.

4.2.2 Expression valeur d’une Variable

Attention : Rappelons d’abord qu’il ne faut pas confondre une variableet une expressions valeur d’une variable.

Une variable figure, soit dans une instruction de lecture, soit en partiegauche d’une affectation. C’est le nom d’une zone de mémoire dans laquelleon peut mettre une valeur.

Une expressions valeur d’une variable figure, soit dans une instructiond’affichage, soit plus souvent, en partie droite d’une affectation. Elle repré-sente une valeur à affecter. Cette valeur est celle contenue, à cet instant del’algorithme, dans la zone de mémoire référencée par la variable.

L’application se charge automatiquement d’évaluer les variables.

Dans cet exemple, il y a 3 expressions valeurs de variables :

BDE.exo.definirExpressionVariable("A");BDE.exo.definirExpressionVariable("B");BDE.exo.definirExpressionVariable("K");

4.2.3 Expression calculée (valeur d’une fonction)

Il reste à définir les expressions dont la valeur est fonction des valeursd’une ou de plusieurs variables. Dans ce cas il va être nécessaire de program-mer un petit peu en JavaScript.

Dans cet exemple, on trouve 5 expressions de ce type dont nous allonscommenter le code :

BDE.exo.definirExpression("A - B", ["A", "B"],function (a, b) { return a - b; });

Ici, la clé de l’expression est "A - B". Cette expression dépend des deuxvariables "A" et "B", au sens de éducAlgo, données sous forme d’une listeordonnée de clés dans le tableau ["A", "B"]

10

Le calcul à effectuer est défini sous forme d’une fonction anonyme de deuxvariables, au sens de JavaScript, qui calcule et en retourne la différence :

function (a, b) { return a - b; }

Les noms des variables utilisées dans la fonction JavaScript ne sont passignificatifs, seul l’ordre est important. L’application se charge d’effectuer lecalcul avec les variables effectives déclarées dans le tableau ["A", "B"] dansl’ordre fixé. On aurait pu définir indifféremment la fonction par :

function (x, y) { return x - y; }

Dans ce dernier cas, x prendra automatiquement la valeur actuelle de lavariable "A" et y prendra la valeur de la variable "B".

On peut définir de même les autres expressions :

BDE.exo.definirExpression("B - A", ["A", "B"],function (a, b) { return b - a; });

BDE.exo.definirExpression("K - 1", ["K"],function (x) { return x - 1; });

BDE.exo.definirExpression("K + 1", ["K"],function (x) { return x + 1; });

Le résultat du calcul effectué dans la fonction n’est pas obligatoirementnumérique. On peut définir une fonction qui retourne un texte, pour afficherdes messages d’information avec un un plusieurs paramètres, par exemple :

BDE.exo.definirExpression("soustraction n̊ K", ["K"],function (k) { return "soustraction n̊ " + k; });

Pour la définition des fonctions JavaScript, la syntaxe et les opérateursde calcul ressemblent à la syntaxe et aux opérateurs des langages de pro-grammation usuels comme C ou Java, mais en plus simple !

En effet, en JavaScript, les variables ne sont pas typées. Il n’y a doncpas de type à déclarer et les variables peuvent contenir indifféremment desnombres (entiers ou réels) des booléens (true ou false) ou des textes (chaînesde caractères).

On trouvera en annexe E à la page 46, des précisions sur les opérateurset sur les fonctions mathématiques disponibles en JavaScript.

11

4.3 Conditions

Nous avons, pour des raisons pédagogiques, fait une différence entre lesexpressions et les conditions. Pour JavaScript qui est un langage non typé,il n’y a pas de différence, une condition est simplement une expression dontla valeur est booléenne (true ou false).

Dans cet exemple, on trouve 3 conditions définies ainsi :

BDE.exo.definirCondition("K > 0", ["K"],function (k) { return k > 0; });

BDE.exo.definirCondition("K < 5", ["K"],function (k) { return k < 5; });

BDE.exo.definirCondition("A ≥ B", ["A", "B"],function (a, b) { return a >= b; });

Dans ce dernier exemple on remarquera que la clé de la condition contientun caractère spécial ≥, ce qui est possible avec l’encodage du texte en UTF-8.

Par contre dans le code de la fonction JavaScript on trouve >= commel’impose la syntaxe du langage.

On obtient ainsi les trois derniers boutons :

4.4 Commentaires contextuels

On a remarqué que des commentaires contextuels apparaissent en hautà droite de la fenêtre lorsque l’utilisateur survole avec la souris les élémentssensibles de l’interface.

Par exemple quand quand l’utilisateur survole avec la souris le boutond’une Condition, on voit apparaître en haut à droite :

Parfois, le commentaire général est suivi d’un commentaire de couleurbleue qui donne des informations complémentaires sur une expression parti-culière, comme par exemple dans l’exemple suivant :

12

Il est bien évident, dans ce cas, que le commentaire contextuel dépend del’exercice pour une expression ou une condition particulière. Il doit donc êtredéfini par l’auteur de l’exercice.

En prenant l’exemple ci-dessus, le commentaire contextuel associé au bou-ton sera défini ainsi :BDE.exo.definirCommentaire("A ≥ B",

"condition pour que la soustraction soit possible");

Un commentaire contextuel peut porter indifféremment sur une Variable,sur une Expression ou sur une Condition. Comme une Variable et sonExpression associée ont la même clé, le commentaire défini dans ce cas serale même pour toutes les deux.

4.5 Aides pédagogiques

Certains exercices proposent un bouton « Solution du système » maisnotre exemple propose un menu d’aides pédagogiques :

La sélection dans ce menu présente trois items de conseils pédagogiquesen plus de l’item « Solution du système » :

La sélection de l’item numéro 2, par exemple, va afficher un message dansle tiroir des résultats :

13

Ces aides pédagogiques sont déclarées dans cet ordre ainsi :

BDE.exo.definirAide("Variables","Les valeurs des deux variables A et B ...");

BDE.exo.definirAide("Méthode","Si la valeur de A est supérieure ou égale à ...");

Tests

Pour certains algorithmes, il peut arriver que des jeux de valeurs parti-culières pour les données en entrées provoquent des situations critiques.

Pour aider l’utilisateur à mettre au point son algorithme, l’auteur peutfournir dans ce cas là des « Tests proposés par le système »

Ainsi pour afficher un troisième item « Tests proposés par le système »dans le menu d’aide et proposer deux jeux de données à tester on écrira :

BDE.exo.definirTestsSysteme([{"A":8, "B":2}, {"A":57, "B":3}]);

On donne une liste contenant pour chaque test un objet JavaScript :– chaque attribut est le nom d’une des variables d’entrée– chaque valeur est la valeur à tester pour cette variable d’entrée

4.6 En résumé

– Il y a deux méthodes pour définir les Variables– Il y a trois méthodes pour définir les Expressions– Il y a une méthode pour définir les Conditions

– Il y a une méthode pour définir les Commentaires contextuels

– Il y a deux méthodes pour définir les Aides pédagogiques et les Tests

Variables

Syntaxe : Une Liste des Variables est définie par :BDE.exo.definirVariables( clé-variable, clé-variable, ... );

Syntaxe : Une Liste des Variables de Lecture est définie par :BDE.exo.definirVariablesDeLecture( clé-variable, clé-variable, ... );

Remarque : cette méthode ne produit pas de bouton de Variable maisdéfinit des boutons pour les Expressions valeur de ces Variables.

14

Expressions

Syntaxe : Une Expression Constante est définie par :BDE.exo.definirExpressionConstante( clé-expression, valeur );

Syntaxe : Une Expression valeur d’une Variable est définie par :BDE.exo.definirExpressionVariable( clé-variable );

Syntaxe : Une Expression calculé est définie par :BDE.exo.definirExpression( clé-expression, [ liste-des-clés-variables ],

function ( liste-des-variables ) {return formule-de-calcul ;

});Il est aussi possible de définir un Expression Auteur comme c’est indiqué,

plus loin, au paragraphe 6.1.3 à la page 21

Syntaxe : Une Expression Auteur est définie par :BDE.exo.definirExpressionAuteur( clé-expression-auteur,

[ liste-des-clés-variables ],function ( liste-des-variables ) {

return formule-de-calcul ;});

Conditions

Syntaxe : Une Condition est définie par :BDE.exo.definirCondition( clé-condition, [ liste-des-clés-variables ],

function ( liste-des-variables ) { return formule-de-calcul ; });

Commentaires contextuels

Syntaxe : Un Commentaire contextuel est définie par :BDE.exo.definirCommentaire( clé-expression-ou-condition,

message-décrivant-expression-ou-condition-en-texte-html );

Aides pédagogiques

Syntaxe : Un Aide pédagogique est définie par :BDE.exo.definirAide( item-titre-de-l-Aide , texte-HTML-de-l-Aide );

Syntaxe : Une liste de tests est définie par :BDE.exo.definirTestsSysteme( liste-des-tests-proposés-par-le-système );

15

5 Définition des Contraintes de LectureLors de la sélection de l’exercice dans le menu, les instructions de Lecture

de la partie « Entrée » de l’algorithme sont automatiquement insérées dansl’algorithme et non modifiables par l’utilisateur comme on le voit sur la figure.

5.1 Lire

Nous verrons, plus tard, au paragraphe 6 page 18, comment sont définiesles instructions de Lecture et aussi, page 38 de l’annexe C comment la Lectureest gérée par l’application. Mais, nous allons d’abord expliquer comment ondoit déclarer les contraintes de lecture.

Le premier nombre lu doit être un "entier A > 0" et le second doit êtreun "entier B < A"

On remarque, que ces contraintes sont simplement des conditions quiportent sur les variables d’entrée "A" et "B", mais qui ne figurent pas sousforme de bouton dans l’interface.

Les deux contraintes de cet exemple sont définies ainsi :

BDE.exo.definirContrainte("entier A > 0", ["A"],function (x) { return x > 0 && Math.floor(x) === x; });

BDE.exo.definirContrainte("entier B < A", ["A", "B"],function (a, b) { return b < a && Math.floor(b) === b; });

On trouvera à l’annexe E page 46 des informations sur les opérateursJavaScript comme && ou === et la fonction Math.floor.

On remarque que la première contrainte ne porte que sur la premièrevariable, mais que la seconde porte sur les deux variables qui ont été lues.

Ici, on reconnaît dans les formules l’opérateur && qui est le ET logique.

16

Comme le JavaScript ne différencie pas dans les calculs les réels et lesentiers, on a utilisé la fonction Math.floor qui donne la partie entière, pourdéterminer si le nombre est entier, c’est-à-dire égal === à sa partie entière.

Dans cet exercice, nous n’avons parlé que de l’instruction de lecture de laforme Soit un nombre. Mais, il y a aussi la forme Soit une liste.

Pour une étude détaillée des problèmes liés à la Lecture, on consulteral’annexe C, à la page 38.

De plus, on trouvera à l’annexe E de la page 46 des précisions sur lesopérateurs et fonctions mathématiques disponibles en JavaScript, ainsi quedes indications pour le traitement des listes.

5.2 En résumé

Syntaxe : Une Contrainte est définie sous la forme :BDE.exo. definirContrainte( clé-contrainte, [ liste-des-clés-variables ],

function ( liste-des-variables ) {return formule-de-calcul ;

});

17

6 Définition de l’Algorithme

Voici donc l’algorithme que nous voulons définir.

Il est nécessaire de savoir que l’application éducAlgo utilise cette défini-tion de trois façons différentes :

1. Les instructions Lire de la partie « Entrée » de l’algorithme ne sontpas modifiables par l’utilisateur et sont affichées dès la sélection del’exercice.Les contraintes de lecture définies seront utilisées à l’exécution pour vé-rifier les valeurs saisies par l’utilisateur. Elles sont définie. par l’auteur.

2. Lors de l’exécution de l’algorithme proposé par l’utilisateur, à la suitedes résultats obtenus, il y a l’affichage du Résultat attendu qui estobtenu grâce à l’exécution de l’algorithme défini par l’auteur.

3. Enfin, c’est aussi l’algorithme défini par l’auteur qui est affiché, lorsquel’utilisateur fait un clic sur le bouton Exemple de Sotution

La déclaration de l’algorithme se fait sous forme d’un objet JavaScriptcodé dans le format JSON.

18

On trouvera dans l’annexe E.3, page 47 des précisions sur le format JSONpour JavaScript, mais pour l’instant il suffit de savoir qu’un objet JavaScriptest défini par une liste attribut-valeur notée entre accolades et qu’une listeordonnée ou tableau est notée entre crochets.

Par exemple : { type: "homme", age: 25 }C’est un objet JavaScript (qui peut représenter un homme de 25 ans),

qui a un attribut type de valeur "homme" et un attribut age de valeur 25.Ceci [5, 6, 7] est un tableau, ou liste ordonnée de 3 nombres.

L’algorithme va être défini sous forme d’un objet avec un attribut typesuivis des attributs entree et traitement, sous la forme :BDE.exo.solution = {

type : "algorithme",entree : [ liste-d’instructions ],traitement : [ liste-d’instructions ]

};

Pour bien comprendre, on pourra comparer chaque définition avec sareprésentation dans l’image donnée au début du paragraphe 6 page 18.

Pour chacune des parties de l’algorithme, il faut maintenant définir laliste des instructions.

6.1 Instructions

Chaque instruction est définie sous forme d’un objet avec un attributtype suivis d’attributs spécifiques selon l’instruction.

6.1.1 Lecture

L’utilisateur de l’application éducAlgo n’a pas accès à cette instructionqui ne figure que dans la partie Entrée de l’algorithme. Seul l’auteur del’exercice peut définir des instructions de lecture.

Des raisons pédagogiques ont déterminé ce choix. Ceci permet de faciliterle contrôle de l’exercice sans compliquer le travail de l’utilisateur qui peutainsi se concentrer sur la rédaction de l’algorithme.

Les deux instructions de lecture de la partie « Entrée » de cet exercicevont être définies ainsi :

entree : [{

19

type : "lecture",variable : "A",typeValeur : "un nombre",contrainte : "entier A > 0"

},{

type : "lecture",variable : "B",typeValeur : "un nombre",contrainte : "entier B < A"

}]

Syntaxe : Une instruction de Lecture est définie à l’aide de quatreattributs : type, variable, typeValeur et contrainte

– l’attribut type prend la valeur "lecture"– l’attribut variable prend pour valeur une clé-variable– l’attribut typeValeur de valeur : soit "un nombre" soit "une liste"– l’attribut contrainte prend pour valeur une clé-contrainte

Remarque : Le langage JavaScript fait la différence entre les lettresmajuscules et minuscules. En particulier, le troisième attribut est bien notétypeValeur. Ce serait donc une erreur d’écrire par exemple typevaleur.

On trouvera en annexe C, page 38, des compléments sur le mode de lectureet le type des valeurs lues "un nombre" ou "une liste".

6.1.2 Affectation

Il y a une instruction d’affectation au début de la partie « Traitement »de cet exercice qui va être définie ainsi :

traitement : [{ type: "affectation", variable: "K", expression: "0" }...

]

Syntaxe : Une Affectation est définie à l’aide de trois attributs : type,variable, et expression

– l’attribut type prend la valeur "affectation"– l’attribut variable prend pour valeur une clé-variable– l’attribut expression prend pour valeur une clé-expression

20

On trouvera d’autres exemples d’instructions d’affectation dans les ins-tructions de boucle ou de test présentées plus loin.

6.1.3 Affichage

Il y a une instruction d’affichage à la fin la partie « Traitement » de cetexercice qui va être définie ainsi :traitement : [

...{ type: "affichage", expression: "A ≥ 5 B" }

]

Si l’utilisateur a modifié le texte du message de l’instruction « Affichage »,ce texte sera la valeur de l’attribut facultatif etiquette.

L’auteur peut aussi définir un tel texte facultatif comme message.

Syntaxe : Un Affichage est défini avec deux ou trois attributs : type,expression et éventuellement etiquette

– l’attribut type prend la valeur "affichage"– l’attribut expression prend pour valeur une clé-expression– l’attribut etiquette (facultatif) prend pour valeur un message-texte

On trouvera d’autres exemples d’instructions d’affichage dans l’instruc-tion de test présentée plus loin.

Affichage spécial réservé à l’auteur

En plus de l’instruction d’affichage, il y a une instruction d’affichage spé-cial réservée à l’auteur et à placer uniquement dans la partie « Entrée ».Cette instruction permet d’afficher un commentaire calculé à l’aide d’uneexpression Expression Auteur spécifique qui ne figurera pas comme boutonpour les utilisateurs.

Syntaxe : Un Affichage Auteur est défini avec deux attributs : typeetexpression

– l’attribut type prend la valeur "affichageAuteur"– l’attribut expression prend pour valeur une clé-expression-auteur

L’expression qui sera affichée sera une Expression Auteur définie avec laméthode definirExpressionAuteur.

21

Syntaxe : Une Expression Auteur est définie par :BDE.exo.definirExpressionAuteur( clé-expression-auteur,

[ liste-des-clés-variables ],function ( liste-des-variables ) {

return formule-de-calcul ;});

6.1.4 Commentaire

Il peut être utile, pour des raisons pédagogiques, de dire explicitement,par exemple dans un test, que sous certaines conditions, on ne fait rien, oude noter dans l’algorithme une information particulière.

On dispose pour cela de l’instruction « Commentaire » qui affiche pardéfaut le texte « Rien » et qui ne fait rien.

L’auteur et l’utilisateur peuvent modifier le texte par défaut du commen-taire, dans ce cas, ce texte sera la valeur de l’attribut facultatif commentaire.

Syntaxe : Un Commentaire est défini à l’aide de un ou deux attributs :type, et commentaire

– l’attribut type prend la valeur "rien"– l’attribut commentaire (facultatif) prend pour valeur un texte-HTML

6.2 Contrôles

Normalement, dans un algorithme, les instructions sont exécutées, l’uneaprès l’autre, en séquence, dans l’ordre de leur écriture.

Les Contrôles sont des instructions spéciales qui permettent de modifierle déroulement séquentiel de l’algorithme.

Pour répéter plusieurs fois une même liste d’instruction sous une certainecondition, on dispose d’une instruction Boucle.

Pour exécuter des instructions différentes selon une condition, on disposed’une instruction Test.

Chaque contrôle est défini sous forme d’un objet avec un attribut typesuivis d’attributs spécifiques selon le contrôle.

6.2.1 Boucle

Il y a une instruction de boucle dans la partie « Traitement » de cetexercice qui va être définie ainsi :{

type : "boucle",

22

condition: "K < 5",action: [ liste-d’instructions ]

}

Syntaxe : Une Boucle est définie avec trois attributs : type, conditionet action

– l’attribut type prend la valeur "boucle"– l’attribut condition a pour valeur une clé-condition– l’attribut action a pour valeur une liste-d’instructions entre crochetsL’action de notre boucle contient deux instructions, une affectation et un

test que nous commençons à développer ici :{

type : "boucle",condition: "K < 5",action: [

{type : "affectation",variable : "K",expression : "K + 1"

},{

type : "test",condition : "A ≥ B",actionSiVrai: [ liste-d’instructions-si-vrai ],actionSiFaux: [ liste-d’instructions-si-faux ]

}]

}On précisera au paragraphe suivant les détails de l’instruction de test.

6.2.2 Test

Voici la forme complète de l’instruction de test de notre exercice :{

type : "test",condition : "A ≥ B",actionSiVrai: [

{type : "affectation",variable : "A",expression : "A - B"

23

},{

type : "affichage",expression : "soustraction n̊ K"

}],actionSiFaux: [

{type : "affichage",expression : "A < 5 B"

},{ type : "stop" }

]}

Syntaxe : Un Test est donc défini à l’aide de quatre attributs : type,condition, actionSiVrai et actionSiFaux

– l’attribut type prend la valeur "boucle"– l’attribut condition a pour valeur une clé-condition– l’attribut actionSiVrai a pour valeur une liste-d’instructions-si-vrai– l’attribut actionSiFaux a pour valeur une liste-d’instructions-si-faux

Remarque : La liste-d’instructions, ou bloc, valeur de l’attribut actionde la Boucle, ou des attributs actionSiVrai et actionSiFaux du Test peutcontenir n’importe quel type d’instruction ou de contrôle.

Le bloc peut même être vide, mais, dans ce cas, on conseille plutôt, pourdes raison pédagogiques, d’y mettre explicitement un commentaire Rien.

6.2.3 Stop

Il est parfois nécessaire d’interrompre l’algorithme en cours. On utilisepour cela une instruction Stop définie ainsi :

{ type : "stop" }

6.3 Techniques avancées

Dans la partie « Entrée » l’auteur déclare en général des instructions deLecture. Il peut cependant y ajouter d’autres instructions, par exemple unAffichage une Affectation ou un Commentaire.

24

Dans ce cas il est possible d’interdire à l’utilisateur d’effacer ou de modifierces instructions.

Pour cela il suffit d’ajouter à une instruction l’attribut facultatif :

pasEffacable: true

6.4 En résumé

Solution

Algorithme : La définition de l’algorithme est de la forme :BDE.exo.solution = {

type : "algorithme",entree : [ liste-d’instructions ],traitement : [ liste-d’instructions ]

};

Instructions

Lecture : Une instruction Lecture est de la forme :{

type : "lecture",variable : clé-variable,typeValeur : Soit "un nombre" Soit "une liste",contrainte : clé-contrainte

}

Affectation : Une instruction Affectation est de la forme :{

type : "affectation",variable : clé-variable,expression : clé-expression

}

Affichage : Une instruction Affichage est de la forme :{

type : "affichage",etiquette : message-texte,expression : clé-expression

}La propriété etiquette : message-texte est facultative.

25

Affichage Auteur : Une instruction Affichage Auteur est de la forme :{

type : "affichageAuteur",expression : clé-expression-auteur

}

Commentaire : Une instruction Commentaire est de la forme :{

type : "rien",commentaire : texte-HTML

}La propriété commentaire : texte-HTML est facultative.

Contrôles

Boucle : Une instruction Boucle est est de la forme :{

type : "boucle",condition : clé-condition,action : [ liste-d’instructions ]

}

Test : Une instruction Test est est de la forme :{

type : "test",condition : clé-condition,actionSiVrai : [ liste-d’instructions-si-vrai ],actionSiFaux : [ liste-d’instructions-si-faux ]

}

Stop : Une instruction Stop est de la forme :{

type : "stop"}

26

7 Installation dans l’applicationNotre nouvel exercice est maintenant complètement défini dans le fichier

Demo.js que l’on peut consulter à l’annexe A page 33.Il ne reste plus qu’à l’installer dans l’application éducAlgo pour que le

nouvel item qui le propose apparaisse dans le menus des exercices.

7.1 Structure de l’application

L’application éducAlgo se présente comme un dossier educAlgo/ qu’ilsuffit de placer sur un site Internet pour le rendre disponible. Ce dossiereducAlgo/ contient au moins deux sous-dossiers :

– educAlgo/application/ le moteur de l’application– educAlgo/educAlgoDocDemo/ les exercices de démonstrationCe dossier educAlgo/ contient aussi les autres sous-dossiers des exercices

classés thèmes de la distribution la plus récente.

Voici le contenu du dossier educAlgo/ de base :

educAlgo/application/

Algorithme.jsBDE.jsEXE.jsGraph.jsGUI.cssGUI.jsimg/

educAlgoDocDemo/Demo.jsSommeN.jsindex.htmlindexDemo.htmlindexSommeN.html

Ce dossier contient aussi des sous-dossiers d’exercices classés par thèmes.

L’application éducAlgo est diffusée comme un logiciel libre.La mention modifiable, dans la description ci-dessous, indique les fichiers

que l’auteur pourra facilement modifier, après avoir lu ce document.La mention non modifiable signifie simplement, que dans un premier

temps il est déconseillé de modifier le moteur de l’application. Mais bien

27

entendu, un programmeur JavaScript qui analyse le code source de l’appli-cation et en comprend le fonctionnement, pourra le modifier librement.

Pour cela, nous allons préciser le rôle de chacun de ces fichiers et in-diquer quels sont ceux que l’auteur est autorisé à modifier pour configurerl’application selon ses besoins.

On trouve dans le dossier educAlgo/– Dans le sous-dossier educAlgo/application/

Le moteur de l’application éducAlgo– non modifiable : Algorithme.js . . . . . . . . . les objets de l’algorithme– non modifiable : BDE.js . . . . . . . . . . . . . . . . . . . . . la Base Des Exercices– non modifiable : EXE.js . . . . . . . . . . les outils d’exécution et de trace– non modifiable : Graph.js . . . . . . . . . . . . . . . . . . . . les effets graphiques– non modifiable : GUI.css . . . . . . . . . . . . la feuille des styles de la page– non modifiable : GUI.js . . . . . . . . . . . Interface Utilisateur Graphique– non modifiable : img/ . . . . . . . . . . .dossier des images de l’application

– Dans le sous-dossier educAlgo/educAlgoDocDemo/Les exemples pré-définis

– modifiable : Demo.js . . . . . . . . . . . . . . . .Peut-on faire 5 soustractions ?c’est l’exemple présenté dans ce document

– modifiable : SommeN.js . . . . . . . . . . . . . Somme des N premiers entiersexemple du manuel utilisateur « éducAlgoManuel.pdf »

– modifiable : index.html . . . . . . . . . . Les pages d’accueil de éducAlgo– modifiable : indexDemo.html– modifiable : indexSommeN.htmlOn indiquera comment les modifier au paragraphe 7.2 page 29

– Autres sous-dossiers d’exercices classés thèmes

La mention modifiable signale donc les fichiers qu’il est possible de modi-fier facilement sans être un expert JavaScript. Il s’agit :

– de la page d’accueil index.html dans laquelle sont déclarés lesexercices qui figureront dans le menu.

– des déclarations d’exercices comme Demo.js qui sont placées dansle sous-dossier educAlgo/educAlgoDocDemo/Les déclarations prè-définies par défaut peuvent être modifiées, maison peut aussi créer de nouveaux fichiers pour de nouveaux exercices.

On va maintenant préciser les opérations à effectuer pour ajouter unnouvel exercice à l’application éducAlgo.

D’abord, le fichier Demo.js que l’on vient de créer et qui contient la défini-tion de l’exercice est placé dans le sous-dossier educAlgo/educAlgoDocDemo/

28

Pour que ce nouvel exercice soit pris en compte par l’application, il fautaussi configurer la page d’accueil index.html

7.2 La page d’accueil

La page d’accueil est le fichier index.html qui contient un texte au for-mat XHTML encodé en UTF-8. On trouvera en annexe B page 36 le listingcomplet de la version de ce fichier fournie par défaut.

La plus grande partie du texte de ce fichier ne doit pas être modifiée pourpermettre un fonctionnement correct de l’application.

Que ceux qui ont déjà rédigé des pages HTML ne soient pas surpris parle contenu du document index.html. Il n’y a pas grand chose à voir entreles balises < body > et </body >, car la page d’accueil est engendrée dyna-miquement par le code JavaScript de l’application.

On portera donc notre attention sur l’entête du document, c’est-à-dire surle texte qui est compris entre les balises <head> et </head>. C’est la seulepartie du document qu’il faut configurer pour définir la liste des exercices quiseront disponibles dans le menu de l’application.

<head><title>éducAlgo</title>...

</head>

7.2.1 Déclarations des Exercices

Pour faciliter le travail de l’auteur, on remarquera dans cette zone laprésence de nombreuses balises de commentaires. La zone du texte sourcequi nous intéresse est celle qui est placée entre les commentaires suivants :



Dans un premier temps, il est fortement conseillé de se limiter, unique-ment, à des modifications entre ces deux commentaires, comme la déclarationde notre nouvel exercice.

L’exercice a été défini dans le fichier Demo.js qui a été placé dans lesous-dossier educAlgo/exercices/. Nous allons maintenat le déclarer dansle fichier de la page d’accueil index.html de la façon suivante :

<script type="text/javascript" charset="utf-8" src="Demo.js"></script>

29

La première lignes est une simple balise de commentaire. Elle n’est pasobligatoire, mais fortement conseillée. Ce commentaire qui rappelle le titrede l’exercice défini dans le fichier Demo.js permettra à l’auteur de relirefacilement son code lors d’une prochaine mise à jour.

La suite du code, beaucoup moins lisible mérite quelques explications.Les balises <script></script> permettent d’inclure du code exécutable

dans un document HTML. Mais on remarque que le contenu, compris entreles deux balises est vide. Le code à inclure est précisé à l’aide de la listeattribut-valeur de la balise de tête.

Il y a trois attributs pour définir le code à charger :– type="text/javascript" dit que c’est un texte JavaScript– charset="utf-8" dit que ce texte est encodé en UTF-8– src="Demo.js"

dit que la source de ce texte est le fichier Demo.js de ce dossier

L’auteur pourra ainsi déclarer tous les fichiers des définitions d’exercicesqu’il désire voir apparaître dans le menu de sélection. L’ordre de déclarationfixe l’ordre des items dans le menu et le premier item du menu est sélectionnépar défaut à l’ouverture de l’application.

Remarque : Dans le cas où on ne déclare qu’un exercice unique, lapage d’accueil s’ouvre sur cet exercice, avec son titre, mais sans le menu desexercices devenu inutile.

La page d’accueil a été nommée index.html comme il est d’usage sur unsite Internet où c’est ce fichier qui est ouvert par défaut.

Il est cependant possible de créer plusieurs pages d’accueil sous des nomsdifférents, avec des listes d’exercices différents. Dans ce cas pour acceder àces pages à partir d’une autre page, il faudra créer des liens spécifiques.

On pourra regarder les autres exemples de pages d’accueil du dossiereducAlgo/educAlgoDocDemo/ dans les deux fichiers indexDemo.html et

indexSommeN.html

7.2.2 Connexion du moteur de l’application

Autour de la Déclarations des Exercices en entête du fichier index.html,deux balises <link> et cinq balises <script> permettent de déclarer laconnexion de la page d’accueil au moteur de l’application éducAlgo.

À noter : L’ordre des déclarations est important.

30

Avant les commentaires suivants :

il faut déclarer les feuilles de style CSS GUI.css et GUIprint.csset les modules Exécuteur EXE.js et Base Des Exercices BDE.js

Après les commentaires suivants :

il faut déclarer les trois modules Graph.js, Algorithme.js et GUI.js

Dans cet ordre avant les Déclarations des Exercices :<link href="../application/GUI.css"

rel="stylesheet" type="text/css" charset="utf-8"media="screen" />

<link href="../application/GUIprint.css"rel="stylesheet" type="text/css" charset="utf-8"type="text/css" media="print" />

<script src="../application/EXE.js"type="text/javascript" charset="utf-8"></script>

<script src="../application/BDE.js"type="text/javascript" charset="utf-8"></script>



Dans cet ordre aprés les Déclarations des Exercices :<script src="../application/Graph.js"

type="text/javascript" charset="utf-8"></script><script src="../application/Algorithme.js"

type="text/javascript" charset="utf-8"></script><script src="../application/GUI.js"

type="text/javascript" charset="utf-8"></script>

La configuration précédente suppose que le fichier index.html se trouvedans le dossier educAlgoDocDemo placé dans le educAlgo qui contient lesous-dossier application, mais ceci n’est pas indispensable.

Vous pouvez installer le fichier index.html où vous voulez sur votre site,mais, dans ce cas, il faut modifier les connexions de la page d’accueil auxdéclarations des exercices et au moteur de l’application éducAlgo.

On conseille cependant de regrouper les déclarations des divers exercicesd’un même thème dans un même dossier-des-exercices. Il peut, sans pro-blème, y avoir plusieurs dossiers contenant des déclarations d’exercices.

31

Par contre, on conseille vivement, de n’installer qu’un dossier-applicationunique vers lequel pointeront les multiples pages d’accueil.

Ainsi, lors d’une mise à jour éventuelle du moteur, il ne sera pas utile demodifier les diverses pages d’accueil, mais seulement le dossier-application.

7.3 En résumé

L’installation standard d’un nouvel exercice dans l’application éducAlgose déroule en trois temps :

1. on crée un fichier de définition de l’exercice comme Demo.js2. on place ce fichier dans le sous-dossier educAlgo/educAlgoDocDemo/3. on place aussi le fichier index.html dans ce même sous-dossier4. on déclare ce fichier de l’exercice dans l’entête de fichier index.html

Syntaxe : Si nom-du-fichier-de-l’exercice est le nom du ficher dedéfinition de l’exercice

Si ce fichier a été placé dans le sous-dossier educAlgo/exercices/La déclaration d’exercice dans index.html est de la forme :

<script charset="utf-8" type="text/javascript"

src="exercices/nom-du-fichier-de-l’exercice"></script>

L’installation personnalisée d’une page d’accueil indexPerso.htmlde l’application éducAlgo dans un dossier quelconque du site nécessite la miseà jour les liens des deux balises <link> et des cinq balises <script> vers ledossier-application en remplaçant :

href="application/nom-du-fichier"par :

href="dossier-application/nom-du-fichier"

Il faut aussi modifier les déclarations d’exercice ainsi :<script charset="utf-8" type="text/javascript"

src="dossier-des-exercices/nom-du-fichier-de-l’exercice"></script>

32

Annexes

A Le fichier Demo.js

Les lignes bleues précédées par // du fichier Demo.js sont des commen-taires ignorés par le JavaScript, mais très utiles pour l’auteur.

Attention : Le fichier Demo.js est en texte pur encodé en UTF-8.

// Le texte servira d’item dans le menu des exercicesBDE.ajouterExercice("Peut-on faire 5 soustractions ?");// Le sujet sera affiché en dessous du menu des exercicesBDE.exo.sujet = "Soit un nombre entier A positif <br />

Soit un nombre entier B inférieur à A <br />Quel est le plus grand des deux nombres A et 5 B";

// Liste ordonnée des variables pour les boutonsBDE.exo.definirVariables("A", "B", "K");// Définitions ordonnées des Expressions pour les boutons// EXEMPLES:// BDE.exo.definirExpressionConstante("π", 3.1415926);// BDE.exo.definirExpressionVariable("X");// BDE.exo.definirExpression("X + 1", ["X"],// function (x) { return x + 1; });// BDE.exo.definirExpression("X + Y", ["X", "Y"],// function (x, y) { return x + y; });// BDE.exo.definirCondition("X < Y", ["X", "Y"],// function (x, y) { return x < y; });//========== Expressions ==========BDE.exo.definirExpressionVariable("A");BDE.exo.definirExpressionVariable("B");BDE.exo.definirExpressionVariable("K");BDE.exo.definirExpressionConstante("0", 0);BDE.exo.definirExpressionConstante("1", 1);BDE.exo.definirExpressionConstante("5", 5);BDE.exo.definirExpression("A - B", ["A", "B"],

function (a, b) { return a - b; });BDE.exo.definirExpression("B - A", ["A", "B"],

function (a, b) { return b - a; });BDE.exo.definirExpression("K - 1", ["K"],

function (x) { return x - 1; });

33

BDE.exo.definirExpression("K + 1", ["K"],function (x) { return x + 1; });

BDE.exo.definirExpression("soustraction n̊ K", ["K"],function (k) { return "soustraction n̊ " + k; });

BDE.exo.definirExpressionConstante("A ≥ 5 B", "A ≥ 5 B");BDE.exo.definirExpressionConstante("A < 5 B", "A < 5 B");//========== Conditions ==========BDE.exo.definirCondition("K > 0", ["K"],

function (k) { return k > 0; });BDE.exo.definirCondition("K < 5", ["K"],

function (k) { return k < 5; });BDE.exo.definirCondition("A ≥ B", ["A", "B"],

function (a, b) { return a >= b; });BDE.exo. definirCommentaire("A |{\scriptsize $\geq$}\verb| B",

"condition pour que la soustraction soit possible");// Définitions des Contraintes des instructions de Lecture// EXEMPLE:// BDE.exo.definirContrainte("positif", ["X"],// function (x) { return x > 0; });//========== Contraintes ==========BDE.exo.definirContrainte("entier A > 0", ["A"],

function (x) { return x > 0 && Math.floor(x) === x; });BDE.exo.definirContrainte("entier B < A", ["A", "B"],function (a, b) { return b < a && Math.floor(b) === b; });

//================ Solution =================BDE.exo.solution = {

type: "algorithme",entree: [

{ type: "lecture",variable: "A",typeValeur: "un nombre",contrainte: "entier A > 0" },

{ type: "lecture",variable: "B",typeValeur: "un nombre",contrainte: "entier B < A" }

],traitement: [

{ type: "affectation",variable: "K",expression: "0" },

34

{ type : "boucle",condition: "K < 5",action: [

{ type : "affectation",variable : "K",expression: "K + 1" },

{ type: "test",condition: "A > B",actionSiVrai: [

{ type: "affectation",variable: "A",expression: "A - B" },

{ type: "affichage",expression: "soustraction n̊ K" }

],actionSiFaux: [

{ type: "affichage",expression: "A < 5 B" },

{ type: "stop" }]

}]

},{ type: "affichage",

expression: "A ≥ 5 B" }]

};//================ Aides =================BDE.exo.definirAide("Variables", "Les valeurs des deuxvariables A et B sont lues au début de l’algorithme<br />La variable K est utilisée comme compteur");

BDE.exo.definirAide("Méthode", "Si la valeur de A estsupérieure ou égale à celle de B on retranche A à B<br />La variable K est utilisée pour compter les soustractionseffectuées<br />On effectue la soustraction tant que Kest inférieur à 5");

//================ Tests =================BDE.exo.definirTestsSysteme([

{ "A": 15, "B": 13 }, { "A": 2537, "B": 23 }]);

35

B Le fichier index.html

Voici le listing complet du fichier index.html fourni par défaut avec laversion courante de l’application éducAlgo.

Les balises <!– ... –> représentent des commentaires ignorés par l’in-terpréteur HTML, mais très utiles pour permettre à l’auteur de modifier ledocument.

Attention : Le fichier index.html est en texte encodé en UTF-8.

Il est écrit en XHTML 1.0 Strict.

On trouvera des précisions sur le format XHTML à l’annexe F page 52.

La partie modifiable du document est celle comprise entre les deux balisesde commentaires suivantes :




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head><title>éducAlgo</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><link rel="stylesheet" charset="utf-8" href="../application/GUI.css"

type="text/css" media="screen" /><link rel="stylesheet" charset="utf-8" href="../application/GUIprint.css"

type="text/css" media="print" />

<script src="../application/EXE.js" type="text/javascript" charset="utf-8"></script><script src="../application/BDE.js" type="text/javascript" charset="utf-8"></script>


<script src="SommeN.js" type="text/javascript" charset="utf-8"></script><script src="Demo.js" type="text/javascript" charset="utf-8"></script>



<script src="../application/Graph.js" type="text/javascript" charset="utf-8"></script><script src="../application/Algorithme.js" type="text/javascript" charset="utf-8"></script><script src="../application/GUI.js" type="text/javascript" charset="utf-8"></script>

</head>

<body onload="GUI.init()">

36

<div id="page"></div>

</body>

</html>

Un fichier de ce type s’ouvre dans un navigateur Internet, comme unepage vide de l’application éducAlgo :

On peut ajouter un titre de thème au dessus du menu des exercices enmodifiant simplement l’attribut onload de la balise body, par exemple, onpeut remplacer : <body onload="GUI.init()"> par :

<body onload="GUI.init(’Exercices pré-définis par défaut’)">ce qui donnera :

37

C Instruction le LectureLes instructions de lecture sont définies à l’aide de quatre attributs : type,

variable, typeValeur et contrainte– l’attribut type prend la valeur "lecture"– l’attribut variable prend pour valeur une clé-variable– l’attribut typeValeur prend pour valeur "un nombre" ou "une liste"– l’attribut type prend pour valeur une clé-contrainte

L’application éducAlgo permet la prise en compte deux types de variablesen lecture : "un nombre" ou "une liste".

Pour bien utiliser l’application et définir correctement l’algorithme, il estnécessaire de bien comprendre comment s’effectue cette lecture.

On traitera les deux cas en détail :– Lire "un nombre" ne pose pas trop de difficultés– Lire "une liste", par contre, et définir un algorithme de traitement de

liste exige de l’auteur une bonne connaissance du langage JavaScript.

Lors de l’exécution quand l’application rencontre une instruction Lectureelle ouvre un dialogue de saisie pour demander une valeur, et répète cettedemande tant que la contrainte (s’il y en a une) n’est pas vérifiée.

Si l’utilisateur annule la lecture l’algorithme est interrompu et une alerteErreur à l’exécution est affichée :

L’utilisateur peut continuer à travailler.

Si l’on veut, pour des raisons pédagogiques, interdire à l’utilisateur d’af-fecter de nouvelles valeurs à la variable lue, on relira Variable de Lectureparagraphe 4.1.1 page 8.

C.1 Forme : Soit un nombre

C’est le cas où on a l’attribut : typeValeur : "un nombre"Dans ce cas, la chaîne de caractères tapée par l’utilisateur est évaluée avec

la fonction JavaScript Number qui convertit le texte en nombre.Si la chaîne de caractères tapée ne correspond pas à un nombre, la fonction

Number retourne une valeur spéciale NaN qui signifie Not a Number. Dans ce

38

cas, c’est-à-dire quand la variable contient NaN, l’évaluation de la contrainteretourne toujours false, et l’application redemande donc de saisir une valeur.

Dans ce cas, la programmation des contraintes ne pose pas vraiment deproblème. On trouvera dans l’annexe E quelque conseils techniques pourprogrammer en JavaScript.

C.2 Forme : Soit une liste

C’est le cas où on a l’attribut : typeValeur : "une liste"Dans ce cas, la chaîne de caractères tapée par l’utilisateur n’est pas im-

médiatement évaluée. L’utilisateur de l’application n’a pas à connaître lelangage JavaScript, et pour des raisons pédagogiques, on a voulu rendre letraitement des listes le plus simple possible.

Pour l’utilisateur, une liste est simplement représentée par des éléments,en général des nombres, séparés par des virgules.

En interne une liste est représentée par un tableau (Array) JavaScript.Mais comme les tableaux JavaScript doivent être notés entre crochets, l’ap-plication encadre la chaîne de caractères tapée par l’utilisateur par des cro-chets avant d’en effectuer l’évaluation avec la fonction JavaScript eval quiconvertit un texte en objet JavaScript de classe Array.

Par exemple : si l’utilisateur tape "3, 4, 5" dans la case de saisie.En interne, et sans entrer dans les détails techniques, on peut considérer

que l’application effectue à peu près la tâche suivante :messageLU = "3, 4, 5"; // la chaîne tapée par l’utilisateurmessageLU = "[" + messageLU + "]"; // on ajoute des crochets autourvaleurLUE = eval(messageLU); // conversion en Array JavaScript

Par contre, contrairement à la fonction Number, vue au paragraphe pré-cédent, qui donne toujours une valeur, éventuellement NaN, le comportementde la fonction eval est différent. Parfois, s’il y a une erreur de syntaxe dansla chaîne de caractère transmise, une erreur interne est générée à l’exécution.

Dans ce cas, l’application provoque une alerte Erreur à l’exécution, lemassage "SyntaxError: Parse error" sera affiché.

Si l’utilisateur tape des textes en oubliant les guillemets par exemplebip, l’application, qui interprète ce texte comme une variable JavaScriptinconnue, affichera dans une alerte Erreur à l’exécution un message du type"ReferenceError: Can’t find variable: bip"

Dans ce cas, la programmation des contraintes exige de l’auteur une bonneconnaissance du langage JavaScript. On trouvera dans l’annexe E.4 quelquesconseils techniques pour programmer en JavaScript et traiter les listes sousforme d’objets de classe Array.

39

D Création d’un nouvel exerciceDans l’exercice précédent qui a servi d’exemple pour ce document, tout

était défini au départ, on a simplemnt expliqué comment déclarer l’exercice.

Nous allons parler maintenant de la création d’un exercice.

Quand un auteur définit un nouvel exercice, même quand il a une trèsgrande expérience de la programmation, une seule certitude, c’est qu’il vafaire de très nombreuses erreurs !

Ce paragraphe va fournir quelques indications techniques pour orienter letravail de création de l’auteur et pour l’aider à effectuer les corrections sanstrop souffrir ...

D.1 Choix d’un algorithme

L’application éducAlgo a été conçue pour permettre, comme son noml’indique, une initiation à l’algorithmique mais pas à la programmation.

On veut éviter d’ajouter aux difficultés de l’algorithmique pure, les dif-ficultés supplémentaires liées aux langages de programmation, au problèmesde syntaxe ou de codage.

L’interface de l’application doit proposer, dans la mesure du possible, desoutils en « langage naturel » ou ce qui s’en rapproche le plus.

Comme les clés qui référencent les variables les expressions ou les condi-tions sont des textes ordinaires, on choisira soigneusement leurs libellés enévitant toute notation trop technique.

Par exemple, pour calculer un quotient, on préférera une expression comme"Quotient de A par B", directement compréhensible, plutôt qu’une expres-sion plus technique comme "int(A / B)".

Autre exemple, pour calculer la somme de deux carrés, nous préfére-rons, plutôt qu’une expression technique comme "Xˆ2 + Yˆ2", une expres-sion comme "X<sup>2</sup> + Y<sup>2</sup>", car ce texte HTML s’af-fichera ainsi X2 + Y2 dans le bouton correspondant.

C’est alors de la responsabilité de l’auteur de l’exercice de « cacher »dans le code JavaScrit qui évalue l’expression les problèmes techniques liésau calcul effectif du quotient dans un langage de programmation particulier.

Une fois que l’auteur a imaginé un nouvel exercice et défini un nouvelalgorithme, il va donc créer un fichier de définition comme cela a été décritdans ce document.

Il faudra être très attentif pour éviter les fautes de frappes dans la rédac-tion des clés, puis passer à la phase de mise au point, qui est un peu délicatecar elle est faite dans fenêtre de l’application éducAlgo.

40

Or, les navigateurs Internet ont une « qualité » particulière, utile pournaviguer sur Internet, mais gênante pour le programmeur : c’est de refuserde rendre les erreurs visibles. Pour ne pas interrompre la navigation en sebloquant, les navigateurs Internet ignorent les erreurs.

L’application éducAlgo prévoit de signaler les erreurs internes avec unmessage Erreur à l’exécution de ce type :

En principe, si l’exercice a été correctement défini, ce genre d’erreur nedoit pas se produire lors de l’utilisation normale de l’application par un élèvequi cherche à résoudre un l’exercice, sauf parfois lors d’une saisie incorrectedans la lecture d’une liste.

L’auteur de ce document lui-même, a réussi à faire une dizaine d’erreursavant de mettre au point l’exemple décrit ici. Il lui sera donc plus facile designaler les principales erreurs qui peuvent survenir lors de la mise au pointde l’algorithme.

D.2 Débug

Supposons donc que nous en somme arrivé à la phase de test :– l’exercice a été défini dans le fichier Demo.js– le fichier Demo.js a été placé dans le sous-dossier educAlgo/exercice/– le fichier index.html a été configuré pour utiliser l’exercice

On ouvre alors le fichier index.html dans un navigateur Internet modernerespectant les standards du Web. On sélectionne l’exercice dans le menu, eton affiche l’algorithme à l’aide du bouton "Exemple de Solution"

Attention : On évitera le navigateur Internet Explorer qui ne respectepas les standards du Web, et sur lequel l’application ne fonctionne pas.

On utilisera de préférence un des navigateurs comme :– Firefox http://www.mozilla-europe.org/– Safari http://www.apple.com/fr/safari/– Chrome http://www.google.fr/chrome

41

http://www.mozilla-europe.org/

http://www.apple.com/fr/safari/

http://www.google.fr/chrome

On lance maintenant une exécution à l’aide du bouton "Exécuter" .Les messages des erreurs étant souvent difficiles à interpréter, nous allons

commenter dans ce qui suit quelques exemples des Erreurs à l’exécution quipeuvent éventuellement survenir.

D.2.1 Expression "A - 1" non définie

On fait une recherche du texte A - B dans le fichier Demo.js.Cette erreur a été provoquée par de l’exécution de l’instruction erronée :

{type: "affectation",variable: "A",expression: "A - 1"

}

En effet, on voulait faire : Poser A = A - B et on avait dans ce butdéfini l’expression "A - B" mais pas l’expression "A - 1"

BDE.exo.definirExpression("A - B", ["A", "B"],function (a, b) {

return a - b;});

On corrige donc l’instruction fausse :

{type: "affectation",variable: "A",expression: "A - B"

}

Cette erreur, dont le message est en français, a été repérée puis signaléepar l’application.

Mais la plupart des erreurs ne sont pas repérées par l’application. Dansce cas, le message d’erreur engendré par Javascript est en anglais.

42

D.2.2 ReferenceError : Can’t find variable : K

L’interpréteur JavaScript signale qu’il n’a pas trouvé une variable. Eneffet, il arrive souvent de confondre une variable "K" au sens de éducAlgoavec une variable k au sens de JavaScript.

Dans ce cas, on fait une recherche de la lettre K dans le texte du fichierDemo.js.

On la trouve dans la définition de l’expression "A inférieur à K * B"

BDE.exo.definirExpression("A inférieur à K * B", ["A", "B", "K"],function (a, b, k) {

return a + " inférieur à " + K + " fois " + b;});

On se souvient que le langage JavaScript est sensible à la différence entreK majuscule et k minuscule. On corrige alors l’expression :

BDE.exo.definirExpression("A inférieur à K * B", ["A", "B", "K"],function (a, b, k) {

return a + " inférieur à " + k + " fois " + b;});

D.2.3 TypeError : Result of expression is not an object

Le message exact de l’erreur est :

TypeError: Result of expression ’this.v[k]’[undefined] is not an object.

mais il peut prendre des formes variées selon les cas.Ici, comme on voit une notation this.v[k] qui permet de penser que

l’erreur est probablement due à une clé mal définie : k pour K. On fait donccette fois une recherche de la lettre k dans le fichier Demo.js.

BDE.exo.definirExpression("K + 1", ["k"],function (x) {

return x + 1;});

Cette fois-ci, c’est le k minuscule comme nom de variable qui a provoquéle bug, car seule la variable de clé "K" a été définie.

On corrige alors facilement :

BDE.exo.definirExpression("K + 1", ["K"],function (x) {

return x + 1;});

43

D.2.4 Boucles infinies

Un autre problème peut aussi se poser lors de l’exécution d’un algorithme.Si une boucle est mal contrôlée, elle peut tourner indéfiniment et bloquer lenavigateur.

Pour cette raison l’application n’accorde qu’un temps d’exécution limitéà 250 millisecondes, pour éviter le blocage du navigateur. Si l’exécution duretrop longtemps une alerte de ce type est affichée :

Cette méthode présente un défaut, le programme est interrompu quandil dure trop longtemps, même s’il est correct, par exemple pour la recherched’un nombre premier trop grand.

Il est cependant possible de s’accorder un temps de calcul supplémentaire,limité à 5 secondes, en faisant des clics successifs sur le petit texte qui affichele temps de calcul maximum dans le coin inférieur gauche de la fenêtre.

D.2.5 Autres erreurs

Je laisse les créateurs d’exercices découvrir toutes les autres erreurs qu’ilest possible d’imaginer ... et les moyens de les corriger.

N’hésitez pas à me signaler les fautes d’orthographe et toutes les autreserreurs que contient certainement ce document.

Si vous êtes confrontés à une erreur résistante, ou a un bug, n’hésitez pasà nous écrire sur le site de l’application :

http://math.et.info.free.fr/Algorithmique/formulaire.html

44

http://math.et.info.free.fr/Algorithmique/formulaire.html

D.3 Quelques conseils au sujet du style

Le lecteur a maintenant bien vu le lien entre les textes que l’élève peut liresur l’interface de l’application et leur correspondance avec les éléments définispar l’auteur dans le fichier Demo.js, comme item, sujet, clés et instructionsde l’algorithme.

L’auteur ne doit pas perdre de vue que l’application éducAlgo a d’abordun objectif pédagogique. Son but principal n’est donc pas de permettre àl’utilisateur de créer des algorithmes, mais plutôt d’apprendre à créer desalgorithmes en résolvant des exercices simples.

Ces conseils correspondent à nos options pédagogiques personnelles.

L’intérêt d’un exercice ne réside pas dans sa solution, mais dans ce qu’onapprend en cherchant à le résoudre.

Lors de la création d’un nouvel exercice, l’auteur doit donc porter un sointout particulier à la rédaction de l’énoncé, au choix des clés, c’est-à-dire auxlibellés des expressions, conditions et contraintes.

Les difficultés liées à la technique informatique doivent être masquées.Les notations utilisées dans les exercices doivent ressembler, dans la me-

sure du possible, à des phrases en langage naturel ou à des notations usuellesutilisées en cours de mathématiques.

On pourra étudier avec profit tous les exercices pré-définis fournis par dé-faut dans le dossier d’installation de éducAlgo. Sans être des modèles, ils sontconçus pour êtres compris par des utilisateurs qui ignorent la programmationet les techniques informatiques.

Des conseils plus techniques sont proposés dans l’annexe E page 46, oùcertaines propriétés du langage JavaScript sont présentées plus en détail.

45

E Le langage JavaScriptCette annexe n’a pas pour objectif de faire un cours de JavaScript.Mais pour ceux qui ont déjà programmé en C, en Java ou en tout autre

langage, le but est simplement de signaler ce que JavaScript a d’inhabituel.

E.1 Les types JavaScript

Les variables JavaScript ne sont pas typées. Une même variable peutcontenir indifféremment des nombres des chaînes de caractères ou des objets.

Il n’y qu’un type de nombre pour les calculs. JavaScript ne fait pas dedifférence entre réels et entiers.

JavaScript signale rarement des erreurs et procède automatiquement àdes conversions de type. Ceci peut parfois donner des résultats surprenants,car le + peut être interprété selon les cas comme une addition entre nombresou comme une concaténation de chaînes de caractères.

Exemples :12+"3" 7−→ "123" concaténation de "12" et "3"12∗"3" 7−→ 36 produit de 12 et 3

Math.sqrt("25")+7 7−→ 12√25 + 7

Math.sqrt(25)+"7" 7−→ "57" concaténation de "5" et "7"

E.2 Opérateurs et Fonctions

E.2.1 Opérateurs mathématiques

On n’insistera pas sur les opérateur usuels de calcul +, −, ∗ et /

Un opérateur qui est utile pour l’arithmétique est le % qui représentemodulo. Mais on fera attention au fait que JavaScript ne fait pas de diffé-rence entre réels et entiers. De plus, le % ne représente le modulo, au sensmathématique usuel, que pour des arguments entiers positifs.

Exemples :17 % 5 7−→ 2 -17 % 5 7−→ -2

17.3 % 5 7−→ 2.3 -17.3 % 5 7−→ -2.3

Le modulo au sens mathématique usuel peut être défini par exemple parl’une des deux fonctions suivantes au choix :

function mod(a, b) {return a - Math.floor(a / b) * b;

}

46

function mod(a, b) {return a >= 0 ? a % b : b + a % b;

}

E.2.2 Opérateurs logiques

Les opérateurs && et || sont respectivement le ET et le OU logique.Le symbole = étant l’opérateur d’affectation, pour tester l’égalité, il faut

utiliser l’un des deux opérateurs == ou ===(a == b) est vrai quand a et b on même valeur, après conversion de types

éventuels et évaluation.(a === b) est vrai quand a et b sont identiques.Exemples :

expressions vraies expressions faussesfalse == "" false == nullfalse == 0 false == undefinednull == undefined "" == undefined"" == 0 "" == null

"0" == 0 "0" === 0"25" == 5*5 "25" === 5*5"ab" === "ab" "ab" == "aB"

true falseNous avons préféré dans les exemples le === plus proche de l’égalité ma-

thématique usuelle.

E.2.3 Fonctions mathématiques

On dispose en JavaScript des fonctions usuelles, mais la notation est unpeu lourde, on écrira par exemple Math.sin pour sin

Les fonctions disponibles sont :Math.abs, Math.exp, Math.log, Math.sqrt,Math.pow,Math.cos, Math.sin, Math.tan, Math.acos, Math.asin, Math.atan,Math.round, Math.floor, Math.ceil,Math.max, Math.min, Math.random,

E.3 Objets, JSON

JSON, pour JavaScript Object Notation, est un format simple de défini-tion de données, qui permet de représenter facilement les objets JavaScriptet les tableaux, ou Array, JavaScript.

47

On trouvera une définition précise de la syntaxe de JSON sur le site :http://www.json.org/json-fr.html

Pour résumer la syntaxe JSON simplement sur des exemples :– un objet, Object, est une liste attribut : valeur notée entre accolades

Par exemple : { type: "homme", age: 25 }est un objet qui peut représenter un homme de 25 ans, il a un attributtype de valeur "homme" et un attribut age de valeur 25

– un tableau JavaScript, Array, est liste ordonnée notée entre crochets

Par exemple : [5, 6, 7] est une liste ordonnée de 3 nombres

– les valeur peuvent être, des nombres, des chaîne de caractères (string),des booléens (true false), ou récursivement des objets ou des tableaux

Pour éducAlgo il suffit de regarder les exemples de définitions d’exercices.

E.4 Traitement des listes, Array

Pour les listes, nous étudierons deux des exercices pré-définis dans éducAlgoqui utilisent des listes : «Maximum dans une Liste » dans le fichier Maximum.jset « Tri d’une liste par insertion » dans le fichier TriInsertion.js

Rappelons d’abord les conseils pédagogiques :– Les difficultés liées à la technique informatique doivent être masquées.– Les notations utilisées dans les exercices doivent ressembler, dans la

mesure du possible, à des phrases en langage naturel ou à des notationsusuelles utilisées en cours de mathématiques.

L’exercice « Maximum dans une Liste » propose ainsi comme boutonspour les Expressions et les Conditions :

L’utilisateur n’a pas à savoir qu’une liste L de N éléments est représentéepar un Array JavaScvript et que les éléments de cette liste qui sont indexésà partir de 0, sont notés : L[0], L[1], L[2],... L[N-1].

48

http://www.json.org/json-fr.html

Nous avons dans l’exercice fait le choix de représenter les éléments de laliste de façon plus usuelle en mathématiques en les notant : L1, L2, L3,... LN.

Les expressions qui correspondent aux deux boutons L1 et LK sont respec-tivement codées ainsi :

BDE.exo.definirExpression("L<sub>1</sub>", ["L"],function (l) {

return l[0];});

BDE.exo.definirExpression("L<sub>K</sub>", ["L", "K"],function (l, k) {

return l[k - 1];});

On remarque, dans les clés des expressions, l’utilisation de la balise HTML<sub> qui permet d’obtenir un indice.

On remarque aussi le décalage d’une unité entre l’indice visible par l’uti-lisateur et l’indice effectif du tableau JavaScript.

Les conditions qui correspondent aux deux boutons K ≤ longueur de L

et LK > M sont respectivement codées ainsi :

BDE.exo.definirCondition("K ≤ longueur de L", ["K", "L"],function (k, l) {

return k <= l.length;});

BDE.exo.definirCondition("L<sub>K</sub> > M", ["L", "K", "M"],function (l, k, m) {

return l[k - 1] > m;});

On remarque l’utilisation de l.length qui donne le nombre des élémentsdu tableau l, et comme précédemment, le décalage d’indice.

Remarque : éducAlgo, dans sa version actuelle ne permet pas d’affecterun élément de liste particulier, c’est-à-dire, une case de tableau ne peut pasêtre déclarée comme variable.

On peut par contre ajouter des éléments à une liste comme on le voitdans l’exercice « Tri d’une liste par insertion »

49

L’exercice « Tri d’une liste par insertion » propose ainsi comme boutonspour les Expressions et les Conditions :

Pour l’utilisateur, une liste est simplement constituée d’éléments séparéspar des virgule. Dans ce cas il est assez naturel, pour construire une liste, decommencer avec une liste vide à laquelle on ajoute simplement des élémentgrâce à l’opérateur virgule.

On a déjà vu comment coder l’expression qui correspond au bouton L1 ,les expressions Liste Vide et T , L1 seront respectivement codées ainsi :

BDE.exo.definirExpressionConstante("Liste Vide", []);

BDE.exo.definirExpression("T , L<sub>1</sub>", ["T", "L"],function (t, l) {

var i, r;r = [];for (i = 0; i < t.length; i += 1) {

r.push(t[i]);}r.push(l[0]);return r;

});

La liste vide est simplement un Array [] vide.Par contre pour ajouter un élément à un tableau original l, il faut créer

une copie de l dans un nouveau tableau r dans lequel on ajoute, en utilisantla méthode push, les éléments de l un à un à l’aide d’une boucle, puis onajoute l’élément complémentaire, sans oublier le décalage d’indice.

L’expression T..K−1 , LJ , TK.. est codée sur le même principe et mérite uneétude attentive. La correction des erreurs est dans ce cas là assez délicate.

50

On laisse donc maintenant aux auteurs d’exercices l’occasion de montrerleurs talents de programmeur.

E.5 Liens vers les outils de programmation

Rappelons d’abord qu’il faut éviter le navigateur Internet Explorer quine respecte pas les standards du Web, et sur lequel l’application éducAlgone fonctionne pas.

On utilisera de préférence un des navigateurs suivants :– Firefox http://www.mozilla-europe.org/– Safari http://www.apple.com/fr/safari/– Chrome http://www.google.fr/chrome

De plus, ces navigateurs proposent des outils de développement ou desmodules additionnels pour faciliter la programmation et la mise au point.

Pour le navigateur Firefox, nous conseillons le module « Firebug » quisera très utile. Il peut être téléchargé avec profit à cette adresse :

http://addons.mozilla.org/fr/firefox/addon/1843

Pour le navigateur Safari, aller dans les « Préférence... / Avancées » pourcocher la case « Afficher le menu Développement dans la barre des menus ».

Les familiers d’Internet sauront y trouver toutes les informations utiles.On indiquera simplement ici quelques sites que l’on pense vraiment utiles.

Pour le débutant, le site « Developpez.com » est une mine d’information.On y trouve en particulier des didacticiels pour javaScript :

http://javascript.developpez.com/cours/

Très utile pour tester les expressions, le « JavaScript Shell » est une petiteapplication Web qui permet de taper une ligne de code JavaScript et del’évaluer immédiatement en ligne : http://www.squarefree.com/shell/

Enfin « JSLint » est une application Web de Douglas Crockford qui pro-pose de vérifier la bonne qualité d’écriture d’un code JavaScript.

Le code source de éducAlgo ainsi que les définitions des exercices pré-définis ont tous été contrôlés avec JSLint : http://www.jslint.com/

51

http://www.mozilla-europe.org/

http://www.apple.com/fr/safari/

http://www.google.fr/chrome

http://addons.mozilla.org/fr/firefox/addon/1843

http://javascript.developpez.com/cours/

http://www.squarefree.com/shell/

http://www.jslint.com/

F Texte HTML ou XHTML et Styles CSSLe HTML, Hypertext Markup Language, est un format de données conçu

pour représenter les pages web.Le XHTML, eXtensible HyperText Markup Language, est une extension

du HTML dont la syntaxe se fonde sur celle du XML, plus rigoureuse et plusexigeante.

Associé aux feuilles de style CSS, Cascading Style Sheets, HTML ouXHTML permettent de créer des pages Web élégantes et dynamiques. Onconseille donc, pour créer des application Web interactives, de préférer leXHTML au HTML pour la rédaction des pages Web.

Pour respecter les normes du Web, il est fortement recommandé de vérifierle code rédigé en le faisant valider sur le site du W3Cle World Wide Web Consortium : http://www.w3.org/

– Validation du HTML http://validator.w3.org/– Validation du CSS http://jigsaw.w3.org/css-validator/

F.1 Présentation pédagogique en HTML

La page d’accueil de l’application éducAlgo contient très peu de HTML,en effet, c’est le moteur JavaScript qui engendre l’interface.

L’auteur des exercices influence cependant le contenu HTML de la page :– le titre ou item de l’exercice est du texte simple– l’énoncé ou sujet de l’exercice est du texte au format HTML– les clés des Variables, Expressions, Conditions et Contraintes

sont aussi des textes au format HTML

Donc il est possible de faire un peu de mise en page et d’afficher certainscaractères spéciaux dans les textes des énoncés ou dans le libellé des clés deboutons. Pour cela on peut utiliser certaines balises ou des entités HTML,comme par exemple :

– pour le symbole <, less than, utiliser <– pour le symbole >, greater than, utiliser >– pour ajouter un espace non sécable, non breaking space, utiliser – pour passer à la ligne utiliser la balise <br />– pour écrire par exemple Ae avec un exposant Ae utiliser A<sup>e</sup>– pour écrire par exemple Ai avec un indice utiliser A<sub>i</sub>– on peut aussi écrire en <b>gras</b> ou en <i>italique</i>Il faut cependant éviter tout excès et se limiter aux notations les plus

simples et le plus usuelles.

52

http://www.w3.org/

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Les caractères spéciaux comme par exemple π, ≤ ou ≥ font partie du jeudes caractères Unicode permis par l’encodage en UTF-8 dont on parlera plusen détail à l’annexe G page 54.

Pour l’écriture d’un énoncé en utilisant des balises ou des entités, il estconseillé de rédiger cet énoncé dans une page HTML de test, pour vérifier lerésultat obtenu, puis de faire un copier-coller entre guillemets dans le fichierJavaScript de définition de l’exercice.

F.2 CSS, Cascading Style Sheets

La feuille de style CSS est dans le fichier GUI.css, elle définit l’aspectvisuel de l’interface de l’application éducAlgo.

Dans un premier temps, on déconseille de la modifier car elle est liée aucode engendré dynamiquement par le moteur de l’application, et il est doncnécessaire de comprendre parfaitement le fonctionnement du programmepour prévoir les effets des modifications de style.

53

G Encodage du Texte en UTF-8Aux débuts de l’informatique les caractères d’un texte étaient codés à

l’aide de 7 bits d’un octet. Ce mode de codage permettait de définir 127caractères, ce qui est rapidement devenu insuffisant.

C’était le code ASCII,pour American Standard Code for Information Interchange.

Une nouvelle norme : Unicode a donc été créée pour enrichir le jeu decaractères disponibles, sans se limiter à un octet pour le codage.

Unicode a pour ambition de représenter tous les caractères. La tâche estdonc loin d’être achevée.

Aujourd’hui, l’encodage des textes se rapproche progressivement de lanorme Unicode, mais pour des raisons de compatibilité avec les fichiers codésen ASCII il est conseillé d’utiliser l’encodage UTF-8.

En effet ce mode d’encodage est compatible avec les anciens fichiers ASCIItout en donnant accès à l’ensembles des caractères Unicode.

Pour pouvoir créer facilement les fichiers de définition des exercices, il estdonc conseillé d’utiliser un éditeur de texte prévu pour la programmationet proposant, si possible la coloration syntaxique des texte HMTL, CSS ouJavaScript, et permettant l’encodage en UTF-8.

Les programmeurs ont déjà sans doute leur éditeur de texte favori...

Sinon, il existe, par exemple :– multi-plateforme (Mac OS, Unix ou Windows) jEdit

http://www.jedit.org/

– sous Windows PSPad http://www.pspad.com/fr/

– sous Mac OS TextWranglerhttp://www.barebones.com/products/textwrangler/

54

http://fr.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange

http://fr.wikipedia.org/wiki/Unicode

http://www.jedit.org/

http://www.pspad.com/fr/

http://www.barebones.com/products/textwrangler/

TikZ pour l'impatientmath.et.info.free.fr/Algorithmique/educAlgoDoc.pdf · 2011-06-26 · 4...

Documents

Transcript of TikZ pour l'impatientmath.et.info.free.fr/Algorithmique/educAlgoDoc.pdf · 2011-06-26 · 4...