Untitled

<!DOCTYPE html>

<html>
  <head>
    <title>Prova di animazione</title>
    <script type="text/javascript">

    function createTrail(b){

      var ret = document.createElement('div')

      var props = ["position", "background", "width", "height", "left", "top"]
      for(var i=0; i < props.length; i++){
        ret.style[props[i]] = b.style[props[i]]
      }
      ret.style.opacity = 0.5
      return ret;
      // per ora non si vede perchè noi creiamo un elemento però non lo inseriamo nel dom.
    }

    function Box(sb){
      var b = document.createElement('div')
      var sz = 25
      sb.appendChild(b)
      b.style.width = '25px'
      b.style.height = '25px'
      b.style.background = 'red'
      b.style.position = 'absolute'
      this.X = 0
      this.Y = 0
      this.dx = 2
      this.dy = 3
      this.Element = b
      var trail = new Array(10)
      var counter = 0
      var nextTrail = 0

      for(var i = 0; i < trail.length; i++){
        trail[i] = createTrail(b)
      }

      this.UpdateBox = function(){
        if (counter++ % 10 == 0){
          var t = trail[nextTrail]
          if(!t.parentNode)
            b.parentNode.appendChild(t)
          t.style.left = b.style.left
          t.style.top = b.style.top
          nextTrail = (nextTrail + 1) % trail.length
        }

        b.style.left = this.X + 'px'
        b.style.top = this.Y + 'px'
        if(this.X + sz > parseInt(sb.style.width) || this.X < 0) this.dx *= -1
        if(this.Y + sz > parseInt(sb.style.height) || this.Y < 0) this.dy *= -1
        this.X += this.dx
        this.Y += this.dy
      }
    }

    var snakes = new Array()

    // L'evento in questo caso ha due argomenti, in sede di invocazione possiamo mettere
    // anche meno argomenti oppure possiamo metterne di più.
    // Gli argomenti attuali della funzione vengono forniti all'interno di un dizionario in cui vengono
    // messi i nomi associati nella definizione associati con il valore che mettiamo nella chiamata
    // questo vuol dire che chiamate in punti diversi della stessa funzione possono avere un numero di argomenti
    // diversi con valori diversi.
    window.addEventListener("load", function(){
      var sb = document.getElementById('snakeBox')
      var t = null
      sb.addEventListener('click', function(e){
        var box = new Box(sb)
        box.X = e.offsetX
        box.Y = e.offsetY
        snakes.push(box)
        if(!t){
          // All'inizio se non ci sono scatole è inutile avviare il timer.
          // Quando faccio setInterval viene restituito un elemento che ci permette anche di bloccare il
          // timer. Per bloccarlo gli passo il valore che restituisce.
          t = setInterval(function(){
            for(var i = 0; i < snakes.length; i++){
              snakes[i].UpdateBox()
            }
          },20)
        }
      })
    })
    </script>
  </head>


  <body>
    <!-- Il browser applica delle politiche per fare in modo che quello che sta sullo schermo
    sia visualizzato nel modo giusto -->

    <h1>Esempio di animazione</h1>
    Il quadrato si anima se clicchi
    <div id="snakeBox" style="background: blue; width:500px; height: 500px; position: absolute">
  </div>
  </body>
</html>

<!--  -->

<!-- Si sono sviluppate delle logiche di layout per fare in modo che quando cambio la finestra
    cambio la dimensione della finestra.
    Il layout di controlli lo può fare il browser e ha introdotto uno standard su come fare il layout dei
    controlli che si adatti alla disposizione.
    Prima parte: box model: per ogni elemento calcolo un rettangolo che deve occupare sullo schermo, è il
    bounding box.
    Per normali esigenze di layout ci sono varie scatole, il body ad esempio all'inizio con le tre scritte è
    un rettangolo con una spaziatura attorno c'è il bordo e la spaziatura interna che se
    non vengono specificate sono 0. Visto che le scatole devono essere posizionate una vicino all'altra allora
    potremmo voler controllare il margine delle scatole dai vicini, questo è perchè c'è il margine.
    Oltre a definire il box model il web browser ha una serie di proprietà che caratterizzano tutte le
    proprietà che riguardano la pagina (tipo i font, i colori)  .


    Canvas: si comporta come una bitmap dove si fa double buffering.
    Fino ad ora abbiamo preso modificato la posizione di un elemento che stava già nel dom. Ora vogliamo
    creare un nuovo elemento che all'inizio non è presente.
    documents.createElement = funzione che fa parte del dom, gli chiediamo di creare un elemento


-->