SlideShare ist ein Scribd-Unternehmen logo
1 von 11
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
Jaaaaaaaaaaaa
Desarrollo de Aplicaciones Web con J2EE
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
TEMA Nº 4: GENERACIÓN DE CONTENIDO
DINÁMICO CON JSP
1. Creación de una página JSP
<%@ page import="java.io.*" %>
<%
// creando e inicializando los campos del registro
// observar que se debe usar clases numericas apropiadas
int clave=0;
String nombre="";
intedad=0;
if(request.getParameter("CREAR") != null)
{
// abriendo archivo, capturando y grabando datos
try {
//* Creando y grabando a un archivo*/
File arch=new File("c:archivo2.dat");
RandomAccessFilearchivo=new RandomAccessFile(arch,"rw");
archivo.close();
} catch(FileNotFoundExceptionfnfe) { /* Archivo no encontrado */ }
catch (IOExceptionioe) { /* Error al escribir */ }
// avisando
out.println("ARCHIVO DIRECTO CREADO");
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
};
// construyendo forma dinamica
out.println("<FORM ACTION=prog25.jsp METHOD=post>");
out.println("<INPUT TYPE=SUBMIT NAME=CREAR VALUE="CREACION ARCHIVO" ><BR>");
out.println("</FORM>");
%>
corrida:
Recordar que la estructura que se usó para crear el archivo se deberá usar siempre y con el mismo orden
cuando se acceda al archivo con los procesos u operaciones anteriormente mencionados.
Observar que es parecido a la creación de archivos secuenciales.
Lo primero que se crea es un objeto de tipo FILE que se usa como parámetro para crear el archivo de tipo
RANDOMACCESSFILE.
Respetar las dos diagonales en el path del disco duro donde quedara el archivo directo.
Observar el doble diagonal () en el parámetro. Como segundo paso se crea el archivo con la instrucción:
RandomAccessFile archivo=new RandomAccessFile (arch,”rw”); El primer parámetro o argumento en esta
función es la unidad de disco y el nombre del archivo. El segundo parámetro o argumento es llamado modo y
es una de los varios modos que podemos usar. “r” → Lectura. “w” → Escritura. “rw” → Crea para lectura y
escritura y si ya existe, sobrescribe. Cuando se ha finalizado de escribir al archivo se debe cerrar y esto se
hace con la instrucción: Archivo.close (); Recordar estudiar todos los métodos de la clase
RANDOMACCESFILE. TAREAS PROGRAMACION JAVA JSP Crear archivos directos de alumnos, proveedores,
libros, productos, películas.
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
2. Procesamiento de formularios
INTRODUCCIÓN
Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendo
conseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luego
deberemos procesar en el servidor web para su correcta interpretación y uso.
Este proceso de datos se puede llevar a cabo mediante diferentes tecnologías: CGI, ASP, JSP, etc.
Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta más poderosa con la que
contamos es sin duda alguna el lenguaje JavaScript (o JScript, como gustan llamarlo los sres. de Microsoft).
Mediante JavaScript podemos no sólo validar los datos de cada uno de los campos que formen el formulario, para así poder estar
seguros de su validez antes de ser enviados al servidor, si no que también podemos acceder a todos los elementos que forman el
formulario y a sus propiedades, con lo que podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestras
páginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un objeto
formulario.
Para aquellas personas que aún no estén muy familiarizados con los formularios les remito al Manual de formularios en HTML de este
mismo sitio web.
Este artículo - manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni mostrar ejemplos
complicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las bases de cómo podemos manejar formularios
con este lenguaje de programación, dejando al empeño del lector el profundizar más en casos concretos.
EL OBJETO FORM
El objeto form se considera en JavaScript como un subobjeto del objeto document, que a su vez forma parte del objeto
predefinido window, por lo que inicialmente la sintaxis para acceder a una cualquiera de sus propiedades o métodos es:
window.document.forms.[nombre_formulario].[nonbre_campo].propiedad
en la que podemos prescindir de las cadenas forms y window, ya que el navegador considera al formulario particular un objeto por sí
mismo.
Además, el objeto forms dentro del objeto documents posee dos subpropiedades:
* index, array que contiene todos los formularios de una página, de sintaxis:
document.forms[index]
y donde debemos tener en cuenta que el primer formulario viene indentificado por el índice 0, por lo que para acceder al primer
formulario de una página deberemos usar la expresión:
document.forms[0]...
* length , que contiene el número de formularios que hay en la página, y cuya sintaxis es:
document.forms.length
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
Recordemos que en un formulario HTML un formulario se crea mediante un código del tipo:
<FORM NAME="clientes" ACTION="/cgi/clientes:cgi" METHOD="POST" TARGET="cuerpo">
...campos del formulariio
</FORM>
Como he dicho antes, un formulario es para JavaScript un objeto por sí mismo, y como tal posee unas propiedades, unos métodos y
unos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseño y
comportamiento dinámicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado
cliente, estando todo el código necesario dentro de la propia página web.
LAS PRINCIPALES PROPIEDADES DEL OBJETO FORM SON:
NAME : es la propiedad más importante del objeto form, ya que nos va a permitir identificar cada formulario
con un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin
ambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Por
esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON
EL MISMO NOMBRE EN UNA MISMA PÁGINA.
ACTION : esta propiedad define la URL o URI a donde se van a mandar los datos del formulario; es decir, su
valor va a ser una cadena que va a definir la ruta relativa o absoluta en dónde se encuentra el programa o
página activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de
JavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la página
permanecería inmutable. Pero mediante JavaScript podemos cambiarla, simplemente refiriéndonos a ella
mediante la escritura:
document.[nombre_formulario].action="/ruta/programa.cgi"
esto es especialmente útil cuando por ejemplo debemos mandar los datos del formulario a diferentes páginas
JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en el
formulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviar
los datos bien a la página a.jsp o a la página b.jsp. El código necesario para ello sería:
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "Javascript">
<--
function enviar( ){
if ((document.forms.datos.sistema1.checked = = true) &&
(document.forms.datos.sistema2.checked = = true){
alert('debe hacer una sóla selección)
{
elseif (document.forms.datos.sistema1.checked = = true)
document.forms.datos.action = "/jsp/pag_1.jsp"
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
y con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubiera
seleccionado ninguna casilla aparecería un mensaje de error. Podemos ver este ejemplo en acción, sólo que en
vez de asignar un action en el servidos he asignado a cada casilla como action una página HTML diferente.
METHOD: este parámetro establece el método de envío de los datos del formulario. Su valor puede ser POST,
conveniente cuando queremos enviar una gran cantidad de datos como una cadena continua, y que es el más
usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP (para más
información ir al manual de formularios HTML).
También podemos acceder a cambiar esta propiedad dinámicamente, pero no se suele hacer nunca, ya que el
método de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta
propiedad sería:
document.forms.[nombre_formulario].method="metodo_elegido".
TARGET: la propiedad target define el nombre de la ventana o frame en la que se van a cargar los resultados de
procesar el formulario; es decir, cuando el usuario pincha el botón submit se envían los datos del formulario al
servidor, en el que un programa o página activa procesa los datos, generando de nuevo otra página que se envía al
navegador cliente. En la ventana o frame definido por el atributo target se va a cargar esta página de respuesta.
Nos puede interesar que dependiendo de la clase de resultado que obtengamos al procesar los datos cambie la
ventana en la que se va a mostrar la página de respuesta, e incluso definir las posibles ventanas dinámicamente.
Como ejemplo, supongamos que tenemos una página inicial con dos frames: uno superior, en dónde inicialmente
existe un mensaje orientativo, y otro central, en el que inicialmente se encuentra el formulario que debe completar
el usuario. Nos interesa que si marca el primer radio botón de un grupo de dos la página de respuesta sea otra
página que se carge en la ventana central, pero que si el radio botón marcado es el segundo la respuesta sea un
mensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una página con dos
frames, en la que se cargan la página del mensaje inicial arriba y el formulario abajo. El código de la página del
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
formularios es el que sigue:
y aquí podemos ver el ejemplo en acción.
ELEMENTS: esta propiedad es un array o vector que contiene todos los elementos que forman un formulario,
sean cuales sean, y mediante ella podemos conocer el número de campos diferentes que tiene el formulario,
su tipo, etc, teniendo en cuenta que el primer índice del vector es el 0, como ocurría con el vector forms. Posee
dos subpropiedades:
* INDEX, que define mediante un índice los diferentes campos que forman el formulario, empezando los
índices por el 0, y cuya sintaxis es:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
functionenvia( ){
if ((document.forms.datos.sistema1.checked==true)
&&(document.forms.datos.sistema2.checked==true)) alert('debe
seleccionar una sóla casilla')
elseif (document.forms.datos.sistema1.checked==true) {
document.forms.datos.target="inf";
document.forms.datos.action="pagina1.html";
}
elseif (document.forms.datos.sistema2.checked==true) {
document.forms.datos.action="mensaje2.html";
document.forms.datos.target="sup";
}
elsealert('debe seleccionar un checkbox');
document.forms.datos.submit()
}
</SCRIPT>
</HEAD>
<BODY ONLOAD= "document.forms.datos.reset()"><BR><FORM
NAME="datos">
<INPUT TYPE="Checkbox" NAME="sistema1">sitema 1
<INPUT TYPE="Checkbox" NAME="sistema2" >sitema 2<BR>
<INPUT TYPE="button" VALUE="envía" ONCLICK= "envia( )">
</FORM>
</BODY>
</HTML>
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
document.forms.nombre_formulario.elements[index]
* LENGTH, que contiene el número de elementos que forman el formulario, y cuya sintaxis es:
document.forms.nombre_formulario.elements.length
El uso general de la subpropiedad índex puede ser del tipo:
EJEMPLO EN ACCIÓN.
Como vemos en este ejemplo, también podemos referirnos a un formulario de nuestra página por medio de su índice en el
arrayforms que posee cada objeto window.document, teniendo en cuenta que el primer índice es 0 . Mediante esta forma de
expresarnos podemos acceder a cualquier formulario de la página sin necesidad de conocer su nombre, y podemos obtener el
número de formularios que hay en una página en concreto. La sintaxis para acceder a un formulario mediante este camino es del
tipo:
document.forms[indice].propiedad
Y para conocer el nº de formularios en la página deberemos escribir:
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
function cantidad ( ) {
var f = document.forms.length;
alert( ' el número de formularios de la página es ' + f );
document.forms[2].texto.value='cambiamos el valor del campo';
}
y esto en acción, en una página con 3 formularios en la que mostramos el número de ellos y cambiamos el valor del campo de texto
del segundo formulario, podemos verlo en este ejemplo.
ENCODING :que es un string o cadena que contiene el tipo MIME utilizado para codificar el
contenido del formulario a enviar al servidor, y que refleja el atributo ENCTYPE de la etiqueta FORM
de HTML, que se utiliza para codificar los datos remitidos desde el formulario hacia el servidor,
pudiendo mediante esta propiedad cambiar dinámicamente lel tipo de codificación.
LOS MÉTODOS DEL OBJETO FORM SON DOS:
SUBMIT ( ) :para enviar los datos de un formulario es necesario siempre utilizar este método, que por defecto
está asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado llama
al método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos al servidor
se ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos, mensajes de alerta
y/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un botón tipo button que al
ser pulsado llame a una función JavaScript que ejecute las acciones previas al envío y una vez cumplimentadas
envíe los datos. Esto se consigue llamando en la función al método submit ( ), y el código necesario tiene el
aspecto siguiente:
function previa ( ) {
...
...acciones a realizar...
...
document.forms.nombre_formulario.submit ( );
}
RESET ( ) : este método pone a cero los campos del formulario, es decir, vuelve a situar el formulario en su
estado inicial, y al igual que ocurre con el método submit existe por defecto un botón <INPUT TYPE = " reset " >
que se encarga de realizar esta operación, útil por ejemplo cuando el usuario se ha equivocado al rellenar los
campos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces poner a cero los
campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando diréctamente al método
submit ( ) o llamando a una función que ejecute el método, siendo el código de llamada en ambos casos del
tipo:
document.forms.nombre_formulario.reset ( )
POR ÚLTIMO, VAMOS A VER LOS EVENTOS QUE ADMITE EL OBJETO FORM, ALGUNOS DE LOS
CUALES SON ESTÁNDARES Y OTROS SIN SERLO SÍ LOS ADMITE, Y QUE SON:
ONSUBMIT : es el principal evento del objeto y el único estandar, y se produce al enviar los datos del
formulario mediante el botón submit o mediante el método submit ( ). Un ejemplo de llamada al método sería:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envían los datos ' ) " >
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com
ONRESET : mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón de
borrado o cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo para
lanzar un mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis del
tipo:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONRESET = " alert ( ' se van a borrar los datos' ) " >
ONCLICK : este no es un evento típico del objeto form, pero se puede usar con én, y mediante él podemos
ejecutar una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de
que se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario en
su totalidad.. Su escritura se debe parecer a:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONCLICK = " alert ( ' ha pulsado un campo' ) " >
además de estos eventos, y al igual que ocurre con onClick, el objeto form también admite los eventos
generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas que
beneficios, por lo que no se utilizan. Sólo saber que estás ahí y que se pueden usar en casos muy específicos.
3. Acceso a las cabeceras de petición
Desarrollo de Aplicaciones Web con J2EE
Ing. Pablo Cesar Ttito C.
InfomixUnitek@gmail.com

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Taller mongodb
Taller mongodbTaller mongodb
Taller mongodb
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
Formularios Javascript
Formularios JavascriptFormularios Javascript
Formularios Javascript
 
Formulario
FormularioFormulario
Formulario
 
INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03
 
Html
HtmlHtml
Html
 
Guia practica java script
Guia practica java scriptGuia practica java script
Guia practica java script
 
Clase 11 formularios
Clase 11 formulariosClase 11 formularios
Clase 11 formularios
 
Guía JavaScript
Guía JavaScriptGuía JavaScript
Guía JavaScript
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Html
HtmlHtml
Html
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Semana 6 Estructura y Componentes
Semana 6   Estructura y ComponentesSemana 6   Estructura y Componentes
Semana 6 Estructura y Componentes
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
jQuery Mobile :: Cuadros de diálogo
jQuery Mobile :: Cuadros de diálogojQuery Mobile :: Cuadros de diálogo
jQuery Mobile :: Cuadros de diálogo
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Clase1
Clase1Clase1
Clase1
 
Portales ud4 - lenguaje html
Portales   ud4 - lenguaje htmlPortales   ud4 - lenguaje html
Portales ud4 - lenguaje html
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 

Ähnlich wie Desarrollo Aplicaciones J2EE

Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDidier Granados
 
Guia java script
Guia java scriptGuia java script
Guia java scriptmariaunefa
 
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control ToolkitDesarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkitpabloesp
 
Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xmlgilhorak
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemasunefa
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemasunefa
 
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXTR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXRojasAngel2
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y ValidacionesDidier Granados
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js IntroduccionMayer Horna
 

Ähnlich wie Desarrollo Aplicaciones J2EE (20)

Asp
AspAsp
Asp
 
Clase 4 JavaScript Básico
Clase 4 JavaScript BásicoClase 4 JavaScript Básico
Clase 4 JavaScript Básico
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
 
Ajax
AjaxAjax
Ajax
 
Guia java script
Guia java scriptGuia java script
Guia java script
 
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control ToolkitDesarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
 
Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xml
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
Js
JsJs
Js
 
Curso HTML 5 & jQuery - Leccion 11
 Curso HTML 5 & jQuery - Leccion 11 Curso HTML 5 & jQuery - Leccion 11
Curso HTML 5 & jQuery - Leccion 11
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXTR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
 
Ajax
AjaxAjax
Ajax
 
Taller desarrollo web
Taller  desarrollo webTaller  desarrollo web
Taller desarrollo web
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Curso online-asp-net-lw
Curso online-asp-net-lwCurso online-asp-net-lw
Curso online-asp-net-lw
 
Curso online-asp-net-lw
Curso online-asp-net-lwCurso online-asp-net-lw
Curso online-asp-net-lw
 
Herramientas de Desarrollo de Sistemas
Herramientas de Desarrollo de SistemasHerramientas de Desarrollo de Sistemas
Herramientas de Desarrollo de Sistemas
 

Mehr von Anyeni Garay

DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...
DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...
DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...Anyeni Garay
 
Sistemas de informacion gernecial
Sistemas de informacion gernecialSistemas de informacion gernecial
Sistemas de informacion gernecialAnyeni Garay
 
Gestión de la cadena de suministros
Gestión de la cadena de suministrosGestión de la cadena de suministros
Gestión de la cadena de suministrosAnyeni Garay
 
Cables con tecnologia swr
Cables con tecnologia swrCables con tecnologia swr
Cables con tecnologia swrAnyeni Garay
 
Planificador de Recursos Empresariales (ERP)
Planificador de Recursos Empresariales  (ERP)Planificador de Recursos Empresariales  (ERP)
Planificador de Recursos Empresariales (ERP)Anyeni Garay
 
Encriptación de datos y seguridad de los mismos
Encriptación de datos y seguridad de los mismosEncriptación de datos y seguridad de los mismos
Encriptación de datos y seguridad de los mismosAnyeni Garay
 
Computación en la Nube
Computación en la  NubeComputación en la  Nube
Computación en la NubeAnyeni Garay
 
W riticity ELECTRICIDAD INALAMRICA
W riticity ELECTRICIDAD     INALAMRICAW riticity ELECTRICIDAD     INALAMRICA
W riticity ELECTRICIDAD INALAMRICAAnyeni Garay
 
Un derivado del adn es buen conductor de la electricidad
Un derivado del adn es buen conductor de la electricidadUn derivado del adn es buen conductor de la electricidad
Un derivado del adn es buen conductor de la electricidadAnyeni Garay
 
Software para la maquetacion de publicaciones
Software para la maquetacion de publicacionesSoftware para la maquetacion de publicaciones
Software para la maquetacion de publicacionesAnyeni Garay
 
Sistema inalámbrico para transmitir energía dentro del cuerpo
Sistema inalámbrico para transmitir energía dentro del cuerpoSistema inalámbrico para transmitir energía dentro del cuerpo
Sistema inalámbrico para transmitir energía dentro del cuerpoAnyeni Garay
 
Retoques fotográficos
Retoques fotográficosRetoques fotográficos
Retoques fotográficosAnyeni Garay
 
Proyecto crowdfunding para distribuir electricidad sin cables en
Proyecto crowdfunding para distribuir electricidad sin cables enProyecto crowdfunding para distribuir electricidad sin cables en
Proyecto crowdfunding para distribuir electricidad sin cables enAnyeni Garay
 

Mehr von Anyeni Garay (20)

DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...
DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...
DETECCIÓN FÁCIL Y BARATA DE SUSTANCIAS TÓXICAS Y ALIMENTOS EN MAL ESTADO CON ...
 
Data warehouse
Data warehouseData warehouse
Data warehouse
 
Sistemas de informacion gernecial
Sistemas de informacion gernecialSistemas de informacion gernecial
Sistemas de informacion gernecial
 
Mineria de datos
Mineria de datosMineria de datos
Mineria de datos
 
Gestión de la cadena de suministros
Gestión de la cadena de suministrosGestión de la cadena de suministros
Gestión de la cadena de suministros
 
Erp
ErpErp
Erp
 
Data mart
Data martData mart
Data mart
 
Cables con tecnologia swr
Cables con tecnologia swrCables con tecnologia swr
Cables con tecnologia swr
 
Geolocalizacion
GeolocalizacionGeolocalizacion
Geolocalizacion
 
Planificador de Recursos Empresariales (ERP)
Planificador de Recursos Empresariales  (ERP)Planificador de Recursos Empresariales  (ERP)
Planificador de Recursos Empresariales (ERP)
 
Encriptación de datos y seguridad de los mismos
Encriptación de datos y seguridad de los mismosEncriptación de datos y seguridad de los mismos
Encriptación de datos y seguridad de los mismos
 
Computación en la Nube
Computación en la  NubeComputación en la  Nube
Computación en la Nube
 
CRM
CRMCRM
CRM
 
W riticity ELECTRICIDAD INALAMRICA
W riticity ELECTRICIDAD     INALAMRICAW riticity ELECTRICIDAD     INALAMRICA
W riticity ELECTRICIDAD INALAMRICA
 
Un derivado del adn es buen conductor de la electricidad
Un derivado del adn es buen conductor de la electricidadUn derivado del adn es buen conductor de la electricidad
Un derivado del adn es buen conductor de la electricidad
 
Super baterias
Super bateriasSuper baterias
Super baterias
 
Software para la maquetacion de publicaciones
Software para la maquetacion de publicacionesSoftware para la maquetacion de publicaciones
Software para la maquetacion de publicaciones
 
Sistema inalámbrico para transmitir energía dentro del cuerpo
Sistema inalámbrico para transmitir energía dentro del cuerpoSistema inalámbrico para transmitir energía dentro del cuerpo
Sistema inalámbrico para transmitir energía dentro del cuerpo
 
Retoques fotográficos
Retoques fotográficosRetoques fotográficos
Retoques fotográficos
 
Proyecto crowdfunding para distribuir electricidad sin cables en
Proyecto crowdfunding para distribuir electricidad sin cables enProyecto crowdfunding para distribuir electricidad sin cables en
Proyecto crowdfunding para distribuir electricidad sin cables en
 

Kürzlich hochgeladen

OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxjosetrinidadchavez
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024AndreRiva2
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 

Kürzlich hochgeladen (20)

OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
 

Desarrollo Aplicaciones J2EE

  • 1. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com Jaaaaaaaaaaaa Desarrollo de Aplicaciones Web con J2EE
  • 2. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP 1. Creación de una página JSP <%@ page import="java.io.*" %> <% // creando e inicializando los campos del registro // observar que se debe usar clases numericas apropiadas int clave=0; String nombre=""; intedad=0; if(request.getParameter("CREAR") != null) { // abriendo archivo, capturando y grabando datos try { //* Creando y grabando a un archivo*/ File arch=new File("c:archivo2.dat"); RandomAccessFilearchivo=new RandomAccessFile(arch,"rw"); archivo.close(); } catch(FileNotFoundExceptionfnfe) { /* Archivo no encontrado */ } catch (IOExceptionioe) { /* Error al escribir */ } // avisando out.println("ARCHIVO DIRECTO CREADO");
  • 3. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com }; // construyendo forma dinamica out.println("<FORM ACTION=prog25.jsp METHOD=post>"); out.println("<INPUT TYPE=SUBMIT NAME=CREAR VALUE="CREACION ARCHIVO" ><BR>"); out.println("</FORM>"); %> corrida: Recordar que la estructura que se usó para crear el archivo se deberá usar siempre y con el mismo orden cuando se acceda al archivo con los procesos u operaciones anteriormente mencionados. Observar que es parecido a la creación de archivos secuenciales. Lo primero que se crea es un objeto de tipo FILE que se usa como parámetro para crear el archivo de tipo RANDOMACCESSFILE. Respetar las dos diagonales en el path del disco duro donde quedara el archivo directo. Observar el doble diagonal () en el parámetro. Como segundo paso se crea el archivo con la instrucción: RandomAccessFile archivo=new RandomAccessFile (arch,”rw”); El primer parámetro o argumento en esta función es la unidad de disco y el nombre del archivo. El segundo parámetro o argumento es llamado modo y es una de los varios modos que podemos usar. “r” → Lectura. “w” → Escritura. “rw” → Crea para lectura y escritura y si ya existe, sobrescribe. Cuando se ha finalizado de escribir al archivo se debe cerrar y esto se hace con la instrucción: Archivo.close (); Recordar estudiar todos los métodos de la clase RANDOMACCESFILE. TAREAS PROGRAMACION JAVA JSP Crear archivos directos de alumnos, proveedores, libros, productos, películas.
  • 4. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com 2. Procesamiento de formularios INTRODUCCIÓN Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendo conseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luego deberemos procesar en el servidor web para su correcta interpretación y uso. Este proceso de datos se puede llevar a cabo mediante diferentes tecnologías: CGI, ASP, JSP, etc. Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta más poderosa con la que contamos es sin duda alguna el lenguaje JavaScript (o JScript, como gustan llamarlo los sres. de Microsoft). Mediante JavaScript podemos no sólo validar los datos de cada uno de los campos que formen el formulario, para así poder estar seguros de su validez antes de ser enviados al servidor, si no que también podemos acceder a todos los elementos que forman el formulario y a sus propiedades, con lo que podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestras páginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un objeto formulario. Para aquellas personas que aún no estén muy familiarizados con los formularios les remito al Manual de formularios en HTML de este mismo sitio web. Este artículo - manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni mostrar ejemplos complicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las bases de cómo podemos manejar formularios con este lenguaje de programación, dejando al empeño del lector el profundizar más en casos concretos. EL OBJETO FORM El objeto form se considera en JavaScript como un subobjeto del objeto document, que a su vez forma parte del objeto predefinido window, por lo que inicialmente la sintaxis para acceder a una cualquiera de sus propiedades o métodos es: window.document.forms.[nombre_formulario].[nonbre_campo].propiedad en la que podemos prescindir de las cadenas forms y window, ya que el navegador considera al formulario particular un objeto por sí mismo. Además, el objeto forms dentro del objeto documents posee dos subpropiedades: * index, array que contiene todos los formularios de una página, de sintaxis: document.forms[index] y donde debemos tener en cuenta que el primer formulario viene indentificado por el índice 0, por lo que para acceder al primer formulario de una página deberemos usar la expresión: document.forms[0]... * length , que contiene el número de formularios que hay en la página, y cuya sintaxis es: document.forms.length
  • 5. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com Recordemos que en un formulario HTML un formulario se crea mediante un código del tipo: <FORM NAME="clientes" ACTION="/cgi/clientes:cgi" METHOD="POST" TARGET="cuerpo"> ...campos del formulariio </FORM> Como he dicho antes, un formulario es para JavaScript un objeto por sí mismo, y como tal posee unas propiedades, unos métodos y unos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseño y comportamiento dinámicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado cliente, estando todo el código necesario dentro de la propia página web. LAS PRINCIPALES PROPIEDADES DEL OBJETO FORM SON: NAME : es la propiedad más importante del objeto form, ya que nos va a permitir identificar cada formulario con un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin ambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Por esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON EL MISMO NOMBRE EN UNA MISMA PÁGINA. ACTION : esta propiedad define la URL o URI a donde se van a mandar los datos del formulario; es decir, su valor va a ser una cadena que va a definir la ruta relativa o absoluta en dónde se encuentra el programa o página activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de JavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la página permanecería inmutable. Pero mediante JavaScript podemos cambiarla, simplemente refiriéndonos a ella mediante la escritura: document.[nombre_formulario].action="/ruta/programa.cgi" esto es especialmente útil cuando por ejemplo debemos mandar los datos del formulario a diferentes páginas JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en el formulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviar los datos bien a la página a.jsp o a la página b.jsp. El código necesario para ello sería: <HTML> <HEAD> <SCRIPT LANGUAGE= "Javascript"> <-- function enviar( ){ if ((document.forms.datos.sistema1.checked = = true) && (document.forms.datos.sistema2.checked = = true){ alert('debe hacer una sóla selección) { elseif (document.forms.datos.sistema1.checked = = true) document.forms.datos.action = "/jsp/pag_1.jsp"
  • 6. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com y con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubiera seleccionado ninguna casilla aparecería un mensaje de error. Podemos ver este ejemplo en acción, sólo que en vez de asignar un action en el servidos he asignado a cada casilla como action una página HTML diferente. METHOD: este parámetro establece el método de envío de los datos del formulario. Su valor puede ser POST, conveniente cuando queremos enviar una gran cantidad de datos como una cadena continua, y que es el más usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP (para más información ir al manual de formularios HTML). También podemos acceder a cambiar esta propiedad dinámicamente, pero no se suele hacer nunca, ya que el método de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta propiedad sería: document.forms.[nombre_formulario].method="metodo_elegido". TARGET: la propiedad target define el nombre de la ventana o frame en la que se van a cargar los resultados de procesar el formulario; es decir, cuando el usuario pincha el botón submit se envían los datos del formulario al servidor, en el que un programa o página activa procesa los datos, generando de nuevo otra página que se envía al navegador cliente. En la ventana o frame definido por el atributo target se va a cargar esta página de respuesta. Nos puede interesar que dependiendo de la clase de resultado que obtengamos al procesar los datos cambie la ventana en la que se va a mostrar la página de respuesta, e incluso definir las posibles ventanas dinámicamente. Como ejemplo, supongamos que tenemos una página inicial con dos frames: uno superior, en dónde inicialmente existe un mensaje orientativo, y otro central, en el que inicialmente se encuentra el formulario que debe completar el usuario. Nos interesa que si marca el primer radio botón de un grupo de dos la página de respuesta sea otra página que se carge en la ventana central, pero que si el radio botón marcado es el segundo la respuesta sea un mensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una página con dos frames, en la que se cargan la página del mensaje inicial arriba y el formulario abajo. El código de la página del
  • 7. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com formularios es el que sigue: y aquí podemos ver el ejemplo en acción. ELEMENTS: esta propiedad es un array o vector que contiene todos los elementos que forman un formulario, sean cuales sean, y mediante ella podemos conocer el número de campos diferentes que tiene el formulario, su tipo, etc, teniendo en cuenta que el primer índice del vector es el 0, como ocurría con el vector forms. Posee dos subpropiedades: * INDEX, que define mediante un índice los diferentes campos que forman el formulario, empezando los índices por el 0, y cuya sintaxis es: <HTML> <HEAD> <SCRIPT language="JavaScript" type="text/javascript"> functionenvia( ){ if ((document.forms.datos.sistema1.checked==true) &&(document.forms.datos.sistema2.checked==true)) alert('debe seleccionar una sóla casilla') elseif (document.forms.datos.sistema1.checked==true) { document.forms.datos.target="inf"; document.forms.datos.action="pagina1.html"; } elseif (document.forms.datos.sistema2.checked==true) { document.forms.datos.action="mensaje2.html"; document.forms.datos.target="sup"; } elsealert('debe seleccionar un checkbox'); document.forms.datos.submit() } </SCRIPT> </HEAD> <BODY ONLOAD= "document.forms.datos.reset()"><BR><FORM NAME="datos"> <INPUT TYPE="Checkbox" NAME="sistema1">sitema 1 <INPUT TYPE="Checkbox" NAME="sistema2" >sitema 2<BR> <INPUT TYPE="button" VALUE="envía" ONCLICK= "envia( )"> </FORM> </BODY> </HTML>
  • 8. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com document.forms.nombre_formulario.elements[index] * LENGTH, que contiene el número de elementos que forman el formulario, y cuya sintaxis es: document.forms.nombre_formulario.elements.length El uso general de la subpropiedad índex puede ser del tipo: EJEMPLO EN ACCIÓN. Como vemos en este ejemplo, también podemos referirnos a un formulario de nuestra página por medio de su índice en el arrayforms que posee cada objeto window.document, teniendo en cuenta que el primer índice es 0 . Mediante esta forma de expresarnos podemos acceder a cualquier formulario de la página sin necesidad de conocer su nombre, y podemos obtener el número de formularios que hay en una página en concreto. La sintaxis para acceder a un formulario mediante este camino es del tipo: document.forms[indice].propiedad Y para conocer el nº de formularios en la página deberemos escribir:
  • 9. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com function cantidad ( ) { var f = document.forms.length; alert( ' el número de formularios de la página es ' + f ); document.forms[2].texto.value='cambiamos el valor del campo'; } y esto en acción, en una página con 3 formularios en la que mostramos el número de ellos y cambiamos el valor del campo de texto del segundo formulario, podemos verlo en este ejemplo. ENCODING :que es un string o cadena que contiene el tipo MIME utilizado para codificar el contenido del formulario a enviar al servidor, y que refleja el atributo ENCTYPE de la etiqueta FORM de HTML, que se utiliza para codificar los datos remitidos desde el formulario hacia el servidor, pudiendo mediante esta propiedad cambiar dinámicamente lel tipo de codificación. LOS MÉTODOS DEL OBJETO FORM SON DOS: SUBMIT ( ) :para enviar los datos de un formulario es necesario siempre utilizar este método, que por defecto está asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado llama al método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos al servidor se ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos, mensajes de alerta y/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un botón tipo button que al ser pulsado llame a una función JavaScript que ejecute las acciones previas al envío y una vez cumplimentadas envíe los datos. Esto se consigue llamando en la función al método submit ( ), y el código necesario tiene el aspecto siguiente: function previa ( ) { ... ...acciones a realizar... ... document.forms.nombre_formulario.submit ( ); } RESET ( ) : este método pone a cero los campos del formulario, es decir, vuelve a situar el formulario en su estado inicial, y al igual que ocurre con el método submit existe por defecto un botón <INPUT TYPE = " reset " > que se encarga de realizar esta operación, útil por ejemplo cuando el usuario se ha equivocado al rellenar los campos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces poner a cero los campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando diréctamente al método submit ( ) o llamando a una función que ejecute el método, siendo el código de llamada en ambos casos del tipo: document.forms.nombre_formulario.reset ( ) POR ÚLTIMO, VAMOS A VER LOS EVENTOS QUE ADMITE EL OBJETO FORM, ALGUNOS DE LOS CUALES SON ESTÁNDARES Y OTROS SIN SERLO SÍ LOS ADMITE, Y QUE SON: ONSUBMIT : es el principal evento del objeto y el único estandar, y se produce al enviar los datos del formulario mediante el botón submit o mediante el método submit ( ). Un ejemplo de llamada al método sería: <FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envían los datos ' ) " >
  • 10. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com ONRESET : mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón de borrado o cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo para lanzar un mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis del tipo: <FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONRESET = " alert ( ' se van a borrar los datos' ) " > ONCLICK : este no es un evento típico del objeto form, pero se puede usar con én, y mediante él podemos ejecutar una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de que se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario en su totalidad.. Su escritura se debe parecer a: <FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONCLICK = " alert ( ' ha pulsado un campo' ) " > además de estos eventos, y al igual que ocurre con onClick, el objeto form también admite los eventos generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas que beneficios, por lo que no se utilizan. Sólo saber que estás ahí y que se pueden usar en casos muy específicos. 3. Acceso a las cabeceras de petición
  • 11. Desarrollo de Aplicaciones Web con J2EE Ing. Pablo Cesar Ttito C. InfomixUnitek@gmail.com