Retour

Récupérez l'archive contenant les fichiers nécessaires aux exercices suivants et décompressez la dans votre espace de travail.

Cliquez sur le titre d'un exercice pour le découvrir.

Les fichiers créés au cours des différents exercices sont souvent réutilisés pour d'autres exercices ultérieurs. Veillez donc à toujours en avoir une version disponible.


Exercices d'application simples sur les événements et la manipulation de l'arbre DOM, découverte des objets timers.

Diaporamas

Array : les bases
  1. Consultez les notes de cours sur le type Array, notez comment sont référencés les éléments d'un tableau (t[i]) et l'existence de la propriété length (attention, aux fautes de frappe : length et non lenght )

    Consultez également la page du MDN sur le type Array de javascript. En particulier vous pouvez jeter un oeil à la documentation des méthodes (mais ce n'est pas exclusif) : concat, indexOf, slice, splice, pop et push, shift et unshift, etc.

    (Les méthodes telles que forEach, map, filter, etc. sont également très utilisées en javascript.)

  2. La fonction Math.random() fournit un nombre aléatoire entre 0 inclus et 1 exclu. Réalisez une fonction alea, qui prend en paramètre un entier n et a pour résultat un entier aléatoire entre 0 inclus et n exclu.
  3. Réalisez une fonction conforme à cette spécification
    /* createRandomArray : construit un tableau de nombres entiers positifs choisis aléatoirement
    Paramètres : 
      - n (entier > 0): le nombre d'éléments du tableau construit
      - max (entier > 0) : la valeur maximale (incluse) des éléments du tableau
    Résultat :
      un tableau de taille n dont les éléments dont des nombres entiers aléatoirement choisis en 0 et max exclus  
    Exemple :
    createRandomArray(5,100)   -> [3, 85, 43, 75, 20]
    */
    
  4. Réalisez une fonction maxElement qui calcule le plus grand élément d'un tableau de nombres.

    Testez la en calculant les plus grands éléments de tableaux construits avec la fonction de la question précédente.

  5. Créez une fonction nbOccurrences qui a pour résultat le nombre d'occurrences de son second paramètre dans le tableau passé en premier paramètre.
    				nbOccurrences([3,5,4,7,5,4],5) -> 2
    				nbOccurrences(["pim","bob","bill"],"bob") -> 1
    				nbOccurrences(["pim","bob","bill"],"pam") -> 0
  6. Utilisez les fonctions indexOf et splice, pour créer une fonction removeElement qui supprime du tableau passé en premier paramètre la première occurrence de l'élément passé en second paramètre. Le tableau n'est pas modifié si le second paramètre n'y apparaît pas.
    				removeElement([3,10,5,4,7,5,4],5) -> [3,10,4,7,5,4]
    				removeElement(["pim","bob","bill"],"bob") -> ["pim","bill"]
    				removeElement([3,10,5,4,7,5,4],12) -> [3,10,5,4,7,5,4]	
Diaporama v1
  1. Etudiez le document diaporama-v1.html, sa feuille de style et le contenu du fichier tabImages.js. Ce tableau contient les sources des images que l'on veut pouvoir afficher dans le diaporama.
  2. Créez un un fichier diapov1.js (par exemple) au sein du dossier scripts et définissez dedans une variable globale indiceImage qui représentera l'indice de la source de l'image actuellement affichée par le diaporama. Initialement cette variable vaut 0.
  3. Réalisez dans ce fichier une fonction afficheImage qui change la source de l'élément image d'id diapo et lui donne la valeur de l'élément d'indice indiceImage du tableau tabImages.
  4. Réalisez une fonction imageSuivante, sans paramètre, qui a pour effet de modifier la source de l'élément d'id diapo en la remplaçant par la valeur de l'élément du tableau tabImages dont l'indice est le suivant par rapport à indiceImage, en considérant que l'élément d'indice 0 suit l'élément de dernier indice défini du tableau (vous devez utiliser tabImages.length). Pour cela vous devez donc modifier indiceImage puis utiliser la fonction afficheImage de la question précédente .
  5. Dans le document html, ajoutez la déclaration du chargement du fichier diapov1.js dans l'entête de votre document HTML à l'aide d'une balise script.

    Ensuite complétez ce document avec un élément button puis dans diapov1.js faites le nécessaire pour qu'un clic sur ce bouton provoque l'affichage de l'image suivante dans l'élément d'id diapo.

  6. Testez le comportement de votre page.
  7. De manière similaire définissez une fonction pour afficher l'image précédente puis ajoutez dans le document html un bouton qui permet d'activer cette fonction.
Timer : introduction

Un timer permet de déclencher à intervalles réguliers l'exécution d'une fonction. On crée et démarre un timer grâce à la fonction window.setInterval à laquelle on passe en paramètre la fonction à exécuter et sa périodicité (en nombre de ms). En retour cette méthode fournit le timer créé. Ainsi 

var monTimer = window.setInterval(uneFonction,1000);

provoque l'exécution de la fonction uneFonction toutes les secondes et initialise monTimer avec le timer responsable de cette exécution.

On peut arrêter l'exécution périodique d'un timer à l'aide de la méthode window.clearInterval en lui passant en paramètre le timer que l'on veut interrompre. Par exemple :

window.clearInterval(monTimer);

interrompt le timer précédent.

  1. Reprenez le travail dans l'exercice diaporama v1 et ouvrez-le dans un navigateur.
  2. Dans une ardoise, créez un timer et utilisez le pour créer un diaporama défilant qui affiche successivement les images de tabImages à raison d'un image toutes les 3 secondes. Quelle fonction faut-il appeler à intervalle régulier ?
  3. Testez, puis interrompez le timer après quelques images. Dans l'exercice suivant nous allons gérer l'exécution de ce timer depuis le document html et le contrôler par des boutons.
Diaporama v2
On reprend dans cet exercice le travail réalisé dans l'exercice diaporama v1. On travaillera dans une copie diaporama-v2.html du fichier diaporama-1.html, qui s'appuiera sur du code javascript placé cette fois dans un fichier scripts/diapov2.js.
  1. Ajoutez à ce diaporama différents éléments :
    • deux boutons Lecture et Stop qui permettent respectivement de démarrer et d'arrêter le diaporama,
      On rappelle que les variables définies dans une fonction lui sont locales. Il est donc sans doute nécessaire de définir de manière globale une variable qui mémorise le timer utilisé pour pouvoir accéder à cette variable aussi bien dans la fonction qui démarre le timer que dans celle qui l'arrête.
    • une zone de saisie qui contiendra un nombre entier et qui correspondra au délai en secondes entre deux images du diaporama,
    • une zone de texte qui affiche une information de la forme i/Ni est le numéro de l'image affichée et N est le nombre total d'images dans le diaporama, évidemment la valeur de i doit s'adapter à chaque changement d'image,
    • une zone de texte qui affiche le nom du fichier correspondant à l'image affichée. On n'affichera que le nom du fichier sans le chemin de répertoire.
    Vous définirez des propriétés CSS afin d'obtenir un affichage agréable de la page (taille, couleur, positionnement des éléments, etc.).
  2. Modifiez ce qui a été réalisé ci-dessus pour qu'il n'y ait plus qu'un seul bouton. Celui-ci se comporte comme le bouton Lecture précédent lorsque le diaporama n'est pas démarré et comme le bouton Stop dans le cas contraire. Le texte du bouton doit donc changer en conséquence. Vous pouvez aussi remplacer le texte du bouton par une image qui s'adaptera en fonction du contexte du bouton.
Diaporama v3
La propriété CSS opacity définit la transparence d'un élément. Sa valeur est un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque). Plus la valeur est proche de 0.0 plus l'élément est translucide. Voir la page du MDN pour plus de détails.
La fonction setTimeout permet de retarder l'exécution d'un apppel de fonction en précisant le délai d'attente avant cette exécution (voir sur le MDN).

Ainsi l'appel window.setTimeout(f,delai) a pour effet d'appeler la fonction f après delai millisecondes.

Il est possible d'ajouter des paramètres et alors l'appel window.setTimeout(f,delai, param1, ... ,paramN) provoque l'appel de fonction f(param1, ..., paramN) après delai millisecondes.

C'est uniquement l'appel de la fonction qui est décalée dans le temps. Le programme n'est lui pas arrêté. C'est-à-dire que les expressions qui suivent l'appel à window.setTimeout ne sont pas retardées. Ainsi dans le bloc d'expressions suivant :

            var x = 1;
            window.setTimeout(f,2500,true);
            window.alert(x);
            

l'appel f(true) est exécutée 2,5s après la déclaration de la variable x mais l'exécution de window.alert(x) a lieu immédiatement et donc avant l'exécution de l'appel f(true) (à peu de chose près 2,5s avant).

On reprend dans cet exercice le travail réalisé dans l'exercice diaporama v2. On travaillera dans une copie diaporama-v3.html du fichier diaporama-2.html, qui s'appuiera sur du code javascript placé cette fois dans un fichier scripts/diapov3.js.

  1. Ajoutez à la feuille CSS une règle de transition CSS afin de rendre progressif sur 1s le changement de valeur de la propriété opacity de l'élément d'id diapo.
    å
    Code CSS.
    Réponse.
        img#diapo {
            transition : opacity 1s;
        }
  2. Définissez une fonction attenue qui fixe l'opacité de #diapo à 0.
  3. Testez la fonction depuis l'ardoise.
  4. Réalisez maintenant la fonction devoile qui fait le travail inverse de attenue en positionnant l'opacité à 1 et testez la depuis l'ardoise.
  5. Modifiez maintenant le code du diaporama pour qu'avant chaque changement d'image, l'image s'atténue progressivement.

    Pour que la nouvelle image soit visible il est nécessaire de faire un appel à devoile après le changement de la source de l'image, faites-le.

    Testez. Que se passe-t-il ? Pourquoi ? (tout est une question de tempo...)

    Au bout de combien de temps, la fonction devoile doit-elle s’exécuter ? Faites le nécessaire.