M1202 - TP Séance 1

Durée : 2h00




Pour ce module d'algorithmique et programmation Javascript M1202, je vous invite fortement à :




Objectifs




Au menu

  1. Consignes
  2. Prise en main de l'environnement de travail
  3. Sondage
  4. Programmer en Javascript
  5. Bonus : Jeu de voyance




A. Consignes (5 min) 0%

Lisez attentivement cet énoncé de TP/TD en suivant les instructions. En cas d'interrogation, faites appel à moi, que ce soit pour en savoir plus sur un des points abordés pendant le TP, ou pour savoir comment effectuer une des tâches demandées (numérotées pour pouvoir y faire référence simplement).

Surtout ne restez pas bloqué(e) sur une des questions. Entre parenthèses, à côté des titres de sous-sections, est indiqué le temps que vous avez dû passer à effectuer les étapes précédentes.

Certains liens font apparaître des info-bulles quand vous passez la souris dessus : soyez curieux ! La plupart de ces liens conduisent vers un article Wikipedia. Cliquez dessus si vous avez besoin d'une définition plus détaillée que celle de l'info-bulle, ou bien seulement pour la culture si vous avez le temps.

Vous devez chacun avoir retenu votre mot de passe personnel pour accéder à votre compte sur les machines des salles de TP. Ces comptes sont gérés par le Centre de Ressources Informatiques du 4° étage du bâtiment Copernic, ouvert entre 12h30 et 13h30 pour les étudiants.




B. Prise en main de l'environnement de travail (20 min) 4%

a) Le bureau Windows

Remarque sur Windows : Windows est un système d'exploitation, qui fait donc l'interface entre la partie matérielle (unité centrale, périphériques) et la partie logicielle de l'ordinateur. Cependant, il intègre également de nombreux logiciels plus ou moins basiques : un éditeur de textes (Notepad), un éditeur d'images (Paint), un navigateur web (Explorer), un système de gestion de fichiers (qui permet de naviguer dans les dossiers du disque dur ou d'une clé USB) et un environnement de bureau, et une ligne de commande (MS-DOS).
Dans le système d'exploitation Linux, il existe des programmes spécifiques dédiés à toutes ces tâches. Par exemple Gnome ou KDE sont deux environnements de bureau populaires pour ce système d'exploitation, et Konqueror est à la fois un système de gestion de fichiers et un navigateur web.
Menu démarrer de Windows
Le bureau Windows est en fait un dossier comme un autre. On peut donc, en théorie, y placer des fichiers ou des raccourcis vers des programmes. Cependant, dans le système utilisé à l'université, le contenu du bureau est chargé à chaque démarrage, et enregistré à chaque déconnexion. Si les bureaux contiennent des fichiers volumineux, cela ralentit l'ensemble du système. Il ne faudra donc laisser aucun fichier sur votre bureau.

Ce principe est aussi vrai sur votre ordinateur personnel : entasser les fichiers sur le bureau est la meilleure façon de créer un désordre qui vous empêchera de les retrouver quand vous en avez besoin. Ainsi, vous allez ranger tous vos fichiers personnels dans l'espace prévu à cet effet, dans le lecteur M:.


b) Généralités sur les applications

Toutes les applications sous Windows partagent la notion de fenêtreélément de l'interface graphique, portion rectangulaire de l'écran dédiée à l'affichage de tout ou partie d'un logiciel.

La zone centrale de la fenêtre est l'espace application (avec des spécificités liées à l'application).

Si l'application possède des menus, appuyer sur la touche ALT + lettre soulignée permet d'y accéder, les touches de directions permettent d'y naviguer.

Une seule application a le focus : celle dont le bandeau est bleu (pour l'environnement par défaut). B1Faites divers tests en cliquant sur le bandeau d'une fenêtre (clic gauche, droit, milieu) et notez les observations.
Remarque sur le changement de fenêtre : vous pouvez utiliser les touches ALT + TAB pour passer d'une fenêtre à une autre.


Le clic droit de la souris fait apparaître un menu contextuel (qui s'adapte donc selon l'endroit où le clic a été opéré). B2Testez-le : B4Nous avons vu plus haut que le bureau Windows est un dossier comme un autre. Quelle est l'adresse de ce dossier ?


c) Les raccourcis clavier

Taper une touche du clavier est souvent beaucoup plus rapide qu'aller cliquer dans un menu. Ainsi, apprendre quelques raccourcis clavier augmentera votre rapidité. B5Sur cette page, recherchez le texte "MS-DOS" en pressant CTRL-F ("F" pour "find" en anglais), c'est-à-dire en appuyant instantanément sur les touches CTRL-F, puis copiez-le avec CTRL-C et collez-le dans la barre d'adresse avec CTRL-V. Pour couper au lieu de copier, il faut utiliser CTRL-X.

B6Utilisez la touche WINDOWS (entre CTRL et ALT) pour naviguer dans le Menu Démarrer et découvrir la liste des applications (ou "programmes") installées.

Les raccourcis permettent également de passer d'une fenêtre à une autre. B7Utilisez WINDOWS-E pour ouvrir une fenêtre du système de gestion de fichiers (ou "explorateur"), puis B8ALT-TAB pour passer d'une fenêtre à une autre (TAB correspond à la touche tabulationsur la gauche du clavier, elle est parfois étiquetée par une flèche vers la gauche et une vers la droite juste en dessous). La combinaison ALT-SHIFT-TAB (où SHIFT est la grosse flèche vers le haut qui permet de faire les majuscules) permet de passer d'une fenêtre à une autre dans le sens inverse. La touche ALT seule permet d'accéder au menu de l'application active. La combinaison ALT-SHIFT permet de changer de langue de clavier (QWERTY ou AZERTY ou autre). La combinaison WINDOWS-D permet d'accéder au bureau ("D" pour "desktop" en anglais).

Dans le navigateur web, CTRL-N permet d'ouvrir une nouvelle page, et CTRL-T d'ouvrir un nouvel onglet. De la même manière qu'ALT-TAB, CTRL-TAB et CTRL-SHIFT-TAB permettent de naviguer entre les onglets. B9Essayez !

Il arrive de temps en temps qu'une application Windows boude et refuse alors toute interaction avec l'utilisateur. Dans ce cas, il faudra en général faire son deuil des données manipulées par ce programme et non sauvegardées, et prendre la dure décision de terminer sauvagement l'exécution de ce programme. Appuyez conjointement sur les touches CTRL-ALT-Suppr (ou bien la combinaison équivalente CTRL-SHIFT-Échap), puis choisissez Gestionnaire de tâches puis l'onglet Applications, puis sélectionnez l'application fautive et enfin demandez au système de l'arrêter (bouton Fin de tâche). Si l'application n'apparaît pas dans la liste, essayez l'onglet Processus puis clic droit sur le processus concerné (éventuellement, qui consomme beaucoup de ressources dans la colonne "Processeur") pour terminer son arborescence.


d) L'arborescence des dossiers et fichiers

Arborescence
L'arborescence des fichiers correspond à leur organisation à l'intérieur de dossiers (ou répertoires, directory en anglais), eux-mêmes contenus dans d'autres dossiers.

Un dossier contenu dans aucun autre s'appelle la racine. On appelle adresse absolue l'adresse d'un fichier depuis la racine dans l'arborescence. Sous Windows, chaque lecteurdisque dur, lecteur DVD, lecteur CD, clé USB, disque dur externe, ou même une partition, c'est-à-dire une portion de disque dur. a une racine nommée par une lettre. Le disque dur principal est en général appelé C:. Les adresses absolues se notent alors en utilisant l'antislash "\"appuyez simultanément sur ALTGr et 8 pour taper ce caractère pour indiquer l'inclusion d'un sous-répertoire. Par exemple, dans l'arborescence Windows de droite de l'image ci-contre, un fichier temporaire.txt placé dans le dossier Downloads a pour adresse absolue C:\Downloads\temporaire.txt.

Attention, Linux fait la différence entre les majuscules et les minuscules dans les noms de fichiers et dossiers, contrairement à Windows !
Ainsi, C:\temp.txt et C:\Temp.txt correspondent au même fichier mais /temp.txt et /Temp.txt sont différents. Vous pouvez aussi faire le rapprochement entre les adresses Linux et les URLadresse d'une page web, par exemple http://iut.univ-mlv.fr/pdf/formations_iut_mlv_2011.pdfformations_iut_mlv_2011.pdf est un fichier dans le dossier pdf lui même contenu dans le site web http://iut.univ-mlv.fr. Là aussi les majuscules sont interprétées différemment des minuscules.

Un nom de fichier se termine généralement par un point suivi de quelques lettres, qui forment l'extension du fichier et indiquent généralement le formatformat = non seulement le type du fichier (image, texte, etc.) mais aussi la façon dont il est codé du fichier. Par exemple, truc.mp3 est vraisemblablement un son mp3, machin.jpg une image JPEG. Attention ceci n'est qu'une indication puisqu'il est tout à fait possible de renommer un fichier son truc.mp3 en truc.jpg. Les systèmes d'exploitation se fondent généralement sur l'extension pour savoir avec quel programme ouvrir un fichier.

Nous utiliserons dans les prochains TP des fichiers d'extension .html, en y intégrant pour commencer le code Javascript. Puis nous verrons que comme pour le code CSS, il est possible de le stocker dans un autre fichier : les fichiers contenant uniquement du code Javascript ont alors l'extension .js.


C. Sondage (15 min) 20%

Répondez à ce sondage sur votre utilisation de l'informatique et d'internet.




D. Programmer en Javascript (50 min) 33%


a) Un exemple de code Javascript

Javascript est un langage web qui est exécuté directement par votre navigateur web. Il permet en particulier d'agir sur les éléments d'une page web. Lors de ce premier semestre, vous n'allez pas découvrir en détails comment manipuler les composants d'une page web, nous utiliserons Javascript simplement comme premier langage de programmation.

Voici donc un premier code source Javascript contenu dans ce fichier : M1202-TP1.html. D1Enregistrez-le dans votre dossier M:\M1202\TP1. Pour voir son contenu, D2ouvrez-le avec l'éditeur de code Visual Studio Code. Vous pouvez utiliser d'autres éditeurs de code, comme Brackets ou comme le logiciel libre Notepad++vous pouvez télécharger le code source et modifier ou redistribuer le logiciel. Les bons éditeurs de texte permettent en particulier de colorer le code Javascript d'une manière qui vous aidera à programmer, c'est ce qu'on appelle la coloration syntaxique.

Lisez le code de M1202-TP1.html. Quelques commentaires :


b) Exécuter le code Javascript

D3Ouvrez le fichier M1202-TP1.html dans le navigateur Chrome (clic droit sur le fichier, Ouvrir avec, Chrome) et suivez les instructions.


c) Modifier le code Javascript

D4Modifiez le code pour que le programme ne dise pas "Bonjour" mais "Salut".

D5Modifiez le code pour donner une probabilité de réussite à l'utilisateur : au lieu de choisir le nombre aléatoire entre 1 et 10, le choix sera fait entre 1 et 5. Attention, il y a deux instructions à modifier !

D6Modifiez le code pour permettre à l'utilisateur de tricher : l'ordinateur affiche le nombre qu'il a choisi juste avant de demander à l'utilisateur ou utilisatrice sa première réponse.

D7Supprimez ces dernières modifications du mode triche, et remplacez-les par des instructions qui permettent à l'ordinateur d'afficher un "indice de rime" : par exemple, si le nombre choisi est 4, l'ordinateur affiche, avant le deuxième essai : "Le nombre rime avec plâtre...".





E. Bonus - Conception d'un jeu de voyance (70 min) 75%

Le but de cet exercice est de créer un jeu où le joueur essaie de deviner un nombre choisi au hasard par l'ordinateur entre 0 et 100.

Les joueurs qui arrivent à trouver rapidement le nombre ont probablement un don de voyance !

Plus sérieusement, commencez par E1créer un dossier dédié à ce TP1bis. E2Enregistrez-y ce fichier M1202-TP1bis.html.

Pour créer ce programme de jeu de voyance, quelques indications intermédiaires sont données ci-dessous. Il faut les surligner avec la souris pour les faire apparaître. L'objectif est de vous permettre d'avancer au maximum tout(e) seul(e) dans la programmation du jeu. Si vous bloquez, surlignez l'indication suivante pour voir quelle est la prochaine étape de programmation conseillée.

Copie d'écran jeu de voyance
Le jeu doit donner un résultat similaire à celui montré dans l'image ci-contre (mais dans le navigateur web...). Plus précisément : l'ordinateur choisit un nombre au hasard entre 1 et 100 (inclus), et vous demande si vous l'avez deviné. Tant que vous ne l'avez pas deviné, il vous dit si la réponse que vous avez donnée est inférieure ou supérieure au nombre à deviner.

Pour cela, vous pourrez utiliser les algorithmes suivants : Vous programmerez l'algorithme demandé dans la "fonctionPrincipale" du fichier M1202-TP1bis.html. Actuellement cette "fonctionPrincipale" contient quelques instructions qui illustrent le fonctionnement des algorithmes affiche, reponseALaQuestion et convertitEnEntier en vous donnant un exemple pour chacun. E3Testez la page M1202-TP1bis.html pour voir comment elle fonctionne, et constater le comportement de ces instructions.

E4Remplacez la "fonctionPrincipale" de M1202-TP1bis.html par les instructions voulues pour créer le jeu de voyance demandé. Si vous n'y arrivez pas directement, surlignez l'une après l'autre les questions-indications suivantes : Question « cerise sur le gâteau » : E5ajoutez les instructions qui permettent de répéter le jeu dix fois de suite, et qui affiche finalement le nombre moyen de questions posées par le joueur pour deviner les nombres. Cela permettra de voir lequel d'entre vous a les meilleurs dons de voyance !

Question « sucre glace sur la cerise sur le gâteau » : E6écrivez le jeu inverse, où c'est la machine qui joue. L'utilisateur du programme choisit un nombre aléatoire, et tant que le programme n'a pas deviné, l'utilisateur lui répond « plus grand » ou « plus petit » et l'ordinateur suit ces indications pour la réponse suivante. Essayer de concevoir une stratégie intéressante pour l'ordinateur.