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 !部分,我們在上述程式碼的最上方寫入下列程式碼:

完成第一步。

步驟二

為了在編輯中寫入函數brython(),需要建立<body>,程式碼寫法為:

步驟二-(2)

接著,還需要利用<div>區塊標籤的功能,讓我們寫的Python程式內容包起來:

步驟二-(3)

而文章一開始說明想利用Brython的第三點,必須在 <script type=”text/python”>中寫入Python代碼或將其連接,所以我們再加入一層<script>

完成第二步,大致上的Brython載入使用都已經妥當,並繼續進行剩下步驟。

步驟三

接著我們要賦予它兩個按鈕,分別是執行程式及清除輸出內容。想要在網頁中生成按鈕,參照Brython_Documentatoin_Events,內容介紹使用按鈕的方法:

在給予一個按鈕功能後,需寫入<button id=”test”>test</button>將它生成。

步驟三-(2)

成功做出按鈕,試著放入我們要執行的程式中,直接用其將#content給上下包住(按鈕取名為but及but2):

※按鈕二為清除用途,以下將它分割出來提供讀者觀察:

第三步按鈕的設置即完成。

步驟四

實際看向近端瀏覽器,我們發現按下按鈕後還是無法執行,這時的問題參考Brython documentation文章,內容說明讀取檔案內容時會因為讀取時間而無法正常輸出,其解為利用函數<open()>將時間設置忽略(給予一個假(fake)的時間),使用方法為:

再來給予檔案名稱後方加上假的時間代碼:

接著需要利用import來輸入time以及document以利執行,寫法為:

步驟五

最後整理好經過加工的分組程式碼,就可以進行執行的測試,以下為最後的程式:

是不是都學會了呢?

也可以觀看網誌:https://s40523123.github.io/cd2018/2018/03/13/group3-W2/

實際執行網址:https://s40523123.github.io/cd2018/2018/03/24/group3-W5/

Last updated