Demi kepuasan pembaca kami, pekerjaan kami terus memperbarui buku Python . Tetapi pencarian berlanjut ke arah ini - dan hari ini kami ingin menyebutkan Brython - Python untuk browser. Artikelnya pendek, sedikit ceria dan detektif, kami berusaha mempertahankan gaya penulisnya.
Artikel ini memberikan pengantar singkat untuk bekerja dengan Brython , implementasi Python untuk pengembangan front-end (browser).
Seluruh proyek diposting di sini .
pengantar
Iri dengan kesuksesan programmer JavaScript, konspirator python bertemu secara rahasia untuk membahas masa depan Python di dunia apokaliptik ini. JavaScript ada di mana-mana, memakan pembersihan Python. Dipersenjatai dengan Node.js , JavaScript telah menginvasi wilayah Python, dan telah kehilangan peran dominannya sebagai bahasa sisi server yang dicintai di mana ia sebelumnya menyaingi Ruby ( ingat hari-hari itu ?). Kemudian saatnya untuk terjun ke jantung wilayah JavaScript: browser.
Jangan lupakan cerita Anda (dan ingat masa depan)
Dilema ini tidak terbatas pada para konspirator yang disebutkan di atas. Ada ksatria jubah dan belati lainnya, penulis Transcrypt . Dia memutuskan untuk menulis kompiler untuk Python yang mengkompilasi kode langsung ke JavaScript. Sebagai peracun yang baik, dia tidak meninggalkan jejak Python di belakangnya. Itu tampak menjanjikan.
Yang lain lebih suka memanfaatkan pelajaran sejarah. Berimigrasi saja dengan seluruh keluarga. Setidaknya begitulah pemikiran pencipta Pyodide . Mereka akan membuat enklave di sisi JavaScript dengan interpreter Python lengkap yang dapat mengeksekusi kode Python. Karenanya, kode Python apa pun dapat dijalankan di sana , termasuk sebagian besar tumpukannya untuk ilmu data, di mana ada binding ke bahasa C (misalnya, Numpy, Pandas).
Ini juga terlihat sangat menjanjikan. Tetapi tes malas awal yang dilakukan oleh penulis Pyodide menunjukkan bahwa halaman dimuat agak lambat pada awalnya.
Kemudian para konspirator melakukannya dengan semangat konspirator yang baik: mereka membuat kompiler berbeda untuk mengubah Python menjadi JavaScript, tetapi kali ini mengkompilasi ke JavaScript saat pemuatan halaman (tidak seperti Transcrypt, yang mengkompilasi kode ke JavaScript sebelumnya). Persaudaraan Brython dengan demikian dibentuk. Satu ular untuk menguasai mereka semua.
Halo Dunia
Mari kita menulis 'Hello World' tradisional
Dan inilah polisi Brython (saya sedang berbicara tentang kompiler).
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
<body onload="brython()">
...
</body>
Pada tag yang
body
ditunjukkan di atas, kami menulis kode di Brython:
<script type="text/python">
from browser import document
document <= "Hello World"
</script>
Kami hanya menambahkan Hello World ke elemen
document
. Hmm. Sangat mudah.
Secara lengkap - di bawah.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document
document <= "Hello World"
</script>
</body>
</html>
Dalam hal ini, halaman tersebut hanya akan menampilkan ucapan “Halo Dunia”.
Kalkulator
Mari kita menulis kalkulator di Brython. Semua kodenya diposting di sini .
Ya, Anda dapat menebaknya, kami membutuhkan meja. Ayo lakukan.
from browser import document, html
calc = html.TABLE()
Mari tambahkan baris pertama saja. Artinya, kami akan menampilkan bidang untuk angka (sebut saja
result
) dan kunci C.
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +
html.TD("C"))
Ya, saya juga tidak terlalu yakin tentang sintaks ini
<=
. Tapi, menilai sendiri, perpustakaan yang keren, jadi saya setuju.
Sekarang mari tambahkan keyboard
lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
Terakhir, tambahkan
calc
ke
document
.
document <= calc
Sejauh ini baik-baik saja. Bagaimana kita membuat semua ini bekerja? Pertama, Anda perlu mengambil referensi ke elemen hasil untuk memanipulasinya saat tombol ditekan.
result = document["result"] # id
Selanjutnya, kita perlu memperbarui
result
setiap kali ada elemen di keyboard yang ditekan. Untuk ini, mari kita buat pengendali event. Mari kita percayai pengembang Brython dan menemukan kode ini berfungsi. Perhatikan manipulasi
result
tergantung pada tombol mana yang Anda tekan.
def action(event):
""" "click" ."""
# , , "target"
# event
element = event.target
# , , "text"
value = element.text
if value not in "=C":
#
if result.text in ["0", "error"]:
result.text = value
else:
result.text = result.text + value
elif value == "C":
#
result.text = "0"
elif value == "=":
#
try:
result.text = eval(result.text)
except:
result.text = "error"
Terakhir, ikat event handler di atas ke sebuah event
click
di semua tombol.
for button in document.select("td"):
button.bind("click", action)
Anda lihat betapa sederhananya itu. Tapi serius, Brython menganggap saya sebagai mahakarya teknik dan mungkin ilustrasi terbaik kecintaan saya pada bahasa Python. Harap dukung pengembang dan beri mereka tanda bintang di repositori Github!