Les bases de la programmation - Partie 1
1. Introduction
Cet article est réservé aux néophytes qui n'ont jamais écrit une seule ligne de code et qui désirent s'initier à ce formidable outil qui est la base de tout en informatique : la programmation.
Découpé en plusieurs parties, cet article montre vraiment les bases de la programmation, et ne vous permettra pas, au final, de faire des choses extra-ordinaires. Nous verons quand même lors de la dernière partie la construction d'une petite application. D'autres articles viendront ensuite pour compléter celui-ci, avec la construction d'applications plus complexes.
Pour programmer, il faut avoir un certain feeling, cette initiation a plutôt pour but de vous tester, de vous permettre de repérer si vous avez ce feeling, alors êtes vous fait pour la programmation ?
Ici, je ne vous propose pas l'ultime manière de commencer mais une initiation que je pense simple et directement accessible avec de petits exemples que vous pourrez tester immediatement pour vous immerger directement dans le monde du développement.
D'autres sites, comme les excellents Project Omega ou Cocoa-X en français, sont des sources importantes pour les programmeurs sous OS X. N'hésitez pas à les visiter pour plus d'information.
Petite note, il n'y a pas d'âge pour commencer à programmer, le plus tôt est sans doute le mieux.
Il existe une multitude de langages de programmation, les concepts pour la plupart des langages sont quasiment identiques, seule la syntaxe change. Ici, nous verrons les bases avec du Javascript, c'est un langage très courant, dérivé du désormais célébre Java de Sun. Très souple d'utilisation, sa syntaxe est extrêmement simple à comprendre et permet donc de commencer doucement.
Les prérequis matériels et logiciels sont :
- un ordinateur
- un navigateur web, compatible Netscape plutot que Internet Explorer : Safari, Netscape, Firefox, Camino ou encore iCab sont parfaits pour ce genre de travail
- un éditeur qui enregistre en text brut
je déconseille textEdit et encore plus Word, prenez plutôt un des éditeurs gratuits de la liste ci-dessous:
- BBedit Light
- Emacs
- Smultron
- SubEthaEdit
- Textforge
Pour la suite, je prendrai, par habitude, Firefox et BBedit. Ce choix est personnel et dicté par mes préferences, vous pourrez à tout moment changer de navigateur ou d'éditeur.
Firefox permet de renvoyer les erreurs Javascript, il est donc plus facile pour débugger notre code lorsque celui possède de petite imperfection. Dans le menu outils, vous trouverez la "Console d'erreur" qui repertoriera vos erreurs. Veillez à ce que cette petite fenêtre soit toujours ouverte lors de l'exécution de votre code.
L'homme et la machine ont du mal à communiquer ensemble directement, il faut toujours une interface pour qu'ils se comprennent. En programmation, c'est pareil, le code que l'on va écrire ne sera jamais executé directement par la machine mais devra toujours être compilé ou être interpreté un programme tiers.
Dans notre cas, ce sera le navigateur web qui interprétera notre programme.
Une chose qui peut paraître bête mais que je tiens à signaler : le programme interprétera les lignes de code dans le même ordre qu'elles ont été notées dans le fichier que nous allons bientôt commencer.
Les morceaux de code seront toujours écrits de la manière suivante pour plus de clarté :
je suis un bout de code
Il vous suffira de copier le contenu dans votre éditeur de texte, ou de le recopier.
A chaque nouveau morceau de code il faudra effacer le précédent.
Si vous le pouvez ( et le voulez ), enregistrez chaque exemple dans des fichiers différents.
2 Javascript
2.1 Les préparatifs
Firefox, comme chaque navigateur, a pour but d'interpréter du HTML, nous devons donc commencer par lui indiquer ce que nous voulons faire, c'est à dire, du Javascript. Créez un fichier avec votre éditeur de texte et écrivez :
<script type="text/javascript"></script>
La première balise HTML indique au navigateur que l'on entre dans une phase où il doit interpréter du script décrit comme étant du texte de type Javascript. La seconde indique tout simplement que l'on sort de cette phase de script. Dans chacun des fichiers que l'on va écrire par la suite, on devra avoir ces lignes en début et en fin de fichiers, je ne les marquerais plus dans chaque exemple et vous devrez tout simplement insérer le code entre les deux balises.
Pour exécuter votre programme, il suffit d'enregistrer votre fichier et de le glisser sur l'icône du navigateur. Le navigateur l'exécutera directement.
Par exemple, vous pouvez lancer votre programme actuel ( juste avec les balises donc ), normalement il ne doit rien se passer, puisqu'aucune instruction n'a encore été écrite.
2.2 Les commentaires
Lorsque l'on est dans notre programme, on comprend immédiatement à quoi sert chaque ligne de code mais dans quelques jours, quelques mois ou ou quelques années, il sera souvent plus difficile de se relire et donc se remettre dans le programme. Pour ne pas perdre le fil ou pour permettre à une autre personne de comprendre, on ajoute au milieu du code des commentaires qui nous rappellent à quoi peut servir chaque partie de code, voir chaque ligne. Le navigateur n'interpréte pas ces lignes de commentaires, vous pouvez donc en user et en abuser sans problème. En Javascript les commentaires se notent de deux manières, pour une seule ligne ou pour un groupe de lignes.
Pour plus de lisibilité, les commentaires seront notés en rouge.
// je suis une simple ligne de commentaire et ne serai pas interprétée /* ceci est un groupe de lignes commentées */
Encore une fois si vous executez le code, vous ne verrez rien de plus, puisque rien de plus que des commentaires ont été ajouté.
Pour la suite, j'écrirais des commentaires pour chaque morceau de code et test que l'on fera. Ces commentaires contiendront l'essentiel des explications. Vous pourrez en faire ce que vous en voudrez, c'est à dire, les marquer ou pas, voire mieux, les modifier à votre guise pour améliorer votre compréhension.
2.3 Les instructions en Javascript
Il n'y a qu'une seule chose à retenir, chaque instruction doit être terminée par un point-virgule. Le ";" indique que l'on a fini notre instruction et que l'on passe à la suivante. Cela permet, entre autre, de mettre plusieurs instructions sur la même ligne, cela peut parfois arranger la lisiblité du programme.
Cette méthode est utlisée dans de nombreux langages, comme le Java, le C/C++ ou encore l'objective-C, langage de prédilection du Mac.
2.4 Les variables
Commencons par le commencement, les variables. Une variable permet de stocker une valeur. On utilisera cette variable en attribuant une valeur ou en la récupérant à un ou plusieurs endroit du programme. Une variable est notée sur un seul mot et ne peut comporter que des lettres, des chiffres ainsi que quelques caractères spéciaux comme l'underscore "_" ( évitez donc les caractères accentués ).
Pour déclarer une variable, on a deux solutions :
La déclarer en temps que "locale", c'est à dire qu'elle ne sera accessible qu'à partir du niveau ou elle a été déclaré.
La declarer en temps que "globale", c'est à dire qu'elle est accessible depuis tout le programme.
Pour l'instant ce concept de "locale" et de "globale" n'est pas très important.
Pour afficher les résultats des exemples suivants nous utiliserons la fonction "alert" qui affiche un message d'alerte avec le contenu que l'on veut. Cette fonction est donc idéale pour voir le contenu de nos variables.
// je déclare et j attribue la valeur 1 à la variable ma_variable var ma_variable = 1; // j affiche le contenu de la variable ma_variable alert ( ma_variable );
Autant que possible, encore une fois pour plus de clarté, essayez de mettre un nom de variable explicite.
// j attribue les valeurs nécessaires dans mes variables var nombre1 = 3; var nombre2 = 7; var somme = 10; // les 3 alertes se lancent successivement alert ( nombre1 ); alert ( nombre2 ); alert ( somme );
Une variable peut contenir autre chose que des nombres. Elle peut stocker des textes, des listes de valeur et bien d'autres types de valeurs.
// j attribue une valeur texte à ma variable var mon_texte = 'toto va a la plage'; alert ( mon_texte ); // j attribue une liste de valeurs numérique à ma variable var ma_liste_de_nombres = [ 1, 2, 3, 4 ]; alert ( ma_liste_de_nombres ); // j attribue une liste de valeurs texte à ma variable var ma_liste_de_textes = [ 'mon texte 1', 'mon texte 2', 'mon texte 3' ]; alert ( ma_liste_de_textes );
L'utilisation et l'attribution des variables peuvent être combinées.
/* j affiche les résultats maintenant la valeur de nombre1 est 1 ainsi que la valeur de nombre2 l ancienne valeur de nombre2 est définitivement perdue. */ alert ( nombre1 ); alert ( nombre2 );
Une variable doit toujours être initialisée avant d'être utilisée, sinon le programme va planter et s'arrêter.
/* je n attribue pas de valeur à nombre3 et je tente de mettre la valeur de nombre3 dans nombre4 */ var nombre4 = nombre3;
Ou encore :
//j affiche la variable toto qui n existe pas alert (toto); /* attention dans ce cas à ne pas confondre avec alert("toto") qui affiche bien le contenu "toto" mais pas la variable du même nom */
Avec comme résultat :
Javascript a l'avantage ( pour les débutants ) de ne pas être typé (numérique, texte, liste, ...) . Une variable n'est pas définie avec son type, on insère directement une valeur. De plus le type peut changer au fil de l'exécution du programme.
// j attribue une valeur numérique à l une des variables et une valeur texte à l autre. alert var ma_variable1 = 2; var ma_variable2 = 'toto'; // j attribue la valeur de la première variable à la seconde. ma_variable2 = ma_variable1; // j affiche les résultats, ma_variable2 est était un nombre et est devenu un texte. alert ( ma_variable1 ); alert ( ma_variable2 );
2.5 Les opérateurs numériques.
Commencons par des opérations simples sur des variables contenant des numériques. Les opérateurs '+', '-', '*' et '/' sont extrêmement facile à utiliser.
// je commence par attribuer des valeurs à mes variables var nombre1 = 3; var nombre2 = 4; var nombre3 = 5 // je fais l addition resultat_addition = nombre1 + nombre2; alert ( resultat_addition ); // je fais la multiplication, si je n ai pas besoin de stocker le résultat, je l affiche directement alert( nombre1 * nombre2 ); // je fais la soustraction et la stocke dans la même variable. nombre3 = nombre3 - 2; alert ( nombre3 );
Le Javascript permet des raccourcis pour certaines opérations. On peut ajouter et soustraire 1 à une variable très facilement.
// initialisation des variables var n1 = 1 var n2 = 1 // j exécute les 2 commandes suivantes pour arriver au même résultat : n1 et n2 sont égaux à 2 ( 1 + 1 ) n1 = n1 + 1; n2++; alert ( n1 ); alert ( n2 ); // j exécute les 2 commandes suivantes pour arriver au même résultat : n1 et n2 sont égaux à 1 ( 2 - 1 ) n1 = n1 - 1; n2-- ; alert ( n1 ); alert ( n2 );
On peut exécuter une opération pour mettre à jour une variable presque aussi simplement :
// initialisation des variables var n1 = 1 var n2 = 1 // j exécute les 2 commandes suivantes pour arriver au même résultat : n1 et n2 sont égaux à 5 ( 1 + 4 ) n1 = n1 + 4; n2 += 4; alert ( n1 ); alert ( n2 )
On peut utiliser les soustractions, multiplications et divisions dans la même manière. Je vous laisse tester par vous même.
Pour les chaînes de caractères ainsi que pour les tableaux de valeur, le comportement de ces opérandes est différent. Seule l'opérande "+" peut être utilisée, les 3 autres ne sont réservées qu'aux valeurs numériques.
Dans le cas d'une chaîne, l'opérande "+" concatène les deux valeurs.
// je définis mes variables de test chaine1 = 'toto va a '; chaine2 = 'la plage'; // j affiche la concaténation des 2 chaines alert ( chaine1+chaine2 ); // je tente la soustraction des 2 chaines alert ( chaine1-chaine2 );
On voit que le résultat du second test est NaN. NaN signifie "Not a number". Javascript nous renvoie bien le fait que l'opérande "-" est réservée aux valeurs numériques.
Maintenant, regardons le cas des listes. Le résultats sera le même que lorsque l'on fait la somme de deux valeurs d'un type différent. Dans tous ces cas, la valeur renvoyée est la concatenation des valeurs transformées en chaînes de caractères.
// nous définissons nos variables liste1 = ['texte1', 12]; liste2 = ['texte2', 16]; chaine1 = 'ma chaine'; numerique = 12; // lançons les tests alert ('somme de chaines : ' + (liste1 + liste2)); alert ('somme mixte : ' + (chaine1 + numerique)); alert ('somme mixte : ' + (liste1 + chaine1 + numerique));
2.6 Les fonctions - Premières utilisations.
Les fonctions permettent de regrouper une série de commandes. Ces commandes ne sont exécutées que lorsque la fonction est appelée. Comme pour les variables, le nom donné à la fonction permet d'être plus clair dans notre programme et ne doit contenir que des lettres, chiffres et certains caratères spéciaux spécifiques.
On définit une fonction en écrivant le terme "fonction" puis le nom de la fonction suivit de parenthèses contenant les paramètres, on insère ensuite la série de commandes entre accolades.
Nous utilisons notre fonction de la même manière que nous avons utilisé les fonctions intégrées à Javascript ( alert par exemple ).
Créons notre première fonction, elle ne fera que qu'appeler la fonction d'alerte de Javascript et nous l'appelerons "lance_une_alerte".
// comme d habitude, j initialise ma variable var n1 = 1; // je construis ma fonction function lance_une_alerte() {// lance l'alerte alert ( n1 );} // j appelle ma fonction lance_une_alerte ();
Les fonctions n'étant pas interprétées tant qu'on ne les appelle pas, on peut placer celles ci n'importe où dans le code. Nous pouvons commencer à mettre une structure dans notre programme, par exemple mettre les fonctions en début ou fin de programme.
// les fonctions placées en début de fichier function lance_une_alerte ( ) {// lance l alerte alert ( n1 );} // j initialise ma variable var n1 = 1; // j appelle ma fonction que le programme va tout seul aller chercher en haut du fichier lance_une_alerte ();
Maintenant voyons plutôt quelle est la réelle utilité d'une fonction. Lorsque nous avons plusieurs variables, il est dommage d'avoir une fonction par variable, alors qu'une seule fonction suffit. C'est d'ailleur le but principal des fonction : regrouper un ensemble de commandes qui font une action bien particulière et que l'on va réutiliser plusieurs fois dans notre programme. Pour cela il suffit d'ajouter un paramètre à notre fonction. Un paramètre est une variable locale à la fonction, c'est à dire qu'elle est créée en entrant dans la fonction et supprimée à sa sortie.
// ma fonction function lance_une_alerte ( param1 ) {// lance l alerte alert ( param1 );} // j initialise mes variables var n1 = 1; var n2 = 2; // j'appelle ma fonction lance_une_alerte ( n1 ); // je rappelle ma fonction avec l autre variable lance_une_alerte ( n2 );
La valeur de n1 est copiée dans la variable locale param1 de la fonction. La valeur de n1 n'a alors plus aucun rapport avec la valeur de param1.
Pour nous le prouver, testons les deux valeurs après un passage dans une fonction qui modifie la valeur du paramètre.
// ma fonction function modifie_et_affiche ( param1 ) {// je modifie param1 en lui ajoutant 1 param1++; // j affiche de param1 alert ( 'dans la fonction la valeur est : ' + param1 );} // j initialise ma variable var n1 = 1; // j appelle ma fonction modifie_et_affiche ( n1 ); // j affiche la valeur de n1 alert ( 'hors de la fonction la valeur est : ' + n1 );
Une fonction peut avoir plusieurs paramètres en entrée. Pensez à garder un nombre de paramètre raisonnable pour la "viabilité" de votre programme. Une fonction peut servir pour exécuter un calcul, on peut renvoyer le résultat vers l'endroit ou la fonction a été executée.
// fait l addition des deux nombres function additionne ( param1, param2 ) {// j ajoute param2 a param1 param1 += param2; // je renvoie la valeur return param1;} // créer une alerte avec la valeur donnée function display_value ( valeur_a_afficher ) {// lance l alerte alert ( valeur_a_afficher );} // j initialise mes variables var n1 = 2; var n2 = 4; var n3; // j appelle mes fonctions n3 = additionne ( n1, n2 ); display_value ( n3 ); // on peut aussi se passer de la variable n3 // en imbriquant les fonctions display_value( additionne( n1, n2 ) );
3 Exercices
Exercice 1
Ecrire un programme qui inialise trois variables avec les valeurs 3, 5 et 7, avec une fonction qui fait la somme des deux premières variables auxquelles on soustrait la dernière, avec l'affichage par une alerte du résultat.
Exercice 2
Corriger le programme suivant pour qu'il fonctionne, une erreur s'est glissée dans le code. Lancer le programme buggé pour voir son comportement, vous devriez normalement tout de suite voir oû il se cache.
/* ce programme a pour but de calculer le pourcentage de deux nombres et d afficher le resultat */ // fonction qui fait le travail function calcul_le_pctg ( param1, param2 ) {// je fais le calcul param2 = param1 / param2 * 100; // je renvoie la valeur return param1;} // créer une alerte avec la valeur donnée function display_value ( valeur_a_afficher ) {// lance l alerte alert ( valeur_a_afficher );} // j initialise mes variables var n1 = 2; var n2 = 4; // j appelle mes fonctions display_value (calcul_le_pctg ( n1, n2 ));
4 Premières conclusions
Vous voila en partie initié aux bases de la programmation en Javascript. Dans la partie 2 et les suivantes, nous aborderons d'autres aspets de la programmation, de plus en plus intéressants pour réaliser des programmes plus complexes.
5 Vos questions / Mes réponses
Si vous avez des problèmes ou des incompréhensions n'hésitez pas à m'envoyer un mail , j'ajouterai ici les questions intéressantes et modifierai l'article en conséquense pour plus de clarté.
Question de Tazi4734 :
Est-ce que ca doit forcement être collé à la marge ? Ou il peut y avoir un espace ?
Réponse :
Il n'y a aucune limitation sur les espaces. Tu peux en rajouter pour améliorer la lisibilité. Nous verrons dans une prochaine partie de cet article, qu'il est fortement conseillé d'en rajouter et pourquoi.
L'interpréteur interpréte un espace comme un séparateur. S'il n'y a rien entre deux espaces il n'interpréte donc rien.
Question de Tazi4734 :
Quand on fait une liste, il ne met pas d'espace entre la variable et la virgule, est-ce qu'on peut en mettre un ( enfin j'ai essayé d'en mettre mais ca sert à rien donc ce n'est pas la touche mais l'espace "physique" entre les lettres )
Réponse :
Pour les listes, tu peux les écrire avec autant d'espaces que tu veux, comme dans la question précédente, c'est une question de lisibilité.
Mais ce qui est interessant, c'est que le programme, lui va te l'écrire ( dans un alert() par exemple ) de la manière qu'il veut l'afficher, tu auras ainsi le comportement de la machine.
6 Solutions des exercices
Exercice 1
// il s agit ici d une solution possible // fonction de calcul function calcul( val1, val2, val3 ) {//commence par faire l addition val1 += val2; // continue avec la soustraction val1 -= val3; // renvoie la valeur return val1;} // partie central du programme // initialisation des 3 variables var num1 = 3 var num2 = 5 var num3 = 7 // affiche directement le résultat de l exécution alert ( calcul( num1, num2, num3 ) );
Exercice 2
/* ce programme a pour but de calculer le pourcentage de deux nombres et d afficher le résultat */ // fonction qui fait le travail function calcul_le_pctg ( param1, param2 ) {// je fais le calcul param1 = param1 / param2 * 100; /* le bug est ici, il faut que l on revoie la variable que l on a calculé */ // je renvoie la valeur return param1;} // créer une alerte avec la valeur donnée function display_value ( valeur_a_afficher ) {// lance l alerte alert ( valeur_a_afficher );} // j initialise mes variables var n1 = 2; var n2 = 4; // j appelle mes fonctions display_value (calcul_le_pctg ( n1, n2 ));
