Programmons avec Phrogram

Transcription

1 Programmons avec Phrogram Guide pour le vrai débutant Par Jon Schwartz Traduction Philippe Tanguy Mise à jour : Juin 2007 Site Web : Programmons avec Phrogram Page 1/42

2 Programmons avec Phrogram Table des matières Programmons avec Phrogram Page 2/42

3 Préface: Comment utiliser ce tutoriel? Ce tutoriel a été conçu pour des programmeurs vraiement débutants. Il se compose de trois chapitres eux mêmes divisés en trois sections. La section de base vous donnera toutes les informations dont vous avez besoin pour comprendre chaque sujet au niveau débutant et vous fournira suffisamment d aide pour vous amener à un niveau de programmation supérieur dans la section «sautons dans le bain». Cette section permet d acquérir des connaissances des concepts de programmation et peut être utilisée même si vous n avez pas accès à un ordinateur ou à Phrogram. La section «sautons dans le bain» vous donnera des indications pour utiliser Phrogram et tester vos connaissances acquises dans la section de base. La section plongeons au Coeur du système vous apprend des notions plus poussées et plus détaillées. Certaines parties de cette section sont constituées uniquement d informations tandis que d autres vous incitent à expérimenter et mettre en pratique vos connaissances acquises dans Phrogram. Tout au long du tutoriel, vous trouverez des indications dans des zones de texte vertes. Ces indications mettent en évidence des idées importantes et quelquefois un peu difficiles à assimiler par le programmeur débutant. Retenez bien : Vous les trouverez à la fin de la description de concepts importants. Ils contiennent un résumé des idées clés que vous venez d apprendre. Si vous êtes un vrai débutant et que vous n avez jamais fait de programmation, la meilleure façon d utiliser ce tutoriel est de l étudier dans l ordre des sujets présentés. Soyez sûr(e) d avoir bien compris une notion avant de passer à la suivante. Vous pouvez travailler avec ce tutoriel sans disposer de Phrogram ou de votre ordinateur en focalisant votre attention sur la section de base. Si vous disposez de Phrogram et d un ordinateur, la section «sautons dans le bain» vous permettra de renforcer les notions étudiées dans la section de base. La section «plongeons au cœur du système» vous permettra quant à elle d étendre votre champ de connaissances et d améliorer votre technique. Apprendre à programmer c est apprendre à penser d une façon différente. Programmons avec Phrogram Page 3/42

4 Les ordinateurs nous demandent d être beaucoup plus logiques, ordonnés et précis que nous ne le sommes normalement. Apprendre à penser ainsi peut être difficile au début mais vous y arriverez! Et dès que vous avez compris ça, ça devient facile et vous procure beaucoup de plaisir! Pour compléter l apprentissage par l expérimentation, il peut être très profitable de poser des questions à quelqu un qui s y connaît déjà en programmation. Essayez donc de penser à quelqu un qui pourrait vous aider à travailler avec ce tutoriel pour Phrogram. Une autre façon ludique de travailler est de trouver un partenaire qui apprendra lui aussi. Le travail en équipe permet de profiter des forces de chacun de ses membres et d apprendre plus rapidement et avec encore plus de plaisir. Programmons avec Phrogram Page 4/42

5 Chapitre 1 : Introduction: Qu est-ce que la programmation? Section de base 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 PHROGRAM? Les différents langages existants permettent à un développeur d écrire ce que doit faire l ordinateur de plusieurs façons possibles. PHROGRAM, possède plusieurs atouts pour les débutants : PHROGRAM a été soigneusement conçu pour être très accessible aux débutants, PHROGRAM a été soigneusement conçu pour être le plus amusant possible à apprendre, Et enfin, contrairement aux autres langages pour débutants, PHROGRAM 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 PHROGRAM, nous dit la chose suivante : nous apprenons à marcher avant de courir. Programmer avec PHROGRAM correspond à l apprentissage de la marche. La façon la plus facile d apprendre la programmation est de le faire avec Phrogram Et tous ceux qui souhaitent programmer des choses amusantes comme des animations ou des jeux découvriront que Phrogram permet tout cela. Après vous être formé à PHROGRAM, 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#. Phrogram ressemble beaucoup à ces autres langages et à leurs environnements de programmation, mais Phrogram est beaucoup plus amusant!!! Programmons avec Phrogram Page 5/42

6 OK, Montrez-moi un programme! Lorsque des programmeurs créent un programme, ils écrivent des instructions que l ordinateur devra suivre dans un langage spécifique. Voici, ci-dessous les instructions écritent dans le langage Phrogram permettant de faire écrire par l ordinateur les mots «hello world» sur l écran : Voilà, c est tout! Lorsque vous lancez l exécution du programme, voici ce que vous voyez : Analysons ce programme : Les lignes de code que vous voyez ci-dessus proviennent d'une copie écran d'un programme PHROGRAM. Vous pouvez observer ici exactement la même chose que si vous programmiez directement vous-même avec PHROGRAM. 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 PHROGRAM ne fonctionne pas ainsi. Les programmes PHROGRAM 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. Programmons avec Phrogram Page 6/42

7 Une autre règle importante pour programmer en PHROGRAM : chacune de vos lignes de code PHROGRAM 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 : 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 : PHROGRAM requiert des instructions bien précises pour débuter et terminer un programme. Tous les programmes écrits en PHROGRAM 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) : 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. Retenez bien : Tout programme doit commencer par Program UnNom et se terminer par End Program. N oubliez pas que le nom du programme doit être un seul mot et que les espaces ne sont pas permis. La bonne nouvelle c est que le vocabulaire de l ordinateur n est pas très étendu et que vous pouvez faire des choses très puissantes avec juste quelques mots clés. Voyons à présent quelques uns des autres mots utilisés par les programmes : Method Main() est le point de départ pour toutes les actions d un programme Phrogram : Tous les programmes PHROGRAM commencent par traiter la première instruction suivant cette ligne. 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! End Method est le mot réservé qui indique à l ordinateur d arrêter l exécution des instructions comprises dans cette méthode. Dans notre exemple, à la ligne 5, l expression End Method définit la fin de la méthode Main(). Notez l indentation du texte sur le lignes 2 et 4. Elles sont alignées, mettant bien en évidence entre elles la ligne 3. Je suis sûr que vous avez déjà Programmons avec Phrogram Page 7/42

8 constaté l indentation des lignes 1 et 5 et que vous vous êtes dit que l expression End Program allait de paire avec l expression Program de la ligne 1. Eh bien, vous avez raison! Voyez comme c est facile! En observant les indentations, vous pouvez aisément localiser le début et la fin des différentes méthodes utilisées dans le programme ainsi que les différents segments de code que vous apprendrez plus tard. Print("Hello World!") est la seule instruction de notre programme restant à analyser. Retenez-bien : Method Main() signale le point de départ d où partent toutes les actions faites par un programme Phrogram. La seule ligne, dans ce premier programme, qui écrit quelque chose est 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 Method Main(). Souvenezvous que c est ici que commence l exécution du programme. Et la ligne 3 demande à l ordinateur d écrire Hello World! à l écran. 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! La fenêtre de programme Phrogram ajoute le mot stopped dans la barre de titre pour indiquer que l exécution du programme est terminée. Pour fermer cette fenêtre cliquer sur. Programmons avec Phrogram Page 8/42

9 Sautons dans le bain Voici une occasion pour vous d essayer Phrogram, mais vous pouvez sauter cette section si vous ne disposez pas de Phrogram ou bien que vous n avez pas d ordinateur sous la main. Même si vous ne pouvez pas tester maintenant, vous pouvez tout de même avoir envie de lire cette section afin de mieux comprendre l environnement de programmation de Phrogram. Dans cette section, nous supposons que vous avez déjà téléchargé et installé Phrogram sur votre ordinateur en suivant les indications trouvées sur le site Web (). Lancez Phrogram en cliquant sur l icône placée sur votre bureau ou en cherchant le lien dans la liste des programmes via le menu démarrer. Lorsque le programme est lancé vous obtenez une fenêtre comme celle ci : (si vous avez installé les paramètres de la version française les menus sont libellés en français). Programmons avec Phrogram Page 9/42

10 Regardons les diverses parties de la fenêtre : La large partie rectangulaire de cette fenêtre contenant les mots untitled.kpl est appelée éditeur de code. Le programme appelé untitled.kpl est ici ouvert dans Phrogram dans la fenêtre de l éditeur de code. C est la partie de l environnement Phrogram qui sert à l écriture du code des programmes. Le programme qui est présenté ici ne fait rien pour le moment, mais vous reconnaissez quelques une des lignes comme Program MyNewProgram, Method Main(), et les éléments End. Notez aussi les numéros de lignes à gauche de la fenêtre. Vous vous souvenez que ces numéros sont là pour vous aider dans la programmation mais ne font pas réellement partie du code du programme. Les lignes de code en vert sont appelées commentaires et fournissent de l information aux lecteurs du programme, mais elles ne contiennent pas d instructions Phrogram pouvant être exécutées par l ordinateur. L ordinateur ignore totalement ces commentaires lorsque le programme se déroule. Les commentaires commencent en général par deux barres obliques //. Vous remarquerez qu il y a beaucoup de commentaires dans les programmes exemples qui vous seront proposés dans ce tutoriel. Par la suite, vous apprendrez vous aussi à commenter votre propre code. Les commentaires aident les autres à comprendre vos programmes mais ils vous servent également à vous souvenir des astuces ou de ce à quoi vous pensiez lorsque vous avez écrit votre programme. C est utile quand on revient sur un programme écrit il y a longtemps! L éditeur de programme de Phrogram dispose de nombreuses fonctionnalités que vous trouvez aussi dans votre traitement de texte favori. Prenez un moment pour examiner les menus et la barre d outils en haut de la fenêtre Phrogram. Si vous déplacez le curseur de votre souris sur la barre d outils icônes, des messages d information vous sont présentés. Sur le côté droit de la fenêtre, vous voyez un panneau appelé Files (fichiers en français). Il s agit de l explorateur de fichiers. Il y a beaucoup de sous répertoires contenant des programmes déjà écrits que nous explorerons plus tard dans les sections suivantes de ce tutoriel. Vous y verrez aussi apparaître vos propres programmes après les avoir créés et sauvegardés. En bas de la fenêtre Phrogram, vous verrez différents onglets. En cliquant dessus, vous ouvrirez plusieurs,panneaux. Ne vous en souciez pas pour le moment. Nous y reviendrons lorsque nous aborderons des concepts de programmation plus avancés. Le panneau en bas de la fenêtre est intitulé errors. C est un espace pour les messages destinés au programmeur ; Si des erreurs apparaissent dans le programme, l ordinateur utiliser cet espace pour essayer d expliquer au mieux l erreur et la façon de la résoudre. Programmons avec Phrogram Page 10/42

11 Concentrons notre attention à présent sur le programme HelloWorld que nous avons étudié dans la section de base. Commençons par nous débarrasser du code contenu dans le programme untitled1.kpl présent dans l éditeur de code. Pour cela, cliquez sur le menu Edition et ensuite Sélectionner tout. Le code sera alors sélectionné en vidéo inverse comme ci-dessous. Lorsque le code est sélectionné ainsi, vous pouvez vous en débarrasser en appuyant sur la touche Suppr du clavier ou sélectionné, dans le menu Edit l item Cut. Retenez bien : Il y a plusieurs panneaux dans la fenêtre de Phrogram. Dans ce tutoriel, vous serez amené à utiliser l éditeur de code, l explorateur de fichier ainsi que les barres d outils et de menu. Programmons avec Phrogram Page 11/42

12 Lorsque le code a été efface, tapez le code de votre premier programme comme indiqué cidessous : Utilisez l indentation et des lignes vides pour rendre votre code plus lisible. Ajoutez de nombreux commentaires qui aideront à se souvenir de vos trucs de programmation. Rappelez vous que les ordinateurs sont très précis. Donc, essayez de recopier le program Phrogram exactement comme dans la figure ci-dessus. Il est très probable qu il ne fonctionnera pas si vous recopiez le code différemment. Vous pouvez utiliser la touche de TABulation pour indenter le code comme ci-dessus. Utilisez la touche ENTREE pour passer à la ligne. Vous pouvez aussi utiliser cette touche pour créer une ligne vide. En insérant des lignes vides dans le texte de votre programme, vous le rendrez plus lisible. Il vous sera ainsi plus facile de retrouver une ligne particulière. L indentation ou l utilisation de lignes vides n est nullement obligatoire mais cela rendra votre code plus lisible et compréhensible par d autres utilisateurs ou par vous-même! Après avoir fini de saisir le code de votre programme, cliquez sur l icône représentant une flèche verte ou pressez la touche F5 pour lancer l exécution. Avant que Phrogram ne lance l exécution de votre programme, il vous demandera de sauvegarder votre code. Une fenêtre de dialogue Sauvegardez votre nouveau programme apparaît à l écran. Par défaut, le nom du programme est proposé comme nom de fichier. La liste des fichiers et répertoires que vous avez vue dans l explorateur de fichiers apparaît à nouveau ici. Pour le moment, acceptez ces paramètres par défaut et cliquez sur Enregistrer. Nous verrons plus tard comment créer vos propres répertoires pour mieux organiser votre travail. Programmons avec Phrogram Page 12/42

13 Maintenant, si vous avez recopié le code correctement vous devriez voir la fenêtre suivante (un peu plus grande dans la réalité) : Les programmes sont sauvegardés par défaut dans le répertoire My Phrograms Files placé dans votre répertoire Mes Documents. Vous pourrez plus tard organiser vos fichiers. Ca y est! Vous êtes désormais un programmeur! OK, c est un tout petit programme, mais tout de même, vous l avez entré dans le système et vous l avez fait fonctionner!!! Pour fermer la fenêtre de programme, cliquez sur l icône orange (comme icône éjection sur les lecteurs DVD) de la barre d outils. Aprsè que vous aurez enregistré votre programme et fermé la fenêtre d exécution, deux indications à l écran vous confirment que le programme est bien enregistré sur le disque (voir image ci-dessous). C est toujours une excellente idée de sauvegarder fréquemment le code de votre programme à mesure que vous le modifiez. Cliquez simplement sur l élément Sauvegarder du menu Fichier. Programmons avec Phrogram Page 13/42

14 Maintenant que votre programme est enregistré, vous pouvez le recharger en mémoire en doublecliquant sur son nom dans l explorateur de fichiers sur la partie droite de l écran. Lorsque vous ouvrirez votre programme plus tard, il est fort probable qu il apparaisse comme sur la figure ci-dessous. Ne paniquez pas! votre code est toujours là! Cliquez sur la petite icône + que l on voit à la ligne 2. La méthode Main se développera et vous reverrez votre code comme vous l avez saisi. Cliquez ensuite sur l icône et le code sera à nouveau condensé. Cette fonctionnalité n est certes pas très utile pour un programme si simple mais vous verrez qu il peut être utile de condenser certaines parties de code dans les longs programmes. Si vous tentez de lancer l exécution de votre programme mais ne pouvez pas cliquer sur, cela indique que vous n avez pas fermé la fenêtre de la dernière exécution de votre programme.réduisez la taille de la fenêtre Phrogram pour accéder à la fenêtre du programme en cours d exécution et fermez la en utilisant l icône. Vous pourrez alors lancer l exécution de votre code. Les erreurs sont inévitables! Phrogram vous fera savoir s il ne comprend pas le code que vous avez saisi. Dans l éditeur de code, changez le mot Print par Prent. Phrogram soulignera alors en rouge la partie de code qu il ne Programmons avec Phrogram Page 14/42

15 comprend pas. Placez la souris sur cette ligne rouge ondulée et vous verrez apparaître une fenêtre disant Error: Method not found ce qui signifie erreur : méthode non trouvée. Comme je vous l ai déjà dit, les ordinateurs sont des machines très précises et ne comprennent que le vocabulaire qu ils connaissent. L ordinateur comprend ce que vous dites lorsque vous entrez Print (écrit) mais ne comprend rien si vous entrez Prent! Les erreurs accidentelles sont appelées Bug. Vous en ferez beaucoup en tant que programmeur débutant! Il vous faudra donc développer un talent de débuggeur! Si vous rencontrez une erreur sur n importe lequel des exemples utilisés dans ce tutoriel, comparez attentivement le code que vous avez tapé et le code exemple. Lorsque vous repérez une différence, effectuez la correction et la ligne rouge ondulée disparaîtra. Vous pourez alors exécuter votre programme. Tous les programmeurs font des erreurs dans leur code. Alors, ne soyez pas déçu ou exaspéré! Lorsque vous constatez une erreur, restez calme et examinez votre code avec précision. C est la bonne attitude à avoir pour trouver et corriger les erreurs. Plongeons au Coeur du système Voici une bonne occasion d approfondir vos connaissances en programmation. Vous pouvez passer cette section si vous le voulez et aller directement à la section suivante. Il y a beaucoup de choses à apprendre au sujet de Phrogram. Une des meilleures façons de la faire est de tester les différents menus proposés par l interface. Vous constaterez que si certains menus sont purement spécifiques à la programmation, d autres existent dans toutes les applications Windows. Vous pouvez aussi utiliser l aide utilisateur Phrogram accessible dans le menu Aide. Lorsque «options avancées» du menu Vues est sélectionnée : Lorsque «options avancées» du menu Vues n est pas sélectionnée : La barre d outils de Phrogram est une barre d outils standard Windows, incluant des bulles d aide contextuelle lorsque vous passez la souris sur une icône. Les Programmons avec Phrogram Page 15/42

16 fonctions des différentes icônes sont décrites dans le tableau ci-après. Notez que les différentes icônes peuvent être désactivées selon le contexte. Par exemple, si aucun programme Phrogram n est ouvert dans l éditeur de code, la plupart des icônes de la barre d outils sont grisées et donc désactivées puisque toutes les actions correspondant à ces icônes ne peuvent agir que sur un programme ouvert. Les éléments de la barre d outil marqués de deux étoiles ** ne sont accessibles que lorsque «options avancées» est sélectionné dans le menu Vues. Fonction Icône Explication Nouveau programme. Crée un contenant de programme Phrogram parfaitement fonctionnel qui peut être compilé et lancé mais qui ne produit rien tant que du code n a pas été fourni. On peut aussi accéder à cette fonction par Ctrl+N. Ouvrir un programme existant. Ouvre une boite de dialogue permettant à l utilisateur de sélectionner un programme sur le disque. On peut aussi accéder à cette fonction par Ctrl+O. Sauvegarder. Sauvegarder tous les programmes. Imprimer la source du programme. Couper le texte sélectionné dans le presse-papier. Copier le texte sélectionné dans le presse-papier. Coller le texte du pressepapier à la position du curseur. Chercher un texte Sauvegarde sur disque toutes les modifications apportées au programme courant sélectionné dans l éditeur de code. On peut aussi accéder à cette fonction par Ctrl+S. Sauvegarde sur disque tous les programmes ouverts dans l éditeur de code. On peut aussi accéder à cette fonction par Ctrl+Shift+ S. Lance un dialogue Windows standard pour l impression du code du programme sélectionné dans l éditeur de code. On peut aussi accéder à cette fonction par Ctrl+P. Coupe le texte sélectionné dans l éditeur de code et le place dans le presse-papier windows. On peut aussi accéder à cette fonction par Ctrl+X. Copie le texte sélectionné dans l éditeur de code et le place dans le presse-papier windows. Le texte n est pas retiré du fichier d origine. On peut aussi accéder à cette fonction par Ctrl+C. Colle le texte contenu dans le presse-papier à la position du courante du curseur. On peut aussi accéder à cette fonction par Ctrl+V. Se référer à la description de la boite de Programmons avec Phrogram Page 16/42

17 Remplacer Défaire la dernière modification. Refaire Démarrer le programme Pas à pas : entrer Pas à pas : exécuter Pas à pas : sortir de la méthode actuelle. dialogue décrite ci avant dans le menu Vues. On peut aussi accéder à cette fonction par Ctrl+F. Se référer à la description de la boite de dialogue décrite ci avant dans le menu Vues. On peut aussi accéder à cette fonction par Ctrl+H. Revenir à la situation avant la dernière modification de texte dans l éditeur de code. S il n y a pas de modifications accessible par cette icône, elle est grisée. Cette commande est utilisable plusieurs fois consécutivement ; à chaque fois qu elle est utilisée on revient un pas en arrière jusqu à retrouver l état du code à l ouverture de Phrogram. On peut aussi accéder à cette fonction par Ctrl+Z. Annule la dernière action faite par l icône ou la fonction «défaire la dernière modification». Cette commande est utilisable plusieurs fois consécutivement ; à chaque fois qu elle est utilisée on revient un pas en arrière. Cette icône est grisée s il n y a pas d annulation possible. La façon la plus rapide de démarrer un programme est d appuyer sur la touche F5. La fonction vérifie si le code du programme contient des erreurs. Si ce n est pas le cas, le programme démarre. Le panneau de messages indique les messages de compilation. Si ce panneau n est pas ouvert, cette fonction l ouvre. Cette commande n est accessible que lorsque Phrogram est arrêté à un point d arrêt (signet). Si l instruction courante est une fonction ou une méthode, le débogueur Phrogram entre dans cette méthode ou fonction et s arrête à la première instruction. Cette instruction devient l instruction courante. Si l instruction courante Phrogram n est ni une fonction ni une méthode, l instruction est exécutée et le débogueur avance à l instruction suivante. Cette commande n'est disponible que lorsque Phrogram est arrêté à un signet. Si l'instruction courante est une méthode ou une fonction le débogueur Phrogram entre dans cette méthode ou fonction et s'arrête à la première instruction. Si instruction courante Phrogram n'est ni une fonction ni une méthode de l'instruction est exécutée et le débogueur avance à l'instruction suivante. Cette commande n'est disponible que lorsque Phrogram est arrêté à un signet. Lorsque cette commande est sélectionnée Phrogram exécutera le reste des instructions de la fonction ou de la méthode et le débogueur Programmons avec Phrogram Page 17/42

18 Commenter les lignes sélectionnées. ** Dé-commenter les lignes sélectionnées. ** Réduire l indentation des lignes sélectionnées. Augmenter l'indentation des lignes selectionnée Ajouter (ou enlever) un signet sur la ligne sélectionnée ** sortira de cette fonction ou de cette méthode et s'arrêtera sur l'instruction immédiatement suivante. cette fonction permet de faire en sorte que les lignes sélectionnées dans l'éditeur de code soient considérées comme des lignes de commentaires. Elles ne sont donc plus prises en compte lors de la compilation du programme. Ceci est réalisé en plaçant les caractères // au début de la ligne. Fonction inverse de la fonction précédente. Cette fonction diminue indentation du texte sélectionné d'une valeur de tabulation. Si le texte sélectionné est déjà tout à fait à gauche, cette commande reste sans effet. Cette fonction augmentait l'indentation du texte sélectionné de la valeur d'une tabulation. Ajoute ou retire un signet sur la ligne courante du programme. Les signets peuvent être utilisés pour retourner rapidement à un endroit particulier dans le programme Phrogram. Pour plus information sur les signets, se référer à la section éditeur de code ci-après. Aller signet suivant ** Cette fonction déplace le curseur de programme Phrogram jusqu'à la ligne que de code où se trouve le prochain signet. Cette fonction dépasserait curseur sur la première ligne programme dans le cas où il n'y a pas de signet au-delà de la ligne de code sélectionnée. Aller au signet précédent ** Cette fonction déplace le curseur de programme Phrogram jusqu'à les lignes de code où se trouve le signet précédent. S'il n'y a pas de signet précédent entre la ligne de code actuelle et le début de programme, le curseur sera déplacé sur la dernière ligne de code. Supprimer tous les signets. Comme son nom l'indique cette commande supprime tous les signets contenus dans le code du programme Phrogram. Programmons avec Phrogram Page 18/42

19 Chapitre 2 : Et le graphisme? Section de base Le programme Hello World est le programme classique pour démarrer en programmation mais ce n est pas un programme très passionnant! Alors parlons un peu du graphisme. Mais avant tout, pour parler de graphisme il faut expliquer de manière simple comment un ordinateur affiche des dessins sur l écran. L écran de l ordinateur est composé de milliers de petits point appelés pixels. Ces points sont alignés horizontalement en lignes et verticalement en colonnes. Lorsqu un dessin ou du texte est affiché à l écran, c est que les pixels le composant sont allumés. Donc lorsqu une boite rouge est affichée, cela veut dire que tous les pixels à l intérieur de cette boite sont allumés en rouge. Souvent, en technologie, le système de numérotation commence à zéro. Ceci est dû au fait que l ordinateur ne comprend en fait que des 0 et des 1 (système binaire). Les dessins sont positionnés sur l écran en utilisant un système de coordonnées pour toutes les lignes et colonnes. C est un système différent du système de coordonnées que vous pouvez avoir appris en cours de mathématiques à l école. Il est très facile de travailler avec ce système. Il est très facile de placer un dessin à un endroit donné de l écran en utilisant juste deux nombres. L ordinateur utilise un système de coordonnées (X,Y) dans lequel le coin gauche de l écran définit l origine, c est à dire où X=0 et Y=0. La valeur de X augmente lorsqu on se déplace vers la droite de l écran et la valeur Y augmente lorsqu on se déplace vers le bas de l écran. Donc chaque point de l écran est repéré par ses coordonnées X et Y. Programmons avec Phrogram Page 19/42

20 Voici une copie d écran montrant différentes positions (X,Y) sur l écran : Prenez un instant pour examiner les nombres ci-dessus. La première valeur pour chaque paire de nombres représente la valeur X de la position sur l écran ; la deuxième valeur représentant la valeur Y. Comme vous pouvez le constater, Y augmente lorsqu on se déplace vers le bas tandis que X augmente lorsqu on se déplace vers la droite de l écran. Retenez bien : Les positions sur l écran sont repérées par un système de coordonnées X et Y. La valeur X mesure la distance en pixel depuis le côté gauche de l écran. La valeur Y mesure la distance en pixels depuis le haut de l écran. Le coin supérieur gauche de l écran a pour coordonnées (0,0). Lançons-nous sans attendre et créons notre premier programme graphique. Soyez attentif à la façon d utiliser le système de coordonnées. Nous commencerons en présentant le programme terminé et le dessin lorsque nous l exécutons, puis la section Sautons dans le bain nous permettra de faire nos propres expérimentations et de créer nos dessins originaux. Programmons avec Phrogram Page 20/42

21 Notez qu il y a 9 instructions Phrogram dans la méthode Main(), de la ligne 3 à la ligne 11. C est beaucoup plus que dans notre premier exemple, mais je suis sûr que vous admettrez que c est extraordinaire qu avec juste 9 instructions on puisse dessiner une étoile! Remarquez que le programme commence et se termine comme notre premier programme mais que le nom du programme cette fois ci est DrawingWithThePen (dessiner avec le crayon). Examinons maintenant d un peu plus près quelques unes des instructions de la méthode Main() afin de comprendre leur fonctionnement. Les trois premières instructions ont été ajoutées au programme, mais, comme vous pouvez vous en rendre compte, elles ne font apparaître aucun graphique. La première instruction est : Define mypen As Pen. Cette instruction indique à l ordinateur que nous allons utiliser un crayon qui aura pour nom mypen. Réfléchissons un peu : si nous disons à Phrogram que MyPen est un crayon, alors Phrogram saura que l objet mypen est capable de faire tout ce qu un crayon Phrogram sait faire. Programmons avec Phrogram Page 21/42

22 Que peuvent faire les crayons réels? Ils peuvent dessiner, avoir une couleur d encre, avoir une grosseur de mine plus ou moins importante. Et bien, dans Phrogram, c est pareil! Alors, voyons comment modifier les propriétés de notre crayon dans Phrogram. Regardons le code de programme avec un peu plus d attention : L instruction MyPen.Color=blue définit la couleur de l encre du crayon (Ici bleue). Cette instruction indique ) Phrogram que ce crayon écrira en bleu. L instruction mypen.linewidth=5 fixe la grosseur de mine du crayon à 5 pixels. Souvenez-vous qu un pixel correspond à un tout petit point sur l écran. Une ligne ayant une largeur de 5 pixels correspond à un crayon feutre de mine moyenne. Bien entendu, nous aurions pu prendre une valeur différente. mypen.linewidth=2 correspondrait à une largeur de mine d un crayon standard mypen.linewidth=10 correspondrait à une largeur de mine d un marqueur. Retenez bien : Un objet crayon doit être défini avant que le programme Phrogram puisse l utiliser pour dessiner. Les crayons définis dans un programme Phrogram peuvent avoir différentes couleurs et grosseurs de mines. Bien! Pour le moment, nous avons indiqué à Phrogram comment il allait dessiner mais nous n avons rien dessiné! Alors, allons-y et dessinons enfin notre étoile. Commençons par la première branche. La première instruction ajoutée est mypen.moveto(100,0). Cette instruction deamnde à Phrogram de déplacer le crayon vers le point de coordonnées (100,0) qui sera le sommet de l étoile. Lorsque l on définit un crayon dans Phrogram, ses coordonnées par défaut sont (0,0) c est à dire qu il se trouve en haut à gauche de l écran. En utilisant l instruction MoveTo vous demandez à Phrogram de déplacer le crayon mais sans écrire pendant le déplacement. Programmons avec Phrogram Page 22/42

23 La deuxième instruction est mypen.drawto(50,150). Cette instruction provoque le déplacement du crayon vers le point de coordonnées (50,150) en traçant un trait entre la position de départ et le point d arrivée. Examinons d un peu plus près les coordonnées X et Y. Comme cette instruction demande à Phrogram de déplacer le crayon de X=100 à X=50, le trait sera orienté vers la gauche. Comme l instruction provoque le déplacement du crayon de Y de Y=0 à Y=150, le trait sera orienté vers le bas. A présent, ajoutons un instruction supplémentaire à notre programme pour tracer la deuxième branche de l étoile. L instruction suivante est mypen.drawto(180,50). Phrogram continue à déplacer le crayon du point précédent au nouveau point de coordonnées (180,50) en dessinant une ligne entre ces deux points. Nous obtenons donc la figure ci-dessus. Regardez à présent les lignes suivantes qui permettent de terminer le dessin de notre étoile. Comme vous pouvez le constater, trois autres instructions Phrogram permettent de tracer les trois lignes manquantes. Au total, 5 instructions nous ont permis de dessiner notre magnifique étoile bleue. Programmons avec Phrogram Page 23/42

24 Le programme Phrogram nécessaire pour faire ce dessin est donc tout petit! Avec seulement 9 instructions nous y sommes parvenus! Je vous conseille de bien comprendre comment fonctionne le système de coordonnées (X,Y) dans Phrogram. En effet, vous en aurez besoin dans tous vos programmes utilisant du graphisme. Il est donc important que vous soyez à l aise avec ce système. D ailleurs, les autres langages de programmation utilisent ce même système. Donc apprenez-le bien : c est un très bon investissement! Retenez bien : mypen.moveto(100,0) déplace le crayon vers le point de coordonnées (100,0) mais sans tracer un trait. Pour tracer un trait, il faut utiliser l instruction mypen.drawto(100,0). Regardez attentivement le code ci-après. Il explique un petit morceau de code que nous avons utilisé pour notre programme et concerne l utilisation des propriétés du crayon mypen. Pour modifier la couleur de notre étoile, il suffit de modifier une seule instruction!!! Nous avons juste changé mypen.color= Blue en mypen.color=green. Facile n est-ce pas? En utilisant les deux instructions MoveTo et DrawTo, vous pouvez tracer toutes sortes d objets graphiques. Voici à présent un petit programme pour tracer une croix en forme de X sur l écran. Programmons avec Phrogram Page 24/42

25 Tous les dessins ne se pas constitués d une suite continue de traits. Utilisez l instruction MoveTo pour déplacer le curseur à l endroit où commence un trait qui n est pas attaché au trait précédent. Programmons avec Phrogram Page 25/42

26 Sautons dans le bain Vous avez à présent la possibilité d expérimenter à l aide de Phrogram, mais vous pouvez passer cette section si vous n avez pas accès à un ordinateur en ce moment. Mais même dans ce cas, si vous le voulez vous pouvez lire cette section afin de renforcer votre compréhension de l environnement Phrogram et des concepts graphiques que vous venez d apprendre. Si vous ne vous sentez pas à l aise avec le système de coordonnées (X,Y), nous vous conseillons de relire la section précédente relative à ce système. La section suivante présume que vous avez téléchargé et installé l environnement Phrogram sur le site. Recherchez alors l icône ou le raccourci Phrogram sur le bureau windows ou dans la liste des programmes. Lancer alors le programme en utilisant l icône ou et c est parti pour la création de notre programme étoile.au lancement du programme, vous obtenez ceci : Programmons avec Phrogram Page 26/42

27 Si le panneau editeur de code affiche un autre programme, sélectionnez Fichier Nouveau dans le menu. Un nouvel onglet sera crée appelé sans_nom.kpl pour le moment. Maintenant saisissez le code pour créer l étoile : Vérifiez votre saisie très attentivement. Voyez-vous des lignes rouges montrant que vous avez fait une erreur de saisie? Si c est le cas, corrigez cela tout de suite. Programmons avec Phrogram Page 27/42

28 Pour démarrer votre programme cliquez simplement sur l icône ou appuyez sur la touche F5. Mais avant que Phrogram ne lance réellement le programme, il vous demandera de l enregistrer. Un fenêtre de dialogue «sauvegarder votre programme» apparaît vous proposant par défaut le nom que vous avez choisi pour votre programme dans le champ Nom du fichier. La liste de tous les répertoires que vous voyez dans le panneau explorateur de Phrogram sur la droite de l écran apparaît elle aussi dans cette boite de dialogue. Pour le moment, contentez-vous d accepter cela par défaut et cliquez sur Enregistrer. Vous apprendrez plus tard comment créer de nouveaux répertoires pour enregistrer votre travail. Est-ce que ça a marché? Phrogram a-t-il dessiné une étoile comme celle ci-dessous? Si votre étoile ne correspond pas à cette image, vérifiez à nouveau le code de programme que vous avez saisi! (en particulier les valeurs de coordonnées X et Y entre parenthèses). Rappelez-vous que pour terminer l exécution du programme, vous devez cliquer sur l icône sur la barre de tâche de la fenêtre d exécution du programme. Maintenant essayez les choses suivantes (une à une) : 1. Modifiez l étoile en changeant la propriété couleur 2. Modifiez l épaisseur du trait 3. Ajoutez 50 à toutes les valeurs de coordonnées X 4. (cela devrait placer l étoile 50 pixels plus à droite que la position initiale 5. Ajoutez 100 à chaque coordonnée Y. Que se passe-t-il? 6. (cela devrait déplacer l étoile 100 pixels plus bas) A présent, dessinons une autre étoile à droite de la première. Lorsque vous modifiez le code dans l éditeur de code Phrogram et que vous lancez démarrez le programme, le nouveau code est automatiquement enregistré. Si vous voulez garder le code d origine, il faut utiliser le menu «enregistrer sous» avant de démarrer le programme. 1.Mais auparavant, replacez les coordonnées d origine dans votre programme 2.Cliquez sur la fin de la dernière ligne DrawTo 3.Appuyez deus fois sur la touche entrée pour créer une ligne blanche dans votre code de programme. 4.Afin de gagner du temps, copiez le code de la première étoile. Pour cela, sélectionnez toutes les lignes à partir de l instruction «MyPen.Color=Blue» jusqu à la dernière instruction Programmons avec Phrogram Page 28/42

29 DrawTo(100,0). Ces lignes apparaissent à présent en vidéo inversée. Maintenant, sélectionnez Copier dans le menu Editer. 5.Placez le curseur à la fin du code dans l éditeur de code en effectuant un simple clic gauche. Sélectionnez Coller dans le menu Editer. Vous devriez à présent avoir deux sections de code strictement identiques et séparées par une ligne vide. 6. Vous savez maintenant, puisque vous l avez expérimenté en suivant la indications de la page précédente, que le fait d augmenter la valeur des coordonnées X a pour effet de placer le graphique un peu plus sur la droite de l écran. Donc, changeons les valeurs des coordonnées X et Y dans la deuxième portion de code en ajoutant 200 à toutes les coordonnées X. 7.enfin, changeons la couleur de l étoile en rouge et modifions l épaisseur de la mine du crayon à Encore une chose à faire pour rendre le code plus facile à lire. a. cliquez à la fin de la ligne 5 et appuyez deux fois sur la touche Entrée. b. Ajoutez un commentaire qui décrit ce que fait la portion de code suivante. Pressez deux fois sur la touche «/». Le texte change de couleur ce qui vous indique que ce qui suit est un commentaire et que ce texte sera ignoré par Phrogram. c. Ajoutez une description de l étoile Par exemple : //dessine une étoile bleue d. Ajoutez aussi un commentaire décrivant la deuxième étoile. Le code devrait ressembler à ceci (vos commentaires seront peut-être en français!) Programmons avec Phrogram Page 29/42

30 Est-ce que votre écran ressemble à ceci lorsque vous lancez le programme? Programmons avec Phrogram Page 30/42

31 Plongeons au cœur du système Voici une chance supplémentaire d apprendre encore plus de choses sur la programmation. Vous pouvez, si vous le voulez, passer cette section et vous rendre au sujet suivent. (je suis sûr que vous reviendrez ici ensuite!). Les commentaires Un commentaire peut être juste une ligne de texte ou bien être constitué de plusieurs lignes et dans ce cas devenir un bloc de commentaires. Un commentaire est une partie de votre code de programme qui est ignorée par Phrogram lorsque vous lancez l exécution de votre programme. Vous pouvez donc laisser vos «notes» directement dans le texte du programme. Une ligne de commentaires est précédée par deux caractères / (slash) et tout ce qui figure sur cette ligne est traité comme étant un commentaire. Exemple : // Ces lignes sont des lignes de commentaires. Tout ce qui se trouve à droite des // est du commentaire // et est ignoré. Les lignes de commentaires finissent au bout de la ligne de code Les blocs de commentaires commencent par les caractères /* et se terminent par les caractères */. Tout ce qui se trouve entre ces deux groupes de caractères constitue des commentaires. Exemple : /* ceci est un commentaire qui s étale sur plusieurs lignes. Vous pouvez ainsi créer des blocs de commentaires de grande taille. */ Du temps pour expérimenter : La meilleure façon de devenir un bon programmeur est de s entraîner et de tenter de nouvelles choses. Je vous propose deux idées de programme : 1. Créez un programme pour dessiner vos initiales. Faites en sorte que chaque lettre de vos initiales soit d une couleur et d une largeur différentes. Vous voudrez même peutêtre créer un dessin artistique d initiales qui se recoupent. N oubliez pas d ajouter des commentaires dans le code de votre programme. 2. Créer un plan de votre chambre vue de dessus. Ajoutez les différents meubles de différentes formes qui s y trouvent. Commentez votre programme pour identifier le code servant à tracer chaque élément du dessin. Programmons avec Phrogram Page 31/42

32 Chapitre 3 : des jeux graphiques utilisant des sprites Section de base Maintenant que vous savez utiliser le système de coordonnées (X,Y) pour placer afficher du graphisme, vous êtes prêt à apprendre à utiliser le type de graphisme le plus souvent utilisé par les jeux sur ordinateur. Les graphiques de jeux sont rarement crées comme dans les exemples que nous avons étudiés jusqu à présent. La plupart du temps, ils sont en fait chargés en mémoire depuis un fichier image, par exemple un OVNI (Objet Volant Non Identifié) (UFO en anglais), ou un astéroïde ou encore un elfe. Lorsque que vous les utilisez dans un programme Phrogram, ces images sont appelées sprites. En programmation, un sprite est un objet graphique que vous pouvez afficher à l écran et manipuler. Les sprites vous rendent la vie de programmeur très facile! Etudions à présent un programme utilisant un sprite et apprenons à déplacer le sprite sur l écran comme on le voit dans tous les jeux sur ordinateur. En un rien de temps vous saurez faire des programmes comme ça vous même! Voici le programme qui affiche un OVNI (UFO) à l écran et qui le fait se déplacer lentement vers le bas de l écran. Regardez bien la méthode Main(). Elle ne contient que 9 instructions exactement pour faire tout cela!!! Programmons avec Phrogram Page 32/42

33 Suivez les explications que nous allons maintenant vous donner au sujet des différentes parties du code de programme. Remarquez dès à présent que le code du programme commence et se termine comme dans les autres programmes que nous avons écrits à ceci près que le nom du programme est UFO. Regardez bien les instructions suivantes. Elles permettent d afficher l UFO (OVNI) en haut de l écran. La première de ces instructions est Define myufo As Sprite ; Grâce à elle, nous indiquons à Phrogram d utiliser un sprite et que ce sprite sera appelé myufo. Les sprites peuvent réaliser des choses formidables et nombreuses dans Phrogram! myufo est défini comme un sprite et peut donc réaliser tout ce qu un sprite peut faire dans Phrogram. Un détail de grande importance à bien noter : les valeurs numériques ne sont pas encadrées par des guillemets. Par contre, Phrogram exige des guillemets doubles pour ldu texte. Les autres langages de programmation utilisent aussi cette règle. L instruction suivante est myufo.load( UFO.GIF ). Cette instruction demande à l ordinateur de charger en mémoire l image utilisée par myufo. La méthode Load (charger) n a besoin que d un seul paramètre pour fonctionner ; ce paramètre est le nom du fichier image à charger que Phrogram utilisera pour myufo, ici UFO.GIF. Notez bien la règle de syntaxe : le nom du fichier est précédé et suivi de parenthèses et de guillemets doubles comme ci-dessus. Retenez bien : En définissant un sprite, vous lui donnez toutes les caractéristiques d un sprite dans Phrogram. L instruction myufo.load( UFO.GIF ) demande à l ordinateur d utiliser l image myufo.gif pour afficher myufo à l écran. Programmons avec Phrogram Page 33/42