Javascript – Le basi del linguaggio

Una breve guida su Javascript – Le basi del linguaggio

Indice dei contenuti

Introduzione a JavaScript: la porta d’ingresso alla programmazione web

Perché imparare JavaScript?

JavaScript è uno dei linguaggi di programmazione più diffusi e richiesti nel mondo dello sviluppo web. Apprendere JavaScript significa acquisire la capacità di creare pagine interattive, applicazioni web dinamiche e molto altro, espandendo le proprie opportunità professionali in un mercato IT in continua crescita.

Questo linguaggio, nato nel 1995 con il nome di LiveScript e successivamente rinominato JavaScript, è stato inizialmente pensato per arricchire le pagine web statiche con funzionalità interattive lato client. Oggi il suo impiego si è esteso anche al back-end, allo sviluppo di applicazioni mobili, giochi online, e persino al controllo di dispositivi come i droni.

Cos’è JavaScript?

JavaScript è un linguaggio interpretato e ad alto livello, il che significa che il codice viene eseguito istruzione per istruzione da un motore JavaScript (come V8 per Chrome o SpiderMonkey per Firefox) senza essere prima compilato in codice macchina. Questa caratteristica lo rende molto flessibile e adatto all’apprendimento, pur comportando alcuni limiti che analizzeremo più avanti.

Quando un browser carica una pagina web contenente codice JavaScript, il motore interno esegue automaticamente quel codice, permettendo interazioni con l’utente, modifiche dinamiche al contenuto e molto altro. Tuttavia, l’esecuzione non è limitata ai browser: grazie a Node.js, è possibile scrivere ed eseguire codice JavaScript anche al di fuori del contesto web, trasformando, ad esempio, un computer in un server.

JIT Compilation: tra interpretazione e performance

Sebbene JavaScript sia tecnicamente un linguaggio interpretato, molti motori moderni utilizzano la tecnica della JIT Compilation (Just In Time). Questo approccio permette di compilarne porzioni durante l’esecuzione per migliorarne le prestazioni, pur mantenendo l’apparente semplicità dell’interpretazione riga per riga.

Client-side vs Server-side

Il codice JavaScript può essere eseguito sia lato client (nel browser dell’utente) sia lato server (tramite Node.js o simili). Nel primo caso si parla di client-side programming, la modalità tradizionale di utilizzo per aggiungere dinamismo alle pagine web. Nel secondo, JavaScript diventa uno strumento potente anche per la logica di business, il collegamento con database, e la gestione dei dati nel back-end.

I limiti del linguaggio

Come ogni linguaggio di programmazione, anche JavaScript presenta dei limiti. Non è indicato per applicazioni che richiedono calcoli matematici avanzati o altissime prestazioni, e l’ambiente di esecuzione nel browser impone delle restrizioni per motivi di sicurezza (ad esempio, il codice non può accedere direttamente ai file locali).

Inoltre, poiché il codice JavaScript non viene compilato, può essere facilmente consultato, copiato o modificato da chiunque. Esistono tecniche come l’offuscamento del codice, ma non garantiscono protezione assoluta contro la copia non autorizzata.

I vantaggi di JavaScript

Nonostante i suoi limiti, JavaScript offre numerosi vantaggi:

• È gratuito e non richiede strumenti costosi.
• È supportato da tutti i principali browser.
• Possiede una comunità attiva e collaborativa.
• Offre numerose librerie e framework (come React, Angular, Vue.js) che ne estendono le funzionalità.
• È facile da imparare grazie alla sua sintassi relativamente semplice.
• È mantenuto da grandi aziende come Google, Facebook e Mozilla.

Dinamicità e TypeScript

JavaScript è un linguaggio dinamicamente tipizzato, cioè una variabile può contenere valori di tipo diverso in momenti diversi. Questa flessibilità, sebbene comoda, può portare ad errori difficili da individuare. Per questo motivo è nato TypeScript, un superset di JavaScript che introduce la tipizzazione statica per aumentare la robustezza del codice.

Conclusioni

Imparare JavaScript è il primo passo per accedere al vasto mondo dello sviluppo web moderno. La sua versatilità lo rende ideale per chi inizia, ma anche per chi vuole approfondire la programmazione full-stack. Nel prossimo capitolo inizieremo a scrivere i nostri primi script JavaScript e a comprenderne la struttura.

Editor di codice, interpreti e strumenti di debug

Editor di codice

Il codice di quasi tutti i linguaggi di programmazione è costituito da testo semplice. Per questo motivo, è sufficiente un editor di testo per scrivere codice sorgente. Tuttavia, non può trattarsi di un elaboratore di testi come Microsoft Word, che gestisce il testo in formato arricchito. In teoria, un semplice blocco note che consente di salvare file con estensione .txt può bastare per scrivere codice. Nella pratica, però, è fortemente consigliato l’uso di un editor di codice dedicato.

Il mercato offre numerosi editor professionali, sia gratuiti che a pagamento. Alcuni sono pensati per un uso universale, mentre altri sono specifici per determinati linguaggi. I principali vantaggi di un editor di codice specializzato sono:

• l’evidenziazione della sintassi,
• il completamento automatico del testo,
• e il controllo degli errori in tempo reale.

Queste funzionalità migliorano notevolmente l’efficienza nello sviluppo, facilitano la comprensione del codice e riducono il numero di errori e sviste.

Tra gli editor più apprezzati segnaliamo:

Visual Studio Code
Compatibile con Windows, macOS e Linux
Editor potente e gratuito, utilizzabile sia per scopi personali sia professionali. È diventato rapidamente uno strumento di riferimento per lo sviluppo web. Include funzionalità integrate come il debugger per JavaScript e strumenti per semplificare i progetti web. Inoltre, è altamente personalizzabile tramite un ricco sistema di estensioni, molte delle quali specifiche per il linguaggio JavaScript.

Interprete

Abbiamo già introdotto brevemente il concetto di interprete, ovvero l’ambiente di esecuzione di un programma. L’interprete verifica la presenza di eventuali errori formali (come errori di battitura nei nomi delle funzioni o parentesi mancanti), e successivamente esegue il programma, istruzione per istruzione.

La scelta dell’interprete JavaScript dipende dalla piattaforma di destinazione del software.

• Per lo sviluppo server-side, si utilizza tipicamente l’ambiente Node.js, che va installato direttamente sul sistema operativo.
• Per lo sviluppo client-side, l’interprete è semplicemente il browser web, già presente sul computer dell’utente.

Questo corso si concentra su JavaScript core, ovvero sulle componenti fondamentali del linguaggio, valide per lo sviluppo lato client, lato server e anche per soluzioni mobili. Per tale motivo, è possibile esercitarsi in qualsiasi ambiente, con qualunque interprete. Il metodo più semplice consiste nell’utilizzare direttamente un browser web.

Tutti i browser moderni includono un motore JavaScript (cioè un interprete). Si consiglia, tuttavia, l’uso di Google Chrome o Mozilla Firefox, entrambi noti per l’efficienza e per gli strumenti integrati destinati agli sviluppatori web. Entrambi sono disponibili per Windows, macOS e Linux.

È importante mantenere il browser sempre aggiornato. JavaScript è un linguaggio in continua evoluzione: nuove funzionalità vengono introdotte regolarmente e un browser non aggiornato potrebbe non supportarle. Consideri il browser come uno strumento di lavoro: mantenerlo in buona forma è essenziale.

Debugger

I programmi informatici possono raggiungere livelli elevatissimi di complessità, con migliaia o addirittura milioni di righe di codice. È pressoché impossibile scrivere codice perfettamente funzionante al primo tentativo. Alcuni errori, in particolare quelli logici, emergono solo durante l’esecuzione e spesso solo in condizioni particolari.

Per individuare e analizzare questi problemi, esistono strumenti chiamati debugger. Un debugger consente di:

• rallentare o sospendere l’esecuzione del programma,
• eseguirlo passo dopo passo,
• e osservare lo stato delle variabili e del programma in ogni istante.

Utilizzando il browser come ambiente di esecuzione per JavaScript, disponiamo automaticamente di strumenti di debugging avanzati. Tutti i browser moderni sono dotati di strumenti per sviluppatori. Questi strumenti non sono visibili durante l’uso normale, ma possono essere attivati tramite apposite opzioni.

Tra le funzionalità disponibili troviamo:

• Inspector: permette di analizzare i singoli elementi HTML di una pagina web.
• Console JavaScript: visualizza gli errori e consente di eseguire comandi JavaScript singoli nel contesto della pagina corrente.
• Debugger: mostra i valori attuali delle variabili, consente di interrompere l’esecuzione in un punto specifico e di procedere con l’esecuzione passo-passo.

Come si attivano gli strumenti per sviluppatori?

Le modalità di attivazione variano a seconda del browser e del sistema operativo. Poiché le interfacce dei browser vengono aggiornate frequentemente, è preferibile utilizzare le scorciatoie da tastiera, che sono generalmente più stabili rispetto ai menu.

Ecco alcune combinazioni comuni:

• Windows e Linux (tutti i browser principali, tranne Internet Explorer e Edge):
  Ctrl + Shift + I
• Windows (Internet Explorer e Edge):
  F12
• macOS (tutti i browser principali):
  Cmd + Option + I

Leggere e scrivere sui form

Iniziamo a lavorare con Javascript. Apriamo Visual Studio Code e posizioniamoci in una directory (precedentemente creata) chiamata, ad esempio JS:

Creiamo il nostro primo script JS. Creiamo un file HTML chiamato alert.html e definiamo la classica struttura di una pagina HTML:

modifichiamo il <body> come segue:

Dal menu di VSC scegliamo: Run –> Run without debugging oppure CTRL+F5:

vedremo il link: CLICCA QUI (senza eventi) e se clicchiamo vediamo:

Javascript è un linguaggio che nasce a oggetti ed è orientato agli eventi (cioè è in grado di reagire alle azioni dell’utente sulla pagina web eseguendo determinate istruzioni)

L’istruzione HREF = “Javascript:alert(‘ciao’)” inserita nel tag <A> non cattura l’evento perché il clic sul link è già previsto dal linguaggio HTML

Se invece volessimo catturare l’evento di click da parte dell’utente (non come link di HTML) possiamo inserire l’istruzione in un altro tag ad esempio <P> ma dobbiamo includere l’istruzione nell’evento onClick; creiamo un secondo file HTML, alert2.html:

Premendo CTRL + F5 vediamo che la frase CLICCA QUI (con cattura dell’ evento) non è più un link ma se clicchiamo su abbiamo lo stesso effetto precedente:

Un altro modo per ottenere lo stesso risultato è quello di inserire le istruzioni nella head. Questa volta dobbiamo usare il tag doppio:

<SCRIPT type = "text/javascript">

<SCRIPT type = "text/javascript">

e dobbiamo creare una funzione il cui codice va racchiuso tra parentesi graffe:

function nomeFunzione(parametri){ }

function nomeFunzione(parametri){ }

La funzione viene quindi richiamata in un tag in conseguenza a un evento, in questo caso al clic su un tag h1.

<h1 HREF = # onClick = "nomeFunzione()">

<h1 HREF = # onClick = "nomeFunzione()">

Nel nostro esempio invece richiamiamo la funzione saluta() quando viene caricata la pagina (evento onload).

<body onload = saluta()>

<body onload = saluta()>

La funzione saluta() viene definita nella HEAD:

function saluta(){
  alert("ciao");
  }

function saluta(){
  alert("ciao");
  }

Il codice completo è il seguente:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert</title>
    <SCRIPT type = "text/javascript">
        function saluta(){
            alert("ciao");
            }
    </SCRIPT>
</head>
<body onload=saluta()>
<P HREF = # onclick="saluta()"> CLICCA QUI (con script nella head) </P><br><br>
</body>
</html>

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert</title>
    <SCRIPT type = "text/javascript">
        function saluta(){
            alert("ciao");
            }
    </SCRIPT>
</head>
<body onload=saluta()>
<P HREF = # onclick="saluta()"> CLICCA QUI (con script nella head) </P><br><br>
</body>
</html>

l’evento onload = saluta() inserito nel body permetto di attivare la funzione ogni volta che la pagina viene caricata

Vediamo infine un ultimo metodo di utilizzo del codice JS in html attraverso script esterni.

Basta inserire nell’head l’istruzione:

<SCRIPT type = "text/javascript" src="alert.js"></SCRIPT>

<SCRIPT type = "text/javascript" src="alert.js"></SCRIPT>

e creare un file alert.js (nella stessa directory altrimenti nel src occorre inserire tutto il path completo) in cui inserisco la funzione alert:

Il codice completo è:

ESEMPIO CO₂

Dato il livello di emissioni di CO2 espresso in grammi al chilometro e il numero di chilometri percorsi da un’automobile in un anno, calcoliamo i chilogrammi di CO2 emessi dall’automobile in un anno.

Il calcolo dal punto di vista matematico è: livello * km / 1000

Questa formula la inseriamo in una funzione js che calcolerà l’output non appena verrà invocata. Creiamo a tal proposito il file comandi.js:

function calcola(f){
    var liv = parseFloat(f.livello.value);
    var km = parseFloat(f.kmAnno.value);
    
    if (isNaN(liv) || isNaN(km) || liv <= 0 || km <= 0) {
        alert("Inserisci valori numerici validi per le emissioni e i km percorsi.");
        return;
    }
    
    var emiss = liv * km / 1000;
    f.emissione.value = emiss.toFixed(2); // Aggiungi due decimali al risultato
}

function calcola(f){
    var liv = parseFloat(f.livello.value);
    var km = parseFloat(f.kmAnno.value);
    
    if (isNaN(liv) || isNaN(km) || liv <= 0 || km <= 0) {
        alert("Inserisci valori numerici validi per le emissioni e i km percorsi.");
        return;
    }
    
    var emiss = liv * km / 1000;
    f.emissione.value = emiss.toFixed(2); // Aggiungi due decimali al risultato
}

e creiamo un file CO2.html:

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="comandi.js"></script>
    <title>Emissioni CO2</title>
</head>
<body>
    <h1>Calcolo delle emissioni di CO<sub>2</sub> all'anno per un'automobile</h1>
    <form>
        <table>
            <tr>
                <td>Livello di emissioni di CO<sub>2</sub> in g/km </td>
                <td>
                    <input type="number" name="livello" required>
                </td>
            </tr>
            <tr>
                <td>Km percorsi in un anno </td>
                <td>
                    <input type="number" name="kmAnno" required>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <input type="button" name="invia" value="Calcola" onClick="calcola(this.form)">
                </td> 
                <td> 
                    <input type="reset" name="annulla" value="Annulla">
                </td>
            </tr>
            <tr>
                <td>Emissione di CO<sub>2</sub> all'anno in kg </td>
                <td> 
                    <input type="text" name="emissione" readonly="readonly" placeholder="Risultato in kg">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="comandi.js"></script>
    <title>Emissioni CO2</title>
</head>
<body>
    <h1>Calcolo delle emissioni di CO<sub>2</sub> all'anno per un'automobile</h1>
    <form>
        <table>
            <tr>
                <td>Livello di emissioni di CO<sub>2</sub> in g/km </td>
                <td>
                    <input type="number" name="livello" required>
                </td>
            </tr>
            <tr>
                <td>Km percorsi in un anno </td>
                <td>
                    <input type="number" name="kmAnno" required>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <input type="button" name="invia" value="Calcola" onClick="calcola(this.form)">
                </td> 
                <td> 
                    <input type="reset" name="annulla" value="Annulla">
                </td>
            </tr>
            <tr>
                <td>Emissione di CO<sub>2</sub> all'anno in kg </td>
                <td> 
                    <input type="text" name="emissione" readonly="readonly" placeholder="Risultato in kg">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Analizziamo il codice:

Nel file CO2.html abbiamo inserito un tag script per richiamare il file comandi.js che contiene la funzione per il calcolo.

Gli attributi name negli input permettono di riferirsi ai valori tramite JavaScript.

Abbiamo inserito un form con diversi campi. L’ultimo ha l’attributo readonly poichè servirà a visualizzare il risultato.

L’input “invia” permette di richiamare comandi.js cliccando sul pulsante calcola: alla funzione abbiamo passato tutto il form (this.form) come parametro. Il parametro viene acquisito dalla funzione e si chiama f. Il form è un oggetto e anche i controlli del form sono suoi oggetti: ogni controllo ha diverse proprietà, che il programma js può leggere o impostare.
La parola chiave per definire una funzione è function; il blocco di istruzioni che fa parte della funzione deve essere delimitato da parentesi graffe e alla fine di ogni istruzione è obbligatorio il punto e virgola.

Nel file comandi.js vediamo var che è una parola chiave del linguaggio per indicare una variabile. Il contenuto dei controlli di tipo text (livello e kmAnno) viene letto con
la proprietà value, utilizzando per selezionare l’elemento specifico il suo name

Mandando in run lo script otteniamo:

JavaScript: altri controlli del form

Il nostro form può avere vari tipi di controlli: caselle di scelta a discesa, checkbox, radio button, per esempio. Cerchiamo di capire, attraverso un esercizio pratico, come si reperiscono con JavaScript i valori definiti dall’utente in questi controlli.

Programmiamo un’applicazione per gestire gli ordini di un negozio di frutta e verdura; prevediamo 5 prodotti , ciascuno con un proprio prezzo di vendita. La scelta del prodotto viene effettuata tramite una casella di scelta a discesa e il numero di confezioni tramite un campo di input di tipo testo. l nome dell’acquirente e il numero di confezioni sono dati obbligatori; se i controlli sulla presenza di questi dati vanno a buon fine, possiamo visualizzare una sorta di conferma dell’ordine e l’importo calcolato in una textarea.
Svolgendo questo esercizio impareremo a reperire l’informazione dalla casella di scelta a discesa e a gestire i controlli di obbligatorietà.
Cominciamo con il disegnare la pagina web (negozio.html) scrivendo il relativo codice HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title>Il negozio di Mario</title>
    <script type="text/javascript" src="negozio.js"></script>
<style>
#tabellasconti{
    top: 50%;
    left:35%;
    position: absolute;
}
</style>
</head>
<body>
<h1>Il negozio di Mario</h1>
<table border = 3><tr><td> <img src= immaginiNegozio/ananas.jpg width = 200></td>
<td> <img src= immaginiNegozio/avocado.jpg width = 200></td>
<td> <img src= immaginiNegozio/papaya.jpg width = 200></td>
<td> <img src= immaginiNegozio/fragole.jpg width = 200></td>
<td> <img src= immaginiNegozio/banane.jpg width = 200></td></tr>
<tr><td> 10 euro al pezzo</td>
<td> 15 euro  confezione da 10 pezzi</td>
<td> 5 euro al pezzo</td>
<td> 8 euro alla cassetta</td>
<td> 20 euro alla cassa</td></tr>
</table>
<div id=modulo>
<form>
<h2>Quale prodotto vuoi acquistare? </h2>
<table><tr><td> nome</td>
	<td><input type=text name=nome onFocus=svuota(this.form.nome)> </td></tr>
<tr><td> prodotto</td>
	<td><select name=prod >
	   <option>ananas</option>
	   <option>avocado</option>
	   <option>papaya</option>
	   <option>fragole</option>
	   <option>banane</option>
	</select></td></tr>
<tr><td> numero confezioni</td>
	<td><input type=text name=conf onFocus=svuota(this.form.conf)></td></tr>
<tr><td> <input type=button name=invia value=ordina onClick=ordina(this.form)></td>
	<td><input type=reset name=reset value=annulla></td></tr>
</table>
<textarea name=conferma rows=4 cols=50 readonly=readonly>
</textarea>
</form></div>
<div id=tabellasconti>
<table border=1><tr>
<td colspan=2> sconti per ordini</td></tr>
<tr><td>inferiori a 50 euro</td>
<td>nessuno sconto</td></tr>
<tr><td>inferiori a 100 euro</td>
<td>sconto del 5%</td></tr>
<tr><td>superiori o uguali a 100 euro</td>
<td>sconto del 10%</td>
</tr></table></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title>Il negozio di Mario</title>
    <script type="text/javascript" src="negozio.js"></script>
<style>
#tabellasconti{
    top: 50%;
    left:35%;
    position: absolute;
}
</style>
</head>
<body>
<h1>Il negozio di Mario</h1>
<table border = 3><tr><td> <img src= immaginiNegozio/ananas.jpg width = 200></td>
<td> <img src= immaginiNegozio/avocado.jpg width = 200></td>
<td> <img src= immaginiNegozio/papaya.jpg width = 200></td>
<td> <img src= immaginiNegozio/fragole.jpg width = 200></td>
<td> <img src= immaginiNegozio/banane.jpg width = 200></td></tr>
<tr><td> 10 euro al pezzo</td>
<td> 15 euro  confezione da 10 pezzi</td>
<td> 5 euro al pezzo</td>
<td> 8 euro alla cassetta</td>
<td> 20 euro alla cassa</td></tr>
</table>
<div id=modulo>
<form>
<h2>Quale prodotto vuoi acquistare? </h2>
<table><tr><td> nome</td>
	<td><input type=text name=nome onFocus=svuota(this.form.nome)> </td></tr>
<tr><td> prodotto</td>
	<td><select name=prod >
	   <option>ananas</option>
	   <option>avocado</option>
	   <option>papaya</option>
	   <option>fragole</option>
	   <option>banane</option>
	</select></td></tr>
<tr><td> numero confezioni</td>
	<td><input type=text name=conf onFocus=svuota(this.form.conf)></td></tr>
<tr><td> <input type=button name=invia value=ordina onClick=ordina(this.form)></td>
	<td><input type=reset name=reset value=annulla></td></tr>
</table>
<textarea name=conferma rows=4 cols=50 readonly=readonly>
</textarea>
</form></div>
<div id=tabellasconti>
<table border=1><tr>
<td colspan=2> sconti per ordini</td></tr>
<tr><td>inferiori a 50 euro</td>
<td>nessuno sconto</td></tr>
<tr><td>inferiori a 100 euro</td>
<td>sconto del 5%</td></tr>
<tr><td>superiori o uguali a 100 euro</td>
<td>sconto del 10%</td>
</tr></table></div>
</body>
</html>

e poi creiamo il file negozio.js:

function svuota(controllo){
    controllo.value="";
  }
  function ordina(f){
    errore =0
    f.conferma.value = "";
    if (f.nome.value == "" || f.nome.value == "inserisci il tuo nome" ){
       f.nome.value = "inserisci il tuo nome";
       errore+=1;
       }
    else{
		nome = f.nome.value;}
    if (f.conf.value == "" || f.conf.value == "inserisci il numero" ){
       f.conf.value = "inserisci il numero";
       errore+=1;
       }
    else{
		numConfezioni = eval(f.conf.value);}
    if (errore ==0){
    	prodotto = f.prod.value;
        if (prodotto == "ananas"){
            prezzo= 10;}
        if (prodotto == "avocado"){
            prezzo= 15;}
        if (prodotto == "papaya"){
            prezzo= 5;}
        if (prodotto == "fragole"){
            prezzo= 8;}
        if (prodotto == "banane"){
            prezzo= 20;}
        costoTot = prezzo * numConfezioni;
        if (costoTot<50){
           sconto=0;}
        else{
           if (costoTot<100){
              sconto= 5;}
           else{
               sconto=10;}
           }
        costoTot = costoTot - sconto*costoTot/100;
        messaggio ="gentile "+nome+" hai fatto un ordine di "+numConfezioni+" confezioni di "+prodotto;
        messaggio += "\nil costo totale è "+costoTot+" euro";
        f.conferma.value = messaggio;
        }
  }

function svuota(controllo){
    controllo.value="";
  }
  function ordina(f){
    errore =0
    f.conferma.value = "";
    if (f.nome.value == "" || f.nome.value == "inserisci il tuo nome" ){
       f.nome.value = "inserisci il tuo nome";
       errore+=1;
       }
    else{
		nome = f.nome.value;}
    if (f.conf.value == "" || f.conf.value == "inserisci il numero" ){
       f.conf.value = "inserisci il numero";
       errore+=1;
       }
    else{
		numConfezioni = eval(f.conf.value);}
    if (errore ==0){
    	prodotto = f.prod.value;
        if (prodotto == "ananas"){
            prezzo= 10;}
        if (prodotto == "avocado"){
            prezzo= 15;}
        if (prodotto == "papaya"){
            prezzo= 5;}
        if (prodotto == "fragole"){
            prezzo= 8;}
        if (prodotto == "banane"){
            prezzo= 20;}
        costoTot = prezzo * numConfezioni;
        if (costoTot<50){
           sconto=0;}
        else{
           if (costoTot<100){
              sconto= 5;}
           else{
               sconto=10;}
           }
        costoTot = costoTot - sconto*costoTot/100;
        messaggio ="gentile "+nome+" hai fatto un ordine di "+numConfezioni+" confezioni di "+prodotto;
        messaggio += "\nil costo totale è "+costoTot+" euro";
        f.conferma.value = messaggio;
        }
  }

Quando l’utente clicca sul tasto ordina, viene eseguita la funzione ordina(this.form) che deve innanzitutto verificare che siano stati immessi i dati obbligatori.

I controlli sui dati obbligatori sono scritti in JavaScript; testiamo i due checkbox: per ogni box vuoto aggiungiamo 1 a un contatore degli errori. Solo se il contatore è a zero possiamo procedere a calcolare l’ordine del cliente, altrimenti gli chiediamo di inserire i dati mancanti.

Il connettivo logico OR in js si scrive con le doppie barre verticali (||).
Grazie a queste istruzioni, il programma stesso memorizza il messaggio di avvertimento come valore nel campo text e quindi, una volta visualizzato il messaggio, l’utente è costretto a cancellarlo prima di inserire i propri dati

La funzione svuota() cancella il contenuto di un controllo qualsiasi perché l’oggetto controllo le viene passato come parametro

Una volta effettuati i controlli, la funzione ordina, se sono stati inserite dei valori in nome e conf, deve leggere quale prodotto è stato scelto dalla casella di scelta a discesa f.prod.value

In base al prodotto scelto, attribuiamo il valore alla variabile prezzo e calcoliamo il costo totale moltiplicando il prezzo per il numero di confezioni acquistate. In seguito decidiamo lo sconto da applicare.

Dobbiamo quindi comporre il messaggio di conferma, che viene trasferito nella textarea del form (f.conferma.value)

Ora svolgiamo un altro esercizio per imparare a gestire anche i controlli checkbox e radio button.
Realizziamo una pagina web per richiedere un preventivo per il soggiorno in un villaggio vacanza.
Possiamo vedere che, per calcolare il preventivo, dobbiamo leggere, oltre a quelli già visti, i valori selezionati per il tipo di sistemazione, per le scelte su elettricità, acqua corrente, animale domestico e posto auto del campeggio (checkbox) e per il posto auto (radio button).
Quando è obbligatorio selezionare un’alternativa del radio button conviene inserire nel tag la proprietà checked sulla scelta più probabile in modo che questa risulti già selezionata.
Ricordiamo, inoltre, che tutte le alternative di un radio button che fanno parte dello stesso gruppo sono in mutua esclusività e quindi il name deve essere lo stesso per tutte; questo significa che la variabile che viene riportata al file JavaScript ha sempre lo stesso nome e che possiamo distinguere la scelta fatta dall’utente in base al value che leggiamo in questa variabile.
Invece, per leggere le scelte dell’utente quando utilizziamo i checkbox, dobbiamo ricordare che la scelta viene memorizzata nella proprietà checked, che può valere true o false a seconda che il quadratino sia stato selezionato o meno

Il codice completo di tutti gli esempi è possibile scaricarlo o dalla sezione download del sito oppure al link a fine articolo.

Il DOM e la gestione delle proprietà grafiche

Con JavaScript possiamo accedere in modo completo agli oggetti di una pagina web, ma, per poter capire come, dobbiamo prima comprendere che cos’è e come funziona il Document Object Model (DOM).
Il DOM è un modello ad albero dei componenti di un documento ed è lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in modo indipendente rispetto sia alla lingua sia alla piattaforma.
In figura è rappresentata la struttura del codice HTML CO2 che abbiamo esamiato:

l DOM è un modo per accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile dei documenti; il suo standard deriva dalla programmazione a oggetti.
Utilizzando il DOM, JavaScript può modificare, rimuovere o aggiungere tutti gli elementi, gli attributi e gli stili di una pagina web.

Nel DOM tutti gli elementi sono definiti come oggetti e quindi dispongono di roprietà e metodi (una proprietà è un valore che si può ottenere o impostare, un metodo è un’azione che si può intraprendere).
Il modo più comune per accedere a un elemento HTML è quello di utilizzare l’id dell’elemento e il metodo getElementById(). Per poter utilizzare questo metodo dobbiamo assegnare un identificativo (id) diverso a tutti gli elementi che ci interessa richiamare.

Per accedere al contenuto di un oggetto possiamo utilizzare la proprietà innerHTML.
Supponiamo di avere la pagina web di figura il cui corrispondente codice HTML (provaDOM.html) è:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title>prova DOM</title>
  <script type="text/javascript" src=provaDOM.js>
  </script>
</head>
<body>
   <h1 id=titolo>Questo è il titolo di default</h1>
   <p id=testo>Questo è il testo della pagina</p>
   <img id=immagine src=immaginiDOM/piuma.png width=300>
   <div id=rosso style="background-color: red; color: white; width: 100px; height:50px">
   Questa scritta è nel rettangolo</div>
   <form>
   <input type=button value=modifica  onclick="modifica()">
   </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title>prova DOM</title>
  <script type="text/javascript" src=provaDOM.js>
  </script>
</head>
<body>
   <h1 id=titolo>Questo è il titolo di default</h1>
   <p id=testo>Questo è il testo della pagina</p>
   <img id=immagine src=immaginiDOM/piuma.png width=300>
   <div id=rosso style="background-color: red; color: white; width: 100px; height:50px">
   Questa scritta è nel rettangolo</div>
   <form>
   <input type=button value=modifica  onclick="modifica()">
   </form>
</body>
</html>

Nel codice HTML, per ogni elemento della pagina è stato definito un diverso id e un pulsante richiama la funzione js modifica, che si trova nel file provaDOM.js riportato qui sotto, per apportare alcuni cambiamenti alla pagina originale:

function modifica(){
  titolo = document.getElementById("titolo");
  messaggio="leggo il titolo "+ titolo.innerHTML;
  alert(messaggio);
  testo = document.getElementById("testo");
  immagine = document.getElementById("immagine");
  rosso = document.getElementById("rosso");
  titolo.innerHTML = "questo è il titolo modificato";
  testo.style.color = "#00ff00";
  testo.style.backgroundColor = "green";
  immagine.src ="immaginiDOM/lili.jpg";
  rosso.style.color="white";
  rosso.style.backgroundColor = "green";
  rosso.style.width="200px";
  rosso.style.height="100px";
  }

function modifica(){
  titolo = document.getElementById("titolo");
  messaggio="leggo il titolo "+ titolo.innerHTML;
  alert(messaggio);
  testo = document.getElementById("testo");
  immagine = document.getElementById("immagine");
  rosso = document.getElementById("rosso");
  titolo.innerHTML = "questo è il titolo modificato";
  testo.style.color = "#00ff00";
  testo.style.backgroundColor = "green";
  immagine.src ="immaginiDOM/lili.jpg";
  rosso.style.color="white";
  rosso.style.backgroundColor = "green";
  rosso.style.width="200px";
  rosso.style.height="100px";
  }

In questo modo le modifiche alla pagina vengono apportate premendo il pulsante modifica.
Per leggere il contenuto del controllo con identificativo titolo, abbiamo utilizzato la proprietà innerHTML

Inizialmente nel file html creiamo le variabili JavaScript per il testo della pagina (id testo), per l’immagine e per il rettangolo che compare sotto l’immagine (id rosso), poi modifichiamo il testo del titolo, il colore del testo e dello sfondo del tag p (id testo), l’immagine e alcuni stili del tag div (id rosso).
Le proprietà modificate dipendono dalla proprietà style e, in questo esempio, hanno gli stessi nomi delle proprietà analoghe del CSS.

Svolgiamo ora un secondo esercizio e creiamo una pagina web che simuli il lancio di una moneta:

<html>
  <head>
    <title>Lancio moneta</title>
    <script type = "text/javascript" src = "moneta.js"></script>
  </head>
<body>
  <h1>Lancio moneta</h1>
  <p>Fai la tua scelta</p>
  <input type = "radio" name = "scelta" id = "testa" value = "testa"
    checked>testa<br>
  <input type = "radio" name = "scelta" id = "croce" value = "croce"             >croce<br>
  <input type = button onclick = "lancia()" value = Lancia><br>
  <img id = "moneta" src = "immagini/testa.png" width = 100>
  <h1 id = "messaggio"></h1>
</body>
</html>

<html>
  <head>
    <title>Lancio moneta</title>
    <script type = "text/javascript" src = "moneta.js"></script>
  </head>
<body>
  <h1>Lancio moneta</h1>
  <p>Fai la tua scelta</p>
  <input type = "radio" name = "scelta" id = "testa" value = "testa"
    checked>testa<br>
  <input type = "radio" name = "scelta" id = "croce" value = "croce"             >croce<br>
  <input type = button onclick = "lancia()" value = Lancia><br>
  <img id = "moneta" src = "immagini/testa.png" width = 100>
  <h1 id = "messaggio"></h1>
</body>
</html>

Dopo aver chiesto all’utente di scegliere fra testa e croce, simuliamo il lancio. Se viene testa visualizziamo l’immagine “testa”, se viene croce visualizziamo l’immagine “croce” e mostriamo il messaggio “Hai vinto!” se l’utente ha indovinato o “Hai perso!” se non ha indovinato (segue il codice js).

Il file moneta.js che contiene la funzione lancia() è il seguente:

function lancia() {
	var scelta;
	moneta = parseInt(Math.random()*2);
	var testa = document.getElementById('testa').checked;	
	if(testa)
		scelta = 1;
	else
		scelta = 0;
	if(moneta==0){				
			document.getElementById("moneta").src = "immaginiMoneta/croce.jpg";}
	else{
			document.getElementById("moneta").src="immaginiMoneta/testa.jpg";}
	if(moneta==scelta){
		document.getElementById('messaggio').innerHTML= "Hai vinto!!!";
        document.getElementById('messaggio').style.color = "green";
        }
	else{
		document.getElementById('messaggio').innerHTML= "Hai perso!!!";
        document.getElementById('messaggio').style.color = "red";
	}
}

function lancia() {
	var scelta;
	moneta = parseInt(Math.random()*2);
	var testa = document.getElementById('testa').checked;	
	if(testa)
		scelta = 1;
	else
		scelta = 0;
	if(moneta==0){				
			document.getElementById("moneta").src = "immaginiMoneta/croce.jpg";}
	else{
			document.getElementById("moneta").src="immaginiMoneta/testa.jpg";}
	if(moneta==scelta){
		document.getElementById('messaggio').innerHTML= "Hai vinto!!!";
        document.getElementById('messaggio').style.color = "green";
        }
	else{
		document.getElementById('messaggio').innerHTML= "Hai perso!!!";
        document.getElementById('messaggio').style.color = "red";
	}
}

Poiché il valore dato all’attributo id deve esse re univoco nella pagina web, i due elementi del gruppo radio devono avere id diversi, ma avran no lo stesso name perché devono essere mutua mente esclusivi.
Nel codice JavaScript abbiamo testato la pro prietà checked del controllo per sapere quale scelta è stata fatta.

Abbiamo utilizzato solo alcune proprietà degli elementi del DOM: innerHTML, style.color, style.backgroundColor, src, style.width, style.height,
checked, ma in realtà possiamo agire su tutte le proprietà di HTML e CSS.
Per i testi o le caselle di scelta a discesa la proprietà maggiormente utilizzata è value, mentre per i controlli checkbox è checked, come per i radio.
La proprietà style è molto utilizzata perché permette di impostare lo stile in modo veloce (in realtà non è uno standard DOM, ma funziona bene su tutti i browser). Un’altra proprietà, tagName, restituisce il nome del tag (per esempio p o img).
Esistono tre metodi per impostare o eliminare gli attributi:

• setAttribute imposta un attributo tramite il nome e il valore (per esempio: p1.setAttribute(“align”, “center”););
• getAttribute restituisce il valore di un attributo tramite il suo nome (per esempio: p1.getAttribute(“align”););
• removeAttribute rimuove un attributo (e imposta il valore di default) tramite il suo nome (per esempio: p1.removeAttribute(“align”);).

Gli eventi

Esistono moltissimi eventi che possono essere intercettati dal codice Java Script; finora abbiamo visto i più comuni: onClick, onFocus e onLoad.
La funzione che gestisce un evento intercettato viene anche detta handler (gestore).
Ci sono eventi di vario tipo.

Eventi attivabili dall’utente con il mouse

• onClick: viene attivato quando si clicca su un oggetto;
• onDblClick: viene attivato con un doppio clic;
• onMouseDown: viene attivato quando si preme il tasto sinistro del mouse;
• onMouseOver: viene attivato quando il mouse si muove su un oggetto;
• onDragDrop: viene attivato quando l’utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
• mouseUp: viene attivato quando l’utente rilascia un pulsante del mouse su un elemento.

Eventi attivabili dall’utente con la tastiera

• onKeyPress: viene attivato quando un utente preme e rilascia un tasto o quando lo tiene premuto;
• onKeyDown: viene attivato quando viene premuto un tasto;
• onHelp: viene attivato alla pressione del tasto F1.

Eventi attivabili dalle modifiche dell’utente

• onChange: viene attivato quando il contenuto di un campo di un form o modulo viene modificato o non è più selezionato;
• input: viene attivato ogni volta che il valore di un elemento <input>, <textarea> o <select> cambia. È molto utile per rilevare modifiche in<br /> tempo reale durante la digitazione;
• submit: viene attivato quando un modulo viene inviato. Può essere utilizzato per eseguire la convalida o impedire l’invio predefinito del modulo

Eventi legati al “fuoco” (attivazione del controllo)

• onFocus: viene attivato quando l’utente entra in un campo;
• onSelect: viene attivato quando si seleziona del testo all’interno di una casella di testo sia con il mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia.

Eventi attivabili dal caricamento degli oggetti

• onLoad: viene attivato quando vengono caricati degli oggetti, per lo più finestre e immagini

Eventi attivabili dai movimenti delle finestre

• onScroll: viene attivato quando si effettua lo scrolling della pagina con il mouse, con i tasti PGUP e PGDOWN o con il metodo doScroll.

Eventi legati a tasti particolari

• onSubmit: viene attivato cliccando sul tasto Invio di un form;
• onReset: viene attivato cliccando sul tasto Annulla di un form.

Proviamo a utilizzare qualche evento che non abbiamo ancora visto: vo gliamo creare una galleria di immagini, visualizzandole una alla volta. Passando con il mouse sulla freccia a sinistra e sulla freccia a destra vogliamo visualizzare l’immagine successiva o quella precedente (evento onMouseOver)

Seguono il codice della pagina HTML galleria.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
	<LINK rel="stylesheet" type="text/css" href="galleria.css" />
    <script type="text/javascript" src="galleria.js"></script>  
  <title>Galleria immagini</title>
</head>
<body>
<h1>Galleria immagini</h1>
<div class=sinistra>
<img src=immaginiGalleria/frecciaSx.jpg width=50 onMouseOver=indietro()>
</div>
<div class=immagine>
<img src=immaginiGalleria/KyraPiccola.png width=300 id="gatto" >
</div>
<div class=destra>
<img src=immaginiGalleria/frecciaDx.jpg width=50 onMouseOver=avanti()>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
	<LINK rel="stylesheet" type="text/css" href="galleria.css" />
    <script type="text/javascript" src="galleria.js"></script>  
  <title>Galleria immagini</title>
</head>
<body>
<h1>Galleria immagini</h1>
<div class=sinistra>
<img src=immaginiGalleria/frecciaSx.jpg width=50 onMouseOver=indietro()>
</div>
<div class=immagine>
<img src=immaginiGalleria/KyraPiccola.png width=300 id="gatto" >
</div>
<div class=destra>
<img src=immaginiGalleria/frecciaDx.jpg width=50 onMouseOver=avanti()>
</div>
</body>
</html>

di seguito il .css associato:

.sinistra{
        position: absolute;
        top: 30%;
        left: 0;
        height: 100px;
        width: 70px;
        }
.immagine{
        position: absolute;
        top: 10%;
        left: 30%;
        height: 500px;
        width: 500px;
        }
.destra{
        position: absolute;
        top: 30%;
        right: 0;
        height: 100px;
        width: 70px;
        }

.sinistra{
        position: absolute;
        top: 30%;
        left: 0;
        height: 100px;
        width: 70px;
        }
.immagine{
        position: absolute;
        top: 10%;
        left: 30%;
        height: 500px;
        width: 500px;
        }
.destra{
        position: absolute;
        top: 30%;
        right: 0;
        height: 100px;
        width: 70px;
        }

ed infine il file .js:

var foto=new Array();

        foto[0]="immaginiGalleria/Vicky.jpg";
        foto[1]="immaginiGalleria/Piuma.jpg";
        foto[2]="immaginiGalleria/Paci.jpg";
        foto[3]="immaginiGalleria/KyraPiccola.png";
        foto[4]="immaginiGalleria/piumaPiccola.jpg";
        foto[5]="immaginiGalleria/liliPiccola.jpg";  
        var i=0;
      function avanti(){
        if (i<foto.length-1)
           i++;
        else 
           i=0;
        document.getElementById("gatto").src=foto[i];

        }

      function indietro(){
        if (i==0)
           i=foto.length-1
        else 
           i--;
        document.getElementById("gatto").src=foto[i];
        }

var foto=new Array();

        foto[0]="immaginiGalleria/Vicky.jpg";
        foto[1]="immaginiGalleria/Piuma.jpg";
        foto[2]="immaginiGalleria/Paci.jpg";
        foto[3]="immaginiGalleria/KyraPiccola.png";
        foto[4]="immaginiGalleria/piumaPiccola.jpg";
        foto[5]="immaginiGalleria/liliPiccola.jpg";  
        var i=0;
      function avanti(){
        if (i<foto.length-1)
           i++;
        else 
           i=0;
        document.getElementById("gatto").src=foto[i];

        }

      function indietro(){
        if (i==0)
           i=foto.length-1
        else 
           i--;
        document.getElementById("gatto").src=foto[i];
        }

La particolarità di questo codice è la creazione di un vettore che, essendo un oggetto per JavaScript, ha la seguente sintassi:
var foto = new Array();
e possiede diverse proprietà; una di queste è il suo numero di componenti, che possiamo rilevare con length:
foto.length
Per caricare le componenti del vettore foto, le abbiamo richiamate con l’indice nella parentesi quadra (foto[i]).
Nel codice HTML abbiamo intercettato l’evento onMouseOver su ciascuna freccia: questo evento viene intercettato se il mouse si sposta sul controllo, quindi, per cambiare l’immagine, non possiamo lasciare il mouse sulla freccia senza muoverlo, ma dobbiamo spostarlo fuori e poi dentro l’area della freccia.

Se volessimo visualizzare un’immagine diversa ogni 5 secondi a partire dal caricamento della pagina non dovremmo fare altro che modificare il file .js inserendo la funzione:

function scorriImmagini(){
  document.getElementById("gatto").src = foto[i];
    if (i == 5)
      i = 0
    else
      i++;
    setTimeout("scorriImmagini()","1000");
}

function scorriImmagini(){
  document.getElementById("gatto").src = foto[i];
    if (i == 5)
      i = 0
    else
      i++;
    setTimeout("scorriImmagini()","1000");
}

La ripetizione in JavaScript

Realizziamo una pagina web che esegua la moltiplicazione tra due numeri ricevuti in input in un form, utilizzando un ciclo di somme (ciclo for)

Questo il codice della pagina HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <script type="text/javascript" src="moltiplicazioneFOR.js"></script>
  <title>Moltiplicazione con ciclo di somme</title>
</head>
<body>
<h1>Moltiplicazione con ciclo di somme</h1>
<form>
<table>
<tr>
<td>primo fattore </td><td> <input type=text name=fatt1 id=fatt1> </td>
</tr>
<tr>
<td>secondo fattore</td><td><input type=text name=fatt2 id=fatt2> </td>
</tr>
<tr>
<td align=right><input type=button name=invia value=calcola onClick=calcola()></td>
<td> <input type=reset name=annulla value=annulla></td>
</tr>
<tr>
<td>risultato </td><td> <input type=text name=risultato id=risultato readonly=readonly > </td>
</tr>
</table>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <script type="text/javascript" src="moltiplicazioneFOR.js"></script>
  <title>Moltiplicazione con ciclo di somme</title>
</head>
<body>
<h1>Moltiplicazione con ciclo di somme</h1>
<form>
<table>
<tr>
<td>primo fattore </td><td> <input type=text name=fatt1 id=fatt1> </td>
</tr>
<tr>
<td>secondo fattore</td><td><input type=text name=fatt2 id=fatt2> </td>
</tr>
<tr>
<td align=right><input type=button name=invia value=calcola onClick=calcola()></td>
<td> <input type=reset name=annulla value=annulla></td>
</tr>
<tr>
<td>risultato </td><td> <input type=text name=risultato id=risultato readonly=readonly > </td>
</tr>
</table>
</form>
</body>
</html>

e questo il file .js:

function calcola(){
      fattore1 = eval(document.getElementById("fatt1").value);
      fattore2 = eval(document.getElementById("fatt2").value);
      ris = 0;
      for (i=0; i<fattore2; i++){
          ris += fattore1;
       }      
      document.getElementById("risultato").value = ris;

   }

function calcola(){
      fattore1 = eval(document.getElementById("fatt1").value);
      fattore2 = eval(document.getElementById("fatt2").value);
      ris = 0;
      for (i=0; i<fattore2; i++){
          ris += fattore1;
       }      
      document.getElementById("risultato").value = ris;

   }

Modifichiamo questo esercizio utilizzando un ciclo while, cioè un ciclo precondizionale; l’interfaccia grafica dell’esercizio non cambia.

In questo caso abbiamo:

• un contatore di ciclo che va inizializzato prima del ciclo,
• un blocco di istruzioni (che va delimitato con parentesi graffe) che vie ne ripetuto finché si mantiene vera la condizione dopo la parola while. Nel blocco di istruzioni occorre ricordare di incrementare il contatore.

il nuovo file .js sarà:

function calcola(){
   fattore1 = eval(document.getElementById("fatt1").value);
   fattore2 = eval(document.getElementById("fatt2").value);
   ris = 0;
   i = 0;
   while(i < fattore2){
      ris += fattore1;
      i++;
   }
document.getElementById("risultato").value = ris; 
}

function calcola(){
   fattore1 = eval(document.getElementById("fatt1").value);
   fattore2 = eval(document.getElementById("fatt2").value);
   ris = 0;
   i = 0;
   while(i < fattore2){
      ris += fattore1;
      i++;
   }
document.getElementById("risultato").value = ris; 
}

Tutti gli esempi di questo articolo possono essere scaricati al seguente link: https://github.com/MarioGiagnotti/JavaScript/archive/refs/heads/main.zip

oppure direttamente dalla sezione DOWNLOAD