lambdaway :: pocket

5 | list | login |load

| |

{center {@ style="transform:rotate(-2deg)"}
{table
 {tr {{disp}} {{logo} λ}}
 {tr {{key} 7} {{key} 8} {{key} 9} {{key} /} {{clear} C}} 
 {tr {{key} 4} {{key} 5} {{key} 6} {{key} *} {{undo} ⟵}}
 {tr {{key} 1} {{key} 2} {{key} 3} {{key} -} {{key} (}}
 {tr {{key} 0} {{key} .} {{eval} =} {{key} +} {{key} )}} 
}
Please, try me!
}

_h1fr une calculette
_h1en a pocket calculator

{center {input {@ id="toggle" type="button" value="french" onclick="toggle(this)"}}}

_h2fr 1) avec '{lambda talk}
_h2en 1) using '{lambda talk}

_fr Le projet '{lambda way} est un environnement de programmation léger, (30kb zippé), construit sur un wiki, '{lambda tank}, et un langage de programmation fonctionnel, '{lambda talk}, fonctionnant dans n'importe quel navigateur. Voir [[lambdaway|?view=start]] pour plus d'infos.
_en The '{lambda way} project is a light, (30kb zipped), framework built on a wiki, '{lambda tank}, and a functional programming language, '{lambda talk}, running in any browser. See [[lambdaway|?view=start]] for more infos.

_fr À titre d'application voici le code produisant la calculette au début de cette page :
_en As an application here is the code producing the pocket calculator at the beginning of this page:

{pre
'{table
 {tr {{disp}}                                {{logo} λ}} 
 {tr {{key} 7} {{key} 8} {{key} 9} {{key} /} {{clear} C}} 
 {tr {{key} 4} {{key} 5} {{key} 6} {{key} *} {{undo} ⟵}}
 {tr {{key} 1} {{key} 2} {{key} 3} {{key} -} {{key} (}}
 {tr {{key} 0} {{key} .} {{eval} =} {{key} +} {{key} )}} 
} 
}

_fr en utilisant ces cinq fonctions '{lambda talk} ( {b sans aucun autre script ajouté} )
_en using these five '{lambda talk} functions ( {b without any other added javascript} )

_frlist 1) pour le champ affichant l'expression saisie et son évaluation
_enlist 1) for the field displaying the entered expression and its evaluation

{pre
'{def disp td {@ id="disp" colspan="3"}}
}

_frlist 2) pour le bouton {b [C]} effaçant le champ d'affichage
_enlist 2) for button {b [C]} clearing the display field

{pre
'{def clear
     td {@ onclick="document.getElementById('disp').innerHTML 
                  = ''"}}
}

_frlist 3) pour le bouton {b [=]} remplaçant l'expression saisie par son évaluation
_enlist 3) for the {b [=]} button replacing the entered expression by its evaluation

{pre
'{def eval
     td {@ onclick="document.getElementById('disp').innerHTML
            = eval( document.getElementById('disp').innerHTML )"}}
}

_frlist 4) pour le bouton {b [⟵]} supprimant la dernière entrée
_enlist 4) for the {b [⟵]} button clearing the last input

{pre
'{def undo 
     td {@ id="undo" 
           onclick="document.getElementById('disp').innerHTML = 
                    document.getElementById('disp').innerHTML.slice(0,-1)"}}
}

_frlist 5) pour tous les autres boutons
_enlist 5) for all other buttons

{pre
'{def key 
     td {@ class="key"
           onclick="document.getElementById('disp').innerHTML
                    += this.innerHTML"}}
}

_fr Essayez la avec {b (1+2)*(3+4)} ou {b 1/0} par exemple.
_en Try it with {b (1+2)*(3+4)} or {b 1/0} for example.

_h2fr 2) avec Brython, en comparaison
_h2en 2) using Brython, as a comparison

_fr Comme il est dit dans la page d'accueil du site [[Brython|https://github.com/brython-dev/brython/wiki]] :
_en As it is declared in [[Brython|https://github.com/brython-dev/brython/wiki]]'s homepage

_fr  " {i HTML5 apporte un nouveau potentiel aux applications web sur toutes les plateformes : PC, smartphones, tablettes, téléviseurs, etc. Pour l'instant, seul Javascript est supporté pour la programmation des clients locaux. L'objectif est de pouvoir utiliser Python à la place de Javascript. } "
_en « {i HTML5 brings a new potential to web applications on all platforms : PCs, smartphones, tablets, TV etc. At the moment, only Javascript is supported for local client programming. The objective is to be able to use Python instead of Javascript. }»

_fr " {i Le {b [[tutoriel|https://www.brython.info/static_tutorial/fr/index.html]]} suivant explique comment développer une application qui s'exécute dans un navigateur en utilisant le langage Python. La construction d'une calculatrice est prise comme exemple. }"
_en « {i The following {b [[tutorial|https://www.brython.info/static_tutorial/en/index.html]]} explains how to develop an application that runs in a browser using the Python language. The construction of a calculator is taken as an example. }»

_fr Voici le code Python
_en Here is the Python code

{pre
from browser import document, html

calc = html.TABLE()
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) + html.TD("C"))
lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)

document <= calc

result = document["result"]

def action(event):
    element = event.target
    value = element.text
    if value not in "=C":
        if result.text in ["0", "erreur"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        result.text = "0"
    elif value == "=":
        try:
            x = eval(result.text)
            result.text = x
        except:
            result.text = "erreur"

for button in document.select("td"):
    button.bind("click", action)
}

_fr dont le résultat équivalent est visible dans le [[tutoriel|https://www.brython.info/static_tutorial/fr/index.html]] de Brython.
_en whose equivalent result is visible in the Brython's [[tutorial|https://www.brython.info/static_tutorial/en/index.html]].

;; _img data/brython_calculatrice.jpg

_h2 conclusion

_fr Quand on voit la machinerie complexe développée dans [[Brython|https://github.com/brython-dev/brython/wiki]] et [[How-Brython-works|https://github.com/brython-dev/brython/wiki/How-Brython-works]], transposant en javascript le code Python avec une syntaxe de plus à digérer, on pourrait encore espérer une approche directe basée sur le moteur javascript qui fonctionne par défaut dans les navigateurs web, et respectant au mieux les syntaxes existantes du DOM, HTML, CSS, ... en légère surimposition des technologies web existantes. 
_en When you see the complex machinery developed in [[Brython|https://github.com/brython-dev/brython/wiki]] and [[How-Brython-works|https://github.com/brython-dev/brython/wiki/How-Brython-works]], transposing into javascript the Python code with one more syntax to digest, we could still hope for a direct approach based on the javascript engine that works by default in web browsers, and respecting as closely as possible the existing syntaxes of the DOM, HTML, CSS, ... as a slight overlay over existing web technologies.

_fr C'est l'obectif du '{lambda way} project.
_en It's the quest of the '{lambda way} project.

_p {i alain marty | 2022/04/24} 
_p [[HN|https://news.ycombinator.com/item?id=42113949]]

{{hide}
{def disp  td {@ id="disp" colspan="4"}}
{def eval  td {@ id="eval"     onclick="document.getElementById('disp').innerHTML
                                 = eval( document.getElementById('disp').innerHTML )"}}
{def clear td {@ id="clear"    onclick="document.getElementById('disp').innerHTML = ''"}}
{def key   td {@ class="key"   onclick="document.getElementById('disp').innerHTML += this.innerHTML"}}
{def undo  td {@ id="undo"     onclick="document.getElementById('disp').innerHTML = document.getElementById('disp').innerHTML.slice(0,-1)"}}
{def logo  td {@               onclick="alert('the lambdaway project')"}}
}

{style 
table {
 width:90%;
 background:#ddd; 
 font-size:2.0em;
 padding:10px;
 font-weight:bold;
} 
td {
 width:20%;
 padding:0%;
 background:#999;
 border-radius:5px;
 text-align:center;
}
#disp {
 background:#fff;
 box-shadow:0 0 8px #000;
 text-align:right; 
 padding: 0 10px
}
.key:hover { background:red; color:white; box-shadow:0 0 8px #000; }
#clear:hover, #eval:hover, #undo:hover { background:blue; color:white; box-shadow:0 0 8px #000; }

pre { box-shadow:0 0 8px #000; padding:10px; }

h1, h2 { text-align:center; margin-left:-20px}
.fr { display:none; }
.en { display:block; }
}

{macro _fr ([^\n]+)\n to {p {@ class="fr"}€1}} 
{macro _en ([^\n]+)\n to {p {@ class="en"}€1}} 
{macro _frlist ([^\n]+)\n to {ul {@ class="fr"}€1}}
{macro _enlist ([^\n]+)\n to {ul {@ class="en"}€1}}

{macro _h1fr ([^\n]+)\n to {h1 {@ class="fr"}€1}}
{macro _h1en ([^\n]+)\n to {h1 {@ class="en"}€1}}
{macro _h2fr ([^\n]+)\n to {h2 {@ class="fr"}€1}}
{macro _h2en ([^\n]+)\n to {h2 {@ class="en"}€1}}

{script 
var toggle = function(obj) {
  var fr = document.getElementsByClassName("fr");
  var en = document.getElementsByClassName("en");
  if (obj.value==="english") {
    for (var i=0; i< fr.length; i++) fr[i].style.display="none";
    for (var i=0; i< en.length; i++) en[i].style.display="block";
    obj.value = "français";
  } else {
    for (var i=0; i< fr.length; i++) fr[i].style.display="block";
    for (var i=0; i< en.length; i++) en[i].style.display="none"; 
    obj.value = "english";   
  }
};
}