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)

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.

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.

Voici la représentation d'un algorithme.

Exécutons celui-ci pas à pas:

1. Prendre un chiffre entre 0 et 9

2. Coller deux fois ce chiffre, côte à côté, pour obtenir un nombre

Première exécution:

1. Prenons par exemple le chiffre 2

2. Cela donne 22

Deuxième exécution:

1. Prenons par exemple le chiffre 9

2. 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.

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 :

1. Prendre un chiffre entre 0 et 9

2. 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 :

2. 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:

2. 2. 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

2. 2. 2. 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

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.

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. 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

Voici un nouveau programme en pseudo code :

1. 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).

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. 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

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

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.

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

1) Ouvrir Mozilla Firefox

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

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.

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.