Introduction

Installation

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes and methods

Events
Mouse events
Keyboard events
Focus events
Drag events

Query string

Using Javascript objects and libraries

Brython-specific built-in modules

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

javascript
asyncio

Working with Brython

Options of function brython()
Testing and debugging
Deploying an application

Brython for Firefox OS

Introduction
WebApps : design
WebApps : application

Cookbook

Hello world !
Insert content in an element
HTML markup (bold,italic...)
HTML table
Bind and unbind events
Handle options in a SELECT
Drag and drop
Get the content of an element
Read the content of a file
Store objects locally
Example of onmouseover
 

Quote from the W3C Document Object Model specification :

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

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

document['mybutton'].bind('click',echo)
</script>
<input id="zone"><button id="mybutton">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"><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

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