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
