Documentation Brython

Qu'est-ce que le Document Object Model?

Le Document Object Model est une interface indépendante d'une plateforme ou d'un langage qui permet aux programmes et aux scripts d'accéder dynamiquement au contenu, à la structure et au style des documents, et de les mettre à jour

L'objectif de Brython est d'utiliser Python comme langage de script pour les navigateurs web, à la place de Javascript

Un exemple simple :

<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document
from browser.widgets.dialog import InfoDialog

def click(ev):
    InfoDialog("Hello", f"Bonjour, {document['zone'].value} !")

# associe une fonction à l'événement "click" sur le bouton
document["echo"].bind("click", click)
</script>
<input id="zone">
<button id="echo">click !</button>
</body>
</html>

essayez :

Pour faire fonctionner les scripts Python, il suffit d'importer le script brython.js, et d'exécuter la fonction brython() quand la page est chargée (attribut onload de la balise <BODY>). En phase de développement, on peut passer un argument à cette fonction : 1 pour avoir les messages d'erreur dans la console du navigateur, 2 pour avoir en plus le code Javascript généré.

Si le programme Python est volumineux, une autre possibilité est de l'écrire dans un fichier séparé, et de le charger dans la page en utilisant l'attribut src de la balise <script> :

<html>
<head>
<script src="/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python" src="test.py"></script>
<input id="zone"><button onclick="echo()">clic !</button>
</body>
</html>

Attention, dans ce deuxième cas le script Python est récupéré par un appel Ajax : il doit donc se trouver dans le même domaine que la page HTML.

Ce script a normalement l'extension .py. Dans certains cas les serveurs interprètent un appel Ajax vers cette extension comme une demande d'exécuter le script sur le serveur. Dans ce cas il faut changer l'extension, par exemple la remplacer par .bry comme dans le code suivant:

<script type="text/python" src="test.bry"></script>

Quand on clique sur le bouton, la fonction echo() définie dans le script Python est exécutée. Cette fonction récupère la valeur de l'élément INPUT par son id zone, en utilisant la syntaxe document["zone"] : document est un attribut du module intégré browser, il se comporte comme un dictionnaire indexé par les id des éléments DOM. document["zone"] est un objet correspondant à l'élément INPUT ; on accède à la valeur par l'attribut value.

L'affichage peut être réalisé de différentes façons, notamment par la fonction alert() définie dans le même module browser, qui affiche une fenêtre avec le texte passé en paramètre.

Dans cet exemple, nous utilisons un module de la distribution standard de Brython, browser.widgets.dialog, avec une classe InfoDialog qui affiche une boite de dialogue.

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de `import`

Packages Brython

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes