Brython的學習簡介

Posted on

※將Brython官方網站中所提到的部分操作學習後，在此做簡單介紹。

1.Introduction
由W3C Document Object Model specification文章中寫到：
何謂DOM(Document Object Model)?
DOM是一個平台、連接口，它能允許程式或腳本做出動態存取，或更新訊息，以及構成文件的各種樣式。
而Brython所要做到的即是將Javascript替換，以Python在瀏覽器中執行腳本。

以下例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body onload="brython()">
<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/3.4.0/www/src/brython.js"></script>
<script src="/brython.js"></script>
<div ="zone">
<script type="text/python">{% raw %}
from browser import document, alert

# bind event 'click' on button to function echo
@document["mybutton"].bind("click")
def echo(ev):
    alert(document["zone"].value)

{% endraw %}</script>
</div>
</body>
<input id="zone">
<button id="mybutton">click !</button>

實際執行，輸入訊息後跳出警告：