Buenas tardes.
Expongo una posible solución del ejercicio CU01174E del curso JavaScript desde cero.
EJEMPLO Y EJERCICIO
El siguiente código nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el código y comprueba sus resultados. Luego responde las preguntas y cuestiones que se plantean más abajo.
<!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?
La variable "start" coloca el objeto window en una posición valorX en horizontal, en píxeles, respecto de la esquina superior izquierda de la pantalla. Si su valor inicial es 0 es decir que el objeto window se colocará en 0px respecto de la esquina superior izquierda de la pantalla.
b) ¿Qué representa la variable positionY? ¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ?
La variable "positionY" coloca el objeto window en una posición valorY en vertical, en píxeles, respecto de la esquina superior izquierda de la pantalla. Su valor inicial coloca el objeto window en el medio de la pantalla. Con la propiedad window.innerHeight optenemos la altura de la pantalla, después lo dividimos entre dos y así tenemos la mitad. Como la nueva ventana tiene una altura de 250px para poder colocarlo exactamente en la mitad de la pantalla tenemos que restar de la mitad de la pantalla la mitad de la altura del nuevo objeto window.
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?
1000/30 milisegundos, es decir, 33,33 milisegundos.
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?
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.
Explicado por el experto Mario R. Rancel en el hilo:
https://www.aprenderaprogramar.com/foros/index.php?topic=3615.msg15703#msg15703f) 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>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-215;
var nuevaVentana;
var controlSinusoidal = 0;
var movimiento;
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);
movimiento = 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);
if(start==window.innerWidth-nuevaVentana.outerWidth){
nuevaVentana.clearInterval(movimiento);
alert('Se terminó!');
}
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">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>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-215;
var nuevaVentana;
var controlSinusoidal = 0;
var movimiento;
var haciaDerecha = 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);
movimiento = nuevaVentana.setInterval(sine, 1000/30);
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
if(haciaDerecha){
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
start+=2;
}else{
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
start-=2;
if(start==0){
haciaDerecha = true;
}
}
if(start==window.innerWidth-nuevaVentana.outerWidth){
haciaDerecha = false;
}
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
</body>
</html>Gracias.
Tema: Crear un movimiento sinusoidal en JavaScript efecto desplazamiento CU01174E# (Leído 3458 veces)
RSS -
WAP2