Admin/Dev

01
Août
2004

Les bases de la programmation - Partie 1

Publié par sky

 

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 :

  1. un ordinateur
  2. un navigateur web, compatible Netscape plutot que Internet Explorer : Safari, Netscape, Firefox, Camino ou encore iCab sont parfaits pour ce genre de travail
  3. 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:


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 :

Article skymac : Les bases de la programmation

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 : ' + ( chaine + numerique ) );
alert ( 'somme mixte : ' + ( liste1 + chaine + 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( execute_un_calcul( 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.

> Voir la solution

 

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 ));

> Voir la solution

 

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 ));

 

 
Sommaire de la série
 
Les cookies assurent le bon fonctionnement de nos services. En continuant, vous acceptez leur utilisation sur notre site internet.
Accepter