Introduzione a Javascript

Introduzione a Javascript
Programmazione Web Introduzione a Javascript

Javascript - Definizione
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!!! Programmazione Web - Introduzione a Javascript 2

Programmazione Web - Introduzione a Javascript
Javascript – Lo script 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> Programmazione Web - Introduzione a Javascript 3

Inserire lo script in una pagina
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 Programmazione Web - Introduzione a Javascript 4

Esecuzione di uno script
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. Programmazione Web - Introduzione a Javascript 5

Alcuni esempi (I) Programmazione Web - Introduzione a Javascript 6

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

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

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

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

Partiamo dalla sintassi...
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 */ Programmazione Web - Introduzione a Javascript 15

Tipi di dati 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 Programmazione Web - Introduzione a Javascript 16

Dichiarazione di variabile
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 Programmazione Web - Introduzione a Javascript 17

Variabili locali e globali
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) Programmazione Web - Introduzione a Javascript 18

Operatori aritmetici 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; Programmazione Web - Introduzione a Javascript 19

Operatori di confronto
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 (>=) Programmazione Web - Introduzione a Javascript 20

Operatori logici 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 Programmazione Web - Introduzione a Javascript 21

Operatore condizionale
In Javascript esiste un operatore condizionale che assegna ad una variabile un valore a seconda di una particolare condizione nome_variabile=(condizione)?valore1:valore2 Programmazione Web - Introduzione a Javascript 22

Operatori - Esempi 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 Programmazione Web - Introduzione a Javascript 23

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

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

Il costrutto if..else - Esempio

Il costrutto switch Javascript dispone del costrutto switch con la stessa sintassi di Java: switch (espressione) { case v1: istruzioni break; case v2: istruzioni 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 Programmazione Web - Introduzione a Javascript 27

Il costrutto switch - Esempio

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

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

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

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

Il ciclo while - Esempio

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

Il ciclo do-while - Esempio

Funzioni in Javascript (I)
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; } Programmazione Web - Introduzione a Javascript 39

Funzioni in Javascript (II)
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) Programmazione Web - Introduzione a Javascript 40

Funzioni in Javascript (III)
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 Programmazione Web - Introduzione a Javascript 41

Funzioni - Esempi //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;”); Programmazione Web - Introduzione a Javascript 42

Funzioni – Uso di “arguments”

Funzioni – Passaggio di parametri
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 Programmazione Web - Introduzione a Javascript 44

Chiusura di una funzione (I)
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 Programmazione Web - Introduzione a Javascript 45

Chiusura di una funzione (II)
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 Programmazione Web - Introduzione a Javascript 46

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

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

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

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

Closure – Esempio (III)

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

Gestione delle eccezioni
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 Programmazione Web - Introduzione a Javascript 55

Eccezioni - Esempio Programmazione Web - Introduzione a Javascript 56

Eccezioni - Esempio Programmazione Web - Introduzione a Javascript 57

La clausola throw Programmazione Web - Introduzione a Javascript 58

Introduzione a Javascript

Presentazioni simili

Presentazione sul tema: "Introduzione a Javascript"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

Introduzione a Javascript

Presentazioni simili

Presentazione sul tema: "Introduzione a Javascript"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back