Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2 ...

Programmazione WebIntroduzione a Javascript

Programmazione Web - Introduzione a Javascript

2

JavaScript è un linguaggio di scripting lato-client, ossia un linguaggio di programmazione interpretato dal browser che prevede la scrittura di script Uno script è un piccolo programma (contenuto o importato in una pagina HTML) che viene interpretato ed eseguito dal browser Mediante l’uso di script è possibile creare dinamicamente i contenuti di una pagina web e aggiungere interattività alla pagina stessa (con un occhio alle prestazioni)

Javascript NON É Java: JavaScript e Java sono due linguaggi di programmazione differenti!!!

Javascript - Definizione


3

Gli script JavaScript possono essere:

contenuti in uno o più file di testo con estensione js e linkati al file HTML con il tag script che va inserito fra i tag head

<head><script type=“text/javascript”

src=“myScript.js”/>

<head>

contenuti nel file HTML, inseriti come testo all’interno del tag script

<script type=“text/javascript”> ... </script>

Javascript – Lo script


4

• Esistono inoltre alcuni attributi HTML in cui si può incorporare del codice:• gli attributi per la gestione degli eventi, come onclick, possono contenere

frammenti di codice (ma non dichiarazioni), da eseguire al verificarsi dell’evento

• l’attributo href del tag <a> può fare riferimento a una funzione javascript con la sintassi:

javascript:nome_funzione(parametri); in questo caso, il click

del link eseguirà la chiamata alla funzione

Inserire lo script in una pagina


5

• Tutte le funzioni e le variabili dichiarate negli script diventano disponibili (quindi possono essere usate e chiamate) non appena il parser analizza il punto della pagina in cui sono dichiarate

• Se uno script contiene codice immediato, cioè scritto al di fuori di funzioni, questo viene eseguito non appena il parser analizza il punto della pagina in cui il codice compare

• Gli script possono utilizzare liberamente funzioni e variabili dichiarate in altri script inseriti nella stessa pagina.

Esecuzione di uno script


6

Alcuni esempi (I)


7

Alcuni esempi (II)


8

Alcuni esempi (II)


9

Alcuni esempi (II)


10

Alcuni esempi (III)


11

Alcuni esempi (III)


12

Alcuni esempi (III)


13

Alcuni esempi (IV)


14

Alcuni esempi (IV)


15

JavaScript è un linguaggio di programmazione case sensitive ossia fa distinzione tra lettere maiuscole e minuscole

num è diverso da Num

Ogni singola istruzione va conclusa con il punto e virgola!!alert(“Hello world!!!”);

I commenti all’interno di uno script vanno inseriti tra i caratteri /* e */ oppure dopo // per commenti su una riga

/* questo è un commento */

Partiamo dalla sintassi...


16

In Javascript possiamo avere i seguenti tipi di dati

Numeri - in JavaScript non vi è differenza tra numeri interi e numeri in virgola mobile

Stringhe - una stringa è formata da una sequenza di zero o più caratteri racchiusi tra apici singoli o doppi (‘ o “):

“casa” è la stringa casa“casa ‘Pisa’” è la stringa casa ‘Pisa’‘casa “Pisa”’ è la stringa casa “Pisa”

Valori Booleani - è un dato che esprime un “valore di verità” e può assumere solo due valori true e falseArray o Oggetti, che vedremo dettagliatamente più avanti

Tipi di dati


17

Una variabile viene dichiarata mediante l’uso della parola chiave var:

var i; dichiara la variabile ivar j = 0;

dichiara la variabile j e le assegna il valore 0 var s = “casa”; dichiara la variabile s e le assegna il valore “casa”

Se una variabile viene ri-dichiarata, non perde il suo valore

Dichiarazione di variabile


18

var s = “pluto”; variabile s locale di tipo stringa con valore iniziale “pluto”var n = 3; variabile n locale di tipo numerico con valore 3t = “paperino”; variabile t globale di tipo stringa con valore iniziale “paperino”m = n; variabile m globale di tipo numerico con valore 3u = v; la variabile u ha valore undefined (in quanto v non è

a sua volta definita)var b = (3>2); variabile b locale booleana con valore truevar o = new Object(); variabile o locale di tipo Object (vuota)

Variabili locali e globali


19

Somma (+) somma due numeri oppure concatena due stringhe (o concatena numeri a stringhe)

Sottrazione (-) sottrae il secondo numero dal primo

Prodotto (*) moltiplica tra loro due numeri

Divisione (/) divide il primo numero per il secondo

Modulo (%) restituisce il resto della divisione intera del primo operando per il secondo

5 % 2 = 1

Incremento/Decremento (++/--) l’operatore ++ (--) aumenta (diminuisce) di una unità il valore di una variabile (attenzione all'uso post-fisso e pre-fisso)

i = i + 1; è analogo a i++;i = i – 1; è analogo a i--;

Assegnamento (= += -= *= /= %=) esegue l'operazione ed effettua l'assegnamento del valore dell'espressione che sta a destra dell'operatore alla variabile che sta a sinistra

i += 10; è analogo a i = i + 10;

Operatori aritmetici


20

Sono operatori che verificano una relazione tra due operandi e restituiscono un valore booleano (true o false) a seconda che la relazione sia o meno verificata

Sono:

Uguaglianza (==)

Uguaglianza esatta (===), cioè con stesso valore e stesso tipo

Disuguaglianza (!=)

Minore di (<)

Maggiore di (>)

Minore o uguale a (<=)

Maggiore o uguale a (>=)

Operatori di confronto


21

AND (&&) restituisce un valore true se e solo se il primo operando e il secondo sono entrambi veri. Se uno o entrambi gli operandi sono falsi restituisce false

OR (||) restituisce un valore true se il primo operando o il secondo o entrambi sono veri. Se entrambi gli operandi sono falsi restituisce false

NOT (!) è un operatore unario, ossia si applica ad un solo operando. Restituisce il valore false se l’operando è vero, viceversa restituisce true se l’operando è falso

Operatori logici


22

In Javascript esiste un operatore condizionale che assegna ad una variabile un valore a seconda di una particolare condizione

nome_variabile=(condizione)?valore1:valore2

Operatore condizionale


23

var s = “tre ” + 2; la stringa s vale “tre 2”

s += “ uno”; la stringa s vale “tre 2 uno”

s > “ciao”; l’espressione vale true, in quanto il valore di s è lessicograficamente successivo a “ciao”

typeof(s); restituisce “string”eval(“3+1”); restituisce 4

eval(“f(x)”); esegue lo script, chiamando f(x) e restituendo il valore di ritorno della chiamata

eval(“var s=1”); dichiara la variabile s e le assegna il valore 1

void(f(x)); esegue f(x) ed ignora il suo valore di ritorno

Operatori - Esempi


24

if (espressione) istruzione1;

else istruzione2;

•il costrutto if permette di decidere quale istruzione eseguire a fronte del valore dell’espressione racchiusa tra parentesi •se il valore di espressione è vero allora si esegue istruzione1, altrimenti si esegue istruzione2•è possibile avere un if senza la parte else

Il costrutto if..else


25

Il costrutto if..else - Esempio


26

Il costrutto if..else - Esempio


27

Javascript dispone del costrutto switch con la stessa sintassi di Java:

switch (espressione) {

case v1: istruzioni

break;

case v2: istruzioni

break;

default: istruzioni

}

L’espressione viene valutata e confrontata con i valori dei diversi case:

•vengono quindi eseguite le istruzioni a partire dal primo case con lo stesso valore dell’espressione

•se nessun case è selezionato, vengono eseguite le istruzioni del default, se presenti

•se si desidera limitare l’esecuzione a un gruppo di istruzioni, è necessario introdurre la parola chiave break

Il costrutto switch


28

Il costrutto switch - Esempio


29

Il costrutto switch - Esempio


30

for (inizializza; test; incremento) istruzione;

Il ciclo for permette di ripetere istruzione in modo ciclico fino a quando test risulta essere vero

for (var i = 0; i < 10; i++) istruzione;

•Inizializza la variabile i con il valore zero, esegue istruzione e quindi incrementa il valore di i. A questo punto esegue il test i<0 e se questo è vero inizia da capo eseguendo di nuovo istruzione

•Per tutti i costrutti ciclici vale l'uso classico di break e continue

Il ciclo for


31

Il ciclo for - Esempio


32

Il ciclo for - Esempio


33

while (espressione)istruzione;

Il ciclo while permette di ripetere istruzione in modo ciclico fino a quando espressione risulta essere vero

• se espressione non è mai vera è possibile che istruzione non venga mai eseguita

• per fare in modo che istruzione non venga eseguita all’infinito è necessario che espressione prima o poi diventi false

Il ciclo while


34

Il ciclo while - Esempio


35

Il ciclo while - Esempio


36

do istruzione

while (espressione);

Il ciclo do-while permette di ripetere istruzione in modo ciclico fino a quando espressione risulta essere vero

• istruzione viene eseguita almeno una volta

• per fare in modo che istruzione non venga eseguita all’infinito è necessario che espressione prima o poi diventi false

Il ciclo do-while


37

Il ciclo do-while - Esempio


38

Il ciclo do-while - Esempio


39

Una funzione racchiude una porzione di codice JavaScript che può essere eseguito e viene definita mediante la parola chiave function nel seguente modo:

function nomeFunzione (par1, par2){

istruzioni;...

}

Funzioni in Javascript (I)


40

• Le funzioni Javascript sono in realtà variabili con valore di tipo Function

• Per fare riferimento a una funzione è sufficiente usare il suo nome, o un’espressione equivalente che abbia valore di tipo Function

• Una volta ottenuto il riferimento a una funzione è possibile:

• chiamare la funzione passandole una lista di parametri

• è possibile omettere uno o più parametri al termine della lista; in questo caso, tali parametri varranno undefined nel corpo della funzione

• passare come argomento una funzione ad un’altra funzione

• assegnare una funzione a una o più variabili

• accedere a tutti gli elementi della funzione, per modificarla o ridefinirla, tramite le proprietà di Function

• verificare se una funzione è definita come si farebbe con qualsiasi variabile, ad esempio testandola con un if(nome_funzione)

Funzioni in Javascript (II)


41

• Le funzioni restituiscono il controllo al chiamante al termine del loro blocco di istruzioni

• È possibile restituire un valore al chiamante, in modo da poter usare la funzione in espressioni più complesse, utilizzando la sintassi return espressione

• L’espressione può essere di qualsiasi tipo; essa viene valutata e il valore risultante è restituito

• Se la funzione non restituisce nessun valore, Javascript sottintende un “return undefined” implicito

Funzioni in Javascript (III)


42

//funzione con due parametri, dichiarazione diretta

function prodotto(a,b) {

return a*b;

}

//oggetto funzione assegnato a una variabile

var per = new Function(“a”,”b”,”return a*b;”);

Funzioni - Esempi


43

Funzioni – Uso di “arguments”


44

• Il passaggio dei parametri alle funzioni Javascript avviene in maniera diversa a seconda del tipo del parametro stesso:

• i tipi booleano, stringa, numero e undefined sono passati per valore, cioè nella funzione è presente una copia del valore usato come argomento; cambiamenti locali alla funzione non influenzano il valore dell’argomento usato nella chiamata alla funzione stessa

• il tipo oggetto è passato per riferimento; la manipolazione del contenuto dell’oggetto si riflette sull’oggetto usato come argomento

Funzioni – Passaggio di parametri


45

Tutto il codice Javascript viene eseguito in un contesto, compreso quello globale

In particolare, ogni esecuzione di una funzione ha un contesto associato

Una closure si crea proprio a partire da una funzione, quando quest’ultima restituisce come valore di ritorno una nuova funzione creata dinamicamente

Chiusura di una funzione (I)


46

• Una closure, cioè una funzione creata all'interno di un'altra funzione e poi restituita, mantiene il contesto di esecuzione della funzione che l'ha creata

• Questo significa che il contesto di ciascuna chiamata della funzione generatrice non viene distrutto all'uscita della closure, come avviene in generale, ma conservato in memoria

• La closure potrà fare riferimento (in lettura e scrittura) ai parametri e alle variabili dichiarate nel contesto della funzione che l'ha creata

Chiusura di una funzione (II)


47

Closure – Esempio (I)


48

Closure – Esempio (I)


49

Closure – Esempio (II)


50

Closure – Esempio (II)


51

Closure – Esempio (III)


52



53


2010/2011 Programmazione Web - Introduzione a Javascript

54

Closure – Esempio (IV)


55

• Nelle versioni più recenti di Javascript è stato introdotto anche un sistema di gestione delle eccezioni in stile Java

• Un’eccezione segnala un imprevisto, spesso un errore, all’interno della normale esecuzione del codice

• Un’eccezione può venire sollevata dalle librerie di Javascript o dal codice scritto dall’utente, attraverso la

parola chiave throw• Per gestire le eccezioni, è possibile avvalersi del

costrutto try…catch…finally

Gestione delle eccezioni


56

Eccezioni - Esempio


57

Eccezioni - Esempio


58

La clausola throw

Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2 ...

Documents

Transcript of Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2 ...