Sei sulla pagina 1di 65

02 maggio - 08 maggio

RECAP
Dom 02
Introduzione
a HTML e CSS

#BooleanCodingWeek
Dom 02 Lun 03
Introduzione Layout con
a HTML e CSS CSS Flexbox

#BooleanCodingWeek
Dom 02 Lun 03 Mar 04
Introduzione Layout con Live Coding
a HTML e CSS CSS Flexbox Layout

#BooleanCodingWeek
Registrazioni delle lezioni
Tutte le lezioni e le slide vengono registrate e
caricate su:

https://booleancodingweek.teachable.com

entro la mattina del giorno successivo

#BooleanCodingWeek
Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa facciamo oggi?


Programmare in JavaScript
Aggiungiamo funzionalità alle (bellissime) pagine
statiche che abbiamo imparato con HTML e CSS

#BooleanCodingWeek
JavaScript
JavaScript nasce per dare dinamicità e funzionalità alle
pagine web.

Consente quindi di:

● Accedere e modificare elementi della pagina HTML


● Reagire ad eventi generati dall'utente
● Validare i dati inseriti dall'utente
● Caricare risorse esterne alla pagina
● ….

Anche qui, come per HTML e CSS, non c’è alternativa: i


browser comprendono solo JavaScript.

#BooleanCodingWeek
Java non è Javascript
#BooleanCodingWeek
JavaScript - una slide di storia
1995
Netscape (chi se lo ricorda?) crea LiveScript per dotare il proprio
browser (Navigator) di un linguaggio di scripting che permettesse
ai web designer di interagire con i diversi oggetti della pagina
(immagini, form, link, ecc.)

In quello stesso anno Netscape era particolarmente vicina alla Sun


Microsystems (ideatrice di Java), con cui aveva stretto una
partnership. Brendan Eich venne incaricato del progetto e rinominò
LiveScript in JavaScript.

#BooleanCodingWeek
JavaScript - oggi

È stato pensato come linguaggio client-side, come


“compagno di HTML e CSS”, ed è stato così fino a pochi anni
fa.

Nel 2010, grazie a node.js e altri progetti, Javascript è stato


“trasformato” in un linguaggio server-side, che quindi può
essere utilizzato senza un browser e senza HTML e CSS,
avendo funzionalità simili a quelli di linguaggi come PHP,
JAVA, etc..

#BooleanCodingWeek
Dove si scrive il codice Javascript?

<!DOCTYPE html> // Qui va il codice JS


<html> alert("Ciao!")
<head>
<title>JS</title>
</head>
<body>

<script src="script.js"></script>
</body>
</html>

index.html script.js

#BooleanCodingWeek
LIVE CODING
Funzioni
Una funzione è un “pezzo di codice” che assolve ad un compito
specifico.

alert(“ciao”) è una funzione built-in di JS che ha il compito


specifico di aprire la finestrella e mostrare il testo che scriviamo
all’interno delle “”.

Tutte le funzioni hanno un nome (in questo caso, alert) e possono


avere 0 o più argomenti (in questo caso uno , “ciao”)

#BooleanCodingWeek
Variabili

var nome;
Una Variabile è un contenitore.

Il nome della variabile che scegliamo


è “l’etichetta” che attacchiamo al
contenitore per sapere cosa c’è dentro

#BooleanCodingWeek
Variabili - cosa contengono?

var nome;
Una Variabile è un contenitore
che contiene un valore. nome = "Fabio";

● Un testo (o stringa) var soprannome = "Fab";


● Un numero

#BooleanCodingWeek
Variabili - cosa contengono?

var eta = 33;


Una Variabile è un contenitore.
che contiene un valore. var nuova_eta = eta + 1;

Un numero

#BooleanCodingWeek
Prompt()

E se volessi chiedere un input var text = prompt();


dall’utente?
Possiamo usare la built-in function
prompt()

Prompt e assegnazione ad una


variabile nella stessa riga!

#BooleanCodingWeek
E se qualcosa non funziona?

La funzione JS built-in console.log console.log("OK");


scrive nella tab “Console” dei
console.log (nome);
developer tool.

#BooleanCodingWeek
LIVE CODING
OK, tutto molto bello ma...
come interagisco con la pagina HTML?

document su MDN

document.querySelector(".nome");
document.write(“Ciao”);

#BooleanCodingWeek
LIVE CODING
It’s magic...

var nome = prompt("come ti chiami?");


document.querySelector(".nome").innerHTML = nome;

#BooleanCodingWeek
It’s magic...anche no
Creiamo una variabile che si chiama “nome”

var nome

#BooleanCodingWeek
It’s magic...anche no
Abbiamo la funzione prompt che prende quello che l’utente
scrive da tastiera

var nome = prompt("come ti chiami?");

#BooleanCodingWeek
It’s magic...anche no
E lo mettiamo dentro alla variabile nome

var nome = prompt("come ti chiami?");

#BooleanCodingWeek
It’s magic...anche no
Prendiamo il riferimento a tutto il documento HTML

var nome = prompt("come ti chiami?");


document

#BooleanCodingWeek
It’s magic...anche no
Prendiamo solo la parte del file HTML che ha la classe “nome”

var nome = prompt("come ti chiami?");


document.querySelector(".nome")

#BooleanCodingWeek
It’s magic...anche no
Prendiamo la parte interna, quindi il testo tra i tag di apertura e
chiusura

var nome = prompt("come ti chiami?");


document.querySelector(".nome").innerHTML

#BooleanCodingWeek
It’s magic...
Mettiamo qui dentro il contenuto della variabile nome

var nome = prompt("come ti chiami?");


document.querySelector(".nome").innerHTML = nome;

#BooleanCodingWeek
LIVE CODING
Istruzioni condizionali
Se vogliamo far “accadere una cosa” solo in un caso specifico?

Le istruzioni condizionali eseguono un certo blocco di codice se si


verifica una ben precisa condizione. La parte “else” non è
obbligatoria.

if (condizione) { Se si verifica la ( condizione ) {


// blocco di istruzioni 1 // blocco di istruzioni 1
} else { } altrimenti {
// blocco di istruzioni 2 // blocco di istruzioni 2
} }

#BooleanCodingWeek
Le “condizioni”
== uguaglianza Se x = 3, allora (x == 4) è falso

!= diversità Se x = 3, allora (x != 4) è vero

> maggiore di Se x = 3, allora (x > 4) è falso

< minore di Se x = 3, allora (x < 4) è vero

>= maggiore o uguale Se x = 3, allora (x >= 4) è falso

<= minore o uguale Se x = 3, allora (x <= 4) è vero

#BooleanCodingWeek
E se voglio valutare più condizioni?

&& and, “e logico”

restituisce vero
Se x = 3, y = 4 allora (x<4 && y>5) è falso
se e soltanto se entrambi gli
operandi sono veri

|| or, “o logico”

restituisce vero
Se x = 3, y = 4 allora ( x<4 || y>5 ) è vero
se almeno uno degli
operandi è vero

#BooleanCodingWeek
LIVE CODING
Oltre le variabili

var nome1;
Se vogliamo salvare un solo dato
possiamo usare una Variabile. var nome2;
var nome3;
Ma se abbiamo bisogno di salvare 10 var nome4;
dati che appartengono logicamente var nome5;
allo stesso gruppo?

Ad esempio i nomi di 10 invitati?

#BooleanCodingWeek
Oltre le variabili

var nome1;
NON usiamo 10 variabili
var nome2;
var nome3;
var nome4;
var nome5;

#BooleanCodingWeek
Array

Un array contiene dati “logicamente” var invitati = ["Fabio","Michele","Luca"];


simili in un unico “raccoglitore”.
Ogni dato è in un cassetto separato a
console.log(invitati[0]) //Fabio
cui si può accedere singolarmente.
console.log(invitati[1]) //Michele
console.log(invitati[2]) //Luca

#BooleanCodingWeek
LIVE CODING
Array

var invitati = ["Fabio","Michele","Luca"];


Come tutti gli “oggetti speciali” forniti
da Javascript, gli array hanno delle
invitati.contains("Giuseppe") // false
funzioni pronte che possiamo usare:
invitati.length // 3

Array su MDN

#BooleanCodingWeek
LIVE CODING
Objects

A volte stringhe e numeri non sono


sufficienti.
Se volessimo salvare nome, cognome,
età e numero di scarpe di una
persona, come potremmo fare?

#BooleanCodingWeek
Objects

var nome = "Fabio";


A volte stringhe e numeri non sono
sufficienti. var cognome = "Forghieri";
Se volessimo salvare nome, cognome, var eta = 33;
età e numero di scarpe di una var scarpe = 42;
persona, come potremmo fare?

#BooleanCodingWeek
Objects

var nome = "Fabio";


A volte stringhe e numeri non sono
sufficienti. var cognome = "Forghieri";
Se volessimo salvare nome, cognome, var eta = 33;
età e numero di scarpe di una var scarpe = 42;
persona, come potremmo fare?

#BooleanCodingWeek
Objects

var persona = ["Fabio","Forghieri", 33, 42];


A volte stringhe e numeri non sono
sufficienti.
Se volessimo salvare nome, cognome,
età e numero di scarpe di una
persona, come potremmo fare?

#BooleanCodingWeek
Objects

var persona = ["Fabio","Forghieri", 33, 42];


Gli oggetti permettono di
rappresentare un “oggetto
complesso” che ha diverse proprietà.

#BooleanCodingWeek
Objects

var persona = {
Gli oggetti permettono di
rappresentare un “oggetto nome: "Fabio",
complesso” che è formato da diverse cognome: "Forghieri",
proprietà. eta: 33,
numero: 42
}

#BooleanCodingWeek
Objects

var persona = {
Per accedere alle diverse proprietà
usiamo la dot notation. nome: "Fabio",
cognome: "Forghieri",
eta: 33,
numero: 42
};

console.log(persona.nome); //Fabio
console.log(persona.eta); //33

#BooleanCodingWeek
Array vs Objects

Un Array: Un Object come un vero


è una struttura di dati che può oggetto:
contenere più valori ai quali si può è una struttura di dati che
accedere per mezzo di può contenere più valori ai
un indice numerico. quali si può accedere per
mezzo di un indice di nomi.

#BooleanCodingWeek
LIVE CODING
I cicli

A volte è necessario eseguire più volte lo stesso


blocco di codice per ottenere il risultato desiderato.

Questo viene effettuato usando le istruzioni di


iterazione,
dette anche semplicemente "cicli".

(eh no, il copia/incolla non vale)

#BooleanCodingWeek
I cicli

Ci sono diversi tipi di istruzioni iterative: for, while, do


while, for...of.
Tutte i problemi possono essere risolti con tutti i
tipi di ciclo ma, a seconda dei casi, alcuni sono più
comodi di altri.

#BooleanCodingWeek
for...of

var anni = [2010,2012,2013];

Il for...of è molto comodo per “ciclare” for ( var anno of anni) {


sugli elementi di un array. console.log(anno)
}

// 2010
// 2012
// 2013

#BooleanCodingWeek
LIVE CODING
Functions

function somma(num1, num2){


Anche noi programmatori possiamo
scrivere funzioni, come alert() e var calcolo = num1 + num2;
prompt() return calcolo;
Dovremo definire un nome, una lista di }
argomenti e un valore di ritorno che
andremo a consegnare a chi ha
chiamato la funzione.

#BooleanCodingWeek
LIVE CODING
Registrazioni delle lezioni
Tutte le lezioni e le slide vengono registrate e
caricate su:

https://booleancodingweek.teachable.com

entro la mattina del giorno successivo

#BooleanCodingWeek
Array e Objects insieme

var invitati = ["Fabio","Michele","Luca"];


Se un array contiene una lista di cose
che “logicamente” stanno bene
insieme. (come una lista di invitati)

#BooleanCodingWeek
Array e Objects insieme

var invitati = ["Fabio","Michele","Luca"];


Se un array contiene una lista di cose
che “logicamente” stanno bene
insieme. (come una lista di invitati) var persona = {
nome: "Fabio",
e una persona può essere formata da cognome: "Forghieri",
più proprietà
eta: 33,
numero: 42
};

#BooleanCodingWeek
Perchè non fare un Array di Objects?

#BooleanCodingWeek
var invitati = [
{
nome: "Fabio",
cognome: "Forghieri",
eta: 33,
numero: 42
},
{
nome: "Michele",
cognome: "Papagni",
eta: 32,
numero: 44
},
];

#BooleanCodingWeek
for...of
var invitati = [ for (var invitato of invitati){
{ console.log(invitato.nome);
nome: "Fabio", }
cognome: "Forghieri",
eta: 33, // Fabio
numero: 42 // Michele
},
{
nome: "Michele",
cognome: "Papagni",
eta: 32,
numero: 44
},
];

#BooleanCodingWeek
LIVE CODING