Java Script 1

Java Script

Questa pagina avrà un taglio nettamente pratico; gli esempi presentati saranno in qualche caso volutamente non ottimizzati per favorire la comprensione del lettore.
Se ancora non lo avete fatto, potete leggere l' introduzione, altrimenti passate agli esempi.
Nota: La pagina sarà aggiornata settimanalmente (se possibile) con nuovi esempi.

Il tempo trascorso in una pagina:

Il nostro primo Java Script ci mostrerà l' uso degli eventi onLoad è onUnload che si attivano quando si carica e scarica una pagina HTML. Oltre a questo vedremo la dichiarazione delle variabili nonchè qualche funzione, e la chiamata ad una finesta di informazione.
La funzione dello script sarà dirci quanto tempo abbiamo trascorso nella pagina che lo contiene.
Per cominciare inserite nel Head della vostra pagina il tag <script language = "JavaScript"> che indicarà al browser il linguaggio che userete.
A continuazione dichiariamo la variabile oraApertura che immagazzinerà a che ora il lettore ha aperto la nostra pagina, per farlo scriviamo:

var oraApertura = 0;

Per immagazzinare l'ora abbiamo bisogno di una funzione che ce la indichi, questa sarà:

function primaOra() {
now = new Date();
oraApertura = now.getTime();
}

Notate che alla variabile oraApertura viene assegnato il valore della funzione now.getTime(), essendo now prima creato come un oggetto di tipo Date, ossia che Date() è il costruttore della classe.
Adesso possiamo scrivere la funzione che ritorna il tempo trascorso:

function calcolaTempo() {

var oraCambia = 0;
var tempoTrascorso = 0;

     now = new Date();
     oraCambia = now.getTime();
     tempoTrascorso = ((oraCambia - oraApertura) / 1000);
     alert ( "Sei stato qui " + tempoTrascorso + " Secondi");

}
Finiamo il nostro script chiudendo il tag:
</script>

Come vedete all' interno abbiamo dichiarato le funzioni oraCambia e tempoTrascorso che saranno l'ora nella quale il lettore abbandona la pagina e il tempo che ha trascorso in questa. Ma perchè all' interno? Per segnalare che sono usate solo da questa funzione, ossia esisteranno solo al suo interno mentre oraApertura è "vista" da tutto lo script, infatti la usiamo nelle 2 funzioni. Diremmo che oraApertura è una variabile "globale".
Un discorso simile si potrebbe fare per now che sebbenne lo troviamo nelle 2 funzioni non sono lo stesso. Allora perchè non l' abbiamo creato all' esterno e risparmiato una riga di codice? Considerate che il lettore visiti la pagina dalle 23:59 alle 00:10 siccome now = new Date() crea un oggetto di tipo data con la data e l'ora del monento nel quale è stato creato pensate cosa succederebbe...
La funzione getTime ritorna il tempo in millisecondi per cui in tempoTrascorso dividiamo tra 1000 il risultato della differenza tra oraCambia e oraApertura.
Per ultimo Alert( messagio ) apre una finestra di informazione, notate che per concatenare le stringhe usiamo il simbolo +.
Chiudete il Head e inserite:
<body onload = "primaOra()" onUnload = "calcolaTempo()">
Volete vedere il risultato dello script? Provate a cambare pagina...
Sperimentate fino all' esempio della prossima settimana, ciao!

Aprire una finestra personalizzata:

Dopo qualche settimana di relax torniamo con il nostro secondo script; la sua finalità sarà aprire una nuova finestra in una posizione determinata da noi.
Come al solito cominciamo inserendo nel Head della pagina:

Dopo di che definiamo la nostra funzione:

function miaFinestra() {

window.open('esempio2.html','miaFinestra','width='+screen.width+',height=130,top=0,left=screen.availLeft');
}

Finiamo il nostro script con il tag:

</script>

Vediamo cosa abbiamo fatto...
La funzione miaFinestra() chiama il metodo open dell' oggetto window, la sua sintassi è:

window.open('URL','nomeFinestra','opzioniFinestra');

'opzioniFinestra' è una lista di tutte o parte delle seguenti opzioni separate da una virgola:
toolbar,location,directories,status,menubar,scrollbars,resizable,copyhistory,width,height,top,left

Nel nostro esempio abbiamo usato le ultime 4 i cui valori devono essere pixels (ossia height = 50 sono 50 pixels di altezza). Le opzioni anteriori a width possono essere uguali a yes o no; se per 'opzioniFinestra' non si specifica nessuna opzione, saranno tutte uguali a yes (vere) per default, ma se se ne specifica almeno una (come nel nostro esempio) saranno tutte no (false).
Come potete intuire le prime 6 opzioni permettono di visualizzare diversi componenti del browser, mentre resizable permette all' utente di ridimensionare (o no) la finestra, e copystory rende la history (indice delle pagine visitate) del navigatore disponibile nella nuova finestra.
Abbiamo detto che per width e height i valori devono essere in pixels, ma noi abbiamo scritto with = 'screen.width' in realtà abbiamo chiamato una proprietà che ci ritorna la larghezza dello schermo (in pixels), lo stesso si può fare per l' height = screen.height, invece per left abbiamo usato availLeft che ci indica la posizione più a sinistra non usata per una taskbar del sistema, lo stesso vale per top = availTop, (la copia "left,top" definiscono le coordinate del punto superiore sinistro della finestra).

Per ultimo chiudiamo l' Head e nel Body della pagina scriviamo:

che ci mostra il seguente bottone che chiama la nostra funzione all' essere premuto ( notate il : onClick="miaFinestra(); ) :

Come mai non funziona? Ah, allora avete l' Explorer... bene non disperate, succede che, come era stato detto nell' introduzione, JavaScript e Jscript non sempre sono compatibili. Questo script si' che funziona (anche per Netscape):

function miaFinestraDue() {

window.open('esempio2.html','miaFinestra','width=640,height=130,top=0,left=0');
}

</script>

Ecco la prova:

Potete vedere lo script su come chiudere la finestra nei Tips.
Sperimentate ad aprire la finestra con una diversa dimensione e posizione mostrando la toolbar del navigatore.
Il prossimo java script tra 2 settimane, nel frattempo saranno aggiornate altre sezioni del sito, per ultimo ricordate che potete collaborare inviando vostri tips, ciao!.