Il Javascript

Cos'è il Javascript?

Il Javascript è un linguaggio di scripting, e qui spiegherò brevemente come integrarlo in una pagina HTML HTML. è comodo perché ci permette di interagire con l'utente (l'HTML è completamente passivo).

NB: Non c'entra niente con il Java, non è creato da Oracle e non funziona con Java. Il nome deriva principalmente dalla somiglianza tra le sintassi dei due linguaggi.

Il Javascript

Le istruzioni Javascript sono racchiuse nel tag SCRIPT, in questo modo:

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            comandi
        </script>
    </body>
</html>

Inserire commenti

Per inserire un commento si possono usare due modi:

A riga singola:

// commento

O a righe multiple:

/*
commento
altro commento
*/

La funzione alert

Serve per visualizzare un messaggio d'allerta, ma noi lo possiamo usare anche per le cavolate:

alert("Messaggio");

La funzione write

Deve essere usata con l'istanza document e scrive sulla pagina HTML:

document.write("Testo");

Domanda frequente: Si può modificare lo stile del testo nella funzione write? Certo! Così:

document.write("<p style='font-family:courier new;'>Testo</p>");

Possono essere usati tutti i tipi di tag che si vuole.

L'istruzione var

Dichiara variabili:

var Variabile;

Per definirla:

Variabile = Valore;

Valore può essere un numero intero o a virgola mobile oppure una stringa (quest'ultima va tra virgolette).

Es:

var a, b, c;
a = 3;
b = 5;
c = a * b;
alert(c);

Noi vedremo un messaggio di allerta con scritto 15. Ecco cosa abbiamo fatto: abbiamo definito due variabili, una con il valore di 3 e l'altra di 5, ne abbiamo poi definita un'altra che ha come valore un espressione, cioè a x b (3 x 5) e con la funzione alert abbiamo visualizzato il valore di c.

Gli operatori matematici più importanti sono:

+ (più)
- (meno)
/ (diviso)
* (per)

In questo modo si possono fare espressioni complesse.

L'istruzione if

Come negli altri linguaggi di programmazione, esegue una funzione nel caso in cui la condizione sia soddisfatta.

var a, b;
a = 10;
b = a / 2;
var c;
if (b == 5) {
    c = a / b;
} else if (a == b) {
    c = b * 2;
} else {
    c = a * 2;
}
alert(c);

Ricordiamoci che la condizione va fra parentesi tonde, mentre le istruzioni condizionali vanno fra parentesi graffe.

In questo caso la prima condizione viene soddisfatta, quindi visualizzerà il valore 2.

La funzione prompt

Fa una domanda richiedendo un input.

a = prompt("Qual è il tuo nome?", "Nome");
document.write("Benvenuto " + a + "!");

Nome è l'input preimpostato, ossia una sorta di esempio.

Nella funzione write il + serve per unire il testo con il valore della variabile a.

Es:

var a, b, c;
a = 1;
b = 2;
c = 3;
document.write("Le variabili sono: a (" + a + "); b (" + b + "); c (" + c + ").");

Visualizza Le variabili sono: a (1); b (2); c (3)..

La funzione confirm

Serve per dare conferma.

var a;
a = confirm("Vuoi rispondere alla domanda?");
if (a == true) {
    var b;
    b = prompt("Quanto fa 1 + 1?");
    if (b == 2) {
        alert("Sbagliato! 11!");
    } else {
        alert("Fa 2!");
    }
} else if (a == false) {
    alert("Ok, va bene.");
}

NB: Le spaziature dal margine servono per non fare confusione e tenere il codice ordinato, e non vi è limite al numero di istruzioni if da annidare una dentro all'altra. Esempio:

var a = 2;
if (a == 2) {
    var b = 3;
    if (b == a) {
        var c = 5;
        if (c == a) {
            var d = 10;
            if (d == a)
                alert("Com'è possibile?");
        }
    }
}

Notare che se l'istruzione condizionale è una sola, non sarà necessario inserire le graffe. Solo l'istruzione successiva verrà condizionata.

Il costrutto switch-case

Esegue delle istruzioni se la condizione sulla variabile è vera.

var a = 3;
switch (a) {
    case "2":
        alert("a = 2");
        break;
    case "3":
        alert("a = 3");
        break;
    default:
        alert("Default: a = " + a);
        break;
}

Se la variabile a vale "2" visualizza a = 2, se la variabile a vale "3" visualizza a = 3, mentre in tutti gli altri casi visualizza un messaggio di default.

Quindi è analogo a:

var a = 3;
if (a === "2")
    alert("a = 2");
else if (a === "3")
    alert("a = 3");
else
    alert("Default: a = " + a);

Notare che in entrambi i casi le prime due condizioni falliscono perché non appartengono allo stesso tipo. L'operatore comparativo === specifica che l'uguaglianza deve essere rispettata senza effettuare conversioni tra numeri e stringhe, differentemente da ciò che si è visto con gli esempi precedenti che usano == (solo due uguali).

Utilità varie

L'attributo length

Restituisce un numero intero che equivale alla lunghezza della variabile.

var a = "Ciao Pippo";
document.write(a.length);

Scriverà 10.

La funzione toUpperCase

Restituisce la stringa in tutto maiuscolo.

var a = "Ciao Pippo";
document.write(a.toUpperCase())

Scriverà CIAO PIPPO.

La funzione toLowerCase

Restituisce la stringa in tutto minuscolo.

var a = "Ciao Pippo";
document.write(a.toLowerCase());

Scriverà ciao pippo.

La funzione replace

Restituisce la stringa sostituendo la parola specificata con un'altra.

var a = "Ciao Pippo";
document.write(a.replace("Pippo","Pluto"));

Scriverà Ciao Pluto.

La funzione split

Restituisce la stringa sostituendo il carattere o i caratteri specificati con una virgola.

var a = "Ciao Pippo";
document.write(a.split(" "));

Scriverà Ciao,Pippo.

La funzione eval

Restituisce valore matematico da una stringa.

var a, b;
a = '1';
b = 1;
document.write(eval(a) + eval(b));

Scriverà 2.

Facendo così invece:

var a, b;
a = '1';
b = 1;
document.write(a + b);

Scriverà 11. In questo caso la variabile b viene convertita in stringa e l'operatore + corrisponde alla concatenazione di stringhe invece che alla somma.

L'istruzione function

Crea una funzione, ossia una serie di istruzioni da eseguire usando una parola chiave con eventuali argomenti.

function a() {
    alert("Ciao ciccio!");
}
document.write("<input type='button' value='Clicca!' onclick='a()'>");

Così quando viene premuto sul bottone Clicca! verrà visualizzato su una finestra Ciao ciccio!.

L'istruzione return

Quando è dentro a una funzione, restituisce il valore specificato:

function Moltiplica(a, b) {
    return a * b;
}
document.write(Moltiplica(3, 2));

Questa funzione effettua l'operazione a per b. Il valore delle variabili di input saranno determinate solo quando saranno specificate durante la chiamata della funzione.

Esempio di una funzione integrata in HTML

<html>
    <head>
        <style>
            body {
                font-family:"times new roman";
                color:#000011;
                bgcolor:#FFEEFF;
            }
            h2 {
                font-size:18px;
            }
            p {
                font-size:13px;
            }
        </style>
        <script type="text/javascript">
            function Controlla() {
                if (document.f.b.checked) {
                    alert("Sfortunatamente no.");
                } else if (document.f.c.checked) {
                    alert("Non sono un millepiedi.");
                } else if (document.f.a.checked) {
                    alert("Quello però almeno funziona!");
                }
        </script>
    </head>
    <body>
        <h2>Quante dita ho nelle mani?</h2>
            <form method="get" onsubmit="Controlla()" name="f">
                <p><input type="checkbox" name="a" />Uno solo</p>
                <p><input type="checkbox" name="b" />Dieci</p>
                <p><input type="checkbox" name="c" />Cento</p>
                <input type="submit" value="Verifica" />
            </form>
    </body>
</html>

Si può notare come document.f.c possa essere considerato come un percorso che parte dal documento e, come in una cartella, si sceglie uno dei possibili oggetti appartenenti a quello di grado superiore, e i loro nomi sono definiti tramite name. checked serve per verificare quale delle caselle è stata selezionata.

Calcolatrice a due addendi

<html>
    <head>
        <style>
            body {
                font-family:"times new roman";
                color:#000011;
                bgcolor:#FFEEFF;
            }
            h2 {
                font-size:18px;
            }
            p {
                font-size:13px;
            }
        </style>
        <script type="text/javascript">
            function calc() {
                var a, b;
                a = eval(document.tot.adda.value);
                b = eval(document.tot.addb.value);
                document.tot.ris.value = a + b;
            }
        </script>
    </head>
    <body>
        <h2>Calcolatrice a due addendi</h2>
            <form name="tot">
                <p><input type="text" name="adda" /> + <input type="text" name="addb" /> = <input type="text" name="ris" /></p>
                <input type="button" value="Calcola" onclick="calc()" />
            </form>
    </body>
</html>

Ricopiate il codice su un documento di testo .txt, rinomina il file in .htm e aprite il file: ecco la calcolatrice a due addendi!

L'evento ONCLICK

Come abbiamo visto prima esegue codice Javascript o una funzione al clic del mouse sull'elemento del tag in cui è specificato ONCLICK:

<input type="button" value="Clicca qui!" onclick="a()" />

Utilizzabile nei tag A e INPUT.

L'evento ONFOCUS

Esegue codice Javascript nel caso venga selezionato il riquadro di testo:

<input type="text" onfocus="a()" />

Utilizzabile nei tag SELECT, INPUT TEXT e TEXTAREA.

L'evento ONBLUR

Esegue codice Javascript nel caso venga deselezionato il riquadro di testo:

<input type="text" onblur="a()" />

Utilizzabile nei tag SELECT, INPUT TEXT e TEXTAREA.

L'evento ONMOUSEMOVE

Esegue codice Javascript o una funzione nel caso venga mosso il mouse nell'oggetto del tag in cui è stato specificato ONMOUSEMOVE:

<p onmousemove="a()">Passa con il mouse qui!</p>

Utilizzabile nei tag che creano oggetti.

L'evento ONMOUSEOUT

Esegue codice Javascript o una funzione nel caso venga spostato il cursore fuori dall'oggetto del tag in cui è stato specificato ONMOUSEOUT:

<input type="text" onmouseout="a()" />

Utilizzabile nei tag A, INPUT, TEXTAREA e in tutte le aree cliccabili.

L'evento ONMOUSEDOWN

Esegue codice Javascript o una funzione nel caso venga premuto un pulsante del mouse.

<input type="button" value="CIAO!!" onmousedown="a()" />

Utilizzabile nei tag BODY, A, INPUT BUTTON, INPUT SUBMIT e INPUT RESET.

L'evento ONMOUSEOVER

Esegue codice Javascript o una funzione nel caso venga spostato il puntatore nell'oggetto del tag in cui è specificato ONMOUSEOVER:

<input type="text" onmouseover="a()" />

Utilizzabile nei tag A, INPUT, TEXTAREA e in tutte le aree cliccabili.

L'evento ONMOUSEUP

Esegue codice Javascript o una funzione nel caso venga rilasciato un pulsante del mouse sopra l'oggetto in cui è specificato ONMOUSEUP:

<input type="submit" onmouseup="a()" />

Utilizzabile nei tag A, INPUT BUTTON, INPUT SUBMIT e INPUT RESET.

L'evento ONKEYPRESS

Esegue codice Javascript o una funzione nel caso venga digitato un carattere e venga visualizzato:

<input type="text" onkeypress="a()" />

Utilizzabile nei tag INPUT TEXT, TEXTAREA, A, BODY e IMG.

L'evento ONKEYDOWN

Esegue codice Javascript o una funzione nel caso venga digitato un qualsiasi tasto:

<input type="text" onkeydown="a()" />

Utilizzabile nei tag INPUT TEXT, TEXTAREA, A, BODY e IMG.

L'evento ONKEYUP

Esegue codice Javascript o una funzione nel caso venga rilasciato un qualsiasi tasto:

<input type="text" onkeyup="a()" />

Utilizzabile nei tag INPUT TEXT, TEXTAREA, A, BODY e IMG.

L'evento ONRESET

Esegue codice Javascript o una funzione nel caso venga premuto il pulsante del tag INPUT RESET all'interno del tag FORM:

<form onreset="a()">
<input type="reset" value="Reimposta" />
</form>

Utilizzabile nel tag FORM.

L'evento ONSUBMIT

Esegue codice Javascript o una funzione nel caso venga premuto il pulsante del tag INPUT SUBMIT all'interno del tag FORM:

<form onsubmit="a()">
<input type="submit" value="OK" />
</form>

Utilizzabile nel tag FORM.

L'evento ONSELECT

Esegue codice Javascript o una funzione nel caso venga selezionato un testo in un'area di testo.

<input type="text" onselect="a()" />

Utilizzabile nei tag INPUT TEXT e TEXTAREA.

L'evento ONDBLCLICK

Esegue codice Javascript o una funzione nel caso venga fatto doppio clic sull'elemento del tag in cui è specificato ONDBLCLICK:

<select size="3" ondblclick="a()">
<option value="food">Cibo</option>
<option value="blood">Sangue</option>
<option value="brain">Cervello</option>
</select>

Utilizzabile nei tag A e BODY, non disponibile per i Macintosh.

Il tag INPUT TEXT

Serve per far inserire all'utente un testo o input, supporta gli eventi ONCLICK, ONDBLCLICK, ONSELECT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONFOCUS e ONBLUR. Il risultato di:

<input type="text" name="uno" />

sarà:

Esempi:

<html>
    <head>
        <script type="text/javascript">
            function f() {
                document.un.in.value = "Focus effettuato";
            }
        </script>
    </head>
    <body>
        <form name="un">
            <input type="text" name="in" onfocus="f()" />
        </form>
    </body>
</html>

Così quando si effettua il focus (cioè che quando il cursore comincia a lampeggiare) nella barra verrà visualizzato Focus effettuato.

<html>
    <head>
        <script type="text/javascript">
            function b() {
                document.et.ciccio.value = "Focus inattivo";
            }
            function f() {
                document.et.ciccio.value = "Focus attivo";
            }
        </script>
    </head>
    <body>
        <form name="et">
            <input type="text" name="ciccio" value="Focus inattivo"; onblur="b()" onfocus="f()"/>
        </form>
    </body>
</html>

In questo modo quando il focus è attivo visualizza Focus attivo, quando è disattivo visualizza Focus inattivo.

<html>
    <head>
        <script type="text/javascript">
            function lol() {
                alert(document.ehi.pippo.value);
            }
        </script>
    </head>
    <body>
        <form name="ehi">
            <input type="text" name="pippo" value="Valore" onclick="lol()" />
        </form>
    </body>
</html>

Quando fai clic sulla barra ti visualizza in una finestra di allerta il valore della barra.

<html>
    <head>
        <script type="text/javascript">
            function x() {
                a = prompt("Scrivere il valore da dare alla barra","");
                document.quattro.gatti.value = a;
            }
        </script>
    </head>
    <body>
        <form name="quattro">
            <input type="text" name="gatti" ondblclick="x()" />
        </form>
    </body>
</html>

Facendo doppio clic sulla barra verrà chiesto di immettere il valore che verrà poi dato alla barra.

NB: Se fai clic su Annulla, verrà dato come valore null.

<html>
    <head>
        <script type="text/javascript">
            function s() {
                alert("Hai selezionato qualcosa");
            }
        </script>
    </head>
    <body>
        <form name="nome">
            <input type="text" name="input" onselect="s()" />
        </form>
    </body>
</html>

Quando verrà selezionato qualcosa dalla barra visualizzerà un messaggio di allerta.

Il tag INPUT BUTTON

Crea un bottone, supporta gli eventi ONCLICK, ONMOUSEDOWN, ONMOUSEUP e ONMOUSEMOVE. Il risultato di:

<input type="button" name="uno" value="Clicca!!" />

sarà:

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function c() {
                alert("Vuoi un applauso?");
            }
        </script>
    </head>
    <body>
        <input type="button" value="Clicca!!" onclick="c()" />
    </body>
</html>

Facendo clic su Clicca!! verrà visualizzato un messaggio d'allerta.

Il tag INPUT SUBMIT

Crea un bottone, supporta l'evento ONCLICK, ma è poco utile. Deve stare all'interno di un FORM, nel tag FORM può essere inserito l'evento ONSUBMIT.

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function s() {
                alert("Il nome della barra è: " + document.c.o.name);
                alert("Il valore invece è: " + document.c.o.value);
            }
        </script>
    </head>
    <body>
        <form name="c" onsubmit="s()">
            <input type="text" name="o" />
            <input type="submit" value="Vai" />
        </form>
    </body>
</html>

Facendo clic su Vai si visualizzano su due finestre di allerta il nome ed il valore della barra di testo.

Il tag INPUT CHECKBOX

Crea un riquadro selezionabile. Per renderlo selezionato di default al caricamento della pagina aggiungere CHECKED. Supporta l'evento ONCLICK. Il risultato di:

<p><input type="checkbox" name="uno" />Fante</p>
<p><input type="checkbox" name="due" />Cavallo</p>
<p><input type="checkbox" name="tre" checked />Re</p>

sarà:

Fante

Cavallo

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function j() {
                if (document.gh.strun.checked) {
                    alert("Uno");
                }
                if (document.gh.strdu.checked) {
                    alert("Due");
                }
            }
        </script>
    </head>
    <body>
        <form name="gh" onsubmit="j()">
            <p><input type="checkbox" name="strun" checked />Uno</p>
            <p><input type="checkbox" name="strdu" />Due</p>
            <input type="submit" value="    OK    " />
        </form>
    </body>
</html>

Ci sono due CHECKBOX, di cui la Uno è già selezionata. Se facendo clic su OK è selezionato Uno verrà fuori la finestra d'allarme con il messaggio Uno. Se è selezionato Due verrà fuori la finestra d'allarme con il messaggio Due. Se sono selezionati tutti e due verranno fuori due finestre d'allarme, una dice Uno e l'altra dice Due.

Il tag INPUT RESET

Crea un bottone: quando viene premuto ripristina i dati della FORM. Ciò significa che deve stare all'interno del tag FORM. Il risultato di:

<form name="form">
<p><input type="checkbox" name="uno" />Fante</p>
<p><input type="checkbox" name="due" checked />Cavallo</p>
<p><input type="checkbox" name="tre" />Re</p>
<input type="reset" value="Resetta" />
</form>

sarà:

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function j() {
                if (document.gh.strun.checked) {
                    alert("Uno");
                }
                if (document.gh.strdu.checked) {
                    alert("Due");
                }
            }
       </script>
    </head>
    <body>
        <form name="gh" onsubmit="j()">
            <p><input type="checkbox" name="strun" checked />Uno</p>
            <p><input type="checkbox" name="strdu" />Due</p>
            <input type="submit" value="    OK    " />
            <input type="reset" value="Reimposta" />
        </form>
    </body>
</html>

Il tag INPUT RADIO

Crea un elemento circolare selezionabile, se si vuole rendere selezionato di default aggiungere CHECKED. Supporta l'evento ONCLICK. Molto simile alla CHECKBOX, ma con la differenza che non può essere deselezionata dall'utente, oltre alla mancata possibilità di scegliere più di una risposta all'interno di uno stesso form. Il risultato di:

<p><input type="radio" name="uno" />Fante</p>
<p><input type="radio" name="due" />Cavallo</p>
<p><input type="radio" name="tre" checked />Re</p>

sarà:

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function glo() {
                if (document.o.c.checked) {
                    alert("Uno");
                }
                if (document.o.i.checked) {
                    alert("Due");
                }
            }
        </script>
    </head>
    <body>
        <form name="o" onsubmit="glo()">
            <p><input type="radio" name="c" />Uno</p>
            <p><input type="radio" name="i" />Due</p>
            <input type="submit" value="    OK    " />
            <input type="reset" value="Reimposta" />
        </form>
    </body>
</html>

NB: Il valore predefinito di SUBMIT è Invia query, mentre il valore predefinita di RESET è Reimposta.

Il tag SELECT e il tag OPTION

Il tag SELECT crea un riquadro dove scegliere varie opzioni (tag OPTION). Per selezionare un'opzione di default basta aggiungere SELECTED. Supporta gli eventi ONCLICK, ONFOCUS, ONBLUR e ONDBLCLICK. Il risultato di:

<select name="selezione" size="1">
    <option name="uno" selected>Fante</option>
    <option name="due">Cavallo</option>
    <option name="tre">Re</option>
</select>

sarà:

Esempio:

<html>
    <head>
        <script type="text/javascript">
            function fu() {
                if (document.sel.pr.selected) {
                    alert("Primo");
                }
                if (document.sel.se.selected) {
                    alert("Secondo");
                }
                if (document.sel.te.selected) {
                    alert("Terzo");
                }
            }
        </script>
    </head>
    <body>
        <p><select size="3" name="sel">
            <option name="pr" selected>Primo</option>
            <option name="se">Secondo</option>
            <option name="te">Terzo</option>
        </select></p>
        <input type="button" value="Vai" onclick="fu()">
    </body>
</html>

Facendo clic su Vai verrà scritta la scelta su una finestra d'allerta.

Il tag TEXTAREA

è uguale a INPUT TEXT, ma di default è più grande e con un tipo di carattere diverso. Il risultato di:

<p><textarea name="uno">Tu sei pazzo</textarea></p>

sarà:

Tu sei pazzo

Per modificare altezza e larghezza:

<textarea rows="" cols=""></textarea>

Su ROWS scrivere le righe e su COLS le colonne.

Commentate qui sotto se avete delle domande.

A cura di Alessandro

Il Javascript

Cos'è il Javascript?

Il Javascript

Utilità varie

Commenti