利用Brython.js在瀏覽器執行Python程式
Mar 7, 2018
將前一篇文章程式以 Brython.js
在瀏覽器中執行,並改寫部分程式碼,得以與瀏覽器互動。
Brython 是實現運行Python in web的 Javascript 程式庫,並提供HTML5環境(提供了DOM對象和事件接口)。
Tutorial
Step 1 引入Javascript檔案
在自己的網頁靜態檔案中加入Brython.js,或是引入線上CDN服務器內的CDN Brython。
我採取引用線上檔案的方式,引入需要使用到Brython的文章內,加入下列程式碼:
1
<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/3.4.0/www/src/brython.js"></script>
Step 2 建立Brython區塊
為了要在網頁中運行
Pyhton
腳本,必須引用函數brython()
。
所以我們在這裡建立一個html body,並賦予它onload=brython()
,再建立一個div區塊,則裡面內容則放入想要運行的Python腳本。
因為使用
hexo
來進行渲染md檔,所以我們的Python程式碼會被渲染,跳行的部分會被填入 <br>
所以我們得在程式碼頭尾部分加入,HEXO的標籤 % raw % % endraw % ,到時HEXO就會讓標籤內的文字以原始形式呈現。1
2
3
4
5
6
7
8
9
<body onload="brython()">
<div>
<script type="text/python">{% raw %}
### Python code ###
{% endraw %}</script>
</div>
</body>
Step 3 編寫程式
我想透過按鈕來執行我的程式碼,所以得將按鈕綁定到特定的
document
。利用python的裝飾器來加入以下程式碼:1
2
3
def func():
#Your code參照Brython官方文件,讀取檔案時,hexo會在文件名後面加入當下時間,所以我們得先建立偽裝的時間代碼:
1
fake_qs = '?foo=%s' %time.time()
所以開啟文件時,在檔案名後方加入
fake_qs
,就可以讀去到文件,範例如下:1
with open('./../../../../data/2a.txt'+fake_qs) as fh:
最後,在為我的程式配上一顆按鈕,並為它綁定ID到mybutton,按下去瀏覽器就會執行我的代碼:
1
<button id="mybutton" class="next">執行</button>
以上教程是適用於解決課程中問題,其他詳盡寫法請參照官方文件內容。
- 完整程式碼:
1 | <body onload="brython()"> |
- 輸出: