JavaScript nozioni di base parte II - Oggetti!

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!

Rappresentazione a blocchi - OGGETTI

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

Cosa si nasconde in un NOME?

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!

PROPRIETA' - le parti che rendono l'intero

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

METODI - aggiungere azione agli oggetti

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.

Realizzare oggetti

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!

Bene!

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!