La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili Funzioni - Array - Oggetti Predefiniti - Funzionalità matematiche.

Presentazioni simili


Presentazione sul tema: "Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili Funzioni - Array - Oggetti Predefiniti - Funzionalità matematiche."— Transcript della presentazione:

1

2 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) Javascript

3 aggiornamento febbraio 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

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

5 aggiornamento febbraio Javascript Versioni Javascript (Netscape 1996) e Jscript (Microsoft) DHTML (architettura D.O.M. – Document Object Model di Microsoft) (standard)http://www.ecma.ch

6 aggiornamento febbraio Javascript Come Dove Quando // 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 */

7 aggiornamento febbraio Javascript Come Dove Quando E' possibile richiamare un file esterno, l'estensione è di norma.js, ma può essere qualsiasi. Il file non deve contenere il tag. E' possibile inserire degli script in qualsiasi punto del documento HTML, ricordando però che il codice viene interpretato riga per riga.

8 aggiornamento febbraio 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 e. Fa eccezione solo il tag html di commento

9 aggiornamento febbraio 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)

10 aggiornamento febbraio 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

11 aggiornamento febbraio 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.

12 aggiornamento febbraio 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 \"

13 aggiornamento febbraio Javascript Generali: apici semplici ('') e doppi ("") 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 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

14 aggiornamento febbraio 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 + [ ]

15 aggiornamento febbraio 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.

16 aggiornamento febbraio 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.

17 aggiornamento febbraio Javascript Generali: DEBUG Personalmente, in caso di situazioni complesse aggiungo queste poche righe in coda alle pagine: DEBUG In questo modo è possibile anche impartire comandi e chiamare funzioni in modo interattivo!

18 aggiornamento febbraio Javascript Finestre di input-output alert('messaggio') alert('Ciao') Questo comando genera una finestra di dialogo con un solo pulsante (OK) alert(messaggio) ritorna il valore undefined

19 aggiornamento febbraio Javascript Finestre di input-output confirm('messaggio') risposta = confirm('Vuoi continuare') if (risposta) alert('hai premuto OK') else alert('hai premuto Annulla') 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)

20 aggiornamento febbraio Javascript Finestre di input-output prompt('messaggio', 'valore default') risposta = prompt('Come ti chiami', 'Ale') if (risposta == null) alert('hai premuto Annulla') else alert('Ti chiami ' + risposta) 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

21 aggiornamento febbraio Javascript Finestre di input-output Il metodo window.open url="http://memo.ghiglieno.it" parametri = "width=250,height=300,top=50,left=140,toolbar" finestra=window.open(url, "nome", parametri) if (confirm('Chiudi?')) finestra.close() 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(".....")

23 aggiornamento febbraio Javascript Algebra Boolena: True table AND OR XOR 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) NOT

24 aggiornamento febbraio 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)

25 aggiornamento febbraio 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

26 aggiornamento febbraio 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

27 aggiornamento febbraio Javascript Istruzioni condizionali (…segue) condizione è una espressione booleana del tipo minore, minore uguale a < b a <= b maggiore, maggiore uguale a > b a >= b diversoa != b ugualea == b

28 aggiornamento febbraio 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

29 aggiornamento febbraio Javascript Istruzioni condizionali (…segue) il risultato di una condizione è sempre true o false da scrivere senza virgolette. Esempio 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

30 aggiornamento febbraio 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

31 aggiornamento febbraio 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 m = "Benvenut" + (sesso == 'M' ? "o": "a") alert(m) //usato per individuare il browser utilizzato IE = document.all ? 1:0; NN = document.layers? 1:0;

32 aggiornamento febbraio Javascript Operazioni a livello di bit Shift a destra Shift a sinistra AND OR

33 aggiornamento febbraio 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]}

34 aggiornamento febbraio 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} incremento TRUE FALSE Istruzione seguente

35 aggiornamento febbraio 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.

36 aggiornamento febbraio 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.

37 aggiornamento febbraio 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. o = navigator; //oggetto che descrive il browser k = ''; for (ii in o) k += '\n'+ii+':'+o[ii] alert(k)

38 aggiornamento febbraio 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 = 10 // 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)

39 aggiornamento febbraio 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

40 aggiornamento febbraio 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à a = "10,44"; alert(parseFloat(a))// darà 10

41 aggiornamento febbraio 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!

42 aggiornamento febbraio 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)

43 aggiornamento febbraio 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--')

44 aggiornamento febbraio 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

45 aggiornamento febbraio 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])

46 aggiornamento febbraio 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)

47 aggiornamento febbraio 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 ))

48 aggiornamento febbraio Javascript Implementazione di matrici n-dimensionali Per ottenere una matrice m a x b è 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

49 aggiornamento febbraio Javascript Implementazione di matrici n-dimensionali Lo stesso procedimento può essere reiterato varie volte ottenendo matrici n-dimensionali. 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) } } 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) }

50 aggiornamento febbraio 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

51 aggiornamento febbraio 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

52 aggiornamento febbraio 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 } …e per chiamarla: nomeDellaFunzione() function pippo() { msg = 'Ciao da Pippo' alert(msg) } pippo()

53 aggiornamento febbraio 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 */

54 aggiornamento febbraio 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.

55 aggiornamento febbraio Javascript Funzioni: dal particolare al generale msg = "Benvenuto" document.write(" ") document.write(msg) document.write(" ") function scriviCornice( msg ) { document.write(" ") document.write(msg) document.write(" ") } … scriviCornice("Benvenuto") …

56 aggiornamento febbraio 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. CopiaPassaggio funz() Compared (==) NumberBy valueBy valueBy value BooleanBy valueBy valueBy value StringImmutable (by reference)Immutable (by reference)By value ObjectBy reference (assign)By referenceBy reference ArrayBy reference (assign) By referenceBy reference FunctionImmutable (by reference)Immutable (by reference)By reference

57 aggiornamento febbraio Javascript Funzioni: passaggio parametri - esempio /* 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) }

58 aggiornamento febbraio Javascript Funzioni: passaggio parametri - esempio cont. In questo caso funziona perché c'è un solo form, meglio comunque usare la sintassi completa: document.scheda.scelta,document.scheda.testo.value

59 aggiornamento febbraio 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.

60 aggiornamento febbraio 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

61 aggiornamento febbraio 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

62 aggiornamento febbraio Javascript Il metodo window.open( ) esempio url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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 Alessandro Marchisio: alwaysLowered yes/no or 1/0 xalwaysRaised yes/no or 1/0 xdependent yes/no or 1/0 xdirectories yes/no or 1/0 Displays the directory buttons height pixel size Height of the window hotkeys yes/no or 1/0 xinnerHeight pixel size (replaces height) xinnerWidth pixel size (replaces width) xlocation yes/no or 1/0 Displays the address bar menubar yes/no or 1/0 Displays the menubar outerHeight pixel size xouterWidth pixel size xresizable yes/no or 1/0 Allows window resizing scrollbars yes/no or 1/0 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 position in pixels The vertical position that the window will open on (starting from the top of the screen) xstatus yes/no or 1/0 Displays the status bar (found at the bottom) titlebar yes/no or 1/0 xtoolbar yes/no or 1/0 Displays the toolbar width pixel size Width of the window z-lock Alessandro Marchisio: alwaysLowered yes/no or 1/0 xalwaysRaised yes/no or 1/0 xdependent yes/no or 1/0 xdirectories yes/no or 1/0 Displays the directory buttons height pixel size Height of the window hotkeys yes/no or 1/0 xinnerHeight pixel size (replaces height) xinnerWidth pixel size (replaces width) xlocation yes/no or 1/0 Displays the address bar menubar yes/no or 1/0 Displays the menubar outerHeight pixel size xouterWidth pixel size xresizable yes/no or 1/0 Allows window resizing scrollbars yes/no or 1/0 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 position in pixels The vertical position that the window will open on (starting from the top of the screen) xstatus yes/no or 1/0 Displays the status bar (found at the bottom) titlebar yes/no or 1/0 xtoolbar yes/no or 1/0 Displays the toolbar width pixel size Width of the window z-lock

63 aggiornamento febbraio 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 url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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

64 aggiornamento febbraio 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 //Apre la finestra a tutto schermo self.moveTo(0,0); self.resizeTo(screen.width,screen.height); url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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

65 aggiornamento febbraio 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 url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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

66 aggiornamento febbraio Javascript L'oggetto Window (Explorer) 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 OGGETTI (figli) clipboardData document event frames history Image opener Option parent screen self top window

67 aggiornamento febbraio 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.)

68 aggiornamento febbraio 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 e NON funziona una volta che il documento è interamente caricato e presentato a video (quindi non ha senso richiamare document.write() da un evento!)

69 aggiornamento febbraio 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

70 aggiornamento febbraio Javascript L'oggetto document (Explorer) OGGETTI (figli) activeElement all anchors applets body childNodes documentElement embeds forms frames images links parentWindow plugins scripts selection styleSheets EVENTI onafterupdateonbeforeeditfocus onbeforeupdateoncellchange onclickoncontextmenu ondataavailableondatasetchanged ondatasetcompleteondblclick ondragstartonerrorupdate onhelponkeydown onkeypressonkeyup onmousedownonmousemove onmouseoutonmouseover onmouseuponpropertychange onreadystatechangeonrowenter onrowexitonrowsdelete onrowsinsertedonselectstart onstop PROPRIETA alinkColor bgColor cookiedefaultCharset dir domain fgColor fileCreatedDate fileModifiedDate fileUpdatedDate lastModified linkColor location mimeType nameProp protocol readyState referrer security title URL vlinkColorfileSize

71 aggiornamento febbraio 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. Ciao document.all.scritta.innerHTML = ' Buongiorno ' 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)

72 aggiornamento febbraio 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)

73 aggiornamento febbraio 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()

74 aggiornamento febbraio 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.) alert('Risoluzione Video:'+screen.width+'x'+screen.height) url = "http://www.virgilio.it" 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 url = "http://www.virgilio.it" 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

75 aggiornamento febbraio 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

76 aggiornamento febbraio 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

77 aggiornamento febbraio Javascript L'oggetto form visto da Javascript Ogni form contenuto in una pagina avrà quindi un indice e può avere un nome. …. …. Posso riferirmi al form primoForm con una di queste tre sintassi: document.forms[0]; document.primoForm; document.forms["primoForm"];

78 aggiornamento febbraio 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 avremo document.primoForm.testo //sintassi consigliata; document.primoForm.elements[0]; document.forms[0].elements[0]

79 aggiornamento febbraio Javascript Le caselle di testo Ci sono due elementi che possono contenere del testo inserito dall'utente: e. 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.

80 aggiornamento febbraio Javascript Le caselle di testo name: nome dell'oggetto value:contenuto della casella di testo size: lunghezza della cella (numero di caratteri) TESTO INIZIALE name: nome dell'oggetto cols, rows: righe e colonne (num. caratteri) wrap:presenza o meno della scrollbar oriz.

81 aggiornamento febbraio Javascript Le combo e le liste In HTML esiste l'oggetto 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)

82 aggiornamento febbraio Javascript Le combo e le liste: le options L'oggetto 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

83 aggiornamento febbraio 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. Nella definizione della 1ª, 4ª e 5ª opzione è stata inserita la parola selected. Il browser le mostrerà evidenziate I value non vengono visualizzati

84 aggiornamento febbraio 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'

85 aggiornamento febbraio 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.

86 aggiornamento febbraio 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

87 aggiornamento febbraio 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 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. Un'altra possibilità consiste nel gestire l'evento onclick allo stesso modo, sia per pulsanti di tipo submit che per link canc

88 aggiornamento febbraio 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. Alessandro Marchisio:

89 aggiornamento febbraio 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.

90 aggiornamento febbraio 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

91 aggiornamento febbraio Javascript Frames tra HTML e Javascript Nella pagina che descrive la struttura ogni frame è caratterizzato da due proprietà 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'

92 aggiornamento febbraio 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

93 aggiornamento febbraio Javascript Timer - Esempio Il titolo continua ad aggiornarsi!

94 aggiornamento febbraio Javascript Le immagini Ogni immagine in html è definita dal tag 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.

95 aggiornamento febbraio 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 ) 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' Alessandro Marchisio:

96 aggiornamento febbraio 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 = 'http://www.iol.it' document.links[0].target = 'parent' Alessandro Marchisio:

97 aggiornamento febbraio 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 Alessandro Marchisio:

98 aggiornamento febbraio 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 Alessandro Marchisio:

99 aggiornamento febbraio 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 Alessandro Marchisio:

100 aggiornamento febbraio 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. Alessandro Marchisio:

101 aggiornamento febbraio 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

102 aggiornamento febbraio 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

103 aggiornamento febbraio 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

104 aggiornamento febbraio 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

105 aggiornamento febbraio 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....

106 aggiornamento febbraio 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)

107 aggiornamento febbraio 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)

108 aggiornamento febbraio Javascript Numeri interi e arrotondamenti. Funzione\ parseFloat() Math.ceil() (all'intero superiore) Math.floor() (all'intero inferiore) Math.round() (all'intero più vicino) parseInt() (all'intero prima del pto dec.) -3 33

109 aggiornamento febbraio 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 */

110 aggiornamento febbraio 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.

111 aggiornamento febbraio 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

112 aggiornamento febbraio 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}

113 aggiornamento febbraio 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'))

114 aggiornamento febbraio 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 // 4vx[2] //C

115 aggiornamento febbraio 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

116 aggiornamento febbraio 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

117 aggiornamento febbraio 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

118 aggiornamento febbraio Javascript L'oggetto event: proprietà Le proprietà dell'oggetto event cambiano sensibilmente da Netscape a Explorer, e da versione a versione

119 aggiornamento febbraio Javascript L'oggetto event: un esempio È possibile intercettare gli eventi della tastiera e del mouse. Questo esempio funziona con Explorer

120 aggiornamento febbraio Javascript Alessandro Marchisio: 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"}

121 aggiornamento febbraio Javascript Alessandro Marchisio: 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

122 aggiornamento febbraio 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; }

123 aggiornamento febbraio 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 Il predicato this può essere usato all'interno di funzioni che definiscono i metodi o le proprietà dell'oggetto stesso

124 aggiornamento febbraio 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" }

125 aggiornamento febbraio 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") Alessandro Marchisio:

126 aggiornamento febbraio 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) Alessandro Marchisio:

127 aggiornamento febbraio Javascript Classi di oggetti: metodi nativi Alessandro Marchisio: A questo punto posso creare una nuova istanza di oggettoFoto e richiamare il metodo fotodisplay foto1 = new oggettoFoto("15x21", "paese", "ekta"); foto1.fotoDisplay()

128 aggiornamento febbraio Javascript Classi di oggetti: metodi aggiuntivi Alessandro Marchisio: 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

129 aggiornamento febbraio Javascript overloading di metodi esistenti: toString() e valueOf() Alessandro Marchisio: 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. 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

130 aggiornamento febbraio Javascript Estendiamo la classe String Alessandro Marchisio: 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 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) } 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

131 aggiornamento febbraio 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. Alessandro Marchisio:

132 aggiornamento febbraio 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!) Alessandro Marchisio:

133 aggiornamento febbraio 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 Alessandro Marchisio: 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.

134 aggiornamento febbraio 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,} Alessandro Marchisio: 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: xx ss ee /.* /gi prende tutta la riga, mentre /.*? /gi individua due occorrenze

135 aggiornamento febbraio 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 Alessandro Marchisio:

136 aggiornamento febbraio 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 (?

137 aggiornamento febbraio 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) Alessandro Marchisio:

138 aggiornamento febbraio 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. Alessandro Marchisio:

139 aggiornamento febbraio 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 Alessandro Marchisio:

140 aggiornamento febbraio 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 = / ]*?>/gi qualsiasi_tag = / ]*?>/g; NOTAG notag = /[>]([^<])+

141 aggiornamento febbraio 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 Alessandro Marchisio:

142 aggiornamento febbraio 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 Alessandro Marchisio: Il file index.dat indicizza le varie cookie; è lockato dal sistema operativo Le cookie trasmesse dai server ASP non hanno expires quindi si esauriscono chiudendo i browser, quelle cfm vengono scritte in un file

143 aggiornamento febbraio 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 { } n m ripetizione da m a n *qualsiasi ?qualsiasi carattere Alessandro Marchisio: Esempi: ::= 0|1|2|3|4|5|6|7|8|9|A|B| C|D|E|F

144 aggiornamento febbraio 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) Alessandro Marchisio:

145 aggiornamento febbraio Javascript ActiveXObject(" Shell.Application ").open(num); 0: desktop1: IExplore 2: %USERPROFILE%\Menu Avvio\Programmi 3: Pannello di controllo4: stampanti5: documenti 6: preferiti7:esecuzioneAutomatica.Explore(path);.shutDownWindows();.fileRun(); findComputer();.findFiles(), setTime(), windows().shellExecute(prg,arg) Alessandro Marchisio:

146 aggiornamento febbraio Javascript XML Maria Rossi Ivrea Maretta 2 333/ Alessandro Marchisio: Processing Istruction Elemento Attributo: attributes(0).name="id" attributes(0).text="10" Nodo tagName="recapito" childNodes.length = 4

147 aggiornamento febbraio Javascript Microsotf.XMLDOM v ar 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 Alessandro Marchisio:

148 aggiornamento febbraio 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() Alessandro Marchisio:

149 aggiornamento febbraio Javascript function traverse(tree) { if(tree.hasChildNodes()) { document.write(' '); document.write(' '+tree.tagName+' : '); var nodes=tree.childNodes.length; for(var i=0; i '); } else document.write(tree.text); } function initTraverse(file) { loadXML(file); var doc=xmlDoc.documentElement; traverse(doc); } Alessandro Marchisio: 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; }

150 aggiornamento febbraio Javascript XML: parseError xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.load(nf) xmlDoc.parseError errorCode (!=0) reason, line, linePos, srcText, url, filePos Alessandro Marchisio:

151 aggiornamento febbraio 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) Alessandro Marchisio:

152 aggiornamento febbraio Javascript home page Imposta come Home Page Alessandro Marchisio:

153 aggiornamento febbraio Javascript Link in rete Alessandro Marchisio:

154 aggiornamento febbraio 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 Alessandro Marchisio:

155 aggiornamento febbraio ASP Javascript Ridirezionamento verso un’altra pagina In HTML: In JavaScript In ASP (oggetto Response) Response.Redirect "www.esempio.com" Includere un file mantiene oggetto request, ma non le variabili semplici non va tra <%, mantiene tutte l'ambiente... Alessandro Marchisio:


Scaricare ppt "Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili Funzioni - Array - Oggetti Predefiniti - Funzionalità matematiche."

Presentazioni simili


Annunci Google