« Dans le temps », quand on voulait expliquer le fonctionnement d'une machine à vapeur à quelqu'un, on la démontait afin de lui montrer toutes les pièces et lui expliquer comment elles s'articulaient les unes avec les autres.
Actuellement, pour expliquer le fonctionnement d'un ordinateur, ça ne sert strictement à rien de le démonter, il fonctionne comme une « boîte noire ».
Le codage informatique va donc essentiellement relever de l'abstrait et de l'anticipation, deux particularités qui ne sont pas spécialement spontanées chez les être humains.
Afin de te faciliter les choses, nous avons veillé, pendant tout ce module, grâce aux petits robots, aux ardoises, à susciter chez toi la création « d'images mentales » te permettant de faire appel à des choses concrètes, connues, sur lesquelles tu peux t'appuyer pour te projeter dans l'abstrait.
L'interpréteur JavaScript, dont nous allons te parler et t'expliquer le fonctionnement, sera la dernière étape de ce module qui, fidèle à notre habitude, va te permettre de coder de façon libre tout en gardant un pied dans le concret et l'autre dans l'abstrait. Mais trève de bla-bla, commençons directement.
Objectifs
- Te lancer dans l'aspect prodécural de la programmation en Javascript de façon totalement libre, sans contraintes particulières;
- Te donner un maximum d'informations afin, si ton programme se « plante », de pouvoir le « déboguer » par toi-même.
Ta tâche, ton défi
Pour ce faire, vingt exercices te sont proposés, selon un degré de difficulté croissant.
Au cas où, pour certains exercices les plus compliqués, tu ne verrais pas comment faire, tu as à ta disposition le « manuel d'accompagnement pédagogique » qui contient des suggestions de codes expliqués de façon aussi détaillée que possible.
Autre avantage de taille, contrairement aux chapitres précédents, tu peux imaginer d'autres exercices que ceux proposés, les tester et profiter des informations de l'interpréteur pour les « déboguer » si nécessaire.
Voici à quoi ressemble l'interpréteur quand il est en fonctionnement...
Voici à quoi correspondent les différents éléments de cet interpréteur. Zone...
- Le point d'interrogation permet d'avoir des informations et de l'aide sur le fonctionnement de l'interpréteur, les vingts numéros permettent d'afficher les énoncés des exercices proposés;
- La zone d'édition, c'est là que tu pourras taper ton code;
- Le bouton permettant l'exécution directe de ton code en JavaScript sans aide pas à pas;
- Le bouton permettant l'exécution de ton code pas à pas en profitant de toutes les informations présentées par l'interpréteur (voir zones suivantes);
- Le bouton te permettant de stopper à tout moment l'exécution de l'interpréteur afin de modifier ton code et de reprendre son exécution depuis le début;
- La fenêtre de « chaînage » des instructions : c'est l'organigramme du programme, la succession des lignes qui seront exécutées au fur et à mesure de l'évolution du programme et en fonction des différents tests rencontrés. Cette fenêtre n'est pas essentielle, mais si tu as compris son contenu, tu as tout compris de la programmation procédurale !!! En cas d'exécution directe en JavaScript, cette fenêtre affichera les erreurs éventuelles contenues dans ton code. Si tu ne comprends pas ton erreur, une exécution pas à pas permettra parfois de cibler la ligne incriminée.
- La fenêtre de progression de l'exécution pas à pas de ton code. La ligne surlignée en jaune est celle qui est en train d'être exécutée, la ligne légèrement grisée sera la ligne suivante. Dans le cas de tests, le surlignage rosé indiquera la ligne à laquelle le programme va sauter si le résultat du test est « faux »;
- Les explications détaillées de ce qui est en train de se passer à la ligne qui est exécutée;
- Les contenus des variables tels qu'ils évoluent au fur et à mesure de l'exécution de ton code.
Quelques rudiments de syntaxe
Avant de commencer, voici quelques rudiments de syntaxe qui te permettront de gagner du temps lors de la rédaction de tes scripts. Il s'agit en fait de « fast soft », des « recettes rapides » pour que ça fonctionne. Nous n'avons pas jugé utile de recommencer un xième site sur la syntaxe JavaScript. Nous te laissons le soin, maintenant que tu connais l'essentiel, de peaufiner ta syntaxe par des recherches sur le Web.
JavaScript et les nombres...
JavaScript est un peu brouillé avec les maths. Chaque fois qu'il récupère un nombre, il a tendance à le prendre pour de la littérature... Afin d'éviter les surprises, fais précéder toute variable entière ou décimale immédiatement du signe « + ».
Par exemple, si tu veux additionner les variables "un" contenant la valeur 15 et la variable "deux" contenant la valeur 20, voici les résultats que tu obtiendras :
- - alert (un + deux); va afficher "1520".
- - alert (+un + +deux); va afficher "35".
Il y a aussi moyen de maîtriser le nombre de décimales affichées, ceci grâce à « .toFixed(nombre de décimales souhaitées) ». Voici un exemple d'affichage de la valeur 2/3 avec deux décimales :
- alert ((1/3).toFixed(2)); affichera 0.67 (dans le système anglo-saxon, les rôles des , et des . sont l'inverse du nôtre).
Le tirage au hasard...
Une formule un peu alambiquée permet de tirer des nombres entiers de 1 à ... Voici cette formule :
- Math.ceil(Math.random()* (limite supérieure incluse);
- Math.random() va tirer un nombre au pseudo-hasard dans l'intervalle [0, 1[ (donc de 0 à 0,99999...);
- Il faut alors multiplier cette valeur par la limite supérieure de la plage de nombres que tu veux obtenir (si c'est de 1 à 20, indique 20);
- Math.ceil va « tronquer » le nombre obtenu (supprimer les décimales) et, de façon assez magique, tu obtiendras des nombres au hasard de 1 à 20 inclus.
- Si tu désires afficher des nombres tirés au hasard entre 5 et 15 inclus, cela te fait 11 valeurs; il faut donc tirer de 1 à 11 et ajouter 4. L'instruction devient : alert (Math.ceil(Math.random() * 11 + 4));
La lecture d'une donnée au clavier...
L'affichage ne pose plus guère de problème. Il suffit d'utiliser alert (); pour afficher les données désirées à l'écran.
Mais comment faire pour lire une donnée au clavier ? Comme vu précédemment, l'ordinateur est amnésique et la lecture au clavier devra obligatoirement être couplée avec le stockage de la donnée lue dans une variable. L'instruction sera :
- varPrenom = prompt('Quel est ton prénom ?');
- Une fenêtre apparaîtra à l'écran avec la question Quel est ton prénom ?;
- Sous cette question se trouvera un champ texte dans lequel apparaîtront les caractères tapés au clavier;
- Le fait de cliquer sur le bouton « OK » ou taper la touche « Entrée » du clavier fermera cette fenêtre;
- Instantanément, la donnée entrée au clavier sera stockée dans la variable « varPrenom ».
La déclaration des variables...
Comme tu le sais maintenant, toute variable doit être déclarée par le mot « var » en début de ligne. Il y a de nombreuses façons de déclarer et initialiser les variables. L'interpréteur, comme son nom l'indique, doit analyser toutes ces façons afin de les exécuter au mieux, cela fait du boulot. Actuellement, toutes les possibilités de déclaration ne sont pas encore intégrées dans l'interpréteur, il faudra donc que tu te limites aux possibilités actuelles qui sont les suivantes :
- Les variables « simples »; exemples :
- var compteur;
- var somme, signal, dernier;
- var compteur = 0, somme = 0, dernier = "rien";
- mais pas var compteur = somme = 0; pour le moment.
- Les variables « indicées »; exemples :
- var tableau = [];
- var jetons = [], cartes = [];
- et, ensuite sur une autre ligne tableau = [0, 0, 0, 0, 0];
- mais pas var tableau = [0, 0, 0, 0, 0]; pour le moment. Merci.
-------
Voilà, c'est terminé.
Il te reste maintenant à te « lancer » et à voler de tes propres ailes...!!!
Bonne « dernière étape ».