JavaScript

Da Wikipedia, l'enciclopedia libera.

JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web. Fu originariamente sviluppato da Brendan Eich della Netscape Communications con il nome di Mocha e successivamente di LiveScript, ma in seguito è stato rinominato "JavaScript" ed è stato formalizzato con una sintassi più vicina a quella del linguaggio Java di Sun Microsystems. JavaScript è stato standardizzato per la prima volta tra il 1997 e il 1999 dalla ECMA con il nome ECMAScript. L'ultimo standard, del dicembre 1999, è ECMA-262 Edition 3, e corrisponde a JavaScript 1.5. È anche uno standard ISO.

[modifica] Java, JavaScript, e JScript

Il cambio di nome da LiveScript a JavaScript si ebbe più o meno nel periodo in cui Netscape stava includendo il supporto per la tecnologia Java nel suo browser Netscape Navigator. La scelta del nome si rivelò fonte di grande confusione. Non c'è una vera relazione tra Java e JavaScript; le loro somiglianze sono soprattutto nella sintassi (derivata in entrambi i casi dal linguaggio C); le loro semantiche sono piuttosto diverse, e in particolare i loro object model non hanno relazione e sono ampiamente incompatibili.

Dato il successo di JavaScript come linguaggio per arricchire le pagine web, Microsoft sviluppò un linguaggio compatibile, conosciuto come JScript. La necessità di specifiche comuni fu alla base dello standard ECMA 262 per ECMAScript, di cui sono state pubblicate tre edizioni da quando il lavoro iniziò, nel novembre 1996.

[modifica] Aspetti strutturali

La caratteristica principale di Javascript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato ma bensì c'è un interprete (in questo caso il browser che si sta utilizzando) che esegue riga per riga in modalità runtime quanto trascritto nello script. In realtà la logica è la stessa dell'HTML con la differenza di avere una struttura simile a quella di un linguaggio compilato e quindi la possibilità di poter eseguire funzionalità complesse vicine anche ai normali linguaggi object oriented (creazione di oggetti, strutture di controllo, cicli, etc.). Presenta quindi tutte le caratteristiche di un normale linguaggio interpretato e di conseguenza i suoi vantaggi e svantaggi.

Da aggiungere il fatto che il codice JavaScript viene eseguito sul client quindi il server non viene sollecitato. Ciò risulta essere un vantaggio in quanto con la presenza di script particolarmente complessi il server non verrebbe sovraccaricato. Di conseguenza però nel caso di script che presentano una considerevole mole di dati il tempo per lo scaricamento diventa eccessivo.

Inoltre lavorando solamente sul client ogni informazione che presuppone un accesso a dati stoccati in un database deve essere rimandata ad un linguaggio che effettua esplicitamente la transazione per poi restituire i risultati ad una o più variabili JavaScript; operazioni del genere richiedono il caricamento della pagina stessa. Con l'avvento di AJAX anche questo limite è stato superato.

[modifica] Uso

JavaScript è un linguaggio di programmazione orientato a oggetti con una sintassi vagamente basata sul C. Come il C, ha il concetto di parole chiave riservate, che rendono quasi impossibile espandere il linguaggio (essendo eseguito direttamente dal sorgente).

Come nel C, il linguaggio non ha propri costrutti di input o output; mentre il C si affida alle librerie I/O standard, un interprete JavaScript si basa su un programma ospite in cui è integrato. Ci sono molti programmi ospiti di questo tipo, di cui quelli relativi al Web sono gli esempi più noti. Questi verranno illustrati per primi.

JavaScript, se integrato in un browser Web, si collega tramite interfacce chiamate DOM (Document Object Model) alle applicazioni, specialmente al lato server (web server) e al lato client (browser) delle applicazioni internet. Molti siti web usano la tecnologia JavaScript lato client per creare potenti applicazioni web dinamiche. Può usare Unicode e può valutare le espressioni regolari (introdotte nella versione 1.2, in Netscape Navigator 4 e Internet Explorer 4). Le espressioni JavaScript contenute in una stringa possono essere valutate usando la funzione eval.

Un uso principale del Javascript basato su web è la scrittura di piccole funzioni integrate nelle pagine HTML che interagiscono con il DOM del browser per compiere determinate azioni non possibili con il solo HTML statico, come controllare i valori nei campi di ingresso, ecc. Sfortunatamente, i DOM dei vari browser non sono standardizzati: browser diversi espongono diversi oggetti o metodi allo script, ed è quindi spesso necessario scrivere differenti versioni di una funzione JavaScript per ciascuno dei browser.

Al di fuori del Web, interpreti JavaScript sono integrati in diverse applicazioni. Adobe Acrobat e Adobe Reader supportano JavaScript nei file PDF. La piattaforma Mozilla, che è alla base di molti diffusi browser Web, usa JavaScript per implementare l'interfaccia utente e la logica di transazione dei suoi vari prodotti. Gli interpreti JavaScript sono integrati anche nelle applicazioni proprietarie prive di interfacce programmabili via script. Infine la tecnologia Windows Script Host di Microsoft supporta JavaScript (via JScript) un linguaggio di scripting per i sistemi operativi.

Ciascuna di queste applicazioni fornisce il proprio modello a oggetti che dà accesso all'ambiente ospite, con il nucleo del linguaggio JavaScript che rimane per lo più invariato in ciascuna applicazione.

Ci sono diverse implementazioni del nucleo del linguaggio Javascript, tra le quali:

• KJS
• Rhino
• SpiderMonkey
• Narcissus
• NJS
• NGS
• Resin
• FESI
• SEE
• DMDScript

[modifica] Ambiente

[modifica] Tag Script

Il principale tag del linguaggio di script Javascript è il tag script. Questo tag è un'estensione dell'HTML in quanto permette la gestione di codice esterno che non è nativo HTML.

<script type="text/javascript">
// <![CDATA[
JavaScript statements...
// ]]>
</script>

Un documento può presentare in più parti la definizione del tag SCRIPT. Tramite questo tag si può rappresentare la versione utilizzata ed a seconda del browser si avrà l'interpretazione appropriata. Le definizioni possono essere le seguenti:

<script type="text/javascript"> ... </script>

[modifica] Programma di esempio

[modifica] Hello, world!

Il seguente esempio crea una finestrella di avviso con all'interno scritto "Wikipedia ForEver".

<script type="text/javascript">
   alert("Wikipedia ForEver");
</script>

Per "scrivere" direttamente nel documento:

<script type="text/javascript">
   document.write("Hello World");
</script>

Il tipo MIME per il codice sorgente JavaScript source code è application/x-javascript, ma è più usato text/javascript, anche se non standard.

Per integrare del codice Javascript in un documento HTML, bisogna farlo precedere da:

<script type="text/javascript">

e seguire da:

</script>

Browser più vecchi tipicamente richiedono che il codice inizi con:

 <script language="JavaScript" type="text/javascript">
 <!--

e finisca con:

 // -->
 </script>

I segnalatori di commento <!-- ... --> sono necessari per assicurare che il codice non venga visualizzato come testo da browser molto vecchi che non riconoscono il tag <script> nei documenti HTML, mentre LANGUAGE è un attributo HTML (il cui uso è ormai sconsigliato) che può essere richiesto da vecchi browser. Comunque, i tag <script> nei documenti XHTML/XML non funzionano se commentati, dato che i parser conformi agli standard XHTML/XML ignorano i commenti e possono anche incontrare problemi con i simboli --, < e > negli script (per esempio, confondendoli con gli operatori di decremento degli interi e di confronto). I documenti XHTML dovrebbero quindi includere gli script come sezioni CDATA dell'XML, facendoli precedere da

 <script type="text/javascript">
 //<![CDATA[

e facendoli seguire da

 //]]>
 </script>

(I simboli '//' all'inizio di una linea segnalano l'inizio di un commento JavaScript, per impedire che '<![CDATA[' e ']]>' vengano analizzati dallo script.)

Gli elementi HTML[1] possono contenere eventi intrinseci che possono essere associati a gestori specificati da uno script. Per scrivere del codice HTML 4.01 valido, il server the web dovrebbe restituire un 'Content-Script-Type' con valore 'text/javascript'. Se il server web non può essere configurato a tale scopo, l'autore del sito web può inserire la seguente dichiarazione nella sezione di intestazione del documento

<meta http-equiv="Content-Script-Type" content="text/javascript" />

[modifica] Incompatibilità

Le varie implementazioni di JavaScript, come già accaduto per l'HTML, spesso non sono conformi agli standard, ma piuttosto sono costruite per funzionare con uno specifico browser web. L'attuale standard ECMAScript dovrebbe essere teoricamente la base di tutte le implementazioni Javascript, ma in pratica i browser Mozilla (e Netscape) usano JavaScript, Microsoft Internet Explorer usa JScript, e altri browser come Opera e Safari usano altre implementazioni ECMAScript, spesso con ulteriori caratteristiche non standard per permettere la compatibilità con JavaScript e JScript.

JavaScript e JScript contengono molte caratteristiche che non sono parte dello standard ufficiale ECMAScript, e possono anche essere privi di diverse caratteristiche. In tal modo, sono in parte incompatibili, il che porta gli autori di script a sopperire a tali problemi. Tra i due, JavaScript è più conforme allo standard: ciò significa che uno script redatto secondo gli standard ECMA funzionerà con la maggior parte dei browser, tranne Internet Explorer.

Un altro effetto è che ciascun browser potrebbe trattare lo stesso script in modo diverso, e ciò che funziona in un browser potrebbe non funzionare in un altro browser, o persino in una diversa versione dello stesso browser. Come con l'HTML, è quindi raccomandabile scrivere codice conforme agli standard.

Il VBScript di Microsoft Internet Explorer non è JavaScript, ed è incompatibile con lo standard ECMA.

[modifica] Combattere le incompatibilità

Ci sono due tecniche principali per gestire le incompatibilità: browser sniffing (lett. "annusare il browser") e object detection (rilevazione dell'oggetto). Quando c'erano solo due browser che supportavano lo scripting (Netscape and Internet Explorer), il browser sniffing era la tecnica più diffusa. Controllando un certo numero di proprietà del client, che restituivano informazioni su piattaforma, browser e versione, era possibile per il codice discernere esattamente in quale browser veniva eseguito. Più tardi, le tecniche di sniffing divennero più difficili da implementare, dato che Internet Explorer cominciò a "dissimulare" le sue informazioni sul client, per esempio fornendo informazioni sul browser sempre più inaccurate (i motivi per questo comportamento della Microsoft sono da tempo oggetto di disputa). Più tardi ancora, il browser sniffing divenne una sorta di complicata forma d'arte, quando cioè altri browser dotati di scripting entrarono nel mercato, ciascuno con proprie informazioni su piattaforma, client e versione.

L'object detection si basa sul controllare l'esistenza della proprietà di un oggetto.

function set_image_source(imageName, imageURL)
{
  // Test per verificare se l'oggetto 'document' ha una proprietà 'images'
  if (document.images)
  {
    // eseguito solo se esiste un vettore 'images'
    document.images[ imageName ].src = imageURL;
  }
}

Un esempio più complesso si basa sull'uso di test booleani collegati:

if (document.body && document.body.style)

In questo caso, l'espressione "document.body.style" normalmente causerebbe un errore in un browser che non ha la proprietà "document.body", ma l'uso dell'operatore "&&" assicura che "document.body.style" non venga mai chiamato se "document.body" non esiste. Questa tecnica è chiamata lazy evaluation (lett. "valutazione pigra").

Oggi, una combinazione di browser sniffing, object detection, e conformità agli standard come le specifiche ECMAScript e i CSS sono usati in varie proporzioni per provare ad assicurare che un utente non incontri mai un errore JavaScript.

[modifica] Elementi del linguaggio

[modifica] Variabili

Le variabili sono in genere tipizzate dinamicamente. Le variabili sono definite semplicemente assegnando loro un valore oppure usando il comando var. Le variabili dichiarate fuori da qualunque funzione sono in visibilità "globale", accessibili dall'intera pagina web; le variabili dichiarate dentro una funzione sono locali per quella funzione. Per passare variabili da una pagina all'altra, uno sviluppatore può impostare un cookie o usare un frame nascosto o una finestra in background per memorizzarli.

[modifica] Oggetti

Ogni cosa in JavaScript è o un valore primitivo o un oggetto. Gli oggetti sono entità dotate di unicità (sono uguali solo a sé stessi) e che associano nomi di proprietà a valori. Ciò significa che un oggetto è un vettore associativo simile agli hash in Perl, o ai dizionari in Python, PostScript e Smalltalk.

Javascript ha diversi generi di oggetti predefiniti, in particolare Array (vettori), Boolean (booleani), Date (oggetti contententi una data e un'ora), Function (funzioni), Math (oggetto contente funzioni di uso nel calcolo matematico), Number (numeri), Object (oggetti), RegExp (espressioni regolari) e String (stringhe). Altri oggetti sono gli "oggetti ospiti", definiti non dal linguaggio ma dall'ambiente di esecuzione. In un browser, i tipici oggetti ospite appartengono al DOM: window (finestra) , form (maschera), link (collegamento) etc.

Definendo un costruttore, è possibile definire oggetti. JavaScript è un linguaggio orientato a oggetti basato su prototipi. Ciò significa che l'eredità è fra oggetti, non fra classi (JavaScript non ha classi). Gli oggetti ereditano le proprietà dai loro prototipi.

Si possono aggiungere ulteriori proprietà o metodi ai singoli oggetti dopo che sono stati creati. Per far questo per tutte le istanze create da un singolo costruttore, si può usare la proprietà prototype del costruttore per accedere all'oggetto prototipo.

Esempio: Creazione di un oggetto

// costruttore
function MyObject(attributeA, attributeB)
{
  this.attributeA = attributeA
  this.attributeB = attributeB
}
 
// crea un Oggetto
obj = new MyObject('red', 1000)
 
// accede ad un attributo di obj
alert(obj.attributeA)
 
// accede ad un attributo con la notazione del vettore associativo
alert(obj["attributeA"])

La gerarchia degli oggetti in JavaScript può essere emulata. Per esempio:

function Base()
{
  this.Override = _Override;
  this.BaseFunction = _BaseFunction;
 
  function _Override()
  {
    alert("Base::Override()");
  }
 
  function _BaseFunction()
  {
    alert("Base::BaseFunction()");
  }
}
 
function Derive()
{
   this.Override = _Override;
   function _Override()
   {
     alert("Derive::Override()");
   }
}
 
Derive.prototype = new Base();
 
d = new Derive();
d.Override();
d.BaseFunction();

risulterà nell'output:

Derive::Override()
Base::BaseFunction()

[modifica] Oggetti predefiniti

Oltre a permettere la definizione di oggetti, il Javascript mette a disposizione tutta una serie di oggetti che possono essere utilizzati per i propri script:

1. Anchor
2. Applet
3. Area
4. Array
5. Base
6. Basefont
7. Body
8. Button
9. Checkbox
10. Date
11. Document
12. Event
13. File
14. FileUpload
15. Form
16. Frame
17. Frameset
18. Function
19. Hidden
20. History
21. Iframe
22. Image
23. Layer
24. Link
25. Location
26. Math
27. Meta
28. Navigator
29. Number
30. Object
31. Option
32. Password
33. Radio
34. RegExp
35. Reset
36. Screen
37. Select
38. Style
39. String
40. Submit
41. Table
42. TableData
43. TableHeader
44. TableRow
45. Text
46. Textarea
47. Window

[modifica] Strutture dati

Una tipica struttura dati è l'Array o vettore, che è una mappa tra interi e valori. In Javascript, tutti gli oggetti possono associare interi e valori, ma i vettori sono un tipo speciale di oggetti che hanno dei comportamenti extra e metodi specializzati negli indici interi (per es., join, slice, e push).

I vettori hanno una proprietà length che è garantita essere sempre maggiore dell'indice più grande usato nel vettore. È automaticamente aggiornata se si crea una proprietà con un indice ancora maggiore. Scrivere un numero più piccolo nella proprietà length rimuove gli indici più grandi. Questa proprietà è l'unica caratteristica speciale dei vettori, che li distingue dagli altri oggetti.

Gli elementi degli Array possono essere indirizzati usando la normale notazione per accedere alle proprietà degli oggetti:

  myArray[1]
  myArray["1"]

Queste due notazioni sono equivalenti. Non è possibile usare la notazione a punto o le stringhe con una rappresentazione alternativa del numero:

  myArray.1 (errore di sintassi)
  myArray["01"] (non è lo stesso di myArray[1])

La dichiarazione di un vettore può usare o una notazione esplicita o il costruttore Array:

 myArray = [0,1,,,4,5]; (vettore di lunghezza 6 con 4 elementi)
 myArray = new Array(0,1,2,3,4,5); (vettore con lunghezza 6 e 6 elementi)
 myArray = new Array(365); (vettore vuoto con lunghezza 365)

Gli Array sono implementati in modo che solo gli elementi definiti usino memoria; sono "vettori sparsi". Impostare myArray[10] = 'qualcosa' e myArray[57] = 'qualcosaltro' usa solo lo spazio per questi due elementi, come per ogni altro oggetto. La lunghezza dell'array verrà sempre riportata come 58.

[modifica] Strutture di controllo e condizionali

[modifica] If ... Else

  if (condizione)
  {
     istruzioni
  }
  else [facoltativo]
  {
     istruzioni
  }

[modifica] Ciclo While

  while (condizione)
  {
     istruzioni
  }

[modifica] Ciclo Do ... while

  do
  {
     istruzioni
  } while (condizione);

[modifica] Ciclo For

  for ([espressione iniziale]; [condizione]; [espressione di incremento])
  {
     istruzioni
  }

[modifica] Ciclo For ... in

Questo ciclo percorre tutte le proprietà di un oggetto (o gli elementi di un vettore).

  for (variabile in oggetto)
  {
     istruzioni
  }

[modifica] Istruzione switch

  switch (espressione)
  {
     case etichetta1 :
        istruzioni;
        break;
     case etichetta2 :
        istruzioni;
        break;
     default :
        istruzioni;
  }

[modifica] Funzioni

Una funzione è un blocco con una lista di argomenti (che può essere anche vuota) a cui è normalmente assegnato un nome. Una funzione può restituire un valore di ritorno.

  function(arg1, arg2, arg3)
  {
     istruzioni;
     return espressione;
  }

Il numero degli argomenti passati quando si chiama una funzione non deve necessariamente essere uguale al numero degli argomenti della definizione della funzione. All'interno della funzione gli argomenti possono essere riferiti anche attraverso il vettore arguments.

Ogni funzione è un'istanza di Function, un tipo di oggetto base. Le funzioni possono essere create e assegnate come ogni altro oggetto:

   var myFunc1 = new Function("alert('Hello')");
   var myFunc2 = myFunc1;
   myFunc2();

produce come output:

   Hello

[modifica] Interazione con l'utente

La maggior parte dell'interazione con l'utente si ha attraverso form HTML a cui si può accedere con il DOM HTML. Comunque, ci sono anche alcuni mezzi molto semplici per comunicare con l'utente:

• Alert dialog box (finestra di avviso)
• Confirm dialog box (finestra di conferma)
• Prompt dialog box (finestra di richiesta input)
• Barra di stato
• Standard output ("console")

[modifica] Metodi di scrittura a video (Standard Output)

Per scrivere a video (cioè nella pagina in cui si trova lo script) è possibile utilizzare il metodo document.write(); le stringhe da visualizzare possono essere concatenate utilizzando l'operatore di concatenamento '+':

<html>
<head>
<script type="text/javascript">
<!-- Nasconde lo script ai browser obsoleti
 
// Questa funzione genera una riga orizzontale della larghezza scelta.
function bar(widthPct)
{
  document.write("<hr align='left' width='" + widthPct + "%'>");
}
 
// Questa funzione genera del testo preceduto da un titolo di dato livello.
function output(headLevel, headText, text)
{
  document.write("<h" + headLevel + ">" + headText + "</h" + headLevel + "><p>" + text + "</p>");
}
 
// Fine del codice da nascondere -->
</script>
</head>
<body>
<script type="text/javascript">
<!-- Nasconde lo script ai browser obsoleti
 
bar(25)
output(2, "JavaScript Rules!", "Usare JavaScript è facile...")
 
// Fine del codice da nascondere -->
</script>
 
<p>Questo è normale HTML, a differenza di quello generato dal codice sopra.</p>
 
</body>
</html>

[modifica] Eventi

Gli elementi di testo possono essere la fonte di vari eventi che possono avviare un'azione se è stato registrato un gestore di eventi ECMAScript. Nell'HTML, questi gestori di eventi sono spesso funzioni definite come anonime direttamente all'interno del tag HTML.La sintassi per richiamare un evento in uno script è la seguente:

Oggetto.evento=handler;

Esistono varie categorie di eventi:

1. Eventi attivabili dai tasti del mouse
2. Eventi attivabili dai movimenti del mouse
3. Eventi attivabili dal trascinamento del mouse (drag and drop)
4. Eventi attivabili dall'utente con la tastiera
5. Eventi attivabili dalle modifiche dell'utente
6. Eventi legati al "fuoco"
7. Eventi attivabili dal caricamento degli oggetti
8. Eventi attivabili dai movimenti delle finestre
9. Eventi legati a particolari bottoni
10. Altri e nuovi tipi di eventi

[modifica] Eventi attivabili dai tasti del mouse

Lista eventi:

1. onClick: attivato quando si clicca su un oggetto;
2. onDblClick: attivato con un doppio click;
3. onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
4. onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
5. onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu.

Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione onmousedown, onmouseup, onclick.

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi attivabili dai movimenti del mouse

Lista eventi:

1. onMouseOver: attivato quando il mouse si muove su un oggetto;
2. onMouseOut: attivato quando il mouse si sposta da un oggetto;
3. onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (l'utilizzo del mouse è frequente), non è disponibile per default, ma solo abbinato con la cattura degli eventi, che si spiegherà in seguito.

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi attivabili dal trascinamento del mouse (drag and drop)

Lista eventi:

1. onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
2. onMove: attivato quando un oggetto muove una finestra o un frame;
3. onDragStart: evento attivato appena l'utente inizia a trascinare un oggetto;
4. onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop;
5. onDragEnter: attivato appena l'utente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser;
6. onDragOver: attivato quando l'utente l'utente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
7. onDragLeave: attivato quando l'utente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato;
8. onDragEnd: attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
9. onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad un'operazione di trascinamento;

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi attivabili dall'utente con la tastiera

Lista Eventi:

1. onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto;
2. onKeyDown: attivato quando viene premuto il tasto;
3. onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato;
4. onHelp: attivato quando un utente preme il tasto F1;

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi attivabili dalle modifiche dell'utente

[modifica] onChange

Attivato quando il contenuto di un campo di un form o modulo è modificato o non è più selezionato. Viene utilizzato anche con gli oggetti FileUpload, Select, Text, TextArea.

Esempio:

<input type="text" value="Enter email address" name="userEmail" onChange=validateInput(this.value) />
<script type="text/javascript">
  this.myForm.userEmail.focus();
  this.myForm.userEmail.select();
 
  function validateInput()
  {
    userInput = new String();
    userInput = this.myForm.userEmail.value;
    if (userInput.match("@"))
      alert("Thanks for your interest.");
    else
      alert("Please check your email details are correct before submitting");
  }
</script>

[modifica] onCellChange

Attivato quando si modifica un elemento in un Database, per questa sua caratteristica ha un uso non propriamente legato a Javascript;

[modifica] onPropertyChange

Evento attivato quando cambia la proprietà di un elemento;

[modifica] onReadyStateChange

Evento attivato quando lo stato del caricamento di un elemento cambia, l'evento è utile, ad esempio, per verificare che un elemento sia stato caricato.

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi legati al "fuoco"

[modifica] onFocus

Questo handler è l'opposto di onBlur per cui si attiva quando l'utente entra in un campo;

[modifica] onBlur

Viene attivato quando il puntatore del mouse o il cursore esce dalla finestra corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale handler si avvia se si esce dal campo il cui tag contiene il controllo;

Esempio

Enter email address <input type="text" value="" name="userEmail" onBlur=addCheck()>
<script type="text/javascript">
function addCheck()
{
  alert("Please check your email details are correct before submitting")
}
</script>

[modifica] onSelect

Attivabile quando si seleziona del testo all'interno di una casella di testo sia col mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia;

[modifica] onSelectStart

Si attiva quando si inizia a selezionare un evento;

[modifica] onbeforeEditFocus

Si attiva con un doppio click o con un clicK su un oggetto che ha già la selezione, quando questo è in DesignMode;

[modifica] onLoseCapture

Si attiva quando un oggetto perde la cattura del mouse.

[modifica] Tag di applicazione

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

[modifica] Eventi attivabili dal caricamento degli oggetti

[modifica] onLoad

Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini;

[modifica] onUnload

È l'opposto del precedente e funziona quando si lascia una finestra per caricarne un'altra o anche per ricaricare la stessa (col tasto refresh);

[modifica] onAbort

L'Handler dell'evento onAbort permette di specificare del codice nel caso in cui l'utente blocchi il caricamento di un oggetto, o che si blocchi il caricamento di un immagine.

Questo handler usa le seguenti proprietà dell'evento.

Esempio

<IMG NAME = "myPic" SRC = "images/myPic.gif" onAbort = "alert('Loading of image aborted!')">

[modifica] onError

Si attiva quando il caricamento di un oggetto causa un errore, ma solo se questo è dovuto ad un errore di sintassi del codice e non del browser così funziona su un link errato di un'immagine della pagina, ma non su un link errato di caricamento di una pagina intera;

[modifica] onBeforeUnload

Questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima;

[modifica] onStop

Questo handler funziona quando si ferma il caricamento della pagina con il tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload caricandosi prima di questo ma dopo onBeforeUnload.

[modifica] Tag di applicazione

1. onLoad Questo gestore è usato con i tag <BODY> e <FRAMESET> e da Javascript 1.1anche con <IMG> mentre in Explorer occorre aggiungere anche i tag <SCRIPT>, <LINK>, <EMBED>, <APPLET>. In Javascript 1.2 in Netscape si aggiunge anche il tag <LAYER>.
2. onUnload Questo gestore è usato con i tag <BODY> e <FRAMESET> anche in Internet Explorer.
3. onAbort Questo gestore è usato solo con il tag<IMG> anche in Internet Explorer.
4. onError Questo gestore è usato solo con il tag<IMG> e con Window mentre in Internet Explorer anche con <OBJECT> e <STYLE>.
5. onBeforeUnload Questo gestore è usato con i tag <BODY> anche in Internet Explorer.
6. onStop Questo gestore è usato con i tag <BODY> anche in Internet Explorer.

[modifica] Eventi attivabili dai movimenti delle finestre

Lista Eventi:

1. onResize: Questo handler si attiva quando l'utente rimpicciolisce o ingrandisce una finestra o un frame o, in caso particolare per Explorer, un oggetto a cui siano stati fissati l'altezza e la larghezza o anche la posizione, come ad esempio un layer;
2. onScroll: attivato quando si effettua lo scrolling della pagina sia col mouse con i tasti PGUP e PGDOWN o anche con il metodo doScroll.

[modifica] Tag di applicazione

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, Hn, HR, I, IMG, INPUT type=button, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, window, XMP

[modifica] Eventi legati a particolari bottoni

1. onSubmit: Questo handler è attivato dal click su tasto di Invio di un form;
2. onReset: questo handler è attivato dal click su tasto di Annulla di un form.

[modifica] Tag di applicazione

Handler applicabile solamente all'oggetto Form.

[modifica] Gestione degli errori

Le versioni più nuove di JavaScript (come quelle usate in Internet Explorer 5 e Netscape 6) includono la possibilità di un costrutto try ... catch per la gestione degli errori.

Il costrutto try ... catch ... finally intercetta le eccezioni generate da un errore o da un'istruzione throw. La sua sintassi è la seguente:

  try
  {
     // Istruzioni in cui possono essere lanciate delle eccezioni
  }
  catch(error)
  {
     // Istruzioni da eseguire in caso di eccezione
  }
  finally
  {
     // Istruzioni da eseguire successivamente in entrambe i casi
  }

Inizialmente, vengono eseguite le istruzioni all'interno del blocco try. Se viene lanciata un'eccezione, il flusso di controllo dello script viene passato immediatamente alle istruzioni del blocco catch, con l'eccezione che viene resa disponibile come argomento error. In caso contrario, il blocco catch viene saltato. Una volta che il blocco catch è concluso, o il blocco try viene eseguito fino alla fine senza che sia lanciata alcuna eccezione, vengono eseguite le istruzioni nel blocco finally.

[modifica] Usi frequenti nei browser web

JavaScript può essere usato per ogni aspetto dello scripting lato client di un browser web, ma alcuni usi si sono diffusi più di altri. Esempi frequenti includono il rimpiazzo delle immagini, la creazione di finestre pop-up, e la validazione del contenuto delle form.

Nella maggior parte dei browser moderni, il seguente pezzetto di codice XHTML mostra un modo con cui un'immagine può essere scambiata con un'altra quando l'utente muove il cursore su di essa (è chiamato spesso effetto rollover o mouse over). Comunque comportamenti simili possono essere ottenuti anche usando solo i CSS.

<img src = "normal.png"
     onclick     = "window.location.href='http://en.wikipedia.org/'"
     onmouseover = "this.src='rollover.png'"
     onmouseout  = "this.src='normal.png'" />

[modifica] Filiazioni

Un nuovo esempio di uso di JavaScript sono i Bookmarklet, piccole sezioni di codice all'interno dei segnalibri o Preferiti dei browser web.

Il linguaggio di programmazione usato in Macromedia Flash (chiamato ActionScript) ha una forte somiglianza con JavaScript, dovuta alla loro relazione condivisa con ECMAScript. ActionScript ha quasi la stessa sintassi di JavaScript, ma il modello a oggetti è decisamente diverso.

JavaScript for OSA (JavaScript OSA, or JSOSA), è un linguaggio di scripting per Macintosh basato sull'implementazione JavaScript 1.5 di Mozilla. È un componente freeware reso disponibile da Late Night Software. L'interazione con il sistema operativo e con le applicazioni di terze parti è gestita tramite un oggetto MacOS. A parte ciò, il linguaggio è virtualmente identico all'implementazione Mozilla. È stato proposto come alternativa al più usato linguaggio AppleScript.

[modifica] Altri Progetti

• Wikibooks contiene testi o manuali su JavaScript

[modifica] Bibliografia

• Michel Dreyfus: JavaScript (Addison Wesley Longman Italia - 2002)
• David Flanagan: Javascript versione 1.5 (Apogeo - 2002)
• Emily A. Vander Veer: JavaScript (con CD-ROM) (Apogeo - 2001)
• Roberto Abbate: Imparare Javascript (Edizioni Master - 2006)

[modifica] Voci correlate

• CorbaScript
• LiveConnect
• DHTML
• Prototype JavaScript Framework

[modifica] Collegamenti esterni

• Specifiche
  • (EN) ECMA 262 ECMAScript Language Specification
  • (EN) Proposal for Javascript 2.0
  • (EN) Reference for JavaScript 1.5
  • (EN) Reference for JavaScript 1.4
  • (EN) Reference for JavaScript 1.3
  • (EN) Reference for JavaScript 1.2
  • (EN) Guide for JavaScript 1.1 as used by Navigator 3.x
• Storia
  • (EN) Innovators of the Net: Brendan Eich and JavaScript (Marc Andreesen, Netscape TechVision, 24 Jun 1998)
  • (EN) Brendan Eich and JavaScript (about.com)
• Tutorial
  • Javascript Tutorials (EN)
  • Most Popular Javascript Tutorials (EN)
  • Guide, articoli, faq, raccolte script su JavaScript da HTML.it
  • (ES) Esempi del Javascript
  • (IT) Esempi del Javascript
• Risorse
  • (EN) JsDir
• Cooperazione con...
  • (EN) PHP
  • (EN) TCL
  • (EN) Perl
• Giochi
  • Mahjongg Solitario gioco popolare scritto in Javascript
• Abilitazione
  • Manuale - Breve spiegazione di come abilitare i JavaScript nei vari browser e sistemi operativi

• Portale Informatica: accedi alle voci di Wikipedia che parlano di informatica