Brython documentation

¿Qué es el Document Object Model?

El Document Object Model es una interfaz independiente del lenguaje y de la plataforma que permite a los programas y scripts acceder dinámicamente y modificar el contenido, estructura y estilo del documento

El objetivo de Brython es reemplazar Javascript con Python como lenguaje de scripting en los navegadores.

Un ejemplo simple :

<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 echo(ev):
    InfoDialog("Hello", f"Hola, {document['zone'].value} !")

# bind event 'click' on button to function echo
document["echo"].bind("click", echo)
</script>
<input id="zone">
<button id="echo">click !</button>
</body>
</html>

Intenta:

Para que el script Python se pueda procesar es necesario incluir brython.js y ejecutar la función brython() al cargarse la página (usando el atributo onload de la etiqueta <BODY>). Mientras nos encontremos en la fase de desarrollo, es posible pasar un argumento a la función brython() : 1 para que los mensajes de error se muestren en la consola del navegador, 2 para, además, mostrar el código Javascript junto con el error.

Si el programa Python es extenso, otra opción sería escribirlo en un fichero separado y cargarlo usando el atributo src de la etiqueta script :

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

Hay que resaltar que, en este caso, el script Python será cargado mediante una llamada Ajax : deberá, por tanto, estar localizado en el mismo dominio que la página HTML.

En los dos ejemplos de código anteriores, cuando pulsamos el botón del ratón, el evento onclick llama y ejecuta la función echo(), definida en el script Python. Esta función obtiene el valor mediante el elemento INPUT, a través de su id (zone). Esto se consigue mediante la sintaxis document["zone"] : document definido en el módulo browser, es un objeto que representa el documento que se muestra en el navegador. Se comporta como un diccionario cuyas claves son los ids de los elementos del DOM. Por tanto, en nuestro ejemplo, document["zone"] es un objeto que 'mapea' el elemento INPUT ; la propiedad value contiene el valor del objeto.

En Brython, el 'output' se puede obtener de varias formas, incluyendo la función integrada alert() (también definida en el módulo browser) que muestra una ventana ('popup window') con el texto que hemos pasado como argumento.

Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del `import`

Interfaz del navegador

Módulos específicos de Brython

Trabajando con Brython

Cookbook