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="/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"Hello, {document['zone'].value} !")

# bind event 'click' on button to function echo
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, it is necessary to include brython.js and to run the brython() function upon page load (using the onload attribute of the <BODY> tag). While in the development phase, it is possible to pass an argument to the brython() function: 1 to have the error messages displayed to the web browser console, 2 to also get the Javascript code displayed along with the error.

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="/brython.js"></script>
</head>

<body onload="brython()">
<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 onclick event calls and run the echo() function, which was 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 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