|
|
|
Ben ritrovato, se stai leggendo queste righe, presumo che hai letto il primo faticoso capitolo del tutorial - tieni duro!
Ora esamineremo qualcosa di più interessante. Questa seconda parte dell'introduzione coprirà alcuni importanti concetti quali: oggetti,
proprietà, e metodi. Assimilare questa 2° parte è molto importante per comprendere i principi di codifica del linguaggio, perciò assicurati
di leggerla, ed eventualmente rileggila, fino a comprenderla! Un'altra cosa... Questo capitolo è lungo e sfiatante, quindi preparati
una tazza di caffè e immergiti nella lettura!
|
|
Quando si scrive un programma informatico, l'obiettivo è di renderlo tanto più modulare quanto semplice possibile. Un
programma del genere si realizza facilmente utilizzando la tecnica Object Oriented Programming (OOP). Fortunatamente il JavaScript è un
linguaggio di questo tipo! Il modo più facile di spiegare gli oggetti è di osservare intorno a noi, al mondo circostante - sì, l'area
che circonda il tuo computer. Vedrai l'oggetto tastiera, il mouse, il monitor, etc.
Ora pensa alla vita di tutti i giorni, ogni
cosa che vedi è un oggetto che può essere ricondotto ad una categoria - automobili, gatti, gente, cibo, etc. Immagina che ogni tipo di
oggetto (categoria) sia come una scatola. Così in questo grande, largo mondo, noi abbiamo milioni di scatole ognuna contenente un genere di oggetti.
Tutti i gatti andranno nella scatola dei gatti, le auto, dentro la scatola delle auto, la gente nella scatola delle persone e così via.
Adesso abbiamo tutti gli oggetti separati in scatole. Generalmente, ogni articolo deve rientrare in una categoria per essere un
oggetto - gli oggetti gatto non possono essere oggetti gente come l'oggetto automobile non può essere l'oggetto alberi e cosi' via.
Adesso facciamo un passo più avanti. Tutti gli oggetti che abbiamo collezionato sono sulla terra (un oggetto pianeta?) il quale si trova nel
sistema solare (oggetto sistema solare!) il quale si trova nell'universo (il grande contenitore di tutti gli oggetti!). Adesso abbiamo una
gerarchia - una catena di comando.
Il Javascript lavora allo stesso modo. L'oggetto principale, the Big Kahuna (mito hawaiano), è l'oggetto finestra (window).
L'oggetto finestra altri non è che il tuo browser, Internet Explorer, Netscape, Firefox o Opera che sia. Gerarchicamente sottoposto all'oggetto finestra,
abbiamo l'oggetto documento. I Frame altro non sono che una suddivisione della finestra in due o più parti ognuna contenete un
documento (al limite altri frame). Dopo l'oggetto documento, le cose scorrono abbastanza bene. Tutti gli altri oggetti sono figli
dell'oggetto documento. Immagini, matrici, variabili, funzioni, e "form" (moduli) sono tutti oggetti del documento. A questo punto c'è un'altra piccola
biforcazione nell'albero - moduli. Sotto l'oggetto form ci sono tutti i componenti del form - textarea, text boxes, radio buttons, check boxes,
e giù con tutta la lista dei possibili elementi di un modulo.
Ti sembra tutto astruso? Allora osserva la rappresentazione grafica, se non è
abbastanza chiara, pensa al tuo lavoro. Tu sei un oggetto "impiegato", e sei controllato dal tuo oggetto superiore, e egli o ella è controllato/a
dall'oggetto"dipartimento", e cosi via su per l'organigramma fino all'oggetto"supermegagalattico" di fantoziana memoria che gioca a
tennis o golf tutto il giorno con i clienti. Si, sei veramente e solo una rotellina nella grande macchina, che lavora per L'UOMO o per l'ENTE.
 |
| La gerarchia degli oggetti - l'esempio delle scatole |
Prima di scendere giù per la strada delle proprietà degli oggetti, vediamo come accedere
agli oggetti. E' abbastanza facile veramente. Se fai mente locale al concetto di gerarchia,
lo comprenderai velocemente. Per accedere ad un oggetto nel tuo browser, userai la gerarchia
così: "window.document.tuo_oggetto_qui". Proprio così! Whoah, cosa è successo?
Quel che abbiamo fatto è stato di usare la convenzione "punto" per accedere ad un
particolare oggetto. L'oggetto è inserito nel documento, quindi per accedervi per lo meno
devi utilizzare "document" più un punto "." prima di indicare il nome
dell'oggetto. In altre parole, stai accedendo all'oggetto dall'alto verso il basso, usando
la gerarchia. Analogamente OGNI oggetto del documento è accessibile con
"document" piu' ".", seguito dal nome dell'oggetto stesso. Mi sono
ripetuto abbastanza? Detto questo, ci sono per la verità un paio di altri modi di accedere
agli oggetti in layers and framesets, ma li vedremo quando sarà tempo...
|
|
OGNICOSA! Cosa succederebbe se fossi in una stanza piena di gente che non conosci, e avessi
bisogno di parlare solo con uno di loro? Probabilmente punteresti il dito e diresti,
"Tu! No, non tu, l'altra persona - quella con la giacca sportiva. No, l'altra persona
con la giacca sportiva, quella con la giacca di colore grigio..." E' un casino, giusto?
Se conoscessi il nome di ognuno, sarebbe molto più facile, diresti - "Hey, Gianni!"
e Gianni verrebbe da te per sentire cosa vuoi.
La stessa cosa accade in JavaScript. Ogni oggetto può e dovrebbe avere un
nome. Il metodo di nominare tutti gli elementi (oggetti) contenuti in un documento, e
ognuno con un nome diverso, è così importante che non credo sia il caso di dilungarci
oltre - è solo buon senso. L'atto di nominare gli oggetti contenuti in una pagina HTML,
praticamente trasforma quest'ultima in un elenco del telefono per oggetti, così che puoi
accedere ad essi in qualsiasi momento: da ogni frame, da ogni window. Questo ti da un
mucchio di potere sui tuoi oggetti!
Per nominare qualsiasi oggetto al di fuori di un layer, basta aggiungere la proprietà "name"
nel "tag" del medesimo. I Layers utilizzano l'ID tag. Per una immagine, un esempio sarebbe
<img src="myImage.jpg" name="my_Temp_Image">. Quella immagine
potrebbe essere accessibile con "document.my_Temp_Image". Un campo testo in un
modulo chiamato "myForm" può essere nominato così: "<input type=text
name="myTextBox">". Per accedere al campo si userà "document.myForm.myTextBox".
Afferrata l'idea? Ricorda - tutti gli oggetti dovranno avere un nome univoco. Se un tuo
script proverà ad accedere ad un oggetto presente più di una volta nel documento, non saprà
quale scegliere e otterrai un messaggio di errore - proprio come se ci fossero due o più
Gianni in una stanza piena di gente!
|
|
Facile finora giusto? Aspetta, c'è dell'altro. Se osservi dentro, diciamo, la scatola della
gente, noterai che tutti questi oggetti persone non hanno lo stesso aspetto. Osserverai che
ognuno ha differente colore di capelli, differente altezza, peso, etc. Ognuna di queste cose
che possono descrivere ogni persona nella scatola della gente è chiamata proprietà. Così,
come in JavaScript, il mondo è fatto di oggetti, e gli oggetti hanno delle proprietà.
Ecco un esempio di proprietà. Diciamo che possiedi un'automobile, e l'auto può essere descritta
da quattro proprietà - marca, porte, motore, e colore. Armato di queste proprietà descrittive,
potresti iniziare a catalogare tutte le automobili che sono dentro la grande scatola "automobili".
Il JavaScript usa un modo veramente intelligente per accedere alle proprietà degli oggetti,
e cioè la convenzione di usare il nome dell'oggetto seguito dal punto (.) e quindi dal nome
della proprietà. Per tornare al nostro esempio dell'auto, se volessimo accedere alla proprietà
colore dell'oggetto auto, faremmo così: "car.color". Allo stesso modo, per accedere
alla proprietà motore, faremmo così "car.engine".
Altri esempi di proprietà di un oggetto potrebbero essere:
- person.weight
- person.height
- cat.breed
- cat.gender
Recepito il sistema? Ho altri esempi con oggetti in JavaScript:
- document.myImage.width
- document.myForm.myTextBox.value
- document.myLayer.visible
|
|
Abbiamo visto cosa sono gli oggetti, come li descriviamo con le proprietà, e come accedere a
queste proprietà. Proseguiamo nella conoscenza continuando con il nostro esempio di scatole
riempite con tutti gli oggetti del mondo. In molte circostanze, gli oggetti non sono seduti
facendo niente - essi agiscono, elaborano, si muovono o altro, in una parola agiscono. Non
ci aspettiamo niente di diverso dagli oggetti in JavaScript - gli oggetti agiscono con i
loro metodi (imposti dalle regole del linguaggio). Genericamente, un metodo è un'azione che
un oggetto può fare. *Et voilà*, hai imparato un'altro aspetto del OOP!
Riprendiamo l'oggetto automobile. Le auto, guidate dal loro pilota, possono suonare il clacson,
svoltare, frenare, etc. Così, se abbiamo un oggetto automobile in qualche punto del nostro
programma in JavaScript, e vogliamo che questo suoni quando pigiamo un certo pulsante,
imposteremo un comando così fatto: "car.honk()". I Metodi, siccome includono
funzioni, necessitano di parentesi peculiarità delle stesse. Alcuni metodi acquisiscono dei
valori o testo, contenuti in variabili, che andranno inserite tra le parentesi.
Eccoci ancora con una lista di esempi, questa volta di metodi:
- person.walk()
- person.think()
- cat.meow()
- cat.sleep()
I seguenti sono alcuni metodi predefiniti in Javascript:
- window.close()
- document.reload()
Si possono utilizzare le funzioni create all'uopo dal programmatore o utilizzare quelle già
predisposte tipo date(), close(), time(), etc. Per creare una funzione basta dargli un nome
e specificare cosa deve fare tra parentesi graffe, così:
function messaggio()
{
document.write("Ciao, questa è la funzione messaggio")
}
Quando verrà invocata la funzione messaggio(), questa visualizzerà: "Ciao, questa è la funzione
messaggio". L'azione quì è rappresentata da write (scrivi) nell'oggetto documento
(document) il testo predisposto tra i doppi apici, dentro le parentesi graffe.
|
|
Ci sono due modi per creare oggetti. Il modo più facile è di realizzare una pagina HTML.
Quasi tutto in una pagina HTML è un oggetto. Perfino la finestra del tuo browser è un
oggetto - l'oggetto finestra. La pagina che sta mostrando è l'oggetto documento. Se hai
immagini nella pagina, queste sono oggetti immagini. Campi testo nei form, campi check,
pulsanti radio, liste, etc sono oggetti figli dell'oggetto form. E ecco il bello - ogni
cosa che è un oggetto può essere manipolato in un modo o in un altro dal JavaScript!
Il secondo modo per cerare un oggetto è di dichiararlo nel tuo codice JavaScript. Questo è
possibile per mezzo del comando "new" . Prima dobbiamo cerare una variabile e poi
assegnargli il valore del nuovo oggetto (qualsiasi oggetto abbiamo disponibile). Se volessi
creare un oggetto immagine nel mio codice per un effetto rollover, farei cosi':
var myImage = new Image;
Fatto. Abbiamo adesso un oggetto immagine chiamato myImage!
|
|
OK, ce l'abbiamo fatta. Abbiamo appena terminato il corso sugli oggetti in JavaScript.
Che ci credi o no, questo era lo scoglio più duro, e se hai capito il procedimento, sei
pronto ad iniziare a programmare in Javascript. Bene, alla prossima!
|
|
|
|
