Algorithmes avec l'éditeur JavaScript en Ligne

Cette page permet d'entrer dans le cadre de droite en haut des petits programmes écrits en javascript.

Quand on clique sur le bouton EXE le programme s'exécute.

A. Quelques notions de javascript

Un programme en javascript est constitué de plusieurs instructions séparées par un point-virgule. L'usage est de mettre une instruction par ligne.

1) Instructions d'entrée-sortie

Ces instructions permettent de communiquer avec l'utilisateur du programme. Nous en avons fabriqué deux pour ce cours :

L'instruction afficher : elle permet au programme d'imprimer des messages dans le cadre en bas à droite.
Exemple : afficher(1+2);
Vous pouvez écrire plusieurs choses à la fois, en séparant les arguments par une virgule.
Exemple : afficher("1+2=",1+2);
L'instruction demander : grâce à cette instruction, le programme peut demander des données à l'utilisateur.
Par exemple, var n=demander("Entrez le nombre : ") demande à l'utilisateur d'entrer un nombre et stocke le résultat dans la variable n.

Si l'utilisateur entre plusieurs données à la fois, séparées par une virgule ou par un point-virgule, celles-ci seront stockées dans une suite. Soit par exemple l'instruction :
var v=demander("Entrez xA et yA séparées par une virgule");
Si on répond "-1, 3" ou "-1 ; 3", la variable v est alors égale à la suite (-1 ; 3), de premier terme v[0] et de second terme v[1]. L'instruction afficher(v[0]) affichera donc -1.

Vous pouvez aussi écrire vos résultats sous forme de tableaux. Le petit programme suivant montre comment faire :

var monTableau=new tableau("Article","Prix");
monTableau.ajouter("cafe",0.40);
monTableau.ajouter("petit pain",0.70);

La première ligne fabrique un nouveau tableau qu'on nomme "monTableau". Ce tableau comportera deux colonnes "Articles" et "Prix"
Les lignes suivantes remplissent le tableau (une instruction par ligne).

2) Variables et affectation

Dans un programme, une variable a exactement le même sens qu'en mathématiques. C'est une lettre ou un mot qui désigne quelque-chose de ... variable.
Le mot-clé var permet de créer une variable et l'opérateur = lui affecte une valeur. Soit par exemple le petit programme :

var n;
n=2;
afficher(n);

La première ligne créee une variable nommée n.
La seconde lui affecte la valeur 2.
La troisième l'écrit dans le cadre du bas.

Attention ! Comme dans la plupart des langages de programmation, le symbole = est un opérateur d'affectation (pour donner une valeur à une variable). L'opérateur mathématique d'égalité est représenté par le symbole ==.
Par exemple, le petit programme suivant est parfaitement valide :

var n=2;
afficher(n);
n=n+1;
afficher(n);

La troisième ligne est surprenante, puisque de toute évidence n est différent de n+1 ! En fait, l'instruction n=n+1 change la valeur de n en augmentant l'ancienne valeur de 1 unité : il faudrait lire "n devient n+1".

3) Instructions conditionnelles

Nous allons constuire un petit programme qui simule le lancement d'une pièce de monnaie ayant les mêmes probabilités de tomber sur "pile" ou sur "face".

Algorithme :

1) Tirer au sort un nombre réel x entre 0 et 1.
2) Si x<0.5 alors écrire "Pile".
3) Sinon, écrire "Face".

Traduction en javascript :

var x=Math.random();
if (x<0.5)
afficher("Pile");
else
afficher("Face");

Pour visualiser la structure du programme, certaines lignes sont décalées par rapport aux autres. Vous obtiendrez automatiquement cette présentation en cliquant sur le bouton "indente".

Dans une instruction if :

On écrit && pour "ET"
On écrit || (AltGr-6 AltGr-6) pour "OU".
Taper == pour "égal" et != pour "différent de"

4) Blocs d'instructions

L'exemple précédent pose un nouveau problème : comment s'y prendre si on doit exécuter plusieurs instructions pour chaque alternative de l'instruction conditionnelle ?

La réponse est simple : il faut regrouper ces instructions en un bloc qui sera délimité par des accolades.

Nous allons construire un petit programme capable de déterminer l'équation d'une droite connaissant deux points A et B.

Algorithme

1) Demander les coordonnées de A
2) Demander les coordonnées de B
3) Afficher les coordonnées de A et de B
4) Si A et B sont confondus, afficher un message d'erreur
5) Sinon, si xA et xB sont égaux, afficher l'équation x=xA
6) Sinon, calculer le coefficient directeur m, puis l'ordonnée à l'origine p, puis afficher l'équation y=mx+p.

Programme

var xA=demander("Entrez xA");
var yA=demander("Entrez yA");
var xB=demander("Entrez xB");
var yB=demander("Entrez yB");
afficher("A(", xA, ",", yA, ") B(", xB, ",", yB, ")");
if (xA==xB && yA==yB)
    afficher("entrez deux points differents");
else if(xA==xB)
     afficher("(AB) : x=", xA);
else {
    var m=(yB-yA)/(xB-xA);
    var p=yA-m*xA;
    afficher("(AB) : y=", m, "x +",p);
}

5) Boucles

Une boucle est formée d'instructions qu'on va pouvoir répéter plusieurs fois.

Par exemple, on peut imaginer un programme qui imprimerait la table de multiplication par douze. On pourrait bestialement écrire :

afficher("0*12=",0*12);
afficher("1*12=",1*12);
// je vous épargne la suite...

Au lieu de cela, on écrira une boucle avec l'instruction while :

Algorithme

1) Créer une variable appelée "i" lui donner la valeur 0;
2) Ecrire le résultat de la multiplication de i par douze
3) Augmenter i d'une unité
4) Si i<11, retourner à l'étape 2

Programme

var i=0;
while (i<11) {
afficher("12*",i,"=",12*i);
i=i+1;
}

On peut aussi programmer cet algorithme avec l'instruction for :

var i;
for (i=0 ; i<11 ; i++) {
afficher("12*",i,"=",12*i);
}

6) Fonctions

En programmation, la notion de fonction est exactement la même qu'en mathématiques : une fonction calcule quelque chose "en fonction" d'une variable. Par exemple, soit la fonction f définie sur IR par f(x)=x².
Cette fonction se programme ainsi an javascript :

function f(x){
return x*x;
}

Il suffira de taper un peu plus loin "ecrire(f(3))" par exemple pour utiliser la fonction f : exactement comme en mathématiques !

Quelques fonctions prédéfinies

Javascript possède des fonctions mathématiques que vous pouvez utiliser dans vos programmes.

Math.floor(6.5) : retourne 6
Math.abs(-6.5) : retourne 6.5
Math.pow(6, 3) : retourne 6 au cube
Math.sqrt(16) : retourne 4
Math.min(2, 5) : retourne 2
Math.max(2, 5) : retourne 5
Math.random() : retourne un nombre pseudo-aléatoire entre 0 et 1

B. Dessiner avec Javascript

Les fonctions de dessin sont disponibles sous les navigateurs Firefox, Safari, Chrome et Opéra.

Pour dessiner, on construira un repère avec l'instruction :
new repere(xMin,yMin,xMax,yMax,larg,haut)
Par exemple :

var r=new repere(-10, -10, 10, 10, 300, 200);
r.couleurTrait("blue"); r.allerEn(5,5);
r.ligneVers(10,10);
r.couleurFond("yellow");
r.rectPlein(0,0,-2,-5);

Ce programme construit un nouveau repère qui va du point (-10, -10) jusqu'à (10, 10) dans un cadre de largeur 300px et de hauteur 200px, place un crayon virtuel en (5,5) puis trace un segment bleu jusqu'au point (10, 10) ; puis dessine un rectangle jaune plein (on dispose aussi d'une fonction "rectCreux").

On peut dessiner des points (d'un pixel) avec r.point(x,y);

Si on avait pris un repère orthonormal on aurait pu dessiner un cercle avec r.cercle(x,y,r).

Voici un petit programme qui illustre le fait que la somme de toutes les puissances naturelles de 1/2 est égale à 2 :

C. Téléchargement

Cet "éditeur Javascript en Ligne" se compose de cette unique page HTML réalisée par JP Branchard en mai-juin 2009 sous licence libre (GPL 2 et +). Il suffit donc de l'enregistrer via le menu Fichier, Enregistrer de votre navigateur !