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...


[1comme 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.

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

[3et 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 sources en html
Les quatre fichiers animés, à ouvrir avec un navigateur récent (de préférence de chez Mozilla) ou à (...)

Commentaires

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

J’adore ! Merci Alain.

Annonces

Prochains rendez-vous de l’IREM

Séminaire EDIM-IREM

- Mercredi 8 mars 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mercredi 12 avril 2017, 14h-18h, campus du Tampon
- Mercredi 3 mai 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mardi 13 juin 2017, 14h-18h, campus du Tampon
- Mercredi 14 juin 2017, 14h-18h, PTU, Saint-Denis, salle S23.6

Semaine des mathématiques

Du 23 mars au 4 avril 2017 dans l’académie de la Réunion.


Brèves

Décès de Raymond Smullyan

mercredi 15 mars

Le logicien Raymon Smullyan est décédé en février 2017, à l’âge respectable de 97 ans : Il avait eu Alonzo Church comme professeur ! Pour en savoir plus, voir cet article

Travailler à plusieurs

lundi 19 décembre 2016

Les enseignements d’exploration au lycée imposent aux enseignants de travailler ensemble. Chantal Tuffery-Rochdi a analysé dans sa thèse les pratiques des enseignants de MPS (méthodes et pratiques scientifiques). Elle répond aux questions des Cahiers pédagogiques.

Un document sur Eduscol

mardi 19 mai 2015

Un document clarifiant bien la façon dont les mêmes concepts vivent en mathématiques et dans les sciences « exactes » les utilisant, publié par Eduscol en octobre 2014. Citons-les :
« Le document proposé ci-dessous s’adresse aux professeurs de mathématiques, physique-chimie et sciences de l’ingénieur intervenant dans le segment [Bac-3 ; Bac+3]. Il vise à les informer des différences de présentation et d’interprétation qui sont faites de certains concepts mathématiques dans les autres disciplines. Ces éclaircissements peuvent contribuer à harmoniser et à clarifier l’utilisation de ces notions auprès des élèves. »

Histoire de la comptabilité

vendredi 28 décembre 2012

Sur ce site (en anglais) dédié à la comptabilité, on trouve des informations intéressantes sur l’histoire et les pratiques de ce domaine, qui peuvent être utiles aux professeurs enseignant des mathématiques financières (et aussi aux autres...).

La CGE et la réforme des lycées

lundi 16 janvier 2012

La Conférence des Grandes Écoles publie 19 préconisations pour la réforme du lycée.

Sur le Web : Les 19 préconisations

Pratique des mathématiques en série STD2A

lundi 16 janvier 2012

Le site de l’IGEN offre des recommandations et des ressources pour enseigner les mathématiques en série STD2A. Les thèmes abordés (couleurs et nuances de gris, arcs et architecture, jeux vidéos, photo et tableur, perspectives parallèles...) sont de nature à donner aussi des idées d’activités aux enseignants des autres séries !

En cheminant avec Kakeya

lundi 16 janvier 2012

Un livre (à télécharger) de Vincent Borelli et Jean-Luc Rullière qui présente le calcul intégral et la dérivation en s’appuyant sur la question de Kakeya. Pour les lycéens, les étudiants et tous les esprits curieux qui souhaitent voir les mathématiques sous un jour différent.

Sur le Web : Livre à télécharger

Bicentenaire Galois

lundi 12 septembre 2011

À l’occasion du bicentenaire de la naissance d’Évariste Galois (1811-2011), l’Institut Henri Poincaré et la Société mathématique de France organisent un ensemble de manifestations et proposent un site contenant diverses ressources documentaires susceptibles d’intéresser les enseignants.

Statistiques

Dernière mise à jour

dimanche 26 mars 2017

Publication

735 Articles
Aucun album photo
128 Brèves
11 Sites Web
126 Auteurs

Visites

73 aujourd'hui
1231 hier
1967247 depuis le début
20 visiteurs actuellement connectés