b5 1 javascript v114 - unibg...b5 java script paolo salvaneschi 1 b5_1 v1.14 java script...
TRANSCRIPT
B5 Java Script Paolo Salvaneschi 1
B5_1 V1.14
Java Script
Applicazioni Internet B
Paolo Salvaneschi
Università di BergamoFacoltà di Ingegneria
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 2B5 Java Script Paolo Salvaneschi 2
• Introduzione • Elementi di base
– Inserimento nel testo HTML– Struttura lessicale– Tipi di dati– Variabili– Operatori– Istruzioni– Funzioni– Oggetti– Array
INDICE
B5 Java Script Paolo Salvaneschi 3B5 Java Script Paolo Salvaneschi 3
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 Paolo Salvaneschi 4B5 Java Script Paolo Salvaneschi 4
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 Paolo Salvaneschi 5B5 Java Script Paolo Salvaneschi 5
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 Paolo Salvaneschi 6B5 Java Script Paolo Salvaneschi 6
• Inserimento nel testo HTML• Tag <script>; inseribile più volte in HEAD o BODY• Language opzionale
Inserimento nel testo HTML
<SCRIPT language="JavaScript">document.write("Hello World!");</SCRIPT>
B5 Java Script Paolo Salvaneschi 7B5 Java Script Paolo Salvaneschi 7
Inserimento nel testo HTML
<SCRIPT><!-- Begin to hide script contents from old browsers.JavaScript statements...// End the hiding here. --></SCRIPT>
Nascondere gli script alle vecchie versioni di navigatoriI 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)
B5 Java Script Paolo Salvaneschi 8B5 Java Script Paolo Salvaneschi 8
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 Paolo Salvaneschi 9B5 Java Script Paolo Salvaneschi 9
• File esterno• File di testo con estensione .js
Inserimento nel testo HTML
<SCRIPT language="JavaScript" src="functions.js"></SCRIPT>
B5 Java Script Paolo Salvaneschi 10B5 Java Script Paolo Salvaneschi 10
Inserimento nel testo HTML
<HTML><HEAD><TITLE>Fattoriali</TITLE></HEAD><BODY><SCRIPT language="JavaScript" src="Fatt.js"></SCRIPT> </BODY></HTML>
document.write("<h2>Tavola dei fattoriali</h2>");for(i = 1, fact = 1; i < 10; i++, fact *= i)
{document.write(i + "! = " + fact);document.write("<br>");}
Fatt.js
B5 Java Script Paolo Salvaneschi 11B5 Java Script Paolo Salvaneschi 11
• Gestore di eventi
Inserimento nel testo HTML
<FORM><INPUT type="button" value="Chiudi" onclick="win1.close();"></FORM>
B5 Java Script Paolo Salvaneschi 12B5 Java Script Paolo Salvaneschi 12
• URL javascriptpseudoprotocollo javascript:
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(); 'Data di oggi:' + now;">Data</A></BODY></HTML>
Il navigatore esegue il codice e visualizza il valore della
stringa dell’ultima istruzione
Il navigatore esegue il codice non c’è stringa da visualizzare
B5 Java Script Paolo Salvaneschi 13B5 Java Script Paolo Salvaneschi 13
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 Paolo Salvaneschi 14B5 Java Script Paolo Salvaneschi 14
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 Paolo Salvaneschi 15B5 Java Script Paolo Salvaneschi 15
Struttura lessicale
• Identificatori (nome variabile, nome funzione, etichetta)
• Il primo carattere deve essere:Lettera_ (underscore)
$• Parole riservate (if, else, false,….)
B5 Java Script Paolo Salvaneschi 16B5 Java Script Paolo Salvaneschi 16
• Tipi di dati– Numeri
• Tutti i numeri sono rappresentati in virgola mobile a 64 bit (double)
0xff esadecimale ff33.14 6.02e+23 // 6.02*1023
Tipi di dati
B5 Java Script Paolo Salvaneschi 17B5 Java Script Paolo Salvaneschi 17
• 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>
Tipi di dati
B5 Java Script Paolo Salvaneschi 18B5 Java Script Paolo Salvaneschi 18
– Stringhe"questa stringa\nha due righe"
\n -----sequenza di escape: nuova rigaequivalente a: \u000A
"π è il rapporto tra circonf e diametro cerchio"
"\u03c0 è il rapporto tra circonf e diametro cerchio"
\uXXXX carattere unicode di 4 esadecimali
Tipi di dati
B5 Java Script Paolo Salvaneschi 19B5 Java Script Paolo Salvaneschi 19
• 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
Tipi di dati
B5 Java Script Paolo Salvaneschi 20B5 Java Script Paolo Salvaneschi 20
• Tipi di dati– Booleani true false
– Null• Una variabile che contiene null non contiene alcun
oggetto, stringa,…
– Undefined• Restituito quando una variabile non esiste o non
ha mai avuto assegnato alcun valore
Tipi di dati
B5 Java Script Paolo Salvaneschi 21B5 Java Script Paolo Salvaneschi 21
• 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)
Tipi di dati
B5 Java Script Paolo Salvaneschi 22B5 Java Script Paolo Salvaneschi 22
• Tipizzazione delle variabili• Linguaggio debolmente tipizzato
– Una variabile può contenere valori diqualunque tipo. Il tipo non è dichiarato
– I tipi sono convertiti automaticamente
Variabili
i = 10;i = "dieci";
B5 Java Script Paolo Salvaneschi 23B5 Java Script Paolo Salvaneschi 23
• 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 dichiaraimplicitamente (come variabile globale - vedi…)
Variabili
B5 Java Script Paolo Salvaneschi 24B5 Java Script Paolo Salvaneschi 24
• 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
Variabili
B5 Java Script Paolo Salvaneschi 25B5 Java Script Paolo Salvaneschi 25
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 globaledocument.write("<B>" + scope + "</B><BR>");}checkscope3();document.write("<B>" + scope + "</B>");
B5 Java Script Paolo Salvaneschi 26B5 Java Script Paolo Salvaneschi 26
Variabili
var scope = "globale";function checkscope3(){scope = "locale"; // N.B. Modifica la variabile globalemyscope1 = "esempio1 ";var myscope2 = "esempio2 ";document.write("<B>" + scope + "</B>");}checkscope3();
Ho dichiarato implicitamente una variabile
globale
• Dichiarare tutte le variabili con var
Ho dichiarato una variabile
locale
B5 Java Script Paolo Salvaneschi 27B5 Java Script Paolo Salvaneschi 27
• Ambito (Scope)
Nessun ambito a livello di bloccoTutte le varabili dichiarate in una funzione restano definite in tutto il corpo della funzione
Variabili
B5 Java Script Paolo Salvaneschi 28B5 Java Script Paolo Salvaneschi 28
• 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
Variabili
B5 Java Script Paolo Salvaneschi 29B5 Java Script Paolo Salvaneschi 29
<H2>Tipi primitivi</H2><SCRIPT language="JavaScript">
var a = 3.14; //inizializza variabilevar b = a; //copiala in ba = 4; // modifica var originalealert(b); //la copia non è modificata
</SCRIPT><BR><H2>e tipi di riferimento</H2><SCRIPT language="JavaScript">
var a = [1,2,3]; //inizializza arrayvar b = a; //copia riferimento in ba[0] = 99; // modifica array originalealert(b); //il nuovo riferimento visualizza la modifica
</SCRIPT>
Variabili
B5 Java Script Paolo Salvaneschi 30B5 Java Script Paolo Salvaneschi 30
• Garbage collection
Variabili
var s= "hello"; //Alloca memoria per una stringavar 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 Paolo Salvaneschi 31B5 Java Script Paolo Salvaneschi 31
• Aritmetici (binari e unari)+, -, *, /% modulo (resto dopo la divisione)++ incremento unario
++x incrementa e restituisce il valore di xx++ restituisce il valore di x e incrementa
-- decremento unario
- negazione unaria. Restituisce la negazionedell’operando (converte un numero positivo innegativo e viceversa)
Operatori
B5 Java Script Paolo Salvaneschi 32B5 Java Script Paolo Salvaneschi 32
• Funzioni matematiche• Proprietà dell’oggetto Math• Seno_di_x = Math.sin(x);
• Conversione di un numero in stringavar x = 33;var y = x.toString(2);//2 è la base// la stringa y sarà caricata con “100001”
Operatori
B5 Java Script Paolo Salvaneschi 33B5 Java Script Paolo Salvaneschi 33
• Confronto (restituiscono un valore true false)== equal to!= not equal to>, >=, <, <=
• Booleani&& AND|| OR
! NOT
Operatori
B5 Java Script Paolo Salvaneschi 34B5 Java Script Paolo Salvaneschi 34
• 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 valorea var sin ( |= )
Operatori
B5 Java Script Paolo Salvaneschi 35B5 Java Script Paolo Salvaneschi 35
• Special– Conditional operator
Se la condizione è vera assegna alla variabile il primo valore, altrimenti il secondo(condition) ? trueVal : falseValpreferredPet = (cats > dogs) ? "felines" : "canines"
Operatori
B5 Java Script Paolo Salvaneschi 36B5 Java Script Paolo Salvaneschi 36
• z = x + y; Espressioni• {x = 1; y = 2; z = x + y; } blocco di istruzioni
• if else (else può essere omesso)
Istruzioni
if (condition) { statements1; }else { statements2; }
B5 Java Script Paolo Salvaneschi 37B5 Java Script Paolo Salvaneschi 37
Istruzioni
if (condition1) { statements1; }
else if (condition2) { statements2; }
else if (condition3) { statements3; }
else { statements4; }
B5 Java Script Paolo Salvaneschi 38B5 Java Script Paolo Salvaneschi 38
• switch
Istruzioni
switch (favoritePet){ case "dog" :
statements;break;case "cat" :
statements;break;case "iguana" :
statements;break;default : statements;
}default: caso particolare di etichettaIn generale identificatore: istruzione
B5 Java Script Paolo Salvaneschi 39B5 Java Script Paolo Salvaneschi 39
• for
Istruzioni
for (initial-statement; test; increment) { statements; }
for (i=0; i<10; i++){ statements; }
• do while
• while
do { statements;}while (condition)
while (condition){ statements; }
B5 Java Script Paolo Salvaneschi 40B5 Java Script Paolo Salvaneschi 40
• 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
Istruzioni
B5 Java Script Paolo Salvaneschi 41B5 Java Script Paolo Salvaneschi 41
• break
Istruzioni
cicloesterno:for (var i=0; i<10; i++) {
ciclointerno:for (var j=0; j<10; j++) {……………….if (….) break cicloesterno;
} }
Etichettatura di istruzione.Identificatore seguito da due puntiidentificatore: istruzione
B5 Java Script Paolo Salvaneschi 42B5 Java Script Paolo Salvaneschi 42
• 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,…)
Funzioni
B5 Java Script Paolo Salvaneschi 43B5 Java Script Paolo Salvaneschi 43
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 Paolo Salvaneschi 44B5 Java Script Paolo Salvaneschi 44
Funzioni
<HTML><HEAD>
<SCRIPT language="JavaScript">function eleva_al_quadrato(x){ return x*x;}</SCRIPT>
</HEAD>
B5 Java Script Paolo Salvaneschi 45B5 Java Script Paolo Salvaneschi 45
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 Paolo Salvaneschi 46B5 Java Script Paolo Salvaneschi 46
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 Paolo Salvaneschi 47B5 Java Script Paolo Salvaneschi 47
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 Paolo Salvaneschi 48B5 Java Script Paolo Salvaneschi 48
• 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
Funzioni
B5 Java Script Paolo Salvaneschi 49B5 Java Script Paolo Salvaneschi 49
• Oggetto (insieme non ordinato di valori con nome)– Oggetto immagine con proprietà altezza:
immagine.altezza– Gli oggetti possono contenere qualsiasi tipo di
datidocument.modulouno.campo1
– Incluse le funzioni (metodi)document.write("hello world");
Oggetti
B5 Java Script Paolo Salvaneschi 50B5 Java Script Paolo Salvaneschi 50
• Creazione di oggettivar point = new Object();point.x = 2.3;point.y = 5;
• Accesso agli oggettiobjectName.propertyNamecarObj.maker="Toyota";carObj.year=1990;document.write(carObj.year);
Oggetti
B5 Java Script Paolo Salvaneschi 51B5 Java Script Paolo Salvaneschi 51
…<SCRIPT language="JavaScript">
var libro = new Object();libro.titolo = "JavaScript: La guida";libro.autore = "David Flanagan";libro.editore = "Apogeo";
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>
Oggetti
La proprietà è creata assegnando un valore
Oggetto annidato
B5 Java Script Paolo Salvaneschi 52B5 Java Script Paolo Salvaneschi 52
Oggetti
//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";
• Creazione di oggetti con costruttore predefinito
B5 Java Script Paolo Salvaneschi 53B5 Java Script Paolo Salvaneschi 53
Oggetti
//Definizione di un costruttore specializzato "Libro" //(Classe; la classe è definita definendo una funzione costruttore)
function Libro(a,b,c){this.titolo = a;this.autore = b;this.editore = c;}
Utilizza gli argomenti per inizializzare le proprietàdell’oggetto vuoto creato dalla parola chiave this
• Creazione di oggetti con costruttore specializzato
Convenzione:Nome di classe: inizia con maiuscoloNome di istanza: inizia con minuscolo
B5 Java Script Paolo Salvaneschi 54B5 Java Script Paolo Salvaneschi 54
//Creazione di due oggetti della classe mediante il costruttorevar 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>");…
Oggetti
B5 Java Script Paolo Salvaneschi 55B5 Java Script Paolo Salvaneschi 55
Una funzione può essere assegnata ad una proprietà di un oggetto
//Definizione delle funzioni da utilizzare come metodifunction Area_rettangolo(){return this.larghezza * this.altezza}
//Definizione del costruttore degli oggetti Rettangolofunction Rettangolo(lar, alt){this.larghezza = lar; //Definizione proprietàthis.altezza = alt;this.area = Area_rettangolo; //Definizione metodi}
Oggetti
• Metodi
Vedi nota
B5 Java Script Paolo Salvaneschi 56B5 Java Script Paolo Salvaneschi 56
//Creazione di un oggettovar 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'oggettovar a = rettangolo1.area();
document.write("<B>Area:" + a + "</B><BR>");
Oggetti
B5 Java Script Paolo Salvaneschi 57B5 Java Script Paolo Salvaneschi 57
Oggetti
• Una funzione è un dato (può essere assegnata ad una variabile o ad una proprietà di un oggetto)
Nota
function Area_rettangolo() {return this.larghezza * this.altezza};
var a = rettangolo1.area();
function Rettangolo(lar, alt)
{this.larghezza = lar; //Definizione proprietà
this.altezza = alt;
this.area = Area_rettangolo; //Definizione metodi
}
DEFINIZIONEDefinisce la funzione.
La variabile Area_rettangolo
contiene il riferimento alla struttura in memoria.
RIFERIMENTOIl riferimento contenuto nella variabile Area_rettangolo ècopiato nella variabile area.
this.area =Area_rettangolonon
this.area =Area_rettangolo()USOChiama la funzione
area()
B5 Java Script Paolo Salvaneschi 58B5 Java Script Paolo Salvaneschi 58
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 Paolo Salvaneschi 59B5 Java Script Paolo Salvaneschi 59
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 Paolo Salvaneschi 60B5 Java Script Paolo Salvaneschi 60
class Rettangolo{// attributiprivate int area;private int larghezza ;private int altezza;// metodipublic Rettangolo(int lar, int alt){ larghezza = lar;
altezza = alt; }public int getArea() { area = larghezza * altezza ;
return area; } }
function Area_rettangolo(){return this.larghezza * this.altezza}function Rettangolo(lar, alt){// attributithis.larghezza = lar;this.altezza = alt;// metodithis.area = Area_rettangolo;}
var rettangolo1 = new Rettangolo(30,40);var a = rettangolo1.area()
Rettangolo rettangolo1 = new Rettangolo(30,40);int a = rettangolo1.getArea();
Definizioneclasse
Creazione istanza e chiamata metodo
JavaScript Java
Oggetti
B5 Java Script Paolo Salvaneschi 61B5 Java Script Paolo Salvaneschi 61
• 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
Oggetti
B5 Java Script Paolo Salvaneschi 62B5 Java Script Paolo Salvaneschi 62
• 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
Oggetti
B5 Java Script Paolo Salvaneschi 63B5 Java Script Paolo Salvaneschi 63
Oggetti
B5 Java Script Paolo Salvaneschi 64B5 Java Script Paolo Salvaneschi 64
Oggetti
• Ereditarietà
B5 Java Script Paolo Salvaneschi 65B5 Java Script Paolo Salvaneschi 65
Oggetti
• Prototipi ed ereditarietà
B5 Java Script Paolo Salvaneschi 66B5 Java Script Paolo Salvaneschi 66
Oggetti
B5 Java Script Paolo Salvaneschi 67B5 Java Script Paolo Salvaneschi 67
Oggetti
B5 Java Script Paolo Salvaneschi 68B5 Java Script Paolo Salvaneschi 68
Oggetti
B5 Java Script Paolo Salvaneschi 69B5 Java Script Paolo Salvaneschi 69
Oggetti
Ereditaname
Ereditaname
Ereditadept
Eredita e sovrascrive dept
B5 Java Script Paolo Salvaneschi 70B5 Java Script Paolo Salvaneschi 70
• Array (insieme ordinato di valori numerati)aa[2] terzo elemento dell’array (l’indice inizia da 0)
var a = new Array();
a[0] = 1.2;a[1] = “JavaScript”;a[2] = true;
Array
Assegnazione di elementi (anche di tipi diversi) all’arrayUn nuovo elemento può essere aggiunto in qualunque momento (basta assegnargli un valore)
Creazione di array vuotocon il costruttore Array()
B5 Java Script Paolo Salvaneschi 71B5 Java Script Paolo Salvaneschi 71
• Array (insieme ordinato di valori numerati)
var a = new Array(10);
var a = [“pippo”, true, 2.34];
a[1] = 3.14;i=2;a[i] = “ciao”;
a[1] = 3.14;a[1000] = “fine”;
Array
Creazione di array di 10 elementi
Lettura / scrittura
Gli indici non devono ricadere necessariamente in un intervallo continuo di numeri. E’ allocata memoria solo per i due indici.