[
Le funzioni] [ Selezione/Iterazione
] [ Oggetti ] [ Operatori/Eventi
]
Allora,
sugli oggetti, non c'è molto da dire. Diciamo che finora avete studiato
solo il linguaggio di programmazione... ora vediamo come il JavaScript
interagisce con le pagine HTML . Ma avete già capito : sono gli
oggetti che ci permettono di accedere alle funzioni multimediali
. Diciamo prima di tutto cosa sono. Allora, diciamo che gli oggetti
sono delle "cose" che ci permettono di agire su una finestra,
un collegamento, un form, ecc. Vediamo di seguito una tabella con
i principali oggetti :
Oggetto |
Descrizione |
Proprietà |
window |
Tramite
"window" si agisce sulle finestre. Si possono aprire,
chiudere, focalizzare, ecc. |
.close
; .open |
document |
Questo
è l'oggetto più importante. Tramite "document" si
accede a tutte le componenti della pagina (è usato soprattutto
per i form) |
.write |
location |
"location"
si usa per fare dei collegamenti ad altre pagine. |
.href |
history |
Questo
oggetto si usa per accedere alla cronologia. |
.go |
Un po' complicati da capire e da spiegare.... vediamo degli esempi
che chiariscono le idee molte volte. Vediamo ora un esempio per
ciascun oggetto :
<script language="JavaScript">
window.open("http://www.dragonballforce.net","DbForce",
"width=200,height=200,resizable=yes,scrollbars=yes,toolbar=yes,
location=yes,status=yes,menubar=yes");
self.focus()
</script>
Avete di fronte lo script che i webmaster italiani (senza allusioni
nè rimproveri ^__^) usano più spesso : la finestra pop-up. Capirete
ormail subito che la finestra si apre al caricamento della pagina
in quanto le istruzioni non sono racchiuse in una funzione.
Andiamo con ordine e spieghiamo : window.open apre una nuova finestra
i cui attributi sono definiti tra parentesi. La prima stringa indica
chiaramente l'indirizzo della pagina che deve caricarsi nella finestra.
La seconda scritta è il nome della finestra. Poi ci sono gli attributi
tecnici : larghezza, altezza, se si può variare la dimensione, se
è presente la barra di scorrimento, se ci sono i pulsanti base del
browser (INDIETRO, AVANTI, ecc...), se c'è lo spazio dove digitare
l'indirizzo del sito, se c'è la barra di stato e infine se ci deve
essere il menu. La seconda e ultima istruzione è invece un esempio
di focalizzazione : si mette il nome della finestra e focus . In
questo caso non serve il nome della finestra perchè self indica
la finestra stessa .
Un ultima cosa : la stessa cosa si può fare con .close ad esempio
self.close chiude la finestra in cui c'è questo script . Ah ! per
togliere la focalizzazione si usa .blur . Se per dire ho due finestre
aperte, A e B e quando clicco su un tasto della finestra A richiamo
l'istruzione self.blur() , in primo piano mi apparirà la fiestra
B . Attenzione però : la finestra A non si chiude, passa solo in
secondo piano !!!
Visto ? questo è lo script scritto sopra, ma che viene abilitato
quando si clicca sul bottone e non all'apertura della pagina. Vediamo
ora l'oggetto document :
<script language="JavaScript">
function contr(pers) {
if (pers==1) {
alert('Risposta esatta
!') }
else {
alert('Risposta errata') }
}
function dis() {
document.risp.r1[0].disabled=true ;
document.risp.r1[1].disabled=true ;
}
</script>
....
Chi diventa per primo Super Saiyan ?
<form name="risp">
<input type="radio" name="r1" "value="1"
onclick="contr(this.value),dis()"> Goku
<input type="radio" name="r1" value="2"
onclick="contr(this.value),dis()"> Vegeta
</form>
Prova
6 |
Chi
diventa per primo Super Saiyan ??
|
Riuscite a capire cosa fa questa roba ? Allora, abbiamo definito
un form con una domanda e due possibili risposte. Appena l'utente
clicca e sceglie la risposta, chiamiamo due funzioni : "contr"
e "dis" . La funzione "contr" sapete già cosa
fa, mentre la funzione "dis" (che stà a sottintendere
disabilita) ha due istruzioni. La prima, document.risp.r1[0].disabled=true
sta a significare che la prima risposta del form "risp"
deve disabilitarsi. La seconda istruzione significa che deve disabilitarsi
la seconda risposta del form "risp" . Questa è solo una
delle possibili applicazioni di document . Un altro importante attributo
di document è .write : con questa istruzione possiamo scrivere ciò
che mettiamo tra parentesi. Ad esempio :
documet.write("<font
color="FF0000">Vegeth</font>")
scriverà "Vegeth" in rosso . Tanti altri usi ha document.....
Magari li approfondirò in un'altra sezione. Ecco infine un esempio
di script con l'oggetto location :
<script language="JavaScript">
function contr(pers) {
if (pers==1) {
location.href="vincitore.htm"
}
else {
location.href="perdente.htm"
}
}
function dis() {
document.risp.r1[0].disabled=true ;
document.risp.r1[1].disabled=true ;
}
</script>
....
Chi diventa per primo Super Saiyan ?
<form name="risp">
<input type="radio" name="r1" "value="1"
onclick="contr(this.value),dis()"> Goku
<input type="radio" name="r1" value="2"
onclick="contr(this.value),dis()"> Vegeta
</form>
Questo è un esempio di come usare location : se l'utente risponde
giusto, nella finestra verrà caricata la pagina "vincitore.htm",
altrimenti verrà caricata la pagina "perdente.htm" . Ora
tocca a history. Non voglio prolungarmi su questo oggetto che è
di poca importanza ma che è bene conoscere :
<script language="JavaScript">
function avanti() {
history.go(1) ;
}
function indietro() {
history.go(-1) ;
}
</script>
Ecco due semplici funzioni : "avanti" e "indietro"
quando viene richiamata la funzione "avanti", il browser
carica la pagina successiva della cronologia (se c'è), quando invece
richiamiamo la funzione "indietro" il browser carica la
pagina precedente nella cronologia (se c'è) .
Lezione
Successiva
[
Le funzioni] [ Selezione/Iterazione
] [ Oggetti ] [ Operatori/Eventi
]
|