Interaction avec l’utilisateur dans une page Web

Interactions entre l'homme et la machine sur le Web

Plan

Clic sur liens

Lorsque l'on clique sur un lien en html, on peut programmer deux réactions.

La première, classique, un pur lien html de redirection:

<a href="dossier/ma_page.html">Clique ici pour aller à ma_page.html</a>

On rappelle que l'adresse dans href est une adresse relative si elle fait parti de notre site, absolue pour changer de site. Pour descendre dans l'arborescence on utilise .., pour monter on met comme ici le nom des dossiers.

La deuxième méthode utilise le javascript pour lancer une fonction lorsque l'on clique sur le texte:

<a href='javascript:fonction()'>Clique ici pour aller à ma_page.html</a>

fonction() peut-être une commande javascript comme aller à une page ou une fonction écrite dans l'en-tête, entre des balises script.

Le css gère aussi le clic avec :active, on pourrait donc cliquer sur un texte et executer des actions css mais pas un changement de page.

Css et événements

Le css est de plus en plus puissant. Il permet aujourd'hui de créer des animations! Des commandes permettent de modifier l'aspect d'une page en fonction de la souris.

Par exmple:

  • p :hover { .... va définir le paragraphe lorsque la souris passe dessus! police plus grande, changement de couleurs.....
  • h3 :active {... lors du clic on modifie le titre h3 mais cela ne dure que le temps du clic!
  • #id_lien:target { se lance avec un href="#id_lien" dans le html. Peut être utile pour lancer une animation avec -webkit-animation-name:anim; avec anim une animation css nommée anim

On voit que le css peut gérer les événements qui ne provoqueront que des changement graphiques. Comment traiter les réponses à un formulaire, vérifier que l'on a bien saisi un mail? C'est le rôle du Javascript. On peut aussi faire cela en php, mais c'est plus lourd car le php s'execute côté serveur donc la page est renvoyée au serveur qui va traiter et répondre.

Javascript et événements

Le javascript est un langage qui s'execute directement dans votre navigateur, ce que l'on appelle côté client (le client c'est vous). Le script peu s'exectuer à l'ouverture de la page mais peut aussi se lancer lors d'une de vos actions...vous créez un événement prévu par le concepteur de la page et cela lance un script côté client.

Voici quelques événements javascript:

  • onclick: déclenche le script quand on clique
  • ondbclick: lors du double clic
  • onmouseover: lorsque la souris passe dessus

voici un petit code avec du javascript

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" >
			function bonjour() {
				var str=window.prompt(" Entrez votre prénom ");
				afficher_dans_element("et bienvenue " + str,'ajoute_ici')
			}

			function afficher_dans_element(contenu,id_contenant){
				document.getElementById(id_contenant).innerHTML = contenu;
			}
		</script>
	</head>
	<body>
		<p>Voici un moyen de remplacer un bout d'une page HTML! Passez la souris
	   sur la ligne suivante</p>
		<p  onmouseover="bonjour()">bonjour
		<span id="ajoute_ici">toi</span> </p>
	</body>
</html>

Encore un autre exemple mais cette fois-ci je mets les fonctions javascript dans un fichier séparé. Voici le html

<!DOCTYPE html>
<html>
 <head>
	<script  src="testJavascript2.js"> </script>

 </head>
 <body>
		<p>Voici un moyen de remplacer un bout d'une page HTML! Passez la souris
	 sur la ligne suivante</p>
		<p  onmouseover="bonjour()">bonjour
		<span id="ajoute_ici">toi</span> </p>
		<p>Clique sur ton prénom pour l'inverser</p>
		<p id="inverse_prenom" onclick="inverse('inverse_prenom')"></p>
 </body>
</html>

Le javascript:

function bonjour() {
   var str=window.prompt(" Entrez votre prénom ");
   afficher_dans_element("et bienvenue " + str,'ajoute_ici')
    document.getElementById('inverse_prenom').innerHTML = str;
 }
 function afficher_dans_element(contenu,id_contenant){
     document.getElementById(id_contenant).innerHTML = contenu;
 }

function inverse(id_contenant) {
  var ma_chaine=document.getElementById(id_contenant).innerHTML;
  var chaine_inverse="";
  for (var x = 0; x &lt;ma_chaine.length; x++) {
    chaine_inverse=ma_chaine.charAt(x)+chaine_inverse;
  }
  document.getElementById(id_contenant).innerHTML=chaine_inverse;
}

Clics et boutons

En html, on peut ajouter des boutons. Le clic sur bouton peut être géré comme précédement pour des actions complexes mais pour de la simple navigation dans une page ce n'est pas utile. Le html suffit.

<FORM ACTION="page1.html">
	<INPUT TYPE="SUBMIT" VALUE="   aller en page1    ">
</FORM>

Dans l'exemple, précédent, à mettre dans le body de la page, le clic sur le bouton va ouvrir la page page1.html et remplacer la page actuelle. FORM indique que l'on crée un formulaire. On étudiera les formulaires dans cette page.

Voyons maintenant comment réaliser un menu déroulant avec des liens qui sont des ancres de pages et d'autres externes mais qui vont s'ouvrir dans une nouvelle page.

<FORM>
  <SELECT onChange="document.location=this.options[this.selectedIndex].value">
	   <OPTION VALUE="#" SELECTED>     CHOISIR     </OPTION>
	   <OPTION VALUE="#paragraphe1">Aller au paragraphe 1</OPTION>
	   <OPTION VALUE="#paragraphe2">Aller au paragraphe 2</OPTION>
	   <OPTION VALUE="complement.html">Visiter une page complément</OPTION>
  </SELECT>
</FORM>

Pour pouvoir utiliser les #paragraphe, il faudra ajouter une ancre dans une balise. Par exemple <h2 id="paragraphe1">mon titre paragraphe 1 </h2>

Enfin, pour revenir au javascript, voici une version avec 3 boutons qui utilise le javascript:

<FORM>
  <INPUT TYPE="BUTTON" VALUE="   page 1   "
               onClick="document.location='page1.html'"><BR>
  <INPUT TYPE="BUTTON" VALUE="   page 2   "
               onClick="document.location='page2.html'"><BR>
  <INPUT TYPE="BUTTON" VALUE=" Retour "
               onClick="history.back()">
</FORM>

Exercice

Telecharger le pdf et suivre les consignes.


Android

De la programmation pour pc à la programmation pour téléphone.

A finir

Pas eu le temps de tout faire.....