Documents sur Internet
Le document applicatif interne
Aide à la lecture et à l'étude
Développements tous visibles Développements tous masquésS'exercer au brouillon
À la date de mise à jour de ce document, tous les navigateurs usuels (Firefox, Chrome, Safari, Opera et IE 10+) respectent suffisamment les spécifications du W3C pour qu'AlgoDok et les modules afférents puissent fonctionner normalement.
Il peut cependant y avoir parfois quelques problèmes de déplacement des objets sur les tablettes fonctionnant sous Android, mais le problème vient d'Android. En outre, certains bloqueurs de publicités, comme Adblock(+), perturbent le fonctionnement d'AlgoDok si on oublie de les désactiver pour http://www.algodok.com !
Ce document contient toutes les informations et exemples permettant d'exploiter au mieux
le module AlgoDok dont l'objectif
est de faciliter la création de documents qui allient l'algorithmique et le documentaire, les
documents applicatifs. Ces derniers sont non seulement adaptatifs, puisque
leur contenu change en fonction des actions du lecteur,
mais leur partie applicative
est accessible à tous car elle est définissable
en langage naturel
via une syntaxe en Javascript. Seul le développement de modules complémentaires nécessite des
compétences de développeur.
C'est pourquoi tout document applicatif développé avec AlgoDok dispose intrinsèquement d'une mémoire à instructions, qu'on peut si elle est cachée, permettant de tester des… instructions en Javascript, sans aucun risque de modifier le document originel.
Pour certains documents applicatifs on peut néanmoins décider de rendre invisible et inaccessible cette mémoire à instructions, ou encore de la cacher au chargement tout en la rendant visible via un bouton, comme ci-dessus, un actionneur ou une instruction cliquable contenue dans le document.
Ce document est lui-même un document applicatif : le lecteur est donc invité à cliquer sur ses instructions et modifier le contenu de ses zones d'entrée de données (techniquement, des textareas), toutes suivies ou accompagnées d'actionneurs, facilement reconnaissables (ici sur fond orangé).
Ainsi il est facile de reconnaître et activer les instructions
Une instruction linguistique est une instruction Javascript dont la structure générique a été mise au point par le concepteur d'AlgoDok. Une instruction cliquable est une instruction qui apparaît explicitement dans le document, en français, exécutable sur un simple clic.
Le but est ici d'expérimenter des instructions linguistiques et le langage Javascript : il n'y a aucun risque de modification du fichier d'origine, qu'il suffit simplement de recharger si l'on veut réinitialiser l'étude du document correspondant (en effet, comme on peut modifier la structure interne sous-jacente, on peut très bien aussi la corrompre : mais ce n'est pas grave !).
Par exemple, on peut
Enfin il est important de noter que par un simple clic-droit
(ou Ctrl-clic) sur toute instruction linguistique cliquable,
ou presque toute autre instruction explicite à l'écran
(comme
Avec la notion de document applicatif, la conception documentaire entraîne celle des programmes, substance même des algorithmes, donc de la partie applicative, au moyen d'un simple texte balisé qu'un logiciel spécifique (le navigateur) interprête pour en donner un aspect visuel, interactif et animé.
RAPPEL : Ce document en est un !
Contrairement aux usages ayant cours depuis le début de l'informatique personnelle, où le choix d'une application impose une structure interne des documents que l'on peut créer, un document applicatif est un document dont la conception (structurelle, typographique et dynamique) engendre le choix ou la conception de modules applicatifs.
Les progiciels de construction documentaire les plus utilisés, y compris les outils de présentation et les tableurs, se réclament tous de l'approche WYSIWYG (What You See Is What You Get), et restent ainsi orientés vers l'impression papier. Ils ne tiennent finalement pas compte des recommandations du W3C, qui séparent d'emblée les structures informatives de leur aspect visuel.
Pour bien suivre les explications fournies dans ce document applicatif il faut comprendre dès maintenant que l'objectif d'AlgoDok est la conception de documents en un sens plus général qu'à l'accoutumée, car ils peuvent aussi bien avoir l'aspect d'un document classique, c'est à dire imprimable, que celui d'une application classique qui présente une IHM de pilotage pour produire des documents classiques… imprimables et conçus comme tels.
Un document applicatif n'anticipe pas sur le choix d'une application a priori : il est lui-même une application ! Il ne nécessite aucun logiciel lourd pour être conçu et modifié : on utilise un éditeur de textes comme Geany (Linux, Windows), Jedit (Linux, Mac et Windows) ou encore TextWrangler (Mac) et Notepad++ (Windows), tous libres de droits.
On peut aussi s'entraîner à créer un document applicatif avec un… document applicatif qui permet à la fois de voir le code source et son apparence lorsqu'il est interprété par un navigateur.
Un éditeur multiplateforme comme Sublime Text est intéressant ; il est a priori payant mais on peut l'évaluer sans réelle limite de temps.
Il convient de noter en premier que tout document applicatif est une IHM en puissance puisqu'il
est géré uniquement par le poste client, en Javascript.
Ceci permet d'avoir une vision moins rigide d'une
application Web qui exploite traditionnellement des formulaires
, alors que ceux-ci n'ont
plus réellement leur raison d'être.
En effet, d'une part tout élément d'un document peut être
conçu initialement comme accessible au lecteur/utilisateur avec l'attribut class="éditable",
soit rendu éditable a posteriori sur une action comme celle-ci (retour à la normale avec l'actionneur
qui suit ce paragraphe) ;
d'autre part un formulaire peut être un objet sous-terrain
servant uniquement de relai
de communication entre le client et le
serveur.
Pour la conception de documents en HTML 5, les recommandations du W3C sont trop rigides. Par exemple elles interdisent les espaces dans les identifiants, ce qui est une vision bien anglo-saxones des noms propres. En effet, en France on peut bien s'appeler Le Bihan : l'espace n'est pas ici un simple , elle fait partie du nom propre ! Donc AlgoDok assouplit certaines recommandations du W3C en utilisant aussi, volontairement, des balises déclarées obsolètes (comme tt) ou des balises inusités (comme js), en leur donnant une sémantique particulière.
Il est d'ailleurs intéressant de passer un simple document à un validateur W3C
comme Unicorn, qui
recommandera d'utiliser une CSS pour donner du style à la place de l'usage de tt pour teletype)
tout en autorisant la balise b qui reste d'usage pour passer en gras
(b pour bold) alors que
tt n'impose en fait pas de typographie dans son nom, suggérant simplement une frappe au clavier.
Bien sûr, pour ceux nés après 1990, la sémantique du clavier sera mieux parçue avec la balise
kbd (pour keyboard), validée par le W3C pour HTML 5 !
On peut même concevoir ne travailler que sur le Web, soit pour découvrir et tester uniquement, comme avec jsfiddle (l'expérimenter sur un exemple) ou avec un environnement spécifique comme Koding sous ChromeOS. On peut même travailler directement avec AlgoDok et un module complémentaire de colorisation syntaxique (l'expérimenter sur un exemple).
AlgoDok est le premier des modules permettant de développer des documents applicatifs au sens défini ici.
Il fournit donc les instructions et fonctions essentielles portant sur des ingrédients primitifs de la conception documentaire, la plupart de celles-là pouvant aussi bien être exploitées par un concepteur de documents ne connaissant rien à la programmation que par un développeur spécialisé en Javascript.
Tout texte comportant des instructions linguistiques et du Javascript est appelé script.
En français les parenthèses s'y lisent alors —éventuellement— du
ou de
.
On doit noter que dans une ligne de script, tout texte précédé de //
n'est pas exécutable : c'est un simple commentaire, donc inexécutable.
Avec AlgoDok on peut manipuler facilement un texte structuré en
boîtes imbriquées
. Ces boîtes sont délimités par des marqueurs appelés balises.
La notion est ancienne puisque
la ponctuation
n'est qu'un balisage facilitant la lecture et la structuration du discours. Mais c'est
la création de documents écrits sur papier qui a enrichi le vocabulaire, via
la typographie.
Un paragraphe comme celui-ci est défini en délimitant le texte par les balises <p> (balise de début de paragraphe) et </p> (balise de fin de paragraphe).
Ce principe de balisage est systématique et donc cet exemple suffit à comprendre l'usage de toutes les balises : toute partie de document est délimitée par deux balises, l'une de début et l'autre de fin.
On suppose désormais que tout document applicatif est balisé en HTML et donc, pour faire court, que c'est essentiellement un document HTML.
Un document applicatif est composé de deux parties :
La tête est composée de plusieurs parties :
Un document applicatif comme celui que le lecteur a sous les yeux contient au moins la référence d'AlgoDok :
Le corps est composé de parties délimitées par des balises spécifiques (p, div, i, etc.) et, éventuellement, de balises de scripts composés d'instructions linguistiques que nous allons surtout décrire dans les parties suivantes, mais dont on a déjà eu un échantillon dans le préliminaire.
Avec les deux parties précédentes on définit un document applicatif, qui peut alors contenir des éléments documentaires :
Cliquer ici pour prendre en compte les modifications effectuées ci-dessous.
… ou là pour le détacher.
La terminologie du langages HTML utilise le mot anglais element
, ici
synonyme de boîte
. Mais comme ce vocabulaire est souvent entré dans les usages,
nous parlerons aussi, en français, d'élément. Un document est donc vu
en premier comme une structure de boîtes imbriquées.
Toute partie visualisable d'un document applicatif est, par définition, un élément. On peut définir tout élément en utilisant une balise HTML de son choix, directement dans le document, à l'aide d'un éditeur de textes.
Ici lorsqu'on dit HTML, on sous-entend HTML 5.
On veille à éviter la prolifération de balises différentes pour privilégier la notion de classe, car c'est le moyen le plus efficace de réaliser un document adapté à une situation donnée. Nous verrons comment les classes permettent de donner du sens à une structure.
La notion de balise en HTML est essentiellement vue ici comme un moyen de délimiter des boîtes (éléments) sans sémantique a priori.
On doit en effet comprendre que, pour un document applicatif, les balises utilisées ne doivent pas servir à donner du style, mais simplement à structurer un document. C'est pourquoi celles exploitées par AlgoDok sont en nombre très limité.
À l'origine de HTML certaines balises étaient destinées à agrémenter la présentation (i pour italique, u pour underline, etc.), mais ce principe est devenu obsolète depuis déjà plus de dix ans avec l'usage des styles en cascade (CSS : Cascade Style Sheets), et donc on doit plutôt y voir une sémantique générale de mise en relief du discours, sans a priori sur l'expression typographique.
Les balises les plus courantes seront donc utilisées avec une sémantique assez vague, non typographique : b (boîte), i (important), u (utile), p (paragraphe) et div (division). On y ajoute les balises habituelles de titre (h comme heading) : h1 (titre, de niveau 1), h2 (sous-titre, donc de niveau 2), ··· , h6 (titre de niveau 6).
À ces balises de structuration, il convient d'ajouter celle de contenu distant : la balise de lien a (ancre), celle d'image : img, et celle permettant d'incruster une page dans une autre : iframe (cadre).
dont on peut ensuite modifier le contenu avec une instruction comme charger ("http://xavier.hubaut.info/coursmath/bio/einstein.htm") .dans ('le cadre incrusté') (voir le brouillon).
Ce dont les seules balises vraiment indispensables pour utiliser pertinemment AlgoDok.
On note au passage que la tête
ne sert qu'à référencer des modules (ou un script local) et des styles.
Le document est finalement réduit, dans sa conception, à son corps
.
Pour manipuler ces boîtes (ou éléments), ou pour leur donner un style typographique et dynamique, il est essentiel de pouvoir soit les identifier, afin de pouvoir les désigner par la suite, soit les classer, pour leur donner une sémantique via des signifiants.
Une telle structure en boîtes imbriquées, identifiées et classées, permet de manipuler
le document, pendant ou après son écriture, via des instructions linguistiques mises en œuvre
principalement par un attribut onclick qui définit un événement déclencheur
d'une action (ici : sur un clic).
On peut aussi parfois utiliser d'autres événements déclencheurs comme
onmouseover (lorsqu'on survole l'élément avec la souris)
ou onmouseout (lorsqu'on quitte l'élément survolé avec la souris).
On peut utiliser aussi l'attribut ondblclick, mais il faut alors se méfier : un double-clic réalisé trop lentement a l'effet de deux clics. C'est une astuce technologique, héritage d'une époque où les souris n'avaient qu'un bouton…
Il y a donc trois attributs vraiment indispensables pour utiliser AlgoDok, qu'il faut donc connaître pour produire effectivement des documents applicatifs.
L'attribut id sert à identifier un élément, c'est à dire qu'il permet d'assigner à ce dernier un nom propre, pour le distinguer de tous les autres.
L'attribut class sert à classer un élément, c'est à dire qu'il permet d'assigner à ce dernier un (ou plusieurs) nom(s) commun(s), le distinguant ainsi de certains autres.
Ces attributs permettent de désigner les éléments. C'est ce qui permet d'exploiter ensuite leur propriété est dont nous reparlerons à propos de l'instruction classer.
Ci-dessous on définit un paragraphe de la classe bluette
et un élément i avec
l'identifiant balise particulière.
Il ne reste plus qu'à appliquer le style ci-dessous pour en voir l'effet immédiat : insérer (le .contenu .de ("css 1")) .dans ("la feuille de styles").
À tout moment on peut
L'attribut onclick permet d'apporter une certaine dynamique au document, par le biais d'instructions linguistiques, accessibles et exploitables sans rien connaître à la programation, grâce à une technique mise au point par le concepteur d'AlgoDok.
On note de suite qu'on peut référencer l'élément qui contient l'instruction par this, ce qui évite la nécessité de lui attribuer un identifiant, en particulier lorsqu'on veut simplement offrir la possibilité de modifier un contenu.
L'attribut onclick utilisé dans une balise i au sein du source HTML
donne à l'élément correspondant le statut d'instruction cliquable et,
sauf s'il commence par $ (cas d'une instruction système
d'un module)
ou ; (cas d'une instruction définie par le concepteur du document) :
Le lecteur peut s'entraîner ici (clic et clic-droit), avec cet exemple.
La propriété du clic-droit est valable pour toute instruction cliquable, définie comme telle.
Une fois le source interprété, il suffit de cliquer sur un élément cliquable pour exécuter l'instruction associée à l'attribut onclick.
ATTENTION : un identifiant est supposé unique dans tout le document ! Si l'on interprète plusieurs fois de suite un source HTML contenant une balise définissant un élément avec le même identifiant, comme ci-dessus, seul le premier sera pris en compte lors de la recherche sur identifiant.
Pour faciliter la mise en œuvre d'une dynamique essentielle dans les documents applicatifs, AlgoDok permet de définir des instructions cliquables, embryons de programmation par le biais des instructions linguistiques, sans la nécessité d'utiliser explicitement un attribut onclick.
Le lecteur aura pu constater que dans la plupart des cas, les actions qu'il exécute sur un clic à partir de ce document applicatif apparaissent en clair à l'écran, voire en français correct sans une syntaxe particulière qui évoquerait un langage de programmation. Ces instructions sont pourtant définies en Javascript mais sous forme linguistique, avec une transformation destinée à faciliter la lecture.
Ainsi toute instruction Javascript est exploitable dans le source via une balise js
ou une balise i de classe JS, définissant alors une instruction cliquable
,
c'est à dire sous la forme <js>···</js> ou <i class="JS">···</i>.
Ici, le mot instruction étant pris dans un sens générique, on peut
mettre plusieurs instructions Javascript, séparées par des points-virgules, au sein
d'une seule instruction cliquable.
Dans ces instructions on peut utiliser ceci à la place de this, faisant ainsi référence à l'instruction cliquable elle-même et on peut utiliser les chapeaux (^) pour faire des calculs avec des puissances portant sur des variables. Si le bloc d'instructions commence par { et termine par }, alors on ne traduit pas le source JS en langage vernaculaire et il est pris tel quel, sans ces accolades.
On peut aussi utiliser la classe Algo, sous la forme <i class="Algo"> (voire <js class="Algo">), mais cette classe Algo n'a d'intérêt que pour le programmeur occasionnel, en lui permettant des mot-clés en français pour les tests ou les boucles, dont l'usage dans ce contexte reste marginal, puisque si l'on commence à programmer on préfèrera utiliser des fonctions pour créer de nouvelles instructions linguistiques.
La mémoire à instructions étant a priori destinée à des instructions uniquement en JS, on doit faire attention aux recopies par clic-droit sur des instructions de classe Algo. Dans tous les cas, la lisibilité du titre produit par AlgoDok (visible au survol sur l'élément cliquable) n'est assurée que si l'on a utilisé des instructions linguistiques pour en définir l'action !
On peut utiliser aussi des boutons avec la balise button, comme avec l'exemple suivant . Mais comme le contenu d'un bouton est en général délimité visuellement et volontairement limité en taille pour ne pas occuper trop de place à l'écran, ce ne peut-être une suite d'instructions (en JS ou Algo). AlgoDok les prend néanmoins en compte pour en améliorer automatiquement l'usage et la lisibilité, comme avec les instructions cliquables (recopie sur clic-droit et titre au survol).
fournit, après chargement dudit document applicatif dans le navigateur, ou ici après une initialisation, deux instructions exécutables sur simple clic :
En voici une autre, ci-dessous, avec class="Algo" que l'on doit aussi initialiser pour la concrétiser dans l'encadré ci-dessus.
Ces éléments instructions
peuvent en plus posséder
un attribut onclick avec une instruction complémentaire, mais invisible du lecteur,
et avoir en plus la classe fr pour préciser de fournir au lecteur une apparence
devant ressembler le plus à du français, c'est à dire dépouillée de la syntaxe Javascript
(parenthèses et points, avec mise en évidence des chaînes de caractères).
avec l'exécution préalable du code Javascript fourni par l'attribut onclick sur la seconde instruction cliquable.
En utilisant i class="JS fr" ou js class="fr" on peut indiquer à AlgoDok de faire au mieux pour que l'instruction cliquable apparaisse comme une phrase en français syntaxiquement normal.
Ainsi, sans utiliser explicitement l'attribut onclick, une instruction cliquable permet d'activer facilement des instructions exprimables en une ou plusieurs phrases impératives simples, syntaxiquement acceptables par le langage Javascript mais en langage vernaculaire (c'est à dire ici en français !), comme nous allons le voir dans les parties suivantes.
On suppose connu l'usage d'un identifiant pour désigner un élément unique dans le document entier. Cependant, dans tout ce qui suit, pour plus de lisibilité dans les expressions, on écrit élément au lieu de identifiant d'un élément, car dans la plupart des cas on peut directement passer un élément comme paramètre, qu'il ait un identifiant ou non.
On suppose aussi connu l'usage des attributs class, pour donner une sémantique interprétée avec un style, et onclick, pour donner une dynamique effective lors d'un clic sur l'élément.
Les actions les plus immédiatement compréhensibles et les plus fréquentes
correspondent aux instructions cacher (élément)
et montrer (élément), que l'on peut effectuer avec tout élément,
comme pour le paragraphe suivant dont l'identifiant est
la remarque 1 :
Pour cacher un élément dès
le chargement, il suffit de le classer comme invisible
,
ce qui représente une sémantique primitive d'AlgoDok. On note que tout élément contenu
dans un élément invisible est aussi invisible, même s'il n'est pas classé comme tel !
L'instruction aller .à (élément) (ou aller .au (élément)
pour un identifiant sans article masculin ou bien commençant par le)
permet de faire défiler le document jusqu'à l'élément souhaité (et le montrer),
par exemple :
Attention à un élément contenu dans un élément invisible : l'action implicite de montrer l'élément ne le fera pas apparaître !
Après avoir écrit sur la feuille et cliqué sur les paragraphes écrits,
on peut
Comme tout le document est une structure de boîtes, on peut changer son apparence en modifiant sa structure, à condition de savoir qui contient quoi et qui est avant ou après quoi ; ce qui permet de déplacer les éléments d'un endroit à un autre.
Toute boîte est, à un instant donné, contenue dans une seule autre, appelée son conteneur.
Mais les objets étant soit positionnés les uns par rapport aux autres, soit par rapport à la fenêtre délimitant le document, on peut aussi déplacer les éléments dans un plan où le système de coordonnées est défini avec une unité implicite.
On peut utiliser l'instruction déplacer (élément) .à (x, y) pour un
déplacement dans le plan du document, comme avec
Les coordonnées (x et y) sont a priori des nombres décimaux, positifs ou négatifs, et l'unité est implicitement le pixel. On peut aussi mettre des nombres avec une unité, par exemple "120px", "3.5cm", "27mm" ou "12em".
Si l'une des coordonnées est indéfinie, alors seule l'autre coordonnée est
exploitée. Exemples :
Pour qu'un objet puisse être déplacé, il doit être soit (simplement) déplaçable
,
alors il se déplace par rapport au document (ou par rapport à son conteneur si celui-ci est
lui-même déplaçable), soit absolument déplaçable
et il se déplace
par rapport à la fenêtre contenant le document.
On utilise une variable intermédiaire (rem) pour plus de lisibilité : rem = le.conteneur.de (ceci) permettant ensuite de classer (rem) .comme ("absolument déplaçable") ; déplacer (rem) .à (777,333) ; classer(ceci) .comme ('déplaçable') ; déplacer (ceci) .à (70,80).
On peut définir directement ces deux possibilités dans un style via position : absolute (il se déplace par rapport au document) ou position : fixed (il se déplace par rapport à la fenêtre contenant le document).
On peut positionner les boîtes les unes par rapport aux autres, mais dans le principe de la structure documentaire, pas forcément topologiquement (car le positionnement à l'écran dépend fortement des styles). On peut donc : mettre (un ou plusieurs élément(s)) .dans ( un autre élément ).
Au lieu de dans on peut utiliser aussi avant et après. Le déplacement est souvent visuellement évident, mais on peut très bien déplacer un élément caché ou encore déplacer un élément à un endroit difficile à repérer !
Ainsi on peut
On peut aussi permuter deux éléments, avec l'instruction
permuter (élément) .et (un autre élément) ;
on peut utiliser avec au lieu de et.
Par exemple, on peut
La permutation doit se concevoir relativement à l'ordre de
lecture du source HTML.
Pour des éléments positionnés de façon absolue par rapport au document elle
n'a donc pas forcément un effet visuel évident ;
par exemple :
On peut aussi mettre de nouveaux éléments dans un élément existant, à condition de les créer, soit directement, soit par clonage (aller .à ('la partie du développeur')) avec des instructions particulières.
On peut utiliser l'instruction créer (id) .un .élément (balise, classe) .contenant (texte) .dans (élément), sachant que l'identifiant, la classe et le contenu sont facultatifs.
Par exemple :
grosparagraphe.") .dans ('le brouillon') ;
Pour supprimer le style ajouté il suffit alors
d'
On note alors que l'exécution répétée d'une même instruction peut entraîner une alerte,
car un identifiant est unique, et qu'on crée un objet identique à chaque fois. On dit
que l'on a créé des clones. On peut d'ailleurs cloner facilement tout élément du document :
Le moyen le plus simple de concevoir une dynamique documentaire et d'appliquer des styles variés est d'utiliser un vocabulaire adapté à chaque situation, c'est à dire en classant les boîtes qui structurent le document, en leur apportant une sémantique spécifique : des styles adaptés à celle-ci font alors le reste, via un ensemble de règles définies par les CSS.
Pour ce faire on utilise l'instruction classer (élément) .comme (classe), où la classe peut être composée de plusieurs sigifiants.
Pour supprimer une sémantique on utilise alors déclasser (élément) .comme (classe).
La classe indiquée peut contenir plusieurs signifiants,
comme dans remarque importante
(classe à deux signifiants).
Il est souvent naturel d'utiliser
l'article défini dans l'identifiant d'un objet. On peut donc préfixer
certaines fonctions qui désignent un élément précis par le. ou la., par exemple :
On peut alors
Dans de nombreux cas on veut pouvoir commuter sur une sémantique et sa négation,
comme encadré
ou non encadré
, sachant que l'absence d'une sémantique
est par principe équivalente à sa négation. On utilise alors l'instruction
commuter (élément) .sur (classe). Par exemple :
On peut, le cas échéant, préciser une sémantique de la négation,
par exemple avec commuter (élément) .sur (éteint,allumé).
AlgoDok tien ensuite compte de ces contraires comme on peut le voir avec :
Chaque signifiant ne peut avoir qu'un contraire. On peut aussi directement définir des contraires avec l'instruction le .contraire .de (signifiant) .est (autre signifiant).
On peut obtenir facilement la classe d'un élément avec la fonction classe ;
par exemple avec
On peut savoir si un élément est d'une certaine classe, mais cela va plus loin qu'une simple comparaison avec la classe de l'élément, comme on le comprend facilement sur l'exemple suivant.
On peut de même facilement comprendre ce qui suit :
Pour indiquer la négation, on précède le booléen de ! :
if ( ceci .est ('une instruction cliquable') ) écrire (le .contenu .de (ceci)) .sur ('le brouillon').
Ou encore on peut étudier ce qui suit : lpdbb = le.prédécesseur.de ('Big box') ; écrire (lpdbb .est ('du JS') + ' ; ' + lpdbb .est ('du JS fr')) .sur ('le brouillon').
Ici, à la place de .sur on peut aussi utiliser, de façon équivalente,
.comme. Exemple :
Un classement apporte donc souvent une dynamique conjoncturelle lors de la lecture
correspondant simplement à une modification d'aspect. Parfois on a besoin de spécifier
un style localement, sur une action particulière, c'est à dire d'habiller un élément
avec une typographie
spécifique. Or un style peut être écrit, tout comme on peut
écrire dans un élément pour le compléter.
Avant d'aborder le principe de l'écriture dans un élément, on doit noter que certaines instructions peuvent porter sur tout un ensemble d'éléments.
Certaines instructions d'AlgoDok, que l'on appelle aussi ici actions, sont définies par des verbes transitifs pouvant admettre plusieurs objets directs : cacher, montrer, bloquer, débloquer, effacer, supprimer, commenter, décommenter, activer (ou actionner), cocher et décocher.
On peut exploiter aussi cette facilité avec mettre, qui accepte aussi plusieurs objets directs.
Par exemple :
Mais on peut aussi appliquer ces actions à un ensemble d'éléments sélectionnés sur
les noms de balise, les classes ou encore la sémantique contenue dans les identifiants,
comme sur les exemples suivants :
On peut aussi faciliter une lecture avec une variable, vue comme un synonyme (ici lesTT) : lesTT = tous .les ('tt') .de ("la définition des actions") ; montrer (lesTT) ; mettre ( lesTT ) .après (ceci).
On verra d'autres moyens de sélectionner un ensemble d'éléments, dans la section relative aux tableaux.
Pour la synchronisation de diverses instructions et actions destinées au lecteur/utilisateur d'un document applicatif, on peut attendre, soit une certaine durée, soit un événement. Les instructions d'attente se présentent comme suit : attendre (durée) .avant .de (cette_action) et attendre (événement) .pour (cette_action).
La durée est un nombre en secondes ou un nombre avec unité, l'événement est une fonction ou une expression booléenne (dont le résultat est vrai ou faux) et cette_action est une instruction
Le déclenchement réel d'une action peut avoir un retard d'au maximum deux dixièmes de seconde. C'est volontairement calibré ainsi car il s'agit de gérer des processus humains, très lents par rapport aux performances des ordinateurs.
Pour montrer que l'attente a été prise en compte, l'instruction cliquable concernée change d'aspect.
Si dans cet exemple on a mis les attentes en instructions cliquables, à des fins didactiques, mais il va de soi qu'elles sont a priori destinées à être consignées dans des scripts, au sein du document applicatif ou dans des modules complémentaires.
On peut donc sans problème exécuter successivement des dizaines, voire des centaines d'instructions d'attente : la gestion des déclenchements est automatique. Une fois une action exécutée l'attente est supprimée de la liste des attentes.
Néanmoins on peut vouloir que le déclenchement d'une action se reproduise à chaque renouvellement d'une situation, par exemple à chaque fois qu'une valeur dépasse un certain seuil, afin d'avertir momentanément le lecteur/utilisateur du document applicatif. Dans ce cas l'attente doit être réinitialisée automatiquement.
Le mieux est d'étudier l'exemple suiant, car le principe syntaxique est le même que pour une attente non réitérée (voir le § précédent).
On peut utiliser les instructions suivantes :
Il n'y a pas d'instruction du genre lorsque (···) .devient .fausse (···) car le principe de l'instruction lorsque est de produire une attente qui se réamorce automatiquement, donc sur une affirmation qui devient vraie. Le cas échéant on peut facilement l'exprimer ; par exemple la négation de année > 2013 peut s'écrire année <= 2013. D'une manière générale la négation d'une affirmation A s'écrit !(A), par exemple !(année > 2013).
L'écriture est l'activité essentielle du concepteur de document applicatifs, et donc il le fait principalement en HTML à l'aide d'un éditeur de textes. Néanmoins, il va de soi que toute partie applicative du document entraîne que certaines parties documentaires peuvent avoir un contenu dépendant des actions du lecteur.
Donc l'instruction d'écriture est aussi fondamentale pour la partie applicative d'un document applicatif. Avec AlgoDok, elle est conçue comme l'automatisation d'une activité manuelle, a priori en HTML.
Si un classement apporte souvent une dynamique conjoncturelle lors de la lecture, on peut néanmoins la renforcer avec des avertissements explicites au lecteur, où le message ne se réduit pas à une modification d'aspect.
En général un message d'avertissement au lecteur est émis par AlgoDok dès que ce dernier détecte un problème. Mais le concepteur d'un document applicatif peut lui aussi utiliser ce mécanisme grâce à l'instruction alerter (objet Javascript, durée en secondes (Number) ou avec une unité (String)) ou simplement alerter (objet Javascript) avec un temps de lecture par défaut de sept secondes. Les messages sont empilés dans la messagerie d'AlgoDok, sauf si l'alerte est émise avant son chargement.
Comme on utilise souvent cette instruction en mode de
développement de la partie applicative, on peut préférer une sémantique plus neutre,
comme avertir ou afficher ; il est facile de définir
l'équivalence des instructions : alarmiste
.
On peut
En fait, la plupart du temps on avertira le lecteur en utilisant des objets primitifs comme des chaînes de caractères (String), des nombres (Number), des booléens (Boolean) voire des dates (Date), consignés dans des éléments du document qu'on peut montrer ou cacher à volonté. Il reste alors à écrire les informations utiles.
Pour permettre la modification dynamique d'un élément on peut exploiter l'attribut onclick d'une manière simple, comme pour ce paragraphe, défini avec : onclick = "écrire (' Étonnant, non ?') .dans (this)".
On peut utiliser .sur au lieu de .dans,
de manière équivalente ; ainsi on peut indifféremment
AlgoDok permet donc d'écrire des chaînes de caractères (ou des nombres, à la suite d'un
calcul par exemple), avec une expression écrire (chaîne de caractères)
.dans (élément), que l'on peut exécuter… en un clic. Par exemple on peut
En Javascript toutes les instructions
sont séparées par des ; (point-virgule).
On peut construire des chaînes de caractères par concaténation
avec le signe + et tout nombre ajouté
est alors interprété comme une
chaîne de caractères. On affecte une valeur à une variable en utilisant
le symbole d'égalité =. On peut préfixer
les noms de variable Javascript par le., les. ou la.
afin d'améliorer la lisibilité des instructions.
… avant d'
Comme on a souvent besoin de mettre à jour des informations,
pouvoir compléter un élément ne suffit pas.
C'est pourquoi on a aussi souvent besoin de l'effacer ou le compléter avec une information
mise en boîte
.
Pour effacer le contenu d'un élément il suffit d'utiliser
effacer (élément). Par exemple, d'un clic on peut
On peut effectuer une mise en boîte
de toute chaîne de caractères avec l'instruction
boîte (balise, contenu, identifiant) ; l'identifiant
est facultatif.
Cette instruction évite de jongler avec la syntaxe des balises lors de la programmation ;
elle fournit un code HTML.
Ainsi on peut
Pour aller plus vite lorsqu'on veut modifier souvent et complètement le contenu d'un élément,
on dispose de l'instruction
mettre .à .jour (élément) .avec (ce contenu).
Par exemple on peut
Mais on a aussi besoin de compléter un document en insérant de nouvelle informations…
Pour AlgoDok, l'écriture est considérée comme un complément au travail de l'auteur, et doit donc se distinguer de l'original. Cet aspect structurel est développé dans la dernière partie de ce manuel qui explique, entre autres, comment repérer les écrits effectuées.
L'écriture doit être néanmoins distinguée de l'insertion qui, elle, permet plutôt de construire dynamiquement un document, en fonction des besoins ou des actions du lecteur/utilisateur, mais ne permet pas de repérer les éléments écrits. En général cette action est plutôt réservée au concepteur de la partie applicative.
Les instructions écrire et insérer présentent des variantes permettant de compléter un document par adjonction d'information. Néanmoins la différence essentielle réside sur le fait que l'écriture peut se faire suivant un style donné, alors que l'insertion ne correspond qu'à celle d'un code HTML dans un source.
L'instruction écrire (texte) ··· peut être complétée en écrire (texte) .en (style) ··· où style peut peut aussi bien être une classe (exemple : "exemple encadré"), un style selon la syntaxe des CSS (exemple : "color:salmon ; font-size:14px").
Avec les instructions suivantes on peut écrire de façon stylée, simplement :
Ceci permet au concepteur documentaire de fournir des messages liés à certaines actions du lecteur.
On peut aussi exploiter une fonction retournant un style ou une classe et
ayant au plus un paramètre, correspondant alors à l'élément qui reçoit l'écrit.
Si cet usage particulier permet d'étendre ad libitum la capacité d'expression des styles, il
est néanmoins nettement plus technique :
il nécessite qu'un développeur définissent des fonctions, donc fasse de la programmation
(
Avec les instructions suivantes et partant du fait que
le témoin
désigne ce paragraphe, on peut
En exploitant aussi la sélection d'éléments (pour les détails, aller .à ("la sélection")), on peut faire de nombreuses écritures en une seule fois, par exemple : écrire ( "<complément>Ci-dessous, un titre <b>h3</b> :</complément>" ) .avant (chaque ('h3') .du (document))
Ensuite, avec le même principe de sélection, on peut donc
On peut aussi écrire (texte) ··· .au.début.de (id), mais c'est moins courant. On peut remplacer écrire par insérer, sans différence apparente ; seule la structure documentaire est différente.
En complément à l'écriture/insertion, on peut lire de l'information, en récupérant le contenu des éléments.
On peut obtenir (lire
) le contenu d'un élément soit en tant que source HTML,
soit comme nombre (pour effectuer des calculs).
Pour cela on utilise une fonction qui retourne la valeur attendue, c'est à dire qu'on utilise les instructions contenu (élément) et contenu.numérique (élément).
Lorsqu'on écrit ensuite un contenu (en tant que source HTML),
il faut se méfier de l'effet parfois curieux —mais tout à
fait expliquable— des identifiants, car il font aussi partie du contenu, et un
identifiant est a priori unique ! Le développeur préfèrera cloner
les
éléments (AlgoDok se charge de gérer convenablement les identifiants).
Enfin, conjointenant à la lecture numérique, il est utile de connaître les instructions nécessaires pour éviter d'afficher des chiffres inutiles :
Depuis 2003 le séparateur international de la partie décimale est plutôt le point que la virgule. Avec AlgoDok on peut utiliser le point ou la virgule pour les données entrées au clavier, dans l'esprit des décisions du BIPM et conformément à l'usage dans les pays francophones.
Comme le lecteur a pu le constater, on utilise souvent dans les exemples la fonction conteneur qui permet de spécifier de manière précise un élément, sans nécessiter d'identifiant. En fait il y a trois fonctions de désignation relative.
Comme tout document HTML est une structure de boîtes imbriquées, tout élément qui le compose est contenu dans un autre, son conteneur. Cette notion est souvent utilisée avec le mot-clé this en Javascript, qui désigne l'élément contenant l'instruction spécifiée dans un attribut onclick.
Les informaticiens disent aussi que le document est organisé en arbre, mot sans doute parlant lorsqu'il s'agit d'arbre de décision, mais peu dans le cas documentaire où tout élément est vu a priori comme un rectangle, base de tout positionnement ; il s'agit du box-model (modèle en boîte) défini par le W3C. Les notions de boîte et de conteneur sont donc bien adaptées au contexte.
Ainsi lorsqu'on va
De même on dispose des instructions successeur et prédécesseur, exploitables pour des éléments contigus, sans aucun espace ni autre chaîne de caractères entre eux.
En s'exerçant avec les instructions du script suivant et le HTML originel, le lecteur pourra constater que les boîtes originelles b-3 et b-4 ne sont pas contiguës : b-4 n'est donc pas considérée comme le successeur de b-3 et b-3 n'est pas considérée comme le prédécesseur de b-4 ; il en va de même pour les boîtes b-1 et b-2.
Ce positionnement relatif est très utile pour adjoindre des actionneurs aux entrées de données : on n'est pas obligé de donner des identifiants aux éléments qu'on veut manipuler.
On utilise principalement la balise spécifique textarea (aire de texte
)
pour permettre au lecteur de fournir des informations.
On peut bloquer une telle entrée
avec l'attribut readonly, comme avec celui-ci
ou bien
avec l'instruction bloquer.
Bien sûr on peut débloquer une zone d'entrée
de données ; par exemple on peut
Une fois compris ce principe d'écriture et d'entrée d'information, il ne reste plus qu'à voir comment on peut la modifier dans un élément en remplaçant systématiquement certaines parties.
L'instruction de remplacement est facile à comprendre et quelques exemples suffisent.
Ceci est un petit paragraphe peu intéressant, très peu intéressant, mais modifiable par remplacement, en un simple clic !
On peut aussi remettre le paragraphe précédent à l'état initial.
C'est maintenant au lecteur de s'entraîner, c'est à dire
d'
On peut faire aussi un remplacement dans une sélection d'éléments :
On peut fournir une expression régulière à la place d'une chaîne de caractères, mais cette possibilité est réservée aux développeurs de modules. On peut cependant voir l'effet qu'une telle instruction peut avoir… en cliquant ici ! On peut alors chercher à en déterminer la logique…
Cette instruction de modification, surtout destinée à un développeur de documents applicatifs, peut aussi donner au simple lecteur un moyen de modifier le document lu, de façon marginale, par exemple pour y insérer momentanément des notes de lecture.
Lorsque l'on crée un document destiné à être vidéoprojeté ou à interagir avec un serveur distant
il peut être intéressant de donner l'opportunité d'en modifier manuellement
certaines parties, même s'il est préférable de bien cibler a priori les zones de saisie de données
(éléments textarea et input).
Le lecteur est invité à modifier le contenu de ce paragraphe, en cliquant dessus,
à la condition préalable
de
L'instruction peut avoir plusieurs objets ou bien être collective ;
en un clic on peut donc, par exemple,
Pour rendre discrète l'éditabilité
des éléments on peut déclasser ces derniers :
En étant implicite en programmation, l'algorithmique fait partie de l'Informatique. Mais la notion d'algorithme a une portée plus générale : l'algorithmique est implicite dans toute méthode de résolution de problème, que ce dernier soit artisanal, technique ou scientifique. On en fait donc souvent sans le savoir !
La grande difficulté est de concevoir ses propres algorithmes… éventuellement communicables afin que d'autres puissent en profiter. Mais si une recette de cuisine est souvent, à juste titre, présentée comme un algorithme, chacun sait très bien qu'il est nettement plus facile de suivre un livre de recettes que d'inventer une recette !
Donc ici l'algorithmique est le substrat de la partie applicative d'un document, c'est à dire de l'ensemble des moyens donnés au lecteur pour qu'il puisse agir dessus.
Lorsqu'on conçoit un document applicatif avec AlgoDok, la partie applicative réside déjà dans les instructions cliquables, mais elle est potentielle pour le lecteur via la mémoire à instructions, sauf si le concepteur du document la cache volontairement. Tout lecteur peut donc agir sur le document qu'il lit, sans pour autant modifier l'original : le lecteur est aussi acteur et cette opportunité implicite est consubstantielle à la notion de document applicatif.
L'algorithmique est affiliée à la programmation lorsque, dépouillée d'une syntaxe précise,
elle s'intéresse à la convergence de procédés itératifs, numériques ou non, et cherche à en
évaluer le coût. Cette discipline est réservée aux cours supérieurs
(comme ici),
mais dès que l'on construit un programme on fait
, inconsciemment,
de l'algorithmique
.
Il est cependant illusoire de penser qu'il existe une algorithmique détachée de tout langage de programmation puisque la notion fondamentale commune est celle d'instruction et que les instructions portent forcément sur des objets : ceux-ci et celles-là sont en nombre limité, et seule leur parfaite connaissance permet au développeur de produire un code efficace et robuste.
De plus on a le paradoxe apparent suivant :
moins on connaît un langage et plus la mise au point d'algorithmes est difficile. Par
exemple, pour trier le tableau de chaînes de caractères
TAB = ["On peut", "prendre", "ceci", "comme", "premier", "exemple."],
en Javascript il suffit d'exécuter l'instruction de base
Même si l'on restreint la programmation au calcul arithmétique (avec ses quatre opérations seulement), c'est encore faux, comme le montre l'échec de la fusée Ariane 501, car le codage des nombres est essentiel en Informatique : l'exception logiciel interne du SRI s'est produite pendant une conversion de données de représentation flottante à 64 bits en valeurs entières à 16 bits. Le nombre en représentation flottante qui a été converti avait une valeur qui était supérieure à ce que pouvait exprimer un nombre entier à 16 bits.. Celui qui ne serait pas encore convaincu, par manque d'expérience ou de connaissances sur le sujet, peut aussi étudier les langages comme Prolog et Erlang et tenter d'exploiter les algorithmes usuels qu'il rencontre sur Internet…
Le mot algorithmique
a été néanmoins utilisé pour définir AlgoDok
car le concepteur de documents applicatifs est surtout amené
à utiliser des instructions linguistiques ne nécessitant pas vraiment d'entrer
de plain-pied dans le monde des développeurs. Ainsi algorithmique
a semblé plus neutre,
moins chargé d'une sémantique qui pourrait rebuter l'apprenant.
Ici, on l'aura compris, l'algorithmique est indissociable d'un langage implicite de programmation, Javascript, mais est rendue explicitement accessible au béotien par des instructions adaptées à la manipulation documentaire.
Le lecteur intéressé par une réflexion plus aboutie sur l'algorithmique peut compléter cette section.
Comme les langages informatiques ne disposent pas tous des mêmes ressources primitives, et donc ne manipulent pas tous les même objets, comme Erlang avec une seule affectation possible, ou comme SmallTalk et Javascript, où tout est Objet, la notion d'algorithme seule n'a pas de sens.
On doit donc commencer par choisir un langage, ou une famille de langages très voisins, si l'on veut qu'un algorithme mis au point dans un langage ait des chances d'être exploitable dans plusieurs autres.
Javascript est de ceux-là : sa syntaxe est voisine de celle de C, C++ et Java,
langages parmi les plus populaires en Informatique. Mieux, Javascript est
LE
langage intimement lié aux documents du Web, donc indispensable pour concevoir des
documents applicatifs exploitables via Internet.
Javascript est incontournable en fait, car il est le seul langage natif
dans les navigateurs, contrairement à Java qui nécessite d'installer une machine virtuelle et
ne permet pas d'accéder directement aux composants (éléments) du document.
Quant à PHP, souvent cité par les néophytes lorsqu'on parle de langages pour le Web,
il est uniquement utilisable du côté serveur (c'est à dire sur un serveur distant),
et donc n'est pas comparable à Javascript, —uniquement et— toujours exécutable côté client,
c'est à dire sur la machine de celui qui lit
le document.
Ce qui n'empêche pas PHP d'être très puissant, mais côté serveur…
Javascript est un langage des plus aboutis, pour des raisons profondes qu'il n'est pas possible d'évoquer dans ce document, en particulier pour appréhender les fonctions comme des objets, exactement comme en Mathématique (pour en savoir plus sur celles-ci, voir le paragraphe spécifique dans la partie suivante).
Nous l'avons déjà souligné :
moins on connaît le langage cible, plus on a de mal à concevoir un algorithme
.
Le plus spectaculaire dans le domaine est
la notion de tri : si on ne sait pas qu'en Javascript (comme dans bien d'autres langages)
un tableau est un objet qu'on peut trier
en fournissant une fonction de comparaison classique
comme plus_petit_en_premier = function(a,b) { return (a < b ? -1 : (a == b ? 0 : 1)) },
alors ce qui peut être fait en quelques minutes avec
une instruction comme monTableau .sort (plus_petit_en_premier),
peut demander de nombreuses heures de travail (conception, compilation, exécution et tests), avec
une efficacité bien discutable, même pour un
tri rapide
, même pour un développeur expérimenté.
Si Javascript présente une syntaxe commune à C++ et Java, il s'affranchit de la lourdeur de la classification hiérarchique des objets, donc des lourdes bibliothèques de classes. En revanche il est tout à fait adapté à la programmation par modules, ceux-ci étant embarqués dans les documents applicatifs, selon les besoins.
Pour exécuter un programme Javascript, il suffit d'un navigateur Internet, comme FireFox, Chrome, Safari ou Opera et pour « l'écrire » on utilise un éditeur multiplateforme comme Geany (Linux, Windows) ou Jedit (Linux, Mac et Windows), mais on peut aussi utiliser TextWrangler ou Smultron sous Mac OS X, ou encore Notepad++ sous Windows.
Pour tirer pleinement profit de Javascript il faut aussi connaître certaines bases en HTML et CSS, mais on peut s'initier facilement à ces trois langages grâce à W3schools (ou encore pour les CSS, avec un site pour débutant).
Javascript est un langage très souple où, comme en mathématiques, les fonctions sont des objets. Ceci permet en particulier un style de programmation proche du langage naturel.
Ainsi le module AlgoDok permet de faciliter la conception de programmes en Javascript, mais aussi d'aller au-delà : il permet de construire peu à peu une « algorithmique linguistique » via la conception de documents applicatifs, comme on peut le voir sur cet environnement d'apprentissage de la programmation, lui-même un document applicatif, ou encore avec un environnement plus élaboré incluant en particulier un module de construction dynamique de figures géométriques manipulables à la souris.
On peut ainsi préfixer
les noms de variable Javascript par le., les. ou la.
afin d'améliorer la lisibilité des instructions exploitant des fonctions, même si
les parenthèses de l'appel d'une fonction
se lisent normalement de
, de la
ou du
et s'il est souvent naturel d'utiliser
l'article défini dans l'identifiant d'un objet. Attention cependant à ne pas utiliser de préfixe
devant le mot ceci, simple substitution à this dans les balises
d'instruction (classées JS) comme
Toute instruction cliquable permet d'activer facilement des instructions descriptibles en une phrase simple, mais pour programmer des suites d'instructions plus complexes il faut utiliser des scripts. AlgoDok permet de définir des scripts de différentes factures (éditables, différés et périodiques) en plus des scripts classiques écrits en Javascript, définis par une simple balise script.
Le langage de programmation exploitable avec AlgoDok (en particulier via la mémoire à instructions) est baptisé ici JS : c'est le Javascript complet avec quelques aménagements pour les mathématiques :
^comme sur les calculatrices de poche, ainsi que le lecteur peut le constater sur l'exemple suivant,
Ici JS n'est donc pas complètement équivalent à javascript.
Avec AlgoDok, on peut aussi utiliser le langage Algo, modeste extension de Javascript dont le seul but est de pouvoir exprimer des instructions algorithmiques en français, s'harmonisant ainsi avec les instructions linguistiques. On peut d'ailleurs amémiorer cette extension en exploitant le mini-module Algo-fr.
Cette facilité permet d'initialiser un document ou bien de le modifier périodiquement, ou encore de tester directement des scripts en cours d'élaboration. Mais mettre au point un script revient à programmer, c'est à dire à concrétiser un algorithme.
La difficulté en programmation classique est de pouvoir donner à l'utilisateur les moyens
de fournir des données et d'exécuter des actions.
D'où la notion d'IHM (Interface Homme-Machine) qui, au fil du temps, est quasiment devenue
synonyme
d'interface graphique
avec des stéréotypes métaphoriques : fenêtre
, dossier
, fichier
,
bouton
, boîte à cocher
, etc…
Avec AlgoDok on part du principe qu'en informatique toute IHM est un document et,
réciproquement, que tout document structuré est une IHM en puissance :
il relève forcément de la métaphore des boîtes
(concept non décrit ici, sorte de méta-modèle
du box model des CSS). Ce qui nécessite d'avoir une sémantique plus forte,
commune aux concepteurs de documents applicatifs, à leurs lecteurs et aux développeurs de
modules.
D'où en particulier les notions d'instruction cliquable
, que le lecteur a déjà rencontrée, et de
script éditable, inusitées dans les IHM classiques, et la notion de variable qui peut
à la fois être exploitée à l'intérieur du document applicatif (côté concepteur)
et à l'extérieur (côté lecteur). Le terme d'instruction cliquable a une sémantique forte :
l'instruction doit être explicite au lecteur ou utiliser une symbolique qui devient quasi universelle.
Les instructions cliquables sont a priori complétées par AlgoDok au chargement
du document qui les a définies en HTML via la balise js ou, éventuellement, avec la
balise i de classe js ou Algo.
Au besoin, on peut les créer ensuite directement sous une forme HTML,
mais cette opération n'a d'intérêt que pour un développeur averti.
Ainsi par exemple on définit deux instructions :
Techniquement, les instructions cliquables ont un attribut spécifique, onclick qui en font des éléments actifs. Tout élément pouvant avoir un tel attribut, on peut donc activer (ou actionner) tout élément ainsi pourvu.
On peut activer tout élément possédant un attribut onclick, en particulier toute instruction cliquable et tout élément booléen (voir plus loin). Ceci permet d'imaginer agir à distance sur les actionneurs, même invisibles, grâce aux bases de la programmation, et donc d'imaginer des instructions qu'on peut répéter à l'envi, par programmation.
On peut aussi utiliser actionner à la place de activer.
Pour les booléens, on peut de plus les cocher ou les décocher. Ces actions ne sont effectives que si l'état du booléen ne correspond pas déjà à l'action demandée.
Lorsqu'on active un booléen, on commute son état !
Si la balise script définit implicitement un code Javascript exécuté
au chargement dans le navigateur, AlgoDok permet de préciser l'usage du langage JS
(avec language = "JS")),
c'est à dire simplement du Javascript qui permet cependant d'avoir des expressions algébriques
avec des exposants définis par le chapeau
, comme on le rencontre
sur toutes les calculatrices (par exemple : 3*y - x^5).
Rappel : JS n'est pas complètement équivalent à javascript ; d'autant que spécifier language = "javascript" aura pour effet d'être compris directement par le navigateur et le script correspondant sera exécuté immédiatement ! AlgoDok le tolère donc, évidemment, mais il est préférable de spécifier JS.
En spécifiant language="Algo" dans une balise de script, on dispose en outre de l'opportunité d'utiliser des mots-clés en français (comme : tant que (···) faire { ··· } ou si (···) alors { ··· } sinon { ··· }), permettant ainsi certaine harmonie avec les instructions linguistiques d'AlgoDok.
Afin de faciliter d'une part la synchronisation de différents événements documentaires, et d'autre part l'apprentissage de l'algorithmique et de la programmation, AlgoDok permet en outre de définir trois autres formes de scripts (et ici les points ··· désignent a priori soit JS soit Algo) :
On dit bien a priori
, car on peut en fait spécifier un langage quelconque
qu'AlgoDok peut traduire en JS, pour peu qu'on lui fournisse une fonction de traduction.
Ainsi le langage Toto est exploitable dès qu'on fournit
AlgoDok.toJS.Toto = function(s) { ··· ; return s } une fonction de traduction
en Javascript standard. Un langage non traductible entraîne une alerte.
Le temps peut aussi être en minutes (min) ; on peut mettre une espace avant l'unité ou bien ne pas indiquer d'unité (s par défaut). On peut omettre la classe pour les scripts éditables à condition qu'il y ait un attribut class non vide, sinon le script est exécuté directement lors du chargement.
est remplacé après chargement par une zone de saisie exécutable :
On peut (dé)commenter tout script éditable,
ainsi que tout textarea contenant du Javascript, en utilisant l'instruction éponyme.
Par exemple on peut
L'instruction exécuter accepte aussi bien une chaîne de caractères (mais pour du Javascript non francisé), un script, une instruction cliquable, voire n'importe quel élément contenant du source Javascript.
Pour un script ou un textarea On peut utiliser l'attribut language="Algo" afin d'exploiter des algorithmes décrits en langage vernaculaire. Pour une instruction cliquable, on fera de même en la définissant avec class="Algo" au lieu de class="JS".
On peut ainsi :
exécuter (le .successeur .de (ceci))
L'intérêt des scripts de classe différé ou périodique
que l'on peut appeler scripts-processus
, est de gérer automatiquement
la modification d'un document. On peut en voir l'effet dans ce paragraphe, en lisant que le
document est chargé depuis 0 secondes.
On peut arrêter un script différé ou périodique (cas le plus utile),
comme celui qui égrenne les secondes écoulées dans le paragraphe précédent :
on peut
En programmation, si l'affectation est essentielle, en second lieu les tests sont souvent utilisés pour des actions conjoncturelles, en particulier pour tenir compte de choix définis par le lecteur. AlgoDok facilite leur mise en œuvre grâce à des éléments booléens, quasiment incontournables pour un usage efficace des scripts périodiques qui donnent une dynamique au document.
La balise bool permet de définir dans le source, et modifier dans le navigateur, une variable globale booléenne, afin d'en tenir compte dans les scripts.
On définit un élément booléen en HTML avec un identifiant (comme option_choisie dans l'exemple suivant) et un contenu. On peut aussi en définir sans donner d'identifiant, directement avec le nom de la variable.
Pour ce cas, il est important de noter que toutes les espaces du contenu sont enlevées afin de fournir un nom de variable Javascript convenable. Contrairement à la balise var, la balise bool ne fait pas partie des balises standard du HTML5.
Par défaut un booléen est initialisé à false, sauf mention de true dans la balise.
Le nom de la variable associée est l'identifiant de l'élément bool, qu'on peut faire apparaître en laissant un moment le pointeur de la souris sur la boîte à cocher.
On peut ensuite y faire référence, donc en particulier
Comme on peut faire apparaître le nom de la variable globale correspondant à tout booléen (c'est son identifiant), le lecteur peut donc le connaître a posteriori, lui permettant ainsi d'en connaître l'état et de le manipuler ; par exemple, en langage Algo : si (ce_booléen_de_test) mettre ("ce_booléen_de_test") .avant ("le brouillon") ou si (!ce_booléen_de_test) mettre ("ce_booléen_de_test") .après ("le brouillon").
On peut créer dynamiquement une telle variable, comme sur l'exemple suivant : mettre ( booléen ("est_enfantin") .contenant ("C'est enfantin !") ) .dans ("la mémoire à instructions").
Avec l'exemple précédent on peut montrer l'effet, et l'intérêt,
d'une instruction spécifique de classement (classer.selon) :
Le même nom est utilisé pour la variable JS que pour l'élément bool
qui l'a créée. On peut donc manipuler facilement ce dernier, par exemple avec l'instruction :
Les variables booléennes permettent aussi un classement conjoncturel, sans nécessité de passer par un élément booléens.
La notion de prédicat est réduite ici à une fonction d'une variable qui retourne une valeur booléenne.
Ainsi l'instruction spécifique de classement (classer.selon) permet d'exploiter tant les booléens/variables booléennes que les prédicats :
On peut
avec la fortune =
et
.
On peut aussi fournir directement le prédicat, sans passer par une fonction :
En plus des données de type nombre, chaîne de caractères et booléen, la programmation entraîne souvent l'usage de calculs, et donc celui des Mathématiques. AlgoDok pourvoit le programmeur de certaines facilités de mise en œuvre, dont on ne dispose pas dans les environnements habituels, en particulier pour la modification de variables par le lecteur. Un autre aspect de la programmation aussi partagé par les Mathématiques et l'informatique est la notion de structure. La structure fondamentale en Javascript est celle de tableau, que nous verrons donc dans la section suivante, objet variable lui aussi.
Le présent document n'a pas pour vocation de présenter toutes les possibilités offertes par Javascript, et il n'en donne pas moins de nombreux exemples d'usage. Cependant une notion fondamentale est celle de variable prise en compte d'une manière originale avec AlgoDok et commune aux Mathématiques, élémentaires ou non, et à l'Informatique, qu'on soit programmeur ou non.
En Javascript comme en Mathématiques on a la notion fondamentale de variable. En Javascript elle est introduite par le mot-clé var ; par exemple : var somme = x + y + z. Le problème est de pouvoir donner au lecteur le moyen de modifier facilement des variables, c'est à dire de les faire varier, sans pour autant qu'il sache programmer, et que cette variable soit accessible dans un texte explicatif, un contexte de lecture qui explicite son emploi, comme on peut le constater sur cet exemple.
Avec AlgoDok
les fonctions mathématiques sont directement accessibles par leurs noms usuels,
comme on peut le voir sur cet exemple :
Il est pourtant important de pouvoir en tirer profit simplement,
d'autant que dans un document applicatif, par définition pourrions-nous dire,
certaines parties sont forcément variables. AlgoDok permet de définir
des variables directement dans le document, avec l'élément var,
et d'y accéder soit par programme (en Javascript), soit manuellement
:
concepteur et lecteurs du document peuvent donc accéder aux mêmes variables.
On peut initialiser une variable avec le symbole d'affectation, comme en Javascript. Par exemple si l'on étudie le volume d'un cône de base circulaire de diamètre D = 12 m et de hauteur h = 1,73 m, on peut le calculer avec la formule et en donner un exemple numérique : V_cône m3.
Le lecteur peut modifier ces variables en cliquant dessus et en modifiant la valeur.
Les précédentes sont définies respectivement en HTML par <var>D = 12</var>,
<var>h = 1,73</var> et <var readonly>V_cône</var>.
Lors d'une mise au point d'un document applicatif, on peut utiliser l'instruction
voir (nom de la variable) ; par exemple :
On peut utiliser la virgule comme séparateur des décimales dans l'initialisation —par une égalité— des variables numériques et mettre une expression algébrique (par exemple D = 12 * (pi/5)^3).
Une variable peut avoir un nom différent de ce qui apparaît ; on utilise
alors l'attribut name. Par exemple
avec <var name="cnl"><b>ce nombre-là</b> = 0,4052013</var> on obtient :
ce nombre-là = 0,4052013. On peut alors tester
l'effet avec l'instruction
Un clic sur la variable permet d'en modifier le contenu, que l'on valide avec un second clic
(l'ancienne valeur reste apparente pendant la modification) ;
un clic-droit permet de recopier l'affectation équivalente dans
la mémoire à instructions
.
On peut définir une variable globale une ou plusieurs fois dans le document et la modifier où l'on veut, comme ici avec D, et alors le volume du cône,V_cône, est automatiquement modifié, grâce à un script périodique (ici de langage Algo) :
Le lecteur peut s'entraîner à manipulier de telles variables avec l'étude suivante.
On peut aussi modifier un contenu variable, soit directement par une instruction
cliquable portant sur des éléments variables,
comme
Un processus d'AlgoDok actualise le contenu de tous les éléments variables, systématiquement toutes les 200 ms. Cependant on peut aussi avoir besoin d'éléments dont le contenu est donné directement par une variable globale (en Javascript). On utilise alors l'instruction actualiser (nom de la variable).
On peut aussi fournir une liste de noms de variables globales,
pour une actualisation groupée
.
Pour que cette instruction soit effective
le nom de la variable globale doit aussi être
l'identifiant d'un élément.
Par exemple : on calcule
Dans la plupart des cas les éléments variables suffisent, car on peut facilement modifier la présentation, même si on n'a pas l'entière latitude sur l'apparence visuelle.
On peut créer dynamiquement un élément variable, comme sur l'exemple suivant.
On crée la variable V_sphère = 6,082012
en HTML dans le document (<var>V_sphère = 6,082012</var>),
mais aussi dynamiquement, en Javascript :
Sur un élément variable, on peut spécifier un attribut onchange contenant une instruction qui s'exécutera après chaque modification de cette variable par l'utilisateur.
Enfin on peut modifier l'apparence de la valeur d'une variable numérique,
comme sur l'exemple suivant :
On peut aussi passer une fonction à la place d'une chaîne de caractères : ce_format = function(v) { return " (≈ " + arrondi(v).avec(3).décimales + " m³)" } ; présenter ('V_sphère') .selon (ce_format).
Même si les variables sont destinées en priorité à du calcul et donc sont supposées être des nombres, on peut aussi utiliser des chaînes de caractères.
On note au passage que la variable document est reconnue par AlgoDok comme désignant le corps du document (c'est à dire l'objet document.body).
Si l'on souhaite avoir une variable dont le contenu est une chaîne de caractères, soit on l'indique clairement à la saisie, avec des double-quote comme délimiteur (exemple : "ceci est une chaîne"), soit on laisse AlgoDok le détecter seul en gardant en tête qu'il donne la priorité au calcul et à la programmation.
On définit une une variable de chaîne
que l'on initialise avec
Dans ce document la programmation est centrée sur deux types d'objets :
les nombres et les chaînes de caractères. Ce qui explique pourquoi on a distingué
deux instructions pour lire
le contenu d'un élément : contenu retourne une chaîne
de caractères tandis que contenu.numérique retourne un nombre.
Mais les objets les plus intéressants en Javascript sont les fonctions, en particulier les fonctions numériques.
La programmation par objets, très puissante en Javascript, n'est pas décrite ici, même si elle constitue l'essentiel du développement d'AlgoDok : l'algorithmique entendue ici doit rester à la portée d'un concepteur de documents applicatifs. Ceci n'est cependant pas un problème car les objets manipulés avec AlgoDok sont quand même définis, mais implicitement : ce sont tous les éléments du document.
En javascript tous les nombres sont au format standard IEEE 754, donc ils sont definis avec 16 chiffres significatifs.
Avec AlgoDok les fonctions mathématiques usuelles de Javascript sont directement utilisables : sqrt (racine carrée), abs (valeur absolue), sin, cos, tan, asin (arc sinus), acos (arc cosinus), atan, round (arrondi à l'entier le plus proche), floor (partie entière), exp et ln et aussi les fonctions partie.entière et partie.décimale. Toutes ces fonctions retournent des nombres.
Les angles sont supposés en radians, unité internationale. Lorsque le calcul est
impossible la valeur retournée n'est pas un nombre et si on l'affiche on voit apparaître
NaN (Not a Number).
Il suffit de
La fonction arrondi vue précédemment retourne une chaîne de caractères (String), pas un nombre (Number) ; il faut donc y penser pour les calculs, même si, en général, Javascript fait les bonnes conversion dans les expressions qui exploitent des nombres sous forme de chaînes de caractères.
De plus on peut utiliser la fonction gcd(a,b), qui retourne le
plus grand commun diviseur de a et b et la fonction HMS(t) qui retourne
l'expression de t secondes en heures, minutes et secondes ; par exemple :
On peut définir facilement le plus petit commun multiple par :
On peut facilement y ajouter des fonctions simples, comme carré et cube :
Les puissances (d'exposant entier ou non) sont définies d'une façon inhabituelle
(il s'agit de programmation par objets !) lorsqu'on est habitué aux calculatrices.
Pour avoir xn
on écrit x.pow(n) (pow = to the power
= à la puissance
).
C'est pourquoi écrire un script en spécifiant language="JS"
ou language="Algo"
est le seul moyen d'utiliser le classique chapeau
pour exprimer des puissances.
On peut aussi utiliser un script francisé
(language="Algo") :
Lorsque l'on met au point un algorithme, il est nécessaire de faire des tests pour le valider,
soit avec des valeurs d'entrée
dont on connaît les valeurs de sortie
,
soit avec des nombres très variés, par exemple pour déterminer la précision de lalgorithme
ou en évaluer la rapidité.
Pour faire de nombreux tests variés en peu de temps et d'instructions il est donc nécessaire
de disposer de générateurs de nombres (pseudo-)aléatoires.
Il existe la fonction random qui retourne un nombre (pseudo-)aléatoire de [0 ; 1[.
On peut tester cette fonction avec la boucle suivante :
Avec AlgoDok on peut utiliser aussi les expressions nombre.aléatoire (m,M) et
nombre.entier.aléatoire (m,M) qui retournent chacune un nombre (pseudo-)aléatoire de [m ; M],
réel
dans le premier cas et entier dans le second.
d'une part for(k = 0 ; k < 10 ; k++) écrire( nombre.aléatoire(-4, 1.3) + ' ; ' ) .sur ('le brouillon') pour des réels et d'autre part B = '' ; pour (k = 0 ; k < 50 ; k++) B += boîte('b', nombre .entier .aléatoire(-4,1.3)) ; écrire (B) .sur ('le brouillon') pour des entiers.
Pour une raison de performance, il est péférable de concaténer les boîtes avant de les écrire (étudier la seconde boucle pour voir comment le faire).
Les nombres en mathématiques sont souvent manipulés ensemble comme avec des vecteurs et des matrices. En Javascript la notion de tableau généralise ces notions : on peut créer des tableaux de n'importe quoi, y compris de fonctions et de tableaux. Bien entendu, la création de grands tableaux de test passe souvent par l'usage de nombre aléatoires.
Les tableaux se définissent très simplement, sous forme d'une liste bornée par des crochets,
comme on peut le voir sur l'exemple suivant :
Avec des éléments variables (balise var) on peut aussi exploiter des tableaux, mais alors il faut veiller à mettre une espace après chaque virgule séparant deux nombres, sinon l'ensemble sera interprété comme un nombre en écriture décimale française.
En Javascript, les indices commencent à 0 ; exemple :
En mathématiques ces tableaux seraient plus facilement appelés suites.
On peut alors, après exécution,
Avec AlgoDok on peut concaténer
les tableaux,
dans la même logique que la concaténation des chaînes de caractères :
Des tableaux particuliers sont souvent importants dès qu'on a besoin de travailler sur une sélection d'éléments documentaires. Comme on peut filtrer un tableau selon une fonction prédicative, on pourra aussi sélectionner des éléments du document.
Pour filtrer un tableau en ne gardant que les éléments virifiant un critère donné, on utilise la propriété vérifiant avec un prédicat de la variable x (spécifique à AlgoDok), c'est à dire une expression qui vaut vrai ou faux selon les valeurs de x, ou encore une fonction qui retourne un booléen.
Pour une fonction, le paramètre n'est pas obligatoirement x : on peut l'appeler comme on veut.
Les exemples suivants utilisent les deux modes d'expression d'un prédicat.
Avec une fonction :
On a souvent besoin de faire une opération systématique sur certains éléments. C'est pourquoi AlgoDok fournit la fonction éléments que l'on appelle ainsi, dans sa forme la plus simple : éléments (balise) .de (élément), et même souvent éléments (balise) .du (document). Cette fonction retourne un tableau.
On peut utiliser du à la place de de et
les .éléments à la place de éléments.
On peut aussi sélectionner des éléments d'une façon plus technique
avec éléments.classés (classe au singulier, à plusieurs signifiants)
ou éléments.sélectionnés.par (sélecteur de CSS),
mais ces instructions sont plutôt réservées aux développeurs de modules.
On peut définir
On peut simplifier la sélection précédente, avec
tout (classe) .de (élément) :
Rappelons qu'en Javascript les indices des tableaux commencent à 0 ;
ce qu'on comprend facilement avec
On peut aussi utiliser le pluriel, avec
tous .les (classe) .de (élément) :
On peut utiliser du à la place de de, toute et chaque à la place de tout, et toutes à la place de tous.
Lorsqu'on a un peu l'habitude de programmer on peut parcourir un tableau à l'aide d'une boucle pour faire les opérations de son choix. Mais pour appliquer une fonction à chaque élément du tableau, avec AlgoDok on n'a même pas besoin de programmer une boucle, grâce à l'instruction appliquer dont la première variable est un tableau, comme en fournit l'instruction éléments, et la seconde une fonction qu'on peut se contenter d'exprimer à l'aide d'une chaîne de caractères exploitant la variable x.
La syntaxe est simple : appliquer (fonction) .à (tableau d'éléments) ou encore appliquer (fonction) .aux (tableau d'éléments).
En mathématiques on parle souvent d'application
au lieu de fonction.
Ici la fonction peut être un objet (Function) ou aussi une chaîne de caractères définissant
la valeur à retourner par une expression, obligatoirement de variable x, conformément aux
habitudes mathématiques.
Voici comment l'on peut procéder :
Après exécution, le lecteur peut constater un marquage de toutes les remarques avec le symbole spécifié.
Dans l'exemple précédent on filtre en fait les paragraphes sélectionnés avec un test. Même celui-ci n'est pas nécessaire : on peut utiliser une fonction prédicative de filtrage, c'est à dire une fonction qui retourne un booléen (vrai ou faux). Cette dernière permet alors de sélectionner directement les éléments qui la vérifient.
On peut donc réaliser le même travail que ci-dessus en utilisant une fonction prédicative de filtrage, qui évite un test peu pertinent dans la fonction de marquage :
On peut se passer même de définir une fonction de filtrage, comme on peut le voir sur l'exemple : appliquer (marquer) .aux (éléments .de ('la partie des variables') .vérifiant ( "x .est ('un exemple')" ) ), ce qui donne, avec une forme francisée définie par <i class="JS fr"> : appliquer ('marquer') .aux (éléments .de ('la partie des variables') .vérifiant ( "x .est ('un exemple')" ) ).
Enfin lorsqu'on veut effectuer une recherche parmi tous les éléments du document, on peut utiliser l'instruction éléments .vérifiant (ou les .éléments .vérifiant).
De même on peut poser que :
On peut aussi sélectionner des éléments en utilisant la syntaxe des
sélecteurs de CSS, qui finalement sont autant de
prédicats.
Par exemple, le sélecteur div.exemple i.JS désignant toutes les instructions cliquables
contenues dans une division d'exemple :
Le lecteur voulant approfondir la notion de fonction peut étudier le paragraphe complémentaire.
Le concept le plus puissant à la fois en Mathématiques et en Informatique est donc celui de fonction. Or Javascript est un des rares langages où toute fonction est un objet, et le seul langage usuel où chaque objet est définissable et structurable dynamiquement.
Après exécution du script précédent, on peut exploiter la fonction est pour construire des requêtes dont la lecture est aisée :
Le lecteur connaissant bien les mathématiques ne peut qu'apprécier cette liberté…
fonctionnelle
, renforcée par le fait qu'en Javascript tout est objet…
Tout fichier HTML est un document descriptif analysé et interprété par n'importe quel navigateur, indépendamment du fait qu'on soit lié à Internet ou non. Donc ce que le lecteur voit à l'écran n'est que le résultat d'une telle analyse.
En fait le navigateur crée des objets informatiques, appelés éléments, placés en mémoire et exploités soit directement par le navigateur, soit lors de la mise en service des styles ou enfin par le biais de programmes écrits en Javascript. D'où la spécification d'un modèle documentaire pour représenter les objets constituants les documents : le DOM (Document Object Model).
Mais en Javascript tout est objet et on peut manipuler et créer directement des objets, en Javascript. On peut alors chercher à sélectionner des éléments suivant leur classe ou d'autres critères, et il semblerait alors nécessaire de créer alors à chaque fois une fonction ad hoc. Mais avec AlgoDok on peut créer dynamiquement des tableaux d'éléments sélectionnés simplement par des instructions faciles à lire et à utiliser. On peut aussi créer de nouvelles actions, c'est à dire des instructions exprimées par un simple verbe à l'infinitif et dont l'objet (direct) peut être un tel tableau d'éléments.
Nous avons déjà vu que certains instructions appelées aussi actions admettent plusieurs objets directs, comme : cacher, montrer, bloquer, débloquer, effacer, supprimer, commenter, décommenter, actualiser, exécuter et activer (ou actionner).
Mais on peut aussi en créer dynamiquement, comme dans l'exemple suivant : nouvelle .action ('taguer') .définie .par ( "écrire(' ♺').dans(x)" ) où la fonction est passée comme une expression exploitant la variable x ; après son exécution on peut demander par exemple de taguer (les .éléments ('h2') .du (document) .plus (les .éléments ('h3') .du (document))) !
Cette instruction linguistique est en fait une fonction qui retourne l'action en question.
On peut passer une vraie
fonction comme paramètre après .définie .par,
mais il devient important d'en savoir plus à ce sujet pour le faire convenablement.
En Javascript, les nombres, les booléens, les chaînes de caractères, les tableaux, les fonctions et les éléments sont des objets au sens de la programmation par objets. Il n'est pas question d'expliquer en détail la notion d'objet, mais seulement de montrer une nuance dans ce que peut exprimer le concepteur de documents applicatifs exploitant AlgoDok.
Javascript est dit langage à prototype d'objet
et le seul de sa
catégorie à être massivement utilisé,
mais bien souvent, et malheureusement, avec une vision réduite des ses aspects fondamentaux
qui lui permettent pourtant de surclasser tous les langages de la programmation par classes d'objets.
C'est cette faculté d'adaptation qui a permis à l'auteur de ce document
de mettre au point un module comme AlgoDok, efficace en un peu moins de 40 KiB
(version minifiée
).
Pour éviter les confusions usuelles, on utilise ici la notation normalisée
Ki = 1024
(préfixe kibi
). La CSS d'AlgoDok occupe moins de 9 KiB donc le volume total à
(télé-)charger pour un document applicatif utilisant AlgoDok est inférieur à 50 KiB.
Si l'on ne tient pas compte de l'interface linguistique opérationnelle
(ILO, voir plus loin) dont l'objectif est l'adaptation à une langue donnée,
la partie uniquement algorithmique (donc extralinguistique) occupe moins de place :
AlgoDok (≈ 27 KiB) = AlgoDok-fr (≈ 40 KiB) – AlgoDok-ILO-fr (≈ 13 KiB).
On peut par exemple comparer ces volumes aux 84 KiB de l'API jQuery 3.x, volume de script minifié à réellement (télé-)charger pour une
extension algorithmique
uniquement prévue en anglais et
réservée aux développeurs, donc inutilisable pour un simple concepteur de documents,
même de langue anglaise.
Avec jQuery 2.x on avait déjà abandonné le support de IE-6/7/8, ce qui a permis de gagner environ 10 KiB sur le module minifié, en supprimant un code qui servait uniquement à gérer le cas particulier d'Internet Explorer…
Tout élément est identifiable en HTML par un identifiant, et nous le savons déjà.
Ainsi, le texte qui suit,
On ne sait pas où ceci peut nous conduire !
est identifié par
le texte amovible. Lors de
l'exécution des instructions suivantes, on peut alors comprendre la différence entre
On peut alors référencer l'objet précédent via une variable, par le biais
d'une affectation, comme avec
On peut aussi référencer un élément par une variable, à sa création, avec l'instruction nouvel.élément (balise,classe) (on peut omettre la classe). Par exemple : cette_remarque = nouvel.élément ("p","étude") ; écrire ("Encore un autre exemple !") .dans (cette_remarque) ; mettre(cette_remarque) .dans ('la mémoire à instructions').
Une première application du référencement des éléments
est de pouvoir les rendre déplaçables
à la souris.
Avec AlgoDok, le principe est déplacer un élément e via un élément p, sous-entendu que le déplacement correspond à une intervention humaine éponyme. Deux cas sont possibles :
poignéede traction (si elle est hors de l'élément à déplacer, c'est donc une sorte de trackpad) ; par exemple, sachant que la poignée 2 est le mot poignée entre guillemets dans ce paragraphe : on peut
Cet élément permet de rendre déplaçable ce paragraphe.
On peut mettre plusieurs poignées à un élément ; on peut même en passer plusieurs d'un coup : rendre.déplaçable (élément) .via (poignée 1, ···, poignée n).
On peut ensuite décider de diminuer la déplacibilité
d'un élément via une
(ou plusieurs) poignée(s) (ou par lui-même).
On utilise alors rendre.non.déplaçable au lieu de
rendre.déplaçable, en suivant la même syntaxe.
Exemple : statique
) dans le document.
Lorsqu'on a déjà rendu déplaçable
un objet
ou bien qu'on l'a déplacé
avec l'instruction déplacer, on peut connaître la dernière position,
grâce à la fonction position. Exemple :
On peut aussi connaître cette dernière position de l'élément
grâce à la propriété P (comme Point
ou Position
, mots identiques
en français et en anglais, comme Punkto
ou Pozicio
en espéranto), par
exemple avec
Pour avoir un déplacement par rapport à la fenêtre (cas de la mémoire à instructions) et non par rapport au document (cas du texte amovible), l'élément déplaçable doit avoir le style position = fixed.
On peut imprimer sélectivement des éléments d'un document applicatif,
par exemple avec
Si un élément est caché (donc classé comme invisible
),
il ne sera pas imprimé.
On peut aussi utiliser des tableaux d'éléments, donc la sélection via une requête.
On commence par créer un tableau d'éléments à imprimer, en affichant le nombre d'éléments concernés (pas forcéments tous visibles) :
Ensuite on peut modifier un style d'impression particulier, défini ci-dessous avec la syntaxe spécifique @media print { ··· },
avant d'insérer
(le.contenu .du ("style d'impression")) .dans ("la feuille de styles")
puis d'
On peut aussi utiliser une sélection via un sélecteur de CSS :
Avec cette section et les trois précédentes le lecteur intéressé peut progressivement passer du statut
de lecteur averti
, pouvant mettre au point quelques instructions linguistiques
de son cru, à exécuter via un script éditable ou simplement via la mémoire à instructions,
lui permettant d'aller au-delà de la simple lecture d'un document applicatif vu comme une simple IHM,
à celui de lecteur-concepteur
, pouvant exploiter de nombreuses
instructions linguistiques pour modifier et améliorer un document applicatif,
jusqu'à celui de concepteur de documents applicatifs
, qui peut exploiter de nombreuses
instructions linguistiques pour mettre au point un réel document applicatif entièrement de son cru.
Cependant, pour envisager de concevoir des documents applicatifs avec une forte composante de programmation, c'est à dire avec une forte partie applicative, non seulement il faut bien connaître les instructions linguistiques d'AlgoDok et le langage Javascript, mais de surcroît il est préférable de suivre une méthode de développement spécifique car l'approche courante (techniquement : MVC) ne permet pas d'être linguistiquement efficace (affirmation qu'il serait bien trop long à justifier ici). Les ingrédients de cette méthode sont abordés dans la partie suivante.
ATTENTION Cette dernière partie s'adresse à un lecteur déjà habitué à concevoir des documents applicatifs et connaissant le langage Javascript. L'objectif est ici de pouvoir définir un module (en Javascript) d'initialisation d'un document applicatif, soit pour une mise en forme particulière, soit pour en construire une partie, ex nihilo ou en fonction du contenu initial.
L'usage des fonctions avec l'instruction écrire.en permet de contextualiser sans limite une sémantique donnée, puisqu'AlgoDok passe à cette fonction, un par un, les éléments ciblés pour l'instruction d'écriture. Par exemple on peut écrire (texte) .en (gros) ··· où la notion de gros doit être interprétée au cas par cas, en fonction de propriétés quelconques des éléments, ce que ne sait pas gérer les CSS (ce n'est pas un langage de programmation !).
On laisse alors au développeur le soin de définir ou non une classe pour l'élément écrit : si la fonction retourne une chaîne de caractère contenant : , la valeur retournée est interprétée comme un style en langage CSS, sinon elle est considérée comme une classe.
Alors on voit l'effet contextuel de cette fonction sur les exemples suivants,
en ayant posé LPDD = "la partie du développeur" :
Lorsqu'on spécifie un langage comme JS ou Algo on doit bien comprendre qu'il s'agit de substitutions de mot-clés du Javascript, non d'un nouveau langage de programmation, analysé et compilé. On peut d'ailleurs spécifier un autre langage que JS ou Algo pour les scripts et instructions cliquables, disons ce_langage_ci, pourvu de disposer d'une fonction de traduction adaptée : AlgoDok.toJS.ce_langage_ci = function(s) { ··· return s }.
sera traduite convenablement par … sous réserve de la présence préalable de la fonction de traduction nécessaire pour une exécution effective et convenable (il faut donc exécuter ce script avant de pouvoir traduire) :
Le langage algorithmique de prédilection avec AlgoDok est Algo, repris et amendé avec le mini-module Algo-fr qui permet entre autres de définir des boucles en langage naturel.
Voici trois instructions complémentaires, pour construire et manipuler de nouveaux éléments documentaires, directement conçu comme objets du DOM.
Pour construire directement un élément du DOM on utilise l'instruction nouvel.élément (balise, classe) qui retourne un objet héritant de Element. On peut aussi utiliser nouveau et nouvelle à la place de nouvel.élément.
Ces fonctions très simples et primitives sont surtout définies pour amorcer des constructeurs d'objets variés, accessibles via une ILO de module.
Dans un module avec ILO (voir infra) il sera naturel d'exploiter des instructions comme annuité = nouvelle.formule .de .largeur (200) .définie.par ("a = C_0 cdot frac{(1 + i_p)^{1/12} - 1}{1 - (1 + i_p)^{-n}}") ; on peut tester ceci avec le manuel de référence du module Formulo.
Avec l'instruction cloner (un élément) .dans (un autre élément) on duplique le premier pour le mettre dans le second (on peut remplacer dans par avant ou après).
On peut ainsi cloner (le .conteneur .de (ceci)) .dans ("le brouillon").
Tous les éléments clonés possédant un identifiant acquièrent aussi un identifiant, obtenu par un suffixe donnant le numéro du clone ; par exemple si on clone trois fois un élément d'identifiant Toto alors les clones auront, dans l'ordre de création, les identifiants Toto.1, Toto.2 et Toto.3 ; la numérotation est spécifique à chaque élément cloné. Ce principe est appliqué à tout élément contenu dans l'élément cloné, mais alors le suffixe est le même pour tous.
La fonction de déplacement à la souris du clone par un de ses constituants est reprise lors d'un clonage, et donc si par exemple on clone la mémoire à instructions, le clone sera lui aussi déplaçable. En revanche, si un objet est déplaçable via un ou plusieurs autres, extérieurs, la gestion d'un tel déplacement à la souris n'est pas reprise pour le clone.
Pour un élément du DOM on utilise source.HTML (un élément) qui retourne une
chaîne de caractère équivalente au source HTML de l'élément.
Pour un objet Javascript on utilise source.JSON (un élément) qui retourne une
chaîne de caractère équivalente au source JS de l'objet, pouvant être néanmoins assez sommaire
dans le cas d'un élément du DOM.
Par exemple :
Signalons tout d'abord le booléen AlgoDok.chargé, mis à vrai après le chargement complet d'AlgoDok (donc après l'exécution de toutes ses initialisations) et AlgoDok.param qui mémorise un éventuel paramétrage du document applicatif, et défini comme complément de l'URL, après un point d'interrogation séparateur.
On passe le paramètre ceci est un paramètre à un document applicatif d'URL http://XXX ··· XXX.html par exemple dans le lien suivant : <a href="http://XXX ··· XXX.html?ceci est un paramètre"> Exemple de passage de paramètre </a>.
Comme il faut pouvoir s'adapter aux contraintes de présentation des utilisateurs, on
peut charger des feuilles de style particulières, pour compléter ou changer complètement
la feuille de style de base, dont le nom est consigné dans AlgoDok.css, dont
le nom par défaut est canonique, comme on peut s'en rendre compte ici :
Mais en plus de cette variabilité fondamentale pour toute feuille de style associée éventuellement à un module, on peut charger a posteriori des CSS et modules.
Pour cela on dispose déjà des instructions importer (un ou plusieurs noms de CSS) et charger (un ou plusieurs noms de CSS) .dans (un élément). Cette dernière instruction est valable pour un chargement dans un cadre (iframe), une image (img) ou encore pour un lien externe (link).
Par exemple on peut
On peut aussi importer des modules. Exemples :
Pour l'import de tout module un message est consigné discrètement dans la messagerie d'AlgoDok, car son action peut très bien ne pas être visible du lecteur tout en modifiant le contenu du document, contrairement aux CSS.
La syntaxe est la suivante : importer (ressource 1, ···, ressource n) ; ainsi on peut faire un import de plusieurs ressources en une seule instruction, dans l'ordre des URL fournies. Pour la suppression le principe est similaire (on note que seul le nom d'un module ou d'une CSS est pris en compte, pas son chemin d'accès).
La suppression d'un module ne change que peu de chose puisqu'il a déjà été exécuté !
avec position ('SOURIS') on obtient un objet qui désigne la position de la souris, où l'unité est implicite : un pixel. On note que y désigne ici l'ordonnée par rapport à la fenêtre, tandis que ya désigne l'ordonnée par rapport au document (ordonnée absolue), et donc peut être largement supérieure à la hauteur de l'écran. Il en va de même avec l'abscisse.
La position du curseur par rapport au document est dite absolute
dans le
langage des CSS, tandis que l'autre est dite fixed
. Comme cette dernière est la plus
utilisée pour positionner des objets à l'écran, on l'a privilégiée.
Classer un élément avec une sémantique nécessite parfois, en plus d'un rendu par CSS, une initialisation pour que l'élément en question soit opérationnel. C'est pourquoi l'objet rendre a été défini dans l'ILO d'AlgoDok. Il existe déjà l'instruction rendre.déplaçable mais tout concepteur de module avec ILO doit pouvoir compléter cet objet à son gré.
le style d'agrémentque le lecteur peut modifier bien sûr, et qu'il commencera par insérer dans
Le script suivant utilise une variable globale : H = 23,04 :
En général pour insérer du texte dans un élément du document, on utilise l'instruction insérer. L'inconvénient est de ne pas pouvoir revenir en arrière, de ne pas pouvoir supprimer ce qu'on y a ajouté. D'où l'instruction spéciale d'écrire, permettant d'effacer ou de supprimer ce qu'on a ajouté dans un élément.
Toute écriture réalisée par l'instruction écrire dans un élément non vide est en fait
encapsulée dans un élément skribo (un écrit
en espéranto).
L'objectif est de pouvoir caractériser facilement ce qui a été écrit dynamiquement dans un élément
non initialement vide.
Il suffit d'activer plusieurs fois les instructions
écrire(" Un autre exemple !") .sur ("le brouillon") ;
alerter (le. nombre .des (éléments ('skribo') .du (document)))
pour s'en rendre compte !
On peut ainsi, par exemple, supprimer facilement les éléments écrits par instruction linguistique.
À la différence de l'instruction cacher qui garde les éléments dans la structure documentaire, l'instruction supprimer permet de les retirer du document.
on peut s'exercer à supprimer des éléments :
Il pourrait d'ailleur être intéressant de faire le ménage
de façon automatique,
par exemple pour éviter d'encombrer le lecteur (ou le document) avec des informations obsolètes.
Ceci nécessite de commander l'exécution périodique d'une action dont le contenu peut dépendre du contexte. Les scripts périodiques rendent en général ce service, et on peut se sortir de toute situation avec des booléens et des variables, mais on peut aussi avoir besoin de le choisir dans une liste, ou même de le construire dynamiquement.
L'instruction exécution fournit un tableau composé du type de processus (1 pour périodique et 2 pour différé), suivi du numéro de processus qui l'identifie de façon unique. Sa syntaxe est : ce_processus = exécution (type, source, durée avec unité) où :
On peut donc ensuite arrêter (ce_processus). On réserve l'instruction relancer aux scripts périodiques.
Ensuite, à tout moment, on peut
AlgoDok analyse le document juste après son chargement pour prendre en compte les éléments spécifiques (booléens, variables, instructions cliquables et scripts) afin d'initialiser convenablement les éléments du DOM. Pour le faire après coup, c'est à dire à tout moment de la lecture, on peut exploiter la fonction AlgoDok.ini.
…on peut obtenir ci-dessous la même chose que si le source était présent initialement dans le document.
D'ailleurs ce principe d'initialisation après chargement est commun à tous les modules ayant besoin de modifier le contenu du document pour être opérationnels, en particulier pour rendre opérationnelle leur interface linguistique.
La notion de document applicatif décrite ici est consubstantielle de celle d'instruction linguistique. Cette dernière impose que la lecture des instructions soit conforme à un langage naturel, tout en laissant le développeur libre de travailler à sa façon, selon ses habitudes. Ce qui semble a priori une gageure.
Le développement de modules en Javascript et dans cet esprit est pourtant possible en laissant une grande liberté d'expression algorithmique au développeur, à condition d'exploiter la notion de module avec ILO, c'est à dire avec une Interface Linguistique Opérationnelle dont les principes et motivations sont détaillés dans un document à part.
Le mot ILO
signifie outil
en espéranto,
langue dans laquelle les noms communs n'ont pas de genre, pour montrer que c'est
un outil linguistique permettant d'accéder à l'algorithmique d'un module.
Pour l'exploitation d'un module, seule l'ILO permet de le faire et doit donc faire l'objet d'exemples et être décrite par un document applicatif spécifique comme celui que le lecteur est en train d'étudier, pour AlgoDok. Le développeur doit bien noter que cette ILO ne doit pas être étudiée pour savoir comment exploiter le module, d'autant plus que lors de la mise en service du module son code est expurgé de tout commentaire et de toute indentation.
Néanmoins, tout développeur doit pouvoir agir en fonction de la présence de certains modules,
donc de la présence ou de l'absence de certaines instructions linguistiques.
D'où une fonction spécifique :
module (nom du module) qui retourne un objet contenant certaines informations
pertinentes et laissant l'opportunité de paramétrer le fonctionnement du module.
Dans un contexte pluri-linguistique, cet objet permet en particulier de savoir quelles langues
sont utilisées ;
par exemple :
Connaître la présence d'AlgoDok est indispensable dans le cas où l'on développe un module pouvant aussi bien être utilisé avec lui que sans lui. De plus, certains objets ou éléments sont présents dans le DOM mais sans une présence visuelle, ou bien ont une signification particulière qu'il est préférable de connaître avant de développer un module.
Pour étudier toute l'ILO française d'AlgoDok, on consultera le document applicatif spécifique qui explique et permet de tester exhaustivement toutes les instructions linguistiques. On peut aussi consulter les documentation de référence de modules comme Formulo et GeoDyn.