Inicio Apuntes FPApuntes DAW Ejercicio Básico JavaScript: Redimensionar ventana usando resizeBy y moveBy
Javascript

Ejercicio Básico JavaScript: Redimensionar ventana usando resizeBy y moveBy

por entreunosyceros
Publicado el: Última actualización:

Hoy voy a dejar aquí un ejercicio un tanto estúpido, ya que solo funciona utilizando Explorer como navegador a la hora de ejecutar la página. El ejercicio en si se trata de realizar una página usando el objeto window con JavaScript. La ventana que realicemos se extenderá hasta el total del ancho y alto disponible de de la pantalla. Al alcanzar el tamaño máximo volverá a su posición inicial. Será obligatorio utilizar los métodos resizeBy() y moveBy() tanto para el «estiramiento» como para volver a la posición inicial.

El contenido que la página da un poco igual, ya que no es ese el objetivo del ejercicio. Una vez explicado, aquí va el código. (Seguro que no es la mejor manera ni la más eficiente, pero funciona perfectamente … en explorer, como ya avisé líneas más arriba).

Código para redimensionar ventana usando resizeBy y moveBy con JavaScript

<html>
   <head>
      <title>
         P&aacute;gina con Javascript.
      </title>
      <script language="javascript">
         <!--
//Se determina la proporcion ancho-alto
                 var proporcion=screen.availWidth/screen.availHeight;
//Se determina el ancho y el alto iniciales de la ventana.
                 var alto=150, ancho;
                 ancho=Math.floor(alto*proporcion);
                 if ((ancho%2)==1)
                    ancho+=1;
//Se determina el espacio disponible en la pantalla.
         var anchoDisponible=screen.availWidth, altoDisponible=screen.availHeight;
                 
// En las líneas siguientes se calcula la posición inicial de la ventana.
// Para ello, se resta el tamaño inicial del tamaño disponible, y se divide por dos.
                 var izquierda=(anchoDisponible-ancho)/2;
         var superior=(altoDisponible-alto)/2;
         var ciclos; // Numero de veces que se repetirá el bucle que gestiona la ventana.
 
//En las líneas siguientes se coloca la ventana en su posición y tamaño originales.
         window.moveTo(izquierda, superior);
         window.resizeTo(ancho, alto);
 
                 incremento_arriba=-1;
                 incremento_izquierda=-1;
//incremento_izquierda=incremento_arriba*proporcion;
         incremento_alto=2;
                 incremento_ancho=2;
//               incremento_ancho=incremento_alto*proporcion;
                 
     for (ciclos=1; ciclos<(altoDisponible-alto); ciclos+=2)
         {
            window.moveBy(incremento_izquierda,incremento_arriba);
                        window.resizeBy(incremento_ancho,incremento_alto);        
         }
          for (ciclos=1; ciclos<(anchoDisponible-(ancho+(altoDisponible-alto))); ciclos+=2)
                 {
                    window.moveBy(incremento_izquierda,0);
                        window.resizeBy(incremento_ancho,0);
                 }
                 
                 incremento_abajo=1;
                 incremento_derecha=1;
                 decremento_alto=-2;
                 decremento_ancho=-2;
                 
          for (ciclos=1; ciclos<(anchoDisponible-(ancho+(altoDisponible-alto))); ciclos+=2)
                 {
                    window.moveBy(incremento_derecha,0);
                        window.resizeBy(decremento_ancho,0);
                 }
          for (ciclos=1; ciclos<(altoDisponible-alto); ciclos+=2)
         {
            window.moveBy(incremento_derecha,incremento_abajo);
                        window.resizeBy(decremento_ancho,decremento_alto);        
         }       
         //-->
      </script>
   </head>
   <body>
   </body>
</html>

 


También te puede interesar ...

Deja tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.