DM NSI 6

Identification

Infoforall

6 - DM NSI Tableau et Javascript


Vous pouvez rendre le sujet sur papier ou rendre une copie numérique.

Attention, les codes markdown identiques seront sanctionnés à moins de noter clairement que vous avez travaillé avec un autre élève de la classe.

Le but est de consolider les notions avant le DS de lundi matin.

Ca a l'air long, mais c'est surtout de l'analyse de code plus que de la réalisation.

N'étant pas certain que le mot this soit au programme, il y aura une présentation ou rappel de son utilisation avant le DS. Et il n'y aura qu'un tout petit exercice style QCM à ce sujet dans le DS. Si vous ne l'avez pas vu pendant l'activité 6, vous pourrez ainsi faire cette partie néanmoins.

Les deux parties sont indépendantes, vous pouvez donc les réaliser en deux temps.

1 - Gestion des événements en JS

Le but de cette partie est de servir de révision pour le DS et de "correction" pour l'activité 6 Javascript.

Nous allons créer une interface Web proposant un petit jeu :

  • En cliquant sur JOUER, on entend le cri d'un animal
  • En cliquant sur un animal, on voit si on a bien réussi à identifier le bruit

Voici l'interface voulue (mais non fonctionnelle) :

✎ 01° Allumer le son de votre ordinateur. Cliquer sur les images une à la fois pour vérifier que l'événement CLICK provoque bien l'apparition du bruit de l'animal (enfin, presque : pour certains d'entre eux, j'ai eu un peu de mal à trouver un bruit réaliste...)

✎ 02° Télécharger le dossier zippé disponible en suivant le lien : FICHIER ZIP. Dezziper. Vous devriez obtenir la structure suivante, composée d'un fichier HTML, d'un fichier CSS et d'un fichier JAVASCRIPT. Les images et les sons sont dans deux sous-dossiers précis.

📁 votre dossier de travail

📄 jeu.html

📄 css_animaux.css

📄 scripts_animaux.js

📁 sons

📄 agneau.mp3

📄 canard.mp3

📄 chaton.mp3

📄 ecureuil.mp3

📄 koala.mp3

📄 lapin.mp3

📄 suricate.mp3

📄 tarentule.mp3

📄 tigre.mp3

📁 images

📄 agneau.jpg

📄 canard.jpg

📄 chaton.jpg

📄 ecureuil.jpg

📄 koala.jpg

📄 lapin.jpg

📄 suricate.jpg

📄 tarentule.jpg

📄 tigre.jpg

Voici d'abord le fichier HTML : (inutile de l'analyser dans le détail immédiatement, vous allez le faire au cours de ce DM)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Jeu ANIMAUX</title> <link rel="stylesheet" href="css_animaux.css" /> <script src="scripts_animaux.js"></script> </head> <body> <audio id="agneau" src="sons/agneau.mp3"></audio> <audio id="tigre" src="sons/tigre.mp3"></audio> <audio id="canard" src="sons/canard.mp3"></audio> <audio id="lapin" src="sons/lapin.mp3"></audio> <audio id="tarentule" src="sons/tarentule.mp3"></audio> <audio id="chaton" src="sons/chaton.mp3"></audio> <audio id="suricate" src="sons/suricate.mp3"></audio> <audio id="ecureuil" src="sons/ecureuil.mp3"></audio> <audio id="koala" src="sons/koala.mp3"></audio> <header> <h1>Le jeu des Animaux Féroces</h1> <p>Pour jouer :</p> <ul> <li>Faire un click sur le bouton Jouer</li> <li>Ecoute le bruit aléatoire obtenu</li> <li>Faire un click sur l'animal que tu penses avoir reconnu !</li> </ul> </header> <main> <input type="button" value="Jouer" onclick="choisir_un_son_au_hasard()"> <table> <tr> <td><img onclick="verifier('agneau')" src="images/agneau.jpg"></td> <td><img onclick="verifier('tigre')" src="images/tigre.jpg"></td> <td><img onclick="verifier('canard')" src="images/canard.jpg"></td> </tr> <tr> <td><img onclick="verifier('lapin')" src="images/lapin.jpg"></td> <td><img onclick="verifier('tarentule')" src="images/tarentule.jpg"></td> <td><img onclick="verifier('chaton')" src="images/chaton.jpg"></td> </tr> <tr> <td><img onclick="verifier('suricate')" src="images/suricate.jpg"></td> <td><img onclick="verifier('ecureuil')" src="images/ecureuil.jpg"></td> <td><img onclick="verifier('koala')" src="images/koala.jpg"></td> </tr> </table> <p>Nombre de coups : <span id="coups"></span></p> <p>Nombre de points : <span id="points"></span></p> </main> <footer> <p>Un jeu proposé dans le cadre d'un DM de NSI</p> </footer> </body> </html>

✎ 03° Les balises audio permettent de placer des sons sur la page. Ces sons seront audibles lorsqu'on donnera l'ordre de les jouer. En regardant la postion du fichier HTML par rapport aux fichiers MP3, justifiez en une phrase la chaîne de caractères qu'on trouve dans l'attribut scr des balises audio. Il faudrait utiliser quelques uns des mots suivants : dossier, sous-dossier, dossier parent

10 11 12 13 14 15 16 17 18
<audio id="agneau" src="sons/agneau.mp3"></audio> <audio id="tigre" src="sons/tigre.mp3"></audio> <audio id="canard" src="sons/canard.mp3"></audio> <audio id="lapin" src="sons/lapin.mp3"></audio> <audio id="tarentule" src="sons/tarentule.mp3"></audio> <audio id="chaton" src="sons/chaton.mp3"></audio> <audio id="suricate" src="sons/suricate.mp3"></audio> <audio id="ecureuil" src="sons/ecureuil.mp3"></audio> <audio id="koala" src="sons/koala.mp3"></audio>

✎ 04° La ligne 29 comporte une balise input qui permet entre autres d'afficher des boutons. En regardant ce code, dire sous quelle condition la fonction javascript choisir_un_son_au_hasard() va s'activer.

29
<input type="button" value="Jouer" onclick="choisir_un_son_au_hasard()">

On trouve ensuite encore un nouvel ensemble de balises qui permettent de représenter les choses à l'écran sous forme d'un tableau (par la structure de données, juste une représentation visuelle en lignes et colonnes).

La balise table permet de créer un tel tableau.

La balise tr permet de créer une nouvelle ligne dans votre tableau.

La balise td permet de créer une nouvelle colonne sur cette ligne.

✎ 05° En étudiant le code du tableau, justifier (simplement en le montrant via le code) le fait que les images du lapin, de l'araignée et des chatons soient regroupées à l'écran sur la deuxième ligne.

30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<table> <tr> <td><img onclick="verifier('agneau')" src="images/agneau.jpg"></td> <td><img onclick="verifier('tigre')" src="images/tigre.jpg"></td> <td><img onclick="verifier('canard')" src="images/canard.jpg"></td> </tr> <tr> <td><img onclick="verifier('lapin')" src="images/lapin.jpg"></td> <td><img onclick="verifier('tarentule')" src="images/tarentule.jpg"></td> <td><img onclick="verifier('chaton')" src="images/chaton.jpg"></td> </tr> <tr> <td><img onclick="verifier('suricate')" src="images/suricate.jpg"></td> <td><img onclick="verifier('ecureuil')" src="images/ecureuil.jpg"></td> <td><img onclick="verifier('koala')" src="images/koala.jpg"></td> </tr> </table>

✎ 06° Quelle est la fonction javascript qui va s'activer lorsqu'on clique sur l'une des images ? Quel est l'argument envoyé à la fonction lorsqu'on clique sur l'image de la ligne 32 ? Voyez-vous un lien avec l'id du son correspondant ?

✎ 07° Modifier les événements programmés sur les images : on veut maintenant que l'image soit testée lorsqu'on réalise un double-click sur les images.

Rappel issu l'activité 6 : il existe une multitude d'événements.

Liste des événements

Voici les événements liés à la souris

Nom JavascriptDescription
clickOn clique et on relâche sur la balise.
dblclickPareil mais en clic double.
mousedownOn clique gauche sans relâcher sur la balise.
mouseupOn relâche gauche sur la balise.
mouseoverOn survole la balise
mousemoveOn déplace la souris sur l'élément.
mouseoutOn fait sortir la souris de la balise.

Voici les événements liés au clavier

Nom JavascriptDescription
keydownOn appuie sans relâcher sur l'une des touches.
keyupOn relâche une touche.
keypressOn appuie et relâche une touche.

Voici les événements liés à la sélection et la mise en focus ou ciblage

Nom JavascriptDescription
focusOn vient de mettre le focus ou cibler l'élément, par exemple en cliquant sur l'élément.
blurOn annule ce ciblage, par exemple en cliquant ailleurs.
loadLa balise est correctement chargée.

Le reste du code HTML comporte surtout les deux balises span qui sont censées recupérer le nombre de coups joués et le nombre de points gagnés par le joueur.

47 48
<p>Nombre de coups : <span id="coups"></span></p> <p>Nombre de points : <span id="points"></span></p>

Regardons maintenant le code javascript.

Pour information, le voici : (inutile de l'analyser dans le détail immédiatement, vous allez le faire au cours de ce DM)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
// sons est un tableau qui contient les id des sons disponibles sons = ["agneau", "tigre", "canard", "lapin", "tarentule", "chaton", "suricate", "ecureuil", "koala"]; // memoire est un "tableau" qui va contenir le son voulu à l'index 0, le nombre de coups à l'index 1 et le nombre de coups réussi à l'index 2 memoire = ["aucun_choix", 0, 0]; function verifier(nom) { /* Fonction qui vérifie si le joueur a bien cliqué sur la bonne image */ document.getElementById(nom).play(); // Joue un son dont le id correspond à nom memoire[1] = memoire[1] + 1; // on incrémente l'index 1 de memoire document.getElementById('coups').innerHTML = memoire[1] if (nom == memoire[0]) { memoire[2] = memoire[2] + 1 ; document.getElementById('points').innerHTML = memoire[2]; } } function choisir_un_son_au_hasard() { /* Fonction qui choisit et joue un son parmi sons et place l'id dans memoire[0] .. effet de bord : modifie l'index 0 de memoire en y plaçant "agneau" ou autre ... */ var longueur = sons.length; var index_aleatoire = 0 + Math.floor(Math.random() * longueur) ; // entre 0 et (longueur-1) memoire[0] = sons[index_aleatoire]; // on place l'id sélectionné dans son_voulu[0] document.getElementById(memoire[0]).play(); // on joue le son pour que le joueur le retrouve } function demarrage() { document.getElementById('coups').innerHTML = memoire[1]; // affichage initial du nombre de coups document.getElementById('points').innerHTML = memoire[2]; // affichage initial du nombre de points } window.addEventListener("load", demarrage);

✎ 08° Les tableaux peuvent se déclarer en Javascript comme sous Python. La variable sons est donc un tableau regroupant les id des différents sons. Quel est le nombre d'éléments de ce tableau ? Que vaut l'élément sons[0] ? Que vaut l'élément sons[8] ? Existe-t-il un élément sons[9] ?

✎ 09° D'après les commentaires présents dans le fichier javascript, si on veut connaitre le nombre de tentatives effectuées depuis le début du jeu, doit-on taper memoire[0], memoire[1] ou memoire[2] ?

✎ 10° Expliquer concrètement ce que font les lignes 28 et 29. Pour cela, répondre aux questions suivantes :

  • Dans quel cas vont-elles s'exécuter ? (il s'agit uniquement de montrer que vous avez compris que l'action va avoir lieu lorsqu'un événement précis va avoir lieu et que vous parveniez à expliquer lequel)
  • Que va modifier la ligne 28 ? (il s'agit d'expliquer clairement pourquoi l'affichage va être modifié : les spans des lignes HTML 47 et 48 ne contiennent rien initialement, même pas 0)
  • Que va modifier la ligne 29 ?
3 4 26 27 28 29 30 31 32
// memoire est un "tableau" qui va contenir le son voulu à l'index 0, le nombre de coups à l'index 1 et le nombre de coups réussi à l'index 2 memoire = ["aucun_choix", 0, 0]; function demarrage() { document.getElementById('coups').innerHTML = memoire[1]; // affichage initial du nombre de coups document.getElementById('points').innerHTML = memoire[2]; // affichage initial du nombre de points } window.addEventListener("load", demarrage);

Pour mémoire, les lignes HTML à surveiller :

47 48
<p>Nombre de coups : <span id="coups"></span></p> <p>Nombre de points : <span id="points"></span></p>

Une fois cette action initiale réalisée, le programme rentre en logique purement événementielle : les actions suivantes ne pourront se déclencher que si l'utilisateur clique sur certains éléments.

Pour rappel, un click sur la balise input (un bouton) provoque l'appel de la fonction choisir_un_son_au_hasard :

29
<input type="button" value="Jouer" onclick="choisir_un_son_au_hasard()">

Voici des explications qui vous permettront de comprendre la question suivante :

  • Ligne 21 : on stocke 9 dans longueur (le nombre d'éléments du tableau sons ). En Python, on aurait len(sons).
  • 1 2 3 4 16 17 18 19 20 21 22 23 24 25
    // sons est un tableau qui contient les id des sons disponibles sons = ["agneau", "tigre", "canard", "lapin", "tarentule", "chaton", "suricate", "ecureuil", "koala"]; // memoire est un "tableau" qui va contenir le son voulu à l'index 0, le nombre de coups à l'index 1 et le nombre de coups réussi à l'index 2 memoire = ["aucun_choix", 0, 0]; function choisir_un_son_au_hasard() { /* Fonction qui choisit et joue un son parmi sons et place l'id dans memoire[0] .. effet de bord : modifie l'index 0 de memoire en y plaçant "agneau" ou autre ... */ var longueur = sons.length; var index_aleatoire = 0 + Math.floor(Math.random() * longueur) ; // entre 0 et (longueur-1) memoire[0] = sons[index_aleatoire]; // on place l'id sélectionné dans son_voulu[0] document.getElementById(memoire[0]).play(); // on joue le son pour que le joueur le retrouve }
  • Ligne 22 : inutile de tenter de comprendre le code, il suffit de savoir qu'on place un nombre entre 0 et 8 dans index_aleatoire. Pas 9, l'index 9 n'existe pas. Imaginons qu'on tire 1.
  • Ligne 23 : on part récupérer l'élément ayant cet index dans le tableau sons et on mémorise le nom obtenu à l'index 0 du tableau memoire. Avec un index de 1, on stocke donc "tigre".
  • Ligne 24 : on va récupérer la référence de la balise audio dont le id est bien celui qu'on a stocké dans memoire[0]. On ne mémorise pas cette référence, on l'utilise directement pour jouer ce son (avec la méthode play).

Maintenant que nous avons compris qu'en appuyant sur le bouton, on place au hasard un identifiant à l'index 0 du tableau memoire, voyons ce qui se passe lorsqu'on clique sur une image.

✎ 11° Imaginons qu'on ait memoire[0] pointant sur "tigre". Expliquer ce que fait la page Web lorsqu'on clique sur l'agneau. Que vont contenir les index 1 et 2 du tableau memoire après exécution de la fonction ?

Voici le code HTML intéressant, suivi du code Javascript à utiliser.

30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<table> <tr> <td><img onclick="verifier('agneau')" src="images/agneau.jpg"></td> <td><img onclick="verifier('tigre')" src="images/tigre.jpg"></td> <td><img onclick="verifier('canard')" src="images/canard.jpg"></td> </tr> <tr> <td><img onclick="verifier('lapin')" src="images/lapin.jpg"></td> <td><img onclick="verifier('tarentule')" src="images/tarentule.jpg"></td> <td><img onclick="verifier('chaton')" src="images/chaton.jpg"></td> </tr> <tr> <td><img onclick="verifier('suricate')" src="images/suricate.jpg"></td> <td><img onclick="verifier('ecureuil')" src="images/ecureuil.jpg"></td> <td><img onclick="verifier('koala')" src="images/koala.jpg"></td> </tr> </table>
3 4 5 6 7 8 9 10 11 12 13 14 15
// memoire est un "tableau" qui va contenir le son voulu à l'index 0, le nombre de coups à l'index 1 et le nombre de coups réussi à l'index 2 memoire = ["aucun_choix", 0, 0]; function verifier(nom) { /* Fonction qui vérifie si le joueur a bien cliqué sur la bonne image */ document.getElementById(nom).play(); // Joue un son dont le id correspond à nom memoire[1] = memoire[1] + 1; // on incrémente l'index 1 de memoire document.getElementById('coups').innerHTML = memoire[1] if (nom == memoire[0]) { memoire[2] = memoire[2] + 1 ; document.getElementById('points').innerHTML = memoire[2]; } }

✎ 12° Imaginons qu'on ai memoire[0] pointant sur "tigre". Expliquer ce que fait la page Web lorsqu'on clique sur le tigre. Que vont contenir les index 1 et 2 du tableau memoire après exécution de la fonction ?

Encore une fois, notez bien que l'interface est loin d'être finalisée, complète ou réellement propre. Le but est de ne pas laisser trainer sur le Web des projets clés en main qu'on pourrait reprendre pour un projet noté.

2 - Tableau et Python

✎ 13° On considère un tableau dont l'adresse de départ est 204. Considérons que le tableau contienne des entiers encodés sur 2 octets. L'index 0 est donc composé des adresses 204 et 205. Quels sont les deux octets qui correspondent à l'index 3 de ce tableau ?

Contenu de la mémoire
Un petit apercu de la mémoire

✎ 14° Expliquer ligne par ligne ce que créent ou retournent les instructions ci-dessous :

>>> tableau = ['a', 'b', 'c'] >>> nbr = len(tableau) >>> tableau[nbr-1]

✎ 15° Compléter la fonction plusQue10 qui renvoie le nombre de notes supérieures à 10 dans le tableau qu'elle reçoit dans le paramètre notes.

N'oubliez pas :

  • De créer et d'initialiser un compteur
  • De vous demander si on doit modifier le tableau.
    • Si c'est le cas, il faudra un for index in range(len(tableau)).
    • Sinon, on peut utiliser au choix for index in range(len(tableau)) ou for element in tableau.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
notes_de_bob = [10,12,14,8] def plusQue10(notes): """Fonction qui renvoie le nombre de notes strictement supérieures à 10 dans le tableau 10 :: param notes(list) :: un tableau d'entier dont les éléments sont dans [0;20] :: return (int) :: le nombre de notes supérieures à 10 :: exemples :: >>> notes_test = [10,12,14,8] >>> plusQue10(notes_test) 2 """ return 0 if __name__ == "__main__": import doctest doctest.testmod()

✎ 16° Compléter la fonction faillot qui modifie par effet de bord le tableau qu'elle reçoit dans le paramètre; notes. On rajoutera deux points aux notes de notre faillot sur les notes inférieures ou égales à 10.

N'oubliez pas :

  • De vous demander si on doit modifier le tableau.
    • Si c'est le cas, il faudra un for index in range(len(tableau)).
    • Sinon, on peut utiliser au choix for index in range(len(tableau)) ou for element in tableau.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
notes_de_bob = [10,12,14,8] def faillot(notes): """Fonction-procédure qui rajoute 2 points à toutes les notes inférieures à 10 du faillot :: param notes(list) :: un tableau d'entier dont les éléments sont dans [0;20] .. effet de bord : Modifie le tableau notes en rajoutant parfois 2 :: return (None) :: c'est une procédure, elle ne renvoie rien :: exemples :: >>> notes_test = [10,12,14,8,2] >>> faillot(notes_test) >>> notes_test [12, 12, 14, 10, 4] """ return 0 if __name__ == "__main__": import doctest doctest.testmod()

3 - Et ensuite ?

C'est tout. 16 questions fois 5 minutes, ca donne déjà presque 1 heure. Si on rajoute le temps de révision, on devrait dépasser l'heure de travail.

Je vais par contre montrer en cours comment simplifier le programme de la partie 1 en utilisant encore un peu plus le tableau et le mot-clé this.

Bon courage !

Activité publiée le 18 02 2020
Dernière modification : 15 09 2020
Auteur : ows. h.