Fondamenti di JavaScript

Variabili, Condizioni, Cicli, Slideshow responsive in 200 byte!

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 11 Marzo 2023
Categoria: Web Marketing Costruzione siti web JavaScript

JavaScript è un linguaggio di scripting che fornisce al browser determinate istruzioni da compiere. Un linguaggio di scripting è una esemplificazione di un linguaggio di programmazione, viene interpretato da un browser Web e viene implementato direttamente all’interno di un documento HTML.
Tramite JavaScript è possibile fare tante cose come ad esempio conferire movimento alla pagina, fare dei controlli (rollover sulle immagini, modifica dei contenuti in base a input dell'utente, controllare inserimenti in un form, ecc). Con i linguaggi di programmazione (ad esempio C C++ oppure Java) è invece possibile fare anche altro. In questo articolo vedremo come utilizzare i fondamenti di JavaScript per programmare una pagina web.

Sommario Fondamenti JavaScript

• Introduzione
• Scrivere codice
• Tipi di dati, Operatori e Variabili
• Condizioni
  • If Else
  • If Else If Else
  • Switch
  • Operatore ternario
• Cicli
  • While
  • Do While
  • For
• Eventi
• Funzioni
• Esempi vari
• Array
• Creare uno slideshow in Javascript in 200 byte!
  • Slideshow al clic
  • Slideshow automatico

Introduzione

Per chi comprende la lingua inglese ecco il link di W3C JavaScript.
Alcune limitazioni a cui il programmatore deve badare:

• JavaScript può essere disabilitato dal navigatore tramite le impostazioni del browser perché è un linguaggio lato client, lavora cioè sul computer dell'utente; per questo è meglio non demandare a JavaScript funzioni importanti (ad esempio per l'invio di form) ripiegando su linguaggi lato server come PHP (la tecnica per disabilitare JavaScript varia da browser a browser, ma basta fare una ricerca su Google del tipo Disabilitare JavaScript su Chrome per sapere la procedura)
• JavaScript ha diversi gradi di compatibilità con i differenti browser e loro versioni più o meno recenti

JavaScript non è Java!
Java è interpretato, viene eseguito sul server, è un linguaggio di programmazione con cui si realizzano veri e propri programmi. È fortemente tipizzato.
JavaScript è compilato, viene eseguito sul client, è un linguaggio per realizzare script con cui si possono creare begli effetti. È debolmente tipizzato.
Entrambi i linguaggi hanno comunque alcune strutture simili e inoltre JavaScript è propedeutico per imparare qualsiasi altro linguaggio di scripting o programmazione.

Tutti i linguaggi di programmazione permettono di gestire le attività desiderate attraverso l'uso delle istruzioni. Il codice scritto dal programmatore utilizza tali istruzioni e si chiama sorgente. Il programma sorgente per essere eseguito deve essere, a seconda del tipo di linguaggio utilizzato, compilato o interpretato.
Compilazione: il programma sorgente viene tradotto in linguaggio macchina (cioè viene compilato) un’unica volta e per essere eseguito si lancia direttamente il programma tradotto (es. Cobol, C, C++, Visual Basic); questi linguaggi compilati, detti anche linguaggi imperativi, hanno prestazioni migliori.
Interpretazione: il programma sorgente, per essere eseguito, viene tradotto in linguaggio macchina ogni volta (cioè viene interpretato), quindi il programma tradotto non esiste (es. JavaScript, PHP); la potenza di questi linguaggi è l’alta portabilità e l’immediatezza tra quello che si scrive e quello che viene eseguito, ma rimangono problemi come la ricerca di errori nel codice sorgente o il carico di lavoro maggiore per il processore (che ogni volta deve interpretare il programma sorgente).
Linguaggi di programmazione come Java e C#, sono semi-interpretati, perché il sorgente viene tradotto in uno pseudo linguaggio macchina, chiamato codice intermedio (Bytecode per Java, Assembly per C# - C sharp). Il codice intermedio, a sua volta, viene interpretato al volo (dalla famosa JVM Java Virtual Machine nel caso di Java) e inviato al processore. Ciò permette di controllare eventuali errori del codice sorgente e di creare programmi relativamente leggeri, ma pecca nelle prestazioni, non proprio soddisfacenti
Ecco una scheda riepilogativa di alcuni linguaggi di programmazione e di scripting:
- 1940 Assembler Assemblato
- 1950 Fortran Compilato
- 1950 Cobol Compilato
- 1960 Algol Compilato
- 1960 Basic Interpretato
- 1970 Pascal Compilato
- 1970 C Compilato
- 1980 C++ Compilato
- 1990 Java Semi-Interpretato
- 1995 JavaScript Interpretato
- 2000 C# Semi-Interpretato

Linguaggi di programmazione di alto livello e basso livello. Quelli di Alto livello sono più vicini (orientati) al linguaggio dell’uomo (tutti i linguaggi che si capiscono leggendoli e che di solito sono in lingua inglese), mentre quelli a Basso livello sono più vicini al linguaggio della macchina, es. Assembly,  risultano più veloci, ma sono più difficili (sono scritti prevalentemente in codice binario, 0 e 1, ognuno dei quali è detto bit, binary digit traducibile in numero binario).

Un programma, definibile graficamente da un Algoritmo attraverso un diagramma di flusso, è un insieme d'istruzioni organizzate logicamente, con l'obiettivo di risolvere un problema. Vediamo il significato dei blocchi elementari di un diagramma:
- Ovale indica i limiti del processo (Inizio e Fine)
- Rettangolo indica un blocco di azione
- Rombo indica un blocco decisionale
- Linea indica una interconnesione
- Parallelepipedo indica comunicazioni con l'esterno (Input e Output)
Ad esempio ecco un algoritmo per cuocere la pasta. L'iterazione (Bolle/No/Aspetta un minuto/Bolle) descrive che l’azione deve essere ripetuta quando l’esito del controllo lo richiede.

Un linguaggio di programmazione deve permettere al programmatore di svolgere le seguenti attività:
- Memorizzare informazioni (es. caratteri, numeri, date, valori logici), sotto forma di variabili e/o array (vettori/matrici)
- Acquisire (input) e/o visualizzare (output) informazioni
- Eseguire calcoli e/o concatenamenti
- Fare scelte in base a condizioni predefinite che possono essere vere o false (costrutti condizionali)
- Ripetere blocchi d'istruzioni mentre una condizione risulta vera o falsa (cicli)
- Gestire errori di esecuzione per evitare d'interrompere i programmi in modo anomalo

In JavaScript, come in tutti i linguaggi di programmazione, vi sono parole riservate che hanno un significato particolare e sono inutilizzabili come nomi di variabile, funzione, metodo, oggetto. Esse sono, solo per citare le più note: boolean, break, byte, case, char, const, default, do, double, else, enum, false, float, for, function, goto, if, int, long, null, private, public, return, short, static, switch, this, true, var, void, while, with.

Scrivere codice

JavaScript va nel tag head o nel tag body (ecco tutti i tag HTML)? Anche se quanto tra poco affermato si capirà meglio nel prosieguo della lettura, si anticipa che il codice può essere inserito in qualsiasi punto del documento HTML, sia nell'<head> che nel <body>; la scelta della posizione dipende da vari fattori, ma in linea di massima si può dire che la definizione di una funzione, ad esempio
function saluto(){
alert('Ciao’);
}
può andare dove si preferisce, ma la sua invocazione invece, ovvero saluto(), va dopo che la definizione della funzione è stata caricata in memoria, per cui spesso a scopi cautelativi si preferisce mettere le definizioni nel tag head.

Per scrivere ed eseguire un programma con JavaScript è sufficiente un qualsiasi editor, anche il Blocco note e un browser.
L'esempio seguente mostra la struttura di un programma di un ipotetico file prova.html:
<!doctype html> <html> <head> <meta charset="utf-8">
<title>Primo programma in JS</title> </head> <body>
<script>
document.write("Hello world!");
</script>
</body></html>
I tag <script> e </script> indicano inizio e fine del programma. Esso visualizza nella pagina del browser scelto il messaggio:
Hello world! attraverso il metodo write dell'oggetto document (un metodo è un sottoprogramma associato a un oggetto, che può richiedere uno o più parametri per funzionare).
Il codice può essere inserito sia nella sezione head che body, per questioni SEO metterlo prima della chiusura del tag body.

Quando il browser analizza la pagina, nel momento in cui incontra le istruzioni, se non indicato diversamente, le esegue secondo l'ordine nel quale sono indicate, ovvero in sequenza (questa operazione è chiamata parsing).
Le istruzioni sono sempre separate da un punto e virgola, a JavaScript non interessano quindi i ritorni a capo.
Dunque per inserire un codice in una pagina HTML, necessita l'etichetta <script>, a essa andrebbe associato l'attributo che specifica il tipo di script usato ovvero type="application/x-javascript" ma va bene anche type="text/javascript"; per la maggior parte del browser è tuttavia possibile omettere tale attributo in quanto JavaScript è il linguaggio di scripting web predefinito.
È sconsigliato language="JavaScript".

All'interno del tag script una volta, per problemi di compatibilità con i browser che non supportavano JavaScript, il testo veniva delimitato dai delimitatori di commento:
<script>
<!--
...codice...
-->
</script>
Questo accorgimento è tuttavia oggi superfluo in quanto la maggior parte dell'utenza utilizza browser JavaScript compatibili.
Nel caso remotissimo che si usino browser non compatibili o quelli in cui JavaScript è disabilitato, viene in aiuto il tag <noscript> </noscript> che può contenere testo e grafica alternativi o un reindirizzamento in pagine statiche, che non adoperano JavaScript:
<noscript>
<meta http-equiv refresh content="0; url=pagina.htm">
</noscript>

È anche possibile usare l'attributo src per inserire un codice JavaScript esterno; in questo caso si lascia vuoto lo spazio all'interno del tag:
<script src="script.js"> </script>
Dunque uno script può essere inserito in due modi, ma tramite eventi sarà possibile immetterlo anche in linea:
<a href= "index.html" onclick="alert('Ciao caro')">Home</a>
<a href="#" onmouseover="alert('OK, ci sei passato')">  Eseguo JS al passaggio del mouse</a>

In JavaScript è possibile inserire commenti tramite slash e asterisco:
// qui si scrive il testo commentato
Oppure
/* qui si scrive il testo commentato */
Oppure
/*
qui si scrive il testo commentato
su più righe
*/
Ad esempio:
<script>*Commento*/
document.write("Hello world!");/Commento
</script>

Tipi di dati, Operatori e Variabili

Tipi di dati

Sequenze di escape
Introdotte tramite \, come visto prima, sono utili anche per:
\n andare a capo
document.write("Prima riga \n Seconda riga");
\t eseguire una tabulazione

Alcuni Operatori

Operatori di confronto

Operatori logici

Operatori aritmetici

Variabili

Condizioni

Le istruzioni condizionali permettono di eseguire blocchi diversi d'istruzioni, in base a una condizione di scelta che può essere vera o falsa.

• If else
• If else if else …
• Switch
• Condizione ? esp1 : esp2 (Operatore ternario)

If else

If else if else

Switch

Operatore ternario

Altro esempio, porre la seguente domanda all’utente In che anno Cristoforo Colombo scoprì l’America?
Se l’utente risponde 1492 appare l’alert Risposta esatta, altrimenti appare
Hai sbagliato
(utilizzare una variabile a, i comandi prompt, alert e il costrutto if else)
var a = prompt("In che anno Cristoforo Colombo scoprì le Americhe?");
if (a == 1492) {
alert("Risposta esatta");
} else {
alert("Hai sbagliato");
}

Cicli

I cicli permettono di ripetere un blocco d'istruzioni mentre una condizione risulta vera.

• While
• Do while
• For

While e Do While

Esempio: contare fino a un valore predefinito, l'utente può inserire un altro valore fino a cui contare se risponde sì alla domanda Vuoi continuare?
var strval;
var valore;
var conta;
var ripetizioni=0;
var risposta;
do {
ripetizioni=ripetizioni+1;
strval=prompt("Fino a quanto devo contare?");
valore=parseInt(strval);
conta=1;
document.write(ripetizioni+") Conta fino a "+valore+"<br/>");
document.write("------"+"<br/>");
while(conta<=valore){
document.write(conta+"<br/>");
conta=conta+1;/ Incrementa conta di 1 (contatore)
}
document.write("<br/>");
risposta= prompt("Vuoi continuare?","s/n");
risposta=risposta.toLowerCase();
} while(risposta=="s");

Esempio: inserire un controllo per verificare che il valore immesso dall'utente sia un numero: la richiesta dell'età viene infatti ripetuta se il valore introdotto non è un numero
do
{
anni = prompt("Quanti anni hai?");
} while (isNaN(anni))/Continua a ripetere l’età finché non inserisci un numero
var msg = "Ciao, vedo che sei " + (anni >= 18 ? "maggiorenne" : "minorenne") + "!";
alert(msg);

For

Eventi

Un gestore di eventi JavaScript è individuato da un attributo inserito in un tag HTML che specifica l’azione JavaScript da eseguire quando si verifica l’evento controllato dal gestore. Esistono centinaia di eventi.
Vediamone qualcuno:
onClick e onDblClick si verificano quando l'utente fa clic o doppio clic sull'elemento in questione
<a href="p.html" onClick = "alert('ciao')">Restituisco finestra con Ok</a>
<a href="p.html" onClick = "return(confirm('Sicuro?'))">Restituisco finestra con Ok, Annulla</a>
<img src="a.jpg" width="100px" onClick = "alert('Hai fatto click sull\'immagine!')" alt="">

onMouseOver e onMouseOut quando l'utente sposta il mouse dentro l'oggetto e quando lo sposta fuori. Utile per creare effetti di Rollover
<img src="1.jpg" onMouseOver = "document.images[0].src = '1.jpg';" onMouseOut = "document.images[0].src='2.jpg';" alt=""><br>
<img src="3.jpg" onMouseOver = "document.images[1].src = '3.jpg';" onMouseOut = "document.images[1].src='4.jpg';" alt="">
Ogni immagine all'interno di una pagina web ha un numero indice che la identifica.
L'esempio sopra riportato andrà quindi bene anche per altre immagini variando il numero indice fra le quadre

Gli eventi sono importanti anche perché possono essere associati a funzioni, quando si scatena l'evento la funzione associata viene richiamata ed eseguita attraverso la seguente sintassi:
<img src="logo.png" width="100px" onClick="nomefunzione()" alt="">

Nella stessa pagina HTML ci possono essere più funzioni JavaScript, ogni funzione deve avere un nome diverso.
Struttura funzione:
function nomefunzione (argomenti) {
/ codice JS
}
La funzione è molto utile quando si devono riciclarne le istruzioni in essa contenute, perché la funzione va scritta una sola volta e poi si richiama nel codice semplicemente il suo nome.
Gli argomenti (o parametri) di una funzione sono facoltativi e, se presenti, sono variabili a cui si può assegnare un valore quando la funzione viene richiamata per essere eseguita, ad esempio la funzione benvenuto può essere scritta nel modo seguente:
<body>
function benvenuto (nome) {
       alert("Benvenuto, " + nome);
}
/Per eseguire la funzione essa va richiamata (invocata):
var n = prompt("Come ti chiami?");
if (n != "")
benvenuto (n);
</body>

Esempio: modifica il colore di sfondo di una pagina web
<script>
    function sfondo(pippo) {
          document.bgColor = pippo;
}
 </script>
<h1>Modifica colore sfondo</h1>
<p>Ciò è possibile grazie alla funzione JavaScript bgColor, all'interno di una funzione definita dall'utente chiamata sfondo(pippo), richiamata dagli input che trasferiscono il colore alla funzione. </p>
 <form>
  <input type="button" value="Rosso" onclick="sfondo('red')">
  <input type="button" value=" Blu " onclick="sfondo('blue')">
  <input type="button" value="Bianco" onclick="sfondo('white')">
</form>

Il DOM (Document Object Model) rappresenta il documento HTML come un albero con una gerarchia di oggetti gestibili con JavaScript. La radice dell'albero è l’oggetto Window a cui sono collegati i diversi nodi corrispondenti agli altri oggetti del modello (ad esempio document, link, form, textarea, ecc):
L'oggetto Window è la finestra aperta del browser che contiene un oggetto document ovvero la pagina HTML.
Attraverso document è possibile controllare i tag che compongono la pagina,
basta aggiungere al tag l'attributo id e assegnargli un nome, ad esempio:
<p id="paragrafo">Questo è un paragrafo</p>
Qualunque tag con l'attributo id può diventare un oggetto JavaScript ed essere controllato tramite il metodo getElementById("nomeid") dell'oggetto document, come di seguito:
var p = document.getElementById("paragrafo");
<input type="button" value = "Nuova finestra" onClick = "window.open('nuova.html');">
<button onclick = "document.getElementById('orario').innerHTML = Date()">Che ora è? </button>
<p id="orario"></p>
<button onclick = "this.innerHTML=Date()">Che ora è?</button>
innerHTML permette la sostituzione del testo
this è una parola chiave per accedere all’elemento HTML che sta gestendo l’evento

Esempi di formattazioni con gli eventi
Prima si preparano i tag HTML da formattare:
<p>Sono senza classe</p>
<p id="pippo1">Sono con classe 1</p>
<p id="pippo2">Sono con classe 2</p>
<p id="pippo3">Sono con classe 3 compatta</p>
e poi si applica lo script:
<script>
document.getElementById("pippo1").style.color = "blue";
document.getElementById("pippo1").style.fontFamily = "Calibri";
document.getElementById("pippo1").style.fontSize = "20px";
/Accorpo i comandi con il metodo setAttribute
document.getElementById("pippo2").setAttribute( "style", "font-size: 60px; font-style: normal; font-weight: bold; color:green; text-Align:center; font-Family: Arial");
/Accorpo alcuni stili del font
document.getElementById("pippo3").style.font = "italic bold 20px arial";
</script>
/Formatto con una funzione
<p id="pippo5" onclick="Formatta()">Formattami al clic</p>
<!--<button type="button" onclick = "Formatta()">Formatto</button> Se volessi formattare con un pulsante-->
<script>
function Formatta() {
document.getElementById("pippo5").style.font = "italic bold 20px arial";
}
</script>

Esiste anche getElementsByClassName
<div class="prova">  <p>Indice 0 per la classe prova</p> </div>
<div class="prova2">  <p>Indice 0 per la classe prova2</p> </div>
<div class="prova2">  <p>Indice 1 per la classe prova2</p> </div>
<button onclick="Formatta()">Clicca</button>
<p>Non funziona con IE fino alla versione 8</p>
<script>
function Formatta() {
  var x = document.getElementsByClassName("prova2");
  x[0].style.backgroundColor = "red";
}
</script>

Esempio: cambiare il colore di tutti gli elementi con class = "rosso" in un div:
<div id="scatola">
  <p class="rosso">Sono un paragrafo con class="rosso" in un div</p>
  <p class="rosso">Sono un altro paragrafo con class="rosso" nello stesso div</p>
  <p>Sono un paragrafo senza class nello stesso div, <span class="rosso">ma io sono uno span con class="rosso"</span></p>
</div>
<button onclick="Formatta()">Clicca per formattare</button>
<p>Non funziona con IE 8 e precedenti</p>
<script>
function Formatta() {
    var x = document.getElementById("scatola");
    var y = x.getElementsByClassName("rosso");
    var i;
    for (i = 0; i < y.length; i++) {
        y[i].style.backgroundColor = "red";
    }
}
Tutti gli stili applicabili sono disponibili all'URL del W3C

Funzioni

Si è già visto com'è strutturata una funzione, ecco degli esempi d'uso: sommare due numeri (con i decimali mettere il .)
<input type="text" id="numero1"> + <input type="text" id="numero2"></p>
<p id="risultato"></p>
<script>
          var primo = document.getElementById('numero1');
          var secondo = document.getElementById('numero2');
/aggiungo un EventListener per intercettare ogni click che viene fatto nel box.
          primo.addEventListener("input", somma);
          secondo.addEventListener("input", somma);
          function somma() {
/converto le stringhe delle input in numeri con parseFloat();
/lasciando un campo vuoto, appare nel risultato Nan (not a number) perché sto sommando
/un numero del primo box con un valore Undefined. Allora imposto un valore di default per
/i due box tramite or (||), così se non è definito imposta di default 0.
          var valore1 = parseFloat(primo.value) || 0;
          var valore2 = parseFloat(secondo.value) || 0;
          risultato.innerHTML = valore1 + valore2;
          }
</script>
Esempio: aprire una finestra (Popup)
<head>
<script>
   function Finestra() {
    x=window.open(
"pippo.html",
"NewWindow",
/barra: strumenti, URL, stato, menu, ridimensionabilità, scorrimento
"toolbar = no,location = no,status = no,menubar = no,resizeable = yes,scrollbars = no,width = 400,height = 300");
   }
</script>
</head>
<body>
 <form>
<input type="button" value="Nuova finestra" onclick="Finestra();">
</form>
 </body>

Esempi vari

Data
 <body>
<script>
   var today = new Date()
   var oggi = today.toLocaleString()
   var oggidata = oggi.substring(0,25)
   document.write("<h2><div align='center'>Oggi è "+oggidata+"</div></h2>")
   document.write("<br> <h4 style='text-align:center;color:red'>Ultima modifica "+document.lastModified+"</h4> ")</script>
 </body>
Volendo è possibile ottenere anche ore, minuti e secondi con il seguente codice
 var oggi = new Date()
 var ore = oggi.getHours()
 var min = oggi.getMinutes()
 var sec = oggi.getSeconds()
 document.write("Sono le ore: "+ore+":"+min+":"+sec)

Far comparire o scomparire un testo o immagine
Nell’head
<script>
function vedi(id){
if( document.getElementById(id).style.display == 'none'){
     document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
}
</script>
Nel body
<a href="#" onclick="vedi('immagine');"> Clicca per vedere la foto</a>
<div id="immagine" style="display:none"> <img src="i.jpg"> </div>

Far comparire o scomparire un'immagine o testo
Nell’head
<script>
function vedi(id){
if( document.getElementById(id).style.display == 'none'){
     document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
}
</script>
Nel body
<img src="i.jpg" onclick="vedi('testo');"/>
<div id="testo" style="display:none">Mi vedi?</div>

Array

Variabili multidimensionali, detti anche vettori, che si usano al posto delle variabili quando devono memorizzarsi molti dati dello stesso tipo; ha il vantaggio che i dati memorizzati si gestiscono con un indice numerico, ottenendo una gestione più semplice e veloce
Per creare un vettore si usa il comando new Array():
var pippo=new Array();
Per riempire il vettore appena creato si usa un indice numerico progressivo che parte da 0 e che determina la posizione del valore nel vettore. L'esempio mostra come inserire 3 valori in un vettore. Caso 1: 3 interi nel vettore vint. Caso 2: 3 foto (stringhe) nel vettore foto
vint[0]=2;
vint[1]=9;
vint[2]=1;
oppure
vint = Array(2,9,1);                                                         
foto = Array("1.jpg","2.jpg","3.jpg");
Per visualizzare il contenuto di un vettore si usa un ciclo for che parte da 0 perché l'indice di un vettore inizia sempre da 0
var vint=new Array();
vint[0]=40;
vint[1]=20;
vint[2]=30;
document.write("Elementi del vettore vint<br/>");
for(var x=0;x<3;x++){
     document.write(vint[x]+"<br/>");
}
Per contare il numero di elementi nel vettore si usa la proprietà length
(il codice va aggiunto dopo quello precedente):
var n=vint.length;
document.write("<br> Nel vettore sono stati inseriti "+n+" valori interi, ovvero: <br>");
for(var x=0;x<vint.length;x++){
     document.write(vint[x]+"<br/>");
}

Creare uno slideshow in Javascript in 200 byte!

Slideshow al clic

Questo codice crea un semplice slideshow di immagini utilizzando JavaScript.

1. Dichiaro un array f con i nomi delle immagini
2. Dichiaro una variabile i con valore iniziale 0, utilizzata per tenere traccia dell'indice corrente dell'immagine visualizzata
3. Definisco la funzione show() che verrà eseguita ogni volta che viene cliccato il pulsante Continua
4. All'interno della funzione show(), i viene incrementato di 1 o reimpostato a 0 a seconda che sia minore o maggiore o uguale al numero di elementi nell'array f meno 1
5. Imposto l'attributo src dell'elemento img sulla corrispondente immagine nell'array f usando l'indice corrente i
6. Utilizzo il metodo document.write() per inserire un'immagine con il nome img e il percorso della prima immagine nell'array f all'interno del documento HTML
7. Aggiungo un pulsante Continua con l'attributo onClick impostato sulla funzione show(). Ogni volta che viene cliccato il pulsante, verrà eseguita la funzione show() e verrà visualizzata la successiva immagine nel slideshow

<script>
f = Array("1.jpg","2.jpg","3.jpg"); //Creo un array con le foto da mostrare
var i = 0; //Definisco una variabile da usare come contatore
function show() { //Definisco la funzione che gestisce la sequenza delle immagini
// Con l'operatore ternario verifico e aggiorno il valore del contatore i, se il suo valore attuale è minore del numero totale delle immagini nell'array incremento di 1 (ovvero passo alla foto successiva), altrimenti reimposto il valore a 0 (ovvero ricomincio dalla prima foto)
 i = ((i < (f.length-1)) ? i+1 : 0);
document.img.src = f[i]; //Cambio dinamicamente l'attributo src dell'immagine mostrata
}
document.write('<img src="' + f[0] + '" name="img"><br/>');
</script>
<input type="button" value="Continua" onClick="show()">

Slideshow automatico

Questo codice crea un slideshow automatico di immagini, utilizzando JavaScript, che avanza ogni 2 secondi senza la necessità di cliccare sul pulsante Continua.

1. Viene utilizzato l'attributo onLoad dell'elemento body per eseguire la funzione s() una volta che il documento HTML è stato caricato
2. Viene dichiarato un array f che contiene i nomi delle immagini
3. Viene dichiarata una variabile i con valore iniziale di 0, che verrà utilizzata per tenere traccia dell'indice corrente dell'immagine visualizzata
4. Viene definita la funzione s(). Questa funzione esegue il codice che fa avanzare il slideshow
5. All'interno della funzione s(), i viene incrementato di 1 o reimpostato a 0 a seconda che sia minore o maggiore o uguale al numero di elementi nell'array f meno 1
6. Viene impostato l'attributo src dell'elemento img sulla corrispondente immagine nell'array f usando l'indice corrente i
7. Viene utilizzato il metodo setTimeout() per eseguire la funzione s() di nuovo dopo 2 secondi (2000 millisecondi). Questo fa avanzare automaticamente il slideshow ogni 2 secondi
8. Infine, viene utilizzato il metodo document.write() per inserire un'immagine con il nome img e il percorso della prima immagine nell'array f all'interno del documento HTML

<body onLoad="s()"> //L'evento onload si attiva quando una risorsa si è caricata (s sta per show e sarà il nome della funzione)
<script>
f = Array("1.jpg","2.jpg","3.jpg"); //Creo un array con le foto (f) da mostrare
var i = 0; //Definisco una variabile da usare come contatore
function s() { //Definisco la funzione (s) che gestisce la sequenza delle immagini
/ Con l'operatore ternario verifico e aggiorno il valore del contatore i, se il suo valore attuale è minore del numero totale delle immagini nell'array incremento di 1 (ovvero passo alla foto successiva), altrimenti reimposto il valore a 0 (ovvero ricomincio dalla prima foto)
 i = ((i < (f.length-1)) ? i+1 : 0);
document.img.src = f[i]; //Cambio dinamicamente l'attributo src dell'immagine mostrata
setTimeout('s()',2000); //setTimeout('nomefunzione', millisecondi)
}
document.write('<img src="' + f[0] + '" name="img">');
</script>

Tutto lo script pesa 237 byte oppure puoi utilizzare la sintassi per le arrow function di JavaScript per la dichiarazione della funzione s, che consente di scrivere la funzione in una singola riga in 204 byte! Questo rende il codice più compatto, ma ancora leggibile e facile da comprendere. Tieni presente che, a volte, la leggibilità e la comprensibilità del codice sono importanti quanto la sua efficienza e che la riduzione eccessiva della lunghezza del codice può rendere il codice più difficile da comprendere e mantenere.

Se non vuoi limitarti a queste poche nozioni puoi acquistare su Amazon il mio libro Programmazione web: Javascript, PHP e MySQL dove, oltre ad ampliare le nozioni descritte, otterrai il link per scaricare tutti i codici degli esercizi in esso contenuto.
Fondamenti JavaScript per programmare una pagina web ti è piaciuto? Condividilo!