Python作為膠水語言，真的是無所不能。這不，最近又出現一個基于Python3，目标是替代JavaScript的前端開發工具—Brython.
好用嗎?咱今天來試試用它寫一個電腦有多簡單：
不過，我們首先要知道它作為Python的用戶端Web程式設計工具，和JS有什麼差別呢？
1.特點
1.可輕易地在頁面中内嵌Python終端進行測試
2.運作速度接近于CPyhon
3.寫法友善，社群強大，可進行靈活開發
我個人覺得相同的功能，用Python寫起來可能會比JS快。
4.和JS一樣，你不用安裝任何東西就可以開始編寫
下面就用Brython做一些簡單的實驗吧。
2.實驗
1.在頁面上顯示 Hello !：
<html><head><meta charset="utf-8"><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js">script>head><body onload="brython()"><script type="text/python">from browser import documentdocument <= "Hello !"script>body>html>
将這份代碼儲存為index.html，輕按兩下在浏覽器中打開，即可看到Hello !字樣：
原理：
代碼的head中，引入了一個Brython引擎附帶的 brython.min.js 子產品，用于使用Python控制頁面。
而在
可以看到，需要在document中顯示文本，直接輸入：
document <= "你所需要顯示的文本"
即可，後續你将會看到用Brython使用标準化的DOM文法和頁面互動的例子。
2.用HTML标簽來做文本格式化：
如加粗文本：
from browser import document, htmldocument <= html.B("Hello !")
部分加粗、部分不加粗：
from browser import document, htmldocument <= html.B("Hello, ") + "world !"
i 标簽：
document <= html.UL(html.LI(i) for i in range(5))
超連結：
document <= html.A("Python實用寶典", href="https://pythondict.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" )
以上例子如下：
<html><head><meta charset="utf-8"><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js">script>head><body onload="brython()"><script type="text/python">from browser import document, htmldocument <= html.B("Hello !")document <= html.UL(html.LI(i) for i in range(5))document <= html.A("Python實用寶典", href="https://pythondict.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" )script>body>html>
效果：
3.寫一個簡單的電腦
先寫好簡單的圖形架構，用th和tr标簽即可：
from browser import document, htmlcalc = html.TABLE()calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) + html.TH("C", id="clear"))lines = ["789/", "456*", "123-", "0.=+"]calc <= (html.TR(html.TD(x) for x in line) for line in lines)document <= calc
圖檔版代碼:
然後加上一些css就可以把這個簡單的圖形架構變漂亮了：
*{font-family: sans-serif;font-weight: normal;font-size: 1.1em;}td{background-color: #ccc;padding: 10px 30px 10px 30px;border-radius: 0.2em;text-align: center;cursor: default;}#result{border-color: #000;border-width: 1px;border-style: solid;padding: 10px 30px 10px 30px;text-align: right;}
最後隻需要做運算符的事件觸發器即可，從下面這行代碼：
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
可以看出，所有的按鈕都被建立為td标簽，是以我們要獲得所有這些按鈕是否被點選，僅需要：
for button in document.select("td"): button.bind("click", action)
意思是，按鈕被點選後便執行 action 操作，action操作定義如下：
def action(event): """Handles the "click" event on a button of the calculator.""" # The element the user clicked on is the attribute "target" of the # event object element = event.target # The text printed on the button is the element's "text" attribute value = element.text if value not in "=C": # update the result zone if result.text in ["0", "error"]: result.text = value else: result.text = result.text + value elif value == "C": # reset result.text = "0" elif value == "=": # execute the formula in result zone try: result.text = eval(result.text) except: result.text = "error"
圖檔版代碼:
如果不是=号或C号，則進行字元串拼接。
如果是C号，則清空result。
如果是=号，則需要計算出結果，直接對字元串用eval()函數即可完成目的。
這邊是全部核心代碼了，寫起來真的極其友善。
完整源代碼可在Python實用寶典公衆号背景回複 brython電腦 下載下傳。
對了，程式設計時如果有遇到任何問題，都歡迎加群提問，千萬不要嫌麻煩，對于你學習Python上的幫助可能是巨大的：
想加入Python互助群直面大佬?運作一行代碼即可！
我們的文章到此就結束啦，如果你喜歡今天的Python 實戰教程，請持續關注Python實用寶典。
原創不易，希望你能在下面點個贊和在看支援我繼續創作，謝謝！
Python實用寶典 (pythondict.com)
不隻是一個寶典
歡迎關注公衆号：Python實用寶典