Tutoriel introduction algorithmique (1/3)

Introduction

En suivant ce tutoriel, vous verrez des bases de programmation à travers deux parties

Nous verrons:

le principe d'algorithme (partie 1)
la représentation d'algorithme en pseudo-code et en organigrammes (partie 1)
les instructions, notamment en JavaScript (partie 1)
les conditions (si, si-sinon, si-sinon si-sinon) (partie 2)
les boucles (tant que, pour tout) (partie 2)
les fonctions (partie 2)
un petit projet (partie 3)

Algorithme

Pour une introduction, nous considérerons qu'un algorithme est une suite d'instructions à suivre les unes après les autres afin d'arriver à un résultat. Ces instructions n'ont PAS à être dans un langage donné.

Note: suivre un algorithme permet toujours d'arriver à un résultat.

Suivre un algorithme: les instructions

En exécutant un algorithme pas à pas, c’est-à-dire instruction par instruction, nous arrivons au résultat escompté, sans même comprendre l’algorithme.

Dans ce cadre, une instruction dans un algorithme doit être assez détaillée pour être comprise et faisable directement.

Exemple : suivre un algorithme

Voici la représentation d'un algorithme.

Exécutons celui-ci pas à pas:

Prendre un chiffre entre 0 et 9
Coller deux fois ce chiffre, côte à côté, pour obtenir un nombre

Première exécution:

Prenons par exemple le chiffre 2
Cela donne 22

Deuxième exécution:

Prenons par exemple le chiffre 9
Cela donne 99

Sans même le comprendre, vous exécutez un algorithme qui multiplie par 11 un chiffre de 0 à 9 en suivant pas à pas les étapes 1 et 2.

Pseudocode

L'idée d'un pseudo-code est de se rapprocher d'une représentation compréhensible par une machine.

Reprenons l'algorithme précédent :

Prendre un chiffre entre 0 et 9
Coller deux fois ce chiffre, côte à côté, pour obtenir un nombre

Etape 1 : nommer les éléments qui ont une valeur définie seulement à l'exécution (les variables)

Un ordinateur va garder en mémoire des informations. Dans l'instruction 1, on va donc créer un emplacement en mémoire pour mettre un chiffre de 0 à 9. Un emplacement pour stocker une valeur est appelée de manière générale une variable.

On fera par la suite référence à cet emplacement en mémoire (cette variable) pour aller voir quelle est cette valeur entre 0 et 9. Pour y faire référence, on va lui donner un nom.

Notre algorithme devient donc, en rajoutant les éléments en gras :

1. Prendre un chiffre entre 0 et 9 que nous appellerons nombreDeDépart
2. Coller deux fois ce nombreDeDépart, côte à côté, pour obtenir un nombre

Nous allons faire la même chose pour l'instruction 2:

1. 1. Prendre un chiffre entre 0 et 9 que nous appellerons nombreDeDépart
  2. Coller deux fois ce nombreDeDépart, côte à côté, pour obtenir un nombre que nous appellerons Résultat

Etape 2 : se rapprocher d'instructions type programmation ou mathématiques

1. 1. 1. Soit nombreDeDépart un chiffre entre 0 et 9 choisi par l'utilisateur
    2. Soit Résultat le nombre constitué du caractère de nombreDeDépart concaténé à lui même

Les variables

Un élément en mémoire donc le contenu sera accessible par un ordinateur est une variable.

Dans le pseudocode ci-avant, nombreDeDépart et Résultat sont des variables.

En général, un ordinateur consulte la valeur de la variable à partir de son nom.

Faire tourner un algorithme

Le principe de faire tourner un algorithme est de regarder les valeurs prises successivement par les variables d'un programme.

Exemple pour le programme en pseudo code :

1. 1. 1. Soit nombreDeDépart un chiffre entre 0 et 9 choisi par l'utilisateur
    2. Soit Résultat le nombre constitué du caractère de nombreDeDépart concaténé à lui même

Les variables en jeu sont nombreDeDépart et Resultat.

Nous allonc donc faire un tableau avec trois colonnes : Etape, nombreDeDépart et Résultat.

Choisissons une valeur de départ égale à 7, à la premère étape nous avons:

Etape | NombreDeDepart | Résultat

1 | 7 | -

Si nous ajoutons la deuxième étape (ligne rajoutée), nous avons:

Etape | NombreDeDepart | Résultat

1 | 7 | -

2 | 7 | 77

A la fin de l'algortihme, NombreDeDépart vaut 7 et résultat vaut 77

De la mème manière, si le nombre de départ vaut 1:

Etape | NombreDeDepart | Résultat

1 | 1 | -

2 | 1 | 11

Autre exemple: faire tourner un algorithme

Voici un nouveau programme en pseudo code :

1. 1. 1. Soit nombreDeDépart un chiffre entre 0 et 5 choisi par l'utilisateur
    2. Multiplier nombreDeDépart par deux
    3. Soit Résultat le nombre constitué du caractère de nombreDeDépart concaténé à lui même

Les variables en jeu sont nombreDeDépart et Resultat.

Nous allonc donc faire un tableau avec trois colonnes : étape, nombreDeDépart et Résultat.

Choisissons une valeur de départ égale à 1, à la premère étape nous avons:

Etape | NombreDeDepart | Résultat

1 | 1 | -

Si nous ajoutons la deuxième étape, nous avons:

Etape | NombreDeDepart | Résultat

1 | 1 | -

2 | 2 | -

Etape | NombreDeDepart | Résultat

1 | 1 | -

2 | 2 | -

3 | 2 | 22

A la fin de l'algortihme, NombreDeDépart vaut 2 et résultat vaut 22

De la mème manière, si le nombre de départ vaut 4:

Etape | NombreDeDepart | Résultat

1 | 4 | -

2 | 8 | -

3 | 8 | 88

Comme vous l'avez peut-être constatée, la variable nombreDeDépart va prendre successivement deux valeurs: la valeur choisie au départ (étape 1) puis la valeur multipliée par deux (à partir de l'étape 2).

Exercice 1

Faites tourner l'algorithme pour une valeur de nombreDeDépart = 5:

1. 1. 1. Soit nombreDeDépart un chiffre entre 0 et 5 choisit par l'utilisateur
    2. Multiplier nombreDeDépart par deux
    3. Soit Résultat le nombre constitué du caractère de nombreDeDépart concaténé à lui même

Une fois l'exercice réalisé, la correction est visible en dépliant cette section.

Etape | NombreDeDepart | Résultat

1 | 5 | -

2 | 10 | -

3 | 10 | 1010

Organigramme: une autre manière de représenter du code

Sur l'image de gauche, le même programme en pseudo-code est représenter dans un organigramme. Chaque étape ci-après est représentée dans un rectangle, avec un début et une fin :

1. 1. 1. Soit nombreDeDépart un chiffre entre 0 et 5 choisi par l'utilisateur
    2. Multiplier nombreDeDépart par deux
    3. Soit Résultat le nombre constitué du caractère de nombreDeDépart concaténé à lui même

Autre exemple d'organigramme

Sur l'image de gauche, le nouvel algorithme est présenté dans cette figure (organigramme 2).

Exercice 2

Ecrire le pseudo-code correspondant à l'organigramme 2

Une fois l'exercice réalisé, la correction est visible en dépliant cette section.

Nom est le nom de l'utilisateur
Salutation vaut "Bonjour"
Résultat vaut Salutation concaténée avec nom et avec Salutation

Exercice 3

Faites tourner l'algorithme représentée dans l'organigramme 2, avec votre prénom.

Une fois l'exercice réalisé, la correction est visible en dépliant cette section.

Mon prénom est Lauren, nous avons donc :

Etape | nom | Salutation | Résultat

1 | Lauren | - | -

2 | | Bonjour | -

3 | Lauren | Bonjour | BonjourLaurenBonjour

Hello world !

Un programme "Hello world" (ou Bonjour le monde en français) est le nom pour le premier programme que l'on fait traditionnemment dans un langage.

Nous allons donc faire notre premier programme en JavaScript, pour afficher "Hello World".

En JavaScript, un langage de programmation compris par votre navigateur web, le code d'un Hello world est

alert ( "Hello world");

Cela permet d'ouvrir une pop-up qui affiche Hello world.

Nous allons faire exécuter cette instruction par notre navigateur.

Etape 1 Hello world: ouvrir la console web sur Mozilla

Voici comment ouvrir une console web sur Mozilla Firefox, un navigateur internet répendu.

1) Ouvrir Mozilla Firefox

2) Cliquer sur l'icône le menu en haut à droite

3) En bas de ce menu, sélectionner Developpement Web

4) Dans nouveau menu qui s'ouvre, selectionner Console web

5) Votre console web est ouverte en bas de votre page.

Etape 2 Hello world: entrer l'instruction dans la console

Voici comment exécuter le hello world dans votre console web

1) Taper, sans oublier les guillements et le point virgule, dans la console l'instruction suivante: alert("Hello world");

2) Appuyer sur Entrée pour valider votre instruction.

3) une pop-up s'ouvre avec le texte Hello world

4) Vous avez réalisé votre Hello world en JavaScript

Hello world modifié, puis avec une variable

Nous allons réaliser un premier programme avec une variable. Souvenez-vous, nous pourrons désigner un emplacement en mémoire d'un ordinateur par un nom et s'y référer peu importe sa valeur.

Exercice

Modifier votre instruction JavaScript pour que l'affiche soit Bonjour le monde au lieu de Hello world.

Une fois l'exercice réalisé, vous pouvez déplier cette section pour voir la correction

Il suffit de changer le texte entre guillemets:

alert( " Bonjour le monde" );

Une variable en JavaScript se déclare. C'est à dire que l'on va indiquer à l'ordinateur que nous allons créer une nouvelle variable.

Pour cette introduction, nous utiliserons l'instruction var, mais il existe aussi let et const.

Note: ceci n'est pas la meilleure pratique en programmatioon, où l'on préférera const et let; cependant, l'usage de let dans la console peut engendrer des bugs en déclarant deux fois une variable avec le même nom.

Nous allons créer une variable appellée textePourDireBonjour comme ceci:

var textePourDireBonjour;

Attention, en faisant cela, nous donnons un nom à la variable. Javascript est sensible à la casse, c'est à dire que l'on fait la différence entre un texte avec et sans majuscule: textePourDireBonjour est différent de textepourdirebonjour.

Puis nous allons affecter (donner) une valeur à cette variable avec le signe =

textePourDireBonjour= "Bonjour à tous";

Enfin, nous pouvons utiliser cette variable (sans guillemet) dans une instruction alert:

alert(textePourDireBonjour);

Au final, en tapant successivement ces instructions, nous affichons une fenêtre pop up dans laquelle est affichée la valeur de textePourDireBonjour.

Note: il est possible de déclarer puis d'affecter une variable en une ligne au lieu de deux comme présenté ici

var textePourDireBonjour="Bonjour à tous";

Exercice

Imaginons ce petit programme JavaScript:

var textePourDireBonjour;

textePourDireBonjour= "Bonjour à tous";

textePourDireBonjour= "Bonjour, Bonjour";

alert(textePourDireBonjour);

Faites tourner un algorithme pour ce programme. Que vaut la variable textePourDireBonjour au moment de l'afficher dans alert?

Une fois l'exercice réalisé, vous pouvez déplier cette section pour voir la correction

Etape | textePourDireBonjour

1 | - (déclaration de la variable)

2 | "Bonjour à tous"

3 | "Bonjour, Bonjour"

Au moment où la variable textePourDireBonjour est utilisée dans l'instruction alert, elle vaut "Bonjour, Bonjour".

En conséquence, alert affiche Bonjour, Bonjour

Voyons ce qu'il se passe si l'on copie-colle les instructions suivantes:

var textePourDireBonjour;

textePourDireBonjour= "Bonjour à tous";

alert(textePourDireBonjour);

textePourDireBonjour= "Bonjour, Bonjour";

alert(textePourDireBonjour);

Cela affiche toujours la variable textePourDireBonjour, mais qui a changée de valeur entre temps.

Hello world avec le texte rentré par l'utilisateur

Nous allons faire en sorte que la variable textePourDireBonjour soit le texte entré par l'utilisateur.

Pour cela nous allons utiliser l'instruction prompt

Taper en ligne dans la console web:

prompt( );

Cela ouvre une fenêtre où l'on peut taper du texte et appuyer sur OK. C'est l'instruction prompt que nous allons utiliser pour récupérer le texte entré par l'utilisateur.

Nous allons faire en sorte d'afficher affiche le texte entré par l'utilisateur.

Taper en ligne dans la console web:

var textePourDireBonjour;

textePourDireBonjour= prompt( );

alert(textePourDireBonjour);

Le prompt ouvre une fenêtre où l'on peut taper du texte et appuyer sur OK (nous serons alors à la deuxième ligne de ce petit programme).

La valeur entrée par l'utilisateur sera affectée à la variable textePourDireBonjour, car nous avons noté textePourDireBonjour= prompt( ); . De cette manière, la valeur entrée dans la fenêtre du prompt( ) va être stockée dans la variable textePourDireBonjour.

Par la suite, alert affichera cette valeur.

Entre les parenthèses du prompt et entre guillemets, il est possible de marquer du texte que l'on affichera avant le champ pour taper du texte.

Par exemple, pour afficher Comment dites-vous bonjour? , il vous suffit de taper en ligne dans la console web:

prompt( "Comment dites-vous bonjour?");

Cela ouvre une fenêtre où l'on peut taper du texte et appuyer sur OK

Exercice

Vous allez écrire un petit programme JavaScript qui demande comment dire bonjour, qui demande le nom, puis qui combine les deux.

Ecrire le pseudo code
Faites tourner votre algorithme
Ecrire le programme en Javascript

Une fois l'exercice réalisé, vous pouvez déplier cette section pour voir la correction

Question 1:

Soit formuleDePolitesse la formule de politesse rentrée par l'utilisateur
Soit nom le nom rentré par l'utilisateur
Afficher la concatenation de formuleDePolitesse et de nom

Question 2:

Etape | formuleDePolitesse | nom | (texte affiché)

1 | Salut (par exemple) | - |

2 | | Lauren (par exemple) |

3 | Salut | Lauren | SalutLauren

Question 3:

Solution 1 :

var formuleDePolitesse;

formuleDePolitesse=prompt( "Quelle est la formule de politesse ?");

var nom;

nom=prompt( "Quel est votre nom ?");

alert( formuleDePolitesse + nom);

Solution 2 : déclaration et valeur sur la même instruction

var formuleDePolitesse=prompt( "Quelle est la formule de politesse ?");

var nom=prompt( "Quel est votre nom ?");

alert( formuleDePolitesse + nom);

Solution 3 : déclaration, valeur et affichage sur la même instruction

alert( prompt( "Quelle est la formule de politesse ?")+ prompt( "Quel est votre nom ?") );

Note: ajout d'un espace entre le nom et la formule de politesse

Il suffit pour cela de rajouter un espace entre guillements : alert( formuleDePolitesse + " " + nom);

Vous avez fini la première partie (algorithme, pseudo-code, organigramme, faire tourner un algorithme, Hello Word, variables)

Page updated

Report abuse