lambdaway
::
pocket_calculator
1
|
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"; } }; }
lambdaway v.20211111