Hola. Dejo la solucion al ejercicio CU01174E métodos window javascript confirm prompt open focus moveTo, del curso básico de programación JavaScript de aprenderaprogramar.
a) ¿Qué representa la variable start? Es una variable contador y representa la coordenada x o posición vertical en píxeles de la ventana con respecto a la pantalla.
¿Qué significado tiene que su valor inicial sea cero? Que se posicione la ventana en la parte superior vertical de la pantalla.
b) ¿Qué representa la variable positionY? Es una variable contador y representa la coordenada y, o posición horizontal en píxeles de la ventana con respecto a la pantalla
¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ? Obtener el alto de la pantalla.
altura/ 2= mitad de la pantalla.
altura nueva ventana =250 - 125 = mitad de la altura de la nueva ventana .
Posicionar la ventana en el centro horizontal de la pantalla.
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o re-dibujado de la pantalla? 33,3333 mili-segundos o 0,033333 segundos
d) ¿Cuántos píxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el navegador? 2px.
e) La base matemática del movimiento que describe la ventana es el movimiento ondulatorio. ¿Por qué la ventana sube y baja? Me remito a la explicación de Mario R. Rancel en el hilo:
https://www.aprenderaprogramar.com/foros/index.php?topic=3615.msg15703#msg15703Esto tiene una base matemática. No es necesario comprenderlo para el seguimiento del curso. La base matemática es que la función seno toma valores entre 0, 1, -1 describiendo una forma de onda, conforme se incrementan sus valores.
En cada redibujado de la ventana su posición Y varía de acuerdo con esto:
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
Las operaciones se hacen en radianes. controlSinusoidal se ha establecido en 0 al inicializarlo y cada vez que se redibuja la ventana se incrementa un poco. La posición Y se actualiza en base al seno de ese valor que se va incrementando, y de esa manera se describe una curva sinusoidal.
Código original
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
window.onload = function ()
{
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start += 2;
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>
f) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su movimiento y aparezca un mensaje (alert) con el texto ¡Se terminó!
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var anchoPantalla=window.innerWidth
var mueveVentana
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
anchoNuevaVentana=nuevaVentana.outerWidth
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
mueveVentana=nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start +=2
if(start==anchoPantalla-anchoNuevaVentana)
{
nuevaVentana.clearInterval(mueveVentana)
alert("¡Se terminó!")
}
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>
g) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto de “rebote” y empiece a moverse en sentido opuesto al que venía (es decir, subiendo y bajando pero ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y así indefinidamente….
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var anchoPantalla=window.innerWidth
var verdadero =false;
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
anchoNuevaVentana=nuevaVentana.outerWidth
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
if(start==anchoPantalla-anchoNuevaVentana && verdadero==false){ verdadero=true;}
else if (start<=0 ){verdadero = false;}
if (verdadero==true){start -=2;}
else {start +=2}
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>
Mostrar Mensajes
RSS