JS Logo

Interactivité avec JavaScript

Mattia A. Fritz
TECFA, Université de Genève

Composantes des pages web

HTML5, CSS et JavaScript
Structure
Forme
Interaction

JavaScript et le navigateur web

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Une page HTML5</title>
	<meta charset="UTF-8">
	<!-- Téléchargement du CSS -->
	<link href="assets/css/style.css" rel="stylesheet">
</head>

<body>
	<!-- Téléchargement du fichier JS -->
	<script src="assets/js/app.js"></script>
</body>
</html>						

Les instructions sont téléchargées avec la page.

Un moteur JS dans le navigateur

Moteur JavaScript

Le code est interprété à l'intérieur du navigateur.

L'objet global window

JavaScript peut contrôler, avec des limitations, le navigateur à travers l'objet global window.
  1. Ouvrez la console du navigateur F12
  2. Entrez window
  3. Après entrez window.innerHeight
  4. Enfin entrez window.location.href

Accès au DOM de la page

À l'intérieur de l'objet window, vous avez l'objet window.document qui donne accès au DOM.
  1. Entrez window.document dans la console
  2. Puis seulement document
  3. Maintenant entrez document.title
  4. Et enfin document.body

Manipulation du DOM

À travers l'accès au DOM vous pouvez manipuler les différents éléments de la page.
  1. Entrez document.getElementById('slideTitle').innerHTML
  2. Puis document.getElementById('slideTitle').innerHTML = 'On peut faire mieux !'

Instructions pour la présentation

Cette présentation utilise du code de Reveal.js, une bibliothèque pour créer des slides en HTML5, CSS et JavaScript.
  1. Entrez Reveal dans la console
  2. Puis entrez Reveal.getTotalSlides()
  3. Et finalement entrez Reveal.next()

Facile, n'est-ce pas ?

Maintenant regardez le code HTML du bouton.

<button onclick="Reveal.next()">Prochaine slide</button>

Que ce passe-t-il si vous cliquez ?

Voilà !

Les applications interactives sont une extension de ce mécanisme de base :

  1. Les instructions sont codées en amont et téléchargées avec la page
  2. Elles sont ensuite déclenchées par des événements, comme par exemple le clique sur un bouton

Gestionnaire d'événements

Comme pour CSS, on peut ajouter du code en dehors des balises HTML5 en utilisant, par exemple, un event listener.

<button id="nextSlideBtn">Prochaine slide</button>

          // Code JavaScript
          document.
            getElementById("nextSlideBtn").
            addEventListener("click", function() {
              Reveal.next();
            });
          

On identifie le bouton dans le DOM et on détermine l'action à déclencher lors de l'événement click

Autres événements

Insérez un mot pour voir l'équivalent en code binaire.

Événement keyup

Autres éléments interactifs

Cliquez sur les parties du visage pour voir le nom en anglais.

image/svg+xml

En synthèse

Pour créer une interaction il faut :

  1. Identifier l'élément interactif dans le DOM
  2. Lui appliquer un gestionnaire d'événement associé à un type d'événement spécifique
  3. Définir une règle de comportement (i.e. une fonction) qui est déclenchée par l'événement

Ce processus peut se complexifier avec la programmation. Par exemple, identifier plusieurs éléments ou événements à la fois, ou déclencher plusieurs règles de comportements.

Pour aller plus loin

Les concepts abordés dans cette présentation sont traités de manière plus exhaustive dans un article sur EduTechWiki.

EduTechWiki est un wiki sur la technologie éducative hébergé est maintenu par TECFA, une unité de l'Université de Genève, depuis 2006.

Merci pour votre attention !

Mattia A. Fritz
TECFA, Université de Genève

Licence Creative Commons
Présentation créée avec Reveal.js.