Creazione di un oggetto personalizzato con

Transcript

Creazione di un oggetto personalizzato
Creazione di un oggetto personalizzato con "java script"
La creazione di un oggetto personalizzato si divide in due parti. La prima consiste nel creare
la definizione dell'oggetto; la seconda nel creare una nuova istanza dell'oggetto stesso,
al fine di poterlo utilizzare.
La definizione dell'oggetto comprende la dichiarazione delle sue proprietà e dei suoi
metodi.
La creazione di una nuova istanza dell'oggetto richiede l'attribuzione di un nome simbolico
all'istanza, e si ottiene mediante l'utilizzo della funzione "New" (In java script , new è una
parola riservata e non una funzione).
Nell'esempio seguente viene mostrato il processo di creazione e l'utilizzo di un oggetto
all'interno di una pagina Web.
creazione
1. Creare una pagina web di nome lampadabanner.htm. Aggiungere i tag HTML
fondamentali e il tag script d'apertura.
<html><head>
<title>Banner Personalizzato</title>
<script language="javascript">
2. Creare l'oggetto lampada (Lampada) utilizzando la parola chiave function. L'oggetto
creato utilizzerà un argomento, chiamato testoAd, che sarà il testo del banner.
function Lampada(testoAd) {
3. All'interno della funzione, creare una proprietà di nome bannerAd e assegnare ad essa
file:///C|/Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag1_appuntijavascript.htm (1 di 16)05/10/2004 23.00.22
il valore del parametro testoAd
this.bannerAd = testoAd;
4. Creare un metodo, denominato visualizza, e assegnarlo ad un'altra funzione
denominata display. Questa funzione potrà essere definita più avanti nello script o
direttamente dopo l'uguale.
this.visualizza = display;
}
function display() {
document.writeln(this.bannerAd + '<br>');
}
</script>
utilizzo
5. Aggiungere il codice HTML di base per il tag di apertura body e un titolo.
<body>
<h1>Lampade in vendita</h1>
6. Aggiungere un tag di apertura script. Dichiarare una variabile di nome ad ed assegnare a
questa un messaggio di testo.
<script>
var ad = "Oggi in vendita!";
7. Aggiungere un'istruzione per creare una nuova istanza dell'oggetto Lampada utilizzando
la parola chiave new.
laLampada = new Lampada(ad);
8. Richiamare il metodo visualizza dell'oggetto.
laLampada.visualizza();
</script>
</body></html>
9. Salvare la pagina con il nome lampadabanner2.htm modificando la variabile ad con il
contenuto: "Tutte le lampade sono scontate del 50%".
Come ultima operazione si può provare ad aggiungere allo script le seguenti due righe:
laLampada.banner = "Nuovo messaggio";
laLampada.visualizza();
Si vedrà comparire nella pagina una nuova riga contenente "Nuovo Messaggio".
___________________________
In java script, gli oggetti si possono dichiarare utilizzando la "funzione costruttore", la
quale deve avere un nome simbolico iniziante con una lettera maiuscola (questo per buona
norma di programmazione). Le funzioni, come ben si sa, non vanno in esecuzione da sole,
ma servono, in questo caso, per dichiarare le variabili utilizzate per indicare le "proprietà"
dell'oggetto e per definire i "metodi" che ne indicheranno i comportamenti. La funzione
costruttore (l'equivalente della "classe") definisce in sostanza la struttura dell'oggetto e ne
costituisce il modello di rappresentazione. Ogni singola istanza dell'oggetto, ottenuta con la
funzione new, conterrà (incapsulamento) un set di proprietà dell'oggetto e avrà a
disposizione l'insieme dei metodi di quell'oggetto. Proprietà e metodi potranno essere
utilizzati indicando il nome simbolico dell'istanza (ogni istanza dovrà averne uno) seguito dal
punto e dal nome della proprietà o del metodo(nomeistanza.nomeproprietà).
Nella funzione costruttore, le proprietà e i metodi della definizione dell'oggetto dovranno
essere indicati utilizzando la parola riservata this. Se questa parola non viene indicata, la
variabile non sarà duplicata in ogni istanza, e quindi non potrà costituire una proprietà
dell'oggetto(potrà, invece, essere utilizzata come variabile comune a tutte le istanze).
Spesso le istanze vengono chiamate oggetti. Questo può creare confusione, ma bisogna
sempre tener presente che un conto è la definizione dell'oggetto e un conto sono le sue
istanze.
La programmazione orientata agli oggetti permette di organizzare meglio il lavoro di
programmazione, specialmente quando si debbono utilizzare piattaforme che prevedono
già numerosi oggetti precostituiti e disponibili. Le pagine web ne sono un esempio, proprio
perché possono contenere script che oltre a far riferimento ad oggetti definiti dall'utente,
possono utilizzare oggetti precostituiti e contenuti nel sistema DOM - Document Object
Model - .
Gli oggetti del DOM sono definiti direttamente all'interno del browser web e permettono alle
pagine web, fra le altre cose, di poter essere interattive. Questo poiché le singole istanze di
questi oggetti possono utilizzano il sistema degli eventi, che è stato definito e attivato sui
vari oggetti del DOM, attraverso il quale è possibile indicare le azioni da eseguire quando si
verificherà un determinato evento (click sull'oggetto, ad esempio, se quest'ultimo è collegato
all'evento che prevede il click del mouse sulla zona del video occupata dalla
rappresentazione visuale dell'istanza dell'oggetto in questione).
_________________________________
Alcuni elementi di java script
Innanzitutto è bene sottolineare che la grande forza di JavaScript (d'ora in poi JS), e anche
la sua difficoltà iniziale, risiede nella somiglianza di questo linguaggio al C, e precisamente
alla versione introdotta con Java, ovvero il C senza puntatori (da cui il prefisso Java-).
Sebbene non presenti l'enorme versatilità e duttilità del C vero e proprio, e sia in ogni caso
limitato nelle funzionalità rispetto a Java, JS rappresenta comunque un linguaggio in tutto e
per tutto, e in questo si discosta dalla procedura a marcatori dell'HTML. In altre parole, javascript ha finalità simili rispetto a java, ma l'approccio ai due linguaggi è significativamente
differente. Dal punto di vista esecutivo, JS e' un linguaggio imperativo interpretato, dal client
stesso, e quindi non richiede compilazione come il java. Tutto ciò che serve per vederlo
funzionare è un client web che lo supporti. Java script è un linguaggio di scripting, e viene
quindi scritto dentro le pagine web stesse (è possibile anche collegarlo da listati esistenti,
vedremo come). E' poi il client, individuatolo attraverso marcatori HTML propri, a eseguire il
codice, a visualizzare la pagina, ad eseguire altro codice ecc.
Per definire una parte della pagina (campo di scripting) in cui scrivere codice JS, bisogna
utilizzare la seguente sintassi:
<SCRIPT LANGUAGE="JavaScript"> // Questo codice verrà eseguito da tutti
i client con supporto JS ..codice.. </SCRIPT>
E' possibile scrivere il codice JS separatamente e definirne l'inclusione in una o più pagine
quando queste vengono richiamate, con un'istruzione come la seguente:
<SCRIPT SRC="/script/listElements.js" LANGUAGE=""JavaScript">
</SCRIPT>
Dove inserire la sezione JavaScript nella pagina
Sebbene teoricamente si possa inserire codice JavaScript in ogni dove nella pagina, si
possono formulare alcuni consigli per una migliore strutturazione. Per esempio, porre tutta
la sezione JS all'interno dei tag <HEAD> e </HEAD> è senz'altro una buona abitudine,
perché è la prima parte della pagina che il client legge ed interpreta. Molti programmatori
preferiscono porre tutto alla fine, altri ancora vicino agli oggetti della pagina che devono
manipolare. La scelta è ampia, come detto, e a livello di specifiche non ci sono obblighi da
rispettare, ma è molto meglio non mischiare indiscriminatamente codice HTML con codice
JS.
Funzioni
Il costrutto fondamentale di ogni programma JavaScript è la funzione.
Le funzioni in JS rappresentano lo scope locale più esterno possibile, ovvero il massimo
costrutto nel quale le variabili sono locali: variabili definite o dichiarate dentro una funzione
sono viste solamente all'interno della funzione e in tutte le procedure contenute in essa.
Tutte le altre variabili generate all'interno di un campo <SCRIPT>....</SCRIPT>, ma al di
fuori di funzione, sono di tipo globale (o almeno dovrebbero esserlo), ovvero sono viste da
tutte le funzioni all'interno di campi script nella pagina.
Analisi della sintassi
La sintassi tipica di una funzione JS all'interno di un campo scripting è abbastanza
semplice. Il corpo deve essere sempre contenuto in una parentesi graffa aperta e in una
chiusa: { }. Il nome delle funzioni deve contenere poi due parentesi tonde, con dentro
opzionalmente le variabili passate dal chiamante (parametri attuali); e tutti i nomi sono casesensitive. Questa ultima caratteristica impone che il nome unaFunzione() sia diverso da
UNAFUNZIONE(). Lo stesso vale ovviamente per i nomi di variabile.
Vediamo ora la dichiarazione di una semplice funzione. Quando viene invocata, la funzione
seguente mostra una finestra standard con un bottone "OK" e il testo specificato fra
virgolette.
function doThis() {
alert("Salve,benvenuto in questa pagina");
}
La stessa funzione precedente inserita in una pagina e chiamata quando la pagina stessa è
stata completamente caricata. saluto.htm
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="doThis()">
<H3>Esempio di una finestra "alert"</H3>
</BODY>
</HTML>
Comandi JavaScript
I comandi possono essere costituiti da blocchi di codice, abbiamo visto il costrutto della
funzione che può servire a contenerli, oppure da singole righe di codice.Ogni comando che
occupa una singola linea può avere un punto e virgola (;) che indica la fine del comando.
Ricordarsi che JavaScript è un linguaggio case-sensitive, distingue cioè le maiuscole
dalle minuscole. Al contrario dell'HTML, quindi, ma attenzione: il codice JavaScript dentro
al codice HTML è ancora case-sensitive tranne per quello che viene considerato a tutti gli
effetti come tag HTML.
salutob.htm
<HTML>
<!-function doThis() {
alert("Salve, e benvenuto in questa pagina");
}
//-->
</SCRIPT>
<BODY>
<H4>Esempio di una finestra "alert"</H4>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Mostra Saluto" ONCLICK="doThis()">
</FORM>
</BODY>
</HTML>
OnClick, attributo di evento JavaScript, in questo caso diventa a tutti gli effetti un tag HTML
e come tale la sintassi è case - insensitive: può essere scritto tutto maiuscolo, minuscolo,
ecc. La chiamata di funzione doThis(), come valore, deve essere invece scritta
esattamente come è stata dichiarata.
Commenti
I commenti si dividono tra quelli a riga singola (//.. ) e quelli composti (/* .. */); questi ultimi
servono qualora vogliate scrivere annotazioni su più righe
Le variabili
In Javascript non è obbligatorio dichiarare le variabili, anche se è comunque consigliato. Il
tipo delle variabili è automatico e viene rilevato da javascript in base alla prima
assegnazione (le conversioni, poi, sono automatiche e vengono effettuate in base alle
esigenze). La parola chiave var, seguita dal nome della variabile e da una eventuale
operazione di assegnazione completino il lavoro.
var nome_var;
oppure
var nome_var = valore;
I nomi delle variabili sono case sensitive, e quindi Numero è un'altra variabile rispetto a
numero.
Le variabili possono essere locali o globali. Sono locali quelle variabili dichiarate all'interno
di funzioni, il cui campo di validità è appunto la funzione in cui sono state dichiarate. Le
variabili globali sono condivise da tutti gli script nella pagina e possono essere utilizzate
fuori e dentro le funzioni; vengono di solito dichiarate all'inizio dello script principale,
esternamente a tutte le funzioni.
Per assegnare dei valori alle variabili si utilizza:
nome_var = valore;
Per incrementare o decrementare una variabile (ad esempio di 1) possiamo scrivere:
x = x + 1;
oppure
x +=1;
e
x = x -1;
oppure
x -=1;
Per gli incrementi o decrementi unitari, si può anche utilizzare:
x ++;
oppure
++ x;
e
x --;
oppure
-- x;
Se ++ o -- precedono la variabile, l'incremento o il decremento avviene prima
dell'esecuzione dell'espressione. Se seguono la variabile, prima viene eseguita
l'espressione.
I tipi di dati utilizzati in javaScript sono i dati numerici interi, i dati numerici con parte
frazionaria (floating point), i valori booleani (assumono solo due valori, true e false) e le
stringhe (o oggetti stringa).
Le Stringhe
Le Stringhe vengono memorizzate in <<oggetti stringa>>; questo implica che possiamo
utilizzare metodi e proprietà tipiche delle variabili oggetto . Per creare un nuovo oggetto
stringa possiamo utilizzare una delle seguenti istruzioni:
strNome = "Contenuto della Stringa";
strNome = new String("Contenuto della Stringa");
Per assegnare un valore ad una variabile stringa, si utilizza la classica operazione:
strNome = "Contenuto";
L'operatore di concatenazione per le stringhe è il + E' possibile inoltre utilizzare l'operatore
+= per aggiungere qualcosa alla stringa
Per calcolare la lunghezza di una stringa si utilizza la proprietà length dell'oggetto String.
L = strNome.length;
I metodi toUpperCase() e to LowerCase() convertono rispettivamente una stringa in
maiuscolo e in minuscolo:
strNomeMaiuscolo = strNome.toUpperCase();
strNomeMinuscolo = strNome.toLowerCase();
Il metodo substring(start,end) estrae una sottostringa dalla stringa di partenza dal
carattere start fino al carattere end escluso. Il primo carattere di una stringa è il carattere 0.
I vettori
JavaScript gestisce i vettori con contenuto numerico o con le stringhe. Prima di utilizzare un
vettore, è necessario dichiararlo, utilizzando la seguente sintassi:
vetNumeri = new Array(20);
La precedente istruzione dichiara un vettore di 20 elementi (con indice da 0 a 19).
Per assegnare un valore ad un elemento di un vettore si utilizza:
vetNumeri[indice] = valore;
La proprietà length indica il numero di elementi del vettore
Il metodo sort permette di ordinare un vettore
L = vetNumeri.length;
vetOrdinato = vetParole.sort();
Comandi condizionali: if..else
Il comando if..else è un'istruzione condizionale che permette di eseguire uno o più comandi
JavaScript, in base a una condizione definita dall'utente.
If..else
sintassi
if (condition) { statement(s).. } [ else { statement(s).. } ]
Gli operatori di confronto sono:
== Uguale
!= Diverso
< Minore
<= Minore Uguale
> Maggiore
>= Maggiore Uguale
Gli operatori logici sono:
|| OR
&& AND
! NOT
Se i confronti sono multipli, è possibile utilizzare la struttura switch:
switch (variabile) {
case valore1 :
istruzioni1 ......;
break;
case valore2:
istruzioni2 ......;
break;
.....
default :
istruzioni_default .... ;
}
Esempio
istruzif.htm
<HTML>
<!-var today = new Date();
var minutes = today.getMinutes();
if (minutes >= 0 && minutes <=30)
document.write('<BODY TEXT="#FFFFFF" BGCOLOR="#000088">');
else
document.write('<BODY TEXT="#000088" BGCOLOR="#FFFFFF">');
//-->
</SCRIPT>
Questo è un esempio di documento condizionale
</BODY>
</HTML>
Notare che il tag <BODY> manca nel documento (c'è una riga bianca al suo posto): questo
è voluto, poiché è il programma JavaScript che lo dichiara, a seconda dell'ora in cui viene
visualizzato il documento. Notare anche che questo codice JavaScript viene eseguito
direttamente non essendo contenuto in una funzione.
Vediamo ora un altro esempio:
Si vuole costruire una pagina web che abbia lo sfondo di colore rosso se l'orologio del client
indica, al momento del caricamento della pagina, un'ora superiore o uguale alle 12; lo
sfondo della pagina dovrà invece essere di colore blu se l'ora indicata è minore delle 12.
Sulla pagina, in bianco, dovrà anche essere visualizzata l'ora rilevata, con tanto di minuti e
secondi.
In questo esempio viene nuovamente utilizzato l'oggetto Date, che fa parte degli oggetti
precostituiti del DOM (Date non è un oggetto visuale e le sue istanze vengono ottenute con
new. Gli oggetti visuali, invece, normalmente utilizzano i tag Html specifici per lo stesso
scopo. In questo caso, l'istanza dell'oggetto, oltre a venir creata, viene facilmente collocata
Esempioora.htm
nel posto desiderato nella pagina)
<HTML>
<HEAD>
<!-var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
if (hours >= 12)
document.write('<BODY TEXT="#FFFFFF" BGCOLOR="#FF0000">');
else
document.write('<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF">');
document.write('<B>');
document.write('Al momento del caricamento della pagina sono le ore ' + hours + ' : ' +
minutes + ' : ' + seconds + '</B><BR>');
//-->
</SCRIPT>
</HEAD>
<BODY>
Questo è un esempio di documento condizionale
</BODY>
</HTML>
Comandi di cicli e iterazioni: for, for..in, while
JavaScript possiede tre comandi di iterazione: for, for..in e while, oltre ai comandi break e
continue.
For
sintassi
for ([initial-expression]; [condition]; [update-expression]) { statement(s)... }
esempio
cicli.htm
<HTML><HEAD>
<!-function exampleLoop() {
for (var size=50; size <= 300; size+=50)
document.write('<HR ALIGN=LEFT WIDTH=' + size + '>');
}
//-->
</SCRIPT>
</HEAD>
<BODY><SCRIPT> exampleLoop(); </SCRIPT></BODY></HTML>
Notare che non ci sono le parentesi graffe all'interno del ciclo for, questo poiché
nell'esempio precedente c'è un solo comando da eseguire nel for (una sola riga di codice).
Una variazione del ciclo for è for..in, utilizzato per analizzare le proprietà di un oggetto, che
identifichiamo con objectName, tramite l'ausilio di un contatore (i nell'esempio). In
JavaScript, una proprietà è un valore che appartiene a un oggetto; molti oggetti JavaScript
possiedono una serie di proprietà il cui valore può essere ricavato ed eventualmente
modificato.
For..in
sintassi
for (index in objectName) { statement(s).. }
esempio
proprieta.htm
<!-function showProperties(obj, name) {
document.write('<TABLE BORDER=1><TR><TD ALIGN=MIDDLE>'+ name +
'</TD></TR>');
for (i in obj)
document.writeln('<TD>' + i + '</TD>');
document.writeln('</TABLE>');
}
showProperties(document, 'document');
//-->
</SCRIPT>
Notiamo alcune cose: alla funzione sono passate due variabili; una delle due è chiamata
obj, e non object, che potrebbe sembrare più intuitivo, perché object è una parola riservata.
Fate sempre attenzione quando scegliete i nomi di variabili a tener conto delle parole
riservate.
Ciclo While
Questo costrutto serve per ripetere un blocco di codice mentre una certa condizione risulta
vera.
Es. Per visualizzare i numeri da 1 a 10 in una pagina si può scrivere il seguente script::
visualizzanum.htm
<script language="javascript">
var i = 1;
while (i <=10) {
document.writeln(i + '<br>');
i++;
}
</script>
(Notare come writeln non mandi a capo ma permetta solamente di spaziare i numeri.
Document.write o writeln, inoltre, scrive convertendo a stringa eventuali numeri presenti
come argomento)
Ciclo Do ..... While
L'esempio precedente si può sviluppare anche in questo modo:
visualizzadowhile.htm
<script language = "javascript">
var i = 1
do {
document.writeln(i + '<br>');
i++;
} while (i < 11);
</script>
_________________________________
Utilizzo di oggetti integrati
Il software del browswer contiene degli oggetti integrati. Quando si realizza un'applicazione
Web, è possibile accedere a questi oggetti, così come alle rispettive proprietà e metodi.
Questa raccolta gerarchica di oggetti segue uno standard chiamato DOM (Document Object
Model).
Gerarchia di oggetti all'interno del DOM
Tutti gli oggetti all'interno del DOM hanno una posizione gerarchica all'interno del DOM
stesso.L'oggetto window si trova nella posizione più alta nella gerarchia e può contenere
molti oggetti figli, quali history, location, event, screen, frames e document. Con
l'eccezione dell'oggetto window, ciascun oggetto all'interno del DOM è contenuto all'interno
di un oggetto parent.
L'oggetto document contiene la propria serie di oggetti figli, tra cui la collezione forms. Una
collezione consente a uno o più oggetti dello stesso tipo di coesistere all'interno della stessa
gerarchia del DOM. Gli oggetti all'interno della collezione vengono numerati a partire da
zero. La collezione è praticamente un array, e questo numero serve per identificare
l'oggetto all'interno della collezione Si possono utilizzare le collezioni forms: links, ancor,
images.
Es. Se in una pagina ci sono più moduli (Sono i form definiti dal tag html omonimo. Nei form
possono essere contenuti i bottoni, le caselle di testo ecc) il primo modulo è identificato da
forms[0].
Chiamata1.htm
<body>
<h1>Chiama il supporto tecnico</h1>
<form name="form1">
<input type = "button" name = "btnChiamata"
value = "Fai click qui per avere il numero"
onClick = window. alert("011- 87888888");>
</form>
</body>
----> Un altro modo per fare la stessa cosa
Chiamata2.htm
<body>
<form name="form1">
value = "Fai click qui per avere il numero"
onClick = "Chiamata()";>
</form>
<script language = "javascript">
function Chiamata() {
window. alert("011- 87888888");
}
</script>
</body>
----------> Ancora un altro modo, ma questa volta in Visual Basic Script
htm
Chiamata3.
<body>
<form name="form1">
value = "Fai click qui per avere il numero">
</form>
<script language = "vbscript">
sub btnChiamata_onClick()
window. alert("011- 87888888")
end sub
</script>
</body>
_____________________________________
Fare Click su questo link per passare alla Pagina 2

Creazione di un oggetto personalizzato con

Transcript

Documenti analoghi

Reindirizzamento di Url

Scriba - indice - Palestra della scrittura

Integrazione FastBooking Hotel

Scheda JavaScript

javascript area del triangolo

PARAMETRI DI INTERNET EXPLORER

TTJ #003 Una classe antispam

Esercitazione JavaScript #2

Mail a Giovanni: riguardo alla spiegazione sull`installazione di un

APPENDICE A - Hardware e software utilizzati.