Esercitazione JavaScript #1

Esercitazione JavaScript #1
Istruzioni
Creare un nuovo progetto HTML così composto:
Pagina nomecognome.html
(alicepavarani.html)
Deve contenere un link ad ognuna delle pagine degli esercizi (verranno valutati solo gli esercizi linkati).
Una pagina per ogni esercizio: es#.html (es1.html, es2.html, …)
Deve contenere solo lo script dell’esercizio proposto e le eventuali altre istruzioni necessarie per eseguirlo.
Realizzare i seguenti script in JavaScript
1. Creare la funzione messaggio che richiede come parametro una stringa di testo e fa comparire un
alert avente come messaggio il testo passato. Richiamare la funzione due volte nel codice con un
messaggio di benvenuto e uno di arrivederci.
2. Creare uno script che richieda di immettere (usare prompt) prima l’anno attuale, poi il tuo anno di
nascita e, dopo aver fatto il calcolo, scrivere sulla pagina l’età calcolata.
Array
3. Creare uno script in cui è presente un array di 10 numeri (non ordinati) e stampare: l’array, l’array
al contrario, l’array ordinato in senso crescente e ordinato in senso decrescente (usare la testa!).
Non usare mille cicli, i cicli al contrario o altre stregonerie: sfruttare i metodi degli array!
4. Creare uno script in cui è presente un array (chiamato con il nome di una regione italiana a scelta)
contenente tutte le sue province e creare una funzione che stampi tutte le province sulla pagina.
NB: Non si possono scegliere le regioni con meno di 3 province.
a. Stampare le province in ordine alfabetico http://www.w3schools.com/jsref/jsref_sort.asp
b. Stampare il numero di province
5. Creare uno script in cui è presente un array contenente il vostro orario scolastico settimanale e una
funzione che lo stampi sulla pagina.
a. Stampare l’array sfruttando il metodo join http://www.w3schools.com/jsref/jsref_join.asp
b. Fare in modo che la stampa sulla pagina risulti formattata (es. giorno della settimana in
<h3> e materie come <p>)
Eventi del mouse
6. A partire da un link nella pagina (link a quello che vuoi!), realizzare uno script che faccia comparire
un alert diverso nei quattro seguenti casi: al passaggio del mouse sopra al link, all’allontanamento
del mouse dal link, al click del mouse sul link, al click con il tasto destro sul link. Il messaggio
visualizzato è arbitrario. Utilizzare una funzione messaggio tipo quella dell’esercizio 1.
7. A partire da un bottone nella pagina, creare uno script che al click del mouse sul bottone faccia
cambiare il colore dello sfondo alla pagina (con un colore a scelta, es. da bianco diventa blu).
http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
Facoltativi
8. In modo simile all’esercizio 7 inserire nella pagina web una tabella (2x2) in cui in ogni cella compare
il nome di un colore e far sì che passando col mouse all’interno della cella il colore dello sfondo
cambi (in base al colore scritto nella cella). http://www.w3schools.com/js/js_switch.asp
a. Sostituire il nome del colore colorando lo sfondo di ogni cella con il colore scelto (es.
anziché scrivere “rosso”, colorare la cella di rosso)
Note
Per ogni esercizio può essere necessario creare più di uno script all’interno della pagina (anche se magari
nel testo c’è scritto creare uno script). Usa tutto quello che ti serve!
I sottoesercizi, dove presenti, possono essere visti come “versioni avanzate” degli esercizi principali. Potete
decidere di creare un file anche per ogni sottoesercizio (es3.html, es3a.hmtl, es3b.html) oppure di
consegnare direttamente un unico file che sia la versione dell’esercizio completa di tutti i punti (es3.html).
Nel caso scegliate la prima opzione ovviamente nella pagina iniziale dovranno essere presenti anche i link
alle pagine dei sottoesercizi.