JavaScript: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m robot Aggiungo: zh-yue:JavaScript |
Modifica collegamento errato da Safari termine turistico a Safari browser di Apple Etichette: Modifica visuale Modifica da mobile Modifica da web per mobile |
||
| (557 versioni intermedie di oltre 100 utenti non mostrate) | |||
Riga 1:
{{Linguaggio di programmazione
|nome = JavaScript
|immagine = Unofficial JavaScript logo 2.svg
|didascalia = Logo del linguaggio
|autore = [[Brendan Eich]]
|data = [[1995]]
|utilizzo = <!-- Ambito di utilizzo specifico: linguaggio general-purpose, interrogazione di basi di dati, eccetera -->
|paradigmi = Programmazione a eventi e a oggetti, funzionale
|tipizzazione = debole
|specifiche =
|estensione = .js
|influenzato_da = [[Scheme]], [[Self (linguaggio)|Self]], [[Java (linguaggio di programmazione)|Java]], [[C (linguaggio)|C]], [[Python]], [[Awk]], [[HyperTalk]]
|ha_influenzato = [[ActionScript]], [[AtScript]], [[CoffeeScript]], [[DART (linguaggio)|Dart]], [[JScript .NET]], [[Objective-J]], [[QML (linguaggio di programmazione)|QML]], [[TypeScript]], [[LiveScript]]
|implementazione_riferimento = [[KJS (JavaScript)|KJS]], [[Rhino (interprete JavaScript)|Rhino]], [[SpiderMonkey]], [[V8 (motore JavaScript)|V8]], [[Presto (motore di rendering)|Presto]], [[Chakra (motore JScript)|Chakra]]
|sistema_operativo = <!-- S.O. supportati dall'impl. di riferimento -->
|lingua = <!-- Lingue supportate dall'impl. di riferimento -->
|licenza = <!-- Licenza del codice sorgente o binario dell'impl. di riferimento -->
|sito_web = https://developer.mozilla.org/it/docs/Web/JavaScript
}}
In [[informatica]] '''JavaScript''' è un [[linguaggio di programmazione]] multi paradigma [[Programmazione orientata agli oggetti|orientato]] agli [[Programmazione a eventi|eventi]], utilizzato sia nella [[programmazione Web|programmazione]] [[lato client]] web che [[lato server]] ([[Node.js]]) per la creazione di RESTful API, applicazioni desktop e embedded, [[sito web|siti web]] e [[applicazione web|applicazioni web]], di effetti dinamici [[interattività|interattivi]] tramite [[funzione (informatica)|funzioni]] di [[script]] invocate da ''eventi'' innescati a loro volta in vari modi dall'utente sulla [[pagina web]] in uso ([[mouse]], [[tastiera (informatica)|tastiera]], caricamento della pagina ecc...).
Originariamente sviluppato da [[Brendan Eich]] della [[Netscape Communications]] con il nome di '''Mocha''' e successivamente di '''LiveScript''', in seguito è stato rinominato "''JavaScript''" ed è stato formalizzato con una [[sintassi]] più vicina a quella del linguaggio [[Java (linguaggio di programmazione)|Java]] di [[Sun Microsystems]] (che nel 2010 è stata acquistata da [[Oracle Corporation|Oracle]]). [[Norma tecnica|Standardizzato]] per la prima volta il 1997 dalla [[European Computer Manufacturers Association|ECMA]] con il nome [[ECMAScript]], l'ultimo standard, di giugno 2022, è ECMA-262 Edition 13<ref>{{Cita web|url=https://262.ecma-international.org/13.0/|titolo=ECMA-262 13th Edition}}</ref> ed è anche uno standard [[ISO]] (ISO/IEC 16262).
== Descrizione ==
Le funzioni di script, utilizzati dunque nella ''[[front-end|logica di presentazione]]'', possono essere opportunamente inserite in [[file]] [[HTML]], in pagine [[JavaServer Pages|JSP]] o in appositi file separati con [[Estensione (file)|estensione]] ''.js'' poi richiamati nella ''[[logica di business]]''. Ultimamente il suo campo di utilizzo è stato esteso alle cosiddette ''Hybrid App'' (app ibride), con le quali è possibile creare [[app (smartphone)|app]] per più [[sistema operativo|sistemi operativi]] utilizzando un unico [[codice sorgente]] basato appunto su JavaScript, [[HTML]] e [[CSS]].
=== 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]].<ref>{{Cita web|url=https://auth0.com/blog/a-brief-history-of-javascript/|titolo=A Brief History of JavaScript|sito=Auth0 - Blog|lingua=en|accesso=2020-02-28}}</ref> 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 [[C (linguaggio)|linguaggio C]]); le loro semantiche sono piuttosto diverse, e in particolare i loro ''[[object model]]'' non hanno relazione e sono notevolmente incompatibili.
Dato il successo di JavaScript come linguaggio per arricchire le [[pagina web|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 otto edizioni da quando il lavoro iniziò, nel novembre [[1996]]<ref name="ecma262">[https://www.ecma-international.org/publications/standards/Ecma-262.htm Standard ECMA-262]</ref>.
=== Aspetti strutturali ===
Le caratteristiche principali di JavaScript sono:
* essere un [[linguaggio interpretato]]: il codice non viene [[compilazione|compilato]], ma [[Interprete (informatica)|eseguito direttamente;]] in JavaScript [[lato client]], il codice viene eseguito dall'interprete contenuto nel browser dell'utente.
* la [[sintassi (informatica)|sintassi]] è relativamente simile a quella dei linguaggi [[linguaggio C|C]], [[C++]] e [[Java (linguaggio di programmazione)|Java]]<ref>{{cita libro|David|Flanagan|JavaScript - La guida|2000|Apogeo|Milano|pagine=p.1|isbn=88-7303-627-9}}</ref>.
* definisce le funzionalità tipiche dei [[linguaggio di programmazione ad alto livello|linguaggi di programmazione ad alto livello]] ([[struttura di controllo|strutture di controllo]], cicli, ecc.) e consente l'utilizzo del paradigma [[Programmazione orientata agli oggetti|object oriented]].
* è un [[linguaggio tipizzato|linguaggio debolmente tipizzato]]<ref>{{cita libro|David|Flanagan|JavaScript - La guida|2000|Apogeo|Milano|pagine=p.53|isbn=88-7303-627-9}}</ref>.
* è un [[linguaggio orientato agli oggetti|linguaggio debolmente orientato agli oggetti]]. Ad esempio, il meccanismo dell'[[Ereditarietà (informatica)|ereditarietà]] è più simile a quello del Self e del [[NewtonScript]] che a quello del [[Java (linguaggio di programmazione)|linguaggio Java]], fortemente orientato agli oggetti. Gli oggetti stessi ricordano più gli [[array associativo|array associativi]] del [[Perl|linguaggio Perl]] che gli oggetti di Java o C++.<ref name="Flanagan">{{cita libro|David|Flanagan|JavaScript - La guida|2000|Apogeo|Milano|isbn=88-7303-627-9}}</ref>
Altri aspetti di interesse: in JavaScript lato client, il codice viene eseguito direttamente sul [[client]] e non sul [[server]]. Il vantaggio di questo approccio è che, anche con la presenza di [[script]] particolarmente complessi, il [[web 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 una [[base di dati]] remota deve essere rimandata a un linguaggio che effettui materialmente la [[Transazione (basi di dati)|transazione]], per poi restituire i risultati ad 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 di [[AJAX]].
Alcune altre caratteristiche di JavaScript degne di nota:
* Può usare caratteri [[Unicode]]
* Può valutare le [[espressione regolare|espressioni regolari]] (introdotte nella versione 1.2; supporto da parte dei browser: a partire da [[Netscape Navigator]] 4 e [[Internet Explorer]] 4)
* Le espressioni JavaScript contenute in una stringa possono essere valutate usando la funzione <code>eval</code>.
=== Incompatibilità ===
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 standard [[ECMAScript]] dovrebbe essere teoricamente la base di tutte le implementazioni JavaScript, ma in pratica i browser [[Mozilla]] (e [[Netscape Navigator|Netscape]]) usano ''JavaScript'', [[Microsoft Internet Explorer]] usa ''JScript'', e altri browser come [[Opera (browser)|Opera]] e [[Safari (browser)|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 dovere sopperire a tali problemi durante la scrittura del [[software]]. 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. Naturalmente 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 o PHP è [[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.
==== Contromisure ====
Esistono due tecniche principali per gestire le incompatibilità: ''browser sniffing'' (letteralmente "annusare il browser") e ''object detection'' ("rilevazione dell'oggetto"). Quando esistevano solo due browser che supportavano lo scripting, ovvero Netscape e 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. in seguito le tecniche di ''sniffing'' 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, 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 controllo dell'esistenza della proprietà di un oggetto.
<syntaxhighlight lang="javascript">
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;
}
}
</syntaxhighlight>
Un esempio più complesso si basa sull'uso di test [[Algebra di Boole|booleani]] collegati:
<syntaxhighlight lang="javascript">
if (document.body && document.body.style)
</syntaxhighlight>
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. Il test sfrutta questa particolarità della valutazione di espressioni logiche, chiamata ''[[lazy evaluation]]'' (lett. "valutazione pigra").
Oggi, una combinazione di browser sniffing, object detection, e conformità agli standard come le specifiche ECMAScript e i [[Foglio di stile|CSS]] sono usati in varie misure per provare ad assicurare che un utente non incontri mai un errore JavaScript.
=== Uso ===
{{vedi anche|Interprete JavaScript}}
A differenza di altri linguaggi, quali il C o il C++, che permettono la scrittura di [[programma (informatica)|programmi]] completamente stand-alone, JavaScript viene utilizzato soprattutto come [[linguaggio di scripting]], integrato, ovvero all'interno di altro codice.
L'idea di base è che il ''programma ospite'' (quello che ospita ed esegue lo script) fornisca allo script un'[[Application Programming Interface|API]] ben definita, che consente l'accesso ad operazioni specifiche, la cui implementazione è a carico del ''programma ospite'' stesso. Lo script, quando eseguito, utilizza riferimenti a questa API per richiedere (al ''programma ospite'') l'esecuzione di operazioni specifiche, non previste dai costrutti del linguaggio JavaScript in sé. Tale meccanismo viene adottato anche in linguaggi quale il [[linguaggio C|C]] o [[Java (linguaggio di programmazione)|Java]], nel quale il programma si affida a delle [[Libreria (software)|librerie]], 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) di ''programma ospite'' per uno script JavaScript è quello del [[browser]]. Un browser moderno incorpora normalmente un [[interprete JavaScript]]. Quando viene visitata una [[pagina 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 chiamate [[Document Object Model|DOM]] (''Document Object Model'' in italiano ''Modello a Oggetti del Documento''). Molti siti web usano la tecnologia JavaScript lato client per creare potenti [[applicazione web|applicazioni web]] [[web dinamico|dinamiche]].
Un uso principale del JavaScript in ambito [[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: controllare i valori nei campi di input, nascondere o visualizzare determinati elementi, ecc. Sfortunatamente, gli standard DOM imposti dal [[W3C]] non sempre vengono rispettati in modo consistente ed omogeneo da tutti. Browser diversi, a seconda del loro [[motore di rendering]], espongono diversi oggetti o metodi allo script, perciò spesso è necessario implementare controlli aggiuntivi ad 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]] e [[Adobe Reader]] supportano JavaScript nei [[file]] [[Portable Document Format|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 [[sistema operativo|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 (JavaScript)|KJS]]
* [[Rhino
* [[SpiderMonkey]]
* [[Mozilla Narcissus JavaScript Engine|Narcissus]]
*
*
* [[Resin JavaScript Engine|Resin]]
* [[Free EcmaScript Interpreter|FESI]]
* [[Simple ECMAScript Engine|SEE]]
* [[DMDScript]]
* [[V8 (motore JavaScript)|V8]]
* [[JägerMonkey]]
* [[Chakra (motore JScript)|Chakra]]
==== Utilizzo in HTML ====
===== Tag
<
<script type="text/javascript">
// <![CDATA[
Line 42 ⟶ 116:
// ]]>
</script>
</syntaxhighlight>
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:
<syntaxhighlight lang="html4strict">
<script type="text/javascript"> ... </script>
</syntaxhighlight>
===== Esempio: Hello world! =====
Il seguente esempio visualizza un messaggio di avviso con all'interno scritto "[[Hello world]]".
<
<script type="text/javascript">
alert(
</script>
</syntaxhighlight>
Per "scrivere" direttamente
<
<script type="text/javascript">
document.write(
</script>
</syntaxhighlight>
Il [[MIME|tipo MIME]] per il codice sorgente JavaScript source code è <code>application/
Per integrare del codice
<
e seguire da:
<
Browser più vecchi tipicamente richiedono che il codice inizi con:
<syntaxhighlight lang="html" strict="">
<script language="JavaScript" type="text/javascript">
<!--
</syntaxhighlight>
e finisca con:
<syntaxhighlight lang="html" strict="">
</script>
</syntaxhighlight>
I segnalatori di commento <
<syntaxhighlight lang="html" strict="">
<script type="text/javascript">
//<![CDATA[
</syntaxhighlight>
e facendoli seguire da
<syntaxhighlight lang="html" strict="">
</script>
</syntaxhighlight>
(I simboli '//' all'inizio di una linea segnalano l'inizio di un commento JavaScript, per impedire che
Gli elementi HTML [
<syntaxhighlight lang="html4strict">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</syntaxhighlight>
==== Usi frequenti nei web browser ====
JavaScript può essere usato per ogni aspetto dello scripting lato ''client'' di un [[web browser]], ma alcuni usi si sono diffusi più di altri. Tra gli esempi ricorrenti vi sono la sostituzione di immagini, la creazione di finestre ''pop-up e'' la convalida dei dati inseriti in ''[[form]]''. Nella maggior parte dei browser, il seguente frammento di codice [[XHTML]] mostra un modo con cui un'immagine può essere sostituita con un'altra quando l'utente muove il [[cursore]] su di essa. Tale effetto è chiamato spesso ''rollover'' o ''mouse over''. Comunque comportamenti simili possono essere ottenuti anche [http://www.wellstyled.com/css-nopreload-rollovers.html usando solo i CSS].
<syntaxhighlight lang="html">
<img src = "normal.png"
onclick = "window.___location.href='http://en.wikipedia.org/'"
onmouseover = "this.src='rollover.png'"
onmouseout = "this.src='normal.png'" />
</syntaxhighlight>
==== 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<ref>{{Cita web|url=https://www.adobe.com/devnet/flex/quickstarts/defining_data_models.html|titolo=Flex Quick Start - Defining data models {{!}} Adobe Developer Connection|accesso=2020-02-28}}</ref> è decisamente diverso.
''JavaScript for OSA'' (JavaScript OSA, or JSOSA), è un linguaggio di scripting per [[Macintosh]] basato sull'implementazione JavaScript 1.5 di [[Mozilla]]<ref>{{Cita libro|nome=Matt|cognome=Neuburg|titolo=AppleScript: The Definitive Guide: Scripting and Automating Your Mac|url=https://books.google.it/books?id=zQy4mgqIccsC&pg=PT67&lpg=PT67&dq=JavaScript+for+OSA&source=bl&ots=sffWwSTFP0&sig=ACfU3U0Tvju43QHP8fourQ0aoslUhrKSJA&hl=it&sa=X&ved=2ahUKEwjJpI2KiPPnAhUxuaQKHVZgDrQQ6AEwBXoECAkQAQ#v=onepage&q=JavaScript%20for%20OSA&f=false|accesso=2020-02-28|data=2006-01-04|editore="O'Reilly Media, Inc."|lingua=en|ISBN=978-1-4493-7915-5}}</ref>. È un componente [[freeware]] reso disponibile da [http://www.latenightsw.com/ 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]].
== Elementi del linguaggio ==
=== Variabili ===
Le [[variabile (informatica)|variabili]] sono in genere tipizzate dinamicamente ovvero sono definite semplicemente assegnando loro un valore oppure usando il comando <code>let,che permette di modificare la variabile, o dal comando const (constant) che indica che la variabile non può essere modificata</code>; quelle dichiarate fuori da qualunque funzione sono in visibilità "globale" ovvero accessibili dall'intera [[pagina 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 un [[cookie]] o usare un frame nascosto o una finestra in background per memorizzarli.
=== 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 [[array|vettore associativo]] simile agli hash in [[
[[
Definendo un [[Costruttore (informatica)|costruttore]], è possibile definire oggetti. JavaScript è un linguaggio orientato a oggetti basato su prototipi. Ciò significa che l'eredità è fra oggetti, non fra [[Classe (informatica)|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à <code>prototype</code> 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"]);
</syntaxhighlight>
==== Simulare l'ereditarietà ====
La gerarchia degli oggetti in JavaScript può essere emulata. Per esempio:
<
function Base()
{
Line 210 ⟶ 261:
d.Override();
d.BaseFunction();
</syntaxhighlight>
risulterà nell'output:
Line 216 ⟶ 267:
Base::BaseFunction()
==== Oggetti predefiniti ====
Oltre a permettere la definizione di oggetti,
{{div col|4}}
* [[Anchor]]
* [[Applet]]
* [[Area (XML DOM)|Area]]
* [[Array]]
* Base
* [[Basefont]]
* [[Body (informatica)|Body]]
* [[Button (informatica)|Button]]
* [[Checkbox]]
* [[tipo di dato|Date]]
* [[Document (oggetto XML DOM)|Document]]
* [[Event]]
* [[File]]
* [[FileUpload]]
* [[Form]]
* [[Elemento HTML#Frame|Frame]]
* [[Frameset]]
* [[Funzione (informatica)|Function]]
* [[Hidden (informatica)|Hidden]]
* History
* [[Iframe]]
* [[Image (informatica)|Image]]
* Layer
* [[Collegamento ipertestuale|Link]]
* Location
* [[Math]]
* [[Metadata|Meta]]
* Navigator
* [[Number]]
* [[Object]]
* [[Option]]
* [[Password]]
* Radio
* [[RegExp]]
* Reset
* Screen
* Select
* Style
* String
* Submit
* Table
* [[TableData]]
* [[TableHeader]]
* [[TableRow]]
* [[Text]]
* [[Textarea]]
* [[Finestra (informatica)|Window]]
{{div col end}}
=== Array ===
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., <code>join</code>, <code>slice</code>, e <code>push</code>).
Gli array hanno una proprietà <code>length</code> 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à <code>length</code> 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:
<code>myArray[1]</code>
<code>myArray["1"]</code>
Queste due notazioni sono equivalenti. Non è possibile usare la notazione a punto o le stringhe con una rappresentazione alternativa del numero:
<code>myArray.1</code> (errore di sintassi)
<code>myArray(1)</code> (sintassi errata, ammessa unicamente da Internet Explorer)
<code>myArray["01"]</code> (non è lo stesso di <code>myArray[1]</code>)
La dichiarazione di un vettore può usare o una notazione esplicita o il costruttore <code>Array</code>:
<code>myArray = new Array(0,1,2,3,4,5);</code> (vettore con lunghezza 6 e 6 elementi)
<code>myArray = new Array(365);</code> (vettore vuoto con lunghezza 365)
Gli ''Array'' sono implementati in modo che solo gli elementi definiti usino memoria; sono "vettori sparsi". Impostare <code>myArray[10] = 'qualcosa'</code> e <code>myArray[57] = 'qualcosaltro'</code> 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 ===
==== if ... else ====
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;
}
==== Ciclo
'''while''' (condizione)
{
istruzioni;
}
==== Ciclo
'''do'''
{
istruzioni;
} '''while''' (condizione);
==== Ciclo
'''for''' ([espressione iniziale]; [condizione]; [espressione di incremento])
{
istruzioni;
}
==== Ciclo
Questo ciclo percorre tutte le proprietà di un oggetto (o gli elementi di un vettore).
'''for''' (variabile '''in''' oggetto)
{
istruzioni;
}
==== Ciclo for ... of ====
Questo ciclo percorre tutti i valori di un oggetto (o gli elementi di un vettore).
'''for''' (variabile '''of''' oggetto)
{
istruzioni;
}
==== Istruzione switch ====
'''switch''' (espressione)
{
'''case'''
istruzioni;
'''break''';
'''case'''
istruzioni;
'''break''';
Line 339 ⟶ 407:
}
=== Funzioni ===
Una [[funzione (informatica)|funzione]] è un blocco
'''function'''(
{
istruzioni;
Line 349 ⟶ 416:
}
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 di '''''parametri formali''''' non deve necessariamente essere rispettato all'atto dell'invocazione della funzione cioè nella specifica dei ''parametri attuali''). All'interno della funzione
Ogni funzione è un'istanza di ''Function'', un tipo di oggetto base. Le funzioni possono essere create e assegnate come ogni altro oggetto:
Line 361 ⟶ 428:
Hello
=== Interazione con l'utente ===
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:
* ''[[Alert dialog box]]'' (finestra di avviso)
* ''[[Confirm dialog box]]'' (finestra di conferma)
* ''[[Prompt dialog box]]'' (finestra di richiesta input)
* [[Barra di stato]] del browser
* ''[[Standard output]]'' ("console")
'''Nota:''' i dialog box non funzionano col browser Opera; non vi è nessun errore, semplicemente non vengono eseguite.
==== 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 concatenazione '+':
<syntaxhighlight lang="javascript" strict="">
<html>
<head>
Line 383 ⟶ 450:
function bar(widthPct)
{
document.write("<hr align='left' width='" + widthPct + "%' />");
}
Line 409 ⟶ 476:
</body>
</html>
</syntaxhighlight>
=== Eventi ===
Gli elementi di testo possono essere la fonte di vari [[evento (informatica)|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:
<syntaxhighlight lang="javascript" strict="">
Oggetto.evento = handler;
</syntaxhighlight>
Esistono varie categorie di eventi:
# Eventi attivabili dai tasti del mouse
# Eventi attivabili dai movimenti del mouse
# Eventi attivabili dal trascinamento del mouse (drag and drop)
# Eventi attivabili dall'utente con la tastiera
# Eventi attivabili dalle modifiche dell'utente
# Eventi legati al "fuoco"
# Eventi attivabili dal caricamento degli oggetti
# Eventi attivabili dai movimenti delle finestre
# Eventi legati a particolari bottoni
# Altri e nuovi tipi di eventi
==== Eventi attivabili dai tasti del mouse ====
Lista eventi:
# ''onClick'': attivato quando si clicca su un oggetto;
# ''onDblClick'': attivato con un doppio click;
# ''onMouseDown'': attivato quando si schiaccia il tasto sinistro del mouse;
# ''onMouseUp'': attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
# ''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 =====
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 ====
Lista eventi:
# ''onMouseOver'': attivato quando il mouse si muove su un oggetto;
# ''onMouseOut'': attivato quando il mouse si sposta da un oggetto;
# ''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 =====
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) ====
Lista eventi:
# ''onDragDrop'': evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
# ''onMove'': attivato quando un oggetto muove una finestra o un frame;
# ''onDragStart'': evento attivato appena l'utente inizia a trascinare un oggetto;
# ''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;
#
#
#
# ''onDragEnd'': attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
#
===== 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
==== Eventi attivabili dall'utente con la tastiera ====
Lista Eventi:
# ''onKeyPress'': evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto;
# ''onKeyDown'': attivato quando viene premuto il tasto;
# ''onKeyUp'': evento attivato quando un tasto, che era stato premuto, viene rilasciato;
# ''onHelp'': attivato quando
==== Eventi attivabili dalle modifiche dell'utente ====
===== onChange =====
Attivato quando il contenuto di un campo di un form o modulo è modificato o non è più selezionato. Viene utilizzato anche con gli oggetti
Esempio:
<
<input type="text" value="Enter email address" name="userEmail" onChange=validateInput(this.value) />
<script type="text/javascript">
Line 509 ⟶ 568:
}
</script>
</syntaxhighlight>
===== onCellChange =====
Attivato quando si modifica un elemento in
=====
Evento attivato quando cambia la proprietà di un elemento;
===== 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.
===== 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
==== Eventi legati al "fuoco" ====
===== onFocus =====
Questo handler è l'opposto di onBlur per cui si attiva quando l'utente entra in un campo;
===== 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">
Line 538 ⟶ 597:
}
</script>
</syntaxhighlight>
===== 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;
===== onSelectStart =====
Si attiva quando si inizia a selezionare un evento;
===== onbeforeEditFocus =====
Si attiva con un doppio click o con un
=====
Si attiva quando un oggetto perde la cattura del mouse.
===== 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
==== Eventi attivabili dal caricamento degli oggetti ====
===== onLoad =====
Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini;
===== 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);
===== 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
Questo handler usa le seguenti proprietà dell'evento.
Esempio
<
<
</syntaxhighlight>
===== 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. Opera non gestisce questo evento, ormai obsoleto: per una corretta gestione degli errori si utilizza il costrutto try... catch;
=====
Questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima;
===== 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.
===== Tag di applicazione =====
# 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>.
#
#
#
#
# onStop Questo gestore è usato con i tag <BODY> anche in Internet Explorer.
==== Eventi attivabili dai movimenti delle finestre ====
Lista Eventi:
#
# 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 =====
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 ====
# onSubmit: Questo handler è attivato dal click su tasto di Invio di un form;
# onReset: questo handler è attivato dal click su tasto di Annulla di un form.
===== Tag di applicazione =====
Handler applicabile solamente all'oggetto Form.
=== Gestione degli errori ===
Le versioni più nuove di JavaScript (
Il costrutto <code>try ... catch ... finally</code> intercetta le [[eccezione (informatica)|eccezioni]] generate da un errore o da un'istruzione <code>throw</code>. La sua sintassi è la seguente:
<syntaxhighlight lang="javascript">
} catch (error) {
// Istruzioni da eseguire in caso di eccezione
}
</syntaxhighlight>
Inizialmente, vengono eseguite le istruzioni all'interno del blocco <
==
Con la nascita di HTML5 JavaScript ha acquisito diverse novità<ref>{{Cita web|url=https://github.com/html5rocks/slides.html5rocks.com|titolo=slide}}</ref>:
=== Riconoscimento vocale ===
L'utente può parlare all'interno di un form anziché scrivere:<syntaxhighlight lang="javascript">
<input type="text" x-webkit-speech />
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
</syntaxhighlight>
=== Notifiche di sistema ===
<!-- TODO: aggiungere una vera immagine di una notifica nativa -->
[[File:Echo notifications maxed out.png|miniatura|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.<ref name="mozdev-notification-api" /><ref name="mozdev-notification-permission" />
Le notifiche di sistema, come suggerisce il nome, sono integrate coerentemente al dispositivo corrente (su desktop è spesso un [[pop-up]], su mobile è spesso nella barra di notifica, etc.).<ref name="mozdev-notification-api">{{cita web
|url = https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
|lingua = en
|titolo = Using the Notifications API
|accesso = 23 giugno 2022
}}</ref><ref name="mozdev-notification-permission">{{Cita web
|url = https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission
|accesso = 23 giugno 2022
|lingua = en
|titolo = Notification.permission
}}</ref>
Segue un esempio minimale con due pulsanti, per richiedere i permessi per le notifiche di sistema e per visualizzarne una.
<syntaxhighlight lang="html">
<button id="btn-asking">Richiedi permessi</button>
<button id="btn-notify">Mostra notifica</button>
<script>
// ricerca pulsanti
var btnAsking = document.getElementById( 'btn-asking' );
var btnNotify = document.getElementById( 'btn-notify' );
// dopo il click lancia la richiesta di permessi
btnAsking.addEventListener( 'click', function() {
Notification.requestPermission();
} );
// dopo il click mostro una notifica
btnNotify.addEventListener( 'click', function() {
new Notification( "Nuova notifica!" );
} );
</script>
</syntaxhighlight>
L'approfondimento della documentazione ufficiale permette di effettuare ulteriori buone pratiche, fra le quali:
* verifica del supporto (per esempio [[Safari (browser)|Safari]] su [[iOS]] è noto per non aver raggiunto un ottimo supporto)<ref name="mozdev-notification-permission" /><ref>{{Cita web
|url = https://caniuse.com/mdn-api_notification_requestpermission
|titolo = Notification API: requestPermission
|accesso = 23 giugno 2022
|lingua = en
}}</ref>
* 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.<ref name="mozdev-notification-permission" />
=== Contenuto editabile ===
Possibilità per l'utente di modificare la pagina web come se si trovasse all'interno di un editor [[WYSIWYG]], anche se le modifiche non saranno salvate nella reale pagina web remota ma solo visibili nel browser dell'utente:<syntaxhighlight lang="javascript">
<div contenteditable="true">
Questo testo è editabile dall'utente.
</div>
document.execCommand("defaultParagraphSeparator", false, "p");
</syntaxhighlight>
=== Drag out ===
Trascinamento di file da una pagina web al computer o altro dispositivo:<syntaxhighlight lang="javascript">
<a href="src/star.mp3" draggable="true" class="dragout"
data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
</syntaxhighlight>
=== File System API ===
Scrivere in modo asincrono un file in un file system in modalità sandbox utilizzando JavaScript:<syntaxhighlight lang="javascript">
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) { ... };
var bb = new BlobBuilder();
bb.append('Hello World!');
writer.write(bb.getBlob('text/plain'));
}, opt_errorHandler);
}
}, opt_errorHandler);
</syntaxhighlight>
=== Geolocalizzazione ===
Possibilità per l'utente di dichiarare a un'applicazione o una pagina web la propria posizione:<syntaxhighlight lang="javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
</syntaxhighlight>
=== Device Orientation ===
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.<syntaxhighlight lang="javascript">
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
</syntaxhighlight>
=== Local Storage, Application Cache e Quota API ===
Possibilità di navigare in pagine web visualizzate in precedenza anche senza connessione internet:<syntaxhighlight lang="javascript">
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
</syntaxhighlight><syntaxhighlight lang="javascript">
<html manifest="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);
</syntaxhighlight>
=== Web SQL Database ===
Nuove funzioni integrate con [[Structured Query Language|SQL:]]<syntaxhighlight lang="javascript">
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
</syntaxhighlight>
=== Indexed DB ===
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.<syntaxhighlight lang="javascript">
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.srcElement.result;
var transaction = db.transaction([], IDBTransaction.READ_ONLY);
var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
curRequest.onsuccess = ...;
};
</syntaxhighlight><syntaxhighlight lang="javascript">
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);
}
);
</syntaxhighlight>
=== Web Workers ===
{{Vedi anche|Web worker}}
Aumentano le prestazioni della pagina web:<syntaxhighlight lang="javascript">
var worker = new Worker('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);
};
</syntaxhighlight>
=== Web Socket ===
{{Vedi anche|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 la larghezza di banda.<syntaxhighlight lang="javascript">
var socket = new WebSocket('www.sito.it');
socket.onopen = function(event) {
socket.send('Ciao');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('chiuso'); }
</syntaxhighlight>
=== Pagine web a tutto schermo ===
<syntaxhighlight lang="javascript">
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (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;
}
</syntaxhighlight>
=== Nuovi selettori (API DOM) ===
<syntaxhighlight lang="javascript">
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td");
</syntaxhighlight>
=== Attributi personalizzabili ===
<syntaxhighlight lang="javascript">
<div id="out" data-id="good" data-name="joe" data-screen-name="user1"></div>
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');
var html = [];
for (var key in el.dataset) {
html.push(key, ': ', el.dataset[key], '<br>');
}
el.innerHTML = html.join('');
Output:
id: good
name: joe
screenName: user1
foo: bar
</syntaxhighlight>
=== Element.classList ===
L'utilizzo <code>classList</code>è un'alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata da spazi tramite <code>element.className</code>.<syntaxhighlight lang="javascript">
<div id="main" class="shadow rounded"></div>
var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');
console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className);
//output:
<div id="main" class="rounded"></div>
</syntaxhighlight>
=== History API ===
Offre la possibilità di modificare l'[[Uniform Resource Locator|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.<syntaxhighlight lang="javascript">
link.addEventListener('click', function(event) {
history.___pushState('Contact Page Form', 'Contact Page', '/contact');
});
window.addEventListener('popstate', function(event) {
document.querySelector('h1').innerHTML = event.state;
});
</syntaxhighlight><syntaxhighlight lang="javascript">
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);
}
);
</syntaxhighlight>
=== JS nel web 3D ===
{{vedi anche|Web 3D|WebGL}}
JavaScript comprende librerie e framework per creare interfacce 3D sul web<ref>{{Cita web|url=https://bashooka.com/coding/3d-javascript-libraries/|titolo=20 Interactive 3D JavaScript Libraries & Frameworks – Bashooka|data=2019-05-30|lingua=en|accesso=2021-02-18}}</ref>.
[[File:Webgl loader ctm.png|alt=Esempio di WebGL|miniatura|Esempio di WebGL]]
<syntaxhighlight lang="javascript">
function main() {
const canvas = document.querySelector("#glCanvas");
const gl = 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;
</syntaxhighlight>
== Alternative ==
{{vedi anche|HTML5|CSS}}
Con la nascita di [[HTML5|HTML 5]] e CSS 3 alcune possibilità come la creazione di<ref name=":0">{{Cita web|url=https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/|titolo=5 things you can do with CSS instead of JavaScript|sito=LogRocket Blog|data=2019-10-29|lingua=en|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://freefrontend.com/css-gallery/|titolo=49 CSS Galleries|sito=Free Frontend|lingua=en|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://livecode.com/demo/html5/calculator/|titolo=LiveCode - HTML5 - Calculator App Demo|sito=livecode.com|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://www.andreapacchiarotti.it/archivio/menu-responsivo.html|titolo=Menù responsivo in HTML e CSS senza JavaScript e jQuery|autore=Andrea Pacchiarotti|sito=Andrea pacchiarotti|lingua=it|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://webdesign.tutsplus.com/it/tutorials/css-tooltip-magic--cms-28082|titolo=Come fare un magico, animato Tooltips con CSS|sito=Web Design Envato Tuts+|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://web.dev/drag-and-drop/|titolo=Using the HTML5 Drag and Drop API|sito=web.dev|lingua=en|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://www.w3schools.com/howto/howto_html_file_upload_button.asp|titolo=How To Create a File Upload Button|accesso=2021-02-09}}</ref>:
* gallerie/slide di immagini e video
* [[tooltip]]
* [[Menu (informatica)|menu]] di navigazione a tendina, a tabulazione, ''accordion'' e [[toggle]]
* effetti al passaggio del [[mouse]] sul testo, sui [[Collegamento ipertestuale|link]] 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 (informatica)|Widget]]
* [[drag and drop]]
* [[Calcolatrice|Calcolatrici]]
possono essere attuate senza l'utilizzo di JavaScript, cosa che con HTML 4 e CSS 2 era spesso impossibile fare<ref name=":0" />.
== Esempi di UI JavaScript ==
{{vedi anche|JQuery|JQuery UI|tooltip}}<gallery>
File:Javascript-menu.png|alt=Menu JS a tendina|Menu JS a tendina
File:Javascript-gallery-polaroid.png|alt=Galleria di immagini JS Drag and Drop stile Polaroid|Galleria di immagini JS [[Drag and drop|Drag and Drop]] stile [[Sistema Polaroid|Polaroid]]
File:Javascript-tooltip.png|alt=Tooltip JS|[[Tooltip]] JS
</gallery>
== Note ==
<references />
== Bibliografia ==
* Michel Dreyfus: ''JavaScript'' (Addison Wesley Longman Italia - 2002)
* David Flanagan: ''
* Emily A. Vander Veer: ''JavaScript (con CD-ROM)'' (Apogeo - 2001)
* Roberto Abbate: ''Imparare
* Shelley Powers: ''Programmare in JavaScript'' (Tecniche Nuove - 2007)
* Douglas Crockford: ''JavaScript - Le tecniche per scrivere il codice migliore'' (Tecniche Nuove - 2009)
== Voci correlate ==
* [[Asynchronous JavaScript and XML|AJAX]]
* [[DHTML]]
* [[jQuery]]
* [[JSON]]
* [[Linguaggio di scripting]]
* [[Prototype JavaScript Framework]]
* [[TypeScript]]
* [[JavaScriptCore]]
== Altri progetti ==
{{interprogetto|b=JavaScript|b_oggetto=una guida|b_preposizione=al|b_etichetta=linguaggio JavaScript}}
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{FOLDOC}}
;Specifiche
* {{cita web|https://www.ecma-international.org/publications/standards/Ecma-262.htm|ECMA 262 ECMAScript Language Specification|lingua=en}}
* {{cita web|https://mozilla.org/js/language/js20/|Proposal for JavaScript 2.0|lingua=en}}
* {{cita web|1=http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html|2=Guide for JavaScript 1.1 as used by Navigator 3.x|lingua=en|accesso=7 dicembre 2004|dataarchivio=6 novembre 2004|urlarchivio=https://web.archive.org/web/20041106050312/http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html|urlmorto=sì}}
;Storia
* {{en}} [https://web.archive.org/web/20080208124612/http://wp.netscape.com/comprod/columns/techvision/innovators_be.html Innovators of the Net: Brendan Eich and JavaScript] ([[Marc Andreesen]], Netscape TechVision, 24 Jun 1998)
* {{en}} [http://inventors.about.com/library/inventors/bl_javascript.htm Brendan Eich and JavaScript] {{Webarchive|url=https://archive.is/20121208142259/http://inventors.about.com/od/jstartinventions/a/JavaScript.htm |data=8 dicembre 2012 }} (about.com)
;Apprendimento
* [https://www.aranzulla.it/siti-per-programmare-1391660.html#chapter4 Grashopper: Learn to code] (in italiano)
* [https://www.w3schools.com/js/default.asp Tutorial JavaScript su w3schools.com] (in italiano)
* [https://www.html.it/javascript/ Guide, articoli, faq, raccolte script su JavaScript] di HTML.it
* [https://www.html.it/guide/guida-javascript-di-base/ Guida completa a JavaScript] di HTML.it
* {{cita web|https://www.w3schools.com/jsref/|Una dettagliata JavaScript Object Reference}}
* [https://javascript.info Learn & Practice Frontend Development for free]
* {{cita web|url=https://pear.php.net/package-info.php?pacid=93|titolo=PHP|lingua=en}}
* {{cita web|http://tcllib.sourceforge.net/doc/javascript.html|TCL|lingua=en}}
* {{cita web|http://search.cpan.org/~jpierce/Data-JavaScript-1.08/JavaScript.pm|Perl|lingua=en}}
;Strumenti
* {{cita web|url=http://www.skenz.it/traduttori/tesine/index.php?title=Formattazione_javascript|titolo=Un tool di formattazione (scritto in Java) per il linguaggio JavaScript|accesso=22 aprile 2008|dataarchivio=23 gennaio 2009|urlarchivio=https://web.archive.org/web/20090123191802/http://www.skenz.it/traduttori/tesine/index.php?title=Formattazione_javascript|urlmorto=sì}}
* [http://demo.opencrx.org/opencrx-core-CRX/helpJsCookie_it_IT.html Guida pratica per abilitare JavaScript nei vari browser e sistemi operativi]
{{Browser Internet}}
{{Principali linguaggi di programmazione}}
{{Framework per applicazioni web}}
{{Controllo di autorità}}
{{Portale|telematica|informatica|internet}}
[[Categoria:JavaScript| ]]
| |||