Javascript

Transcript

Javascript

Dott.Ing.Ivan Ferrazzi
Javascript
Introduzione
alla
programmazione
Dott. Ing. Ivan Ferrazzi
V1.2 del 03/02/2014
1/32
Copyright ©2014 Dott.Ing. Ivan Ferrazzi
Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.2 or any later version published by the
Free Software Foundation; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts.
2/32
Indice generale
INTRODUZIONE....................................................................................................4
CONCETTI BASE...................................................................................................6
JavaScript in HTML...........................................................................................6
Per iniziare: alert()...........................................................................................7
Le variabili.......................................................................................................8
Gli operatori.....................................................................................................9
Il concatenamento.........................................................................................10
GLI OGGETTI......................................................................................................11
Oggetti in JavaScript......................................................................................11
Oggetti del DOM: getElementById()..............................................................12
Le stringhe oggetto String.............................................................................13
Oggetto Date.................................................................................................14
Oggetto Image...............................................................................................15
Le finestre......................................................................................................16
GLI ARRAY..........................................................................................................18
GLI EVENTI.........................................................................................................20
FINESTRE DI DIALOGO.......................................................................................22
Le finestre di conferma..................................................................................22
Le finestre per l'inserimento di dati...............................................................22
COMANDI CONDIZIONALI E CICLI.......................................................................23
Comando condizionale if...else......................................................................23
Il comando condizionale switch.....................................................................24
Il ciclo for.......................................................................................................25
Il ciclo while...................................................................................................25
LE FUNZIONI......................................................................................................27
Concetto base................................................................................................27
Variabili locali e globali..................................................................................29
I FORM...............................................................................................................30
Interagire con i componenti di un modulo FORM...........................................30
3/32
INTRODUZIONE
Javascript nasce dall'esigenza venutasi a creare di interagire con i diversi
oggetti della pagina web (immagini, form, link, ecc.) , cosa che era impossibile
fare con l'utilizzo del solo HTML.
Questo linguaggio, che con il suo utilizzo trasforma una pagina HTML in
Dynamic HTML (DHTML), riesce a dar vita a delle pagine dinamiche, cioè vive,
che cambiano a seconda di quello che fa il visitatore.
JavaScript è un linguaggio di scripting, ciò significa che la sintassi JavaScript
potete scriverla direttamente dentro la pagina HTML, senza bisogno di produrre
alcun file compilato.
É direttamente il browser, tramite un apposito motore di scripting (cioè di
visualizzazione), che legge e interpreta le parti di codice JavaScript.
Javascript non è Java, questi due linguaggi si assomigliano un po' nella sintassi
(nel modo di richiamare oggetti e le loro proprietà tramite il "."), ma l'analogia
termina qui. In realtà si tratta di due mondi complementari, di due linguaggi
che fanno cose differenti.
Infatti, per utilizzare Java bisogna installare sul proprio pc un software che
legge e interpreta i programmi scritti con questo linguaggio, questo software è
appunto la "Java Virtual Machine".
JavaScript è un linguaggio lato-client, questo vuol dire che le pagine web
vengono inviate all'utente da un web server, cioè da un programma che si
trova su un computer remoto, e che per lo più non fa nient'altro che inviare le
pagine a chi ne fa richiesta. L'utente da casa visualizza sul proprio browser le
pagine che gli sono stato inviate.
I linguaggi di scripting che vengono eseguiti dal web server invece si chiamano
server side o lato server.
JavaScript è un linguaggio lato client, ciò significa anche che gli script avranno
validità all'interno delle singole pagine web, e non da una pagina all'altra. Con
4/32
JavaScript è possibile infatti passare una piccola quantità di dati da una pagina
all'altra, ma è un'operazione che può essere effettuata con una certa difficoltà.
5/32
CONCETTI BASE
JavaScript in HTML
Il codice JavaScript viene integrato all'interno della struttura HTML grazie
al tag <script>...</script>. E' possibile inserire uno o più tag <script>
all'interno della struttura HTML ed il motore JavaScript andrà ad
elaborarne i vari contenuti partendo dal primo blocco in alto e
proseguendo in sequenza verso il basso. I vari blocco vengono visti dal
motore JavaScript come uno unico.
In alcuni casi utilizziamo JavaScript per andare a manipolare elementi
HTML. Siccome anche l'interprete HTML elabora la struttura HTML
dall'alto verso il baso è fondamentale che il blocco JavaScript in questione
si trovi dopo l'elemento HTML di riferimento.
Nella versione HTML 4.01 era indispensabile definire anche il MIME-type
utilizzato con l'attributo type, ossia
<script type=”text/javascript”>
</script>
A partire dalla versione HTML5 questo non è più necessario e si può
quindi scrivere semplicemente
<script>
</script>
E' possibile importare del codice JavaScript che si trova all'interno di un
file estero. In questo caso possiamo scrivere
6/32
<script src=”global.js”></script>
dove global.js è il file che vogliamo importare.
Se volessimo quindi aggiungere un codice JavaScript all'interno del tag
<body> potremmo scrivere
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<meta charset=”utf-8” />
</head>
<body>
<script>
</script>
</body>
</html>
Per iniziare: alert()
Per iniziare a capire JavaScript partiamo da un metodo molto semplice,
ossia alert(). Questo metodo non fa altro che aprire una finestra di popup con all'interno il valore che passiamo al metodo stesso. Vediamo il
seguente semplice esempio:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert(“Buon giorno a tutti”);
</script>
</body>
</html>
Aprendo il file con all'interno questo codice vedremo apparire nel browser
una finestra di pop-up con all'interno la scritta Buon giorno a tutti.
Il blocco <script> può trovarsi all'interno di una qualsiasi parte della
struttura HTML, ma il comportamento cambia in base a dove lo
inseriamo.
Se inseriamo il blocco all'interno della sezione <head> questo verrà
eseguito prima ancora di costruire la pagina presente all'interno del
<body>. Vediamo il seguente esempio:
<!DOCTYPE html>
<html>
<head>
7/32
<script>
</script>
</head>
<body>
ciao!
</body>
</html>
In questo caso vediamo apparire il pop-up ancora prima di vedere la
scritta ciao! all'interno del nostro browser. Questo succede perché alert()
sospende tutte le attività fino a quando l'utente non preme sul pulsante
OK oppure sul pulsante Annulla.
Mettendo il blocco <script> all'interno del <body>, ma dopo al testo ciao!
avrà come conseguenza la visualizzazione del testo all'interno del
browser e poi l'apertura del pop-up.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
ciao!
<script>
</script>
</body>
</html>
Se l'esecuzione del codice JavaScript è legato all'intero caricamento della
pagina in questione è possibile inserire il blocco <script> anche dopo la
chiusura del tag <body>, ossia dopo </body>.
Le variabili
JavaScript, come ogni linguaggio di programmazione che si rispetti, mette
a disposizione la possibilità di utilizzare delle variabili. Le variabili sono
degli spazi di memoria identificati da un'etichetta scelta dal
programmatore che permettono di memorizzare determinati valori.
La parola chiave che utilizziamo per definire delle variabili è var. Per
definire una variabile scriviamo
var nome_variabile = valore_variabile;
dove nome_variabile è il nome che il programmatore sceglie per lo spazio
di memoria prenotato e valore_variabile il suo contenuto. I tipi principali
di valori che possiamo assegnare ad una variabile sono numerici,
stringhe, oppure booleani.
Un valore numerico lo assegniamo come segue
8/32
var numero = 12;
mentre la stringa (sequenza di caratteri) va inserita tra virgolette singole,
oppure doppie
var stringa = “ciao a tutti”;
var stringa = 'ciao a tutti';
Il valore booleano può essere vero ( true) oppure falso (false). In questo
caso scriviamo come valore
var bool = true;
var bool = false;
Una variabile può contenere anche altre strutture che però si vedranno in
seguito.
La parola chiave var è necessaria quando creiamo la variabile. Se
vogliamo cambiare il valore ad una variabile creata precedentemente
scriviamo semplicemente
stringa = “Nuovo contenuto”;
numero = 23;
bool = true;
In fase di assegnazione di un valore è possibile utilizzare anche delle
variabili. Se scriviamo
var a = 3;
var b = 5;
b = a;
il nuovo valore di b diventa 3.
Gli operatori
Gli operatori classici che possiamo utilizzare sono: + (addizione), (sottrazione), * (moltiplicazione), / (divisione) e % (modula – resto di una
divisione). Possiamo quindi scrivere
var a = 5 + 3;
In questo caso il valore assegnato ad a sarà 8.
JavaScript, così come tutti i linguaggi di programmazione, inizia ad
elaborare la parte che si trova a destra dell'uguale fino a quando non
recupera un valore effettivo che può essere poi salvato all'interno della
variabile indicata nella parte sinistra. La parte destra può contenere dei
valori come nell'esempio appena visto, ma può anche contenere delle
9/32
variabili. In questo caso è quindi possibile scrivere
var a = 10;
a = a + 5;
JavaScript inizia ad elaborare la parte a + 5 recuperando l'attuale valore
di a, ossia 10. Poi calcola la somma dei due valori, quindi 10 + 5
restituendo 15. Il valore restituito è un valore effettivo che può essere
memorizzato all'intero di una variabile quindi prosegue con
l'assegnazione a = 15.
Il concatenamento
L'operatore + si comporta in maniera differente in base ai valori che
vogliamo “unire”. Nel caso di due valori numerici l'operatore + esegue
l'operazione matematica, ossia l'addizione. Se cerchiamo, invece, di unire
un valore numerico ed una stringa, oppure due stringhe, l'operatore
concatena i due valori creando un'unica stringa.
var stringa = “ciao a “ + “tutti”;
Il valore di stringa diventa “ciao a tutti”. Nel seguente caso
var stringa = “Il risultato è “ + 23;
il valore di stringa diventa Il risultato è 23.
Vediamo un esempio completo molto semplice
<!DOCTYPE html>
<html>
<head>
</head>
<body>
ciao!
<script>
var nome = “Ivan”;
alert(“Il mio nome è ” + nome);
</script>
</body>
</html>
10/32
GLI OGGETTI
Oggetti in JavaScript
La programmazione JavaScript è una programmazione ad oggetti, questo
vuol dire che dobbiamo essere in grado di riconoscere i vari elementi che
formano una pagina web.
•
oggetto navigator, rappresentato dal browser
•
oggetto window, rappresentato dalla finestra che contiene la pagina
web
•
oggetto window.frame, reppresentato dai frames
•
oggetto document, rappresentato dal documento HTML
•
oggetto form, rappresentato dai form
•
oggetto images, rappresentato dalle immagini
•
oggetto cookie, rappresentato dai cookie
•
oggetto location, rappresentato dalla barra degli indirizzi
•
oggetto status, rappresentato dalla barra di stato
ecc...ecc....
Questa suddivisione della pagina in oggetti ci permette di interrogare
questi elementi, leggerne le proprietà e in taluni casi anche cambiare il
valore di queste proprietà.
Un altro concetto importante è che ognuno degli oggetti del browser ha
dei metodi e delle proprietà. Questo equivale a dire che ognuno degli
oggetti del browser ha a disposizione determinate azioni e non altre.
Prendiamo ad esempio una macchina, la facciamo diventare il nostro
11/32
oggetto. L'oggetto macchina ha delle proprietà come potrebbero essere il
numero delle ruote, il colore ecc., ma può anche avere dei metodi come
possono essere l'accelerazione o la frenata.
Tutto questo tradotto in codice andrebbe così rappresentato:
[oggetto].[caratteristica]
es. macchina.nr_ruote
[oggetto].[metodo]
es. macchina.accelerazione()
Quindi se volessimo far apparire sullo schermo la scritta ciao dovremmo
scrivere il codice in questo modo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write(“ciao”);
</script>
</body>
</html>
Analizziamo quello che abbiamo scritto, l'oggetto document rappresenta il
documento HTML, mentre write unito a document dal punto, è il metodo
cioè la funzione all'interno dell'oggetto stesso che mi permette di
stampare a video.
Oggetti del DOM: getElementById()
Ogni singolo tag presente all'interno della nostra pagina viene
rappresentata nel browser sotto forma di albero ad oggetti (il DOM).
JavaScript ci permette di effettuare una ricerca all'interno del DOM per
ritrovare l'oggetto con specifico valore id.
Il tag
<div id=”box”><strong>ciao</strong></div>
potrà essere recuperato con JavaScript con
var obj = document.getElementById(“box”);
Ogni oggetto che identifica un tag contenitore ha al suo interno la
proprietà innerHTML che contiene l'intera struttura HTML presente
all'interno dell'elemento stesso. Se scriviamo
<html>
<head>
</head>
12/32
<body>
<div id=”box”><strong>ciao</strong></div>
<script>
alert(document.getElementById(“box”).innerHTML);
</script>
</body>
</html>
vedremo apparire sullo schermo il pop-up con all'interno il valore
<strong>ciao</strong>
Attenzione! Possiamo utilizzare getElementById() solo se l'interprete HTML
ha già interpretato l'oggetto che intendiamo recuperare.
Le stringhe oggetto String
Quando creiamo una stringa con JavaScript utilizzando la forma semplice
var str = “ciao”;
JavaScript crea un oggetto. Infatti è possibile creare la stessa stringa
utilizzando la forma
var str = new String(“ciao”);
Una volta creato l'oggetto String (in tutte e due i casi) è possibile
utilizzare le proprietà e i metodi presenti in esso.
restituisce il numero di caratteri di una stringa
restituisce il carattere in posizione pos
restituisce l'indice della prima occorrenza della stringa
str presente all'interno della stringa in questione.
Restituisce –1 se la stringa str non è presente.
lastIndexOf(str)
restituisce l'indice della prima occorrenza partendo da
destra della stringa str presente all'interno della
stringa in questione. Restituisce –1 se la stringa str
non è presente.
replace(str1,str2) rimpiazza la prima occorrenza di str1 con str2
split(str)
converte una stringa in array utilizzando la stringa str
come elemento di separatore all'interno della stringa
di partenza
substring(p1[,p2]) restituisce la sotto stringa in base all'indice di partenza
p1 e quello finale p2. Indicando solamente p1 JavaScript
estrarrà la sotto stringa fino alla fine.
length
charAt(pos)
indexOf(str)
Prendiamo come esempio la seguente stringa dalla quale vogliamo
recuperare il valore presente dopo il simbolo dell'uguale (=), ossia 2.
13/32
var stringa = new String(“file:///home/mirko/Scrivania/pre?valore=2”);
Ora proviamo ad estrapolare il dato che ci interessa con
var valore=stringa.substring(stringa.lastIndexOf(“=”)+1);
dove substring() permette di ricavare le lettere a partire da un numero a
scelta, lastIndexOf() invece restituisce l'indice della l'ultima occorrenza
del carattere “=”.
Oppure possiamo ricavare la lunghezza di una stringa:
var x = “ciao”;
document.write(x.length);
Oggetto Date
L'oggetto Date ci permette di interagire con la data di sistema. L'oggetto
ha bisogno di essere inizializzato in questo modo:
var data = new Date();
Ora possiamo interrogare l'oggetto. Ad esempio se volessimo sapere la
data e l'ora attuale basterà digitare:
document.write(data);
I metodi dell'oggetto date sono:
getDay()
getDate()
getMouth()
getYear()
getHours()
getMinutes()
getSeconds()
getTime()
restituisce
il
numero
relativo
(0=lunedì,...,6=domenica)
restituisce il giorno del mese
restituisce il mese (0=gennaio...)
restituisce l'anno corrente
restituisce l'ora corrente
restituisce i minuti correnti
restituisce i secondi correnti
restituisce i millesecondi dal 1970
I metodi li possiamo utilizzare in questo modo:
var giorno = data.getDate();
document.write(giorno);
La data può essere settata con i seguenti metodi:
14/32
al
giorno
setDate(1)
setMonth(0)
setYear(2003)
setHours(0)
setMinutes(0)
setSecond(0)
primo giorno del mese
0=gennaio
anno 2003
ora a 0
minuti a 0
secondi a 0
Esempio:
data.setDate(1);
document.write(data);
Oggetto Image
L'oggetto Image permette di interagire con le immagini presenti all'interno
del documento e caricate con il tag:
<img src=”nome_immagine.jpg” id=”icon” />
L'oggetto di immagine creato potrà essere modificato utilizzando la
caratteristica src che contiene il percorso dell'immagine:
document.getElementById(“icon”).src
Quindi per cambiare l'immagine icon del tag IMG basterà scrivere:
document.getElementById(“icon”).src=”nuova_immagine.jpg”;
Questo sistema potrebbe risultare lento in quanto l'immagine viene
caricata nel momento richiesto. Il problema si risolve facendo caricare
subito tutte le immagini, senza visualizzarle, al caricamento della pagina.
Questo si ottiene nel seguente modo:
<script>
var icon = new Image();
icon.src =”nuova_immagine.jpg”;
…
document.getElementById(“icon”).src = icon.src;
</script>
Le immagini in questo modo sono già state caricate e basta solo
richiamarle.
15/32
Le finestre
JavaScript ci da la possibilità di aprire nuove finestre, tramite l'oggetto
window. La sintassi sarà quindi:
window.open('percorso','titolo','caratteristiche');
il titolo della finestra è opzionale, mentre nelle caratteristiche possiamo
specificare a nostro piacimento vari parametri come le dimensioni, se far
apparire le barre di scorrimento, se dare la possibilità di
ridimensionemento, ecc. Vediamo un esempio:
<script>
window.open('www.google.it','google','width=300,height=300');
</script>
Le varie caratteristiche che possiamo dare alla finestra sono spiegate
nella tabella:
caratteristica
width
height
left
top
valore
numerico
numerico
numerico
numerico
resizable
yes / no
fullscreen
yes / no
channelmode
yes / no
menubar
yes / no
toolbar
yes / no
location
scrollbars
status
yes / no
yes / no
yes / no
spiegazione
la larghezza della finestra in pixel
l'altezza della finestra in pixel
la distanza dalla sinistra del monitor
la distanza dal lato superiore del monitor
indica se la finestra può essere
ridimensionata o no
indica se la finestra va aperta a tutto
schermo
indica se la finestra deve essere aperta
"in modalità canale" (solo per ie)
la barra del menu (quella con scritto
"file", "modifica", ecc.)
la barra degli strumenti del browser (con i
pulsanti "indietro", "avanti")
la barra degli indirizzi del browser
le barre di scorrimento laterali
la barra di stato (quella in basso)
esempio
width=400
height=200
left=300
top=350
resizable=no
fullscreen=no
channelmode=no
menubar=no
toolbar=no
location=no
scrollbars=no
status=no
può essere utilizzato in combinazione con gli eventi, come
possono essere onClick, onLoad, onUnload. Il consiglio che si può dare è di
non usare troppo le queste finestre popup, per il fatto che non sono molto
amate dai navigatori.
E' possibile aprire una finestra vuota per poi riempirla successivamente
come segue
window.open
<script>
var w = window.open('','','width=300,height=300');
w.document.write(“<b>ciao a tutti</b>”);
16/32
</script>
17/32
GLI ARRAY
Gli array possono essere visti come dei “contenitori”, all'interno dei quali
possiamo immagazzinare delle variabili o dei dati in modo ordinato,
attribuendo degli indici.
La costruzione dell'array può venire in due modi:
<script>
alunni = new Array();
alunni[0]=”mario”;
alunni[1]=”gigi”;
alunni[2]=”luca”;
alunni[3]=”federica”;
alunni[4]=”giorgia”;
</script>
Questa costruzione consente di inserire nell'array alunni tutti i nomi che
vogliamo, ordinati per indice[]. All'interno delle parentesi tonde di Array si
può specificare anche la lunghezza dell'array, cioè in questo caso, quanti
nomi potrà contenere.
I numeri in un array si inseriscono senza virgolette.
Un altro modo per costruire un array è questo:
alunni = new Array(“mario”,”gigi”,”luca”,”federica”,”giorgia”);
Ora possiamo interrogare l'array
18/32
document.write(alunni);
oppure se volessimo visualizzare solo luca:
document.write(alunni[2]);
Se, invece, volessimo sapere da quanti elementi è composto l'array:
document.write(alunni.length);
Gli array possono contenere anche delle immagini:
foto=new Array();
foto[0]=new Image();
foto[0].src=”nome_immagine0.jpg”;
foto[1]=new Image();
foto[1].src=”nome_immagine1.jpg”;
ecc.
19/32
GLI EVENTI
Oltre ad essere organizzato ad oggetti e metodi, JavaScript sfrutta
moltissimo la presenza degli eventi.
Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso
JavaScript e farlo eseguire non appena l'utente esegue una data azione:
quando clicca su un bottone di un form possiamo controllare che i dati
siano nel formato giusto; quando passa su un determinato link possiamo
scambiare due immagini, ecc.
Gli eventi (le possibili cose che possono capitare all'interno della pagina)
sono davvero tanti e ogni nuova versione del browser si arricchisce di
nuove possibilità messe a disposizione degli sviluppatori.
Gli eventi vengono associati ai tag, così se volessimo che il browser
caricata la pagina, visualizzi una finestra di dialogo basterà scrivere
<body onload=”alert('ciao');”>
...
</body>
Vediamo qui di seguito i vari attributi di evento che si possono utilizzare:
onload=””
onunload=””
Il contenuto viene eseguito solo quando l'oggetto in
questione è stato caricato completamente. Può
essere inserito nel tag <body> oppure nei tag <img>.
Il contenuto viene eseguito quando si abbandona
una pagina. Puo essere inserito nel tag <body>.
20/32
onmouseover=””
onmouseout=””
onclick=””
onkeypressed=””
onchange=””
onfocus=””
onblur=””
Il contenuto viene eseguito quando il puntatore del
mouse arriva sull'oggetto in questione.
Il contenuto viene eseguito quando il puntatore del
mouse esce dall'oggetto in questione.
Il contenuto viene eseguito quando viene premuto il
pulsante del mouse sopra l'oggetto in questione.
Il contenuto viene eseguito quando il cursore si
trova sull'oggetto in questione e si preme un tasto.
Il contenuto viene eseguito quando JavaScript
riconosce una variazione di contenuto quando
l'elemento perde il focus (da usare su <select>,
<input>, ecc.).
Il contenuto viene eseguito quando l'oggetto
acquisisce il focus (su elementi <input>, <textarea>,
<select>, ecc.).
Il contenuto viene eseguito quando l'oggetto perde il
focus (su elementi <input>, <textarea>, <select>,
ecc.).
21/32
FINESTRE DI DIALOGO
Le finestre di conferma
Il comando confirm permette di chiedere conferma al visitatore tramite
una finestra che presenta due opzioni annulla e ok. La sintassi è questa:
<body>
<script>
if(confirm('sei sicuro?')) {
document.write(“sei sicuro!”);
}else{
document.write(“non sei sicuro!”);
}
</script>
</body>
Le finestre per l'inserimento di dati
Il comando prompt permette di porre una domanda, con relativa risposta
predefinita (facoltativa), all'utente e consente di dare una risposta, tutto
questo all'interno di un'unica finestra di dialogo.
Sintassi:
<body>
<script>
var nome=prompt(“come ti chiami?”,”inserire il nome”);
document.write(“Il tuo nome è “ + nome);
</script>
</body>
22/32
COMANDI CONDIZIONALI E
CICLI
Comando condizionale if...else...
Il comando if...else... permette di controllare se si verificano delle
condizioni e di reagire in modi diversi. La struttura del comando è la
seguente:
if(condizione){
comandi se condizione è vera;
}else{
comandi se condizione è falsa;
}
gli operatori utilizzabili all'interno del blocco if sono:
==
!=
>
<
>=
<=
uguale
non è uguale o diverso
maggiore di
minore di
maggiore uguale
minore uguale
Più condizioni possono essere combinate tra loro utilizzando gli operatori:
&&
and logico che indica e
23/32
||
!
or logico che indica o
che indica non
esempio:
<html>
<head>
<script>
function nome(){
if (prompt('digita il tuo nome')=='mirko'){
alert('ciao mirko');
document.write('ciao mirko');
}else{
alert('accesso negato');
nome();
}
}
</script>
</head>
<body onload=”nome();”>
</body>
</html>
Il comando condizionale switch
Lo switch è utile quando dobbiamo fare un controllo su una variabile che
può assumere valori diversi. La sintassi è:
switch (variabile da valutare){
case valore1: comando da effettuare;
break;
case valore2: comando da effettuare;
break;
case valoren: comando da effettuare;
break;
default: comando da effettuare;
}
Ora vediamo un esempio pratico:
<html>
<head>
</head>
<body>
<script>
switch(screen.width){
case 640: document.write('larghezza 640');
break:
break:
break:
default: document.write('larghezza sconosciuta');
}
24/32
</script>
</body>
</html>
In questo modo cambiando la definizione dello schermo, cambierà anche
la larghezza dello schermo e verrà visualizzata l'istruzione relativa.
Il ciclo for
Un ciclo for serve a ripetere una serie di istruzioni un determinato
numero di volte, si imposta un contatore, in genere la variabile “i” e la si
imposta uguale a zero, poi la si reimposta come minore del numero di
volte che si vuole che l'operazione venga eseguita, in fine lo si
incrementa. Il ciclo for è molto simile al while, la differenza sta nel fatto
che while prevede una condizione che permette l'interruzione del ciclo.
Sintassi:
for(i=0; i>3; i++) {
comandi
}
Esempio:
<html>
<head>
</head>
<body>
<script type="text/javascript">
for(i=0; i<3; i++) {
document.write('ciao'+"<BR>");
}
</script>
</body>
</html>
Impostando i<3 il comando verrà ripetuto 3 volte.
Il ciclo while
Il comando while permette di controllare una condizione e fino a che
questa si verifica di eseguire determinati comandi.
x=10;
while(x<50){
document.write('ciao');
x++;
}
</script>
25/32
Abbiamo settato una variabile x assegnandogli 10, il comando while
verifica se x è minore di 50, la condizione è vera quindi stampa “ciao” a
video. Con il comando x++, andiamo ad incrementare di uno x che diventa
11. Il controllo continua fino a quando la condizione non si verifica più.
Fino a quando x non diventa 50 verrà sempre stampato “ciao”.
Ora vediamo un esempio dell'utilizzo del while in combinazione con gli
array:
<html>
<head>
</head>
<body>
alunni = new Array();
alunni[0] = "Gigi";
alunni[1] = "Marco";
alunni[2] = "Luca";
voti = new Array();
voti[0] = 7;
voti[1] = 8;
voti[2] = 9;
</script>
<table border=”1”>
x = 0;
while (x<alunni.length){
document.write("<TR><TD>" +
alunni[x] + "</TD><TD>" +
voti[x] + "</TD>");
x++;
}
</script>
</table>
</body>
</html>
In questo esempio vediamo come il while continua a ripetere una riga
della tabella, riempendola con i dati degli array fino a quando non ne
trova più.
26/32
LE FUNZIONI
Concetto base
In Javascript esistono due modi per far eseguire i comandi all'interno della
pagina HTML.
La prima è quella di inserire i comandi all'interno del tag
<script>...</script>.
La seconda possibilità è quella di utilizzare le funzioni, ossia blocchi di
comandi per uno scopo specifico.
Queste si trovano all'interno del tag <head></head> e hanno la seguente
struttura:
function nome_funzione(){
comando_1;
comando_2;
...
comando_n;
}
Le funzioni vengono utilizzate per evitare di dover scrivere nuovamente
parti di programma che all'interno della pagina HTML vengono utilizzate
più spesso. Infatti possiamo richiamare una funzione ogni volta che ne
abbiamo bisogno.
Anche le funzioni vanno racchiuse all'interno del tag <script>.
<html>
<head>
<script>
function ciao(){
27/32
}
</script>
</head>
<body>
<script>
ciao();
</script>
</body>
</html>
Possiamo eseguire una funzione direttamente da diversi componenti
HTML.
<html>
<head>
<script type=”text/javascript”>
function ciao(){
}
</script>
</head>
<body>
<a href=”Javascript:ciao();”>scrivi ciao</a>
</body>
</html>
In questo modo abbiamo richiamato direttamente la funzione dal tag <a>.
Per far apparire la scritta in una nuova finestra scriviamo:
<script>
function ciao(){
finestra=window.open();
finestra.document.write(“ciao”);
}
</script>
oppure si potrebbe anche creare un codice di questo tipo:
<html>
<head>
<script>
function scrivi_testo(text){
document.write(text);
}
</script>
</head>
<body>
<a href=”javascript:scrivi_testo('ciao');”>scrivi</a>
</body>
</html>
In questo modo abbiamo utilizzato una variabile all'interno della funzione,
che viene settata direttamente all'interno del tag <a>.
28/32
Il parametro href all'interno del tag <a> contiene normalmente il
riferimento ad una pagina HTML o a un link interno. Bisogna quindi
utilizzare il comando “javascript:” prima di richiamare la funzione.
Le funzioni possono essere richiamate anche con i gestori di eventi:
<a href=”#” onClick=”scrivi_testo('ciao');”>scrivi</a>
Variabili locali e globali
Le variabili globali hanno valore per tutto il documento HTML e vanno
dichiarate all'inizio dello script e fuori da ogni funzione: il posto da
preferire è nei tag <script> della sezione <head> in modo tale da creare i
contenitori dei valori prima di ogni loro utilizzo;
Le variabili locali hanno valore solo all'interno della funzione in cui sono
dichiarate, cioè all'interno del blocco di codice compreso tra function()
{ e la chiusura della parentesi } e vanno dichiarate entro questi blocchi.
In Javascript le variabili vengono create con la dichiarazione var per
specificare che si tratta di variabili.
29/32
I FORM
Interagire con i componenti di un modulo FORM
Come detto precedentemente una pagina HTML è un oggetto document
che può contenere a sua volta altri oggetti.
Quando in HTML viene costruito un modulo i componenti vengono messi
all'interno del tag <form>...</form>. Vediamo un esempio:
<html>
<head>
</head>
<body>
<form name=”modulo”>
sesso:
<input type=”radio” name=”sesso” value=”maschile”
checked=”checked” />
maschile:  
<input type=”radio” name=”sesso” value=”femminile” />
femminile<br /><br />
<textarea name=”commento” rows=”8” cols=”50”>
il suo commento signore!
</textarea>
</form>
</body>
</html>
Quello che abbiamo creato è un modulo che ci permette di inserire un
commento ed il sesso di una persona.
Quando l'utente sceglie un altro sesso il commento rimane uguale,
cerchiamo quindi di interagire direttamente con il componente del FORM
30/32
per cambiare il testo di default. Tutti i componenti hanno dei gestori di
eventi che “ascoltano” quello che succede componente.
Quello che ci interessa è sapere quando viene premuto il RADIO-BUTTON
maschile e quando quello femminile, per poi cambiare rispettivamente il
testo.
In questo caso abbiamo bisogno del gestore di eventi onClick all'interno
del tag <input type=”radio” ...>, il codice sarà:
<html>
<head>
</head>
<body>
<form name=”modulo”>
<input type=”radio” name=”sesso” value=”maschile”
checked=”checked”
onClick=”document.modulo.commento.value='il suo commento
signore!'” />
maschile:  
<input type=”radio” name=”sesso” value=”femminile”
onClick=”document.modulo.commento.value='il suo commento
signora!'” />
femminile<br /><br />
<textarea name=”commento” rows=”8” cols=”50”>
il suo commento signore!
</textarea>
</form>
</body>
</html>
Come mostra l'esempio possiamo accedere ai singoli componenti
partendo dall'oggetto document.
document.modulo.commento.value
document.modulo.commento.value=”ciao”
[restituisce il contenuto]
[assegna un contenuto]
I FORM inseriti nel documento vengono identificati dal NAME datogli oppure
da un array interno form[0]...form[n]. La stessa cosa succede con gli
elementi che vanno da elements[0]...elements[n].
document.form[0].elements[2].value
document.form[0].elements[2].value=”ciao”
[restituisce il contenuto]
[assegna un contenuto]
Ora vediamo i gestori di eventi più utilizzati nei FORM:
[A] onBlur/onFocus
quando un componente riceve o perde il focus
[B] onChange
quando viene modificato un componente di testo
[C] onClick
quando viene selezionato un componente con il click del mouse
31/32
[D] onSelect
quando viene selezionata una parte di testo all'interno di un componente
di testo
[E] onLoad/onUnload
quando una pagina è stata caricata o chiusa
[F] onMouseOver/onMouseOut
quando il puntatore del mouse si posiziona sul componente o quando
esce dal componente
[G] onSubmit/onReset
quando viene chiesto di inviare i dati di un modulo o di cancellarli
<BODY>
<FORM>
<INPUT TYPE=”FILE”>
<INPUT TYPE=”TEXT”>
<INPUT TYPE=”PASSWORD”>
<INPUT TYPE=”CHECKBOX”>
<INPUT TYPE=”BUTTON”>
<INPUT TYPE=”SUBMIT”>
<INPUT TYPE=”RESET”>
<INPUT TYPE=”RADIO”>
<SELECT>
<OPTION>
<A HREF=”...”></A>
<TEXTAREA></TEXTAREA>
[A]
[G]
[A]
[A]
[A]
[A]
[A]
[A]
[A]
[A]
[A]
[A]
[C]
[A]
[E]
[B]
[B] [D]
[B]
[C]
[C]
[C]
[C]
[C]
[B]
[B]
[F]
[B] [D]
32/32

Javascript

Transcript

Documenti analoghi

APPENDICE A - Hardware e software utilizzati.

Google Maps API

dhtml

18 MAGGIO 2013 - Gruppo Falchi Bergamo

IM4-RM Brochure

Pagina 1 - Istituto Calvino

dhtml

Doc 15-05-14 VB LICEO PROGRAMMI

JavaScript: eventi, errori ed eccezioni

il linguaggio Javascript - Università degli Studi di Modena e Reggio