λ-wiki
::
milestone
+
| 1 |
help
|
pages
|
skin
|
login
|
code
www!k! v.20120610
! CE SITE NECESSITE JAVASCRIPT !
λ-wiki :: éditeur
_h1 milestone _p Un point d'étape sur l'avancée du couple parser/syntaxe. _h3 exemple type {pre °° {div {@ width:450px; border:1px solid; padding:10px;} {h1 un titre} {center {img {@ src:data/amelie_sepia.jpg; height:100px;}Le sourire d'Amélie}} {p Paragraphe contenant un mot {b en gras}, un autre en {b {i gras italique}} et terminé par un point.} {p Paragraphe avec un lien sur le site {a {@ href:http://www.pixar.com/;}PIXAR}.} {p Un peu de maths : rac(3{sup 2}+4{sup 2}) = {sqrt {add {mult 3 3} {mult 4 4}}}.} {p Et voilà !} } °°} {div {@ width:450px; border:1px solid; padding:10px;} {h1 un titre} {center {img {@ src:data/amelie_sepia.jpg; height:100px;}Le sourire d'Amélie}} {p Paragraphe contenant un mot {b en gras}, un autre en {b {i gras italique}} et terminé par un point.} {p Paragraphe avec un lien sur le site {a {@ href:http://www.pixar.com/;}PIXAR}.} {p Un peu de maths : rac(3{sup 2}+4{sup 2}) = {sqrt {add {mult 3 3} {mult 4 4}}}.} {p Et voilà !} } _h3 analyse de l'exemple _p Le texte analysé contient une suite de formes respectant la syntaxe suivante : {pre °° {first rest} où : first est un mot appartenant à un dictionnaire prédéfini, rest est une chaine de mots et de formes {first rest} ou une chaine de mots sans forme {first rest} ou une chaine vide °°} _p Ce texte est envoyé dans le parser pour être traduit en une chaine de texte HTML/CSS comprise par le navigateur. La chaine est traitée dans une boucle qui recherche et traduit les formes du type {b °°{mot texte quelconque sans accolade}°°}. Elle en ressort quand ne subsiste aucune de ces formes. On peut schématiser ainsi le processus : _h6 1) {pre °° {div @( width:450px; border:1px solid; padding:10px;)@ < h1 > un titre< /h1 > {center {img @(src:data/amelie_sepia.jpg; height:100px;)@ Le sourire d'Amélie}} {p Paragraphe contenant un mot < b > en gras< /b >, un autre en {b < i > gras italique< /i >} et terminé par un point.} {p Paragraphe avec un lien sur le site {a @( href:http://www.pixar.com/;)@ PIXAR}.} {p Un peu de maths : rac(3< sup >2< /sup >+4< sup >2< /sup >) = {sqrt {add 9 16}}.} < p > Et voilà !< /p > } °°} _h6 2) {pre °° {div @( width:450px; border:1px solid; padding:10px;)@ < h1 > un titre< /h1 > {center < img src="data/amelie_sepia.jpg" height="100px" title="Le sourire d'Amélie" / >} {p Paragraphe contenant un mot < b > en gras< /b >, un autre en < b >< i > gras italique< /i >< /b > et terminé par un point.} {p Paragraphe avec un lien sur le site < a href="http://www.pixar.com/" >PIXAR< /a >.} {p Un peu de maths : rac(3< sup >2< /sup >+4< sup >2< /sup >) = {sqrt 25}.} < p > Et voilà !< /p > } °°} _h6 3) {pre °° {div @( width:450px; border:1px solid; padding:10px;)@ < h1 > un titre< /h1 > < center >< img src="data/amelie_sepia.jpg" height="100px" title="Le sourire d'Amélie" / >< /center > < p >Paragraphe contenant un mot < b > en gras< /b >, un autre en < b >< i > gras italique< /i >< /b > et terminé par un point.< /p > < p >Paragraphe avec un lien sur le site < a href="http://www.pixar.com/" >PIXAR< /a >.< /p > {p Un peu de maths : rac(3< sup >2< /sup >+4< sup >2< /sup >) = 5.} < p > Et voilà !< /p > } °°} _h6 4) {pre °° {div @( width:450px; border:1px solid; padding:10px;)@ < h1 > un titre< /h1 > < center >< img src="data/amelie_sepia.jpg" height="100px" title="Le sourire d'Amélie" / >< /center > < p >Paragraphe contenant un mot < b > en gras< /b >, un autre en < b >< i > gras italique< /i >< /b > et terminé par un point.< /p > < p >Paragraphe avec un lien sur le site < a href="http://www.pixar.com/" >PIXAR< /a >.< /p > < p >Un peu de maths : rac(3< sup >2< /sup >+4< sup >2< /sup >) = 5.< /p > < p > Et voilà !< /p > } °°} _h6 5) {pre °° < div style="width:450px; border:1px solid; padding:10px;" > < h1 > un titre< /h1 > < center >< img src="data/amelie_sepia.jpg" height="100px" title="Le sourire d'Amélie" / >< /center > < p >Paragraphe contenant un mot < b > en gras< /b >, un autre en < b >< i > gras italique< /i >< /b > et terminé par un point.< /p > < p >Paragraphe avec un lien sur le site < a href="http://www.pixar.com/" >PIXAR< /a >.< /p > < p >Un peu de maths : rac(3< sup >2< /sup >+4< sup >2< /sup >) = 5.< /p > < p > Et voilà !< /p > < /div > °°} _p A ce stade, la chaine ne contient que du texte contrôlé par des balises HTML/CSS et peut être envoyée au navigateur. Noter que : _ul Les formes {b °°{mot texte quelconque sans accolade}°°} ont été traitées les premières, _ul la forme {b °°{div ....}°°} contenant l'ensemble du texte a été traitée en dernier, _ul l'expression mathématique a été traitée en parallèle, d'abord les deux multiplications (3*3=9 et 4*4=16), puis l'addition (9+16=25), enfin la racine carrée (rac(25) = 5). _p Il suffit donc d'écrire le texte composant une page en respectant la syntaxe {b °°{first rest}°°} pour que le parser le traduise et l'envoie au navigateur pour affichage. Mais à ce stade tout n'est pas traité. _h3 pré et post-traitement _p La boucle ne peut pas tout traiter. On peut citer : _ul le traitement des retours à la ligne, _ul le {b masquage des commentaires}, bien utiles pour documenter le code mais qui doivent être cachés à l'affichage, _ul la {b neutralisation du code} même en vue de l'afficher dans la page, _ul les listes à puces et les listes numérotées que la boucle ne sait pas traiter complètement, _ul du côté mathématique, les opérateurs du type "{b if ... then ... else ...}", "{b for i in [a,b] do ...}", "{b define fonction argumentss = corps de la fonction}", supposent la neutralisation partielle ou totale des expressions. _ul les {b balises alternatives} destinées à simplifier l'écriture, par exemple pour les titres, paragraphes, listes et liens : _ul30 °°_h1 ... CR pour {h1 ...} et les suivantes h2, h3, h4, h5, h6,°° _ul30 °°_p ... CR pour {p ...}°° _ul30 °°_ul ... CR pour {ul ...} et _ol ... CR pour {ol ...}°° _ul30 °°[[lien interne]] pour {a {@ href:?view=lien interne;}lien interne}°° _p Ce traitement se fait avant et/ou après la boucle. Explications. _h6 1) retours à la ligne _p Le filtre utilisé dans la boucle n'aime pas du tout les caractères "{b retour à la ligne}" et de toute façon une chaine HTML/CSS n'en tient pas compte. Ces caractères sont neutralisés avant la boucle et réactivés en fin ; dans la boucle ils sont remplacés par le caractère unicode inutilisé "{b \uFFFF}". Dans l'éditeur de code le texte peut donc être disposé sur autant de lignes que souhaité pour une lecture aisée. _h6 2) listes à puce et numérotées _p Une expression du genre {pre °° {ul article un} {ul article deux} {ul article trois} °°} _p sort de la boucle sous cette forme : {pre °° < ul >< li > article un < /li >< /ul >< ul >< li > article deux < /li >< /ul > < ul >< li > article trois < /li >< /ul > °°} _p Un post-traitement est nécessaire pour la transformer en une structure HTML correcte : {pre °° < ul > < li > article un < /li > < li > article deux < /li > < li > article trois < /li > < /ul > °°} _p Noter que le parser ne sait pas produire les listes imbriquées en décalage arborescent que connait le HTML ; peut-être un jour ! En compensation, les balises °°_ul et _ol°° peuvent être postfixées par un nombre indiquant le décalage en pixels. _h6 3) commentaires _p Les commentaires, et de façon plus générale toute portion de texte ne devant pas apparaître à l'affichage sont traités (c'est à dire supprimés) avant le passage dans la boucle suivant la syntaxe "{b ••• ... •••}", où le caractère "•" doit être remplacé par "°" ! _h6 4) neutralisation du code _p Il s'agit essentiellement de désactiver les caractères {b °°{ et }°°} encadrant les formes {b °°{first rest}°°}. Pour cela on utilise la syntaxe "{b ••°°{first rest}°°••}", où le caractère "•" doit être remplacé par un "°" ! _p Concernant les expressions mathématiques, cette syntaxe peut être utilisée afin de les afficher telles quelle, mais {u il est des cas où un autre type de neutralisation devra être choisi}. Par exemple, écrire : {pre °° {if true then {mult 3 3} else {mult 4 4} } °°} _p produit le résultat : {b {if true then {mult 3 3} else {mult 4 4} }}, mais au prix de deux calculs, celui de °°{mult 3 3}°° et celui de °°{mult 4 4}°°, le second étant évidemment inutile. _p Il est préférable d'écrire : {pre °° {if true then (mult 3 3) else (mult 4 4) } °°} _p qui produit aussi le résultat : {b {if true then (mult 3 3) else (mult 4 4) } }, mais sans calcul de l'expression inutilisée, la fonction spéciale °°{if boolean then OUI else NON}°° n'activant que le terme correspondant à la valeur du booléen, true ou false. Ce qui peut avoir encore plus d'intérêt si cette expression est dangereuse ou couteuse en temps de calcul. _p Un autre exemple se trouve dans l'utilisation de la fonction °°{define ...}°°, écrire par exemple : {pre °° {define square :x = (mult :x :x)} où le corps de la fonction utilise des parenthèses ! °°} _p ne provoque aucun traitement, a pour effet d'enregistrer sous son nom le corps fonction, et retourne l'accusé de réception : {define square :x = (mult :x :x)}, à la suite duquel on peut utiliser la fonction square appliquée à la valeur 12 : {b °°{square 12}°°} pour produire : {square 12}. _p Note : un autre exemple d'utilisation de la neutralisation peut être vu dans la page [[user_tags]] où l'utilisateur peut définir une balise "customisée" {b °°{postit ...}°°}. _h6 à suivre ... {hr} _h6 liste des balises HTML statiques (intégrées dans le parser) {lib html} _h6 liste des fonctions et variables statiques (intégrées dans le parser) {lib core} _h6 liste des fonctions définies dans la page {lib dyn}