> For the complete documentation index, see [llms.txt](https://cda2018.gitbook.io/group3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cda2018.gitbook.io/group3/cheng-mei-zhou-du/week4-6/untitled-1.md). # Brython練習—瀏覽器 ※本篇在學習[Brython](https://www.brython.info/static_doc/en/intro.html)的大致使用後，進行實際執行。 這次將把前一篇文章的分組內容利用Brython作呈現，在這一一把步驟試著列出。\ 在此之前，說明若想要利用Brython，執行的方法：\ 1.載入腳本[Brython.js](https://github.com/brython-dev/brython)。\ 2.寫入 `brython()`。\ 3.寫入 ` ``` 完成第一步。 ### 步驟二 為了在編輯中寫入函數`brython()`，需要建立``，程式碼寫法為： ```python #content ``` #### 步驟二-(2) 接著，還需要利用`
`[區塊標籤](http://www.wibibi.com/info.php?tid=112)的功能，讓我們寫的Python程式內容包起來： ```python
#content
``` #### 步驟二-(3) 而文章一開始說明想利用Brython的第三點，必須在 `
``` 完成第二步，大致上的Brython載入使用都已經妥當，並繼續進行剩下步驟。 ### 步驟三 接著我們要賦予它兩個按鈕，分別是執行程式及清除輸出內容。想要在網頁中生成按鈕，參照[Brython\_Documentatoin\_Events](https://www.brython.info/static_doc/en/events.html)，內容介紹使用按鈕的方法： ```python @btn.bind("click") def show(ev): print('ok') ``` 在給予一個按鈕功能後，需寫入``將它生成。 #### 步驟三-(2) 成功做出按鈕，試著放入我們要執行的程式中，直接用其將#content給上下包住(按鈕取名為but及but2)： ```python
``` ※按鈕二為清除用途，以下將它分割出來提供讀者觀察： ```python @document["but2"].bind("click") def delete(ev): for row in document['one']: row.remove() ``` 第三步按鈕的設置即完成。 ### 步驟四 實際看向近端瀏覽器，我們發現按下按鈕後還是無法執行，這時的問題參考[Brython documentation](https://www.brython.info/static_doc/en/cookbook/read_file.html)文章，內容說明讀取檔案內容時會因為讀取時間而無法正常輸出，其解為利用函數``將時間設置忽略(給予一個假(fake)的時間)，使用方法為： ```python fake_qs = '?foo=%s' %time.time() ``` 再來給予檔案名稱後方加上假的時間代碼： ```python with open('./../../../../data/2a.txt'+fake_qs) as fh: ``` 接著需要利用import來輸入time以及document以利執行，寫法為： ```python import time from browser import document ``` ### 步驟五 最後整理好經過加工的分組程式碼，就可以進行執行的測試，以下為最後的程式： ```python
``` 是不是都學會了呢？ 也可以觀看網誌： 實際執行網址：