La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Il linguaggio JavaScript SCUOLA SUPERIORE G. REISS ROMOLI.

Presentazioni simili


Presentazione sul tema: "Il linguaggio JavaScript SCUOLA SUPERIORE G. REISS ROMOLI."— Transcript della presentazione:

1 Il linguaggio JavaScript SCUOLA SUPERIORE G. REISS ROMOLI

2 Introduzione Javscript è un linguaggio di scripting: il Browser (Internet explorer, Netscape, Opera etc) interpreta sequenzialmente ogni riga del programma e lo esegue, quindi passa alla riga successiva Javscript è un linguaggio di programmazione nato per conferire dinamicità alle pagine web (1995) SCUOLA SUPERIORE G. REISS ROMOLI

3 Storia, evoluzione e tipologia delle pagine web Pagine statiche Html: non è un linguaggio nel senso tradizionale ma un impaginatore che consente di posizionare degli oggetti (testo, grafica ed elementi inglobati) allinterno di un file che viene interpretato dal browser (.htm,.html) Non cè interazione con lutente se non tramite link ipertestuali (elementi sensibili di una pagina web che consentono il salto incondizionato verso un indirizzo diverso da cui lutente si trova oppure verso un altro punto nella stessa pagina web (ancoraggio) Le pagine web possono essere statiche o dinamiche SCUOLA SUPERIORE G. REISS ROMOLI

4 Pagine dinamiche Prima di Javascript linterazione era solo lato server Es: nei Moduli (Forms) i dati venivano inviati al server e lì elaborati tramite programmi scritti in linguaggi di programmazione lato server (Perl, C,..) Tali programmi generavano dinamicamente pagine HTML di ritorno visualizzate direttamente dal browser dellutente Cosa può fare un programma lato server? - validazione ed elaborazioni di dati - accesso a basi di dati o a file di dati formato testo - produzione di effetti grafici - eseguire ciclicamente un certo numero di operazioni strutturate in blocchi di sottoprogrammi SCUOLA SUPERIORE G. REISS ROMOLI

5 Pagine dinamiche (Javascript) Con Javascript linterazione diventa anche lato client Alcune operazioni prima demandate esclusivamente al server vengono eseguite in locale dal javascript sulla macchina client: - validazione ed elaborazioni di dati e controllo dellintegrità dei dati stessi - produzione di effetti grafici - eseguire ciclicamente un certo numero di operazioni strutturate in blocchi di sottoprogrammi In questo modo una certa mole di operazioni viene decentrata dal server al client contribuendo a decongestionare le attività del server: si pensi ad applicazioni web dove tanti utenti accedono contemporaneamente ad es. ad una base dati SCUOLA SUPERIORE G. REISS ROMOLI

6 Evoluzione della programmazione web (ASP) ASP (Active Server Pages) è un ambiente di programmazione lato server della Microsoft (funziona con il sistema operativo Windows NT Server o Windows 2000 o con Windows 98) che può contenere codice HTML, javascript, VBScript (simile al Visual Basic). Per funzionare ASP ha bisogno di un supporto software che costituisce un web server (IIS - Internet Information server) oppure PWS - Personal Web Server Il codice scritto nei documenti ASP è interpretato ed è in codice ASCII quindi appare in chiaro anche se lutente della macchina client non visualizza il sorgente ma soltanto il risultato che lelaborazione lato server produce. SCUOLA SUPERIORE G. REISS ROMOLI

7 Evoluzione della programmazione web (Java) Evoluzione della programmazione web (Java) Nelle pagine HTML possono essere inglobati degli applet Java per produrre animazioni o fare elaborazioni qualitativamente avanzate Java è un linguaggio semicompilato; non produce un eseguibile puro, ma un file in formato bytecode che viene interpretato sul client da una macchina virtuale chiamata Java Virtual Machine Lapplet viene spedito dal server al client dove avviene lelaborazione SCUOLA SUPERIORE G. REISS ROMOLI

8 Evoluzione della programmazione web (COM) Lelaborazione lato server può avvenire anche tramite Componenti, blocchi di codice indipendente compilato quindi non visibile dallesterno. Di solito sono costituiti da file.dll scritte in C oppure in Visual Basic Interessante ai fini dellimplementazione delle applicazioni web è il modello a tre strati dove lutente interagisce con lo stato superficiale, costiutito da pagine HTML o ASP, che costituisce linterfaccia dellapplicazione web. Le pagine web comunicano i comandi per le interrogazioni di dati con uno strato intermedio composto da uno o più componenti eventualmente distribuiti su più server. I componenti effettuano fisicamente le interrogazioni di dati al (ai) database aziendali (nascondendo così la struttura dei dati stessi). I database costituiscono il terzo strato, inaccessibile in questo modo dallesterno in quanto il codice con il quale sono costituiti i componenti non è in chiaro I risultati delle interrogazioni vengono presentati direttamente allinterfaccia web come valori delle proprietà delle classi costituenti i componenti o come risultati dellesecuzione di metodi delle classi stesse. SCUOLA SUPERIORE G. REISS ROMOLI

9 Cosa Javascript può o non può fare Vantaggi: Svantaggi: - javascript è in chiaro, quindi facilmente interpretabile e di facile manutenzione a differenza dei file eseguibili che non sono intellegibili - viene alleggerito il carico del server - non è possibile svolgere alcuni task che debbono essere demandati a elementi esterni, (java, ASP, CGI, C) Es: non si può accedere a file di dati o di testo, non si può operare direttamente sullhardware del computer client. - il codice è a disposizione di chiunque proprio perché in chiaro - il codice deve essere scaricato dal server al client prima di essere eseguito e questo a volte ritarda i tempi di elaborazione SCUOLA SUPERIORE G. REISS ROMOLI

10 Come si inserisce uno script in una pagina web - tramite il tag allinterno di un file HTML Es: SCUOLA SUPERIORE G. REISS ROMOLI

11 - Caricandolo da una file esterno Es: dove nel file miofile.js si scrive solamente il blocco di codice javascript Es: alert(Questo è un blocco di codice javascript in un file esterno); Vantaggi: modularità per utilizzare degli script richiamabili allinterno di più file) Cosa usare per scrivere codice Javascript? Un qualsiasi editor di testo (Notepad, Visual Interdev, Dreamweaver etc ….. SCUOLA SUPERIORE G. REISS ROMOLI

12 Dove va scritto il codice javascript in una pagina web Sia nella sezione che nella sezione di un documento HTML Gli script inseriti nella sezione vengono caricati ed eventualmente eseguiti prima degli script inseriti nella sezione, i quali vengono eseguiti sequenzialmente secondo lordine di caricamento. Nella sezione vengono spesso inseriti script relativi a funzioni javascript (vedi dopo) che verranno richiamate allinterno del programmafunzioni SCUOLA SUPERIORE G. REISS ROMOLI

13 Esempio: provare il seguente codice javascript Allinizio dellelaborazione la variabile x vale 1 perché così impostato nel tag x=1; alert(Intestazione= + x); x++; alert(Nuovo valore di x= + x); Attenzione alluso degli apici (singoli e doppi) SCUOLA SUPERIORE G. REISS ROMOLI

14 I metodi per inserire e richiamare gli script alinterno di un documento - tramite il tag script …… - tramite un gestore di eventi con richiamo esplicito al linguaggio javascript : - tramite un gestore di eventi che richiama una funzione esterna (vedi dopo): Clicca qui Clicca qui SCUOLA SUPERIORE G. REISS ROMOLI

15 Per scrivere allinterno di un documento HTML tramite javascript: Utilizziamo il comando: document.write(Ciao); Tramite il comando document.write scrivo direttamente nel documento associato alla pagina web corrente, cosicchè se scrivo codice HTML esso verrà interpretato dal browser per produrre documenti di tipo web document.write( ); document.write(Sto scrivendo in javascript in un documento HTML); document.write( ); SCUOLA SUPERIORE G. REISS ROMOLI

16 La sintassi del linguaggio javascript: Javascript è un linguaggio strutturato; esso possiede alcune strutture tipiche dei linguaggi di programmazione: Le istruzioni di senso compiuto dovrebbero sempre essere terminate da un punto e virgola (;) - esso separa due istruzioni di senso compiuto, che quindi possono essere scritte anche su una stessa riga - istruzioni di comando - [ x=2; alert(Ho scritto + x); ] - istruzioni condizionali - [ if (x==2) alert(Ho scritto + x);] - istruzioni iterative - [ for (I=1; i<=10; I++) alert(Ho scritto + I); ] - richiamo di funzioni [ Mostra il Messaggio ] SCUOLA SUPERIORE G. REISS ROMOLI

17 Le variabili Sono locazioni di memoria associate ad un nome allinterno del programma. esse possono assumere valori variabili durante lesecuzione del programma stesso. x=3; nome=pippo; coniugato=false; nome[k]=Giovanni; Javascript è un linguaggio debolmente tipizzato nel senso che il tipo della variabile viene attribuito nel momento dellutilizzo Es: x=3 significa che x è di tipo numerico (x++ restituirà 4) SCUOLA SUPERIORE G. REISS ROMOLI

18 nome=pippo significa che la variabile nome è di tipo stringa quindi pippo+3 restituirà pippo3 coniugato=false; coniugato è una variabile booleana nome[k]=Giovanni; nome è una variabile di tipo array Le variabili possono essere anche dichiarate ma non utilizzate subito. In questo caso il valore attribuito è null oppure undefined var nome; In alternativa si può dichiarare una variabile ed assegnarne subito il valore var nome=pippo; SCUOLA SUPERIORE G. REISS ROMOLI

19 Gli operatori: + - * / ^Operatori aritmetici &&, ||, !AND, OR, NOT Operatori Logici ++, - -Operatori di incremento e di decremento !=diverso da = >= Operatori relazionali == Operatore di confronto: if(x==3) = Operatore di assegnazione x=3 SCUOLA SUPERIORE G. REISS ROMOLI

20 Variabili Globali e variabili locali Variabili globali: hanno valore in tutto il documento HTML e di solito vanno dichiarate nel tag Variabili locali: hanno valore soltanto nellambito della funzione in cui sono dichiarate ATTENZIONE: in Javascript le variabili, così come le parole chiave della sintassi, cosi come i nomi delle funzioni e gli identificatori debbono essere scritte sempre tenendo conto delle lettere maiuscole e minuscole, perché Javascript è un linguaggio di tipo case sensitive, cioè sensibile allle lettere maiuscole e minuscole SCUOLA SUPERIORE G. REISS ROMOLI

21 Esempio di utilizzo di variabili locali e globali Variabili locali e variabili globali var scope="globale"; function checkScope() { var scope="locale"; document.write(scope + " ") } Variabili locali e variabili globali checkScope(); //scrive: locale document.write(scope); // scrive: globale SCUOLA SUPERIORE G. REISS ROMOLI

22 Listruzione condizionale If Listruzione If permette di eseguire istruzioni di tipo condizionale. Viene valutata unespressione ed a seconda se questa è vera o falsa viene eseguito un diverso blocco di istruzioni Sintassi if(condizione){ istruzione_1//può essere anche un blocco di istruzioni } else { istruzione_2 } SCUOLA SUPERIORE G. REISS ROMOLI

23 Esempio pratico sullistruzione If A seconda del valore di una variabile viene mostrata una scritta di colore diverso var colore=blu if(colore==verde){ document.write( document.write(Questa scritta apparirà di colore verde ) document.write( } else{ document.write( document.write(Questa scritta apparirà di colore + colore) document.write( } SCUOLA SUPERIORE G. REISS ROMOLI

24 Istruzione ciclica For Il For costituisce un ciclo a numero di iterazioni fissato Il programma esegue un blocco di istruzioni un certo numero di volte già noto allinizio del ciclo Sintassi Esempio: per far scrivere un numero progressivo da 0 a 9 for(inizializzazione; test_fine_ciclo; incremento) { blocco_di_istruzioni } for(var i=0;i<10;i++){ document.write(Ho scritto + i + ) } SCUOLA SUPERIORE G. REISS ROMOLI

25 Esercitazione: Calcolo del fattoriale con il ciclo For Si definisce fattoriale (N!) di un intero positivo N un numero tale che se N=0 vale 1, se N>0 vale 1 * 2 *…* N document.write(" fattoriali "); document.write("questa pagina calcolerà il fattoriale dei numeri fino a 10 utilizzando il ciclo FOR "); var fattoriale=1; for (x=0; x<=10; x++){ if (x==0) fattoriale=1; else { fattoriale=fattoriale * x; document.write(" "); document.write("il fattoriale di " + x +" è uguale a " + fattoriale +" "); } SCUOLA SUPERIORE G. REISS ROMOLI

26 Istruzione ciclica While Il costrutto while costituisce un ciclo a numero di iterazioni non prefissato. La fine del ciclo dipende dal verificarsi di una condizione di fine ciclo E necessario lutilizzo di una variabile contatore Sintassi Il programma valuta una condizione di fine ciclo. Se questa è falsa il ciclo finisce; se è vera viene eseguito un blocco di istruzioni e poi viene incrementata la variabile che conta il numero di iterazioni. Se la condizione duscita è falsa il ciclo non esegue alcuna istruzione Se la condizione duscita è sempre vera il ciclo non finisce mai While (condizione){ blocco_di_istruzioni incremento_variabile_contatore } SCUOLA SUPERIORE G. REISS ROMOLI

27 Esempio: per far scrivere un numero progressivo da 0 a 9 con il ciclo while var i=0; While(i<10){ document.write(Ho scritto + i + ) i++; } SCUOLA SUPERIORE G. REISS ROMOLI

28 Esercitazione: Calcolo del fattoriale con il ciclo While document.write(" fattoriali "); document.write("questa pagina calcolerà il fattoriale dei numeri fino a 10 utilizzando il ciclo WHILE "); var fattoriale=1; var x=0; while (x<=10){ if (x==0) fattoriale=1; else { fattoriale=fattoriale * x; } document.write(" "); document.write("il fattoriale di " + x +" è uguale a " + fattoriale +" "); x++; } SCUOLA SUPERIORE G. REISS ROMOLI

29 Le funzioni Blocchi di codice autonomo eventualmente dipendenti da parametri dingresso, che vengono richiamate una o più volte nel corso del programma. Come il concetto matematico di funzione y=F(x1, x2, …., xn) esse producono un solo risultato in uscita La funzione viene dichiarata (nella sezione se viene vista nellambito di tutto il documento, oppure nella sezione e viene vista da quel punto in poi) I parametri ( x1, x2, …, xn) presenti nella dichiarazione sono detti i parametri formali La funzione viene poi richiamata e i parametri che vengono ad essa passati sono detti i parametri attuali che si sostituiscono in valore ai parametri formali. SCUOLA SUPERIORE G. REISS ROMOLI

30 Esempio: funzione che effettua la somma tra due numeri immessi dallutente Step 1) Scriviamo prima una generica funzione per controllare che i dati immessi siano di tipo numerico function ErrorString(campo,nomeCampo) //Controlla che il campo sia di tipo numerico { var str = campo.value; for (var i=0;i < str.length;i++) if ((str.charAt(i) '9')) { alert("Attenzione: il campo '"+nomeCampo+"' deve essere numerico!"); campo.focus(); return false; } return true; } SCUOLA SUPERIORE G. REISS ROMOLI

31 NOTE SULLESEMPIO - Una stringa viene trattata come un vettore (vedi dopo) o Array - Vettore (Array): insieme di coppie ordinate indice-valore. Una stringa è un insieme ordinato di caratteri indicizzati dalla posizione 0 fino alla posizione N-1 dove N è il numero di caratteri della stringa. Nozioni aggiuntive: - str.length = lunghezza in caratteri della stringa - str.charAt(i) = estrae il valore delli-mo carattere della stringa - str.charAt(0) è l primo carattere della stringa - il metodo focus posiziona il cursore sulloggetto in questione (vedi dopo: Oggetti) SCUOLA SUPERIORE G. REISS ROMOLI

32 Step 2) Scriviamo una generica funzione per controllare che siano effettivamente stati immessi dei dati (il campo non sia vuoto) function StringaVuota(campo,nomecampo){ //controlla che non ho immesso nel campo un valore nullo if(campo.value==""){ alert(nomecampo + " non può avere valore nullo"); campo.focus(); return false; } return true; } SCUOLA SUPERIORE G. REISS ROMOLI

33 Step 3) scriviamo una funzione che effettua la somma tra due numeri immessi dallutente function Somma(x,y){ //funzione che effettua la somma di due addendi passati come parametri //if generale di controllo: se tutte e quattro le chiamate di funzione danno true come risultato anche il risultato della //funzione somma sarà true if (StringaVuota(x,Primo addendo") && ErrorString(x," Primo addendo ") && StringaVuota(y,Secondo addendo") && ErrorString(y,Secondo addendo")) { var Risultato=parseInt(x.value)+parseInt(y.value); alert("La somma di " + x.value + " e " + y.value + " è uguale a " + Risultato); return true; } else return false; } SCUOLA SUPERIORE G. REISS ROMOLI

34 NOTE SULLESEMPIO Return: istruzione che termina lesecuzione di una funzione e produce un risultato (nel caso specifico true o false) La funzione parseInt(x) converte un carattere immesso in un numero permettendo di poterne fare operazioni aritmetiche SCUOLA SUPERIORE G. REISS ROMOLI

35 Step 4) Scriviamo la parte HTML della presente esercitazione I campi contrassegnati con l'asterisco sono ad immissione obbligatoria * Inserisci il primo addendo * Inserisci il secondo addendo SCUOLA SUPERIORE G. REISS ROMOLI

36 NOTE SULLESEMPIO - nel tag il metodo get, a differenza del metodo post permette di visualizzare sulla barra dellURL i parametri che vengono inviati al server con il pulsante di Submit - la funzione somma viene richiamata sullevento click del pulsante che invia i dati al server - le funzioni debbono essere richiamate facendo attenzione ad utilizzare la stessa sequenza di maiuscole e minuscole Esercitazione: scrivere una funzione che effettua la moltiplicazine tra due numeri immessi dallutente tramite due input text box SCUOLA SUPERIORE G. REISS ROMOLI

37 Gli Oggetti Un oggetto si definisce come unistanza di una classe Una classe è una collezione di oggetti che condividono stesse proprietà, eventi, metodi Regole della programmazione ad oggetti Abbiamo già utilizzato loggetto document ed il suo metodo write per scrivere allinterno di un documento HTML document.write(Ciao) - incapsulamento - ereditarietà - polimorfismo SCUOLA SUPERIORE G. REISS ROMOLI

38 Metodi e proprietà I metodi li possiamo vedere come delle azioni che gli oggetti possono compiere oppure delle azioni fatte fare agli oggetti Per richiamare (invocare) un metodo: NomeOggetto.Metodo(…..) con eventuali argomenti Le proprietà invece caratterizzano gli oggetti nella loro peculiarità Es: Per il TAG type, size, name sono delle proprietà delloggetto input SCUOLA SUPERIORE G. REISS ROMOLI

39 Gli eventi Gli eventi come dice la parola stessa sono qualcosa che può accadere agli oggetti come p.es. il click del mouse sulloggetto oppure il passaggio del mouse sullarea delloggetto oppure il caricamento delloggetto nel documento Oggetti appartenenti a classi diverse non è detto che posseggano gli stessi eventi In javascript possiamo gestire gli eventi associando ad un evento di un oggetto una funzione Es: Quando si fa click sul pulsante viene richiamata la funzione ControlloDati() SCUOLA SUPERIORE G. REISS ROMOLI

40 In javascript possiamo gestire le proprietà, eventi e metodi di oggetti già predefiniti nel Browser (Oggetti intrinseci) Come vedremo, è possibile anche creare e gestire nuovi oggetti. Javascript mette quindi a disposizione alcune peculiarità della programmazione ad oggetti ma in maniera soft: non è possibile paragonare javascript a java o a C++ SCUOLA SUPERIORE G. REISS ROMOLI

41 Gerarchia degli oggetti in javascript Uno dei punti di forza di JavaScript è la sua capacità di lavorare direttamente con elementi della pagina Web che viene gestita tramite una gerarchia di oggetti JavaScript. Questa gerarchia contiene una notevole varietà di oggetti che rappresentano i dati nella pagina Web corrente e nella finestra del browser in esecuzione. Tutti gli oggetti sono organizzati in una gerarchia di oggetti genitori e oggetti figli. Un oggetto figlio non è che un oggetto utilizzato come proprietà di un altro (loggetto genitore). Ciò significa che cascun oggetto appartenente alla gerarchia include proprietà che a loro volta sono spesso altri oggetti. Un oggetto può avere dei metodi che servono per eseguire funzioni su di esso; può includere dei gestori di eventi che chiamano funzioni o enunciati javaScript quando si verifica un evento relativo a quelloggetto. A questo punto cominceremo ad esaminare loggetto che è al top della gerarchia degli oggetti Javascript: loggetto window SCUOLA SUPERIORE G. REISS ROMOLI

42 Loggetto Window Loggetto window è al primo posto nella gerarchia degli oggetti. Per ogni finestra del browser aperta esiste un oggetto window. Le proprietà di questo oggetto descrivono il documento nella finestra e forniscono informazioni sulla finestra. Tre proprietà delloggetto window sono oggetti figli: locationlocation memorizza la posizione (URL) che è visualizzata nella finestra; documentdocument contiene la pagina Web vera e propria historyhistory contiene un elenco delle pagine visitate prima e dopo della pagina attualmente sulla finestra del browser. SCUOLA SUPERIORE G. REISS ROMOLI

43 Metodi delloggetto window Alcuni metodi più usati delloggetto window: Esempio: dallistanza corrente del browser aprire una nuova finestra più piccola da dove è possibile cambiare alcune proprietà della finestra più grande. Scriviamo prima la funzione che consente di aprire la finestra figlia window.open(….) consente di aprire una nuova istanza del browser con parametri personalizzati window.close()chiude listanza corrente del browser function aprifin(){ window.open("finestra_figlia.htm", "figlia", "width=300, height=300, top=60, left=60, scrollbars=no") } SCUOLA SUPERIORE G. REISS ROMOLI

44 Poi nella finestra madre richiamo la funzione aprifin() Notare lutilizzo dell evento onload (su caricamento) del tag body Scrivo il codice allinterno della finestra figlia decidi il colore di sfondo di questa finestra cliccando sui relativi comandi in quella più piccola! function CambiaColore(mycolore){ document.bgColor=mycolore; } SCUOLA SUPERIORE G. REISS ROMOLI

45 opener fa riferimento alla finestra che ha aperto quella corrente Tramite opener è possibile far riferimento a variabili, funzioni ed oggetti definiti nella finestra che lha creata. rosso verde blu Chiudi la finestra madre Chiudi la finestra figlia SCUOLA SUPERIORE G. REISS ROMOLI

46 I Timeout e loggetto Window Il Metodo window.setTimeout differisce lesecuzione del codice di un certo ritardo espresso in millisecondi Sintassi: window.setTimeout(codice,ritardo) SCUOLA SUPERIORE G. REISS ROMOLI

47 Esercitazione Creare un file HTML che contenga uno script che imposta un timer allo scadere del quale il browser carica unaltra pagina HTML. ID=window.setTimeout("Redirect();",3000); function Redirect() { document.open(); document.write(" "); document.write("Ciao"); document.write(" "); document.close(); } Timer SCUOLA SUPERIORE G. REISS ROMOLI

48 Note sullesempio Dopo 3 secondi dal caricamento della pagina viene eseguita la funzione Redirect() La funzione apre dinamicamente un nuovo documento Nel documento aperto viene scritto solo Ciao SCUOLA SUPERIORE G. REISS ROMOLI

49 Esercitazione Creare un documento HTML che utilizzi un timeout per visualizzare un messaggio- contatore che si incrementa ogni n secondi nella riga di stato e in un campo testo. Un pulsante Reset fa ricominciare il conteggio e un pulsante Stop lo arresta. Il valore allinterno della casella di testo viene espresso tramite document.form1.input1.value var counter = 0; // chiamo la funzione Update dopo 2 second1 dal primo caricamento ID=window.setTimeout("Update();",2000); function Update() { counter ++; window.status="Sono passati " + counter + " secondi"; document.form1.input1.value="Sono passati " + counter + " secondi"; // richiamo di nuovo la funzione per un altro conteggio ID=window.setTimeout("Update();",1000); } SCUOLA SUPERIORE G. REISS ROMOLI

50 Per resettare il conteggio viene impostata la variabile counter=0 Per azzerare il timeout si utilizza la funzione clearTimeout(ID) dove ID è il valore restituito da setTimeout Esempio di contatore Il testo sottostante e la Status Bar saranno aggiornati ogni secondo. Premere il pulsante RESET per far ripartire il conteggio ed il pulsante STOP per fermarlo SCUOLA SUPERIORE G. REISS ROMOLI

51 Esercitazione: aggiungere un tasto RESTART per far ripartire il conteggio dopo lo STOP Soluzione: Basta aggiungere la riga di codice SCUOLA SUPERIORE G. REISS ROMOLI

52 Loggetto Window: altri metodi Loggetto window ha numerosi metodi che consentono di eseguire funzioni relative alle finestre: aprire, chiudere, manipolare finestre e visualizzare finestre di dialogo. - alert() visualizza una finestra di dialogo di avvertimento - blur() rimuove la finestra dal primo piano, ponendola come sfondo - close() chiude una finestra che è stata aperta - confirm() visualizza una finestra di dialogo e restituisce true oppure false - focus() porta la finestra in primo piano - open() apre una nuova finestra - prompt() sollecita lutente e restituisce il testo immesso SCUOLA SUPERIORE G. REISS ROMOLI

53 Ed ancora: - scroll() fa scorrere la finestra sia orizzontalmente che verticalmente - setTimeout() imposta un timer per eseguire unistruzione differita e restituisce un identificatore per il timeout - clearTimeout() azzera il timeout che definito da setTimeout - setInterval() imposta un timer per eseguire unistruzione ad intervalli regolari; restituisce unidentificatore per il timeout - clearInterval() azzera il timeout definito da setInterval SCUOLA SUPERIORE G. REISS ROMOLI

54 Proprietà delloggetto window Loggetto window ha diverse proprietà che forniscono informazioni sulla finestra e i suoi componenti. Ogni oggetto window comprende tra le altre le seguenti proprietà: - length: numero di cornici (frames) in una finestra di tipo parent- name: nome della finestra - status: il valore attuale della riga di stato - window.status rappresenta lo spazio in basso a sinistra nella finestra in cui visualizzare eventuali messaggi; possiamo usarlo come spazio per i suggerimenti sul significato di campi e link (es.: onMouseOver) SCUOLA SUPERIORE G. REISS ROMOLI

55 Loggetto Window: gestori di eventi Alcuni degli eventi associati alloggetto window: - levento onLoad si verifica quando il documento nella finestra è stato completamente caricato - levento onUnload si verifica quando si inizia a caricare un altro documento che rimpiazza quello presente sulla finestra - levento onFocus si verifica quando la finestra è posta in primo piano - levento onBlur si verifica quando la finestra è posta in secondo piano - levento onError si verifica se il documento nella finestra non viene caricato nel modo corretto SCUOLA SUPERIORE G. REISS ROMOLI

56 Esercitazione Scrivere un documento HTML e gestire gli eventi onLoad, onUnload, onFocus e onBlur visualizzando, ad esempio, dei messaggi appropriati come Hello! al caricamento, etc Soluzione Events Example Gli eventi dell'oggetto WINDOW SCUOLA SUPERIORE G. REISS ROMOLI

57 Loggetto Location Loggetto location è gerarchicamente inferiore alloggetto window e ne costituisce una sua proprietà. Contiene informazioni sulla URL della pagina visualizzata dalla finestra. Ha un insieme di proprietà che gli servono per organizzare i vari componenti della URL P.es. Se si desidera caricare unaltra pagina si utilizza la seguente istruzione: window.location.href = "http://www.netscape.com/"; Se desidera caricare unaltra pagina in un frame: parent.frame1.location = "http://www.netscape.com/"; dove frame1 è il nome del frame in questione SCUOLA SUPERIORE G. REISS ROMOLI

58 Esercitazione Scegliere allinterno di una select box un URL di destinazione tra quelli elencati e far visualizzare la pagina corrispondente tramite levento onchange Scriviamo prima la funzione per la redirezione allURL prescelto function VaiAUrl(myUrl){ self.location.href=myUrl; window.status=myUrl;} SCUOLA SUPERIORE G. REISS ROMOLI

59 Poi la parte HTML con il richiamo della funzione select name=SelUrl onchange=VaiAUrl(document.FrmProva.SelUrl.options[document.FrmP rova.SelUrl. selectedIndex].value);> Vai al sito Netscape Vai al sito Microsoft Vai al sito RAI Vai al sito Macromedia SCUOLA SUPERIORE G. REISS ROMOLI

60 Loggetto history Anche loggetto history è gerarchicamente connesso con loggetto window (e ne costituisce una proprietà); contiene informazioni sulle URL che sono state visitate prima e dopo il documento in corso. Anche questo oggetto dispone di metodi che consentono di tornare alle prosizioni precedenti oppure di andare a posizioni successive. Loggetto history ha una proprietà length che consente di sapere il numero di documenti che sono state visitate. Loggetto history dispone di metodi che consentono di andare a posizioni precedenti o successive: - history.back() rimanda indietro alla posizione precedente - history.forward() rimanda avanti alla posizione successiva SCUOLA SUPERIORE G. REISS ROMOLI

61 Ed ancora: - history.back() rimanda indietro alla posizione precedente - history.go() rimanda a una ben definita posizione dellelenco history (numeri negativi vanno indietro, numeri positivi vanno avanti) - history.go(0) permette di ricaricare le pagine web dalla cache - window.location.reload() permette di ricaricare la pagina dal server SCUOLA SUPERIORE G. REISS ROMOLI

62 Esercitazione Inserire in una pagina HTML due pulsanti che permettono di ricaricare la pagina precedente oppure la pagina successiva (pulsanti indietro e avanti del browser): oppure SCUOLA SUPERIORE G. REISS ROMOLI

63 Loggetto Document Un altro oggetto gerarchicamente dipendente dalloggetto window è loggetto document. Questo oggetto rappresenta il contenuto della pagina Web HTML in corso di elaborazione. Questo oggetto contiene unampia varietà di attributi che definiscono le informazioni sulla pagina in corso. Le proprietà delloggetto document rappresentano le caratteristiche della pagina HTML in corso. Molte di queste vengono specificate nella tag del documento, mentre altre vengono impostate dal browser nel momento in cui il documento viene caricato. Alcune di queste proprietà sono: - bgColor il colore dello sfondo - fgColor il colore del primo piano (testo) - lastModified la data ultima in cui il documento è stato modificato. - referrer è la URL della pagina che lutente aveva visualizzato prima dellattuale pagina, di solito è la pagina con un collegamento alla pagina corrente SCUOLA SUPERIORE G. REISS ROMOLI

64 Gli oggetti figli delloggetto document sono: - document.forms è una matrice che contiene un elemento per ogni modulo del documento - document.links è una matrice che contiene gli elementi di ciascun collegamento presente nel documento - document.anchors è una matrice con elementi per ciascuno delle ancore presenti nel documento - document.images contiene un elemento per ciascuna immagine del documento in corso di elaborazione - document.applets è una matrice che si riferisce a ciascun applet Java incorporato nel documento. SCUOLA SUPERIORE G. REISS ROMOLI

65 I metodi per loggetto document Loggetto document non ha gestori di eventi ma comprende i seguenti metodi: - clear() cancella un documento che è stato chiuso - close() chiude un flusso e visualizza il testo scritto - open() apre un flusso e cancella il documento in corso di elaborazione - write() stampa i testi nella finestra del documento - writeln() serve sia per stampare i testi nella finestra del documento sia per inserire un ritorno a capo SCUOLA SUPERIORE G. REISS ROMOLI

66 Loggetto FORM Loggetto form rappresenta un MODULO HTML. Ci possono essere diversi form allinterno di un documento. Si può accedere ad una form utilizzando il nome oppure la matrice forms, che contiene un elemento per ogni modulo. Gli elementi di un modulo HTML sono gerarchicamente dipendenti dalloggetto Form: - Text box - Text hidden - Text Password - Select box - check box - radio button - TextArea - Submit Button, Reset Button, Button, Image Button SCUOLA SUPERIORE G. REISS ROMOLI

67 Gli oggetti di una form e loro interazione con Javascript Javascript viene utilizzato nella maggior parte dei casi come strumento di controllo e validazione dal lato client dei dati prima di inviarli al server Esercitazione: Semplice controllo e validazione dei dati in un formulario: Scriviamo prima una funzione che controlla limmissione in un campo Nome function ControllaNome(campo,nomecampo) { var st=campo.value for (var I=0; I

68 } poi una funzione che controlla limmissione in un campo Telefono function ErrorTel(campo,nomecampo) {var st=campo.value; var car; for (var k=0;k

69 Poi scrivo una funzione che controlla in OR la validità delle altre funzioni. Se una sola delle funzioni richiamate è vera la funzione CheckInvia() è falsa e quindi il Submit dei dati non ha luogo. function CheckInvia(){ if ( ControllaNome(document.form1.txtNome,"Nome")|| ErrorVuoto(document.form1.txtNome,"Nome")|| ErrorVuoto(document.form1.txtTelefono,"Telefono")|| ErrorTel(document.form1.txtTelefono,"Telefono") ) return false; return true; } SCUOLA SUPERIORE G. REISS ROMOLI

70 Di seguito la pagina web contenente la Form dove vengono controllati i dati Nome: Telefono: SCUOLA SUPERIORE G. REISS ROMOLI

71 Gli oggetti di un modulo Vedremo di seguito come vengono caratterizzati i TAG HTML relativi agli oggetti di un modulo e come ci si riferisce in javascript alle loro proprietà SCUOLA SUPERIORE G. REISS ROMOLI

72 Gli oggetti di tipo INPUT TEXT -Text box - Hidden text box - Password text box in javascript: document.form1.TxtNome.value si riferisce al valore SCUOLA SUPERIORE G. REISS ROMOLI

73 I Pulsanti Pulsante generico (permette di richiamare una funzione sullevento click) - Pulsante di Submit (invia i dati della form al server) (Viene prima eseguita la funzione CheckInvia() e poi se questa restituisce true i dati vengono inviati al server) SCUOLA SUPERIORE G. REISS ROMOLI

74 Altri tipi di Pulsanti: - Pulsante di Reset (Reimposta i dati della form) - Pulsante tipo Image (Invia i dati della form al server ma tramite unimmagine) SCUOLA SUPERIORE G. REISS ROMOLI

75 l Radio box Collezione di caselle di opzione mutuamente esclusive. Condividono stesso nome e valore diverso: In HTML: In Javascript: if(document.Form1.Optbox[0].checked=true) verifica se il radio box con indice 0 è selezionatp Optbox viene trattato come un array SCUOLA SUPERIORE G. REISS ROMOLI

76 Esercitazione Un semplice sondaggio: scrivo prima la funzione che richiamata ritorna la scelta effettuata function VerificaVoto() { if (document.FrmGov.gov[0].checked==true || document.FrmGov.gov[1].checked==true || document.FrmGov.gov[2].checked==true || document.FrmGov.gov[3].checked==true) { for (i=0; i<=3; i++) { if (document.FrmGov.gov[i].checked==true) alert("Hai scelto la risposta n. " + parseInt(i+1)); } return true; } else { alert("Scegliere una delle possibili risposte"); document.FrmGov.gov[0].focus(); return false; } SCUOLA SUPERIORE G. REISS ROMOLI

77 Scrivo poi il codice HTML della pagina web Sondaggio on-line Chi vincerà il campionato di calcio? 1) Roma 2) Juventus 3) Milan 4) Inter SCUOLA SUPERIORE G. REISS ROMOLI

78 Loggetto TextArea Loggetto Textarea è una casella di testo in cui posso scrivere su più righe a differenza della Input TextBox dove posso scrivere su una riga sola. In HTML: Testo inserito in Javascript: document.form1.AreaRisultati.value=XXX SCUOLA SUPERIORE G. REISS ROMOLI

79 Loggetto CheckBox Collezione di caselle di opzione NON mutuamente esclusive Esercitazione Dati 10 checkbox chK1…chK10 scrivere una funzione che controlli se almeno uno è selezionato In HTML: in Javascript: if(document.form1.chK1.checked) controlla se la checkbox di nome chK1 è selezionata SCUOLA SUPERIORE G. REISS ROMOLI

80 Soluzione function ErrChk() { if (document.FrmGestioneDati.chK1.checked || document.FrmGestioneDati.chK2.checked || document.FrmGestioneDati.chK3.checked || document.FrmGestioneDati.chK4.checked || document.FrmGestioneDati.chK5.checked || document.FrmGestioneDati.chK6.checked || document.FrmGestioneDati.chK7.checked || document.FrmGestioneDati.chK8.checked || document.FrmGestioneDati.chK9.checked || document.FrmGestioneDati.chK10.checked) { return false; } else { alert("Selezionare almeno una checkbox"); document.FrmGestioneDati.chK1.focus(); return true; } SCUOLA SUPERIORE G. REISS ROMOLI

81 Esercitazione Dati 10 checkbox chK1…chK10 scrivere una funzione che controlli se ne sono stati selezionati più di tre Soluzione function ErrorTreScelte() { var cont=0; with (document.FrmGestioneDati){ for(var I=1;I<=10;I++){ if (eval("chK" + I + ".checked")) cont++; if (cont>3) { alert("Non è possibile effettuare più di tre scelte"); chK1.focus(); return true; } return false; } SCUOLA SUPERIORE G. REISS ROMOLI

82 Notare luso della funzione EVAL() che permette valutare unespressione composta composta come un comando Javascript Senza la funzione eval() lespressione chK + I +.checked è una stringa e non un booleano quindi IF(….) darebbe errore SCUOLA SUPERIORE G. REISS ROMOLI

83 Il controllo e la validazione dei dati in un modulo Esempio: Utilizziamo gli eventi di tastiera (onkeyUp) per realizzare un semplice modulo di controllo del carrello della spesa per unapplicazione di e-commerce Si tratta di un modulo in cui posso scegliere dei prodotti da una lista. In conseguenza della scelta mi iene presentato il prezzo unitario del prodotto. Lutente immette la quantità che vuole acquistare e viene automaticamente calcolato il prezzo totale. Bisognerà controllare che non sia possibile da parte degli utenti effettuare manomissioni sui dati immessi e calcolati. SCUOLA SUPERIORE G. REISS ROMOLI

84 Scrivo il codice per il modulo di scelta della merce da acquistare: SCUOLA SUPERIORE G. REISS ROMOLI Seleziona il frutto che preferisci Quantità Prezzo per chilogrammo Totale Banane Mele Pere Arance Meloni Cocomeri CONTINUA

85 SCUOLA SUPERIORE G. REISS ROMOLI

86 Scrivo la funzione MostraPrezzo() che per ogni scelta di merce mostra il prezzo al Kg SCUOLA SUPERIORE G. REISS ROMOLI var scelta; var prezzo; function MostraPrezzo() {//mostra il prezzo al kg sullevento change della select box scelta=document.FrmFruttarolo.CmbFrutta.options[document.FrmFruttarolo. CmbFrutta.selectedIndex].text; prezzo=document.FrmFruttarolo.CmbFrutta.options[document.FrmFruttarolo. CmbFrutta.selectedIndex].value; document.FrmFruttarolo.TxtPrzzo.value=prezzo; } CONTINUA

87 Scrivo la funzione CalcolaTotali1() che calcola il prezzo totale come prodotto di Quantità x Prezzo Unitario SCUOLA SUPERIORE G. REISS ROMOLI function CalcolaTotali1(prezzo,quantita, arrivo) {//calcola il prezzo totale=Qta*PrUni e viene chiamata //sullevento onKeyUp del campo quantità previa verifica che la quantità è numerica if(VerificaNumeri(quantita)){ var totale=(parseInt(prezzo) * parseInt(quantita.value)); arrivo.value=totale; return true; } else { alert("Immissione non valida"); quantita.value=""; return false; } CONTINUA

88 Scrivo la funzione CalcolaTotali2() che effettua il ri-calcolo del prezzo totale come prodotto di Quantità x Prezzo Unitario ogni qual volta si tenta di scrivere nel campo Prezzo Totale SCUOLA SUPERIORE G. REISS ROMOLI function CalcolaTotali2(prezzo,quantita, arrivo) {//effettua il ricalcolo del totale sul keyup del campo totale per evitare manomissioni var totale=(parseInt(prezzo) * parseInt(quantita.value)); arrivo.value=totale; return true; } CONTINUA

89 Scrivo la funzione VerificaNumeri() che controlla che la quantità scritta dallutente sia un valore numerico SCUOLA SUPERIORE G. REISS ROMOLI function VerificaNumeri(elem) { var str=elem.value; if (str=="") { //alert("Immissione non valida"); return false; } for (I=0; I

90 Scrivo la funzione SelezionaArticolo() che chiama la funzione MostraPrezzo() dopo aver azzerato il valore della Quantità e del Prezzo Totale. Questo per ripristinare le condizioni iniziali ogni volta che lutente sceglie un nuovo articolo SCUOLA SUPERIORE G. REISS ROMOLI function SelezionaArticolo() { document.FrmFruttarolo.TxtQta.value=""; document.FrmFruttarolo.TxtTot.value=""; MostraPrezzo(); }

91 Gli Array Un Array è una collezione ordinata di coppie indice - valore intendendo dire che ogni elemento di una array è individuato dal valore e dalla posizione allintewrno dellarray Gli elementi di uno stesso array possono essere anche di tipo diverso e possono essere a loro volta array SCUOLA SUPERIORE G. REISS ROMOLI

92 Creazione di un array var A=new Array() crea un array vuoto senza elementi E possibile anche assegnare i valori degli elementi di un array direttamente allatto della creazione var A=new Array(5,4,8,Pippo) Un array è ordinato a partire dallindice 0 Quindi nellespressione var A=new Array(5,4,8,Pippo) A[0]=5; A[1]=4; A[2]=8; A[3]=Pippo; La proprietà length dellarray rappresenta la lunghezza ovvero il numero di elementi dellarray (intero a 32 bit senza segno) Un altro modo per creare un nuovo array è quello di utilizzare un singolo argomento numerico che ne specifica la lunghezza var A=new Array(10) crea un nuovo array con 10 elementi impostati al valore undefined SCUOLA SUPERIORE G. REISS ROMOLI

93 Lettura e scrittura degli elementi di un array Per accedere agli elementi di un array si utilizza loperatore [ ] Es: value=A[0] ; A[1]=3.14 ; i=1 ; A[i+1]=Ciao; Per aggiungere un nuovo elemento ad un array è sufficiente assegnargli un valore. La memoria di un array viene allocata dinamicamente, ovvero solo per gli indici valorizzati Es: A[0] = 1000; A[1000] = Pippo SCUOLA SUPERIORE G. REISS ROMOLI Es: mostrare il valore di tutti gli elementi di un array (FRUITS) che esistono for(var i=0 i < FRUITS.length; i++) if(FRUITS[i]) alert(FRUITS[i])

94 Metodi per gli array Metodo join(): converte tutti gli elementi di un array in una stringa e li concatena Es: var A =[1,2,3] ; str=A.join() --> str=1,2,3 Al contrario si comporta il metodo Split: var B=str.split(,) --> crea un nuovo array spezzettando una stringa secondo il delimitatore, Metodo reverse(): inverte lordine degli elementi di un array Es: a=new array(1,2,3) ; a.reverse(); str=a.join() --> str=3,2,1 SCUOLA SUPERIORE G. REISS ROMOLI

95 Metodo sort(): ordina gli elementi di un array; la chiamata del metodo sort senza argomenti ordina secondo lordine alfabetico Es: a = new Array(mela, ciliegia, banana) a.sort() ; str=a.join() ; --> str=banana, ciliegia, mela Metodi push() e pop() ; consentono di lavorare con gli array come se fossero stack - Il metodo push() aggiunge uno o più nuovi elementi alla fine di un array e restituisce lultimo valore aggiunto - Il metodo pop() elimina lultimo elemento dellarray e restituisce il valore eliminato var stack=new Array() stack.push(1,2) --> stack : [1,2] ; restituisce 2 stack.pop() --> stack : [1] ; restituisce 2 SCUOLA SUPERIORE G. REISS ROMOLI

96 Applicazione degli Array - Larray Images La matrice images (è un array)contiene un elemento per ogni immagine definita allinterno del documento. Gli elementi sono indicizzati a partire da 0 secondo lordine di come vengono visualizzati nella pagina. Ciascun oggetto image ha le seguenti proprietà: SCUOLA SUPERIORE G. REISS ROMOLI - border: rappresenta lattributo border della tag e serve per stabilire se è stato disegnato un bordo intorno ad unimmagine collegata; - height e width: rappresentano i corrispondenti attributi dellimmagine (altezza e larghezza); - name: è il nome dellimmagine. Si può definirlo attraverso lattributo name che si trova nella definizione dellimmagine; - src_ è lorigine dellimmagine, ovvero lURL. Questo valore può essere modificato per cambiare le immagini in maniera dinamica.

97 Esempio:Scrivere una pagina HTML che contenga due immagini e un pulsante. Cliccando sul pulsante si invertono i sorgenti delle immagini Prima scrivo la funzione da richiamare e che permette lo scambio delle immagini SCUOLA SUPERIORE G. REISS ROMOLI function Cambia() { src_primo = document.images[0].src; height_primo = document.images[0].height; width_primo = document.images[0].width; src_secondo = document.images[1].src; height_secondo = document.images[1].height; width_secondo = document.images[1].width; document.images[0].src = src_secondo; document.images[0].height = height_secondo; document.images[0].width = width_secondo; document.images[1].src = src_primo; document.images[1].height = height_primo; document.images[1].width = width_primo; }

98 poi la parte HTML dove la funzione viene richiamata SCUOLA SUPERIORE G. REISS ROMOLI

99 Altre nozioni di sintassi Javascript: il ciclo For … In Il ciclo for … in può eseguire operazioni iterative su ogni proprietà di un oggetto: Sintassi: SCUOLA SUPERIORE G. REISS ROMOLI for ( variabile in Oggetto) istruzione Esempio: for (i in mioarray) { mioarray[i]++; } - lesempio somma 1 ad ogni elemento della matrice mioarray; ovviamente questo tipo di istruzione non si utilizza solo con gli array, bensì se ne coglie lutilità nel caso di controlli e modifiche sulle proprietà di un qualsiasi oggetto.oggetto

100 P. Es il ciclo for..in seguente mostra il nome ed il valore di ciascuna proprietà di un oggetto Applicazione: loggetto Navigator La proprietà window.navigator si riferisce ad un oggetto navigator che contiene informazioni relative al browser attualmente in uso (supportata sia da Netscape che da IE) SCUOLA SUPERIORE G. REISS ROMOLI for (myprop in myobject) { document.write(nome= + myprop + ; valore= + myobject[myprop]+ ) }

101 Proprietà delloggetto navigator Per listare tutte le proprietà utilizziamo il seguente codice: SCUOLA SUPERIORE G. REISS ROMOLI - appName il nome del browser web -appVersion numero di versione e/o altre informazioni di versione del browser -appCodeName nome in codice del browser (es: Mozilla) Var browser=Informazioni sul browser:\n; For (var myprob in navigator) { browser+=myprop + : - + navigator[myprop]+ \n } alert (browser);

102 Esempio: determiniamo a partire dalloggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo SCUOLA SUPERIORE G. REISS ROMOLI Var browser=new(object); //creo il nuovo oggetto browser //estraggo la versione del browser Browser.version=parseInt(navigator.appVersion) //Netrscape o IE=? Browser.isNavigator=false Browser.isIE=false If(navigator.AppName.indexOf(Netscape) !=-1) Browser.isNavigator=true; Else If(navigator.AppName.indexOf(Microsoft) !=-1) Browser.isIE=true;

103 La programmazione ad oggetti in javascript - Creazione degli oggetti Un oggetto viene creato attaverso loperatore new Tale oggetto deve essere seguito dal nome del costruttore che serve ad inizializzare loggetto ed a conferirgli le caratteristiche principali Abbiamo visto che è possibile creare un nuovo oggetto vuoto (senza proprietà) con la sintassi: var o =new Object(); Successivamente a questoggetto si possono assegnare le proprietà dinamicamente come vedremo nella prossima slide SCUOLA SUPERIORE G. REISS ROMOLI

104 Esempio: determiniamo a partire dalloggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo SCUOLA SUPERIORE G. REISS ROMOLI Var browser=new(object); //creo il nuovo oggetto browser //estraggo la versione del browser Browser.version=parseInt(navigator.appVersion) //Netrscape o IE=? Browser.isNavigator=false Browser.isIE=false If(navigator.AppName.indexOf(Netscape) !=-1) Browser.isNavigator=true; Else If(navigator.AppName.indexOf(Microsoft) !=-1) Browser.isIE=true;

105 In seguito vedremo che è possibile creare oggetti con costruttori creati ex novo. Ancora: semplicemente è possibile definire degli oggetti semplici (senza simulare il meccanismo dellereditarietà) tramite i letterali oggetto, un elenco di proprietà e di valori separato da virgole SCUOLA SUPERIORE G. REISS ROMOLI var cerchio= { x:0; y:0, raggio:2 } Oppure: var pippo= { nome:Pippo, età: 27, coniugato:true, occupazione:ingegnere,

106 Accesso alle proprietà degli oggetti: tramite loperatore. Nellesempio precedente: pippo.età=27; Ancora: è possibile definire dinamicamente nuovi oggetti in maniera gerarchica a partire da oggetti esistenti come proprietà degli oggetti genitori Le proprietà sono tutte di lettura/scrittura SCUOLA SUPERIORE G. REISS ROMOLI var book=new Object(); Book.titolo=Introduzione al javascript Book.capitolo1=new object(); Book.capitolo1.titolo=Introduzione Book.capitolo1.pagine=50;

107 E possibile eliminare definitivamente una proprietà di un oggetto con loperatore Delete() Delete book.capitolo1 In alternativa book.capitolo1=null non distrugge la proprietà ma la setta al valore undefined SCUOLA SUPERIORE G. REISS ROMOLI

108 I costruttori Le definizione degli oggetti appena date sono semplici ed in queste non è possibile scoprire alcunchè di programmazione ad oggetti Non cè per es. il concetto di classe Per creare una classe associabile ad un nuovo oggetto è necessario specificarne il costruttore che ne inizializza le principali proprietà e consente di specificarne i metodi Un costruttore è una funzione del tipo: SCUOLA SUPERIORE G. REISS ROMOLI function Rettangolo(x,y) { this.larghezza=x; this.altezza=y; } Poi in seguito: var rect1=new Rettangolo(1,2) //creo un nuovo oggetto rect1 a partire //dal costruttore

109 I Metodi Un metodo è una funzione javascript che viene richiamata tramite un oggetto Es: SCUOLA SUPERIORE G. REISS ROMOLI function area() { return this.width* this.height } var r=new Rettangolo(4, 5.6) r.sup=area;

110 I Prototype e la simulazione dellereditarietà Esiste un metodo di creazione delle classi che ottimizza di più la memoria in quanto per ogni oggetto creato come nuova istanza della classe le proprietà non debbono essere di nuovo create ma vengono ereditate dalla classe stessa. Ciò viene fatto tramite prototipi (Prototype) definiti allinterno della classe stessa. Ogni oggetto quindi può avere un prototipo da cui eredita le proprietà. Costruiamo una classe attraverso il meccanismo dei prototype Es: la classe Cerchio SCUOLA SUPERIORE G. REISS ROMOLI function Cerchio(raggio) // Cerchio è il costruttore { This.r=raggio; //definisco la proprietà r } Cerchio.prototype.pigreco= //definisco la variabile distanza pigreco tramite il suo prototipo; La proprietà pigreco verrà ereditata da tutte le istanze della classe Cerchio

111 Poi definisco un metodo per il calcolo dellarea Poi definisco un metodo per il calcolo della Circonferenza SCUOLA SUPERIORE G. REISS ROMOLI function Cerchio_area() { Return Cerchio.prototype.pigreco * this.r * this.r;} Cerchio.prototype.area=Cerchio_area; //area è un metodo d'istanza; il metodo area() verrà ereditato da tutte le istanze della classe Cerchio function Cerchio_circonferenza() {return this.pigreco * this.r * 2 }; Cerchio.prototype.circonferenza=Cerchio_circonferenza; //circonferenza è un metodo d'istanza; il metodo circonferenza() verrà ereditato da tutte le istanze della classe Cerchio

112 A questo punto creo un nuovo oggetto c1 di classe Cerchio e ne calcolo larea Poi ne calcolo la circonferenza SCUOLA SUPERIORE G. REISS ROMOLI var c1=new Cerchio(3); //cerchio di raggio 3 var Sup=c1.area(); alert("Area= " + Sup); // c1 eredita direttamente il metodo area() dal prototipo var circ=c1.circonferenza(); alert("Circonferenza= " + circ); // c1 eredita direttamente il metodo circonferenza() dal prototipo

113 Definisco poi un nuovo metodo Cerchio_max che attibuisco però direttamente alla classe, quindi non viene direttamente ereditato A questo punto creo un nuovo oggetto c2 di classe Cerchio e applico il metodo Cerchio_max per determinare il maggiore tra c1 e c2 SCUOLA SUPERIORE G. REISS ROMOLI function Cerchio_max(a,b) //Metodo di classe { if( a.r > b.r ) return a; return b; } var c2=new Cerchio(4); var bigger=Cerchio_max(c1,c2) alert(bigger.r);


Scaricare ppt "Il linguaggio JavaScript SCUOLA SUPERIORE G. REISS ROMOLI."

Presentazioni simili


Annunci Google