Dans ce TP nous allons nous lancer à la découverte d'un langage "particulier" mais extrêmement utile : JavaScript. Dans cette vidéo humoristique (il y a quelques exagérations volontaires de la part de l'orateur) un adepte de JavaScript nous dévoile à quel point ce langage peut être étrange :

Exercice 1

Ecrire un code HTML et CSS qui permet d’afficher les images suivantes, alignées à l'horizontale:

Utiliser une table pour afficher les images.
Si vous ne connaissez pas les tables HTML, vous pouvez lire le tutoriel suivant à ce sujet : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061455-ajoutez-des-tableaux

Exercice 2

Pour que la page réagisse aux actions de l’utilisateur, on ajoute ce qu'on appelle des "gestionnaires d'événements" aux balises HTML. On souhaite afficher une fenêtre au moment du clique sur une image.

Ajoutez aux images l'événement onclick et affichez une fenêtre avec la fonction alert

Syntaxe onclick :
<element onclick="monScript">

Syntaxe alert :
alert("Votre message")

Exercice 3

Nous allons créer notre première fonction en JavaScript. Pour cela nous allons ajouter une balise script juste avant </body> :

<script type="text/javascript">
function ma_fonction(parametres) {
  mon_instruction;
}
</script>

</body>

Plutôt que d'afficher une fenêtre à chaque clique, cette fois-ci nous allons afficher un message dans la console :

Syntaxe

console.log("message");

Pour cela, créer une fonction afficher_animal qui prend en paramètre le nom de l'animal et qui affiche dans la console l'animal (chien ou chat).

Remplacer l'appel à alert par l'appel à cette fonction.

Ouvrez le débogueur (appuyez sur F12), allez dans l'onglet Console et vérifier que les messages s'affichent correctement.

Exercice 4

Pour conclure ce premier TP, nous allons animer les images au moment du clique. Pour cela, ajoutez la fonction tourner_image dans la balise script et complétez là :

    function tourner_image(image){

        const tournePetitAnimal = [
          { transform: "rotate(0) scale(1)" },
          { transform: "rotate(360deg) scale(0)" },
            ];

        const AnimalTiming = {
          duration: 2000,
          iterations: 1,
        };

        #COMPLETER_ICI.animate(tournePetitAnimal, AnimalTiming);

    }

Pour appeler la fonction, on passe en paramètre l'image en utilisant le mot clé this qui correspond dans ce cas à l'objet sur lequel on a cliqué : l'image.

Remplacer l'appel à la fonction afficher_animal par l'appel à tourner_image.