Remerciements

Ce tutoriel est la traduction du tutoriel rédigé par Jon Schwartz, the Beginning Programmer Tutorial for KPL.
Je tiens à le remercier chaleureusement pour m'avoir autorisé à traduire ce cours.

Merci à Émilie Guittier (debug), à Cécile Muno (khany), et à Vincent Brabant (vbrabant) pour leurs corrections et leurs conseils.

Introduction : Qu'est-ce que la programmation ?

La programmation consiste tout simplement à donner des instructions à un ordinateur.

Les ordinateurs sont parfaits pour suivre des instructions. Ils font exactement ce qu'on leur demande ! Par contre, ils n'ont aucune imagination !
Par conséquent, lorsque l'on écrit un programme qui donne des instructions à un ordinateur, nous devons détailler très précisément ce que l'on souhaite qu'il fasse.

Pourquoi débuter avec KPL?

Les différents langages existants permettent à un développeur d'écrire ce que doit faire l'ordinateur de plusieurs façons possibles. Le "Kid's Programming Language", ou KPL, possède plusieurs atouts pour les débutants :

  • KPL a été soigneusement conçu pour être très accessible aux débutants,
  • KPL a été soigneusement conçu pour être le plus amusant possible à apprendre,
  • Et enfin, contrairement aux autres langages pour débutants, KPL a été conçu pour ressembler le plus possible aux langages utilisés aujourd'hui par les développeurs professionnels.

Nous avons en tête certaines maximes pleines de bon sens. L'une d'entre elles, que nous devons garder à l'esprit à propos de KPL, nous dit la chose suivante : nous apprenons à marcher avant de courir.
Programmer avec KPL correspond à l'apprentissage de la marche. Après vous être formé à KPL, votre apprentissage de la course en sera grandement facilité, quel que soit le langage que vous déciderez de "chausser" plus tard : Java, Python, Visual Basic ou C#.

Comment utiliser ce tutoriel ?

Très Important : Ce tutoriel a été écrit en se basant sur les fonctionnalités de KPL présentes dans la version fournie à partir du 10 oct. 2005. Si vous avez téléchargé KPL après le 10 octobre 2005, ou si les exemples ne fonctionnent pas comme ils le devraient quand vous les recopiez, merci de télécharger et d'installer la dernière version de KPL à partir du lien suivant :
http://www.kidsprogramminglanguage.com/download.htm.

Si vous êtes un vrai débutant, et que vous n'avez jamais fait de programmation auparavant, la meilleure manière d'utiliser ce tutoriel est de le lire et de l'étudier section par section, dans l'ordre, en prenant bien soin de comprendre chacune d'entre elles avant de passer à la suivante. L'idéal serait d'étudier ce cours sans exécuter le programme KPL, jusqu'à ce que vous arriviez sur la section du tutoriel " Mode d'emploi de KPL ". Cette manière de procéder vous permettra de vous concentrer sans que vous soyez distrait par des détails qui seront abordés à la fin de ce cours.

La programmation sur ordinateur implique que vous appreniez à penser de manière inhabituelle. En effet, les ordinateurs nous imposent d'être beaucoup plus logique, ordonné et précis que nous ne le sommes habituellement. S'habituer à cela pourra paraître difficile au premier abord, mais il vous sera facile d'y parvenir ! Et une fois que ce sera acquis, cela vous paraîtra extrêmement simple.

Un des meilleurs moyens pour apprendre cette nouvelle manière de penser est de poser des questions et d'obtenir des réponses auprès de personnes qui sont déjà coutumier de cet état d'esprit : l'idéal pour vous étant d'être encadré par une de ces personnes qui pourrait vous guider lors de cette initiation à la programmation.

OK, Montrez-moi un programme !


Image non disponible

Et voilà ! Si vous exécutez ce programme, voici ce que vous obtiendrez :

Image non disponible

Nous parlerons plus tard de cette fenêtre qui s'affiche lors de l'exécution du programme. Pour le moment, concentrons nous sur le programme lui-même :

Les lignes de code KPL que vous voyez ci-dessus proviennent d'une copie écran d'un programme KPL. Vous pouvez observer ici exactement la même chose que si vous programmiez directement vous-même avec KPL.

Première remarque, les numéros de ligne visibles à gauche du code sont uniquement informatifs. Des langages plus anciens, comme le GWBASIC, utilisent des numéros afin d'exécuter le code dans l'ordre spécifié par le programmeur. Mais KPL ne fonctionne pas ainsi. Les programmes KPL traitent une instruction à la fois, en partant de celle d'en haut et en finissant au bas du programme. Notons qu'il y a des exceptions à cela, mais elles ne seront pas abordées dans ce tutoriel.

Une autre règle importante pour programmer en KPL : chacune de vos lignes de code KPL doit se trouver sur une ligne distincte. Par exemple, le programme suivant a le même code que celui présenté ci-dessus, mais il ne fonctionnera pas puisque toutes les instructions se retrouvent sur la même ligne :

Image non disponible

Chaque langage de programmation est régi par ses propres règles, auxquelles le programmeur doit se plier, afin que l'ordinateur puisse comprendre les instructions qui lui sont données. La communication orale (entre personnes) est également soumise à de nombreuses règles pour la même raison mais nous y sommes tellement habitués que nous les respectons sans plus y faire attention. Par exemple, nous ne disons pas "Au revoir" quand nous décrochons le téléphone, pas plus que nous ne disons "Bonjour"" en raccrochant. C'est bien entendu un exemple simpliste, mais pertinent puisqu'il illustre bien ce que nous venons de dire : KPL requiert des instructions bien précises pour débuter et terminer un programme.

Tous les programmes écrits en KPL doivent commencer par une ligne du style Program HelloWorld, comme sur la ligne 1 de notre premier exemple. Ils doivent également tous se terminer par l'instruction End Program (cf. ligne 5) :

Image non disponible

Vous pouvez nommer votre programme comme vous l'entendez, mais il est bien entendu préférable de lui donner un nom en rapport avec ses fonctionnalités. Ici, HelloWorld est le nom que j'ai choisi.
Vous pouvez le modifier, comme par exemple Program MonPremierProgramme.

Method Main() est la 2ème instruction importante à connaître dans le langage KPL : Tous les programmes KPL commencent par traiter la première instruction suivant cette ligne. Regardez le code ci-dessus et vous verrez que cette instruction est Print("Hello World!").

Method Main() est en quelque sorte une façon arbitraire de définir où le programme commence à traiter les instructions. Soulignons que cette manière de faire est basée sur celle utilisée par tous les langages modernes ! Et comme vous vous y attendiez sans doute, End Method lui correspond et sert à déclarer la fin de notre traitement.

Nous ne rentrerons pas plus dans les détails concernant cette procédure Main(), mais pour le moment, le point important à retenir est qu'elle ne contient qu'une seule instruction, qui est la suivante :
Print("Hello World!").

Tout ceci pour dire que notre précédent programme ne contient en fait qu'une instruction, celle qui indique à l'ordinateur Print("Hello World!"). Résumons tout ceci :
Les lignes 1 et 5 indiquent à l'ordinateur le début et la fin du programme,
Les lignes 2 et 4 lui indiquent le début et la fin de la procédure Main().

Image non disponible

Maintenant, revenons un peu sur la fenêtre qui apparaît lors de l'exécution du programme. Vous aurez noté qu'à l'intérieur de cette fenêtre, l'ordinateur s'est bien acquitté de la seule tâche lui étant assignée dans ce programme, car il est effectivement inscrit Hello World!

Image non disponible

Et graphiquement, ça donne quoi ?!

Hello World! est le premier programme de tous les débutants, mais ce n'est sûrement pas le plus captivant ! Voyons ce que nous pouvons faire côté graphisme.

Une explication et un exemple de programme gérant des éléments graphiques doit tout d'abord débuter par la manière dont l'ordinateur gère ces éléments à l'écran. Ceux-ci utilisent un système de coordonnées qui diffère du système de coordonnées algébriques que nous apprenons tous à l'école. Mais en réalité, ce système de coordonnées graphiques peut être abordé plus facilement, en particulier parce qu'il facilite le repérage à l'écran.

Les ordinateurs utilisent un système de coordonnées (X, Y) dans lequel le côté gauche de l'écran représente X = 0, et le haut de l'écran Y = 0. Ce qui nous donne donc une origine (X = 0, Y = 0) localisée dans le coin supérieur gauche de notre écran. Un déplacement vers la droite de l'écran augmente la valeur de X, alors qu'un déplacement vers la bas augmente celle de Y.

Si vous n'êtes pas familier avec les systèmes de coordonnées graphiques, ce n'est pas évident à saisir au premier abord, jetez donc plutôt un œil à l'image ci-dessous : plusieurs points (X, Y) y sont affichés via un programme KPL :

Image non disponible

Prenez le temps d'examiner les couples de valeurs sur cette image. La première valeur de chaque couple représente la valeur de X à cet endroit de l'écran. Vous pouvez constater que cette valeur augmente bien de gauche à droite. La seconde valeur représente donc celle de Y à cet emplacement de l'écran, et cette valeur augmente bien au fur et à mesure que l'on s'éloigne du haut.

Écrivons notre premier programme graphique, et profitons-en pour voir exactement comment vous allez utiliser le système de coordonnées graphiques pour dessiner sur l'écran avec KPL. Nous allons démarrer en vous montrant le code complet de ce programme, avec l'écran résultant suite à son exécution. Nous détaillerons ensuite pas à pas le fonctionnement de chacune des étapes :

Image non disponible

Vous pouvez constater que la Method Main() contient seulement 8 instructions, des lignes 3 à 10. C'est un peu plus que dans notre premier exemple, mais j'espère que vous admettrez que c'est génial de pouvoir dessiner une étoile bleue à l'écran avec si peu d'instructions !

Notez également que ce programme commence et se termine de la même manière que le précédent, à ceci près qu'il se nomme DrawingWithThePen (NDLT : ce qui signifie "dessiner avec le crayon")

Image non disponible

Maintenant, effaçons le contenu du programme puis rajoutons-les séparément pour mieux comprendre quelles sont leur utilité :

Image non disponible

Si vous exécutez le programme après avoir rajouté les 2 premières instructions, rien ne se passe. L'instruction Color(Blue) indique à KPL que nous avons choisi la couleur bleue pour notre dessin, et PenWidth(5) permet de préciser la largeur du trait en pixel (unité de mesure de l'écran). Vous pouvez bien entendu essayer de modifier les paramètres : PenWidth(2) va par exemple tracer une ligne plus fine, alors que PenWidth(10) va tracer une ligne plus épaisse. Donc pour le moment, nous avons indiqué à KPL comment dessiner, mais nous ne lui avons encore rien demandé de dessiner. Traçons donc la première ligne de notre étoile :

Image non disponible

L'instruction suivante que nous avons ajouté est MoveTo(100, 0) : elle indique à KPL de déplacer le crayon à l'emplacement (100, 0) de notre fenêtre, ce qui représente le sommet de notre étoile. Comme KPL démarre de la position (0, 0) (le coin supérieur gauche), cette instruction aura donc pour effet de tracer la ligne horizontale que vous pouvez apercevoir en haut de la fenêtre.

La seconde instruction ajoutée est MoveTo(50, 150) : grâce à cette instruction, nous tracerons la première ligne de notre étoile. Arrêtons nous un instant sur les coordonnées (X, Y) de ces 2 points :
X est passé de 100 à 50, le crayon s'est donc déplacé vers la gauche,
Y est passé de 0 à 150, le crayon s'est donc déplacé vers le bas de l'écran.

Rajoutons encore une instruction à notre programme, pour dessiner la ligne suivante de notre étoile :

Image non disponible

L'instruction ajoutée est MoveTo(180, 50). Le programme va tracer un trait à partir du point précédent (50, 150). Avez-vous déjà vu un "télécran" - cette sorte d'ardoise magique sur laquelle on peut tracer un trait en tournant 2 boutons ? Le crayon de KPL se comporte comme un télécran informatisé. Ajoutons maintenant les lignes manquantes pour finir notre étoile :

Image non disponible

Comme vous pouvez le constater, chacune de ces 3 nouvelles instructions permet au programme de tracer 1 ligne supplémentaire. Au total, nous avons bougé le crayon 6 fois, dessiné 6 lignes, avec pour résultat une étoile, dessinée selon les instructions de notre programme KPL.

C'est un petit programme : seulement 8 instructions ! Le plus dur était de comprendre comment fonctionne le système de coordonnées (X, Y) dans KPL. Si ces notions ne sont pas encore claires pour vous, le mieux est de retourner au début de ce paragraphe et de le parcourir à nouveau. Si des incertitudes persistent, alors vous devriez essayer d'écrire vous-même votre propre version de ce programme dans KPL, et de le tester en dessinant des lignes dans plusieurs directions. Vous pouvez débuter en dessinant un triangle ou un carré ! Si vous décidez de choisir cette option, sautez directement à la section " Mode d'emploi de KPL ", afin d'obtenir les renseignements nécessaires à l'utilisation de KPL. Quand vous serez plus à l'aise avec le système de coordonnées (X, Y), vous pourrez reprendre à partir d'ici.

Il est important de consacrer assez de temps à l'étude de cette leçon, afin de bien appréhender la manière dont sont gérées les coordonnées (X, Y), car cette notion est la base de toute la programmation graphique. Les autres langages en ont une gestion similaire, donc si vous comprenez comment cela fonctionne avec KPL, vous aurez compris un concept essentiel de la programmation graphique, valable quel que soit le langage !

Nous allons ajouter un dernier détail à notre exemple, ce qui nous permettra de connaître une fonctionnalité supplémentaire du crayon de KPL :

Image non disponible

Comme vous pouvez le voir, nous avons juste changé Color(Blue) en Color(Green). Facile ! Ensuite, la première instruction ajoutée est Pen(False), juste avant le MoveTo(100, 0). Pen(False) indique juste à KPL que le ou les déplacements suivants du crayon devront se faire sans écrire. Donc quand le crayon va du point (0, 0) au point (100, 0), aucun trait n'est dessiné au dessus de l'étoile, ce qui est tout de même plus joli !

Souvenez-vous que l'ordinateur a besoin d'instructions très précises, et quand nous lui disons Pen(False), KPL arrête de dessiner quand le crayon se déplace. Que devons-nous faire alors si nous voulons que le crayon écrive à nouveau ? Il suffit de spécifier l'instruction suivante : Pen(True), et le crayon "fonctionnera" de nouveau lors de ses prochains déplacements.

En bref, l'instruction Pen(False) indique à KPL de désactiver le crayon lors de ses déplacements, alors que Pen(True) le rend actif. Un télécran ne peut pas faire cela !

Activer et désactiver le crayon vous permettra de dessiner toutes sortes d'objets, mais aussi d'en dessiner plusieurs. Voici un exemple très simple de ce que l'on peut faire grâce à cette fonctionnalité :

Image non disponible

Coder des jeux à l'aide des "Sprites"

Le paragraphe précédent concernant les possibilités de dessin avait principalement pour but de vous expliquer l'affichage de graphismes grâce au système de coordonnées (X, Y). Mais les éléments graphiques des jeux ne sont pas dessinés comme ceci ! Ils sont chargés à partir de fichiers "images" (images d'OVNI, d'astéroïde, d'elfes, etc.). KPL utilise les "Sprites", qui sont des petits fichiers images, statiques ou animés, afin de rendre cette gestion de graphique très simple !

Comme pour le dernier programme, nous allons d'abord vous montrer le programme complet, puis nous allons expliquer en détail comment tout cela fonctionne, afin que vous puissiez ensuite réécrire ce programme par vous-même.
Voici le code de notre programme KPL, qui comporte exactement 8 lignes (à l'intérieur de la Method Main()), comme son prédécesseur. Ces 8 instructions ont pour but d'afficher un OVNI au sommet de la fenêtre puis de le faire doucement atterrir en bas de cette même fenêtre que vous voyez ci-dessous :

Image non disponible

Ce programme commence et se termine comme les précédents, et comme tous les programmes, à l'exception du nom : celui-ci se nomme UFO (NDLT : UFO signifie Unidentified Flying Object, l'équivalent anglais de notre OVNI) :

Image non disponible

Voici quelques exemples de fichiers images qui sont fournis avec KPL. Vous pouvez utiliser n'importe quel fichier image avec KPL, y compris des fichiers créés par vos soins. Seules 65 images sont fournies par défaut avec KPL, en voici quelques exemples :

Image non disponible

Maintenant que nous avons eu un aperçu des fichiers que nous pouvons utiliser dans KPL, commençons à rajouter des instructions à notre programme, afin d'afficher notre OVNI en haut de la fenêtre :

Image non disponible

La première instruction ajoutée est LoadSprite( "UFO", "UFO.gif" ). Comme cela a été mentionné auparavant, le langage KPL obéit à certaines règles concernant la syntaxe des instructions. Celle concernant la procédure LoadSprite n'est pas compliquée, mais elle doit néanmoins être respectée ! LoadSprite a besoin de 2 valeurs (ou paramètres) afin de fonctionner. Le premier doit être le nom que vous souhaitez donner afin d'identifier votre image. Ici, ce sera "UFO". Et le second paramètre doit être le nom du fichier image, nom que KPL va utiliser pour retrouver le fichier correspondant, qui est "UFO.gif" dans notre cas. Chacune de ces valeurs doit être encadrée par des guillemets, et vous devez les séparer par une virgule, comme c'est le cas dans notre exemple.

Voici quelques exemples de syntaxe incorrecte qui ressemble à notre instruction de départ. J'insiste sur le fait qu'aucune des 4 instructions suivantes ne fonctionnera, car aucune d'entre elles ne respecte les règles nécessaires au bon fonctionnement de la procédure LoadSprite. Pouvez-vous retrouver les erreurs qui se sont glissées dans ces instructions ?

Image non disponible
NDLT : Le code souligné en rouge indique que KPL ne reconnaît pas votre instruction. Ce surlignage intervient systématiquement au cours de la frappe, n'y prêtez pas attention à ce moment. Par contre, il est inutile d'essayer d'exécuter un programme si ce surlignage apparaît quelque part dans votre code, il vous faudra d'abord corriger les erreurs indiquées !

LoadSprite( "UFO", "UFO.gif" ) indique à KPL de créer un nouveau sprite à partir du fichier image "UFO.gif", et nomme ce sprite "UFO".

Nous devons maintenant indiquer à KPL où faire apparaître notre OVNI à l'écran, nous allons donc utiliser l'instruction MoveSpriteToPoint( "UFO", 50, 0 ). Cette procédure MoveSpriteToPoint nécessite 3 valeurs : la première d'entre elles est le nom du sprite, qui est "UFO" puisque c'est ainsi que nous l'avons baptisé grâce à la procédure LoadSprite. La seconde est la valeur de X de notre sprite, que nous initialiserons à 50, et la troisième est la valeur de Y, que nous initialiserons à 0.

Notons tout de suite qu'il n'y a pas de guillemets autour des valeurs numériques. En règle générale, les valeurs qui sont des mots doivent être encadrées par des guillemets dans KPL, contrairement aux valeurs numériques ! Pour plus de précisions à ce sujet, vous pouvez consulter dans le KPL User Guide, le chapitre sur les types de données (Data Types).

MoveSpriteToPoint( "UFO", 50, 0 ) indique à KPL de déplacer le sprite nommé "UFO" à l'emplacement (50, 0).

Tout ce qui reste à faire est d'indiquer à KPL d'afficher le sprite. C'est l'instruction la plus facile : ShowSprite( "UFO" ). Et voilà ! Notre OVNI est apparu à l'écran à l'emplacement prévu !

C'était une explication longue et très détaillée, donc arrêtons-nous une minute pour nous convaincre que tout ceci est facile. Voici notre programme KPL, et voici le résultat obtenu lors de son exécution :

Image non disponible

Utilisation des variables et des boucles dans KPL

Il nous reste à faire atterrir notre vaisseau, en le déplaçant vers le bas de la fenêtre. Pour cela, nous allons avoir besoin de définir et utiliser notre première "variable", afin d'aborder leur utilisation dans un programme KPL.

Une variable porte bien son nom, car cela signifie que sa valeur peut changer à tout moment. C'est d'ailleurs ce qui fait son intérêt, ce que nous allons voir dans le prochain exemple.
Une variable doit être nommée avec un nom qui indique clairement la manière dont elle va être utilisée. Dans notre exemple, notre variable va être utilisée pour gérer la hauteur (donc la position sur l'axe Y) de notre OVNI, donc nous allons logiquement appeler notre variable ufoY.

Voici l'instruction permettant de déclarer une variable :

Define ufoY As Int 


Define est le mot-clé qui indique à KPL qu'une variable est à déclarer. Y est le nom que nous avons choisi pour notre variable. As Int indique à KPL que ufoY est défini en tant qu'entier. Int est l'abréviation pour Integer (Nombre Entier). Un entier permet de gérer des valeurs numériques comme -1 ou 43.
(NDLT : les entiers de KPL doivent être compris entre -2.147.483.648 à 2.147.483.647)

Nous savons donc que notre OVNI démarrera de la position (50, 0) sur notre fenêtre, car c'est l'emplacement que nous avons indiqué précédemment. Comment allons-nous le faire bouger à l'écran ? Nous allons augmenter la valeur Y de sa position : nous allons aller successivement aux positions (50, 1), (50, 2), (50, 3), (50, 4), etc. C'est à nous de décider jusqu'où il pourra aller, nous allons choisir de le faire descendre jusqu'en (50, 150).

Avez-vous bien compris notre objectif ? La valeur de X de notre ovni va rester à 50. La valeur de Y va augmenter régulièrement pixel par pixel, de 0 à 150. Il est important de bien avoir compris ce que nous souhaitons faire, avant que nous n'abordions la manière de le faire dans le programme. Donc si vous avez des hésitations sur tout ceci, n'hésitez pas à relire le paragraphe précédent.

Voici le code KPL qui permet de modifier la valeur de ufoY de 0 à 150, de 1 en 1 :

For ufoY = 1 To 150
MoveSpriteToPoint( "UFO", 50, ufoY )
Next


C'est notre première boucle (loop en anglais). C' est peut-être un nouveau concept à appréhender si vous n'avez jamais programmé auparavant, mais cela ne devrait pas vous poser trop de problèmes.

Cette boucle démarre avec la valeur de ufoY = 1. Puis nous avons précisé To 150, donc nous savons qu'elle se terminera quand ufoY aura pris la valeur 150. Le mot clé Next indique la fin de notre structure de boucle. Quand le programme atteint cette instruction Next, KPL sait qu'il est temps d'incrémenter notre variable ufoY , qui vaudra respectivement 1, puis 2, 3 … et ainsi de suite jusqu'à 149, puis 150.

Le point essentiel à retenir est que nous demandons à KPL de compter de 1 à 150 et nous voulons que KPL utilise notre variable ufoY pour savoir où nous en sommes de ce décompte.

Et que se passe t-il pendant que KPL compte ? Nous avions spécifié que nous voulions faire atterrir notre OVNI, non ?
C'est ce qu'est chargée de faire l'instruction MoveSpriteToPoint( "UFO", 50, ufoY ).

Et comme cette instruction est à l'intérieur de notre boucle For, KPL va exécuter cette instruction à chaque passage dans la boucle, de ufoY = 1 à ufoY = 150. C'est l'intérêt principal de ce mécanisme, bien entendu : compter de 1 à 150 n'est pas un but en soi, mais si vous pouvez faire quelque chose d'utile à chaque fois que vous comptez, alors profitons-en ! Examinons en détail ce qui se passe :

For ufoY = 1 To 150
MoveSpriteToPoint( "UFO", 50, ufoY )
Next


Nous avons déjà eu l'occasion de parler du fonctionnement de l'instruction MoveSpritetoPoint : KPL déplace le sprite "UFO" à l'emplacement (X, Y) spécifié. Qu'est-ce qui a changé ici ? Avant, nous avions déplacé notre OVNI à la position (50, 0). Que se passe-t-il si nous faisons ceci à l'intérieur d'une boucle, et que nous utilisons notre variable ufoY à la place d'une valeur fixe ? Au premier passage dans la boucle, ufoY = 1, puis au second passage, ufoY = 2, puis ufoY = 3, etc. jusqu'à la valeur ufoY = 150. Donc lors du premier passage dans la boucle, KPL exécute l'instruction suivante :

MoveSpriteToPoint( "UFO", 50, 1 )


Puis lors du second passage, ufoY = 2, donc KPL exécute cette instruction :

MoveSpriteToPoint( "UFO", 50, 2 )


Et ainsi de suite, jusqu'à 150 :

MoveSpriteToPoint( "UFO", 50, 3 )
MoveSpriteToPoint( "UFO", 50, 4 )
MoveSpriteToPoint( "UFO", 50, 5 )
...
MoveSpriteToPoint( "UFO", 50, 150 )


A chaque déplacement, l'OVNI descend d'un pixel, comme nous le souhaitions !

C'est votre première variable, et votre première boucle, avec exécution d'une instruction à l'intérieur de cette boucle ! Ce sont des concepts de programmation importants, donc encore une fois, n'hésitez pas à revenir sur vos pas si tout n'est pas clair .

Il ne nous reste plus qu'à ajouter un petit détail à notre programme :

Image non disponible

L'instruction fraîchement ajoutée est Delay ( 10 ), dans notre boucle For. Pour quoi faire ? Parce que les ordinateurs comptent très très très vite ! Compter de 1 à 150 prend moins de temps à un ordinateur qu'un battement de cil. Hé oui, les ordinateurs sont aussi rapides que cela ! Donc si nous souhaitons vraiment voir notre OVNI se poser, nous allons demander à l'ordinateur de ralentir un peu pendant son décompte. Delay ( 10 ) lui indique donc d'attendre un très court instant avant chaque déplacement de notre OVNI.

Vous savez que pour compter les secondes à la même vitesse que la pendule, il vaut mieux dire " une seconde, deux secondes, 3 secondes, etc." plutôt que "un, deux, trois, etc.", pour compter moins vite ? C'est exactement ce que nous venons de faire. Avec Delay ( 10 ), nous ralentissons le décompte de KPL. Quand vous travaillerez sur ce programme dans KPL, essayez de modifier la valeur indiquée puis exécutez le programme pour voir la différence. Vous pouvez essayer Delay ( 2 ), puis Delay ( 100 ). Cela change la vitesse d'atterrissage de notre OVNI, n'est-ce pas ?

Il nous a fallu pas mal de pages pour détailler le fonctionnement de ce petit programme, ce qui pourrait laisser à penser qu'il est plus compliqué qu'en réalité. Mais une fois que vous aurez pris l'habitude de programmer en KPL, ces quelques instructions que nous venons de voir ne vous prendront pas longtemps à taper. Et graphiquement, vous reconnaîtrez que le résultat est déjà sympa avec juste ces quelques lignes.

Mode d'emploi de KPL

Très Important : Ce tutoriel a été écrit en se basant sur les fonctionnalités de KPL présentes dans la version fournie à partir du 10 oct. 2005. Si vous avez téléchargé KPL après le 10 octobre 2005, ou si les exemples ne fonctionnent pas comme ils le devraient quand vous les recopiez, merci de télécharger et d'installer la dernière version de KPL à partir du lien suivant :
http://www.kidsprogramminglanguage.com/download.htm.

NDLT : les copies d'écran proviennent de la version en langue française. Suite à l'installation de KPL, si vous souhaitez une interface traduite en français, vous devrez également télécharger le fichier de traduction ici (il se nomme KPLFrance.zip). Une fois le téléchargement terminé, décompressez-le : vous obtiendrez un fichier nommé StringResources.xml. Il ne vous reste plus qu'à remplacer le fichier par défaut de l'application qui porte le même nom (par défaut, il se trouve dans le répertoire "C:\Program Files\Morrison Schwartz\Kids Programming Language") par votre nouveau fichier, et vous pourrez alors exécuter KPL en français.

Nous supposerons dans ce chapitre que KPL est déjà installé sur votre ordinateur, pour nous concentrer sur la prise en main de l'interface de KPL. Exécutez le programme KPL à partir du raccourci ou du menu correspondant. Quand le programme démarre, il a l'aspect suivant :

Image non disponible

KPL affiche un nouveau document (programme) vierge, appelé Untitled.kpl dans le cadre "Éditeur de code". Les lignes en vert sont des commentaires, elles permettent de documenter votre programme, mais ne peuvent contenir aucune instruction : elles sont ignorées lors de l'exécution. Les lignes de commentaires commencent par un double slache : //.

Vous trouverez de nombreux commentaires dans les programmes fournis en exemple, et au fur et à mesure de votre apprentissage, vous prendrez l'habitude d'en ajouter à vos propres programmes. Les commentaires permettent non seulement à un autre programmeur de mieux comprendre votre programme, mais aussi à vous rafraîchir la mémoire quand vous relisez votre propre code que vous avez écrit il y a quelque temps …

L'éditeur de code a des fonctionnalités similaires à la plupart des traitements de texte. Prenez un moment pour vous familiariser avec les menus et les barres de boutons. Si vous laisser le pointeur de la souris sur une icône sans bouger, un texte d'aide (ToolTipText en anglais) apparaîtra pour nommer la fonctionnalité correspondante.

Nous allons nous occuper de recréer les 3 programmes vus en exemple dans les chapitres précédents. Commençons par effacer tout le code présent dans le fichier Untitled.kpl. Pour cela, vous pouvez procéder ainsi : cliquer sur le menu Édition puis sur Sélectionner tout. Vous verrez alors le code sélectionné comme dans l'illustration ci-dessous. A ce moment, vous pourrez soit utiliser le bouton Suppr de votre clavier, ou bien le sous-menu Couper dans le menu Édition. Tout le code sélectionné sera alors effacé de notre éditeur.

Image non disponible

Une fois cette opération terminée, vous n'avez plus qu'à recopier le code de notre premier programme, comme ceci :

Image non disponible

Souvenez-vous que les ordinateurs sont très exigeants au niveau de la syntaxe, donc faites attention à ne pas faire d'erreur de frappe. Une seule petite erreur, et le programme pourrait ne pas fonctionner. Vous pouvez utiliser la touche TAB (Tabulation) pour indenter votre code comme ci-dessus. Et n'hésitez pas non plus à laisser des lignes blanches (via la touche Entrée). L'indentation et l'aération du code sont facultatives, mais cela améliore grandement la lisibilité d'un programme. C'est plus agréable pour vous et éventuellement pour les autres personnes qui vous reliront.

Après avoir recopié le programme, cliquez sur le bouton vert contenant la flèche Image non disponible, ou appuyez sur F5 pour exécuter le programme. Si votre code est correct, vous verrez alors apparaître un fenêtre qui ressemblera à celle-ci :

Image non disponible

Et voilà ! Vous avez passé la première étape avec succès ! Bien entendu, c'est juste un très petit programme, mais il faut bien débuter !

Si KPL ne comprend pas le code que vous avez tapé, il vous retournera un erreur similaire à ceci :

Image non disponible
(NDLT : ici, l'utilisateur a tapé "Prent" ou lieu de "Print")

Si c'est votre cas, cliquer sur OK, et relisez soigneusement votre code en le comparant à notre exemple ci-dessus, une erreur a dû se glisser dedans. Quand vous l'aurez trouvé, corrigez-la et vous pourrez alors exécuter ce programme.

Tous les programmeurs font des erreurs dans leur code, donc ne vous inquiétez pas si c'est votre cas, personne n'est parfait. Quand cela arrive, restez patient et examinez soigneusement votre code. C'est la meilleure manière de trouver ce qui ne va pas et de le corriger.

Une fois que votre programme fonctionne, cliquez sur le menu Fichier, Enregistrer et nommer votre programme HelloWorld comme ceci :

Image non disponible

Une fois l'enregistrement terminé, vous pouvez vérifier que cette opération s'est bien passée :

Image non disponible

Maintenant que votre programme est enregistré sur le disque, vous pouvez y accéder en double-cliquant sur le fichier correspondant, dans l'explorateur de fichier présent à droite de notre fenêtre. Quand vous rouvrirez votre programme, il apparaîtra probablement comme sur l'illustration ci-dessous. N'ayez pas peur, le code n'a pas été effacé.

Image non disponible

Cliquez sur la petite icône + de la ligne 3, et le code présent dans la procédure Main va réapparaître comme vous l'avez tapé. Cliquez maintenant sur l'icône -, et il sera de nouveau dissimulé. Cette fonctionnalité n'est pas très intéressante sur un si petit programme, mais quand vous commencerez à en écrire de plus conséquents, vous vous apercevrez bien vite qu'enrouler et dérouler le code de cette manière est fort pratique.

Après avoir sauvé HelloWorld, déroulez de nouveau le menu Fichier, Nouvelle fenêtre Document et vous verrez de nouveau apparaître le programme vierge Untitled.kpl. Effacez tout le code comme précédemment, puis recopiez le code de notre second exemple :

Image non disponible

Une fois le codage terminé, il ne vous reste plus qu'à exécuter et sauf erreur, vous devriez voir apparaître notre étoile bleue. Excellent !

Souvenez-vous que si vous rencontrez une erreur, il vous suffit de prendre quelques secondes afin de comparer votre code à celui de cette page. Une fois l'erreur rectifiée, ça fonctionnera sans soucis.

Et n'oubliez pas d'enregistrer votre nouveau programme !

Vous pouvez modifier ce programme à votre guise. Quelle autre couleur souhaiteriez-vous utiliser ? Comment dessiner une étoile plus grande ou plus petite ? Pourquoi ne pas vous lancer dans le dessin d'un triangle, ou bien d'un carré ?

Après avoir enregistré votre programme DrawingWithThePen, cliquez encore sur le menu Fichier, Nouvelle fenêtre Document afin de commencer notre 3° programme. Ré-effacez tout le code, et recopiez notre exemple de notre programme UFO :

Image non disponible

Une fois terminé, il ne vous reste plus qu'à le tester en procédant à l'exécution.

En cas d'erreur, même procédure que d'habitude, on cherche la différence …

Et n'oubliez pas de sauvegarder ce programme quand vous aurez terminé.

Et pour pratiquer un peu, voici quelques sujets d'exercices très simples :

  • Pouvez-vous faire descendre l'OVNI plus bas ?
  • Pouvez-vous le faire voler de gauche à droite plutôt que de haut en bas ?
  • Un tout petit peu plus corsé : pouvez-vous déplacer l'OVNI en diagonale (vers la bas et la droite simultanément) ?

Et Après ?

Si tout ce qui précède vous paraît clair, la toute première chose à faire ensuite est de passer aux exemples fournis dans le répertoire Learning Programs. Il y a là 6 programmes d'apprentissage auxquels vous pouvez vous attaquer sans crainte (NDLT : ces 6 programmes sont en double, une version commentée et une version sans aucune explication …), l'idéal étant de les aborder dans l'ordre. En fait, les 2 premiers sont assez similaires aux programmes déjà abordés dans ce tutoriel. Peut-être que d'autres programmes d'apprentissage seront disponibles quand vous lirez ces lignes : ils seront soit copiés lors de l'installation, soit téléchargeables sur la page www.kidsprogramminglanguage.com.

Vous pourrez également télécharger le KPL User Guide for Teachers (en anglais), qui est disponible sur la même page. Il n'est pas destiné à servir de tutoriel pour les débutants, mais il vous sera certainement utile quand vous serez à même de créer vos propres programmes.

Quand vous aurez fait le tour des programmes d'apprentissage, je vous conseille de vous intéresser à Kplong.kpl et à NumberGuess.kpl. Vous les trouverez dans le répertoire Games. Ce sont des programmes plus volumineux, mais aussi des jeux entièrement fonctionnels. Si vous avez intégré les concepts présents dans ce tutoriel et dans les 6 programmes d'apprentissage, ces programmes ne devraient pas vous poser de problèmes.

Les liens qui suivent vous permettront d'accéder au forum de KPL,
ils sont aussi présents sur la page www.kidsprogramminglanguage.com :

Cool KPL programs

Kids' Discussion of KPL

Parents' discussion of KPL

Teachers' discussion of KPL

KPL Questions and Answers

International Language Versions of KPL

Si vous avez des questions ou besoin d'un peu d'aide sur KPL, vous pourrez poster vos messages sur le forum Questions and Answers : Les forumeurs déjà présents pourront vous venir en aide ;).
NDLT : afin d'améliorer la lisibilité du forum, si vous n'êtes pas à l'aise avec l'anglais et donc que vous postez en français, signalez-le par un tag [FR] dans le titre.
NDLT2 : Vous serez également les bienvenus sur le forum Autres langages et Outils de www.developpez.com ! Dans ce cas, pensez à spécifier un tag [KPL] dans votre titre.

Téléchargements

Le tutoriel au format Word (24 pages, 1057 Ko) :
INITIATION_KPL.doc (FTP) ou INITIATION_KPL.doc (HTTP)

Le tutoriel au format pdf (38 pages, 1031 Ko) :
INITIATION_KPL.pdf (FTP) ou INITIATION_KPL.pdf (HTTP)