Principes de base de la programmation en javascript.
1. On part d'un algorithme structuré et écrit en Français
2. On traduit et écrit cet algorithme dans le langage de programmation (ici le javascript), ce qui constitue le programme
_ en javascript, le programme est écrit dans un fichier vide avec un éditeur de texte "basique" (Bloc-notes par exemple sous Window ou Gedit sous Linux)
_ le fichier est enregistré avec une extension de page web (.htm ou .html)
3. On fait (compiler et ) exécuter le programme précédent par l'ordinateur
_pour cela, il suffit d'ouvrir le document précédent avec un navigateur web (Firefox ou Ie)
_le navigateur va (compiler et ) éxécuter le programme "pour nous"
4. En résumé : Algorithme ---> Programme ---> Exécution du programme par l'ordinateur
voici quelques détails ci dessous...
Etapes.
1.OUVERTURE d'un FICHIER
ouvrir un document vierge avec un traitement de texte basique comme Bloc-notes ( sous window : démarrer --> tous les programmes --> Accessoires --> Bloc-notes )
2.ENREGISTEMENT du fichier avec un nom qui finit par .htm
enregistrer (sur le bureau) le document vierge sous un nom quelconque, mais avec l'extension ".htm" :
par exemple avec le nom : mon_programme.htm
------> vérifier qu'il est apparu une icône sur le bureau 
ou 
sur laquelle il suffira de cliquer pour que le programme soit éxécuté par un navigateur comme firefox ou internet explorer.
( pour le moment, aucun programme n'est écrit dans le document, le document est vide)
3.pour écrire un programme dans le document précédent en utilisant le langage de programmation "javascript" (dont il existe une documentation sur internet)
il faut respecter un langage très précis afin que le programme fonctionne.
3.a.BALISES de DEBUT et FIN de PROGRAMME.
tout programme (en javascript) sera écrit entre les balises de début et fin de programme suivantes :
copier-coller les balises suivante dans le document.
( sélectionner les deux lignes, puis Ctrl+c pour copier et Ctrl+v pour coller)
<script langage="javascript">
</script>
sauvegarder le document ( Ctrl+s)
lancer le programme ( qui est vide, puisque rien n'est écrit entre les deux balises de début et de fin de programme) en cliquant sur l'icône ou du bureau (on constate qu'il s'ouvre une page web vide, c'est normal). Ce programme ne sert à rien, pour le moment !
---> pour relancer le programme, il suffit d'appuyer sur la touche F5
du clavier sans avoir à cliquer sur l'icône du bureau. ( cela est plus
rapide et évite d'ouvrir une nouvelle page web à chaque clic sur
l'icône)
3.b.DECLARATION des VARIABLES .
la déclaration des variables n'est pas obligatoire en javascript, mais,
cela est obligatoire dans d'autres langages de programmation,
aussi, comme cela ne complique pas les choses, il est conseillé de déclarer les variables.
Une variable est une "case mémoire" de l'ordinateur, elle va nous
servir à stocker des nombres, des lettres, des môts, des phrases, des
tableaux, ...
On lui donne un nom (qui commence par une lettre, sans espaces ni accents) et on la fait précéder du mot var (un espace de séparation), le tout finit par un point virgule.
var x;
var nom;
var prenom;
var code_postal;
...
3.c.ENTREES.
pour pourvoir demander à quelqu'un d' ENTRER une donnée ( une chaine de
caractères) au clavier et la conserver dans une des mémoires de
l'ordinateur appelée par exemple x, copier coller là où il faut dans le document précédent (entre les deux balises bien sur) le code suivant :
var x;
x = prompt(" x = ? ");
sauvegarder (Ctrl+s) le document puis relancer le programme (F5) après être retourné sur la page web correspondant au programme ( ou cliquer sur l'icône ou du bureau, mais cela ouvrira une nouvelle page web )
----> (on constate qu'il s'ouvre une fenêtre comme celle ci dessous)
dans laquelle vous pouvez entrer une chaîne de caractères quelconque
afin qu'elle soit mémorisée dans une mémoire de l'ordinateur. Entrez par exemple le nombre : 10 ou bien le môt : coucou ou ce que vous voulez ! puis ok.
3.d.SORTIE.
pour pouvoir SORTIR ( afficher dans une fenêtre) la donnée contenue dans la mémoire x, ajouter le code suivant :
alert(x);
sauvegarder (Ctrl+s) le document puis relancer le programme (F5).
entrer une chaine caractère ( par exemple : coucou ), validez et
constatez qu'il s'affiche une fenêtre ( comme ci dessous) contenant ce
que vous avez précédemment mémorisé
----> relancer le programme à loisir en cliquant sur F5
(essayer de rentrer des nombres ou des phrases et constater ce qui se passe )
4.EXEMPLES de PROGRAMMES.
il est maintenant possible d'écrire un programme qui peut :
ENTRER une ou plusieurs valeurs dans une ou des mémoires de l'ordinateur
EFFECTUER des opérations sur les valeurs entrées
SORTIR le résultat du calcul
voici des applications :
4a.exemple de la somme de deux nombres :
éditer et sauvegarder le programme suivant :
<script language="javascript">
var x;
var y;
var z;
x = prompt(" x = ? ");
y = prompt(" y = ? ");
z = x + y;
alert(z);
</script>
lancer le programme avec pour entrées : x = 1 et y = 1
constater qu'il donne pour résultat : 1+1=11
cela vient du fait que les valeurs entrées ne sont pas considérées
comme des nombres mais comme des chaînes de caratères ( des lettres )
le programme les mets donc bout à bout et donne le résultat : 1+1=11 ( cela est appelé une concaténation )
pour éviter ce problème, il faut transformer la valeur entrée pour x en un nombre, avec la ligne de code suivante :
x = parseFloat(x);
de même pour y :
y = parseFloat(y);
on peut alors additionner les valeurs x et y
éditer et sauvegarder le programme suivant :
<script language="javascript">
var x;
var y;
var z;
x = prompt(" x = ? ");
x = parseFloat(x);
y = prompt(" y = ? ");
y = parseFloat(y);
z = x + y;
alert(z);
</script>
lancer le programme avec pour entrées : x = 1 et y = 1
constater qu'il donne pour résultat : 1+1=2
puis essayer avec d'autres valeurs. ( -5 pour x et 5 pour y, ...)
4.b.exemple du produit de deux nombres :
éditer et sauvegarder le programme suivant :
<script language="javascript">
var x;
var y;
var z;
x = prompt(" x = ? ");
x = parseFloat(x);
y = prompt(" y = ? ");
y = parseFloat(y);
z = x * y;
alert(z);
</script>
lancer le programme avec pour entrées : x = 12 et y = 13
constater qu'il donne pour résultat : 12*13=156
puis essayer avec d'autres valeurs.
4c.exemple du quotient de deux nombres :
éditer et sauvegarder le programme qu'il faut pour obtenir le résultat de la division de y par x c'est à dire y/x
lancer le programme avec pour entrées : x = 12 et y = 2
constater qu'il donne pour résultat : 12/2=6
puis essayer avec d'autres valeurs.
4.d.exemple de la différence de deux nombres :
éditer et sauvegarder le programme qu'il faut pour obtenir le résultat de l'opération x - y
lancer le programme avec pour entrées : x = 12 et y = 2
constater qu'il donne pour résultat : 12-2=10
puis essayer avec d'autres valeurs.
4.e.exemple d'un calcul quelconque entre deux nombres :
éditer et sauvegarder le programme qu'il faut pour obtenir le résultat de l'opération suivante : x+y+x*y-x/y
vérifier que pour x=10 et y=2 on obtient : 10+2+10*2-10/2=27
essayer pour d'autres valeurs de x et y.
vérifier que le programme ne fontionne pas pour y =0
( savez vous dire pourquoi ? )
4.f.exemple d'un calcul concernant les fonctions affines:
éditer et sauvegarder ( sous le nom : coefficient_directeur.htm) le programme qu'il faut pour :
entrer les valeurs de xa, ya, xb et yb
calculer le coefficient directeur a
sortir la valeur du coefficient directeur
(servez vous du copier coller et des programmes précédents pour obtenir
ce qui suit où la formule du "a=" manquante est bien connue d'un élève
de seconde )
lancer le programme avec pour entrées : xa = 1, ya = 2, xb = 3 et yb = 4
constater qu'il donne pour résultat : a = 1
puis essayer avec d'autres valeurs.
4.g.exemple d'un calcul concernant la géométrie analytique:
éditer et sauvegarder ( sous le nom : coordonnees_milieu.htm) le programme qu'il faut pour :
entrer les valeurs de xa, ya, xb et yb
calculer les coordonnées xi et yi du milieu I du segment [AB]
sortir l'abscisse xi du milieu I
sortir l'ordonnée yi du milieu I
à vous de compléter les... pour que cela fonctionne
lancer le programme avec pour entrées : xa = 1, ya = 2, xb = 3 et yb = 4
constater qu'il donne pour résultat : xi = 2 et yi = 3
puis essayer avec d'autres valeurs.
4.h.exemple d'un calcul concernant les statistiques:
éditer et sauvegarder ( sous le nom : moyenne.htm) le programme qu'il faut pour :
entrer les valeurs de x1, x2, x3, x4, x5
calculer la moyenne de x1, x2, x3, x4, x5
sortir la valeur m de la moyenne
lancer le programme avec pour entrées :x1= 10, x2=10, x3=10, x4=10, x5=10
constater qu'il donne pour résultat : m = 10
puis essayer avec d'autres valeurs.
vous voici capable d'écrire de petits programme simples pour automatiser des calculs, reste à en faire bon usage ...
LA PIOCHE : ( pour des copier-coller)
Balises de début et fin de programme.
<script langage="javascript">
</script>
Ecrire un commentaire dans le corps du programme.
// ceci est un commentaire sur une ligne
/*
ceci est un
commentaire sur plusieurs lignes
*/
Ecrire une chaine de caractères dans la page lue par le navigateur.
document.write("ce que vous voulez écrire est entre les guillemets");
Passer à la ligne dans la page lue par le navigateur.
document.write('<br>');
Afficher le résultat d'un calcul avec les 4 opérations dans la page.
document.write(3*4+4/2-1);
Afficher la chaine de caractère qui correspond au calcul et le résultat dans la page.
(on constate des erreurs minimes de précision)
document.write('2.1*3= '+(2.1*3));
Afficher une fenêtre avec un message à l'écran.
alert('le message que vous voulez');
Afficher une fenêtre avec un texte et un formulaire de saisie et mettre la chaine de caractère saisie dans la mémoire appelée x
x = prompt('entrez une valeur dans le formulaire s.v.p');
Transformer la chaine de contenue dans la mémoire x en un nombre avec lequel on peut calculer.
x = parseFloat(x);
Effectuer une instruction sous condition.
if (condition){instruction};
Effectuer une boucle avec pour compteur i.
while(i<=10){instruction1;instruction2;...;i++;};
Travail
Travail 1. (
forme canonique )
<script langage="javascript">
a = prompt("valeur de a : a = ?");
a = parseFloat(a); // pour transformer la chaîne de caractère entrée en un nombre
b = prompt("valeur de b : b = ?");
b = parseFloat(b);
...
...
x0= ...;
y0= ...;
alert("x0="+x0);
alert("y0="+y0);
</script>
a. Copier-coller le programme incomplet ci dessus dans un fichier texte et le sauvegarder avec le nom : canonique.htm
b.
Modifier et compléter ce programme afin qu'il donne les x0 et y0 la forme canonique f(x) = a(x-x0)2+y0
ceci si on entre les trois coefficients a, b et du trinôme f(x) = ax2+bx+c
... signifie qu'il faut "compléter"
c. Vérifier qu'il fonctionne. ( a = 2, b = 5 et c= 10 donne x0 = -1.25 et y0 = 6.875 )
d. pour quelles valeurs de a le programme ci dessus ne fonctionne t-il pas ?
Travail 2. ( forme factorisée )
<script langage="javascript">
a = prompt("valeur de a : a = ?");
a = parseFloat(a);
b = prompt("valeur de b : b = ?");
b = parseFloat(b);
c = prompt("valeur de c : c = ?");
c = parseFloat(c); // pour transformer la chaîne de caractère entrée en un nombre
delta=...
if(...<0){alert("pas de ...")};
if(...==0){
x0=...;
alert("x0="+x0);
};
if(...>0){
x1=(-1*b+Math.sqrt(delta))/(2*a);
x2=...;
alert("x1="+x1);
alert("x2="+x2);
};
</script>
a. Copier-coller le programme incomplet ci dessus dans un fichier texte et le sauvegarder avec le nom : factorise.htm
b. Modifier et compléter ce programme afin qu'il donne :
ou bien le x0 de la forme factorisée f(x) = a(x-x0)2
ou bien les x1 et x2 de la forme factorisée f(x) = a(x-x1)(x-x2)
ou bien la chaîne "pas de factorisation"
selon la valeur du discriminant
ceci, si on entre les trois coefficients a, b et du trinôme f(x) = ax2+bx+c
... signifie qu'il faut "compléter"
c. Vérifier qu'il fonctionne.
a=1, b=2 et c=1 donne x0 = -1
a=1, b=1 et c=1 donne "pas de factorisation"
a=1, b=-3 et c=2 donne x1 = 2 et x2 = 1
d. pour quelles valeurs de a le programme ci dessus ne fonctionne t-il pas ?