Présentation

Programmer avec des blocs, sans quitter le langage CoddyRun

CoddyBlock est l’éditeur de blocs intégré à CoddyRun. On y construit un programme en glissant des blocs, à la manière de Scratch, mais les blocs ne sont pas un langage à part : chacun porte les vrais mots-clés de CoddyRun, et le programme assemblé devient du code dans l’éditeur. On commence avec les blocs, on lit le code qu’ils produisent, puis on finit par l’écrire soi-même.

En trois étapes

1. OuvrirLe code de l’éditeur est converti en blocs (page vide si l’éditeur est vide)

2. AssemblerGlisser, remplir les cases, emboîter ; l’aperçu montre le code en direct

3. AppliquerLe code de l’éditeur est remplacé par la traduction des blocs

On peut essayer sans crainte : le code de l’éditeur n’est modifié que lorsqu’on clique sur Appliquer au code. Si l’on ferme après avoir changé des blocs, CoddyBlock demande confirmation pour ne rien perdre par erreur.

L’écran de CoddyBlock

La palette, l’espace de travail, l’aperçu du code et la barre d’outils

Les trois zones

PaletteÀ gauche : les blocs rangés par famille, avec une recherche

Espace de travailAu centre : le programme, qui se lit de haut en bas

Aperçu du codeÀ droite : le code CoddyRun produit par les blocs, mis à jour en direct

La barre d’outils

Annuler / RétablirRevenir sur un changement, ou le refaire

Exporter en imageEnregistrer les blocs dans une image SVG qui contient le programme

ImporterRetrouver les blocs d’une image exportée par CoddyBlock

Forme ▾Choisir l’allure des blocs : Puzzle ou Briques

Appliquer au codeConvertir les blocs en code dans l’éditeur

Appliquer et exécuterConvertir, puis lancer le programme

AideRappel des gestes et des raccourcis (F1)

FermerQuitter CoddyBlock (Échap)

À la première ouverture, un didacticiel fait le tour de l’écran. On peut le relancer à tout moment depuis l’Aide, ou cocher la case pour ne plus l’afficher.

Les familles de blocs

Chaque famille a sa couleur, dans la palette comme dans le programme

Famille	À quoi elle sert	Blocs
Afficher et demander	Écrire, poser une question, proposer un choix, attendre une touche	`affiche, demande … dans, choisir … dans, appuyer … dans, couleur, html, pause`
Variables	Créer une variable, lui donner une valeur, la modifier	`est un / est une, vaut, ajoute, soustrait, constante, vide, supprime, classe`
Conditions	Choisir un chemin selon une condition	`si … alors, sinon si, sinon, selon, cas, sinon selon`
Boucles	Répéter des instructions	`répète … fois, pour … de … à, tant que, arrête, continue`
Calculs & comparaisons	Les blocs arrondis qui se glissent dans une case	`+ − * / mod ^, = <> < > <= >=, et, ou, non`
Fonctions & Procédures	Nommer un morceau de programme pour le réutiliser	`fonction, procédure, retourne, appel`
Processus	Faire tourner plusieurs tâches en même temps	`processus, suspendre, reprendre`
Dessin	Dessiner sur une toile et réagir à la souris	`dimension, rectangle, cercle, label…, cliquer, interagir`
Déboguer	Suivre l’exécution et rattraper les erreurs	`déboguer, essayer, attraper`
Commentaires & sections	Expliquer et découper son programme	`// commentaire, @ section`
Programme	Ligne gardée telle quelle, arrêt du programme	`code libre, terminer`

Toutes les fonctions intégrées du langage sont aussi dans la palette, classées par domaine (nombres, texte, tableaux, dates, dessin, fichiers…). Le champ de recherche, insensible aux accents, retrouve un bloc ou une fonction en quelques lettres (Ctrl + Maj + F).

Lire les blocs

Cinq formes, et le code qui leur correspond

Les formes de blocs

InstructionBloc rectangulaire qui s’empile sous le précédent (affiche, vaut…)

StructureBloc avec un « bras » qui contient d’autres blocs (si, répète, pour, tant que…) ; le « fin » est ajouté tout seul

ChapeauDessus arrondi : fonction, procédure, processus et classe, posés au premier niveau

Bloc de finSans encoche dessous : retourne, arrête, continue, terminer

ValeurPetit bloc arrondi (calcul, texte, tableau, appel de fonction) qui se glisse dans une case

Exemple : une condition

Le bloc si contient ses instructions dans son bras ; le sinon est une partie ajoutée au même bloc.

Code

n est un nombre
n vaut 17
si n mod 2 = 0 alors
    affiche 'pair'
sinon
    affiche 'impair'
fin si

En blocs

Exemple : une boucle

Le commentaire de fin de ligne reste attaché à son bloc.

Code

pour i de 1 à 4
    affiche repeter_texte('#', i) // une ligne de plus à chaque tour
fin pour

En blocs

Exemple : une fonction

La fonction est un chapeau ; retourne est un bloc de fin. L’appel maximum(8, 13) est une valeur glissée dans la case de affiche.

Code

fonction maximum(xa, xb)
    si xa > xb alors
        retourne xa
    sinon
        retourne xb
    fin si
fin fonction
affiche maximum(8, 13)

En blocs

Construire un programme

Poser des blocs, remplir leurs cases, ajouter des parties

Les gestes de base

Glisse un bloc depuis la palette et dépose-le dans l’espace de travail. Clique sur un bloc pour le sélectionner, puis tape directement dans ses cases.

Les petits blocs arrondis (calculs, fonctions…) se déposent dans une case d’un autre bloc. Si la case contient déjà une valeur, le nouveau bloc l’englobe quand il a une case libre.

Les boutons + et − ajoutent ou retirent des arguments et des parties : sinon si, sinon, cas, attraper…

Ce que CoddyBlock fait pour toi

Mes fonctions et variablesTes fonctions, procédures et variables apparaissent en haut de la palette

Cases nomméesEn appelant une de tes fonctions, chaque case porte le nom du paramètre attendu

SuggestionsLes champs de nom proposent les noms déjà utilisés dans le programme

CouleursUne case de couleur ouvre un sélecteur de couleur

Supprimer

Un blocLe glisser vers la palette, ou le sélectionner et appuyer sur Suppr

Un champLe vider puis Suppr, ou directement Maj + Suppr

Un côté d’un calculRetirer un côté garde l’autre

Revenir en arrièreCtrl + Z annule la suppression

Glisser-déposer

Savoir où le bloc va atterrir avant de le lâcher

Pendant que tu tiens un bloc, un espace pointillé s’ouvre à l’endroit exact où il atterrira. Le bloc qui va le contenir (si, boucle, fonction…) est entouré en pointillé et sa barre de gauche s’allume. Pour mettre un bloc dans un si, lâche-le sous l’en-tête, un peu vers la droite ; pour le mettre après, vise à gauche de la barre.

L’étiquette près du curseur

dépôt possibleLe bloc sera posé ici

même placeLe bloc revient où il était : rien ne change

interdit iciCe placement n’est pas permis (voir les placements interdits)

supprimerAu-dessus de la palette : le bloc sera supprimé

annuléÉchap pendant le glisser : le bloc revient à sa place

Déplacer plusieurs blocs, ou au clavier

Maj + glisserEmporte le bloc et tous ceux qui sont en dessous

Alt + ↑ / ↓Monte ou descend le bloc sélectionné d’un cran

Alt + →Rentre le bloc dans le si / la boucle juste au-dessus

Alt + ←Sort le bloc du si / de la boucle qui le contient

Le menu du clic droit

Toutes les actions sur un bloc, au même endroit

Action	Effet
Copier / Couper / Coller	Le bloc copié est collé après le bloc sélectionné, ou à la place de l’expression sélectionnée
Dupliquer	Crée une copie juste en dessous
Ajouter un commentaire	Ajoute au bloc un commentaire de fin de ligne (`// …`), ou le retire
Désactiver / Réactiver	Le bloc reste visible, grisé et barré, mais il est ignoré dans le code produit : pratique pour essayer un programme avec et sans un morceau
Ligne vide au-dessus	Ajoute ou retire une ligne vide au-dessus du bloc, pour aérer le code
Replier / Tout replier / Tout déplier	N’affiche que l’en-tête des structures ; replier ne change pas le code
Supprimer	Retire le bloc (Ctrl + Z le fait revenir)

Placements interdits

CoddyBlock refuse les assemblages qui ne pourraient pas fonctionner

Bloc	Où le placer	Pourquoi
`retourne`	Dans une fonction	C’est lui qui renvoie le résultat de la fonction
`arrête`, `continue`	Dans une boucle (`répète`, `pour`, `tant que`)	Ils sortent de la boucle ou passent au tour suivant
`fonction`, `procédure`, `processus`, `classe`	Au premier niveau	Ils ne se rangent pas dans un si, une boucle ou une autre fonction
Contenu d’une `classe`	Variables, constantes et commentaires	Une classe décrit ce que chaque objet contient

Se repérer

Retrouver un bloc dans un grand programme

Loupe (Ctrl + F)Surligne tous les blocs qui contiennent le texte cherché

Aperçu du codeUn clic sur une ligne retrouve le bloc correspondant

Flèche ▾Replie un si, une boucle ou une fonction ; « … blocs masqués » le déplie

Petites flèchesEn haut à gauche et à droite : masquent ou affichent la palette et l’aperçu

Bord de la paletteTirer pour changer sa largeur ; double-clic pour la remettre à sa taille

ZoomEn bas à droite, ou Maj + molette ; clic sur le pourcentage pour revenir à 100 %

Des blocs au code

Ce que devient le programme quand on applique les blocs

La conversion fonctionne dans les deux sens, sur le même programme : à l’ouverture, le code devient des blocs ; en appliquant, les blocs redeviennent du code. Le code produit est indenté proprement, et si rien n’a été modifié dans les blocs, le code de l’éditeur n’est pas touché.

Les règles de conversion

ParenthèsesAjoutées seulement quand les priorités l’exigent (* avant +, et avant ou…)

et / ou mélangésParenthèses gardées pour la lisibilité : a ou (b et c)

FormulationUne comparaison en toutes lettres (est égal à, différent de) est réécrite telle quelle

CommentairesGardés ; un commentaire { … } sur plusieurs lignes devient des lignes //

Ligne inconnueDevient un bloc « code » qui garde le texte exact : rien n’est perdu

Bloc désactivéAbsent du code produit

Lignes videsConservées entre les blocs

Exemple : des calculs emboîtés

Dans les blocs, l’emboîtement dit quel calcul se fait en premier ; dans le code, ce sont les parenthèses.

Code

prix est un nombre
prix vaut (2 + 3) * 4
si (age > 12 et age < 18) ou invite = vrai alors
    affiche 'Entrée autorisée'
fin si

En blocs

Exporter et importer une image

Une image de tes blocs qui contient aussi ton programme

Exporter en image

Enregistre les blocs dans une image SVG, nette à toutes les tailles : pour une fiche de cours, un diaporama, le forum ou une publication. L’image transporte aussi le programme, accompagné d’une empreinte (SHA-256) qui permet de vérifier qu’il n’a pas été modifié.

Importer

Bouton ImporterOu Ctrl + O, ou glisser l’image dans la fenêtre

Espace videLes blocs de l’image remplacent l’espace de travail

Programme existantCoddyBlock demande s’il faut remplacer ou ajouter à la suite

Image refuséeUne autre image SVG, ou une image retouchée après l’export

Importer n’exécute rien : les blocs sont vérifiés puis affichés, exactement comme un code collé dans l’éditeur. L’empreinte n’est pas une signature : elle garantit que l’image est intacte, pas qui l’a créée.

Apparence

Le menu Forme change l’allure des blocs, jamais le programme

PuzzleDes encoches qui s’emboîtent (forme par défaut)

BriquesDes plots dessus et des empreintes dessous

CoddyBlock retient tes réglages d’une ouverture à l’autre : forme, zoom, largeur de la palette, palette et aperçu affichés ou masqués.

Raccourcis clavier

Sur Mac, Ctrl devient ⌘ et Alt devient ⌥ ; F1 les affiche dans CoddyBlock

Touches	Action
Modifier
`Ctrl` + `Z`	Annuler
`Ctrl` + `Y`	Rétablir (ou Ctrl + Maj + Z)
`Ctrl` + `C`	Copier le bloc sélectionné
`Ctrl` + `X`	Couper le bloc sélectionné
`Ctrl` + `V`	Coller après le bloc sélectionné (ou à la place de l’expression sélectionnée)
`Ctrl` + `D`	Dupliquer le bloc sélectionné
`Entrée`	Ajouter ou retirer une ligne vide au-dessus du bloc sélectionné
`Suppr`	Supprimer le bloc sélectionné (ou Retour arrière)
`Suppr`	Dans un champ vide : retirer ce champ (argument, partie facultative, commentaire, un côté d’un calcul…)
`Maj` + `Suppr`	Dans un champ : le retirer même s’il est rempli
Déplacer
`Alt` + `↑`	Monter le bloc d’un cran (tout en haut, il sort du bloc qui le contient)
`Alt` + `↓`	Descendre le bloc d’un cran (tout en bas, il sort du bloc qui le contient)
`Alt` + `→`	Rentrer le bloc dans le si / la boucle juste au-dessus
`Alt` + `←`	Sortir le bloc du si / de la boucle qui le contient
`Maj` + `Glisser`	Déplacer le bloc avec tous ceux qui sont en dessous
`Échap`	Pendant un glisser : annuler, le bloc revient à sa place
Chercher et afficher
`Ctrl` + `F`	Rechercher dans le programme (loupe en haut à droite)
`Ctrl` + `Maj` + `F`	Chercher un bloc dans la palette
`Entrée`	Résultat suivant (Maj + Entrée : précédent)
`Maj` + `Molette`	Zoomer / dézoomer
`Ctrl` + `0`	Revenir au zoom 100 %
`-`	Replier le bloc sélectionné (ou celui qui le contient)
`+`	Déplier le bloc sélectionné
Général
`Ctrl` + `Entrée`	Appliquer au code et exécuter
`Ctrl` + `O`	Importer un programme depuis une image SVG exportée
`F1`	Afficher l’aide (ou ?)
`Échap`	Fermer le menu, la recherche, puis CoddyBlock

Questions fréquentes

Ce qu’on demande le plus souvent sur CoddyBlock

Les blocs sont-ils un autre langage ?

Non. Chaque bloc produit exactement le code qu’on aurait écrit à la main. On peut passer des blocs au code, et du code aux blocs, autant de fois qu’on veut.

Peut-on tout écrire en blocs ?

Oui : toutes les instructions ont leur bloc et toutes les fonctions intégrées sont dans la palette. Une ligne que CoddyBlock ne sait pas découper devient un bloc « code » qui garde le texte exact.

Pourquoi un bloc est-il refusé à un endroit ?

L’étiquette interdit ici signale un placement qui ne pourrait pas fonctionner : voir les placements interdits.

Où voir des programmes en blocs ?

Dans la galerie d’exemples (bouton CoddyBlock de chaque exemple) et dans les missions des Premiers pas.

Note de fin

CoddyBlock n’est pas un mode « simplifié » qu’il faudrait abandonner un jour : c’est une passerelle. Comme les blocs parlent déjà CoddyRun, le passage à l’écriture du code se fait sans changer de vocabulaire ni d’outil. Pour tous les mots-clés, voir le langage CoddyRun.