Lezione 20-21 (aa 2020-2021)

Funzioni

Cosa è una funzione

• Una funzione (o metodo) è una costrutto presente in tutti i linguaggi di programmazione progettato per eseguire un compito particolare.
• Il codice contenuto in una funzione JavaScript viene eseguita quando "qualcosa" invoca la funzione.

Sintassi

Una funzione JavaScript viene dichiarata (creata) con la parola chiave  function seguita da una coppia di parentesi ()  e da un blocco di codice (serie di comandi separati da ;) racchiuso tra parentesi graffe {}.

/* Funzione che calcola la media tra due numeri */
function (a, b) {
    return (a + b) / 2;            
}

Le parentesi possono includere nomi di parametro separati da virgole: (parametro1, parametro2, ... )

Funzione con nome

Posso creare una funzione con nome facendo seguire un identificativo alla parola chiave  function.

/* Funzione che calcola la media tra due numeri */
function media(a, b) {
    return (a + b) / 2;           
}

Funzione anonima

Posso assegnare una funzione a una variabile come un qualsiasi altro valore.

/* Funzione che calcola la media tra due numeri */
var media = function (a, b) {
    return (a + b) / 2;           
}

In entrambi i casi media conterrà la funzione e, dal punto di vista funzionale il risultato sarà in molti casi identico.

• Con parametri della funzione si indicano i nomi elencati tra parentesi nella definizione.
• Con argomenti della funzione si indicano i valori ricevuti dalla funzione, tramite i parametri, quando viene richiamata (eseguita).
• All'interno del corpo della funzione, i parametri si comportano come variabili locali.

Invocazione (esecuzione)

• Mentre il codice contenuto nelle altre parti di un programma JavaScript viene eseguito non appena il browser lo incontra, il codice all'interno della funzione verrà eseguito solo quando "qualcosa" esegue la funzione. Una funzione può essere invocata in tre modi:
• La funzione viene espressamente richiamata dal codice, come qualsiasi altro comando JavaScript
• La funzione viene associata ad un evento (ad esempio il click su un pulsante) e viene richiamata automaticamente ogni volta che  l'evento si verifica
• Infine una funzione può essere self invoked (cioè richiamarsi da sola)
• Nel primo e nel terzo caso (quando, cioè, la funzione non è eseguita automaticamente) ciò che scatena l'esecuzione è l'operatore di esecuzione, una coppia di parentesi tonde (), che seguono la funzione e che possono contenere gli argomenti (i valori) che la funzione elabora.
• Il comando return nel corpo della funzione arresta l'esecuzione di una funzione.
• Se la funzione viene richiamata da uno script, una volta eseguita, l'esecuzione del codice principale continua dal punto in cui la funzione è stata richiamata.
• Le funzioni possono restituire un valore che normalmente è un calcolo o una elaborazione svolta sui valori passati ala funzione attraverso i parametri. Il valore di ritorno viene "restituito" al "chiamante" con il comando return.

 /* Funzione che calcola la media tra due numeri */

function media (a, b) {
    return (a + b) / 2;           
}

// Calcolo la media tra 34 e 78
var m = media(34, 78);

// E comunico il risultato cambiando il contenut html dell'elemento con id="demo"
document.getElementById('demo').innerHTML = "La media è " + m;

Utilità delle funzioni

L’uso di funzioni ha due vantaggi:

• È possibile riutilizzare il codice: Definire il codice di una volta, e utilizzarlo più volte.
• È possibile utilizzare lo stesso codice con argomenti diversi, per produrre risultati diversi.

L'operatore ()

Per richiamare (eseguire) la funzione devo fare seguire il nome della funzione dall'operatore () che può contenere l'elenco degli argomenti che passo alla funzione, se previsti.

La funzione non seguita dall'operatore di esecuzione restituisce il contenuto della funzione stessa (la definizione) anziché il risultato.

Prendere decisioni

Le strutture di programmazione che mi consentono di prendere decisioni sono essenzialmente due:

• condizionale: faccio una determinata cosa se una condizione risulta vera altrimenti ne faccio un'altra
• iterativa (o loop): ripeto una determinata operazione finche una condizione risulta vera

L'istruzione if

L’istruzione if può avere due forme:

• if ( espressione ) blocco di istruzioni
• if ( espressione ) blocco di istruzioni else blocco di istruzioni

L'espressione che compare dopo la parola chiave if deve essere di tipo logico, se la condizione risulta vera viene eseguita l'istruzione subito seguente; nel secondo caso, invece, se la condizione risulta vera si esegue l'istruzione seguente, altrimenti si esegue l'istruzione subito dopo la parola chiave else.

Per più scelte invece si può usare l'else if che permette di porre una condizione anche per le alternative, lasciando ovviamente la possibilità di mettere l'else (senza condizioni) in posizione finale.

Esempio

/*
  Blocco if
*/
if (condizione)
{
	//comandi se condizione è vera
}
// il programma continua qui

Esercizio: l'orologio

/orologio.html

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Orologio</title>
        <link rel="stylesheet" href="css/stile.css">
    </head>
    <body>
        <div class="full-screen copertina-orologio d-flex">
            <div id="orologio" class="m-auto text-orologio">00:00:00</div>
        </div>
        <script>
            // Funzione che trasforma un numero in stringa aggiungento uno zero
            // prima se composta da una sola cifra
            function zeroPrima (n) {
                var str = n.toString();
                if (str.length < 2) {
                    str = '0' + str;
                }
                return str;
            }
            // Ricava l'ora dall'orologio del computer e la trasforma in stringa
            // nel formato hh:mm:ss
            function formattaOra() {
                var adesso = new Date();
                var ora = zeroPrima(adesso.getHours());
                var minuti = zeroPrima(adesso.getMinutes());
                var secondi = zeroPrima(adesso.getSeconds());
                return ora + ':' + minuti + ':' + secondi;
            }

            // Scrive l'ora nel elemento html con id 'orologio'
            function scriviOra() {
                var oraFormattata = formattaOra();
                var elementoOrologio = document.getElementById('orologio');
                elementoOrologio.innerHTML = oraFormattata;
            }

            scriviOra();

            // L'ora aggiornata viene scritta ogni 1000 millisecondi
            setInterval(scriviOra, 1000);

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

/css/stile.css

/*==============
    GENERALE
================*/

* {
    box-sizing: border-box;
    margin:0;
}

html {
    font-size: 20px;
}

/*==============
    TIPOGRAFIA
================*/
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    color: #222222; 
    line-height: 1.4;
}

h1,h2,h3 {
    font-weight: 300;
}

h4,h5,h6 {
    font-weight: 600;
    font-variant: small-caps;
}

h1,h2,h3,h4,h5,h6 {
    line-height: 1.1;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size:1.4rem;
}

h6 {
    font-size: 1.1rem;
}

a {
    color: #660000;
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: #dd0000;
    text-decoration: underline;
}

p {
    margin-bottom: 1.6rem;
}

section {
    padding-top: 60px;
}

/*==============
    CONTAINER
================*/

.contenitore {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    .contenitore {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.rotondo {
    border-radius: 50%;;
}

.full-screen {
    min-height: 100vh;
}

.text-center {
    text-align: center;
}

.text-orologio {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18vw;
}

@media (max-width:996px) {
    .text-tablet-center {
        text-align: center;
    }
}

/*========================
    BARRA DI NAVIGAZIONE
==========================*/

nav {
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

nav ul > li > a {
    display: block;
    padding: 0.8rem 2rem;
    color: #eeeeee;
    text-transform: uppercase;
}

nav ul > li > a:hover {
    color: #222222;
    background-color: #cccccc;
    text-decoration: none;
}

.nav-brand {
    height: 40px;
}

/*========================
       COPERTINA
==========================*/
.copertina {
    background-color: #333;
    color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.copertina-orologio {
    background-color: #333333;
    color: white;
}

/*========================
       GRIGLIA
==========================*/

.img-fluid {
    max-width: 100%;
    height: auto;
}

.riga {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col-33, .col-66, .col, .col-auto {
    padding-left: 15px;
    padding-right: 15px;
}

.col-33 {
    flex: 1 1 33.33%;
    max-width: 33.33%;
}

.col-66 {
    flex: 1 1 66.66%;
    max-width: 66.66%;
}
.col-auto {
    flex: 0 0 auto;
    max-width: 100%;
}

.col {
    flex: 1 1 1px;
}

@media (max-width:996px) {
    .col-66.col-tablet-100, .col-33.col-tablet-100, .col.col-tablet-100 {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .riga-tablet-2 .col {
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/*=======================
        MARGINI
========================*/
.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}
.mt-2, .my-2 {
    margin-top:2rem;
}

.mb-2, .my-2 {
    margin-bottom: 2rem;
}

.ml-2, .mx-2 {
    margin-left: 2rem;
}

.mr-2, .mx-2 {
    margin-right: 2rem;
}
/*========================
         BOTTONI
==========================*/

.bottone {
    border:2px solid transparent;
    border-radius:0;
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
}
.bottone:hover {
    text-decoration: none;
}

.bottone-rosso {
    background-color: #660000;
    border-color: #660000;
    color: white;
}

.bottone-rosso:hover {
    background-color: white;
    color: #660000;
}

.btn-rounded {
    border-radius: 2rem;
}

.btn-rounded:focus {
    outline: none;
}
/*========================
         COLORI
==========================*/
.bg-grigio-chiaro {
    background-color: #cccccc;
}

/*========================
        GALLERY
==========================*/

.img-cont-1by1 {
    padding-bottom: 100%;
}

.img-cont-4by3 {
    padding-bottom: 75%;
}

.img-cont {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.galleria a {
    display: block;
    overflow: hidden;
}
.galleria a:hover .img-cont {
    opacity: 0.7;
    transform: scale(1.1);
}

/*========================
        INPUT
==========================*/

.aba-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    border: #cccccc 1px solid;
}

.aba-input:focus {
    outline: #660000 solid 3px;;
}