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.
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.
Ces instructions permettent de communiquer avec l'utilisateur du programme. Nous en avons fabriqué deux pour ce cours :
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);
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".
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".
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".
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 :
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.
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.
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);
}
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 :
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
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);
}
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)=x2.
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 !
Javascript possède des fonctions mathématiques que vous pouvez utiliser dans vos programmes.
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 :
var r=new repere(-1, -1, 2, 2, 200, 200);
var couleurs=["red","yellow","blue"];
var i, z, x1=0, y1=0, x2=1, y2=1;
for (i=0 ; i<100 ; i++) {
r.couleurFond(couleurs[i%3]);
r.rectPlein(x1, y1, x2, y2);
if (i%2==0) {
z=x1;
x1=x2;
x2=2*x2-z;
y2=(y1+y2)/2;
} else {
x2=(x1+x2)/2;
z=y1;
y1=y2;
y2=2*y2-z;
}
}
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 !
Sorties du programme :