Lenguaje de Programacion V PDF

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
DESARROLLO
DE SOFTWARE
MANUAL DE APRENDIZAJE
LENGUAJE DE
PROGRAMACIÓN V
CÓDIGO: 89001726
Profesional Técnico
LENGUAJE DE PROGRAMACIÓN V
ÍNDICE
TAREA N° CONTENIDO N° PÁG.

I. JavaScript/HTML. 7
1.1. Métodos Eventos. 7
1.2. Arrays. 29
1.3. Aplicaciones validaciones. 38
Ejercicios y tareas de investigación. 50
II. JSP-FUNCIONAMIENTO. 51
2.1. Métodos de Ciclo de Vida. 51
2.2. Notas básicas. 54
2.3. Estructuras JSP de códigos. 56
2.4. Directivas declaraciones JSP expresiones scriptlets. 67
III. PROGRAMACIÓN ORIENTADA A OBJETOS-JSP. 77
3.1. Métodos y/o procedimientos con JSP. 77
IV. SERVLET. 90
4.1. Composición y funciones. 90
4.2. Programación de esquema de funcionamiento. 95
4.3. Gestión de peticiones GET-Post funcionalidad SERVLET. 103
4.4. Ejecución de un SERVLET a través de un formulario JSP. 105
V. SESIONES. 112
5.1. Interface HTTPSESSION y métodos. 112
VI. ACCESO A BDS CON JAVA POOL DE CONEXIONES Y DATASOURCE. 123
6.1. Definir URL del servidor. 123
6.2. Carga del Driver. 125
6.3. Establecer conexión. 128
6.4. Crear un Statement. 131
6.5. Ejecutar sentencias. 134
ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5


I. JavaScript / HTML.
En esta tarea trataremos las siguientes operaciones:

- Métodos Eventos.
- Arrays.
- Aplicaciones validaciones.
EQUIPOS Y MATERIALES:
- Computadora con microprocesadores core 2 Duo ó de mayor capacidad.
- Sistema operativo Windows.
- Acceso a internet.
- Software de maquetación y desarrollo de páginas web.
ORDEN DE EJECUCIÓN:
- Métodos Eventos.
- Arrays.
- Aplicaciones validaciones.
1.1. MÉTODOS EVENTOS.
JavaScript no es un lenguaje de programación? En pocas palabras,

un lenguaje de programación es una serie de instrucciones que
indican a la computadora para hacer algo. Ese algo puede ser uno
de una amplia variedad de cosas, incluyendo la visualización de texto,
movimiento de una imagen, o pidiendo al usuario la información. Normalmente
las instrucciones, o lo que se denomina código, se procesan desde la línea de
arriba hacia abajo, esto simplemente significa que la computadora estudia el
código que has escrito, funciona a cabo la acción que desea tomar, y luego
toma esa acción. El acto de procesar el código se llama correr o ejecutarlo.
Las páginas web serían muy aburridos si no podía interactuar y obtener

información del usuario, tales como texto, números o fechas. Por suerte, con
JavaScript esto es posible. Puede utilizar esta información dentro de la página
web, o puede ser publicado en el servidor web donde se puede manipular y
almacenar en una base de datos si lo desea. Esta tarea se concentra en el uso

de la información dentro de la web navegador, que se llama procesamiento del

lado del cliente. Eres muy acostumbrado a varios elementos de la interfaz de
usuario. Por ejemplo el Sistema operativo Windows tiene una serie de
elementos estándar, como los botones que puede hacer clic, listas, la lista
desplegable, cajas y botones de opción que puede seleccionar, y las cajas se
pueden comprobar. Lo mismo se aplica con cualquier sistema operativo interfaz
gráfica de usuario (GUI), si se trata de un sistema Mac, Unix o Linux.
Estos elementos son los medios por los que ahora la interfaz con las
aplicaciones. La buena noticia es que se pueden incluir muchos de estos tipos
de elementos en su página web - y aún mejor, es muy fácil de hacerlo. Cuando
se tiene un elemento tal - por ejemplo, un botón - dentro de su página, se
puede luego atar código para sus eventos. Por ejemplo, cuando se ejecuta el
evento clic en el botón, puede encender el método de un JavaScript que ha
creado.
Todos los elementos HTML utilizados para la interacción serán colocados

dentro de un formulario HTML.
Formulario HTML
Para crear un formulario, utilice la etiqueta <form> y </ form> etiquetas para
declarar dónde comienza y dónde termina.
Estos elementos tienen una serie de atributos de acción, lo que determina que
el formulario se envía el atributo del método, lo que determina la forma de
presentación de la información y el atributo de destino.
En términos generales, las secuencias de comandos del lado del cliente en el

que no tiene intención de presentar la información a un servidor, estos atributos
no son necesarios. Ellos entrarán en juego en un capítulo posterior cuando se
mira en las páginas de servidor de programación. Por ahora el único atributo es
necesario configurar en el <form> elemento es el nombre del atributo, por lo
que se puede hacer referencia a la forma.
Por lo tanto, para crear un formulario en blanco, las etiquetas necesarias sería
algo como esto:
<Form name = "miFormulario">

</ Form>

No se sorprenderán al saber que estas etiquetas crean un objeto Form, que se

puede utilizar para acceder a todo sus propiedades. Se puede acceder a este
objeto de dos maneras.
En primer lugar, se puede acceder al objeto directamente utilizando su nombre

en este caso document.miFormulario. Alternativamente, se puede acceder al
objeto a través de la propiedad de colección formas del objeto documento.
Vamos a ver un ejemplo que como se utiliza la colección de

formularios. Aquí tienes una página con tres formularios. Uso de la
colección de formularios, puede acceder a cada objeto Form a su
vez y mostrar el valor de su nombre propiedad en un cuadro de
mensaje.
[ejemploFormulario1.html]
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tema01</title>
5 <script language="javascript" type="text/javascript">
function
6 cargarventana()
7 {
8 var numformularios = document.forms.length;
9 var contador=0;
10 for(contador = 0; contador < numformularios; contador++)
11 {
12 alert(document.forms[contador].name);
13 }
14 }
15 </script>
16 </head>
17 <body onload="cargarventana()" >
18 <form action="" name="formulario1">
19 <p>
20 Esto está dentro de Formulario1.
21 </p>
22 </form>
24 <p>
26 </p>
27 </form>


29 <p>
31 </p>
32 </form>
33 </body>
34 </html>
Resultado:
Cuando se carga en el navegador, debería ver tres cajas de alerta,

cada uno de los cuales muestra el nombre de un formulario.
Dentro del cuerpo de la página se definen tres formularios, cada forma se le da

un nombre y contiene un párrafo de texto.
Dentro de la definición del elemento <body>, la función cargarventana () está

conectado al controlador de eventos onload de la ventana del objeto.
<body onload="cargarventana ()" >
Esto significa que cuando se carga la página, su función cargarventana () será

llamado. La función cargarventana () esta definida en un bloque de script en el
encabezado de la página. Dentro de esta función se recorre la colección de
formularios. Al igual que cualquier otra matriz de JavaScript, la colección de
formularios tiene una propiedad de longitud, que se puede utilizar para
determinar el número de veces que debe repetirse el bucle.
Realmente, porque usted sabe cuántas formas hay, sólo puede escribir el
número en. Sin embargo, este ejemplo utiliza la propiedad de longitud, ya que
hace que sea más fácil para añadir a la colección sin tener que cambiar la
función. Generalizando su código como este es una buena práctica para entrar.
La función comienza por conseguir el número de objetos se forman dentro de la

matriz de formas y almacenar el total en la variable numformularios.

function cargarventana()
{
var numformularios = document.forms.length;
var contador=0;
for(contador = 0; contador < numformularios; contador++)
{
alert(document.forms[contador].name);
}
}
Recuerde que debido a que los índices de matrices comienzan en 0, el bucle

tiene que pasar de un índice de 0 a una Índice de numformularios - 1. Se
habilita está inicializando la variable contador a 0, y el establecimiento de la
condición del bucle para para el contador < numformularios.
Dentro del código del bucle, se pasa el índice del formulario que desee (es
decir, contador) para document.forms[], que le da el objeto Form en ese índice
en la colección de formularios. Para acceder a la propiedad nombre del
formulario del objeto, se puso un punto al final del nombre de la propiedad.
Otras propiedades del objeto de formulario y Métodos.

Un formulario accede a ellos a través de la propiedad de los elementos del
objeto Form. La colección de elementos contiene todos los objetos
correspondientes a la interacción HTML elementos dentro del formulario, con la
excepción usado <input type = "image"> elemento.
Esta propiedad es muy útil para el bucle a través de cada uno de los elementos
en un formulario. Por ejemplo, se puede recorrer cada elemento para
comprobar que no contiene datos válidos antes de enviar un formulario.
Siendo una colección, la propiedad elementos del objeto Form tiene la

propiedad de longitud, que le dice cuántos elementos están en la forma. El
objeto Form también tiene la propiedad de longitud, que también da el número
de elementos en el formulario.
¿Cuál de estos se utiliza? depende de usted porque ambos hacen lo mismo

trabajo, aunque la escritura document.formulario.length es más corto, y por lo
tanto más rápido que escribir y menos muy largo para mirar en el código, que
document.formulario.elements.length. Cuando envía datos desde un formulario
a un servidor, que normalmente se utiliza en el botón Enviar, y se requiere que
llegue a la brevedad. Sin embargo, el objeto formulario también tiene el método
de envío (), que hace casi el mismo cosa.

El método submit () envía el formulario, pero no se disparará el evento

presentará del objeto Form, por lo tanto, el controlador de eventos onsubmit no
se llama al presentar el formulario con submit ().
Bueno el mismo principio se aplica al controlador de eventos onsubmit del

objeto Form, que los incendios cuando el usuario envía el formulario. Si regresa
fiel a este controlador de eventos, el envío del formulario sigue adelante; si
devuelve falso, la presentación se cancela.
Esto hace que el código del controlador de eventos onsubmit un gran lugar
para hacer la validación de formularios. Es decir, para comprobar que lo que el
usuario ha ingresado en el formulario es válido. Por ejemplo, si se le pregunta
por las edades de los usuarios y que entren en la mente de su propio negocio,
se puede ver que se trata de texto en lugar de una número válido y que no
lleven adelante.
Creación de formularios en blanco no es exactamente emocionante o útil, por lo

que ahora vamos a centrar nuestra atención en los elementos HTML que
proporcionan la funcionalidad de interacción dentro de los formularios.
Elementos HTML en formularios.
Como se puede ver, la mayoría de los elementos del formulario son creados
por medio del elemento <input>. Uno de los elementos <input> los atributos del

elemento es el atributo type. Es este atributo el que decide cuál de los

elementos del formulario presente elemento será. Los ejemplos de valores para
este atributo incluyen botón (para crear un botón) y el texto (a crear un cuadro
de texto).
Cada elemento de formulario dentro de la página web está disponible. Al igual

que con todos los demás objetos que has visto, objeto de cada elemento tiene
su propio conjunto de propiedades distintivas, métodos y eventos. Que va a
tomar un vistazo a cada elemento del formulario a su vez y cómo utilizar su
especial propiedades, métodos y eventos, pero antes de hacer eso, vamos a
ver las propiedades y métodos que los elementos de formulario tienen en
común.
Propiedades y métodos comunes.

Debido a que la mayoría de los elementos del formulario son creados por el
elemento <input>, que sería correcto suponer que todos los elementos del
formulario comparten varias propiedades y métodos en común. Aquí están
algunos.
El nombre de la propiedad.
Una de las propiedades que todos los objetos de los elementos de formulario
tienen en común es la propiedad de nombre. Puedes usar el valor de esta
propiedad para hacer referencia a ese elemento en particular en el script.
Además, si usted está enviando la información en forma de un servidor, la
propiedad nombre del elemento se envía junto con cualquier valor del
formulario, para que el servidor pueda saber lo que el valor se refiere.
El valor de la propiedad.
La mayoría de los objetos de elementos de formulario también tienen la
propiedad de valor, que devuelve el valor del elemento. Por ejemplo, para un
cuadro de texto, la propiedad del valor devuelve el texto que el usuario escribe
en el cuadro de texto. También estableciendo el valor de la propiedad del valor
le permite poner texto dentro del cuadro de texto. Sin embargo, el uso del valor
de la propiedad es específicar para cada elemento.
Elementos del botón.

Estamos empezando nuestra mirada a los elementos del formulario con el
elemento del botón estándar porque es probablemente el más utilizado y es
bastante simple. El elemento HTML para crear un botón es <input>. Por
ejemplo, para crear un botón llamado miBoton, que tiene las palabras "Clic
Aquí” en su etiqueta, <input> tendría que ser como sigue:

<Input type = "button" nombre="miBoton" valor= "Click Me" />
El atributo type se establece en el botón, y el atributo de valor se establece en

el texto que desea que aparezca en el la cara del botón. Puede dejar el valor
del atributo fuera, pero usted va a terminar con un botón en blanco, el cual
dejará sus usuarios adivinar en cuanto a su propósito.
Este elemento crea un objeto botón asociado; en este ejemplo se llama

miBoton. Este objeto tiene todas las propiedades y métodos comunes descritas
anteriormente, incluyendo la propiedad del valor. Esta propiedad le permite
cambiar el texto en la cara del botón utilizando JavaScript, aunque esto no es
probablemente algo usted tiene que hacer muy a menudo. Lo que el botón es
realmente todo es el evento click. Todo lo que necesita hacer es definir una
función que desea haber ejecutado cuando se hace clic en el botón (por
ejemplo, boton_onclick ()) y luego agregar el controlador de eventos onclick
como una atributo del elemento <input > como sigue:
<Input type = "button" onclick = "boton_onclick ()" />
En el siguiente ejemplo, se utilizan los métodos descritos

anteriormente para registrar la frecuencia con un botón tiene al
hacer clic.
[ejemploJavaScript2.html]
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Tema01: Ejemplo 2</title>
7 var totalclic = 0;
8 function miboton_onclick()
9 {
10 totalclic++;
11 document.form1.miboton.value = "Boton presionado " +
12 totalclic + " veces";
13 }
14 </script>
15 </head>
16 <body>
17
18 <form action="" name="form1">

19 <input type="button" name="miboton"

20 value="Boton presionado 0 veces"
21 onclick="miboton_onclick()" />
22 </form>
23 </body>
24 </html>
Resultado:
Si se carga esta página en el navegador, verá un botón con

"Botón presionado 0 veces" en él. Si pulsa varias veces este
botón, podrás ver el número de clics registrados en el texto del
botón.
Se inicia el bloque de script en el encabezado de la página definiendo una

variable global, accesible desde cualquier lugar dentro de su página, llamada
totalclic. Registra el número de veces que se ha hecho click en el botón en esta
variable y utilizar esta información para actualizar el texto del botón.
La otra parte de código en el bloque de script es la definición de la función

miboton_onclick(). Esta función está conectada al controlador de eventos
onclick en el elemento <input> en el cuerpo de la página.
Este elemento es un elemento de botón llamado miboton y está contenida

dentro de un formulario denominado Form1.
<form action="" name="form1">

<input type="button" name="miboton"
value="Boton presionado 0 veces"
onclick="miboton_onclick()" />
</form>
Veamos la función miboton_onclick() un poco más de cerca. En primer lugar,

incrementa el valor de las variables totalclic por uno.
function miboton_onclick()
{

totalclic++;
}
A continuación, se actualiza el texto en el valor del botón utilizando la

propiedad value del objeto Button.
document.form1.miboton.value = "Boton presionado " + totalclic + " veces";
La función de este ejemplo es específica a este formulario y botón, en lugar de

una función genérica podrás utilizar en otras situaciones. Por lo tanto, el código
de este ejemplo se refiere a la forma y el botón utilizando directamente
document.form1.miboton. Recuerde que el objeto de documento contiene todos
los elementos en una página, incluyendo <form /> elemento, y que el botón
está incrustado dentro del formulario.
Dos eventos comúnmente menos utilizados soportados por el

objeto de botón son los eventos mousedown y mouseup. Se
puede ver estos dos eventos en acción en el siguiente ejemplo.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tema01: Ejemplo3</title>
6 function miboton_onmouseup()
7 {
8 document.form1.miboton.value = "Botón va para arriba";
9 }
10
11 function miboton_onmousedown()
12 {
13 document.form1.miboton.value = "Botón va para abajo";
14 }
15 </script>
16 </head>
17 <body>
19 <input type="button" name="miboton"
20 value="Boton va para arriba"

21 onmouseup="miboton_onmouseup()"
22 onmousedown="miboton_onmousedown()" />
23 </form>
24 </body>
25 </html>
Resultado:
Si hace clic en el botón con su izquierda botón del ratón y

mantenerlo presionado, verá el texto en el botón cambio de
"Botón va para abajo."
Tan pronto como se suelta el botón, el texto cambia a " Botón va para abajo."
En el cuerpo de la página, se define un botón llamado miboton dentro de un

formulario llamado Form1; adjuntar la función miboton_onmouseup() al
controlador de eventos onmouseup, y la función de miboton_onmousedown() al
controlador de eventos onmousedown.

<input type="button" name="miboton"
value="Boton va para arriba"
onmouseup="miboton_onmouseup()"
onmousedown="miboton_onmousedown()" />
</form>
El miboton_onmouseup() y mibuton_onmousedown() se define en un bloque de

script en la cabecera de la página. Cada función consiste en una sola línea de
código, en el que se utiliza el valor propiedad del objeto de botón para cambiar
el texto que se muestra en el valor del botón.
Un punto importante a destacar es que eventos como mouseup y mousedown

se activan sólo cuando el puntero del mouse este sobre el elemento en
cuestión. Por ejemplo, si hace clic y mantiene pulsado el botón del ratón sobre
el botón, a continuación, mover el mouse fuera antes de soltar el botón del
mouse, podrás ver que el evento onmouseup cambia el texto del valor del

botón cambio. En este caso sería código de controlador de eventos onmouseup

del objeto documento que lo haría conectar cualquier código a ella.
No hay que olvidar que, al igual que todos los objetos de elementos de
formulario, el objeto Button también tiene los eventos onfocus y onBlur, a pesar
de que rara vez se utilizan en el contexto de botones.
Dos tipos de botones adicionales son los botones Enviar y Restablecer. Usted
define estos botones tal como lo hace un botón estándar, excepto que el
atributo type de la etiqueta <input> se establece en enviar o restablecer en
lugar de al botón. Por ejemplo, los botones Enviar y Restablecer se crearon
usando el siguiente código:
<Input type = "submit" value = "Enviar" name = "Submit1" />

<Input type = "reset" value = "Reset" name = "CONFIG.1" />
Estos botones tienen propósitos especiales, que no están relacionados con la

escritura.
Cuando se hace clic en el botón Enviar, los datos del formulario se envían al
servidor de forma automática, sin necesidad de cualquier secuencia de
comandos.
Cuando se hace clic en el botón de reinicio, todos los elementos de un

formulario se borran y vuelven a su forma predeterminada los valores (los
valores que tenían cuando la página fue cargado).
Los botones Enviar y Restablecer tienen objetos correspondientes llamados

Enviar y Restablecer, que tienen exactamente las mismas propiedades,
métodos y eventos como un objeto Button estándar.
Para ayudar a demostrar cómo el keydown, pulsación de tecla,

keyup, y cambiar los acontecimientos usando el teclado se va a
crear un ejemplo que le dice lo que los eventos ejecuten.
1 <!DOCTYPE html>
2 <html>
3 <head>

6 function mostrarEvento(nombreEvento)
7 {
8 var mimensaje = window.document.form1.textarea2.value;
9 mimensaje = mimensaje + nombreEvento;
10 document.form1.textarea2.value = mimensaje;
11 }
12 </script>
13 </head>
14 <body>
16 <textarea rows="15" cols="40" name="textarea1"
17 onchange="mostrarEvento('onchange\n');"
18 onkeydown="mostrarEvento('onkeydown\n');"
19 onkeypress="mostrarEvento('onkeypress\n');"
20 onkeyup="mostrarEvento('onkeyup\n\n');"></textarea>
21
22 <textarea rows="15" cols="40" name="textarea2"></textarea>
23 <br />
24 <br />
25 <input type="button" value="Limpiar TextArea"
26 name="button1"
27 onclick="document.form1.textarea2.value=''" />
28 </form>
29 </body>
30 </html>
Resultado:

Para ver lo que sucede cuando se escriba cualquier letra en el cuadro de área
de texto primero. Debemos ver los eventos que están siendo ejecutados se
enumeraran en el segundo texto el cuadro del área (onkeydown, onkeypress, y
onkeyup), como se muestra en la imagen al hacer clic fuera de la caja de área
de texto en primer lugar, verá el evento onchange. Experimente con el ejemplo
para ver qué eventos.
Dentro de un formulario llamado Form1 en el cuerpo de la página, definir dos

áreas de texto y un botón. La primera caja de texto es aquel que va a
supervisar los eventos que se va a ejecutar.
Cuando se le concede el código que llama a la pantalla de eventos () la función

de cada uno de los onchange, onkeydown, manipuladores onkeypress, y
onkeyup evento.
<textarea rows="15" cols="40" name="textarea1"

onchange="mostrarEvento('onchange\n');"
onkeydown="mostrarEvento('onkeydown\n');"
onkeypress="mostrarEvento('onkeypress\n');"
onkeyup="mostrarEvento('onkeyup\n\n');"></textarea>
A continuación, usted tiene un área de texto vacío del mismo tamaño que la
primera.
<textarea rows="15" cols="40" name="textarea1"></textarea>
Por último, se tiene un elemento de botón.
<input type="button" value="Limpiar TextArea"

name="button1"
onclick="document.form1.textarea2.value=''" />
Observe que el controlador de eventos onclick para el botón no está llamando a

una función, pero sólo la ejecución de una línea de código JavaScript. A pesar
de que normalmente se llama a las funciones, no es obligatorio; si se tiene sólo
una línea de código a ejecutar, es más fácil sólo para insertarlo en lugar de
crear una función y llamarla. En este caso, onclick controlador de eventos está
conectado a un código que borra el contenido de la segunda área de texto
estableciendo su propiedad valor a una cadena vacía ( '').
Ahora vamos a ver la función mostrarEvento(). Esta es definida en un bloque

de script en el encabezado de la página.

Se añade el nombre del controlador de eventos que se ha pasado como

parámetro al texto ya contenido en la segunda área de texto.
<script language="javascript" type="text/javascript">

function mostrarEvento(nombreEvento)
{
var mimensaje = window.document.form1.textarea2.value;
mimensaje = mimensaje + nombreEvento;
document.form1.textarea2.value = mimensaje;
}
</script>
Veamos un ejemplo que hace uso de todas las propiedades,

métodos y eventos que acabamos de discutir.
El ejemplo es una forma simple que permite a un usuario construir

un sistema informático. Tal vez podría utilizar en una situación de comercio
electrónico, para vender computadoras con las especificaciones exactas
determinados por el cliente.
1 <!DOCTYPE html>
2 <html>
3 <head>
5 <script type="text/javascript">
6 var indiceVelocidad = 0;
7 //------------------------------------------------
8 function verVelocidad_onclick(indice)
9 {
10 var retornarValor = true;
11 if (indice==1)
12 {
13 retornarValor = false;
14 alert("Lo sentimos que la velocidad del procesador no \n\
15 está disponible actualmente");
16
17 document.form1.radiovelocidad[indiceVelocidad].checked = true;
18 }
19 else

20 {
21 indiceVelocidad = indice;
22 }
23 return retornarValor;
24 }
25 //----------------------------------------------
26 function verificarBoton_onclick()
27 {
28 var indicecontrol;
29 var element;
30 var numerocontrol = window.document.form1.length;
31 var mensaje = "La velocidad de su procesador elegido es : ";
32 mensaje=mensaje + document.form1.radiovelocidad[indiceVelocidad].value;
33 mensaje = mensaje + "\nCon los siguientes componentes adicionales\n";
34 for (indicecontrol = 0; indicecontrol < numerocontrol; indicecontrol++)
35 {
36 element = document.form1[indicecontrol];
37
38 if (element.type == "checkbox")
39 {
40 if (element.checked == true)
41 {
42 mensaje = mensaje + element.value + "\n";
43 }
44 }
45 }
46 alert(mensaje);
47 }
48 </script>
49 </head>
50 <body>
52 <p>
53 Todos los componentes que desea incluir en su computadora
54 </p>
55 <table>
56 <tr>
57 <td>
58 DVD-ROM
59 </td>
60 <td>
61 <input type="checkbox" name="chkDVD" value="DVD-ROM" />
62 </td>

63 </tr>
64 <tr>
65 <td>
66 CD-ROM
67 </td>
68 <td>
69 <input type="checkbox" name="chkCD" value="CD-ROM" />
70 </td>
71 </tr>
72 <tr>
73 <td>
74 USB Drive
75 </td>
76 <td>
77 <input type="checkbox" name="chkUSB" value="USB Drive" />
78 </td>
79 </tr>
80 </table>
81 <p>
82 Seleccione la velocidad del procesador
83 </p>
84 <table>
85 <tr>
86 <td>
87 <input type="radio" name="radiovelocidad" checked="checked"
88 value="3.8 GHz" onclick="return verVelocidad_onclick(0)" />
89
90 <td>
91 3.8 GHz
92 </td>
93 <td>
94 <input type="radio" name="radiovelocidad" value="4.8 GHz"
95 onclick="return verVelocidad_onclick(1)" />
96 </td>
97 <td>
98 4.8 GHz
99 </td>
100 <td>
101 <input type="radio" name="radiovelocidad" value="6 Ghz"
102 onclick="return verVelocidad_onclick(2)" />
103 </td>
104 <td>
105 6 GHz

106 </td>
107 </tr>
108 </table>
109 <input type="button" value="Verificar Formulario" name="btnCheck"
110 onclick="return verificarBoton_onclick()" />
111 </form>
112 </body>
113 </html>
Resultado:
Comprobar algunas de las casillas de verificación, cambiar la velocidad del

procesador y haga clic en el botón Comprobar formulario. Un mensaje aparece
el cuadro y las listas de la velocidad del procesador y los componentes que ha
seleccionado. Por ejemplo, si selecciona un DVD-ROM y una unidad USB y
una velocidad de procesador de 6 GHz, verá algo así como lo que se muestra
en la imagen.
Tenga en cuenta que el procesador de 4,8 GHz está fuera de stock, por lo que
si usted elige, un cuadro de mensaje que dice que está fuera de las acciones, y
no se ha seleccionado el botón de radio de 4,8 GHz velocidad del procesador.
El ajuste anterior se restaura cuando el usuario cierra el cuadro de mensaje.

Vamos primero a ver el cuerpo de la página, donde se define las casillas de

verificación y botones de radio y botón dentro de un formulario llamado Form1.
Se empieza con las casillas de verificación. Se ponen en una tabla
simplemente para los propósitos de formato.
<table> <input type="checkbox" name="chkCD" value="CD-

<tr> ROM" />
<td> </td>
DVD-ROM </tr>
</td> <tr>
<td> <td>
<input type="checkbox" name="chkDVD" value="DVD- USB Drive
ROM" /> </td>
</td> <td>
</tr> <input type="checkbox" name="chkUSB" value="USB
<tr> Drive" />
<td> </td>
CD-ROM </tr>
</td> </table>
<td>
A continuación vienen los botones de radio para seleccionar la velocidad de la

CPU se requiere, y estos son un poco más compleja.
Una vez más se ponen en una mesa para fines de formato.
<table> </td>
<tr> <td>
<td> 4.8 GHz
<input type="radio" name="radiovelocidad" </td>
checked="checked" <td>
value="3.8 GHz" onclick="return <input type="radio" name="radiovelocidad" value="6
verVelocidad_onclick(0)" /> Ghz"
onclick="return verVelocidad_onclick(2)" />
<td> </td>
3.8 GHz <td>
</td> 6 GHz
<td> </td>
<input type="radio" name="radiovelocidad" value="4.8 </tr>
GHz" </table>
onclick="return verVelocidad_onclick(1)" />
El nombre de grupo de botones de radio es radiovelocidad. Aquí uno de los

primeros se fija para ser activada por defecto para la inclusión de la palabra
marcada en el interior de los elementos <input> definición del elemento. Es una
buena idea para asegurarse de que que haya un botón de opción marcada por
defecto, ya que si no lo hace y el usuario no selecciona un botón, el formulario
se haya presentado sin valor para ese grupo de radio.

Usted hace uso del evento onclick de cada objeto de radio, y cada botón se
conecta a la misma función, verVelocidad_onclick(). Pero para cada botón de
opción, se transmite un valor del índice de ese particular botón en la colección
grupo de botones de radiovelocidad. Esto hace que sea fácil determinar cuál
radio se selecciona.
<input type="button" value="Verificar Formulario" name="btnCheck"

onclick="return verificarBoton_onclick()" />
El controlador de eventos onclick de este botón se conecta a la función

verificarBoton_onclick () y es para el usuario hacer clic cuando completen el
formulario.
Por lo que tiene funciones: verVelocidad_onclick() y verificarBoton_onclick().

Estos son tanto definidas en el bloque de script en el encabezado de la página.
Veamos ahora este bloque de script. Comienza declarando indiceVelocidad
una variable. Esto se utiliza para almacenar el índice seleccionado actualmente
de la radiovelocidad grupo de botones de radio.
var indiceVelocidad = 0;
Luego tiene la función verVelocidad_onclick(), que es llamada por el

controlador de eventos onclick en cada botón de radio. Su función tiene un
parámetro, es decir, la posición de índice en el radiovelocidad colección del
objeto de radio seleccionado.
function verVelocidad_onclick(indice)
{
var retornarValor = true;
Lo primero que se hace la función es declarar la variable retornarValor y lo

ponemos a true. En este caso, el valor de retorno es importante porque se
decide si el botón de radio permanece marcado como resultado de que el
usuario haga clic en él. Si regresa false, anula la acción del usuario, y el botón
de radio permanece sin marcar. De hecho hay un botón de radio se convierte,
por lo que no se debe perder de vista el índice del botón de opción marcada
por lo que puede realizar un seguimiento de qué botón fue el previamente
comprobada. Para permitir una acción del usuario para debe de regresar true.
Como un ejemplo de esto en acción, usted tiene una sentencia condicional en
la línea siguiente. Si el índice del botón de opción valor pasado es 1 (es decir,
si el usuario comprueba la caja para un procesador de 4,8 GHz), se indica al

usuario que se trata de que estas fuera de stock y cancelar la acción de clic
mediante el establecimiento de retornarValor a falso.
if (indice==1)
{
retornarValor = false;
alert("Lo sentimos que la velocidad del procesador no \n\
está disponible actualmente");
document.form1.radiovelocidad[indiceVelocidad].checked = true;
}
Como se mencionó anteriormente, la cancelación de los resultados de la acción

haciendo clic en los botones de radio no se comprueba. A rectificar esta
situación, se establece el cuadro previamente a comprobar de nuevo en la
siguiente línea:
document.form1.radiovelocidad[indiceVelocidad].checked = true;
Lo que está haciendo aquí es el uso de la colección para el grupo de

radiovelocidad. Cada elemento en la colección contiene realmente un objeto,
es decir, cada uno de los tres objetos. Se utiliza la variable indiceVelocidad
como el índice del objeto de tipo de Radio fue marcada al último, ya que esto
se mantiene.
Por último, en la cuenta de otra persona, se establece indiceVelocidad al índice

del valor del nuevo botón de opción marcada.
{
indiceVelocidad = indice;
}
En la última línea de la función, el valor de retornarValor se devuelve al lugar

donde se llamó a la función o bien permitir o cancelar la acción de clic.
return retornarValor.
La segunda función, verificarBoton_onclick(), está conectado al evento onclick

del botón. En una verdadera situación de comercio electrónico, este botón sería
el lugar donde te gustaría comprobar y luego enviar la información al servidor
para su procesamiento.

Aquí se utiliza el formulario para mostrar un cuadro de mensaje para

confirmarlo. En la parte superior se declara cuatro variables locales a utilizar en
la función. La variable numerocontrol está definida a la propiedad de la
longitud, que es el número de elementos en el formulario. La variable mensaje
es utilizado para construir la cadena que se va a mostrar en un cuadro de
mensaje.
function verificarBoton_onclick()
{
var indicecontrol;
var element;
var numerocontrol = window.document.form1.length;
var mensaje = "La velocidad de su procesador elegido es : ";
mensaje=mensaje +
document.form1.radiovelocidad[indiceVelocidad].value;
El indiceVelocidad es una variable global, que fue creado por el evento onclick
del grupo de botones de radio, contiene el índice del botón de opción
seleccionado. A continuación, se recorre a través de los elementos del
formulario.
for (indicecontrol = 0; indicecontrol < numerocontrol; indicecontrol++)

{
element = document.form1[indicecontrol];
if (element.type == "checkbox")
{
if (element.checked == true)
{
mensaje = mensaje + element.value + "\n";
}
}
}
alert(mensaje);
}
Es aquí donde el bucle recorre cada elemento en el formulario utilizando

document.form1[indicecontrol], que devuelve una referencia al objeto elemento
almacenado en la posición de control del índice de índice.
Verá que en este ejemplo la variable element se establece en referencia al

objeto almacenado en la formulario1.

Sólo desea ver qué casillas de verificación se han comprobado, por lo que se
utiliza la propiedad type, que cada formulario HTML de elementos de objeto
tiene, para ver qué tipo de elemento que está tratando. Si el tipo es casilla de
verificación, seguirá adelante y vera si se trata de una casilla marcada. Si es
así, anexara su valor a la cadena de mensaje en mensaje. Si no es una casilla
de verificación, se puede omitir con seguridad.
Por último, se utiliza el método de alert() para mostrar el contenido de la

cadena del mensaje.
1.2. ARRAYS.
Ahora vamos a mirar a un nuevo concepto algo que se llama una matriz. Una
matriz es similar a una variable normal, con el que se puede usar para contener
cualquier tipo de datos. Sin embargo, tiene una diferencia importante, que se
verá en esta operación.
Como ya se ha visto, una variable normal sólo puede contener un elemento de

datos a la vez. Por ejemplo, puede fijar mi variable que es igual a 25, así:
miVariable = 25; y luego ir y ponerlo a otra cosa, digamos 35:
miVariable = 35;
Sin embargo, cuando se establece la variable a 35, se pierde el valor primero
de 25. La variable miVariable ahora ejerce sólo el número 35.
La siguiente tabla ilustra la variable:

Nombre de la variable Valor
miVariable 35
La diferencia entre una variable normal y una matriz, en una matriz que puede
contener más de un elemento de datos al mismo tiempo. Por ejemplo, podría
utilizar una matriz con el nombre miMatriz para almacenar tanto los números 25
y 35. Cada lugar donde una parte de los datos se pueden almacenar en una
matriz se llama un elemento.
¿Cómo distinguir entre estas dos piezas de datos en una matriz?

Que ha usado cada pieza de un conjunto de datos valor del índice. Para hacer
referencia a ese pedazo de datos que se encierra su valor de índice entre
corchetes después del nombre de la matriz. Por ejemplo, una matriz llamada
myArray contiene los datos 25 y 35 puede ilustrarse utilizando la siguiente
tabla:
Nombre del Elemento Valor

myArray [0] 25
myArray [1] 35
Observamos que los valores de índices comienzan en 0 y no por 1. Por qué es

esto? Seguramente 1 tiene más sentido después de todo, los seres humanos
tienden a decir que el primer elemento de los datos, seguido por el segundo
elemento, y así sucesivamente. Desafortunadamente, las computadoras usan
el 0, y pensar en el primer elemento como el elemento cero, el segundo como
el artículo primero, y así sucesivamente.
Confuso, pero que pronto se acostumbra a esto. Las matrices pueden ser muy
útiles ya que se puede almacenar la misma cantidad o el menor número de
elementos de datos en una matriz como desee.
¿Cómo crear una matriz? Esta es ligeramente diferente de la que se declara

una variable normal. Para crear un nueva matriz, tiene que declarar el nombre
de la variable y decirle JavaScript que se quiere que sea una nueva matriz
utilizando la función Array () y la palabra clave. Por ejemplo, la matriz myArray
podría ser definida Como éste:
var myArray = new Array ();
Tenga en cuenta que, como todo en JavaScript, el código distingue entre

mayúsculas y minúsculas, así que si escribe array () en lugar de Array (), el
código no funcionará.
Al igual que con las variables normales, también se puede declarar su primera
variable y luego decirle JavaScript desea que se ser una matriz. Por ejemplo:
var miArray;
myArray = new Array ();
A principios que ha aprendido que se puede decir por adelantado el número de

elementos de la matriz llevará a cabo si se quiere, aunque esto no es
necesario. Esto se hace colocando el número de elementos que desea
especificar entre los paréntesis después de la matriz. Por ejemplo, para crear
una matriz que contendrá seis elementos, escribe lo siguiente:
var myArray = new Array (6);

Usted ha visto cómo declarar una nueva matriz, pero ¿cómo almacenar sus
datos dentro de éste? Usted puede hacer esto cuando se defina la matriz

mediante la inclusión de sus datos dentro de los paréntesis, con cada dato
separados por una coma. Por ejemplo:
var myArray = new Array ( "Rodrigo", 345, "Angelina", 112, "Gabriela", 99);
Aquí el primer elemento de los datos "Rodrigo", será puesto en la matriz con un
índice de 0. La siguiente dato, 345, se pondrá en la matriz con un índice de 1, y
así sucesivamente. Esto significa que el elemento con el nombre myArray [0]
contiene el valor "Rodrigo", el elemento con el nombre myArray [1] contiene el
valor 345, y así sucesivamente.
Tenga en cuenta que no puede utilizar este método para declarar una matriz
que contiene sólo una parte de los datos numéricos, tales como 345, porque se
supone que Javascript está declarando una matriz que contendrá 345
elementos. Esto lleva a otra forma de declarar datos en una matriz. Se puede
escribir la línea anterior como esto:

myArray [0] = "Rodrigo";
myArray [1] = 345;
miMatriz [2] = "Angelina";
myArray [3] = 112;
miMatriz [4] = "Gabriela";
miMatriz [5] = 99;
Se utiliza el nombre de cada elemento como lo haría con una variable,

asignándolos con los valores.
Obviamente, en este ejemplo, el primer modo de definir los elementos de datos

es mucho más fácil. Sin embargo, habrá situaciones en las que desea cambiar
los datos almacenados en un elemento concreto de una matriz después de que
han sido declarados. En ese caso, tendrá que utilizar el último método de
definir los valores de los elementos de la matriz.
En el siguiente ejemplo, vamos a crear una matriz para contener

algunos nombres. Vamos a usar el segundo método se describe
en la sección anterior para almacenar estos elementos de datos
de la matriz. A continuación, mostrar los datos para el usuario.
[ejemploArreglo1.html]

1 <!DOCTYPE html>
2 <html>
3 <body>
5 var myArray = new Array();
6 myArray[0] = "Rodrigo";
7 myArray[1] = "Angelina";
8 myArray[2] = "Gabriela";
9 document.write("myArray[0] = " + myArray[0] + "<BR>");
12 myArray[1] = "Manuel";
13 document.write("myArray[1] cambiado por " + myArray[1]);
14 </script>
15 </body>
16 </html>
Resultado:
La primera tarea en el bloque de script es declarar una variable

y decirle al intérprete de JavaScript desea que se ser una
nueva matriz.
Ahora que tiene su matriz definido, puede almacenar algunos datos en ella.
Cada vez que se almacena un elemento de datos con un nuevo índice,
JavaScript crea automáticamente un nuevo espacio de almacenamiento para la
misma. Recuerde que el primer elemento estará en myArray [0].

Tome cada adición a la matriz a su vez y ver lo que está pasando. Antes de
agregar nada, la matriz está vacío. A continuación, se agrega un elemento de
matriz con la siguiente línea:
myArray [0] = "Rodrigo";
Su gama ahora se ve así:

Índice Almacenado de datos
0 Rodrigo
A continuación, se agrega otro elemento a la matriz, con un índice de 1.

myArray [1] = "Angelina";

0 Rodrigo
1 Angelina
Por último, se agrega otro elemento a la matriz con un índice de 2.
miMatriz [2] = "Gabriela";
Su gama ahora se ve así:

Almacenado de datos de índice

0 Rodrigo
1 Angelina
2 Gabriela
A continuación, se utiliza una serie de funciones document.write()para mostrar

los valores que cada elemento que contiene la matriz en la página web. Aquí la
matriz está fuera de servicio sólo para demostrar que se puede acceder a él de
esa manera.
document.write ( "myArray [0] =" + myArray [0] + "<BR>");
document.write ( "myArray [2] =" + miMatriz [2] + "<BR>");
document.write ( "myArray [1] =" + myArray [1] + "<BR>");
Puede tratar a cada posición particular en una matriz como si fuera una
variable estándar. Así que usted puede utilizar para hacer cálculos, transfieren
su valor a otra variable o matriz, y así sucesivamente. Sin embargo, si se
intenta acceder a los datos dentro de una posición de matriz antes de tener que
definir, obtendrá definido como un valor.

Por último, se cambia el valor de la segunda posición de matriz a "Manuel". Se

podría haber cambiado a un número, ya que, al igual que con las variables
normales, puede almacenar cualquier tipo de datos en cualquier momento a
cada posición de los datos en una matriz.
myArray [1] = "Manuel";
Ahora el contenido de su matriz el siguiente aspecto:

0 Rodrigo
1 Angelina
2 Gabriela
Sólo para demostrar que el cambio realizado ha trabajado, se utiliza

document.write () para mostrar la segunda el valor del elemento.
document.write ( "myArray [1] ha cambiado a" + myArray [1]);
Una matriz multi-dimensional

Supongamos que desea almacenar información personal de una empresa en
una matriz. Es posible que tenga datos tales como nombres, edades,
direcciones, y así sucesivamente. Una forma de crear una matriz tal sería la de
almacenar la información secuencialmente, el primer nombre en el primer
elemento de la matriz, entonces la edad correspondiente en el siguiente
elemento, la dirección en el tercero, el siguiente nombre en el cuarto elemento,
y así sucesivamente. Su matriz podía mirar algo como esto:

0 Nombre1
1 edad1
2 Dirección1
3 Nombre2
4 Edad2
5 Dirección 2
6 Nombre3
7 Age3
8 Address3
Esto funciona, pero no es una solución más limpia: el uso de una matriz multi-
dimensional. Hasta ahora usted tiene hs estado utilizando matrices
unidimensionales. En estas matrices de cada elemento se específica por un
solo índice es decir, una dimensión. Así, tomando el ejemplo anterior, se puede
ver Nombre1 está en el índice 0, edad1 está en el índice 1, y así.

Una matriz multidimensional está formada por dos o más índices para cada
elemento. Por ejemplo, esta es la forma que la matriz de personal podría verse
como una matriz de dos dimensiones:
Indice 0 1 2
0 Nombre1 Nombre2 Nombre3
1 Edad1 Edad2 Edad3
2 Dirección1 Dirección2 Dirección3
El siguiente ejemplo ilustra cómo se puede crear una matriz

multidimensional como en el código JavaScript y cómo se puede
acceder a los elementos de esta matriz.
[ejemploArreglo2.html]
1 <!DOCTYPE html>
2 <html>
3 <body>
5 var personal = new Array();
6 personal[0] = new Array();
7 personal[0][0] = "Nombre0";
8 personal[0][1] = "Edad0";
9 personal[0][2] = "Direccion0";
13 personal[1][2] = "Dirección1";
17 personal[2][2] = "Dirección2";
18 document.write("Nombres : " + personal[1][0] + "<BR>");
19 document.write("Edades : " + personal[1][1] + "<BR>");
20 document.write("Direcciones : " + personal[1][2]);
21 </script>
22 </body>
23 </html>
Resultado:

La primera cosa que hacer en este bloque de script es declarar

una variable, personal, y decirle JavaScript que se quiere que sea
una nueva matriz.
var personal = new Array();
A continuación, se hace algo nuevo; le dice JavaScript desea índice 0 de la

matriz de personal, es decir, el elemento el personal de [0] a otro nuevo array.
personal [0] = new Array();
Entonces, ¿qué está pasando? Bueno, la verdad es que JavaScript en realidad

no admite matrices multidimensionales, únicas individuales. Sin embargo,
JavaScript nos permite matrices multidimensionales falsos mediante la creación
de una matriz dentro de otra matriz. Entonces, ¿Qué línea precedente está
haciendo es crear una nueva matriz en el interior del elemento con índice 0 de
nuestra matriz personal.
En los próximos tres líneas, se pone valores en el personal en la nueva

creación [0] array. JavaScript hace que sea fácil de hacer esto: Usted acaba de
indicar el nombre de la matriz, el personal de [0], seguido por otro índice en
corchetes. El índice de primer (0) pertenece a la matriz de personal; el segundo
índice pertenece a la del personal [0] array.
personal [0] [0] = "Nombre0";

personal [0] [1] = “Edad0";
personal [0] [2] = "Direccion0";
Después de estas líneas de código, la matriz se ve así:

Índice 0
0 Nombre0
1 Edad0
2 Direccion0

Los números en la parte superior, justo en el momento 0, se refieren a la matriz

de personal. Los números que van abajo el lado, 0, 1, y 2, son índices en
realidad para el nuevo personal [0] array dentro de la matriz de personal.
Para más detalles de la segunda persona, se repite el proceso, pero esta vez
se está utilizando la matriz de personal elemento con índice 1.
personal[1] = new Array ();

personal[1] [0] = "Nombre 1";
personal[1] [1] = "edad1";
personal[1] [2] = "Dirección 1";
Ahora la matriz se ve así:

Indice 0 1
0 Nombre0 Nombre1
1 Edad0 Edad1
2 Direccion0 Direccion1
Se crea detalles de una tercera persona en las próximas líneas. Ahora está
usando el elemento con índice 2 dentro de la gama de personal para crear una
nueva matriz.
La matriz ahora se ve así:
personal [2] = new Array ();

personal [2] [0] = "Nombre2";
personal [2] [1] = "Edad2";
personal [2] [2] = "Dirección 2";
Ahora ha terminado de crear una matriz multi-dimensional. Se termina el

bloque de script mediante el acceso a los datos correspondientes a la segunda
persona (Nombre1, Edad1, Dirección1) y se presentan en la página mediante
document.write(). Como se puede ver, el acceso a los datos es lo mismo que
almacenarlos. Se puede utilizar la matriz multi-dimensional en cualquier lugar
que usaría una variable normal o matriz de una sola dimensión.
document.write ( "Nombre:" + personal [1] [0] + "<BR>");

document.write ( "Edad:" + personal [1] [1] + "<BR>");
document.write ( "Dirección:" + personal [1] [2]);
Intente cambiar el document.write() comandos de forma que se muestren los

detalles de la primera persona. Los código se vería así:
document.write ( "Nombre:" + personal [0] [0] + "<BR>");

document.write ( "Edad:" + personal [0] [1] + "<BR>");

document.write ( "Dirección:" + personal [0] [2]);
Es posible crear matrices multidimensionales de tres, cuatro o incluso un

centenar de dimensiones, pero las cosas pueden comenzar a ser muy confuso.
Para darle una idea, aquí es cómo declarar y accede a un cinco dimensiones
matriz:

myArray [0] = new Array ();
myArray [0] [0] = new Array ();
myArray [0] [0] [0] = new Array ();
myArray [0] [0] [0] [0] = new Array ();
myArray [0] [0] [0] [0] [0] = "Esto está yendo de las manos"
document.write (myArray [0] [0] [0] [0] [0]);
1.3. APLICACIONES VALIDACIONES
Vamos a poner toda la información en los cuadros de texto y

botones a la vez en un ejemplo. En este ejemplo, tenemos un
formulario simple que consiste en dos cuadros de texto y un botón.
El cuadro de texto de arriba es para el nombre de los usuarios, y el
segundo es para su edad. Realizar varios controles de validez.
Comprobaremos la validez de la caja de texto cuando se pierde el enfoque. Sin
embargo, el nombre y la edad cuadros de texto sólo se verifican para ver si
están vacíos cuando se hace clic en el botón.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
7 function verificar_onclick()
8 {
9 var miFormormulario = document.form1;
10 if (miFormormulario.txtEdad.value == "" || miFormormulario.txtNombre.value == "")
11 {
12 alert("Por favor completar todo el formulario");
13 if (miFormormulario.txtNombre.value == "")
14 {

15 miFormormulario.txtNombre.focus();
16 }
17 else
18 {
19 miFormormulario.txtEdad.focus();
20 }
21 }
22 else
23 {
24 alert("Gracias por completar el formulario " + miFormormulario.txtNombre.value);
25 }
26 }
27 function txtEdad_onblur()
28 {
29 var txtEdad = document.form1.txtEdad;
30 if (isNaN(txtEdad.value) == true)
31 {
32 alert("Ingresar una edad valida");
33 txtEdad.focus();
34 txtEdad.select();
35 }
36 }
37 function txtNombre_onchange()
38 {
39 window.status = "Hola " + document.form1.txtNombre.value;
40 }
41 </script>
42 </head>
43 <body>
45 Por favor, introduzca los siguientes datos:
46 <p>
47 Nombre:
48 <br />
49 <input type="text" name="txtNombre" onchange="txtNombre_onchange()" />
50 </p>
51 <p>
52 Edad:
53 <br />
54 <input type="text" name="txtEdad" onblur="txtEdad_onblur()"
55 size="3" maxlength="3" />
56 </p>
57 <p>

58 <input type="button" value="Comprobar los detalles"

59 name="btnverificar" onclick="verificar_onclick()">
60 </p>
61 </form>
62 </body>
63 </html>
Resultado:
En el cuadro de texto se muestra en la imagen, escriba su

nombre. Al salir de la caja de texto, verá Hola y su nombre
aparecerá en la barra de estado en la parte inferior de la ventana.
Introduzca un valor no válido en el cuadro de texto de edad, tales
como AAAA, y cuando intenta salir de la caja, se le dirá el error y se envía de
nuevo para corregirlo.
Por último, haga clic en el botón de comprobar los detalles y las dos cajas de
texto serán revisados para ver que ha completado. Si bien es vacía, recibirá un
mensaje que le indica que completar todo el formulario, y le enviará de nuevo a
la caja que está vacío.
Si todo se llenó correctamente, recibirá un mensaje agradeciendo, En el

formulario se crean tres elementos de formulario con los nombres txtNombre,
txtEdad, y btnverificar.

Por favor, introduzca los siguientes datos:
<p>
Nombre:
<br />
<input type="text" name="txtNombre" onchange="txtNombre_onchange()" />

</p>
<p>
Edad:
<br />
<input type="text" name="txtEdad" onblur="txtEdad_onblur()"
size="3" maxlength="3" />
</p>
<p>
<input type="button" value="Comprobar los detalles"
name="btnverificar" onclick="verificar_onclick()">
</p>
</form>
Vas a ver que para el segundo cuadro de texto (el cuadro de texto txtEdad),
que ha incluido el tamaño con el atributo maxlength dentro del elemento
<input>. Estableciendo el atributo de tamaño de 3 le da al usuario una idea de
la cantidad de texto que están esperando, y estableciendo el atributo maxlength
a 3 ayuda a asegurar que usted no excederse de grandes números
introducidos por el valor edad.
El controlador de eventos onchange del cuadro de texto se conecta a la función

txtNombre_onchange, el controlador de eventos onBlur del segundo cuadro de
texto está conectado a la función txtEdad_onblur (), y el botón de controlador
onclick de eventos está conectado a la función verificar_onclick(). Estas
funciones se definen en un bloque de script en el encabezado de la página.
Que se verá en cada uno de ellos, a su vez, a partir de verificar_onclick ().
Lo primero que se hace es definir una variable, miFormormulario, el cual hace

referencia al objeto creado por el elemento Formulario <Form> más adelante
en la página.
function verificar_onclick()
{
var miFormormulario = document.form1;
Esto lo hace es reducir el tamaño del código cada vez que desee utilizar el
objeto Form1. En lugar de document.form1, puede simplemente escribir
miFormormulario. Esto hace que su código un poco más fácil de leer y por lo
tanto más fácil depurar, y ahorra escribir. Cuando se establece una variable
para que sea igual a un objeto existente, en realidad crear un nuevo objeto
formulario1; En lugar de eso, simplemente, apunta la variable a la existente
objeto formulario1. Así que cuando se escribe miFormormulario.name,

JavaScript comprueba la variable, en realidad es el almacenamiento de la

ubicación en la memoria de objeto formulario1 objeto, y los usos que se oponen
en su lugar. Todo esto sucede detrás de las escenas por lo que no tiene que
preocuparse por él y sólo puede utilizar miFormormulario como si fuera
document.form1.
Después de conseguir la referencia al objeto Form, que posteriormente utiliza

en una sentencia para comprobar si el valor en el cuadro de texto denominado
txtEdad o en el cuadro de texto denominado txtNombre en realidad contiene
ningún texto.
if (miFormormulario.txtEdad.value == "" ||
miFormormulario.txtNombre.value == "")
{
alert("Por favor completar todo el formulario");
if (miFormormulario.txtNombre.value == "")
{
miFormormulario.txtNombre.focus();
}
else
{
miFormormulario.txtEdad.focus();
}
}
Si lo hace es hallar un formulario incompleto, alerta al usuario. Luego, en un

interior sentencia if, se comprueba el cuadro de texto no se llenó. Usted
establece el foco en el cuadro de texto, de manera que el usuario puede
comenzar llenando ella inmediatamente, sin tener que mover el foco a ella
misma. También permite al usuario saber qué caja de texto es, su programa lo
obliga a llenar. Para evitar molestar a sus usuarios, asegúrese de que el texto
en la página dice que campos son necesarios.
Si el exterior original de la declaración if el formulario esté completo, permite al

usuario saber con un mensaje de agradecimiento.
else
{
alert("Gracias por completar el formulario " + miFormormulario.txtNombre.value);
}
En este tipo de situación, es más probable enviar el formulario al servidor que

dejar al usuario sin saber con un mensaje de agradecimiento. Para ello, puede
utilizar el método del objeto Form submit () o usando un botón normal Enviar.

El siguiente de las tres funciones es txtEdad_onblur(), que conecta con el

evento de la onblur txtEdad del cuadro de texto. El propósito de esta función es
comprobar que el valor de cadena que el usuario ingreso en el cuadro edad
consta en realidad de caracteres numéricos.
function txtEdad_onblur()
{
var txtEdad = document.form1.txtEdad;
Una vez más en el inicio de la función, se declara una variable y se configura

para hacer referencia a un objeto; esta vez se trata del objeto de texto creado
para el cuadro de texto txtEdad que define más abajo en la página. Ahora, en
lugar de tener que escribir document.form1.txtEdad cada vez, sólo tiene que
teclear txtEdad, y se hace lo mismo. Ciertamente ayuda a ahorrar tiempo al
escribir, sobre todo porque se trata de una función con el uso múltiple del
objeto txtEdad.
La siguiente sentencia if comprueba para ver si lo que se ha introducido en el

cuadro de texto puede txtEdad sea un número. Se utiliza la función isNaN()
para hacer esto para usted. Si el valor en el cuadro de texto txtEdad no es un
número, indica al usuario y ajusta el enfoque de nuevo a la caja de texto
llamando al método. Además, esta vez se resalta el texto utilizando el método
de selección del objeto de texto (Select).
Esto hace que sea aún más claro al usuario. También les permite solucionar el
problema sin necesidad de eliminar el texto primero.
if (isNaN(txtEdad.value) == true)
{
alert("Ingresar una edad valida");
txtEdad.focus();
txtEdad.select();
}}
Se podría ir más allá y comprobar que el número dentro del cuadro de texto es
en realidad una edad válida por ejemplo, 191 no es una edad válida, ni es
probable que sea 255. Sólo tiene que añadir otra sentencia if para comprobar
éstas posibilidades.
Esta función está conectada al controlador de eventos onBlur del cuadro de

texto txtEdad, pero ¿Por qué no utilizar el controlador de eventos onchange,
con su ventaja de que sólo se vuelve a verificar el valor, cuando el valor en
realidad ha cambiado? El evento onchange no se disparará si la caja estaba
vacía antes de enfoque y después de enfoque se pasó lejos de él. Sin

embargo, dejar el control justo antes de enviar el formulario es probablemente

sea mejor debido a que algunos usuarios prefieren para llenar en información
fuera de orden y volver a algunos elementos de forma posterior.
La función final es para el evento onchange del cuadro de texto txtNombre. function
txtNombre_onchange()
{
window.status = "Hola " + document.form1.txtNombre.value;
}
Cuando iniciamos el evento onchange (cuando el enfoque se pasa lejos de la

caja de texto de nombre y de su contenido han cambiado), se toma el valor del
cuadro de txtNombre y se pone en la barra de estado de la ventana en el parte
inferior de la ventana. Simplemente dice Hola sunombre. Se accede a la barra
de estado el uso del objeto de ventana propiedad de estado, a pesar de que
sólo podía entrar el siguiente:
estado = "Hola" + document.form1.txtNombre.value;
Aquì vamos a ver un ejemplo de validación avanzada.
1. Crear un archivo JavaScript: [libreria.js]

2. Selecciona el siguiente tipo:
3. Ingresar el siguiente código:
1 function fVerificarBlanco(valor){
2 //Buscar un espacio en blanco
3 var p=valor.indexOf(" ");
4 //Si existe
5 if(p!=-1)
6 //Retorna false

7 return false;
8 //De lo contrario retorna true
9 return true;
10 }
11
12 function fVerificarTexto(valor){
13 // Devolver la longitud del valor
14 // ingresado
15 var lvalor=valor.length;
16 // Definir una constante
17 var patron="abcdefghijklmnñopqrstuvwxyz";
18 //Convertir a mayuscula
19 patron+=patron.toUpperCase();
20 // Contatenar los acentuados
21 patron+="áéíóúÁÉÍÓÚ";
22 // Concatenar el espacio en blanco
23 patron+=" ";
24 // Recorrer la cadena
25 for(x=0;x<lvalor;x++){
26 // Extraer caracter
27 // segun la posición
28 c=valor.charAt(x);
29 // Buscar el caracter
30 p=patron.indexOf(c);
31 // Si no existe
32 if(p==-1)
33 //Retorna false
34 return false;
35 }
36 return true;
37 }
38
39 function fVerificarDomicilio(valor){
40 var patron="abcdefghijklmnñopqrstuvwxyz";
41 patron+=patron.toUpperCase();
42 patron+="áéíóúÁÉÍÓÚ";
43 patron+="0123456789";
44 patron+=".º-#/ ";
45 for(x=0;x<valor.length;x++){
48 if(p==-1)
49 return false;

50 }
51 return true;
52 }
53
54 function fVerificarNumero(valor){
55 var lvalor=valor.length;
56 var patron="0123456789";
57 for(x=0;x<lvalor;x++){
60 if(p==-1)
61 return false;
62 }
63 return true;
64 }
4. Crear un archivo html:
a. Crea el siguiente formulario.
Nota: El nombre del formulario será: “form_grabar”
txtnom
txtape
txtdni cmdgrabar
txttel

b. Digitar las siguientes líneas:
Invocar a las
funciones creadas
en el archivo
JavaScript

c. Grabarlo con el nombre: [formulario_alumnos.html].

Probar el formulario con validación JavaScript.
Ejercicios y tareas de investigación
1. Investigue: ¿Qué son mètodos recursivos en JavaScript? – explique.

2. Mencione sobre otros eventos en JavaScript.
3. ¿Cómo se utilizan las funciones incorporadas en JavaScript? – Explique.
4. Visualice el video: JavaScript historia, de la url:
https://www.youtube.com/watch?v=eCOpxmdTf9c, haga un comentario
acerca del video.

II. JSP – FUNCIONAMIENTO.
- Métodos de ciclo de vida.

- Notas Básicas.
- Estructuras JSP de Códigos.
- Directivas declaraciones JSP Expresiones .
- Métodos de ciclo de vida.
- Notas Básicas.
- Estructuras JSP de Códigos.
- Directivas declaraciones JSP Expresiones.
2.1. MÉTODOS DE CICLO DE VIDA
Para poder aplicar todos los ejemplos de esta operación instalar la

siguiente versión de Netbeans 8.1 que ya trae en forma predeterminada
el servidor Apache Tomcat.
https://netbeans.org/downloads/
En la plataforma Java 2, los componentes web proporcionan las capacidades

de extensión dinámicos para un servidor web. Los componentes Web son
servlets Java, páginas JSP, o puntos finales de servicios web. La interacción
entre un cliente web. El cliente envía una solicitud HTTP al servidor web. Un

servidor web que implementa la tecnología Java Servlet y JavaServer Pages

convierte la solicitud en un HTTPServletRequest objeto.
Este objeto se entrega a un componente de web, que puede interactuar con

componentes JavaBeans o una base de datos para generar contenido
dinámico. El componente web a continuación, puede generar una
HTTPServletResponse o puede pasar la solicitud a otro componente Web.
Finalmente, un componente web genera un HTTPServletResponse objeto. El

servidor web convierte este objeto a una respuesta HTTP y lo devuelve al
cliente.
Imagen de Tratamiento de la petición.
Una aplicación web se compone de componentes web, archivos de recursos

estáticos, como imágenes y clases de ayuda y bibliotecas. El contenedor web
proporciona muchos servicios de apoyo que refuercen las capacidades de los
componentes web y los hacen más fáciles de desarrollar. Sin embargo, debido
a una aplicación web debe tener en cuenta estos servicios, el proceso para
crear y ejecutar una aplicación web es diferente de las tradicionales clases
Java autónomas.
El proceso para crear, desplegar y ejecutar una aplicación web se puede

resumir de la siguiente manera:
• Desarrollar el código del componente web.

• Desarrollar el descriptor de despliegue de aplicaciones Web.
• Compilar los componentes de aplicaciones Web y las clases de ayuda que
hacen referencia los componentes.

• Opcionalmente empaquetar la aplicación en una unidad de despliegue.

• Implementar la aplicación en un contenedor web.
• Acceder a una URL que hace referencia a la aplicación web.
El desarrollo de código de componente web está cubierta en los capítulos

posteriores. Los pasos 2 a 4 se expandieron en las siguientes secciones y se
ilustra con un Hola, aplicación orientada a la presentación de estilo Mundial.
Esta aplicación permite al usuario introducir un nombre en un formulario HTML
(Imagen1) y luego muestra un saludo después del nombre se presenta
(Imagen2).
Forma de Saludo:
Forma de Respuesta:

2.2. NOTAS BÁSICAS.
En la arquitectura Java EE, los componentes web y archivos de contenido web

estáticas, tales como imágenes se denominan recursos web. Un módulo web
es la unidad desplegable y utilizable más pequeño de los recursos web. Un
módulo web Java EE corresponde a una aplicación web como se define en la
especificación de Java Servlet.
Además de los componentes web y recursos web, un módulo web puede

contener otros archivos:
• Clases de utilidades del lado del servidor de base de datos (ventas, carritos
de compra, y así sucesivamente). A menudo, estas clases se ajustan a la
arquitectura de componentes JavaBeans.
• Clases del lado del cliente (applets y clases de utilidad).
Un módulo de banda tiene una estructura específica. El directorio de nivel

superior de un módulo web es la raíz de documentos de la solicitud. La raíz del
documento es que las páginas JSP, del lado del cliente, se almacenan las
clases y archivos, y recursos web estáticas, como las imágenes.
La raíz del documento contiene un subdirectorio llamado WEB-INF, que

contiene los siguientes archivos y directorios:
web.xml: El descriptor de despliegue de aplicaciones Web
clases: Un directorio que contiene las clases del lado del servidor : servlets,
clases de utilidad, y componentes JavaBeans.
lib: Un directorio que contiene los archivos JAR de bibliotecas llamados por
clases del lado del servidor.
Si el módulo web no contiene los servlets, componentes de filtro, o el

compilador, entonces no necesita un descriptor de despliegue de aplicaciones
Web. En otras palabras, si el módulo web sólo contiene páginas JSP y los
archivos estáticos, entonces no están obligados a incluir una web.xml archivo.
El ejemplo, discutido por primera vez en los módulos de banda de envasado,

contiene sólo las páginas JSP y las imágenes y por lo tanto no incluye un
descriptor de despliegue.

También puede crear subdirectorios específicos de la aplicación (es decir,

directorios de paquete), ya sea en la raíz del documento o de la WEB-INF /
classes / directorio.
Un módulo web se puede implementar como una estructura de archivo sin

empaquetar o puede ser empaquetado en un archivo JAR conocido como un
archivo Web (WAR). Debido a que el contenido y el uso de archivos WAR
difieren de las de los archivos JAR, los nombres de archivo WAR utilizan un
.war extensión. El módulo web que acabamos de describir es portátil; puede
implementar en cualquier contenedor web que se ajusta a la especificación de
servlets Java.
Para implementar un WAR en el servidor de aplicaciones, el archivo debe

contener también un descriptor de despliegue de tiempo de ejecución. El
descriptor de despliegue de tiempo de ejecución es un archivo XML que
contiene información como la raíz de contexto de la aplicación web y la
asignación de los nombres portátiles de recursos de una aplicación a los
recursos del servidor de aplicaciones. El tiempo de ejecución de aplicaciones
web del servidor de aplicaciones se denomina sun-web.xml y se encuentra en
el WEB-INF directorio junto con el de aplicación web. La estructura de un
módulo web que se puede implementar en el servidor de aplicaciones se
muestra en la imagen.
Estructura del módulo web.

2.3. ESTRUCTURAS JSP DE CÓDIGOS.
A los servicios de páginas JSP como un servlet. Por lo tanto, el ciclo de vida y
muchas de las capacidades de las páginas JSP (en particular, los aspectos
dinámicos) son determinados por la tecnología Java Servlet.
Cuando una solicitud se asigna a una página JSP, los primeros controles de
contenedor web si servlet de la página JSP es más antigua que la página JSP.
Si el servlet es más viejo, el contenedor web se traduce la página JSP en una
clase de servlet y compila la clase. Durante el desarrollo, una de las ventajas
de las páginas JSP más de servlets es que el proceso de construcción se lleva
a cabo automáticamente.
La traducción y compilación.
Durante la fase de traducción cada tipo de datos en una página JSP es tratado
de forma diferente. Los datos estáticos se transforman en código que se emiten
los datos en la secuencia de respuesta.
Los elementos JSP se trataron como sigue:
• Directivas se utilizan para controlar cómo se traduce el contenedor web y

ejecuta la página JSP.
• Elementos de guiones se insertan en clase servlet de la página JSP.
• Expresiones del lenguaje de expresión se pasan como parámetros a las
llamadas al evaluador de expresiones JSP.
• jsp: [set | get] Propiedad elementos se convierten en llamadas a métodos
componentes JavaBeans.
• jsp: [incluir | adelante] elementos se convierten en las invocaciones de la API
Java Servlet.
• El jsp: plugin de elemento se convierte en el marcado específico del
navegador para activar un applet.
• Las etiquetas personalizadas se convierten en llamadas al controlador de
etiqueta que implementa la etiqueta personalizada.
En el servidor de aplicaciones, la fuente para el servlet creado a partir de una

página JSP llamado nombre de la página se encuentra en este archivo:
domain-dir/generada/jsp/j2ee-modules/WAR-NOMBRE/PageName _jsp.java
Por ejemplo, la fuente de la página de índice (llamado index.jsp )

Tanto la traducción y las fases de compilación se pueden producir errores que

se observan sólo cuando se solicita la página por primera vez. Si se detecta un
error durante cualquiera de las fases, el servidor devolverá JasperException y
un mensaje que incluye el nombre de la página JSP y la línea donde se produjo
el error.
Después de que la página ha sido traducido y compilado, servlet de la página

JSP (en su mayor parte) sigue el ciclo de vida del servlet se describe en el
Ciclo de vida del servlet :
1. Si una instancia de servlet de la página JSP no existe, el contenedor:

a. Carga clase servlet de la página JSP.
b. Ejemplariza una instancia de la clase servlet.
c. Inicializa la instancia del servlet llamando al jspInit método.
2. El contenedor invoca el _jspService método, pasando de petición y
respuesta objetos.
Si el contenedor tiene que quitar el servlet de la página JSP, llama al método

jspDestroy.
Ejecución.
Puede controlar diversos parámetros de ejecución página JSP mediante el uso
de páginas directivas. Las directivas que se refieren a amortiguar los errores de
salida y la manipulación se discuten aquí.
Buffering.
Cuando se ejecuta una página JSP, la salida escrita al objeto respuesta es
amortiguada de forma automática. Puede ajustar el tamaño de la memoria
intermedia utilizando la siguiente directiva de página:
<% @ Página buffer = "none | xxx kb"%>
Un búfer mayor permite más contenido a ser escrito antes de que algo sea
enviado de vuelta al cliente, proporcionando así la página JSP con más tiempo
para establecer los códigos y las cabeceras de estado apropiados o remitir a
otro recurso web. Un búfer más pequeño disminuye la carga de memoria del
servidor y permite al cliente para comenzar a recibir los datos con mayor
rapidez.
Vamos a crear nuestro primer ejemplo JSP.

[ejemplo1.jsp]

1. Activar el servidor web.

Iniciar NetBeans y seleccionar Services.
2. Luego activar el servidor.
3. Probar el servidor en el navegador:
4. Crear el directorio TAREA02 en la carpeta raíz del servidor Apache.

5. Crear un nuevo proyecto.

6. Eliminamos la página index.html que se ha creado.
7. Crear un nuevo archivo JSP.

8. Se muestra la siguiente pantalla.

9. Compilar el archivo JSP.
Al compilar se crea las siguientes carpetas y archivos.
10. Ejecutar el archivo JSP en el navegador web.

11. Se muestra la siguiente pantalla.
Vamos a crear nuestro segundo ejemplo JSP el cual puede incluir

un archivo html.
[mensaje.html]
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 </head>
7 <body>
8 <div>Contenido HTML</div>
9 </body>
10 </html>
[ejemplo2.jsp]
1 <%@page info="Ejemplo JSP" contentType="text/html" pageEncoding="UTF-8"%>

2 <!DOCTYPE html>
3 <html>
4 <head>
6 <title>.:: Ejemplo2 ::.</title>
7 </head>
8 <body>
9 <%@ include file="mensaje.html" %>
10 <table>
11 <tr>
12 <td width=150> </td>
13 <td width=350 align=right>

14 <h1> Escuela de Tecnologías de la Información</h1> </td>

15 </tr>
16 </table>
17 </body>
18 </html>
Resultado:
Vamos a crear nuestro tercer ejemplo JSP usando formularios y

estilos.
[miestilo.css]
1 *{
2 background-color:#cccccc;
3 color:#000000;
4 }
[ejemplo3.jsp]
1 <html>
2 <head>
3 <title>.:: ejemplo3.jsp ::.</title>
4 <style type="text/css" media="screen">
5 /*la directiva include copia el contenido de un archivo y
6 lo incrusta en la pagina*/
7 *{
8 background-color:#cccccc;
9 color:#000000;
10 }
11 </style>

12 </head>
13 <body>
14
15 <form action="respuesta.jsp" method="post">
16 Nombre:
17 <input type="text" name="nombre">
18 <br/>
19 Apellido:
20 <input type="text" name="apellido">
21 <br/>
22 Edad:
23 <input type="text" name="edad">
24
25 <br/>
26 Lenguaje preferido:
27 <select name="lenguaje">
28 <option value="java">java
29 <option value="jsp" selected>jsp
30 <option value="php">php
31 <option value="C/C++">C/C++
32 <option value="C#">C#
33 <option value="Asp">Asp
34 <option value="AS3">AS3
35 </select>
36 <br/>
37 Me gusta el:
38 <br/>
39 <input type="Radio" name="preferencia" value= "Diseño"checked>Diseño
40 <br/>
41 <input type="Radio" name= "preferencia"value="Programacion">Programacion
42 <br/>
43 <input type="Radio" name= "preferencia"value="Modelado">Modelado
44 <br/>
45 <input type="Radio" name= "preferencia"value="Gerencia">Gerencia de proyectos
46 <br/>
47
48 <p><input type="submit" value="Enviar"></p>
49 </form>
50
51 </body>
52 </html>
Resultado:

[respuesta.jsp]
1 <html>
2 <head>
3 <title>.:: respuesta.jsp ::.</title>
4 <style type="text/css" media="screen">
5 /*la directiva include copia el contenido de un archivo y lo
6 incrusta en la pagina*/
7 <%@ include file="miestilo.css" %>
8 </style>
9 </head>
10 <body>
11
12 <% // Inicio código JSP
13 /*podemos leer los datos del request a una variable
14 e imprimir los valores por pantalla */
15 String edad=(String)request.getParameter("edad");
16 String prefieres=(String)request.getParameter("preferencia");
17 out.print("tu nombre es "+ request.getParameter("nombre")+" "+
18 request.getParameter("apellido"));
19 out.print("<br/>");
20 out.print("tienes "+edad+" años");
22 out.print("tu lenguaje favorito es "+request.getParameter("lenguaje"));
24 out.print("y prefieres el(a) "+prefieres+" de un proyecto");
26 /*podemos usar los datos directamente desde el request

27 y convertirlo como cadena (toString()) y convertido a

28 mayuscula (toUpperCase()) */
29 out.print("Bienvenido a jsp "+
30 request.getParameter("nombre").toString().toUpperCase());
31 // fin código JSP
32 %>
33
34 </body>
35 </html>
Resultado:
2.4. DIRECTIVAS DECLARACIONES JSP EXPRESIONES SCRIPTLETS.
ELEMENTOS SCRIPTING EN JSP
Tipos de scripting
Sintaxis ¿Qué hacen?
Definen variables y métodos del servlet. Pueden

Declaraciones <%! declaración %> ser accesibles desde cualquier punto de la página.
No generan salida.
Evalúan la expresión y envían el valor resultante a

Expresiones < %= expresión %>
la salida. Generan salida.
Hacen uso de métodos y variables definidos

anteriormente en otroscriptleto en cualquier parte
Scriptlets <% scriptlet %>
de la página en una declaración. Pueden generar
salida.

Un scriptlet JSP se utiliza para contener cualquier fragmento de código que es

válido para el lenguaje de programación utilizado en una página. La sintaxis de
una scriptlet es el siguiente:
<%
Secuencias de comandos, Lenguaje y declaraciones
%>
Hay tres tipos de instrucciones:

• Directiva de página.
• Directiva include.
• Directiva taglib.
Sintaxis de la Directiva JSP.
<% @ Atributo Directiva = "valor" %>
Directiva de página JSP.
La directiva de página define los atributos que se aplican a toda una página
JSP.
Sintaxis de la directiva de página JSP
<% @ Atributo de página = "valor" %>
Los atributos de directiva de página JSP:
• import • isThreadSafe
• contentType • autoFlush
• extends • session
• info • pageEncoding
• buffer • errorPage
• language • isErrorPage
• isELIgnored
import: El atributo de importación se utiliza para importar clase, interfaz o

todos los miembros de una package.It es similar a importar palabra clave en la
clase o interfaz Java.
Ejemplo de atributo import:

<html>
<body>
<%@ page import="java.util.Date" %>

Today is: <%= new Date() %>
</body>
</html>
contentType: El atributo contentType define el tipo MIME (Multipurpose

Internet Mail Extension) del valor por defecto respuesta.El HTTP es "text / html;
charset = ISO-8859-1".
Ejemplo de atributo contentType
<body>
<%@ page contentType=application/msword %>

Today is: <%= new java.util.Date() %>
</body>
</html>
extends: El atributo se extiende define la clase de un padre que será heredado

por el servlet.It generada se utiliza muy poco.
Info: Este atributo se limita a establecer la información de la página JSP que se

recuperó más tarde mediante el método getServletInfo () de la interfaz Servlet.
Ejemplo de información de atributos:
<html>
<body>
<%@ page info="composed by Sonoo Jaiswal" %>

</body>
</html>
Buffer: El atributo tampón establece el tamaño del búfer en kilobytes para

manejar la salida generada por el tamaño predeterminado JSP page. El buffer
es 16 Kb.
Ejemplo de atributo Buffer:

<html>
<body>
<%@ page buffer="16kb" %>

</body>
</html>
Language: El atributo de idioma especifica el lenguaje de script utilizado en la

página JSP. El valor por defecto es "java".
isELIgnored: Podemos ignorar el lenguaje de expresión (EL) en JSP por el

atributo isELIgnored. Por defecto su valor es falso decir Lenguaje de expresión
está activada por defecto. Vemos lenguaje de expresión más tarde.
<%@ page isELIgnored="true" %>
isThreadSafe: Servlet y JSP ambos son multithreaded.If desea controlar este

comportamiento de la página JSP, puede utilizar isThreadSafe atributo de la
página directive.The valor de valor isThreadSafe es true.If lo haces falsa, el
contenedor web serializará las múltiples solicitudes, es decir, se va a esperar
hasta que el JSP termina de responder a una solicitud antes de pasar a otra
solicitud it.If a tomar el valor del atributo isThreadSafe como:
<%@ page isThreadSafe="false" %>
errorPage: El atributo ErrorPage se utiliza para definir la página de error, si se

produce una excepción en la página actual, será redirigido a la página de error.
Ejemplo de atributo ErrorPage

<html>
<body>
<%@ page errorPage="mipaginaerror.jsp" %>
<%= 100/0 %>
</body>
</html>
isErrorPage: El atributo isErrorPage se utiliza para declarar que la página

actual es la página de error.
Nota: El objeto de excepción sólo se puede utilizar en la página de error.

<html>
<body>
<%@ page isErrorPage="true" %>
Sorry an exception occured!<br/>

The exception is: <%= exception %>
</body>
</html>
Vamos a crear primer ejemplo JSP usando directivas, el cual

devuelva al cliente la fecha y hora del servidor.
[directivas1.jsp]
1 <%@page contentType="text/html" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
3 "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
7 <title>.:: directivas1.jsp ::.</title>
8 </head>
9 <body bgcolor="ffffcc">
10 <center>
Inicio directiva
11 <%
12 java.util.Date FechaHora = new java.util.Date();
13 out.print("La fecha y Hora es: "+ FechaHora);
14 %>
15 </center>
16 </body>
17 </html>
Resultado:

Este ejemplo corresponde con un código HTML, que hemos de

generar con JSP, a partir de un array o vector de cadena que
contiene el nombre de 3 personas, Rodrigo, Angelina, Gabriela.
Tal como puede verse queremos que el tamaño del texto se
incremente regularmente.
[directivas2.jsp]
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
9 </head>
10 <body>
11 <%
12 String[] nombres={"Rodrigo","Angelina","Gabriela"};
13 for ( int i = 0; i < nombres.length; i ++ )
14 {
15 %>
16 <font color="green" size="<%=i+2%>">
17 a <i><%= nombres[i]%></i></font><br>
18 <% } %> Fin directiva
19 </body>
20 </html>
Resultado:
En este código vemos como en la línea 12 se crea y asigna

valores al vector nombres, en la línea 13 se establece un bucle for
que termina en la línea 18. Véase que como quiera que sea

hemos de escribir/general el código HTML resultante y hemos de cambiar del

tamaño del font, tenemos que salir del código JSP, para entrar en código
HTML. Vea como se han utilizado expresiones para establecer el tamaño de
los distintos nombres, así como para escribir los propios nombres. Incluso en la
línea 16 vemos cómo una etiqueta propia de HTML puede ser compuesta con
ayuda de código JSP.
La solución aquí presentada a este problema es intencionada, es decir, se ha

provocado intencionadamente la utilización tanto de código HTML como de
código JSP mezclado, y en algún momento pudiera parecer complicado la
utilización combinada de los tipos de códigos. Aunque esto es totalmente
correcto, podría hacerse mucho más inteligible y claro el código haciendo uso
de un objeto implícito llamado out que a través del método println permite
escribir código HTML desde dentro de JSP.
Mostrar el mensaje “buenos días”,“buenas tardes” o “buenas

noches” dependiendo de la hora del día. Para resolver esta
cuestión he considerado tres intervalos: Buenas noches si la hora
es >20 y menor que 6, Buenos días si la hora es >=6 y <= 12,
Buenas tardes y finalmente Buenos días el resto de las horas.
[directivas3.jsp]
2 <!DOCTYPE html>
3 <html>
4 <head>
7 </head>
8 <body>
9 <%
10 java.util.Calendar ahora = java.util.Calendar.getInstance();
11 int hora = ahora.get(java.util.Calendar.HOUR_OF_DAY);
12 %>
13 <H1>
14 <center>
15 <b>Alumnos del ETI ,
16 <i>
17 <% if ((hora > 20) || (hora < 6)) {%>
18 buenas noches.
19 <% } else if ((hora >= 6) && (hora <=12)) {%>
20 buenos días.

21 <% } else {%>

22 buenas tardes.
23 <% };%>
24 </i>
25 </b>
26 <HR>
27 </center>
28 </H1>
29 </body>
30 </html>
Resultado:
Debería comprobar que hemos arrastrado en la sintaxis de las

líneas 10 y 11 el paquete “java.util” donde se define Calendar,
esto ha hecho algo más engorroso la escritura del programa.
Podría probar incorporar una directiva page con el atributo import
para hacer más legible el programa.
Finalmente, puede observar que la mezcla de instrucciones JSP dentro de las

marcas HTML (los scriplets), a veces, dificultan un poco la lectura del
programa, esto se puede arreglar en parte usando el objeto implícito out, pues
su método println permite dentro de un bloque JSP incluir HTML.
Y así por ejemplo, los texto buenos días, buenas tardes y buenos noches
podrían escribirse en lugar de HTML podrían escribirse como JSP en la forma
out.println(“Buenos días”); out.println(“Buenas tardes”); out.println(“Buenas
noches”); .Sencillamente el objeto out con el método println indica al Motor de
JSP que escriba directamente lo que aparece entrecomilla en la salida HTML
que se devolverá al cliente. Esto es válido para cualquier marca HTML, es
decir, si escribimos out.println(“”); estaremos indicando dentro de un scriplet al
Motor que envíe al archivo HTML que se está construyendo como respuesta el
texto plano .

Deseamos producir una página jsp que indique si estamos en fin

de semana o en día laborable.
[directivas4.jsp]
2 <!DOCTYPE html>
3 <html>
4 <head>
7 </head>
8 <body>
9 <center>
10 <%
11 java.util.Calendar ahora = java.util.Calendar.getInstance();
12 int numdia = ahora.get(java.util.Calendar.DAY_OF_WEEK);
13
14 if (numdia == 1 | numdia == 7)
15 { %> <p> FIN DE SEMANA!!</p> <% }
16 else
17 { %> <p> Día laborable...</p> <% } %>
18 <HR>
19 <%
20 switch(numdia) {
21 case 0: %>Sábado.<%; break;
22 case 1: %>Domingo.<%; break;
23 case 2: %>Lunes.<%; break;
24 case 3: %>Martes.<%; break;
25 case 4: %>Miércoles.<%; break;
26 case 5: %>Jueves.<%; break;
27 case 6: %>Viernes.<%; break;
28 default: %>ERROR DÍA!!.<%
29 };%>
30 </center>
31 </body>
32 </html>
Resultado:

1. Investigue: ¿Qué son Elementos de Scripting en JavaScript? – explique.

2. Mencione sobre otras directivas en JavaScript.
3. ¿Cómo se utilizan las expresiones en JavaScript? – Explique.
4. Visualice el video: Java Web - JSP - Elementos JSP - Scriptlet, Declaracion
y Expresion, de la url: https://www.youtube.com/watch?v=c-XQC-LZ_Tk,
haga un comentario acerca del video.

III. PROGRAMACIÓN ORIENTADA A OBJETOS – JSP.
- Métodos y/o procedimientos con JSP.
- Métodos y/o procedimientos con JSP
3.1. MÉTODOS Y/O PROCEDIMIENTOS CON JSP.
JavaBeans es una programación orientada a objetos de interfaz de Sun

Microsystems que le permite construir aplicaciones reutilizables o bloques de
construcción llamados programas componente s que se puede implementar en
una red en cualquier plataforma de sistema operativo principal.
Al igual que Java Applet s, componentes JavaBeans se puede utilizar para

crear páginas Web (u otras aplicaciones) capacidades interactivas, tales como
el cálculo de las tasas de interés o la variación del contenido de la página en
función del usuario o del navegador características.
Para construir un componente con JavaBeans, se debe escribir sentencias de

lenguaje que se utiliza el lenguaje de programación JAVA e incluir
declaraciones JavaBeans que describen componentes propiedades tales como
las características de interfaz de usuario y los eventos que desencadenan una
comunicación con otros equipos en el mismo o en otro lugar en la red.

JavaBeans también proporciona a las aplicaciones Java del documento

compuesto opción que el Open Doc y ActiveX las interfaces ya proporcionan.
jsp: useBean etiqueta de acción
El jsp: useBean etiqueta de acción se utiliza para localizar o crear instancias de
una clase de bean. Si ya se ha creado objeto bean de la clase Bean, que no
crea una función del alcance. Pero si no se crea objeto, se crea una instancia
del bean.
Atributos y Uso de la etiqueta jsp: useBean acción
1. id: se utiliza para identificar el grano en el ámbito especificado.

2. Scope: representa el alcance del grano. Puede que sea la página, solicitud,
sesión o aplicación. El ámbito predeterminado es la página.
a. Pag: especifica que se puede utilizar este frijol dentro de la página JSP. El
ámbito predeterminado es la página.
b. Request: especifica que se puede utilizar este bean desde cualquier
página JSP que procesa la misma petición. Dispone de un ámbito más
amplio que la página.
c. Session: especifica que se puede utilizar este bean desde cualquier
página JSP en la misma sesión si los procesos de la misma petición o no.
Dispone de un ámbito más amplio que la solicitud.
d. Application: especifica que se puede utilizar este bean desde cualquier
página JSP en la misma aplicación. Dispone de un ámbito más amplio
que el período de sesiones.
3. Class: una instancia de la clase bean especificado (es decir, crea un objeto
de la clase bean), pero debe tener sin argumentos o ningún constructor y no
debe ser abstracta.
4. Type: proporciona el grano de un tipo de datos si el grano ya existe en el
ámbito de aplicación. Se utiliza principalmente con la clase o atributo
beanName. Si lo usa sin clase o beanName, no se crea una instancia de
frijol.
5. beanName: crea una instancia del bean mediante el método
java.beans.Beans.instantiate ().
Sintaxis:
<jsp:useBean id= "instanceName" scope= "page | request | session | application"
class= "packageName.className" type= "packageName.className"
beanName="packageName.className | <%= expression >" >
</jsp:useBean>

Un simple ejemplo de etiqueta jsp: useBean acción.

En este ejemplo, simplemente estamos invocando el método de la
clase alumno.
a. Crear un paquete nuevo.
b. Establecer el nombre “paquete_clases”:
c. Crear la clase “datos.java”:

d. Ingresar el siguiente código:

1 //Nombre del paquete
2 package paquete_clases;
3 //Inicio de la clase
4 public class datos {
5 // Crear atributos
6 String usuario;
7 String correo;
8 int edad;
9 //Definir los métodos
10 public void setUsuario( String value )
11 {
12 usuario = value;
13 }
14 public void setCorreo( String value )
15 {
16 correo = value;
17 }
18 public void setEdad( int value )
19 {
20 edad = value;
21 }
22
23 public String getUsuario()
24 { return usuario; }
25
26 public String getCorreo()
27 { return correo; }
28

29 public int getEdad()

30 { return edad; }
31 }
e. Crear archivo JSP “verdatos.jsp”

Llamar a la
clase
1 <jsp:useBean id="objeto" class="paquete_clases.datos" scope="session"/>

2 <HTML>
3 <BODY>
4 Reporte de Datos<BR>
5 <hr>
6 <% objeto.setUsuario("Rodrigo"); %>
Asignar
7 <% objeto.setCorreo("rodrigomans2016@hotmail.com");%>
Valor
8 <% objeto.setEdad(9); %>
9
10 Nombre: <%= objeto.getUsuario() %><BR> Recuperar
11 Correo: <%= objeto.getCorreo() %><BR> Valor
12 Edad: <%= objeto.getEdad() %><BR>
13
14 </BODY>
15 </HTML>
Resultado:
Un simple ejemplo de etiqueta jsp: useBean acción.

En este ejemplo, simplemente estamos invocando el método de la
clase calculadora.

[calculadora.java]
2
3 public class calculadora {
4
5 public int cubo(int n){return n*n*n;
6 }
7 }
[vercubo.jsp]
1 <jsp:useBean id="objeto" class="paquete_clases.calculadora"/>
2
3 <%
4 int resultado = objeto.cubo(5);
5 out.print("cubo de 5 es "+ resultado);
6 %>
Resultado:
Un simple ejemplo de etiqueta jsp:setProperty y jsp:getProperty

acción. En este ejemplo, simplemente estamos invocando el
método de la clase alumnos.
[alumnos.java]
2
3 public class alumnos {
4 private String nombre;
5 private String apellido;
6 private String direccion;
7 private String telefono;
8
9 public void setNombre(String nombre)
10 {
11 this.nombre=nombre;
12

13 }
14 public String getNombre()
15 {
16 return(nombre);
17 }
18
19 public void setApellido(String apellido)
20 {
21 this.apellido=apellido;
22 }
23 public String getApellido()
24 {
25 return(apellido);
26 }
27
28 public void setDireccion(String direccion)
29 {
30 this.direccion=direccion;
31 }
32
33 public String getDireccion()
34 {
35 return(direccion);
36 }
37 public void setTelefono(String telefono)
38 {
39 this.telefono=telefono;
40 }
41 public String getTelefono()
42 {
43 return(telefono);
44 }
45 }
[verificaAlumnos.jsp]
1 <html>
2 <head>
3 <title>Alumnos</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5 </head>
6
7 <jsp:useBean
8 id="alum" Invocar la clase

9 class="paquete_clases.alumnos"
10 scope="application"
11 />
12
13 <body bgcolor="#CCCCCC">
14
15 <div Id="scroll">
16 <br>
17 <table border="0" cellpadding="0" cellspacing="1" width="100%">
18 <tr>
19 <td width="40%" align="center" bgcolor="#cccccc"><font face="Arial"
20 color="#FFFFFF"><b><font face="Georgia, Times New Roman, Times,
21 serif">Resultados</font></b></font></td>
22 <tr>
Activar las
23 </tr>
propiedades
24 </table>
25
26 <br>
27 <jsp:setProperty name="alum" property="nombre" param="nombre"/>
28 <jsp:setProperty name="alum" property="apellido" param="apellido"/>
29 <jsp:setProperty name="alum" property="direccion" param="direccion"/>
30 <jsp:setProperty name="alum" property="telefono" param="telefono"/>
31
32 <% alum.setNombre("Rodrigo"); %>
33 <% alum.setApellido("Saenz"); %> Asignar valor
34 <% alum.setDireccion("Av...."); %>
35 <% alum.setTelefono("5751069"); %>
36
<p align="center"><strong><font face="Georgia, Times New Roman, Times,
37 serif"
38 color="#000099">El
39 alumno</font><font face="Arial" color="#408080" >
40 <jsp:getProperty name="alum" property="nombre" />
41 <jsp:getProperty name="alum" property="apellido" />
<font face="Georgia, Times New Roman, Times, serif"
42 color="#000099">se
43 registro correctamente!!!</font> </font></strong></p>
44
45
<p align="center"><strong><font face="Arial" color="#408080" > <font
46 face="Georgia,
47 Times New Roman, Times, serif" color="#000099">Se
48 ha generado un nuevo alumno</font>
49 <jsp:getProperty name="alum" property="nombre" />

50 <jsp:getProperty name="alum" property="apellido" />

51 <font face="Georgia, Times New Roman, Times, serif"
52 color="#000099">Ok...!
53 </font> </font></strong></p>
Recuperar valor
54
55 <form name="form1" method="post" action="">
56 <center>
57 <input type="submit" name="btnContinuar" value="Continuar">
58 </center>
59 </form> </div> </body> </html>
Resultado:
Un simple ejemplo de usando formulario. En este ejemplo,

simplemente estamos invocando el método de la clase
Estudiante.
[Estudiante.java]
2
3 public class Estudiante implements java.io.Serializable
4 {
5 private String nombre;
6 private String numeroMatricula;
7 public Estudiante()
8 {
9 // código de inicialización
10 }
11
12 public String getNombre()
13 {
14 return nombre;
15 }
16
17 public void setNombre(String nombre)

18 {
19 this.nombre = nombre;
20 }
21
22 public String getNumeroMatricula()
23 {
24 return numeroMatricula;
25 }
26
27 public void setNumeroMatricula(String numeroMatricula)
28 {
29 this.numeroMatricula = numeroMatricula;
30 }
31 }
[formulario.jsp]
1 <html>
2 <head>
3 <title> .:: ::.</title>
4 </head>
5 <body>
6
7 <form action="EstudianteBean.jsp" method="Post">
8
9 Nombre:<input type="text" name="nombre"><br>
10 Numero matrícula:<input type="text" name="numeroMatricula"><br>
11
12 <input type="Submit">
13 <input type="Reset">
14
15 </form>
16 </body>
17 </html>
Resultado:

[EstudianteBean.jsp]
1 <jsp:useBean id="Est" class="paquete_clases.Estudiante" />
2
3 <jsp:setProperty name="Est" property="*" />
4
5 <html>
6 <head>
7 <title>.:: ::.</title>
8 </head>
9 <body>
10 <h1>Datos del estudiante</h1>
11 <br><br>
12 Nombre: <%=Est.getNombre() %>
13 <br>
14 Número de matrícula: <%=Est.getNumeroMatricula() %><br>
15 </body>
16 </html>
Resultado:
Para usar un bean en una página JSP, se especifica mediante un

tag de acción tal como sigue:
<jsp:useBean id="Est" class="Estudiante" />
Donde el id se refiere al código HTML de donde extraerá la información (un

formulario posiblemente) y class se refiere al nombre de la clase del bean. Si
quiere utilizarse un bean que ha sido serializado en, por ejemplo, el fichero
estudiante.ser, la sintaxis del tag varía ligeramente:
<jsp:useBean id="Est" beanName="estudiante.ser" type="Estudiante" />

A continuación se muestra como asignar el valor Rodrigo al atributo nombre

del bean:
<jsp:setProperty name="Est" property="nombre" value="Rodrigo" />
La información puede recuperarse del bean de dos maneras diferentes:
<jsp:getProperty name="Est" property="nombre"/>

o bien
<%=Est.getNombre()%>
Generalmente los atributos (o mejor dicho cuando se habla de beans,

propiedades), se pasan al bean vía un formulario HTML. Si los nombres de las
propiedades del bean son los mismos que los nombres de los campos del
formulario, los valores del formulario pueden pasarse al bean muy fácilmente
con la siguiente acción:
<jsp:setProperty name="Est" property="*" />
Caso de no ser así (no coinciden los nombres de las propiedades y de los
campos del formulario), la asignación tendríamos que hacerla de manera
manual:
<jsp:useBean id="Est" class="Estudiante" />

<jsp:setProperty name="Est" property="nombre" value =
"<%=request.getParameter("nombre_estudiante")%>" />
La visibilidad de los JavaBeans

Existen las mismas visibilidades para los JavaBeans que para el resto de
variables que puede haber dentro de un JSP. La visibilidad se define dentro del
tag <jsp:useBean>. A continuación se muestran algunos ejemplos:
<JSP:useBean id="Est" class="Estudiante" scope="page"/>

<JSP:useBean id="Est" class="Estudiante" scope="request"/>
<JSP:useBean id="Est" class="Estudiante" scope="session"/>
<JSP:useBean id="Est" class="Estudiante" scope="application"/>

1. Investigue: ¿Cómo se aplica una herencia en JavaBean? – explique.

2. Mencione sobre otros conceptos de POO en JavaScript.
3. ¿Cómo se utilizan los constructores en JavaBean? – Explique.
4. Visualice el video: Que es java bean, de la url:
https://www.youtube.com/watch?v=6TbsCcNXR_M, haga un comentario
acerca del video.

IV. SERVLET.
- Composición y sus funciones.

- Programación de esquema de funcionamiento.
- Gestión de peticiones Get – Post Funcionalidad Servlet.
- Ejecución de un servlet a través de un formulario JSP.
- Composición y sus funciones.
- Programación de esquema de funcionamiento.
- Gestión de peticiones Get – Post Funcionalidad Servlet.
- Ejecución de un servlet a través de un formulario JSP.
4.1. COMPOSICIÓN Y SUS FUNCIONES.
Los servlets proporcionan un método basado en componentes, independiente

de la plataforma para crear aplicaciones basadas en la Web, sin las
limitaciones de rendimiento de los programas CGI. Servlets tienen acceso a
toda la familia de las API de Java, incluida la API JDBC para acceder a bases
de datos empresariales.
¿Qué son los Servlets?

Java servlets son programas que se ejecutan en un servidor web o de
aplicaciones y actúan como una capa intermedia entre una solicitud procedente
de un navegador Web u otro cliente HTTP y bases de datos o aplicaciones en
el servidor HTTP.

El uso de servlets, puede obtener información de los usuarios a través de

formularios de páginas web, los registros actuales de una base de datos u otra
fuente, y crear páginas web de manera dinámica.
Los servlets Java a menudo sirven al mismo propósito que los programas
implementados mediante el Common Gateway Interface (CGI). Pero Servlets
ofrecen varias ventajas en comparación con el CGI.
• El rendimiento es significativamente mejor.

• Servlets se ejecutan dentro del espacio de direcciones de un servidor Web.
No es necesario para crear un proceso independiente para manejar cada
solicitud de cliente.
• Los servlets son independientes de la plataforma porque están escritos en
Java.
• Gerente de seguridad de Java en el servidor impone una serie de
restricciones para proteger los recursos en un equipo servidor. Así que los
servlets son de confianza.
• La funcionalidad completa de las bibliotecas de clases de Java está
disponible a un servlet. Puede comunicarse con los applets, bases de datos
u otro software a través de las tomas de corriente y los mecanismos de RMI
que usted ha visto ya.
Servlets Arquitectura:
Siguiente diagrama muestra la posición de Servelts en una aplicación Web.
Servlets Tareas:
Servlets realizan las siguientes tareas principales:
• Leer los datos explícitos enviados por los clientes (navegadores). Esto
incluye un formulario HTML de una página Web o también podría provenir de
un programa cliente HTTP personalizado applet.
• Leer los datos de la solicitud HTTP implícitos enviadas por los clientes
(navegadores). Esto incluye galletas, tipos de medios y sistemas de
compresión el navegador entiende, y así sucesivamente.

• Procesar los datos y generar los resultados. Este proceso puede requerir
hablar con una base de datos, realice una llamada RMI o CORBA, se invoca
un servicio Web, o el cálculo de la respuesta directa.
• Enviar los datos explícitos (es decir, el documento) a los clientes
(navegadores). Este documento puede ser enviado en una variedad de
formatos, incluyendo texto (HTML o XML), binarios (imágenes GIF), Excel,
etc.
• Enviar la respuesta HTTP implícita a los clientes (navegadores). Esto incluye
decirle a los navegadores u otros clientes qué tipo de documento se
devuelve (por ejemplo, HTML), el establecimiento de las galletas y los
parámetros de almacenamiento en caché, y otras tareas.
Servlets Paquetes:
Java Servlets son clases Java se ejecutan por un servidor web que tiene un
intérprete, que es compatible con la especificación de Java Servlet.
Los servlets pueden ser creados usando los javax.servlet y javax.servlet.http

paquetes, que son una parte estándar de la edición empresarial de Java, una
versión ampliada de la biblioteca de clases de Java que apoya proyectos de
desarrollo a gran escala.
Estas clases implementan las especificaciones Java Servlet y JSP. En el

momento de escribir este tutorial, las versiones son de Java Servlet 2.5 y JSP.
Java servlets se han creado y compilado al igual que cualquier otra clase de
Java. Después de instalar los paquetes de servlets y añadirlos a la ruta de
clases de su ordenador, puede compilar con servlets compilador Java del JDK
o cualquier otro compilador actual.
Ciclo de Vida
Un ciclo de vida servlet se puede definir como el proceso completo desde su
creación hasta la destrucción. Los siguientes son los caminos seguidos por un
servlet
• El servlet se inicializa llamando al método init().

• El servlet llamadas del método service() para procesar una petición del
cliente.
• El servlet se termina llamando al método destroy().
Ahora vamos a discutir los métodos de ciclo de vida en los detalles.

El método init():
El método init está diseñado para ser llamado sólo una vez. Se llama cuando
se crea por primera vez el servlet, y no volvió a llamar para cada petición del
usuario. Por lo tanto, se utiliza para las inicializaciones de una sola vez, al igual
que con el método init de applets.
El servlet se crea normalmente cuando un usuario invoca una primera dirección

URL correspondiente al servlet, pero también se puede especificar que el
servlet se carga cuando se inicia por primera vez el servidor.
Cuando un usuario invoca un servlet, una única instancia de cada servlet se

crea, con cada petición de usuario que resulta en un nuevo hilo que se
traspasa a doGet o doPost según corresponda. El método init () simplemente
crea o carga algunos datos que serán utilizados a lo largo de la vida del servlet.
La definición del método init es el siguiente:
public void init() throws ServletException {

// Initialization code...
}
El método service():
El método de servicio() es el principal método para llevar a cabo la tarea actual.
El contenedor de servlets (es decir, el servidor web) llama al método service()
para manejar las peticiones procedentes del cliente (navegadores) y para
escribir la respuesta con formato de vuelta al cliente.
Cada vez que el servidor recibe una petición de un servlet, el servidor genera
un nuevo hilo y llamadas de servicio. El método de servicio () comprueba el tipo
de petición HTTP (GET, POST, PUT, DELETE, etc.) y llama a doGet, doPost,
doPut, doDelete, etc. Los métodos según el caso.
Aquí está la firma de este método:
public void service(ServletRequest request,

ServletResponse response)
throws ServletException, IOException{
}
El método de servicio() es llamado por el método de envase y servicio invoca

Doge, doPost, doPut, doDelete, etc. Los métodos según el caso. Así que usted
no tiene nada que ver con el método de servicio(), pero se reemplaza

cualquiera doGet () o doPost () dependiendo de qué tipo de solicitud que reciba

del cliente.
El doGet () y doPost () se utilizan con mayor frecuencia métodos con cada

solicitud de servicio. Aquí está la firma de estos dos métodos.
El Método doGet()
Una petición GET resultados de una solicitud normal para una URL o desde un
formulario HTML que no tiene ningún método específico y debe ser manejado
por el método doGet ().
public void doGet(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {
// Servlet code
}
El doPost () Método
Una solicitud POST resultados de un formulario HTML que enumera
específicamente POST como el método y debe ser manejado por el método
doPost ().
public void doPost(HttpServletRequest request,

// Servlet code
}
El método destroy ():

El método destroy () se llama sólo una vez al final del ciclo de vida de un
servlet. Este método le da a su servlet la oportunidad de cerrar las conexiones
de base de datos, detener subprocesos de fondo, escribir listas de cookies o
golpear el recuento en el disco, así como realizar otras actividades de limpieza.
Después se llama el método destroy (), el objeto servlet está marcado para la
recolección de basura. La definición del método de destruir el aspecto
siguiente:
public void destroy() {

// Finalization code...
}

Arquitectura DIGRAM:
La siguiente figura muestra un escenario típico ciclo de vida del servlet.
• En primer lugar las solicitudes HTTP que llegan al servidor se delegan en el

contenedor de servlets.
• El contenedor de servlets carga el servlet antes de invocar el método de
servicio ().
• A continuación, el contenedor de servlets maneja varias solicitudes de
desove varios subprocesos, cada hilo de ejecutar el método de servicio de
una sola instancia del servlet.
4.2. PROGRAMACIÓN DE ESQUEMA DE FUNCIONAMIENTO.
Un Servlet se escribe extendiendo la clase HttpServlet la que tiene los

siguientes métodos declarados pero vacíos.
• init() : Es invocado por el servidor cuando el servlet se usa por primera vez
(cuándo sucede esto depende del servidor).
• doGet(HttpServletRequest req, HttpServletResponse res) throws
ServletException, IOException: Es invocado cada vez que un servlet es
contactado po un requerimiento GET (por default).
• doPost(HttpServletRequest req, HttpServletResponse res) throws
ServletException, IOException
Es invocado cada vez que un servlet es contactado po un requerimiento POST.
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyServlet extends HttpServlet {
public void init() {

//Sobreescribir para que haga lo que queramos
}
public void doGet ( HttpServletRequest request,
}

public void doPost( HttpServletRequest request,

}
}
El parámetro HttpServletRequest.
HttpServletRequest es la clase del primer parametro que reciben los métodos
doGet y doPost. Provee acceso a:
• Información acerca del cliente (por ejemplo, los parámetros que envió, la
versión del protocolo que está usando, la IP del cliente, etc.
• Además da acceso a un, ServletInputStream que puede ser usado por el
servidor para recibir información adicional (por ejemplo un archivo que el
cliente quiere “uplodear” cuando se ha usado el método POST o PUT.
El parámetro HttpServletResponse
• HttpServletResponse es la clase del segundo argumento que reciben doGet
y doPost.
• Provee métodos para :
o Decirle al browser cuál es el tipo MIME de la respuesta que se le va a dar
al cliente.
o Obtener un objeto ServletOutputStream y un PrintWriter través del cual
podemos mandar código HTML dinámicamente al cliente.
o Mandar otras informaciones importantes (cookies, redireccionamineto,
refresco, etc…)
Un simple ejemplo usando Servlet.
1. Crear un nuevo Servlet:
2. Ingresar el nombre:

3. Ingresar el siguiente código:

1 //Importar las clases necesarias
2 import java.io.IOException;
3 import java.io.PrintWriter;
4 import javax.servlet.ServletException;
5 import javax.servlet.annotation.WebServlet;
6 import javax.servlet.http.HttpServlet;
7 import javax.servlet.http.HttpServletRequest;
8 import javax.servlet.http.HttpServletResponse;
9 //Para usar la clase Date
10 import java.util.Date;
11 //Ruta del archivo Servlet
12 @WebServlet(urlPatterns = {"/EjemploServlet1"})
13 //Todo servlet extiende HttpServlet
14 public class EjemploServlet1 extends HttpServlet {
15 //Sobreescribir método doGet
16 public void doGet ( HttpServletRequest request,
17 HttpServletResponse response) throws
18 ServletException, IOException {
19 //Decirle al browser el tipo de
20 //Contenido que va a recibir
21 //Como respuesta
22 response.setContentType("text/html");
23 // Obtiene una “linea directa” para escribirle
24 // al browser contenido HTML
25 PrintWriter out = response.getWriter();
26 //Mandar (imprimir) info al browser
27 out.println("<HTML>");
28 out.println("<H1> Mi Primer Servlet - ETI </H1>");
29 //Obtiene la fecha del sistema
30 out.println("<BR> <H2>Fecha y hora: "+(new Date())+"<H2>");
31 out.println("</HTML>");

32 //Cerrar conexión (recién aquí se manda todo)

33 out.close();
34 }
35
36
37 }
4. Ejecutar el archivo Servlet.
5. Resultado:
Implementar un contador web

Cuenta cuantas veces se contacta al servlet (con GET), también
le mostrará al cliente su número IP.

8
9 @WebServlet(urlPatterns = {"/EjemploServlet2"})
10 public class EjemploServlet2 extends HttpServlet {
11 // Inicializar el contador
12 int contador = 0;
13
14 public void doGet ( HttpServletRequest req,
15 HttpServletResponse resultado) throws
17 // Incrementa el contador cada vez que se ejecuta doGet
18 contador++;
19 // Totalmente necesario
20 PrintWriter out = resultado.getWriter();
21 resultado.setContentType("text/html");
22 //Mandar (imprimir) info al browser
23 out.println("<H1> Web con Contador de visitas - ETI</H1>");
24 out.println("<HR>");
25 out.println("Se accede a este servlet "+ contador+" veces ");
27 out.println("El Ip de tu pc es: "+req.getRemoteHost());
29 out.close();
30 }
31 }
Resultado:

Qué pasa si el servidor se cae y se reinicia el sistema?

Contador volverá a 0, para recordar el valor que tenía esta variable
incluso si se cae el sistema la iremos escribiendo en un archivo
cada vez que cambia su valor.
Al principio el servlet lee el valor inicial de la variable desde un
archivo (si existía), si no, vamos a empezar con el valor = 0.
[ContadorConFichero.java]
1 import java.io.*;
2 import javax.servlet.*;
3 import javax.servlet.http.*;
7
8 @WebServlet(urlPatterns = {"/ContadorConFichero"})
9 public class ContadorConFichero extends HttpServlet {
10 //Inicializar el contador
11 int contador = 0;
12
13 public void init() {
14 try {
15 //Tratar de abrir el archivo
16 BufferedReader in = new BufferedReader(new FileReader("contador.txt"));
17 //Leer una linea
18 String l = in.readLine();
19 //Convertir lo leido a valor entero
20 contador = Integer.parseInt(l);
21 }catch ( IOException e) {
22 }
23
24 }
25 public void doGet ( HttpServletRequest req,
26 HttpServletResponse res) throws
28 contador++;
29 //Despues de incrementar,
30 //abrir el archivo (sobreescribirlo)
31 PrintWriter outFile = new PrintWriter(new FileWriter("contador.txt"));
32 //Escribir el nuevo número
33 outFile.println(contador);
34 //Cerrar archivo
35 outFile.close();

36 PrintWriter outBrowser = res.getWriter();

37 res.setContentType("text/html");
38 outBrowser.println("<H1> Una web con contador </H1>" + contador);
39 outBrowser.println("<HR>");
40 outBrowser.println("El Ip de tu pc es: "+req.getRemoteHost());
41 outBrowser.println("<HR>");
42 outBrowser.close();
43 }
44 }
Crea el archivo “contador.txt” en la siguiente ruta:
Resultado:
Vamos a crear un servlet que genere un número aleatorio entre 1

y 100 cada vez que es contactado y lo muestra al cliente junto
con la IP del computador del cliente, además muestra el número
más grande generado hasta ahora y la IP del computador para el
cual lo generó.
La dirección del computador del cliente puede ser obtenida

String s = request.getRemoteHost(); Retornar el numero de IP ( 127.0.0.1)
String s = request.getRemoteAddress(); Retornar el nombre del servidor
(www.eti.edu.pe)
Un número aleatorio entre 1 y 100 se genera con la siguiente instrucción en

Java
int numero = (int)(1 + Math.random()*100);

[NumeroAleatorio.java]
8
9 @WebServlet(urlPatterns = {"/NumeroAleatorio"})
10 public class NumeroAleatorio extends HttpServlet {
11 //Inicializacion variables para guardar
12 //La IP y el valor del máximo
13 int maxNumero = 0;
14 String maxIP = "";
15
16 public void doGet(HttpServletRequest request,
17 HttpServletResponse response) throws
18 IOException, ServletException {
19 //Generación número aleatorio
20 int aleatorio = (int)(1 + Math.random()*100);
21 //Obtencion ip del cliente
22 String ip = request.getRemoteAddr();
23 //Actualización de los datos
24 //del máximo generado
25 if (aleatorio > maxNumero) {
26 maxNumero = aleatorio;
27 maxIP = ip;
28 }
29 //Enviar info al cliente
32 out.println("<h1> Bienvenido </h1><br>");
33 out.println("<h2> Su dirección IP es "+ ip+ "<br>");
34 out.println("Su número es "+aleatorio+"<br><br>");
35 out.println("El numero mayor generado es "+maxNumero);
36 out.println("<br>Fue generado para "+maxIP);
37 out.close();
38 }
39 }

Resultado:
4.3. GESTIÓN DE PETICIONES GET – POST FUNCIONALIDAD SERVLET
Vamos a ver un ejemplo, un poco más complicado. Si llamamos un

servlet desde un formulario HTML, podremos hacerlo de dos
formas: GET y POST. Con la primera los parámetros del formulario
están incluidos la url que se utiliza para invocar el servlet y en el
segundo caso los parámetros se almacenan en un buffer especial del servidor.
Para procesar el primer tipo de peticiones (GET) está el método doGet
mientras que para el segundo tenemos el método doPost . La implementación
por defecto del método service es capaz de determinar el tipo de petición HTTP
que en un momento dado recibe el servlet. Una vez identificada llama o al
método doGet o al doPost según el caso. Como, en la mayoría de los casos,
seremos nosotros quien programe el formulario que llame al servlet, sabremos
qué tipo de llamada se hará, por lo que podemos optar por redefinir uno sólo de
los métodos. En el caso de que no lo supiéramos se deben implementar los
métodos doGet y doPost.
Un servlet que tiene diferente respuesta en función de la llamada que se le

hace es el ejemplo GetPost.java cuyo código fuente era el siguiente:
1. Crear el servlet [NumeroAleatorio.java].

8 //--------------------------------------
9 import javax.servlet.ServletConfig;

10 //--------------------------------------
11
12 @WebServlet(urlPatterns = {"/ejemploGetPost"})
13 public class ejemploGetPost extends HttpServlet {
14
15 public void init(ServletConfig conf)
16 throws ServletException {
17 super.init(conf);
18 }
19
20 public void doGet(HttpServletRequest req, HttpServletResponse res)
21 throws ServletException, IOException
22 {
24 PrintWriter out = res.getWriter();
25 out.println("<html>");
26 out.println("<body>");
27 out.println("<h1> Aquì llamamos a GET</h1>");
28 out.println("</body>");
29 out.println("</html>");
30 }
31
32 public void doPost(HttpServletRequest req, HttpServletResponse res)
33 throws ServletException, IOException
34 {
39 out.println("<h1> Aquì llamamos a POST</h1>");
42 }
43 }
2. Crear las siguientes pàginas web.

[ejemploget.html]
1 <html>
2 <body>
3 <h1>Metodo GET</h1>
4 <form method="GET" action="/aplicacionweb1/ejemploGetPost">
5 <input type="submit">
6 </form>

7 </body>
8 </html>
[ejemplopost.html]
1 <html>
2 <body>
3 <h1>Metodo POST</h1>
4 <form method="POST" action="/aplicacionweb1/ejemploGetPost">
5 <input type="submit">
6 </form>
7 </body>
8 </html>
Resultado:
4.4. EJECUCIÓN DE UN SERVLET A TRAVÉS DE UN FORMULARIO JSP.
Normalmente los servlets tendrán parámetros o fuentes de información que le

darán su aspecto dinámico. Es decir, para generar una simple página HTML no
nos complicamos tanto la vida, se escribe la página HTML y se ha terminado.
Las fuentes de información de las que un servlet hace uso, pueden ser varias:
el propio servlet, el servidor web, ficheros o bases de datos a los que pueda
acceder o parámetros que le pase el cliente. De todas estas fuentes, nos
interesan los accesos a bases de datos que veremos más adelante y los
pa;rámetros que nos pasa el cliente mediante formularios HTML.
Cuando pasamos parámetros a través de un formulario, en los Servlets a

través de la clase ServletRequest, disponemos de los siguientes métodos para
su tratamiento:

• String getParameter(String nombre): Nos devuelve el valor del parámetro

cuyo nombre le indicamos. Si la variable no existiera o no tuviese ningún
valor, devolvería null.
• Enumerate getParameterNames(): Nos devuelve una enumeración de los
nombres de los parámetros que recibe el servlet.
• Enumerate getParameterValues(String): Nos devuelve los valores que toma
un parámetro dado, esto es útil para listas de selección múltiple donde un
parámetro tiene más de un valor.
Veamos un ejemplo de un pequeño formulario que tenga distintos

tipos de parámetros, se los envíe a nuestro servlet y éste los
muestre por pantalla (aún no sabemos guardarlos en la base de
datos). El formulario los llamaremos formulario.html.
[formulario.html]
1 <html>
3 <body>
4 <h1>Formulario</h1>
5 <form method="POST" action="/aplicacionweb1/llamarFormulario">
6 Nombre: <INPUT TYPE="TEXT" NAME="nombre"><BR>
7 Primer Apellido:<INPUT TYPE="TEXT" NAME="apellido1"><BR>
8 Segundo Apellido:<INPUT TYPE="TEXT" NAME="apellido2"><BR>
9 <hr>
10 Correo electronico: <INPUT TYPE="TEXT" NAME="email"><BR>
11 Clave: <INPUT TYPE="PASSWORD" NAME="clave"><BR>
12 <hr>
13 Comentario: <TEXTAREA NAME="comenta" ROWS=3 COLS=40>
14 </TEXTAREA><BR>
15 <hr>
16 Sexo:<BR>
17 <INPUT TYPE="RADIO" NAME="sexo" VALUE="hombre">Hombre<BR>
18 <INPUT TYPE="RADIO" NAME="sexo" VALUE="mujer">Mujer<BR>
19
20 Areas de interes:<br>
21 <SELECT NAME="intereses" MULTIPLE>
22 <OPTION>Informatica</OPTION>
23 <OPTION>Derecho</OPTION>
24 <OPTION>Matematicas</OPTION>
25 <OPTION>Fisica</OPTION>
26 <OPTION>Musica</OPTION>
27 </SELECT>

28
29 <center><input type="submit" value="Enviar"></center>
30 </form>
31 </body>
32 </html>
Resultado:
Ahora veamos primero un servlet que conociendo de antemano los distintos

parámetros que va a recibir los vaya mostrando en una página HTML. El servlet
lo llamaremos llamarFormulario.java y su código es:
[llamarFormulario.java]

8 //--------------------------------------
10 //--------------------------------------
11
12 @WebServlet(urlPatterns = {"/llamarFormulario"})
13 public class llamarFormulario extends HttpServlet {
15 throws ServletException {
17 }
18
19 public void doGet(HttpServletRequest req, HttpServletResponse res)
20 throws ServletException, IOException {
23
26 out.println("<h1>Parametros del servlet desde un formulario HTML</h1>");
27 out.println("<br> Nombre:"+req.getParameter("nombre") );
28 out.println("<br> Primer apellido:"+req.getParameter("apellido1") );
29 out.println("<br> Segundo apellido:"+req.getParameter("apellido2") );
30 out.println("<br> Correo electrónico:"+req.getParameter("email") );
31 out.println("<br> Contraseña:"+req.getParameter("clave") );
32 out.println("<br> Comentario:"+req.getParameter("comenta") );
33 out.println("<br> Sexo:"+req.getParameter("sexo") );
34 out.println("<br> Areas de interés:"+req.getParameter("intereses") );
37 }
38
39 public void doPost(HttpServletRequest req, HttpServletResponse res)
41 doGet(req, res);
42 }
43 }
Resultado:

Si en la lista de selección múltiple escogemos más de un valor en la

implementación actual sólo mostraría la primera elección, si quisiéramos
mostrar todos los valores deberíamos de usar getParameterValues("intereses")
e ir recorriendo y mostrando cada uno de los valores seleccionados del
parámetro intereses.
Otra posible implementación del servlet llamarFormulario2.java sería uno que

mostrase los parámetros y sus valores sin tener que conocerlos previamente.
El código sería:
[llamarFormulario2.java]
8 //--------------------------------------
10 import java.util.*;
11 //--------------------------------------
12
13 @WebServlet(urlPatterns = {"/llamarFormulario2"})
14 public class llamarFormulario2 extends HttpServlet {
16 throws ServletException
17 {

19 }
20
21 public void doGet(HttpServletRequest request,
22 HttpServletResponse response)
24
27
28 //Escribimos el principio de la página HTML
31 out.println("<h1>Parámetros del servlet desde un formulario HTML</h1>");
32
33 //cogemos los nombres de los parametros
34 Enumeration paramNames = request.getParameterNames();
35
36 //vamos mostrando los parámetros en unwhile
37 while(paramNames.hasMoreElements()) {
38 //cogemos el siguiente parámetro
39 String paramName = (String)paramNames.nextElement();
40
41 //Mostramos el nombre del parámetro
42 out.print(paramName + " = ");
43
44 //Cogemos los valores del parámetro
45 String[] paramValues = request.getParameterValues(paramName);
46
47 //Miramos si tiene más de un valor
48 if (paramValues.length == 1) {
49 //Si tiene un sólo valor, miramos si está vacío o no
50 String paramValue = paramValues[0];
51 if (paramValue.length() == 0)
52 out.println("<i>Sin valor</i><br>");
53 else
54 out.println(paramValue + "<br>");
55 }
56 else {
57 //Si tiene más de un sólo valor, los mostramos
58 for(int i=0; i<paramValues.length; i++)
59 out.println(paramValues[i] + ", ");
60 out.println("<br>");
61 }

62 }//end while
63
64 //Escribimos el final de la página HTML
67 }
68
69 public void doPost(HttpServletRequest request,
72 doGet(request, response);
73 }
74 }
Resultado:
1. Investigue: ¿Cómo se aplica un Mètodo en Servlet? – explique.

2. Mencione sobre Servidores J2EE- compatibles.
3. ¿Cómo se utilizan los ServLet en Apache Tomcat? – Explique.
4. Visualice el video: Java Pasar parametros a un Servlet Get-Post, de la url:
https://www.youtube.com/watch?v=WjzXK81L-kw, haga un comentario
acerca del video.

V. SESIONES.
- Interface HttpSession y Métodos.
- Interface HttpSession y Métodos.
5.1. INTERFACE HTTPSESSION Y MÉTODOS.
¿Qué es una sesión?

Protocolo HTTP y servidores Web son sin estado, lo que significa que para el
servidor web cada solicitud es una solicitud nueva que se debe procesar y por
ello no puede identificar si viene desde el cliente que enviando la solicitud
anteriormente.
Pero a veces en aplicaciones web, debemos saber quién es el cliente y

procesar la solicitud en consecuencia. Por ejemplo, una aplicación de carrito de
la compra debe saber quién está enviando la solicitud para agregar un
elemento y en que cesta el artículo tiene que ser añadido o que está enviando
la solicitud de pago para que pueda cargar el importe del cliente.
La Sesión es un estado conversional entre cliente y servidor y se puede

consistir de petición y respuesta entre el cliente y el servidor múltiple. Desde
HTTP y el servidor Web ambos son sin estado, la única manera de mantener
una sesión es cuando se pasa cierta información única acerca de la sesión (ID
de sesión) entre el servidor y el cliente en cada petición y respuesta.

Hay varias maneras a través del cual podemos ofrecer identificador único de
solicitud y respuesta.
• Autenticación de usuario. Esta es la forma muy común en la que el usuario

puede proporcionar las credenciales de autenticación en la página de inicio
de sesión y luego nos puede pasar la información de autenticación entre el
servidor y el cliente para mantener la sesión. Esto no es un método muy
eficaz, ya que no funcionará si el mismo usuario se registra desde diferentes
navegadores.
• HTML Campo oculto. Nos puede crear un campo oculto único en el HTML y
cuando el usuario comienza a navegar, podemos establecer su valor único
para el usuario y realizar un seguimiento de la sesión. Este método no se
puede utilizar con enlaces porque necesita la forma que se presentará cada
vez petición se hace desde el cliente al servidor con el campo oculto.
También que no es seguro, ya que podemos obtener el valor del campo
oculto el código HTML y lo utilizan para cortar la sesión.
• Reescritura de URL. Nos puede añadir un parámetro identificador de sesión
en cada petición y respuesta para realizar un seguimiento de la sesión. Esto
es muy tedioso, ya que necesitamos para realizar un seguimiento de este
parámetro en cada respuesta y asegurarse de que no está chocando con
otros parámetros.
• Galletas. Cookies son pequeñas piezas de información que se envía por el
servidor web en la cabecera de la respuesta y se almacena en las cookies
del navegador. Cuando el cliente hace necesaria otra solicitud, se añade la
cookie a la cabecera de la solicitud y podemos utilizarla para realizar un
seguimiento de la sesión. Podemos mantener una sesión con cookies, pero
si el cliente desactiva las cookies, entonces no va a trabajar.
• API de administración de sesión. Se construye en la parte superior de los
métodos anteriores para el seguimiento de sesión. Algunos de los
principales inconvenientes de todos los métodos anteriores son:
o La mayoría de las veces no queremos sólo para realizar un seguimiento
de la sesión, se tienen que almacenar algunos datos en la sesión que
podemos utilizar en futuras peticiones. Esto requerirá un gran esfuerzo si
tratamos de implementar esto.
o Todos los métodos anteriores no están completos en sí mismos, todos
ellos no va a funcionar en un escenario particular. Así que necesitamos
una solución que puede utilizar estos métodos de seguimiento de sesión
para proporcionar gestión de sesiones en todos los casos.
Es por eso que necesitamos la API de administración de sesión y la tecnología

J2EE Servlet API viene con la gestión de sesiones que podemos utilizar.

Administración de sesiones utilizando cookies.
Los cookies se utilizan mucho en las aplicaciones web para

personalizar la respuesta sobre la base de su elección o para
realizar un seguimiento de la sesión. Antes de seguir adelante con el Servlet
API de administración de sesión, me gustaría mostrar cómo podemos hacer un
seguimiento de la sesión con las galletas a través de una pequeña aplicación
Web.
1. Crear la siguiente página we: [FormularioAcceso.html]
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7
8 <form action="/aplicacionweb1/IngresarAcceso" method="post">
9
10 Usuario: <input type="text" name="usuario">
11 <br>
12 Clave: <input type="password" name="clave">
13 <br>
14 <input type="submit" value="Ingresar">
15 </form>
16 </body>
17 </html>
2. Crear el siguiente Servlet: [IngresarAcceso.java]

1 // Agregar librerias
4 import javax.servlet.RequestDispatcher;
7 import javax.servlet.http.Cookie;
11 // Definir la ruta de acceso
12 @WebServlet(urlPatterns = {"/IngresarAcceso"})
13 //Crear la clase principal
14 public class IngresarAcceso extends HttpServlet {
15 //Declarar los sgtes atributos
16 private static final long serialVersionUID = 1L;
17 private final String usuarioID = "rodrigo";
18 private final String claveID = "12345678";
19 //Crear el mètodo
20 protected void doPost(HttpServletRequest request,
21 HttpServletResponse response) throws ServletException,
22 IOException {
23 // Obtener los parámetros de solicitud de ID de usuario y la contraseña
24 String varusuario = request.getParameter("usuario");
25 String varclave = request.getParameter("clave");
26 //Evaluar datos
27 if(usuarioID.equals(varusuario) && claveID.equals(varclave)){
28 //Declarar el cookie
29 Cookie loginCookie = new Cookie("user",varusuario);
30 // Establecer la galleta expire en 3 minutos
31 loginCookie.setMaxAge(3*60);
32 // Se agrega el cookie en la memoria RAM
33 response.addCookie(loginCookie);
34 //Redireccionar hacia otra pàgina
35 response.sendRedirect("verificar.jsp");
36 }else{
37 // Si los datos no son correctos
38 // Se envia un mensaje por pantalla
RequestDispatcher rd =
39 getServletContext().getRequestDispatcher("/FormularioAcceso.html");
40 PrintWriter imprimir= response.getWriter();
41 imprimir.println("<font color=red>Usuario o contraseña son incorrectas.</font>");
42 rd.include(request, response);

43 }
44 }
45 }
3. Crear el archivo JSP: [verificar.jsp]
1 <%@ page language="java" contentType="text/html; charset=US-ASCII"

2 pageEncoding="US-ASCII"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
9 </head>
10 <body>
11 <%
12 //Declarar variable
13 String nombreUsuario = null;
14 //Declarar arreglo para obtener los valores de la memoria
15 Cookie[] cookies = request.getCookies();
16 //Evaluar si el cookie existe
17 if(cookies !=null){
18 //Recorrer los varlores del cookie
19 for(Cookie cookie : cookies){
20 if(cookie.getName().equals("user")) nombreUsuario = cookie.getValue();
21 }
22 }
23 // Si el cookie no existe se redirecciona hacia la pàgina
24 if(nombreUsuario == null) response.sendRedirect("FormularioAcceso.html");
25 %>
26
27 <h3>Bienvenido <%=nombreUsuario %>, al sistema - ETI.</h3>
28 <br>
29 <form action="cerrarSesion" method="post">
30 <input type="submit" value="Cerrar Sesion" >
31 </form>
32 </body>
33 </html>
4. Crear el siguiente Servlet: [cerrarSesion.java]

1 //Importar las librerias

5 import javax.servlet.http.Cookie;
9 import javax.servlet.http.HttpSession;
10 // Definir la ruta de acceso
11 @WebServlet(urlPatterns = {"/cerrarSesion"})
12 public class cerrarSesion extends HttpServlet
13 {
14 //Declarar el atributo
16 //Crear el mètodo
17 protected void doPost(HttpServletRequest request,
19
21 //Definir el tipo de archivo
23 // Crear la variable cookie
24 Cookie loginCookie = null;
25 // Obtener el dato del cookie
26 // almacenado en la memoria RAM
27 Cookie[] cookies = request.getCookies();
28 // Obtener los valores
29 if(cookies != null){
30 // Recorrer con un bucle
31 for(Cookie cookie : cookies){
32 if(cookie.getName().equals("user")){
33 loginCookie = cookie;
34 break;
35 }
36 }
37 }
38 if(loginCookie != null){
39 //Eliminar los valores del cookie
40 loginCookie.setMaxAge(0);
41 response.addCookie(loginCookie);
42 }
43 //Redireccionar hacia la pàgina

44 response.sendRedirect("FormularioAcceso.html");
45 }
46 }
Formulario de acceso:
Si los datos son correctos:
Nota: No nos olvidemos que la sesión tiene una duración de 3 minutos.
Si los datos son incorrectos:
Cuando cerramos sesión:

Gestión de la sesión con HttpSession.
El concepto de Session es individual de cada usuario que se conecta a nuestra

aplicación y la información no es compartida entre ellos. Así pues cada usuario
dispondrá de su propio HashMap en donde almacenar la información que resulte útil
entre páginas
Vamos a ver un ejemplo utilizando dos Servlets básicos en el cual

un servlet almacena datos en la sessión (concretamente un objeto
producto) y otro servlet lee los datos de la session y los muestra
por pantalla.
A. Crear la clase : [Producto.java]
1 public class Producto {

2
3 private int id;
4 private String concepto;
5 private double importe;
6 public int getId() {
7 return id;
8 }
9 public void setId(int id) {
10 this.id = id;
11 }
12 public String getConcepto() {
13 return concepto;
14 }
15 public void setConcepto(String concepto) {
16 this.concepto = concepto;
17 }
18 public double getImporte() {

19 return importe;
20 }
21 public void setImporte(double importe) {
22 this.importe = importe;
23 }
public Producto(int id, String concepto, double
24 importe) {
25 super();
26 this.id = id;
27 this.concepto = concepto;
28 this.importe = importe;
29 }
30 public Producto() {
31 super();
32 }
33
34 }
B. Crear el siguiente Servlet: [crearSesion.java]
8 //-----Agregar-------------------------
10 //-------------------------------------
11 @WebServlet(urlPatterns = {"/crearSesion"})
12 public class crearSesion extends HttpServlet {
13
15
protected void doGet(HttpServletRequest request, HttpServletResponse
16 response)
18
19 HttpSession misession= request.getSession(true);
20 Producto miproducto= new Producto(1,"telefono",300);
21 misession.setAttribute("producto",miproducto);
22 PrintWriter pw= response.getWriter();

23 pw.println("<html><body>Producto en session</body></html>");
24 pw.close();
25
26 }
27 }
Resultado:
C. Crear el siguiente Servlet: [verSesion.java]
8 //-----Agregar-------------------------
10 //-------------------------------------
11
12 @WebServlet(urlPatterns = {"/verSesion"})
13 public class verSesion extends HttpServlet {
14
16
protected void doGet(HttpServletRequest request, HttpServletResponse
17 response)
19 HttpSession misession= (HttpSession) request.getSession();
20
21 Producto miproducto= (Producto) misession.getAttribute("producto");
22
23 PrintWriter pw= response.getWriter();
pw.println("<html><body>"+ miproducto.getId()+ ","
24 +miproducto.getConcepto()+","
25 + miproducto.getImporte());
26 pw.close();

27 }
28 }
Resultado:
1. Investigue: ¿Cómo se aplica una Sesiòn como variable global? – explique.

2. Mencione sobre la diferencia entre Cookies e Interface HTTPSession.
3. ¿Cómo se utilizan las Sesiones en Apache Tomcat? – Explique.
4. Visualice el video: Cluster de servidores Tomcat, con balanceador de carga
Apache. https://www.youtube.com/watch?v=7KTEiVUPd_4, haga un
comentario acerca del video.

VI. ACCESO A BDS CON JAVA POOL DE CONEXIONES Y

DATASOURCE.
- Definir URL del servidor.

- Carga del driver.
- Establecer conexión.
- Crear un Statement.
- Ejecutar sentencias
- Definir URL del servidor.
- Carga del driver.
- Establecer conexión.
- Crear un Statement.
- Ejecutar sentencias.
6.1. DEFINIR URL DEL SERVIDOR.
El API JDBC (Java Database Connectivity) define las interfaces y clases para
escribir aplicaciones de bases de datos en Java haciendo conexiones de base
de datos.
El uso de JDBC puede enviar declaraciones SQL, PL / SQL para casi cualquier
base de datos relacional.

JDBC es una API de Java para ejecutar sentencias SQL y es compatible con la
funcionalidad básica de SQL. Proporciona acceso RDBMS por lo que le permite
incrustar SQL dentro del código Java. Debido a que Java puede ejecutarse en
un cliente ligero, applets incrustados en páginas Web pueden contener código
JDBC descargable para permitir el acceso de base de datos remota.
JDBC Arquitectura.
Aplicación Java llama a la biblioteca JDBC. JDBC carga un controlador que

habla a la base de datos. Podemos cambiar los motores de bases de datos sin
cambiar el código base de datos.
Fundamentos JDBC - Java Database Connectivity Pasos
Antes de crear una conexión JDBC de Java a la base de datos, primero debe
importar el paquete java.sql.
import java.sql. *; La estrella (*) indica que todas las clases en el paquete java.sql se
van a importar.
Cargar un controlador de base de datos.

En este paso del proceso de conexión JDBC, cargamos la clase de controlador
llamando Class.forName () con el nombre de la clase del controlador como un
argumento. Una vez cargada, la clase del controlador crea una instancia de sí
mismo. Un cliente puede conectarse al servidor de base a través del
controlador JDBC. Dado que la mayoría de los servidores de base de datos
ODBC, por tanto, el soporte del controlador del controlador JDBC-ODBC Bridge
se utiliza comúnmente. El tipo de retorno del método Class.forName (String
Nombre clase) es la "clase". La clase es una clase en el paquete java.lang.
try {
Class.forName(”sun.jdbc.odbc.JdbcOdbcDriver”); // Este es el driver

}
catch(Exception x){
System.out.println( “Aquí un mensaje de error” );
}
La clase DriverManager de JDBC define los objetos que se pueden conectar

aplicaciones Java a un controlador JDBC. DriverManager se considera la
columna vertebral de la arquitectura JDBC. Clase DriverManager gestiona los
controladores JDBC que están instalados en el sistema.
Su método getConnection () se utiliza para establecer una conexión a una base

de datos. Se utiliza un nombre de usuario, una contraseña y una dirección URL
de JDBC para establecer una conexión con la base de datos y devuelve un
objeto de conexión.
Una conexión JDBC representa una sesión / conexión con una base de datos
específica. En el contexto de una conexión, SQL, declaraciones PL / SQL se
ejecutan y se devuelven los resultados. Una aplicación puede tener una o más
conexiones con una sola base de datos, o puede tener muchas conexiones con
diferentes bases de datos. Un objeto de conexión proporciona información de
metadatos es decir, acerca de las bases de datos, tablas y campos. También
contiene métodos para hacer frente a las transacciones.
JDBC URL
JDBC: <subprotocolo>: <subnombre> • Cada conductor tiene su propio

subprotocolo, cada subprotocolo tiene su propia sintaxis de la fuente. Estamos
utilizando el subprotocolo ODBC JDBC, por lo que el DriverManager sabe
utilizar el sun.jdbc.odbc.JdbcOdbcDriver.
try{
Connection dbConexion=DriverManager.getConnection(url,”loginName”,”Password”)
}
catch( SQLException x ){
System.out.println( “Un mensaje de error” );
}
6.2. CARGA DEL DRIVER
1. Descargar el driver para realizar la conexión a MYSQL.

https://dev.mysql.com/downloads/connector/j/

2. Descomprimir el archivo descargado.
3. Abrir Netbeans y seleccionar la siguiente opción:
4. Crear una nueva librería:

5. Agregar los siguientes datos.
6. Luego adicionar el archivo mysql-connector-java-5.1.38-bin.jar
7. Luego Aceptar dicha información:

8. Agregar también la librería al proyecto:
9. Como se muestra en la imagen.
6.3. ESTABLECER CONEXIÓN.
En esta operación trataremos el tema de la conexión a un database desde una

pagina JSP, para esto, crearemos una clase, que será usada por nuestra
página. En primer lugar nos conectaremos a un Mysql, luego podremos ver
como modificando un poco la clase tambien se puede usar para SqlServer.

Comenzamos entonces por escribir el código de la primiera versión de la clase,

para luego esplicarla en detalle:
[probarConexionMysql.java]
1 <%@ page language="java" import="java.sql.*" %>

2 <%
3 /*conexion sera nuestra conexion a la bd*/
4 Connection conexion=null;
5
6 String mensaje="";
7
8 /*parametros para la conexion*/
9 String controlador = "com.mysql.jdbc.Driver";
10 String url = "jdbc:mysql://localhost:3306/prueba";
11 String usuario = "root";
12 String clave = "mysql";
13 /*procedimiento de la conexion*/
14 try{
15 Class.forName(controlador);
16 conexion = DriverManager.getConnection(url,usuario,clave);
17
18 /*guardando la conexion en la session*/
19 session.setAttribute("conexion",conexion);
20
21 } catch (Exception ex){
22 mensaje=ex.toString();
23 }
24
25 mensaje="conectado";
26
27 if(conexion.isClosed()){
28 mensaje="desconectado";
29 }
30 %>
31 <html>
32 <head>
33 <title>.:: JDBC ::.</title>
34 </head>
35 <body>
36 <form action="desconectar.jsp" method="post">
37 <input name="estado" type="text" value="Estado: <%=mensaje%>"/>
38 <input type="submit" value="Desconectar"/>

39 </form>
40 </body>
41 </html>
Resultado:
Linea 1: Importamos dos clases standard de Tomcat.
Linea 2: Definición de la clase JSP.
Linea 9: Definición del único URL de la clase.
Linea 10, 11,12: Los parametros que recibe la clase son: database (nombre del
database), servername (nombre o ip del database server), port (puerta de
conexión, en el caso de MYSQL generalmente es 3306), username y
password.
Lineas 9 a 14: Construimos una cadena de caracteres llamada url, que será
utilizada luego para abrir la conexión. La estructura de este texto es estandard,
solo hay que intercalar los parametros recibidos.
Linea 14: try, es el comienzo del bloque de código que ejecutaremos
Linea 15 y 16: Finalmente llegamos al corazón de la clase, instanciamos un

objeto Connection y, a través del DriverManager, tratamos de conectarnos al
servidor, pasando como parametro la url construida anteriormente.
Lineas 19: No son extrictamente necesarias, pero sirven como ayuda al

programador. Controlamos que la conexión haya sido exitosa y que esté
abierta (por defecto siempre lo está) y mandamos a la consola de Tomcat el
mensaje correspondiente. Lo mismo en el caso de que el proceso haya fallado.

Lineas 21 a 23: En el caso de que se produzca un error dentro la estructura try,

el mismo es procesado por la estructura catch, que imprime el mensaje de error
producido.
Veamos como sería la página JSP: [desconectar.jsp]
6.4. CREAR UN STATEMENT.
El objeto Statement (sentencia) sirve para procesar una sentencia SQL estática
y obtener los resultados producidos por ella. Solo puede haber un ResultSet
abierto para cada objeto Statement en un momento dado. Todos los métodos
statement que procesan una sentencia SQL cierran implícitamente el ResultSet
actual de una sentencia si existe uno abierto.
Crear sentencias
Los objetos Statement se crean a partir de objetos Connection con el método
createStatement. Por ejemplo, suponiendo que ya exista un objeto Connection
denominado conn, la siguiente línea de código crea un objeto Statement para
pasar sentencias SQL a la base de datos:
Statement stmt = conn.createStatement();
Especificar características de ResultSet

Las características de los ResultSets están asociadas con la sentencia que
finalmente los crea. El método Connection.createStatement permite especificar
estas características de ResultSet. A continuación se ofrecen algunos ejemplos
de llamadas válidas al método createStatement:
Ejemplo: Método createStatement
// El siguiente código en el primer ejemplo.
Statement stmt2 = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,

ResultSet.CONCUR_UPDATEABLE);
// El siguiente código es segundo ejemplo.
Statement stmt3 = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,

ResultSet.CONCUR_READ_ONLY, ResultSet.HOLD_CURSOR_OVER_COMMIT);
Procesar sentencias.
El proceso de sentencias SQL con un objeto Statement se realiza mediante los
métodos executeQuery(), executeUpdate() y execute().
Devolver resultados desde consultas SQL

Si debe procesarse una sentencia de consulta SQL que devuelva un objeto
ResultSet, debe utilizarse el método executeQuery(). Puede consultar el
programa de ejemplo que utiliza el método executeQuery de un objeto
Statement para obtener un ResultSet.
Nota: si una sentencia SQL que se procesa con el método executeQuery no devuelve
un ResultSet, se lanza una SQLException.
Devolver cuentas de actualización para sentencias SQL

Si se sabe que el código SQL es una sentencia de lenguaje de definición de
datos (DDL) o una sentencia de lenguaje de manipulación de datos (DML) que
devuelve una cuenta de actualización, debe utilizarse el método
executeUpdate().
El programa StatementExample utiliza el método executeUpdate de un objeto

Statement.
Procesar sentencias SQL en las que el valor de retorno esperado es

desconocido.
Si no se sabe cuál es el tipo de sentencia SQL, debe utilizarse el método

execute. Una vez que se ha procesado este método, el controlador JDBC
puede indicar a la aplicación qué tipos de resultados ha generado la sentencia
SQL mediante las llamadas de API. El método execute devuelve true si el
resultado es un ResultSet como mínimo, y false si el valor de retorno es una
cuenta de actualización. Con esta información, las aplicaciones pueden utilizar
los métodos de sentencia getUpdateCount o getResultSet para recuperar el
valor de retorno del proceso de la sentencia SQL. El programa
StatementExecute utiliza el método execute en un objeto Statement. Este
programa espera que se pase un parámetro que sea una sentencia SQL. Sin
mirar el texto de la sentencia SQL que el usuario proporciona, el programa

procesa la sentencia y determina la información relativa a lo que se ha

procesado.
Nota: la llamada al método getUpdateCount cuando el resultado es un ResultSet

devuelve -1. La llamada al método getResultSet cuando el resultado es una cuenta de
actualización devuelve nulo.
El método cancel.
Los métodos del controlador JDBC nativo están sincronizados para evitar que
dos hebras que se ejecutan en el mismo objeto provoquen daños en el mismo.
Una excepción a esta norma la representa el método cancel. Una hebra puede
utilizar el método cancel para detener una sentencia SQL de larga ejecución en
otra hebra que opera sobre el mismo objeto. El controlador JDBC nativo no
puede obligar a la hebra a detenerse; solo puede solicitarle que detenga la
tarea que estaba realizando. Por esta razón, una sentencia cancelada tarda
tiempo en detenerse. El método cancel puede utilizarse para detener consultas
SQL incontroladas en el sistema.
PreparedStatements.
Las PreparedStatements amplían la interfaz Statement y proporcionan soporte
para añadir parámetros a sentencias SQL.
Las sentencias SQL que se pasan a la base de datos pasan por un proceso de
dos pasos al devolver los resultados al usuario. Primero se preparan y, a
continuación, se procesan. Con los objetos Statement, estas dos fases
aparecen como una sola en las aplicaciones. Las PreparedStatements
permiten independizar estos dos procesos. El paso de preparación se produce
cuando se crea el objeto, y el paso de proceso se produce cuando se llama a
los métodos executeQuery, executeUpdate o execute en el objeto
PreparedStatement.
La posibilidad de dividir el proceso SQL en fases independientes no tiene

sentido sin la adición de marcadores de parámetro. Los marcadores de
parámetro se colocan en una aplicación para que esta pueda indicar a la base
de datos que no tiene un valor específico durante la preparación, pero que
proporciona uno durante el proceso. En las sentencias SQL, los marcadores de
parámetro se representan mediante signos de interrogación.
Los marcadores de parámetro posibilitan la creación de sentencias SQL

generales que se utilizan para peticiones específicas. Por ejemplo, considere la
siguiente sentencia de consulta SQL:

SELECT * FROM empleado WHERE nombre =’Rodrigo'

Se trata de una sentencia SQL específica que devuelve un solo valor; es decir,
la información relativa a un empleado llamado Rodrigo. Si se añade un
marcador de parámetro, la sentencia puede ser más flexible:
SELECT * FROM empleado WHERE nombre = ?

Estableciendo simplemente el marcador de parámetro en un valor, puede
obtenerse información acerca de cualquier empleado de la tabla.
Las PreparedStatements proporcionan mejoras de rendimiento significativas

con respecto a las Statements; el ejemplo de Statement anterior puede pasar
por la fase de preparación una sola vez y, a continuación, procesarse
repetidamente con valores diferentes para el parámetro.
Nota: La utilización de PreparedStatements es obligatoria para dar soporte a la

agrupación de sentencias del controlador JDBC nativo.
Crear y utilizar PreparedStatements.

Para crear objetos PreparedStatement nuevos, se utiliza el método
prepareStatement. A diferencia de en el método createStatement, la sentencia
SQL debe suministrarse al crear el objeto PreparedStatement. En ese
momento, la sentencia SQL se precompila para su utilización.
Procesar PreparedStatements.
El proceso de sentencias SQL con un objeto PreparedStatement se realiza
mediante los métodos executeQuery, executeUpdate y execute, al igual que el
proceso de objetos Statement. A diferencia de las versiones de Statement, no
se pasan parámetros en estos métodos debido a que la sentencia SQL ya se
ha suministrado al crear el objeto. Dado que PreparedStatement amplía
Statement, las aplicaciones pueden intentar llamar a versiones de los métodos
executeQuery, executeUpdate y execute que toman una sentencia SQL. Esta
operación provoca el lanzamiento de una excepción SQLException.
Ejemplo: utilizar PreparedStatement para obtener un ResultSet

Este es un ejemplo de utilización del método executeQuery de un objeto
PreparedStatement para obtener un ResultSet.
6.5. EJECUTAR SENTENCIAS.
MySQL es un sistema gestor de bases de datos muy conocido y ampliamente

usado por su simplicidad y notable rendimiento. Es una opción atractiva tanto

para aplicaciones comerciales, como de entretenimiento precisamente por su

facilidad de uso y tiempo reducido de puesta en marcha. En sus características
vemos que es muy usado para aplicaciones WEB, está muy ligado al PHP, que
a menudo aparece en combinación con MYSQL. En aplicaciones web hay baja
concurrencia (las transacciones concurrentes no interfieren entre sí) en la
modificación de datos y en cambio el entorno es intensivo en la lectura de
datos, lo que hace MySQL ideal para este tipo de aplicaciones.
Comandos Principales de Mysql:

Comando Descripción
mysql –u usuario –p clave Arranque como usuario
mysql –h nombre_host –u usuario –p En el caso en el que el servidor no se encuentre
clave en otra computadora
show databases; Mostrar las bases de datos
select databases(); Mostrar las bases de datos seleccionadas
show tables; Mostrar las tablas que contiene una base de

datos
use nombre_base; Seleccionar una base de datos
describe nombre_tabla;
Describir la estructura de campos de una tabla
create database nombre_base; Crear una base de datos
Creación de una tabla.
create [temporary] table [if no exists] nombre_tabla (nombre_campo tipo1

opciones2 cláusulas3,
“ “ “,
“ “ “,
[último campo] );
[temporary] --> la tabla existirá mientras exista la conexión con el cliente actual o
hasta que se
emita la instrucción drop table.
[if no exist] --> Si existe la tabla no se crea una nueva.
Los apartados para crear tablas son:
Generales:
null --> admite valores nulos
no null --> rechaza dejar el campo en blanco
default --> permite establecer un valor por defecto
Columnas numéricas:
auto_increment --> para generar identificadores únicos o valores en serie.
unisgned --> rechazo de valores negativos
Cadena:
binary --> trata los valores como cadenas binarias (campos char y varchar)
Cláusulas3:
primary key --> columna indexada para búsqueda rápida. Clave principal, solo

puede haber una

unique --> crea un índice con valores únicos
index, key --> son sinónimos y crean índices que pueden contener valores
repetidos.
Los apartados para crear tablas Las opciones de tipo de campo son:
son:
tinyint --> 1 byte
Generales: smallint --> 2 byte
null --> admite valores nulos mediumint --> 3 byte
no null --> rechaza dejar el campo en int --> 4 byte
blanco bigint --> 8 byte
default --> permite establecer un valor float --> 4 byte
por defecto double --> 8 byte
Columnas numéricas: decimal --> variable
auto_increment --> para generar char(n) --> cadena de caracteres de longitud fija
identificadores únicos o valores en varchar(n) --> cadena de caracteres de longitud
serie. variables
unisgned --> rechazo de valores tinyblob --> objeto binario largo (muy pequeño)
negativos blob --> objeto binario largo (pequeño)
Cadena: mediumblob --> objeto binario largo (medio)
binary --> trata los valores como longblob --> objeto binario largo (grande)
cadenas binarias (campos char y tinytext --> cadena de texto muy pequeña
varchar) text --> cadena de texto pequeña
Cláusulas3: mediumtext --> cadena de texto media
primary key --> columna indexada para longtext --> cadena de texto larga
búsqueda rápida. Clave principal, solo enum --> una enumeración
puede haber una set --> un conjunto
unique --> crea un índice con valores date --> valor fecha (aaaa-mm-dd)
únicos time --> valor de hora (hh-mm-ss)
index, key --> son sinónimos y crean datetime --> valor de fecha y hora
índices que pueden contener valores timestamp --> valor de lapso de tiempo
repetidos. (aaaammddhhmmss)
year --> valor de año
INSERT INTO table_name Se utiliza para insertar nuevos registros a una

VALUES (value1,value2,value3,...); tabla - Forma1
INSERT INTO table_name

(column1,column2,column3,...)VALUES La segunda forma específica tanto los nombres
(value1,value2,value3,...); de las columnas como los valores a insertar
INSERT INTO table2 Podemos copiar todas los registros de una tabla
SELECT * FROM table1; a otra ya existente
INSERT INTO table2
(column_name(s)) O podemos copiar de una tabla a otra, solamente
SELECT column_name(s) las columnas que queremos
FROM table1;

Select: Permite recuperar filas seleccionadas de una o más tablas también pueden
utilizarse para recuperar filas calculadas, sin referencia a alguna tabla.
Y además nos permite consultar los datos almacenados en una o más tablas de la base de
datos
SELECT [ALL | DISTINCT ]

<nombre_campo> [{,<nombre_campo>}]
FROM <nombre_tabla>|<nombre_vista>
[{,<nombre_tabla>|<nombre_vista>}]
[WHERE <condicion> [{ AND|OR <condicion>}]]
[GROUP BY <nombre_campo> [{,<nombre_campo >}]]
[HAVING <condicion>[{ AND|OR <condicion>}]]
[ORDER BY <nombre_campo>|<indice_campo> [ASC | DESC]
[{,<nombre_campo>|<indice_campo> [ASC | DESC ]}]]
SELECT: Esta palabra clave nos indica que la consulta que vamos a realizar es de
selección.
ALL: Este nos indica que seleccionaremos todos los valores, generalmente no se
especifica, ya que viene por defecto.
DISTINCT: Nos indica que queremos seleccionar solo valores distintos.
FROM: Indicamos la o las tablas desde donde queremos recuperar los datos, cuando
existe más de una tabla a la consulta se le denomina "consulta combinada" o "join", en
este tipo de consultas es necesario aplicar una condición de combinación, a través de la
consulta WHERE.
WHERE: Nos especifica una condición que debe cumplirse para que los datos sean
devueltos por la consulta; a su vez, este admite operadores lógicos como AND y OR.
GROUP BY: Este nos especifica la agrupación que le vamos a dar a los datos, se usa
siempre en combinación de funciones agregadas.
HAVING: Nos da una condición que se debe cumplir para los datos, y especifica una
condición que debe cumplirse para que los datos sean devueltos por la consulta, su
funcionamiento es similar al del WHERE, pero aplicado a un conjunto de resultados
devueltos por la consulta. Este deba aplicarse siempre junto a GROUP BY, y los
contenidos deben ser referidos a los contenidos en ella.
ORDER BY: Presenta el resultado ordenado de las columnas indicadas, el orden se puede
presentar de forma ascendente (ASC), el cual generalmente se presenta por defecto o de
manera predeterminada; y en forma descendente (DESC).
ALTER: Modificación de la estructura de las tablas, como renombrar la tabla o variar la
estructura de la tabla de datos.
alter [ignore] table nombre lista_de_acción

Nombre: Establece el nombre de la tabla sobre la que deseamos actuar.
Lista_de_acción: Establece una o varias acciones a realizar las cuales son.
a)ADD INDEX [nombre _ índice][columna _ índice]: Agrega un índice a la tabla basado en
la columna especificada.
b)ADD PRIMARY KEY [columna _ índice]: Agrega una clave principal.
c)ADD UNIQUE [nombre _ índice][columna_ índice]: Agregar un índice de valor único a la
tabla en función de la columna especificada.
d)ALTER [column] nombre _ columna (set default valor | drop default): Modifica el valor de
una columna.
e)CHANGE [column] nombre _ columna declaración _ columna: Cambia el nombre y la
definición de una columna.
f)DROP [column] nombre _ columna: Elimina la columna especificada.
g)DROP INDEX nombre_index: elimina el índice de la tabla.
h)DROP PRIMARY KEY: elimina la clave principal de la tabla. Si no existe clave principal y
si índices con especificación UNIQUE se elimina el primero existente.
i)MODIFY [column] declaración _ columna: Cambia la declaración de una columna.
j)RENAME [AS] nombre_tabla_nueva: Cambia el nombre de la tabla.

Elimina los registros de una tabla.
delete [low_priory] from nombre_tabla [where expresión][limit n]

LOW_PRIORY: posterga la petición Actualiza los registros de una tabla en
hasta que ningún usuario este bloque.
utilizando la tabla.
WHERE expresión: especifica una
condición que deben cumplir los
registros a borrar, si se omite en la
Borrado de tablas: elimina una o varias
petición se eliminan todos los
tablas.
registros de la tabla.
LIMIT n: estable un número máximo
de registros a borrar.
Borrado de una base de datos. Elimina la
DROP DATABASE [if exist]
base de datos y todas las tablas que
nombre_database
contiene.
show columns from nombre_tabla
Muestra las diferentes columnas de una
[from nombre_base-datos][like
tabla
patrón-búsqueda]
show grants for nombre_usuario Información sobre usuarios.
Vamos a crear un mantenimiento completo de una tabla contenida

en la BD de MYSQL.
1. Crear la BD en MYSQL.
2. Crear la siguiente tabla:

3. Insertar los siguientes registros:
4. Mostrar los datos ingresados:
5. Crear un página de menú principal: [menuprincipal.jsp]


2 <!DOCTYPE html>
3 <html>
4 <head>
6 <title>.:: Mantenimiento Estudiante ::.</title>
7 </head>
8 <body>
9 <center>
10 <h1>Mantenimiento de la tabla Estudiante</h1>
11
12 <a href="consultarEstudiante.jsp">[ Consultar ] </a>
13 <a href="agregarEstudiante.jsp">[ Agregar ] </a>
14 <a href="modificarEstudiante.jsp">[ Modificar ] </a>
15 <a href="eliminarEstudiante.jsp">[ Eliminar ] </a>
16 </body>
17 </html>
Resultado:
6. Crear pagina JSP para consultar los registros de la tabla:

[consultarEstudiante.jsp]

2 <%
5
8 String url = "jdbc:mysql://localhost:3306/BDRegistro";

12 try{
15
18 //Crear el objeto para ejecutar los querys
19 Statement st = conexion.createStatement();
20 // Crear el objeto para almacenar los datos
21 ResultSet rs = st.executeQuery("select * from estudiante" );
22 out.println("<center>");
23 out.println("<h1>Mantenimiento de la tabla Estudiante - CONSULTAR</h1>");
24 //Crear la tabla
25 out.println("<table border='1'>");
26 out.println("<td style='background-color:#cccc99;'>idCarnet</td>");
27 out.println("<td style='background-color:#cccc99;'>Nombre</td>");
28 out.println("<td style='background-color:#cccc99;'>Apellidos</td>");
29 out.println("<td style='background-color:#cccc99;'>Direccion</td>");
30 out.println("<td style='background-color:#cccc99;'>Telefono</td>");
31 out.println("<td style='background-color:#cccc99;'>Correo</td>");
32 out.println("<td style='background-color:#cccc99;'>Sexo</td>");
33 // Iniciar el bucle
34 while (rs.next())
35 {
36 out.println("<tr>");
37 //Obtener los valores de los campos
38 out.println("<td>" + rs.getString("idcarnet") + "</td>");
39 out.println("<td>" + rs.getString("nombre") + "</td>");
40 out.println("<td>" + rs.getString("apellido") + "</td>");
41 out.println("<td>" + rs.getString("direccion") + "</td>");
42 out.println("<td>" + rs.getString("telefono") + "</td>");
43 out.println("<td>" + rs.getString("correo") + "</td>");
44 out.println("<td>" + rs.getString("sexo") + "</td>");
45 out.println("</tr>");
46 }
47 out.println("</table>");
48 out.println("<a href='menuprincipal.jsp'>[ Regresar ] </a>");
49 //Cerrar todo
50 rs.close();
51 st.close();
52 conexion.close();
53 }

54 catch (Exception e)
55 {
56 e.printStackTrace();
57 }
58 %>
Resultado:
7. Crear la pagina para agregar los datos: [agregarEstudiante.jsp]

2 <%
3 // Evalua si se pulso el boton
4 if(request.getParameter("GRABAR") != null)
5 {
8
15 try{
18


22
23
24 //cargando los campos a grabar
25 String var_idcarnet = request.getParameter("ID");
26 String var_nombre = request.getParameter("NOMBRE");
27 String var_apellido = request.getParameter("APELLIDO");
28 String var_direccion = request.getParameter("DIRECCION");
29 String var_telefono = request.getParameter("TELEFONO");
30 String var_correo = request.getParameter("CORREO");
31 String var_sexo = request.getParameter("SEXO");
32
33 // insertar el registro en la tabla
34 String q=" insert into estudiante "
35 + " values(\"" + var_idcarnet + "\",\"" + var_nombre + "\","
36 + "\"" + var_apellido + "\",\"" + var_direccion + "\","
37 + "\"" + var_telefono + "\", \"" + var_correo + "\","
38 + "\"" + var_sexo + "\");";
39 // agregando renglon (insert)
40 int n=st.executeUpdate(q);
41 //avisando que se hizo la instruccion
42 out.println("REGISTRO INSERTADO");
43
44 }catch (Exception e)
45 {
47 }
48 }
out.println("<CENTER><h1>Mantenimiento de la tabla Estudiante -
49 AGREGAR</h1>");
50
51 // construyendo forma dinamica
52 out.println("<FORM ACTION=agregarEstudiante.jsp METHOD=post>");
53 out.println("IdCarnet :<INPUT TYPE=TEXT NAME=ID><BR>");
54 out.println("Nombre :<INPUT TYPE=TEXT NAME=NOMBRE><BR>");
55 out.println("Apellidos :<INPUT TYPE=TEXT NAME=APELLIDO><BR>");
56 out.println("Direccion :<INPUT TYPE=TEXT NAME=DIRECCION><BR>");
57 out.println("Telefono :<INPUT TYPE=TEXT NAME=TELEFONO><BR>");
58 out.println("Correo :<INPUT TYPE=TEXT NAME=CORREO><BR>");
59 out.println("Sexo :<INPUT TYPE=RADIO NAME=SEXO VALUE='M'> Masculino "
60 + "<INPUT TYPE=RADIO NAME=SEXO VALUE='M'> Femenino <BR>");
61
62 out.println("<INPUT TYPE=SUBMIT NAME=GRABAR VALUE='Insertar Datos'><BR>");

63 out.println("</FORM>");
64
66
67 %>
Resultado:

8. Crear la pagina para modificar los datos: [modificarEstudiante.jsp]

2 <%
5
12 try{
15
out.println("<h1>Mantenimiento de la tabla Estudiante - CONSULTAR -
23 MODIFICAR</h1>");
24 //Crear la tabla

33 out.println("<td style='background-color:#cc8899;'>Modificar</td>");
36 {
46 String valor=rs.getString("idcarnet");
47 out.println("<td>");
48 out.println("<a href='modificar.jsp?idmodificar=\"" + valor +"\"'>Modificar</a>");
49 out.println("</td>");
51 }
54 //Cerrar todo
55 rs.close();
56 st.close();
58 }
60 {
62 }
63 %>
Resultado:

9. Crear la página JSP que envie el idcarnet como variable global y su vez
recoge dicha varible: [modificar.jsp]

2 <%
3 // Evalua si se pulso el boton
4
7
14 try{
18 // Recoger varible global
19 String valor=request.getParameter("idmodificar");
20 ResultSet rs = st.executeQuery("select * from estudiante where idcarnet=" + valor + "" );
21
22 if(request.getParameter("MODIFICAR") != null)
23 {
24 //cargando los campos a Modificar
25 String var_idcarnet = request.getParameter("ID");
26 String var_nombre = request.getParameter("NOMBRE");
27 String var_apellido = request.getParameter("APELLIDO");

28 String var_direccion = request.getParameter("DIRECCION");

29 String var_telefono = request.getParameter("TELEFONO");
30 String var_correo = request.getParameter("CORREO");
31
32 // actualizar el registro en la tabla con una condiciòn
33 String q=" update estudiante "
34 + " set nombre=\"" + var_nombre + "\",apellido=\"" + var_apellido + "\","
35 + " direccion=\"" + var_direccion + "\",telefono=\"" + var_telefono + "\","
36 + " correo=\"" + var_correo + "\" where idcarnet=\"" + var_idcarnet + "\";";
37
38 // agregando renglon (update)
39 st.executeUpdate(q);
41 out.println("<h1>REGISTRO ACTUALIZADO</h1>");
43 }
44 else
45 {
46 out.println("<CENTER><h1>Mantenimiento de la tabla Estudiante - MODIFICAR</h1>");
48 {
50 out.println("<FORM ACTION=modificar.jsp METHOD=post>");
51 out.println("IdCarnet :<INPUT TYPE=TEXT NAME=ID readonly value="+ rs.getString("idcarnet") + "><BR>");
52 out.println("Nombre :<INPUT TYPE=TEXT NAME=NOMBRE value="+ rs.getString("nombre") + "><BR>");
53 out.println("Apellidos :<INPUT TYPE=TEXT NAME=APELLIDO value="+ rs.getString("apellido") + "><BR>");
54 out.println("Direccion :<INPUT TYPE=TEXT NAME=DIRECCION value="+ rs.getString("direccion") + "><BR>");
55 out.println("Telefono :<INPUT TYPE=TEXT NAME=TELEFONO value="+ rs.getString("telefono") + "><BR>");
56 out.println("Correo :<INPUT TYPE=TEXT NAME=CORREO value="+ rs.getString("correo") + "><BR>");
57
58 out.println("<INPUT TYPE=SUBMIT NAME=MODIFICAR VALUE='Modificar Datos'><BR>");
60 }
62
63 }
65 {
67 }
68 %>
Resultado:

10. Crear la pagina para eliminar los datos: [eliminarEstudiante.jsp]

2 <%
5
12 try{
15

23 out.println("<h1>Mantenimiento de la tabla Estudiante - ELIMINAR</h1>");
24 //Crear la tabla
33 out.println("<td style='background-color:#cc8899;'>Eliminar</td>");
36 {
46 String valor=rs.getString("idcarnet");
47 out.println("<td>");
48 out.println("<a href='eliminar.jsp?ideliminar=\"" + valor +"\"'>Eliminar</a>");
49 out.println("</td>");
51 }
54 //Cerrar todo
55 rs.close();
56 st.close();
58 }
60 {
62 }
63 %>

Resultado:
11. Crear la página JSP que envie el idcarnet como variable global y su vez
recoge dicha varible: [eliminar.jsp]

2 <%
5
12 try{
17 String valor=request.getParameter("ideliminar");
18 ResultSet rs = st.executeQuery("select * from estudiante where idcarnet=" + valor + "" );
19 // actualizar el registro en la tabla
20 String q="delete from estudiante where idcarnet=" + valor + ";";
21
22 out.println("<CENTER><h1>Mantenimiento de la tabla Estudiante - ELIMINAR</h1>");
24 {


26 out.println("<FORM>");
out.println("IdCarnet :<INPUT TYPE=TEXT NAME=ID readonly value="+ rs.getString("idcarnet") +
27 "><BR>");
out.println("Nombre :<INPUT TYPE=TEXT NAME=NOMBRE readonly value="+
28 rs.getString("nombre") + "><BR>");
out.println("Apellidos :<INPUT TYPE=TEXT NAME=APELLIDO readonly value="+
29 rs.getString("apellido") + "><BR>");
out.println("Direccion :<INPUT TYPE=TEXT NAME=DIRECCION readonly value="+
30 rs.getString("direccion") + "><BR>");
out.println("Telefono :<INPUT TYPE=TEXT NAME=TELEFONO readonly value="+
31 rs.getString("telefono") + "><BR>");
out.println("Correo :<INPUT TYPE=TEXT NAME=CORREO readonly value="+
32 rs.getString("correo") + "><BR>");
33
35 }
36 // agregando renglon (update)
37 st.executeUpdate(q);
39 out.println("<h1>REGISTRO ELIMINADO OK...!!!</h1>");
41
43 {
45 }
46 %>
Resultado:

Crear y trabajar con la BD Facturaciòn en MYSQL.
1. Iniciar el servidor mysql.
2. Ingresar la clave (Establecida en el tema de instalación de servicios).
3. Listo bienvenido al servidor mysql, ahora vamos a crear la base de datos:

“BDFacturacion”.
Nota: Antes de crear la base de datos vamos a preguntar si ya fue creado, ello
evitaría que nos muestre un mensaje de error, y eso es lo que debemos evitar.
Más adelante las sentencias SQL van hacer más complicadas por ello te
muestro otra manera de ejecutar las sentencias.
• Abrir el bloc de notas y escribe la sentencia sql luego copia y pega dentro del
servidor mysql.

Práctico no, espero que lo tomes en cuenta más adelante.
4. Bien luego de crear la base de datos, verificamos si existe:
5. Activar la base de datos “BDFacturación”.
6. Crear las tablas:
create table clientes( create table detallefacturas(

codcli char(10), nrofac char(10) not null,
nombre varchar(30), codpro char(6) not null,
apellido varchar(30), cant int,
dni double, importe decimal(8,2));
telefono double,
direccion varchar(50), create table personal(
email varchar(50), codper char(10),
foto varchar(100)); nombre varchar(30),
apellido varchar(30),
create table productos( dni double,
codpro char(10), telefono double,
nombre varchar(30), direccion varchar(50),
descripcion varchar(100), email varchar(50),
pu decimal(8,2), foto varchar(100),
stock double, codusuario char(10));
foto varchar(30));
create table facturas( create table usuarios(

nrofac char(10) not null, codusuario char(10),
codcli char(10) not null, codestado char(10),
subtotal decimal(8,2) , usuario char(50),

igv decimal(8,2), clave char(50));

total decimal(8,2),
estado int default 0, create table estadousuarios
fechaemi date, (codestado char(10),
fechacan date, descripcion char(50));
codper char(10));
7. Mostrar las tablas creadas.
8. Mostrar la estructura de la tabla.
9. Establecer las claves primarias a las tablas maestras.
alter table clientes

add primary key (codcli);
alter table Productos

add primary key (codpro);
alter table Facturas

add primary key (nrofac);

alter table personal

add primary key (codper);
alter table usuarios

add primary key (codusuario);
alter table estadousuarios

add primary key (codestado);
10. Verificar si la tabla tiene clave primaria.
11. Relacionar las tablas para compartir información.
alter table detallefacturas

add constraint R_DETA_FAC foreign key (nrofac)
references facturas (nrofac)
on delete cascade
on update cascade;
alter table detallefacturas

add constraint R_DETA_PRO foreign key (codpro)
references productos (codpro)

on delete cascade
on update cascade;
alter table facturas

add constraint R_FAC_PER foreign key (codper)
references personal(codper)
on delete cascade
on update cascade;
alter table personal

add constraint R_PER_USU foreign key (codusuario)
references usuarios(codusuario)
on delete cascade
on update cascade;
alter table usuarios

add constraint R_USU_ESTADO foreign key (codestado)
references estadousuarios(codestado)
on delete cascade
on update cascade;
12. Verificar si la tabla se encuentra relacionada.
13. Insertar registros.

insert into clientes values
("C0001","Gabriela","Saenz",45125252,3212121,"Av.Los Rosales #897 -
Lince","gsaenz@hotmail.com","gabriela.jpg"),
("C0002","Angelina","Ascona",77778888,1112233,"Jr. Las Lomas #765 -La
molina","aascona@yahoo.es","angelina.jpg");

insert into productos values

("P0001","Monitor","Pantalla lcd",300.00,5,"monitor.jpg"),
("P0002","Memoria","kingston",15.00,10,"memoria.jpg"),
("P0003","Impresora","Epson",200.00,6,"impresora.jpg"),
("P0004","Estabilizador","Estabilizador altron",30.00,8,"estabilizador.jpg"),
("P0005","Scanner","HP",190.00,10,"scanner.jpg");
insert into estadousuarios values

("E0001","ACTIVO"),
("E0002","INACTIVO"),
("E0003","BLOQUEADO"),("E0004","TEMPORAL");
insert into usuarios values

("U0001","E0001","admin",des_encrypt("admin123")),
("U0002","E0001","supervisor",des_encrypt("super123")),
("U0003","E0001","invitado",des_encrypt("invitado123"));
insert into personal values

("R0001","Manuel","Ramirez",65125252,5212121,"Av.Las Flores #897 -
Comas","mramirez@hotmail.com","manuel.jpg","U0002"),
("R0002","Pedro","Morales",72378888,3112233,"Jr. Las Rosas #765 -
Surco","pmorales@yahoo.es","pedro.jpg","U0002");
14. Mostrar los registros de la tabla: Clientes
15. Mostrar los registros de la tabla: Productos.

16. Mostrar los registros de la tabla: Usuarios.
17. Mostrar los registros de la tabla: Personal.

18. Crear los siguientes procedimientos:
Usar múltiples líneas - Inicio

delimiter //
create procedure insertarclientes
(
codcli char(10),
nomcli varchar(30),
apecli varchar(30),
dnicli double,
telcli double, Declarar Parámetros
direccli varchar(50),
emailcli varchar(50),
fotocli varchar(100))
begin Instrucciones
insert into Clientes values

(codcli,nomcli,apecli,dnicli,telcli,direccli,emailcli,fotocli);
end;
// Usar múltiples líneas - Fin
delimiter //
create procedure insertarproductos
(
codpro char(10),
nombrePro varchar(30),
descripPro varchar(100),
puPro decimal(8,2),
stockPro double,
fotoPro varchar(30))
Begin
insert into Productos values
(codpro,nombrePro,descripPro,puPro,stockPro,fotoPro);
End;
//
delimiter //

create procedure insertarfactura

(
nrofacF char(10),
codcliF char(10),
subtotalF decimal(8,2),
igvF decimal(8,2),
totalF decimal(8,2),
estadoF int,
fechaemiF date,
fechacanF date,
codper char(10))
Begin
insert into facturas values
(nrofacF,codcliF,subtotalF,igvF,totalF,estadoF,
fechaemiF,fechacanF,codper);
End;
//
delimiter //
create procedure insertarDF
(
nrofac char(10),
codpro char(6),
cant int,
importe decimal(8,2))
Begin
insert into DetalleFacturas values
(nrofac, codpro,cant,importe);
End;
//
delimiter //
create procedure generarcodigo
(
nomtabla varchar(50)) -- Define un parámetro
-- Inicio

begin
-- Declarar variables
declare ultcod varchar(20);
declare total int;
declare ceros int;
declare opcion int;
declare cod varchar(20);
declare nuevo char(10);
-- Asigna un valor, el último código de la tabla
set ultcod=(select ultimocodigo from auxiliar where tabla=nomtabla);
-- Asigna un valor, el total de registros de la tabla auxiliar
set opcion = (select count(*) from auxiliar where tabla=nomtabla);
-- Evalua si existe en nombre de la tabla
if opcion > 0 then
-- Asigna un valor, se elimina los ceros y se incrementa la variable
set total = cast(substring(ultcod,2,length(ultcod)) as unsigned) + 1;
-- Obtiene el total de ceros del código
set ceros = length(ultcod) - length(total)-1;
-- Se genera el siguiente código
set nuevo = concat(left(ultcod,1),repeat("0",ceros),total);
-- Se actualiza la tabla auxiliar con el nuevo código
update auxiliar set ultimocodigo=nuevo where tabla=nomtabla;
end if;
-- Fin
end;
//
delimiter //
create function darcodigo
(
nomtabla varchar(20)) -- Define un parámetro
returns varchar(20)
begin -- Inicio
-- Declara una variable
declare cod char(10);
-- Extrae el ultimo código de la tabla especificada
-- y lo asigna a la variable cod
select ultimocodigo into cod from auxiliar where tabla=nomtabla;
-- Retorna la variable cod

return cod;
-- Fin
end;
//
19. Ahora vamos a probar los proc. Almacenados y las funciones.

a. Crear la siguiente tabla:
delimiter //
create table auxiliar
(
tabla varchar(50),
ultimocodigo varchar(50)
);//
b. Insertar los siguientes registros.
delimiter //
insert into auxiliar values
("clientes","C0002"),
("usuarios","U0003"),
("productos","P0005"),
("facturas","F0000"),
("personal","R0002");
//
Nota: Como observan esta tabla maestra es muy importante para
generar código, porque ella siempre tendrá actualizado el nombre
de la tabla y cuál es su último código con ello validamos que los
códigos de las tablas no se repitan.
Deberían empezar en cero, pero no nos olvidemos que ya
habíamos insertado registros en dichas tablas.
c. Ejecutar el procedimiento almacenado “generarcodigo”.

d. El código de la tabla clientes ya se incrementó en uno.
e. Bien ahora lo que haremos en ejecutar el proc. Almacenado

“insertarclientes”.
f. Mostrar los registros de la tabla clientes.

g. Generar facturas con sus respectivos detalles.

Generar código:
Insertar registro en la tabla factura:
Insertar registros en la tabla detallefactura:

20. Mostrar los registros de todas las tablas de la base de datos.
21. Ahora vamos a trabajar con múltiples tablas.
Mostrar las facturas con su respectivo vendedor.

Mostrar los detalles de facturas con su respectivo nombre de

producto.
Mostrar el personal con su respectivo usuario y clave.
Mostrar todos los usuarios con su respectivo estado.
Mostrar todas las facturas con sus respectivos clientes y el personal

con su respectivo usuario.

22. Eliminar todos los registros de la tabla clientes.
23. Actualizar la tabla auxiliar cuyo valor del ultimocodigo será “C0000” de la
tabla clientes.
24. Agregar 2 registros en la tabla clientes.

25. Mostrar los registros de la tabla clientes.
1. Investigue: ¿Qué es un Pool de conexiones? – explique.

2. Mencione sobre DataSource.
3. ¿Cómo se utilizan los DataSource? – Explique.
4. Visualice el video: Caracteristicas de JDBC, de la url:
https://www.youtube.com/watch?v=xEOmGzYvsgg, haga un comentario
acerca del video.

Lenguaje de Programacion V PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lenguaje de Programacion V PDF

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

TAREA N° CONTENIDO N° PÁG.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 6

En esta tarea trataremos las siguientes operaciones:

1.1. MÉTODOS EVENTOS.

JavaScript no es un lenguaje de programación? En pocas palabras,

Las páginas web serían muy aburridos si no podía interactuar y obtener

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 7

de la información dentro de la web navegador, que se llama procesamiento del

Todos los elementos HTML utilizados para la interacción serán colocados

En términos generales, las secuencias de comandos del lado del cliente en el

<Form name = "miFormulario">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 8

No se sorprenderán al saber que estas etiquetas crean un objeto Form, que se

En primer lugar, se puede acceder al objeto directamente utilizando su nombre

Vamos a ver un ejemplo que como se utiliza la colección de

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 9

28 <form action="" name="formulario3">

Cuando se carga en el navegador, debería ver tres cajas de alerta,

Dentro del cuerpo de la página se definen tres formularios, cada forma se le da

Dentro de la definición del elemento <body>, la función cargarventana () está

<body onload="cargarventana ()" >

Esto significa que cuando se carga la página, su función cargarventana () será

La función comienza por conseguir el número de objetos se forman dentro de la

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 10

Recuerde que debido a que los índices de matrices comienzan en 0, el bucle

Otras propiedades del objeto de formulario y Métodos.

Siendo una colección, la propiedad elementos del objeto Form tiene la

¿Cuál de estos se utiliza? depende de usted porque ambos hacen lo mismo

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 11

El método submit () envía el formulario, pero no se disparará el evento

Bueno el mismo principio se aplica al controlador de eventos onsubmit del

Creación de formularios en blanco no es exactamente emocionante o útil, por lo

Elementos HTML en formularios.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 12

elemento es el atributo type. Es este atributo el que decide cuál de los

Cada elemento de formulario dentro de la página web está disponible. Al igual

Propiedades y métodos comunes.

Elementos del botón.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 13

<Input type = "button" nombre="miBoton" valor= "Click Me" />

El atributo type se establece en el botón, y el atributo de valor se establece en

Este elemento crea un objeto botón asociado; en este ejemplo se llama

<Input type = "button" onclick = "boton_onclick ()" />

En el siguiente ejemplo, se utilizan los métodos descritos

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 14

19 <input type="button" name="miboton"

Si se carga esta página en el navegador, verá un botón con

Se inicia el bloque de script en el encabezado de la página definiendo una

La otra parte de código en el bloque de script es la definición de la función

Este elemento es un elemento de botón llamado miboton y está contenida

<form action="" name="form1">

Veamos la función miboton_onclick() un poco más de cerca. En primer lugar,

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 15

A continuación, se actualiza el texto en el valor del botón utilizando la

document.form1.miboton.value = "Boton presionado " + totalclic + " veces";

La función de este ejemplo es específica a este formulario y botón, en lugar de

Dos eventos comúnmente menos utilizados soportados por el

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 16

Si hace clic en el botón con su izquierda botón del ratón y

En el cuerpo de la página, se define un botón llamado miboton dentro de un