herramientas de programación avanzada · facilitando así la creación de aplicaciones...

1

Herramientas de programación avanzada

1. GENERALIDADES

Clase #01

1.1 Historia Surgió en 1991 por Sun microsystems, los cuales diseñaron un lenguaje de programación destinado a

electrodomésticos, la reducida potencia de calculo y memoria de los electrodomésticos llevo a

desarrollar un lenguaje sencillo capaz de generar código de tamaño muy reducido.

Debido a la existencia de diferentes tipos de CPUs se desarrollo un código NEUTRO, que no depende

del tipo de electrodoméstico. El código s ejecuta sobre una “maquina hipotética o virtual” denominada

java virtual machina (jvm) quien interpreta el código neutro convirtiéndolo a código particular de la

cpu utilizada. Pero ninguna empresa de electrodomésticos se intereso en el nuevo lenguaje.

Java como lenguaje de programación de computadores se introdujo en 1995. Se incorporo como un

intérprete en el programa Netscape Navigator, versión 2.0, generando una verdadera revolución en

Internet.

El principal objetivo de java es llegar a ser el “nexo universal” que conecte a los usuarios con la

información, este se sitúa en el PC local, en un servidor de Web, en una base de datos o en cualquier

otro lugar.

Se define como un lenguaje

Simple: Java posee una curva de aprendizaje muy rápida. Resulta relativamente sencillo escribir

applets interesantes desde el principio. Todos aquellos familiarizados con C++ encontrarán que

Java es más sencillo, ya que se han eliminado ciertas características, como los punteros. Debido a su semejanza con C y C++, y dado que la mayoría de la gente los conoce aunque sea de forma

elemental, resulta muy fácil aprender Java.

Orientado a objetos: Java fue diseñado como un lenguaje orientado a objetos desde el principio.

Los objetos agrupan en estructuras encapsuladas tanto sus datos como los métodos (o funciones)

que manipulan esos datos. La tendencia del futuro, a la que Java se suma, apunta hacia la programación orientada a objetos, especialmente en entornos cada vez más complejos y basados

en red.

Distribuido: Java proporciona una colección de clases para su uso en aplicaciones de red, que

permiten abrir sockets y establecer y aceptar conexiones con servidores o clientes remotos,

facilitando así la creación de aplicaciones distribuidas.

Interpretado: Java es compilado, en la medida en que su código fuente se transforma en una

especie de código máquina, los bytecodes, semejantes a las instrucciones de ensamblador.

Por otra parte, es interpretado, ya que los bytecodes se pueden ejecutar directamente sobre

cualquier máquina a la cual se hayan portado el intérprete y el sistema de ejecución en tiempo

real (run-time).

2

Robusto: Java realiza verificaciones en busca de problemas tanto en tiempo de compilación como

en tiempo de ejecución. La comprobación de tipos en Java ayuda a detectar errores, lo antes

posible, en el ciclo de desarrollo.

Seguro: Dada la naturaleza distribuida de Java, donde las applets se bajan desde cualquier punto

de la Red, la seguridad se impuso como una necesidad de vital importancia. A nadie le gustaría

ejecutar en su ordenador programas con acceso total a su sistema, procedentes de fuentes

desconocidas. Así que se implementaron barreras de seguridad en el lenguaje y en el sistema de ejecución en tiempo real.

Portable: La indiferencia a la arquitectura representa sólo una parte de su portabilidad. Además,

Java especifica los tamaños de sus tipos de datos básicos y el comportamiento de sus operadores

aritméticos, de manera que los programas son iguales en todas las plataformas. Estas dos

últimas características se conocen como la Máquina Virtual Java (JVM).

De arquitectura neutra: Java está diseñado para soportar aplicaciones que serán ejecutadas en

los más variados entornos de red, desde Unix a Windows Nt, pasando por Mac y estaciones de

trabajo, sobre arquitecturas distintas y con sistemas operativos diversos. El compilador de Java

genera bytecodes: un formato intermedio indiferente a la arquitectura diseñado para transportar

el código eficientemente a múltiples plataformas hardware y software. El resto de problemas los soluciona el intérprete de Java.

Multitarea o multihebra: Hoy en día ya se ven como terriblemente limitadas las aplicaciones que

sólo pueden ejecutar una acción a la vez. Java soporta sincronización de múltiples hilos de

ejecución (multithreading) a nivel de lenguaje, especialmente útiles en la creación de aplicaciones

de red distribuidas. Así, mientras un hilo se encarga de la comunicación, otro puede interactuar

con el usuario mientras otro presenta una animación en pantalla y otro realiza cálculos.

Dinámico: El lenguaje Java y su sistema de ejecución en tiempo real son dinámicos en la fase de

enlazado. Las clases sólo se enlazan a medida que son necesitadas. Se pueden enlazar nuevos

módulos de código bajo demanda, procedente de fuentes muy variadas, incluso desde la Red.

Java permite fácilmente el desarrollo tanto de arquitecturas cliente-servidor como de aplicaciones

distribuidas, consistentes en crear aplicaciones capaces de conectarse a otros ordenadores y ejecutar

tares en varios ordenadores simultáneamente, repartiendo el trabajo.

Java nació pues como un lenguaje para la red, para sostener el Hiper text markup language (html) que

no es un lenguaje de programación propiamente dicho, y para darle la seguridad que el html no tiene

Una de las ventajas mas importantes de java es que el código generado es unido al java virtual

machina no al sistema operativo, por eso es posible poner en marcha el código compilado una única

vez, en una plataforma Windows y en una Linux

1.2 Primer programa Los archivos se almacenan con la extensión. JAVA, al compilar el código fuente, crea un uno con

extensión CLASS. Java requiere que todo el código resida dentro de una clase con nombre. El nombre

del fichero debe ser el mismo que el nombre de la clase donde esta la función MAIN.

public class holamundo{

public static void main(String args[ ]){

3

System.out.println(“HOLA MUNDO”);

}

}

Para compilar necesitamos el compilador JAVAC y posteriormente para ejecutar la aplicación

utilizamos el fichero JAVA.

C:\> javac holamundo.java

C:\> java holamundo

Para realizar un programa Java se requiere:

Un pc con Java Development Kit (JDK)

Un editor de texto como el bloc de notas Actualmente existen muchos programas, que facilitan el trabajo de java, sin tener que trabajar en el entorno DOS, siendo este el que se utiliza para realizar programa Java. Programas como Dreamweaver, Jcreator, Textpad, y otros. Son útiles incluso el bloc de notas de Windows.

1.3 Variables Unidad básica de almacenamiento, la creación es la combinación de un identificador, un tipo y un ámbito.

Tenemos 8 tipos de variables, la sintaxis para la creación.

tipo identificador = valor;

TIPO TAMAÑO RANGO

byte 8 bits Valores numéricos de –128 a 127

short 16 bits Valores numéricos de –32.768 a 32.767

int 32 bits Valores numéricos de –2.147.483.648 a 2.147.483.647

long 64 bits Valores numéricos sin límite.

float 32 bits Valores numéricos hasta 38 cifras

double 64 bits Valores numéricos hasta 308 cifras

char 16 bits Valores alfanuméricos

String Según long Se utiliza para cadenas de caracteres

boolean 8 bits Solo admite TRUE o FALSE

matriz[ ] Según long Agrupar variables del mismo tipo.

EJEMPLO: Programa utilizando variables.

class hola{


int x,y;

x=42;

y=12;

System.out.print(“X= “ +x);

4

System.out.println(“Y= “ +y);

}

}

1.4 Operadores

Aritméticos DESCRIPCION

+ Suma

- Resta

* Multiplica

/ Divide

% Devuelve el resto de una división

++ Incrementa en 1

-- Decremento en 1

Relacionales DESCRIPCION

= = Igual

!= Distinto

> Mayor que

< Menor que

>= Mayor o igual

<= Menor o igual

Lógicos DESCRIPCION

&& condición Y condición

| | condición O condición

! Negación de la condición

1.5 Sentencias de control Es la manera que tiene un lenguaje de programación de provocar que el flujo de la ejecución avance y se

ramifique en función de los cambios de estado de los datos.

IF-ELSE: La ejecución atraviese un conjunto de estados boolean que determinan que se ejecuten distintos

fragmentos de código. La cláusula else es opcional, la expresión puede ser de cualquier tipo y más de

una (siempre que se unan mediante operadores lógicos).

5

if (expresion-booleana)

Sentencia1;

else

Sentencia2;

WHILE: Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de

terminación. Hay cuatro partes en cualquier bucle. Inicialización, cuerpo, iteración y

terminación.

[inicialización;] while(condición){

cuerpo;

iteración;

}

DO-WHILE: Es lo mismo que en el caso anterior pero aquí como mínimo siempre se ejecutara el cuerpo una

vez, en el caso anterior es posible que no se ejecute ni una sola vez.

[inicialización;]

do{

cuerpo;

iteración;

}while(condición);

EJEMPLO:Este programa lo que hace es ir sumando n1 mientras que los valores no sean superiores a 100.

class fibo{

public static void main(String args[]){

int n1=0;

do{

n1++;

System.out.println(n1+" ");

}while(n1<100);

}

}

FOR: Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una forma compacta.

for (inicialización;condición;iteración)

{

sentencia1;

sentencia2;

}

EJEMPLO: Este programa muestra números del 1 al 100. Utilizando un bucle de tipo FOR.

class multi{


int n1=0;

for (n1=1;n1<=100;n1++)

System.out.print(n1+" ");

}

}

6

La sentencia continue lo que hace es ignorar las sentencias que tiene el bucle y saltar directamente a la

condición para ver si sigue siendo verdadera, si es así sigue dentro del bucle, en caso contrario saldría

directamente de el.

1.6 Matrices Grupo de variables con el mismo nombre y tipo. La manera de referirse a cada uno de los elementos de una

matriz es mediante su índice. Los tipos de la matrices son los mismos que el de las variables. Tenemos 2 tipos de

array, unidimensional y bidimensional.

UNIDIMENSIONALES:

tipo nombre_array[]=new tipo[nº];

tipo nombre_array[]={valores};

BIDIMENSIONALES:

tipo nombre_array[][]=new tipo[nº][nº];

tipo nombre_array[][]={valores};

EJEMPLO: Se declara una matriz para guardar los días que tienen los meses del año. Luego mostramos los días

del mes de abril.

class meses{


int mesdias[]={31,28,31,30,31,30,31,31,30,31,30,31};

System.out.pritnln(“Abril “ + mesdias[3] + “días”);

}

}

EJEMPLO: En este programa se utiliza un array bidimensional.

class multima{

public static void main (String args[]){

int m[][]=new int[3][3];

m[0][0]=1;

m[1][1]=1;

m[2][2]=1;

System.out.println(m[0][0]+” “+m[0][1]+” “+m[0][2]);



}

}

1.7 Lectura de datos En el siguiente dato se leen dos variables de tipo texto.

7

import java.io.*;

public class holamundo{


System.out.println("HOLA MUNDO");

String línea="";

String edad="";

try{

BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

System.out.println("Digite un mensaje");

línea = br.readLine();

System.out.println("Digite su edad");

edad = br.readLine();

}catch(Exception e){ e.printStackTrace();}

System.out.println(línea);

System.out.println(edad);

}

}

S i analizamos un poco el ejercicio se puede deducir:

Introducción a la entrada por teclado En java para poder escribir se emplea el objeto System.out, pero para leer del teclado es necesario

emplear System.in. Este objeto pertenece a la clase InputStream, esto significa que para leer tenemos

que emplear sus métodos, el más básico es read, que permite leer un carácter:

char caracter = (char) System.in.read();

Pero como podemos comprobar es muy incómodo leer de letra en letra, por ello para poder leer una

línea completa emplearemos el siguiente código:


String línea = br.readLine();

En el cuál creamos un InputStreamReader a partir de System.in y pasamos dicho InputStreamReader al

constructor de BufferedReader, el resultado es que las lecturas que hagamos sobre br son en realidad

realizadas sobre System.in, pero con la ventaja de que se permite leer una línea completa. Es necesario

realizar un import de java.io para poder emplear esta lectura de líneas. Además la línea del readLine

puede lanzar Excepciones, es por ello que hay que meterla entre instrucciones try/catch para poder

gestionar el posible error:

String línea;

try{


línea = br.readLine();

}catch(Exception e){ e.printStackTrace();}

System.out.println(línea);

El único inconveniente que tiene esta lectura, es que todas las lecturas que se pueden realizar son tipo

texto, ahora, si necesitamos datos numéricos, que se debe hacer?

8

1.8 Poo

1.8.1 Introduccion Los lenguajes estructurados se basan en estructuras de control bloques de código y subrutinas independientes

que soportan recursividad y variables locales. La programación orientada a objetos coge las mejores ideas de la

programación estructurada y los combina con nuevos conceptos de organización.

La programación orientada objetos permite descomponer un programa en grupos relacionados. Cada

subgrupo pasa a ser un objeto autocontenido con sus propias instrucciones y datos. Tres características de los

lenguajes orientados a objetos son, Encapsulación, Polimorfismo y la Herencia.

ENCAPSULAMIENTO: Como un envoltorio protector alrededor del código y los datos que se manipulan. El

envoltorio define el comportamiento y protege el código y los datos para evitar que otro código acceda a ellos de

manera arbitraria. El poder es que todo el mundo conoce como acceder a él y pueden utilizarlo de este modo

independientemente de los detalles de implementación. En Java la base del encapsulamiento es la clase,

(conjunto de objetos que comparten la misma estructura y comportamiento). Una clase se define mediante

métodos que operan sobre esos datos. Métodos es un mensaje para realizar alguna acción en un objeto.

HERENCIA: Objetos que se relacionan entre ellos de una manera jerárquica. Es decir a partir de una clase

donde están los atributos generales (superclase) se definen otras clases con atributos más específicos (subclase).

POLIMORFISMO: A los métodos que actúan sobre los objetos se les pasa información. Estos parámetros

representan los valores de entrada a una función. El Polimorfismo significa que un método tenga múltiples

implementaciones que se seleccionan en base a que tipo de objeto se le pasa.

1.8.2 Que son clases Una clase describe un conjunto de objetos con atributos y comportamientos comunes.

El elemento básico de la programación orientada a objetos es una clase. Una clase define la forma y

comportamiento de un objeto. Un objeto es similar a una variable salvo que el objeto puede contener varias

variables (variables de instancia) y métodos (rutinas que realizan operaciones).

Para la creación de un objeto se necesita el operador new, y que se declaren las variables de instancia dentro de

una clase. Mediante una clase se pueden declarar varios objetos que tendrán los mismos atributos.

Ahora, podemos entonces definir una clase que describa a éste conjunto de objetos. A ésta

clase la llamaremos Telefono_celular.

Definamos entonces los atributos y comportamientos comunes a todos los objetos para poder

definir la clase Telefono_celular.

Telefono_celular

Atributos:

Identificación del Propietario (71785727, 71854568, 8547544...)

Nombre del Propietario (Alan, Pedro, Juan...)

empresa (BellSouth, Comcel...)

numero de telefónico (3105112200, 3154278855, 3154875522...)

color del celular (Negro, plateado, azul...)

tamaño (pequeño, mediano, grande...)

color de la pantalla (verde, naranja, azul...)

comportamientos(Métodos):

9

llamar

colgar

remarcar(redial)

enviar mensaje de texto

enviar Mail

guardar mensaje voz(buzón)

jugar

guardar teléfono(Directorio telefónico)

De ésta manera sabemos entonces que los atributos de una clase son todas aquellas

propiedades que tienen los objetos en común. También sabemos que el comportamiento es lo

que el conjunto de objetos puede ejecutar, es decir los métodos que la clase puede ejecutar.

1.8.3 Que son objetos Un objeto ó instancia es una copia de una clase, que contiene la información y los métodos o funciones

necesarios para manipular esa información. Por lo tanto, yo puedo tener varios objetos de la misma

clase para manipular en cada uno de ellos informaciones diferentes, es decir, n objetos de una misma

clase se diferencian por los valores de sus atributos.

1.8.4 ejemplos de Poo Encapsulamiento: Es ocultación de datos, no tocamos las variables que usa el programa

//clase rectangulo para encapsular informacion

public class Rectangulo{

int ancho;

int alto;

// setAncho y getAncho son metodos

public void setAncho(int a){// a es un mensaje

ancho=a;

}

public int getAncho(){

return ancho;

}

public void setAlto(int a){

alto=a;

}

public int getAlto(){

return alto;

}

public int getArea(){

return ancho*alto;

}

}

Programa

//Programa que invoca la clase

public class PruebaRec{


10

Rectangulo r=new Rectangulo();

r.setAncho(5);

r.setAlto(6);

System.out.println("Ancho del rectangulo "+r.getAncho());

System.out.println("Alto del rectangulo "+r.getAlto());

System.out.println("Area "+r.getArea());

}

}

CLASE # 2

Herencia: Hereda datos de otro objeto

// clase persona

public class Persona{

String nombre;

String apellido;

String identificacion;

String genero;

String direccion;

String telefono;

public void setNombre(String a){

nombre=a;

}

public String getNombre(){

return nombre;

}

public void setApellido(String a){

apellido=a;

}

public String getApellido(){

return apellido;

}

public void setIdentificacion(String a){

identificacion=a;

}

public String getIdentificacion(){

return identificacion;

}

public void setGenero(String a){

genero=a;

}

public String getGenero(){

return genero;

}

public void setDireccion(String a){

direccion=a;

}

11

public String getDireccion(){

return direccion;

}

public void setTelefono(String a){

telefono=a;

}

public String getTelefono(){

return telefono;

}

}

// clase que hereda

public class Empleado extends Persona{

int sueldo;

String cargo;

public void setSueldo(int a){

sueldo=a;

}

public int getSueldo(){

return sueldo;

}

public void setCargo(String a){

cargo=a;

}

public String getCargo(){

return cargo;

}

}

Programa de prueba de empleado


public class PruebaEmpleado{


Empleado n=new Empleado();

n.setNombre("John William");

n.setApellido("Marin Pineda");

n.setCargo("Docente");

n.setSueldo(600000);

System.out.println("Nombre " + n.getNombre()+ " "+n.getApellido());

System.out.println("Cargo "+n.getCargo());

System.out.println("Sueldo "+n.getSueldo());

}

}

Polimorfismo //Polimorfismo:metodos con el mismo nombre y con diferentes mensajes

//clase

12

public class Insertar{

public void Insertar(Persona p){

System.out.println("Insertando persona");

System.out.println("Nombre " + p.getNombre());

}

public void Insertar(Empleado e){

System.out.println("Insertando empleado");

System.out.println("Nombre "+ e.getNombre());

}

}

Programa de prueba


public class PruebaInsertar{


Persona n=new Persona();

n.setNombre("John William");

Empleado e=new Empleado();

e.setNombre("Luis alberto");

Insertar r=new Insertar();

r.Insertar(n);

r.Insertar(e);

}

}

Sobreposicion

public class Cuadro extends Rectangulo{

public int getArea(){

return alto*ancho+2;

}

}

Programa de prueba


public class PruebaCuadro{


Rectangulo r=new Rectangulo();

r.setAncho(6);

r.setAlto(5);

Cuadro m=new Cuadro();

m.setAncho(6);

m.setAlto(5);

System.out.println("Area del rectangulo "+r.getArea());

System.out.println("Area del cuadro "+m.getArea());

13

}

}

CLASE # 3

Quiz poo

CLASE # 4

2. TIPOS DE APLICACIONES

Con Java se pueden construir varios tipos de programas, cada uno con características específicas, y que

se ejecutan de distintas maneras.

A continuación se explican los principales tipos: Aplicaciones, Applets, JavaBeans, JavaScript y

Servlets, JSP.

2.1 Aplicaciones de escritorio

Son programas básicos de Java que se ejecutan de dos formas:

En consolas: Es decir ambientes del tipo msdos, linux, terminales tontas, etc.

En ambientes gráficos de tipo Ventana: Ejemplo windows, kde o gnome de linux, sistem 8 de apple,

etc.

2.2 Applets

son programas en java que se mandan a un pc remoto o lejano, donde ese pc se encarga de correrla o

ejecutarla o compilarla y correrla.

Este applet lo manda un servidor de paginas(web server) junto con la pagina correspondiente, cada vez

que un usuario se conecta al web server y requiere la pagina que contiene el applet.

Para el caso de applets estos se ejecutan no en consola tampoco en una ventana sino dentro del browser

de la maquina remota que puede ser el internet explorer de microsoft o el netscape.

Por supuesto que el browser del cliente debe estar preparado para ejecutar applets, esto se hace

teniendo constantemente actualizado el browser (internet explorer o netscape) y estando sobre todo

seguro que en la actualización del browser se incluya la maquina virtual de java.

2.3 Servlets

Son programas en java que se ejecutan directamente en el servidor de paginas o web server, que al ser

invocado o llamado por un pc remoto, el web server compila y ejecuta el servlet, ya ejecutado se

mandan generalmente los resultados a la maquina remota, estos resultados se mandan en forma de una

pagina html, para que la maquina remota los vea en su propio browser.

Una vez que el web server o servidor de páginas ejecuta un servlet, lo mantiene vivo o despierto, para

responder de manera más rapida a las peticiones siguientes que se hagan del servlet.

2.4 Java Server Pages (JSP)

Aplicaciones JSP (Java Server Pages), tecnologia que combina codigo html y codigo java en un solo

programa o aplicación, cuando al web server le piden un jsp, lo compila, lo convierte a servlet con

todas las implicaciones que se mencionaron en el inciso anterior y manda los resultados al pc remoto

que lo solicitó.

2.5 JavaScript

14

JavaScript es un subconjunto del lenguaje Java que puede codificarse directamente sobre cualquier

documento HTML; el código fuente de JavaScript forma parte del propio documento HTML.

JavaScript tiene menos potencia que Java, a cambio de más control sobre el navegador Web que lo

ejecute. Se utiliza sobre todo para dar animación e interactividad a páginas Web. JavaScript posee una

habilidad limitada para interactuar con applets Java, pero Java no puede interactuar de ningún modo

con JavaScript.

2.6 Java Beans (JB) y Enterprise Java Beans (EJB)

Son tecnologías de tipo servlet pero que estan especializadas principalmente en mantener enlaces

constantes a bases de datos de cualquier marca (access, oracle, mysql, etc), esto permite que una serie

de varios programas o aplicaciones a la vez estén interactuando con el mismo java bean y por

consiguiente con la base de datos.

3. DESARROLLO EN LA WEB

Como vimos en el punto anterior, existen muchos tipos de aplicaciones que se pueden realizar en Java.

Para realizar un desarrollo WEB, podemos hacer uso de alguno de estos tipos de aplicaciones como

Servlets (Ver 3.3), JSP (Ver 3.4), JavaScript (Ver 3.5) y algunas veces los Applets (Ver 3.2) para

efectos de graficación o para labores livianas que son mucho más eficientes realizarlas en éste tipo de

aplicaciones Java.

La recomendación es, no usar Aplicaciones de escritorio (Ver 3.1) por que consumen mucho recurso

de máquina, lo que las hace muy lentas. Hoy en día los desarrollos WEB además de ser más rápidos,

es menos costoso su mantenimiento.

Por lo anteriormente dicho, nosotros realizaremos un desarrollo WEB, donde se apliquen los conceptos

de los tipos de aplicaciones de una manera fácil y práctica.

La siguiente gráfica nos muestra donde se ejecutan los tipos de aplicaciones:

15

4. JAVASCRIPT

JavaScript, al igual que Java o VRML, es una de las múltiples maneras que han surgido para extender

las capacidades del lenguaje HTML. Al ser la más sencilla, es por el momento la más extendida. Antes

que nada conviene aclarar un par de cosas:

1. JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje script u

orientado a documento, como pueden ser los lenguajes de macros que tienen muchos

procesadores de texto. Nunca podrás hacer un programa con JavaScript, tan sólo podrás mejorar

tu página Web con algunas cosas sencillas (revisión de formularios, efectos en la barra de

estado, etc...) y, ahora, no tan sencillas (animaciones usando HTML dinámico, por ejemplo).

2. JavaScript y Java son dos cosas distintas. Principalmente porque Java sí que es un lenguaje de

programación completo. Lo único que comparten es la misma sintaxis.

4.1 Primeros pasos

Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos

muestre el ya famoso mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje.

El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.

HolaMundo.html

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function HolaMundo() {

alert("¡Hola, mundo!");

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"

onClick="HolaMundo()">

</FORM>

</BODY>

</HTML>

4.2 Operadores aritméticos

JavaScript dispone de los operadores aritméticos clásicos y algún que otro más:

Descripción Símbolo Expresión de ejemplo Resultado del ejemplo

Multiplicación * 2*4 8

División / 5/2 2.5

Resto de una división entera % 5 % 2 1

Suma + 2+2 4

Resta - 7-2 5

Incremento ++ ++2 3

Decremento -- --2 1

Menos unario - -(2+4) -6

16

4.3 Operadores de comparación

Podemos usar los siguientes:


Igualdad == 2 == '2' Verdadero

Desigualdad != 2 != 2 Falso

Igualdad estricta === 2 === '2' Falso

Desigualdad estricta !== 2 !== 2 Falso

Menor que < 2 < 2 Falso

Mayor que > 3 > 2 Verdadero

Menor o igual que <= 2 <= 2 Verdadero

Mayor o igual que >= 1 >= 2 Falso

4.4 Operadores lógicos

Estos operadores permiten realizar expresiones lógicas complejas:


Negación ! !(2 = 2) Falso

Y && (2 = 2) && (2 >= 0) Verdadero

Ó || (2 = 2) || (2 <> 2) Verdadero

4.5 Funciones predefinidas

JavaScript dispone de las siguientes funciones predefinidas:

eval(cadena)

Ejecuta la expresión o sentencia contenida en la cadena que recibe como parámetro.

mensaje = 'Hola';

eval("alert('" + mensaje + "');");

Este ejemplo nos muestra una ventana con un saludo.

parseInt(cadena [, base])

Convierte en un número entero la cadena que recibe, asumiendo que está en la base indicada. Si

este parámetro falta, se asume que está en base 10. Si fracasa en la conversión devolverá el

valor NaN.

parseInt("3453");

Devuelve el número 3453.

parseFloat(cadena)

Convierte en un número real la cadena que recibe, devolviendo NaN si fracasa en el intento. parseFloat("3.12.3");

Este ejemplo devuelve NaN ya que la cadena no contiene un número real válido.

isNaN(valor)

Devuelve true sólo si el argumento es NaN.

isFinite(numero)

Devuelve true si el número es un número válido y no es infinito.

Number(referencia)

String(referencia)

Convierten a número (o referencia) el objeto que se les pase como argumento.

17

4.6 Eventos

Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute

sólo cuando suceda algo extraño deberemos llamarla desde un controlador de eventos. Estos

controladores se asocian a un elemento HTML y se incluyen así:

<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">

Lista de eventos

Aquí tienes una pequeña guía de eventos definidos en JavaScript. Para más información, lee la guía de

Netscape.

Evento Descripción Elementos que lo admiten

onLoad Terminar de cargarse una página <BODY...>

<FRAMESET...>

onUnLoad Salir de una página (descargarla) <BODY...><FRAMESET...>

onMouseOver Pasar el ratón por encima <A HREF..>

<AREA...>

onMouseOut Que el ratón deje de estar encima <A HREF..>

<AREA...>

onSubmit Enviar un formulario <FORM...>

onClick Pulsar un elemento <INPUT TYPE="button, checkbox, link,

radio"...>

onBlur Perder el cursor <INPUT TYPE="text"...>

<TEXTAREA...>

onChange Cambiar de contenido o perder el

cursor

<INPUT TYPE="text"...>

<TEXTAREA...>

onFocus Conseguir el cursor <INPUT TYPE="text"...>

<TEXTAREA...>

onSelect Seleccionar texto <INPUT TYPE="text"...>

<TEXTAREA...>

Como ejemplo, vamos a hacer que una ventana aparezca automáticamente en cuanto pasemos un cursor

por encima de un elemento <A> (e impidiendo, de paso, que quien esté viendo la página pueda hacer

uso del mismo).

eventos.html

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HEAD>

<BODY>

<A HREF="eventos.html" onMouseOver="Alarma()">

18

Pasa por aquí encima

</A>

</BODY>

</HTML>

5. HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web.

Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y

que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos,

etc., por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en

los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los

usuarios las páginas web resultantes del código interpretado.

Mi primera página

El código

primera.html

<codigo><HTML>

<HEAD>

<TITLE>Mi primera pagina</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Mi Primera pagina</H1></CENTER>

<HR>

<P>Esta es mi primera pagina (chispas). Por el momento no se que tendrá, pero dentro de poco

pondré aquí muchas cosas interesantes.

</BODY>

</HTML>

La explicación

Lo primero que conviene explicar es en qué consisten todos esos símbolos de mayor y menor que están

distribuidos por ahí. El lenguaje HTML se basa en la sintaxis SGML (toma siglas). Esto quiere decir

que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas de esta manera:

<ETIQUETA parámetros> ... </ETIQUETA>

Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el código habréis visto un par de

ejemplo que ya explicaré más adelante. Pero como lo primero que debemos indicar es que el texto que

estamos componiendo es un documento HTML pues lo indicamos así:

<HTML> ... </HTML>

Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la

primera estará la página en sí, mientras que en la segunda incluiremos algunas cosas que no se ven al

principio pero que pueden llegar a ser muy importantes. Lo primero que hay que incluir en el código es

la cabecera. La escribimos:

<HEAD>

19

<TITLE>Mi primera pagina</TITLE>

</HEAD>

Dentro de la cabecera sólo hay otra etiqueta. Es la única imprescindible: el título de la página. Es lo que

veremos como título de la ventana en los navegadores que lo permitan. Es como se conocerá nuestra

página en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios. Por tanto,

parece importante pensarnos bien como llamarla.

El cuerpo del documento

Ahora vamos a indicar el contenido. Lo primero será indicar que estamos en el cuerpo del documento:

<BODY> ... </BODY>

Luego pondremos el título algo recalcado:

<CENTER><H1> ... </H1></CENTER>

Con esto colocaremos el texto centrado (<CENTER>) y en formato <H1> (cabecera 1) que nos asegura

que aumentará el tamaño del tipo de letra lo suficiente como para que se vea bastante resaltado. Luego

separamos ese título que le hemos puesto a la página del texto por medio de una línea horizontal:

<HR>

La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varían los atributos

de un texto, sino que insertan un elemento. Por ejemplo, para indicarle que queremos separar el texto

de la línea horizontal con un espacio vertical correspondiente a un párrafo nuevo le decimos:

<P>Esta es mi primera pagina (chispas). Por el momento no sé que tendrá, pero dentro de poco pondré

aquí muchas cosas interesantes.

CLASE # 5

6. PROGRAMACION CON BASES DE DATOS

Para programar bases de datos en Internet, se debe realizar una mezcla de varios lenguajes de

programación, debido a que el diseño se realiza en html, las validaciones de la entrada de datos en

javascript, la conexión con la base de datos es jdbc, el manejo de los datos se realiza con jdbc,sql y

java. Ademas se necesita la base de datos, que se puede diseñar el el manejador de bases de datos que

usted o la empresa prefiera. En resumen, toda esta mezcla de lenguajes de programación se conoce

como: ”jsp”(JAVA SERVER PAGE). Adicionalmente para poder ensayar todo esto se requiere de un

servidor web, para ello utilizaremos una version gratis de apache tomcat.

Lo primero que se requiere es realizar un diseño de un formulario utilizando html, no importando el

programa gestor de html, que se tenga, entre los cuales se tienen: Frontpage, Dreamweaver, Jcreator,

Textpad o un editor de texto tan sencillo como el bloc de notas.

Adicionalmente se debe utilizar javascript para realizar las validaciones de campos necesarias, para

esto se sugiere, bajar de Internet un buen manual de javascript, es muy fácil de aprender porque es

código java.

6.1 primer programa

Inicialmente debemos crear una base de datos en acces, con una tabla llamada “Usuarios”, en una

carpeta con el nombre que usted desee, tenga en cuenta que lo normal es que reciba el nombre de la

aplicación que se esta desarrollando. Pare el ejemplo se trata de un sistema de matriculas para una

academia de computadores.

20

La tabla debe tener dos campos

Usuario Texto 20

Clave Texto 10

Luego crearemos un programa que permita verificar si el usuario tiene acceso al sistema, para lo cual se

diseñara una pantalla html, similar a la siguiente:

El código html necesario para lograr este diseño es el siguiente:

<html>

<head>

<h1>

<b>Bienvenido a la aplicación </b>de Matriculas</h1>

<title> Acceso al Sistema </title>

<script language="javascript">

function validar(){

if (document.formulario.usuario.value==""){

alert('No digito el nombre del Usuario');

}else if (document.formulario.clave.value==""){

alert('No digito la clave de Acceso');

}else if (document.formulario.usuario.value.length<5){

21

alert('El tamaño minimo para el usuario es de mas de 5 caracteres');

}else if (document.formulario.clave.value.length<5){

alert('La clave debe ser mayor a 5 caracteres');

}else if (isNaN(parseInt(document.formulario.usuario.value))==false){

//parseInt convierte caracteres a letras si es caracteres devuelve NaN

alert('El usuario debe ser alfanumerico');

}else if (isNaN(parseInt(document.formulario.clave.value))==false){

alert('La clave debe ser alfanumerico');

}else{

document.formulario.submit();

}

}

</script>

</head>

<body background="fondoasysverde.jpg"></h1>

<form action="verificar.jsp" method="post" name="formulario">

<table border="1" width="70%" >

<tr>

<td width="30%"><b>Usuario</b></td>

<td width="70%"> <p><input type="text" name="usuario" size="20"> </p></td>

</tr>

<tr>

<td width="30%"><b>Clave</b></td>

<td width="70%">

<p><input type="password" name="clave" size="10"></p>

</td>

</tr>

</table>

</p>

<input type="button" onclick="javascript:validar()" value="Verificar" name="ingresar" >

<input type="reset" value="Borrar" name="borrar">

</form>

</body>

</html>

La instrucción “ <script language="javascript"> ” indica que el código a continuación es javascript,

donde se tienen una funcion llamada validar, que verifica que el nombre del usuario sea ingresado,

como también la contraseña. Además verifica que sea texto superior a cinco caracteres, después de

todas estas condiciones pasa a otra pagina que se encarga de verificar si dichos datos pertenecen a un

usuario existente.

La ejecución de la pagina se da con la instrucción “document.formulario.submit(); ” esta orden envía

el control a la pagina indicada en la linea “<form action="verificar.jsp" method="post"

name="formulario">”. En esta línea se indica que es un formulario y el método de envió de

parámetros es post (no muestra los parámetros enviados en la dirección de la pagina)

22

Con ayuda de un manual sencillo de javascript y los conocimientos de java adquiridos en este

documento, le será fácil entender el lenguaje de verificación. El demás código es html.

El siguiente código es un poco más complejo y requiere de toda su atención para comprenderlo. Es una

pantalla llamada “verificar.jsp”

<%@ page import="java.sql.*"%>

<%

try{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); //usa la conexion

}catch(Exception e){

System.out.println(e.toString());

}

Connection c=null;//base de datos

try{

c=DriverManager.getConnection("jdbc:odbc:Matriculas","",""); //"usuario","clave"

} catch(Exception e){


}

%>

<html>

<body>

<% try{

String usu;

usu=request.getParameter("usuario");

String cla;

cla=request.getParameter("clave");

PreparedStatement instruccion=c.prepareStatement("Select usuario,clave from usuarios where

usuario=? and clave=?");

instruccion.setString(1,usu);

instruccion.setString(2,cla);

ResultSet resultado=instruccion.executeQuery();

if (resultado.next())

response.sendRedirect("menu.jsp");

else{

response.sendRedirect("inicio.jsp?a=pepe");

resultado.close();

instruccion.close();

c.close();}



}

%>

</body>

</html>

23

Como puede notar esta página no tiene ningun diseño en pantalla, ya que esta realiza un proceso

interno de verificación, y el usuario no tiene de la necesidad de ver nada en pantalla. En esta pantalla

se maneja jdbc, java y sql. Con el java y el sql ya estamos familiarizados, pero jdbc?

6.2 JDBC.

INTRODUCCION

Java Database Connectivity (JDBC) es una interfase de acceso a bases de datos estándar SQL que

proporciona un acceso uniforme a una gran variedad de bases de datos relacionales. El paquete actual

de JDK incluye JDBC y el puente JDBC-ODBC. Estos paquetes son para su uso con JDK 1.0 o

superior

¿Qué es JDBC?

JDBC es el API para la ejecución de sentencias SQL, conocido como “Java Database Connectivity”).

Consiste en un conjunto de clases e interfases escritas en el lenguaje de programación Java. JDBC

suministra un API estándar para los desarrolladores y hace posible escribir aplicaciones de base de

datos usando un API puro Java.

Usando JDBC es fácil enviar sentencias SQL virtualmente a cualquier sistema de base de datos. En

otras palabras, con el API JDBC, no es necesario escribir un programa que acceda a una base de datos

Sybase, otro para acceder a Oracle y otro para acceder a Informix. Un único programa escrito usando el

API JDBC y el programa será capaz de enviar sentencias SQL a la base de datos apropiada. Y, con una

aplicación escrita en el lenguaje de programación Java, tampoco es necesario escribir diferentes

aplicaciones para ejecutar en diferentes plataformas. La combinación de Java y JDBC permite al

programador escribir una sola vez y ejecutarlo en cualquier entorno.

1 ¿Qué hace JDBC?

Simplemente JDBC hace posible estas tres cosas:

Establece una conexión con la base de datos.

Envía sentencias SQL

Procesa los resultados.


<%

try{




}


try{

c=DriverManager.getConnection("jdbc:odbc:Matriculas","",""); //"usuario","clave"



}

%>

Esta fracción de código de nuestro programa realiza la conexión con ODBC. Debido a que Windows

pertenece a Microsoft y por intereses meramente económicos, esta empresa no creo un componente

24

para hacer la conexión con java. Por lo tanto para que todo esto funcione se debe realizar una

conexión ODBC para conectarnos con la base de datos, en este caso con Access. Este proceso se

realiza así:

1. En el panel de control se utiliza la

opción herramientas administrativas

(en Windows xp)

2. Se selecciona Orígenes de datos

(ODBC), donde podemos crear la

conexión Matricula

3. Para ello se utiliza el botón agregar,

donde se debe indicar lo siguiente:

Como se puede observar se indica un

nombre para el origen de datos, Una

descripción y con el botón seleccionar se

indica la ruta donde esta almacenada la

base de datos. Y listo, por ahora.

Explicación más profunda del componente

.JdbcOdbcDriver

JDBC frente a ODBC y otros API’s

En este punto, el ODBC de Microsoft (Open Database Connectvity), es probablemente el API más

extendido para el acceso a bases de datos relaciónales. Ofrece la posibilidad de conectar a la mayoría

de las bases de datos en casi todas las plataformas. ¿Por qué no usar, entonces, ODBC, desde Java?.

La respuesta es que se puede usar ODBC desde Java, pero es preferible hacerlo con la ayuda de JDBC

mediante el puente JDBC-ODBC. La pregunta es ahora ¿por qué necesito JDBC?. Hay varias

respuestas a estas preguntas:

25

1.- ODBC no es apropiado para su uso directo con Java porque usa una interface C. Las llamadas desde

Java a código nativo C tienen un número de inconvenientes en la seguridad, la implementación, la

robustez y en la portabilidad automática de las aplicaciones.

2.- Una traducción literal del API C de ODBC en el API Java podría no ser deseable. Por ejemplo, Java

no tiene punteros, y ODBC hace un uso copioso de ellos, incluyendo el notoriamente propenso a

errores “void * “. Se puede pensar en JDBC como un ODBC traducido a una interfase orientada a

objeto que es el natural para programadores Java.

3. ODBC es difícil de aprender. Mezcla características simples y avanzadas juntas, y sus opciones son

complejas para „querys‟ simples. JDBC por otro lado, ha sido diseñado para mantener las cosas

sencillas mientras que permite las características avanzadas cuando éstas son necesarias.

4. Un API Java como JDBC es necesario en orden a permitir una solución Java “pura”. Cuando se usa

ODBC, el gestor de drivers de ODBC y los drivers deben instalarse manualmente en cada máquina

cliente. Como el driver JDBC esta completamente escrito en Java, el código JDBC es automáticamente

instalable, portable y seguro en todas las plataformas Java.

En resumen, el API JDBC es el interfase natural de Java para las abstracciones y conceptos básicos de

SQL. JDBC retiene las características básicas de diseño de ODBC; de hecho, ambos interfaces están

basados en el X/Open SQL CLI (Call Level Interface).

Más recientemente Microsoft ha introducido nuevas API detrás de ODBC. RDO, ADO y OLE DB.

Estos diseños se mueven en la misma dirección que JDBC en muchas maneras, puesto que se les da

una orientación a objeto basándose en clases que se implementan sobre ODBC.

Connection Un objeto Connection representa una conexión con una base de datos. Una sesión de conexión incluye

las sentencias SQL que se ejecutan y los resultados que son devueltos después de la conexión. Una

única aplicación puede tener una o más conexiones con una única base de datos, o puede tener varias

conexiones con varias bases de datos diferentes.

Apertura de una conexión

La forma estándar de establecer una conexión a la base de datos es mediante la llamada al método

DriverManager.getConnection. Este método toma una cadena que contiene una URL (Uniform

Resource locutor – información para localizar un recurso en internet). La clase DriverManager,

referida como la capa de gestión JDBC, intenta localizar un driver que pueda conectar con la base de

datos representada por la URL. La clase DriverManager mantiene una lista de clases Driver registradas

y cuando se llama al método getConnection, se chequea con cada driver de la lista hasta que encuentra

uno que pueda conectar con la base de datos especificada en la URL. El método connect de Driver usa

esta URL para establecer la conexión.

Un usuario puede evitar la capa de gestión de JDBC y llamar a los métodos de Driver directamente.

Esto puede ser útil en el caso raro que dos drivers puedan conectar con la base de datos y el usuario

quiera seleccionar uno explícitamente. Normalmente, de cualquier modo, es mucho más fácil dejar que

la clase DriverManager maneje la apertura de la conexión.

26

Uso general de URL’s

Dado que URL‟s causan a menudo cierta confusión, daremos primero una breve explicación de URL

en general y luego entraremos en una discusión sobre URL‟s de JDBC.

Una URL (Uniform Resource Locator) da información para localizar un recurso en Internet. Puede

pensarse en ella como una dirección.

La primera parte de una URL especifica el protocolo usado para acceder a la información y va siempre

seguida por dos puntos. Algunos protocolos comunes son ftp, que especifica “file transfer protocol” y

http que especifica “hypertext transfer protocol”. Si el protocolo es “file” indica que el recurso está en

un sistema de ficheros local mejor que en Internet: veamos unos ejemplos:

ftp://javasoft.com/docs/JDK-1_apidocs.zip

http://java.sun.com/products/jdk/CurrentRelease

file:/home/haroldw/docs/books/tutorial/summary.html

El resto de la URL, todo después de los dos puntos, da información sobre donde se encuentra la fuente

de los datos. Si el protocolo es file, el resto de la URL es el path al fichero. Para los protocolos ftp y

http, el resto de la URL identifica el host y puede opcionalmente dar un path más específico al sitio.

Por ejemplo, el siguiente es la URL para la home page de JavaSoft. Esta URL identifica solo al host:

http://java.sun.com

Pero un momento, estamos hablando de Internet, no se puede pasar por alto que para que todo esto

funcione, las páginas deben estar en un servidor web. Como es muy costoso adquirir este servicio, solo

para probar nuestros programas. Debemos bajar de Internet un programa que simule en nuestro pc un

servidor web. Existen muchos, pero el que utilizamos es el “apache tomcat”, por ser una versión

reducida de uno de los mas usados y mejores servidores web.

Para poder poner a funcionar todo esto, primero se debe poner a funcionar el tomcat, ejecutando el

programa Start tomcat instalado en su computador al montar el apache tomcat.

Retomando la explicación del programa de verificación:

<html>

<body>

<% try{

String usu;


String cla;



usuario=? and clave=?");




if (resultado.next())

response.sendRedirect("menu.jsp");

else{

response.sendRedirect("inicio.jsp?a=pepe");

27

resultado.close();


c.close();}



}

%>

</body>

</html>

Esta sección del código se encarga de enviar la sentencia sql a la base de datos y verificar si el usuario

existe o no. Para ello se arma la instrucción sql:


Usuario=? and clave=?");. Si nos fijamos esta instrucción tiene dos parámetros “usuario=? and

clave=?” Los cuales son enviados a la consulta con las instrucciones:



Siendo “usu y cla”, variables de java inicializadas en los parámetros enviados desde la pagina

“iicio.jsp”:

String usu;


String cla;


NOTA: Toda instrucción de java ejecutada en html debe ir entre los símbolos <% instrucción java

%>, con esto basta para que html entienda que esto es java.

Para ejecutar el programa se debe dar la siguiente orden, en el explorador de internet:

http://localhost:8080/Datos/Acceso.jsp

Nota: Los programas se deben grabar en la siguiente ruta:

C:\Program Files\Apache Software Foundation\Tomcat 5.0\webapps\ROOT,

La base de datos se puede grabar en culquier ruta, porque al realizer la coneccion con la base de datos

ODBC, se indico la ruta donde esta la base de datos, pero lo ideal es que la base de datos este en la

misma ruta donde estan los programas.

CLASE # 6

6.3 ACTUALIZACION DE DATOS

El proceso de actualización de datos, se denomina, como los procesos de insertar, borrar, y eliminar

datos de una tabla. Primero se vera el proceso de insertar.

http://localhost:8080/Datos/Acceso.jsp

28

6.3.1 INGRESO DE DATOS

Para realizar este proceso se utiliza

la instrucción de SQL conocida

como INSERT. Para ello debemos

realizar el siguiente formulario JSP.

Como el formulario es muy extenso,

la demás información necesaria se

puede ver en el código de esta

pagina, la cual es la siguiente:

<html>

<head>

<title>Datos del alumno</title>


function graba(){

if (document.formulario.codigo.value==""){

alert('No digito el codigo del estudiante');

}else if (document.formulario.nombre.value==""){

alert('No digito el nombre del estudiante');

}else if (document.formulario.apellido.value==""){

alert('No digito el apellido del estudiante');

}else if (document.formulario.direccion.value==""){

alert('No digito la direccion del estudiante');

}else if (document.formulario.telefono.value==""){

alert('No digito el telefono del estudiante');

}else if (isNaN(parseInt(document.formulario.codigo.value))==true){

alert('La clave debe ser numerica');

}else{


}

}

function borrar(){

document.formulario.codigo.value="";

document.formulario.nombre.value="";

document.formulario.apellido.value="";

document.formulario.fechanacimiento.value="";

document.formulario.direccion.value="";

document.formulario.telefono.value="";

document.formulario.nombrecolegio.value="";

document.formulario.titulocolegio.value="";

document.formulario.fechaterminacion.value="";

document.formulario.nombreinstitucion.value="";

29

document.formulario.titulootros.value="";

document.formulario.anosestudio.value="";

document.formulario.fechaotros.value="";

document.formulario.nombredeudor.value="";

document.formulario.ceduladeudor.value="";

document.formulario.direcciondeudor.value="";

document.formulario.telefonodeudor.value="";

document.formulario.empresadeudor.value="";

document.formulario.telefonoempresadeudor.value="";

document.formulario.salariodeudor.value="";

document.formulario.nombrecodeudor.value="";

document.formulario.cedulacodeudor.value="";

document.formulario.telefonocodeudor.value="";

document.formulario.direccioncodeudor.value="";

document.formulario.empresacodeudor.value="";

}

function errores(){

<%

if (request.getParameter("a").equals("error")){

%>alert("Ya existe alumno");<%

}else{

if (request.getParameter("a").equals("eliminado")){

%>alert("Alumno eliminado");<%

}else{

if (request.getParameter("a").equals("modificado")){

%>alert("Alumno modificado");<%

}else{

if (request.getParameter("a").equals("consultado")){

%>alert("Alumno no existe");<%

}

}

}

}

%>

}

</script>

</head>

<body background="fondoasysverde.jpg" onLoad=errores();>

<form action="grabaficha.jsp" method="post" name="formulario">

<b>1. Datos Personales</b>

<a href="fichacodigo.jsp">Consultar</a>

<a href="matricula.jsp">Anterior</a>

<a href="menu.jsp">inicio</a></p>

<p>Codigo: <input type="text" name="codigo" size="8"></p>

<p>Nombre: <input type="text" name="nombre" size="20">

<input type="text" name="apellido" size="20">

Fecha de Nacimiento:<input type="text" name="fechanacimiento" size="8"></p>

30

<p>Sexo: Masculino<input type="radio" value="Masculino" checked name="sexo">

Femenino<input type="radio" name="sexo" value="Femenino"></p>

<p>Direccion: <input type="text" name="direccion" size="30">

Telefono<input type="text" name="telefono" size="20"></p>

<p align="left"><b>2. Estudios Realizados</b></p>

<hr>

<p>Nombre del colegio: <input type="text" name="nombrecolegio" size="35"> </p>

<p>Titulo obtenido: <input type="text" name="titulocolegio" size="35">

Fecha de terminacion: <input type="text" name="fechaterminacion" size="8"> </p>

<p><b>3. Otros estudios</b></p>

<p>Nombre Institucion: <input type="text" name="nombreinstitucion" size="35"></p>

<p>Titulo obtenido :<input type="text" name="titulootros" size="35">

Años de estudio <input type="text" name="anosestudio" size="20"> </p>

<p>Fecha de terminacion<input type="text" name="fechaotros" size="8"></p>

<hr>

<p><b>4. Datos del Deudor</b></p>

<p>Nombre: <input type="text" name="nombredeudor" size="40"> Cedula:

<input type="text" name="ceduladeudor" size="25"></p>

<p>Direccion: <input type="text" name="direcciondeudor" size="30">

Telefono: <input type="text" name="telefonodeudor" size="20"></p>

<p>Empresa donde labora:<input type="text" name="empresadeudor" size="25">

Telefono de la empresa<input type="text" name="telefonoempresadeudor" size="20"></p>

<p>Salario: <input type="text" name="salariodeudor" size="10"> </p>

<p><b>5. Datos del codeudor</b></p>

<p>Nombre: <input type="text" name="nombrecodeudor" size="40">

Cedula: <input type="text" name="cedulacodeudor" size="25"> </p>

<p>Telefono: <input type="text" name="telefonocodeudor" size="20"> Direccion:

<input type="text" name="direccioncodeudor" size="35"></p>

<p> Empresa: <input type="text" name="empresacodeudor" size="25"></p>

<p> <img border="0" src="botones/guarda1.jpg" width="36" height="38" onclick=

"javascript:graba()">

</a><img border="0" src="botones/nuevo1.jpg" width="36" height="38" onclick=

"javascript:borrar()">

</body>

</html>

Este código se ejecuta si al invocar el formulario de grabar, este retorna un error porque el registro que

intentamos almacenar, ya existe.

Esta función se ejecuta por medio de la siguiente línea de código:


Lo demás son validaciones, ya vistas, un botón de borrar y lo otro es puro código HTML, al cual ya

debemos estar enseñados.

31

A continuación se tiene el código que permite grabar los datos de un alumno, vale recordar que se debe

hacer en un formulario nuevo, Este formulario se ejecuta desde el formulario ficha, gracias a la línea

de código:

form action="grabaficha.jsp" method="post" name="formulario">

El código de la ventana es el siguiente, no existe diseño, ya que este formulario simplemente graba y

retorna un mensaje de error si, es necesario.


<%

try{




}


try{

c=DriverManager.getConnection("jdbc:odbc:matricula","",""); //"usuario","clave"



}

%>

<html>

<head>

</head>

<body>

<%

try{

PreparedStatement consulta=c.prepareStatement("Select codigo from ficha where codigo=?");

consulta.setString(1,request.getParameter("codigo"));

ResultSet resultado=consulta.executeQuery();

if (!(resultado.next())){

PreparedStatement instruccion=c.prepareStatement("insert into ficha(codigo, nombre, apellido,

fechanacimiento, sexo, direccion, telefono, nombrecolegio, titulocolegio, fechaterminacion,

nombreinstitucion, titulootros, anosestudio, fechaotros, nombredeudor, ceduladeudor, direcciondeudor,

telefonodeudor, empresadeudor, telefonoempresadeudor, salariodeudor, nomrecodeudor,

cedulacodeudor, telefonocodeudor, direccioncodeudor, empresacodeudor) values

(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");

instruccion.setString(1,request.getParameter("codigo"));

instruccion.setString(2,request.getParameter("nombre"));

instruccion.setString(3,request.getParameter("apellido"));

instruccion.setString(4,request.getParameter("fechanacimiento"));

instruccion.setString(5,request.getParameter("sexo"));

instruccion.setString(6,request.getParameter("direccion"));

instruccion.setString(7,request.getParameter("telefono"));

instruccion.setString(8,request.getParameter("nombrecolegio"));

32

instruccion.setString(9,request.getParameter("titulocolegio"));

instruccion.setString(10,request.getParameter("fechaterminacion"));

instruccion.setString(11,request.getParameter("nombreinstitucion"));

instruccion.setString(12,request.getParameter("titulootros"));

instruccion.setString(13,request.getParameter("anosestudio"));

instruccion.setString(14,request.getParameter("fechaotros"));

instruccion.setString(15,request.getParameter("nombredeudor"));

instruccion.setString(16,request.getParameter("ceduladeudor"));

instruccion.setString(17,request.getParameter("direcciondeudor"));

instruccion.setString(18,request.getParameter("telefonodeudor"));

instruccion.setString(19,request.getParameter("empresadeudor"));

instruccion.setString(20,request.getParameter("telefonoempresadeudor"));

instruccion.setString(21,request.getParameter("salariodeudor"));

instruccion.setString(22,request.getParameter("nombrecodeudor"));

instruccion.setString(23,request.getParameter("cedulacodeudor"));

instruccion.setString(24,request.getParameter("telefonocodeudor"));

instruccion.setString(25,request.getParameter("direccioncodeudor"));

instruccion.setString(26,request.getParameter("empresacodeudor"));

instruccion.executeUpdate();


c.close();

response.sendRedirect("matricula.jsp");

}else{

consulta.close();

c.close();

response.sendRedirect("ficha.jsp?a=error");

}



}

%>

</body>

</html>

Al comienzo de este código, esta la conexión con la base de datos, y dentro del <BODY> del

formulario, se tiene la instrucción SQL, que permite almacenar el registro en la tabla.

"insert into ficha(codigo, nombre, apellido, fechanacimiento, sexo, direccion, telefono, nombrecolegio,

titulocolegio, fechaterminacion, nombreinstitucion, titulootros, anosestudio, fechaotros, nombredeudor,

ceduladeudor, direcciondeudor, telefonodeudor, empresadeudor, telefonoempresadeudor,

salariodeudor, nomrecodeudor, cedulacodeudor, telefonocodeudor, direccioncodeudor,

empresacodeudor) values (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)"

Como se puede ver en esta instrucción se indica el nombre de la tabla en la que se desea grabar el

registro, se indican los campos a almacenar y los valores a almacenar con ayuda del símbolo de “?” y

la instrucción:

33


CLASE #7

QUIZ

CLASE #8

6.3.2 CONSULTAR UN REGISTRO

Como podemos observar el formulario tiene un vinvulo a consultar, este nos ejecuta un formulario

llamado “fichacodigo.jsp”, el cual pide el código del alumno a consultar, asi:

Esta pantalla tiene el siguiente codigo:

<html>

<head>

<title>Datos del Estudiante</title>


function consu(){


alert('No digito el codigo del grupo');



}else{


}

}

</script>

</head>

<body background="fondoasysverde.jpg">

<form action="fichaconsultar.jsp" method="post" name="formulario">

<p><b>Alumno a Buscar</b> </p>

<p>Código:

<input type="text" name="codigo" size="8">

<img border="0" src="botones/consulta.jpg" width="26" height="24" onclick="javascript:consu()">

</p>

</body>

</html>

Como se puede ver este formulario ejecuta la pagina “fichaconsultar”, con un parámetro que es el

codigo del alumno a consultar. Esta nueva página mostrara los datos del estudiante, cuyo código JSP

es el siguiente:

34

<%

try{




}


try{

c=DriverManager.getConnection("jdbc:odbc:matricula","",""); //"usuario","clave"



}

%>

<html>

<head>

<title>Datos Personales</title>


function elimina(){

if (confirm("Eliminar registro ")==true){


}else{

alert('No se elimino');

}

}

</script>

</head>

<body background="fondoasysverde.jpg"><form action="fichaborrar.jsp" method="post"

name="formulario">

<%

if (request.getParameter("codigo")!=null){

try{

PreparedStatement instruccion=c.prepareStatement("Select * from ficha where codigo=?");



if (resultado.next()){

%>

<b>Datos del Alumno </b> <img border="0" src="botones/borra.jpg" width="28" height="26"

onclick="javascript:elimina()" ></a>

<p>Código: <input type="text" name="codigo" size="8" value="<%=

resultado.getString("codigo")%>"></p>

<p>Nombre: <input type="text" name="nombre" size="20" value="<%=

resultado.getString("nombre")%>">

Apellido:<input type="text" name="apellido" size="20" value="<%=

resultado.getString("apellido")%>"></p>

<%

35


c.close();

}else{


c.close();

%>

No existe el alumno

<%

}



}

}

%>

<p><a href="ficha.jsp?a=no">Anterior</a> <a href="menu.jsp">Inicio</a>

</body>

</html>

En este código se puede observar como muestra los datos del estudiante, si este no existe muestra el

respectivo mensaje. Además nos permite eliminar el estudiante consultado, ejecutando la pagina

“fichaborrar.jsp”, cuyo código se ve a continuación, antes de ejecutar la pagina de eliminar verifia si

realmente desea borrar el registro


<%

try{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");



}


try{

c=DriverManager.getConnection("jdbc:odbc:matricula","","");



}

%>

<html>

<head>

</head>

<body>

<%

try{

PreparedStatement instruccion=c.prepareStatement("delete from ficha where codigo=?");


36



c.close();

response.sendRedirect("ficha.jsp?a=eliminado");

}

catch(Exception e){


}

%>

</body>

</html>

Queda por realizar la opción de modificar. Lógica: En la pagina de consultar realicen un botón de

modificar y consulte en SQL como se realiza esta operación.

CLASE #9

QUIZ

CLASE #10

6.3.3 LISTAS DESPLEGABLES

Una lista desplegable es simplemente una

lista que visualiza información almacenada

en otra tabla diferente a la cual se esta

usando en dicho formulario.

Para ver el funcionamiento de esto se tiene

la siguiente pantalla:

Para realizar este formulario se debe crear

una tabla llamada matricula, con los

campos: código del alumno, fecha de

matricula, programa de estudio, horario,

grupo y periodo de ingreso y estudio.

Además, debe tener las tablas de programa, horario y grupo de donde se sacara la información para las

listas desplegables.

El código de este formulario es el siguiente:


<%

try{




}

Connection c=null;

try{

37




}

%>

<html>

<head>

<title>Programas de estudio</title>


function asignar(){

document.formulario.programa.value=document.formulario.prognombre.options[document.formulario.

prognombre.selectedIndex].value

}

function asignarhorario(){

document.formulario.horario.value=document.formulario.horanombre.options[document.formulario.ho

ranombre.selectedIndex].value

}

function asignargrupos(){

document.formulario.grupo.value=document.formulario.grupnombre.options[document.formulario.gru

pnombre.selectedIndex].value

}

function graba(){


alert('No digito el codigo del estudiante');

}else if (document.formulario.fecha.value==""){

alert('No digito la fecha de matricula');

}else if (document.formulario.periodo.value==""){

alert('No digito el periodo de ingreso');

}else if (document.formulario.programa.value==""){

alert('No digito el programa de estudio');

}else if (document.formulario.horario.value==""){

alert('No digito el horario de estudio');

}else if (document.formulario.grupo.value==""){

alert('No digito el grupo de estudio');

}else if (document.formulario.periodoestudio.value==""){

alert('No digito el periodo de estudio');



}else{


}

}

function borrar(){

document.formulario.codigo.value="";

document.formulario.fecha.value="";

document.formulario.periodo.value="";

38

document.formulario.programa.value="";

document.formulario.horario.value="";

document.formulario.grupo.value="";

document.formulario.periodoestudio.value="";

}

function errores(){

<%

if (request.getParameter("a").equals("error")){

%>alert("no existe alumno");<%

}

%>

}

</script>

</head>


<form action="grabarmatri.jsp" method="post" name="formulario">

<%

PreparedStatement instruccion=c.prepareStatement("Select codigo,nombre from programas");


PreparedStatement gruposestu=c.prepareStatement("Select codigo,nombre from grupos");

ResultSet grupos=gruposestu.executeQuery();

PreparedStatement horarioestu=c.prepareStatement("Select codigo,nombre from horario");

ResultSet horario=horarioestu.executeQuery();

%>

<b>Matricula a un programa de Estudio</b>

<a href="menu.jsp">inicio</a>

<a href="matricula.jsp">Anterior</a>

<a href="materiasalumno.jsp?a=no">Materias</a><br></p>

<p>Codigo alumno: <input type="text" name="codigo" size="10"></p>

<p>Fecha matricula : <input type="text" name="fecha" size="10"></p>

<p>Programa de estudio:<input type="text" name="programa" size="3">

<select name=prognombre onclick="javascript:asignar();">

<%

try{

while (resultado.next()){ %>

<option selected value ="<%=resultado.getString("codigo")%>">

<%=resultado.getString("nombre")%>

</option>

<%

}



}

%>

</select></p>

<p>Horario<input type="text" name="horario" size="10">

39

<select name=horanombre onclick="javascript:asignarhorario();">

<%

try{

while (horario.next()){ %>

<option selected value ="<%=horario.getString("codigo")%>"> <%=horario.getString("nombre")%>

</option>

<%

}



}

%>

</select></p>

<p>Grupo: <input type="text" name="grupo" size="10">

<select name=grupnombre onclick="javascript:asignargrupos();">

<%

try{

while (grupos.next()){ %>

<option selected value ="<%=grupos.getString("codigo")%>"> <%=grupos.getString("nombre")%>

</option>

<%

}



}

%>

</select></p>

<p>Periodo de ingreso:<input type="text" name="periodo" size="5">

Periodo de estudio: <input type="text" name="periodoestudio" size="5"></p>

<p> <img border="0" src="botones/guarda1.jpg" width="36" height="38"

onclick="javascript:graba()">

</a><img border="0" src="botones/nuevo1.jpg" width="36" height="38"

onclick="javascript:borrar()">

</form>

</body>

</html>

Y el código del formulario grabarmatri.jsp, es el siguiente:

<%

try{

PreparedStatement programa=c.prepareStatement("Select codigo from programas where codigo=?");

programa.setString(1,request.getParameter("programa"));

ResultSet resultado=programa.executeQuery();

if !(resultado.next()){

out.println("No existe");

40


c.close();

response.sendRedirect("programas.jsp?a=error");

}else{

PreparedStatement instruccion=c.prepareStatement("Select codigo from ficha where codigo=?");




PreparedStatement inserta=c.prepareStatement("insert into matricula (codigo, fecha, periodo,

programa, horario, grupo, periodoestudio) values (?,?,?,?,?,?,?)");

inserta.setString(1,request.getParameter("codigo"));

inserta.setString(2,request.getParameter("fecha"));

inserta.setString(3,request.getParameter("periodo"));

inserta.setString(4,request.getParameter("programa"));

inserta.setString(5,request.getParameter("horario"));

inserta.setString(6,request.getParameter("grupo"));

inserta.setString(7,request.getParameter("periodoestudio"));

inserta.executeUpdate();

inserta.close();

c.close();

response.sendRedirect("Menu.jsp");

}else{


c.close();

response.sendRedirect("matriculaalumno.jsp?a=error");

}

}



}

%>

</body>

</html>

6.3.4 INFORMES

Son listados de información almacenada en una o as tablas de una base de datos.

Estos informes pueden ser generales, o Pueden contener filtros (Condiciones a cumplir por los registros

consultados). Un informe general, puede ser el siguiente:

41

Para esto se debe realizar un formulario, con el siguiente código:


<%

try{




}


try{




}

%>

<html>

<head>

<title>Informe de materias</title>

</head>


<form name="formulario" method="post">

<p><b><font size="4" color="red">LISTADO DE MATERIAS</font></b>

<a href="menu.jsp">inicio</a> <br>

</p>

<%

try{

PreparedStatement instruccion=c.prepareStatement("Select materias. codmat, materias.nombre,

programas.nombre as programa, materias.semestre, materias.estado, materias.habilita from

materias,programas where programas.codigo=materias.programa");


%>

<table border="8" width="100%">

<tr>

<th width="6.5%">Codigo</th>

<th width="38%">Nombre</th>

<th width="38%">Programa</th>

<th width="10.8%">Sem.</th>

<th width="2.2%">Est.</th>

<th width="4.3%">Hab.</th>

</tr>

</table>

<%

while (resultado.next()){

%>

42

<table width="100%">

<tr>

<td width="6.5%">

<%out.println(resultado.getString("codmat"));%>

</td>

<td width="32%">

<%out.println(resultado.getString("nombre"));%>

</td>

<td width="32%">

<%out.println(resultado.getString("programa"));%>

</td>

<td width="9%">

<%out.println(resultado.getString("semestre"));%>

</td>

<td width="2.2%">

<%out.println(resultado.getString("estado"));%>

</td>

<td width="4.3%">

<%out.println(resultado.getString("habilita"));%>

</td>

<%

}

%>

</tr>

</table>

<%

resultado.close();


c.close();



}

%>

</p></form>

</body>

</html>

Ahora trabajaremos un informe con parámetros, para lo cual se requiere de un formulario, con una

apariencia, inicial asi:

Al presionar el boton buscar, su apariencia sera la siguiente:

43

Cuyo codigo es el siguiente:


<%

try{




}


try{




}

%>

<html>

<head>

<title>Informe de materias</title>


function consu(){


alert('No digito el codigo del alumno');


alert('El codigo debe ser numerico');

}else{


}

}

</script>

</head>


<form name="formulario" method="post">

<p><b><font size="4" color="red">LISTADO DE MATERIAS</font></b>

<a href="menu.jsp">inicio</a> <br></p>

<%

if (request.getParameter("codigo")==null){ %>


44

<form action="informematerias.jsp" method="post" name="formulario">

<p><b>Alumno a Buscar</b> </p>

<p>Código:

<input type="text" name="codigo" size="8">

<img border="0" src="botones/consulta.jpg" width="26" height="24" onclick="javascript:consu()">

</p>

<%}else{

try{

PreparedStatement matricula=c.prepareStatement("Select matricula.codigo,ficha.nombre+' '+

ficha.apellido as alumno, programas.nombre from matricula,ficha,programas where

ficha.codigo=matricula.codigo and matricula.programa=programas.codigo and matricula.codigo=?");

matricula.setString(1,request.getParameter("codigo"));

ResultSet matri=matricula.executeQuery();

if (matri.next()){

%>

<input type="text" name="codmat" size="8" value="<%=matri.getString("codigo")%>">

<input name="nombre" type="text" size="40" maxlength="40" value = "<% =

matri.getString("alumno" %>">

<input name="programa" type="text" size="30" maxlength="30" value =

"<%=matri.getString("nombre")%>">

<%

matricula.close();

}



}

try{

PreparedStatement instruccion=c.prepareStatement("Select materias.codmat, materias.nombre,

programas.nombre as programa, materias.semestre from materias, programas, matricula where

programas.codigo=materias.programa AND Left([materias].[codmat],4) = Left([matricula].[grupo],4)

and matricula.codigo=?");



%>


<tr>





</tr>

</table>

<%


%>


<tr>

45

<td width="6.5%">

<%out.println(resultado.getString("codmat"));%>

</td>

<td width="32%">

<%out.println(resultado.getString("nombre"));%>

</td>

<td width="32%">

<%out.println(resultado.getString("programa"));%>

</td>

<td width="9%">

<%out.println(resultado.getString("semestre"));%>

</td>

</tr>

<%

}

resultado.close();


c.close();



}

}

%>

</form>

</body>

</html>

6.3.5 Eliminar datos

Para eliminar un registro se debe primero buscar el registro a eliminar; normalmente se realiza la

búsqueda por la clave primaria, creando un formulario donde se obtiene del usuario, el código del

registro a eliminar (Siendo este un código, o cedula generalmente).

Este formulario ya se realizo en un ejemplo anterior, por lo tanto veremos el código necesario, para

eliminar el registro deseado.


<%

try{




}


try{



46


}

%>

<html>

<head>

</head>

<body>

<%

try{

PreparedStatement instruccion=c.prepareStatement("delete from grupos where codigo=?");




c.close();

response.sendRedirect("grupos.jsp?a=eliminado");

}

catch(Exception e){


}

%>

</body>

</html>

Como ya se había visto, primero se realiza la conexión con la base de datos, después se elimina el

registro con la siguiente instrucción:




Como ya se había dicho, la instruccion request.getparameter("codigo"));, es para indicar el código

recibido como parámetro del formulario donde se indica el registro a eliminar.

Como sugerencia, el programa de eliminar se debe ejecutar después de un formulario de consulta, para

que el usuario primero busque el dato a borrar, y después de estar seguro que es la información a

eliminar, proceda a dar la orden de eliminar.

6.3.5 Modificar datos

Para modificar un registro se sugiere aprovechar el formulario ya hecho de consulta, donde el usuario

busca un registro y al encontrarlo, simplemente modifica los datos en el formulario de consulta y

presiona un hipervínculo de actualización.

En programación existe el comando de actualizar, pero es recomendable realizar un borrado del

registro y luego agregarlo como nuevo, las razones para esta sugerencia es seguridad de información.

Un ejemplo de esto es:


<%

try{



47


}


try{




}

%>

<html>

<head>

</head>

<body>

<%

try{





PreparedStatement inserta=c.prepareStatement("insert into grupos (codigo, nombre, periodo,

semestre, numeromaximo)values(?,?,?,?,?)");

inserta.setString(1,request.getParameter("codigo"));

inserta.setString(2,request.getParameter("nombre"));

inserta.setString(3,request.getParameter("periodo"));

inserta.setString(4,request.getParameter("semestre"));

inserta.setString(5,request.getParameter("numeromaximo"));


inserta.close();

c.close();

response.sendRedirect("grupos.jsp?a=modificado");



}

%>

</body>

</html>

7. TECNICAS PARA OPTIMIZAR LA PROGRAMACION

Lo que a continuación se comentara puede ser tomado como una forma personal de programar, es

decir, que no afecta nada el funcionamiento de una aplicación, el utilizar estos trucos o hacer caso

omiso de ellos. Es un concepto personal y particular, que con estos trucos, se optimiza la programación

y el tiempo de desarrollo de una aplicación.

48

7.1. Conexión con la base de datos.

Como ya se vio, en el desarrollo de una aplicación, cada vez que se desee obtener información de una

base de datos se debe realizar un proceso de conexión con ella.

Estas instrucciones encabezan el formulario:


<%

try{




}


try{




}

%>

La sugerencia es crear un formulario con esas instrucciones. Y almacenar, por ejemplo, con el nombre

de “CONECTA.JSP”.

En todos los programas donde requiera realizar la colección con la base de datos, se reemplaza la

cabecera del formulario donde iban las instrucciones por la siguiente:

<%@ include file="/conecta.jsp" %>

Esto hara que cuando el usuario (pc) requiera de un formulario, el servidor web armara la pagina

uniendo el formulario requerido por el usuario y el archivo “CONECTA.JSP”, sera agregado en el sitio

donde se encuentre la instrucción “include”.

Usted puede usar el truco para crear sus propias rutinas de código, pero tenga en cuenta, que dichos

archivos no pueden tener las etiquetas <html>,<form>, <body>, para evitar conflictos al crear

formularios con varias etiquetas repetidas

7.2 Utilizar código ya hecho

No confundir esto como software reutilizable. El truco consiste en utilizar un formulario ya creado y

probado, para con base a el realizar otros formularios, simplemente creando copias de los formularios

ya probados y realizándole los cambios necesarios para que funcionen con otros datos y para otras

tareas. Debido a que programar con JSP y en términos generales, programación para Internet, se

requiere de mucho código, por lo tanto, porque no aprovechar lo que ya se hizo y se tiene ya probado.

Apropósito de esta sugerencia, conviértase en un ratón de biblioteca, en este caso de Internet, en

Internet se encuentra una cantidad apreciable de código ya hecho, por expertos en “JSP”, que por el

gusto de darcen a conocer, nos regalan código, que nos ahorraría mucho tiempo de programación. Por

49

ejemplo, usted no se imagina el problema en el que nos metemos, si deseamos validar un campo de

texto, para que reciba una fecha valida.

Aquí hay un código que baje de la red, que además de ahorrarnos el problemita, nos hace ver muy bien

con nuestros jefes.

<p>Fecha de Nacimiento(dd/mm/aaaa): <input type="text" name="FechaNacimiento" id="sel3"

size="10" ><input type="reset" value=" ... "onclick="return showCalendar('sel3', '%d/%m/%Y');">

Este en un text y un botón que en principio no dejan mucho que desear, pero si miramos más a fondo el

botón ejecuta un código javascript, que nos retorna una fecha valida e interactiva. La apariencia es la

siguiente:

El codigo javascript, se puede grabar como un archivo independiente e incluirlo en todos los

formularios que se desee, ya sabe, con la instrucción INCLUDE, el siguiente es el codigo necesario:

<link rel="stylesheet" type="text/css" media="all" href="css/calendar-system.css" title="system" />



<script type="text/javascript" src="js/calendar.js"></script>



<script type="text/javascript" src="js/lang/calendar-es.js"></script>





<script type="text/javascript">

var oldLink = null;

// code to change the active stylesheet

function setActiveStyleSheet(link, title) {

var i, a, main;

50

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

a.disabled = true;

if(a.getAttribute("title") == title) a.disabled = false;

}

}

if (oldLink) oldLink.style.fontWeight = 'normal';

oldLink = link;

link.style.fontWeight = 'bold';

return false;

}

// This function gets called when the end-user clicks on some date.

function selected(cal, date) {

cal.sel.value = date; // just update the date in the input field.

if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))

// if we add this call we close the calendar on single-click.

// just to exemplify both cases, we are using this only for the 1st

// and the 3rd field, while 2nd and 4th will still require double-click.

cal.callCloseHandler();

}

// And this gets called when the end-user clicks on the _selected_ date,

// or clicks on the "Close" button. It just hides the calendar without

// destroying it.

function closeHandler(cal) {

cal.hide(); // hide the calendar

// cal.destroy();

_dynarch_popupCalendar = null;

}

// This function shows the calendar under the element having the given id.

// It takes care of catching "mousedown" signals on document and hiding the

// calendar if the click was outside.

function showCalendar(id, format, showsTime, showsOtherMonths) {

var el = document.getElementById(id);

if (_dynarch_popupCalendar != null) {

// we already have some calendar created

_dynarch_popupCalendar.hide(); // so we hide it first.

} else {

// first-time call, create the calendar.

var cal = new Calendar(0, null, selected, closeHandler);

// uncomment the following line to hide the week numbers

// cal.weekNumbers = false;

if (typeof showsTime == "string") {

cal.showsTime = true;

cal.time24 = (showsTime == "24");

51

}

if (showsOtherMonths) {

cal.showsOtherMonths = true;

}

_dynarch_popupCalendar = cal; // remember it in the global var

cal.setRange(1900, 2070); // min/max year allowed.

cal.create();

}

_dynarch_popupCalendar.setDateFormat(format); // set the specified date format

_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field

_dynarch_popupCalendar.sel = el; // inform it what input field we use

// the reference element that we pass to showAtElement is the button that

// triggers the calendar. In this example we align the calendar bottom-right

// to the button.

_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br"); // show the calendar

return false;

}

var MINUTE = 60 * 1000;

var HOUR = 60 * MINUTE;

var DAY = 24 * HOUR;

var WEEK = 7 * DAY;

// If this handler returns true then the "date" given as

// parameter will be disabled. In this example we enable

// only days within a range of 10 days from the current

// date.

// You can use the functions date.getFullYear() -- returns the year

// as 4 digit number, date.getMonth() -- returns the month as 0..11,

// and date.getDate() -- returns the date of the month as 1..31, to

// make heavy calculations here. However, beware that this function

// should be very fast, as it is called for each day in a month when

// the calendar is (re)constructed.

function isDisabled(date) {

var today = new Date();

return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;

}

function showFlatCalendar() {

var parent = document.getElementById("display");

// construct a calendar giving only the "selected" handler.

var cal = new Calendar(0, null, flatSelected);

// hide week numbers

52

cal.weekNumbers = false;

// We want some dates to be disabled; see function isDisabled above

cal.setDisabledHandler(isDisabled);

cal.setDateFormat("%A, %B %e");

// this call must be the last as it might use data initialized above; if

// we specify a parent, as opposite to the "showCalendar" function above,

// then we create a flat calendar -- not popup. Hidden, though, but...

cal.create(parent);

// ... we can show it here.

cal.show();

}

</script>

Yo no entendí muy bien el código, pero funciona, garantizado.

7.4 Reenviar un parámetro

Es comun recibir un parámetro de otro formulario, pero que pasa si el formulario que resibe el

parámetro, no tiene codigo html, que reciba dicha información. Y parte de esa información debe ser

enviada como parámetro a otro formulario. Aquí tenemos un ejemplo:


<html>

<head>

</head>

<body>

<%

try{

PreparedStatement inscri=c.prepareStatement("Select codigo from ficha where Codigo=?");

inscri.setString(1,request.getParameter("Codigo"));

ResultSet resultado=inscri.executeQuery();


inscri.close();

c.close();

response.sendRedirect("ficha.jsp?a=error");

}else{

PreparedStatement instruccion=c.prepareStatement("insert into ficha (Codigo, Nombre, Apellido,

FechaNacimiento, Sexo, Direccion, Telefono, CodigoMunicipio, CodigoColegio, AnoColegio,

FechaTerminacion, NombreInstitucion, TituloOtros, AnosEstudio, FechaOtros, Correo) values

(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");

instruccion.setString(1,request.getParameter("Codigo"));

instruccion.setString(2,request.getParameter("Nombre"));

instruccion.setString(3,request.getParameter("Apellido"));

instruccion.setString(4,request.getParameter("FechaNacimiento"));

instruccion.setString(5,request.getParameter("Sexo"));

instruccion.setString(6,request.getParameter("Direccion"));

53

instruccion.setString(7,request.getParameter("Telefono"));

instruccion.setString(8,request.getParameter("CodigoMunicipio"));

instruccion.setString(9,request.getParameter("CodigoColegio"));

instruccion.setString(10,request.getParameter("AnoColegio"));

instruccion.setString(11,request.getParameter("FechaTerminacion"));

instruccion.setString(12,request.getParameter("NombreInstitucion"));

instruccion.setString(13,request.getParameter("TituloOtros"));

instruccion.setString(14,request.getParameter("AnosEstudio"));

instruccion.setString(15,request.getParameter("FechaOtros"));

instruccion.setString(16,request.getParameter("Correo"));


String alu=request.getParameter("Codigo");


c.close();

response.sendRedirect("matrialumno.jsp?a=no&alumno="+alu);

}



}

%>

</body>

</html>

Este programa recibe parámetros de un formulario de captura de datos, pero requiere enviar el código

de la persona almacenada a otro formulario, para realizar otro proceso con la misma persona. La

solución es, almacenar el parámetro recibido en una variable:

String alu=request.getParameter("Codigo");

Y a la hora de redirecionar el flujo de la aplicación, enviar el parámetro asi:

response.sendRedirect("matrialumno.jsp?a=no&alumno="+alu);

No se preocupe por la parte de “a=no”, este es simplemente una variable que recibirá con el valor de

“no”, esto no es de nuestro interés, en estos momentos.

7.5 Almacenar varios registros

Aquí hay un doble problema, los cuales son:

1.Como enviar un arreglo de datos

2. como recibirlos y almacenarlos.

Este ejemplo le puede servir de algo.

Tengo un listado de datos, de los cuales, el usuario debe decidir cuales almacenar, además estos datos

son el resultado de una consulta, de varias tablas, pero esto no es el problema, el problema es como

54

saber cuales registros escogió el usuario y como los voy a enviar a otro formulario, para almacenarlos,

y lo peor como voy a recibir dichos registros y como los voy a almacenar.

El listado de registros los envió a pantalla utilizando listas de chequeo para, que el usuario escoja, los

que desea guardar, en lugar de grabar la lista de chequeo, grabo el código al que pertenece el registro

seleccionado. Luego, recibo los datos en una matriz y los almaceno con un ciclo.

Primero veamos la apariencia del formulario:

El formulario es el siguiente:


<%@ include file="/errores.jsp" %>

<html>

<head>

<title>Grupos de estudio disponibles</title>


function graba(){


}

function borrar(){

}

function errores(){

}

</script>

</head>

<body background="fondos/fondoasysverde.jpg" onLoad=errores();><form

action="materiasalumnograbar.jsp" method="post" name="formulario">

<b>Materias a ver en este semestre</b> <a href="materiascodigo.jsp"> Consultar</a>

<a href="gruposcodigo.jsp">Eliminar</a> <a href="gruposcodigomodi.jsp">Modificar</a>

<a href="menu.jsp">inicio</a> </p>

<%

out.println(request.getParameter("codigo"));

String codalu="", alu="", gru="",pdo="";

if (request.getParameter("codigo")!=null){

try{

55

String cons="Select matricula.CodigoAlumno,ficha.nombre+' '+ ficha.apellido as alumno,

matricula.PeriodoEstudio from matricula,ficha,programa where ficha.codigo=matricula.CodigoAlumno

and matricula.programa=programa.codigo and matricula.CodigoAlumno=?";

PreparedStatement matricula=c.prepareStatement(cons);

matricula.setString(1,request.getParameter("codigo"));

ResultSet matri=matricula.executeQuery();

if (matri.next()){

out.println(pdo);

codalu=matri.getString("CodigoAlumno");

alu=matri.getString("alumno");

pdo=matri.getString("PeriodoEstudio");

gru=request.getParameter("grupo");

matricula.close();

}



}

}

%>

<p>Alumno: <input type="text" name="CodigoAlumno" size="8" value="<%=codalu%>">

<input name="Nombre" type="text" size="40" maxlength="40" value="<%=alu%>">

Grupo: <input type="text" name="Grupo" size="8" value="<%=gru%>">

</p>

<p>Periodo de Estudio<input name="PeriodoEstudio" type="text" size="30" maxlength="30"

value="<%=pdo%>">

Programa<input name="Programa" type="text" size="30" maxlength="30"

value="<%=request.getParameter("programa")%>"></p>

</p>

<p> <img border="0" src="botones/guarda1.jpg" width="36" height="38"

onclick="javascript:graba()"> </a>

<img border="0" src="botones/nuevo1.jpg" width="36" height="38" onclick="javascript:borrar()">

<br>

<%

try{

String consu="Select Materias.Codigo,Materias.Nombre,Programa.Nombre as

programa,Materias.Semestre from Materias,Programa,Matricula,Pensum where

Programa.Codigo=Materias.Programa AND Left([Materias].[Codigo],4) = Left([Matricula].[Grupo],4)

and Materias.Codigo=Pensum.CodigoMateria and Pensum.CodigoPrograma=Matricula.Programa and

Matricula.CodigoAlumno=? and Matricula.grupo=? and pensum.Periodo=? ";

PreparedStatement instruccion=c.prepareStatement(consu);


instruccion.setString(2,request.getParameter("grupo"));

instruccion.setString(3,pdo);


%>

</p>

56


<tr>





<th width="10.8%">Confirma</th>

</tr>

</table>

<%

int n=0;


n++;

%>


<tr>

<td width="6.5%">

<%String codmat=resultado.getString("Codigo");

out.println(codmat);%>

</td>

<td width="32%">

<%out.println(resultado.getString("Nombre"));%>

</td>

<td width="32%">

<%out.println(resultado.getString("Programa"));%>

</td>

<td width="9%">

<%out.println(resultado.getString("Semestre"));%>

</td>

<td width="9%"a align="center">

<input type="checkbox" name="confir" & n size="8" value="<%=codmat%>" checked >

</td>

<%

}

%>

</table>

<%

resultado.close();


c.close();



}

%>

</body>

</html>

57

Como ve los datos son enviados a pantalla utilizando un ciclo mientras y el checkbox almacena el

codigo de la materia.

<input type="checkbox" name="confir" & n size="8" value="<%=codmat%>" checked >

El formulario de grabar solo recibe los codigos de las materias que el usuario halla seleccionado, es

decir, los des seleccionados, no son enviados al otro formulario como parametros. Ahora veamos como

hace para recibir estos datos\, y como los almacena el siguiente formulario:


<html>

<head>

</head>

<body>

<%

String cedulas[]=request.getParameterValues("confir");

try{

for (int i=0;i<cedulas.length;i++){

PreparedStatement instruccion=c.prepareStatement("Select CodigoAlumno from MateriasAlumno

where CodigoAlumno=? and CodigoGrupo=? and CodigoMateria=? and Periodo=?");

instruccion.setString(1,request.getParameter("CodigoAlumno"));

instruccion.setString(2,request.getParameter("Grupo"));

instruccion.setString(3,cedulas[i]);

instruccion.setString(4,request.getParameter("PeriodoEstudio"));


if (!(resultado.next())){

PreparedStatement inserta=c.prepareStatement("insert into MateriasAlumno (CodigoAlumno,

CodigoGrupo, CodigoMateria, Periodo) values (?,?,?,?)");

inserta.setString(1,request.getParameter("CodigoAlumno"));

inserta.setString(2,request.getParameter("Grupo"));

inserta.setString(3,cedulas[i]);

inserta.setString(4,request.getParameter("PeriodoEstudio"));


}

}

c.close();



}

response.sendRedirect("matrialumno.jsp?a=ya&alumno="+request.getParameter("CodigoAlumno"));

%>

</body>

</html>

Los datos son recibidos en una matirz de datos:

String cedulas[]=request.getParameterValues("confir");

58

Y se almacenan utilizando un ciclo desde “0” hasta la cantidad de datos con los que queda el vector.

Recuerde que los vectores en java se crean teniendo como el primer valor la posición cero.

for (int i=0;i<cedulas.length;i++){

Espero que estos trucos les sirvan de algo.

[email protected]

[email protected].

mailto:[email protected]

mailto:[email protected]

herramientas de programación avanzada · facilitando así la creación de aplicaciones...

Documents