Vorrei iniziare questo articolo con una affermazione del compianto Joel Kallman, uno dei creatori di Oracle APEX.

Se sei alla ricerca di un bravo sviluppatore APEX, allora significa che stai cercando un full stack developer.

Cosa significa esattamente?

Il full stack developer è un programmatore che nel tempo ha acquisito molte competenze nell’ambito della programmazione ed è pertanto in grado di sapersi muovere tra i diversi aspetti di un’applicazione web, dallo sviluppo del front-end ma anche del back-end.

Il full stack developer è una figura poliedrica.

Per quanto riguarda le competenze back-end deve saper utilizzare vari linguaggi che dipendono dalla piattaforma di sviluppo. Nel caso di Oracle APEX si tratta per lo più il PL-SQL ma ne esistono ovviamente altri come Java o Python.

Come programmatore front-end puro, invece, deve conoscere linguaggi specifici come HTML, CSS e JavaScript integrandoli all’occorrenza con altri linguaggi, librerie e framework (come Angular, React o Foundation for sites). 

Non è sbagliato affermare che il JavaScript è senza ombra di dubbio uno dei linguaggi più utilizzati e amati dagli sviluppatori front-end. 

Non a caso la maggior parte delle applicazioni moderne e dei siti web che navighi tutti i giorni hanno funzionalità programmate proprio in questo linguaggio: sempre più diffuso, tocca ormai gli ambiti mobile, server e desktop.

Prima di iniziare

In questo tutorial vorrei introdurti ai concetti base del JavaScript, come funziona e quali sono le sue caratteristiche principali.

Alla fine avrai le competenze minime che ti permetteranno di sviluppare semplici script da usare, ad esempio, nelle tue applicazioni web in Oracle APEX e non solo.

Se poi deciderai di approfondire le sue conoscenze in rete puoi trovare decine e decine di risorse.

Cos’è il JavaScript

Il JavaScript è un linguaggio di programmazione usato principalmente per rendere le pagine web dinamiche.

Chiamato inizialmente LiveScript, fu creato nel 2005 da Brendan Eich su richiesta di Netscape.

L’obiettivo era quello di creare un linguaggio di scripting da utilizzare all’interno del famoso browser e che permettesse di estenderne semplicemente e rapidamente le funzionalità.

Negli anni il JavaScript si è diffuso enormemente ed oggi rappresenta una componente fondamentale della quasi totalità delle applicazioni e siti web.

Perché è così importante?

Devi sapere che il front-end un qualsiasi sito web viene costruito usando 3 tecnologie ben precise: HTML, JavaScript e CSS.

Quando accedi ad un sito il browser interpreta il codice HTML della pagina web e costruisce la pagina formattando il testo e le immagini.

Una delle caratteristiche peculiari dell’HTML è quella di essere un linguaggio statico, ovvero non è in grado di fornire, se usato da solo, funzionalità interattive.

Usando il JavaScript insieme all’HTML è possibile rendere le pagine web dinamiche.

Il CSS, infine, è usato per gestire la formattazione di documenti HTML e per definire lo stile grafico di un sito web (font, colori, ecc.)

Cosa serve per sviluppare in JavaScript

Come per un qualsiasi linguaggio di programmazione, è lecito chiedersi cosa serva per sviluppare in JavaScript.

Fortunatamente non hai bisogno di cercare molto perché probabilmente hai già tutto quello di cui hai bisogno e se non è così, eccoti la lista della spesa:

• Un Editor di Testo: personalmente io utilizzo Notepad++, che però è solo per utenti Windows. Un alternativa gratuita ed open source per utenti MAC è Atom.
• Un Browser Web: per verificare che il codice JavaScript che scriviamo sia corretto è necessario avere uno strumento che sia in grado di saperlo leggere ed eseguirlo. Ormai tutti i browser hanno delle funzionalità dedicate agli sviluppatori. Ad esempio questa qui sotto è la Chrome DevTool di Google Chrome. Vedremo tra poco come usarla.

Hello Word in JavaScript

Prima di iniziare ad esplorare i concetti del JavaScript vorrei creare insieme a te un primo esempio di script JS che eseguiremo direttamente dal browser installato sul nostro PC.

A tal proposito utilizzerò Chrome DevTool. Naturalmente anche gli altri browser hanno ambienti analoghi ai DevTools di Chrome e tutti prevedono un ambiente per l’esecuzione diretta di codice JavaScript, la cosiddetta console.

• Apri Google Chrome (forse se stai leggendo questo articolo lo hai già fatto…) e vai in Impostazioni > Altri Strumenti > Strumenti per Sviluppatori

• Clicca su Console. In questa finestra possiamo scrivere codice JavaScript per vederne l’immediata esecuzione. Tutti gli esempi di codice che faremo nel corso della guida potranno essere eseguiti all’interno della console del vostro browser preferito per verificarne il funzionamento.

• Copia ed incolla il seguente codice JS

alert('Hello World!');

• Premi Invio. Vedrai comparire un alert pop-up simile al seguenti. Premi OK per chiudere l’alert.

• La stessa console può essere utilizzata come ambiente per la visualizzazione dell’output di uno script, grazie all’istruzione console.log().
• Copia ed incolla in seguenti codice JS

var a = 'pippo';
console.log('a = '+a); // stamperà in console: "a = pippo"

• Premi Invio. In questo caso non vedremo nessun pop-up alert bensì un messaggio direttamente nella console.

Ricordati dell’istruzione console.log perché la utilizzeremo spesso sia per controllare l’esecuzione di un programma JS sia per verificare rapidamente il valore di oggetti e variabili.

Parte 1: Come scrivere JavaScript in un documento HTML

Sia JavaScript che HTML sono linguaggi di programmazione che vanno usati insieme per creare pagine web.

Quindi è lecito chiedersi: come riescono ad interagire fra di loro?

Per rispondere a questa domanda creeremo un semplicissimo documento HTML (una pagina web) e vedremo come modificarla grazie agli scripts JS.

• Apri un editor di testo
• Copia ed incolla il seguente codice HTML che serve per costruire una semplicissima pagina web.

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Corso JavaScript per Principianti</h1>
   </body>
</html>

• Salva il file con estensione .html

• Apri il file con un browser per vedere il risultato. Questo è il risultato che dovresti vedere.

Ce l’hai fatta? Bene! Ora faremo insieme un piccolo esperimento: andremo ad inserire all’interno della nostra pagina web un piccolo frammento di codice JavaScript.

• Apri l’editor di testo ed inserisci la seguente istruzione all’interno del tag <body>

<script> alert("Hello World!");</script>

• Apri il browser ad aggiorna la pagina. Quello che dovresti vedere è l’apertura di una finestra pop-up dove viene stampato il messaggio “Hello World!”

Nei prossimi paragrafi di questo tutorial vorrei introdurti alle principali istruzioni del JavaScript e ti inviterò a sperimentarle direttamente usando il documento HTML che abbiamo creato pochi minuti fa.

Partiamo con uno dei concetti più immediati: le variabili.

Parte 2: Dichiarazione delle Variabili

Le variabili sono un componente ricorrente praticamente in tutti i linguaggi di programmazione e ovviamente JavaScript non fa eccezione.

• Per dichiarare una variabile devi usare la seguente sintassi:

var miaVariabile;

• Puoi assegnare alla variabile un valore con una istruzione di assegnazione

miaVariabile = 10;

• Puoi anche fare una dichiarazione con assegnazione diretta:

var miaVariabile = "Questa è una Stringa";

• Una caratteristica del JavaScript è che non richiede di definire il tipo della variabile. Questo significa che possiamo definire una variabile ed assegnarli il tipo di dato che vogliamo.

var unaStringa = "ciao"; // questa è una stringa
var unNumero = 10; // questo è un numero
var unBooleano = true; // questo è un valore booleano

Per utilizzare una variabile all’interno di uno script JS è sufficiente richiamarla.

• Apri l’editor di testo e copia il seguente codice HTML dove viene definita una variabile unMessaggio, inizializzata con la stringa “Hello World!”, che viene stampata a video con un alert.

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Corso JavaScript per Principianti</h1>
      <script> 
         var unMessaggio = "Hello World!"; 
         alert(unMessaggio); 
      </script> 
   </body>
</html>

• Se aggiorni il browser dovresti ottenere questo risultato:

Parte 2: Operatori

Gli operatori servono per manipolare il contenuto delle variabili ed in generale permettono di lavorare con i dati.

Ad esempio, possiamo concatenare due o più stringhe usando l’operatore “+”.

• Apri un editor di testo ed inserisci il seguente codice HTML dove ho utilizzato l’istruzione document.write che permette di modificare il documento HTML.

<!DOCTYPE html>
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Corso JavaScript per Principianti</h1>
      <script> 
         var nome = "Daniele"; 
         var cognome = "Trasarti"; 
         document.write("Ciao da " + nome + " " + cognome); 
      </script>
   </body>
</html>

• Grazie all’operatore “+” le variabili verranno concatenate. Questo è il risultato che dovresti ottenere:

• Lo stesso operatore “+” può essere utilizzato per sommare algebricamente due o più numeri.
• Per sommare in JavaScript due variabili numeriche puoi usare il codice seguente.

<!DOCTYPE html>
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Come sommare due variabili numeriche</h1>
      <script> 
         var numero1 = 5; 
         var numero2 = 3; 
         document.write(numero1 + numero2); 
      </script>
   </body>
</html>

• Nella pagina viene stampata la somma dei due numeri.

• Con le variabili numeriche puoi utilizzare tutti gli operatori binari più famosi:
  • somma +
  • differenza –
  • moltiplicazione *
  • divisione /
  • percentuale %
• Puoi utilizzare anche gli operatori unari:
  • aumenta di 1 ++
  • diminuisci di 1 —

Parte 3: Le Stringhe

Le stringhe sono sequenze di caratteri con un ordine prestabilito e hanno caratteristiche peculiari rispetto alle semplici variabili numeriche.

Infatti in JavaScript le stringhe sono oggetti ed in quanto tali possiedono proprietà e metodi specifici. Vediamone due molto importanti.

Come recuperare la lunghezza di una Stringa

Per sapere quanti caratteri ci sono in una stringa puoi accedere alla sua proprietà lenght.

var unaStringa = "ABCDE";
var lunghezzaStringa = unaStringa.length;

• unaStringa è una variabile che memorizza la stringa “ABCDE”
• per recuperare la lunghezza della stringa devi accedere alla sua proprietà lenght usando l’istruzione unaStringa.length
• Per provare questa funzionalità usa il seguente codice HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Come recuperare la lunghezza di una stringa </h1>
      <script> 
         var unaStringa = "ABCDE";
         var lunghezzaStringa = unaStringa.length;
         document.write(lunghezzaStringa);
      </script>
   </body>
</html>

• Nella pagina HTML viene stampata la lunghezza della stringa “ABCDE”

Come estrarre una porzione di Stringa

Il metodo substring ci permette di estrarre una porzione di stringa.

var unaStringa = "ABCDE"; 
var sottoStringa = unaStringa.substring(2,4); 

• unaStringa è una variabile che memorizza la stringa “ABCDE”
• sottoStringa è una variabile in cui vogliamo memorizzare la porzione di stringa compresa tra i caratteri in posizione 2 (il primo carattere è in posizione 0) e 3.
• Per fare questa operazione devi usare l’istruzione unaStringa.substring(2,4). Come limite superiore ho dovuto inserire 4 perché il metodo substring estrae una porzione di stringa includendo il limite inferiore (2) ed escludendo il limite superiore (4)
• Ecco il codice sorgente completo e il risultato

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Come estrarre una parte di stringa</h1>
      <script> 
         var unaStringa = "ABCDE"; 
         var sottoStringa = unaStringa.substring(2,4); 
         document.write(sottoStringa); 
      </script> 
   </body>
</html>

Parte 4: gli Array di Variabili

Gli array sono delle variabili che possono contenere più di un valore.

Ci sono diversi metodi per creare una variabile di tipo array. Ad esempio uno è il seguente:

var unArray = new Array(5);

• unArray è una variabile
• new Array è l’istruzione che devi usare per creare un oggetto di tipo Array
• 5 è la dimensione dell’array, ovvero quanti valori può contenere

Per assegnare dei valori ad una variabile array devi usare una istruzione di assegnazione specificando in quale posizione va inserita l’informazione.

Inoltre, ogni posizione può memorizzare un valore di un tipo specifico. Ecco un esempio di come assegnare i valori ad un array:

unArray[0] = "pera";
unArray[1] = "mela";
unArray[2] = "pesca";
unArray[3] = 99;
unArray[4] = true;

Per leggere i valori dalla variabile array è sufficiente richiamare il nome della variabile seguita dalla posizione che vuoi leggere.

document.writeln(unArray[0]);
document.writeln(unArray[1]);
document.writeln(unArray[2]);
document.writeln(unArray[3]);
document.writeln(unArray[4]);

• Per provare questa funzionalità usa il seguente codice HTML

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Come lavorare con gli Array</h1>
      <script> 
         /* dichiara la variabile array */ 
         var unArray = new Array(5); 
         /* assegna dei valori all' array */ 
         unArray[0] = "pera"; 
         unArray[1] = "mela"; 
         unArray[2] = "pesca"; 
         unArray[3] = 99; 
         unArray[4] = true; 
         
         /* leggi i valori dall' array */ 
         document.writeln(unArray[0]); 
         document.writeln(unArray[1]); 
         document.writeln(unArray[2]); 
         document.writeln(unArray[3]); 
         document.writeln(unArray[4]); 
      </script> 
   </body>
</html>

• Questo è il risultato finale

• Al fine dir ottimizzare le righe di codice, puoi creare creare ed inizializzare una variabile di tipo array con una singola istruzione

var unArray = ["pera", "mela", "pesca", 99, true];

Parte 5: Le Funzioni

Le funzioni in JavaScript hanno un ruolo importantissimo perché ti permettono di raggruppare in un blocco di codice ben definito una o più istruzioni che servono per implementare una specifica funzionalità complessa.

Un funzione è contraddistinta da un nome, può accettare argomenti o parametri di ingresso ed eventualmente è in grado di restituire valori.

Avendo un nome, una funzione può essere richiamata in qualunque punto del programma rendendo la scrittura del codice decisamente più snella ed ottimizzata. Vediamo come creare la nostra prima funzione JavaScript.

• La sintassi per la definizione di una funzione è la seguente

function nomeFunzione (argomenti) {
// istruzioni
}

• Quindi, supponiamo di voler definire una funzione che stampa una stringa

function saluta() {
  document.write("Ciao!");
}

• Inseriamo la funzione saluta() all’interno del documento HTML. Ti faccio notare che è buona norma definire le funzione all’interno del tag <head> del documento HTML.

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function saluta() {
         document.write("Ciao!");
         }
      </script>  
   </head>
   <body>
      <h1>Funzione JavaScript</h1>
      <script> 
         /* qui scriverai il codice per richiamare la funzione */ 
      </script> 
   </body>
</html>

• A questo punto possiamo richiamare la funzione con l’istruzione saluta();

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function saluta() {
         document.write("Ciao!");
         }
      </script>  
   </head>
   <body>
      <h1>Funzione JavaScript</h1>
      <script> 
         /* qui scriverai il codice per richiamare la funzione */
         saluta();
      </script> 
   </body>
</html>

• Questo sarà il risultato finale

La funzione saluta() non accetta parametri. Possiamo modificarla leggermente affinché possa accettare come parametro il nome della persona da salutare.

• Apri l’editor di testo e modifica lo script HTML come segue

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function saluta(nome) {
         document.write("Ciao "+nome+"!");
         document.write("<br>");
         }
      </script>  
   </head>
   <body>
      <h1>Funzione con Parametri</h1>
      <script> 
         /* qui scriverai il codice per richiamare la funzione */
         saluta("Daniele");
         saluta("Giulia");
      </script> 
   </body>
</html>

• La funzione saluta(nome) accetta una parametro che viene inserito nel documento e successivamente scrive un tag <br> che serve per andare a capo.
• A questo punto possiamo richiamare la funzione saluta(nome) tutte le volte che vorremo ottenendo il risultato seguente

Parte 6: Le Istruzioni Condizionali

Le istruzioni condizionali ti permettono di eseguire blocchi di codice alternativi in base ad una condizione, consentendo ad uno script di prendere, in un certo senso, delle decisioni.

La sintassi di una istruzione if semplice è la seguente

if (condizione) {
   // istruzioni
}

• Inseriamo nella pagina HTML una funzione che verifica se un numero è maggiore di 10 ed in caso positivo stampa un messaggio.

function controllaNumero (x){
   if (x > 10) {
      document.write(x + "è maggiore di 10!");
      document.write("<br>");
   }
}

• Richiamiamo la funzione controllaNumero(x) nel codice HTML per 2 volte:
  • controllaNumero (10)
  • controllaNumero (11)
• Il risultato che ci aspettiamo è che l’istruzione contenuta nel blocco if venga eseguita solo una volta

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function controllaNumero (x){
            document.write("Sto controllando il numero " + x + "<br>");
            if (x > 10) {
               document.write(x + " è maggiore di 10! <br>");
            }
         }
      </script>  
   </head>
   <body>
      <h1>Funzione JavaScript</h1>
      <script> 
         controllaNumero (10);
         controllaNumero (11);
      </script> 
   </body>
</html>

• Questo è il risultato che aspettavamo

Ovviamente è possibile definire una istruzione if/else.

• Sintassi dell’istruzione if/else

if (condizione) {
	//istruzioni1
} else {
	//istruzioni2
}

• Questo è un esempio

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function controllaNumero (x){
            document.write("Sto controllando il numero " + x + "<br>");
            if (x < 10) {         
               document.write(x + " è minore di 10! <br>");
            } else {
               document.write(x + " è maggiore di 10! <br>");
            } 
         }
      </script>  
   </head>
   <body>
      <h1>Funzione JavaScript</h1>
      <script> 
         controllaNumero (9);
         controllaNumero (11);
      </script> 
   </body>
</html>

La terza possibilità è l’ if a cascata che mette a disposizione più alternative di esecuzione.

if (condizione1) {
	istruzioni1
} else if (condizione2) {
	istruzioni2
} else {
	istruzioni3
}

In questo caso, se condizione1 è vera viene eseguito il blocco istruzioni1.

Se condizione1 non è soddisfatta viene verificata condizione2 e in base al suo valore verrà eseguito il blocco istruzioni2 o istruzioni3.

Parte 7: Cicli ed Iterazioni

Un’altra categoria di istruzioni comunemente usata nei linguaggi di programmazione è rappresentata dalle iterazioni o cicli.

JavaScript prevede diverse tipologie di istruzioni iterative. Sicuramente una delle più importati è il ciclo for grazie al quale possiamo eseguire una o più istruzioni fin quando non si verifica una particolare condizione, detta condizione d’uscita.

La sintassi JavaScript del costrutto è la seguente

for (inizializzazione; condizione; modifica) {
	// istruzioni
}

• inizializzazione: JavaScript esegue l’istruzione specificata in inizializzazione prima di avviare le iterazioni (il ciclo).
• condizione: è l’espressione booleana che viene valutata prima di eseguire ciascuna iterazione. Se è falsa non viene eseguito il blocco di istruzioni associato al for. Se invece la condizione è vera viene eseguito il blocco di codice.
• modifica: al termine di ciascuna iterazione viene eseguita l’istruzione modifica (la più classica è l’incremento di un contatore). Il ciclo poi ricomincia con la valutazione della condizione.

Vediamo con un esempio concreto come usare un ciclo for.

• Il seguente codice JavaScript stampa per 5 volte la stringa “Iterazione Numero ” + x dove x è il numero dell’iterazione corrente.

for (i=0; i< 5; i++) {
   document.write("Iterazione Numero " + i + "<br>");
}

• Questo è il codice HTML completo

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
   </head>
   <body>
      <h1>Ciclo For</h1>
      <script> 
         for (i=0; i< 5; i++) {
            document.write("Iterazione Numero " + i + "<br>");
         }
      </script> 
   </body>
</html>

• Se esegui il codice HTML nel browser dovresti ottenere questo risultato

• Puoi costruire anche cicli for dinamici. Ecco un esempio di funzione JS che esegue lo spelling di una stringa qualsiasi

<!DOCTYPE html> 
<html>
   <head>
      <title>Imparare con APPin5Minuti</title>
      <script> 
         function stampaLettere (parola){
            document.write("Stampo le lettere della parola " + parola + "<br>");
            for (i=0; i< parola.length; i++) {
         document.write(parola.substring(i,i+1) + "<br>");
         }
         
         }
      </script>  
   </head>
   <body>
      <h1>Ciclo For</h1>
      <script> 
         stampaLettere ("APPin5Minuti");
      </script> 
   </body>
</html>

• Questo è il risultato

Conclusioni

Complimenti! Sei arrivato alla fine di questo corso super-condensato sul codice JavaScript.

Adesso conosci tutte le istruzioni fondamentali del JavaScript però tieni bene a mente che nessun linguaggio di programmazione può essere imparato completamente in così pochi minuti.

L’obiettivo di questo articolo è quello di darti i primi elementi per proseguire nell’apprendimento avanzato di questo popolarissimo linguaggio di programmazione, utilissimo per chi sviluppa applicazione web in Oracle APEX e non solo.

Fammi sapere se questo articolo è utile e non dimenticare di scriverti alla pagina Linkedin di APPin5Minuti per tanti altri contenuti!

Un abbraccio!

Daniele