clase 2016-04-14

[fecha de publicación: 2016-04-14]

Ejercicios en clase:

 OnMouseOver(). Realiza una página que muestra  cinco cuadrados de diferentes colores. Cuando el raton pase por encima de alguno de ellos el color de fondo será del color de relleno del cuadrado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Using "onMouseOver"</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -

function changecolor(code) {
                document.bgColor=code }

// - End of JavaScript - -->
</SCRIPT>

<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<CENTER>
<H1>Evento "onMouseOver"</H1></CENTER>
<HR>

<P>Uso del evento "onMouseOver" para cambiar el color de fondo moviendo el ratón sobre la imagen</P>

<A onmouseover="changecolor('ffffff')" href="http://www.">
<IMG height=20 hspace=10 src="Using_onMouseOver_archivos/white.gif" width=20 vspace=10>
</A>

<A onmouseover="changecolor('ff0000')" href="http://www.">
<IMG height=20 hspace=10 src="Using_onMouseOver_archivos/red.gif" width=20 vspace=10>
</A>

<A onmouseover="changecolor('ffff00')" href="http://www.">
<IMG height=20 hspace=10 src="Using_onMouseOver_archivos/yellow.gif" width=20 vspace=10>
</A>

<A onmouseover="changecolor('009900')" href="http://www.">
<IMG height=20 hspace=10 src="Using_onMouseOver_archivos/green.gif" width=20 vspace=10>
</A>

<A onmouseover="changecolor('0000ff')" href="http://www.">
<IMG height=20 hspace=10 src="Using_onMouseOver_archivos/blue.gif" width=20 vspace=10>
</A>

<HR>
</BODY>
</HTML>
Conversor monetario. Realiza una página que muestra un formulario para la conversión de Euros a Pesetas o viceversa. Los campos del formulario han de poder ser limpiados.
<HTML>
<HEAD>
   <META http-equiv=Content-Type content="text/html; charset=windows-1252">
<script language=javascript>
</script>
</HEAD>
<BODY>
<H3>Conversión de pesetas y euros</H3>

<form name=monedas>
Pesetas: <input type=text name=pesetas>
<input type="button" value="Convertir a euros" onclick="if(!isNaN(this.form.pesetas.value)) this.form.c_euros.value=this.form.pesetas.value/166.386; else alert('No es un numero');">
Euros: <input type=text name=c_euros readonly>
<hr>
Euros: <input type=text name=euros>
<input type="button" value="Convertir a pesetas" onclick="if(!isNaN(this.form.euros.value)) this.form.c_pesetas.value=this.form.euros.value*166.386; else alert('No es un numero');">
Pesetas: <input type=text name=c_pesetas readonly>
</form>

</BODY>
</HTML>
Password. Realiza una página que muestra una entrada protegida con password a un web.
<HTML>
<HEAD>
<TITLE>Objeto Select</TITLE>
<SCRIPT LANGUAGE ="JavaScript">
<!-- se oculta la información de los navegadores antiguos

  function informar(){

    var mensaje = "Usuario no autorizado...";
    var usuarios = new Array(3);
    var claves = new Array(3);
   
    usuarios[0] = "CARLOS";
    usuarios[1] = "JUAN";
    usuarios[2] = "PEPE";

    claves[0] = "12345"
    claves[1] = "axcds"
    claves[2] = "atr99"

    for (i=0; i<usuarios.length; i++){
        if ((usuarios[i]==document.miFormulario.usuario.value.toUpperCase())
            && (claves[i]==document.miFormulario.password.value)){
            mensaje = "Bienvenido al sistema...";
            break;
        }
    }
 
    alert(mensaje);
    document.miFormulario.botonLimpiar.click();
    document.miFormulario.usuario.focus();
 
  }

// final del comentario -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H2>Manejando el objeto password...</H2>
<FORM NAME="miFormulario" ACTION="javascript:informar()">
Introduzca su usuario y clave...<BR><BR>
<TABLE CELLPADDING=5>
<TR ALIGN=RIGHT>
<TD>usuario:</TD><TD><INPUT TYPE=TEXT NAME="usuario" SIZE=15></TD></TR>
<TR ALIGN=RIGHT>
<TD>clave:</TD><TD><INPUT TYPE=PASSWORD NAME="password" SIZE=15></TD></TR>
</TABLE><BR>
<INPUT TYPE=SUBMIT NAME="botonEnviar" VALUE="Enviar">
<INPUT TYPE=RESET NAME="botonLimpiar" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>
Saludo. Realiza una página que pregunta el nombre de entrada y muestra una página con un saludo con la fuente Comic Sans y de tamaño 10. Distingue la hora del día para saber si es por la mañana, por la tarde o por la noche.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
   <META http-equiv=Content-Type content="text/html; charset=windows-1252">
   <META content="Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
   <BODY>
 <script language="JavaScript">
<!--
var name=prompt("Introduce tu nombre, por favor.","nombre");
var today = new Date ()
var hrs = today.getHours();
document.writeln("<b><font size=4 face='Comic Sans MS'>");
document.writeln("<b>");
if (hrs <= 12)
        document.write("Buenos días "+name+'!');
else if (hrs <= 22)
        document.write("Buenas tardes "+name+'!');
else
     document.write("Buenas noches "+name+'!'); document.writeln("<br>");
// -->
</script>
  
   </BODY>


</HTML>

Comentarios

Entradas populares de este blog

TEMA: Tarea

Clase 2017-02-28