Javascript Tutorial

JavaScript Fondamentali :
INTRODUZIONE
Javascript un linguaggio di scrittura che permette di aggiungere veri e propri programmi alle tue
pagine web.
Con javascript si possono creare delle piccole applicazioni, come la calcolatrice o giochetti molto
semplici.
Comunque, si pu usare javascript per degli scopi pi seri:
Rivelazione del Browser
Rivela il tipo di browser usato dal visitatore della pagina. A seconda del tipo, viene scaricata
un'altra pagina appositamente preparata per quel browser.
Cookies
Immagazzina informazioni nel computer del visitatore, e rimanda le stesse informazioni
automaticamente quando il visitatore torna sulla stessa pagina. Questa tecnica si chiama "cookies".
Controllo dei Browser

Apre le pagine in finestre personalizzate, dove viene specificato se i bottoni, la riga del men, la
riga dello status del browser debbano essere presenti.
Convalida dei Form

Convalida ci che viene inserito nei field prima di inviare un form.
Un esempio potrebbe essere la convalida di un indirizzo email inserito; viene cercato all'interno
dell'indirizzo il simbolo @. Se il simbolo non viene trovato, l'indirizzo viene considerato non
valido.
Prima di addentrarci in argomenti complessi, iniziamo ad esplorare le strutture fondamentali di

javascript.
Questo corso comprende tutte le cose essenziali che devi conoscere per costruire e personalizzare i
tuoi programmi.
Fondamentali JavaScript :
DOVE INSERIRLO
Siccome javascript non HTML, devi avvertire il browser che hai aggiunto javascript a una pagina
in HTML. Questo si fa usando il tag <script>.
Il browser si servir di <script language="javascript"> e </script> per capire dove inizia e finisce la
parte di javascript.
Guarda questo esempio:
<html>
<head>
<title>La Mia Pagina Javascript</title>
</head>
<body>
<script language="javascript">
alert("Benvenuto nel mio mondo!!!");
</script>
</body>
</html>
La parola alert ("attenzione") un comando standard javascript che fa spuntare sullo schermo una
casella-allarme. Il visitatore dovr cliccare sul bottone "OK" della casella per poter procedere.
Se inseriamo il comando "alert" tra i tag <script language="javascript"> e </script> il browser lo

riconoscer come un comando javascript.
Se non avessimo inserito i tag <script>, il browser avrebbe considerato la parola "alert" come
semplice testo, e lo avrebbe riportato sullo schermo.
In un documento puoi usare javascript sia nella sezione <head> che in quella <body>. In generale,
comunque consigliabile limitarsi il pi possibile alla sezione <head>.
IL PRIMO PROGRAMMA
Sapere che javascript deve essere inserito tra i tag <script>, gi un inizio. Ma ci sono altre cose da
imparare prima di poter iniziare a scrivere con javascript:
Le righe in javascript terminano sempre con punto e virgola.
Potrai forse avere gi notato nelle pagine precedenti che le righe in javascript terminano con
punto e virgola.
Puoi facilmente mettere tutto il javascript che ti serve su una singola riga senza alterarne le
prestazioni.
Comunque, cos facendo, impediresti una visione d'insieme del tuo programma, e ci non
consigliabile.
Metti sempre il testo tra " ".

Quando inserisci un testo che deve essere trattato con javascript, devi sempre mettere il testo tra
virgolette, " ".
Se ti dimentichi di racchiudere il testo in " ", javascript lo interpreter come una variabile, e non
come testo.
Nella prossima sezione ti spiegheremo in che maniera questo pu rappresentare un errore di
programmazione.
Le lettere maiuscole sono diverse dalle minuscole.

Devi sempre tenere a mente che le lettere maiuscole sono diverse dalle minuscole.
Ci significa che quando scrivi dei comandi in javascript, devi digitare le maiuscole nei posti
giusti, e non dove capita.
.
Per esempio, un comando javascript si chiama onMouseOver.

Scrivendo invece Onmouseover, sarebbe come se avessi scritto qwHETweriuh, perch javascript
non lo capisce.
L'uso non corretto delle maiuscole probabilmente l'errore pi comune per i programmatori di
javascript a tutti i livelli!!
Guarda adesso questo esempio:

Invece di scrivere javascript in una casella sullo schermo, potremmo scriverlo direttamente nel
documento.
<html>
<head>
</head>
<body>
<script>
document.write("Benvenuto nel mio mondo!!!");
</script>
</body>
</html>
Il comando javascript document.write dice al browser che ci che segue all'interno delle parentesi
dovr essere scritto nel documento.
Nota: Quando inserisci un testo in javascript, devi racchiuderlo tra " ".
L'esempio di programma che hai appena visto si vedrebbe cos sulla tua pagina:
Benvenuto nel mio mondo!!!
Guarda questo esempio per capire dove javascript scrive il testo:

<html>
<head>
</head>
<body>
Ciao!!!<br>
<script>
document.write("Benvenuto nel mio mondo!!!");
</script>
Buon divertimento...<br>
</body>
</html>
Ecco quello che si vedr sullo schermo:

Ciao!!!
Benvenuto nel mio mondo!!!
Buon divertimento...
Come puoi vedere, javascript inserisce semplicemente il testo nel punto in cui il programma
sistemato all'interno dei codici HTML.
Un aspetto interessante che puoi inserire tutti i tipi di tag HTML nelle pagine web con il metodo
document.write.
Se, per esempio, volessi creare una lunga tabella di comparazione tra gradi Fahrenheit e Celsius,
invece di digitare i valori uno per uno sulla tabella, potresti far calcolare i valori da javascript e
inserire la tabella nel documento.
Puoi vedere un esempio di tabella generata da javascript sulla pagina che spiega il sistema di colori
esadecimali.
In quella pagina ci sono 15 tabelle, ognuna con 25 colonne.
Ogni casella mostra diverse miscelazioni dei colori base rosso, verde e blu.
Per creare queste tabelle usando HTML ci vorrebbe un giorno intero. Con javascript ci abbiamo
messo meno di 15 minuti!
LETTERE MAIUSCOLE
E' molto importante tenere a mente che javascript compie una netta distinzione tra lettere maiuscole
e minuscole.
Javascript non considera una variabile chiamatamyvalue nella stessa maniera in cui considera una
variabile chiamataMYVALUE.
Guarda questi esempi:
Esempio 1
Esempio 2
<html>
<head>
<title>My Page</title>
</head>
<body>
<script>
myvalue=2;
myvalue=5;
result=myvalue+myvalue;
document.write(result);
</script>
</body>
</html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<script>
myvalue=2;
MyValue=5;
result=myvalue+MyValue;
document.write(result);
</script>
</body>
</html>
Il risultato dell'esempio 1 sar 10 (5+5).

Il risultato dell'esempio 2 sar 7 (2+5).
Un ottimo consiglio di usare la stessa sintassi per tutte le variabili.

Si possono scrivere tutte le variabili in minuscolo, iniziare con una maiuscola o scrivere tutte le
variabili in maiuscolo.
Non c' un modo migliore di un altro l'importante che sia uno solo!
POP UP BOXES
Si possono creare tre tipi diversi di finestre che sbucano sullo schermo ("popup windows")
Prova a cliccare sui bottoni qui sotto per vedere le differenze:
ALERT BOX
La sintassi per un' alert box ("casella di allarme") :alert("yourtext");
L'utente dovr cliccare su "OK" per procedere.
Si usa generalmente quando si vuole essere sicuri che una certa informazione arrivi all'utente.
Normalmente si tratta di avvertimenti di ogni genere.
(Esempi tipici sono l'avviso "Contenuto per Adulti", o informazioni tecniche come "Questo sito
richiede Shockwave Flash plug-in").
CONFIRM BOX:
La sintassi per un confirm box ("casella di conferma") : confirm("yourtext");
L'utente deve cliccare su "OK" o "Cancel" per procedere.
Si usa generalmente quando si vuole che l'utente verifichi o accetti qualcosa.
Esempi tipici sono la verifica dell'et, come "Confermi di avere pi di 57 anni" o informazioni
tecniche come "Hai un plug-in per Shockwave Flash?"
- Se l'utente clicca su "OK", la casella rimanda il valore true.
- Se l'utente clicca su "Cancel", la casella rimanda il valore false.
if (confirm("Sei d'accordo?")) {alert("Sono d'accordo")}
else{alert ("Non sono d'accordo")};
Nota: il comando if statement spiegato pi avanti in questo corso.
PROMPT BOX:
La sintassi per il prompt box ("casella di informazioni") : prompt("yourtext","defaultvalue");
L'utente dovr cliccare su "OK" o "Cancel" per procedere dopo avere inserito il testo.
Generalmente viene usato quando l'utente deve inserire una certa informazione prima di accedere
alla pagina.
Un esempio l'inserimento del nome dell'utente che verr in seguito memorizzato in un cookie,
oppure l'inserimento di una parola d'ordine o di un codice di qualsiasi tipo.
- Se l'utente clicca su "OK" la casella permette l'entrata.
- Se l'utente clicca su "Cancel", la casella rimander l'informazione null.
Siccome in genere viene fatto un qualche uso dell'informazione inserita nella casella, normale
immagazzinare l'input in una variabile, come ti mostra l'esempio qui sotto:
username=prompt("Inserisci il tuo nome per favore","Inserisci qui il tuo nome");
VARIABILI
Le variabili si possono paragonare a delle piccole caselle con nomi.
Se dovessi riporre 5 paia di scarpe, ti servirebbe una scatola per ogni paio. Su ogni scatola dovresti
poi annotare il contenuto.
le scatole rappresentano le variabili.
- I posti dove riporre le cose.
I nomi sulle scatole rappresentano i nomi delle variabili.

- Sono i nomi che adoperi riferendoti ad ognuna delle scatole.
Ed infine le scarpe, rappresentano il contenuto delle variabili.

- Cosa riposto nelle scatole.
Una variabile semplicemente un luogo nella memoria del computer dove si immagazzinano le
informazioni. Tutte le variabili sono raggiungibili attraverso un nome particolare da te assegnato.

<html>
<head>
</head>
<body>
<script>
myname="Henrik";
document.write(myname);
</script>
</body>
</html>
Questo esempio scriver "Henrik" nel documento.

Nota che quando vuoi sistemare un testo in una variabile, devi mettere il testo tra " ":
Il motivo che javascript usa " " per distinguere tra testo e variabili.
Guarda l'esempio qui sotto per capire l'importanza di questo accorgimento.
<html>
<head>
</head>
<body>
<script>
Henrik="il mio nome";
myname=Henrik;
document.write(myname);
</script>
</body>
</html>
Prova a predire il risultato dell'esempio prima di continuare a leggere.

- Nella prima riga, il testo "il mio nome" sistemato nella variabile Henrik.
- Nella seconda riga, la variabile Henrik sistemata nella variabile myname.
- Infine nella riga 3, la variabile myname inserita nel documento.
Il risultato che sulla pagina si vedr scritto "il mio nome".
ASSEGNARE VALORI ALLE VARIABILI

La maniera pi comune di assegnare un valore a una variabile l'uso del simbolo =.
Guarda questi esempi e osserva i modi diversi per ottenere variabili contenenti sia valori sia testi.
Nota in particolare l'uso delle parentesi per controllare il trattamento di formule complesse.
Esempio
Valore risultante
a=2;
a=2; a++;
a=2; a--;
a=2; b=a++;
a=2; b=3; c=a+b;
a=2; d=a+6;
First="Henrik";
Last="Petersen";
Full=First+" "+Last;
a=2*7;
b=20/5;
c=(20/5)*2;
d=20/(5*2);
a=2
a=3 (2+1)
a=1 (2-1)
b=3 (2+1)
c=5 (2+3)
d=8 (2+6)
First=Henrik
Last=Petersen
Full=Henrik Petersen
a=14 (2*7)
b=4 (20/5)
c=8 (4*2)
d=2 (20/10)
OPERATORI ARITMETICI
Le tabelle qui sopra contengono i cosiddetti "operatori aritmetici" a++ e a--.
Si pu vivere benissimo anche senza di essi, perch si possono ottenere le stesse funzioni usando gli
altri operatori disponibili.
Comunque ti capiter spesso di vederli adoperati nei programmi, e forse potresti essere tanto pigro
da volerli usare anche tu, visto che pi veloce scrivere a++; che a=a+1;.
Operatore
Spiegazione Esempio
++
incremento a=5;
a++;
a adesso uguale a 6
-decremento a=5;
a--;
a adesso uguale a 4
%
modulo di resto,
cio il resto ottenuto quando
due numeri sono divisi.
a=8 % 3;
a adesso uguale a 2,
perch 8 si pu dividere
per 3 due volte, lasciando
un resto di 2.
CONFRONTO DI VARIABILI
Ci sono diversi modi di confrontare le variabili.
Il pi semplice il rapporto di uguaglianza, che si indica usando un segno di doppio uguale (==):
if (a==b) {alert("a uguale b")};
if (lastname=="Petersen") {alert("Bel nome!!!")};
Nota: Il comando if statement spiegato nella prossima sezione.
Se ti dimentichi di usare il segno di doppio uguale quando instauri un rapporto di uguaglianza tra
variabili, e adoperi invece soltanto un segno di uguale, non creerai alcun confronto tra le variabili.
Quello che succeder sar che alla variabile a sinistra del segno di uguale verr assegnato il valore
della variabile di destra.
Un esempio dell'errore:
if (lastname="Petersen") {alert("Bel nome!!!")};
Questo un errore assai comune che rovina completamente il programma.
Questa tabella contiene i diversi operatori di comparazione:

Operatore
Spiegazione Esempio
==
uguale a
4==5 (falso)
5==5 (vero)
5==4 (false)
!=
non uguale a 4!=5 (vero)
5!=5 (falso)
5!=4 (vero)
<
minore di
4<5 (vero)
5<5 (falso)
5<4 (falso)
>
maggiore di 4>5 (falso)
5>5 (falso)
5>4 (vero)
<=
minore o uguale a
4<=5 (vero)
5<=5 (vero)
5<=4 (falso)
>=
maggiore o uguale a 4>=5 (falso)
5>=5 (vero)
5>=4 (vero)
Sulla pagina funzioni troverai materiale sulle variabili globali e locali.

Sulla pagina array troverai materiale sui modi di gestire grandi quantit di variabili.
IF & ELSE
Alcune volte javascript richiede l'abilit di distinguere tra differenti possibilit.
Per esempio, potresti avere un programma che indica il tipo di browser usato dal visitatore. Se
questo MSIE, dovr essere caricata una pagina specificamente creata per quel tipo di browser, se
invece Netscape dovr caricare un'altra pagina.
La sintassi generale per gli "if statements" (dove ad ogni opzione corrisponde un diverso
comportamento) :
if (condition) {action1} else {action2};
Ecco un possibile esempio:
if (browser=="MSIE") {alert("Stai usando MSIE")}
else {alert("Stai usando Netscape")};
Ancora una volta, importante notare che if si scrive "if".

L'uso delle maiuscole ("IF") causerebbe un errore.
Nota anche che quando confronti le variabili, devi inserire tra queste il segno di doppio uguale (==).
Quando scriviamo browser="MSIE" dobbiamo effettivamente immagazzinare "MSIE" nella
variabile chiamata browser.
Quando si scrive browser=="MSIE" javascript riconosce che si vuole imporre un confronto, e non
un'assegnazione di valore.
La prossima sezione spiegher i diversi operatori (=, <, > etc.).
Si possono creare degli if statement pi complessi semplicemente inserendo altri if statement nella
parte else.
if (condition) {action1}
else {if (condition) {action2} else {action3};};
Un esempio:
if (browser=="MSIE") {alert("Stai usando MSIE")}
else {if (browser=="Netscape") {alert("Stai usando Netscape")}
else {alert("Stai usando un browser sconosciuto")};};
E, OPPURE & NON

Per completare i tuoi if statements, puoi usare i cosiddetti operatori logici.
E si scrive && ed usato quando si vuole verificare se pi di una condizione vera.
Es: Se il cesto contiene uova e il cesto contiene pancetta, possiamo avere uova con pancetta.
La sintassi : if (condition && condition) {action}
if (hour==12 && minute==0) {alert("E' mezzogiorno")};
Oppure si scrive || e viene usato quando si vuole verificare se pi condizioni sono vere .
(|| si ottiene usando il tasto shift combinato con il tasto \ )
Es: Se il cesto contiene latte oppure il cesto contiene acqua, avremo qualcosa da bere.
La sintassi : if (condition || condition) {action}
if (hour==11 || hour==10) {alert("Mancano meno di 2 ore a mezzogiorno")};
Non si scrive ! ed usato per invertire il risultato.

Es: Se il cesto non contiene uova o non contiene pancetta, non possiamo avere uova con pancetta.
La sintassi : if (!(condition)) {action}
FUNZIONI
Invece di inserire javascript nella tua pagina in modo che il browser svolga i compiti assegnati dal
programma, potresti avere bisogno di usare javascript soltanto in occasioni particolari.
Per esempio, se componi un codice javascript per cambiare il colore di fondo della pagina quando
l'utente clicca su un certo bottone, necessario informare il browser che il programma non dovr
partire subito dopo essere stato caricato.
Per impedire al browser di far partire un programma appena caricato, bisogna scrivere il programma
come una funzione.
Se javascript viene scritto sotto forma di funzioni, gli ordini verranno eseguiti soltanto dopo una
specifica richiesta. In questo modo si ottiene il controllo completo della determinazione dei tempi.
Guarda come vengono scritte le righe del programma sotto forma di funzioni:
<html>
<head>
<script>
function myfunction()
{
alert("Benvenuto nel mio mondo!!");
}
</script>
</head>
<body>
<form name="myform">
<input type="button" value="Hit me" onClick="myfunction()">
</form>
</body>
</html>
Clicca sul bottone per vedere il programma qui sopra messo in pratica:
Se la riga: alert("Benvenuto nel mio mondo!!"); non fosse stata scritta all'interno di una funzione,
sarebbe comparsa sullo schermo non appena fosse stata caricata.
Ma siccome l'abbiamo scritta come una funzione, stato possibile vederla solo dopo avere cliccato
sul bottone.
Ecco come abbiamo ottenuto la funzione:

<input type="button" value="Clicca qui" onClick="myfunction()">
Come puoi vedere, abbiamo collocato il bottone in un form e abbiamo aggiunto l'evento
onClick="myfunction()" alle propriet del bottone.
La prossima pagina dar una descrizione dettagliata dei diversi eventi usati per far partire le
funzioni.
La sintassi generale di una funzione :

function functionname(variable1, variable2,..., variableX)
{
// Qui vanno le righe di javascript per la funzione
}
I caratteri { e } indicano l'inizio e la fine della funzione.
Un tipico errore nell'inserimento delle funzioni javascript consiste nel tralasciare l'importanza delle
lettere maiuscole.
La parolafunction si deve scrivere esattamentefunction. Function oppure FUNCTION sono
considerati errati.
Oltretutto, l'uso delle maiuscole importante anche nel nome della funzione. Se si ha una funzione
chiamata myfunction(), sarebbe un errore riferirsi ad essa come Myfunction(), MYFUNCTION()
oppure MyFunction().
EVENTI
Gli eventi sono delle azioni che possono essere identificate da javascript.
Un esempio potrebbe essere l'evento onMouseOver, che viene messo in atto quando l'utente fa
scorrere il mouse su un oggetto.
Un altro evento onLoad, che viene messo in atto appena la pagina stata completamente caricata.
Normalmente gli eventi sono usati in combinazione con le funzioni, in modo che la funzione possa
partire solo al momento in cui si verifica l'evento.
Un esempio la funzione in grado di animare un bottone.
La funzione semplicemente alterna due immagini. Un' immagine che mostra il bottone nella
posizione "su", e un'altra immagine che mostra il bottone nella posizione "gi".
Se questa funzione viene richiamata usando l'evento onMouseOver, si vedr il bottone premuto
quando il mouse scorrer sull'immagine del bottone stesso.
Ecco una lista dei pi importanti eventi riconosciuti da javascript:
Evento Si verifica quando
tag HTML
onFocus="" Il form field messo a fuoco select, text, textarea
onBlur=""
Il form field perde fuoco
select, text, textarea
onChange="" Il contenuto di un field cambia
select, text, textarea
onSelect="" Un testo selezionato text, textarea
onMouseOver=""
Il mouse scorre su un link A
onMouseOut=""
Il mouse scorre al di fuori di un link A
onClick="" Il mouse clicca su un oggetto A, button, checkbox,
radio, reset, submit
onLoad="" La pagina completamente caricata body, frameset
onUnload="" Il browser apre un nuovo documento
body, frameset
onSubmit="" Il bottone di invio viene cliccato
form
Gli eventi si usano per due scopi principali:

Per far partire una funzione nel momento in cui l'evento viene decifrato,
Per mostrare una casella sullo schermo nel momento in cui l'evento viene decifrato.
Ecco una breve descrizione degli scopi principali di ogni evento:
onFocus, onBlur e onChange vengono usati soprattutto in combinazione con la convalida dei form
field.
Poniamo che tu abbia una funzione chiamata validateEmail() con il compito di verificare se un
indirizzo email inserito possiede il simbolo @, e se in coda ha una sigla riconoscibile, come "com",
"net", ecc. In pi, supponiamo che l'utente possa inserire il suo indirizzo email in un form.
Dovresti allora usare l'evento onChange per richiamare la funzione ogni volta che l'utente cambia il
contenuto del field:
<input type="text" size="20" onChange="validateEmail()">;
Clicca qui per saperne di pi sui form.

Clicca qui per saperne di pi sulla convalida dei form field.
onLoad e onUnload sono usati soprattutto per le caselle che sbucano sullo schermo ("popups")
quando il visitatore entra in una pagina o ne esce.
Un altro modo di usarli in combinazione con i cookie che vanno sistemati all'ingresso o all'uscita
delle tue pagine.
Per esempio, potresti avere un popup che domanda al visitatore di inserire il suo nome al suo primo
ingresso nella tua pagina. Il nome viene quindi memorizzato in un cookie. In pi, quando il
visitatore lascia la tua pagina, un cookie memorizza la data corrente.
La volta successiva che il visitatore arriver nella tua pagina, ci sar un altro popup che dir una
cosa del genere: "Benvenuto, Bill Clinton, questa pagina non stata aggiornata dalla tua ultima
visita 8 giorni fa".
Clicca qui per imparare a sistemare i cookie.
Clicca qui per saperne di pi sulle caselle popup.
Un altro uso comune degli eventi onLoad e onUnload per la creazione di pagine che hanno la
funzione assai irritante di aprire immediatamente un sacco di altre finestre appena si entra nella
pagina. Questo un comportamento improprio nel "galateo delle rete", e non viene considerato
come corretto web design.
onSubmit viene usato per uno scopo principale: convalidare tutti i field all'interno di un form prima
di inviarlo realmente.
Nell'esempio che abbiamo riportato per onChange, abbiamo mostrato come si fa a convalidare un
singolo form field.
Alcune volte per, il visitatore pu infastidirsi se viene interrotto da convalide mentre inserisce i
field in un form. Piuttosto che aspettare la convalida per ogni singolo input, potresti scegliere di far
approvare il form nel momento in cui viene cliccato il tasto dell'invio.
Questo si pu fare usando l'evento onSubmit.
Supponiamo che tu costruisca una funzione chiamata checkform() in grado di convalidare le entrate
in un form.
Supponiamo anche che tu voglia far partire questa funzione nel momento in cui l'utente clicca sul
tasto d'invio.
Se il contenuto non viene accettato dalla tua funzione, questo verr cancellato. In questo modo
verranno inviati soltanto contenuti approvati dalla funzione.
Per ottenere tutto questo devi solo: inserire un evento onSubmit al tag <form> in questo modo:
<form method="yourchoice" action="yourchoice" onsubmit="return checkform()">
La funzione checkform() risponde true (vero), oppure false (falso).

Se risponde true l'invio avr luogo.
Se risponde false l'invio sar annullato.
Clicca qui per saperne di pi sui forms.
Clicca qui per saperne di pi sulla convalida del form.
onMouseOver e onMouseOut sono principalmente impiegate per uno scopo: creare bottoni animati.
Forse avrai notato che quasti eventi possono essere usati soltanto in combinazione con il tag di link
<a>.
In ogni caso, gli eventi sono in genere pi efficaci se abbinati al tag di immagine <img>. Il trucco
per far funzionare un evento su un'immagine consiste in trasformare l'immagine in un link. (Se
l'immagine non deve funzionare realmente come un link, si pu sempre puntare il link su un'ancora
vuota, come si vede nell'esempio qui sotto).
Esempio: una casella di allarme appare quando l'evento onMouseOver viene rilevato su
un'immagine:
Ecco l'HTML per questo esempio:

<a href="#" onMouseOver="alert('Ho rivelato un evento onMouseOver'); return false"
onMouseOut="alert('Ho rilevato un evento onMouseOut'); return false">
<img src="rainbow.gif" width="60" height="60">
</a>
Nota: Il comando href="#" crea un link inesistente. Se davvero volessi creare un link, dovresti
invece inserire l'indirizzo della pagina tra le virgolette.
Clicca qui per saperne di pi sui link e le ancore.
Clicca qui per saperne di pi sulle caselle di allarme.
LOOPS
Immagina di aver un programma, e di volergli far ripetere la stessa sequenza di azioni 50 volte di
seguito.
Questo potrebbe accaderti per esempio, se volessi creare un programma per produrre una tabella di
comparazione tra le temperature in gradi Fahrenheit e Celsius.
Il programma dovrebbe quindi produrre una tabella di 50 righe dove vengono mostrate diverse
temperature secondo le due scale.
Invece di inserire nel tuo programma 50 righe quasi uguali, potresti servirti dei loop ("anelli") per
rendere possibile al programma di eseguire tale compito.
Ci sono due tipi diversi di loop: for e while.

Il loop for si usa quando si sa gi quante volte il programma dovr ripetere una certa operazione.
Nel nostro esempio, se volessimo creare esattamente 50 righe.
Il loop while si usa quando si vuole che questo continui ad operare finch una certa condizione
risulter soddisfatta.
Per esempio, se volessimo creare una tabella di comparazione tra Celsius e Fahrenheit, con un
incremento di 15 gradi per ogni riga, e volessimo arrivare fino al valore di 1200 Celsius.
Ecco la descrizione di ognuno dei due loop:
LOOP FOR:
SINTASSI:
for (variable=startvalue; variable<=endvalue; variable=variable+incrementfactor)
{
// Inserisci qui la riga di programma destinata al loop.
}
Inserisci un variablename ("nome di variabile") dove dice variable.

Inserisci il valore di partenza del loop dove dice startvalue.
Inserisci il valore finale del loop dove diceendvalue.
Inserisci il fattore che ogni loop deve incrementare dove dice incrementfactor.
Nota: L'incrementfactor pu anche essere negativo, se si vuole.
Inoltre il segno <= pu essere sostituito da altri simboli di comparazione, es.>, == o altro.
ESEMPIO:
<html>
<head>
<title>Celsius-Fahrenheit Converter</title>
</head>
<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
for (celsius=0; celsius<=50; celsius=celsius+1)
{
document.write("<tr><td>"+celsius+"</td><td>"
+((celsius*9/5)+32)+"</td></tr>");
}
</script>
</table>
</body>
</html>
Clicca qui per vedere la pagina generata da questo esempio.
LOOP WHILE:
SINTASSI:
while (variable<=endvalue)
{
// Inserisci qui la riga di programma destinata al loop.
}
Inserisci un variablename ("nome di variabile") dove dice variable.

Inserisci il valore finale del loop dove diceendvalue.
Nota: Il segno <= si pu sostituire con altri simboli in grado di soddisfare la condizione, es. >, == o
altro.
ESEMPIO:
<html>
<head>
<title>Celsius-Fahrenheit converter</title>
</head>
<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
celsius=0;
while (celsius<=50)
{
document.write("<tr><td>"+celsius+
"</td><td>"+((celsius*9/5)+32)+"</td></tr>");
celsius=celsius+1;
}
</script>
</table>
</body>
</html>
Clicca qui per vedere la pagina generata da questo esempio.
BREAK & CONTINUE

Esistono due comandi speciali che si possono usare nei loop: break e continue.
break semplicemente interrompe il loop e continua con ci che segue il loop.
Per esempio si potrebbe avere un loop in grado di calcolare la radice quadrata dei numeri
decrescenti a partire da 50.
Siccome il calcolo della radice quadrata di numeri negativi un'operazione matematica non
consentita, sarebbe opportuno interrompere il loop nel momento in cui la radice quadrata di zero
sar stata calcolata.
Per fare questo bisogner inserire all'interno del loop:
if (value==0) {break};
continue interrompe il loop in corso e continua con il valore seguente.

Per esempio si potrebbe avere un loop in grado di dividere un certo valore per un fattore di numeri
compresi tra -50 e +50.
Siccome la divisione per zero un'operazione matematica non consentita, ecco come sarebbe il
loop:
for (value=-50; value<=50; value=value+1)
{
if (value==0) {continue};
document.write((100/value)+"<br>");
}
ARRAYS
Quando si lavora con programmi complessi, si possono incontrare situazioni in cui si hanno molte
variabili pi o meno simili.
Invece di essere costretto a scrivere una riga per ogni operazione, a causa di una variabile, puoi fare
uso di raggruppamenti ("arrays") che sono in grado di aiutarti ad automatizzare il processo.

Esempio 1
Esempio 2
value1=10;
value2=20;
value3=30;
....
qui vanno 96 righe simili
....
value100=1000
value=new Array;
for (number=1; number<=100; number=number+1)
{ value[number]=number*10};
Nell'esempio 1 avrai bisogno di inserire 100 righe per compiere un'operazione con le tue variabili.
Nell'esempio 2 devi soltanto inserire 3 righe, indipendentemente dal numero di variabili.
Il raggruppamento deve essere definito prima che ci si riferisca ad alcuna delle variabili che
contiene.
Questo si ottiene usando la sintassi: variablename=new Array;
Sostituisci variablename con il nome prescelto per il tuo raggruppamento.
Note: la parola "new" deve essere scritta tutta in minuscolo, mentre "Array" deve iniziare con la A
maiuscola.
Come mostra l'esempio, i raggruppamenti diventano estremamente efficaci quando sono usati in
combinazione con i loop.
Comunque, non c' bisogno di sistemare le variabili dei raggruppamenti in loop.
Le singole variabili si possono trattare con una sintassi del genere:
value[9]=170;
OGGETTI JAVASCRIPT
Qui sotto c' una lista di tutti gli oggetti inscritti in javascript (built-in javascript objects).
GENERAL OBJECTS
NAVIGATOR OBJECTS
Date
Math
String
navigator
navigator.plugin
navigator.mimetype
WINDOW OBJECTS
window
window.frame
window.location
window.history
window.document
window.document.layer
window.document.link
window.document.image
window.document.area
window.document.anchor
window.document.applet
window.document.form
WINDOW.DOCUMENT OBJECTS
WINDOW.DOCUMENT.FORM OBJECTS
window.document.form
window.document.form.textarea
window.document.form.text
window.document.form.fileupload
window.document.form.password
window.document.form.hidden
window.document.form.submit
window.document.form.reset
window.document.form.radio
window.document.form.checkbox
window.document.form.button
window.document.form.select
window.document.form.select.option
OGGETTO DATE
Quando vuoi avere accesso alla data devi semplicemente creare una variabile del tipo "Date".
Se vuoi conservare la data corrente in una variabile chiamata "ThisDate", ecco cosa devi scrivere:
ThisDate=new Date();
Nota: new DEVE essere scritto "new" (non "New") e Date DEVE essere scritto con la D maiuscola.
UN ESEMPIO
Dopo avere dichiarato questa variabile, hai accesso a mese, giorno, anno, come puoi vedere
nell'esempio qui sotto:
<html>
<head>
<title>Esempio dell'uso dell'oggetto Date</title>
<script>
CurrentDate=ThisDate.getDate()+"-"+(ThisDate.getMonth()+1)+"-"+ThisDate.getYear();
alert("Date (DDMMYY) is: "+CurrentDate);
</script>
</head>
<body>
Questa pagina ti d la data corrente!
</body>
</html>
METODI
I seguenti metodi sono definiti per gli oggetti Date:
OGGETTO SPIEGAZIONE
ESEMPIO
getDate()
Data come valore compreso tra 1 e 31.
1
getDay()
Giorno della settimana come valore compreso tra 0 e 6. 0=domenica, 1=luned, ecc.
1
getHours()
Ora come valore compreso tra 0 e 23.
4
getMinutes() Minuto come numero compreso tra 0 e 59. 56
getMonth() Mese come valore compreso tra 0 e11.
NOTA: Dic.=11!!! 10
getSeconds() Secondi come valore compreso tra 0 e 59. 51
getTime()
Millisecondi dal 1/1 1970 alle 0.00 AM
941428636010
getTimezoneOffset() Differenza d'orario tra il computer dell'utente e l'ora di Greenwich, in minuti.
-60
getYear()
Anno come valore compreso tra 0 e 99.
99
toGMTString()
Data, Mese, Anno e Orario secondo le convenzioni del Meridiano di
Greenwich. Mon, 1 Nov 1999 03:58:08 UTC
toLocalString Converte una data nel formato locale.
11/01/1999 04:58:35
Clicca qui per la definizione dell'oggetto (object) fornita da DevEdge.
GMT significa Greenwich Mean Time (Orario del Meridiano di Greenwich).
NOTA:
Javascript memorizza le date come numero di millisecondi trascorsi dal 1 gennaio 1970, alle ore
00:00:00.
Non si pu accedere a date anteriori al 1 gennaio 1970.
UN ALTRO ESEMPIO: Rinvio secondo l'ora del giorno
Un secondo esempio potrebbe essere questa sequenza, che, se applicata, in grado di dirigere
l'utente verso diversi motori di ricerca secondo l'ora del giorno.
<html>
<head>
<script language="JavaScript">
hour=ThisDate.getHours();
if (hour<12) {window.location.href="http://www.yahoo.com"}
else
if (hour<18) {window.location.href="http://www.hotbot.com"}
else {window.location.href="http://www.metacrawler.com"}
</script>
</head>
<body>
</body>
</html>
Dovrebbe essere abbastanza facile sostituire i link del motore di ricerca con i tuoi, e in questa
maniera personalizzare questa sequenza secondo le tue esigenze personali.
UN ESEMPIO FINALE: Conto alla rovescia per l'ANNO 2000

Un altro esempio potrebbe essere un orologio che compie il conto alla rovescia fino alla notte di
Capodanno del 2000.
<html>
<head>
<script>
function countdown()
{
YearsLeft=99-ThisDate.getYear();
MonthsLeft=11-ThisDate.getMonth();
DaysLeft=31-ThisDate.getDate();
HoursLeft=24-ThisDate.getHours();
MinutesLeft=60-ThisDate.getMinutes();
SecondsLeft=60-ThisDate.getSeconds();
document.forms.countdownform.T1.value=YearsLeft;
document.forms.countdownform.T2.value=MonthsLeft;
document.forms.countdownform.T3.value=DaysLeft;
document.forms.countdownform.T4.value=HoursLeft;
document.forms.countdownform.T5.value=MinutesLeft;
document.forms.countdownform.T6.value=SecondsLeft;
CountDownId=setTimeout("countdown()",1000);
}
</script>
</head>
<body onLoad="countdown()">
<div align="center">
<table border="1">
<tr><td><big><big><big>Time left till New Year's Evening 2000</big></big></big></td></tr>
<tr><td><form name="countdownform"><div align="center">
<p>
<input type="text" name="T1" size="2">Years,
<input type="text" name="T2" size="2"> Months,
<input type="text" name="T3" size="2"> Days,
<input type="text" name="T4" size="2"> Hours,
<input type="text" name="T5" size="2"> Minutes,
<input type="text" name="T6" size="2"> Seconds
</p>
</div></form></td></tr>
</table>
</div>
</body>
</html>
OGGETTO MATH
Puoi usare l'oggetto "math" per avere accesso a funzioni e costanti matematiche.
Se, per esempio, volessi memorizzare la radice quadrata in una variabile chiamata "result", ecco
cosa dovresti inserire:
result=Math.sqrt(4);
Qui sotto c' la lista di tutte le costanti e funzioni relative all'oggetto math:
OGGETTO SPIEGAZIONE
ESEMPIO
abs
Valore assoluto
Math.abs(4.5)
sin, cos, tan Funzioni trigonometriche standard; argomento in radiante Math.sin(65)
acos, asin, atan
Funzioni trigonometriche inverse; riporta valori in radiante
Math.asin(0.9)
exp, log
Esponenziali e logaritmi naturali, base e
Math.exp(10)
Math.log(10)
ceil
Riporta il numero intero pi piccolo maggiore
o uguale all'argomento
Math.ceil(4.5)
floor Riporta il numero intero pi grande minore
o uguale all'argomento
Math.floor(4.5)
min, max
Riporta il maggiore o il minore (rispettivamente) fra due argomenti
Math.min(4,9)
Math.max(4,9)
pow Esponenziale; il primo argomento la base, il secondo l'esponente
random
Riporta un valore a caso tra 0 e 1.
Se vuoi un valore tra 0 e 10: usa Math.random()*10
Math.random()
round Arrotonda l'argomento al numero intero
pi vicino
Math.round(4.5)
sqrt Riporta la radice quadrata Math.sqrt(4)
Math.pow(4,2)
Clicca qui per la definizione di oggetto (object) fornita da DevEdge.

Nota: Devi mettere "Math." davanti ad ogni oggetto.
Per esempio: MyVariable=Math.sqrt(5);
Se fai riferimento pi volte a oggetti Math nel tuo programma, ti conviene usare la formula "with
(Math)".
Racchiudendo i tuoi calcoli in "with (Math)", non devi scrivere Math ogni volta che fai riferimento
all'oggetto.
Guarda questi esempi (fanno esattamente la stessa cosa):
MODO FURBO
with (Math)
{
result4=sqrt(4);
result4=sqrt(3);
result4=sqrt(2);
result4=sqrt(1);
}
MODO NON TANTO FURBO
result4=Math.sqrt(4);
OGGETTO STRING
L'oggetto string (stringa) rende pi facile l'uso delle stringhe.
Questi sono i metodi e le propriet disponibili per gli oggetti string:
Nota:
Negli esempi, poniamo che alla variabile chiamata MyString sia
assegnato il valore "Go Johnny, Go Go Go".
OGGETTO SPIEGAZIONE
length Rimanda la lunghezza della stringa
MyString.length rimanderebbe 19
charAt(n)
Rimanda il carattere nella sua posizione
specifica nella stringa.
MyString.charAt(3)
rimander il carattere "J".
Nota:
J il quarto carattere della stringa,
ma siccome il conteggio inizia con 0,
il quarto carattere viene indicato come numero 3.
charCodeAt(n)
Rimanda il codice del carattere nella
posizione specifica nella stringa.
MyString.charCodeAt(4)
rimander il valore 74.
Il motivo che J il carattere n.74 nel
cosiddetto ISO-Latin-1 codeset.
indexOf(string[,n]) Rimanda la prima posizione della sottostringa (substring).
MyString.indexOf("Go")
rimander 0.
Nota:
Se una sottostringa all'inizio di una stringa,
la sua posizione zero.
Se una sottostringa non presente all'interno
della stringa, il suo valore -1.
MyString.indexOf("Go",3)
rimander 11.
Nota:
La ricerca di "Go" parte dal terzo carattere,
ma il conteggio inizia sempre dal primo.
La prima presenza di "Go" (se la presenza prima
del terzo carattere omessa) al
carattere n. 12. Siccome ci si riferisce
al primo carattere come n. 0, il risultato
11.
lastIndexOf(substring[,n]) Rimanda l'ultima posizione della
sottostringa
MyString.lastIndexOf("Go")
rimander 17.
Nota:
Se una sottostringa all'inizio di una stringa,
la sua posizione zero.

L'ultima posizione possibile in una stringa dunque
uno meno della lunghezza della stringa.
Se una sottostringa non presente all'interno
della stringa, il suo valore -1.
fromCharCode(x[,y,z])
Costruisce una stringa dalla sequenza specifica dei valori del codeset
ISO-Latin-1.
String.fromCharCode(74,75,76)
rimander "JKL".
substring(x,y) Rimanda lo specifico subset della stringa,
attraverso la specificazione degli indici di inizio e fine.
MyString.substring(3,9)
rimanderebbe "Johnny".
Nota:
Il primo carattere il numero 0.
x indica l'inizio della sottostringa.
y indica la fine della sottostringa.
Cos, y NON il numero di caratteri
da includere, iniziando dal carattere x.
toLowerCase()
Rimanda la stringa in caratteri minuscoli
MyString.toLowerCase()
rimanderebbe "go johnny, go, go, go".
toUpperCase()
Rimanda la stringa i caratteri maiuscoli
MyString.toUpperCase()
rimanderebbe "GO JOHNNY, GO, GO, GO".
split(separator[,n]) Divide la stringa in un raggruppamento di stringhe separando la stringa in
sottostringhe
MyArrayOfS=MyString.split(", ")
risulter nella creazione di un raggruppamento:
MyArrayOfStrings[0]
sar "Go Johnny"
MyArrayOfStrings[1]
sar "Go"
MyArrayOfStrings[2]
sar "Go"
MyArrayOfStrings[3]
sar "Go"
Il numero di elementi nel raggruppamento
memorizzato in MySplitString.length.
MyArrayOfStrings=MyString.split(", ",2)
avr come risultato un diverso raggruppamento:
MyArrayOfStrings[0]
sar "Go Johnny"
MyArrayOfStrings[1]
sar "Go"
Introducendo un limite al numero delle divisioni,
abbiamo ridotto i raggruppamenti a 2 soli elementi.
NOTA: Javascript 1.2 o pi alt
slice(x,y)
Fa esattamente la stesso lavoro delle sottostringhe.
substr(x,y)
Rimanda un subset di una stringa.
E' quasi come la sottostringa (substring).
La differenza che, in substring si inseriscono
lo startindex e l'endindex (indice di partenza e indice di fine),
mentre in substr si inserisce lo startindex e il
numero di caratteri da includere.
substr(3,6)
rimader "Johnny",
che lo stesso risultato di substring(3,9)
match Compara le variabili.
Usa invece questa sintassi:
if(varibel1==variabel2) {bla bla bla}
replace(/subtext/[gi]) Sostituisce le sottostringhe di una stringa.
MyString.replace(/Go/, "Up")
rimander "Up Johnny, Go, Go, Go".
MyString.replace(/Go/g, "Up")
rimander "Up Johnny, Up, Up, Up".
/Go/g Costringe a una sostituzione globale.
La sostituzione non riguarda solo il primo "Go".
MyString.replace(/go/gi, "Up")
rimander "Up Johnny, Up, Up, Up".
/go/i Costringe la sostituzione ad ignorare
la differenza tra maiuscolo e minuscolo.
search Cerca le sottostringhe in una stringa.

Usa substring invece.
OGGETTO NAVIGATOR
il navigator object contiene informazioni sul browser.
OGGETTO SPIEGAZIONE
DEF
appCodeName
Specifica il nome in codice del browser.
NS2+
appName
Specifica il nome del browser.
NS2+
appVersion
Specifica informazioni sulla versione del browser. NS2+
userAgent
Specifica l'user agent header. NS2+
mimeTypes
Una lista (array) di tutti i tipi di MIME supportati dal browser del visitatore.
plugins
Una lista di tutti i plug-in installati al momento nel browser del visitatore.
javaEnabled
plugins.refresh
plug-in.
taintEnabled
platform
Controlla se java abilitato. NS3+

Rende disponibili i plug-in appena installati e pu caricare finestre contenenti
Specifica se abilitato il data tainting
NS3+
Indica la piattaforma (Win32, Unix, etc.) per cui il browser stato compilato.
language
Indica la versione di lingua del browser (es: UK, De, Dk). NS4+
preference
Permette a un programma specifico di raccogliere ed ordinare alcune
preferenze di Navigator.
NS4+

Javascript Tutorial

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Javascript Tutorial

Caricato da

Copyright:

Formati disponibili

JavaScript Fondamentali :

Controllo dei Browser

Convalida dei Form

Prima di addentrarci in argomenti complessi, iniziamo ad esplorare le strutture fondamentali di

Se inseriamo il comando "alert" tra i tag <script language="javascript"> e </script> il browser lo

Metti sempre il testo tra " ".

Le lettere maiuscole sono diverse dalle minuscole.

Per esempio, un comando javascript si chiama onMouseOver.

Guarda adesso questo esempio:

Benvenuto nel mio mondo!!!

Guarda questo esempio per capire dove javascript scrive il testo:

Ecco quello che si vedr sullo schermo:

Il risultato dell'esempio 1 sar 10 (5+5).

Un ottimo consiglio di usare la stessa sintassi per tutte le variabili.

Nota: il comando if statement spiegato pi avanti in questo corso.

I nomi sulle scatole rappresentano i nomi delle variabili.

Ed infine le scarpe, rappresentano il contenuto delle variabili.

Guarda questo esempio:

Questo esempio scriver "Henrik" nel documento.

Prova a predire il risultato dell'esempio prima di continuare a leggere.

ASSEGNARE VALORI ALLE VARIABILI

Questa tabella contiene i diversi operatori di comparazione:

Sulla pagina funzioni troverai materiale sulle variabili globali e locali.

Ancora una volta, importante notare che if si scrive "if".

E, OPPURE & NON

Non si scrive ! ed usato per invertire il risultato.

La sintassi : if (!(condition)) {action}

Ecco come abbiamo ottenuto la funzione:

La sintassi generale di una funzione :

I caratteri { e } indicano l'inizio e la fine della funzione.

Gli eventi si usano per due scopi principali:

Ecco una breve descrizione degli scopi principali di ogni evento:

Clicca qui per saperne di pi sui form.

<form method="yourchoice" action="yourchoice" onsubmit="return checkform()">

La funzione checkform() risponde true (vero), oppure false (falso).

Ecco l'HTML per questo esempio:

Ci sono due tipi diversi di loop: for e while.

Inserisci un variablename ("nome di variabile") dove dice variable.

Clicca qui per vedere la pagina generata da questo esempio.

Inserisci un variablename ("nome di variabile") dove dice variable.

Clicca qui per vedere la pagina generata da questo esempio.

BREAK & CONTINUE

continue interrompe il loop in corso e continua con il valore seguente.

Guarda questo esempio:

UN ALTRO ESEMPIO: Rinvio secondo l'ora del giorno

UN ESEMPIO FINALE: Conto alla rovescia per l'ANNO 2000

Clicca qui per la definizione di oggetto (object) fornita da DevEdge.

MODO NON TANTO FURBO

la sua posizione zero.

search Cerca le sottostringhe in una stringa.

Controlla se java abilitato. NS3+

Potrebbero piacerti anche