Tutorial Javascript

Oggetti

 

Io non ne so molto di Javascript, infatti questo tutorial è stato realizzato dal mio amico Gogeta Ssj3, che ringrazio moltissimo per l'aiuto fornito.

Visitate il suo ottimo sito !

 

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

                 

prova 5



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 ??
<- Goku <- Vegeta


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 ]

 

Indietro - Home - Torna su