03 - Desarrollo de Aplicaicones Web I

CARRERA : INTELIGENCIA ARTIFICIAL II SEMESTRE
CURSO : DESARROLLO DE APLICACIONES WEB I
Instructor Mg. Arturo Huapaya H.

Escuela de Tecnologías de la Información
Objetivo del curso
Al finalizar el módulo formativo el estudiante

estará en la capacidad de desarrollar
aplicaciones Web informativas y dinámicas
con el uso de JQUERY y AJAX.
2
Escuela de Tecnologías de la Información www.senati.edu.pe
Objetivo de la semana 8
Desarrolla Web interactiva con

JavaScript.
3
Funciones
4
Analice
Cuando debemos realizar una misma operación en varios programas o en

distintas partes del mismo programa, una alternativa es copiar el código
varias veces y manipular las entradas (argumentos) para que funcione en
otro programa.
o Pero, ¿qué pasa si hay que modificar ese código? Habrá que
cambiarlo en todos los lugares donde se encuentra
o Por esto es mejor implementar el código una única vez y luego
llamarlo desde donde haga falta. A eso llamamos reutilización de
código.
5
¿Qué es una función?
• Una función es un conjunto de acciones y comandos que "encapsulamos" bajo un

nombre.
• Una función en JavaScript se define con la palabra clave function seguido del
nombre de la función y los paréntesis. Puede tener o no parámetros. Luego, entre
llaves, un conjunto de instrucciones y opcionalmente la palabra clave return y el
valor de retorno.
6
Creación de funciones
Función Mensaje no tiene argumentos.

Devuelve el un alert con el mensaje
“Hola Mundo”
Función Bienvenida tiene 1 argumento.

Devuelve el un alert con el mensaje que
se ingrese para el argumento nombre.
Función Suma tiene 2 argumentos.

Devuelve la suma de los números
pasados como argumento en nun1 y
nun2.
7
Llamar a una función
8
Demostración
Paso 1: Crear la estructura del proyecto y la interfaz dela pagina web según le modelo:
9
Demostración
Paso 2: Crear la función ConvertirSegundos, la cual requiere como argumento la cantidad de segundos
a convertir en horas, minutos y segundos.
10
Demostración
Paso 3: Ejecutar ágian1.html en el Live Server, ingresar un valor en segundos y observar el resultado en la
pagina web.
11
Reto
Escribir un función que convierta un monto en soles en su equivalente en billetes y

monedas. Considerar billetes de: 10 – 20 – 50 y monedas de 1 – 5.
Crear la función y la interfaz respectiva.
• Por ejemplo convertir: 118
• Billetes de 50: 2
• Monedas de 5: 1
• Monedas de 1: 3
12
Eventos
13
Eventos
• JavaScript define numerosos eventos que permiten una interacción completa entre
el usuario y las páginas/aplicaciones web.
• Por ejemplo, si el usuario selecciona un botón en una página web, es posible que
desee responder a esa acción mostrando un cuadro de información.
• JavaScript permite asignar una función a cada uno de los eventos. De esta forma,
cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este
tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por
"manejadores de eventos".
14
Controlador de eventos
• JavaScript puede reconocer un controlador de eventos mediante una propiedad

"EventHandler" del objeto.
En este ejemplo, la propiedad del

controlador de eventos "onclick" se usa
para que cuando un usuario haga clic en
este botón, registre "¡Hola!" a la
consola.
Para un elemento determinado, solo
puede tener un controlador de eventos
por tipo de evento, pero puede tener
varios detectores de eventos.
15
Controlador de eventos
16
Detector de eventos addEventListener
• Al agregar un detector de eventos a un objeto, podemos capturar una amplia gama

de eventos activados por el usuario o el navegador.
El código anterior nos muestra el mismo

ejemplo que se usa con el controlador de
eventos, registrando "¡Hola!" en la
consola cuando un usuario hace clic en
el botón.
Esta vez, en lugar de usar la propiedad
"onclick", agregamos un detector de
eventos que se activará en el evento
"click", luego de lo cual registra "¡Hola!".
17
Detector de eventos addEventListener
18
HTML Drag and Drop API - Arrastrar y soltar
• Las interfaces HTML de arrastrar y soltar permiten que las aplicaciones utilicen funciones de
arrastrar y soltar en los navegadores.
• El usuario puede seleccionar elementos que se pueden arrastrar con el mouse, arrastrar esos
elementos a un elemento que se puede soltar y soltarlos soltando el botón del mouse. Una
representación translúcida de los elementos arrastrables sigue al puntero durante la operación
de arrastre.
• Puede personalizar qué elementos se pueden arrastrar , el tipo de comentarios que producen
los elementos que se pueden arrastrar y los elementos que se pueden soltar .
• Esta descripción general de HTML Drag and Drop incluye una descripción de las interfaces, los
pasos básicos para agregar soporte de arrastrar y soltar a una aplicación y un resumen de
interoperabilidad de las interfaces.
19
Eventos de arrastre
20
TALLER 03 – Parte 2
Hola, ahora vamos a poner en práctica lo aprendido, esta actividad tiene por
objetivo desarrollar de forma individual los ejercicios propuestos y mostrar la
codificación y resultado al compilar haciendo uso de una interfaz de la pagina
web.
Utilizando funciones desarrollar:
1. A un profesor le pagan según sus horas y una tarifa de pago por horas.
Si la cantidad de horas trabajadas es mayor a 40 horas, la tarifa se
incrementa en un 50 % para las horas extras. Calcular el salario del
profesor dadas las horas trabajadas y la tarifa
2. Calcular el perímetro de una circunferencia dado su radio. Luego calcule

el perímetro de la misma si se reduce al 50%. Luego calcule el perímetro
de la misma si se reduce al 25% con respecto al resultado anterior
3. Dada las horas trabajadas de una persona y la tarifa de pago por hora,
calcular su salario y escribirla. y los valores porcentuales a su salario en
10%, 30%, 60% y 80%
21
4. Un alumno desea saber cuál será su calificación final en la materia de

Algoritmos. Dicha calificación se compone de los siguientes
porcentajes:
55% del promedio de sus tres calificaciones parciales.
30% de la calificación del examen final.
15% de la calificación de un trabajo final
5. En un hospital existen tres áreas: Ginecología, Pediatría, Traumatología.

El presupuesto anual del hospital se reparte conforme a la sig. tabla:
Área: % del presupuesto:
Ginecología 40%
Traumatología 30%
Pediatría 30%
Obtener la cantidad de dinero que recibirá cada área, para monto

presupuestal ingresado como argumento.
22
6. Escribir un programa al cual ingrese la velocidad de

un automóvil expresada en metros por segundo e
imprima en pantalla la velocidad en kilómetros por
hora.
23
GRACIAS!!
24

03 - Desarrollo de Aplicaicones Web I

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

03 - Desarrollo de Aplicaicones Web I

Cargado por

Copyright:

Formatos disponibles

CARRERA : INTELIGENCIA ARTIFICIAL II SEMESTRE

CURSO : DESARROLLO DE APLICACIONES WEB I

Instructor Mg. Arturo Huapaya H.

Al finalizar el módulo formativo el estudiante

Desarrolla Web interactiva con

Cuando debemos realizar una misma operación en varios programas o en

• Una función es un conjunto de acciones y comandos que "encapsulamos" bajo un

Función Mensaje no tiene argumentos.

Función Bienvenida tiene 1 argumento.

Función Suma tiene 2 argumentos.

Escribir un función que convierta un monto en soles en su equivalente en billetes y

Crear la función y la interfaz respectiva.

• Por ejemplo convertir: 118

• JavaScript puede reconocer un controlador de eventos mediante una propiedad

En este ejemplo, la propiedad del

• Al agregar un detector de eventos a un objeto, podemos capturar una amplia gama

El código anterior nos muestra el mismo

Utilizando funciones desarrollar:

2. Calcular el perímetro de una circunferencia dado su radio. Luego calcule

4. Un alumno desea saber cuál será su calificación final en la materia de

5. En un hospital existen tres áreas: Ginecología, Pediatría, Traumatología.

Obtener la cantidad de dinero que recibirá cada área, para monto

6. Escribir un programa al cual ingrese la velocidad de

También podría gustarte