1. Enunciado de la práctica
La práctica 4 de la asignatura Programas y sistemas de autor II está dividida en dos partes:
2. Explicación de creación de estructura de la web mediante capas
La creación del menú desplegable superior y del control de la visibilidad de las diferentes capas que contiene la estructura de la vez se basa en el siguiente código:
Primero se crea la estructura del menú utilizando listas. La estructura del menú es la siguiente:
<div id="index_menu">
<ul class="menu_principal">
<li onClick="javascript:mostrarEjercicio(0)">Inicio </li>
<li onMouseOver="javascript:despliega_menu(1);">Práctica 1
<ul id="desplegable1">
<li onClick="javascript:mostrarEjercicio(1)">1: Realizar un script que lea por teclado dos números...</li>
<li onClick="javascript:mostrarEjercicio(2)">2: Realizar un script que solicite la entrada...</li>
<li onClick="javascript:mostrarEjercicio(3)">3: Realizar un script que solicite la entrada de un número...</li>
<li onClick="javascript:mostrarEjercicio(4)">4: Realizar un script que solicite 3 pares de datos...</li>
<li onClick="javascript:mostrarEjercicio(5)">5: Realizar un script que solicite la entrada de 10 números...</li>
<li onClick="javascript:mostrarEjercicio(6)">6: Realizar un script que solicite la entrada de alguna...</li
</ul>
</li>
<li onMouseOver="javascript:despliega_menu(2);">Práctica 2
<ul id="desplegable2">
<li onClick="javascript:mostrarEjercicio(7)">1: Se programará una nueva página html...</li>
<li onClick="javascript:mostrarEjercicio(8)">2: Confeccionar una clase llamada suma,.. </li>
<li onClick="javascript:mostrarEjercicio(9)">3: Programar un script en una función que solicite...</li>
</ul>
</li>
<li onClick="javascript:mostrarEjercicio(10)">Práctica 3 </li>
<li onClick="javascript:mostrarEjercicio(11)">El juego de la pelota </li>
</ul>
</div>
Los atributos de las diferentes secciones del menú son los siguientes:
ul.menu_principal /* Contenedor de menú de opciones <ul> padre */
{
list-style:none; /* Quita los puntos o números al inicio de la lista */
position:absolute;
top:168px;
left:5px;
margin: 0px; /* Lineas para funcionar con Mozilla */
margin-left: 10px; /* Lineas para funcionar con Mozilla */
border: 0px; /* Lineas para funcionar con Mozilla */
padding: 0px; /* Lineas para funcionar con Mozilla */
z-index:99;
}
ul.menu_principal > li /* Contenedor de las opciones principales (en horizontal) no resaltado */
{
display:inline; /* Muestra los diferentes "li" en linea */
position:relative; /* Esta posición es relativa respecto a la absoluta del <ul> general que sitúa todo el menú */
padding-top: 3px;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
cursor:pointer; /* muestra como puntero del mouse una mano */
}
ul.menu_principal li:hover /* Modo Resaltado de ítem cuando el cursor está encima */
{
background-color:#999999;
color:#FFFFFF;
}
ul.menu_principal li > ul /* Formato de contenedor de listas de ejercicios ocultas si no situado sobre práctica*/
{
display:none;
position:absolute; /* Esta posición es absoluta respecto a la relativa del <li> que contiene a este <ul> */
left:0px; /* Si se omite, hay un desplazamiento horizontal raro */
top:20px;
}
ul.menu_principal li:hover ul /* Formato de contenedor de listas de ejercicios visibles al situarse sobre práctica. */
{
display:block;
list-style:none; /* Quita los puntos o números al inicio de la lista */
background-color: #ffffff;
border-color:#999999;
border-width: 1px;
border-style: solid;
width:500px;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
}
ul.menu_principal ul>li /* Formato de cada ítem de ejercicio */
{
padding-top: 7px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
text-align:justify;
border-bottom-color:#bbbbbb;
border-bottom-width:1px;
border-bottom-style:solid;
}
ul.menu_principal ul>li:first-letter /* Resaltado y reescalado de la primera línea de capa ítem */
{
font-size: 120%;
font-weight: bold;
line-height: 0.8em;
}
El resto de componentes de la página html no dispone de ninguna etiqueta que defina su formato tal y como se indica en el enunciado. Todas están incluídas en la hoja de estilo global.css.
Estructura de capas de la web (ejercicios)
Por defecto, cada capa (ejercicio) tiene el atributo de visibilidad en modo oculto. Así, la definición de cada capa contenedora de ejercicios tendrá la siguiente estructura:
<div class="ejercicio" id="X" style="visibility:hidden">
Como se ve a continuación, en cada opción del menú se llama a la función mostrarEjercicio(x), siendo "x" el identificador del ejercicio a mostrar:
function mostrarEjercicio(ejercicio){
switch(ejercicio) {
case 0: cambia_visibilidad_capas(0);
break;
case 1: elimina_resultado_anterior('solucion1','solucion1_contenido');
cambia_visibilidad_capas(1);
break;
case 2: elimina_resultado_anterior('solucion2','solucion2_contenido');
cambia_visibilidad_capas(2);
break;
case 3: elimina_resultado_anterior('solucion3','solucion3_contenido');
cambia_visibilidad_capas(3);
break;
case 4: elimina_resultado_anterior('solucion4','solucion4_contenido');
cambia_visibilidad_capas(4);
break;
case 5: elimina_resultado_anterior('solucion5','solucion5_contenido');
cambia_visibilidad_capas(5);
break;
case 6: elimina_resultado_anterior('solucion6','solucion6_contenido');
cambia_visibilidad_capas(6);
break;
case 7:cambia_visibilidad_capas(7);
break;
case 8:cambia_visibilidad_capas(8);
break;
case 9:elimina_resultado_anterior('solucion9','solucion9_contenido');
cambia_visibilidad_capas(9);
break;
case 10:cambia_visibilidad_capas(10);
break;
case 11:cambia_visibilidad_capas(11);
break;
}
oculta_menu();
}
Para cada opción de menú, se cambia la visibilidad de las capas (ver siguiente función) para hacer visible únicamente la correspondiente al ejercicio seleccionado y, en caso necesario, se elimina previamente el resultado de una ejecución anterior del ejercicio a mostrar.
function cambia_visibilidad_capas(ejercicio) { // Hace visible la capa del ejercicio e invisible todas las demás
for(i=0;i<12;i++){
if (i==ejercicio) {
document.getElementById(i).style.visibility="visible"
}
else
{
document.getElementById(i).style.visibility="hidden"
}
}
}
Mediante la siguiente función "elimina_resultado_anterior" se elimina de la estructura del DOM el párrafo incrustado dinámicamente con el resultado de la ejecución del ejercicio para que quede limpio cada vez que se entra a la opción de menú. También es utilizado como se verá posteriormente para limpiar el resultado de la ejecución del ejercicio entre diferentes ejecuciones:
function elimina_resultado_anterior(capa,parrafo){
var contenedor=document.getElementById(capa);
if (document.getElementById(parrafo)) {
contenido=document.getElementById(parrafo);
contenedor.removeChild(contenido);
}
}
function despliega_menu(menu) {
switch(menu) {
case 1: document.getElementById('desplegable1').style.visibility='visible';
break;
case 2: document.getElementById('desplegable2').style.visibility='visible';
break;
}
}
function oculta_menu(){
document.getElementById('desplegable1').style.visibility='hidden';
document.getElementById('desplegable2').style.visibility='hidden';
}
Resolución de actividades. Inserción y borrado de nodos de DOM
Debido a la exigencia de que todos los ejercicios y páginas anteriores deban integrarse en una única capa, el modo en el que se programa el mostrar los resultados de su ejecución también varía. Ya no es posible utilizar el método "document.write" en una nueva página como se realizó en los ejercicios anteriormente, sino que se necesita insertar directamente en el DOM de la propia página los nodos correspondientes que muestren el resultado del ejercicio de un modo dinámico.
Para realizar este cambio, en cada capa de cada ejercicio, se ha anidado otra capa vacía y definida mediante:
<div id="solucionX"></div>
que se utilizará como "contenedor" para incluir, mediante la creación de nodos hijos, los resultados del ejercicio. Las funciones de ejecución de todos los ejercicios se encuentran en el archivo vinculado "ejercicios.js". Se puede observar que para mostrar los resultados de la ejecución del ejercicio primero se localiza la capa que contendrá la solución y se crea un elemento nuevo "span" que contendrá la información devuelta (y que será lo que después, entre ejecuciones del ejercicio, eliminaremos mediante la función "elimina_resultado_anterior" que se ha visto anteriormente.
var capa=document.getElementById('solucion1');
var span1=document.createElement('span');
span1.className='titulo_azul';
span1.setAttribute('id','solucion1_contenido');
capa.appendChild(span1);
A partir de aquí, se irán insertando dinámicamente los nuevos nodos necesarios para visualizar correctamente los resultados de las prácticas como por ejemplo:
if ((numero >= 1) & (numero < 10)) {
var txt1=document.createTextNode('El número ' + numero + ' tiene un dígito');
span1.appendChild(txt1);
var br1=document.createElement('br');
span1.appendChild(br1);
var br2=document.createElement('br');
span1.appendChild(br2);
}
else if ((numero > 9) & (numero < 100)) {
var txt1=document.createTextNode('El número ' + numero + ' tiene dos dígitos');
span1.appendChild(txt1);
var br1=document.createElement('br');
span1.appendChild(br1);
var br2=document.createElement('br');
span1.appendChild(br2);
}
else {
var txt1=document.createTextNode('Datos introducidos incorrectos, Has de introducir un número positivo de uno o dos dígitos [1-99]');
span1.appendChild(txt1);
var br1=document.createElement('br');
span1.appendChild(br1);
var br2=document.createElement('br');
span1.appendChild(br2);
}
En todos los ejercicios se incluye y comenta la programación realizada para su resolución tal y como se realizó en el momento de sus respectivas entregas. No se han reflejado los cambios explicados en éste último punto para adaptarlos a las exigencias de esta práctica.
document.write("<span class='titulo_azul'>");
var primero = parseInt(prompt("Introduce el primer número",""),10);
var segundo = parseInt(prompt("Introduce el segundo número",""),10);
if (primero > segundo) {
document.write("<u>El primer número es mayor que el segundo</u></br></br>");
document.write(" La suma de los dos números es <b>"+ (primero + segundo) +"</b>.</br>");
document.write(" La resta del primer número con el segundo es <b>"+ (primero - segundo) +"</b>.</br>");
}
else if (primero < segundo){
document.write("<u>El segundo número es mayor que el primero</u></br></br>");
document.write(" El primer número multiplicado por el segundo es <b>"+ primero * segundo +"</b>.</br>");
document.write(" El primer número dividido por el segundo es <b>"+ primero / segundo +"</b>.</br>");
}
else if (primero == segundo){
document.write("Los dos números son iguales</br>");
}
else {
document.write("Datos introducidos incorrectos</br>");
}
document.write("</span></br>");
La primera línea indica que el resultado del código Javascript se mostrará en color azul para resaltarlo del resto de la página.
A continuación se muestran los "popups" recibiendo los valores introducidos por el usuario, y convirtiendolos directamente a números enteros, ya que el resultado de un "prompt" es siempre una cadena de texto.
Una vez recibidos los valores, se evalúan entre sí. Primero se evalúa si el primero es mayor que el segundo y se efectúan las operaciones correspondientes. Después si el segundo es el mayor, ejecutándose de nuevo las operaciones correspondientes. Por último, se comprueba que los dos números no sean iguales, mostrando un mensaje.
Finalmente, el no cumplimiento de alguna de los condicionales anteriores indica que se ha producido algún error al introducir los datos, mostrandose el mensaje correspondiente, a modo de primitivo "control de errores".
document.write("<span class='titulo_azul'>");
var uno = parseInt(prompt("Introduce la primera nota [0-10]",""),10);
var dos = parseInt(prompt("Introduce la segunda nota [0-10]",""),10);
var tres = parseInt(prompt("Introduce la tercera nota [0-10]",""),10);
nota=((uno+dos+tres)/3);
if ((uno >=0 && uno <=10) && (dos >=0 && dos <=10) && (tres >=0 && tres <=10)) {
if (nota >= 4) {
document.write("Aprobado, con una media de "+nota+"</br></br>");
}
else if (nota <= 3) {
document.write("Suspendido, con una media de "+nota+"</br></br>");
}
}
else {
document.write("Datos introducidos incorrectos, no se puede calcular la media. Las notas han de estar entre 0 y 10.</br></br>");
}
document.write("<span class='titulo_azul'>");
var numero = parseInt(prompt("Introduce un número positivo de uno o dos dígitos [1-99]",""),10);
if ((numero >= 1) & (numero < 10)) {
document.write("El número <b>"+numero+"</b> tiene un dígito</br></br>");
}
else if ((numero > 9) & (numero < 100)) {
document.write("El número <b>"+numero+"</b> tiene dos dígitos</br></br>");
}
else {
document.write("Datos introducidos incorrectos, Has de introducir un número positivo de uno o dos dígitos [1-99].</br></br>");
}
document.write("</span>");
document.write("<span class='titulo_azul'>");
function superficie (base, altura) {
area=((base*altura)/2);
return area;
}
var i=1;
var contador=0;
while (i<4) {
var base = parseInt(prompt("Introduce la base del triángulo "+ i,""),10);
var altura = parseInt(prompt("Introduce la altura del triángulo "+ i,""),10);
superficie(base,altura);
document.write (La base del triángulo" + i + " es "+
base + " y su altura es " + altura + ". Su área mide "+ area + "m2</br>");
if (area>12){
contador++;
}
i=i+1;
}
if (contador >0) {
document.write(Hay "+ contador + " triángulos con más de 12m2 de superficie</br>");
}
else {
document.write(No hay ningún triángulo con más de 12m2 de superficie</br>");
}
document.write("</span></br></br>");
document.write("<span class='titulo_azul'>");
var contador=1;
var suma=0;
while (contador<11) {
valor = parseInt(prompt("Introduce el valor" + contador,""),10);
if (contador >5) {
document.write("El valor "+contador+" introducido es <font color='#FF0000'><b>"+valor+"</b></font></br>");
suma = suma + valor;
}
else {
document.write("valor "+contador+" es "+valor+"</br>");
}
contador=contador+1;
}
document.write("</br>El total de la suma de los cinco últimos valores es <font color='#FF0000'><b>"+suma+"</b></font></br>");
document.write("</span></br>");
document.write("<span class='titulo_azul'>");
var palabra = prompt("Introduce una de las siguientes palabras: casa, mesa, perro o gato","");
switch (palabra){
case "casa":document.write("La palabra <b>"+palabra+ "</b> se traduce al inglés como <b>house</b></br>");
break;
case "mesa":document.write("La palabra <b>"+palabra+ "</b> se traduce al inglés como <b>table</b></br>");
break;
case "perro":document.write("La palabra <b>"+palabra+ "</b> se traduce al inglés como <b>dog</b></br>");
break;
case "gato":document.write("La palabra <b>"+palabra+ "</b> se traduce al inglés como <b>cat</b></br>");
break;
default:document.write("No has introducido una palabra válida</br>");
}
document.write("</span></br>");
1. Presentación
Hola, me llamo Alberto, de 37 años y trabajo en un centro de estudios ocupandome del mantenimiento a nivel de software como de hardware de todos los equipos de la red (aproximadamente unos 350). Trabajo laborioso y mal valorado que desaconsejo enérgicamente a cualquiera que quiera entrar en el mundo informático.
Me gusta mucho el cine, el basket (aunque por motivos de tiempo ya no practique a menudo lo segundo) y dado que siempre estoy liado con ordenadores tampoco descuido la parte lúdica de estos. También me gusta mucho el tema de la imagen y sonido que ha sido lo que me ha llevado a empezar estos estudios.
2. Contenido de la asignatura
La asignatura Programación: programas y sistemas de autor II pretende ampliar y consolidar los conocimientos sobre programación iniciados en Programación: programas y sistemas de autor I. Para ello utilizará el lenguaje de programación JavaScript, donde se estudiarán las bases de la programación estructurada y orientada a objetos.
Debido al hecho de que en la asignatura se consolidan las bases de la programación, es necesario haber cursado previamente la asignatura Programación: programación y sistemas de autor I, además de disponer de conocimientos básicos del lenguaje de etiquetas HTML.
Una buena consolidación de los conceptos presentados en la asignatura, son la base fundamental para una comprensión del resto de lenguajes de programación utilizados en posteriores asignaturas.
<form name="idiomas">
<input type="button" id="castellano" value="Castellano" onClick="javascript:cambio_idioma(1)">
<input type="button" id="catalan" value="Català" onClick="javascript:cambio_idioma(2)">
</form>
function cambio_idioma(idioma) {
switch (idioma) {
case 1: {
var presentacion_titulo=document.getElementById("presentacion_titulo").lastChild;
presentacion_titulo.nodeValue=" Presentación";
var presentacion_texto_parrafo1=document.getElementById("presentacion_texto_parrafo1").firstChild;
presentacion_texto_parrafo1.nodeValue="Hola, me llamo Alberto, ...";
var asignatura_titulo=document.getElementById("asignatura_titulo").lastChild;
asignatura_titulo.nodeValue=" Contenido de la asignatura";
var asignatura_texto_parrafo1=document.getElementById("asignatura_texto_parrafo1").firstChild;
asignatura_texto_parrafo1.nodeValue="La asignatura Programación: programas y sistemas de autor II...";
break;
}
case 2: {
var presentacion_titulo=document.getElementById("presentacion_titulo").lastChild;
presentacion_titulo.nodeValue=" Presentació";
var presentacion_texto_parrafo1=document.getElementById("presentacion_texto_parrafo1").firstChild;
presentacion_texto_parrafo1.nodeValue="Hola, em dic Alberto..";
var asignatura_titulo=document.getElementById("asignatura_titulo").lastChild;
asignatura_titulo.nodeValue=" Contingut de l'asignatura";
var asignatura_texto_parrafo1=document.getElementById("asignatura_texto_parrafo1").firstChild;
asignatura_texto_parrafo1.nodeValue="L'assignatura Programació: programes i sistemes d'autor II...";
break;
}
}
}
<SCRIPT language="JavaScript" SRC="ejercicio2.js"></SCRIPT>
<SCRIPT>
var s=new suma();
s.cargavalor1(10);
s.cargavalor2(20);
document.write("<p class='titulo_azul'>La suma de los dos valores es:"+s.retornaresultado()+"</p>");
</SCRIPT>
function suma(valor1,valor2){
this.primervalor=valor1;
this.segundovalor=valor2;
this.cargavalor1=cargavalor1;
this.cargavalor2=cargavalor2;
this.retornaresultado=retornaresultado;
}
function cargavalor1(valor1){
this.primervalor=valor1;
}
function cargavalor2(valor2){
this.segundovalor=valor2;
}
function retornaresultado(){
return (this.primervalor+this.segundovalor);
}
<script language="javascript" src="ejercicio3.js"></script>
<script language="javascript">
//Introducción de la primera lista
var lista1= new lista();
lista1.introduce_valores();
//Introducción de la segunda lista
var lista2= new lista();
lista2.introduce_valores();
if (isNaN(lista1.suma()) || (isNaN(lista2.suma()))){
document.write("<p class='titulo_azul'>Datos introducidos erróneos</p></BR>")
}
else
{
//Muestra valores introducidos y resultados
document.write("<TABLE class='texto_comun'>");
document.write("<TR><TD> </TD><TD>Lista 1</TD><TD>Lista 2</TD></TR>");
for (i=0;i<3;i++){
document.write("<TR><TD>Valor "+ (i+1) +"</TD><TD>" + lista1.valores[i]+ "</TD><TD>" + lista2.valores[i] + "</TD></TR>");
}
document.write("<TR class='titulo_azul'><TD>Suma</TD><TD>" + lista1.suma()+ "</TD><TD>" + lista2.suma() + "</TD></TR>");
document.write("</TABLE>");
//Muestra mensaje
if (lista1.suma()>lista2.suma()){
document.write("<p class='titulo_azul'>La primera lista tiene un valor acumulado mayor que la segunda lista</p></br>")
} else if (lista1.suma()<lista2.suma()){
document.write("<p class='titulo_azul'>La segunda lista tiene un valor acumulado mayor que la primera lista</p></br>")
} else if (lista1.suma()==lista2.suma()){
document.write("<p class='titulo_azul'>El valor acumulado de las dos listas son iguales</p></br>")
}
}
</script>
function lista(lista_valores)
{
this.valores=lista_valores;
this.introduce_valores=introduce_valores;
this.suma=suma;
}
function suma()
{
return(this.valores[0]+this.valores[1]+this.valores[2]);
}
function introduce_valores(){
lista_valores= new Array();
for (i=0;i<3;i++){
lista_valores[i] = parseInt(prompt("Introduce valor ",""),10);
}
this.valores=lista_valores;
}
1. Validación del formulario.
La validación del formulario comienza tras hacer clic en el botón "enviar":function introduce_datos() {
nombre=document.formulario.nombre.value;
usuario=document.formulario.usuario.value;
anio=document.formulario.anio.value;
email=document.formulario.email.value;
password=document.formulario.password.value;
password2=document.formulario.password2.value;
mensaje="";
comprueba_password(password, password2);
comprueba_nombre(nombre,usuario);
comprueba_usuario_vacio(usuario);
comprueba_email(email);
comprueba_anio(anio);
comprueba_nombre_vacio(nombre);
if (mensaje!= "") {
alert(mensaje)
}
else {
document.formulario.submit()
}
}
function comprueba_nombre_vacio(nombre){
// El campo del usuario no puede coincidir con el campo del nombre/nick
if (!nombre){
nombre_error="No se ha introducido el nombre\n";
mensaje=nombre_error.concat(mensaje);
document.formulario.nombre.select()
}
}
function comprueba_anio(anio){
// El año de nacimiento debe de ser de un adulto mayor de 18 años
if (!anio) {
anio_error="No se ha introducido el año de nacimiento\n";
mensaje=anio_error.concat(mensaje);
document.formulario.anio.select()
} else {
fecha_actual = new Date();
if (anio > (fecha_actual.getFullYear()-18)){
anio_error="El usuario ha de ser mayor de 18 años\n";
mensaje=anio_error.concat(mensaje);
document.formulario.anio.select()
}
}
}
function comprueba_email(email){
// El correo electrónico debe de tener un formato correcto
var filtro=/^[A-Za-z0-9_.]+@[A-Za-z0-9_.]+\.[A-Za-z0-9_.]+[A-za-z]$/;
if (!email) {
email_error="No se ha introducido la dirección de correo electrónico\n";
mensaje=email_error.concat(mensaje);
document.formulario.email.select()
} else {
if (!filtro.test(email)){
email_error="La dirección de correo no tiene el formato correcto\n";
mensaje=email_error.concat(mensaje);
document.formulario.email.select()
}
}
}
function comprueba_usuario_vacio(nombre){
if (!usuario){
usuario_error="No se ha introducido el usuario\n";
mensaje=usuario_error.concat(mensaje);
document.formulario.usuario.select()
}
}
function comprueba_nombre(nombre,usuario){
// El campo del usuario no puede coincidir con el campo del nombre/nick
if ((nombre != "") & (usuario != "")){
if (nombre == usuario) {
nombre_error="El nombre y el usuario no pueden ser iguales\n";
mensaje=nombre_error.concat(mensaje);
document.formulario.usuario.select()
}
}
}
function comprueba_password(password, password2){
// Los dos campos de contraseña deben tener el mismo contenido.
if (!password){
password_error="No se ha introducido la contraseña\n";
mensaje=password_error.concat(mensaje);
document.formulario.password.select()
} else {
if (password != password2){
password_error="contraseña introducida incorrecta, los campos no coinciden.\n";
mensaje=password_error.concat(mensaje);
document.formulario.password.select()
}
}
}
2. Recuperación de cookies
La recuperación de cookies se realiza mediante la siguiente función:function carga_cookies(){
if (document.cookie) {
var elementos=document.cookie.split(";");
var valores= new Array();
for (i=0;i<(elementos.length);i++){
for (w=0;w<elementos[i].length;w++){
if (elementos[i].substring(w,(w+1))== "="){
valores[i]=unescape(elementos[i].substring(w+1,elementos[i].length));
}
}
}
var elemento=document.getElementById("nombre");
elemento.setAttribute("value",valores[0]);
var elemento=document.getElementById("anio");
elemento.setAttribute("value",valores[1]);
}
}
3. Mensaje en la barra de estado
Cuando el usuario está rellenando un campo del formulario ha de mostrarse en la barra de estado un literal que sirva de ayuda para su correcto rellenado. Para ello, introduciremos una modificación en los tags de introducción de datos del formulario:<input type="text" name="nombre" id="nombre" onFocus="window.status='Introduce tu nombre'">
donde indicamos que cuando el campo del formulario tenga el foco, introduciremos un literal en la barra de estado, utilizando la propiedad "status" del objeto "window".
<div id="pelota" style="width:55px; height:55px; position:absolute; left:40px; top:170px; background-image:url(imagenes/pelota.jpg); z-Index:3;"></div>
<div id="escenario" style="position:absolute; left:38px; top:168px; width:705px; height:255px; border:2px; border-style:solid; border-color:#CCCCCC; background-color:#FFFFFF; "></div>
<script language="javascript" src="includes/pelota.js"></script>
<script language="javascript">
var pasoX=10; // Define el número de píxeles que se desplazará la pelota en el eje X en cada iteracción
var pasoY=10; // Define el número de píxeles que se desplazará la pelota en el eje Y en cada iteracción
var limiteSup = 170; // Define el límite superior
var limiteInf = 370; // Define el límite inferior
var limiteIzq = 40; // Define el límite izquierdo
var limiteDer = 690; // Define el límite derecho
var movimiento=0; // Define si la pelota se está moviendo o está en reposo
</script>
<p class="centrado">
<input type="button" value="Activar movimiento pelota" onClick="javascript:inicia_movimiento()">
<input type="button" value="Pausar movimiento pelota" onClick="javascript:pausa_movimiento(repite)">
</p>
En primer lugar se crean las dos capas, una definiendo el objeto que se utilizará para realizar la animación (objeto "pelota" que será una capa con una imagen de fondo para hacer la animación más atractiva y otra capa que hará las funciones de escenario para mostrar los límites de la animación.
A continuación se realiza la vinculación con el archivo que contiene las funciones javascript necesarias para realizar la animación.
Finalmente se crean las variables necesarias para la realización de la animación y se crean dos botones. El primero llama a la función "inicia_movimiento" para llevar a cabo la animación mientras que el segundo se encarga de realizar una pausa en la animación. Mediante la función "setInterval()", la función responsable del cálculo del movimiento se ejecutará periodicamente de un modo independiente.
El archivo "pelota.js" contiene las funciones necesarias para realizar la animación:
function mover(pasoX,pasoY){
var capa = document.getElementById("pelota"); // Recupera el id de la pelota
var posX = (parseInt(capa.style.left)); // Recupera la posición X actual de la pelota
var posY = (parseInt(capa.style.top)); // Recupera la posición Y actual de la pelota
capa.style.left=(posX+pasoX)+"px"; // Realiza el desplazamiento horizontal. Sin la coletilla "px" funciona bien en IE pero no en Mozilla
capa.style.top=(posY+pasoY)+"px"; // Realiza el desplazamiento vertical. Sin la coletilla "px" funciona bien en IE pero no en Mozilla
}
function compruebaX(){
var capa = document.getElementById("pelota"); // Recupera el id de la pelota
var posX = (parseInt(capa.style.left)); // Recupera la posición Y actual de la pelota
if (posX == limiteDer) { // Si la posición X es igual al límite derecho:
pasoX=-10 // Se invierte el sentido del desplazamiento (se moverá a la izquierda)
}
if (posX == limiteIzq) { // Si la posición X es igual al límite izquierdo:
pasoX=10 // Se invierte el sentido del desplazamiento (se moverá a la derecha)
}
return(pasoX);
}
function compruebaY(){
var capa = document.getElementById("pelota"); // Recupera el id de la pelota
var posY = (parseInt(capa.style.top)); // Recupera la posición Y actual de la pelota
if (posY == limiteInf) { // Si la posición Y es igual al límite inferior:
pasoY=-10 // Se invierte el sentido del desplazamiento (se moverá hacia arriba)
}
if (posY == limiteSup) { // Si la posición Y es igual al límite superior:
pasoY=10 // Se invierte el sentido del desplazamiento (se moverá hacia abajo)
}
return(pasoY);
}
function actualiza_movimiento(){
mover(pasoX,pasoY);
pasoX=compruebaX();
pasoY=compruebaY();
}
function inicia_movimiento(){
if (movimiento==0){
repite = setInterval('actualiza_movimiento()',40); // Inicia el movimiento y lo repite hasta que se decida pausar
movimiento=1;
}
}
function pausa_movimiento(){
if (movimiento==1) {
clearInterval(repite); // Pausa el movimiento
movimiento=0;
}
}
La función "inicia_movimiento()" se encarga de iniciar el movimiento realizando la llamada a la función "actualiza_movimiento()" y de que éste se realice de manera periódica hasta que se ejecute la función "clearInterval()" que detenga el movimiento. Además asigna el valor 1 a la variable de control de estado "movimiento" para evitar errores en caso de hacer clic en más de una ocasión sobre los botones.
La función "actualiza_movimiento()" ejecuta los siguientes subprocesos: