UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COMPUTACIÓN

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COMPUTACIÓN CICLO: 02/2015 GUIA DE LABORATORIO #9 Nombre de la Practica: Control de eventos con JavaScript Lugar de Ejecución: Centro de Cómputo Tiempo Estimado: 2 horas con 30 minutos MATERIA: Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente DOCENTES: Téc. Henry Cardoza / Inga. Karens Medrano / Ing. Ricardo Elías I. OBJETIVOS Que el estudiante: 1. Conozca el modelo básico de control de eventos en JavaScript 2. Realice vinculación de eventos al documento web a través de atributos HTML 3. Efectúe vinculación de eventos al documento web utilizando JavaScript 4. Utilice el modelo de eventos del DOM2 para captura de eventos en un documento II. INTRODUCCION TEORICA Control de eventos Los eventos son controlados por un modelo de eventos. Este modelo de eventos es parte del Modelo de Objetos de Documento y se encarga de determinar la forma en que los scripts deben procesar dichos eventos cuando sucedan. Los eventos pueden ser movimientos del puntero del ratón, pulsación de los botones, pulsaciones de teclas en el teclado o arrastrar un objeto por la pantalla. En el control de los eventos a través de un navegador web estándar participan varias tecnologías: El navegador: que determina qué tipo de eventos soporta y cómo debe gestionarlos. El lenguaje HTML: que proporciona el marco de trabajo de los objetos del documento a los que están vinculados los eventos. El lenguaje JavaScript: que se puede utilizar para establecer, manipular y responder a las acciones soportadas por el navegador. Los modelos de eventos proporcionados por los navegadores han evolucionado de forma incompatible, de modo que el consorcio W3C incluyó en el DOM nivel 2 un modelo estándar de eventos. Modelo básico de eventos Podemos definir un evento como una acción destacada que ocurre dentro del navegador y a la que se puede responder con ejecutando un guión o script. Un manejador de eventos es código de JavaScript asociado a una parte específica del documento y a un evento en particular. El código de JavaScript se ejecuta si ocurre el evento y exactamente cuando este se produce en la parte del documento al que está asociado. El proceso de control de eventos en el modelo básico de eventos, común a todos los navegadores, es directo. Los manejadores de eventos se asignan a partes del documento utilizando HTML o JavaScript y cuando ocurre un evento, el navegador revisa la parte pertinente de la jerarquía del documento en busca del manejador apropiado. Si existe uno, se ejecuta, si no, no sucede nada. Los objetos en los que ocurren los eventos son, por lo general: enlaces, botones, formularios e imágenes. Sin embargo, también lo puede ser el documento mismo, o cualquier elemento HTML como pueden ser párrafos, 1 / 47

2 listas o tablas. Hay que mencionar que como todo lo demás en JavaScript, no todos los modelos soportan todos los eventos para cada elemento de la página. Vinculación de eventos en HTML HTML soporta vinculación de eventos nucleares para la mayor parte de los elementos. Esta vinculación se realiza a través de atributos para los elementos, como onclick, onmouseover, onmouseout, onload, onchange, etc que toman como valor código de JavaScript que se ejecutará cuando el evento dado ocurra en ese objeto. Veamos el siguiente ejemplo, en el que se realiza una vinculación a través de un manejador Click para un enlace: <a href=" onclick="alert('conectando con las oficinas centrales del DOM')">El DOM del consorcio W3C</a> La mayor parte de los atributos de eventos HTML suponen una interacción simple del usuario, como hacer clic en un botón del ratón o pulsar una tecla. Otros elementos, como los campos de formularios tienen algunos eventos especiales asociados a ellos como indicar el campo que ha recibido el foco, el envío del formulario, el cambio de opción en un campo de menú de selección, etc. La siguiente tabla muestra una lista de los eventos fundamentales del modelo básico de eventos: Atributo de evento Descripción de evento Elementos que lo admiten onblur onchange Ocurre cuando un elemento pierde el foco, lo que significa que el usuario ha movido el foco hacia otro elemento, generalmente haciendo clic con el ratón sobre él o moviéndose hasta él con el tabulador. Indica que el campo de formulario ha perdido el foco del usuario y su valor se ha modificado durante el último acceso. <a>, <area>, <button>, <input>, <label>, <select>, <textarea>, <div>, <embed>, <hr>, <img>, <marquee>, <object>, <applet>, <span>, <table>, <tr>, <td> <input>, <select>, <textarea> onclick Indica que se ha hecho clic en el elemento. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, en general. ondblclick Indica que se ha hecho doble clic en el elemento. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, en general. onfocus onkeydown onkeypress onkeyup onload Indica que el elemento ha recibido el foco; concretamente, que se ha seleccionado para manejarlo o para la entrada de datos. Indica que una tecla se está pulsando con foco en el formulario. Describe el evento de pulsar y liberar una tecla con foco en el elemento. Indica que una tecla se deja de pulsar estando el foco en el elemento. Indica el evento de que una ventana o un conjunto de marcos terminen de cargar de un documento u otro fichero. <a>, <area>, <button>, <input>, <label>, <select>, <textarea>, <div>, <embed>, <img>, <hr>, <marquee>, <object>, <span>, <table>, <tr>, <td>, <body> La mayoría de elementos de visualización: botones, enlaces, campos de formulario, en general. La mayoría de elementos de visualización: botones, enlaces, campos de formulario, en general. La mayoría de elementos de visualización: botones, enlaces, campos de formulario, en general. <body>, <frameset>, <embed>, <link>, <script>, <style>, <applet>, <img>, <layer> Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 2

3 onmousedown onmousemove onmouseout onmouseover onmouseup onreset onselect onsubmit onunload Indica la pulsación de un botón del ratón con foco en el elemento. Indica que el ratón se ha movido mientras estaba sobre el elemento. Indica que el ratón se ha desplazado fuera de un elemento. Indica que el ratón se ha desplazado sobre un elemento. Indica que ha sido liberado un botón del ratón con foco en el elemento. Indica que el formulario ha sido restablecido o borrado, posiblemente por la pulsación de un botón Restablecer (reset). Indica la selección de texto por el usuario, generalmente resaltando el texto deseado. Indica que el formulario está a punto de ser enviado, generalmente como resultado de activar un botón de envío. Indica que el navegador está abandonando el documento actual y descargándolo de la ventana o marco. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, etc. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, etc. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, etc. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, etc. La mayoría de los elementos de visualización: botones, enlaces, campos de formulario, etc. <form> <input>, <textarea> <form> <body>, <frameset> El valor de un atributo de controlador de evento es una cadena arbitraria de código JavaScript, tomando en cuenta que si el controlador consiste de múltiples instrucciones JavaScript, estas deben separarse entre sí con punto y coma. Veamos algunos ejemplos: <input type="button" value="hazme clic" onclick="if(window.numclicks) numclicks++; else numclicks=1; this.value='click #' + numclicks;" /> Cuando un controlador de eventos require múltiples instrucciones, resulta más conveniente definirlas en el cuerpo de una función (o método si está utilizando un enfoque completamente orientado a objetos) y utilizar el atributo del controlador de eventos HTML para llamar a dicha función. Por ejemplo, para validar una entrada del usuario a un campo de formulario antes de enviar dicho formulario al servidor, se puede utilizar el atributo onsubmit del elemento FORM. Suponiendo que hemos creado una función de validación denominada validateform() para realizar la validación: <form name="myform" id="myform" action="validar.php" onsubmit="return validateform();"> <!-- Campos del formulario --> </form> Vinculación de eventos en JavaScript Muchas veces resulta más ventajoso utilizar JavaScript en lugar de vincular manejadores de eventos a partes de un documento utilizando atributos de eventos con HTML. Esto se debe a las características más avanzadas del modelo de eventos. Otra ventaja añadida de la utilización de JavaScript es la separación entre la estructura y la lógica del documento y su presentación. Hay que tener en cuenta que en JavaScript se accede a los manejadores de eventos como métodos del objeto al que están vinculados. Por ejemplo, para establecer el manejador clic en un botón de formulario se le asigna a su propiedad onclick el código que se desea activar: <form name="myform" id="myform"> Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 3

4 <input type="button" name="mybutton" id="mybutton" value="hacer clic aquí"> </form> <script language="javascript" type="text/javascript"> <!-- document.myform.mybutton.onclick = new Function("alert('Gracias por pulsarme');"); //--> </script> Activación de eventos de forma manual Se pueden invocar tanto manejadores de eventos, como eventos de forma manual. Debe tenerse cuidado de invocarlos de forma correcta respectando las letras mayúsculas o minúsculas. No hay que olvidar que JavaScript distingue entre mayúsculas y minúsculas y si se invoca una propiedad de instancia desconocida provocará un error en tiempo de ejecución. Existen métodos para manejadores de eventos como onmouseover(), onclick() y también existen métodos para activar eventos como submit() y reset(). Veamos el siguiente ejemplo: <form name="myform" id="myform" onsubmit="return confirm('fin en los datos del formulario')" method="get" action=" <input type="button" value="botón regular (tipo button) con método submit" onclick="document.myform.submit()"><br> <input type="submit" value="botón enviar (tipo submit) real"> </form> La diferencia entre activar el método submit() con el evento onclick de un botón button, comparado con la utilización del botón tipo submit es que el primero efectúa el envió inmediatamente, en tanto que el segundo activa primero el evento submit y luego hace el envío propiamente dicho. Otro aspecto importante que poseen los manejadores de eventos es que se pueden utilizar sus valores de retorno para modificar el comportamiento predeterminado del evento. Como se ve a continuación: <a href=" onclick="return confirm('ir al sitio de la W3C')">W3C</a> La siguiente tabla muestra valores comunes de retorno de eventos y sus efectos: Evento Valor de retorno Efecto Click False Botones de opción y casillas de verificación. Ninguno se establece. Botones de envío: el envío del formulario se cancela. Botones de restablecer, el formulario no se restablece. Enlaces, el enlace no se sigue. DragDrop False Arrastrar y cargar se cancela. KeyDown False Cancela los eventos de KeyPress que siguen (mientras el usuario mantiene la tecla pulsada). KeyPress False Cancela el evento KeyPress. MouseDown False Cancela la acción predeterminada (el comienzo de un arrastre, el comienzo del modo de selección o el montaje de un enlace). MouseOver True Hace que cualquier cambio en las propiedades del estado (status) o del estado predeterminado (defaultstatus) de la ventana se refleje en el navegador. MouseOver False Hace que algunos cambios del estado (status) o del estado predeterminado (defaultstatus) se ignoren hasta que ocurra MouseOut Submit False Cancela el envío del formulario. Modelo de eventos del DOM2 El consorcio W3C proporciona un modelo de eventos del DOM2 que intenta normalizar con un mínimo divergencias la interacción de los scripts con documentos estructurados de forma correcta, brindando una Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 4

5 interfaz independiente del lenguaje y de la plataforma. Para conseguir la funcionalidad de este modelo se requiere de un Modelo de Objetos de Documento que cumpla con la especificación del DOM de la W3C. Los eventos empiezan su ciclo de vida en la parte superior de la jerarquía del documento y van abriéndose camino descendiendo hasta el objeto destino. Esto se conoce como la fase de captura. Durante su descenso, el evento puede ser preprocesado, controlado o dirigido por cualquier objeto participante. Una vez que ha alcanzado su objeto destino y el manejador lo haya ejecutado, el objeto comienza su camino de regreso ascendiendo por la jerarquía. Esto se conoce como fase de ascenso. Los eventos ascienden de forma predeterminada, pero se deben capturar explícitamente en su camino descendente de forma semejante a la de los navegadores Netscape 4+. El DOM nivel 2 define un objeto Event que proporciona información relevante a los manejadores. Este objeto es creado automáticamente por el navegador y debe ser pasado a las funciones que van a constituirse en los manejadores de evento. Las diferencias con las que cada navegador incorpora propiedades y métodos para este objeto event deben ser consideradas por el desarrollador. La siguiente tabla muestra algunas propiedades relevantes de este objeto. Propiedad Descripción altkey Valor lógico que indica si la tecla alt ha sido pulsada bubbles Valor lógico que indica si el evento asciende button Valor numérico que indica el botón de ratón presionado (originalmente es 0, pero varía de sistema a sistema) cancelable Valor lógico que indica si el evento no debería ascender por la jerarquía charcode El valor ASCII de la tecla presionada durante eventos de pulsación de tecla clientx Valor numérico que indica la coordenada horizontal del evento clientey Valor numérico que indica la coordenada vertical del evento ctrlkey Valor lógico que indica si la tecla CTRL se ha pulsado currenttarget Nodo al que está asignado el manejador de eventos shiftkey Valor lógico que indica si la tecla SHIFT se ha pulsado target Nodo en el cual ha ocurrido el evento type Cadena que contiene el tipo de evento (por ejemplo click ) Vinculación de controladores de eventos de forma compatible A pesar de las diferencias en el manejo de eventos entre navegadores que se apegan a DOM Nivel 2 y el Internet Explorer, versiones anteriores a la 9.0. Es posible desarrollar código de JavaScript portable. if (document.addeventlistener) { this.addevent = function (elem, type, fn) { elem.addeventlistener(type, fn, false); return fn; ; this.removeevent = function (elem, type, fn) { elem.removeeventlistener(type, fn, false); ; else if (document.attachevent) { this.addevent = function (elem, type, fn) { var bound = function () { return fn.apply(elem, arguments); ; elem.attachevent("on" + type, bound); return bound; ; this.removeevent = function (elem, type, fn) { elem.detachevent("on" + type, fn); ; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 5

6 /* Probar el controlador de eventos compatible */ addevent(window, "load", function () { var elems = document.getelementsbytagname("div"); for (var i = 0; i < elems.length; i++) (function (elem) { var handler = addevent(elem, "click", function () { this.style.backgroundcolor = this.style.backgroundcolor==''? 'green' : ''; removeevent(elem, "click", handler); ); )(elems[i]); //Fin del for() ); Módulos, interfaces y tipos de eventos El DOM Nivel 2 está organizado en una serie de módulos, de modo que proporciona una estructura básica para el control de los eventos. La admisión de determinados tipos de eventos se manifiesta en submódulos, proporcionando cada uno de ellos compatibilidad con una categoría de tipos de eventos relacionados y define un tipo de evento que se pasa a los controladores de eventos. En la siguiente tabla se muestra una lista de módulos, interfaces y tipos de eventos admitidos por cada módulo: Módulo Interfaz Tipos de eventos HTMLEvents Event abort, blur, change, error, focus, load, reset, resize, scroll, select, submit, unload. MouseEvents MouseEvent click, mousedown, mousemove, mouseout, mouseover, mouseup UIEvents UIEvent DOMActivate, DOMFocusIn, DOMFocusOut Gestión del objeto Event El objeto Event es un objeto que crea automáticamente el navegador cuando ocurren eventos del teclado y del ratón. El objeto es pasado también de forma automática a controlador del evento definido como una función u objeto que lo gestiona. El manejo de este objeto es incompatible entre los navegadores, sobre todo en el Internet Explorer 8.0 e inferiores. De modo que el tratamiento de este objeto debe hacerse de formas particulares para obtener la máxima compatibilidad y portabilidad. El objeto Event contiene una serie de propiedades que son de utilidad para realizar acciones cuando se producen eventos del ratón o del teclado. Estos eventos son los de mayor relevancia cuando se produce la interacción del usuario con los elementos de la página web. Ejemplo de manejo del objeto Event en un evento onclick function eventoclick(ev) { var texto = "Evento onclick en el navegador " + navigator.appname + "\n"; //Si existe el objeto event lo utiliza, en caso contrario, //usa un objeto event pasado por parámetro if(window.event){ texto += "Usa el objeto event\n"; for(i in event){ texto += i + " = " + ev[i] + "\n"; else { texto += "Usa objeto ev pasado por parámetro\n"; for(i in ev){ texto += i + " = " + ev[i] + "\n"; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 6

7 alert(texto); document.onclick = eventoclick; Eventos del ratón y del teclado En navegadores Firefox, Chrome, Safari, Opera y las nuevas versiones de Internet Explorer a partir de la 9.0 se utilizan las propiedades pagex y pagey para seguir la posición del ratón. En Internet Explorer 8.0 y anteriores se utilizan las propiedades offsetx y offsety. Los valores de coordenadas son relativas a la propia ventana por lo que son relativas a la esquina superior izquierda del elemento BODY. document.onmouseover = obtenerposraton; var px = 0; var py = 0; function obtenerposraton(e){ if(document.all){ //Detecta que el navegador es Internet Explorer 8.0 y ant. px = event.offsetx; py = event.offsety; else { //Para el resto de navegadores px = e.pagex; py = e.pagey; //Actualizar barra de título y de estado de la ventana document.title = "Coordenadas del ratón (x:" + px + ", y:" + py + ")"; window.status = "Coordenadas del ratón (x:" + px + ", y:" + py + ")"; Además del ratón (mouse), el otro dispositivo de entrada, más importante, es el teclado. JavaScript proporciona formas de manipular eventos del teclado. Lastimosamente, los eventos y los controladores de eventos para el teclado son más incompatibles que el resto de eventos vistos anteriormente. A pesar de esta dificultad, es posible escribir secuencias de comando que funcionen correctamente para los navegadores más utilizados. Los eventos de teclado keydown, keypress y keyup se corresponden con los controladores de los eventos onkeydown, onkeypress y onkeyup. Una pulsación normal de tecla por parte del usuario genera tres eventos, que son, en orden: keydown, cuando se comienza a presionar la tecla, keypress, cuando se mantiene presionada la tecla, y keyup, cuando se está soltando la tecla. III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #9: Control de eventos con JavaScript 1 2 Computadora con editor HTML instalado y navegadores 1 3 Memoria USB. 1 Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 7

8 IV. PROCEDIMIENTO Ejercicio #1: En el siguiente ejemplo se muestra cómo se puede crear un manejador de eventos portable para navegadores modernos que siguen el modelo estándar del DOM Nivel 2 y los que siguen el modelo heredado de las versiones de Internet Explorer anteriores a la 9.0. Además de asignar manejadores de eventos, también se desvinculan manejadores de eventos una vez que se ha producido el evento. Guión 1: eventos.html <!DOCTYPE html> <html lang="es"> <head> <title>vincular y desvincular controladores de eventos</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/events.css" /> <script src="js/eventhandler.js"></script> </head> <body> <section> <article> <form name="frmestilos"> <select name="selestilos"> <option value="first">primero</option> <option value="second">segundo</option> </select> </form> </article> </section> <div title="hazme clic"> <h3> Qué es LocalStorage?</h3> <p> Se trata de un espacio de almacenamiento local que solventa varias de las desventajas que tiene el uso de <em>cookies</em>, como el espacio no tan limitado, el hecho de evitar enviar la información en cada petición al servidor y la no caducidad de esa misma información. </p> <p> En teoría, LocalStorage nos permite guardar hasta 5 MB del lado del cliente por dominio. La ventaja de esto es que sobrepasa con mucho el límite de almacenamiento con cookies que era de 100 KB. Además, del hecho que con este nuevo límite es posible guardar casi cualquier tipo de información, desde texto hasta multimedia, en tanto no sobrepase los 5 MB. </p> </div> <div title="pero sólo una vez"> <h3> Qué es SessionStorage?</h3> <p> SessionStorage es un atributo del DOM (Document Object Model) que se utiliza como objeto global de JavaScript que dispone de métodos que permiten manipular los datos que se quieren utilizar. </p> <p> Las sesiones se inician o se crean cuando el navegador solicita información al servidor cada vez que se abre una página web. Las sesiones guardan datos que serán accesibles únicamente al navegador con el que se inició la conexión. Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 8

9 </p> </div> </body> </html> Guión 2: eventhandler.js /******************************************************************** * eventhandler.js: Archivo que permite gestionar eventos de forma * * portable en varios navegadores. Para los * * que siguen el modelo estandar del DOM y los que * * siguen el modelo de Internet * * Explorer en versiones menores a la 9.0 * ********************************************************************/ if (document.addeventlistener) { this.addevent = function (elem, type, fn) { elem.addeventlistener(type, fn, false); return fn; ; this.removeevent = function (elem, type, fn) { elem.removeeventlistener(type, fn, false); ; else if (document.attachevent) { this.addevent = function (elem, type, fn) { var bound = function () { return fn.apply(elem, arguments); ; elem.attachevent("on" + type, bound); return bound; ; this.removeevent = function (elem, type, fn) { elem.detachevent("on" + type, fn); ; /* Probando el manejador de eventos portable */ addevent(window, "load", function () { var elems = document.getelementsbytagname("div"); for (var i=0; i < elems.length; i++) (function (elem) { var handler = addevent(elem, "click", function () { this.classname = document.frmestilos.selestilos.options[document.frmestilos.selestilos.selectedindex].value ; //removeevent(elem, "click", handler); ); )(elems[i]); ); Guión 3: events.css * { margin: 0; padding: 0; html, body { height: 100%; body { font-size: 16px; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 9

10 .first { background: rgba(231,56,39,1); background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 0%, rgba(246,41,12,1) 0%, rgba(255,93,64,1) 0%, rgba(241,111,92,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(0%, rgba(240,47,23,1)), color-stop(0%, rgba(246,41,12,1)), color-stop(0%, rgba(255,93,64,1)), color-stop(100%, rgba(241,111,92,1))); background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 0%, rgba(246,41,12,1) 0%, rgba(255,93,64,1) 0%, rgba(241,111,92,1) 100%); background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 0%, rgba(246,41,12,1) 0%, rgba(255,93,64,1) 0%, rgba(241,111,92,1) 100%); background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 0%, rgba(246,41,12,1) 0%, rgba(255,93,64,1) 0%, rgba(241,111,92,1) 100%); background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 0%, rgba(246,41,12,1) 0%, rgba(255,93,64,1) 0%, rgba(241,111,92,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#e73827', endcolorstr='#f16f5c', GradientType=0 ); -moz-border-radius: 16px; -webkit-border-radius: 16px; -o-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; border: 5px ridge rgba(70,50,25,0.75); margin: 24px auto; padding: 16px 20px; width: 36%; z-index: 10;.second { background: rgba(235,233,249,1); background: -moz-linear-gradient(top, rgba(235,233,249,1)), color-stop(0%, rgba(216,208,239,1)), color-stop(51%, rgba(206,199,236,1)), color-stop(100%, rgba(193,191,234,1))); background: -webkit-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 0%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%); background: -o-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 0%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%); background: -ms-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 0%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%); background: linear-gradient(to bottom, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 0%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ebe9f9', endcolorstr='#c1bfea', GradientType=0 ); -moz-border-radius: 20px; -webkit-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; border: 4px groove rgba(75,0,130,0.8); -webkit-box-shadow: 0 5px 8px rgba(0,0,0,0.5); -moz-box-shadow: 0 5px 8px rgba(0,0,0,0.5); box-shadow: 0 5px 8px rgba(0,0,0,0.5); margin: 20px auto; padding: 12px 16px; position: relative; width: 32%; z-index: 1;.first h3 { color: rgb(255,235,205); Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 10

11 font: Bold 2em "DroidSans-Bold",sans-serif; text-align: center; text-shadow: 0px 0px 0 rgb(212,212,212), 1px 1px 0 rgb(184,184,184), 2px 2px 0 rgb(156,156,156), 3px 3px 0 rgb(128,128,128), 4px 4px 0 rgb(100,100,100), 5px 5px 4px rgba(0,0,0,0.45), 5px 5px 1px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,.2);.first p { color: rgb(255,220,185); font: Normal 0.9em "DroidSans",sans-serif; text-shadow: 0px -2px 0px #333, 0px 2px 3px #666;.second h3 { color: rgb(50,80,80); font: 2.5em "DroidSans-Bold"; letter-spacing: -5px; text-align: center; text-shadow: 0px 3px 8px #2a2a2a;.second p { color: rgb(70,0,120); font: Normal 0.9em "DroidSans",sans-serif; text-align: justify; text-shadow: 0px 2px 3px #555; Guión 4: fonts.css /* Webfont: DroidSans { font-family: 'DroidSans'; src: url('../fonts/droid/droidsans.eot'); /* IE9 Compat Modes */ src: url('../fonts/droid/droidsans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/droid/droidsans.woff') format('woff'), /* Modern Browsers */ url('../fonts/droid/droidsans.ttf') format('truetype'), url('../fonts/droid/droidsans.svg#droidsans') format('svg'); ; font-style: normal; font-weight: normal; text-rendering: optimizelegibility; /* Webfont: DroidSans-Bold { font-family: 'DroidSans-Bold'; src: url('../fonts/droid/droidsans-bold.eot'); /* IE9 Compat Modes */ src: url('../fonts/droid/droidsans-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/droid/droidsans-bold.woff') format('woff'), /* Modern Browsers */ url('../fonts/droid/droidsans-bold.ttf') format('truetype'), url('../fonts/droid/droidsans-bold.svg#droidsans-bold') format('svg'); ; font-style: normal; font-weight: normal; text-rendering: optimizelegibility; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 11

12 Resultado: Ejercicio #2: El siguiente ejemplo muestra cómo crear un visor de imágenes que permite ir pasando fotos con eventos de presión de teclas específicas del teclado. Una para avanzar y otra para retroceder. El código es portable con la mayor parte de navegadores modernos. Guión 1: imagesshow.html <!DOCTYPE html> <html lang="es"> <head> <title>visor de imágenes</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/imagesshow.css" /> <script src="js/eventosteclas.js"></script> </head> <body> <section> <article> <div id="imgwrapper"> <img src="img/leon.jpg" id="mypicture" name="mypicture" alt="visor de imágenes" /> <p> Pulse tecla [<-] para retroceder,<br /> Pulse tecla [->] para avanzar. </p> </div> </article> </section> </body> </html> Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 12

13 Guión 2: eventosteclas.js document.onkeydown = keyhit; var thispic = 0; function keyhit(evt){ var mypix = new Array( "img/leon.jpg", "img/tigre.jpg", "img/puma.jpg", "img/leopardo.jpg", "img/lince.jpg" ); var imgct = mypix.length - 1; //37 y 39 son los códigos de las teclas que representan //la presión de las teclas de cursor izquierda y derecha //respectivamente var ltarrow = 37; var rtarrow = 39; //Manejo del objeto para controlar los eventos del teclado //de forma uniforme sin importar el navegador var thiskey = (evt)? evt.which : window.event.keycode; if(thiskey == ltarrow){ chgslide(-1); else if(thiskey == rtarrow){ chgslide(1); return false; function chgslide(direction){ thispic = thispic + direction; if(thispic > imgct){ thispic = 0; if(thispic < 0){ thispic = imgct; document.getelementbyid("mypicture").src = mypix[thispic]; Guión 3: imagesshow.css #imgwrapper { /* Old browsers */ background: #ffffbc; /* FF3.6+ */ background: -moz-linear-gradient(-45deg, #ffffbc 0%, #f9fccf 100%); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffbc), color-stop(100%,#f9fccf)); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(-45deg, #ffffbc 0%,#f9fccf 100%); /* Opera */ background: -o-linear-gradient(-45deg, #ffffbc 0%,#f9fccf 100%); /* IE10+ */ background: -ms-linear-gradient(-45deg, #ffffbc 0%,#f9fccf 100%); /* W3C */ background: linear-gradient(135deg, #ffffbc 0%,#f9fccf 100%); /* IE6-9 fallback on horizontal gradient */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffbc', endcolorstr='#f9fccf',gradienttype=1 ); Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 13

14 border-radius: 25px; border: 6px ridge rgba(30,125,200,0.75); height: auto; margin: 26px auto; padding: 16px 18px; width: 18%; #imgwrapper p { color: #1E4496; font: Normal 1em/1 'Cantarell-Regular',Arial,Helvetica,"Liberation Sans"; text-shadow: 3px 3px 2px #297CA6; img { -moz-box-shadow: 2.5px 2.5px 0.5px 0 rgba(125,127,125,0.8); -webkit-box-shadow: 2.5px 2.5px 0.5px 0 rgba(125,127,125,0.8); -o-box-shadow: 2.5px 2.5px 0.5px 0 rgba(125,127,125,0.8); -ms-box-shadow: 2.5px 2.5px 0.5px 0 rgba(125,127,125,0.8); box-shadow: 2.5px 2.5px 0.5px 0 rgba(125,127,125,0.8); display: block; height: 122px; width: 130px; margin: 0 auto; Guión 4: { font-family: 'Cantarell-Regular'; src: url('../fonts/cantarell-regular.otf'); src: url('../fonts/cantarell-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/cantarell-regular.woff') format('woff'), url('../fonts/cantarell-regular.ttf') format('truetype'), url('../fonts/cantarell-regular.svg#cantarell-regular') format('svg'); font-weight: normal; font-style: normal; Resultado: Ejercicio #3: El siguiente ejemplo muestra la creación de un atractivo visor de imágenes en donde se puede avanzar por las imágenes presionando botones de avanzar y retroceder, así como ir directamente a una imagen, presionando un enlace directo a la imagen que se necesite ver. Así como un enlace para ir de nuevo a la imagen inicial. Guión 1: visorimagenes.html <!DOCTYPE html> <html lang="es"> <head> <title>visor de imágenes con JavaScript</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/links.css" /> <link rel="stylesheet" href="css/button.css" /> <link rel="stylesheet" href="css/common.css" /> <script src="js/imgviewer.js"></script> Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 14

15 <script src="js/modernizr.custom.js"></script> </head> <body> <header> <h1>visor de imágenes</h1> </header> <table border="0" cellpadding="0" width="90%" align="center"> <tr> <td width="80%" align="center"> <img src="img/house0.jpg" width="300" height="240" name="photoslider" id="photoslider" /> </td> </tr> <tr> <td width="80%"> <form method="post" name="rotater"> <div align="center"> <input type="button" value="<<atrás" name="b2" id="b2" class="button blue"> <input type="button" value="adelante>>" name="b1" id="b1" class="button blue"><br /> <script type="text/javascript"> document.rotater.b2.onclick = backward; document.rotater.b1.onclick = forward; </script> <article class="color-1"> <nav id="cl-effect-20 a" class="cl-effect-20 a"> <a href="javascript:void(0);" id="linkbegin"> <span data-hover="comenzar de nuevo">comenzar de nuevo</span> </a> </nav> </article> </div> </form> </td> </tr> </table> <section> <article class="color-5"> <h4>imágenes</h4> <nav id="cl-effect-19 a" class="cl-effect-19 a"> <a href="img/house0.jpg" name="house1" id="house1"> <span data-hover="house0.jpg">house0.jpg</span> </a> <a href="img/house1.jpg" name="house2" id="house2"> <span data-hover="house1.jpg">house1.jpg</span> </a> <a href="img/house2.jpg" name="house3" id="house3"> <span data-hover="house2.jpg">house2.jpg</span> </a> <a href="img/house4.jpg" name="house4" id="house4"> <span data-hover="house4.jpg">house4.jpg</span> </a> </nav> </article> </section> <script language="javascript" type="text/javascript"> document.links['house1'].onclick = new Function("document.images['photoslider'].src=photos[0]; document.links['house1'].href='javascript:void(0)'; return false"); document.links['house2'].onclick = new Function("document.images['photoslider'].src=photos[1]; document.links['house2'].href='javascript:void(0)'; return false"); document.links['house3'].onclick = new Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 15

16 Function("document.images['photoslider'].src=photos[2]; document.links['house3'].href='javascript:void(0)'; return false"); document.links['house4'].onclick = new Function("document.images['photoslider'].src=photos[3]; document.links['house4'].href='javascript:void(0)'; return false"); </script> </body> </html> Guión 2: imgviewer.js var photos = new Array(); var which = 0; /* Las siguientes imágenes pueden ser cambiadas para que se muestren las imágenes que deseas. Pueden agregarse más imágenes, todas las que desees, sólo tienen que agregarse más elementos de arreglo para almacenarlas. */ photos[0] = "img/house0.jpg"; photos[1] = "img/house1.jpg"; photos[2] = "img/house2.jpg"; photos[3] = "img/house4.jpg"; function init(){ var lnkbegin = document.getelementbyid("linkbegin"); if(lnkbegin.addeventlistener){ lnkbegin.addeventlistener("click", function(){ which=1; backward(); return false;, false); else if(lnkbegin.attachevent){ lnkbegin.attachevent("click", function(){ which=1; backward(); return false; ); function backward(){ if(which>0){ window.status=''; which--; if(document.rotater.b1.disabled){ document.rotater.b1.disabled = false; document.rotater.b1.classname = "button blue"; document.images.photoslider.src=photos[which]; else{ document.rotater.b2.disabled = true; document.rotater.b2.classname = "button bluedisabled"; window.status = 'Principio de la galería'; function forward(){ if(which<photos.length-1){ which++; document.rotater.b2.disabled = false; document.rotater.b2.classname = "button blue"; document.images.photoslider.src=photos[which]; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 16

17 else{ document.rotater.b1.disabled = true; document.rotater.b1.classname = "button bluedisabled"; window.status='final de la galería'; if(window.addeventlistener){ window.addeventlistener("load", init, false); else if(window.attachevent){ window.attachevent("load", init); Guión 3: common.css * { margin: 0; padding: 0; html, body { height: 100%; header h1 { -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: #21b4e2; font: Bold 3.2em "LeagueGothic-Regular",sans-serif; letter-spacing: 1.25px; text-align:center; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px; Guión 4: links.css *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; body { background: rgba(49,48,51,1); background: -moz-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%, rgba(43,41,39,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(49,48,51,1)), color-stop(50%, rgba(75,70,77,1)), color-stop(100%, rgba(43,41,39,1))); background: -webkit-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%, rgba(43,41,39,1) 100%); background: -o-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%, rgba(43,41,39,1) 100%); background: -ms-linear-gradient(left, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%, rgba(43,41,39,1) 100%); background: linear-gradient(to right, rgba(49,48,51,1) 0%, rgba(75,70,77,1) 50%, rgba(43,41,39,1) 100%); Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 17

18 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#313033', endcolorstr='#2b2927', GradientType=1 ); font-family: 'Raleway', sans-serif; nav a { position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; nav a:hover, nav a:focus { outline: none;.color-5 { text-align: center;.color-5 h4 { text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8); color: #333; margin: 0; -moz-opacity: 0.4; -webkit-opacity: 0.4; -o-opacity: 0.4; opacity: 0.4; font: Bold 2em 'Bitter'; /* Effect 19: 3D side */.cl-effect-19 a { line-height: 1.5em; margin: 10px; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; text-align: center; vertical-align: middle; width: 210px;.cl-effect-19 a span { background: #e35041; display: inline-block; position: relative; height: 88px; padding: 0 14px; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; -o-transition: transform 0.4s, background 0.4s; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 18

19 -ms-transition: transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -100px; -moz-transform-origin: 50% 50% -100px; -o-transform-origin: 50% 50% -100px; -ms-transform-origin: 50% 50% -100px; transform-origin: 50% 50% -100px; width: 100%;.csstransforms3d.cl-effect-19 a span::before { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #b53a2d; content: attr(data-hover); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; -o-transition: background 0.4s; -ms-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotatey(90deg); -moz-transform: rotatey(90deg); -o-transform: rotatey(90deg); -ms-transform: rotatey(90deg); transform: rotatey(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; pointer-events: none;.cl-effect-19 a:hover span,.cl-effect-19 a:focus span { background: #b53a2d; -webkit-transform: rotatey(-90deg); -moz-transform: rotatey(-90deg); -o-transform: rotatey(-90deg); -ms-transform: rotatey(-90deg); transform: rotatey(-90deg);.csstransforms3d.cl-effect-19 a:hover span::before,.csstransforms3d.cl-effect-19 a:focus span::before { background: #ef5e50; /* Effect 20: 3D side */.cl-effect-20 a { line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 19

20 perspective: 800px;.cl-effect-20 a span { position: relative; display: inline-block; padding: 3px 15px 0; background: #587285; box-shadow: inset 0 3px #2f4351; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; -o-transition: background 0.6s; -ms-transition: background 0.6s; transition: background 0.6s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%;.cl-effect-20 a span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #2f4351; content: attr(data-hover); -webkit-transform: rotatex(270deg); -moz-transform: rotatex(270deg); -o-transform: rotatex(270deg); -ms-transform: rotatex(270deg); transform: rotatex(270deg); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: transform 0.6s; -ms-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none;.cl-effect-20 a:hover span,.cl-effect-20 a:focus span { background: #2f4351; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 20

21 .cl-effect-20 a:hover span::before,.cl-effect-20 a:focus span::before { -webkit-transform: rotatex(10deg); -moz-transform: rotatex(10deg); -o-transform: rotatex(10deg); -ms-transform: rotatex(10deg); transform: rotatex(10deg); Guión 5: button.css /* Estilos para botones de envã-o o restablecimiento */ /* botton blue */.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: Bold 14px/100% Arial, Helvetica, sans-serif; padding:.6em 2em.65em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius:.5em; -moz-border-radius:.5em; border-radius:.5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2);.button:hover { text-decoration: none;.button:active { position: relative; top: 1px;.blue { color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#00adee', endcolorstr='#0078a5');.blue:hover { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#0095cc', endcolorstr='#00678e'); Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 21

22 .blue:active { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#0078a5', endcolorstr='#00adee'); /* Para estilo de botón deshabilitado */.bluedisabled { /* Old browsers */ background: #7d7e7d; /* FF3.6+ */ background: -moz-linear-gradient(-45deg, #7d7e7d 0%, # %); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#424242)); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,# %); /* Opera */ background: -o-linear-gradient(-45deg, #7d7e7d 0%,# %); /* IE10+ */ background: -ms-linear-gradient(-45deg, #7d7e7d 0%,# %); /* W3C */ background: linear-gradient(135deg, #7d7e7d 0%,# %); /* IE6-9 fallback on horizontal gradient */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#7d7e7d', endcolorstr='#424242',gradienttype=1 ); color: #d9d6d9; Guión 6: url( { font-family: 'LeagueGothic-Regular'; src: url('../fonts/leaguegothic-regular.otf'); src: url('../fonts/leaguegothic-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/leaguegothic-regular.woff') format('woff'), url('../fonts/leaguegothic-regular.ttf') format('truetype'), url('../fonts/leaguegothic-regular.svg#leaguegothic-regular') format('svg'); font-weight: normal; font-style: normal; text-rendering: { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embeddedopentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 22

23 Resultado: Ejemplo #4: El siguiente ejemplo muestra cómo crear un área de texto editable en un formulario controlada con eventos del teclado, mediante la pulsación combinada de las teclas CTRL+E para editar y CTRL+S para guardar el texto ingresado en un elemento div. Al inicio se muestra este elemento div y al pulsar las teclas CTRL+E se oculta y se cambia por el área de texto. Por otro lado, al presionar CTRL+S se oculta el área de texto y se vuelve a mostrar el elemento div con el texto ingresado. Guión 1: comentarios.html <!DOCTYPE html> <html lang="es"> <head> <title>área de texto editable</title> <meta charset="utf-8" /> <link rel="stylesheet" media="screen" href="css/fonts.css" /> <link rel="stylesheet" media="screen" href="css/formstyle.css" /> <script src="js/modernizr.custom.js"></script> <script src="js/keydown.js"></script> </head> <body> <header> <h1 align="center">área de edición de texto</h1> </header> <section> <article> <div id="wrap"> <h1>déjanos tus comentarios</h1> <div id='form_wrap'> <form id="contact-form" action="javascript:alert(' Comentario enviado!');"> <p id="formstatus"></p> <p> Instrucciones: CTRL+E para Editar y CTRL+S para Guardar, ESC para Cancelar. </p> <label for=" ">tu mensaje: </label> <div id="view"></div> <textarea name="message" id="area" value="tu mensaje" id="message" ></textarea> <label for="name">nombre: </label> <input type="text" name="name" value="" id="name" /> <label for=" ">correo electrónico: </label> <input type="text" name=" " value="" id=" " /> Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 23

24 <input type="submit" name ="submit" value="enviar" /> </form> </div> </div> <div id="fact"> </div> </article> </section> </body> </html> Guión 2: keydown.js window.onload = init; function init() { var view = document.getelementbyid('view'); var area = document.getelementbyid('area'); view.onclick = edit; document.onkeydown = function(e) { e = e event; // Escape if(e.keycode == 27) { cancel(); return false; if ((e.ctrlkey && e.keycode == 'E'.charCodeAt(0)) &&!area.offsetheight) { edit(); return false; if((e.ctrlkey && e.keycode == 'S'.charCodeAt(0)) && area.offsetheight) { save(); return false; function edit() { //Ocultar el elemento div view.style.display = 'none'; //Dibujar el campo textarea y ponerle estilos area.value = view.innerhtml; area.style.display = 'block'; area.style.height = '80px'; area.style.padding = '6px'; area.style.width = '444px'; area.focus(); function save() { area.style.display = 'none'; view.innerhtml = area.value; view.style.display = 'block'; view.style.letterspacing = '1.2px'; function cancel() { area.style.display = 'none'; view.style.display = 'block'; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 24

25 Guión 3: url( * { margin: 0; padding: 0; border: 0; outline: none; body { background: #ccc url('../images/bg_out.png'); color: #7c7873; font-family: 'YanoneKaffeesatzRegular',Arial,Helvetica,"Liberation Sans"; font-size: 15px; font-style: normal; font-weight: 300; #wrap { height:500px; margin:16px auto; width:500px; #wrap h1 { font-family:'lato',arial,helvetica,"liberation Sans"; font-size:3em; height: auto; margin-bottom:-150px; text-align:center; text-shadow:0 1px 0 #ede8d9; #wrap p { text-shadow:0 1px 0 #fff; font-size:1.2em; #form_wrap.hide:after, #form_wrap.hide:before { display:none; form { background:#f7f2ec url('../images/letter_bg.png'); position:relative; top:174px; overflow:hidden; height:200px; margin:0 auto; padding:20px; border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; width:460px; #form_wrap form { height:400px; Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente 25