M1202 - TP Séance 1
Durée : 2h00
Pour ce module d'algorithmique et programmation Javascript M1202, je vous invite fortement à :
- relire les cours et/ou exercices des précédentes séances la veille de tout cours
TD et TP d'algorithmique ;
- ne pas hésiter à prendre des notes à propos des énoncés de TP si cela vous est utile ;
- poser des questions
Objectifs
- Prendre en main son environnement de travail (Windows et navigateur web)
- Connaître le vocabulaire de base
- Savoir utiliser la console du navigateur
- Modifier un code Javascript
Au menu
- Consignes
- Prise en main de l'environnement de travail
- Sondage
- Programmer en Javascript
- Bonus : Jeu de voyance
A. Consignes (5 min) ↑
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) ↑
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.
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
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.pdf où
formations_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) ↑
Répondez à
ce sondage sur votre utilisation de l'informatique et d'internet.
D. Programmer en Javascript (50 min) ↑
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 :
- remarquez la présence de plusieurs blocs entourés de { et }, ou de ( et ) ;
- remarquez la présence de mots qui ressemblent à de l'anglais : function ;
- remarquez la présence de mots qui ressemblent à du français : nbAleatoire, affiche, reponse, reponseALaQuestion, etc. ;
- remarquez la présence de phrases en français, entourées par des "" ;
- remarquez la présence de descriptions d'actions en français, précédées par // : ce sont des commentaires, c'est-à-dire des lignes qui seront ignorées par le navigateur.
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) ↑
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.
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 :
- l'algorithme affiche prend en entrée une chaîne de caractères, c'est-à-dire un texte et l'affiche dans la ligne de commande.
- l'algorithme reponseALaQuestion prend en entrée une chaîne de caractères, l'affiche dans la ligne de commande
en demandant à l'utilisateur d'entrer du texte, et renvoie une chaîne de caractères contenant le texte entré par
l'utilisateur.
- l'algorithme nombreAleatoire prend en entrée deux entiers i et j et renvoie un entier aléatoire entre i et j inclus.
- l'algorithme convertitEnEntier prend en entrée une chaîne de caractères chaine qui contient un entier (par
exemple "42") et renvoie cet entier (dans l'exemple : 42). Il « convertit » donc une chaîne de caractères en entier.
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 :
- E4aÉcrivez l'instruction qui
permet à l'ordinateur de choisir et stocker un nombre aléatoire.
- E4bÉcrivez l'instruction qui
demande au joueur de deviner un nombre et récupère sa réponse.
- E4cÉcrivez l'instruction qui
convertit en entier la réponse donnée.
- E4dÉcrivez l'instruction qui
vérifie si la réponse donnée est inférieure, supérieure, ou égale au nombre aléatoire
choisi par l'ordinateur, et affiche au joueur un message d'information dans chacun des cas.
- E4eMettez les instructions précédentes
dans une boucle, de telle sorte que le processus soit répété tant que
le joueur n'a pas deviné la bonne réponse.
- E4fAjoutez les instructions
qui permettent de compter le nombre de questions posées par le joueur, et
de l'afficher à la fin.
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.