 |
Copertina |
|
|
|
CORSO DI JAVASCRIPTQuinta Parte - Il modello a oggetti di JavaScript; Metodi di un oggetto; Proprietà di un oggetto; Oggetti Navigator; L'oggetto window; L'oggetto document; L'oggetto location; L'oggetto navigator; Oggetti interni; Gli oggetti array; L'oggetto date; L'oggetto math; Gli oggetti generici; Oggetti di stringhe;di Luciano GiustiniNota - La pagina si presta ad essere stampata: consiglio questa soluzione per meglio comprendere il codice e la struttura dei paragrafi. Può essere ancora meglio affiancare la versione elettronica con quella cartacea per gli esempi inseriti da salvare. Il Corso è anche pubblicato con struttura frame su Web alla URL http://www.beta.it/online/Corsi/JavaScript-11 Abbiamo visto nella prima e seconda parte come scrivere la nostra prima funzione in JavaScript, la sintassi e gli errori, e alcune indicazioni per le dichiarazioni. Abbiamo visto nella terza parte i comandi di cicli e iterazioni for, while, i comandi condizionali if..else e la definizione estesa delle funzioni. Abbiamo poi visto nella quarta parte gli eventi, la loro gestione e gli attributi che sovraintendono ad un corretto funzionamento ed utilizzo di essi. Vediamo ora gli oggetti, i metodi e le proprietà di JavaScript. Ricordo che questo corso e' di JavaScript 1.0 e 1.1, non sono quindi inclusi gli ultimi "arrivi" della versione 1.2, che include diversi nuovi oggetti. La mia scelta è però dettata anche da motivi di compatibilità: scrivere JavaScript 1.2 oggi equivale a rendere queste funzioni inusabili da client Netscape 2.0 e soprattutto 3.0, che è ancora il più diffuso, per non parlare di Internet Explorer 3 e 4 (quest'ultimo supporta solo alcune delle funzioni JavaScript 1.2). Il mio consiglio è quindi di usare funzioni della versione 1.2 solo quando siete veramente certi che le pagine verranno lette solo da client Netscape 4.0 (o Communicator, che è la stessa cosa). Il modello a oggetti di JavaScriptPer scrivere bene in JavaScript è conveniente ragionare, il prima possibile, in termini di oggetti. Molti elementi del linguaggio HTML, nell'implementazione di Netscape sono stati modificati per includere attributi aggiuntivi, che permettono a JavaScript di essere maggiormente orientato agli oggetti. Le principali famiglie di oggetti supportate da Netscape possono essere suddivise in tre gruppi:
Metodi di un oggettoAgli oggetti vengono associati dei metodi che permettono agli oggetti di essere manipolati. Per esempio, in JavaScript una stringa di testo viene trattata come un oggetto stringa e potrebbe essere convertita in lettere minuscole utilizzando il metodo toLowerCase(). Grazie a JavaScript è anche possibile scrivere i propri metodi d'oggetto.
Proprietà di un oggettoProprietà è un altro termine usato nel contesto di un ambiente condizionato dagli oggetti. Una proprieta è un valore che appartiene a un oggetto. Tutti gii oggetti standàrd di JavaScript possiedono tali proprietà: I'oggetto document, per esempio, ha una proprietà chiamata bgColor, che è un riflesso dell'attributo BGCOLOR dell'etichetta <body>, che in questo caso è il colore dello sfondo. Le proprietà vengono riferite collocando un punto (.) dopo il nome dell'oggetto, seguito dal nome della proprietà richiesta.Le proprietà disponibili a un oggetto dipendono dal fatto che l'oggetto sia stato riferito o meno. Possono essere assegnate delle proprietà anche agli oggetti definiti da un utente.
Oggetti NavigatorNavigator supporta un ampia gamma di tipi d'oggetti differenti. Gli oggetti HTML sono degli oggetti che riflettono i valori delle etichette HTML, come per esempio le ancore, gli hyperlink e gli oggetti struttura, come i campi di testo e i pulsanti di opzione. Gli oggetti "di livello massimo", o oggetti Navigator, sono quegli oggetti riflessi dall'ambiente browser, per esempio finestre, posizioni, oggetti storici e così via. Alcuni oggetti Navigator vengono creati "automaticamente", come è documentato nella tabella seguente:
L'oggetto windowL'oggetto window fa riferimento alla finestra principale del browser, che in JavaScript è un oggetto di livello massimo, principalmente perchè ogni documento deve esistere all'interno di una finestra. Poichè dalla versione 2.0 di Navigator vengono supportate le finestre multiple in forma di documento frameset, creato utilizzando l'etichetta container <FRAMESET>, la finestra cui si fa riferimento diventa ambigua. È necessario, quindi, utilizzare l'oggetto parent, insieme alla proprietà frames, per indicare la finestra cui fare riferimento. In JavaScript frame e finestre sono la stessa cosa. Per esempio parent.frames[0] fa riferimento al primo frame contenuto nel browser Navigator. Si assume che una finestra esista sempre, sebbene utiliziando il metodo wi ndow.open() possono essere aperte e riferite anche finestre autonome. Per utilizzare i metodi e le proprietà di un oggetto window,si usa la seguente sintassi:
NOTA
Proprietàl'oggetto window possiede le seguenti proprietà:
MetodiPer mostrare un messaggio di testo può essere usato il metodo alert(); close() chiude una finestra; confirm() accetta scelte di tipo sì/no (e restituisce un valore booleano true/false); open() apre una nuova finestra; prompt() sollecita l'utente a inserire dati d'input; setTimeout() assegna un evento di tipo time-out a una finestra; infine c1earTimeout() rimuove l'evento di time-out assegnato dal metodo setTimeCut().Manipolatori di eventiFino a quando un documento è caricato in un oggetto window, esso non ha alcun manipolatore di eventi. I documenti possiedono gli attributi di manipolazione di eventi onLoad e onUnLoad, come i documenti <FRAMESET>, definiti nel container <BODY>.EsempiPer creare una finestra di dimensioni 400 x 400 pixel e caricarla nella home page del sito Web di Netg, si potrebbe usare la seguente istruzione di JavaScript:
myWin = open("http://www.Netg.com","myWindow","width=400,height=400");
Per chiudere la finestra, si dovrebbe usare:
myWin.close();
Per chiudere la finestra "myWin" è possibile utilizzare questa istruzione attraverso
uno script posto in una qualunque altra finestra.
L'oggetto documentL'oggetto document è un riflesso dell'intero documento di ipertesto o, precisando meglio, della parte <body>..</body> del documento. I documenti sono annidati dentro alle finestre all'interno del browser Navigator, o, in altre parole, il documento è delimitato da una finestra. Tutti gli oggetti HTML contenuti in un documento di ipertesto (discussi più avanti) sono proprietà dell'oggetto document, poiché risiedono all'interno del documento stesso. Per esempio, in JavaScript la prima struttura contenuta in un documento può essere riferita con document.forms[O], mentre la prima struttura contenuta nel secondo frame potrebbe essere riferita con parent.frames[O].document.forms[O], e così via. L'oggetto document è utile perchè fornisce dei metodi che permettono di scrivere, nel browser Navigator, codice HTML dinamico. In HTML un documento viene creato attraverso l'uso dell'etichetta <body>..</body>. Se non viene usato un tale container, molte delle proprietà di questo oggetto non saranno disponibili, anche se molte proprietà vengono impostate assegnando i valori direttamente a esse. Sintassi:
<BODY BACKGROUND="bgImageOrUrl"
BGCOLOR="backgroundColor"
TEXT="foregroundColor"
LINK="unfollowedLinkColor"
ALINK="activatedlinkColor"
VLINK="followedLinkColor"
[onLoad="handlerText"]
[onUnLoad="handlerText"]>
...
</BODY>
Dove bgImageOrUrl specifica l'immagine bitmap che viene usata per inizializzare
l'ambiente Navigator e che può essere memorizzata in formato GIF, JPEG o PNG (solo da Navigator 4).
Si usa il
termine tile per far riferimento a un file bitmap riportato per tutto lo schermo, e quindi tale
da coprire l'intera finestra. I colori degli elementi di un documento (colore del testo,
colore dello sfondo, hyperlink) vengono selezionati attraverso gli attributi
alink,bgcolor,link,text e vlink, ognuno dei quali può essere espresso nel
seguente modo:
ProprietàL'oggetto document possiede una gamma estesa di proprietà, principalmente perché deve riflettere ogni etichetta HTML contenuta nel documento corrente:
MetodiPer chiudere il documento corrente si può utilizzare il metodo clear(). Come si può notare, in Navigator questo metodo non funziona correttamente e sono necessarie successive chiamate ai metodi open() e close() per chiudere la finestra. Per poter scrivere informazioni nel browser, vengono forniti i metodi write() e writeln(). Questi metodi scrivono nel browser stringhe di testo in formato HTML, in modo tale che è possibile creare qualunque documento HTML in modo dinamico, comprese intere applicazioni di JavaScript.
Manipolatori di eventiGli attributi di manipolazione di eventi come onLoad e onUnLoad possono essere utilizzati nelle etichette <body> e <frame>.EsempiPer scrivere nel browser un testo in formato HTML si può utilizzare la funzione document.writeln(). Per esempio, si potrebbe creare in modo dinamico un'etichetta d'immagine, mostrando l'immagine utilizzando le istruzioni di JavaScript:
document.open();
document.writeln("<img src='myimage.gif'>");
document.close();
È possibile creare in modo dinamico anche un'intera applicazione di JavaScript.
Per esempio:
document.open(); document.writeln("<script language='JavaScript'>" +
"alert('Hello World!')" + "</script>");
document.close();
È possibile invocare un'applet di Java creando semplicemente un'etichetta
<applet> in modo dinamico, per esempio:
document.close();
document.open(); document.writeln("<Applet code=myApplet.class " +
"codebase=classes width=100 height=50>" + "</applet>");
Si può notare come, nell'esempio precedente, utilizzando l'operatore +, si siano
potute concatenare (collegare) insieme alcune stringhe. Bisogna utilizzare questa tecnica
ogni volta che le linee del codice diventano troppo lunghe per adattarsi all'interno di un
programma di editing, o semplicemente per separare stringhe complesse in parti più
maneggevoli.
L'oggetto locationQuest'oggetto è un riflesso della indirizzo del documento corrente, rispetto al proprio Uniform Resource Locator (URL). Da Navigator vengono supportati molti URL diversi, permettendo in questo modo di poter interfacciare una varietà di servizi di Internet, come per esempio i server Gopher, i server News (Usenet), i server di tipo File Transfer Protocol (FTP), i server di mail, e anche i server di tipo HyperText Transfer Protocol (HTTP), o i server Web, che sono quelli più comunemente conosciuti. La manipolazione dell'oggetto location permette di modificare l'URL di un documento.Gli oggetti location vengono associati all'oggetto corrente window, in cui viene caricato un documento. I documenti non contengono l'informazione URL; questa è una caratteristica relativa al browser. Sintassi:
[windowRef.]location.propertyName
dove windowRef è una variabile opzionale che definisce la particolare finestra a cui si
vuole accedere (vederne i dettagli nella sezione precedente riguardante l'oggetto window).
La variabile windowRef può, utilizzando la proprietà parent, sinonimo
usato per riferire oggetti multipli window, far riferimento anche a un frame contenuto
nel documento frameset.L'oggetto location è una proprietà dell'oggetto window; se occorre riferire un oggetto location senza specificare una determinata finestra, si assume sia specificata la finestra corrente. Se si specifica una determinata finestra o un determinato frame utilizzando la sintassi:
windowRef.location.propertyName
verrà usata la posizione della finestra indicata.
L'oggetto navigatorL'oggetto navigator contiene dettagli sulla versione corrente del browser di Netscape Navigator.Questo oggetto può essere utilizzato per determinare le informazioni relative alla versione, dettagli di plug-in e tipi MIME. Sintassi:
navigator.propertyName
ProprietàL' oggetto navigator possiede le seguenti proprietà:
MetodiPer l'oggetto navigator non è definito alcun metodo.Manipolatori di eventiAll' oggetto navigator non è associato alcun manipolatore di eventi.Oggetti interniGli oggetti interni non sono legati al browser o al documento HTML correntemente caricato; corrispondono invece a tutti quegli oggetti che possono essere manipolati internamente dal progettista. Tali oggetti comprendono sia tipi primitivi, come per esempio le stringhe, che oggetti più complessi, come per esempio le date. La seguente tabella illustra gli oggetti interni, o costruiti, supportati da Navigator.Le linee della tabella marcate con il simbolo  denotano un
oggetto costruttore introdotto dalla versione 3.0 di Navigator.
Gli oggetti ArrayGli array sono oggetti multidimensionali che vengono referenziati attraverso una variabile d'indice numerica. All'interno di JavaScript molti degli oggetti HTML riflessi vengono strutturati come array dal momento che possono contenere valori multipli. In che modo poi questi oggetti richiedono applicazioni HTML, viene lasciato al libero arbitrio all'utente; Navigator non impone alcun limite, anche se le risorse corrispondenti alla propria risorsa di memoria di sistema sono finite. Gli esempi in Navigator di oggetti strutturati come array includono hyperlink, ancore, strutture e frame. Nella prossima sezione è possibile trovare più dettagli riguardo a quest'argomento. Gli array possono essere creati con una delle seguenti modalità (le ultime due sono nuove per la versione 3 di Navigator):
Nessun metodo e nessuna proprietà è associata agli oggetti array. L'oggetto DateL'oggetto Date è ereditato da Java e contiene informazioni sia riguardo alla data che all'ora. Per poter estrarre le parti componenti dell'oggetto date, JavaScript fornisce una selezione di metodi di manipolazione di date. Le date possono essere modificate in modo dinamico, per poter creare nuove date basta aggiungere e sottrarre valori alle variabili in formato data. Un oggetto date viene creato utilizzando la sintassi:
dateObj = new Date(parametri)
Dove dateObj è la variabile in cui verrà memorizzato il nuovo oggetto Date.
L'argomento parametri può contenere i seguenti valori:
ProprietàL' oggetto Date non possiede proprietà.MetodiGli oggetti date possono utilizzare uno dei seguenti metodi JavaScript: getDate(),getDay(),getHours(),getMinutes(),getMonth(),getSeconds(),getTime(), getTimeZoneoffset(), getYear(), Date.parse(), setDate(), setHours(),setMinutes(),setMonth(),setSeconds(),setTime(),setYear(), toGMTString(),toLocaleString() e Date.UTC().Manipolatori di eventiNon vengono utilizzati manipolatori di eventi per gli oggetti interni.Esempi
todayDate = new Date();
dove Date() è il costruttore di date che crea un nuovo oggetto date. Analogamente,
si può creare un oggetto Date con una data diversa passando all'oggetto i parametri
necessari, per esempio:
// August, 8 1998 12:00:00
theDate = new Date(98,8,8,12,00,0):
L'oggetto MathL' oggetto Math è costruito nel browser Navigator e contiene le proprietà e i metodi utilizzati per poter manipolare valori numerici. Nell'oggetto Math sono contenute anche le comuni costanti matematiche. Sintassi:
Math.propertyName
Math.methodName(parametri)
ProprietàLe proprietà dell'oggetto Math sono le costanti matematiche, vale a dire:
MetodiVengono fornite parecchie funzioni matematiche. Per i dettagli riferirsi al manuale JavaScript fornito da Netscape o ad un manuale Java (vedi Bibliografia).
Manipolatori di eventiNon ne esistono per oggetti interni.
Esempi
var piVar = Math.PI;
assegna il valore della costante pi nella variabile piVar.
Per poter usare un metodo Math, come per esempio abs(), bisogna utilizzare il
metodo richiesto passando gli argomenti opportuni, per esempio:
myValue = -8.68;
var absVal = Math.abs(value);
memorizza il valore 8.68 nella variabile myValue e memorizza 8.68 nella variabile absVal; cioè, rende il numero
positivo.
Gli oggetti genericiJavaScript ha ereditato da Java l'oggetto costruttore Object() che può essere usato per creare un oggetto generico. Quando questo oggetto viene creato, non gli viene assegnato nessun tipo specifico. Il tipo dell'oggetto viene allocato in seguito. Per esempio, per creare velocemente un array, si possono usare le seguenti istruzioni:
var myObject = new Object();
myObject[1] = "Value 1";
myObject[2] = "Value 2";
Oggetti di stringheUna stringa è una sequenza di caratteri legati insieme e racchiusi da virgolette doppie o singole.Per manipolare gli oggetti stringa, si utilizza la sintassi generale:
utilizzando l'istruzione var per creare la stringa e assegnarle eventualmente un valore; utilizzando un operatore di assegnamento (=) con un nome di variabile per creare la stringa e assegnarle eventualmente un valore; utilizzando il costruttore String() per creare una stringa, che è una proprietà nuova di Navigator 3.0 ProprietàLa proprietà length contiene la lunghezza della stringa.MetodiSono supportati i seguenti metodi di manipolazione di stringhe:
Manipolatori di eventiGli oggetti string vengono costruiti in Navigator e non possiedono manipolatori di eventi.EsempiPer creare una stringa, si può utilizzare una delle seguenti istruzioni:
var test = "This is a string";
test = "This is a string";
var test = String("This is a string");
test = String("This is a string");
Bene, anche per questa volta è tutto. Con le cinque lezioni che abbiamo percorso fino ad ora è già possibile iniziare a programmare, e bene, in JavaScript. Per un uso professionale consiglio senz'altro di acquistare un buon libro su JavaScript, come quelli suggeriti sotto, magari tramite il Bookstore di Beta. In tutti i casi è sempre altamento consigliato scaricare il manuale aggiornato JavaScript dal sito Netscape, che contiene le modifiche apportate per le ultime versioni di Navigator.
Fine Quinta parte______________________________________________________________________________
BIBLIOGRAFIA E RIFERIMENTI
Riferimenti BETA
Gruppi di discussione
Documentazioni cartacee
Luciano Giustini è raggiungibile su Internet all'indirizzo l.giustini@beta.it
 Per saperne di più sui corsi di BETA
Copyright © 1998 Luciano Giustini, tutti i diritti sono riservati.
Questo Articolo di BETA, insieme alla Rivista, è distribuibile secondo i termini e le
condizioni della Licenza Pubblica Beta, come specificato nel file
LPB.
|
|
|
