📌 le brouillon

Introduction

On donne ici un moyen au concepteur débutant de tester un par un les composants élémentaires d'AlgoDok :

La gestion de ces éléments par AlgoDok est implicite au chargement du document, mais explicite ici car chaque source est dans une zone de saisie, un textarea.

Pour commuter les différentes sections de ce document sur invisible (ou visible), il suffit de cliquer sur leurs titres (éléments h2 et éléments h3, leurs sous-titres ). On peut alors, en les activant tous, faire commuter d'un coup toute section du document sur invisible (ou visible).

Document applicatif… pour en créer d'autres

Le lecteur travaille directement dans ce document applicatif et pourra ensuite copier-coller dans son propre document le source HTML qu'il aura mis au point avec un éditeur de textes comme Jedit (Linux, Mac et Windows) ou Geany (Linux, Windows), encore TextWrangler (Mac), tous libres de droits.

Pour être effectif, un document applicatif (docapp) doit au moins commencer par indiquer au navigateur qu'il exploite le module AlgoDok, avec un début de document ressemblant au suivant :

On rappelle que le code de tout élément cliquable est a priori récupérable dans la mémoire à instructions sur un simple clic-droit. On peut faire apparaître/disparaître la mémoire à instructions à tout moment, via un actionneur en haut du document.

Une fois à l'aise avec ces différents ingrédients, on peut s'entraîner plus globalement avec un éditeur de textes intégré, en voyant à la fois le source colorisé du docapp et son rendu dans le navigateur, et en exploitant des exemples.

On peut s'entraîner aussi dans l'environnement jsfiddle, comme avec cet exemple.

Ici on ne donne pas la liste complète des instructions fondamentales (pour cela, voir le manuel de référence), car on préfère mettre en place les premiers ingrédients permettant de s'habituer à une nouvelle démarche de conception documentaire pour le Web.

Éléments cliquables et instructions linguistiques

Avec AlgoDok, il n'est pas besoin de connaître le langage Javascript pour manipuler un document de l'intérieur. Il suffit de connaître des instructions linguistiques (c'est à dire exprimées en français avec uns syntaxe Javascript) qu'on insère directement entre des balises HTML ou qu'on utilise avec un attribut onclick.

Pour bien apprécier la simplicité de mise en œuvre, le lecteur est invité à manipuler cet extrait de wikipédia, adapté pour l'exercice et complété avec divers éléments cliquables.

La voie de la simplicité et de la sagesse est de sémantiser le document en utilisant des identifiants (attribut id, pour fournir un nom propre) et des classes (attribut class, pour fournir un nom commun).

Moyennant une initialisation ce source sera rendu dans le brouillon 🎈

La stylisation du texte précédent, indépendante de la construction de sa structure, est modifiable via le textarea (la zone de saisie) ci-dessous.

On peut alors interpréter("la CSS de la page") .pour ("la page") .dans("la feuille de style").

Afin de poursuivre progressivement son apprentissage, le lecteur est invité à étudier un document qui donne d'autres instructions linguistiques parmi les plus faciles à appréhender. Il est alors bon d'étudier le source HTML de ce dernier puisqu'il utilise aussi AlgoDok !

Variables numériques ou textuelles

Définition d'une variable en HTML

On peut définir des variables numériques (de base) ou textuelles (on le précise) :

Moyennant une initialisation (implicite au chargement du document, mais explicite ici) ce source sera rendu comme suit :

Les tirets bas dans les noms de variables sont interprétés comme des indices et les espaces sont supprimées. Le nom réel de la variable apparaît lorsqu'on laisse la souris en suspens au-dessus.

Lors de la saisie d'une variable on peut entrer une expression arthmétique ou fonctionnelle, comme T_min = T_min/2 ou T_min = 37 + sin(pi*âge/100) ; mais seule la valeur de la variable après affectation est conservée : il ne faut pas perdre de vue qu'il s'agt de modifier une variable pour Javascript !

On peut modifier —entre autres— l'aspect des valeurs saisies, via un style adapté.

Modifier l'aspect d'une variable

On peut changer facilement et précisément le style des variables :

Moyennant une initialisation, ce style est pris en compte dans ce document

On peut aussi modifier la présentation de la variable, par exemple pour éviter d'afficher trop de décimales pour une variable numérique.

Modifier la présentation d'une variable

On doit utiliser un script ou une instruction cliquable pour modifier l'apparence de la valeur d'une variable, en utilisant l'instruction présenter (nom de var) .selon (formatage).

Comme sur l'exemple suivant : présenter ("T_min") .selon (" ≈ +v+ °C")+v+ désigne l'emplacement de la variable dans la chaîne affichée.

On peut aussi passer une fonction à la place d'une chaîne de caractères, comme il est loisible de l'expérimenter via le script éditable suivant :

On a utilisé ici le langage Algo mais on peut aussi utiliser du JS classique.

Variables booléennes et tableaux

On exploite à nouveau la balise var

On peut aussi utiliser des booléens ou des tableaux :

Moyennant une initialisation ce source sera rendu comme suit :

Les tirets bas dans les noms de variables sont interprétés comme des indices et les espaces sont supprimées (le nom réel de la variable JS apparaît lorsqu'on laisse la souris en suspens au-dessus de son nom apparent).

En fait la saisie d'un booléen n'a de sens et d'intérêt que pour fixer des règles de pilotage d'un script. Pour la saisie d'une telle valeur binaire, on lui préfèrera un objet booléen, plus souple que la variable booléenne.

On exploite la balise bool

La balise bool permet de spécifier une variable booléenne sous la forme d'un encadré avec une boîte à cocher suivie d'un texte explicitant une affirmation (vraie ou fausse).

Moyennant une initialisation ce source sera rendu comme suit :

Comme pour les variables (balise var), les espaces du nom fourni sont supprimées et le nom réel de la variable JS apparaît lorsqu'on laisse la souris en suspens au-dessus de sa boîte à cocher.

L'élément booléen étant identifié par le nom de la variable, deux booléens différents ne peuvent modifier la même variable JS.

Modifier l'aspect d'un booléen

On peut changer facilement et précisément le style d'un booléen :

Moyennant une initialisation, ce style est pris en compte dans ce document

Ces éléments spécifiques sont inséparables des actions auquelles on peut soumettre des élements du document. S'il n'est pas nécessaire de connaître la programmation pour les exploiter convenablement, il faut quand même utiliser la logique élémentaire pour mettre au point des instructions algorithmiques.

Instructions cliquables algorithmiques

Ici on mêle variables, booléens et des instructions cliquables qui exploitent les éléments précédents. On peut utiliser la class Algo, une version francisée du Javascript, qui permet d'utiliser le français pour exprimer des conditions d'exécution de certaines instructions linguistiques.

Pour avoir la liste exhaustive de tout ce qu'il est possible de faire, d'une part le manuel de référence décrit en le contexte d'usage, et d'autre part on peut étudier en détails l'ensemble des instructions linguistiques d'AlgoDok.

Moyennant une initialisation, cette description est prise en compte dans ce document.

Afin de poursuivre progressivement son apprentissage, le lecteur est invité à étudier le source des nombreux exemples du site d'AlgoDok en regard de la documentation de référence.