Il Javascript

Cos'è il Javascript?

Il Javascript è un linguaggio di scripting, e qui spiegherò brevemente come integrarlo in una pagina 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 Javascript

I comandi Javascript sono racchiusi nel tag SCRIPT, in questo modo:

<html>

<head>

</head>

<body>

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 fra i comandi IF, e non vi è limite al numero di istruzioni IF da inserire una dentro all'altra. 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("Com'è possibile?")

}

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

L'oggetto LENGTH

Espande un numero intero che equivale alla lunghezza della variabile.

var a;

a = "Ciao Pippo";

document.write(a.length);

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

function Controlla() {

if (document.f.b.checked) {

alert("Esatto! -clap clap-");

} 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>

<p><input type="checkbox" name="b" />Dieci</p>

<p><input type="checkbox" name="c" />Cento</p>

</form>

</body>

</html>

Si vede che document.f.c è 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>

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>

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

Utilizzabile nei tag A e INPUT.

L'evento ONFOCUS

Esegue un comando Javascript o una funzione nel caso venga selezionato il riquadro di testo:

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:

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:

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.

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:

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:

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:

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:

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:

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>

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>

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.

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:

<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:

sarà:

Esempi:

<html>

<head>

function f() {

document.un.in.value = "Focus effettuato";

}

</script>

</head>

<body>

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

function b() {

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

}

function f() {

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

}

</script>

</head>

<body>

</form>

</body>

</html>

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

<html>

<head>

function lol() {

alert(document.ehi.pippo.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

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

<html>

<head>

function x() {

a = prompt("Scrivere il valore da dare alla barra","");

document.tre.gatti.value = a;

}

</script>

</head>

<body>

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

function s() {

alert("Hai selezionato");

}

</script>

</head>

<body>

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

sarà:

Esempio:

<html>

<head>

function c() {

alert("Vuoi un applauso?");

}

</script>

</head>

<body>

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

function s() {

alert("Il nome della barra è: " + document.c.o.name);

alert("Il valore invece è: " + document.c.o.value);

}

</script>

</head>

<body>

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

sarà:

Uno

Due

Tre

Esempio:

<html>

<head>

function j() {

if (document.gh.strun.checked) {

alert("Uno");

}

if (document.gh.strdu.checked) {

alert("Due");

}

</script>

</head>

<body>

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

<br />

</form>

sarà:

Esempio:

<html>

<head>

function j() {

if (document.gh.strun.checked) {

alert("Uno");

}

if (document.gh.strdu.checked) {

alert("Due");

}

</script>

</head>

<body>

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

sarà:

Esempio:

<html>

<head>

function glo() {

if (document.o.c.checked) {

alert("Uno");

}

if (document.o.i.checked) {

alert("Due");

}

</script>

</head>

<body>

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

Sarà:

Esempio:

<html>

<head>

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>

<option name="pr" selected>Primo</option>

<option name="se">Secondo</option>

<option name="te">Terzo</option>

</select></p>

</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à:

Tu sei pazzo

Per modificare altezza e larghezza:

Su ROWS scrivere le righe e su COLS le colonne.

Vai nella sezione Commenti per commentare o formulare domande.

Comandi DOS e altro

A cura di Alessandro

Il Javascript

Cos'è il Javascript?

Il Javascript