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
 

Atributos y métodos de los elementos

Atributos DOM y propiedades

El DOM define dos conceptos diferentes para los elementos:

  • attributes, los cuales se definen en la etiqueta HTML (o SVG): por ejemplo, <img src="icon.png"> define el atributo src del elemento creado mediante la etiqueta <img>
  • properties, las cuales pueden ser añadidas a un elemento mediante la sintaxis de puntos: mediante element.property_name = value, leído comovalue = element.property_name

El DOM también define una relación entre algunos atributos y algunas propiedades:

  • de forma general, para los atributos esperados para una etiqueta dada (e.g. "id" o "class" para cualquier tipo de etiqueta, "src" para las etiquetas IMG, "href" para las etiquetas A, etc), cuando se define el atributo, la propiedad también se definirá
  • la mayoría de las veces el nombre de la propiedad es el mismo que el del atributo pero hay excepciones: la propiedad para el atributo"class" es "className"
  • generalmente, el valor de la propiedades el mismo que el valor del atributo, pero no siempre: por ejemplo, para un elemento definido mediante <INPUT type="checkbox" checked="checked">, el valor del atributo "checked" es el string "checked" y el valor de la propiedad "checked" es el booleano true

Aparte de los atributos definidos por la especificación para una etiqueta determinada se pueden definir atributos (los motores de plantillas usan esto de forma generalizada); para estos atributos la propiedad del mismo nombre no se define. Para un elemento también podemos definir propiedades y, de la misma forma que antes, esto no define el nombre para el atributo.

Los valores de los atributos son siempre strings mientras que valores de las propiedades pueden ser de cualquier tipo.

Los atributos son case-insensitive para elementos HTML y case-sensitive para elementos SVG; las propiedades son siempre case-sensitive.

Gestión de atributos y propiedades en Brython

Brython gestiona los atributos del DOM mediante el atributo attrs de las instancias DOMNode; maneja las propiedades usando dotted syntax.

element.attrs es un objeto que funciona como un diccionario.

# define un valor para un atributo
element.attrs[name] = value

# obtener un valor de un atributo
value = element.attrs[name] # lanza KeyError si el elemento no tiene el 
                            # atributo "name"
value = element.attrs.get(name, default)

# comprueba si un atributo se encuentra presente
if name in element.attrs:
    ...

# elimina un atributo
del element.attrs[name]

# itera sobre los atributos de un elemento
for name in element.attrs:
    ...

for attr in element.attrs.keys():
    ...

for value in element.attrs.values():
    ...

for attr, value in element.attrs.items():
    ...

Métodos y propiedades específicas de Brython

Por conveniencia, Brython define unos pocos métodos y propiedades adicionales:

NombreTipoDescripciónR = read only (solo lectura)
R/W = read + write (lectura y escritura)
abs_leftenteroposición relativa con respecto al borde izquierdo de la ventana de un elementoR
abs_topintegerposición relativa con respecto al borde superior de la ventana de un elementoR
bindmétodoañadido de eventos, ver la sección events-
childrenlistel hijo del elemento en el árbol del documentoR
class_namestringel nombre de la clase del elemento (atributo class de la etiqueta)R/W
clearmétodoelt.clear() elimina todos los descendientes del elemento-
closest método elt.closest(tag_name) devuelve el primer elemento padre de elt con el nombre de etiqueta especificado. Lanzará un KeyError si no se encuentra un elemento. -
getmétodoselecciona elementos(cf acceso a elementos)-
heightenteroAltura del elemento en píxeles (2)R/W
htmlstringel código HTML dentro de un elementoR/W
index método elt.index([selector]) devuelve el índice (un entero) del elemento entre los hijos de su padre. Si se especifica selector , solamente los elementos que contengan el selector CSS serán tenidos en cuenta ; en este caso, si no se encuentran devolverá -1. -
insidemétodoelt.inside(other) comprueba si elt se encuentra contenido dentro del elemento other-
leftenterola posición del elemento relativa al borde izquierdo del primer padre posicionado (1)R/W
parentinstancia DOMNodeel padre del elemento (None para doc)R
selectmétodo elt.select(css_selector) : una lista con todos los elementos que descienden de elt cuyo selector CSS coincide con css_selector -
select_one método elt.select_one(css_selector): el elemento que descienden de elt cuyo selector CSS coincide con css_selector, si no None -
textstringel texto dentro de un elementoR/W
topenterola posición de un elemento relativa al borde superior del primer padre posicionado (1)R/W
widthenteroAnchura del elemento en píxeles (2)R/W

(1) Cuando se va hacia arriba en el árbol del DOM, paramos en el primero padre cuyo atributo style.position se encuentra asignado a un valor diferente a "static". left y top se computan como style.left y style.top pero son enteros en lugar de cadenas que acaban con px.

(2) Lo mismo que style.height y style.width pero como enteros.

Para añadir un hijo a un elemento se usa el operador &lt;= (piensa en ello como una flecha que indica asignación)

from browser import document, html
document['zone'] <= html.INPUT(Id="data")

La iteración sobre los hijos de un elemento se puede hacer usando la sintaxis Python habitual :

for child in element:
    ...

Para destruir un elemento se usa la palabra clave del

del document['zone']

La colección options asociada con un objeto SELECT tiene una interfaz que funciona como una lista Python :

  • accede a una opción mediante su índice : option = elt.options[index]
  • inserta una opción en la posición index : elt.options.insert(index,option)
  • inserta una opción al final de la lista : elt.options.append(option)
  • elimina una opción : del elt.options[index]