Introduction

Installation

Questions fréquemment posées

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

Distribution standard

Implémentation de import

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Objets et librairies Javascript

Modules intégrés propres à Brython

browser
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.websocket
browser.webworker

javascript

asyncio

Travailler avec Brython

Options de la fonction brython()
Test, débogage et profilage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

Citation de la spécification du Document Object Model du W3C :

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, alert

# associe une fonction à l'événement "click" sur le bouton

def click(ev):
    alert(document["zone"].value)

document["echo"].bind("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.

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 est réalisé par la fonction alert() définie dans le même module browser, qui affiche une fenêtre avec le texte passé en paramètre.