javascript dispense corso di base… oggetti: metodi, proprietà, eventi - istruzioni - variabili...
TRANSCRIPT
JavascriptDispense 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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Caratteristiche Codice interpretato dal browser ed eseguito
riga per riga Codice visibile all'utente e facilmente
copiabile Limitate capacità per ragioni di sicurezza
aggiornamento febbraio 2005
Javascript
Versioni Javascript (Netscape 1996) e Jscript
(Microsoft) DHTML (architettura D.O.M. – Document
Object Model di Microsoft) http://www.ecma.ch (standard)
aggiornamento febbraio 2005
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>
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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 <!-- -->
aggiornamento febbraio 2005
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')">
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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 \"
aggiornamento febbraio 2005
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, invecealert('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
aggiornamento febbraio 2005
Javascript
Istruzioni
Una solo istruzione per rigaalert('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 + 123 e ALT+125 ( tastierino numerico)oppure SHIFT+AltGr+[ ] o Shift+ctrl+alt + [ ]
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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 impartirecomandi e chiamare funzioni in modo interattivo!
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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 dialogocon due pulsanti (Ok e Annulla). Questa funzione ritorna un oggetto di tipo boolean:
true (tasto OK) o false (tatso Annulla, ESC o x)
aggiornamento febbraio 2005
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 dialogocon una casella di testo e due pulsanti (Ok e Annulla). Ritorna il valore della casella di testo (variabile di tipostring) o null (object) se si preme Annulla o Esc
aggiornamento febbraio 2005
Javascript
Finestre di input-output
Il metodo window.open<script language="Javascript">
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()
</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(".....")
aggiornamento febbraio 2005
JavascriptFinestre di input-output
Il metodo window.open L'indirizzo può essere:
relativo ("pagina.htm"), assoluto ("http://...") 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
menubartoolbar
scrollbars
aggiornamento febbraio 2005
Javascript
Algebra Boolena: True table
0 1
0 0 0
1 0 1
AND 0 1
0 0 1
1 1 1
OR
0 1
0 0 1
1 1 0
XOR
Algebra BooleanaAND 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)
0 1
1 0
NOT
aggiornamento febbraio 2005
Javascript
Algebra Booleana: proprietà NOT:
NOT NOT A = A; numero pari di NOT in cascata equivalgono a nessunoNOT 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,... è = 1A AND B AND C AND..= 0 se almeno uno tra A,B,C,... è = 0A AND A = A, A AND B AND B = A AND B A OR A = A, A OR B OR B = A OR B
XORA XOR B XOR B = A (utile nei codici a chiave: b è la chiave, a^b il msg cifrato trasmesso)
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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>
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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>
aggiornamento febbraio 2005
Javascript
Operazioni a livello di bitShift a destraShift a sinistraANDOR
aggiornamento febbraio 2005
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]}
aggiornamento febbraio 2005
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} incrementoTRUE
FALSE
Istruzione seguente
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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 browserk = ''; for (ii in o) k += '\n'+ii+':'+o[ii]alert(k)
</script>
aggiornamento febbraio 2005
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 = 10.44 // sarà un oggetto number (Float)
a = 010 // sarà un number (in ottale, =8)
a = 0xff // sarà un number (in esadecimale)
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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 dialogof = undefined; if (f) alert() //undefined
ma f==true, f==false sempre falsi!
aggiornamento febbraio 2005
Javascript
Dati e variabili: typeof L'operatore typeof permette di distinguere tra
string, number, boolean, object, function e undefinedEsempi:
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)
aggiornamento febbraio 2005
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--')
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Dati e variabili: Array Associativi
E' possibile utilizzare i vettori associativi, cioè si usa come stringa un nome al posto di un numerogiorni["pasqua"] = "domenica" I vettori associativi non influenzano la proprietà length, che vale sempre max indice definito + 1Per un array associativo length vale sempre 0, per scorrerlo devo usare il costrutto for (p in arrayAssoc) alert(p+':'+arrayAssoc[p])
aggiornamento febbraio 2005
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)
aggiornamento febbraio 2005
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 ascendentex = "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 ))
aggiornamento febbraio 2005
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"
aggiornamento febbraio 2005
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)
}
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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()function pippo()
{{
msg = 'Ciao da Pippo'msg = 'Ciao da Pippo'
alert(msg)alert(msg)
}}
pippo()pippo()
aggiornamento febbraio 2005
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 */
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
Javascript
Funzioni: dal particolare al generalemsg = "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")
…
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Funzioni: passaggio parametri - esempio<script language="Javascript">/* questa funzione riceve 2 parametri:
combo è un oggetto selecttestoDaAggiungere è una stringa
Nota:funziona solo su Explorer. */function aggiungiOpzione(combo, testoDaAggiungere){
opz = document.createElement("OPTION")opz.text = testoDaAggiungerecombo.options.add(opz)
}</script>
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
<script language="JavaScript" >
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
</script>
<script language="JavaScript" >
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
</script>
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
aggiornamento febbraio 2005
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 = "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
</script>
<script language="JavaScript" >
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
</script>
aggiornamento febbraio 2005
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 = "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
</script>
<script language="JavaScript" >
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
</script>
aggiornamento febbraio 2005
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 = "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
</script>
<script language="JavaScript" >
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
</script>
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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.)
aggiornamento febbraio 2005
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!)
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
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
aggiornamento febbraio 2005
Javascript
La collezione document.all (Explorer) DHTMLContiene tutti gli oggetti contrassegnati da un IDE' 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>
aggiornamento febbraio 2005
Javascript
Le tabelle in DHTMLL'array cells contiene tutte le celle,in ordine di creazioneLa 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>
</script>
aggiornamento febbraio 2005
Javascript
document.selection (IE)type, typeDetail, clear(), empty(), createRange()si attiva sull'evento onselect di qualsiasi oggettometodo createRange() restituisce un oggetto con queste
proprietà: text, htmlText, offsetLeft, boundingLeft, offsetTop, boundingTopboundingWidth, boundingHeight
document.selection.createRange().text è modificabile!
(attenzione a quale oggetto ha il fuoco) duplicate() execCommand() expand() move() moveEnd()
moveStart() inRange() isEqual()
aggiornamento febbraio 2005
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 = "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
</script>
<script language="JavaScript" >
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
</script>
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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">
….</form> Posso riferirmi al form primoForm con una di queste
tre sintassi:
document.forms[0]; document.primoForm;
document.forms["primoForm"];
aggiornamento febbraio 2005
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]
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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)
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Le combo e le liste: accesso da script
Con l'ausilio di javascript è possibile spostare elementi da una lista ad un'altra, aggiungereopzioni, 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'
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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.
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>
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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 framesdocument.frames.length //numero di frame
document.frames[0] //oggetto window relativo al primo
//frame dichiarato.
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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'
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Timer - Esempio
Il titolo continua ad aggiornarsi!
aggiornamento febbraio 2005
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.
aggiornamento febbraio 2005
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'
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Marquee Serve per gestire scritte scorrevoli Metodi: start(), stop() behaviour = "slide|scroll|alternate"
direction="up|down|left|right"scrollAmount=num pixel scrollscrollDelay=msec
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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 = sabatoadesso.getMonth() // 0=Gennaio…11=Dicembreadesso.getYear() // 2001, 2002, ecc.adesso.getTime() // numero millisec. dal 1/1/70
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Differenza tra date
Ogni data viene memorizzata come un numero di millisecondi passati da una data prefissata (1/1/1970 00: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
aggiornamento febbraio 2005
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....
aggiornamento febbraio 2005
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)
aggiornamento febbraio 2005
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 formulaz = parseInt(Math.random()*(massimo -minimo) +minimo)
aggiornamento febbraio 2005
Javascript
Numeri interi e arrotondamenti. Funzione\parseFloat() -3.2 -3.7 3.2 3.7
Math.ceil()(all'intero superiore)
-3 -3 4 4
Math.floor()(all'intero inferiore)
-4 -4 3 3
Math.round()(all'intero più vicino)
-3 -4 3 4
parseInt()(all'intero prima del pto dec.)
-3 -3 3 3
aggiornamento febbraio 2005
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 */
aggiornamento febbraio 2005
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.lengthSe fine < inizio vengono automatic. invertite
w = "Benvenuto nel sito della montagna"; lung = w.length //33a = w.charAt(2) //n equivale a w.substring(2,3)b = w.substring(3,9) //venuto; la "o" è l'8° car.
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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}
aggiornamento febbraio 2005
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'))
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
Altre funzioni con le stringhe Elementi vuoti e separatoriLista= "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
aggiornamento febbraio 2005
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>
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
Javascript
L'oggetto event: proprietà Le proprietà dell'oggetto event cambiano
sensibilmente da Netscape a Explorer, e da versione a versione
aggiornamento febbraio 2005
Javascript
L'oggetto event: un esempio
È possibile intercettare gli eventi della tastiera e del mouse. Questo esempio funziona con Explorer
aggiornamento febbraio 2005
Javascript
Alessandro Marchisio:
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"}
aggiornamento febbraio 2005
Javascript
Alessandro Marchisio:
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
aggiornamento febbraio 2005
Javascript
Gestione degli errori: onerror Altra possibilità è programmare l'evento
onerror, come qualsiasi altro evento Funziona correttamente solo su Netscapewindow.onerror = myError;
function myError(message, url, line)
{
alert('Errore individuato: '+ message + ',' + url +',' +line);
return true;
}
aggiornamento febbraio 2005
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
aggiornamento febbraio 2005
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" }
aggiornamento febbraio 2005
Javascript
Classi di oggetti: proprietà Si può creare un nuovo tipo di oggetti, utilizzando
funzioni e il predicato thisfunction 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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Classi di oggetti: metodi nativi
Alessandro Marchisio:
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()
aggiornamento febbraio 2005
Javascript
Classi di oggetti: metodi aggiuntivi
Alessandro Marchisio:
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 = fotoDisplayoggettoFoto.prototype.display = fotoHtmlDisplayfoto1.display() //in questo caso avremo i dati in una tabella
aggiornamento febbraio 2005
Javascript
overloading di metodi esistenti: toString() e valueOf()
Alessandro Marchisio:
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
aggiornamento febbraio 2005
Javascript
Estendiamo la classe String
Alessandro Marchisio:
Alessandro Marchisio:
function fz_contrario(){
var t = thisvar r = ""for (var i = t.length; i >= 0; i--)
r += t.charAt(i)return r
}
String.prototype.contrario = fz_contrarioString.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
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
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.
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
Di default le occorrenzesono 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
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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
(?: )
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
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 regolarestr.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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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: /[^\s]+?@[^\s]+.[^\s]+/Link html
var re = /<A[\w\W]*? href[\w\W]*?=[^>]*?>/gi
qualsiasi_tag = /<[^>]*?>/g; NOTAG notag = /[>]([^<])+</g
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Cookiedocument.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:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Cookiese non specifico expires
- cookie registrata in memoria
- viene mantenuta finchè c'è una qualsiasi finestra di explorer aperta
se specifico expires > oggiviene scritto (IE) un file
la cookie rimane disponibile
se specifico expires < oggi viene modificato il file la cookie non è più disponibile
Alessandro Marchisio:
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
aggiornamento febbraio 2005
Javascript
formalismo di Backus-NaurLa BNF Backus-Naur Form è un linguaggio standard per descrivere un altro linguaggio
< > elemento di cui si parla
::= è definito comenulla AND| OR[ ] opzione
{ }nm ripetizione da m a n
* qualsiasi? qualsiasi carattere
Alessandro Marchisio:
Alessandro Marchisio:
Esempi:
< cifra esadecimale > ::=0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F
aggiornamento febbraio 2005
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.fileSystemObjectmicrosoft.xmldom, ADODB.Connection, Shell.Application
(Hkey_Classes_root)
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
ActiveXObject("Shell.Application")
.open(num); 0: desktop1: IExplore2: %USERPROFILE%\Menu Avvio\Programmi3: Pannello di controllo 4: stampanti 5: documenti6: preferiti 7:esecuzioneAutomatica
.Explore(path); .shutDownWindows(); .fileRun(); findComputer();
.findFiles(), setTime() , windows()
.shellExecute(prg,arg)
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
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/1232454</cellulare>
</anagrafica>
Alessandro Marchisio:
Alessandro Marchisio:
Processing Istruction
Elemento
Attributo:
attributes(0).name="id"
attributes(0).text="10"
Nodo
tagName="recapito"
childNodes.length= 4
aggiornamento febbraio 2005
Javascript
Microsotf.XMLDOMvar 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 correntexmlObj.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:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Microsotf.XMLDOMxmlObj.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:
Alessandro Marchisio:
aggiornamento febbraio 2005
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);
}
Alessandro Marchisio:
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;
}
aggiornamento febbraio 2005
Javascript
XML: parseErrorxmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load(nf)
xmlDoc.parseErrorerrorCode (!=0)
reason, line, linePos, srcText, url, filePos
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
home page
<a href="#"onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.extrowebsite.com');">Imposta come Home Page</a>
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
Javascript
Link in retehttp://www.html.it http://www.javascript.it/
http://javascript.internet.com/ http://www.webreference.com/js/
http://www.jspoint.it/ http://www.jsdir.com/
http://mailgate.supereva.it/it/it.comp.lang.javascript/
http://www.echoecho.com/it/jsquickref.htm
http://www.geocities.com/SiliconValley/7358/script.htm
http://online.infomedia.it
http://builder.cnet.com/
http://www.dnjonline.com/articles/tutorials/jscript1.htmlhttp://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
http://safari.oreilly.com/main.asp?bookname=jscript4
http://www.remorombi.it/studio/cjs/index.html
http://www.c-point.com/pjedit.htm
Alessandro Marchisio:
Alessandro Marchisio:
aggiornamento febbraio 2005
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:
Alessandro Marchisio:
aggiornamento febbraio 2005
ASP JavascriptRidirezionamento verso un’altra pagina
In HTML:
<META http-EQUIV=REFRESH CONTENT="2;URL=www.esempio.com">
In JavaScript
<SCRIPT LANGUAGE="JavaScript">
<!--
window.location="http://www.esempio.com";
// --></SCRIPT>
In ASP (oggetto Response)
Response.Redirect "www.esempio.com"
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...
Alessandro Marchisio:
Alessandro Marchisio: