Movatterモバイル変換

[0]ホーム
URL:

Vai al contenuto
WikipediaL'enciclopedia libera
Ricerca

JavaScript

Da Wikipedia, l'enciclopedia libera.
JavaScript
linguaggio di programmazione
Logo del linguaggio
AutoreBrendan Eich
Data di origine4 dicembre 1995
Ultima versioneECMAScript 2024 (giugno 2024) e ECMAScript 2025 (27 marzo 2024)
ParadigmiProgrammazione a eventi e a oggetti, funzionale
Tipizzazionedebole
Estensioni comunijs e mjs
Influenzato daScheme,Self,Java,C,Python,Awk,HyperTalk
Ha influenzatoActionScript,AtScript,CoffeeScript,Dart,JScript .NET,Objective-J,QML,TypeScript,LiveScript
Implementazione di riferimento
ImplementazioneKJS,Rhino,SpiderMonkey,V8,Presto,Chakra
Sito webwww.ecma-international.org/publications-and-standards/standards/ecma-262/
Modifica dati su Wikidata ·Manuale

IninformaticaJavaScript è unlinguaggio di programmazione multi paradigmaorientato aglieventi, utilizzato sia nellaprogrammazionelato client web sialato server (Node.js) per la creazione di RESTful API, applicazioni desktop ed embedded,siti web eapplicazioni web, di effetti dinamiciinterattivi tramitefunzioni discript invocate daeventi innescati a loro volta in vari modi dall'utente sullapagina web in uso (mouse,tastiera, caricamento della pagina ecc...).

Originariamente sviluppato daBrendan Eich dellaNetscape Communications con il nome di Mocha e successivamente di LiveScript, in seguito è stato rinominato "JavaScript" ed è stato formalizzato con unasintassi più vicina a quella del linguaggioJava diSun Microsystems (che nel 2010 è stata acquistata daOracle).Standardizzato per la prima volta il 1997 dallaECMA con il nomeECMAScript, l'ultimo standard, di giugno 2022, è ECMA-262 Edition 13[1] ed è anche uno standardISO (ISO/IEC 16262).

Descrizione

[modifica |modifica wikitesto]

Le funzioni di script, utilizzati dunque nellalogica di presentazione, possono essere opportunamente inserite infileHTML, in pagineJSP o in appositi file separati conestensione.js poi richiamati nellalogica di business. Ultimamente il suo campo di utilizzo è stato esteso alle cosiddetteHybrid App (app ibride), con le quali è possibile creareapp per piùsistemi operativi utilizzando un unicocodice sorgente basato appunto su JavaScript,HTML eCSS.

Java, JavaScript e JScript

[modifica |modifica wikitesto]

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 browserNetscape Navigator.[2] 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 dallinguaggio C); le loro semantiche sono piuttosto diverse e in particolare i loroobject model non hanno relazione e sono notevolmente incompatibili.

Dato il successo di JavaScript come linguaggio per arricchire lepagine web,Microsoft sviluppò un linguaggio compatibile, conosciuto comeJScript. La necessità di specifiche comuni fu alla base dello standard ECMA 262 perECMAScript, di cui sono state pubblicate otto edizioni da quando il lavoro iniziò, nel novembre 1996[3].

Aspetti strutturali

[modifica |modifica wikitesto]

Le caratteristiche principali di JavaScript sono:

Altri aspetti di interesse: in JavaScript lato client, il codice viene eseguito direttamente sulclient e non sulserver. Il vantaggio di questo approccio è che, anche con la presenza discript particolarmente complessi, ilweb server non rischia sovraccarichi, dato che il lavoro viene svolto dal client. Un rovescio della medaglia è che, nel caso di script particolarmente grandi, il tempo per il trasferimento dalla rete può diventare eccessivamente lungo. Inoltre ogni informazione che presuppone un accesso a dati memorizzati in unabase di dati remota deve essere rimandata a un linguaggio che effettui materialmente latransazione, per poi restituire i risultati a una o più variabili JavaScript; operazioni del genere richiedono un nuovo caricamento della pagina stessa. Questi limiti sono però stati superati in buona parte con la nascita diAJAX.

Alcune altre caratteristiche di JavaScript degne di nota:

Incompatibilità

[modifica |modifica wikitesto]

Le varie implementazioni di JavaScript, come già accaduto per HTML, spesso non sono conformi agli standard, ma piuttosto sono costruite per funzionare con uno specifico browser web e con un insieme di versioni specifiche degli stessi. L'attuale standardECMAScript dovrebbe essere teoricamente la base di tutte le implementazioni JavaScript, ma in pratica i browserMozilla (eNetscape) usanoJavaScript,Microsoft Internet Explorer usaJScript, e altri browser comeOpera eSafari usano altre implementazioniECMAScript, spesso con ulteriori caratteristiche non standard, per permettere lacompatibilità 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 dovere sopperire a tali problemi durante la scrittura delsoftware. 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, soprattutto se in versioni recenti.

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 o in una diversa versione dello stesso browser. Come con l'HTML, è quindi raccomandabile scrivere codice conforme agli standard. Negli anni sono state realizzate varie librerie e framework, che possono essere usate per semplificare la scrittura di codice JavaScript che funzioni correttamente indipendentemente dal browser usato. Una delle librerie più conosciute e diffuse per semplificare la scrittura di semplici script all'interno di pagine HTML oPHP èjQuery, mentre esistono numerosi framework per scrivere applicativi in JavaScript anche estremamente sofisticati (lato client e/o lato server) ignorando del tutto la necessità di riconoscere quale browser utilizzerà l'utente finale.

Esistono due tecniche principali per gestire le incompatibilità:browser sniffing (lett."annusare il browser") eobject detection (lett."rilevazione dell'oggetto"). Quando esistevano solo due browser che supportavano lo scripting, ovvero Netscape e Internet Explorer, ilbrowser 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. in seguito le tecniche disniffing divennero più difficili da implementare, dato che Internet Explorer cominciò a dissimulare le proprie informazioni, 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, ilbrowser 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 controllo dell'esistenza della proprietà di un oggetto.

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

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

In questo caso, l'espressionedocument.body.style normalmente causerebbe un errore in un browser che non ha la proprietàdocument.body, ma l'uso dell'operatore&& assicura chedocument.body.style non venga mai chiamato sedocument.body non esiste. Il test sfrutta questa particolarità della valutazione di espressioni logiche, chiamatalazy evaluation (lett."valutazione pigra").

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

Lo stesso argomento in dettaglio:Interprete JavaScript.

A differenza di altri linguaggi, quali il C o il C++, che permettono la scrittura diprogrammi completamente stand-alone, JavaScript viene utilizzato soprattutto comelinguaggio di scripting, integrato, ovvero all'interno di altro codice.

L'idea di base è che ilprogramma ospite (quello che ospita ed esegue lo script) fornisca allo script un'API ben definita, che consente l'accesso a operazioni specifiche, la cui implementazione è a carico delprogramma ospite stesso. Lo script, quando eseguito, utilizza riferimenti a questa API per richiedere (alprogramma ospite) l'esecuzione di operazioni specifiche, non previste dai costrutti del linguaggio JavaScript in sé. Tale meccanismo viene adottato anche in linguaggi quale ilC oJava, nel quale il programma si affida a dellelibrerie, non previste dal linguaggio in sé, che permettono di effettuare operazioni quali l'I/O o l'esecuzione di chiamate a funzioni di sistema.

L'esempio tipico (e, forse, il più noto e comune) diprogramma ospite per uno script JavaScript è quello delbrowser. Un browser moderno incorpora normalmente uninterprete JavaScript. Quando viene visitata unapagina web che contiene codice JavaScript, quest'ultimo viene eseguito dall'interprete contenuto nel browser. Le interfacce che consentono a JavaScript di rapportarsi con un browser sono chiamateDOM (Document Object Model). Molti siti web usano la tecnologia JavaScript lato client per creare potentiapplicazioni webdinamiche.

Un uso principale del JavaScript in ambitoWeb è la scrittura di piccole funzioni integrate nelle pagineHTML, che interagiscono con il DOM del browser per compiere determinate azioni non possibili con il soloHTML statico: controllare i valori nei campi di input, nascondere o visualizzare determinati elementi, ecc. Sfortunatamente, gli standard DOM imposti dalW3C non sempre vengono rispettati in modo coerente e omogeneo da tutti. Browser diversi, a seconda del loromotore di rendering, espongono diversi oggetti o metodi allo script, perciò spesso è necessario implementare controlli aggiuntivi a una funzione JavaScript, per garantirne la compatibilità con ciascun browser e persino in funzione delle varie versioni del medesimo browser.

Al di fuori del Web, interpreti JavaScript sono integrati in diverse applicazioni.Adobe Acrobat eAdobe Reader supportano JavaScript neifilePDF. La piattaformaMozilla, 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 tecnologiaWindows Script Host diMicrosoft supporta JavaScript (viaJScript), un linguaggio di scripting per isistemi 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:

Utilizzo in HTML

[modifica |modifica wikitesto]
Tag script (HTML)
[modifica |modifica wikitesto]

Per inserire uno script in una pagina HTML, è necessario l'utilizzo del tagscript. Questo tag non è parte del linguaggio JavaScript in sé, serve solo come "contenitore" all'interno di una pagina HTML.

<script>// <![CDATA[JavaScriptstatements...// ]]></script>

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

<script>...</script>
Esempio: Hello world!
[modifica |modifica wikitesto]

Il seguente esempio visualizza un messaggio di avviso con all'interno scritto "Hello world".

<script>alert('Hello world');</script>

Per "scrivere" direttamente nella pagina HTML:

<script>document.write('Hello world');</script>

Iltipo MIME per il codice sorgente JavaScript source code èapplication/javascript, ma è più usatotext/javascript, anche se non standard.

Per integrare del codice JavaScript in un documento HTML, bisogna farlo precedere da</script>.

Browser più vecchi tipicamente richiedono che il codice inizi 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>

(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 possono contenere eventi intrinseci che possono essere associati a gestori specificati da uno script. Per scrivere del codice HTML 4.01 valido, il server 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

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

Usi frequenti nei web browser

[modifica |modifica wikitesto]

JavaScript può essere usato per ogni aspetto dello scripting latoclient di unweb browser, ma alcuni usi si sono diffusi più di altri. Tra gli esempi ricorrenti vi sono la sostituzione di immagini, la creazione di finestrepop-up e la convalida dei dati inseriti inform. Nella maggior parte dei browser, il seguente frammento di codiceXHTML mostra un modo con cui un'immagine può essere sostituita con un'altra quando l'utente muove ilcursore su di essa. Tale effetto è chiamato spessorollover omouse over. Comunque comportamenti simili possono essere ottenuti ancheusando solo i CSS.

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

Filiazioni

[modifica |modifica wikitesto]

Un nuovo esempio di uso di JavaScript sono iBookmarklet, piccole sezioni di codice all'interno deisegnalibri oPreferiti dei browser web. Il linguaggio di programmazione usato inMacromedia Flash (chiamatoActionScript) ha una forte somiglianza con JavaScript, dovuta alla loro relazione condivisa conECMAScript. ActionScript ha quasi la stessa sintassi di JavaScript, ma il modello a oggetti[7] è decisamente diverso.

JavaScript for OSA (JavaScript OSA, or JSOSA), è un linguaggio di scripting perMacintosh basato sull'implementazione JavaScript 1.5 diMozilla[8]. È un componentefreeware reso disponibile daLate Night Software. L'interazione con il sistema operativo e con le applicazioni di terze parti è gestita tramite un oggettoMacOS. A parte ciò, il linguaggio è virtualmente identico all'implementazione Mozilla. È stato proposto come alternativa al più usato linguaggioAppleScript.

Elementi del linguaggio

[modifica |modifica wikitesto]

Variabili

[modifica |modifica wikitesto]

Levariabili sono in genere tipizzate dinamicamente ovvero sono definite semplicemente assegnando loro un valore oppure usando il comandolet,che permette di modificare la variabile, o dal comando const (constant) che indica che la variabile non può essere modificata; quelle dichiarate fuori da qualunque funzione sono in visibilità "globale" ovvero accessibili dall'interapagina web; quelle dichiarate dentro una funzione sono invece locali ovvero interne per quella funzione.Per passare variabili da una pagina all'altra, uno sviluppatore può impostare uncookie o usare un frame nascosto o una finestra in background per memorizzarli.

Oggetti

[modifica |modifica wikitesto]

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 è unvettore associativo simile agli hash inPerl eRuby, o ai dizionari inPython,PostScript eSmalltalk.

JavaScript ha diversi generi di oggetti predefiniti, in particolareArray,Boolean (booleani),Date (oggetti contenenti una data e un'ora),Function (funzioni),Math (oggetto contenente funzioni di uso nel calcolo matematico),Number (numeri),Object (oggetti),RegExp (espressioni regolari) eString (stringhe). Altri oggetti sono gli "oggetti ospiti", definiti non dal linguaggio ma dall'ambiente di esecuzione. In un browser, i tipici oggetti ospite appartengono alDOM:window (finestra),form (maschera),link (collegamento) ecc.

Definendo uncostruttore, è possibile definire oggetti. JavaScript è un linguaggio orientato a oggetti basato su prototipi. Ciò significa che l'eredità è fra oggetti, non fraclassi (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

// costruttorefunctionMyObject(attributeA,attributeB){this.attributeA=attributeA;this.attributeB=attributeB;}// crea un Oggettoobj=newMyObject('red',1000);// accede a un attributo di objalert(obj.attributeA);// accede a un attributo con la notazione del vettore associativoalert(obj["attributeA"]);

Simulare l'ereditarietà

[modifica |modifica wikitesto]

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

functionBase(){this.Override=_Override;this.BaseFunction=_BaseFunction;function_Override(){alert("Base::Override()");}function_BaseFunction(){alert("Base::BaseFunction()");}}functionDerive(){this.Override=_Override;function_Override(){alert("Derive::Override()");}}Derive.prototype=newBase();d=newDerive();d.Override();d.BaseFunction();

risulterà nell'output:

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

Oggetti predefiniti

[modifica |modifica wikitesto]

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

Array

[modifica |modifica wikitesto]

Un array è un'associazione tra interi e valori di tipo arbitrario. In JavaScript, tutti gli oggetti possono associare interi e valori, ma gli array sono un tipo speciale di oggetti che hanno dei comportamenti specifici e metodi specializzati per l'uso degli indici interi (per es.,join,slice, epush).

Gli array 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.

Con gli elementi degli array si può utilizzare 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(1) (sintassi errata, ammessa unicamente da Internet Explorer)myArray["01"] (non è lo stesso dimyArray[1])

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

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)

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

Strutture di controllo e condizionali

[modifica |modifica wikitesto]

La struttura di controllo IF corrisponde in italiano a SE

L'istruzione contenuta all'interno delle parentesi graffe verrà eseguita solo e soltanto se la condizione restituisce il valore true (vero),altrimenti verrà eseguita l'istruzione contenuta nell'ELSE.

if (condizione)  {     istruzioni;  }
if (condizione)  {     istruzioni;  }else  {     istruzioni;  }
while (condizione)  {     istruzioni;  }

Ciclo do ... while

[modifica |modifica wikitesto]
do  {     istruzioni;  }while (condizione);
for ([espressione iniziale]; [condizione]; [espressione di incremento])  {     istruzioni;  }

Ciclo for ... in

[modifica |modifica wikitesto]

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

for (variabilein oggetto)  {     istruzioni;  }

Ciclo for ... of

[modifica |modifica wikitesto]

Questo ciclo percorre tutti i valori di un oggetto (o gli elementi di un vettore).

for (variabileof oggetto)  {     istruzioni;  }

Istruzione switch

[modifica |modifica wikitesto]
switch (espressione)  {case valore1:        istruzioni;break;case valore2:        istruzioni;break;default :        istruzioni;  }

Funzioni

[modifica |modifica wikitesto]

Unafunzione è un blocco diistruzioni, dotato di una lista di argomenti (eventualmente vuota) e che può avere un nome (anche se non è necessario). Una funzione può restituire un valore tramite l'istruzionereturn.

function(può essere vuoto)  {     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 (in altre parole, il numero diparametri formali non deve necessariamente essere rispettato all'atto dell'invocazione della funzione cioè nella specifica deiparametri attuali). All'interno della funzione ci si può riferire alla lista degli argomenti anche tramite il vettorearguments (quest'ultimo possiede la proprietàcallee rappresentante un puntatore alla funzione stessa).

Ogni funzione è un'istanza diFunction, 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

Interazione con l'utente

[modifica |modifica wikitesto]

Tra le altre tecniche con le quali uno script JavaScript può interagire con l'utente all'interno di una pagina Web, ci sono le seguenti:

Nota: i dialog box non funzionano col browser Opera; non vi è nessun errore, semplicemente non vengono eseguite.

Metodi di scrittura a video (Standard Output)

[modifica |modifica wikitesto]

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 concatenazione '+':

<html><head><scripttype="text/javascript"><!--Nascondeloscriptaibrowserobsoleti// Questa funzione genera una riga orizzontale della larghezza scelta.functionbar(widthPct){document.write("<hr align='left' width='"+widthPct+"%' />");}// Questa funzione genera del testo preceduto da un titolo di dato livello.functionoutput(headLevel,headText,text){document.write("<h"+headLevel+">"+headText+"</h"+headLevel+"><p>"+text+"</p>");}// Fine del codice da nascondere --></script></head><body><scripttype="text/javascript"><!--Nascondeloscriptaibrowserobsoletibar(25)output(2,"JavaScript Rules!","Usare JavaScript è facile...")// Fine del codice da nascondere --></script><p>QuestoènormaleHTML,adifferenzadiquellogeneratodalcodicesopra.</p></body></html>

Eventi

[modifica |modifica wikitesto]

Gli elementi di testo possono essere la fonte di varieventi che possono avviare un'azione se è stato registrato ungestore 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

Eventi attivabili dai tasti del mouse

[modifica |modifica wikitesto]

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.

Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi attivabili dai movimenti del mouse

[modifica |modifica wikitesto]

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.
Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi attivabili dal trascinamento del mouse (drag and drop)

[modifica |modifica wikitesto]

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 trascina un oggetto su un obiettivo valido a 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;
Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi attivabili dall'utente con la tastiera

[modifica |modifica wikitesto]

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;

Eventi attivabili dalle modifiche dell'utente

[modifica |modifica wikitesto]

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:

<inputtype="text"value="Enter email address"name="userEmail"onChange=validateInput(this.value)/><scripttype="text/javascript">this.myForm.userEmail.focus();this.myForm.userEmail.select();functionvalidateInput(){userInput=newString();userInput=this.myForm.userEmail.value;if(userInput.match("@"))alert("Thanks for your interest.");elsealert("Please check your email details are correct before submitting");}</script>

Attivato quando si modifica un elemento in una base di dati, per questa sua caratteristica ha un uso non propriamente legato a JavaScript;

onPropertyChange
[modifica |modifica wikitesto]

Evento attivato quando cambia la proprietà di un elemento;

onReadyStateChange
[modifica |modifica wikitesto]

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

Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi legati al "fuoco"

[modifica |modifica wikitesto]

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

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<inputtype="text"value=""name="userEmail"onBlur=addCheck()><scripttype="text/javascript">functionaddCheck(){alert("Please check your email details are correct before submitting")}</script>

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;

Si attiva quando si inizia a selezionare un evento;

onbeforeEditFocus
[modifica |modifica wikitesto]

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

Si attiva quando un oggetto perde la cattura del mouse.

Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi attivabili dal caricamento degli oggetti

[modifica |modifica wikitesto]

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

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

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

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

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. Opera non gestisce questo evento, ormai obsoleto: per una corretta gestione degli errori si utilizza il costrutto try... catch;

onBeforeUnload
[modifica |modifica wikitesto]

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

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.

Tag di applicazione
[modifica |modifica wikitesto]
  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.

Eventi attivabili dai movimenti delle finestre

[modifica |modifica wikitesto]

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.
Tag di applicazione
[modifica |modifica wikitesto]

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

Eventi legati a particolari bottoni

[modifica |modifica wikitesto]
  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.
Tag di applicazione
[modifica |modifica wikitesto]

Handler applicabile solamente all'oggetto Form.

Gestione degli errori

[modifica |modifica wikitesto]

Le versioni più nuove di JavaScript (a partire da quelle usate inInternet Explorer 5 eNetscape 6) incorporano la possibilità di un costruttotry... catch per lagestione degli errori.

Il costruttotry ... catch ... finally intercetta leeccezioni generate da un errore o da un'istruzionethrow. 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 entrambi i casi}

Inizialmente, vengono eseguite le istruzioni all'interno del bloccotry. 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 argomentoerror. In caso contrario, il bloccocatch viene saltato. Una volta che il bloccocatch è concluso, o il bloccotry viene eseguito fino alla fine senza che sia lanciata alcuna eccezione, vengono eseguite le istruzioni nel bloccofinally.

Integrazione con HTML5

[modifica |modifica wikitesto]

Con la nascita di HTML5 JavaScript ha acquisito diverse novità[9]:

Riconoscimento vocale

[modifica |modifica wikitesto]

L'utente può parlare all'interno di un form anziché scrivere:

<inputtype="text"x-webkit-speech/>varrecognition=newSpeechRecognition();varspeechRecognitionList=newSpeechGrammarList();

Notifiche di sistema

[modifica |modifica wikitesto]
La pagina web può contenere altri tipi di elementi grafici come questi. Non si tratta di notifiche di sistema.

Le notifiche di sistema sono progettate per richiedere l'attenzione dell'utente, mostrando un breve messaggio anche al di fuori della pagina corrente o anche se il browser non è al momento in primo piano. Data la loro potenziale invasività, è possibile utilizzarle solo se il sito ha già ottenuto dall'utente uno specifico consenso.[10][11]

Le notifiche di sistema, come suggerisce il nome, sono integrate coerentemente al dispositivo corrente (su desktop è spesso unpop-up, su mobile è spesso nella barra di notifica, etc.).[10][11]

Segue un esempio minimale con due pulsanti, per richiedere i permessi per le notifiche di sistema e per visualizzarne una.

<buttonid="btn-asking">Richiedi permessi</button><buttonid="btn-notify">Mostra notifica</button><script>// ricerca pulsantivarbtnAsking=document.getElementById('btn-asking');varbtnNotify=document.getElementById('btn-notify');// dopo il click lancia la richiesta di permessibtnAsking.addEventListener('click',function(){Notification.requestPermission();});// dopo il click mostro una notificabtnNotify.addEventListener('click',function(){newNotification("Nuova notifica!");});</script>

L'approfondimento della documentazione ufficiale permette di effettuare ulteriori buone pratiche, fra le quali:

  • verifica del supporto (per esempioSafari suiOS è noto per non aver raggiunto un ottimo supporto)[11][12]
  • rispetto del consenso pregresso (evitare di richiedere molteplici richieste di consenso)
  • rispetto del dissenso (evitare di tentare l'apertura di notifiche se non c'è consenso)

Il lancio della richiesta di permessi dovrebbe avvenire solo a seguito di una interazione con l'utente (come il click di un pulsante). Molti browser moderni proibiscono persino l'apertura del pop-up della richiesta di consenso per le notifiche native se non c'è stata interazione.[11]

Contenuto editabile

[modifica |modifica wikitesto]

Possibilità per l'utente di modificare la pagina web come se si trovasse all'interno di un editorWYSIWYG, anche se le modifiche non saranno salvate nella reale pagina web remota ma solo visibili nel browser dell'utente:

<divcontenteditable="true">Questotestoèeditabiledall'utente.</div>document.execCommand("defaultParagraphSeparator",false,"p");

Drag out

[modifica |modifica wikitesto]

Trascinamento di file da una pagina web al computer o altro dispositivo:

<ahref="src/star.mp3"draggable="true"class="dragout"data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>varfiles=document.querySelectorAll('.dragout');for(vari=0,file;file=files[i];++i){file.addEventListener('dragstart',function(e){e.dataTransfer.setData('DownloadURL',this.dataset.downloadurl);},false);}

File System API

[modifica |modifica wikitesto]

Scrivere in modo asincrono un file in unfile system in modalità sandbox utilizzando #"ltr" typeof="mw:Extension/syntaxhighlight" about="#mwt74" data-mw="{"name":"syntaxhighlight","attrs":{"lang":"javascript","line":"1","copy":"1"},"body":{"extsrc":"\nwindow.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {\n fs.root.getFile('log.txt', {create: true}, function(fileEntry) {\n\n fileEntry.createWriter(function(writer) { .\n\n writer.onwrite = function(e) { ... };\n writer.onerror = function(e) { ... };\n\n var bb = new BlobBuilder();\n bb.append('Hello World!');\n\n writer.write(bb.getBlob('text/plain'));\n\n }, opt_errorHandler);\n }\n}, opt_errorHandler);\n"}}">

window.requestFileSystem(window.TEMPORARY,1024*1024,function(fs){fs.root.getFile('log.txt',{create:true},function(fileEntry){fileEntry.createWriter(function(writer){.writer.onwrite=function(e){...};writer.onerror=function(e){...};varbb=newBlobBuilder();bb.append('Hello World!');writer.write(bb.getBlob('text/plain'));},opt_errorHandler);}},opt_errorHandler);

Geolocalizzazione

[modifica |modifica wikitesto]

Possibilità per l'utente di dichiarare a un'applicazione o una pagina web la propria posizione:

if(navigator.geolocation){navigator.geolocation.getCurrentPosition(function(position){varlatLng=newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude);varmarker=newgoogle.maps.Marker({position:latLng,map:map});map.setCenter(latLng);},errorHandler);}

Device Orientation

[modifica |modifica wikitesto]

Riportare dati che indicano cambiamenti all'orientamento del dispositivo in relazione all'attrazione di gravità. In particolare, i dispositivi portatili come i telefoni cellulari possono utilizzare queste informazioni per ruotare automaticamente il display in modo da rimanere in posizione verticale, presentando una vista a tutto schermo del contenuto web quando il dispositivo viene ruotato in modo che la sua larghezza sia maggiore della sua altezza.

window.addEventListener('deviceorientation',function(event){vara=event.alpha;varb=event.beta;varg=event.gamma;},false);

Local Storage, Application Cache e Quota API

[modifica |modifica wikitesto]

Possibilità di navigare in pagine web visualizzate in precedenza anche senza connessione internet:

saveButton.addEventListener('click',function(){window.localStorage.setItem('value',area.value);window.localStorage.setItem('timestamp',(newDate()).getTime());},false);textarea.value=window.localStorage.getItem('value');
<htmlmanifest="cache.appcache">window.applicationCache.addEventListener('updateready',function(e){if(window.applicationCache.status==window.applicationCache.UPDATEREADY){window.applicationCache.swapCache();if(confirm('A new version of this site is available. Load it?')){window.location.reload();}}},false);

Web SQL Database

[modifica |modifica wikitesto]

Nuove funzioni integrate conSQL:

vardb=window.openDatabase("DBName","1.0","description",5*1024*1024);//5MBdb.transaction(function(tx){tx.executeSql("SELECT * FROM test",[],successCallback,errorCallback);});

Indexed DB

[modifica |modifica wikitesto]

Questa API utilizza gli indici per abilitare le ricerche ad alte prestazioni dei dati. Sebbene l'archiviazione web sia utile per archiviare quantità minori di dati, è meno utile per archiviare quantità maggiori di dati strutturati. IndexedDB fornisce una soluzione.

varidbRequest=window.indexedDB.open('Database Name');idbRequest.onsuccess=function(event){vardb=event.srcElement.result;vartransaction=db.transaction([],IDBTransaction.READ_ONLY);varcurRequest=transaction.objectStore('ObjectStore Name').openCursor();curRequest.onsuccess=...;};
webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY,function(used,remaining){console.log("Used quota: "+used+", remaining quota: "+remaining);});webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT,10*1024*1024,function(used){console.log("Used quota: "+used+", remaining quota: "+remaining);});

Web Workers

[modifica |modifica wikitesto]
Lo stesso argomento in dettaglio:Web worker.

Aumentano le prestazioni della pagina web:

varworker=newWorker('task.js');worker.onmessage=function(event){alert(event.data);};worker.postMessage('data');

task.js:

self.onmessage=function(event){// Do some work.self.postMessage("recv'd: "+event.data);};

Web Socket

[modifica |modifica wikitesto]
Lo stesso argomento in dettaglio:WebSocket.

Comunicazione bidirezionale full-duplex sul Web: sia il server che il client possono inviare dati in qualsiasi momento o anche contemporaneamente. Vengono inviati solo i dati stessi, senza il sovraccarico delle intestazioni HTTP, riducendo drasticamente lalarghezza di banda.

varsocket=newWebSocket('www.sito.it');socket.onopen=function(event){socket.send('Ciao');};socket.onmessage=function(event){alert(event.data);}socket.onclose=function(event){alert('chiuso');}

Pagine web a tutto schermo

[modifica |modifica wikitesto]
if(elem.webkitRequestFullScreen){elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);}elseif(elem.mozRequestFullScreen){elem.mozRequestFullScreen();}elseif(elem.requestFullScreen){elem.requestFullScreen();}
:full-screen-ancestor:root{overflow:hidden;}:full-screen-ancestor{z-index:auto;transform:none;transition:none;}pre:full-screen{background-color:white;}

Nuovi selettori (API DOM)

[modifica |modifica wikitesto]
varel=document.getElementById('section1');el.focus();varels=document.getElementsByTagName('div');els[0].focus();varels=document.getElementsByClassName('section');els[0].focus();varels=document.querySelectorAll("ul li:nth-child(odd)");vartds=document.querySelectorAll("table.test > tr > td");varel=document.querySelector("table.test > tr > td");

Attributi personalizzabili

[modifica |modifica wikitesto]
<divid="out"data-id="good"data-name="joe"data-screen-name="user1"></div>varel=document.querySelector('#out');el.setAttribute('data-foo','bar');varhtml=[];for(varkeyinel.dataset){html.push(key,': ',el.dataset[key],'<br>');}el.innerHTML=html.join('');

Output:

id: good

name: joe

screenName: user1

foo: bar

Element.classList

[modifica |modifica wikitesto]

L'utilizzoclassList è un'alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata da spazi tramiteelement.className.

<divid="main"class="shadow rounded"></div>
varel=document.querySelector('#main').classList;el.add('highlight');el.remove('shadow');el.toggle('highlight');console.log(el.contains('highlight'));// falseconsole.log(el.contains('shadow'));// falseconsole.log(el.classList.toString()==el.className);

output:

<divid="main"class="rounded"></div>

History API

[modifica |modifica wikitesto]

Offre la possibilità di modificare l'URL di un sito Web senza un aggiornamento completo della pagina. Ciò è utile per caricare parti di una pagina con JavaScript in modo tale che il contenuto sia notevolmente diverso e garantisca un nuovo URL.

link.addEventListener('click',function(event){history.pushState('Contact Page Form','Contact Page','/contact');});window.addEventListener('popstate',function(event){document.querySelector('h1').innerHTML=event.state;});
webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY,function(used,remaining){console.log("Used quota: "+used+", remaining quota: "+remaining);});webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT,10*1024*1024,function(used){console.log("Used quota: "+used+", remaining quota: "+remaining);});

JS nel web 3D

[modifica |modifica wikitesto]
Lo stesso argomento in dettaglio:Web 3DeWebGL.

JavaScript comprende librerie e framework per creare interfacce 3D sul web[13].

Esempio di WebGL
Esempio di WebGL
functionmain(){constcanvas=document.querySelector("#glCanvas");constgl=canvas.getContext("webgl");if(gl===null){alert("Aggiorna il tuo browser");return;}gl.clearColor(0.0,0.0,0.0,1.0);gl.clear(gl.COLOR_BUFFER_BIT);}window.onload=main;

Alternative

[modifica |modifica wikitesto]
Lo stesso argomento in dettaglio:HTML5eCSS.

Con la nascita diHTML 5 e CSS 3 alcune possibilità come la creazione di[14][15][16][17][18][19][20]:

  • gallerie/slide di immagini e video
  • tooltip
  • menu di navigazione a tendina, a tabulazione,accordion etoggle
  • effetti al passaggio delmouse sul testo, suilink e sulle immagini
  • Navigazione "sticky" (si può permettere ad un elemento di rimanere fisso anche se la pagina scorre)
  • Scorrimento orizzontale dei contenuti senza le barre di scorrimento del browser
  • Barre di caricamento progressive
  • Widget
  • drag and drop
  • Calcolatrici

possono essere attuate senza l'utilizzo di JavaScript, cosa che con HTML 4 e CSS 2 era spesso impossibile fare[14].

Esempi di UI JavaScript

[modifica |modifica wikitesto]
Lo stesso argomento in dettaglio:jQuery,jQuery UIeTooltip.

Note

[modifica |modifica wikitesto]
  1. ↑ECMA-262 13th Edition, su262.ecma-international.org.
  2. ↑(EN)A Brief History of JavaScript, suAuth0 - Blog.URL consultato il 28 febbraio 2020.
  3. ↑Standard ECMA-262, suecma-international.org.
  4. ↑ David Flanagan,JavaScript - La guida, Milano, Apogeo, 2000, p.1,ISBN 88-7303-627-9.
  5. ↑ David Flanagan,JavaScript - La guida, Milano, Apogeo, 2000, p.53,ISBN 88-7303-627-9.
  6. ↑ David Flanagan,JavaScript - La guida, Milano, Apogeo, 2000,ISBN 88-7303-627-9.
  7. ↑Flex Quick Start - Defining data models | Adobe Developer Connection, suadobe.com.URL consultato il 28 febbraio 2020.
  8. ↑(EN) Matt Neuburg,AppleScript: The Definitive Guide: Scripting and Automating Your Mac, "O'Reilly Media, Inc.", 4 gennaio 2006,ISBN 978-1-4493-7915-5.URL consultato il 28 febbraio 2020.
  9. ↑slide, sugithub.com.
  10. 12(EN)Using the Notifications API, sudeveloper.mozilla.org.URL consultato il 23 giugno 2022.
  11. 1234(EN)Notification.permission, sudeveloper.mozilla.org.URL consultato il 23 giugno 2022.
  12. ↑(EN)Notification API: requestPermission, sucaniuse.com.URL consultato il 23 giugno 2022.
  13. ↑(EN)20 Interactive 3D JavaScript Libraries & Frameworks – Bashooka, subashooka.com, 30 maggio 2019.URL consultato il 18 febbraio 2021.
  14. 12(EN)5 things you can do with CSS instead of JavaScript, suLogRocket Blog, 29 ottobre 2019.URL consultato il 9 febbraio 2021.
  15. ↑(EN)49 CSS Galleries, suFree Frontend.URL consultato il 9 febbraio 2021.
  16. ↑LiveCode - HTML5 - Calculator App Demo, sulivecode.com.URL consultato il 9 febbraio 2021.
  17. ↑ Andrea Pacchiarotti,Menù responsivo in HTML e CSS senza JavaScript e jQuery, suAndrea pacchiarotti.URL consultato il 9 febbraio 2021.
  18. ↑Come fare un magico, animato Tooltips con CSS, suWeb Design Envato Tuts+.URL consultato il 9 febbraio 2021.
  19. ↑(EN)Using the HTML5 Drag and Drop API, suweb.dev.URL consultato il 9 febbraio 2021.
  20. ↑How To Create a File Upload Button, suw3schools.com.URL consultato il 9 febbraio 2021.

Bibliografia

[modifica |modifica wikitesto]

Voci correlate

[modifica |modifica wikitesto]

Altri progetti

[modifica |modifica wikitesto]

Altri progetti

Collegamenti esterni

[modifica |modifica wikitesto]
Specifiche
Storia
Apprendimento
Strumenti
V · D · M
Browser Internet
CaratteristicheSegnalibri ·Estensioni ·Navigazione privata ·Sincronizzazione
StandardHTML (v5) ·CSS ·DOM ·JavaScript (IndexedDB ·Web storage ·WebAssembly ·WebGL)
ProtocolliHTTP (v2 ·v3 ·Cookies ·HTTPS) ·OCSP ·WebRTC ·WebSocket
Attivi
Basati suBlinkAvast Secure Browser ·Blisk ·Brave ·Chrome ·Chromium ·Cốc Cốc ·Dragon ·Edge ·Epic ·Falkon ·Kinza ·Maxthon ·Opera ·Otter ·Puffin ·SalamWeb ·Samsung Internet ·Silk ·Sleipnir ·Sputnik ·SRWare ·Torch ·UC ·Vivaldi ·Whale ·Yandex
Basati suGeckoFirefox(per Android) ·GNU IceCat ·IceDragon ·K-Meleon ·PirateBrowser ·SeaMonkey ·SlimBrowser ·TenFourFox ·Tor ·Waterfox
Basati suWebKitDolphin ·Dooble ·Firefox per iOS ·GNOME Web ·iCab ·Konqueror ·Midori ·Safari ·surf ·WebPositive
Altro360 ·Avant ·Basilisk ·Cake Browser ·CM Browser ·eww ·Links ·Lunascape ·Lynx ·NetFront ·NetSurf ·Pale Moon ·QQ browser ·qutebrowser ·w3m ·WebbIE
Inattivi
Basati suBlinkBeaker ·Citrio ·Flock ·Redcore ·RockMelt ·SalamWeb ·Sputnik ·Torch
Basati suGeckoBeonex Communicator ·Camino ·Classilla ·Conkeror ·Galeon ·Ghostzilla ·Kazehakase ·Kylo ·Lotus ·MicroB ·Minimo ·Mozilla suite ·Pogo ·Strata ·Swiftfox ·Swiftweasel ·Timberwolf ·xB
Basati suTridentAOL ·Deepnet ·GreenBrowser ·Internet Explorer ·MediaBrowser ·MenuBox ·NeoPlanet ·NetCaptor ·SpaceTime ·UltraBrowser ·ZAC
Basati suWebKitArora ·BOLT ·Opera Coast ·Flock ·Fluid ·Google TV ·Iris ·Mercury ·OmniWeb ·Origyn ·QtWeb ·rekonq ·RockMelt ·Shiira ·Steel ·Browser for Symbian ·Uzbl ·xombrero
Altroabaco ·Amaya ·Arachne ·Arena ·Blazer ·Charon ·Deepfish ·Dillo ·ELinks ·Gazelle ·HotJava ·IBM Home Page Reader ·IBM WebExplorer ·IBrowse ·KidZui ·Line Mode ·Mosaic ·MSN TV ·NetPositive ·Netscape ·Skweezer ·Skyfire ·Teashark ·ThunderHawk ·Vision ·WinWAP ·WorldWideWeb
Categoria ·Diffusione
V · D · M
Principalilinguaggi di programmazione(tutti)
ABAP ·Ada ·ALGOL ·APL ·Assembly ·Awk ·BASIC ·C ·C++ ·C# ·COBOL ·Delphi ·Eiffel ·Fortran ·F# ·Haskell ·IDL ·Java ·JavaScript ·J# ·Lisp ·LOGO ·Lua ·ML ·Objective-C ·OCaml ·Pascal ·Perl ·PHP ·PL/I ·PLaSM ·Prolog ·Python ·Ruby ·Rust ·SAS ·Scheme ·sh ·Simula ·Smalltalk ·SQL ·Swift ·Visual Basic
V · D · M
Framework per applicazioni web
C++CppCMS ·Wt
CLIASP.NET (Core ·AJAX ·Dynamic Data ·MVC ·Razor ·Web Forms) ·Blazor ·DNN ·BFC ·MonoRail ·OpenRasta ·Umbraco ·WebSharper
ColdFusionCFWheels ·ColdBox Platform ·ColdSpring ·Fusebox ·Model-Glue
Common LISPCaveman2 ·CL-HTTP ·Weblocks
HaskellYesod ·Snap
JavaAppFuse ·Flexive ·Grails ·GWT ·ICEfaces ·ItsNat ·JavaServer Faces ·JHipster ·Jspx ·JWt ·OpenXava ·Play ·Remote Application Platform ·RIFE ·Seam ·Sling ·Spring ·Stripes ·Struts ·Tapestry ·Vaadin ·Vert.x ·WebWork ·Wicket ·WaveMaker ·ZK
JavaScriptAngular/AngularJS ·Backbone.js ·Chaplin.js ·Closure ·Dojo Toolkit ·Ember.js ·Express.js ·Ext JS ·jQuery ·Knockout ·Meteor ·MooTools ·Next.js ·Node.js ·OpenUI5 ·Prototype ·React ·Rico ·script.aculo.us ·Sencha Touch ·SproutCore ·Svelte ·Vue.js ·Wakanda
PerlCatalyst ·Dancer ·Mason ·Maypole ·Mojolicious ·WebGUI
PHPCakePHP ·CodeIgniter ·Drupal ·Fat-Free ·FuelPHP ·Flow ·Grav ·Gyroscope ·Horde ·Joomla! ·Kohana ·Laravel ·Li3 ·Midgard ·MODX ·Nette ·Phalcon ·PHP-Fusion ·Pop PHP ·PRADO ·ProcessWire ·Qcodo ·Silex ·SilverStripe ·Symfony ·TYPO3 ·WordPress ·XOOPS ·Yii ·Zend Framework
PythonBlueBream ·CherryPy ·Django ·Flask ·Grok ·Nevow ·Pyjs ·Pylons ·Pyramid ·Quixote ·TACTIC ·Tornado ·TurboGears ·web2py ·Webware ·Zope 2
RubyCamping ·Merb ·Padrino ·Ruby on Rails ·Sinatra
ScalaLift ·Play ·Scalatra
SmalltalkAIDA/Web ·Seaside
AltriVibe.d (D) ·Application Express (PL/SQL) ·Grails (Groovy) ·Kepler (Lua) ·OpenACS (Tcl) ·Phoenix (Elixir) ·Ash (Elixir) ·SproutCore (JavaScript-Ruby) ·Yaws (Erlang)
Controllo di autoritàLCCN(EN) sh96004880 ·GND(DE) 4420180-1 ·BNE(ES) XX542465(data) ·BNF(FR) cb12549978q(data) ·J9U(EN, HE) 987007551493605171
 Portale Informatica
 Portale Internet
 Portale Telematica
Estratto da "https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=149330857"
Categoria:
Categorie nascoste:
[8]ページ先頭
©2009-2026 Movatter.jp