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
 

Problema

Mostrar información al mover el ratón sobre una imagen

Solución

Usaremos el atributo onmouseover de la etiqueta HTML area y le pasaremos una función python que, en función de su posición, devolverá una cadena de texto.

from browser import document, html

def writetext(txt):
    document["description"] <= txt

coords = [
    (0, 0, 160, 95),
    (180, 0, 400, 165),
    (0, 120, 180, 400),
    (175, 235, 270, 400)
]

messages = ["Avión volando a wonderland en un soleado día",
    "El sol y los planetas gigantes gaseosos como Jupiter son, a distancia, \
        los mayores objetos de nuestro sistema solar.",
    "Este soy yo o eres tú.",
    "Daniel el travieso!!!!!!!!"]
prompt = "Mueve el ratón sobre los diferentes elementos de la imagen para ver \
    una descripción."

writetext(prompt)

for coord, msg in zip(coords, messages):
    area = html.AREA(shape="rect", coords=coord)
    area.bind('mouseover', lambda ev, msg=msg:writetext(msg))
    area.bind('mouseout', lambda ev:writetext(prompt))
    document["familymap"] <= area

Happy Family