Sperimentare la seguente pagina HTML5 cliccando sul bottone Saluto
ed esaminarne il sorgente che è il seguente
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script>
function ciao()
{
alert("Ciao")
}
</script>
</head>
<body style="background-color:cyan">
<form name="frm" id="frm"
style="position:relative; width:40%; left:30%; top:100px;
background-color:azure; color:blue;
border-style:solid; border-color:blue; text-align:center">
<h2>Saluto</h2>
<p>
<input type="button" value = " SALUTA " onclick = "ciao()" >
</p>
</form>
</body>
</html>
Questo semplice esempio illustra alcuni aspetti fondamentali dell'uso di Javascript in una pagina HTML.
| Javascript non è un linguaggio destinato ad applicazioni autonome, come, ad esempio, il Pascal, il C o il Java. È destinato ad essere usato da altri programmi ospiti, come, ad esempio, i browser per pagine HTML, che devono essere dotati delle istruzioni per interpretarlo e essere abilitati ad usarle. |
| Le istruzioni Javascript possono essere scritte all'interno di un marcatore <script>...</script>, a sua volta contenuto nella sezione <head>...</head> della pagina. |
| Uno dei tipi più importanti di istruzioni Javascript sono le funzioni. Le funzioni sono istruzioni che interagiscono con l'ambiente esterno, ricevendo informazioni, dette argomenti della funzione, elaborandole e rispedendo all'esterno il risultato dell'elaborazione. |
|
Le funzioni Javascript hanno una intestazione costituita dalla parola chiave obbligatoria function seguita dall'identificatore della funzione che è seguito, a sua volta, dal corpo della funzioni, cioè da un complesso di una o più istruzioni delimitato da una coppia di parentesi graffa. L'identificatore è un nome arbitrariamente scelto dal programmatore che deve cominciare
con un carattere alfabetico seguito poi da caratteri alfabetici o numerici
ma senza interpunzioni e senza stacchi.
Sia in Javascript sia in Java, il primo modo viene solitamente preferito per gli identificatori delle funzioni, i secondo per gli identificatori delle variabili. |
| Javascript fa differenza tra maiuscole e minuscole (ingl. 'it is case sensitive'): FUNCTION o Function non andrebbero bene. |
| Le funzioni possono essere attivate da particolari eventi nell'ambiente esterno. Ad esempio, la funzione ciao() è attivata dal browser quando si verifica l'evento 'click sul bottone' (onclick) inserito nella form frm della pagina stessa. |
| Un'istruzione del corpo di una funzione può essere a sua volta l'invocazione di un'altra funzione: nell'esempio la funzione ciao() invoca la funzione alert("Ciao"). |
| Alcune funzioni sono predefinite. Ad esempio la funzione alert() non va descritta dal programmatore perché è predefinita in Javascript come metodo degli oggetti Window pure predefiniti in Javascript. |
|
Un oggetto è un dato composto, costruito sulla base di una descrizione che ne specifica la struttura. Un oggetto è costituito da tre tipi di elementi:
alert() è appunto un metodo dell'oggetto window che rappresenta una finestra grafica del browser. In generale, proprietà, metodi ed eventi di un oggetto sono individuati dal nome dell'oggetto seguito da un punto e quindi dal nome specifico dell'elemento. Nell'esempio proposto l'istruzione nella funzione ciao() avrebbe potuto essere window.alert("Ciao."). Tuttavia in questo caso è sufficiente l'istruzione usata in quanto l'oggetto window è sottinteso. |
| Il metodo alert(), che deve avere come argomento una stringa, cioè una scritta costituita da uno o più caratteri consecutivi, produce l'emissione al centro dello schermo di un riquadro rettangolare contenente la stringa stessa e un bottone con la scritta "OK": cliccando sul bottone il riquadro scompare. |
| Come s'è detto, un argomento di una funzione è un dato che la funzione riceve dall'esterno e che viene utilizzato dalla funzione per produrre il proprio output. Provare a sostituire alert("Ciao") con alert("Come va?"). |
| Una stringa deve essere contenuta da una coppia di doppie virgolette (o, volendo, da una coppia di apici). |
Sperimentare ora la seguente pagina cliccando sul bottone Saluto
notarne il comportamento ed esaminarne il sorgente che è il seguente
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script>
var nome = "";
function ciao()
{
nome = prompt("Come ti chiami?",nome);
if (nome != null)
alert("Ciao, "+nome);
}
</script>
</head>
<body style="background-color:cyan">
<form name="frm" id="frm"
style="position:relative; width:40%; left:30%; top:100px;
background-color:azure; color:blue;
border-style:solid; border-color:blue; text-align:center">
<h2>Saluto</h2>
<p>
<input type="button" value = " SALUTA " onclick = "ciao()" >
</p>
</form>
</body>
</html>
In questo esempio il codice Javascript è più articolato.
Prima della funzione è introdotta una variabile che ha come identificatore nome e come valore una stringa vuota. L'accoppiamento di un identificatore di variabile con un valore è indicato dal segno "="' (non ":=" come in Pascal).
La funzione ciao() è definita in modo diverso:
Il metodo prompt() emette un riquadro contenente una scritta, un campo di input in cui l'utente può immettere un dato e due bottoni per la conferma o l'annullamento.
Il metodo prompt() richiede due argomenti:
Il dato scritto dall'utente varia di volta in volta, non può essere fissato a priori dal programmatore: per gestire questi dati Javascript, come tutti gli altri linguaggi di programmazione, li rappresenta simbolicamente con un identificatore: nell'esempio l'identificatore è 'nome', cioè l'identificatore della variabile introdotta prima della funzione.
Le variabili definite all'esterno di una funzione sono dette globali, in quanto il loro valore è accessibile a tutte le funzioni eventualmente definite e modificabile da tutte. Se una variabile è definita nel corpo di una specifica funzione, essa è locale ed è sconosciuta alla altre funzioni.
In questo modo, quando appare il riquadro, il campo di input è
bianco. Se l'utente scrive un nome e chiude il riquadro con
OK, nome rappresenta la
stringa immessa. Se l'utente chiude il riquadro con
Annulla, nome assume il valore
null.
Solo se nome riceve da prompt()
valore diverso da null (notare come si scrive diverso)
viene attivato il metodo alert() con argomento costituito da
una stringa ottenuta concatenando la stringa "Ciao, " con il nome immesso.
Anche questo piccolo esempio mostra alcuni aspetti fondamentali dell'uso di Javascript in una pagina HTML.
|
Le istruzioni nel corpo di una funzione sono terminate dall'andata a capo. Se ci sono più istruzioni nella stessa riga, queste vanno separate da un punto e virgola ;. È comunque consigliabile, in analogia con le regole del C e del Java e per una miglior lettura, mettere punto e virgola e andare a capo. |
|
Le istruzioni di Javascript possono operare sui seguenti tipi di valori:
|
| Quando un dato non è descritto direttamente da opportuni caratteri (literals) scritti dal programmatore, può venir rappresentato simbolicamente da un identificatore al quale opportune istruzioni assegnano valori particolari che possono cambiare nel corso dell'elaborazione. Un dato così rappresentato è una variabile. |
|
Diversamente da quanto richiesto in altri linguaggi, le variabili di Javascript non
hanno tipo predefinito: assumono immediatamente il tipo del valore associato e non è
obbligo dichiararle prima di usarle. Ad una variabile si può assegnare un valore di qualunque
tipo: nell'esempio, nome può essere tipo stringa o di tipo
Una variabile può rappresentare anche un oggetto. |
|
L'assegnazione di un valore ad una variabile si effettua con il segno di uguaglianza =. Le variabili dichiarate esternamente al corpo di una funzione sono globali,
accessibili a tutte le funzioni. |
|
Il valore di una variabile può
|
| Due valori di tipo stringa possono essere concatenati con l'uso del segno +. |
|
Si può imporre che un'istruzione sia eseguita solo se si verifica una precisa condizione. La condizione va posta tra parentesi tonde e va preceduta dalla clausola if. La struttura dell'istruzione condizionata è la seguente if (condizione vera) istruzione; Questa struttura è un caso particolare della forma più generale:
if (condizione vera)
{
istruzione1;
istruzione2;
.............
}
else
{
istruzione100;
istruzione101;
..............
}
Nell'esempio completare l'istruzione
if (nome!=null)
alert("Ciao, "+nome);
nel seguente modo
if (nome!=null)
alert("Ciao, "+nome);
else
alert("Bisogna scrivere il nome e premere OK");
|
| operatore | operazione | esempio |
|---|---|---|
| == | uguale | if (a==b) {...} [else {...}] |
| != | diverso | if (a!=b) {...} [else {...}] |
| < | minore | if (a<b) {...} [else {...}] |
| > | maggiore | if (a>b) {...} [else {...}] |
| <= | minore o uguale | if (a<=b) {...} [else {...}] |
| >= | maggiore o uguale | if (a>=b) {...} [else {...}] |
Altri esempi di uso di Javascript nelle pagine HTML sono visibili alla pagina HTML-5 di questo sito.