Esercizi Javascript
Costrutti di base
Per esercitarsi sui costrutti di base del linguaggio, fare riferimento agli esercizi su C/C++ con gli opportuni adattamenti al linguaggio Javascript.
Javascript nel browser
- Scrivere un programma che richiede quattro numeri da quattro input distinti, e poi restituisce in output (un div) il maggiore e il minore. Se l’utente non inserisce nulla in un input, il suo valore vale 0.
- Scrivere un programma che richiede un numero e il programma stampa in output tutte le coppie di interi che hanno come somma quel numero.
- Scrivere un programma che dato l’inserimento di un input in una variabile n e verifica se è un numero. Se non lo è stampa errore. Se invece è un numero, stampa n numeri casuali tra 1 e 100. Per generare un numero casuale si usa Math.random() (presente nella guida).
- Scrivere un programma JS che dato l’inserimento di un input di due variabili n e k, verifichi se n è divisibile per k. Verificare che sia n che k siano numeri, altrimenti dare errore.
- Scrivere un programma che verifica che l’input dell’utente sia una password valida.Per essere una password valida devono essere soddisfatte le seguenti regole:
- deve essere lunga almeno 8 caratteri (per verificare la lunghezza di una stringa si usa la proprietà “length” dell’oggetto stringa)
- deve avere almeno una maiuscola (“A-Z”)deve avere almeno una minuscola (“a-z”)deve avere almeno una cifra (“0-9”)deve avere un carattere speciale tra i seguenti (“-_.,!£$%&/|”).
substring(a,b)dell’oggetto stringa, dove a e b sono l’inizio e la fine della sottostringa). - Si scriva un programma che simula lo sblocco di un cellulare.Il programma legge un pin di 4 cifre inserito dall’utente e lo imposta come pin segnalandolo all’utente. A questo punto azzera l’input e chiede di inserire il pin. Se viene inserito quello corretto scrive “telefono sbloccato”. Se viene inserito quello sbagliato riazzera l’input e concede fino a 3 tentativi. Al terzo tentativo errato visualizza il messaggio “telefono bloccato”,
- Scrivere un programma che permette di indovinare un numero. Generare un numero casuale tra 1 e 100. Far inserire all’utente un numero con cui deve indovinare il numero inserito. Se il numero inserito è maggiore scrivere che è maggiore, se è minore scrivere che è minore. Se il numero corrisponde scrivere che ha vinto ed indicare il numero di tentativi.Devono essere stampati tutti i tentativi ed ad ogni tentativo occorre inizializzare l’input value.
- Misurare la differenza tra due date in giorni, inserite dall’utente.
- Svolgere il progetto del calcolo del codice fiscale.
- Scrivere una pagina html usando la libreria Bootstrap. La pagina contiene 3 pulsanti con label “primo”, “secondo” e “terzo” con sfondo iniziale grigio ed allineati in una unica riga, ed un quarto pulsante “reset”, su una nuova riga.Usare le opportune classi Bootstrap per ottenere il risultato.Azioni Javascript previste:
- Alla pressione del pulsante “primo”, il pulsante “secondo” prende sfondo verde.Alla pressione del pulsante “secondo”, il pulsante “terzo” prende sfondo blu.Alla pressione del pulsante “terzo”, il pulsante “primo” prende sfondo giallo.
- Alla pressione del pulsante “reset”, tutti i pulsanti tornano allo stato iniziale.
- Per poter cambiare il colore di un oggetto, è possibile usare le classi Bootstrap, assegnandole tramite Javascript.Per assegnare una classe ad un oggetto “element” usare la seguente istruzione:element.classList.add(“css_class”);
- Per rimuovere una classe ad un oggetto “element” usare la seguente istruzione:element.classList.remove(“css_class”);NOTA: ricordarsi di rimuovere la classe non più usata contestualmente con l’aggiunta di quella nuova.
- Scrivere un form usando opportune classi Bootstrap contenente i seguenti input:
- nome
- cognome
- username
- password
- checkbox “agree”
- pulsante “submit”.
- Scrivere una pagina html con 3 div con bordo nero e sfondo grigio. I div devono stare nella stessa riga occupando 3 colonne di pari dimensione e altezza a piacere (minimo 100px). Usare opportune classi Bootstrap.Al passaggio del mouse su ogni div il colore di sfondo diventa blu, all’uscita ritorna grigio (gli eventi sono onmouseover e onmouseleave). Al click del mouse su un div lo fa diventare verde. Un nuovo click lo fa ritornare grigio.
- Scrivere una web che mostra una tabella con le seguenti colonne:
- Nome
- Cognome
- Età
- Pulsante “modifica”
- Scrivere una pagina web contenente un div che mostra l’ora corrente nel formato “hh:mm:ss”. Usare la funzione “setInterval”.
- Scrivere una pagina web contenente un div che mostra un cronometro nel formato “mm:ss:mmm” (minuti, secondi, millisecondi) e due pulsanti “start” e “clear”.Inizialmente il cronometro mostra “00:00:000”.
- Se si preme il pulsante “start”, il cronometro parte e mostra quindi il suo valore con aggiornamento ogni 1/100 di secondo. Il pulsante “start” prende la label “stop” ed il pulsante “clear” è disabilitato.
- Se si preme il pulsante “stop” mentre il cronometro è attivo il cronometro si ferma, e il pulsante cambia la label in “start”.
- Se si preme clear, il cronometro viene azzerato. Il pulsante funziona solo se il cronometro è fermo.
- Scrivere una webapp che valida un form. Il form contiene i seguenti campi:
- nome: deve essere alfanumerico di almeno 3 lettere e cominciare con una lettera
- cognome: deve essere alfanumerico di almeno 3 lettere e cominciare con una lettera
- anno di nascita: deve essere tra 1900 e 2023
- mese di nascita: deve essere tra 1 e 12
- giorno di nascita: deve essere un giorno valido rispetto al mese
- città: deve essere di almeno 2 lettere, cominciare con lettera
- paese: deve essere almeno 4 lettere e cominciare con una lettera
- nome: il nome immesso
- cognome: il cognome immesso
- età: età calcolata (anno corrente – anno di nascita)
- città: città immessa
- paese: paese immesso
- Scrivere una webapp che contiene un timer così strutturato:
- è presente un form con un input dove inserire un numero che indica i secondi del timer ed un pulsantre conferma
- alla pressione del pulsante conferma viene visualizzato in un div apposito il timer in secondi che parte automaticamente
- il timer viene aggiornato ogni secondo dal numero n a 0
- Quando il timer si azzera, viene mostrato un alert con il testo “tempo scaduto”.
- Riprendere l’esercizio precedente ed aggiungere
- un pulsante “clear”. In questo caso A torna a 0.
- un pulsante “random”. In questo caso viene generato un numero A random.
- Creare una webapp che mostra una classifica, con un elenco di squadre o giocatori a piacere (minimo 6). Per ogni riga della tabella è presente il nome (della squadra o del giocatore), un pulsante “su” ed un pulsante “giù” (usare immagini da internet). Il primo elemento avrà solo il pulsante giù, l’ultimo solo il pulsante su. Alla pressione del pulsante su viene scambiato il giocatore (o la squadra) con quello soprastante, viceversa col pulsante giù.
- scrivere una applicazione con queste caratteristiche:
- Nella pagina inizialmente è presente un solo form che richiede di inserire un nome di squadra ed un punteggio ed una tabella sottostante inizialmente vuota, con header “nome squadra” e “punteggio”.
- Alla pressione del pulsante submit, viene aggiunta la squadra alla tabella. La tabella viene riordinata in base al punteggio.
- nome squadra
- punti
- Modificare l’esercizio precedente aggiungendo, al termine della riga, un pulsante elimina. Alla pressione del pulsante viene eliminata l’intera riga.
Questo esercizio implica che dopo la render bisogna eseguire il binding di tutti i pulsanti elimina creati. I pulsanti vanno quindi generati con un id univoco che richiami al corrispondente oggetto della lista. Si ricordi di usare come sempre il metodo evento-azione-reazione. - Scrivere una applicazione che mostra una TODO list.
- Una todo list è composta da una form con un campo di input dove inserire un nuovo task (col relativo pulsante “aggiungi”), ed un elenco coi task già creati, che consiste in una tabella con 3 colonne: il nome del task, un pulsante “completa” ed un pulsante “elimina”, sarà quindi presente per ogni task un proprio pulsante completa e un pulsante elimina.
- Ogni elemento quando creato è in stato “da fare”, con un colore identificativo, ad esempio giallo.
- Se si preme il pusante “completa” il task diventa verde ed il pulsante si disabilita.
- Se si preme “elimina” il task viene cancellato.
Manipolazione dei dati
- Scrivere una app che data una lista di studenti con i seguenti dati: nome, cognome, data di nascita, comune di residenza genera una tabella. I dati sono in formato csv e sono sotto forma di stringa.
- Scrivere una variante che permette di modificare la lista precedente eliminando singoli elementi.
- Implementare una coda FIFO in javascript.Devono essere presenti due funzioni:
- insert: inserisce un elemento in coda (all’inizio)extract: estrae il primo elemento della coda (cioè in posizione finale)
const lista = [1,2,3];lista.insert(4); --> lista = [4,1,2,3]
const first = lista.extract(); --> first = 3, lista = [4,1,2] - Implementare un programma che converte un numero binario (sotto forma di stringa es. “11001”) in decimale (sotto forma di numero).
- Implementare un programma che calcola il prodotto degli elementi di una lista. Usare reduce.
- Scrivere una funzione che permette di eseguire lo swap di due elementi di un array.La funzione avrà la seguente firma: swap(lista, pos1, pos2).Esempio dato lista=[1,3,2,4,6] se eseguiamo swap(lista, 2,4) l’array diventerà [1,3,6,4,2].
- Date due liste come queste:
["Ferrari", "Russo", Greco", "Esposito", ...]
[7,6,5,8, ...]
scrivere una funzione che genera un dizionario come questo:{
"Ferrari": 7,
"Russo": 6,
"Greco": 5,
"Esposito": 8"...
} - A partire dal seguente array:
[{"lab": "121","posti": 25,"occupato": [false, true, true, false, true]}, {"lab": "122","posti": 26,"occupato": [true, true, false, false, false]},{"lab": "6","posti": 24,"occupato": [false, false, true, true, true]}, {"lab": "24", "posti": 28, "occupato": [false, true, true, true, false]}]
L’array associato alla chiave “occupato” indica se il laboratorio è occupato per l’ora corrispondente all’indice (con indice 0 si intende prima ora, 1 per la seconda ora e così via). Scrivere un programma JS che crea una lista dove per ogni ora vengono indicati i laboratori liberi. - Dato il seguente codice:
const update = () => {list.push(Math.rand() * 100);}
const func = () => {clearInterval(interval);
list = [];interval = setInterval(update, 1000);};
Indicare a cosa serve l’istruzione in grassetto e perché è stata inserita. - Sia dato un dizionario contenente i voti degli studenti:
{"Ferrari": 7,"Russo": 6,"Greco": 5,"Esposito": 8"...}
Scrivere una funzione javascript getVoti che riceve come parametro il dizionario e stampa la lista dei voti per studente in una tabella. - Si abbia un dizionario contenente una lista di studenti e relativi voti in specifiche materie:
const lista = [{ "id": 1, "nome": "Fabio Colacresi", "materia": "italiano", "voto": 7, "quadrimestre": 1, }, { "id": 2, "nome": "Laurindo Andreazzi", "materia": "matematica", "voto": 6, "quadrimestre": 2 }, ...]
Scrivere una funzione che, ricevuti come parametri un nome ed un numero di quadrimestre, restituisce un dizionario con questa struttura:{ "nome": "Stellina Barcella", "voti": [{ "materia": "italiano", "voto": 7 },{ "materia": "storia", "voto": 9 }, ...] }
AJAX, fetch e cache remota
Per svolgere gli esercizi useremo alcuni di questi servizi. Si ricordi di analizzare il JSON per capirne la struttura ed estrarre i valori.
| Servizio | URL |
| Meteo | https://api.open-meteo.com/v1/forecast?latitude=45.59&longitude=9.57¤t_weather=true |
| GeoAPIfy | https://api.geoapify.com/v1/geocode/search?apiKey=5e8d464f7a6f48f281288c93c1531355&text=roma |
| Word dictionary | https://api.dictionaryapi.dev/api/v2/entries/en/sea |
| Countries | https://restcountries.com/v3.1/all |
| Country | https://restcountries.com/v3.1/name/deutschland |
| Deck (una carta a caso) | https://deckofcardsapi.com/api/deck/new/draw/?count=1 |
- Scrivere una pagina con l’attuale classifica di serie A e i risultati dell’ultima partita.
Classifica:
URL della chiamata:https://football98.p.rapidapi.com/seriea/table
Headers:
{
'X-RapidAPI-Key': 'a8be409292msh83192a5258f2ae4p1f3d1ajsn830150026a35',
'X-RapidAPI-Host': 'football98.p.rapidapi.com'
}
Dal risultato JSON estrarre la classifica.La classifica deve essere mostrata come una tabella con le seguenti colonne: posizione, immagine squadra, nome squadra, punti, vinte, nulle, perse
Risultati:
Aggiungere sotto alla classifica i risultati dell’ultima partita di serie A.
URL della chiamata:https://football98.p.rapidapi.com/seriea/results
Headers:
{
'X-RapidAPI-Key': 'a8be409292msh83192a5258f2ae4p1f3d1ajsn830150026a35',
'X-RapidAPI-Host': 'football98.p.rapidapi.com'
}
Dal risultato JSON estrarre i risultati dell’ultima partita. Fare attenzione: il JSON è strutturato come un array di 1 solo elemento che contiene un dizionario dove ad ogni chiave corrisponde una giornata:[{ "Matchday 27": [{...},{...}...]},{ "Matchday 26": [...]},...]
Quindi per estrarre le chiavi si fa così:const matchdays = Object.values(result[0]);
dove result è il risultato della fetch. I risultati devono essere mostrati in un una tabella con le seguenti colonne: immagine squadra di casa, immagine squadra trasferta, nome squadra casa, nome squadra trasferta, goal casa, goal trasferta. - Nel seguente codice:
fetch(url).then(response => {// #1}).catch(error => {// #2});
Spiegare cosa avviene al punto 1 e cosa avviene al punto 2 - Scrivere una web app contenente due parti:
- la prima chiede all’utente un valore che viene poi salvato in cache remota alla chiave “esercizio-cache-remota”.
- una seconda che mostra il valore corrente di cache e viene aggiornata dopo ogni salvataggio remoto.
- Scrivere una webapp dove l’utente inserisce un luogo, e il sistema restituisce la sua posizione in termini di latitudine e longitudine (servizio GeoAPIfy).
- Estendere la precedente pagina, dando anche informazioni sul meteo (servizio Meteo). Notare che questo tipo di esercizio la callback esegue una nuova fetch.
- Fare una webapp che richiede un nome di un Paese e restituisce in forma ordinata le informazioni di quel Paese (usare servizio Country)
- Scrivere una webapp che richiede all’utente un certo numero di carte e le mostra (per mostrare le immagini usare il tag img).
- Modificare il progetto TODO presente nella sezione Javascript nel browser e:
- dopo ogni aggiunta/modifica/eliminazione bisogna salvare tutte le todo con una unica chiave (es. “todo”) nella cache remota;
- ad ogni caricamento della pagina bisogna caricare da remoto le todo e se presenti mostrarle all’utente.
- Scrivere una applicazione che cerca di leggere la chiave myKey (variabile che contiene stringa chiave scelta a piacere) che dovrebbe contenere una stringa inserita dall’utente. Se la trova la stampa in un div apposito.
Canvas
- La distribuzione di voti di una classe è data da seguente array simile il seguente.[4,8,6,5,5,4,6,4,4,6,6,5,6,8,10,7,8,9,7,6,10]
Costruire in Javascript un dizionario che mostra per ogni valutazione (da 1 a 10) la quantità di voti presi e la mostra in una tabella e poi in un digramma con istogrammi.
Oggetti e classi
- Implementare una funzione generatrice che crea una funzione distributore di benzina che funziona nel seguente modo:
- la funzione generatrice riceve come parametro la dimensione della cisterna ed il prezzo al litro del carburante. Viene inizializzata poi una variabile interna cassa;
- ogni volta che viene chiamata la funzione generata essa riceve come parametro un numero pari agli euro da erogare. Se c’è disponibilità di carburante, eroga la quantità di litri richiesta e aggiornerà la disponibilità della cisterna e la cassa. Alla fine restituirà un oggetto contenente il numero di litri erogati, il valore totale presente in cassa e i litri rimasti nel serbatoio. Se invece non c’è disponibilità, la funzione restituirà 0 come litri erogati.
- Scrivere una pagina web che permetta di interagire col distributore (con una form che richiede una nuova erogazione e una tabella che mostra l’elenco di distribuzioni effettuate). I valori iniziali di prezzo e quantità della cisterna sono decisi dal programmatore.
- Implementare l’esercizio precedente usando sempre una funzione generatrice che crea un oggetto (coi metodi opportuni) e non una funzione.
- Implementare il medesimo esercizio usando le classi Javascript.
- Implementare l’esercizio precedente usando le funzioni costruttore.
- Scrivere una funzione generatrice che crea una funzione distributore di bibite che riceve come parametro un oggetto elenco_slot che ha questa struttura:
[{
nome: “Coca Cola”,
prezzo: 1,50,
quantità: 10
}, {
nome: “Acqua”,
prezzo: 1,
quantità: 8
}]- La funzione generatrice si salva l’elenco slot e inizializza una variabile cassa a 0.
- Quando si esegue la funzione (che riceve come parametro il numero di slot):
- se lo slot ha quantità > 0, la bibita sarà erogata e il distributore restituirà un oggetto contenente lo stato erogazione, lo stato di tutti gli slot, e la cassa attuale.
- se invece non c’è disponibilità, restituirà un oggetto identico ma con stato erogazione a false;
- Scrivere una pagina web che permetta di interagire col distributore (con una form che richiede una nuova erogazione e una tabella che mostra l’elenco di distribuzioni effettuate). I valori iniziali di prezzo e quantità del distributore sono decisi dal programmatore.
- Implementare l’esercizio precedente usando sempre una funzione generatrice che crea un oggetto (coi metodi opportuni) e non una funzione.
- Implementare il medesimo esercizio usando le classi Javascript.
- Implementare l’esercizio precedente usando le funzioni costruttore.
Promise
- Creare una promise che esegue la resolve dopo 3 secondi.
- Creare una promise ed al suo interno:
- Inserire tramite “push” i valori equivalenti le prime 4 lettere del proprio nome in un array. Ad esempio Abcc (1,2,3,3). Alla lettera A corrisponde 1, alla lettera B corrisponde 2, e così via.
- Effettuare un ciclo sull’array che estrae i quattro valori e li somma in una variabile “tot”.
- Se il valore risultato della sommatoria è pari restituire nel “resolve” una stringa “Pari”.
- Se il valore risultato della sommatoria è dispari restituire una stringa “Errore, valore dispari” nel “reject”.
- Scrivere una applicazione Javascript:
- Memorizzare un array di nomi [“Adele”, “Patrizio”, “Lucia”, “Carlo”, “Sara”, “Vincenzo”]
- Creare una promise ed al suo interno:
- A partire dall’array precedentemente creato produrre un array di studenti, ciascuno rappresentato da un oggetto dizionario. Ogni dizionario deve contenere due chiavi: “nome” (stringa) e “eta” (number, generato casualmente tra 14 e 19 con la funzione Math.random() )
- calcolare l’età media degli studenti
- se l’età media è uguale o supera il valore di 18 restituire nel “resolve” una stringa con risultato “media >= 18”)
- se l’età media è inferiore a 18 restituire nel “reject” una stringa con risultato “media < 18”.
- Nell’HTML è presente un div con id “result”. Scrivere una funzione render che riceve come parametro una stringa e la mostra nel div.
- Eseguire la promise sia in caso di resolve che di reject la funzione render.