WEB

DESIGN

PROGRAMMARE WEB DESIGN
PROGRAMMARE IN HTML
Capitolo 1
L’importanza del Web
Cosa ci serve
Come funziona un sito?
Capitolo 2 Di cosa si tratta?
HTML e la sua struttura
Capitolo 3 Il testo
Il tag adatto
Capitolo 3 I link
Realizzare pagine interattive
URL assoluti e relativi
Capitolo 4 Le liste
A cosa servono
Capitolo 5 Le immagini
Trucchi del mestiere
Il formato corretto
Capitolo 6 Le tabelle
Come, quando, perché
Tabelle con stile
Capitolo 7 I form
Raccogliere i dati
GET o POST?
Liste di informazioni
Date e file
Capitolo 8 HTML5
Evoluzione di un linguaggio
Conclusione
PROGRAMMARE IN CSS
Premessa
Capitolo 1 Un po’ di storia
Capitolo 2 Caratteristiche di CSS
Semplicità
Riusare i fogli di stile
Fogli a cascata
Dimensioni ridotte
Capitolo 3 Unire HTML e CSS
I selettori
Raggruppare più elementi
Capitolo 4 Classi e ID
Selettori di classe
Selettori di ID
Selettori di attributi
Capitolo 5 Struttura di una pagina
Selettori discendenti
Selettori di figli
Selettore di figli adiacenti
Capitolo 5 Pseudo-classi
Capitolo 6 Valori ed unità
I colori
Le lunghezze
Conclusioni
PROGRAMMARE IN JAVASCRIPT
Premessa
Capitolo 1
Cos’è JavaScript?
Capitolo 2
Tipi ed operatori
Numeri
Stringhe
Booleani e operatori logici
Conversione di tipo
Capitolo 3
Programmare in JS
Funzioni
Controllo dell’esecuzione
Capitolo 4
Oggetti e dintorni
Gli Oggetti
Gli Array
JSON
Capitolo 5
ll DOM
Layout
Stile
Capitolo 6
Eventi
Capitolo 7
Programmazione asincrona
Callbacks
Promise
Eccezioni
Capitolo 8
JS e Internet
GET /
HTTP / 1.1
Fetch
Conclusioni


PROGRAMMARE IN HTML
 Capitolo 1
L’importanza del Web

Cosa ci serve

Avremmo potuto tuffarci direttamente nel codice HTML utile per creare siti Web
ma riteniamo non sarebbe stata la cosa migliore perché prima è importante porre
l’attenzione su come le persone accedono al Web e chiarire alcuni termini. Per
poter progettare un sito Web abbiamo bisogno sicuramente di:

Browser
Web server
Dispositivo
Screen reader in caso di disabilità

Probabilmente hai già sentito questi nomi, hanno un nome familiare quindi per
alcuni sai già di cosa si tratta mentre per altri non ne hai la minima idea. Ma
andiamo per ordine, partendo dal browser. Per poter accedere al sito web viene
utilizzato un software ovvero un programma del computer, del cellulare, del
tablet, detto browser web alcuni browser famosi sono Firefox, Safari, Chrome e
Edge ovvero l'evoluzione di Internet Explorer. Per poter visualizzare una pagina
web gli utenti si collegano a un indirizzo web nel loro browser anche detto URL
e da qui posso avere accesso ad una serie di funzionalità, che nel tempio si sono
evolute: ad esempio è possibile inserire dei segnalibri, inserire dei collegamenti
con un altro sito internet, Ma la parte più importante e sapere che ogni browser è
diverso perché basato su una tecnologia diversa e dovremmo tenere a mente
questo aspetto nel momento in cui sviluppiamo una pagina web. Non tutti gli
utenti, infatti, avranno l'ultima versione del browser, quindi la pagina dovrà
essere interamente fruibile da tutti i browser di tutte le versioni (o quasi).

Quando ti colleghi ad un sito, il tuo browser richiede una pagina Web, inviando
una richiesta tramite Internet per uno speciale server. Un server Web non è altro
che un computer che ospita uno o più siti Web. Il server è collegato ad Internet in
modo permanente ed è utilizzato per inviare le pagine Web a coloro che le
richiedono. Per la gestione di questi server ci sono delle grandi aziende che si
occupano di questi servizi dette società di web hosting, grazie alle quali puoi
comprare un dominio e inizia a sviluppare il tuo sito.

Tutto questo è fruibile se hai un dispositivo con cui collegarti ad Internet, in

realtà, oggi siamo sempre connessi e quindi puoi richiedere un sito Web dal tuo
cellulare, dal tablet, dal portatile, addirittura dalla tua Smart TV. Questo porta a
dover considerare diversi fattori importanti per la realizzazione di un sito di
successo, infatti, come puoi ben capire, le dimensioni dello schermo sono
diverse da un cellullare ad una TV. Sarà necessario ottimizzare il tuo sito per
adattarsi e presentarsi al meglio su ogni dispositivo, a prescindere dalla sua
dimensione.

Gli screen reader sono molto utili a persone con disabilità, essi consentono di
leggere il contenuto dello schermo pertanto sono indicati per coloro che sono
ciechi, ipovedenti o con disabilità visive. Questo tipo di tecnologia, però, viene
utilizzata anche in casi in cui non è possibile guardare lo schermo del cellulare,
pensiamo alle auto che consentono di leggere i messaggi che riceviamo. In
questo e-book ti daremo dei suggerimenti per creare dei siti che possano essere
utilizzati anche dai disabili in modo da essere fruibili davvero da tutti,
indistintamente.

Come funziona un sito?

Quando consulti un sito Web il tuo browser riceve una serie di informazioni dal
server sottoforma di file, in particolare sono necessari file HTML e file CSS. Il
primo definisce la struttura del sito che possiamo immaginare sostanzialmente
come un giornale che, contiene delle sezioni più importanti con dei titoli in
evidenza e delle sezioni marginali e con titoli meno evidenti. In un sito Web ed
in particolare in un file HTML troviamo riferimenti ad immagini, audio e video
con cui possiamo interagire, a differenza di un giornale.

I file CSS, invece, definiscono lo stile della pagina quindi contengono

indicazioni grafiche come il colore dello sfondo, il colore delle sezioni, la
grandezza di un titolo e tutto quello che concerne l’aspetto grafico del sito.

Il browser scarica questi file dal server e li interpreta per poterli fornire
all’utente, per completezza devi sapere che spesso oltre a questi file i siti inviano
anche dei file per gestire la logica all’interno di un sito, scritti in JavaScript.
Pensiamo a validazioni complesse come quella di un codice fiscale, gestire una
modale in modo dinamico, la sostituzione di un’immagine in modo dinamico dal
sito. Come puoi immaginare questi aspetti sono legati ad un livello più avanzato
di sviluppo ma per raggiungerlo bisogna avere delle buone basi, a partire dalla
struttura dell’HTML.

Probabilmente ti sarai chiesto cosa vuol dire HTML e CSS, HTML sta per
HyperText Markup Language. La parte HyperText si riferisce alla possibilità di
creare collegamenti che consentono ai visitatori di spostarsi da una pagina
all'altra in modo rapido e semplice. Un linguaggio di markup ti consente di
annotare il testo e tali annotazioni forniscono un ulteriore significato al
contenuto di un documento. Se pensi a una pagina Web, aggiungiamo delle
“linee guida” per il browser attorno al testo originale che vogliamo visualizzare.
Il browser utilizza quindi il codice per visualizzare correttamente la pagina
perciò i tag che aggiungiamo sono, a tutti gli effetti, il markup.

CSS è la sigla di Cascading Style Sheets, in italiano fogli di stile a cascata e la

loro introduzione si è resa necessaria per separare i contenuti delle pagine HTML
dalla loro formattazione o layout. In questo modo si favorisce uno dei concetti
chiave della programmazione: la modularità. La modularità permette una
programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine
stesse sia per gli utenti, garantendo anche il riutilizzo del codice ed una sua più
facile manutenzione.
 Capitolo 2
Di cosa si tratta?

HTML e la sua struttura

In tutti i tipi di documenti, la struttura del documento è molto importante per
aiutare i lettori a capire i messaggi che stai cercando di trasmettere e, in questo
caso, facilita la navigazione all’interno del sito. Quindi, per imparare come per
scrivere pagine Web, è molto importante capire come strutturare i tuoi
documenti. Questa è una fase centrale perché ti permette di definire una linea
guida da mantenere per il tuo sito, in modo da creare un sito ordinato, pulito e
soprattutto coerente in tutte le sue pagine.

Se hai mai scritto un documento, una tesi o un manuale in Word avrai

sicuramente creato delle sezioni o almeno un titolo principale, un sottotitolo e, a
seguire, il corpo del testo. In HTML è sostanzialmente la stessa cosa, qualsiasi
cosa tu veda nel tuo sito è un elemento che solitamente è composto da due tag.

Un elemento è composto da un tag di apertura e uno di chiusura, pensiamo ad un

paragrafo che contiene dei riferimenti ad altre pagine del sito. Questo si traduce
in HTML con un elemento di tipo paragrafo con due tag, essi includono un
elemento di tipo riferimento con altri due tag. Ogni elemento HTML istruisce il
browser sugli elementi che si trovano all’interno dei suoi tag.

Di seguito vediamo una semplice pagina Web con alcuni titoli e sottotitoli:

<html>
<body>
<h1>Titolo principale</h1>
<p>Testo introduttivo<p>
<h2>Sottotitolo</h2>
<p>Articolo che potrebbe contenere riferimenti ad altre pagine,
immagini, video e altri elementi multimediali</p>
<h2>Un altro sottotitolo </h2>
<p>Testo conclusivo</p>
</body>
</html>

I tag si comportano come contenitori e ti offrono informazioni che si trovano tra

il loro tag di apertura e chiusura.

Analizziamo il codice appena visto così da capirne il significato:

Il tag di apertura <html> indica che qualsiasi cosa tra esso e il tag
di chiusura </html> è un codice HTML;
Il tag <body> indica che qualsiasi cosa tra esso ed il tag di
chiusura </body> dovrebbe essere mostrato nella finestra
principale del browser;
Il tag <h1> indica l’inizio di un titolo principale mentre </h1> ne
indica la fine;
Un paragrafo di testo appare tra questi tag <p> e </p>;
Le parole tra <h2> e </h2> formano un sottotitolo.

Approfondiamo la struttura dei tag, ogni tag è formato dalle parentesi angolari <
e >, che racchiudono un carattere ovvero lo scopo del tag. Sino ad ora abbiamo
visto che i tag si dividono in tag di apertura e tag di chiusura, ma talvolta i tag
possono essere abbreviati come nell’esempio che segue:

<html>
<body>

<h1>Test dell'immagine</h1>
<img src="immagine.gif" alt="logo" width="42" height="42">

</body>
</html>

Come puoi notare in questo esempio non c'è nessun tag di chiusura per
l'elemento img infatti questo tag non prevede di contenere qualcosa quindi non è
un vero e proprio contenitore. In questo esempio per il tag <img>, abbiamo degli
elementi aggiuntivi, mi riferisco ha gli attributi width e height che definiscono
rispettivamente larghezza e altezza dell’immagine, in questo modo istruiremo il
browser su come mostrare l'immagine e con quali dimensioni. Questi elementi
aggiuntivi sono detti attributi e forniscono appunto informazioni aggiuntive
sull’elemento, gli attributi appaiono solo nel tag di apertura e solitamente sono
composti da nome e valore separati dal simbolo uguale. Di solito sia il nome che
il valore dell'attributo sono scritti in minuscolo, in questo caso tramite l’attributo
src siamo in grado di definire la sorgente dell’immagine. L'ultimo attributo che
possiamo vedere nel tag relativo all'immagine è alt, questo attributo specifica un
testo alternativo per un'immagine, se l'immagine non può essere visualizzata. Ci
sono diversi motivi per cui un’immagine potrebbe non essere visualizzata
correttamente, a causa di una connessione lenta ad esempio, a causa di un errore
nell’attributo src oppure nel caso in cui l'utente utilizzi uno screen reader. Come
puoi notare anche per una semplice immagine è fondamentale inserire tutti gli
attributi necessari affinché il sito sia fruibile in ugual modo da tutti gli utenti.

Precedentemente abbiamo utilizzato il tag <body> per mostrare qualsiasi

elemento all’interno della schermata del browser, in realtà, per le pagine HTML
esiste un altro tag fondamentale detto <head>. Questo tag precede il tag <body>
ed è posizionato subito dopo il tag <html> contenendo delle informazioni
riguardo la pagina come titolo, riferimenti alle classi di stile o alla logica. Non
contiene informazioni che vengono mostrate direttamente e non supporta
attributi. Vediamo adesso, passo dopo passo, come creare, come è fatta e cosa
viene mostrato per una pagina molto semplice:

1. Prima di creare il file con estensione .html, se si utilizza

Windows, assicurarsi di avere queste caselle selezionate

2. Creare il file con il nome che preferite e l’estensione .html
3. Aprire il file con un editor di testo come Blocco Note o altri (i
più usati sono Atom, Notepad++, Sublime Text…)
4. Inserire il codice della pagina e salvare il file
5. Aprire il file con un browser per vedere il risultato
 5.

Il nostro file .html conterrà il seguente testo, che il browser sarà in grado di
interpretare:

<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Titolo visibile nella pagina</h1>
<p>Un qualsiasi testo da mostrare</p>
</body>
</html>

All’interno del tag <head> troviamo il tag che definisce il titolo della pagina
ovvero il titolo che verrà mostrato nella parte superiore del browser cioè il nome
della scheda del browser. Prova a modificarlo dall’esempio qui in alto, salva il
file e ricarica la pagina per vedere come cambia il risultato.

 Capitolo 3
Il testo

Il tag adatto

All’inizio di questo e-book abbiamo paragonato il sito Web ad un giornale, il
paragone non è forzato in quanto molti considerano il Web l’evoluzione del
giornale. Ogni giornale che si rispetti è composto da titoli che solitamente sono
un sunto dell’articolo; anche in HTML è stata data importanza ai titoli infatti
esistono 6 tipi di titoli diversi in ordine di importanza.

Una best practice afferma che in una pagina non dovrebbe mai essere presente
più di un tag <h1> e soprattutto bisogna prestare attenzione a non confondere il
titolo della pagina <title> con il titolo che mostriamo nella finestra del browser
all’interno del <body>.

Le principali differenze tra i due sono:

Il tag <title> è mostrato nelle SERPS (pagine dei risultati del

motore di ricerca). Viene spesso usato come intestazione
principale nei risultati della ricerca, di solito evidenziato in blu o
come link;
Il tag <title> non viene visualizzato su una pagina ma fa parte
dell'intestazione della pagina ed è mostrato anche come titolo del
browser;
Il tag <h1> viene mostrato agli utenti durante la navigazione di
una pagina;
Il tag <title> è un molto usato dai motori di ricerca per capire il
contenuto della pagina.
Ma come possiamo scegliere il tag più adatto? I browser visualizzano i contenuti
delle intestazioni con dimensioni diverse. Il contenuto di un elemento <h1> è il
più grande e il contenuto di un elemento <h6> è il più piccolo.

Abbiamo detto che esistono 6 tipi di tag per i titoli infatti si parte da <h1> che è
il più importante fino ad arrivare ad <h6>, passando per <h2>, <h3>, <h4>,
<h5>. Usa le intestazioni quando è importante per la tua struttura, per la
navigazione e per facilitare la lettura del contenuto della pagina all’utente. Non è
necessario utilizzare tutti i tipi di intestazione su una pagina infatti, a seconda
della lunghezza e del tipo di contenuto, potresti avere solo tag <h1> e <h2>.

L’aspetto fondamentale è avere un equilibrio tra l'uso delle intestazioni e altri

elementi di formattazione.

Subito dopo un titolo possiamo inserire un paragrafo, indicato con il tag di

apertura <p>, che solitamente viene posto dal browser su una nuova riga e
lasciando un po’ di spazio dagli altri paragrafi, se presenti.

In un paragrafo è utile marcare una nuova parola o il suo significato per darne
risalto pertanto sono utili i tag <b> e <i>, usati rispettivamente per mostrare una
o più parole in grassetto o in corsivo. È possibile anche combinare i due tag per
ottenere entrambi gli effetti.

Creiamo una pagina unendo quanto abbiamo imparato sino ad ora:

<html>
<head>
<title>Albert Einstein</title>
</head>
<body>
<h1>Il genio</h1>
<p>Considerato il più importante <b>fisico</b> del XX secolo, conosciuto
al grande pubblico anche per la formula dell'equivalenza₁
massa-energia, E = mc², riconosciuta come <b><i>l'equazione
più famosa al mondo</b></i></p>
<p>1. Una relazione di equivalenza è un concetto matematico che esprime
in termini formali quello intuitivo di "oggetti che condividono una certa
proprietà". </p>
</body>
</html>

Questa pagina verrà mostrata dal browser con due paragrafi distinti, contenuti in
un tag <body>.

Probabilmente all’interno del codice avrai notato delle particolarità in

corrispondenza del termine equivalenza e vicino alla formula matematica.

È possibile inserire dei caratteri come apice con il tag <sup> e caratteri come
pedice con il tag <sub>, questi sono molto usati per semplici formule
matematiche, per rimandare a delle note a piè di pagina ecc.

Come hai già visto, il browser mostrerà automaticamente ogni nuovo paragrafo o
intestazione su una nuova riga ma se si desidera aggiungere un'interruzione di
riga all'interno di un paragrafo, è possibile utilizzare il tag di interruzione di riga
<br />. Per creare una pausa, un distacco come un cambio di argomento in un
libro o una nuova scena in un'opera teatrale - puoi aggiungere un elemento
orizzontale tra le sezioni usando il tag <hr />. Ci sono alcuni elementi che non
hanno parole tra l'apertura e la chiusura del tag pertanto sono detti elementi
vuoti.
 Capitolo 3
I link

Realizzare pagine interattive

I link sono una caratteristica fondamentale del Web in quanto consentono di
navigare tra le pagine, ti consentono di scegliere la voce che ti interessa da un
menù, di passare da un sito Web ad un altro con un semplice click. Vediamo
come realizzare dei collegamenti di questo tipo e quanti tipi di link esistono in
HTML.

I collegamenti vengono creati utilizzando l'elemento <a>. Gli utenti possono fare
clic su qualsiasi elemento che si trovi tra il tag <a> di apertura e il tag di
chiusura </a>. È necessario specificare a quale pagina si desidera collegare
utilizzando l'attributo href. Il testo tra il tag di apertura e il tag di chiusura è
anche conosciuto come testo di collegamento e dovrebbe spiegare a quale pagina
verranno trasferiti i visitatori se fanno clic su di esso. Di solito si legge “fai clic
qui” per rimandare ad un’altra pagina del sito ma questo approccio non è del
tutto corretto. Il testo del link può aiutare i visitatori a trovare quello che
desiderano e se ciò che cercano è facile da individuare, avranno un'impressione
migliore del tuo sito incoraggiandoli a visitarlo più spesso e più a lungo. Per
scrivere un buon testo per un link è fondamentale mettersi nei panni dell’utente.

 URL assoluti e relativi

Riprendiamo l’esempio precedente e aggiungiamo un link alla biografia di

Albert Einstein:

<html>
<head>
<title>Albert Einstein</title>
</head>
<body>
<h1>Il genio</h1>
<p>Considerato il più importante <b>fisico</b> del XX secolo, conosciuto
al grande pubblico anche per la formula dell'equivalenza₁
massa-energia, E = mc², riconosciuta come <b><i>l'equazione
più famosa al mondo</b></i></p>
<p>1. Una relazione di equivalenza è un concetto matematico che esprime
in termini formali quello intuitivo di "oggetti che condividono una certa
proprietà".</p>
<p>Come si diventa un genio? Ecco la sua <a
href="https://it.wikipedia.org/wiki/Albert_Einstein#Biografia">biografia</a>
</p>
</body>
</html>

Abbiamo aggiunto un tag che rimanda alla pagina italiana di Wikipedia con la
biografia.
Quando si effettua un collegamento ad un altro sito Web, il valore dell’attributo
href sarà l'indirizzo web completo per il sito, noto come URL assoluto. I
browser mostrano i link in blu e con una sottolineatura ma non è sempre così,
infatti, grazie alle regole di stile del CSS è possibile modificarne l’aspetto.

URL è l’acronimo di Uniform Resource Locator. Ogni pagina web ha il suo URL
ed è l'indirizzo web che dovresti digitare in un browser se desideri visitare quella
pagina specifica. Un URL assoluto inizia con il nome di dominio per quel sito e
può essere seguito dal percorso di una pagina specifica. Il sito visualizzerà la
pagina iniziale anche detta homepage, qualora non sia stata specificata alcuna
pagina.

Nell’esempio abbiamo inserito un URL che non è proprio quello classico:

https://it.wikipedia.org/wiki/Albert_Einstein#Biografia

Come puoi notare l’URL termina con un cancelletto (#) e seguito da Biografia,
questo contribuisce a creare un frammento. I frammenti servono ad individuare
una porzione di contenuto all'interno di una pagina Web. Sono molto utilizzati
perché, come in questo caso, si punta ad una sezione mirata della pagina
evitando che l’utente si perda tra cose a cui non è interessato.

Quando vogliamo inserire dei link al nostro sito, piuttosto che ad un sito Web
esterno, creiamo degli URL relativi. In questo modo non è necessario
specificare l’intero percorso comprendendo il nome del dominio, basterà fare
riferimento al file che vogliamo puntare. Immaginiamo ad esempio di avere in
una cartella 3 pagine Web distinte: Homepage, Chi siamo e Contatti. In base a
quello che abbiamo imparato avremo 3 file diversi con estensione .html.

Supponiamo di essere nella homepage ed integriamo nella nostra pagina un link

ad ogni pagina, homepage compresa. Forse ti starai chiedendo quale sia il senso,
lo spieghiamo subito. Secondo alcuni studi ci si aspetta il logo in un sito Web in
alto a sinistra e che al clic sul logo, di solito, si venga reindirizzati alla pagina
principale. Questo è proprio quello che realizzeremo: creare una pagina
principale con un’immagine (logo) che rimanda a sé stessa. L’aspetto più
interessante è che potremo riutilizzare quella porzione di codice nelle pagine Chi
siamo e Contatti così come in tutte le altre del sito.

Realizzeremo questo piccolo sito Web usando esclusivamente quanto imparato

finora, incredibile vero? Oltretutto potrai notare che il sito è in parte responsive
cioè modificando le dimensioni della finestra del browser il testo si adatterà
automaticamente.

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<a href="homepage.html"><img
src="https://it.wikipedia.org/static/images/project-logos/itwiki.png"></a>
<p>Benvenuti nel nostro sito</p>
<hr>
<p>La nostra azienda si fonda sul saper innovare, su un consolidato know-
how nel campo e sulla voglia di trovare sempre la soluzione migliore.</p>
 <hr>
<p>Abbiamo innovato molto e continuiamo a farlo, tenendo conto di <a
href="chi_siamo.html">Chi siamo</a> e delle nostre origini.</p>
<p>Se vuoi innovare la tua azienda o qualche processo, <a
href="contatti.html">contattaci</a> per un preventivo gratuito.</p>
</body>
</html>

Oltre ai collegamenti di cui abbiamo già discusso, la parte fondamentale è legata

alla porzione di codice subito dopo il tag <body>. Qui troviamo un tag per il
collegamento che contiene soltanto un’immagine. Tutto il contenuto di un tag
<a> è “cliccabile” quindi potrà contenere indistintamente: testo, immagini,
animazioni e tanto altro. In questo caso, cliccando sul logo dalla homepage
resterai sulla stessa pagina.
Per verificare la navigazione all’interno delle pagine, duplica la homepage e
cambia solo la sezione sotto:

<p>Benvenuti nel nostro sito</p>

<hr>

In questo modo potrai navigare in tutte le pagine del sito con un semplice click, a
patto che i file si trovino tutti nella stessa cartella.

Sui siti Web più grandi è una buona idea organizzare il codice posizionando le
pagine per ogni diversa sezione del sito in una nuova cartella anche detta
directory. La cartella principale contiene tutti gli altri file e le altre cartelle del
sito Web. Ogni sezione del sito viene posizionata in una cartella separata; questo
aiuta l’organizzazione dei file. In questo modo è più facile creare delle relazioni
tra le pagine e anche delle relazioni con la homepage la quale, di solito, è
contenuta in un file chiamato index.html. Potresti aver già visto questo nome
nella barra dell’URL del browser per qualche sito Web.

Vediamo adesso come organizzare meglio il nostro piccolo sito in modo da avere
delle cartelle dedicate alle immagini e delle cartelle dedicate alle pagine.

Per prima cosa scegli un’immagine da usare nel sito che non sia troppo grande,
ad esempio un logo, inserendola nella cartella immagini.

Successivamente creiamo una cartella pagine che conterrà le pagine create in

precedenza ovvero Homepage, Chi siamo e Contatti per ottenere una struttura
come la seguente:

Rispettando questa regola abbiamo una migliore organizzazione del codice e

soprattutto garantiamo coerenza ed eterogeneità tra le directory. Questo vuol dire
che ogni directory contiene elementi dello stesso tipo ma ognuna è diversa dalle
altre.

Adesso modifichiamo il codice in modo che possa funzionare anche con questa
struttura:
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<a href="homepage.html"><img src="./immagini/logo.png" alt="logo">
</a>
<p>Benvenuti nel nostro sito</p>
<hr>
<p>La nostra azienda si fonda sul saper innovare, su un consolidato know-
how nel campo e sulla voglia di trovare sempre la soluzione migliore.</p>
<hr>
<p>Abbiamo innovato molto e continuiamo a farlo, tenendo conto di <a
href="./pagine/chi_siamo.html">Chi siamo</a> e delle nostre origini.</p>
<p>Se vuoi innovare la tua azienda o qualche processo, <a
href="./pagine/contatti.html">contattaci</a> per un preventivo gratuito.
</p>
</body>
</html>

Analizziamo in dettaglio come utilizzare i riferimenti all’interno dello stesso

sito, anche se molti editor di testo forniscono dei suggerimenti in base alle
cartelle presenti nel workspace.

Tipo di Esempio
relazione
Stessa <a href="home.html">home</a>
cartella
Cartella <a
 figlia href="root/azienda.html">azienda</a>

Cartella <a
figlia di 2 href="root/it/azienda.html">azienda</a>
livelli
Cartella <a href="../index.html">Homepage</a>
padre
Cartella <a
padre di 2 href="../../index.html">Homepage</a>
livelli

Potresti voler aprire un link in una nuova finestra del browser, questo è possibile
grazie all’attributo target come segue:

<a href="./pagine/contatti.html" target="_blank">contattaci</a>

Nel caso in cui si punti ad un altro sito Web, potrebbe essere utile questo
attributo.

In questi casi, si spera che l'utente ritorni alla finestra contenente il proprio sito
dopo aver concluso la navigazione sull'altro sito Web. In generale, dovresti
evitare di aprire i collegamenti in una nuova finestra, ma se lo fai, è considerata
buona pratica informare gli utenti prima ci clicchino sopra, in particolare dovrai
avvisarli che il collegamento aprirà una nuova finestra del browser.
 Capitolo 4
Le liste

A cosa servono

Ci sono molte occasioni in cui poter usare le liste infatti HTML ci offre diversi
tipi:

● Gli elenchi ordinati sono elenchi in cui ogni elemento nell'elenco è numerato.
Ad esempio, l'elenco potrebbe essere una serie di passaggi per una ricetta che
deve essere eseguita in un certo ordine o un contratto legale in cui ciascun punto
deve essere identificato da un numero di sezione;

● Gli elenchi non ordinati sono elenchi che non hanno un ordine anche detti
elenchi puntati;

● Gli elenchi di definizioni sono costituiti da un insieme di termini insieme alle

definizioni per ciascuno di tali termini.

Quello che abbiamo appena creato è un elenco puntato quindi senza ordine
perché in questo caso non è fondamentale. Replichiamo lo stesso elenco in
HTML:

<html>
<head>
<title>Il mio sito</title>
</head>

<body>
<ul>
<li>Gli elenchi ordinati sono elenchi in cui ogni elemento nell'elenco è
numerato. Ad esempio, l'elenco potrebbe essere una serie di passaggi per
una ricetta che deve essere eseguita in ordine o un contratto legale in cui
ciascun punto deve essere identificato da un numero di sezione;</li>
<li>Gli elenchi non ordinati sono elenchi che non hanno un ordine, sono
anche detti elenchi puntati;</li>
<li>Gli elenchi di definizioni sono costituiti da un insieme di termini
insieme alle definizioni per ciascuno di tali termini.</li>
</ul>
</body>
</html>

Tutti i tag HTML sono solitamente l’abbreviazione di ciò che rappresentano e

sono facili da ricordare se si conosce un po’ di inglese infatti <ul> è
l’abbreviazione di unordered list ovvero lista non ordinata, il tag <li> è
l’abbreviazione di list item ovvero elemento della lista.

Se invece stiamo creando un sito Web con delle ricette di cucina probabilmente
sarà più utile una lista ordinata perché è fondamentale seguire i passaggi della
ricetta seguendo un ordine. Come avrai intuito il tag da utilizzare sarà <ol> che è
l’abbreviazione di ordered list e potremo riusare il tag <li>, sarà cura del
browser indentare gli elementi della lista.

Di seguito i passaggi per poter gustare una buona pizza Margherita:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<h1>Pizza Margherita</h1>
<ol>
<li>Realizzare l'impasto;</li>
<li>Lasciar lievitare;</li>
<li>Stendere l’impasto e condire con mozzarella e salsa di pomodoro;</li>
<li>Cuocere la pizza.</li>
</ol>
</body>
</html>

Il browser interpreterà il codice in questo modo:

L’ultimo tipo di liste in HTML sono gli elenchi di definizioni e sono usati per
definire degli elementi per un unico termine. L’uso è simile a quello di un
vocabolario dove ad ogni termine corrisponde una lista di definizioni poiché un
termine può avere diversi significati a seconda del contesto.

Creiamo qualcosa di simile ad un vocabolario di latino:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<dl>
<dt>Album</dt>
<dd>il bianco e ogni sostanza di colore bianco</dd>
<dd>albo, tavola bianca</dd>
<dd>elenco, lista, registro ufficiale</dd>
<dt>Lacero</dt>
<dt>Laceras</dt>
<dt>Laceravi</dt>
<dt>Laceratum</dt>
<dt>Lacerare</dt>
<dd>lacerare, squarciare, sbranare</dd>
<dd>danneggiare, rovinare, abbattere</dd>
<dd>(in senso figurato) denigrare, diffamare</dd>
<dd>(in senso figurato) addolorare, straziare</dd>
<dd>sprecare il proprio tempo</dd>
</dl>
</body>
</html>

Il risultato grafico di questo vocabolario sarà:

 Capitolo 5
Le immagini

Trucchi del mestiere

Ci sono molti motivi per cui potresti voler aggiungere un'immagine a una pagina
web: potresti voler includere un logo, una fotografia, un'illustrazione, un
diagramma o un grafico. Ci sono diversi aspetti da considerare quando si
selezionano e si preparano le immagini per il proprio sito, ma occorre prendersi
del tempo per renderle adatte, ciò renderà il sito più attraente e professionale.

In questo capitolo imparerai come:

● Scegliere il formato corretto da usare per l’immagine

● Mostrare un'immagine della giusta dimensione

● Ottimizzare un'immagine per il Web e per creare pagine da caricare più

velocemente

Puoi anche usare i CSS per includere le immagini nelle tue pagine come sfondo
di una sezione o per inserire immagini come elementi a sé stanti.

Si dice che un'immagine valga più di mille parole infatti immagini ben fatte
aiutano a fare la differenza tra un sito dall'aspetto mediocre ed uno davvero
accattivante. Le immagini possono essere utilizzate per rendere più gradevole ed
interattivo un sito Web ma anche per fornire illustrazioni, più facili da
comprendere rispetto ad una descrizione. Se non hai fotografie da usare sul tuo
sito web, ci sono diversi portali che vendono immagini o che ti permettono di
usarle gratuitamente menzionando il nome dell’autore. Di seguito ti propongo un
breve elenco che puoi consultare:

https://it.freeimages.com/
https://pixabay.com/
https://www.pexels.com/
https://unsplash.com/

Ricorda che tutte le immagini sono soggette a copyright perciò ti invito a leggere
l’apposita sezione sui termini di utilizzo del sito scelto. Se hai una pagina che
mostra diverse immagini, un consiglio è quello di mostrarle su uno sfondo
semplice e coerente, in modo da sembrare un gruppo di immagini (vedi
l’esempio di Instagram):

Ricorda che le immagini devono rispettare alcune regole: devono essere rilevanti
cioè di interesse per l’utente, devono fornire informazioni, essere facili da
riconoscere ed infine dovrebbero rispecchiare, se possibile, i colori del sito.

Su un grande sito potresti voler aggiungere sottocartelle all'interno della cartella

delle immagini. Ad esempio, immagini come loghi e pulsanti potrebbero trovarsi
in una cartella denominata interfaccia, le fotografie dei prodotti potrebbero
trovarsi in un’altra cartella chiamata prodotti e le immagini correlate alle notizie
potrebbero risiedere in una cartella denominata notizie.

Abbiamo già visto il tag per inserire le immagini in una pagina Web pertanto
limitiamoci ad un breve riepilogo degli attributi:

src indica al browser dove trovare l’immagine;

alt fornisce una descrizione nel caso in cui non sia possibile
vedere l’immagine;
title fornisce ulteriori informazioni sull’immagine che spesso i
browser visualizzano quando si posiziona il puntatore del mouse
sull’immagine (detto tooltip);
height specifica l’altezza dell’immagine in pixel;
width specifica la larghezza dell’immagine in pixel.

Un pixel è l'unità minima convenzionale della superficie di un'immagine

digitale. I pixel sono disposti in modo da comporre una griglia rettangolare
fissa per apparire fusi in un'unica immagine.

Il formato corretto

Per poter inserire un’immagine in modo corretto è fondamentale usare dei
formati supportati dalla maggior parte dei browser come jpeg, gif o png. Se
si sceglie un formato errato, l'immagine potrebbe non apparire nitida come
dovrebbe o potrebbe non essere caricata dal browser.

Quando usare jpeg, gif e png?

Dovresti usare jpeg quando un’immagine contiene molti colori, ad esempio
per foto di feste, panoramiche di città, parchi e foto di paesaggi. È
preferibile usare questo formato anche in presenza di sfumature come in
una foto di un parco di primavera.

Dovresti usare gif o png quando un’immagine contiene esattamente lo

stesso colore e non sfumature di esso. A tal proposito questi formati sono
indicati per loghi, illustrazioni e diagrammi anche se solitamente il formato
gif è usato per le animazioni ovvero sequenze di immagini. Una differenza
importante da ricordare tra jpeg e png riguarda la trasparenza. Se desideri
un’immagine con delle sezioni senza colore quindi trasparenti dovrai
necessariamente usare il formato png poiché jpeg non supporta la
trasparenza.

Un altro suggerimento importante consiste nel salvare l'immagine nella

stessa larghezza e altezza con cui apparirà sul sito web infatti qualora fosse
più piccola della larghezza o dell'altezza specificate, l'immagine
risulterebbe distorta e allungata. Nel caso in cui l'immagine fosse più
grande delle dimensioni specificate, essa impiegherà più tempo per essere
visualizzata nella pagina perché il browser dovrà ridimensionarla.

Per poter modificare graficamente le immagini esistono diversi software

talvolta anche gratuiti, i più usati sono Adobe Photoshop, Gimp, Sketch,
paint.net.
 Capitolo 6
Le tabelle

Come, quando, perché

Esistono diversi tipi di informazioni che devono essere visualizzate in una
griglia ordinata. Ad esempio: i risultati di una giornata di serie A, i rapporti
sull’inventario di un negozio, gli orari di un treno. Quando si rappresentano le
informazioni in una tabella, è necessario pensare in termini di una griglia
composta da righe e colonne (un po' come un foglio di calcolo Excel).

Vedremo come creare delle tabelle, come rappresentare i dati con HTML ed
aggiungere informazioni aggiuntive ad una tabella (didascalie).

Una tabella ci permette di capire facilmente ed in modo intuitivo dei dati

complessi facendo riferimento alle informazioni su due assi. Ipotizziamo gli
orari di più autobus in una città, di solito, su un asse vi sono slot orari (ad
esempio dalle 8 alle 9) mentre sull’altro vi sono i numeri degli autobus. In
questo modo ci basta intersecare o “giocare a battaglia navale” per l’orario e il
numero di autobus di nostro interesse.

Ogni blocco nella griglia viene definito cella della tabella. In HTML una tabella
viene scritta riga per riga.

Per creare una tabella in HTML sono necessari solo 3 tag: uno relativo alla
tabella, uno relativo alla riga e uno alla cella rispettivamente <table>, <tr> e
<td>.

Con <table> si crea una tabella in cui è necessario aggiungere una riga affinché
non sia vuota. Le tabelle in HTML sono strutture abbastanza dinamiche infatti
non vi sono limiti su righe e colonne, basta aggiungere una cella nella riga
desiderata senza dover modificare altro. Il tag <table> è seguito da uno o più tag
di tipo <tr> che a sua volta contiene uno o più tag di tipo <td>.

Ipotizziamo di aver creato un sito per un’attività commerciale, è necessario

mostrare quanti prodotti sono ancora disponibili nel magazzino per evitare di
restare senza. Una tabella può aiutarci visivamente a mostrare la disponibilità di
ogni singolo prodotto.

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Riepilogo degli articoli in stock</p>
<p>La colonna a sinistra indica l'ID del prodotto</p>
<p>La colonna a destra indica la quantità</p>
<table>
<tr>
<td>1512361253</td>
<td>2</td>
</tr>
<tr>
<td>2342676237</td>
<td>2770</td>
</tr>
<tr>
<td>3276735560</td>
<td>503</td>
</tr>
 </table>
</body>
</html>

Il risultato di questo codice sarà una pagina con una semplice tabella:


Tabelle con stile

In realtà, per convenzione, conosciamo le tabelle in modo diverso. Di solito, le
tabelle hanno dei bordi che ci aiutano a distinguere una colonna da un’altra,
magari con un’intestazione per comunicare a cosa si sta facendo riferimento.
Proviamo quindi a migliorare questo esempio introducendo nuovi attributi e tag.

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p><b>Riepilogo degli articoli in stock</b></p>

<table border="1">
<tr>
<th scope="col">ID prodotto</th>
<th scope="col">Disponibilità</th>
</tr>
<tr>
<td>1512361253</td>
<td>2</td>
</tr>
<tr>
<td>2342676237</td>
<td>2770</td>
</tr>
<tr>
 <td>3276735560</td>
<td>503</td>
</tr>
</table>
</body>
</html>

Abbiamo aggiunto soltanto un nuovo attributo border al tag <table> e l’attributo

scope al tag <th>. Come puoi intuire il primo ci consente di disegnare i bordi
della tabella in modo da renderla molto più simile a ciò che siamo abituati a
conoscere. In realtà ci sono diversi attributi per le tabelle che consentono di
modificare i bordi.

Prova ad aggiungere questi attributi con i relativi valori, ricarica la pagina e vedi
come cambia l’aspetto della tabella:

bordercolor="blue" o

bgcolor="#00CCFF"

Avrai notato che con il primo è possibile cambiare il colore del bordo della
tabella mentre con il secondo è possibile cambiare il colore dello sfondo della
tabella, di una singola riga, di una singola cella, in base a dove è posizionato
l’attributo bgcolor.

È possibile usare i nomi inglesi dei colori, per convenzione infatti, tutti i browser
moderni supportano circa 140 nomi di colori, ad esempio: aqua, aquamarine,
beige, darkblue, fuchsia, grey, orange e tanti altri, oltre ai classici red, black,
green, yellow. In alternativa è possibile usare il valore esadecimale che
rappresenta un colore, come abbiamo fatto nel caso precedente per impostare il
colore dello sfondo della tabella. Un colore esadecimale è specificato con:
#RRGGBB, dove gli interi esadecimali RR (rosso), GG (verde) e BB (blu)
specificano i componenti del colore. Tutti i valori devono essere compresi tra 00
e FF, ad esempio, il valore #ff0000 viene visualizzato come rosso, poiché il
componente rosso è impostato sul valore più alto (RR) e gli altri sono impostati
su 00. Puoi creare delle combinazioni dei tre colori RGB giocando con il loro
valore ad esempio combinando il verde con il blu quindi #00FFFF otterrai il
colore Aqua che è molto simile al celeste. È preferibile usare le lettere maiuscole
per il valore del componente, che inoltre, è possibile abbreviare infatti #00FFFF
può essere scritto anche come #0FF. Puoi divertirti con i colori grazie ai molti
strumenti online o con semplici software come Paint e la sua tavolozza.

Nell’esempio precedente abbiamo dato risalto alle prime due celle perché
rappresentano l’intestazione della cella, ciò è stato possibile grazie all’attributo
scope. Questo attributo può assumere diversi valori come col (abbreviazione di
column), row, colgroup, rowgroup. Tramite l’attributo row è possibile
specificare che la cella è l’intestazione di una riga mentre con colgroup e
rowgroup si specifica che una cella è l’intestazione di un gruppo di colonne o
righe.

In realtà per quell’esempio sarebbe più interessante aggiungere una riga con il
totale degli elementi in magazzino quindi aggiungeremo una parte finale anche
detto footer ed una parte iniziale anche detta header alla nostra tabella. Queste
sezioni ti saranno molto utili per tabelle con molti elementi infatti i tag <thead> e
<tfoot> sono consigliati se hai una tabella più alta dello schermo (o, se stampata,
più lunga di una pagina). In questo modo il browser manterrà l'intestazione e il
piè di pagina permettendoti di avere sempre il riferimento dell’intestazione e del
footer.

L'elemento <thead> viene utilizzato insieme agli elementi <tbody> e <tfoot> per
specificare una parte di una tabella (intestazione, corpo, parte finale).

I browser possono utilizzare questi elementi per abilitare lo scorrimento del

corpo della tabella indipendentemente dall'intestazione e dalla parte finale.
Inoltre, quando si stampa una tabella di grandi dimensioni che si estende su più
pagine, questi elementi possono consentire la stampa dell'intestazione e del
footer nella parte superiore e inferiore di ciascuna pagina.

Assumiamo di voler creare una tabella simile a questa:

Il codice necessario alla realizzazione sarà il seguente:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p><b>Riepilogo degli articoli in stock</b></p>

<table border="1" bordercolor="blue" bgcolor="#0FF" >
<thead>
<tr>
<th scope="col">ID prodotto</th>
<th scope="col">Disponibilità</th>
</tr>
 </thead>
<tbody>
<tr>
<td>1512361253</td>
<td>2</td>
</tr>
<tr>
<td>2342676237</td>
<td>2770</td>
</tr>
<tr>
<td>3276735560</td>
<td>503</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>3275</td>
</tr>
</tfoot>
</table>
</body>
</html>

Nonostante ci siano ancora molti attributi con cui cambiare aspetto alla tua
tabella non è consigliato usarli. Alcuni attributi come width, height, border,
bgcolor ecc. possono essere molto utili e bisogna conoscerli, soprattutto quando
si ha a che fare con sistemi obsoleti ma per la realizzazione di un nuovo sito Web
sarebbe preferibile usare i fogli di stile o CSS per applicare delle regole di questo
tipo. Usando dei fogli di stile garantiresti uniformità al tuo sito, potresti
riutilizzare molto di quello che scrivi e avresti un codice HTML molto più pulito
e facile da comprendere.
 Capitolo 7
I form

Raccogliere i dati

Tradizionalmente, il termine "modulo" si riferisce a un documento stampato che

contiene spazi per la compilazione di informazioni. Grazie alla tecnologia non
compiliamo un modulo cartaceo da un po’ di tempo perché spesso ci basta
compilare un modulo tramite sito Web per accedere a moltissimi servizi.
L’iscrizione ad una piattaforma di streaming, ad un e-commerce, ad un social
network, tutto inizia compilando un modulo online anche detto form.

Il linguaggio HTML prende in prestito il concetto di un modulo per fare

riferimento a diversi elementi che consentono di raccogliere informazioni dai
visitatori del tuo sito. I form sono strumenti molto versatili infatti si adattano a
molti scopi e con il passare del tempo è diventato sempre più facile acquisire
testo, password, date, immagini e addirittura file.

Ma come funziona esattamente un form? Cosa succede dopo aver raccolto i dati?
Dopo aver inserito i dati l’utente preme sul pulsante Invia che manda al server i
dati inseriti. Un server elabora queste informazioni usando un linguaggio di
programmazione come PHP, Java, JavaScript, C# o altri ancora. Il server elabora
la richiesta in ingresso, talvolta memorizza i dati in un database ed infine
restituisce un messaggio al browser in modo da dare un feedback all’utente
riguardo l’invio.

HTML non può essere considerato un linguaggio di programmazione in quanto è

un linguaggio di markup. Un linguaggio di markup consente di descrivere i dati
con una formattazione specifica usando dei marcatori detti tag. Un linguaggio di
programmazione, invece, è un linguaggio formale che contiene un insieme di
comandi racchiusi da una sintassi per eseguire un compito specifico.

Di seguito trovi dei form che potrebbero esserti familiari:

Un form può avere diversi controlli al suo interno, ognuno infatti, raccoglie
informazioni diverse perciò deve esistere un modo per comunicare al server a
quale campo corrisponde un elemento del form. Per distinguere tra i vari dati
inseriti, le informazioni vengono inviate dal browser al server utilizzando delle
coppie nome - valore.

Vediamo quali elementi ci serviranno per iniziare a prendere confidenza con i

form HTML:

il tag <form>
l’attributo action
l’attributo method
Un semplice form che possiamo creare prevede un solo campo di input, ovvero
un solo campo con cui raccogliere le informazioni dall’utente:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per iscriverti al sito!</p>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" maxlength="30" />
</p>
</form>
</body>
</html>

Il form che abbiamo creato avrà questo aspetto:

Il tag <form> dovrebbe sempre contenere l'attributo action e di solito avrà anche
un metodo e un attributo id. Il campo action conterrà l’URL della pagina sul
server che riceverà le informazioni del modulo al momento dell’invio.
L'attributo method specifica come inviare i dati del form, come variabili URL
(con method = "get") o come richieste HTTP post (con method = "post").


GET o POST?

Abbiamo parlato di richieste http ma cosa sono? Per poter proseguire abbiano la
necessità di fissare alcuni concetti. Le applicazioni Web si basano, di solito, sul
protocollo HTTP che è l’acronimo di Hyper Text Tranfer Protocol. Questo
protocollo consente lo scambio di informazioni tra i browser e i server ed è detto
stateless cioè senza stato perché la connessione viene chiusa non appena
terminato lo scambio tra richiesta e risposta. Questi due elementi sono
fondamentali per lo scambio e nella richiesta vengono inserite tutte le
informazioni necessarie come ad esempio il metodo (GET o POST ma ci sono
anche altri come PUT, DELETE, OPTIONS…). La risposta, invece, contiene un
codice numerico che corrisponde al risultato della richiesta. I codici più usati
sono:

200 indica che la richiesta è stata accettata

301 vuol dire che tutte le richieste verranno rigirate verso un altro
indirizzo
401 si verifica quando sussistono problemi di autenticazione
404 quando la pagina o la risorsa non è stata trovata
500 se si verifica un errore interno al server

Adesso che sappiamo qualcosa in più riguardo allo scambio di informazioni tra
client e server in ambito Web vediamo quando usare GET e quando POST.

Usa GET per:

Aggiungere i dati del form all'URL nelle coppie nome - valore

Avere una lunghezza di un URL limitata (circa 3000 caratteri)
Non usare mai GET per inviare dati sensibili in quanto saranno
visibili nell’URL!
 GET è indicato per i dati non sicuri, come le stringhe di query nel
motore di ricerca Google
Inserire dei segnalibri nel browser
La sicurezza non è prioritaria

Usa POST per:

Aggiungere i dati del modulo all'interno del corpo della richiesta

HTTP (i dati non verranno mostrati nell'URL come avviene per la
GET)
Avere più sicurezza
Non avere limiti sulla dimensione
Non è possibile aggiungere un segnalibro ai moduli inviati con
POST

Ritorniamo al nostro esempio, abbiamo usato il tag <form> che abbiamo avuto
modo di approfondire ma è presente anche <input>. Quest’ultimo viene
utilizzato per creare diversi tipi di controlli sul modulo e molti sono già integrati
in HTML. Il valore dell'attributo type determina il tipo di input che verrà creato.
Nell’esempio abbiamo usato type=”text” per poter inserire del testo libero su una
singola riga. Quando gli utenti inseriscono le informazioni in un form, il server
deve sapere chi ha il controllo dei dati inseriti (ad esempio, in un modulo di
accesso, il server deve sapere cosa è stato immesso come nome utente e ciò che è
stato fornito come password). Pertanto, ogni controllo del form richiede un
attributo name. Il valore di questo attributo identifica il controllo di quel campo
del modulo. È possibile utilizzare l'attributo maxlength per limitare il numero di
caratteri che un utente può inserire nel campo di testo. Il suo valore è il numero
massimo di caratteri che l’utente può inserire, ad esempio, se chiedessimo un
anno come campo di input, l'attributo maxlength potrebbe avere un valore di 4.

Nell’esempio abbiamo inserito un campo di testo per lo username, potremmo

fare lo stesso per la password ma non sarebbe molto sicuro mostrare la password
in chiaro. Pensate di essere in treno e di dover accedere al sito, qualcuno
potrebbe vedere la password compromettendo il vostro account. A questo scopo
HTML ci viene incontro oscurando i caratteri della password con dei puntini
semplicemente cambiando il tipo di input da text a password.

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per iscriverti al sito!</p>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" maxlength="30" />
</p>
</form>
</body>
</html>

Ora che possiamo raccogliere i dati dall’utente ci serve un pulsante per inviare il
form, ovvero le informazioni raccolte, al server in modo da elaborarle e farci
accedere al sito o respingere l’accesso con un messaggio d’errore. Useremo
sempre un tag <input> ma con un tipo diverso, infatti, con il tipo submit
possiamo inviare un form al server. HTML si occuperà di mostrare questo tipo di
tag, non come una barra in cui inserire il testo ma come un vero pulsante. Il testo
del pulsante possiamo modificarlo a nostro piacere tramite l’attributo value.
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per iscriverti al sito!</p>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" maxlength="10" />
</p>
<input type="submit" name="access" value="Invia" />
</form>
</body>
</html>

Questo form si presenterà all’utente così:

Certamente un testo libero può includere di tutto ma preferiamo che il nostro

sistema garantisca l’accesso solo tramite e-mail. Ci servirebbe un controllo ad
hoc ma per fortuna HTML ha pensato anche a questo. HTML5 ha anche
introdotto dei campi di input che consentono ai visitatori di inserire indirizzi e-
mail e URL. I browser che non supportano questi tipi di input li tratteranno
semplicemente come caselle di testo mentre i browser che supportano HTML5
verificheranno che l'utente abbia fornito le informazioni nel formato corretto di
un indirizzo e-mail. Alcuni smartphone ottimizzano anche la tastiera per
visualizzare i tasti di cui hai probabilmente bisogno quando inserisci un indirizzo
e-mail (come il simbolo @).

Ecco la validazione automatica da parte del browser:

Il messaggio di errore viene automaticamente mostrato da HTML quando si

preme il pulsante per l’invio del form.

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per iscriverti al sito!</p>
<form action="http://www.example.com/login.php">
<p>E-mail:
<input type="email" name="email" />
</p>
<p>Password:
 <input type="password" name="password" maxlength="10" />
</p>
<input type="submit" name="access" value="Invia" />
</form>
</body>
</html>

Dopo aver salvato e aver ricaricato la pagina ci siamo accorti che entrambi i
campi non sono obbligatori ma è fondamentale che lo siano. Per garantire queste
condizioni bisogna aggiungere un attributo particolare, required. Si tratta di un
attributo insolito, infatti, perché è composto solo dal nome dell’attributo senza
alcun valore. I campi dell’esempio precedente diverranno rispettivamente:

<input type="email" name="email" required />

<input type="password" name="password" maxlength="10" required />



Liste di informazioni

Talvolta bisogna scegliere una tra molte informazioni per completare un form, ci
sono diverse possibilità per raggiungere questo obiettivo. Vedremo come usare i
cosiddetti pulsanti radio, le checkbox e le liste di elementi a tendina.
Probabilmente questi nomi adesso non ti dicono nulla ma sono sicuro che avrai
già visto e usato questi elementi in diversi siti Web. Per i primi due basterà
cambiare il type del tag <input>. Creeremo un sondaggio ma in un due modi
diversi per capire subito la differenza tra radio e checkbox.

Come puoi vedere ci sono elementi grafici che hai già usato e forse sai già che
nel primo caso non è possibile selezionare più valori mentre nel secondo caso
non solo è possibile selezionare più di un valore ma è anche possibile non
selezionare alcun valore.

Diamo un’occhiata ai due form che abbiamo creato:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per proseguire con il sondaggio</p>
 <form action="http://www.example.com/sondaggio.php">
<p>Seleziona il tuo stile di vita:
<br />
<input type="radio" name="genere" value="onnivoro" checked="checked"
/> Onnivoro
<input type="radio" name="genere" value="vegetariano" /> Vegetariano
<input type="radio" name="genere" value="vegano" /> Vegano
<input type="radio" name="genere" value="fruttariano" /> Fruttariano
<input type="radio" name="genere" value="crudista" /> Crudista
</p>
</form>

<form action="http://www.example.com/sondaggio.php">
<p>Seleziona gli stili di vita che si avvicinano al tuo:
<br />
<input type="checkbox" name="genere" value="onnivoro"
checked="checked" /> Onnivoro
<input type="checkbox" name="genere" value="vegetariano" />
Vegetariano
<input type="checkbox" name="genere" value="vegano" /> Vegano
<input type="checkbox" name="genere" value="fruttariano" />
Fruttariano
<input type="checkbox" name="genere" value="crudista" /> Crudista
</p>
</form>
</body>
</html>

Appena viene visualizzata la pagina esistono dei valori che sono già selezionati,
questo avviene per la presenza dell’attributo checked con valore checked. Può
sembrare strano che il valore di un attributo sia uguale al nome dell’attributo
stesso infatti con HTML5 è possibile inserire soltanto il nome dell’attributo, in
modo simile a required.

Supponiamo adesso di voler creare una tendina anche detta drop down list per
selezionare un elemento tra quelli già elencati. Questo approccio può essere
considerato un’alternativa ai radio in quanto almeno un elemento deve essere
selezionato. Ci sono due fattori chiave per capire quale utilizzare:

1. Se gli utenti devono vedere tutte le opzioni a colpo d'occhio, è

più adatto il tipo radio;
2. Se esiste un elenco molto lungo di opzioni (come un elenco di
paesi), è preferibile usare il tag <select> anche per non occupare
troppo spazio.

Useremo il tag <select> con un tag <option> per ogni voce della tendina.

Il codice necessario è riportato di seguito:

<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Compila il seguente form per proseguire con il sondaggio</p>
<form action="http://www.example.com/sondaggio.php">
<p>Seleziona il tuo stile di vita:</p>
<select name="stili">
<option value="onnivoro"> Onnivoro</option>
<option value="vegetariano"> Vegetariano</option>
<option value="vegano"> Vegano</option>
<option value="fruttariano">Fruttariano</option>
<option value="crudista">Crudista</option>
</select>
</form>
</body>
</html>

L'attributo name indica il nome del campo del form che verrà inviato al server,
insieme al valore selezionato dall'utente. L'elemento <option> viene utilizzato
per specificare le opzioni che l'utente può selezionare. Le parole tra il tag di
apertura <option> e il tag di chiusura </option> verranno mostrate all'utente
nella tendina. L'elemento <option> utilizza l'attributo value per contrassegnare il
valore inviato al server insieme al nome della tendina quando l’opzione è
selezionata.

Esiste anche la possibilità come per le checkbox di avere un campo

preselezionato all’apertura della pagina, è necessario inserire la parola chiave
selected come attributo del tag <option>. Non utilizzando questo attributo al
caricamento della pagina verrà visualizzata la prima opzione proprio come nel
nostro esempio.


Date e file

Molti form servono per raccogliere informazioni come date, indirizzi e-mail e
URL. Fino a poco tempo fa questo è stato possibile usando del semplice testo.
HTML5 introduce nuovi controlli dei moduli per standardizzare il modo in cui
vengono raccolte alcune informazioni. I browser meno recenti che non
riconoscono questi input li tratteranno semplicemente come una casella di testo.
Se stai chiedendo una data all'utente, ad esempio la data di nascita o la data di
emissione di un documento, è possibile utilizzare un elemento <input> e
assegnare all'attributo type il valore date. In questo modo si creerà un input di
data nei browser che supportano i nuovi tipi di input HMTL5. L'aspetto
dell'input della data cambia in base al browser. Creiamo un piccolo form per
l’inserimento dei documenti di un utente, creeremo l’upload del documento e
soprattutto aggiungeremo dei controlli per inserire la data di emissione e
scadenza. L’aspetto di questi elementi varia in base al browser pertanto potresti
avere un aspetto grafico diverso da Chrome a Mozilla Firefox, da Edge a Opera.
Per realizzare questo form vediamo il codice sorgente che sostanzialmente userà
diversi valori del tipo di input e l’aggiunta di qualche nuovo attributo come
pattern.

<html>
<head>
 <title>Il mio sito</title>
</head>
<body>
<h3>Documento di riconoscimento</h3>
<form method="post" action="http://www.example.com/documento.php">
<p>Tipo di documento:</p>
<select name="tipoDocumento">
<option value="CI">Carta d'identità</option>
<option value="PAT">Patente</option>
<option value="PAS">Passaporto</option>
<option value="TS">Tessera sanitaria</option>
</select>

<p>Ente di rilascio</p>
<input type="text" name="enteRilascio" required/>

<p>Numero documento</p>
<input type="text" name="numDocumento" pattern="/^[a-zA-Z]{2}[0-9]
{7}$" required/>

<p>Data di emissione</p>
<input type="date" name="dataEmissione" />

<p>Data di scadenza</p>
<input type="date" name="dataScadenza" />

<p>Documento in formato PDF</p>
<input type="file" name="pdfDoc" />
<hr />

 <input type="submit">
</form>
</body>
</html>

La prima novità è l’attributo pattern insieme al campo che identifica il numero

del documento. Un pattern indica una sequenza da rispettare, in particolare, in
molti linguaggi di programmazione si usano delle espressioni regolari. Le
espressioni regolari consentono di definire una struttura che il dato in input
deve rispettare, in questo caso vogliamo che il numero del documento sia
composto da esattamente 2 lettere, maiuscole o minuscole seguite da esattamente
7 numeri da 0 a 9. HTML si occuperà della validazione di questo pattern infatti
provando ad inserire un valore diverso si otterrà un errore come segue:

Ovviamente è necessario dare delle indicazioni all’utente su quale sia il formato

corretto quindi sarebbe necessario aggiungere una nota proprio sotto il campo
del numero del documento in modo da non essere error prone (in modo da non
indurre l’utente a commettere un errore).

Per quanto concerne il tipo date è possibile preimpostare una data come segue:

<input id="appuntamento" type="date" value="2020-01-13"/>

L’uso di una data preimpostata può esserti d’aiuto se, per esempio, in fase di
iscrizione al tuo sito l’utente deve avere almeno 16 o 18 anni, come avviene
sempre più spesso per i social network. In questi casi la data mostrata è quella
odierna meno l’età necessaria per l’iscrizione.
Per prevalorizzare una data è necessario l’attributo value seguito dalla data in
formato ISO 8601 ovvero anno-mese-giorno. Tra i valori ammessi in HTML5
per il tipo date esistono anche week, month, time, datetime e datetime-local.
Questi valori ti consentono rispettivamente di selezionare una settimana, un
mese, un orario, data e ora in formato UTC oppure data e ora locali. Prova ad
utilizzarli tutti per vedere come cambia l’aspetto del calendario.

Continuando con l’analisi del codice del form possiamo notare l’ennesimo tipo
per il tag <input>, utile per l’upload dei file, che siano mp3, pdf, jpg ecc.

A tal proposito voglio darti un consiglio, se consenti ai tuoi utenti di inviare dei
file dovresti dotarti di un antivirus per scansionarli prima di salvarli sul tuo
server. I file che gli utenti inviano possono nascondere dei virus abbastanza
dannosi che potrebbero compromettere l’integrità del tuo server.

Questo tipo di input crea una casella che assomiglia a un input di testo seguito da
un pulsante Sfoglia. Quando l'utente clicca sul pulsante, si apre una finestra che
consente di selezionare un file dal proprio computer per caricarlo sul sito Web.
In questo caso l'attributo del metodo sull'elemento <form> deve assumere
necessariamente il valore di post poiché non è possibile inviare file utilizzando il
metodo HTTP get.
Quando un utente fa clic sul pulsante Sfoglia, la presentazione della finestra che
consente di cercare il file che desidera caricare corrisponderà alle finestre del
sistema operativo dell'utente. Non è possibile modificare l’aspetto di queste
finestre perché sono proprie del sistema operativo ma, se proprio hai la necessità
di cambiarle, potresti creare delle modali personalizzate e modificarne l’aspetto
tramite fogli di stile.

Ti ricordo che questo e-book è volto ad imparare HTML ma per ogni sito
sarebbe utile anche una validazione via JavaScript per evitare richieste errate al
server così come sarebbe necessario controllare ogni richiesta direttamente lato
server.

 Capitolo 8
HTML5

Evoluzione di un linguaggio

Nel corso dell’e-book abbiamo fatto spesso riferimento ad HTML5 perciò è
arrivato il momento di approfondire.

HTML5 è l’evoluzione del protocollo HTML4 che innova con nuovi elementi,
attributi e comportamenti perché, come abbiamo constatato, le esigenze
cambiano. Fino a circa 10 anni sarebbe stato impensabile scrivere una e-mail con
il cellulare, oggi invece questi sono diventati degli smart-phone a tutti gli effetti.
Per questo motivo è fondamentale continuare a lavorare per andare incontro alle
esigenze dei programmatori ma soprattutto degli utenti, che sono il nostro vero
obiettivo. Creare un input di tipo e-mail è molto più veloce rispetto allo scrivere
un’espressione regolare per validare l’e-mail stessa, in questo modo si velocizza
lo sviluppo e lo si rende più sicuro.

Le novità apportate da HTML5 riguardano soprattutto l’area semantica, la

connettività, la possibilità di memorizzare dati sui client, la multimedialità e le
performance.

La semantica è un aspetto davvero importante per un sito Web e permette di far

capire ai motori di ricerca e ai crawler come è strutturato il nostro sito, dove si
trova il menu, dove si trovano le sezioni così come il footer ovvero la parte
finale del sito. L’uso di specifici tag come <article> e <section> consente ad
HTML5 di avere una struttura del documento più precisa e prevedibile. In questo
modo i browser possono fruire di una struttura più dettagliata e completa per
consentire la migliore user experience.

Grazie a questa evoluzione sono stati compiuti passi da gigante in ambito

multimediale infatti in modo progressivo è stata abbandonata la tecnologia Flash
e sono nati sempre più framework basati su JavaScript, i più famosi sono React,
Angular e Vue.js. Flash ha funzionato bene per diverso tempo ma in un secondo
momento sono emerse le sue lacune soprattutto nell’integrazione di funzionalità
con HTML e CSS, problemi di accessibilità e sicurezza. Diversi anni fa l’audio
era addirittura caricato nella homepage del sito ed aveva l’effetto di essere la
“colonna sonora” della tua navigazione sul sito stesso.

Con i tag <audio> e <video> e l’incremento progressivo della larghezza di

banda, l’utilizzo di video e audio ha subito una forte crescita. Attualmente questi
tag sono poco usati perché spesso si creano dei video che vengono caricati su
piattaforme come Youtube, Vimeo e Dailymotion, le quali, consentono di
integrare il video tramite un semplice snippet di codice. In questo modo l’utente
userà qualcosa che già conosce pertanto la sua esperienza nella navigazione sarà
positiva.

Un grandissimo passo per HTML5 è costituito dalla possibilità di salvare dei

contenuti sul client in modo da permettere un caricamento più veloce delle
risorse quando necessario. I Web Workers consentono di eseguire delle
operazioni in background su un thread separato. Questo si traduce in un processo
principale che si occupa dell’interfaccia utente ed un processo secondario (in
background) che si occupa di altre operazioni. Un worker è solitamente scritto in
JavaScript, opera in un contesto globale e ovviamente non si può occupare di
modifiche visive. Esistono diverse attività che i worker possono compiere, ad
esempio, possono intercettare le chiamate tra client e server per verificarne
l’autenticità, possono memorizzare le risposte del server per garantire
un’operatività offline.

Immaginiamo questo scenario: hai creato la tua agenda online per salvare tutti
gli appuntamenti giorno per giorno, non sei l’unico ad averne accesso quindi
anche la tua segretaria può fissare degli appuntamenti per te. Il sito deve essere
fruibile sia online che offline quindi un worker può registrare tutti gli
appuntamenti nell’agenda salvando la risposta del server. Successivamente puoi
impostare una logica che ti permette di fare una richiesta al server e, se non
disponibile (se sei offline), il worker restituirà la risposta che aveva salvato dal
server in precedenza. In questo modo all’utente sembrerà di essere online ma in
realtà si tratta di qualcosa salvato quando si era online.

Altri progressi importanti in HTML5 riguardano la visualizzazione delle formule

matematiche, l’integrazione con il nuovo standard per i fogli di stile detto CSS3,
il quale offre ancora più possibilità per personalizzare un sito Web.

Considerato l’orientamento verso l’ambito mobile si è puntato molto all’acceso

ai dispositivi infatti, tramite JavaScript, è possibile usare, manipolare e salvare
delle immagini dalla fotocamera del PC, smartphone o tablet in modo nativo,
puoi gestire l’orientamento del dispositivo, puoi creare degli eventi da attivare
per gestire il touch ma soprattutto è consentita la geolocalizzazione del browser.
Ti sarà capitato di aprire un sito Web e vedere una piccola sezione che ti chiede
di comunicare la tua posizione. Tutto questo avviene, infatti, grazie alle API di
geolocalizzazione con cui il sistema operativo richiede sempre all’utente
l’autorizzazione a fornire le informazioni sulla posizione, per motivi di privacy.

Immaginiamo questo scenario: stai sviluppando il sito Web per una Banca e
potrebbe essere utile al tuo utente trovare la filiale più vicina. Grazie a questa
funzionalità di HTML5 potrai mostrargli dove si trova la filiale, la distanza dalla
sua posizione attuale ed addirittura mostrargli il percorso per raggiungerla. Tutto
questo ti può sembrare incredibile ma puoi solo immaginare quante diverse
applicazioni è possibile creare con HTML5.
 Conclusione
La tecnologia che ci circonda ha assunto davvero un ruolo importante nella
nostra vita, ci circonda, ci aiuta ma può anche travolgerci, che sia per lavoro, per
svago o per comunicare. Siamo sempre incollati ad un cellulare anzi uno smart-
phone tanto che spesso ci sembra strano uscire di casa senza averlo preso. Credo
che la tecnologia così come tutte le cose che ci circondano debbano essere usate
per quello che di buono possono offrire. Sinceramente trovo che poter fare un
bonifico direttamente da casa in 5 minuti sia molto più conveniente di spendere
20 minuti per recarsi in banca, fare la fila ed effettuare la stessa operazione.
Basti pensare che da un social network è partita una rivoluzione in Egitto e
Tunisia, l’informazione e la comunicazione è molto più rapida anche grazie a
persone ed aziende che continuano ad investire in questi strumenti e che ci
credono davvero. Esistono anche tanti lati negativi, dal dark web
all’egocentrismo che dilaga nei social network, al mondo che i motori di ricerca
ci fanno vedere, dopo averci opportunamente profilato.

Ma la parte più interessante della tecnologia consiste nell’opportunità che

ognuno di noi ha per poter contribuire, per poter rendere questo mondo, un
mondo migliore.


PROGRAMMARE IN CSS
 Premessa

Per fortuna, o purtroppo, ci troviamo in un periodo in cui siamo sommersi dal

Web, tanto che risulta difficile talvolta staccare gli occhi dallo schermo del
laptop o del cellulare. Questo perché il Web ci ha semplificato di molto la vita, ci
ha reso più indipendenti, ci ha reso più liberi ma paradossalmente più schiavi. È
possibile lavorare in smart-working senza nemmeno recarsi in ufficio, consultare
il proprio estratto conto anche nel pieno della notte, compilare dei moduli online
senza nemmeno prendere la penna in mano. Tutto questo ci porta a capire
l’importanza del Web nel periodo in cui viviamo e navigando tra siti e app
abbiamo imparato a riconoscere quelli fatti meglio. Possiamo affermare senza
dubbio che la grafica del sito ricopre un ruolo fondamentale.

A questo punto è fondamentale creare un sito Web accattivante, ricco di

contenuti di qualità e soprattutto che inviti l’utente ad accedervi di nuovo. Non
bisogna sottovalutare questo aspetto perché un utente fidelizzato ha creato un
rapporto di “fiducia” con il tuo sito. Attenzione, la fiducia deve essere mantenuta
quindi presta molta attenzione quando effettui un aggiornamento al sito Web o
quando cambi il layout delle tue pagine, fai in modo che sia sempre coerente.
 Capitolo 1
Un po’ di storia

Nei primi anni del Web l'HTML era un linguaggio piuttosto snello e composto
quasi interamente da elementi strutturali che erano utili per descrivere paragrafi,
collegamenti ipertestuali, elenchi e intestazioni. L'HTML era originariamente
inteso come un linguaggio di markup strutturale, usato per descrivere le varie
parti di un documento. Il linguaggio non si occupava dell'aspetto: era solo un
piccolo schema di markup. All'improvviso, il potere del World Wide Web fu
evidente a tutti e capirono che il testo e le immagini potevano essere visualizzati
insieme quindi tutto ciò che serviva per creare una pagina era un editor di testo. I
siti Web, così, hanno iniziato a spuntare ovunque tra riviste personali, siti
universitari, siti aziendali e altro ancora. Con l'aumentare del numero di siti,
aumentò anche la richiesta di nuovi elementi HTML che avrebbero dovuto
svolgere una funzione specifica. Gli autori hanno iniziato a chiedere di poter
rendere il testo in grassetto o in corsivo. Non esisteva nulla per garantire che ciò
che lo sviluppatore aveva creato fosse effettivamente ciò che il lettore avrebbe
visto. Improvvisamente, un linguaggio strutturale ha iniziato ad occuparsi anche
dell’aspetto, creando una grande confusione. Naturalmente, questo problema non
è stato sottovalutato dal World Wide Web Consortium (W3C), che ha iniziato a
cercare una soluzione rapida. Nel 1995 il consorzio ha iniziato a pubblicizzare
un work-in-progress chiamato CSS che, finalmente, nel 1996 è stato
raccomandato, con lo stesso peso di HTML.

Fu così che nacque CSS (Cascading Style Sheets) ovvero fogli di stile a cascata,
un modo efficace per modificare l’aspetto di un documento o una raccolta di
documenti.

All’inizio, CSS consentiva ai documenti di apparire molto più ricchi di quanto

HTML permettesse. Adesso CSS consente di impostare i colori sul testo e sullo
sfondo di qualsiasi elemento; consente la creazione di bordi attorno a qualsiasi
elemento, nonché l'aumento o la riduzione dello spazio circostante; ti consente di
modificare il modo in cui il testo viene scritto: in maiuscolo, spaziato e ti
permette di ottenere molti altri effetti. In seguito, è stato raffinato sempre di più
in modo da ottenere uno strumento molto versatile e potente che non ha perso il
suo obiettivo nel corso del tempo.

Oggi esistono anche strumenti molto avanzati basati su CSS come i

precompilatori (Sass, Less e Stylus) ovvero strumenti che permettono di definire
fogli di stile in modo ancora più semplice, ottimizzando al meglio i file creati. In
questo modo si riducono le dimensioni del file limitando la leggibilità del file
stesso.
 Capitolo 2
Caratteristiche di CSS

Semplicità

Con CSS è possibile cambiare completamente il modo in cui gli elementi

vengono presentati da un browser. Consideriamo di voler cambiare l’aspetto del
nostro titolo h1 sulla pagina Web:

<h1>Il mio titolo</h1>

Vogliamo che il titolo sia presentato con un determinato font, di colore rosso
scuro e con uno sfondo giallo. Con CSS tutto questo si traduce in una semplice
regola di stile:

h1 {
color: darkred;
font: 2em Times, serif;
background: yellow;
}

Se le potenzialità di CSS non ti convincono, questo ti interesserà di certo: i fogli

di stile possono ridurre drasticamente il carico di lavoro di uno sviluppatore
Web. Prima di tutto, i fogli di stile centralizzano le regole da applicare per alcuni
effetti visivi in un unico file, anziché disperderli all’interno del documento. Ad
esempio, supponiamo che desideri che tutte le intestazioni h2 in un documento
siano viola. Utilizzando solo HTML, il modo per farlo sarebbe quello di inserire
un attributo style in ogni intestazione, in questo modo:

<h2 style="color: purple">Sono un sottotitolo viola!</h2>

Questo deve essere fatto per ogni sottotitolo di secondo livello quindi se hai 40
sottotitoli nel tuo documento, devi inserire 40 volte lo stesso attributo con lo
stesso valore! Questo comporta molto lavoro per un effetto molto semplice ma la
criticità è un’altra. Probabilmente cambiando il colore dello sfondo ti accorgerai
che il viola non è il colore adatto per un sottotitolo quindi deciderai di cambiare
il colore da viola a rosso. Dovrai modificare tutte quelle regole di stile che hai
scritto, correggendo ogni singolo carattere. Potresti essere in grado di cercare e
sostituire in blocco ma rischieresti di modificare anche altro. Se hai inserito altri
elementi di carattere viola nel tuo documento, con una sostituzione “a tappeto”
cambieresti anche il colore di questi.

Sarebbe molto meglio invece avere una sola regola:

h2 {color: purple;}

Non solo è più veloce da digitare, ma è più facile da modificare infatti se passi
dal viola ad un altro colore, tutto ciò che devi cambiare è quell'unica regola. Puoi
anche combinare più elementi infatti se hai anche dei sottotitoli di terzo livello
puoi applicargli lo stesso stile del sottotitolo di secondo livello in modo molto
semplice:

h2, h3 {color: purple;}

Hai notato che in pochi secondi abbiamo cambiato tutti i 40 sottotitoli? Qui inizi
a notare la potenza di CSS, inoltre, la maggior parte delle regole CSS sono
raccolte in un'unica posizione nel documento. È possibile sparpagliarle in tutto il
documento raggruppandoli in stili o singoli elementi, ma di solito è molto più
efficiente posizionare tutti i tuoi stili in un singolo foglio di stile con estensione
.css. Ciò consente di creare (o modificare) l'aspetto di un intero documento in
un'unica posizione.

 Riusare i fogli di stile

Non solo puoi centralizzare tutte le informazioni di stile per una pagina in un
unico file, ma puoi anche creare un foglio di stile che può quindi essere applicato
a più pagine. Viene creato un file con tutte le regole di stile quindi importato da
qualsiasi pagina per essere utilizzato. Utilizzando questa funzionalità, è possibile
creare rapidamente un aspetto coerente per un intero sito Web. Tutto quello che
devi fare è collegare il singolo foglio di stile a tutti i documenti sul tuo sito Web.
Quindi, se volessi cambiare l'aspetto delle pagine del tuo sito, dovrai modificare
un solo singolo file e la modifica verrà propagata ovunque in modo automatico!

Considera un sito in cui tutte le intestazioni sono grigie su uno sfondo bianco. Il
foglio di stile ha le seguenti regole:

h1, h2, h3, h4, h5, h6 {

color: gray; background: white;
}

Ora diciamo che questo sito ha 300 pagine, ognuna delle quali utilizza il foglio
di stile che mostra i titoli in grigio. Ad un certo punto, il webmaster del sito
decide che i titoli devono essere bianchi su uno sfondo grigio. È sufficiente
modificare il foglio di stile:

h1, h2, h3, h4, h5, h6 {

color: white; background: gray;
}

Dopo aver salvato il file, la modifica verrà apportata al sito ed è certo che la
modifica sarà apportata su tutte le pagine perché tutte dipendono da quel file.
 Fogli a cascata

CSS prevede anche come risolvere eventuali “conflitti” tramite delle

disposizioni o regole che sono denominate cascata. Ad esempio, supponiamo di
usare un singolo foglio di stile in più pagine Web come nell’esempio precedente.
Un insieme di pagine condividono molti degli stessi stili, ma possono includere
anche delle regole specializzate che si applicano solo su determinate pagine.
Potresti creare un altro foglio di stile da importare in quelle pagine, oltre al
foglio di stile già esistente, oppure puoi semplicemente posizionare gli stili
dedicati nelle pagine che ne hanno bisogno. Ad esempio, su una delle 300
pagine, potresti volere le intestazioni gialle su sfondo blu scuro anziché bianche
su grigio. In quel singolo documento, quindi, è possibile inserire questa regola:

h1, h2, h3, h4, h5, h6 {

color: yellow; background: blue;
}
Grazie al concetto di cascata, questa regola sovrascriverà la regola importata dal
file comune per le intestazioni di colore bianco su sfondo grigio. Le regole a
cascata sono facili da capire e puoi utilizzarle per creare fogli di stile
specializzati, garantendo comunque una modifica facile e un aspetto
professionale alle tue pagine.

 Dimensioni ridotte

Infine, ma non meno importante, CSS aiuta a mantenere le dimensioni dei

documenti il più piccolo possibile, accelerando così i tempi di download.
Immagina di salvare una pagina HTML con 40 intestazioni e stile inline per ogni
intestazione, sicuramente il peso di questa pagina sarà più grande rispetto ad una
pagina che sfrutta un foglio di stile esterno.

Raggruppando le informazioni di stile visivo in file centralizzati e

rappresentando quelle regole usando una sintassi abbastanza compatta, è
possibile rimuovere gli elementi non necessari, risparmiando spazio. Pertanto, i
CSS possono mantenere bassi i tempi di caricamento e alta la soddisfazione del
visitatore perché il sito verrà caricato in meno tempo. Ti consiglio di eliminare
gli spazi non necessari nei file CSS in modo da ridurre ulteriormente le
dimensioni del file.
 Capitolo 3
Unire HTML e CSS

Bisogna ricordare che i documenti HTML hanno una propria struttura, che
generalmente dovrebbe essere di sostegno e creata attorno ai contenuti. In realtà,
nella fretta di creare le pagine più belle sul Web, abbiamo piegato, deformato e
generalmente ignorato l'idea che le pagine dovrebbero contenere informazioni
con un significato.

Usando il tag style nella sezione head della pagina puoi includere delle regole di
stile specifiche per la tua pagina:

<html>
<head>
<title>CSS interno</title>
<style type="text/css">
h1 {
color: red;
}
</style>
</head>
<body>
<h1>CSS interno</h1>
<p style="color: gray;">
Qui trovi una pagina html con regole di stile all'interno
</p>
</body>
</html>

L’attributo style dovrebbe sempre usare l’attributo type di attributo che, nel caso
di un documento CSS, assume il valore di text/css, proprio come con l'elemento
link. L'elemento style dovrebbe sempre iniziare con <style type="text/css">,
come mostrato nell'esempio precedente. Questo tag deve essere seguito da una o
più regole di stile e terminare con un tag di chiusura </style>.

In HTML ci sono diversi modi per integrare il CSS, il più semplice consiste nel
dichiarare un tag di tipo link in modo da dipendere da un file con estensione .css.

<html>
<head>
<title>CSS esterno</title>
<link rel="stylesheet" type="text/css" href="regole.css" media="all" />
</head>
<body>
<h1>CSS esterno</h1>
<p style="color: gray;">
Questa pagina html punta al file regole.css
</p>
</body>
</html>

Lo scopo del tag link consiste nel permettere l’associazione di altri documenti al
documento contenente il tag link. CSS lo usa per collegare fogli di stile al
documento; in questo caso è stato collegato un foglio di stile chiamato regole.css
alla pagina.

Questi fogli di stile, che non fanno parte del documento HTML ma sono
utilizzati da esso, vengono definiti fogli di stile esterni. Questo perché sono fogli
di stile che non sono inclusi (quindi definiti) all’interno del documento HTML.
Per caricare correttamente un foglio di stile esterno, il collegamento deve essere
posizionato all'interno della sezione head ma non può essere inserito all'interno
di nessun altro elemento. Ciò consentirà al browser Web di individuare e caricare
il foglio di stile e di utilizzare gli stili in esso contenuti per eseguire il rendering
del documento HTML.

Un foglio di stile esterno è semplicemente un elenco di regole, proprio come

quelle che abbiamo visto precedentemente, ma in questo caso le regole vengono
salvate nel proprio file. Ricorda solo che nel foglio di stile non è possibile
includere codice HTML o altri linguaggi di markup, ma solo regole di stile. Ecco
i contenuti di un foglio di stile esterno:

h1 {
color: yellow; background: blue;
}

h2, h3 {
color: yellow; background: red;
}

h4, h5, h6 {
color: gray; background: white;
}

Gli altri attributi del tag link e i valori che possono assumere sono abbastanza
semplici. L’attributo rel indica il tipo di "relazione" con il documento e in questo
caso la relazione è foglio di stile. L’attributo type è sempre impostato su text/css.
Questo valore descrive il tipo di dati che verranno caricati utilizzando il tag link.
In questo modo, il browser Web sa che il foglio di stile è un file CSS, quindi si
tratta di un’istruzione per il browser per capire come gestire i dati.
Successivamente, troviamo l'attributo href e il valore di questo attributo è l'URL
del tuo foglio di stile ovvero dove si trova il file. Questo URL può essere
assoluto o relativo, a seconda della posizione. Nel nostro esempio, ovviamente,
l'URL è relativo perché il file che vogliamo usare si trova nello stesso percorso
della pagina. Potresti avere la necessità di usare un URL assoluto nel momento
in cui tu debba usare il CSS ospitato da un altro sito o se, per esempio, stai
migrando il tuo dominio.

Infine, abbiamo un attributo media il cui valore significa che il foglio di stile
deve essere applicato in tutti i supporti di presentazione. Esistono diversi valori
consentiti per questo attributo:

all: usato per tutti i tipi di presentazione;

braille: utilizzato per sintetizzatori vocali, screen reader e altri
rendering audio del documento;
print: usato quando si stampa il documento e anche quando si
visualizza un'anteprima di stampa del documento;
screen: usato quando si presenta il documento su uno schermo,
come un monitor di un computer desktop;
tv: utilizzato per indicare che la pagina è presentata su una
televisione.

Questi valori sono particolarmente utili perché consentono di controllare

l’aspetto del sito per ogni supporto.
 I selettori

Uno dei principali vantaggi di CSS, in particolare per gli sviluppatori Web, è la
sua capacità di applicare facilmente una serie di stili a tutti gli elementi dello
stesso tipo. Questo aspetto consente di concentrarti molto sul design piuttosto
che lavorare per istruire il browser. Ovviamente, i CSS non possono risolvere
tutti i tuoi problemi, ad esempio non puoi usarli per cambiare il colore delle tue
GIF, ma possono rendere molto più semplici alcune modifiche a livello globale.
Abbiamo già visto delle regole di stile ma come sono composte? Analizziamole
in dettaglio:

h1 {
color: yellow; background: blue;
}

Ogni regola è composta da due parti fondamentali, il selettore e il blocco di

dichiarazione. Il blocco delle dichiarazioni è composto da una o più
dichiarazioni e ogni dichiarazione è un'associazione di una proprietà e di un
valore. Ogni foglio di stile è composto da una serie di regole. Il selettore
definisce quale parte del documento sarà interessata dalle modifiche.
Nell’esempio precedente, sono selezionati gli elementi h1, ma se il selettore
fosse stato p, allora sarebbero stati selezionati tutti i paragrafi.

Il lato destro della regola contiene il blocco di dichiarazioni, che è costituito da

una o più dichiarazioni. Ogni dichiarazione è una combinazione di una proprietà
CSS e un valore di quella proprietà. Nell’esempio, il blocco di dichiarazioni
contiene due dichiarazioni: la prima afferma che gli elementi selezionati avranno
un colore blu e la seconda afferma che avranno uno sfondo giallo. Quindi, tutti
gli elementi h1 nel documento (definito dal selettore) saranno disegnati in testo
blu su sfondo giallo.

Il blocco di dichiarazioni contiene una o più dichiarazioni. Una dichiarazione

viene sempre formattata come una proprietà seguita da due punti quindi da un
valore seguito da un punto e virgola. I due punti e il punto e virgola possono
essere seguiti da zero o più spazi. In quasi tutti i casi, un valore è una singola
parola chiave o un elenco separato da spazi di più parole chiave consentite per
quella proprietà. Se si utilizza una proprietà o un valore errati in una
dichiarazione, l'intera dichiarazione verrà ignorata. Pertanto, le seguenti due
dichiarazioni fallirebbero:

dimensione: 2cm;
color: rosso;

La prima dichiarazione fallirebbe perché si tratta di una proprietà che non è

riconosciuta dai browser, infatti, tutte le proprietà utilizzano nomi in inglese. La
seconda dichiarazione fallirebbe perché il valore usato è sconosciuto, infatti,
anche per i colori si utilizzano i nomi inglesi o dei codici in RGB che
approfondiremo in seguito.

In un'istanza in cui è possibile utilizzare più di una parola chiave per il valore di
una proprietà, le parole chiave sono generalmente separate da spazi. Non tutte le
proprietà possono accettare più parole chiave, ma molte, come la proprietà font,
possono farlo. A tal proposito riprendiamo l’esempio usato nel capitolo
precedente:

h1 {
color: darkred;
font: 2em Times, serif;
background: yellow;
}

Nota bene che vi è uno spazio tra 2em e Times, il primo è la dimensione del
carattere e il secondo è il nome del font da usare. Lo spazio consente al browser
di distinguere tra le due parole chiave e applicarle correttamente. Il punto e
virgola indica che la dichiarazione è stata conclusa. Queste parole separate da
spazi vengono chiamate parole chiave perché insieme, formano il valore della
proprietà in questione.

Raggruppare più elementi

Finora abbiamo appreso tecniche abbastanza semplici per applicare un singolo

stile a un singolo selettore. Ma cosa succede se si desidera applicare lo stesso
stile a più elementi? In tal caso, ti consigliamo di utilizzare più di un selettore o
applicare più di uno stile a un elemento o gruppo di elementi. Supponiamo che
tu voglia selezionare gli elementi h2 e i paragrafi del documento assegnandogli il
colore blu. Il modo più semplice è utilizzare la seguente dichiarazione:

h2, p {color: blue;}

Posizionando i selettori h2 e p sul lato sinistro della regola e separandoli con una
virgola, hai definito una regola in cui lo stile a destra (colore: blu;) si applica agli
elementi a cui fanno riferimento entrambi i selettori. La virgola indica al browser
che ci sono due diversi selettori coinvolti nella regola.

Non ci sono limiti al numero di selettori che è possibile raggruppare, ad

esempio, se si desidera visualizzare un numero elevato di elementi in blu, è
possibile utilizzare qualcosa come la seguente regola:
body, h1, h2, h3, h4, p {color: blue;}

Questo ci consente di risparmiare tempo e dimensioni del file infatti questa

regola è l’equivalente di 6 regole con dichiarazione uguale ma diverso selettore.
Sarebbe infatti uguale a:

body {color: blue;}

h1 {color: blue;}
h2 {color: blue;}
h3 {color: blue;}
h4{color: blue;}
p {color: blue;}

CSS ha anche un selettore chiamato selettore universale, visualizzato come un

asterisco (*). Questo selettore corrisponde a qualsiasi elemento, proprio come un
carattere jolly. Ad esempio, per rendere rosso ogni singolo elemento in un
documento, dovresti scrivere:

* {color: red;}

Questa dichiarazione equivale a un selettore raggruppato che elenca ogni singolo

elemento contenuto nel documento. Il selettore universale consente di assegnare
il valore di colore rosso a tutti gli elementi del documento in un’unica regola, in
modo molto efficiente. Attenzione, sebbene il selettore universale sia utile, può
avere conseguenze non intenzionali, di cui parleremo successivamente.

Poiché è possibile raggruppare i selettori in un'unica regola, ne consegue che è

anche possibile raggruppare le dichiarazioni. Abbiamo già visto questo caso con
la regola:
h1 {
font: 2em Times, serif;
color: darkred;
background: yellow;
}

Questa regola infatti equivale a:

h1 {font: 2em Times, serif;}

h1 {color: darkred;}
h1 {background: yellow;}

Tieni presente che l'utilizzo del punto e virgola alla fine di ogni dichiarazione è
fondamentale quando le raggruppi. I browser ignorano gli spazi bianchi nei fogli
di stile e fanno affidamento sulla sintassi corretta per analizzare il foglio di stile.
Proviamo ad omettere un punto e virgola ovvero un carattere di terminazione per
vedere cosa succede:

h1 {
font: 2em Times, serif;
color: darkred
background: yellow;
}

Come vedi la dichiarazione color non è stata terminata e poiché background: non
è un valore valido per la proprietà color perché accetta una sola parola chiave, il
browser ignorerà completamente la dichiarazione del colore (inclusa quella dello
sfondo). Il browser potrebbe rendere h1 come testo rosso scuro senza uno sfondo
giallo o, in modo più probabile, non otterrai nemmeno h1 di colore rosso scuro.
Verrebbe usato in tal caso il colore predefinito (che di solito è nero) senza
sfondo. La dichiarazione sul font, invece, avrà effetto poiché è stata
correttamente terminata con un punto e virgola.

Sebbene non sia tecnicamente necessario seguire l'ultima dichiarazione di una

regola con un punto e virgola, è generalmente buona norma farlo. Innanzitutto,
manterrai l'abitudine di terminare le tue dichiarazioni con punti e virgola, la
mancanza della quale è una delle cause più comuni di errori in fase di rendering.
In secondo luogo, se decidi di aggiungere un'altra dichiarazione a una regola,
non dovrai preoccuparti di dimenticare di inserire un punto e virgola aggiuntivo.
Evita tutti questi problemi: usa sempre una dichiarazione seguita da un punto e
virgola, ovunque appaia la regola.

Adesso possiamo provare a combinare i raggruppamenti usando più

dichiarazioni e più selettori in un unico blocco:

h1, h2, h3, h4, h5, h6, p {

color: gray;
background: white;
padding: 0.5em;
}

Hai raggruppato i selettori, quindi gli stili sul lato destro della regola verranno
applicati a tutte le intestazioni elencate così come a tutti i paragrafi. Raggruppare
le dichiarazioni significa che tutti gli stili elencati verranno applicati ai selettori
sul lato sinistro della regola.
 Capitolo 4
Classi e ID

Finora abbiamo raggruppato i selettori e le dichiarazioni in vari modi, ma i

selettori che abbiamo utilizzato sono ancora semplici e si riferiscono solo agli
elementi del documento. Ci può andare bene questo approccio ma probabilmente
ci sono momenti in cui hai bisogno di qualcosa di un po' più specifico. Oltre agli
elementi HTML del documento, esistono altri due tipi di selettori: selettori di
classe e selettori di ID, che consentono di assegnare gli stili in modo
indipendente dagli elementi del documento.

 Selettori di classe

Questi selettori possono essere utilizzati da soli o in combinazione con i selettori

di elementi. Tuttavia, funzionano solo se hai eseguito il markup del documento
in modo appropriato quindi usarli, in genere, richiede un po' di pianificazione.
Ad esempio, supponiamo che stiate creando una pagina di un giornale con
diversi articoli, alcuni di essi sponsorizzati. Si desidera che il titolo di un articolo
sponsorizzato sia in grassetto in modo che risulti evidente. Potremmo usare una
delle regole precedenti con tutti i selettori da h1 a h6 ma in questo modo
selezioneremmo tutti i titoli nella pagina, non sono solo quelli sponsorizzati.
Pertanto, la regola creata utilizzando selettori semplici, non ci può essere
d’aiuto:

h1, h2, h3, h4, h5, h6 {font-weight: bold;}

Tutti i titoli sarebbero in grassetto, non solo quelli sponsorizzati. È necessario un

modo per selezionare solo i titoli degli articoli sponsorizzati, come si può fare? È
possibile applicare gli stili a parti del documento che sono state contrassegnate in
un certo modo, indipendentemente dagli elementi coinvolti, utilizzando i
selettori di classe. Il modo più comune per applicare gli stili senza preoccuparsi
degli elementi coinvolti è usare i selettori di classe ma prima di poterli utilizzare
è necessario modificare il markup del documento effettivo in modo che i
selettori di classe funzionino. È necessario usare l'attributo class:

<h1 class="sponsorizzato">Super offerta</h1>

Per associare gli stili di un selettore di classe a un elemento, è necessario

assegnare un attributo di classe con il valore appropriato. Nel codice precedente,
l’attributo class è stato assegnato all’elemento h1. Gli articoli sponsorizzati
potrebbero usare anche elementi diversi da h1 quindi useremo il valore * per
imporre il grassetto a tutti gli elementi con la classe sponsorizzato. Nei
documenti HTML, è possibile utilizzare una notazione molto compatta in cui il
nome di una classe è preceduto da un punto (.) e può essere unito con un
semplice selettore:

*.sponsorizzato {font-weight: bold;}

Come puoi vedere, il selettore di classe funziona facendo riferimento ad un

valore che si troverà nell'attributo di classe di un elemento. Questo riferimento è
sempre preceduto da un punto (.), che lo contrassegna come selettore di classe. Il
punto aiuta a mantenere il selettore di classe separato da qualsiasi cosa con cui
potrebbe essere combinato, come un selettore di elementi. Ad esempio, potresti
volere il testo in grassetto solo quando si tratta di una intestazione di primo
livello:

h1.sponsorizzato {font-weight: bold;}

Il selettore ora corrisponde a tutti gli elementi h1 che hanno un attributo class
contenente la parola sponsorizzato, ma nessun altro elemento di alcun tipo,
classificato o meno. Il selettore h1.sponsorizzato si traduce in: "Qualsiasi titolo
principale il cui attributo class contenga la parola sponsorizzato ". Possiamo
verificare questa regola aggiungendo alla pagina la regola:

h3.sponsorizzato {font-weight: bold;}

Nella sezione precedente, ci siamo occupati dell’attributo class che conteneva
una sola parola ovvero una sola classe di stile. In HTML, è possibile avere un
elenco di classi separato da spazi come valore dell’attributo class.

Ad esempio, se si desidera contrassegnare un elemento sponsorizzato e con

doppio bordo, è possibile scrivere:

<h1 class="sponsorizzato doppio_bordo">Super offerta</h1>

Non è importante specificare l’ordine in questo caso perché non ci sono
proprietà uguali negli stili. Nel caso in cui ci sia la stessa proprietà in entrambe
le classi, prevale l’ultima inserita come abbiamo già visto con il concetto di fogli
di stile a cascata.

Se un selettore di più classi contiene un nome che non è separato da spazi, il

browser non sarà in grado di riconoscerlo.

Considera la seguente regola:

p.warning.help {background: red;}

Come ci si aspetterebbe, il selettore abbinerà solo quegli elementi p con class

contenente le parole warning e help.

 Selettori di ID

I selettori di ID, in un certo senso, sono simili ai selettori di classe, ma ci sono

alcune differenze importanti. Innanzitutto, i selettori ID sono preceduti dal
simbolo cancelletto (#) anziché da un punto. Pertanto, potresti vedere una regola
come questa:

*#primo-paragrafo {font-weight: bold;}

Questa regola applica il testo in grassetto a qualsiasi elemento il cui attributo id

abbia valore pari a primo-paragrafo. La seconda differenza è che invece di fare
riferimento ai valori dell'attributo class, i selettori di ID fanno riferimento ai
valori trovati nell’attributo id. Ecco un esempio tenendo a mente la regola
definita poco prima:

<p id="primo-paragrafo">Questo paragrafo è in grassetto.</p>

<p>Questo paragrafo non è in grassetto.</p>
<p>Questo paragrafo non è in grassetto.</p>
<p id="primo-paragrafo">Questo paragrafo è in grassetto.</p>
<p>Questo paragrafo non è in grassetto.</p>
<p>Questo paragrafo non è in grassetto.</p>

Devi notare che il valore primo-paragrafo è stato assegnato a più di un elemento

all'interno del documento. In questo caso particolare, viene applicato al primo e
al quarto paragrafo ma avresti potuto applicarlo anche al secondo o al terzo
paragrafo. Come per i selettori di classe, è possibile omettere il selettore
universale da un selettore di ID. La regola precedente può essere riscritta in
questo modo ottenendo lo stesso effetto:

#primo-paragrafo {font-weight: bold;}

Ora che conosciamo entrambi, sorge spontanea una domanda: quando dobbiamo
usare il selettore di classe? E quando quello di ID?

È possibile assegnare delle classi a qualsiasi numero di elementi, come

dimostrato in precedenza; gli id, d'altra parte, vengono utilizzati una sola volta
all'interno di un documento HTML. Pertanto, se si dispone di un elemento con
un valore id pari a primo-paragrafo, nessun altro elemento in quel documento
può avere un valore uguale per l’attributo id. Probabilmente ti starai chiedendo
se abbiamo commesso un errore nell’usare più volte lo stesso id.

Nel mondo reale, i browser di solito non verificano l'univocità degli id in

HTML, il che significa che possono essere usati in un documento HTML con più
elementi. Il risultato probabilmente sarà quello che ci aspettiamo ovvero lo
stesso stile verrà applicato a ciascuno di essi. Questo è un comportamento errato
ma purtroppo si ritrova spesso. Avere più di uno stesso valore id in un
documento rende anche più difficile lo scripting DOM, poiché funzioni
JavaScript come getElementById() dipendono dal fatto che ci sia uno e un solo
elemento con un determinato valore id.

Alla luce di quanto evidenziato, a differenza dei selettori di classe, i selettori ID

non possono essere combinati, poiché gli attributi ID non consentono un elenco
di parole separato da spazi. La notazione hash-ID (ad esempio, #primo-
paragrafo) funzionerà in qualsiasi linguaggio del documento che ha un attributo
che impone l'univocità all'interno di un documento. L'unicità può essere
applicata con un attributo chiamato id, o su qualsiasi altra cosa, purché il
contenuto dell'attributo sia definito come unico nel documento. Un'altra
differenza tra i nomi di classe e ID è che gli ID hanno un peso maggiore quando
si tenta di determinare quali stili devono essere applicati a un determinato
elemento. Come per le classi, anche gli ID possono essere selezionati
indipendentemente da un elemento. Potrebbero esserci circostanze in cui sai che
un determinato ID apparirà in un documento, ma non conosci l'elemento su cui
apparirà, quindi ti consigliamo di dichiarare dei selettori ID autonomi. Ad
esempio, potresti assumere che in ogni pagina di un certo tipo, ci sarà un
elemento con un valore id pari a moltoImportante. Non sai se sarà un paragrafo,
una breve frase, un elemento dell'elenco o un'intestazione di sezione. Sai solo
che esisterà in ogni documento, si presenterà in un elemento arbitrario e non
apparirà più di una volta. In tal caso, dovresti scrivere una regola come questa:

#moltoImportante {color: red; background: yellow;}

Questa regola corrisponderebbe a uno dei seguenti elementi (che, come ho

notato prima, non dovrebbero apparire insieme nello stesso documento perché
hanno tutti lo stesso valore id):

<h1 id="moltoImportante">Questo è importante!</h1>

<p id="moltoImportante">Questo è importante!</p>
<ul id="moltoImportante">Questo è importante!</ul>

Un altro aspetto importante sia per i selettori di classe che per ID consiste nella
distinzione tra maiuscole e minuscole, a seconda della “lingua” del documento.
In HTML si definiscono i valori di classe e ID in modo che facciano distinzione
tra maiuscole e minuscole, quindi le lettere maiuscole e minuscole dei valori di
classe e ID devono corrispondere a quelle nella pagina. Pertanto, nel seguente
accoppiamento di CSS e HTML, l'elemento h1 non sarà di colore rosso su
sfondo giallo:

#MoltoImportante {color: red; background: yellow;}


<h1 id="moltoImportante">Questo è importante!</h1>

Selettori di attributi

Quando si tratta di selettori di classi e ID, ciò che stai realmente facendo è
selezionare i valori degli attributi. Se desideri selezionare elementi con un
determinato attributo, indipendentemente dal suo valore, puoi utilizzare un
semplice selettore di attributi. Ad esempio, per selezionare tutti gli elementi h1
che hanno un attributo class con qualsiasi valore e rendere il loro testo verde, è
sufficiente la seguente regola:

h1[class] {color: green;}

In questo modo tutti i seguenti elementi verrebbero selezionati e assumerebbero

un colore verde:

<h1 class="super">Supertitolo</h1>
<h1 class="help">Aiuto</h1>
<h1 class="grande">Intestazione</h1>

Nei documenti HTML, è possibile utilizzare questa funzione in vari modi

creativi. Ad esempio, potresti dare uno stile a tutte le immagini che hanno un
attributo alt, evidenziando così quelle immagini che sono disponibili anche per
gli ipovedenti:

img[alt] {border: 3px solid red;}

Allo stesso modo, potresti applicare uno stile solo a quegli elementi di tipo <a>
che hanno un attributo href. È anche possibile usare più di un attributo per
selezionare degli elementi, infatti, puoi concatenare i selettori. Ad esempio, per
evidenziare in grassetto il testo di qualsiasi ipertesto HTML che abbia sia un
attributo href che un titolo, dovresti scrivere:

a[href][title] {
font-weight: bold;
}

Questo metterebbe in grassetto il primo collegamento nel seguente markup, ma

non il secondo ed il terzo:

<a href="http://www.google.it" title="Homepage di Google">Google</a>

<a href="http://www.facebook.com">Facebook</a>
<a title="Link non valido">amazon.it</a>

Oltre a selezionare elementi con attributi, è possibile restringere ulteriormente il

processo di selezione per includere solo quegli elementi i cui attributi hanno un
certo valore. Ad esempio, supponiamo che tu voglia evidenziare in grassetto
qualsiasi collegamento ipertestuale che punta ad un determinato documento sul
tuo server web o sito Web esterno, ad esempio, Google.

Questo potrebbe essere scritto in questo modo:

a[href="http://www.google.it"] {
font-weight: bold;
}

È possibile specificare qualsiasi combinazione di attributo e valore per qualsiasi

elemento. Tuttavia, se quella combinazione esatta non appare nel documento, il
selettore non corrisponderà a nulla quindi lo stile non verrà applicato a nessun
elemento.

Come prima è possibile combinare più condizioni, infatti, se volessimo

selezionare tutti i collegamenti alla homepage di Google con titolo pari a
Homepage di Google sarebbe sufficiente scrivere:

a[href="http://www.google.it"][title="Homepage di Google"] {
font-weight: bold;
}

Per qualsiasi attributo che accetta un elenco di parole separato da spazi, è

possibile usare un selettore in base alla presenza di una di quelle parole.
L'esempio classico in HTML è l'attributo class, che può accettare una o più
parole come valore. Considera questo esempio:

<h1 class="sponsorizzato doppio_bordo">Super offerta</h1>

Supponiamo che tu voglia selezionare elementi il cui attributo class contenga la

parola sponsorizzato. Puoi farlo con un selettore di attributi:

h1[class~="sponsorizzato"] {
font-weight: bold;
}

In questo caso la presenza della tilde (~) nel selettore è la chiave. In questo modo
la selezione è basata sulla presenza di una parola separata dallo spazio all'interno
del valore dell'attributo. Omettendo la tilde, si avrebbe un requisito di
corrispondenza con valore esatto, come discusso nella sezione precedente.

Questo selettore è equivalente alla notazione di classe discussa in precedenza,

infatti, h1.sponsorizzato e h1[class~="sponsorizzato"] sono equivalenti. Ma se
sono equivalenti, perché preoccuparsi del selettore di attributi con la tilde in
HTML? Perché può essere utilizzato per qualsiasi attributo, non solo per le
classi. Ad esempio, potresti avere un documento che contiene un numero di
immagini, solo alcune delle quali sono illustrazioni. È possibile utilizzare un
selettore di attributi con valore parziale mirato al testo del titolo per selezionare
solo quelle con titolo Illustrazione:

img[title~="Illustrazione"] {
border: 1px solid gray;
}

Questa regola selezionerà qualsiasi immagine il cui testo del titolo contenga la
parola Illustrazione. Pertanto, tutte le tue immagini che hanno un testo del titolo
che assomiglia a "Illustrazione 32. Un esempio di modello 3D" verranno
selezionate da questa regola. Qualsiasi immagine senza un attributo del titolo o il
cui valore del titolo non contiene la parola Illustrazione non sarà selezionata.

Esistono anche altri modi per selezionare degli elementi infatti è possibile
selezionare ogni elemento con attributo nome e valore che inizia con Pippo.
Questo è possibile con la seguente regola:

[nome^="Pippo"] {}

Potremmo selezionare elementi con attributo nome i cui valori finiscano con
Pippo tramite la regola:

[nome$="Pippo"] {}

Infine, possiamo cercare delle sottostringhe nel valore di un attributo.

Assumiamo di voler selezionare gli elementi con attributo nome che contiene il
valore Pippo:

[nome*="Pippo"] {}

Come puoi immaginare, ci sono molte applicazioni per tali selettori. Ad

esempio, supponiamo che tu abbia voluto applicare uno stile speciale a qualsiasi
link che punta ad un sito esterno con cui sei in collaborazione. Invece di
classificarli tutti e scrivere stili basati su quella classe, potresti semplicemente
scrivere la seguente regola:

a[href*="sitoaffiliato.it"] {
font-weight: bold;
}

E, naturalmente, non sei limitato agli attributi class e href. Qualsiasi attributo è
disponibile per essere usato title, alt, src, id ecc.
 Capitolo 5
Struttura di una pagina

Come accennato in precedenza, CSS è uno strumento potente perché utilizza la

struttura dei documenti HTML per determinare gli stili appropriati e come
applicarli. La struttura gioca un ruolo molto più grande nel modo in cui gli stili
vengono applicati ad un documento. Dedichiamo un momento a discutere la
struttura prima di passare a forme di selezione più avanzate. Per comprendere la
relazione tra selettori e documenti, è necessario esaminare ancora una volta la
struttura dei documenti.

Considera questo documento HTML molto semplice:

<html>
<head>
<title>SuperShop</title>
</head>
<body>
<h1><em>SuperShop</em></h1>
<p>
Benvenuto in <em>SuperShop</em>, il <strong>più grande rivenditore su
<a href="http://www.ebay.it">Ebay</a></strong>!</p>
<ul>
<li>Ti offriamo:
<ul>
<li><strong>Informazioni dettagliate</strong> sui prodotti</li>
<li>Spedizione veloce</li>
<li><em>Originalità</em> dei nostri prodotti</li>
 </ul>
</li>
<li>...e molto altro!</li>
</ul>
<p>
Hai dubbi? <a href="mailto:rivenditore@ebay.it">Contattaci!</a>
</p>
</body>
</html>

Gran parte della forza dei CSS si basa sulla relazione degli elementi genitore-
figlio. I documenti HTML si basano su una gerarchia di elementi, che è
rappresentabile come un "albero" del documento. La radice dell’albero sarà il
nodo <html> con due figli <head> e <body>. A sua volta <body> contiene
diversi figli: <h1>, <p>, <ul> e un altro <p>.

In questa gerarchia, ogni elemento si adatta da qualche parte alla struttura

generale del documento. Ogni elemento nel documento è il genitore o il figlio di
un altro elemento ma è spesso sia genitore che figlio. Si dice che un elemento è
il genitore di un altro elemento se appare direttamente sopra quell'elemento nella
gerarchia del documento. Ad esempio, il primo elemento p è genitore
dell'elemento em e degli elementi strong, mentre strong è genitore di un
elemento a. Al contrario, un elemento è figlio di un altro elemento se si trova
direttamente sotto l'altro elemento. Pertanto, l'elemento a è figlio dell'elemento
strong, che a sua volta è figlio dell'elemento p, e così via. I termini padre e figlio
sono applicazioni specifiche dei termini antenato e discendente e sussiste una
differenza tra loro: nella vista ad albero, se un elemento è esattamente un livello
sopra un altro, hanno una relazione genitore-figlio. Se il percorso da un elemento
a un altro continua attraverso due o più livelli, gli elementi hanno una relazione
antenato-discendente, ma non una relazione genitore-figlio. Il primo elemento ul
è genitore di due elementi li, ma il primo ul è anche l'antenato di ogni elemento
discendente dal suo elemento li, fino agli elementi li più nidificati. L'elemento
body è un antenato di tutto ciò che il browser visualizzerà per impostazione
predefinita e l'elemento html è antenato dell'intero documento. Per questo
motivo, l'elemento html è anche chiamato elemento root o radice.
 Selettori discendenti

Il primo vantaggio della comprensione di questo modello è la capacità di definire

selettori discendenti (noti anche come selettori contestuali). Definire i selettori
discendenti è l'atto di creare regole che operano in determinate circostanze
strutturali ma non in altre. Ad esempio, supponiamo che tu voglia applicare uno
stile solo a quegli elementi em che discendono da elementi h1. Potresti inserire
un attributo class su ogni elemento em trovato all'interno di un h1, ma ciò
richiederebbe molto tempo. Ovviamente è molto più efficiente dichiarare delle
regole che corrispondono solo a elementi em che si trovano all'interno di
elementi h1.

La regola in questione è la seguente:

h1 em {color: gray;}

Questa regola renderà grigio qualsiasi testo in un elemento em che discende da

un elemento h1. Altro testo em, come quello trovato in un paragrafo o in una
citazione, non sarà selezionato da questa regola.

In una regola di stile di questo tipo la parte sinistra è composta da due o più
selettori separati da spazi.

Lo spazio tra i selettori è un esempio di combinatore. Ogni combinatore di spazi

può essere tradotto con "trovato dentro" o "che è un discendente di", ma solo se
leggi il selettore da destra a sinistra. Pertanto, h1 em può essere tradotto come
"Qualsiasi elemento em che discende da un elemento h1".

Non sei limitato ad usare solo due selettori nella parte sinistra di questa regola di
stile, infatti, puoi combinare diversi elementi per formare la regola che cerchi. È
ovvio che quanti più selettori aggiungi, tanto più specifica sarà la regola.
Supponiamo di avere un documento con una barra laterale e un'area principale.
La barra laterale ha uno sfondo blu, l'area principale ha uno sfondo bianco ed
entrambe le aree includono elenchi di collegamenti. Non puoi impostare tutti i
link di colore blu perché sarebbero impossibili da distinguere nella barra laterale.
La soluzione consiste nell’usare i selettori discendenti. In questo caso puoi
assegnare alla cella della tabella che contiene la barra laterale una class pari a
sidebar ed assegnare all'area principale una class pari a main. Quindi il tuo file
CSS sarà qualcosa simile a:

td.sidebar {background: blue;}

td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}

Il risultato che ci aspettiamo è qualcosa di simile a questa pagina:

La pagina HTML sarà così strutturata:

<html>
<head>
 <title>Tabella colorata</title>
<style>
table {border: 1px solid black;}
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
</style>
</head>
<body>
<h2>Collegamenti utili</h2>
<table>
<tr>
<td class="sidebar">
<a href="www.sito1.it">www.sito1.it</a><br>
<a href="www.sito2.it">www.sito2.it</a><br>
<a href="www.sito3.it">www.sito3.it</a><br>
<a href="www.sito4.it">www.sito4.it</a><br>
<a href="www.sito5.it">www.sito5.it</a><br>
</td>
<td class="main">
Questi sono alcuni collegamenti utili <br>per la tua ricerca, per altri
risultati ti <br>invitiamo a cercare su
<a href="www.miosito.it">miosito.it</a>
</td>
</tr>
</table>
</body>
</html>
 Selettori di figli

In alcuni casi, non si desidera selezionare un elemento discendente in modo

arbitrario, piuttosto, si desidera restringere l'intervallo per selezionare un
elemento figlio di un altro elemento. Ad esempio, potresti voler selezionare un
elemento strong solo se è un figlio (al contrario di un discendente) di un
elemento h1. Per fare ciò, puoi usare il combinatore figlio, con il simbolo
maggiore di (>):

h1 > strong {color: red;}

Riesci ad individuare quale elemento del seguente codice diventerà rosso? Scegli
quella corretta tra le varie opzioni.

Opzione 1:

<div>
<h1>Il titolo</h1>
<p>è <strong>davvero</strong> importante</p>
</div>
Opzione 2:

<h1>Questo è <strong>molto</strong> importante.</h1>

Opzione 3:

<h1>Questo è
<em>davvero <strong>molto</strong></em>
importante.
</h1>

La regola che abbiamo definito farà diventare rosso il testo contenuto
nell’elemento strong dell’opzione 2. Leggendo da destra verso sinistra, il
selettore h1 > strong si traduce in "seleziona qualsiasi elemento strong che è
figlio di un elemento h1". Il combinatore figlio è facoltativamente circondato da
spazi bianchi infatti puoi liberamente omettere oppure usare gli spazi. Le
seguenti regole sono equivalenti:

h1 > strong

h1> strong

h1>strong

h1 >strong

Quando si visualizza il documento come una struttura ad albero, è facile vedere

che un selettore figlio limita le sue corrispondenze agli elementi direttamente
collegati nella struttura. Vediamo come è fatta la struttura ad albero dell’opzione
1 che è la più articolata:

 Selettore di figli adiacenti

Supponiamo che tu voglia assegnare uno stile al paragrafo immediatamente dopo

un'intestazione o dare un margine speciale ad un elenco che segue
immediatamente un paragrafo. Per selezionare un elemento che segue
immediatamente un altro elemento con lo stesso genitore, è possibile utilizzare il
combinatore adiacente, rappresentato con il simbolo più (+). Come nel caso del
combinatore figlio, il simbolo può essere circondato da spazi bianchi a
discrezione dello sviluppatore. Per rimuovere il margine superiore da un
paragrafo immediatamente successivo a un elemento h1, è sufficiente scrivere:

h1 + p {margin-top: 0;}

Il selettore viene letto come "seleziona qualsiasi paragrafo che segue

immediatamente un elemento h1 che condivide un genitore con l'elemento p".
Per capire come funziona questo selettore, facciamo un esempio:

<div>
<p>Lista ordinata</p>
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
Lista non ordinata
<ul>
<li>Elemento</li>
<li>Elemento</li>
 <li>Elemento</li>
</ul>
</div>
In questo frammento, una coppia di elenchi discende da un elemento div, uno è
ordinato e l'altro no, ciascuno contenente tre voci di elenco. Ogni elenco è un
fratello adiacente e gli stessi elementi dell'elenco sono anche fratelli adiacenti tra
loro. Tuttavia, gli elementi del primo elenco non sono fratelli degli elementi del
secondo elenco, poiché i due set non condividono lo stesso elemento padre, al
massimo possono essere considerati cugini. Ricorda che puoi selezionare il
secondo dei due fratelli adiacenti con un singolo combinatore, quindi, scrivendo
li + li {font-weight: bold;}, solo il secondo e il terzo elemento di ciascun elenco
saranno in grassetto ed i primi elementi dell'elenco non saranno interessati. Per
poter funzionare correttamente i CSS richiedono che i due elementi compaiano
in "ordine sorgente". Nel nostro esempio, un elemento ol è seguito da un
elemento ul. Ciò consente di selezionare il secondo elemento con ol + ul, ma non
è possibile selezionare il primo utilizzando la stessa sintassi. Affinché ul + ol
corrisponda, un elenco ordinato deve seguire immediatamente un elenco non
ordinato.

Il contenuto del testo tra due elementi non impedisce il funzionamento del
combinatore fratello-fratello adiacente. Anche se c'è del testo tra i due elenchi,
puoi comunque abbinare il secondo elenco con il selettore ol + ul. Questo perché
il testo intermedio non è contenuto con un elemento fratello, ma fa invece parte
del div padre. Se si racchiuesse quel testo in un elemento di paragrafo, si
eviterebbe che ol + ul corrisponda al secondo elenco. Invece, potresti dover
scrivere qualcosa come ol + p + ul.

Capitolo 5
 Pseudo-classi

Ci sono aspetti davvero interessanti con i selettori di pseudo-classe, infatti, ti

consentono di assegnare stili a strutture che non esistono necessariamente nel
documento, o a classi “fantasma” dedotte dallo stato di alcuni elementi o persino
dallo stato del documento stesso. In altre parole, gli stili vengono applicati a
parti di un documento basati su qualcosa di diverso dalla struttura del documento
e in un modo che non può essere dedotto con precisione semplicemente
studiando il markup del documento. Può sembrare di applicare stili a caso, ma
non è così, si tratta di applicare stili basati su condizioni che non possono essere
previste in anticipo. Tuttavia, le circostanze in cui appariranno gli stili sono, in
effetti, ben definite. Facciamo un esempio: durante un evento sportivo, ogni
volta che la squadra di casa segna, la folla esulta. Non sai esattamente quando
durante una partita la squadra segnerà, ma quando lo farà, la folla esulterà,
proprio come previsto. Il fatto che non sia possibile prevedere il momento della
causa non rende l'effetto meno prevedibile.

I selettori di pseudo-classe sono supportati dalla maggior parte dei browser e

quindi più ampiamente utilizzati. Considera l'elemento a, che, in HTML,
stabilisce un collegamento da un documento all'altro. A volte questi collegamenti
si riferiscono a pagine che hai già visitato, altre volte si riferiscono a pagine che
non sono ancora state visitate. Non puoi saperlo semplicemente guardando il
markup HTML, perché nel markup, tutti i collegamenti sembrano uguali.
L'unico modo per sapere quali collegamenti sono stati visitati è tramite il
confronto dei collegamenti in un documento con la cronologia del browser
dell'utente. In realtà ci sono due tipi di collegamenti di base: visitati e non
visitati. Questi tipi sono noti come pseudo-classi e i selettori che li utilizzano
sono chiamati selettori di pseudo-classe. Per comprendere meglio queste classi e
questi selettori, considera come si comportano i browser in relazione ai link. Per
convenzione i collegamenti alle pagine che non sono stati visitati sono di colore
blu, mentre, i collegamenti alle pagine già visitate sono rossi (il rosso è diventato
viola nei browser successivi a partire da Internet Explorer). Questo
comportamento può essere modificato infatti possiamo intercettare questi eventi
come segue:

a.visitato {color: green;}

In questo caso abbiamo aggiunto una classe di stile per far diventare verde ogni
link con la classe visitato. Tuttavia, un tale approccio richiede che le classi sui
collegamenti cambino ogni volta che visiti una nuova pagina, il che è un po'
complicato. CSS a questo proposito definisce delle pseudo-classi che fanno sì
che i link alle pagine visitate si comportino come se avessero class pari a
visitato:

a:visited {color: green;}

Ora, qualsiasi link che punti a una pagina visitata sarà verde e non dovrai
nemmeno aggiungere attributi di classe ai link. Nota bene che per usare pseudo-
classi sono necessari i due punti (:) nella regola. I due punti servono per separare
a e visited, quindi, tutte le parole chiave di pseudo-classe sono precedute da due
punti.

CSS definisce tre pseudo-classi che possono modificare l'aspetto di un

documento a causa del comportamento dell'utente. Queste pseudo-classi
dinamiche sono state tradizionalmente utilizzate per definire i collegamenti
ipertestuali, ma le possibilità sono molto più ampie. Vediamo quali sono e a cosa
servono:

:focus Si riferisce a qualsiasi

 elemento che attualmente ha
il focus di input, cioè, può
accettare l'input da tastiera o
essere attivato in qualche
modo.
:hover Si riferisce a qualsiasi
elemento su cui è posizionato
il puntatore del mouse, ad
esempio un collegamento
ipertestuale su cui è
posizionato il puntatore del
mouse.
:active Si riferisce a qualsiasi
elemento che è stato attivato
dall'input dell'utente, ad
esempio un collegamento
ipertestuale su cui un utente
fa clic durante il tempo in cui
il pulsante del mouse viene
tenuto premuto.

Sicuramente durante la navigazione sul Web avrai già incontrato queste regole di
stile ma forse non lo sapevi. Immagina un sito Web con un menu, quando
posizioni il puntatore del mouse ogni voce del menu passa dal colore grigio al
colore nero. Questo è un classico uso di :hover.

È da notare che le pseudo-classi dinamiche possono essere applicate a qualsiasi

elemento, il che è positivo poiché è spesso utile applicare stili dinamici a
elementi che non sono collegamenti, pensa agli elementi di input per esempio.
Puoi pensare di cambiare lo sfondo di una casella di input, quando selezionata
dall’utente, grazie alla pseudo-classe :focus.
 Capitolo 6
Valori ed unità

Le proprietà CSS hanno bisogno di valori ed unità: le unità influenzano i colori,

le distanze e le dimensioni di un'intera serie di proprietà. Senza unità, non
potresti dichiarare che un paragrafo deve essere viola, o che un'immagine
dovrebbe avere 10 pixel di spazio vuoto attorno ad essa o che il testo di
un'intestazione dovrebbe avere una dimensione specifica. Un altro esempio è
costituito dai colori che sino ad ora abbiamo sempre rappresentato con i
rispettivi nomi inglesi (green, red, yellow…) ma se volessimo essere più
specifici?

Procediamo con ordine dalle unità più semplici: i numeri. Ci sono due tipi di
numeri nei CSS: numeri interi e numeri reali (frazioni). In CSS, un numero reale
è definito come un numero intero che è facoltativamente seguito da un numero
decimale e un numero frazionario, quindi, i seguenti valori sono validi: 15.5,
-270.00004 e 5. Sia i numeri interi che i reali possono essere positivi o negativi,
sebbene le proprietà possano (e spesso lo facciano) limitare l'intervallo di numeri
accettati.

Talvolta i numeri non sono sufficienti per indicare quanto spazio dedicare ad una
componente della pagina. Immaginiamo di voler dedicare metà pagina ad una
componente ma non sappiamo esattamente la larghezza totale. Fissare un
numero sarebbe errato perché quasi ogni utente ha una risoluzione diversa quindi
quasi ogni utente vedrebbe un layout diverso.

Un valore percentuale è un numero reale seguito da un segno di percentuale (%).

I valori percentuali sono quasi sempre relativi a un altro valore, che può essere
qualsiasi cosa, incluso il valore di un'altra proprietà dello stesso elemento, un
valore ereditato dall'elemento padre o un valore di un elemento antenato.
Qualsiasi proprietà che accetta valori percentuali definirà eventuali restrizioni
sull'intervallo di valori percentuali consentite.
 I colori

Una delle prime domande poste da ogni sviluppatore Web è: "Come posso
impostare i colori sulla mia pagina?" In HTML, hai due scelte: puoi usare il
nome di un colore in inglese, scegliendo tra un vasto elenco, come red o purple,
o utilizzare codici esadecimali. Entrambi questi metodi per descrivere i colori in
CSS risultano molto intuitivi. Supponendo che tu sia contento di scegliere da un
elenco di 140 colori di base, il metodo più semplice è semplicemente usare il
nome del colore che desideri. Contrariamente a quanto alcuni produttori di
browser potrebbero farti credere, hai un set limitato di parole chiave valide con
nome di colore. Ad esempio, non potrai scegliere la parola "ebano" perché non è
un colore definito ma potrai scegliere tra tanti altri, ecco i più usati:

Aqua Beige Black Blue Brown Coral Cyan

Gold Gray Lime Pink Red Navy Teal

I computer creano colori combinando diversi livelli di rosso, verde e blu, una
combinazione che viene spesso definita colore RGB. In effetti, se dovessi aprire
un vecchio monitor a tubi catodici per computer, scopriresti tre "pistole". Queste
pistole sparano raggi di elettroni a intensità diverse in ogni punto dello schermo.
Quindi, la luminosità di ogni raggio si combina in quei punti sullo schermo,
formando tutti i colori che vedi. Ogni punto è noto come pixel ovvero la più
piccola unità per rappresentare un’immagine digitale. Anche se la maggior parte
dei monitor in questi giorni non sono a tubi catodici, la loro resa cromatica si
basa ancora su miscele RGB. Dato il modo in cui i colori vengono creati su un
monitor, ha senso che tu possa determinare la tua miscela dei tre colori per avere
il massimo controllo. Questa soluzione è complessa, ma possibile, ne vale la
pena perché ci sono pochissimi limiti su quali colori puoi produrre. Esistono
cinque modi per far riferimento ad un colore:
 nome
rgb(valori numerici)
rgb(percentuali)
esadecimale
abbreviazione di un esadecimale

Avendo già esaminato il primo punto della lista, passiamo al secondo. RGB è
l’acronimo di Red Green Blue (rosso, verde, blu) ed indica la quantità dei tre
colori primari che desideriamo per creare il nostro colore. La quantità può essere
espressa tramite un valore intero da 0 a 255 oppure con una percentuale da 0% a
100% per ogni colore. Per indicare il colore rosso ad esempio, avremo una
tripletta di valori dove il primo sarà il valore massimo mentre gli altri saranno
pari a 0:

.paragrafo {color: rgb(255,0,0);}

.paragrafo {color: rgb(100%,0%,0%);}

Ti basterà cambiare questi valori per creare nuovi colori mischiando il rosso con
il verde ed il blu.

CSS ti permette di definire un colore usando la stessa notazione cromatica

esadecimale come per HTML e, in genere, i programmatori imparano da subito
ad usarla. Ecco come funziona: mettendo insieme tre numeri esadecimali
nell'intervallo da 00 a FF, puoi impostare un colore. La sintassi generica per
questa notazione è #RRGGBB, nota che non ci sono spazi, virgole o altri
separatori tra i tre numeri. La notazione esadecimale è matematicamente
equivalente alla notazione vista in precedenza. Ad esempio, rgb(255,255,255) è
esattamente equivalente a #FFFFFF e rgb (51,102,128) è uguale a #336680.
Sentiti libero di usare qualunque notazione tu preferisca, sarà resa identica in
qualsiasi browser. Se hai una calcolatrice che converte da decimale ad
esadecimale, la conversione dovrebbe essere piuttosto semplice, in alternativa,
esistono molti strumenti online che eseguono questa conversione per te.

Riprendiamo l’esempio precedente per mostrare un paragrafo in rosso usando

questa notazione:

.paragrafo {color: #ff0000;}

Per i numeri esadecimali composti da tre coppie di cifre abbinate, CSS consente
una notazione abbreviata. Come puoi vedere dal markup, ci sono solo tre cifre
per ogni valore di colore. Tuttavia, poiché i numeri esadecimali tra 00 e FF
richiedono due cifre ciascuno e hai solo tre cifre totali, come può capire il
browser a quale valore ti riferisci? Come funziona questo metodo? La risposta è
che il browser considera ogni cifra e la replica. In questo modo #F00 equivale a
#FF0000, #6FA sarebbe uguale a #66FFAA e #FFF equivale a #FFFFFF, che
indica il colore bianco. Ovviamente, non tutti i colori possono essere
rappresentati in questo modo. Il grigio, ad esempio, verrebbe scritto in notazione
esadecimale standard come #808080 ma non può essere scritto in forma
abbreviata. L'equivalente più vicino sarebbe #888, che è lo stesso di #888888 ma
ovviamente non si tratta dello stesso identico colore.

 Le lunghezze

Molte proprietà CSS, come i margini, dipendono dalle misurazioni della

lunghezza per visualizzare gli elementi della pagina. Non sorprende, quindi, che
ci siano diversi modi per misurare la lunghezza nei CSS. Tutte le unità di
lunghezza possono essere espresse come numeri positivi o negativi seguiti da
un'etichetta (sebbene alcune proprietà accettino solo numeri positivi). Puoi anche
usare numeri reali, ovvero numeri decimali, come 10.5 o 4.561. Tutte le unità di
lunghezza sono seguite da un'abbreviazione di due lettere che rappresenta l'unità
di lunghezza effettiva specificata, ad esempio in (pollici) o pt (punti). L'unica
eccezione a questa regola è una lunghezza 0 (zero), che non deve essere seguita
da un'unità. Queste unità di lunghezza sono divise in due tipi: unità di
lunghezza assoluta e unità di lunghezza relativa.

Le unità di lunghezza assolute sono più facili da capire, nonostante siano meno
usate nel Web design. I cinque tipi di unità assolute sono i seguenti:

Pollici (in)
Centimetri (cm)
Millimetri (mm)
Punti (pt)
Picas (pc)

Naturalmente, queste unità sono davvero utili solo se il browser conosce tutti i
dettagli del monitor su cui viene visualizzata la tua pagina, la stampante che stai
utilizzando ecc. Su un browser Web, la visualizzazione è influenzata dalle
dimensioni del monitor e dalla risoluzione su cui è impostato, e non c'è molto
che tu, come sviluppatore, possa fare su questi fattori. Puoi solo sperare che, se
non altro, le misurazioni siano coerenti l'una rispetto all'altra, ovvero che
un'impostazione di 1 pollice sarà doppia rispetto a 0,5 pollici. Esistono dei
framework basati su CSS (come Bootstrap) che consentono di rendere
responsive ogni interfaccia con molto meno sforzo ma esulano dal contesto di
questo e-book. Le unità assolute sono molto più utili nella definizione dei fogli
di stile per i documenti stampati, dove è comune misurare le distanze in pollici,
centimetri o millimetri. Come hai visto, tentare di utilizzare misure assolute nel
web design è nella migliore delle ipotesi pericoloso, quindi passiamo ad alcune
unità di misura più utili.

Le unità relative sono così chiamate perché misurate in relazione ad altro. La

distanza effettiva (o assoluta) misurata può cambiare a causa di fattori al di fuori
del loro controllo, come la risoluzione dello schermo, l'ampiezza dell'area di
visualizzazione, le impostazioni delle preferenze dell'utente e tutta una serie di
altre cose. Inoltre, per alcune unità relative, le dimensioni sono quasi sempre
relative all'elemento che le utilizza e cambieranno quindi da elemento ad
elemento. Esistono due unità di lunghezza relativa: em e px.

L’unita di misura em è semplicemente la dimensione del carattere quindi in un

elemento con un carattere 2in, 1em significa 2in. Esprimere dimensioni, come
margini e padding, in em significa che sono correlate alla dimensione del
carattere e se l'utente ha un carattere grande (ad esempio, su un grande schermo)
o un carattere piccolo (ad esempio, su un dispositivo portatile), le dimensioni
saranno proporzionate. Dichiarazioni come margin: 1em o padding: 2em sono
estremamente comuni nei CSS.

L'unità px è l'unità magica del CSS infatti non è correlata al carattere corrente e
di solito non è nemmeno correlata a centimetri o pollici. L'unità px è definita
come piccola ma visibile tale che una linea orizzontale larga 1px possa essere
visualizzata. Il px non è quindi definito come una lunghezza costante, ma come
qualcosa che dipende dal tipo di dispositivo e dal suo uso tipico. Per avere
un'idea dell'aspetto di un px, immagina un monitor degli anni '90: il punto più
piccolo che può visualizzare misura circa 1/5 di pollice (0,25 mm) o poco più.
L'unità px ha preso il nome da quei pixel dello schermo. Al giorno d'oggi ci sono
dispositivi che in linea di principio potrebbero visualizzare punti ancora più
piccoli (anche se potrebbe essere necessario una lente d’ingrandimento per
vederli). I dispositivi cambiano, ma il px ha sempre lo stesso aspetto visivo.

D'altra parte, le misure dei pixel sono perfette per esprimere la dimensione delle
immagini, che hanno già altezza e larghezza stabilite in pixel. In effetti, l'unica
volta in cui non si specificano i pixel è quando si desidera ridimensionare la
dimensione dell'immagine insieme alla dimensione del testo. Questo è un
approccio ammirevole e talvolta utile e, sarebbe davvero sensato se si usassero
immagini basate su vettori anziché immagini basate su pixel. Oggi questo è
possibile grazie alle immagini vettoriali che possono essere ingrandite senza
intaccarne la risoluzione.
 Conclusioni

I CSS consentono di stravolgere l’aspetto grafico di una pagina Web in modo

semplice e potente. Abbiamo visto come creare regole CSS che si applicano a un
gran numero di elementi simili con la stessa facilità con cui costruire regole che
si applicano in circostanze molto ristrette. La capacità di raggruppare sia i
selettori che le regole mantiene i fogli di stile compatti e flessibili, portando a
file di dimensioni inferiori e tempi di download più rapidi. Avere file CSS scritti
bene e senza errori ci consente di riusarli, con un notevole risparmio di tempo.

Ci auguriamo che questo viaggio possa essere stato d’aiuto ma voglio darti un
consiglio per diventare uno sviluppatore Web davvero bravo. Il consiglio è di
esercitarsi tanto, essendo curioso, solo così potrai stimolare la tua curiosità ed
imparare nuove funzionalità di CSS che ti saranno certamente utili. Fissa un
obiettivo, ad esempio la realizzazione di un sito Web personale o per un amico,
per un’azienda o per chi preferisci, in modo da poterti allenare e sfruttare ciò che
hai imparato.
PROGRAMMARE IN JAVASCRIPT
 Premessa

Come i linguaggi umani, anche i linguaggi informatici consentono di combinare

parole e frasi in modi nuovi, rendendo possibile esprimere concetti sempre
nuovi. In ambito informatico negli anni ‘80 e ’90 si utilizzavano terminali con
cui si interagiva con il computer quindi era fondamentale conoscere ogni
comando per poterlo eseguire. Successivamente questi programmi sono stati in
gran parte sostituiti con interfacce visive, che sono più facili da imparare ma che
offrono meno libertà. Quei comandi che venivano digitati sul terminale sono
ancora disponibili nei nostri computer ma semplicemente sono nascosti dietro un
pulsante o un click.

Per gestire le interfacce Web esistono diversi linguaggi, JavaScript ha

rivoluzionato il Web e per questo è integrato in ogni moderno browser quindi
disponibile su quasi tutti i dispositivi. JavaScript ha dato il via, inoltre, ad una
serie di framework che sono molto usati per lo sviluppo di Web App come
React, Angular e Vue.js.

Programmare può sembrare difficile e, sebbene le regole fondamentali siano

semplici e chiare, i programmi basati su tali regole tendono a diventare
abbastanza complessi tanto da introdurre regole e complessità proprie. Se non
conosci affatto la programmazione, ci sarà molto da imparare in questo ebook,
basta un po’ di sforzo, magari qualche ricerca e vedrai che diventerai anche tu un
maestro di JavaScript. Se non capisci qualcosa o se non sei sicuro, sii testardo,
devi solo continuare a lavorare per raggiungere il tuo obiettivo. Fai una pausa,
rileggi e cerca di comprendere i programmi e le nozioni che proponiamo.
L'apprendimento è un lavoro duro, ma tutto ciò che impari oggi renderà più
facile l'apprendimento di domani.

Forse ti starai chiedendo perché imparare ad usare JavaScript. La risposta è

semplice: si tratta di un linguaggio molto semplice e molto diffuso quindi molto
richiesto. Puoi creare davvero qualsiasi cosa in JavaScript, dalla logica per il tuo
sito Web ad un’applicazione che funzioni sia su Android che su iOS che su un
qualsiasi browser. JavaScript è caratterizzato da una sintassi molto snella e
concisa quindi puoi fare tantissimo in poche righe di codice come avremo modo
di vedere nei prossimi capitoli.
 Capitolo 1
Cos’è JavaScript?

JavaScript è stato introdotto nel lontano 1995 come un modo per aggiungere
programmi alle pagine Web nel browser Netscape Navigator e da allora questo
linguaggio è stato usato da tutti gli altri principali browser. Sostanzialmente
JavaScript ha aggiunto interattività alle pagine Web, rendendo possibile
interagire direttamente senza dover ricaricare la pagina ad ogni azione. Se
conosci il linguaggio di programmazione Java, è importante notare che
JavaScript non ha quasi nulla a che fare con esso infatti il nome simile è stato
ispirato da considerazioni di marketing piuttosto che dal buon senso. Quando è
stato introdotto JavaScript, Java era molto commercializzato e stava
guadagnando popolarità pertanto hanno pensato di cavalcare l’onda.

In seguito, è stato scritto un documento standard per descrivere in che modo

JavaScript debba funzionare per far sì che i vari software parlino effettivamente
la stessa lingua. Così è nato lo standard ECMAScript, a cura dell'organizzazione
Ecma International. In pratica, i termini ECMAScript e JavaScript possono
essere usati in modo intercambiabile: sono due nomi per la stessa lingua. Ci sono
state diverse edizioni di ECMAScript a partire dal 1997 e, ad ogni edizione, sono
state rilasciate interessanti funzionalità. Negli ultimi anni ci sono stati notevoli
progressi nella programmazione asincrona, apprezzata soprattutto per task lunghi
o impegnativi.

Molti tendono a disprezzare JavaScript perché spesso il suo non essere

fortemente tipizzato può creare problemi, ad esempio: "11" + 1 = "111"
mentre "11" – 1 = 10.

Anche io all’inizio tendevo a disprezzare questo linguaggio ma, dopo aver

appreso le nozioni basilari e, dopo averlo usato per un po', ho imparato ad
apprezzare davvero JavaScript e le sue potenzialità.

L’evoluzione di JavaScript induce gli sviluppatori dei browser ad aggiornare

costantemente i loro prodotti infatti spesso i browser meno recenti potrebbero
non supportare tutte le funzionalità di JavaScript. Internet Explorer, ad esempio,
non supporta tutte le funzionalità introdotte dagli ultimi standard ECMAScript
perciò se hai intenzione di sviluppare un sito compatibile con IE 11 dovrai
prestare particolare attenzione alle funzioni che usi. Puoi vedere se una funzione
è supportata da tutti i browser dal sito https://developer.mozilla.org/.

Negli ultimi anni JavaScript si è evoluto anche fuori dai browser Web infatti
alcuni database, come MongoDB e CouchDB, utilizzano JavaScript come
linguaggio di scripting e per le query. Ci sono anche diverse piattaforme per la
programmazione desktop e server, in particolare Node.js, che forniscono un
ambiente per la programmazione con JavaScript al di fuori del browser. In
questo modo potrai usare JavaScript lato server con notevole risparmio di tempo
poiché non è richiesta alcuna conversione di tipo dal momento che client e
server parlano la stessa “lingua”.
 Capitolo 2
Tipi ed operatori

Nel mondo in cui la tecnologia ci pervade è fondamentale capire quali sono i dati
da memorizzare e come è possibile farlo. I dati sono delle sequenze di bit ovvero
sequenze di due valori: 0 e 1. Questo potrebbe farti pensare al celebre film
Matrix ma, effettivamente, all’interno del tuo computer qualsiasi elemento è
rappresentato da sequenze di questo tipo. Queste sequenze di bit, in JavaScript,
sono chiamate valori e possono essere differenziati quindi alcuni sono numeri,
altri caratteri, altri funzioni ecc.

Ogni valore che deve essere memorizzato fa parte di un tipo di dati. I tipi di dati
in JavaScript sono:

number;
string;
boolean;
object;
function;
null;
undefined.
Ogni valore è memorizzato in una variabile che può passare da un tipo numerico
ad una stringa o ad un valore booleano (vero o falso) senza alcun problema.

Numeri

Possiamo definire una variabile numero in JavaScript come segue:

var numero = 10;
var numero = 10.00;

L’unica differenza tra le due dichiarazioni concerne i decimali ma si tratta a tutti

gli effetti di due variabili di tipo number.

Esistono tre valori speciali in JavaScript che sono considerati numeri ma non si
comportano come tali. I primi due rappresentano i numeri infiniti positivi e
negativi, questi sono rispettivamente Infinity e -Infinity. Questi valori ben presto
conducono al prossimo numero speciale: NaN. NaN indica che quel valore "non
è un numero", anche se è un valore di tipo numerico. Otterrai questo risultato
quando, ad esempio, provi a calcolare 0/0 (zero diviso zero), Infinity - Infinity o
qualsiasi altra operazione numerica che non produce un risultato significativo.

 Stringhe

Possiamo modificare il valore di quella stessa variabile assegnando una stringa

come segue:

numero = "10";

In questo caso abbiamo omesso la parola chiave var perché stiamo assegnando
un valore ad una variabile che è già stata dichiarata. Puoi contrassegnare una
stringa utilizzando virgolette singole, doppie o backtick (`), purché le virgolette
all'inizio e alla fine della stringa siano dello stesso tipo. Ogni volta che viene
posta una barra rovesciata (\) all'interno del testo tra virgolette, questa indica che
il carattere successivo ha un significato speciale. Una virgoletta preceduta da una
barra rovesciata non termina la stringa ma ne fa parte. Quando il carattere n
segue una barra rovesciata (\n), questo viene interpretato come l’inizio di una
nuova riga.
 Booleani e operatori logici

Possiamo assegnare il risultato di un’operazione ad una variabile. Definiremo la

variabile confronto che conterrà il valore dell’operazione 10 > 9:

var confronto = 10 > 9;

Useremo la funzione console.log() per indicare che vogliamo vedere il risultato

della valutazione. Ci basterà digitare:

console.log(confronto);

In questo caso il risultato sarà un booleano con valore true perché 10 è maggiore
di 9.

Probabilmente ti starai chiedendo dove scrivere il tuo codice JavaScript. Puoi

aprire qualsiasi browser e premendo il tasto F12 troverai una console dove puoi
scrivere il tuo codice JavaScript. Se stai progettando un sito Web, probabilmente,
avrai bisogno di un IDE come IntelliJ IDEA, Eclipse o Sublime per collegare i
file HTML, CSS e JavaScript.

Se hai esperienza nell’ambito della programmazione conoscerai già gli operatori

logici and, or e not. L’operatore and è un operatore binario (ovvero opera su due
espressioni) che restituisce true (vero) solo se la condizione alla sua sinistra e
quella alla sua destra sono entrambe vere, false (falso) in caso contrario.
L’operatore or restituisce vero se almeno uno dei valori è vero, altrimenti
restituisce falso. L’operatore not, invece, è unario (ovvero opera su una sola
espressione) e si limita ad invertire il valore quindi se applicato a true restituirà
false e viceversa. I simboli utilizzati da questi operatori sono rispettivamente
&&, || e !, vediamoli in azione:

console.log(true && true);

// -> true

console.log(true || false);
// -> true

console.log(!true);
// -> false

Esistono due valori speciali, null e undefined, che vengono utilizzati per indicare
l'assenza di un valore significativo. Sono comunque valori, ma non aggiungono
delle informazioni significative. Molte operazioni non producono un valore
significativo e la differenza di significato tra undefined e null è solo un problema
di design di JavaScript quindi ti consiglio di trattarli come equivalenti.

Esistono diversi modi con cui definire una variabile, puoi usare var per
memorizzare sia variabili che costanti, oppure, puoi distinguere tra le due
possibilità. Puoi usare let per memorizzare delle variabili e const per
memorizzare le costanti. Queste ultime due sono state introdotte con
ECMAScript 6 pertanto sono ampiamente utilizzate e supportate.

Ovviamente bisogna prestare attenzione perché una volta assegnato un valore ad

una costante non è possibile modificarlo. Se non sei sicuro di quale parola chiave
utilizzare ti consiglio di usare var in fase di apprendimento, potrai sempre
approfondire in seguito e modificare il tuo programma.
 Conversione di tipo

Adesso affrontiamo il concetto che probabilmente ti ha sconvolto maggiormente

sino ad ora. Quando abbiamo detto che in JavaScript "11" + 1 = "111" mentre
"11" - 1 = 10 probabilmente ti sarai chiesto il perché e stiamo per svelarlo.

Quando un operatore viene applicato al tipo di valore "sbagliato", JavaScript

converte quel valore nel tipo di cui ha bisogno, usando un insieme di regole che
spesso non sono quelle che ti aspetti. Questo meccanismo è detto coercizione di
tipo. Nella prima espressione, l’operatore + prova la concatenazione di stringhe
prima dell'aggiunta numerica, quindi 1 viene convertito in "1" (da numero a
stringa). Per questo motivo il risultato è la stringa contenente 111.

Quando JavaScript tenta una conversione di una stringa (come "sette" o

undefined) in un numero, ottieni il valore NaN. Se effettui altre operazioni
aritmetiche con questo valore otterrai sempre NaN pertanto controlla il risultato
ad ogni operazione e non appena trovi un valore di questo tipo, verifica tutte le
conversioni perché probabilmente c’è qualche errore.

È possibile confrontare valori dello stesso tipo usando ==, il risultato è facile da
prevedere: dovrebbe restituire vero se entrambi i valori sono uguali, tranne nel
caso di NaN. Quando i tipi differiscono, JavaScript utilizza un insieme
complicato e confuso di regole per determinare cosa fare. Nella maggior parte
dei casi, tenta solo di convertire uno dei valori nell'altro tipo di valore. Talvolta
potresti ottenere null da un lato e undefined dall’altro, presta attenzione perché:

console.log(null == undefined);
// -> true

Esiste anche un altro tipo di operatore che viene usato quando non si desidera
effettuare una conversione di tipo. La differenza tra === e == consiste proprio in
questo, il primo verifica se un valore è esattamente uguale all'altro e il secondo
verifica se non è esattamente uguale. Ti consiglio di usare l’operatore di
confronto === per evitare che conversioni di tipo impreviste ti restituiscano
valori non previsti. Tuttavia, quando sei sicuro che i tipi su entrambi i lati
dell’operatore sono gli stessi, non ci sono problemi con l'uso dell’operatore ==.

Oltre a questi è possibile usare i classici operatori aritmetici (+, -, *, / e %), di

confronto (==, !=, ===, !==, <,>, <=,> = ) e logici (&&, ||).

Infine, ma non meno importante esiste un operatore ternario che consente di

scegliere uno tra due valori basandosi su un terzo valore come se fosse un
costrutto if-else (che approfondiremo a breve).

var risultato = x == 'test' ? true : false;

In questo caso non sappiamo il valore della variabile x ma possiamo prevedere

che se è una stringa contenente la parola test il valore di risultato sarà vero
altrimenti sarà falso.

Infine, ma non meno importante, puoi verificare il tipo di una variabile o di un

valore con typeof:

console.log(typeof 3);
// -> number

console.log(typeof 'test');
// -> string
 Capitolo 3
Programmare in JS

Per poter programmare in JavaScript è fondamentale un ambiente di lavoro che

probabilmente avrai già impostato. Si tratta di file con estensione .js che
conterranno delle funzioni e che verranno eseguiti dal tuo browser.

Funzioni

Una funzione è una parte di programma racchiuso da un valore. Ad esempio, in

un browser, la funzione prompt mostra una piccola finestra di dialogo che
richiede l'input dell'utente. Puoi usarla come segue:

prompt("Inserisci il nome utente");

L'esecuzione di una funzione è detta invocazione, chiamata o applicazione. È

possibile chiamare una funzione inserendo le parentesi dopo un'espressione che
produce un valore. I valori tra parentesi vengono affidati alla funzione per essere
elaborati. Nell'esempio, la funzione prompt utilizza la stringa che gli viene
fornita come testo da mostrare nella finestra di dialogo. I valori dati alle funzioni
sono chiamati argomenti. Funzioni diverse potrebbero richiedere un numero
diverso o tipi diversi di argomenti. Anche console.log è una funzione e la
maggior parte dei sistemi JavaScript (inclusi tutti i browser e Node.js)
forniscono una funzione console.log che stampa i suoi argomenti sull’output del
dispositivo. Nei browser, l'output è di solito la console JavaScript. Questa parte
dell'interfaccia del browser è nascosta per impostazione predefinita agli utenti
ma la maggior parte dei browser la mostra quando si preme il tasto F12 o, su un
Mac, ⌘ +I. Puoi sempre cercare nel menu la voce Strumenti per gli sviluppatori
o qualcosa di simile (la voce varia in base al browser).

Le funzioni possono anche produrre dei valori, ad esempio, la funzione

Math.max accetta una quantità di argomenti numerici e restituisce il massimo tra
questi. Quando una funzione produce un valore, si dice che restituisce quel
valore. Vediamo come una chiamata a Math.min, che è l'opposto di Math.max,
possa essere utilizzata come parte di un'altra espressione:

console.log(Math.min(2, 4) * 200);
// -> 400
Controllo dell’esecuzione

Quando il programma contiene più di un'istruzione, le istruzioni vengono

eseguite dall'alto verso il basso in modo ordinato. Potresti memorizzare il valore
di una variabile nella riga 1 e mostrarla con console.log nella riga 2. Questo è
abbastanza semplice ma possiamo fare molto di più infatti possiamo usare
l’esecuzione condizionale per prendere delle decisioni. Immaginiamo una
funzione che in base all’età restituisca l’auto più adatta per te. Immaginiamo che
per un ragazzo di 18 anni una Fiat 500 possa andare bene mentre per un
guidatore sui 30 anni possa andar bene una Audi A4. Un guidatore oltre i 40 anni
potrebbe avere la necessità di un’auto più spaziosa e più sicura per la sua
famiglia quindi immaginiamo di suggerire una BMW X5.

function suggerisci (eta) {

var suggerimento = undefined;
if (eta >= 18 && eta < 30) {
 suggerimento = 'Fiat 500';
} else if (eta >= 30 && eta < 40) {
suggerimento = 'Audi A4';
} else {
suggerimento = 'BMW X5';
}

return suggerimento;
}
In questo caso abbiamo definito una funzione che, in base all’argomento può
restituire valori diversi. Per invocare la funzione ci basterà digitare il nome
seguito dall’età per cui vogliamo un suggerimento:

suggerisci(20);
// -> "Fiat 500"

suggerisci(38);
// -> "Audi A4"

suggerisci(17);
// -> "BMW X5"

Come vedi c’è un problema perché non abbiamo specificato bene tutte le
condizioni. Abbiamo creato un costrutto if-else dove l’ultimo costrutto else non
ha alcuna condizione pertanto anche chi non potrebbe guidare, come un
diciassettenne, riceverebbe “BMW X5” come suggerimento. Come esercizio
puoi aggiungere la condizione appropriata e risolvere questo problema. Potresti
anche inserire un messaggio d’errore per utenti con età inferiore a 18 anni.

In JavaScript sono disponibili diversi tipi di controllo del flusso, ad esempio,

puoi eseguire un blocco di istruzioni finché non viene raggiunta una condizione
di uscita. Supponiamo di voler scrivere sulla console tutti i numeri da 1 a 20,
possiamo usare un ciclo while per evitare di scrivere 20 righe di codice. Il ciclo
while consente di tornare ad un certo punto del programma in cui eravamo prima
e di ripeterlo con lo stato del programma corrente.

Possiamo scrivere su console i numeri da 1 a 20 in questo modo:

let numero = 1;
while (numero <= 20) {
console.log(numero);
numero++;
}

Un'istruzione che inizia con la parola chiave while crea un ciclo. Come puoi
notare la parola while è seguita da un'espressione tra parentesi cioè un'istruzione,
in modo simile a if. Il ciclo continua ad eseguire quelle istruzioni fino a quando
l'espressione produce un valore che fornisce true quando convertito in booleano.
Ogni volta che il ciclo si ripete, il numero ottenuto viene incrementato di
un’unità rispetto al valore precedente. Quando il valore di numero è 21 la
condizione sarà falsa quindi si uscirà dal ciclo.

Una variante di questo costrutto è il do…while che ti consente di eseguire

un’istruzione e ripeterla finché non viene raggiunta la condizione di uscita.
Riprendiamo l’esempio precedente con un costrutto do…while:

var numero = 1;
do {
console.log(numero);
numero++;
} while (numero <= 20);


In questo caso le istruzioni nel blocco do verranno eseguite almeno una volta e
successivamente sono soggette alla condizione della clausola while.

È possibile usare un altro tipo di ciclo che si adatta meglio a questo caso. Un
ciclo for ha lo stesso funzionamento del ciclo while ma le condizioni di
inizializzazione e di uscita sono esplicitate in modo diverso:

for (let numero = 1; numero <= 20; numero++) {

console.log(numero);
}

Questo programma è esattamente equivalente a quelli precedenti, l'unica

differenza è che tutte le istruzioni correlate allo "stato" del ciclo sono
raggruppate dopo la parola chiave for. Le parentesi dopo una parola chiave for
devono contenere due punti e virgola. La parte prima del primo punto e virgola
inizializza il ciclo, generalmente definendo una variabile. La seconda parte è
l'espressione che controlla se il ciclo deve continuare mentre la parte finale
aggiorna lo stato del ciclo dopo ogni iterazione. Nella maggior parte dei casi,
questo costrutto è più conciso e più chiaro di un costrutto while.

Tuttavia, fare in modo che la condizione di loop produca false non è l'unico
modo in cui un ciclo può terminare. Grazie alla parola chiave break puoi
abbandonare immediatamente il ciclo. Questa parola chiave è molto utile quando
bisogna iterare su molti elementi, ad esempio, per trovare il primo elemento tra
una serie di elementi. Questa parola chiave ti consente di uscire prima da un
ciclo risparmiando tempo e, soprattutto, ti consente di evitare cicli infiniti.

Possiamo riscrivere il ciclo precedente come segue:

for (let numero = 1; ; numero++) {

 console.log(numero);
if (numero == 20) {
break;
}
}

Come vedi la condizione di valutazione non è specificata all’interno del for

quindi l’abbiamo dovuta specificare con break. Il risultato sarà lo stesso ma
ottenuto in modo diverso infatti se non si verificasse la condizione per eseguire il
break si creerebbe un ciclo infinito.

La parola chiave continue è simile a break, in quanto influenza l'avanzamento di

un ciclo. Quando si incontra continue in un ciclo, il controllo viene bypassato e
procede con la successiva iterazione del ciclo.

Talvolta il codice può diventare troppo complesso da rileggere pertanto è

fondamentale sapere come usare le funzioni. Innanzitutto, bisogna creare
funzioni atomiche ovvero con un solo compito in modo che possano essere
riusabili in tutto il codice.

Un altro suggerimento consiste nell’usare dei nomi “parlanti” ovvero dei nomi
con un significato e che ti facciano capire il compito della funzione. Oltre a
questo, puoi usare dei commenti all’interno del tuo codice per includere delle
considerazioni sul tuo codice, ad esempio, per ricordarti di implementare un
controllo. Potresti voler commentare una funzione per crearne una nuova
versione senza cancellare la precedente, anche a questo servono i commenti. Un
commento è una parte di testo che fa parte di un programma ma è
completamente ignorato dall’interprete. JavaScript ha due modi per scrivere
commenti: se il commento inizia e finisce su una riga singola, è possibile
utilizzare due caratteri di barra (//) e successivamente il testo del commento,
oppure, se il commento è multiriga è possibile racchiudere il codice tra /* e */.
Vediamo qualche esempio di questi commenti:

// Questo ciclo sicuramente termina

for (let numero = 1; ; numero++) {
console.log(numero);
if (numero == 20) {
break;
}
}


/* Questo ciclo
sicuramente NON termina */
for (let numero = 1; ; numero++) {
console.log(numero);
}
 Capitolo 4
Oggetti e dintorni

Gli Oggetti

Numeri, valori booleani e stringhe sono la base da cui costruire strutture di dati
più complesse. Gli oggetti ci consentono di raggruppare i valori, compresi altri
oggetti, per costruire strutture sempre più complesse. I programmi che abbiamo
creato finora sono stati limitati dall’uso di tipi di dati semplici ma puoi ben
capire che raggruppare una serie di proprietà può essere molto utile nella
programmazione orientata agli oggetti. Questo tipo di programmazione
considera ogni entità presente nel mondo che ci circonda come un oggetto con
attributi e con metodi. Gli attributi sono delle caratteristiche mentre i metodi
sono delle funzioni. Un classico esempio è la macchina che è composta da
attributi come ruote, sportelli, volante ecc. e ha il compito di marciare, svoltare,
frenare ecc.

I valori contenuti in un oggetto sono, essenzialmente, raccolte arbitrarie di

proprietà o attributi ed un modo per creare un oggetto consiste nell’usare le
parentesi graffe. All'interno delle parentesi graffe, c'è un elenco di proprietà
separate da virgole e ogni proprietà ha un nome seguito da due punti e un valore.
Quando un oggetto viene scritto su più righe, è consigliato usare l’indentazione
del codice, come nell'esempio, per migliorarne la leggibilità. Le proprietà i cui
nomi non sono nomi validi o numeri validi devono essere poste tra virgolette
singole o doppie.

let automobile = {
ruote: 4,
motore: 1,
volante: 1,
'air-bag': 4
};
console.log(automobile.ruote);
// -> 4

console.log(automobile.sedili);
// -> undefined

automobile.sedili = 5;
console.log(automobile.sedili);
// -> 5

Come avrai notato le parentesi graffe hanno due significati in JavaScript:

all'inizio di un'istruzione, creano un blocco di istruzioni; in qualsiasi altra
posizione, descrivono un oggetto.

La lettura di una proprietà che non esiste ti darà undefined come abbiamo
dimostrato per la proprietà sedili che non era inizialmente definita nell’oggetto.
È possibile assegnare un valore ad un'espressione grazie all'operatore di
assegnamento (=). Ciò sostituirà il valore della proprietà se esiste già o creerà
una nuova proprietà dell'oggetto qualora non esistesse già.

Talvolta è necessario eliminare un attributo da un oggetto quindi si usa un

operatore unario che, quando applicato a una proprietà dell'oggetto, rimuoverà la
proprietà indicata. Supponiamo di voler eliminare la proprietà volante
dall’automobile:

delete automobile.volante;

console.log(automobile.volante);
// -> undefined

La differenza tra impostare una proprietà undefined e la sua effettiva

eliminazione è che, nel primo caso, l'oggetto ha ancora la proprietà
(semplicemente non ha un valore significativo) mentre nel secondo caso la
proprietà non è proprio più presente. Per scoprire quali proprietà ha un oggetto, è
possibile utilizzare la funzione Object.keys. Questa funzione accetta un oggetto
in input e restituisce un array di stringhe con i nomi delle proprietà dell'oggetto.

console.log(Object.keys(automobile));
// -> ["ruote", "motore", "sedili"]

In questo caso il risultato della funzione è un array ovvero un tipo di oggetto

specializzato per la memorizzazione di sequenze. Approfondiremo a breve gli
array ma prima dobbiamo conoscere meglio gli oggetti.

Abbiamo visto che i valori degli oggetti possono essere modificati mentre i tipi
di valori discussi nei capitoli precedenti, come numeri, stringhe e booleani, sono
tutti immutabili: è impossibile modificare i valori di tali tipi. Puoi combinarli e
ricavare nuovi valori, ma il valore originario rimarrà sempre lo stesso, pensa ad
una stringa ad esempio, il testo al suo interno non può essere modificato. Gli
oggetti funzionano in modo diverso infatti è possibile modificarne le proprietà,
facendo sì che un singolo valore dell'oggetto abbia contenuti diversi in momenti
diversi. Così come per le stringhe, quando abbiamo due numeri possiamo
considerarli esattamente lo stesso numero, indipendentemente dal fatto che si
riferiscano o meno agli stessi bit fisici. Con gli oggetti, c'è una differenza tra
avere due riferimenti allo stesso oggetto ed avere due oggetti diversi che
contengono le stesse proprietà. Considera il seguente codice:
let prodotto1 = {articoli: 10};
let prodotto2 = prodotto1;
let prodotto3 = {articoli: 10};
console.log(prodotto1 == prodotto2);
// -> true
console.log(prodotto1 == prodotto3);
// -> false

prodotto1.articoli = 15;
console.log(prodotto2.articoli);
// -> 15

console.log(prodotto3.articoli);
// -> 10

Gli oggetti prodotto1 e prodotto2 fanno riferimento allo stesso oggetto, motivo
per cui cambiando prodotto1 si cambia anche il valore di prodotto2 infatti si dice
che hanno la stessa identità. L'oggetto prodotto3 punta a un oggetto diverso, che
inizialmente contiene le stesse proprietà di prodotto1 ma vive una vita separata.
Anche se i valori numerici non cambiano, puoi utilizzare la parola chiave let per
tenere traccia di un numero che cambia modificando il valore. Allo stesso modo,
sebbene un'associazione const a un oggetto non possa di per sé essere modificata
e continuerà a puntare allo stesso oggetto, il contenuto dell’oggetto potrebbe
cambiare.

L’esempio serve proprio a chiarire questo concetto:

const prodotto = {articoli: 0, barcode: undefined};

// Consentito
prodotto.barcode = '01549864354';


// Non consentito
prodotto = {articoli: 1, barcode: '02312323112'};

Bisogna ricordare che quando confronti gli oggetti con l'operatore == in

JavaScript, verranno confrontati per identità: questo restituirà true solo se
entrambi gli oggetti hanno esattamente lo stesso valore. Il confronto di oggetti
diversi restituirà false, anche se hanno proprietà identiche. Non esiste
un'operazione di confronto puntuale ed integrata in JavaScript per confrontare gli
oggetti in base al contenuto, ma è possibile crearla.

 Gli Array

Per lavorare con una serie di dati digitali, è fondamentale trovare un modo per
rappresentarli nella memoria della nostra macchina. Supponiamo, ad esempio,
che vogliamo rappresentare una raccolta dei numeri 1, 6, 7, 8 e 15. Potremmo
usare le stringhe: dopo tutto, le stringhe possono avere qualsiasi lunghezza,
quindi potrebbero contenere più dati e usare "1 6 7 8 15" come rappresentazione.
In tal avremmo bisogno anche di un modo per estrarre le cifre e riconvertirle in
numeri per accedervi. Fortunatamente, JavaScript fornisce un tipo di dati
specifico per la memorizzazione di sequenze di valori. Un array viene scritto
come un elenco di valori tra parentesi quadre, separati da virgole pertanto
possiamo usare questa rappresentazione per memorizzare i dati:

let arrayNumeri = [1, 6, 7, 8, 15];

console.log(arrayNumeri[2]);
// -> 7

console.log(arrayNumeri[0]);
// -> 1

console.log(arrayNumeri[2 - 1]);
// -> 6

La notazione per recuperare gli elementi all'interno di un array utilizza parentesi

quadre. Una coppia di parentesi quadre subito dopo un'espressione, con un'altra
espressione al suo interno, cercherà l'elemento nell'espressione di sinistra che
corrisponde all'indice fornito dall'espressione tra parentesi. Il primo indice di un
array è zero e non uno come potremmo pensare perciò il primo elemento viene
recuperato con arrayNumeri[0]. Perché si inizia a contare da 0 piuttosto che da
1?

Vi è una lunga tradizione nella tecnologia e per certi versi ha senso iniziare da 0,
ma ci vuole un po' per abituarsi. Pensa all'indice come alla quantità di elementi
da saltare, contando dall'inizio dell'array. La lunghezza dell’array in questione
sarà pari a 5 perciò per accedere all’ultimo elemento potremo usare:

console.log(arrayNumeri[arrayNumeri.length-1]);
// -> 15

La funzione length, invocata su un array, restituisce la lunghezza dell’array

pertanto può essere utilizzata sia per creare dei cicli che per accedere agli
elementi. Supponiamo di voler sommare tutti gli elementi di questo array:

let somma = 0;
for (let i = 0; i < arrayNumeri.length; i++) {
somma = somma + arrayNumeri[i];
}

console.log(somma);
// -> 37

Questo tipo di ciclo è comune in JavaScript: iteri sugli elementi dell’array uno
per volta, controllando ad ogni ciclo la condizione di uscita. Tuttavia, esiste un
modo più semplice per scrivere tali cicli in JavaScript:

let somma = 0;
for (let numero of arrayNumeri) {
somma = somma + numero;
}

console.log(somma);
// -> 37

Questo tipo di ciclo for funziona non solo per gli array ma anche per le stringhe
e alcune altre strutture di dati. Tuttavia, questo tipo di ciclo non è supportato da
alcuni browser come Internet Explorer che è ancora usato in alcune aziende. Se
vuoi essere certo che il tuo programma sia compatibile proprio per tutti faresti
meglio ad usare il classico for.

Ci sono altri metodi interessanti per gli array che consentono di inserire o
rimuovere elementi. Stiamo parlando di push, shift e unshift. Immaginiamo di
avere un elenco di numeri interi che indicano le righe di un documento che
dobbiamo controllare. Ogni volta che abbiamo verificato una riga possiamo
togliere l’elemento dall’array:

let daVerificare = [10, 20, 32];

function aggiungiVerifica(riga) {
daVerificare.push(riga);
}

function verifico() {
return daVerificare.shift();
}
function verificaUrgente(riga) {
daVerificare.unshift(riga);
}

L’array viene inizializzato con delle righe da verificare ma è possibile
aggiungerne altre in coda con il metodo push o in cima con il metodo unshift.
Puoi divertirti a modificare l’array invocando le funzioni create e puoi vedere il
contenuto dell’array con una semplice console.log.

JSON

Poiché le proprietà fanno riferimento al valore, anziché contenerlo, gli oggetti e

le matrici vengono archiviati nella memoria del computer come sequenze di bit
che fanno riferimento ad indirizzi di memoria del loro contenuto. Un array con
un altro array al suo interno è costituito da una regione di memoria per l'array
interno e un'altra per l'array esterno, contenente un numero binario che
rappresenta la posizione dell'array interno.

Se vuoi salvare i dati in un file per usarli successivamente o per inviarli ad un

altro computer in rete, devi in qualche modo convertire questi indirizzi di
memoria in una descrizione che può essere archiviata o inviata. Si possono
serializzare i dati ovvero convertirli in una descrizione piatta. Un formato di
serializzazione molto popolare si chiama JSON (pronunciato "Jason"), che sta
per JavaScript Object Notation. È ampiamente utilizzato come archivio di dati
e formato di comunicazione sul Web, anche in linguaggi diversi da JavaScript.
JSON sembra simile al modo in cui JavaScript scrive array e oggetti, anche se
con alcune restrizioni. Tutti i nomi delle proprietà devono essere racchiusi tra
virgolette doppie e sono consentite solo espressioni di dati semplici: nessuna
chiamata a funzioni, collegamenti o qualsiasi altra cosa che comporti un calcolo.
Inoltre, non è possibile aggiungere dei commenti nei file JSON.

JavaScript ci offre le funzioni JSON.stringify e JSON.parse rispettivamente per

convertire i dati verso questo formato e da questo formato. Il primo accetta un
valore JavaScript e restituisce una stringa con codifica JSON. Il secondo accetta
una stringa e la converte in un oggetto che JavaScript è in grado di interpretare.

let stringaPerFile = JSON.stringify({

invitati: 50,
evento: ["Compleanno"]}
);
console.log(stringaPerFile);
// -> {"invitati":50,"evento":["Compleanno"]}

let oggetto = JSON.parse(stringaPerFile);
console.log(oggetto.evento);
// -> ["Compleanno"]
 Capitolo 5
ll DOM

Quando apri una pagina web nel tuo browser, esso recupera il testo HTML della
pagina e lo analizza. Il browser crea un modello della struttura del documento e
utilizza questo modello per disegnare la pagina sullo schermo. Questa
rappresentazione del documento è una struttura di dati che è possibile leggere o
modificare e funziona come se fosse aggiornata in tempo reale: quando la
struttura viene modificata, la pagina sullo schermo viene aggiornata per riflettere
le modifiche.

Puoi immaginare un documento HTML come un insieme di scatole innestate una

dentro l'altra. I tag come <body> e </body> racchiudono altri tag, che a loro
volta contengono altri tag o del testo.

Consideriamo il seguente codice HTML:

<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<h1>Homepage</h1>
<p>Link in <a href="https://www.google.it">bio</a></p>
</body>
</html>

La struttura dei dati utilizzata dal browser per rappresentare il documento segue
questa forma: per ogni riquadro esiste un oggetto con cui possiamo interagire per
scoprire quale tag HTML rappresenta e quali "scatole" e testo contengono.

Questa rappresentazione è denominata Document Object Model o DOM in

breve. Con la proprietà documentElement è possibile riferirsi ad un oggetto che
rappresenta il tag <html> e fare riferimento ad ogni elemento della pagina.
 Layout

È possibile navigare tra i vari elementi che compongono la pagina proprio come
è possibile fare con i CSS. Puoi passare da un genitore ad un figlio, da un fratello
ad un altro ma se vogliamo trovare un nodo specifico nel documento, non è
consigliato raggiungerlo partendo dal document.body seguendo un percorso
fisso di proprietà. In questo modo creiamo delle assunzioni nel nostro
programma sulla struttura precisa del documento, struttura che potrebbe
cambiare in seguito. Un'altra complicazione è che i nodi di testo vengono creati
anche per lo spazio bianco tra i vari nodi. Quindi, se vogliamo ottenere l'attributo
href del link nel codice precedente, non vogliamo dire all'interprete qualcosa del
tipo "Recupera il primo figlio del secondo figlio del body del documento".
Sarebbe meglio se potessimo dire "Recupera il primo link nel documento". Per
fortuna possiamo tradurre questa frase per l’interprete:

let link = document.body.getElementsByTagName("a")[0];

console.log(link.href);

// -> https://www.google.it

Tutti i nodi dell'elemento hanno un metodo getElementsByTagName che

recupera tutti gli elementi con il nome del tag dato in input e che sono
discendenti (figli diretti o indiretti) di quel nodo e li restituisce come un oggetto
simile ad un array. Per trovare un singolo nodo specifico, puoi assegnargli un
attributo id e in questo caso puoi utilizzare document.getElementById.

Un terzo metodo, simile ai precedenti, è getElementsByClassName che cerca tra

i contenuti di un nodo di elementi e recupera tutti gli elementi che hanno la
stringa specificata nel loro attributo di classe.
Quasi tutto ciò che riguarda la struttura dei dati del DOM può essere modificato
infatti anche la forma dell'albero del documento può essere modificata
modificando le relazioni padre-figlio. È possibile rimuovere i nodi dal loro nodo
padre corrente così come è possibile aggiungere un nodo figlio ad un nodo. Per
fare ciò è necessario usare appendChild, per inserire l'elemento alla fine
dell'elenco di figli, oppure insertBefore, per inserire il nodo dato come primo
argomento, prima del nodo dato come secondo argomento.

<p>UNO</p>
<p>DUE</p>
<p>TRE</p>
let paragrafi = document.body.getElementsByTagName("p");
document.body.insertBefore(paragrafi[2], paragrafi[0]);

Un nodo può esistere nel documento in una sola posizione pertanto, inserendo il
paragrafo TRE davanti al paragrafo UNO, lo si rimuoverà dalla fine del
documento, quindi verrà inserito nella parte anteriore, la sequenza diverrà TRE /
UNO / DUE. Tutte le operazioni che inseriscono un nodo da qualche parte, come
effetto collaterale, lo rimuovono dalla sua posizione corrente (se ne ha una).

Il metodo replaceChild viene utilizzato per sostituire un nodo figlio con un altro.
Accetta come argomenti due nodi: un nuovo nodo e il nodo da sostituire. Il nodo
sostituito deve essere figlio dell'elemento su cui viene chiamato il metodo. Nota
bene che replaceChild e insertBefore si aspettano che il nuovo nodo sia il loro
primo argomento.

Per creare nodi di elementi, è possibile utilizzare il metodo

document.createElement, questo metodo accetta un tipo di tag e restituisce un
nuovo nodo vuoto del tipo specificato.

let node = document.createElement(type);

Alcuni attributi degli elementi, come href per i link, sono accessibili tramite una
proprietà con lo stesso nome sull'oggetto DOM dell'elemento. Questo accade, in
realtà, con gli attributi standard più usati. HTML, tuttavia, ti consente di
impostare qualsiasi attributo desiderato sui nodi e questo può essere utile per
memorizzare informazioni aggiuntive in un documento. Se crei attributi
personalizzati, tuttavia, tali attributi non saranno presenti come proprietà sul
nodo dell'elemento. Per questo motivo dovrai usare i metodi getAttribute e
setAttribute.

<p data-categoria="segreto">Il tuo codice OTP è 111111</p>

<p data-categoria="test">TEST</p>
<p data-categoria="invio">Premi sul pulsante per inviare il codice</p>

<script>
let paragrafi = document.body.getElementsByTagName("p");
for (let para of Array.from(paragrafi)) {
if (para.getAttribute("data- categoria") == "segreto") {
para.remove();
}
}
</script>

Si consiglia di aggiungere un prefisso ai nomi di tali attributi per assicurarsi che

non siano in conflitto con altri attributi. Esiste un attributo comunemente usato,
class, che è anche una parola chiave nel linguaggio JavaScript. Per motivi storici
— alcune vecchie implementazioni JavaScript non erano in grado di gestire
nomi di proprietà corrispondenti a parole chiave — perciò la proprietà utilizzata
per accedere a questo attributo si chiama className.

 Stile

Abbiamo visto che diversi elementi HTML sono disegnati in modo diverso.
Alcuni aggiungono uno stile: <strong> rende più accattivante il suo contenuto
mentre <a> lo mostra in blu e lo sottolinea. Il comportamento con cui un tag
<img> mostra un'immagine o un tag <a> si aggancia ad un collegamento è
fortemente legato al tipo di elemento. È possibile, tuttavia, cambiare lo stile
associato a un elemento, come il colore del testo o la sottolineatura tramite la
proprietà style di HTML. Il codice JavaScript può manipolare direttamente lo
stile di un elemento attraverso la proprietà style dell'elemento. Questa proprietà
contiene un oggetto con proprietà per tutte le possibili proprietà di stile. I valori
di queste proprietà sono stringhe che possiamo modificare per cambiare lo stile
dell'elemento.

<p id="paragrafo" style="color: blue">

Testo del paragrafo
</p>

<script>
let para = document.getElementById("paragrafo");
console.log(para.style.color);
para.style.color = "red";
</script>
Presta attenzione, se conosci CSS sai già che alcune proprietà contengono dei
trattini ad esempio font-size. Poiché tali nomi di proprietà sono scomodi da usare
in JavaScript (dovresti scrivere style["font-family"]), i nomi di proprietà
nell'oggetto style per tali proprietà non hanno i loro trattini e si usa la notazione
con lettera maiuscola (style.fontFamily).
 Capitolo 6
Eventi

Alcuni programmi hanno bisogno dell'input dell'utente per funzionare, pensiamo

ad azioni del mouse e/o della tastiera. Questo tipo di input deve essere gestito in
tempo reale e il programma dovrebbe rispondere ad esso in tempo reale,
gestendo l'evento. Immagina un'interfaccia in cui l'unico modo per scoprire se
viene premuto un tasto sulla tastiera è leggere lo stato corrente di quel tasto. Per
poter reagire ai tasti premuti, dovresti leggere costantemente lo stato della chiave
in modo da catturarlo prima che il tasto venga nuovamente rilasciato. Sarebbe
pericoloso eseguire altre funzioni che richiedono molto tempo poiché potresti
perdere l’informazione di aver premuto un tasto. Un ulteriore passo in avanti
consiste nel fatto che l'hardware o il sistema operativo notino il tasto premuto e
lo mettano in coda. Un programma può quindi controllare periodicamente la
coda per verificare nuovi eventi e reagire agli eventi stessi. Ovviamente, il
programma deve controllare la coda frequentemente, perché la pressione di un
tasto può avvenire in qualsiasi momento. Se il programma non dovesse
controllare la coda si avrebbe un momento in cui il programma non risponde,
questo approccio prende il nome di polling. La maggior parte dei programmatori
preferisce evitare questo meccanismo. Un meccanismo migliore per il sistema
consiste nel notificare attivamente al nostro codice il verificarsi di un evento. I
browser consentono di fare ciò permettendoci di registrare le funzioni come
gestori (o handler) di eventi specifici.

Registrare un evento di questo tipo è molto semplice come puoi notare:

<p>Clicca qui per attivare la funzione</p>


<script>
window.addEventListener("click", () => {
console.log("Eseguo la funzione associata al click");
});
</script>

L'associazione a window si riferisce a un oggetto incorporato e fornito dal

browser. Esso rappresenta la finestra del browser che contiene la pagina pertanto
la chiamata del suo metodo addEventListener registra il secondo argomento da
chiamare ogni volta che si verifica l'evento descritto dal suo primo argomento.

Ogni gestore di eventi del browser è registrato in un contesto quindi nell'esempio

precedente abbiamo chiamato addEventListener sull'oggetto window per
registrare un gestore per l'intera finestra. Tale metodo può essere usato anche su
elementi del DOM e altri tipi di oggetti. I listener di eventi vengono invocati
solo quando l'evento si verifica nel contesto dell'oggetto su cui sono registrati.

<button>Clicca qui</button>
<p>Il paragrafo non contiene handler</p>

<script>
let pulsante = document.querySelector("button");
pulsante.addEventListener("click", () => {
console.log("Pulsante premuto");
});
</script>

Questo esempio collega un handler (o gestore) al nodo dedicato al pulsante.

Cliccando sul pulsante viene eseguito quel gestore ma i clic sul resto del
documento non hanno alcun effetto.

Puoi avere un effetto simile usando l'attributo onclick. Con la maggior parte dei
tipi di eventi puoi associare un gestore tramite l'attributo il cui nome è il nome
dell'evento con on davanti. Presta attenzione perché un nodo può avere solo un
attributo onclick, quindi puoi registrare un solo gestore per nodo in quel modo.
Con il metodo addEventListener puoi aggiungere un numero qualsiasi di gestori
in modo che sia sicuro aggiungere nuovi gestori anche se sull'elemento ne sono
presenti altri. Il metodo removeEventListener, chiamato con argomenti simili a
addEventListener, rimuove un gestore.

<button>Gestisci 1 click</button>

<script>
let button = document.querySelector("button");
function click1() {
console.log("Eseguito");
button.removeEventListener("click", click1);
}
button.addEventListener("click", click1);
</script>

La funzione assegnata a removeEventListener deve avere lo stesso valore di

funzione assegnato a addEventListener. Quindi, per annullare la registrazione di
un gestore, ti consigliamo di assegnare un nome alla funzione (una volta,
nell'esempio) per poter passare lo stesso valore ad entrambi i metodi, evita
funzioni anonime.

A molti eventi è associata un'azione predefinita infatti se fai clic su un

collegamento, verrai indirizzato alla destinazione del collegamento. Se premi la
freccia verso il basso, il browser scorrerà la pagina verso il basso oppure se fai
clic con il pulsante destro del mouse, otterrai un menu di scelta rapida ecc. Per la
maggior parte dei tipi di eventi, gli handler JavaScript vengono invocati prima
che si verifichi il comportamento predefinito. Se il gestore non desidera che si
verifichi questo comportamento normale, in genere perché si è già occupato
della gestione dell'evento, può chiamare il metodo preventDefault sull'oggetto
event. Questo può essere usato per implementare le tue scorciatoie da tastiera o
menu di scelta rapida. Può anche essere usato per interferire con il
comportamento che gli utenti si aspettano, ad esempio, ecco un link che non può
essere aperto:

<a href="https://www.google.it/">Link</a>

<script>
let link = document.querySelector("a");
link.addEventListener("click", event => {
console.log("Non è possibile aprire questo link");
event.preventDefault();
});
</script>

Cerca di usare in modo consapevole questa tecnica perché modificare il

comportamento che l’utente si aspetta non è sempre corretto.

A seconda del browser, tuttavia, alcuni eventi non possono essere intercettati
affatto. Su Chrome, ad esempio, la scorciatoia da tastiera per chiudere la scheda
corrente (Ctrl+W o ⌘ +W) non può essere gestita da JavaScript.

Un caso comune di gestione degli eventi si verifica quando l'utente inserisce dei
dati nei campi di input. Quando viene premuto un tasto sulla tastiera, il browser
genera un evento keydown invece quando viene rilasciato, viene generato un
evento keyup.
Nonostante il suo nome, keydown non si attiva soltanto quando il tasto viene
fisicamente premuto. Quando si tiene premuto un tasto, l'evento si attiva
nuovamente ogni volta che il carattere si ripete perciò presta attenzione anche a
questo aspetto. Ad esempio, se si aggiunge un pulsante al DOM quando viene
premuto un tasto e lo si rimuove quando il tasto viene rilasciato, è possibile
aggiungere in modo accidentale centinaia di pulsanti quando si tiene premuto a
lungo il tasto.

<p>Questa pagina si colora di blu quando digiti la lettera B</p>

<script>
window.addEventListener("keydown", event => {
if (event.key == "b") {
document.body.style.background = "blue";
}
});
window.addEventListener("keyup", event => {
if (event.key == "b") {
document.body.style.background = "";
}
});
</script>

L'esempio ha esaminato la proprietà key dell'oggetto event per vedere di quale

chiave si tratta. Questa proprietà contiene una stringa che, per la maggior parte
dei tasti, corrisponde al carattere di quel tasto. Per caratteri speciali come enter,
contiene una stringa che denomina la chiave (Enter, in questo caso). Se si tiene
premuto MAIUSC mentre si preme un tasto, ciò potrebbe influenzare il carattere
del tasto infatti "v" diventa "V" e "1" può diventare "!". Tasti come shift, control,
alt e meta (su Mac) generano eventi chiave proprio come i normali tasti ma
quando usi combinazioni di tasti, puoi anche scoprire se questi tasti vengono
tenuti premuti osservando le proprietà shiftKey, ctrlKey, altKey e metaKey degli
eventi della tastiera e del mouse.

<p>Premi Control+Spazio per continuare.</p>

<script>
window.addEventListener("keydown", event => {
if (event.key == " " && event.ctrlKey) {
console.log("Sto continuando!");
}
});
</script>

Premendo un pulsante del mouse si generano diversi eventi. Gli eventi

mousedown e mouseup sono simili a keydown e keyup, si attivano quando il
pulsante viene premuto e rilasciato.

Questi eventi si verificano sui nodi DOM che si trovano immediatamente sotto il
puntatore del mouse. Dopo l'evento mouseup, l'evento click si attiva sul nodo più
specifico che contiene sia la pressione che il rilascio del pulsante. Ad esempio,
se premo il pulsante del mouse su un paragrafo poi sposto il puntatore su un altro
paragrafo e rilascio il pulsante, l'evento click si verificherà sull'elemento che
contiene entrambi quei paragrafi. Se si verificano due click ravvicinati, viene
generato anche un evento dblclick (doppio clic), dopo il secondo evento click.
Per ottenere informazioni precise su dove si è verificato un evento del mouse,
puoi esaminare le sue proprietà clientX e clientY, che contengono le coordinate
dell'evento (in pixel) relative all'angolo in alto a sinistra della finestra, oppure
pageX e pageY, che sono rispettive all'angolo in alto a sinistra dell'intero
documento.

 Capitolo 7
Programmazione asincrona

La parte centrale di un computer che esegue i singoli passaggi che compongono i
nostri programmi, è chiamata processore. I programmi che abbiamo visto finora
terranno occupato il processore fino a quando non avranno finito il loro compito.
La velocità con cui è possibile eseguire qualcosa come un ciclo che manipola i
numeri dipende quasi interamente dalla velocità del processore. Molti
programmi, tuttavia, interagiscono con altri fattori, esterni al processore. Ad
esempio, supponiamo di dover recuperare un file dalla rete, questo processo è
molto più lento rispetto a recuperare un file dalla memoria. Quando accade una
cosa del genere, sarebbe un peccato lasciare il processore inattivo dato che
potrebbe esserci qualche altro programma da eseguire nel frattempo. In parte,
questo è gestito dal tuo sistema operativo, che assegnerà il processore tra i vari
programmi in esecuzione ma ciò non aiuta quando vogliamo che un singolo
programma sia in grado di fare altro mentre è in attesa di una richiesta di rete.
 Callbacks

Un approccio alla programmazione asincrona prevede che le funzioni che

eseguono un'azione lenta assumano un argomento aggiuntivo, una funzione di
callback. L'azione viene avviata e al termine viene invocata la funzione di
callback con il risultato. Ad esempio, la funzione setTimeout, disponibile sia in
Node.js che nei browser, attende un determinato numero di millisecondi (un
secondo è composto da mille millisecondi) prima di invocare una funzione.

setTimeout(()=>console.log("Tick"),500);

Attendere non è produttivo ma può essere utile quando si deve aggiornare

un'animazione o verificare se un task impiega più tempo di una soglia
preimpostata. L'esecuzione di più azioni asincrone di seguito mediante callback
implica la necessità di continuare a passare nuove funzioni per gestire il calcolo
dopo le azioni eseguite.

La funzione seguente accetta due parametri e una funzione di callback che viene
eseguita con l'evento onload:

function loadScript(src, callback) {

let script = document.createElement('script');
script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}


 Promise

In JavaScript è possibile lavorare con funzioni sincrone o asincrone. Tutte le

funzioni che abbiamo visto finora sono sincrone ovvero restituiscono un valore
immediatamente. Le funzioni asincrone, invece, restituiscono un valore dopo un
po' di tempo. Un classico esempio di funzione asincrona è il recupero di un file
dalla rete.

In un modello di programmazione sincrona, ogni istruzione viene eseguita

singolarmente, una alla volta. Quando si invoca una funzione che esegue
un'azione di lunga durata, viene restituito un valore solo al termine dell'azione.
Questo interrompe il programma per il tempo necessario al completamento.

Un modello asincrono consente la lavorazione di più task contemporaneamente.

Quando si avvia un'azione, il programma continua a essere eseguito e, al termine
dell'azione, il programma viene informato della fine del processo ottenendo
l'accesso al risultato.

Nel caso di azioni asincrone, è possibile, invece di disporre che una funzione sia
chiamata in un determinato momento nel futuro, restituendo un oggetto che
rappresenta un evento futuro. Questo è lo scopo della classe standard Promise
che indica un'azione asincrona che può risolversi ad un certo punto nel tempo e
produrre un valore. Una promise consente di avvisare chiunque sia interessato
non appena il suo valore è disponibile.

Il modo più semplice per creare una promise consiste nell'invocare

Promise.resolve. Questa funzione assicura che il valore dato in input sia
racchiuso in una promise. Se è già una promise, verrà semplicemente restituita,
altrimenti otterrai una nuova promise che termina immediatamente con il tuo
valore come risultato.
let prom = Promise.resolve(19);
prom.then(value => console.log(value));
// -> 19

Per ottenere il risultato di una promise, puoi usare il suo metodo then. Questo
metodo registra una funzione di callback da chiamare quando la promise si
risolve e produce un valore. È possibile aggiungere più callback ad una singola
promise che verranno chiamate dopo che la promise è stata risolta (terminata). È
utile pensare alle promise come a un metodo per spostare valori in una realtà
asincrona, il valore di una promise è un valore che potrebbe già essere
disponibile o potrebbe esserlo in futuro.

Eccezioni

I calcoli JavaScript possono fallire generando un'eccezione e, soprattutto le

funzioni asincrone, spesso hanno bisogno di gestire le eccezioni. Una richiesta di
rete potrebbe non andare a buon fine o un'istruzione che fa parte del calcolo
asincrono potrebbe generare un'eccezione. La gestione degli errori, quindi, è uno
dei problemi più importanti con le callback.

Una convenzione ampiamente utilizzata indica il primo argomento della callback

per indicare che l'azione non è andata a buon fine mentre il secondo contiene il
valore prodotto dall'azione quando ha avuto esito positivo. Tali funzioni di
callback devono sempre verificare se hanno ricevuto un'eccezione e assicurarsi
che tutti i problemi che causano, comprese le eccezioni generate dalle funzioni
che chiamano, vengano rilevati e assegnati alla funzione corretta.

Le promise rendono tutto più semplice, tuttavia, perché questi problemi possono
essere risolti (l'azione è stata completata correttamente) o rifiutati (si sono
verificati degli errori). Il blocco resolve (registrato con then) viene invocato solo
quando l'azione ha esito positivo e il blocco reject viene propagato alla nuova
promise restituita da then. Quando un handler lancia un'eccezione, questo fa
automaticamente rifiutare la promise prodotta dalla sua invocazione. Quindi, se
un elemento in una catena di azioni asincrone fallisce, il risultato dell'intera
catena viene contrassegnato come rifiutato. Così come risolvere una promise
fornisce un valore, anche rifiutarne una fornisce un valore, di solito chiamato il
motivo del rifiuto. Allo stesso modo, quando un gestore restituisce una promise
che viene respinta, quel rifiuto confluisce nella promise successiva. Le promise
usano il metodo catch che registra un handler da chiamare quando la promessa
viene respinta, in modo simile a quando le richieste vanno a buon fine. Questo
meccanismo è molto simile a quello che avviene quando si restituisce una nuova
promise, che si risolve al valore della promise originale se l’esecuzione va a
buon fine. Se un gestore genera un errore, anche la nuova promise viene
respinta.

Una funzione passata al costruttore Promise riceve un secondo argomento,

insieme alla funzione di risoluzione, che può utilizzare per rifiutare la nuova
promise. Le catene di valori creati dalle chiamate per then e catch possono essere
viste come una pipeline attraverso la quale si muovono valori asincroni o errori.
Poiché tali catene vengono create registrando gli handler, a ciascun collegamento
è associato un handler di successo o un handler di rifiuto (o entrambi). Gli
handler che non corrispondono al tipo di risultato (cioè all’esito positivo o
negativo) vengono ignorati. Vengono invocati, invece, quelli che corrispondono
e il loro esito determina quale tipo di valore viene dopo.

var p1 = new Promise(function(resolve, reject) {

resolve("Successo");
});
p1.then(function(value) {
console.log(value); // "Successo"
throw "errore!";
}).catch(function(e) {
console.log(e); // "errore!"
});
 Capitolo 8
JS e Internet

Il protocollo Hypertext Transfer (HTTP) è il meccanismo attraverso il quale i

dati vengono richiesti e forniti sul World Wide Web. Vediamo come è possibile
condividere i dati su Internet tramite questo protocollo e JavaScript. Digitando
google.it nella barra degli indirizzi del browser, il browser cerca l'indirizzo del
server associato a google.it e prova ad aprire una connessione TCP sulla porta
80, la porta predefinita per il traffico HTTP. Se il server esiste ed accetta la
connessione, il browser potrebbe inviare qualcosa del genere:

GET /

Host: google.it

User-Agent: Chrome

Quindi il server risponde tramite quella stessa connessione:

HTTP/1.1 200 OK

Content-Length: 65585

Content-Type: text/html

Last-Modified: Mon, 29 Jun 2020 10:29:45 GMT

<!doctype html>....

Il browser prende la parte della risposta dopo la riga vuota, detta “corpo della
risposta” (da non confondere con il tag <body> HTML) e la visualizza come
documento HTML. Le informazioni inviate dal client sono chiamate richieste ed
iniziano con questa riga:

GET /

HTTP / 1.1

La prima parola è il metodo della richiesta infatti GET specifica che vogliamo
ottenere la risorsa specificata. Altri metodi comuni sono: DELETE per eliminare
una risorsa, PUT per crearla o sostituirla e POST per inviare informazioni ad
essa. Si noti che il server non è obbligato ad eseguire tutte le richieste che riceve.
Se scegli un sito Web ed invii una richiesta DELETE per eliminare la sua pagina
principale, probabilmente rifiuterà la richiesta.

La parte dopo il nome del metodo è il percorso della risorsa a cui si applica la
richiesta. Nel caso più semplice, una risorsa è semplicemente un file sul server,
ma il protocollo non richiede che sia così.

Una risorsa può essere qualsiasi cosa che può essere trasferita come se fosse un
file. Dopo il percorso delle risorse, la prima riga della richiesta menziona HTTP /
1.1 che indica la versione del protocollo HTTP che si sta utilizzando. In pratica,
molti siti utilizzano la versione 2 di HTTP, che supporta gli stessi concetti della
versione 1.1 ma è un po' più complicato, veloce e sicuro.

I browser passano automaticamente alla versione del protocollo appropriata

nello scambio di informazioni con il server e l'esito di una richiesta è lo stesso,
indipendentemente da quale versione viene utilizzata. Poiché la versione 1.1 è
più semplice da utilizzare, useremo questa per i nostri esempi.
Anche la risposta del server inizia con una versione, seguita dallo stato della
risposta, prima come codice di stato a tre cifre e poi come stringa:

HTTP/1.1 200 OK

I codici di stato che iniziano con il numero 2 indicano che la richiesta è andata a
buon fine mentre i codici che iniziano con 4 indicano qualcosa di sbagliato nella
richiesta. L'errore 404 è probabilmente il codice di stato HTTP più famoso e
significa che non è stato possibile trovare la risorsa. I codici che iniziano con 5
indicano che si è verificato un errore sul server ma la richiesta può essere valida.

La prima riga di una richiesta o risposta può essere seguita da un numero

qualsiasi di header. Queste sono righe che contengono coppie di nome: valore
per specificare delle informazioni.

Content-Length: 65585

Content-Type: text/html

Last-Modified: Mon, 29 Jun 2020 10:29:45 GMT

In questo caso ci informa sulle dimensioni e sul tipo del documento di risposta.
Nell'esempio si tratta di un documento HTML di 65.585 byte, che è stato
modificato l'ultima volta il 29 giugno 2020. Per la maggior parte delle
intestazioni, il client e il server sono liberi di decidere se includerli in una
richiesta o risposta ma alcune sono obbligatorie, ad esempio, l'intestazione Host,
che specifica il nome dell’host. Dopo le intestazioni, sia le richieste che le
risposte possono includere una riga vuota seguita da un “corpo”, che contiene i
dati inviati. Le richieste GET e DELETE non inviano alcun dato aggiuntivo ma
le richieste PUT e POST inviano dei dati fondamentali per il loro compito. Allo
stesso modo, alcuni tipi di risposta, come le risposte agli errori, non richiedono
un corpo.

Fetch


L'interfaccia attraverso la quale il browser JavaScript può effettuare richieste

HTTP è chiamata fetch. Questa interfaccia è abbastanza recente pertanto utilizza
le promise.

fetch("test/data.txt").then(response => {
console.log(response.status);
// -> 200
console.log(response.headers.get("Content-Type"));
// -> text/plain
});

La chiamata a fetch restituisce una promise che si risolve in un oggetto response

contenente informazioni sulla risposta del server, come il suo codice di stato e le
sue intestazioni. Le intestazioni sono racchiuse in un oggetto simile ad una
mappa a cui accedi tramite le sue chiavi (i nomi delle intestazioni). Non è
importante specificare il nome in maiuscolo o minuscolo infatti sia che
headers.get("Content-Type") che headers.get("content-TYPE") restituiranno lo
stesso valore. Nota bene che la promise restituita da fetch si risolve
correttamente anche se il server ha risposto con un codice di errore. Potrebbe
essere rigettata se si verifica un errore di rete o se non è possibile trovare il
server a cui è indirizzata la richiesta.

Il primo argomento da recuperare è l'URL a cui sottoporre la richiesta. Quando

tale URL non inizia con un nome di protocollo (come http:), viene trattato come
un URL relativo, il che significa che viene interpretato rispetto al documento
corrente. Quando l’URL inizia con una barra (/), sostituisce il percorso corrente,
che è la parte dopo il nome del server. Poiché la promise iniziale viene risolta
non appena le intestazioni della risposta sono state ricevute e poiché la lettura
del corpo della risposta potrebbe richiedere del tempo, ciò restituisce
nuovamente una promise.

 Conclusioni

Abbiamo avuto modo di vedere solo alcune delle potenzialità di JavaScript in

questo ebook. Le funzionalità offerte da questo linguaggio sono davvero tante,
inoltre, bisogna essere sempre aggiornati sugli ultimi standard ECMAScript in
modo da usufruire delle novità.

In questo ebook abbiamo compiuto un lungo viaggio cercando di toccare tutti gli
argomenti fondamentali di JavaScript, tuttavia, per diventare un esperto in
questo linguaggio è necessaria tanto pratica. Puoi creare tantissimi programmi
lato client ma anche lato server grazie a Node.js. È anche possibile creare
un'intera applicazione client-server scritta soltanto con JavaScript, evitando tutte
quelle fastidiose conversioni per i tipi di file.

Abbiamo analizzato in dettaglio la programmazione sincrona e asincrona, vera

potenzialità di JavaScript, passando dalle callback alle promise. In questo modo
puoi creare davvero un software guidato dagli eventi seguendo il nuovo
paradigma di programmazione detto event-driven. JavaScript è davvero un
linguaggio potente e flessibile con tanta strada ancora da compiere quindi
continua a creare applicazioni, programmi per il tuo server o semplicemente la
logica per un sito Web. Spesso per i siti Web viene usato jQuery che è una
libreria basata su JavaScript ma è stato dimostrato che JavaScript è molto più
veloce per eseguire le operazioni sul DOM. Alla luce di ciò, se hai un sito Web
che usa jQuery, puoi pensare di sostituirlo interamente grazie alle potenzialità
JavaScript in modo da rendere più veloce il tuo sito.

Non ti arrendere qualora dovessi riscontrare degli errori, sono opportunità per
crescere ed imparare. In tal caso leggi la descrizione e se non dovessi trovare la
soluzione, una ricerca su Google ti dirà sicuramente dove sbagli.
L'apprendimento è un lavoro duro, ma tutto ciò che impari oggi renderà più
facile l'apprendimento di domani.