Cómo validar un formulario en una página web, en el lado del cliente con Javascript. Se comprueban todos sus campos y si son correctos, se envía el formulario. Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía el formulario. Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde deben haber seleccionado un valor. Referencia: para comprender este ejercicio hace falta conocer el trabajo con formularios con Javascript. Podemos aprender también Javascript desde cero http://www.desarrolloweb.com/javascript/, si es que fuera necesario. Se puede ver el ejemplo en funcionamiento para hacerse una idea más exacta del objetivo buscado. El código del formulario El formulario con el que vamos a trabajar es el siguiente: <form name="fvalida"> <table> <tr> <td>Nombre: </td> <td><input type="text" name="nombre" size="30" maxlength="100"></td> </tr> <tr> <td>Edad: </td> <td><input type="text" name="edad" size="3" maxlength="2"></td> </tr> <tr> <td>Interés:</td> <td> <select name=interes> <option value="Elegir">Elegir <option value="Comercial">Contacto comercial <option value="Clientes">Atención al cliente <option value="Proveedores">Contacto de proveedores </select> </td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td> </tr> </table> </form> Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son: • El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript. • El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo fue correcto. Función Javascript para validar el formulario Ahora veremos la función que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y abandona la función retornando el valor 0. Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del formulario. Veamos la función entera, aunque luego la expliquemos por partes. function valida_envia(){ //valido el nombre if (document.fvalida.nombre.value.length==0){ alert("Tiene que escribir su nombre") document.fvalida.nombre.focus() return 0; } //valido la edad. tiene que ser entero mayor que 18 edad = document.fvalida.edad.value edad = validarEntero(edad) document.fvalida.edad.value=edad if (edad==""){ alert("Tiene que introducir un número entero en su edad.") document.fvalida.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 años.") document.fvalida.edad.focus() return 0; } } //valido el interés if (document.fvalida.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.") document.fvalida.interes.focus() return 0; } //el formulario se envia alert("Muchas gracias por enviar el formulario"); document.fvalida.submit(); } En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y se sale de la función devolviendo el valor 0. Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos una tecla del teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo de texto, al operar con el teclado estaremos escribiendo en ese campo de texto. La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es mayor que 18. Para hacer esta validación nos vamos a apoyar en una función que ya hemos visto en otro artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario. Esa función devuelve un string vació en caso de que no sea un entero y el propio entero, si es que lo era. Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la función es un string vacío. En ese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sitúa el foco y se sale de la función. En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario -entonces el valor sería mayor o igual que 18-, se continúa con las comprobaciones. Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opción menos la primera. Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el índice seleccionado en el menú desplegable. El primer campo tiene el índice 0, el segundo el índice 1... Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario y se sale de la función. Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea. Para enviar el formulario se hace una llamada al método submit() de dicho formulario. Conclusión Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos conocimientos, ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo, siempre que sigamos un esquema similar para cada uno de los campos. 1. <!------------- procesa.php --------------> 2. <html> 3. <head> 4. <title>Ejemplo en PHP</title> 5. </head> 6. <body> 7. 8. <?php 9. if(!ereg("^[0-9]{9}$",$val[0])) 10. $err[0] = "<span+style=color:red;>+Ingresa+9+caracteres+numericos</span>"; 11. if(!ereg("^[0-9]{1,2}$",$val[2])) 12. $err[2] = "<span+style=color:red;>+Ingresa+una+edad+valida</span>"; 13. if(!ereg("^.+@.+\\..+$",$val[3])) 14. 15. $err[3] = "<span+style=color:red;>+Ingresa+un+e-mail+valido</span>"; 16. 17. if(!ereg("^[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}$",$val[4])) 18. 19. $err[4] = "<span+style=color:red;>+Debe+tener+la+forma:+xx-xx-xx-xx</span>"; 20. 21. if(!ereg("^[0-9]*\.?[0-9]*$",$val[5])) 22. 23. $err[5] = "<span+style=color:red;>+No+es+una+cantidad+valida</span>"; 24. $param_valores ="val[0]=$val[0]&val[1]=$val[1]&val[2]=$val[2]&val[3]=$val[3]&val[4]=$val[4]&val[5]=$val[5]"; 25. 26. $param_errores ="err[0]=$err[0]&err[1]=$err[1]&err[2]=$err[2]&err[3]=$err[3]&err[4]=$err[4]&err[5]=$err[5]"; 27. if(in_array("$error",$err)){ 28. 29. echo "<script language='javascript'>document.location.href = 'captura.php?$param_valores&$param_errores';</script>"; 30. 31. } 32. 33. else 34. 35. echo "Tus datos fueron validados correctamente \n"; 36. ?> 37. </body> 38. </html> 39. Este script hace las siguientes revisiones • Que el campo 1 reciba un número de 9 dígitos. • Que el campo 3 reciba un número de 1 o 2 dígitos. • Que el campo 4 reciba una dirección de e-mail válida. • Que el campo 5 reciba un número telefónico con el formato xx-xx-xx-xx. • Que el campo 6 reciba un número de punto flotante no negativo. <script language="javascript" type="text/javascript"> //VALIDACION DE FORMULARIOS //Autor: Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net function validacion(formulario) { var er_nombre = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/ //letras, '.' y '-' o vacio var er_telefono = /^([0-9\s\+\-])+$/ //numeros, espacios, + o - //fechas, formato dd/mm/aaaa o d/m/aa var er_mes31dias = /^([1-3]0|[0-2][1-9]|31|[0-9])\/(1|01|3|03|5|05|7|07|8|08|10|12)\/(1999|20[0-1][0-9]|2020)$/ var er_mes30dias = /^([1-3]0|[0-2][1-9]|[0-9])\/(4|04|6|06|9|09|11)\/(1999|20[0-1][0-9]|2020)$/ var er_mes28dias = /^([1-2]0|[0-2][1-8]|[0-1]9|[0-9])\/(02|2)\/(1999|200[1-3]|200[5-7]|2009|201[0-1]|201[3-5]|201[7-9])$/ var er_mes29dias = /^([1-2]0|[0-2][1-9]|[0-9])\/(02|2)\/(2000|2004|2008|2012|2016|2020)$/ //direccion de correo electronico var er_email = /^(.+\@.+\..+)$/ var x //comprueba 50 caracteres maximo for(x = 1; x < 5; x++) { if (formulario.elements[x].value.length > 50) { alert('La lontitud máxima permitida para cualquier campo es de 10 caracteres.') return false } } //comprueba campo de nombre if(!er_nombre.test(formulario.nombre.value)) { alert('Contenido del campo NOMBRE no válido.') return false } //comprueba campos de telefonos (permite campos vacios y guiones) if( !er_telefono.test(formulario.telefono.value) ) { alert('Contenido del campo TELEFONO no válido.') return false } //comprueba la fecha segun calendario (hasta el 2020, ojo) if (!(er_mes31dias.test(formulario.fecha.value) || er_mes30dias.test(formulario.fecha.value) || er_mes29dias.test(formulario.fecha.value) || er_mes28dias.test(formulario.fecha.value))) { alert('Contenido del campo FECHA no válido.') return false } //comprueba campo de email if(!er_email.test(formulario.email.value)) { alert('Contenido del campo E-MAIL no válido.') return false } alert('Los campos introducidos son CORRECTOS.') return false //cambiar por return true para ejecutar la accion del formulario } </script> ---------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> //VALIDACION DE CAMPOS DE LONGITUD FIJA //Autor: Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net function validacion3(formulario) { var er_cp = /(^([0-9]{5,5})|^)$/ //5 numeros o cadena vacia var er_dni = /(^([0-9]{8,8}\-[A-Z])|^)$/ //8 números, un guion y una letra, o cadena vacia //comprueba campo codigo postal if(!er_cp.test(formulario.cp.value)) { alert('Contenido del campo CODIGO POSTAL no válido.') return false } //comprueba campo dni if(!er_dni.test(formulario.dni.value)) { alert('Contenido del campo DNI no válido.') return false } alert('Los campos introducidos son CORRECTOS.') return false //cambiar por return true para ejecutar la accion del formulario } </script> ---------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> //VALIDACION DE NUMEROS ENTEROS // //Autor: Iván Nieto Pérez //Basado en un ejemplo de instibat //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.com function validar(formu) { //convierte en valores enteros los datos del formulario (base 10) var1 = parseInt(formu.pr1.value, 10) var2 = parseInt(formu.pr2.value, 10) //valida que sean numeros if ( isNaN(var1) || isNaN(var2) ) { alert("Debe cumplimentar los dos campos precio\ncon valores numéricos.") return false //valida que sean positivos } else if (var1 < 0 || var2 < 0) { alert("Los valores numéricos introducidos\ndeben ser positivos.") return false //valida que el primero es menor que el segundo } else if( var1 > var2 ) { alert("El primer precio tiene que ser\nmenor o igual que el segundo.") return false //ok, envio formulario } else { alert("OK, los valores introducidos son correctos.") return false //IMPORTANTE: eliminar la linea anterior y quitar el // de la siguiente para realizar el envio de verdad //return true } } </script> --------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> // Validación de campos de hora By Vanessa Jaen // // Este script y otros muchos pueden // descarse on-line de forma gratuita // en El Código: www.elcodigo.net function ValidaHora( formulario ) { var er_fh = /^(1|01|2|02|3|03|4|04|5|05|6|06|7|07|8|08|9|09|10|11|12)\:([0-5]0|[0-5][1-9])\ (AM|PM)$/ if( formulario.hora.value == "" ) { alert("Introduzca la hora.") return false } if ( !(er_fh.test( formulario.hora.value )) ) { alert("El dato en el campo hora no es válido.") return false } alert("¡Campo de hora correcto!") return true } </script> --------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> // Valida Fecha By Luciano 1998 // Uso: Simple... se debe pasar la cadena de la fecha y devuelve false si no es válida... // El Formato es dd-mm-aaaa // Ejemplo: if (Validar('14-08-1981')==false) { alert('Entrada Incorrecta') } // Uso en formularios: onSubmit="return Validar(this.fecha.value)" // // Este script y otros muchos pueden // descarse on-line de forma gratuita // en El Código: www.elcodigo.net function Validar(Cadena){ var Fecha= new String(Cadena) // Crea un string var RealFecha= new Date() // Para sacar la fecha de hoy // Cadena Año var Ano= new String(Fecha.substring(Fecha.lastIndexOf("-")+1,Fecha.length)) // Cadena Mes var Mes= new String(Fecha.substring(Fecha.indexOf("-")+1,Fecha.lastIndexOf("-"))) // Cadena Día var Dia= new String(Fecha.substring(0,Fecha.indexOf("-"))) // Valido el año if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){ alert('Año inválido') return false } // Valido el Mes if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){ alert('Mes inválido') return false } // Valido el Dia if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){ alert('Día inválido') return false } if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) { if (Mes==2 && Dia > 28 || Dia>30) { alert('Día inválido') return false } } //para que envie los datos, quitar las 2 lineas siguientes alert("Fecha correcta.") return false } </script> ------------------------------------------------------------------------------------------------------ <script language="javascript" type="text/javascript"> //SALTO ENTRE CAMPOS PULSANDO ENTER //Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net //nombre del primer campo en la secuencia siguienteCampo = "campo1" //nombre del formlario nombreForm = "miFormulario" //funcion que gestiona el evento function TelcaPulsada( e ) { if ( window.event != null) //IE4+ tecla = window.event.keyCode; else if ( e != null ) //N4+ o W3C compatibles tecla = e.which; else return; if (tecla == 13) { //se pulso enter if ( siguienteCampo == 'fin' ) { //fin de la secuencia, hace el submit alert('Envio del formulario.') //eliminar este alert para uso normal return false //sustituir por return true para hacer el submit } else { //da el foco al siguiente campo eval('document.' + nombreForm + '.' + siguienteCampo + '.focus()') return false } } } document.onkeydown = TelcaPulsada; //asigna el evento pulsacion tecla a la funcion if (document.captureEvents) //netscape es especial: requiere activar la captura del evento document.captureEvents(Event.KEYDOWN) </script> ------------------------------------------------------------------------------------------------------------------ <script language="javascript" type="text/javascript"> //MAXIMIZACIÓN DE LA VENTANA EN QUE SE CARGA LA PÁGINA //Autor: Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net //posiciona en la esquina superior izquierda top.window.moveTo(0,0) if (document.all) { //si es el IE, usamos resizeTo para redimensionar top.window.resizeTo(screen.availWidth,screen.availHeight) } else if ( document.layers || document.getElementById ) { //si Navigator, modificamos los valores de outerHeight y outerWidth if ( top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth ) { top.window.outerWidth = screen.availWidth top.window.outerHeight = screen.availHeight } } </script> ---------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> //MENU DE NAVEGACION SIMPLE // //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net //ARRAYS MENUS var principal = new Array ( "Taller", "navegacion.html?menu1=taller", "Tutoriales", "navegacion.html?menu1=tutoriales", "Utilidades", "navegacion.html?menu1=utilidades", "", "navegacion.html?menu1=", "", "navegacion.html?menu1=" ) var taller = new Array ( "Ventanas", "navegacion.html?menu1=taller&menu2=ventanas", "Enlaces", "navegacion.html?menu1=taller&menu2=enlaces" ) var tutoriales = new Array ( "HTML", "navegacion.html?menu1=tutoriales&menu2=html" ) var utilidades = new Array ( "Editores", "navegacion.html?menu1=utilidades&menu2=editores", "Navegadores", "navegacion.html?menu1=utilidades&menu2=navegadores", "El Codigo", "navegacion.html?menu1=utilidades&menu2=http://www.elcodigo.net" ) //VARIABLES var index = ' class="menu"' //--------------------------------------------------------- function Enlace(ruta, item, pagina) { var enlace var ventana if (pagina.indexOf('navegacion')==-1) ventana = 'target="cen" ' else ventana = '' if ( pagina.indexOf(":") == -1 ) { //si la pagina no es una url http:// //y es la actual, no hay enlace enlace = (item != pagina? '<a class="menu" ' + ventana + 'href="' + ruta + pagina + '">' : '<span class="menu">') } else { //enlace con URL enlace = '<a class="menu" href="' + pagina + '">' } return enlace } //--------------------------------------------------------- function EnlaceOff(item, pagina) { return (item != pagina? '</a>' : '</span>') } //--------------------------------------------------------- function MenuNavegacion( ruta, item, paginas, nivel ) { numelem = paginas.length var menu = '' var pos = 0 var borde = (nivel == 2) ? 'style="border-top: thin dotted #000000;"' : '' //indexa hacia la derecha el segundo menu if ( nivel == 2 ) { while (principal[pos+1].indexOf(seleccion1) == -1 ) { pos += 2 } //ajuste posicion submenu while ( (pos + paginas.length) > (principal.length) ) { pos -= Math.floor(paginas.length / 2) if ( Math.floor(pos / 2) != (pos / 2)) { pos++ } } if ( pos > (principal.length - 2) ) { pos -= 2 } if ( pos < 0 ) { pos = 0 } for ( x = 0; x < pos; x=x+2 ) { menu += '<td valign="top" width="100" height="40"></td>' } } for ( x = 0; x < numelem; x=x+2 ) { menu += '<td valign="top" width="100" height="40" ' + borde + '>' if ( paginas[x+1] == "" ) { //posibilidad de añadir separadores aqui } else if (paginas[x+1].indexOf(item) != -1 ) { menu += '<strong class="seleccionado">' + paginas[x] + '</strong>\n' } else { menu += Enlace(ruta, item, paginas[x+1]) + paginas[x] + EnlaceOff(item, paginas[x+1]) + '\n' } menu += "</td>" } document.write(menu) } //--------------------------------------------------------- function getVar(nomb){ var url = document.location.href if ( url.indexOf(nomb) != -1 ) { posiBeg = url.indexOf("=", url.indexOf(nomb)) barre = url.indexOf("&", posiBeg) posiEnd = (barre != -1 ? barre : url.length) return url.substring(posiBeg+1,posiEnd) } else { //informar de la ausencia del parametro return '' } } //Recuper valores parametros seleccion1 = getVar('menu1') seleccion2 = getVar('menu2') </script> <script language="javascript" type="text/javascript"> //CALENDARIO //Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net function obtiene_fecha() { var fecha_actual = new Date() dia = fecha_actual.getDate() mes = fecha_actual.getMonth() + 1 anio = fecha_actual.getYear() if (anio < 100) anio = '19' + anio else if ( ( anio > 100 ) && ( anio < 999 ) ) { var cadena_anio = new String(anio) anio = '20' + cadena_anio.substring(1,3) } if (mes < 10) mes = '0' + mes if (dia < 10) dia = '0' + dia return (dia + "/" + mes + "/" + anio) } function calendario() { var x, y, fila, valor var fecha_actual = new Date() var dia_mes = fecha_actual.getDate() //dia del mes var mes = fecha_actual.getMonth() + 1 //mes del año var anio = fecha_actual.getYear() //año var dia_semana = fecha_actual.getDay() - 1 //dia de la semana (-1 para domingo, 0 para lunes, etc.) //array de dias que tiene cada mes dias_por_mes = new Array(12) dias_por_mes[0] = 31 dias_por_mes[1] = 28 dias_por_mes[2] = 31 dias_por_mes[3] = 30 dias_por_mes[4] = 31 dias_por_mes[5] = 30 dias_por_mes[6] = 31 dias_por_mes[7] = 31 dias_por_mes[8] = 30 dias_por_mes[9] = 31 dias_por_mes[10] = 30 dias_por_mes[11] = 31 //corrige dia de la semana if(dia_semana == -1) dia_semana = 6 //corrige dias de febrero si año bisiesto if((anio % 4) == 0) dias_por_mes[1]++ //crea matriz de datos matriz = new Array(6) for (fila = 0; fila < 6; fila++) matriz[fila] = new Array(7) //obtiene posición día 1 y = dia_semana + 1 for (x = dia_mes; x > 0; x--) { y-- if (y < 0) y = 6 } //guarda valores en variable matriz valor = 1 for (fila = 0; fila < 6; fila++) { for (x = 0; x < 7; x++) { if ((fila == 0) && (x < y)) { //valores vacíos primera fila matriz[fila][x] = "" } else if (valor > dias_por_mes[mes - 1]) { //valores vacíos última línea matriz[fila][x] = "" } else if (valor == dia_mes) { //valor día actual matriz[fila][x] = "<font color='#FF0000'><strong>" + valor + "</strong></font>" valor++ } else { matriz[fila][x] = valor //valores ocupados valor++ } } } //impresion del calendario document.write("<div align='center'><center>") document.write("") document.write("<table border='1' width='85%' cellspacing='1' cellpadding='5'>") document.write(" <tr>") document.write(" <td width='100%' colspan='7' align='center'><strong>" + obtiene_fecha() + "</strong></td>") document.write(" </tr>") document.write(" <tr>") //crea fila de nombres de días document.write(" <td width='14%' align='center'><small>Lunes</small></td>") document.write(" <td width='14%' align='center'><small>Martes</small></td>") document.write(" <td width='14%' align='center'><small>Miercoles</small></td>") document.write(" <td width='14%' align='center'><small>Jueves</small></td>") document.write(" <td width='14%' align='center'><small>Viernes</small></td>") document.write(" <td width='15%' align='center' bgcolor='#C0C0C0'><small>Sabado</small></td>") document.write(" <td width='15%' align='center' bgcolor='#C0C0C0'><small>Domingo</small></td>") document.write(" </tr>") for(fila = 0; fila < 6; fila++) { if ((matriz[fila][0] == "") && (matriz[fila][6] == "")) //no muestra ultima fila vacía break document.write(" <tr>") //crea fila de tabla calendario document.write(" <td width='14%' align='left'>" + matriz[fila][0] + "<p> </p></td>") document.write(" <td width='14%' align='left'>" + matriz[fila][1] + "<p> </p></td>") document.write(" <td width='14%' align='left'>" + matriz[fila][2] + "<p> </p></td>") document.write(" <td width='14%' align='left'>" + matriz[fila][3] + "<p> </p></td>") document.write(" <td width='14%' align='left'>" + matriz[fila][4] + "<p> </p></td>") document.write(" <td width='15%' align='left' bgcolor='#C0C0C0'>" + matriz[fila][5] + "<p> </p></td>") document.write(" <td width='15%' align='left' bgcolor='#C0C0C0'>" + matriz[fila][6] + "<p> </p></td>") document.write(" </tr>") } document.write("</table>") document.write("</center></div>") } </script> -------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> //RELOJ 24 HORAS // //Autor: Iván Nieto Pérez //Este script y otros muchos pueden //descarse on-line de forma gratuita //en El Código: www.elcodigo.net var RelojID24 = null var RelojEjecutandose24 = false function DetenerReloj24 (){ if(RelojEjecutandose24) clearTimeout(RelojID24) RelojEjecutandose24 = false } function MostrarHora24 () { var ahora = new Date() var horas = ahora.getHours() var minutos = ahora.getMinutes() var segundos = ahora.getSeconds() var ValorHora //establece las horas if (horas < 10) ValorHora = "0" + horas else ValorHora = "" + horas //establece los minutos if (minutos < 10) ValorHora += ":0" + minutos else ValorHora += ":" + minutos //establece los segundos if (segundos < 10) ValorHora += ":0" + segundos else ValorHora += ":" + segundos document.reloj24.digitos.value = ValorHora //si se desea tener el reloj en la barra de estado, reemplazar la anterior por esta //window.status = ValorHora RelojID24 = setTimeout("MostrarHora24()",1000) RelojEjecutandose24 = true } function IniciarReloj24 () { DetenerReloj24() MostrarHora24() } window.onload = IniciarReloj24; if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents document.captureEvents(Event.LOAD) } </script> -------------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> function tocarMidi() { //fichero de sonido var fichero_sonido = "/ejemplos/javascript/spring.mid" //0 una sola vez //-1 en bucle var repeticion = "-1" //true oculta el panel //false muestra el panel var ocultar = "false" //tamaño del panel (pixels) var ancho = 150 var alto = 100 //true reproduccion automatica //false reproduccion al pulsar un boton var bucle = "true" document.write('<EMBED SRC="' + fichero_sonido +'" hidden=' + ocultar + ' autostart=' + bucle + ' loop=' + repeticion +' width=' + ancho + ' height=' + alto + '>') } </script> ---------------------------------------------------------------------------------------------------------- <!-- Para reproducir --> <script language="JavaScript">tocarMidi()</script> ---------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> // FRASE ALEATORIA By Vanessa Jaen // // Este script y otros muchos pueden // descarse on-line de forma gratuita // en El Código: www.elcodigo.net function frasedeldia() { //configura aqui el aspecto del texto var tipoLetra = 'verdana' var tamanoLetra = '2' var colorLetra = 'red' //array de frases array_frases = new Array( "Un amigo es quien ríe nuestra risa y llora nuestras lágrimas", "La mejor forma de conseguir un amigo es serlo", "Los amigos se convierten con frecuencia en ladrones de nuestro tiempo", "Un amigo es una persona con la que se puede pensar en voz alta" ) //obtiene numero aleatorio var numero = Math.random() numero = numero * (array_frases.length - 1) numero = Math.round(numero) //muestra la frase document.write('<font face="' + tipoLetra + '" size="' + tamanoLetra + '" color="' + colorLetra + '">' + array_frases[numero] + '</font>') } </script> <!-- Para que muestre la frase --> <p>Frase aleatoria:<br> <script language="javascript"> frasedeldia() </script> </p>