Autor Tema: JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E (Leído 5160 veces)

pedro,, · « **en:** 15 de Diciembre 2015, 22:59 »

Y otro más por hoy.

Teniendo el siguiente código inicial:

<!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>

Citar

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.

Citar

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.

Citar

c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?

Cada 0.033333 segundos.

Citar

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;

Citar

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.

Citar

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ó!

Código: [Seleccionar]

<!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>

Citar

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….

Código: [Seleccionar]

<!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>

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 21 de Diciembre 2015, 10:25 »

Buenos días

Por apartados

a) Lo veo correcto

b) Lo veo correcto. Hay que tener en cuenta que ocurren dos cosas, supongamos la pantalla de 768px de alto.

En el momento de creación de la ventana con nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes'); tendrá una posición "por defecto".

Cuando se establece posición con nuevaVentana.moveTo(0,positionY); tendríamos que el valor de innerHeight es el alto del área de contenidos que puede ser por ejemplo 611px. En este caso el valor de positionY inicial sería 611/2 - 125 = 180.5 px, es decir, la esquina superior izquierda de la ventana estará a una distancia de 180.5 px en vertical desde el límite superior, y horizontalmente estará pegada a la izquierda.

Con nuevaVentana.moveTo(0,positionY); la ventana se situaría en la parte izquierda de la pantalla.

c) Lo veo correcto, 33.33 milisegundos ó 0.03333 segundos

d) Lo veo correcto

e) Esto 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.

f) A mí no me ha funcionado correctamente, me ha aparecido !Se terminó! antes de que la ventana llegara al límite derecho de la pantalla. Es posible que tú lo hayas probado en otro navegador

g) Hace bien el efecto rebote, pero me ocurre lo mismo que antes. En el lado izquierdo sí rebota bien cuando llega al límite izquierdo, pero en el lado derecho rebota antes de llegar al límite derecho de la pantalla.

Saludos

pedro,, · « **Respuesta #2 en:** 21 de Diciembre 2015, 16:56 »

Hola Mario.

Probé el código en tres navegadores distintos y en todos me funcionaba bien, lo he vuelto a probar ahora y me sigue funcionando bien, los navegadores en los que probé son:
Firefox, Chrome y Safari.
Bueno también probé con IE pero en este no fui capaz ni de que empezase a moverse la ventana.

Saludos.

Mario R. Rancel · « **Respuesta #3 en:** 21 de Diciembre 2015, 17:07 »

Pero ¿te rebota cuando el borde derecho de la ventana toca el borde derecho de la pantalla? ¿O te rebota antes de que toque el borde derecho? A mí me rebota antes de que toque el borde derecho

pedro,, · « **Respuesta #4 en:** 21 de Diciembre 2015, 18:24 »

Si.

Dejo un archivo de vídeo para que lo puedas ver, pesa muy poco, son sólo 7 segundos.

http://aprendehtml.byethost3.com/ejemplo_CU01174e.wmv

Mario R. Rancel · « **Respuesta #5 en:** 23 de Diciembre 2015, 14:54 »

Buenas tardes, ahora lo he probado y me ha funcionado bien ¡¡. Creo que el problema se debía a un detalle con el que no merece la pena detenerse. En Firefox puedes navegar teniendo abiertos paneles laterales como el panel lateral de favoritos. Esto se ve que afecta a cómo realiza los cálculos el navegador, porque cerrando ese panel lateral sí rebota exactamente en el lateral derecho. También pienso que si se está con varios monitores puede haber algún problema. Pero una vez visto que se debe a este tipo de cuestiones creo que lo mejor es seguir adelante y no detenerse con este tipo de detalles.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E (Leído 5160 veces)

pedro,,

JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

Mario R. Rancel

Re:JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

pedro,,

Re:JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

Mario R. Rancel

Re:JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

pedro,,

Re:JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

Mario R. Rancel

Re:JavaScript abrir ventana y hacer que se mueva moveTo focus() JavaScript CU01174E

Preguntas y respuestas