introduzione a java script

82
ELEMENTI BASE DEL LINGUAGGIO PROGRAMMAZIONE A OGGETTI INTRODUZIONE A JQUERY MATTEO CESERANI Introduzione a JavaScript 26/11/2013 1 Matteo Ceserani

Upload: matteo-ceserani

Post on 07-Aug-2015

158 views

Category:

Internet


1 download

TRANSCRIPT

E L E M E N T I B A S E D E L L I N G U A G G I O

P R O G R A M M A Z I O N E A O G G E T T I

I N T R O D U Z I O N E A J Q U E R Y

MATTEO CESERANI

Introduzione a JavaScript

26/11/2013

1

Matteo Ceserani

C O S ’ È J A V A S C R I P T

P R I M I E S E M P I

V A R I A B I L I

O P E R A T O R I

S T R U T T U R E D I C O N T R O L L O

F U N Z I O N I

E V E N T I

G E S T I O N E D E G L I E R R O R I

Elementi di base del linguaggio

26/11/2013

2

Matteo Ceserani

Cos’è JavaScript?

JavaScript è stato progettato per aggiungere interattività alle pagine HTML JavaScript viene normalmente incapsulato nel codice delle

pagine HTML

JavaScript è un linguaggio di scripting Un linguaggio di scripting è un linguaggio di programmazione leggero

JavaScript è un linguaggio interpretato (viene cioè eseguito senza essere compilato) Può quindi essere utilizzato senza acquistare alcun software

26/11/2013

3

Matteo Ceserani

Cosa si può fare con JavaScript

JavaScript fornisce ai progettisti HTML uno strumento per la programmazione Chi scrive in HTML spesso non è un programmatore in senso stretto,

ma JavaScript è un linguaggio di scripting con una sisntassi molto semplice! Quasi tutti possono riuscire a incapsulare qualche brano di codice JavaScript nelle loro pagine HTML

JavaScript può reagire agli eventi Uno script JavaScript può essere configurato per eseguire delle

azioni in risposta al verificarsi di determinati eventi, ad esempio quando il caricamento di una pagina termina oppure quando un utente fa click su un determinato elemento

26/11/2013

4

Matteo Ceserani

Cosa si può fare con JavaScript

26/11/2013 Matteo Ceserani

5

JavaScript può leggere e scrivere gli elementi HTML

Javascript può modificare in tempo reale il contenuto degli elementi HTML di una pagina

JavaScript può essere utilizzato per validare i dati

JavaScript può essere utilizzato per validare i dati di un form prima che vengano inviati a un server. Questo evita di appesantire il server

Cosa si può fare con JavaScript

26/11/2013 Matteo Ceserani

6

JavaScript può essere utilizzato per rilevare il browser dei visitatori Si può utilizzare JavaScript per capire che browser utilizza un

visitatore di un sito e visualizzare di conseguenza diverse versioni di una pagina HTML

JavaScript può essere utilizzato per creare dei cookies Uno script può essere utilizzato per memorizzare informazioni

sul computer del visitatore di un sito

Il mio primo script

Non è bene utilizzare il metodo write() sull’oggetto document in un contesto professionale. Tale metodo infatti sovrascrive completamente il codice HTML della

pagina, se viene utilizzato in una funzione o dopo il caricamento della pagina.

All’interno di un semplice tutorial invece il suo utilizzo è pienamente giustificato.

<html>

<body>

<h1>La mia prima pagina web dinamica</h1>

<script type="text/javascript">

document.write("<p>" + Date() + "</p>");

</script>

</body>

</html>

26/11/2013

7

Matteo Ceserani

Un secondo esempio

Il metodo getElementById()restituisce un elemento della pagina La proprietà innerHTML restituisce/imposta il codice HTML

contenuto nell’elemento La funzione Date() restituisce la data corrente Lo script è posizionato in fondo alla pagina per fare in modo che il

tag <p id=“demo”></p> venga creato prima dell’esecuzione

<html>

<body>

<h1>La mia seconda pagina web dinamica</h1>

<p id="demo"></p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

</html>

26/11/2013

8

Matteo Ceserani

Non tutti i browser supportano JavScript

Se un browser non supporta JavaScript, lo visualizza come puro testo

Per evitare questo, il codice JavaScript dovrebbe essere incapsulato in un tag HTML di commento

<html>

<body>

<script type="text/javascript">

<!--

document.getElementById("demo").innerHTML=Date();

-->

</script>

</body>

</html>

26/11/2013

9

Matteo Ceserani

JavaScript nel tag <body> e nel tag <head>

Uno script posizionato nel tag <body> viene eseguito quando il browser lo legge, durante il parsing del codice HTML

A volte però si desidera che uno script venga eseguito al verificarsi di un determinato evento, come il click su un pulsante. Per ottenere questo occorre inserire lo script in una funzione.

È quindi possibile fare in modo che al verificarsi di un preciso evento venga eseguita una precisa funzione.

Tipicamente le funzioni vengono implementate nel tag <head> della pagina HTML

26/11/2013

10

Matteo Ceserani

La mia prima funzione JavaScript

<html>

<head>

<script type="text/javascript">

function displayDate(){

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>Un’altra pagina dinamica</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Visualizza data

</button>

</body>

</html>

26/11/2013

11

Matteo Ceserani

Utilizzare uno script da un file esterno

Questa tecnica è molto utile quando si desidera utilizzare gli stessi script in più pagine HTML

Attenzione: L’estensione del file deve essere .js

Il file .js non deve contenere i tag <script> e </script>!

<html>

<head>

<script type="text/javascript" src= "ScriptFile.js"></script>

</head>

<body></body>

</html>

26/11/2013

12

Matteo Ceserani

Commenti in JavaScript

Sono analoghi a quelli di Java o del C++

Commento su singola linea // Commento

Commento su più linee /* Commento */

Ricorda bene…

Commentare il codice è una buona abitudine!

26/11/2013

13

Matteo Ceserani

Variabili

Le variabili in JavaScript non vengono dichiarate con un tipo specifico (var).

Possono anche non essere formalmente dichiarate. In tal caso vengono create nel momento in cui vengono inizializzate per la prima volta.

I nomi delle variabili possono inziare solo con una lettera, con underscore (_) o con il carattere dollaro ($)

JavaScript è case sensitive!

var x = 5;

var automobile;

automobile = “Ypsilon”;

y = x - 10;

26/11/2013

14

Matteo Ceserani

Variabili locali e globali

Una variabile dichiarata all’interno di una funzione è visibile solo all’interno della funzione stessa È una variabile locale.

Una variabile dichiarata all’esterno di una funzione è utilizzabile da qualsiasi script contenuto nella pagina HTML, anche all’interno di funzioni È una variabile globale.

Attenzione: Una variabile dichiarata senza la parola chiave var, anche

all’interno di una funzione, viene creata come variabile globale.

26/11/2013

15

Matteo Ceserani

Tipi di dato

26/11/2013 Matteo Ceserani

16

JavaScript possiede i seguenti tipi di dato predefiniti String

Number

Boolean

Array

Object

Null

Undefined

Il tipo di una variabile non è staticamente definito, ma può variare durante l’esecuzione dello script. var x; // Tipo di x: Undefined

x = 5; // Ora x è di tipo Number

x = "John"; // Ora x è di tipo String

Tipi di dato

26/11/2013 Matteo Ceserani

17

Stringhe

Le stringhe sono delimitate dagli apici singoli o doppi.

var carname="Volvo XC60";

var carname='Volvo XC60';

È possibile inserire virgolette nelle stringhe utilizzando alternativamente apici singoli e doppi.

var answer="It's alright";

var answer="He is called 'Johnny'";

var answer='He is called "Johnny"';

Tipi di dato

26/11/2013 Matteo Ceserani

18

Numeri

JavaScript ha un solo tipo di numero

var x1=34.00; // Con decimali

var x2=34; // Senza decimali

var y=123e5; // 12300000

var z=123e-5; // 0.00123

Boolean Possiede solo i due valori true e false.

var x=true;

var y=false;

Tipi di dato

26/11/2013 Matteo Ceserani

19

Array (vettori)

Funzionano esattamente come in C o in Java

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

Dichiarazioni alternative

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

Ne parleremo più avanti (nella sezione dedicata agli oggetti).

Tipi di dato

26/11/2013 Matteo Ceserani

20

Undefined Undefined è il tipo di una variabile quando viene dichiarata senza

assegnarle un valore.

Null Il valore Null può essere utilizzato per resettare il valore di una variabile. cars=null; person=null;

È possibile dichiarare una variabile con un tipo esplicito. var x = new Number; var y = new Boolean; var cars = new Array;

Perché new? Perché tutte le variabili sono oggetti. E cos’è un oggetto? Se ne parla più avanti.

Operatori aritmetici

Operatore Descrizione Esempio Risultati

+ Addizione x=y+2 y=5 x=7

- Sottrazione x=y-2 y=5 x=3

* Moltiplicazione x=y*2 y=5 x=10

/ Divisione x=y/2 y=5 x=2.5

% Modulo (Resto) x=y%2 y=5 x=1

++ Incremento x=++y y=6 x=6

x=y++ y=6 x=7

-- Decremento x=--y y=4 x=4

x=y-- y=4 x=3

26/11/2013

21

Matteo Ceserani

Operatori di assegnamento

Operatore Esempio Equivale a Risultato

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0

var x = 10;

var y = 5;

26/11/2013

22

Matteo Ceserani

Concatenazione tra stringhe

L’operatore + può essere utilizzato per concatenare tra loro due o più stringhe.

Un caso particolare riguarda la possibilità di sommare un numero intero e una stringa. Il risultato sarà in tal caso una stringa!

Anche l’operatore += può essere utilizzato con le stringhe

txt1 = "What a very";

txt2 = "nice day";

txt3 = txt1 + " " + txt2;

// Risultato: “What a very nice day”

txt3 = 10 + "5";

// Risultato: “105”

26/11/2013

23

Matteo Ceserani

Caratteri speciali

Codice Output

\' single quote

\" double quote

\\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

È possibile inserire nelle stringhe i seguenti caratteri speciali utilizzando il carattere backslash.

26/11/2013

24

Matteo Ceserani

Linee di codice su più righe

È possibile spezzare una linea di codice utilizzando il carattere backslash.

Questo però può avvenire solo all’interno di una stringa di testo.

document.write("Hello \

World!"); // Interruzione corretta

document.write \

("Hello World!");

// Interruzione NON corretta

26/11/2013

25

Matteo Ceserani

Operatori di confronto

Operatore Descrizione Esempio

== È uguale a x==8 è falso x==5 è vero

=== È strettamente uguale a (valore e tipo)

x===5 è vero x==="5" è falso

!= Non è uguale a x!=8 è vero

> È maggiore di x>8 è falso

< È minore di x<8 è vero

>= È maggiore o uguale di x>=8 è falso

<= È minore o uguale di x<=8 è vero

var x = 5;

26/11/2013

26

Matteo Ceserani

Operatori logici

Operatore Descrizione Esempio

&& and (x < 10 && y > 1) è vero

|| or (x==5 || y==5) è falso

! not !(x==y) è vero

var x = 3;

var y = 6;

Operatore Descrizione

& and

| or

^ xor

˜ Complemento a 1

Operatori logici bitwise

Gli operatori logici bitwise possono essere utilizzati anche nella forma op= : != ^= &=

26/11/2013

27

Matteo Ceserani

Operatori di shift

Operatore Descrizione

<< Shift a sinistra

>> Shift a destra

>>> Shift a destra senza riporto

<<< Shift a sinistra senza riporto

<<= Shift a sinistra con assegnamento

>>= Shift a destra con assegnamento

>>>= Shift a destra senza riporto con assegnamento

<<<= Shift a sinistra senza riporto con assegnamento

26/11/2013

28

Matteo Ceserani

Operatore condizionale

variabile = (condizione) ? valore1 : valore2;

Assegna alla variabile variabile il valore valore1 se (condizione) è vera, altrimenti le assegna il valore valore2.

<script type="text/javascript">

var visitor="PRES";

var greeting=(visitor=="PRES")?"Dear President ":"Dear ";

document.write(greeting);

</script>

26/11/2013

29

Matteo Ceserani

Il costrutto di selezione If

Funziona esattamente come in C o in Java

if (condizione_1)

{

/* Istruzioni */

}

else if (condizione_2)

{

/* Istruzioni */

}

else

{

/* Istruzioni */

}

26/11/2013

30

Matteo Ceserani

Esempio di costrutto If

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<strong>Good morning</strong>");

}

else if (time>=10 && time<16)

{

document.write(“<strong>Good day</strong>");

}

else

{

document.write("<strong>Hello World!</strong>");

}

</script>

26/11/2013

31

Matteo Ceserani

Il costrutto di selezione Switch

switch(variabile)

{

case 1:

// Istruzioni

break;

case 2:

// Istruzioni

break;

default:

// Istruzioni

} Funziona esattamente come

in C o in Java

26/11/2013

32

Matteo Ceserani

Esempio di costrutto Switch

Il metodo getDay()

applicato a un oggetto di classe Date restituisce un

intero che rappresenta il giorno della settimana.

<script type="text/javascript">

var d = new Date();

var theDay = d.getDay();

switch (theDay)

{

case 5:

document.write("Finally Friday");

break;

case 6:

document.write("Super Saturday");

break;

case 0:

document.write("Sleepy Sunday");

break;

default:

document.write("I'm looking forward to this weekend!");

}

</script>

26/11/2013

33

Matteo Ceserani

Pop-up box

Javascript possiede 3 tipi di box pop-up: Alert box alert(“testo”);

Confirm box confirm(“testo”);

Prompt box prompt(“testo”,“default”);

Una alert box viene utilizzata per visualizzare delle informazioni per l’utente. Per procedere l’utente deve fare click su un pulsante OK.

Una confirm box viene utilizzata per chiedere all’utente di accettare o confermare qualcosa. Per procedere l’utente deve fare click su OK o Cancel. Se l’utente fa click su OK la box restituisce True, altrimenti restituisce False.

Una prompt box viene utilizzata per chiedere all’utente di inserire un valore. Per procedere l’utente deve fare click su OK o Cancel dopo aver inserito il valore

nel prompt. Se l’utente fa click su OK la box restituisce il valore inserito dall’utente, altrimenti

restituisce Null.

26/11/2013

34

Matteo Ceserani

Esempio di alert box

<html>

<head>

<script type = "text/javascript">

function show_alert()

{

alert("Sono una alert box!");

}

</script>

</head>

<body>

<input type="button" onclick="show_alert()"

value="Show alert box" />

</body>

</html>

26/11/2013

35

Matteo Ceserani

Esempio di confirm box

<html>

<head>

<script type = "text/javascript">

function show_confirm()

{ var r = confirm("Press a button");

if (r == true)

{ alert("You pressed OK!"); }

else

{ alert("You pressed Cancel!"); }

}

</script>

</head>

<body>

<input type="button" onclick="show_confirm()" value="Show

confirm box" />

</body>

</html>

26/11/2013

36

Matteo Ceserani

Esempio di prompt box

<html>

<head>

<script type="text/javascript">

function show_prompt()

{ var name = prompt(“Inserisci il tuo nome:","Harry

Potter");

if (name != null && name != "")

{ document.write("<p>Buongiorno " + name + "!</p>"); }

}

</script>

</head>

<body>

<input type="button" onclick="show_prompt()" value="Show

prompt box" />

</body>

</html>

26/11/2013

37

Matteo Ceserani

Le funzioni in JavaScript

Per evitare che il browser esegua uno script immediatamente al caricamento di una pagina HTML, occorre incapsulare il codice JavaScript in una funzione. Una funzione contiene codice che verrà eseguito al verificarsi di un

evento o nel momento in cui la funzione viene invocata.

Una funzione può essere invocata in qualsiasi punto di una pagina HTML. Le funzioni possono essere definite sia nel tag <body> che ne tag <head> di una pagina HTML.

In genere però, per essere sicuri che una funzione venga caricata prima di essere invocata, in genere tutte le funzioni vengono dichiarate nel tag <head>.

26/11/2013

38

Matteo Ceserani

Definizione di una funzione

Nell’elenco dei parametri non compare la parola chiave var

Il passaggio dei parametri avviene tramite un array chiamato arguments[] (in seguito se ne mostrerà l’utilizzo con un esempio)

L’istruzione return è opzionale

function nome(var1,var2,...,varN)

{

// Codice della funzione

[return espressione;]

}

26/11/2013

39

Matteo Ceserani

Esempio di funzione

<html>

<head>

<script type="text/javascript">

function product(a,b)

{

return a * b;

}

</script>

</head>

<body>

<script type="text/javascript">

document.write(product(4,3));

</script>

</body>

</html>

26/11/2013

40

Matteo Ceserani

La parola chiave function

L’operatore function permette di implementare

una funzione anonima.

Il valore restituito dalla funzione viene assegnato alla variabile (o costante) nome.

Operatore molto utile in ambito AJAX

Ma non solo: Windows 8

[var | const] nome = function(<parametri>)

{

// Istruzioni

};

26/11/2013

41

Matteo Ceserani

Il ciclo for

Funziona tutto come in C o in Java Si tratta di un ciclo molto flessibile (anche se non tutti lo sanno…)

Implementazione classica:

for (<cond. iniziale>; <cond. di mantenimento>; <incremento>)

{

// Istruzioni

}

for (variabile = startvalue;

variabile <= endvalue;

variabile = variabile + incremento)

{

// Istruzioni

}

26/11/2013

42

Matteo Ceserani

Esempio di ciclo for

<html>

<body>

<script type="text/javascript">

var i = 0;

for (i = 0;i <= 5;i++)

{

document.write(“Il numero è " + i);

document.write("<br />");

}

</script>

</body>

</html>

26/11/2013

43

Matteo Ceserani

Il ciclo while/do-while

Tutto funziona esattamente come nel C o in Java Il ciclo continua a essere eseguito finché la condizione di

mantenimanto rimane vera

Nel ciclo do-while le istruzioni vengono eseguite almeno una volta

while(<cond. di mantenimento>){

// Istruzioni

}

do{

// Istruzioni

}while(<cond. di mantenimento>);

26/11/2013

44

Matteo Ceserani

Esempio di ciclo while

<html>

<body>

<script type="text/javascript">

var i = 0;

while (i <= 5)

{

document.write(“Il numero è " + i);

document.write("<br />");

i++;

}

</script>

</body>

</html>

26/11/2013

45

Matteo Ceserani

Le istruzioni break e continue – Le etichette

L’istruzione break determina l’uscita dal ciclo in cui tale istruzione viene eseguita. Non permette l’uscita da cicli innestati.

Per determinare l’uscita da cicli innestati è cosigliabile utilizzare un’etichetta. nome_etichetta: // Cicli innestati

break nome_etichetta; // Nel ciclo più interno

L’utilizzo delle etichette è per il resto sconsigliato (come del resto accade in tutti i linguaggi strutturati)

L’istruzione continue determina l’interruzione dell’iterazione corrente di un ciclo e il passaggio all’iterazione successiva.

26/11/2013

46

Matteo Ceserani

Esempio con break, continue ed etichette

<html>

<head>

<script type="text/javascript">

function foo(i){

return confirm("Ti piace il numero " + i + "?");

}

function main(){

ciclo: while(true){

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

if(foo(i)==true) {

break ciclo;

}

}

}

alert("Anche a me il numero " + i + " non dispiace!"); }

</script>

</head>

<body onload="main();"></body>

</html>

26/11/2013

47

Matteo Ceserani

Esecuzione di script in risposta a un evento

Un evento è un’azione che può essere rilevata da JavaScript.

Ogni elemento di una pagina HTML possiede determinati eventi che possono attivare l’esecuzione di uno script.

Per esempio, possiamo utilizzare l’evento onClick definito per un tag <button> per determinare quale script andrà eseguito nel momento in cui un utente fa click sul pulsante: <button type=“button” onClick=“script();”>Esegui script</button>

Esempi di eventi: Click del mouse Caricamento di una pagina HTML o di un’immagine Passaggio del mouse su una parte attiva di una pagina HTML Attivazione di un campo di input in un form Invio dei dati di un form Pressione di un tasto

Gli eventi vengono di norma utilizzati in combinazione con le funzioni. Per un elenco completo degli eventi intercettati da JavaScript, si veda: Event Reference

26/11/2013

48

Matteo Ceserani

Esecuzione di script in risposta a un evento

<html>

<head>

<script type="text/javascript">

function displayDate()

{

document.getElementById("demo").innerHTML = Date();

}

</script>

</head>

<body>

<h1>Visualizzatore di data e ora</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Data</button>

</body>

</html>

26/11/2013

49

Matteo Ceserani

onLoad e onUnload

Gli eventi onLoad e onUnload si verificano quando un utente carica o chiude una pagina HTML. L’evento onLoad è spesso utilizzato per verificare il browser

utilizzato dall’utente (tipo e versione), in modo da mostrare una versione ottimizzata della pagina HTML.

Sia onLoad che onUnload vengono inoltre utilizzati per gestire i cookies, che vengono letti o aggiornati quando l’utente carica una pagina o la chiude. Per esempio, si può utilizzare una box pop-up per chiedere il nome al

visitatore la prima volta che carica una pagina. Il nome viene quindi memorizzato in un cookie. La volta successiva che l’utente carica la pagina, si può visualizzare un

messaggio di benvenuto personalizzato.

26/11/2013

50

Matteo Ceserani

onBlur, onFocus e onChange

Gli eventi onFocus, onBlur e onChange sono

spesso utilizzati per la validazione dei form. Per esempio, si può utilizzare l’evento onChange per validare

un indirizzo e-mail in un form.

La funzione checkEmail() verrà invocata ogni volta che il

contenuto del campo email del form viene modificato.

<input type="text" size="30" id="email"

onchange="checkEmail()" />

onFocus si verifica quando il focus della pagina si sposta su

un elemento.

onBlur si verifica quando un elemento perde il focus della

pagina

26/11/2013

51

Matteo Ceserani

onSubmit

L’evento onSubmit viene utilizzato per validare tutti i campi di un form prima di inviarlo al server. Per esempio: la funzione checkForm() verrà invocata quando

l’utente premerà il pulsante submit del form.

Se i campi del form non avranno valori accettabili, l’invio dei dati verrà cancellato.

La funzione checkForm() restituirà i valori true o false. Se restituirà true, il form verrà inviato, altrimenti l’invio verrà

cancellato: <form method="post" action=“form_processing.jsp" onsubmit="return checkForm()“>

<!– Campi del form -->

</form>

26/11/2013

52

Matteo Ceserani

onMouseOver

<html>

<head>

<script type="text/javascript">

function writeText(txt)

{

document.getElementById("desc").innerHTML = txt;

}

</script>

</head>

<body>

<img src ="planets.gif" width ="145" height ="126" alt="Pianeti" usemap="#planetmap" />

<map name="planetmap">

<area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('Sole')"

href ="sun.htm" target ="_blank" alt="Sole" />

<area shape ="circle" coords ="90,58,3" onmouseover="writeText('Mercurio')"

href ="mercur.htm" target ="_blank" alt="Mercurio" />

<area shape ="circle" coords ="124,58,8" onmouseover="writeText('Venere')"

href ="venus.htm" target ="_blank" alt="Venere" />

</map>

<p id="desc">Muovi il mouse sulla figura.</p>

</body>

</html>

Prova l’effetto che fa

26/11/2013

53

Matteo Ceserani

Il costrutto try – catch

Navigando sul web, capita purtroppo a volte di incappare in un box pop-up JavaScript di questo tipo: si è verificato un errore run-time: desideri effettuare il debug

del codice?

Messaggi di errore di questo tipo portano in genere l’utente ad abbandonare la pagina web.

Il costrutto try - catch permette di testare il verificarsi di errori durante l’esecuzione del codice. Il blocco try contiene il codice da eseguire .

il blocco catch contiene il codice da eseguire se si verifica un errore nel blocco try.

26/11/2013

54

Matteo Ceserani

Il costrutto try – catch

try

{

// Codice da eseguire

}

catch(err)

{

// Codice per la gestione degli errori

}

È una versione semplificata del costrutto di Java.

26/11/2013

55

Matteo Ceserani

Il costrutto try – catch

<html>

<head>

<script type="text/javascript">

var txt="";

function message()

{

try

{

addlert("Benvenuto amico!");

}

catch(err)

{

txt="Si è verificato un errore.\n\n";

txt+="Descrizione: " + err.message + "\n\n";

txt+="Premi OK per continuare.\n\n";

alert(txt);

}

}

</script>

</head>

<body>

<input type="button" value="Vedi messaggio" onclick="message()" />

</body>

</html>

26/11/2013

56

Matteo Ceserani

Il costrutto try – catch

<html>

<head>

<script type="text/javascript">

var txt="";

function message()

{

try

{

addlert("Benvenuto amico!");

}

catch(err)

{

txt="Si è verificato un errore.\n\n";

txt+="Premi OK per continuare a visualizzare questa pagina,\n";

txt+="o Cancel per ritornare alla home page.\n\n";

if(!confirm(txt))

{

document.location.href="http://www.daverrazzano.it/";

}

}

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

26/11/2013

57

Matteo Ceserani

L’istruzione Throw

<html>

<body>

<script type="text/javascript">

var x=prompt(“Inserisci un numero compreso tra 5 e 10:","");

try

{

if(x>10)

{ throw "Err1"; }

else if(x<5)

{ throw "Err2"; }

else if(isNaN(x))

{ throw "Err3"; }

}

catch(err)

{

if(err=="Err1")

{ document.write("Errore! Il valore è troppo alto."); }

if(err=="Err2")

{ document.write("Errore! Il valore è troppo basso."); }

if(err=="Err3")

{ document.write("Errore! Il valore non è un numero."); }

}

</script>

</body>

</html>

26/11/2013

58

Matteo Ceserani

C O S ’ È L A O O P

O G G E T T I P R E D E F I N I T I

Oggetti in JavaScript

26/11/2013

59

Matteo Ceserani

OOP JavaScript

JavaScript è un linguaggio di programmazione orientato agli oggetti (OOP – Object Oriented Programming) Permette al programmatore di definire le proprie classi, oltre che utilizzare quelle

fornite dalle librerie.

Cominceremo illustrando come utilizzare gli oggetti predefiniti nel linguaggio. String Date Array Boolean Number Math RegExp

La definizione di nuove classi verrà invece trattata in un successivo

tutorial (se ci sarà tempo).

26/11/2013

60

Matteo Ceserani

Cos’è un oggetto

26/11/2013 Matteo Ceserani

61

Un oggetto è definito come un’entità appartenente a una certa classe.

Un oggetto possiede: Proprietà

Insieme dei dati che definiscono lo stato di un oggetto.

Metodi

Insieme delle operazioni che l’oggetto può svolgere.

La programmazione orientata agli oggetti utilizza un paradigma diverso da quello dei linguaggi imperativi Il programmatore non scrive una sequenza di istruzioni che

eseguite risolvono un determinato problema.

Il programmatore deve creare un modello dello scenario in cui il problema si colloca.

Cos’è un oggetto

26/11/2013 Matteo Ceserani

62

Esempio Classe PERSONA Ogni oggetto della classe persona possiede:

Proprietà

Nome

Cognome

Data di nascita

Nazionalità

Stato civile

Metodi

Parla(Persona,Messaggio)

Ascolta(Persona)

Raggiunge(Luogo)

Acquista(Oggetto,Luogo)

Regala(Oggetto,Persona)

Proprietà e metodi dipendono dal problema che si desidera risolvere.

Cos’è un oggetto

26/11/2013 Matteo Ceserani

63

Esempio Matteo = new Persona(“Matteo”,“Ceserani”,“27-08-

1975”,“Italiana”,“Coniugato”);

Elena = new Persona(“Elena”,“Zanaboni”,“24-05-1979”,“Italiana”,“Coniugata”);

Messaggio = Matteo.Ascolta(Elena)

If (Messaggio == “Ciao amore!”) {

Matteo.Parla(Elena,“Ciao amore! Come stai?”);

}

else

{

Matteo.Parla(Elena,“Che succede amore? Cosa ho combinato stavolta?”);

Matteo.Raggiunge(Fioraio);

Matteo.Aquista(MazzoDiRose,Fioraio);

Matteo.Regala(MazzoDiRose,Elena);

}

Proprietà di un oggetto

Le proprietà sono i valori associati a un oggetto di una certa classe. In questo esempio si utilizza la proprietà length di un oggetto di classe string per determinare il numero di caratteri appartenenti alla stringa:

<script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script>

Il valore restituito dall’esecuzione del codice sarà: 12

Le proprietà possono essere pubbliche o private. Le proprietà pubbliche sono direttamente accessibili. Le proprietà private possono essere manipolate solo attraverso

opportuni metodi definiti per la classe.

26/11/2013

64

Matteo Ceserani

Metodi di un oggetto

I metodi sono azioni che possono essere eseguite su un oggetto. Ogni classe specifica proprietà e metodi validi per gli oggetti

appartenenti alla classe.

In questo esempio si utilizza il metodo toUpperCase() su un oggetto di classe string per trasformare la stringa in tutti caratteri maiuscoli:

<script type="text/javascript">

var str="Hello world!";

document.write(str.toUpperCase());

</script>

Il valore restituito dall’esecuzione del codice sarà: HELLO WORLD!

26/11/2013

65

Matteo Ceserani

Metodi di un oggetto

26/11/2013 Matteo Ceserani

66

Un particolare metodo per un oggetto è il metodo costruttore.

Il metodo costruttore permette di creare un oggetto di una certa

classe, associandolo a una variabile riferimento.

Il metodo costruttore ha lo stesso nome della classe cui appartiene.

Il metodo costruttore accetta come parametri i valori che le proprietà dell’oggetto devono assumere.

La chiamata del costruttore viene preceduta dalla parola chiave new.

La classe String

var txt = new String("string");

Come in Java questa espressione si può semplificare:

var txt = "string";

I singoli caratteri della stringa sono accessibili come gli elementi di un vettore

var c = txt[2] // c <-- ‘r’

Caratteri speciali possono essere inseriti tramite sequenze di escape.

26/11/2013

67

Matteo Ceserani

Caratteri speciali

26/11/2013 Matteo Ceserani

68

Una sequenza di escape è individuata dal carattere backslash ( \ ).

Sequenza di escape Carattere

\’ Apice

\” Virgolette

\\ Backslash

\n New line + Carriage Return

\r Carriage return

\t Tabulazione

\b Backspace

\f Espelli pagina (ormai inutilizzato)

Proprietà della classe String

Proprietà Descrizione

constructor Restituisce la funzione che ha creato l’oggetto di classe String (il costruttore)

length Restituisce la lunghezza della stringa

prototype Permette di aggiungere delle proprietà alla stringa

prototype è una proprietà globale disponibile per quasi tutti gli oggetti JavaScript

Sintassi: object.prototype.name=“StringaStrulla”

26/11/2013

69

Matteo Ceserani

Metodi della classe String

Metodo Descrizione

charAt() Restituisce il carattere in una certa posizione

charCodeAt() Restituisce la codifica Unicode del carattere in una certa posizione

concat() Concatena due o più stringhe, e restituisce una copia della stringa concatenata

fromCharCode() Converte valori Unicode nel corrispondente carattere

indexOf() Restituisce la posizione della prima occorrenza di un carattere in un stringa

lastIndexOf() Restituisce la posizione dell’ultima occorrenza di un carattere in un stringa

match() Ricerca le corrispondenze tra un’espressione regolare e una stringa, restituendole come risultato

replace() Ricerca le corrispondenze tra una sottostringa e un’espressione regolare e una stringa, sostituendole nella stringa di partenza

search() Ricerca le corrispondenze tra un’espressione regolare e una stringa, restituendone la posizione come risultato

slice() Estre una parte di una stringa, restituendola in una nuova stringa

split() Separa una stringa in un array di sotto-stringhe

substr() Estrae una serie di caratteri da una stringa, iniziando da una certa posizione e procedendo per un certo numero di caratteri

substring() Estrae una sotto-stringa da una stringa, iniziando da una certa posizione e terminando in un’altra

toLowerCase() Converte in tutte minuscole

toUpperCase() Converte in tutte maiuscole

valueOf() Restituisce il valore grezzo di un oggetto stringa

26/11/2013

70

Matteo Ceserani

Metodi della classe String

26/11/2013 Matteo Ceserani

71

Qualche esempio. Lunghezza di una stringa.

var txt="Hello World!";

alert(txt.length);

Ricerca di una sottostringa.

var str="Hello world, welcome to the universe.";

var n=str.indexOf("welcome");

alert(n);

Se la sottostringa non viene trovata l’indice restituito è -1.

Verifica della presenza di una sottostringa.

var str="Hello world!";

alert(str.match("world"));

alert(str.match("World"));

alert(str.match("world!"));

Se la sottostringa non viene trovata il valore restituito è null.

Metodi della classe String

26/11/2013 Matteo Ceserani

72

Qualche esempio Rimpiazzare il contenuto di una stringa.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function myFunction(){

var str=document.getElementById("demo").innerHTML;

var n=str.replace("Microsoft","DaVerrazzano");

document.getElementById("demo").innerHTML=n;}

</script>

</head>

<body>

<p id="demo">Visita Microsoft!</p>

<button onclick="myFunction()">Prova</button>

</body>

</html>

Metodi della classe String

26/11/2013 Matteo Ceserani

73

Qualche esempio.

Maiuscole e minuscole.

var txt="Hello World!";

var txt1=txt.toUpperCase(); // Tutte maiuscole

var txt2=txt.toLowerCase(); // Tutte minuscola

alert(txt + “\n” + txt1 + “\n” + txt2);

Conversione di una stringa in un vettore.

Funzione split().

Il carattere separatore viene fornito come parametro.

var txt="a,b,c,d,e"

vart txt1 = txt.split(",");

alert(txt[1] + “\n” + txt1[1]);

I metodi wrapper della classe String

Metodo Descrizione

anchor() Crea un link a una stringa (<a>)

big() Visualizza una stringa con un font grande (<big>)

blink() Visualizza una stringa lampeggiante (<blink>)

bold() Visualizza una stringa in grassetto (<b>)

fixed() Visualizza una stringa utilizzando un carattere a spaziatura fissa(<tt>)

fontcolor() Visualizza una stringa con un font di un certo colore (<font color="colorvalue">)

fontsize() Visualizza una stringa con un font di una certa dimensione (<font size="size">)

italics() Visualizza una stringa in corsivo (<i>)

link() Visualizza una stringa come collegamento (<link>)

small() Visualizza una stringa usando un font piccolo (<small>)

strike() Visualizza una stringa sbarrata (<strike>)

sub() Visualizza una stringa come pedice (<sub>)

sup() Visualizza una stringa come apice (<sup>)

26/11/2013

74

Matteo Ceserani

I metodi wrapper della classe String

26/11/2013 Matteo Ceserani

75

Cos’è un metodo wrapper? Un metodo wrapper crea del codice HTML intorno alla stringa che

invoca il metodo.

Esempio. <!DOCTYPE html>

<html>

<body>

<script type=“text/javascript”>

var txt = "Visita il sito della nostra scuola!";

document.write("<p>Link: " +

txt.link("http://www.daverrazzano.it") + "</p>");

</script>

</body>

</html>

La classe Number

26/11/2013 Matteo Ceserani

76

JavaScript ha un’unica classe numerica: Number.

var n = new Number(15);

Se il parametro non può essere interpretato come un numero il numero assume il valore NaN.

Come in Java questa espressione si può semplificare:

var n = 15;

Tutti i numeri in JavaScript sono memorizzati come numeri a virgola mobile in base 10 a 64 bit.

È possibile specificare i valori in base 8 o in base 16. var num=0377; // Numero ottale

var num=0xFF3; // Numero esadecimale

Proprietà della classe Number

26/11/2013 Matteo Ceserani

77

Proprietà Descrizione

constructor Restituisce il costruttore utilizzato per creare l’oggetto Number.

Number.MAX_VALUE Proprietà globale di classe. Restituisce il valore massimo che il numero può assumere.

Number.MIN_VALUE Proprietà globale di classe. Restituisce il valore minimo che il numero può assumere.

NEGATIVE_INFINITY Indica che si è verificato un underflow. Valore possibile: -Infinity.

POSITIVE_INFINITY Indica che si è verificato un overflow. Valore possibile: Infinity.

NaN Not a Number. Indica che il valore del numero non è valido.

prototype Vedi analoga proprietà della classe String.

var n_inf=(Number.MAX_VALUE)*2;

var n_ninf=(-Number.MAX_VALUE)*2;

alert(n_inf + “\n” + n_ninf);

Metodi della classe Number

26/11/2013 Matteo Ceserani

78

Metodo Descrizione

toExponential() Restituisce il numero in notazione esponenziale.

toFixed(n) Restituisce il numero con n cifre dopo la virgola.

toPrecision(n) Restituisce il numero con le sole n cifre più significative.

toString() Restituisce il numero come una stringa.

valueOf() Restituisce il valore del numero.

var num = new Number(13.3714);

var n2=num.toPrecision(2);

var n1=num.toPrecision(1);

var nf=num.toFixed(2);

alert(num + “\n” + n2 + “\n” + n1 + “\n” + nf);

La classe Date

La classe Date è utilizzata per lavorare con date e orari Esistono 4 modi per istanziare una data:

new Date(); // Data e ora correnti

new Date(milliseconds); // Millisecondi dal 1970/01/01

new Date(dateString);

new Date(year, month, day, hours, minutes, seconds, milliseconds);

Una volta che si è creata una data, esiste una lunga serie di metodi per operare su di essa. La maggior parte di essi permettono di leggere/scrivere anno, mese, giorno, ora, minuto, secondo e

millisecondo dell’oggetto utilizzando l’ora locale o l’ora UTC (o GMT, di Greenwich).

Tutte le date sono calcolate in millisecondi a partire da 01 Gennaio, 1970 00:00:00 Universal Time (UTC). Un giorno contiene 86,400,000 millisecondi. I valori numerici dei mesi partono da 0.

Alcuni esempi: var today = new Date();

var d1 = new Date("October 13, 1975 11:13:00");

var d2 = new Date(79,4,24);

var d3 = new Date(79,4,24,11,33,0);

26/11/2013

79

Matteo Ceserani

Impostare un oggetto Date

Esiste una grande quantità di metodi per manipolare gli oggetti di classe Date.

Impostare un oggetto di classe Date a un valore specifico (14

Gennaio 2010):

var myDate=new Date();

myDate.setFullYear(2010,0,14);

Impostare un oggetto di classe Date 5 giorni nel futuro:

var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

Nota: se nell’esempio precedente si verifica un cambio di mese o anno, le modifiche sono automaticamente gestite dall’oggetto stesso!

26/11/2013

80

Matteo Ceserani

Confrontare due date tra loro

La classe Date permette il confronto diretto tra date. Esempio.

var x=new Date();

x.setFullYear(2100,0,14);

var today = new Date();

if (x>today)

{

alert("Today is before 14th January 2100");

}

else

{

alert("Today is after 14th January 2100");

}

26/11/2013

81

Matteo Ceserani

Proprietà e metodi della classe Date

26/11/2013 Matteo Ceserani

82

Le uniche proprietà della classe Date sono quelle

predefinite. prototype.

constructor.

I metodi invece sono tantissimi.

Consulta la guida di riferimento.