PROGRAMACIN DE APLICACIONES WEB

LABORATORIO 5 JavaScript

Contenido 1. 2. 3. 4. 5. Javascript Ubicacin del cdigo javascript Elementos de javascript Funciones predefinidas Objetos predefinidos 6. Eventos

ING. Fernando Castillo R. ecastillor@upao.edu.pe

2009 - II

JavaScript

Pgina Web
Estructura
Prrafos Tablas Encabezados Capas Listas Etc. Textos Imgenes Enlaces Colores Tipografas Alineacin Fondos Tamaos Etc.

HTML

Contenido

Apariencia

CSS JavaScript

Comportamiento

Efectos Validaciones Automatizacin

El cdigo JavaScript va incrustado en los documentos HTML, y se encargan de realizar acciones que son interpretadas por el navegador del cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos, etc.

Ubicacin del cdigo JavaScript Cuando el Script va dentro del documento HTML -> HEAD

Cuando el Script va dentro del documento HTML -> BODY

Cuando el Script esta en un archivo separado

Elementos de JavaScript Comentarios

Declaracion de variables

var variable = valor;

3

Operadores Operador + * / % ++ -&& || ! == != >= <= > < += -= *= /= %= Estructuras de control Significado Suma Resta Multiplicacin Divisin Residuo Incremento Decremento AND ( Y Lgico) OR (O Lgico) NOT (No Lgico) Igual Distinto Mayor o igual Menor o igual Mayor Menor Suma y asignacin Resta y asignacin Producto y asignacin Divisin y asignacin Resto y asignacin

Funciones

function nombFunc(arg1, arg2,) { //Instrucciones que debe realizar la funcin; }

FUNCIONES PREDEFINIDAS parseInt(textonumero): Convierte una cadena a un numero parseFloat(textonumero): Convierte una cadena a un real isNaN(expresion): Devuelve verdadero si la expresin tiene un contenido no numrico.

OBJETOS PREDEFINIDOS window Permite acceder a ciertas propiedades de la ventana en la que vemos la pgina. Propiedades - Status -> Mensaje de la barra de estado. - Document -> Documento HTML visualizado. Mtodos - alert(msg) -> Muestra una ventana con un mensaje - confirm(msg) -> Muestra una ventana con un botn de cancelar y otro de aceptar, devuelve true si se ha pulsado aceptar y false si se ha pulsado cancelar. - prompt(msg,default) -> Muestra una ventana de entrada de datos , con un valor por defecto. - open(url,nombre,opt) -> Abre una ventana del navegador. - close() -> cierra la ventana. document Permite acceder a todos los elementos de la pgina HTML Propiedades: - bgColor -> Color del fondo - fgColor -> Color del texto. - linkColor -> Color de los enlaces normales. - vlinkColor -> Color de los enlaces visitados - alinkColor -> Color de los enlaces activos. - images -> Array que contiene todas las imgenes del documento. Mtodos - clear() -> Borra el documento. - write(textoHTML) -> Escribe el texto indicado en el documento. - writeln(textoHTML) -> Lo mismo que la anterior, slo que esta aade un salto de linea tras escribir el texto. - close() -> Cierra el documento. EVENTOS Un evento es suceso que ocurre cuando el usuario realiza alguna accin

<Etiqueta atributo=valor onEvento=progJS;>

onClick: Se produce cuando el usuario hace clic en el objeto. onDblClick: Se genera cuando el usuario hace doble clic con el ratn. onMouseOver: Se produce cuando el usuario pasa el cursor por encima del objeto. onMouseOut: Ocurre cuando el usuario abandona el objeto. onMouseDown: Se produce cuando el usuario mantiene pulsado el botn principal del ratn a la vez que se sita encima de un objeto. onMouseUp: Ocurre cuando el usuario levanta el botn del ratn. onMouseMove: Sucede cuando el usuario mueve el ratn. onKeyDown, onKeyPress y onKeyUp: Ocurren respectivamente cuando el usuario pulsa una tecla, cuando la mantiene pulsada y cuando la suelta. onLoad: Se produce cuando la pgina se est cargando. onUnload: Se produce cuando la pgina se est descargando. onResize: Ocurre cuando se cambia el tamao de la ventana. onBlur: Se produce cuando un objeto pierde el foco (deja de ser el objeto activo). onFocus: Sucede cuando un objeto gana el foco (pasa a ser el objeto activo). onAbort: Se produce si el usuario pulsa el botn Detener mientras se estaba cargando una imagen. onError: Se produce cuando ocurre un error. onChange: Se produce cuando el usuario cambia el contenido de un cuadro de texto de un formulario. onSelect: Ocurre cuando el usuario selecciona texto de un cuadro del formulario. onSubmit: Ocurre cuando un formulario es enviado a su servidor. onReset: Sucede cuando un formulario es anulado mediante su botn Reset.

Inicio.html

Producto.html

Usuario.java USUARIO nombres usuario clave usuario(nombres,usuario,clave) getNombres() getUsuario() getClave() setNombres(nombres) setUsuario(usuario) setClave(clave)

Producto.java PRODUCTO codigo nombre precio cantidad producto(codigo,nombre,precio,cantidad) getCodigo() getNombre() getPrecio() getCantidad() setCodigo(codigo) setNombre(nombre) setPrecio(precio) setCantidad(cantidad)

ServletUsuario.java

10

11

ServletProducto.java

12

13