Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Cita de la especificación del Document Object Model del W3C :

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