JavaScript

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare
JavaScript
limbaj de programare
Javascript-736400 960 720.png
Autor Brendan Eich
Data de origine 1995
Ultima versiune 1.8.5
Paradigme Programare orientată pe obiecte și orientată pe evenimente
Tastare slab
Extensii comune .js
Influențată de Scheme , Self , Java , C , Python , Awk , HyperTalk
A influențat ActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , dactilografiat , LiveScript
Implementare referință
Implementare KJS , Rhino , SpiderMonkey , V8 , Presto , Chakra
Site-ul web developer.mozilla.org/it/docs/Web/JavaScript
Editați datele pe Wikidata · Manual

În informatică, JavaScript este un limbaj de programare orientat pe obiecte și orientat pe evenimente , utilizat în mod obișnuit în programarea Web partea clientului (ulterior extinsă și la partea serverului ) pentru crearea, în site-uri web și aplicații web , a efectelor dinamice interactive prin intermediul scriptului invocat funcții de evenimente declanșate la rândul lor în diferite moduri de către utilizator pe pagina web utilizată ( mouse , tastatură , încărcare pagină, etc ...).

Dezvoltat inițial de Brendan Eich de la Netscape Communications sub numele de Mochan și mai târziu LiveScript , ulterior a fost redenumit „ JavaScript ” și a fost formalizat cu o sintaxă mai apropiată de cea a limbajului Java Sun Microsystems (care a fost achiziționată în 2010 de la Oracle ). Standardizat pentru prima dată în 1997 de către ECMA sub numele ECMAScript, cel mai recent standard, începând din iunie 2017, este ECMA-262 Edition 8 [1] și este , de asemenea , un ISO standard (ISO / IEC 16262).

Descriere

Funcțiile de script, utilizate prin urmare în logica de prezentare , pot fi inserate în mod convenabil în fișiere HTML , în pagini JSP sau în fișiere separate separate cu extensia .js apoi reamintită în logica de afaceri . Recent, domeniul său de utilizare a fost extins la așa-numitele aplicații hibride (aplicații hibride), cu care este posibilă crearea de aplicații pentru mai multe sisteme de operare folosind un singur cod sursă bazat pe JavaScript, HTML și CSS .

Java, JavaScript și JScript

Schimbarea numelui de la LiveScript la JavaScript a avut loc în perioada în care Netscape a inclus suport pentru tehnologia Java în browserul său Netscape Navigator . [2] Alegerea numelui s-a dovedit a fi o sursă de mare confuzie. Nu există o relație reală între Java și JavaScript; asemănările lor sunt în principal în sintaxă (derivată în ambele cazuri din limbajul C ); semantica lor este destul de diferită și, în special, modelele lor de obiecte nu au legătură și sunt vizibil incompatibile.

Având în vedere succesul JavaScript ca limbaj pentru îmbogățirea paginilor web , Microsoft a dezvoltat un limbaj compatibil, cunoscut sub numele de JScript . Necesitatea unor specificații comune a stat la baza standardului ECMA 262 pentru ECMAScript, din care au fost publicate opt ediții de când a început lucrarea în noiembrie 1996 [1] .

Aspecte structurale

Pictogramă lupă mgx2.svg Același subiect în detaliu: AJAX .

Principalele caracteristici ale JavaScript sunt:

Alte puncte de interes: în JavaScript partea clientului, codul rulează direct pe client și nu pe server . Avantajul acestei abordări este că, chiar și cu prezența unor scripturi deosebit de complexe, serverul web nu riscă să se supraîncărce, deoarece lucrarea este realizată de client. Un dezavantaj este că, în cazul scripturilor deosebit de mari, timpul de transfer din rețea poate deveni excesiv de lung. Mai mult, orice informație care necesită acces la datele stocate într-o bază de date la distanță trebuie trimisă înapoi într-o limbă care efectuează fizic tranzacția , pentru a returna apoi rezultatele la una sau mai multe variabile JavaScript; astfel de operațiuni necesită o nouă încărcare a paginii în sine. Cu toate acestea, aceste limite au fost depășite în mare măsură odată cu nașterea AJAX .

Câteva alte caracteristici JavaScript remarcabile:

Incompatibilitate

Diferitele implementări ale JavaScript, așa cum sa întâmplat deja cu HTML, de multe ori nu sunt conforme cu standardele, ci mai degrabă sunt create pentru a funcționa cu un browser web specific și un set de versiuni specifice ale acestuia. Actualul standard ECMAScript ar trebui să fie teoretic baza tuturor implementărilor JavaScript, dar în practică browserele Mozilla (și Netscape ) folosesc JavaScript ,Microsoft Internet Explorer folosește JScript , iar alte browsere precum Opera și Safari folosesc alte implementări ECMAScript , adesea cu caracteristici standard pentru a permite compatibilitatea cu JavaScript și JScript.

JavaScript și JScript conțin multe caracteristici care nu fac parte din standardul oficial ECMAScript și pot fi chiar lipsite de mai multe caracteristici. Procedând astfel, ele sunt parțial incompatibile, ceea ce îi determină pe scenariști să se confrunte cu astfel de probleme atunci când scriu software . Dintre cele două, JavaScript este mai conform cu standardele: aceasta înseamnă că un script scris conform standardelor ECMA va funcționa cu majoritatea browserelor, în special în versiunile recente.

Un alt efect este că fiecare browser poate trata același script diferit, iar ceea ce funcționează într-un browser poate să nu funcționeze în altul sau într-o versiune diferită a aceluiași browser. Ca și în cazul HTML, se recomandă deci să scrieți un cod conform standardelor. Desigur, de-a lungul anilor au fost create diverse biblioteci și cadre care pot fi utilizate pentru a simplifica scrierea codului JavaScript care funcționează corect indiferent de browserul utilizat. Una dintre cele mai cunoscute și mai răspândite biblioteci pentru a simplifica scrierea de scripturi simple în paginile HTML sau PHP este jQuery , în timp ce există numeroase cadre pentru scrierea aplicațiilor în JavaScript, chiar și extrem de sofisticate (partea clientului și / sau partea serverului), ignorând complet necesitatea de a recunoaște ce browser va utiliza utilizatorul final.

Contramăsuri

Există două tehnici principale pentru a face față incompatibilităților: detectarea browserului (literalmente „ detectarea browserului”) și detectarea obiectelor . Când existau doar două browsere care suportau scriptarea, și anume Netscape și Internet Explorer, detectarea browserului era cea mai populară tehnică. Verificând o serie de proprietăți ale clientului, care au returnat informații despre platformă, browser și versiune, a fost posibil ca codul să discearnă exact în ce browser rulează. ulterior, tehnicile de sniffing au devenit mai dificile de implementat, deoarece Internet Explorer a început să-și ascundă informațiile, de exemplu, oferind informații din browser din ce în ce mai inexacte (motivele Microsoft pentru aceasta au fost contestate de mult timp). Mai târziu, mirosul browserului a devenit o formă de artă complicată, când au intrat pe piață alte browsere cu scripturi, fiecare cu propria platformă, client și informații despre versiune.

Detectarea obiectelor se bazează pe verificarea existenței proprietății unui obiect. 

 funcție set_image_source ( imageName , imageURL )
{
  // Testați pentru a verifica dacă obiectul „document” are o proprietate „imagini”
  if ( document . imagini )
  {
    // executat numai dacă există un vector „imagini”
    document . imagini [ imageName ]. src = imageURL ;
  }
}

Un exemplu mai complex se bazează pe utilizarea testelor booleene legate: 

 if ( document . corp && document . corp . stil )

În acest caz, expresia „document.body.style” ar cauza în mod normal o eroare într-un browser care nu are proprietatea „document.body”, dar folosind operatorul „&&” se asigură că „document.body.style” este nu s-a apelat niciodată dacă „document.body” nu există. Testul profită de această particularitate a evaluării expresiilor logice, numită evaluare leneșă (lit. „evaluare leneșă”).

Astăzi, o combinație de detectare a browserului, detectarea obiectelor și conformitatea standardelor, cum ar fi specificațiile ECMAScript și CSS, sunt utilizate în diferite măsuri pentru a încerca să se asigure că un utilizator nu întâmpină niciodată o eroare JavaScript.

Utilizare

Pictogramă lupă mgx2.svg Același subiect în detaliu: interpretor JavaScript .

Spre deosebire de alte limbi, cum ar fi C sau C ++, care permit scrierea de programe complet independente, JavaScript este utilizat în principal ca limbaj de script , integrat sau în alt cod.

Ideea de bază este că programul gazdă (cel care găzduiește și execută scriptul) oferă scriptului un API bine definit, care permite accesul la operațiuni specifice, a căror implementare este responsabilitatea programului gazdă în sine. Scriptul, atunci când este executat, folosește referințe la acest API pentru a solicita ( programul gazdă ) să efectueze operațiuni specifice, care nu sunt intenționate de construcțiile limbajului JavaScript. Acest mecanism este adoptat și în limbaje precum C sau Java , în care programul se bazează pe biblioteci , care nu sunt prevăzute de limbajul însuși, care vă permit să efectuați operațiuni precum I / O sau executarea apelurilor către sistemul de funcții .

Exemplul tipic (și poate cel mai cunoscut și cel mai comun) al unui program gazdă pentru un script JavaScript este cel al browserului . Un browser modern încorporează în mod normal un interpret JavaScript . Când este vizitată o pagină web care conține cod JavaScript, aceasta este executată de interpretul conținut în browser. Interfețele care permit javascriptului să se raporteze la un browser se numesc DOM (Document Object Model in Italian Document Object Model). Multe site-uri web utilizează tehnologia JavaScript din partea clientului pentru a crea aplicații web dinamice puternice.

O utilizare principală a JavaScript-ului în mediul Web este scrierea de mici funcții integrate în pagini HTML care interacționează cu browserul DOM pentru a efectua anumite acțiuni care nu sunt posibile doar cu HTML static: verificați valorile din câmpurile de intrare, ascundeți sau afișați anumite elemente etc. Din păcate, standardele DOM impuse de W3C nu sunt întotdeauna respectate în mod constant și consecvent de toată lumea. Diferite browsere, în funcție de motorul de redare , expun diferite obiecte sau metode scriptului, deci este adesea necesar să implementați controale suplimentare unei funcții JavaScript, pentru a asigura compatibilitatea cu fiecare browser și chiar în funcție de diferitele versiuni ale aceluiași browser.

În afara site-ului web, interpreții JavaScript sunt integrați în mai multe aplicații. Adobe Acrobat și Adobe Reader acceptă JavaScript în fișiere PDF . Platforma Mozilla , care stă la baza multor browsere web populare, folosește JavaScript pentru a implementa interfața cu utilizatorul și logica de tranzacție a diferitelor sale produse. Interpretorii JavaScript sunt, de asemenea, integrați în aplicații proprietare fără interfețe scriptabile. În cele din urmă, tehnologia Windows Script Host a Microsoft acceptă JavaScript (prin JScript), un limbaj de script pentru sistemele de operare .

Fiecare dintre aceste aplicații oferă propriul model de obiect care oferă acces la mediul gazdă, miezul limbajului JavaScript rămânând în mare parte neschimbat în fiecare aplicație. Există mai multe implementări ale nucleului limbajului JavaScript, inclusiv:

Folosiți în HTML

Etichetă script (HTML)

Pentru a insera un script într-o pagină HTML, trebuie să utilizați eticheta scriptului . Această etichetă nu face parte din limbajul JavaScript în sine, ci servește doar ca „container” într-o pagină HTML.

 < script type = "text / javascript" >
// <! [CDATA [
Declarații JavaScript ...
//]]>
</ script >

Un document poate avea definiția etichetei scriptului în mai multe părți. Prin intermediul acestei etichete puteți reprezenta versiunea utilizată și, în funcție de browser, veți avea interpretarea părții corespunzătoare a codului. Definițiile pot fi următoarele:

 < script type = "text / javascript" > ... </ script >
Exemplu: Hello world!

Următorul exemplu afișează un mesaj de avertizare cu „ Hello world ” în interior. 

 < script type = "text / javascript" >
   alert ( 'Hello world' );
< / script>

Pentru a „scrie” direct în pagina HTML: 

 < script type = "text / javascript" >
   document . scrie ( 'Hello world' );
< / script>

Tipul MIME pentru codul sursă JavaScript este application/javascript , dar text/javascript este mai utilizat, deși nu este standard.

Pentru a încorpora cod JavaScript într-un document HTML, precedați-l cu:

 < script type = "text / javascript" >

și urmează de:

 </ script >

Browserele mai vechi necesită de obicei codul pentru a începe cu:

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

și se termină cu:

 // ->
  </ script >

Marcatorii de comentarii <!-- ... --> sunt necesari pentru a vă asigura că codul nu este afișat ca text de browserele foarte vechi care nu recunosc eticheta <script> în documentele HTML, în timp ce LANGUAGE este un atribut HTML (a cărui utilizare este astăzi nerecomandat) care poate fi solicitat de browsere vechi. Cu toate acestea, etichetele <script> din documentele XHTML / XML nu funcționează atunci când sunt comentate, deoarece analizatoarele XHTML / XML standard ignoră comentariile și pot întâmpina probleme cu simbolurile -- , < și > din scripturi (de exemplu, confundându-le cu descreșterea numărului întreg) și operatorii de comparație). Documentele XHTML ar trebui să includă apoi scripturile ca secțiuni CDATA ale XML, prefixate cu

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

și urmându-le de

 //]]>
  </ script >

(Simbolurile „//” de la începutul unei linii indică începutul unui comentariu JavaScript, pentru a împiedica <![CDATA[ e ]]> fie analizate de script.)

Elementele HTML [1] pot conține evenimente intrinseci care pot fi asociate cu gestionarele specificate de un script. Pentru a scrie un cod HTML 4.01 valid, serverul web ar trebui să returneze un „Content-Script-Type” cu valoarea „text / JavaScript”. Dacă serverul web nu poate fi configurat în acest scop, autorul site-ului web poate plasa următoarea declarație în secțiunea antet a documentului

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

Utilizare frecventă în browserele web

JavaScript poate fi utilizat pentru fiecare aspect al scriptului de pe partea clientului a unui browser web , dar unele utilizări au devenit mai răspândite decât altele. Exemplele includ înlocuirea imaginilor, crearea ferestrelor pop-up și validarea datelor din formular . În majoritatea browserelor, următorul fragment de cod XHTML arată un mod în care o imagine poate fi înlocuită cu alta atunci când utilizatorul deplasează cursorul peste ea. Acest efect este adesea numit rollover sau mouse over . Cu toate acestea, comportamente similare pot fi realizate folosind doar CSS .

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

Filiale

Un nou exemplu de utilizare a JavaScript-ului sunt Bookmarklets , mici secțiuni de cod din marcaje sau favorite ale browserelor web. Limbajul de programare utilizat în Macromedia Flash (numit ActionScript ) are o asemănare puternică cu JavaScript, datorită relației lor comune cu ECMAScript . ActionScript are aproape aceeași sintaxă ca JavaScript, dar modelul obiectului [6] este foarte diferit.

JavaScript pentru OSA (JavaScript OSA, sau JSOSA), este un limbaj de script pentru Macintosh bazat pe implementarea Mozilla JavaScript 1.5 [7] . Este o componentă freeware pusă la dispoziție de Late Night Software . Interacțiunea cu sistemul de operare și aplicațiile terță parte este gestionată printr-un obiect MacOS . În afară de aceasta, limbajul este practic identic cu implementarea Mozilla. A fost propus ca o alternativă la limbajul AppleScript mai utilizat.

Elemente de limbaj

Variabile

Variabilele sunt de obicei tastate dinamic, adică sunt definite pur și simplu atribuindu-le o valoare sau folosind comanda let ; cele declarate în afara oricărei funcții sunt în vizibilitate „globală” sau accesibile de pe întreaga pagină web ; cele declarate în interiorul unei funcții sunt locale sau interne funcției respective. Pentru a trece variabile de la pagină la pagină, un dezvoltator poate seta un cookie sau poate utiliza un cadru sau o fereastră ascunsă în fundal pentru a le stoca.

Obiecte

Totul din JavaScript este fie o valoare primitivă, fie un obiect. Obiectele sunt entități cu unicitate (sunt egale doar cu ele însele) și care asociază numele proprietăților cu valori. Aceasta înseamnă că un obiect este un vector asociativ similar cu hashurile din Perl și Ruby sau cu dicționarele din Python , PostScript și Smalltalk .

JavaScript are mai multe tipuri de obiecte predefinite, în special Array , Boolean ( Boolean ), Date (obiecte care conțin o dată și o oră), Funcție ( funcții ), Matematică (obiect care conține funcții utilizate în calculele matematice), Număr (numere), Obiect ( obiecte ), RegExp ( expresii regulate ) și String ( șiruri ). Alte obiecte sunt „obiectele invitate”, definite nu de limbaj, ci de mediul de execuție. Într-un browser, obiectele gazdă tipice aparțin DOM : fereastră ( fereastră ), formular (mască), link ( link ) etc.

JSDOM.gif

Prin definirea unui constructor , puteți defini obiecte. JavaScript este un limbaj orientat pe obiecte bazat pe prototip. Aceasta înseamnă că moștenirea este între obiecte, nu între clase (JavaScript nu are clase). Obiectele moștenesc proprietăți din prototipurile lor.

Proprietăți sau metode suplimentare pot fi adăugate obiectelor individuale după ce acestea sunt create. Pentru a face acest lucru pentru toate instanțele create de un singur constructor, puteți utiliza proprietatea prototype a constructorului pentru a accesa obiectul prototip.

Exemplu: Crearea unui obiect 

 // constructor
Funcția MyObject (attributeA, attributeB)
{
  aceasta . atributA = atributA
  aceasta . atributB = atributB
}
 
// creați un obiect
obj = Obiectul meu nou ( „roșu” , 1000 )
 
// accesați un atribut de obiect
alert (obj. attributeA)
 
// accesați un atribut cu notația vectorială asociativă
alert ( obj [ "attributeA" ])

Simulează moștenirea

Ierarhia obiectelor din JavaScript poate fi imitată. De exemplu: 

 funcție Base ()
{
  aceasta . Override = _Override ;
  aceasta . BaseFunction = _BaseFunction ;
 
  funcție _Override ()
  {
    alert ( "Base :: Override ()" );
  }

  function _BaseFunction ()
  {
    alert ( "Base :: BaseFunction ()" );
  }
}
 
funcție Derive ()
{
   aceasta . Override = _Override ;
   funcție _Override ()
   {
     alert ( "Derive :: Override ()" );
   }
}

Deriva . prototip = new Base ();
 
d = new Derive ();
d . Override ();
d . BaseFunction ();

va avea ca rezultat ieșirea:

 Deriva :: Suprascrie ()
Base :: BaseFunction ()

Obiecte predefinite

Pe lângă faptul că permite definirea obiectelor, JavaScript oferă o serie întreagă de obiecte care pot fi utilizate pentru scripturile dvs.:

Matrice

O matrice este o asociere între numere întregi și valori de tip arbitrar. În JavaScript, toate obiectele pot asocia numere întregi și valori, dar matricile sunt un tip special de obiecte care au comportamente specifice și metode specializate pentru utilizarea indexurilor întregi (de exemplu, join , slice și push ).

Tablourile au o proprietate de length care este garantată să fie întotdeauna mai mare decât cel mai mare indice utilizat în vector. Se actualizează automat dacă creați o proprietate cu un index și mai mare. Scrierea unui număr mai mic în proprietatea length elimină indicii mai mari. Această proprietate este singura caracteristică specială a vectorilor, care îi diferențiază de alte obiecte.

Cu elementele matrice, puteți utiliza notația normală pentru a accesa proprietățile obiectului:

 myArray[1]
  
myArray["1"]

Aceste două notații sunt echivalente. Nu puteți utiliza notația punct sau șirurile cu o reprezentare alternativă a numărului:

 myArray.1 (eroare de sintaxă)
  myArray(1) (sintaxă incorectă, permisă numai de Internet Explorer)
  myArray["01"] (nu este la fel ca myArray[1] )

Declarația unui vector poate utiliza fie notația explicită, fie constructorul Array :

 myArray = [0,1,,,4,5]; (vectorul de lungime 6 cu 4 elemente)
 myArray = new Array(0,1,2,3,4,5); (vector cu lungimea 6 și 6 elemente)
 myArray = new Array(365); (vector gol cu ​​lungimea 365)

Tablourile sunt implementate astfel încât numai elementele definite să folosească memoria; sunt „vectori împrăștiați”. Setarea myArray[10] = 'qualcosa' și myArray[57] = 'qualcosaltro' folosește doar spațiu pentru aceste două elemente, ca pentru orice alt obiect. Lungimea matricei va fi întotdeauna raportată ca 58.

Structuri de control și condiționate

dacă ... altfel

Structura de control IF corespunde în italiană cu SE

Declarația conținută în paranteze va fi executată numai și numai dacă condiția este evaluată ca fiind adevărată, în caz contrar declarația conținută în ELSE va fi executată.

 dacă (condiție)
  {
     instrucțiuni;
  }

dacă (condiție)
  {
     instrucțiuni;
  }
  altceva
  {
     instrucțiuni;
  }

În timp ce bucla

 în timp ce (stare)
  {
     instrucțiuni;
  }

Faceți ... în buclă

 do
  {
     instrucțiuni;
  } while (condiție);

Pentru buclă

 for ([expresie inițială]; [condiție]; [expresie incrementală])
  {
     instrucțiuni;
  }

Pentru ... în buclă

Această buclă trece prin toate proprietățile unui obiect (sau elementele unui vector).

 pentru (variabilă în obiect)
  {
     instrucțiuni;
  }

Pentru ... de buclă

Această buclă trece prin toate valorile unui obiect (sau elementele unui vector).

 pentru (variabila obiect)
  {
     instrucțiuni;
  }

Declarație de comutare

 comutator (expresie)
  {
     valoarea cazului 1:
        instrucțiuni;
        pauză ;
     valoarea cazului 2 :
        instrucțiuni;
        pauză ;
     implicit :
        instrucțiuni;
  }

Funcții

O funcție este un bloc de instrucțiuni , cu o listă de argumente (posibil goale) și care poate avea un nume (deși nu este necesar). O funcție poate returna o valoare prin instrucțiunea return .

 funcție (poate fi goală)
  {
     instrucțiuni;
     expresie de întoarcere ;
  }

Numărul de argumente transmise la apelarea unei funcții nu trebuie neapărat să fie egal cu numărul de argumente ale definiției funcției (cu alte cuvinte, numărul parametrilor formali nu trebuie neapărat respectat atunci când se apelează funcția, adică în specificarea parametrilor curenți ). În cadrul funcției, lista argumentelor poate fi, de asemenea, menționată prin intermediul vectorului de arguments (acesta din urmă are proprietatea callee reprezentând un pointer către funcția în sine).

Fiecare funcție este o instanță a funcției , un tip de bază de obiect. Funcțiile pot fi create și atribuite ca orice alt obiect:

 var myFunc1 = funcție nouă ("alert ('Hello')");
   var myFunc2 = myFunc1;
   myFunc2 ();

produce ca rezultat:

 Buna ziua

Interacțiunea cu utilizatorul

Printre celelalte tehnici cu care un script JavaScript poate interacționa cu utilizatorul într-o pagină web, sunt următoarele:

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 "