This page shows a few examples of how you can interact with a web page using Python as the scripting language : create new elements, access and modify existing elements, create graphics, animations, send Ajax requests, etc.
The scripts use objects - elements shown in the page, styles applied to these elements, events, etc. - that are described in the Document Object Model (DOM), defined by the W3C. The reference used in this page is the the Mozilla Developer Network (MDN) documentation.
Although the DOM is by nature language-independant, most examples in the MDN documentation are written with Javascript, not (yet ;-) in Python. The translation is usually straightforward, since Brython supports all the DOM types and their attributes and methods.
In some cases, Brython adds a more Pythonic syntax : you will discover them by browsing the examples.
browser is a Brython-specific module that defines the objects used to interact with the page.
document is an object representing the HTML document ; document[element_id] is the element with attribute id equal to element_id. In this example, document["button0"] is a reference to the button you click on.
bind() is a method that defines the function to call when an event occurs on the element. When the user clicks on the element, this event is called "click". The last line means : when the user clicks on the element (here, the button with the text "display an alert box"), call the function hello().
The function takes one argument, an object representing the event.
alert is used to display small popup windows.
textContent is an attribute of Node instances ; it is used to get or set an element's text content.
Brython supports all the DOM methods and attributes ; for text content it provides a shortcut, text, so that the function body can also be written :
def change(event):
document["zone1"].text = "New Content"
style, which itself has (among many others) the attributes color (text color), backgroundColor (background color), fontWeigth ("bold" or "normal"), fontSize (size of the letters, in pixels), etc.
Look here for a reference on CSS.
Note that the attribute names that have a hyphen is CSS are written in camelCase in Python code : for instance, to set the CSS attribute background-color, the syntax is style.backgroundColor
classList with the values set in the attribute class of the element.
It is an instance of the class DOMTokenList, which supports the methods add() and remove().
display is another attribute of style. Setting it to "none" hides the element.
document.createElement(), createTextNode()) and append them to other elements or to the document (Node.appendChild()).
Note that on the last line, we use the standard DOM method EventTarget.addEventListener() : the method bind() used in the other examples is Brython-specific.
browser.html. It defines classes with the name of all the valid HTML tags in uppercase ; html.B("message") creates the element <B>message<B>
To include an element inside another one, Brython uses the operator <= : think of it as a left arrow, not as "inferior or equal". The use of an operator is more concise and avoids having to use a function call.
nextSibling is null so the new element is inserted at
the end.
Note that the style attribute is passed as a dictionary ; also note that, since class is a Python keyword, it can't be used as a key, so we use Class instead (tag attributes are case-insensitive).
To build a table, we use the HTML tags
TABLE, TR, TH and TD.
The first attribute passed to the classes defined in browser.html is either a string, another instance of a class, or an iterator on such elements.
Here we use a Python generator expression to include several headers (TH) in the first row (TR) of the table, and the same for the table cells (TD) in the next rows.
clear() is a method that removes all the element contents.
When the user changes the selected option in the menu, the event "change" is triggered on the SELECT box. The function show(event) is called ; event.target is the element itself.
A SELECT element has an attribute selectedIndex, the rank of the selected item in the list of options, available by its attribute options. The OPTION element itself has an attribute value, here the option text.
math, the same as in the Python standard distribution.
Canvas is an API for drawing geometric forms in the page. The examples on the MDN pages are written in Javascript but can be easily translated for Brython.
document[element_id]. Here, document["zone13"] is the bordered box at the right of the button.
The method get(selector=css_selector) provides a way to select elements based on the CSS selector syntax. Passing the name of a tag returns a list of all the elements with this tag ; passing .zone returns a list of all the elements whose attribute class is set to "zone".
transform is another attribute of style that can make changes to the element, including a rotation by a specified angle.
requestAnimationFrame and cancelAnimationFrame.
When the user clicks on the button, the animation is started by calling the function animloop with an arbitrary argument. window.requestAnimationFrame, called with the function itself as argument, returns a reference to the animation. The drawing function, render() is called ; the loop is then executed repeatedly under the control of the animation loop.
In render(), to put the element at a specific location, we use another transform function, translate(x, y). The moving element bounces, and its shape changes, when its position reaches the box borders.
If the user clicks the button again, calling window.cancelAnimationFrame on the animation object stops the animation.
The mouse position is available by the attributes x, y of the event object.
The position of an element can be changed by defining its attributes left and top.
Notice the use of method elt.closest(tagName) to get the first DOM element with the specified tag name above elt.
The event "change" on the INPUT field is triggered when the field loses focus, if the value has been modified.
browser.ajax allows sending Ajax calls, ie sending HTTP requests to a URL and handle the reply without having to reload the page.
Here we use a public API that gives the current position of the International Space Station. The callback function complete() is called when the Ajax call has completed ; its argument has an attribute responseText, the response sent by the server. In this case, the API tells us that it's a JSON string. We decode it with the module json of the standard distribution.
print() writes message in the browser console window (to open it, do Ctrl+Maj+K on Firefox, Ctrl+Maj+J on Chrome, F12 on IE, etc).
Like in Python, the output can be reset by setting sys.stdout to an object with a method write().
time and datetime of the standard distribution, but it can also interact with the objects defined by Javascript.
To use such objects, import the object window from module browser : it is used to get a reference to all the objects defined in the Javascript global namespace.
Because the Javascript object Date is a constructor (ie a function that returns new objects with the syntax var date = new Date()), we create Brython objects with the attribute new.
We then use the attributes of the Javascript instance of Date() such as getFullYear with the usual Python syntax.