天天看點

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

點選上方   程式設計學習者社群,選擇 建立星标

回複關鍵字 資源  擷取程式設計資源

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

Python作為膠水語言,真的是無所不能。這不,最近又出現一個基于Python3,目标是替代JavaScript的前端開發工具—Brython.

好用嗎?咱今天來試試用它寫一個電腦有多簡單:

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

不過,我們首先要知道它作為Python的用戶端Web程式設計工具,和JS有什麼差別呢?

1.特點

1.可輕易地在頁面中内嵌Python終端進行測試

python 開發工具_一個極具意義的 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 !字樣:

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

原理:

代碼的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>
           

效果:

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

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
           

圖檔版代碼:

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源
python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

然後加上一些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;}
           
python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

最後隻需要做運算符的事件觸發器即可,從下面這行代碼:

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"
           

圖檔版代碼:

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

如果不是=号或C号,則進行字元串拼接。

如果是C号,則清空result。

如果是=号,則需要計算出結果,直接對字元串用eval()函數即可完成目的。

以上就是全部核心代碼的講解。

作者:Ckend

來源:Python實用寶典

往期精選

在知乎上學Python-入門篇在知乎上學爬蟲大家都用什麼背英語單詞Python庫分享

python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源
python 開發工具_一個極具意義的 Python 前端開發工具點選上方   程式設計學習者社群,選擇 建立星标回複關鍵字 資源  擷取程式設計資源

繼續閱讀