Introduzione all`HTML dinamico

Transcript

5.2) Aggiunta di Script e accesso agli attributi dei tag
I fogli di stile finora rischi mostrano come sia possibile creare non numerosi effetti nelle pagine html. La vera potenza
del html dinamico è rappresentata però dalla capacità di manipolare dinamicamente le proprietà dei singoli tag mediante
degli script che permettono di aggiornare le posizioni e gli stili degli elementi della pagina. Esistono molti linguaggi di
script, fra i più famosi VBscript e Javascript. Per studio più approfondito di questi linguaggi avverrà in un successivo
capitolo. Qui daremo solo uno sguardo generale al modo in cui è possibile interagire con una pagina Web per mezzo di
uno script. Ricordiamo che l’esecuzione della pagina Web e dello script avviene sempre dal lato client.
5.2.1) Posizionamento di Script
Il codice è convenzionato nella pagina all’interno dei marcatori <SCRIPT> e </SCRIPT>. All’interno del marcatore
d’inizio si può specificare l’attributo LANGUAGE per indicare al browser quale interprete deve utilizzare per
l’esecuzione della pagina. Se si omette tale attributo il browser tenterà di interpretare tale informazione dalle istruzioni,
rendendo più lenta l’esecuzione. Per default si suppone che il linguaggio sia JavaScript.
<SCRIPT LANGUAGE=JAVASCRIPT>
… istruzioni javascript ....
</SCRIPT>
<SCRIPT LANGUAGE=VBSCRIPT>
… istruzioni vbscript ....
</SCRIPT>
Il codice può essere posizionato ovunque nella pagina. Se si sta utilizzando il codice per inserire qualcosa nella pagina
Web, come ad esempio l’ora o la data, lo script deve essere posizionato appropriatamente:
<SCRIPT LANGUAGE=VBSCRIPT> document.write (Now) </SCRIPT>
in questo esempio viene eseguita la funzione Now del VBscript ed il risultato viene passato al metodo write dell’oggetto
document (di questi oggetti dei relativi metodi parleremo meglio in un successivo capitolo).
Se la pagina contenente il codice fosse eseguita su un browser non abilitato o non in grado di riconoscere il linguaggio,
si otterrebbe il risultato della visualizzazione del codice e non della sua esecuzione. Per evitare questo problema si
adotta la tecnica di racchiudere il codice tra due tag di commento  in modo da nasconderlo durante la
visualizzazione.
<!-… istruzioni javascript ....
-->
</SCRIPT>
5.2.2) Creazione di routine di script
Spesso si usa la tecnica di creare routine di codice separate che verranno poi richiamate nei punti opportuni allo stesso
modo come si usano i sottoprogrammi nei linguaggi di programmazione.
<SCRIPT
LANGUAGE=JAVASCRIPT>
<!-function routine1(){
….
}
function window_onLoad(){
….
}
function routine2(){
….
return 42 ;
}
-->
</SCRIPT>
<!-sub routine1()
….
End sub
sub window_onLoad()
….
5.2.3) Accesso ai tag HTML tramite script
HTML dinamico permette, attraverso l'uso congiunto di CSS (Cascading Style Sheet), script e codice HTML, di creare
pagine web interattive mediante i cosiddetti stili dinamici. Nella pratica ciò significa che gli sviluppatori di pagine web
14
Appunti a cura del Prof. G.Tombolini
La programmazione Web – Html dinamico
hanno, grazie a queste nuove specifiche, la possibilità di modificare l'aspetto di un documento senza che questo venga
ricaricato.
L’aggiornamento delle proprietà utilizzando il codice avviene ricorrendo all’oggetto style. Dato che l’attributo STYLE
permette di impostare le proprietà di visualizzazione dei vari marcatori, l’oggetto style permette di accedere e
modificare dinamicamente le stesse. Il marcatore che si vuole modificare, va comunque identificato univocamente
all’interno del testo; questo si ottiene utilizzando la proprietà ID con la quale è possibile assegnare un nome ad ogni
oggetto di una pagina Web. L’accesso avviene con un tecnica del tipo <idTag>.<proprietà>. Esempio
<IMG ID=MyImage SRC=”logo1.gif” WIDTH=100 HEIGHT=100>
si ottiene l’accesso alla larghezza e all’altezza di grande
MyImage.width e MyImage.height
o anche
<IMG ID=MyImage SRC=”logo1.gif” STYLE=”position:absolute; top:50; left:200”>
MyImage.style.top e MyImage.style.left
Non si può fare riferimento ad una proprietà che non è stata dichiarata nel marcatore. Per ovviare a questo problema è
possibile utilizzare tre metodi, riconosciuti da tutti i marcatori, in grado di aggiungere, rimuovere e variare proprietà.
MyImage.removeAttribute “top”
MyImage.setAttribute “color” “blue”
MsgBox MyImage.getAttribute “width”
Per inciso, si ricorda che l’accesso alle proprietà top, left, width e height di un marcatore può essere effettuata
utilizzando le proprietà postop, posleft, poswidth e posheight.
Ulteriori informazioni relative all’uso del linguaggio di script verranno fornite dopo lo studio del DOM (document
object model).
15
5.3) Il Document Object Model –DOM
Il DOM è la rappresentazione che i browser fanno nella pagina HTML caricata. Tramite questa rappresentazione si
riesce a manipolare il contenuto della pagina stessa. Purtroppo tale rappresentazione differisce da browser a browser.
Attualmente il DOM implementato in MSIE 4 è più completo di quello proposto da Netscape. Il nuovo DOM di MS è
accessibile sia a JavaScript che VBScript ed include l'oggetto "all", che rappresenta l'insieme di tutti gli elementi di una
pagina. Nella versione messa a punto da Netscape gli eventi sono limitati a specifici oggetti, mentre Microsoft apre gli
elementi di una pagina a tutti gli eventi. Ciò consente l'accesso ad ogni attributo di un elemento, compresi: colore,
sfondo, font. All'interno del DOM non tutti gli oggetti si trovano sullo stesso piano, ma ognuno di essi esiste in quanto
relazionato ad insiemi di altri oggetti. Il modello di oggetto è un’interfaccia tra il codice sorgente HTML dinamico nella
pagina e le routine software del browser che creano la finestra inseriscono in essa gli elementi definiti nella pagina. Il
modello di oggetto espone una gamma di oggetti, metodi, proprietà ed eventi che sono presenti e attivi all’interno del
software del browser, al html e al codice di script della pagina
5.3.1) Oggetto WINDOW
L'oggetto di primo livello è "window" che è l’oggetto genitore di tutti gli altri oggetti della struttura.
Esso a sua volta, contiene l'oggetto "document" che in realtà è il nucleo di tutte le cose. L'oggetto
"window" espone le informazioni relative al documento e all'URL corrente, nonché agli URL
visitati. Come i documenti HTML tradizionali, i FRAMESET vengono esposti mediante l'elemento
"document", ma a differenza dei primi suddividono lo schermo in piu' frames. Tale peculiarità fa sì
che ogni FRAMESET venga esposto come un altro oggetto "window". All’interno del modello di
oggetto possiamo trovare delle collez
ioni di oggetti (come frames). Si può accedere al singolo oggetto di una collezione per mezzo del
suo nome o della sua posizione numerica. L’oggetto predefinito per un’eventuale script della pagina
è l’oggetto window attivo. Si può usare la parola chiave parent per risalire la gerarchia delle
Window; si può accedere alla finestra di livello più alto per mezzo della parola chiave top.
Progetto Window a una gamma di proprietà, metodi ed eventi. Esaminiamo qui quelli di utili.
5.3.1.1) Proprietà dell’oggetto WINDOW
La tabella che segue mostra tutte le proprietà di un oggetto Window:
Parent
Self
Top
Name
Opener
Closed
Status
defaultStatus
returnValue
Client
Document
Event
History
location
Navigator
Screen
restituisce la finestra superiore della finestra corrente
Fornisce un riferimento alla finestra corrente
fornisce un riferimento all’oggetto Window superiore
Specifica il nome della finestra
Restituisce un riferimento alla finestra che ha creato la finestra corrente
Indica nella finestra chiusa
Il testo visualizzato nella barra di stato del browser
Il messaggio predefinito visualizzato nella barra di Stato del browser
Consente di specificare un valore di ritorno per l’evento o per una finestra di dialogo
Un riferimento che restituisce l’oggetto navigator del browser
Riferimento a sola lettura all’oggetto document della finestra
Riferimento a sola lettura all’oggetto event globale
Riferimento a sola lettura all’oggetto history della finestra
Riferimento a sola lettura all’oggetto location della finestra
Riferimento a sola lettura all’oggetto navigator della finestra
Riferimento a sola lettura all’oggetto screen globale
5.3.1.2) Metodi dell’oggetto WINDOW
Forniscono vari modi per manipolare una finestra ed eseguire operazioni al suo interno.
• Metodi Open e close: creano una nuova finestra (window.open “nuova.htm”) o chiudono la finestra attuale.
Il formato è: window.open URL, caratteristiche, nome. Caratteristiche rappresenta una stringa contenente le
istruzioni per specificare la posizione, la dimensione, il tipo di finestra, le barre di scorrimento, la barra di Stato,
della barra degli strumenti, ecc.
16
•
•
•
•
•
•
•
•
•
•
•
•
Il metodo showModalDialog permette di creare delle finestre di dialogo o modali (window.showModalDialog
“nuova.htm”).
Il metodo showHelp permette di creare delle finestre di help (window.showHelp “helppage.chm”).
Il metodo alert permette di creare una finestra di messaggio (window.alert “questo è un messaggio”).
Il metodo prompt permette di acquisire un input dall’utente (locazione=window.prompt (“digita il tuo nome”,
“anonimo”).
Il metodo confirm permette di acquisire una conferma dall’utente (risultato=window.prompt (“digita il tuo nome”,
“anonimo”) ).
Il metodo navigate permette caricare una nuova pagina nella finestra attuale (window.navigate URL).
Il metodo blur equivale alla pressione del tasto TAB spostando il fuoco dalla finestra attuale a quella successiva.
Il metodo focus sposta il fuoco sulla finestra attuale.
Il metodo scroll trascorrere la finestra di 250 pixel a destra e 150 in basso.
Il metodo setTimeout permette di impostare un temporizzatore che avvii l’esecuzione dopo un certo numero di
millisec (window.setTimeout(“Mytimer”, num_ms,”VBSCRIPT”), dove Mytimer è una routine di codice script: sub
Mytimer …. End sub) . La routine viene eseguita una sola volta. clearTiemout permette di resettare il Timer
impostato.
Il metodo setInterval funziona come setTimeout con la differenza che viene richiamato ripetutamente. clearInterval
permette di resettare il Timer impostato.
Il metodo execscript permette eseguire uno script.
5.3.1.3) Eventi dell’oggetto WINDOW
onblur
Onfocus
Onhelp
Onresize
Onscroll
Onerror
Onbeforeunload
Onload
onunload
Si verifica quando il controllo perde il fuoco di immissione
Si rideva quando il controllo riceve il fuoco di immissione
Si verifica quando l’utente preme F1 o Help
Si verifica quando l’elemento od oggetto viene ridimensionato dall’utente
Si verifica quando l’utente fa scorrere il contenuto della pagina o elemento
Si verifica quando si presenta un errore di caricamento di un documento o immagine
Si verifica appena prima che la pagina venga scaricata, consentendo di annullare l’evento unload
Si rideva gravemente stato completamente caricato
Si è di linea demente prima della pagina venga scaricata
5.3.2) Oggetti sussidiari all’oggetto WINDOW: history
L’oggetto history contiene informazioni sugli url che il browser ha visitato, memorizzati nell’elenco history. Ciò
consente di spostarsi all’interno dell’elenco. L’unica proprietà è length restituisce il numero di elementi della
collezione. I metodi sono:
• Back carica l’url precedente nell’elenco history del browser
• Forward carica l’url successivo nell’elenco history del browser
• Go n carica l’url nella posizione n nell’elenco history del browser
5.3.3) Oggetti sussidiari all’oggetto WINDOW: Navigator
Rappresenta l’applicazione stessa del browser che fornisce informazioni sul suo produttore, sulla versione e le sue
capacità.
Proprietà
appCodeName
appName
appVersion
cookieEnabled
userAgent
Collezione
mimeTypes
Plugins
metodo
javaEnabled
taintEnabled
descrizione
Il nome di codice del browser
Il nome di prodotto del browser
La versione del browser
Indicate sono consentiti interventi nel browser da parte del client
Intestazione dell’agente utilizzatore trasmesso nel protocollo http dal client al server
descrizione
Collezione di tutti documenti ed i tipi di file e supportati dal browser
Collezione di tutti elementi incorporati nella pagina
descrizione
Restituisce il True o False a seconda che sia o no installato un VM java
Restituisce false per compatibilità con Netscape
17
5.3.4) Oggetti sussidiari all’oggetto WINDOW: Location
Contiene informazioni sull’url della pagina corrente e consente di ricaricare o caricarono a pagina.
Proprietà
Href
Hash
Host
Hostname
Pathname
port
Protocol
Search
metodo
Assign
Reload
Replace
descrizione
L’url completo sotto forma di stringa questa proprietà rappresenta anche un metodo di navigazione come navigate
Stringa che segue il simbolo # nell’url
La parte hostname:port della locazione o url
la parte hostname della locazione o url
il nome di percorso del file o oggetto che segue la terza barra in un url
Il numero di porta in un url
Là sotto stringhe di viale fino ai primi due punti inclusi che indica il metodo di accesso dell’url
Il contenuto della stringa di ricerca o dati del modulo seguiti da ? nell’urlo completo
descrizione
Carica un’altra pagina. È equivalente a modificare la proprietà window.location.href
Carica di nuova pagina corrente
Carica la pagina, sostituendo con il relativo url la voce del documento corrente nella storia della sezione
5.3.5) Oggetti sussidiari all’oggetto WINDOW: event
Quest’oggetto consente al linguaggio di script di ottenere maggiori informazioni su ogni evento che si verifica nel
browser. Fornisce una grande gamma di proprietà.
Proprietà
x / y
screenX / screenY
button
altkey/ ctrlKey / shiftKey
keyCode
fromElement/ toElement
cancelBubble
descrizione
Coordinata x / y del puntatore del mouse
coordinata x / y del puntatore del mouse in relazione allo schermo
Il pulsante del mouse che è stato premuto per attivare l’evento
restituisce lo stato dei tasti alt / ctrl / shift
il codice ascii nel tasto premuto
Restituisce l’elemento dal quale o sul quale si sta spostando il mouse
Viene impostato per evitare che l’evento corrente si propaghi attraverso la gerarchia
5.3.6) Oggetti sussidiari all’oggetto WINDOW: screen
Fornisce informazioni sulla risoluzione dello schermo.
Proprietà
Width
Height
bufferDepth
colorDepth
UpdateInterval
descrizione
La larghezza in pixel dello schermo dell’utente
L’altezza in pixel dello schermo deludente
Specifica se e come debba essere utilizzato un buffer bitmap fuori schermo
Il numero di bit per pixel del dispositivo di visualizzazione dello schermo
Imposta o restituisce l’intervallo tra aggiornamenti di schermo nel client
18
5.3.7) L’oggetto DOCUMENT
L’oggetto document rappresenta il documento HTML nella finestra del browser. È possibile utilizzare quest’oggetto per
ottenere tutti i tipi di informazione e relativi al documento, tramite le sue proprietà e i suoi metodi, ma non si può
utilizzare anche per modificare gli elementi e il testo della pagina. Esso può essere utilizzato inoltre per elaborare gli
eventi.
5.3.7.1) Le proprietà dell’oggetto DOCUMENT
Proprietà
Title
Body
Selection
URL
Location
Domain
Cookie
lastModified
parentWindow
descrizione
Il titolo del documento definito nelle marcatore <TITLE>
Riferimento a sola lettura all’oggetto del corpo implicito del documento
Riferimento a sola lettura all’oggetto selezione del documento
Uniform Resource Locator (indirizzo) relativo al documento corrente
L’url completo nel documento
Il dominio del documento da utilizzare per motivi sicurezza
Il valore stringa di un elemento memorizzato dal browser
Calata dell’ultima modifica del file sorgente relativo alla pagina
Restituisce la finestra che contiene il documento
bgColor
fgColor
linkColor
alinkColor
vlinkColor
Il colore di sfondo da utilizzare per un elemento
Il colore del testo in primo piano del documento
Il colore relativo ai collegamenti non visitati nella pagina
Il colore del collegamento attivo nella pagina sul quale è puntato il mouse
Il colore dei collegamenti visitati nella pagina
activeElement
readyState
Identifica l’elemento che detiene il focus
Specifica
lo
stato
corrente
di
un
oggetto
inizializzato/2=caricamento/3=interattivo/4=completo)
L’url della pagina alla quale fa riferimento al pagina corrente
Referrer
durante
il
suo
5.3.7.2) I metodi dell’oggetto DOCUMENT
metodo
Open
Write (writeln)
Close
Clear
createElement
elementFromPoint
execCommand
descrizione
A quel documento come flusso per raccogliere l’output o una nuova finestra del browser
Scrive testo e html in un documento nella finestra specificata (con ritorno carrello)
Chiude un documento o la finestra del browser
Cancella il contenuto di una selezione o oggetto document
Crea un’istanza di un’immagine o elemento
Restituisce l’elemento che si trova in corrispondenza delle coordinate xy rispetto alla finestra
Che segue un comando sulla selezione un intervallo di documento
5.3.7.3) Gli eventi dell’oggetto DOCUMENT
Eventi
Onclick
Ondblclick
Onmousedown
Onmousemove
Onmouseout
Onmouseover
Onmouseup
Ondragstart
onselectstart
descrizione
clicca con il pulsante del mouse o sul documento
Doppio clic che non documento
Si verifica quando l’utente preme un pulsante del mouse
Si verifica quando l’utente sposta il puntatore del mouse
Si verifica quando il puntatore del mouse lascia l’elemento
Si verifica quando il puntatore del mouse entra inizialmente sull’elemento
Si verifica quando l’utente rilascia un pulsante del mouse
Si verifica quando l’utente inizia a trascinare un elemento o selezione
Si verifica quando l’utente inizia la selezione del contenuto di un elemento
Onkeydown
Onkeypress
Onkeyup
Onhelp
Si verifica quando l’utente per un tasto
Si verifica quando l’utente per un tasto ed è disponibile un carattere
Seri via quando l’utente rilascia un tasto
Si verifica quando l’utente preme il tasto F1 o help
Onload
Si verifica quando un elemento ha completato il caricamento
19
caricamento
(1=non
Onreadystatechange
Onafterupdate
Onbeforeupdate
Si verifica quando la proprietà readyState relativa ad un oggetto è stata modificata
Si verifica quando il trasferimento dei dati dall’elemento al fornitore di dati è completato
Si verifica prima del trasferimento dei dati modificati al fornitore di dati quando l’elemento perdere ilnon focus o la
pagina viene scaricata
5.3.7.4) Le collezioni dell’oggetto DOCUMENT
collezioni
All
Anchors
Applets
Forms
Frames
Images
Links
Plugins
Scripts
styleSheets
descrizione
Collezioni di tutti i tag ed elementi nel corpo del documento
Collezioni tutte le ancora nel documento
Collezioni di tutti oggetti nel documento compresi i controlli intrinseci, immagini applets e altri oggetti
Collezione di tutti i moduli nella pagina
Collezione di tutti riquadri indefiniti all’interno di un tag <FRAMESET>
Collezione di tutte le immagini nella pagina
Collezione di tutti collegamenti e blocchi<AREA> nella pagina
Collezione di tutti elementi incorporati nella pagina
Collezioni di tutte le sezioni <SCRIPT> nella pagina
Collezione di tutti i singoli oggetti di proprietà di stile definiti per un documento
Si può accedere ad una collezione in due modi diversi:
document.frames(1) o document.frames(“mainframe”)
se si è assegnato un nome ad un oggetto per mezzo della proprietà NAME, è possibile accedere ad esso nel modo
seguente: document.images(“myImage”).
Si può intercettare il clic su un documento utilizzando il codice seguente:
<IMG SRC=”logo.gif” NAME=”myImage”>
sub document_onclick()
msgbox document.images(“myImage”).src
end sub
</SCRIPT>
questo codice invia un messaggio a video contenente l’indirizzo dell’immagine visualizzata quando si fa clic sul
documento.
Sicuramente importante è la collezione forms in quanto contenitore di altri oggetti. Questa collezione a una propria
sotto collezione (elements) che permette ad uno script di accedere ai singoli elementi di un form per l’elaborazione in
locale lato client dei dati presenti nei singoli controlli.
document.forms(“myform”).elements(“mytextbox”)
come tutte le collezioni, essendo esse contenitori di oggetti, sia hanno a disposizione le proprietà ed i metodi propri
dell’oggetto a cui fa riferimento. Esempio:
document.images(“myimage”).src
document.forms(“myform”).elements(“mytextbox”).value
document.forms(“myform”).elements(“mytextbox”).id
document.links(“mylink”).href
document.plugins(0).name
e per i metodi
document.forms(“myform”).elements(“mytextbox”).focus
5.3.8) Oggetti sussidiari a DOCUMENT: oggetto SELECTION
L’oggetto selection fornisce informazioni sulla selezione in corso effettuata dall’utente, quando trascende il mouse sulla
pagina. Esso consente di accedere tutti elementi selezionati compreso il testo piano all’interno della pagina.
Proprietà
Type
descrizione
Il tipo di selezione effettuata: 0 = nessuna/1 = testo/2 = controllo/tre o alla tabella
metodi
Clear
createRange
empty
descrizione
Cancella il contenuto della selezione
Restituisce una copia dell’intervallo correntemente selezionato
Disattiva la lezione corrente che importa a zero il tipo di selezione
5.3.8) Oggetti sussidiari a DOCUMENT: oggetto FILTER
L’oggetto filter lavora principalmente sulle immagini che consente di variare l’aspetto dell’immagine grafica delle
pagine Web.
20
5.4) Gli script e la gestione degli eventi
Quando si esegue un’azione, ad esempio clic su una finestra con il mouse, il sistema operativo rileva un evento. Questo
è semplicemente un segnale che è accaduto qualcosa. Windows esamina l’evento per decidere cosa lo ha provocato che
cosa deve fare in risposta all’evento stesso. Anche la HTML dinamico fornisce all’utente la possibilità di rispondere a
tutte le cose che avvengono nel browser. È possibile collegare un codice nelle pagine agli eventi che si possono
verificare ed utilizzarlo per interagire con il visualizzatore delle pagine.
5.4.1) Collegare gli script agli eventi
Ci sono diversi modi per collegare il codice ad un evento. Il modo migliore è quello di rispondere all’evento per mezzo
di una funzione il cui nome è una combinazione del nome dell’elemento e del nome dell’evento. Vediamone alcuni gli
esempi in VBSCRIPT:
<H2 ID=MyHeading> testo di prova </H2>
……
sub MyHeading_onClick()
MsgBox “hai fatto click”
end sub
</SCRIPT>
oppure
<H2 LANGUAGE=VBSCRIPT ONCLICK=”MyCode”> testo di prova </H2>
……
sub MyCode()
end sub
</SCRIPT>
oppure
<H2 LANGUAGE=VBSCRIPT ONCLICK=”MsgBox ‘hai fatto click’”> testo di prova </H2>
oppure
…….
<SCRIPT LANGUAGE=VBSCRIPT FOR=MyHeading EVENT=ONCLICK>
</SCRIPT>
In JavaScript esistono meno possibilità:
<H2 ONCLICK=”MyCode()”> testo di prova </H2>
……
function MyCode()
{
alert (“hai fatto click”);
}
</SCRIPT>
Javascript è predefinito e può essere omesso
oppure
<H2 LANGUAGE=JAVASCRIPT ONCLICK=”alert(‘hai fatto click’);”> testo di prova </H2>
oppure
…….
<SCRIPT LANGUAGE= JAVASCRIPT FOR=MyHeading EVENT=onclick>
alert( “hai fatto click”);
</SCRIPT>
oppure
……
<SCRIPT LANGUAGE= JAVASCRIPT >
function MyHeading.onclick()
{
alert( “hai fatto click”);
}
function window.onload()
{
alert( “appena caricato”);
}
</SCRIPT>
Questa tecnica è meno usata
Gestore di finestra
21
si possono inserire dichiarazioni di relative a gestori di eventi sia a livello di singolo marcatore, sia livello di documento
(inserendoli nel marcatore body), sia a livello di Window (inserendoli nel marcatore HTML). Un marcatore può anche
contenere più gestori di eventi.
Alcuni eventi come onsubmit permettono di fornire un valore di ritorno che controlli il comportamento del browser.
Vediamone un esempio:
…..
<FORM ID=MyForm ONSUBMIT=”return controlla()” action=”http://……”>
INDIRIZZO DI POSTA:<INPUT TYPE=TEXT ID=Email>
<INPUT TYPE=SUBMIT>
</FORM>
…..
<SCRIPT LANGUAGE= JAVASCRIPT >
function controlla()
{
straddr=document.forms[“MyForm”].elements[“Email”].value;
if(straddr.indexOf(“@”) != -1){
return true;
} else {
alert( “e-mail errata”);
return false;
}
}
</SCRIPT>
qui si vede come il tasto submit non invia direttamente le informazioni al server, ma viene richiamata una funzione di
controllo il cui valore di ritorno viene passato al browser (false=non invia, cioè cancella l’evento submit, true in via i
dati).
5.4.2) Rispondere agli eventi
L’ HTML dinamico mette a posizione l’oggetto event (come oggetto sussidiario dell’oggetto Window) per ottenere
maggiori informazioni circa l’evento avvenuto. Questo oggetto viene costantemente aggiornato ad ogni evento
avvenuto. L’uso avviene attraverso le scrittura di codice all’interno di funzioni di gestione di eventi.
…
sub MyHeading_onmousedown()
….
If window.event.button = 1 then msgbox “tasto sinistro”
…
end sub
sub document_onkeypress()
…..
if window.event.shiftKey then msgbox “shift premuto”
…..
end sub
spesso si vuole accedere alle proprietà dell’oggetto sul quale si è verificato l’evento. In tal caso abbiamo a disposizione
la parola chiave Me per il linguaggio VBscript e la parola chiave this per il linguaggio Javascript. Si può comunque
accedere a qualsiasi oggetto facendo riferimento ad esso tramite il suo id univoco, assegnato tramite la proprietà ID.
Per quanto riguarda la gestione degli eventi, occorre ricordare che questa viene seguente modo: per prima cosa viene
ricercato il codice di evento relativo all’oggetto con z più elevato, una volta eseguito si passa a ricercare il codice del
contenitore (l’oggetto con z subito interiore) e così via fino a che esistono contenitori. Esempio:
<DIV ID=Mydiv ..>
<H3 ID=MyHead …>testo di prova </H3>
</DIV>
se si fa click sulla frase ‘testo di prova’ per prima cosa viene ricercata da routine di evento MyHead_onclick(), una volta
eseguita viene ricercata dall’ordine di evento MyDiv_onclick() ed infine la rovina di evento document_onclick().
Questo è quanto viene denominato event bubbling. Se non si vuole la propagazione di un evento ai contenitori
sottostanti si può utilizzare la proprietà cancelBubble dell’oggetto event. Assegnandogli il valore di true si interrompe
la catena degli eventi.
Interessante sicuramente l’uso della proprietà returnValue dell’oggetto event la quale permette di accettare (true) o
cancellare(false) l’azione predefinita dell’oggetto. Esempio:
<A ID=MyLink HREF=”…..”> testo di prova </A>
……
<SCRIPT LANGUAGE= VBSCRIPT >
sub MyLink_onClick()
if MsgBox (“te ne vai?” vbYesNoe+vbQuestion, “salto?”) = vbNo then
window.event.returnValue=false
end if
end sub
</SCRIPT>
22
5.5) Gestione finestre e finestre di dialogo
Spesso è comodo creare dinamicamente nuove finestre in cui visualizzare pagine Web. Questo possibile o sfruttando la
proprietà TARGET del marcatore <A> dove si può specificare il nome della finestra creare, o sfruttando il metodo open
dell’oggetto Window; quest’ultimo metodo dà accesso a un maggior numero di proprietà della finestra generata.
<A HREF=”htt…..” TARGET=”MyNewWin”> …… </A>
oppure (in JavaScript)
objnewWin=window.open(“mypage.htm”,”MyWin”,”top=100,left=100,width=450,height=265,toolbar=no,menubar=no,location=no,dir
ectories=no”);
oppure (in VBscript)
set objnewWin= wsetindow.open(“mypage.htm”, ”MyWin”,”top=100, left=100, width=450, height=265, toolbar=no, menubar=no,
location=no, directories=no”);
Attributo
Valori
descrizione
channelmode
Yes|no| 1 |0
Mostra i controlli canale
Directories
Yes|no| 1 |0
Include i pulsanti di directory
Fullscreen
Yes|no| 1 |0
Ingrandisce la nuova finestra
Height
Numero
Altezza della finestra in pixel
Width
Numero
Larghezza della finestra in pixel
Left
Numero
Posizione sinistra in pixel sul desktop
Top
Numero
Posizione superiore in pixel sul desktop
Location
Yes|no| 1 |0
L’url della casella di testo address
Menubar
Yes|no| 1 |0
I menu predefiniti del browser
Resizable
Yes|no| 1 |0
La finestra può essere ridimensionata dall’utente
Scrollbars
Yes|no| 1 |0
Barre di scorrimento orizzontale e verticale
Status
Yes|no| 1 |0
La barra di Stato predefinita
Toolbar
Yes|no| 1 |0
Include la toolbar del browser
5.5.1) Finestre modali
È possibile aprire una nuova finestra anche utilizzando il metodo showModalDialog. Questa è una finestra modale:
l’utente non può attivare la finestra originale fino a quando non chiude quella modale.
objnewWin=window.showModalDialog(“mypage.htm”,”MyDialog”,”dialogWidth=450px;dialogHeight=265px;scrollbars=no;
center=yes; border=thin; help=no; status=no”); (si potrebbero usare anche i : al posto dell’uguale)
Attributo
Valori
descrizione
Border
Thin|thick
Dimensione del bordo attorno alla finestra
Center
Yes|no| 1 |0
Centra la finestra nel browser
dialogHeight
Numero+unità
Altezza della finestra in pixel
dialogWidth
Numero+unità
Larghezza della finestra in pixel
dialogLeft
Numero + unità
Posizione sinistra in pixel sul desktop
dialogTop
Numero+ unità
Posizione superiore in pixel sul desktop
Font
Stringa CSS
Font e stili predefiniti per la finestra
Font-family
Stringa CSS
Famiglia di font predefinita per la finestra
Font-size
Stringa CSS
Dimensione di font predefinita dalla finestra
Font-style
Stringa CSS
Stile di font predefinito per la finestra
Font-variant
Stringa CSS
Variante di font definito per la finestra
Font-weight
Stringa CSS
Larghezza di font predefinita per la finestra
Help
Yes|no| 1 |0
Include il pulsante di aiuto nella barra del titolo
Maximize
Yes|no| 1 |0
Include il pulsante maximize nella barra del titolo
Minimize
Yes|no| 1 |0
Include il pulsante minimize nella barra del titolo
23

Introduzione all`HTML dinamico

Transcript

Documenti analoghi

Reindirizzamento di Url

Scriba - indice - Palestra della scrittura

attivato quando si clicca su un oggetto

Essere sicuri, ora più che mai è diventata un`esigenza necessaria

Oggetti in Javascript

Voci di capitolato FINESTRA DA TETTO

Installazione di Dev-C++

La formazione continua…

Per accedere a Telemaco si raccomanda di installare un browser

ICMS - Istruzioni inserimento link esterno (File pdf