GUÍA DE APRENDIZAJE DEL ALUMNO

Asignatura: DESARROLLAR APLICACIONES QUE SE EJECUTAN EN EL CLIENTE

Grupo:
Nombre del alumno:
Fecha de entrega:
Ponderación de la actividad: 16.6%

Título: Funciones
Duración: 6 horas / 12 semana

Lo que voy a Una función es un conjunto de instrucciones que se agrupan para realizar una tarea
aprender: concreta y que se pueden reutilizar fácilmente.

1. DIAGNÓSTICO/EXPLORACIÓN
Duración: 20 minutos
INDICACIONES
Preguntar a los estudiantes los eventos de formulario abordados la semana anterior (onfocus y
onblur)

ACTIVIDADES DE APRENDIZAJE
1. Con una lluvia de ideas los alumnos explican cuál es la función de los eventos mencionados
anteriormente.

Actividad 1.1:
Eventos de formulario

1. onfocus - Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.

El foco de la aplicación es el lugar donde está situado el cursor.
2. onblur – Se produce un evento onblur cuando un elemento pierde el foco de la aplicación.

2.DESARROLLO DE DESTREZAS/HABILIDADES
Duración: 130 min
INDICACIONES
1. Leer con atención el texto EVENTOS DE FORMULARIO

ACTIVIDADES DE APRENDIZAJE
2.1. Con ayuda del docente lee y analiza el texto EVENTOS DE FORMULARIO

Actividad 2.1:
2.1. Instrucciones: Copia en tu cuaderno la función y elementos a los que se aplica cada
uno de los eventos mencionados. Imprime y pega en tu cuaderno el ejemplo y código de
cada evento.

EVENTOS DE FORMULARIO

1. onchange – Se produce este evento cuando cambia el estado de un elemento de formulario, en

ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento.

Elementos a los que aplica: <input>, <select>, <textarea>

Ejemplo: El siguiente código cambia el tipo y tamaño de letra cuando se elige alguna de las opciones
de un Select, además de insertar el valor del Select en una etiqueta.
2. onselect – Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.

Elementos a los que aplica: <input>, <textarea>

Ejemplo: El siguiente código cambia el tamaño de letra del texto escrito en el TextArea y el fondo del
body cuando se selecciona algún texto del TextArea.

3. onsubmit - Ocurre cuando el usuario presiona el botón de enviar (submit) el formulario. Se ejecuta
antes del envío propiamente dicho.

Elementos a los que aplica: <form>

Ejemplo: El siguiente código muestra un mensaje emergente al momento de dar clic en el botón
(submit) “ENVIAR DATO”. Cabe mencionar que la llamada del evento se pone en la etiqueta form.
4. onreset - Este evento está asociado a los formularios y se desata en el momento que un usuario
hace clic en el botón de reset de un formulario.

Elementos a los que aplica: <form>

Ejemplo: El siguiente código cambia el color de fondo de los cuadros de texto a rojo, pone el foco en
el cuadro de texto nombre y muestra un mensaje emergente al momento de presionar el botón de
reset.
 3.TRANSFERENCIA/ APLICACIÓN Y CIERRE
Duración: 150 min
INDICACIONES
1. Elaborar las siguientes páginas web utilizando Eventos de Formulario

ACTIVIDADES DE APRENDIZAJE
3.1. Desarrolla los siguientes ejemplos de diferentes eventos en páginas web

Actividad 3.1:
INSTRUCCIONES: Elaborar las siguientes páginas web con código JavaScript y HTML usando los
eventos onchange y onselect.
1. Crear una página web que maneje un Select con marcas de autos [NISSAN, VW, BMW, TOYOTA,
AUDI] donde se manejen las siguientes características:
▪ Al momento de elegir cualquiera de las opciones del Select, se debe mostrar:
i. El logotipo en un img
ii. La historia en un textarea.
iii. Los modelos más conocidos en un textarea.
iv. La imagen de algún modelo de la marca en un img.
v. Cambiar el color de fondo de la pantalla por cada marca de auto.

2. Crear una página web que genere una lista de destinos

vacacionales con los siguientes aspectos a cubrir:
▪ Al momento de seleccionar el texto de cualquiera
de los cuatro títulos (cuadros de texto) se deben
realizar las siguientes acciones:
i. Se cambia el color en el fondo del
contenedor (fieldset) que se está
utilizando.
ii. Se cambia el color en el fondo del título
(cuadro de texto) que se está
seleccionando, además de aplicar un
borde con color y esquinas redondeadas.
iii. Poner una imagen en la etiqueta img
acorde al título que se seleccionó.
iv. Insertar un texto con la descripción del
destino que se seleccionó al textarea que
está debajo de la imagen,
INSTRUCCIONES: Elaborar las siguientes páginas web
con código JavaScript y HTML usando los eventos onsubmit y onreset.
1. Crear una página web que desarrolle un formulario con los datos que se muestran en la imagen. Al
momento de presionar el botón de envío (submit), se deben mostrar un mensaje de confirmación
 todos los datos introducidos en el formulario, donde en caso de aceptar los envía y en caso de
cancelar, nos regresa al formulario y cambia el color de fondo a rojo de todos los cuadros de texto.

2. Crear una página web que desarrolle un formulario con los datos que se muestran en la imagen. Al
momento de presionar el botón de borrado (reset), se deben mostrar un mensaje de alerta con todos
los datos introducidos en el formulario, además de cambiar el color de fondo a verde a todos los
cuadros de texto y el textarea.

PARA SABER MÁS CONSULTA:

¡FELICIDADES, HAZ CONCLUIDO!
CONTINÚA CON MÁS RETOS
 ANEXOS

Listas de cotejo para las páginas web utilizando el código JavaScript y HTML aplicando las
funciones y los cuadros de diálogo.

Lista de cotejo: páginas web usando los eventos onchange y

onselect. MARCAS DE AUTO
Maestro(a):
Estudiante: Grupo: Fecha:
Instrucciones: marque ✔en Sí, si el estudiante muestra el criterio,
marque ✔en No, si el estudiante no muestra el criterio.
Valor Criterio Si No
Maneja un Select con marcas de autos
20
[NISSAN, VW, BMW, TOYOTA, AUDI]
20 El logotipo en un img
10 La historia en un textarea.
10 Los modelos más conocidos en un textarea.
La imagen de algún modelo de la marca en un
20
img.
Cambia el color de fondo de la pantalla por
20
cada marca de auto.
Puntos a obtener
Total
Observaciones:

Lista de cotejo: páginas web usando los eventos onchange y

onselect. DESTINOS VACACIONES
Maestro(a):
Estudiante: Grupo: Fecha:
Instrucciones: marque ✔en Sí, si el estudiante muestra el criterio,
marque ✔en No, si el estudiante no muestra el criterio.
Valor Criterio Si No
Al momento de seleccionar el texto de
cualquiera de los cuatro títulos (cuadros de
texto) se deben realizar las siguientes
acciones:
Se cambia el color en el fondo del contenedor
20
(fieldset) que se está utilizando.
Se cambia el color en el fondo del título (cuadro
de texto) que se está seleccionando, además
20
de aplicar un borde con color y esquinas
redondeadas.
Usa una imagen en la etiqueta img acorde al
20
título que se seleccionó.
Inserta un texto con la descripción del destino
20 que se seleccionó al textarea que está debajo
de la imagen
Puntos a obtener
 Total
Observaciones:

Lista de cotejo: Páginas web usando los eventos onsubmit y onreset.

AÑADIR DIRECCION DE ENVIO
Maestro(a):
Estudiante: Grupo: Fecha:
Instrucciones: marque ✔en Sí, si el estudiante muestra el criterio,
marque ✔en No, si el estudiante no muestra el criterio.
Valor Criterio Si No
Crea una página web que desarrolle un
20 formulario con los datos que se muestran
en la imagen.,
Al momento de presionar el botón de envío
30 (submit), se muestra un mensaje de
confirmación.
En caso de aceptar envía todos los datos y
30 en caso de cancelar, nos regresa al
formulario
Cambia el color de fondo a rojo de todos
20
los cuadros de texto.
Puntos a obtener
Total
Observaciones:

Lista de cotejo: Páginas web usando los eventos onsubmit y onreset.

FORMULARIO DE SOPORTE TÉCNICO
Maestro(a):
Estudiante: Grupo: Fecha:
Instrucciones: marque ✔en Sí, si el estudiante muestra el criterio,
marque ✔en No, si el estudiante no muestra el criterio.
Valor Criterio Si No
Crea una página web que desarrolle un
30 formulario con los datos que se muestran
en la imagen.
Al momento de presionar el botón de
borrado (reset), se muestra un mensaje de
40
alerta con todos los datos introducidos en el
formulario
Cambia el color de fondo a verde a todos
30
los cuadros de texto y el textarea.
Puntos a obtener
Total
Observaciones: