MANUAL DE

APRENDIZAJE
2º PARCIAL
PLANTEL O CENTRO: MAGDALENA

GRADO: TERCER SEMESTRE

Clase___

MÓDULO PROFESIONAL:

MÓDULO 2: APLICA
SEMESTRE A
METODOLOGÍAS DE DESARROLLO AGOSTO – ENERO 2022
DE SOFTWARE CON HERRAMIENTAS
DE PROGRAMACIÓN VISUAL.
SUBMÓDULO II: APLICA LA
METODOLOGÍA DE DESARROLLO
RÁPIDO DE APLICACIONES CON
PROGRAMACIÓN ORIENTADA A
EVENTOS.

ELABORADO POR:
ACADEMIA DE PROGRAMACIÓN

FECHA DE ELABORACIÓN:
06/09/2021
 ÍNDICE

Contenido Página

INTRODUCCIÓN.................................................................................................................................................................3
PRESENTACIÓN DE LA ASIGNATURA..........................................................................................................................4
PROPÓSITO DE LA ASIGNATURA..................................................................................................................................5
COMPETENCIAS A DESARROLLAR...............................................................................................................................6
EXPLICACIÓN DE LA METODOLOGÍA:.........................................................................................................................7
CRITERIOS DE EVALUACIÓN:........................................................................................................................................7
CRONOGRAMA ENTREGA DE PRODUCTOS SEGUNDO PARCIAL..........................................................................7
FUENTES DE CONSULTA.................................................................................................................................................8
SEGUNDO PARCIAL..........................................................................................................................................................9
 ETAPA DE INICIO........................................................................................................................................................9
EVALUACIÓN DIAGNÓSTICA.......................................................................................................................................10
 ACTIVIDAD 1.............................................................................................................................................................11
 ETAPA DE DESARROLLO........................................................................................................................................12
ACTIVIDAD 2....................................................................................................................................................................14
ACTIVIDAD 3....................................................................................................................................................................18
 ETAPA DE CIERRE....................................................................................................................................................19
TEMA 2. ELEMENTOS DE UN FORMULARIO PARA LA VALIDACIÓN DE DATOS............................................22
ACTIVIDAD 1:...................................................................................................................................................................23
ACTIVIDAD 2:...................................................................................................................................................................29
 PLAN DE EVALUACIÓN..........................................................................................................................................32
TERCER PARCIAL............................................................................................................................................................33
 INTRODUCCIÓN
BIENVENIDA
Las y los facilitador(a)s que integran la Academia de Programación realizaron esta guía con el fin de
que este documento te ayude a desarrollar tus conocimientos en este semestre en la asignatura del
Módulo II, Submódulo 2: Aplica la metodología de desarrollo rápido de aplicaciones con programación
orientada a eventos.
En el contexto actual, en el que la preocupación por la pandemia del Covid-19 es preponderante, la cual
ha obligado a todos, las y los integrantes de la comunidad escolar a pensar y reinventar estrategias de
enseñanza que al mismo tiempo que permiten el aprendizaje a distancia, también fomenten el trabajo
autónomo y tu disposición al aprendizaje.
El presente cuadernillo surge de esta preocupación e inquietud por integrar lo mejor de la educación a
distancia con tu trabajo autónomo en el Modelo Híbrido.
Así pues, deseamos que este Manual de prendizaje sea significativo para tu aprendizaje durante este
semestre.
Bienvenido.
PRESENTACIÓN DE LA ASIGNATURA
Esta asignatura te brinda una introducción a la mteria modular Aplica la metodología de desarrollo
rápido de aplicaciones con programación orientada a eventos, para ayudarte a comprender la
programación orientada a eventos y cuáles son las posibilidades interpretativas que ofrecen.
Identificarás los principales elementos que conforman y determinan la programación orientada a
eventos.
El aprender a programar con orientación a eventos te va a introducir al paradigma de la programación,
pues este paradigma de programación es lo más fácil en lo que ha programación existe al no necesitar
que manejes mucho conocimiento del lenguaje de programación y por ende, no importando mucho el
lenguaje deprogramación.
Sabrás el cómo acceder a la internet, búsqueda de información pertinente y relevante, discriminar
información, manejo de las herramientas digitales para expresarte de la mejor manera, creación de
gráficos a través de herramientas exprofeso, manejo de redes sociales, ciudadanía digital.
Así pues, la programación dirigida por eventos es un paradigma de programación en el que tanto la
estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el
sistema, definidos por el usuario o que ellos mismos provoquen.
Para entender la programación dirigida por eventos, podemos oponerla a lo que no es: mientras en la
programación secuencial (o estructurada) es el programador el que define cuál va a ser el flujo del
programa, en la programación dirigida por eventos será el propio usuario (o lo que sea que esté
accionando el programa) el que dirija el flujo del programa. Aunque en la programación secuencial
puede haber intervención de un agente externo al programa, estas intervenciones ocurrirán cuando el
programador lo haya determinado, y no en cualquier momento como puede ser en el caso de la
programación dirigida por
eventos.
El creador de un programa dirigido por eventos debe definir los eventos que manejarán su programa y
las acciones que se realizarán al producirse cada uno de ellos, lo que se conoce como el administrador
de evento. Los eventos soportados estarán determinados por el lenguaje de programación utilizado, por
el sistema operativo e incluso por eventos creados por el mismo programador..
PROPÓSITO DE LA ASIGNATURA

La velocidad con que avanza en los últimos años la tecnología del Hardware de las computadoras, es
muy grande, con lo que se ha logrado tener computadoras más poderosas, baratas y compactas. Pero
el Software no ha tenido el mismo comportamiento, ya que al desarrollar aplicaciones, es frecuente
que se excedan los tiempos de entrega así como los costos de los sistemas de información (tanto de
desarrollo como de mantenimiento), además de ser poco flexibles.

Se han creado diferentes herramientas de ayuda al desarrollo, para lograr aumentar la productividad
en el Software como son:
• Técnicas como las del Diseño Estructurado y el desarrollo descendente (top- down)
• Herramientas de Ingeniería de Software asistida por computadora conocida como CASE
• Desarrollo de lenguajes de programación más poderosos como los lenguajes de cuarta
generación (4GL) y los orientados a objetos (POO).
• Diversas herramientas como gestión de proyectos, gestión de la configuración, ayuda en las
pruebas, bibliotecas de clases de objetos, entre otras.

En donde se va hacer más énfasis es en los lenguajes de programación, sobre todo en los que es
donde se tiene la Programación Orientada a Objetos (POO) y es donde se tienen lenguajes como
JAVA, que es el que se va a utilizar en esta asignatura.

Un lenguaje en términos generales, se puede entender como “... los sistemas de símbolos y signos
convencionales que son aceptados y usados individual y socialmente, con el fin de comunicar o
expresar sentimientos, ideas, conocimientos , etc., por ejemplo, el lenguaje natural o articulado, el
corporal, el artificial o formal, los sistemas de señalamiento, el arte, entre muchos otros tipos...”.

Existen también los lenguajes artificiales, que entre sus características, tenemos el que no es ambiguo
y es universal, entre los que se encuentran los de las Matemáticas y los de Programación.

En los lenguajes de programación (conjunto de sintaxis y reglas semánticas con el fin de comunicar
ideas sobre algoritmos entre las computadoras y las personas), existen diferentes clasificaciones una
de ellas es la que a continuación se muestra:
• Programación Imperativa, donde el programa es una serie de pasos, realizando cada uno de
ellos un cálculo (como ejemplos están Cobol, Fortran entre otros).
• Programación Funcional, el programa es un conjunto de funciones matemáticas que se
combinan (como Lisp, Scheme, etc.).
• Programación Lógica (también conocida como Declarativa), aquí el programa es una
colección de declaraciones lógicas (ejemplo Prolog).
• Programación Concurrente, la programación consiste en un grupo de procesos corporativos,
que llegan a compartir información ocasionalmente entre ellos (ejemplos LINDA y Fortran de
alto rendimiento HPF 1995)
• Programación guiada por eventos, el programa consiste en un ciclo continuo y que va a
responder a los eventos generados aleatoriamente (orden no predecible), ya que dichos
 eventos son originados a partir de acciones del usuario en la pantalla (ejemplos JAVA y Visual
Basic)
• Programación Orientada a Objetos (POO), el programa está compuesto por varios objetos
que interactúan entre ellos a través de mensajes, los cuales hacen que cambien su estado
(ejemplos C++, Eiffel y JAVA).

Así pues, como la programación orientada a eventos en la ventana que te servirá como el lenguaje
que te introducirá a los diferentes paradigmas de programación, pues no se necesita mucho
conocimiento de programación para elaborar ya sea una App o un programa de computadora, no
importando la plataforma en la que se esté desarrollando.

COMPETENCIAS A DESARROLLAR
4.1 Expresa ideas y conceptos mediante representaciones lingüísticas,
matemáticas o gráficas.
Competencias
4.2 Aplica distintas estrategias comunicativas según quienes sean sus
genéricas
interlocutores, el contexto en el que se encuentra y los objetivos que
persigue.
Competencias CE9 Diseña modelos o prototipos para resolver problemas, satisfacer
disciplinares necesidades o demostrar principios científicos.
 Identifica los elementos del paradigma de la programación orientada a
Competencias eventos
profesionales  Aplica el modelo de desarrollo rápido de aplicaciones (RAD) para el
desarrollo de software
EXPLICACIÓN DE LA METODOLOGÍA:
(presencial, distancia y trabajo autónomo; si cuentan con conectividad constante, parcial o sin conectividad)
y lo que se espera que el aprendiente realice. Recomendaciones claves para el estudio independiente (trabajo
autónomo).
Se trabajará de forma híbrida, por lo que dado que la materia implica ocho horas semanales, las horas
presenciales serán tres horas a la semana, tres horas en clase a distancia y otras dos horas será de trabajo
autónomo (realización de tareas, investigación, proyecto, etc., según sea el caso).

Total de horas Total horas Total de horas de

Parcial
presenciales a distancia trabajo autónomo
Primero 6 6 36
Segundo 6 6 36
Tercero 6 6 36

CRITERIOS DE EVALUACIÓN:
CRITERIOS PONDERACIÓN
Productos 80%
Proyecto interdisciplinar N/A
Mod. Emprendimiento 10%
Tutoría-OE 10%

CRONOGRAMA ENTREGA DE PRODUCTOS SEGUNDO PARCIAL

PONDERACIÓ
FECHA DE
TEMA PRODUCTO(S) INSTRUMENTO N DE
ENTREGA
EVALUACIÓN
Recuperación de Evaluación diagnóstica 2º 0% (No
Lista de cotejo 18/10/2021
conocimientos. parcial ponderable)
Tabla descriptiva de eventos en
Lista de cotejo 10% 22/10/2021
programación
Eventos Cuestionario contestado Lista de cotejo 20% 29/10/2021
Cuestionario contestado Lista de cotejo 10% 05/11/2021
Formularios Programa en HTML con los
ejemplos de las funciones alert, Lista de cotejo 20% 16/11/2021
prompt y confirm.
Programas en donde se aplique Lista de cotejo 20% 24/11/2021
las funciones alert, prompt y
 confirm

FUENTES DE CONSULTA

PRIMARIAS:
https://content.breatheco.de/es/lesson/event-driven-programming
Manual básico para empezar a trabajar con macros de Visual Basic para Excel, Universidad Politécnica
de Valencia, 2014
Buenas prácticas FRONTEND. (HTML) 2018
Fundamentos de ingeniería de software,Universidad Autónoma Metropolitana, 2019
Introducción a la programción en Excel con Visual Basic, Universidad de Catluña, 2015
El gran libro de la programación HTML5, CSS Y JAVA SCRIPT J.D GAUCHAT EDICION. MARCOMBO

SECUNDARIAS:
De giusti, a. Algoritmos, datos y programas con aplicaciones en pascal, delphi y visual da vinci, buenos
aires, pearson education, 2001, 472 pp.
Hopcroft, j. Motwani, r. Y ullman, j. Introducción a la teoría de autómatas, lenguajes y computación, 2a
edición, madrid, pearson addison wesley, 2002, 584 pp.

TERCIARIAS:
Deitel, deitel. Como programar en c++. Prentice-hall. México. 1999.
Levine, guillermo. Computación y programación moderna. Perspectiva integral de la informática.
Addison-wesley. México. 2001.
SEGUNDO PARCIAL
Aplica metodologías de desarrollo de software con herramientas de
EJE:
programación visual.

COMPONENTE
Módulo II
:

CONTENIDO Aplica la metodología de desarrollo rápido de aplicaciones con programación

CENTRAL: orientada a eventos

 ETAPA DE INICIO

Contenido específico:
 TEMA 1. Introducción a JavaScript
Introducción:
La programación es una tarea compleja. Los lenguajes de programación visual buscan facilitar la
programación mediante un cambio en la notación. En el enfoque visual un programa es construido
utilizando elementos gráficos y textuales para crear expresiones multidimensionales; este enfoque hace el
proceso de programación más fácil, rápido y confiable.
JavaScript, el lenguaje de scripts Javascript actualmente es principalmente utilizado en internet, junto con
las páginas web (HTML o XHTML). Javascript está directamente incluido en la página web (o en un archivo
externo) y mejora una página HTML, añadiendo interacción del usuario, animación, ayudas a la navegación,
tales como:
• Mostrar / ocultar el texto;
• Deslizamiento de imágenes;
• Crear presentaciones de diapositivas;
• Crear burbujas de información.
Objetivo
Que el(a) aprendiente sea capaz de distinguir, para cada problema particular, la interfaz gráfica del usuario,
los componentes que la compondrán, las propiedades de los mismos, y los manejadores para los posibles
eventos que puedan producirse en el sistema bajo el lenguaje de programación de JavaScript.
Desarrollo de competencias
4 Escucha, interpreta y emite mensajes pertinentes en distintos
contextos mediante la utilización de medios, códigos y
Competencia Genérica herramientas apropiados.
4.5 Maneja las tecnologías de la información y la comunicación para
obtener información y expresar ideas.
 C12.Utiliza las tecnologías de la información y comunicación para
Competencia Disciplinares investigar, resolver problemas, producir materiales y transmitir
información.
Identifica los elementos del paradigma de la programación
Competencia Profesional
orientada a eventos.

Recuperar conocimientos previos (estrategia)

El facilitador inicia con la pregunta detonadora de ¿Qué es un Lenguaje de programación como JavaScript?
Socializa el tema ante el grupo (presencial a distancia, según sea el caso), preguntará al azar al grupo en
general o en lo particular sobre su concepto, después de haber intervenido con su respuesta algun@s
aprendientes, el facilitador explica el concepto, sus alcances, límites del mismo.
Posteriormente, aclaradas todas las dudas de las y los aprendientes, el facilitador explica cómo se va a
calificar la materia, los medios de comunicación con el docente, el código de acceso a la plataforma,
fechas de entrega, formas de comportarse en las clases.

Al finalizar el encuadre de la materia, el facilitador pide al grupo realizar la siguiente actividad:

1.- Clase Presencial:
El facilitador proporciona la “Evaluación diagnóstica” a las y los aprendientes para
que la contesten
2.- Clase a distancia:
Las y los aprendientes revisan la plataforma Classroom, consultar la actividad
“Evaluación diagnóstica” así como fecha y hora límite para responderla.

EVALUACIÓN DIAGNÓSTICA:

1. ¿Qué es un lenguaje de programación?

2. ¿Qué es un lenguaje de programación visual?
3. ¿Qué es un lenguaje de programación orientado a objetos?
4. ¿Qué es un evento?
5. Menciona 5 eventos diferentes que pueden ocurrir con un ratón
6. ¿Qué diferencia hay entre los eventos keypress, keydow y keyup?
7. ¿Qué diferencia hay entre función, subrutina y procedimiento?
8. Menciona la diferencia entre dos clics seguidos y doble clic
9. ¿Qué diferencia hay entre puntero del ratón y cursor?
10. ¿Qué diferencia hay entre un programa de aplicación, una App y un código fuente?

Planteamiento de caso o problema

Imagina que estás sentado en la sala de tu casa, tomas tu computadora y abres el navegador de internet de tu
computadora, comienzas por buscar páginas sobre los juegos más recientes para tu consola de videojuegos
favorita, comienzas a ver una lista interminable de juegos recientes y atractivos, cuando pasas el puntero del
ratón sobre sólo algunos, la imagen del videojuego se agranda, se emite un sonido de fanfarrias y se muestra
también un mensaje de que dicho juego tiene oferta de descuento del 30%. Todo lo anterior ocurre sin
presionar ninguna tecla o dar clic con el ratón, sólo basta con pasar el puntero del ratón sobre ellos.
Realiza la siguiente actividad y describe en tus propias palabras:
a) ¿Porqué se agranda la imagen de los video juegos que tienen oferta?
b) ¿Porqué no en todos los videojuegos se agranda la imagen?
c) ¿Qué tipo de eventos cree que se hayan programado en la página web para realizado este efecto?
https://www.youtube.com/watch?v=8Juz73pfNhQ

ACTIVIDAD 1: Como actividad complementaria, el facilitador pide a las y los aprendientes que
investiguen cuáles son los eventos que se tienen en la programación. Posteriormente, generarás una tabla
con todos y cada uno de los eventos, poniendo como primera columna el nombre del evento, segunda
columna la descripción del evento y tercera columna cuál es la sintaxis de ese evento en el lenguaje de
programación JavaScript.

Glosario (estrategia)

Evento.- Es algo que sucede! como hacer clic en un botón, presionar una tecla en el teclado, pasar un div con el mouse, etc..

Programa.- Un programa es un conjunto de pasos lógicos escritos en un lenguaje de programación que nos permite realizar una
tarea específica. El programa suele contar con una interfaz de usuario, es decir, un medio visual mediante el cual interactuamos
con la aplicación. Algunos ejemplos son la calculadora, el navegador de internet, un teclado en pantalla para el celular, etc.

Objetos.- Un objeto es una unidad dentro de un programa informático que tiene un estado, y un comportamiento. Es decir, tiene
una serie de datos almacenados y tareas que realiza con esos datos en el tiempo de ejecución. Los objetos se puede crear
instanciando clases

Lenguaje de programación.- Un lenguaje de programación es una forma de comunicarnos con una computadora, tablet o celular
e indicarle qué queremos hacer.
Existen distintos tipos de lenguaje: principalmente de bajo nivel y de alto nivel. La diferencia se encuentra en lo cerca o lejos que
estemos del hardware de nuestro equipo. Esta cercanía tiene que ver con el control que tengamos sobre el dispositivo, placa o
controlador.
 ETAPA DE DESARROLLO

Actividades de aprendizaje: (40 minutos)

DESCRIPCIÓN DE LA ACTIVIDAD. (adquisición de información)

Eventos con ratón

Tipo de evento Descripción
Cuando el usuario hace clic con el mouse o el dedo en
Click
cualquier elemento HTML.
El evento ocurre cuando el puntero se mueve hacia dentro
Mouseover, Mouseout (para el mouseover) o hacia afuera (para el mouseout) un
elemento.
Contextmenu Cuando el usuario hace clic derecho en el mouse.

Mousemove Si el usuario mueve el mouse sobre el objeto

Mousedown or Mouseup Si el usuario presiona o suelta el mouse respectivamente

Eventos Frame
Tipo de evento Descripción
Load El navegador ha terminado de cargar el sitio web.
El evento ocurre cuando se produce un error al cargar un
Error
archivo externo (como un CSS o un JavaScript).
El evento ocurre cuando se produce un error al cargar un
Scroll
archivo externo (como un CSS o un JavaScript).
Cuando el usuario se enfoca en una ventana / pestaña
PageHide PageShow diferente; o cuando el usuario vuelve de una ventana /
pestaña diferente.
Resize Cuando la ventana se redimensiona.

Eventos Forms
Tipo de evento Descripción
El evento ocurre cuando el puntero se mueve a un elemento
Focusin and Focusout
o a uno de los elementos secundarios del elemento.
El evento ocurre cuando un elemento obtiene la entrada del
Input
usuario.
El evento ocurre cuando el contenido de un elemento del
formulario, la selección o el estado previamente
Change
establecido han cambiado (para <input>, <keygen>,
<select>, y <textarea>)
 Submit El evento ocurre cuando se envía un formulario.

Eventos del Teclado

Tipo de evento Descripción
Keyup Cuando el usuario suelta la tecla del teclado.

Keydown Cuando el usuario presiona la tecla del teclado.

Cuando el usuario presiona y suelta la tecla del teclado. La
diferencia de keydown / up es que Keypress solo funciona
Keypress
con teclas de caracteres. Por ejemplo, no funciona en las
flechas arriba.

ACTIVIDAD 2

Retoma el caso presentado al principio en la situación en la que navegabas en la internet buscando

videojuegos desde tu computadora y responde en tu libreta las siguientes preguntas:

 ¿Se aplican eventos durante la navegación en el internet buscando videojuegos?

 ¿Cuáles son los eventos que se ejecutan durante tu búsqueda de videojuegos?
 ¿Los eventos que identificaste están relacionados con las acciones relevantes que habías
identificado en la primera actividad? Si tu respuesta es si o no justifica el porqué.

 RECURSOS: Computadora con internet.

 PRODUCTO: Preguntas contestadas.
 DURACIÓN: 1 sesión de 50 minutos.
INTERROGATORIO METACOGNITIVO (sincrónico, asincrónico, presencial)
Duración: 15 minutos

➢ Actividad 2.1 Responde las siguientes preguntas y comparte tus respuestas en plenaria.

 ¿Describe cómo serían las páginas web sin eventos?

 ¿Qué diferencia hay entre una página web de finales de los 80´s y una página web actual?

 Si no existiera la programación orientada a eventos, ¿cómo sería tu celular?

 DESCRIPCIÓN DE LA ACTIVIDAD: (construcción del aprendizaje)

Actividad 3. Lee con atención el siguiente caso y responde en tu libreta lo que se solicita.
Entra a la siguiente página web de la tienda deparetamental: www.telcel.com

Al seleccionar el estado y aceptar las cookies la página web se muestra como:

Al pasar el puntero del ratón sobre diversas partes de la pantalla se muestran mensajes emergentes.
¿Cuáles son los mensajes emergentes?
¿Qué otros elementos flotantes ves en la página web?
¿Qué percibes cuando pasas el puntero del ratón sobre diversos objetos en la página web?
¿Qué cambios hay en el puntero del ratón al pasar sobre diversos objetos de la página web?

Lee la siguiente información de funciones en JavaScript: alert, prompt, confirm

alert
Muestra un mensaje y espera a que el usuario presione “Aceptar”.
Ejemplo: alert("Hello");
La mini ventana con el mensaje se llama * ventana modal *. La palabra “modal” significa que el visitante no
puede interactuar con el resto de la página, presionar otros botones, etc., hasta que se haya ocupado de la
ventana. En este caso, hasta que presionen “OK”.

Para lo anterior, abre el bloc de notas por ejemplo e introduce el siguiente texto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.alert("hola");
alert("Mi primer alert");
</script>
</body>
</html>

Como podrás ver aparecen dos mensajes, el segundo es:

prompt
La función prompt acepta dos argumentos:
Ejemplo: Result = prompt(title, [default]);
Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones
OK/CANCELAR. En donde title es el texto a mostrar al usuario. Default corresponde al segundo parámetro,
el cual es opcional, y si se pone, indica el valor inicial del campo de entrada.

El usuario puede escribir algo en el campo de entrada de solicitud y presionar OK. Así obtenemos ese texto
en result. O puede cancelar la entrada presionando Cancelar o presionando la tecla Esc obteniendo null en
result.

La llamada a prompt retorna el texto del campo de entrada o null si la entrada fue cancelada.

Por ejemplo:
let semestre = prompt ('¿Qué semestre estás estudiando?', 3);
alert(‘Estás estudiando el ‘ + semestre +‘ semestre’);

El código anterior, insertado en una estructura HTML, creará una ventana como la siguiente:

Al dar clic en el botón aceptar, mostrará la siguiente ventana:

El código completo es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let semestre = prompt ('¿Qué semestre estás estudiando?', 3);
alert('Estás estudiando el ' + semestre + ' semestre!');

</script>
</body>
</html>

confirm
Sintaxis:

resultado = confirm(pregunta);
La función confirm desplegará una ventana flotante con una pregunta y dos botones: OK y CANCELAR.
Dando como resultado TRUE si se pulsa el botón OK y FALSE si se presiona el botón CANCELAR.

Ejemplo:
let docente = confirm("¿Es un docente?"); alert( docente );

El código anterior desplegará la siguiente ventana:

Si se presiona el botón Aceptar, devolverá un TRUE y será almacenado en la variable docente, mostrando la
segunda ventana.
 ACTIVIDADES DE APRENDIZAJE: Duración: 30 minutos
ACTIVIDAD 3. Pasa el código de los scripts de cada una de las funciones mencionadas en la
información anterior (alert, prompt y confirm) y pruébalos en el navegador. Al final sube el archivo en la
Plataforma de Classroom.

Glosario (sincrónico, asincrónico, presencial)

Investiga el significado de las siguientes palabras

 Variable booleana
 Ventana emergente
 Ventana flotante

 ETAPA DE CIERRE
Recuperación de aprendizajes (Asincrónico/Presencial)

Elabora dos ejemplos de cada una las 3 funciones vistas (prompt, confirm y alert) en JavaScript.

Dudas de los aprendientes (estrategia)

Las dudas que vayan surgiendo, la o el aprendiente las podrá resolver durante las clases (Presenciales o a
Distancia, según sea el caso), o bien a través de la plataforma de WhatsApp con el o la Facilitador.
EVALUACIÓN FORMATIVA: (estrategia)

Lista de cotejo para ponderación de actividades

Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_______________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar: Actividad 1 “Tabla con los eventos en programación”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
2.- La tabla contiene al menos 10 tipos diferentes de eventos
3.- Se da una explicación clara, concisa y presisa de c/u de los eventos
4.- Menciona al menos tres categorías de eventos (ratón, teclado, forms)
Se menciona la estructura que debe llevar el evento en algún
5.-
lenguaje de programación
6.- No tuvo faltas de ortografía
7.- No es la copia de un programa entregado
Puntaje Total:
 Lista de cotejo para ponderación de actividades
Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_______________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar: Actividad 2 “Cuestionamiento”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
2.- Contestó correctamente la primer pregunta
3.- Contestó correctamente la segunda pregunta
4.- Contestó correctamente la tercer pregunta
5.- No tuvo faltas de ortografía
6.- No es la copia de un programa entregado
Puntaje Total:

Lista de cotejo para ponderación de actividades

Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_______________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar: Actividad 2.1 “2º Cuestionamiento”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
Describe de forma clara y cvoncisa, expresando conocimiento de
2.-
cómo serían las páginas web sin eventos?
Contestó correctamente las diferencias, enunciándo las diferencias
3.-
¿que hay entre las páginas de los 80’s y las actuales?
Mencionó de forma concisa y coherente el ¿cómo sería el celular
4.-
hoy si no hubiera la programción orientada a eventos?
5.- No tuvo faltas de ortografía
6.- No es la copia de un programa entregado
Puntaje Total:
 Lista de cotejo para ponderación de actividades
Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_________________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar:Actividad 3 “programas en JavaScript usando las funciones”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
Entregó dos ejemplos de uso de la función alert bajo programación
2.-
JavaScript y corren bien
Entregó dos ejemplos de uso de la función confirm bajo
3.-
programación JavaScript y corren bien
Entregó dos ejemplos de uso de la función prompt bajo
4.-
programación JavaScript y corren bien
5.- No tuvo faltas de ortografía
6.- No es la copia de un programa entregado
Puntaje Total:
 TEMA 2. ELEMENTOS DE UN FORMULARIO PARA LA
VALIDACIÓN DE DATOS

 ETAPA DE INICIO
Contenido específico:
Elementos de un formulario para la validación de datos
Introducción:
La programación de aplicaciones que contienen formularios web son una de las tareas básicas de
JavaScript, De tal forma que se evita recargar la página cuando el usuario comete errores al rellenar los
formularios.
Objetivo:
Los y los aprendientes reconocen los elementos de un formulario para la validación de datos
Desarrollo de competencias
5.6 Utiliza las tecnologías de la información y comunicación para
Competencia Genérica procesar e interpretar información.
C1 Identifica, ordena e interpreta las ideas, datos y conceptos explícitos
Competencia Disciplinares e implícitos en un texto, considerando el contexto en el que se generó y
en el que se recibe.
Competencia Profesional Implementa el diseño conceptual y lógico de la base de datos

Recuperar conocimientos previos (30 minutos)

El docente lanza al grupo las siguientes preguntas, en el que el o la aprendiente contesta:
 ¿Qué es un formulario de datos?
 ¿Has llenado alguna vez algún formulario?
 ¿Cuáles crees que sean los elementos que conforman un formulario web?
 ¿Has realizado formularios web?
Planteamiento de caso o problema (30 minutos) (sincrónico/asincrónico/presencial)
ACTIVIDAD 1:
En el Plantel se necesita recabar información sobre los datos personales de las y los estudiantes,
por lo que se sugiere elaborar un formulario en la web para que los estudiantes desde su casa
llenen esos datos personales.

A tu consideración, qué preguntas son necesarias poner en el formulario para conocer los
siguientes datos personales y realiza un diseño en tu libreta de un formulario con dichas
preguntas:
o Apellido Paterno
o Apellido Materno
o Nombre(s)
o Dirección (calle, colonia o barrio, número interior, número exterior, Código Postal)
o Nombre del Padre
o Nombre de la Madre
o Teléfono del Estudiante
o Teléfono del Tutor
o Teléfono de casa

 ETAPA DE DESARROLLO
Actividades de aprendizaje: (100 minutos)

📝 Lee con atención la siguiente información.

Los formularios son elementos muy importantes y socorridos cuando de recopilar información se trata. Para que te
familiarices más con qué son los formularios te recomiendo ver el siguiente video: ¿Qué son los FORMULARIOS
y cuáles son sus características?
A continuación se presentan dos ejemplos de formularios
CÓMO CREAR FORMULARIOS EN HTML
Crear un formulario en html implica construir los campos de información, estos pueden ser: campos de
texto, de número, selectores, desplegables, casillas de verificación y entre otras más.
como ya es sabido en html se emplean etiquetas para crear los diversos elementos existentes, y el caso
de los formularios no es la excepción, para crear los componentes del formulario HTML también
haremos uso de una variedad de etiquetas y atributos, los mismos que conoceremos a continuación.

ETIQUETA <FORM>
Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.
<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción,
registro, login, encuesta, etc.

HTML
1<form>
2…Aquí irán los campos del formulario...
3</form>

Etiqueta <input>
Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que
deseas obtener. Por ejemplo:
HTML
1 <form>
2 Tu nombre: <input/>
3 Tu apellido: <input/>
4 </form>

Resultado:
 Imagen con campos de texto input formularios html

¡Ah! Espera, ¿pero si queremos que sea una casilla de verificación? O ¿un campo de número? O lo que
sea, y además no siempre se utiliza la etiqueta  <input>… bueno no nos detengamos y sigamos
aprendiendo.
Existen varios tipos campos para formularios HTML y también debemos especificar que tipo de campo
es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE a continuación.

Atributo type
El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando.
Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

Valores de atributo type en formularios HTML

 Text: para campos de texto
 Password: para campos de contraseña
 Checkbox: para casillas de verificación
 Radio: para casillas de selección
 Submit: para botones de envío
 Reset: para botones de resetear
 File: para campos de selección de archivo

Ejemplo de formulario html con atributo type

En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que
aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta
de salto de linea <br/>, veamos:

HTML
1 <form>
2 Nombre:<input type="text"/>  <br/><br/>
3 Apellidos:<input type="text"/>   <br/><br/>
4 Contraseña: <input type="password"/>  <br/><br/>
 5 casilla de verificación: <input type="checkbox"/> <br/><br/>
6 casilla de selección: <input type="radio"/>  <br/><br/>
7 selección de archivo:  <input type="file">  <br/><br/>
8 botón de envio: <input type="submit">
9 </form>

Resultado:

Imagen de un formulario hecho en HTML con varios tipos de campos

Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la
etiqueta html <input>. Pero existen otros campos que no utilizan <input>, sino etiquetas específicas
como la etiqueta <select> y <textarea>, conozcamos de que se tratan.

Crear una desplegable con opciones HTML

Ahora aprenderemos a realizar desplegables en formularios, seguramente viste esos campos en las
que existe un desplegable con varias opciones dentro para seleccionar una de ellas, pues ahora
aprenderás a hacerlo.

Te recomiendo leer:  Qué es HTML para qué sirve y cómo funciona

Etiqueta <select>
Utilizaremos la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML
permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que
buscamos buena presentación de espacio en el formulario.

Etiqueta <option>
Utilizaremos la etiqueta <option> dentro de la etiqueta <select>.  <option> contiene una opción del
desplegable y podemos implementar la cantidad de opciones que deseemos.
Ejemplo de un campo desplegable en formularios HTML
El ejemplo a continuación trata de un desplegable con 5 opciones de colores para elegir, veamos:
HTML
 1 <form>
2
3 ELIGE UN COLOR:<select>
4 <option>Blanco</option>
5 <option>Negro</option>
6 <option>Azul</option>
7 <option>Rojo</option>
8 <option>Verde</option>
9 </select>
10
11</form>

Resultado:

Desplegable en formularios HTML

Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para
desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la
opción seleccionada.

Atributos para etiqueta <select> en formularios html


 Atributo size.- Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su
valor en números.

 Atributo multiple.- Utiliza el atributo multiple con valor también multiple para permitir que el
desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.

Crear un campo de texto grande en formularios HTML

Un campo de texto con varias lineas disponible en el formulario puede ser necesario para permitir a
nuestros usuarios enviar extensos textos y para ello haremos uso de la etiqueta <textarea>.
Etiqueta <textarea>
La etiqueta <textarea> se utilizara para crear un área de texto de varias líneas, puede servirnos por
ejemplo para un capo de mensaje, veamos un ejemplo concreto:

HTML
1 <form>
2 Nombre:
3 <input type="text"/>  <br/><br/>
4 Correo electrónico:
5  <input type="email"/>  <br/><br/>
6 Tu mensaje:
7 <textarea name="mensaje"> </textarea> <br/><br/>
8 <input type="submit" value="Enviar ahora"/>
9
10 </form>

Resultado:

Formulario de contacto HTML con campo multilinea

Si observamos, el campo de texto multilinea posee en la esquina inferior derecha un asistente que
permite ampliar el campo con el cursor.

Te recomiendo leer:  Etiquetas para texto HTML y formatos HTML

Atributo action
El valor del atributo action será la URL de la página que queremos que cargue después de que se envíe
la información de un formulario. Este atributo va dentro de la etiqueta <form> y lo podemos utilizar si
deseamos.
HTML
1 <form action="URL">
 Atributo method       
El atributo method puede tomar como valores a GET o POST y esto indica el método http que será
utilizado cuando se envíe la información.
Ejemplo:

HTML
1 <form action="URL" method="get">
2 <form action="URL" method="post">

Cuando se usa el valor get, los datos del formulario podrán ser vistos en la dirección de la página.
 Cuando se usa el valor post los datos enviados no serán visibles en la dirección de la página.
Por seguridad se recomienda utilizar usar el valor post, para datos sensibles.

Atributo name
Utiliza el atributo name para ponerle un nombre al formulario
HTML
1 <form name="miformulario" action="URL" method="post">

Para que el formulario funcione correctamente utilizaremos el atributo name  para cada campo del
formulario, así será posible recibir correctamente los datos enviados.
HTML
1 <form>
2 Nombre: <input name="nombre"  type="text"/>  <br/><br/>
3 Correo electrónico:   <input name="correo" type="email"/>  <br/><br/>
4 Tu mensaje:  <textarea name="mensaje"> </textarea> <br/><br/>
5 <input type="submit" value="Enviar ahora"/>
6  
7 </form>

El atributo name será necesario para procesar la información de cada campo y que estas lleguen a su
destino correctamente.
Hemos aprendidos a crear un formulario en html estático y ademas de muchos detalles, sin embargo
aun no podemos enviar y recibir información a través de ella, para ello es necesario que los datos se
envíen a un servidor y ser procesados por la misma, esto ocurre gracias a otro lenguaje de
programación como puede ser PHP y eso aprenderemos en su respectivo curso, por ahora esto es más
que suficiente.
 ETAPA DE CIERRE
Recuperación de aprendizajes

ACTIVIDAD 2:
Elabora un programa en HTML que contenga el formulario que lea los datos personales de un estudiante solicitado al
principio de este tema (pág. 36). Al final, subir el programa en formato HTML a la plataforma de Classroom.
Dudas de los aprendientes (estrategia)
Las dudas que vayan surgiendo, la o el aprendiente las podrá resolver durante las clases (Presenciales o a
Distancia, según sea el caso), o bien a través de la plataforma de WhatsApp con el Facilitador.
EVALUACIÓN FORMATIVA: (estrategia)

Lista de cotejo para ponderación de actividades

Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_______________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar: Actividad 1 “Propuesta de formulario”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
2.- El formulario propuesto contiene un diseño visualmente aceptable
3.- El diseño del formulario contiene los campos de datos solicitados
4.- El orden de la lectura de los datos es acorde a la categoría de ellos
5.- El formulario contiene una imagen/logotipo de fondo
6.- El formulario contiene colores
El formulario contiene el dibujo de botones “Cancelar”, “Limpiar”,
7.-
Guardar”
El formulario contiene un indicativo de qué campos son
8.-
indispensables
9.- No tuvo faltas de ortografía
10.- No es la copia de un programa entregado
Puntaje Total:
 Lista de cotejo para ponderación de actividades
Facilitador: Rodrigo Castillo Ruiz Materia: M2S2

Nombre del(a) aprendiente:_______________________________ Grupo: PROG 3 “A”

Fecha:_______

Nombre del producto a evaluar: Actividad 2 “Formulario programado en HTML”

Si No
No. Criterio de evaluación
(1) (0)
1.- Entregó en tiempo y forma (plataforma)
2.- El formulario propuesto contiene un diseño visualmente aceptable
3.- El diseño del formulario contiene los campos de datos solicitados
4.- El orden de la lectura de los datos es acorde a la categoría de ellos
5.- El formulario contiene una imagen/logotipo de fondo
6.- El formulario contiene colores
El formulario contiene el dibujo de botones “Cancelar”, “Limpiar”,
7.-
Guardar”
El formulario contiene un indicativo de qué campos son
8.-
indispensables
9.- No tuvo faltas de ortografía
10.- No es la copia de un programa entregado
Puntaje Total:
  PLAN DE EVALUACIÓN:
INSTRUMENTO DE
PRODUCTO PONDERACIÓN
EVALUACIÓN
Evaluación diagnóstica 2o parcial Lista de cotejo 0% (No ponderable)
Tabla descriptiva de eventos en programación Lista de cotejo 20%
Cuestionario contestado Lista de cotejo 10%
Cuestionario contestado Lista de cotejo 10%
Programa en HTML con los ejemplos de las
Lista de cotejo 20%
funciones alert, prompt y confirm.
Programas en donde se aplique las funciones alert,
Lista de cotejo 20%
prompt y confirm

33
TERCER
PARCIAL

34