- 12 Aprile 2007
- 3.227
- 0
- Miglior risposta
- 0
Che cos'è JavaScript
Javascript è un linguaggio di scripting per le pagine web ed è stato sviluppato dalla Sun Microsystem e da Netscape, la famosa società americana antagonista di Microsoft Internet Explorer.
Script, traducendo letteralmente, significa parte, copione. Queste parti di istruzioni vengono inserite all'interno del codice HTML, per migliorarne ed arrichirne le caratteristiche. Sarà possibile creare in JavaScript delle funzioni e degli oggetti da inserire ed integrare nel codice HTML. Inoltre verranno forniti ai Web Designer tutti gli strumenti necessari per migliorare e rendere più accattivanti i loro progetti.
Ovviamente dovremmo già conoscere bene il linguaggio HTML prima di iniziare a seguire questo corso.
Differenze tra Javascript e Java
Bisogna precisare che Javascript non è un linguaggio di programmazione così come il linguaggio Java.
Java è un vero e proprio linguaggio di programmazione piattaforma-indipendente, realizzato inizialmente per applicazioni industriali dalla Sun Microsystem, che genera piccole ma potentissime applicazioni chiamate "applets". Javascript è un linguaggio 'cross-platform' ed in poche parole è interpretabile su di una qualsiasi 'piattaforma' che disponga di un browser compatibile. Java viene utilizzato dal programmatore che vuole creare un programma eseguibile su una qualsiasi macchina grazie alla Virtual Machine che interpreta il codice (bytecode); Javascript serve sopratutto ai Web Designer che hanno intenzione di creare dei documenti interattivi. Per esempio, in questo modo sarà possibile verificare che una scheda personale (oppure un FORM) abbia i dati coerenti, tramite opportuni controlli, prima della sua elaborazione e spedizione.
Javascript, sebbene abbia un nome che richiama al linguaggio Java, al suo battesimo si chiamava LiveScript, probabilmente in seguito per motivi commerciali è stato chiamato JavaScript, anche perchè sintatticamente molto simile a Java.
Gli Oggetti
Rompiamo il ghiaccio con questi misteriosi oggetti. In Javascript, così come in altri linguaggi object oriented, gli oggetti sono delle 'cose' in cui è possibile osservare: la dimensione, la forma, il colore, il comportamento, e dove è anche possibile maneggiare le sue proprietà come ad esempio cambiarne lo stato.
Osserva i bottoni in alto sul browser: sono degli oggetti; le barre di scorrimento: sono degli oggetti; la finestra stessa in cui leggete: è un oggetto, un documento realizzato in Word oppure in Excel è un'oggetto, nel cui interno è possibile trovare altri oggetti, e così via dicendo.
Gli Eventi
Torniamo ai nostri cari ed utili bottoni, quando vi ci spostate sopra uno di essi e cliccate con il mouse provocate un EVENTO. Gli eventi sono delle cose che accadono o che potranno verificarsi in determinate situazioni (ad ogni CAUSA corrisponde un EFFETTO che possiamo controllare). Ad esempio possono essere stati provocati da un visitatore di una pagina web, che abbia cliccato su di un semplice link, quello e' un evento (l' evento 'Click'). Oppure possono essere stati provocati dalla pressione di un tasto della tastiera, quello e' un altro evento (l' evento 'KeyPress').
I tre elementi distintivi: Il corpo principale, Il gestore degli eventi, le funzioni
Così come in HTML anche Javascript, in grandi linee, ha la sua struttura che può essere organicamente suddivisa in tre elementi distinti: Il corpo principale, Il gestore degli eventi, le funzioni.
Cominciamo da quest'ultimo elemento.
Le funzioni
Le funzioni sono delle parti di codice che possono essere invocate o richiamate in qualsiasi momento si verifichi un evento proveniente sia dal corpo principale che eventualmente anche da un'altra funzione. E' corretto inserire le funzioni all'interno dell'intestazione del codice HTML, e quindi comprese tra <HEAD> e </HEAD>, in modo tale da permettere al browser di caricare subito in memoria queste parti di codice, con la finalità di averle immediatamente a disposizione.
Il corpo principale
Il corpo principale contiene le istruzioni Javascript comprese tra <SCRIPT LANGUAGE=”Javascript”> e </SCRIPT> inserite subito dopo <BODY> in HTML.
All'interno del corpo principale inseriremo tutte le istruzioni del nostro programma, comprendendo eventualmente tutte le eventuali chiamate a funzioni già inserite nell'intestazione.
Il gestore degli eventi
L'interattività tra l'utente ed il programma viene fornita dal gestore degli eventi, il quale rileva in tempo reale tutti gli spostamenti del mouse, la pressione dei tasti del mouse e della tastiera ma anche di altri eventuali strumenti di input installati sulla macchina.
Vediamo ora un breve e semplice esempio:
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function Saluto()
{
window.alert("Salve, amici dell'ISF!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type=button value="Clicca per invocare la funzione Saluto()" onClick="Saluto()">
</FORM>
</BODY>
</HTML>
In questo esempio è stato realizzato un bottone (<input type=button … ), alla cui pressione viene invocata la funzione Saluto() ( … onClick="Saluto()"> ), quest'ultima utilizza un METODO inserito all'interno della funzione: alert.
I metodi
Un metodo è una specie di funzione appartenente ad un oggetto, ed è il sistema per manipolare o maneggiare le proprietà dell'oggetto.
In questo caso l'oggetto è window, il suo metodo è alert che consente di vedere a video una finestra di warning o di avvertimento. In termini pratici, alla pressione del bottone, verrà visualizzato al centro dello schermo ‘Salve, amici di SoftwarePlanet!'
I metodi, quindi, sono proprietà degli oggetti, e noi dobbiamo imparare a sfruttare tutte queste proprietà a nostro vantaggio.
Anche nella vita quotidiana utilizziamo dei metodi, a volte senza rendercene conto, per esempio supponiamo di avere un oggetto: la lampadina. Questo oggetto ha due possibilità, essere: accesa (ON) o spenta (OFF). Il metodo, per cui sarà possibile cambiarne lo stato è l'interruttore.
Se dovessimo avere questa situazione in Javascript, sintatticamente, e facendo una analogia con il metodo alert, potremmo scrivere in questo modo per accendere la luce:
lampadina.interruttore(“ON”); oppure lampadina.interruttore(1);
e scrivere così per spegnere la luce:
lampadina.interruttore(“OFF”); oppure lampadina.interruttore(0);
interruttore ,dunque, è il metodo dell'oggetto lampadina.
Adesso proviamo un altro semplicissimo esempio facendo conoscenza con il metodo write:
Il metodo write
Sul famoso manuale del linguaggio C (Kerninghan-Ritchie), ma anche su altri manuali di linguaggi di programmazione, uno dei primi esempi che viene realizzato è fare apparire la celebre frase: “Salve Mondo!”.
Proviamo a realizzare questo esempio in Javascript:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
document.write(“Salve Mondo!”);
</SCRIPT>
</BODY>
</HTML>
Praticamente write è un metodo dell'oggetto document, in questo caso il suo scopo è di fare apparire sul browser la stringa di caratteri “Salve Mondo!” .
Infine al termine di ogni istruzione Javascript interpreta il punto e virgola come fine istruzione.
Finora abbiamo visto che Javascript è un linguaggio molto simile ad altri linguaggi di programmazione, la cui grammatica è molto semplice da acquisire. Potremmo azzardare questa definizione: “Javascript rispetta le direttive della programmazione strutturata, ma è basato sugli OGGETTI, che possiedono delle proprietà. Queste proprietà possono essere delle VARIABILI, e quindi hanno un determinato valore, oppure possono essere dei METODI, ovvero delle funzioni in grado di svolgere determinati compiti.”
Javascript è stato realizzato prevalentemente per arricchire il linguaggio di formattazione HTML. Le istruzioni Javascript sono di grande ausilio non solo per il WebDesigner, che potrà utilizzare le sue potenzialità per migliorare le pagine web, ma anche per il programmatore che avrà il controllo del linguaggio CLIENT-SIDE, ovvero dalla parte del browser.
I due tipi di Javascript: Javascript Client-Side e Javascript Server-Side
Javascript Client-Side
Quando il nostro browser ( Client ), richiede attraverso il protocollo HTTP una determinata pagina, il server interrogato, ritorna al richiedente il contenuto del documento ( HTML ).
Il browser legge il documento dall'alto verso il basso, mostrando attraverso il browser i risultati del codice HTML , interpretando e traducendo così anche le istruzioni Javascript che incontra passo dopo passo.
Detto così, il processo Client-Server può sembrare più complicato di quanto sia in realtà.
Ogni volta che noi ( Client ) utilizziamo il telefono, e richiediamo informazioni ad un addetto al centralino ( Server ), abbiamo un processo Client-Server . Ogni volta che utilizziamo il nostro browser ( Client ) e ci colleghiamo ad un sito internet ( Server ), abbiamo un processo Client-Server.
Vi ricordo che Javascript Client-Side incorpora la gestione degli eventi (o gestore degli eventi), di cui abbiamo fatto un brevissimo cenno nella precedente lezione. In questo modo attraverso il linguaggio Javascript saremo in grado di controllare l'interfaccia con l'utente direttamente sul browser, quindi dalla parte del Client ( Client-Side).
Javascript Server-Side
In questo caso le pagine HTML e le istruzioni Javascript , vengono compilate in un file denominato ‘ bytecode '.
Questo viene reso operativo su di un Server che contiene: ‘ The JS runtime engine' .
Il vantaggio di questa operazione, consiste nel fatto che il webmaster ha la possibilità, lato server, di connettere i bytecode con i file di sistema e sopratutto con i database relazionali .
Ad esempio il ‘ Javascript Livewire Database Server ' provvede a fornire tutti gli oggetti che servono per potere accedere ai database presenti sul server in SQL ( Structured Query Language ).
Uno svantaggio è intuitivo: Il bytecode viene condiviso ed utilizzato direttamente sul server, questo porta in alcuni periodi di massimo accesso a rallentamenti visibili.
E' molto importante comprendere il funzionamento e la differenza tra Javascript: Client-Side e Server-Side ; anche se in questo corso ci occuperemo esclusivamente di Javascript dalla parte del Client , quindi dalla parte del browser.
Vantaggi e svantaggi di un linguaggio interprete client-side
Tra i vantaggi dell'utilizzo di Javascript è evidente l'affidabilità; infatti un linguaggio interpretato ha il codice visibile o in chiaro, quindi i sorgenti sono a disposizione di chiunque, attraverso il browser. D'altro canto risulta evidente l'impossibilità di proteggere il codice, anche se quest'ultimo venisse tutelato dalle leggi sul diritto d'autore.
Javascript viene interpretato sul client, per cui il server non viene sollecitato se non è strettamente necessario.
Di conseguenza lo script per potere essere perfettamente funzionante deve essere completamente caricato dal browser, per questo motivo è importante inserire le funzioni nell'intestazione (prima parte) del documento, e la parte principale nel corpo (seconda parte) del documento.
Per cominciare il nostro lavoro avremo bisogno di un editor, vi consiglio di utilizzare il Notepad o blocco note di Windows, inizialmente andrà benissimo. Gli script andranno testati su più piattaforme e quindi useremo i due browser più utilizzati e che hanno garantito maggiore stabilità:
- Microsoft Internet Explorer 5.01 o superiore
- Netscape Navigator - dalla versione 4.06 fino alla versione 4.72
Ricordate che è importantissimo verificare se il proprio lavoro è compatibile e si presenta nello stesso modo su piattaforme e sistemi differenti.
Jscript: Il Javascript targato Microsoft
La prima versione di Jscript è stata la 1.0 , inserita nel Microsoft Internet Explorer 3.0 , questa implementazione si è basata sulla specifica di linguaggio ECMA 262 con integrazione di istruzioni che sfruttano esclusivamente le funzionalità del Document Object Model del Microsoft Internet Explorer .
Jscript , quindi, è compatibile con il linguaggio ECMA 262 ma possiede in aggiunta anche implementazioni proprietarie all'interno del suo browser.
Le implementazioni aggiuntive, unitamente alle diversità dei D.O.M. dei browser, ed alla staticità del linguaggio HTML hanno avuto come conseguenza la nascita del DHTML ( Dynamic HyperText Markup Language).
Il DHTML non va interpretato come un linguaggio, bensì come un insieme di tecnologie al fine di superare la diversità tra le varie piattaforme, ma di questo ne parleremo più avanti.
Oggi, Javascript e Jscript , viaggiano di pari passo (vedi Tabella A e Tabella B ), senza però avere una completa compatibilità, per cui dovremo abituarci all'idea di provare i nostri programmi con diversi browser (o diverse piattaforme).
Vediamo l'evoluzione delle versioni dei due principali browser:
Versioni Netscape Navigator
Browser Netscape Versione Javascript
Navigator 2.0 Javascript 1.0
Navigator 3.0 Javascript 1.1
Navigator 4.0 Javascript 1.2
Navigator 4.x Javascript 1.3
Tabella A
Versioni Microsoft Internet Explorer
Javascript Jscript
Versione 1.0 1.1 1.2 1.3 1.0 3.0 5.0
Explorer 3.0 * *
Explorer 4.0 * * * * *
Explorer 5.0 * * * * * * *
Tabella B
Navigator contro Explorer ovvero ‘la guerra dei browser'
Nella ‘guerra dei browser' ci sono stati anche dei colpi bassi, tra i quali risultò fin troppo evidente l'iniziativa della Microsoft di inserire in forma gratuita ed aggiuntiva il suo browser nei Sistemi Operativi Windows . Quest'ultima strategia iniziale, unitamente in un secondo tempo alla creazione di una ottima piattaforma ( Microsoft Internet Explorer 5 ), ha prodotto un vistoso aumento di utenti che preferisce MSIE e forse ha prodotto anche la vittoria finale.
Se mi permettete una battuta, chi di voi non acquisterebbe volentieri una automobile che avesse servizi accessori aggiuntivi e gratuiti come ad esempio l'assicurazione! (Se questo servizio esiste veramente mandatemi una mail)
Scherzi a parte, pensate alle difficoltà della Netscape che da quell'istante ha dovuto fornire il suo prezioso prodotto in forma gratuita, scatenando e vincendo solo in seguito l'azione legale di antitrust nei confronti della Microsoft .
Non voglio aggiungere altro in merito, però quando un giorno diventerete esperti programmatori in Javascript e vi accorgerete che qualcosa non funziona nel browser concorrente, a quel punto saprete che non è completamente colpa vostra!
Una conseguenza della guerra dei browser è la nascita del DHTML come necessità.
Il DHTML
Quando si parla di HTML dinamico , si pensa ad una evoluzione del linguaggio di formattazione HTML . Non è così. In realtà ci sono delle integrazioni di tecnologie differenti all'interno dell' HTML . Queste tecnologie possono essere ad esempio: Javascript , CSS, Jscript , VBScript , e vanno applicate di volta in volta a seconda del D.O.M. del browser incontrato.
Mi spiego meglio, sul browser della Netscape utilizzerò soluzioni dinamiche con il linguaggio Javascript , ma sul browser della Microsoft potrò utilizzare in aggiunta o in alternativa anche il VBScript (linguaggio di proprietà Microsoft). Conoscere il DHTML significa saper utilizzare tecnologie differenti allo scopo di arrivare al medesimo risultato nelle varie piattaforme. In parole povere significa ‘mettere una pezza' ai danni creati dalla ‘guerra dei browser'. Le guerre non sono mai state costruttive, in nessun campo.
Lasciamo il DHTML agli esperti del settore e torniamo al nostro linguaggio, il Javascript.
Prima di concludere questo paragrafo, vorrei darvi alcune delucidazioni sul tag <SCRIPT >, e su come nascondere le istruzioni ai browser non aggiornati o comunque non compatibili con il Javascript .
Il Tag <SCRIPT>
Nei precedenti esempi abbiamo già utilizzato il tag <SCRIPT> ed abbiamo appreso che il contenuto compreso tra:
<script language=”Javascript> e </script>
è un codice che il browser deve interpretare come linguaggio Javascript. Il tutto potrebbe essere sufficiente, se non fosse che Netscape raccomandi vivamente di indicare anche la versione di riferimento che si adopera. Il motivo è semplice: Javascript è in continua evoluzione, questa specifica permette eventualmente al browser di discriminare la compatibilità con le versioni precedenti. Per cui sarà possibile che incontriate, da questo momento in poi, il seguente TAG di apertura:
<script language=”JavascriptX.Y>
dove X.Y è la versione, ad esempio la versione Javascript 1.2 che è presente a partire dalle versioni 4 di Explorer e 4 di Netscape . (Vedere le tabelle A e B di riferimento , incontrate precedentemente)
Come nascondere il codice Javascript ai vecchi browser
Alcuni browser potrebbero non riconoscere le istruzioni in Javascript. Una tecnica adottata da molto tempo per nascondere il codice Javascript ai vecchi browser e che vi consiglio è la seguente:
<script>
<!-- Inizio - Nascondiamo lo script ai vecchi browser
Istruzioni Javascript
// Fine - Nascondiamo lo script ai vecchi browser -->
</script>
In questo modo le istruzioni Javascript non verranno eseguite sui browser che non hanno implementato il linguaggio Javascript. In pratica tutto quello che è compreso tra viene visto come un commento dai vecchi browser.
In realtà noi potremmo sfruttare questa tecnica anche per inserire alcune utili indicazioni, per esempio:
<script>
<!-- Inizio Funzioni mio programma
Funzioni Javascript
// Fine Funzioni mio programma -->
</script>
Di norma subito dopo l'introduzione ad un linguaggio di programmazione vengono immediatamente spiegate le caratteristiche basilari, quali: le variabili, le espressioni, gli operatori e così via dicendo, approfondendo successivamente le caratteristiche peculiari del linguaggio stesso.
La scelta di aggiungere questo capitolo, contenente dei semplici esempi, ha il seguente significato:
- Dimostrare che Javascript è un linguaggio intuitivo, semplice e veloce da imparare.
- Alleggerire il nostro corso in modo tale che non diventi troppo teorico e nozionistico.
Allo stesso modo ho intenzione di realizzare dei pratici esempi per le lezioni dei capitoli che seguiranno. Questo capitolo intitolato ‘Primi programmi in Javascript' è semplicemente una carrellata di script attraverso i quali spero possiate apprezzare da subito potenzialità e caratteristiche del linguaggio Javascript.
Il metodo WRITE, appartiene all'oggetto DOCUMENT, ed è stato il primo metodo da noi conosciuto nell'introduzione. Il suo compito è di scrivere una o più espressioni all'interno di un documento.
La sua sintassi è la seguente:
document.write(expr1[, ...,exprN])
dove expr1 ...,exprN rappresentano qualsiasi espressione Javascript, che includa: numeri, stringhe o espressioni logiche.
I metodi WRITE e WRITELN sono identici, eccetto per una importante caratteristica:
Il metodo WRITELN, quando il testo è preformattato, esegue automaticamente ad ogni fine linea un invio a capo.
Per preformattare un testo è necessario utilizzare il comando HTML <PRE>
Vediamo, prima, un esempio solo con il metodo WRITE :
<script language=”Javascript”>
var aStringa=”25.82”;
var bStringa=”51.65”;
document.write(“Abbonamento Autobus : “+aStringa+” euro <BR>”);
document.write(“Abbonamento Ferrovie: “+bStringa+” euro <BR>”);
</script>
Sono state dichiarate due variabili: ‘ aStringa ' e ‘ bStringa '. Con il metodo WRITE si possono visualizzare sia stringhe di testo inserite tra apici che variabili. Tramite il segno ‘+' possono essere concatenate in un'unica espressione. Per andare a capo possiamo utilizzare il comando HTML
, che verrà riconosciuto come TAG all'interno del metodo WRITE.
Esiste anche il comando javascript '\n' (da newline come nel linguaggio C), ma quest'ultimo è attivo solo con la preformattazione.
Vediamo lo stesso esempio utilizzando il metodo WRITELN unitamente al comando HTML <PRE> :
<script language=”Javascript”>
var aStringa=”25.82”;
var bStringa=”51.65”;
document.write(“<PRE>”);
document.writeln(“Abbonamento Autobus : “+aStringa+” euro”);
document.writeln(“Abbonamento Ferrovie: “+bStringa+” euro”);
document.write(“</PRE>”);
</script>
Pur non avendo inserito alcun comando di invio a capo, il risultato a video sarà quasi identico all'esempio mostrato in precedenza. In questo secondo esempio credo che abbiate notato che gli spazi vengono formattati, a differenza del primo esempio. Per questa ragione nel secondo esempio i dati sono correttamente allineati.
In Javascript possiamo utilizzare più direttive insieme
A seconda delle necessità è possibile inserire comandi all'interno del metodo WRITE o WRITELN.
Ma, per quale motivo dovremmo fare questa operazione?
Non sarebbe più conveniente utilizzare i comandi HTML, senza scomodare Javascript?
Un grande vantaggio di utilizzare i tag all'interno del codice Javascript è senza dubbio legato alla gestione delle variabili, dei cicli e delle strutture di controllo, che consentono di avere dinamicità nella creazione delle pagine web. Non dimentichiamo che HTML è solo un linguaggio di formattazione e per eseguire una semplice iterazione è necessario inserire del codice Javascript, facendolo interagire con gli oggetti del documento.
Per il momento cerchiamo di migliorare il layout dell'esempio precedente utilizzando due nuovi metodi:
Il metodo bgColor ed il metodo fgColor .
metodi bgColor e fgColor
I metodi bgColor e fgColor appartengono all'oggetto DOCUMENT. Il loro compito è di modificare rispettivamente il colore dello sfondo ed il testo di un documento.
La sintassi è la seguente utilizzando le stringhe:
document.bgcolor=”blue”; document.fgcolor=”white”;
Utilizzando i numeri esadecimali la sintassi è la seguente:
document.bgcolor=”#000072”; document.fgcolor=”#FFFFFF”;
anche in questo caso abbiamo realizzato il testo di colore bianco (“#FFFFFF”) su sfondo blu (“#000072”).
Cerchiamo di comprendere meglio questa importante notazione numerica.
La notazione esadecimale dei colori in Javascript
Per quanto riguarda i colori espressi in notazione esadecimale, viene adottata una tecnica definita RGB ( R ed, G reen, B lue). Di conseguenza la prima coppia rappresenta l'intensità del colore rosso , la seconda coppia rappresenta l'intensità del colore verde , la terza ed ultima coppia rappresenta l'intensità del colore blu .
Le intensità vanno da ‘00', che significa assenza di colore, ad ‘FF' che significa massima intensità di colore.
Miscelando le intensità o le tonalità di questi colori, detti primari, abbiamo questo incredibile risultato:
16777216 =256*256*256=FF*FF*FF
(dove FF esadecimale corrisponde al numero 255 decimale, da 0 a 255 esistono 256 possibili tonalità)
ovvero 16 milioni di colori disponibili.
Nel prossimo paragrafo vedremo come vengono trattate le immagini in Javascript, attraverso un effetto che è ancora molto utilizzato dai webmaster per dare dinamicità alla navigazione degli utenti attraverso il mouse: l'effetto rollover.
Uno degli effetti grafici più usati dai WebDesigner in Javascript, sia per facilità di realizzazione che per utilità è senza dubbio l'Effetto Rollover sulle immagini.
Questo effetto consiste nella sostituzione di una immagine di tipo GIF o JPG, al passaggio del puntatore del mouse sull'oggetto, creando una piccola animazione o evidenziazione dello stesso, che non ha tanto lo scopo di abbellire il documento quanto il fine di catturare l'attenzione dell'utente e di dirigerlo, eventualmente, verso altri documenti.
Esistono svariati modi di realizzare un ‘ Effetto Rollover' , tra questi ho scelto il più semplice e il più funzionale, integrandosi facilmente con il codice HTML.
Nel linguaggio HTML le immagini vengono inserite con il TAG <IMG>, queste possono essere gestite molto facilmente attraverso il linguaggio Javascript.
Vediamo in che modo:
Al seguente TAG HTML <IMG>:
<IMG src=”immagine1.jpg” name=”miaImmagine”>
viene corrisposto automaticamente il seguente Oggetto :
window.document.miaImmagine;
Un browser ( window ), nel quale documento ( document ) è stata inserita una immagine ( miaImmagine ).
A questo punto osservate la riga di codice Javascript che segue:
window.document.miaImmagine.src=”immagine2.jpg”;
Eseguita questa istruzione, viene sostituita la prima immagine (immagine1.jpg) già caricata in precedenza con il tag <IMG>, con la seconda immagine (immagine2.jpg).
Ciò avviene tramite src , che non è un metodo ma una proprietà appartenente all'immagine ( miaImmagine ), questa sostituzione viene definita dinamica, cioè senza che venga contattato nuovamente l'host e senza che venga nuovamente caricato il documento con i suoi oggetti.
Per praticità (e senza alcun tipo di problema) potete sottintendere nell'ordine, gli oggetti window e document , semplificando la precedente riga di codice in questo modo:
miaImmagine.src=”immagine2.jpg”;
A questo punto dobbiamo scegliere gli eventi che attiveranno la sostituzione ed il ripristino delle immagini tramite il puntatore del mouse.
Gli eventi da controllare sono i seguenti:
Se il puntatore del mouse è sopra l'oggetto miaImmagine (evento onMouseOver ), sostituisci il contenuto dell'oggetto con un'altra immagine specificata.
Se il puntatore del mouse è fuori dall'immagine miaImmagine (evento onMouseOut ), sostituisci il contenuto dell'oggetto con l'immagine caricata precedentemente.
Ad ogni evento si associa una porzione di codice da eseguire, con queste istruzioni viene attivato l'Effetto Rollover.
</HEAD>
<BODY bgcolor=black>
<a href="#"
onmouseover="miaImmagine.src='over.jpg';"
onmouseout="miaImmagine.src='out.jpg';">
<img name="miaImmagine"
src="out.jpg"
alt="Il puntatore del mouse è sopra l'immagine!"
border="0">
</img>
</a>
</BODY>
Vi sottolineo nuovamente che le istruzioni Javascript, inserite tra i doppi apici, sono state associate agli eventi:
onmouseover="miaImmagine.src='over.jpg';"
onmouseout="miaImmagine.src='out.jpg';"
i quali sono stati inseriti all'interno del TAG <A> (anchor) unitamente all'oggetto IMG.
Questa è una testimonianza della sinergia esistente tra il linguaggio Javascript ed il linguaggio HTML.
Per una buona riuscita dell'effetto vi consiglio di utilizzare immagini che non siano molto pesanti da caricare e che soprattutto abbiano tra loro le medesime caratteristiche tecniche.
Se non avete esperienza nell'utilizzo dei programmi di grafica vi consiglio di cercare attraverso i motori di ricerca le immagini e i bottoni che vengono offerti in rete gratuitamente, selezionando i più adattabili al vostro sito.
In genere è consigliabile effettuare un precaricamento delle immagini, ma questa importante operazione la vedremo in dettaglio nella prossima lezione, conoscendo l'Oggetto Image.
I nomi
abstract Do if package throw
boolean Double Implements private throws
break Else Import protected transient
byte Extends in public true
case False Instanceof return try
catch Final int short var
char Finally Interface static void
class Float Long super while
const For Native switch with
continue Function New synchronized
default Goto Null this
Non potrete inserire uno spazio in mezzo al nome
L'interprete Javascript farebbe confusione generando un messaggio di errore.
Non potrete inserire il segno ( . ) in mezzo al nome
Abbiamo avuto modo di vedere che il segno (.) viene utilizzato con gli Oggetti.
Non potrete inserire il segno ( - ) in mezzo al nome
In questo caso il mio consiglio è quello di mettere in maiuscolo la prima lettera della seconda parola (es. ascoliPiceno), oppure di utilizzare il maiuscolo per ambedue le prime lettere (es. AscoliPiceno).
Una valida alternativa è il carattere underscore ( _ ) inserita tra le due parole (es. ascoli_piceno).
Infine ricordatevi che il nome deve sempre iniziare per una lettera.
Una variabile con il nome ‘67dan' non è valida, mentre ‘dan67' è corretta.
Le Variabili
Le variabili rappresentano il modo con il quale un codice di programma Javascript memorizza le informazioni affinchè possano essere aggiornate e modificate.
Le variabili vengono identificate dai nomi che sono delle parole che le rappresentano nel programma Javascript.
Dichiarare le Variabili
Il modo migliore per dichiarare le variabili è quello esplicito e cioè di utilizzare la keyword var , seguita dal nome che si intende attribuire alla variabile. Negli esempi del capitolo precedente avrete notato la presenza di questo tipo di creazione di variabile:
var abbonamentoBus=25.82;
In pratica si tratta di una abbreviazione delle seguenti linee di codice:
var abbonamentoBus;
………
abbonamentoBus=25.82;
Supponiamo di dovere creare due variabili così come sopra: abbonamentoBus e abbonamentoTreno e di dovere assegnare ad entrambe la medesima cifra di 25.82 euro:
var abbonamentoBus;
var abbonamentoTreno;
………
abbonamentoBus=25.82;
abbonamentoTreno=25.82;
Anche in questo caso è possibile fare una abbreviazione in una unica riga:
var abbonamentoBus=abbonamentoTreno=25.82;
Il programmatore Javascript, nei limiti del possibile e senza compromettere la leggibilità del codice, deve sempre cercare di ridurre il numero di istruzioni, affinchè lo script risulti poco ingombrante ai fini dello scaricamento della pagina web.
Le variabili locali e le variabili globali
Le variabili devono essere dichiarate come globali o come locali. Questa operazione ha influenza sull'area di validità di una variabile che si riferisce alla sua visibilità ed alla sua durata, per esempio le variabili locali vengono dichiarate e sono utilizzabili solamente all'interno delle funzioni in cui vengono dichiarate:
function incrementa(valore) {
var a=a+valore;
………
}
la variabile ‘valore' viene definita locale in quanto al di fuori della funzione ‘ incrementa' essa non esiste.
Invece le variabili globali sono visibili in tutto il programma, funzioni comprese.
Tipi di valori
A differenza di altri linguaggi di programmazione, Javascript non è un linguaggio fortemente ‘tipizzato', di conseguenza non richiede espressamente la dichiarazione del tipo di valore che si intende di associare alla variabile. L'interprete Javascript automaticamente definisce durante la prima assegnazione di valore, il tipo di dato:
TIPO DI DATO ESEMPIO
Numerico var a=1;
logico var ciclo=true;
stringa var b="giorgio";
null var nulla=null;
Variabili numeriche
I numeri possono essere sia interi, positivi e negativi, incluso lo zero. Vengono normalmente rappresentati in base decimale, ma possono essere rappresentati in base ottale (8) aggiungendo uno 0 davanti al numero compreso da 0 a 7, oppure possono essere rappresentati in base esadecimale (16) aggiungendo 0x davanti al numero, formato dai numeri da 0 a 9 e dalle lettere dalla A alla F.
Esempio:
var num_decimale=10;
var num_ottale=012;
var num_esadecimale=0xA;
in questo caso abbiamo dichiarato lo stesso numero ma rappresentato in basi diverse.
I numeri possono essere in virgola mobile, comprendendo numeri positivi e negativi.
Esempio:
var x=1.23;
var y=–4.56;
Per finire, i numeri possono essere rappresentati in notazione scientifica.
Il numero 6780000 corrisponde a 6.78e6
Esempio:
var s=6.78e6;
Valori Logici
Per valori logici si intendono le parole true (vero) e false (falso), i valori logici vengono definiti anche valori Boolean.
Per esempio:
var ciclo=true;
var flag=false;
Stringhe
Le stringhe sono formati da uno o più caratteri di testo racchiusi da apici o doppi apici. Per esempio:
var stringa=“Questo è un esempio di stringa”;
var stringa=”Giovanni 1967”;
Valori nulli
Viene rappresentato come null . Questo è di norma il valore di una variabile che non è definita, e che non ha ancora assunto alcun valore.
L'utilizzo degli operatori nel linguaggio Javascript è estremamente intuitivo. Gli operatori insieme alle variabili e le lettere formano un'espressione che ha il compito di eseguire come risultato un valore. Esistono diversi tipi di operatori:
- Operatori di assegnamento
- Operatori aritmetici
- Operatori di confronto
- Operatori di stringhe
- Operatori logici
- Operatori binari
Operatori di assegnamento:
Gli operatori di assegnamento si occupano di prelevare il valore contenuto nel secondo operando (a destra dell'operatore) trasferendolo nel primo operando (a sinistra).
Per esempio:
variabile = ”Salve Mondo”;
abbonamentoBus = 25.82;
Operatori aritmetici:
Gli operatori aritmetici creano le espressioni aritmetiche insieme agli operandi che sono esclusivamente dei valori numerici che danno come risultato un singolo valore numerico.
Operatore compatto Utilizzo Operatore
a+=b Incremento a=a+b
a-=b Decremento a=a-b
a*=b Moltiplicazione a=a*b
a/=b Divisione a=a/b
a%=b Modulo
(restituisce il resto di a/b)
Operatori di confronto:
Gli operatori di confronto si occupano di paragonare i valori contenuti nel primo e nel secondo operando, restituendo un valore Booleano come risultato.
Operatore Utilizzo
a==b Confronta se a è uguale a b
a!=b Confronta se a è diverso da b
a<b Confronta se a è minore di b
a<=b Confronta se a è minore o uguale di b
a>=b Confronta se a è maggiore o uguale di b
a>b Confronta se a è maggiore di b
Operatori di stringhe:
Nella lezione 5 abbiamo visto che è possibile concatenare le stringhe, cioè i valori stringa a e b possono essere aggiunti l'uno all'altro:
Operatore compatto Utilizzo Operatore
a=b Assegna ad a la stringa b a=b
a+=b Concatena le stringhe a=a+b
Per esempio:
a=”buon”;
b=”giorno”;
a+=b;
A questo punto la variabile a contiene la stringa “ buongiorno ”
Operatori logici:
Gli operatori logici lavorano con i valori booleani:
Per esempio
Operando1 && Operando2
restituisce vero solo se entrambi gli operandi sono veri. Restiruisce falso in ogni altro caso.
Operando Operatore Operando Risultato
True && >True True
True && False False
False && True False
False && False False
Operando1 || Operando2
restituisce vero se almeno uno degli operandi ha il valore logico true .
Operando Operatore Operando Risultato
True || True True
True || False True
False || True True
False || False False
Inoltre il segno ‘!' è un operatore unario. Restituisce false se la condizione è true e viceversa.
Operatore Operando Risultato
! true False
! false True
Operatori binari:
I computer pensano in base binaria, dove qualcosa ( bit ) può essere attivo (1) o disattivo (0). L'uomo è abituato a pensare in base decimale ed utilizza, ad esempio, i numeri 3, 8 e 11 che vengono memorizzati ed utilizzati in binario nei numeri 11, 1010, 1011. In determinati casi può essere utile manipolare direttamente il numero binario, e di accedere ai suoi bit, questo è possibile attraverso gli operatori binari chiamati anche operatori bitwise.
Gli operatori logici bitwise sono quattro:
And(&)
Operando Operatore Operando Risultato
1 && 1 1
1 && 0 0
0 && 1 0
0 && 0 0
Or ( | )
Riporta 1 se uno o entrambi gli operandi sono 1 e 0 e 0 se entrambi gli operandi sono 0.
Operando Operatore Operando Risultato
1 && 1 1
1 && 0 1
0 && 1 1
0 && 0 0
Xor 0 (^)
Riporta 1 se solo uno degli operatori è 1, negli altri casi riporta 0.
Operando Operatore Operando Risultato
1 && 1 0
1 && 0 1
0 && 1 1
0 && 0 0
Not(~)
Operatore unario che riporta 1 se il suo operando è 0, e 0 se il suo operando è 1.
Operatore Operando Risultato
~ 0 1
~ 1 0
Facciamo degli esempi pratici, se scriviamo:
25 & 10 il risultato è 8
11001 &
01010 =
1000
se scriviamo:
25 | 10 il risultato è 27
11001 |
01010 =
11011
se scriviamo:
25 ^ 10 il risultato è 19
11001 ^
01010 =
10011
Esistono anche operatori bitwise shift dove i bit del primo operando vengono spostati di n posti, attraverso un valore ( n ) presente nel secondo operando:
<< Shift a sinistra
>> Shift a destra
>>> Shift a destra senza riempimento
101 <<
010 =
10100
Shift a destra di due bit:
101 >>
010 =
1
BY ISF INTERNET SKILLED FORUM
------------------------------------------------------------------------------------------
RESPECT THE RULES http://www.sciax2.it/forum/topic.asp?TOPIC_ID=20510
Javascript è un linguaggio di scripting per le pagine web ed è stato sviluppato dalla Sun Microsystem e da Netscape, la famosa società americana antagonista di Microsoft Internet Explorer.
Script, traducendo letteralmente, significa parte, copione. Queste parti di istruzioni vengono inserite all'interno del codice HTML, per migliorarne ed arrichirne le caratteristiche. Sarà possibile creare in JavaScript delle funzioni e degli oggetti da inserire ed integrare nel codice HTML. Inoltre verranno forniti ai Web Designer tutti gli strumenti necessari per migliorare e rendere più accattivanti i loro progetti.
Ovviamente dovremmo già conoscere bene il linguaggio HTML prima di iniziare a seguire questo corso.
Differenze tra Javascript e Java
Bisogna precisare che Javascript non è un linguaggio di programmazione così come il linguaggio Java.
Java è un vero e proprio linguaggio di programmazione piattaforma-indipendente, realizzato inizialmente per applicazioni industriali dalla Sun Microsystem, che genera piccole ma potentissime applicazioni chiamate "applets". Javascript è un linguaggio 'cross-platform' ed in poche parole è interpretabile su di una qualsiasi 'piattaforma' che disponga di un browser compatibile. Java viene utilizzato dal programmatore che vuole creare un programma eseguibile su una qualsiasi macchina grazie alla Virtual Machine che interpreta il codice (bytecode); Javascript serve sopratutto ai Web Designer che hanno intenzione di creare dei documenti interattivi. Per esempio, in questo modo sarà possibile verificare che una scheda personale (oppure un FORM) abbia i dati coerenti, tramite opportuni controlli, prima della sua elaborazione e spedizione.
Javascript, sebbene abbia un nome che richiama al linguaggio Java, al suo battesimo si chiamava LiveScript, probabilmente in seguito per motivi commerciali è stato chiamato JavaScript, anche perchè sintatticamente molto simile a Java.
Gli Oggetti
Rompiamo il ghiaccio con questi misteriosi oggetti. In Javascript, così come in altri linguaggi object oriented, gli oggetti sono delle 'cose' in cui è possibile osservare: la dimensione, la forma, il colore, il comportamento, e dove è anche possibile maneggiare le sue proprietà come ad esempio cambiarne lo stato.
Osserva i bottoni in alto sul browser: sono degli oggetti; le barre di scorrimento: sono degli oggetti; la finestra stessa in cui leggete: è un oggetto, un documento realizzato in Word oppure in Excel è un'oggetto, nel cui interno è possibile trovare altri oggetti, e così via dicendo.
Gli Eventi
Torniamo ai nostri cari ed utili bottoni, quando vi ci spostate sopra uno di essi e cliccate con il mouse provocate un EVENTO. Gli eventi sono delle cose che accadono o che potranno verificarsi in determinate situazioni (ad ogni CAUSA corrisponde un EFFETTO che possiamo controllare). Ad esempio possono essere stati provocati da un visitatore di una pagina web, che abbia cliccato su di un semplice link, quello e' un evento (l' evento 'Click'). Oppure possono essere stati provocati dalla pressione di un tasto della tastiera, quello e' un altro evento (l' evento 'KeyPress').
I tre elementi distintivi: Il corpo principale, Il gestore degli eventi, le funzioni
Così come in HTML anche Javascript, in grandi linee, ha la sua struttura che può essere organicamente suddivisa in tre elementi distinti: Il corpo principale, Il gestore degli eventi, le funzioni.
Cominciamo da quest'ultimo elemento.
Le funzioni
Le funzioni sono delle parti di codice che possono essere invocate o richiamate in qualsiasi momento si verifichi un evento proveniente sia dal corpo principale che eventualmente anche da un'altra funzione. E' corretto inserire le funzioni all'interno dell'intestazione del codice HTML, e quindi comprese tra <HEAD> e </HEAD>, in modo tale da permettere al browser di caricare subito in memoria queste parti di codice, con la finalità di averle immediatamente a disposizione.
Il corpo principale
Il corpo principale contiene le istruzioni Javascript comprese tra <SCRIPT LANGUAGE=”Javascript”> e </SCRIPT> inserite subito dopo <BODY> in HTML.
All'interno del corpo principale inseriremo tutte le istruzioni del nostro programma, comprendendo eventualmente tutte le eventuali chiamate a funzioni già inserite nell'intestazione.
Il gestore degli eventi
L'interattività tra l'utente ed il programma viene fornita dal gestore degli eventi, il quale rileva in tempo reale tutti gli spostamenti del mouse, la pressione dei tasti del mouse e della tastiera ma anche di altri eventuali strumenti di input installati sulla macchina.
Vediamo ora un breve e semplice esempio:
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function Saluto()
{
window.alert("Salve, amici dell'ISF!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type=button value="Clicca per invocare la funzione Saluto()" onClick="Saluto()">
</FORM>
</BODY>
</HTML>
In questo esempio è stato realizzato un bottone (<input type=button … ), alla cui pressione viene invocata la funzione Saluto() ( … onClick="Saluto()"> ), quest'ultima utilizza un METODO inserito all'interno della funzione: alert.
I metodi
Un metodo è una specie di funzione appartenente ad un oggetto, ed è il sistema per manipolare o maneggiare le proprietà dell'oggetto.
In questo caso l'oggetto è window, il suo metodo è alert che consente di vedere a video una finestra di warning o di avvertimento. In termini pratici, alla pressione del bottone, verrà visualizzato al centro dello schermo ‘Salve, amici di SoftwarePlanet!'
I metodi, quindi, sono proprietà degli oggetti, e noi dobbiamo imparare a sfruttare tutte queste proprietà a nostro vantaggio.
Anche nella vita quotidiana utilizziamo dei metodi, a volte senza rendercene conto, per esempio supponiamo di avere un oggetto: la lampadina. Questo oggetto ha due possibilità, essere: accesa (ON) o spenta (OFF). Il metodo, per cui sarà possibile cambiarne lo stato è l'interruttore.
Se dovessimo avere questa situazione in Javascript, sintatticamente, e facendo una analogia con il metodo alert, potremmo scrivere in questo modo per accendere la luce:
lampadina.interruttore(“ON”); oppure lampadina.interruttore(1);
e scrivere così per spegnere la luce:
lampadina.interruttore(“OFF”); oppure lampadina.interruttore(0);
interruttore ,dunque, è il metodo dell'oggetto lampadina.
Adesso proviamo un altro semplicissimo esempio facendo conoscenza con il metodo write:
Il metodo write
Sul famoso manuale del linguaggio C (Kerninghan-Ritchie), ma anche su altri manuali di linguaggi di programmazione, uno dei primi esempi che viene realizzato è fare apparire la celebre frase: “Salve Mondo!”.
Proviamo a realizzare questo esempio in Javascript:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
document.write(“Salve Mondo!”);
</SCRIPT>
</BODY>
</HTML>
Praticamente write è un metodo dell'oggetto document, in questo caso il suo scopo è di fare apparire sul browser la stringa di caratteri “Salve Mondo!” .
Infine al termine di ogni istruzione Javascript interpreta il punto e virgola come fine istruzione.
Finora abbiamo visto che Javascript è un linguaggio molto simile ad altri linguaggi di programmazione, la cui grammatica è molto semplice da acquisire. Potremmo azzardare questa definizione: “Javascript rispetta le direttive della programmazione strutturata, ma è basato sugli OGGETTI, che possiedono delle proprietà. Queste proprietà possono essere delle VARIABILI, e quindi hanno un determinato valore, oppure possono essere dei METODI, ovvero delle funzioni in grado di svolgere determinati compiti.”
Javascript è stato realizzato prevalentemente per arricchire il linguaggio di formattazione HTML. Le istruzioni Javascript sono di grande ausilio non solo per il WebDesigner, che potrà utilizzare le sue potenzialità per migliorare le pagine web, ma anche per il programmatore che avrà il controllo del linguaggio CLIENT-SIDE, ovvero dalla parte del browser.
I due tipi di Javascript: Javascript Client-Side e Javascript Server-Side
Javascript Client-Side
Quando il nostro browser ( Client ), richiede attraverso il protocollo HTTP una determinata pagina, il server interrogato, ritorna al richiedente il contenuto del documento ( HTML ).
Il browser legge il documento dall'alto verso il basso, mostrando attraverso il browser i risultati del codice HTML , interpretando e traducendo così anche le istruzioni Javascript che incontra passo dopo passo.
Detto così, il processo Client-Server può sembrare più complicato di quanto sia in realtà.
Ogni volta che noi ( Client ) utilizziamo il telefono, e richiediamo informazioni ad un addetto al centralino ( Server ), abbiamo un processo Client-Server . Ogni volta che utilizziamo il nostro browser ( Client ) e ci colleghiamo ad un sito internet ( Server ), abbiamo un processo Client-Server.
Vi ricordo che Javascript Client-Side incorpora la gestione degli eventi (o gestore degli eventi), di cui abbiamo fatto un brevissimo cenno nella precedente lezione. In questo modo attraverso il linguaggio Javascript saremo in grado di controllare l'interfaccia con l'utente direttamente sul browser, quindi dalla parte del Client ( Client-Side).
Javascript Server-Side
In questo caso le pagine HTML e le istruzioni Javascript , vengono compilate in un file denominato ‘ bytecode '.
Questo viene reso operativo su di un Server che contiene: ‘ The JS runtime engine' .
Il vantaggio di questa operazione, consiste nel fatto che il webmaster ha la possibilità, lato server, di connettere i bytecode con i file di sistema e sopratutto con i database relazionali .
Ad esempio il ‘ Javascript Livewire Database Server ' provvede a fornire tutti gli oggetti che servono per potere accedere ai database presenti sul server in SQL ( Structured Query Language ).
Uno svantaggio è intuitivo: Il bytecode viene condiviso ed utilizzato direttamente sul server, questo porta in alcuni periodi di massimo accesso a rallentamenti visibili.
E' molto importante comprendere il funzionamento e la differenza tra Javascript: Client-Side e Server-Side ; anche se in questo corso ci occuperemo esclusivamente di Javascript dalla parte del Client , quindi dalla parte del browser.
Vantaggi e svantaggi di un linguaggio interprete client-side
Tra i vantaggi dell'utilizzo di Javascript è evidente l'affidabilità; infatti un linguaggio interpretato ha il codice visibile o in chiaro, quindi i sorgenti sono a disposizione di chiunque, attraverso il browser. D'altro canto risulta evidente l'impossibilità di proteggere il codice, anche se quest'ultimo venisse tutelato dalle leggi sul diritto d'autore.
Javascript viene interpretato sul client, per cui il server non viene sollecitato se non è strettamente necessario.
Di conseguenza lo script per potere essere perfettamente funzionante deve essere completamente caricato dal browser, per questo motivo è importante inserire le funzioni nell'intestazione (prima parte) del documento, e la parte principale nel corpo (seconda parte) del documento.
Per cominciare il nostro lavoro avremo bisogno di un editor, vi consiglio di utilizzare il Notepad o blocco note di Windows, inizialmente andrà benissimo. Gli script andranno testati su più piattaforme e quindi useremo i due browser più utilizzati e che hanno garantito maggiore stabilità:
- Microsoft Internet Explorer 5.01 o superiore
- Netscape Navigator - dalla versione 4.06 fino alla versione 4.72
Ricordate che è importantissimo verificare se il proprio lavoro è compatibile e si presenta nello stesso modo su piattaforme e sistemi differenti.
Jscript: Il Javascript targato Microsoft
La prima versione di Jscript è stata la 1.0 , inserita nel Microsoft Internet Explorer 3.0 , questa implementazione si è basata sulla specifica di linguaggio ECMA 262 con integrazione di istruzioni che sfruttano esclusivamente le funzionalità del Document Object Model del Microsoft Internet Explorer .
Jscript , quindi, è compatibile con il linguaggio ECMA 262 ma possiede in aggiunta anche implementazioni proprietarie all'interno del suo browser.
Le implementazioni aggiuntive, unitamente alle diversità dei D.O.M. dei browser, ed alla staticità del linguaggio HTML hanno avuto come conseguenza la nascita del DHTML ( Dynamic HyperText Markup Language).
Il DHTML non va interpretato come un linguaggio, bensì come un insieme di tecnologie al fine di superare la diversità tra le varie piattaforme, ma di questo ne parleremo più avanti.
Oggi, Javascript e Jscript , viaggiano di pari passo (vedi Tabella A e Tabella B ), senza però avere una completa compatibilità, per cui dovremo abituarci all'idea di provare i nostri programmi con diversi browser (o diverse piattaforme).
Vediamo l'evoluzione delle versioni dei due principali browser:
Versioni Netscape Navigator
Browser Netscape Versione Javascript
Navigator 2.0 Javascript 1.0
Navigator 3.0 Javascript 1.1
Navigator 4.0 Javascript 1.2
Navigator 4.x Javascript 1.3
Tabella A
Versioni Microsoft Internet Explorer
Javascript Jscript
Versione 1.0 1.1 1.2 1.3 1.0 3.0 5.0
Explorer 3.0 * *
Explorer 4.0 * * * * *
Explorer 5.0 * * * * * * *
Tabella B
Navigator contro Explorer ovvero ‘la guerra dei browser'
Nella ‘guerra dei browser' ci sono stati anche dei colpi bassi, tra i quali risultò fin troppo evidente l'iniziativa della Microsoft di inserire in forma gratuita ed aggiuntiva il suo browser nei Sistemi Operativi Windows . Quest'ultima strategia iniziale, unitamente in un secondo tempo alla creazione di una ottima piattaforma ( Microsoft Internet Explorer 5 ), ha prodotto un vistoso aumento di utenti che preferisce MSIE e forse ha prodotto anche la vittoria finale.
Se mi permettete una battuta, chi di voi non acquisterebbe volentieri una automobile che avesse servizi accessori aggiuntivi e gratuiti come ad esempio l'assicurazione! (Se questo servizio esiste veramente mandatemi una mail)
Scherzi a parte, pensate alle difficoltà della Netscape che da quell'istante ha dovuto fornire il suo prezioso prodotto in forma gratuita, scatenando e vincendo solo in seguito l'azione legale di antitrust nei confronti della Microsoft .
Non voglio aggiungere altro in merito, però quando un giorno diventerete esperti programmatori in Javascript e vi accorgerete che qualcosa non funziona nel browser concorrente, a quel punto saprete che non è completamente colpa vostra!
Una conseguenza della guerra dei browser è la nascita del DHTML come necessità.
Il DHTML
Quando si parla di HTML dinamico , si pensa ad una evoluzione del linguaggio di formattazione HTML . Non è così. In realtà ci sono delle integrazioni di tecnologie differenti all'interno dell' HTML . Queste tecnologie possono essere ad esempio: Javascript , CSS, Jscript , VBScript , e vanno applicate di volta in volta a seconda del D.O.M. del browser incontrato.
Mi spiego meglio, sul browser della Netscape utilizzerò soluzioni dinamiche con il linguaggio Javascript , ma sul browser della Microsoft potrò utilizzare in aggiunta o in alternativa anche il VBScript (linguaggio di proprietà Microsoft). Conoscere il DHTML significa saper utilizzare tecnologie differenti allo scopo di arrivare al medesimo risultato nelle varie piattaforme. In parole povere significa ‘mettere una pezza' ai danni creati dalla ‘guerra dei browser'. Le guerre non sono mai state costruttive, in nessun campo.
Lasciamo il DHTML agli esperti del settore e torniamo al nostro linguaggio, il Javascript.
Prima di concludere questo paragrafo, vorrei darvi alcune delucidazioni sul tag <SCRIPT >, e su come nascondere le istruzioni ai browser non aggiornati o comunque non compatibili con il Javascript .
Il Tag <SCRIPT>
Nei precedenti esempi abbiamo già utilizzato il tag <SCRIPT> ed abbiamo appreso che il contenuto compreso tra:
<script language=”Javascript> e </script>
è un codice che il browser deve interpretare come linguaggio Javascript. Il tutto potrebbe essere sufficiente, se non fosse che Netscape raccomandi vivamente di indicare anche la versione di riferimento che si adopera. Il motivo è semplice: Javascript è in continua evoluzione, questa specifica permette eventualmente al browser di discriminare la compatibilità con le versioni precedenti. Per cui sarà possibile che incontriate, da questo momento in poi, il seguente TAG di apertura:
<script language=”JavascriptX.Y>
dove X.Y è la versione, ad esempio la versione Javascript 1.2 che è presente a partire dalle versioni 4 di Explorer e 4 di Netscape . (Vedere le tabelle A e B di riferimento , incontrate precedentemente)
Come nascondere il codice Javascript ai vecchi browser
Alcuni browser potrebbero non riconoscere le istruzioni in Javascript. Una tecnica adottata da molto tempo per nascondere il codice Javascript ai vecchi browser e che vi consiglio è la seguente:
<script>
<!-- Inizio - Nascondiamo lo script ai vecchi browser
Istruzioni Javascript
// Fine - Nascondiamo lo script ai vecchi browser -->
</script>
In questo modo le istruzioni Javascript non verranno eseguite sui browser che non hanno implementato il linguaggio Javascript. In pratica tutto quello che è compreso tra viene visto come un commento dai vecchi browser.
In realtà noi potremmo sfruttare questa tecnica anche per inserire alcune utili indicazioni, per esempio:
<script>
<!-- Inizio Funzioni mio programma
Funzioni Javascript
// Fine Funzioni mio programma -->
</script>
Di norma subito dopo l'introduzione ad un linguaggio di programmazione vengono immediatamente spiegate le caratteristiche basilari, quali: le variabili, le espressioni, gli operatori e così via dicendo, approfondendo successivamente le caratteristiche peculiari del linguaggio stesso.
La scelta di aggiungere questo capitolo, contenente dei semplici esempi, ha il seguente significato:
- Dimostrare che Javascript è un linguaggio intuitivo, semplice e veloce da imparare.
- Alleggerire il nostro corso in modo tale che non diventi troppo teorico e nozionistico.
Allo stesso modo ho intenzione di realizzare dei pratici esempi per le lezioni dei capitoli che seguiranno. Questo capitolo intitolato ‘Primi programmi in Javascript' è semplicemente una carrellata di script attraverso i quali spero possiate apprezzare da subito potenzialità e caratteristiche del linguaggio Javascript.
Il metodo WRITE, appartiene all'oggetto DOCUMENT, ed è stato il primo metodo da noi conosciuto nell'introduzione. Il suo compito è di scrivere una o più espressioni all'interno di un documento.
La sua sintassi è la seguente:
document.write(expr1[, ...,exprN])
dove expr1 ...,exprN rappresentano qualsiasi espressione Javascript, che includa: numeri, stringhe o espressioni logiche.
I metodi WRITE e WRITELN sono identici, eccetto per una importante caratteristica:
Il metodo WRITELN, quando il testo è preformattato, esegue automaticamente ad ogni fine linea un invio a capo.
Per preformattare un testo è necessario utilizzare il comando HTML <PRE>
Vediamo, prima, un esempio solo con il metodo WRITE :
<script language=”Javascript”>
var aStringa=”25.82”;
var bStringa=”51.65”;
document.write(“Abbonamento Autobus : “+aStringa+” euro <BR>”);
document.write(“Abbonamento Ferrovie: “+bStringa+” euro <BR>”);
</script>
Sono state dichiarate due variabili: ‘ aStringa ' e ‘ bStringa '. Con il metodo WRITE si possono visualizzare sia stringhe di testo inserite tra apici che variabili. Tramite il segno ‘+' possono essere concatenate in un'unica espressione. Per andare a capo possiamo utilizzare il comando HTML
, che verrà riconosciuto come TAG all'interno del metodo WRITE.
Esiste anche il comando javascript '\n' (da newline come nel linguaggio C), ma quest'ultimo è attivo solo con la preformattazione.
Vediamo lo stesso esempio utilizzando il metodo WRITELN unitamente al comando HTML <PRE> :
<script language=”Javascript”>
var aStringa=”25.82”;
var bStringa=”51.65”;
document.write(“<PRE>”);
document.writeln(“Abbonamento Autobus : “+aStringa+” euro”);
document.writeln(“Abbonamento Ferrovie: “+bStringa+” euro”);
document.write(“</PRE>”);
</script>
Pur non avendo inserito alcun comando di invio a capo, il risultato a video sarà quasi identico all'esempio mostrato in precedenza. In questo secondo esempio credo che abbiate notato che gli spazi vengono formattati, a differenza del primo esempio. Per questa ragione nel secondo esempio i dati sono correttamente allineati.
In Javascript possiamo utilizzare più direttive insieme
A seconda delle necessità è possibile inserire comandi all'interno del metodo WRITE o WRITELN.
Ma, per quale motivo dovremmo fare questa operazione?
Non sarebbe più conveniente utilizzare i comandi HTML, senza scomodare Javascript?
Un grande vantaggio di utilizzare i tag all'interno del codice Javascript è senza dubbio legato alla gestione delle variabili, dei cicli e delle strutture di controllo, che consentono di avere dinamicità nella creazione delle pagine web. Non dimentichiamo che HTML è solo un linguaggio di formattazione e per eseguire una semplice iterazione è necessario inserire del codice Javascript, facendolo interagire con gli oggetti del documento.
Per il momento cerchiamo di migliorare il layout dell'esempio precedente utilizzando due nuovi metodi:
Il metodo bgColor ed il metodo fgColor .
metodi bgColor e fgColor
I metodi bgColor e fgColor appartengono all'oggetto DOCUMENT. Il loro compito è di modificare rispettivamente il colore dello sfondo ed il testo di un documento.
La sintassi è la seguente utilizzando le stringhe:
document.bgcolor=”blue”; document.fgcolor=”white”;
Utilizzando i numeri esadecimali la sintassi è la seguente:
document.bgcolor=”#000072”; document.fgcolor=”#FFFFFF”;
anche in questo caso abbiamo realizzato il testo di colore bianco (“#FFFFFF”) su sfondo blu (“#000072”).
Cerchiamo di comprendere meglio questa importante notazione numerica.
La notazione esadecimale dei colori in Javascript
Per quanto riguarda i colori espressi in notazione esadecimale, viene adottata una tecnica definita RGB ( R ed, G reen, B lue). Di conseguenza la prima coppia rappresenta l'intensità del colore rosso , la seconda coppia rappresenta l'intensità del colore verde , la terza ed ultima coppia rappresenta l'intensità del colore blu .
Le intensità vanno da ‘00', che significa assenza di colore, ad ‘FF' che significa massima intensità di colore.
Miscelando le intensità o le tonalità di questi colori, detti primari, abbiamo questo incredibile risultato:
16777216 =256*256*256=FF*FF*FF
(dove FF esadecimale corrisponde al numero 255 decimale, da 0 a 255 esistono 256 possibili tonalità)
ovvero 16 milioni di colori disponibili.
Nel prossimo paragrafo vedremo come vengono trattate le immagini in Javascript, attraverso un effetto che è ancora molto utilizzato dai webmaster per dare dinamicità alla navigazione degli utenti attraverso il mouse: l'effetto rollover.
Uno degli effetti grafici più usati dai WebDesigner in Javascript, sia per facilità di realizzazione che per utilità è senza dubbio l'Effetto Rollover sulle immagini.
Questo effetto consiste nella sostituzione di una immagine di tipo GIF o JPG, al passaggio del puntatore del mouse sull'oggetto, creando una piccola animazione o evidenziazione dello stesso, che non ha tanto lo scopo di abbellire il documento quanto il fine di catturare l'attenzione dell'utente e di dirigerlo, eventualmente, verso altri documenti.
Esistono svariati modi di realizzare un ‘ Effetto Rollover' , tra questi ho scelto il più semplice e il più funzionale, integrandosi facilmente con il codice HTML.
Nel linguaggio HTML le immagini vengono inserite con il TAG <IMG>, queste possono essere gestite molto facilmente attraverso il linguaggio Javascript.
Vediamo in che modo:
Al seguente TAG HTML <IMG>:
<IMG src=”immagine1.jpg” name=”miaImmagine”>
viene corrisposto automaticamente il seguente Oggetto :
window.document.miaImmagine;
Un browser ( window ), nel quale documento ( document ) è stata inserita una immagine ( miaImmagine ).
A questo punto osservate la riga di codice Javascript che segue:
window.document.miaImmagine.src=”immagine2.jpg”;
Eseguita questa istruzione, viene sostituita la prima immagine (immagine1.jpg) già caricata in precedenza con il tag <IMG>, con la seconda immagine (immagine2.jpg).
Ciò avviene tramite src , che non è un metodo ma una proprietà appartenente all'immagine ( miaImmagine ), questa sostituzione viene definita dinamica, cioè senza che venga contattato nuovamente l'host e senza che venga nuovamente caricato il documento con i suoi oggetti.
Per praticità (e senza alcun tipo di problema) potete sottintendere nell'ordine, gli oggetti window e document , semplificando la precedente riga di codice in questo modo:
miaImmagine.src=”immagine2.jpg”;
A questo punto dobbiamo scegliere gli eventi che attiveranno la sostituzione ed il ripristino delle immagini tramite il puntatore del mouse.
Gli eventi da controllare sono i seguenti:
Se il puntatore del mouse è sopra l'oggetto miaImmagine (evento onMouseOver ), sostituisci il contenuto dell'oggetto con un'altra immagine specificata.
Se il puntatore del mouse è fuori dall'immagine miaImmagine (evento onMouseOut ), sostituisci il contenuto dell'oggetto con l'immagine caricata precedentemente.
Ad ogni evento si associa una porzione di codice da eseguire, con queste istruzioni viene attivato l'Effetto Rollover.
</HEAD>
<BODY bgcolor=black>
<a href="#"
onmouseover="miaImmagine.src='over.jpg';"
onmouseout="miaImmagine.src='out.jpg';">
<img name="miaImmagine"
src="out.jpg"
alt="Il puntatore del mouse è sopra l'immagine!"
border="0">
</img>
</a>
</BODY>
Vi sottolineo nuovamente che le istruzioni Javascript, inserite tra i doppi apici, sono state associate agli eventi:
onmouseover="miaImmagine.src='over.jpg';"
onmouseout="miaImmagine.src='out.jpg';"
i quali sono stati inseriti all'interno del TAG <A> (anchor) unitamente all'oggetto IMG.
Questa è una testimonianza della sinergia esistente tra il linguaggio Javascript ed il linguaggio HTML.
Per una buona riuscita dell'effetto vi consiglio di utilizzare immagini che non siano molto pesanti da caricare e che soprattutto abbiano tra loro le medesime caratteristiche tecniche.
Se non avete esperienza nell'utilizzo dei programmi di grafica vi consiglio di cercare attraverso i motori di ricerca le immagini e i bottoni che vengono offerti in rete gratuitamente, selezionando i più adattabili al vostro sito.
In genere è consigliabile effettuare un precaricamento delle immagini, ma questa importante operazione la vedremo in dettaglio nella prossima lezione, conoscendo l'Oggetto Image.
I nomi
abstract Do if package throw
boolean Double Implements private throws
break Else Import protected transient
byte Extends in public true
case False Instanceof return try
catch Final int short var
char Finally Interface static void
class Float Long super while
const For Native switch with
continue Function New synchronized
default Goto Null this
Non potrete inserire uno spazio in mezzo al nome
L'interprete Javascript farebbe confusione generando un messaggio di errore.
Non potrete inserire il segno ( . ) in mezzo al nome
Abbiamo avuto modo di vedere che il segno (.) viene utilizzato con gli Oggetti.
Non potrete inserire il segno ( - ) in mezzo al nome
In questo caso il mio consiglio è quello di mettere in maiuscolo la prima lettera della seconda parola (es. ascoliPiceno), oppure di utilizzare il maiuscolo per ambedue le prime lettere (es. AscoliPiceno).
Una valida alternativa è il carattere underscore ( _ ) inserita tra le due parole (es. ascoli_piceno).
Infine ricordatevi che il nome deve sempre iniziare per una lettera.
Una variabile con il nome ‘67dan' non è valida, mentre ‘dan67' è corretta.
Le Variabili
Le variabili rappresentano il modo con il quale un codice di programma Javascript memorizza le informazioni affinchè possano essere aggiornate e modificate.
Le variabili vengono identificate dai nomi che sono delle parole che le rappresentano nel programma Javascript.
Dichiarare le Variabili
Il modo migliore per dichiarare le variabili è quello esplicito e cioè di utilizzare la keyword var , seguita dal nome che si intende attribuire alla variabile. Negli esempi del capitolo precedente avrete notato la presenza di questo tipo di creazione di variabile:
var abbonamentoBus=25.82;
In pratica si tratta di una abbreviazione delle seguenti linee di codice:
var abbonamentoBus;
………
abbonamentoBus=25.82;
Supponiamo di dovere creare due variabili così come sopra: abbonamentoBus e abbonamentoTreno e di dovere assegnare ad entrambe la medesima cifra di 25.82 euro:
var abbonamentoBus;
var abbonamentoTreno;
………
abbonamentoBus=25.82;
abbonamentoTreno=25.82;
Anche in questo caso è possibile fare una abbreviazione in una unica riga:
var abbonamentoBus=abbonamentoTreno=25.82;
Il programmatore Javascript, nei limiti del possibile e senza compromettere la leggibilità del codice, deve sempre cercare di ridurre il numero di istruzioni, affinchè lo script risulti poco ingombrante ai fini dello scaricamento della pagina web.
Le variabili locali e le variabili globali
Le variabili devono essere dichiarate come globali o come locali. Questa operazione ha influenza sull'area di validità di una variabile che si riferisce alla sua visibilità ed alla sua durata, per esempio le variabili locali vengono dichiarate e sono utilizzabili solamente all'interno delle funzioni in cui vengono dichiarate:
function incrementa(valore) {
var a=a+valore;
………
}
la variabile ‘valore' viene definita locale in quanto al di fuori della funzione ‘ incrementa' essa non esiste.
Invece le variabili globali sono visibili in tutto il programma, funzioni comprese.
Tipi di valori
A differenza di altri linguaggi di programmazione, Javascript non è un linguaggio fortemente ‘tipizzato', di conseguenza non richiede espressamente la dichiarazione del tipo di valore che si intende di associare alla variabile. L'interprete Javascript automaticamente definisce durante la prima assegnazione di valore, il tipo di dato:
TIPO DI DATO ESEMPIO
Numerico var a=1;
logico var ciclo=true;
stringa var b="giorgio";
null var nulla=null;
Variabili numeriche
I numeri possono essere sia interi, positivi e negativi, incluso lo zero. Vengono normalmente rappresentati in base decimale, ma possono essere rappresentati in base ottale (8) aggiungendo uno 0 davanti al numero compreso da 0 a 7, oppure possono essere rappresentati in base esadecimale (16) aggiungendo 0x davanti al numero, formato dai numeri da 0 a 9 e dalle lettere dalla A alla F.
Esempio:
var num_decimale=10;
var num_ottale=012;
var num_esadecimale=0xA;
in questo caso abbiamo dichiarato lo stesso numero ma rappresentato in basi diverse.
I numeri possono essere in virgola mobile, comprendendo numeri positivi e negativi.
Esempio:
var x=1.23;
var y=–4.56;
Per finire, i numeri possono essere rappresentati in notazione scientifica.
Il numero 6780000 corrisponde a 6.78e6
Esempio:
var s=6.78e6;
Valori Logici
Per valori logici si intendono le parole true (vero) e false (falso), i valori logici vengono definiti anche valori Boolean.
Per esempio:
var ciclo=true;
var flag=false;
Stringhe
Le stringhe sono formati da uno o più caratteri di testo racchiusi da apici o doppi apici. Per esempio:
var stringa=“Questo è un esempio di stringa”;
var stringa=”Giovanni 1967”;
Valori nulli
Viene rappresentato come null . Questo è di norma il valore di una variabile che non è definita, e che non ha ancora assunto alcun valore.
L'utilizzo degli operatori nel linguaggio Javascript è estremamente intuitivo. Gli operatori insieme alle variabili e le lettere formano un'espressione che ha il compito di eseguire come risultato un valore. Esistono diversi tipi di operatori:
- Operatori di assegnamento
- Operatori aritmetici
- Operatori di confronto
- Operatori di stringhe
- Operatori logici
- Operatori binari
Operatori di assegnamento:
Gli operatori di assegnamento si occupano di prelevare il valore contenuto nel secondo operando (a destra dell'operatore) trasferendolo nel primo operando (a sinistra).
Per esempio:
variabile = ”Salve Mondo”;
abbonamentoBus = 25.82;
Operatori aritmetici:
Gli operatori aritmetici creano le espressioni aritmetiche insieme agli operandi che sono esclusivamente dei valori numerici che danno come risultato un singolo valore numerico.
Operatore compatto Utilizzo Operatore
a+=b Incremento a=a+b
a-=b Decremento a=a-b
a*=b Moltiplicazione a=a*b
a/=b Divisione a=a/b
a%=b Modulo
(restituisce il resto di a/b)
Operatori di confronto:
Gli operatori di confronto si occupano di paragonare i valori contenuti nel primo e nel secondo operando, restituendo un valore Booleano come risultato.
Operatore Utilizzo
a==b Confronta se a è uguale a b
a!=b Confronta se a è diverso da b
a<b Confronta se a è minore di b
a<=b Confronta se a è minore o uguale di b
a>=b Confronta se a è maggiore o uguale di b
a>b Confronta se a è maggiore di b
Operatori di stringhe:
Nella lezione 5 abbiamo visto che è possibile concatenare le stringhe, cioè i valori stringa a e b possono essere aggiunti l'uno all'altro:
Operatore compatto Utilizzo Operatore
a=b Assegna ad a la stringa b a=b
a+=b Concatena le stringhe a=a+b
Per esempio:
a=”buon”;
b=”giorno”;
a+=b;
A questo punto la variabile a contiene la stringa “ buongiorno ”
Operatori logici:
Gli operatori logici lavorano con i valori booleani:
Per esempio
Operando1 && Operando2
restituisce vero solo se entrambi gli operandi sono veri. Restiruisce falso in ogni altro caso.
Operando Operatore Operando Risultato
True && >True True
True && False False
False && True False
False && False False
Operando1 || Operando2
restituisce vero se almeno uno degli operandi ha il valore logico true .
Operando Operatore Operando Risultato
True || True True
True || False True
False || True True
False || False False
Inoltre il segno ‘!' è un operatore unario. Restituisce false se la condizione è true e viceversa.
Operatore Operando Risultato
! true False
! false True
Operatori binari:
I computer pensano in base binaria, dove qualcosa ( bit ) può essere attivo (1) o disattivo (0). L'uomo è abituato a pensare in base decimale ed utilizza, ad esempio, i numeri 3, 8 e 11 che vengono memorizzati ed utilizzati in binario nei numeri 11, 1010, 1011. In determinati casi può essere utile manipolare direttamente il numero binario, e di accedere ai suoi bit, questo è possibile attraverso gli operatori binari chiamati anche operatori bitwise.
Gli operatori logici bitwise sono quattro:
And(&)
Operando Operatore Operando Risultato
1 && 1 1
1 && 0 0
0 && 1 0
0 && 0 0
Or ( | )
Riporta 1 se uno o entrambi gli operandi sono 1 e 0 e 0 se entrambi gli operandi sono 0.
Operando Operatore Operando Risultato
1 && 1 1
1 && 0 1
0 && 1 1
0 && 0 0
Xor 0 (^)
Riporta 1 se solo uno degli operatori è 1, negli altri casi riporta 0.
Operando Operatore Operando Risultato
1 && 1 0
1 && 0 1
0 && 1 1
0 && 0 0
Not(~)
Operatore unario che riporta 1 se il suo operando è 0, e 0 se il suo operando è 1.
Operatore Operando Risultato
~ 0 1
~ 1 0
Facciamo degli esempi pratici, se scriviamo:
25 & 10 il risultato è 8
11001 &
01010 =
1000
se scriviamo:
25 | 10 il risultato è 27
11001 |
01010 =
11011
se scriviamo:
25 ^ 10 il risultato è 19
11001 ^
01010 =
10011
Esistono anche operatori bitwise shift dove i bit del primo operando vengono spostati di n posti, attraverso un valore ( n ) presente nel secondo operando:
<< Shift a sinistra
>> Shift a destra
>>> Shift a destra senza riempimento
101 <<
010 =
10100
Shift a destra di due bit:
101 >>
010 =
1
BY ISF INTERNET SKILLED FORUM
------------------------------------------------------------------------------------------
RESPECT THE RULES http://www.sciax2.it/forum/topic.asp?TOPIC_ID=20510
