A partir de la página web proporcionada, añadir el código JavaScript necesario para que:
Descargar archivo ZIP con la página HTML
La página HTML proporcionada incluye una zona llamada ticker en la que se deben mostrar noticias generadas por el servidor. Añadir el código JavaScript necesario para:
XMLHttpRequest
para hacer las diferentes peticiones.Descargar ZIP con la página HTML y el script generaContenidos.php
Un ejemplo de validación compleja es la que consiste en comprobar si un nombre de usuario escogido está libre o ya lo utiliza otro usuario. Como es una validación que requiere el uso de una base de datos muy grande, no se puede realizar en el navegador del cliente. Utilizando las técnicas mostradas anteriormente y la página web que se proporciona:
Descargar ZIP con la página HTML y el script compruebaDisponibilidad.php
Normalmente, cuando se valida la disponibilidad de un nombre de usuario, se muestra una lista de valores alternativos en el caso de que el nombre elegido no esté disponible. Modificar el ejercicio de comprobación de disponibilidad de los nombres para que permita mostrar una serie de valores alternativos devueltos por el servidor.
El script del servidor se llama compruebaDisponibilidadXML.php
y el parámetro que contiene el nombre se llama login
. La respuesta del servidor es un documento XML con la siguiente estructura:
Si el nombre de usuario está libre:
<respuesta> <disponible>si</disponible> </respuesta>
Si el nombre de usuario está ocupado:
<respuesta> <disponible>no</disponible> <alternativas> <login>...</login> <login>...</login> ... <login>...</login> </alternativas> </respuesta>
Los nombres de usuario alternativos se deben mostrar en forma de lista de elementos (<ul></ul>
).
Modificar la lista anterior para que muestre enlaces para cada uno de los nombres alternativos. Al pinchar sobre el enlace de un nombre alternativo, se copia en el cuadro de texto del login del usuario.
Descargar archivo ZIP con el script compruebaDisponibilidadXML.php
Rehacer el ejercicio 4 para procesar respuestas del servidor en formato JSON. Los cambios producidos son:
El nombre de usuario está libre:
{ disponible: "si" }
El nombre de usuario está ocupado:
{ disponible: "no", alternativas: ["...", "...", ..., "..."] }
Descargar archivo ZIP con el script compruebaDisponibilidadJSON.php
Crear un script que cargue de forma dinámica mediante AJAX la lista de provincias de un país y la lista de los municipios de cada provincia seleccionada.
1) Definir el código HTML de las dos listas desplegables vacías.
2) Cuando se cargue la página, cargar la lista de provincias en la primera lista desplegable. El script del servidor se llama cargaProvinciasXML.php
. El formato de la respuesta es XML, con la siguiente estructura:
<provincias> <provincia> <codigo>01</codigo> <nombre>Álava</nombre> </provincia> ... </provincias>
Para insertar las opciones en la lista desplegable, se pueden utilizar dos técnicas:
innerHTML
de la lista y código HTML de cada etiqueta <option>
.new Option(nombre, valor
)) y añadirlo al array options[]
de la lista desplegable.3) Añadir de forma semántica el evento adecuado a la lista de provincias para que cuando se seleccione una provincia, se carguen automáticamente todos sus municipios en la otra lista.
4) Cuando se seleccione una determinada provincia, se carga mediante AJAX la lista completa de municipios en la otra lista desplegable. El script del servidor se llama cargaMunicipiosXML.php
. El parámetro que se debe enviar al servidor es el código de la provincia y el parámetro se llama provincia
. El método que espera el servidor es POST. El formato de la respuesta es XML, con la siguiente estructura:
<municipios> <municipio> <codigo>0014</codigo> <nombre>Alegría-Dulantzi</nombre> </municipio> ... </municipios>
Descargar archivo ZIP con los scripts cargaProvinciasXML.php y cargaMunicipiosXML.php
Modificar el ejercicio anterior para soportar las respuestas del servidor en formato JSON. Los cambios introducidos son los siguientes:
1) El script del servidor utilizado para cargar las provincias se llama cargaProvinciasJSON.php y la respuesta del servidor tiene el siguiente formato:
{ "01": "Álava/Araba", "02": "Albacete", "03": "Alicante/Alacant", ... }
2) El script del servidor utilizado para cargar los municipios se llama cargaMunicipiosJSON.php
y la respuesta del servidor tiene el siguiente formato:
{ "0014": "Alegría-Dulantzi", "0029": "Amurrio", ... }
Descargar archivo ZIP con los scripts cargaProvinciasJSON.php y cargaMunicipiosJSON.php
Se propone la construcción de un teclado virtual que permita escribir los contenidos en diversos idiomas y alfabetos. El script hace un uso intensivo de elementos de AJAX como los eventos, DOM, javascript avanzado, JSON y el objeto XMLHttpRequest
.
Cada uno de los teclados correspondientes a un idioma se carga desde el servidor, para no sobrecargar la aplicación. El teclado de un idioma concreto está formado por varios teclados alternativos o variantes. Así, se encuentra el teclado normal
para las teclas que se muestran inicialmente, el teclado caps
con las teclas que se escriben al pulsar sobre la tecla Bloq. Mayúsculas
, el teclado shift
que contiene los símbolos que se escriben al pulsar sobre la tecla Shift
y el teclado altgr
que contiene los símbolos que se pueden escribir después de pulsar la tecla Alt Gr
.
Por tanto, cada idioma tiene cuatro teclados diferentes: normal
, caps
, shift
y altgr
. Inicialmente, el script proporciona el objeto teclados
con un elemento llamado es
que contiene los cuatro teclados correspondientes al idioma español.
cargaTeclado()
que muestre en cada tecla virtual el valor de la tecla correspondiente al teclado de un idioma y una variante determinados.cargaTeclado()
. Previamente, se debe establecer el valor inicial de dos variables globales llamadas tecladoIdioma
y tecladoVariante
. En la misma función cargaTeclado()
, se debe asignar un evento a cada tecla activa para que al pulsar con el ratón sobre ella, se ejecute la función pulsaTecla()
.pulsaTecla()
se obtiene el carácter de la tecla que se ha pulsado correspondiente al teclado activo en ese momento. La tecla se añade a un array global llamado teclasPulsadas
. Por último, desde la función pulsaTecla()
se llama a una función mostrarContenidos()
que actualiza el texto mostrado en el área reservada para mostrar las teclas pulsadas.pulsaTeclaEspecial()
cuando el usuario pulse sobre Enter
, Tabulador
, Barra Espaciadora
y Borrado (BackSpace)
. En cada caso, se debe añadir al array de teclas pulsadas el carácter correspondiente: \n
, \t
, espacio en blanco y el borrado de la última tecla pulsada.mostrarContenidos()
para que antes de mostrar las teclas que se han pulsado, convierta los caracteres especiales en caracteres correctos para mostrarlos en un elemento HTML: las nuevas líneas (\n
) se transforman en <br/>
, los espacios en blanco se transforman en
y el tabulador (\t
) se transforma en
.Bloq. Mayús.
o Shift
o Alt Gr
, se debe cambiar la variante del teclado actual. Para ello, existen las variantes caps
para las mayúsculas, shift
para los símbolos de la tecla Shift
y altgr
para los símbolos que aparecen cuando se pulsa la tecla AltGr
. Añadir a estas teclas especiales el evento adecuado para que se ejecute la función pulsaTeclaEspecial()
en la que se deben realizar las tareas que correspondan a cada tecla. Además, debería crearse una variable global llamada estado que almacene en todo momento el estado de pulsación de estas teclas especiales, ya que el resultado no es el mismo si se pulsa la tecla de mayúsculas estando o no estando pulsada anteriormente.tecladoVirtual.php
y el envío de parámetros se realiza mediante POST
. Para cargar los idiomas disponibles, el parámetro que se debe utilizar es accion y su valor es listaIdiomas
. La respuesta del servidor es un objeto JSON con los códigos y nombres de cada idioma, además del código del idioma que se carga al principio:{ idiomas: { es: "Español", de: "Alemán", ru: "Ruso", el: "Griego", ... }, defecto: "es" }
Los teclados de cada idioma con todas sus variantes también se descargan desde el servidor. El script es tecladoVirtual.php
, en este caso la acción es cargaTeclado
y se debe pasar otro parámetro llamado idioma
con el código del idioma cuyo teclado se quiere cargar desde el servidor.
La respuesta del servidor es la siguiente:
{ normal: ["º", "1", "2", "3", "4", "5", "6", ..., ".", "-"], caps: ["º", "1", "2", "3", "4", "5", "6", ..., ".", "-"], shift: ["ª", "!", """, "'", "$", "%", "&", ..., ":", "_"], altgr: ["\", "|", "@", "#",,, "¬", ,,,,,,,,,,,,,,,, "[","]",,,,,,,,,,, "{", "}",,,,,,,,,,""] }
Si se utiliza net.CargadorContenidoscompleto
, puede ser útil emplear el último parámetro que indica si la petición al servidor es síncrona o asíncrona. En este caso, debería ser síncrona, ya que el resto del programa no puede seguir trabajando hasta que se haya cargado completamente el teclado solicitado.
tecladoVirtual.php
, la acción es guardar
y el parámetro contenido
es el que indica el contenido creado por el usuario.pulsada
y que se puede utilizar para resaltar de forma clara la tecla que se ha pulsado. Utilizar esa clase para iluminar durante un breve espacio de tiempo la tecla pulsada en cada momento.Descargar archivo ZIP con la página HTML, las imágenes y el script tecladoVirtual.php
A partir del formulario proporcionado, añadir la opción de autocompletar el nombre del municipio que está escribiendo el usuario. El esquema del funcionamiento propuesto es el siguiente:
<div>
en el que se van a mostrar las sugerencias enviadas por el servidor. Además, se debe establecer el evento de teclado adecuado en el cuadro de texto y también se debe posicionar el cursor en ese cuadro de texto para poder escribir en el directamente.autocompleta()
. Desde esta función, se debe llamar a la función responsable de obtener la lista de municipios del servidor. El script se llama autocompletaMunicipios.php
, el parámetro que se envía mediante POST
, se llama municipio
y debe contener la cadena de texto escrita por el usuario.El servidor responde con un array en formato JSON con la lista de municipios cuyo nombre comienza por el texto enviado. Ejemplo de respuesta del servidor:
[ "Alegría-Dulantzi", "Amurrio", "Añana", "Aramaio", "Armiñón", ... ]
<ul>
de HTML). Para transformar el array en la lista <ul>
, modificar el prototype
del objeto Array
y añadir una función específica que realice la transformación.autocompleta()
para tener en consideración 3 teclas especiales: las flechas superior e inferior y la tecla Enter
. Cuando se utilizan las flechas del teclado hacia arriba y hacia abajo, se van seleccionando los elementos de la lista. Cuando se pulsa el Enter
, se selecciona el elemento copiando su valor al cuadro de texto y ocultando la lista de sugerencias.{ "a": ["Ababuj", "Abades", "Abadía", "Abadín", "Abadiño", "Abáigar", "Abajas", "Abaltzisketa", "Abánades", "Abanilla", "Abanto y Ciérvana-Abanto Zierbena", "Abanto", "Abarán", "Abarca de Campos", "Abárzuza", "Abaurregaina/Abaurrea Alta", "Abaurrepea/Abaurrea Baja", "Abegondo", "Abejar", "Abejuela", "Abella de la Conca"], "al": ["Alacón", "Aladrén", "Alaejos", "Alagón", "Alaior", "Alájar", "Alajeró", "Alameda de Gardón (La)", "Alameda de la Sagra", "Alameda del Valle", "Alameda", "Alamedilla (La)", "Alamedilla", "Alamillo", "Alaminos", "Alamús (Els)", "Alange", "Alanís", "Alaquàs", "Alar del Rey", "Alaraz"], ... }
De esta forma, antes de realizar una petición al servidor, se comprueba si ya está disponible una lista de sugerencias para ese texto. Además, cuando se realiza una consulta al servidor, la respuesta se almacena en la cache para su posible reutilización futura.
Descargar archivo ZIP con el script autocompletaMunicipios.php