Seuraavaksi tuomme Brython-paketit omien sivujen käyttöön. Samalla otamme käyttöön stdlib-paketin, jonka avulla saamme käyttöön esimerkiksi satunnaisluvut.
GitHubin sivuilta:
https://github.com/brython-dev/brython/releases
löytyy Brythonin lataussivusto.
Edellä kuva lataussivustosta, mistä voidaan valita uusin versio Brythonista. (tätä kirjoittaessa versionumero on 3.8.8)
Valitse tiedosto Brython-3.8.8.zip (tai uudempi versio).
Tallenna zip-tiedosto tyhjään kansioon (kansion voi nimetä vaikkapa Brython-nimellä). Luo kansioon myös alakansio images.
Pura pakattu kansio Brython-3.8.8.zip .
Etsi puretusta kansiosa tiedostot brython.js ja brython_stdlib.js
ja kopioi ne.
Liitä kopioidut tiedostot images-kansion viereen ja deletoi turhat kansiot ja tiedostot, jolloin kansio näyttää alla olevalta.
Kansioon voidaan tämän jälkeen sijoittaa mikä tahansa html-tiedosto, mikä käyttää hyväksi Python-koodia.
Edellisen kappaleen viimeisen esimerkin sivukoodi (kuvassa mycode.html) olisi ko. kansioon sijoitettuna:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="brython.js"></script>
<script src="brython_stdlib.js"></script>
<title>Brython</title>
<script type="text/python">
from browser import document
def muutaKuva(event):
kohde = document["suurikuva"] #haetaan vaihdettava kuva
tapahtumaelementti = event.currentTarget #hakee kuvan, jossa tapahtuma tapahtui
kohde.src = tapahtumaelementti.src #vaihtaa kohteen kuvan src-arvon
document['pienikuva1'].bind("mouseenter", muutaKuva) #liitetään tapahtumafunktio
document['pienikuva2'].bind("mouseenter", muutaKuva) #kaikkiin pikkukuviin
</script>
</head>
<body onload="brython({debug:1,indexedDB: false})">
<img id="suurikuva" src="images/kuva1.jpg" height="300px" />
<br />
<img id="pienikuva1" src="images/kuva1.jpg" height="50px" />
<img id="pienikuva2" src="images/kuva2.jpg" height="50px" />
</body>
</html>
Tehtävä:
Rakenna Brython sivusto ja kokeile sen toimivuutta ensin yhdellä nettisivulla, jonne on sijoitettu Python-koodia.