Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/formularios/ejemplos»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «==Formulario 1== {{Actividad Preguntamos algún dato en un formulario *Titulo *Edad del usuario *Luego mostrarmos una página que tenga como h1 el título de la página *En...»)
 
(Formulario 1)
 
(10 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
{{Usuario:ManuelRomero/JavaScript/formularios/nav}}
 +
<br />
 +
__NOTOC__
 
==Formulario 1==
 
==Formulario 1==
{{Actividad
+
<br />
 +
{{Actividad|
 +
Preguntamos algún dato en un formulario
 +
*Titulo
 +
*Edad del usuario
 +
*Luego mostramos una página que tenga como h1 el título de la página
 +
*En función de la edad cargaremos una imagen u otra (tendremos 3 imágenes)
 +
#0-12 años imagen infantil
 +
#13-22 años imagen juvenil
 +
#mas de 23 años imagen adulta
 +
}}
 +
 
 +
{{Actividad|
 +
*Hacemos un formulario pidiendo los datos de usuario
 +
#Datos personales (Nombre, Apellidos Dirección Fecha nacimiento, DNI )
 +
#Datos académicos (Estudos realizados, Estudios actuales, Idiomas)
 +
#Datos bancarios (IBAN + 20 dígitos cuenta bancaria (banco-oficiana-DC. CC)
 +
#Datos acceso (Usuario y password con verificación)
 +
Hay que validar los datos
 +
password (letras mayúsculas, minúsculas números y una longitud de 8 a 10 caracteres)
 +
password y verificación que coincidan
 +
DNI la letra la calculamos automáticamente
 +
*Tras validar los datos mostraremos en una página los datos del usuario
 +
 +
}}
 +
 
 
Preguntamos algún dato en un formulario
 
Preguntamos algún dato en un formulario
 
*Titulo
 
*Titulo
Línea 9: Línea 37:
 
#13-22 años imagen juvenil
 
#13-22 años imagen juvenil
 
#mas de 23 años imagen adulta
 
#mas de 23 años imagen adulta
 +
}}
 +
 +
 +
{{Actividad|
 +
*Dado una página con imágenes, haz un programa que cuando apriete un bótón se desplacen las imágenes
 +
<source lang=html5>
 +
<img src="img/koala.jpg" alt="" width=200px height=200px/>
 +
<img src="img/faro.jpg" alt="" width=200px height=200px/>
 +
<img src="img/medusa.jpg" alt="" width=200px height=200px/>
 +
<img src="img/desierto.jpg" alt="" width=200px height=200px/>
 +
</source>
 +
Te puedes descargar de aquí las imágenes
 +
[[imagen:koala.jpg|200px]]
 +
[[imagen:faro.jpg|200px]]
 +
[[imagen:Mimedusa.jpg|200px]]
 +
[[imagen:Midesierto.jpg|200px]]
 +
}}
 +
{{Actividad|
 +
*Modifica el ejerecicio anterior para que cada imagen tenga un texto asociado (dos o tres líneas)
 +
*Solo se debe de visualizar el texto de la imagen seleccionada.
 +
*Además que cuando haga un click sobre ella que se le ponga un borde (solo a esa imagen)
 +
}}
 +
 +
{{Actividad|
 +
*Intenta hacer lo mismo, pero sólo con el evento de poner el ratón sobre la imagen.
 
}}
 
}}

Última revisión de 03:27 22 mar 2016



Formulario 1



Icon activity.jpg

Actividad

Preguntamos algún dato en un formulario

  • Titulo
  • Edad del usuario
  • Luego mostramos una página que tenga como h1 el título de la página
  • En función de la edad cargaremos una imagen u otra (tendremos 3 imágenes)
  1. 0-12 años imagen infantil
  2. 13-22 años imagen juvenil
  3. mas de 23 años imagen adulta






Icon activity.jpg

Actividad

  • Hacemos un formulario pidiendo los datos de usuario
  1. Datos personales (Nombre, Apellidos Dirección Fecha nacimiento, DNI )
  2. Datos académicos (Estudos realizados, Estudios actuales, Idiomas)
  3. Datos bancarios (IBAN + 20 dígitos cuenta bancaria (banco-oficiana-DC. CC)
  4. Datos acceso (Usuario y password con verificación)

Hay que validar los datos

password (letras mayúsculas, minúsculas números y una longitud de 8 a 10 caracteres)
password y verificación que coincidan
DNI la letra la calculamos automáticamente
  • Tras validar los datos mostraremos en una página los datos del usuario





Preguntamos algún dato en un formulario

  • Titulo
  • Edad del usuario
  • Luego mostrarmos una página que tenga como h1 el título de la página
  • En función de la edad cargaremos una imagen u otra (tendremos 3 imágenes)
  1. 0-12 años imagen infantil
  2. 13-22 años imagen juvenil
  3. mas de 23 años imagen adulta

}}



Icon activity.jpg

Actividad

  • Dado una página con imágenes, haz un programa que cuando apriete un bótón se desplacen las imágenes
<img src="img/koala.jpg" alt="" width=200px height=200px/>
<img src="img/faro.jpg" alt="" width=200px height=200px/>
<img src="img/medusa.jpg" alt="" width=200px height=200px/>
<img src="img/desierto.jpg" alt="" width=200px height=200px/>

Te puedes descargar de aquí las imágenes Koala.jpg Faro.jpg Mimedusa.jpg Midesierto.jpg






Icon activity.jpg

Actividad

  • Modifica el ejerecicio anterior para que cada imagen tenga un texto asociado (dos o tres líneas)
  • Solo se debe de visualizar el texto de la imagen seleccionada.
  • Además que cuando haga un click sobre ella que se le ponga un borde (solo a esa imagen)






Icon activity.jpg

Actividad

  • Intenta hacer lo mismo, pero sólo con el evento de poner el ratón sobre la imagen.