4.javascript Day4 CodingWeek

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
Abbiamo la funzione prompt che prende quello che l’utente
scrive da tastiera
#BooleanCodingWeek
E lo mettiamo dentro alla variabile nome
#BooleanCodingWeek
Prendiamo il riferimento a tutto il documento HTML

document
#BooleanCodingWeek
Prendiamo solo la parte del file HTML che ha la classe “nome”

document.querySelector(".nome")
#BooleanCodingWeek
Prendiamo la parte interna, quindi il testo tra i tag di apertura e
chiusura

document.querySelector(".nome").innerHTML
#BooleanCodingWeek
It’s magic...
Mettiamo qui dentro il contenuto della variabile nome

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";

sufficienti. var cognome = "Forghieri";
Se volessimo salvare nome, cognome, var eta = 33;
età e numero di scarpe di una var scarpe = 42;
#BooleanCodingWeek
Objects
var nome = "Fabio";

sufficienti. var cognome = "Forghieri";
Se volessimo salvare nome, cognome, var eta = 33;
età e numero di scarpe di una var scarpe = 42;
#BooleanCodingWeek
Objects
var persona = ["Fabio","Forghieri", 33, 42];

sufficienti.
Se volessimo salvare nome, cognome,
età e numero di scarpe di una
#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

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

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",
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", }
eta: 33, // Fabio
numero: 42 // Michele
},
{
nome: "Michele",
cognome: "Papagni",
eta: 32,
numero: 44
},
];
#BooleanCodingWeek
LIVE CODING

4.javascript Day4 CodingWeek

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

4.javascript Day4 CodingWeek

Caricato da

Copyright:

Formati disponibili

02 maggio - 08 maggio

entro la mattina del giorno successivo

Cosa facciamo oggi?

Consente quindi di:

● Accedere e modificare elementi della pagina HTML

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

In quello stesso anno Netscape era particolarmente vicina alla Sun

È stato pensato come linguaggio client-side, come

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

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

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

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

Il nome della variabile che scegliamo

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

var eta = 33;

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

Prompt e assegnazione ad una

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

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

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

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

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

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

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

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

Le istruzioni condizionali eseguono un certo blocco di codice se si

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

!= 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

&& and, “e logico”

Ad esempio i nomi di 10 invitati?

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

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

A volte stringhe e numeri non sono

var nome = "Fabio";

var nome = "Fabio";

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

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

Un Array: Un Object come un vero

A volte è necessario eseguire più volte lo stesso

Questo viene effettuato usando le istruzioni di

(eh no, il copia/incolla non vale)

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

var anni = [2010,2012,2013];

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

function somma(num1, num2){

entro la mattina del giorno successivo

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

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

Potrebbero piacerti anche