Laboratorio 7 Paginas Dinámicas Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 28 de Mayo del 2010 Profesor: Profesor Auxiliar:

Universidad de Chile – Bachillerato Curso: Computación Paginas Dinamicas Para realizar paginas dinamicas, debemos ocupar todo lo aprendido anteriormente; esto quiere decir, que ocuparemos: HTML Formularios JavaScript CSS La correcta combinación de estos elementos permitirá un mejor nivel de dinamismo.

Curso: Computación Consideraciones Iniciales Para un correcto manejo de los objetos de la pagina, debemos tener en consideración lo siguiente: 1.- Todo objeto que queramos modificar o checkear, debe tener asignado un nombre (name) y un identificador (id); ya sea un tag html o un objeto del formulario. 2.- Recordar que nunca se puede repetir un name o id. 3.- Siempre tratar de hacer paginas “usables”. Universidad de Chile – Bachillerato

Curso: Computación Tags útiles en HTML Al momento de hacer paginas dinámicas, unos de los objetos mas útiles, son los siguientes: DIV: Útil para generar bloques unitarios. Podría considerarse como una tabla de 1x1. Por lo general se ocupan para ocultar objetos o sobreponerlos. … Formularios Ocultos: útiles para guardar datos de estados. BUTTON: como el objeto button no envía el formulario, es útil para realizar acciones. Manejadores de eventos: sirven para poder detectar distintas acciones de los usuarios. onClick, onChange, onMouseOver, onSubmit, onLoad Universidad de Chile – Bachillerato

Curso: Computación Tags útiles en CSS Al momento de hacer paginas dinámicas, unos de los objetos más útiles, son los siguientes: Display: Este atributo es útil para ocultar o aparecer objetos. Para ocultar un objeto: en un archivo css: display: none; en el JavaScript: document.getElementById(ID).style.display=‘none’; en HTML: style=“display:none;” Para mostrarlo: en el JavaScript: document.getElementById(ID).style.display=‘’; Universidad de Chile – Bachillerato

Curso: Computación Comandos útiles en JavaScript Instrucciones Condicionales: sirven para hacer diferentes acciones bajo diferentes condiciones if ( condición) acción else acción EVAL: Sirve para evaluar un texto y transformarlo a su valor como script. valor = eval(formulario.edad.value); FOCUS: Sirve para ir a algún elemento de un formulario; útil para guiar al usuario. theForm.nombre.focus(); ALERT: Sirve para mandar un mensaje de alerta al usuario. alert(“texto”); ACTION: Es una propiedad del formulario, sirve para redefinir la pagina a la cual vamos a enviar la información theForm.action="ok.htm"; Universidad de Chile – Bachillerato

Curso: Computación Laboratorio Crear un formulario que tenga el siguiente formato: 1.- pregunta con uso de al menos 3 radio buttons. 2.- pregunta con uso de al menos 4 checkbox, donde exista la opción de “otro” y que al hacer click en ella, aparezca un textbox para completar. 3.- solicitud de datos de: nombre, sexo, pagina web y mail. 4.- la pagina debe tener al menos 2 objetos que se escondan/muestren y que cambien de color. 5.- Realizar validaciones sobre la pregunta 1, 2, nombre, mail y en el caso de que se seleccione “otro” en la pregunta 2, se debe validar que se escriba algo en el text box. 6.- dependiendo de los resultados de la encuesta se debe mostrar una pagina de éxito o una de fracaso. Cada ítem vale un punto. Universidad de Chile – Bachillerato