Brython練習—瀏覽器
※本篇在學習Brython的大致使用後，進行實際執行。
這次將把前一篇文章的分組內容利用Brython作呈現，在這一一把步驟試著列出。
在此之前，說明若想要利用Brython，執行的方法：
1.載入腳本Brython.js。
2.寫入 brython()。
3.寫入 <script type=”text/python”>。
讓我們開始實際操作：
步驟一
首先在加入套件及有關Brython的部分前，這是我們Python分組的程式(第二點開始簡寫成#content)：
with open("2a raw.txt") as fh:
rea = fh.readlines()
#print (rea)
no_list = lambda list: int((sum([(len(list[i])) for i in range(len(list))]))/3)
#簡寫一個for迴圈命名為no_list,目的為求出迴圈執行次數(14次)
t = list()#命名空清單t
for k in range(len(rea)):
a = rea[k]
b = a.split()#分割每一行第k位
#print(b)
for i in range(0,len(b),3):
c = b[i:i+3]#每三字串為一次進行迴圈
t.append(c)#加入清單t
for g in range(no_list(t)):#range = 14
print("第" + str(g+1) + "組:" + str(t[g]))列出後，開始從Bython官方網站中，一一找尋能達成我們目的的步驟，首先來到Brython下載倉儲，第一步必須將Brython.js檔案載入程式中進行使用，利用內容中寫道的Zero install !部分，我們在上述程式碼的最上方寫入下列程式碼：
<script type="text/javascript"
src="https://cdn.rawgit.com/brython-dev/brython/3.4.0/www/src/brython.js">
</script>完成第一步。
步驟二
為了在編輯中寫入函數brython()，需要建立<body>，程式碼寫法為：
<body onload="brython()">
#content
</body>步驟二-(2)
接著，還需要利用<div>區塊標籤的功能，讓我們寫的Python程式內容包起來：
<body onload="brython()">
<div id="test">
#content
</div>
</body>步驟二-(3)
而文章一開始說明想利用Brython的第三點，必須在 <script type=”text/python”>中寫入Python代碼或將其連接，所以我們再加入一層<script>：
<body onload="brython()">
<div id="test">
<script type="text/python">
#content
</script>
</div>
</body>完成第二步，大致上的Brython載入使用都已經妥當，並繼續進行剩下步驟。
步驟三
接著我們要賦予它兩個按鈕，分別是執行程式及清除輸出內容。想要在網頁中生成按鈕，參照Brython_Documentatoin_Events，內容介紹使用按鈕的方法：
@btn.bind("click")
def show(ev):
print('ok')在給予一個按鈕功能後，需寫入<button id=”test”>test</button>將它生成。
步驟三-(2)
成功做出按鈕，試著放入我們要執行的程式中，直接用其將#content給上下包住(按鈕取名為but及but2)：
<body onload="brython()">
<div id="one">
<script type="text/python">{% raw %}
from browser import document, html
@document["but1"].bind("click")
def echo(ev):
#content
@document["but2"].bind("click")
def delete(ev):
for row in document['one']:
row.remove()
{% endraw %}</script>
</div>
<button id="but">執行</button><button id="but2">清除</button>
</body>※按鈕二為清除用途，以下將它分割出來提供讀者觀察：
@document["but2"].bind("click")
def delete(ev):
for row in document['one']:
row.remove()第三步按鈕的設置即完成。
步驟四
實際看向近端瀏覽器，我們發現按下按鈕後還是無法執行，這時的問題參考Brython documentation文章，內容說明讀取檔案內容時會因為讀取時間而無法正常輸出，其解為利用函數<open()>將時間設置忽略(給予一個假(fake)的時間)，使用方法為：
fake_qs = '?foo=%s' %time.time()再來給予檔案名稱後方加上假的時間代碼：
with open('./../../../../data/2a.txt'+fake_qs) as fh:接著需要利用import來輸入time以及document以利執行，寫法為：
import time
from browser import document步驟五
最後整理好經過加工的分組程式碼，就可以進行執行的測試，以下為最後的程式：
<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/3.4.0/www/src/brython.js"></script>
<body onload="brython()">
<div id="one">
<script type="text/python">{% raw %}
from browser import document, html
import time
@document["mybutton"].bind("click")
def echo(ev):
fake_qs = '?foo=%s' %time.time()
with open("./../../../../2a.txt"+fake_qs) as fh:
rea = fh.readlines()
#print (rea)
no_list = lambda list: int((sum([(len(list[i])) for i in range(len(list))]))/3)
#簡寫一個for迴圈命名為no_list,目的為求出迴圈執行次數(14次)
t = list()#命名空清單t
for k in range(len(rea)):
a = rea[k]
b = a.split()#分割每一行第k位
#print(b)
for i in range(0,len(b),3):
c = b[i:i+3]#每三字串為一次進行迴圈
t.append(c)#加入清單t
for g in range(no_list(t)):#range = 14
document["one"] <= ("第" + str(g+1) + "組:" + str(t[g])) + html.BR()
@document["mybutton2"].bind("click")
def delete(ev):
for row in document['one']:
row.remove()
{% endraw %}</script>
</div>
<button id="mybutton">執行</button><button id="mybutton2">清除</button>
</body>是不是都學會了呢？
也可以觀看網誌：https://s40523123.github.io/cd2018/2018/03/13/group3-W2/
實際執行網址：https://s40523123.github.io/cd2018/2018/03/24/group3-W5/
Last updated