Guida Javascript in Italiano

Se anche tu sei appassionato al mondo della programmazione informatica, e sooprattutto, più nello specifico, a quello dello sviluppo front-end, avrai certamente sentito parlare del linguaggio Javascript. Non di rado la risposta al "come è stato realizzato questo?" guardando l'interfaccia di un sito web, è, di fatti, da ricercare in Javascript. Se sei, tuttavia, alle prime armi, è bene chiarire una cosa: alla fine dei conti, Javascript cos'è? Vediamolo insieme!   Javascript cos'è? JavaScript è uno dei linguaggi di programmazione più popolari e utilizzati al mondo. Si tratta di un modo per modificare il comportamento dei siti web e di altre applicazioni, lasciando al linguaggio HTML la gestione dei contenuti.  La sua adozione continua ad aumentare velocemente, anche grazie a molte nuove idee che lo rigenerano, come Typescript, Angular, React e molti altri. Tra l’altro, secondo recenti calcoli, il linguaggio JavaScript è uno dei linguaggi più ecologici, come segnala anche l’articolo scientifico “Energy efficiency across programming languages”.     Cosa si può fare con JavaScript?  All’inizio il linguaggio Javascript era confinato nei browser per creare pagine web interattive, ma quei giorni sono finiti, grazie al grande supporto della comunità e agli investimenti di molte grandi aziende. Imparando JavaScript, oggi, si può lavorare come sviluppatore front end, back-end o full stack. Molto spesso, JavaScript è collegato ad una pagina HTML, linguaggio di markup con il quale convive sui siti web e in altre applicazioni. Per approfondire questo linguaggio, noi di Aulab abbiamo dedicato all’ HTML una guida specifica: Guida HTML e CSS in italiano. Si tratta di una guida approfondita che ti permetterà di esplorare il mondo del programmare in HTML e del linguaggio CSS a tutto tondo, per imparare a programmare e scoprire come creare un sito web da zero. Negli esempi di questa guida a JavaScript, le conoscenze di base sono date per acquisite: se non dovessi averle per nulla, basterà dedicare un po’ d’attenzione alla guida appena citata e il gioco sarà fatto!   JavaScript e ECMAscript Il linguaggio Javascript ti consentirà di creare applicazioni per il web e dispositivi mobili, ma anche applicazioni di rete in tempo reale come chat e streaming video ed altre applicazioni. Originariamente, il codice JavaScript è stato progettato per essere eseguito nei browser, quindi ogni browser ha ciò che chiamiamo un motore JavaScript e può eseguire il codice JavaScript. Spesso il nome JavaScript è collegato a quello di ECMAscript. Conoscere la differenza è necessario per diventare un appassionato ben documentato del linguaggio JavaScript. Il rebus è risolto osservando che JavaScript non definisce un singolo oggetto, ma è un’espressione generica che si riferisce a diversi elementi. Una cosa è la lingua di base (ECMAScript), un’altra è la raccolta delle Web API, tra cui quelle relative al DOM (Document Object Model). Quindi, la lingua di base di JavaScript è standardizzata dal comitato ECMA TC39 come linguaggio ECMAScript. "ECMAScript" è il termine per lo standard linguistico, ma "ECMAScript" e "JavaScript" sono spesso usati in modo intercambiabile. Il linguaggio viene usato anche in ambienti non browser, ad esempio nel server Node.js che vedremo più avanti nella nostra guida.   Il linguaggio JavaScript è un linguaggio molto usato lato front-end per widget, convalide e molte altre cose. Si tratta di un linguaggio di programmazione versatile e popolare, adatto a moltissime applicazioni e casi d'uso. Una lista di applicazioni può essere la seguente:   Interfacce utente, interattive e dinamiche, per le applicazioni Web; App mobili, magari con framework tipo React Native e Cordova; Giochi: gestisce ambienti 2D e 3D con varie librerie (Phaser, Pixi.js, Babylon.js…); Realtà virtuale, del tipo basato sul Web (A-Frame, React 360…); Web Scraping, per raccogliere dati da pagine Web utilizzando librerie (Puppeteer, Cheerio…); Animazione Web, con animate.css, GreenSock ed altre librerie; Applicazioni desktop, ad esempio con Electron; Mappe interattive, con Google Maps API ma anche leaflet.js ed altre librerie; Modifica di contenuti, ad esempio immagini con Pixastic e video con ffmpeg.js; Automazione di attività ripetitive sul Web (Selenium, Playwright…).   In questa guida imparerai gli elementi di base del linguaggio JavaScript, per usarlo subito sia direttamente in una finestra del browser (console) eseguito nella stessa finestra, sia con un editor di codice (VBC) eseguito su pagine del browser da Lite Server, un server interno a VBC.

Sarai ansioso di programmare in pratica. Ovviamente, ogni linguaggio di programmazione ha le sue specificità che richiedono un apprendimento teorico, prima che pratico. Nel caso di JavaScript, però, c’è una scappatoia che permette di fare le prime esperienze senza dover sapere molto di teoria. Infatti, se normalmente lo sviluppo software richiede o una soluzione online in cloud, oppure un ambiente di sviluppo sul proprio computer, il linguaggio JavaScript rappresenta un’eccezione. Offre, infatti,  una soluzione immediata: il primo posto per eseguire il codice JavaScript è, come già menzionato, il browser stesso. Per motivi storici, qualsiasi browser ospita il software minimo necessario per modificare, eseguire e visualizzare i risultati del programma. Le istruzioni variano da browser a browser, quindi bisogna vedere come fare a seconda del browser e della versione. Ovviamente, in questo modo non si possono fare moltissime cose, ma intanto si può iniziare senza alcuna preoccupazione. Iniziamo, quindi, subito a programmare con l’aiuto dell’ambiente di sviluppo, primitivo ma efficace, già inserito in ogni browser. Nel tempo, marketing e tecnologia hanno introdotto numerose varianti in ciascuno dei browser. Per operare, di solito si parte da una pagina vuota e si va nell'area di modifica, dove si accede alla console -che è anche la periferica di output- e il runtime. Scrivendo il codice nella finestra apposita, noterai che la stessa console ti suggerisce le varie possibilità di parole chiave, variando ogni volta che aggiungi un carattere. All’inizio questa feature ti disturberà, ma più avanti diventerà una preziosa risorsa per evitare errori e velocizzare la digitazione. Ma vediamo cosa succede con i principali software sul mercato. Come saprai, i browser vengono aggiornati frequentemente, con cambiamenti generalmente minimi in nomi delle opzioni e procedure da eseguire. Le indicazioni che trovi qui di seguito potrebbero non essere perfette e se non sei esperto potresti dover cercare la nuova procedura. Sii paziente, è semplice!   Chrome per MacOs Se hai un sistema con MacOS probabilmente userai il browser Chrome. Vediamo come si carica la console JavaScript con Chrome per Mac. Apri Chrome. Puoi abilitare la console in due modi, dal menu di sistema e dal menu di Chrome.     Scegli Visualizza; Dal menu a tendina scegli “Opzioni per sviluppatori”; Quindi scegli “Console JavaScript”. A seconda della versione di MacOS e di Chrome che hai, queste indicazioni possono variare leggermente.   Il secondo modo prevede di attivare la console dal menu di Chrome per Mac.   Scegli Visualizza; Dal menu a tendina scegli “Altri strumenti”; Quindi scegli “Strumenti per sviluppatori”. Appare un box a destra. Dal suo menu, clicca su “Console” e il gioco è fatto! La parte destra dello schermo dedica, ora, una sezione alla console JavaScript.       Noterai subito alcuni messaggi d’errore in rosso. Non ti preoccupare, è del tutto normale. Infatti, la console JavaScript non nasce solo per eseguire il codice che scriverai tu, ed è, quindi, normale che riporti alcune informazioni di sistema come eventuali errori d’esecuzione (sono più frequenti di quel che si pensa, ma in genere non creano veri problemi). Come prova, scrivi il codice che chiede alla console di stampare un testo: console.log('Ecco il primo' + ' messaggio'); Premendo “invio” il programma viene eseguito: “Ecco il primo messaggio" viene stampato sulla console, ovvero nella riga successiva a quella del comando. Come si vede, i messaggi di testo possono essere concatenati con il segno +. L’esecuzione porta il sistema a stampare sullo schermo anche l’espressione undefined. Succederà spesso, ma tu non devi preoccupartene! Infatti, JavaScript si attende che molte quantità in gioco vengano definite prima del loro uso: se così non fai, ti avvisa che è stato usato qualcosa di non definito, undefined. La console, però, esegue lo stesso il codice. L’indicazione alla fine di ogni esecuzione riporta VM e un numero. VM sta per virtual machine, il numero è quello dell’esecuzione nel flusso corrente. Quando apriamo la console, infatti, inseriamo i nostri programmi tra quelli che lei sta già eseguendo. L’esecuzione porta il sistema a stampare sullo schermo anche l’espressione undefined. Succederà spesso, ma tu non preoccupartene! Infatti JavaScript si attende che molte quantità in gioco vengano definite prima del loro uso: se così non fai, ti avvisa che è stato usato qualcosa di non definito, undefined. La console, però, esegue lo stesso il codice.  Oltre ai testi, ovviamente si può operare anche con l’aritmetica di base:   2*64  (suggerisce e stampa) 128.   Ovviamente, ci sono possibilità più interessanti, come le funzioni. A questo indirizzo puoi trovarne un pratico elenco. Una semplice e ben nota funzione è il generatore di numeri casuali reali, chiamato math.random. Digitandolo con la sua sintassi: Math.random() restituisce un numero reale compreso tra 0 e 1. Un ulteriore passo può essere aggiungere un confronto booleano: Math.random() > 0.6 Risponderà vero o falso a seconda del numero generato.   Firefox per PC Vediamo come si carica la console JavaScript con Firefox per PC. Apri una nuova pagina, quindi vai in alto a destra e clicca sulle tre righe, che attivano  il menu Strumenti. Scendi tra le opzioni e seleziona “Altri strumenti”     Scegli ora “Strumenti di sviluppo web”.     Si apre una nuova pagina, con la console posta in fondo, orizzontalmente. Come prova, scrivi il codice che chiede alla console di stampare un testo: console.log('Ecco il primo' + ' messaggio'); Firefox tiene molto alla sicurezza. Copiare codice da qualche parte ed incollarlo nella finestra della console non è una pratica sicura, per cui se hai fatto questo il browser ti chiederà prima di attivare il copia ed incolla scrivendo di seguito una frase tipo “attiva console”. Questa richiesta va esaudita una sola volta, perché poi il browser la ricorderà. Premendo “invio” il programma viene eseguito: “Ecco il primo messaggio" viene stampato sulla console, ovvero nella riga successiva a quella del comando. Come si vede, i messaggi di testo possono essere concatenati con il segno +. Usare questa console comporta che appaia sullo schermo anche l’imprevista espressione undefined. Il motivo è semplice: JavaScript chiede che le quantità in gioco non possano essere usate direttamente quando servono, ma debbano essere definite prima del loro uso. Se così non fai, il motore di esecuzione trova le quantità non definite e quindi ti dice di aver trovato qualcosa di undefined. È un’ informazione formale, non sostanziale: il codice viene eseguito lo stesso.   Edge per PC Dopo aver aperto una pagina bianca, bisogna fare clic con il tasto destro su un'area vuota e andare a    >Esamina.    Qui, appare Console. Se non appare, bisogna individuare il “caporale” >> che indica le ulteriori opzioni: un menù a tendina le elencherà, e tra loro troverai la Console.     Una volta selezionata questa opzione si aprirà la console JavaScript, che eseguirà codice valido. Come prova, scrivi il solito codice che chiede alla console di stampare un testo: console.log('Ecco il primo' + ' messaggio'); Per eseguire il programma, premi “invio”. Il sistema visualizzerà “Ecco il primo messaggio" sulla console, nella riga successiva a quella del comando. Nota che i messaggi di testo possono essere giustapposti -si dice concatenati- usando il segno +.     Non avendo inserito degli spazi alla fine di “primo” o all’inizio di “messaggio” , il sistema scrive “primomessaggio” tutto attaccato! Sai come fare per risolvere questo errore?  Noterai inoltre l’espressione undefined. E’ un messaggio formale, non sostanziale: il programma viene eseguito lo stesso. Ti ricorda, però, bisogna dire a JavaScript quali quantità userai -ad esempio le variabili- prima di impiegarle. Quando trova una quantità non dichiarata in anticipo, ti avvisa che è stato usato qualcosa di non definito, appunto undefined.  Chrome per PC Nei nostri esempi, invece, useremo Chrome. Dopo averlo aperto, bisogna fare clic con il tasto destro su un'area vuota e andare a    >Ispeziona.    Sulla destra si aprono gli strumenti per sviluppatori di Chrome. Una volta selezionata la scheda “console” si aprirà la console JavaScript, che eseguirà codice valido. Come esempio, scriviamo qualcosa sulla console. Digita: console.log('Ecco il primo' + 'messaggio'); Premendo “invio”, il comando viene eseguito. Sulla riga successiva a quella del comando stesso appare la scritta “Ecco il primo messaggio". Il comando unisce due testi grazie all’operatore +. Questa operazione, che in aritmetica si chiama somma, nelle stringhe si chiama concatenazione. Scrivere in linguaggio JavaScript richiede attenzione. Ecco alcuni dei più frequenti errori d’attenzione che pregiudicano un risultato corretto. Sai individuare gli errori delle linee precedenti l’ultima?   L’indicazione alla fine di ogni esecuzione riporta VM e un numero. VM, come già detto, sta per virtual machine; il numero è quello dell’esecuzione nel flusso corrente. Quando apriamo la console, infatti, inseriamo i nostri programmi tra quelli che lei sta già eseguendo. Avrai senz’altro notato che la scritta undefined appare più volte. In questo modo, il sistema ti avvisa che ha usato qualcosa di “non definito”. Questo accade perché JavaScript richiede che le quantità necessarie per lo sviluppo del software, a partire dalle variabili e dalle costanti, non vengano usate direttamente bensì vengano definite prima del loro uso. Undefined è un messaggio formale, non sostanziale: l’esecuzione avviene comunque.  Oltre ai testi, ovviamente si può operare anche con l’aritmetica di base:   2*64  (suggerisce e stampa) 128.   Un potente sistema di sviluppare codice è dato dalle funzioni. Si tratta di codice già scritto da altri e riusabile semplicemente, o anche scritto da voi una sola volta e poi richiamabile ogni volta che serva. Il sito di Mozilla ne fornisce un elenco. Un esempio spesso usato nei programmi è il generatore di numeri casuali, math.random. Usato nel modo più semplice: Math.random() restituisce un numero reale compreso tra 0 e 1. Lo si può combinare con le funzioni di confronto: Math.random() > 0.6 In questa forma, il comando diventa una domanda che può avere come risposta solo Vero o Falso. Infatti quella linea di codice risponderà vero o falso a seconda del numero generato a caso

Come vedremo più avanti, la sintassi dei nomi di file con codice JavaScript prevede il nome, il punto e l’estensione js: non è certo la cosa più sorprendente che si possa pensare!Per quanto interessa noi, il legame tra il linguaggio JavaScript ed il linguaggio HTML è in questa semplice struttura di base: <h1>Verifichiamo la coesistenza con un file di saluto</h1> <script src="code/saluti.js"></script> dove il codice raccolto nel file saluti.js viene inserito all’interno della pagina HTML e chiamato al momento giusto. Qui non trovi il codice di saluti.js: è un esempio teorico.   È, qui, necessario evidenziare un’attenzione sull’uso della console del browser. Ogni volta che ne apri una, infatti, lei ricorda tutto quello che fai in quella sessione.  Spesso facendo esempi tra loro simili, usi nomi che hai già usato e che, quindi, pur facendo parte di codice corretto, non vengono eseguiti ma lasciano un messaggio di errore. Per questo, devi acquisire la sensibilità necessaria a capire quando aprire una nuova console.

In questa breve guida vedremo come poter scrivere ed eseguire del codice javascript direttamente dal nostro browser su un editor online: non preoccuparti, è facilissimo! Ti basterà seguire questi steps. Pronto? Iniziamo! Creare un account su CodePen Apri il tuo browser e vai su codepen.io Clicca su "Sign Up" o "Registrati" per creare un account. Inserisci il tuo nome, indirizzo email e crea una password. Dopo aver confermato il tuo account tramite l'email di verifica, accedi a CodePen. Creare un nuovo progetto su CodePen Una volta effettuato l'accesso, clicca su "New Pen" o "Nuovo Pen" nella parte superiore della pagina. Vedrai tre sezioni principali: HTML, CSS e JavaScript. Puoi scrivere il codice in ognuna di queste sezioni. Scrivere Codice HTML, CSS e JavaScript Ecco degli esempi di codice che puoi inserire nelle rispettive sezioni: HTML: <!DOCTYPE html> <html> <head> <title>Il mio primo progetto</title> </head> <body> <h1>Ciao, mondo!</h1> <p>Questo è il mio primo progetto su CodePen.</p> </body> </html> CSS: body { background-color: lightgray; font-family: Arial, sans-serif; } h1 { color: blue; } p { color: darkgreen; } JavaScript: document.querySelector('h1').addEventListener('click', function() { alert('Hai cliccato sull\'intestazione!'); }); Come visualizzare i risultati Dopo aver scritto il codice, puoi vedere immediatamente i risultati nella sezione "Result" o "Risultato" nella parte destra dell'editor. Nel nostro esempio, vedrai l'intestazione blu e il paragrafo verde su uno sfondo grigio chiaro. Condividere il tuo progetto su CodePen Se sei soddisfatto del tuo progetto e vuoi condividerlo con gli altri, puoi cliccare su "Save" o "Salva" nella parte superiore dell'editor. Otterrai un link unico che puoi condividere per far vedere agli altri il tuo progetto.

Come ogni linguaggio di programmazione che si rispetti, il linguaggio JavaScript ha un insieme preciso di regole su come è corretto (cioè obbligatorio) scrivere i vari costrutti, sia su cosa è consigliato (ma in sé non obbligatorio), sia, infine, di cosa è perdonato e può essere scritto in modi formalmente scorretti. Quest’ultima possibilità ti fa sorridere, ma se conosci il linguaggio HTML ti renderai subito conto che quel linguaggio di markup consente di dimenticare molti tag ed altre questioni di base, con pedaggi ridotti o anche nulli.   Per collegare gli oggetti alle proprietà (attributi, metodi) JavaScript usa la cosiddetta dot notation, la notazione col punto. Wikipedia la definisce bene: “è uno schema sintattico molto diffuso nei linguaggi di programmazione orientati agli oggetti per gestire le proprietà degli oggetti, come gli attributi e i metodi.” Storicamente, la dot notation deriva dalla sintassi usata nei linguaggi della famiglia del linguaggio C per accedere ai campi di dati strutturati. Fra i linguaggi di programmazione orientati agli oggetti che adottano questo schema ci sono quelli derivati C, come C++, Java e C#.   Lo schema generale è il seguente: <oggetto>.<proprietà> Wikipedia fa degli esempi teorici ambientati nella vita comune, che spiegano benissimo il costrutto. Un esempio che si trova in letteratura ipotizza l’applicazione della notazione a punto ad un’azione della vita pratica. Per impostare al valore 12 il volume di un altoparlante, ad esempio, si userebbe la seguente istruzione: altoparlante.volume = 12 Per  impostare il volume del subwoofer di un impianto di home theater: hometheater.subwoofer.volume = 12 Rispettare la sintassi JavaScript non garantisce la correttezza del codice, minacciato dagli errori di semantica, come l’uso di una variabile non dichiarata. Nell’ implementazione classica di JavaScript su browser, inoltre, è possibile commettere errori di sintassi, come ad esempio dimenticare le parentesi o i punti e virgola. Inoltre, è possibile commettere errori logici, come utilizzare una funzione o un metodo in modo non corretto o utilizzare un tipo di dati in modo non appropriato. Questo perché il motore implementato nei browser implementa l’automatic semicolon insertion (ASI), che inserisce automaticamente i punti e virgola grammaticalmente necessari. Ciò significa che, anche se si dimenticano i punti e virgola, il codice verrà comunque eseguito correttamente. Spesso, però, si confonde l’implementazione di JavaScript puro con quella di altre soluzioni compatibili. Per esempio, l’ASI non è implementato in Node.js, per cui, in quell’ambiente, l'omissione di punti e virgola può causare errori di sintassi e di esecuzione del codice.

Gli operatori in JavaScript sono simboli o parole chiave che permettono di eseguire operazioni specifiche tra variabili, costanti o valori letterali. Essi sono fondamentali nella programmazione, poiché consentono di manipolare i dati, confrontare valori e controllare il flusso di esecuzione del codice. Gli operatori si dividono in diverse categorie, tra cui operatori aritmetici, condizionali, logici, di assegnazione e di confronto. In JavaScript, gli operatori aritmetici sono utilizzati per eseguire operazioni matematiche, come addizione, sottrazione, moltiplicazione e divisione. Gli operatori condizionali permettono di confrontare valori e stabilire relazioni tra di essi, come maggiore, minore, uguale e disuguale. Gli operatori logici sono utilizzati per creare espressioni booleane, combinando condizioni con operazioni logiche come and, or e not. Gli operatori di assegnazione servono per assegnare valori a variabili, mentre gli operatori di confronto sono usati per confrontare i valori e i tipi di due operandi. La conoscenza degli operatori e del loro funzionamento è essenziale per scrivere codice JavaScript efficiente e comprensibile, poiché facilita la manipolazione dei dati e il controllo del flusso del programma. Vediamoli più da vicino!  Operatori aritmetici in JavaScript Quando parliamo di operatori aritmetici nel linguaggio JavaScript non è difficile comprendere il concetto: gli operatori aritmetici sono quelli che conosciamo fin da piccoli: per, diviso, più e meno. A questi va aggiunto il resto, indicato con il %. Il più funziona anche come concatenatore di caratteri, per cui “Marco”+”Polo” genererà “MarcoPolo”.   Operatori condizionali in JavaScript Spesso ci troviamo a decidere in che rapporto determinate grandezze siano tra loro. In particolare se una grandezza, rispetto ad un’altra, è uguale, maggiore o minore. Per questa necessità ci sono tre operatori di base:   > maggiore < minore == uguale (il segno è doppio) NB. È importante notare che l'operatore == confronta solamente i valori, mentre l'operatore === (triplo uguale) confronta sia i valori che i tipi. Analogamente, l'operatore di disuguaglianza !== confronterà sia i valori che i tipi, mentre != confronterà esclusivamente i valori.   Questi caratteri li conosciamo dalle disuguaglianze e saranno particolarmente utili nel caso in cui il nostro programma dovrà valutare ipotesi: se il dato è maggiore di 50, fai questo, altrimenti fai quest’altro; se il giorno della settimana è lunedì, allora fai questo; e così via.   I tre operatori di base possono essere completati da altri due composti, ovvero:   >= maggiore o uguale <= minore o uguale   Operatori logici in JavaScript Gli operatori logici nel linguaggio JavaScript sono and, or, not. In JavaScript esiste anche l’NC, vale a dire il nullish coalescing. I simboli usati nel codice sono && per and, || per or,  ! per not e ?? per l’NC.   L’NC è stato aggiunto successivamente ed ha una funzione utile ma che non è necessario trattare in questa guida. Tutti i linguaggi di programmazione hanno i propri tipi di dato speciali. Tuttavia, ne esistono tre che sono sempre presenti: numeri, stringhe e logici.

Costanti in JavaScript Le costanti sono un tipo di dato che non varia nel tempo. Per dichiararle in JavaScript si una la parola chiave const. I classici esempi riguardano un numero o un nome: const name = 'Marco' const num = 72 console.log(name, num) Scriverà di seguito Marco 72. Le costanti, come dice il nome, non possono essere modificate. Se ora cerchiamo di assegnare a name un altro valore, ad esempio Paolo, il sistema non lo consentirà. Eseguendo (senza ripetere const, essendo la costante già stata creata): name = “Carlo” La console risponderà con qualcosa tipo Uncaught TypeError: Assignment to constant variable. Variabili in JavaScript Se vuoi avere dati modificabili, invece, devi usare le variabili, anche dette bindings. Le variabili possono contenere numeri ed espressioni, ma non keyword. Ecco la lista di keywords riservate al sistema e, quindi, non disponibili al programmatore:   break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new package private protected public return static super switch this throw true try typeof let void while with yield   Per dichiarare una variabile per la prima volta, si può usare let o var. Queste due parole hanno un ruolo leggermente diverso. L’uso del let è oggi consigliato. Vediamo la differenza tra le due dichiarazioni. Let viene usata all’interno di blocchi di codice definiti (l’area di applicazione si chiama scope). Se cerchi di usare una variabile dichiarata con let all’esterno del suo blocco, il sistema ti risponderà con un messaggio di errore. In generale, un programma si compone di più aree scope. Per usare delle variabili su tutto il programma, invece, si deve usare Var. Guarda questo esempio sulle variabili semplici. let nome = 'Marco' console.log(nome) stampa Marco nome = ‘Paolo’ In questo caso, non genera un messaggio d’errore e modifica effettivamente il contenuto della variabile nome. Eseguendo console.log(nome) stampa Paolo

Avevamo già affrontato la questione inerente ai tipi di dato in PHP. In questa sede parleremo, invece, dei tipi di dato nel linguaggio JavaScript. I tipi di dato sono elementi che possono essere semplici o complessi. Il linguaggio JavaScript comprende cinque tipi di dato semplici o primitivi: numeri, stringhe, booleani, null e undefined. In questa guida utilizzeremo i primi tre. JavaScript prevede anche un tipo di dato complesso, gli oggetti (object), al cui interno ricadono altri tipi di dato tra i quali gli array JavaScript, le espressioni regolari e le funzioni in JavaScript. Tipi di dato semplici in JavaScript Tipo di dato numero in JavaScript Tutti conosciamo i numeri e la relativa aritmetica. Qualsiasi numero che si può esprimere solo come sequenza delle cifre da 0 a 9 è un numero di un tipo specifico, detto intero: 35 è un numero intero. I numeri decimali vengono espressi grazie al punto, non con la virgola come faremmo in Italia, dove il punto (che in realtà dovrebbe stare in alto) indica le migliaia. Quindi nella sintassi JavaScript 3,5 non è un numero, mentre 3.5 è un numero decimale. Esiste un altro carattere per rappresentare numeri molto grandi, ed è la e, che indica “esponente”; quanto alla sua destra equivale a “10 elevato alla”: con questa notazione, il numero “italiano” 4.655.000.000 diventa 4.655e9. Come vedrai più avanti, proseguendo in questa guida, scoprirai che esistono anche numeri speciali, come Infinity o NaN (not a number), di grande aiuto in numerosi casi pratici. Tipo di dato carattere (string) in JavaScript Le stringhe, traduzione di string, sono conosciute come testo composto da caratteri. Poiché storicamente i caratteri venivano usati sia come testo, sia come comandi, in tutti i linguaggi di programmazione esistono particolarità che fanno la stessa cosa, rendendo difficile immaginare se una sequenza di caratteri rappresenti un testo o una serie di comandi.   In generale, le stringhe sono inserite all’interno di virgolette. Certo, detta così sembra molto facile, ma forse non sai che esistono molti tipi di virgolette.   Virgolette singole, virgolette doppie o apici inversi (backticks) sono quelle usate nel linguaggio JavaScript. Devi fare molta attenzione quando le usi, perché non sempre sono interscambiabili!   ' Virgoletta singola ' " Virgoletta doppia " ` apici inversi (backticks)` “ virgolette da wordprocessor ”   Inoltre, se sei abituato a scrivere con un wordprocessor, non devi usarlo per scrivere codice JavaScript, perché questo usa un ulteriore tipo di virgolette, che ti da errore in caso di esecuzione. Non per ultimo, una serie di caratteri speciali vengono inseriti nel testo preceduti dalla barra inversa (backslash): trovi queste sequenze di caratteri indicate come escape sequences. Ecco le principali usate dal linguaggio JavaScript, nella lista di WikiPedia:   \' single quote \" double quote \\ backslash \n new line \r carriage return \t tab \b backspace \f form feed \v vertical tab - in alcuni casi, \x0B    Scrivendo  "Nome\nCognome" E mandandolo in stampa, verrà visualizzato come Nome Cognome Perché \n indica il newline, ovvero lo spostamento su una nuova linea. Inserire dei numeri in una stringa li rende stringhe, quindi non sono direttamente utilizzabili per calcoli matematici.   Metodi per le stringhe in JavaScript  Per operare sulle stringhe bisogna conoscerle bene. Una cosa che devi sapere è che ciascun carattere di una stringa può essere raggiunto mettendone il numero d’ordine tra parentesi quadre.  let testo = "AUlab" sottintende che   testo[0] = "A" testo[1] = "U" testo[2] = "l" testo[3] = "a" testo[4] = "b"     Un punto non banale è che le stringhe sono sostanzialmente costanti, cioè non possono essere modificate. Per ottenere quasi lo stesso risultato, dovrai usare una sintassi che… sfida le leggi del tempo! testo = 'S' + testo[1] + testo[4] ridefinirà “testo” come stringa di tre caratteri, ovvero S, U e b.  In questa assegnazione il tempo scorre da destra verso sinistra: prendi il carattere al posto 4, poi quello al posto 1, poi la S (fin qui testo="AUlab") e poi metti i tre caratteri in ordine inverso a quello di lettura in una stringa che vale SUb e alla quale viene dato il nome testo. All’assegnazione ad una nuova stringa di un vecchio nome, il contenuto della stringa precedente viene cancellato e non esiste altro che la nuova stringa. Misteri del tempo! Proviamo, ora, a fare una ricerca di base all’interno di una stringa. Vedrai molte cose nuove! Questa ricerca si fa applicando indexOf alla stringa testo: let testo = 'Ricerca di R'; alert(testo.indexOf('Ricerca')); Il risultato sarà il seguente: Innanzitutto notiamo alert, che rende la risposta all’interno di un box con richiesta di conferma. Si tratta di un metodo, ovvero una funzione specifica di quel tipo di oggetto. Ecco perché digitando alert(testo.indexOf('Ricerca')); sarà un piccolo box a comunicarti la risposta:  0    cioè zero: la stringa “Ricerca” è stata trovata all’interno di testo, e parte dal primo carattere, quello di posizione 0. Se, poi, chiedi una stringa che non è presente in testo, ad esempio AUlab: alert(testo.indexOf('AUlab')); La risposta sarà -1, ad indicare che la ricerca non ha avuto successo. Ora prova alert(testo.indexOf("di")); Puoi immaginare come risponderà la console? Infine, chiedendo di trovare ‘R’, la risposta sarà sempre e solo 0. Dentro alla stringa testo, di "R" ce ne sono due, ma questo metodo trova solo la prima occorrenza da sinistra.   Javascript substring: il metodo substring() in Javascript Il metodo substring() è un metodo incorporato nelle stringhe JavaScript che consente di estrarre una parte specifica di una stringa. Prende due parametri: l'indice di inizio e l'indice di fine della sottostringa desiderata. Il metodo quindi restituisce la sottostringa compresa tra gli indici specificati, inclusivo dell'indice di inizio ma esclusivo dell'indice di fine. La sintassi del metodo substring() in JavaScript è la seguente: stringa.substring(indiceInizio, indiceFine); L'indiceInizio è l'indice iniziale della sottostringa desiderata. Se negativo o non specificato, viene considerato come 0. L'indiceFine è l'indice finale della sottostringa desiderata. Se non specificato, il metodo considererà la lunghezza totale della stringa come indiceFine. Per comprendere meglio come funziona il metodo substring() in JavaScript, consideriamo alcuni esempi pratici: let str = "Hello, world!"; let sottostringa1 = str.substring(0, 5); console.log(sottostringa1); // Output: "Hello" let sottostringa2 = str.substring(7, 12); console.log(sottostringa2); // Output: "world" let sottostringa3 = str.substring(7); console.log(sottostringa3); // Output: "world!" I metodi che operano sulle stringhe sono molti. Puoi trovare altri esempi in questa pagina di Mozilla, purtroppo in inglese.   Tipo di dato booleano e logico in JavaScript I classici valori booleani sono vero (true) e falso (false). Sono molto usati nella programmazione informatica per la verifica di condizioni:   10 > 9 porta al risultato true  

In termini generali, un oggetto è una qualsiasi entità che raccolga dati all'interno di un programma o sistema.  Ciascun oggetto può essere composto di vari tipi di dato, ciascuno con le sue caratteristiche e le operazioni a lui consentite, a seconda di come viene definito. Poiché si tratta di insiemi di elementi che possono essere modificati, bisogna definire gli oggetti come variabili.   Per comprendere meglio, parti da un insieme di quattro dati, anche composti: 1 “Two” three: 3 4, 5 (due cifre separate da una virgola)   Un modo neutro per definire un oggetto con questi dati è il seguente: let myObject = { "0": 1, "1": "two", "2": { "three": 3 }, "3": [4, 5] }; Per vederlo nel browser bisogna aggiungere l’output su console: console.log(myObject); stampa tutti gli elementi, probabilmente in una forma compatta di questo tipo: {0: 1, 1: 'two', 2: {…}, 3: Array(2)} console.log(myObject[2]); Mostra solo il terzo. Ricorda che myObject è una variabile, quindi puoi cambiarne i valori. myObject[2] = [4, 8, 16] Non segnala errore, e  console.log(myObject); segnala il nuovo valore del terzo elemento, forse in questa forma: 0: 1, 1: 'two', 2: Array(3), 3: Array(2)} Dove l’elemento di indice 2 è segnalato con Array(3), un modo diverso rispetto a prima, ad indicare la modifica. Ed ecco una domanda per te: è possibile che gli elementi dell’array JavaScript siano a loro volta un array? La risposta è talmente ovvia! È opportuno ricordare che esistono diversi modi per creare un oggetto in JavaScript. Proviamo a fare una prima lista: let object = new Object(); // la cosiddetta notazione di costruttore: let object = {key1: value1, key2: value2, ...} // notazione chiave-valore function MyObject(param1, param2) { questa.proprieta1 = param1; questa.proprieta2 = param2; } // con una funzione Un modo più complesso, che non dettaglieremo, prevede l’uso di una classe ES6, secondo le specifiche ECMAScript. In ogni caso, una volta creato l'oggetto, è possibile accedere e modificare le sue proprietà e metodi utilizzando la notazione a punti (object.property).   Come hai letto prima, Array, Espressioni regolari e anche funzioni sono oggetti. Vediamo i primi due in dettaglio.

Sappiamo, dunque, che il software opera in vario modo su quantità chiamate dati. D’accordo, magari è una frase un po’ banale, ma è l’unica da cui partire. Come abbiamo visto, i dati sono classificati in svariate categorie, dette tipi. Numeri e stringhe di caratteri sono esempi di tipo di dato, che in prima analisi somigliano a numeri e caratteri che conosci dall’uso quotidiano. Nella programmazione informatica, però, tutto richiede un approfondimento, anche la definizione di numero e di carattere. Ciascun linguaggio di programmazione ha le sue specificità, anche sui dati. Nel linguaggio JavaScript è opportuno ricordare cosa sono array JavaScript e object.   Come abbiamo detto, esistono tipi di dato più complessi, come elenchi di dati a una o più dimensioni. Questi vengono chiamati array. Bisogna ricordare che in informatica, generalmente (ma non sempre!), si numerano le cose partendo da 0. Nel linguaggio naturale, invece, partiamo dal “primo”, che sottintende 1. Quindi il sesto elemento è quello di indice 5. Grazie a questa accortezza puoi raggiungere qualsiasi elemento. Per esempio, per raggiungere il sesto elemento (di indice 5) hai a disposizione due sintassi JavaScript:   Prima sintassi: numbers["0"]  Seconda sintassi: numbers.0   Le due sintassi sono diverse. La dot notation, quella con il punto, non funziona se l’elemento inizia con un numero o contiene spazi o caratteri speciali. Vediamo come fare in pratica.   Nel caso di array di una dimensione possiamo definirli semplicemente così: let valori = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; Esistono altri modi, ad esempio con la keyword array: let valori = Array.from({length: 10}, (_, i) => i); Torniamo alla forma semplice. Provando ad eseguire nel browser queste due semplici linee: let valori = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(valori[5]) Il risultato sarà la stampa del sesto elemento, ovvero il numero 5. Lo stesso avverrebbe se la lista fosse più complessa: let nomi = ["Maria", "Paola", "Francesca", "Silvia", "Roberta", "Alessandra", "Stefania", "Elisa", "Chiara", "Ginevra"]; console.log(nomi[5]) stampa il sesto elemento, ovvero il nome “Alessandra”

Nel capitolo precedente abbiamo appurato che, in Javascript, gli array sono potenti strutture di dati che consentono di orgnizzare e mainpolare delle collezioni di elementi. Ciò posto, in JavaScript esistono molte operazioni consentite per lavorare sugli elementi dell’array, dette metodi, che consentono di eseguire operazioni come l'aggiunta o la rimozione di elementi, la ricerca, la trasformazione e molto altro ancora. Tra questi, push(), pop(), shift(), e unshift() per aggiungere o rimuovere elementi dall'inizio o dalla fine dell'array JavaScript, oppure sort() e reverse() per ordinare gli elementi all'interno dell'array. In questo articolo, esploreremo alcuni dei metodi più comuni degli array in JavaScript e vedremo come possono essere utilizzati per migliorare la manipolazione dei dati. Vediamoli singolarmente. Metodo sort() Javascript  let nomi = ["Maria", "Paola", "Francesca", "Silvia", "Roberta", "Alessandra", "Stefania", "Elisa", "Chiara", "Ginevra"]; nomi.sort(); console.log(nomi); fornisce in uscita la seguente lista: ['Alessandra', 'Chiara', 'Elisa', 'Francesca', 'Ginevra', 'Maria', 'Paola', 'Roberta', 'Silvia', 'Stefania']. Metodo reverse() Javascript  Il metodo reverse() inverte l'ordine degli elementi all'interno di un array. let array = [1, 2, 3, 4, 5]; array.reverse(); console.log(array); // Output: [5, 4, 3, 2, 1] Il metodo reverse() modifica l'array originale, invertendo l'ordine degli elementi al suo interno. L'array viene quindi stampato sulla console per mostrare l'ordine invertito degli elementi. L'utilizzo del metodo reverse() può essere utile quando è necessario manipolare gli elementi in un ordine inverso rispetto a quello originale, ad esempio quando si deve iterare sull'array partendo dall'ultimo elemento fino al primo.   Metodo push() Javascript  Il metodo push() consente di aggiungere uno o più elementi alla fine di un array Javascript. let array = [1, 2, 3]; array.push(4); console.log(array); // Output: [1, 2, 3, 4] Metodo pop() Javascript  Il metodo pop() rimuove l'ultimo elemento di un array e lo restituisce. let array = [1, 2, 3, 4]; let removedElement = array.pop(); console.log(array); // Output: [1, 2, 3] console.log(removedElement); // Output: 4 Metodo shift() Javascript  Il metodo shift() rimuove il primo elemento di un array e lo restituisce. let array = [1, 2, 3]; let removedElement = array.shift(); console.log(array); // Output: [2, 3] console.log(removedElement); // Output: 1 Metodo unshift() Javascript  Il metodo unshift() consente di aggiungere uno o più elementi all'inizio di un array Javascript. let array = [2, 3]; array.unshift(1); console.log(array); // Output: [1, 2, 3]

In un linguaggio ad oggetti, anche le espressioni regolari sono degli oggetti. Già… ma cosa sono le espressioni regolari? Le espressioni regolari sono pattern, ovvero sequenze di caratteri (stringhe), che grazie a generalizzazioni possono identificare insiemi di stringhe molto più complessi. Le espressioni regolari, anche dette RegExp, formano un vero e proprio linguaggio, potentissimo, estremamente sintetico, ma altamente criptico. Si tratta di un formalismo sviluppato al di fuori di un singolo linguaggio di programmazione ed usato anche nel linguaggio JavaScript. Una versione estremamente ridotta delle espressioni regolari è quella che usiamo normalmente per raggruppare i nomi dei file in ricerca. Un tipico esempio che tutti conosciamo è l’uso del punto interrogativo (dell’asterisco) ad indicare caratteri singoli (a gruppo). Se in un directory abbiamo tre file, chiamati: file_001 file_002 file_101 filedue   Cercando “file_00?” troveremo   file_001 file_002   Usando invece l’asterisco, cercando “file*”, li troveremo tutti e quattro. La potenza delle espressioni regolari è talmente ampia da essere filtrata anche nel linguaggio scritto. In tutte le lingue, infatti, si usa l’asterisco per terminare parole delle quali non si vuole dare un connotato di genere: anziché scrivere tutti o tutte, o entrambi senza sapere con quale è meglio iniziare, sempre più spesso si scrive tutt* (o anche altre forme equivalenti, come lo schwa (Ə). Ovviamente, in JavaScript anche le espressioni regolari sono degli oggetti, e vanno dichiarati come costanti (con const) o come variabili (con var o let). Esistono due modalità di dichiarazione delle espressioni regolari, implicita o esplicita: let er1 = /abc/; let er2 = new RegExp("abc"); Il comportamento di JavaScript è diverso a seconda del tipo di dichiarazione. Per semplicità, gli esempi che vedremo usano esclusivamente il costruttore new RegExp(). Come vedremo, gli elementi di partenza per usare le espressioni regolari sono le parentesi quadre, la barra inversa, il punto, il punto interrogativo, l’asterisco, il più, il dollaro, la lettera d (minuscola e maiuscola) la lettera w (minuscola e maiuscola) e il caret (accento circonflesso):   [  ]  \  .  ?  * + $ d D w W ^     Vediamoli in fila, senza respirare! Le quadre [ ] includono i caratteri da analizzare, Caret ^ e dollaro $ indicano inizio e fine della stringa, punto . interrogativo ? e asterisco * selezionano parti della stringa, d minuscola indica le cifre da 0 a 9 (digits), w minuscola i caratteri alfabetici (word characters) e le maiuscole negano la lettera, ovvero D indica “tutto ciò che non è cifra e W indica “tutto ciò che non è alfabetico”.   Le RegExp hanno una sintassi molto complessa. Prima di addentrarsi in maggiori dettagli teorici, mettiamo le mani sulla pratica. Proviamo a vedere se, partendo da una successione di cifre, possiamo stabilire se si tratta di un numero binario, ovvero se contiene solo 0 ed 1. Definiamo l’espressione regolare binario, che accetta tutto ciò che contiene 0 ed 1; definiamo, poi, la stringa costante esempio1, pari a “01011101”; quindi, applichiamo all'espressione regolare binario il metodo test, che fa la verifica della stringa esempio: let binario = new RegExp("[01]"); const esempio1 = "01011101"; console.log(binario.test(esempio1)); Il sistema risponde  true   In realtà, questo codice verifica che ci sia almeno una occorrenza di caratteri 0 o 1. Per essere sicuri che l’analisi si estenda all’intera stringa, serve una sintassi leggermente più complicata: ^[01]+$   Identifica + occorrenze di 0 o 1 e con controllo dell’intera stringa, dall’inizio (^) alla fine ($). Quindi il codice: let binario2 = new RegExp("^[01]+$"); const esempio1 = "01011101"; const esempio2 = "01019101"; const esempio3 = "0101A101"; console.log(binario2.test(esempio1)); console.log(binario2.test(esempio2)); console.log(binario2.test(esempio3)); Restituirà   true false false     Vediamo, ora, i metodi search e replace. Metodo Search JavaScript Tra i metodi disponibili c’è ovviamente la ricerca, search. Possiamo cercare se una stringa piccola è contenuta in una stringa più grande. let stringa = "Ciao mondo!"; let ricerca = new RegExp("mondo"); let posizione = stringa.search(ricerca); console.log(posizione); Il risultato, se la ricerca ha successo, è la posizione del primo carattere della stringa da cercare. In questo caso, ricerca ha successo e la m di mondo è in posizione 5 (si comincia da 0), quindi la risposta sarà 5   Metodo Replace JavaScript Passiamo, ora, a vedere come funziona replace, il metodo di sostituzione. let esempio1 = "babbo"; console.log(esempio1.replace("b", "m")); Fornirà come risultato mabbo   Perché la sostituzione si ferma alla prima verifica della ricerca di una b (e sostituzione con la m). Per sostituire tutte le occorrenze bisogna agire sulla stringa in modo globale, con l’opzione g, che può essere impostata se la stringa da sostituire viene delimitata non da virgolette, ma da slash: let esempio1 = "babbo"; console.log(esempio1.replace(/b/g, "m")); Può essere comodo vedere come si sviluppa la stessa sostituzione usando la RegExp: let esempio1 = "babbo"; let cambia = new RegExp("b", "g") let risultato = esempio1.replace(cambia, "m"); console.log(risultato); La dichiarazione di cambia comprende la lettera da cambiare e l’opzione g(lobal); il metodo replace agisce sull’oggetto cambia e con la lettera m.   Il livello di complessità delle espressioni regolari può portare a risultati sorprendenti. Una possibilità che può tornare utile è affidare la sostituzione a valori definiti da funzioni. Il formato completo del metodo replace è infatti questo: string.replace(regexp|substr, newSubstr|function) Data una stringa, replace accetta due parametri: il primo è l’oggetto della ricerca in forma di substringa o di espressione regolare, mentre il secondo è la componente con cui fare la modifica, in forma di nuova substringa o di funzione. Quindi, usando come parametri due substringhe puoi vedere che questo codice const str = "Salve a tutti! Salve a tutti!"; const newStr = str.replace("tutti", "JavaScript"); console.log(newStr); Porta all’output   "Salve a JavaScript! Salve a tutti!"   Aggiungendo il parametro g(lobal) abbiamo il codice: const str = "Salve a tutti! Salve a tutti!"; const newStr = str.replace(/tutti/g, "JavaScript"); console.log(newStr); con risposta:   "Salve a JavaScript! Salve a JavaScript!"   Esempio: inversione nomi const nomi = "VanBeurden, Ben\nLooney, Bernard\nBuffett, Warren\nToyoda, Akio"; const stringaSostituzione = "$2 $1"; const espressReg = /(\w+), (\w+)/g; var sostituisci=nomi.replace(espressReg, stringaSostituzione); console.log(sostituisci);   Vediamo cosa fa, riga per riga.    Prima di spiegare cosa faccia questo semplice programma, è necessario dettagliare una specificità delle espressioni regolari, i gruppi di caratteri. Li troviamo indicati con $1 e $2. È importante notare che i gruppi possono essere usati solo in una stringa di sostituzione e non possono essere utilizzati per effettuare una ricerca. In una stringa di sostituzione le componenti possono essere individuate come raggruppamenti di caratteri o gruppi.  i gruppi possono essere richiamati utilizzando il segnaposto "$" seguito dal numero del gruppo. In questo caso, la numerazione non parte da 0, ma da 1. Quindi "$1" indica il primo gruppo, "$2" il secondo, e così via. Ad esempio, nella nostra espressione regolare /(\w+), (\w+)/ i due gruppi sono le parole (\w+), (\w+). Nella nostra stringa, il primo gruppo corrisponde al cognome e il secondo al nome, quindi si identificano come S1 ed S2. Usando la stringa di sostituzione "$2 $1", si ottiene l'inversione del nome e del cognome. Vediamo, ora, cosa succede, riga per riga.   Per prima cosa, si crea una costante chiamata "nomi" che contiene un elenco di nomi e cognomi separati da un a capo, \n; Quindi, si crea una costante chiamata "stringaSostituzione" che contiene la stringa di sostituzione per i nomi e cognomi invertiti; L'espressione regolare chiamata "espressReg" individua le word di nomi e cognomi nella stringa "nomi", in modalità globale; Si fanno le sostituzioni mettendo il risultato nella variabile "sostituisci";  Si stampa il risultato sulla console.   Javascript array foreach: il metodo foreach() JavaScript Il metodo forEach() è una funzione del tipo di dato array in Javascript. Agisce su ciascun elemento presente all'interno dell'array stesso senza dover usare un ciclo “for” tradizionale. Nella forma più semplice, la sua sintassi è questa: array.forEach(function(currentValue) { // Esegui azioni qui }); Esempio: conversione da cm a pollici Supponiamo di avere un array di numeri che rappresentano misure in centimetri. L’array è questo:   centimetri = [10, 20, 30, 40, 50]   Su questi valori si vuole svolgere una operazione- Per semplicità usiamo una semplice moltiplicazione: convertiamo la misura da centimetri a pollici, l’unità di misura anglosassone. Un pollice vale 2,54 centimetri, quindi un centimetro è circa 0,39 pollici. Creiamo un nuovo array per i risultati, e lo chiamiamo pollici[]. Alla fine, stampiamo pollici[].   Ovviamente possiamo usare il metodo forEach(). // Creazione dell'array di numeri in centimetri const centimetri = [10, 20, 30, 40, 50]; // Creazione di un nuovo array per memorizzare i numeri convertiti in pollici const pollici = []; // Funzione per convertire centimetri in pollici function convertiCentimetriInPollici(centimetro) { return centimetro * 0.393700787; } // forEach() converte tutti i numeri in pollici centimetri.forEach(function(centimetro) { // Convertire i centimetri in pollici const pollice = convertiCentimetriInPollici(centimetro); // Aggiungere il valore convertito in pollici al nuovo array pollici.push(pollice); }); // Stampare il nuovo array di numeri convertiti in pollici console.log(pollici); L’uscita di questo programma è [3.93700787, 7.87401574, 11.81102361, 15.74803148, 19.68503935] RegExp: Operatori La lista degli operatori è lunga: puoi trovarli tutti, ad esempio, sul sito di Mozilla. Per comodità, oltre a quelli già visti, ecco una lista ridotta di operatori frequenti:   {n} - trova corrispondenza con il carattere o al gruppo precedente esattamente n volte {n,} - trova corrispondenza con il carattere o al gruppo precedente n o più volte {n,m} - trova corrispondenza con il carattere o al gruppo precedente almeno n volte, ma non più di m volte [...] - trova corrispondenza con qualsiasi carattere tra parentesi [^...] - trova corrispondenza con qualsiasi carattere non compreso tra parentesi (...) - Raggruppa personaggi o operatori e crea un gruppo di cattura (?:...) - Raggruppa personaggi o operatori senza creare un gruppo di acquisizione \s, \S - trova corrispondenza con qualsiasi spazio bianco o non spazio bianco \b, \B - trova corrispondenza con un limite di parola o a un limite di non parola \n, \r, \t, \f - trova corrispondenza con nuova riga, ritorno a capo, tabulazione o feed modulo   RegExp: Metodi I metodi principali, invece, sono: exec() test() match() search() replace() split()   ECMAScript 2020 ha aggiunto matchAll()    Va, poi, ricordata la famiglia di metodi associati all’oggetto interno symbol: Symbol.match Symbol.replace Symbol.search Symbol.split    

Le istruzioni di un programma vengono eseguite in piccole sezioni il cui flusso viene controllato in vari modi. Il primo di questi si genera quando si verifica una condizione, con le istruzioni if…else, if else if e switch. Non sempre il software va eseguito. Esistono molti casi nei quali una parte va eseguita solo al verificarsi di determinate condizioni. Queste alternative cambiano il flusso di esecuzione, secondo un modello che viene chiamato “esecuzione condizionale”.  In quasi tutti i linguaggi di programmazione ad alto livello esiste la parola chiave if…else. Il linguaggio JavaScript non fa eccezione! Se si verifica una condizione si esegue la parte successiva all’if, altrimenti la parte contrassegnata da else. L’else non è obbligatorio: può essere che ci sia solo la sezione indicata dopo l’if.  Javascript if elseif La differenza principale tra l'istruzione "if else" e l'istruzione "if else if" sta nel modo in cui vengono valutate le condizioni e gestiti i percorsi di esecuzione. Nell'istruzione "if else", viene valutata una singola condizione "if". Se questa condizione risulta vera, viene eseguito il blocco di codice associato all'istruzione "if". Se la condizione risulta falsa, viene eseguito il blocco di codice associato all'istruzione "else". In sostanza, l'istruzione "if else" offre solo due possibilità di esecuzione: una per la condizione "if" vera e una per la condizione "if" falsa. D'altra parte, l'istruzione "if else if" consente di valutare una serie di condizioni alternative. Viene valutata la condizione dell'istruzione "if". Se questa condizione risulta vera, viene eseguito il blocco di codice associato all'istruzione "if". Se la condizione "if" risulta falsa, il programma passa alla valutazione della condizione dell'istruzione "else if" successiva e così via. Questo processo continua fino a quando viene trovata una condizione vera o fino a quando non si raggiunge un'istruzione "else" finale. L'istruzione "else" gestisce tutti i casi non coperti dalle condizioni precedenti. In sostanza, l'utilizzo dell'istruzione "if else if" consente di gestire una serie di condizioni alternative in modo più dettagliato e flessibile rispetto all'istruzione "if else", che offre solo due possibilità di esecuzione.   Facciamo un esempio con entrambe le sezioni di codice, then ed else. Un sistema contabile regola con una carta di credito le spese fino a 50 euro e con bonifico quelle oltre 50 euro. Il sistema chiede ad un operatore di immettere la cifra. let Spesa = Number(prompt("Quale spesa dobbiamo analizzare?")); if (Spesa <= 50) { console.log(Spesa +" - " + "Paga con carta di credito"); } else { console.log(Spesa + " - " + "Paga con bonifico"); } Come hai visto, le vere azioni necessarie a fare i pagamenti sono state sostituite da semplici scritte sulla console. La parte saliente è vedere cosa succede a seconda che la cifra sia maggiore o minore della soglia. Se eseguirai il codice, avrai questo risultato:   Ecco l’uscita con un numero inferiore a 50 ed uno superiore a 50.   Gli else possono essere usati per situazioni più complesse. Qui di seguito, ecco il codice necessario per tre fasce di pagamento, affidate a tre strumenti diversi. let Spesa = Number(prompt("Quale spesa dobbiamo analizzare?")); if (Spesa <= 50) { console.log(Spesa +" - " + "Paga con carta di debito"); } else if (Spesa < 300) { console.log(Spesa +" - " + "Paga con carta di credito"); } else { console.log(Spesa + " - " + "Paga con bonifico"); } Come puoi notare, abbiamo, nell’esempio, una condizione di javascript else if per gestire una situazione un pelo più articolata; la logica di base, tuttavia, è la medesima. Vediamolo più nel dettaglio.   JavaScript else if Il costrutto "else if" è un'estensione del classico costrutto "if" in JavaScript. Consente di specificare una condizione aggiuntiva da valutare nel caso in cui la condizione dell'"if" precedente risulti falsa. In altre parole, quando la condizione dell'"if" non viene soddisfatta, il programma può passare a valutare la condizione dell'"else if". Se la condizione dell'"else if" è vera, il blocco di codice associato viene eseguito. Altrimenti, è possibile definire ulteriori blocchi "else if" o, se necessario, un blocco "else" finale per catturare tutti gli altri casi non gestiti. Sintassi del costrutto "else if": La sintassi del costrutto "else if" in JavaScript è la seguente: if (condizione1) { // blocco di codice da eseguire se condizione1 è vera } else if (condizione2) { // blocco di codice da eseguire se condizione2 è vera } else if (condizione3) { // blocco di codice da eseguire se condizione3 è vera } else { // blocco di codice da eseguire se nessuna delle condizioni precedenti è vera } Esempio di utilizzo Per comprendere meglio come funziona il costrutto "else if" in JavaScript, consideriamo un esempio pratico: var punteggio = 80; if (punteggio >= 90) { console.log("Hai ottenuto un voto eccellente!"); } else if (punteggio >= 80) { console.log("Hai ottenuto un voto molto buono!"); } else if (punteggio >= 70) { console.log("Hai ottenuto un voto sufficiente."); } else { console.log("Hai bisogno di migliorare il tuo punteggio."); } In questo esempio, stiamo valutando il punteggio di un esame e forniamo un feedback diverso in base al range di punteggi ottenuto. Se il punteggio è superiore o uguale a 90, viene stampato il messaggio "Hai ottenuto un voto eccellente!". Se la condizione precedente non viene soddisfatta, il programma passa a valutare la condizione successiva e così via.   Switch in Javascript Lo switch statement è un'altra struttura di controllo di flusso presente in JavaScript che consente di eseguire diverse azioni in base al valore di una singola espressione. Lo switch è particolarmente utile quando si ha una serie di condizioni da valutare in cui ogni condizione corrisponde a un valore specifico. Sintassi dello switch: La sintassi generale dello switch statement in JavaScript è la seguente: switch (espressione) { case valore1: // blocco di codice da eseguire se l'espressione corrisponde a valore1 break; case valore2: // blocco di codice da eseguire se l'espressione corrisponde a valore2 break; case valore3: // blocco di codice da eseguire se l'espressione corrisponde a valore3 break; default: // blocco di codice da eseguire se nessuna delle condizioni precedenti corrisponde } Funzionamento dello switch Quando viene valutata un'espressione nello switch statement, JavaScript cerca corrispondenze tra il valore dell'espressione e i vari casi (case) definiti all'interno dello switch. Se viene trovata una corrispondenza, il blocco di codice associato a quel caso viene eseguito. Dopo l'esecuzione di un caso, è importante utilizzare l'istruzione "break" per uscire dallo switch e evitare che vengano eseguiti anche i blocchi dei casi successivi. Se nessun caso corrisponde al valore dell'espressione, viene eseguito il blocco di codice definito all'interno dell'istruzione "default" (opzionale). L'istruzione "default" viene utilizzata per gestire tutti i casi che non sono coperti dai casi precedenti.   Esempio di utilizzo dello switch Consideriamo un esempio in cui utilizziamo lo switch statement per valutare il giorno della settimana: var giorno = 2; var nomeGiorno; switch (giorno) { case 1: nomeGiorno = "Lunedì"; break; case 2: nomeGiorno = "Martedì"; break; case 3: nomeGiorno = "Mercoledì"; break; case 4: nomeGiorno = "Giovedì"; break; case 5: nomeGiorno = "Venerdì"; break; default: nomeGiorno = "Fine settimana"; } console.log("Oggi è " + nomeGiorno); In questo esempio, l'espressione "giorno" viene valutata all'interno dello switch. Se il valore di "giorno" corrisponde a uno dei casi definiti, viene assegnato il nome del giorno corrispondente alla variabile "nomeGiorno". Nel caso in cui "giorno" non corrisponda a nessuno dei casi precedenti, viene assegnata la stringa "Fine settimana". Infine, viene visualizzato il messaggio con il nome del giorno corrente. Come avrai capito, lo switch statement in JavaScript è una struttura di controllo di flusso utile per valutare diverse condizioni in base al valore di un'espressione. Offre un'alternativa leggibile e compatta all'utilizzo di più istruzioni "if else if". Utilizzando lo switch, è possibile gestire una serie di casi specifici e definire un caso predefinito per gestire le situazioni non coperte dai casi precedenti.

Nel linguaggio JavaScript esistono vari modi per ripetere l’esecuzione dello stesso codice a seconda che siano soddisfatte delle condizioni. Anche l’attesa della digitazione di un tasto su un device richiede spesso che si legga continuamente la memoria dove viene registrato il valore del tasto, se premuto. I tre modi di ripetere le istruzioni in JavaScript sono for, while e do. JavaScript Ciclo For e Break Nel software serve spesso verificare delle condizioni ripetutamente, in un ciclo che s’interrompe quando serve. In inglese il ciclo si chiama loop ed è questo il nome che prendono le istruzioni di questo tipo. Ce n’è più di una, in quanto esistono vari modi di verificare le condizioni.    Con riferimento agli esempi precedenti, diciamo che bisogna inserire tre spese diverse. Hai visto che il prompt fa uscire una finestra nella quale digitare il dato richiesto. Per farlo tre volte puoi copiare il prompt tre volte di fila, ma esteticamente è brutto e poi va bene solo per pochi inserimenti.  Invece, tornando sullo stesso blocco di istruzioni puoi ripeterle un numero di volte a piacere. Dovrai usare una variabile come contatore, eseguire il codice e aggiungere 1 al contatore, confrontando il contatore con il numero di ripetizioni che ti occorrono. Così andrai ad eseguire le stesse istruzioni per un certo numero di volte, a condizione che il contatore sia minore o uguale al numero di ripetizioni. In inglese “per” si dice for, ed ecco spiegato il nome della prima struttura di ripetizione di codice: ii ciclo for in JavaScript. Ipotizza di voler lanciare il prompt per numero 6 volte: let numero = 6; let contatore = 0; for (contatore = 1; contatore <= numero; contatore = contatore + 1) { console.log(“Dammi il numero di contatore” + contatore); } const numero = 6; let contatore = 0; let valori = new Array(0,0,0,0,0,0,0); //sette zeri for (contatore = 1; contatore <= numero; contatore = contatore + 1) { valori[contatore] = Number(prompt("Dammi il numero di contatore " + contatore)); console.log("Il valore " + valori[contatore] + " è il numero " + contatore + " di 6"); } In questo semplice programma dichiariamo valori, l’array JavaScript di 7 elementi, e usiamo contatore con il for per ripetere le istruzioni un numero di volte da 1 a numero (che è una costante pari a 6). Per ricordarlo, nella riga di dichiarazione dell’array trovi // (due slash) e poi un memo. In questo modo, si possono inserire commenti all’interno del software. I commenti sono essenziali, perché spiegano cosa si sta per fare e rendono semplice modificare ed aggiornare il software quando dovesse servire - e servirà, stanne pur certo! -   Per usare un contatore da 1 a 6 abbiamo usato un array JavaScript di 7 elementi, perché tutti i conteggi, in genere, partono da 0. Anche i nomi usati sono di tipo discorsivo. La versione normale di questo programma sarebbe: const n = 6; let c = 0; let v = new Array(0,0,0,0,0,0,0); //sette zeri for (c = 0; c < n; c += 1) { v[c] = Number(prompt("Dammi il numero di contatore " + c)); console.log("Il valore " + v[c] + " è il numero " + c + " di 6"); } Analizza bene il codice: non noti qualcosa che non conosci? La console eseguirà quel codice nel modo che vedi nella prossima immagine.   I parametri del for sono molto simili a quelli che hai visto con l’if.  for (c = 0; c < n; c = c + 1) chiede di ripetere il {codice tra graffe} finché la variabile un numero n di volte.   Il ciclo for JavaScript che abbiamo visto finora esce dal programma solo quando il ciclo è stato terminato. Alle volte, però, è comodo inserire una possibilità di fuga! Per fare questo, il linguaggio JavaScript usa l’espressione break. Inserisci nel codice precedente la possibilità (con l’ if in JavaScript visto in precedenza) di terminare l’esecuzione senza aver inserito i 6 numeri, verificando se l’ultimo numero inserito con prompt è zero. const n = 6; let c = 0; let v = new Array(0,0,0,0,0,0,0); // sette zeri for (c = 0; c < n; c = c + 1) { v[c] = Number(prompt("Dammi il numero di contatore " + c)); console.log("Il valore " + v[c] + " è il numero " + c + " di 6"); if (v[c] == 0) { // ecco la via d’uscita break; } } Nota che il break viene eseguito verificando una condizione logica, nella quale l’uguaglianza è rappresentata con ==, il doppio uguale . Ciclo While JavaScript Abbiamo visto il ciclo for JavaScript, ma i flussi iterativi non finiscono mica qui! Andiamo ad analizzare, infatti, il prossimo: il ciclo While in JavaScript. Il while (finché) somiglia molto ad un ciclo for JavaScript, con l’incremento del contatore portato fuori dalla sua dichiarazione. Il seguente codice è quasi equivalente a quello con il for che hai visto in precedenza. const n = 6; let c = 0; let v = new Array(0,0,0,0,0,0,); // sette zeri while (c < n) { v[c] = Number(prompt("Dammi il numero di contatore " + c)); console.log("Il valore " + v[c] + " è il numero " + c + " di 6"); c = c + 1; // incremento del contatore } Ovviamente il ciclo while in JavaScript ha delle differenze dal ciclo for, ma queste esulano dagli obiettivi della presente guida.   Ciclo Do-While JavaScript Tenendo bene a mente quanto detto nei precedenti capitoli, introduciamo un altro attore dei flussi iterativi in JavaScript. Parliamo, in primo luogo, del do. Anche il do svolge iterazioni, ma esegue {il suo codice} almeno una volta, perché il controllo è posto dopo {il suo codice}. Il do è una struttura di controllo che prevede anche l’uso di while. Questo ciclo esegue sempre {il suo corpo} almeno una volta e inizia a verificare se deve interrompersi solo dopo quella prima esecuzione. Per riflettere ciò, il test appare dopo il corpo del ciclo. const n = 6; let c = 0; let v = new Array(0,0,0,0,0,0); /* ora gli zeri sono sei */ do { v[c] = Number(prompt("Dammi il numero di contatore " + c)); console.log("Il valore " + v[c] + " è il numero " + c + " di 6"); c = c + 1; // incremento del contatore } while (c < n); Anche qui c’è qualcosa che dovresti notare…

Nello studio si alternano fasi pratiche a fasi teoriche. Quella che sta per seguire è una parte del secondo tipo, quindi più noiosa di quelle del primo tipo. Ma conoscere il nome delle cose serve per comprendersi quando si deve programmare in JavaScript. E, quindi, via con le definizioni!   L’ambiente, o environment, è l’insieme delle funzioni. Un certo numero di funzioni è, ovviamente, già disponibile nel sistema. A queste verranno aggiunte quelle che creerai tu per i tuoi programmi.   Una funzione è un blocco di codice che può essere riutilizzato più volte. Può prendere un input (chiamati parametri) e restituire un output (chiamato valore di ritorno). Le funzioni possono essere dichiarate in diversi modi, ad esempio con la parola chiave "function" o la notazione "=>" a freccia.   Un metodo è un tipo di funzione che è associato a un oggetto. Può essere invocato utilizzando la notazione a punti (ad esempio, oggetto.metodo()). I metodi hanno accesso alle proprietà e agli altri metodi dell'oggetto con cui sono associati. La principale differenza tra una funzione e un metodo è il modo in cui vengono invocati e il contesto in cui vengono eseguiti. Le funzioni vengono invocate per nome e vengono eseguite in ambito globale, mentre i metodi vengono invocati su un oggetto e vengono eseguiti nel contesto di quell'oggetto.   La notazione a punti è un modo per accedere alle proprietà e ai metodi di un oggetto in JavaScript. Viene utilizzata ponendo un punto (.) dopo il nome dell'oggetto, seguito dal nome della proprietà o del metodo che si vuole accedere. Ad esempio, se si ha un oggetto chiamato "persona" con una proprietà chiamata "nome", è possibile accedere al valore di quella proprietà utilizzando la notazione a punti in questo modo: "persona.nome". Allo stesso modo, se l'oggetto ha un metodo chiamato "saluta", è possibile chiamare quel metodo utilizzando la notazione a punti in questo modo: "persona.saluta()". La notazione a punti viene utilizzata per accedere alle proprietà e ai metodi di un oggetto, non importa se si tratta di una funzione o meno, è possibile accedere sia alle proprietà che ai metodi con essa.   In genere le funzioni in JavaScript hanno dei nomi composti, con più nomi in successione.  Per scrivere i loro nomi, solitamente, si segue uno stile preciso: ogni parola inizia con una maiuscola, tranne la prima. Questa modalità di scrittura si chiama capitalizzazione, un nome non del tutto chiaro. Quindi scriverai esegui eseguiCalcolo eseguiCalcoloCorretto   Alcune funzioni tipiche dell’ambiente JavaScript le hai già viste ed usate. Tra queste console.log, che scrive su schermo, e prompt, che genera un box di immissione dati. Hai visto anche che le funzioni comunicano i loro risultati al programma principale attraverso i valori di ritorno. Comprendere il meccanismo del valore di ritorno di una funzione è fondamentale per scrivere un codice efficace ed efficiente. Una funzione può restituire qualsiasi valore, inclusi valori indefiniti, nulli, booleani, numeri, stringhe, oggetti e persino altre funzioni. Esistono anche funzioni che non restituiscono alcun risultato.  Il valore restituito da una funzione viene specificato con la parola chiave return. Che indica al sistema di interrompere l'esecuzione della funzione, ritornare al programma chiamante con il valore specificato nell'istruzione return.  

Se diventa lungo, il codice ha bisogno di abbandonare la struttura monolitica, con un unico enorme elenco di istruzioni, e va organizzato in maniera modulare. I moduli in JavaScript permettono di fare proprio questo: separare il codice complessivo in piccole parti riutilizzabili e indipendenti l'una dall'altra. I Modules generano una struttura più facile da comprendere e mantenere, anche grazie a gestori di pacchetti.  Nel linguaggio JavaScript ci sono almeno due approcci, la proposta interna ES (ECMAScript) e la proposta esterna con librerie o framework (CommonJS, AMD-Asynchronous Module Definition…). Le comunicazioni tra i moduli e il programma chiamante sono garantite dalle keyword export ed import.   Un semplice esempio può essere il seguente, composto da due azioni. Dichiariamo la funzione saluta, che non fa nulla ma restituisce la scritta “Salve!”; Quindi, la chiamiamo dalla console. // script.js function saluta() { return "Salve!"; } console.log(saluta()); L’uscita, nella riga successiva della console, sarà ovviamente:   Salve!   Dividiamo, ora, le due azioni, assegnando ciascuna ad un modulo, numerati 1 e 2: -modulo 1 ospita la funzione “saluta”; -modulo 2 la stampa sulla console. // modulo1.js export function saluta() { return "Salve!!"; } // modulo2.js import { saluta } from "./module1.js"; console.log(saluta()); Sfortunatamente, non puoi mandare in esecuzione questi moduli con le due modalità di questa guida, ovvero il browser e VSC con Lite Server. È,infatti, necessario un ambiente più complesso. È comunque un esempio introduttivo di come rendere modulare il tuo codice.

Questo aspetto si occupa della gestione dell’esecuzione del codice. Il programma JavaScript viene eseguito tutto in un’unica successione di esecuzioni: in termini tecnici, questa cosa viene definita a filo unico, ovvero single-threaded.  Tutte le operazioni, dall'elaborazione dell'input dell'utente alla visualizzazione del risultato sulla pagina web, sono affidate a questo singolo thread, che scandisce i tempi. L’esecuzione è, quindi, detta sincrona. Per molti impieghi, la sincronia non è un buon modo di eseguire il software. Infatti, le operazioni del software vengono eseguite una dopo l’altra, per cui se alcune richiedono elaborazioni lunghe o bloccate, il resto del programma aspetta il suo turno e, quindi, è cieco e sordo. Per questo motivo, nel linguaggio JavaScript si utilizza la programmazione asincrona: alcune funzioni vengono gestite al di fuori del single thread, in modo da evitare blocchi o altri problemi. Sono esempi di funzioni asincrone setTimeout() o fetch(). Inoltre, ECMAScript 2017 (ES8) async/await permette di scrivere codice asincrono in modo sincrono e più leggibile. Un simpatico esempio postato da Brian Barbour può aiutarti ad entrare nel mondo asincrono. Esegui nella console questo codice: console.log("primo") console.log("secondo") console.log("terzo") L’esecuzione porta alla stampa di primo secondo terzo   In rapida successione. Ignora la scritta “undefined”: è una comunicazione di controllo della quale puoi non preoccuparti. Prova, invece, ad inserire un’attesa di 1000 unità di tempo, ovvero millisecondi, per un totale di 1 secondo. console.log("primo") setTimeout(() => { console.log("secondo") }, 1000) console.log("terzo") Ritardare la stampa del secondo nome non ritarda l’esecuzione di ciò che viene dopo: si stampa “primo”, si ritarda di 1s la stampa di “secondo” e quindi si stampa “terzo”. La stampa di “terzo” richiede meno di 1s, per cui la stampa complessiva di questo programma sarà: primo terzo secondo.

Questi esempi servivano per iniziare. Il pacchetto all'interno del browser è divertente ma non è una soluzione reale per programmare in JavaScript: per farlo correttamente, c’è bisogno di un editor di codice e di un motore di esecuzione (ovvero un server software). Secondo un recente sondaggio degli sviluppatori di Stack Overflow, lo strumento di sviluppo più popolare in tutte le categorie è VS Code. Molti sviluppatori preferiscono altri editor come Atom. Entrambi hanno estensioni di terze parti: VS Code ha un numero piccolo ma significativo di estensioni e temi, mentre per Atom ne sono state pubblicate 11K-12K. Sia Atom, sia VS Code, sono liberamente scaricabili. I nostri esempi utilizzeranno quest'ultimo. Finora abbiamo introdotto le prime generalità: passiamo, ora, a vere strutture di programmazione JavaScript, in vista - per ora solo all’orizzonte - di mettere le mani su un esempio pratico che opera sul browser. È il momento di scaricare un ambiente di sviluppo! Visual Studio Code e Live Server Questo notebook è disponibile per Windows, Linux e Mac, gratuitamente, a questo indirizzo. Una volta scaricato il software ed eseguita l’installazione, si può aprire una nuova pagina e scegliere il linguaggio che s’intende adottare. Ecco la parte della lista, più lunga, dove compare il linguaggio JavaScript.    Lista linguaggi   Si dovrà creare un directory nel quale registrare tutti i file generati. Lo si può fare all’inizio, oppure aspettare che sia lo stesso VS Code a chiederlo, come normalmente accade alla generazione delle prime linee di codice. Inoltre, è comodo avere già pronto un file index.html. La creazione di questo file può essere fatta, tra gli altri modi, cliccando sulla prima icona a destra dell’indicazione del workspace.     Finestra di comando, in alto a sinistra   Una volta cliccato, l’area editor a destra si predispone all’aggiunta di codice. La base da cui partire viene generata automaticamente da VSC, premendo in successione il punto esclamativo e il tab. Ed ecco il risultato.   Prima versione di index.html   Osserva la riga 5: <meta http-equiv="X-UA-compatible" content="IE=edge"> Questa riga di codice HTML indica che il sito web viene visualizzato in modalità di compatibilità con Internet Explorer, utilizzando la versione più recente (Edge). Per indicare che un sito web deve essere visualizzato solo in modalità di compatibilità con Google Chrome, è possibile utilizzare questa riga di codice HTML: <meta http-equiv="X-UA-Compatible" content="chrome=1"> Metterai il valore "IE=Edge,chrome=1" per ottenere i migliori risultati sia con Internet Explorer (Edge), sia con Google Chrome. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> È, ora, opportuno installare anche il web server, ad esempio Live Server. Sempre con riferimento alla finestra di comando, la barra verticale di sinistra ospita alcune icone, tra le quali quella di un quadrato diviso in quarti, uno dei quali è staccato. È il pulsante che permette di accedere a package aggiuntivi. Cliccando lì si abilita la ricerca degli add-on, che in qualche secondo si completa. Scrivendo Live Server nella riga di ricerca, appaiono le varie versioni, ciascuna con il bottone “installa”. Clicca sulla prima ed installa LS. Quindi, File>Exit da VBC e, infine, riapri VBC.   Cliccando su index.html con il tasto destro, dal menù a tendina seleziona “Open with Live Server”. Apparirà una pagina del tuo browser predefinito nella quale viene eseguito index.html: poiché in questo file non abbiamo messo niente, vedrai una pagina vuota! L’azione nel linguaggio HTML avviene tra i due tag <body>, ora in riga 9 e 10. Se qui in mezzo aggiungiamo una riga di testo e ripetiamo il right-click su index.html, la pagina si aggiornerà, mostrando la scritta. Se inseriamo il testo tra il tag che indica un titolo (header) molto grande e aggiorniamo, la scritta sarà molto grande 😎 <body> <h1>Guida AULAB su JavaScript</h1> </body> È giunto il momento di scrivere del vero codice JavaScript. Il metodo che abbiamo ora è di usare index.html come contenitore che VSC esegue su LS e i cui risultati diventano visibili sul browser. Manca un solo elemento: come si inserisce JavaScript in index? È, in realtà, molto semplice: occorre inserire il codice tra i tag script, ovvero <script> – codice – </script> Il codice JavaScript verrà eseguito correttamente. In generale, questa sezione si inserisce alla fine del corpo del codice html, ovvero subito prima del tag di chiusura </body>. Esistono altre opzioni, che hanno, però, usi specifici dei quali puoi non occuparti in questo momento.

Un semplice esempio può essere la realizzazione di uno script che permette di consultare un database. Un semplice elenco delle aziende più ricche di alcuni continenti, con il nome del CEO e il fatturato, può essere sufficiente. const companies = [ { name: "Shell", CEO: "Ben Van Beurden", revenue: 179.1, continent: "Europa" }, { name: "BP", CEO: "Bernard Looney", revenue: 121.3, continent: "Europa" }, { "name": "Berkshire Hathaway", "CEO": "Warren Buffett", "revenue": 584.6, "continent": "Nord America" }, { "name": "Toyota", "CEO": "Akio Toyoda", "revenue": 223.5, "continent": "Asia" }, { "name": "Samsung", "CEO": "Kim Ki-nam", "revenue": 221.2, "continent": "Asia" }, { "name": "Sinopec", "CEO": "Wang Yupu", "revenue": 266.9, "continent": "Cina" }, { "name": "CNPC", "CEO": "Wang Yilin", "revenue": 278.1, "continent": "Cina" }, { "name": "MTN", "CEO": "Ralph Mupita", "revenue": 7.2, "continent": "Africa" }, { "name": "Dangote", "CEO": "Aliko Dangote", "revenue": 4.3, "continent": "Africa" } ]; Il software accetta il nome di un’azienda e ha due possibilità, a seconda che il nome inserito sia o meno nel database. Se non c’è, risponde “L'azienda selezionata non è presente nella lista”, altrimenti restituisce il nome del CEO e se il fatturato dell’azienda (dati 2020) è maggiore di 100, anche quel dato. const companyName = prompt("Quale azienda vuoi conoscere meglio?"); const selectedCompany = companies.find(company => company.name === companyName); let output = "L'azienda selezionata non è presente nella lista"; if (selectedCompany) { output = "CEO: " + selectedCompany.CEO; if (selectedCompany.revenue > 100) { output += "<br>Fatturato: " + selectedCompany.revenue; } } document.body.innerHTML = output; Tra i tag script bisognerà inserire prima il database, poi il codice. Eseguendo il codice, il browser mostrerà le due diverse uscite. Il box richiesta, attivato dalla funzione prompt, si presenterà in questo modo:   Selezionando un’azienda presente, se il fatturato è maggiore di 100 sceglierà due informazioni, CEO e fatturato, e le manderà sul browser attraverso innerHTML, analoga della console.log che abbiamo visto prima. La pagina web mostrerà questi risultati: Oppure solo il nome del CEO se il fatturato è minore di 100, come in quest’esempio per MTN: Se, invece, il nome non è corretto o semplicemente non è nella lista, comparirà un messaggio standard:  

Alcune informazioni aggiuntive sul linguaggio JavaScript ti saranno utili per approfondire le tue conoscenze. In particolare, prova ad entrare di più nel linguaggio JavaScript - ma anche in generale nel mondo della programmazione informatica - vedendo il Document Object Model, gli eventi e i canvas. DOM in JavaScript La struttura dei documenti in JavaScript segue il DOM, document object model. Viene usato anche in altri linguaggi, quindi non è una scelta specifica del linguaggio JavaScript: questo apporta vantaggi e svantaggi. Si tratta di un’ interfaccia di programmazione delle applicazioni (API) per i documenti HTML e XML. Se si vuole accedere e manipolare gli elementi all'interno di una pagina web per creare un'interfaccia utente dinamica, il DOM è essenziale.   Non tutte le applicazioni JavaScript, però, si appoggiano al DOM. Ad esempio, nelle applicazioni che non hanno un'interfaccia utente, il linguaggio JavaScript elabora i dati in modo indipendente dalla struttura della pagina web, quindi il DOM non serve. Rientrano in questa categoria i webservices e i server Node.js.   Inoltre, alcuni framework JavaScript (ad esempio React, Angular e Vue.js) usano Virtual DOM, una propria rappresentazione virtuale del DOM che non dipende dal vero DOM del browser, aumentando le prestazioni e la velocità delle applicazioni. Per sviluppare web dinamico è, quindi, necessario conoscere il DOM. Se conosci il linguaggio HTML ti è facile far riferimento a quel linguaggio di markup per fissare alcuni punti. Semplificando le cose, un programma HTML parte dal tag <body>, poi passa ad <h1> e da lì a tanti <p>. Una pagina HTML può essere vista come composta da una gerarchia di nodi, dove ogni nodo ha un nodo padre e può avere nodi figli. L’intero file HTML è il nodo documento e contiene tutti gli altri nodi. Tra i nodi troviamo gli elementi (tag <p>, <div>, <h1>, etc), attributi degli elementi (es. href in un tag <a>. src in un tag <img>), testo o commenti. (Se non padroneggi il linguaggio html non preoccuparti: puoi consultare la nostra guida html e css in italiano). Tra le molte componenti spiccano i nodi. Nel linguaggio JavaScript, i nodi rappresentano gli elementi all'interno di un documento HTML o XML.  I nodi hanno diverse proprietà che possono essere sfruttate per accedere e modificare i dati all'interno del documento.   Alcune delle proprietà più comuni sono: nodeType: indica il tipo di nodo, ad esempio elemento, testo, commento, ecc. nodeName: il nome del nodo, ad esempio 'div' per un elemento div. nodeValue: il valore del nodo, ad esempio il testo all'interno di un elemento di testo. parentNode: il nodo padre del nodo corrente. childNodes: una raccolta di nodi figlio del nodo corrente. firstChild: il primo nodo figlio del nodo corrente. lastChild: l'ultimo nodo figlio del nodo corrente. previousSibling: il nodo precedente al nodo corrente all'interno dello stesso livello gerarchico. nextSibling: il nodo successivo al nodo corrente all'interno dello stesso livello gerarchico.   Queste sono solo alcune delle proprietà dei nodi più comuni, ci sono molte altre proprietà disponibili a seconda del tipo di nodo e del contesto. I nodi DOM contengono una vasta gamma di collegamenti ad altri nodi vicini. Il seguente diagramma, tratto da Eloquent JavaScript, li illustra.     L’indentazione inserisce nel programma degli  spazi non richiesti. Il computer accetterà il programma senza problemi: anche le interruzioni di riga nei programmi sono facoltative.  Il ruolo dell’indentazione è far risaltare la struttura del codice.

Alcune informazioni aggiuntive sul linguaggio JavaScript ti saranno utili per approfondire le tue conoscenze. In particolare, prova ad entrare di più nel linguaggio JavaScript - ma anche in generale nel mondo della programmazione informatica - vedendo gli eventi e i canvas. Events: gli eventi in JavaScript Che cos'è un evento? In JavaScript, gli eventi sono un elemento chiave per l'interazione con gli utenti e la manipolazione dinamica dei contenuti HTML. L'interazione di JavaScript con il linguaggio HTML viene gestita tramite eventi, ovvero tutto ciò che succede quando l'utente o il browser manipola una pagina. Anche il caricamento di una pagina web è un evento; cliccare su un pulsante è un evento; muovere il mouse è un evento.   Js document ready Il concetto di "document ready" in JavaScript si riferisce all'evento che viene scatenato quando il documento HTML è completamente caricato nel browser e pronto per l'interazione degli script JavaScript. Questo evento è cruciale quando si lavora con script complessi che dipendono dall'esistenza e dall'accessibilità degli elementi del DOM. Quando l'evento "document ready" si verifica, significa che tutto il contenuto HTML, inclusi gli elementi, i testi e le immagini, è stato completamente analizzato dal browser e reso disponibile per l'utilizzo tramite script. Ciò assicura che gli script JavaScript abbiano accesso agli elementi specifici del DOM a cui devono interagire o manipolare. La gestione dell'evento "document ready" è fondamentale per garantire che il codice JavaScript venga eseguito al momento opportuno, evitando così errori e garantendo la corretta interazione con l'utente. Esistono diverse modalità per ascoltare l'evento "document ready", come utilizzare la funzione `DOMContentLoaded` o metodi specifici di librerie come jQuery. Ascoltare l'evento "document ready" consente di eseguire azioni specifiche come l'inizializzazione di componenti, il caricamento di dati, la configurazione di eventi di click o la manipolazione dinamica del contenuto del DOM. In questo modo, si assicura che il codice JavaScript venga eseguito solo quando tutte le risorse necessarie sono state caricate e il documento è completamente pronto per l'interazione con l'utente. In conclusione, l'evento "document ready" in JavaScript è fondamentale per sincronizzare l'esecuzione degli script con il completo caricamento del documento HTML. Utilizzando correttamente l'evento "document ready", è possibile creare un'esperienza utente fluida e prevenire errori legati all'accesso anticipato agli elementi del DOM.   Js AddEventListener Per rilevare gli eventi e reagire nel modo che desideri ci si affida ai gestori di eventi. JavaScript usa il metodo addEventListener. Ogni evento ha un tipo che lo identifica. Una lista di eventi è disponibile qui: alcuni dei tipi sono relativi ad Animazione, Asynchronous data fetching, clipboard, controller (wheel, mouse etc), database e DOM. La maggior parte degli eventi viene chiamata su uno specifico elemento DOM e, quindi, si propaga agli antenati di quell'elemento, consentendo ai gestori associati a quegli elementi di gestirli. Per esempio, la pressione di un tasto attiva gli eventi "keydown" e "keyup". Più complessa la gestione del mouse: lo spostamento del mouse attiva eventi "mousemove", il pulsante attiva il “click” e i tasti sono "mousedown" e "mouseup". La rotella lascia tracce di scorrimento in "scroll".  Una cosa importante è l’area della pagina sulla quale si manifesta l’attenzione dell’utente, attraverso la posizione del mouse o la pressione di tasti: si prende focus quando si è dentro la finestra, si perde dettaglio (blur) quando se ne esce, si seleziona l’azione (select). Proviamo a scrivere del codice che scrive la posizione del mouse quando si clicca il tasto sinistro. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Guida AULAB su JavaScript</h1> <div id="output"></div> <script> document.addEventListener("mousemove", function(event) { var x = event.clientX; var y = event.clientY; document.addEventListener("mousedown", function(event) { if (event.button === 0) { document.getElementById("output").innerHTML = "La posizione X è " + x + "<br>" + "La posizione Y è " + y; } }); }); </script> </body> </html> Il programma ha due “ascoltatori di eventi”: uno per la posizione (mousemove) e uno per il clic (mousedown). L'ascoltatore dell’evento posizione viene attivato ogni volta che il mouse viene mosso sulla pagina web. Legge la posizione X e Y del cursore dalle proprietà event.clientX e event.clientY e ne assegna i valori alle variabili x e y. L'ascoltatore dell’evento clic viene attivato ogni volta che si clicca qualcosa sul mouse. Si usa, qui, la verifica con if, che vedrai più avanti insieme agli altri costrutti di questo tipo. La proprietà event.button permette di verificare se il bottone cliccato è il bottone sinistro: in questo caso, si modificano le coordinate da pubblicare sulla pagina (innerHTML). Esistono molti parametri e, quindi, diversi modi di sviluppare questo codice, a seconda delle esigenze. L’esempio soprastante mostra come leggere la posizione assoluta del mouse sullo schermo: provate a valutare alcuni punti ridimensionando e spostando la finestra del browser. Risultati leggermente diversi si ottengono, ad esempio, sostituendo clientX, clientY con screenX, screenY: provare per credere!    

La tela (canvas) è un'area rettangolare vuota dello schermo su cui è possibile disegnare vari elementi grafici, come linee, cerchi e immagini. Un canvas è quindi un elemento HTML utile per disegnare elementi grafici su una pagina Web tramite script. Il canvas può creare animazioni, grafici interattivi e altre visualizzazioni dinamiche. È supportato dalla maggior parte dei browser Web moderni. L’ambiente di canvas è bidimensionale, ovvero sul piano. Per lavorare in tre dimensioni esistono altre soluzioni, come WebGL o three.js. Prendi il file index.html, localizza i tag body ed inserisci tra loro il seguente codice: <h1>Guida AULAB su JavaScript</h1> <canvas id="myCanvas"></canvas> <script> let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100); La prima riga dello script recupera il nodo nel DOM che rappresenta l'elemento <canvas> e chiama il metodo document.getElementById(). A questo punto è possibile disegnare, partendo dal contesto del disegno, usando getContext() per indicare la bidimensionalità, 2d.   Eseguendolo su LiveServer, otterrai un quadrato rosso in alto a destra.   Vediamo riga per riga cosa succede.   Nell’HTML bisogna fissare un riferimento al nuovo oggetto, di nome myCanvas: <canvas id="myCanvas"></canvas> Poi guarda lo script.  La prima cosa da fare è dichiarare una variabile che contenga il canvas passato dal linguaggio HTML: var canvas = document.getElementById("myCanvas"); Per disegnare si usa, normalmente, un foglio o tela a due dimensioni: var ctx = canvas.getContext("2d"); Per la quale scegliamo come “stile di riempimento” il colore rosso: ctx.fillStyle = "red"; Chiediamo, ora, di riempire (fill) un rettangolo sulla tela, con quattro parametri: posizione, attraverso il punto più in alto a sinistra (20, 20), la larghezza (150) e l'altezza (100). ctx.fillRect(20, 20, 150, 100); Proviamo a complicare l’esempio, unendo anche il controllo del mouse come hai visto nella sezione Events. Il seguente programma legge la posizione del mouse e quando clicchi sul tasto sinistro sposta in quel posto il rettangolo rosso. <body> <h1>Guida AULAB su JavaScript</h1> <canvas id="myCanvas"></canvas> <script> // Get the canvas element let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); // Set the canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Get the mouse position and draw a red box on that position canvas.addEventListener("mousedown", function(event) { if(event.button === 0){ let x = event.clientX; let y = event.clientY; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "red"; ctx.fillRect(x-50, y-50, 100, 100); } }); </script>

Il motore JavaScript era ed è open source. Nel 2009 Ryan Dahl l'ha incorporato in un programma C++ che ha chiamato Node ed è un ambiente runtime. Quindi, Node esegue codice JavaScript fuori dal browser, per cui possiamo costruire un back-end per le applicazioni web e mobile. La definizione data dall'organizzazione che se ne occupa, Node.js è un runtime JavaScript event-driven asincrono progettato per costruire applicazioni di rete scalabili. Come tanti altri software, anche Node può essere scaricato gratuitamente. Inoltre, installare Node sul computer permette di installare librerie di terze parti.   Questa guida non si occupa di Node, ma è certamente utile che tu ne conosca l’esistenza e le principali caratteristiche, per fare le scelte migliori nel percorso di apprendimento.   Ed ora tocca a te! Se ti sei divertito con questi primi passi di JavaScript, potrebbe interessarti esercitarti un po': corri a farlo con i nostri esercizi Javascript per skillarti! Potresti, poi, perchè no, voler continuare con un vero corso di JavaScript: richiedi subito info per la prossima Hackademy in partenza!