La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2  JavaScript è un linguaggio di scripting lato-client,

Presentazioni simili


Presentazione sul tema: "Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2  JavaScript è un linguaggio di scripting lato-client,"— Transcript della presentazione:

1 Programmazione Web Introduzione a Javascript

2 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 Programmazione Web - Introduzione a Javascript 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 contenuti nel file HTML, inseriti come testo all’interno del tag script... Javascript – Lo script

4 Programmazione Web - Introduzione a Javascript 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 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 6 Alcuni esempi (I)

7 Programmazione Web - Introduzione a Javascript 7 Alcuni esempi (II)

8 Programmazione Web - Introduzione a Javascript 8 Alcuni esempi (II)

9 Programmazione Web - Introduzione a Javascript 9 Alcuni esempi (II)

10 Programmazione Web - Introduzione a Javascript 10 Alcuni esempi (III)

11 Programmazione Web - Introduzione a Javascript 11 Alcuni esempi (III)

12 Programmazione Web - Introduzione a Javascript 12 Alcuni esempi (III)

13 Programmazione Web - Introduzione a Javascript 13 Alcuni esempi (IV)

14 Programmazione Web - Introduzione a Javascript 14 Alcuni esempi (IV)

15 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 false Array o Oggetti, che vedremo dettagliatamente più avanti Tipi di dati

17 Programmazione Web - Introduzione a Javascript 17 Una variabile viene dichiarata mediante l’uso della parola chiave var : var i; dichiara la variabile i var 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 Programmazione Web - Introduzione a Javascript 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 3 t = “paperino”; variabile t globale di tipo stringa con valore iniziale “paperino” m = n; variabile m globale di tipo numerico con valore 3 u = 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 true var o = new Object(); variabile o locale di tipo Object (vuota) Variabili locali e globali

19 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 25 Il costrutto if..else - Esempio

26 Programmazione Web - Introduzione a Javascript 26 Il costrutto if..else - Esempio

27 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 28 Il costrutto switch - Esempio

29 Programmazione Web - Introduzione a Javascript 29 Il costrutto switch - Esempio

30 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 31 Il ciclo for - Esempio

32 Programmazione Web - Introduzione a Javascript 32 Il ciclo for - Esempio

33 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 34 Il ciclo while - Esempio

35 Programmazione Web - Introduzione a Javascript 35 Il ciclo while - Esempio

36 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 37 Il ciclo do-while - Esempio

38 Programmazione Web - Introduzione a Javascript 38 Il ciclo do-while - Esempio

39 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 43 Funzioni – Uso di “arguments”

44 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 47 Closure – Esempio (I)

48 Programmazione Web - Introduzione a Javascript 48 Closure – Esempio (I)

49 Programmazione Web - Introduzione a Javascript 49 Closure – Esempio (II)

50 Programmazione Web - Introduzione a Javascript 50 Closure – Esempio (II)

51 Programmazione Web - Introduzione a Javascript 51 Closure – Esempio (III)

52 Programmazione Web - Introduzione a Javascript 52 Closure – Esempio (III)

53 Programmazione Web - Introduzione a Javascript 53 Closure – Esempio (III)

54 2010/2011Programmazione Web - Introduzione a Javascript 54 Closure – Esempio (IV)

55 Programmazione Web - Introduzione a Javascript 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 Programmazione Web - Introduzione a Javascript 56 Eccezioni - Esempio

57 Programmazione Web - Introduzione a Javascript 57 Eccezioni - Esempio

58 Programmazione Web - Introduzione a Javascript 58 La clausola throw


Scaricare ppt "Programmazione Web Introduzione a Javascript. Programmazione Web - Introduzione a Javascript 2  JavaScript è un linguaggio di scripting lato-client,"

Presentazioni simili


Annunci Google