JavaScript

De la Viquipèdia, l'enciclopèdia lliure.
Saltar a la navegació Saltar a la cerca
JavaScript
llenguatge de programació
Javascript-736400 960 720.png
Autor Brendan Eich
Data d’origen 1995
Última versió 1.8.5
Paradigmes Programació orientada a objectes i a esdeveniments
Escrivint feble
Extensions comunes .js
Influenciat per Esquema , Auto , Java , C , Python , Awk , HyperTalk
Va influir ActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Implementació de referència
Implementació KJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Lloc web developer.mozilla.org/it/docs/Web/JavaScript
Editeu dades a Wikidata · Manual

En informàtica, JavaScript és un llenguatge de programació orientat a esdeveniments i orientat a objectes , que s’utilitza habitualment en la programació web del costat del client (posteriorment també s’estén al costat del servidor ) per a la creació, en llocs web i aplicacions web , d’efectes dinàmics interactius mitjançant un script invocat. funcions per esdeveniments desencadenats al seu torn de diverses maneres per l'usuari a la pàgina web en ús ( ratolí , teclat , càrrega de pàgina, etc ...).

Desenvolupat originalment per Brendan Eich de Netscape Communications amb el nom de Mochan i posteriorment LiveScript , més tard es va canviar el nom de " JavaScript " i es va formalitzar amb una sintaxi més propera a la del llenguatge Java de Sun Microsystems (que es va comprar el 2010 a Oracle ). Estandarditzat per primera vegada el 1997 per ECMA amb el nom ECMAScript , l'última norma, a juny de 2017, és ECMA-262 Edition 8 [1] i també és una norma ISO (ISO / IEC 16262).

Descripció

Les funcions de seqüència, per tant utilitzades a la lògica de presentació , es poden inserir convenientment en fitxers HTML , en pàgines JSP o en fitxers especials separats amb l' extensió .js que després es recorda a la lògica empresarial . Recentment, el seu camp d’ús s’ha estès a les anomenades aplicacions híbrides (apps híbrides), amb les quals és possible crear aplicacions per a diversos sistemes operatius mitjançant un únic codi font basat en JavaScript, HTML i CSS .

Java, JavaScript i JScript

El canvi de nom de LiveScript a JavaScript es va produir quan Netscape incloïa suport per a la tecnologia Java al seu navegador Netscape Navigator . [2] L'elecció del nom va resultar ser una font de gran confusió. No hi ha cap relació real entre Java i JavaScript; les seves semblances es troben principalment en la sintaxi (derivada en ambdós casos del llenguatge C ); la seva semàntica és bastant diferent i, en particular, els seus models d'objectes no estan relacionats i són sensiblement incompatibles.

Atès l’èxit de JavaScript com a llenguatge per enriquir les pàgines web , Microsoft va desenvolupar un llenguatge compatible, conegut com a JScript . La necessitat d’especificacions comunes va ser la base de la norma ECMA 262 per a ECMAScript, de la qual s’han publicat vuit edicions des que es va iniciar el treball el novembre de 1996 [1] .

Aspectes estructurals

Icona de la lupa mgx2.svg El mateix tema en detall: AJAX .

Les principals característiques de JavaScript són:

Altres punts d'interès: a JavaScript del client, el codi s'executa directament al client i no al servidor . L’avantatge d’aquest enfocament és que, fins i tot amb la presència d’ escriptures especialment complexes, el servidor web no corre el risc de sobrecarregar, ja que el treball el fa el client. Un desavantatge és que, en el cas de scripts particularment grans, el temps de transferència des de la xarxa pot arribar a ser excessivament llarg. A més, qualsevol informació que requereixi accés a les dades emmagatzemades en una base de dades remota s’ha de tornar a enviar a un idioma que realitza físicament la transacció , per després retornar els resultats a una o més variables JavaScript; aquestes operacions requereixen una nova càrrega de la pàgina. No obstant això, aquests límits es van superar en gran mesura amb el naixement d' AJAX .

Algunes altres funcions destacades de JavaScript:

Incompatibilitat

Les diverses implementacions de JavaScript, com ja va passar amb HTML, sovint no s’ajusten als estàndards, sinó que estan dissenyades per funcionar amb un navegador web específic i un conjunt de versions específiques del mateix. L’actual estàndard ECMAScript hauria de ser teòricament la base de totes les implementacions de JavaScript, però a la pràctica els navegadors Mozilla (i Netscape ) utilitzen JavaScript ,Microsoft Internet Explorer utilitza JScript i altres navegadors com Opera i Safari utilitzen altres implementacions ECMAScript , sovint amb funcions estàndard per permetre la compatibilitat amb JavaScript i JScript.

JavaScript i JScript contenen moltes funcions que no formen part de l’estàndard oficial ECMAScript i fins i tot poden estar desproveïdes de diverses funcions. En fer-ho, són en part incompatibles, cosa que fa que els guionistes tinguin que afrontar aquests problemes a l’hora d’escriure programari . De tots dos, JavaScript compleix més els estàndards: això significa que un script escrit segons els estàndards ECMA funcionarà amb la majoria de navegadors, especialment en versions recents.

Un altre efecte és que cada navegador pot tractar el mateix script de manera diferent i el que funciona en un navegador pot no funcionar en un altre o en una versió diferent del mateix navegador. Com passa amb HTML, per tant, es recomana escriure un codi que compleixi els estàndards. Per descomptat, al llarg dels anys s’han creat diverses biblioteques i marcs que es poden utilitzar per simplificar l’escriptura de codi JavaScript que funciona correctament independentment del navegador utilitzat. Una de les biblioteques més conegudes i més esteses per simplificar l’escriptura de seqüències d’ordres simples a les pàgines HTML o PHP és jQuery , mentre que hi ha nombrosos marcs per escriure aplicacions en JavaScript, fins i tot extremadament sofisticats (client i / o servidor), ignorant completament la necessitat de reconèixer quin navegador utilitzarà l'usuari final.

Contramedides

Hi ha dues tècniques principals per fer front a les incompatibilitats: el sniffing del navegador (literalment "sniffing the browser") i la detecció d'objectes . Quan només hi havia dos navegadors que donaven suport als scripts (Netscape i Internet Explorer), la tècnica més popular era l'ensumament del navegador. En comprovar diverses propietats del client, que retornaven informació de plataforma, navegador i versió, era possible que el codi discernís exactament en quin navegador s’executava. posteriorment, les tècniques de sniffing es van fer més difícils d’implementar, ja que Internet Explorer va començar a ocultar la seva informació, per exemple, proporcionant informació del navegador cada cop més inexacta (les raons de Microsoft per això fa temps que es disputen). Més endavant, l'ensumament de navegadors es va convertir en una forma d'art complicada, ja que van entrar al mercat altres navegadors amb scripts, cadascun amb la seva informació de plataforma, client i versió.

La detecció d'objectes es basa en comprovar l'existència de la propietat d'un objecte. 

 function set_image_source ( imageName , imageURL )
{
  // Prova per comprovar si l'objecte "document" té una propietat "imatges"
  if ( document . imatges )
  {
    // només s'executa si existeix un vector "imatges"
    document . imatges [ nom_imatge ]. src = imageURL ;
  }
}

Un exemple més complex es basa en l’ús de proves booleanes enllaçades: 

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

En aquest cas, l'expressió "document.body.style" normalment causaria un error en un navegador que no té la propietat "document.body", però si utilitzeu l'operador "&&" assegureu que "document.body.style" sigui mai es diu si "document.body" no existeix. La prova aprofita aquesta peculiaritat de l’avaluació d’expressions lògiques, anomenada avaluació mandrosa (lit. "avaluació mandrosa").

Avui en dia s’utilitza una combinació d’ensumació del navegador, detecció d’objectes i conformitat amb els estàndards, com ara l’especificació ECMAScript i CSS , per intentar assegurar-se que un usuari mai no trobi cap error JavaScript.

Ús

Icona de la lupa mgx2.svg El mateix tema en detall: intèrpret de JavaScript .

A diferència d'altres llenguatges, com C o C ++, que permeten escriure programes completament autònoms, JavaScript s'utilitza principalment com a llenguatge de script , integrat o dins d'un altre codi.

La idea bàsica és que el programa amfitrió (el que allotja i executa el script) proporciona al script una API ben definida, que permet accedir a operacions específiques, la implementació de les quals és responsabilitat del programa amfitrió mateix. Quan s'executa, l'script utilitza referències a aquesta API per sol·licitar (el programa amfitrió ) que realitzi operacions específiques, que no pretenen les pròpies construccions del llenguatge JavaScript. Aquest mecanisme també s’adopta en llenguatges com C o Java , en què el programa depèn de biblioteques , no previstes pel mateix llenguatge, que permeten realitzar operacions com E / S o l’execució de trucades a funcions del sistema. .

L’exemple típic (i potser el més conegut i comú) d’un programa d’amfitrió per a un script JavaScript és el del navegador . Un navegador modern normalment incorpora un intèrpret de JavaScript . Quan es visita una pàgina web que conté codi JavaScript, l’intèrpret del navegador l’executa. Les interfícies que permeten relacionar javascript amb un navegador s’anomenen DOM (Document Object Model en italià Document Object Model). Molts llocs web utilitzen la tecnologia JavaScript del costat del client per crear potents aplicacions web dinàmiques .

Un ús principal de JavaScript a l’ entorn web és l’escriptura de petites funcions integrades en pàgines HTML que interactuen amb el navegador DOM per realitzar certes accions que no són possibles només amb HTML estàtic: comproveu els valors dels camps d’entrada, amagueu o mostreu elements, etc. Malauradament, tothom no sempre respecta els estàndards DOM imposats pel W3C . Diferents navegadors, segons el seu motor de representació , exposen objectes o mètodes diferents a l’escriptura, de manera que sovint és necessari implementar controls addicionals a una funció JavaScript, per garantir la compatibilitat amb cada navegador i fins i tot d’acord amb les diverses versions del mateix navegador.

Fora del web, els intèrprets JavaScript s’integren en diverses aplicacions. Adobe Acrobat i Adobe Reader admeten JavaScript en fitxers PDF . La plataforma Mozilla , que sustenta molts navegadors web populars, utilitza JavaScript per implementar la interfície d’usuari i la lògica de transaccions dels seus diversos productes. Els intèrprets JavaScript també s’integren en aplicacions propietàries sense interfícies scriptables. Finalment, la tecnologia Windows Script Host de Microsoft admet JavaScript (mitjançant JScript), un llenguatge de seqüència d’ordres per a sistemes operatius .

Cadascuna d’aquestes aplicacions proporciona el seu propi model d’objectes que dóna accés a l’entorn amfitrió, amb el nucli del llenguatge JavaScript en gran part sense canvis en cada aplicació. Hi ha diverses implementacions del nucli del llenguatge JavaScript, incloses:

Ús en HTML

Etiqueta de script (HTML)

Per inserir un script en una pàgina HTML, heu d’utilitzar l’etiqueta de script . Aquesta etiqueta no forma part del llenguatge JavaScript en si, només serveix com a "contenidor" dins d'una pàgina HTML.

 < script type = "text / javascript" >
// <! [CDATA [
Sentències de JavaScript ...
//]]>
</ script >

Un document pot tenir la definició de l'etiqueta de script en diverses parts. Mitjançant aquesta etiqueta podeu representar la versió utilitzada i en funció del navegador tindreu la interpretació de la part adequada del codi. Les definicions poden ser les següents:

 < script type = "text / javascript" > ... </ script >
Exemple: Hola món!

L'exemple següent mostra un missatge d'advertència amb " Hello world " a dins. 

 < script type = "text / javascript" >
   alert ( 'Hola món' );
< / script>

Per "escriure" directament a la pàgina HTML: 

 < script type = "text / javascript" >
   document . write ( 'Hola món' );
< / script>

El tipus MIME del codi font de JavaScript és application/javascript , però text/javascript és més utilitzat, tot i que no estàndard.

Per inserir codi JavaScript en un document HTML, precedeix-lo amb:

 < script type = "text / javascript" >

i segueix per:

 </ script >

Els navegadors més antics solen requerir el codi per començar:

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

i acaba amb:

 // ->
  </ script >

Els marcadors de comentaris <!-- ... --> són necessaris per garantir que els navegadors molt antics no mostren el codi com a text que no reconeixen l’etiqueta <script> als documents HTML, mentre que LANGUAGE és un atribut HTML (l’ús del qual és actualment no es recomana) que poden sol·licitar els navegadors antics. Tanmateix, les etiquetes <script> dels documents XHTML / XML no funcionen quan es comenten, ja que els analitzadors XHTML / XML estàndard ignoren els comentaris i també poden tenir problemes amb els símbols -- , < i > dels scripts (per exemple, confonent-los amb el descens enter) i operadors de comparació). Els documents XHTML haurien d'incloure els scripts com a seccions CDATA de l'XML, amb el prefix

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

i seguint-los per

 //]]>
  </ script >

(Els símbols '//' al començament d'una línia indiquen l'inici d'un comentari de JavaScript, per evitar que <![CDATA[ e ]]> sigui analitzat per l'script.)

Els elements HTML [1] poden contenir esdeveniments intrínsecs que es poden associar amb gestors especificats per un script. Per escriure un codi HTML 4.01 vàlid, el servidor web ha de retornar un "Content-Script-Type" amb el valor "text / JavaScript". Si el servidor web no es pot configurar per a aquest propòsit, l'autor del lloc web pot col·locar la següent declaració a la secció de capçalera del document

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

Ús freqüent en navegadors web

El JavaScript es pot utilitzar per a tots els aspectes de les seqüències de comandes del client del navegador web , però alguns usos s'han generalitzat que d'altres. Els exemples inclouen la substitució d’imatges, la creació de finestres emergents i la validació de les dades del formulari . A la majoria de navegadors, el següent fragment de codi XHTML mostra una manera de substituir una imatge per una altra quan l'usuari mou el cursor per sobre. Aquest efecte sovint es denomina sobrevol o ratolí . Tot i això, també es poden aconseguir comportaments similars utilitzant només CSS .

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

Filials

Un nou exemple d’ús de JavaScript són Bookmarklets , petites seccions de codi dins dels marcadors o favorits dels navegadors web. El llenguatge de programació utilitzat a Macromedia Flash (anomenat ActionScript ) té una gran semblança amb JavaScript, a causa de la seva relació compartida amb ECMAScript . ActionScript té gairebé la mateixa sintaxi que JavaScript, però el model d'objectes [6] és molt diferent.

JavaScript per a OSA (JavaScript OSA, o JSOSA), és un llenguatge de script per a Macintosh basat en la implementació de Mozilla JavaScript 1.5 [7] . És un component freeware posat a disposició de Late Night Software . La interacció amb el sistema operatiu i les aplicacions de tercers es gestiona mitjançant un objecte MacOS . A part d'això, l'idioma és pràcticament idèntic a la implementació de Mozilla. S'ha proposat com una alternativa al llenguatge AppleScript més utilitzat.

Elements del llenguatge

Les variables

Les variables normalment s’escriuen dinàmicament, és a dir, es defineixen simplement assignant-los un valor o mitjançant l’ordre let ; els declarats fora de qualsevol funció estan en visibilitat "global" o són accessibles des de tota la pàgina web ; les declarades dins d'una funció són locals o internes a aquesta funció. Per passar variables d'una pàgina a una altra, un desenvolupador pot configurar una galeta o utilitzar un marc o una finestra oculta al fons per emmagatzemar-les.

Objectes

Tot el que conté JavaScript és un valor primitiu o un objecte. Els objectes són entitats amb singularitat (només són iguals a ells mateixos) i que associen noms de propietats amb valors. Això significa que un objecte és un vector associatiu similar als hash de Perl i Ruby , o als diccionaris de Python , PostScript i Smalltalk .

JavaScript té diversos tipus d’objectes predefinits, sobretot Array , Boolean ( Boolean ), Date (objectes que contenen una data i hora), Function ( funcions ), Math (objecte que conté funcions utilitzades en càlculs matemàtics), Number (números), Object ( objectes) ), RegExp ( expressions regulars ) i String ( cadenes ). Altres objectes són els "objectes convidats", definits no pel llenguatge, sinó per l'entorn d'execució. En un navegador, els objectes host típics pertanyen al DOM : finestra ( finestra ), formulari (màscara), enllaç ( enllaç ), etc.

JSDOM.gif

En definir un constructor , podeu definir objectes. JavaScript és un llenguatge orientat a objectes basat en prototips. Això significa que l'herència és entre objectes, no entre classes (JavaScript no té classes). Els objectes hereten propietats dels seus prototips.

Es poden afegir propietats o mètodes addicionals a objectes individuals després de crear-los. Per fer-ho en totes les instàncies creades per un únic constructor, podeu utilitzar la propietat del prototype del constructor per accedir a l'objecte prototip.

Exemple: creació d'un objecte 

 // constructor
funció MyObject (attributeA, attributeB)
{
  això . atributA = atributA
  això . atributB = atributB
}
 
// crear un objecte
obj = MyObject new ( 'vermell' , 1000 )
 
// accediu a un atribut de obj
alerta (obj. attributeA)
 
// accediu a un atribut amb la notació vectorial associativa
alerta ( obj [ "attributeA" ])

Simular l’herència

Es pot emular la jerarquia d'objectes de JavaScript. Per exemple: 

 funció Base ()
{
  això . Override = _Override ;
  això . Funció base = _Funció base ;
 
  funció _Override ()
  {
    alert ( "Base :: Override ()" );
  }

  function _BaseFunction ()
  {
    alert ( "Base :: BaseFunction ()" );
  }
}
 
funció Derive ()
{
   això . Override = _Override ;
   funció _Override ()
   {
     alert ( "Derive :: Override ()" );
   }
}

Deriva . prototip = base nova ();
 
d = nou Deriva ();
d . Override ();
d . Funció Base ();

donarà lloc a la sortida:

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

Objectes predefinits

A més de permetre la definició d'objectes, JavaScript proporciona tota una sèrie d'objectes que es poden utilitzar per als vostres scripts:

Matriu

Una matriu és una associació entre enters i valors de tipus arbitrari. A JavaScript, tots els objectes poden associar valors i enters, però les matrius són un tipus d’objectes especials que tenen comportaments específics i mètodes especialitzats per utilitzar índexs enters (per exemple, join , slice i push ).

Les matrius tenen una propietat de length que es garanteix que sempre serà superior a l'índex més gran utilitzat al vector. S’actualitza automàticament si creeu una propietat amb un índex encara més gran. Si escriviu un nombre més petit a la propietat length , s’eliminen els índexs més grans. Aquesta propietat és l'única característica especial dels vectors, que els distingeix d'altres objectes.

Amb els elements de matriu, podeu utilitzar la notació normal per accedir a les propietats de l’objecte:

 myArray[1]
  
myArray["1"]

Aquestes dues notacions són equivalents. No podeu utilitzar la notació de punts ni les cadenes amb una representació alternativa del número:

 myArray.1 (error de sintaxi)
  myArray(1) (sintaxi incorrecta, només permesa per Internet Explorer)
  myArray["01"] (no és el mateix que myArray[1] )

La declaració d'un vector pot utilitzar la notació explícita o el constructor Array :

 myArray = [0,1,,,4,5]; (longitud vectorial 6 amb 4 elements)
 myArray = new Array(0,1,2,3,4,5); (vector amb 6 i 6 elements de longitud)
 myArray = new Array(365); (vector buit amb longitud 365)

Les matrius s’implementen de manera que només els elements definits utilitzen memòria; són "vectors dispersos". Configurar myArray[10] = 'qualcosa' i myArray[57] = 'qualcosaltro' només utilitza espai per a aquests dos elements, com per a qualsevol altre objecte. La longitud de la matriu sempre s’informarà com a 58.

Estructures de control i condicionals

si una altra cosa

L'estructura de control IF correspon a SE en italià

La sentència continguda dins dels claudàtors només s'executarà i només si la condició es valora com a veritable, en cas contrari s'executarà la sentència continguda a l'ELSE.

 si (condició)
  {
     instruccions;
  }

si (condició)
  {
     instruccions;
  }
  en cas contrari
  {
     instruccions;
  }

Mentre bucle

 mentre (condició)
  {
     instruccions;
  }

Fer ... while loop

 fer
  {
     instruccions;
  } while (condició);

Per a bucle

 for ([expressió inicial]; [condició]; [expressió d'increment])
  {
     instruccions;
  }

Per ... en bucle

Aquest bucle recorre totes les propietats d’un objecte (o els elements d’un vector).

 per (variable en objecte)
  {
     instruccions;
  }

Per ... de bucle

Aquest bucle recorre tots els valors d’un objecte (o els elements d’un vector).

 per a (variable d' objecte)
  {
     instruccions;
  }

Instrucció de canvi

 commutador (expressió)
  {
     valor de cas 1 :
        instruccions;
        trencar ;
     valor de cas2:
        instruccions;
        trencar ;
     per defecte :
        instruccions;
  }

Funcions

Una funció és un bloc d’ instruccions , amb una llista d’arguments (possiblement buits) i que pot tenir un nom (tot i que no és necessari). Una funció pot retornar un valor mitjançant la sentència return .

 funció (pot estar buida)
  {
     instruccions;
     expressió de retorn ;
  }

El nombre d’arguments passats en cridar una funció no ha de ser necessàriament igual al nombre d’arguments de la definició de funció (és a dir, no s’ha de respectar necessàriament el nombre de paràmetres formals quan es crida a la funció, és a dir, a la especificació dels paràmetres actuals ). Dins de la funció, la llista d'arguments també es pot anomenar per mitjà de la arguments vector (l'últim té la callee propietat que representa un punter a la funció en si).

Cada funció és una instància de Function , un tipus bàsic d'objecte. Les funcions es poden crear i assignar com qualsevol altre objecte:

 var myFunc1 = nova funció ("alert ('Hello')");
   var myFunc2 = myFunc1;
   myFunc2 ();

produeix com a sortida:

 Hola

Interacció amb l'usuari

Entre les altres tècniques amb què un script JavaScript pot interactuar amb l'usuari dins d'una pàgina web, hi ha les següents:

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

 < html >
< head >
< script type = "text/javascript" >
<!-- Nasconde lo script ai browser obsoleti

// Questa funzione genera una riga orizzontale della larghezza scelta.
function bar ( widthPct )
{
  document . write ( "<hr align='left' width='" + widthPct + "%' />" );
}

// Questa funzione genera del testo preceduto da un titolo di dato livello.
function output ( headLevel , headText , text )
{
  document . write ( "<h" + headLevel + ">" + headText + "</h" + headLevel + "><p>" + text + "</p>" );
}

// Fine del codice da nascondere -->
< /script>
< /head>
< body >
< script type = "text/javascript" >
<!-- Nasconde lo script ai browser obsoleti

bar ( 25 )
output ( 2 , "JavaScript Rules!" , "Usare JavaScript è facile..." )

// Fine del codice da nascondere -->
< /script>

< p > Questo è normale HTML , a differenza di quello generato dal codice sopra . < /p>

< /body>
< /html>

Eventi

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

 Oggetto . evento = handler ;

Esistono varie categorie di eventi:

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

Eventi attivabili dai tasti del mouse

Lista eventi:

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

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

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:

  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

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:

  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 ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
  7. onDragLeave : attivato quando l'utente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato;
  8. onDragEnd : attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
  9. onDrop : attivato quando il mouse si alza il tasto del mouse in seguito ad un'operazione di trascinamento;
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:

  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

onChange

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

Esempio: 

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

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

onPropertyChange

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" >
function addCheck ()
{
  alert ( "Please check your email details are correct before submitting" )
}
< /script>
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 click su un oggetto che ha già la selezione, quando questo è in DesignMode;

onLoseCapture

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'immagine.

Questo handler usa le seguenti proprietà dell'evento.

Esempio

 < img name = "myPic" SRC = "images/myPic.gif" onAbort = "alert('Loading of image aborted!')" >
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

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

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

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

  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

Handler applicabile solamente all'oggetto Form.

Gestione degli errori

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

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

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

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

Integrazione con HTML5

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

Riconoscimento vocale

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

 < input type = "text" x - webkit - speech />
var recognition = new SpeechRecognition ();
var speechRecognitionList = new SpeechGrammarList ();

Notifiche

Esempio di notifica
Esempio di notifica

Aggiornamenti di un sito web visibili anche con il browser chiuso: 

 < button onclick = "notifyMe()" > Notifica !< /button>

function notifyMe () {
  if ( ! ( "Notification" in window )) {
    alert ( "Aggiorna il tuo browser" );
  }
  else if ( Notification . permission === "concesso" ) {
    var notification = new Notification ( "Ciao!" );
  }
  else if ( Notification . permission !== "negata" ) {
    Notification . requestPermission (). then ( function ( permission ) {
      if ( permission === "ok" ) {
        var notification = new Notification ( "Ciao!" );
      }
    });
  }
}

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: 

 < div contenteditable = "true" >
Questo testo è editabile dall ' utente .
< /div>
document . execCommand ( "defaultParagraphSeparator" , false , "p" );

Drag out

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

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

File System API

Scrivere in modo asincrono un file in un file system in modalità sandbox utilizzando 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 );

Geolocalizzazione

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

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

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. 

 window . addEventListener ( 'deviceorientation' , function ( event ) {
  var a = event . alpha ;
  var b = event . beta ;
  var g = event . gamma ;
}, false );

Local Storage, Application Cache e Quota API

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' , ( new Date ()). getTime ());
}, false );
textarea . value = window . localStorage . getItem ( 'value' );

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

Web SQL Database

Nuove funzioni integrate con SQL: 

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

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. 

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

 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

Aumentano le prestazioni della pagina web: 

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

Web Socket

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. 

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

Pagine web a tutto schermo 

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

Nuovi selettori (API DOM) 

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

Attributi personalizzabili 

 < 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

Element.classList

L'utilizzo classList è un'alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata da spazi tramite element.className . 

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

History API

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

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: Web 3D e WebGL .

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

Esempio di WebGL
Esempio di WebGL 
 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 ;

Alternative

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: HTML5 e CSS .

Con la nascita di HTML 5 e CSS 3 alcune possibilità come la creazione di [10] [11] [12] [13] [14] [15] [16] :

  • gallerie/slide di immagini e video
  • tooltip
  • menu di navigazione a tendina, a tabulazione, accordion e toggle
  • effetti zoom sulle immagini
  • effetti al passaggio del mouse sul testo, sui link e sulle immagini
  • effetti di transizione e lightbox (visualizzare immagini e video riempiendo lo schermo e oscurando il resto della pagina web, detto anche shadowbox )
  • Testo troncato
  • Bottoni di caricamento file da parte dell'utente, di call-to-action ("invia", "iscriviti", "compra"...) e altro
  • 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
  • Ridimensionamenti di oggetti
  • Auto-completamento e suggeritori nei form
  • Barre di caricamento progressive
  • Widget
  • Selettori di date, colori e altro nei form ("Color picker" e "Color checker")
  • Scorrimento fluido della pagina intera dall'header al footer (o viceversa) con un solo click
  • Modalità scura della pagina (rende una pagina meno luminosa senza che l'utente debba agire sulla luminosità del monitor )
  • drag and drop
  • Calcolatrici

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

Esempi di UI JavaScript

Magnifying glass icon mgx2.svg Lo stesso argomento in dettaglio: jQuery , jQuery UI e Tooltip .

Note

  1. ^ a b Standard ECMA-262
  2. ^ ( EN ) A Brief History of JavaScript , su Auth0 - Blog . URL consultato il 28 febbraio 2020 .
  3. ^ David Flanagan, JavaScript - La guida , Milano, Apogeo, 2000, p.1, ISBN 88-7303-627-9 .
  4. ^ David Flanagan, JavaScript - La guida , Milano, Apogeo, 2000, p.53, ISBN 88-7303-627-9 .
  5. ^ David Flanagan, JavaScript - La guida , Milano, Apogeo, 2000, ISBN 88-7303-627-9 .
  6. ^ Flex Quick Start - Defining data models | Adobe Developer Connection , su www.adobe.com . URL consultato il 28 febbraio 2020 .
  7. ^ ( 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 .
  8. ^ slide , su github.com .
  9. ^ ( EN )20 Interactive 3D JavaScript Libraries & Frameworks – Bashooka , su bashooka.com , 30 maggio 2019. URL consultato il 18 febbraio 2021 .
  10. ^ a b ( EN ) 5 things you can do with CSS instead of JavaScript , su LogRocket Blog , 29 ottobre 2019. URL consultato il 9 febbraio 2021 .
  11. ^ ( EN ) 49 CSS Galleries , su Free Frontend . URL consultato il 9 febbraio 2021 .
  12. ^ LiveCode - HTML5 - Calculator App Demo , su livecode.com . URL consultato il 9 febbraio 2021 .
  13. ^ Andrea Pacchiarotti, Menù responsivo in HTML e CSS senza JavaScript e jQuery , su Andrea pacchiarotti . URL consultato il 9 febbraio 2021 .
  14. ^ Come fare un magico, animato Tooltips con CSS , su Web Design Envato Tuts+ . URL consultato il 9 febbraio 2021 .
  15. ^ ( EN ) Using the HTML5 Drag and Drop API , su web.dev . URL consultato il 9 febbraio 2021 .
  16. ^ How To Create a File Upload Button , su www.w3schools.com . URL consultato il 9 febbraio 2021 .

Bibliografia

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Italia - 2002)
  • David Flanagan: JavaScript versione 1.5 (Apogeo - 2002)
  • Emily A. Vander Veer: JavaScript (con CD-ROM) (Apogeo - 2001)
  • Roberto Abbate: Imparare JavaScript (Edizioni Master - 2006)
  • Shelley Powers: Programmare in JavaScript (Tecniche Nuove - 2007)
  • Douglas Crockford: JavaScript - Le tecniche per scrivere il codice migliore (Tecniche Nuove - 2009)

Voci correlate

Altri progetti

Collegamenti esterni

Controllo di autorità LCCN ( EN ) sh96004880 · GND ( DE ) 4420180-1 · BNF ( FR ) cb12549978q (data) · BNE ( ES ) XX542465 (data)
Telematica Portale Telematica : accedi alle voci di Wikipedia che parlano di reti, telecomunicazioni e protocolli di rete
Estratto da " https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=122505473 "