Fondamenti di JavaScript

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

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 12 Marzo 2019
Categoria: Web Marketing Costruzione siti web JavaScript

Google Rank Brain
Fondamenti 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).
Ecco come sfruttare i fondamenti di JavaScript per programmare una pagina web.

Sommario Fondamenti JavaScript

Introduzione

Per chi comprende la lingua inglese ecco il link di W3C JavaScript
Alcune limitazioni a cui il programmatore deve badare sono che 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 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 nomebrowser per sapere la procedura); inoltre 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 hanno comunque alcune strutture simili ed 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. JS, 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 (dalla famosa JVM Java Virtual Machine nel caso di Java) al volo 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
- 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

I linguaggi di programmazione si dividono in alto e basso livello. Quelli di Alto livello sono più vicini (orientati) al linguaggio dell’uomo (tutti i linguaggi che si capiscono leggendoli; essi 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.
Algoritmo JavaScript
Algoritmo

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. I cosiddetti costrutti condizionali
- Ripetere blocchi d'istruzioni mentre una condizione risulta vera o falsa. I cosiddetti 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? Anche se quanto tra poco affermato si capirà meglio nel proseguo 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 è già stata caricata in memoria, per cui spesso a scopi cautelativi si preferisce spesso mettere le definizioni nel tag head.

Per scrivere ed eseguire un programma con JavaScript è sufficiente un qualsiasi editor, anche il Blocco note ed 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 l'inizio e la 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 ad un oggetto, che può richiedere uno o più parametri per funzionare).
Il codice può essere inserito sia nella sezione head che body quando ciò accade è, per questioni SEO, metterlo prima della chisura 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>, ad 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=altrapagina.htm">
</noscript>

È anche possibile usare l'attributo src per inserire un codice JS 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')">Home</a>
<a href="#" onmouseover="alert('OK, ci sei passato')">  Eseguo JS al passaggio del mouse</a>

In JavaScript è possibile inserire commenti nel seguente modo:
// 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

I dati possono essere di vario tipo, ma siccome JS è un linguaggio a tipizzazione debole (perché quando ci si riferisce ad un qualsiasi dato, non è necessario specificarne il tipo), esso viene attribuito automaticamente dal parser in base al contesto e non è necessario specificarlo come in altri linguaggi di programmazione.
Numeri: positivi e negativi e si distinguono in integer (numeri interi) e float (numeri a virgola mobile, i decimali iniziano dopo il .)
Stringhe: sequenza di uno o più caratteri alfanumerici. Le stringhe vanno incluse in virgolette doppie o singoli apici, facendo attenzione a chiudere una stringa con lo stesso apice con la quale è stata aperta; ad esempio è valido:
"Hello, world!", "Peter O'Toole"
ma non 'Peter O'Toole'.
È possibile specificare che alcuni caratteri non indicano la fine del testo ma un carattere qualsiasi facendoli precedere dal carattere di commutazione \ come in:
'Peter O\'Toole’ oppure "Ho una pagina su \"wikipedia.it\""
Dati booleani: assumono soli valori true (vero) e false (falso).

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
Agiscono su diversi tipi di variabili (stringa, numerica, booleana, ecc.) per effettuare confronti. L'esito del confronto genera un valore booleano (TRUE o FALSE). Essi sono fondamentali per le strutture condizionali
== Uguaglianza
!= Diversità
< Minore
<= Minore o uguale
> Maggiore
>= Maggiore o uguale
Operatori logici
&& - "AND" crea condizioni complesse composte da più sotto-condizioni; affinché la routine si verifichi è necessario che tutte le sotto-condizioni siano vere
|| - "OR" crea condizioni complesse composte da più sotto-condizioni; affinché la routine si verifichi è necessario che almeno una delle sotto-condizioni sia vera
! - "NOT" indica una negazione all'interno di una routine: inverte il significato di una condizione
Operatori aritmetici
+ Addizione
- Sottrazione
* Moltiplicazione
** Potenza
/ Divisione
% Modulo
++ Incremento (es. x++ significa x=x+1)
-- Decremento (es. x-- significa x=x-1)

Variabili

Ogni dato, anche se non obbligatoriamente, può essere salvato in una variabile.
Molti linguaggi (es. C) utilizzano solo variabili precedentemente dichiarate, ciò allo scopo di ottimizzare l'uso della memoria e aumentare l'affidabilità.
In JavaScript la dichiarazione non è necessaria anche se è una buona regola farla.
Una variabile è un’area di memoria con nome, tipo e dimensione e memorizza un’informazione che può variare durante l’esecuzione del programma.
I nomi delle variabili devono iniziare con una lettera e non devono contenere spazi, caratteri particolari (es. ? : ; , .), tranne l'underscore, e parole riservate.
Dopo la dichiarazione (creazione) con la parola chiave var, si salta la tipizzazione e si fa direttamente l’inizializzazione (assegnazione):
var numero; //dichiarazione (creazione)
numero=10; //inizializzazione (assegnazione)
(altri esempi di inizializzazione: decimale=20.5; testo="Alberto Rossi";)
Attenzione JavaScript è case-sensitive: pippo1 e Pippo1 sono due variabili differenti.
Ecco un esempio di uso delle variabili: dichiarare una variabile name e inizializzarla con una finestra di input intestata con Scrivi il tuo nome. Usare la variabile per concatenarla ad un testo da mostrare sulla pagina formattandola in H1:
var name;
name=window.prompt("Scrivi il tuo nome");
document.writeln("<h1>Ciao "+name+", benvenuto</h1>");
Differenza tra document.writeln e document.write
document.writeln(‘testo’) scrive il testo e poi aggiunge il carattere di “a capo”.
document.write(‘testo’) scrive all’interno del documento senza andare a capo.

Condizioni

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

If else

if (condizione) {
istruzioni1
} else {
istruzioni2
}
Attraverso un box indicare se un numero inserito è pari o dispari.
Per capirlo si divide il numero inserito per 2 e si vede se l'operazione restituisce un resto; è dispari se la divisione ha il resto altrimenti è pari. Ciò si ottiene con la formula num%2 (num è la variabile)
dove % (modulo) è l'operatore matematico che restituisce il resto di una divisione. Quindi:
var strnum = prompt("Inserisci un numero"); //Prompt permette d'inserire un valore di tipo stringa, in questo caso lo usiamo per inserire il numero
var numero=parseInt(strnum); //La funzione parseInt converte una stringa in intero
var soluzione;
if (numero%2==0){
   soluzione="Numero pari";
} else {
   soluzione="Numero dispari";
}
alert(soluzione);
 // Visualizza se il numero
Ciò che è racchiuso tra parentesi graffe si definisce blocco di istruzioni.
Si noti l'uso dell'operatore booleano == (uguale) che può restituire true o false.
=, invece, è l'operatore di assegnamento

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 ed 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");
}

If else if else

La struttura condizionale if else, può gestire anche più condizioni di scelta contemporaneamente, in questo caso si usa la forma if else if else
if (condizione1) {
istruzioni1;
} else if (condizione2) {
istruzioni2
}

else {
istruzioni3;
}
Esempio: indicare ad un guidatore come deve comportarsi quando incontra un semaforo; in questo caso la struttura if else non basta, perché le scelte sono più di due (rosso alt, arancione attenzione, verde attraversa). Quindi:
If else if else
var coloresemaforo = prompt("Il semaforo è verde, arancione o rosso?");
coloresemaforo=coloresemaforo.toLowerCase(); // Il metodo toLowerCase() converte il colore inserito in minuscolo, per evitare di controllare nelle condizioni il caso in cui il colore inserito sia maiuscolo
var soluzione;
if (coloresemaforo=="verde"){
   soluzione="ATTRAVERSA";
} else if (coloresemaforo=="arancione") {
   soluzione="ATTENZIONE";
} else if (coloresemaforo=="rosso") {
   soluzione="ALT";
} else {
   soluzione="Inserire uno dei colori seguenti: verde, arancione, rosso";
}
alert(soluzione); // Visualizza come deve comportarsi il guidatore

Switch

È un’alternativa all’if nidificato (if else if else …)
switch (espressione da testare) {
case condizione1:
istruzioni1;
break;
...
case condizionen:
istruzionin;
break;
default:
istruzioni
}
Break provoca l’immediata terminazione del costrutto e il reindirizzamento all’istruzione successiva esterna ad esso (evita così di continuare il costrutto quando si esegue l’istruzione del case che soddisfa la condizione).
Default anticipa l’istruzione scelta se nessun case soddisfa l’espressione da testare
Esempio: convertire un voto numerico in giudizio
var voto = prompt("Introduci il voto");
var msg;
switch (voto) {
case "0":
msg="Compito non consegnato (non classificabile)";
break;
case "1":
case "2":
case "3":
msg="Insufficienza molto grave";
break;
case "4":
case "5":

msg="Insufficienza";
break;
case "6":
msg="Sufficienza";
break;
case "7":
msg="Sufficienza piena";
break;
case "8":
msg="Buono";
break;
case "9":
msg="Quasi ottimo";
break;
case "10":
msg="Ottimo";
break;
default:
msg="Dati non validi";
}
alert(msg);

Operatore ternario

È un’alternativa all’if else
Lavora con tre valori: condizione ? esp1 : esp2
Quando il parser incontra questa notazione, valuta condizione.
Se condizione è vero, restituisce il valore di esp1 altrimenti quello di esp2. Ad esempio:
var anni = prompt('Quanti anni hai?');
var msg = "Ciao, vedo che sei " + (anni >= 18 ? "maggiorenne" : "minorenne") + "!";
alert(msg);
L'operatore ternario restituisce "maggiorenne" se anni è maggiore o uguale a 18, altrimenti restituisce "minorenne".

Cicli

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

Se si conosce esattamente il numero di cicli da effettuare, si usa For

While e Do While

La differenza tra i due cicli è che il primo controlla subito se la condizione è vera o falsa, mentre il secondo fa il controllo solo dopo aver eseguito il blocco d'istruzioni almeno una volta.
Quindi while potrebbe non eseguire il blocco d'istruzioni nel caso la condizione risultasse subito falsa, mentre il do while esegue il blocco d'istruzioni almeno una volta e poi fa il controllo sul vero e sul falso
while (condizione)
{
 istruzioni;
}

do
{
istruzioni;
} while (condizione)
Per le sue caratteristiche il ciclo do while  si usa per ripetere una procedura, chiedendo all'utente se vuole continuare
Esempio: indicare se un numero inserito è pari o dispari, l'utente può inserire un altro numero se risponde s alla domanda Vuoi continuare?
Il programma è lo stesso visto prima con la variante di poter continuare ad inserire numeri se risponde si risponde s.
var strnum;
var soluzione;
var numero;
var risposta;
do  {
       strnum = prompt("Inserisci un numero:");
       numero=parseInt(strnum);
       if (numero%2==0){
                  soluzione="Numero pari";
       } else {
                 soluzione="Numero dispari";
       }
       alert(soluzione);
       risposta= prompt("Vuoi continuare?", "s/n"); //Uso un secondo argomento per indicare le possibili risposte direttamente dentro la input box
       risposta=risposta.toLowerCase(); //Minuscolizzo
} while(risposta=="s");

Esempio: contare fino ad un valore predefinito, l'utente può inserire un altro valore fino a cui contare se risponde  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

for (condizioneiniziale; condizionefinale; incrementocontatore) {
istruzioni;
}
Esempio: ottenere come output dieci messaggi che
indicano il valore di i ad ogni iterazione
for (i = 1; i <= 10; i++) { //i++ significa i=i+1
alert("i = " + i);
}
È possibile fare in modo che il contatore venga incrementato oltre l'unità con
i+=2, al posto di i++

Eventi

Un gestore di eventi è 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: https://www.w3schools.com/jsref/dom_obj_event.asp
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 ed 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 https://www.w3schools.com/jsref/dom_obj_style.asp

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",
//b/strumenti,b/URL,b/stato,b/menu,ridimensionabilità,b/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/scomparire un testo/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/scomparire una immagine/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 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

<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 ed aggiorno il valore del contatore i, se il suo valore attuale è < 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

<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 ed aggiorno il valore del contatore i, se il suo valore attuale è < 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 200 byte!

Se non vuoi limitarti a queste poche nozioni puoi acquistare su Amazon il mio libro JavaScript - Fondamenti per i siti web dove, oltre ad ampliare le nozioni descritte, otterrai il link per scaricare tutti i codici degli esercizi in esso contenuto.


Per saperne di più sul Web Marketing potrebbero interessarti questi libri:

Se vuoi approfondire alcuni dei temi trattati, visita la pagina con le mie pubblicazioni cartacee e online.

Se l'articolo ti è piaciuto, condividilo!

Segui l'hashtag #AndreaPacchiarotti