Nella realizzazione dei siti web, tutti vorrebbero applicare dei codici in Javascript o meglio, trovare delle applicazioni già pronte adatte al caso. Purtroppo sono pochi i siti web che, oltre a fare teoria, presentano degli esempi. Ci siamo sforzati a venire incontro a molti utenti fornendo molta ma molta pratica.
JavaScript é un nuovo linguaggio di scripting. Gli scripts scritti in JavaScript possono essere incapsulati nelle pagine HTML. Con JavaScript é possibile rispondere alle azioni dell'utente ( ad esempio un inserimento in un form). Questo accade senza una transazione sulla rete. In genere quando un utente inserisce un dato in una form é necessario trasmetterlo al server che lo elabora e restituisce una risposta. L'inserimento é controllato dal client e puó essere trasmesso dopo che sia stato controllato. In pratica é il browser che si occupa dell'elaborazione dei JavaScripts e non piú il Server.
Attenzione! JavaScript non é Java. Java é un linguaggio di programmazione molto piú complesso di JavaScript.
Si possono eseguire con Netscape Navigator 2.0 e versioni successive e con Internet Esplorer 3.0 e con tutti gli altri browser che li supportano.
Per capire come si possono implementare all'interno delle pagine HTML ecco un esempio:
Questo script scrive una riga di testo in un documento HTML.
<html>
<head>
Il mio primo JavaScript!
</head>
<body>
<br>
Questo è un normale documento in HTML.
<br>
<script language="JavaScript">
<!--
document.write("Questo è un JavaScript!")
</script>
<br>
Back in HTML again.
</body>
</html>
... produce:
Questo è un normale documento in HTML.
Back in HTML again.
Il codice document.write sta ad indicare: scrivi nel documento. Se vogliamo produrre un testo
in grassetto, di un certo colore, valgono le stesse considerazioni espresse nel codice HTML. Per es.:
document.write("<p align='center'><b><font size='6' color='#ff0000'>Questo è un Javascript</font></b></p>")
Vediamo ora di capire ogni punto di
questo primo script.
1. <SCRIPT
LANGUAGE="JavaScript">
Ecco il primo nuovo tag, SCRIPT
seguito dal parametro LANGUAGE.
Come siamo abituati con i tag in coppia
di HTML (se lo apri chiudilo...), tutto quanto racchiuso tra il tag di
apertura (in questo caso SCRIPT e il suo relativo tag di chiusura /SCRIPT)
è considerato JavaScript.
Il parametro LANGUAGE="JavaScript" è
necessario per la differenziazione da altri linguaggi di scripting.
2. <!-- Nascondi lo script dai browser non
compatibili
Abbiamo aggiunto questa riga, che è un commento di
HTML, per racchiudere tutto lo script in modo non sia mostrato a schermo
da un'eventuale browser non compatibile con gli script.
3. {
Con il carattere parentesi graffe aperte '{' racchiudiamo una serie di istruzioni
che potranno essere eseguite solo se la condizione impostata nella riga
<< risulterà vera, quindi unicamente se la variabile 'entra' risultasse 'true'..
4. document.writeln("<FONT FACE='Helvetica,Arial' SIZE='5' COLOR='red'>Ciao "
+ nome + "</FONT>Grazie per aver inserito il tuo nome.");
Con la funzione document.writeln possiamo inserire, nella pagina HTML, testo 'on the fly' (al volo...).
Notiamo che il testo è racchiuso da parentesi tonde e a sua volta dalle doppie virgolette. All'interno
notiamo però l'uso delle virgolette semplici per racchiudere elementi singoli.
Possiamo comunque concatenare più parti di testo. Nell'esempio, alla prima parte di testo
(racchiusa dalle doppie virgolette) abbiamo aggiunto (con il segno '+') la variabile 'nome'
e in seguito (sempre con il segno '+') altro testo.
Nel testo racchiuso tra virgolette doppie possiamo inoltre inserire anche tutti i tag di HTML
come ad esempio, in questo caso, per contenere gli elementi,
utilizziamo le virgolette semplici.
L'oggetto button, istanza di un oggetto
form, serve per controllare i pulsanti inseriti in un form
HTML.
Esempio:
Il seguente codice genera un bottone e mostra un
alert quando esso viene cliccato:
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.
Functions
Le Functions sono dichiarate tra i tags <head> dell' HTML. Le Functions sono chiamate dagli eventi generati dall'utente. É per questo che é ragionevole inserirle tra i tags <head> visto che sono caricati dal browser prima che l'utente possa fare qualcosa che provochi la chiamata ad una funzione. Gli Scripts possono essere inseriti tra i tags di commento <!-- --> in questo modo i vecchi browsers non visualizzeranno il sorgente.
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
Se vuoi testare lo Script premi il bottone ...
Questo scripts crea un bottone che se premuto apre un finestra messaggio 'Hello!'
La function é caricata e trattenuta in memoria. Il bottone é stato creato con i tags (HTML) standard dei form. É stato inserito un nuovo elemento nel tag <input> , 'onclick'. Questo indica al browser quale funzione deve essere richiamata quando il bottone viene premuto. La function 'pushbutton()' é dichiarata nell' header. Quando il bottone viene premuto questa function viene eseguita. C'é un altro nuovo elemento in questo script- il metodo 'alert'. Anche questo metodo é dichiarato in JavaScript - occorre solamente richiamarlo. Esistono diversi metodi che si possono richiamare, noi ne mostreremo alcuni, é presente una lista completa nel sito Netscape.
Come leggere gli input
inseriti dall'utente nelle forms...
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Ora si puó testare lo script ..
Scrivi il tuo nome
:
I commenti cominciano subito dopo il tag <script> e
terminano subito prima del tag </script>. I vecchi browser ignorano i due
tags <script> e </script> perché non li conoscono e naturalmente il
commento in quanto tale. In questo documento quanto l'utente inserisce il nome
nel form, il metodo 'onBlur' inserito nel tag <input> indica al client
quale funzione richiamare. La function 'getname(str)' sará chiamata quando si
'lascia' il campo della form o quando si preme enter dopo aver inserito qualche
cosa. La function riceve la stringa inserita tramite il comando
'getname(this.value)'. 'This.value' indica il valore inserito nel campo della
form.
Implementiamo ora la function data nel nostro script. É possibile fare visualizzare dal client le ultime modifiche al documento. In questo modo non sará necessario cambiare la data nel sorgente del documento HTML ogni volta che lo si modifica.
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="JavaScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
Con la versione beta2 di Netscape 2.0 occorreva scrivere lastmodified. Ora con le nuove versioni il metodo é cambiato in lastModified. É bene quindi fare attenzione a come si scrive il codice JavaScript che é case sensitive.