INTRODUZIONE A JAVASCRIPT


Javascript è un linguaggio (da non confondere con il quasi omonimo ma ben diverso linguaggio Java) semplice da imparare per chi già conosce linguaggi simili come il C++ o Java, ma non è neanche difficile per chi si approccia per la prima volta ad esso data la sua semplicità sintattica e la sua maneggevolezza. Tuttavia ciò può rappresentare un'arma a doppio taglio perché la semplicità si gioca anche su una disponibilità limitata di oggetti per cui alcuni procedimenti, all'apparenza molto semplici, richiedono script abbastanza complessi.

La caratteristica principale di Javascript, infatti, è quella di essere un linguaggio di scripting, ma soprattutto è il linguaggio di scripting per eccellenza e certamente quello più usato. Questa particolarità comporta una notevole serie di vantaggi e svantaggi secondo l'uso che se ne deve fare e tenendo in considerazione il rapporto che si instaura nel meccanismo client-server. Spiegando in parole molto semplici quest'ultimo rapporto, possiamo dire che il server invia i dati al client e questi dati possono arrivare in due diversi formati: in formato testo (o ASCII) o in formato binario (o codice macchina). Il client sa comprendere solo il formato binario (cioè la sequenza di 1 e 0), per cui se i dati arrivano in questo formato diventano immediatamente eseguibili (e purtroppo senza la possibilità di effettuare controlli), mentre se il formato è diverso devono essere interpretati e tradotti in formato binario, e quindi il client ha bisogno di un filtro o meglio di un interprete che sappia leggere questi dati e li possa tradurre in binario. I dati in formato testo sono visibili all'utente come semplici combinazioni di caratteri e di parole, quindi di facile manipolazione, ma richiedono più tempo per la loro interpretazione a causa dei passaggi e delle trasformazioni che devono subire per essere compresi dal client; i dati in formato binario, invece, sono di difficile comprensione da parte dell'utente, ma immediatamente eseguibili dal client, senza richiedere passaggi intermedi.

Il concetto di script è bene espresso con una similitudine nel testo di Michael Moncur su Javascript, apparso di recente e pubblicato in Italia da Tecniche Nuove, dove la spiegazione è didattica ma molto efficace e merita la citazione: script in inglese significa "copione" o "sceneggiatura", ed infatti l'utilizzo è proprio questo: il browser legge una riga, la interpreta e la esegue, poi passa alla successiva e fa la stessa cosa, e così di seguito fino alla chiusura dello script.

 

Vantaggi e svantaggi

Quali sono i vantaggi e gli svantaggi tra linguaggi di scripting e linguaggi compilati? Cerchiamo di riassumerne qualcuno:

  1. il linguaggio di scripting è più sicuro ed affidabile perché in chiaro e da interpretare, quindi può essere filtrato; per lo stesso Javascript la sicurezza è quasi totale, perché solo alla sua prima versione erano stati segnalati dal CIAC (Computer Incident Advisory Committee) dei problemi di lieve entità, tra cui la lettura della cache e dei siti visitati, dell'indirizzo e-mail e dei file presenti su disco, tali "falle", però, sono state corrette già con le versioni di Netscape successive alla 2.0;
  2. gli script hanno limitate capacità, per ragioni di sicurezza, per cui non è possibile fare tutto con Javascript, ma occorre abbinarlo ad altri linguaggi evoluti, magari più sicuri, come Java, e tale limitazione è ancora più evidente se si desidera operare sull'hardware del computer, come ad esempio il "settaggio" in automatico della risoluzione video o la stampa di un documento;
  3. un grosso problema è che il codice è visibile e può essere letto da chiunque, anche se tutelato con le leggi del copyright, ma questo, che secondo me è un vantaggio, è il prezzo da pagare da chi vuole utilizzare il web: la questione dei diritti d'autore è stata rivoluzionata con l'avvento di Internet (si veda soprattutto l'MP3), e la tutela è molto labile e inadeguata alle leggi attuali, per cui occorre prendere la situazione con molta filosofia;
  4. il codice Javascript viene eseguito sul client per cui il server non è sollecitato più del dovuto; uno script eseguito sul server, invece, sottoporrebbe questo ad una dura sollecitazione e i server di capacità più limitate ne potrebbero risentire se interrogati da più utenti;
  5. il codice dello script deve essere scaricato completamente prima di poter essere eseguito, e questo è il risvolto della medaglia di quanto detto precedentemente, per cui se i dati che uno script utilizza sono tantissimi (ad esempio una raccolta di citazioni da mostrare in maniera casuale), ciò comporterebbe un lungo tempo di scaricamento, mentre l'interrogazione dello stesso database sul server sarebbe più rapida.

 

Tag <Script>

Dopo aver parlato in generale degli script, occorre passare alla pratica e vedere come inserirli nella pagina HTML. La spiegazione risulta abbastanza complessa soprattutto perché Javascript ormai si integra così bene in HTML da non avere più spazi definiti, ma è possibile trovarlo ovunque.

L'HTML prevede un tag apposito per gli script, e tale è:

 

<SCRIPT<!-- (contenuto script) //--></SCRIPT >

 

si noteranno anche dei simboli all'interno dei tag, per il momento accenniamo solo a dire che hanno una loro utilità si spiegherà poi quale è. Tali tag, possono essere in numero variabile, l'unica attenzione sta nel chiuderli ogni volta che vengono aperti.

I browser ricevono le pagine HTML con tutto il contenuto, quando si incontra il tag <SCRIPT> questo viene eseguito come tutti gli altri tag, dall'alto in basso, ma il suo contenuto è interpretato secondo un codice diverso: in tal modo se il browser comprende il codice, questo viene eseguito, e se si incontra un errore nell'esecuzione dello stesso i casi sono due:

  1. la pagina viene visualizzata, ma il codice errato non viene eseguito;
  2. se il codice genera un loop (cioè; un ciclo infinito) la pagina resta bianca o è visualizzata parzialmente perché; l'esecuzione dall'alto in basso del codice HTML è momentaneamente interrotta.

Così come scritto, però, il tag <SCRIPT> non è completo perché i linguaggi di scripting sono diversi, allora occorre mettere anche la specificazione del linguaggio ed è:

 

<SCRIPT Language="Javascript"><!-- (contenuto script) //--></SCRIPT>

 

Ciò potrebbe bastare, ma negli ultimi riferimenti, soprattutto da parte di Netscape, si consiglia vivamente di indicare anche la versione di Javascript che si adopera, soprattutto perché l'evoluzione del linguaggio è continua e non sempre assicura la compatibilità con i vecchi browser.

In tal modo si occulta il codice ai browser che non possono gestire gli aggiornamenti del linguaggioAlla luce di quanto detto, il precedente script può essere considerato valido per la versione 1.0 di Javascript, e quindi per tutti i browser, mentre uno script del genere:

<SCRIPT Language="Javascript1.2"><!-- (contenuto script) //--></SCRIPT>

diventa leggibile solo da Netscape 4.0 e Explorer 4.0 e dalle loro versioni successive. Vi chiederete anche come fare a conoscere tutte le compatibilità; ebbene non c'è nessun programma che aiuti in ciò, occorre conoscerle a fondo oppure usare un metodo empirico: testare le pagine su diversi browser e segnalare le incompatibilità, se queste dipendono dalla versione di Javascript, mascherarle con l'indicazione della versione.

 

Richiamo degli script

In linea di principio uno script può essere inserito in due modi all'interno di pagina HTML (un'eccezione è rappresentata dagli script del server creati con LiveWire):

  1. inserendo il codice nel documento;
  2. caricandolo da un file esterno.

     

Script esterni

In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione .js. Viene richiamato con l'attributo SRC del tag SCRIPT:

 

<SCRIPT Language=Javascript SRC="nomefile.js"></SCRIPT>

 

dove la specificazione di Language è facoltativa, poiché la stessa estensione del file basta a dimostrare il linguaggio adoperato, ma si consiglia proprio per identificare la versione. Il nome del file può essere indicato con un URL relativo o assoluto.

Tale file esterno viene eseguito all'interno della pagina HTML, per cui lo script viene solo letto come file di testo, trasferito nell'HTML nella posizione di richiamo e qui eseguito. Per tale motivo il file va salvato come testo ASCII, senza caratteri di controllo e senza tag HTML o elementi di altri linguaggi per non generare errori, e si può adoperare un qualsiasi editor molto semplice (in Windows è consigliato NotePad o Blocco Note).

Il vantaggio di usare file esterni è immenso soprattutto perché apporta la caratteristica della modularità per cui uno script che ricorre di frequente (ad esempio il rollover) può essere scritto una sola volta e richiamato in qualsiasi pagina HTML quando serve, ma tutto ciò ha un prezzo: funziona solo con Netscape 3.0 ed Explorer 4.0 e nelle versioni successive.

 

Script interni

Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag <HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito secondo l'ordine di caricamento. Cosa cambia tutto ciò? Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script, quello che si trova nella sezione BODY è visibile agli script che lo seguono. La scelta dipende anche da altri fattori (come la creazione della pagina HTML in maniera dinamica), ma sarà poi l'esperienza a suggerirli.

 

 

ESEMPI DI JAVASCRIPT

ESEMPIO 1 (JAVASCRIPT INTERNO)

Realizzate la seguente pagina HTML chiamandola es_interno.htm

<HTML><HEAD><TITLE>esempio di javascript interno</TITLE>

<SCRIPT type="text/javascript">

<!-- alert('sono uno script interno'); //-->

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>


Il risultato che si ottiene è il seguente

 

ESEMPIO 2 (JAVASCRIPT ESTERNO)

Con il block note di Windows scrivete:

alert('Sono un file esterno')

e salvatelo (selezionando in basso l'opzione "tutti i file") chiamandolo prova.js

Quindi realizzate la seguente pagina HTML nella stessa cartella chiamandola es_esterno.htm

<HTML><HEAD><TITLE>esempio di javascript esterno</TITLE>

<SCRIPT SRC="prova.js">

</SCRIPT></HEAD>

<BODY></BODY>

</HTML>


Il risultato che si ottiene è il seguente

 

ESEMPIO 3

Esempio di messaggio sulla barra di stato di Windows:

<HTML><HEAD><TITLE>esempio di javascript interno che provoca un messaggio sulla barra di stato</TITLE>

<SCRIPT>

<!-- Hide from old browsers

message=" QUESTO È UN " + 

"MESSAGGIO SULLA " +

"BARRA DI STATO... "

scrollSpeed = 25

lineDelay   = 1500

// Do not change the text below //

txt         = ""

function scrollText(pos) {

if (message.charAt(pos) != '^') {

txt = txt + message.charAt(pos)

status = txt

pauze  = scrollSpeed

}

else {

pauze = lineDelay

txt   = ""

if (pos == message.length-1) pos = -1

}

pos++

setTimeout("scrollText('"+pos+"')",pauze)

}

// Unhide -->

scrollText(0)

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>


Il risultato che si ottiene è il seguente

 

ESEMPIO 4

Esempio di blocco dell'uso del pulsante di destra del mouse:

<HTML><HEAD><TITLE>esempio di javascript interno che impedisce l'uso del pulsante di destra del mouse</TITLE>

<!--webbot bot="HTMLMarkup" startspan --><BR>

<SCRIPT language=JavaScript>

var message="IL PULSANTE DI DESTRA DEL MOUSE È DISATTIVATO";

function click(e) {

if (document.all) {

if (event.button == 2) {

alert(message);

return false;

}

}

if (document.layers) {

if (e.which == 3) {

alert(message);

return false;

}

}

}

if (document.layers) {

document.captureEvents(Event.MOUSEDOWN);

}

document.onmousedown=click;

// -->Copyright

</SCRIPT>

<BR><!--webbot

bot="HTMLMarkup" endspan -->

</HEAD>

<BODY></BODY>

</HTML>


Il risultato che si ottiene è il seguente

 

ESEMPIO 5

Esempio password (pluto) da digitare dentro una casella:

<HTML><HEAD><TITLE>Esempio di javascript interno per richiedere una password per aprire una pagina </TITLE>

<SCRIPT language="JavaScript">

function passWord() {

var testV = 1;

var pass1 = prompt('Inserisci la password');

while (testV < 3) {

if (!pass1) history.go(-1)

if (pass1.toLowerCase() == "pluto") {

alert('La password è corretta');

break;

}

testV+=1;

var pass1 = prompt('Sbagliato! Puoi riprovare.','Password');

}

if (pass1.toLowerCase()!="altro" & testV ==3) history.go(-1);

return " ";

}

document.write(passWord());

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>


Il risultato che si ottiene è il seguente

Vi sono molti siti che forniscono gratuitamente corsi, materiali e informazioni su Javascript per "web builder" principianti, tra i più interessanti si segnalano:



INTRODUZIONE A JAVASCRIPT
(http://www.unimo.it/corsi/html/jsintro/script.htm)

JAVASCRIPT.IT
(http://www.javascript.it)

CORSO JAVASCRIPT
(http://www.wowarea.com/italiano/aiuto/javascit.htm)

CORSO JAVASCRIPT DI HTML.IT
(http://www.html.it/jscript)

CORSO JAVASCRIPT
(http://www.echoecho.com/it/javascript.htm)

CORSO JAVASCRIPT DI GUIDAINLINEA.COM
(http://www.guidainlinea.com/js/guida/default.asp)

JAVASCRIPT DIRECTORY
(http://www.jsdir.it)







TORNA INDIETRO