Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN

MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Formularios Dinmicos con JavaScript Tema 1: Nociones de JavaScript

JavaScript como lenguaje de programacin (http://es.wikipedia.org/wiki/JavaScript)

JavaScript es un lenguaje de programacin interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programacin basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

Adems, JavaScript permite crear pginas web interactivas (DHTML) con relativa facilidad. Se utiliza tanto para programacin en el lado del cliente (navegadores fundamentalmente) como en el lado del servidor (ASP, Netscape Enterprise Server). El ncleo de JavaScript incluye los elementos tpicos de un lenguaje de programacin: variables, sentencias, estructuras, operadores y adems incorpora un conjunto de objetos de utilizacin frecuente (Array, Math, etc).

Variables en JavaScript (http://www.vitaminaweb.com/javascript/tutorial/variables.php)

JavaScript define tres tipos bsicos de valores: nmeros, cadenas de texto y booleanos (true/false). Adems incorpora los valores especiales: null , undefined y NaN. Las variables no necesitan ser declaradas y pueden almacenar cualquier tipo de dato de forma dinmica:

El tipo de dato que almacena una variable se resuelve segn el contexto. Por ejemplo, si se utiliza el operador suma (+) mezclando cadenas de caracteres con valores numricos, el resultado es una cadena:

Sin embargo, es recomendable declarar las variables antes de utilizarlas, ya que una variable no declarada implcita o explcitamente provocar un error de ejecucin si se utiliza en una expresin:

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

Tambin tiene importancia la declaracin de las variables a la hora de considerar su alcance y visibilidad. Las variables declaradas fuera de una funcin son consideradas globales al programa (documento). Para utilizar una variable local que utiliza el mismo nombre que una variable global es necesario declarar la primera de forma explcita con 'var'.

Estructuras de Control en JavaScript Para quienes han programado en lenguajes como C o C++, el uso de una estructura de control (condicionales, repetitivas, etc.) no presenta mayor complejidad, ya que mantiene la misma sintaxis conocida en estos lenguajes de programacin. Es por esto que, para efectos de este curso haremos nfasis en la inclusin de palabras reservadas propias de JavaScript dentro de estas estructuras. Particularmente nos interesar lo concerniente a la entrada/salida de datos que estarn interrelacionados con nuestros formularios.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

Formularios Dinmicos con JavaScript Tema 2: la Etiqueta Script en HTML

Cmo incluir un script en una pgina Web? (http://www.proclave.com/esp/cursos/java/curso_javascript.htm )

La manera ms convencional en que aparece JavaScript en un documento es en forma de programa. Podemos empezar por mostrar unos breves scripts y ver como son implementados dentro de documentos HTML. Empezaremos con un pequeo programa que muestra un texto en un documento HTML.

Este primer programa se limita a escribir en pantalla un determinado texto para lo que se emplea el cdigo document.write. En este cdigo, document es un objeto creado por el sistema que hace referencia al propio documento y write es uno de los mtodos que proporciona para interactuar con l. El resultado de cargar este documento en un browser que interprete JavaScript ser la aparicin de los dos textos, el escrito en JavaScript y el escrito en HTML, sin que el usuario sea consciente del proceso.

Este script no es muy til pero sirve para mostrar el uso de la etiqueta <SCRIPT>. Puedes usar estas etiquetas en cualquier lugar del documento, tanto en la cabecera como en el cuerpo, aunque si se declaran funciones es ms aconsejable hacerlo en la cabecera. La etiqueta <SCRIPT> es una extensin de HTML en la que se encierra el texto que compone el cdigo del programa JavaScript correspondiente de la manera siguiente:

<SCRIPT> Sentencias JavaScript... </SCRIPT>

De esta manera el navegador que "entienda" JavaScript reconocer el texto encerrado entre estas etiquetas como cdigo JavaScript y no lo mostrar en la pantalla del cliente. Una cuestin importante a considerar es el mantenimiento de la compatibilidad con navegadores anteriores. Cualquier browser ignora las etiquetas desconocidas, por lo tanto, aquellos que no soporten JavaScript ignorarn el comienzo y el final del cdigo del programa (encerrado entre las etiquetas <SCRIPT> y </SCRIPT>).

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Para que el resto del cdigo tambin sea ignorado y no aparezca en la pantalla del cliente, lo encerraremos entre los smbolos de comentario HTML, <!-- y -->. Los navegadores que, por el contrario si lo soporten, interpretarn el cdigo encerrado entre las etiquetas SCRIPT e ignorar el principio de la linea en el script que comienza con la doble slash (//) o bien el encerrado entre "/*" y "*/", que son los smbolos de comentarios en este lenguaje.

Ejemplo 1: crea un documento HTML que utilice cdigo en JavaScript para visualizar en pantalla un listado con los mltiplos de 4 entre el 1 y el 50. Recuerda usar etiquetas HTML para visualizar mejor el contenido.

Actividad N1 Crear un documento HTML que imprima en pantalla, usando un script, los primero 10 mltiplos de 13. Adems, debe utilizar una tabla para mostrar la informacin tal como se muestra a continuacin: 2 4 6 Es mltiplo de Es mltiplo de Es mltiplo de 2 2 2

Formularios Dinmicos con JavaScript Tema 3: Los Mensajes

3.- Programacin de ventanas de mensaje en JavaScript (http://www.webtaller.com/construccion/lenguajes/ )

Uno de los usos mas recurrentemente dados al javascript, suele ser el de la emisin de mensajes en diversas situaciones tales como: notificaciones de eventos, solicitud de confirmacin y solicitud de valores para un campo. En este tema vamos a estudiar los tres comandos que permiten la ejecucin de los mensajes, as como el contexto donde pueden ser empleados.

Alert: permite el envo de mensajes meramente informativos sin mayor interaccin, ya que solo presenta el botn aceptar. Puede ser utilizado para dar al usuario resultados o estatus de solicitudes, asi como para alertar sobre inconvenientes que deben ser corregidos en un formularios (campos vacios, etc.)

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Estructura: alert(mensaje); Ejemplo:

Visualizacin:

Confirm: este mensaje permite presentar al usuario la posibilidad de confirmar la ejecucin de una accin mediante la seleccin entre los botones aceptar y cancelar. Cabe sealar adems, que esta opcin es muy til para procesos complejos o delicados como borrar registros, imprimir la pgina, etc.

Estructura: resultado = confirm(mensaje); Ejemplo:

Visualizacin:

Prompt: en ocasiones, es necesario que el usuario introduzca un valor dado para poder procesar la informacin suministrada, por lo que es til el envo de un mensaje que, adems de notificar, permita la captura y asignacin de un valor dado. En este caso, encontraremos los botones aceptar y cancelar, acompaado de una casilla de texto para la introduccin del nuevo valor.

Cabe destacar que, al existir la opcin cancelar, siempre podr darse el caso de que el valor a asignar sea vacio, por lo que es necesaria la validacin correspondiente.

Estructura: resultado = prompt(mensaje, valor); Ejemplo:

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

Visualizacin:

En conclusin, con estos mtodos mostraremos ventanas modales al usuario. Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero adems obligar al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolver como parmetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal.

Formularios Dinmicos con JavaScript Tema 4: Funciones

4.- Estructura bsica de una funcin en JavaScript (http://www.ulpgc.es/otros/tutoriales/JavaScript/cap5.htm )

La instruccin function permite la definicin de funciones. Despus de esta palabra reservada se coloca el nombre de la funcin seguido de una lista de argumentos delimitados por parntesis y separados por comas.

Ejemplo:

La sentencia return es la que permite devolver el resultado de una funcin. En el ejemplo que se ver a continuacin, se muestra una funcin que devuelve el rea de un cuadrado de lado l.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Formularios Dinmicos con JavaScript Tema 5: Eventos del Formulario

5.- Cmo invocar funciones desde un formulario? (http://javascript.espaciolatino.com/orientar/formscript.htm )

Los formularios son la manera en que las pginas web permiten interactividad con los usuarios que las visitan. Adems, Javascript tambin es capaz de procesar los formularios, para lo cual no se necesita mucha destreza, pues basta con conocer dos o tres detalles.

Caso 1: Cabecera del Formulario: En la cabecera del formulario aparece el atributo action, este es quien dice que se har al pulsar el botn submit. Aqu podemos llamar a otra pgina o a un programa Javascript.

La funcin procesar() lleva de argumento el objeto formulario. Desde dentro de la funcin se podr acceder a todos los elementos del formulario. Por ejemplo:

Esta sencillsima funcin mostrar un mensaje con el valor del campo dato

Caso 2: Elementos del Formulario: Tambin podemos llamar a funcin Javascript desde otros elementos del formulario. Por ejemplo desde un botn, o desde cualquier otro elemento del formulario. Ejemplo:

En esta ocasin se llama a la funcin procesar() con el atributo this, que contiene el objeto button (botn). Si dentro de la funcin queremos acceder al formulario le pasaremos como argumento document.forms.form1

Con esta forma de llamada la funcin sabe que botn se ha pulsado, muy til si el formulario contiene varios botones. Igual que se ha usado el evento onmousedwon (botn pulsado) se podran haber usado otros como onmouseover u onmouseout, para as actuar cuando el ratn pasa por encima del botn. Adems de botones podemos usar cualquier otro campo del formulario: campos de texto, checks, ratios, textarea...

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Caso 3: Listas de opciones: Las tiles listas de los formularios son tambin procesables en Javascript. Este objeto lista contiene un array (de nombre options) con las opciones que presenta. Cuando el usuario selecciona uno de esos elementos su posicin se anota en la propiedad selectedIndex del objeto lista.

Esta funcin puede ser llamada desde un botn, con el evento onmousedown, o desde el propio campo select mediante el evento onchange, que se dispara cuando se cambia la opcin seleccionada. Te ilustramos este segundo mtodo:

Slo una advertencia: los ndices comienzan en 0, en el ejemplo si se elecciona la opcin 2 el valor de selectedIndex ser 0. Estos elementos son muy tiles para construir mens de enlaces.

Actividad N2 Crea un archivo html que permita calcular el resultado de las cuatro operaciones aritmtica, a partir de dos campos y cuatro botones en un formulario. Utiliza adems cdigo javascript para programar cada evento

Formularios Dinmicos con JavaScript Tema 6: Archivos Externos

6.- Usar cdigo javascript creado en un archivo externo Cuando queremos usar Javascript tenemos dos opciones para poder incluirlo nuestra pgina web, la primera es poner directamente la funcin entre las etiquetas <head> y </head> y la segunda es utilizar un archivo externo con extensin .js (javascript). El archivo externo tiene la ventaja de que hace ms ligera tu pgina al graberse en la pc del usuario y no tener que cargarse en cada pgina durante la navegacin.

Con el blog de notas o editor de texto, puedes crearlo sigueindo estos pasos:

Abre el blog de notas o editor de texto.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Crea tus funciones en el nuevo documento. En este archivo no tienes que incluir la etiquetas <script type=text/javascript></script> como cuando las incluyes directamente en la pgina, s aparecen en tu funcin, simplemente eliminalas. Ve al men archivo y guardar como.En el nombre del archivo, borra lo que tiene por default y escribe el nombre de tu archivo pero con terminacin .js, por ejemplo funciones.js. Si trabajas en microsoft Windowas, deberas ademas dirigirte un poco abajo, en la cortina Tipo y seleccionar Todos los archivos y abajo de esta, en la cortina codificacin selecciona UTF-8

Para vincularlo, vamos al cdigo HTML de nuestra pgina y nos ubicamos entre las etiquetas <head> y </head>. Es aqu donde haremos el llamado al archivo y lo haremos de la siguiente forma:

Donde slo tenemos que cambiar la ubicacin de nuestro script, es decir, donde aparece src=, delante del igual y entre comillas, la direccin de nuestro archivo JS.

Actividad N3 Crea un archivo javascript y guardalo como codigos.js. luego trasnfiere aste todos los cdigos gemerados en la actividad 2, y agrega el enace

correspondinte

Departamento de Informtica y Tecnologa Educativa DITE-UNEFM

______________________________________________________________________________________ Sistemas de Informacin I