Università di Bergamo
Facoltà di Ingegneria
Applicazioni Internet B
Paolo Salvaneschi
B5_1 V1.14
Java Script
Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie.
Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall’ autore.
Sono graditi commenti o suggerimenti per il miglioramento del materiale
B5 Java Script
Paolo Salvaneschi
1
INDICE
• Introduzione
• Elementi di base
–
–
–
–
–
–
–
–
–
Inserimento nel testo HTML
Struttura lessicale
Tipi di dati
Variabili
Operatori
Istruzioni
Funzioni
Oggetti
Array
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
2
2
Introduzione
• JavaScript non è una versione semplificata
di Java
• Versioni
– JavaScript
– Jscript (Microsoft)
– Standard ECMA-262 (European Computer
Manifacturers Association) –”ECMAScript”
• Utilizzabile sia lato client che lato server o
incorporato in applicazioni
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
3
3
Introduzione
• Utilizzo di JavaScript lato client
– Linguaggio di programmazione integrato
nella pagina HTML
– Gestione eventi ed interazione locale con
l’utente
– Definizione oggetti e attributi (DOM
Document Object Model) componenti la
pagina e modificabilità da programma
– CSS
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
4
4
Introduzione
• Cosa non fa JavaScript lato client
– Non ha funzioni grafiche (salvo quelle che
servono per generare dinamicamente codice
HTML)
– Non legge e scrive files (Motivo: problemi
di sicurezza; programma trasmesso via web sul
client)
– Non supporta comunicazioni di rete (salvo
invio dati da form,…)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
5
5
Inserimento nel testo HTML
• Inserimento nel testo HTML
• Tag <script>; inseribile più volte in HEAD o BODY
• Language opzionale
<SCRIPT language="JavaScript">
document.write("Hello World!");
</SCRIPT>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
6
6
Inserimento nel testo HTML
Nascondere gli script alle vecchie versioni di navigatori
I navigatori ignorano i tag sconosciuti.
Navigatori non abilitati JavaScript: ignorano <SCRIPT> e </SCRIPT>;
ignorano il codice incluso poiché tra tag di commento <!-- -- >
Navigatori abilitati JavaScript: interpretano lo script; ignorano il commento
(la linea che chiude il tag commento inizia per // ed è un commento in
JavaScript)
<SCRIPT>
<!-- Begin to hide script contents from old browsers.
JavaScript statements...
// End the hiding here. -->
</SCRIPT>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
7
7
Inserimento nel testo HTML
<HTML>
<HEAD>
<TITLE>Fattoriali</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write("<h2>Tavola dei fattoriali</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i)
{document.write(i + "! = " + fact);
document.write("<br>");}
</SCRIPT>
</BODY>
</HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
8
8
Inserimento nel testo HTML
• File esterno
• File di testo con estensione .js
<SCRIPT language="JavaScript" src="functions.js">
</SCRIPT>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
9
9
Inserimento nel testo HTML
<HTML>
<HEAD>
<TITLE>Fattoriali</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" src="Fatt.js">
</SCRIPT>
</BODY>
</HTML>
Fatt.js
document.write("<h2>Tavola dei fattoriali</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i)
{document.write(i + "! = " + fact);
document.write("<br>");}
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
10
10
Inserimento nel testo HTML
• Gestore di eventi
<FORM>
<INPUT type="button" value="Chiudi" onclick="win1.close();">
</FORM>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
11
11
Inserimento nel testo HTML
• URL javascript
pseudoprotocollo javascript:
Il navigatore esegue il codice
<HTML>
non c’è stringa da visualizzare
Il navigatore esegue il codice
<HEAD>
e visualizza il valore della
<TITLE>URLJavascript</TITLE>
stringa dell’ultima istruzione
</HEAD>
<BODY>
<A href="javascript: alert('Ciao a tutti');">Saluti</A>
<BR>
<BR>
<A href="javascript: var now = new Date(); 'Data di oggi:' + now;">Data</A>
</BODY>
</HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
12
12
Inserimento nel testo HTML
<HTML>
<HEAD><TITLE>URLJavascript</TITLE></HEAD>
<BODY>
<A href="javascript: alert('Ciao a tutti');">Saluti</A>
<BR>
<BR>
<A href="javascript: var now = new Date(); 'Anno corrente:' + now.getFullYear();">
Anno</A>
</BODY>
</HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
13
13
Struttura lessicale
• Set caratteri UNICODE
• Case sensitive
• Ignora spazi, tab, avanzamenti riga tra
elementi del programma
• Istruzioni terminate con ;
• Commenti
//commento su unica linea
/* commento disposto su
linee diverse*/
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
14
14
Struttura lessicale
• Identificatori (nome variabile, nome
funzione, etichetta)
• Il primo carattere deve essere:
Lettera
_ (underscore)
$
• Parole riservate (if, else, false,….)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
15
15
Tipi di dati
•
Tipi di dati
– Numeri
•
Tutti i numeri sono rappresentati in virgola mobile
a 64 bit (double)
0xff esadecimale ff
3
3.14
6.02e+23 // 6.02*1023
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
16
16
Tipi di dati
•
Tipi di dati
– Stringhe
"testo" 'testo'
All’interno delle stringhe delimitate da apici
singoli è possibile inserire apici doppi e
viceversa
OK:
<A href="javascript: alert('Ciao a tutti');">Saluti</A>
NON OK:
<A href="javascript: alert("Ciao a tutti");">Saluti</A>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
17
17
Tipi di dati
– Stringhe
"questa stringa\nha due righe"
\n -----sequenza di escape: nuova riga
equivalente a: \u000A
"π
è il rapporto tra circonf e diametro cerchio"
"\u03c0 è il rapporto tra circonf e diametro
cerchio"
\uXXXX carattere unicode di 4 esadecimali
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
18
18
Tipi di dati
•
•
Uso delle stringhe
Concatenazione
msg = "hello, " + "world";
//produce la stringa "hello, world"
•
•
Le stringhe sono indicizzate a partire da 0
Metodi per operare sulle stringhe
lunghezza_stringa_s = s.lenght
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
19
19
Tipi di dati
•
Tipi di dati
– Booleani true false
– Null
•
Una variabile che contiene null non contiene alcun
oggetto, stringa,…
– Undefined
•
B5 Java Script
B5 Java Script
Restituito quando una variabile non esiste o non
ha mai avuto assegnato alcun valore
Paolo Salvaneschi
Paolo Salvaneschi
20
20
Tipi di dati
• Tipi di dati
– Oggetto (insieme non ordinato di valori con
nome)
– Oggetto funzione (a cui è associato codice
eseguibile)
– Oggetto array (insieme ordinato di valori
numerati)
– Oggetti specializzati (classi di oggetti. Es. la
classe Date che definisce oggetti che
rappresentano date)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
21
21
Variabili
• Tipizzazione delle variabili
• Linguaggio debolmente tipizzato
– Una variabile può contenere valori di
qualunque tipo. Il tipo non è dichiarato
i = 10;
i = "dieci";
– I tipi sono convertiti automaticamente
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
22
22
Variabili
• Dichiarazione di variabile
– Dichiarata con la parola chiave var
var sum;
– Dichiarata e inizializzata (se non inizializzata
contiene il valore undefined)
var i = 0;
– Leggere variabile non dichiarata >> errore
– Assegnare valore a variabile non dichiarata
precedentemente >> JavaScript la dichiara
implicitamente (come variabile globale - vedi…)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
23
23
Variabili
• Ambito (Scope)
– Globale visibile in ogni punto del codice
JavaScript della pagina
– Locale
--visibile solo dalla funzione in cui è assegnata
--dichiarata (var) all’interno della funzione
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
24
24
Variabili
var scope = "globale";
function checkscope1()
{
var scope = "locale";
document.write("<B>" + scope + "</B>");
}
checkscope1();
var scope = "globale";
function checkscope2()
{
document.write("<B>" + scope + "</B>");
}
checkscope2();
var scope = "globale";
function checkscope3()
{
scope = "locale"; // N.B. Modifica la variabile globale
document.write("<B>" + scope + "</B><BR>");
}
checkscope3();
document.write("<B>" + scope + "</B>");
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
25
25
Variabili
Ho dichiarato
implicitamente
una variabile
globale
Ho dichiarato
una variabile
locale
var scope = "globale";
function checkscope3()
{
scope = "locale"; // N.B. Modifica la variabile globale
myscope1 = "esempio1 ";
var myscope2 = "esempio2 ";
document.write("<B>" + scope + "</B>");
}
checkscope3();
• Dichiarare tutte le variabili con var
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
26
26
Variabili
• Ambito (Scope)
Nessun ambito a livello di blocco
Tutte le varabili dichiarate in una funzione
restano definite in tutto il corpo della funzione
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
27
27
Variabili
• Variabili e valori relativi
• Tipi primitivi
– Numeri, booleani, null, undefined
– Occupazione di memoria predefinita
• Tipi di riferimento
– Oggetti, array, funzioni (array e funzioni sono tipi
specializzati di oggetti)
– Occupazione non predefinita
– Gestiti come “riferimento” ai valori
– Stringhe: occupazione non predefinita ma con contenuto
non modificabile – gestite come tipo riferimento
immutabile che si comporta come un tipo primitivo
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
28
28
Variabili
<H2>Tipi primitivi</H2>
<SCRIPT language="JavaScript">
var a = 3.14; //inizializza variabile
var b = a; //copiala in b
a = 4; // modifica var originale
alert(b); //la copia non è modificata
</SCRIPT>
<BR>
<H2>e tipi di riferimento</H2>
<SCRIPT language="JavaScript">
var a = [1,2,3]; //inizializza array
var b = a; //copia riferimento in b
a[0] = 99; // modifica array originale
alert(b); //il nuovo riferimento visualizza la modifica
</SCRIPT>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
29
29
Variabili
• Garbage collection
var s= "hello";
//Alloca memoria per una stringa
var u = s.toUpperCase(); //Crea una nuova stringa (s resa maiuscola)
s = u;
//Sovrascrive il riferimento
//alla stringa originale
//la stringa "hello" non è più raggiungibile
//e lo spazio in memoria viene deallocato
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
30
30
Operatori
• Aritmetici (binari e unari)
+, -, *, /
% modulo (resto dopo la divisione)
++
incremento unario
++x incrementa e restituisce il valore di x
x++ restituisce il valore di x e incrementa
--
decremento unario
negazione unaria. Restituisce la negazione
dell’operando (converte un numero positivo in
negativo e viceversa)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
31
31
Operatori
• Funzioni matematiche
• Proprietà dell’oggetto Math
• Seno_di_x = Math.sin(x);
• Conversione di un numero in stringa
var x = 33;
var y = x.toString(2);
//2 è la base
// la stringa y sarà caricata con “100001”
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
32
32
Operatori
• Confronto (restituiscono un valore true false)
== equal to
!= not equal to
>, >=, <, <=
• Booleani
&& AND
||
!
OR
NOT
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
33
33
Operatori
• String
"Maggio"
"maggio" + "ciondolo"
• Assegnamento
= assegna alla variabile a sinistra il valore
dell’operando a destra
+= aggiunge il valore dell’operando a destra alla
variabile a sin e assegna il valore a variabile sin
( -=, *=, /= )
&= calcola AND tra op a destra e sin e assegna valore
a var sin ( |= )
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
34
34
Operatori
• Special
– Conditional operator
Se la condizione è vera assegna alla variabile il primo
valore, altrimenti il secondo
(condition) ? trueVal : falseVal
preferredPet = (cats > dogs) ? "felines" : "canines"
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
35
35
Istruzioni
• z = x + y; Espressioni
• {x = 1; y = 2; z = x + y; } blocco di istruzioni
• if else (else può essere omesso)
if (condition)
{ statements1; }
else
{ statements2; }
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
36
36
Istruzioni
if (condition1)
{ statements1; }
else if (condition2)
{ statements2; }
else if (condition3)
{ statements3; }
else
{ statements4; }
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
37
37
Istruzioni
• switch
switch (favoritePet){
case "dog" :
statements;
break;
case "cat" :
statements;
break;
case "iguana" :
statements;
break;
default : statements;
}
default: caso particolare di etichetta
In generale identificatore: istruzione
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
38
38
Istruzioni
• for
for (initial-statement; test; increment)
{ statements; }
for (i=0; i<10; i++){
statements; }
• do while
do
{ statements;}
while (condition)
• while
while (condition)
{ statements; }
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
39
39
Istruzioni
• break
– Abortisce l’esecuzione del loop e passa il controllo
alla prima istruzione dopo il loop
• continue
– Abortisce la singola esecuzione del loop e passa il
controllo alla valutazione della condizione
specificata dall’istruzione di loop
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
40
40
Istruzioni
• break
cicloesterno:
for (var i=0; i<10; i++) {
ciclointerno:
for (var j=0; j<10; j++) {
……………….
if (….) break cicloesterno;
}
}
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
Etichettatura di istruzione.
Identificatore seguito da
due punti
identificatore: istruzione
41
41
Funzioni
• Funzione
– Creazione di una funzione
– Preferibilmente nell’HEAD della pagina (caricato
per primo. Garantisce che la funzione sia caricata
prima che l’utente interagisca e la chiami)
function funcName(argument1,argument2,…)
{ statements; }
– Utilizzo di una funzione
funcName(argument1,argument2,…)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
42
42
Funzioni
• return expression;
– Istruzione valida solo nel corpo di una funzione
– expression è valutata e restituita come valore
della funzione
– L’esecuzione della funzione termina
– Se non c’è expression associata o è raggiunta la
fine del corpo della funzione, il valore restituito è
undefined
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
43
43
Funzioni
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function eleva_al_quadrato(x)
{
return x*x;
}
</SCRIPT>
</HEAD>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
44
44
Funzioni
<BODY>
<H1>Funzione eleva al quadrato</H1>
<SCRIPT language="JavaScript">
for(i = 1, x=1; i < 10; i++, x++)
{
y = eleva_al_quadrato(x);
document.write(x + " **2 = " + y);
document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
45
45
Funzioni
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function eleva_al_quadrato()
{
var x = document.calcola.numero.value;
document.calcola.risultato.value = x*x;
}
</SCRIPT>
</HEAD>
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
46
46
Funzioni
<BODY>
<H1>Funzione eleva al quadrato</H1>
<form name="calcola">
<table>
<tr> <td>Numero:</td>
<td><input type="text" name="numero" size="12"
onchange="eleva_al_quadrato();"></td>
</tr>
<tr><td>Numero al quadrato:</td>
<td><input type="text" name="risultato" size="12"></td>
</tr>
<tr>
<td><input type="button" value="Calcola" onclick="eleva_al_quadrato();"></td>
</tr>
</table>
</form>
</BODY>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
47
47
Funzioni
• Oggetto funzione
– La funzione è un tipo di dati:
• Si può costruire un array di funzioni
• Una funzione può essere passata ad un’altra
funzione come argomento
• …..
function f(x) {return x*x;}
var f = new Function {"x", "return x*x; "};
costruttore Function
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
48
48
Oggetti
• Oggetto (insieme non ordinato di valori con
nome)
– Oggetto immagine con proprietà altezza:
immagine.altezza
– Gli oggetti possono contenere qualsiasi tipo di
dati
document.modulouno.campo1
– Incluse le funzioni (metodi)
document.write("hello world");
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
49
49
Oggetti
• Creazione di oggetti
var point = new Object();
point.x = 2.3;
point.y = 5;
• Accesso agli oggetti
objectName.propertyName
carObj.maker="Toyota";
carObj.year=1990;
document.write(carObj.year);
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
50
50
Oggetti
…
La proprietà è creata assegnando un valore
<SCRIPT language="JavaScript">
var libro = new Object();
libro.titolo = "JavaScript: La guida";
libro.autore = "David Flanagan";
libro.editore = "Apogeo";
Oggetto annidato
libro.capitolo1 = new Object();
libro.capitolo1.titolo = "Capitolo 1";
libro.capitolo1.contenuto = "Introduzione a JavaScript";
document.write("<H2>Libro</H2>");
document.write("<B>" + libro.titolo + "</B><BR>");
document.write("<B>" + libro.autore + "</B><BR>");
document.write("<B>" + libro.editore + "</B><BR><BR>");
document.write("<B>" + libro.capitolo1.titolo + "</B><BR>");
document.write("<B>" + libro.capitolo1.contenuto + "</B><BR>");
</SCRIPT>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
51
51
Oggetti
• Creazione di oggetti con costruttore predefinito
//Creazione di un oggetto "libro"
//mediante il costruttore predefinito Object()
var libro = new Object();
libro.titolo = "JavaScript: La guida";
libro.autore = "David Flanagan";
libro.editore = "Apogeo";
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
52
52
Oggetti
• Creazione di oggetti con costruttore specializzato
//Definizione di un costruttore specializzato "Libro"
//(Classe; la classe è definita definendo una funzione costruttore)
function Libro(a,b,c)
Utilizza gli argomenti per
{
inizializzare le proprietà
this.titolo = a;
dell’oggetto vuoto creato
this.autore = b;
dalla parola chiave this
this.editore = c;
}
Convenzione:
Nome di classe: inizia con maiuscolo
Nome di istanza: inizia con minuscolo
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
53
53
Oggetti
//Creazione di due oggetti della classe mediante il costruttore
var libro1 = new Libro("JavaScript: La guida", "D.Flanagan","Apogeo");
var libro2 = new Libro("XML", "P.Pialorsi","Mondadori");
…
document.write("<H2>Oggetto libro1 della classe Libro</H2>");
document.write("<B>Titolo: " + libro1.titolo + "</B><BR>");
document.write("<B>Autore: " + libro1.autore + "</B><BR>");
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
54
54
Oggetti
• Metodi
Una funzione può essere assegnata ad una proprietà di un oggetto
//Definizione delle funzioni da utilizzare come metodi
function Area_rettangolo()
{
return this.larghezza * this.altezza
Vedi nota
}
//Definizione del costruttore degli oggetti Rettangolo
function Rettangolo(lar, alt)
{
this.larghezza = lar;
//Definizione proprietà
this.altezza = alt;
this.area = Area_rettangolo;
//Definizione metodi
}
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
55
55
Oggetti
//Creazione di un oggetto
var rettangolo1 = new Rettangolo(30,40);
document.write("<H2>Oggetto Rettangolo1</H2><BR>");
document.write("<B>Larghezza:" + rettangolo1.larghezza + "</B><BR>");
document.write("<B>Altezza:" + rettangolo1.altezza+ "</B><BR>");
//Esecuzione di un metodo dell'oggetto
var a = rettangolo1.area();
document.write("<B>Area:" + a + "</B><BR>");
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
56
56
Oggetti
• Nota Una funzione è un dato
(può essere assegnata ad una variabile
o ad una proprietà di un oggetto)
DEFINIZIONE
Definisce la funzione.
La variabile
Area_rettangolo
contiene il riferimento
alla struttura in memoria.
function Area_rettangolo() {return this.larghezza * this.altezza};
function Rettangolo(lar, alt)
{this.larghezza = lar; //Definizione proprietà
this.altezza = alt;
this.area = Area_rettangolo; //Definizione metodi
}
var a = rettangolo1.area();
B5 Java Script
B5 Java Script
USO
Chiama la funzione
area()
Paolo Salvaneschi
Paolo Salvaneschi
RIFERIMENTO
Il riferimento contenuto nella
variabile Area_rettangolo è
copiato nella variabile area.
this.area =Area_rettangolo
non
this.area =Area_rettangolo()
57
57
Oggetti
• JavaScript
– Debolmente tipizzato
– Non contiene la nozione di classe ma la
emula con oggetti prototipo definiti dal
metodo costruttore
– Proprietà degli oggetti aggiunte
dinamicamente
– I metodi sono dati
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
58
58
Oggetti
• Java
– Fortemente tipizzato
– Ereditarietà basata su classi
– La struttura degli oggetti definita alla
definizione della classe
– I metodi non sono dati
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
59
59
Oggetti
function Area_rettangolo() JavaScript
{
return this.larghezza * this.altezza
}
function Rettangolo(lar, alt)
{
Definizione
// attributi
classe
this.larghezza = lar;
this.altezza = alt;
// metodi
this.area = Area_rettangolo;
}
var rettangolo1 = new Rettangolo(30,40);
var a = rettangolo1.area()
Java
class Rettangolo{
// attributi
private int area;
private int larghezza ;
private int altezza;
// metodi
public Rettangolo(int lar, int alt)
{ larghezza = lar;
altezza = alt;
}
public int getArea()
{ area = larghezza * altezza ;
return area;
}
}
Creazione istanza e chiamata metodo Rettangolo rettangolo1 = new Rettangolo(30,40);
int a = rettangolo1.getArea();
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
60
60
Oggetti
• JavaScript: linguaggio ad oggetti basato su
prototipi
• Linguaggi basati su classi (java)
– Una classe definisce le proprietà che
caratterizzano un insieme di oggetti
– Una istanza è uno specifico oggetto della classe
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
61
61
Oggetti
• Linguaggi basati su prototipi
– Ci sono solo oggetti
– Un oggetto prototipo è uno schema da cui
ottenere le proprietà iniziali di un oggetto
– Un oggetto specifica le sue proprietà o alla
creazione o a run time
– Un qualunque oggetto può essere associato
come prototipo ad un altro oggetto. Il secondo
oggetto condividerà le risorse del primo
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
62
62
Oggetti
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
63
63
Oggetti
• Ereditarietà
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
64
64
Oggetti
• Prototipi ed ereditarietà
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
65
65
Oggetti
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
66
66
Oggetti
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
67
67
Oggetti
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
68
68
Oggetti
B5 Java Script
B5 Java Script
Eredita
dept
Eredita
name
Eredita e sovrascrive dept
Eredita
name
Paolo Salvaneschi
Paolo Salvaneschi
69
69
Array
• Array (insieme ordinato di valori numerati)
a
a[2] terzo elemento dell’array (l’indice inizia da 0)
var a = new Array();
Creazione di array vuoto
con il costruttore Array()
a[0] = 1.2;
a[1] = “JavaScript”;
a[2] = true;
Assegnazione di elementi
(anche di tipi diversi) all’array
Un nuovo elemento può
essere aggiunto in qualunque
momento (basta assegnargli
un valore)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
70
70
Array
• Array (insieme ordinato di valori numerati)
var a = new Array(10);
Creazione di array di 10
elementi
var a = [“pippo”, true, 2.34];
a[1] = 3.14;
i=2;
a[i] = “ciao”;
a[1] = 3.14;
a[1000] = “fine”;
B5 Java Script
B5 Java Script
Lettura / scrittura
Gli indici non devono
ricadere necessariamente
in un intervallo continuo
di numeri. E’ allocata
memoria solo per i due
indici.
Paolo Salvaneschi
Paolo Salvaneschi
71
71
