Modalités de l'interaction entre l'homme et la machine. Evénements.

Interactions entre l'homme et la machine sur le Web

Plan

Introduction

Rappelons qu'une page Web est constituée de balises HTML qui servent à connaitre le rôle de chaque partie et que le CSS, généralement dans un deuxième fichier, gère l'aspect présentation de la page. Cliquer ici pour un cours complet sur l'HTML

Voici le code d'une page Web vide, avec une image dans l'onglet et un lien vers un fichier css. 

	<!DOCTYPE html>
	<html>
	 <head>
	   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	   <link rel="shortcut icon" type="image/ico" href="img/favicon.gif" />
	   <link rel="stylesheet" type="text/css" href="style.css" />
	   <title> titre </title>
	 </head>
	 <body>
		 	//code de la page...
	 </body>
	</html>

Interaction IHM?, événements

Vous avez forcément remarqué que vous pouvez effectuer différentes actions sur une page Web. N'avez vous jamais vu un texte changer de couleur lorsque vous passez la souris dessus, cliqué sur un lien, fait apparaître un texte, rempli un formulaire?

Tout ceci fait parti de l'IHM (interaction homme machine). Vous interagissez avec la page Web, elle agit en fonction de ce que vous faites; on dit qu'elle gère des événements. En fonctions de l'événement, clic, souris sur objet, la page Web réagit.

On peut faire réagir une page de différentes manières: par le css qui devient de plus en plus puissant (il est possible aujourd'hui de faire tourner une image en continu), en javascript pour des animations plus complexe et du traitement de formulaire, le php...

Ce site contient par moment du javascript. Regardez la page construction élémentaires dans Langage et programmation puis son code source . Je vais vider cette page du contenu textuel pour plus de clareté dans la partie suivante.

Exemple

Voici le code de la page Constructions élémentaires

<html>
	<head>
		<title>NSI Constructions élémentaires</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="Le cours programmation Python, constructions élémentaires NSI du lycée  Montpellier." />
    <link rel="shortcut icon" type="image/png" href="favicon32.png" />
		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.dropotron.min.js"></script>
		<script src="js/jquery.scrolly.min.js"></script>
		<script src="js/jquery.onvisible.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-layers.min.js"></script>
		<script src="js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-desktop.css" />
			<link rel="stylesheet" href="css/style-noscript.css" />
		</noscript>
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
	</head>
	<body class="no-sidebar">

		<script>
		function myFunction(ide) {
		  var x = document.getElementById("Variables");
			var y = document.getElementById("Types");
			var z=document.getElementById("Operateurs");
			var xx = document.getElementById("If");
			var yy = document.getElementById("BoucleFor");
			var zz=document.getElementById("BouclesWhile");
			var zzz=document.getElementById("Fonctions");
			var yyy=document.getElementById("Exercices");
			x.style.display = "none";
			y.style.display = "none";
			z.style.display = "none";
			xx.style.display = "none";
			yy.style.display = "none";
			zz.style.display = "none";
			zzz.style.display = "none";
			yyy.style.display = "none";
			var affiche=document.getElementById(ide);
			affiche.style.display = "block";

		}
		function cache(ide) {
		  var x = document.getElementById(ide);
		  if (x.style.display === "none") {
		    x.style.display = "block";
		  } else {
		    x.style.display = "none";
		  }
			window.location.href='#Plan'
		}

		function suite(sui,av) {
			cache(av);
			myFunction(sui);
		}
		</script>



		<div id="header">

			<!-- Inner -->
				<div class="inner">
					<header>
						<h1><a href="coursNsiPremiereMenu.php">En première</a></h1>
					</header>
				</div>

			<!-- Nav -->
				<?php include('menu.html')
				?>

		</div>


		<div class="wrapper style1">
			<div class="container">
				<div class="row 200%">
					<div class="8u" id="content">
						<article id="main" class="special">
							<header>
								<h2><a href="#">Langages et programmation</a></h2>
								<p>Constructions élémentaires</p>
							</header>

							<section id="Plan">
								<header>
									<h3>Plan</h3>
								</header>
								<ul class="default">
									<li><a href="#Variables" onclick="myFunction('Variables')"> Variables</a></li>
									<li><a href="#Types" onclick="myFunction('Types')">Les types de variables</a></li>
									<li><a href="#Operateurs" onclick="myFunction('Operateurs')">Les Operations sur les variables</a></li>
									<li><a href="#If" onclick="myFunction('If')">Conditions</a></li
									<li><a href="#BoucleFor" onclick="myFunction('BoucleFor')">Boucles bornées: For</a></li>
									<li><a href="#BouclesWhile" onclick="myFunction('BouclesWhile')">Boucles non bornées: while</a></li>
									<li><a href="#Fonctions" onclick="myFunction('Fonctions')">Fonctions</a></li>
									<li><a href="#Exercices" onclick="myFunction('Exercices')">Exercices</a></li>
								</ul>
							</section>


							<section id="Variables" style="display:none">
							  <header>
									<h3>Variables </h3>
							  </header>
								<p>blabla...</p>
								<button class="button" onclick="suite('Types','Variables')" >Suite: types de variables</button
							</section>
				.
				.
				.
				.
				.

Identifiez les endroits qui permettent une réaction.

Dans la ligne :

<button class="button" onclick="cache('Exercices')" >Suite: retour Menu</button>

Distinguez la partie qui décrit ce qui est affiché et celle qui donne l'action à executer.

Profitez en pour regarder le code javascript après la balise SCRIPT. Voyez les ressemblances et différences avec Python

Est-ce que l'on change de page lors de l'utilisation de celle-ci? Qu'est ce que cela implique sur l'utilisation du javascript dans ce cas?

Chapitre suivant

Android

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

A finir

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