Tecnología de Programacion

Tecnologa de Programacin
Docente
Ing. Ricardo Edwin More Reao
2014
ndice
Introduccin
Captulo I
Pgina
1.1.Tecnologas de diseo web. Servidores web. Ambientes de desarrollo de aplicaciones web. 04
1.2.Tecnologas de programacin del lado del cliente: JavaScript. Introduccin. 12
1.3.Tecnologas de programacin del lado del cliente: JavaScript. Funciones. Eventos. 24
1.4.Tecnologas de programacin del lado del cliente:Applets, llamada, ciclo de vida, mtodos. 33
1.5.Formulario JApplet. Controles, propiedades, mtodos. 48
Captulo II
2.1.JavaServer Pages (JSP). Definicin, Elementos JSP, sintaxis, Ciclo de vida de una JSP, 62
directivas. Instalacin y arquitectura del servidor TomCat.
2.2.Acceso a base de datos con JSP. 79
2.3.Servlets. Definicin, estructura bsica, ciclo de vida, mtodos. 94
2.4.Servlets y JDBC, cookies, sesiones. 108
2.5.Reportes. Instalacin y uso de iReport. 119
Captulo III
3.1.Python. Utilizacin del intrprete de Python, tipos bsicos, control de flujo y funciones. 142
3.2.Python. Django el framework web de Python. 157
3.3.Hibernate. Esquema Model View Controller(MVC). 168
3.4.JavaServer Faces(JSF). Esquema Model View Controller JSF, componentes visuales 187
bsicos.
3.5.JavaServer Faces(JSF). Esquema Model View Controller JSF, tabla de datos, creacin de
Beans y DAOs.
Referencias Bibliogrficas
1
Introduccin
A la hora de iniciar o reconstruir un sitio web, una de las decisiones ms

importantes es la eleccin de la tecnologa para el desarrollo del portal. Esta
decisin es tomada en la mayora de los casos por el desarrollador o por la
empresa que realiza o se contrata para disear la web. Sin embargo, cada da es
ms importante que los propietarios de las webs tengan algunas nociones de las
ventajas e inconvenientes de cada una de las tecnologas disponibles para que su
proyecto web se desarrolle con la tecnologa que ms se ajuste a sus
necesidades, no a las necesidades de la empresa de diseo o mantenimiento.
Con el desarrollo de la Tecnologa de Programacin se pretende conocer

los principales conceptos implicados en la programacin especialmente al
desarrollo y uso de Internet y adems de cmo han evolucionado los servicios y
tecnologas hasta llegar a la situacin actual. Para ello se realizarn una serie de
actividades centradas en el estudio de la evolucin y uso de las tecnologas
orientadas a internet y frameworks. Se pretende que el alumno obtenga los
conocimientos necesarios para evaluar las ventajas que dispone la tecnologa
actualmente y la aplicabilidad empresarial que existe.
El presente texto se desarrollar en tres captulos:
Tecnologas de Programacin del lado del cliente

Tecnologas de Programacin del lado del servidor
Tecnologas de Programacin del lado del servidor. Frameworks
Atentamente
Ricardo More Reao
2
Captulo I
Tecnologas de Programacin del lado del cliente
3
TECNOLOGAS DE DISEO WEB
A la hora de iniciar o reconstruir un sitio web, una de las decisiones ms importantes es la

eleccin de la tecnologa para el desarrollo del portal. Esta decisin es tomada en la mayora de
los casos por la empresa que se contrata para disear la web. Sin embargo, cada da es ms
importante que los propietarios de las webs tengan algunas nociones de las ventajas e
inconvenientes de cada una de las tecnologas disponibles para que su proyecto web se
desarrolle con la tecnologa que ms se ajuste a sus necesidades, no a las necesidades de la
empresa de diseo o mantenimiento.
El diseo y programacin de una pgina web o sitio web para una persona, negocios u
organizaciones puede realizarse con diferentes tecnologas. Podemos observar que todos los
sitios web contienen lenguaje HTML, casi cualquier paso que se de en el desarrollo de webs
requerir que se tenga conocimiento de HTML; incluso aunque estos sitios web hayan sido
programados con otras tecnologas (JAVASCRIPT, ASP, PHP, PYTHON, JSP, etc.). Es
conveniente indicar que una pgina Web puede contener elementos que permiten una
comunicacin activa entre el usuario y la informacin, esto permite que el usuario acceda a los
datos de modo interactivo, gracias a que la pgina responder a cada una de sus acciones, como
por ejemplo rellenar y enviar formularios, participar en juegos diversos y acceder a gestores de
base de datos de todo tipo.
Cmo afecta la tecnologa utilizada el desarrollo de una web

Aunque existen multitud de detalles tcnicos asociados a cada opcin tecnolgica, desde el
punto de vista del propietario del sitio, podemos identificar los principales aspectos en los que la
tecnologa web afecta un proyecto:
La funcionalidad del sitio Web.
Su facilidad de mantenimiento y actualizacin de contenidos.
Las necesidades del servidor donde se alojar la web.
Disponibilidad de actualizaciones de seguridad.
Velocidad de carga de la web.
La usabilidad de los distintos elementos.
Visibilidad en los buscadores.
Las decisiones ms importantes para el desarrollo web (con la participacin del propietario de
la web): La tecnologa de desarrollo, gestor de contenidos y por ltimo la tecnologa del
servidor en el que se va a alojar la web.
La tecnologa de desarrollo
La primera decisin tecnolgica a la hora de desarrollar una web implica el sistema para
codificar el contenido textual y multimedia de la pgina. En los inicios de la red, slo se utilizaba
HTML como mecanismo de intercambio de informacin a travs de Internet. Sin embargo, a
medida que las pginas fueron creciendo, aparecieron nuevos sistemas para facilitar la gestin de
4
grandes cantidades de datos y que se mantenga la coherencia de todo un portal web. Tambin
existen otras tecnologas visuales como Flash.
(X)HTML Esttico
Lenguaje en el que estn codificadas las pginas web que los internautas exploran en sus
navegadores. Este mtodo de desarrollo web consiste en almacenar en el servidor los archivos
finales que recibe el usuario. Con esta tecnologa, en general slo se consigue una comunicacin
en un slo sentido, de la organizacin al internauta, dejando muy limitada la capacidad de
respuesta del usuario.
Ventajas:
No es necesario realizar actualizaciones peridicas de seguridad.
Disponen de una gran flexibilidad para cambiar el diseo.
Desventajas:
El contenido es esttico (el mismo contenido para todos los usuarios).
Es necesario disponer de conocimientos HTML para realizar cambios en la informacin

de la web.
La gestin eficiente de webs que van aumentando sustancialmente su contenido con

el tiempo se hace inviable al utilizar HTML esttico.
Funcionalidad e interaccin con el usuario limitada.
Gestor de contenidos
Definicin: Sistema que forma la estructura de soporte para la creacin y administracin de

informacin en un sitio web (tambin conocidos como CMS Content Management System)
Es un sistema que se instala en el servidor y genera las pginas web cuando los
internautas las solicitan, se puede por tanto generar contenido dinmico dependiendo del usuario.
Disponen de una parte pblica que ven todos los internautas y de una seccin privada o panel de
control. A travs de este interfaz privado, el propietario pueda realizar cambios en el contenido sin
conocimientos de programacin y a travs de una herramienta web similar a un gestor de correo
electrnico o un editor de textos.
Ventajas:
Permite generar contenido dinmico dependiendo del usuario.
Facilita la escalabilidad de una web.
No es necesario almacenar cada una de las posibles pginas (se evita redundancia de
informacin).
Sus actualizaciones permiten ir adoptando nuevos estndares web automticamente.
5
Es posible implementar funcionalidad avanzada en el sitio web (Tiendas virtuales,
foros, blogs, etc.).
Desventajas:
Es necesario llevar a cabo actualizaciones peridicas del sistema para evitar ataques a
vulnerabilidades de seguridad.
Una vez implementado el diseo de un sitio, es ms complejo realizar cambios

estructurales en la situacin de los distintos elementos de la web (o se pierden ciertas
ventajas del gestor de contenidos).
Estos sistemas son la base de la llamada Web 2.0 o Web Participativa. En este tipo de
portales se abandona el enfoque de comunicacin en un slo sentido y permiten que el usuario
pueda tanto participar en el contenido de la web, como interactuar con la organizacin o con otros
usuarios. Esto se consigue a travs de herramientas como chats, blogs, canales de noticas
rss o e-commerce entre otras muchas; en los que se puede rankear contenido, incluir
comentarios, anotaciones, enlazar la informacin con otros portales, etc.
Tecnologa servidor
Servidor = Equipo que almacena la informacin de tu pgina web.
Tanto en desarrollos web basados en HTML en el que se incluyan elementos con

funcionalidad sencilla de interaccin con el usuario, como para gestores de contenido, se ha de
elegir la tecnologa que debe soportar el servidor que va a almacenar la pgina web. Existen
multitud de empresas, que disponen de servidores con todo tipo de caractersticas. Y aunque las
soluciones propietarias (Microsoft o Mac) son lderes en PCs frente a las soluciones abiertas
(Linux), en los servidores web sucede al contrario, siendo software abierto(open source) el que
est instalado en la mayora de los servidores que alojan pginas web. Esto se debe a que los
servidores estn administrados por expertos que necesitan acceso al cdigo fuente para poder
controlar completamente el servidor, mientras que la mayora de los usuarios de PCs no tienen la
necesidades avanzadas de administracin sobre sus equipos.
En concreto, 3 tecnologas de cdigo abierto son los indiscutibles lderes del mercado y
con las que se puede realizar cualquier tipo de desarrollo web: Apache como servidor HTTP, PHP,
JSP, entre otros como lenguajes de servidor para webs dinmicas y MySQL como base de datos,
que tambin estn disponibles en paquetes conjuntos para distintas plataformas: Windows
WAMP, Linux LAMP o Mac MAMP). Por tanto, la utilizacin de tecnologas propietarias para el
desarrollo de pginas web responde slo a intereses de la empresa encargada del desarrollo web,
que generalmente son partners de una empresa en concreto y estn obligados a utilizar sus
soluciones en todos los mbitos.
NAVEGADOR WEB
Un navegador web, navegador de Internet o explorador web (browser) es un programa

(aplicacin de software) que permite al usuario recuperar y visualizar la informacin que contiene
una pgina web desde servidores web de todo el mundo a travs de Internet. Esta red de
6
documentos es denominada World Wide Web (WWW). Cualquier navegador actual permite
mostrar o ejecutar grficos, secuencias de vdeo, sonido, animaciones y programas diversos
adems del texto y los hipervnculos o enlaces.
La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos

de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar
ubicados en la computadora en donde est el usuario, pero tambin pueden estar en cualquier
otro dispositivo que est conectado a la computadora del usuario o a travs de Internet, y que
tenga los recursos necesarios para la transmisin de los documentos (un software servidor web).
Tales documentos, comnmente denominados pginas web, poseen hipervnculos que enlazan
una porcin de texto o una imagen a otro documento, normalmente relacionado con el texto o la
imagen.
El seguimiento de enlaces de una pgina a otra, ubicada en cualquier computadora

conectada a la Internet, se llama navegacin; que es de donde se origina el nombre de navegador.
Algunos navegadores Web:

Amaya
Epiphany
Galeon
Internet Explorer
Konqueror
Lynx
Mozilla Firefox
Google Chrome
Netscape Navigator
Opera
Safari
Shiira
Maik Navigator
SERVIDORES WEB
Es un programa informtico que procesa una aplicacin de lado del servidor, implementa
el protocolo HTTP (hypertext markup language). Este protocolo pertenece a la capa de aplicacin
del modelo OSI y est diseado para transferir lo que se llama hipertextos, pginas web o pginas
HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como
animaciones o reproductores de msica, etc. Los servidores web tienen la tarea de alojar sitios y/o
aplicaciones, las cuales son accedidas por los clientes utilizando un navegador que se comunica
con el servidor utilizando el protocolo HTTP.
Adems los servidores pueden disponer de un intrprete de otros lenguajes de

programacin que ejecutan cdigo embebido dentro del cdigo HTML de las pginas que contiene
el sitio antes de enviar el resultado al cliente. Esto se conoce como programacin de lado del
servidor y utiliza lenguajes como ASP, JSP, PHP, Perl, entre otros. Las ventajas de utilizar estos
lenguajes radica en la potencia de los mismos ejecutando tareas ms complejas como, por
ejemplo acceder a base de datos abstrayendo al cliente de toda la operacin.
7
El rol fundamental de un Servidor Web
La principal funcin de un servidor Web es almacenar los archivos de un sitio y emitirlos
por Internet para poder ser visitado por los usuarios. Bsicamente, un servidor Web es una gran
computadora que guarda y transmite datos va Internet. Cuando un usuario entra en una pgina
de Internet su navegador se comunica con el servidor enviando y recibiendo datos que
determinan qu es lo que ve en la pantalla. Por eso decimos que los servidores Web estn para
almacenar y transmitir datos de un sitio segn lo que pida el navegador de un visitante.
Cmo funcionan los Servidores

Cada servidor Web y cada computadora conectada a Internet tienen asignado una
direccin de IP irrepetible que lo identifica en la red. La direccin de IP vendra a ser como los
datos del remitente en una carta postal. Cuando llegas a un sitio web, se enva un pedido desde tu
direccin de IP hacia la direccin IP del servidor. El servidor Web responde mandando datos a la
direccin IP que los pide. Esto es lo que pasa cada vez que estamos navegando en un sitio en
Internet. Ms del 90% de los sitios en Internet utilizan un servidor alquilado a travs de una
empresa de Web hosting.
Algunos de estos son:

CERNhttpd
Apache (Libre, servidor ms usado del mundo, segn Wikipedia)
IIS
Resin
Tomcat(Libre, del proyecto Jakarta de Apache)
Geronimo(Libre, orientado a J2EE, del proyecto Jakarta de Apache.
JBoss
JOnAS
Cherokee
8
AMBIENTES DE DESARROLLO DE APLICACIONES WEB
IDE - Entorno de Desarrollo Integrado
IDE(integrated development environment). Un IDE es un programa informtico compuesto por

un conjunto de herramientas de programacin. Puede dedicarse en exclusiva a un solo lenguaje
de programacin o bien poder utilizarse para varios. Los IDE proveen un marco de trabajo
amigable para la mayora de los lenguajes de programacin tales como C++, PHP, Python, Java,
C#, Delphi, Visual Basic, etc.
Un IDE est compuesto por:

Un editor de texto.
Un compilador.
Un intrprete.
Un depurador.
Un cliente.
Posibilidad de ofrecer un sistema de control de versiones.
Factibilidad para ayuda en la construccin de interfaces grficas de usuario.
Algunos de estos son:
NetBeans IDE
El IDE NetBeans es un entorno de desarrollo integrado, una herramienta para

programadores pensada para escribir, compilar, depurar y ejecutar programas. Est escrito en
Java; pero puede servir para cualquier otro lenguaje de programacin. Existe adems un nmero
importante de mdulos para extender el IDE NetBeans. El IDE NetBeans es un producto libre y
gratuito sin restricciones de uso.
La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un

conjunto de componentes de software llamados mdulos. Debido a que los mdulos pueden ser
desarrollados independientemente, las aplicaciones basadas en la plataforma NetBeans pueden
ser extendidas fcilmente por otros desarrolladores de software. Tiene soporte para crear
interfaces grficas de forma visual, crear aplicaciones para mviles, desarrollar aplicaciones web y
adems estas funcionalidades son ampliables mediante instalacin de paquetes adicionales.
NetBeans IDE se conoce como una de las soluciones ms completa para programar en Java.
Para empezar a trabajar con esta aplicacin lo primero que tendremos que hacer es
descargarla, la encontraremos disponible en la pgina oficial y de forma gratuita para GNU/Linux,
Windows, Mac OS X y Solaris.
9
Eclipse
Eclipse es un entorno de desarrollo integrado de cdigo abierto multiplataforma para

desarrollar lo que el proyecto llama "Aplicaciones de Cliente Enriquecido", opuesto a las
aplicaciones "Cliente-liviano" basadas en navegadores. Eclipse fue liberado originalmente bajo la
Common Public License, pero despus fue re-licenciado bajo la Eclipse Public License. La Free
Software Foundation ha dicho que ambas licencias son licencias de software libre, pero son
incompatibles con Licencia pblica general de GNU (GNU GPL).
Eclipse dispone de un Editor de texto con resaltado de sintaxis. La compilacin es en

tiempo real. Tiene pruebas unitarias con JUnit, control de versiones con CVS, integracin con Ant,
asistentes (wizards) para creacin de proyectos, clases, tests, etc., y refactorizacin.
El entorno de desarrollo integrado (IDE) de Eclipse emplea mdulos (en ingls plug-in) para
proporcionar toda su funcionalidad al frente de la plataforma de cliente enriquecido. Este
mecanismo de mdulos es una plataforma ligera para componentes de software. Adicionalmente a
permitirle a Eclipse extenderse usando otros lenguajes de programacin como son C/C++ y
Python, permite a Eclipse trabajar con lenguajes para procesado de texto como LaTeX,
aplicaciones en red como Telnet y Sistema de gestin de base de datos. La arquitectura plugin
permite escribir cualquier extensin deseada en el ambiente, como sera Gestin de la
configuracin. Se provee soporte para Java y CVS en el SDK de Eclipse.
Aptana Studio
Aptana Studio es un entorno de desarrollo integrado gratuito basado en eclipse y
desarrollado por Aptana, Inc., que puede funcionar bajo Windows, Mac y Linux y provee soporte
para lenguajes como: Php, Python, Ruby, CSS, Ajax, HTML y Adobe AIR. Tiene la posibilidad de
incluir complementos para nuevos lenguajes y funcionalidades.
Sus caractersticas principales son:
Asistente de cdigo para HTML y Javascript.
Libreras ajax (jQuery, prototype, scriptaculous, Ext JS, dojo, YUI y Spry entre otras).
Conexin va FTP, SFTP, FTPS y Aptana Cloud.
Herramientas para trabajo con base de datos.
Marcado de sintaxis mediante colores.
Compatible con extensiones para Eclipse (existen ms de 1000).

Aptana Studio es un IDE de software libre que posee la GNU General Public License o la
Aptana Public License.
10
Tarea sesin N 01
Despus de estudiar y reflexionar acerca de Tecnologas de diseo web. Servidores

web. Ambientes de desarrollo de aplicaciones web.
Investigar y presentar informe de:
1. 03 navegadores de su preferencia.
2. Editor para realizar nuestras aplicaciones web.
3. Instalar NetBeans IDE 7.2 o 7.3 (Personalizar para instalar servidores) en su equipo.
Considerar imgenes de la instalacin de NetBeans y del editor web en caso no sea

alguno de los que ya disponemos en nuestro equipo.
11
TECNOLOGAS DE PROGRAMACIN WEB EN EL LADO DEL CLIENTE
Conforme las aplicaciones web se hacan ms complejas por ejemplo por el uso de
formularios y aadido a esto una velocidad de navegacin lenta, surgi la necesidad de
lenguaje de programacin que se ejecutaran en el navegador del usuario. De esta forma,
si el usuario no llenaba correctamente un formulario, no se le haca esperar mucho tiempo
hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.
Las tecnologas del lado del cliente, es decir, las que se ejecutan en el navegador
del usuario son las pginas dinmicas que se procesan en el cliente. En estas pginas
toda la carga de procesamiento de los efectos y funcionalidades la soporta el navegador.
Usos tpicos de las pginas de cliente son efectos especiales para webs como rollovers o
control de ventanas, presentaciones en las que se pueden mover objetos por la pgina,
control y validacin de formularios, clculos, etc. El cdigo necesario para crear los
efectos y funcionalidades se incluye dentro del mismo archivo HTML y generalmente son
scripts, activex o plugins. Cuando una pgina HTML contiene alguna de las tecnologas de
cliente, el navegador se encarga de interpretarlas y ejecutarlas para realizar los efectos y
funcionalidades. Las pginas del cliente son muy dependientes del sistema donde se
estn ejecutando y esa es su principal desventaja, ya que cada navegador tiene sus
propias caractersticas, incluso cada versin, y lo que puede funcionar en un navegador
puede no funcionar en otro. Como ventaja se puede decir que estas pginas descargan al
servidor algunos trabajos, ofrecen respuestas inmediatas a las acciones del usuario y
permiten la utilizacin de algunos recursos de la mquina local. Un lenguaje del lado
cliente es totalmente independiente del servidor, lo cual permite que la pgina pueda ser
albergada en cualquier sitio. Pero nuestra pgina no se ver bien si la computadora
cliente no tiene instalados los plug-in adecuados. El cdigo, tanto del hipertexto como de
los scripts, es accesible a cualquiera y ello puede afectar a la seguridad.
Las pginas dinmicas de cliente principalmente se escriben en dos lenguajes de

programacin: Javascript y Visual Basic Script (VBScript). Tambin se puede hacer uso
de las CSS o XML para tecnologas como DHTML o AJAX. Existen tecnologas de cliente
que se ejecutan a travs plugins instalados en el navegador, algunas de las ms
conocidas son Flash y los Applet de Java.
12
JavaScript
JavaScript es un lenguaje de programacin

interpretado(el ordenador va leyendo cada instruccin, la
traduce y la ejecuta; pues quien traduce las
instrucciones del programa es el traductor o intrprete),
por lo que no es necesario compilar los programas para
ejecutarlos. En otras palabras, los programas escritos
con JavaScript se pueden probar directamente en
cualquier navegador sin necesidad de procesos
intermedios(es soportado por la mayora de
navegadores). JavaScript fue desarrollado por la
empresa Netscape con la idea de mejorar la creacin de pginas web para su navegador
Navigator.
JavaScript es ms simple que Java; pues se puede insertar cdigo especial dentro
de HTML de una pgina o no, a travs del cual podemos realizar por ejemplo que cuando
se presente una pgina web al visitante haga cosas como poner en la pgina la fecha del
da, hacer que una imagen se mueva de un lado a otro, responder de una determinada
forma a la pulsacin del ratn, validar el texto ingresado por el usuario, etc. Los
programas escritos con este lenguaje son conocidos como scripts o guiones. Pese a su
nombre no tiene nada que ver con Java.
Como con cualquier otro lenguaje de programacin que hemos estudiado en ciclos
anteriores, con JavaScript se necesita conocer sus reglas y vocabulario.
JAVASCRIPT EN UNA PGINA WEB
Tenemos que trabajar con la etiqueta <script>.

Existen varias formas de incluir cdigo JavaScript en nuestras pginas web:
a) En el mismo documento web

Aunque podemos escribirlo en cualquier parte del documento, se recomienda definir el
cdigo dentro de la cabecera, es decir entre <head> y </head>
Podemos escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo con el
nombre: ejemplo1_primeraforma.html
<html>
<head>
<title>Ejemplo de la primera forma</title>
<script type="text/javascript">
alert("Ingeniera de Sistemas");
</script>
13
</head>
<body>
<p>Sesin 02: JavaScript </p>
</body>
</html>
Tambin podemos escribirlo entre <body> y </body>

Escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo con el nombre:
ejemplo2_primeraforma.html
<html>
<head>
<title> Otro ejemplo de la primera forma</title>
</head>
<body>
<p onclick="alert('hemos escrito JavaScript dentro del body en la pgina')">
Ejemplo de un prrafo de texto
</p>
</body>
</html>
b) JavaScript en un archivo externo

Las instrucciones pueden escribirse en un archivo cuya extensin es js, que va a ser
enlazado por un documento HTML.
Escribir en un editor de texto lo siguiente:
alert("La presente instruccin muestra un mensaje ");
Luego guardarlo como: archivoexterno.js
En nuestro documento web, que guardaremos con el nombre: enlazararchivoexterno.html
<html>
<head>
<title>Ejemplo de la segunda forma</title>
<script type="text/javascript" src="/archivoexterno.js">
</script>
</head>
<body>
<p>Hemos enlazado un archivo externo, de extensin js</p>
</body>
</html>
Se ha utilizado el atributo src para realizar el enlace.
En una pgina web se pueden incluir tantas etiquetas <script> como sean necesarias para
14
enlazar varios archivos externos. Como se pueden haber dado cuenta representa una ventaja
utilizar archivos externos.
Podemos utilizar la etiqueta <noscript>, dentro del body para mostrar un mensaje al
usuario cuando el navegador no puede ejecutar JavaScript, observemos el siguiente ejemplo:
<body>
<noscript>
<p>La pgina no puede ejecutar contenido JavaScript</p>
<p>Si lo has deshabilitado, por favor activarlo.</p>
</noscript>
</body>
Sintaxis
Algunas de sus normas bsicas son las siguientes:
Se distinguen las maysculas y minsculas.

No se tienen en cuenta los espacios en blanco.
No se define el tipo de las variables.
No es necesario terminar cada sentencia con el carcter de punto y coma (;).
Se pueden incluir comentarios.
Formas de escribir un comentario
De una sola lnea

// de esta manera se escribe el comentario de una sola lnea.
De varias lneas
/* de esta manera se escribe comentarios de varias lneas,
son tiles cuando se necesita mostrar
o registrar referencias importantes respecto al trabajo que se realiza
*/
Mensajes
Son ventanas que desde el cdigo se lanzan al usuario, nos informan algo o para que se
reaccione ante una determinada situacin, ya hemos utilizado alguno en ejemplos anteriores.
Alert.-
Muestra un mensaje en pantalla que slo da la oportunidad de aceptarle.
Su sintaxis es:
alert(se_escribe_el_mensaje);
Ejemplo: (escrito en el primer ejemplo)
alert("Ingeniera de Sistemas");
Prompt.-
15
Muestra una ventana que permite ingresar datos al usuario. Devuelve un valor que puede
ser asignado a una variable.
La ventana posee 2 botones: Aceptar y Cancelar.
Su sintaxis es:
prompt(mensaje,valor_por_defecto);
Ejemplo:
prompt(Ingresar nombre: );
Ejemplo:
prompt(Ingresar nombre: , Juan);
Ejemplo:
resp=prompt(Ingresar nombre: );
Confirm.-
Muestra un mensaje de confirmacin, tiene 2 botones: Aceptar y Cancelar.
Su sintaxis es:
confirm(mensaje);
Ejemplo:
confirm(Esta seguro..? );
Adems podemos utilizar document.write(mensaje) para mostrar en el mismo documento

nuestros mensajes o resultados.
Un ejemplo completo de uso de mensajes:
Escribir el siguiente cdigo con cualquier editor de texto y luego guardarlo con el nombre:
mensajes.html
<html>
<head>
<title>Ejemplo de la primera forma</title>
resp=prompt("Ingresar nombre: ");
document.write("Hola: ",resp);
</script>
</head>
<body>
<p>Programacin </p>
<p> JavaScript </p>
</body>
</html>
16
PROGRAMACIN BSICA
Variables
Variable es un espacio en memoria donde se almacena un dato, podemos guardar

cualquier tipo de informacin que necesitemos para realizar las acciones de nuestros programas.
Se escriben teniendo en cuenta las mismas reglas que en java.
Ejemplo:
Tenemos tres variables: minuendo, sustraendo, diferencia
minuendo = 9
sustraendo = 5
diferencia = minuendo sustraendo
Declaracin de variables en JavaScript
En JavaScript no obligatorio declarar explcitamente las variables; pero es aconsejable

declararlas antes de utilizarlas. Para declarar una variable se usa la palabra: var
Por ejemplo:
var minuendo;
var sustraendo;
Puede escribirse tambin: var minuendo, sustraendo;

Tambin se puede asignar un valor a la variable cuando se declara:
var minuendo = 9;
var sustraendo = 5;
var diferencia = minuendo sustraendo;
Ejemplo:
<html>
<head>
<title>Variables en JavaScript</title>
<script type="text/javaScript">
var minuendo; // Se crea la variable "minuendo", actualmente no tiene ningn
valor
minuendo=25; // ahora "minuendo" tiene el valor numrico 25
var sustraendo=10; //Se crea la segunda variable y se le asignado un valor

//las variables guardan datos con lo que se puede realizar operaciones
var diferencia=minuendo-sustraendo;
//Se ha creado la variable diferencia y asignado la diferencia de minuendo y
sustraendo
alert(diferencia); // muestra el valor de la variable diferencia
</script>
</head>
<body>
<h1>Ejemplo con variables</h1>
Hemos usado "var", el resto es similar a otros lenguajes de programacin
</body>
</html>
17
Operadores
Las variables por s solas son de poca utilidad, para hacer programas realmente tiles son
necesarios los operadores, ya que estos permiten manipular el valor de las variables, realizar
operaciones matemticas con sus valores y comparar diferentes variables. De esta forma, los
operadores permiten a los programas realizar clculos complejos y tomar decisiones lgicas en
funcin de comparaciones y otros tipos de condiciones.
Los operadores se dividen en:

Operadores de asignacin
Su signo es el igual (=).

Tiene un uso distinto del que posee en matemtica, porque sirve para asignar un valor y no
a establecer relaciones de igualdad, para el cual de utiliza este otro operador (= =).
Ejemplo:
var sustraendo=10;
Operadores aritmticos
Los operadores aritmticos toman los valores numricos como sus operandos y devuelve
un solo valor numrico.
Suma +
Resta -
Multiplicacin *
Divisin /
Resto de la Divisin(mdulo) %
Incremento ++
Decremento --
Los primeros operadores son binarios, es decir que se aplican sobre dos argumentos.
Ejemplo:
var diferencia=minuendo-sustraendo;
Operadores relacionales
Permiten comparar variables.
Mayor que '>'
Menor que '<'
Igual '=='
Distinto '='
Mayor o igual que '>='
Menor o igual que '<='
Operadores lgicos
Permiten construir expresiones lgicas.
Devuelve true si ambos operandos son true '&&'
Devuelve true si alguno de los operandos son true '||'
Niega el operando que se le pasa '!'
18
Operadores cadenas
Las cadenas de caracteres, o variables de texto, tambin tienen sus propios operadores
para realizar acciones tpicas sobre cadenas. Aunque javascript slo tiene un operador
para cadenas se pueden realizar otras acciones con una serie de funciones predefinidas
en el lenguaje.
+ Concatena dos cadenas, pega la segunda cadena a continuacin de la primera.
Ejemplo
dato1="Bienvenidos"
dato2="estudiantes"
cadena=dato1+dato2 //cadena sera " Bienvenidosestudiantes"
El operador + sirve para dos usos distintos, si los operandos son nmeros los suma,
pero si se trata de cadenas las concatena. Javascript es suficientemente listo para
entender qu tipo de operacin realizar mediante una comprobacin de los tipos que estn
implicados.
Ejemplo: Elaborar un programa en JavaScript que defina e inicialice una variable de tipo cadena
de caracteres donde almacenemos el nombre de una empresa, otra variable de tipo real donde
almacenar la altura de una persona, una variable de tipo entero donde almacenemos una edad.
Imprimir cada variable en una lnea distinta en pantalla.
<html>
<head>
<title>Variables</title>
</head>
<body>
var nombre_empresa="Ventas Generales S.A";
var altura=1.61;
var edad=19;
document.write(nombre_empresa);
document.write("<br>");
document.write("La edad es: ",edad+" aos");
document.write("<br>");
document.write(altura);
</script>
</body>
</html>
Ejemplo: Elaborar un programa en JavaScript que permita ingresar dos nmeros por teclado e
imprimir la suma y su producto.
<html>
<head>
<title>Operadores</title>
<script type="text/JavaScript">
var valor1, valor2;
valor1=parseInt(prompt('Ingrese primer nmero:',''));
valor2=parseInt(prompt('Ingrese segundo nmero',''));
var suma=valor1+valor2;
var producto=valor1*valor2;
document.write('La suma es: ',suma);
19
document.write('<br>');
document.write('El producto es: ', producto);
alert("La suma es: "+suma+"\n"+"El producto es: "+producto);
</script>
</head>
<body>
</body>
</html>
Ejemplo: Programa en JavaScript que utiliza operadores lgicos.

<html>
<head>
<title>Operadores lgicos</title>
</head>
<body>
<script type="text/JavaScript">
a = 9;
b = 5;
c = 3;
document.write( (a != b) && (b > c) );document.write("<br>");
document.write( (a == b) || (b == c) );document.write("<br>");
document.write( !(b <= c) );document.write("<br>");
</script>
</body>
</html>
Estructuras de control de flujo
Los programas que se pueden realizar utilizando solamente variables y operadores son
una simple sucesin lineal de instrucciones bsicas; sin embargo, no se pueden realizar
programas que muestren un mensaje si el valor de una variable es igual a un valor determinado y
no muestren el mensaje en el resto de casos, tampoco se puede repetir de forma eficiente una
misma instruccin, como por ejemplo sumar un determinado valor a todos los elementos de un
array. Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que
son instrucciones del tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".
Tambin existen instrucciones del tipo "repite esto mientras se cumpla esta condicin".
Estructuras de decisin condicional

Las estructuras de decisin condicional nos permiten decidir mediante expresiones
condicionales qu sentencias de nuestro cdigo han de ser ejecutadas.
Estructura if
Es la estructura ms utilizada en JavaScript y en la mayora de lenguajes de
programacin, se emplea para tomar decisiones en funcin de una condicin.
Su definicin formal es:

if(condicin)
20
{
...
}
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la
condicin, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del
tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada
if...else.
Su definicin formal es:

if(condicin)
{
...
}
else
{
...
}
La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:
if(condicin)
{
...
}
else if(condicin)
{
...
}
else if(condicin)
{
...
}
else {

}
Bucles
Permiten repetir un nmero determinado o indeterminado de veces ciertas sentencias de

nuestro cdigo.
for(i = inicio; expresin condicional; i++)
{

}
Ejemplo: escribir y guardar con extensin js y luego lo enlazan desde un archivo html
21
var m;
m = "casa";
for(i = 0; i < 5; i++)
{
alert(m+" "+(i+1));
}
Ejemplo: escribir y guardar con extensin js y luego lo enlazan desde un archivo html
var dias=["Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Domingo"];
for(i=0;i<7;i++)
{
document.write(dias[i]+"<br>");
}
Ejemplo: Lo escriben y guardan como: edad.js y luego lo enlazan desde un archivo html
var edad;
edad=parseFloat(prompt("Ingresar edad: "));
if(edad >= 0 && edad < 18)
document.write('No participa de sufragio municipal');
Ejemplo: Lo escriben y guardan como: edad2.js y luego lo enlazan desde un archivo html
var edad;
edad=parseFloat(prompt("Ingresar edad: "));
if(edad >= 0 && edad < 18)
{
document.write('No participa de proceso electoral');
}
else
{
document.write('Si participa de proceso electoral');
}
Ejemplo: Lo escriben y luego lo guardar como: nota.js
var nota;
nota=parseFloat(prompt("Ingresar nota: "));
if(nota >= 0 && nota < 5) {
document.write('muy mal');
} else if(nota >= 5 && nota < 11) {
document.write('Mal');
} else if(nota >= 11 && nota < 14) {
document.write('Regular');
} else if(nota >= 14 && nota < 17) {
document.write('Notable');
} else if(nota >= 17 && nota <= 20) {
document.write('Sobresaliente');
} else {
document.write('La nota no es vlida. Tiene que estar entre 0 y 20');
22
}
Luego el siguiente cdigo lo escriben y guardan como: llamarnota.html
<html>
<head>
<title>Estructuras de control</title>
<script type="text/javaScript" src="nota.js">
</script>
</head>
<body>
<h1>Ejemplo de estructura if</h1>
</body>
</html>
Tarea de la sesin N 02
Elaborar un programa que permita cargar el nombre de un usuario y su correo por teclado.
Mostrar posteriormente los datos en la pgina HTML.
Realizar la carga del lado de un cuadrado, mostrar por pantalla el permetro del mismo.
Escribir un programa en el cual se ingresen cuatro nmeros, calcular e informar la suma de
los dos primeros y el producto del tercero y el cuarto.
Realizar un programa que lea cuatro valores numricos e informar su suma y producto.
Se debe desarrollar un programa que pida el ingreso del precio de un artculo y la cantidad
que lleva el cliente. Mostrar lo que debe abonar el comprador.
Crear un array llamado meses y que almacene el nombre de los doce meses del ao.
Mostrar por pantalla los doce nombres utilizando la funcin alert() y document.write().
Determinar el resultado de las cuatro operaciones matemticas bsicas realizadas con dos
elementos numricos(ingresados por teclado).
Escribir un programa en el cual se ingrese el nombre de un alumno y las notas: examen
parcial(30%), trabajo(30%) y examen final(40%). Mostrar en pantalla el nombre del alumno,
su promedio y mensaje de su condicin final: Aprobado o Desaprobado.
Realizar un programa que lea por teclado dos nmeros, si el primero es mayor al segundo
informar su suma y diferencia, en caso contrario informar el producto y la divisin del
primero respecto al segundo.
Se ingresa por teclado un nmero positivo de uno o dos dgitos (1..99) mostrar un mensaje
indicando si el nmero tiene uno o dos dgitos (recordar de convertir a entero con parseInt
para preguntar posteriormente por una variable entera). Tener en cuenta qu condicin
debe cumplirse para tener dos dgitos, un nmero entero.
Se ingresa por teclado un valor entero, mostrar un mensaje que indique si el nmero es
positivo, cero o negativo.
De un postulante a un empleo, que realiz un test de capacitacin, se obtuvo la siguiente
informacin: nombre del postulante, cantidad total de preguntas que se le realizaron y
cantidad de preguntas que contest correctamente. Se pide confeccionar un programa que
lea los datos del postulante e informe el nivel del mismo segn el porcentaje de respuestas
correctas que ha obtenido, y sabiendo que:
Nivel superior: Porcentaje>=90%.

Nivel medio: Porcentaje>=75% y <90%.
Nivel regular: Porcentaje>=50% y <75%.
23
Fuera de nivel: Porcentaje<50%.
De un operario se conoce su sueldo y los aos de antigedad. Se pide confeccionar un
programa que lea los datos de entrada e informe
a) Si el sueldo es inferior a 500 y su antigedad es igual o superior a 10 aos, otorgarle un
aumento del 20%, mostrar el sueldo a pagar.
b) Si el sueldo es inferior a 500 pero su antigedad es menor a 10 aos, otorgarle un
aumento de 5%.
c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la pgina sin cambios.
Confeccionar un programa que permita ingresar un valor del 1 al 10 y nos muestre la tabla
de multiplicar del mismo (los primeros 12 trminos)
Ejemplo: Si ingreso 3 deber aparecer en pantalla los valores 3, 6, 9, hasta el 36.
Se realiza la carga de 10 valores enteros por teclado. Se desea conocer:
a) La cantidad de valores negativos ingresados.
b) La cantidad de valores positivos ingresados.
c) La cantidad de mltiplos de 15.
d) El valor acumulado de los nmeros ingresados que son pares.
24
JavaScript
Funciones
Son una serie de instrucciones que englobamos dentro de un mismo proceso, este proceso
se podr luego ejecutar desde cualquier otro sitio con slo llamarlo. Por ejemplo, en una pgina
web puede haber una funcin para cambiar el color del fondo y desde cualquier punto de la pgina
podramos llamarla para que nos cambie el color cuando lo deseemos. Podemos decir tambin
que una funcin es un mdulo de un programa separado del cuerpo principal, que realiza una
tarea especfica y que puede regresar un valor a la parte principal del programa u otra funcin o
procedimiento que la invoque.
Las funciones se utilizan constantemente, no slo las que escribes t, sino tambin las que
ya estn definidas en el sistema, pues todos los lenguajes de programacin suelen tener muchas
funciones para realizar procesos habituales, como por ejemplo obtener la hora, imprimir un
mensaje en la pantalla o convertir variables de un tipo a otro. Ya hemos visto alguna funcin en
nuestros ejemplos de la sesin N 02. Por ejemplo, cuando hacamos un document.write() en
realidad estbamos llamando a la funcin write() asociada al documento de la pgina, que escribe
un texto en la pgina.
El desarrollo web siempre tiene dos interacciones: la que se produce en el lado del servidor
y la que se produce en el lado del cliente, esta segunda cada vez tiene ms relevancia para
conseguir una mejor experiencia del usuario y JavaScript es el responsable de esto. JavaScript es
una de esas tecnologas que se pens para abordar pequeos problemas, pero que por
cuestiones de compatibilidad y aceleracin tecnolgica, se ha convertido en una tecnologa
verstil a la vez necesaria para poder afrontar las exigencias de la actualidad.
Sintaxis:
Caractersticas importantes en la sintaxis de una funcin:
Una declaracin de funcin siempre empieza con la palabra clave function.
El siguiente punto es el nombre de la funcin. El nombre de la funcin es importante,

porque es lo que debes recordar para utilizarla y reutilizar su cdigo. Debe ser una
descripcin precisa de lo que la funcin hace.
Inmediatamente despus del nombre de la funcin viene un par de parntesis. Dentro de

ellos viene la lista de argumentos de la funcin, la cual te permite hacer la funcin ms
genrica y reutilizable; puedes aplicarla a ms situaciones ms fcilmente.
Finalmente viene un par de llaves que contienen cdigo: esto significa un bloque de cdigo
en JavaScript. Todo lo que est en el bloque ser ejecutado cuando la funcin sea
llamada, en orden, en la misma forma que cualquier otra porcin de cdigo en JavaScript.
La forma general de una funcin es:
function Nombredelafuncin(parmetros)
25
{
cuerpo de instrucciones;
return [dato, var, expresin];
Utilizando una funcin:

Luego de definir la funcin, para llamarla desde alguna parte del cdigo se escribe:
Nombredelafuncin();
1) Ejemplo de una funcin sin parmetros:
<html>
<head>
<title>Funciones con javascript </title>
</head>
<body>
function bienvenida(){
document.write("<H2>Hola, este es un ejemplo de funcin</H2>");
}
//llamando a la funcin
bienvenida();
</script>
<br>
FUNCIONES CON JAVASCRIPT 2013
</body>
</html>
2) Ejemplo de una funcin sin parmetros; pero observar que la funcin est dentro del
encabezado y se le ha llamado desde el cuerpo del documento(body):
<html>
<head>
function bienvenida(){
document.write("<H1>Hola, este es un ejemplo de funcin</H1>");
}
</script>
</head>
<body>
//llamando a la funcion
bienvenida();
</script>
<br>
</body>
</html>
Ahora Ud. pruebe este ejemplo escribiendo slo la funcin en un archivo (.js) y luego enlazarlo
desde un archivo (.html)
26
3) Ejemplo de una funcin con parmetros(argumentos):
<html>
<head>
</head>
<body>
function suma(a,b){
return a + b;
};
var res;
//llamando a la funcin suma
res=suma(6,25);
document.write("La suma es: "+res);
</script>
<br>
</body>
</html>
Ahora el ejemplo anterior; pero ingresando los valores por teclado y escribiendo la funcin en un
archivo (.js) y enlazarlo desde un archivo (.html)
Escribir y guardar como: suma.js
function suma(a,b)
{
return a+b;
}
Escribir y guardar como: llamarsuma.html
<html>
<head>
<title>Funciones con parmetros en javascript </title>
<script type="text/javascript" src="suma.js">
</script>
</head>
<body>
var n1,n2;
n1=parseFloat(prompt("Ingresar primer nmero: "));
n2=parseFloat(prompt("Ingresar segundo nmero: "));
var res;
res=suma(n1,n2);
alert("La suma es: "+res);
</script>
<br>
La funcin est en el archivo --------> <b>suma.js</b>
</body>
</html>
27
EVENTOS EN JAVASCRIPT
Los eventos son la manera que tenemos en Javascript de controlar las acciones de los
visitantes y definir un comportamiento de la pgina cuando se produzcan. Cuando un usuario
visita una pgina web e interacta con ella se producen los eventos y con Javascript se puede
definir qu puede ocurrir cuando se produzcan. El manejo de eventos permite tener pginas
interactivas, con ellos podemos responder a las acciones de los usuarios.
En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos

que ste produce. Los eventos se capturan mediante los manejadores de eventos. En este tipo de
programacin, los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla,
que mueva el ratn, que cierre la ventana del navegador), a continuacin, el script responde a la
accin del usuario normalmente procesando esa informacin y generando un resultado.
JavaScript permite asignar una funcin a cada uno de los eventos. De esta forma, cuando
se produce cualquier evento, JavaScript ejecuta su funcin asociada. Este tipo de funciones se
denominan "event handlers" en ingls y suelen traducirse por "manejadores de eventos" como se
menciona en el prrafo anterior.
Los eventos ms utilizados en las aplicaciones web tradicionales son onload para esperar
a que se cargue la pgina por completo, los eventos onclick, onmouseover, onmouseout para
controlar el ratn y onsubmit para controlar el envo de los formularios. Las acciones tpicas que
realiza un usuario en una pgina web pueden dar lugar a una sucesin de eventos. Al pulsar por
ejemplo sobre un botn de tipo <input type="submit"> se desencadenan los eventos
onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.
La siguiente tabla resume los eventos ms importantes definidos por JavaScript:
28
Manejadores de eventos
Las funciones o cdigo JavaScript que se definen para cada evento se denominan
"manejador de eventos" o event handlers y como JavaScript es un lenguaje muy flexible, existen
varias formas diferentes de indicar los manejadores:
Manejadores como atributos de los elementos HTML.
Manejadores como funciones JavaScript externas.
Manejadores "semnticos".
Manejadores de eventos como atributos HTML

Se trata del mtodo ms sencillo y a la vez menos profesional de indicar el cdigo JavaScript
que se debe ejecutar cuando se produzca un evento. En este caso, el cdigo se incluye en un
atributo del propio elemento HTML.
Ejemplo:
Se quiere mostrar un mensaje cuando el usuario pinche con el ratn sobre un botn
<input type="button" value="Pulsar aqu y observa lo que sucede" onclick="alert('Ha
29
pulsado el botn');" />
Ahora si hacemos doble clic(Estamos utilizando ondblclick en lugar de onclic)
<input type="button" value="Pulsar aqu y observa lo que sucede"

ondblclick="alert('Ha pulsado el botn');" >
Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automticamente y que se
emplea en algunas tcnicas avanzadas de programacin. En los eventos, se puede utilizar la
variable this para referirse al elemento HTML que ha provocado el evento. Esta variable es muy
til para ejemplos como el siguiente: cuando el usuario pasa el ratn por encima del <div>, el color
del borde se muestra de color negro. Cuando el ratn sale del <div>, se vuelve a mostrar el borde
con el color gris claro original.
<div id="ejemplo" style="width:150px; height:60px; border:thin solid silver">

</div>
Si no se utiliza la variable this, el cdigo necesario para modificar el color de los bordes,
sera el siguiente:
<div id="ejemplo" style="width:150px; height:60px; border:thin solid silver"

onmouseover="document.getElementById('ejemplo').style.borderColor='black';"
onmouseout="document.getElementById('ejemplo').style.borderColor='silver';">
</div>
El cdigo anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del
cdigo de un evento, JavaScript crea automticamente la variable this, que hace referencia al
elemento HTML que ha provocado el evento. As, el ejemplo anterior se puede reescribir de la
siguiente manera:
<div id="ejemplo" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
</div>
El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue

funcionando correctamente aunque se modifique el valor del atributo id del <div>.
Manejadores de eventos como funciones externas

Si se realizan aplicaciones complejas, como por ejemplo la validacin de un formulario, es
aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a esta funcin
desde el elemento XHTML.
Ejemplo:
<input type="button" value="Pulsar aqu y observa lo que sucede" onclick="alert('Ha
pulsado el botn');" />
Ahora utilizando funciones:
30
Definir la funcin mostrarMensaje y luego se le incluye en el atributo del elemento HTML
para indicar que es la funcin que se ejecuta cuando se produce el evento. Podemos notar como
se incluye:
Guardar lo siguiente como mensaje.html
<script type="text/javascript" >

function mostrarMensaje() {
alert('Ha pulsado el botn');
}
</script>
<input type="button" value="Pulsar aqu y observa lo que sucede"

onclick="mostrarMensaje()" />
Tambin tenemos los manejadores de eventos semnticos, que es una tcnica evolucin
del mtodo de las funciones externas.
Ejemplos:
En el siguiente cdigo(eventos del ratn o mouse de Javascript) se utiliza el evento onclick

para mostrar un cuadro de dialogo con un mensaje de informacin y luego con una confirmacin,
antes de enviar al usuario al destino solicitado.
El siguiente cdigo gurdalo como: mensaje_confirmacin.html
<a href="http://uladech.edu.pe"
onclick="alert('Este link te dirige a la pgina de ULADECH Catlica')"> ULADECH</a>
<br><br><br>
<a href="#"
onclick="javascript:if(confirm('Este link te dirige a la pgina de ULADECH Catlica,
pide confirmacin'))
{parent.location='http://uladech.edu.pe'}else{''};"> ULADECH </a>
Tambin
En el siguiente ejemplo vamos a usar los eventos onfocus y onblur de Javascript:

El siguiente cdigo gurdelo con el nombre que crea conveniente:
<input type="text" value=""

onfocus="value='Se tiene el focus';style.backgroundColor='green';"
onblur="value='Se pierde el focus';style.backgroundColor='red';" />
En el siguiente ejemplo vamos a usar el evento onload de Javascript:

<body onload="saludo()">
function saludo()
{
31
alert('Bienvenido a la pgina de Javascript')
}
</script>
</body>
En el siguiente ejemplo vamos a usar el evento onselect de Javascript:

<input type="text" value="Ejemplo utilizando onselect"

onselect="alert('Se ha seleccionado texto')"/>
En el siguiente ejemplo vamos a usar el evento onchange de Javascript:

<input type="text" value="Utilizando onchange"

onchange="style.backgroundColor='blue';" />
En el siguiente cdigo se maneja el evento desde dentro de un bloque JavaScript, esto se conoce
generalmente como JavaScript discreto, se nota la limpieza del HTML:
<a id="enlace" href="http://www.yahoo.com/">EVENTOS</a>
document.getElementById("enlace").onclick = function ejemplo() {
alert("Enlace a una pgina web");
}
</script>
Con este cdigo se modifica el tamao de la ventana del navegador:
<html>
<head>
<title>Ejemplo utilizando onResize</title>
</head>
<body onResize="alert('Ha modificado el tamao de la ventana');">

</body>
</html>
Con este cdigo se produce el evento al pulsar una tecla:
<html>
<head>
<title> Ejemplo utilizando onKeyPress</title>
</head>
<body>
<center>
<input type="text" size=35 name="texto" value="Puede pulsar
cualquier tecla" onKeyPress = " alert('Ha pulsado una tecla!');">
32
</center>
</body>
</html>
A continuacin un ejemplo sencillo de la aplicacin de un evento en formularios(Validacin de

campos de texto no vaco):
<html>
<head>
<title>Validacin de Formularios con Javascript</title>
function validar(){
if(formulario.nombre.value=='')
{
alert('Tienes que escribir un nombre');
}
if(formulario.correo.value=='')
{
alert('Tienes que escribir un correo electrnico valido');
}
if(formulario.texto.value=='')
{
alert('Tienes que escribir un texto');
}
}
</script>
</head>
<body>
<h1>Validar un formulario con javascript</h1>
<form name="formulario">
Nombre:<input type="text" name="nombre" /><br>
Correo:<input type="text" name="correo" /><br>
<textarea name="texto" cols="50" rows="5"></textarea><br>
<input type="submit" value="Enviar" onClick="validar()">
</form>
</body>
</html>
33
Tecnologas de programacin del lado del cliente:Applets, llamada,
ciclo de vida, mtodos.
Los applets son pequeas aplicaciones escritas en Java que se incluyen en pginas Web
(HTML) y que se puede ejecutar en cualquier navegador que disponga de un intrprete Java, sin
que para su uso necesite intercambiar Informacin con el servidor ya que siempre se ejecuta en el
cliente.
Los applets no son exactamente aplicaciones Java, ya que presentan las siguientes
diferencias respecto a las aplicaciones normales Java:
Se cargan mediante un navegador, no siendo lanzados por el intrprete Java.
Son cargados a travs de la red por medio de pginas HTML y no residen en el disco
duro de la mquina que los ejecuta.
Poseen un ciclo de vida diferente; mientras que una aplicacin se lanza una vez, una
applet se arranca (inicia) cada vez que el usuario recarga la pgina en la que se
encuentra la applet.
Tienen menos derechos que una aplicacin clsica, por razones de seguridad. De
modo predeterminado en el puesto que los ejecuta no pueden ni leer ni escribir
ficheros, ni lanzar programas.
Ventajas
Son multiplataforma (funcionan en Linux, Windows, Mac OS, y en cualquier sistema
operativo para el cual exista una JVM)
34
El mismo applet puede trabajar en "todas" las versiones de Java, y no slo la ltima
versin del plug-in. Sin embargo, si un applet requiere una versin posterior de la JRE, el
cliente se ver obligado a esperar durante la descarga de la nueva JRE
Es soportado por la mayora de los navegadores Web.
Puede ejecutarse con velocidades comparables a la de otros lenguajes compilados, como
C + + (dependiendo de la versin de la JVM)
Puede trasladar el trabajo del servidor al cliente, haciendo una solucin Web ms
escalable tomando en cuenta el nmero de usuarios/clientes
Puede ser almacenado en la memoria cache de la mayora de los navegadores Web, de
modo que se cargar rpidamente cuando se vuelva a cargar la pgina Web.
Desventajas
Requiere el plug-in de Java, que no est disponible por defecto en todos los navegadores
web.
No puede iniciar la ejecucin hasta que la JVM est en funcionamiento, y esto puede tomar
tiempo la primera vez que se ejecuta un applet.
Si no est firmado como confiable, tiene un acceso limitado al sistema del usuario - en
particular no tiene acceso directo al disco duro del cliente o al portapapeles.
Un Applet podra exigir una versin especfica del JRE.
Estructura del Applet(Mtodos de los applets)
Su estructura esta dividida en 5 fases:

void init()
void start()
void stop()
void destroy()
void paint()
35
Cada crculo representa una fase en el ciclo de vida de un applet. Las flechas
representan transiciones y el texto representa la accin que causa la transicin. Cada fase est
marcada con una invocacin a un mtodo del applet:
void init(); Es invocado cuando se carga la applet. Aqu se suelen introducir las iniciaciones
que la applet necesite.
void start();Es invocado cuando la applet, despus de haber sido cargada, ha sido parada
(cambio de pgina Web, minimizacin del navegador,...), y de nuevo activada (vuelta a la
pgina, restauracin del navegador,...). Se informa a la applet de que tiene que empezar
su funcionamiento.
void stop(); Es invocado para informar a la applet de que debe de parar su ejecucin. As
una applet que utilice threads, debera detenerlos en el cdigo de este mtodo.
void destroy();Es invocado para informar a la applet de que su espacio est siendo
solicitado por el sistema, es decir el usuario abandona el navegador. La applet debe de
aprovechar este momento para liberar o destruir los recursos que est utilizando.
void paint(); Es invocado cada vez que hay que el navegador redibuja la applet.
Creacin de applet
Para el desarrollo de los ejemplos utilizaremos NetBeans, editor que hemos utilizado en
ciclos anteriores.
Clic en menu archivo(File) , nuevo proyecto (New Project). En la ventana en

categoras(Categories) seleccionar Java y en proyectos(Projects) Aplicacin Java(Java
Application), luego siguiente(next).
36
En la siguiente ventana escribir el nombre de su proyecto, como se muestra y luego
finalizar(Finish):
En la ventana de proyectos, buscar el que se acaba de crear, luego ir al paquete el

cual tiene el mismo nombre; pero en minsculas(ejemploapplet), luego clic derecho,
nuevo(new) y en la lista que se despliega seleccionar Applet, si no aparece seleccionar
otro(other); en la nueva ventana en categoras seleccionar Java y en tipo de archivos(File
Types) seleccionar Applet, luego clic en el botn siguiente(next).
37
Aparece una nueva ventana donde hay que poner el nombre, como se muestra, luego
finalizar(Finish):
Observa que debajo del paquete aparece Saludo.java en el lado derecho la plantilla
lista para escribir nuestro cdigo, es una de las ventajas de utilizar NetBeans.
Dentro de public class, ya aparece uno de los mtodos que vamos a utilizar que es
init(). A continuacin escribiremos un mensaje utilizando paint().
38
El mtodo paint suministra el contexto grfico g, un objeto de la clase Graphics con el
cual podemos dibujar en el rea de trabajo del componente, llamando desde dicho objeto
g a las funciones definidas en la clase Graphics. Para mostrar un mensaje, llamamos
desde el objeto g a la funcin miembro drawString, el primer argumento es el string que
deseamos mostrar, y los dos nmeros indican las coordenadas de la lnea base del primer
carcter.
public void paint(Graphics g){
g.drawString(Saludos , 40, 70);
En la plantilla se ha borrado los comentarios y agregado el cdigo anterior adems del

import debajo del paquete(lnea 5).
En el men ejecutar, compilar archivo(Compile File) y luego ejecutar archivo(Run

File). Aparece una ventana de ejecucin del applet llamada AppletViewer.
39
Insertando un applet en una pgina web
Las etiquetas HTML como <H1>, <TABLE>, <IMG>, etc. sealan el tamao y la disposicin
del texto y las figuras en la ventana del navegador. Cuando Sun Microsystems desarroll el
lenguaje Java, se aadi la etiqueta que permite insertar applets en las pginas web. Como otras
etiquetas tiene un comienzo <APPLET> y un final sealado por </APPLET>
En el Entorno Integrado de Desarrollo (IDE) NetBeans se genera la clase que describe el

applet con algunos mtodos y lo guarda en un archivo cuyo nombre es el mismo que el que tena
con extensin .java (Saludo.class) . Genera tambin el archivo HTML de la pgina que contiene el
applet.
Los archivos mencionados los puedes encontrar ingresando a la carpeta(proyecto) que

creaste, dentro la carpeta src, que contiene el paquete(carpeta) y en l est Saludo.java. En la
carpeta build se encuentra el archivo Saludo.html y en la carpeta classes, dentro del paquete
est Saludo.class.
40
En el ejemplo se muestra cmo se inserta el applet de forma elemental en la estructura de
una pgina web(podemos guardarlo como ejemplo_applet.html):
<html>
<head>
<title>Applet en una pgina web</title>
</head>
<body>
<h1>Ejemplo de cómo insertar un applet en una página web</h1>
<applet code="Saludo.class" width=350 height=200></applet>
</body>
</html>
Luego hay que guardar archivo .html junto a Saludo.class. Si no se aprecia el applet desde
la pgina web comenta la primera lnea de cdigo del archivo Saludo.java que corresponde al
paquete(//package ejemploapplet;) y hacer clic en limpiar y construir(Clean and Build Project )
desde el men Ejecutar(Run) en el NetBeans, luego buscas Saludo.class dentro classes en la
carpeta build.
En el archivo generado por NetBeans se puede ver lo expuesto, considerando adems
otros elementos importantes y que luego se utilizarn.
41
Como se pueden haber dado cuenta, un applet, no es como una aplicacin que tiene
un mtodo main. El applet se inserta en una pgina web que se muestra en la ventana
del navegador. El navegador toma el control del applet llamando a algunos de sus
mtodos, uno de estos es el mtodo paint que se llama cada vez que se necesita mostrar
el applet en la ventana del navegador.
Cuando el applet se carga, el navegador llama a su mtodo init. En este mtodo el

programador realiza tareas de inicializacin, por ejemplo, establecer las propiedades de
los controles, disponerlos en el applet, cargar imgenes, etc.
El mtodo init se llama una sola vez. Despus, el navegador llama al mtodo paint.
A continuacin, se llama al mtodo start. Este mtodo se llama cada vez que se
accede a la pgina que contiene el applet. Esto quiere decir, que cuando dejamos la
pgina web que contiene el applet y regresamos de nuevo pulsando en el botn "hacia
atrs" el mtodo start vuelve a llamarse de nuevo, pero no se llama el mtodo init.
Cuando dejamos la pgina web que contiene el applet, por ejemplo, pulsando en un
enlace, se llama al mtodo stop.
Finalmente, cuando salimos del navegador se llama al mtodo destroy.
Veamos otro ejemplo, donde se define la funcin init para establecer el color de fondo del
applet mediante setBackground. Como se mencion lneas arriba la funcin init se llama cuando
se carga el applet.
public void init(){
setBackground(Color.yellow);
En el ejemplo anterior slo nos falta agregar la lnea central.
42
En la ventana de ejecucin:
Podemos utilizar la siguiente informacin para nuestros ejercicios.
43
Otro ejemplo:
package ejemploapplet;
import java.applet.Applet;
import java.awt.*;
public class Texto extends Applet {
public void init() {

setBackground(Color.white);
}
public void paint(Graphics g){

g.setColor(Color.RED);
g.fillRect(10,10,270,140);
g.setColor(Color.yellow);
Font font = new Font("arial",Font.BOLD,40);
g.setFont(font);
g.drawString("ULADECH",35,80);
}
}
Lo resaltado no aparece en la plantilla en la creacin del applet.

Se mostrar en la ejecucin:
44
Ejemplo:
En el siguiente applet se trabaja con una imagen con el uso de:
retrato=getImage(getDocumentBase(), "spiderman.gif") y luego se muestra con
g.drawImage(retrato,0,0,this);
retrato es el objeto creado apartir de la clase Image
Parmetros en los applets

Los parmetros se pasan con el mtodo getParameter(), de la clase
java.applet.Applet.
Ejemplo:
45
Luego en la creacin del documento web se utiliza la marca param entre <applet> y
</applet>.
Con param se han usado los atributos:
name ----> Nombre del parmetro.
value ----> Valor que se desea transmitir.
Ejercicio 1
Disear un applet, el cual permita mostrar sus apellidos y nombres 6 veces; pero cada vez
debe mostrarlo con diferente color, diferente tipo de letra y diferente tamao.
Ejercicio 2
Escriba un applet que pida al usuario que introduzca dos nmeros, que obtenga los dos
nmeros del usuario y dibuje su suma, producto (multiplicacin), diferencia y cociente
(divisin). Puede utilizar como modelo el ejemplo realizado en clase.
Ejercicio 3
Escriba un applet que pida al usuario que introduzca dos nmeros reales, que obtenga los
nmeros del usuario y muestre los dos nmeros primero, y despus el nmero ms grande
seguido de las palabras "es mayor que" como una cadena en el applet. Si los nmeros son
iguales, el applet deber imprimir el mensaje "Estos nmeros son iguales".
Ejercicio 4
Escriba un applet que reciba tres nmeros reales del usuario y que muestre la suma, el
promedio, el producto, el menor y el mayor de estos nmeros, como cadenas en el applet.
46
Ejercicio 5
Disee un applet que incluya la utilizacin de parmetros.
Ejercicio 6
Crear un applet en el que aparezca un texto en un valo de color rojo. Antes de pintar la
palabra, pinte una elipse con g.drawOval(40,50,300,100), y luego escriba el valor de las
coordenadas del texto, para situar la palabra en el centro de la elipse. Recuerde que el
origen de las coordenadas (0,0) es la esquina izquierda de la pantalla.
Cambie el color del fondo del applet con el mtodo setForeground(Color.black); (est
mtodo pone el fondo en negro).
Pinte 4 elipses de tamao distinto y cambie el color redefinindolo cada vez con el mtodo
setColor de la clase Graphics utilizando diferentes colores ejemplo:g.setColor(Color.red).
Se puede pintar una elipse slida usando fillOval en vez de drawOval.
Pruebe nuevas figuras geomtricas: drawLine, drawArc, fillArc, drawRect,

fillRect,drawRoundRect, fillRoundRect, drawPolygon, fillPolygon (al polgono se le pasan
3argumentos: un array de coordenadas x, un array de coordenadas y, y el nmero de
puntos totales).
47
Formulario - JApplet
Es posible crear applet con Interfaz Grfica de Usuario(formularios)utilizando NetBeans, de
forma similar a los programas de escritorio que se han realizado en los cursos de Programacin
Visual, es decir, utilizando formularios y colocando de forma visual los elementos que van a formar
parte del programa.
A continuacin veremos un ejemplo sencillo, de una suma de dos nmeros; pero en el que
se reflejarn los pasos para su creacin y luego la forma de insertarlo en una pgina web.
Clic en menu archivo(File) , nuevo proyecto (New Project). En la ventana en

categoras(Categories) seleccionar Java y en proyectos(Projects) Aplicacin Java(Java
Application), luego siguiente(next).
En la siguiente ventana escribir el nombre de su proyecto, como se muestra y luego

finalizar(Finish):
48
En la ventana de proyectos, buscar el que se acaba de crear, luego ir al paquete el cual
tiene el mismo nombre; pero en minsculas(operaciones), luego clic derecho, nuevo(new)
y en la lista que se despliega seleccionar JApplet Form, si no aparece seleccionar
otro(other); en la nueva ventana en categoras seleccionar Swing GUI Forms y en tipo de
archivos(File Types) seleccionar JApplet Form, luego clic en el botn siguiente(next).
finalizar(Finish):
49
Tenemos una presentacin similar a como de diseaban aplicaciones de escritorio: el
formulario, la paleta, la ventana de propiedades, entre otros elementos.
Ahora trabajaremos en Diseo(Design), colocando contenedores y los controles

necesarios, similar como en Programacin Visual. En el formulario podemos hacer diseo
absoluto y utilizar algunas propiedades de los controles y contenedores que hagan
atractiva la interfaz.
Cambiar el nombre a los controles(Change Variable Name), lo que nos permite luego
utilizarlos, por esa razn tenemos que poner un nombre que haga referencia al mismo.
50
Clic derecho en el botn Calcular, luego en Events, Action, actionPerformed que permite
acceder a la fuente(source)
Para los campos de texto:
txtPrimerValor, txtSegundoValor, txtResultado
Para los botones:
btnCalcular, btnNuevo, btnSalir
Las estiquetas:
lblPrimerValor, lblSegundoValor, lblResultado
Clic derecho en el botn Calcular, luego Events, Action y actionPerformed. Aparece la

ventana Fuente(Source), exactamente en el lugar preciso donde se va a escribir.
51
Se escribe el cdigo(bsico) como se muestra, compila y ejecuta.
Insertando el applet en una pgina web

Vamos a dirigirnos donde est guardado nuestro proyecto y se observa lo siguiente:
Ahora vamos al men ejecutar(Run) y selecciona Limpiar y Construir(Clean and Build

Project), volvemos al proyecto y se observa que hay nueva carpeta de nombre dist cuyo contenido
tambin se muestra a continuacin:
A continuacin vamos a escribir el cdigo para la pgina web, donde se utiliza las
etiquetas <applet> y </applet> con algunos atributos adicionales a los usados en la sesin
anterior. El archivo .html se puede escribir en cualquier editor, incluso desde el mismo netBeans.
En NetBeans se puede crear de la siguiente manera, clic derecho en un nuevo paquete

creado dentro de nuestro proyecto, nuevo(New) y luego Archivo Html(HTML File), si no aparece
52
en la lista, seleccionar Otro(Other). En la ventana que aparece en categoras seleccionar
Categoras(Categories), al lado derecho en Tipo de Archivos(File Types) seleccionar HTML File,
finalmente Next(Siguiente).
En nuestro caso el archivo insertar.html lo vamos a crear con el editor de texto y en un

directorio diferente, donde adicionalmente colocaremos el archivo .class(no es necesario, pues
est comprimido dentro del .jar), el archivo .jar y el directorio lib del proyecto OPERACIONES. En
caso se guarden los applets en directorios diferentes a la pgina considerar el atributo
CODEBASE.
Finalmente en la pgina web se observa.
53
Ejemplo
Vamos a crear una aplicacin que permite cambiar el color de fondo y del texto que se ha
colocado en un rea de texto utilizando para ello botones.
Crear un nuevo proyecto de nombre COLORES.
En la ventana de proyectos, buscar el que se acaba de crear, luego ir al paquete el cual

tiene el mismo nombre; pero en minsculas(colores), luego clic derecho, nuevo(new) y en
la lista que se despliega seleccionar JApplet Form. En este caso ya aparece en la lista
porque ya se ha utilizado antes.
54
finalizar(Finish):
Tenemos una presentacin similar a como de diseaban aplicaciones de escritorio: el

formulario, la paleta, la ventana de propiedades, entre otros elementos.
55
Colocamos los contenedores y controles en el formulario:
rea de texto:
txtLetra
Para los botones:
btnRojo, btnVerde, btnAzul, rbAmarillo, rbNaranja, rbBlanco
Las estiquetas:
lblTitulo
Se escribe el cdigo(bsico) como se muestra, compila y ejecuta.
56
Hay que considerar agregar:
import java.awt.*;
Para trabajar Color.
Adems para poder apreciar en el AppletViewer el tamao completo del formulario

debemos utilizar setSize, el cual se escribe debajo de initComponents();
Para insertarlo en la pgina web, necesitamos del archivo .class(est dentro del .jar), el .jar
y el directorio lib. Para obtener el .jar tenemos que ir al men ejecutar(Run), Limpiar y
Construir(Clean and Build Project) lo que permite que aparezca dentro de nuestro proyecto
el directorio dist con el archivo que necesitamos.
Se escribe el cdigo HTML y junto a este documento se guarda el archivo .jar y el

directorio lib.
57
Finalmente en la pgina web se observa.
58
Ejercicio 1
Un restaurante decide ampliar sus ofertas de acuerdo a la siguiente escala de consumo.

Determinar el importe a pagar por lo consumido, el descuento y el impuesto correspondiente
(18%). Construir una aplicacin que permita automatizar la situacin presentada. El diseo de
la interfaz queda a su criterio(para los tres casos).
Consumo Descuento(%)
Mayor a 100 30
Mayor a 60 20
Mayor a 30 15
Hasta 30 10
Ejercicio 2
Escriba un applet que pida al usuario que introduzca dos nmeros, que obtenga los dos
nmeros del usuario y dibuje su suma, producto (multiplicacin), diferencia y cociente
(divisin). Puede utilizar como modelo el ejemplo realizado en clase.
Ejercicio 3
Escriba un applet que pida al usuario que introduzca dos nmeros reales, que obtenga los
nmeros del usuario y muestre los dos nmeros primero, y despus el nmero ms grande
seguido de las palabras "es mayor que" como una cadena en el applet. Si los nmeros son
iguales, el applet deber imprimir el mensaje "Estos nmeros son iguales".
Ejercicio 4
Escriba un applet que reciba tres nmeros reales del usuario y que muestre la suma, el
promedio, el producto, el menor y el mayor de estos nmeros, como cadenas en el applet.
Ejercicio 5
Se desea construir una aplicacin que permita ingresar una cantidad de camisas a comprar a
una distribuidora indicando el costo unitario y la tasa de descuento, para luego mostrar el
descuento, el costo total, el igv(18% del costo total) y el monto a pagar (costo total ms el
igv).
59
Evaluacin I Unidad
1.-Disear una pgina web que contenga un formulario en el cual sus campos deben ser validados
utilizando JavaScript(texto, nmeros, fecha, correos, opciones, etc.)
Uno de los grandes aportes de JavaScript a la creacin de interfaces web es la

posibilidad de acceder al contenido de los campos de los formularios para realizar
acciones sobre los valores introducidos por el usuario, modificarlos y, en ltima instancia,
validarlos. La validacin de los datos de un formulario mediante JavaScript no sustituye a
la validacin que debe realizarse, por motivos de seguridad, en la aplicacin del servidor
que recibe la informacin. Sin embargo, al aadir una validacin local con JavaScript, la
experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al
servidor y esperar su respuesta para obtener slo un mensaje informando de la
incorreccin de la informacin suministrada.
2.-En la misma pgina web se debe dar muestra del uso de funciones y principales eventos.
3.-Crear e insertar a su documento applets con y sin parmetros. Adems puede descargar y utilizar alguno
de internet que considere adecuado a su presentacin.
Cuestionario:
Las siguientes afirmaciones, son verdaderas o falsas?

1.-Alert es una funcin del lenguaje JavaScript que se utiliza para mostrar un mensaje en la ventana
del navegador, como una ventana emergente.
Verdadero
Falso
2.-En JavaScript hay eventos para todo excepto para controlar aspectos como el momento en que se
cambia el tamao de una ventana, el momento en que se imprime una pgina web o el momento antes
de comenzar la impresin.
Verdadero
Falso
3.-En JavaScript las estructuras utilizadas son siempre muy similares, se suele indicar el nombre de la
funcin, los parmetros que va a utilizar y posteriormente, entre llaves, se indican las acciones a
realizar.
Verdadero
Falso
4.-Existen cuatro posibles eventos cuando trabajamos con el teclado: onkeydown, onkeyup, onkeyfront
y onkeypress.
Verdadero
Falso
60
Captulo II
Tecnologas de Programacin del lado del

servidor
61
JavaServer Pages(JSP)
Es una tecnologa Java Enterprise Edition(Java EE)que permite generar contenido
dinmico para la web, en forma de documentos HTML, XML o de otro tipo. Esta tecnologa es un
desarrollo de la compaa Sun Microsystems.
Un JSP es uno de los componentes ms bsicos empleados para aplicaciones de servidor

en Java. Su composicin consta de dos grandes partes: HTML y lenguaje Java. Mediante HTML
se especifica el contenido esttico de despliegue y es mediante fragmentos del lenguaje Java que
se genera contenido dinmico en efecto cumpliendo la definicin de aplicacin de Servidor. Su
objetivo final es separar la interfaz (presentacin visual) de la implementacin (lgica de
ejecucin)
Para trabajar los archivos JSP, necesitamos algo ms que un compilador Java y una
mquina virtual, adems de estos, un servidor compatible con JSP, en nuestro caso usaremos
Tomcat ya que tiene soporte para tags. Tomcat es un servidor web con soporte de servlets y JSP,
incluye el compilador Jasper, que compila JSPs convirtindolas en servlets. El motor de servlets
de Tomcat a menudo se presenta en combinacin con el servidor web Apache. Dado que Tomcat
fue escrito en Java, funciona en cualquier sistema operativo que disponga de la mquina virtual
Java.
Como nosotros utlizamos NetBeans, no tenemos por qu preocuparnos por Tomcat, ya

que viene listo para utilizarlo, siempre y cuando utilicemos aquel que lo trae incorporado. Durante
la instalacin de NetBeans considerar la opcin personalizado y marcar la casilla de activacin,
para poder utilizarlo.
A continuacin se muestra un ejemplo sencillo de un JSP.
<HTML>
<HEAD><TITLE>JavaServer Pages</TITLE></HEAD>
<BODY>
<%
out.println("Ejemplo de cdigo de una pgina JSP");
%>
</BODY>
</HTML>
Donde se puede observar que el cdigo Java va encerrado entre:

<% y %> el mismo que es procesado por el servidor convirtindose en HTML que ser
enviado al cliente. Realmente una pgina JSP se convierte en un servlet que es quien se encarga
de la comunicacin con el cliente.
En las sesiones anteriores cuando guardbamos un archivo lo hacamos con la extensin
.html, lo que se hara ahora sera guardarlo con la extensin .jsp y colocarlo en un sitio donde el
servidor con soporte de JSP lo pueda encontrar; pero como mencionaba lneas arriba nosotros
utilizaremos el IDE NetBeans, que es un editor que nos facilita el trabajo ya que por ejemplo nos
muestra una plantilla con buena parte de la estructura de una pgina web y listo para insertar el
cdigo Java, incluso hasta para guardarlo no tenemos que preocuparnos por la extensin .jsp, ya
que lo hace automticamente.
62
Cmo Funcionan las Pginas JSP?
Una pgina JSP es bsicamente una pgina Web con HTML tradicional y cdigo Java. La
extensin de fichero de una pgina JSP es ".jsp" en vez de ".html" o ".htm", y eso le dice al
servidor que esta pgina requiere un manejo especial que se conseguir con una extensin del
servidor.
La etiqueta <% identifica el inicio de un scriptlet, y la etiqueta %> identifica el final de un
scriptlet. Cuando se llame a sta pgina por ejemplo(mensaje.jsp), ser compilada (por el motor
JSP) en un Servlet Java. En este momento el Servlet es manejado por el motor Servelt como
cualquier otro Servlet. El motor Servlet carga la clase Servlet (usando un cargador de clases) y lo
ejecuta para crear HTML dinmico para enviarlo al navegador. La siguiente vez que se solicite la
pgina, el motor JSP ejecuta el Servlet ya cargado a menos que la pgina JSP haya cambiado,
en cuyo caso es automticamente recompilada en un Servlet y ejecutada.
Ejemplo 1: creacin de una aplicacin web simple(Mensaje) usando NetBeans.

Creacin del proyecto. Men archivo(File), luego Nuevo Proyecto(New Project), en la
ventana que aparece en Categoras(Categories) seleccionamos Java Web y en Projects Web
Application, finalmente siguiente(Next).
En la siguiente ventana poner un nombre a nuestro proyecto, puede colocar el mismo que
observa en la imagen si desea. Adems puede observar abajo donde se guardar su
proyecto en este caso en forma prederminada; pero puede cambiarlo. Finalmente
63
Siguiente(Next).
Aparece la ventana en la que tiene que seleccionar el servidor(Server), en nuestro caso

Apache Tomcat y en Java EE Version seleccionar Java EE 6 Web.
64
Ya podemos hacer clic en Finalizar(Finish) para que aparezca nuestro proyecto en el lado
izquierdo; pero qu pasa si hacemos clic en Siguiente(Next), hagmoslo y veremos la
siguiente ventana donde se muestra algunos frameworks, contenido que trataremos
posteriormente en nuestro curso, as que no seleccionar y hacer clic en Finalizar(Finish).
Se ha creado nuestro proyecto SALUDO. En el nodo Pginas Web(Web Pages) se

guardan los archivos .jsp, en nuestro caso se ha creado de forma prederminada
index.jsp, cuyo contenido se muestra en el lado derecho. En web pages se pueden
crear otras carpetas para organizar mejor nuestro trabajo.
65
Describiendo brevemente el contenido de la pgina, de la lnea 1 al 5(lado izquierdo) es un
comentario y en la lnea 7 se muestra ya el cdigo Java que permite compilar el
documento a su formato final que es text/html. Todava no nos preocupemos mucho por
esto, ya que es uno de los componentes que ya se describirn. Para nuestro ejemplo
simplemente insertemos las lneas de color rojo que se mostraron en el cdigo del primer
ejemplo que puede hacerse tambin en una sola lnea.
Ahora clic derecho en el nombre de nuestro proyecto y Ejecutar(Run) , aparecer la

pgina.
Ejemplo 2: En el siguiente ejemplo vamos a crear un enlace desde la pgina ya creada(index.jsp)

66
a otra pgina que crearemos en nuestro mismo servidor que se llamar Presentacin.jsp la que
mostrar un saludo y la hora del servidor, de igual forma enlace a otra pgina de internet.
Creamos Presentacin.jsp. Clic derecho en nuestro proyecto, nuevo(New), luego JSP. Si

no estuviera nos dirigimos a Other, en la ventana que aparece en Categoras(Categories)
seleccionar Web y en Tipo de Archivo(File Types) selecciona JSP, Siguiente(Next), en la
siguiente caja de dilogo ponemos el nombre.
67
El archivo aparecer en nuestro proyecto, junto al index.
Agregar las siguientes lneas debajo del cdigo Java en index.jsp.
Quedar como se muestra:
68
En Presentacin.jsp escribir las lneas que se muestran.
Ahora clic derecho en el nombre de nuestro proyecto y Ejecutar(Run) , aparecer la

pgina.
Ya se puede utilizar los hipervnculos.
69
UTILIZACIN DE UN ELEMENTO JSP
Elemento
Sintaxis Interpretacion Equivalente XML
JSP
La expresion es evaluada <jsp:expresssion>expresi
Expresin <%=expresion%>
y situada en la salida. n</jsp:expression>
Cdigo java que ser
<jsp:scriptlet>cdigo
Scriptlet <%cdigo java%> interpretado, pudiendo
java</jsp:scriptlet>
producir cdigo HTML.
Para definir variables
<jsp:declaracion>variable
Declaracin <%!variable%> globales dentro de una
</jsp:declaracion>
JSP.
Proporciona instrucciones
Directiva al motor de <jsp:directive.page
<%@page att="val"%>
page procesamiento afectando att="val">
a toda la JSP.
Directiva <%@include Permite incluir un archivo <jsp:directive.include
include file="url"%> dentro de la JSP. file="url">
Para escribir comentarios
Comentario <%--comentario--%>
en la jsp.
Expresiones JSP
La sintaxis de una expresin es: <%= expresin %> y se utiliza para definir una
expresin y forzar el resultado a un String.
Las expresiones en JSP permiten que el resultado de la evaluacin de una expresin Java
70
se convierta a una cadena de caracteres que ser incluida en la pgina generada. Las
expresiones pueden incluirse en gran variedad de contextos y no deben terminarse por puntos y
comas.
Alternativamente, usando los espacios de nombres de XML:
<jsp:expression>expresin </jsp:expression>
Ejemplo:
<%= a+b %>
Ejemplo:
<%= new java.util.Date() %>.
Scriptlets
Es un trozo de cdigo Java.
Declaracin
Su formato es: <%! .... %> lo utilizamos para declarar variables o mtodos. Por ejemplo:
<%! int num1 = 10; double num2 = 2.0; %>
Directiva
Las directivas JSP nos permiten configurar alguna informacin que pueda ser usada en
nuestra pgina JSP, por ejemplo cosas como importar clases, definir una pgina de error, incluir
una pgina JSP en otra.
Ejemplo: para definir el lenguaje de escript y tambin puede usarse para especificar sentencias
import.
<%@page language="java" import="java.util.*" %>
Ejemplo: Que aparece en la plantilla del NetBeans
<%@page contentType="text/html" pageEncoding="UTF-8"%>
Ejemplo: que hemos utilizado en Presentacin.jsp en ejemplo 2:
<%@page import="java.util.Date" %>
71
Comentario
Formas de escribir comentarios en JSP.
Los comentarios en los que se utiliza etiquetas HTML en un archivo jsp y que si recibe el
cliente o peticionario de la pgina:

Comentario escrito en Java entre los identificadores <% y %> que no se enviarn al cliente
solicitante de la pgina, slo aparecen en la propia pgina JSP y en su servlet asociado.
<% // Comentario en Java de una sla lnea %>
Si queremos escribir un comentario para varias lneas:
<% /* Comentario
de varias lneas*/ %>
Tambin(que es el que se observa de la lnea 1 a la 5 en la plantilla de NetBeans):
<%-- Comentario escrito con JSP --%>
Ejemplo 3:
En el mismo proyecto crear Comentarios.jsp y en la plantilla agregar las lneas que se muestran:
Luego hacer clic derecho sobre la pgina web y ver cdigo fuente. Verificar el resultado acerca de
nuestros comentarios.
72
Ejemplo 4: Realizar La suma de dos nmeros.
Creamos el proyecto de nombre: OPERACION.
En el index.jsp de nuestro proyecto OPERACION vamos a crear un formulario, como se

muestra en la imagen:
Luego creamos el archivo suma.jsp, al cual se hace referencia en la imagen de arriba

precisamente en action, en el cual escribiremos conforme a la imagen:
73
Hacer clic derecho en nuestro proyecto y seleccionar ejecutar. Aparecer
Luego de Aceptar, se mostrar la imagen siguiente. Puede regresar para volver a efectuar otra
suma.
Tambin podemos aprovechar este ejemplo para trabajar uno de los elementos JSP: la
declaracin, para definir una variable:
<%! int resultado;%>
Ver la imagen:
74
Ejemplo 5:
Calcular el salario total de un trabajador, conociendo la cantidad de das trabajados y el

pago por da. Adems mostrar sus datos personales ingresados, como su nombre, direccin y su
telfono.
Se ha creado un formulario. Para el presente ejemplo el formulario se ha elaborado

utilizando la paleta(ventana del lado derecho). Una forma de colocar los objetos puede ser
haciendo doble clic sobre Form y aparece una ventana donde poner algunos elementos, por
ejemplo:
Tambin para las cajas de texto:
En index.jsp se debe escribir como se muestra en la imagen, que corresponde al

formulario donde se ingresan los datos, tener presente la importancia del name.
75
Luego crear calcula.jsp que aparece en el action del archivo index.
Ejecutar nuestra aplicacin web. Escribir los datos que se solicita y luego Calcular.
Finalmente observa la imagen con los resultados :
Se puede lograr una mejor presentacin si se utiliza tablas.
76
Tecnologa de Programacin V Ciclo
1. Calcular el factorial de un Nmero entero.

2. Crear una tabla de multiplicar.
3. Hacer una pgina en JSP que liste los 10 primeros nmeros enteros.
4. Crear una pgina JSP que salude con buenos das, buenas tardes o buenas noches en
funcin de la franja horaria en que la visitemos.
5. Realizar un contador de visitas en JSP.
6. Capturar un nmero cualesquiera e informar si es o no es mayor de 100.
7. Capturar un nmero entero cualesquiera e informar si es o no es mltiplo de 4.
8. Capturar los cinco datos ms importantes de un Empleado, incluyendo el sueldo diario y

los das trabajados desplegarle su cheque semanal slo si gan ms de $500.00 en la
semana, en caso contrario desplegarle un bono de despensa semanal de $150.00.
9. Capturar los datos ms importantes de un estudiante incluyendo tres calificaciones

construir una boleta de calificaciones en una pgina de respuesta.
10. Hacer una pgina JSP que liste los 100 primeros cuadrados.
77
ACCESO A BASE DE DATOS CON JSP
Base de datos.-
Base de datos es una coleccin de datos organizados y estructurados, segn un

determinado modelo de informacin que refleja no slo los datos en s mismos, sino tambin las
relaciones que existen entre ellos, estas se han convertido en un elemento indispensable para el
funcionamiento de los grandes motores de bsqueda y recuperacin de informacin a lo largo y
ancho de la Web, adems para la creacin de sedes web, Intranets y otros sistemas de
informacin.
JSP.-
JSP es un lenguaje muy potente de cdigo abierto que permite crear de manera fcil
aplicaciones Web. JEE (Java Enterprise Edition) es una tecnologa de las ms utilizadas. A veces
se utiliza el trmino: servidores de aplicaciones Java para referirse a aquellos servidores de
aplicaciones que implementan de forma adecuada las soluciones propuestas por JEE. JEE es una
especificacin que propone un estndar para servidores de aplicaciones. Define diferentes
tecnologas e indica cmo deben trabajar juntas.
Acceso a base de datos MySQL
El modelo de datos de java descansa en una serie de objetos especializados que facilitan
el procesamiento de una base de datos. El problema es comunicar un programa o aplicacin con
una base de datos y ms que comunicar se pretende que el programa o aplicacin realice una
serie de procesos u operaciones con la base de datos o mejor an con el conjunto de tablas que
contiene una base de datos.
Es necesario conocer que as como existen servidores de pginas (web server), servidores
de correo (mail server), servidores de ftp (ftp server), etc, tambin existen servidores de bases de
datos (database server), los servidores de bases de datos surgen con motivo de la necesidad de
las empresas de manejar grandes y complejos volmenes de datos, al tiempo que requieren
compartir la informacin con un conjunto de clientes (que pueden ser tanto aplicaciones como
usuarios) de una manera segura. Ante este enfoque, un sistema gestor de bases de datos (SGBD,
a partir de ahora) deber ofrecer soluciones de forma fiable, rentable y de alto rendimiento. A
estas tres caractersticas, le debemos aadir una ms: debe proporcionar servicios de forma
global y, en la medida de lo posible, independientemente de la plataforma. Internet se ha
convertido en nuestros das en la mayor plataforma de comunicaciones jams vista. Esto hace
que las empresas tiendan a presentar su informacin a travs de la Web en forma de contenidos,
que despus los clientes consultarn para establecer relaciones con dichas empresas.
Una de las funciones que se empieza a exigir a los SGBD, puesto que sobre ellos recae el
peso del almacn y proceso de la informacin, es la de proporcionar herramientas de apoyo a
toma de decisiones ("datawarehouse") al tiempo que proporciona una plataforma de transacciones
"on-line" (OLTP) que hacen que la informacin est siempre actualizada y consistente. Entre
algunos de ellos tenemos: SQL Server de microsoft, Oracle, MySQL, etc.
El modo de comunicarse entre nuestro programa o aplicacin y la base de datos implica
que ambos manejen un lenguaje de programacin comn, para resolver este problema de
comunicacin es que se usa un lenguaje comn de bases de datos que tanto los lenguajes de
programacin existentes como las bases de datos entiendan, este lenguaje comn de bases de
datos es el SQL (structured query languaje) o lenguaje estructurado de consultas. Las principales
instrucciones de SQL que se utilizan son: s e l e c t , i n s e r t , u p d a t e y d e l e t e .
78
JDBC.-
JDBC o Java Data Base Connectivity, creado por la empresa Sun, es la API estndar de
acceso a bases de datos con Java. Sun opt por crear una nueva API en lugar de utilizar ODBC,
porque presentaba algunos problemas desde ciertas aplicaciones Java. Adems, ODBC ha de
instalarse manualmente en cada mquina, mientras que los controladores (drivers) JDBC que
estn escritos en Java son automticamente instalables y portables. El nivel de abstraccin al que
trabaja JDBC es ms alto que el de ODBC, de esta forma se pueden crear libreras de ms alto
nivel. Se utiliza para ejecutar comandos de SQL, Suministra una serie de clases e interfaces que
permiten al desarrollador de sitios web escribir aplicaciones que gestionen Bases de Datos. El
acceso a base de datos desde JSP (Java Server Pages), al igual que desde Servlets, se apoya en
esta tecnologa, para ello se precisa un controlador o driver que proporciona el acceso a la base
de datos(MySQL).
Conector J para MySQL.- Es un objeto especializado que se utiliza para enlazar e intercambiar
informacin entre MySQL y Java. Este archivo .jar tenemos que ubicarlo en el servidor.
Objeto Connection.- Objeto que se utiliza para establecer la conexin o enlace entre el programa
jsp y la base de datos en mysql.
Objeto ResultSet.- Es la representacin en memoria de las tablas de la base de datos en disco,
se puede entender como una tabla virtual, recordar que generalmente todos los procesos que se
realicen con la tabla (insertar registros, eliminar registros, etc) se realizarn realmente contra un
resulset y no provocaran ningn cambio en la tabla fsica en disco.
Objeto Statement.- Este objeto y sus dos mtodos executeQuery(slo para select de sql) y
executeUpdate( solo para insert, update y delete de sql) son los mtodos que se utilizan para
comunicarse con la tabla fsica en disco.
CONSULTA
Existen una serie de operaciones y procesos que son muy comunes sobre una tabla en
una base de datos en disco, la ms comn es desplegar todos los renglones de la tabla que estn
almacenados en disco, a este proceso se le llama seleccin, consulta o despliegue.
La comunicacin con la base de datos se tendr que realizar usando SQL(structured query
language), la instruccin sql que se usa para resolver este problema es:
select [campos] from tabla
INSERCIN
Insertar o agregar registros o renglones nuevos a una tabla en disco, es un proceso
sencillo que usa la siguiente instruccin sql:
insert into tabla(campo1,campo2..) values(valor1,valor2,...);
ACTUALIZACIN
Se tiene que usar la instruccin sql update para que la nueva informacin se actualize en
disco, cabe recordar que los cambios que se hacen a una tabla es realmente al resultset, que a su
vez es una tabla o base de datos en la memoria de la mquina del cliente o usuario, es por esta
razn que los cambios hay que actualizarlos o pasarlos con UPDATE a la base de datos en disco.
79
ELIMINACION
Eliminacin es otro proceso simple y comun con las bases de datos. La instruccin sql que
se usa es:
delete from tabla where condicion
y luego utilizar el executeUpdate()
Ejemplo 1.- (Consulta)

A continuacin veremos nuestro primer ejemplo, acerca de una consulta a una tabla de una
base de datos.
Vamos a crear la base de datos en MySQL, llamada bdempresa.
La tabla:
vendedor con 4 campos:
codvendedor char(4)
nombre varchar(50)
apellido varchar(50)
nhijos int(2)
La situacin ha sido adecuada para trabajar diferentes tipos de datos y realizar su
tratamiento desde la programacin.
Nos vamos a herramientas en la parte de inferior izquierda y seleccionamos

phpMyAdmin.
80
Luego ponemos nombre a nuestra base de datos y clic en botn Create(Crear).
En la siguiente ventana el nombre a nuestra tabla y la cantidad de campos.
Se ingresa los nombres de los campos, conforma la imagen:
Hay que ingresar(insertar) algunos registros a la base de datos. Por ejemplo:
81
Ahora vamos a crear nuevo proyecto en NetBeans. En categories(Categoras) se

selecciona Java Web y en Projects Java Web.
Escribir el nombre que considere adecuado, en este caso es: EMPRESA.
82
En esta ventana seleccionar Server y Java EE Versin.
En la ventana de frameworks no activar las casillas, an. Luego Finish(Finalizar).
83
Ahora se puede apreciar la plantilla, que corresponde a index que se crea en forma
predeterminada.
En index.jsp vamos a escribir el enlace a mostrar_vendedor.jsp, que en realidad es el

archivo donde vamos a escribir el cdigo.
Crear el archivo: mostrar_vendedor.jsp y escribir el cdigo como se muestra en la

imagen.
84
Para trabajar con base de datos se utiliza la siguiente importacin:
<%@page import="java.sql.*" %>
En estas lneas de cdigo est includa la conexin, la consulta, as como la

tabla(table) en la que se muestra el contenido de la tabla vendedor de la base de
datos bdempresa. La conexin es similar a como se haca con archivos de
extensin .java.
Es necesario agregar en Libraries, la librera:
MySQL JDBC Driver
85
Vamos a nuestro proyecto web EMPRESA, hacemos clic derecho y Run(Ejecutar), que
llama al index.jsp, que es donde est el enlace.
Luego clic en el enlace Consulta vendedor, que llamar a mostrar_vendedor.jsp, que

muestra lo siguiente:
Ejemplo 2.- (Insertar registros)
En el ejemplo anterior se realiz la conexin a una base de datos en el que, en un solo

archivo estaba todo el cdigo. En el siguiente ejemplo se realiza una separacin, se utilizan 3
archivos: el index, la conexin y en el que se realiza la insercin.
Vamos a realizar una aplicacin web, que permita insertar registros a la tabla trabajador
de la base de datos bdservicios, que guarda usuario y contrasea. Primero crearemos la base de
datos:
86
Creamos el proyecto que tendr por nombre GUARDAR o el crea conveniente. Como
mencionamos ya, trabajaremos con 3 archivos.
En index.jsp(que se genera en forma predeterminada) se colocan dos enlaces. El primero

muestra la conexin a la base de datos y el segundo en el que se procesa la insercin de
un registro a la tabla trabajador.
En el archivo conexion.jsp, escribimos el cdigo de la imagen. Si desea puede escribir el

cdigo que aparece en el comentario o slo utilizar una sola lnea como: <%@page
import="java.sql.*"%>.
En el archivo insertar.jsp, escribimos como se muestra en la imagen. Es importante tener

en cuenta que las cajas de texto que aparecen en el formulario deben tener nombre(name)
para poder pasarlos a las variables String: user y cont, que son los valores(values) que se
87
insertan a la tabla trabajador.
Vamos a nuestro proyecto web GUARDAR, hacemos clic derecho y Run(Ejecutar), que
llama al index.jsp, que es donde estn los enlaces.
Si hacemos clic en el primer enlace, se muestra el mensaje que se establece conexin con
la base de datos.
Si hacemos clic en el segundo enlace, se muestra el formulario para guardar(debemos ir a

conexion.jsp y borrar el mensaje de conexin establecida):
88
Luego de hacer clic en el botn Guardar:
Ejemplo 3.- (Guardar, Actualizar y Eliminar)
En el siguiente ejemplo vamos a realizar tres acciones: guardar, actualizar y eliminar en la

tabla libro de la base de datos llamada biblioteca, la debe presentar la siguiente
estructura.
Crear el nuevo proyecto: MANTENIENTO o el nombre que ustedes crean conveniente. En

l vamos a tener dos archivos .jsp. En index.jsp se encuentra el formulario, en el cual
aparecen los controles a utilizar y el action que procesa est dirigido a
mantenimiento.jsp. De igual forma en Libraries(Librera) hay que agregar la librera
MySQL JDBC Driver.
89
En mantenimiento.jsp, se muestra como rescatar los datos ingresados al formulario, las

variables asignadas para la conexin, el cdigo para guardar, eliminar y actualizar, la
conexin y cerrar la conexin.
90
Contina...
Contina ...
Luego hacemos clic derecho en nuestro proyecto y Run(Ejecutar). Aparece el

index.jsp con su contenido, el formulario.
Ingresamos valores.
91
Habilitamos la opcin Guardar y luego Aceptar.
92
Servlets
Cuando se habla de aplicaciones para Web comnmente escuchamos hablar de JAVA, y
con ello sus aplicaciones ms conocidas, los Applets, que son programas que se pueden cargar a
travs de una red y que se ejecutan de igual forma en cualquier plataforma, todo ello gracias a las
potentes caractersticas de JAVA. Hasta hace poco, JAVA se utilizaba bsicamente para dotar a
las pginas WEB de una mayor interactividad mediante los Applets, y por tanto solo actuaba
sobre el lado cliente. Pero el lado servidor tambin puede beneficiarse de todas las ventajas que
ofrece JAVA, gracias a los Servlets.
Los Servlets son una de las tecnologas ms importantes de Java y que dan una
respuesta alternativa a la programacin Web con CGI, ampliando su funcionalidad, normalmente
generan cdigo HTML dinmicamente, el cual se manda al browser, quien lo muestra. Los
servlets, son objetos que corren dentro del contexto de un servidor de aplicaciones o tambin
conocido como contenedor de servlets (por ejemplo Tomcat) y extienden su funcionalidad.
La palabra servlet deriva de otra anterior, applet, que se refera a pequeos programas que
se ejecutan en el contexto de un navegador web. Por contraposicin, un servlet es un programa
que se ejecuta en un servidor. El uso ms comn de los servlets es generar pginas web de forma
dinmica a partir de los parmetros de la peticin que enve el navegador web.
Hay muchos ambientes de desarrollo que permiten escribir y testear los servlets
cmodamente, nosotros seguiremos utilizando NetBeans.
El API Servlets
Los servlets usan clases e interfaces de dos paquetes:
javax.servlet que contiene clases para servlets genricos (independientes del protocolo
que usen) y,
javax.servlet.http (que aade funcionalidad particular de http). El nombre javax indica que
los servlets son una extensin.
Ciclo de vida de un servlet
Viene dado por tres mtodos: init, service, destroy.
INICIALIZACIN(init): Se ejecuta una vez, la primera vez que es invocado el servlet (el servlet se
carga en memoria y se ejecuta slo la primera vez que es invocado.
SERVICIO(service) : una llamada a service() por cada invocacin al servlet para procesar las
peticiones de los clientes web.
DESTRUCCIN(destroy): Cuando todas las llamadas desde el cliente cesen o un temporizador

del servidor as lo indique o el propio administrador as lo decida se destruye el servlet. Se usa el
mtodo destroy para eliminar al servlet y para recoger sus restos.
Caractersticas de los Servlets
93
Son independientes del servidor utilizado y de su sistema operativo, lo que quiere decir
que a pesar de estar escritos en Java, el servidor puede estar escrito en cualquier lenguaje
de programacin, obtenindose exactamente el mismo resultado que si lo estuviera en
Java.
Los servlets pueden llamar a otros servlets, e incluso a mtodos concretos de otros
servlets. De esta forma se puede distribuir de forma ms eficiente el trabajo a realizar.
Los servlets pueden obtener fcilmente informacin acerca del cliente (la permitida por el
protocolo HTTP), tal como su direccin IP, el puerto que se utiliza en la llamada, el mtodo
utilizado (GET, POST, ...), etc.
Permiten adems la utilizacin de cookies y sesiones, de forma que se puede guardar

informacin especfica acerca de un usuario determinado, personalizando de esta forma la
interaccin cliente-servidor.
Los servlets pueden actuar como enlace entre el cliente y una o varias bases de datos en
arquitecturas cliente-servidor de 3 capas.
Asimismo, pueden realizar tareas de proxy para un applet. Debido a las restricciones de
seguridad, un applet no puede acceder directamente por ejemplo a un servidor de datos
localizado en cualquier mquina remota, pero el servlet s puede hacerlo de su parte.
Al igual que los programas CGI, los servlets permiten la generacin dinmica de cdigo
HTML dentro de una propia pgina HTML. As, pueden emplearse servlets para la creacin
de contadores, banners, etc.
Ventajas de los Servlet frente a los CGI

Ms Eficiencia.
Ms Potencia.
Ms Portablilidad.
Ms Barato.
Servlets utilizando NetBeans
Parmetro HttpServletRequest
Es la clase del primer parmetro que reciben los mtodos doGet y doPost. Provee acceso
a:
Informacin acerca del cliente (por ejemplo, los parmetros que envi, la versin del
protocolo que est usando, la IP del cliente, etc.
A un, ServletInputStream que puede ser usado por el servidor para recibir informacin
adicional (por ejemplo un archivo que el cliente quiere uplodear cuando se ha usado el
mtodo POST o PUT.
Parmetro HttpServletResponse
HttpServletResponse es la clase del segundo argumento que reciben doGet y doPost.
Provee mtodos para :
Decirle al browser cul es el tipo MIME de la respuesta que se le va a dar al cliente.
Obtener un objeto ServletOutputStream y un PrintWriter travs del cual podemos
mandar cdigo HTML dinmicamente al cliente.
Mandar otras informaciones importantes (cookies, redireccionamiento, refresco, etc)
94
Ejemplo 1:
Vamos a realizar la creacin de un servlet, el cual recibe el dato de un formulario(realizado

en el index.jsp) y luego le devuelve al cliente una pgina HTML con los datos recibidos.
Creamos nuevo proyecto. Web Java, Aplicacin Web, como se muestra en la imagen.
En la siguiente ventana le ponemos un nombre a nuestro proyecto. Puede ser el de la

imagen o el que usted crea conveniente.
95
En Server seleccionamos Apache Tomcat y en Java EE Versin Java EE 6 Web(en

nuestro caso).
En index.jsp creamos el formulario que contiene un campo de texto en el que el

usuario ingresa su nombre. Podemos utilizar la paleta para hacer lo descrito.
96
Adems a lo expuesto en el punto anterior, podemos utilizar una tabla para mejorar la
presentacin, igualmente se ha realizado utilizando la paleta.
Ahora vamos a crear un servlet, haciendo clic derecho sobre nuestro proyecto,
seleccionamos Nuevo(New) luego Servlet(si no estuviera lo buscan en Other).
97
Le ponemos nombre. Puede ser como en la imagen.
Podemos observar la plantilla creada(Saludo.java), as como el lugar donde se ha

guardado. Adems ya podemos observar los parmetros expuestos:
HttpServletRequest request y HttpServletResponse response.
98
En Saludo.java, declaramos nombre de tipo cadena, luego lo recibimos del formulario

con su nombre en la lnea 16. Finalmente se presenta en HTML.
99
Ejemplo 2:
Realizar una aplicacin web que permita implementar un contador, es decir cuente cuntas
veces se contacta al servlet.
Creamos el proyecto. En nuestro caso se llama CONTAR. Next(Siguiente)
En Server seleccionamos Apache Tomcat y en Java EE Versin Java EE 6 Web(en

nuestro caso).
100
En index que se ha creado en forma predeterminada escribimos el cdigo de enlace a

otra pgina(servlet) que se llamar conforme a la referencia: PaginaCuenta.java.
En nuestro proyecto CONTAR. Seleccionamos New(Nuevo), luego Servlet.
En nombre de la clase(Class Name), escribimos PaginaCuenta, Next Next(Siguiente) y

luego Finish(Finalizar).
101
PaginaCuenta aparece en paquete de fuentes(Source packages) como

PaginaCuenta.java, como se muestra en la imagen.
Se ha escrito la lnea 11, 14. Se ha modificado el contenido de la lnea 20 y 23. Se agreg

la lnea 24 y 25, sta ltima es la que permite mostrar el mensaje concatenada a la
variable cuenta.
102
En el proyecto CONTAR hacemos clic derecho, luego Run(Ejecutar).
Hacer clic en el enlace(IR).
Ejemplo 3:
Calcular el salario total de un trabajador, conociendo la cantidad de das trabajados y el pago por
da. Adems mostrar sus datos personales ingresados, como su nombre, direccin y su telfono.
(Es el ejemplo de la sesin N 05, el cual lo realizaremos utilizando Servlet)
103
Creamos el proyecto SALARIOSERVLET.
En index.jsp que se ha generado se debe escribir como se muestra en la imagen, que

corresponde al formulario donde se ingresan los datos, tener presente la importancia del
name.
Tenemos que crear el servlet de nombre Calcula conforme aparece en action del
formulario anterior. Declaramos las variables, luego las recibimos con los nombres del
formulario y finalmente las enviamos con println.
Clic derecho en nuestro proyecto, seleccionamos Run(Ejecutar).
104
Luego calcular.
105
1.-Cuando se inicie la aplicacin desde un navegador web deber aparecer en pantalla la misin
de la Universidad. Debe aparecer en negrita, centrada, con color de fuente(rojo, azul, ...) , tamao
y color de fondo. Puede usted mejorar la presentacin utilizando por ejemplo una tabla con borde,
etc.
2.-Cuando iniciemos esta aplicacin desde un navegador web deber aparecer en pantalla un
botn con el texto Presentar Misin. Al pulsar este botn aparecer en pantalla la misin de la
Universidad tal y como apareca en la aplicacin N 1. El botn de la aplicacin deber ser un
input de tipo submit de un formulario HTML. El servlet deber ser llamado mediante el mtodo
POST y GET.
3.-Esta aplicacin es una extensin de la aplicacin N 2. Ahora, en lugar de aparecer un solo

botn en la pantalla principal de la aplicacin, aparecern dos botones con los ttulos: "Saludar en
Espaol", "Saludar en Ingls". Al pulsar esos botones, en la ventana del navegador veremos la
misin en el idioma del botn que hayamos pulsado.
4.-Cree una aplicacin web compuesta por dos servlets, que se deben invocar como ServletA y
ServletB. Cuando se invoca el ServletA, se debe mostrar una pgina con la fecha, la hora, un
mensaje esttico, y un enlace para llamar al segundo servlet. El segundo servlet debe mostrar una
pgina con un enlace al primer servlet y un mensaje esttico.
5.-Calcular la hipotenusa de un tringulo rectngulo. Los datos los ingresa el usuario a travs de
los campos de texto de un formulario.
6.-Cree una aplicacin web con pginas jsp y servlets. La primera pgina debe mostrar un
formulario donde el usuario puede elegir una marca de autos desde un combobox. Al aceptar la
seleccin, se debe invocar al servlet el cual llenar una lista con al menos 3 modelos de la marca
seleccionada, y la pasar como parmetro a una segunda pgina donde el usuario ver un texto
con la marca seleccionada anteriormente y un combobox con la nueva lista. Una vez seleccionado
un modelo de la lista, se llamar al servlet nuevamente para que muestre una ltima pgina con
toda la informacin seleccionada y un enlace para volver a empezar.
106
SERVLETS Y BASE DE DATOS
La clase Servlet fue diseada para permitir desarrollar de forma sencilla aplicaciones
cliente-servidor, lo que involucra el trabajo con bases de datos. En esta sesin veremos cmo
realizar conexin a bases de datos mediante la biblioteca JDBC y hacer servlets que muestren
datos de una base de datos o que los modifiquen, ya que existen una serie de operaciones y
procesos que son comunes tratar con una tabla o tablas en una base de datos en disco.
Los servlets, actan como capa intermedia entre la peticin proveniente de un Navegador
Web y bases de datos en el servidor HTTP, es decir los servlets son un componente ideal para
hacer las funciones de capa media en un sistema con una arquitectura de tres capas
.
Formulario html/ applet/javascript

Cliente
HTTP
Servidor web(servlets)
Servidor
Controlador JDBC
Protocolo de comunicaciones con la

BD
Controlador de base de datos Servidor de BD
El nivel intermedio(color amarillo)mantiene en todo momento el control del tipo de

operaciones que se realizan en la base de datos, y adems, est la ventaja adicional de que los
drivers JDBC no tienen que residir en la mquina cliente, lo cual libera al usuario de la instalacin
de cualquier tipo de driver. En cualquier caso, tanto el Servidor HTTP como el servidor de base de
datos pueden estar en la misma mquina, aunque en sistemas empresariales de cierta
importancia esto no suele ocurrir con frecuencia.
Ejemplo 1.- (Consulta)

A continuacin veremos nuestro primer ejemplo servlets con base de datos. Realizaremos
una consulta a una tabla de una base de datos.
107
Vamos a crear la base de datos en MySQL, llamada bdempresa.

La tabla:
vendedor con 4 campos:
codvendedor char(4)
nombre varchar(50)
apellido varchar(50)
nhijos int(2)
La situacin ha sido adecuada para trabajar diferentes tipos de datos y realizar su
tratamiento desde la programacin.
Nos vamos a herramientas en la parte de inferior izquierda y seleccionamos

phpMyAdmin.
Luego ponemos nombre a nuestra base de datos y clic en botn Create(Crear).
En la siguiente ventana el nombre a nuestra tabla y la cantidad de campos.
108
Se ingresa los nombres de los campos, conforma la imagen:
Hay que ingresar(insertar) algunos registros a la base de datos. Por ejemplo:

selecciona Java Web y en Projects Java Web.
109
Escribir el nombre que considere adecuado, en este caso es: CONSULTASERVLET
En esta ventana seleccionar Server y Java EE Versin.
110
Ahora se puede apreciar la plantilla, que corresponde a index que se crea en forma
predeterminada. Considerar el formulario agregado con el action a Consulta, que es
como se llamar nuestro servlet.
Clic derecho en el proyecto creado , New(Nuevo) y luego Servlet. En la ventana escribir

Consulta o como crea usted conveniente.
111
En la siguiente ventana se puede modificar los nombres, que seran los alias. Adems
tocar la casilla de activacin para que se incluya en el trabajo el archivo web.xml.
En el lado derecho nuestro proyecto tendr la siguiente estructura.
112
Tenemos que agregar las lneas mostradas en la imagen, por ejemplo en la parte superior:
import.java.sql.*;
Contina.
Clic derecho en nuestro proyecto y luego Run(Ejecutar).
113
Clic en el botn Consultar.
Ejemplo 1.- (Guardar)

Realizaremos la insercin de un registro.
Se considera el nombre de un usuario, apellido y su respectiva foto.
Vamos a crear la base de datos en MySQL, llamada registro. La tabla tiene por nombre
contacto con 4 campos segn puede observar en la imagen.

selecciona Java Web y en Projects Java Web. Tiene por nombre GUARDARSERVLET.
Vamos a utilizar 3 archivos, los cuales se pueden apreciar en la imagen.
Index.jsp
Mensaje.jsp
RegistroServlet.java
114
Adems tenemos que agregar en Libraries, el conector.
Ahora en index.jsp tenemos que escribir las siguientes lneas de cdigo, segn la imagen.
Se utiliza un formulario para ingresar el nombre, apellido del usuario, as como su foto,
cada uno con su respectivo type de acuerdo a su naturaleza. Tener en cuenta el nombre
a considerar en el atributo action, que es nuestro servlet(RegistroServlet).
115
Clic derecho en nuestro proyecto, New y luego Servlet, el cual tendr por nombre
RegistroServlet.java. El cdigo se muestra en la imagen:
116
117
En Mensaje.jsp escribimos lo que aparece entre las etiquetas <h3> y </h3>.
Clic derecho en nuestro proyecto y luego Ejecutar(Run).
118
Reportes en Aplicaciones Web
En esta sesin veremos cmo generar reportes para una aplicacin web. Usaremos
MySQL como nuestro motor de base de datos, nos conectaremos mediante JDBC. Un usuario
podr descargar o ver en su navegador reportes haciendo uso de Servlets o JSP.
Se utilizar el iReport para realizar nuestro reporte. En nuestro caso utilizaremos el

complemento de NetBeans.
En la barra de mens ir al men Tools(Herramientas), seleccionar Options(Opciones).
En el cuadro de opciones(Options) no aparece el iReport instalado. As que tendremos

que instalarlo, para eso tenemos que tener los respectivos archivos(Se adjunta los
archivos; pero puede utilizar nuevas versiones, que sean compatibles a su netBeans).
119
En la barra de mens ir al men Tools(Herramientas), seleccionar

Plugins(Complementos).
120
Aparece la siguiente ventana, en la pestaa Downloaded(Descargados). El botn

AddPlugins.
Selecciona los archivos mostrados y luego Aceptar.
En la siguiente ventana Install.
121
Luego Next.
Acepta los trminos de la licencia(Activa la casilla) y luego Install.
122
Continuar(Continue).
123
Finalizar(Finish).
En la barra de mens ir al men Tools(Herramientas), seleccionar Options(Opciones).
124
Ya parece el iReport. Estamos listos para disear nuestros resportes.
Vamos al men archivo(File) y creamos nuestra aplicacin web. Nuevo Proyecto, le

ponemos por nombre REPORTECLIENTE o el que crea conveniente.
125
En la siguiente ventana se selecciona como se muestra en la imagen.
Desde nuestro proyecto seleccionamos Empty Report(Si no apareciera en la lista se

busca en Other).
Le ponemos por nombre reporte como se muestra.
126
En la parte central aparece la ventana de diseo(Designer).
Para poder hacer nuestro reporte, primero tenemos que crear la base de datos de nombre
bdventas y la tabla cliente con los campos, tipo de datos y respectivas longitudes. El
campo codigo es autonumrico.
Ingresar 2 registros, pueden ser ms.
127
Ahora vamos al cono que se seala, que es que permite conectarnos a la base de
datos(Report Datasources) encontrando el origen de datos del reporte.
Se selecciona el botn New en la ventana de conexin al origen de datos del informe.
128
Se deja el tipo que aparece marcado por defecto.
En esta ventana escribir y seleccionar los datos como se muestra.
129
Luego de seleccionar el botn Test, debe aparecer el siguiente cuadro.
Aparece nuestra conexin.
130
Hacer clic, al cono que se seala, que es que permitir ingresar nuestra consulta.
Escribimos nuestra consulta. Deben aparecer abajo los campos de cliente.
131
Aparece la ventana Report Inspector en el lado izquierdo.
De la ventana del lado izquierdo, en Fields aparecen los campos de la tabla, los cuales se
arrastran y se sueltan en detalle(detail).
Seleccionar la pestaa Preview. Ya se puede apreciar el reporte en PDF.
132
Podemos mejorar la apariencia del reporte utilizando la paleta en el lado derecho.
En Files(Archivos), se puede apreciar dos archivos que tienen que ver con el reporte: el
primero fue reporte.jrxml y luego de compilar se genera reporte.jasper.
En web pages de nuestro proyecto, New y luego Folder(Creamos una carpeta de nombre
reportes), en esta carpeta guardaremos los archivos que observamos en Files(Archivos)
que son: reporte.jrxml y reporte.jasper.
133
Pegar los archivos en la carpeta recin creada, llamada reportes.
Queda como se muestra:
134
Se crea en el proyecto el archivo JSP, desde donde se lamar al reporte.
Se copia el siguiente cdigo, el cual aparece con errores y es porque se tiene que agregar
en la biblioteca(Libraries) algunos archivos(se adjuntan a la sesin), con Add JAR/Folder,
como se muestra.
Se seleccionan y luego aceptar.
135
En Librera podemos los archivos agregados y el cdigo sin errores.
Ahora slo falta agregar el conector que se encuentra la librera mostrada.
136
En el archivo index, agregar la lnea mostrada, que enlaza a Reporte.jsp.
Este es Reporte.jsp.
137
Clic derecho en el proyecto y Run(Ejecutar).
Luego en Mostrar Reporte.
Abrimos o guardamos nuestro archivo.
138
139
Saludos estimados estudiantes
Despus de estudiar y reflexionar acerca de los reportes en aplicaciones web.
Realizar la tarea y presentar el archivo correspondiente a lo propuesto:
01.-Un reporte que muestre el contenido de slo algunos campos de una tabla de una base de
datos.
02.-Un reporte que muestre campos que correspondan a diferentes tablas de una base de
datos(modelo relacional).
140
EVALUACIN TECNOLOGA DE PROGRAMACIN- II UNIDAD

Nombre: ___________________________________________________
Fecha: _______________________
_______________________________________________________________________________
Dada la siguiente base de datos:
1.-Realizar una consulta a la tabla alumno usando JSPs.

2.-Realizar mantenimiento a la tabla curso usando SERVLETs.
3.-Hacer un reporte en PDF que muestre campos de diferentes tablas de la base de datos propuesta.
141
Python
Python es un lenguaje de alto nivel que permite expresar algoritmos de forma casi directa,
ha llegado a considerarse como pseudocdigo ejecutable. Este lenguaje fue creado por Guido Van
Rossum a principios de los aos 90 cuyo nombre est inspirado en el grupo de cmicos ingleses
Monty Python. Es un lenguaje similar a Perl, pero con una sintaxis muy limpia y que favorece un
cdigo legible. Dispone de ecaces estructuras de datos de alto nivel y una solucin de
programacin orientada a objetos simple. La elegante sintaxis de Python, su gestin de tipos
dinmica y su naturaleza interpretada hacen de l un lenguaje ideal para scripts y desarrollo
rpido de aplicaciones en muchas reas y en la mayora de las plataformas.
Se trata de un lenguaje interpretado o de script, con tipado dinmico, multiplataforma y

orientado a objetos, esto quiere decir que los programas escritos en Python son
convertidos a lenguaje de mquina al momento de ejecutarlos. Los lenguajes interpretados
son ms fexibles y ms portables.
Python tiene muchas de las caractersticas de los lenguajes compilados, por lo que se
podra decir que es semi interpretado. En Python, como en Java y muchos otros lenguajes, el
cdigo fuente se traduce a un pseudocdigo mquina intermedio llamado bytecode la primera vez
que se ejecuta. El intrprete de Python y su extensa biblioteca estndar estn disponibles
libremente, en forma de fuentes o ejecutables, para las plataformas ms importantes.
Existen varias implementaciones distintas de Python: CPython, Jython, IronPython, PyPy,

etc; pero es CPython el ms utilizado y viene instalado por defecto en la mayor parte de las
distribuciones Linux. Si no fuera as puede descargar la versin adecuada a su sistema o tambin
se puede utilizar el centro de Software de Ubuntu.
Entre las empresas ms destacadas que utilizan Python se pueden nombrar Google,
NASA, Facebook, US National Weather Service, Corel, Lockheed Martin, Pixar, Industrial Light
and Magic, etc.
Intrprete de Python
En Ubuntu, el intrprete de Python se suele instalar en /usr/local/bin/python o tambin en

/usr/bin/python en aquellas mquinas donde est disponible.
En Windows, se instala en el directorio Archivos de programa. Poner este directorio en la

ruta de ejecutables hace posible arrancarlo tecleando en el intrprete de rdenes la orden: python
Para llamar al intrprete interactivo procedemos a escribir desde el terminal de su sistema

operativo:
$ python
El intrprete muestra un mensaje de bienvenida con su nmero de versin e informacin

de derechos de copia, antes de mostrar el primer indicador:
142
El indicador >>> en el terminal, indica que usted est en una sesin interactiva
con Python.
Ejemplo 1: Vamos a efectuar algunas operaciones bsicas.
Escriba como se muestra a continuacin:
Igualmente podemos hacer una operacin con signos de agrupacin(operaciones combinadas):
Se puede salir del intrprete:

escribiendo: exit()
pulsando Control + D.
Ejemplo 2: Mostrar un mensaje, utilizando print(funcin).
143
Archivo.-
Se puede escribir el cdigo de un programa en un archivo de texto y luego ejecutarlo. Podemos
utilizar cualquier editor de los que disponemos en internet que traen ciertas caractersticas como
autocompletado entre otras, por ejemplo: PyDEV, SPE, PyPE, IDLE
Ejemplo 3: Vamos a realizar el ejemplo 2, utilizando un archivo.
Podemos utilizar nuestro editor de texto para escribir o cualquier otro editor para trabajar Python:
Primero utilizaremos el editor de textos gedit y luego lo guarda como: mensaje.py en la

carpeta personal, podemos crear adems nuestra carpeta con el nombre que consideremos
adecuado.
Para ejecutar el programa basta con escribir en nuestro intrprete lo siguiente:
Python mensaje.py
Ejemplo 4: Vamos a imprimir un mensaje de varias lneas.
144
Luego en el intrprete:
Tambin, podemos utilizar triple comillas:
Luego en el intrprete:
Ipython,
Tambin podemos utilizar este Shell interactivo mejorado, que entre otras ventajas sobre el
shell nativo, se puede encontrar nmeros de lnea, sangrado automtico, etc. Para instalarlo se
ejecuta la siguiente orden desde una terminal:
sudo apt-get install ipython
Para ejecutar el nuevo shell, slo debers escribir el comando: ipython
145
Editores
Utilizando el centro de software de Ubuntu podemos instalar editores para trabajar con
Python, por ejemplo SPE.
Pueden instalar PyPE.
146
Tipos bsicos
Nmeros.- Se pueden utilizar nmeros enteros, reales y complejos.

Cadenas de texto.- Texto encerrado entre comillas simples o dobles. se pueden
aadir caracteres especiales: como \n el carcter de nueva lnea, o \t el de tabulacin
Valores booleanos.- true, false.
Colecciones
Estos son: Listas, tuplas, diccionario
Listas.- Es un tipo de coleccin ordenada. Es equivalente a lo que en otros lenguajes se conoce

por arreglos o vectores, pueden contener cualquier tipo de dato: nmeros, cadenas, booleanos y
tambin listas otras listas.
Tuplas.- Tiene caractersticas similares a las listas, a excepcin de la forma de definirla, para lo
que se utilizan parntesis en lugar de corchetes.
Operadores
Operadores aritmticos
Operador Descripcin
+ Suma
- Resta
* Multiplicacin
** Exponente
/ Divisin
// Divisin entera
% Mdulo
Operadores Lgicos
Operador Descripcin
& and
| or
^ xor
~ not
147
Variables.- Una variable es un nombre que se refiere a un valor. Es un espacio para almacenar
datos modificables en la memoria de un ordenador.
Ejemplos:
base = 20
valor_base = 8
n = 10
En general: nombre_de_la_variable = valor_de_la_variable
Ejemplo 5: Utilizando variables.
En este ejemplo utilizaremos iPython. Escribir conforme la imagen.
Ejemplo 6: Calcular el permetro y el rea de un rectngulo.
148
Ejemplo7: Calcular el permetro y el rea de un crculo.
En este ejemplo, el valor asignado a pi es aproximado a 3.14 y a radio es 2.
Ejemplo 8: Calcular el permetro y el rea de un crculo(Utilizando funciones matemticas)

Para utilizarlas primero hay que realizar la importacin del mdulo.
149
Adems en el mdulo math se puede encontrar otras funciones de mucha utilidad en la resolucin
de problemas.
Ejemplo 9: Hallar el valor de la expresin: m=2X4 + 3X3 XY+10Y2

Este ejemplo se ha realizando utilizando IDLE adems de funciones matemticas.
Lectura de datos por teclado
Con este este procedimiento se podr ingresar el valor de las variables consideradas en
nuestros programas.
Se utilizar la funcin input y raw_input, para obtener informacin de parte del usuario,
esta devuelve una cadena con el texto que escribi el usuario. Si se quiere convertir a nmero
puede usar float por ejemplo.
Ejemplo 10: En este ejemplo se calcular el permetro y el rea de un crculo utilizando un

archivo y adems el uso de raw_input.
150
Luego en el terminal:
Tambin podemos escribir:
En el terminal:
Con formato:
En el terminal:
Estructuras de control de flujo
Es un bloque de cdigo que permite agrupar instrucciones de manera controlada.
Estructura condicional.-Permiten evaluar si una o ms condiciones se cumplen, para decir que

accin se va a ejecutar.
151
Ejemplo 11: El consumo en un restaurante se cancela de acuerdo a las siguientes condiciones:

Si el consumo es hasta S/.60.00 el pago es en efectivo.
Si el consumo es ms de S/.60.00; pero menor que 140 con tarjeta de dbito.
Si el consumo es de S/.140 a ms con tarjeta de crdito.
Como se puede apreciar el cdigo de la imagen anterior, se ha utilizado la

identacin(indentacin o sangrado), en el caso de python es obligatoria, de esta depende su
estructura.
En el terminal:
Ejemplo 12: En este ejemplo se redacta diferente la estructura de control y adems(codificacin

de caracteres) podemos escribir palabras con tilde en los mensajes, gracias al uso de:
# -*- encoding: utf-8 -*-
En el terminal:
152
Ejemplo 13: Disear un programa que permita resolver la ecuacin de la forma:

ax + b = 0
En el terminal:
Las estructuras de control iteractivas estn propuestas para realizar como actividad de
investigacin en la presente sesin.
Funciones creadas por el usuario
Es un fragmento de cdigo con un nombre asociado que realiza una serie de tareas y
devuelve un valor. Adems de ayudarnos a programar y depurar dividiendo el programa en partes
las funciones tambin permiten reutilizar cdigo.
Se define una funcin mediante la instruccin def(proviene de define):
def ejemplo(param1, param2):
print param1
153
print param2
Ejemplo 14: Crear una una funcin que permita mostrar un saludo(sin parmetros).
En el terminal:
En IDLE:
La ventaja es que con IDLE la sangra se realiza de forma automtica a diferencia del
ejemplo anterior que se hace manualmente. Cuando termine de escribir la funcin clic en enter
dos veces. Luego ya se puede invocar a la funcin: saludo()
Ejemplo 15: Crear una funcin que permita calcular la suma de dos nmeros(funciones con
parmetros)
Luego para invocar la funcin hay que realizar la importacin.
154
A continuacin vamos a escribir el cdigo que se muestra a continuacin en un archivo llamado:

invocar_suma.py
Importamos ejemplo15 para poder utilizar la funcin.
Luego desde el terminal:
155
Para realizar la presente actividad puede utilizar el terminal, cualquier editor utilizado en la
sesin o el su preferencia.
Presentar los archivos creados e imgenes de la ejecucin.
1.-Disea un programa que pida el valor del lado de un cuadrado y muestre el valor de su
permetro el de su rea.
2.-Disea un programa que pida el valor de los dos lados de un rectngulo y muestre el valor de
su permetro y el de su rea.
3.-Disea un programa que pida el valor de la base y la altura de un tringulo y muestre el valor
de su rea.
4.-Disea un programa que pida el valor de los tres lados de un tringulo y calcule el valor de su
rea y permetro.
5.-Hacer un programa que le pida un nmero al usuario (usando la funcin "raw_input") y muestre
ese nmero menos dos, ms dos, multiplicado por dos, dividido por dos de forma entera, dividido
por dos de forma decimal, y elevado a la potencia de dos.
6.-Mostrar los nmeros potencia de 2 menores a 875
7.-Escribir un programa que le pregunte un nmero al usuario. Si el nmero es 5, que muestre

"Suerte!"; si el nmero es mayor a 10, que muestre "Grande ...!"; para los otros casos que muestre
"Sin suerte.
8.-Hacer una funcin que reciba un nmero y contesta "par" o "impar" en funcin de si el nmero
es par o no.
9.-Hacer una funcin que reciba dos nmeros y devuelve "mayor" (si el primer nmero es mayor
que el segundo), "menor", o "iguales".
10.-Define una funcin que convierta grados centgrados en grados farenheit.
156
Django
Framework web de Python
Es un framework de desarrollo web que provee una infraestructura de programacin para

las aplicaciones , es de cdigo abierto, el cual ha sido escrito con Python acorde al paradigma
Model Template View, fue nombrado as en referencia al guitarrista de jazz gitano Django
Reinhardt. Django se centra en automatizar todo lo posible y se adhiere al principio Don't Repeat
Yourself. Permite construir en profundidad, de forma dinmica, sitios interesantes en un tiempo
extremadamente corto.
Django es un conjunto de bibliotecas y herramientas que nos van a permitir crear sitios
web de forma ms rpida y con menos cdigo, ya que nos proporciona muchas aplicaciones tiles
para cosas comunes del desarrollo web, como autenticacin de usuarios o administracin del
contenido del sitio, entre otras, tambin podemos encontrar aplicaciones de terceros para reutilizar
y modificar cdigo.
Historia
A continuacin se presenta brevemente informacin acerca de la aparicin y evolucin de

Django:
Apareci el ao 2003, cuando un equipo de desarrolladores web del diario Lawrence

Journal World: Adrian Holovaty y Simon Willison, comenzaron a usar Python para crear sus
aplicaciones. El equipo de The World Online, responsable de la produccin y mantenimiento de
varios sitios locales de noticias, prosperaban en un entorno de desarrollo presionados por las
fechas lmite del periodismo, es as que los periodistas y directivos exigan que se agregaran
nuevas caractersticas y que aplicaciones enteras se crearan a una velocidad vertiginosa, es as
que Adrian y Simon desarrollaron por necesidad un framework de desarrollo Web que les ahorrara
tiempo, era la nica forma en que podan crear aplicaciones mantenibles en tan poco tiempo.
Luego en el ao 2005, luego de haber desarrollado este framework hasta el punto en que estaba
haciendo funcionar la mayora de los sitios World Online, que ahora inclua a Jacob Kaplan Moss,
liber el framework como software de cdigo abierto.
Estructura de un sitio web
En Django tenemos Proyectos y Aplicaciones:

Proyecto: va a contener la configuracin general de nuestro sitio (la base de datos, email
de los admins, etc.) y un conjunto de aplicaciones.
Aplicaciones: van a ser las que tengan la funcionalidad en s de nuestro sitio.
Proyecto
Aplicacin Aplicacin Aplicacin

. . . .
Arquitectura MVC(Modelo-Vista-Controlador)
Esta arquitectura separa las aplicaciones en tres partes y Django propone utilizarla:
157
Modelo: Define la estructura de la base de datos y se encarga de la comunicacin con

ella.
Vista: la interfaz del usuario, con el cdigo que elije qu datos pedirle o mostrarle en cada
momento.
Controladores: esta parte permite seleccionar qu vistas ejecutar en respuesta a las
acciones o peticiones del usuario.
Instalacin de Python
Como nosotros utilizamos ubuntu ya tenemos instalado python, pues lo vimos en la sesin
anterior y lo podemos verificar escribiendo en una terminal: python
Descarga e instalacin de Django

En una terminal escribimos como se muestra a continuacin:
1) wget http://media.djangoproject.com/releases/1.3/Django-1.3.1.tar.gz
Si observamos nuestra carpeta personal nos daremos cuenta que se ha descargado: Django-
1.3.1.tar.gz
2) sudo tar zxvf Django-1.3.1.tar.gz
Si observamos nuestra carpeta personal nos daremos cuenta que despus de

descomprimir tenemos:
158
3) cd "Django-1.3.1"
Ahora estamos en la carpeta Django-1.3.1
4) sudo python setup.py install
Verificacin de la instalacin
Vamos a constatar si django est correctamente instalado, para eso accedemos a la shell
de comandos e iniciamos el intrprete python e importamos django escribiendo: import django y
luego mostrar la versin instalada con django.VERSION
Descargar e instalar el conector de base de datos
Nosotros utilizaremos como servidor de base de datos mysql(se puede realizar con otros),
que es el que ya tenemos instalado en nuestros equipos, lo que implica trabajar con el conector
MySQLdb.
Primero se instalar los paquetes con los cuales tiene dependencias, estos son:
setuptools y libmysqlclient-dev.
a) setuptools
wget pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gz
Se ha descargado el archivo en la carpeta personal.
sudo tar zxvf setuptools-0.6c11.tar.gz
Se descomprime.
159
cd setuptools-0.6c11/
Nos ubicamos en la carpeta setuptools-0.6c11/
sudo python setup.py install
Se instala.
b) libmysqlclient-dev
sudo apt-get install libmysqlclient-dev
c) MySQLdb
sudo apt-get install python-mysqldb
Tambin podemos hacerlo instalando el paquete
MySQLdb desde http://www.djangoproject.com/r/python-mysql/
Verificacin de la instalacin
Vamos a constatar si MySQLdb est correctamente instalado, para eso accedemos a la

shell de comandos e iniciamos el interprete python e importamos MySQLdb escribiendo: import
MySQLdb y luego MySQLdb.__doc__
160
PROYECTO
Un proyecto es una coleccin de configuraciones para una instancia de Django, incluyendo

configuracin de base
de datos, opciones especficas de Django y configuraciones especficas de aplicaciones.
En primer lugar vamos a crear un directorio(carpeta) con el nombre ms adecuado, en

nuestro caso: sitio_web
Nos ubicamos en el directorio actual.
E
n
una terminal escribir: django-admin.py startproject prueba
se ha creado nuestro proyecto en el directorio sitio_web.
Al abrir el proyecto podemos apreciar los siguientes archivos, de los cuales se hace una
breve descripcin:
161
__init__.py: Un archivo necesario para que Python trate el directorio ejemplo como un
paquete (un grupo de mdulos de Python). Es un fichero vaco y normalmente no se le
aade nada.
manage.py: Script que permite interactuar con el proyecto de Django de diversas
maneras.
settings.py: Caractersticas de configuracin de este proyecto Django.
urls.py: Las direcciones URL de este proyecto Django. Piense en ello como la tabla de
contenidos de su sitio Django.
Servidor de desarrollo
Django tiene su propio servidor de desarrollo que permite probar las aplicaciones de forma
eficiente de forma local, el que podemos utilizar antes de hacerlo con uno de produccin como
apache por ejemplo.
Vamos a correr el servidor web de desarrollo para determinar si funciona, tenemos primero
que ubicarnos en nuestro directorio(prueba) y luego en el mismo terminal escribir:
python manage.py runserver
En un navegador la url:
http://localhost:8000
Tambin puede ser:
ttp://127.0.0.1:8000
Debe mostrarse la siguiente pgina:
En el proyecto vamos a crear dos nuevas carpetas(directorios) los que se llamarn:

static y templates
162
En una terminal escribir: mkdir static y mkdir templates, primero hay que cambiarnos a
nuestro directorio(prueba).
Dentro del directorio prueba se han creado static(contenido esttico) y

templates(plantillas) como se aprecia en la siguiente imagen:
Abrir el archivo settings.py con un editor de texto que puede observarlo en la imagen
anterior y agregar en la parte superior lo siguiente: import os.path
En el mismo el archivo ubicar la variable: STATICFILES_DIRS y agregar lo siguiente:

os.path.join(os.path.dirname(__file__), 'static').replace('\\','/'),
En el mismo el archivo ubicar la variable: TEMPLATE_DIRS y agregar lo siguiente:

os.path.join(os.path.dirname(__file__),'templates').replace('\\','/'),
Dentro del directorio static vamos a crear una hoja de estilos de nombre:
forma(forma.css), el cual va a tener el siguiente cdigo:
163
body {
color: #bfaa28;
background: #453669;
padding: 0 2em;
margin: 0;
font-family: FreeSerif;
font-size: 120%;
h1 {
padding: 20px 30px;
background: #675fff;
color: #ffa232;
font-size: 150%;
text-align: center
}
h2 {
color: #bf8aaa;
border-top: 1px dotted #ffffff;
margin-top: 2em
}
p{
margin: 1em 0
}
a:link {
color: #fe5122;
}
a:visited {
color: #fe5121;
}
a:hover {
color: #fe5aaa;
}
hr {
margin: 20px 0px;
color: #bbdcdd;
background-color: #efa1ff;
height: 4px;
}
164
footer {
font-size: 80%;
color: #ffa567;
text-align: center;
}
Dentro del directorio templates vamos a crear un archivo html de nombre:

ejemplo(ejemplo.html), el cual va a tener el siguiente cdigo:
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ STATIC_URL }}forma.css"/>
<title>{% block titulo %}Sin ttulo{% endblock %}</title>
</head>
<body>
{% block principal %}Sin cuerpo{% endblock %}
<hr/>
<footer>
Ingeniera de Sistemas V Ciclo
</footer>
</body>
</html>
Crear una aplicacin que tendr por nombre bienvenida, la misma que se ubicar dentro
de nuestro proyecto. En una terminal escribir(tenemos que estar dentro de nuestro
proyecto):
python manage.py startapp bienvenida
Dentro del proyecto tenemos:
165
Se crea la funcin de vista que enviar la informacin a la plantilla. Tenemos que editar el
archivo views.py que se encuentra dentro la aplicacin bienvenida en nuestro proyecto
prueba. Se debe agregar lo siguiente:
from django.shortcuts import render
def presenta(request):
return render(request, 'saludo.html', {'nombre': 'Estudiantes de la Escuela
Profesional ...'})
En el directorio templates vamos a crear el archivo html de nombre

saludo(saludo.html), con el siguiente contenido:
{% extends "ejemplo.html" %}
{% block titulo %}Tema 12{% endblock %}
{% block principal %}
<h1>Bienvenidos {{ nombre }}!</h1>
<p>
Aplicacin web utilizando el framework Django.
</p>
{% endblock %}
En la imagen se aprecia saludo.html
Vamos a relacionar la funcin de vista con un patrn URL. Tenemos que editar el archivo
urls.py de nuestro proyecto agregando:
(r'^bienvenida/$', 'prueba.bienvenida.views.presenta'),
166
En su navegador escribir: http://localhost:8000/bienvenida/
167
Hibernate
(framework)
Esquema Model-View-Controller(MVC)
Es un patrn de desarrollo de sofware, cuyo propsito es la organizacin de nuestro

trabajo separando la lgica del negocio de la interfaz de usuario:
Modelo(Model).- Objetos del negocio. la informacin almacenada en una base de datos o en

XML.
Vista(View).- Interfaz con el usuario. La pgina HTML.
Controlador(Controller).- Controlador de la aplicacin. Cdigo que obtiene datos dinmicamente

y genera el contenido HTML.
Hibernate
Es un framework que agiliza la relacin entre la aplicacin y la base de datos, est

disponible bajo los trminos de cdigo abierto GNU Lesser General Public License (LGPL) y se
puede descargar gratis.
Es una herramienta de Mapeo objeto-relacional (ORM) para la plataforma Java que facilita
el mapeo de atributos entre una base de datos relacional. Mapeo objeto/relacional (ORM) se
refiere a la tcnica de mapear una representacin de datos desde un modelo de objeto a un
modelo de datos relacionales con un esquema basado en SQL, con su utilizacin se puede
reducir de manera importante el tiempo de desarrollo que se tomara con el manejo de datos de
forma manual en SQL y JDBC.
Cmo funciona Hibernate?

Se tiene que configurar en un archivo XML o mediante annotations donde corresponde un
atributo de una clase, con una columna de una tabla.
NetBeans-Hibernate
El soporte para Hibernate en aplicaciones web est disponible desde NetBeans 6.1.
168
DESARROLLO DE PROYECTO WEB EN NETBEANS UTILIZANDO HIBERNATE
1.-CREACIN DE LA BASE DE DATOS
Para el siguiente ejemplo vamos a crear una base de datos sencilla; pero que resulta
eficiente para nuestro propsito de trabajo, la cual se denominada bdventas y en ella la tabla
empleado, que tiene 4 campos.
En la imagen puede apreciar la base de datos y la estructura de la tabla:
Podemos realizar algunos registros:
2.-CREACIN DEL PROYECTO
Se crea el proyecto.
Le ponemos por nombre WEB_EMPRESA o el crea conveniente.
169
Tener en cuenta el Server y Java EE Version
En la siguiente ventana seleccionamos el Framework: Hibernate
En la misma ventana en Database Connection, desplegamos la lista y seleccionamos

New Database Connection ... y se muestra la siguiente ventana:
170
Desplegamos la lista en Driver y seleccionamos el conector de MySQL y siguiente en la

parte inferior.
Se escribe el nombre de la base de datos y luego Test Connection para probar la

conexin a nuestra base de datos.
171
Debe quedar de la siguiente forma:
En Source Packages, se puede apreciar el archivo de configuracin: hibernate.cfg.xml
172
En el archivo hibernate.cfg.xml, realizamos la siguiente configuracin en diseo, en

propiedades de configuracin.
Clic en el botn Add(Agregar) y se selecciona como se muestra:
En Miscellaneous Properties, que se encuentra ms abajo tambin en Add.
Creamos el archivo Hibernate ingeniera Inversa: En el proyecto clic derecho,

New(Nuevo), otros, en Categories(Categoras) ubicamos Hibernate y en File Types(Tipo
de archivo) Hibernate Reverse Engineering Wizard.
173
Se genera el archivo(hibernate.reveng.xml) y se ubica debajo del archivo

hibernate.cfg.xml.
Se crean 3 paquetes con los nombres que se muestran en la figura:
En el paquete mapa(Pojos) se crea un archivo. Clic derecho en el paquete, New, otros,

luego hibernate y en tipos de archivos selecciona Hibernate Mapping Files and POJOs
from Database.
Debe aparecer la siguiente ventana.
174
Se generan 2 archivos: Empleado.hbm.xml y Empleado.java.

el archivo .java tiene el mismo nombre que la tabla empleado de la base de datos; pero la
primera letra con mayscula. Observemos su contenido:
175
En el paquete dao. Clic derecho, New, Other, hibernate y seleccionamos:

HibernateUtil.java
Le ponemos por nombre: HibernateUtil(le borramos New)
Se puede apreciar:
Se crea en el mismo paquete(dao) el archivo EmpleadoDao(archivo Java Class). Como se

puede observar la clase est vaca.
Dentro de la clase empleado vamos a escribir el cdigo que permite ingresar un

empleado a la tabla de la base de datos(insertar registro o grabar).
176
Primero realizamos las importaciones(algunas se van utilizar para otras

actividades), aunque se puede hacer durante el proceso.
import pojos.Empleado;
import org.hibernate.SessionFactory;
import org.hibernate.Session;
import org.hibernate.Query;
import org.hibernate.Transaction;
import java.util.List;
Dentro de las llaves(el mtodo ingresarEmpleado):
public void ingresarEmpleado(Empleado p)

{
SessionFactory sf=null;
Session sesion= null;
Transaction tx=null;
try
{
sf=HibernateUtil.getSessionFactory();
sesion=sf.openSession();
tx=sesion.beginTransaction();
sesion.save(p);
tx.commit();
sesion.close();
}
catch(Exception ex)
{
tx.rollback();
throw new RuntimeException("");
}
}
En la figura se muestra el cdigo(no olvidar en la parte superior las importaciones):
177
En el paquete serviciosws. Clic derecho, New, other, en Categories(Categoras) seleccione

Web Services, en tipo File Types(Tipo de Archivo) Web Service.
Luego le ponemos por nombre: EmpleadoWS
C
r
e
a
d
o
EmpleadoWS, seleccionamos la pestaa Diseo(Design) en la ventana del lado derecho.

Eliminar hello(seleccionar).
Luego en Add Operation agregar IngresarEmpleado con sus parmetros(los campos de

la tabla). En la nueva ventana ir al botn Add, para agregar los parmetros.
178
Al hacer OK, en Design se puede observar lo siguiente:
En Source se puede apreciar la plantilla que se ha generado.
179
En el mismo Source, agregar las lneas seleccionadas, adems de las 2

importaciones en la parte superior.
En el proyecto WEB_EMPRESA, clic derecho y seleccionar Deploy
180
Clic derecho en EmpleadoWS que se encuentra dentro de Web Services y

seleccionamos Test Web Service
Tenemos como resultado la siguiente ventana:
Hacer clic en el enlace del lado derecho(azul) y nos aparece la siguiente ventana, de
la cual vamos a seleccionar y copiar la URL que luego utilizaremos para enlazarla desde el
nuevo proyecto que vamos a crear en el siguiente punto.
181
Vamos a crear un nuevo proyecto de nombre: CLIENTE_EMPRESA(New Project,

Java Web, Web Application, Next, seleccionamos el Server, y Java EE version como en las
sesiones anteriores. No marcar Frameworks, Finish).
Clic derecho en nuestro nuevo proyecto y New, Other, en Categories selecciona Web
Services y en Type Files Web Service Client.
En la opcin BSDL URL pegamos la URL del punto anterior, como se muestra en la
imagen.
182
En el proyecto CLIENTE_EMPRESA se ha generado Web Service References y

dentro de l a EmpleadoWS.
En el proyecto CLIENTE_EMPRESA nos ubicamos en el index.jsp, y en el

cuerpo(body) arrastramos IngresarEmpleado de EmpleadoWS que se muestra en la
imagen anterior.
Ahora observar el cdigo generado producto de arrastrar IngresarEmpleado dentro de

body.
183
Falta agregar debajo de lo mostrado(dentro del body) un formulario como se muestra

en la imagen.
Hay que modificar el cdigo que se gener cuando arrastramos al body

IngresarEmpleado, teniendo en cuenta los nombres(name) que se han colocado en el
formulario, como se muestra.
Clic derecho en el proyecto CLIENTE_EMPRESA, Run(Ejecutar). En nuestro

navegador se puede apreciar:
184
Ingresamos datos, clic en el botn Enviar. Luego observar su base de datos para
verificar la insercin del registro.
185
186
Referencias bibliogrficas
Gonzlez, Ral Python para Todos 3 edicin Creative Commons Reconocimiento 2.5 Espaa 2007
Holovaty, Adrian El Libro de Django 1 edicin Apress Chicago 2007
Deitel, Paul Java Cmo programar 7a Edicin Pearson Educacin Mexico 2008
Vsquez, Julio SUPER JAVA SE for Windows with NetBeans IDE 1 Edicin Lima-Per 2008
Vsquez, Julio SUPER JAVA ENTERPRISE EDITION with NetBeans IDE and MySQL 1 Edicin
Lima-Per 2009
Meroo, Juan Curso Java y Tecnologas Java EE 1 edicin Espaa 2009
Wachenchauzer, Rosita Algoritmos y Programacin I Con lenguaje Python 1 edicin Creative Commons
Argentina 2011
Apuntes de programacin orientada a objetos en Java: Fundamentos de programacin y principios de

diseo Berzal, Fernando [en lnea] Marzo 2009. [fecha de acceso 1 de Octubre 2012]. Mexico. URL
disponible en:
http://courseware.ikor.org/java
Frameworks Struts con NetBeans 6.5 Aguirre, Carlos [en lnea] 16 marzo 2009 [fecha de acceso 2
Noviembre del 2012]. URL disponible en:
http://elrebusque.wordpress.com/2009/03/16/frameworks-struts-con-netbeans-65/
Frameworks en Java Bugarn, Jos [en lnea] Mayo del 2009 [fecha de acceso 3 de Octubre 2012]. Lima-
Per URL disponible en:
http://www.slideshare.net/jlbugarin/frameworks-java-1456835
Tutorial Java con NetBeans IDE Berzal, Fernando [en lnea] 13 de Mayo del 2010 [fecha de acceso de
Noviembre 2011]. Madrid. URL disponible en:
http://www.dacostabalboa.com/es/tutorial-java-con-netbeans-ide/8343
Frameworks J2EE Canarias, Iker [en lnea] Febrero del 2012 [fecha de acceso 03 de Octubre del 2012]
Espaa. URL disponible en:
http://www.slideshare.net/ikercanarias/frameworks-j2ee
Bibioteca Digital ULADECH
Manual Programacin web en el entorno cliente: formacin para el empleo, Ribes Alba Purificacin,
Pginas: 259, Editorial CEP, Espaa, 2011, Idioma: es
http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=107415
Iniciacin a javascript, Mohedano, Jorge Saiz, Pginas: 166, Editorial Ministerio de Educacin de Espaa,
Espaa, 2012, Idioma: es
Fundamentos de Java (3a. ed.), Schildt, Herbert, Pginas: 649, Editorial: McGraw-Hill, Mxico, 2010, Idioma:
es
Programacin web en java, Ordax Cass, Jos Miguel, Pginas: 251, Editorial: Ministerio de Educacin de
Espaa, Espaa, 2012, Idioma: es
Trabajos de investigacin ULADECH
PROPUESTA DE MEJORA DEL NIVEL DE GESTION DEL PROCESO DE PLANIFICACION Y ORGANIZACION DE LAS
TECNOLOGIAS DE INFORMACION Y COMUNICACION (TIC) EN LA GERENCIA SUB REGIONAL MORROPON
HUANCABAMBA, DEL GOBIERNO REGIONAL DE PIURA, PROVINCIA DE MORROPON, DEPARTAMENTO DE PIURA;
AO 2012 . NONAJULCA RAMIREZ JOSE ALEJANDRO
PERFIL DEL NIVEL DE GESTION DE DOMINIO DE ADQUISICION E IMPLEMENTACION DE LAS TECNOLOGIAS DE LA

INFORMACION Y COMUNICACION (TIC) EN EL INSTITUTO SUPERIOR TECNOLOGICO LA UNION DISTRITO LA
UNION PIURA 2012. SERNAQUE SULLON JOSE HUMBERTO
187
PERFIL DEL NIVEL DE GESTION DE DOMINIO DE ADQUISICION E IMPLEMENTACION DE LAS TECNOLOGIAS DE LA

INFORMACION Y COMUNICACION (TIC) EN LA MUNICIPALIDAD DE LA PROVINCIA DE HUANCABAMBA
DEPARTAMENTO DE PIURA, 2012. CAMPOS QUINTANA KELY MAYUMI
188

Tecnología de Programacion

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tecnología de Programacion

Transféré par

Droits d'auteur :

Formats disponibles

Tecnologa de Programacin

Ing. Ricardo Edwin More Reao

1.1.Tecnologas de diseo web. Servidores web. Ambientes de desarrollo de aplicaciones web. 04

1.2.Tecnologas de programacin del lado del cliente: JavaScript. Introduccin. 12

1.3.Tecnologas de programacin del lado del cliente: JavaScript. Funciones. Eventos. 24

1.5.Formulario JApplet. Controles, propiedades, mtodos. 48

2.2.Acceso a base de datos con JSP. 79

2.3.Servlets. Definicin, estructura bsica, ciclo de vida, mtodos. 94

2.4.Servlets y JDBC, cookies, sesiones. 108

2.5.Reportes. Instalacin y uso de iReport. 119

3.2.Python. Django el framework web de Python. 157

3.3.Hibernate. Esquema Model View Controller(MVC). 168

A la hora de iniciar o reconstruir un sitio web, una de las decisiones ms

Con el desarrollo de la Tecnologa de Programacin se pretende conocer

El presente texto se desarrollar en tres captulos:

Tecnologas de Programacin del lado del cliente

Ricardo More Reao

Tecnologas de Programacin del lado del cliente

A la hora de iniciar o reconstruir un sitio web, una de las decisiones ms importantes es la

Cmo afecta la tecnologa utilizada el desarrollo de una web

La funcionalidad del sitio Web.

Su facilidad de mantenimiento y actualizacin de contenidos.

Las necesidades del servidor donde se alojar la web.

Disponibilidad de actualizaciones de seguridad.

Velocidad de carga de la web.

La usabilidad de los distintos elementos.

Visibilidad en los buscadores.

No es necesario realizar actualizaciones peridicas de seguridad.

Disponen de una gran flexibilidad para cambiar el diseo.

El contenido es esttico (el mismo contenido para todos los usuarios).

Es necesario disponer de conocimientos HTML para realizar cambios en la informacin

La gestin eficiente de webs que van aumentando sustancialmente su contenido con

Funcionalidad e interaccin con el usuario limitada.

Definicin: Sistema que forma la estructura de soporte para la creacin y administracin de

Permite generar contenido dinmico dependiendo del usuario.

Facilita la escalabilidad de una web.

Sus actualizaciones permiten ir adoptando nuevos estndares web automticamente.

Una vez implementado el diseo de un sitio, es ms complejo realizar cambios

Servidor = Equipo que almacena la informacin de tu pgina web.

Tanto en desarrollos web basados en HTML en el que se incluyan elementos con

Un navegador web, navegador de Internet o explorador web (browser) es un programa

La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos

El seguimiento de enlaces de una pgina a otra, ubicada en cualquier computadora

Algunos navegadores Web:

Adems los servidores pueden disponer de un intrprete de otros lenguajes de

Cmo funcionan los Servidores

Algunos de estos son:

IDE - Entorno de Desarrollo Integrado

IDE(integrated development environment). Un IDE es un programa informtico compuesto por

Un IDE est compuesto por:

Posibilidad de ofrecer un sistema de control de versiones.

Factibilidad para ayuda en la construccin de interfaces grficas de usuario.

Algunos de estos son:

El IDE NetBeans es un entorno de desarrollo integrado, una herramienta para

La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un

Eclipse es un entorno de desarrollo integrado de cdigo abierto multiplataforma para

Eclipse dispone de un Editor de texto con resaltado de sintaxis. La compilacin es en

Asistente de cdigo para HTML y Javascript.

Conexin va FTP, SFTP, FTPS y Aptana Cloud.

Herramientas para trabajo con base de datos.

Marcado de sintaxis mediante colores.

Compatible con extensiones para Eclipse (existen ms de 1000).

Despus de estudiar y reflexionar acerca de Tecnologas de diseo web. Servidores

2. Editor para realizar nuestras aplicaciones web.