Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili...

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

[email protected]

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

[email protected]


Javascript

Caratteristiche Codice interpretato dal browser ed eseguito

riga per riga Codice visibile all'utente e facilmente

copiabile Limitate capacità per ragioni di sicurezza

[email protected]


Javascript

Versioni Javascript (Netscape 1996) e Jscript

(Microsoft) DHTML (architettura D.O.M. – Document

Object Model di Microsoft) http://www.ecma.ch (standard)

[email protected]


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>

[email protected]


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.

[email protected]


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

[email protected]


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')">

[email protected]


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

[email protected]


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.

[email protected]


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 \"

[email protected]


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

[email protected]


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 + [ ]

[email protected]


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.

[email protected]


Javascript

Generali: DEBUG

Personalmente, in caso di situazioni complesse aggiungo queste poche righe in coda alle pagine:

<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!

[email protected]


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

[email protected]


Javascript


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)

[email protected]


Javascript


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

[email protected]


Javascript


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(".....")

[email protected]


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

[email protected]


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

[email protected]


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)

[email protected]


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

[email protected]


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

[email protected]


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

[email protected]


Javascript


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

[email protected]


Javascript


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>

[email protected]


Javascript


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

[email protected]


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>

[email protected]


Javascript

Operazioni a livello di bitShift a destraShift a sinistraANDOR

[email protected]


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]}

[email protected]


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

[email protected]


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.

[email protected]


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.

[email protected]


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>

[email protected]


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)

[email protected]


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

[email protected]


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

[email protected]


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!

[email protected]


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)

[email protected]


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--')

[email protected]


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

[email protected]


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])

[email protected]


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)

[email protected]


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

[email protected]


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"

[email protected]


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)

}

[email protected]


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

[email protected]


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

[email protected]


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()

[email protected]


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 */

[email protected]


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.

[email protected]


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")

…

[email protected]


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

[email protected]


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>

[email protected]


Javascript

Funzioni: passaggio parametri - esempio cont. 

<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

[email protected]


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.

[email protected]


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

[email protected]


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

[email protected]


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" >











</script>












</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


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

[email protected]


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>












</script>

[email protected]


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>












</script>

[email protected]


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>












</script>

[email protected]


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

[email protected]


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.)

[email protected]


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!)

[email protected]


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

[email protected]


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

[email protected]


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>

[email protected]


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>

[email protected]


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()

[email protected]


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>












</script>

[email protected]


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

[email protected]


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

[email protected]


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"];

[email protected]


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]

[email protected]


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.

[email protected]


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.

[email protected]


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)

[email protected]


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

[email protected]


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

[email protected]


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'

[email protected]


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.

[email protected]


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

[email protected]


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>

[email protected]


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.



[email protected]


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.

[email protected]


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

[email protected]


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'

[email protected]


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

[email protected]


Javascript

Timer - Esempio

Il titolo continua ad aggiornarsi!

[email protected]


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.

[email protected]


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'



[email protected]


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'



[email protected]


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



[email protected]


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



[email protected]


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.



[email protected]


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

[email protected]


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

[email protected]


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

[email protected]


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

[email protected]


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....

[email protected]


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)

[email protected]


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)

[email protected]


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

[email protected]


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 */

[email protected]


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.

[email protected]


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

[email protected]


Javascript

Stringhe e caratteri Ascii Il metodo charCodeAt(posizione) ritorna il codice

Ascii del carattere nella posizione indicata. x = "ABC"; alert(x.charCodeAt(0)) // 65

Il metodo String.fromCharCode(listaCodici) permette di costruire una stringa a partire da codici Ascii

w = String.fromCharCode(123,65,125); //{A}

In HTML si può scrivere &#codice; ES: {A&#125

[email protected]


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'))

[email protected]


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

[email protected]


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

[email protected]


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>

[email protected]


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

[email protected]


Javascript

L'oggetto event: proprietà Le proprietà dell'oggetto event cambiano

sensibilmente da Netscape a Explorer, e da versione a versione

[email protected]


Javascript

L'oggetto event: un esempio

È possibile intercettare gli eventi della tastiera e del mouse. Questo esempio funziona con Explorer

[email protected]


Javascript



Gestione degli errori Con Javascript 1.1 (1999, Explorer 5 e

Netscape ) è possibile utilizzare costrutti del tipo try { BloccoDiCodice } catch(err) { BloccoCodiceSeErrore

//err, err.description, err.number }finally {BloccoDaEseguireComunque}

E' possibile simulare degli errori, all'interno del BloccoDiCodice utilizzando l'istruzione throw. L'evento Error conterrà quanto indicato dopo throw (oggetto, stringa, ecc.)try { if (a==0) throw "Divisione per 0"}

[email protected]


Javascript



Gestione degli errori (segue) try racchiude codice che può dare errore, è

possibile provocare errori con l'istruzione throw catch( e ): in caso di errore o dopo un'istruzione

throw, il controllo passa al blocco racchiuso da catch. Viene generato un evento error, che viene passato al catch e ha tre proprietà: number, description e message

finally racchiude un blocco di istruzioni che vengono eseguite sempre, o dopo il blocco nel try o dopo il blocco nel catch o prima di un return

[email protected]


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;

}

[email protected]


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

[email protected]


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" }

[email protected]


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")



[email protected]


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)



[email protected]


Javascript

Classi di oggetti: metodi nativi



A questo punto posso creare una nuova istanza di oggettoFoto e richiamare il metodo fotodisplay

foto1 = new oggettoFoto("15x21", "paese", "ekta");

foto1.fotoDisplay()

[email protected]


Javascript

Classi di oggetti: metodi aggiuntivi



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

[email protected]


Javascript

overloading di metodi esistenti: toString() e valueOf()



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

[email protected]


Javascript

Estendiamo la classe String



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

[email protected]


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.



[email protected]


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!)



[email protected]


Javascript

Le espressioni Regolari (classi) Si possono definire particolari

sottoinsiemi di caratteri tra parentesi quadre [ ]

Si può indicare tutti i caratteri tranne un sottoinsieme con [^ ] (^alt+94)

Si possono indicare singoli caratteri o intervalli tipo [0-9] (equivale a \d) (/alt+47)

[A-Za-z] indica solo lettere sia maiuscole che minuscole [^24680] indica solo numeri dispari



Gruppi consecutivi di caratteri si identificano con il primo, seguito da - e dall'ultimo (a-e=abcde). Se il primo carattere è ^, si intende qualsiasi carattere ESCLUSI quelli tra parentesi.

Per includere il simbolo ] lo si deve mettere per primo, mentre per inserire il simbolo ^ lo si deve mettere da qualsiasi parte TRANNE che all'inizio, e per il carattere - deve essere l'ULTIMO prima della parentesi quadra.

[email protected]


Javascript

Le espressioni Regolari (ripetizioni) Tra parentesi graffe si può indicare quante

volte (da un minimo ad un massimo o esattamente) deve essere presente un carattere di una classe.

{x,y} da x volte a y volte {x,} almeno x volte {x} esattamente x volte Abbreviazioni per casi particolari:

? {0,1} + {1,} * {0,}



Di default le 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

[email protected]


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



[email protected]


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

(?: )



[email protected]


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)



[email protected]


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.



[email protected]


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



[email protected]


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



[email protected]


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



[email protected]


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

[email protected]

la cookie rimane disponibile

se specifico expires < oggi viene modificato il file la cookie non è più disponibile



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

[email protected]


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



Esempi:

< cifra esadecimale > ::=0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F

[email protected]


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)



[email protected]


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)



[email protected]


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>



Processing Istruction

Elemento

Attributo:

attributes(0).name="id"

attributes(0).text="10"

Nodo

tagName="recapito"

childNodes.length= 4

[email protected]


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



[email protected]


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()



[email protected]


Javascript

function traverse(tree) {

if(tree.hasChildNodes()) {

document.write('<ul><li>'); document.write('<b>'+tree.tagName+' : </b>');

var nodes=tree.childNodes.length;

for(var i=0; i<tree.childNodes.length; i++) traverse(tree.childNodes(i)); document.write('</li></ul>');

}

else

document.write(tree.text);

}

function initTraverse(file) {

loadXML(file);

var doc=xmlDoc.documentElement;

traverse(doc);

}



xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile) { xmlDoc.async="false"; xmlDoc.onreadystatechange=verify; xmlDoc.load(xmlFile);

}

function verify() {

if(xmlDoc.readyState!=4) return false;

}

[email protected]


Javascript

XML: parseErrorxmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.load(nf)

xmlDoc.parseErrorerrorCode (!=0)

reason, line, linePos, srcText, url, filePos



[email protected]


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)



[email protected]


Javascript

home page

<a href="#"onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.extrowebsite.com');">Imposta come Home Page</a>



[email protected]


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



[email protected]


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



[email protected]


ASP JavascriptRidirezionamento verso un’altra pagina

In HTML:

<META http-EQUIV=REFRESH CONTENT="2;URL=www.esempio.com">

In JavaScript

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

In ASP (oggetto Response)

Response.Redirect "www.esempio.com"

Includere un file

<% Server.execute( nomefile ) %> mantiene oggetto request, ma non le variabili semplici

  non va tra <% , mantiene tutte l'ambiente...

Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili...

Documents

Transcript of Javascript Dispense corso di base… Oggetti: metodi, proprietà, eventi - Istruzioni - Variabili...