B5 1 JavaScript V114 - Unibg...B5 Java Script Paolo Salvaneschi 1 B5_1 V1.14 Java Script...

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


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


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


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,…)


• 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>

<SCRIPT></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)



<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>


• File esterno• File di testo con estensione .js


<SCRIPT language="JavaScript" src="functions.js"></SCRIPT>



<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


• Gestore di eventi


<FORM><INPUT type="button" value="Chiudi" onclick="win1.close();"></FORM>


• URL javascriptpseudoprotocollo javascript:


<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



<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>


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*/


Struttura lessicale

• Identificatori (nome variabile, nome funzione, etichetta)

• Il primo carattere deve essere:Lettera_ (underscore)

$• Parole riservate (if, else, false,….)


• 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


• 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


– 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


• 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


• 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


• 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


• 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";


• 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


• 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


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>");


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


• Ambito (Scope)

Nessun ambito a livello di bloccoTutte le varabili dichiarate in una funzione restano definite in tutto il corpo della funzione

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

Variabili


<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


• 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


• 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


• 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


• Confronto (restituiscono un valore true false)== equal to!= not equal to>, >=, <, <=

• Booleani&& AND|| OR

! NOT

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 valorea var sin ( |= )

Operatori


• Special– Conditional operator

Se la condizione è vera assegna alla variabile il primo valore, altrimenti il secondo(condition) ? trueVal : falseValpreferredPet = (cats > dogs) ? "felines" : "canines"

Operatori


• 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; }


Istruzioni

if (condition1) { statements1; }

else if (condition2) { statements2; }

else if (condition3) { statements3; }

else { statements4; }


• 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


• 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; }


• 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


• 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


• 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


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


Funzioni

<HTML><HEAD>

<SCRIPT language="JavaScript">function eleva_al_quadrato(x){ return x*x;}</SCRIPT>

</HEAD>


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>


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>…


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>


• 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


• 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


• 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


…<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


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


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


//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


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


//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


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()


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


Oggetti

• Java – Fortemente tipizzato– Ereditarietà basata su classi– La struttura degli oggetti definita alla

definizione della classe– I metodi non sono dati


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


• 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


• 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


Oggetti


Oggetti

• Ereditarietà


Oggetti

• Prototipi ed ereditarietà


Oggetti


Oggetti

Ereditaname

Ereditaname

Ereditadept

Eredita e sovrascrive dept


• 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()


• 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.

B5 1 JavaScript V114 - Unibg...B5 Java Script Paolo Salvaneschi 1 B5_1 V1.14 Java Script...

Documents

Transcript of B5 1 JavaScript V114 - Unibg...B5 Java Script Paolo Salvaneschi 1 B5_1 V1.14 Java Script...