Práctica 2: JavaScript
En esta práctica insertaremos código
JavaScript para añadir cierta interactividad a la web. En
concreto:
- Los botones de negrita, cursiva e insertar URL de la
página editar.html
van a funcionar correctamente.
- Se añadirá una "persiana
desplegable" a todas las páginas para poder ver en tiempo
real los eventos que suceden en el blog (el autor se conecta o crea una
entrada, un usuario envía un comentario,...).
Botones de formato de la página editar.html
Requerimientos
Al pulsar los botones (o enlaces) de negrita, cursiva e
insertar URL se insertará código HTML en el textarea
con el texto de la entrada. En concreto:
- Si no hay texto seleccionado, el mismo botón (o
enlace) servirá tanto para abrir negrita o cursiva como para
cerrarla. Para ello, cuando se pulse negrita o cursiva se
buscará hacia atrás en el textarea
(desde la posición del cursor) la etiqueta HTML
correspondiente (<b> o <i>
respectivamente). Si no está o bien se encuentra antes la
etiqueta cerrada se insertará una etiqueta de apertura en el
punto donde está el cursor
- Si hay texto seleccionado, se insertará antes y
después de la selección la etiqueta
correspondiente de apertura y cierre, respectivamente.
- Cuando se pulse el botón de insertar URL
mediante dos prompt se pedirá al
usuario la URL y el texto del enlace, y se insertará el HTML
correspondiente en el textarea, en el punto en
que esté el cursor.
Implementación
Para poder implementar esta parte debéis tener en
cuenta que:
- Cuando se quiere comprobar si una propiedad existe en el
navegador actual basta con comprobar si su valor es true
- Para acceder al objeto JavaScript que corresponde con el
textarea y a su contenido podéis usar el DOM 0 o el DOM 1.
- Para firefox:
- Cómo saber la posición del
cursor:el objeto que representa el textarea
tiene dos propiedades, selectionStart y selectionEnd,
que indican la posición de comienzo y fin de la
selección. Si no hay nada seleccionado ambas nos dan la
posición actual del cursor.
- Cómo
insertar texto en la posición del cursor:
bastará con concaternar la subcadena que va desde 0 a
selectionStart,
lo que queremos insertar y la que va de selectionEnd
al final del texto.
- Para Explorer:
- Es conveniente poner el foco del teclado en el campo de texto antes de insertar la secuencia, llamando al método focus del objeto correspondiente al textarea. En caso contrario podríamos escribir en lo que el usuario tuviera seleccionado aunque no fuera el campo.
- Cómo saber la posición del cursor: no hay una forma directa de hacerlo, pero se pueden usar varios trucos (aquí tenéis uno de ellos, podéis encontrar alternativas buscando en google "caret position IE" o algo por el estilo)
- Cómo insertar código en el textarea: El documento tiene una propiedad document.selection con la selección actual. El método document.selection.createRange() representa esta selección con un objeto JavaScript. Su propiedad text
es de lectura y escritura. Cambiando esta propiedad sobreescribimos la
selección. Si no hay nada seleccionado y la cambiamos, el efecto
es insertar en la posición del cursor.
- En otros navegadores no será posible insertar
el texto justo donde está el cursor. Si se detecta que las
propiedades y/o métodos anteriores no existen en el
navegador actual podéis poner las etiquetas al final del
texto.
Aviso de eventos en tiempo real
Requerimientos
Todas las páginas incluirán una "persiana desplegable" que avise de una serie de eventos:
- El creador del blog acaba de hacer login (código 0)
- El creador del blog acaba de hacer logout (código 1)
- El creador del blog ha creado una nueva entrada (código 2)
- El creador del blog ha editado una entrada ya existente (código 3)
- Un usuario ha enviado un comentario a una entrada (código 4)
En los casos de creación/edición de entradas o
envío de comentarios hay que poner en la persiana desplegable,
además del aviso en cuestión, la palabra "ver" como
un enlace que lleve a ver la nueva información. Por el momento
será simplemente un enlace a la página
entrada.html pero en la práctica 3 se cambiará para que funcione correctamente.
La persiana desplegable inicialmente estará "cerrada". Debe
tener un enlace/botón o similar (por ejemplo, se puede hacer que
imite la barra de título de una ventana) de manera que si se
pincha en él se desplegará progresivamente la persiana
(con una animación JavaScript) mostrando la lista de eventos. Al
volver a pinchar se volverá a plegar.
Implementación
- Para saber si hay nuevos eventos hay que hacer peticiones AJAX al
servidor cada cierto número de segundos (con un temporizador de
Javascript). Como por el momento no tenemos servidor web, haremos una
implementación "temporal" en la que la URL de la petición
será a un fichero local llamado "eventos.txt" (es decir, en la
URL no hay que poner http:// ni nada parecido, únicamente
"eventos.txt") Este fichero contendrá los últimos eventos
sucedidos. Supondremos por ahora que
la actualización de dicho fichero la hace automáticamente
el servidor, para hacer pruebas simplemente meted información en
él de manera manual y limitaos a añadir a la "persiana"
la información que aparece en el fichero. Para que todo funcione, el fichero
eventos.txt
debe residir en el mismo directorio que las páginas del sitio
web, y debe tener un formato en el que en cada línea
aparecerá una fecha en formato GMT, un código de evento y
en su caso un número de entrada,separados por símbolos
"&" por ejemplo:
Thu, 26 Oct 2006 13:11:15 GMT&0
Thu, 26 Oct 2006 13:15:44 GMT&2&50
indicaría que el autor ha hecho
login a las 13:11 GMT y ha creado una nueva entrada, la número
50 a las 13:15 GMT. Supondremos que el servidor acepta un
parámetro HTTP "fecha" de manera al pasarle la fecha GMT del
último recibido nos enviará solo los posteriores. Pasar
de String a Date y viceversa con fechas GMT es muy sencillo:
- Para pasar de String a Date (al leer eventos.txt) basta con hacer new Date(cadena-leída)
- Para pasar de un Date a un String (al hacer la petición
AJAX y enviar el parámetro HTTP fecha) basta con llamar al
método
toGMTString().
- Lo más sencillo es que la "persiana" sea un <div>.
Para plegarla y desplegarla habría que cambiar su propiedad CSS
"height", y para que el contenido no se muestre si la altura no es la
suficiente hay que usar la propiedad CSS overflow (con valor "scroll"
si queremos que salgan barras de scroll para ver todo el contenido o
con valor "hidden" si queremos que simplemente se recorte).
- La animación de la persiana debéis hacerla con un temporizador de JavaScript.
Parte optativa
Cada una de las partes optativas se puntuará con 1 punto:
- Calendario: realizar un
calendario que debe aparecer en todas las páginas formando parte
de la barra de navegación. El calendario debe tener algún
mecanismo (botón, enlace o similar) para poder cambiar al mes y
año siguiente y anterior. Los días en los que haya
entradas en el blog deben aparecer destacados del resto (por ejemplo,
en otro color). Para saber si hay entradas, se supondrá que en
Javascript existe un array de Dates ya definido llamado entradas.
La posición i-ésima del array contendrá la fecha
de la entrada i-ésima. Por el momento tendréis que
definir el array manualmente, en la práctica 3 se pondrá
código que lo genere automáticamente desde el servidor.
- La persiana desplegable con los eventos debe poderse arrastrar con el ratón, como si fuera una ventana.
Puntuación
- 5 puntos: parte obligatoria
- 1 punto: documentación del código fuente
- 1 punto: documentación adicional (no se trata de comentar
línea a línea el código fuente, sino explicar
cómo se han implementado las cosas: APIs usados para cada cosa,
cuestiones de compatibilidad, etc.)
- 1 punto: estructuración, limpieza del código y modularidad
- 2 puntos: parte optativa
La entrega de la práctica se podrá realizar hasta el
19 de noviembre a través de la zona restringida de la web del DCCIA.
