La prima cosa che dovete capire è come inizializzare i vostri eventi. Qui c'è l'inizializzazione di base per l'evento "onkeydown".
document.onkeydown = keyDownQuando questo codice viene letto il browser richiamerà la funzion keyDown() ogniqualvolta un tasto venga premuto, non importa quale funzione richiamerete e il codice non necessita di parentesi dopo il nome funzione.
Capire quale dei tasti sia stato premuto risulta leggermente differente nei due browser. Così esaminerò i due codici in due paragrafi distinti.
document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN)La vostra funzione keyDown() deve fornire una variabile nascosta - io userò la lettera "e" poiché e questa quella che viene comunemente usata.
function keyDown(e)Questa "e" rappresenta la chiave che è stata appena premuta. Per capire quale chiave essa sia potete usare la proprietà which:
e.whichQuesta darà il codice per il tasto - non quale lettera o numero sia stato premuto. Per convertire l'indice in una lettera o valore numerico, userete:
String.fromCharCode(e.which)Così mettendo tutto insieme possiamo scrivere una funzione che scriva un messaggio recante il codice del tasto e il reale vaolore in codice del tasto che è stato appena premuto:
function keyDown(e) { var keycode = e.which var realkey = String.fromCharCode(e.which) alert("keycode: " + keycode + "\nrealkey: " + realkey) } document.onkeydown = keyDown document.captureEvents(Event.KEYDOWN)Osservate questo esempio (solo per Netscape)
E la conversione al reale valore del tasto è lo stesso: String.fromCharCode(event.keyCode).
function keyDown() { var keycode = event.keyCode var realkey = String.fromCharCode(event.keyCode) alert("keycode: " + keycode + "\nrealkey: " + realkey) } document.onkeydown = keyDown document.onkeydown = keyDownOsservate questo esempio (solo per Internet Explorer)
Ciò che io suggerirei è di dimenticarsi totalmente dei valori reali dei tasti e di lavorare solo con i codici. Il seguente codice assegnerà nKey al keycode e a ieKey a 0 se state lavorando con Netscape oppure ieKey al codice e nKey a 0 se state utilizzando Internet Explorer. Quindi mostra una finestra di avvertimento di entrambi i valori:
function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} alert("nKey:"+nKey+" ieKey:" + ieKey) } document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN)Osservate questo esempio
Ora le cose ben fatte....
function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN) } function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if (nKey==97 || ieKey==65) { // se viene premuta una "A" key slide() } } function slide() { block.xpos += 5 block.left = block.xpos status = block.xpos // non necessaria se viene solamente mostrata setTimeout("slide()",30) }Osservate questo esempio
Ho sviluppato una tecnica che usa delle variabili "attive" pr rappresentare l'attuale stato del movimento... si sta muovendo? non si sta muovendo? Una volta che avrete imparato a lavorarci su diventeranno molto utili. Poiché la maggior parte delle funzioni che regolano il movimento sono ricorsive non hanno un modo per fermarsi e qui entrano in azione le variabili attive. Inserendo l'"if" appropriata nella funzione di slide, voi potete controllare se quella funzione verrà ripetuta o no. Di solito la funzione viene così costruita:
function slide() { if (myobj.active) { myobj.xpos += 5 myojb.left = myobj.xpos setTimeout("slide()",30) } }In questo caso , la funzione slide() sarà operativa solamente quando il valore di myobj.active e true. Una volta posto il valore di myobj.active a false la funzione del movimento terminerà. Sapendo questo, possiamo inserire qualche riga di codice nel nostro script che ci permetterà un maggiore controllo di che cosa sta accadendo.
document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)La funzione keyUp() rimane pure uguale. Ma noi vogliamo fare in modo che l'oggetto si arresti quando rilasciamo il tasto. per farlo possiamo porre la variabile attiva del nostro block a 0:
function keyUp(e) { if (ns4) var nKey = e.which if (ie4) var ieKey = window.event.keyCode if (nKey==97 || ieKey==65) block.active = false }Per salvaguardare totalmente il nostro codice da "errori", dobbiamo stabilire alcuni punti di controllo nelle altre funzioni. Osservate il codice qua sotto e cercate di capire quel che sto facendo.Nella funzione keyDown, la && !block.active ci assicura che noi stiamo attivando solamente la funzione se block non è attivo. In parole povere se block si sta muovendo non eseguiamo di nuovo la funzione slide(). Quindo poniamo il valore attivo a true e spostiamo block. La funzione slide() ha la if (block.active) cosicché si muove solamnete quando il valore di block.active è true - in questo modo quando rilasciamo il tasto fermerà l'esecuzione.
function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.active = false document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) } function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed block.active = true slide() } } function keyUp(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if (nKey==97 || ieKey==65) { block.active = false // if "A" key is released } } function slide() { if (block.active) { block.xpos += 5 block.left = block.xpos status = block.xpos // not needed, just for show setTimeout("slide()",30) } }Osservate questo esempio
Home | Prossima Lezione: Controlli Audio |