Etape 1/6: Introduction
Il fut un temps où tous ceux qui possédaient un ordinateur savaient programmer. Et pour cause: l’ordinateur qu’ils venaient d’acquérir n’était livré avec aucun logiciel. Le seul outil à disposition était un langage de programmation (le Sinclair Basic des ZX81 et ZX Spectrum, l’Atari Basic des Atari 400/800 et ST, le GWBasic des PC, etc.). Et chacun s’amusait donc à créer ses petites applications… Car oui, la programmation peut être un loisir amusant!
Avec son Small Basic (à ne pas confondre avec le logiciel SmallBasic en 1 mot, beaucoup moins convivial), Microsoft veut renouer avec la simplicité des langages de cette époque et retrouver l’engouement pour une programmation fun et ludique. L’idée n’est pas ici de faire de tous des informaticiens, mais bien de renouer avec l’idée que la programmation est aussi un loisir numérique, au même titre que la photo, la vidéo ou le jeu vidéo.
Il faut dire qu’en faisant évoluer son langage Visual Basic (et avant lui, son GWBasic) vers des concepts de pure programmation objet comme C# et Visual Basic.NET, Microsoft s’est depuis des années éloigné de l’époque glorieuse de la programmation familiale des années 80. L’arrivée d’Internet et de logiciels facilement téléchargeables a fini par faire oublier à quel point ce pouvait être un bon moyen de se distraire.
Small Basic vient donc corriger cet oubli en privilégiant loisir, simplicité et convivialité.
Pour découvrir, vous aussi, les joies de la programmation, commencez par installer Small Basic.
– Pour fonctionner, celui-ci a besoin du “.NET Framework 3.5”. Il faut donc télécharger et installer celui-ci
– Il faut ensuite télécharger et installer Small Basic en cliquant — ici —
Etape 2/6: Prise de contact
Lancez Small Basic. Après quelques secondes, l’interface de programmation apparaît. Elle présente une barre d’outils inspirée du Ruban Office avec de grosses icônes, une fenêtre de saisie des programmes, et un panneau d’aide en ligne qui vous expliquera notamment le rôle de chaque instruction.
Tout programmeur a pour habitude de découvrir un nouvel environnement de programmation et un nouveau langage en écrivant comme tout premier programme, le programme “Hello World”. C’est en quelque sorte une tradition à laquelle il ne faut pas déroger.
– Placez le curseur dans la fenêtre “Untitled“
– Saisissez la lettre “T“.
– Notez comment l’éditeur de texte réagit instantanément et vous propose automatiquement une liste de commandes possibles. Cette fonctionnalité s’appelle Intellisense.
– Utilisez les touches curseur pour vous déplacer dans la liste de commandes proposées par Intellisense, sélectionnez TextWindow et validez par [Entrée].
– Notez que le panneau d’aide sur la droite vous explique ce qu’est la commande TextWindow. Celle-ci permet d’afficher du texte ou au contraire de demander à l’utilisateur de saisir du texte.
– Comme toutes les commandes de base, TextWindow possède différents comportements (ou méthodes) qui permettent de paramétrer son fonctionnement.
– Pour accéder à ces méthodes, saisissez simplement “.” derrière “TextWindow“. Intellisense se met de nouveau en action. Sélectionnez WriteLine et validez par [Entrée].
– La commande WriteLine permet d’afficher du texte à l’écran. Comme l’explique l’aide dans le panneau, WriteLine accepte un paramètre entre parenthèses qui sera le texte à afficher.
– Sous Small Basic, les textes que l’on veut afficher ou manipuler doivent être exprimés entre guillemets. Complétez donc la saisie pour obtenir au final une ligne:
TextWindow.WriteLine(“Hello World! Ceci est mon premier programme Small Basic!”)
Etape 3/6: Premier programme
Vous voici donc avec, à l’écran, votre premier programme, composé d’une seule ligne de programmation:
TextWindow.WriteLine(“Hello World! Ceci est mon premier programme Small Basic!”)
Cette ligne ordonne à l’ordinateur d’ouvrir une fenêtre textuelle (TextWindow) et d’y afficher (WriteLine) un texte qui est spécifié entre guillemets à l’intérieur des parenthèses.
Nous allons lancer ce premier programme en appuyant simplement sur la touche [F5] du clavier.
La fenêtre d’édition s’assombrit et se protège, tandis que le programme se lance et réalise ce que vous venez de lui commander. Reportez-vous à la capture d’écran.
Nous allons maintenant voir comment enrichir un peu ce programme.
Etape 4/6: Suites d’instructions
Nous allons maintenant enrichir ce programme. Il faut comprendre qu’un programme n’est qu’une suite d’instructions que l’ordinateur analyse et exécute dans l’ordre.
Saisissez le programme suivant (vous pouvez faire un copier/coller si vous ne voulez pas tout saisir):
TextWindow.Title=”Mon premier programme”
TextWindow.BackgroundColor=”White”
TextWindow.ForegroundColor=”DarkRed”
TextWindow.WriteLine(“Hello World! Vive Small Basic!”)
TextWindow.PauseWithoutMessage()
Expliquons rapidement ce que fait ce programme:
TextWindow.Title permet d’attribuer un titre à la fenêtre du programme.
TextWindow.BackgroundColor permet d’attribuer la couleur blanche (White) au fond d’écran
TextWindow.ForegroundColor permet d’attribuer la couleur rouge (DarkRed) à l’écriture
TextWindow.WriteLine permet d’afficher le texte à l’écran
TextWindow.PauseWithoutMessage() permet d’attendre que l’utilisateur appuie sur une touche pour terminer le programme, sans pour autant qu’un message s’affiche à l’écran.
Passons maintenant à l’étape suivante: la programmation Windows!
Etape 5/6: De la console textuelle à Windows
Jusqu’ici, nous n’avons utilisé que la console textuelle, autrement dit “TextWindow”.
Mais, sous Windows, on utilise plus souvent un affichage graphique avec des boutons qui permettent de créer une interaction avec l’utilisateur. Pour utiliser une vraie fenêtre Windows graphique, on utilise donc une autre commande: “GraphicsWindow”.
Notre programme précédent en version Windows devient donc :
GraphicsWindow.Show()
GraphicsWindow.Height = 240
GraphicsWindow.Width = 320
GraphicsWindow.Title = “Mon premier programme Windows”
GraphicsWindow.BackgroundColor = “White”
GraphicsWindow.BrushColor = “DarkRed”
GraphicsWindow.FontSize = 14
GraphicsWindow.DrawText(10,120,”Hello World! Vive Small Basic!”)
GraphicsWindow.DrawLine(10,136,220,136)
Ce programme commence par afficher une fenêtre graphique (GraphicsWindow.Show()) , puis définit la hauteur (Height) et la largeur (Width) de cette fenêtre. Il donne ensuite un titre à la fenêtre (Title). Il définit un fond blanc (BackgroundColor) et une couleur d’écriture rouge (BrushColor). Puis il définit la taille du texte (FontSize) et enfin affiche le texte (DrawText) à une position déterminée dans la fenêtre. Enfin, on utilise une instruction de dessin (DrawLine) pour souligner le texte.
Essayez de jouer un peu avec ce programme pour changer la position du texte à l’écran, pour changer la police du texte (il existe une commande FontName), pour tracer d’autres lignes ou même des rectangles (DrawRectangle) ou des cercles (DrawEllipse) en faisant varier la taille et la couleur du stylo (PenColor et PenWidth).
Passons à une dernière étape…
Etape 6/6: Des programmes connectés et interactifs
Pour terminer ce premier épisode consacré à Small Basic, nous allons introduire deux concepts:
– L’interaction
– La connexion à Internet
Pour qu’un programme soit intéressant il faut que l’utilisateur puisse interagir avec la fenêtre. Nous verrons plus tard que de nombreuses interactions sont possibles. Pour cela, on définit les évènements que l’on veut gérer, par exemple le clic de souris, et on programme ce qui doit se passer quand cet évènement surgit.
Small Basic est un langage qui se veut d’aujourd’hui. Il peut donc communiquer avec les services Internet, par exemple avec le site d’image Flickr.
Le programme ci-dessous affiche une nouvelle image de chateaux en provenance de Flickr chaque fois que l’utilisateur clique sur le bouton de la souris.
GraphicsWindow.Show()
GraphicsWindow.Width = 640
GraphicsWindow.Height = 480
GraphicsWindow.Title = “Exemple 2”
GraphicsWindow.BackgroundColor = “White”
GraphicsWindow.MouseDown = OnMouseDown
GraphicsWindow.DrawText(10,10,”Cliquez pour afficher une image”)
Sub OnMouseDown
pic = Flickr.GetRandomPicture(“chateaux”)
GraphicsWindow.DrawResizedImage(pic,0,0,640,480)
EndSub
Ce programme introduit les concepts d’évènement (OnMouseDown), de sous-programme (Sub..EndSub) et de variable (Pic), notions que nous expliquerons dans notre Episode 2! A bientôt, donc…
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
