<!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>a) ¿Qué representa la variable start? ¿Qué significado tiene que su valor inicial sea cero?Representa la coordenada horizontal(X) que tendrá nuevaVentana. Su valor inicial es 0 para que nuevaVentana aparezca lo mas a la izquierda posible de la pantalla.
b) ¿Qué representa la variable positionY? ¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ?Representa la coordenada vertical (Y) que tendrá nuevaVentana. Su valor inicial es la división de la altura del viewport del navegador entre 2 menos 125. Es decir, le damos una coordenada(Y) inicial a nuevaVentana. Ej: Si window.innerHeight=800, positionY=800/2-125.
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?Cada 0.033333 segundos.
d) ¿Cuántos píxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el navegador?Dos pixeles. start += 2;
e) La base matemática del movimiento que describe la ventana es el movimiento ondulatorio. ¿Por qué la ventana sube y baja?Este punto no me quedó claro, así que no se que responder.
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 animacion;
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);
animacion = nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
if(start==(window.innerWidth-nuevaVentana.outerWidth)){
alert('¡Se terminó!');
nuevaVentana.clearInterval(animacion);
}else{
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>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 animacion;
var direccionX = true;
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);
animacion = nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
if(start==(window.innerWidth-nuevaVentana.outerWidth)){direccionX = false;}
if(start==0){direccionX = true}
if(direccionX){
start += 2;
}else{
start -= 2;
}
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
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>