Sintesi della lezione

Manipolazione dei dati

Oggetto e Tipi

• L’oggetto è una grandezza informatica in grado di rappresentare i dati.
• Nella programmazione OOP tutte i dati si rappresentano e si elaborano tramite oggetti.
• Quando scrivo:

pippo = new Date();

• o:

pippo = ″Ciao gente!″;

• non assegno semplicemente un valore a una variabile. Creo un dato complesso detto oggetto che oltre al valore contiene tutti gli strumenti necessari ad elaborarlo.
• Nella programmazione OOP i tipi di oggetto (il tipo è, in generale, determinato dal tipo di dati che l’oggetto è destinato ad elaborare) si chiamano classi.
• La classe, cioè, è l’insieme di regole che determinano come funziona un oggetto di una determinato tipo (o, i termini OOP, un istanza di una determinata classe).
• In Javascript non si fa menzione espressa del temine class (che per altro è una parola riservata che non può essere usata dall’utente). Per noi quindi oggetto (inteso come tipo di oggetto) e classe saranno sinonimi.
• Esistono oggetti (classi) predefinite dal linguaggio, oggetti (classi) create dalla comunità dei programmatori e che posso caricare e utilizzare nelle mie pagine Web e, infine, noi stessi possiamo creare le nostre classi per risolvere i nostri problemi.

Proprietà e Metodi

Ogni tipo di dato (classe) è caratterizzato da:

• Proprietà che ci consentono di leggere o modificare determinate caratteristiche di un individuo della classe
• Metodi che ci mettono a disposizione determinate azioni che gli oggetti possono compiere o subire

Le proprietà contengono un valore (come le variabili) che rappresenta una caratteristica dell'oggetto a cui la proprietà è riferita.

• Inizializzando una varibile le assegno un tipo (o classe)

pippo = ″Ciao gente!″;

• E posso accedere alle PROPRIETÀ E AI METODI DEFINITI DA QUEL TIPO.
  • Usando l’operatore di appartenenza ˝•˝
  • Usando le parentesi quadre che racchiudano il nome della proprietà come stringa di caratteri.

// Operatore di appartenenza
var len = pippo.length;

// Parentesi quadre
var len = pippo[″length″];

• In entrambi i casi len conterrà il numero di caratteri di cui è composta la variabile stringa pippo

Alcune proprietà sono a sola lettura, non possono cioè essere modificate. Se scrivo:

pippo.length = 3;

Mentre se scrivo:

elemento.innerHTML = ″Ciao gente!″;

modificherò il contenuto HTML dell’elemento della pagina elemento (che un elemento HTML definito nella pagina) e le modifiche avranno un immediato effetto sul rendering della pagina stessa.

I metodi contengono codice eseguibile (come le funzioni), e ci consentono di eseguire azioni sull'oggetto.

• Una volta che una variabile contiene un oggetto

pippo = new Date();

• Posso accedere ai suoi metodi.
• Come le funzioni i metodi possono ricevere parametri e ritornare valori. Normalmente quando è previsto il passaggio di parametri i metodi modificano l'oggetto quando restituiscono valore restituiscono informazioni sull'oggetto.
• Uso l’operatore di appartenenza . e faccio seguire l’identificatore dalle parentesi tonde, l'operatore di esecuzione ()

/*
il metodo getDate restituisce il giorno del mese della data contenuta in pippo che viene memorizzato nella variabile giorno.
*/
var giorno = pippo.getDate();

• Quando un metodo prevede dei parametri normalmente serve a modificare l'oggetto:

/*
Modifico la data contenuta nella variabile pippo: il giorno del mese sarà 3.
*/
pippo.setDate(3);

Proprietà e Metodi Statici

Esistono metodi e proprietà particolari che non si applicano ai singoli oggetti (istanze de una classe) ma hanno un uso globale.

Per usarli non li applico all’oggetto ma alla classe

/*
La variabile data contiene l’oggetto Date ottenuto convertendo in data la stringa passata come parametro al metodo statico Date.parse
*/
var data = Date.parse("March 21, 2012");

Constructor

• Implicito:

var str = "Ciao!";

• Esplicito:

var adesso = new Date();

• Metodo di un altro oggetto:

var elemento = document.createElement("p");

string

/* Constructor */
var str = "Ciao!";

Proprietà

Gli oggetti della classe String hanno una sola proprietà, la proprietà length che restituisce la lunghezza della stringa, cioè il numero di caratteri di cui è composta.

Metodi

replace()

• Il metodo replace () cerca in una stringa i gruppi di caratteri che corrispondono a una substringa o a una regular expression, e restituisce una nuova stringa in cui le occorrenze trovate vengono sostituite da un valore specificato,
• Nota: Se si usa una substring e non una regular expression per la ricerca,  verrà sostituita solo la prima occorrenza trovata. Per sostituire tutte le occorrenze di una ricerca è necessario usare una regular expression con il modificatore g,
• Questo metodo non cambia la stringa originale.

split()

• Il metodo split () viene utilizzato per dividere una stringa in un array di stringhe utilizzanda uno o più caratteri come separatore, e restituisce il nuovo array.
• Se si utilizza una stringa vuota ("") come separatore, la stringa è diviso nei singoli caratteri che la compongono.
• Nota: Il metodo split() non modifica la stringa originale.

Esempi 

/*=======================================================================
		       	USO DEI METODI DI STRING 
  ======================================================================= */
var origine = "Ciao gente!";
var origine2 ="Domenica,Lunedì,Martedì,Mercoledì,Giovedì,Venerdì,Sabato";
var str, pos, len, giorni;
len = origine.length;			        // 11
str = origine.charAt(3);			    // "o"
str = origine.indexOf("e"); 		    // 6
str = origine.indexOf("!!");		    // -1 (non trovato)
str = origine.lastIndexOf("e"); 		// 9
str = origine.replace("!", "?");		// "Ciao gente?"
giorni = origine2.split(",");		    // ["Domenica", "Lunedì", "Martedì",						
                                        // "Mercoledì", "Giovedì",
						                // "Venerdì", "Sabato"]
str = origine.substr(5)			        // "gente!"
str = origine.substr(5,2)			    // "ge"

Array

/*  CONSTRUCTOR */
var a = [1,6,78,23];
var a = new Array(1,6,78,23);

Proprietà

Gli oggetti della classe Array hanno una sola proprietà, la proprietà length che restituisce la lunghezza dell'array, cioè il numero di elementi di cui è composto.

Metodi

Esercizio Analisi di una stringa

html

    <section id="analisiStringa" class="py-5">
        <div class="container">
            <h1>Analisi di una stringa</h1>
            <div class="form-group">
                <label>Testo da analizzare:</label>
                <textarea id="testoDaAnalizzare" class="form-control" rows="5" placeholder="Inserisci un testo"></textarea>
            </div>
            <button type="button" class="btn btn-primary" id="btn-analisiStringa">Analizza</button>
            <p id="messaggioAnalisi"></p>
        </div>
    </section>

Javascript

        /**
            Analisi della stringa
        */
        var bottoneAnalisiStringa = document.getElementById('btn-analisiStringa');
        var messaggioAnalisi = document.getElementById('messaggioAnalisi');
        var getTestoDaAnalizzare = document.getElementById('testoDaAnalizzare');

        function analizzaTesto() {
            var testo = getTestoDaAnalizzare.value;
            var parole = testo.split(" ");
            messaggioAnalisi.innerHTML = "Il testo inserito è composto da " + testo.length + " caratteri e " + parole.length + " parole.";
        }
        bottoneAnalisiStringa.addEventListener('click', analizzaTesto);

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.

Esercizio Media tra due numeri

html

    <section id="calcoloMedia" class="py-5">
        <div class="container">
            <h1>Media tra due numeri</h1>
            <div class="form-row">
                <div class="col">
                    <input type="number" id="media-1" class="form-control" placeholder="Inserisci un numero" />
                </div>
                <div class="col">
                    <input type="number" id="media-2" class="form-control" placeholder="Inserisci un numero" />
                </div>
                <div class="col-sm-auto">
                    <button type="menu" class="btn btn-outline-dark" id="btn-calcolomedia">Calcola</button>
                </div>
            </div>
            <p id="messaggioCalcoloMedia"></p>
        </div>
    </section>

Javascript

        /**
        *  Calcolo della media
        */
        var inputMedia_1 = document.getElementById('media-1');
        var inputMedia_2 = document.getElementById('media-2');
        var btnCalcolaMedia = document.getElementById('btn-calcolomedia');
        var messaggioCalcoloMedia = document.getElementById('messaggioCalcoloMedia');
        function media (a, b) {
            return (a + b) / 2;
        }

        var clickSuBtnCalcoloMedia = function() {
            var num1 = parseFloat(inputMedia_1.value);
            var num2 = parseFloat(inputMedia_2.value);
            messaggioCalcoloMedia.innerHTML = "La media trà " + num1 + " e " + num2 + " è " + media(num1,num2);
        };

        btnCalcolaMedia.addEventListener('click', clickSuBtnCalcoloMedia);

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 Orologio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Orologio</title>
    <style>
        .orologio {
            font-size: 16vw;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="min-vh-100 min-vw-100 d-flex">
        <div class="orologio m-auto" id="orologio">00:00:00</div>
    </div>
    <script>
        function zeroPrima (n) {
            if (n < 10) {
                return "0" + n;
            }
            return n;
        }

        var orologio = document.getElementById('orologio');

        function aggiornaOrologio () {
            var adesso = new Date();
            orologio.innerHTML = zeroPrima(adesso.getHours()) + ":" + zeroPrima(adesso.getMinutes()) + ":" + zeroPrima(adesso.getSeconds());
        };
        aggiornaOrologio();
        setInterval(aggiornaOrologio, 1000);
    </script>
</body>
</html>