Javascript Javascript

Presentazione sul tema: "Javascript Javascript"— Transcript della presentazione:

1 Javascript Javascript
Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili Funzioni - Array - Oggetti Predefiniti - Funzionalità matematiche Gestione delle date - Timer - Immagini - Programmazione degli eventi Tecniche di debug - Creazione di classi di oggetti - Gestione degli Errori Espressioni Regolari - Cookie - Link e Bibliografia di Alessandro Marchisio (1ª versione: Novembre 2001, ultimo aggiornamento febbraio 2005)

2 Javascript Pagine Dinamiche
Lato SERVER (CFM,ASP,PHP,JSP,dll,exe,..) Il contenuto della pagina viene elaborato dal Server. Viene trasmesso l'output in HTML Lato CLIENT (Javascript, VBScript, Flash, applet di java,..) Il codice gira sulla macchina locale 2

3 Javascript Caratteristiche
Codice interpretato dal browser ed eseguito riga per riga Codice visibile all'utente e facilmente copiabile Limitate capacità per ragioni di sicurezza 3

4 Javascript Versioni Javascript (Netscape 1996) e Jscript (Microsoft)
DHTML (architettura D.O.M. – Document Object Model di Microsoft) (standard) 4

5 Javascript Come Dove Quando <SCRIPT LANGUAGE="Javascript">
// Il codice Javascript va scritto dentro il tag script. /* E' possibile inserire dei commenti, delle funzioni, impostare comandi diretti e creare nuove variabili Il codice viene interpretato riga per riga */ </SCRIPT> 5

6 Javascript Come Dove Quando
<SCRIPT SRC="NomeFile.js"></SCRIPT> E' possibile richiamare un file esterno, l'estensione è di norma .js, ma può essere qualsiasi. Il file non deve contenere il tag <script>. E' possibile inserire degli script in qualsiasi punto del documento HTML, ricordando però che il codice viene interpretato riga per riga. 6

7 Javascript Come Dove Quando
E' possibile utilizzare qualsiasi editor di testo; normalmente gli editor per file html usano differenti colori per individuare le parti di codice Attenzione a non inserire elementi HTML dentro i tag <script> e </script>. Fa eccezione solo il tag html di commento <!-- --> 7

8 Javascript Come Dove Quando
E' possibile invece inserire dei comandi javascript o richiamare delle funzioni all'interno di codice html (per esempio programmando gli eventi) <input type="button" name="pulsante" value="Cliccami" onclick="alert('ciao')"> 8

9 Javascript Generali: assegnazione
L'operatore di assegnazione è l' uguale (=) elemento = espressione ogni istruzione di assegnazione restituisce il valore dell'espressione calcolata viene valutata l'espressione e assegnata all'elemento msg = "Ciao" alert( a=5 ) //msgbox con la scritta 5 document.location = document.location // refresh della pagina 9

10 Javascript Generali: Case SENSITIVE
Javascript è case sensitive, quindi NumeroGiorni NUMEROGIORNI numerogiorni sono tre variabili assolutamente diverse. Vale per nomi di elementi HTML, funzioni, variabili, ecc. 10

11 Javascript Generali: apici semplici ('') e doppi ("")
Si usano entrambi in modo indifferente, facendo però attenzione: Un apice aperto va chiuso col suo corrispettivo Se uso delle stringhe che a loro volta contengono delle virgolette, queste devono essere precedute da un backslash \" 11

12 Javascript Generali: apici semplici ('') e doppi ("")
<script language="Javascript"> alert('Cosa c\'è che non va?') alert("Cosa c'è che non va?") alert("Cosa c\'è che non va?") //stesso risultato, invece alert('Cosa c'è che non va?') //da errore </script> N.B.: in queste slide uso gli apici "" e '' dove il carattere apice aperto è diverso da quello apice chiuso solo per facilitare la lettura. Scrivendo con qualsiasi editor di testo questa differenza non deve apparire 12

13 Javascript Istruzioni Una solo istruzione per riga alert('Ciao')
07/04/2017 Javascript Istruzioni Una solo istruzione per riga alert('Ciao') Più istruzioni per riga separate da punto e virgola; msg = 'Ciao'; alert(msg); Blocco di istruzioni racchiuso tra parentesi graffe {} if (score == 100) { msg = 'Bravo' alert(msg + ' ' + nome + '\nHai vinto!' ) } Per creare le parentesi graffe premi ALT e ALT+125 ( tastierino numerico) oppure SHIFT+AltGr+[ ] o Shift+ctrl+alt + [ ] 13 Dispense Javascript

14 Javascript Generali: DEBUG
Con Netscape, in caso di errore, si può digitare Javascript: al posto dell'indirizzo Con Explorer, dipende in generale dal tipo di installazione; si può fare doppio click in basso a sinistra. 14

15 Javascript Generali: DEBUG
Da codice: si può di tanto in tanto inserire delle righe tipo alert('Qui: valore=' + valore); da commentare o da spostare a seconda del caso. In questo modo è si tiene facilmente sotto controllo il flusso del programma e le variabili. 15

16 Javascript Generali: DEBUG
Personalmente, in caso di situazioni complesse aggiungo queste poche righe in coda alle pagine: <!-- Debug --> <form name="debug"> DEBUG <textarea name="dbg" cols="20" rows="2"></textarea> <input type="button" value="valuta" onClick="alert(eval(document.debug.dbg.value))"> </form> In questo modo è possibile anche impartire comandi e chiamare funzioni in modo interattivo! 16

17 Javascript Finestre di input-output alert('messaggio')
<script language="Javascript"> alert('Ciao') </script> Questo comando genera una finestra di dialogo con un solo pulsante (OK) alert(messaggio) ritorna il valore undefined 17

18 Javascript Finestre di input-output confirm('messaggio')
07/04/2017 Javascript Finestre di input-output confirm('messaggio') <script language="Javascript"> risposta = confirm('Vuoi continuare') if (risposta) alert('hai premuto OK') else alert('hai premuto Annulla') </script> Questo comando genera una finestra di dialogo con due pulsanti (Ok e Annulla). Questa funzione ritorna un oggetto di tipo boolean: true (tasto OK) o false (tatso Annulla, ESC o x) 18 Dispense Javascript

19 Javascript Finestre di input-output
07/04/2017 Javascript Finestre di input-output prompt('messaggio', 'valore default') <script language="Javascript"> risposta = prompt('Come ti chiami', 'Ale') if (risposta == null) alert('hai premuto Annulla') else alert('Ti chiami ' + risposta) </script> Questa funzione genera una finestra di dialogo con una casella di testo e due pulsanti (Ok e Annulla). Ritorna il valore della casella di testo (variabile di tipo string) o null (object) se si preme Annulla o Esc 19 Dispense Javascript

20 Javascript Finestre di input-output Il metodo window.open
07/04/2017 Javascript Finestre di input-output Il metodo window.open <script language="Javascript"> url=" parametri = "width=250,height=300,top=50,left=140,toolbar" finestra=window.open(url, "nome", parametri) if (confirm('Chiudi?')) finestra.close() </script> Questa funzione crea una nuova finestra browser. E' necessario specificare tre attributi: un indirizzo, un nome (simile al nome di un frame) e una lista di parametri, separati da una virgola. Ritorna un oggetto di classe window. E' scrivibile da codice: finestra.document.write(".....") 20 Dispense Javascript

21 Javascript Finestre di input-output Il metodo window.open
07/04/2017 Javascript Finestre di input-output Il metodo window.open L'indirizzo può essere: relativo ("pagina.htm"), assoluto (" o vuoto ("") Il nome della finestra è indirizzabile con l'attributo target (dei tag <a> e< form>). Non deve contenere spazi o caratteri strani Caratteristiche della nuova finestra (tra parentesi indico i valori di default, se omesse): top (0), left (0), width, height (tuttoschermo); resizable, fullscreen, menubar,toolbar, location, scrollbars, status (no) status location resizable menubar toolbar scrollbars 21 Dispense Javascript

22 Javascript 1 1 1 Algebra Boolena: True table 1 AND OR NOT XOR
07/04/2017 Javascript Algebra Boolena: True table AND OR NOT 1 1 1 Algebra Booleana AND si indica con un * (moltiplicazione) OR si indica con un + o una v NOT si indica con un trattino sopra l'espressione o con ~ XOR si indica con un + cerchiato o una v rovesciata ^ Teorema di De Morgan AB = A + B NOT (a AND b) = NOT(a) AND NOT(b) A+B = A B NOT (a OR b) = NOT(a) * NOT(b) XOR 1 22 Dispense Javascript

23 Javascript Algebra Booleana: proprietà NOT:
07/04/2017 Javascript Algebra Booleana: proprietà NOT: NOT NOT A = A; numero pari di NOT in cascata equivalgono a nessuno NOT NOT NOT A = A; numero dispari di NOT in cascata equivalgono a NOT AND - OR: A OR B OR C OR ... = 1 se almeno uno tra A,B,C,... è = 1 A AND B AND C AND..= 0 se almeno uno tra A,B,C,... è = 0 A AND A = A, A AND B AND B = A AND B A OR A = A, A OR B OR B = A OR B XOR A XOR B XOR B = A (utile nei codici a chiave: b è la chiave, a^b il msg cifrato trasmesso) 23 Dispense Javascript

24 Javascript Istruzioni condizionali if (condizione) {…}
07/04/2017 Javascript Istruzioni condizionali if (condizione) {…} if (condizione) {…} else {…} switch(espressione) { case primocaso: ……; break; case secondocaso: ……; break; case terzo,quarto, quinto: ……; break; default: ……; } (condizione) ? valoreVero : valoreFalso 24 Dispense Javascript

25 Javascript Istruzioni condizionali: switch
07/04/2017 Javascript Istruzioni condizionali: switch Serve per individuare vari casi (confronto di uguaglianza) la parte compresa tra il case e i “:” può essere qualsiasi espressione calcolata. è possibile raggruppare più casi separando le condizioni con una virgola Vengono valutati sequenzialmente tutti i casi finchè non trovo il primo vero. A questo punto viene eseguito tutto il codice fino al primo break o a default: o alla parentesi graffa chiusa relativa allo switch 25 Dispense Javascript

26 maggiore, maggiore uguale
07/04/2017 Javascript Istruzioni condizionali (…segue) condizione è una espressione booleana del tipo minore, minore uguale a < b a <= b maggiore, maggiore uguale a > b a >= b diverso a != b uguale a == b 26 Dispense Javascript

27 Si applica ad un solo elemento
07/04/2017 Javascript Istruzioni condizionali (…segue) Nota: la condizione di uguaglianza si esprime col doppio uguale, per non confonderla con l'istruzione di assegnazione E' possibile utilizzare operatori logici (and, or, not) per indicare condizioni più complesse && AND || OR ! NOT ^ XOR ! Si applica ad un solo elemento !(true) è false 27 Dispense Javascript

28 Javascript Istruzioni condizionali (…segue)
07/04/2017 Javascript Istruzioni condizionali (…segue) il risultato di una condizione è sempre true o false da scrivere senza virgolette. Esempio <script language="Javascript"> a = 10 c1 = (a > 10) // false c2 = (a < 10) // false c3 = (a <= 10) // true alert(c1 || c3); alert(c2 && c3); alert(!c3) //true,false,false </script> 28 Dispense Javascript

29 Javascript Istruzioni condizionali (…segue) operatori === e !==
07/04/2017 Javascript Istruzioni condizionali (…segue) operatori === e !== Tre uguali di seguito verificano l'uguaglianza anche del tipo (di solito l'uguaglianza con i due uguali è testata applicando il metodo valueOf() ai due oggetti. 100 == "100" //true 100 === "100" //false 200 != "200" //false 200 !== "200" //true 29 Dispense Javascript

30 Javascript Istruzioni condizionali: operatore ?
07/04/2017 Javascript Istruzioni condizionali: operatore ? permette di scrivere del codice in modo compatto si chiama anche operatore ternario, in quanto si compone di tre elementi: domanda ? se vero : se falso <script language="Javascript"> m = "Benvenut" + (sesso == 'M' ? "o": "a") alert(m) //usato per individuare il browser utilizzato IE = document.all ? 1:0; NN = document.layers? 1:0; </script> 30 Dispense Javascript

31 Javascript Operazioni a livello di bit Shift a destra Shift a sinistra
07/04/2017 Javascript Operazioni a livello di bit Shift a destra Shift a sinistra AND OR 31 Dispense Javascript

32 Javascript Istruzioni di ciclo: for esistono due sintassi diverse:
07/04/2017 Javascript Istruzioni di ciclo: for esistono due sintassi diverse: - for (inizio; condizione; incremento) istruzione o blocco {} - for ( indice in oggetto ) istruzione o blocco {}, { utilizzare oggetto[indice]} 32 Dispense Javascript

33 Javascript Istruzioni di ciclo: for (inizio; condizione; incremento )
07/04/2017 Javascript Istruzioni di ciclo: for (inizio; condizione; incremento ) {blocco istruzioni} istruzione seguente; inizio e incremento possono contenere più istruzioni separate da virgola. cicla finchè la condizione risulta vera inizio condizione {blocco} TRUE incremento FALSE Istruzione seguente 33 Dispense Javascript

34 Javascript Istruzioni di ciclo:
07/04/2017 Javascript Istruzioni di ciclo: esistono altri due costrutti più limitati while (condizione) {blocco istruz.} esegue il blocco finchè la condizione è vera. do {blocco istruz.} while (condizione) esegue il blocco almeno una volta e continua finchè la condizione è vera. 34 Dispense Javascript

35 Javascript Istruzioni di ciclo: break e continue
07/04/2017 Javascript Istruzioni di ciclo: break e continue è possibile variare l'esecuzione del blocco di istruzioni di un ciclo for o while: break; sposta l'esecuzione del programma dopo la parentesi graffa relativa al ciclo corrente continue; sposta l'esecuzione del programma tornando alla prima istruzione del blocco corrente Nota: è anche possibile, per aumentare la leggibilità del codice, etichettare un'istruzione con una label (NomeLabel seguita da :) e specificare la label dopo il break e il continue. 35 Dispense Javascript

36 Javascript Istruzioni di ciclo: for ( indice in oggetto)
07/04/2017 Javascript Istruzioni di ciclo: for ( indice in oggetto) In Javascript, come in altri linguaggi ad oggetti, esistono dei costrutti per poter scorrere delle "collezioni". Ad esempio posso individuare tutte le proprietà di un oggetto. <script language="Javascript"> o = navigator; //oggetto che descrive il browser k = ''; for (ii in o) k += '\n'+ii+':'+o[ii] alert(k) </script> 36 Dispense Javascript

37 Javascript Dati e variabili: stringhe e numeri
07/04/2017 Javascript Dati e variabili: stringhe e numeri In Javascript, a differnza di altri linguaggi, non è necessario dichiarare le variabili Il tipo di variabile viene deciso alla prima assegnazione a = 'ciao' // sarà un oggetto string a = // sarà un oggetto number (Int) a = // sarà un oggetto number (Float) a = 010 // sarà un number (in ottale, =8) a = 0xff // sarà un number (in esadecimale) 37 Dispense Javascript

38 Javascript Dati e variabili: interi e decimali
07/04/2017 Javascript Dati e variabili: interi e decimali Il tipo della variabile viene gestito in modo automatico o trasparente. E' possibile forzare alcune conversioni usando alcune funzioni predefinite: Number(), parseInt() e parseFloat(). Con parseInt è possibile anche usare una base diversa da quella decimale. Il metodo toString(base) converte un numero decimale in un numero con un'altra base, (default=10) restituisce una stringa. a = '30 giorni'; alert(parseInt(a)) /* darà 30, Number(a) darà "NaN" (not a number) */ a = 'ff' ; alert(parseInt(a,16)) // darà 255 a=255; alert(a.toString(16)) // dara ff 38 Dispense Javascript

39 Javascript Dati e variabili: decimali
07/04/2017 Javascript Dati e variabili: decimali Attenzione: conversioni con date e ore… parseInt('08'); parseInt('09') // restituiscono 0 !!! Di default un numero che inizia con 0 è considerato espresso in ottale! Utiliz parseInt('08',10) parseFloat permette di operare con numeri con decimali. In javascript è il punto ‘.’ il separatore tra parte intera e parte decimale. a = "10.44"; alert(parseFloat(a))// darà 10.44 a = "10,44"; alert(parseFloat(a))// darà 10 39 Dispense Javascript

40 Javascript Dati e variabili: boolean var flag = new Boolean( x )
07/04/2017 Javascript Dati e variabili: boolean var flag = new Boolean( x ) Una variabile di tipo booleano (o logico) può assumere solo 2 valori: true o false se x è vuoto, 0, NaN, null, "", undefined > flag è false; flag è true in tutti gli altri casi Un oggetto può essere confrontato con un altro oggetto o con undefined f = window; if (f) alert() //finestra di dialogo f = undefined; if (f) alert() //undefined ma f==true, f==false sempre falsi! 40 Dispense Javascript

41 Javascript Dati e variabili: typeof
07/04/2017 Javascript Dati e variabili: typeof L'operatore typeof permette di distinguere tra string, number, boolean, object, function e undefined Esempi: a = "10.44"; z = document; if (typeof z == 'object') alert('z è un oggetto') if (typeof a == 'number') alert('a è un numero') Casi particolari: window.sfondo == null //true String(window.sfondo) == "undefined" //true window.sfondo == "undefined" //false (ptr !=stringa) 41 Dispense Javascript

42 Javascript Dati e variabili: valori 'speciali'
07/04/2017 Javascript Dati e variabili: valori 'speciali' null è il valore nullo per eccellenza, considerato un oggetto (type null == object) undefined è il valore di un elemento dichiarato, ma non ancora utilizzato oppure il valore di una proprietà non esistente (es: window.sfondo) (type undefined == undefined) NaN, Infinity sono numeri speciali. 3/0 == Infinity; Infinity - Infinity == NaN Caratteri speciali (per variabili stringa) Sono caratteri precedeuti da uno slash (\) (es: \n per andare a capo; \t per tab; ecc.) alert('prima \triga\tok\nSeconda \t\'riga\'\t--') 42 Dispense Javascript

43 Javascript Dati e variabili: l'oggetto Array
07/04/2017 Javascript Dati e variabili: l'oggetto Array Un vettore è una lista numerate di oggetti. La numerazione va sempre da 0 a vettore.length - 1 Non è necessario specificare prima la lunghezza del vettore. Si dichiarano col costrutto new Array, si indicano scrivendo l'indice tra parentesi quadre []. giorni = new Array(); giorni = new Array('Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom') giorni[3] ='Gio‘ stampando un array non associativo, si ottiene una lista di tutti i valori separata da virgola; se ci sono elementi null o undefined ci sono due virgole. document.write(giorni) //Lun,Mar,Mer,Gio,Ven,Sab,Dom 43 Dispense Javascript

44 Javascript Dati e variabili: Array Associativi
07/04/2017 Javascript Dati e variabili: Array Associativi E' possibile utilizzare i vettori associativi, cioè si usa come stringa un nome al posto di un numero giorni["pasqua"] = "domenica" I vettori associativi non influenzano la proprietà length, che vale sempre max indice definito + 1 Per un array associativo length vale sempre 0, per scorrerlo devo usare il costrutto for (p in arrayAssoc) alert(p+':'+arrayAssoc[p]) 44 Dispense Javascript

45 Javascript Dati e variabili: l'oggetto Array
07/04/2017 Javascript Dati e variabili: l'oggetto Array In javascript molti elementi sono organizzati in strutture a vettore, per esempio i link, le immagini, le opzioni di una casella combinata. sintassi: nomeArray[indice] indica il singolo oggetto nomeArray.length indica il numero degli oggetti ogni oggetto può avere le sue proprietà. Es.: document.f1.combo.options[3].text = 'abc', document.f1.combo.options[3].value = 10 alert(document.f1.combo.options.length) 45 Dispense Javascript

46 Javascript metodo sort( fz ) dell'oggetto Array
07/04/2017 Javascript metodo sort( fz ) dell'oggetto Array E' possibile specificare una funzione ad hoc per ordinare un array. Questa funzione deve ricevere 2 parametri e ritornare 0 se i 2 elementi sono uguali 1 se il primo è maggiore del secondo -1 se il primo è minore del secondo Se non specifico nulla, si considera Ascii ascendente x = "5,7,9,6,45,1,5,6,6".split(",") function numberAsc(a,b){ return (a==b)? 0: (parseFloat(a) < parseFloat(b))? -1:1 } function numberDesc(a,b){ return (a==b)? 0: (parseFloat(a) > parseFloat(b))? -1:1} alert(x.sort()+"\n" + x.sort(numberAsc) + "\n" + x.sort( numberDesc )) 46 Dispense Javascript

47 Javascript Implementazione di matrici n-dimensionali
07/04/2017 Javascript Implementazione di matrici n-dimensionali Per ottenere una matrice m axb è possibile definire un oggetto come new Array() e successivamente definire a oggetti di m come new array. var m = new Array(); for (var i=0; i <a; i++) { m[i] = new Array() } // m[2][0] = "xxxx" 47 Dispense Javascript

48 Javascript Implementazione di matrici n-dimensionali
07/04/2017 Javascript Implementazione di matrici n-dimensionali Lo stesso procedimento può essere reiterato varie volte ottenendo matrici n-dimensionali. function Matrix( dimensione ) { var argc = Matrix.arguments.length var argv = Matrix.arguments this.dim = new Array(); this.ndim = dimensione; for (var i=0; i < dimensione; i++) this.dim[i] = (argc > i) ? argv[i+1] : 1 recursiveArray(this, dimensione, this.dim) } function recursiveArray( arr, dimensione, vettDim ) { var vDim = new Array(); //vDim serve per propagare l'info sulle dimensioni for (var j = 0; j < dimensione-1; j++) vDim[j] = vettDim[j+1] var mioArray = arr //fondamentale il var !! for (var j = 0; j < vettDim[0]; j++) if (dimensione == 1) mioArray[j] = "" else {mioArray[j] = new Array() recursiveArray(mioArray[j], dimensione-1, vDim) } } 48 Dispense Javascript

49 Javascript VBa = new VBArray(visualBasicArray )
07/04/2017 Javascript VBa = new VBArray(visualBasicArray ) non è possibile creare da js un VBArray, ma ci si può interfacciare ad oggetti ottenuti da activex (es: recordset.getRows()...) VBa.dimensions() //restituisce il numero di dimensioni (>1) VBa.lbound( dimensione ), VBa.ubound( dimensione ) restituiscono il piu basso e il piu alto indice in quella dimensione VBa.getItem( d1,d2,.... ) restituisce l'elemento (d1,d2,..) VBa.toArray() converte in un array monodim 49 Dispense Javascript

50 Javascript Funzioni e riusabilità del codice
07/04/2017 Javascript Funzioni e riusabilità del codice un blocco di istruzioni in sequenza può essere 'riassunto' in una funzione ogni volta che voglio eseguire quel blocco di istruzioni basterà chiamare la funzione (cioè scrivo il nome della funzione con le parentesi tonde "( )" function saluto() { adesso = new Date() if (adesso.getHours() <= 12) alert('Buona mattinata') else alert('Buon pomeriggio') } saluto() // chiamo la funzione scritta sopra 50 Dispense Javascript

51 …e per chiamarla: nomeDellaFunzione()
07/04/2017 Javascript Funzioni e riusabilità del codice Quindi per fare una funzione basta: scrivere function scegliere il nome della funzione aggiungere le parentesi tonde ( ) aprire la parentesi graffa { scrivere il codice che serve chiudere la parentesi graffa } function pippo() { msg = 'Ciao da Pippo' alert(msg) } …e per chiamarla: nomeDellaFunzione() pippo() 51 Dispense Javascript

52 Javascript Funzioni e Procedure Sono quasi sinonimi
07/04/2017 Javascript Funzioni e Procedure Sono quasi sinonimi Tecnicamente, una funzione ritorna un valore, una procedura non ritorna nulla. (linguaggio Pascal) Una funzione (o procedura) può contenere il comando return; return; //esce dalla funzione e non ritorna nulla return valore; /* ritorna valore. Si può scrivere anche (valore) tra parentesi */ 52 Dispense Javascript

53 Javascript Funzioni: passaggio parametri
07/04/2017 Javascript Funzioni: passaggio parametri Aumenta la riusabilità del codice Aumenta la leggibilità del programma Tra parentesi tonde possiamo nominare i parametri di cui abbiamo bisogno. A differenza di altri linguaggi, non è necessario dichiarare il tipo (intero, stringa, booleano, oggetto, ecc.) di parametri, né il tipo di risultato della funzione. 53 Dispense Javascript

54 Javascript Funzioni: dal particolare al generale msg = "Benvenuto"
07/04/2017 Javascript Funzioni: dal particolare al generale msg = "Benvenuto" document.write("<table border=1>") document.write("<tr>") document.write("<td>") document.write(msg) document.write("</td>") document.write("</tr>") document.write("</table>") function scriviCornice( msg ) { document.write("<table border=1>") document.write("<tr>") document.write("<td>") document.write(msg) document.write("</td>") document.write("</tr>") document.write("</table>") } … scriviCornice("Benvenuto") 54 Dispense Javascript

55 Javascript Funzioni: parametri byRef e byValue
07/04/2017 Javascript Funzioni: parametri byRef e byValue Parametri semplici (numerici, date) vengono passati per valore (copia). Per gli oggetti egli array viene passato il relativo puntatore (by reference) quindi modifiche a proprietà dell'oggetto o a elementi dell'array persistono all'uscita dalla funzione. Copia Passaggio funz() Compared (==) Number By value By value By value Boolean By value By value By value String Immutable (by reference) Immutable (by reference) By value Object By reference (assign) By reference By reference Array By reference (assign) By reference By reference Function Immutable (by reference) Immutable (by reference) By reference 55 Dispense Javascript

56 Javascript Funzioni: passaggio parametri - esempio
07/04/2017 Javascript Funzioni: passaggio parametri - esempio <script language="Javascript"> /* questa funzione riceve 2 parametri: combo è un oggetto select testoDaAggiungere è una stringa Nota:funziona solo su Explorer. */ function aggiungiOpzione(combo, testoDaAggiungere) { opz = document.createElement("OPTION") opz.text = testoDaAggiungere combo.options.add(opz) } </script> 56 Dispense Javascript

57 Javascript Funzioni: passaggio parametri - esempio cont.
07/04/2017 Javascript Funzioni: passaggio parametri - esempio cont. <!-- il codice della diapositiva precedente può essere utilizzato con questo form --> <form name="scheda"> <select name="scelta"></select> <input type="text" name="testo"> <input type="button" value="add" onclick="aggiungiOpzione(scelta,testo.value)"> </form> In questo caso funziona perché c'è un solo form, meglio comunque usare la sintassi completa: document.scheda.scelta,document.scheda.testo.value 57 Dispense Javascript

58 Javascript Funzioni: passaggio parametri variabile
07/04/2017 Javascript Funzioni: passaggio parametri variabile Può essere utile creare delle funzioni che ricevano un numero variabile di parametri Si usa la collezione arguments: quindi nomefz.arguments.length sarà il numero dei parametri. 58 Dispense Javascript

59 Javascript L'oggetto window
07/04/2017 Javascript L'oggetto window E' l'oggetto per eccellenza, cioè la finestra del browser. Contiene sempre un oggetto di tipo document (che a sua volta può essere diviso in vari frames!) Ha proprietà, metodi, collezioni di oggetti ed eventi. Uno dei metodi più utilizzati è l' open(); un altro metodo interessante (non disponibile su browser vecchi) è scroll() Il metodo focus() rende attiva la finestra <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 59 Dispense Javascript

60 Javascript Il metodo window.open( )
07/04/2017 Javascript Il metodo window.open( ) nf = window.open( url, nomef, opzioni) Ha tre parametri, separati da virgola: url : indirizzo (location) della pagina nomef: nome della finestra (equivale a nf, ma va tra "") opzioni: lista di opzioni separate da , il tutto tra "" Restituisce un (puntatore a un) oggetto finestra. E' possibile specificare un url vuoto "" e creare dinamicamente la pagina con document.write <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 60 Dispense Javascript

61 Javascript Il metodo window.open( ) esempio
<script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> 07/04/2017 Javascript Alessandro Marchisio: alwaysLowered yes/no or 1/0 xalwaysRaised xdependent xdirectories Displays the directory buttons height pixel size Height of the window hotkeys xinnerHeight (replaces height) xinnerWidth (replaces width) xlocation Displays the address bar menubar Displays the menubar outerHeight xouterWidth xresizable Allows window resizing scrollbars Displays the window scrollbars screenX position in pixels The horizontal position that the window will open on (starting from the left of the screen) xscreenY The vertical position that the window will open on (starting from the top of the screen) xstatus Displays the status bar (found at the bottom) titlebar xtoolbar Displays the toolbar width Width of the window z-lock Il metodo window.open( ) esempio url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica <script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> //parametri…. toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 61 Dispense Javascript

62 Javascript Metodi scroll e scrollTo della window
<script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> 07/04/2017 Javascript Metodi scroll e scrollTo della window window.scroll(x, y) simula l'azione delle barre di scorrimento orizzontali (x) e verticali (y) Le due coordinate si riferiscono alla porzione di frame visualizzata in alto a desto Se il frame è già completamente visibile non cambia nulla Esistono due varianti scrollTo(x,y) identico a scroll e scrollBy(dx,dy) che lavora in coordinate relative <script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> //parametri…. toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 62 Dispense Javascript

63 Javascript Metodi moveTo e resizeTo della window
<script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> 07/04/2017 Javascript Metodi moveTo e resizeTo della window window.resizeTo(lx,ly) modifica le dimensioni della finestra corrente window.moveTo(left,top) permette di modificare la posizione della finestra sullo schermo <script language="javascript"> //Apre la finestra a tutto schermo self.moveTo(0,0); self.resizeTo(screen.width,screen.height); </script> <script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> //parametri…. toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 63 Dispense Javascript

64 <script language="JavaScript" >
url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> 07/04/2017 Javascript Metodi moveTo e resizeTo della window window.screenTop e window.screenLeft indicano la posizione assoluta su tutto lo schermo document.body.clientWidth e document.body.clientHeight indicano lunghezza e altezza in pixel di tutta la pagina Su netscape window.innerHeight e window.innerWidth indicano lunghezza e altezza del documento presente nella finestra <script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> //parametri…. toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 64 Dispense Javascript

65 Javascript L'oggetto Window (Explorer) OGGETTI (figli) clipboardData
07/04/2017 Javascript L'oggetto Window (Explorer) OGGETTI (figli) clipboardData document event frames history Image opener Option parent screen self top window PROPRIETA clientInformation closed defaultStatus external history length location name navigator offscreenBuffering screenLeft screenTop status EVENTI onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhelp onload onresize onscroll onunload 65 Dispense Javascript

66 Javascript L'oggetto document.
07/04/2017 Javascript L'oggetto document. Rappresenta il foglio HTML che sarà rappresentato dal browser Ha varie proprietà, accessibili da codice, alcune di sola lettura (es.: lastModified), altre modificabili dinamicamente (es.: location, bgColor, ecc.) Ha eventi (onclick, onload, ecc.) e metodi (write, createElement, ecc.) 66 Dispense Javascript

67 Javascript Il metodo document.write( )
07/04/2017 Javascript Il metodo document.write( ) Permette di creare dei documenti dinamici, facendo lavorare il browser (es: doc. maschile o femminile, creazione di pagine personalizzate con nome utente) Può essere usato insieme al normale HTML, purchè racchiuso tra <script> e </script> NON funziona una volta che il documento è interamente caricato e presentato a video (quindi non ha senso richiamare document.write() da un evento!) 67 Dispense Javascript

68 Javascript Il metodo document.write( )
07/04/2017 Javascript Il metodo document.write( ) Può essere felicemente impiegato in tutti i casi di pagine cariche di elementi ridondanti (es: una matrice sparsa) Rende le pagine più leggere (tre righe di codice possono creare centinaia di celle, opzioni, link, ecc.) Blocchi di codice HTML possono essere facilmente inglobati in una funzione e facilmente riutilizzati. Il metodo write viene utilizzato solo mentre la pagina viene creata, per modificare successivamente delle parti si utilizza la proprietà del body innerHTML <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') } document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 68 Dispense Javascript

69 Javascript L'oggetto document (Explorer) OGGETTI (figli) activeElement
07/04/2017 Javascript OGGETTI (figli) activeElement all anchors applets body childNodes documentElement embeds forms frames images links parentWindow plugins scripts selection styleSheets L'oggetto document (Explorer) EVENTI onafterupdate onbeforeeditfocus onbeforeupdate oncellchange onclick oncontextmenu ondataavailable ondatasetchanged ondatasetcomplete ondblclick ondragstart onerrorupdate onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onpropertychange onreadystatechange onrowenter onrowexit onrowsdelete onrowsinserted onselectstart onstop PROPRIETA alinkColor bgColor cookie defaultCharset dir domain fgColor fileCreatedDate fileModifiedDate fileUpdatedDate lastModified linkColor location mimeType nameProp protocol readyState referrer security title URL vlinkColor fileSize <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') } document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 69 Dispense Javascript

70 Javascript La collezione document.all (Explorer) DHTML
07/04/2017 Javascript La collezione document.all (Explorer) DHTML Contiene tutti gli oggetti contrassegnati da un ID E' possibile modificare qualsiasi proprietà di qualsiasi oggetto. E' possibile programmare qualsiasi evento di qualsiasi oggetto. <p id="scritta">Ciao</p> <script> document.all.scritta.innerHTML = '<b>Buongiorno</b>' document.all.scritta.style.position = 'absolute' document.all.scritta.style.left = '300px' document.all.scritta.onmouseover = function () {...} document.all.scritta.onclick = nomefz //definire prima function nomefz() document.all.scritta.onclick = function () {alert(this.id)} //in questo caso il this si riferisce all'oggetto scritta) </script> <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') } document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 70 Dispense Javascript

71 Javascript Le tabelle in DHTML
07/04/2017 Javascript Le tabelle in DHTML L'array cells contiene tutte le celle,in ordine di creazione La collezione rows contiene tutte le righe (tr) è possibile cambiare dinamicamente tutti gli attributi di ogni singola cela. TR.deleteCell(index) TR.insertCell(index o -1) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') } document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> <script> </script> 71 Dispense Javascript

72 (attenzione a quale oggetto ha il fuoco)
07/04/2017 Javascript document.selection (IE) type, typeDetail, clear(), empty(), createRange() si attiva sull'evento onselect di qualsiasi oggetto metodo createRange() restituisce un oggetto con queste proprietà: text, htmlText, offsetLeft, boundingLeft, offsetTop, boundingTop boundingWidth, boundingHeight document.selection.createRange().text è modificabile! (attenzione a quale oggetto ha il fuoco) duplicate() execCommand() expand() move() moveEnd() moveStart() inRange() isEqual() <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') } document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 72 Dispense Javascript

73 Javascript L'oggetto screen Indica lo schermo dell'utente
<script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> 07/04/2017 Javascript L'oggetto screen Indica lo schermo dell'utente Ha le seguenti proprietà: height e width, colorDepth, availHeight, availWidth, pixelDepth Permette di individuare la risoluzione del video, la profondità di colore, ecc. (es.: 800x600, 24 bit di colore, ecc.) <script language="javascript"> alert('Risoluzione Video:'+screen.width+'x'+screen.height) </script> <script language="JavaScript" > url = " nomef = "finestraVirgilio" opzioni = "toolbar='yes',location='yes',resizable='yes'," opzioni+= "width=300,height=200" nf = window.open( url, nomef, opzioni) //Questo apre una nuova finestra sul portale Virgilio nf1 = window.open("", "f1",opzioni) nf1.document.write("Pagina Nuova…") nf1.document.writeln("") //altra finestra ma dinamica </script> //parametri…. toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels 73 Dispense Javascript

74 Javascript L'oggetto opener
07/04/2017 Javascript L'oggetto opener Se dalla pagina PRINCIPALE apro una pagina (con il metodo window.open) APPROFONDIMENTO, quest'ultima può accedere alla pagina PRINCIPALE utilizzado l'oggetto opener che è di tipo finestra <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 74 Dispense Javascript

75 Javascript L'oggetto form
07/04/2017 Javascript L'oggetto form In HTML esistono degli elementi particolari che permettono un certo tipo di interazione con l'utente ( pulsanti, campi di testo, checkbox, combo, ecc.) Questi elementi possono/devono essere racchiusi in un form (devono per essere inviati al server, es: cfm, asp, ecc…!) Ogni pagina può contenere più di un form. document.forms.length //indica il numero di forms presenti nella pagina <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 75 Dispense Javascript

76 Javascript L'oggetto form visto da Javascript
07/04/2017 Javascript L'oggetto form visto da Javascript Ogni form contenuto in una pagina avrà quindi un indice e può avere un nome. <form name="primoForm"> ….</form> <form name="altroForm"> Posso riferirmi al form primoForm con una di queste tre sintassi: document.forms[0]; document.primoForm; document.forms["primoForm"]; <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 76 Dispense Javascript

77 Javascript Gli oggetti elements interni al form
07/04/2017 Javascript Gli oggetti elements interni al form Ogni oggetto contenuto in una pagina avrà un indice e può avere un nome (confronta il 1° punto della slide precedente…) Ogni oggetto fa parte della collezione (=vettore) elements, quindi scrivendo <form name="primoForm"> <input type="text" name="testo"> </form> avremo document.primoForm.testo //sintassi consigliata; document.primoForm.elements[0]; document.forms[0].elements[0] <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 77 Dispense Javascript

78 Javascript Le caselle di testo
07/04/2017 Javascript Le caselle di testo Ci sono due elementi che possono contenere del testo inserito dall'utente: <input type="text"> e <textarea>. Hanno una sintassi molto diversa in HTML Per entrambi la proprietà value rappresenta il testo scritto dall'utente. E' una proprietà accessibile in lettura e in scrittura. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 78 Dispense Javascript

79 Javascript Le caselle di testo
07/04/2017 Javascript Le caselle di testo <input type="TEXT" name="nnn" value="default" size=10> name: nome dell'oggetto value: contenuto della casella di testo size: lunghezza della cella (numero di caratteri) <textarea name="nnn" cols=30 rows=12 wrap="hard">TESTO INIZIALE</textarea> name: nome dell'oggetto cols, rows: righe e colonne (num. caratteri) wrap: presenza o meno della scrollbar oriz. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 79 Dispense Javascript

80 Javascript Le combo e le liste
07/04/2017 Javascript Le combo e le liste In HTML esiste l'oggetto <SELECT> che serve sia per le combo che per le liste. Le liste hanno in più l'attributo size che indica la lunghezza della lista Le liste possono essere a selezione multipla, basta aggiungere l'attribute multiple (si usa il tasto CTRL+Click del mouse) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 80 Dispense Javascript

81 Javascript Le combo e le liste: le options
07/04/2017 Javascript Le combo e le liste: le options L'oggetto <SELECT> ha al suo interno una collezione (= un vettore) di altri oggetti: le options Ogni riga sia di una combo che di una lista è in realtà un oggetto di tipo option Questi oggetti hanno tre proprietà importanti, accessibili in lettura e scrittura: text: testo visibile value: valore passato al server selected: indica se l'opzione è evidenziata <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 81 Dispense Javascript

82 I value non vengono visualizzati
07/04/2017 Javascript Le combo e le liste: anatomia di una select size="5" crea una lista "alta" 5 elementi. nell'esempio abbiamo 7 opzioni, quindi comparirà la barra di scorrimento. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> Nella definizione della 1ª, 4ª e 5ª opzione è stata inserita la parola selected. Il browser le mostrerà evidenziate I value non vengono visualizzati 82 Dispense Javascript

83 document.f.lista.options[3].text = 'Giovanni'
07/04/2017 Javascript Le combo e le liste: accesso da script Con l'ausilio di javascript è possibile spostare elementi da una lista ad un'altra, aggiungere opzioni, cancellarne o cambiarne l'ordine. L'accesso a questi elementi segue il modello ad oggetti: l'oggetto select conterrà il vettore di opzioni. Per inserimento e cancellazioni di opzioni, vi sono differenze significative tra Netscape ed Explorer. document.f.lista.options[3].text = 'Giovanni' <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 83 Dispense Javascript

84 Javascript Inserimento e cancellazione opzioni
07/04/2017 Javascript Inserimento e cancellazione opzioni Il metodo add riceve come parametro un (puntatore ad un) oggetto di tipo Option. La nuova opzione viene normalmente accodata. E' possibile specificare la posizone (ricordando che il primo elemento ha indice 0) nuovaOpzione = document.createElement('OPTION'); nuovaOpzione.text = "Angela" nuovaOpzione.value = "A43" document.f.lista.add(nuovaOpzione,2) //inserito in 3ª pos. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 84 Dispense Javascript

85 Javascript Inserimento e cancellazione opzioni
07/04/2017 Javascript Inserimento e cancellazione opzioni il metodo remove(indice) riceve la posizione dell'elemento che si vuole eliminare. Gli altri elementi sottostanti avanzano di una posizione mantenendo tutte le loro proprietà document.f.lista.remove(2) //elimina il 3° elemento <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 85 Dispense Javascript

86 Javascript Convalida di dati (onSubmit)
07/04/2017 Javascript Convalida di dati (onSubmit) è possibile inibire la trasmissione dei dati (via get o post) alla pagina specificata nell'attributo action utiolizzando l'evento onSubmit <form name="f" method="..." action= "..." onSubmit="return controlla()"> Se la funzione controlla ritorna il valore false, il form non viene inviato E' possibile utilizzare questa caratteristica per scrivere programmi di convalida dati lato client. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> Un'altra possibilità consiste nel gestire l'evento onclick allo stesso modo, sia per pulsanti di tipo submit che per link <a href="delete.cfm?id=10" onclick="return confirm('Sei sicuro?')">canc</a> 86 Dispense Javascript

87 Javascript I frames in HTML
Alessandro Marchisio: 07/04/2017 Javascript I frames in HTML L'HTML prevede che si possa sezionare la pagina in varie sottopagine, un po' come una tabella è suddivisa in varie celle. I frames non vengono più molto usati nei siti professionali, tuttavia una tecnica ancora molto usata per elaborazioni complesse è il frame nascosto (frame di altezza e largh=0). Volendo usare i frames occorre creare una pagina HTML apposita che descriverà la struttura e le proprietà dei vari frames. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 87 Dispense Javascript

88 Javascript I frames visti da Javascript
07/04/2017 Javascript I frames visti da Javascript Indipendentemente da annidamenti presenti in html, Javascript vede una collezione di frames, dipendenti dalla pagina (document) che contiene la struttura. In pratica tutti i frames dichiarati vengono memorizzati nella collezione frames document.frames.length //numero di frame document.frames[0] //oggetto window relativo al primo //frame dichiarato. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 88 Dispense Javascript

89 Javascript Relazioni di parentela tra frames
07/04/2017 Javascript Relazioni di parentela tra frames Quando uso una pagina divisa in frames, questi vengono considerati figli della pagina che descrive la struttura (frameset,frame) È possibile modificare qualsiasi valore di un frame fratello, passando dal frame genitore (parent). Gli oggetti frames sono oggetti di tipo window parent.frames[0].document.bgColor = 'red' // Cambierà il colore del primo frame <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 89 Dispense Javascript

90 Javascript Frames tra HTML e Javascript
07/04/2017 Javascript Frames tra HTML e Javascript Nella pagina che descrive la struttura ogni frame è caratterizzato da due proprietà <frame name="sinistra" src="a.htm"> In Javascript su può utilizzare questo nome parent.frames[0] .document.bgColor = 'red' parent.sinistra.document.bgColor = 'red' parent.frames["sinistra"].document.bgColor = 'red' Per cambiare l'indirizzo a cui punta la pag. si usa la proprietà location del document parent.frames[0].document.location = 'b.htm' <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 90 Dispense Javascript

91 Javascript Timer setTimeout(espressione, quando)
07/04/2017 Javascript Timer setTimeout(espressione, quando) funziona una volta sola idTimer = setInterval(espressione,quando) funziona ciclicamente. Per interrompere il ciclo si usa clearInterval(idTimer) Il tempo (quando) va espresso in millisec. L'espressione può essere il nome di una funzione tra virgolette o qualsiasi comando javascript. setTimeout(function() {alert()},5000) setTimeout(alert,5000) setTimeout("alert()",5000) Nota: sia SetTimout che setInterval ritornano un numero che può essere usato da clearInterval <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 91 Dispense Javascript

92 Javascript Timer - Esempio Il titolo continua ad aggiornarsi! 92
07/04/2017 Javascript Timer - Esempio <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> Il titolo continua ad aggiornarsi! 92 Dispense Javascript

93 Javascript Le immagini
07/04/2017 Javascript Le immagini Ogni immagine in html è definita dal tag <img> Principali proprietà delle immagini sono: - src : indirizzo dell'immagine - width : larghezza - height : altezza - alt: testo che appare passando col mouse Impostando solo una dimensione, vengono mantenute le proporzioni. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 93 Dispense Javascript

94 Javascript Le immagini in Javascript
Alessandro Marchisio: 07/04/2017 Javascript Le immagini in Javascript Tutte le immagini presenti nella pagina fanno parte della collezione images E' possibile assegnare un nome ad ogni immagine (nel tag <img name="xxx" src=..>) E' possibile modificare le principali proprietà da codice. (con explorer tutte, con Netscape e altri browser solo alcune) document.images[0].src = 'abc.jpg' document.images[0].alt = 'ok' <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 94 Dispense Javascript

95 Javascript I link in Javascript
Alessandro Marchisio: 07/04/2017 Javascript I link in Javascript I link sono anch'essi memorizzati in un vettore document.links Ogni link ha varie proprietà modificabili da codice (href, target sono accessibili anche con Netscape) Ogni link può essere sensibile a vari eventi (onclick, onmouseover,onmouseout sono accessibili anche da Netscape) document.links[0].href = ' document.links[0].target = 'parent' <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 95 Dispense Javascript

96 Javascript Marquee Serve per gestire scritte scorrevoli
Alessandro Marchisio: 07/04/2017 Javascript Marquee Serve per gestire scritte scorrevoli Metodi: start(), stop() behaviour = "slide|scroll|alternate" direction="up|down|left|right" scrollAmount=num pixel scroll scrollDelay=msec <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 96 Dispense Javascript

97 Javascript Oggetto history Contiene dei puntatori alle pagine visitate
Alessandro Marchisio: 07/04/2017 Javascript Oggetto history Contiene dei puntatori alle pagine visitate history.back() equivale al tasto back o indietro del browser history.go( offset ) history.forward() equivale al tasto avanti del browser, produce un errore se non è disponibile la pagina successiva history.length indica il numero di pagine presenti nella history <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 97 Dispense Javascript

98 Javascript Oggetto clipboardData
Alessandro Marchisio: 07/04/2017 Javascript Oggetto clipboardData .setData(formato, testo) equivale a ctrl+C .getData(formato) legge il testo correntemente nella clipboard .clearData(formato) formato: 'text' 'url' 'file' 'html' 'image' funziona con IE 5 e successivi <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 98 Dispense Javascript

99 Javascript Oggetto navigator
Alessandro Marchisio: 07/04/2017 Javascript Oggetto navigator Contiene informazioni sul browser che si sta utilizzando Le sue proprietà sono accessibili in sola lettura: alert(navigator.userAgent) appName, appVersion, userAgent sono le principali proprietà che contengono informazioni su sitema opertivo, versione del browser, lingua, ecc. La collezione plugins contiene informazioni su eventuali plugins installati. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 99 Dispense Javascript

100 Javascript La funzione eval( ) Permette di valutare delle espressioni
07/04/2017 Javascript La funzione eval( ) Permette di valutare delle espressioni L'espressione viene interpretata in javascript Restituisce il risultato dell'interpretazione. s1 = "document.images"; s2= "src" z = eval( s1 + '[0]' + s2 ) //z conterrà l'indirizzo della prima immagine del documento <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 100 Dispense Javascript

101 Javascript Javascript e le date Esiste un oggetto Date()
07/04/2017 Javascript Javascript e le date Esiste un oggetto Date() Di default, un oggetto Date contiene la data e l'ora corrente Ci sono vari metodi get per avere informazioni sulla data. (Date, Month, Year, Hours, Minutes, Seconds,.…) adesso = new Date() adesso.getDay() // 0=domenica, 1= lun, …6 = sabato adesso.getMonth() // 0=Gennaio…11=Dicembre adesso.getYear() // 2001, 2002, ecc. adesso.getTime() // numero millisec. dal 1/1/70 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 101 Dispense Javascript

102 Javascript Creare una data
07/04/2017 Javascript Creare una data Ci sono dei metodi set per assegnare nuovi valori. altraData = new Date() altraData.setDate(15); altraData.setMonth(2); altraData.setYear(1950) // altraData corrisponde al 15 marzo 1950 che era un … gg = new Array("Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab") alert(gg[altraData.getDay()]) //mercoledì altraData = new Date(1950,2,15,20,30,8) //stesso giorno ore 20:30.08 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 102 Dispense Javascript

103 Javascript Differenza tra date
07/04/2017 Javascript Differenza tra date Ogni data viene memorizzata come un numero di millisecondi passati da una data prefissata (1/1/ :00.00) E' possibile confrontare due date e, con opportune divisioni sapere il numero di giorni, mesi o anni tra le due date primaData = new Date(1980,11,25,0,0,0); secondaData = new Date(1986,4,9,0,0,0); numGiorni = (primadata - secondadata) / 1000 / 3600 / 24 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 103 Dispense Javascript

104 Javascript Aggiungere tempi alle date
07/04/2017 Javascript Aggiungere tempi alle date Volendo aggiungere un'ora, un giorno, ecc. ad una data specificata, è possibile utilizzare il costruttore Date, senza preoccuparsi della validita dei parametri passati a = new Date(2005,1,28+5) //sarà il 5 marzo.... <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 104 Dispense Javascript

105 Javascript L'oggetto Math
07/04/2017 Javascript L'oggetto Math Mette a disposizione una serie di funzioni matematiche e alcune costanti. E' possibile operare con funzioni trigonometriche, logartitmiche ed esponenziali. Funzioni e costanti sono considerati metodi di questo oggetto, quindi avremo: Math.cos(a), Math.pow(num,esp) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 105 Dispense Javascript

106 Javascript L'oggetto Math e numeri casuali.
07/04/2017 Javascript L'oggetto Math e numeri casuali. In moltissime applicazioni e giochi è necessario generare numeri casuali. In Javascript è possibile utilizzare il metodo Math.random() che restituisce un numero casuale compreso tra 0 e 1 (estremi esclusi). Per variare l'intervallo è sufficiente usare la formula z = parseInt(Math.random()*(massimo -minimo) +minimo) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 106 Dispense Javascript

107 Javascript Numeri interi e arrotondamenti. -3.2 -3.7 3.2 3.7
07/04/2017 Javascript Numeri interi e arrotondamenti. Funzione\parseFloat() -3.2 -3.7 3.2 3.7 Math.ceil() (all'intero superiore) -3 4 Math.floor() (all'intero inferiore) -4 3 Math.round() (all'intero più vicino) parseInt() (all'intero prima del pto dec.) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 107 Dispense Javascript

108 Javascript Altre funzioni matematiche
07/04/2017 Javascript Altre funzioni matematiche Math.pow(base,esponente) Con questa funzione è possibile calcolare esponenziali e radici (1/esponente) Math.pow(2,0.5) = Math.SQRT2 (la radice quadrata di 2!) Se vogliamo un numero decimale con un numero fisso di decimali possiamo usare parseInt(n*Math.pow(10,ndec))/Math.pow(10,ndec) /* dove n è il numero che vogliamo rappresentare e ndec il numero di decimali */ <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 108 Dispense Javascript

109 Javascript Le stringhe di caratteri
07/04/2017 Javascript Le stringhe di caratteri Ogni oggetto di tipo stringa ha la proprietà length che indica la lunghezza della stringa Ci sono due metodi interessanti per estrarre parti di testo: charAt(posizione): estrare il carattere nella posizione indicata (la prima posizione è 0) substring(inizio,fine): estrae il testo contenuto tra le due posizioni indicate (compreso inizio, escluso fine). Se omessa, fine = testo.length Se fine < inizio vengono automatic. invertite w = "Benvenuto nel sito della montagna"; lung = w.length //33 a = w.charAt(2) //n equivale a w.substring(2,3) b = w.substring(3,9) //venuto; la "o" è l'8° car. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 109 Dispense Javascript

110 Javascript Ricerche con le stringhe
07/04/2017 Javascript Ricerche con le stringhe Esistono due metodi per eseguire delle ricerche all'interno di stringhe indexOf(parolaDaCercare, [posizione]) lastIndexOf(parolaDaCercare, [posizione]) Restituiscono la posizione in cui si trova il primo carattere della parola, oppure -1 lastIndexOf parte a cercare dal fondo La posizione è opzionale. w = "Benvenuto nel sito della montagna"; z = w.lastIndexOf("venuto",2) // -1 a = w.indexOf("venuto") //3 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 110 Dispense Javascript

111 Javascript Stringhe e caratteri Ascii
07/04/2017 Javascript Stringhe e caratteri Ascii Il metodo charCodeAt(posizione) ritorna il codice Ascii del carattere nella posizione indicata. x = "ABC"; alert(x.charCodeAt(0)) // 65 Il metodo String.fromCharCode(listaCodici) permette di costruire una stringa a partire da codici Ascii w = String.fromCharCode(123,65,125); //{A} In HTML si può scrivere &#codice; ES: {A&#125 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 111 Dispense Javascript

112 Javascript escape(testo) e unescape(testo)
07/04/2017 Javascript escape(testo) e unescape(testo) escape trasforma i caratteri diversi da [A-Za-z0-9] in sequenze di escape: %hh (dove hh è il codice ascii in esadecimale) %uhhhh (codice esadecimale dei caratteri unicode) unescape ritrasforma stringhe con %hh o %uhhhh nella sequenza originaria, dove hh o hhhh rappresentano codici esadecimali. la funzione escape deve essere utilizzata per memorizzare le cookie, sequenze di escape possono servire anche per criptare parti di codice. document.write(unescape('%3c%48%52%3e')) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 112 Dispense Javascript

113 Javascript Altre funzioni con le stringhe
07/04/2017 Javascript Altre funzioni con le stringhe I due metodi toUpperCase() e toLowerCase() permettono di passare al tutto maiuscolo o tutto minuscolo Il metodo split(separatore) trasforma una lista di valori individuati da un carattere separatore in un vettore. Il metodo join(separatore) applicato ad un array restituisce una lista. Questi metodi sono particolarmente interessanti per chi è abituato a lavorare con liste di valori (Cold Fusion, Lingo, ecc.) x = "A;B;C;D"; vx= x.split(";") vx.length // 4 vx[2] //C <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 113 Dispense Javascript

114 Javascript Altre funzioni con le stringhe Elementi vuoti e separatori
07/04/2017 Javascript Altre funzioni con le stringhe Elementi vuoti e separatori Lista= "Ale,Bea,Cinzia,,Debora" vett = Lista.split(",") vett[0] //Ale vett[3] // "" vett.length //5 Vett2 = Lista.split(",,") Vett2[1] //Debora Il separatore può essere anche più lungo di un carattere. Vengono mantenuti anche gli elementi vuoti NOTA: questi due comportamenti sono significativamente diversi da quanto avviene con analoghe funzioni in ColdFusion <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 114 Dispense Javascript

115 07/04/2017 Javascript Eventi Ci sono tre eventi principali comuni a quasi tutti gli elementi (link, immagini, ecc.) onClick: click sull'oggetto onMouseOver: quando icona del mouse sull'ogg. onMouseOut: quando icona del mouse esce. Con browser vecchi funzionano solo eventi sui link: si utilizzano falsi link tipo <a href="javascript:;" onClick="fz()" onMouseOver="fz1()" onMouseOut="fz2()"><img …></a> <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 115 Dispense Javascript

116 function fz() {alert(event.x +','+event.y)}
07/04/2017 Javascript L'oggetto event La gestione degli eventi è fortemente legata al browser Ogni volta che un evento si verifica, viene associato ad esso un oggetto event che contiene dati interessanti quali la posizione del cursore, la pressione di Ctrl o Alt, la pressione del tasto destro del mouse, ecc. È possibile programmare gli eventi degli oggetti, assegnando ad essi una funzione definita in precedenza, secondo la sintassi oggetto.evento = funzione function fz() {alert(event.x +','+event.y)} document.onclick = fz <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 116 Dispense Javascript

117 Javascript L'oggetto event: proprietà
07/04/2017 Javascript L'oggetto event: proprietà Le proprietà dell'oggetto event cambiano sensibilmente da Netscape a Explorer, e da versione a versione <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 117 Dispense Javascript

118 Javascript L'oggetto event: un esempio
07/04/2017 Javascript L'oggetto event: un esempio È possibile intercettare gli eventi della tastiera e del mouse. Questo esempio funziona con Explorer <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 118 Dispense Javascript

119 Javascript Gestione degli errori
Alessandro Marchisio: 07/04/2017 Javascript Gestione degli errori Con Javascript 1.1 (1999, Explorer 5 e Netscape ) è possibile utilizzare costrutti del tipo try { BloccoDiCodice } catch(err) { BloccoCodiceSeErrore //err, err.description, err.number } finally {BloccoDaEseguireComunque} E' possibile simulare degli errori, all'interno del BloccoDiCodice utilizzando l'istruzione throw. L'evento Error conterrà quanto indicato dopo throw (oggetto, stringa, ecc.) try { if (a==0) throw "Divisione per 0"} <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 119 Dispense Javascript

120 Javascript Gestione degli errori (segue)
Alessandro Marchisio: 07/04/2017 Javascript Gestione degli errori (segue) try racchiude codice che può dare errore, è possibile provocare errori con l'istruzione throw catch( e ): in caso di errore o dopo un'istruzione throw, il controllo passa al blocco racchiuso da catch. Viene generato un evento error, che viene passato al catch e ha tre proprietà: number, description e message finally racchiude un blocco di istruzioni che vengono eseguite sempre, o dopo il blocco nel try o dopo il blocco nel catch o prima di un return <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 120 Dispense Javascript

121 Javascript Gestione degli errori: onerror
07/04/2017 Javascript Gestione degli errori: onerror Altra possibilità è programmare l'evento onerror, come qualsiasi altro evento Funziona correttamente solo su Netscape window.onerror = myError; function myError(message, url, line) { alert('Errore individuato: '+ message + ',' + url +',' +line); return true; } <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 121 Dispense Javascript

122 Javascript Oggetti definibili, this
07/04/2017 Javascript Oggetti definibili, this Vari linguaggi di programmazione implementano la possibilità di creare delle variabili "complesse" detti anche "tipi di dati definiti dall'utente" o "classi". In javascript è possibile creare nuove oggetti con proprietà e metodi specifici. Il predicato this identifica l'oggetto corrente <input type="text" name="a" onchange=alert(this.value)> Il predicato this può essere usato all'interno di funzioni che definiscono i metodi o le proprietà dell'oggetto stesso <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 122 Dispense Javascript

123 for (prop in foto) alert(prop + ':'+foto[prop])
07/04/2017 Javascript Nuovi oggetti e loro proprietà Si può creare un nuovo oggetto con la sintassi new Object() foto = new Object() Si possono dichiarare le sue proprietà semplicemente assegnando dei valori Posso scorrere le proprietà del mio oggetto con una sintassi del tipo for (prop in foto) alert(prop + ':'+foto[prop]) foto.dimensioni = "15x21" foto.descrizione = "paesaggio" foto.carta = "ektachrome" foto = { dimensioni: "15x21", descrizione : "paesaggio", carta : "ektachrome" } <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 123 Dispense Javascript

124 Javascript Classi di oggetti: proprietà
Alessandro Marchisio: 07/04/2017 Javascript Classi di oggetti: proprietà Si può creare un nuovo tipo di oggetti, utilizzando funzioni e il predicato this function oggettoFoto() { var argc = oggettoFoto.arguments.length; var argv = oggettoFoto.arguments this.dimensioni = argc > 0 ? argv[0]: "" this.descrizione = argc > 1 ? argv[1]: "" this.carta = argc > 2 ? argv[2]: "" } foto1 = new oggettoFoto("15x21", "paes.", "ektachrome") foto2 = new oggettoFoto("12x12", "ritratto", "ektachrome") <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 124 Dispense Javascript

125 Javascript Classi di oggetti: metodi
Alessandro Marchisio: 07/04/2017 Javascript Classi di oggetti: metodi Un metodo è una funzione o procedura applicata ad un oggetto. In Javascript si possono definire i metodi in due modi: - all'interno della funzione che definisce l'oggetto (metodi nativi) - utilizzando la parola chiave prototype (metodi aggiuntivi) Il secondo modo permette l'overload dei metodi, ossia la possibilità di ridefinire il metodo a seconda della situazione (alta riusabilità del codice) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 125 Dispense Javascript

126 Javascript Classi di oggetti: metodi nativi Alessandro Marchisio:
07/04/2017 Javascript Classi di oggetti: metodi nativi A questo punto posso creare una nuova istanza di oggettoFoto e richiamare il metodo fotodisplay foto1 = new oggettoFoto("15x21", "paese", "ekta"); foto1.fotoDisplay() <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 126 Dispense Javascript

127 Javascript Classi di oggetti: metodi aggiuntivi
Alessandro Marchisio: 07/04/2017 Javascript Classi di oggetti: metodi aggiuntivi <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> A seconda delle circostanze possiamo definire un metodo display che mostri il contenuto come popup piuttosto che dentro una tabella: oggettoFoto.prototype.display = fotoDisplay oggettoFoto.prototype.display = fotoHtmlDisplay foto1.display() //in questo caso avremo i dati in una tabella 127 Dispense Javascript

128 Javascript overloading di metodi esistenti: toString() e valueOf()
Alessandro Marchisio: 07/04/2017 Javascript overloading di metodi esistenti: toString() e valueOf() Date.prototype.toString = function() { var mesi = new Array("Gennaio", "Febbraio", "Marzo","Aprile","Maggio", "Giugno", "Luglio","Agosto","Settembre", "Ottobre","Novembre","Dicembre") var giorni = new Array("Domenica","Lunedì","Martedì" ,"Mercoledì", "Giovedì","Venerdì","Sabato") var ret = giorni[ this.getDay() ] + ' ' ret += this.getDate() + ' ' + mesi[ this.getMonth() ] + ' ' + this.getYear() return ret } alert( oggi = new Date() )// Martedì 5 Ottobre 2004 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> toString() è il metodo che viene chiamato in modo automatico quando si cerca di stampare un oggetto, valueOf() viene invocato quando serve il valore dell'oggetto. 128 Dispense Javascript

129 Javascript Estendiamo la classe String Alessandro Marchisio:
07/04/2017 Javascript Estendiamo la classe String function fz_trim() { var s = this var inizio = 0 var fine = s.length for (var i=0; s.charAt(i) == ' ' && i < s.length; i++) inizio = i for ( i=s.length-1; s.charAt(i) == ' ' && i >= inizio; i--) fine = i return s.substring(inizio,fine) } function fz_contrario() { var t = this var r = "" for (var i = t.length; i >= 0; i--) r += t.charAt(i) return r } String.prototype.contrario = fz_contrario String.prototype.trim = fz_trim <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> String.prototype.left = function(n) {return this.substring(0,n)} function my_right(n) { return this.substring(this.length - n)} String.prototype.right =my_right 129 Dispense Javascript

130 Javascript Le espressioni Regolari
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari Formalismo per esprimere insiemi di caratteri generici, particolarmente indicati per controllare l'esattezza (formale) di sigle, codici, ecc. e per eseguire operazioni 'intelligenti' di trova/sostituisci. (cfr. PERL) Le espressioni regolari in javascript sono un oggetto Vengono indicate senza virgolete e comprese tra 2 / (slash, diviso) o col costruttore RegExp() Esiste il metodo (dell'oggetto stringa) match(re) che vuole come parametro un'espressione regolare e ritorna null se l'espressione non soddisfa i criteri. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 130 Dispense Javascript

131 Javascript Le espressioni Regolari (car. spec.) Alessandro Marchisio:
07/04/2017 Javascript Le espressioni Regolari (car. spec.) \n verifica riga a capo: String.fromCharCode(10), "\n"; \r verifica il ritorno carrello: String.fromCharCode(13) "\r" \t verifica tabulazione: String.fromCharCode(9) "\t" \nnn verifica carattere in numero ottale; es: \101 trova una A (65)10 \xnn verifica carattere in numero esadecimale; \x41 trova una A \d verifica una qualsiasi cifra da 0 a 9; \D verifica un qualsiasi carattere che non sia una cifra; \w verifica un qualsiasi carattere alfanumerico [a-zA-Z0-9]; \W verifica un qualsiasi carattere che non faccia parte di \w; \s verifica un qualsiasi carattere di equivalente allo spazio vuoto ' ', oppure a uno di questi \n\r\t\v; \S verifica una qualsiasi carattere diverso da ' '\n\r\t\v. . il punto rappresenta qualsiasi carattere tranne \n ( anche \r!) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 131 Dispense Javascript

132 Javascript Le espressioni Regolari (classi)
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari (classi) Si possono definire particolari sottoinsiemi di caratteri tra parentesi quadre [ ] Si può indicare tutti i caratteri tranne un sottoinsieme con [^ ] (^alt+94) Si possono indicare singoli caratteri o intervalli tipo [0-9] (equivale a \d) (/alt+47) [A-Za-z] indica solo lettere sia maiuscole che minuscole [^24680] indica solo numeri dispari Gruppi consecutivi di caratteri si identificano con il primo, seguito da - e dall'ultimo (a-e=abcde). Se il primo carattere è ^, si intende qualsiasi carattere ESCLUSI quelli tra parentesi. Per includere il simbolo ] lo si deve mettere per primo, mentre per inserire il simbolo ^ lo si deve mettere da qualsiasi parte TRANNE che all'inizio, e per il carattere - deve essere l'ULTIMO prima della parentesi quadra. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 132 Dispense Javascript

133 Javascript Le espressioni Regolari (ripetizioni)
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari (ripetizioni) Tra parentesi graffe si può indicare quante volte (da un minimo ad un massimo o esattamente) deve essere presente un carattere di una classe. {x,y} da x volte a y volte {x,} almeno x volte {x} esattamente x volte Abbreviazioni per casi particolari: ? {0,1} {1,} * {0,} Di default le occorrenze sono bramose cioè cercano di estendersi a tutto il testo possibile Per fare in modo che invece si fermino alla prima occorrenza occorre specificare un ? dopo la definizione di occorrenza: es: <a>xx</a>ss<a>ee</a> /<a>.*<\/a>/gi prende tutta la riga, mentre /<a>.*?<\/a>/gi individua due occorrenze <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 133 Dispense Javascript

134 Alessandro Marchisio:
07/04/2017 Javascript Le espressioni Regolari (alternative, raggruppamenti, posizioni) Il segno pipe | (alt+124) indica le alternative. è possibile raggruppare un insieme di caratteri con le parentesi tonde. ( ) (alt 40-1) ^ indica all'inizio della stringa; $ indica alla fine \b indica all'inizio o alla fine di una parola \B indica nel corpo di una parola <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 134 Dispense Javascript

135 Javascript Le espressioni Regolari (asserzioni)
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari (asserzioni) sono espressioni condizionali che non vengono ritornate nella ricerca. espressioni che guardano avanti (?= ) positive (?! ) negative espressioni che gurdano indietro (?<= ) positive (?<! ) negative (?: ) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 135 Dispense Javascript

136 Alessandro Marchisio:
07/04/2017 Javascript Le espressioni Regolari (ritrovamenti multipli col metodo match(re) ) Il metodo match accetta solo espressioni regolari; ritorna la prima sottostringa che soddisfa i criteri. Inserendo una g dopo l'espressione regolare str.match(/\w{3}/g) il metodo ritornerà un array con tutte le espressioni trovate (.length), oppure null. L'operatore i dopo l'espressione regolare permette di NON distinguere tra maiuscole e minuscole. (/i /gi /ig) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 136 Dispense Javascript

137 Alessandro Marchisio:
07/04/2017 Javascript Le espressioni Regolari (metodi search e replace dell'oggetto String) Il metodo search(re) ritorna la posizione della prima sottostringa che che soddisfa i criteri, oppure -1. L'eventuale parametro g dopo l'espressione non viene considerato. Il metodo replace(stringa o RE, stringa nuova ) - può cercare anche una semplice stringa - utilizzando le parentesi per raggruppare nella RE si può usare $1, $2, $3,....$n nella seconda stringa per indicare i gruppi trovati. <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 137 Dispense Javascript

138 Javascript Le espressioni Regolari (RegExp)
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari (RegExp) new RegExp( stringa, attributi) Stringa è l'espressione regolare, attenzione a mettere due slash. Attributi; i, g, ig o gi (proprietà di sola lettura global e ignoreCase) L'oggetto di classe RegExp ha due metodi (exec, test) e una proprietà lastIndex Il metodo exec vuole come parametro una stringa ritorna sempre una sola coincidenza, ma aggiorna la proprietà lastindex all'ultimo carattere della sottostringa trovata (oppure a 0 e ritorna null) Il metodo test ritorna true o false <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 138 Dispense Javascript

139 Javascript Le espressioni Regolari (esempi) codice fiscale
Alessandro Marchisio: 07/04/2017 Javascript Le espressioni Regolari (esempi) codice fiscale var re = /^[A-Z]{6}\d{2}[A-Z]\d{2}[A-Z]\d{3}[A-Z]$/; trim: stringa.replace(/\s+$|^\s+/g,""); mail valida: Link html var re = /<A[\w\W]*? href[\w\W]*?=[^>]*?>/gi qualsiasi_tag = /<[^>]*?>/g; NOTAG notag = /[>]([^<])+</g <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 139 Dispense Javascript

140 Javascript Cookie document.cookie è una stringa
Alessandro Marchisio: 07/04/2017 Javascript Cookie document.cookie è una stringa è possibile aggiungere una cookie utilizzando la sintassi document.cookie = stringa La stringa deve iniziare con la copia nomecookie=valore; è possibile settare altri parametri sempre in copia, separati da ";" NomeCookie=valore; expires= data_formato_GMT; path= percorso; domain= nome_del_sito; secure usare escape() per valore, path, domain; usare toGMTString() per la data. L'attributo secure indica che la ritrasmissione della cookie avverrà solo in https <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 140 Dispense Javascript

141 Javascript Cookie se non specifico expires
Alessandro Marchisio: 07/04/2017 Javascript Cookie se non specifico expires - cookie registrata in memoria - viene mantenuta finchè c'è una qualsiasi finestra di explorer aperta se specifico expires > oggi viene scritto (IE) un file la cookie rimane disponibile se specifico expires < oggi viene modificato il file la cookie non è più disponibile Le cookie trasmesse dai server ASP non hanno expires quindi si esauriscono chiudendo i browser, quelle cfm vengono scritte in un file <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> Il file index.dat indicizza le varie cookie; è lockato dal sistema operativo 141 Dispense Javascript

142 Javascript formalismo di Backus-Naur
Alessandro Marchisio: 07/04/2017 Javascript formalismo di Backus-Naur La BNF Backus-Naur Form è un linguaggio standard per descrivere un altro linguaggio < > elemento di cui si parla ::= è definito come nulla AND | OR [ ] opzione { }nm ripetizione da m a n * qualsiasi ? qualsiasi carattere Esempi: < cifra esadecimale > ::= 0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 142 Dispense Javascript

143 Javascript ActiveXObject Alessandro Marchisio:
07/04/2017 Javascript ActiveXObject var obj = new ActiveXObject(“NomeServer.NomeApplicazione") Secondo parametro opzionale indica il server sul quale sarà creata l'istanza dell'oggetto. Excel.Application, Word.Application, Scripting.fileSystemObject microsoft.xmldom, ADODB.Connection, Shell.Application (Hkey_Classes_root) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 143 Dispense Javascript

144 Javascript ActiveXObject("Shell.Application") .shellExecute(prg,arg)
Alessandro Marchisio: 07/04/2017 Javascript ActiveXObject("Shell.Application") .open(num); 0: desktop 1: IExplore 2: %USERPROFILE%\Menu Avvio\Programmi 3: Pannello di controllo 4: stampanti 5: documenti 6: preferiti 7:esecuzioneAutomatica .Explore(path); .shutDownWindows(); .fileRun(); findComputer(); .findFiles(), setTime() , windows() .shellExecute(prg,arg) ssfALTSTARTUP File system directory that corresponds to the user's nonlocalized Startup program group. (value = 29) ssfAPPDATA Version File system directory that serves as a common repository for application-specific data. A typical path is C:\Documents and Settings\username\Application Data. (value = 26) ssfBITBUCKET Virtual folder containing the objects in the user's Recycle Bin. (value = 15) ssfCOMMONALTSTARTUP File system directory that corresponds to the nonlocalized Startup program group for all users. Valid only for Microsoft Windows NT systems. (value = 30) ssfCOMMONAPPDATA Version 5.0. Application data for all users. A typical path is C:\Documents and Settings\All Users\Application Data. (value = 35) ssfCOMMONDESKTOPDIR File system directory that contains files and folders that appear on the desktop for all users. A typical path is C:\Documents and Settings\All Users\Desktop. Valid only for Windows NT systems. (value = 25) ssfCOMMONFAVORITES File system directory that serves as a common repository for all users' favorite items. Valid only for Windows NT systems. (value = 31) ssfCOMMONPROGRAMS File system directory that contains the directories for the common program groups that appear on the Start menu for all users. A typical path is C:\Documents and Settings\All Users\Start Menu\Programs. Valid only for Windows NT systems. (value = 23) ssfCOMMONSTARTMENU File system directory that contains the programs and folders that appear on the Start menu for all users. A typical path is C:\Documents and Settings\All Users\Start Menu. Valid only for Windows NT systems. (value = 22) ssfCOMMONSTARTUP File system directory that contains the programs that appear in the Startup folder for all users. A typical path is C:\Documents and Settings\All Users\Start Menu\Programs\Startup. Valid only for Windows NT systems. (value = 24) ssfCONTROLS Virtual folder containing icons for the Control Panel applications. (value = 3) ssfCOOKIES File system directory that serves as a common repository for Internet cookies. A typical path is C:\Documents and Settings\username\Cookies. (value = 33) ssfDESKTOP Microsoft Windows Desktop—virtual folder that is the root of the namespace. (value = 0) ssfDESKTOPDIRECTORY File system directory used to physically store the file objects that are displayed on the desktop. It is not to be confused with the desktop folder itself, which is a virtual folder. A typical path is C:\Documents and Settings\username\Desktop. (value = 16) ssfDRIVES My Computer—virtual folder containing everything on the local computer: storage devices, printers, and Control Panel. This folder may also contain mapped network drives. (value = 17) ssfFAVORITES File system directory that serves as a common repository for the user's favorite items. A typical path is C:\Documents and Settings\username\Favorites. (value = 6) ssfFONTS Virtual folder containing installed fonts. A typical path is C:\WINNT\Fonts. (value = 20) ssfHISTORY File system directory that serves as a common repository for Internet history items. (value = 34) ssfINTERNETCACHE File system directory that serves as a common repository for temporary Internet files. A typical path is C:\Documents and Settings\username\Temporary Internet Files. (value = 32) ssfLOCALAPPDATA Version 5.0. File system directory that serves as a data repository for local (non-roaming) applications. A typical path is C:\Documents and Settings\username\Local Settings\Application Data. (value = 28) ssfMYPICTURES My Pictures folder. A typical path is C:\Documents and Settings\username\My Documents\My Pictures. (value = 39) ssfNETHOOD A file system folder containing the link objects that may exist in the My Network Places virtual folder. It is not the same as ssfNETWORK, which represents the network namespace root. A typical path is C:\Documents and Settings\username\NetHood. (value = 19) ssfNETWORK Network Neighborhood—virtual folder representing the root of the network namespace hierarchy. (value = 18) ssfPERSONAL File system directory that serves as a common repository for a user's documents. A typical path is C:\Documents and Settings\username\My Documents. (value = 5) ssfPRINTERS Virtual folder containing installed printers. (value = 4) ssfPRINTHOOD File system directory that contains the link objects that may exist in the Printers virtual folder. A typical path is C:\Documents and Settings\username\PrintHood. (value = 27) ssfPROFILE Version 5.0. User's profile folder. (value = 40) ssfPROGRAMFILES Version 5.0. Program Files folder. A typical path is C:\Program Files. (value = 38) ssfPROGRAMS File system directory that contains the user's program groups (which are also file system directories). A typical path is C:\Documents and Settings\username\Start Menu\Programs. (value = 2) ssfRECENT File system directory that contains the user's most recently used documents. A typical path is C:\Documents and Settings\username\Recent. (value = 8) ssfSENDTO File system directory that contains Send To menu items. A typical path is C:\Documents and Settings\username\SendTo. (value = 9) ssfSTARTMENU File system directory containing Start menu items. A typical path is C:\Documents and Settings\username\Start Menu. (value = 11) ssfSTARTUP File system directory that corresponds to the user's Startup program group. The system starts these programs whenever any user logs onto Windows NT or starts Windows 95. A typical path is C:\Documents and Settings\username\Start Menu\Programs\Startup. (value = 7) ssfSYSTEM Version 5.0. System folder. A typical path is C:\WINNT\SYSTEM32. (value = 37) ssfTEMPLATES File system directory that serves as a common repository for document templates. (value = 21) ssfWINDOWS Version 5.0. Windows directory or SYSROOT. This corresponds to the %windir% or %SYSTEMROOT% environment variables. A typical path is C:\WINNT. (value = 36) 144 Dispense Javascript

145 Javascript XML Alessandro Marchisio: <?xml version="1.0" ?>
07/04/2017 Javascript Processing Istruction Elemento XML <?xml version="1.0" ?> <anagrafica id="10"> <nome>Maria</nome> <cognome>Rossi</cognome> <recapito> <citta>Ivrea</citta> <indirizzo denominazione="piazza">Maretta</indirizzo> <numero>2</numero> <telefono></telefono> </recapito> <cellulare>333/ </cellulare> </anagrafica> Attributo: attributes(0).name="id" attributes(0).text="10" Nodo tagName="recapito" childNodes.length = 4 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 145 Dispense Javascript

146 Javascript Microsotf.XMLDOM
Alessandro Marchisio: 07/04/2017 Javascript Microsotf.XMLDOM var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.load(xmlFile); xmlDoc.loadXML(xmlText) xmlDoc.async=false //si ferma finchè ha caricato (load) xmlObj=xmlDoc.documentElement //il nodo root xmlObj.xml //stampa il contenuto xmlObj.tagName , .nodeName//nome del nodo corrente xmlObj.text //contenuto del nodo corrente (ha senso solo se non ci sono altri nodi figli) xmlObj.hasChildNodes() //true o false xmlObj.childNodes //vettore di figli .length; [] o () o item(i) xmlObj.attributes //vettore di attributi name=text .length xmlObj.getAttribute("attributo") //stringa o null (.text) xmlObj.getElementByTagName("tagName") //collezione .length .item(i) o [] oggetti childNodes <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 146 Dispense Javascript

147 Javascript Microsotf.XMLDOM
Alessandro Marchisio: 07/04/2017 Javascript Microsotf.XMLDOM xmlObj.nodeType (1 xml , 3 testo nodeValue, 9) xmlObj.nodeName xmlObj.parentNode xmlObj.firstChild, xmlObj.lastChild xmlObj.nextSibiling, xmlObj.prevousSibiling elm = xml.cloneNode(flagProfondita) //flagProfondita=true copia tutta la struttura nodo.appendChild( elm ) nodo.insertBefore( elm, nodoPrecedente) nodo.removeNode() <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 147 Dispense Javascript

148 Javascript Alessandro Marchisio: function traverse(tree) {
07/04/2017 Javascript function traverse(tree) { if(tree.hasChildNodes()) { document.write('<ul><li>'); document.write('<b>'+tree.tagName+' : </b>'); var nodes=tree.childNodes.length; for(var i=0; i<tree.childNodes.length; i++) traverse(tree.childNodes(i)); document.write('</li></ul>'); } else document.write(tree.text); function initTraverse(file) { loadXML(file); var doc=xmlDoc.documentElement; traverse(doc); xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); function loadXML(xmlFile) { xmlDoc.async="false"; xmlDoc.onreadystatechange=verify; xmlDoc.load(xmlFile); } function verify() { if(xmlDoc.readyState!=4) return false; <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 148 Dispense Javascript

149 Javascript XML: parseError xmlDoc.parseError Alessandro Marchisio:
07/04/2017 Javascript XML: parseError xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.load(nf) xmlDoc.parseError errorCode (!=0) reason, line, linePos, srcText, url, filePos <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 149 Dispense Javascript

150 Javascript window.external .addDesktopComponent(url, image/website)
Alessandro Marchisio: 07/04/2017 Javascript window.external .addDesktopComponent(url, image/website) .addFavorite(url, nome) .addChannel(url) .isSubscribed(url) ritorna true o false .NavigateAndFind(url,'','') ShellUIHelper (non sono case sensitive) <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 150 Dispense Javascript

151 Alessandro Marchisio:
07/04/2017 Javascript home page <a href="#"onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage(' come Home Page</a> <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 151 Dispense Javascript

152 Javascript Link in rete Alessandro Marchisio:
07/04/2017 Javascript Link in rete <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 152 Dispense Javascript

153 Javascript Bibliografia
Alessandro Marchisio: 07/04/2017 Javascript Bibliografia Dino Esposito - "Windows Script Host Programmer's Reference", Wrox Press, 1999 Cliff Wootton - "JavaScript Programmer's Reference", Wrox Press, 2000 David Flanagan - JavaScript Pocket Reference, O'Reilly, 1998 David Flanagan - JavaScript: The Definitive Guide, 3rd Edition, 1998 <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 153 Dispense Javascript

154 ASP Javascript Alessandro Marchisio: 154 07/04/2017
Ridirezionamento verso un’altra pagina In HTML: <META http-EQUIV=REFRESH CONTENT="2;URL= In JavaScript <SCRIPT LANGUAGE="JavaScript"> <!-- window.location=" // --></SCRIPT> In ASP (oggetto Response) Response.Redirect " Includere un file <% Server.execute( nomefile ) %> mantiene oggetto request, ma non le variabili semplici <!--#include file="nomefile.abc"--> <!--#include virtual="nomefile.abc"--> non va tra <% , mantiene tutte l'ambiente... <script language="javascript"> function cella(contenuto) { document.write('<td>' + contenuto + '</td>') } function tabella(numrighe, numcolonne, fz) var i,j document.write('<table border=1>') for (j=0; j < numrighe; j++) document.write('<tr>') for (i=0; i<numcolonne; i++) cella(fz(i,j)); document.write('</tr>') document.write('</table>') // viene passata la colonna function calcolacontenuto(i,j) s = '<input type="text" name="a'+ i+j + '" size=4 value="'+i+';'+j+'"> ' return s tabella(10,10, calcolacontenuto) </script> 154 Dispense Javascript