Interactions avec l'utilisateur : JavaScript

HTML et CSS servent à décrire et mettre en forme les pages web; pour gérer l'aspect "dynamique" d'un site web, et les interactions nécessaires avec l'utilisateur, il faut faire appel cette fois à un "vrai" langage de programmation, comme le JavaScript.

On peut alors interagir de très nombreuses façons avec une page web : cliquer sur un bouton pour modifier des couleurs, lancer un calcul ou une animation, faire des dessins ou tracer des courbes, etc...

Les bases du JavaScript

Vous connaissez en fait les éléments de base de JavaScript, car ce sont en réalité les mêmes qu'en Python ou autre langage : on y retrouve les notions de variables, de boucles, de tableaux, etc...

Toutefois, il y a de grandes différences dans la syntaxe, c'est à dire la manière d'écrire le code :

let a = 1; // définition d'une variable

for (let i = 0; i < 10; i++){  // une boucle bornée
	a = a * 3;
}	
					

• chaque instruction doit être suivie d'un point-virgule : ;
• ce n'est pas l'indentation qui structure le code : les instructions d'un même bloc de code sont ici encadrées par des accolades : { .... }.
  L'indentation ne sert ici qu'à rendre le code plus lisible, mais certains programmes peuvent être écrits en JavaScript sur une seule (très) longue ligne !
• les commentaires sont précédées d'un double-slash : //

Le programme de 1^ère NSI n'impose aucune maîtrise du langage JavaScript; si toutefois vous voulez en savoir plus sur ce langage, vous pouvez consulter cette page d'aide.

Intégration du JavaScript dans une page web

Où mettre le code JS ?

Le JavaScript est, comme son nom l'indique, un langage de script ( donc non compilé ) comme Python. Il est exécuté par le navigateur lui-même ( donc "côté client" ), pas besoin de programme annexe.
Les scripts s'écrivent dans un fichier d'extension .js, que l'on lie à la page web à laquelle il est destiné avec une instruction placée dans le fichier HTML :

	<script type="text/javascript" src="nom_du_script.js"></script>
			

Une fois "lié" à la page, on dispose de toutes les instructions écrites dans le script.

Exceptionnellement, certaines pages peuvent intégrer des "bouts" de code JS directement dans le fichier .html; c'est une pratique à éviter cependant...

Développement en JavaScript

Pour coder en JavaScript, un simple éditeur de texte suffit ( vous utiliserez là-aussi Bluefish ).

Par contre, le débogage est moins évident : il faudra aller consulter les messages d'erreur directement dans la console du navigateur.
Pour la faire apparaître, faites CTRL + MAJ + K dans la page du navigateur exécutant le script :

Exécution du code JavaScript

Les évènements

La programmation JS est du type événementielle, c'est à dire que le code ne s’exécute que si certains évènements se produisent :

• l'utilisateur a cliqué sur la souris ( et sur tel ou tel bouton )
• l'utilisateur a enfoncé une touche du clavier
• il a cliqué sur un bouton de formulaire
• la page a fini de se charger
• un téléchargement démarre ou se termine....
• ...................

Vous trouverez ici la ( longue ) liste des évènements à laquelle un site peut répondre.

Lorsqu'un évènement se produit, une fonction du code JS est alors automatiquement exécutée. Cette fonction est appelée gestionnaire d'évènement.

let btn = document.querySelector("div[class='travail'] button"); // sélection du bouton 

function affiche(){ // gestionnaire d'évènement

	alert('Y a encore du boulot...');

}

btn.addEventListener('click', affiche); // placement d'un écouteur sur le bouton
		

Association d'un évènement à un élément d'une page web

Pour appeler la fonction gestionnaire d'évènement, il faut que l'utilisateur puisse interagir avec la page : on peut donc attribuer à des éléments de la page le rôle de "déclencheur" d’évènement.
N'importe quel élément HTML peut servir de "déclencheur" : bouton bien sûr, mais aussi paragraphe, titre, cellule de tableau, etc...

L'association d'un évènement à un élément donné se fait en deux temps :

Sélection d'un élément de la page

Le code JS doit pouvoir sélectionner l'élément HTML avec lequel il va interagir, c'est à dire le manipuler ou en recevoir des informations, voire en créer un nouveau.

Voila par exemple l'instruction qui permet la sélection de l'élément de type button dans l'exemple ci-dessus :

let btn = document.querySelector("div[class='travail'] button");
				

• la méthode querySelector() permet de sélectionner un élément selon un sélecteur CSS donné, ici le sélecteur div[class='travail'] button qui correspond à : "le bouton situé dans un élément div de classe 'travail' ".
• une référence vers cet élément est alors affecté à la variable btn : c'est avec elle que JavaScript travaillera ensuite ( cette variable est en réalité un objet du point de vue informatique, notion que vous ne verrez qu'en Terminale; nous continuerons donc pour l'instant à l'appeler variable...)

Outre cette méthode de sélection par sélecteur CSS ( qui est une des plus puissantes ), il en existe d'autres :

document.getElementsByClassName(nom_de_classe)

document.getElementsByTagName(nom_de_balise)

document.getElementById(id)

document.querySelector(sélecteur)

document.querySelectorAll(sélecteur)

( Attention à la syntaxe Camel-case du JavaScript, au pluriel, au singulier,...)

document.getElementById('mon_texte');
					

	<p id="mon_texte">Attention, la sélection d'un élément ne concerne pas que lui mais <strong><em>tout ses éléments enfants</em></strong>.</p>
					

Association à un gestionnaire d'évènement

Pour associer ensuite un gestionnaire d'évènement à un élément sélectionné, il faut placer un écouteur ( listener ) sur l'évènement en question.

Pour associer au clic sur le bouton précédemment sélectionné le gestionnaire d'évènement qui affiche la fenêtre "pop-up" ( fonction affiche() ), on trouve ainsi l'instruction :

	btn.addEventListener('click', affiche);
				

Mon premier évènement...

Voila un petit travail : vous allez donner la possibilité à l'utilisateur qui consulte votre page sur un informaticien célèbre, de connaître, à sa demande, la date du jour et l'heure qu'il est ( ça peut toujours servir...).
L'heure lui sera donnée lorsqu'il cliquera sur un bouton en bas de la page.

Travail à faire

1. placer dans votre page un bouton sur lequel l'utilisateur pourra cliquer ( voir exemple ci-dessus ).
   Donner à ce bouton un id afin de pouvoir le sélectionner facilement
2. écrire l'instruction qui place un écouteur sur le bouton de la page pour le gestionnaire d'évènement que vous allez ensuite écrire.
3. Créer un fichier .js, distinct du fichier .html , mais dans le même répertoire, et de même nom que lui;
4. écrire dans ce fichier le gestionnaire d'évènement permettant l'affichage du jour et de l'heure dans un nouveau paragraphe.
5. Lier votre script JS à la page HTML, recharger celle-ci dans le navigateur, et tester votre code !

• Pour déterminer la date et le jour, utiliser la fonction JS suivante :

  
  let aujourdhui = new Date(); // la variable 'aujourdhui' contient la date et l'heure actuelles
          			     

• Le format de la date renvoyée par la fonction précédente n'est pas très joli...voila les fonctions qui renvoient individuellement les différentes informations temporelles :

  
  aujourdhui.getFullYear()	// année sous la forme XXXX
  aujourdhui.getMonth()		// Mois 0-11 	0 = Janvier
  aujourdhui.getDate()		// Date 1-31 	
  aujourdhui.getDay()			// Jour 0-6 	0 = Dimanche
  aujourdhui.getHours()		// Heure 0-23 	0 = minuit
  aujourdhui.getMinutes()		// Minutes 0-59 	
  aujourdhui.getSeconds()		// Secondes 0-59
  			             

  On pourra utiliser avec profit les deux tableaux suivants :

  
  let jours = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
  let mois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
          		          

  Les tableaux JS se manipulent exactement de la même façon que les tableaux Python.

• pour créer un nouvel élément, on utilise la fonction JS createElement :

  
  document.createElement('p'); // renvoie un nouvel élément, ici un paragraphe.
      			         

• Pour modifier le texte contenu dans un élément, il faut modifier sa propriété textContent :

  
  elt.textContent = 'blablabla';
      			         

  En JavaScript, on peut bien entendu concaténer des chaînes de caractères comme en Python avec l'opérateur +.

• enfin, pour insérer un élément dans un autre, on utilise la fonction appendChild :

  
  parent.appendChild(enfant); // ajoute l'élément 'enfant' comme enfant de l'élément 'parent'
      			         

Lien vers les RÉPONSES

Rendu de votre travail