Il 0% ha trovato utile questo documento (0 voti)

39 visualizzazioni158 pagine

App Unti

Caricato da

Martina Pizzi

Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.

Formati disponibili

Scarica in formato PDF, TXT o leggi online su Scribd

Il 0% ha trovato utile questo documento (0 voti)

39 visualizzazioni158 pagine

App Unti

Caricato da

Martina Pizzi

Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.

Formati disponibili

Scarica in formato PDF, TXT o leggi online su Scribd

Sei sulla pagina 1/ 158

INTRODUZIONE

COME FUNZIONA INTERNET?

Per navigare sul web c’è bisogno di una connessione fisica tra il mio dispositivo e un altro dispositivo, che non
sappiamo dove sia. Questo fenomeno va tenuto in considerazione quando costruiamo il nostro sito
web/applicazione.

Quando un dispositivo chiede una risorsa da un’altra parte, viene usato il routing, che va a vedere qual è la strada/il
percorso più breve per attivare all’informazione.

L’INDIRIZZO (URL)
Ogni informazione su internet ha un indirizzo in cui ogni parte ha una specifica funzione. Noi attraverso l’indirizzo,
chiamiamo una risorsa e il web browser sa dove andare a cercarla grazie al sistema DNS.

1. Protocollo: dico al browser quale protocollo usare

2. Top Level Domain: chiedo dove devo andare. Es dove si trova Google e lui mi dirà Google si trova su questo
indirizzo IP

3. Nome dominio: ciao Google dove si trova www? www si trova si questo indirizzo IP

4. Directory: chiedo all’indirizzo IP di darmi questa pagina.

IL DNS:
Il DNS è il sistema che permette di tradurre i nomi di dominio in indirizzo IP. Gli indirizzi IP sono blocchi di 4 numeri
da 0 a 255. Dove si trova un indirizzo va fatto una richiesta. Tutti i dispositivi hanno dei cash dove vengono salvate
le informazioni più richieste.

Il DNS funziona similmente

a un elenco telefonico. Il
routing è un insieme di
strutture organizzate che
permettono di far arrivare,
attraverso i nodi della rete,
l’elemento desiderato.
ROUTING
Il routing p un insieme di strutture organizzare
che permettono di far arrivare, attraverso i nodi
della rete l’elemento desiderato.

Routing: dal dispositivo al server.

APPLICAZIONE WEB
Un’applicazione web è composta da:

Figura 1: la parte del client è il Figura 2: Il server fa tutto

nostro browser/app che si quello che deve fare un
collegherà al server. La parte programma: è il codice, la
del client riguarda l'aspetto parte del back-end
estetico, la parte del front-end

Le applicazioni web sono caratterizzate da:

• Disponibilità
o Ovunque
o Mobile e desktop
• Condivisione
o Tanti utenti, stessi dati
• Facilità d’uso: interfacce sono tutte alle st3esso modo. Siamo abituati ad avere sempre delle interfacce fatte
allo stesso modo e siamo abituati a usare quelle. Es vado su un sito mobile e mi aspetto di avere 3 trattini in
alto per il menù, mi aspetto di poter scorre con il dito una pagine
o Attraverso i browser
• Tecnologie standard
o Sviluppo semplice: non ci sono un mucchio di linguaggi di programmazione per fare un sito web ma
c’è né uno:
• HTML: per fare la struttura della pagina
• CSS: fogli di stile
• JAVA: per la parte dinamica del sito

ORIGINI DEL WEB

Web è diverso da internet. Internet è la rete. Prima del Routing, se una strada è bloccata/non c'è più trova
un’altra strada da percorre. È difficile da bloccare. Il Web è un’infrastruttura che viaggia sopra internet, (non è
l’unica) quella che usiamo con il browser e con le app e quella del protocollo HTTP. Tutto quello che viaggia su
HTTP è web.

Le web app nascono (come le conosciamo oggi) nel 1989 con Tim Barners-Lee.
URI [uniform resource identifier] è il sistema che consente di dare un identificatore (un nome) a qualsiasi risorsa
su internet. (indirizzi unici per andare ad una pagina)

HTML [hypertext markup language] è un linguaggio che definisce la struttura della pagina web (markup) e gli
hyperlink (grazie all'uri).

HTTP [hypertext transfer protocol] è il protocollo di scambio dati di alto livello tra client e server.

Questi elementi hanno consentito lo sviluppo del primo web server e del primo editor e browser, costituiti da:
pagine statiche, markup e hyperlink (ho una pagina, clicco su qualcosa e vado su un alta pagina)

EVOLUZIONE DEL WEB

• Struttura:
1. HTML: markup --->pagine non interattive. Ogni modifica ricarica l’intera pagina
2. Link: navigazione
• Tecnologie:
3. Javascript (1995) ---> linguaggio di programmazione lato client. Interazione ed eventi
4. Cascading Style Sheets (1998) (CSS) ---> stili per elementi. Animazioni. Responsiveness. Separazioni
presentazione e struttura. CSS ha permesso di fare un sito unico per mobile e computer, prima non era
così andavano fatti separatamente.
• Sessioni (client/server): identifica le richieste del singolo utente
• Cookie: un modo per far si che la sessione sia persistente anche quando usciamo dal browser e quando
torniamo per esempio ci permette di aggiungere cosa nel carrello e quando torniamo il giorno dopo c'è ancora,
es whatsapp non dobbiamo loggarci ogni volta.
• Persistenza

AJAX (NB: chiede all’esame)

A= chiamata asincrona. connessione asincrona: a
Ajax: permette di scambiare dati con il server senza
dover ricaricare la pagina. Ajax permette di
"parlare" con il server e prendere solo le
informazioni necessarie. È una tecnologia che
permette al browser di modificare i dati senza
ricaricare la pagina.

Esempio:

• Contenuti dinamici
• Liste infinite (caricare pezzi di pagina che
prima non c’erano senza dover ricaricare la
pagina come scorre pagina instagram)
• Aggiornamenti in sottofondo (char,…) es
usare app da browser come whatapp se mi
arriva notifica la vedo subito

Ajax è una single page application: ovvero un app che carica tutta la struttura al primo click, una sola volta e poi
ogni azione del siti si svolge su quella singola pagina senza essere ricaricata.

APPLICAZIONI MOBILE

Dal 2007 nascono poi gli IPhone e Android, che consentono di accedere al web anche da cellulare. Questo
richiede una flessibilità delle dimensioni dell’interfaccia (responsive design). Per questo motivo nascono i
framework, che consentono di creare interfacce adattive e standardizzate in poco tempo.
ERA DEI FRAMEWORK
Implementazione logica di uno o più design pattern che facilito lo sviluppo di software.

• Per supportare la variazione dei dispositivi/dimensioni

Responsive design (es Bootstrap, Foundation)
• Per realizzare linee guida UI standardizzati
Material design, Flat design (Material, Materialize, MUI, …)
• Per supportare varie piattaforme
Adaptive Design, Cross-platform: Cordova, Ionic
• Per affrontare la complessità delle app
Model-View-Controller, MVVM, MVP, … (Angular, React, Vue,…)

COMPONENTI
Creo un unico oggetto e poi lo uso in vari modi a seconda delle proprietà che gli assegno. I componenti sono
quindi:

• Riusabili: qualsiasi framework, qualsiasi

applicazione
• Standard: qualsiasi browser e piattaforma
• Modulari: isolati da altri componenti e stili
• Potente: da semplici a complessi

Figura 3: esempio di un componente

IL WEB OGGI

--> un’unica pagina, che poi

ricarica i singoli pezzi senza
ricaricare l’intera pagina

--> standard vanno usati perché il

cliente se li aspetta
PROGETTO ESAME
Progetto (da consegnare 3 giorni prima, anche a gruppi max 3 studenti)

• Almeno cinque pagina/meccaniche differenti. Esempio: commento libro

• Almeno una interazione con l’utente e scrittura su DB. Esempio: stelline
• Uno di una API o DB popolato. API è pubblica mentre DB la devo creare io
• Responsiveness: la pagina si deve vedere bene e funzionare bene su tutti i dispositivi: computer,
telefono, tablet. Questa parte della responsiveness può essere fatta con bootstrap o vuetify.
• Tecnologie spiegato durate il corso: VueJS

L’esame è ORALE. All’orale chiede quello che c’è nel codice, dobbiamo essere consapevoli di quello che
mettiamo perché ogni pezzo del codice può essere una domanda d’esame.

NB: queste sono le cose basi per il 30 se si vuole di + bisogna mettere cose extra come: animazioni
HTML
INTRODUZIONE
HTML: Hypertext Markup Language. HTML non è un linguaggio di programmazione, ma di markup. Markup termine
che viene ereditato dalla tipografia. Marcatori che vengono inseriti all’interno del testo e dicono come questo testo
deve essere visualizzato.

markup= tutto quello che c'è dentro è testo e quindi viene visualizzato. Posso mettere temi qua e là per dare del
informazione aggiuntiva al testo.

HTML è il primo linguaggio per realizzare pagine web. È nato nel 1989 al CERN di Ginevra.

HTML 5 serve a descrive il contenuto (struttura), ma non la forma. Però fino a qualche anno fa gestiva anche la
forma, dopo si è deciso di separare le due cose.

HTML è:

• Insieme di marcatori: HTTML è una lista di marcatori (tag(, cioè una lista di parole che si possono mettere
tra < > all'interno di un test. È un insieme di marcatori (tag) che si associano al testo per identificarne la
funzione.
• Non è case-sensitive: posso usare sia maiuscolo e minuscolo. per convenzione si usa tutto minuscolo. È
molto flessibile, e il browser ancora di più. Quindi se ci sono dei piccoli errori (es. una virgola mancante)
il browser tendenzialmente capisce comunque, ma è sempre meglio fare tutto perfettamente.
• Il documento contiene solo testo e marcatori: testo viene visualizzato sulla pagina
• Simile a XML, ne esiste un dialetto chiamato XHTML.

HTML TAG
Unità fondamentale dell’HTML, definisce il ruolo. Il tag (marcatore) parola, che viene inserita tra <…>

I tag sono inclusi nelle parentesi angolari <>

Il tag di chiusura è preceduto da /

Normalmente i tag sono a coppie: tag di apertura e tag di chiusura, per es <html> </html>.

I tag possono avere degli attributi (parametri). Esempio: <a href=“http://www.ilmiosito.it/”>link</a> ---> quello che
vedo sarà scritta link che posso cliccare per andare a www.ilmiosito.it

I tag possono essere annidati. (Quelli che apro dopo gli chiudo prima) (es testo grassetto e corsivo, prima apro tag
grassetto e poi tag corsivo poi dovrò prima chiudere tag corsivo e tag grasetto)

FILE HTML
Normale file di testo, estensione .htm o .html

Visualizzabile da qualsiasi browser

STRUTTURA HTML
Una pagina HTML è costituita da:

• tag <html>: racchiude l’interno documento. Ogni documento inizia con <html> e finirà con </html>. Primo tag
aperto e ultimo tag chiuso

All’interno dell’HTML ci sono due macro sezioni:

• tag <head>: contiene metadati e intestazioni e collegamenti a file esterni (fogli di stile CSS e script JS).
Contiene informazioni del sito che non devono essere visualizzate sul sito ma sono importanti. Quello che
metto qua non lo vedo sul sito. Contiene informazioni che non sono relative all’estetica della pagina ma sono
relative alla struttura. Contiene informazioni che non vengono visualizzate nella pagina.
• tag <body>: contiene il contenuto del documento. Quello che metto qua sono le cose che andrò a visualizzare
sul sito. Contiene la parte visibile della pagina

Esempio: struttura HTML

è un tag singolo. Serve per comunicare al browser la tipologia di file che sta
ricevendo e far sì che legga i dati in modo corretto.
tutto ciò al di fuori di questi tag verrà ignorato
tutto ciò che sta qui non verrà visualizzato sulla pagina
Titolo pagina che vedo nel tab della pagina, posso mettere icona
pagina, riferimenti pagine di stile, file java, tutti i riferimenti non
inclusi nella pagina
tutto ciò che c’è in questo tag verrà visualizzato nella pagina

TIPI DI TAG
Abbiamo due tipologie di tag:

• Elementi contenitori: hanno tag di apertura e chiusura. Esempio <html> </html> Alcuni tag si aprono e si
chiudono e quindi conterranno delle informazioni
• Elementi vuoti: hanno solo tag di apertura. Sono quei tag che non prevedono l’inserimento di un testo al
loro interno. Esempio tag <br> (o <br/>(usare questa forma)) che indica vai a capo oppure va usato quando
devo inserire un immagine

ELEMENTI DELLA PAGINA

I vari tag si dividono anche in varie categorie:

• Block elements (quando metto un tag in quell’elemento dopo browser va a capo): generano una nuova riga e
possono contenere altri block elements (oltre che inline elements)(vengono inseriti uno sotto l’altro) es
paragrafo o titolo
• Inline elements (elementi non vanno a capo): possono contenere solo testo o altri inline elements e vengono
visualizzati sulla riga corrente (non vanno a capo) es testo in grassetto o in corsivo (non necessitano di andare
a capo)
• In generale ogni elemento ha una formattazione di default.
Esempio tag inline e tag block

apro paragrafo

chiudo paragrafo e dopo </p> browser va a capo

non va a capo Figura 4: risultato codice

dopo grassetto
(Inline elements)

COMMENTI:
I commenti non vengono letti dal browser, ma sono utili per una comprensione del codice sia per il programmatore
stesso sia per chi guarda il codice. I commenti possono essere su più righe. Utili magari per separare le varie
funzioni del sito

La sintassi per inserire un commento è:

COME SCRIVERE BENE

• Rientrare il codice man mano che si entra nei sotto-tag

• Usare coerenza (o tutti minuscoli o tutti maiuscoli)
• Se possibili, usare tag di chiusura (es br/>
• Nota: per andare a capo si usa <br/>, quindi si può andare a capo nel codice per renderlo più pulito

ORGANIZZAZIONE DEL TESTO

Html divide la forma dal contenuto

• Sei tag di intestazione (da <h1> a <h6>) : permette di creare 6 livelli di titoli diversi es h1 titolo, h2
sottotitolo,… hanno già una formattazione. Esempio: <h1> titolo </h1> (tipo block, va a capo quando
chiuso, è un contenitore)
• <p> testo </p>: paragrafo (tipo block, va a capo quando chiuso, è un contenitore)
• <pre> testo </pre> : testo pre-formattato (compresi gli a capo). (copia e incolla il testo così com'è, compresi
gli a capo, e di default ha un font di macchina da scrivere). (tipo block, va a capo quando chiuso, è un
contenitore)

• <span>< /span> [delinea una parte di testo che sarà gestibile dal CSS in maniera diversa dal resto del testo]
• <div>: consente di dividere varie parti di testo. Può contenere ad esempio diversi paragrafi e di default non
ha margini. Va a capo.
• <span>: elemento inline dei default. consente di trattare con CSS una parte di testo diversamente dal resto.
Ha più o meno la stessa funzione di, ma sulla stessa riga.
• <font> elemento inline in disuso. Riguarda le caratteristiche estetiche del font nel codice HTML. Non si usa
con HTML5 più perché viene usato in CSS.

Elementi block di default, hanno margine inferiore e superiore pre-impostati che posso però essere sovrascritti
con i fogli di stile.
Tag che non necessitano di chiusura:

• <br />: va a capo

• <hr />: lascia una riga di spazio divisoria

ELENCHI
Gli elenchi sono tutti tag block, quindi tutti i tag vanno a capo da soli

Elenchi ordinati Elenchi non ordinati

Type (attributo): 1, a, A, i, I – start (per far partire un type: disc, circle, square
elenco dal numero che voglio io es ol start=”8”
elenco parte da 8) <ul type=“disc”>
<li>Primo punto</li>
<ol type=“1”> <li>Secondo punto</li>
<li>Primo punto</li> <li>Terzo punto</li>
<li>Secondo punto</li> </ul>
<li>Terzo punto</li>
</ol>

NB: se non si mette nulla come attributo type, cioè se si mette solo ol di default ho elenco con i numeri,
viceversa se si mette solo ul di default ho un elenco a pallini neri

ELENCHI DI DEFINIZIONE (per esempio: utili per creare sottoparagrafi)

Primo termine: spiegazione dettagliata del primo

termine

Secondo termine: spiegazione dettagliata del

secondo termine

Figura 5: esempio elenco di definizione

FORMATTAZIONE (non ha valenza estetica ma di significato)

• <strong> testo </strong>: testo in grassetto (quando un testo importante)

• <b> testo </b> : testo grassetto
• <big> testo </big>: testo grande
• <small> testo </small>: testo piccolo
• <i> testo </i> : testo in corsivo
• <em> testo </em>: testo enfatizzato
• <u> testo </u>: testo sottolineato
• <sub> testo </sub>: pedice
• <super> testo </super>: apice
• <tt> testo </tt> testo a macchina da scrivere
• <strike> testo barrato </strike>
LINK
• Si usano per creare collegamenti con altre pagine (interne o esterne al sito) oppure con servizi esterni (per
esempio la posta elettronica).

Esempio: href, in questo caso, è un attributo del tag <a>. Il testo contenuto tra <a> e </a> sarà quello che l'utente
visualizza e che se viene cliccato verrà reindirizzato al link indicato nell'attributo (può essere una pagina interna o
esterna al sito oppure con servizi esterni, ad esempio una mail a cui scrivere).

<a href=“http://www.ilmiosito.it/”>testo del link</a> (crea collegamento con un sito)

<a href=“mailto:[email protected]”>scrivimi </a> (crea collegamento con la posta)

In css:

text-decoration: none; /togliere sottolineatura/

IMMAGINI (tag img che non necessita di chiusura)

Serve per visualizzare una immagine nella pagina

<img src=“gattino-puccioso.jpg” title=“il mio gattino puccioso” alt=“Gattino puccioso”/>

src: “indirizzo immagine”

alt: testo alternativo. es letto da assistenze vocale.Con l'attributo alt si inserisce il testo alternativo. È importante
che ogni immagine abbia un testo alternativo così che il sito possa essere certificato come accessibile.

title: utilizzato per fornire ulteriori informazioni sull'immagine, appare al lettore quando passa il mouse sopra
l'immagine, tipo tooltip

TABELLE

• <table>: introduce la tabella. Si usa all’inizio e alla fine

• <tr>: introduce la riga
• <td>: introduce la cella
• <th> introduce la cella di intestazione

Una tabella è costituita da 3 sezioni:

• <thead> introduce l’intestazione della tabella (titolo colonne)

• <tbody> introduce il corpo della tabella
• <tfoot> introduce il piede della tabella

Attributi:

• Attributo rowspan: numero di righe su cui estendere la cella. Esempio: <td rwospan= “2”> (unire due
colonne in senso verticale) (coinvolte + righe)
• Attributo colspan: numero di colonne sui estendere la cella. Esempio: <td colspan = “2”> (unire due
colonne in senso orizzontale)
• <caption> serve per dare una didascalia alla tabella.
Esempio:

I bordi della tabella

gli metto con i fogli di
stile

Esempio su come si usa attributi rowspan

I bordi della tabella gli metto con i fogli di stile

ID E CLASS
Ogni tag deve essere possibile identificarlo. ID e CLASS sono attributi assegnabili a tutti i tag HTML (div,
paragrafi).

ID: identifica in modo univoco un singolo elemento. PROPRIETÀ A SENSO PER UN OGGETTO SOLO. Identifica un
solo elementi all’interno della pagina.

CLASS: identifica un gruppo di elementi. È molto utile per modificare tutti gli elementi di una categoria in unica
vola. PROPRIETÀ A SENSO PER PIÙ OGGETTI. Può essere usato per più tag. Può identificare un gruppo di tag
HTML

Esempi:

CARATTERI SPECIALI
Si usa il simbolo & seguito dal codice del carattere e dal segno di punto e virgola. Oppure in alternativa, si può
usare il codice numerico dei simbolo, in decimale o esadecimale.

Esempio: > (maggiore)

< (minore)

&#33!; (punto esclamativo)

ALTRI TAG IN <HEAD>

• <title> indica il titolo della pagina. Lo vediamo nella schede del browser come nome della pagina
• <link> collega un file esterno o un’altra pagina (es linkare CSS. In CSS le regole sono in un altro file)
• <style> specifica un blocco di istruzioni CSS
• <script> specifica un blocco o include un file esterno JS (funziona come style)
• <meta> delimita i metadati della pagina. Informazioni aggiuntive che si possono dare alla pagina

HTML5
HTML nato nel 1989 con il web da Tim Bermers-Lee.

SEMANTIC WEB
HTML esprime la sintassi, non la semantica. È nato per gestire pagine con link. Non è attento all’accessibilità.

HTML5 ha separato completamente la sintassi con la semantica. I “vecchi” tag HTML (così come le proprietà) che
stabilivano regole estetiche sono stati resi obsoleti. HTML5 si dedica alla semantica delle pagine. Pagina web deve
vedersi bene anche se senza i fogli di stile

tag <font>: proprietà align, proprietà color ecc resi obsoleti con nascita di HTML5
ELEMENTI DI STRUTTURA
HTML4: tanti div che avessero dei nomi, poi chiamati e poi usando
CSS venissero intercettati per farli divertare: sidebar, menù,…
mentre con HTML5 creati dei tag apposti. In particolare, si sono
creati:

• <article>: definisce un articolo. Pare centrale

• <footer>: definisce il piè di pagina (contatti, privacy police)
• <header>: definisce l’intestazione di una pagina (loghi)
• <nav>: definisce il menù (menù a comparsa)
• <section>: definisce una sezione (posso essere inclusi anche
Figura 1:HTML5
altri pezzi)

ELEMENTI INLINE

• <mark>: definisce testo evidenziato

• <meter>: definisce un gauge
• <progress>: definisce una barra di progressione
• <output>: definisce l’output di un calcolo
• <time>: definisce uno specifico momento

VIDEO
Il tag <video> definisce un video, includendo l’interfaccia necessaria per la sua riproduzione. Include i codec
standard (h.264, ogg, ecc.). Se il browser lo supporta, include anche l’accelerazione hardware e l’encoding GPU.
Con il tag <video> vengono inclusi tutti i pulsanti.

<video src="video.mp4" id="videoTag"> </video>

AUDIO:
Il tag <audio> definisce un clip audio, includendo l’interfaccia necessaria per la sua riproduzione. Include i codec
standard (mp3, aac, ecc.). Completamente programmabile: si può decidere per esempio di farlo partire con la
pagina, di mettere i controlli,…usando determinati attributi.

<audio src="audio.mp3" id="audioTag" autoplay controls> </audio>

CANVAS E SVG (approfondire se si vuole usare per esame)

• Elemento block che permette di disegnare grafica 2D o 3D usando comandi programmabili.
• Completamente programmabile
• Canvas è bitmap
• SVG è vettoriale

ALTRO di HTML5
Geolocalizzazione Nuovi strumenti per l’integrazione di JS

Formattazione automatica degli input (form) Notifiche, socket, ecc

Nuovi attributi per i form

CSS
INTRODUZIONE
HTML programma la struttura della pagina (titolo, paragrafo, tabelle, …) , CSS mi dà l’aspetto estetico, mentre il
linguaggio JAVA mi permette di creare delle pagine interattive.

CSS= cascading style sheets

• Cascading: procedura che determina la priorità di applicazione delle regole.

• Style: si occupa di determinare l’estetica (lo stile) di una pagina web. Come la pagina viene visualizzata:
font, colori, dimensioni, …
• Sheets: rappresenta i template, o insiemi di regole che vengono poi applicate per l’estetica

CSS [Cascade Style Sheet] nasce nel 1996 e si usa per gestire la grafica (e quindi la forma) di una pagina web
attraverso delle regole (a cascata, secondo un ordine di priorità) e dei template.

LA SINTASSI DELLE REGOLE CSS

Selettore: parola che sono i selettori ovvero elenco degli elementi HTML su cui lo stile si applica. Nell’esempio
sopra stiamo definendo uno stile per tutti i tag HTML chiamati h1

In CSS le regole sono racchiuse nelle parentesi graffe, che vengono applicate al selettore.

Regole formate da una proprietà: valore della regola.

La proprietà è separata dal valore tramite i due punti : . Ogni dichiarazione termina con il punto e virgola ;

Si può scrivere tutto su una riga, ma è meglio non farlo.

Nell’esempio: i h1 saranno blu di dimensione 12

SELETTORI
Non utilizza i tag, come HTML, ma i selettori ovvero delle parole chiave che selezionano l'elemento HTML a cui
applicare la regola CSS. I selettori possono essere di 3 tipi:

• tag HTML: senza prefisso (per es. p, h1, ecc.)

• classe: usa il punto . come prefisso (per es. .lamiaclass) (Uso la classa quando le proprietà sono riferite a più
di un oggetto)
• ID: usa il cancelletto # come prefisso (per es. #ilmioid) (Uso ID quando l’ha proprietà l’ha solo un oggetto)
Esempio:

Parte in HTML Parte in CSS

Esempio 1: tag HTML

<h1> Questo è un titolo</h1> h1 {

color: blue;
Alla scritta questo è titolo gli verranno assegnate le font-size: 12px;
proprietà definite in CSS, ovvero colore blu e }
dimensione 12

Esempio2: CLASSE

<div classs= “lamiaclasse”> Un po’ di testo </div> .lamiaclasse {

color: yellow;
Tutti gli oggetti chiamati con lamiaclasse gli verranno text-align: right;
applicare le proprietà che sono state assegnate. }

Esempio 3: ID (id è unico)

<span id=“ilmioid”>Bla bla bla</span> #ilmioid {

color: white;
font-weigth: bold;
}

TIPI DI INCLUSIONE CSS

• file esterno dove ho inserito tutte le regole. Per includere file CSS devo usare tag link va messo all’interno di
head.

<link href="style.css" type="text/css" rel="stylesheet" />

href: indica il nome del file che vogliamo andare ad aprile.

• insieme di regole interno (usa tag style nel head file HTML):

<style type = “text/css”>

Regole CSS

</style>

• regole inline nei tag HTML (sconsigliato, utile per debug), difficile capire dove sono inseriti CSS. Le regole
CSS si perdono per il codice HTML
Esempio: <h1 style=’font-size: 36pt: ‘> Questo testo è 36 pt </h1>
<h2 id=’sottotitolo’ style=’color:blue;’> questo testo è blue </h2>

ORDINE DI APPLICAZIONE
1. browser default: regole browser vengono sovrascritte, quelle del browser 1. tag (meno imp.)
sono meno importanti (es H1 se non mette niente ha regole di default) 2. class
2. file esterno o regole interne: nel file esterno va a vedere se ci sono regole con
sovrascrivono quelle del browser,
3. regole inline nei tag HTML (sconsigliato, utile per debug): poi va a vedere se ci 3. ID: regola id vince
sono regole inline che sovrascrivono quelle sopra del file esterno o regole sulla regola della
interne. Inline vince su file esterno e browser
class
• regole più specifiche vincono su quelle più generiche (es: voglio che regola valgo su tutti gli h1 vs voglio che
questa regola valga su tutti gli h1 che però sono in ID,.... la seconda è più specifica e vince quella)
• a parità di diffusione, vince l’ultima regola definita (es metto prima colore blu e come ultimo metto verde,
viene applicato il verde)

Se una regola con priorità minore non vogliamo che sia sovrascritta scriviamo !IMPORTANT dopo la regola.

Esempio: background-color: white !important;

Quando una regola viene sovrascritta da una seguente viene barrata, questa cosa la possiamo vedere dalla
console.

EREDITARIETÀ

• Le regole relative a testo ed estetica sono ereditate (font, colori, sfondi, ecc.)
• Le regole relative al boxing model non sono ereditate (bordi, margini, ecc.)

SELETTORI COMBINATI

Selettore Esempio Descrizione

* * Tutti i tag

selettore p Tutti gli elementi

selett, selett div, p Tutti i <div> e tutti i <p> (unione)

Tutti i <p> che sono dentro un
selett selett div p
<div> (inclusione)
Tutti i <p>inclusi direttamente in
selett > selett div > p
un <div>
Tutti i <p> che si trovano subito
selett + selett div + p
dopo un <div>
selett ~ selett p ~ ul Tutti gli <ul> preceduti da un <p>

ESEMPIO

Esempio Descrizione
Tutti gli elementi di <p> che hanno classe “mia
p.miaclasse
classe”
#header p Tutti i <p> dentro il tag con ID “header”
Tutti i tag <h1> con classe “evidenziato” che si
#footer h1.evidenziato
trovano dentro il tag con id “footer”
div#dontent Il <div> con ud “content” (abbastanza inutile)

p, ul.lista Tutti i <p> e tutti i tag <ul> con classe “lista”

#header* Tutti i tag che si trovano dentro l’id “header”

SELETTPRO DI PROPRIETÀ

Selettore Esempio Descrizione

Tutti i tag che hanno la proprietà
[attribute] [target]
“target”
Tutti i tag che hanno la proprietà
[attribute=value] [target=_blank]
“target” impostata su “_blank”
Tutti i tag la cui proprietà “title”
[attribute~=value] [title~=fiore]
contiene la parola “fiore”
Tutti i tag la cui proprietà “title”
[attribute|=value] [title|=il]
inizia con “il” seguito da “-”
Tutti i tag la cui proprietà “href”
[attribute^=value] a[href^="https"]
inizia con “https”
Tutti i tag la cui proprietà “href”
[attribute$=value] a[href$=".pdf"]
termina con “pdf”
Tutti i tag la cui proprietà “href”
[attribute*=value] a[href*="mio"]
contiene la sequenza “mio”

ALTRI SELETTORI
https://www.w3schools.com/css/css_pseudo_classes.asp

Selettore Esempio Descrizione

::after p::after Inserisci qualcosa dopo ogni <p>

Inserisci qualcosa prima di ogni
::before p::before
<p>
Seleziona tutti i <p> che sono il
:first-child p:first-child
primo figlio del rispettivo padre
Seleziona tutti i <p> che sono
:last-child p:last-child
l’ultimo figlio del rispettivo padre
Seleziona tutti i <p>che sono il
:nth-child(n) p:nth-child(2)
secondo figlio del rispettivo padre
Seleziona tutti i tag che non sono
:not(selector) :not(div)
<div>
Seleziona tutti i tag su cui c’è
:hover a:hover
posizionato il mouse
:root :root Seleziona l’elemento più in alto

Esempio:

h2:hover{

color: green quando passo mouse su h2 colore scritte cambia

I COLORI IN CSS
• Usando il nome del colore, es. blue, yellow Ce ne sono 140.
• Usando i tre valori RGB: rgb(red, green, blue), es. rgb(0, 0, 0) I tre valori RGB vanno da 0 a 255.
• Usando il valore esadecimale di RGB, es. #FF0000 I tre valori vanno da 00 a FF (da 0 a 255 in base 16)
• Usando RGBA (se inserisco opacità): rgba(red, green, blue, alpha). Es. rgba(0, 0, 0, 0) Il quarto valore va da
0 (invisibile) a 1 (opaco)
• Come HSL: hsla(hue, saturation, lightness) es. hsl(0, 100%, 50%), oppure hsla(hue, saturation, lightness,
alpha). Parametro alpha indica l’opacità e si indica con un numero compreso tra 0.0 (completamente
trasparente) e 1.0 (completamente opaco)

Esempi:

#p1 {color: rgb(255, 0, 0);}

#p2 {background-color: red; }

#p3 {background-color: hsla(120, 100%, 25%, 0.3);}

#p4 {background-color: rgba(0, 0, 255, 0.3);}

#p5 {background-color: hsl(120, 60%, 70%);}

Elenco colori: https://www.w3schools.com/cssref/css_colors.asp

LE UNITÀ DI MISURA

• Unità di misura assolute: cm, mm, in (2.54 cm), px (1/96 di in), pt (1/72 di in), pc (12 pt) (per px dipende dal
dispositivo) (dimensioni uguali su tutti gli schermi)
• Unità di misura relative: (dipendo da qualche altra misura che c’è nella pagina)
- em (relativo alla dimensione del font) 1em= uguale al testo mentre per esempio se mettiamo 1.2em più
grande del testo
- % (in percentuale rispetto al default o al parent)
- ex, ch, rem, vw, vh, vmin, vmax

ALTRE AMANITÀ
• per linkare file esterni si usa url(). Esempio: url(‘pippi-calzelunghe.jpg’), si usa ad esempio per mettere come
sfondo ad un id una certa immagina oppure per elenco puntati pallino
• Initial: rimette il valore iniziale di quel attributo e non eredita.

#myh1{

font-size:initial;

• Inherit: forza l’elemento a ereditare la proprietà dal padre (anche se di natura non l’ho erediterebbe)
BACKGROUND
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background

Proprietà Descrizione
Tutte le proprietà insieme. Sette sfondo di un certo
background
oggetto
background-attachment Indica se lo sfondo scorre con la pagina

background-color Colore dello sfondo

background-image Immagine di sfondo definita con url()

background-position Posizione dell’immagine di sfondo

background-repeat Se e come l’immagine di sfondo si ripete

background-size Dimensione dell’immagine di sfondo

Esempio:

body {

background – color: aqua;

background – image: url (“img_tree.gif”);

background – color-repeat: no reapt

background – attachment: fixed; (immagine non scorre con la pagina)

background – position: top right;

BORDI
Ci sono un’infinità di proprietà, che aggregano qualsiasi combinazione (per es. border per tutte le proprietà
insieme, border-color per il colore, border-left-color per il colore di quello sinistro).

• border: dimensione stile colore

• border-image: cornici pacchiane
• border-radius: angoli arrotondati

stili: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset| initial|inherit

ordine 4 valori: sopra, destra, sotto, sinistra 3 valori: sopra, sinistra/destra, sotto 2 valori: sopra/sotto,
destra/sinistra 1 valore: tutti
Esempio: Parte CSS

h1 {

border color:red;

border-width: 5px (sopra/sotto) 10px (dx/sx)

border-style: solid; (altri parametri: dotted, double)

border width: 5px(sopra), 10 px (sx/dx), 20px (sotto) | border-radius: 5px (angoli arrotondati)

PROPRIETÀ BORDI
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border

TESTO
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_font

Allineamento del testo

text-decoration-style Stile della decorazione (come il bordo)

text-inden Indentazione del testo (in lunghezza)

FONT

• Font web-safe: https://www.w3schools.com/cssref/css_websafe_fonts.asp

• Google Fonts: https://fonts.google.com/
• Caratteri speciali https://www.w3schools.com/cssref/tryit.asp?filename=trycss_entity

Per usare un font di google devo: copiare codice per includerlo nella pagina in head. Codice ha tag link() Poi
prendo nome famiglia che andrò ad usare in css.

PROPRIETÀ DISPLAY
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display

• inline: l’oggetto viene visualizzato come inline

• block: l’oggetto viene visualizzato come block
• inline-block: come inline, ma si possono impostare larghezza e altezza
• table-cell: ha l’aspetto di una cella di una tabella
• list-item: ha l’aspetto di un elemento di lista
• none: l’oggetto viene rimosso (comodo per debug)
• flex: l’oggetto viene trattato come flex

POSIZIONE
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute

Si usa la proprietà position

• static: il default, l’oggetto se ne sta dove viene messo

• absolute: l’oggetto viene messo in un punto preciso (gestito tramite left e top) rispetto al parent con il position
impostato diverso da static. Posso settare coordinare x e y dell’oggetto e lui si va a lineare in base al primo
genitore che trova che ha una posizion che non static.

Esempio:

< div id=”inside> Dentro </div> //esterno ad un div padre

#insiede{ //oggetto si posiziona, al vertice della pagina nel punto 0;0

Background-color: yellow;

posiotion: absolute;

top=0; //posso usare anche bottom o right

left=0;

• fixed: l’oggetto viene messo in un punto preciso della pagina (sempre)

• relative: l’oggetto viene spostato dalla sua posizione di default (tramite left e top)
• sticky: non scrolla rispetto al resto

Esempio:

DIMENSIONI E MARGINI

• width: larghezza dell’oggetto

• height: altezza dell’oggetto
• max-width e max-height: valori massimi
• min-width e min-height: valori minimi
• padding: margine interno dell’oggetto (valgono le regole del bordo)
• border: bordo interno dell’oggetto
• outline: bordo esterno dell’oggetto
• margin: margine esterno dell’oggetto (valgono le regole del bordo)
BOX MODEL
Stabilisce quanto grande è un oggetto e come
vengono calcolati i suoi valori.

Content = contenuto del mio oggetto;

Padding= margine interno (spaziare testo dal

bordo)

Margin= bordo esterno

L’oggetto occupa la somma di content

(width/height) + padding + border + margin

Per cambiare questo comportamento esiste la

proprietà box-sizing: border-box per cui la
proprietà width/height include padding e
border (ma non margin) (comportamento di
Internet Explorer all’inizio)

Esempio:
PROPRIETÀ OVERFLOW
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

Stabilisce come gestire gli elementi che sforano. Esistono anche overflow-x e overflow-y per gestire i singoli assi.

• visible: nulla viene nascosto; se l’elemento ha una dimensione fissata, il contenuto sborda.
• hidden: il contenuto dell’elemento viene nascosto
• scroll: il contenuto dell’elemento viene nascosto, ma vengono inserite barre di scorrimento per poterlo
vedere
• auto: come scroll, ma se il contenuto non esce non vengono visualizzate le barre di scorrimento. Barre
di scorrimento solo se necessarie compaiono
• initial|inherit: come sempre

PROPRIETÀ FLOAT
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_float

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_float5

• Stabilisce elementi che “svolazzano” nella pagina

float right, immagine posizionata a destra con testo affianco

< p style= “clear : right”> nuovo paragrafo e non voglio che stia affianco ad immagina ma sotto
VARIE ED EVENTUALI

• z-index: stabilisce quale oggetto sta sopra e quale sta dietro

• visibility: stabilisce visibilità oggetto (visibility: hidden: occupa ugualmente un posto nella pagina anche se
nascosto mentre display: none: fa sparire oggetto, come se lo cancellasse)
• word-wrap: come va a capo testo, posso decidere se far spezzare parola o farla andare a capo (valori break-
word o normal)
• white-space: come far andare a capo testo quando ci sono gli spazzi (valori possibili: normal (default: vai a
capo sugli spazi) nowrap (non andare a capo se non te lo dico io), pre (va a capo quando mettiamo gli a capo,
non c’è bisono di mettere tag <br/>)
• list style: modificare pallini di una lista, elenco puntato
• clip: tagliare un oggetto
• direction: stabilisce in che direzione deve essere il testo (rtl o ltr)
• cursor: tipi di cursori quando passo sopra un oggetto
• box-shadow: ombreggiatura box
• writing-mode: direzione del testo. La proprietà writing-mode specifica se le righe di testo sono disposte
orizzontalmente o verticalmente. I valori che può prendere sono: horizontal-tb|vertical-rl|vertical-lr;
• object-fit, object-position
object-fit: La proprietà CSS object-fit viene utilizzata per specificare come un <img> o un <video> debba
essere ridimensionato per adattarsi al suo contenitore. La proprietà object-fit: può assumere uno dei seguenti
valori:
- fill: È il valore predefinito. L'immagine viene ridimensionata per riempire la dimensione data. Se
necessario, l'immagine viene allungata o schiacciata per adattarsi
- contain: L'immagine mantiene il suo rapporto d'aspetto, ma viene ridimensionata per adattarsi alla
dimensione data.
- cover: L'immagine mantiene le sue proporzioni e riempie la dimensione data. L'immagine viene ritagliata
per adattarsi
- none: l’immagine non viene ridimensionata
- scale down: l'immagine viene ridimensionata alla versione più piccola di none o contain
object-position: Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own
content box"

• mask-image:

• resize: La proprietà resize definisce se (e come) un elemento è ridimensionabile dall'utente. Ridimensionare

un oggetto
• vertical-align: serve per stabilire all’interno di un tag inline dove devo visualizzare delle immagini (es
formula matematica, mi permette di allineare immagine a testo) usata anche per le tabelle per allineare il
contenuto
• letter-spacing: spazio tra le lettere
TABELLE

• border-spacing: spazio tra le celle (anche più valori, similmente a border)

• table-layout: dimensioni tabella. Stabilisce come browser deve generare la tabella. Può assumere valori:
auto (suddivide in base ai testi le colonne. Tabella generata in base al contenuto)| fixed(colonne larghe uguali)
| initial | inherit

COLONNE del TESTO

https://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

Proprietà Descrizione

colums Minima larghezza delle colonne e/o massimo numero

column-count Numero di colonne in una pagina

column-gap Spazio tra colonne

Stile del separatore di colonne (come il bordo) (bordo
column-rule-style
colonna)
column-rule-width Spessore del separatore di colonne

column-rule-color Colore del separatore di colonne

column-rule Tutte le regole insieme

Evita di spezzare gli oggetti nelle colonne (avoid)
break-inside (Stabilisce se voglio che oggetti vengano spezzati
all'interno della colonna.)

::BEFORE E ::AFTER
• Si usano per aggiungere codice prima e/o dopo al tag
• Per il contenuto si usa la proprietà content
• Si usa (per esempio) per le icone a fianco dei link oppure per le briciole (briciole=quando vado su un sito e
mi dice dove sono)

Esempio briciole: https://jsfiddle.net/e6wgqhj9/9

VARIABILI
• Permettono di settare parametri una volta in tutto il progetto
• Il nome della variabile inizia per - - ed è case-sensitive (esempio: --blue:#6495ed; --white:#af0e6
• Per settarle si usa la sintassi CSS standard
• Per richiamarle si usa var()
ALTRE FUNZIONI

• attr(): richiama il valore di un attributo dell’elemento selezionato

• calc(): fa calcoli su valori (anche di tipo diverso)

COUNTER
• Permettono di avere contatori all’interno delle pagine
• Il compito può essere svolto anche da JS (ma con CSS è più snello)
• Esempio: usato per contare sezioni di una pagina

@MEDIA (NB: DOMANDA ALL’ESAME)

È un tag che permette di aggiungere delle regole solo quando si verificano delle determinate condizioni nel
device (come, per esempio, riguardo alla grandezza dello schermo e non solo). Permette l’inserimento di regole
CSS personalizzate in base al device. Qua sta tutto il gioco di responsive che è presente nei siti a cui accedo in
base al device che uso

• @media not|only mediatype and (mediafeature and|or| not mediafeature) {

CSS-Code;
}

Esempio: CSS che si verifica quando la condizione tra parentesi è vera

@media only screen and (min-width: 900px) { <link rel=“stylesheet"

CSS-Code; media="screen and (min-width: 900px)”
} href="widescreen.css">

Possibili media: all, print (stampante), screen, speech (strumenti di lettura per non vedenti)

https://www.w3schools.com/csSref/tryit.asp?filename=trycss3_media2

https://www.w3schools.com/csSref/tryit.asp?filename=trycss3_media_menu

PROPRIETÀ DI @MEDIA
@media non si usa solo per la dimensione dello schermo ma anche per altre cose tra cui:
IL VIEWPORT (METTERE PER ESAME/CONTROLLARE CHE SIA INSERITO)
• È un tag che è stato aggiunto successivamente dopo la nascita dei telefoni.
• NB: quando faccio un sito per il telefono devo usare questo tag. Questa parte va messa in alto (in head)
sempre altrimenti sito si vede come se fossimo sempre su un computer. Stabilisce come il browser dovrà
iniziare la visualizzazione del sito in base a quello che gli dico io.
• Va aggiunto questo snippet:
<meta name=“viewport"
content="width=device-width, initial-scale=1">

• I possibili comandi sono:

- width
- initial-scale (stabilisce lo zoom iniziale, mettere uguale a 1)
- user-scalable (può essere messo su yes or no, e stabilisce se sito può essere zoomato o meno con le
dita)
- minimum-scale: (se user-scalable yes posso stabilire minimo a qui posso zoomare)
- maximum-scale: (se user-scalable yes posso stabilire massimo a qui posso zoomare)

FLEXBOX
• Serve per migliorare la distribuzione di oggetti nel layout della pagina. Rende obsoleto l’uso dei float per il
layout del sito. Flex dispone automaticamente gli oggetti. Per attivarlo basta mettere display: flex sul padre
• Ambiente di CSS che permette di gestire l’accatastamento degli oggetti in orizzontale e in verticale. Flex
permette di creare un div e dentro disporre delle scatole in un modo che decidiamo noi.

TERMINOLOGIA FLEX (css-tricks.com)

flex contanier: contiene tutti gli oggetti

flex item: contiene gli elementi che ci interessa posizionare all’interno della pagina
FLEXBOX
container= padre item=figli (oggetti)

FLEX-DIRECTION:
stabiliscono in quale direzione vengono accatastati gli oggetti. I valori possibili sono:

row | row-reverse | column | column – reverse

FLEX-WRAP: (si riferisci a come container deve

allineare box)

I valori possibili possono essere:

nowrap (non andare a capo) | wrap (vai a capo) |

wrap-reverse (vai a capo al contrario. Esempio
mail)

esempio parte CSS:

.container {
flex-flow: column wrap;}
JUSTIFY-CONTENT (si riferisci a come container deve allineare box)
Valori possibili sono: flex-start | flex-end | center | space-between | space-around | space-evenly

ALIGN-ITEMS (allineamento in base all’altezza) (allinea ALIGN-CONTENT (distribuzione all’interno di

Flex= avere tanti oggetti che posso essere allineati e ho

responsive anche, ma va adatto contento
ORDER (ordine degli oggetti)

FLEX-GROW (stabilisce quando spazio occupa ogni item)

Es: felx-grow:2 → oggetto grande il doppio rispetto agli altri

ALTRE PROPRIETÀ

• flex-shrink: Definisce la capacità di un elemento flessibile di ridursi, se necessario. Accetta solo numeri
positivi e no numeri negativi. Quanto viene ridimensionato oggetto
• flex-basis: dimensione di base dell’elemento
• align-self: (dice ad un oggetto come disporsi. NB: lo dico al figlio e no al padre)

• flex (include tutto, riferito al figlio singolo)

https://www.qhmit.com/css/flexbox/examples/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

GRID
Serve per organizzare il layout di un sito a griglia. Feature mancante per lungo tempo (sic!). Separa la semantica
dall’estetica. Il padre dovrà avere display: grid . Con display-grid si risolve il problema della responsive.

Flex: comodo per sito con le card, elenco di oggetti (es carrello della spesa)

Grid: layout per un sito intero. Grid è alternativo a flex e serve per dare un layout a griglia.

GRIGLIA TERMINOLOGIA

Esempio:

.container{

display: grid;

grid-template-rows: 150px auto 150px; //1 riga cala 150px, 2 riga auto=spazio che resta, 3 riga vale 150 px

grid-template-columns: 25% 75%; //creo le colonne 2

grid-template-areas: //specifico elementi griglia che ho definito sopra che è di 3 righe e 2 colonne. Dico cosa
c’è in ogni pezzo.
"header header" //1° riga unico oggetto, 1 cella sola, è come un
unisci cella e per farlo metto stesso nome

"sidebar content" //2° riga ha due valori diversi

"footer footer"; 3° riga: cella sola}

ESEMPIO:

https://codepen.io/Andrea_Barghigiani/embed/PGZGLW

DARE I NUMERI

Creo righe e colonne

DARE I NOMI

Do i nomi alla varie linee

SELEZIONARE LE CELLE

Figura 6:usando le coordinate: es item a inizia dalla colonna Figura 7: usando le coordinate: es item b parte da 1 vai fino
2, finisce con colonna five (posso usare sia numero che a col4start, poi parti da 2 e vai avanti di 2 (span-2)
nome usato) poi faccio stessa cosa con righe da row1 start
(1) fino a 3 (thrid line)
Figura 8: parti da 3, vai avanti di 2 per le colonne mentre per Figura 8: tutto in un comando per creare una griglia
le righe parti da third-line e arriva fino a 4

ALTRE AMENITÀ PER LE CELLE

• justify-self: start | end | center | stretch; Allinea il box sull’asse orizzontale

• align-self: start | end | center | stretch; Allinea il box sull’asse verticale
• place-self: align-self justify-self (entrambi i valori) (unisce in unico comando l’allineamento orizzontale e
verticale)

ALTRI AMENITÀ PER IL PADRE

https://css-tricks.com/snippets/css/complete-guide-grid/

• grid-column-gap e grid-row-gap (spazio tra colonne e righe)

Definisce il gap tra colonne e righe rispettivamente (grid-gap: grid-row-gap grid-column-gap per entrambe)
• justify-items: (si dà al padre per sapere qual è il comportamento di default degli item figli)
Valori: start | end | center | stretch
Applica la regola a tutti gli item
• align-items:
valori: start | end | center | stretch
Applica la regola a tutti gli item
• place-items
• justify-content e align-content: (stabilisce all’interno della riga come allineare il contenuto)
valori: start | end | center | stretch | space-around | space-between | space-evenly
• place-content

ANIMAZIONI E TRANSIZIONI
• In principio c’erano le GIF
• Poi è arrivato Flash
• Poi è arrivato CSS3 (con transizioni e animazioni)
• Poi sono tornate di moda le GIF

TRASIZIONI
• Permettono transizioni soft nelle modifiche di regole CSS
• Si attivano con la proprietà transform
• La proprietà transition stabilisce le proprietà transition: property duration timing-function delay
• timing-function può essere:
- linear: vado dal punto A al punto B in modo lineare, ogni pezzo fatto alla stessa velocità
- ease-in: c’è una accelerazione e poi una parte costante
- ease-out: prima c’è una parte in velocità costante e poi una decelerazione alla fine
- ease-in-out: accelera all’inizio e poi c’è una decelerazione alla fine

Esempio: https://jsfiddle.net/ahnpt6y8/

div {
width: 300px;
height: 100px;
background-color: yellow;
transition: transform 1s; //transizione: da tutte le proprietà: durata, delay
}
div:hover { //hover=quando ci passo sopra
transform: translate(10px, 10px); //translate= nome transizione}
TRANSZIONI
Quando c’è z, lavora con 3 dimensioni

Gli angoli si indicano con deg (es 90deg)

Esempi di transizioni:

https://www.w3schools.com/cssref/css3_pr_transform.asp

ANIMAZIONI (gli metto i vari frame dove voglio andare: da questo frame a questo frame; e lui crea animazioni
per arrivare all’inizio alla fine). Molto complesse da fare.

• Servono per costruire animazioni nella pagina

• Sono molto snelle e veloci (meglio di GIF animate e video)
• Si usa la keyword @keyframes
• Spesso associate a JS per inizio/fine
• Trovate spesso cose già pronte da modificare
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

25 fantastici effetti di animazione CSS e come crearli | Bloq creativo (creativebloq.com)

CSS Reveal Slider (codepen.io)
https://codepen.io/anon/pen/OqQyaZ

ICONE
https://fontawesome.com/

CERCANDO ICONA E CLICCANDO SU ESSA OTTENGO POI CODICE HTML. PRIMA DEVO INSERIRE CDN:

<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" type="text/css"

rel="stylesheet"/>

CDN da inserire se uso icone da fontawesome, va inserita in head dell’HTML.

CDN = link fisso a cui ci sono una serie di pacchetti, che possono essere utilizati

ESEMPIO

.box{
background-color: orange;
width:180px; /*domensione box*/
padding:5px; /*margine all'interno dell'oggetto*/
flex-grow:1;
}
#box2{
background-color: blue;
flex-grow: 2;

</style>
</head>
<body>
<div id="container"> 
<div class="box"> Ciao1</div> 
<div class="box" id="box2"> Ciao2</div>
<div class="box"> Ciao3</div>

</div>
</body>
</html>
BOOTSTRAP
https://getbootstrap.com/docs/5.3/getting-started/introduction/

https://getbootstrap.com/docs/4.0/components/

Bootsrap dà la possibilità di costruire siti completi e interessanti senza scrivere una sola riga di CSS.

È un framework per sviluppo di applicazione front-end (usa solo HTML e CSS, con un pizzico di JS) che permette
di costruire interfacce molto velocemente. Rilasciato da Twitter nel 2011 ed è infatti molto simile alla grafica di
twitter. Open source. Pensato per essere responsive, punto di forza di bootstrap. È il framework di questo tipo più
usato nel mondo.

Bootstrap da la possibilità di costruire siti complete e interessante, neanche complessi senza scrive una sola riga
di CSS.

PERCHÉ USARLO?
• Accelera lo sviluppo di applicazioni web: è molto rapito
• Responsive e orientato al mobile: permette di ottenere visualizzazioni diverse in base al dispositivo che si sta
usando
• Compatibilità garantita con tutti i browser: se usiamo comando bootstrap si vede d’appertutto
• Estensibile (temi)
• Non serve scrivere una riga di JS o CSS
• Documentato e supportato

INCLUDERE BOOTSTRAP
per poter usare bootstrap, vanno inserita questa CDN nella head di HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-

YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

OGGETTO CONTENITORE
Bootstrap= è elenco di classi che noi passiamo ad un oggetto. È un elenco di classi che noi possiamo usare
all’interno del nostro sito.

Il contenitore è quello dentro cui dobbiamo mettere il resto. Noi dobbiamo sempre avere un div, che è il nostro
contenitore. Ne abbiamo di due tipi di contenitore:

- Larghezza fissa: container. Container è una classe che da una larghezza massima al sito.
<div class="container">
<h1>This is a simple HTML + CSS template!</h1>
</div>

- Larghezza variabile, che si adatta al display: cotainer-fluid

<div class="container-fluid">
<h1>This is a simple HTML + CSS template!</h1>
</div>

La prima da applicare è container o container-d che possiamo dare al nostro div più grosso per capire se il nostro
sito a una larghezza fissa (container) oppure si espande in base allo schermo (container fluid).

• Per un contenitore a larghezza fissa si può usare la classe container.

• Se invece si vuole fare un sito fluido (larghezza che si adatta al display) la classe è container-fluid

GRID SYSTEM
Una cosa molto importante di bootstrap è il sistema di griglie (grid system) basato su flexbox.

Ogni oggetto è idealmente diviso in 12 colonne (innestabili) e noi stabiliamo ogni volta quante colonne volgiamo
che un div, pezzo di testo, immagine, ...occupi. Es questo oggetto occupa 3 colonne e questo 9 colonne. ogni
oggetto a cui volta è suddivisibile in 12 colonne.

Sono presenti i cinque breakpoint per la dimensione dello schermo

Figura 1: esempio grid system. La prima riga sono 12 celle da uno, la seconda sono
6 celle da 2, poi una cella da 4 e una da 8...posso sommare le celle come più mi
piace, l'importante è che la somma sia 12

BREAKPOINT
Servono per la responsivness. Ci sono 6 break points* che vanno bene per la maggior parte dei dispositivi XS,
SM, MD, LG, XL, XXL, non è obbligatorio usarli tutti, ma anche solo i 3 centrali. Funzionano un po' come @media:
in base al breakpoint selezionato le regole grafiche saranno diverse. Se lo schermo è più piccolo del breakpoint
messo, tutte le colonne andranno ad occupare 12 colonne.

I breakpoint quindi vengono usati per le dimensioni dei vari dispositivi:

• Extra small, meno di 576p (smartphone)

• Medium (md), più di 768px (tablet)
• Large (lg), più di 992px (computer)
OPZIONI DEL GRID SYSTEM

Figura 2: quando vogliamo fare un sito internet abbiamo delle classi che possiamo usare.
Quando mettiamo per esempio .col- classe per indicare le colonne senza mettere nessun
suffisso, questa cosa vale sempre anche per i dispositivi extra small. Se mettiamo un
suffisso come sm, md, lg, xl o xxl noi diciamo che sovrascriviamo quella classe per quando il
display supera una certa dimensione. Noi abbiamo sempre 12 colonne. Se vogliamo che un
componente occupi tutto lo schermo dobbiamo dirgli che occupa 12 colonne: col-12. Se
invece vogliamo ci siamo 2 colonne da 6 mettiamo col-6 e col-6

ADATTABILITÀ

• Quando lo spazio esaurisce (finiscono le 12 colonne a disposizione) il blocco viene spostato in basso (wrap)
• Per indicare velocemente il numero di colonne, usare .row-cols-[N].

Specifico valori solo di alcune colonne, poi verranno

automaticamente il valore delle altre colonne tenendo come
somma massima 12. In questo caso una colonna vale 6 mentre
le altre due saranno uguale a 3, perché 6 + 3+3 =12

DISPLAY
• Classi .d-[breakpoint]-[value] o .d-[value]
• Value è uno dei valori del CSS display (block, inline, ecc.)
• I valori si possono comporre per visualizzare determinati contenuti solo su alcuni dispositivi
• Esiste .d-print-[value] per la stampa
d-breakpoint = se voglio vederla sempre
d-none=se una cosa non voglio vederla mai
d-breakpoint-none= se una cosa voglio che scompaia per solo per un tipo di dispositivo.
Esempio:

<div class="row"> Cioè quando lo schermo più

<div class="d-md-none col"> grande del medium non si vede

si vede quando è piccolo

</div> Cioè quando lo schermo più grande del medium è

block mentre in tutti gli altri casi è none
<div class="d-none d-md-block col">

si vede quando è grande

</div>

3 of 3

</div>

SPACING (GLUTTER) (spazio tra le colonne. colonne non sono attaccate ma di default uno spazio loro. per
modificarlo posso settarlo con property - lato - dimensione)

• Rappresentano margin e padding del CSS

• Il gutter (spazio tra le colonne) di default è settato a 1.5rem (15px)
• Settabile con classe [property][sides]-[size] e [property][sides]-[breakpoint]-[size]
Settabile con classe [property][sides]-[size] e [property][sides]-[breakpoint]-[size]

[property] [size]

• m per margin • 0 per zero

• p per padding • 1 per default*25
• g per gutter (solo x e y) • 2 per default*0.5
• 3 per defualt*1
• 4 per default*1.5
[sides] • 5 per default*3
• Auto
• t per top
• b per bottom
• s (start) per left Esempi:
• e (end) per right
• x per left e right • mt-0
• y per top e bottom • px-2
• niente per tutti i lati quando viene omesso

esempio:

ALLINEAMENTO VERTICALE
• Si inserisce sul div con class row
• align-items-start (all’interno tutti i suoi elementi iniziano dall’alto) , align-items-center (elementi centrati),
align-items-end (elementi allineati in basso)
• align-self-start, align-self-center, align-self-end -->questi comandi gli do al singolo elemento.

Esempio:

<div class="container">
<div class="row"style="height: 200px">
<div class="col align-self-start">
1 of 3
</div>
<div class="col align-self-center">
2 of 3
</div>
<div class="col align-self-end">
3 of 3
</div>
</div>
</div>
Padding= margine

ALLINEAMENTO ORIZZONTALE
• Si inserisce sul div con class row
• justify-content-start, justify-content-center, justify-content-end
• justify-content-around, justify-content-between

OFFSET
• Si usa per lasciare uno spazio grande quanto una cella
• Utilizza la classe offset-[breakpoint]-[size]

<div class="container">
<div class="row" p-3>
<div class="col offset-3"> 
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col"> offset
3 of 3
</div>
</div>
</div>

md=maggiore/uguale di

TESTO
• Tag h1, …, h6 (e classi .h1, …, .h6)
• text-muted per il titolo secondario, lead per titoletto
esempio <h2 class=“text-muted”> Testo </h2> (testo in grigino rispetto ad un h2 normale)
esempio <h2 class=“text-lead”> Testo </h2> (testo in grigino rispetto ad un h2 normale)

• display-1, …, display-6
Esempio: <div class=“display-3”> Testo </div>

• Classe blockquote per le citazioni (e blockquote-footer per l’autore/footer della citazione)

• text-start, text-center, text-end, text-justify: allineamento
• Esistono anche text-[breakpoint]-[position]: allineamenti testo quando diminuisco testo
Esempio: <p class=“text-center text-md-left”> </p> : testo centrato quando piccolo e allineato a sinistra
quando è grande

• Classi text-wrap, text-nowrap, text-break

• Classi text-lowercase, text-uppercase, text-capitalize
• Classi font-weight-[type] e font-italic--->type: bold; bolder
• Classi text-monospace, text-muted, text-decoration-none (toglie sottolineatura es link)
IMMAGINI BOOTSTRAP (in una stringa assegno dimensione, quadrata, cerchio)

• Classe img-fluid per immagini grandi responsive (l’immagine scala sul suo contenitore)
• Classe img-thumbnail per fare thumbs di 200px
• Classi float-left e float-right per allineare a sx e dx (anche float-[breakpoint]-[where])
• Classe clearfix per azzerare i float
• Classe rounded per fare gli angoli arrotondat

Bootstrap Images - JSFiddle - Code Playground

FIGURE
• Sono come le immagini, ma complete di caption (caption si sposta con immagina, quando sposto un
immagine sposta anche caption)
• Classi figure , figure-img e figure-caption

<figcaption class="figure-caption">A caption.</figcaption>

</figure>

COLORI: Colors · Bootstrap (getbootstrap.com)

TESTI E SFONDI

• Classe text-[color]: per colorare il testo

• Classe bg-[color]: per lo sfondo
• Classe bg-gradient: per avere il gradiente
• Classe bg-opacity: per l’opacità

TABELLE

• Classe table (e table-dark per invertire i colori)

• Classi thead-light e thead-dark
• Classe table-striped = una riga bianca e una grigia
• Classi table-bordered, table-borderless, table-hover
• Classe table-sm: per rimpicciolire
• Classi table-[color]: sulle righe per colorare la riga singola specifica
• Classi table-responsive, table-responsive-[breakpoint]

Esempio: https://jsfiddle.net/tfwynuke/

BORDI

• Classi border, border-top, border-bottom, …

• Classi border-0, border-top-0, border-bottom-0, … (border-0 togliere bordo)
• Classi border-[color]
• Classi rounded (bordi arrotondati) , -top, …, -circle, -pill, -0
• Classi rounded-sm e rounded-lg

BOTTONI (Buttons · Bootstrap (getbootstrap.com) (se do classe btn diventa bottone anche con div: esempio:
Questo è un <a href =“” class=“btn btn-primary”> link </a> → link diventato bottone e mi da tutte caratteristiche del bottone
hover compreso

TAG PER BOTTONI (Buttons · Bootstrap (getbootstrap.com))

OUTLINE PER BOTTONI (Buttons · Bootstrap (getbootstrap.com))

Questo è un <a href =“”

class=“btn btn-outline-
primary”> link </a> →
bottone quando ci passo
sopra si colora

ALTRO SUI BOTTONI

• Dimensione: btn-sm e btn-lg: bottoni si possono fare piccolo o grossi Questo è un <a href =“” class=“btn btn-lg
btn-primary”> link </a>
• Active state: active
• Bottoni block (a tutta larghezza) <a href =“” class=“btn btn-block btn-lg btn-primary”> link </a
• Disabled state: attributo disabled: <input type=“sumit” value=“Invia” class=“btn btn warning” disable/>
• l’oggetto button è provvisto anche di JS per l’uso come input checkbox o radio

FORM
• Bootstrap offre molti strumenti per form “belli”
• Label e input sono raggruppati tramite class form-group
• input, textarea e select: usano la classe form-control
• Per i file: form-control-file
• Dimensione: form-control-lg e form-control-sm

Esempio: quando premo su scritto il mio testo mi si seleziona casella:

<form class="p-3">
<div class="form-group">
<label for="mytext"> Il mio testo </label>
<input placeholder="Inserisci il testo" id="mytext" type="text"
class="form-control"/>
<small class="form-text text-muted"> Scrivi qualcosa </small>
</div>
</form>

Appena premo sulla casella, inserisci testo scompare

form-text: testo piccolino all’interno di una pagina. Es messaggio errore quando non si compila una casella.

text-muted: testo in grigino

CHECKBOX E RADIO

• form-check, form-check-input, form-check-label

• Per l’inline c’è form-check-inline: più di un campo sulla stessa riga
• Se non c’è label: position-static (se volgio mettere solo casella senza scritta)

FORM GRID

• Al posto di row c’è form-row: più di un campo sulla stessa riga

• Form orizzontali: form-group row
• Per la dimensione dei label: col-form-label-sm, col-form-label-lg
• Classe form-inline per form tutti su una riga

https://jsfiddle.net/wx3qLufp/
https://jsfiddle.net/5n1cv6pq/

ALTRO SUI FORM

• form-text e text-muted per i suggerimenti

• Classi per screen reader (sr-only)
• Input group (prepend (metto prima), append(metto dopo))
• Form su una riga (form-inline)
VALIDAZIONE FORM
• Bootstrap offre un set di istruzione per la validazione
• Siccome i browser usano la loro, bisogna cancellarla con novalidate (mi dice quali campi sono corretti e
quali no)
• was-validate= mi dice in tempo reale mentre digito se va bn o no. (video 2 bootstrap min 38)
• needs-validate= controlla se ho compilato correttamente solo dopo aver premuto su tasto invia. Posso
usare ache tooltyps
https://jsfiddle.net/z8e1dft2/2/
https://getbootstrap.com/docs/5.3/forms/validation/#custom-styles

• In alternativa si può usare la validazione del browser

https://jsfiddle.net/g5ad486s/

MENU E NAVIGAZIONE

• Classe navbar attiva la barra di navigazione: crea barra di navigazione in alto

• Classe navbar-brand per il brand: immagine o testo del sito
• Classe navbar-expand-[breakpoint] per responsiveness
• Classi nav-item, nav-link, dropdown, navbar-toggler

Esempio: creazione barra di navigazione

<a class="navbar-brand" href="#">Nostro titolo</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown"> 
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> 
</li>
</ul>
<form class="form-inline my-2 my-lg-0"> 
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <!--pulsante cerca--
>
</form>
</div>
</nav>

COLORI NAVBAR Navbar · Bootstrap (getbootstrap.com)

Colori possono essere dark, posso scegliere io colore oppure usare bg-primary

INPUT GROUP
• È un add-on che si aggiunge prima o dopo un input
• Si usa la classe input-group
• Dimensioni: input-group-sm e input-group-lg
• Prima: input-group-prepend
• Dopo: input-group-append
• Testo: input-group-text
https://jsfiddle.net/kn6e2q59/

CARD: https://getbootstrap.com/docs/5.3/components/card/

• Inserisce una card con titolo, testo, bottone e immagine

• Classi: card, card-img-top, card-header, card-title, card-text, card-footer,

PLACEHOLDER
• Servono durante il caricamento asincrono
• Basta mettere la classe placeholder

ICONE
Inserire nella parte HTML, in head questa parte di codice sotto, per poter utilizzare le icone

<link rel="stylesheet" href=“https://

cdn.jsdelivr.net/npm/[email protected]/

font/bootstrap-icons.css">

ALTRE AMENITÀ

• Alert: stilizzazione che posso fare con bootstrap di messaggi che posso far comparire all’interno della
pagina. Messaggio che compaia o scompaia va fatto con Java
• Badge: etichette che posso mettere affianco ad una scritta
• Breadcrumb: briciole all’interno del sito per far capire dove sono
• Card:
• Carousel: elenco di immagini che può essere sfogliato automaticamente dopo un certo tempo oppure con
dei tastini. Si usa classe carusel. Posso metterci anche pallini sotto per far saper a quale immagine sono
• Collapse: permette ai menù di comparire quando ci clicco sopra. Può essere usato con qualsiasi oggetti.
• Dropdown: menù a tendina. Compaiono al click di un pulsante
• Jumbotron: template per creare una sorta di homepage. Può essere fluido o larghezza fissa
• List group: elenchi che possono avere varie sottoclassi
• Modal: finestrelle che posso comparire per segnale qualcosa all’utente
• Nav: oggetto generico che può essere inserito all’interno della pagina
• Pagination: tasti di paginazione
• Popover: oggetti che compaiono quando clicco da qualche parte
• Progress: barra di scorrimento. Ci sono anche quelle animate
• Scrollspy: quando io scorro mi scorre anche il menù relativo
• Tooltips: compaiono quando passo sopra un oggetto senza cliccarlo
JAVASCRIPT (https://it.javascript.info/)
COSA È JAVASCRIPT?
• Linguaggio di programmazione di alto livello (non dipende dall’ambiente di esecuzione)
• HTML, CSS, JS sono le tre tecnologie più importanti per lo sviluppo di applicazioni web
• È eseguito client-side su tutti i browser
o Interagisce tramite eventi del browser generati dall’utente
o Può modificare la struttura e il contenuto della pagina

STORIA DI JAVASCRIPT
• 1995: Brendan Eich per Netscape Communications crea un prototipo di linguaggio (LiveScript) per integrarlo
in Netscape Navigator. Inizialmente si chiama LiveScript. Cambia in JavaScript per marketing perché
linguaggio Java diventava molto popolare
• 1996: re-ingegnerizzato da Microsoft per IE3 (internet explorer 3) con nome JScript.
• 1997-1999: standardizzazione del linguaggio sotto il nome di ECMAScript
• 2005-2006: Ajax, Comet
• 2009-presente: Nuove versioni (ES5, ES6)

ESEMPIO DI JAVA SCRIPT:

head: intestazione

body: corpo della pagina

istruzione script viene fatta quando pagina viene caricata

var name ="DIPSCO"; //dichiarazione variabile

console.log("Variabile inizializzata"); //scrivo messaggio
su console
document.write ("Hello" + name); //scrivo contenuto sulla
pagian. volgio stampare contenuto della variabile per questo
richiamo nome che ho assegnato alla variabile

DICHIARARE JAVASCRIPT

• Inline: direttamente in HTML usando il tag <script> </script> (esempio sopra di Javascript)
• In un file separato, mettendo in head di HTM:
<script src=“main.js”></script>
• Generato da un framework (per es.Vue)

CARATTERISTICHE DI JS

• Linguaggio interpretato:
o Vengono eseguiti i comandi nell’ordine di dichiarazione
o Interprete incluso nel browser che legge codice riga per riga e trasforma il codice nel formato della
macchina e lo esegue
o Errori nel codice si trovano durante l’esecuzione
o L’esecuzione inizia subito dopo il caricamento della pagina
o Può interpretare sé stesso
eval('document.write("Ciao Ciao")'); //cambia contenuto pagina e scrive ciao ciao. Eval indica all’interprete di
eseguire qualsiasi codice che venga passato anche in modo dinamico.

Affianco al linguaggio interpretato in genere troviamo anche il linguaggio compilato. Linguaggio compilato:

1. Il compilatore trasforma il codice sorgente nelle istruzione che la macchina capisce

2. Il motore di esecuzione parte dal codice compilato
3. Errori nel codice si trovano durante la compilazione

SINTASSI DI JAVASCRIPT

• Punto e virgola facoltativo in fondo ai comandi

• Parentesi tonde per racchiudere parametri e condizioni

• Parentesi graffe per racchiudere blocchi di codice (se assenti, viene considerato solo un comando)
• Molto simile a Processing
• Case-sensitive
• Commenti con /* */ (blocco) oppure // (in linea)

INPUT/OUTPUT DI JAVASCRIPT
Input

• Eventi del browser (click, mousemove, ecc.)

• Prompt all’utente (“Come ti chiami?”)

Output

• Cambiamento della pagina (es document.write)

• Notifiche all’utente (es: alert (‘’))
• Scritture su console (es: console.log(‘’), console.err(‘’))

let valore = prompt ('Inserisci valore'); // risultato

di prompt lo salvo in una variabile
console.log ('Valore inseirito pari a ' + valore);
//mi chiede di inserire un valore tramite una finestra
e quando preme ok passa sotto. Utente pu scrivere qualsiasi cosa. console.log non visibile all'utente finale ma
all'utente
alert ('Hai inseirto' + valore); //successivamente mi compare finestra con valore che ho inserito e con bottone ok
document.write ('valore=' + valore); //stampa valore inserito modificando contenuto pagina

• prompt() e alert() funzioni predefinite. prompt() usato per chiedere input o visualizzare un messaggio
• console e document oggetti predefiniti. Console non è visibile all’utente finale, vede solo programmatore.
document.write: modifica direttamente il BODY della pagina, sovrascrive tutto il contenuto della pagina

STRUTTURA DI UN PROGRAMMA

• Sequenza di “statement”:
o Dichiarazione di una variabile: let valore = ‘Ciao’; (con let inizializzo una stringa)
o Dichiarazione di una funzione: function myFunction() { console.log('my func'); }
o Chiamata di una funzione myFunction(); allert(), prompt()
o Stratement di controllo flow: if, switch, for, while

• Si eseguono in ordine di sequenza

• All’interno di un blocco si possono dichiarare altre funzioni e variabili

ESPRESSIONI:

• Tipi di dato:
o Booleano: true, false
o Numerico: 1, -100, 3.14, 123e4, Nan, Infinity, -Infinity
o Stringhe: “my string”, “str”, ‘l\’apostrofo’, `I am a ${variable} inside` (ES6)
o Valore vuoto: null, undefined

• Variabili:
o Riferimento a una variabile: 100 + myVar

• Funzioni:
o Esecuzione di una funzione: 100 + myFunction()
o Attenzione! 100 + myFunction() non è come 100 + myFunction

STRINGHE
• Tra apici: 'questa è una stringa'
• Tra virgolette: "questa è una stringa"
• Tra backtick: `questa è una stringa
• I primi due sono equivalenti (ricordarsi di usare backslash per fare escape, qualora serva: 'ce n\'è bisogno')
• Il backtick permette di inserire all'interno della stringa variabili o espressioni.

ESPRESSIONI
Operatori:

• Aritmetici (il risultato è un numero): +, -, *, /, %, **

esempio: 100 + 200 (300), 100 / 0 (Infinity), 2 * "a" (NaN), 2 ** 3 (8), -myVar (-myVar)
• Stringhe (il risultato è una stringa): esempio “2”+”a” (2°)
esempio: “La variabile è ” + myVar + “.”
• Confronto (il risultato è un booleano): >, =, <=, ==, !=, === (confronto stretto), !== (confronto non solo
valore ma anche il tipo)
esempio: –100 > 200 (false), "a" > "b" (false), 5 == 5 (true), 5 === 5 (true), 5 == "5" (true, perché avviene
conversione automatica dei tipi in oggetti), 5 === "5" (false perché oggetti sono di due tipi diversi, no
conversione degli oggetti come avviene nel caso di ==)
• Logici (il risultato è un booleano): !, &&, ||
esempio: !true (false), true && false (false), 5 < 3 || 5 > 3 (true)
• Sul tipo: typeof, instanceof
esempio: –typeof "5" ("string"), typeof 5 ("number"), typeof null ("object"), typeof function() {} ("function")

Modifica sul posto:

• Modifica e assegna: +=, -=, *=, /=

• Incremento/decremento: ++,--

(v.info primo anno)

TYOE COERCION (CONVERSIONE AUTOMATICA)

• Conversione avviene solo per stringa, booleano o numero
• Si applica in operatori quando ci sono elementi di tipi diversi
• Dipende dall’operatore
o “+” in presenza di string diventa tutto string
12 + “5” (“125”)
o Operatori logici implicano conversione a booleano
!10 (false), !0 (true), ‘hello’ && 123 (true) (numeri diversi da zero si interpretano come true,
numeri uguali a zero si interpretano come false. Idem per le stringhe stringa vuota false, stringa
non vuota true)
o Operatori di confronto e aritmetici implicano conversione a numero
4 < “5” (true), “5” - 2 (3), attenzione! 12 + “5” (“125”), 12 + +“5” (17)
Eccezioni (==): NaN == NaN (false), null == 0 (false), null == undefined (true)
(Nan= not a number)

CONVERSIONE DEL VALORE

VALORE STRINGA NUMERO BOOLEANO

FALSE ‘false’ 0 FALSE

TRUE ‘true’ 1 TRUE

‘0’ ‘0’ 0 TRUE

‘1’ ‘1’ 1 TRUE

‘000’ ‘000’ 0 TRUE

‘uno’ ‘uno’ Nan TRUE

‘’ ‘’ 0 FALSE

Nan ‘Nan’ Nan FALSE

Infinity, -Infinity ‘Infinity’, - ‘-Infinity’ Infinity, -Infinity TRUE

null ‘null’ 0 FALSE

Undefined ‘undefined’ Nan FALSE

NB: DOMANDA ESAME: DIFFERENZA TRA “== e ===”
OPERATORI

• Bit a bit:
o AND ( & )
o OR ( | )
o XOR ( ^ )
o NOT ( ~ )
o LEFT SHIFT ( << )
o RIGHT SHIFT ( >> )
o ZERO-FILL RIGHT SHIFT ( >>> )

• Virgola

VARIABILI
Dichiarazione:

• var: versione “classica” (var nome_variabile= valore

variabile (stessa cosa per let)
• let: versione “moderna” (ES6)
• const: come let, ma non può più essere modificata. Posso
assegnare un solo valore

Nome della variabile:

• Non può iniziare con un numero

• Può contenere solo numeri, lettere, $, _
• Non può essere uguale alle parole riservate (if, for, let, …)

Inizializzazione/ binding

• normale: myVar = true; | Multipla: myVar1 = 1, myVar2 = 2;

• Se non inizializzata, vale undefined (costante)

VISIBILITÀ DELLE VARIABILI

• Le variabili dichiarate (anche più volte) con var sono visibili ovunque all’interno della funzione o programma
dove è definita, sia prima sia dopo la dichiarazione (hoisting=abilità variabile anche prima della sua
dichiarazione) (variabile dichiarata con var la vedo d’dappertutto ovunque la dichiari)
• Le variabili dichiarate (una sola volta) con let o const sono visibili solamente all’interno del blocco dove sono
dichiarate, e solo dopo la dichiarazione
(let visibile solo nel blocco dov’è
dichiarato e on al di fuori

• Meglio usare let e const (https://www.freecodecamp.org/italian/news/var-let-const-differenza/)

• Hoisting

CONTROL FLOW:
• IF
if (condizione) { p }
Il blocco p viene eseguito solo se condizione è vera
Nota. Esiste anche versione inline, l’operatore condizionale

Esempio:

• IF/ELSE
if (condizione) { p1 } else { p2 }
Se condizione è vera, viene eseguito blocco p1, altrimenti viene
eseguito il blocco p2

Esempio:

• IF/ELSE IF/ELSE
if (cond1) { p1 }
else if (cond2) { p2 }
else { p3 }
Se cond1 è vera, viene eseguito blocco p1, altrimenti se è vera
cond2 viene eseguito il blocco p2 altrimenti viene eseguito il
blocco p3 Figuur 7:esempio
ESPRESSIONI
Operatori:

• Operatore condizionale: condizione? p1:p2

• Operatore coalesce (concatenabile): v1 ?? v2 (non

supportato da IE)

CONTROLL FLOW:

• WHILE
while (condizione) { p }
Il blocco p viene eseguito ripetutamente, ma solo se (e finché)
condizione è vera

Esempio:

• DO WHILE
do { p } while (condizione)
Il blocco p viene eseguito ripetutamente, finché condizione è vera
Nota. Il codice viene eseguito almeno una volta!

Esempio:
• FOR
for (init; cond; update) { p }
1. Prima viene eseguito init (dove viene inizializzato varibiale)
2. Finché cond è vera, viene eseguito p
3. poi update (aggiorno variabile)
4. Tutte le parti sono opzionali (se non metto nessun elemento in for, ciclo
viene eseguito all’infinito

for (init; cond; update) { p } è identico a

init;
while (cond) {
p;
update;
}

• BREAK
Esce immediatamente da un
ciclo
p eseguito una volta solo,
perché dopo esecuzione p si
trova break;

• CONTINUE:
Passa immediatamente alla prossima iterazione

• SWITCH/CASE
o Senza break continua a eseguire il blocco successivo
o Confronto strict (anche tipo)
o Default è opzionale

• ETICHETTE
Si può assegnare una etichetta a un ciclo, in modo da usare break e continue riferiti a quel ciclo

FUNZIONI UTILI
Numeri:

• x.toString(): conversione esplicita del numero a stringa

esempio: 123.toString() → ‘123’
• x.toFixed(n): conversione a stringa con n posizioni decimali
esempio: Considerando x = 123.456
x.toFixed(0) → ‘123’, x.toFixed(2) → ’123.46’
• Number(x): conversione a numero
• parseInt(x): conversione a numero intero
• parseFloat(x): conversione a numero (floating point)
• isNaN(x): verificare che il valore sia un numero

Stringhe:

• x.length: proprietà che rappresenta la lunghezza. Posso usarla per sapere la lunghezza di una stringa
esempio: ‘aaa’.length → 3
• x.indexOf(y, [pos]): posizione di stringa y all’interno di x [cercando dalla posizione pos] esempio:
‘abcd’.indexOf(‘cd’) → 2, ‘abcd’.indexOf(‘ef’) → -1 (risultato non trovato all’interno di una stringa segnalato
con -1)
‘abcd’.indexOf(‘cd’, 3) → -1
• x.substring(start, end): sottostringa che inizia alla posizione start e finisce prima della posizione end
esempio: ‘Banana’.substring(2,4) → ’na’
• x.substr(start, len): sottostringa che inizia alla posizione start e ha lunghezza len
esempio: ‘Banana’.substr (2,4) → ’nana’
• x.replace(s1, s2): ritorna la nuova stringa che uguale a x in cui s1 è sostituita con s2. Supporta espressioni
regolari
esempio: ‘Banana’.replace(‘na’, ’b’) à ’babna’
‘Banana’.replace(/na/g, ’b’) à ’babb’
• x.charAt(pos): ritorna simbolo nella posizione pos
esempio: ‘Banana’.charAt(1) à ’a’
• x.toLowerCase() / x.toUpperCase(): convertire a minuscolo / maiuscolo la stringaò
esempio: ‘Banana’.toLowerCase() à ’banana’
‘Banana’.toUpperCase() à BANANA

Esercizio1:

<!DOCTYPE html>
<html lang="en">
<head>
<script>
let inputString= prompt("Inserisci la tua stringa"); //leggo la stringa
console.log("Lunghezza della stringa è" + inputString.length); //stampo valore stringa
if(inputString.length <=1){ //se lunghezza stringa è minuto uguale a 1 stampo subito la stringa, perché non c’è nulla da
scrivere
alert(inputString);
}else{ //eseguita solo quando condizione sopra falsa, ovvere quando stringa maggiore di 1
let outputString=''; //stringa vuota dove salvare lettere man mano che faccio for
for (let index=inputString.length-1; index>=0; index--){//meno uno perché stringa parte da 0
outputString= outputString + inputString.charAt(index); //charAt() prendere lettere in una certa posizione
}
alert(outputString);
}

Abc
1 passaggio salvo outputstring ‘c’ preso lettera posizione 2
2 passaggio in outputstring ho c, a cui abbgiungo b, lettera posizine 1
3 passaggiou outputstring ho cb, a cui aggiungi lettera posizione 0 che è a

</script>
</head>
<body>
</body>
</html>

Esercizio2:

let nome = prompt("Inserisci nome e cognome:");

switch (nome) {
case "Luke Skywalker":
alert("Ciao Luke!");
break;
case "Obi-Wan Kenobi":
alert("Ciao Master!");
break;
case "Anakin Skywalker":
alert("Ciao padawan, che forza sia con te!");
break;
default:
if (!nome) { //quando premo ok senza inserire nulla nella stringa
alert("Non hai inserito un nome");
break;//ciclo termina qui quando questo if è vero
}
let spacePosition = nome.indexOf(" "); //controllo se c'è uno spazio
if (spacePosition === -1) {
alert("Non hai inserito uno spazio");
break; //ciclo termina qui quando questo if è vero
}/*else{
alert("Bravo hai inserito uno spazio")
}*/

let firstletter = nome.charAt(0); //prendo dalla stringa inserita la prima lettera (posizione 0) e la salvo in una variabile
let secondletter= nome.charAt(spacePosition+1); //prendo carattere dopo lo spazio
if (secondletter === " ") {
alert("Ma dai! Hai messo due spazi!");
break;
}

alert(firstletter+secondletter);
}

INTERAZIONI:
• alert(messaggio): mostra un messaggio e mette in pausa l’esecuzione dello script.
• prompt(messaggio, [default]): mostra un messaggio con un campo di testo e due bottoni ok/cancel. Ritorna
null se è stato premuto cancel.
• confirm(messaggio): mostra un messaggio con due bottoni ok/cancel. Ritorna true o false.

CODICE CHIARO (https://it.javascript.info/coding-style) (https://it.javascript.info/ninja-code)

FUNZIONI
• La funzione è un blocco di istruzioni associato a un nome, che realizza un comportamento, prendendo dati in
input e opzionalmente producendo altri dati in output.
• Viene dichiarata nel programma
• Può essere utilizzata (chiamata) quante volte si vuole
• Esistono funzioni pre-definite (es., prompt, alert,
parseInt) e funzioni «custom» (definite dallo sviluppatore)

• Esiste uno specifico tipo di dati typeof alert →

function
• Una funzione è un oggetto con proprietà e metodi
• Può essere assegnato a una variabile

• Molti modi per dichiararle

• Per chiamare una funzione si usa il nome con la lista dei parametri
prodotto(100, 200);
• Se si passano meno parametri, i mancanti vengono assegnati a undefined
• Se si passano più parametri, saranno ignorati
• Attenzione: prodotto(100, 200) è una chiamata di funzione, mentre prodotto è il riferimento alla funzione
come oggetto

SCOPE DELLE VARIABILI (Fonte: https://it.javascript.info/function-basics)

• Una variabile globale può essere modificata all’interno di una funzione

• Se viene ri-dichiarata, la variabile esterna viene oscurata e non viene toccata dalla funzione

PARAMETRI
• Ai parametri mancanti viene assegnato undefined

• Operatore ||

• Operatore??

https://it.javascript.info/function-basics

OGGETTI
• Struttura che rappresenta una collezione di proprietà
• Ogni proprietà ha un nome (chiave)
• Ogni proprietà può avere un valore
• Si possono avere proprietà di tipo diverso
• Le proprietà si richiamano con il punto o le parentesi quadre

• Le proprietà possono essere stringhe complesse, ma vanno inserite tra virgolette (e richiamate con le
quadre)
• Per comodità, si può lasciare la virgola dopo l’ultima proprietà

• Le proprietà che sono funzioni si chiamano metodi

LA PROPRIETÀ INESISTENTE

• Se una proprietà non esiste ci viene dato errore

• Si potrebbe usare un “if” (normale o compatto)

• Esiste un “concatenatore opzionale” ?. che interrompe la valutazione e ritorna undefined se il

valore precedente è undefined o null

OGGETTI

• Le proprietà inesistenti danno come risultato undefined (ma non dà errore)

• Si possono aggiungere proprietà anche “a caldo”

• Si possono cancellare le proprietà

LOOP SU OGGETTI
Esiste un ciclo “for ... in”, diverso da “for(;;)”, che attraversa tutte le chiavi di un oggetto.

Attenzione! Usare user.key in questo caso sarebbe stato

sbagliato perché sarebbe stata richiamata la chiave con nome
“key” (quindi user[“key”]. Quando il nome della chiave è in una
variabile, si deve usare sempre la notazione con le parentesi
quadre.

ESISTENZA
• L’operatore “in” può essere usato per verificare se una certa chiave esiste in un certo oggetto.

• L’operatore “in” restituisce true quando la proprietà esiste, anche se è valorizzata come undefined o null

JSON

• JavaScript Object Notation

• Formato dati basato su sintassi e modello di oggetti JavaScript
• Qualsiasi oggetto JavaScript senza metodi è anche un oggetto JSON
• Formato standard di comunicazione con i server

ARRAY
• Struttura dati che rappresenta una sequenza di valori
• Finita (ha una lunghezza, “length”)
• Ordinata (ogni elemento è associato al suo indice)
• Gli indici partono da zero
• Sono oggetti (le chiavi sono gli indici)

• Si può accedere a un elemento usando l’indice

• La proprietà “length” stabilisce la dimensione dell’array

LOOP SU ARRAY
Esiste un ciclo “for ... of”, diverso da “for(;;)” e da “for …
in”, che attraversa tutte gli elementi di un array.

ARRAY: METODI
Non cambiano gli indici • array.push(element): aggiunge l’elemento in coda all’array
• array.pop(element): estrae e rimuove l’ultimo elemento dell’array

Cambiano gli indici • array.shift(element): estrae e rimuove il primo elemento dell’array

• array.unshift(element): inserisce l’elemento all’inizio dell’array

• array.slice(from, to): restituisce una sottosequenza dall’indice “from” all’indice “to” (se manca “to”, si
intende da “from” alla fine dell’array)

• array.concat(arr1, arr2, …): costruisce un nuovo array

che concatena l’array di partenza con arr1, arr2, ecc.

• array.splice(pos, numToDel, elemToIns1, elemToIns2, …): rimuove elementi da un array e ne inserisce altri
o pos: posizione dove fare la modifica
o numToDel: quanti elementi da rimuovere
o elemToIns1, …: nuovi elementi da inserire in quella posizione

• Object.keys(oggetto): restituisce l’array con tutti i nomi di proprietà dell’oggetto

• array.join(sep): converte in stringa e unisce gli elementi usando il separatore sep

• string.split(sep): trasforma la stringa in un array separando quando trova sep

• array.sort(): Ordina elementi seguendo l’ordine naturale
o Numeri: ordine crescente
o Stringhe: ordine alfabetico

• array.reverse(): Inverte l’ordine dell’array

• array.sort(sortFunction): Ordina elementi seguendo l’ordine stabilito dalla funzione sortFunction che:
o Prende come input due valori
o Restituisce un numero negativo, 0, o un numero positivo se il primo valore è «minore», «uguale», o
«maggiore» del secondo valore, rispettivamente
JAVASCRIPT/DOM
DOM:
• HTML si occupa dei dati da visualizzare all’interno delle pagine
• JavaScript si occupa di aggiungere dinamismo a questo contenuto
• Il DOM (document object model) fa da collegamento tra i due mondi
• Trasforma il documento in un modello a oggetti

Il DOM usa una serie di istruzioni di JS per dominare l'html, trasforma il documento html in un modello ad albero
di oggetti I nodi di quell'albero. I nodi gialli rappresentano i tag, mentre i verdi il contenuto (i blocchi sotto a quelli
gialli) e gli "a capo" \n, ovvero la separazione tra i vari tag (a fianco dei nodi gialli). Ciò che è sulla stessa linea è a
pari livello, ciò che sta sotto è un figlio di ciò che sta sopra. Il nodo padre è document. Possono avere un id
universale, una classe, ecc. Ci sono una serie di funzioni JS per gestire quei nodi

NODI DEL DOM

• Possono avere un ID universale (il DOM non garantisce l’unicità!)

• Possono avere una classe
• Ci sono funzioni JS per richiamare i nodi
• Ci sono nodi che non sono tag HTML (history, ecc.)
• document è il nodo principale

INTERAZIONI JS-DOM

• JavaScript può modificare l’HTML

• JavaScript può modificare i CSS
• JavaScript può interagire con gli eventi della pagina

DOM

• Gli elementi HTML sono oggetti di JavaScript

• Ognuno avrà proprietà, metodi, eventi
getElementByld()
È il metodo “storico” per accedere a un certo
elemento HTML

SELEZIONARE ELEMENTI
(https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselectorall_class)

Metodo Descrizione

document.getElementById(id) Seleziona un elemento usando il suo ID

document.getElementsByTagName(name) Seleziona tutti i tag HTML di un certo tipo

document.getElementsByClassName(name) Seleziona gli elementi in base alla classe

Seleziona gli elementi in base al name (normalmente
document.getElementsByName(name)
form)
document.querySelectorAll(selector) Seleziona gli elementi in base al selettore CSS

MODIFICARE ELEMENTI

Proprietà Descrizione

element.innerHTML = nuovo contenuto Cambia il valore interno a un tag HTML

element.attribute = nuovo valore Cambia un attributo di un tag HTML

element.style.property = nuovo stile Cambia lo stile di un tag HTML

Metodo Descrizione

element.setAttribute(attribute, value) Cambia un attributo (come sopra)

CAMBIARE UN ATTRIBUTO
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_image
CAMBIARE UNO STILE

https://www.w3schools.com/jsref/dom_obj_style.asp

https://www.w3schools.com/js/tryit.asp?filename=tryjs_change_style

USARE GLI EVENTI

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_color2

FUNZIONI SU EVENTI
https://jsfiddle.net/0gdyn3w4/3/
AGGIUNGERE EVENTI

document.getElementById("button").addEventListener("click", pippo);

• addEventListener() aggiunge un handler senza eliminare gli altri

• Possono essere aggiunti più handler allo stesso elemento

RIMUOVERE EVENTI
element.removeEventListener("mousemove", myFunction);

ELENCO EVENTI
https://www.w3schools.com/tags/ref_eventattributes.asp

USARE SELETTORI CSS

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_queryselectorall

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_htmlcollection_loop

• Restituisce una lista di elementi (o nodi)

var x = document.querySelectorAll("p.intro");

COLLEZIONI E NODELIST
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_htmlcollection_nameditem

• Entrambi sono simili ad array (ma non scrivibili!)

• Hanno indici che partono da zero
• Hanno la proprietà length
• NodeList include anche attributi e testo
• HTMLCollection può essere richiamato anche tramite id o nome
• Occorre usare “for… of”
NAVIGAZIONE
• <html> è la root

• <html> non ha genitore

• <html> è genitore di

• <head> è il primo figlio di <html>

• <body> è l’ultimo figlio di <html>

• <head> ha un figlio <title>

• <title> ha un figlio “DOM Tutorial” (nodo di testo)

• <body> ha due figli <h1> e <p>

• ecc.

• ParentNode
• childNodes[nodenumber] (tutti i nodi figlio)
• children (tutti gli elementi figlio)
• firstChild
• lastChild
• nextSibling
• previousSibling

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_nav_innerhtml2

PROPRIETÀ
https://www.w3schools.com/jsref/prop_node_nodetype.asp

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_nav_nodetype

• nodeName: nome del nodo

• nodeValue: valore del nodo
• nodeType: tipologia (elemento, attributo, testo, ecc.)
• attributes: lista di attributi
MODIFICARE IL DOM
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_elementcreate2

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_elementremove

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_elementreplace

Metodo Descrizione
document.createElement(element) Crea un tag HTML
document.removeChild(element) Elimina un tag HTML
document.appendChild(element) Aggiunge un tag HTML
document.replaceChild(new, old) Rimpiazza un tag HTML
document.write(text) Scrive testo HTML

Evento Descrizione
document.getElementById(id)
Aggiunge un evento
.addEventListener(function(){code})

OGGETTO WINDOW
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open

• Rappresenta la finestra che contiene la pagina

• Ha varie proprietà (per esempio la dimensione)
• Ha alcuni metodi (sposta, ridimensiona, apri, chiudi)

OGGETTO SCREEN
https://www.w3schools.com/js/tryit.asp?filename=tryjs_screen_pixelDepth

• Rappresenta lo schermo dell’utente

• Proprietà screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth,
screen.pixelDepth

OGGETTO LOCATION
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loc_assign

• Ottiene l’URL attuale della pagina

• Permette di modificare (aprire una nuova pagina)

OGGETTO HISTORY
• Contiene lo storico del browser (freccette in alto)
• back()
• forward()
ALER, CONFIRM, PROMPT
https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

• alert(): serve per visualizzare un popup

• confirm(): chiede la conferma di un’azione
• prompt(): chiede un input testuale

USO DEL TEMPO

https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing1

https://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval2

• setTimeout(function, milliseconds): esegue la funzione dopo tot millisecondi

• setInterval(function, milliseconds): esegue la funzione ogni tot millisecondi
• clearTimeout(timeoutVariable): Interrompe il timer

COOKIES
https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

• I cookie sono dati salvati sul browser dell’utente

• document.cookie serve per scrivere e leggere i cookie
• Il cookie è del tipo proprietà=valore e più proprietà possono essere separate da punto e virgola “;”
• Per cancellare un cookie basta mettere la proprietà “expires” a una data passata
• I cookie possono contenere un path

EVENTI: https://www.w3schools.com/jsref/dom_obj_event.asp
• addEventListener()
• removeEventListener()

SELEZIONARE ELEMENTI
• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• querySelector()
• querySelectorAll()

NAVIGARE IL DOM
• childElementCount • lastElementChild
• childNodes • parentNode
• children • parentElement
• firstChild • nextSibling
• firstElementChild • nextElementSibling
• hasChildNodes() • previousSibling
• lastChild • previousElementSibling
MODIFICARE IL DOM
• appendChild() • insertAdjacentText()
• cloneNode() • insertBefore()
• insertAdjacentElement() • remove()
• insertAdjacentHTML() • replaceChild()

MODIFICARE UN ELEMENTO
• innerHTML
• innerText
• outerHTML
• outerText

PROPRIETÀ DI UN ELEMENTO

• Attributes • nodeType
• classList • nodeValue
• className • removeAttribute()
• hasAttributes() • setAttribute()
• id • style
• nodeName

HTML DOM Style object (w3schools.com)

JQUERY
• È una libreria JavaScript che migliora l’interazione tra il linguaggio e il DOM
• È gratuita e open source
• Molti siti a livello mondiale usano jQuery
• È molto ben documentata e ha una vasta community

JQUERY CDN
Inserire nella parte di HTML, nel tag head o in fondo

jquery-3.7.1.min.js"></script>

VANTAGGI DI JQUERY
• Separa molto bene il codice dalla visualizzazione
• Usa i selettori CSS
• Moooooooolto più semplice e veloce di JS puro
• Elimina i problemi di compatibilità tra browser

JS PURO VS JQUERY
https://jsfiddle.net/qd9p0m31/

COSA FA JQUERY
• Seleziona elementi del DOM in base a selettori CSS (senza differenze tra uno o molti)
• Applica proprietà a tutti gli elementi selezionati
• Crea, modifica, elimina elementi del DOM
• Definisce eventi
• Ha semplificato le chiamate asincrone (prossima lezione )
L SELETTORE JQUERY ()
• Viene usato per selezionare qualsiasi cosa
• Si può abbreviare con la funzione $()
• $(document): è la ready-function
• $(selector): seleziona elementi in base al selettore CSS
• $(element): seleziona un elemento
• $.function(): esegue la relative funzione di jQuery
• $.fn.function(){}: crea una nuova funzione jQuery

JQUERY(SELECTOR)
https://jsfiddle.net/o8y1bw93/4/

• Restituisce un oggetto jQuery

• Si comporta come un array (ha lunghezza e può essere inserito in un loop; gli elementi si selezionano con le
parentesi quadre)
• Le principali funzioni jQuery possono essere applicate direttamente, quale che sia il numero di elementi

JS VS JQUERY
• document.getElementById(“pippo”) == $(“#pippo”) falso
• document.querySelectorAll(“p”) == $(“p”) falso
• document.getElementById(“pippo”) == $(“#pippo”)[0] vero
• document.getElementById(“pippo”) == $(“#pippo”).get(0) vero
• document.querySelectorAll(“p”)[0] == $(“p”)[0] vero

JQUERY COME WRAPPER

Passando a jQuery un elemento del DOM selezionato con JS si ottiene l’upgrade al relativo oggetto jQuery

READY-FUNCTION
https://jsfiddle.net/nx2fjgoz/2/

• JS originale: window.addEventListener('load', fn, false )

• jQuery(document).ready(function() { … });
• jQuery().ready(function() { … }); • jQuery(function() { … });
• $(function() { … });

JQUERY CHAINING
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_chaining2

Le funzioni jQuery si possono concatenare

Esempio:
FILTRARE
https://jsfiddle.net/4fq65u3n/1/

Metodo Descrizione

eq(index) Costruisce un nuovo oggetto includendo solo quello indicato

filter(selector) Filtra gli oggetti in base al selettore

has(selector) Seleziona gli oggetti che hanno un discendente tra i selettori

is(selector) Restituisce true se almeno un oggetto del set rispetta il selettore

map(funzione) Passa tutti gli oggetti del set nella funzione

not(selector) Rimuove gli elementi dal set in base al selettore

slice(start, [end]) Crea un nuovo oggetto includendo solo l’intervallo selezionato

GIRONZOLARE PER IL DOM

https://jsfiddle.net/rqewnL1v/

Metodo Descrizione

find(selector) Cerca i discendenti utilizzando il selettore

children([selector]) Come find, ma scende di un solo livello

closest([selector]) Risale la gerarchia e prende il primo elemento che trova

parent([selector]) Come children, ma risalendo la gerarchia

parents([selector]) Risale la gerarchia e seleziona tutti gli elementi che incontra

next([selector]) Prende l’oggetto fratello successivo

prev([selector]) Prende l’oggetto fratello precedente

.add() Aggiunge elementi alla lista di oggetti

.addBack() Aggiunge gli elementi della query precedente

.first() Prende il primo elemento del set

.last() Prende l’ultimo elemento del set

.contents() Come children(), ma prende tutti i nodi

.end() Termina l’ultima funzione di filtering

siblings([selector]) Prende tutti gli oggetti fratelli

text([text]) Restituisce tutto il testo o imposta il testo di ogni elemento del set
USARE GLI ATTRIBUTI

Metodo Descrizione

.addClass(cname) Aggiunge la classe al set di oggetti

.attr(prop, [value]) Restituisce (o imposta) il valore di un attributo*

.hasClass(cname) Determina se gli oggetti del set hanno una determinata classe

.html([string]) Restituisce o imposta il contenuto HTML del set di oggetti*

.prop(prop, [value]) Restituisce (o imposta) il valore di una proprietà*

.removeAttr(aname) Rimuove l’attributo aname dal set di oggetti

.removeClass(cname) Rimuove la classe dal set di oggetti

.removeProp(prop) Rimuove la proprietà prop dal set di oggetti

.toggleClass(cname) Inverte la presenza di una certa classe nel set di oggetti

.toggleClass(cname) Restituisce o imposta il valore di un campo di un form*

.css(prop, [value]) Restituisce o imposta il valore CSS della proprietà*

DIMENSIONI

Metodo Descrizione

.height() Restituisce o imposta l’altezza di un oggetto o set

Restituisce o imposta l’altezza interna di un oggetto o
.innerHeight()
set
.width() Restituisce o imposta la larghezza di un oggetto o set
Restituisce o imposta la larghezza interna di un
.innerWidth()
oggetto o set
Restituisce o imposta l’altezza esterna di un oggetto o
.outerHeight()
set
Restituisce o imposta la larghezza esterna di un
.outerWidth()
oggetto o set

MANIPOLAZIONE DEL DOM

Metodo Descrizione

append() Inserisce contenuto alla fine dell’elemento

before() Inserisce contenuto prima di un elemento

after() Inserisce contenuto dopo un elemento

prepend() Inserisce contenuto all’inizio di un elemento

remove() Rimuove gli elementi selezionati

replaceAll() Rimpiazza gli elementi selezionati

Ingloba una struttura HTML attorno agli elementi
wrap()
selezionati
Rimuove tutti gli elementi all’interno dell’elemento
empty()
selezionato
DATA
• HTML5 prevede che si possano agganciare dati ai tag
• jQuery supporta questo paradigma
• Vengono usati gli attributi data- nel tag HTML
• Il metodo .data() di jQuery permette di leggere o modificare questi valori
• Il metodo .removeData(): rimuove un campo (o tutti i dati)

EVENTI
JS puro
document.getElementById("button").addEventListener("click", pippo);
vs
jQuery
$(“#button”).on("click", pippo);
$(“#button”).click(pippo);

• Il metodo .on(): aggiunge un listener all’evento

• C’è anche .off(): per rimuovere il listener
• Il metodo .one(): attacca un evento che potrà essere eseguito una sola volta
• Il metodo .trigger(): forza l’esecuzione di un evento per gli oggetti selezionati
• Il metodo .triggerHandler(): agisce come .trigger() senza però eseguire le azioni relative all’evento

• .blur() • .hover() • .mouseout()

• .change() • .keydown() • .mouseover()
• .click() • .keypress() • .mouseup()
• .contextmenu() • .keyup() • .ready()
• .dblclick() • .mousedown() • .resize()
• .focus() • .mouseenter() • .scroll()
• .focusin() • .mouseleave() • .select()
• .focusout() • .mousemove() • .submit()

EFFETTI
• jQuery include alcuni effetti comodi per visualizzare e nascondere oggetti
• In tutti i casi si può assegnare un tempo, che può essere “slow”, “fast” oppure una durata in millisecondi
• Nelle catene di metodi, gli effetti vengono fatti uno dopo l’altro (sono quindi sincroni) •
• Gli effetti sono asincroni rispetto al resto del codice (a meno che non si riferiscano a un medesimo oggetto)
SHOW/HIDE
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

• Funzione show(): mostra un set di oggetti

• Funzione hide(): nasconde un set di oggetti
• Funzione toggle(): inverte la “visibilità”
• Viene usata la proprietà “display” di CSS
• Si può impostare la velocità e la funzione da chiamare alla fine della transizione

FADING
https://www.w3schools.com/jquery/jquery_fade.asp

• fadeIn(): Mostra l’oggetto con una dissolvenza

• fadeOut(): Nasconde l’oggetto con una dissolvenza
• fadeToggle(): Inverte la visibilità dell’oggetto con una dissolvenza
• fadeTo(): Dissolve fino a una certa opacità (tra 0 e 1)

SLIDING
https://www.w3schools.com/jquery/jquery_slide.asp

• slideDown(): Visualizza un oggetto con effetto a tendina

• slideUp(): Nasconde un oggetto con effetto a tendina
• slideToggle(): Inverte la visibilità dell’oggetto con effetto a tendina

ANIMAZIONI
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_multicss

• Il metodo animate() accetta un JSON con tutti i valori CSS da modificare per l’animazione
• Il secondo parametro indica la durata
• Possono essere inseriti valori relativi (+= o -=)
• Possono essere usati valori “show”, “hide”, “toggle”
• Si possono aggiungere opzioni per controllare più in dettaglio l’animazione (per esempio progress)

ALTRO SUGLI EFFETTI

• Il metodo stop() blocca l’animazione in corso

• Il metodo finish() completa all’istante l’animazione in corso
• Il metodo delay() ritarda l’esecuzione del successivo elemento della catena di effetti
UTILITY

• jQuery.each(): esegue un ciclo su qualsiasi cosa per cui abbia senso avere un ciclo (oggetto jQuery, array,
ecc.)
• jQuery.extend(): fonde due JSON in uno (il primo)
• jQuery.fn.extend(): aggiunge una funzione a jQuery
• jQuery.globalEval(): esegue codice JS in una stringa
• Query.grep(): filtra una lista in base a una condizione
• jQuery.inArray(): verifica se un determinato valore è contenuto in un array (e restituisce l'indice, -1 se non
c'è)
• jQuery.makeArray(): costruisce un array a partire da un qualsiasi oggetto array-like
• jQuery.get([i]): prende l'elemento i-esimo della lista, oppure restituisce un array con tutti gli elementi
• jQuery.map(): applica una funzione a un array di valori
• jQuery.merge(): fonde due array in uno (il primo)
• jQuery.noop(): è una funzione che non fa nulla
• jQuery.now(): fornisce il timestamp attuale
• jQuery.trim(): elimina gli spazi all’estremità di una stringa
• jQuery.type(): determina la classe di un oggetto
• jQuery.unique(): elimina i duplicati da un array di elementi del DOM
• jQuery.uniqueSort(): elimina i duplicati da un array di elementi del DOM e li ordina

UTILITY SUI TIPI

• jQuery.isArray()
• jQuery.isEmptyObject()
• jQuery.isFunction()
• jQuery.isNumeric()
• jQuery.isPlainObject()
• jQuery.isWindow()

UTILITY DI PARSING
• jQuery.parseHTML()
• jQuery.parseJSON() (deprecated) [usare JSON.parse]
• jQuery.parseXML()
JAVASCRIPT AVANZATO E FORM HTML
JAVASCRIPT AVANZATO
EVENT OBJECT
• È l’oggetto di JavaScript che gestisce tutti gli eventi
• Contiene tutte le informazioni utili per gestire l’evento
• Ce ne sono di molti tipi
• Evento hanno una sorta di gerarchie e alcune proprietà vengono ereditate.es ho un evento di tipo mouse
event sicuramente avrà una coordinata x/y su cui ho cliccato. E in base al click avrò informazioni diverse, per
capirlo mi aiuta java.
• Viene ereditato dagli oggetti padre
• Eventi sono quelli oggetti di javascript che permettono un interazione con l’utente. Quando utente clicca su
un punto della pagina scatena un evento che può essere intercettato da un codice java.
• Evento scatenato quando utente fa qualcosa

LISTA EVENTI
https://www.w3schools.com/tags/ref_eventattributes.asp

• Mouse (onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,

onwheel)
• Tastiera (onkeydown (tasto premuto), onkeypress (solo con lettere/numeri ), onkeyup(tasto rilaciato))
• Pagina (onafterprint, onbeforeprint, onbeforeunload, onerror, onhashchange(quando cambia il titolo),
onload, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onresize, onstorage,
onunload)
• Form (onblur, onchange, oncontextmenu, onfocus, oninput, oninvalid, onreset, onsearch, onselect,
onsubmit)
• Drag, clipboard, media, …

GERARCHIA EVENTI
https://www.w3schools.com/jsref/obj_events.asp

UiEvent: eventi relativi all’interfaccia grafica. Si divide in:

• MouseEvent
• DragEvent

ClipboardEvent: eventi relativi appunti

HashChangeEvent: eventi relativi all’URL della pagina

AnimationEvent: eventi relativi al fatto

che parta o meno un animazione
Esempio di evento: mouseEvent: ogni volta che premo su scritta di H1 mi compare messaggio di alert.

e funzione nasconde, parametri del mio evento del mouse

<body>
<h1 id="titolo">Ciao</h1>
<script type="text/javascript">
document.getElementById("titolo").onclick = function (e) {
alert("Ciao");
};
</script>
</body>

BUBBLING:
https://jsfiddle.net/sk48jdfp/

HTML può avere oggetti innestati. Il bubbling mi fa vedere oggetti dall’interno

all’esterno.

Esempio:

Se nel codice soprastante io clicco su P, scateno evento click di P che però il click si
propagherà anche al div e poi al form. (scatena eventi dal più interno al più esterno).
Bubbling funziona all’inverso rispetto agli oggetti innestati

METODI/PROPRIETÀ DI EVENT
https://jsfiddle.net/sk48jdfp/9/

https://www.w3schools.com/jsref/obj_events.asp

Nome Descrizione
True/False (è un bubbling event?) Mi dice se ho cliccato su
bubbles
oggetto o su un figlio di quel oggetto
cancelBubble Imposta o interroga se l’oggetto deve propagare l’evento

cancelable True/False (l’oggetto ha l’evento di default annullato?)

defaultPrevented True/False (è stato chiamato preventDefault()?)

isTrusted True/False (l’evento è stato attivato dall’utente?)

preventDefault() Cancella l’azione di default dell’evento

Cancella i listener dello stesso evento (interrompe tutta la
propagazione dell’evento subito) (es card con stellina. Quando
stopImmediatePropagation() clicco su card entro nel dettaglio del film mentre quando clicco su
stellina non devo andare nel dettaglio della stellina. Con questo si
può interrompere il bubbling)
Interrompe la propagazione dell’evento (dal padre in su ma
stopPropagation()
finisce quelli del figlio)
target Elemento che ha attivato l’evento

currentTarget Attuale elemento relativo all’evento

type Tipo di evento

Se target è uguale a currentTarger allora siamo sull’oggetto che ha azionato l’evento

NB: stopPropagation() vs stopImmediatePropagation

Se clicco: avrò alert e poi evento non viene propagato Se clicclo: non visualizza alet ma propagazione evento
fermata subito

• Gli eventi più specifici hanno metodi e proprietà specifiche

TARGET E CURRENTARGET
https://plnkr.co/edit/eiVixZwxlxFG9dyx?preview

• event.target è l'elemento che ha causato l'evento

• event.currentTarget (anche "this") è l'elemento corrente

STOP BIBBLING

• event.stopPropagation(): interrompe il bubbling

• event.stopImmediatePropagation(): interrompe l'esecuzione delle altre operazioni sull'oggetto
• Non fermare il bubbling se non serve!

CAPTURING
Il capturing va dall’esterno verso l’interno. Opposto del bubbling.
Quando un evento voglio catturarlo nella fase di andata. Il capturing
è il contrario del bubbling: quando un utente clicca su un oggetto, è
possibile intercettare il click prima che arrivi al target.

• Usato raramente
• Per gestirla basta aggiungere un secondo parametro ad
addEventListener(): capturing:true
CONSOLE
La console serve per fare debug delle applicazioni e deve essere abilitata sul browser (altrimenti non si vede)

METODI DI CONSOLE
https://jsfiddle.net/ejkavyun/

Nome Descrizione

assert() Dà errore se l’asserzione è falsa

clear() Pulisce la console

error() Stampa un messaggio di errore

info() Stampa un messaggio informativo

log() Stampa un messaggio generico

trace() Stampa un messaggio di notifica

warn() Stampa un messaggio di allerta

count() Conta le volte che count() è chiamato

group() Crea un gruppo di log (e indenta)

groupCollapsed() Crea un gruppo di log (come sopra), ma lo tiene collassato

groupEnd() Termina il gruppo

I FORM HTML
I form servono per raccogliere dati da parte dell’utente. Normalmente vengono inviati a un software di backend
che si troverà sul server che analizza i dati inseriti e poi ci da una risposta: hai sbagliato ad inserire i dati oppure
dati ricevuti.

CAMPI DEI FORM

• Campi di testo: 1 riga (es nostro nome)
• Aree di testo: + righe
• Menu a discesa: elenco di scelte prefissato
• Radio button: selezionare solo una scelta
• Checkbox: selezionare più di una scelta
• Upload di file: allegare un documento
• ecc.

IL TAG <FORM>
Serve per creare un nuovo form:

<form action=“script” method=“GET/POST”>

… elementi del form …

</form>

Action: ci dice dove deve essere mando il form

Method: GET (opzioni lascia campi visibili nell’URL) o post (invia dati al serve, non vengono visualizzati nell’URL)

ATTRIBUTI DI <FORM>

Attributo Descrizione

action Script di backend cui passare i valori

Metodo da usare per l’invio dei dati. Normalmente i metodi utilizzati sono GET e POST ➡
method
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
La finestra di destinazione (per esempio per inviare i dati in un’altra finestra senza
Target
perdere quella attuale)
Metodo di codifica del browser application/x-www-form-urlencoded (default)
enctype
multipart/form-data (se ci sono allegati)

INPUT TESTUALE
• Campo testuale di una sola linea
Per es. per nome/cognome o per la ricerca su web. Si usa il tag <input> (è un tag singolo, non ha apertura e
chiusura)
• Password
È un caso particolare del campo precedente, ma l’input e nascosto all’utente. Si usa sempre <input>
type=password: testo digitato non viene visualizzato dall’utente
• Campo di testo multi-linea
Si usa per lunghi testi (per esempio articoli di blog). Il tag è <textarea>
ATTRIBUTI DI <INPUT>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input

Attributo Descrizione

type Tipo di input, per il testo è “text”, per la password è “password”

name L’etichetta che si userà poi per identificarlo nel backend

value Valore iniziale (di default)

size Dimensione della casella di testo

maxlength Numero massimo di caratteri che si possono inserire (ma va ricontrollato anche nel backend)

ATTRIBUTI DI <TEXTAREA>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea

Attributo Descrizione

name L’etichetta che si userà poi per identificarlo nel backend

rows Numero di righe della casella

cols Numero di colonne della casella

Il valore di default andrà inserito tra <textarea> e </textarea>

CHECKBOX
• Si usa sempre il tag
• Indica una scelta multipla in cui sono selezionabili più opzioni

RADIO BUTTON
• Si usa il tag
• È una scelta multipla in cui solo una opzione è selezionabile

LABEL
• Si usa per dare un'etichetta a un elemento di form (in modo che cliccando sull'etichetta il focus vada
sull'elemento)
• Tag
• Attributo for, dove si inserisce l'ID dell'elemento
<INPUT> CHECKBOX/RADIO
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox

Attributo Descrizione

type “checkbox” o “radio”

name L’etichetta che si userà poi per identificarlo nel backend

value Il valore che verrà inviato quando la checkbox/radio è selezionata (default on)

checked Vale “checked” se la casella è selezionata di all’apertura della pagina

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox

FILE UPLOAD

• Si usa il tag <input>

Attributo Descrizione

type “file”

name L’etichetta che si userà poi per identificarlo nel backend

accept Tipi di file accettati

BOTTONI <INPUT>

Type Descrizione

submit Quando cliccato, invia il form

reset Quando cliccato, riporta il form ai valori di default

button Bottone generico da gestire con JavaScript

image Bottone submit basato su una immagine (per motivi estetici)

CAMPI NASCOSTI
• si usa il tag <input>

Attributo Descrizione

type “hidden”

name L’etichetta che si userà poi per identificarlo nel backend

value valore
<SELECT>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

• serve per selezionare da un elenco predefinito

• Menu drop-down con varie opzioni tra cui scegliere
• Può essere anche a scelta multipla
• Si usano i tag <select> e <option>. opzion viene usato per le varie opzioni. Size dive quanto è alta casella
dell’opzione. Può essere selezionata solo un opzione

esempio:

<select name="cars" id="cars">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Attributo Descrizione

name L’etichetta che si userà poi per identificarlo nel backend

size Dimensione (dropdown o a scorrimento)

multiple Vale “checked” se la casella è selezionata di all’apertura della pagina

Attributo Descrizione

value Il valore da spedire al backend

selected Se impostato a “selected”, indica che l’opzione è selezionata all’apertura della pagina

ELEMENTO <BUTTON>
• Definisce un bottone (come <input type=“button”);
• Va gestito con JavaScript

ELEMENTO <DATALIST>
• È una aggiunta al tag
• Fornisce un elenco di scelte che compaiono quando si digitano le prime lettere
• Nel tag <input> l'attributo list indica l'ID del <datalist> da utilizzare

Esempio:

<input list="browsers" name="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
ELEMENTO <OUTPUT>

• Rappresenta il risultato di un calcolo

• Bisogna usare java per dire che calcolo fare

VALIDAZIONE
• Introdotta con HTML5
• Velocizza il lavoro di programmazione
• Tutto andrà comunque validato in backend!

CAMPO OBBLIGATORIO

• Si usa l’attributo “required”

Esempio: se premo submit, mi dice che devo riempire il campo, senza aver scritta una riga di java

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">

ALTRI TIPI DI <INPUT>

https://www.w3schools.com/tags/att_input_type.asp

• button • file • password • tel

• checkbox • hidden • radio • text
• color:permette di scegliere un colore • image • range: spostare • time: ora
• date: scegliere gg/mm/aaaa • month: mese e rotellina tra un max • url
• datetime-local:gg/mm/aaaa --:-- anno e un min • week
• email: fa controllo su mail inserita • number: solo • reset
numeri • search
• submit
PATTERN
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

• si usano le espressioni regolari

ALTRE PROPRIETÀ

• autocomplete: dice al browser se suggerire contenuti immessi in precedenza (auto completamento). Valori
ammessi: on/off. Suggerimenti in base a quello che avevo messo prima.
• autofocus: Il campo è selezionato al caricamento della pagina
• disabled: Il campo è disabilitato (grigio)
• placeholder: Un testo riempitivo quando il campo è vuoto. Testo in grigio che compare prima di completare
casella. Appena clicco su casella per riempirla scompare
• readonly: Rende il campo di sola lettura
JAVASCRIPT AVANZATO
API
L’api sono dei modi in cui un applicazione si interfaccia con il resto del mondo. È un modo di comunicare, è
l’aspetto che ci permette di comunicare con backend.

• Application Programming Interface

• È un’Interfaccia
• usata dai Programmi
• per interagire con una Applicazione
• Metodo efficiente per permettere a due sistemi (differenti) di comunicare tra loro (es Alexa e interruttore
della luce)
• Non c’è intervento umano diretto
• Un’azienda che offre un servizio di tipo informativo mette a disposizione i dati tramite una API

ESEMPI DI API

• Meteo
(per ottenere informazioni sul tempo)
• Google Maps
(per inserire le mappe sul proprio sito)
• Twitter/X
(per pubblicare autonomamente)

COME FUNZIONA
1. Viene fatta la richiesta (client)
2. Richiesta: è un URL (dove si trova il
Dipartimento di Psicologia e Scienza
Cognitive)
3. Server (es Twitter, Google Maps)
4. Risposta (Lat 45.8936892…risposta è un
json)

Esempio:

richiesta: http://maps.googleapis.com/maps/api/geocode/json?

address=Dipartimento di Psicologia e Scienze Cognitive, Rovereto --->

CHIAVI PER API
• Quasi nessun servizio offre le API senza registrazione
• Molto spesso la registrazione è gratuita con limitazioni sul numero di richieste
• Per un numero di richieste maggiore, è necessario pagare

Esempio api: https://api.nasa.gov/

AJAX (mi permette di integrare info API nel sito)

• Asynchronous JavaScript and XML
• Tecnica relativamente recente per costruire pagine web più interattive
• Permette aggiornamento di parti di una pagina web chiedendo informazioni al server. Carica solo delle
piccole informazioni che vengono caricati tramite delle piccole richieste. Non abbiamo quindi bisogno
di ricaricare un intera pagina per caricare numeretto
• Basata sull’oggetto JavaScript XMLHttpRequest.
• Ci possono essere più richieste in contemporanea.
• Prima di ajax browser per aggiornare numero veniva ricaricata l’intera pagina

NB: Ajax è asincrono, cioè sito manda richiesta al server, io intanto faccio altre cose poi quando arrivare la
richiesta ne farò delle altre. Sito funziona mentre sto facendo un richiesta. Esso permette di caricare pezzi di
pagina (e quindi di non ricaricarla tutta). Non interrompe l’esecuzione del resto del codice nell’atteso dei dati. Di
solito viene dato feedback all’utente per dirgli che qualcosa sta cambiando e di solito si usa lo spinner. Ho un
interfaccia utente che carico una sola volta (grafica) tutti i pezzetti che vengono cambiati vengono fatti da AjaX.

VECCHIO PARADIGMA

NUOVO PARADIGMA
Ho interfaccia utente che
carico una volta sola. Quindi
prima cosa che chiedo al
server: dammi la grafica. Poi
tutte le cose capitano in
mezzo le fa Ajax, cambiano
solo i pezzettini che servono
cambiare.

VANTAGGI:
- Risposta più veloce alle richieste
- Miglior esperienza utente: perché non ricarica tutta la pagina
- Traffico rete ridotto
SVANTAGGI:
- Inutilità di tasti avanti/indietro/bookmark
- Bisogna gestire la navigazione (tasti avanti/indietro/bookmark) (in vue la fa vue-router o fi fa
manualmente con la history)
- Richiede JavaScript
- Attenzione all’indicizzazione dei motori di ricerca: motore di ricerca deve trovare contenuto della pagina.
Deve capire se ho un'altra pagina o la stessa di prima

ESEMPI DI USO DI AJAX

• Autocomplete box
• Instant messaging
• Aggiornamento di valori in tempo reale (es. borsa)
• Validazione istantanea di form
• Salvataggio di informazioni utente “al volo” (es google document)

AJAX E JQUERY
• jQuery ha semplificato l’interazione con XMLHttpRequest
• Unico comando $.ajax({ settings }); ($ indica JQuery)
• Esiste anche il comando nativo JS fetch(), introdotto di recente

$.ajax()

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax_async

Setting Description

async Stabilisce se la richiesta è asincrona

data Dati da inviare al server

dataType Tipo di dati attesi dal server (normalmente Json)

username/ password Dati da inviare in caso di autenticazione HTTP

timeout Timeout in millisecondi

GET o POST (GET chiedo casi in cui chiedo un
informazione mentre POST sono i casi in cui sto
inviando un informazione. POST prevede che da
type
qualche parte nel server vengano salvate le
informazioni mentre la GET no. Es es dammi twitter di
X per pubblicare è una GET)
url Indirizzo di richiesta (indirizzo della mia API)

Method Description
Funzione lanciata prima dell’esecuzione. (prima di
beforeSend
lanciare la funzione fai questo)
Funzione lanciata al termine dell’esecuzione
(qualunque cosa accada falla)(esempio parte
complete
chiamata Ajax e parte spinner e spinner una volta
terminata la richiesta va tolto)
Funzione lanciata quando accade un errore.
error
Richiesta non andata a buon fine
Funzione lanciata quando non accade un errore.
success
Richiesta andata a buon fine

ALTI METODI DI AJAX

Setting Description

ajaxComplete() Registra un handler per l’azione complete()

ajaxSend() Registra un handler per l’azione beforeSend()

ajaxError() Registra un handler per l’azione error()

ajaxSuccess() Registra un handler per l’azione success()

ajaxSetup() Imposta i valori per tutte le richieste Ajax future

ajaxPrefilter() Imposta le opzioni di default per tutte le richieste Ajax future

load() Shortcut per caricare un Ajax e mettere il risultato in un oggetto

PROMISE: quando faccio una chiamata jAjax mi viene fornito un oggetto che si chiama promise. In pratica io gli
dico fammi questa richiesta e mettimela in una variabile x che è una promessa. Promessa x ad un certo punto
verrà eseguita e verrà eseguita con then() (success) o nel catch se c’è un errore, se metto un altro then() è il
complite

https://jsfiddle.net/sc8qd614/1/

• Costruzioni di funzioni dipendenti l'una dall'altra

• Simile al concetto di "promessa"
• Funzione con due parametri (resolve e reject)
• then() viene eseguita in caso di resolve
• catch() viene eseguita in caso di reject
• Un ulteriore then(), se aggiunto, viene eseguito in ogni caso

ASYNC/AWAIT
https://jsfiddle.net/sc8qd614/7/

• async introduce una funzione asincrona

• La funzione introdotta con async restituisce una Promise
• await può essere usato dentro una funzione async e "aspetta" che una certa Promise sia terminata
• await riceve la risposta di resolve oppure lancia un'eccezione

AXIOS
• Libreria che gestisce solamente le connessioni asincrone
• Più snella di jQuery e più completa di fetch()
• Al posto di $.ajax() si usa axios()
• Restituisce una Promise
• Axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• Axios è usato nello sviluppo web per interagire con le API
Setting Description

headers Header aggiuntivi da inviare

data/params Dati da inviare al server

transformRequest Funzione di trasformazione della richiesta

transformResponse Funzione di trasformazione della risposta

timeout Timeout in millisecondi

method GET o POST

url Indirizzo di richiesta

GET (quando chiedo un informazione. Mi aspetto che da qualche parte vengano salvati) POST (invio informazione.
No salvati)

Setting Description
Funzione da eseguire se la richiesta va a buon fine (e in ogni caso se successivo
then()
al catch()) (success)
catch() Cattura gli errori, richiesta non va a buon fine (errore)

cancelToken Permette di annullare una richiesta in corso (es caricamento di un file)

proxy Usa un proxy per connettersi (host/port/auth)

auth Invia le credenziali (username e password)

baseURL URL di base da anteporre all'url relativo

validateStatus Determina se lanciare un'eccezione in base allo status

AXIOS RESPONSE

Setting Description

data Risposta del server

status Codice di stato (se va a buon fine, 200)

statusText Messaggio di stato (se va a buon fine, "OK")

headers Header di risposta

config Riporta la configurazione di axios della richiesta

request La richiesta originale XMLHttpRequest

ALTRO SU AXIOS
• Esistono funzioni specifiche (axios.get(), axios.post(), ...)
• axios.all(): esegue richieste multiple in contemporanea
• axios.create(): crea un'istanza con valori riutilizzabili
• axios.defaults: imposta i valori di default
LINK UTILI

• https://jquery.com/
• https://javascript.info/async-await
• https://www.html.it/pag/65391/promise-native/
• https://github.com/axios/axios
• https://www.html.it/pag/66525/fetch-api/

OGGETTI
• Le proprietà possono essere stringhe complesse, ma vanno inserite tra virgolette (e richiamate con le
quadre)
• Per comodità, si può lasciare la virgola dopo l’ultima proprietà

• Le proprietà che sono funzioni si chiamano metodi

• Per accedere all’oggetto dal suo metodo si usa la parola this

THIS
• Fa riferimento all’oggetto in cui viene usato:
o Nel caso del metodo: oggetto nel quale il metodo è dichiarato
o Nel caso di funzione: oggetto globale
o Nel caso di evento: elemento DOM che riceve l’evento

This è il button in questo caso

• Attenzione alle funzioni callback: “this" fa riferimento all’oggetto dove viene eseguito!
• obj.printme viene applicato all’oggetto $(button) e non all’oggetto obj
• Usare bind per associare l’esecuzione al metodo specificato

• Non è accessibile dalle funzioni interne

NB: da errore perché this è troppo interno, risolvo

problema risolto mettendo copia di this

• Si copia in una variabile

GESTIONE ERRORI
• Errore: situazione anomala rispetto all’esecuzione del programma
o Accesso ai campi di oggetti non inizializzati
o Chiamate dei metodi non esistenti
o Eccezioni generati intenzionalmente (es., risultato di validazione di qualche input)

• Gestione errori: utilizzo del blocco try–catch

o try: provare l’esecuzione del codice con presenza possibile di qualche errore
o catch: catturare l’evento anomalo per evitare che il programma venga interrotto
o finally: eseguire il codice di «pulizia» - sia
nel caso di esecuzione con successo che
nel caso di errore
• Il comando throw produce un errore
• Deve essere intercettato dal codice chiamante. Throw mi lancia un errore creato artificialmentec

DATA E ORA
• In JavaScript è rappresentata dal tipo Date
• Internamente salvato come millisecondi da 01/01/1970
• Diversi modi per creare oggetto data:
o new Date(): data / ora corrente
o new Date(year, month, day, hours, mins, secs, millis)
o new Date(millis):millisecondi dal 01/01/1970
o new Date(stringFormat): dalla stringa che rappresenta la data/ora [month va da 0 a 11]
• new Date(stringFormat): dalla stringa che rappresenta la data/ora
• Data ISO: YYYY-MM-DD (2020-04-08)
• Data / Ora ISO: YYYY-MM-DDTHH:mm:ss.sssZ
Esempi:
2020-04-08T09:00:00.000
2020-04-08T09:00:00.000+02:00 (Rovereto)
2020-04-08T09:00:00.000-07:00(LosAngeles)
• Altri formati: dipende dal browser
• get/set
o FullYear
o Month (0-11)
o Date (giorno del mese, 1-31)
o Day (giorno del mese, 0-6)
o Hours
o Minutes
o Seconds
o Milliseconds
• getUTC / setUTC
• Formattazione
o toDateString(): ’Fri Apr 10 2020’
o toISOString(): ’2020-04-08T12:00:00.000Z’
o toUTCString(): ’Wed, 08 Apr 2020 21:23:00 GMT’
o toTimeString(): ’23:24:34GMT+0200 (Central European Summer Time)’
o toLocaleString(): ’08/04/2020, 23:25:51’
o toLocaleDateString(): ’08/04/2020’
o toLocaleTimeString(): ’23:25:51’

FRAMEWORK
https://moment.github.io/luxon/
HISTORY
• Oggetto introdotto con HTML5
• È una "pila" di pagine
• Viene popolata di informazioni quando l'utente naviga
• I tastini "indietro" e "avanti" sul browser navigano le pagine della pila
• Può essere usato all'interno del medesimo dominio

METODI DI HISTORY

Metodo Descrizione

.back() Va indietro di una pagina (se esistente)

.forward() Va avanti di una pagina (se esistente)

.go(n) Va avanti/indietro di n pagine (positivo avanti, negativo indietro)

Aggiunge un elemento alla pila
pushState(obj, title, url)
(obj è un oggetto passato, title è ignorato, url è il nuovo url)
Sostituisce l'elemento corrente della pila
replaceState(obj, title, url)
(obj è un oggetto passato, title è ignorato, url è il nuovo url)

LOCATION
• Oggetto JavaScript per ottenere informazione sull'URL della pagina corrente
• L’evento “popstate” serve per intercettare il cambiamento di location (quando l’utente digita un nuovo
indirizzo oppure fa avanti/indietro con la history)

PROPRIETÀ DI LOCATION

Proprietà Descrizione

href L'URL completo

protocol Il protocollo (http/https/ecc.)

host L'host completo dell'URL

hostname Il nome dell'host dell'URL

port La porta (normalmente 80 o 443)

pathname La parte dopo l'host

search La query string (dopo il ?)

hash L'identificatore di pagina (dopo il #)

METODI DI LOCATION
Metodo Descrizione

.assign(url) Carica un'altra pagina (e aggiunge l'entry alla history)

.replace(url) Come .assign(), ma senza aggiungere l'entry

.reload() Ricarica la pagina corrente

SINGLE PAGE APPLICATION
APPLICAZIONI SERVERLESS
CLOUD DATABASE
WEB APP MODERNE

Single-page-application: un unico oggetto all’interno del quale vengono cambiati i dati senza dover ricaricare la
pagina. Questo lo faccio grazia a JavaScript che cambia la formazione della pagina e Ajax che è dedicato al
caricamento dei contenuti senza dover ricaricare la pagina. I contenuti arrivano dal server che carica solo gli
aspetti che servono.

• Single-Page Application
o Applicazione Web (solo front-end) che interagisce con utente cambiando il contenuto della pagina
senza ricaricarla
o Interazione più fluida e veloce
• Grazie a
o JavaScript: cambiamento dinamico della pagina
o AJAX: caricamento dinamico dei contenuti
• Oggi qualsiasi app web è fatta così (Gmail, Facebook, …)

• Single-Page Application
o Dinamica: contenuti dal server
• Grazie a
o Caricamento modulare delle pagine e del codice: solo quello che serve e solo quando serve («lazy»)
o Utilizzo di «cache»: si recuperano i pezzi già scaricati e salvati sul computer
o Con gli strumenti di «packaging» moderni, il codice, frammenti HTML, e le librerie sono ottimizzate /
«minimizzate»
o API REST: Application Program Interface REpresentation State Transfer: elenco di strategie/paradigmi
comuni
o API: funzioni messe a disposizione su Internet per trasferire comandi e dati al/dal server. Modo per un
oggetto di comunicare con l’esterno
o REST: utilizzando il protocollo HTTP e i suoi metodi come linguaggio di programmazione
• Single-Page Application
o Responsive
• Grazie a
o HTML5 e CSS: elementi adattivi e stili
o Framework: (es., Bootstrap) realizzazione dei pattern
• Single-Page Application
o Standard UX e UI
• Grazie a
o Material Design: linee guida
o Framework: (es., Boostrap Material, Vue Material, Ionic)
RIFERIMENTI

Parte client è
l’interfaccia

REALIZZAZIONE “CLASSICA”

Infrastruttura:

• Hardware
• OS
• Rete
• Sicurezza

Software:

• Ambiente di esecuzione
• Database
• Servizi (es., code, mail)

Deployment e manutenzione:

• Versioni
• Avvio, problemi, scalabilità

IL CLOUD: con cloud si indicano dei servizi online che fanno cose e una azienda può appoggiarsi a questi servizi
offerti e pagare

• Definizione da Wikipedia: un paradigma di erogazione di servizi offerti on demand da un fornitore ad un cliente

finale attraverso la rete Internet, a partire da un insieme di risorse preesistenti, configurabili e disponibili in
remoto sotto forma di architettura distribuita.
• Spiegazione «umana»:
o Mi serve un servizio ben chiaro e misurabile
o Facile da configurare, da accedere e da usare (quindi attraverso Internet da remoto)
o Immediatamente pronto per l’utilizzo (quindi risorse pre-esistenti)
o E non mi interessa dove e come è stato realizzato (quindi cloud, architettura distribuita, blah-blah-
blah…)
TIPI DI CLOUD

• On premises: Livello non cloud. Più flessive e più costoso. Io gestisco tutto
• Infrastructure: livello intermedio: faccio gestire hardware a qualcun’altro
• Platform: gestisco solo applicazione e dati. Caso nel cui chiameremo l’API e useremo quei dati.
Infrastructure e Platform è dove operano gli sviluppatori
• Software: zero flessibilità. Costo più basso. Tutto su cloud (es goolge drive, google document)

ESEMPI SaaS
Storage: Elearning: E-Commerce:
• Dropbox • Classroom • BigCommerce
• Google Drive • WooCommerce
• One Drive Payment:
• iCloud
• PayPal
Document Management: • Nexi

• MS Office 365
• Google Suite

IaaS E PaaS

• IaaS: Infrastructure-as-a-Service
o Risorse per realizzare e gestire tutta la mia applicazione
o Macchine virtuali e la rete
• PaaS: Platform-as-a-Service
o Risorse per configurare e eseguire singoli task / elementi della mia applicazione
PaaS

• Database
• Gestione utenti, autenticazione, sicurezza
• Gestione file e multimedia
• Invio mail
• Invio notifiche
• Moduli della logica applicativa
• Strumenti di gestione: analytics, logging, …
DATABASE-AS-A-SERVICE

• Forma «classica»:
o DB tradizionale accessibile con protocolli del DB (rete interna, protocolli specifici)
o Gestita e scalata dal fornitore
• Forma «Web»:
o DB ottimizzati per l’utilizzo aaS (spesso semplificati)
o Accessibili con protocolli HTTP sia su Internet che attraverso una rete interna
o Modello «pay-as-you-go»: pagamento per l’utilizzo effettivo

GOOGLE FIREBASE

• Cloud Platform per gli sviluppatori delle Web e mobile app

o PaaS / SaaS, o anche Mobile Backend-as-a-Service
▪ Cloud Firestore: DB over Internet
▪ Cloud Functions: implementazione dei moduli della logica applicativa in modo Serverless
▪ Authentication: gestione utenti, autenticazione ed autorizzazione, anche con account
Social
▪ Hosting: possibilità di servire gli asset delle Web app
▪ Cloud Storage: contenuto generato da utenti (immagini, video, documenti, …)
▪ Strumenti specifici per il ciclo di sviluppo (testing, logging, analytics, app distribution)
• Piano gratuito molto generoso

CLOUD FIRESTORE
https://console.firebase.google.com/

• DB in cloud:
o Accessibile anche direttamente dal dispositivo / pagina Web / client JavaScript
o Gestito dalla console di sviluppatori Google (basta avere un account)
• NoSQL:
o Non ha uno schema fisso – si possono gestire oggetti JSON arbitrari
o Linguaggio di «query» proprietario, ma molto semplice
• Librerie client:
o SDK per varie linguaggi di programmazione (JS incluso)
• Struttura
o Elementi organizzati in «collezioni»
▪ Es. utenti, prodotti, messaggi, voti, …
o Ogni collezione rappresenta un insieme di oggetti
▪ Non necessariamente omogenei, possono avere anche campi diversi
o Ogni oggetto è un insieme di campi
▪ Semplici (stringhe, numeri, booleani)
▪ Strutturati (array, mappe, date, …)
• Cloud Firestore: creazione di un progetto:
o Includere librerie
o Inizializzare il DB (copiare il codice sul sito)
<script src="https://www.gstatic.com/firebasejs/
10.9.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/
10.9.0/firebase-firestore-compat.js"></script>
INSERIRE DATI
• Tutte le operazioni sono asincrone, restituiscono una
Promise
• A ogni nuovo oggetto viene assegnato un ID univoco

AGGIORNAMENTO DATI

• Modificare solo un campo

• Sovrascrivere l’elemento intero

LETTURA DEI RECORD

• Singolo record

• Tutta la collezione
QUERY
• where(<CAMPO>, <OPERATORE>, <VALORE> )
o Valore: qualsiasi espressione JavaScript
o Operatore di confronto semplice: , ==, <=, >=
▪ where(‘price’, ‘==’, 100);
o Operatore “array-contains”: campo è un array e contiene valore specificato
▪ where(‘colors’, ’array-contains’, ‘blue’)
o Operatore “in”: campo è uno delle alternative specificate
▪ where(‘preferedColor’, ’in’, [‘blue’, ‘red’, ‘green’])
o Operatore “not-in”
o Operatore “array-contains-any”: campo è un array e contiene valore specificato
▪ where(‘colors’, ’array-contains-any’, [‘blue’, ‘red’])

• Possono essere composte

• Restituiscono sempre una collezione (anche se c’è un solo risultato)

• Ordinare i risultati:
o orderBy().orderBy(, ‘desc’)…
• Limitare il numero dei risultati:
o limit()
• Paginazione:
o Indicare inizio pagina successiva usando l’ultimo oggetto trovato precedentemente startAfter(obj),
startAt(obj), endBefore(obj) o endAt(obj)

ELIMINARE UN RECORD
VUE
V&E - IMPORT ED EXPORT
- Si usano per dividere il codice in moduli
- I moduli sono normalmente singoli file
- Import ed export vengono usati dai moduli per comunicare e scambiarsi funzionalità
- Export espone una funzionalià
- Import la utilizza

Import: importo libreria che ho installato

Export: rendo disponibile una libreria che ho fatto

NB: VUE VA UTILIZZATO PER L’ESAME CON MATERIAL DESIGN

CDN VUE
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

V&E – IMPORT ED EXPORT

sayHi.js export function sayHi(user) { alert(`Ciao, ${user}!`); } → esporta questa funzione in modo che qualcun
altro posso usarla

main.js import {sayHi} from './sayHi.js'; → sayHi.js = importa funzione

alert(sayHi); // function...

sayHi('John'); // Ciao, John!

V&E - SOFTWARE
• Stackblitz: https://stackblitz.com/
• VsCode: https://vscode.dev/

VUE.JS
• Framework js per interfacce web interattive
• Separazione tra vista e dati (parte di HTML e JAVA separata rispetto a jQuery che veniva tutto mescolato)
• Astrazione rispetto al DOM
• Leggero e facile da integrare
• Frontend suggerito da Laravel
• Vue si occupa solo del frontend

Ha l'obiettivo di creare interfacce interattive e migliorare l'interazione con l'utente. Separa la visualizzazione (html
e css) e i dati che lo fanno funzionare. Questo consente di non mescolare (come fa ad esempio jQuery) le due
dimensioni. È considerabile un'astrazione del DOM. è leggero e facile da integrare (come Bootstrap con il CDN).
Rispetto a jQ è più leggero, ma permette di fare molte cose che fa jQ, è più leggibile e flessibile (quindi possiamo
non usare jQ se usiamo Vue). Per quanto riguarda Ajax, vue non è fatto per gestirla, ma è meglio usare Axios per le
richieste Ajax piuttosto che jQ.
CONFRONTI
• Più veloce (è più leggero di jQuery)
• Più leggibile (usa HTML standard)
• Più flessibile (è progressivo)

VERSIONE
Codice vue2 non è compatibile con vue3

MVC: model, view, controller

Il primo modello è MVC, un modello dei dati, una vista e un controller che permette all'utente di modificare e di
visualizzare del modello.

MVC modello standard di programmazione. Divide 3 parti:

Modello: backend, sono i nostri dati che di solito stanno in un server

Vista: quello che vedo, l’estetica con cui dati vengono rappresentati. E
quello che utente vede (es utente vede pagina paesi del mondo

Controller: parte che utente usa per interagire con i dati. Es quando
utente preme su stelline per votare. È la parte programmata che sta in
mezzo tra utente e modello.

L'evoluzione dell’MVC è MVVM, ovvero Model - View - View - Model.

MVVM: model view viewModel

Vista e controller nello stesso
punto. Noi gestiamo questo
Quando cambia una certa
variabile, fai quella cosa
Modello abbiamo le direttive, ci
permette di modificare la vista

Quello che
utente vede sul
browser
NUOVO MODELLO DI PROGRAMMAZIONE: MVVM

• Modello (Model): Implementazione del dominio dati

• Vista (View): Componente grafico per l’utente (HTML/CSS)
• Modello per la Vista (ViewModel): Collante tra i componenti precedenti (modello parallelo al Modello, che
descrive il comportamento della Vista)

VUE.JS
Caratteristiche di Vue.js

• Metodi reattivi sui dati

• Aggiornamenti automatici della Vista
• Rendering dichiarativo (markup direttamente nell’HTML): metto cosa deve cambiare in base alla reattività
dei miei dati

metodi sono reattivi sui dati quindi qualsiasi cosa viene modificata sui dati, modifica anche tutto il codice e
anche la vista di quel dato. Inoltre, basta dichiarare nell'HTML quali dati voglio che si vedano, e Vue pensa al
collegamento tra HTML e i dati (questo si chiama Rendering dichiarativo). Il rendering funziona, grazie al CDN
integrato, con degli attributi aggiuntivi (hanno il prefisso v-). C'è un ottimo modo di interpretazione del template
(ciò che con jQ si faceva ad esempio con append, append.child, ecc.).

RENDERING DICHIARATIVO
• Attributi HTML (prefisso v-)
• Interpretazione dei template
• Elaborazione di template
• Sostituzioni di componenti con markup HTML
• Aggiornamento automatico del contenuto quando cambia una variabile: quando cambia una variabile viene
automaticamente cambiata da entrambe le parti (view e controller)

ESEMPIO CDN
Con {{…}} sto inserendo Hello Vue
ESEMPIO CODESANDBOX

• CreateApp crea l’app Vue

• Mount definisce il DIV che deve gestirla

TIPI DI API
Due modalità per programmare VUE3 che VU2 non ha

- OPTION API
- COMPOSITIONAL API

VUE.S PLAYGROUND

import { ref } from 'vue' //devo importare ogni cosa che si usa

const msg = ref('Hello World!')

</script>

ESEMPIO DI VUE.JS
<div id="app"> //parte HTML

</div>

vm = new Vue({ //creo un nuovo oggetto di tipo vue (vm) . nelle graffe metto l'elenco dei
parametri che voglio caricare con Vue, come $.ajax

el: '#app', // el è l'elemento su cui devo caricare Vue. È gestito con un selettore CSS

data: { //i dati possono essere di qualunque tipo

text: 'Hello World from Vue!' //quello che verrà scritto nel documento

});

</script>

var app = new Vue({ el: '#app', data: { scritta : 'Hello world' }, methods: { cambiaScritta: function () { this.scritta =
'Hello again, world!’; } } }) // quando clicco su bottone cambia scritta
ESEMPIO DI BINDING (si possono utilizzare dati più complicati, come dei metodi)
<div id="app"> //parte HTML
<p>{{ scritta }}</p>
<button @click.prevent="cambiaScritta">Cliccami</button>
</div>
<script> //JS
var app = new Vue({
el: '#app',
data: {
scritta : 'Hello world'
},
methods: {
cambiaScritta: function () {
this.scritta = 'Hello again, world!’; } } })

OGGETTO VUE
Elementi che possono essere inseriti nell’oggetto Vue:

• elemento cui applicare Vue (utilizza selettori CSS). Di solito è un div che chiameremo App
• data: i dati (variabili, oggetti, ecc.)
• methods: i metodi da usare in Vue
• computed: proprietà pre-calcolate, sono comode e più snelle dei metodi
• watch: reazioni al cambio delle variabili
• filters: filtri

CICLI E CONDIZIONI

• Attributo v-if per le condizioni →NB condizione si mette nel tag

• Attributo v-for per i cicli
CONDIZIONI
H1 parte di template

Variabile awesome true= vue is awesome

Altrimeneti se false=oh no. Potrei usare un bottone

per andare a modifcare awesome

Se metto in div questo pezzo

<button v-onclick=”awasome = false”> cliccami

</button> al cliccare del bottone cambio stato di a.

Parte racchiuso tra i div è quella che visualizzo su

schermo

In questo caso visualizzerò solo h1 con vue is

awesome perché variabile awesome è true

CONDIZIONI SU GRUPPI
<template> serve per mettere un v-if o v-for su + tag

ALTERNATIVE

V-SHOW: simile al v-if. Viene visualizzato se la variabile è vera. Con v-if oggetto viene creato e distrutto quando
la condizione è falsa e quindi poi oggetto non c’è + in HTML. Mentre con v-show l’oggetto rimane ma viene
cambiata solo la proprietà display di CSS. Alterna displat:none (non mostrare nulla)/displayblock.displayInline

• Modifica la proprietà display del CSS

• Non distrugge/ricrea nulla: gli oggetti ci sono sempre e vengono solamente nascosti
• Rispetto a v-if, crea gli oggetti anche se non si vedono
• v-show è più efficiente per un oggetto che cambia spesso, v-if lo è per oggetti che cambiano poco
(o nulla). Esempio posso usarlo per messaggio d’errore/conferma
• v-show non prevede v-else e non supporta i template
CICLI
Esempio n°1

v-for moltiplica n volte il ciclo tanti quanti sono gli items. In questo caso
verrà moltiplicato per due volte perché abbiamo due item

array

Esempio n°2

Item: variabile
Index: indice arrey
{{ }} oggetti array

CICLI SU OGGETTI

Con value ottengo entrambi gli oggetti

FOR CON RAGE: ciclo che va da 1 a10

Per n che va un numero a 10

FOR CON TEMPLATE

Quando ho bisogno di mettere + di

una cosa ne mio ciclo for
V-IF
Hanno lo stesso funzionamento che ha if in JS Vanno inseriti nel tag di apertura HTML, come attributi.

Esempio

<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-else>Oh no �</h1>

</div>

Vue.config.devtools = true;

let vm = new Vue({

el: "#app",

data: {

awesome: true

});

</script>

Scriverà Ciao sul documento se il parametro awsome dell'oggetto Vue, che richiama h1 (o un suo

padre) tramite el.

Se al posto di voler modificare un solo elemento (h1), volessi modificare un gruppo più grande di

elementi (potenzialmente tutta la pagina), dovrò inserire i vari blocchi che si devono alternare in

un tag "template"

Esempio

<h1>Title</h1>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

</template>

Per avere una condizione più lunga e con più alternative (simile a switch), dovrò fare:

<div v-if="type === 'A'">

</div>

<div v-else-if="type === 'B'">

B
</div>

<div v-else-if="type === 'C'">

</div>

Not A/B/C

</div>

V-FOR
v - for = "item in items" Ha lo stesso funzionamento che ha for in JS Vanno inseriti nel tag di apertura
HTML, come attributi.
Anche il for, come l'if, può essere applicato in un tag template per essere applicato a interi blocchi
di codice.
Esempio
<ul id=“app">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]}})
</script>
Un'altra modalità di ciclare prevede gli indici:
v - for = "(item, index) in items"
<ul id=“app">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]}})
</script>

v-for è più forte di v-if, questo significa che viene eseguito prima se vengono messi entrambi nello
stesso tag. Altrimenti è necessario innestare il tag con il v-for nel tag con il v-if.

V-FOR E V-IF
NB: Non usare insieme v-for e v-if. Vince v-if. Se si vuole usarli assieme vanno annidati

OTTIMIZZAZIONE
Vue riutilizza gli elementi, vue quando cambia una varibiale non distrugge i suoi elementi ma è ingrado
di capire quali cose vanno reciclate. Se una variabile è già stata eseguita non la modifica.
Nei cicli è sempre meglio usare la chiave “key”. Per dire che cosa deve ricrearla da +

Nome elemento per dire che questa cosa

l’ha deve creare da 0

METODI SUPPORTATI.
Quando una variabile cambia, cambia anche il comportamento del sito. Non tutti i cambiamenti di variabile
vengono intercettati, soprattutto quando non sono variabili base. Se ho booleano, numero, stringa vengono
sempre intercettati. Quando ho array non tutti vengono intercettati

Comandi intercettati: se uso questi parametri con array questi vengono intercettati

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• revrese()

Creazione nuovo array

• filter()
• concat()
• slice()

PARAMETRI
2 modi per assegnare valore alla variabile:

• tra parentesi graffe:

{{testo}} (usare questo)
• v-text = “valore”:
span vuoto che viene
riempito con il valore del
nome della variabile che
inserisco

V-BIND (DOMANDA ESAME)

Prevede che un certo attributo di un tag html dipenda da una variabile di vue. La direttiva v-bind viene utilizzata
per collegare un valore ad un attributo html. Aggiungendo v-bind davanti diventa dinamico. L'attributo v-bind
permette di assegare il valore di una proprietà di un oggetto Vue ad un attributo html. Prevede che un certo attributo di
un tag HTML dipenda da una variabile v-bind. V-bind prende valore variabile

Esempio

<button v-bind:disabled="button1Disabled"> l'attributo disabled prenderà il valore che è stato dato alla
proprietà button1Disabled in Vue

<a v-bind:href="link"> Href prenderà come riferimento il link che è stato assegnato alla proprietà link di vue

CHIVI
Suggerimento dato a Vue per dare il nome al nodo HTML. Praticamente obbligatori nei cicli v-for.

Variabile che contiene la mia chiave se metto

v-bind. Metto v-bind perché ci metto una
variabile

DIRETTIVE IN VUE.JS
• Iniziano con v-
• Alcune accettano argomenti, introdotti da :
• Con . vengono introdotti i modificatori agli argomenti

<a href="#" v-on:click.prevent="goToHomepage">

EVENTI IN VUE.JS
Quello che deve accadere

v-on: + azione (evento) + quello che

deve succedere. Posso mettere
codice se corto oppure uso una
funzione che verrà richiamata con i
metodi

counter += 1 → ogni volta che clicco

su bottone aumenta di +1

Quello che deve succedere scritto dentro la funzione

HANDLER DI METODI
green
La variabile this è l’oggetto di vue. Quindi tutte le
variabili di vue che ho dichiarato in data le becco con
this.

NB: This non è oggetto della funzione

MODIFICATORI DI EVENTI

• .stop - Ferma la propagazione dell’evento. Non va avanti a prendere i metodi successivi

• .prevent - Inibisce l’azione originaria dell’evento
• .capture - Associa l’evento alla fase “capture”
• .self - Non esegue l’evento se il click è ereditato da un altro elemento
• .once - Esegue l’evento solo una volta . Prima volta che clicco funziona, dalla seconda non funziona più
• .passive - L’azione originaria viene eseguita prima. Prima fai il default e poi fai il resto

NB: gli eventi possono essere concatenati

MODIFICATORI DI TASTIERA
quando premo tasto enter da tastiera fai funzione
submit

• .enter • .left
• .tab • .right
• .delete • .ctrl
• .esc • .alt
• .space • .shift
• .up • .meta
• .down • # (codice lettera ASCI)

• Anche i tasti possono essere concatenati (ma solo per i tasti modificatori di sistema o il mouse)

<input @keyup.alt.67=“clear"> <div @click.ctrl="doIt">Do something</div> (keyup.alt.67=quando premo all+67)

• Si possono creare scorciatoie per i tasti più usati Vue.config.keyCodes.f1 = 112

• Il modificatore .exact si attiva solo sull’esatta combinazione di tasti

MODIFICATORI DEL MOUSE

• .left
• .right
• .middle

SINTASSI ACCORCIATE
• v-bind: attributo si può accorciare con :attributo
• v-on:evento si può accorciare con @evento

NB: ESAME PUÒ CHIEDERE V-MODEL DA RACCONTARE

FORM (come vue interagisce con i form)
Prima valore form poteva essere di vario tipo (es campo di testo era una stringa,…) ora con vue non ci interessa
sapere di che tipo è il form., basta che inseriamo v-model e lo associamo a una variabile Javascript

• Possono essere gestiti tramite v-model

• si può associare in maniera bidirezionale un campo di un form con un modello di dati
• v-model è agnostico rispetto al tipo di input (textarea, radio, checkbox, ecc),
• NB: i valori iniziali del campo vengo ignorati e sostituiti da quello del modello dati

ESEMPI DI FORM Vuol dire che nella variabile message tra {{ }} verrà salvato un valore
che utente inserisce

Se modifico message questo modifica anche quello in

v-model

2 eventi nei form:

• v-change: quando scrivo in un form, finisco, faccio tab per passare al campo successivo
• on-input: mentre sto digitando il testo vado a cambiare

COME FUNZIONA V-MODEL: (DOMANDA ESAME)

v-model posso usarlo con tutti, checkbox, radiobotton. Con Vue.material sistema comodo per usare anche la
funzione di ricerca

:=v-bind: sto bindando la variabile searchText con il valore, quindi sto mettendo dentro il valore
dell’input la variabile searchText

Appena vado a cambiare qualcosa nell’input setto searchText con il valore che ha in quel
momento il form

V-FOR IN FORM selected=menù a discesa

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<h1>https://codesandbox.io/p/sandbox/crazy-surf-jc22yg</h1>
<div id="app">
<select v-model="selected"> // tag selected = menù a tendina
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option></select
><br />
<span>Selected: {{ selected }}</span> <br/>
<button @click="selected ='B'"> Metti B </button> //mi selezione B dal menù tendina
<button @click="options.push({text: 'Altro', value:'x'}) "> Aggiungi </button>

<input type="text" v-model="mioText" /><br />

Contenuto del campo: {{mioText}}

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />

<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
Vue.createApp({
data() {
return {
selected: "A",
options: [ //opzioni del menù a tendina
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
{ text: "Four", value: "D" },
],
};
},
}).mount("#app");
</script>
</body>
</html>
CHECKBOX E ARRAY:

mi salva tutto elenco di quello che ho selezionato

MODIFICATORI DI EVENTI: gli uso con v-model. V-model attivato sull’evento input cioè appena cambio una
lettera del mio campo lui va a cambiare il valore

• .lazy – cambia la modalità di aggiornamento del valore (modifica quando mi sposto di campo) (da input a
change)
• .number – converte il valore a numerico (applicato automaticamente se type è number)
• .trim - Elimina gli spazi all’inizio e alla fine del valore inserito (es Alessio spazio.trim → elimina gli spazi

Esempio:

<span>Selected: {{ selected }}</span><br />

<button @click="selected = 'B'">Metti B</button><br />
<button @click="options.push({text:'Altro', value:'X'})">Aggiungi</button
><br />
<input type="text" v-model.lazy="mioText" /><br />
Contenuto del campo: {{mioText}}

PROPRIETÀ COMPUTED
Metodi: calcolato ogni volta che l’ho uso Computed: viene ricalcolata solo quando cambiano dei valori
firstname e lastname: sono due variabili

Sono proprietà che

dipendo da una
computazione di
qualche gruppo
Unisci firstname + spazio + lastname

• Possono essere
sia prese che essere impostate
• Si possono usare come proprietà sia in binding sia con le parentesi “a baffo”
• Le proprietà computed vengono ricalcolate quando cambia una delle altre proprietà coinvolte
• Rispetto ai metodi sono più efficienti perché il valore viene ricalcolato solo alla modifica delle altre proprietà
coinvolte e non ogni volta che viene richiamata

Le proprietà computed ermettono di creare delle nuove proprietà che possiamo poi usare nella

nostra pagina. Si creano a partire dalla composizione di più variabili

Esempio

computed: {

fullname:{

get:function() { Quando te lo chiedo mi

restituisci questo
return this.firstname + ' ' + this.lastname;

Quando viene modificata una delle variabili che la compongono, in automatico cambia anche la

computed. E questa viene ricalcolata solo quando varia una delle due, non ogni volta che viene

chiamata. Questo rende il programma è più efficiente e veloce.

Le proprietà computed possono anche essere settate con set

set: function(value) {

var parts = value.split(' ');

this.firstname = parts[0];

this.lastname = parts[1];

} } } }). mount(“#App”);

In questo caso se io tramite la console modifico fullname, verranno modificate anche le variabili di
partenza firstname e lastname
Esempio:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<h1>https://codesandbox.io/p/sandbox/crazy-surf-jc22yg</h1>
<div id="app">
<div id="app">
<input type="text" v-model="fullname" /><br />
{{ firstname }}<br />{{ lastname }}
</div>
</div>
<script>
Vue.createApp({
data() {
return {
firstname: "Dylan",
lastname: "Dog",
};
},
computed: {
fullname: {
get: function () {
return this.firstname + " " + this.lastname;
},
set: function (value) {
var parts = value.split(" "); //divide per lo spazio. Quindi prendo solo
uno spazio
if (parts.length == 1) {

this.firstname = parts[0];
this.lastname = parts[0];
} else {
this.firstname = parts[0];
this.lastname = parts[1];
},
},
},
}).mount("#app");
</script>
</body>
</html>

COMPUTED VS METHODS

• Meglio la variabile computed

• Il valore è inserito in cache e cambia solo quando cambiano le variabili coinvolte

WATCHERS: associo un evento al cambio della variabile. Funzioni si attivano solo quando una variabile viene
cambiata

• Si istanziano con "watch"

• Si attivano quando una variabile viene modificata
• Possono essere create “al volo” con vm.$watch

Vengono iniziate con whatchers. Questo termine indica che questo elemento "osserva" delle variabili e quando
vengono modificate, si attiva. Possono spesso essere sostituiti con una proprietà computed.

Esempio n°1

Watch guarda quando variabile

nome cambia. Quando variabile
nome cambia, submitDisabled deve
diventare true se lunghezza <3.
Viceversa se quando vado a
cambiare la variabile name
disabilito il campo se lunghezza
name è <3

Esempio n°2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<h1>https://codesandbox.io/p/sandbox/crazy-surf-jc22yg</h1>
<div id="app">
<input type="text" v-model="name" />
<button :disabled="submitDisabled">Invia</button> //bottone non disabilitato perché
name maggiore di 3
</div>
<script>
Vue.createApp({
data() {
return {
name: "Alessio",
submitDisabled: false,
};
},
watch: {
name: function (value) { //quando la variabile cambia la variabile sumbmitDi-
sable prende il valore.length. disabilità bottone se valore.length minore di 3
this.submitDisabled = value.length < 3;
},
},
}).mount("#app");
</script>
</body>
</html>

ASSEGNAZIONE DI CLASSI
Assegnazione della class my-class-name se hasClass è true
condizione
Variabile booleana che stabilisce se quella
classe c’è oppure no
Esempio n°1

color: red;
}
.grassetto {
font-weight: bold;
}
.colorato {
color: red;
}
.grassetto {
font-weight: bold;
}

</style>
</head>
<body>
<h1>https://codesandbox.io/p/sandbox/crazy-surf-jc22yg</h1>
<div id="app">
<p :class="{'colorato':mycheck_rosso, ‘grassetto': check_grassetto

}">Il mio testo</p>

<input type="checkbox" v-model="check_rosso" /> Rosso<br /> //quando checkbox rosso sele-
zionata si attiva colore rosso alla scritta
Con v-model ho collegato la checkbox alla variabile

<input type="checkbox" v-model="check_grassetto" /> Grassetto<br />

Il valore della checkbox è: {{mycheck}}

</div>
<script>
Vue.createApp({
data() {
return {
mycheck: false,
};
},
}).mount("#app");
</script>
</body>
</html>
ASSEGNAZIONE DI STILI

 per assegnare stile uno alla volta, meglio

usare le classi
CICLO DI VITA DI VUE.JS
https://www.html.it/pag/63949/vuejs-guida-principi-di-funzionamento/

VUE.CREATEAPP: viene creata App. Le funzioni legate al ciclo di vita di vue sono:

Hook Descrizione
viene invocato dopo che l’istanza è stata inizializzata e prima del setup di eventi
beforeCreate
e watcher
viene invocato dopo l’inizializzazione dell’istanza ma prima che il framework si
created occupi della modifica del template della pagina (la variabile $el non è ancora
valorizzata)
beforeMount viene invocato prima delle operazioni di render
viene invocato subito dopo che l’istanza viene renderizzata e il frammento DOM
mounted originale viene sostituito con quello gestito da Vue. Con il mounted il codice
viene lanciato all’avvio dell’applicazione
beforeUpdate viene invocato prima di eventuali modifiche successive al DOM

updated viene invocato dopo una modifica che ha scatenato modifiche al DOM
viene invocato prima che l’istanza di Vue venga distrutta (ma è ancora
beforeDestroy
funzionante)
destroyed viene invocato dopo la completa distruzione

CICLO DI VITA DI VUE.JS

DIRETTIVE PERSONALIZZATE
• Sostituiscono tool di terze parti per modificare il DOM (per esempio jQuery)
• Sono direttive che si possono richiamare con v-{nome}

Esempio
<div id="vue-app">

<div v-custom-background>Lorem Ipsum è un testo segnaposto utilizzato nel

settore della tipografia e della stampa.</div>

<div v-custom-background="'#BBB'">Lorem Ipsum è un testo segnaposto

utilizzato nel settore della tipografia e della stampa.</div>

</div>

//Vue.directive è da chiamare prima di chiamare un oggetto //new Vue, altrimenti darà errore

Vue.directive('custom-background', {

inserted: function (el, binding) {

el.style.backgroundColor = binding.value || '#DDD'; (se non metto alcun valore metti DDD

}});

var app = new Vue({

el: '#vue-app'

});

RIFERIMENTI AL DOM
Posso dare ad ogni oggetto attributo ref, per settare variabile in
vue, e vue chiamerà quel oggetto in quel modo: vm.$refs

ALTRE AMENITIA’: transizioni

https://vuejs.org/guide/built-ins/transition.html

Transition | Vue.js (vuejs.org)

• Transition: posso fare transizioni cosa fa oggetto quando entra. Posso dare dei nomi alla transizioni. Posso
usare anche CSS ma con Vue è ppiù rapido
• TrantionGruop

Codice spazio: &nbsp

FIRESTORE
Esistono due API di Firestore:
1. Web namespacedAPI
2. Web modular API

Se mancano i campi (tipo capitale Antartide) nel codice inserisco v-if e join per congiungere il resto del codice!
(non so se capiterà mai, ma so che c’è ed esiste)

V&E – EXPORT
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• Il comando export può essere usato per “esportare” le parti di un modulo, in modo che siano visibili
all’esterno (e possano essere importate con “import”)
• Il comando export default stabilisce cosa viene esportato di default quando si chiama il modulo “così come
è”
• Gli export possono essere inseriti tutti insieme in cima al file e poi definiti anche successivamente
VUE AVANZATO
Una delle caratteristiche più forti de framework di sviluppo, e soprattutto di Vue è la sua modularità, ovvero il
fatto di poter programmare le diverse componenti in modo indipendente e flessibile.

Un'altra caratteristica importante è il router, ovvero la possibilità di navigazione tra le diverse pagine di una SPA
tramite l'history, che però resta nascosto dietro questo framework.

COMPONENTI:

• Organizza il codice in moduli riutilizzabili

• Logica, codice, stili: tutto incapsulato dentro il componente
• Possono essere globali (utilizzabili dall’app intera) o locali (interni a un altro componente)

Di solito le applicazioni che utilizziamo hanno diverse componenti e hanno una struttura ad albero: l'app
contiene diverse pagine e ogni pagina a sua volte contiene diverse componenti più piccole. Questa struttura di
permette di riutilizzare dei componenti, di aver diversi moduli indipendenti .

• Pagine intere • Riuso

• Liste • Modularizzazione
• Widget • Librerie di UI
• Elementi UI singoli • Librerie applicativi

Esempio: componenti in classroom

COMPONENTI:
• È una “piccola applicazione” Vue
o Rappresenta un elemento UI (lista, menù, bottone,…)
• Struttura
o Modello logico
▪ Dati
▪ Metodi
▪ Ciclo di vita
• Template HTML
• Stile CSS

Quindi… COMPONENTE = Una piccola applicazione di Vue rappresentata da un elemento UI (una pagina, una
lista, un elemento, un bottone, ecc.). Qualsiasi elemento grafico può essere programmato come un singolo
componente. Più piccolo è il componente e più è componibile l'elemento. Le componenti possono essere a
diversi livelli, ad esempio una voce di una lista è un componente, ma anche la lista costituita da tanti piccoli
componenti diventa a sua volta un componente.

La struttura di un componente segue quella di un oggetto Vue, quindi metodi, dati, ciclo di vita, ecc. I nomi dei
componenti utilizzano i Pascal case, quindi ad esempio HelloWorld, oppure kebab case quindi hello-world

Un componente è costituito da 3 elementi:

• Template
• Script
• css <style> se metto scoperd, si applica solo per quel template

DICHIARAZIONE “MODULARE”

• Un componente → un file separato (.vue)

• Componente «root» dell’app → App.vue
• Utilizzo di export / import dei moduli (ES6)
• Utilizzo degli strumenti di «packaging»
▪ Vue-CLI (command line interface)
▪ Babel
▪ Webpack
DICHIARAZIONE “MODULARE”, STRUTTURA STANDARD

• Cartella public → si usa per packaging

• Package.json: istruzioni per packaging (dipedenze,comandi,..)
• src/
▪ assets/: contenuti statici (es. immagini)
▪ components/: componenti singoli
▪ App.vue : componente «root» dell’app
▪ main.js: JS principale

• Dichiarazione modulare

PROPRIETÀ:

• può avere attributi (proprietà) che possono essere “bindati”

ONE WAY DATA FLOW: i dati scorrono in un’unica maniera

• I componenti non possono modificare le loro proprietà né

quelle dei parent
• Gli eventi custom permettono di svolgere questo compito
• Il metodo $on permette di mettersi in ascolto
• Il metodo $emit genera invece un evento
Il figlio può emettere degli eventi che vengono intercettati dal padre

Il padre passa le informazioni che non possono essere modificate dal

figlio

Quando “genitore” manda info al figlio -> props

Il “figlio” non può cambiare l’evento ma può fare una richiesta al “genitore” -> >$emit
TWO WAY DATA FLOW

• Meccanismo troppo «verboso» per modifica di ogni attributo

• Può essere implementato con v-model
o Associato campo del «parent» alla proprietà del «child»
▪ v-bind:modelValue = ‘firstname’
o Child emette evento ‘update:modelValue’
Esempio n°1

Esempio n°2
SLOT
• Rendono i componenti più dinamici

Es: <div class = slot name=’title’> <div>

• Prevedono l’inserimento di valori all’interno del custom tag dei componenti
• Possono essere molteplici all’interno del componente, ciascuno col proprio nome

Esempio n°1:

Esempio n°2

• Possibilità di passare non solo parametri ma anche il contenuto

• tipo librerie dei componenti UI
• scenari comuni di presentazione
• componente con spazio (slot) che può essere “riempito” a piacere
PROVIDE/INJECT
Da così

Con props bisogna passare tutte le

proprietà

A così: vengono ereditate le proprietà senza essere passare. Da la possibilità a tutti di usare il valore, ma scelgo
io chi lo prende senza farlo passare per tutto il percorso

PROVIDE
provide: lo avrà il nonno
INJECT

SINGLE PAGE APPLICATION

• Applicazione Web (solo front-end) che interagisce con utente cambiando il contenuto della pagina senza
ricaricarla
• Pagine diverse → componenti diversi
o Struttura app fissa (es., toolbar, menu laterale)
o Contenuto segue la navigazione
o Stato app riflette il componente selezionato (es. titolo contestualizzato)

NAVIGAZIONE

• Varie pagine dell’app:

Home, Page1, Page2,
Page3
• Contenuto cambia
quando navigo
• Mantenere lo stato
se ricarico la pagina
VUE ROUTER
router.vuejs.org

• Vue Router: configurazione della navigazione

o Basato sui componenti
o Supporta i route con parametri
o Supporta i route annidati
o View transition (animazione)
o History di navigazione
o Integrazione facile (va installato)
• Definire configurazione di routing
o mappa «nome route → componente»
• Usare metodi / direttive specifiche per cambiare la route
• Oggetto router cambia indirizzo della pagina e istanzia il componente associato
• Il componente viene renderizzato nello «spazio» corrispondente (router outlet)

• Da integrare in main.js
NAVIGAZIONE DINAMICA
• Route path può contenere i parametri
o /users/:id
o users/:username/posts/:post_id
• Route link
o /users/1
o /users/rossi/posts/123
GESTIONE NAVIGAZIONE NEL CODICE
• Tutti i componenti hanno accesso a
o $router: istanza del router
▪ $router.push(): naviga alla route specificata (come stringa, oggetto con parametri e/o
query). Il percorso si aggiunge alla history.
▪ $router.replace(): come prima, ma sovrascrive l'ultimo elemento della history.
▪ $router.back()
▪ $router.forward()
▪ $router.go(n): andare avanti / indietro di n passi (se voglio andare alla pagina precedente
devo fare -1). Fa ciò che fanno i due comandi precedenti in un unico comando.
Consistente con History API

Sia .push che .replace possono accettare i seguenti parametri tra parentesi:

o $router.push():
▪ $router.push(‘nome’): se vogliamo specificare la route tramite il nome
▪ $router.push({name: ’nome’, params: {p1: ‘v1’}}): se devo passare dei parametri
▪ $router.push({name: ’nome’, query: {p1: ‘v1’}})
▪ $router.push({path: ’/path/v1’}): far riferimento a una route non dal nome, ma dal percorso
in sé. Attenzione ad inserire il nome del percorso completo.
• Tutti i componenti hanno accesso a
o $route: dà accesso alla route corrente e a tutti i parametri, alle query, al nome e al percorso tramite i
seguenti comandi. (Come se fosse un oggetto)
▪ $route.params
▪ $route.query
▪ $route.name
▪ $route.path

NAVIGATION GUARD
• Possibilità di modificare il processo di navigazione inserendo dei controlli in diversi momenti:
o Perché: per cancellare la navigazione o per fare redirect (es. se richiede autenticazione)
o Quando: prima di attivare la navigazione, dopo che la navigazione è avvenuta
o Dove: globalmente (per tutte le route), per una route specifica, all’interno del componente
• Globali:
o .beforeEach (to, from, next): prima di entrare nella pagina, prima della navigazione (globale)
o .afterEach (to, from): globale dopo la navigazione
o .beforeResolve: prima che viene istanziato il componente di arrivo viene eseguita un’altra funzione
• Per singola route:
o .beforeEnter (to, from, next): è analogo a beforeEach, ma non è globale, ma per un componente
specifico
• Per componente:
o .beforeRouteEnter (to, from, next): prima che si entra nel componente. Non ha accesso a «this»
perché l'istanza non è ancora stata creata
o .beforeRouteUpdate (to, from, next): quando il componente viene riusato. Quindi c'è una
navigazione da un componente a sé stesso. Quindi non è una vera e propria navigazione, ma una
modifica dei suoi parametri (Es. da /user/1 a /user/2)
o .beforeRouteLeave (to, from, next): appena prima di uscire dal componente. Comodo per
controllare e salvare i dati. Anche questo può essere bloccato (es. quando c'è un form che non è
stato completamente compilato e quindi l'utente non può lasciare la pagina)
• Ritorna nulla se la navigazione può procedere
• Ritorna una particolare pagina
• Ritorna false se si vuole bloccare la
navigazione

META FIELDS

MAGGIORI INFORMAZIONI
https://vuejs.org/api/
VUETIFY
Lista pagina HTML -> estetica (componenti app. vue)

Java -> meccanica applicazione. Da una parte legge dati che dà alla grafica.

Model -> API

VUEJS – CARATTERISTICHE
Mobile app: Ionic(framework che permette di scrive una volta sola e poi si adatta a tutte le piattaforme in base a
dove verrà visualizzato se su Android o Apple), NativeScript

preview.keenthemes.com: siti che permettono di guardare dei temi e comprarle.

Design system: come gestire grafica di un sito. In base al mio cliente il design system cambia. Esso definisce una
serie di principi e le caratteristiche identificativi.

Di solito viene accompagnato da (uno o più) software Decelopment kit

• Per tecnologia/framerwork specifico o generici

• Per canali diversi (es., app monile o web)
• Implementazioni multiple (es., Material Design)

STRUTTURA DELLE WEB APP

Layout: come voglio fare la struttura del sito

Navigazione: come voglio che utenti navighi sul mio sito: menù, tab, menù che scompare,…

Dati: come voglio presentare dati: grafici, tabelle, elenchi

Interazione: come voglio che utente interagisca con interfaccia (input)

Comunicazione: come voglio comunicare con utente: finestre per chiedere info

IMPLEMENTATURA:
La struttura delle web app posso farle:

- A mano: esempio stelline (lezione 30.04.2024). partire da HTML5. CSS. Realizzare tutti i
componenti/animazioni/temi
- Usando come base un framework esistenti:
o Componenti già esistente (bootstrap)
o Cambiare animazioni/stili/librerie JavaScript
- Usando librerie Materia generiche
- Usando librerie Material specifiche per Vue
o Integrazione stretta con modello/eventi di vue
o Condivisione delle librerie di base è meno dipendenze/più leggero
VUETIFY
https://vuetifyjs.com/en/

CodeSandbox pacchetti da installare:

vuetify e @mdi/font (per le icone)

CDN VUETIFY:

Per usare vuetify, inseire 4 import:

import "vuetify/styles"; import { createVuetify } from "vuetify";

import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "@mdi/font/css/materialdesignicons.css"; const vuetify = createVuetify({ components,
directives, });

COME INIZIARE: WIREFRAMES: https://vuetifyjs.com/en/getting-started/wireframes/

STRUTTURA DELL’APP
v-app: contenitore di tutto il sito

v-app-b: <v-icon>mdi-nome_icona</v-icon>ar: barra in alto

v-navigation-drawer: menu laterale

v-main: contenitore

STILIE

• Colori — https://vuetifyjs.com/en/styles/colors/
o Classe text-{color}-{lighten|darken}-{n}
o Classi predefinite:
▪ Primary, secondary, info, success, warning, error
▪ Colori dalla palette Material
o Possibilità di definire i temi custom
• Elevation: https://vuetifyjs.com/en/styles/elevation/
o quanto lo voglio in rilievo
o Classe: elevation-{n} (1-24)
o Proprietà: elevation=“0"

ICONE

• md-icon
• Usano icone del https://material.io/tools/icons
o Sintassi: <v-icon icon="mdi-nome_icona"></v-icon>
o Sintassi: <v-icon>mdi-nome_icona</v-icon>
• Dimensioni
o Property «size»: x-small, small, medium, large, x-large
BOTTONI:

• v-btn
o Doc: https://vuetifyjs.com/en/components/buttons/
o Proprietà: density, size, block, ripple, elevation, …
o Slot: prepend, append • Bottoni con icone
▪ Property: icon, prepend-icon, append-icon
o Posizionamento
▪ Property: position

STRUTTURA DELL’APP
v-model: posso associare stato di un oggetto a una
variabile automaticamente

router vue: per dire dove voglio la pagina. --> link-to

v-list

navigazione dinamica : quando clicco su una certa

pagina mi può cambiare anche la grafica

NAVIGAZIONE

• Varie pagine dell’app: Home, Page1, Page2, Page3

• Contenuto cambia quando navigo
• Mantenere lo stato se ricarico la pagina
ROUTER:

Router Link è opzionale. Attributo to supportato

direttamente da tanti elementi:

• v – btn
• v-list-item
• v-breadcrumbs-item
• v-tab
• …

LISTE

• v-list
o Proprietà:
▪ Lines (one, two, three)
o Contenuti:
▪ v-list-item
▪ v-divider
▪ v-list-subtitle

NAVIGAZIONE DINAMICA

• Obiettivo
o Visualizzare componenti per i dati simi (es. dettaglio di una persona dalla lista)
o Navigazione di secondo livello
• In alternativa/aggiunta a Drawer si può usare Tabs, Bottom Bar, Bredcrumbs
• v-tabs/v-tab
• v-bottom-navigation

• v-breadcrumbs
•

LAYOUT
VueMaterial, come Bootstrap, prevede una griglia di fondo che rende l'applicazione responsive e aiuta nella
disposizione degli elementi.

Per crearla si utilizza md-layout. Abbiamo diverse classi per gestire il layout:

• md-layout-item: crea una colonna, quindi non abbiamo un tag specifico per la colonna, ma deve
essere inserito come classe.
• md-gutter: aggiunge spazi tra le diverse colonne
• md-alignment-Y-X: posiziona il contenuto nella griglia. (X= left, center, rigth, space-arount, space-
between / Y=top, center, bottom)
• v-container: griglia
• v-row: riga
• v-col: colonna singola, attributo cola=[numero colonne]
• v-spacer: aggiunge spazi tra colonne

Griglia può essere anche annidata.

Colonne possono avere dimensioni diverse:

• In 12 colonne: cols=[X] (da 1 a 12)

• Con breakpoint: xs / sm / md / lg / xl = [X] (da 1 a 12)
Colonne possono essere nascoste in base alle dimensioni:

• Stili di utilità, d-none / d-flex oppure d-{bp}-none / d-{bp}-flex

CARDS: v-card [1]

• v-card-title [2]
• v-card-subtitle [3]
• v-card-text [4]
• v-card-actions [5]

con immagini:

• v-img

TABELLE:
TABELLE DI BASE: v-table

• v-table: wrapper per «table»

• Proprietà come density, theme, fixed-header

DATA TABLE: far vedere tanti dati (es pagina mail scorrere)

• Supporto esteso per lavorare con i dati – ordinamento, paginazione, filtri, ecc.
• Supporto per sorgenti API server

MENU: v- menù

• Activator slot – elemento di attivazione

• Contenuto – v-list

FORM: v-form

• v-form: contenitore
• v-text-input → input type=«text»
• v-checkbox → input type =«checkbox»
• v-switch → input type =«checkbox»
• v-radio → input type=«radio»
• v-textarea • v-slider, v-range-slider
• v-combobox
• v-select
• v-file-input
• v-autocomplete
• v-autocomplete: digito qualche lettera e mi fa vedere cose con contengono quella lettera
• chips: filtrare
• color picker: far scegliere colore utente
COMUNICAZIONE:
Riguarda come comunicare/chiedere qualcosa/dare un feedback all’utente. Ci sono molti componenti per farlo:

dialogo:

• v-alert: titolo, contenuto

• v-dialog: template per il contenuto
• v-snackbar: messaggio in fondo allo schermo. si usa solitamente per dare un feedback all'utente per
qualche azione che ha fatto. Compare questo messaggio a fondo pagina non-bloccante, quindi l'utente
può continuare a fare quello che stava facendo sulla pagina, a differenza del dialog
• Progress bar / spinner: v-progress-linear/v-progress-circular
informa l'utente che il browser sta lavorando per sodisfare la sua richiesta

ALTRE AMENITÀ

• v-rating: stelline
• v-timeline:
• v-banner:

VUELIDATE:

• permette di mettere messaggi errore se un campo non viene

compilato
• Libreria esterna di validazione
o Correttezza dei campi:
▪ Campi obbligatori
▪ Lunghezza
▪ Pattern
▪ Regole specifiche
▪ Password, ecc.

SASS variables: mi dice valori di default per scherm, che posso

modificare

Title sono classi, non componenti.

NB: Cols non è numero di colonne in cui è diviso la griglia, ma il numero di colonne che volgio che
occupi il mio oggetto

DOMANDE ESAME: <v-col cols="12">Ciao</v-col>

C’è 12 perché sul dispositivo che è piccolo ogni card occupi 12 dodicesimi

Cover = immagine deve occupare tutto il pezzettino

Capire se ci sono bug, e sapere il motivo non valuta come errore

Esempio:
<script lang="ts">
import axios from "axios";
export default {
mounted: function () {
let vueThis = this;
axios
.get("https://restcountries.com/v3.1/all")
.then(function (data) {
// console.log("Sto montando");
/* vueThis.countryData = data.data; sto simulando caricamento card*/
/// vueThis.countryData=[];
//}, 1000);
/* vueThis.countryData =
data.data; /*primo sempre data senconda guardare api*/
// });

setTimeout(function () {
vueThis.countryData = data.data;
vueThis.errorData = undefined;
// vueThis.countryData = [];
}, 1000);
// vueThis.countryData = data.data;
})
.catch(function (data) {
vueThis.errorData = data;
});
}, //inizializzo pulsante drawer
data() {
return {
drawer: null,
countryData: undefined, //undefined perchè possiamo verificare se per capire se ha
cariato*/,
errorData: undefined,
};
},
};
</script>

<template>
<v-app id="inspire">
<v-navigation-drawer v-model="drawer">

</v-navigation-drawer>
<v-app-bar color="primary">
<v-app-bar-nav-icon @click="drawer = !drawer"> </v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-main>
<v-empty-state
v-if="errorData !== undefined"
headline="Errore"
:text="errorData.message"
icon="mdi-exclamation-thick"
></v-empty-state>

<v-container v-if="countryData === undefined">

<v-row>
<v-col v-for="i in 12" cols="12" sm="6" md="4" lg="2">
<v-skeleton-loader type="card"></v-skeleton-loader>
</v-col>
</v-row>
</v-container>
<v-empty-state
v-else-if="countryData.length === 0"
headline="Non ci sono paesi"
text="Non ci sono paesi con il filtro selezionato"
icon="mdi-exclamation-thick"
></v-empty-state>
<v-container v-else="countryData">
<v-row>

z

<v-col cols="12" sm="6" md="4" lg="2" v-for="country in countryData">
<v-card>
<v-img :src="country.flags.png" width="200px" cover>

</v-img>
<v-card-title>
{{ country.name.common }}
</v-card-title>
<v-card-subtitle>Un film di fantascienza</v-card-subtitle>
<v-card-text> Bla bla bla </v-card-text>
</v-card>
</v-col>



</v-row>
</v-container>
</v-main>
</v-app>
</template>

RITARDARE RICHIESTE AJAX PER VEDERE QUELLO CHE STO FACENDO

NB: mettere scheletro caricamento dei componenti per dare feedback all’utente che si sta caricando
componente → importante per feedback. Vedi v.vuetify

Potrebbero piacerti anche

Quesiti Tecnici Per Il Reclutamento Di Sviluppatori
67% (3)
Quesiti Tecnici Per Il Reclutamento Di Sviluppatori
10 pagine
3 Reti Web Sicurezza
Nessuna valutazione finora
3 Reti Web Sicurezza
25 pagine
HTML5, CSS3, JavaScript, Ajax, JQuery - Programmare Per Il Web, Lato Client (Italian Edition)
100% (1)
HTML5, CSS3, JavaScript, Ajax, JQuery - Programmare Per Il Web, Lato Client (Italian Edition)
384 pagine
1.web Design - WEB
Nessuna valutazione finora
1.web Design - WEB
45 pagine
Programmare Con AJAX
100% (1)
Programmare Con AJAX
162 pagine
La Rivoluzione Culturale Del Web 2.0
Nessuna valutazione finora
La Rivoluzione Culturale Del Web 2.0
16 pagine
02 I Protocolli Uri e HTTP
Nessuna valutazione finora
02 I Protocolli Uri e HTTP
79 pagine
02 I Protocolli Uri e HTTP
Nessuna valutazione finora
02 I Protocolli Uri e HTTP
83 pagine
Tecnologie Web
Nessuna valutazione finora
Tecnologie Web
61 pagine
Web Data Science
Nessuna valutazione finora
Web Data Science
34 pagine
2.web Design - Intro HTML CSS
Nessuna valutazione finora
2.web Design - Intro HTML CSS
56 pagine
Linguaggi Digital
Nessuna valutazione finora
Linguaggi Digital
63 pagine
Enrico Gramellini Tesi
Nessuna valutazione finora
Enrico Gramellini Tesi
138 pagine
Appunti Tecnologie Web Berto
Nessuna valutazione finora
Appunti Tecnologie Web Berto
56 pagine
01 Introduzione Al World Wide Web
Nessuna valutazione finora
01 Introduzione Al World Wide Web
25 pagine
TPSIT Completo
Nessuna valutazione finora
TPSIT Completo
21 pagine
Appunti TPS
Nessuna valutazione finora
Appunti TPS
6 pagine
Appunti
Nessuna valutazione finora
Appunti
36 pagine
00 Introduzione PDF
Nessuna valutazione finora
00 Introduzione PDF
13 pagine
Idoneità Informatica UniBg Slide Complete
Nessuna valutazione finora
Idoneità Informatica UniBg Slide Complete
110 pagine
Visual Design Ed Elaborazione Grafica
Nessuna valutazione finora
Visual Design Ed Elaborazione Grafica
32 pagine
Trovare Su Internet - Fabio Brivio
Nessuna valutazione finora
Trovare Su Internet - Fabio Brivio
127 pagine
Web Design
Nessuna valutazione finora
Web Design
26 pagine
Progettare e Programmare Vol2 Cap7
Nessuna valutazione finora
Progettare e Programmare Vol2 Cap7
26 pagine
Dispensa AbInf 2023
Nessuna valutazione finora
Dispensa AbInf 2023
34 pagine
Tecnologia Dei Materiali
Nessuna valutazione finora
Tecnologia Dei Materiali
15 pagine
Dispensa AbInf 2021
Nessuna valutazione finora
Dispensa AbInf 2021
33 pagine
Appunti Informatica PDF
Nessuna valutazione finora
Appunti Informatica PDF
31 pagine
Applicazioni Web
Nessuna valutazione finora
Applicazioni Web
21 pagine
Lezione 7
Nessuna valutazione finora
Lezione 7
30 pagine
Tecnologie Di Sviluppo Web Per Sviluppo Mobile
Nessuna valutazione finora
Tecnologie Di Sviluppo Web Per Sviluppo Mobile
33 pagine
0 F 5 BCC
Nessuna valutazione finora
0 F 5 BCC
22 pagine
Interrogazione Tipsit
Nessuna valutazione finora
Interrogazione Tipsit
2 pagine
Introduzione Alle Architetture Web
Nessuna valutazione finora
Introduzione Alle Architetture Web
23 pagine
5-6 Cosa Succ Quando Clicchi Su Un Link
Nessuna valutazione finora
5-6 Cosa Succ Quando Clicchi Su Un Link
6 pagine
Internet 2
Nessuna valutazione finora
Internet 2
21 pagine
Pagine Web: Introduzione
Nessuna valutazione finora
Pagine Web: Introduzione
7 pagine
Analisi Siti Web
Nessuna valutazione finora
Analisi Siti Web
21 pagine
Relazione Odt
Nessuna valutazione finora
Relazione Odt
1 pagina
Scritto 2024 07 16 Testo
Nessuna valutazione finora
Scritto 2024 07 16 Testo
7 pagine
Linguaggi Del Web
Nessuna valutazione finora
Linguaggi Del Web
23 pagine
Programmare Per Il Web - Lato Client (2012)
Nessuna valutazione finora
Programmare Per Il Web - Lato Client (2012)
334 pagine
HTML Js
Nessuna valutazione finora
HTML Js
6 pagine
Microservizi SOAP REST WSDL
Nessuna valutazione finora
Microservizi SOAP REST WSDL
10 pagine
Web e HTTP
Nessuna valutazione finora
Web e HTTP
4 pagine
TTPW 2022 Lezione 01
Nessuna valutazione finora
TTPW 2022 Lezione 01
56 pagine
15 WebDesign
Nessuna valutazione finora
15 WebDesign
31 pagine
Web Design 1
Nessuna valutazione finora
Web Design 1
5 pagine
Studio Tecnologie Web
Nessuna valutazione finora
Studio Tecnologie Web
8 pagine
Reti Riassunto
Nessuna valutazione finora
Reti Riassunto
14 pagine
Catch The Star
Nessuna valutazione finora
Catch The Star
6 pagine
Evoluzione Del Web
Nessuna valutazione finora
Evoluzione Del Web
2 pagine
TPSIT
Nessuna valutazione finora
TPSIT
6 pagine
Sviluppare applicazioni Web con Google Apps Script ed AngularJS
Da Everand
Sviluppare applicazioni Web con Google Apps Script ed AngularJS
Massimo Coletti
3/5 (1)
HTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi Pratici
Da Everand
HTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi Pratici
Oscar R. Frost
Nessuna valutazione finora
JavaScript: Una guida completa
Da Everand
JavaScript: Una guida completa
Christopher Ford
Nessuna valutazione finora
Corso html. La base di ogni sito web
Da Everand
Corso html. La base di ogni sito web
Antonino Latocca
1/5 (1)
App Inventor 2 con database MySQL
Da Everand
App Inventor 2 con database MySQL
Antonio Taccetti
Nessuna valutazione finora
Guida a JavaScript: Dal Principiante all Esperto: La collezione informatica
Da Everand
Guida a JavaScript: Dal Principiante all Esperto: La collezione informatica
Christopher Ford
Nessuna valutazione finora
Javascript: Un Manuale Per Imparare La Programmazione In Javascript
Da Everand
Javascript: Un Manuale Per Imparare La Programmazione In Javascript
Troy Dimes
Nessuna valutazione finora