Gestion des booléens en html

html+JavaScript gèrent les booléens en engagement direct
jeudi 6 septembre 2012
par  Alain BUSSER

Le principe est simple : Lorsque la case est cochée, le booléen est « true » (niveau logique 1) et lorsqu’elle est décochée, le booléen est « false » (valeur logique 0). En plaçant ces cases à cocher dans des tableaux, on a un outil de test manipulable en ligne.

Un booléen

Un booléen, c’est tout d’abord une case à cocher ; en html une telle case est une entrée, et se trouve donc décrite par la balise input, en précisant le type checkbox et en lui fournissant un identifiant qui permet à ECMAScript de le retrouver.

Par exemple si l’identifiant est « in1 » :

<input id="in1" type="checkbox" onChange="dessin();"/>

Dès lors, la fonction JavaScript getElementById permet de retrouver et utiliser ce bouton :

  1. on envoie au document un message signifiant qu’on s’adresse à lui : document ;
  2. on invoque alors sa méthode getElementById qui retourne l’élément d’identifiant donné : document.getElementById(« in1 ») ;
  3. cet élément se trouvant être une case (« checkbox ») possède un attribut « checked », qu’on peut donc obtenir avec document.getElementById(« in1 »).checked.

Il est même possible de modifier cet attribut avec ECMAScript, comme on le fait dans l’onglet suivant. Le tout se fait dans une fonction ECMAScript qui est elle-même appelée par l’élément « onChange » de la case à cocher ; autrement dit, cette fonction sera appelée à chaque modification de la case (quand on la coche, ou quand on la décoche). Ici cette fonction s’appelle « dessin() » car elle dessine un interrupteur dont l’état illustre celui de la case. Des modifications du html même ont aussi lieu, portant sur des « spans » possédant eux aussi des identifiants :

  1. On s’adresse toujours au document : document, c’est à toi que je parle ;
  2. on invoque toujours la méthode « getElementById » : document.getElementById(« out1 ») qui donne « out1, c’est finalement à toi que je parle [1] » ;
  3. l’élément d’identifiant « out1 » se trouvant être un « span », possède un attribut « innerHTML » que l’on peut modifier : document.getElementById(« out1 »).innerHTML=« fermé »

(cette dernière modification est appliquée lorsque la case est cochée).

Avec ce genre de messages entre éléments html, on obtient ceci [2] :

Variables booléennes

Variables booléennes

Cocher la case ci-dessous ferme l'interrupteur, et fait passer le courant.


L'interrupteur est ouvert:

Le courant ne passe pas:

Le niveau logique représenté est 0.

Deux booléens

Avec deux booléens, on peut commencer à faire des portes logiques, et ajouter des sorties booléennes destinées à être modifiées par programme, donc non éditables :

<input id="out1" type="checkbox" disabled=true checked=true />

Maintenant le courant est si intense lorsqu’on ferme l’interrupteur, qu’il chauffe les conducteurs au rouge :

Fonctions booléennes

Fonctions booléennes

Négation

Table de vérité

p¬p
01
10

Conjonction

Table de vérité

p∧q01
000
101

Disjonction inclusive

Table de vérité

p∨q01
001
111

Un octet

Huit booléens font un octet ; on peut donc entrer un octet avec huit cases à cocher (ou pas...). Pour faire joli, on les place dans un tableau, avec des identifiants égaux à « a07 », « a06 » etc [3].

Voici le code ECMASCript qui permet d’avoir la valeur entière de l’octet choisi, à l’aide d’une variable p qui parcourt les puissances successives de 2, à additionner à l’octet ... ou pas :

function code(){
	var s=0;
	var p=1;
	for(n=0,p=1;n<=7;n++,p*=2){
		if(document.getElementById('a0'+n.toString()).checked){
			document.getElementById('o0'+n.toString()).innerHTML=1;
			s+=p;
			} else {
				document.getElementById('o0'+n.toString()).innerHTML=0;
			}
	}
	document.getElementById("s01").innerHTML=s;
}

Il produit l’effet suivant :

octet

Un octet

0 0 0 0 0 0 0 0

L'octet affiché est 0.

Proposition de projet

Modifier le fichier html pour qu’il affiche la valeur de l’octet en complément à deux (allant de -128 à 127, au lieu d’aller de 0 à 256).

Deux octets

En recommençant une deuxième fois tout ce qui est dans l’onglet précédent, on peut implémenter un additionneur d’octets en ECMAScript.

C’est un peu plus dur...

Deux « dictionnaires » permettent directement d’avoir les conversions de booléens en entiers et vice-versa :

var bool=[false,true];
var chiffre={false:0,true:1};

Les fonctions « ou exclusif » (chiffre de la somme en binaire), « somme » (somme de trois chiffres, dont un est la retenue précédente) et « retenue » sont implémentées directement sur des booléens :

function xor(a,b){return (a||b)&&!(a&&b);}
function add(a,b,r){return xor(xor(a,b),r);}
function ret(a,b,r){return ((a&&b)||(a&&r)||(b&&r));}

Elles permettent d’avoir, en plus des deux octets précédents, leur somme (modulo 256 en fait) sous forme de 8 cases non éditables à cocher.

octet

Deux octets et leur somme

0 0 0 0 0 0 0 0

Le premier terme est 0.

0 0 0 0 0 0 0 0

Le second terme est 0.

Leur somme calculée binairement:

0 0 0 0 0 0 0 0

La somme vaut 0.

Proposition de projet

Refaire cet additionneur d’octets avec un autre outil possédant des cases à cocher ; on peut penser à un tableur, à CaRMetal (sans JavaScript) ou à GeoGebra... On peut aussi penser à PyQt. Ou à l’interface graphique de Scilab...


[1] comme dans les élections par correspondance, on a des enveloppes gigogne, permettant à des facteurs de se passer le relais ; c’est ce passage de relais qui est noté par un point en ECMASCript.

[2] télécharger la version html ci-dessous et l’ouvrir avec un éditeur de texte pour voir le détail

[3] et dans la deuxième ligne du tableau, la première étant formée des chiffres binaires représentés, 0 ou 1, notés « o07 », o06" etc.


Documents joints

les sources en html
Les quatre fichiers animés, à ouvrir avec un navigateur récent (de préférence de chez Mozilla) (...)

Commentaires

Logo de nathalierun
vendredi 7 septembre 2012 à 18h43 - par  nathalierun

J’adore ! Merci Alain.