Brython, A Python 3 implementation for client-side web programming

2. 6. 2013 16:03:48

http://www.brython.info/index.html

Without a doubt, you've seen a clock like this in demos of HTML5
However, right click and view the source of this page...

It is not Javascript code! Intead, you will find Python code in a script of type "text/python"

Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web console), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events

The gallery highlights a few of the possibilities, from creating simple document elements to drag and drop and 3D navigation

http://www.brython.info/doc/en/index.html

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"> def echo(): alert(doc.value) </script> <input id="zone"><button onclick="echo()">click !</button> </body> </html>
Try it!

click !

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 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"><button onclick="echo()">clic !</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

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 doc : doc is a keyword in Brython, which behaves just like a dictionary whose keys are the ids of the elements of the DOM. Hence, in our example, doc 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 alert() built-in function which shows a popup window with the text passed as an argument