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/2014 Nombre de la Practica: Lugar de Ejecución: Tiempo Estimado: MATERIA: DOCENTES: GUIA DE LABORATORIO #5 Objetos en JavaScript Centro de cómputo 2 horas con 30 minutos Lenguajes Interpretados en el Cliente Ing. Ricardo Ernesto Elías Guandique I. OBJETIVOS Que el estudiante: Tenga claras todas las características de la Programación Orientada a Objetos con JavaScript. Utilice los diversos tipos de objetos incorporados con que cuenta el lenguaje JavaScript. Se familiarice con los objetos del navegador más utilizados en los scripts. II. INTRODUCCION TEORICA Programación Orientada a Objetos en JavaScript La Programación Orientada a Objetos está basada en el concepto de dos entidades distintas, que son: las clases y las instancias. Una clase define las propiedades y métodos, a veces denominados simplemente miembros, que caracterizan a un cierto grupo de objetos. Una clase es una abstracción de ciertos objetos que existen en la realidad e intenta ser un modelo o plano de los objetos que representa, definiendo únicamente las características y el comportamiento que debe tener dicho objeto. La instancia es un objeto concreto creado a partir de las propiedades y métodos definidos en la clase, a veces se prefiere decir que la instancia es un ejemplar concreto del tipo de objeto definido en la clase a partir de la cual se ha creado el objeto. Por ejemplo, Victoria Escobar es una instancia o un ejemplar concreto de la clase empleado, representando a una persona en particular que es o tiene las características y comportamiento de un empleado. Los lenguajes basados en clases, como Java, C++ o C#, exigen que se deba definir primero una clase y a continuación realizar instancias de esta clase para crear un objeto en particular. JavaScript, es más bien un lenguaje basado en prototipos que no requiere hacer esta distinción, simplemente es un lenguaje que tiene objetos predefinidos, a los que se conoce como prototipos y que son, en la práctica, plantillas a partir de las cuales se obtienen propiedades y métodos para los nuevos objetos que se crean. Sin embargo, cada nuevo objeto puede especificar sus propias propiedades y métodos, tanto al ser creado o en tiempo de ejecución. Diferencias entre lenguajes basados en clase en comparación con los basados en prototipos La siguiente tabla resume las diferencias entre los lenguajes basados en clases, como Java o C#, y los basados en prototipos como JavaScript. Basado en Clases (Java) Clase e instancia son entidades distintas. Define una clase con la definción de clase; instancia una clase con los métodos constructores. Crea un único objeto con el operador new. Basado en Prototipos (JavaScript) Todos los objetos son instancias. Define y crea un conjunto de objetos con las funciones constructoras. Igualmente. 1 / 58

2 Construye una jerarquía de objetos utilizando las definiciones de clases par definir subclases de una clase existente. Hereda las propiedades mediante el seguimiento de la cadena de clases. La definción de Clases especifica todas las propiedades de todas las intancias de una clase. No puede añadir propiedades dinámicamente en tiempo de ejecución. Construye una jerarquía de objetos mediante la asignación de un objeto como prototipo asociado con la función constructora. Hereda las propiedades mediante el seguimento de la cadena de prototipos. La función constructora o prototipo puede especificar un conjunto inicial de propiedades. Puede añadir o remover dinámicamente a objetos individuales o a un conjunto entero de objetos. Definición de objeto Los objetos en JavaScript son tipos de datos compuestos, tal y como las matrices o arreglos, que dentro del lenguaje JavaScript son, más bien, objetos. Se dice que son compuestos porque combinan estado (propiedades que almacenan datos) y comportamiento (procedimientos o métodos para operar los datos). Un objeto viene siendo una representación concreta, particular y real de algo. Esta representación determina su identidad, su estado y su comportamiento. Clasificación de objetos en JavaScript Los objetos en JavaScript se pueden subdividir en cuatro grupos: Objetos definidos por el usuario. Son objetos completamente personalizables que puede crear el desarrollador para dar estructura y coherencia a una tarea de programación en particular. Con estos objetos es posible definir propiedades y métodos mediante una sintaxis específica de JavaScript. Las propiedades identifican las características propias del objeto, mientras que los métodos permiten realizar tareas u operaciones con dichas propiedades. Objetos incorporados del lenguaje. Son objetos proporcionados por el propio lenguaje JavaScript, entre los que se incluyen: (1) objetos asociados a tipos de datos primitivos, como los objetos String, Number y Boolean, (2) objetos que permiten la creación de objetos definidos por el usuario, como los objetos Object y Form, (3) objetos utilizados para simplificar tareas frecuentes, como los objetos Date, Math y RegExp. Objetos de navegador. Son objetos que no están especificados como parte del lenguaje JavaScript, pero que son soportados por la mayor parte de navegadores que cumplen con los estándares. Los dos objetos más utilizados que pertenecen a esta categoría son los objetos window y Navigator. El primero permite el control de la ventana del navegador y, el segundo, proporciona información acerca de la configuración del navegador del usuario. Objetos de documento. Son los objetos que forman parte del Modelo de Objetos de Documento (Document Object Model, abreviado como DOM) definido por la W3C. Es a través de estos objetos que JavaScript puede manejar Hojas de Estilo en Cascada y la ejecución de HTML dinámico. El acceso a los objetos de documento es proporcionado por el navegador mediante el uso del objeto document del objeto window. Creación de objetos en JavaScript Existen dos formas de crear objetos en JavaScript: 1. Utilizando la palabra clave new y el nombre del constructor del objeto a crear. Se pueden crear objetos especializados haciendo uso del operador new y a continuación invocar al método constructor del objeto que inicializa las propiedades del objeto. Ejemplo: var carro = new Object(); carro.marca = "Toyota"; carro.modelo = "Corolla"; carro.npasajeros = 5; carro.annio = 2007; carro.placa = " "; carro.nchasis = "JDSXV39Z "; carro.encender = function(numero){ carro.nchasis == numero? start = "on" : start = "off"; Lenguajes Interpretados en el Cliente 2

3 return start; carro.apagar = function(){ start = off; 2. Utilizando sintaxis de literales de objeto. Esta es la forma más fácil de crear objetos en JavaScript, que consiste de una lista de pares nombre_propiedad : valor separados por comas y encerrados entre llaves. Ejemplo: var coord = {x : 0, y : 0; var circle = {x : coord.x, y : coord.y, r : 2.5; Esta forma de construir objetos en JavaScript es generalizable a todos los tipos de datos del lenguaje. Veamos esto demostrado con dos tipos de objetos como String y Array. Utilizando la palabra clave new y el respectivo método constructor: var nombre = new String(); var paises = new Array("El Salvador","Guatemala","Honduras"); Utilizando sintaxis declarativa conocida como sintaxis de literales de tipos de datos: var nombre = ""; var paises = ["El Salvador","Guatemala","Honduras"]; Objetos del lenguaje Estos son el conjunto de objetos que vienen incorporados por el lenguaje. Entre los principales tenemos los objetos Array, Function, Date, String, Math, Boolean, Number. 1. Objeto Array Este objeto se abordó en guías pasadas, por lo que trataremos únicamente su declaración, propiedades y métodos. La forma de declarar un objeto Array es haciendo uso del constructor Array(). Si se pasan argumentos al constructor, se interpreta que estos serán los elementos del arreglo. La excepción se da cuando se le pasa al constructor un solo valor numérico, en cuyo caso se entiende que se le proporciona al arreglo un tamaño, que podremos acceder mediante la propiedad length. Los siguientes son ejemplos de declaración de objetos Array: //Crea un arreglo vacío (sin elementos definidos) y crea una referencia //a él en la variable arreglo1 var arreglo1 = new Array(); //Crea un arreglo con tres elementos var arreglo2 = new Array("rojo", "verde", "azul"); //Crea un arreglo cuya propiedad length tiene el valor de 5 var arreglo3 = new Array(5); Propiedades del objeto Array length Como su nombre indica esta propiedad nos devuelve la longitud del array, es decir, el número de elementos que puede almacenar. Su uso es muy simple: var lista = new Array(50); tamagno = lista.length; /*tamagno almacenaría el valor 50 */ prototype Esta es una propiedad muy potente en el sentido que nos permite agregar al objeto Array las propiedades y métodos que queramos. Array.protoype.descriptor = null; Lenguajes Interpretados en el Cliente 3

4 dias = new Array ('lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'); dias.descriptor = "Dias laborables de la semana"; En este ejemplo hemos creado una nueva propiedad para el objeto Array, la propiedad descriptor que podría utilizarse para darle un título a la matriz. Métodos del objeto Array Para ver estos métodos consulte la guía sobre arreglos realizada recientemente. Entre dichos métodos se encuentran: concat(), join(), reverse(), sort(), pop(), push(), etc. 2. Objeto Function Las funciones también son consideradas como objetos por JavaScript. Aunque normalmente no estamos acostumbrados a definirlas de esta forma, JavaScript proporciona una forma de definir funciones en donde explícitamente se declaran como objetos. Para ello se utiliza el operador new y el constructor Function, tal y como se muestra a continuación: sumar = new Function( a, b, return a + b ); La llamada a la function se realize de la misma forma que conocemos. Puede ver el siguiente ejemplo de llamada: document.write(sumar(90, 100)); Métodos de Function Los métodos de Function son todos los heredados del objeto Object, que veremos más adelante. Propiedades del objeto Function Básicamente se tienen tres propiedades que se pueden usar con el objeto Function y son: arguments Se trata de un array que contiene los argumentos pasados a la función. Esta propiedad permite el uso de funciones con un número variable de argumentos. caller Contiene una referencia a la función que llamó a la actual. constructor Heredada de la clase Object. 3. Objeto String El objeto String se usa para manipular cadenas de caracteres. En JavaScript todo texto encerrado entre comillas, dobles o simples, se interpreta como una cadena, así '45' no es el número cuarenta y cinco sino la cadena formada por los caracteres 4 y 5. Este objeto contiene una gran cantidad de métodos para el manejo y el análisis de cadenas, la extracción de subcadenas e incluso para la conversión de cadenas a texto de marcado HTML. Como en los anteriores objetos se utiliza el operador new y el constructor String(), como se muestra a continuación: var cadena = new String(); También se puede pasar un argumentos al constructor, que será su valor inicial, como se muestra en este otro ejemplo: var cadena = new String( No me importa. ); Propiedades del objeto String length Valor numérico que nos indica la longitud en caracteres de la cadena dada. prototype Lenguajes Interpretados en el Cliente 4

5 Nos permite asignar nuevas propiedades al objeto String. Métodos del objeto String anchor(name) Crea un enlace (o ancla) a partir de un objeto String con el atributo name igual a la cadena que se le pasa como argumento al método. Vea el siguiente ejemplo: var refer "referencia1"; var ancla1 = refer.anchor("anclaje1"); Después de ejecutadas las instrucciones anteriores el valor de ancla será: <a name= anclaje1 >referencia1</a> La sintaxis de este método permite usar una constante String en lugar del nombre de un objeto String. El ejemplo anterior podría haber escrito como: var ancla = "referencia1".anchor("anclaje1"); charat(position) Este método aplicado a una cadena devuelve el carácter que se encuentra en la posición dada por el atributo position teniendo en cuenta que el índice del primer carácter a la izquierda de la cadena es 0 y el último es una unidad menor que longitud de la cadena. Si el valor del atributo no es válido (igual o mayor que la longitud de la cadena o negativo) el método devuelve el valor undefined. Por ejemplo, el siguiente código devuelve el carácter en la tercera posición de la cadena nombre: var nombre = "abcdefghij"; var car3 = nombre.charat(2); Devolverá "c", que es el tercer carácter por la izquierda (índice igual a 2). 4. Manejo de fechas El objeto Date contiene un valor que representa fecha y hora de un instante dado. Para crear una instancia de este objeto usamos alguna de las siguientes sintaxis: var fecha = new Date() var fecha = new date(número) var fecha = new date(cadena) var fecha = new date(año, mes, día[, hora[, minutos[,seg[,ms]]]]) Los argumentos encerrados entre corchetes son opcionales. En la primera forma la variable fecha contendrá la fecha del día actual. La segunda opción almacena en fecha la fecha dada por el argumento como el número de milisegundos transcurridos desde la media noche del 1 de Enero de El tercer tipo se usa cuando la fecha se pasa en forma de cadena. Por último la fecha puede crearse pasándole como argumento los números de año, mes, día, hora y opcionalmente, hora, minuto, segundo y milisegundo. Los años posteriores a 1970 puede escribirse con dos dígitos, pero es aconsejable usar siempre cuatro dígitos por aquello de los efectos var hoy = new date() /*fecha del día en hoy */ var evento = new Date("November "); var otro = new Date("10 Nov 1990"); var otro = new Date("10/02/2000"); //Oct, 2, 2000 var instante = new Date(1990, 11, 10, 20,00); Estas son las posibles formas de declarar objetos de tipo fecha. Las dos últimas almacenan el mismo día, pero en la última además se guarda la hora. Lenguajes Interpretados en el Cliente 5

6 Donde se usen cadenas para indicar una fecha podemos añadir al final las siglas GMT (o UTC) para indicar que la hora se refiere a hora del meridiano Greenwich, si no se toma como hora local, o sea, según la zona horaria configurada en el ordenador donde se ejecute el script. Métodos GetDate() Nos devuelve el día del mes del objeto fecha al que se aplica. Este método controla por supuesto el número de días de cada mes y contempla el caso de años bisiestos, incluida la excepción del En el siguiente ejemplo se presenta en pantalla Hoy es día 2, suponiendo que la fecha del sistema es Primero creamos la variable fecha instanciada como un objeto Date() para a continuación escribir directamente el valor de getdate() aplicado a fecha var fecha = new Date(); document.write("hoy es día: "+fecha.getdate()); setfullyear() Nos permite cambiar el año del objeto fecha por el valor pasado como argumento, un número de dos dígitos que se interpreta como decenas dentro del siglo, o sea, que para poner el año 1995 se debe pasar 95. El ejemplo pone precisamente este valor en el campo año de la variable fecha. var fecha = new Date(); fecha.setyear(95) document.write(fecha.tostring()); Ojo si pasamos el valor 00 en el argumento el año obtenido es el 1900 (uno de los efectos 2000), por esto es recomendable usar la función setfullyear(agno). setdate() Nos permite cambiar el día del mes del objeto fecha al que se aplica para poner el valor que se pasado en el argumento diames. Este método controla por supuesto el número de días de cada mes y contempla el caso de años bisiestos, incluida la excepción del 2000, de forma que si pasamos como argumento 31 y el mes es de 30 días la función corrige la fecha completa pasándola al día 1 del mes siguiente. Esto lo vemos en el ejemplo que sigue: creamos una variable como un objeto Date con el último día de Septiembre (mes de 30 días) e intentamos poner el día a 31, luego comprobamos la fecha almacenada: var fecha = new Date("1 Sep 2008"); fecha.setdate(31); document.write("hoy es día: " + fecha.tostring()); Como puede verse, si se prueba el ejemplo la fecha es corregida y pasa a 1 de Octubre. Objetos del navegador. Los objetos del navegador se encuentran en el nivel más alto de la jerarquía de objetos que define JavaScript. Estos son window, frame, location, history, y navigator. El objeto más alto en la jerarquía de objetos que define JavaScript es window. El resto de objetos (excepto el objeto navigator) se ubican siempre dentro de una ventana. Los métodos y propiedades de los objetos window y navigator pueden utilizarse sin necesidad de declarar variables. Ejemplo: //Mostrar la hora segundo a segundo function hourstatus(){ var mifecha = new Date(); window.status = formato(mifecha.gethours()) + ":" + formato(mifecha.getminutes()) + ":" + formato(mifecha.getseconds()); //Llamando a la función segundo a segundo Lenguajes Interpretados en el Cliente 6

7 settimeout("hourstatus()", 1000); //Función para formatear las partes de la hora function formato(valor){ if(valor<10) valor = "0" + valor; return valor; Objetos de documento Los objetos del documento se encuentran en el segundo nivel de la jerarquía de objetos que define JavaScript. Estos son document, link, anchor e image. Estos objetos permiten a JavaScript, entre otras cosas, el manejo de Hojas de Estilo en Cascada y la ejecución de HTML dinámico (DHTML). El acceso a los objetos del documento es proporcionado por el navegador mediante el uso de la propiedad document del objeto window. Ejemplo: //Función que obtiene el texto seleccionado function gettextselected(){ var seltext = ""; //Internet Explorer if(document.selection){ seltext = document.selection.createrange().text; //Otros navegadores (Chrome, Firefox, Opera, etc.) if(window.getselection){ seltext = window.getselection(); if(document.getselection){ seltext = document.getselection(); //Asignar el texto seleccionado a un elemento P document.getelementbyid("paragraph").innerhtml = "<p>texto seleccionado: " + seltext + "</p>"; Estas últimas dos categorías de objetos se estudiarán con más detalle en próximas guías de práctica. 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 #5: Objetos en JavaScript 1 2 Computadora con Sublime Text PHP Designer 2007 y navegadores instalados 1 3 Memoria USB o disco flexible 1 IV. PROCEDIMIENTO Para los ejemplos del procedimiento de esta guía se ha utilizado el enfoque de desarrollo con JavaScript no invasivo. Esto significa que el manejo de eventos no se realizará en casi ningún caso con atributos manejadores de eventos dentro del código HTML. El manejo de eventos se hace con el modelo de eventos estándar, conocido como modelo de eventos Nivel 2 del DOM, que dicho sea de paso, es mucho más eficiente y propicia la completa separación de la funcionalidad del documento web de su estructura, algo muy similar a la separación de la apariencia de la estructura del documento lograda con el correcto manejo de las hojas de estilo en cascada. Ejemplo #1: El ejemplo solicita dos valores numéricos (pueden ser con punto flotante) para calcular, presionando los botones respectivos, el perímetro y el área de un rectángulo con esas dimensiones. Se Lenguajes Interpretados en el Cliente 7

8 utilizan campos de formulario de tipo number, incorporados en HTML5 y se establecen valores mínimo, máximo y el desplazamiento para manejar los valores ingresados con el control que algunos navegadores modernos incorporan. También es factible ingresar los valores directamente. Guión 1: rectangulo.html <!DOCTYPE html> <html lang="es"> <head> <title>áreas de rectángulos</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/slick.css" /> <link rel="stylesheet" href="css/demo.css" /> <script type="text/javascript" src="js/calculo.js"></script> </head> <body> <section id="slick">  <div class="contact-form">  <div class="title">cálculo de área y perímetro</div>  <p class="intro">ingrese los siguientes datos</p>  <div class="w-100">  <form name="frmrectangulo" id="frmrectangulo" action="javascript:void(0);">  <div class="field"> <input type="number" name="base" id="txtbase" min="0" max="1000" step=".1" placeholder="(base)"required /> <span class="entypo-base icon"></span> <span class="slick-tip left">ingrese la base:</span> </div>  <div class="field"> <input type="number" name="altura" id="txtaltura" min="0" max="1000" step=".1" placeholder="(altura)" required /> <span class="entypo-altura icon"></span> <span class="slick-tip left">ingrese la altura:</span> </div>  <input type="submit" value="area" class="send" name="btnarea" id="area" /> <input type="submit" value="perimetro" class="send" name="btnperimetro" id="perimetro" /> </form>  </div> </div>  </section> </body> </html> Guión 2: calculo.js //Registrar evento click del ratón al presionar botones de envío function iniciar(){ var btnarea = document.getelementbyid("area"); var btnperim = document.getelementbyid("perimetro"); if(btnarea.addeventlistener){ btnarea.addeventlistener("click", calculararea, false); else{ btnarea.attachevent("onclick", calculararea); Lenguajes Interpretados en el Cliente 8

9 if(btnperim.addeventlistener){ btnperim.addeventlistener("click", calcularperimetro, false); else{ btnperim.attachevent("onclick", calcularperimetro); function calculararea(){ var rect = new rectangulo(document.frmrectangulo.txtbase.value, document.frmrectangulo.txtaltura.value); rect.mostrar(rect.carea(), " área"); return false; function calcularperimetro(){ var peri = new rectangulo(document.frmrectangulo.txtbase.value, document.frmrectangulo.txtaltura.value); peri.mostrar(peri.cperimetro(), 'perímetro'); return false; //Creando una clase rectángulo function rectangulo(base, altura){ //Propiedades de la clase this.base = parsefloat(base); this.altura = parsefloat(altura); //Métodos de la clase this.carea = new Function("return this.base * this.altura"); this.cperimetro = new Function("return 2*this.base + 2*this.altura"); this.mostrar = new Function("valor","tipoc","alert('El ' + tipoc + ' es: ' + valor)"); //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: slick.css /* ===================================== 1. FUENTES IMPORTADAS DE GOOGLE FONTS ===================================== url( /* Lobster font for headings url( /* Lato font for the content */ /* Entypo pictograms by Daniel Bruce { font-family: 'entypo'; font-style: normal; font-weight: normal; src: url('../fonts/entypo.eot'); src: url('../fonts/entypo.eot?#iefix') format('eot'), url('../fonts/entypo.woff') format('woff'), url('../fonts/entypo.ttf') format('truetype'), url('../fonts/entypo.svg#entypo') format('svg'); Lenguajes Interpretados en el Cliente 9

10 /* =================== 2. RESETEAR ESTILOS =================== */ body { background:url("../img/bg.jpg") 0 0 repeat; height:100%; margin:0; padding:0; width:100%; #slick * { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: 'Lato', Arial, Helvetica, sans-serif; vertical-align: baseline; line-height: normal; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; #slick label { cursor: pointer; #slick input[type="radio"], #slick input[type="checkbox"] { display: none; visibility: hidden; opacity: 0; /* Colocar iconos para los campos typo number */ #slick.entypo-base:before{ content:"\0394"; #slick.entypo-altura:before{ content:"\2207"; #slick a { text-decoration: none; #slick { margin: 40px auto; position: relative; /* Ajustar este valor para cambiar ancho del formulario */ width: 480px; /* ====================== 3. Estilos principales ====================== */ #slick.contact-form { background: #fff; Lenguajes Interpretados en el Cliente 10

11 position: relative; width: 100%; height: auto; float: left; padding: 40px; -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.7); -moz-box-shadow: 0 0 8px 0 rgba(0,0,0,0.7); box-shadow: 0 0 8px 0 rgba(0,0,0,0.7); #slick.w-100, #slick.w-47, #slick.w-30 { float: left; display: inline-block; position: relative; #slick.w-100 { width: 100%; #slick.w-47 { width: 47%; #slick.w-30 { width: 30%; #slick.mr-5 { margin-right: 5%; #slick.mr-6 { margin-right: 6%; #slick.mt-5 { margin-top: 5px; #slick.mt-10 { margin-top: 10px; #slick.mt-20 { margin-top: 20px; #slick.clrfx { clear: both; display: block; width: 100%; float: left; /* ===================== 4. Elementos de texto ===================== */ /***** Encabezado *****/ #slick.title { Lenguajes Interpretados en el Cliente 11

12 font-family: 'Lobster', cursive; font-weight: normal; font-size: 32px; color: #333; line-height: normal; display: inline-block; float: left; /***** Párrafos *****/ #slick p.intro { font-size: 12px; line-height: 16px; display: block; color: #bbb; margin: 20px 0; float: left; clear: both; width: 100%; #slick p.intro b { color: #FF2424; #slick p.tick-text { font-size: 10px; color: #999; display: inline-block; float: left; margin: 8px px; /***** Ayudas textuales *****/ #slick span.slick-tip { width: auto; height: auto; white-space: nowrap; padding: 10px; font-size: 10px; text-align: center; color: #fff; background: #333; position: absolute; opacity: 0; visibility: hidden; z-index: -1; #slick span.slick-tip.right { right: -30px; bottom: 36px; background: #fff; color: #222; #slick span.slick-tip.left { left: 20px; top: -44px; #slick span.slick-tip:before { content: ""; Lenguajes Interpretados en el Cliente 12

13 position: absolute; bottom: -6px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 6px solid rgba(51,51,51,1); #slick span.slick-tip.right:before { right: 30px; margin-left: -10px; #slick span.slick-tip.right:before { border-top: 6px solid rgba(255,255,255,1); #slick span.slick-tip.left:before { left: 20px; margin-right: -10px; #slick input:focus ~.slick-tip, #slick select:focus ~.slick-tip, #slick textarea:focus ~.slick-tip, #slick.sb a:hover span.slick-tip { opacity: 1; visibility: visible; z-index: 9999; #slick input:required:valid ~.slick-tip, #slick textarea:required:valid ~.slick-tip { opacity: 0; visibility: hidden; z-index: -1; /* ================== 5. ELEMENTOS INPUT ================== */ /***** Principal *****/ #slick.field { position: relative; width: 100%; clear: both; float: left; margin-bottom: 20px; #slick.field span.icon { background: #ddd; left: 0; color: #fff; font-size: 16px; line-height: 40px; position: absolute; text-align: center; top: 0; height: 100%; width: 38px; Lenguajes Interpretados en el Cliente 13

14 #slick.field input, #slick.field textarea, #slick.field select { border: solid 1px #ddd; color: #333; float: left; font-size: 12px; padding: 12px 20px 10px 50px; width: 100%; #slick.field textarea { max-height: 146px; height: 146px; resize: none; overflow: auto; #slick.field textarea.message { height: 159px; max-height: 159px; #slick.field textarea:focus { height: 200px; max-height: 200px; #slick.field > input:hover, #slick.field > input:focus, #slick.field > select:hover, #slick.field > select:focus, #slick.field > textarea:hover, #slick.field > textarea:focus{ border: solid 1px #333; outline: none; #slick input:hover ~ span.icon, #slick input:focus ~ span.icon, #slick select:hover ~ span.icon, #slick select:focus ~ span.icon, #slick textarea:hover ~ span.icon, #slick textarea:focus ~ span.icon { outline: none; background: #333; /***** Select input *****/ #slick.field select { background: none; background-color: rgba(0,0,0,0); height: auto; z-index: 2; padding-left: 47px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; #slick select.grayed { color: #999; Lenguajes Interpretados en el Cliente 14

15 #arrow-select, #arrow-select-svg { background: #fff url('../img/select.png') no-repeat 0 11px; width: 44px; height: 35px; position: absolute; right: 1px; top: 1px; pointer-events: none; vertical-align: middle; outline: none; border: none; z-index: 3; #slick select:hover ~ #arrow-select, #slick select:focus ~ #arrow-select, #slick select:hover ~ #arrow-select-svg, #slick select:focus ~ #arrow-select-svg { background: #fff url('../img/select-focus.png') no-repeat 0 screen and (-webkit-min-device-pixel-ratio:0) { #arrow-select-svg { /* Esconde flechas svg en navegadores webkit e IE 9 y 10 (elementos apuntadores no funcionan en estos navegadores) */ display: none; x:-o-prefocus, #arrow-select { display: none; /* Hack para Opera 12 */ /***** Placeholders *****/ /*-- Webkit --*/ #slick input::-webkit-input-placeholder, #slick textarea::-webkit-input-placeholder { color: #999; #slick input:focus::-webkit-input-placeholder, #slick textarea:focus::-webkit-input-placeholder { color: #ccc; /*-- Firefox 19 down --*/ #slick input:-moz-placeholder, #slick textarea:-moz-placeholder { color: #999; #slick input:focus:-moz-placeholder, #slick textarea:focus:-moz-placeholder { color: #ccc; /*-- Firefox 19 up --*/ #slick input::-moz-placeholder, #slick textarea::-moz-placeholder { color: #999; Lenguajes Interpretados en el Cliente 15

16 #slick input:focus::-moz-placeholder, #slick textarea:focus::-moz-placeholder { color: #ccc; /*-- IE */ #slick input:-ms-input-placeholder, #slick textarea:-ms-input-placeholder { color: #999; #slick input:focus:-ms-input-placeholder, #slick textarea:focus:-ms-input-placeholder { color: #ccc; /*-- IE 9 --*/ #slick.ie9-placeholder { color: #999!important; #slick.ie9-placeholder:focus { color: #ccc!important; /***** Validations *****/ #slick.field input:required, #slick.field textarea:required, #slick.field select:required { background: #fff url(../img/required.png) no-repeat 100% 15px; outline: none; box-shadow: none; #slick.field input:hover:invalid, #slick.field textarea:hover:invalid, #slick.field select:hover:invalid { background: #fff url(../img/focused.png) no-repeat 100% 15px; outline: none; box-shadow: none; #slick.field input:required:valid, #slick.field textarea:required:valid, #slick.field select:required:valid { background: #fff url(../img/valid.png) no-repeat 100% 15px; outline: none; box-shadow: none; #slick.field input:focus:invalid, #slick.field textarea:focus:invalid, #slick.field select:focus:invalid { background: #fff url(../img/invalid.png) no-repeat 100% 15px; outline: none; box-shadow: none; /***** Send button *****/ #slick input.send { background: #FF2424; border: none; clear: none; color: #fff; Lenguajes Interpretados en el Cliente 16

17 display: inline-block; float: right; font-size: 12px; margin-right: 10px; outline: none; padding: 6px 28px; text-align: center; text-transform: uppercase; width: auto; #slick input.send:hover, #slick input.send:focus { border: none; outline: none; background: #333; cursor: pointer; /***** Tick checkboxes *****/ #slick label.tick { display: inline-block; float: left; position: relative; width: auto; #slick label.tick:before { background: #fff; border: solid 2px #ddd; content: ""; display: inline-block; height: 16px; position: absolute; width: 16px; #slick label.tick:after { opacity: 0; visibility: hidden; content: ""; position: absolute; width: 8px; height: 4px; background: transparent; top: 6px; left: 5px; border: 2px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); #slick input:checked + label.tick:after { opacity: 1; visibility: visible; Lenguajes Interpretados en el Cliente 17

18 #slick label.tick span { font-size: 11px; color: #999; padding-left: 26px; #slick label.tick:hover span { color: #333; /* ================== 6. TRANSITIONS ================== */ #slick a, #slick label, #slick input, #slick select, #slick textarea, #slick span.slick-tip, #slick input ~ span.icon, #slick select ~ span.icon, #slick textarea ~ span.icon { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; /* ================== 7. MEDIA QUERIES ================== */ /***** Max width 480px screen and (max-width:480px) { #slick { width: 100%; #slick.w-47, #slick.w-30 { width: 100%; #slick.mr-6, #slick.mr-5 { margin-right: 0; #slick.map { margin-top: 20px; #slick.w-30, #slick.mr-5 { margin-bottom: 20px; #slick.field input, #slick.field textarea, #slick.field select { font-size: 16px; #slick p.intro { font-size: 14px; line-height: 20px; #slick input.send { width: 100%; Lenguajes Interpretados en el Cliente 18

19 padding: 12px; float: left; clear: both; font-size: 16px; Resultado de la visualización en un navegador: Ejemplo #2: El siguiente ejemplo muestra una forma de poder calcular la edad exacta de una persona, ingresando la fecha de nacimiento mediante campos de formulario donde debe ingresarse el día, el mes y el año de nacimiento. El cálculo de la edad exacta se hace con respecto a la fecha actual, que tendría que estar bien configurada en el sistema operativo del servidor o computadora donde se ejecuta el script. Guión 1: edadexacta.html <!DOCTYPE html> <html lang="es"> <head> <title>introducir fecha</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/formstyle.css" /> <script type="text/javascript" src="js/calculoedad.js"></script>   </head> <body> <div class="cover"> <form action="javascript:void(0)" name="frmfechanac" id="contactform"> <h2 class="contact">tu fecha de nacimiento</h2> <span class="contact"> <label for="dia">día:</label> </span> <select name="seldia" id="dia" disabled> <script type="text/javascript"> for(i=1; i<=31; i++){ document.write("<option value='" + i + "'>" + i + "</option>"); </script> </select> Lenguajes Interpretados en el Cliente 19

20 <span class="contact"> <label for="mes">mes:</label> </span> <select name="selmes" id="mes"> <option value='enero' selected>enero</option> <option value='febrero'>febrero</option> <option value='marzo'>marzo</option> <option value='abril'>abril</option> <option value='mayo'>mayo</option> <option value='junio'>junio</option> <option value='julio'>julio</option> <option value='agosto'>agosto</option> <option value='septiembre'>septiembre</option> <option value='octubre'>octubre</option> <option value='noviembre'>noviembre</option> <option value='diciembre'>diciembre</option> </select> <span class="contact"> <label for="txtano">año:</label> </span> <input type="text" value="2014" name="txtano" id="ano" size="4" maxlength="4" /><br /> <input type="button" name="btncalcular" id="calcular" value="tu edad" /> </form> </div> </body> </html> Guión 2: calculoedad.js //Variable para determinar si un año es bisiesto o no var bisiesto = false; //Registrar evento click al presionar el botón de envío function iniciar(){ var dia, mes; var btncalcular = document.getelementbyid("calcular"); //Al producirse un click sobre el botón de envío invocar //a la función edad para calcularla con los datos ingresados if(btncalcular.addeventlistener){ btncalcular.addeventlistener("click", function(){ dia = document.frmfechanac.seldia.options[frmfechanac.seldia.selectedindex].value; mes = document.frmfechanac.selmes.options[frmfechanac.selmes.selectedindex].value; edad(dia, mes, document.frmfechanac.txtano.value);, false); else{ alert(mes); btncalcular.attachevent("onclick", function(){ dia = document.frmfechanac.seldia.options[frmfechanac.seldia.selectedindex].value; mes = document.frmfechanac.selmes.options[frmfechanac.selmes.selectedindex].value; edad(dia, mes, document.frmfechanac.txtano.value); ); //Si se cambia de mes en el campo select name=selmes invocar //a la función llenardias() para volver a rellenar el campo //select dependiente de los días de acuerdo al mes seleccionado var selmes = document.getelementbyid("mes"); if(selmes.addeventlistener){ Lenguajes Interpretados en el Cliente 20

21 selmes.addeventlistener("change", function(){ mes = document.frmfechanac.selmes.options[document.frmfechanac.selmes.selectedindex].value; llenardias(mes, document.frmfechanac.seldia);, false); else if(selmes.attachevent){ selmes.attachevent("onchange", function(){ mes = document.frmfechanac.selmes.options[document.frmfechanac.selmes.selectedindex].value; llenardias(mes, document.frmfechanac.seldia); ); //Del mismo modo, si se ingresa otro año, volver a rellenar //el campo select de los días para considerar si se cambia //a un año bisiesto o no var txtano = document.getelementbyid("ano"); if(txtano.addeventlistener){ txtano.addeventlistener("change", function(){ mes = document.frmfechanac.selmes.options[document.frmfechanac.selmes.selectedindex].value; llenardias(mes, document.frmfechanac.seldia);, false); else if(txtano.attachevent){ txtano.attachevent("onchange", function(){ mes = document.frmfechanac.selmes.options[document.frmfechanac.selmes.selectedindex].value; llenardias(mes, document.frmfechanac.seldia); ); //Función para determinar si un año es bisiesto o no function esbisiesto(anno){ if(anno % 4 == 0 && (anno % 400 == 0 anno % 100!= 0)){ bisiesto = true; else{ bisiesto = false; return bisiesto; //Función para limpiar el menú de selección Días function quitardias(menudias){ for(i=0; i<menudias.options.length; i++){ menudias.options[i] = null; //Función para llenar la caja de texto de los días function llenardias(mes, menudias){ document.frmfechanac.seldia.disabled = false; var i; quitardias(menudias); switch(mes){ case 'Enero': case 'Marzo': case 'Mayo': case 'Julio': case 'Agosto': case 'Octubre': Lenguajes Interpretados en el Cliente 21

22 case 'Diciembre': for(i=0; i<31; i++){ menudias[i] = new Option(parseInt(i+1), parseint(i+1)); break; case 'Abril': case 'Junio': case 'Septiembre': case 'Noviembre': for(i=0; i<30; i++){ menudias[i] = new Option(parseInt(i+1), parseint(i+1)); break; case 'Febrero': if(esbisiesto(document.frmfechanac.txtano.value)){ for(i=0; i<29; i++){ menudias[i] = new Option(parseInt(i+1), parseint(i+1)); else{ for(i=0; i<28; i++){ menudias[i] = new Option(parseInt(i+1), parseint(i+1)); break; //Función para obtener la edad exacta de la persona function edad(dia, mes, annio){ var tusdias, tusmeses, tusannios; var fecactual = new Date(); var year = fecactual.getfullyear(); var month = parseint(fecactual.getmonth()) + 1; var day = fecactual.getdate(); tusdias = day - dia; switch(mes){ case 'Enero': mes = 1; if(tusdias < 0){ tusdias = day - dia + 31; month--; break; case 'Febrero': mes = 2; if(tusdias < 0 && esbisiesto(annio)){ tusdias = day - dia + 29; month--; else if(tusdias < 0 &&!esbisiesto(annio)){ tusdias = day - dia + 28; month--; break; case 'Marzo': mes = 3; if(tusdias < 0){ tusdias = day - dia + 31; month--; Lenguajes Interpretados en el Cliente 22

23 break; case 'Abril': mes = 4; if(tusdias < 0){ tusdias = day - dia + 30; month--; break; case 'Mayo': mes = 5; if(tusdias < 0){ tusdias = day - dia + 31; month--; break; case 'Junio': mes = 6; if(tusdias < 0){ tusdias = day - dia + 30; month--; break; case 'Julio': mes = 7; if(tusdias < 0){ tusdias = day - dia + 31; month--; break; case 'Agosto': mes = 8; if(tusdias < 0){ tusdias = day - dia + 31; month--; break; case 'Septiembre': mes = 9; if(tusdias < 0){ tusdias = day - dia + 30; month--; break; case 'Octubre': mes = 10; if(tusdias < 0){ tusdias = day - dia + 31; month--; break; case 'Noviembre': mes = 11; if(tusdias < 0){ tusdias = day - dia + 30; month--; break; case 'Diciembre': mes = 12; if(tusdias < 0){ tusdias = day - dia + 31; month--; Lenguajes Interpretados en el Cliente 23

24 break; tusmeses = month - mes; if(tusmeses < 0){ tusmeses = month - mes + 12; year--; tusannios = year - annio; alert("tu edad exacta es:\n" + tusannios + " años,\n" + tusmeses + " meses, y\n" + tusdias + " días."); //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: fonts.css (Hoja de estilo donde se definen las fuentes a utilizar con { font-family: 'YanoneKaffeesatzRegular'; src: url('../fonts/yanonekaffeesatz-regular-webfont.eot'); src: url('fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embeddedopentype'), url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'), url('../fonts/yanonekaffeesatz-regular-webfont.svg#yanonekaffeesatzregular') format('svg'); font-weight: normal; font-style: { font-family: 'BebasNeueRegular'; src: url('../fonts/bebasneue-webfont.eot'); src: url('../fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue-webfont.woff') format('woff'), url('../fonts/bebasneue-webfont.ttf') format('truetype'), url('../fonts/bebasneue-webfont.svg#bebasneueregular') format('svg'); font-weight: normal; font-style: normal; Guión 4: formstyle.css (Hoja de estilo para los elementos de la página, en especial el formulario). body, div, h1, form, fieldset, input, textarea { margin: 0; padding: 0; border: 0; outline: none; html { height: 100%; body { background: #A4EB90; background-image: -webkit-gradient( linear, left top, left bottom, Lenguajes Interpretados en el Cliente 24

25 color-stop(0, #A4EB90), color-stop(1, #55963F) ); background-image: -o-linear-gradient(bottom, #A4EB90 0%, #55963F 100%); background-image: -moz-linear-gradient(bottom, #A4EB90 0%, #55963F 100%); background-image: -webkit-linear-gradient(bottom, #A4EB90 0%, #55963F 100%); background-image: -ms-linear-gradient(bottom, #A4EB90 0%, #55963F 100%); background-image: linear-gradient(to bottom, #A4EB90 0%, #55963F 100%); font-family: sans-serif;.cover{ background:#ccc; width:700px; margin:auto; padding-left:60px; h2.contact { padding-left: 125px; font-family: 'YanoneKaffeesatzRegular'; font-size: 66px; color: #ff5400; height: 105px; background: url(../images/hatbirthday.png) no-repeat -10px -10px; span.contact { font-size: 24px; margin-bottom: 15px; line-height: 36px; font-family: 'BebasNeueRegular', Arial; color: #4b4b4b; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); input[type="text"] { width: 64px; textarea { width: 600px; height: 275px; select[name="seldia"] { width: 80px; label { color: #ff5400; input, textarea, select { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: 'Keffeesatz', Arial; color: #4b4b4b; font-size: 24px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin-bottom: 15px; Lenguajes Interpretados en el Cliente 25

26 margin-top: -10px; input:focus, textarea:focus, select:focus { background-color: rgba(255,255,255,1); border: 5px solid #ff5400; input[type="button"] { background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #619702), color-stop(0.62, #7ac000) ); background: -moz-linear-gradient( center bottom, # %, #7ac000 62% ); border: none; cursor: pointer; color: #fff; font-size: 24px; background-color: #7ac000; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkitbox-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6); input[type="button"]:hover { background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #c34000), color-stop(0.62, #ff5400) ); background: -moz-linear-gradient( center bottom, #c %, #ff % ); color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400; input[type="button"]:active { top: 1px; Resultado al ejecutar el script activado con los controles de formulario: Lenguajes Interpretados en el Cliente 26

27 Ejemplo #3: En el siguiente ejemplo se muestra cómo crear un script JS que permita indicar en base a una zona horaria mundial seleccionada por el usuario la hora y fecha de esa zona horaria. En este ejemplo se hace uso de los objetos incorporados de JavaScript Date para manejar la fecha y el objeto Math para realizar los cálculos de desfase horario entre las zonas. Guión 1: zonahoraria.html <!DOCTYPE html> <html lang="es"> <head> <title>zona horaria internacional</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/elegant.css" /> <script type="text/javascript" src="js/zonahoraria.js"></script>   </head> <body> <header> <h1>zonas del horario internacional</h1> </header> <section> <article> <form name="zonahoraria" class="elegant-aero"> <h1> Zonas horarias del mundo <span>seleccione su zona horaria.</span> </h1> <label> <span>zonas horarias :</span> <select name="zonas" id="zhselect"> <option value="-12">línea internacional de fecha del oeste</option> <option value="-11">isla Midway, Samoa</option> <option value="-10">hawai</option> <option value="-9">alaska</option> <option value="-8">hora del Pacífico (USA y Canadá)</option> <option value="-7">hora de las montañas rocosas (USA y Canadá)</option> <option value="-6">américa Central</option> <option value="-5">hora central (USA y Canadá)</option> <option value="-4">hora del Atlántico (Canadá)</option> <option value="-3">buenos Aires, Asunción, Brasilia, Montevideo</option> <option value="-2">atlántico Central</option> <option value="-1">azores</option> <option value="0" selected="selected">hora del meridiano de Greenwich, Londres, Dublin</option> <option value="+1">paris, Madrid, Barcelona, Roma</option> <option value="+2">el Cairo</option> <option value="+3">nairobi</option> <option value="+4">bakú</option> <option value="+5">ekaterimburgo</option> <option value="+6">astana</option> <option value="+7">bangkok</option> Lenguajes Interpretados en el Cliente 27

28 <option value="+8">ulán Bator</option> <option value="+9">tokio</option> <option value="+10">sidney</option> <option value="+11">islas Salomón</option> <option value="+12">wellington</option> </select> </label> <label> <span>la hora en esta zona es :</span> <input type="text" name="hour" id="hour" placeholder="(zona horaria)" readonly="readonly" /> </label> <label> <span> </span> <input type="button" class="button" value="cambiar" /> </label> </form> </article> </section> </body> </html> Guión 2: zonahoraria.js //La fecha del día en la zona del cliente web //usando el objeto Date de JavaScript var fechahoy = new Date(); //Cálculo del desfase en el huso horario para hacer //luego el ajuste con la zona horaria seleccionada //en el elemento select del formulario var desfase = -(Math.round(fechaHoy.getTimezoneOffset()/60)) + 12; //Registrar evento click del ratón al presionar botones de envío function iniciar(){ var select = document.getelementbyid("zhselect"); if(select.addeventlistener){ select.addeventlistener("change", gethoralocal, false); else{ select.attachevent("onchange", gethoralocal); //Función gethoralocal() //Calcula la hora en la zona horaria seleccionada function gethoralocal(){ var fechahoy = new Date(); //Ajustar el desfase horario respecto a la zona seleccionada. //Por ejemplo, la zona horaria para América Central está //en el índice 6 de la colección de opciones del elemento select. //Si un usuario selecionara la zona horaria de Tokio que está //en el índice 21 de la colección el cálculo se realizaría así: //21 - desfase del cliente (zona horaria de América Central) = 15 var zh = document.zonahoraria.zonas.selectedindex - desfase; //Sumar (o restar) las horas de desfase respecto a la hora //local del cliente fechahoy.sethours(fechahoy.gethours() + zh); //Informar la hora local del huso horario elegido document.zonahoraria.hour.value = fechahoy.tolocalestring(); Lenguajes Interpretados en el Cliente 28

29 //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: elegant.css /* Estilos básicos para toda la página */ * { margin: 0; padding: 0; body { font-size: 15px; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #EDCACE), color-stop(1, #F0CEDD) ); background-image: -o-linear-gradient(bottom, #EDCACE 0%, #F0CEDD 100%); background-image: -moz-linear-gradient(bottom, #EDCACE 0%, #F0CEDD 100%); background-image: -webkit-linear-gradient(bottom, #EDCACE 0%, #F0CEDD 100%); background-image: -ms-linear-gradient(bottom, #EDCACE 0%, #F0CEDD 100%); background-image: linear-gradient(to bottom, #EDCACE 0%, #F0CEDD 100%); header h1 { font: bold 2.2em/24px Tahoma,Geneva,"Liberation Sans"; color: #091363; padding: 24px 0; text-align: center; text-shadow: 2px 2px 0px #abf, 4px 4px 0px #909090; /* Elegant Aero para el formulario */.elegant-aero { margin-left:auto; margin-right:auto; max-width: 500px; background: #D2E9FF; padding: 20px 20px 20px 20px; font: 12px Arial, Helvetica, sans-serif; color: #666;.elegant-aero h1 { font: 24px "Trebuchet MS",Arial,Helvetica,"Liberation Sans"; padding: 10px 10px 10px 20px; display: block; background: #C0E1FF; border-bottom: 1px solid #B8DDFF; margin: -20px -20px 15px;.elegant-aero h1>span { display: block; Lenguajes Interpretados en el Cliente 29

30 font-size: 11px;.elegant-aero label>span { float: left; margin-top: 10px; color: #5E5E5E;.elegant-aero label { display: block; margin: 0px 0px 5px;.elegant-aero label>span { float: left; width: 20%; text-align: right; padding-right: 15px; margin-top: 10px; font-weight: bold;.elegant-aero input[type="text"],.elegant-aero input[type=" "],.elegant-aero textarea,.elegant-aero select { color: #888; width: 70%; padding: 0px 0px 0px 5px; border: 1px solid #C5E2FF; background: #FBFBFB; outline: 0; -webkit-box-shadow:inset 0px 1px 6px #ECF3F5; box-shadow: inset 0px 1px 6px #ECF3F5; font: em/25px Arial, Helvetica, sans-serif; height: 30px; line-height:15px; margin: 2px 6px 16px 0px;.elegant-aero textarea{ height:100px; padding: 5px 0px 0px 5px; width: 70%;.elegant-aero select { background: #fbfbfb url('../img/down-arrow.png') no-repeat right; background: #fbfbfb url('../img/down-arrow.png') no-repeat right; appearance:none; -webkit-appearance:none; -moz-appearance: none; -o-appearance:none; -ms-appearance:none; text-indent: 0.01px; text-overflow: ''; width: 70%;.elegant-aero.button{ padding: 10px 30px 10px 30px; background: #66C1E4; Lenguajes Interpretados en el Cliente 30

31 border: none; color: #FFF; box-shadow: 1px 1px 1px #4C6E91; -webkit-box-shadow: 1px 1px 1px #4C6E91; -moz-box-shadow: 1px 1px 1px #4C6E91; text-shadow: 1px 1px 1px #5079A3;.elegant-aero.button:hover{ background: #3EB1DD; Resultado al ejecutar el script con un navegador: Ejemplo #4: Ejemplo que permite ingresar en un formulario datos de un libro que luego son almacenados en propiedades de un objeto libro definido con el objeto Object de JavaScript. Se verifica que los datos obtenidos sean correctos, se limpian los campos del formulario y finalmente se construye una tabla HTML con uno de los métodos del objeto donde se muestran los datos ya almacenados en las propiedades de ese objeto creado. Guión 1: libros.html <!DOCTYPE html> <html lang="es"> <head> Lenguajes Interpretados en el Cliente 31

32 <title>creación de objetos</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/font.css" /> <link rel="stylesheet" href="css/masked.css" /> <link rel="stylesheet" href="css/libro.css" /> <script type="text/javascript" src="js/libro.js"></script> </head> <body> <div class="masked"> <h1>información del libro</h1> </div> <form name="frmbook" id="frmbook"> <table> <tr> <td>autor: </td> <td> <input type="text" name="txtautor" id="txtautor" maxlength="40" /> </td> </tr> <tr> <td>título: </td> <td> <input type="text" name="txtitulo" id="txtitulo" maxlength="30" /> </td> </tr> <tr> <td>editorial: </td> <td> <select name="seleditorial" size="1"> <option value="a" selected="selected">mc-graw Hill</option> <option value="b">pearson</option> <option value="a">alfa-omega</option> <option value="a">anaya</option> </select> </td> </tr> <tr> <td>edición: </td> <td> <select name="seledicion" size="1"> <option value="a" selected="selected">1ra</option> <option value="b">2da</option> <option value="c">3ra</option> <option value="d">4ta</option> <option value="e">5ta</option> <option value="f">6ta</option> </select> </td> </tr> <tr> <td>país: </td> <td> <input type="text" name="txtpais" id="txtpais" maxlength="36" /> </td> </tr> <tr> <td colspan="2" class="combinar"> <input type="button" name="mostrar" id="mostrar" value="enviar" class="boton" /> </td> </tr> </table> </form> </body> Lenguajes Interpretados en el Cliente 32

33 </html> Guión 2: libro.js //Creando el objeto var book = new Object(); //Registrar evento click del ratón al presionar botones de envío function iniciar(){ var showinfo = document.getelementbyid("mostrar"); if(showinfo.addeventlistener){ showinfo.addeventlistener("click", function(){ createobject(document.frmbook);, false); else{ showinfo.attachevent("onclick", function(){ createobject(document.frmbook); ); // Creando el nuevo objeto function createobject(form){ book.autor = form.txtautor.value; book.titulo = form.txtitulo.value; book.editorial = form.seleditorial.options[form.seleditorial.selectedindex].text; book.edicion = form.seledicion.options[form.seledicion.selectedindex].text; book.pais = form.txtpais.value; showproperties(book, "InfoBook"); function showproperties(objeto, objname){ var infbook = ""; var tblbook = ""; for(var i in objeto){ infbook = infbook + objname + "." + i + " = " + objeto[i] + "\n"; if(!confirm(infbook + "\n\n Es esta información correcta?")){ frmbook.txtautor.value = ""; frmbook.txtitulo.value = ""; frmbook.seleditorial.value = "a"; frmbook.seledicion.value = "a"; frmbook.txtpais.value = ""; tblbook += "<!DOCTYPE html>\n"; tblbook += "<html lang=\"es\">\n"; tblbook += "<head>\n\t"; tblbook += "<title>información del libro</title>\n"; tblbook += "<meta charset=\"utf-8\" />"; tblbook += "<link rel=\"stylesheet\" href=\"css/infolibro.css\"/>\n"; tblbook += "</head>\n"; tblbook += "<body>\n"; tblbook += "<table class=\"bookinfo\">"; tblbook += "<thead>\n\t<tr>\n\t\t"; tblbook += "<th>título</th>\n\t\t"; tblbook += "<th>autor</th>\n\t\t"; tblbook += "<th>editorial</th>\n\t\t"; tblbook += "<th>edición</th>\n\t\t"; tblbook += "<th>país</th>\n\t\t"; tblbook += "</tr>\n\t</thead>\n"; tblbook += "<tbody>\n\t"; tblbook += "<tr>\n\t\t"; Lenguajes Interpretados en el Cliente 33

34 tblbook += "<td>" + book.titulo + "</td>\n\t\t"; tblbook += "<td>" + book.autor + "</td>\n\t\t"; tblbook += "<td>" + book.editorial + "</td>\n\t\t"; tblbook += "<td>" + book.edicion + "</td>\n\t\t"; tblbook += "<td>" + book.pais + "</td>\n\t\t"; tblbook += "</tr></tbody>\n"; tblbook += "</table>\n"; tblbook += "</head>\n"; tblbook += "</html>\n"; document.write(tblbook); //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: { font-family: 'LeagueGothicRegular'; src: url('../fonts/league_gothic.eot'); src: url('../fonts/league_gothic.woff') format('woff'), url('../fonts/league_gothic.otf') format('opentype'), url('../fonts/league_gothic.svg#leaguegothic') format('svg'); Guión 4: libro.css * { margin: 0; padding: 0;.masked{ color:#fff; margin-top: 20px; h1 { font-family: "LeagueGothicRegular",Lucida,sans-serif; font-size: 100px; line-height: 1; letter-spacing: -3px; margin-bottom: 10px; text-align:center; text-transform: uppercase; table { border-style:outset; border-width:12px; border-color:rgb(166,199,166); margin: 12px auto; td { background-color:rgb(150,150,255); font-family:"trebuchet MS"; font-size:9pt; font-weight:300; Lenguajes Interpretados en el Cliente 34

35 padding: 2.5px 3px; text-align:left; input, select { background-color:rgb(180,220,200); color:rgb(30,40,90); font-family:"trebuchet MS"; font-weight:bold; font-size:8pt; height: 22px; width: 160px;.combinar { background-color:rgb(180,220,200); text-align:center;.boton { background-color:rgb(150,150,255); color:rgb(30,40,90); font-family:trebuchet MS; font-size:8pt; font-weight:bold; text-align:center; Guión 5: masked.css.masked{ background: url(../img/paint.png) repeat, white; -ms-text-fill-color: transparent; -ms-background-clip: text; -ms-animation-name: masked-animation; -ms-animation-duration: 40s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -moz-text-fill-color: transparent; -moz-background-clip: text; -moz-animation-name: masked-animation; -moz-animation-duration: 40s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-text-fill-color: transparent; -o-background-clip: text; -o-animation-name: masked-animation; -o-animation-duration: 40s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-animation-name: masked-animation; -webkit-animation-duration: 40s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; text-fill-color: transparent; background-clip: text; animation-name: masked-animation; animation-duration: 40s; animation-iteration-count: infinite; animation-timing-function: linear; Lenguajes Interpretados en el Cliente 35

36 @-webkit-keyframes masked-animation { 0% {background-position: left bottom; 100% {background-position: right bottom; Guión 6: infolibro.css table.bookinfo { border-color: #999999; border-collapse: collapse; border-width: 1px; color:#333333; font-family: verdana,arial,sans-serif; font-size:11px; margin: 26px auto; width: 42%; table.bookinfo th { padding: 6px 8px; background: #d5e3e4; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2njzgvlmcigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #d5e3e4 0%, #ccdee0 40%, #b3c8cc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0), color-stop(100%,#b3c8cc)); background: -webkit-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -o-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -ms-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); border: 1px solid #999999; table.bookinfo td { padding: 6px 8px; background: #ebecda; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2uwztbjniigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ebecda 0%, #e0e0c6 40%, #ceceb7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebecda), color-stop(40%,#e0e0c6), color-stop(100%,#ceceb7)); background: -webkit-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -o-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -ms-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: linear-gradient(to bottom, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); border: 1px solid #999999; Lenguajes Interpretados en el Cliente 36

37 table.bookinfo th p{ margin:0px; padding:8px; border-top: 1px solid #eefafc; border-bottom:0px; border-left: 1px solid #eefafc; border-right:0px; table.bookinfo td p{ margin:0px; padding:8px; border-top: 1px solid #fcfdec; border-bottom:0px; border-left: 1px solid #fcfdec;; border-right:0px; Resultado: Ejemplo #5: Este ejemplo muestra cómo controlar con JavaScript las opciones de un campo select dependiente de otro campo select. De modo que al cambiar la opción seleccionado en el campo select principal, se limpia por completo el campo select dependiente y se vuelve a llenar inmediatamente con las opciones que se corresponden con la opción seleccionada. Guión 1: carro.html <!DOCTYPE html> <html lang="es"> <head> <title>clases y objetos</title> <meta charset="utf-8" /> Lenguajes Interpretados en el Cliente 37

38 <link rel="stylesheet" href="css/font.css" /> <link rel="stylesheet" href="css/carform.css" /> <script type="text/javascript" src="js/showcar.js"></script> </head> <body> <header id="insetbgd"> <h1>ejemplo del uso de objetos</h1> </header> <section> <article> <form name="frmcar" id="frmcar"> <fieldset id="fldcar" class="group"> <legend><span class="labelgroup">datos del carro</span></legend> <label for="selfab">fabricante: </label> <select name="selfab" id="selfab"> <option value="toyota">toyota</option> <option value="nissan">nissan</option> <option value="hyundai">hyundai</option> <option value="volkswagen">volkswagen</option> <option value="chevrolet">chevrolet</option> <option value="honda">honda</option> <option value="mitsubishi">mitsubishi</option> </select> <label for="selmod">modelo: </label> <select name="selmod" id="selmod"> <option value="corolla">corolla</option> <option value="echo">echo</option> <option value="yaris">yaris</option> <option value="avensis">avensis</option> <option value="camry">camry</option> <option value="land Cruiser">Land Cruiser</option> <option value="4 Runner">4 Runner</option> <option value="hilux">hilux</option> </select> <label for="radcolor" class="colores">color:</label><br /> <input type="radio" value="blanco" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">blanco</label><br> <input type="radio" value="negro" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">negro</label><br> <input type="radio" value="gris" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">gris</label><br> <input type="radio" value="azul" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">azul</label><br> <input type="radio" value="verde" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">verde</label><br> <input type="radio" value="rojo" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">rojo</label><br> <input type="radio" value="amarillo" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">amarillo</label><br> <input type="radio" value="beige" alt="marque el color del carro" id="radcolor" name="radcolor" /> <label for="radcolor" class="colores">beige</label> <br /> <label for="txtanio">año: </label> <input type="number" name="txtanio" placeholder="2014" maxlength="4" /> <input type="button" name="btnenviar" id="enviar" value="enviar" /> </fieldset> Lenguajes Interpretados en el Cliente 38

39 </form> </article> </section> </body> </html> Guión 2: showcar.js //Registrar evento click al presionar botones de envío //y evento change al cambiar de opción en el elemento select function iniciar(){ var select = document.getelementbyid("selfab"); var button = document.getelementbyid("enviar"); //Al producirse en evento change en el elemento select //invocar a la función addoptions para volver a llenar //el select dependiente con los datos adecuados if(select.addeventlistener){ select.addeventlistener("change", function(){ addoptions(marcas[this.options[this.selectedindex].text], document.frmcar.selmod);, false); else{ select.attachevent("onchange", function(){ addoptions(marcas[this.options[this.selectedindex].text], document.frmcar.selmod); ); //Al producirse un click sobre el botón de envío //invocar los métodos del objeto carro que mostrarán //los valores ingresados en el formulario if(button.addeventlistener){ button.addeventlistener("click", function(){ var seleccion = showradioselected(document.frmcar.radcolor); carro.pedido(document.frmcar.selfab.value, document.frmcar.selmod.value, seleccion, document.frmcar.txtanio.value); carro.mostrar();, false); else{ button.attachevent("onclik", function(){ var seleccion = showradioselected(document.frmcar.radcolor); carro.pedido(document.frmcar.selfab.value, seleccion, document.frmcar.txtanio.value); carro.mostrar(); ); document.frmcar.selmod.value, //Inicializando matriz para manejar las marcas y sus respectivos modelos var marcas = new Array(7); marcas["toyota"] = ["Corolla", "Echo", "Yaris", "Avensis", "Camry", "Land Cruiser", "4 Runner", "Hilux"]; marcas["nissan"] = ["Sentra", "Platina", "Almera", "Altima", "Tiida", "Pathfinder", "Patrol", "X-Trail", "Frontier"]; marcas["hyundai"] = ["Elantra", "Accent", "Coupé", "Santa Fe", "i30"]; marcas["volkswagen"] = ["Golf", "Jetta", "Passat", "Phaeton", "Thunder Bunny", "Touareg", "Saveiro"]; marcas["chevrolet"] = ["Optra", "Aveo", "Cobalt", "Malibu", "Corvette", "Chevy", "Avalanche", "Trailblazer"]; marcas["honda"] = ["Civic", "Acura", "Accord", "Fit", "Odyssey", "CR-V", "Pilot", "RidgeLine"]; Lenguajes Interpretados en el Cliente 39

40 marcas["mitsubishi"] = ["Lancer", "Galant", "Eclipse", "Montero", "Nativa", "Outlander", "L200"]; //Creando el objeto carro con el constructor Object() var carro = new Object(); //Propiedades del objeto carro.fabricante = ""; carro.modelo = ""; carro.color = ""; carro.anio = ""; //Métodos del objeto carro.pedido = function(fab, mod, col, an){ carro.fabricante = fab; carro.modelo = mod; carro.color = col; carro.anio = an; carro.mostrar = function(){ document.write("<!doctype html>\n"); document.write("<html lang=\"es\">\n"); document.write("<head>\n\t"); document.write("<title>datos del carro</title>\n"); document.write("<meta charset=\"utf-8\" />"); document.write("<link rel=\"stylesheet\" href=\"css/carinfo.css\"/>\n"); document.write("</head>\n"); document.write("<body>\n"); document.write("<table class=\"carinfo\"><tr>\n"); document.write("<th colspan=\"2\">datos del carro</th>\n"); document.write("<tr><td>fabricante: </td>\n"); document.write("<td>" + carro.fabricante + "</td></tr>\n"); document.write("<tr><td>modelo: </td>\n"); document.write("<td>" + carro.modelo + "</td></tr>\n"); document.write("<tr><td>color: </td>\n"); document.write("<td>" + carro.color + "</td></tr>\n"); document.write("<tr><td>año: </td>\n"); document.write("<td>" + carro.anio + "</td></tr>\n"); document.write("</tr></table>\n"); document.write("</head>\n"); document.write("</html>\n"); function showradioselected(radiogroup){ var seleccionado; var numradios = radiogroup.length; for(var i=0; i<numradios; i++){ if(radiogroup[i].checked){ seleccionado = radiogroup[i].value; return seleccionado; function removeoptions(optionmenu){ for(i=0; i<optionmenu.options.length; i++){ optionmenu.options[i] = null; function addoptions(optionlist, optionmenu){ var i=0; removeoptions(optionmenu); //Limpia las opciones for(i=0; i<optionlist.length; i++){ optionmenu[i] = new Option(optionList[i], optionlist[i]); Lenguajes Interpretados en el Cliente 40

41 //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: { font-family: 'LatoBlack'; src: url('../fonts/lato/lato-black.eot'); /* IE9 Compat Modes */ src: url('../fonts/lato/lato-black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato/lato-black.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato/lato-black.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: { font-family: 'LatoLight'; src: url('../fonts/lato/lato-light.eot'); /* IE9 Compat Modes */ src: url('../fonts/lato/lato-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato/lato-light.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato/lato-light.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizelegibility; Guión 4: carform.css body { font-size: 15px; #insetbgd { background: #012266; /* Old browsers */ background: -moz-linear-gradient(top, # %, #426dc9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#012266), color-stop(100%,#426dc9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, # %,#426dc9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, # %,#426dc9 100%); /* Opera */ background: -ms-linear-gradient(top, # %,#426dc9 100%); /* IE10+ */ background: linear-gradient(to bottom, # %,#426dc9 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#012266', endcolorstr='#426dc9',gradienttype=0 ); /* IE6-9 */ margin: 0 auto; height: 100px; width: 650px; #insetbgd h1 { color: #191970; font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 3em; Lenguajes Interpretados en el Cliente 41

42 padding-top: 20px; text-align: center; text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0-1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px; form { margin-bottom: 22px; margin: 20px auto; width: 42%; fieldset { border-color: #012266; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;.group input,.group select,.group textarea { font: 300 1em/22px "LatoLight","Open Sans","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;.group span.labelgroup { background: #012266; /* Old browsers */ background: -moz-linear-gradient(top, # %, #426dc9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#012266), color-stop(100%,#426dc9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, # %,#426dc9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, # %,#426dc9 100%); /* Opera */ background: -ms-linear-gradient(top, # %,#426dc9 100%); /* IE10+ */ background: linear-gradient(to bottom, # %,#426dc9 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#012266', endcolorstr='#426dc9',gradienttype=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; -ms-border-top-left-radius: 10px; -ms-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #ece9ef; display: block; font: Bold 1em/24px "LatoBlack","Open Sans","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; padding: 6px 8px;.group label { color: #191970; cursor: pointer; Lenguajes Interpretados en el Cliente 42

43 font-family: "LatoLight","Open Sans","Helvetica Neue",Helvetica,Arial,"Liberation Sans"; font-weight: 600;.group label.colores { display: inline-block; width: 25%;.group input,.group select,.group textarea { border: 1px solid #c6c9cc; border-radius: 5px; color: #426dc9; display: block; margin: 5px 0 8px 0; padding: 3px 4px;.group input,.group textarea { width: 100%;.group input[type="radio"],.group input[type="checkbox"] { display: inline-block; width: 4%;.group input[type="number"] { width: 12%;.group select { height: 28px; width: auto;.group textarea { height: 78px;.group input[type="button"] { background: #FF6347; border: 0; color: #f6f3f9; font-size: 0.9em; padding: 8px 16px; width: 26%;.group input[type="button"]:hover { background: #FF4500; color: #f6f3f9; Guión 5: carinfo.css table.carinfo { border-color: #999999; Lenguajes Interpretados en el Cliente 43

44 border-collapse: collapse; border-width: 1px; color:#333333; font-family: verdana,arial,sans-serif; font-size:11px; margin: 26px auto; width: 24%; table.carinfo th { padding: 6px 8px; background: #d5e3e4; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2njzgvlmcigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #d5e3e4 0%, #ccdee0 40%, #b3c8cc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0), color-stop(100%,#b3c8cc)); background: -webkit-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -o-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -ms-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); border: 1px solid #999999; table.carinfo td { padding: 6px 8px; background: #ebecda; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2uwztbjniigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ebecda 0%, #e0e0c6 40%, #ceceb7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebecda), color-stop(40%,#e0e0c6), color-stop(100%,#ceceb7)); background: -webkit-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -o-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -ms-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: linear-gradient(to bottom, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); border: 1px solid #999999; table.carinfo th p{ margin:0px; padding:8px; border-top: 1px solid #eefafc; border-bottom:0px; border-left: 1px solid #eefafc; border-right:0px; Lenguajes Interpretados en el Cliente 44

45 table.carinfo td p{ margin:0px; padding:8px; border-top: 1px solid #fcfdec; border-bottom:0px; border-left: 1px solid #fcfdec;; border-right:0px; Resultado en el navegador: Ejemplo #6: El siguiente ejemplo simula el proceso de matrícula de un alumno. Para ello se llenan los campos de un formulario con datos básicos. Con un script JS se obtienen los datos ingresados en los campos del formulario y se crean propiedades para un Guión 1: matricula.html <!DOCTYPE html> <html lang="es"> <head> <title>crear y editar tablas con JS</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/modernform.css" /> <script type="text/javascript" src="js/alumnoudb.js"></script>   </head> <body> <div class="container"> <section class="tabblue"> <ul class="tabs blue"> Lenguajes Interpretados en el Cliente 45

46 <li> <input name="tabs blue" id="tab1" checked="" type="radio"> <label for="tab1">datos del alumno</label> <div id="tab-content1" class="tab-content"> <p> Ingresa los siguientes datos para completar tu registro. </p> <form name="frmmat" id="pais">  <span class="tabaddon"><i class="fa fa-user fa-2x"></i></span> <input type="text" name="txtname" id="txtname" required="required" placeholder="(su nombre)" class="field" /> <span class="tabaddon"><i class="fa fa-envelope fa-2x"></i></span> <input type="text" name="txtlastname" id="txtlastname" required="required" placeholder="(su apellido)" class="field" /> <span class="tabaddon"><i class="fa fa-lock fa-2x"></i></span> <input type="number" name="txtage" id="txtage" required="required" placeholder="(su edad)" class="field" /> <div class="accounttype"> <p>género:</p> <input type="radio" value="masculino" id="radioone" name="chkgender" checked="checked" /> <label for="radioone" class="radio" chec>masculino</label> <input type="radio" value="femenino" id="radiotwo" name="chkgender" /> <label for="radiotwo" class="radio">femenino</label> </div> <span class="tabaddon"><i class="fa fa-degree fa-2x"></i></span> <select name="seldegree" id="seldegree"> <option disabled="" selected="" value="0">(seleccione una carrera)</option> <option value="ingeniería en Computación">Ingeniería en Computación</option> <option value="ingeniería en Mecatrónica">Ingeniería en Mecatrónica</option> <option value="ingeniería Industrial">Ingeniería Industrial</option> <option value="ingeniería Biomédica">Ingeniería Biomédica</option> <option value="ingeniería en Telecomunicaciones">Ingeniería en Telecomunicaciones</option> <option value="ingeniería Aeronáutica">Ingeniería Aeronáutica</option> <option value="licenciatura en Mercadotecnia">Licenciatura en Mercadotecnia</option> <option value="licenciatura en Idiomas">Licenciatura en Idiomas</option> <option value="licenciatura de Diseño Gráfico">Licenciatura de Diseño Gráfico</option> <option value="licenciatura en Comunicación">Licenciatura en Comunicación</option> <option value="licenciatura en Administración de Empresas">Licenciatura en Administración de Empresas</option> <option value="técnico en Computación">Técnico en Computación</option> <option value="técnico en Multimedia">Técnico en Multimedia</option> <option value="técnico en Ortesis y Prótesis">Técnico en Ortesis y Prótesis</option> </select> <div class="btn"> <input type="button" name="btnsend" id="btnsend" value="matricular" /> </div> Lenguajes Interpretados en el Cliente 46

47 </form> </div> </li> </ul> </section> </div>   </body> </html> Guión 2: alumnoudb.js //Registrar evento click al presionar el botón de envío function iniciar(){ var btnenviar = document.getelementbyid("btnsend"); //Al producirse un click sobre el botón de envío //invocar los métodos del objeto carro que mostrarán //los valores ingresados en el formulario if(btnenviar.addeventlistener){ btnenviar.addeventlistener("click", function(){ var chkvalue, selvalue, nuevoalumno; Lenguajes Interpretados en el Cliente 47

48 var radiofield = document.frmmat.elements["chkgender"]; for(var i=0; i<radiofield.length; i++){ if(radiofield[i].checked){ chkvalue = radiofield[i].value; selvalue = document.frmmat.seldegree.options[frmmat.seldegree.selectedindex].value; nuevoalumno = new alumnoudb(document.frmmat.txtname.value, document.frmmat.txtlastname.value, document.frmmat.txtage.value, chkvalue, selvalue); nuevoalumno.matricular(); nuevoalumno.imprimir();, false); else{ btnenviar.attachevent("onclik", function(){ var chkvalue, nuevoalumno; var radiofield = document.frmmat.elements["chkgender"]; for(var i=0; i<radiofield.length; i++){ if(radiofield[i].checked){ chkvalue = radiofield[i].value; selvalue = document.frmmat.seldegree.options[frmmat.seldegree.selectedindex].value; nuevoalumno = new alumnoudb(document.frmmat.txtname.value, document.frmmat.txtlastname.value, document.frmmat.txtage.value, chkvalue, selvalue); nuevoalumno.matricular(); nuevoalumno.imprimir(); ); //Definiendo la clase alumnoudb haciendo uso de sintaxis de función function alumnoudb(nombre, apellido, edad, genero, carrera){ //Propiedades de la clase this.nombre = nombre; this.apellido = apellido; this.edad = edad; this.genero = genero; this.carrera = carrera; this.numcarnet = null; //Métodos de la clase this.matricular = function(){ var fecha = new Date(); var year = fecha.getfullyear(); var day = fecha.getdate(); var sec = fecha.getseconds(); this.numcarnet = this.nombre.substring(0,1) + this.apellido.substring(0,1) + this.formato(sec) + this.formato(day) + year; this.imprimir = function(){ document.write("<!doctype html>\n"); document.write("<html lang=\"es\">\n"); document.write("<head>\n\t"); document.write("<title>alumno matriculado</title>\n"); document.write("<meta charset=\"utf-8\" />"); document.write("<link rel=\"stylesheet\" href=\"css/infoalumno.css\"/>\n"); document.write("</head>\n"); document.write("<body>\n"); document.write("<table class=\"carinfo\"><tr>\n"); document.write("<th colspan=\"2\">datos del alumno</th>\n"); document.write("<tr><td>carnet: </td>\n"); Lenguajes Interpretados en el Cliente 48

49 document.write("<td>" + this.numcarnet + "</td></tr>\n"); document.write("<tr><td>nombre: </td>\n"); document.write("<td>" + this.nombre + " " + this.apellido + "</td></tr>\n"); document.write("<tr><td>edad: </td>\n"); document.write("<td>" + this.edad + "</td></tr>\n"); document.write("<tr><td>género: </td>\n"); document.write("<td>" + this.genero + "</td></tr>\n"); document.write("<tr><td>carrera: </td>\n"); document.write("<td>" + this.carrera + "</td></tr>\n"); document.write("</tr></table>\n"); document.write("</head>\n"); document.write("</html>\n"); this.formato = function(valor){ if(valor<10) valor = "0" + valor; return valor; //Asociando función que manejará el evento load al cargar la página if(window.addeventlistener){ window.addeventlistener("load", iniciar, false); else{ window.attachevent("onload", iniciar); Guión 3: url( * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; body { background: #FFFFFF; color: #fff; font-family: 'Lato',Arial,sans-serif; text-align: left; header { border-bottom: 1px solid #EDEFF0; color: #009EE0; font-family: 'Lato',Arial,sans-serif; height: 100px; line-height: 100px; margin: 0 auto; max-width: 100%; position: relative; text-align: center; h1 { color:#2d2b2c; Lenguajes Interpretados en el Cliente 49

50 font-size: 2.625em; font-weight: 300; line-height: 1.3; line-height:100px; margin: 0; small { bottom: 25px; color: #EF0C72; font-size: 18px; font-weight: bold; position: relative;.container { float: left; height: 481px; padding: 20px 0; width: 100%; section { position: relative; height: 442px; margin-left: 50%; left: -197px; width: { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; /* Anulando estilos de campos de formulario cuando se obtenga el foco */ :focus {outline:none.fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor:pointer;.fa:hover{ -moz-transform:scale(1.2); /* Firefox */ -ms-transform:scale(1.2); /* IE 9 */ -o-transform:scale(1.2); /* Opera */ -webkit-transform:scale(1.2); /* Safari and Chrome */ transform:scale(1.2); -ms-transition: 0.5s; -moz-transition: 0.5s; Lenguajes Interpretados en el Cliente 50

51 -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; /* makes the font 33% larger relative to the icon container */.fa-2x { font-size: 20px; line-height:40px; /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */.fa-user:before { content: "\f007";.fa-envelope:before { content: "\f007";.fa-lock:before { content: "\f113";.fa-facebook:before { content: "\f02e";.fa-twitter:before { content: "\f099";.fa-degree:before { content: "\f02e";.tabs h1 { font-size: 32px; font-family: 'Roboto'; margin-bottom:15px;.tabs p { font-size: 14px; line-height: 20px; margin-bottom: 8px; /* Each Tab CSS to make Radio button Work*/ /* Blue Color Tab - If you want to used blue tab, just used following css*/ /******************** START ********************/.tabs.blue { float: left; list-style: none; position: relative; text-align: left; width: 394px;.tabs.blue li { float: right; display: block;.tabs.blue input[type="radio"] { Lenguajes Interpretados en el Cliente 51

52 left: -9999px; position: absolute; top: -9999px;.tabs.blue label { display: block; padding: 14px 31px; font-size: 16px; font-weight: normal; cursor: pointer; position: relative; top: 5px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;.tabs.blue.tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 15px; position: absolute; top: 53px; left: 0;.tabs.blue [id^="tab"]:checked + label { padding-top: 17px; top: 5px;.tabs.blue [id^="tab"]:checked ~ [id^="tab-content"] { display: block; /* TAB COLOR SCHEME FOR BLUE */.tabblue.tabs label { background: #16b3f5;.tabblue.fa:hover{ color:#009ee0;.tabblue.tabs label:hover { background: #009EE0;.tabblue.tabs.tab-content { background: #009EE0;.tabblue.tabs [id^="tab"]:checked + label { background: #009EE0; Lenguajes Interpretados en el Cliente 52

53 .tabblue.tabs input[type="button"] { background:#3a57af; color: #f0f3f6;.tabblue.tabs input[type="button"]:hover { background:#c4f1fe; color: #060930;.tabblue.tabaddon { color: #16B3F5; /******************** END ********************/ /* TAB Form */.tabs input[type="text"],.tabs input[type="number"],.tabs input[type="date"],.tabs input[type="password"],.tabs input[type=" "],.tabs select { border: medium none; color: #757575; height: 40px; line-height: 40px; margin-bottom: 10px; padding: 10px; width: 89%; /* Estilos para los input type=radio del género */.tabs.accounttype input[type="radio"] { visibility: hidden;.tabs.accounttype label.radio { cursor: pointer; display: inline-block; margin-bottom: 15px; overflow: visible; position: relative; text-indent: 20px;.tabs.accounttype label.radio:before { background: #778899; -ms-border-radius: 100%; -o-border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 10%; content:''; position: absolute; top: 16px; left: 6px; height: 20px; width: 20px;.tabs.accounttype label.radio:after { background: transparent; Lenguajes Interpretados en el Cliente 53

54 border: 3px solid #ffffff; border-top: none; border-right: none; content: ''; height: 0.25em; left: 10px; opacity: 0; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 22px; width: 0.5em;.tabs.accounttype input[type="radio"]:checked + label:after { opacity: 1; /* Estilos del elemento select de carrera */.tabs select { float:left; width: 89%;.tabs select.last { margin-right:0px;.tabs.btn { float: left; margin-top: 15px; width: 100%;.tabs.btn em{ font-size:12px;.tabs input[type="button"]{ display:block; float:right; cursor:pointer; border-top: 2px solid #a3ceda; border-left: 2px solid #a3ceda; border-right: 2px solid #4f6267; border-bottom: 2px solid #4f6267; padding: 10px 20px!important; font-size: 14px!important; background-color: #c4f1fe; font-weight: bold; color: #2d525d; text-decoration:none;.tabs input[type="button"]:hover{ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; Lenguajes Interpretados en el Cliente 54

55 .tabs h4{ font-style:italic; text-align:center; margin-bottom:10px; font-weight:normal;.tabaddon { background: none repeat scroll 0 0 #FFFFFF; border-right: 1px solid #ebebeb; float: left; height: 40px; text-align: center; width: 40px;.tabs.social { float:left; margin-bottom:10px; width:100%;.tabs.social a { color:#fff; float:left; font-size:14px; padding: 10px 65px 10px 30px; text-decoration:none;.tabs.social.fa{ margin-right:25px;.tabs.social.facebook{ background: none repeat scroll 0 0 #3B5998;.tabs.social.facebook:hover{ background:#3e5fa4; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s;.tabs.social.twitter{ background: none repeat scroll 0 0 #16B3F5;.tabs.social.twitter:hover{ background:#34bbf4; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; Lenguajes Interpretados en el Cliente 55

56 Guión 4: infoalumno.css table.carinfo { border-color: #999999; border-collapse: collapse; border-width: 1px; color:#333333; font-family: verdana,arial,sans-serif; font-size:11px; margin: 26px auto; width: 42%; table.carinfo th { padding: 6px 8px; background: #d5e3e4; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2njzgvlmcigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #d5e3e4 0%, #ccdee0 40%, #b3c8cc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0), color-stop(100%,#b3c8cc)); background: -webkit-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -o-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: -ms-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); background: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%); border: 1px solid #999999; table.carinfo td { padding: 6px 8px; background: #ebecda; background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3 LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBn cmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogic AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rv ccbvzmzzzxq9ijqwjsigc3rvcc1jb2xvcj0ii2uwztbjniigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzm ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll bnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2 VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ebecda 0%, #e0e0c6 40%, #ceceb7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebecda), color-stop(40%,#e0e0c6), color-stop(100%,#ceceb7)); background: -webkit-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -o-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: -ms-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); background: linear-gradient(to bottom, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%); border: 1px solid #999999; table.carinfo th p{ margin:0px; padding:8px; border-top: 1px solid #eefafc; border-bottom:0px; Lenguajes Interpretados en el Cliente 56

57 border-left: 1px solid #eefafc; border-right:0px; table.carinfo td p{ margin:0px; padding:8px; border-top: 1px solid #fcfdec; border-bottom:0px; border-left: 1px solid #fcfdec;; border-right:0px; Resultado en el navegador: V. DISCUSION DE RESULTADOS 1. Realice una aplicación orientada a objetos llamada potencia. Su aplicación debe crear una clase utilizando funciones, en donde las propiedades deben ser tres: la base y la potencia que deben obtener sus valores de dos argumentos enviados a la definición de la función que hará las veces de la clase. Una tercera propiedad para obtener la potencia de elevar la base a la potencia recibida. Su clase debe poseer dos métodos, uno para retornar el cálculo de la potencia con las propiedades de la clase y otro para mostrar mediante un cuadro de alerta el resultado del método del cálculo de la potencia. Debe realizar una interfaz de formulario apropiada para este problema. 2. Siguiendo la metodología de los ejemplos 5 y 6 (función anónima u objeto Object) del procedimiento, cree un objeto llamado miembro que sirva para registrar usuarios en un sitio web. El usuario debe ingresar cierta información básica, como la que se muestra en el formulario de la siguiente imagen y al simular el envío de los datos un script JS debe almacenar la información ingresada en las propiedades del objeto registro que deben coincidir con los nombres o ids de los campos del formulario. Además de esos campos, debe existir una propiedad identificadora en el objeto que deberá crear de la siguiente forma: las iniciales de los dos apellidos (si sólo tiene un apellido duplicar la primera letra del primer apellido) concatenadas con el año Lenguajes Interpretados en el Cliente 57