Introduzione a JavaScript
Parte 2
Ecco il codice:
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.
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:
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:
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 ...
toolbar
Al posto di pixels dovete scrivere il numero di pixel, così potete specificare al
browser quanto deve essere grande la vostra finestra.
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.
<img src="mycool.gif" height=100 width=100>
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).
<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.
Numeri casuali
<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>
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
return num;
}
Creazione di finestre
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>
Come al solito, al pulsante è associata una funzione, WinOpen(), che crea una nuova finestra
invocando il metodo open.
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Clicca qui" onclick="WinOpen()">
</form>
</body>
</html>
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:
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
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!
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:
Ultima modifica: 7 Settembre '96
© 1996 by Stefan Koch
Traduzione di Andrea Chiarelli