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
 

Usando objetos Javascript

Tenemos que manejar el periodo de transición en el que Brython va a coexistir con Javascript ;-)

Accessing Brython objects from Javascript

Por defecto, Brython solo expone dos nombres en el espacio de nombres global de Javascript :

brython() : la función que se ejecuta al cargarse la página

__BRYTHON__ : un objeto usado internamente por Brython para almacenar los objetos necesarios para ejecutar los scripts

Por tanto, por defecto, un programa Javascript no podría acceder a los objetos Brython. Por ejemplo, para que la función echo() definida en un script Brython reaccione a un evento en un elemento de la página, en lugar de usar la sintaxis javascript:

<button onclick="echo()">

(debido a que la función echo no es accesible directamente desde Javascript), la solución sería definir un atributo id al elemento:

<button id="mybutton">

y definir un enlace entre este elemento y el evento click mediante :

from browser import document
document['mybutton'].bind('click', echo)

Otra opción sería forzar la instroducción de la función echo en el espacio de nombres de Javascript, definiéndola como un atributo del objeto window presente en el módulo browser :

from browser import window
window.echo = echo

NOTA: No se recomienda usar este segundo método ya que introduce un riesgo de conflicto con nombres ya definidos por otros programas o librerías Javascript usadas en la página.

Objetos en programas Javascript

Un documento HTML puede usar librerías o scripts Javascript, además de librerías y scripts Python.

Los nombres añadidos al espacio global de nombres de javascript mediante scripts Javascript se encuentran disponibles para los scripts Brython como atributos del objeto window definido en el módulo browser

Por ejemplo :

<script type="text/javascript">
circle = {surface:function(r){return 3.14 * r * r}}
</script>

<script type="text/python">
from browser import document, window

document['result'].value = window.circle.surface(10)
</script>

Los objetos Javascript se convierten a su equivalente en Python mediante de la siguiente forma:

Objeto Javascript (js_obj)Objeto Python (window.js_obj)
Elemento DOMinstancia de DOMNode
Evento DOMinstancia de DOMEvent
Colección de elementos DOMlista de instancias de DOMNode
true, falseNone, True, False
nullsin cambios (aparece como '')
Integerinstancia de int
Floatinstancia de float
Stringinstancia de str
Arrayinstancia de list

Los otros objetos Javascript se convierten a una instancia de la clase JSObject definida en el módulo javascript. Se pueden convertir a un diccionario Python mediante:

py_obj = window.js_obj.to_dict()

Si el objeto Javascript es una función, los argumentos que se le pasan a la función Python se convierten a objetos Javascripts, usando la tabla anterior de forma opuesta

Hay que tener cuidado, una función Javascript no se puede llamar con kwargs, esto lanzará una excepción TypeError : si la función está definida por

function foo(x, y)

y se la llama desde un script Brython mediante

window.foo(y=0, x=1)

pasando los argumentos en el orden incorrecto no sería posible, ya que el script Brython no conoce como ha sifo definida la función Javascript.

Usando constructores Javascript

Si una función Javascript es un objeto constructor, puede ser llamado en código Javascript mediante la palabra clave new, se podría llamar en Brython usando el método especial new añadida por Brython al objeto Javascript.

Por ejemplo :

<script type="text/javascript">
function Rectangle(x0, y0, x1, y1){
    this.x0 = x0
    this.y0 = y0
    this.x1 = x1
    this.y1 = y1
    this.surface = function(){return (x1 - x0) * (y1 - y0)}
}
</script>

<script type="text/python">
from browser import alert, window

rectangle = window.Rectangle
alert(rectangle.new(10, 10, 30, 30).surface())
</script>

jQuery example

En la siguiente porción de código tenemos un ejemplo más completo de cómo podrías usar la popular librería jQuery :

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="/src/brython.js"></script>
</head>

<script type="text/python">
from browser import window

jq = window.jQuery

# Ajax call
def onSuccess(data, status, req):
    print(data)
    print(status)

jq.ajax('/cgi-bin/post_test.py',
    {'data':
        {'foo': 56},
     'success': onSuccess
    }
)

# add an option to a SELECT box
jq('#sel').append('<option>three')

# access element attributes
assert jq('#c').attr('id') == 'c'

# define a callback for a click on a button
def callback(ev):
    print(jq(ev.target).text())

jq('#btn').on('click', callback)

# we can even use "each" to iterate on SPAN elements
def show(i, obj):
    print(i, obj)

jq.each(jq('span'), show)
</script>

<body onload="brython(1)">

<select id="sel">
  <option value="one">one
  <option value="two">two
</select>

<span id="c"></span>

<button id="btn">click</button>

</body>
</html>

Otros ejemplos

Puedes encontrar otros ejemplos en la galería para ver como usar librerías Javascript (Three, Highcharts, Raphael) en scripts Brython.

Integración de una biblioteca Javascript en un módulo Python

Otra forma de integrar una biblioteca sería crear un módulo que pueda ser importado en los scripts sin la necesidad de cargar esta biblioteca en el script de la página.

Para ello, ¿la biblioteca debe ser accesible a través de una llamada Ajax? Se carga usando la función load(url) del módulo browser y los nombres que añade al espacio de nombres global Javascript se exponen en el módulo Python.

Por ejemplo, podemos crear un módulo jquery:

from browser import window, load

load("/path/to/jquery.min.js")

# jQuery adds the name jQuery to the global Javascript namespace
# (also called $, but this is not a valid Python identifier)
jq = window.jQuery

Una vez hecho lo anterior podremos usar este módulo en una página Brython page (fíjate que no cargamos jquery.js):

<html>
<head>
<script src="brython.js"></script>
</head>
<body onload="brython(1)">
<script type="text/python">
import jquery

jquery("#test").text("I can use jQuery here !")
</script>

<div id="test"></div>
</body>
</html>