Javascript, ancora appunti

Inizializzazione

Seguendo il criterio di separazione del codice dall’ HTML, il codice javascript andrà scritto in head.
Per “inizializzare” una pagina con gli event listeners, si sfrutta l’ evento onload di window:

<script type="text/javascript">
    callback = function(event) {
        event.preventDefault();
        for (prp in event) {
            console.log(prp, event[prp]);
        }
    }
    window.onload = function() {
        document.getElementById("link").addEventListener("click", callback, false);
    }
</script>

Nel precedente esempio vanno notate anche diverse altre cose:

  • alla funzione di callback viene passato da addEventListener l’ oggetto dell’ evento, così scrivendo la funzione di callback possiamo sfruttarne i membri.
  • Per “bloccare” l’ azione predefinita di un evento su un elemento del DOM, si usa event.preventDefault().
  • Per effettuare un “dump” di un oggetto in javascript si può sfruttare una notazione di array, come in questo frammento di codice: for (proprietà in oggetto) console.log(proprietà, oggetto[proprietà]);

Più in generale: l’ evento onload è definito solo per window e non per document.body; scrivere

window.onload = init();

significa chiamare la funzione init() ed assegnare il suo valore di ritorno a window.onload .
L’ assegnazione di una funzione si effettua così:

window.onload = init;

E’ preferibile operare anche così:

window.addEventListener("load", init);

Creazione elementi ed eventi

<div id="container"></div>
<script>
  function imageclick(param) {
    alert("This is the image of: " + param);
  }
  var container = document.getElementById("container");
  var i = document.createElement("IMG");
  i.src="http://some/file/name.jpg";
  container.appendChild(i);
  if(i.addEventListener) {  
    i.addEventListener('click', function(){imageclick('Name');}, false);
  } 
  else {
    i.attachEvent('onclick', function(){imageclick('Name');});  
  }  
</script> 

Fonte:

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...