Manejador de eventos con DOM (addEventListener y removeEventListener)

El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:

elemento_que_se_escucha.addEventListener('evento', 
                              función_a_lanzar, booleano);

elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)

Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:

elemento_que_se_escuchaba.removeEventListener('evento', 
                                función_a_anular, booleano);

NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:

< body >
   

      CLICK
   
< /body >

Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?

Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:

Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.

Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.

NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).

Fuente

Resumen DOM (Document Object Model)

Un documento HTML presenta una estructura de árbol constituido por nodos. Estos nodos pueden pertenecer a uno de los siguientes tipos:
Elemento – Estos nodos representan los elementos del documento (br, input, select, p,…).
Atributo – Los nodos atributos representan las propiedades de los elementos.
Texto – Fragmento de texto del documento HTML.

Para obtener los elementos se pueden usar los siguientes métodos: getElementById, getElementsByTagName y getElementsByClassName. (El primero devuelve el elemento que tiene el id solicitado mientras que los dos últimos devuelven un array de elementos seleccionándolos por el tipo de tag html y de class respectivamente)
Y para trabajar con sus atributos: getAttribute y setAttribute

Por otro lado, se pueden utilizar los siguientes métodos para recorrer esa estructura de árbol:
parentNode – Obtiene el nodo padre del nodo actual.
childNodes – Obtiene los nodos hijos del nodo actual (devuelve un array). Entre sus nodos hijos tiene en cuenta los nodos de texto.
firstChild – Obtiene el primer hijo del nodo actual.
lastChild – Obtiene el último hijo del nodo actual.
previousSibling – Obtiene el hijo del nodo padre anterior al nodo actual.
nextSibling – Obtiene el hijo del nodo padre siguiente al nodo actual.

También se pueden utilizar las siguientes propiedades:
nodeName – El nombre del nodo, que se define dependiendo del tipo de nodo. (Se corresponde con la etiqueta HTML en el caso de un nodo elemento o #text si se trata de un nodo texto).
nodeValue – El valor del nodo, que se define dependiendo del tipo de nodo.
nodeType – Un número que representa el tipo de nodo del que se trata. Un número del 1 al 12 (1 para nodos elemento, 2 para nodos atributos, 3 para nodos texto).

Métodos para crear, eliminar y reemplazar nodos:
createElement – Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado (Pertenece a Document) (var elemento = document.createElement(tag))
createTextNode – Crea un nodo texto. (Pertenece a Document)
cloneNode – Crea un nodo idéntico a otro existente. (var clonedNode = nodo_padre.clone(nodo_hijo))
appendChild – Añade un nodo como hijo de otro. Sirve para incorporar el nuevo nodo al árbol del documento. (nodo_padre.appendChild(nodo_hijo))
insertBefore – Inserta un nodo antes de otro en el árbol del documento. (nodo_padre.insertBefore(nuevo_nodo, viejo_nodo))
removeChild – Elimina un nodo hijo. (nodo_padre.removeChild(nodo_hijo))
replaceChild – Reemplaza un nodo hijo. (nodo_padre.replaceChild(nodo_hijo))

NOTA: Por último, tenemos el método innerHTML que se puede utilizar como alternativa a DOM. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo.

Calcular los días que tiene un mes en javascript

Ejemplo donde se puede ver como se calculan los días que tiene un mes en un año determinado. Utilizando para ello javascript:

function daysInMonth(humanMonth, year) {
  return new Date(year || new Date().getFullYear(), humanMonth, 0).getDate();
}

De esta manera ejecutando: daysInMonth(2, 2009); se obtendría 28.
Y ejecutando: daysInMonth(2, 2008); sería 29.

Fuente

Objeto history en javascript

Este objeto guarda la información sobre los URLs que el usuario ha visitado dentro de una ventana determinada, es decir guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista.

Propiedades

CURRENT: Cadena que contiene la URL completa de la entrada actual en el historial.

NEXT: Cadena que contiene la URL completa de la siguiente entrada en el historial.

LENGTH: Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han sido visitadas).

PREVIOUS: Cadena que contiene la URL completa de la anterior entrada en el historial.

Métodos

BACK(): Vuelve a cargar la URL del documento anterior dentro del historial.

FORWARD() Vuelve a cargar la URL del documento siguiente dentro del historial.

GO(«posición» | «URL destino»): Vuelve a cargar la URL del documento especificado por posición dentro del historial, la posición puede ser un entero, en cuyo caso indica la posición relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que esté en el historial.

Objeto location en javascript

El objeto location representa una URL completa. Se trata de una propiedad del objeto window.

Propiedades

HASH: Cadena de caracteres que representa el nombre del ancla definida por los caracteres tras el símbolo #.

HOST: Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL.

HOSTNAME: Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL actual.

HREF: URL actual en forma de objeto string.

PATHNAME: Cadena que contiene la ruta de acceso al recurso, dentro de la URL.

PORT: Cadena que contiene el número de puerto del servidor, dentro de la URL.

PROTOCOL: Protocolo precisado en el URL.

REFERRER: URL a partir de que el documento actual se consulta.

SEARCH: Cadena que contiene la información pasada en una llamada a un script (a continuación de ?), dentro de la URL.

Métodos

reload(): Vuelve a cargar la URL especificada en la propiedad href del objeto location.

replace(cadenaURL): Reemplaza el historial actual mientras carga la URL especificada en cadenaURL.

Propiedades nth-child y first-child de jquery.

JQuery tiene varias propiedades que se pueden utilizar para acceder a nodos concretos que están dentro de un nodo padre. Entre estas propiedades voy a comentar el funcionamiento de: first-child y nth-child

Para ello voy a utilizar un ejemplo. Supongamos que tenemos un Select cuyo id es «selectPrueba».

first-child – Se puede utilizar para seleccionar el primer elemento.
p.e. esto seleccionaria en el combo el primer elemento.

$('select#selectPrueba option:first-child').attr("selected", "selected");

nth-child – Permite seleccionar un elemento concreto.
p.e. esto seleccionaria en el combo el elemento 4.

$('select#selectPrueba option:nth-child(4)').attr('selected', 'selected');

Más información con ejemplos: first-child y nth-child.

Utilizar Print When Expresion de iReports

Supongamos que tenemos una plantilla de un informe realizada con ireport. Y que hay un label cuyo contenido no queremos que se muestre siempre (p.e. solamente cuando el valor de un parámetro, llamado campo, pasado al informe contiene la cadena «prueba»).


Lo único que hay que hacer es utilizar la propiedad Print When Expresion de la etiqueta label. Colocando en ella lo siguiente:

$P{campo}.equals("prueba")?Boolean.TRUE:Boolean.FALSE

Paginación de informes con iReport (Evaluation Time)

Supongamos que tenemos un informe realizado con ireport que nos genera un documento de 100 páginas. Y queremos que en el pie de página de cada hoja nos vaya marcando el número de página de la siguiente manera:

Página 1 de 100
Página 2 de 100
Página 3 de 100
….
Página 100 de 100


La solución seria utilizar una variable que nos proporciona el propio ireport: $V{PAGE_NUMBER}. Y jugar con el ámbito de ejecución (propiedad Evaluation Time).


Así se podría hacer:
– Label con el contenido «Página »
– Text con el valor «$V{PAGE_NUMBER}» (poniendo el campo Evaluation Time en now)
– Label con el contenido » de »
– Text con el valor «$V{PAGE_NUMBER}» (poniendo el campo Evaluation Time en report)

Ordenar un HashMap

Ejemplo de ordenación de un Map mediante keys. Tener en cuenta que las claves no deben ser repetidas, en otro caso este ejemplo no funcionará correctamente.

Map miMap= new HashMap();
miMap.put("2", "valor2");
miMap.put("1", "valor1");
miMap.put("4", "valor4");
miMap.put("3", "valor3");

Map mapOrdenado = new TreeMap(miMap);

Lenguaje de expresiones (EL) – Objetos implícitos

Se representan en las JSP mediante anotaciones del tipo: ${ … }.
De esta forma se indica que la información ingresada dentro de las llaves, no es leída literalmente, sino que se tiene que evaluar, y usar el resultado de esta evaluación.

Hay objetos que son automáticamente accesibles a cualquier etiqueta JSP. A través de ellos es posible acceder a cualquier variable de los ámbitos page, request, session, application, a parametros HTTP, cookies, valores de cabeceras, contexto de la página, y parámetros de inicialización del contexto.

– pageScope: Variables de ámbito página.
– requestScope: Variables de ámbito request.
– sessionScope: Variables de ámbito session.
– applicationScope: Variables de ámbito application.
– param: Parametros del request como cadenas.
– paramValues: Parametros del request como array de cadenas.
– header: Cabeceras del request HTTP como cadenas.
– headerValues: Cabeceras del request HTTP como array de cadenas.
– cookie: Valores de las cookies recibidas en el request.
– initParam: Parametros de inicialización de la aplicación Web.
– pageContext: El objeto PageContext de la página actual.

p.e.
${pageContext.request.requestURL} URL usada para acceder a la página.

En esta página se puede encontrar bastante más información de las propiedades de estos objetos implícitos.