Progammare in JavaSCcript

Introduzione a JavaScript Parte 2

La proprietà onMouseOver

Potete vedere la funzione di Javascript di cui ci occuperemo ora muovendo il puntatore del mouse su questo link. Ora osservate la statusbar in fondo alla finestra del browser. E' possibile combinare ciò con altre funzioni Javascript. Se vi posizionate sopra questo link comparirà una finestra. Ora vi mostrerò il sorgente di questi due effetti:

<a href="stupid.htm" onMouseOver="window.status='Questo è uno stupido link ...';

 return true">

L'unica cosa che dovete fare è aggiungere la proprietà onMouseOver al tag <a>; 'window.status' vi permetterà di scrivere sulla statusbar del browser. Come potete vedere dovete racchiudere il testo tra singoli apici ('); non potete usare i doppi apici ("), altrimenti Javascript non sarà in grado di identificare la stringa che volete visualizzare nella statusbar. Dopo la stringa occorrerà scrivere ;return true.
Il secondo esempio usa Javascript invocando la funzione alert. Ecco il codice:

<html>

<head>

<script language="JavaScript">

<!-- nasconde lo script ai vecchi browser

     function ciao() {

       alert("Ciao!");

     }

// -->

</script>

</head>

<body>

<a href="" onMouseOver="ciao()">link</a>

</body>

</html>

E' molto semplice: viene usata la proprietà onMouseOver e la funzione ciao() viene invocata quando si verifica il relativo evento.

Altre funzioni relative alla data

Voglio mostrarvi ora un altro esempio di uso dei metodi relativi all'ora e alla data. Abbiamo visto come funziona la proprietà lastModified. Ora visualizzeremo l'ora nel nostro documento. Questo metodo utilizza l'ora e la data della vostra macchina, quindi se avete la data della macchina impostata al 17/5/1983 otterrete ovviamente la data sbagliata. Non si tratta quindi di un'ora e una data fornita da Internet (o qualcosa del genere).

Ecco il codice:

<script language="JavaScript">

<!-- 

  oggi = new Date()

  document.write("L'ora attuale è: ",oggi.getHours(),":",oggi.getMinutes())

  document.write("

La data di oggi è: ", oggi.getDate(),"/",oggi.getMonth() + 1,"/",oggi.getYear());

// -->

</script>

Come prima cosa creiamo una variabile contenente la data di oggi. Questo è fatto con oggi=new Date(). Se non specifichiamo una certa ora e una data, il browser utilizza l'ora locale e l'assegna alla variabile oggi. Notate che non occorre dichiarare la variabile oggi. Questa è una differenza nei confronti di Java e della maggior parte degli altri linguaggi di programmazione in cui è necessario specificare il tipo di una variabile prima del suo uso.
Abbiamo quindi creato un oggetto contenente l'ora e la data locali. Ora possiamo scrivere il suo contenuto nel documento. Bisogna scrivere oggi prima di ciascun metodo get, altrimenti il browser non sa a quale oggetto ci si riferisce. Il metodo getMonth() restituisce un numero compreso tra 0 e 11 (0 sta per gennaio e 11 per dicembre), quindi dobbiamo aggiungere 1 al numero restituito per ottenere il mese corretto.
Una cosa interessante a cui si potrebbe pensare è creare una data, per esempio la data di creazione di un documento, a partire dalla quale è possibile calcolare dopo quanti giorni qualcuno legge il vostro documento e , se sono passati più di 10 giorni, si potrebbe dire qualcosa come: Ehi, questo documento è molto vecchio, non leggerlo!
Per fare ciò avrete bisogno della data di oggi, come mostrato nell'esempio precedente, e la data di creazione. E' possibile impostare una data durante la creazione di un oggetto data, come nel seguente esempio: docStarted= new Date(96,0,13)
Bisogna specificare per prima cosa l'anno, poi il mese (ricordatevi di decrementare il mese di uno!) e infine il giorno. E' anche possibile specificare l'ora: docStarted= new Date(96,0,13,10,50,0)
I primi numeri definiscono sempre la data; essi sono seguiti dall'ora, i minuti e i secondi.

E' necessario che sappiate che Javascript non ha un vero e proprio tipo data, ma come vedete può lavorare con le date molto bene. Ciò funziona perché le date vengono rappresentate con il numero di millisecondi trascorsi dalle ore 0:0 del 1/1/1970. Può sembrare un po' complicato, ma è un metodo comune per rappresentare le date sui computer. Ma non preoccupatevi di questo, avrete a che fare soltanto con le relative funzioni e non è per niente difficile. Ho voluto dirlo soltanto per completezza.

Numeri casuali

Un problema comune riguarda l'uso di numeri casuali nei linguaggi di programmazione. Per il momento la funzione di generazione di numeri casuali in Javascript non funziona (credo comunque che verrà presto implementata), quindi dovremo sfruttare qualche trucco. Quella che vedremo è una tecnica che quasi tutti i compilatori che conosco utilizzano per generare numeri casuali. Sì, i numeri casuali vengono calcolati in base all'ora e alla data della tua macchina. Penso che la corrispondente funzione Javascript userà anch'essa questo metodo o qualcosa del genere. Come vi ho già detto prima, l'ora è rappresentata da un numero molto grande; è possibile utilizzare questo numero per fare qualche calcolo. Per esempio, potremmo calcolarne il seno e prendere il suo valore assoluto. Otterremo così un numero compreso tra 0 e 1. Poiché il valore dell'ora cambia ogni millisecondo, non correremo il rischio di ottenere lo stesso numero due volte di seguito. Se però vogliamo calcolare più numeri casuali in una sequenza temporale molto breve, non dobbiamo usare soltanto il seno: otterremmo una serie di numeri che segue la curva del seno! Ciò non è esattamente casuale. Ma se vogliamo calcolare un numero casuale e dopo 20 secondi ne vogliamo calcolare un altro, la funzione che vi ho proposto è certamente adatta.

Questo è un numero casuale:

Ecco il codice di questo esempio:

<html>

<head>

<script language="JavaScript">

function RandomNumber() {

  oggi = new Date();

  num= Math.abs(Math.sin(oggigetTime()));

  return num;  

}

</script>

</head>

<body>

<script language="JavaScript">

<!--

  document.write("Questo è un numero casuale:", RandomNumber());

// -->

</script>

</body>

</html>

Naturalmente la funzione di generazione di numeri casuali appena mostrata non è adatta per tutti gli scopi; serve soltanto a dare un'idea di come può essere realizzata una funzione di questo tipo. Vi presento ora una funzione che ho avuto da Maynard Demmon: dovete semplicemente impostare la variabile limits al valore che desiderate, per esempio 100, e otterrete un 'buon' numero casuale tra 0 e 99. Ecco il codice:

  function random() {

     today = new Date();

     num = today.getTime();

     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;

     return num;

  }

Creazione di finestre

La creazione di finestre è una caratteristica notevole di Javascript. Potete generare nuove finestre, caricare un documento HTML, navigare in Internet, tutto con Javascript. Ora vi mostrerò come è possibile aprire una finestra e scrivere qualcosa al suo interno. Se cliccate su questo pulsante vedrete quello che vado a spiegarvi.

Rompendo con la tradizione non ho scritto Ciao mondo! nella pagina ...
Ecco il sorgente:

<html>

<head>

<script language="JavaScript">

function WinOpen() {

   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");

   msg.document.write("<HEAD><TITLE>Ehi!</TITLE></HEAD>");

   msg.document.write("<CENTER><h1><B>E' veramente fantastico!</B></h1></CENTER>

");

}

</script>

</head>

<body>

<form>

<input type="button" name="Button1" value="Clicca qui" onclick="WinOpen()">

</form>

</body>

</html>

Come al solito, al pulsante è associata una funzione, WinOpen(), che crea una nuova finestra invocando il metodo open.
Il primo argomento contiene l'URL della pagina: qui potete inserire l'indirizzo di un documento HTML che volete caricare. Se lo lasciate vuoto ("") non verrà caricata nessuna pagina e potrete scriverci con Javascript!
L'argomento successivo specifica il nome della finestra: qui potete scrivere quasi tutto, ma non ha nessun effetto nel nostro esempio. Avrete comunque un messaggio d'errore se scrivete Display Window (con uno spazio tra le due parole - Netscape vi darà un'informazione strana, infatti ho impiegato una buona mezz'ora per riuscire a trovare l'errore in base alle sue indicazioni!).
L'ultimo argomento specifica le proprietà della finestra ed è veramente interessante. Potete dire se volete una toolbar, delle scrollbar ... Se scrivete toolbar=yes otterrete una toolbar nella vostra finestra. Nella lista seguente ci sono alcune proprietà che potete modificare nel modo che vi ho appena descritto e senza nessuno spazio tra di loro! Ecco ciò che potete modificare nella vostra pagina:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels

Al posto di pixels dovete scrivere il numero di pixel, così potete specificare al browser quanto deve essere grande la vostra finestra.
Dopo aver aperto la vostra finestra e l'avete associata alla variabile msg, potrete scrivere al suo interno. Potete utilizzare normale codice HTML! Potreste quindi costruire un documento HTML utilizzando l'input immesso da un utente in una form; ad esempio, potreste costruire una pagina con una form in cui l'utente scrive il suo nome e poi creare un nuovo documento HTML contenente il suo nome! Fino ad alcuni mesi fa ciò era possibile soltanto con script CGI!

Nota: Quando scrivete qualcosa all'interno di una finestra, dovete sempre inserire un <br> alla fine del testo, altrimenti potreste non vederne l'ultima riga. Ciò accade perché il browser scrive soltanto linee complete e se non trova la fine di una linea rimane in attesa di altro testo.
Un'altra cosa importante: Se volete inserire un'immagine in una nuova finestra, assicuratevi di impostare le proprietà height e width del tag <img> altrimenti non vedrete alcuna immagine o la visualizzazione della pagina darà qualche errore. Possono accadere infatti problemi molto strani e non vi aspettereste che la vera 'responsabile' è la vostra immagine. Quindi specificate sempre le immagini come nel seguente esempio e non avrete problemi:

TORNA INDIETRO