VIQ - Laboratorio 5

9 maggio 2019

Obiettivi:

1. Comprendere i concetti di base di JavaScript
2. Utilizzare JavaScript per generare contenuti HTML
3. Combinare JavaScript, HTML e CSS per generare semplici grafici

Strumenti:

• Browser (consigliato: Google Chrome)
• Editor (consigliato: WebStorm)

Per avviare WebStorm ed effettuare il checkout del progetto dal repository personale fare riferimento al tutorial.

Esercizio 1

Dati

Si considerino le seguenti variabili globali:

const a = [4, 90, 10, 3, 56, 32, 47, 13];
const p = {
    id: 12345,
    name: "John",
    surname: "Smith"
};

Attività

• Visualizzare il contenuto dell'array a:

  • nella console JavaScript del browser, utilizzando il metodo console.log();

  • nella pagina HTML, utilizzando il metodo document.write().

  • nella pagina HTML, utilizzando document.getElementById('log').innerHTML.

• Scrivere la funzione printList() che visualizzi un vettore come lista ordinata (ul) nella pagina HTML, utilizzando sia il metodo document.write() sia document.getElementById('log').innerHTML ed un ciclo for.

  Verificare il corretto funzionamento della funzione eseguendo:

  printList(a);

• Scrivere il codice per ordinare l'array a tramite bubble sort.

  Definire una funzione bubblesort che faccia l'ordinamento e restituisca l'array ordinato.

  Si noti che il passaggio degli array (come di tutti gli oggetti) avviene per riferimento, perciò la funzione modifica anche il vettore originale.

  È necessario duplicare l'array ad esempio con il metodo slice():

  var b = a.slice(0);

• Utilizzare il metodo sort() degli oggetti Array che permette di ordinare gli elementi di un array.

  Che ordinamento si ottiene sull'array a?

  Cosa è necessario specificare?

• Scrivere la funzione mediana() che calcoli la mediana di un array di valori numerici.

• Scrivere la funzione personToString() per generare una rappresentazione stringa di un oggetto con struttura analoga a p, generando un output simile a Smith, John (12345).

• Aggiungere un metodo toString() all'oggetto p in grado di generare una rappresentazione come quella del punto precedente.

  Suggerimento: utilizzare il riferimento speciale this.

• Aggiungere il metodo printList() all'array a in grado di visualizzare il vettore nella pagina HTML invocando la funzione printList() definita in precedenza.

Esercizio 2

Dati

Si consideri la rappresentazione, come oggetto JavaScript, della classifica del campionato di calcio di Serie A, aggiornata al 28 maggio 2017.

const classifica = {
    "update": new Date(2017, 4, 28),
    "fields": ["Squadra", "Punti", "Giocate", "Vinte", "Neutre", "Perse", "Gol Fatti", "Gol Subiti"],
    "data": [
        ["Juventus", 91, 38, 29, 4, 5, 77, 27],
        ["Roma", 87, 38, 28, 3, 7, 90, 38],
        ["Napoli", 86, 38, 26, 8, 4, 94, 39],
        ["Atalanta", 72, 38, 21, 9, 8, 62, 41],
        ["Lazio", 70, 38, 21, 7, 10, 74, 51],
        ["Milan", 63, 38, 18, 9, 11, 57, 45],
        ["Inter", 62, 38, 19, 5, 14, 72, 49],
        ["Fiorentina", 60, 38, 16, 12, 10, 63, 57],
        ["Torino", 53, 38, 13, 14, 11, 71, 66],
        ["Sampdoria", 48, 38, 12, 12, 14, 49, 55],
        ["Cagliari", 47, 38, 14, 5, 19, 55, 76],
        ["Sassuolo", 46, 38, 13, 7, 18, 58, 63],
        ["Udinese", 45, 38, 12, 9, 17, 47, 56],
        ["Chievo", 43, 38, 12, 7, 19, 43, 61],
        ["Bologna", 41, 38, 11, 8, 19, 40, 58],
        ["Genoa", 36, 38, 9, 9, 20, 38, 64],
        ["Crotone", 34, 38, 9, 7, 22, 34, 58],
        ["Empoli", 32, 38, 8, 8, 22, 29, 61],
        ["Palermo", 26, 38, 6, 8, 24, 33, 77],
        ["Pescara", 18, 38, 3, 9, 26, 37, 81]
    ]
};

Osservazione: si tratta della trasposizione in altro formato (JSON) dei dati riportati nel file CSV SerieA.csv.

Attività

• Scrivere il codice JavaScript per generare una tabella a partire dalla descrizione fornita in un oggetto.

  • Si usi document.getElementById('table').innerHTML all'interno di un tag <script>.

  • Occorre generare tutto il codice HTML relativo alla tabella:

    • i tag di apertura e chiusura;

    • la riga con gli heading (<th>) prendendo le informazioni dalla property fields;

    • le righe corrispondenti ai dati effettivi prelevati dalla property data (array di array).

• Suddividere il codice in modo da separare i dati dal codice di visualizzazione:

  • un file visualizzaTab.js con la funzione (tabella) che visualizza la classifica contenuta nel parametro,

  • un file classificaDati.js con i dati,

  • nel file HTML è sufficiente includere i file .js e richiamare la funzione:

    <script>
      tabella(classifica);
    </script>

    Osservazione : cosa succede se invece di una sola classifica devo visualizzarne molte, ad esempio ho a disposizione tanti file, uno per ogni giornata di campionato? Oltre a utilizzare nomi di file distinti, è necessario utilizzare nomi di variabili distinti e invocare la funzione sulle variabili appropriate ciascuna volta.

• Creare una versione alternativa del file dati (classifica20170528.js) che richiami direttamente la funzione di visualizzazione, in modo che si eviti di definire una variabile globale e l'inclusione dello script porti direttamente alla visualizzazione della tabella.

Esercizio 3

Attività

• Scrivere il codice JavaScript che generi i <div> che rappresentano le barre del grafico a partire da un array con i valori:

  const valori = [4, 8, 15, 16, 23, 42];

  Si usi document.getElementById('barre').innerHTML.

• Modificare il documento HTML ed il CSS in modo da visualizzare le etichette per le barre.

  

  Suggerimento: l'allineamento tra etichette e barre può essere ottenuto tramite una tabella.

• Scrivere il codice JavaScript per generare in #grafico il grafico corrispondente all'array di oggetti:

  const dati = [
      {label: "alpha", value: 4},
      {label: "beta", value: 8},
      {label: "gamma", value: 15},
      {label: "delta", value: 16},
      {label: "epsilon", value: 23},
      {label: "zeta", value: 42}
  ];

• Aggiungere una tabella, generata con JavaScript, in #tabella che riporti i dati visualizzati nel grafico.