Esercizi JavaScript
-
Scrivere uno script che chieda all'utente di fornire la propria autorizzazione al
trattamento dei dati personali. Nel caso non sia data, stampare "Autorizzazione
non concessa". Nel caso contrario stampare "Autorizzazione concessa".
-
Scrivere uno script che stampi il fattoriale dei numeri da 1 a 9. L'output deve
essere organizzato per righe.
-
Scrivere uno script che stampi il fattoriale di un numero ricevuto in
input (metodo prompt) dall'utente. Lo script deve verificare che il numero
si compreso tra 1 e 15, in caso contrario deve segnalare l'errore all'utente.
-
Scrivere uno script che stampi la tabellina del 7. L'output deve
essere organizzato per righe.
-
Scrivere uno script che stampi la tabellina di un numero, compreso tra 1 e 10,
ricevuto in input dall'utente.
-
Scrivere uno script che stampi la Tavola Pitagorica. Il risultato deve essere presentato
in una tabella.
-
Supponendo di avere una pagina HTML che mostra all'utente i risultati del
Campionato Mondiale di Pallastrada
Scrivere uno script che chieda il nome ed il cognome di un utente prima che la
pagina venga visualizzata e saluti l'utente con una finestra di dialogo (metodo
alert). In fondo alla pagina relativa alla classifica deve essere scritto
"Ciao Nome Cognome ci rivediamo fra quattro anni" (Nome e Cognome
sono quelli dati in input dall'utente).
-
Scrivere uno script che proponga all'utente una lista di siti numerati progressivamente;
chieda all'utente di scegliere il sito che vuole visitare; apra la pagina del sito solo
se l'utente ha scelto un numero tra quelli proposti. Per caricare un documento nella
finestra del browser usare location.href = str; dove, str è una
stringa contenente un URL (assoluta o relativa).
-
Scrivere uno script che chieda all'utente tre colori in input: uno per il
testo, uno per lo sfondo e uno per i titoli. Lo script deve chiedere all'utente
anche la dimensione del carattere di base (da 1 a 7). Creare un documento in cui siano
evidenti queste caratteristiche. (Suggerimento, creare con JavaScript
delle regole CSS).
Parte aggiuntiva
Lo script deve essere in grado di determinare la dimensione e le caratteristiche di
H1, H2 ed H3 rispetto alle caratteristiche inserite dall'utente per il carattere di
base.
- H1: 3 volte il testo base ed in grassetto
- H2: 1 volte il testo base
- H3: 1 volta il testo base in grassetto ed in corsivo
Controllare che il colore dello sfondo, quello del titolo e quello del testo siano
diversi. Nel caso due o più colori assegnati dall'utente siano uguali, devono
essere presenti delle regole che determinino quale colore devono assumere titolo,
testo e sfondo. Nel caso l'utente inserisca al posto dei tre colori il testo "*" deve
essere caricato un foglio di stile esterno.
-
Scrivere uno script che chieda una serie di numeri all'utente.
Si interrompa quando l'utente inserisce al posto di un numero la parola chiave
"end". Interagisce con l'utente nel caso abbia inserito dei valori non validi.
Chieda conferma prima di calcolare la media dei numeri introdotti. Stampi a
video il risultato in una tabella.
-
Scrivere uno script che proponga all'utente una lista di siti numerati
progressivamente; chieda all'utente di scegliere il sito che vuole visitare;
apra la pagina del sito se l'utente ha scelto un numero tra quelli proposti.
Se l'utente immette un numero non contenuto nell'elenco, lo script deve fornire
all'utente la possibilità di immettere direttamente un indirizzo attraverso
una finestra di prompt. Proporre come scelta di default il valore della prima url
della lista.
-
Scrivere una funzione QuadratoDiAsterischi che mostra un quadrato riempito di
asterischi il cui lato è specificato dal suo parametro in input. Ad esempio
QuadratoDiAsterischi(4) mostra
****
****
****
****
Testare la funzione inserendo la sua definizione in un documento HTML
contenente uno script che chiede all'utente di immettere un valore e visualizza
il risultato dell'invocazione della funzione sul valore immesso.
-
Scrivere uno script che chieda all'utente di inserire un numero per volta e lo passi
ad una funzione pari che restituisce true se il numero è false altrimenti.
La funzione pari deve verificare che il parametro ricevuto sia un parametro
numerico; in caso non lo sia deve segnalare il problema all'utente. Lo script deve
terminare quando l'utente digita "fine" e stampare il numero di elementi pari che
l'utente ha inserito.
-
Implementare la funzione celsius che restituisce l'equivalente Celsius di una
temperatura Fahrenheit usando la formula
C=5.0/9.0 * (F -32)
Implementare la funzione fahrenheit che restituisce l'equivalente Fahrenheit di una
temperatura Celsius usando la formula
F=9.0/5.0 * C +32
Le funzioni devono verificare se il parametro immesso è di tipo numerico.
Testare le funzioni inserendo le loro definizioni in un documento HTML
contenente uno script che chiede all'utente di immettere un valore e visualizza
il risultato dell'invocazione della funzione sul valore immesso.
-
Scrivere una funzione potenza(base,esponente) che calcoli il valore
baseesponente.
-
Scrivere una funzione calcola che preso come argomento num restituisca:
- il fattoriale di num se il num è compreso tra 1 e 10,
estremi inclusi;
- il valore scritto in lettere se il numero è compreso tra 11 e 15,
estremi inclusi;
- il num-esimo numero di Fibonacci se il numero è compreso tra 16 e 20,
estremi inclusi;
- il valore del quadrato del numero se il numero è compreso tra 21 e 30, estremi inclusi;
- la stringa "Volevo un valore tra 1 a 30!" se il numero non rientra nei casi precedenti.
La funzione deve verificare che sia stato passato un unico parametro e che
il parametro sia effettivamente un numero.
Testare la funzione inserendo la dichiarazione in un documento HTML
contenente uno script che chiede all'utente di immettere un valore e visualizza
il risultato dell'invocazione della funzione calcola sul valore immesso.
-
Scrivere una funzione JavaScipt che trovi la media dei numeri passati come
argomento. La funzione deve essere in grado di operare con un numero imprecisato
di argomenti e deve verificare che gli argomenti siano effettivamente dei numeri.
Scrivere inoltre una pagina HTML per testare la funzione.
-
La funzione Math.random() restituisce un numero casuale compreso tra 0 ed 1.
Scrivere una funzione JavaScipt lancioDado che simuli il lancio di un
dado. La funzione deve chiedere all'utente quante volte vuole lanciare il dado
e deve mostrare il risultato dei lanci in una tabella (15 lanci per riga). La
funzione non deve fare uso di altre funzioni matematiche predefinite.
-
Scrivere uno script che, usando il costruttore Function(), crei delle funzioni
dinamicamente. Lo script deve chiedere all'utente il numero di parametri della
funzione, il nome dei parametri ed il corpo della funzione. Dopo aver creato la
funzione, lo script deve chiedere all'utente di dare in input dei valori per i
parametri della funzione appena creata e deve restituire in output il suo valore.
(Come corpo della funzione, usate solo funzioni semplici tipo "x+y", "x*y+z", ...)
-
Scrivere una funzione costruisci che ricevuti in input un parametro restituisca:
la funzioneche calcola la somma di due valori se il parametro assume il valore "somma";
la funzione che calcola il prodotto di due valori se il parametro assume il valore "molt".
Le funzioni restituite devono verificare che i parametri ricevuti siano di tipo numerico.
Testare la funzione inserendo la sua definizione in un documento HTML contenente uno script
che chiede all'utente di immettere il valore del parametro della funzione e dei valori
da passare alla funzione creata, visualizza il risultato dell'invocazione della funzione
costruisci sui valori immessi.
-
Creare un oggetto persona contenente le proprietà: Nome, Cognome,
Età Residenza. Scrivere uno script che richieda all'utente dei valori per tali
proprietà, definisca un'istanza di un oggetto con tali proprietà e stampi,
in una tabella, il contentuo dell'oggetto. Modificare lo script precedente in modo che,
dopo aver inserito i valori per le sue proprietà, chieda all'utente il nome di
una proprietà da aggiungere all'istanza dell'oggetto ed un suo valore. Lo script,
alla fine, deve stampare nuovamente il contenuto dell'istanza dell'oggetto.
-
Creare un oggetto studente derivandolo dall'oggetto persona definito
nell'esercizio precedente. Testare l'oggetto creato inserendo la sua definizione in
un documento HTML contenente uno script che chiede all'utente di immettere i valori
delle proprietà dell'oggetto studente e visualizzi il contentuto
dell'istanza dell'oggetto creato.
-
Implementare una funzione search(x,a) che implementa la ricerca binaria dell'elemento
x nell'array a. Modificare opportunamente la funzione search in
modo che possa essere aggiunta come prototipo dell'oggetto di tipo Array. (Se non vi
ricordate come la ricerca binaria opera potete implementare la ricerca lineare).
-
Scrivere uno script che chieda all'utente una parola in italiano la traduce in inglese.
Lo scripr avrà un mini-vocabolario interno rappresentato da un array. Se non è
nota la traduzione del termine lo script deve chiedere all'utente se vuole aggiungere il
nuovo termine, con la relativa traduzione al vocabolario.
-
Scrivere uno script che chieda all'utente di inserire in input un elenco di numeri
(la fine dell'elenco è indicata con "end") e li inserisce in un array dopo aver
controllato che effettivamente l'input dell'utente è di tipo numerico. Lo script
deve spampare l'array dei numeri ricevuti in input ordinare l'array e stamparlo nuovamente.
(aggiungere una funzione stampa all'oggetto di tipo Array).
-
Scrivere uno script che:
- Chieda all'utente di immettere un testo;
- Costruisca un array formato da tutte le parole componenti il testo immesso dall'utente;
- Ordini gli elementi dell'array in ordine alfabetico decrescente;
- Visualizzi la lunghezza e gli elementi dell'array;
- Chieda un indice i all'utente;
- Visualizzi, se esistono, gli elementi alle posizioni i, i+1 e i+2;
Cosa succede se invece di inserire una frase viene premuto il pulsante annulla?
Nel caso venga segnalato un errore fare in modo di prevenirlo modificando
opportunamente il codice.
-
Scrivere uno script per valutare quanto "casuali" siano i numeri generati
attraverso Math.random(). A questo scopo, lo script deve:
- chiedere all'utente un valore n compreso tra 1000 e 10000 (indica il numero
di volte che deve essere generato un numero casuale);
- chiedere all'utente un valore p compreso tra 2 e 20 per definire l'intervallo in cui i numeri casuali
devono essere scelti (tra 1 e p)
- definire un array di lunghezza p+1;
- inizializzare tutti gli elementi dell'array a 0: l'elemento in posizione i verrà
usato per contare il numero di volte che è stato generato il valore i;
- ripetere n volte la generazione di un numero casuale compreso tra 1 e p sfruttando,
ad ogni iterazione, la funzione casuale genera vista a lezione;
- incrementare, ad ogni iterazione, il valore dell'elemento in posizione x dell'array
se il valore casuale generato è pari ad x;
- stampare, dopo l'ultima iterazione, i valori contenuti nell'array e la loro media.
-
Scrivere uno script che:
- Chieda all'utente di inserire una serie di squadre (es. serie A del campionato di calcio),
usando il pulsante annulla per terminare l'immissione;
- Per ogni squadra, procedendo in ordine alfabetico, chieda il punteggio attuale
(assumendo che sia compreso tra 0 e 99);
- Sfrutti opportunamente i metodi sort e reverse per ordinare le squadre in base ai
punteggi e visualizzare la classifica attuale.
Consigli: usare un array per memorizzare i nomi; combinare opportunamente la stringa del
punteggio con quella del nome della squadra prima di usare il metodo sort.
-
Creare una pagina HTML contenente un elenco di link. Quando l'utente passa sopra (onmouseover)
un link mostrare un messaggio sulla barra di stato. Il messaggio deve essere diverso per
ogni link. Ricordarsi di restituire "return true" come ultima istruzione di onmouseover.
- Creare una funzione JavaScript che cambi il colore di sfondo
(document.bgcolor) ogni due secondi. La funzione deve essere mandata in esecuzione
dopo il caricamento della pagina (onload). Il colore di sfondo viene preso da un array.
Quando l'array è finito, si riparte dal primo elemento dell'array.
-
Modificare l'esercizio precedente in modo che il cambio di colore di sfondo viene
attivato con la pressione (onclick) di un bottone. Inserire un secondo bottone per
interrompere l'animazione.
-
Scrivere una pagina HTML contenente un banner. Il banner deve mostrare quattro immagini
in sequenza. Il tempo di permanenza di un'immagine sullo schermo deve cambiare a seconda
dell'immagine (servirsi di un array Tempi per la memorizzazione dei tempi di
permanenza espressi in millisecondi, se si mostra l'immagine i-esima invocare
setTimeout con il secondo argomento pari all'elemento (i+1)-esimo dell'array Tempi).
-
Scrivere una pagina HTML contenente tre fotografie. Cliccando su ogni foto deve aprirsi
una nuova finestra (senza barre di navigazione, menu, ...) contenente la versione ingrandita
dell'immagine ed un bottone per chiudere la finestra stessa. Se la finestra che mostra la
versione ingrandita dell'immagine è già aperta, non deve esserne aperta
una nuova, ma bisogna utilizzare per la visualizzazione quella esistente.
-
Creare una pagina HTML con almeno tre immagini diverse e aggiungere un pulsante
che ne scambi due, in modo casuale, ogni volta che viene premuto.
-
Modificare l'esercizio precedente in modo che ogni volta che il pulsante viene premuto
un'immagine scelta a caso viene ingrandita di 20 pixel in altezza e larghezza. Aggiungere
un secondo pulsante che se premuto ridimensioni un'immagine caso di 20 pixel, ad ogni
click viene scelto a caso anche se l'immagine deve essere ingrandita o rimpicciolita.
-
Creare un documento che memorizzi in un array almeno cinque immagini e che
visualizzi la prima di esse. Aggiungere un pulsante che ad ogni click sostituisca
l'immagine visualizzata con quella nella posizione seguente dell'array. (Se l'ultima
immagine è visualizzata ed il pulsante viene premuto, visualizzare di nuovo
la prima immagine).
-
Modificare l'esercizio precedente eliminando il bottone e facendo in modo che l'immagine
cambi ad ogni click del mouse su di essa.
-
Modificare l'esercizio precedente per fare in mondo che l'mmagine cambi ogni volta che
si sposta il cursore su di essa invece che ad ogni click.
-
Scrivere una funzione JavaScript che generi una tabella di 216 bottoni. Ad ogni bottone
deve essere associato uno dei safe-color (#XYZ con X,Y,Z appartenenti
all'insieme {00, 33, 66, 99, CC, FF}). Sul bottone deve essere presente il codice del
colore a cui è associato. Quando si clicca un bottone, il colore di sfondo deve
assumere il colore associato al bottone.
-
Creare un esempio di testo scorrevole in una casella di testo (la stringa da mostrare
è nella casella sarà funzione di un indice che viene incrementato di uno
ad intervalli regolari). Servirsi di CSS per eliminare il bordo della casella di testo.
Far partire lo scrolling cliccando su un bottone, usare un secondo bottone per interrompere
lo scrolling. Riuscite ad attivare/interrompere lo scrolling con un solo bottone?
-
Costruire una form contenente:
- un campo di input per una stringa di testo;
- delle checkbox per gli attributi big, bold, fixed, italics, strike e sub;
- una lista di selezione (menu a discesa) in cui scegliere tra i colori blue,
ed e green;
- una lista di selezione (menu a discesa) in cui scegliere una dimensione tra
i valori 1, 3, 5 e 7;
- un pulsante con la scritta "Mostra Testo".
Quando il pulsante viene premuto, bisogna sfruttare i metodi di formattazione HTML
disponibili per l'oggetto String per visualizzare in una nuova finestra
(window.open e Nomefinestra.document.write) il testo immesso dall'utente con la
formattazione selezionata negli altri campi.
-
Creare un documento che definisca una variabile di tipo Image, carichi in essa un'immagine
iniziale e la mostri sulla pagina. Aggiungere un campo di input per la selezione di un file
ed un pulsante che ad ogni click sostituisca l'immagine visualizzata con quella data
dal file selezionato (se non viene scelto il file il bottone non deve essere attivo).
-
Chiedere ad un utente le sue preferenze (tipo, colore di sfondo e colore di primo
piano) per la visualizzazione delle pagine HTML. Attraverso un cookie conservate
le sue preferenze. Testare il cookie creato: se l'utente ha settato delle preferenze
visualizzare la pagina secondo le preferenze dell'utente; altrimenti, utilizzare dei
colori di default per lo sfondo e il primo piano. Aggiungere alla pagina un bottone
che se premuto cancella il cookie.
-
Creare un test a risposte multiple. Il test deve prevedere una domanda per pagina.
Usare un cookie per memorizzare il punteggio cumulativo che deve essere mostrato
ad ogni pagina.
-
Considerato il seguente modulo:
- aggiungere un pulsante per il calcolo dei totali. Per ogni articolo nel modulo
bisogna verificare che sia stato immesso un valore compreso tra 0 e 20, in caso
di discordanza mostrare all'utente un messaggio di spiegazione.
- aggiungere un pulsante per l'azzeramento del modulo, chiedere conferma all'utente prima
di ripristinare ai valori di default i campi del modulo.
- aggiungere un pulsante di Help che apra una nuova finestra spiegando all'utente che cosa
deve fare per riempire il modulo, dire anche che i valori immessi devono essere compresi
tra 0 e 20; aggiugere un pulsante per chiudere la finestra.
- aggiungere una casella di input in cui l'utente inserisce la sua email per ricevere
conferma dell'ordine effettuato, controllare che quello che ha inserito l'utente
può corrispondere ad un indirizzo di email.
-
Considerato il modulo dell'esercizio precedente
- fare in modo che, per ogni articolo, ogni volta che la quantità viene aggiornata,
anche il Totale ed il Totale Ordine venga ricalcolato (usare il
gestore onchange nel tag di input relativo alla Quantità e attivare la funzione
che calcola i totali e li mostri nei relativi campi del modulo;
- fare in modo che soltanto i campi quantità siano modificabili dall'utente. I
campi contenenti i totali non devono essere modificati dall'utente
(usare il gestore onfocus in tutti i campi contenenti i totali per intercettare ogni
tentativo dell'utente di modificare il valore e attivare una funzione che assegni il
focus ad un elemento modificabile della form invocando il metodo focus() su
quell'elemento - se tentiamo di modificare il totale dello scanner a colori il focus
deve passare al campo quantità relativo allo scanner a colori [focus o select]);
-
Creare una pagina HTML contenente tre paragrafi colorati in nero. Quando il mouse passa
sopra il primo paragrafo esso deve diventare di colore rosso; se il mouse passa sopra il
secondo paragrafo il colore del testo deve diventare giallo, mentre il colore di sfondo
deve diventare verde; infine, se il mouse passa sopra l'ultimo paragrafo il testo e lo
sfondo devono assumere colori casuali ma differenti. Quando il mouse lascia il paragrafo
tutto deve tornare alla condizione originale. Riuscite a risolvere l'esercizio scrivendo
una sola funzione?
Creare una pagina HTML che contiene 3 blocchi di testo che si sovrappongono (DIV posizionati
in maniera assoluta all'interno di un DIV posizionato in maniera relativa) quando l'utente
clicca su una porzione visibile del testo allora il DIV relativo deve essere portato in
primo piano. Per aiutare l'utente contornare il testo con un bordo. (Usare opportunamente
il gestore onclick e la proprietà z-index).
-
Esercizi corso TSW matricole dispari