Académique Documents
Professionnel Documents
Culture Documents
Docente
2014
ndice
Introduccin
Captulo I
Pgina
1.4.Tecnologas de programacin del lado del cliente:Applets, llamada, ciclo de vida, mtodos. 33
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.
Captulo III
3.1.Python. Utilizacin del intrprete de Python, tipos bsicos, control de flujo y funciones. 142
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
Atentamente
2
Captulo I
3
TECNOLOGAS DE DISEO WEB
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.
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:
Desventajas:
Gestor de contenidos
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:
No es necesario almacenar cada una de las posibles pginas (se evita redundancia de
informacin).
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.
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
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
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.
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.
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.
8
AMBIENTES DE DESARROLLO DE APLICACIONES WEB
Un compilador.
Un intrprete.
Un depurador.
Un cliente.
NetBeans IDE
9
Eclipse
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:
Libreras ajax (jQuery, prototype, scriptaculous, Ext JS, dojo, YUI y Spry entre otras).
10
Tarea sesin N 01
1. 03 navegadores de su preferencia.
3. Instalar NetBeans IDE 7.2 o 7.3 (Personalizar para instalar servidores) en su 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.
12
JavaScript
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>
<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>
<html>
<head>
<title>Ejemplo de la segunda forma</title>
</script>
</head>
<body>
<p>Hemos enlazado un archivo externo, de extensin js</p>
</body>
</html>
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
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..? );
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>
<script type="text/javascript">
resp=prompt("Ingresar nombre: ");
document.write("Hola: ",resp);
</script>
</head>
<body>
<p>Programacin </p>
<p> JavaScript </p>
</body>
</html>
16
PROGRAMACIN BSICA
Variables
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
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.
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.
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>
<script type="text/javascript">
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>
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".
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.
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.
if(condicin)
{
...
}
else if(condicin)
{
...
}
else if(condicin)
{
...
}
else {
}
Bucles
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');
}
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
}
<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:
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:
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.
function Nombredelafuncin(parmetros)
25
{
cuerpo de instrucciones;
Nombredelafuncin();
<html>
<head>
<title>Funciones con javascript </title>
</head>
<body>
<script type="text/javascript">
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>
<title>Funciones con javascript </title>
<script type="text/javascript">
function bienvenida(){
document.write("<H1>Hola, este es un ejemplo de funcin</H1>");
}
</script>
</head>
<body>
<script type="text/javascript">
//llamando a la funcion
bienvenida();
</script>
<br>
FUNCIONES CON JAVASCRIPT 2013
</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>
<title>Funciones con javascript </title>
</head>
<body>
<script type="text/javascript">
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>
FUNCIONES CON JAVASCRIPT 2013
</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)
function suma(a,b)
{
return a+b;
}
<html>
<head>
<title>Funciones con parmetros en javascript </title>
<script type="text/javascript" src="suma.js">
</script>
</head>
<body>
<script type="text/javascript">
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.
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.
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".
29
pulsado el botn');" />
Si no se utiliza la variable this, el cdigo necesario para modificar el color de los bordes,
sera el siguiente:
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:
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:
Tambin tenemos los manejadores de eventos semnticos, que es una tcnica evolucin
del mtodo de las funciones externas.
Ejemplos:
<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
<body onload="saludo()">
<script type="text/javascript">
function saludo()
{
31
alert('Bienvenido a la pgina de Javascript')
}
</script>
</body>
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:
<script type="text/javascript">
document.getElementById("enlace").onclick = function ejemplo() {
alert("Enlace a una pgina web");
}
</script>
<html>
<head>
<title>Ejemplo utilizando onResize</title>
</head>
<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>
<html>
<head>
<title>Validacin de Formularios con Javascript</title>
<script type="text/javascript">
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.
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.
36
En la siguiente ventana escribir el nombre de su proyecto, como se muestra y luego
finalizar(Finish):
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.
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>
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>
</head>
<body>
</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.
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.
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.
setBackground(Color.yellow);
42
En la ventana de ejecucin:
43
Otro ejemplo:
package ejemploapplet;
import java.applet.Applet;
import java.awt.*;
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
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.
Tarea de la sesin N 04
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
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.
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.
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).
Aparece una nueva ventana donde hay que poner el nombre, como se muestra, luego
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.
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)
Las estiquetas:
51
Se escribe el cdigo(bsico) como se muestra, compila y ejecuta.
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.
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.
54
Aparece una nueva ventana donde hay que poner el nombre, como se muestra, luego
finalizar(Finish):
55
Colocamos los contenedores y controles en el formulario:
rea de texto:
txtLetra
Las estiquetas:
lblTitulo
56
Hay que considerar agregar:
import java.awt.*;
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.
57
Finalmente en la pgina web se observa.
58
Tarea de la sesin N 05
Ejercicio 1
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.)
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:
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
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.
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.
<HTML>
<HEAD><TITLE>JavaServer Pages</TITLE></HEAD>
<BODY>
<%
out.println("Ejemplo de cdigo de una pgina JSP");
%>
</BODY>
</HTML>
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.
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).
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).
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.
67
El archivo aparecer en nuestro proyecto, junto al index.
68
En Presentacin.jsp escribir las lneas que se muestran.
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.
<jsp:expression>expresin </jsp:expression>
Ejemplo:
Ejemplo:
Scriptlets
Declaracin
Su formato es: <%! .... %> lo utilizamos para declarar variables o mtodos. Por ejemplo:
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.
71
Comentario
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
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.
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:
Ver la imagen:
74
Ejemplo 5:
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.
76
Tecnologa de Programacin V Ciclo
Tarea de la sesin N 06
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.
10. Hacer una pgina JSP que liste los 100 primeros cuadrados.
77
Tecnologa de Programacin V Ciclo
Base de datos.-
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.
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
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
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()
80
Tecnologa de Programacin V Ciclo
81
Tecnologa de Programacin V Ciclo
82
Tecnologa de Programacin V Ciclo
83
Tecnologa de Programacin V Ciclo
Ahora se puede apreciar la plantilla, que corresponde a index que se crea en forma
predeterminada.
85
Tecnologa de Programacin V Ciclo
Vamos a nuestro proyecto web EMPRESA, hacemos clic derecho y Run(Ejecutar), que
llama al index.jsp, que es donde est el enlace.
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
Tecnologa de Programacin V Ciclo
Creamos el proyecto que tendr por nombre GUARDAR o el crea conveniente. Como
mencionamos ya, trabajaremos con 3 archivos.
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.
88
Tecnologa de Programacin V Ciclo
89
Tecnologa de Programacin V Ciclo
90
Tecnologa de Programacin V Ciclo
Contina...
Contina ...
Ingresamos valores.
91
Tecnologa de Programacin V Ciclo
92
Tecnologa de Programacin V Ciclo
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
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.
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.
93
Tecnologa de Programacin V Ciclo
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.
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.
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
Tecnologa de Programacin V Ciclo
Ejemplo 1:
Creamos nuevo proyecto. Web Java, Aplicacin Web, como se muestra en la imagen.
95
Tecnologa de Programacin V Ciclo
96
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
98
Tecnologa de Programacin V Ciclo
99
Tecnologa de Programacin V Ciclo
Ejemplo 2:
Realizar una aplicacin web que permita implementar un contador, es decir cuente cuntas
veces se contacta al servlet.
100
Tecnologa de Programacin V Ciclo
101
Tecnologa de Programacin V Ciclo
102
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
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.
104
Tecnologa de Programacin V Ciclo
Luego calcular.
105
Tecnologa de Programacin V Ciclo
Tarea de la sesin N 08
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.
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
Tecnologa de Programacin V Ciclo
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
.
HTTP
Servidor web(servlets)
Servidor
Controlador JDBC
108
Tecnologa de Programacin V Ciclo
109
Tecnologa de Programacin V Ciclo
110
Tecnologa de Programacin V Ciclo
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.
111
Tecnologa de Programacin V Ciclo
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.
112
Tecnologa de Programacin V Ciclo
Tenemos que agregar las lneas mostradas en la imagen, por ejemplo en la parte superior:
import.java.sql.*;
Contina.
113
Tecnologa de Programacin V Ciclo
114
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
Clic derecho en nuestro proyecto, New y luego Servlet, el cual tendr por nombre
RegistroServlet.java. El cdigo se muestra en la imagen:
116
Tecnologa de Programacin V Ciclo
117
Tecnologa de Programacin V Ciclo
118
Tecnologa de Programacin V Ciclo
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.
119
Tecnologa de Programacin V Ciclo
120
Tecnologa de Programacin V Ciclo
121
Tecnologa de Programacin V Ciclo
Luego Next.
122
Tecnologa de Programacin V Ciclo
Continuar(Continue).
123
Tecnologa de Programacin V Ciclo
Finalizar(Finish).
124
Tecnologa de Programacin V Ciclo
125
Tecnologa de Programacin V Ciclo
126
Tecnologa de Programacin V Ciclo
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.
127
Tecnologa de Programacin V Ciclo
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.
128
Tecnologa de Programacin V Ciclo
129
Tecnologa de Programacin V Ciclo
130
Tecnologa de Programacin V Ciclo
Hacer clic, al cono que se seala, que es que permitir ingresar nuestra consulta.
131
Tecnologa de Programacin V Ciclo
De la ventana del lado izquierdo, en Fields aparecen los campos de la tabla, los cuales se
arrastran y se sueltan en detalle(detail).
132
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
134
Tecnologa de Programacin V Ciclo
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.
135
Tecnologa de Programacin V Ciclo
136
Tecnologa de Programacin V Ciclo
Este es Reporte.jsp.
137
Tecnologa de Programacin V Ciclo
138
Tecnologa de Programacin V Ciclo
139
Tecnologa de Programacin V Ciclo
Tarea de la sesin N 10
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
Tecnologa de Programacin V Ciclo
141
Tecnologa de Programacin V Ciclo
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.
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.
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
142
Tecnologa de Programacin V Ciclo
El indicador >>> en el terminal, indica que usted est en una sesin interactiva
con Python.
143
Tecnologa de Programacin V Ciclo
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
Podemos utilizar nuestro editor de texto para escribir o cualquier otro editor para trabajar Python:
Python mensaje.py
144
Tecnologa de Programacin V Ciclo
Luego en el intrprete:
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:
145
Tecnologa de Programacin V Ciclo
Editores
Utilizando el centro de software de Ubuntu podemos instalar editores para trabajar con
Python, por ejemplo SPE.
146
Tecnologa de Programacin V Ciclo
Tipos bsicos
Colecciones
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
Tecnologa de Programacin V Ciclo
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
148
Tecnologa de Programacin V Ciclo
149
Tecnologa de Programacin V Ciclo
Adems en el mdulo math se puede encontrar otras funciones de mucha utilidad en la resolucin
de problemas.
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.
150
Tecnologa de Programacin V Ciclo
Luego en el terminal:
En el terminal:
Con formato:
En el terminal:
151
Tecnologa de Programacin V Ciclo
En el terminal:
En el terminal:
152
Tecnologa de Programacin V Ciclo
En el terminal:
Las estructuras de control iteractivas estn propuestas para realizar como actividad de
investigacin en la presente sesin.
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.
print param1
153
Tecnologa de Programacin V Ciclo
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)
154
Tecnologa de Programacin V Ciclo
155
Tecnologa de Programacin V Ciclo
Tarea de la sesin N 11
Para realizar la presente actividad puede utilizar el terminal, cualquier editor utilizado en la
sesin o el su preferencia.
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.
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".
156
Tecnologa de Programacin V Ciclo
Django
Framework web de Python
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
Proyecto
Arquitectura MVC(Modelo-Vista-Controlador)
Esta arquitectura separa las aplicaciones en tres partes y Django propone utilizarla:
157
Tecnologa de Programacin V Ciclo
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
Si observamos nuestra carpeta personal nos daremos cuenta que se ha descargado: Django-
1.3.1.tar.gz
158
Tecnologa de Programacin V Ciclo
3) cd "Django-1.3.1"
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
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 descomprime.
159
Tecnologa de Programacin V Ciclo
cd setuptools-0.6c11/
Se instala.
b) libmysqlclient-dev
c) MySQLdb
Verificacin de la instalacin
160
Tecnologa de Programacin V Ciclo
PROYECTO
E
n
una terminal escribir: django-admin.py startproject prueba
Al abrir el proyecto podemos apreciar los siguientes archivos, de los cuales se hace una
breve descripcin:
161
Tecnologa de Programacin V Ciclo
__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
162
Tecnologa de Programacin V Ciclo
En una terminal escribir: mkdir static y mkdir templates, primero hay que cambiarnos a
nuestro directorio(prueba).
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
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
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
footer {
font-size: 80%;
color: #ffa567;
text-align: center;
}
<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):
165
Tecnologa de Programacin V Ciclo
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:
def presenta(request):
return render(request, 'saludo.html', {'nombre': 'Estudiantes de la Escuela
Profesional ...'})
{% extends "ejemplo.html" %}
{% block titulo %}Tema 12{% endblock %}
{% block principal %}
<h1>Bienvenidos {{ nombre }}!</h1>
<p>
Aplicacin web utilizando el framework Django.
</p>
{% endblock %}
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
Tecnologa de Programacin V Ciclo
167
Tecnologa de Programacin V Ciclo
Hibernate
(framework)
Esquema Model-View-Controller(MVC)
Hibernate
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.
NetBeans-Hibernate
El soporte para Hibernate en aplicaciones web est disponible desde NetBeans 6.1.
168
Tecnologa de Programacin V Ciclo
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:
Se crea el proyecto.
169
Tecnologa de Programacin V Ciclo
170
Tecnologa de Programacin V Ciclo
171
Tecnologa de Programacin V Ciclo
172
Tecnologa de Programacin V Ciclo
173
Tecnologa de Programacin V Ciclo
174
Tecnologa de Programacin V Ciclo
175
Tecnologa de Programacin V Ciclo
Se puede apreciar:
176
Tecnologa de Programacin V Ciclo
import pojos.Empleado;
import org.hibernate.SessionFactory;
import org.hibernate.Session;
import org.hibernate.Query;
import org.hibernate.Transaction;
import java.util.List;
177
Tecnologa de Programacin V Ciclo
C
r
e
a
d
o
178
Tecnologa de Programacin V Ciclo
179
Tecnologa de Programacin V Ciclo
180
Tecnologa de Programacin V Ciclo
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
Tecnologa de Programacin V Ciclo
En la opcin BSDL URL pegamos la URL del punto anterior, como se muestra en la
imagen.
182
Tecnologa de Programacin V Ciclo
183
Tecnologa de Programacin V Ciclo
184
Tecnologa de Programacin V Ciclo
Ingresamos datos, clic en el botn Enviar. Luego observar su base de datos para
verificar la insercin del registro.
185
Tecnologa de Programacin V Ciclo
186
Tecnologa de Programacin V Ciclo
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
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
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
http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10751455
Fundamentos de Java (3a. ed.), Schildt, Herbert, Pginas: 649, Editorial: McGraw-Hill, Mxico, 2010, Idioma:
es
http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10433829
Programacin web en java, Ordax Cass, Jos Miguel, Pginas: 251, Editorial: Ministerio de Educacin de
Espaa, Espaa, 2012, Idioma: es
http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10751181
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
187
Tecnologa de Programacin V Ciclo
188