This tutorial explains how to develop an application that runs in the browser using the Python programming language. We will take the example of writing a calculator.
The contents of this tutorial assumes that you have at least a basic knowledge of HTML (general page structure, most usual tags), of stylesheets (CSS) and of the Python language.
In the text editor, create an HTML page with the following content. You can do this in your CodeHS Sandbox or just follow along in this tutorial with the examples.
Let’s take a look at the page contents. In the <head>
zone we load the script brython.js
: it is the Brython engine, the program that will find and execute the Python scripts included in the page. In this example we get it from a CDN, so that there is nothing to install.
Note the version number (brython@3.8.8
): it can be updated for each new Brython version.
The <body>
tag has an attribute onload="brython()"
. It means that when the page has finished loading, the browser has to call the function brython()
, which is defined in the Brython engine loaded in the page. The function searches all the <script>
tags that have the attribute type="text/python"
and executes them.
Our index.html
page embeds this script:
This is a standard Python program, starting by the import of a module, browser (in this case, a module shipped with the Brython engine brython.js). The module has an attribute document which references the content displayed in the browser window.
To add a text to the document - concretely, to display a text in the browser - the syntax used by Brython is
You can think of the <=
sign as a left arrow : the document “receives” a new element, here the string "Hello !"
. You will see later that it is always possible to use the standardized DOM syntax to interact with the page, by Brython provides a few shortcuts to make the code less verbose.
HTML tags allow text formatting, for instance to write it in bold letters (<B>
tag), in italic (<I>
), etc.
With Brython, these tags are available as functions defined in module html of the browser package. Here is how to use it:
Tags can be nested:
Tags can also be added to each other, as well as strings:
The first argument of a tag function can be a string, a number, another tag. It can also be a Python “iterable” (list, comprehension, generator): in this case, all the elements produced in the iteration are added to the tag:
Tag attributes are passed as keyword arguments to the function:
We can draw our calculator as an HTML table.
The first line is made of the result zone, followed by a reset button. The next 3 lines are the calculator touches, digits and operations.
See the code and try running it below. Note that the relevant code is inside the <script type="text/python">
tag.
Note the use of Python generators to reduce the program size, while keeping it readable.
Let’s add style to the tags in a stylesheet so that the calculator looks better.
We’ll add these styles to styles.css
And include it with
If you want, you can also just insert the entire text with the <style>
tags into the <head>
tag in your index.html
file.
The next step is to trigger an action when the user presses the calculator touches:
=
sign : execute the operation and print the result, or an error message if the input is invalidC
letter : reset the result zoneTo handle the elements printed in the page, the program need first to get a reference to them. The buttons have been created as <TD>
tags; to get a reference to all these tags, the syntax is
The argument passed to the select()
method is a CSS selector. The most usual ones are: a tag name (td
), the element’s id attribute (#result
) or its attribute “class
” (.classname
). The result of select()
is always a list of elements.
The events that can occur on the elements of a page have a normalized name: when the user clicks on a button, the event called “click” is triggered. In the program, this event will provoque the execution of a function. The association betweeen element, event and function is defined by the syntax
For the calculator, we can associate the same function to the “click” event on all buttons by:
To be compliant to Python syntax, the function action()
must have been defined somewhere before in the program. Such “callback” functions take a single parameter, an object that represents the event.
Here is the code that manages a minimal version of the calculator. The most important part is in the function action(event)
.