Scuola Superiore G. Reiss Romoli

Scuola Superiore G. Reiss Romoli
Il linguaggio JavaScript SCUOLA SUPERIORE G. REISS ROMOLI

Introduzione Javscript è un linguaggio di programmazione nato per conferire dinamicità alle pagine web (1995) 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 SCUOLA SUPERIORE G. REISS ROMOLI

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

Pagine dinamiche Prima di Javascript l’interazione 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 dell’utente 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

Pagine dinamiche (Javascript) Con Javascript l’interazione 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 dell’integrità 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

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 l’utente della macchina client non visualizza il sorgente ma soltanto il risultato che l’elaborazione lato server produce. SCUOLA SUPERIORE G. REISS ROMOLI

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 L’applet viene spedito dal server al client dove avviene l’elaborazione SCUOLA SUPERIORE G. REISS ROMOLI

Evoluzione della programmazione web (COM) L’elaborazione lato server può avvenire anche tramite “Componenti”, blocchi di codice indipendente compilato quindi non visibile dall’esterno. Di solito sono costituiti da file .dll scritte in C oppure in Visual Basic Interessante ai fini dell’implementazione delle applicazioni web è il modello “a tre strati” dove l’utente interagisce con lo stato “superficiale”, costiutito da pagine HTML o ASP, che costituisce l’interfaccia dell’applicazione 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 dall’esterno in quanto il codice con il quale sono costituiti i componenti non è “in chiaro” I risultati delle interrogazioni vengono presentati direttamente all’interfaccia web come valori delle proprietà delle classi costituenti i componenti o come risultati dell’esecuzione di metodi delle classi stesse. SCUOLA SUPERIORE G. REISS ROMOLI

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 sull’hardware 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

Come si inserisce uno script in una pagina web - tramite il tag <script> all’interno di un file HTML Es: <body> <script language="JavaScript">  </script> </body> SCUOLA SUPERIORE G. REISS ROMOLI

- 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 all’interno di più file) Cosa usare per scrivere codice Javascript? Un qualsiasi editor di testo (Notepad, Visual Interdev, Dreamweaver etc <html> <head><script language="JavaScript” SRC=“miofile.js”>  </script> </head> <body> ….. </body> </html> SCUOLA SUPERIORE G. REISS ROMOLI

Dove va scritto il codice javascript in una pagina web Sia nella sezione <head> che nella sezione <body> di un documento HTML Gli script inseriti nella sezione <head> vengono caricati ed eventualmente eseguiti prima degli script inseriti nella sezione <body>, i quali vengono eseguiti sequenzialmente secondo l’ordine di caricamento. Nella sezione <head> vengono spesso inseriti script relativi a “funzioni” javascript (vedi dopo) che verranno richiamate all’interno del programma SCUOLA SUPERIORE G. REISS ROMOLI

Esempio: provare il seguente codice javascript All’inizio dell’elaborazione la variabile x vale 1 perché così impostato nel tag <head> <html> <head> <script language=“JavaScript”> x=1; alert(“Intestazione=“ + x); </script> </head> <body> <script language="JavaScript”> x++; alert(“Nuovo valore di x=“ + x); x++; alert(“Nuovo valore di x =“ + x); </body> </html> Attenzione all’uso degli apici (singoli e doppi) SCUOLA SUPERIORE G. REISS ROMOLI

I metodi per inserire e richiamare gli script al’interno di un documento - tramite il tag script <script>……</script> - tramite un “gestore di eventi” con richiamo esplicito al linguaggio javascript : - tramite un “gestore di eventi” che richiama una funzione esterna (vedi dopo): <body> <a href=“#” onclick=“javascript:alert(‘ciao’);”> Clicca qui</a> </body> <body> <a href=“#” onclick=“MostraMessaggio();”>Clicca qui</a> </body> SCUOLA SUPERIORE G. REISS ROMOLI

Per scrivere all’interno 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 <body> <script language="JavaScript”> document.write(“<font face=‘Verdana,Arial’ size=‘2’ color=‘red’>”); document.write(“Sto scrivendo in javascript in un documento HTML”); document.write(“</font>”); </script> </body> SCUOLA SUPERIORE G. REISS ROMOLI

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 [ < a href=“#” onclick=“MostraMessaggio();”>Mostra il Messaggio</a> ] SCUOLA SUPERIORE G. REISS ROMOLI

Le variabili Sono locazioni di memoria associate ad un nome all’interno del programma. esse possono assumere valori variabili durante l’esecuzione 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 dell’utilizzo Es: x=3 significa che x è di tipo numerico (x++ restituirà 4) SCUOLA SUPERIORE G. REISS ROMOLI

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

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

Variabili Globali e variabili locali Variabili globali: hanno valore in tutto il documento HTML e di solito vanno dichiarate nel tag <head> Variabili locali: hanno valore soltanto nell’ambito 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

Esempio di utilizzo di variabili locali e globali <HTML> <HEAD> <TITLE>Variabili locali e variabili globali</TITLE> <SCRIPT LANGUAGE="JavaScript"> var scope="globale"; function checkScope() { var scope="locale"; document.write(scope + "<br>") } </SCRIPT> </HEAD> <BODY> <H1>Variabili locali e variabili globali</H1> <HR> checkScope(); //scrive: locale document.write(scope); // scrive: globale </script> </BODY> </HTML> SCUOLA SUPERIORE G. REISS ROMOLI

L’istruzione condizionale If L’istruzione If permette di eseguire istruzioni di tipo condizionale. Viene valutata un’espressione 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

Esempio pratico sull’istruzione If A seconda del valore di una variabile viene mostrata una scritta di colore diverso <SCRIPT LANGUAGE="JavaScript"> var colore=“blu” if(colore==“verde”){ document.write(“<font size=‘3’ color=‘green’>” document.write(“Questa scritta apparirà di colore verde” ) document.write(“</font>” } else{ document.write(“Questa scritta apparirà di colore ” + colore) </script> SCUOLA SUPERIORE G. REISS ROMOLI

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 all’inizio 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 + “<br>”) } SCUOLA SUPERIORE G. REISS ROMOLI

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 <script language="javascript"> document.write("<font face='verdana,arial' size='3' color='red'>fattoriali</font><br>"); document.write("questa pagina calcolerà il fattoriale dei numeri fino a 10 utilizzando il ciclo FOR<br>"); var fattoriale=1; for (x=0; x<=10; x++){ if (x==0) fattoriale=1; else { fattoriale=fattoriale * x; document.write("<font size=" +x +">"); document.write("il fattoriale di " + x +" è uguale a " + fattoriale +"<br>"); } </script> SCUOLA SUPERIORE G. REISS ROMOLI

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 l’utilizzo 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 d’uscita è falsa il ciclo non esegue alcuna istruzione Se la condizione d’uscita è sempre vera il ciclo non finisce mai While (condizione){ blocco_di_istruzioni incremento_variabile_contatore } SCUOLA SUPERIORE G. REISS ROMOLI

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

Esercitazione: Calcolo del fattoriale con il ciclo While <script language="javascript"> document.write("<font face='verdana,arial' size='3' color='red'>fattoriali</font><br>"); document.write("questa pagina calcolerà il fattoriale dei numeri fino a 10 utilizzando il ciclo WHILE<br>"); var fattoriale=1; var x=0; while (x<=10){ if (x==0) fattoriale=1; else { fattoriale=fattoriale * x; } document.write("<font size=" +x + " color=" +"#" + fattoriale + ">"); document.write("il fattoriale di " + x +" è uguale a " + fattoriale +"<br>"); x++; </script> SCUOLA SUPERIORE G. REISS ROMOLI

Le funzioni Blocchi di codice autonomo eventualmente dipendenti da parametri d’ingresso, 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 <head> se viene vista nell’ambito di tutto il documento, oppure nella sezione <body> 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

Esempio: funzione che effettua la somma tra due numeri immessi dall’utente Step 1) Scriviamo prima una generica funzione per controllare che i dati immessi siano di tipo numerico <html> <head> <title></title> <script language="Javascript"> 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) < '0') || (str.charAt(i) > '9')) { alert("Attenzione: il campo '"+nomeCampo+"' deve essere numerico!"); campo.focus(); return false; } return true; SCUOLA SUPERIORE G. REISS ROMOLI

NOTE SULL’ESEMPIO - 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 dell’i-mo carattere della stringa - str.charAt(0) è l primo carattere della stringa - il metodo focus posiziona il cursore sull’oggetto in questione (vedi dopo: Oggetti) SCUOLA SUPERIORE G. REISS ROMOLI

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

Step 3) scriviamo una funzione che effettua la somma tra due numeri immessi dall’utente 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; </script> </head> SCUOLA SUPERIORE G. REISS ROMOLI

NOTE SULL’ESEMPIO Return: istruzione che termina l’esecuzione 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

Step 4) Scriviamo la parte HTML della presente esercitazione <body> <form name="FrmProva" method="get"> <font face="Verdana,Arial" size="1"> I campi contrassegnati con l'asterisco sono ad immissione obbligatoria <table border="0" width=50%> <tr> <td>* Inserisci il primo addendo</td><td><input type="text" name="TxtNome" size="30" maxlenght="40"></td></tr> <td>* Inserisci il secondo addendo</td><td><input type="text" name="TxtCognome" size="30" maxlenght="40"></td></tr> <td><input type="submit" name="BtnSubmit" Value="Somma" onclick="return Somma(document.FrmProva.TxtNome, document.FrmProva.TxtCognome);"></td><td> <input type="reset" name="BtnReset" value="annulla"></td></tr> </table> </form> </body> </html> SCUOLA SUPERIORE G. REISS ROMOLI

NOTE SULL’ESEMPIO - nel tag <form> il metodo get, a differenza del metodo post permette di visualizzare sulla barra dell’URL i parametri che vengono inviati al server con il pulsante di Submit - la funzione somma viene richiamata sull’evento 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 dall’utente tramite due input text box SCUOLA SUPERIORE G. REISS ROMOLI

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

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 <input type=“text” size=“30” name=“TxtNome”> type, size, name sono delle proprietà dell’oggetto input SCUOLA SUPERIORE G. REISS ROMOLI

Gli eventi Gli eventi come dice la parola stessa sono “qualcosa che può accadere agli oggetti” come p.es. il click del mouse sull’oggetto oppure il passaggio del mouse sull’area dell’oggetto oppure il caricamento dell’oggetto 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: <input type=“submit” name=“CmdInvia” value=“Invia” onclick=“return ControlloDati();”> Quando si fa click sul pulsante viene richiamata la funzione ControlloDati() SCUOLA SUPERIORE G. REISS ROMOLI

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

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 (l’oggetto 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 quell’oggetto. A questo punto cominceremo ad esaminare l’oggetto che è al top della gerarchia degli oggetti Javascript: l’oggetto window SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto Window L’oggetto 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à dell’oggetto window sono oggetti figli: location memorizza la posizione (URL) che è visualizzata nella finestra; document contiene la pagina Web vera e propria history contiene un elenco delle pagine visitate prima e dopo della pagina attualmente sulla finestra del browser. SCUOLA SUPERIORE G. REISS ROMOLI

Metodi dell’oggetto window Alcuni metodi più usati dell’oggetto window: Esempio: dall’istanza 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 l’istanza 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

Poi nella finestra madre richiamo la funzione aprifin() Notare l’utilizzo dell’ evento onload (su caricamento) del tag body Scrivo il codice all’interno della “finestra figlia” <body onload="aprifin();"> <div align="center"> <br><br><br><br><br><br><br><br><br> decidi il colore di sfondo di questa finestra cliccando sui relativi comandi in quella più piccola! </body> <script language="javascript"> function CambiaColore(mycolore){ document.bgColor=mycolore; } </script> SCUOLA SUPERIORE G. REISS ROMOLI

opener fa riferimento alla finestra che ha aperto quella corrente Tramite opener è possibile far riferimento a variabili, funzioni ed oggetti definiti nella finestra che l’ha creata. <body> <div align="center"> <a href="#" onclick="opener.document.bgColor='#ff0000';">rosso</a> <br> <a href="#" onclick="opener.document.bgColor='green';">verde</a> <a href="#" onclick="opener.document.bgColor='blue';">blu</a> <a href="#" onclick="opener.close();">Chiudi la finestra madre</a> <a href="#" onclick="window.close();">Chiudi la finestra figlia</a> </div> <input type="button" value="Cambia il colore di sfondo" name="btnCambiaColore" onclick="return CambiaColore('red');"> </body> SCUOLA SUPERIORE G. REISS ROMOLI

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

Esercitazione Creare un file HTML che contenga uno script che imposta un timer allo scadere del quale il browser carica un’altra pagina HTML. <HTML> <HEAD> <script language="javascript"> ID=window.setTimeout("Redirect();",3000); function Redirect() { document.open(); document.write("<html>"); document.write("<head>"); document.write("</head>"); document.write("<body>"); document.write("</body>"); document.write("Ciao"); document.write("</html>"); document.close(); } </script> </HEAD> <body> Timer </body> </html> SCUOLA SUPERIORE G. REISS ROMOLI

Note sull’esempio 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

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 all’interno della casella di testo viene espresso tramite document.form1.input1.value <SCRIPT language=“javascript”> 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); } </SCRIPT> SCUOLA SUPERIORE G. REISS ROMOLI

<BODY> <H1>Esempio di contatore</H1> <HR> 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 <FORM NAME="form1"> <INPUT TYPE="text" NAME="input1" SIZE="40"><BR> <INPUT TYPE="button" VALUE="RESET" onClick="counter = 0;"> <INPUT TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);"> </FORM> </BODY> </HTML> 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 SCUOLA SUPERIORE G. REISS ROMOLI

Esercitazione: aggiungere un tasto RESTART per far ripartire il conteggio dopo lo STOP Soluzione: Basta aggiungere la riga di codice <INPUT TYPE="button" VALUE="RESTART" onClick="ID=window.setTimeout('Update();',1000);"> SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto Window: altri metodi L’oggetto 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 l’utente e restituisce il testo immesso SCUOLA SUPERIORE G. REISS ROMOLI

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

Proprietà dell’oggetto window L’oggetto 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

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

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 <HTML> <HEAD><TITLE>Events Example</TITLE> </HEAD> <BODY onLoad="window.alert('La finestra è stata caricata');" onUnload="window.alert('La finestra è stata chiusa');" onFocus="window.alert('La finestra ha il focus');" onBlur="window.alert('La finestra ha perso il focus');"> <H1>Gli eventi dell'oggetto WINDOW</H1> <HR> </BODY> </HTML> SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto Location L’oggetto location è gerarchicamente inferiore all’oggetto 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 un’altra pagina si utilizza la seguente istruzione: window.location.href = " Se desidera caricare un’altra pagina in un frame: parent.frame1.location = " dove frame1 è il nome del frame in questione SCUOLA SUPERIORE G. REISS ROMOLI

Esercitazione Scegliere all’interno di una select box un URL di destinazione tra quelli elencati e far visualizzare la pagina corrispondente tramite l’evento onchange Scriviamo prima la funzione per la redirezione all’URL prescelto <script language=“javascript”> function VaiAUrl(myUrl){ self.location.href=myUrl; window.status=myUrl;} </script> SCUOLA SUPERIORE G. REISS ROMOLI

Poi la parte HTML con il richiamo della funzione <form method=“post” name=“FrmProva” action=“”> select name=“SelUrl” onchange=“VaiAUrl(document.FrmProva.SelUrl.options[document.FrmP rova.SelUrl. selectedIndex].value);”> <option> </option> <option value=“ al sito Netscape</option> <option value=“ al sito Microsoft</option> <option value=“ al sito RAI</option> <option value=“ al sito Macromedia</option> </select> </form> SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto history Anche l’oggetto history è gerarchicamente connesso con l’oggetto 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. L’oggetto history ha una proprietà length che consente di sapere il numero di documenti che sono state visitate. L’oggetto 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

Ed ancora: - history.back() rimanda indietro alla posizione precedente - history.go() rimanda a una ben definita posizione dell’elenco 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

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): <INPUT TYPE="BUTTON”VALUE=”Indietro” onClick="history.go(-1);"> <INPUT TYPE="BUTTON" VALUE=”Avanti” onClick="history.go(1);"> oppure onClick="history.back();"> onClick="history.forward();"> SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto Document Un altro oggetto gerarchicamente dipendente dall’oggetto window è l’oggetto document. Questo oggetto rappresenta il contenuto della pagina Web HTML in corso di elaborazione. Questo oggetto contiene un’ampia varietà di attributi che definiscono le informazioni sulla pagina in corso. Le proprietà dell’oggetto document rappresentano le caratteristiche della pagina HTML in corso. Molte di queste vengono specificate nella tag <BODY> 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 l’utente aveva visualizzato prima dell’attuale pagina, di solito è la pagina con un collegamento alla pagina corrente SCUOLA SUPERIORE G. REISS ROMOLI

Gli oggetti “figli” dell’oggetto 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

I metodi per l’oggetto document L’oggetto 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

L’oggetto FORM L’oggetto form rappresenta un MODULO HTML. Ci possono essere diversi form all’interno 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 dall’oggetto 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

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 l’immissione in un campo Nome function ControllaNome(campo,nomecampo) { var st=campo.value for (var I=0; I<st.length;I++){ var car=st.charAt(I); if ((car<10) && (car >=0)){ alert("Il campo " + nomecampo + " non può contenere caratteri numerici"); campo.focus(); campo.value="" return true; } return false; SCUOLA SUPERIORE G. REISS ROMOLI

} poi una funzione che controlla l’immissione in un campo Telefono function ErrorTel(campo,nomecampo) {var st=campo.value; var car; for (var k=0;k<st.length;k++) { car=st.charAt(k); if ( ((car<'0') || (car>'9')) && ((car != '+') && (car !='/') && (car !='-')) ) { alert("Attenzione: numero di "+nomecampo+" non valido."); campo.focus(); return true; } return false; SCUOLA SUPERIORE G. REISS ROMOLI

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

Di seguito la pagina web contenente la Form dove vengono controllati i dati <FORM name="form1" action="" method="post"> Nome: <INPUT name="txtNome"> <BR> Telefono: <INPUT name="txtTelefono"> <INPUT type="submit" value="Submit" name="submit1" onclick="return CheckInvia();"> <INPUT type="reset" value="Reset" name="reset1"> </FORM> SCUOLA SUPERIORE G. REISS ROMOLI

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

Gli oggetti di tipo INPUT TEXT -Text box <input type=“text” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”> - Hidden text box <input type=“hidden” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”> - Password text box <input type=“password” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”> in javascript: document.form1.TxtNome.value si riferisce al valore SCUOLA SUPERIORE G. REISS ROMOLI

I Pulsanti Pulsante generico (permette di richiamare una funzione sull’evento click) <input type=“button” name=“BtnRestart” value=“Restart” onclick=“return Restart();”> - Pulsante di Submit (invia i dati della form al server) <input type=“submit” name=“BtnInvia” value=“Invia” onclick=£return CheckInvia();”> (Viene prima eseguita la funzione CheckInvia() e poi se questa restituisce true i dati vengono inviati al server) SCUOLA SUPERIORE G. REISS ROMOLI

Altri tipi di Pulsanti: - Pulsante di Reset (Reimposta i dati della form) <input type=“reset” name=“BtnReset” value=“Reimposta”> - Pulsante tipo Image (Invia i dati della form al server ma tramite un’immagine) <input type=“image” name=“BtnImg” src=“miaimg.jpg” onclick=“return CheckInvia();”> SCUOLA SUPERIORE G. REISS ROMOLI

l Radio box Collezione di caselle di opzione mutuamente esclusive. Condividono stesso nome e valore diverso: In HTML: <input type=“radio” name=“Optbox” value=“0”> <input type=“radio” name=“Optbox” value=“1”> 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

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

Scrivo poi il codice HTML della pagina web <body> <div align="center"> <h1>Sondaggio on-line</h1> <hr width="75%"> Chi vincerà il campionato di calcio? <form method="post" name="FrmGov"> <table> <tr><td>1) Roma</td><td><input type="radio" name="gov" value="0"></td></tr> <tr><td>2) Juventus</td><td><input type="radio" name="gov" value="1"></td></tr> <tr><td>3) Milan</td><td><input type="radio" name="gov" value="2"></td></tr> <tr><td>4) Inter</td><td><input type="radio" name="gov" value="3"></td></tr> <tr><td colspan="2" align="right"><input type="image" src="vota_sotto.gif" onclick="return VerificaVoto();"></td></tr> </table> </div><br><br><br> </body> SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto TextArea L’oggetto 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: <textarea name="AreaRisultati" rows="10" cols="50" wrap="soft">Testo inserito</textarea> in Javascript: document.form1.AreaRisultati.value=“XXX” SCUOLA SUPERIORE G. REISS ROMOLI

L’oggetto 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: <INPUT type="checkbox" name="chK1"> in Javascript: if(document.form1.chK1.checked) controlla se la checkbox di nome chK1 è selezionata SCUOLA SUPERIORE G. REISS ROMOLI

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

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

Notare l’uso della funzione EVAL() che permette valutare un’espressione composta composta come un comando Javascript Senza la funzione eval() l’espressione “chK” + I + “.checked” è una stringa e non un booleano quindi IF(….) darebbe errore SCUOLA SUPERIORE G. REISS ROMOLI

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 un’applicazione 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. L’utente 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

Scrivo il codice per il modulo di scelta della merce da acquistare: <form name="FrmFruttarolo" method="post” action=“”> <table border="1"> <tr align="center"><td>Seleziona il frutto che preferisci</td><td>Quantità</td><td>Prezzo per chilogrammo</td><td>Totale</td></tr> <tr align="center"><td> <select name="CmbFrutta" onChange="SelezionaArticolo();"> <option>------</option> <option value="4000">Banane</option> <option value="3000">Mele</option> <option value="3500">Pere</option> <option value="2800">Arance</option> <option value="8000">Meloni</option> <option value="1900">Cocomeri</option> </select> CONTINUA SCUOLA SUPERIORE G. REISS ROMOLI

</td> <td align="center"><input type="text" name="TxtQta" size="15" onkeyup="return CalcolaTotali1(document.FrmFruttarolo.TxtPrzzo.value, document.FrmFruttarolo.TxtQta, document.FrmFruttarolo.TxtTot);"></td> <td> <input type="text" name="TxtPrzzo" size="15" onkeyup="MostraPrezzo();"></td> <td><input type="text" name="TxtTot" size="15" onkeyup="CalcolaTotali2(document.FrmFruttarolo.TxtPrzzo.value, document.FrmFruttarolo.TxtQta, document.FrmFruttarolo.TxtTot);"></td></tr> <tr> </tr> <tr align="center"> <td colspan="2"><input type="button" name="BtnSubmit" value="Acquista");"></td> <td colspan="2"><input type="reset" name="BtnReset" value="Annulla"></td> <tr><td </table> </form> SCUOLA SUPERIORE G. REISS ROMOLI

Scrivo la funzione MostraPrezzo() che per ogni scelta di merce mostra il prezzo al Kg <script language="javascript"> var scelta; var prezzo; function MostraPrezzo() {//mostra il prezzo al kg sull’evento 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 SCUOLA SUPERIORE G. REISS ROMOLI

Scrivo la funzione CalcolaTotali1() che calcola il prezzo totale come prodotto di Quantità x Prezzo Unitario function CalcolaTotali1(prezzo,quantita, arrivo) {//calcola il prezzo totale=Qta*PrUni e viene chiamata //sull’evento 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 SCUOLA SUPERIORE G. REISS ROMOLI

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 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 SCUOLA SUPERIORE G. REISS ROMOLI

Scrivo la funzione VerificaNumeri() che controlla che la quantità scritta dall’utente sia un valore numerico function VerificaNumeri(elem) { var str=elem.value; if (str=="") { //alert("Immissione non valida"); return false; } for (I=0; I<str.length; I++) { if ((str.charAt(I)<'0') || (str.charAt(I)>'9')) { return true; CONTINUA SCUOLA SUPERIORE G. REISS ROMOLI

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 l’utente sceglie un nuovo articolo function SelezionaArticolo() { document.FrmFruttarolo.TxtQta.value=""; document.FrmFruttarolo.TxtTot.value=""; MostraPrezzo(); } </script> SCUOLA SUPERIORE G. REISS ROMOLI

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 all’intewrno dell’array Gli elementi di uno stesso array possono essere anche di tipo diverso e possono essere a loro volta array SCUOLA SUPERIORE G. REISS ROMOLI

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 all’atto della creazione var A=new Array(5,4,8,”Pippo”) Un array è ordinato a partire dall’indice 0 Quindi nell’espressione var A=new Array(5,4,8,”Pippo”) A[0]=5; A[1]=4; A[2]=8; A[3]=“Pippo”; La proprietà length dell’array rappresenta la lunghezza ovvero il numero di elementi dell’array (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

Lettura e scrittura degli elementi di un array Per accedere agli elementi di un array si utilizza l’operatore [ ] 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” 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]) SCUOLA SUPERIORE G. REISS ROMOLI

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 l’ordine 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

Metodo sort(): ordina gli elementi di un array; la chiamata del metodo sort senza argomenti ordina secondo l’ordine 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 l’ultimo valore aggiunto - Il metodo pop() elimina l’ultimo elemento dell’array 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

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

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 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; } SCUOLA SUPERIORE G. REISS ROMOLI

poi la parte HTML dove la funzione viene richiamata <body> <p><img src=”01.jpg" width="500" height="250" alt=" 01.jpg "></p> <p><img src=" 02.jpg " width="400" height="200" alt=" 02.jpg "></p> <form> <center><p><input type="button" value=”Cambia" name="primo" onClick="Cambia()"></p> </center> </form> </body> SCUOLA SUPERIORE G. REISS ROMOLI

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

P. Es il ciclo for..in seguente mostra il nome ed il valore di ciascuna proprietà di un oggetto Applicazione: l’oggetto 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) for (myprop in myobject) { document.write(“nome= “ + myprop + “; valore= “ + myobject[myprop]+ “<br>”) } SCUOLA SUPERIORE G. REISS ROMOLI

Proprietà dell’oggetto navigator Per listare tutte le proprietà utilizziamo il seguente codice: - 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); SCUOLA SUPERIORE G. REISS ROMOLI

Esempio: determiniamo a partire dall’oggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo 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; SCUOLA SUPERIORE G. REISS ROMOLI

La programmazione ad oggetti in javascript - Creazione degli oggetti Un oggetto viene creato attaverso l’operatore new Tale oggetto deve essere seguito dal nome del costruttore che serve ad inizializzare l’oggetto 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 quest’oggetto si possono assegnare le proprietà dinamicamente come vedremo nella prossima slide SCUOLA SUPERIORE G. REISS ROMOLI

Esempio: determiniamo a partire dall’oggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo 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; SCUOLA SUPERIORE G. REISS ROMOLI

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

Accesso alle proprietà degli oggetti: tramite l’operatore “.” Nell’esempio 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 var book=new Object(); Book.titolo=“Introduzione al javascript” Book.capitolo1=new object(); Book.capitolo1.titolo=“Introduzione” Book.capitolo1.pagine=50; SCUOLA SUPERIORE G. REISS ROMOLI

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

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: 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 SCUOLA SUPERIORE G. REISS ROMOLI

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

I Prototype e la simulazione dell’ereditarietà 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 all’interno 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 function Cerchio(raggio) // Cerchio è il costruttore { This.r=raggio; //definisco la proprietà r } Cerchio.prototype.pigreco= //definisco la variabile d’istanza pigreco tramite il suo prototipo; La proprietà pigreco verrà ereditata da tutte le istanze della classe Cerchio SCUOLA SUPERIORE G. REISS ROMOLI

Poi definisco un metodo per il calcolo dell’area Poi definisco un metodo per il calcolo della Circonferenza 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 SCUOLA SUPERIORE G. REISS ROMOLI

A questo punto creo un nuovo oggetto c1 di classe Cerchio e ne calcolo l’area Poi ne calcolo la circonferenza 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 SCUOLA SUPERIORE G. REISS ROMOLI

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 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); SCUOLA SUPERIORE G. REISS ROMOLI

Scuola Superiore G. Reiss Romoli

Presentazioni simili

Presentazione sul tema: "Scuola Superiore G. Reiss Romoli"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

Scuola Superiore G. Reiss Romoli

Presentazioni simili

Presentazione sul tema: "Scuola Superiore G. Reiss Romoli"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back