JavaScript: differenze tra le versioni

Versione delle 20:56, 15 set 2022

Versione attuale delle 08:23, 6 dic 2024

(45 versioni intermedie di 26 utenti non mostrate)

Riga 1:

{{Linguaggio di programmazione

|nome = JavaScript

|immagine = Javascript-736400Unofficial 960JavaScript 720logo 2.pngsvg

|didascalia = Logo del linguaggio

|autore = [[Brendan Eich]]

|data = [[1995]]

|utilizzo = <!-- Ambito di utilizzo specifico: linguaggio general-purpose, interrogazione di basi di dati, ecc.eccetera -->

|versione = 1.8.5

|utilizzo = <!-- Ambito di utilizzo specifico: linguaggio general-purpose, interrogazione di basi di dati, ecc. -->

|paradigmi = Programmazione a eventi e a oggetti, funzionale

|tipizzazione = debole

Line 19 ⟶ 18:

|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]], comunemente utilizzato sia nella [[programmazione Web|programmazione]] [[lato client]] (esteso poiweb ancheche al [[lato server]] ([[Node.js]]) per la creazione di RESTful API, inapplicazioni 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 '''MochanMocha''' 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 ==

Line 32 ⟶ 31:

=== Aspetti strutturali ===

{{Vedi anche|AJAX}}

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.

Line 53 ⟶ 50:

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 dovere riconoscere quale browser utilizzerà l'utente finale.

==== Contromisure ====

Line 196 ⟶ 193:

== 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.

Line 216 ⟶ 213:

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>

Line 634 ⟶ 631:

===== 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;

===== onBeforeUnload =====

Line 697 ⟶ 694:

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-permissionapi">{{Citacita web

|url = https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission

|accesso = 23 giugno 2022

|lingua = en

|titolo = Notification.permission

}}</ref><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-apipermission">{{citaCita web

|url = https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission

|accesso = 23 giugno 2022

|lingua = en

|titolo = Notification.permission

}}</ref>

Line 734 ⟶ 731:

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>

}}</ref><ref name="mozdev-notification-permission" />

* 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)

Line 855 ⟶ 852:

=== Web Workers ===

{{Vedi anche|Web worker}}

Aumentano le prestazioni della pagina web:<syntaxhighlight lang="javascript">

var worker = new Worker('task.js');

Line 867 ⟶ 865:

=== Web Socket ===

{{Vedi anche|AJAXWebSocket}}

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');

Line 965 ⟶ 964:

=== 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-US|accesso=2021-02-18}}</ref>.

[[File:Webgl loader ctm.png|alt=Esempio di WebGL|miniatura|Esempio di WebGL]]

<syntaxhighlight lang="javascript">

Line 983 ⟶ 982:

== 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-US|accesso=2021-02-09}}</ref><ref>{{Cita web|url=https://freefrontend.com/css-gallery/|titolo=49 CSS Galleries|sito=Free Frontend|lingua=en-US|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

Line 992 ⟶ 991:

* Scorrimento orizzontale dei contenuti senza le barre di scorrimento del browser

* Barre di caricamento progressive

* [[Widget (informatica)|Widget]]

* [[drag and drop]]

* [[Calcolatrice|Calcolatrici]]

Line 1 001 ⟶ 1 000:

{{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>

Line 1 030 ⟶ 1 029:

== Collegamenti esterni ==

* {{Collegamenti esterni}}

* Specifiche

* {{FOLDOC}}

** {{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}}

* ;Specifiche

** {{cita web|http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html|Guide for JavaScript 1.1 as used by Navigator 3.x|lingua=en}}

** {{cita web|https://www.ecma-international.org/publications/standards/Ecma-262.htm|ECMA 262 ECMAScript Language Specification|lingua=en}}

* Storia

** {{cita web|https://mozilla.org/js/language/js20/|Proposal for JavaScript 2.0|lingua=en}}

** {{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)

** {{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ì}}

** {{en}} [http://inventors.about.com/library/inventors/bl_javascript.htm Brendan Eich and JavaScript] {{Webarchive|url=https://archive.today/20121208142259/http://inventors.about.com/od/jstartinventions/a/JavaScript.htm |data=8 dicembre 2012 }} (about.com)

* Apprendimento

* ;Storia

** [https://www.aranzulla.it/siti-per-programmare-1391660.html#chapter4 Grashopper: Learn to code] (in italiano)

** {{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)

** [https://www.w3schools.com/js/default.asp Tutorial JavaScript su w3schools.com] (in italiano)

** {{en}} [http://inventors.about.com/library/inventors/bl_javascript.htm Brendan Eich and JavaScript] {{Webarchive|url=https://archive.todayis/20121208142259/http://inventors.about.com/od/jstartinventions/a/JavaScript.htm |data=8 dicembre 2012 }} (about.com)

** [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

* ;Apprendimento

**{{cita web|https://www.w3schools.com/jsref/|Una dettagliata JavaScript Object Reference}}

** [https://www.aranzulla.it/siti-per-programmare-1391660.html#chapter4 Grashopper: Learn to code] (in italiano)

* Cooperazione con…

** [https://www.w3schools.com/js/default.asp Tutorial JavaScript su w3schools.com] (in italiano)

** {{cita web|url=https://pear.php.net/package-info.php?pacid=93|titolo=PHP|lingua=en}}

** [https://www.html.it/javascript/| Guide, articoli, faq, raccolte script su JavaScript] di HTML.it

** {{cita web|http://tcllib.sourceforge.net/doc/javascript.html|TCL|lingua=en}}

** [https://www.html.it/guide/guida-javascript-di-base/ Guida completa a JavaScript] di HTML.it

** {{cita web|http://search.cpan.org/~jpierce/Data-JavaScript-1.08/JavaScript.pm|Perl|lingua=en}}

** {{cita web|https://www.w3schools.com/jsref/|Una dettagliata JavaScript Object Reference}}

* Strumenti

* [https://javascript.info Learn & Practice Frontend Development for free]

** {{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}}

** [http://demo.opencrx.org/opencrx-core-CRX/helpJsCookie_it_IT.html Guida pratica per abilitare JavaScript nei vari browser e sistemi operativi]

** {{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}}

{{Estensioni}}

{{Principali linguaggi di programmazione}}

{{Framework per applicazioni web}}

{{Controllo di autorità}}

{{Portale|telematica|informatica|internet}}

[[Categoria:JavaScript| ]]