Ejercicios de script de cliente (JavaScript).

  1. Página que muestre un mensaje con un saludo “Hola” al abrir la página. (función alert, método onload)
  2. Además de lo anterior diga “Adiós”. (función alert, método onunload)
  3. Página que alterne el color de fondo al hacer clic. (propiedad bgColor del objeto document, evento onclick)
  4. Pedir un nombre y mostrarlo en una página. (función prompt y método write del objeto document)
  5. Igual que el anterior pero pidiendo confirmación antes de visualizarlo. (idem y función confirm)
  6. Cambiar el color de fondo al entrar y salir de imagen con el arrastre del puntero. (document.bgColor y métodos onmouseover, onmouseout)
  7. Mostrar un mensaje en la barra de estado al pasar por una imagen (métodos onmouseover y onmouseout y window.status)
  8. Página con dos botones que nos realicen el atrás y adelante del navegador. (evento onclick y history.back() history.forward())
  9. Página con imagen que al hacer clic sobre ella nos muestre en una nueva ventana una nueva página.(evento onclick, método window.open(...))
  10. Página que cree el objeto libro, y con una instancia de libro, de alta, baja, descuento (que aplique un descuento en la propiedad precio).
  11. Página que muestre día de conexión del cliente con script de cliente. (objeto Date()) ¿Cómo sería con script de servidor?.
  12. Página que muestre una relación de tres botones que al pulsarlos nos cambien a tres colores diferentes el color de fondo del documento (document.bgColor y onclick)
  13. Página que al cargarse abra una nueva ventana sin barra de estado, sin menú, sin ... Difícil de quitarse de encima. (método window.open con configuración de parámetros)
  14. Página de aviso de resolución de pantalla si no es la correcta. (screen.width y screen.height)
  15. Página con propiedades del navegador (objeto navigator y sus propiedades)
  16. Página con botón que cree nueva ventana con las características del navegador (igual anterior pero se construye página con document.write)
  17. Mostrar en la barra de estado la hora de conexión (evento onload, propiedades getHours(), getMinutes() y getSeconds() del objeto date)
  18. Mostrar constantemente la hora en la barra de estado (igual anterior pero con setTimeout(función, retraso)
  19. Mostrar alternativamente dos textos en la barra de estado (función setTimeout y window.status)
  20. Mostrar mensaje por defecto en ventana (propiedad defaultStatus)
  21. Mostrar título alternativo.
  22. Añadir una página a favoritos (window.external.addfavorite) en forma de hipervínculo.
  23. Página con opción que muestre una imagen cuando esta el ratón sobre ella y otra imagen cuando esta fuera (onmouseover, onmouseout, document.images[].src)
  24. Animación cambiando de imagen cada dos segundos (document.images.src y setTimeout)
  25. Link que al pasar por encima nos lleve a la página (mouseover, window.location)
  26. Página que calcule el total con IVA a partir de una cantidad sin IVA. Botón calcular y botón borrar. También al cambiar.
  27. Página que al pasar por encima de etiquetas haga una descripción de cada etiqueta en un textarea (evento onmouseover)
  28. Si la página anterior cambia de servidor, haz que el cliente que desconozca la nueva sea enviado automáticamente al entrar. (evento onload, location)
  29. Marquesina de mensaje en la barra de estado (propiedad windows.status, función subString(posicioninicio,posicionfinal), función setTimeout)
  30. Pagina extensa que se lee poco a poco al hacer clic encima del documento (método scrollBy(x,y), evento clic de document) y que vuelve al principio al hacer dobleclic (método scrollTo(x,y))
  31. Página con botón que construya el código completo de otra ventana. (evento clic, método window.open y método document.write)
  32. Página con cuadro de texto y botón enviar, al cargar la página (evento onLoad) el cuadro de texto recibe el enfoque (método focus()), al salir del cuadro de texto (evento onBlur) se comprueba que el cuadro este relleno y si no es así devolvemos el enfoque al cuadro de texto (método focus()).
  33. Página que solicite dirección de correo en cuadro de texto y compruebe que se ha introducido al menos el ., el @ (función indexOf) y que la longitud (propiedad length) es de más 5 caracteres. Transformar el resultado a mayúsculas (toUpperCase()).
  34. Página con botón que al hacer clic nos cree una nueva ventana (window.open) con el nombre del día de la semana (getDay())), día de mes (getDate()), nombre de mes (getMonth()) y año (getYear()) de la fecha actual(Date()).
  35. Página que muestre en un cuadro de texto un mensaje con efecto teletipo. (Función subString, setTimeout o setInterval(función, tiempo).
  36. Página con cuadro de selección que muestre como opciones las descripciones de varios de estos ejercicios (como value la url) y al elegir (evento change) nos muestre el ejercicio elegido. (Poner título de página, color de fondo, ...)
  37. Formulario solicitar cuenta. Cuadro de texto para teclear el nombre de usuario que deseamos, y dos cuadros de textos para introducir la contraseña y confirmarla (type=password). El evento enviar debe comprobar que hemos introducido un nombre de usuario y que hemos tecleado la contraseña igual en los dos cuadros password y que esta, al menos, tiene 6 caracteres.
  38. Crear un archivo .js que contenga el código de función teletipo para la línea de estado (Este archivo será una biblioteca Javascript). Utilizar este archivo en una página web para realizar el efecto teletipo (etiqueta script parametro src=...). UTILIDAD: no necesitamos repetir el código en todas las páginas donde lo utilicemos.
  39. Crear una hoja de estilo llamada miestilo.css y utilizarla en una página (etiqueta style, @import url(pagina)). UTILIDAD: no necesitamos repetir la decoración para varias páginas.
  40. Crear una página que solicite usuario y contraseña y lo almacene en un cookie para una próxima conexión. (propiedad document.cookie con métodos indexOf y substring con la cadena.)
  41. Crear otra página que acceda a estos datos.
  42. Página de recogida de datos personales: nombre, apellidos, dirección, código postal, teléfono, correo electrónico. Comprobar los datos antes de enviar: que estén todos rellenos, que el código postal tenga cinco dígitos, que el correo electrónico tenga @ y., teléfono con números correctos. Transformar los datos a mayúsculas. USO MÁS IMPORTANTE DE JAVASCRIPT porque evita que carguemos el servidor procesando datos sin verificar.
  43. Factura con datos para impresión, detalles y calculo de total. Calculo de totales parciales, cálculo de IVA y total factura. Guardar último número de factura en Cookie.

Propuesta de examen:

  1. Animación en barra de título: (Título de la página:”página de animación en título”) que vaya cambiando cada 2 segundos una y solo una de las letras a mayúsculas. Cuando llegue a la última letra debe comenzar por el principio.
  2. Elegir color de fondo: Cuadro de lista que contenga los nombres de tres colores y que al seleccionar el color nos cambie en el fondo de la página.
  3. Verificar NIF: Página que solicite el NIF en un cuadro de texto y al pulsar el botón ”comprobar” verifique el dato. Debe tener una longitud de 9 caracteres, en caso contrario, mostrar mensaje y devolver el control al cuadro de texto.
  4. Página informativa: Mostrar en el cuerpo de la página, al cargarse ésta, la resolución de la pantalla del cliente conectado.
  5. Cambia color automático: Página en la que cambie el color de fondo automáticamente cada 5 segundos.
  6. Efecto parpadeo en barra de estado: Página que muestre durante un segundo un mensaje en barra de estado y durante otro segundo en blanco.
  7. Cerrar ventana
  8. Personalizar título de página: Pantalla con cuadro de texto de varias líneas que solicite el título de la página y lo establezca al hacer doble clic en el cuadro de texto