Notions de base des Algorithmes et de la Programmation

LEÇON

 

Rappel : JavaScript est un langage de programmation conçu pour offrir au développeur web la possibilité de créer des scripts qui seront exécutés côté client.

 

Mais c'est quoi un langage de programmation ?

Un langage de programmation est un ensemble de règles de syntaxe et de fonctionnalités qui permet la création d'un ensemble d'instructions (un script ou un programme) qui est exécutable par un ordinateur (dans le cas de JavaScript, par le navigateur).

Livré et exploité côté client nous avons :

  • images, audio, vidéo, etc : des ressources, contenu pur
  • HTML et CSS : documents, de nature déclarative
  • JavaScript : pour la programmation

Un programme ou script (en JavaScript par exemple) est différent à un document (en HTML/CSS par exemple) car :

  • un document est toujours affiché de la même façon
  • un programme peut se dérouler différemment à chaque exécution (selon les facteurs externes)

 

La programmation est la conversion d'un algorithme en un ensemble d'instructions compréhensibles pour un ordinateur

Un algorithme est une sorte de "recette" qui décrit la tâche que doit compléter l'ordinateur (navigateur). C'est la description plus ou moins formelle d'un méthode à suivre pour compléter une tâche.

Avoir un algorithme sur papier (ou au moins en tête) avant d'attaquer la programmation est quasiment obligatoire.

Un algorithme peut être écrit :

  • via un flowchart (organigramme ou logigramme) : une représentation graphique d'un algorithme avec un flux décisionnel
  • via son pseudo-code : un programme, version simplifiée, écrit en langage "naturel"
  • ou les deux, encore mieux !

 

cafetiere

Exemple non-informatique

Préparer un café avec une cafetière.

Comment décrire à quelqu'un qui ne connaît strictement rien à ce sujet, les étapes de préparation d'un café avec une cafetière comme celle-ci?

Pseudo-code pour "Faire un café" :

 

0  DEBUT de "Faire un café"
1  Prendre une tasse propre
2  Est-ce que le pot de la cafetière contient du café froid,
                ou moins que le volume d'une tasse de café ?
3    Oui :
4      Est-ce que le pot de la cafetière contient quelque chose ?
5        Oui :
6          Vider le pot de la cafetière
7        Non :
8          (rien faire / continuer)
9      Est-ce que la section filtre/café de la cafetière est remplie ?
10       Oui :
11         Est-ce que le filtre et le café moulu ont déjà servis ?
12           Oui :
13             Vider la section filtre/café
14             Mettre un filtre neuf et du café moulu
15           Non :
16             (rien faire / continuer)
17       Non :
18         Mettre un filtre neuf et du café moulu
19     Remplir le réservoir d'eau
20     Allumer la cafetière
21     Attendre la fin du cycle de remplissage du pot
22   Non :
23     (rien faire / continuer)
24 Remplir la tasse depuis le pot de la cafetière
25 FIN de "Faire un café"

 

Flowchart pour "Faire un café" :

flowchart_cafetiere_02

 

Dans cet exemple on voit les caractéristiques :

  • Début / Fin
  • Instructions
  • Décisions (contrôle de flux)

 

Modularité

On peut étendre l'algorithme ci-dessus pour en créer un autre qui décrit la tâche de préparer plusieurs cafés :

 

Pseudocode pour "Préparer plusieurs cafés" :

 

0  DEBUT de "Préparer plusieurs cafés"
1  Que N soit le nombre de cafés à préparer
2  Faire N fois :
3    Invoquer "Faire un café"
4  FIN de "Préparer plusieurs cafés"

 

Flowchart pour "Préparer plusieurs cafés" :

flowchart_cafetiere2_03

Dans cet exemple on voit les caractéristiques :

  • Début / Fin
  • Le concept d'un variable ou paramètre
  • Itération (boucle)
  • Modularité (appel d'une fonction)

 

Événements

Souvent un programme est invoqué suite à un événement qui arrive. Dans notre exemple : une commande arrive pour un certain nombre de cafés. Dans ce cas on invoque la procédure "préparer plusieurs cafés".

Souvent en JavaScript on prépare des scripts pour qu'ils s'exécutent suite à un événement (chargement de la page, clic de souris, survol de la souris, etc).

 

Caractéristiques de base de tous les programmes / scripts :

  • Début / Fin
  • Instructions
  • Décisions (contrôle de flux)
  • Variables / Paramètres
  • Itération (boucles)
  • Modularité
  • Événements

Quand on apprend un (nouveau) langage de programmation, la première tâche est souvent d'apprendre les règles et la syntaxe autour de ces concepts de base.

 

Règles et syntaxe en JavaScript

 

Début / Fin

Un bloc de code est toujours entouré par des accolades, qui délimitent le début et la fin :

if (x == y)
{                         /* début du bloc */
  ...
}                         /* fin du bloc */

 

Définition d'une fonction (function) :

function jouer()
{                        /* début de la fonction */
  ...
}                        /* fin de la fonction */

 

Instructions

Exemples :

  n = 3;
  chaine = "bonjour";
  y = x + 5;
  gagnant = true;

Remarque : en JavaScript les instructions sont séparées avec un virgule.

 

Décisions

Contrôle de flux via if, else if, else :

if (n < 5)
{
  ...
}
else if (n > 5)
{
  ...
}
else
{
  ...
}

 

Itération

Boucles - for, while et do-while :

for (var i = 1; i <= 10; i++)
{
  ...
}

Remarque : il y a 3 parties dans la définition d'un boucle for :

  • initialisation - dans l'exemple : var i=1
  • test de continuation - si le test donne "vrai" on continue à boucler - dans l'exemple : i <= 10
  • incrémentation ou évolution (ce qui change à la fin de chaque itération - dans l'exemple : i++

 

while (x < 5)
{
  ...
}

 

do
{
  ...
} while (x < 5);

Remarque : un boucle de type do-while rentre dans le boucle au moins une fois.

 

Variables

Les variables sont utilisés pour stocker des valeurs intermédiaires ou finale d'une opération.

Chaque variable a un type : entier, décimal, chaîne, booléen, et cetera - dans JavaScript le type est implicite.

On déclare un variable avec le mot "var".


var n = 3;
n = n + 1;     /* une fois déclaré, on n'a plus besoin d'utiliser "var" */
n = 79;

var s = "bonjour";     /* les chaînes de caractères sont entourées de guillemets */

var ok = false:        /* type booléen */

if (n > 50)          /* les variables peuvent être impliqués dans les décisions */
{
   ...
}

while (!ok)          /* ! indique "non" */
{
  ...
}

 

Paramètres et Modularité (fonctions)

Un paramètre est comme un variable : c'est un variable prévu pour recevoir une valeur envoyée à une fonction.

 

function somme(x, y)
{
  var z;
  z = x + y;
  return z;
}

...

var a = 3;
var b = 4;
var c = somme(a, b);
var s = "la totale est " + c;
console.log(s);

 

Événements

On peut préparer des choses dans le HTML pour qu'une fonction dans notre code JavaScript soit invoqué suite à un événement.

Exemple : clic sur un lien (qui peut être un lien textuel ou une image) :

function calculer(n)
{
  ...
}
<a href="javascript:calculer(10)">Calculer avec 10</a>
<a href="javascript:calculer(25)">Calculer avec 25</a>

 

Exemple : chargement de la page (2 façons possibles)

 

function mes_initialisations()
{
  ...
}
<body onload="mes_initialisations()">
<html>
  <head>
    <script>
       window.onload = function() {
         mes_initialisations();
      }
    </script>
  </head>
  <body>
  </body>
</html>

 

 


 

EXERCICES

Écrire le pseudo-code et/ou dessiner le flowchart qui représente l'algorithme pour ces tâches :

  1. demander 3 valeurs et formuler une réponse avec la plus grande
  2. trouver un mot dans un dictionnaire
  3. (une tâche de votre choix)

 

Advanced :

  1. demander 5 valeurs et répondre avec une liste contenant ces mêmes valeurs triées en ordre croissant
  2. gérer un panier d'achat et le passage en caisse dans le contexte d'un site e-commerce
  3. jouer une main de blackjack (en tant que joueur ou la banque - à vous de voir)