<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Python 竟然也可以寫網(wǎng)頁(yè)前端了!

          共 706字,需瀏覽 2分鐘

           ·

          2020-07-28 15:56


          Python作為膠水語(yǔ)言,真的是無(wú)所不能。這不,最近又出現(xiàn)一個(gè)基于 Python3,目標(biāo)是替代 JavaScript 的前端開(kāi)發(fā)工具 — Brython

          好用嗎?咱今天來(lái)試試用它寫一個(gè)計(jì)算器:


          不過(guò),我們首先要知道它作為 Python 的客戶端 Web 編程工具,和 JS 有什么區(qū)別呢?

          1. 特點(diǎn)

          1. 可輕易地在頁(yè)面中內(nèi)嵌 Python 終端進(jìn)行測(cè)試

          2. 運(yùn)行速度接近于 CPyhon

          3. 寫法方便,社區(qū)強(qiáng)大,可進(jìn)行敏捷開(kāi)發(fā)

          如果 Python 和 JS 你都寫過(guò),那大概率會(huì)覺(jué)得相同的功能,用 Python 寫起來(lái)比 JS 更方便。

          4.和 JS 一樣,你不用安裝任何東西就可以開(kāi)始編寫

          下面就用Brython做一些簡(jiǎn)單的實(shí)驗(yàn)吧。

          2. 實(shí)驗(yàn)

          0. 安裝

          與通常的 Python 庫(kù)一樣,可以通過(guò) pip install brython 進(jìn)行安裝。

          然后在一個(gè)空目錄下執(zhí)行:

          python -m brython --install
          1. 在頁(yè)面上顯示?Hello !


          將這份代碼保存為index.html,雙擊在瀏覽器中打開(kāi),即可看到Hello !字樣:

          原理:

          代碼的 head 中,引入了一個(gè) Brython 引擎附帶的 brython.min.js 模塊,用于使用 Python 控制頁(yè)面。

          而在 之間就是相應(yīng)的 Python 代碼。

          可以看到,想在 document 中顯示文本,只需要直接輸入:

          document <= "你所需要顯示的文本"

          后續(xù)你將會(huì)看到用 Brython 使用標(biāo)準(zhǔn)化的 DOM 語(yǔ)法和頁(yè)面交互的例子。

          2. 用 HTML 標(biāo)簽來(lái)做文本格式化:

          如果要加粗文本:

          from browser import document, htmldocument <= html.B("Hello !")

          部分加粗、部分不加粗:

          from browser import document, htmldocument <= html.B("Hello, ") + "world !"
          i 標(biāo)簽:
          document?<=?html.UL(html.LI(i)?for?i?in?range(5))
          超鏈接:
          document?<=?html.A("Python實(shí)用寶典",?)
          以上例子如下:
          <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實(shí)用寶典", href="https://pythondict.com")script>body>html>
          效果:

          3. 寫一個(gè)簡(jiǎn)單的計(jì)算器

          先寫好簡(jiǎn)單的圖形架構(gòu),用th和tr標(biāo)簽即可:

          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 樣式就可以把這個(gè)簡(jiǎn)單的圖形架構(gòu)變漂亮了:

          最后只需要做運(yùn)算符的事件觸發(fā)器即可,從下面這行代碼:

          calc?<=?(html.TR(html.TD(x)?for?x?in?line)?for?line?in?lines)
          可以看出,所有的按鈕都被創(chuàng)建為 td 標(biāo)簽,因此我們要獲得所有這些按鈕是否被點(diǎn)擊,僅需要:
          for?button?in?document.select("td"):    button.bind("click", action)
          意思是,按鈕被點(diǎn)擊后便執(zhí)行 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"


          如果不是 = 號(hào)或 C 號(hào),則進(jìn)行?字符串拼接

          如果是 C 號(hào),則清空 result。

          如果是 = 號(hào),則需要計(jì)算出結(jié)果,直接對(duì)字符串用?eval() 函數(shù)?即可完成目的。

          這邊是全部核心代碼了,寫起來(lái)真的極其方便。

          你可以訪問(wèn)如下地址體驗(yàn)這個(gè) Python 寫的計(jì)算器:

          https://pythondict.com/calculator.html

          完整源碼:
          https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ?

          提取碼:v36f


          作者:Ckend?

          來(lái)源:Python實(shí)用寶典





          _往期文章推薦_
          Python小白如何寫一個(gè)計(jì)算器




          瀏覽 72
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  俺去也俺来啦 | 在线喷水 | 国产成人精品一区二区三区四区五区 | 爱情岛论坛成人自拍 | 狼友视频官网免费 |