Esercizi svolti di JavaScript

Alcuni esercizi che potrebbero essere utili.Gli esercizi sono per argomento e complessità.

Utilizzo delle istruzioni

  • Creare uno script che chieda il nome e il cognome all’utente prima che la pagina venga caricata.
  • Provare a chiamare una finestra di dialogo (di tipo alert) che contenga la scritta "Benvenuto"+ nome + cognome.
  • In fondo alla pagina deve essere scritto “Benvenuto"+ nome + cognome.
soluzione
-----
  • Creare una pagina che chieda all’utente di fornire la propria autorizzazione al trattamento dei dati.
  • Nel caso non sia data, scrivere "Autorizzazione non concessa".
  • Nel caso contrario scrivere "Autorizzazione concessa".
soluzione
-----
  • Creare una pagina in cui il sistema chiede all'utente il proprio nome
  • Il sistema verifica il nome e comunica all'utente se è un amministratore o meno
  • E' dato un array di nomi che hanno i diritti di amministratore
soluzione
-----
  • Chiedere tre colori in input all’utente: uno per il testo, uno per lo sfondo e uno per il titolo.
  • Chiedere alll’utente la dimensione del carattere di base (da 1 a 7).
  • Determinare la dimensione e le caratteristiche di H1 (+3, grassetto), H2 (+2) e H3 (+1, grassetto, corsivo) rispetto alle caratteristiche inserite dall’utente per il carattere.
  • Creare un testo in cui siano evidenti queste caratteristiche.
  • Controllare che il colore dello sfondo, quello del titolo e quello del testo siano diversi.
  • Nel caso due o più dei colori assegnati dall’utente siano uguali, devono essere presenti regole che determinino che 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.
soluzione

Versione semplificata dell'esercizio precedente.

Creare uno script JavaScript che:

  • chieda all'utente la dimensione del carattere e il colore per i tag p, body, h1
  • chieda all'utente il colore dello sfondo per il tab body
  • derivi automaticamente la dimensione del carattere dei tag h1 e h3 da quella del tag h1
  • generi un foglio di stile interno in base a queste specifiche
soluzione
-----

Utilizzo delle funzioni

  • Calcolare il totale della spesa (per un numero non definito di acquisti) utilizzando una funzione.
  • L’utente deve poter interrompere gli acquisti scrivendo 0.
soluzione
-----
  • Stampare la lista della spesa per un massimo di 3 acquisti.
  • L’utente deve poter interrompere gli acquisti scrivendo *.
soluzione
-----
  • Creare uno slide-show di immagini
soluzione
-----

Array e Oggetti

  • Definire dei prompt che richiedono le proprietà Processore, Hard Disk, Scheda Video, Ram di un computer.
  • Creare un oggetto computer con tali proprietà.
  • Stampare le proprietà dell’oggetto.
soluzione
-----
  • Chiedere all'utente dei numeri in input.
  • Salvare i numeri in un array.
  • Ordinare con le funzioni degli array.
soluzione
-----

 

Finestre e Frame

  • Creare una funzione che permetta ad un utente di tornare alle ultime 10 pagine che ha visitato.
soluzione
-----
  • Creare una semplice pagina con un layout a tabella, con la larghezza della tabella impostata tramite foglio di stile.
  • Creare una funzione che imposti la larghezza della tabella pari al 95% della risoluzione.
soluzione
-----
  • Creare una semplice pagina con un layout a tabella, con la larghezza della tabella impostata tramite foglio di stile.
  • Creare una funzione che imposti la larghezza della tabella pari al 95% dello spazio disponibile.
soluzione
-----
  • Creare una semplice pagina con un layout a tabella, a due colonne.
  • Permettere all'utente di nascondere la colonna di destra (con un nuovo caricamento della pagina e la lettura de
soluzione
-----

Dom

  • Creare una funzione caricata in avvio (onLoad su body) che cambi il colore di sfondo ongli 15 secondi (window.setTimeout(comando,millisecondi);
  • Il colore di sfondo (document.bgColor) viene preso da un array.
  • Quando tutto l’array è stato visitato, ricomincia.
  • Inserire due bottoni, uno per fermare e l’altro per continuare l’esecuzione (onClick).
soluzione
-----
  • Stampare le proprietà dell’oggetto navigator (window.navigator).
soluzione
-----
  • Fare una tabella in una pagina che permetta di impostare un bookmark a seconda del browser.
  • La proprietà document.title contiene il titolo della pagina.
  • Per explorer: window.external.AddFavorite(bookmarkurl,bookmarktitle).
  • Per netscape: testo che dice "Premere CTRL+D per salvare la pagina nei segnalibri".
soluzione
-----
  • Cambiare il colore di un testo non in un link, ne in un pulsante di un form passando il mouse sopra un elemento sensibile.
  • Utilizzare i fogli di stile.
  • Per risolvere considerare il fatto che tramite il dom di javascript è possibile accedere alle proprità di qualunque elemento con un nome della pagina tramite la sintassi nomeelemento.proprietà = valore (in questo caso nomeelemento.className=nomeclasse.
soluzione
-----
  • Cambiare il colore di un testo in un div passando il mouse sopra l'elemento stesso.
  • Utilizzare i fogli di stile.
  • Per risolvere considerare il fatto che tramite il dom di javascript ogni elemento può accedere alle proprie proprietà tramite la parola chiave this.
soluzione
-----