Il Javascript

Cos'è il Javascript?

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

 

NB: Non c'entra niene con il Java, non è creato da Java e non funziona con Java.

Il Javascript

I comandi Javascript sono racchiusi 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, può essere usato anche per cavolate:

 

alert("Messaggio");

 

 

La funzione WRITE

 

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

 

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 il comando ALERT abbiamo visualizzato il valore di c.

 

Gli operatori matematici più importanti sono:

+ (più)

- (meno)

/ (diviso)

* (per)

 

Due numeri uniti con l'operatore +, se si vuole ottenere un addizione devono essere prima convertiti con EVAL (vedremo in seguito).

 

In questo modo si possono fare espressioni complesse.

 

 

L'istruzione IF

 

Come nel DOS e nel VBS esegue un comando nel caso 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 i comandi 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 e le variabili.

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! 3!");

    } else {

        alert("Fa 11!");

    }

} else if (a == false) {

    alert("Ok, va bene.");

}

 

NB: Le spaziature dal margine servono per non fare confusione con i comandi IF, che come nel VBS si possono mettere un numero illimitato di IF uno nell'altro, esempio:

 

var a;

a = 2;

 if (a == 2) {

    var b;

    b = 3;

    if (b == a) {

        var c;

        c = 5;

        if (c == a) {

            var d;

            d = 10;

            if (d == a) {

                alert("FOSSILI!")

            }

        }

    }

}



 

 

Il comando SWITCH CASE

 

Esegue un comando se la condizione sulla variabile è vera.

 

var a;

a = 3;

switch (a) {

    case "2":

        alert("a = 2");

    break; 

    case "3":

        alert("a = 3");

    break; 

    default:

        alert("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 a = val, dove per val si intende il valore della variabile a.

 

Quindi è analogo a:

 

var a;

a = 3;

if (a == 2) {

    alert("a = 2");

} else if (a == 3) {

    alert("a = 3");

} else {

    alert("a = " + a);

}

 

 

Varie funzioni

 

La funzione LENGHT

 

Espande un numero intero che equivale alla lunghezza della variabile.

 

var a;

a = "Ciao Pippo";

document.write(a.lenght);

 

Scriverà 10.

 

La funzione TOUPPERCASE()

 

Espande la variabile in tutto maiuscolo.

 

var a;

a = "Ciao Pippo";

document.write(a.toUpperCase())

 

Scriverà CIAO PIPPO.

 

La funzione TOLOWERCASE()

 

Espande la variabile in tutto minuscolo.

 

var a;

a = "Ciao Pippo";

document.write(a.toLowerCase());

 

Scriverà ciao pippo.

 

La funzione REPLACE

 

Espande la variabile sostituendo la parola specificata con un'altra.

 

var a;

a = "Ciao Pippo";

document.write(a.replace("Pippo","Mongolo"));

 

Scriverà Ciao Mongolo.

 

La funzione SPLIT

 

Espande la variabile sostituendo il o i caratteri specificato con una virgola.

 

var a;

a = "Ciao Pippo";

document.write(a.split(" "));

 

Scriverà Ciao,Pippo.

 

 

La funzione EVAL

 

Espande il valore matematico di un numero.

 

var a, b;

a = 3;

b = 6;

document.write(eval(a) + eval(b));

 

Scriverà 9.

Facendo così invece:

 

var a, b;

a = 3;

b = 6;

document.write(a + b);

 

Scriverà 36.

 

 

L'istruzione FUNCTION

  

Crea una funzione, ossia una serie di comandi 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, ritorna il valore specificato:

 

function Moltiplica(b, c) {

    return b * c;

}

document.write(Moltiplica(3, 2));

 

Con le due variabili a e b si fa l'operazione a per b. Il loro valore dipende da che numeri si mettono quando andiamo a specificare la funzione da un'altra parte.

 

 

Esempio di una funzione

  

<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("Esatto! -clap clap-");

                } else if (document.f.c.checked) {

                    alert("ASD!");

                } else if (document.f.a.checked) {

                    alert("LUL!");

                }

        </script>

    </head>

    <body>

        <h2>Quante dita ho nelle mani?</h2>

        <form method="get" onsubmit="Controlla()" name="f">

            <p><input type="checkbox" name="a" />Una sola</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>

 

 

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 apri il file: ecco la calcolatrice a due addendi!

 

 

L'evento ONCLICK

 

Come abbiamo visto prima esegue un comando Javascript o una funzione al clic con il mouse su l'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 un comando Javascript o una funzione 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 un comando Javascript o una funzione 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 un comando 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 un comando Javascript o una funzione nel caso venga spostato il cursore fuori dall'oggetto del tag in cui è stato specificato ONMOUSEOUT:

 

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

 

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

 

 

L'evento ONMOUSEDOWN

 

Esegue un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 un comando 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 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 disattivo";

            }

            function f() {

                document.et.ciccio.value = "Focus attivo";

            }

        </script>

    </head>

    <body>

        <form name="et">

            <input type="text" name="ciccio" value="Focus disattivo"; onblur="b()" onfocus="f()"/>

        </form>

    </body>

</html>

 

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

 

 

<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.tre.gatti.value = a;

            }

        </script>

    </head>

    <body>

        <form name="tre">

            <input type="text" name="gatti" ondblclick="x()" />

        </form>

    </body>

</html>

 

Facendo doppio clic sulla barra verrà chiesto di immettere il valore della barra 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");

             }

        </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.

 

Non c'è bisogno che per ogni evento faccia un esempio, giusto? Avrete capito, o no?

 

 

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 farlo selezionato al caricamento della pagina aggiungere CHECKED. Supporta l'evento ONCLICK. Il risultato di:

 

<p><input type="checkbox" name="uno" />Uno</p>

<p><input type="checkbox" name="due" />Due</p>

<p><input type="checkbox" name="tre" checked />Tre</p>

 

sarà:

 

Uno

Due

Tre

 

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" />Uno</p>

<p><input type="checkbox" name="due" checked />Due</p>

<p><input type="checkbox" name="tre" />Tre</p>

<br />

<input type="reset" value="Resetta" />

</form>

 

sarà:

 

Uno

Due

Tre

 

 

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>

 

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. Facendo clic su Reimposta ritornerà selezionato Uno e deselezionato Due.

 

 

Il tag INPUT RADIO

 

Crea un elemento circolare selezionabile, se farlo selezionato dall'inizio aggiungere CHECKED. Supporta l'evento ONCLICK. Molto simile alla CHECKBOX, ma con la differenza che non può essere deselezionata dall'utente. Il risultato di:

 

<p><input type="radio" name="uno" />Uno</p>

<p><input type="radio" name="uno" />Due</p>

<p><input type="radio" name="uno" checked />Tre</p>

 

sarà:

 

Uno

Due

Tre

 

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), se fare selezionata l'opzione dall'inizio aggiungere SELECTED, supporta gli eventi ONCLICK, ONFOCUS, ONBLUR e ONDBLCLICK. Il risultato di:

 

<select name="selezione" size="1">

    <option name="uno" selected>Uno</option>

    <option name="due">Due</option>

    <option name="tre">Tre</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>

 

In base alla scelta facendo clic su Vai viene scritta su una finestra d'allerta la scelta.

 

 

Il tag TEXTAREA

 

E' 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à:

 

 

Per modificare altezza e larghezza:

 

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

 

Su ROWS scrivere le righe e su COLS le colonne.

Vai nella sezione Commenti per commentare o formulare domande.