VIQ - Laboratorio 5
9 maggio 2019
Obiettivi:
- Comprendere i concetti di base di JavaScript
- Utilizzare JavaScript per generare contenuti HTML
- 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 metododocument.write()
siadocument.getElementById('log').innerHTML
ed un ciclofor
.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 oggettiArray
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 ap
, generando un output simile aSmith, John (12345)
. -
Aggiungere un metodo
toString()
all'oggettop
in grado di generare una rappresentazione come quella del punto precedente.Suggerimento: utilizzare il riferimento speciale
this
. -
Aggiungere il metodo
printList()
all'arraya
in grado di visualizzare il vettore nella pagina HTML invocando la funzioneprintList()
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 propertyfields
; -
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.