¡La universidad para todos!

¡La Universidad para todos!

Tema: Desarrollo de Aplicaciones con javascrip

Docente: Ing. Chauca Castillo Eduardo

Periodo académico: 2018-1

Escuela Profesional Semestre:VII
INGENIERÍA DE SISTEMAS E INFORMÁTICA Unidad:
 ¡La universidad para todos!

Desarrollo Rápido de Aplicaciones

• Las técnicas de Desarrollo Rápido de Aplicaciones (RAD)
evolucionaron de los lenguajes de cuarta generación en los
años 80.

• Se utilizan para desarrollar aplicaciones con un uso intensivo

de datos.

• Están organizadas como un conjunto de herramientas para

crear datos, buscarlos, visualizarlos y presentarlos en
informes.
 ¡La universidad para todos!

Desarrollo Rápido de Aplicaciones

 ¡La universidad para todos!

Entorno R.A.D. Herramientas

• Las herramientas dentro de en un entorno RAD son:
1. Lenguaje de programación de bases de datos:
contiene la estructura de la base de datos e incluye las
operaciones básicas de manipulación de bases.

• El lenguaje estándar de programación de base de datos es

SQL.

• Los comandos SQL se pueden introducir directamente o

generar de forma automática a partir de formularios
rellenados por el usuario.
 ¡La universidad para todos!

Entorno R.A.D. Herramientas

2. Generador de interfaces: se utiliza para crear formularios de

introducción y visualización de datos.

3. Enlaces a aplicaciones de oficina: como una hoja de cálculo,

para el análisis y manipulación de información numérica, o un
procesador de textos para la creación de plantillas de informes.

4. Un generador de informes: se utiliza para definir y crear informes

a partir de la información de la base de datos.
 ¡La universidad para todos!

Entorno R.A.D. Características

• Los sistemas RAD tienen éxito porque las aplicaciones de negocio
tienen muchas cosas en común.

• Estas aplicaciones comprenden la actualización de una base de

datos y la producción de informes a partir de la información
existente en ella.

• Se utilizan formularios estándar para las entradas y salidas.

• Los sistemas RAD producen aplicaciones interactivas que toman la

información de una base de datos organizacional, presentándola a
los usuarios en su terminal, y actualizándola con los cambios que
éstos le hacen.
 ¡La universidad para todos!

Entorno R.A.D. Características

• Muchas de las aplicaciones de negocio se apoyan en formularios

estructurados para las entradas y salidas.

• Por eso, los entornos RAD proporcionan recursos potentes para

la definición de pantallas y generación de informes.

• A menudo, las pantallas se definen como una serie de formularios

vinculados.
 ¡La universidad para todos!

Entorno R.A.D.
Características del Generador de Pantallas
• El sistema de generación de pantallas debe proporcionar:
1. Definición de formularios interactivos: que permitan al
desarrollador definir los campos a visualizar y la manera en que
éstos deben organizarse.

2. Vinculación de los formularios: que permitan al desarrollador

especificar que ciertas entradas provocan la visualización de
formularios adicionales.

3. Verificación de campos que permitan al desarrollador definir los

rangos permitidos para los valores de entrada en los campos de
los formularios.
 ¡La universidad para todos!

Entorno R.A.D.
sobre Navegadores Web
• Muchos entornos RAD permiten desarrollar interfaces de bases
de datos basadas en navegadores web.

• Que permiten acceder a la base de datos desde cualquier lugar a

través de Internet.

• Esto reduce los costos, y permite a los usuarios externos tener

acceso a una base de datos.

• Sin embargo, las limitaciones propias de los navegadores web y

los protocolos de Internet hacen a este enfoque no adecuado
para sistemas donde se requieran respuestas interactivas muy
rápidas.
 ¡La universidad para todos!

Entorno R.A.D.
con Herramientas de Programación Visual
• Actualmente, muchos sistemas RAD incluyen herramientas de
programación visual que permiten desarrollar sistemas de forma
interactiva.

• En vez de escribir un programa secuencial, el programador

manipula iconos gráficos que representan funciones, datos o
componentes de interfaces de usuario, y asocia el procesamiento
de secuencias de comandos con estos iconos.

• Se genera automáticamente un programa ejecutable a partir de la

representación visual del sistema.
 ¡La universidad para todos!

Entorno R.A.D.
con Herramientas de Programación Visual
• Los sistemas de desarrollo visual (Visual Basic), permiten este
enfoque, basado en la reutilización para el desarrollo de
aplicaciones.

• Los programadores construyen el sistema de forma interactiva

definiendo la interfaz en términos de pantallas, campos,
botones y menúes.

• A éstos, se les asigna un nombre y se asocia el procesamiento

de secuencias de comandos.

• Estas secuencias de comandos pueden llamar a otros

componentes, reutilizables, o no.
 ¡La universidad para todos!

Entorno R.A.D.
Generalidades
• Este enfoque permite el desarrollo rápido de aplicaciones
relativamente sencillas, construidas por un equipo pequeño de
personas.

• Es más difícil de organizar para sistemas más grandes,

desarrollados por equipos con más personas.

• No existe una arquitectura explícita del sistema y a menudo

existen dependencias complejas entre las partes del sistema =>
causa problemas cuando se requieran cambios.

• Como los lenguajes sólo cuentan con un conjunto específico de

objetos en interacción, es difícil implementar interfaces no
estándares.
 ¡La universidad para todos!

Entorno R.A.D.Ejemplo
• Un sistema de aplicaciones formado por un documento compuesto,
que incluye elementos de texto, de hojas de cálculo y archivos de
sonido.

• Los elementos de texto son procesados por el procesador de textos.

• Las tablas, por hojas de cálculo.

• Los archivos de sonido, por el reproductor de audio.

• Cuando un usuario accede a un objeto particular, se llama a su

aplicación asociada, para dar la funcionalidad adecuada.

• Por ejemplo, cuando se accede a objetos de tipo sonido, se llama al

reproductor de audio para procesarlos.
 ¡La universidad para todos!

Entorno R.A.D.Ventajas

• Mucha de la funcionalidad de la aplicación se puede

implementar rápidamente a un costo muy bajo.

• Los usuarios familiarizados con las aplicaciones del sistema

no tendrán que aprender cómo utilizar las nuevas
características.
 ¡La universidad para todos!

Entorno R.A.D. Desventajas

• Si los usuarios no saben cómo utilizar las aplicaciones, el

aprendizaje puede ser difícil.

• Puede haber problemas de rendimiento en la aplicación por tener

que cambiar de una aplicación del sistema a otra.

• Este esfuerzo adicional para realizar el cambio entre aplicaciones

depende de la ayuda que brinde el sistema operativo.
 ¡La universidad para todos!

Fundamentos de desarrollo web

con JavaScript y jQuery
 ¡La universidad para todos!

JavaScript (pegamento de Internet).

Gracias a este lenguaje son posibles aplicaciones como Google

Docs, OneDrive, GMail, Facebook o Twitter.

En la actualidad todos los ordenadores, tablets y móviles del

mundo incorporan al menos un intérprete de JavaScript.

Además su influencia se ha incrementado para alcanzar todo tipo

de ámbitos:
• servidores,
• aplicaciones de escritorio,
• sistemas operativos...
 ¡La universidad para todos!

jQuery

jQuery es la biblioteca JavaScript más importante y más utilizada

del mundo.

Aunque tiene más de 10 años de vida, sigue evolucionando y en la

actualidad se estima que el 72% de los sitios web usan jQuery.

Sus grandes virtudes son su sencillez, rapidez y el que asegura la

compatibilidad entre navegadores.
 ¡La universidad para todos!

JavaScript

JavaScript es el lenguaje de programación que debe usar para

añadir características interactivas al Sitio Web,
(por ejemplo:
• Juegos,
• Eventos que ocurren cuando los botones son presionados o
los datos son introducidos en los formularios,
• Efectos de estilo dinámicos,
• Animación, y
• mucho más).

Este lenguaje extraordinario (JavaScript) y te dará una idea de qué

es posible hacer.
 ¡La universidad para todos!

JAVA SCRIP
JavaScript es un robusto lenguaje de programación que puede ser
aplicado a un documento HTML y usado para crear interactividad
dinámica en los sitios web.

Fue inventado por Brendan Eich, co-fundador del proyecto

Mozilla, Mozilla Foundation y la Corporación Mozilla .

Se puede hacer casi cualquier cosa con JavaScript.

Puedes empezar con pequeñas cosas como carruseles, galerías de

imágenes, diseños fluctuantes, y respuestas a las pulsaciones de
botones.

Con más experiencia, se puede crear juegos, animaciones 2D y

gráficos 3D, aplicaciones integradas basadas en bases de datos, ¡y
mucho más!
 ¡La universidad para todos!

JavaScript por si solo es bastante compacto aunque muy flexible, y

los desarrolladores han escrito gran cantidad de herramientas
encima del núcleo del lenguaje JavaScript desbloqueando una gran
cantidad de funcionalidad adicional con un mínimo esfuerzo.

Esto incluye:
Interfaces de Programación de Aplicaciones del Navegador (APIs)
— APIs construidas dentro de los navegadores que ofrecen
funcionalidades como crear dinámicamente contenido HTML y
establecer estilos CSS , hasta capturar y manipular un vídeo desde
la cámara web del usuario, o generar gráficos 3D y muestras de
sonido.
 ¡La universidad para todos!

APIs de Terceros, que permiten a los desarrolladores incorporar

funcionalidades en sus sitios de otros proveedores de contenidos
como Twitter o Facebook.

Marcos de trabajo y librerías de terceros que puedes aplicar a tu

HTML para que puedas construir y publicar rápidamente sitios y
aplicaciones.
¡La universidad para todos!

FUNDAMENTOS DEL LENGUAJE

 ¡La universidad para todos!

FUNDAMENTOS DEL LENGUAJE

Se va explicar algunas de las funciones básicas del lenguaje

JavaScript, para que se pueda comprender mejor cómo funciona
todo.

Mejor aún, estas características son comunes para todos los

lenguajes de programación.

Al entender esos fundamentos, se podrá comenzar a programar en

casi cualquier cosa.
Las variables son contenedores en los que puedes almacenar valores. Primero debes decl
¡La universidad para todos!

Las variables
Las variables son contenedores en los que puedes almacenar
valores.

Primero se debe declarar la variable con la palabra clave var,

seguida del nombre que le quieras dar:

Nota: Todas las líneas en JS deben acabar en punto y coma,

para indicar que es ahí donde termina la línea.

Si no los incluyes puedes obtener resultados inesperados.

 ¡La universidad para todos!

Nota: Puedes llamar a una variable con casi cualquier nombre,

pero hay algunas restricciones

Nota: JavaScript distingue entre mayúsculas y minúsculas

— mi Variable es una variable distinta a
mi variable.

Si tienes problemas en el código, revisa las mayúsculas y

minúsculas.
 ¡La universidad para todos!

Tras declarar una variable, puedes asignarle un valor:

Puedes hacer las dos cosas en la misma línea si lo necesitas:

Puedes obtener el valor de la variable llamándola por su nombre:

 ¡La universidad para todos!

Después de haberle dado un valor a la variable, puedes volver a

cambiarlo:

Nótese que las variables tienen distintos tipos de datos:

¡La universidad para todos!
 ¡La universidad para todos!

Entonces, ¿para qué necesitamos las variables? Las variables son

necesarias para hacer cualquier cosa interesante en programación.

Si los valores no pudieran cambiar, entonces no se podría hacer

nada dinámico, como cambiar la imagen que se muestra en una
galería de imágenes, etc.

Comentarios
Puedes escribir comentarios entre el código JavaScript, igual que
puedes en CSS.
 ¡La universidad para todos!

En JavaScript, los comentarios de una sola línea se escriben así:

 ¡La universidad para todos!

Operadores
Un operador es básicamente un símbolo matemático que puede actuar
sobre dos valores (o variables) y producir un resultado.

En la tabla de abajo aparecen los operadores más simples, con algunos

ejemplos para probarlos en la consola del navegador.
¡La universidad para todos!
¡La universidad para todos!
¡La universidad para todos!
 ¡La universidad para todos!

Condicionales
Las Condicionales son estructuras de código que permiten
comprobar si una expresión devuelve true o no, y después ejecuta
un código diferente dependiendo del resultado.

La forma de condicional más común es la llamada if ... else.

Entonces, por ejemplo:
 ¡La universidad para todos!

La expresión dentro de if ( ... ) es el criterio, este usa al operador de

identidad (descrito arriba) para comparar la variable helado con la
cadena chocolate para ver si las dos son iguales.

Si esta comparación devuelve true, el primer bloque de código se

ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de
código después de la declaración else.

Funciones
Las funciones son una manera de encapsular una funcionalidad que
quieres reutilizar, de manera que puedes llamar esa función con un
solo nombre, y no tendrás que escribir el código entero cada vez que
la utilices.
 ¡La universidad para todos!

Se ve algunas funciones más arrriba, por ejemplo:

Estas funciones están integradas en el navegador para poder

utilizarlas en cualquier momento.
 ¡La universidad para todos!

Si ves algo que parece un nombre de variable, pero tiene paréntesis

— () — al final, probablemente es una función.

Las funciones con frecuencia toman arguments — pedazos de datos

que necesitan para hacer su trabajo.

Estos se colocan dentro de los paréntesis, y se separan con comas si

hay más de uno.

Por ejemplo, la función alert() hace aparecer una ventana pop-up

dentro de la ventana del navegador, pero nosotros necesitamos
asignarle una cadena como un argumento para decirle qué mensaje
se debe escribir en la ventana pop-up.
 ¡La universidad para todos!

En el siguiente ejemplo escribimos una función simple que toma dos

números como argumentos y los multiplica entre si:
 ¡La universidad para todos!

Eventos
Para crear una interacción real en tu sitio WEB, debes usar eventos

Estos son unas estructuras de código que captan lo que sucede en el

navegador, y permite que en respuesta a las acciones que suceden se
ejecute un código.

El ejemplo más obvio es un click (click event), que se activa al hacer click
sobre algo.

Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego

haz click sobre la pagina actual:
 ¡La universidad para todos!

Hay muchas maneras de enlazar un evento a un elemento; aquí

hemos seleccionado el elemento HTMLy le asignamos a su
propiedad onclick una función anónima (función sin nombre) que
contiene el código que se ejecutará cuando el evento suceda.
¡La universidad para todos!
 ¡La universidad para todos!

Practica
La consola de JavaScript
La consola de JavaScript es una herramienta increíblemente útil
para depurar JavaScript que no está funcionando como se
esperaba.

Le permite ejecutar líneas de JavaScript en contra de la página

cargada actualmente en el navegador e informa los errores
encontrados mientras el navegador intenta ejecutar su código.

Para acceder a la consola en cualquier navegador, simplemente

presione el botón de la consola. (En Internet Explorer,
presione Ctrl + 2 ). Esto le dará una ventana como la siguiente:
¡La universidad para todos!
 ¡La universidad para todos!

Para ver qué sucede, intente ingresar los siguientes

fragmentos de código en la consola uno por uno (y luego
presione Enter):
 ¡La universidad para todos!

1.alert('hello!');

2.document.querySelector('html').style.backgroundColor =
'purple';

3.var myImage = document.createElement('img');

myImage.setAttribute('src','https://blog.mozilla.org/press/wp-
content/themes/OneMozilla/img/mozilla-wordmark.png');

3.document.querySelector('h1').appendChild(myImage);
 ¡La universidad para todos!

Ahora intente ingresar las siguientes versiones

incorrectas del código y vea lo que obtiene.
 ¡La universidad para todos!

1.alert('hello!);

2.document.cheeseSelector('html').style.backgroundColor = 'purple';

3.var myImage = document.createElement('img');

4.myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-
content/themes/OneMozilla/img/mozilla-wordmark.png');
5.document.querySelector('h1').appendChild(myImage);

Comenzará a ver el tipo de errores que devuelve el

navegador.

A menudo, estos errores son bastante crípticos, pero debería

ser bastante simple resolver estos problemas
¡La universidad para todos!

¡Gracias!