Informatica 1

INFORMATICA
WEB = un network di computer collegati tra loro

dal 2014 esistono più di un miliardo di siti
inizialmente i ricercatori usavano i siti per condividere le proprie ricerche, adesso invece li usiamo per tutto
web = è un insieme di computer tra loro collegati che possiedono siti web quando un computer collegato al web ed
emette un sito web lo definiamo server perché serve un sito web
un sito è scritto attraverso tre linguaggi:
1) Html per elaborare il contenuto del sito
2) Css  per dargli un determinato aspetto e
3) Javascript per renderlo interattivo
per navigare in un sito utilizziamo un'applicazione dedicata ad esempio
- chrome
- firefox
- internet explorer
queste applicazioni sono definite “browser”
tutti i browser cercano di mostrare i siti nello stesso modo ma in realtà sono differenti ed è per questo che ogni tanto
diciamo ops in questo sito c'è un bug provane un altro
un computer portatile un telefono un tablet o perfino una piccola televisione = questi dispositivi sono definiti clients che
possono essere molto differenti = grandi o piccoli con il touch screen o con la tastiera.
i siti devono cercare di funzionare correttamente con ogni tipo di client
NOZIONI DI BASE HTML

Ogni webpage comincia con scritto DOCTYPE in cima, e questo è un segnale al browser che qst webpage è scritta in HTML
moderno e non datato o poco appropriato HTML.
HTML è un linguaggio di tipo markup  infatti è basato tutto sui tags.
Tag = un element che inizia con una parentesi angolata with e finisce con un’altra parentesi angolata <>
Il primo tag di ogni pagina è sempre <html>, sotto DOCTYPE. Alla fine c’è praticamente lo stesso tag ad eccezione della
barra </html>
Il tag <html> deve contenere tutti i tag che costituiscono la pagina e perciò il tag di fine </html> si trova alla fine. Molti dei
tag <html> si trovano in coppia (<html> </html> ma non tutti.
Sotto il tag <html> si trova sempre un tag <head> che contiene i tag attraverso cui il browser riesce a creare la pagina ma
NON contiene nulla di ciò che l’utente vede effettivamente
Segue il tag <meta charset =”utf-8”> che fornisce al browser maggiori info su come creare la pagina.
Per es. Se stai usando caratteri comuni come quelli dell’inglese e NON caratteri +difficili come quelli dell’arabo allora il tag
meta dovrebbe essere = utf- 8.
Poi c’è il tag <title> New Webpage </title> che il browser utilizza per il titolo della pagina mostrato nella barra in alto di
una pag web nei bookmack e nei risultati di ricerca
I'm going to make a page all about rabbits
<title> all about rabbits!! </title>
Il tag <body> </body> che contiene tutto il corpo del testo, dove avverrà ogni cosa
Per aggiungere un titolo usiamo il tag <h1>all about rabits</h1>
In realtà abiamo 6 tag che possiamo utilizzare per I titoli <h1>,<h2>,<h3>,<h4>,<h5>,<h6></h6>. Il tag <h1> serve per il
titolo +importante della pagina, il tag<h6></h6> per quello meno importante
Per aggiungere i titoli per altre sezioni usiamo il tag<h2></h2>, visto che si tratta di sezioni meno importanti
Pubblico di alieni che non hanno mai visto un coniglio, forniamo una descrizione dell’animale contenuta all’interno di un
intero paragrafo che segnaliamo con il tag <p> </p>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way.
They eat the most orange vegetables in our world, and they reproduce more than any human ever has.</p>
<h2>Songs</h2>
<p>Little Bunny Foo Foo</p>
In html il browser ignora gli a capo e gli spazi e se voglio che ne crei dobbiamo segnalarlo esplicitamente tramite il tag
<br> cioè “break”. Nel tag <br> non c’è un tag conclusivo perché una pausa non ha un contenuto quindi non ha bisogno di
un riferimento che la concluda ma c’è solo bisogno di un tag di inizio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>All about rabbits!!</title>
</head>
<body>
<h1>All about rabbits!</h1>
<h2>Basic info</h2>
They eat the most orange vegetables in our world, and they reproduce more than any human ever has.</p>
<h2>Songs</h2>
<p>Little Bunny Foo Foo, <br>

I don't want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>
</body>
</html>
HTML ENFASI DEL TESTO

Tag <em> </em> (sta per emphasis) lo usiamo per indicare dove metteremo l’enfasi se stessimo parlando. Il browser
vedrà il tag e renderà in corsivo il testo al suo interno per mostrare come enfatizzare
They eat the most orange vegetables in <em>our</em> world, and they reproduce more than any human ever has.</p>
Per segnalare il contenuto più importante usiamo il grassetto che viene indicato dal tag <strong> </strong> e il browser
vedrà il tag e renderà il testo +spesso in modo che sia +evidente
They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human ever
has</strong>.</p>
Possiamo anche combinare I tag <em> e <strong> ed inserirli l’uno nell’altro
They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human
<em>ever</em> has</strong>.</p>
HTML: LISTE
Html ci fornisce dei tag per creare liste. Per creare una lista con i punti, dobbiamo iniziare con il tag <ul> </ul>
Ul = unordered listed (senza ordine), significa che il browser non numererà gli elementi della lista, ma aggiungerà solo
alcuni ordinatori
- = ordinatore
Per segnalare gli ordinatori <li> </li> (listed item = elementi della lista)
Ogni volta che ogliamo aggiungere un nuovo elemento dobbamo aggiungere sotto il tag <ul> un nuovo tag <li>.
Ogni tag <ul> dovrebbe avere almeno un tag <li> sotto di sé perché non esistono liste prive di elementi.
<!DOCTYPE html>
<html>
<head>
<title>HTML: Lists</title>
</head>
<body>
<h2>Why rabbits make great pets</h2>
<ul>
<li>They're furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>
Per creare delle liste numerate /classifiche, useremo il tag <ol> </ol> al posto del tag <ul></ul>
Ol = lista ordinata, in quanto il tag comunica al browser di numerare automaticamente ciascun elemento. Per aggiungere
elementi all’interno della lista usiamo sempre il tag <li> </li> .
Il brower si occupa della numerazione al posto nostro, quindi se cambiamo l’ordine, cancellliamo elementi o ne
aggiungiamo di nuovi  il browser aggiorna sempre il numero correttamente
<h3>Top 3 most famous rabbits</h3>
<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>
HTML: IMMAGINI
Per inserire un’immagine all’interno di una pagina web, usiamo il tag <img ….> ma da solo non indica nulla al browser
perché dobbiamo specificare l’url dell’immagine.
Url ciò che compare nella parte superiore del browser, nella barra degli indirizzi; di fatto è proprio un indirizzo, è un
modo per trovare determinate risorse nel web.
Questo significa che possiamo inserire un’immagine solo se si trova da qualche parte in internet, non possiamo inserire
immagini che si trovano solo nel nostro computer.
Perché appaia c’è bisogno di aggiungere un attributo (info aggiuntiva rispetto ad un tag) al tag <img> . Per comunicare
l’url al browser usiamo un attributo dal nome source (fonte), poi inseriamo un imbolo di uguale per indicare al browser il
valore dell’atttributo, apriamo le virgolette che il programma chiuderà automaticamente, in modo che il valore
dell’attributo sia sempre compreso tra le virgolette aperte e quelle chiuse. Attraverso la sigla htttp sappiamo che il tag fa
riferimento ad una qualche immagine caricata da qualche parte in rete
<img src = “url …..”
Ma se il browser non riuscisse a scaricare l’immagine noi non sapremmo mai che immagine ci sarebbe dovuta essere l’ì ??
niente paura le immagini possiedono anche l’attributo alt che usiamo per comunicare al browser il testo alternativo per
un immagine. Lasciamo uno spazio dopo le virgolette chiuse e digitiamo alt seguito dal simbolo dell’uguale e dalle
virgolette, il testo tra virgolette sarà un’utile descrizione dell’immagine. Ciò aiuta anche coloro che navigano nelle pagine
web ma che non le possono vedere ad es i ciechi che possono usare un lettore dello schermo che legge letteralmente le
pagine descrivendo loro ogni tag che incontra. Quando legge un’immagine il lettore andrà a rilevare il contenuto di alt, in
quanto una persona non ha modo di vedere le immagini perciò dovremmo sempre utilizzare i tag alternativi affinchè
chiunque possa rapportarsi con il nostro sito.
Per ridimensionare l’immagine abbiamo 2 attributi: largezza e lunghezza
È meglio indicare O la profondità O l’altezza MA NON entrambe. Meglio lasciare che sia il browser a decidere quale è
l’altra dimensione
<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in barn"

width="203">
NOZIONI DI BASE CSS
Lo stile/font  è importante osservare come le pagine web siano diverse tra loro, se vogliamo farlo anche noi allora
dobbiamo impare un nuovo linguaggio CSS
CSS =Cascading Style Sheets (fogli di stile) ed è un modo per definire gli stili che appliccheremo alle diverse
parti del nostro sito. Inseriamo CSS all’interno di html, ma non si tratta realmente di html. Dobbiamo imparare un
liguaggio complemetamente nuovo.
Come cambiare il colore dei titoli?
Per iniziare è neccessario aggiungere all’inizio della pagina il tag <style> </style> e quando il browser lo vedrà
penserà che tutto ciò che viene inserito all’interno del tag è CSS. Per capirlo al posto i hml userò CSS e al suo
interno useremo una regola di stile CSS, una regola di stile ha un selezionatore e comunica al browser quale è
la parte di una pagina web di cui va modificato lo stile e contiene anche delle dichiarazioni che comunicano al
browser come intervenire sullo stile di tale parte.
Se vogliamo cambiare lo stile di tutti i titoli h2 della nostra pagina digitiamo il selezionatore h2 seguito da
parentesi graffe, all’interno digitiamo le dichiarazioni che hanno proprietà e valori, per cambiare il colore del testo usiamo la
proprietà colore seguita dai due punti. Ora dobbiamo trovare un valore, dobbiamo comunicare al browser a quale colore
siamo interessati.
Se vogliamo poter scegliere qualsiasi colore esistente, dobbiamo usare uno spettro RGB
Sostituiamo dopo color: la voce rgb seguita da parentesi tonde e apparirà un selezionatore di colore, muoviamo il cursore
all’interno e selezioniamo un colore che vediamo aggiornarsi in tempo reale, fino a che non saremmo soddisfatti. All’interno
della parentesi rgb ci sono 3 numeri che cambiano e questi sono i componenti rosso, verde e blu che formano quel
colore. (verde?)
<!DOCTYPE html>
<html>
<head>
<title>CSS Basics</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
Il selezionatore h2, seleziona tutti i titoli della pagina, quindi possiamo cambiare tutti i titoli visto che vogliamo che tutti siano
verdi è cioè compatibile con tutti i tiitoli h2 che trova nella pagina
Regola di stile CSS  se vogliamo colorare il nostro sfondo di azzurro dobbiamo ricordare che tutto ciò che vediamo in una
pagina è contenuto nel tag <body></body>, se vogliamo intervenire sullo stile dell’intera pagina, dobbiamo usare un
selezionatore che selezioni quel tag.
Scriveremo Body + parentesi graffe + due punti + rgb + parentesi tonde  apparirà il nostro selezionatore di colori e
potremmo selezionare l’azzurro
body {
background-color: rgb(10, 247, 255);
Come hai appena imparato, utilizziamo le regole CSS per selezionare gli elementi in una pagina web in modo
che possiamo poi cambiare lo stile a quegli elementi.
Per dire alla nostra regola CSS a quali elementi HTML cambiare lo stile usiamo i selettori. Ci sono moltissimi
tipi di selettori che scopriremo più avanti, ma qui vogliamo ripassare quello che abbiamo visto nella spiegazione
interattiva: il selettore di elemento.
Il selettore di elemento seleziona gli elementi HTML in base al nome del tag. Ciascun elemento HTML—
<h1>, <p>, <li>, <body>—e qualunque altro elemento HTML può essere selezionato con CSS usando il nome
del tag senza le parentesi ad angolo (< e >). Per esempio, puoi selezionare tutti i tag <p> della tua pagina web
usando il selettore di elemento p. Ecco una regola CSS che cambia il colore di ogni paragrafo della pagina web:
Se stai cercando di selezionare tutti gli <h2> sulla pagina, devi togliere le parentesi angolari per formare il
selettore h2.
CSS: SELEZIONE PER ID
Modo perché il browser applichi lo stesso stile non a tutti i paragrafi ma solo ad alcuni  selezione per iidentità.
Possiamo cioè fornire a un tag nella nostra pagina un’identità unica e comunicare poi a CSS che intendiamo
appliccare un determinato stile all’elemento che possiede questa identità e a nessun altro. Per farlo il primo
passo è modificare l’html, in modo da aggiungere un attributo id ai tag che vogliamo selezionare.
Per aggiungere un attributo o identità, posizioniamo il cursore sultag <p> di apertura, lasciamo uno spazio e
digitiamo id seguto dal simbolo di = e dalle “”. Completiamo l’attributo di identità con un valore, dovremmo dargli
un’identità descrittiva e unica, nient’altro nella pagina dovrebbe avere la stessa identità.
<p id="rabbits-song">Little Bunny Foo Foo, <br>

Non è possibile alsciare spazi all’interno di questo valore, quindi se si stratta di una sequenza di parole, bisogna
sempre usare trattini (-) o underscore (_)
Per identificare il paragrafo in modo univoco dobbiamo aggiungere una regola CSS per stabilirlo
La prima parte della regola CSS è il selezionatore ovvero la parte che dice al browser cosa selezionare.
Nelle precedenti regole usavamo selezionatori come h2 e p, per selezionare tutti gli h2 e i p nella pagina  ora
per creare un selezionatore che selezioni solo determinati elementi con una specifica identità dobbiamo
scriverlo iniziando con #  questo comunica al browser che qualsiasi cosa segua è un’identità.
<!DOCTYPE html>
<html>
<head>
<title>CSS: Selecting by id</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
p{
color: rgb(191, 0, 255);
}
#rabbits-song {
background-color: yellow;
} colore dello sfondo
</style>
</head>
<body>
Solo il paragrafo della canzone ha lo sfondo giallo, mentre il paragrafo precedente è rimasto uguale a prima
1)modifichiamo html per aggiungere attributo di identità, posizioniamo il cursore sul tag di inizio, lasciamo uno
spazio, digitiamo id seguito dal simbolo = e poi scriviamo l’idenità unica e descrittiva. Ad esempio:
<body>
<h2 id="rabbits-info-heading">Basic info</h2>

2) torniamo al tag <style> e aggiungiamo una nuova linea, inseriamo il simbolo # e la nostra identità, rabbits-
info-heading e inseriamo all’interno di parentesi graffe la nostra proprietà
<!DOCTYPE html>
<html>
<head>
<title>CSS: Selecting by id</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
p{
color: rgb(191, 0, 255);
}
#rabbits-song {
}
#rabbits-info-heading {
background-color: purple;
}
</style>
</head>
<body>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an
adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more
than any human <em>ever</em> has</strong>.</p>
<h2>Songs</h2>
<p id="rabbits-song">Little Bunny Foo Foo, <br>

<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in

barn" width="203">
<ul>
</ul>
<ol>
<li>Bugs bunny</li>
<li>Thumper</li>
</ol>
</body>
</html>
Le identità sono sensibili alle maiuscole, quindi quando digitiamo e quando scegliamo la dimensione delle lettere
dobbiamo scriverle sempre nello stesso modo.
Le identità devono essere uniche, se nella pagina abbiamo 2 tag con la stessa identità il browser potrebbe dare
ad entrambi lo stesso stile e potrebbe darlo anche ad una delle due.
CSS: SELEZIONE PER CLASSE

NON si può utilizzare la stessa identità su più tag diversi.
Volendo selezionare gli altri paragrafi, dovremo dare a ciascuno una nuova identità ad esempio testo canzone 2
o testo canzone 3, perché ogni identità deve essere unica.
Classe = un modo per assegnare ad un gruppo un elemento particolare
Ad un gruppo possiamo asseganre quanti elementi vogliamo
Per aggiungere una classe dobbiamo aggiungere un attributo di classe (come abbiamo fatto per le identità)
Per prima cosa cancelliamo le identità che stiamo per sostuire, spostiamo il cursore nel tag <p> iniziale,
lasciamo uno spazio e scriviamo class seguito dal simbolo = +””
<p class="song-lyrics">
Anche tutti gli altri paragrafi della canzone dovranno avere questo nome di classe
Scendiamo nella pagina e aggiungiamo l’attributo ad ognuna delle classi del paragrafo.
Ora aggiungiamo la regola CSS, ritorniamo al tag <style> e cancelliamo il selezionatore id che avevamo in
precedenza.
Digitiamo un punto dopo del quale metteremo il nome della classe (in qst caso song lyrics) poi tra parentesi
graffe mettiamo la proprietà e il valore
h2 {color: rgb(0, 232, 15);}
}
p {color: rgb(191, 0, 255);

}
.song-lyrics {background-color: yellow;}
</style>
 Se voglio che tutti i paragrafi della canzone abbiano uno sfondo giallo
Se scrivessimo song con la S maiuscola non si colorerebbero tutti i paragrafi di giallo, anche i nomi delle classi
sono sensibili alle maiuscole. Fa differenza se una lettera è maiuscola o minuscola come per le identità
Se usassimo un # al posto del punto, ugualmente non funzionerebbe, perché il browser penserebbe che song-
lyrics sia un’identità e non trovando alcun riferimento che abbia come attributo di identità quello di testo-
canzone, ci sarebbe la riscerca
Anche se inserissimo degli spazi tra i nomi delle classi non avremmo gli sfondi colorati in qanto nelle classi non
ci possono essere degli spazi bianchi
Gli spazi hanno un significato ben preciso in CSS
Quando vogliamo aggiungere una classe, pensiamo ad un nome per la classe. Lo aggiungiamo ai nostri attributi
di classe nell’html, e poi scriviamo una regola di stile iniziando con un punto e poi il nome della classe
LINK HTML:
html: è l’acronimo di HyperText Markup Language
un linguaggio markup è un modo di usare i tag per intervenire su un contenuto
ipertesto è un termine inventato negli anni 60’ (prima ancora che esistesse internet) per indicare un testo
collegato ad un altro testo che l’utente può raggiungere immediatamente
Tim Berners-Lee inventò l’html e altri elementi di internet come l’http con l’idea di collegare fra loro testi dislocati
in ogni parte del mondo
Colleghiamo tra loro diverse pagine del web in html con un HyperLink, ossia un collegamento intertestuale, che
comunemente ormai chiamiamo anche solo link.
Per creare un link nel linguaggio html:

usiamo il tag <a> </a>
a sta per anchore, il tag ha funzione di ancorare il link in una determinata pagina e di collegarlo ad un’altra
pagina web.
Per creare un link oltre ad usare il tag <a></a> è neccessario pensare al testo del link e all’indirizzo a cui il link
collega.
Il testo del link andrà inserito tra i due tag <a></a> (di inizio e fine)
Es. <a>Read more about the history of HTML</a>
Il testo ha l’aspetto di un link pur non rimandando da nessuna parte, perché dobbiamo aggiungere l’indirizzo.
Vogliamo che l’indirizzo compaia nella pagina, ma abbiamo bisogno che il browser lo conosca, quindi lo
inseriamo come attributo del tag <a>  <a href = “http://home.web.cern.ch/topics/ birth-web">Read more
about the history of HTML</a>
(href = iper-referenza)
https = la h sta per iper
questo url specifica tutto ciò che il browser ha bisogno di sapere per trovare la pagina web:
- Il protocollo usato per trovarla
- Il dominio in cui si trova
- Il percorso tracciato nel server
Dal momento che specifica ogni dettaglio, possiamo anche chiamare questo url un “url assoluta”
In alcune pagine potremmo trovare url che inizia unicamente con una barra  questo comunica al browser di
rimanere nel dominio corrente e di cercare in tale dominio un percorso diverso. In questo caso, si tratta di un
url relativa
Noi dobbiamo attenerci sempre agli url assoluti
Possiamo anche comunicare al browser dove aprire la pagina, se nella finestra già aperta o in una nuova.
Per dire al browser di aprire il link in una nuova finestra aggiungeremo un altro attributo: target
Seguito dal simbolo di uguale e da un trattino basso
Es. <a target = “_blank” href="http://home.web.cern.ch/topics/birth-web"> Read more about the history of
HTML</a>
Ogni link che creiamo avrà questo avviso e si aprirà in una nuova finestra
È possibile eliminare questo attributo target, in alternativa possiamo lasciarlo
- Se un link collega ad un’altra pagina nello stesso dominio, si dovrebbe aprire nella stessa finestra
- Se un link collega ad una pagina in un altro dominio, si dovrebbe aprire in una nuova finestra
Possiamo linkare anche immagini oppure testo e immagini.

Ad esempio: link immagine:
<img src="https://www.kasandbox.org/programming-images/misc/tim-berners-lee-webpage.png" width="300">
Sarebbe possibile anche rendere l’intera pagina web un collegamento tutto blu e completamente sottolineato
LINK HTML INTERNI:

i link sono un ottimo modo per collegare tra loro 2 pagine web differenti ma possono collegare anche due
diverse parti interne della stessa pagina, soprattutto se si tratta di pagine particolarmente lunghe…come nel
caso di sommari
per creare un sommario:

lista non ordinata <ul> (formata dai titoli delle due sezioni)
<ul>
<li>History of the web</li>
<li>History of HTML versions</li>
</ul>
Voglio creare un link per ognuno di essi, in modo che cliccandoli rimangano ai punti della pagina in cui si parla di
ciò che indicano. Per farlo uso il tag <a></a> incapsulando il titolo tra i tag <a> di inizio e fine.
Href  dobbiamo comunicare al browser a che cosa rimandare, così da identificare quel punto della pagina in
modo univoco  traminte l’aggiunta dell’attributo di identità id al tag
Scorro verso il basso e cerco il titolo a cui aggiungere l’attributo id

<h2 id="web-history">History of the web</h2>
Poi torniamo al link e per comunicare al browser di rimandare a questo link interno dobbiamo cominciare con un
# e digitare l’id come scritta sopra
<li><a href="#web-history">History of the web</a></li>
Possiamo aggiungere più link di questo tipo, aggiungendo più attributi identità su ogni titolo e creando tag <a>
che indirizzano a tali titoli
Ciò che è importante ricordare è che l’identità deve essere unica altrimenti il browser non saprà a cosa
rimandare
TABELLE HTML:
per creare una tabella in html ci servono molti tag. Il primo tag è
<table> </table>
Abbiamo poi bisogno di un’intestazione che contenga le etichette di ciascuna colonna <thead></thead>,
tipicamente al suo interno vogliamo una singola riga di celle.
Per inserire una riga all’interno della tabella usiamo il tag <tr></tr> e all’interno di quella riga vogliamo delle
singole celle e per ogni singola cella scriviamo <th></th> (all’interno di th di inizio e th di fine scriviamo l’etichetta
della prima colonna che sarà il contenuto +importante della riga e il suo identificatore)
<table>
<thead>
<tr>
<th>Pet name</th>
<th>Species</th>
<th>Color</th>
</tr>
Iniziamo la riga con i dati con il tag <tbody> sotto a quello </thead> e poi di nuovo vogliamo una riga e usiamo
dunque il tag <tr> </tr> ma ora al posto del tag <th> usiamo il tag <td> che sta per tabula data
<tbody>
<tr>
<td>Black & white</td>
<td>rabbit</td>
<td>black and white</td>
Una volta create una riga la seleziono e la copio con I tasti della tastiera control C e la incollo con control v, una
volta copiata basterà cambiare i valori
<tr>
<td>Daemon</td>
<td>cat</td>
<td>black</td>
</tr>
<tr>
<td>Angel</td>
<td>cat</td>
<td>orange</td>
</tr>
</tbody>
</table>
</body>
</html>
Possiamo aggiungere facilmente altre colonne aggiungendo un altro tag <th></th> e poi <td></td> in oguna
delle righe se vogliamo condividere maggiori informazioni
COMMENTI HTML:
a volte nelle nostre pagine vogliamo inserire informazioni per altre persone che il browser ignori. Per farlo
apriamo una parentesi angolare seguita da un punto esclamativo e due trattini un testo di qualche tipo, due
trattini e una parentesi angolare chiusa
<! - - Hello humans! - ->
Questo è un commento ed è molto comune in qualsiasi tipo di linguaggio informatico, perché spesso vogliamo
fare cose che sono solo per esseri umani.
Ma i programmi non sono consultati solo dai computer ma anche da altri esseri umani
Possiamo usare i commenti per far sapere alle persone la fonte dei contenuti anche nel caso in cui volessimo
aggiornarla
<!DOCTYPE html>
<html>
<head>
<title>HTML comments</title>
</head>
<body>


barn" width="203">
<ul>
</ul>
<ol>
<li>Bugs bunny</li>
<li>Thumper</li>
</ol>
<h2>Basic info</h2>

They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human
<em>ever</em> has</strong>.</p>
questo aiuta le persone a sapere da dove provengono i contenuti che ho inserito nella pagina e potremmo poi
aggiungere un link nei commenti
i commenti sono tutti verdi  questo succede perché stiamo utilizzando un editor di codici con evidenziatura
della sintassi che utilizza i colori per aiutarci a riconoscere le varie componenti
convenzionalmente i commenti sono quasi sempre colorati di verde e potremmo usarli anche per commentare
una parte del nostro html
se vogliamo nascondere qlcs nella nostra pagina basta circondarlo con un commento, il browser non vede più
quell’html perché i browser ignorano totalmente i commenti, così che
quella parte se ne è completamente andata dalla pagina
ma se valuto che quella parte mi piaccia posso estrarla dal commento semplicemente rimuovendo ad entrambe
le estremità il commento


<p>Rabbits are small mammals in the family Leporidae of the order Lagomorpha. There are eight different
genera in the family classified as rabbits, including the European rabbit and cottontail rabbits. The other rabbit
species, along with pikas and hares, make up the order Lagomorpha. The male rabbit is called a buck and the
female rabbit is a doe; a young rabbit is a kitten or kit (confusingly!).</p>
<h2>Songs</h2>


<p>Little Bunny Foo Foo, <br>
</body>
</html>
CSS ZEN GARDEN

csszengarden.com
progetti di persone utilizzando lo stesso html ma un diverso css
un diverso CSS fa la differenza = non cambiano solo i colori, ma gli elementi sono posizionati nella pagina in un
ordine diverso rendendo l’interfaccia totalmente differente
PROPRIETà FONT-FAMILY CSS

Numerose applicazioni di CSS
Il font è lo stile delle lettere che formano le parole (possono avere abbellimenti, essere spesse o essere scritte
con una penna ad inchiostro)
Per cambiare il font, bisogna tornare alla regola p {

CSS e aggiungere font-family
<!DOCTYPE html>
<html>
<head>
<title>CSS font-family property</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
}
p{
color: rgb(191, 0, 255);
font-family: sans-serif;
}
Ora le lettere sono cambiate, sono più semplici

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: rgb(0, 232, 15);
}
}
p{
color: rgb(191, 0, 255);
font-family: serif;
}
Ora le lettere sono un po’ più complesse.

Un font serif è qualsiasi font con qlcs simile a dei piedi sulle lettere
Se diciamo al browser di usare una font-family serif, il font serif usato sarà quello di default per il mio computer
che solitamente è Times-new-roman
Un font Sans-serif, è un font privo di quella sorta di piedi sulle lettere, per cui le lettere sembrano +semplici.
Dicendo al browser di utilizzare un font sans-serif, il sans-serif usato sarà quello di default, solitamente Arial o
Elvetica  ma non è questo il punto importante
Il browser sceglierà il font di default per il computer dell’utente NON di quello dell’autore della pagina web
È probabile quindi che stiamo vedendo 2 differenti font sans-serif, se il tuo computer è diverso dal mio.
Per essere sicuri che chiunque guardi la mia pagina web, veda esattamente lo stesso font che vedo io  devo
specificare il nome preciso del font, come per esempio “Helvetica” se sia il mio pc che il tuo hanno questo font.
p{
color: rgb(191, 0, 255);
font-family: "Helvetica";
}
MA non tutti i computer hanno gli stessi font e in questo caso il computer ignorerà completamente la proprietà.
Fortunatamente i CSS permettono di specificare una font-family alternativa, un back-up nel caso in cui un
particolare font non esista sul computer.  aggiungendo semplicemente una , dopo “Helvetica” e riportando
sans-serif;  se il computer proverà a cercare “Helvetica” e non riuscirà a trovarlo, userà semplicemente il suo
font sans-serif di default
p{
color: rgb(191, 0, 255);
font-family: "Helvetica", sans-serif;
}
In generale se si specifica il nome di un font come “Helvetica” bisognerebbe sempre specificare anche una
famiglia di back-up.
Accanto a serif e a sans-serif ci sono altri due nomi generici di font-family che si possono usare:
1) Font family: cursive  per far si che il tipo di testo appaia come scritto a mano
p{
color: rgb(191, 0, 255);
}
.song-lyrics {
font-family: cursive;
}
2) Font family: fantasy Se si vuole far si che il testo appaia più decorato
.song-lyrics {
font-family: fantasy;
}
Si usa il font family: monospace, se si vuole che il testo appaia come se fosse stato scritto con la macchina da
scrivere. Monospace, che avendo una larghezza fissa fa si che ogni lettera occupi la medesima porzione di
spazio
.song-lyrics {
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: rgb(0, 232, 15);
}
}
p{
color: rgb(191, 0, 255);
}
.song-lyrics {
}
</style>
</head>
<body>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an
adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more
than any human <em>ever</em> has</strong>.</p>
<h2>Songs</h2>
<p class="song-lyrics">Little Bunny Foo Foo, <br>

<p class="song-lyrics">And down came the Good Fairy <br>

And she said <br>
"Little bunny Foo Foo <br>
I don't like you're attitude <br>
Scooping up the field mice <br>
And bopping 'em on the head" <br>
</p>
<p class="song-lyrics">I'll give you 3 chances. <br>

Then I'll turn you into a goon! <br>
The next day…</p>

barn" width="203">
<ul>
</ul>
<ol>
<li>Bugs bunny</li>
<li>Thumper</li>
</ol>
</body>
</html>
PROPRIETà FONT-SIZE CSS

I CSS possono essere utilizzati anche per modificare la misura del testo
Il font ha misure diverse per il corpo del testo e misure più grandi per ogni livello di titolo
Ma può capitare che io voglia modificare queste misure grazie alle proprietà di misura del CSS
Per rendere il testo un po’ più piccolo torno al tag dello stile
<style> </style> e aggiungere una regola CSS per il tag <body></body> includendo anche la proprietà font-size
<!DOCTYPE html>
<html>
<head>
<title>CSS font-size property</title>
<style>
body {
font-size: 11px ;
}
Esistono almeno 10 differenti unità supportate dai CSS per i font-size

Pixel sono usati per stabilire la grandezza dell’immagine e in molti altri casi, nell’ambito di CSS.
Se inseriamo 11px ogni elemento si rimpicciolisce, titoli compresi
Lo stile di default del browser per i titoli non è specificato in pixel ma in unità di misura differente chiamata em,
ovvero un’unità relativa che permette che la dimensione dei testi scala proporzionalmente al font del corpo
Per capire cosa significhi andiamo alla regola <h2> <style> e aggiungiamo alla regola
<style>
body {
font-size: 11px;
}
h2 {
color: rgb(0, 232, 15);
font-size: 2em;
}
Questa volta anziché pensare in pixel, penso in maniera relativa = quanto più grande voglio che siano gli h2
rispetto al corpo del testo  2 volte più grandi  allora scrivo 2em
Il browser ha calcolato una misura pixel per il font sapendo che la misura del corpo del font del corpo del testo è
di 11px
Avendo stabilito che tutti gli h2 siano 2 volte più grandi misureranno tutti 22 px
Se alziamo la misura del font del corpo del testo a 12 pix gli h2 misureranno 24 px
Se portiamo la misura del font h2 a 1,5em  h2 sarà 12 volte 1,5 ovvero 18 pixel
Possiamo specificare anche per h2 una misura in pixel come per il corpo del testo e anche così facendo
funzionerà allo stesso modo
Ci sono moltissime altre unità da utilizzare oltre a em e pixel che sono quelle più in voga
!DOCTYPE html>
<html>
<head>
<title>CSS font-size property</title>
<style>
body {font-size: 12px;
}
h2 {color: rgb(0, 232, 15);
font-size: 1.5em;
}
}
p{
color: rgb(191, 0, 255);
}
.song-lyrics {
}
</style>
</head>
STILI DEL FONT E SCORCIATOIE CSS

Per far si che il primo paragrafo sia in grassetto (renderlo + bello e non come elemento chiave), usiamo la
proprietà di
font-weight: bold
<!DOCTYPE html>
<html>
<head>
<title>CSS font styles and shorthand</title>
<style>
body {
font-size: 12px;
}
h2 {
color: rgb(0, 232, 15);
font-size: 1.5em;
}
}
p{
color: rgb(191, 0, 255);
}
#rabbits-info {
color: purple;
font-weight: bold;
}
Se vogliamo che questi testi siano in corsivo, possiamo racchiuderli in un tag em, poiché di default il browser
associa ad em lo stile corsivo ma così facendo è come se stessimo abusando del tag em. L’intento NON è
quello di enfatizzare l’intera canzone ma di metterla in corsivo unicamente perché crediamo che sia più bella da
vedere quindi bisognerebbe usare un’ulteriore proprietà di CSS ovvero il font-style
<!DOCTYPE html>
<html>
<head>
<title>CSS font styles and shorthand</title>
<style>
body {
font-size: 12px;
}
h2 {
color: rgb(0, 232, 15);
font-size: 1.5em;
}
}
p{
color: rgb(191, 0, 255);
}
#rabbits-info {
color: purple;
font-weight: bold;
}
.song-lyrics {
font-size: 13px;
font-style: italic;
font: italic 13px fantasy;
}
</style>
</head>
<body>
Per riassumere le proprietà dei font (font-family, font-size, font-style) in una proprietà singola potremmo scrivere
a questo punto possiamo cancellare le tre proprietà che avevamo scritto
.song-lyrics {
}
E ogni cosa sembrerà uguale, questo tipo di proprietà viene chiamata short hand perché semplifica molto la
dicitura.
ALTRE PROPRIETà TEXT CSS:

se volessi cambiare l’ampiezza dell’interlinea nel testo della canzone è possibile utilizzare la proprietà line-
height e specificare qlcs come 15px o ancora meglio 1.5 em rendendo l’altezza della linea il 150% di
qualsivoglia misura del testo
<!DOCTYPE html>
<html>
<head>
<title>More CSS text properties</title>
<style>
body {
font-size: 12px;
}
h2 {
color: rgb(0, 232, 15);
font-size: 1.5em;
}
}
p{
color: rgb(191, 0, 255);
}
#rabbits-info {
color: purple;
font-weight: bold;
}
.song-lyrics {
font-size: 13px;
font-style: italic;
line-height: 1.5em;
}
</style>
</head>
<body>
Per allineare al centro il testo della canzone uso la proprietà text-align specificando center
.song-lyrics {
font-size: 13px;
font-style: italic;
line-height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
Se volessi sottolineare il paragrafo principale dovrei utilizzare la proprietà text-decoration: underline
p{
color: rgb(191, 0, 255);
}
#rabbits-info {
color: purple;
font-weight: bold;
text-decoration: underline;
}
Se poi volessi cancellare la sottolineatura dei link…

Il browser ha una serie di stili di default che applica ad ogni cosa, tra questi c’è la sottolineautura per i link ma si
possono usare i css per ovviare all’utilizzo degli stili di default del browser
.song-lyrics {
font-size: 13px;
font-style: italic;
line-height: 1.5em;
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
Aggiunengo la regola text-decoration: none la sottolineatura scompare
Se i link non sono sottolineati come faccio a capire se si tratti davvero di link?
Se rimuoviamo la sottolineatura dobbiamo assicurarci che i link siano riconoscibili in qualche altro modo
Ci sono centinaia di proprietà CSS e i browser ne aggiungono di nuove ogni anno
EREDITARIETà CSS
Alcune proprietà dei CSS sono ereditabili ovvero si trasmettono a tutti i tag figli ad esse sottostanti, per esempio
la font-family è una proprietà ereditata e solo inserendola nel tag body verrà scelta automaticamente per i tag
figli come intestazione e paragrafi
Questo meccanismo si blocca solo quando si introduce un'altra regola come font-family:cursive che modifica la
font family di tutti i titoli in cursive
<!DOCTYPE html>
<html>
<head>
<title>CSS inheritance</title>
<style>
body {
font-family: sans-serif;
color: rgb(211, 122, 255);
}
h2 {
font-family: cursive;
color: rgb(0, 232, 15);
}
Un’altra proprietà che si eredita è il colore, se si stabilisce il colore per un corpo del testo, questa regola verrà
appliccata per tutti i tag contenuti nel tag <body></body> fino a quando non si inserirà un’altra regola
equivalente.
Come quella di color: rgb(0, 232, 15); che stabilisce che tutti gli h2 siano verdi
Altre proprietà che si ereditano sono i font-weight, font-size, font-style, line-height e text-align
Molte delle proprietà che abbiamo visto sono ereditabili perché hanno a che fare con lo stile del testo
Ci sono però anche proprietà non ereditabili
Se non si è sicuri che una proprietà sia ereditabile o meno, ci sono 2 strade:
- Inserirla nel tag body
- Cercarla in internet
p{
color: rgb(191, 0, 255);
}
#rabbits-info {
color: purple;
font-weight: bold;
text-decoration: underline;
}
.song-lyrics {
font-size: 13px;
font-style: italic;
line-height: 1.5em;
text-align: center;
}
CSS ELEMENTI GROUP

Fin’ora abbiamo visto come usare i CSS per formattare il testo, ma i CSS sono utilizzabili anche per cambiare il
layout della pagina. Spostando elementi, cambiandone la grandezza o mettendoli gli uni sopra gli altri
Talvolta ciò che vogliamo spostare all’interno di una pagina è un gruppo di elementi come la selezione di un
testo o un titolo con alcuni paragrafi
Per spostarli insieme dobbiamo introdurre 2 nuovi tag html che vengono definiti elementi raggruppati, utili solo
se combinati con i CSS; da soli essi non hanno alcun significato per il browser
Il primo tag, è il tag span ed è usato per raggruppare una selezione del testo
Se vogliamo colorare di rosso la parola Love, senza colorare anche il resto del titolo, mettiamo il cursore prima
di love e digitiamo il tag <span> e poi spostiamo il cursore dopo la parola e digitiamo il tag di chiusura </span>
<body>
<h1>All About Cats</h1>
<h3>Why I <span>Love</span> Cats</h3>

<ul>
<li>Furry
<li>Cute
<li>Evil
</ul>
Volendo ora raggruppare alcuni elementi sotto il tag span potremmo inserire una regola per colorare di rosso
tutti gli span della pagina ma non è detto che vogliamo che siano tutti rossi.
Diamo allo span la classe di lovey-dovey e aggiungiamo una regola solo per l’elemento che ha la classe lovey-
dovey
<!doctype html>
<html>
<head>
<title>CSS grouping elements</title>
<style>
.lovey-dovey {
color: red;
}
</style>
</head>
<body>
<h3>Why I <span class="lovey-dovey">Love</span> Cats</h3>
I tag span sono utili per raggruppare selezioni di testo.

Per raggruppare assieme elementi diversi dobbiamo ricorrere al tag div
Dobbiamo posizione
<div><h3>Official Info on Cats</h3>

<p><img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="100"> The cat (Felis
catus), also known as the domestic cat or housecat to distinguish it from other felines and felids, is a small
domesticated carnivorous mammal that is valued by humans for its companionship and ability to hunt vermin
and household pests. Cats have been associated with humans for at least 9,500 years, and are currently the
most popular pet in the world. Owing to their close association with humans, cats are now found almost
everywhere on Earth.</p>
<p>Cats are similar in anatomy to the other felids, with strong, flexible bodies, quick reflexes, sharp
retractable claws, and teeth adapted to killing small prey. As nocturnal predators, cats use their acute hearing
and ability to see in near darkness to locate prey. Not only can cats hear sounds too faint for human ears, they
can also hear sounds higher in frequency than humans can perceive. This is because cats' usual prey
(particularly rodents such as mice) make high frequency noises, so cats' hearing has evolved to pinpoint these
faint high-pitched sounds. Cats rely more on smell than taste, and have a vastly better sense of smell than
humans.</p>
<p>Despite being solitary hunters, cats are a social species and use a variety of vocalizations, pheromones
and types of body language for communication. These include meowing, purring, trilling, hissing, growling, and
grunting.</p>
<p>Cats have a rapid breeding rate. Under controlled breeding, they can be bred and shown as registered
pedigree pets, a hobby known as cat fancy. Failure to control the breeding of pet cats by spaying and neutering
and the abandonment of former household pets has resulted in problems caused by large numbers of feral cats
worldwide, with a population of up to 60 million of these animals in the United States alone.</p>
</div>
Ora dobbiamo occupparci del suo stile, per formattarlo gli darò un id=”official-info” aggiungendo poi una regola
per questo id **
<div id="official-info"><h3>Official Info on Cats</h3>
<p><img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="100"> The cat….
**<!doctype html>
<html>
<head>
<title>CSS grouping elements</title>
<style>
.lovey-dovey {
color: red;
}
#official-info {
background: rgb(230, 230, 230);
}
=regola di id
Div è diventato un riquadro grigio con al suo interno tutti gli elementi e sarebbe diverso se noi dessimo
separatamente a ciascun paragrafo uno sfondo grigio. In questo modo infatti ci sarebbe uno spazio tra i riquadri
non colorati di grigio
Il div permette anche di creare un riquadro che inglobi tutti gli elementi, in questo caso si tratta di un div per
elementi raggruppati
Possiamo pensare
- al tag span come ad un tag per raggruppare un testo
- al tag div come un tag utile al raggruppamento di elementi. Ma c’è un modo ulteriore per distinguerli, nel mondo
di CSS ci sono due tipi di elementi inline e blocked.
- Un elemento inline non comporta la creazione di una nuova linea  gli elementi rimaranno comunque nella
stessa linea come succede per image (testo ed immagine del gatto sono sulla stessa linea)
- Un elemento blocked è seguito da una nuova linea, come accade per molti tags html
I titoli, i paragrafi, la lista  il browser inserisce nuove righe dopo tutti questi senza che io debba inserire il tag
<br>.
 Ciò succede perché uno span crea un elemento inline mentre un div crea un elemento blocked. Questo significa
che se aggiungo un div e non aggiungo nessun’altro stile il browser renderà blocked questa parte della pagina
come quella parte di testo appena racchiusa in un div che ora ha nuove linee prima e dopo
<h1>All <div>About</div> Cats</h1> All

About
Cats
LARGHEZZA, ALTEZZA E OVERFLOW CSS

Spesso si usano i div per dividere la pagina in riquadri differenti, ridefinire la misura di essi e spostarli.
Cominciamo cambiando il <div id="official-info"><h3>Official Info on Cats</h3>
Di default un div occupa fino al 100% della larghezza disponibile, se vogliamo che occupi solo 300px dobbiamo
aggiungere un’altra proprietà alle regole di CSS width:300px;
<!doctype html>
<html>
<head>
<title>CSS width, height, and overflow</title>
<style>
.lovey-dovey {
color: red;
}
#official-info {
width: 300px;
}
</style>
</head>
<body>
Usiamo la larghezza in percentuale e diciamo che il div occupperà sempre il 70% della larghezza disponibile
#official-info {
width: 70px;
}
</style>
</head>
<body>
Ora il testo è ristretto dentro ad un riquadro più piccolo e il div è diventato più alto
Possiamo anche restringere l’altezza del riquadro con la proprietà dell’altezza height:180px;
#official-info {
width: 70%;
height: 180px;
}
</style>
</head>
<body>
Il riquadro grigio è stato rimpicciolito, ma il testo trabocca dal riquadro grigio.

Il valore di default per la parte in eccesso è visibile, il che significa che la misura dell’elemento è cambiata ma il
contenuto esce fuori e ciò non ha senso
Posso provare a nasconderla con overflow:hidden che va a sostituire overflow: visible  questa funzione taglia
il contenuto in modo che non fuoriesca dai bordi ma non è questo il nostro scopo perché i nostri utenti non
saranno in grado di leggere tutte le nostre official informazioni
#official-info {
width: 70%;
height: 180px;
overflow: visible;
}
</style>
#official-info {
width: 70%;
height: 180px;
overflow: hidden;
}
</style>
#official-info {
width: 70%;
height: 180px;
overflow: auto;
}
</style>
Possiamo anche usare overflow: autofunzione con cui è possibile aggiungere barre di scorrimento se il
contenuto eccede il bordo. Ora posso scorrere all’interno del riquadro per vedere il testo.
Se vogliamo essere ancora più precisi, possiamo specificare differenti proprietà overflow per ogni direzione, ad
esempio
- se vogliamo che scorra con la barra di scorrimento nella direzione y su e giù  overflow-y:auto
- se invece vogliamo tagliarlo nella direzione x  overflow-x: hidden
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
}
Evita le barre di scorrimento dentro ad altre barre di scorrimento
Widht e heigh si possono usare per ogni tipo di elemento, ad esempio per le immagini
Ora che conosciamo CSS, possiamo usare le proprietà width e heigh invece degli attributi width e heigh
Per ingrandire immagine del gatto:

<p><img src="https://www.kasandbox.org/programming-images/animals/cat.png" width="100"> The cat
(Felis catus)
Gli diamo come id …“cute-cat”>

<p><img id="cute-cat"src="https://www.kasandbox.org/programming-images/animals/cat.png" > The cat
(Felis catus)
Cancelliamo l’attributo width=“100”
E poi Andiamo alla regola di formattazione dove scriviamo #cute-cat

<!doctype html>
<html>
<head>
<title>CSS width, height, and overflow</title>
<style>
.lovey-dovey {
color: red;
}
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
}
#cute-cat {
width: 120px;
}
</style>
</head>
<body>
Come per gli attributi anche in questo caso è preferibile specificare solo la larghezza o l’altezza e permettere al
browser di prevere il valore più adatto per l’altra dimensione
RIQUADRI CSS
Ogni elemento della mia onpage è considerato un riquadro dal browser indipendentemente dal fatto che lo
sembri o meno
Anche lo span è un riquadro, alcuni riquadri sono grandi, altri piccoli, altri inline, altri sono blocked come il div
ma sono considerati tutti riquadri
The Box Model
Il riquadro di ogni elemento ha 4 parti:

1. contenuto
2. Riempimento
3. Bordo
4. Margine
Possiamo usare i CSS per modificare il riempimento, bordo, immagine
<body>
<h3>The Box Model</h3>
<img src="https://www.kasandbox.org/programming-images/misc/boxmodel.png" width="380">
Questo è il margine trasparente che separa il riquadro dagli altri elementi
Per specificare un margine su ogni lato del riquadro official-info è possibile srivere margin15px;
<!doctype html>
<html>
<head>
<title>CSS box model</title>
<style>
.lovey-dovey {
color: red;
}
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
margin: 15px;
}
Per avere un margine diverso per ogni lato

E se vogliamo +margini in alto, in basso, a dx, sx
 È possibile inserire questi valori in senso orario partendo dall’alto
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
margin: 15px 0px 10px 6px;
}
Sopra 15px, a dx 0px, in basso 10px, a sx 6px
Oppure possiamo usare proprietà specifiche per ogni lato.
Per ottenere un po’ di spazio sulla dx e in basso attorno all’immagine del gatto, mentre per gli altri lati ci
accontentiamo del margine di default
#cute-cat {
width: 120px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
Esiste un valore particolare per i margini
<body>
<div id="container">
<h3>Why I <span class="lovey-dovey">Love</span> Cats</h3>

<ul>
<li>Furry
<li>Cute
<li>Evil
</ul>

<p><img id="cute-cat" src="https://www.kasandbox.org/programming-images/animals/cat.png"> The cat (Felis catus),….</p>
<p>….</p>
<p>...</p>
</div>
Read more on <a href="http://en.wikipedia.org/wiki/Cat">Wikipedia</a>.
</div>
</body>
</html>
Aggiungiamo una regola per div per dargli la larghezza di 400px e centrarlo sulla pagina
#cute-cat {
width: 120px;
margin-right: 10px;
}
#container {
width: 400px;
margin-left: 100px;
}
</style>
Potrei specificare di lasciare un margine di 100 px perché così a me sembra centrale ma potrebbe non esserlo
per il browser di un altro computer  quindi noi dobbiamo poter dire “inserisci qualunque margine risulti
neccessario in modo che abbia uguale margine su entrambi i lati  questo è esattamente ciò che fa
margin:auto ed è realmente molto comodo per centrare i div in una pagina
#container {
width: 400px;
margin: auto;
border: 1px solid rgb(145,0,0);
}
</style>
Ora che abbiamo centrato questo div potremmo aggiungere un bordo intorno, usando le proprietà dei bordi dei
CSS
Aggiungiamo un bordo rosso al div  quindi digiriamo border e poi specifichiamo 3 aspetti del bordo: spessore,
stile, colore. Per un border sottile digitiamo 1px, per una linea spessa senza decorazioni digiteremo solid.
Come per i margini possiamo specificare il bordo: se vogliamo un border veramente sottile e viola sopra
aggiungeremo un’altra proprietà
#container {
width: 400px;
margin: auto;
border: 1px solid rgb(145, 0, 0);
border-top: 10px solid purple;
}
Aggiungiamo una cornice all’immagine

#cute-cat {
width: 120px;
margin-right: 10px;
border: 6px ridge red;
}
Aggiungiamo un bordo attorno a “official info on Cats”
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
border: 2px dashed rgb(161, 161, 161);
}
Ogni volta che aggiungo ai miei elementi un colore di sfondo e un bordo, quasi sempre è meglio aggiungere
anche un riempimento per creare un po’ di spazio
#container {
width: 400px;
margin: auto;
border: 1px solid rgb(145, 0, 0);
border-top: 10px solid purple;
padding: 15px;
}
15 px tutt’intorno al contenitore
#official-info {
width: 70%;
height: 180px;
overflow-y: auto;
overflow-x: hidden;
border: 2px dashed rgb(161, 161, 161);
padding: 6px;
}
POSIZIONE CSS
Come usare i CSS per muovere realmente le cose, oltre a posizionare gli elementi uno vicino all’altro saremo in
grado di spostarli uno sopra l’altro.
Inizialmente all’interno di una pagina le posizioni degli elementi sono quelle stabilite di default dal browser.
Queste posizioni si definiscono statiche o normali.
Gli elementi inline come le immagini sono posizionati da sx a dx
Gli elementi blocked come i paragrafi e gli headers sono posizionati dall’alto
Possiamo cambiare questa strategia di posizionamento usando le proprietà della posizione di CSS
Con l’immagine del paesaggio digitiamo la posizione e il valore relativo.
La strategia di posizionamento relativo implica il normale posizionamento dell’elemento e il successivo contro-
bilanciamento con un certo valore. Per comunicare al browser quale valore dobbiamo equilibrare dobbiamo
usare alcune combinazioni delle 4 nuove proprietà dei CSS
Top,bottom, left, right
<!DOCTYPE html>
<html>
<head>
<title>CSS position</title>
<style>
body {
color: rgb(199, 177, 14);
}
#landscape {
width: 250px;
position: relative;
top: 20px;
left: 10px;
}
</style>
</head>
<body>
Posizionamento assoluto posso usarlo per prendere un elemento completamente fuori dal normale ordine e
metterlo ovunque sullo schermo. Per fare questo cambierò relative ad absolute sul paesaggio e manterrò il top,
left. Ora l’immagine del paesaggio nasconde le altre e anche il titolo.
#landscape {
width: 250px;
position: absolute;
top: 20px;
left: 10px;
}
Aggiungiamo una regola per Winston e diamogli una position absoute e poi
#winston {
position: absolute;
top: 50px;
left: 50px;
}
Anche Hopper ha bisogno di una position absolute

#landscape {
width: 250px;
position: absolute;
top: 20px;
left: 10px;
}
#winston {
position: absolute;
top: 50px;
left: 50px;
}
#hopper {
position: absolute;
top:30px;
left: 80px;
}
</style>
</head>
<body>
Il mio obbiettivo e di mettere un hopper che balla di fronte a un winston ma ora winston è sopra Hopper. Per
ovviare a questo problema uso le proprietà CSS z-index che comunicano al browser l’ordine esatto in cui
posizionare gli elementi attribuendo loro differenti z-index
Al paesaggio attribuirò z-index: 1 e a Winston z-index: 2 e a Hopper z-index 3, ora Hopper balla davanti a
Winston
Per fare si che il titolo Dance party sia visibile

h1 {
position: absolute;
z-index: 4;
left: 30px;
}
Per fare si che i testi delle canzoni siano sotto

#song {
position: relative;
top: 220px;
}
</style>
</head>
<body>
Tutto scorre insieme e il posizionamento assoluto è relativo alla parte alta della pagina web, quindi quando
scorri in giù la pagina le cose che sono a 10px di distanza dalla parte alta non appariranno più sullo schermo
perché stai procedendo dall’alto della pagina web
Un’altra opzione è il posizionamento fisso che fa si che le cose sembrino non muoversi per niente.
In khan academyUsiamo il posizionamento assoluto per i modelli che spuntano in mezzo alla pagina e usiamo
il posizionamento fisso per il riquadro di ricerca in modo da renderlo sempre visibile
<!DOCTYPE html>
<html>
<head>
<title>CSS position</title>
<style>
body {
color: rgb(199, 177, 14);
}
#landscape {
width: 250px;
position: absolute;
top: 20px;
left: 10px;
z-index: 1;
}
#winston {
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
#hopper {
position: absolute;
top: 30px;
left: 80px;
z-index: 3;
}
h1 {
position: fixed;
z-index: 4;
left: 30px;
}
#song {
position: relative;
top: 220px;
}
</style>
</head>
<body>
<h1>Dance Party</h1>
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" id="landscape">
<div id="song">
<h3>Jamming to "Fields of Gold" by Sting</h3>
<p>You'll remember me when the west wind moves<br>
Upon the fields of barley<br>
You'll forget the sun in his jealous sky<br>
As we walk in fields of gold
</p>
</div>
</body>
</html>
CSS IN NATURA: GOOGLE MAPS
Esempio di posizione di in index dei CSS nella vita = google maps
Tutti gli elementi vengono posizionati usando i CSS per essere posti gli uni sopra gli altri. Inoltre in google maps
c’è un particolare uso degli z-index che assicura un corretto ordine.
Google maps usa molti css position e z-index per organizzare la mappa e per i relativi comandi
Usa anche javascript
CSS ELEMENTI FLOAT

Per fare si che il testo avvolga l’immagine serve una nuova proprietà Float. Questa proprietà permette di far
fluttuare gli elementi dentro ad altri elementi ed è perfetta per posizionare i testi intorno alle immagini.
Quindi andiamo alla regola e scriviamo float decidendo se vogliamo che l’immagine fluttui verso dx o verso sx
<!DOCTYPE html>
<html>
<head>
<title>CSS floating elements</title>
<style>
#hopper-pic {
width: 100px;
float: left;
}
#hopper-footer {
padding: 6px;
}
</style>
</head>
<body>
Per separare il testo dall’immagine usiamo margin e aggiungiamo margin-right e margin bottom
<style>
#hopper-pic {
width: 100px;
float: left;
margin-right: 6px;
margin-bottom: 6px;
}
È possibile far muovere anche elementi che non sono immagini ad esempio una barra laterale, per spostare una
lista di link a dx aggiungiamo una regola per il link di hopper e restringiamo la larghezza al 30% così occupperà
sempre il 30%della pagina
!DOCTYPE html>
<html>
<head>
<title>CSS floating elements</title>
<style>
#hopper-pic {
width: 100px;
float: left;
margin-right: 6px;
margin-bottom: 6px;
}
#hopper-footer {
padding: 6px;
}
#hopper-links {
float: right;
width: 30%;
margin-left: 10px;
}
</style>
Generalmente in qualsiasi momento facciamo muovere un div gli dobbiamo attribuire una larghezza, altrimenti i
div tendono ad occuppare tutto lo spazio che hanno intorno a sé.
Il pié di pagina con le info si sta sovrapponendo alla barra, per far si che non si restringa su se stesso inseriamo
la proprietà clear.
#hopper-footer {
padding: 6px;
clear: both;
}
Potremmo usare clear left o clear right se volessimo unicamente che non si restringessero gli elementi fluttuanti
di dx e di sx ma è bene che nessun elemento a pié di pagina si restringa, quindi usiamo clear both.
PROGRAMMAZIONE:
quando studiamo il programma, stiamo dando al computer una serie di comandi.
Cosa fanno i programmi?

- Controllano i robot che possono prendersi cura dei pazienti
- Controllano i robot che possono girovagare su marte e cercare acqua in superficie
- Aiutano le macchine che si guidano da sole a sapere dove girare
- Aiutano i dottori a curare le malattie, esaminando enormi quantità di dati medici
- Possono essere giochi molto divertenti come Angry Birds
- Rendono possibile per la pixar creare i film di animazione 3D e per i film come Harry Potter avere i loro effetti
speciali
I programmi sono dietro ai siti web e alle applicazioni che usiamo tutti i giorni come yt, google maps.
Come scrivere i programmi in javascript per fare i disegni, animazione e giochi

Un programma di disegni è collegato a un programma che viene usato per i robot
Gli stessi concetti di base sono usati da praticamente tutti i programmatori in tutti i programmi
MAKING DRAWINGS WITH CODE:

to draw circles we need use the ellipse command, so write:
ellipse( 212, 206, 283, 318 );
After I write a command name in a program, I always follow it with parenthesis and a semicolon
the first number (212) can be changed by clicking on it and scrolling the mouse
- the first number controls how far the ellipse is from the left side of the canvas.
- Changing the 2° number makes the ellipse moves up and down the canvas.
- Changing the 3° number makes the ellipse wider and thinner.
- Changing the 4° number, makes ellipse taller and shorter so it regards the height.
So the first two numbers control the position of the ellipse, while the second 2 control the size of the ellipse.
We call these numbers the parameters to the ellipse command and we usually call a command a function.
So we're calling the ellipse function and passing it four parameters to change how it draws the ellipse.
When we describe the parameters of a function, we usually give them nicknames, so that we don't have to say
first and second.
Nicknames for these parameters:

- The 1° parameter is called X, because we think of x as the direction it goes across the
canvas(orrizzontale). It starts at zero and ends at 400.
- The 2° parameter, is called Y, because it controls l’asse verticale
400
And we think of y as the direction that goes down the canvas. It starts at zero in the corner and goes to
400 down at the bottom.
- the third parameter is called Width, because it controls the width

- the fourth parameter is called Height.
we have our face, it needs a mouth so they can eat things.
I'll make a mouth by typing a second ellipse underneath.
I'm going to use the same X as the one before it, because I want it to be in the center of the face, but I want it
lower down on the face. So I'll try 250 for the Y. For the size I want it smaller than a face.
ellipse(212, 206, 283, 318); face
ellipse(212, 250, 100, 73);  mouth
ellipse(150, 150, 30, 30); left-eye

ellipse (278, 150 , 30, 30);  right-eye
Next we need eyes. Let's start with the left eye. It should be closer to the left-hand side than the center, so I'll try
150 and it should also be closer to the top, so I'll try 150 for y as well. And they should be small perfect circles,
so I'll try 30, 30.
Since our next eye is pretty similar to our left eye, I'm just going to copy this line of code and paste it, and then
move the x and there we go.
!!!I punti e virgola sono fondamentali dopo le parentesi
DISEGNARE ALTRE FIGURE CON LA PROGRAMMAZIONE
4 ellissi che disegnano una faccia
Se voglio cambiare qualcosa della mia faccia (es. fare la bocca +aperta devo cambiare il n°)
ellipse(200, 200, 250, 300);
ellipse(200, 250, 100, 60);  bocca; larghezza = 3° parametro/n°. Per ingradirla da 100182
ellipse(150, 150, 30, 30);
ellipse (250, 150, 30, 30);
per disegnare dei rettangoli, utilizzo la funzione:

rect (altro comando cui nostri programmi sanno come obbeddire)
rect(175, 345, 50, 50);

1°parametro: x
2° parametro: y
3° parámetro: larghezza
4° parámetro: altezza
Ma non funzionano proprio come per le ellissi, infatti i parametri X e Y della funzione “rect” in realtà controllano
l’angolo in alto a sx del rettangolo e NON il centro. Dovrò diminuire X e Y.
Possiamo cambiare i numeri finchè non ci piace il risultato.
Per ricordare quale parte della faccia disegna ciascuno di questi rettangoli, per aiutarmi a ricordarlo aggiungo
sempre un commento che inizia con due // slash e poi c’è del testo per aiutare gli umani a capire cosa fa
quella parte del codice
rect(76, 45, 250, 300); // face
rect(126, 250, 152, 60); // mouth
rect(140, 150, 30, 30); // left eye
rect(240, 150, 30, 30); // right eye
rect(175, 345, 50, 50); // neck
come disegnare la linea del soppracciglio?

Inizio scrivendo line e inserendo 4 parametri, di cui i primi due sono il punto iniziale della linea che faccio partire
da dove inizia l’occhio sx; mentre gli ultimi due parametri diranno al programma dove deve terminare la linea.
Voglio che il monociglio finisca dove finisce l’occhio dx quindi 240+ 30 = 270. Inoltre voglio che questo
monociglio sia una linea dritta perciò userò la stessa coordinata Y che ho usato per l’inizio quindi 150 per il
punto finale.
/ /unibrow
line(140, 150, 270, 150);
riepilogando:
rect(76, 45, 250, 300); // face
rect(126, 250, 152, 60); // mouth
rect(140, 150, 30, 30); // left eye
rect(240, 150, 30, 30); // right eye
rect(175, 345, 50, 50); // neck
/ / unibrow
line(140, 129, 270, 129);
Il fatto che in prima posizione abbiamo rect e in ultima line è molto importante perché è l’ordine in cui il
programma eseguirà il codice e disegnerà le forme. Se invertiamo l’ordine e mettiamo prima bocca e dopo
faccia il programma disegnerebbe prima la bocca e poi sopra la faccia ma in tal modo non saremmo più in grado
di vedere la bocca.
IL POTERE DEI DOCS:

usiamo il computer come dizionario per la programmazione, possiamo quindi dedicarci a fare programmi
interessanti e non a memorizzare dettagli noiosi.
Documentation/docs = la documentazione che spiega come programmare in un particolare linguaggio e
ambiente con vari esempi.
Documentation >memorizing!
Usiamo la documentazione per trasformare le nostre idee in codice
Per disegnare un cerchio e degli occhi uso la funzione ellipse
Per disegnare la faccia con dei contorni più spessi vado nella sezione della documentazione e sotto la categoria
dei colori trovo strokeweight che si utilizza per cambiare lo spessore delle linee e dei contorni
Se copio il codice di strokeweight e provo ad incollarlo nel mio programma comparirà un errore
Questo perché lo spessore è un parametro variabile, non è un vero valore quindi devo rimpiazzarlo
esattamente con quello che voglio che sia e può essere o un numero o una variabile. In questo caso inserisco
un numero.
Strokeweigh(12);
se io volessi mettere un sorriso sulla mia faccia, cerco nella documentazione un modo per fare il sorriso, e la
prima voce nelle forme è arc che si utilizza per disegnare un arco. Un sorriso è proprio un arco.
Incollo la mia funzione che presenta molti più parametri, i parametri variabili sono sostituiti con quello che
pensiamo debbano essere.
X e y sono dove voglio che io inizi l’arco, 200 è il nostro centro, x = 150, y=250 (in realtà sono sbagliate
perché la x è il centro dell’ellisse) . Per la larghezza, width, si tratta della profondità dell’arco quindi è un po’
meno della profondità della faccia, quindi width= 200
Height è l’altezza dalla cima dell’arco al fondo  height =50
Non capisco cosa vogliano dire Start e stop e perciò torno alla documentazione dove clicco sulla funzione cui
sono interessato e mi farà un esempio usando un programma che mi mostra come utilizzare e mi spiegherà i
parametri nel dettaglio.
X è la cordinata x del centro dell’ellisse e deriva dall’arco quindi sembra che per disegnare un arco io debba far
finta di star disegnando una parte dell’ellisse
X e y sono il centro dell’ellisse che stiamo facendo finta di disegnare per fare l’arco
Width e height sono la profondità e l’altezza dello stesso ellisse
Start e stop si riferiscono all’angolo iniziale in cui inizia l’arco in gradi e stop è invece dove finisce
arc (x, y, width, height, start, stop);
Strokeweight (12);
Fill (200, 200, 250, 250);

ellipse (150, 150, 30, 30);
fill (0, 0, 0);

ellipse (150, 150, 30, 30);
fill (0, 0, 0);

ellipse (250, 150, 30, 30);
arc (200, 250, 111, 50, 0, 180);
obbiettivo della programmazione = trasformare le nostre idee in realtà in modo abbastanza velocei docs mi
permettono di fare tutto più velocemente
INTRODUZIONE ALLE VARIABILI:

ho un disegno di un paperino, cambiare un solo n° per modificare entrambi gli occhi è possibile tramite le
variabili.
Una variabile è un nome che indica qualcos’altro, come una grande cesta con un’etichetta sopra dove noi
possiamo mettere quello che vogliamo ma il nome resta lo stesso. Ciò che c’è dentro la cesta si chiama “valore
della variabile”
Scrivo “var” che sta per variabile e il nome della variabile che deve descrivere quello che essa contiene.
Possiamo darle il nome che vogliamo ma non dobbiamo dimenticare gli spazi tar le parole e il “;”
var eyeSize;
eyeSize = 20; (si legge: eyeSize diventa 20)
= vuol dire assegnare, stiamo assegnando 20 alla variabile eyeSize, in altre parole mettiamo il numero 20
nella cesta eyeSize.
Quello a sx dell’uguale è sempre la variabile, mentre quello a dx dell’uguale è sempre il valore che staimo
assegnando alla variabile.
var eyeSize;
eyeSize = 20;
noStroke();
// face
fill(255, 255, 0);
ellipse(202, 208, 300, 300);
// eyes
fill(46, 46, 41);
ellipse(157, 151, eyeSize, eyeSize); ( ho sostituito con eyesize) ellipse(157, 151, 35, 35);
ellipse(304, 142, eyeSize, eyeSize); (ho sostituito con eyeSize) ellipse(304, 142, 30, 30);
// mouth
fill(252, 65, 65);
ellipse(257, 240, 120, 136);
ora che ho sostituito i 4 n° con la variabile eyeSize gli occhi del paperino sono entrambi uguali e se voglio
modificare le dimensioni di entrambi gli occhi posso cambiare il valore di quest’unica variabile.
var eyeSize;
eyeSize = 20;  eyeSize = 33; (saranno più grandi gli occhi)
abbiamo creato la nuova variabile chiamata “eyeSize” poi le abbiamo assegnato il valore 33, in realtà possiamo
scrivere tutto ciò scrivendo un unico passaggio:
var eyeSize = 33;

e cancelliamo le due righe sopra.
Il computer legge il mio codice dall’alto verso il basso quindi l’unica ragione per cui sapeva cosa era eyeSize
sotto era perché la avevamo definita sopra
Dobbiamo sempre essere sicuri di aver definito le variabili prima di utilizzarle.
var eyeSize = 33;
noStroke();
// face
fill(255, 255, 0);
ellipse(202, 208, 300, 300);
// eyes
fill(46, 46, 41);
ellipse(157, 151, eyeSize, eyeSize);
ellipse(304, 142, eyeSize, eyeSize);
// mouth
fill(252, 65, 65);
ellipse(257, 240, 120, 136);
ALTRO SULLE VARIABILI:
se voglio spostare il paperino non posso sostituire con la stessa variabile ogni coordinata x perché non sono
tutte uguali, però una volta che ho assegnato un n° ad una variabile posso sostituirla come se fosse un n° quindi
posso usare le variabili nelle espressioni matematiche.
Creaiamo una variabile nella posizione x del paperino
var x
la faccia del paperino ha come coordinata x 200  quindi var x diventa 200
// Winston's handsome features don't need outlines

noStroke();
var eyeSize = 40;
var x = 200;
// face
fill(255, 255, 0);
ellipse(200, 208, 300, 300);  diventerà ellipse (x , 208, 300,300) ;
Quando cambia il valore di x la faccia del paperino si sposta ma non i suoi occhi e la bocca. Per sistemare
questo, definiremo la posizione dei suoi occhi e della bocca in base alla posizione della faccia.
Le coordinate x sono il centro di tutte le ellisse, la sua faccia è disegnata a 200.
L’cchio sx è disegnato a 150, quindi esso sarà dove si trova la faccia meno 50.
Il suo occhio dx è disegnato a 300, 200+100. Perciò l’occhio dx sarà dove si trova la faccia (200 ovvero x) +
100.
La sua bocca è disegnata a 250 (200 +50) quindi è dove si trova la sua faccia (x) + 50. Ogni volta che cambio il
valore di X si muove l’intera faccia.
// Winston's handsome features don't need outlines

noStroke();
var eyeSize = 40;
var x = 200;
// face
fill(255, 255, 0);
ellipse(x, 208, 300, 300);
// eyes
fill(46, 46, 41);
ellipse(x - 50, 151, eyeSize, eyeSize);
ellipse(x + 100, 142, eyeSize, eyeSize);
// mouth
fill(252, 65, 65);
ellipse(250, 240, 120, 136); -- diventerà ellipse(x +50 , 240, 120, 136);
una volta create la variabile var x possiamo assegnargli un valore quante volte vogliamo, dopo aver assegnato:
var x = 198;
x = 300;
x = 150;
e da questo momento in poi il computer considera x come l’ultimo valore che gli è stato assegnato ma devo
scrivere var solo una volta per ogni variabile.
RIPASSO:
Una variabile è un modo per memorizzare i valori. Per utilizzare una variabile, dobbiamo sia dichiararla—per far
sì che il programma conosca la variabile—sia assegnarle un valore—per far sì che il programma sappia quale
valore stiamo memorizzando nella variabile.
Ecco come possiamo dichiarare una variabile chiamata "xPos":
var xPos;
Ora possiamo assegnare a xPos il valore 10:
xPos = 10;
Se vogliamo—e spesso capiterà!—possiamo fare dichiarazione e assegnazione in una sola istruzione:
var xPos = 10;
Se, per qualche motivo, vogliamo cambiare il valore di una variabile più tardi, possiamo fare una nuova
assegnazione:
var xPos = 10;
// qualche tempo dopo ...
xPos = 20;
Vedremo spesso che riassegnare il valore a una variabile può essere utile quando vogliamo animare i nostri
disegni.
Come scegliamo i nomi per le variabili? Per le variabili in JavaScript, segui queste regole:
 I nomi delle variabili possono iniziare con lettere, o con i simboli $ e _. Possono contenere solo lettere, numeri,
$ e _. Non possono iniziare con un numero. "myVariable", "leaf_1", e "$money3" sono tutti esempi di nomi
validi per le variabili.
 I nomi delle variabili sono sensibili al maiuscolo, che vuol dire che "xPos" è diverso da "xpos", quindi assicurati
di essere coerente.
 I nomi delle variabili non possono essere uguali ai nomi di variabili già esistenti, e ce ne sono un sacco nel
nostro ambiente di programmazione ProcessingJS. Se compare un errore del tipo "Sola lettura!", prova a
cambiare il nome della tua variabile.
 I nomi delle variabili devono essere chiari e significativi, in inglese o in italiano, come preferisci; per esempio,
invece di "ts", usa "toothSize".
 Utilizza l'alternanza di lettere maiuscole e minuscole per mostrare le diverse parole nei nomi delle variabili,
come "toothSize" invece di "toothsize" o "tooth_size".
CREARE LE ANIMAZIONI:
Trasformiamo un disegno in un’animazione, creo un programma che disegna macchian rossa con cielo blu. In
tale programma uso la variabile x e la inizializzo a 10. X sta per la posizione x della macchina e la uso quando
disegno il corpo della macchina (2 rettangoli) e anche quando disegno le ruote della macchina (2 ellissi)
Animazione = macchina si muove senza che io debba modificare il codice
Per trasformarla in un’animazione dobbiamo fare in modo che questo ambiente di programmazione crei nuovi
disegni più volte al secondo.
Per fare si che questi disegni abbiano un valore x diverso ogni volta in fondo al programma scrivo draw e il
programma si completa automaticamente
background(151, 244, 247);

noStroke();
// position of the car

var x = 281;
// draw the car body

fill(255, 0, 115);
rect(x, 200, 100, 20);
rect(x + 15, 178, 70, 40);
// draw the wheels

fill(77, 66, 66);
ellipse(x + 25, 221, 24, 24);
ellipse(x + 75, 221, 24, 24);
draw = function() {
// all lines of code inside here will be run repeatedly
};
Questa sintassi è una definizione di funzione. Una funzione ci rende +semplice raggruppare un po’ di codice
in modo che il programma sappia che deve eseguire quel codice tutto insieme.
La funzione draw è una funzione speciale, definiamo una funzione chiamata draw nell’ambiente di
programmazione di khan academy, che eseguirà il codice dentro draw in modo ripetuto più volte al secondo.
Tutte le righe di codice dentro draw=function, saranno eseguite in modo ripetuto, tutto ciò che non è dentro
questa funzione sarà eseguito una volta sola, quando viene caricato il programma.
Mettiamo il codice della nostra macchina dentro la funzione :
background(151, 244, 247);

noStroke();
draw = function() {

var x = 281;

fill(255, 0, 115);
rect(x, 200, 100, 20);
rect(x + 15, 178, 70, 40);
// draw the wheels

fill(77, 66, 66);
ellipse(x + 25, 221, 24, 24);
ellipse(x + 75, 221, 24, 24);
};
Stiamo facendo in modo che la macchina appaia più volte al secondo ma sembra uguale a prima perché x è
sempre 281 e la macchina perciò non si sposta. Ma noi vogliamo poter dire al programma la posizione iniziale
della macchina x è 10, poi aggiungiamo 1 a questa posizione ogni volta che la disegniamo per farlo sposto la
variabile x fuori dalla funzione draw e la inizializzo a 10, ora dato che è fuori dalla funzione draw, questa linea di
codice verrà eseguita una volta sola all’inizio del programma.
background(151, 244, 247);

noStroke();

var x = 10;
draw = function() {

fill(255, 0, 115);
rect(x, 200, 100, 20);
rect(x + 15, 178, 70, 40);
// draw the wheels

fill(77, 66, 66);
ellipse(x + 25, 221, 24, 24);
ellipse(x + 75, 221, 24, 24);
x = x + 1;
};
dentro draw aggiungo una riga di codice per aggiungere 1 alla variabile -> x = x+1; Ma la macchian è sbavata
perché stiamo dicendo al programma di ridisegnare la macchina ogni volta, ma la ridisegna sopra la macchina
precedente che sta ancora lì. Se vogliamo che il programma cancelli la macchina precedente dobbiamo
prendere la chiamata “background” e la spostiamo dentro draw == macchina che viaggia sullo schermo. Per
avere una macchina più veloce dovrò aggiungere di più a x, ad esempio se voglio avanzare di 10 pixel ogni
volta, per farla andare indietro x = x + -10;
noStroke();

var x = 10;
draw = function() {

background(151, 244, 247);

fill(255, 0, 115);
rect(x, 200, 100, 20);
rect(x + 15, 178, 70, 40);
// draw the wheels

fill(77, 66, 66);
ellipse(x + 25, 221, 24, 24);
ellipse(x + 75, 221, 24, 24);
x = x + 10; oppure x = x + - 10;

};
All’inizio fuori dalla funzione draw, dichiaro la mia variabile e la inizializzo a 10, poi definisco la funzione draw e
ci metto dentro il codice per disegnare. Alla fine della funzione aggiungo una certa quantità a x e quando
l’ambiente di programmazione vede che definisco la funzione draw sa che deve eseguire il codice dentro la
funzione più e più volte al secondo.
ABBREVIAZIONE PER INCREMENTARE LE VARIABILI:

Per creare l’animazione:
- Fuori dalla funzione draw dichiriamo tutte le variabili che utilizzeremo nell’animazione
In questo programma dichiariamo 4 variabili (x, y, ballWidth, ballHeight). All’interno della funzione draw
useremo queste variabili e le cambieremo in qualche modo. In questo programma abbiamo usato
noStroke();
var x = 200;
var y = 350;
var ballWidth = 300;
var ballHeight = 200;
draw = function() {
background(255, 206, 71);
fill(191, 0, 255);
ellipse(x, y, ballWidth, ballHeight);  abbiamo usato le variabili per disegnare un ellipse ***
x = x + 1;  aggiungere 1 ad x farà si che la palla si muova di un pixel a dx in ogni frame

y = y - 2;  sottraiamo 2 dalla x = significa che la palla si muove verso l’alto di 2 pixel in ogni frame
ballWidth = ballWidth * 99/100;
ballHeight = ballHeight * 99/100; in queste 2 righe usiamo operatori matematici. L’asterisco serve per
moltiplicare in Javascript mentre la barra / è per dividere. La prima riga prende la variabile ballWidth e la
moltiplica per 99 su 100. Rendiamo la larghezza il 99% di quella che era prima. Facciamo lo stesso con
ballHeight che ogni volta diventerà il 99% di quanto era prima °°
};
***usando una variabile per ogni parametro di ellipse. Dato che stiamo inserendo una variabile per ogni
parametro, ciò significa che possiamo animare ogni aspetto di questa ellispe ed è quello che staimo facendo.
°°ciò significa che se ballHeight inizialmente è 200, allora nel 2° frame sarà 198 perché è 99% di 200
x = x + 1; x += 1;
y = y - 2; y -= 2;
ballWidth = ballWidth * 99/100; ballWidth *= 99/100;
ballHeight = ballHeight * 99/100; ballHeight /= 99/100;
}; };
queste 4 righe di codice seguono uno schema simile: abbiamo una variabile, il segno uguale, di nuovo quella
stessa variabile, un operatore matematico e alcuni numeri. Questo schema è comune nella programmazione
perché spesso prendiamo una variabile, operiamo dei calcoli matematici e meorizziamo i risultati nella stessa
variabile.
Ma esistono delle scorciatoie infatti anziché scrivere

X = x +1;  possiamo scrivere: x += 1;
y = y - 2;  possiamo scrivere: y -=2;
ballWidth = ballWidth * 99/100;  ballWidth* = 99/100;
ballHeight = ballHeight * 99/100;  ballHeight* = 99/100;
l’animazione è la stessa
esiste anche la scorciatoia diviso uguale /= per qualsiasi cosa che vogliamo dividere
ballHeight /= 99/100;
};
Ora possiamo scrivere meno codici e avere lo stesso risultato.
UNA SCORCIATOIA Più CORTA:
noStroke();
var eyeSize = 40;
var x = 200;
draw = function() {
// face
fill(255, 255, 0);
ellipse(x, 208, 300, 300);
// eyes
fill(46, 46, 41);
ellipse(x - 50, 151, eyeSize, eyeSize);
ellipse(x + 100, 142, eyeSize, eyeSize);
// mouth
fill(252, 65, 65);
ellipse(x + 50, 240, 120, 136);
eyeSize += 1; ( Per ingrandire gli occhi del paperino aggiungendo ogni volta 1 pixel alle dimensioni degli
occhi)
};
ma ora anziché scrivere eyeSize += 1;  i programmatori scrivono eyeSize++; (è più breve da scrivere)
eyeSize++;
// Winston++!!
// Intelligence++!
};
oppure possiamo scrivere così: + = -
eyeSize += -27;
INTERAZIONE CON IL MOUSE:

Impariamo come usare due variabili speciali: mouseX e mouseY. Sono 2 variabili che esistono già perché il
programma stabilisce automaticamente il valore di queste due variabili dietro le quinte accertandosi che il alore
di mouse x sia sempre la posizione X del mouse e che il valore mouseY sia sempre la posizione Y. Questo fa si
che sia possibile creare interazioni basate sulle posizioni del mouse.
Se utilizzo al posto di 200 e 200 le due varibili speciali (mouseX e mouseY)  se muovo il mouse posso vedere
che l’ellissi segue il movimento del mouse ed è sempre disegnata nella posizione in cui si trova il mouse. Se
usiamo mouseX and mouseY dobbiamo accertarci di usarli sempre all’interno della funzione draw. Se la
spostiamo fuori l’ellisse viene disegnata solo una volta, nel punto in cui il mouse si trova proprio all’inizio del
programma. Questa funzione viene chiamata in continuazione mentre il programma sta funzionando e vogliamo
che ogni volta che viene chiamata guardi quale è il valore attuale di x e di y e poi disegni l’ellisse in quella
posizione. È simile ad un’animazione: cambia nel tempo ma in modo diverso.
// mouseX and mouseY // mouseX and mouseY
strokeWeight(3); strokeWeight(3);
stroke(57, 0, 214); stroke(57, 0, 214);
fill(0, 210, 247); fill(0, 210, 247);
draw = function() { draw = function() {
background(255, 255, 255);

background(255, 255, 255);
ellipse(200, 200, 30, 30);
ellipse(mouseX, mouseY, 30, 30);
};
};
Se invece di disegnare mouseX e mouseY, disegno sempre in mouseX ma fissando il valore di mouseY a 300
ora l’ellisse segue solo la coordinata X trascurando qualsiasi cosa io faccia con la Y.
draw = function() {
background(255, 255, 255);
ellipse(mouseX, 300, 30, 30);
};
Se disegno in mouseX e mouseY ma elimino lo sfondo mettendo background in un commento creo una specie
di pennello
draw = function() {
//background(255, 255, 255);
ellipse(mouseX, mouseY, 30, 30);
};
se inverto le due variabili e metto prima mouseY e poi MouseX ho i controlli del mouse che fanno l’opposto di
ciò che dovrebbero fare.
background(255, 255, 255);
ellipse(mouseY, mouseX, 30, 30);
};
ISTRUZIONI IF
Palla che si muove per lo schermo:

- Variabile x che ci dice la posizione
- Variabile di velocità speed che ci dice quanto si muove la palla ogni volta
- Draw
+ disegnamo lo sfondo con i colori di riempimento e l’ellisse nella posizione x
// position of the ball

var x = 20;
// how far the ball moves every time
var speed = 1;
draw = function() {
fill(66, 66, 66);

ellipse(x, 200, 50, 50);
// move the ball

x = x + speed;
};
se prendo una speed più piccola la palla si muoverà più lenta, posso renderla più negativa quindi ansiamo
indietro o renderla a 0 e la palla si ferma. Ma finchè non è a 0 la palla si muoverà in qualche modo e posso
sempre premere il pulsante riavvia per portarla indietro.
Per far si che la palla una volta raggiunto il bordo dello schermo vada indetro, per farla girare:
speed = - 5;
MA voglio cambiare la velocità solo se la palla ha raggiunto il bordo dx, e voglio cambiare la velocità solo se la
palla ha raggiunto il bordo dx  ciò chiama in causa IF
Istruzioni if : voglio che tu esegua questo codice ma solo in queste circostanze.
Mettiamo dentro le tonde le condizioni e dentro le graffe il codice da eseguire, se la prima condizione è vera,
allora esegui questo codice sennò no.
if (condition) {code to run }
nel nostro caso la condizione è che la palla abbia raggiunto il bordo dx, per capire se lo ha raggiunto o meno
abbiamo la variabile x che ci dice la posizione di essa. Io so che il bordo è in x =400. Quando x>400 allora
sappiamo che la palla è andata un po' oltr’ al bordo dx.
nel codice da eseguire cambiamo solo la velocità che diventa -5
if (x > 400) {
speed = -5;
}
if (x < 0) {
speed = 5;
}
dobbiamo fare la stessa cosa anche dall’altro lato, per controllare se la palla ha raggiunto il bordo sx  accade
quando x <0 e vogliamo rendere la velocità positiva speed =5
sembra che la palla sia andata un po’ troppo in là, questi 2 parametri controllano dove è disegnato l’ellisse
quindi ora quando il centro raggiunge il bordo, metà dell’ellisse è già andato oltre il bordo e se vogliamo
sistemarla dobbiamo fermare l’ellisse un po’ prima. Se il nostro bordo è a 400, vogliamo fermare l’elisse quando
il centro raggiunge 375. La funzione dell’ellisse ha ampiezza 50. Il centro del bordo sarà a 25, quindi vogliamo
fermarla quando il centro raggiunge 375 cioè 400 -25
quindi controlliamo
if (x > 375) {
speed = -5;
}
if (x < 25) {
speed = 5;
}
Da capo:
// position of the ball
var x = 20;
// how far the ball moves every time
var speed = 5;
draw = function() {
fill(66, 66, 66);

ellipse(x, 200, 50, 50);
if (x > 375) {
speed = -5;
}
if (x < 25) {
speed = 5;
}
// move the ball

x = x + speed;
};
ANCORA SULL’INTERAZIONE CON IL MOUSE

Variabili per posizione e velocità della palla:
var position = 20;
var speed = 3;
nella funzione draw (quella speciale chiamata di continuo quando il programma viene eseguito) coloriamo lo
sfondo e disegnamo l’ellisse. Posizioniamo l’ellisse alla variabile position e alla velocità speed
abbiamo aggiunto 2 condizioni if per controllare se la palla è vicina al bordo destro o al bordo sx e in quei casi
cambiamo la velocità in positivo o in negativo così che la palla rimbalzi indietro.
La palla rimbalza avanti e indietro all’infinito.
var position = 20;

var speed = 3;
draw = function() {
fill(66, 66, 66);

position = position + speed;
ellipse(position, 200, 50, 50);
if (position > 375) {

speed = -5;
}
if (position < 25) {
speed = 5;
}
};
se dessi questo programma ad un amico e lui non sapesse programmare non potrebbe interagire ma tutto
quello che farebbe sarebbe guardarlo.
Le due variabili speciali mouseX and mouseY restituiscono numeri e ci dicono la posizione corrente del mouse e
sono un ottimo modo per rendere il programma più interattivo. Dovremmo usarla da qualche parte all’interno
della funzione draw che è l’unica parte di codice che viene chiamata di continuo durante l’esecuzione del
programma. Tutto ciò che è fuori da draw viene chiamato una sola volta: quando il programma parte. Quindi non
avrebbe senso usare mouseX and mouseY perché l’utente non avrebbe possibilità di interagire.
Dentro draw stiamo disegnando la palla 200 pixel in basso, se li sostituiamo com mouseY usiamo la posizione
y di dove si trova l’utente. Semplicemente muovendo il cursore su e giù possiamo cambiare la linea di dove si
sposta la palla, ma vogliamo usare anche mouseX quindi disegnamo un’altra palla che faremo andare nella
direzione opposta e faremo controllare all’utente la sua posizione x. Le due palle ora vanno in posizione
perpendicolare ma volgio dare all’utente anche il potere di far esistere la 2° palla con un semplice click del
mouse. Devo capire come dire al computer che l’utente sta premendo il mouse  esiste la variabile
/ / mouseIsPressed che può essere usata dentro un’istruzione if.
var position = 20;

var speed = 3;
draw = function() {
fill(66, 66, 66);

position = position + speed;
// mouseX and mouseY
// mouseIsPressed
ellipse(position, mouseY, 50, 50);
if (mouseIsPressed) {  2° palla
ellipse(mouseX, position, 50, 50);
}
if (position > 375) {

speed = -5;
}
if (position < 25) {
speed = 5;
}
};
Diciamo al programma che vogliamo disegnare questa ellisse, se questo è vero mouseispressed sarà vero solo
se l’utente sta premendo il mouse. Ora possiamo far apparire la palla ogni volta che clicco
Variabile mouseIsPressed cambia in base a quello che fa l’utente e non in base a cosa fa il programma. Dato
che la funzione draw è chiamata di continuo il programma cambierà nel tempo
INTRODUZIONE AL CICLO WHILE
Ho un ciclo:
var y = 40;
while (y < 400) {
text(message, 30, y);
y += 20;
}
E con poche righe di codice posso scrivere questo messaggio fino all’estremità dello schermo
Se cambio
Var message =”Loops are REALLY awesome!?????”;  cambierà tutto il codice (quello viola a dx)
Dobbiamo scrivere text(message, 30,40); a ripetizione abbastanza volte tanto da riuscire ad arrivare fino in fondo
alla pagina, il fondo della pagina però è lontano quindi c’è molto lavoro. C’è UN MODO +SEMPLICE. = il ciclo che
ci permette di ripetere più volte un pezzo di codice introducendo piccoli cambiamenti ogni volta
fill(120, 9, 148);
var message = "Loops are REALLY awesome!???";
y
text(message, 30, 40);  sostituisco con un ciclo var y = 40;
text(message, 30, 60); while(y < 400) {
text(message, 30, 80); text(message, 30, y);
y += 20
}
ogni volta che voglio usare un ciclo, devo rispondere a 3 domande chiave:
1) Cosa voglio ripetere? (qualcosa che noi vogliamo ripetere deve andare tra le parentesi graffe, in tal caso
vogliamo ripetere text)
2) Cosa voglio cambiare ogni volta ? (vogliamo cambiare la posizione y vogliamo che diventi 60 e poi 80. Quindi
la trasformeremo in una variabile chiamata y, perché è in posizione y. Dichiaro sopra la variabile che inizializzo a
40. Poi metto y= y+20, così la y diventerà più grande ogni volta ma mettendo in pratica le scorciatoie scriviamo y
+=20;
3) Per quanto dovremo ripeterlo? Vogliamo ripeterlo più volte solo fino in fondo alla pagina e non per sempre (il
tempo di attesa sarebbe molto lungo in tal caso e potrebbe bloccare il mio browser). Ripeterlo fino in fondo alla
pagina significa che lo ripeto fino a quando y <400. Lo scrivo dopo while () e il messaggio ora viene scritto fino in
fondo alla pagina
Sostituisco a “Loops are REALLY awesome!???”; - “y is now”;

E text(message, 30, y); text(message + y, 30,y) ;
fill(120, 9, 148);
var message = "y is now ";
var y = 40;
while(y < 400) {
text(message + y, 30, y);
y += 20;  il valore cambia di 20
}
y + = 50;
fill(120, 9, 148);
var y = 90;  cambiano i valori

while(y < 400) {
y += 50;
}
fill(120, 9, 148);
var y = 90;
while(y < 279) { <-- il programa si ferma prima ^^^
y += 50;
}
^^possiamo pensarlo come una sorta di condizione if, abbiamo l’espressione boleana
while(y < 279) {
e l’insieme comandi solo se la boleana è vera:
y += 50;
}
Con il ciclo while c’è un meccanismo segreto in fondo che dice ritornare all’inizio del ciclo
fill(120, 9, 148);
var y = 90;
while(y < 279) {
y += 50;
// Go back to the start of the loop!
}
 Questa indicazione segreta indica che invece di andare avanti come succede con un if, ogni volta che viene
eseguito un codice dentro il ciclo bisogna tornare indietro e controllare se la condizione è ancora valida, e se lo è
bisogna ripetere le condizioni interne. Dopo la 2° volta farà la stessa cosa, controllerà, poi torna all’inizio
fill(120, 9, 148);
var y = 90;
while(y < 279) {
y += 50;
// Go back to the start of the loop!
}
/* The Three Loop Questions:

1. What do I want to repeat?
-> The text function with the message!
2. What do I want to change each time?
-> The y position, increasing by 20 each time.
3. How long should we repeat?
-> As long as y is less than 400, all the way down.
*/
ALTRO SUI CICLI WHILE: HOPPER E IL PALLONCINO:
dividiamo il programma per fasi:

i palloncini sono la ripetizione dello stesso ellisse + le righe + il papero
- Aggiungiamo lo sfondo
- Domande chiave:

1. What do I want to repeat? (palloncino) [ quindi ellipse ma prima per il colore fill]
2. What do I want to change each time? [ cosa vogliamo che il Pallone cambi durante il ciclo? Vogliamo che il
pallone si sposti attraverso lo schermo e vogliamo che sia il computer a farlo]
*/
fill(221, 0, 255);
ellipse(96, 83, 49, 70);  cambiamo il primo parametron con x e creiamo una variabile
*/
Per fare si che la variabile cambi all’interno del ciclo, usiamo il ciclo while al cui interno diremo che x cambierà
ogni volta di 20
background(99, 200, 255); background(99, 200, 255);
fill(221, 0, 255); fill(221, 0, 255);

var x = 100; var x = 100;
ellipse(x, 83, 49, 70); while () {
while () { ellipse(x, 83, 49, 70);
x += 20; x += 20;
} }
/* The Three Loop Questions: /* The Three Loop Questions:
1. What do I want to repeat? 1. What do I want to repeat?
2. What do I want to change each time? 2. What do I want to change each time?
3. How long should we repeat? 3. How long should we repeat?
*/ */
Spostiamo ellipse all’interno del ciclo while
Per quanto tempo vogliamo ripeterlo? Possiamo pensare fino a che non esca dal lato dello schermo quindi fino a
quando x <400. Ora dobbiamo esaminarlo e renderlo come vogliamo spostando i parametri dell’ellisse diamo un po
più di spazio (while x<329), cambiamo le dimensioni con i parametri di ellipse
fill(221, 0, 255);
var x = 100;
while (x < 329) {
ellipse(x, 94, 49, 68);
x += 60;
}
*/
Per aggiungere le corde ad ogni palloncino che inizi al centro e che vengano giù tutte verso lo stesso punto.
Sappiamo che se vogliamo ripetere qlcs dobbiamo metterlo dentro il ciclo while, quindi disegnamo la linea e se
vogliamo che sia al centro dell’ellisse, abbiamo bisogno che inizi in corrispondenza delle prime due coordinate
di ellipse
fill(221, 0, 255);
var x = 100;
while (x < 329) {
ellipse(x, 94, 49, 68);
line(x, 94, 224, 300);
x += 60;
}
*/
Tuttavia le corde si sovvrappongono ai palloncini ma noi vogliamo che l’ellisse copri la linea e possiamo farlo
cambiando semplicemente l’ordine.
fill(221, 0, 255);
var x = 100;
while (x < 329) {
line(x, 94, 224, 300);
ellipse(x, 94, 49, 68);  ho cambiato l’ordine
x += 60;
}
*/
var hopper = getImage("creatures/Hopper
-Jumping");
image(hopper, 223, 232);
Per cambiare colore delle linee, se non sappiamo come fare cerchiamo nella documentazione. Devo usare stroke
per stabile il colore delle linee. Per disegnare il paperino Hopper lo inserisco come immagine e poi seguo la
documentazione per sapere come si fa a spostarlo per fare in modo che sembri reggere i palloncini volando
attraverso il cielo
UN NUOVO TIPO DI CICLO: FOR

Il ciclo for è un modo per scrivere +velocemente alcuni cicli while semplici
Ciclo while:
// For Loops!
fill(120, 9, 148);
var y = 55;
while (y < 300) {
text("Pineapple pizza is the best!", 80, y);
y += 40;
}
iniziamo con la variabile y e scriviamo un messaggio usando la posizione y e diciamo di continuare fino a
quando y è minore di 300 e cambiamo y di 40 ogni volta.
// For Loops!
fill(120, 9, 148);
var y = 27;
while (y < 354) {
y += 24;
}
Il nostro messaggio “pineapple pizza is the best” è importante e vogliamo che venga scritto +volte, ma vogliamo
che venga scritto +in alto  cambiamo y, vogliamo che riempia di + la pagina y<354 e vogliamo che gli spazi
siano + piccoli y +=24. Per trasformare questo ciclo while, in un ciclo for nelle parentesi tonde del ciclo for ci
vanno 3 cose e non solo una for ( ; ; ),usiamo i punti e virgola per separare le 3 cose. E poi il corpo del ciclo
tra le parentesi graffe.
// For Loops!
fill(120, 9, 148);
// for (start; how long; change) ( inizializzazione + ; + istruzioni su quanto a lungo ripetere. Per metterlo in
corrispondenza con il while possiamo dire che l’inizio stabilisce la variabile y)
for (var y = 27 ; y < 354 ; y +=24 ) {
}
/*
var y = 27;  la mettiamo anche sopra
while (y < 354) {  questa parte tra () mi dice per quanto tempo devo continuare a
y += 24;  nel while il cambiamento è alla fine
}
*/
for (var y = 27 ; y < 354 ; y +=24 ) queste 3 parti devono essere sempre in tale ordine nei cicli for. Dobbiamo
sempre iniziare dicendo “la variabile inizia in tal modo, poi stabiliamo per quanto vgogliamo che essa continui e
poi stabiliamo come cambieranno le cose, qui cambieranno aumentando y di 24.infine dobbiamo scrivere quello
che vogliamo fare all’interno del ciclo for “Pineapple pizza is the best!”
se volessimo cambiare da dove inizia cambiamo for(var y = 27…) se volessimo cambiare da dove finisce,
cambiamo il punto finale for (var… y+=24), se volessimo cambiare la spaziatura, cambieremo l’incremento text
(“Pineapple pizza is the nest!”, 134,y); 134 è l’incremento
for (var y = 27 ; y < 354 ; y +=24)  dobbiamo ricordarci di mettere sempre i punti e virgola per separare le 3
parti
passiamo da for a while

// For Loops!
fill(120, 9, 148);
var y = 63;
while (y<313) {
y += 41;
}
// for (start; how long; change)

for (var y = 63; y < 313; y += 41) {
}
for (var y=63) stiamo inizializzando questa variabile quindi va al di fuori e non all’interno di while. Il
cambiamento va sempre alla fine del ciclo while
non possiamo sempre trasformare un while in un for ma solo quando il while è molto semplice
CICLI FOR NODIFICATI:

Usiamo un ciclo per disegnare 12 gemme di fila che attraversano lo schermo da sx a dx
imageMode(CENTER);
for (var i = 0; i < 12; i++) {

image(getImage("cute/GemOrange"), i*36, 30, 40, 60);
}
1°x = 0
2° x = 36
Vogliamo che la x di 36 cambi ogni volta, ciò significa che vogliamo che dipenda da i, quindi scriviamo i x36
(i*36) Quindi la prima x è 0 la 2° x è 72.
Per avere un mucchio di gemme che arrivino fino in fondo allo schermo,
- Potremmo prendere il ciclo for copia incollarlo e cambiare la y ogni volta:
imageMode(CENTER);
for (var i = 0; i < 12; i++) {

}
for (var i = 0; i < 12; i++) {

}
for (var i = 0; i < 12; i++) {

}
Ma usiamo il ciclo for nodificato = un ciclo dentro un ciclo. Quindi creiamo un ciclo più esterno che si
occuperà di arrivare fino in fondo allo schermo, poi il ciclo più interno si occuperà di spostarsi da sx a dx.
Ciclo esterno incaricato di andare da su verso giù:

for (var j = 0; j < 13; j++) {
Prendiamo uno dei cicli precedenti e lo mettiamo all’interno dopo aver cancellato tutta la parte precedente:
for (var j = 0; j < 13; j++) {

for (var i = 0; i < 12; i++) {
}
Per fare sic he le gemme non siano allineate tutte sulla stessa fila dobbiamo cambiare la y. Vogliamo che y
cambi per ogni riga, esattamente come x dipende da i vogliamo che y sia dipendente da j. Possiamo sceivere
per esempio jx30. I cicli più esterni creano la variabile j e la aumentano fino a 13 e durante ogni esecuzione del
ciclo esterno viene eseguito anche il ciclo interno. Il ciclo interno crea la variabile i che va fino a 12 . per ogni
esecuzione del ciclo interno disegno un’immagine su x e y che dipende da i e j. La i cambia molto più
frequentemente di j.
Uso il commando text per mostrare i valori di j  va da 0 a 12. È sostanzialmente dove le gemme erano
posizionate. i è in orrizzontale e va da 0 a 11, i cambia +frequentemente
imageMode(CENTER);
for (var j = 0; j < 13; j++) {

fill(255, 0, 0);
text(j, 13, j*30+30);
for (var i = 0; i < 12; i++) {
fill(130, 56, 56);
text(i, i*36, j*30+30); questa parte di codice cambia +frequentemente rispetto a quella dopra in
giallo perché entra in funzione per ogni esecuzione del ciclo for interno; mentre quella con j entra in
esecuzione solo per ogni esecuzione del ciclo esterno
//image(getImage("cute/GemOrange"),  commento l’immagine
i*36, j*30, 40, 60);
}
}
Quando scriviamo i programmi, spesso ci rendiamo conto che vogliamo ripetere una parte di codice più volte
oppure ripeterla ma cambiare ogni volta qualcosa. Per evitare di dover scrivere tutto in modo ripetitivo,
possiamo usare un ciclo. JavaScript ha due tipi di cicli: while loop e for loop.
Un ciclo while è un modo di ripetere una parte di codice fino a quando una condizione sarà falsa. Ad esempio,
questo ciclo while mostrerà il valore di y in (30, y) fino a quando y sarà minore di 400. Il ciclo aggiunge 20 a y
ogni volta che viene eseguito, perciò y inizia in 40 ma poi aumenta diventando 60, 80, 100, 120, eccetera.
var y = 40;
while (y < 400) {
text(y, 30, y);
y += 20;
}
È importante che la condizione nelle parentesi diventi falsa prima o poi, altrimenti avremo ciò che si
chiama ciclo infinito! È quello che succederebbe se rimuovessimo y += 20, perché y sarebbe sempre 40,
quindi sarebbe sempre minore di 400, e il programma non saprebbe mai quando smettere.
var y = 40;
while (y < 400) {
text(y, 30, y);
}
Il ciclo for è simile al ciclo while, ma con una sintassi più particolare. I programmatori hanno inventato il ciclo for
quando hanno capito che facevano sempre le stesse tre cose: creare una variabile contatore per il ciclo (come
la y qui sopra), incrementarla di una qualche quantità e verificare che fosse minore di un certo valore. La
sintassi di un ciclo for prevede dei posti speciali per ciascuna di queste tre cose. Ecco lo stesso ciclo while che
avevamo sopra, ma scritto come ciclo for:
for (var y = 40; y < 400; y += 20) {
text(y, 30, y);
}
I cicli possono essere anche annidati. In realtà è molto comune annidare i cicli, specialmente per i disegni 2-d,
perché rende più facile disegnare forme come le griglie. Quando vogliamo annidare un ciclo dentro un ciclo,
stiamo dicendo al programma: "fai questa cosa per X volte, e ogni volta che lo fai, fai anche quest'altra cosa per
Y volte." Pensa a come potresti disegnare una griglia: vogliamo dire al programma: "crea una colonna 10 volte,
e per ciascuna colonna, crea anche 15 celle dentro di essa." Ecco come potresti usare dei cicli for annidati per
ottenere questo risultato:
for (var col = 0; col < 10; col++) {
for (var row = 0; row < 15; row++) {
rect(col*20, row*20, 20, 20);
}
}

Informatica 1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Informatica 1

Caricato da

Copyright:

Formati disponibili

INFORMATICA

WEB = un network di computer collegati tra loro

i siti devono cercare di funzionare correttamente con ogni tipo di client

NOZIONI DI BASE HTML

HTML è un linguaggio di tipo markup  infatti è basato tutto sui tags.

I'm going to make a page all about rabbits

<title> all about rabbits!! </title>

Per aggiungere un titolo usiamo il tag <h1>all about rabits</h1>

<p>Little Bunny Foo Foo</p>

<p>Little Bunny Foo Foo, <br>

HTML ENFASI DEL TESTO

Possiamo anche combinare I tag <em> e <strong> ed inserirli l’uno nell’altro

<h1>All about rabbits!</h1>

<h2>Why rabbits make great pets</h2>

<h3>Top 3 most famous rabbits</h3>

Per ridimensionare l’immagine abbiamo 2 attributi: largezza e lunghezza

<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in barn"

NOZIONI DI BASE CSS

Come cambiare il colore dei titoli?

background-color: rgb(10, 247, 255);

CSS: SELEZIONE PER ID

<p id="rabbits-song">Little Bunny Foo Foo, <br>

I don't want to see you <br>

scooping up the field mice <br>

<h1>All about rabbits!</h1>

<h2 id="rabbits-info-heading">Basic info</h2>

<h1>All about rabbits!</h1>

<h2 id="rabbits-info-heading">Basic info</h2>

<p id="rabbits-song">Little Bunny Foo Foo, <br>

<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in

<h3>Why rabbits make great pets</h3>

<h3>Top 3 most famous rabbits</h3>

CSS: SELEZIONE PER CLASSE

h2 {color: rgb(0, 232, 15);}

p {color: rgb(191, 0, 255);

.song-lyrics {background-color: yellow;}

Per creare un link nel linguaggio html:

Possiamo linkare anche immagini oppure testo e immagini.

LINK HTML INTERNI:

per creare un sommario:

Scorro verso il basso e cerco il titolo a cui aggiungere l’attributo id

<h1>All about rabbits!</h1>

<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in

<h3>Why rabbits make great pets</h3>

<h3>Top 3 most famous rabbits</h3>

CSS ZEN GARDEN

PROPRIETà FONT-FAMILY CSS

Per cambiare il font, bisogna tornare alla regola p {

Ora le lettere sono cambiate, sono più semplici

Ora le lettere sono un po’ più complesse.

<h1>All about rabbits!</h1>

<h2 id="rabbits-info-heading">Basic info</h2>

<p class="song-lyrics">Little Bunny Foo Foo, <br>

<p class="song-lyrics">And down came the Good Fairy <br>

<p class="song-lyrics">I'll give you 3 chances. <br>

<img src="https://www.kasandbox.org/programming-images/animals/rabbit.png" alt="Rabbit with lop ears in

<h3>Why rabbits make great pets</h3>

<h3>Top 3 most famous rabbits</h3>

PROPRIETà FONT-SIZE CSS

Esistono almeno 10 differenti unità supportate dai CSS per i font-size