Technologies informatiques

L1 portail ISI
Du langage algorithmique au JavaScript
Jérémy Rivière (jriviere@univ-brest.fr)

Ce document rappelle la syntaxe du langage JavSript (JS), en traduisant les différents élé-
ments de syntaxe du langage algorithmique utilisé en Technologies informatiques pour écrire
les algorithmes. Cette traduction est détaillée en cours, dont les supports se trouvent sur le
Moodle.

Les algorithmes que l’on vous demandera en TD et en examen seront à écrire

avec le langage algorithmique, tandis que les programmes en TP seront à traduire
en JS.

1 Algorithmes et fonctions
En JavaScript, les algorithmes se traduisent à l’intérieur de fonctions, dans un
fichier .js. Plusieurs fonctions (donc, plusieurs algorithmes) peuvent être écrites dans le même
fichier.

function nom_fonction(){
// traduction de l’algorithme en JS
...
}

Le nom de la fonction nom_fonction doit être le même que le nom de l’évènement

onclick de la balise <button> du code HTML. Par exemple, le nom de la fonction JavaScript
à créer sera valider avec le code HTML suivant :

1
2 Déclarations des variables
Avec une variable v de type type :

Algo JavaScript
type v let v ;

Quel que soit le type de v en algo, sa déclaration en JS n’est pas typée. Exemples :
Algo JavaScript
booleen test let test ;
entier nombre let nombre ;
car virgule let virgule ;
chaine prenom let prenom ;
reel pi let pi ;
entier nombre, note let nombre, note ;
Attention : ne pas utiliser var, let ainsi que if, else etc. comme nom de variable.

3 Affectations et opérateurs
Affectations
Pour affecter une valeur à une variable v, on écrit :
Algo JavaScript
v ← valeur v = valeur;
Quelques exemples :
Algo JavaScript
test ← FAUX test = false ;
nombre ← 14 nombre = 14 ;
prenom ← "machin" prenom = "machin" ;
pi ← 12.5 pi = 12.5 ;

Opérateurs
Les opérateurs permettent de faire des opérations entre des variables et/ou des valeurs de
mêmes types. Il existe 4 sortes d’opérateurs :
1. Opérateurs de comparaison :
Algo JavaScript
= ==
< <
> >
≤ <=
≥ >=
̸= !=

2
 2. Opérateurs booléens :
Algo JavaScript
ET &&
OU ||
NON !
XOR ^
VRAI true
FAUX false
3. Opérateurs arithmétiques :
Algo JavaScript
+-×/ + - * /
a div b Math.floor(a / b)
a mod b a % b
np n ** p
4. Opérateur pour concaténer les chaînes de caractères en JavaScript :

4 Commentaires
En JS, une ligne de commentaires commence par //

De la même façon que dans le langage algorithmique, un bloc de commentaires, délimité

par /* et */, peut également être utilisé en JavaScript.

5 Lire et afficher
En JavaScript, les actions de lire une valeur donnée par l’utilisateur ou d’afficher un
résultat se basent sur le code HTML et les balises <input> données.

3
 De manière générale, la traduction JavaScript de l’instruction v ← lire() est la suivante :

Algo JavaScript
v ← lire() v = document.getElementById(id_input).value;
! ! id_input est à remplacer par l’identifiant de la balise input choisie ! !

Par exemple, si le code HTML et le rendu dans un navigateur web sont les suivants :

Pour lire le nombre entré dans l’input HTML d’identifiant "nombre" (ligne 16), la tra-
duction en JavaScript dans le fichier script.js sera :

nbr = Number(document.getElementById("nombre").value);
! ! Le mot-clé Number sert à transformer la chaine lue en un nombre entier ou réel ! !

4
 De la même façon, pour afficher un résultat la traduction JavaScript de l’instruction
afficher est :
Algo JavaScript
afficher(chaine) document.getElementById(id_input).value = chaine;
! ! id_input est à remplacer par l’identifiant de la balise input choisie ! !
Par exemple, si le code HTML et le rendu dans un navigateur web sont les suivants :

Pour afficher une chaine dans l’input HTML d’identifiant "resultat" (ligne 28), la tra-
duction en JavaScript dans le fichier script.js sera :
document.getElementById("resultat").value = chaine;

5
6 Conditionnelles
Écrire une expression conditionnelle (faire un test) :

Algo JavaScript

if(condition){
Si condition // Bloc d’instructions 1
Alors }
\\ Bloc d’instructions 1
Sinon else{
\\ Bloc d’instructions 2 // Bloc d’instructions 2
FinSi }

La condition a une valeur booléenne, VRAI ou FAUX.

Exemple :

Si a > b
Alors if(a > b){
temp ← a temp = a;
a←b a = b;
b ← temp b = temp;
FinSi }

7 Boucles : tant que, jusqu’à, pour

7.1 Boucle tant que
Écrire une boucle qui se répète tant que la condition est vraie :

Algo JavaScript
Tant que condition
Faire while(condition){
\\ Instructions // Bloc d’instructions
FinTantQue }

Exemple :

nombre ← 0 nombre = 0;
Tant que nombre < 7 while(nombre < 7){
Faire nombre = nombre + 1;
nombre ← nombre + 1 document.getElementById("resultat")
afficher(nombre) .value = nombre;
FinTantQue }

6
 Le même algorithme, mais avec un passage minimum obligé dans la boule :

nombre ← 0 nombre = 0;
Faire do {
nombre ← nombre + 1 nombre = nombre + 1;
afficher(nombre) document.getElementById("resultat")
Tant que nombre < 7 .value = nombre;
} while(nombre < 7);

7.2 Boucle jusqu’à

L’instruction algorithmique Jusqu’à n’a pas de traduction directe en JavaScript, mais
s’implémente comme une boucle Tant que, avec un while.

7.3 Boucle pour

Écrire une boucle qui se répète un certain nombre de fois, connu à l’avance :

Algo JavaScript
Pour i de debut à fin for(i=debut;i<=fin;i=i+1){
Faire // Instructions
\\ Instructions }
FinPour

Un exemple simple :

nombre ← 0 nombre = 0;
Pour i de 1 à 7 for(i=1;i<=7;i=i+1){
Faire nombre = nombre + 1;
nombre ← nombre + 1 document.getElementById("resultat")
afficher(nombre) .value = nombre;
FinPour }

En JavaScript, l’instruction i=i+1 dans le for représente le pas de la boucle Pour :

elle signifie que la variable i est incrémentée de 1 à chaque tour de boucle. Cette instruction
peut être remplacée par i=i+2 pour un pas de 2, par i=i-1 pour un pas de -1 etc.

Algo JavaScript
Pour i de debut à fin (pas x) for(i=debut;i<=fin;i=i+x){
Faire // Instructions
\\ Instructions }
FinPour

7
8 Dessins
Pour pouvoir dessiner dans la balise canvas, il faut au préalable écrire les deux lignes
suivantes dans le fichier script.js :

const canvas = document.querySelector(".myCanvas");

const ctx = canvas.getContext("2d");

La variable ctx peut ensuite être utilisée pour utiliser les fonctions prédéfinies suivantes :

Fonctions Description
ctx.beginPath(); Commencer à dessiner une figure fermée
ctx.closePath(); Indiquer que le dessin de la figure fermée
est terminé
ctx.stroke(); Dessiner la(les) figure(s) fermée(s)
ctx.strokeStyle(); Définir la couleur utilisée pour dessiner
ctx.fill(); Colorier l’intérieur d’une figure fermée
ctx.fillStyle = "red"; Définir la couleur utilisée pour colorier l’intérieur
d’une figure fermée (ici, rouge)
ctx.arc(x, y, rayon, 0, 2 * Math.PI); Dessiner un cercle de centre (x,y) et de rayon r
ctx.moveTo(x,y); Déplacer (sans tracer) le stylo aux coordonnées (x,y)
ctx.lineTo(x,y); Dessiner une ligne droite du point de départ actuel
jusqu’aux coordonnées (x,y)
ctx.strokeRect(x,y,base,hauteur); Dessiner un rectangle dont le point de départ (x,y)
est en haut à gauche, et de dimensions base x hau-
teur

De plus, pour effacer le canvas avant de dessiner, on pourra utiliser au début de chaque
fonction l’instruction ctx.clearRect(0, 0, canvas.width, canvas.height);

9 Tableaux
Comme exemple, on pourra prendre le tableau d’entiers tab suivant :

4 -2 6 7 2 -1 9
0 1 2 3 4 5 6

9.1 Déclaration d’un tableau

Pour déclarer un tableau tab, on écrit :

type[] tab let tab = new Array();

8
9.2 Initialisation d’un tableau
Initialiser un tableau tab avec taille cases vides, ou en lui affectant directement un ensemble
de valeurs s’écrit :

initTab tab[taille] tab = new Array(taille);

initTab tab ← {2,3,5} tab = [2,3,5];

Pour initialiser le tableau d’entiers tab de l’exemple (7 cases, indices de 0 à 6) :

tab = new Array(7);

9.3 Lecture et écriture dans un tableau

Pour lire un élément d’un tableau, et affecter sa valeur à une variable n, on écrit :
Algo JavaScript
n ← tab[indice] n = tab[indice];

Pour écrire (ranger) la valeur de n dans un tableau, on écrit :

Algo JavaScript
tab[indice] ← n tab[indice] = n;

9.4 Autres opérations sur les tableaux

Pour connaître la taille d’un tableau, on récupère sa propriété length :
Algo JavaScript
tab.taille tab.length

L’indice de la dernière case d’un tableau ne se traduit pas en JavaScript, mais est égale
à la taille - 1 :
Algo JavaScript
tab.indice tab.length - 1

Pour redimensionner un tableau, et lui donner une nouvelle taille, il suffit de modifier
sa propriété length en lui attribuant une nouvelle valeur. Le redimensionnement conserve
les valeurs des cases non concernées dans le tableau : il est donc équivalent à l’instruction
algorithmique fixer et conserver.

Algo JavaScript
fixer et conserver tab[ntaille] tab.length = ntaille;

Par exemple, si on écrit :

tab.length = 3;
Le tableau tab devient :
5 -2 6
0 1 2