Traduire un algorithme...

...En un langage informatique

Les alogorithmes permettent de conceptualiser une réponse ou une solution à une question ou un problème en se détachant des contraintes de la langue ou des contraintes propres à chaque langage informatique.
Une fois la réponse ou la solution trouvée, il suffit de "traduire" l'algorithme obtenu dans le langage de transposition souhaité.

Cette traduction, comme pour toute langue, va nécessiter d'avoir un certain vocabulaire et des connaissances en grammaire, relativement basique pour un langage informatique mais très stricte afin d'éviter de mauvaises interprétations.

...En JavaScript (JS)

Javascript est un langage client, ce qui signifie que c'est le "client" (le navigateur utilisé) qui se charge de "décoder" et d'exécuter le(s) script(s) fournis.
Cela facilite son apprentissage car à contrario d'un langage serveur (comme PHP), il n'y a rien besoin de plus : pas de serveur en charge de décoder le script pour en fournir un fichier exploitable par le client (= navigateur).

JavaScript VS PHP

Déclaration

La déclaration en JavaScript ne permet pas de préciser le type qui va être contenu dans la variable. Cette déclaration se fait de deux manières, chacune utilisant un mot clef :

• var ma_variable;
• let ma_variable;

Il existe une différence majeure entre les deux (le scope) mais au niveau de ce cours, les deux vont être considérés comme identiques. Afin de simplifier ce cours, l'utilisation du mot clé "let" sera privilégié.

En algo :

Variable taille_panier : entier
Variables montant, tva, montant_tva, montant_total : réel
Variables nom_client : chaîne de caractères

traduit en JS :

let taille_panier;
let montant, tva, montant_tva, montant_total;
let nom_client;

Comme en algo, la déclaration d'une variable n'est à faire qu'une fois.

Affectation

L'affectation est réalisé en utilisant le symbole =.

let taille_panier;
taille_panier = 3;

Méthodes alert / écrire

La méthode alert() permet d'afficher vers l'utilisateur une information et correspondra à l'utilisation en algo de "écrire".

En algo :

écrire "ici un texte à afficher"

traduit en JS :

alert('ici un texte à afficher');

alert('bonjour');

Méthodes prompt / lire

La méthode prompt() permet de récupérer une information de l'utilisateur et correspondra donc à "lire".
La particularité de prompt() est qu'il va permettre d'indiquer ce qui est attendu et donc faire ce qui était fait avec un "écrire" précédent un "lire", le tout en une instruction.

En algo :

Variable chiffre : entier
écrire "donner un chiffre entre 1 et 100"
lire chiffre
            

traduit en JS :

let reponse;
reponse = prompt("donner un chiffre entre 1 et 100");

La méthode prompt() ne peut récupérer qu'une seule valeur à la fois. Si vous avez besoin de lire plusieurs informations de l'utilisateur, il faudra pour chaque valeur définir l'instruction prompt().

let reponse;
reponse = prompt('Bonjour ! Ecrivez votre prénom :');
alert(reponse);

Commentaires

Basé sur C/C++, il existe deux moyens de commenter qui sont :

• commentaire sur une seule ligne en précédent le contenu de //
• commentaire sur plusieurs en ligne en commençant par /* et en finissant par */

//déclaration de variable
let prix_article, montant_total;
let quantite;
/* calcul du montant total obtenu en
multipliant le prix par la quantité */
montant_total = prix_article * quantite;

ceci est un commentaire sur une ligne
alert("Un texte à afficher");	ici encore un commentaire
ceci est un commentaire sur plusieurs lignes
ceci est la 2ème ligne du commentaire sur plusieurs lignes
alert("Un autre texte à afficher");		encore un commentaire sur une ligne

Débugger

L'un des grands problèmes lorsque l'on écrit en JavaScript est la gestion des erreurs par ce langage. En effet, si une erreur survient, il arrive souvent que le script est tout simplement arrété sans afficher aucune information directement.

Pour accéder aux informations, il faut consulter la "console", un outil mis à disposition par les navigateurs pour aussi bien coder que débugger. Pour y accéder :

• sur Chrome
  • Menu
  • Plus d'outils
  • Outils de développement (ou Ctrl + Maj + I pour ouvrir directement)
  • un encart s'ouvre sur l'onglet "console"
• sur Firefox
  • Menu
  • Développement web
  • Console web (ou Ctrl + Maj + K pour ouvrir directement)
  • un encart s'ouvre sur l'onglet "console"

Méthode console.log()

Autre méthode pour afficher un contenu, mais cette fois, plus à destination du développeur, la méthode console.log() permet d'afficher directement au niveau de la console ce qui est placé entre parenthèse.

//déclaration des variables
let prenom;
//instructions
prenom = 'Antoine';
console.log(prenom);
console.log('La console affiche ceci');

Variable

Comme vu précédemment, la déclaration d'une variable se fait en utilisant le mot clef "let" suivi du nom de la variable qui doit respecter les règles suivantes :

1. doit commencer par une lettre ou le caractère underscore ( _ )
2. ne peut pas commencer par un chiffre
3. doit contenir une ou plusieurs lettres, un ou plusieurs chiffres et/ou un ou plusieurs underscores
4. ne doit contenir aucun espace
5. est sensible à la casse (minuscule / majuscule) : nom_de_variable et NOM_de_variable sont 2 variables différenciées
6. doit eviter de contenir des caractères accentués, source de problème avec l'encodage du fichier (étape -> etape)

Le nom d'une variable doit être défini de manière à aider à la compréhension des instructions / du programme : compteur, ville.

A noter que rien ne permet d'identifier une variable, aucun caractère (comme le $ en PHP), n'est ajouté lors de l'utilisation d'une variable.

Type de variable

Le contenu d'une variable (sa valeur) peut être de différents types :

• des types primitifs de données
  • type booléen : bool en anglais, ne peut contenir que les valeurs "vrai" ou "faux" (true / false)
  • type number : il comprend tous les types numériques, des entiers aux nombres à virgule
  • type chaîne de caractères : string en anglais
  • type undefined : mot clé qui correspond à la valeur d'une variable déclarée mais non initialisée
  • type null : mot clé permettant de "vider" une variable
• un type pour les objets
  • type object

Javascript est un langage faiblement typé, utilisant le typage dynamique.

Cela signifie que c'est le contenu de la variable qui va définir son type : si la variable contient une chaîne de caractères, elle est de type chaîne de caractères ; si elle contient un entier, elle est de type numérique (number).

Néanmoins, s'agissant de la traduction d'un algorithme, le respect du type sera à maintenir en Javascript.

Chaîne de caractères

Le type chaîne de caractères se définit avec les simples ou les doubles quotes.

//déclaration des variables
let ville;
let code_postal;
//instructions
ville = 'Metz';
ville = "Metz";
code_postal = "57000";

Echappement de caractère

Si dans la chaîne de caractères figure le caractère utilisé pour définir la chaîne, il est possible de l'échapper pour que celui-ci ne soit pas pris en compte par l'interpréteur Javascript.
Pour cela, il faut utiliser le caractère \ (altgr + 8) devant le caractère.

//déclaration des variables
let citation, saison;
//instructions
citation = "Jules Verne : \"On peut braver les lois humaines, mais non résister aux lois naturelles.\"";
saison = 'L\'automne est à nos portes';

Concaténation

La concaténation est probablement l'instruction la plus courante portant sur les chaînes.
Il s'agit de "coller" 2 éléments de type chaîne (généralement) en utilisant le symbole "+" (appelé alors opérateur de concaténation) entre les éléments.

//déclaration des variables
let prix_panier_TTC;
//instructions
console.log("La ville de " + "Metz");
alert("Le prix TTC est de " + prix_panier_TTC);

L'opérateur de concaténation utilisant le symbole + comme l'opérateur d'addition, des bugs donnant des résultats surprenants peuvent survenir.

//déclaration des variables
let sexe;
let departement;
let debut_num_sec_soc;
//instructions
debut_num_sec_soc = sexe + departement;
//comme les opérandes sont de type number, ça fera la somme et non une concaténation

La solution ? Transformer au moins l'un des éléments en chaîne (attention au respect du typage) ou ajouter une chaîne vide au début de la concaténation :

debut_num_sec_soc = "" + sexe + departement; //concaténation

Ce problème ne survenant que dans le cas où uniquement des valeurs numériques sont utilisées, ça n'est pas nécessaire si la concaténation implique 1 ou plusieurs chaîne de caractères.

Opérateurs de comparaison

Comme en mathématique, il est possible de comparer des valeurs entre elles avec :

• x est strictement supérieur à y: x > y
• est supérieur ou égal : x >= y
• est strictement inférieur : x < y
• est inférieur ou égal : x <= y
• est égal à : x == y
• est différent de : x != y

Un test de comparaison entre des valeurs est constitué de 2 opérandes et d'un opérateur uniquement.

Il n'est pas possible d'écrire 10 <= x < 100 directement.

Un tel test s'écrit en utilisant deux parties : (x >= 10) && (x < 100)

Une erreur courante consiste à confondre l'affectation (=) et la comparaison d'égalité (==).

let est_complet;
est_complet = false;    //affectation
console.log(est_complet = true);    //écrira true alors que false est attendu !

L'affectation réussissant la valeur "true" est renvoyé. Pour comparer, il faut donc faire attention de ne pas oublier de symbole =.

let est_complet;
est_complet = false;    //affectation
console.log(est_complet == true);    //écrira false (réponse attendue)

Exercice global

Dans cet exercice, vous allez reprendre tout ce qui a été vu.

Conditionnel

Les tests conditionnels permettent de changer le comportement d'un programme en fonction de variables, d'événements, d'action ou de choix de l'utilisateur. Cela permet d'apporter une variation à une réponse par exemple.

si ma condition est vraie alors
    j'applique une ou plusieurs instructions
sinon
    j'applique une ou plusieurs autres instructions
finsi

Pour traduire cela en Javascript, il faut utiliser les mots clés if et else :

if (condition) {	//accolade ouvrante
    instruction(s);
} else {
    instruction(s);
} //accolade fermante

Les accolades délimitent ce qu'on appelle un bloc. Dans l'exemple précédent, il y a donc 2 blocs : l'un pour le cas où la condition est vraie, et l'autre dans le cas contraire.

Imbrication

Si plusieurs cas de figure sont à prendre en compte, il est possible de faire un test propre pour chacun des cas. Néanmoins, si le test concerne un même élément, le plus simple est d'imbriquer les tests.

if (lettre == 'a') {
    alert("Vous avez tapé la lettre 'a');
}
if (lettre == 'b') {
    alert("Vous avez tapé la lettre 'b');
}
//etc...

Avec l'exemple ci-dessus, si la lettre tapée est 'a', la comparaison avec la lettre 'b' est réalisée. En imaginant qu'il y ait ainsi les 26 lettres de l'alphabet, il y aurait 26 tests de réalisé.

if (lettre == 'a') {
    alert("Vous avez tapé la lettre 'a');
} else {
    if (lettre == 'b') {
        alert("Vous avez tapé la lettre 'b');
    } else {
        if (lettre == 'b') {
            alert("Vous avez tapé la lettre 'b');
        }
    }
}
//etc...

Avec l'exemple ci-dessus, si la lettre tapée est 'a', un seul test est réalisé.

Ce genre de structure est une imbrication de tests conditionnels : un ou plusieurs tests contenus dans le bloc d'un autre test.

En utilisant "else if", il est possible de limiter le nombre de bloc à créer (nombre d'accolade) :

if (lettre == 'a') {
    alert("Vous avez tapé la lettre 'a');
} else if (lettre == 'b') {
    alert("Vous avez tapé la lettre 'b');
} else if (lettre == 'c') {
    alert("Vous avez tapé la lettre 'c');
}
//etc...

Contrairement à PHP, "sinon si" en Javascript s'écrit avec les deux mots clés détachés.

Conditions liées et opérateurs booléens

Si la condition est une condition composée (constituée de plusieurs tests), il faut liés les tests en utilisant les opérateurs booléens :

• ET sera remplacé par l'opérateur &&
• OU par ||
• NON par !

if (nombre_utilisateur % 2 == 0 && nombre_utilisateur % 3 == 0) {
	alert('Le nombre donné est un multiple de 2 et de 3');
}
if (nombre_utilisateur % 2 == 0 || nombre_utilisateur % 3 == 0) {
	alert('Le nombre donné est un multiple de 2 ou de 3');
}
if (!(temperature < 0)) {
	alert('Il ne gèle pas');
}

let valeur = "12"; //chaine de caractère
let valeur_decimale = parseFloat(valeur);

Simplification d'écriture

La condition dans un test est une instruction qui renvoie un valeur de type booléenne.
Si l'utilisateur recherche un mot et que le mot est trouvé,

let est_mot_correct;

//... code permettant de définir le mot à trouver et de récupérer le mot donné par l'utilisateur
//... modification du contenu de la variable est_mot_correct

if (est_mot_correct == true) {
    alert('Vous avez trouvé le mot !');
}

Le test peut être modifié ainsi :

if (est_mot_correct) {
alert('Vous avez trouvé le mot !');
}

Pour réagir à un cas contraire, on utilise l'opérateur ! qui inverse une valeur :

if (!est_mot_correct) {
alert('Vous n\'avez pas trouvé le mot !');
}

if (depart_demain == true) {
	if (reservation_hotel_non_prise == true) {
		alert('Reservez votre hôtel !');
	}
	if (valise_prete == false) {
		alert('Vous devez faire votre valise');
	} else {
		if (billet_imprime == true) {
			alert('Vous êtes prêt pour votre départ demain');
		}
	}
}

De la même manière, en Javascript, 1 est équivalent à true et 0 à false.

if ( ! (1-1) ) {
	alert('ok');
}

if (nombre_utilisateur % 3 == 0) {
	alert('Le nombre donné est un multiple de 3');
}
if (nombre_utilisateur % 2 == 1) {
	alert('Vous avez insrit un nombre impair');
}

Il n'y a pas que 1 qui soit équivalent à vrai mais 242 ou -1 ou -242 ou une chaîne de caractères non vide

Traduction d'un algorithme

En utilisant ce qui a été vu jusqu'à présent, traduisez les algo suivants :

Variable temp : entier
Variables est_glace, est_vapeur : booléen
Début
    écrire "Entrez la température de l’eau :"
    lire temp
    est_glace  temp <= 0
    est_vapeur  temp < 100
    Si est_glace Alors
        écrire "C’est de la glace"
    SinonSi est_vapeur Alors
        écrire "C’est du liquide"
    Sinon
        écrire "C’est de la vapeur"
    Finsi
Fin

Variable
    heure, minute : entier

Début
    écrire "Donnez l'heure qu'il est : "
    lire heure
    écrire "Donnez les minutes : "
    lire minute

    SI minute = 59 ALORS
        SI heure = 23 ALORS
            heure <- 0
        SINON
            heure <- heure + 1
        FINSI
        minute <- 0
    SINON
        minute <- minute + 1
    FINSI

    écrire "Dans une minute, il sera " & heure & " heure(s) " & minute & "."
Fin

let valeur = "12"; //chaine de caractère
let valeur_decimale = parseFloat(valeur);

Variable
    année : entier
    est_bissextile : booléen

Début
    écrire "Indiquez une année : "
    lire année

    SI (année modulo 400 = 0 OU (année modulo 4 = 0 ET NON(année modulo 100 = 0)) ALORS
        écrire année & "est une année bissextile."
    SINON
        écrire année & "n'est pas une année bissextile."
    FINSI
Fin

Programme Assurance
Variable cotisation : réel
Variable genre : caractère
Variable age, incident, annee_permis : entier

DEBUT
    cotisation <- 500

    écrire "incidents durant les 3 dernières années ?"
    lire incident

    SI incident >= 3 ALORS
        écrire "Assurance impossible"

    SINON
        //assurance possible
        écrire "l'âge de l'assuré ?"
        lire age

        écrire "le genre de l'assuré (h/f) ?"
        lire genre

        écrire "permis depuis combien d'année ?"
        lire annee_permis

        SI age <= 25 ALORS
            cotisation <- cotisation + 80

            SI genre = 'h' ALORS
                cotisation <- cotisation + 15
            SINON
                cotisation <- cotisation + 5
            FINSI
        SINON
            SI genre = 'f' ALORS
                cotisation <- cotisation - 10
            FINSI
        FINSI

        SI annee_permis >= 4 ALORS
            cotisation <- cotisation - (annee_permis - 4) * 10
        FINSI

        SI incident > 0 ALORS
            cotisation <- cotisation + (incident * 30)
        FINSI
    FINSI
FIN

Boucle conditionnelle

Si une ou plusieurs instructions doivent être exécutées de manière répétée tant qu'une condition est vraie, les boucles conditionnelles sont l'outil idéal.
En Javascript, on parle de boucle while :

while (condition_valide) {
	instructions itératives
}

Un cas d'exemple est le suivant :

let est_renseigne = false;
let texte;
//tant que l'utilisateur n'a rien inscrit, on continue de demander
while (!est_renseigne) {
	texte = prompt("Votre nom ?");
	if (texte != '') est_renseigne = true;
}

Boucle do..while

Variante de la boucle while, la boucle do..while vérifie le respect de la condition une fois sorti du bloc d'instructions et non avant comme dans une boucle while.

let est_renseigne = false;
let texte;
do {
	texte = prompt("Votre nom ?");
	if (texte != '') est_renseigne = true;
} while (!est_renseigne);

let mot;
mot = 'javascript';
console.log( mot.length );

Tableaux

Les tableaux sont des structures qui permettent d’organiser des variables de même type (normalement) et sous un même thème : on parle d’ensemble de variable. L’intérêt est que l’ensemble des variables est centralisé sous un nom, rendant ainsi la manipulation d'un jeu de données plus simple.

Pour déclarer un tableau vide :

let jours;
jours = [];

Pour déclarer et pré-remplir un tableau :

let jours;
jours = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"];

Contrairement à l'algorithme, on ne définit pas la taille du tableau : cela est géré dynamiquement.

Le premier indice d'un tableau est 0

Pour accéder à un indice du tableau, il faut utiliser la position de l'indice :

console.log(jours[0]);   //inscrira "lundi" dans la console

Pour connaître la taille d'un tableau, il faut utiliser la propriété length :

console.log( jours.length );

Tableaux et boucles conditionnelles

Pour afficher le contenu d'un tableau, une boucle conditionnelle peut être utilisée. La condition de poursuite est que l'on ait pas atteint la fin du tableau.
En plus du tableau lui-même, il nous faut définir :

• définir une variable qui va servir de repère dans l'index en cours de passage que l'on va nommer index
• définir une variable contenant la taille du tableau, nommée simplement taille qui aidera à déterminer la limite
• ne pas oublier d'augmenter compteur sous peine d'être coincé dans la boucle (boucle infinie)

let jours;
jours = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"];
let taille;
let index = 0;
taille = jours.length;

while (index < taille) {
	console.log( jours[index] );
	index = index + 1;
}

Boucle itérative

Si une ou plusieurs instructions doivent être exécutées de manière répétée un nombre prédéterminé de fois, la boucle For est l'outil idéal.
La boucle for peut être comparé à un ascenseur direct : imaginons qu'à partir du 1er étage, on souhaite aller jusqu'au 6ème, forcément, l'ascenseur passera devant les autres étages (qu'il s'y arrête ou pas). En connaissant l'étage de départ et celui de l'arrivée, il est facile de déterminer le nombre d'étage parcouru.

La construction de la boucle For est consituée de 3 parties qui sont :

for (initialisation_compteur; condition_de_poursuite; pas_du_compteur)

• initialisation_compteur permet d'indiquer la valeur de départ du compteur
• condition_de_poursuite permet d'indiquer la condition à respecter pour que la boucle se poursuive
• pas_du_compteur indique à quelle vitesse le compteur grandit (ou diminue)

Par exemple :

for (let i = 0; i < 10; i++) {
	console.log('passage n° ' + i + ' dans la boucle');
}

Boucles itératives et tableaux

Du fait de la présence d'un compteur dans la boucle For et d'un index dans le tableau, les deux ayant un comportement similaire (type entier, grandissant généralement d'un cran), la boucle For se trouve être l'outil idéal pour parcourir le contenu d'un tableau.

let jours;
jours = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"];
let taille;
taille = jours.length;

for (let compteur = 0; compteur < taille; compteur++) {
    console.log( jours[compteur] );
}

Traduction d'algorithmes

En utilisant tout ce qui a été vu jusqu'à présent, traduisez ces algorithmes en Javascript :

tableau t(10) : entier
variable v, i, j : entier

Debut
	pour i de 0 à 9 par 1
		lire t[i]
	finpour

	lire v

	j <- 0
	pour i de 0 à 9 par 1
		si t[i] = v alors
			j <- j + 1
		finsi
	finpour
	ecrire j
Fin

tableau t(10) : entier
variable v, i : entier
variable j : booléen

Debut
	pour i de 0 à 9 par 1
		lire t[i]
	finpour

	lire v

	j <- faux
	i <- 0
	tantque j = faux ET i <= 9 faire
		si t[i] = v alors
			j <- vrai
		finsi
		i <- i + 1
	fintantque

	si j = vrai alors
		ecrire 1
	sinon
		ecrire 0
	finsi
Fin

tableau t(10) : entier
variable v, i, c : entier

Debut
	pour i de 0 à 9 par 1
		v <- 0
		tantque v <= 0 OU v > 100 faire
			lire v
		fintantque
		t[i] <- v
	finpour

	c <- 0
	pour i de 0 à 9 par 1
		si t[i] < 50 alors
			c <- c + 1
		finsi
	finpour

	ecrire c
Fin