Nota bene: l'articolo proposto in questa pagina è proprietà dell'autore e non può essere distribuito o riutilizzato in alcun modo o forma senza il suo consenso scritto.
Le informazioni qui riportate risalgono alla data di pubblicazione dell'articolo e non è detto che siano ancora valide o che rispecchino lo stato attuale dei programmi, le posizioni delle persone interpellate o quelle degli autori stessi.

Avviso

Questo corso descrive JavaScript 1.1. Sebbene le informazioni proposte siano valide come punto di partenza per la conoscenza del linguaggio, suggerisco agli interessati di seguire guide aggiornate alla versione più recente di JavaScript che offre funzionalità avanzate come la gestione di dati XML esterni e la completa manipolazione dell'aspetto del documento.

Introduzione

Con l'uscita di Voyager3 e Ibrowse2, JavaScript (da ora JS), diventa uno standard anche su Amiga. Questo linguaggio rappresenta un importante passo avanti nella tecnologia web in quanto trasforma il browser da semplice visualizzatore di contenuti ad unità di elaborazione autonoma in grado di eseguire operazioni di varia natura, ad esempio la verifica dei dati inseriti in un modulo, senza gravare sul server. Ma non basta: tramite JS l'utente stesso non è più uno spettatore quasi passivo, costretto a seguire percorsi preimpostati dai vari server, ma può creare script di raccolta e visualizzazione delle informazioni che più lo interessano.

JavaScript è un linguaggio specializzato e dedicato a precise finalità. E' abbastanza semplice da imparare e garantisce risultati immediati sia per il gestore di siti web che può così aumentare l'attrattività delle proprie pagine (ad esempio con scritte scorrevoli, immagini che cambiano al passaggio del mouse, ecc.), sia per l'utente casalingo. Lo studio di JS porta anche vantaggi di tipo didattico: il linguaggio utilizza grosso modo la stessa sintassi di C e C++, avvicinando inoltre alla programmazione a oggetti, combinata però con la tranquillità di un ambiente interpretato e l'assenza di elementi come i puntatori e l'accesso diretto alla memoria, spesso causa di stressanti blocchi per i principianti. Per creare un JavaScript è sufficiente disporre di un editor di testi e di un browser, per qualsiasi piattaforma, sul quale provarlo. Sotto Amiga si possono utilizzare anche le versioni demo dei browser, ricordando però che alcuni dei loro limiti possono influire sul funzionamento degli script (ad esempio non sarà possibile usare script che gestiscono più di una finestra).

Passato e presente di JavaScript

JavaScript nasce verso la metà degli anni novanta per volontà del celebre produttore di browser Netscape. Viene inizialmente chiamato LiveScript, nome appropriato visto che di fatto dà "vita" alle pagine web. Sarà ribattezzato JavaScript solo in seguito, per guadagnare interesse grazie alla presenza del termine "Java", in crescita già allora. Le similitudini con Java sono comunque minime: la sintassi ereditata dal linguaggio C, la programmazione a oggetti e la possibilità di operare all'interno di un browser. Per il resto si tratta di linguaggi con funzionalità e finalità differenti.

Nel corso degli anni, con l'evoluzione di Mozilla (noto ai più con il nome della società produttrice, Netscape da cui la sigla NS) è cresciuto anche JS: dalla prima versione, inserita in NS2.0, si è passati alla 1.1 (NS3.x), seguita da 1.2, 1.3 e dalle più recenti incarnazioni, il cui nucleo base, reso standard dagli organi competenti e definito con la direttiva ECMA-262, è presente in Netscape 4.x. Il diretto concorrente IE (Internet Explorer di Microsoft) non è stato a guardare: Gates ha deciso di sostenere, pur se a modo suo, JavaScript. Prima, IE4.0 ha aggiunto il supporto per un sottoinsieme della versione 1.1, eccetto alcuni elementi utilizzati negli script più comuni, poi la versione 5 ha completato l'opera supportando, sempre parzialmente, JS 1.2 e i nuovi linguaggi "privati" VBScript e JScript, conditi da ActiveX e ammennicoli vari.

Sorprendentemente in casa Netscape la situazione non è certo più semplice: sebbene il linguaggio sia stato definito proprio da loro, nemmeno gli autori del browser rispettano le specifiche ufficiali! In questo modo sovente capita non solo che IE sia incompatibile con script realizzati a norma di documentazione... ma che lo sia anche NS! E naturalmente a questo si sommano le versioni di NS e IE per altri sistemi, ognuna con le proprie differenze di gestione.

E sul fronte Amiga come stanno le cose? AWeb 3.3 supporta JavaScript 1.1 in maniera abbastanza completa (salvo, purtroppo, alcune eccezioni che non mancheremo di riportare). V3 ed IB2 promettono il supporto di JavaScript 1.2 e 1.3 ma al momento in cui scriviamo, forse perché ancora in stato di beta, presentano gravi lacune anche per quanto concerne le funzionalità di JS 1.1.

Di fronte a una tale babele di sigle e versioni il lettore si starà chiedendo come sia possibile lavorare. La risposta che ci sentiamo di dare è che con la pratica e l'esperienza si riescono a superare o aggirare quasi tutti i problemi di compatibilità (e credeteci, i più seri non vengono certo dai browser Amiga!). In questo senso lo studio di JavaScript acquista un ulteriore valore didattico, spingendo a lavorare proprio nell'ottica della compatibilità, virtù che scarseggia a molti programmatori di HTML e JS.

Questo corso

Il corso che state leggendo mira a far comprendere funzionamento e problematiche di implementazione dei JavaScript. Non vogliamo semplicemente enumerare le funzionalità del linguaggio (anche perché lo spazio non ce lo consentirebbe), né limitarci a proporre script da copiare ed inserire nel proprio sito sapendo, pressappoco, come "dovrebbero" operare. Esistono decine di pubblicazioni elettroniche e cartacee che forniscono questo tipo di informazioni. Il nostro scopo è diverso: intendiamo guidare il lettore alla comprensione dei meccanismi base del JavaScript, naturalmente tenendo sempre in primo piano le problematiche dei vari browser, Amiga e non.

Il corso si svilupperà in quattro puntate e sarà fortemente integrato con materiale su CD-ROM come esempi e documentazione aggiuntiva, da consultare per approfondire le tematiche trattate. Per seguirlo è richiesta una conoscenza almeno basilare degli elementi dei linguaggi di programmazione e dell'HTML. Chi abbisognasse di un ripasso o proprio non lo conoscesse può fare riferimento alle guide che abbiamo messo a disposizione nel CD-ROM allegato a questo numero della rivista.

Nelle puntate a seguire tratteremo JavaScript dalle sue basi al modello degli oggetti supportato. Analizzeremo altresì le modalità di gestione di input ed output e le attuali evoluzioni del linguaggio. Ogni puntata sarà integrata da script dimostrativi dei concetti descritti.

Primi passi

Iniziamo dunque analizzando le caratteristiche fondamentali di JavaScript che, come detto, è un linguaggio interpretato. Esso risiede all'interno delle pagine HTML e viene eseguito fintanto che la pagina in cui si trova è visualizzata dal browser. Questo significa che cambiando documento tutte le funzioni e le variabili definite in uno script scompariranno. Esistono naturalmente soluzioni per operare con più pagine contemporaneamente, ma ne parleremo in seguito. Così come un JS esiste soltanto all'interno del browser, altrettanto vale per le sue possibilità di iterazione con l'esterno, ossia il nostro computer. JS consente l'accesso in lettura e scrittura esclusivamente agli elementi del browser e in particolare del documento HTML, rappresentato come un insieme di oggetti. Non è possibile, invece, salvare o caricare file (fatta eccezione per i dati nei cookie, se accettati dall'utente, e per altri documenti HTML e script), o accedere alle funzioni dell'O.S.

Queste che possono apparire come pesanti limitazioni per un qualunque altro linguaggio, risultano indispensabili ancore di sicurezza se si considera che i JavaScript sono pensati per essere eseguiti all'interno di una qualunque pagina web sulla rete. Permettereste ad uno sconosciuto di accedere liberamente al vostro computer, magari senza che possiate accorgervene? No, certo, e allora ben vengano questi limiti, che non precludono l'uso di JS per le finalità cui è destinato. A questo proposito vogliamo tranquillizzarvi: se è vero che un certo browser PC è famoso per le proprie falle di sicurezza, è altrettanto vero che i programmi Amiga sono certamente più sicuri da questo punto di vista. Usate JavaScript tranquillamente, nessuno formatterà il vostro HD o cancellerà Autoexec.bat (anche perché su Amiga non c'è).

Il primo script

Dopo tanta teoria, comunque necessaria, è ora di iniziare. Prima di tutto è bene impostare il browser di cui ci serviamo affinché visualizzi gli errori JavaScript. Gli utenti di AWeb devono inoltre disattivare la funzione di soppressione dei banner in quanto influirebbe sul funzionamento di taluni script.

Ecco il classico "hello world". Il numero a inizio linea serve a identificare la linea e non deve essere trascritto!

  1 <html><head><title>Hello World</title></head><body>
  2 <script type="text/javascript" language="JavaScript1.1">
  3 <!--
  4 document.write("Ciao mondo by JavaScript!");
  5 // -->
  6 </script><noscript>Questa pagina richiede JavaScript!</noscript>
  7 </body></html>

Concentriamoci per ora sulla parte HTML di questo sorgente. La prima e l'ultima linea sono autoesplicative. Nella seconda incontriamo la tag <script>. Tutti gli script sono contenuti all'interno di questo elemento. L'attributo "type" impostato a "text/javascript" indica in quale linguaggio è stato realizzato lo script. Con l'attributo "language" specifichiamo inoltre la versione del linguaggio. Questo attributo è necessario in quanto esistono diverse versioni di JavaScript e in quelle successive alla 1.1 sono stati aggiunti vari elementi (comandi, oggetti, ecc.) e di alcuni è stato cambiato anche più volte il funzionamento. Specificando la versione del linguaggio istruiamo i browser, anche i più recenti, su come interpretare lo script. Allo stesso modo, inoltre, possiamo realizzare script per versioni specifiche di JavaScript. Un browser incompatibile con JavaScrip1.3, ad esempio, ignorerà completamente script nel cui attributo "language" sia specificato "JavaScript1.3" ed eviterà quindi di visualizzare errori in presenza di funzioni a lui sconosciute. L'uso contemporaneo degli attributi "type" e "language" può apparire ridondante e per molti browser basterebbe il secondo, però è sempre bene attenersi alle specifiche ufficiali.

La terza e la quinta riga rappresentano l'apertura e chiusura di un commento HTML e vanno inserite per evitare che i browser più vecchi, incompatibili con JS e con l'elemento <script>, visualizzino lo script in esso contenuto (potenzialmente danneggiando anche il resto del documento!). E' bene dunque abituarsi ad usarli visto che non tutti utilizzano l'ultima generazione dei browser! Noterete che la fine del commento HTML (linea 5) è preceduta da un doppio slash. Si tratta di un commento JavaScript che indica all'interprete di ignorare il resto della linea. JS accetta la sequenza "<!--" di inizio commento HTML ma richiede tassativamente un "//" prima della chiusura del commento stesso.

Nella linea 6 viene chiuso l'elemento script (tag </script>). Da questo punto il controllo torna al parser HTML e non possono essere inseriti altri elementi JavaScript (salvo alcune eccezioni che vedremo in seguito). Analogamente all'interno di <script> non possono essere presenti tag HTML. Subito dopo troviamo <noscript>. Queso elemento viene saltato dai browser compatibili con JavaScript e visualizzato dagli altri. Al suo interno è possibile inserire un messaggio destinato a chi non dispone di JS o non l'ha attivato.

Veniamo ora allo script vero e proprio, contenuto nella sola linea 4. Come già detto, JavaScript è un linguaggio a oggetti e questo script introduce alcuni concetti importanti, che riprenderemo nella prossima puntata. Scomponiamo la linea: "document" è il documento HTML a video ed è un oggetto. "write" è una delle funzioni messe a disposizione da questo oggetto ed è detta metodo. In questo caso, il metodo "write" dell'oggetto "document" scrive del testo all'interno del documento corrente.

Parlando di sintassi, JavaScript eredita quella del C, compresa una certa libertà di impostazione del sorgente, di cui però non bisogna abusare, dato che non tutti i browser che andranno a leggere i nostri script sembrano condividerla. Soprattutto vanno evitate linee più lunghe di circa 250 caratteri, mal digerite da NS3. Così come in C, è disponibile la coppia "/*" e "*/" per creare un commento su più linee. Sempre proseguendo nelle analogie troviamo il carattere ";" alla fine di ogni istruzione. In C è obbligatorio, in JS no ma è bene usarlo ugualmente per compatibilità. JavaScript dal C eredita anche parecchi comandi e concetti, come le funzioni (parti dello script che vengono prima definite ed eseguite soltanto in seguito) e le variabili globali (valide cioè in tutto il sorgente) e locali (valide solo all'interno della funzione in cui vengono definite).

Torniamo sulla collocazione del sorgente JS. Lo script presentato si trova all'interno del corpo (elemento <body>) del documento, in mezzo ad altre parti HTML. La soluzione può apparire accettabile in esempi semplici ma in presenza di script complessi o documenti estremamente lunghi rende il tutto mal gestibile. In seguito vedremo come sia più conveniente inserire gli script all'interno dell'elemento <head>, già usato per titolo e tag meta, organizzandolo in funzioni specifiche da richiamare all'uopo con la certezza che siano state caricate interamente (perché può anche accadere che il collegamento si interrompa di colpo e il browser si trovi ad interpretare uno script caricato a metà!).

Esiste anche un altro sistema per includere uno script in un documento:

  1 <html><head><title>Hello World 2</title></head><body>
  2 <script type="text/javascript" src="hello.js"></script>
  3 </body></html>

Il sorgente in questo caso si trova nel file esterno "hello.js", specificato con l'attributo "src". L'eventuale contenuto di <script> viene eseguito solo nel caso che lo script esterno non venga caricato correttamente. Purtroppo al momento né V3 né IB2 supportano questa funzionalità.

Per questo numero è tutto. Abbiamo affrontato diversi concetti basilari. Sul CD troverete una serie di esempi adeguatamente commentati nei quali vengono descritti concetti base come variabili, comandi principali, funzioni, ecc. Chi ha già fatto esperienze in C è un po’ avvantaggiato e potrà andare anche oltre, ad esempio consultando la documentazione ufficiale di JavaScript creata da Netscape, presente anch'essa nel CD.

Ringraziamenti e note

Si ringraziano AmiTrix development per AWeb e Vapor (nella persona di Luca Danelon) per Voyager3. Grazie ad Angelo Verdone per la "prova su strada" del corso.

Ricordiamo che, per ragioni di spazio, gli esempi proposti non contengono tutti gli elementi HTML il cui uso è normalmente obbligatorio all'interno di un documento.