[

Brython

中文网 ](../index.html)

本教程说明了如何使用Python编程语言开发在浏览器中运行的应用程序。我们将以编写计算器为例。 您将需要一个文本编辑器，当然还需要一个可以访问互联网的浏览器。

本教程的内容假定您至少具有HTML（通用页面结构，最常用的标签），样式表（CSS）和Python语言的基本知识。 在文本编辑器中，创建具有以下内容的HTML页面：

&lt;!doctype html&gt; <html> <head> <meta charset="utf-8"> </head> <body onload="brython()"> </body> </html> 在一个空目录中，将此页面另存为index.html。要在浏览器中阅读它，您有两个选择：

1)使用“文件/打开”菜单：这是最简单的解决方案。它为高级使用带来了一些限制，但在本教程中效果很好

2)启动一个Web服务器：例如，如果您的机器上有python.org提供的Python解释器，则在文件目录中运行python -m http.server，然后在浏览器地址栏中输入localhost:8000/index.html

当您打开页面时，应该看到消息“ Hello！”。打印在浏览器窗口上。

页面结构

让我们看一下页面内容。在head区域中，我们加载脚本brython.js：这是Brython引擎，该程序将查找并执行页面中包含的Python脚本。在本例中，我们从CDN获得它，因此PC上没有任何安装。注意版本号（brython@3.8.9）：可以为每个新的Brython版本进行更新。

body标记具有onload ="brython()"属性。这意味着页面完成加载后，浏览器必须调用函数brython()，该函数在页面加载的Brython引擎中定义。该函数搜索所有具有type ="text/python"属性的script标记并执行它们。

我们的index.html页面嵌入了以下脚本：

from browser import document document &lt;= “Hello !” 这是一个标准的Python程序，首先导入模块浏览器（在本例中为Brython引擎brython.js随附的模块）。该模块具有一个属性document, document指的是浏览器窗口中显示的内容。

要将文本添加到document中-也就是在浏览器中显示文本-Brython使用的语法是

document &lt;= “Hello !” 您可以将<=符号视为左箭头：document“接收”一个新元素，此处为字符串“ Hello！”。稍后您将看到，总是可以使用标准化的DOM语法与页面进行交互，Brython提供了一些捷径来使代码不再那么冗长。

内容标签化

HTML标签允许文本格式设置，例如以粗体字母（B标签），斜体（I标签）等形式书写。

对于Brython，这些标签可利用browser包的html模块中定义的功能来实现。使用方法如下：

from browser import document, html document &lt;= html.B(“Hello !”) 标签可以嵌套： document &lt;= html.B(html.I(“Hello !”)) 标签和字符串也可以相互添加： document &lt;= html.B(“Hello, “) + “world !” 标签函数的第一个参数可以是字符串，数字，另一个标签。它也可以是Python中“可迭代的”（list，comprehension，generator）：在这种情况下，将迭代中生成的所有元素都添加到标签内： document &lt;= html.UL(html.LI(i) for i in range(5)) 标签属性作为关键字参数传递给函数： html.A(“Brython”, href=”<a rel="nofollow" href="http://brython.info">http://brython.info</a>“)

绘制计算器

我们可以用HTML表格绘制一个计算器。

第一行由结果区域组成，后跟一个重置按钮。接下来的3行是计算器的数字和运算符。

from browser import document, html calc = html.TABLE() calc &lt;= html.TR(html.TH(html.DIV(“0”, id=”result”), colspan=3) + html.TH(“C”, id=”clear”)) lines = [“789/“, “456*”, “123-“, “0.=+”] calc &lt;= (html.TR(html.TD(x) for x in line) for line in lines) document &lt;= calc 请注意使用Python生成器来减小程序大小，同时保持可读性。

让我们来添加样式，以使计算器看起来更好：

事件处理

下一步是在用户按下计算器按键时触发动作：

1）数字和运算：在结果区域中打印数字或运算

2）=符号：执行操作并打印结果，如果输入无效，则显示错误消息

3）C符号：重置结果区域

要处理打印在页面中的元素，程序首先需要获得对它们的引用。这些按钮已被创建为标签。为了获得所有这些标签的引用，语法是

document.select（”td”） 传递给select()方法的参数是CSS选择器。最常用的是：标记名("td")，元素的id属性("#result")或其属性"class"(".classname")。select()的结果始终是元素列表。

页面元素上可能发生的事件具有标准化名称：当用户单击按钮时，将触发名为“cick”的事件。在程序中，此事件会激发功能的执行。元素，事件和功能之间的关联由语法定义

element.bind(“click”, action) 对于计算器，我们可以通过以下方式将相同功能与所有按钮上的“ click”事件相关联： for button in document.select(“td”): button.bind(“click”, action) 为了符合Python语法，必须在程序中的某个位置定义action函数。这样的“回调”函数采用单个参数，即表示事件的对象。

完成编码

这是实现一个简易计算器的代码。最重要的部分是函数action(event)。 

  1. <span class="kwd">from</span><span class="pln"> browser </span><span class="kwd">import</span><span class="pln"> document</span><span class="pun">,</span><span class="pln"> html</span>
  3. <span class="com"># Construction de la calculatrice</span>
  4. <span class="pln">calc </span><span class="pun">=</span><span class="pln"> html</span><span class="pun">.</span><span class="pln">TABLE</span><span class="pun">()</span>
  5. <span class="pln">calc </span><span class="pun">&lt;=</span><span class="pln"> html</span><span class="pun">.</span><span class="pln">TR</span><span class="pun">(</span><span class="pln">html</span><span class="pun">.</span><span class="pln">TH</span><span class="pun">(</span><span class="pln">html</span><span class="pun">.</span><span class="pln">DIV</span><span class="pun">(</span><span class="str">"0"</span><span class="pun">,</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"result"</span><span class="pun">),</span><span class="pln"> colspan</span><span class="pun">=</span><span class="lit">3</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span>
  6. <span class="pln">                html</span><span class="pun">.</span><span class="pln">TD</span><span class="pun">(</span><span class="str">"C"</span><span class="pun">))</span>
  7. <span class="pln">lines </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">"789/"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"456*"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"123-"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"0.=+"</span><span class="pun">]</span>
  9. <span class="pln">calc </span><span class="pun">&lt;=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">html</span><span class="pun">.</span><span class="pln">TR</span><span class="pun">(</span><span class="pln">html</span><span class="pun">.</span><span class="pln">TD</span><span class="pun">(</span><span class="pln">x</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> x </span><span class="kwd">in</span><span class="pln"> line</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> line </span><span class="kwd">in</span><span class="pln"> lines</span><span class="pun">)</span>
  11. <span class="pln">document </span><span class="pun">&lt;=</span><span class="pln"> calc</span>
  13. <span class="pln">result </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">[</span><span class="str">"result"</span><span class="pun">]</span><span class="pln"> </span><span class="com"># direct acces to an element by its id</span>
  15. <span class="kwd">def</span><span class="pln"> action</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">):</span>
  16. <span class="pln">    </span><span class="str">"""Handles the "</span><span class="pln">click</span><span class="str">" event on a button of the calculator."""</span>
  17. <span class="pln">    </span><span class="com"># The element the user clicked on is the attribute "target" of the</span>
  18. <span class="pln">    </span><span class="com"># event object</span>
  19. <span class="pln">    element </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span>
  20. <span class="pln">    </span><span class="com"># The text printed on the button is the element's "text" attribute</span>
  21. <span class="pln">    value </span><span class="pun">=</span><span class="pln"> element</span><span class="pun">.</span><span class="pln">text</span>
  22. <span class="pln">    </span><span class="kwd">if</span><span class="pln"> value </span><span class="kwd">not</span><span class="pln"> </span><span class="kwd">in</span><span class="pln"> </span><span class="str">"=C"</span><span class="pun">:</span>
  23. <span class="pln">        </span><span class="com"># update the result zone</span>
  24. <span class="pln">        </span><span class="kwd">if</span><span class="pln"> result</span><span class="pun">.</span><span class="pln">text </span><span class="kwd">in</span><span class="pln"> </span><span class="pun">[</span><span class="str">"0"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"error"</span><span class="pun">]:</span>
  25. <span class="pln">            result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> value</span>
  26. <span class="pln">        </span><span class="kwd">else</span><span class="pun">:</span>
  27. <span class="pln">            result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">+</span><span class="pln"> value</span>
  28. <span class="pln">    </span><span class="kwd">elif</span><span class="pln"> value </span><span class="pun">==</span><span class="pln"> </span><span class="str">"C"</span><span class="pun">:</span>
  29. <span class="pln">        </span><span class="com"># reset</span>
  30. <span class="pln">        result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> </span><span class="str">"0"</span>
  31. <span class="pln">    </span><span class="kwd">elif</span><span class="pln"> value </span><span class="pun">==</span><span class="pln"> </span><span class="str">"="</span><span class="pun">:</span>
  32. <span class="pln">        </span><span class="com"># execute the formula in result zone</span>
  33. <span class="pln">        </span><span class="kwd">try</span><span class="pun">:</span>
  34. <span class="pln">            result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">eval</span><span class="pun">(</span><span class="pln">result</span><span class="pun">.</span><span class="pln">text</span><span class="pun">)</span>
  35. <span class="pln">        </span><span class="kwd">except</span><span class="pun">:</span>
  36. <span class="pln">            result</span><span class="pun">.</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> </span><span class="str">"error"</span>
  38. <span class="com"># Associate function action() to the event "click" on all buttons</span>
  39. <span class="kwd">for</span><span class="pln"> button </span><span class="kwd">in</span><span class="pln"> document</span><span class="pun">.</span><span class="kwd">select</span><span class="pun">(</span><span class="str">"td"</span><span class="pun">):</span>
  40. <span class="pln">    button</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">)</span>

结果