Langage textuel HTML

h1("un titre")       Définit un titre dans le document

p()       Ouvre un nouveau paragraphe

$p()       Ferme le paragraphe ouvert précédemment

out("une phrase")      Ecrit une phrase à l'écran

color("nomCouleur")       Définit la couleur du texte qui suit

$color()      Fin de la colorisation du texte et retour à la couleur par défaut.

b("phrase en gras")      Met une phrase en gras

i("phrase en italique")      Met une phrase en italique

u("phrase soulignée")      Souligne une phrase

a("URL")      Définit un lien hypertexte vers une URL

Syntaxe

Ecrire le programme principal

programme (

instruction1,

instruction2,

...

);

Exemple

programme (

h1("Exemple de programme"),

p(), color("blue"), out("Ceci est une phrase en bleu"), $color(), b(" suivi d'une mise en gras "), out(" et "), u(" d'un souligné."),$p()

);

Inclure un scripte JavaScript

programme (

scripte(function() {

alert("Bonjour");

}),

...

);

Factoriser un sous-programme en une séquence extérieure

sousProgramme1 = sequence (

instruction1,

instruction2

);

 

programme (

sousProgramme1,

...

);

Intéractivité

pause(secondes)       Met le programme en pause pendant une certaine durée en secondes

boutonDePause("label",onClick)        Dessine un bouton et met en pause le programme jusqu'à ce que l'utilisateur clique dessus. Il est possible d'inclure une fonction JavaScript qui s'exécutera au moment du clique, avant de continuer le programme.

bouton("label",sousProgramme)      Dessine un bouton et y attache un sous-programme qui sera exécuté lors du clique. Le sous-programme peut aussi être directement une fonction JavaScript

Exemples

programme (

p(),out("Exemple de bouton"),$p(),

boutonDePause("Prêt ?"),

bouton("Clique sur moi", sousProgramme(

p(),out("Bravo."),$p(),

p(),out("Attends..."),$p(),

pause(2),

p(),out("On continue ?"),$p()

)),

bouton("Exécute scripte", function() {

alert("Bonjour");

})

);

Grille

grille(nbLignes, nbColonnes)      Construit une grille de nbLignes et nbColonnes

texte(ligne,colonne, "texte")      Ecrit un texte dans une cellule de la grille référencée par son numéro de ligne et numéro de colonne. La cellule en haut à gauche de la grille est en ligne 1 et colonne 1.

couleur(ligne,colonne, "couleur")   Met une cellule en couleur

Référencement

grille.cellule(ligne,colonne)    Renvoie une cellule de la grille, sur laquelle d'autres méthodes peuvent être appelées :

  • texte("texte")     Met un texte dans la cellule
  • couleur("couleur")    Met la cellule en couleur
  • bouton("label", function(cellule) {...})    Transforme une cellule en bouton et attache une fonction JavaScript qui sera exécutée lors du clique. La fonction reçoit une référence à la cellule cliquée.
  • gauche()   Renvoie la cellule à gauche
  • droite()   Renvoie la cellule à droite
  • haut()   Renvoie la cellule supérieure
  • bas()   Renvoie la cellule inférieure
  • cellule(ligne,colonne)    Saute vers une autre cellule
  • pause(secondes)   Met le programme en pause

grille.fonctionSurClique(function(ligne,colonne) {...})   Attache une fonction JavaScript à toute les cellules de la grille qui sera exécutée lors du clique. La fonction reçoit en paramètre le numéro de ligne et de colonne.

 

Il est possible d'écrire des cheminements par chaînage :

grille.cellule(1,1).couleur("green").droite().bas().pause(1).couleur("green").droite().bas().pause(1).couleur("green")

 

Panier

programme.panier     Donne accès à un panier depuis un environnement de scripte

  • no("numéro")     Renvoie un certain panier identifié par son numéro. Il peut y avoir plusieurs paniers dans le programme.
  • ajouter(objet)    Ajoute un objet à la fin du panier
  • taille()    Renvoie le nombre d'objet stocké dans le panier
  • lire(index)    Renvoie l'objet stocké dans le panier, donné son index  (l'index est compris en 1 et la taille du panier)
  • lirePremier()   Renvoie le premier objet du panier
  • lireDernier()   Renvoie le dernier objet du panier
  • remplacer(index,objet)    Remplace l'objet stocké à l'index donné par un nouvel objet
  • sortirDernier()    Sort le dernier objet du panier et le renvoie
  • montrer()    Montre le contenu du panier à l'écran
  • importer(tableau)    Remplace le contenu du panier avec le contenu du tableau donné
  • exporter()    Renvoie un tableau avec le contenu du panier

Formulaire

programme.formulaire    Manipule un formulaire depuis un environnement de scripte

  • no("numéro")    Renvoie un certain formulaire identifié par son numéro. Il peut y avoir plusieurs formulaires sur la page.
  • creerChamp("nom", "label", "couleurFond", "couleurTexte")   Crée un champ dans un formulaire donné son nom, son label et optionnellement la couleur du fond de l'input et la couleur de texte.
  • vider()    Vide le contenu des champs du formulaire
  • supprimer()    Supprimer le formulaire de l'écran
  • champCourant()   Renvoie une référence au champ actuellement sélectionné dans le formulaire
  • champ("nom")    Renvoie le champ sélectionné par son nom, sur lequel on peut appeler les méthodes
    • valeur()   Renvoie la valeur du champ
    • valeur("v")   Définit la valeur du champ
    • label("Label")   Définit ou renvoie le label du champ
    • label.couleur("couleurTexte")   Définit ou renvoie la couleur du texte du label
    • couleur("couleurFond")   Définit ou renvoie la couleur de fond du champ
    • input()   Renvoie une référence sur l'input graphique HTML
      • id()   Renvoie l'ID HTML du Form Input
      • $()   Renvoie une référence JQuery sur le Form Input
      • couleur("couleurFond", "couleurTexte")    Définit la couleur du fond et du texte de l'input HTML
    • nom()   Renvoie le nom du champ
    • id()   Renvoie l'ID HTML du champ
    • $()   Renvoie une référence JQuery sur le champ
    • vider()   Vide le contenu du champ
    • focus()   Positionne le curseur sur ce champ

Exemple

programme (
    scripte(function() {
        programme.formulaire
        .creerChamp("nom","Nom:","Black","BurlyWood")
        .creerChamp("prenom","Prénom:","Black","BurlyWood")
        .creerChamp("tf","Téléphone:")        
        .creerChamp("email","Email:");
        programme.formulaire.champ("tf").couleur("CornflowerBlue");
        programme.formulaire.champ("email").couleur("CornflowerBlue");
    })
);

Tortues

Une tortue est un objet logiciel pouvant se déplacer sur une grille pas à pas.

Elle regarde dans une direction et peut pivoter sur elle-même à gauche ou à droite et même faire demi-tour.

Elle peut avancer d'une case droit devant elle ou avancer d'une case en diagonale à gauche ou diagonale à droite.

 

La tête de la tortue est colorée et elle laisse derrière elle une trace colorée de son passage sur la grille.

Plusieurs tortues peuvent cohabiter sur la grille et son dès lors référencées par un numéro d'index.

 

Elle a un senseur lui permettant d'ausculter la cellule courante sur laquelle elle est ou toute cellule autour d'elle.

Elle peut marcher selon l'intelligence qu'on lui encode.

Elle a une mémoire lui permettant de garder un état et de moduler le code de son intelligence.

 

tortue

  • no("numéro")    Renvoie une tortue identifiée par son numéro. Il peut y avoir plusieurs tortues sur la grille.
  • start(noLigne,noColonne,direction,couleurQueue)   Place la tortue sur la grille sur la cellule identifiée par le numéro de ligne et numéro de colonne.
    Oriente la tortue dans la direction donnée, selon les 4 directions cardinales "N": Nord, vers la haut, "S": Sud, vers le bas, "E": Est, vers la droite, "W": Ouest, vers la gauche. Par défaut, la direction pointe au Nord.
    Définit une couleur pour la trace de la tortue laissée sur la grille. Par défaut la couleur est bleue.
    Cette fonction ne peut être appelée que si la grille existe. (cf. la fonction grille pour construire les grilles).
  • avance()   Avance la tortue d'une case dans la direction dans laquelle elle regarde. Cette fonction ne peut être appelée qu'après avoir appelé la fonction start. Si la tortue sort de la grille, alors elle boucle automatiquement de l'autre côté, dans la même direction.
  • avanceDiagGauche()   Avance la tortue d'une case selon sa diagonale gauche (équivalent à tourneAGauche().avance().tourneADroite().avance())
  • avanceDiagDroite()    Avance la tortue d'une case selon sa diagonale droite (équivalent à tourneADroite().avance().tourneAGauche().avance())
  • tourneAGauche()   Pivote la tortue de 90° vers sa gauche.
  • tourneADroite()   Pivote la tortue de 90° vers sa droite.
  • demiTour()   Pivote la tortue de 180°.
     
  • celluleCourante()   Renvoie une référence à la cellule de la grille sur laquelle est positionné la tortue.
  • cellule(décalageDevant, décalageDroite)   Renvoie une référence à une cellule de la grille par rapport au positionnement actuel de la tortue. Le paramètre décalageDevant indique un nombre cellules devant la tortue, le paramètre décalageADroite indique un nombre de cellules à droite de la tortue.
    Exemple :
    tortue.cellule(0,0) est équivalent à tortue.celluleCourante()
    tortue.cellule(1,0) renvoie la première cellule devant le nez de la tortue,
    tortue.cellule(-1,0) renvoie la première cellule derrière la tortue,
    tortue.cellule(0,1) renvoie la première cellule sur sa droite,
    torture.cellule(0,-1) renvoie la première cellule sur sa gauche.
     
  • memoire()   Renvoie l'Objet javascript utilisé pour sauvegarder l'état de la tortue.
    • direction   Variable mémorisant la direction actuelle dans laquelle regarde la tortue (selon les directions cardinales "N","S","W","E").
       
  • marche(nbPas,plan) Fait marcher la tortue d'un certain nombre de pas, selon un plan de marche Le plan de marche est une fonction prenant en paramètre le numéro du pas courant (démarrant à 1) et une référence de la tortue, et renvoyant un mouvement chaîné.
    Exemple :
    tortue.marche(50, function(noPas,tortue) {
      // avance tout droit sur les 3 premiers pas
      if(noPas<=3) return tortue.avance();
      // puis sur les pas suivants, fait un petit pas de danse, tourneAGauche-tourneADroite-tourneADroite-tourneAGauche-pause-avance-avance
      else return tortue.tourneAGauche().tourneADroite().tourneADroite().tourneAGauche().pause(1).avance().avance();
      })        
    Le nombre de pas passé à la fonction marche peut être un nombre statique (par exemple, 50) ou une fonction prenant en paramètre le numéro du pas courant, une référence de la tortue, et renvoyant une valeur booléenne : vrai pour autoriser la marche, faux pour stopper la marche.
    Exemple une tortue qui avance prudemment et s'arrête devant le premier obstacle trouvé sur son chemin égal à une étoile à 5 branches:
    tortue.marche(
      function(noPas,tortue) {
        if(tortue.cellule(1,0).texte() != '★') return true;
        else return false;
      },
      function(noPas,tortue) {return tortue.avance();}
    ) 
    
    

Couleurs et Symboles

Nom des couleurs en anglais que l'on peut utiliser dans formulaire et grille. Les symboles en dessous sont à disposition pour une utilisation ludique.

 

red orange yellow green blue indigo purple