Brython documentation

What is the Document Object Model?

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

Brython's goal is to replace Javascript with Python, as the scripting language for web browsers.

A simple example :

<html>

<head>
<script src="/src/brython.js"></script>
<script src="/src/brython_stdlib.js"></script>
</head>

<body>
<script type="text/python">
from browser import document
from browser.widgets.dialog import InfoDialog

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

# bind event 'click' on button to callback function
document["echo"].bind("click", click)
</script>
<input id="zone">
<button id="echo">click !</button>
</body>

</html>

Try it!

In order for the Python script to be processed, all there is to do is to include brython.js (the core Brython engine) and brython_stdlib.js (the standard library). The actual path (here /src/brython.js) must be adapted depending on the location of the scripts.

If the Python program is large, another option is to write it in a separate file, and to load it using the src attribute of the <script> tag :

<html>

<head>
<script src="/src/brython.js"></script>
<script src="/src/brython_stdlib.js"></script>
</head>

<body>
<script type="text/python" src="test.py"></script>
<input id="zone" autocomplete="off">
<button id="mybutton">click!</button>
</body>

</html>

Please note that in this case the Python script will be loaded through an Ajax call : it must be in the same domain as the HTML page.

The script extension is usually .py. In some cases, servers interpret Ajax calls to this extension as a request to execute the script in the server. In this case you have to change the extension, for instance replace it by .bry as in the following example:

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

In the above two examples of code, when we click on the button, the click event calls and runs the function click() defined in the Python script.

This function gets the value of the INPUT element, through its id (zone). This is accomplished by the syntax document["zone"] : document, defined in module browser, is an object that represents the document currently displayed in the browser. It behaves like a dictionary whose keys are the ids of the elements of the DOM. Hence, in our example, document["zone"] is an object that maps to the INPUT element ; the value property holds, interestingly enough, the value of the object.

In Brython, the output can be accomplished in various ways, including with the function alert() (also defined in browser) which shows a popup window with the text passed as an argument.

In this example, we use a module from the Brython standard distribution, browser.widgets.dialog, with a class InfoDialog that displays a popup window.

Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

`import` implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook