Introduction au javascript Note : Les scripts présentés p résentés ici ont été testés sur la version ver sion Geogebra 4.2.18.0. Comme l'interaction avec Javascript est moi!iée " c#a$ue version% il se peut $u'ils ne !onctionnent pas avec une version antérieure. &n revanc#e il evrait !onctionner avec une version postérieure. onc l'iéal est e lancer une version e Geogebra avec (ebstart )téléc#arge automati$uement la erni*re version+ Le Javascript est un langage estiné " ,namiser une autre application: une page (eb% un !ic#ier Geogebra- l permet /aouter es interactions avec l/utilisateur ou es animations% comme par eemple : a!!i a!!ic# c#er er3m 3mas as$u $uer er u tet tete e aire aire é!i é!ile lerr es es imag images es Crée Créerr es es in!o in!obu bull lle es 5ester ester si es es obet obetss sont sont présent présents% s% absen absents% ts% ien ienti$u ti$ueses l sert onc " écrire es scripts% c/est"ire es programmes $ui vont interagir avec l/application ans la$uelle on travaille. Nous allons écouvrir Javascript en interaction avec Geogebra. Nous avons trois !a6ons /introuire un coe avascript ans un !ic#ier Geogebra : on peut peut l/assoc l/associer ier " un clic clic sur certai certains ns obets obets comme comme les les bouton boutonss : $uan $uan on cli$ue sur le bouton le coe avascript est lancé. L'obet peut aussi 7tre un obet géométri$ue : un point% un cercle.... on peut l/ass l/associ ocier er " l/actua l/actualis lisati ation on e certain certainss obets% obets% comme comme les les nombres nombres : " c#a$ue !ois $ue la valeur u nombre est c#angée% le script est lancé on peut peut l/ass l/associ ocier er " l/ens l/ensemb emble le u !ic# !ic#ier ier )ava )avascri script pt globa global+ l+ : o on peut ainsi é!inir es !onctions globales $u'on appelle ensuite ans les scripts associés au obets o la !onction ggbnnit permet 'écrire un script $ui est lancé c#a$ue !ois $u'on ouvre le !ic#ier Manipulati Manipul ation on 1. Ouvr Ouvrez ez un nouv nouveau eau fichier fichier geogebra geogebra.. Cre Creez ez des obj objets ets géométri géométriques ques,, des nombres, un curseur, un bouton. Cliquez droit sur n’importe lequel de ces objets puis aller dans propriétés. propriétés. !plorer les onglet ongletss " script script # pour voir quel t$pe d’interaction d’interaction on peut créer pour chaque objet % clic et&ou interaction
Afficher Afficher une boite de dialogue L’inst L’in stru ruct ctio ion n al aler ert( t() ) pe perm rmet et de fa fair ire e af affi fich cher er un une e bo boit ite e de dialogue affichant un texte destiné à être lu par l’utilisateur; alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message.
Mani Ma nipu pula lati tion on '. (a (ans ns un no nouve uveau au fi fichi chier er )e )eog ogebr ebraa qu quee vou vouss enr enregi egist stre rere rezz so sous us le no nom m test.ggb, créez un bouton. Cliquez droit pour faire afficher les propriétés. (ans l’onglet script*par clic associé au bouton, écrire le code suivant % alert("vous avez cliqué sur le bouton");
+oubliez pas dindiquer que votre code est écrit en javascript et non en )eogebra -cript puis cliquez sur o. /etournez dans le fichier )eogebra et cliquez sur votre bouton. 0ue contastezvous2 Manipulation 3. Créez maintenant un nombre 4par e!emple en tapant la commande a56 dans la barre de saisie, ou en créant un curseur7. Cliquez droit pour faire afficher les propriétés. (ans l’onglet script*par actualisation associé au nombre, écrire le code suivant % alert('La valeur du nombre a changé');
+oubliez pas dindiquer que votre code est écrit en javascript et non en )eogebra -cript puis cliquez sur o. /etournez dans le fichier )eogebra et changez la valeur du nombre. 0ue contastezvous2 Manipulation 8. (ans longlet script*javascript global, copiez le code suivant% function ggbOnInit() {alert("bonjour");}
-auvegardez votre fichier, fermezle et rouvrezle. 0ue constatezvous2
9oints importants: La casse est importante. i on écrit ;lert au lieu e alert% la commane n'est pas reconnue Les c#a=C5N J;?;C>95 5 & 5&>@N&> 9;> =N 9N5?>G=L&. la !onction ggbnnit permet 'écrire un script $ui est lancé c#a$ue !ois $u'on ouvre le !ic#ier
Déclarer une variable &n Javascript% on ne peut utiliser une variable $ue si on l'a éclarée. =n nom e variable ne peut contenir $ue es caract*res alp#anuméri$ues )les lettres e ; " A et les c#i!!res e 0 " B+ . L'unerscore )+ et le ollar )D+ sont aussi acceptés. =n nom e variable ne peut pas commencer par un c#i!!re et ne peut pas 7tre constitué uni$uement e motsclés utilisés par le Javascript. 9ar eemple% vous ne pouveE pas créer une variable nommée var car c'est le mot clé $ue l'on utilise pour éclarer une variable. &n revanc#e vous pouveE appeleE une variable var_ Manipulation 6.
/eprenez le fichier test.ggb et modifiez le code associé au bouton.
var message="Bienvenue ici"; alert(message);
/etournez dans le fichier ggb et cliquez sur le bo uton. 0ue se passetil2 Manipulation 9. ssa$ez maintenant le code suivant var A=2; alert("La valeur est :"+A.toString());
0ue se passetil2
Interagir avec geogebra
stockée
dans
la
variable
A
Le Javascript est un langage orienté obet. Cela veut ire $ue le langage manipule es obets. =n obet est un concept% une iée ou une c#ose. =n obet poss*e une structure $ui lui permet e pouvoir !onctionner et 'interagir avec 'autres obets. Le Javascript met " notre isposition es obets nati!s% c'est"ire es obets irectement utilisables. ?ous aveE é" manipulé e tels obets sans le savoir : un nombre% une c#a
i on peut par eemple !aire créer un point ans le !ic#ier geogebra par un programme Javascrip% on utilise la mét#oe evalCommand e l'obet ggbApplet. Cette mét#oe permet 'éécuter la commane comme si on l'écrivait irectement ans la ligne e saisie e Geogebra. ;insi% la s,ntae pour !aire créer un point par eemple est ggbApplet.evalCommand("B=(7,9)")
Manipulation :. (ans un fichier )eogebra, creez un bouton qui permet de creer deu! points ; et < dans le graphique )eogebra et trace le segment =;<>
cript: var ap=ggbApplet; ap.evalCommand("A=(3,5)"); ap.evalCommand("B=(4,3)"); ap.evalCommand("segment[A,B]");
Manipulation ?. Modifiez le programme précédent pour que les coordonnées des trois points soient% 4a7 ntrés par l’utilisateur via une fen@tre Aavascript 4commande prompt477 var var var var var
ap=ggbApplet; xA=prompt("entrer yA=prompt("entrer xB=prompt("entrer yB=prompt("entrer
xA") yA") xB") yB")
ap.evalCommand("A=("+xA+","+yA+")"); ap.evalCommand("B=("+xB+","+yB+")"); ap.evalCommand("Segment[A,B]");
4b7 Choisies aléatoirement i. par )eogebra 4fonction randombetween(a,b) dans )eogebra, génBre un nombre entier entre a et b, a et b inclus7 var ap=ggbApplet; ap.evalCommand("A=(RandomBetween[-5,5],RandomBetween[5,5])"); ap.evalCommand("B=(RandomBetween[-5,5],RandomBetween[5,5])"); ap.evalCommand("Segment[A,B]"
ii. ar Aavascript 4 Math.random(), génère un nombre entre D et 1, D
inclus, 1 e!clus7 et Math.floor% arrondi E lentier le plus proche var ap=ggbApplet; var a1=Math.floor(5*Math.random()); var a2=Math.floor(5*Math.random()); ap.evalCommand("C=("+a1.toString()+","+a2.toString()+")"); var b1=Math.floor(5*Math.random()); var b2=Math.floor(5*Math.random()); ap.evalCommand("D=("+b1.toString()+","+b2.toString()+")"); ap.evalCommand("Segment[C,D]"); Rq : on peut écrire simplement a1 au lieu de a1.toString() car Javascript comprend qu'il faut convertir a1 en string et effectue l'opération même si on ne lui précise pas qu'il faut le faire
Structures de contrôle ans avascript les élimiteurs e blocs sont les accolaes )l'accolae !ermante correspon " &n+
Instruction conditionnelle/alternative if (condition){} else {}
Manipulation F. (ans un fichier )eogebra, Créer un point ; puis un bouton qui permet dafficher ou de rendre invisible un point ;. Ge te!te sur le bouton change en fonction du statut de ; afficher ; ou cacher ; var ap=ggbApplet if (ap.getVisible("A")) { ap.setVisible('A', false); ap.evalCommand("SetCaption[Bouton1, \"Afficher A\"]"); } else { ap.setVisible('A', true); ap.evalCommand("SetCaption[Bouton1, \"Cacher A \"]");
}
(ifficultés % •
•
•
les commandes )eogebra permettant dagir sur les objets doivent @tre écrites en anglais m@me si la version de )eogebra que lon utilise est en HranIais. Jci on doit écrire -etCaption au lieu de -oitGégende7 our trouver une commande geogebra, construire lobjet avec les icKnes outils du menu, puis dans la fen@tre ;lgebre, choisir laffichage par commande 4onglet LoptionL, puis LdescriptionL, cocher LcommandeL. our connatre les commandes en anglais, il suffit de changer la langue de geogebra 4onglet LoptionL, puis LlangueL puis LJL puis LnglishL7 Jl faut échapper les guillemets avec les N au sein de la chane de caractBres.
Itérations for (var i=0;i
Notes : •
•
n peut écrire iFi1 au lieu e i n peut aussi incrémenter e 2 en 2% ou e H en H avec iFi2 ou iFiH.... Manipulation1D. a7 Créer + points au hasard, + étant obtenu par actualisation dun curseur 4script E taper dans longlet par actualisation du curseur7 var ap=ggbApplet; var N=ap.getValue("N"); for (var i=1; i<=N;i=i+1) { ap.evalCommand("A_{"+i+"}=(RandomBetween[5,5],RandomBetween[-5,5])") }
b7 ;jouter un bouton qui efface les + points créés
-cript écrit en classe var go=true; var c=1; while (go) { if (ap.exists("A_{"+c+"}")) {ap.deleteObject("A_{"+c+"}"); c=c+1; } else
I go=false; }}
variante plus simple var c=1; while (ap.exists("A_{"+c+"}")) {ap.deleteObject("A_{"+c+"}"); c=c+1; }
Itérations conditionnelles while (condition) {}
Manipulation11. n point ; est créé. 0uand on clic dessus, ses coordonnées sont modifiées aléatoirement 4entre 6 et 67 tant quelle ne sont pas toutes les deu! positives 0uand les deu! coordonnées sont positives le processus sarr@te et affiche un te!te )eobebra LgagnéL -cript E placer dans longlet " par clic # de ;. /emarque % on active la trace de ; pour voir apparatre les positions successives du point sinon on ne voit que la derniBre var ap=ggbApplet; a1=ap.getXcoord("A"); a'5ap.getYcoord("A"); ap.setTrace("A", true); while (a1<=0 || a2<=0) { a1=Math.floor(Math.random()*(11)-5); a2=Math.floor(Math.random()*(11)-5); ap.evalCommand("A=("+a1.toString()+","+a2.toString() +")"); }
Les fonctions En javascript, la notion de fonction regroupe les trois notions que nous avons définies: procédure avec ou sans paramètre(s) et fonction. Le mot clé fonction désigne en fait un programme que lon va appeler dans dautres programmes. Il peut renvo!er une valeur ( cela se fait avec le mot clé return) mais ce nest pas o"ligatoire.
n peut aussi é!inir es !onction estinées " 7tre appellées ans 'autres scripts. n les é!init ans le avascript global )mais pas ans ggbOnInit()+ &t ensuite on les appelle. Ggbnnit est ellem7me une !onction sans param*tre $ui est appellée " l'ouverture u !ic#ier Geogebra Manipulation1'. a7 On va chercher E déterminer automatiquement si un entier est premier ou pas. Ge nombre nb est entré dans un champ te!te, et on fait afficher dans un objet te!te sil est premier ou pas . our cela on va définir une fonction premier4n7
4quon utilisera aussi sur un autre objet dans la manipulation suivante7 et on appellera cette fonction dans un script " par actualisation # de nb ;lgorithme% si +51, retourner fau! fin si si +5' retourner vrai fin si our d allant de ' E racine4+7 si d divise + retourner fau! fin si fin pour retourner vrai ;mélioration de lalgorithme si +51, retourner fau! fin si si +5' retourner vrai fin si si + est divisible par ', retourner vrai fin si our d allant de 3 E racine4+7 par pas de ' si d divise + retourner fau! fin si fin pour retourner vrai Poici la fonction premier, E copier dans le javascript )lobal, en dessous de function ggbOnInit() {}
b) function premier(nb) { var m=Math.floor(Math.pow(nb,.5));//on va faire la recherche de diviseur jusqu'à la partie entière de la racine carré if (nb==1) {return false}; if (nb==2) {return true}; if (nb%2==0) {return false}; for (d=3;d<=m;d=d+2) {if (nb % d==0) {return false}}; return true; } Ensuite par actualisation de nb, on fait afficher s'il est premier ou passe-t'il
var ap=ggbApplet; n=ap.getValue("nb"); if (premier(n)) {ap.evalCommand("texte="+n+"\" est premier\"");} else { ap.evalCommand("texte="+n+"\" n'est pas premier\""); }
c7 (ans le m@me fichier qu E la question a7 précédente, on veut maintenant ajouter un bouton qui lance la recherche de tous les nombres premiers inférieurs E nb et les place sur une droite graduée de 1 E nb. Ge te!te sur le bouton varie en fonction de la valeur de n Ge changement de laffichage sur le bouton se fait par actualisation de nb en ajoutant la commande suivante ap.evalCommand("SetCaption[Bouton1,\"Nombres premiers inférieurs à \""+nb+"]");
-cript par clic sur le bouton nb=ap.getValue("nb"); ap.setCoordSystem(0,nb,-5,5) ap.setAxesVisible(true, false); ap.refreshViews() for (var i=1;i<=nb;i++) { if (premier(i)) { ap.evalCommand("A_{"+i+"}=("+i+","+"0)"); ap.setLabelVisible("A_{"+i+"}", false) ; ap.setPointStyle("A_{"+i+"}",3); } }
