Studia grazie alle numerose risorse presenti su Docsity
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity
Trova i documenti specifici per gli esami della tua università
Preparati con lezioni e prove svolte basate sui programmi universitari!
Rispondi a reali domande d’esame e scopri la tua preparazione
Riassumi i tuoi documenti, fagli domande, convertili in quiz e mappe concettuali
Studia con prove svolte, tesine e consigli utili
Togliti ogni dubbio leggendo le risposte alle domande fatte da altri studenti come te
Esplora i documenti più scaricati per gli argomenti di studio più popolari
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Esercizi pratici per imparare a utilizzare javascript. Comprende istruzioni per creare pagine web interattive con bottoni, eventi onmouseover, onload, onchange, e funzioni per generare numeri casuali, cambiare immagini, disegnare su una tabella e animare elementi. Le istruzzioni sono dettagliate e illustrate con codice html e javascript.
Tipologia: Esercizi
1 / 12
Questa pagina non è visibile nell’anteprima
Non perderti parti importanti!
Negli esercizi che seguono il codice JavaScript è stato in parte o totalmente scritto da me. Manca però la pagina html, nella quale il codice deve essere inserito e che costituisce l’interfaccia fra il programma in JS e l’utente (colui che usa il programma).
La pagina deve essere realizzata usando il linguaggio HTML e i fogli stile, come imparato lo scorso anno.
Sfruttando le potenzialità del JS proveremo a realizzare una pagina di scherzo. Per prima cosa realizzate una pagina con un bottone fatta così:
Associate al bottone l’evento onMouseOver ed eseguite in risposta all’evento la seguente funzione:
function Scherzo() { var STOP = document.getElementById("STOP"); var x = Math.floor(Math.random() * 500); var y = Math.floor(Math.random() * 500); STOP.style.position = "absolute"; STOP.style.top = x + "px"; STOP.style.left = y + "px"; }
Creare una pagina per il gioco di Indovina un numero:
All’avvio il programma genera un numero casuale compreso fra 0 e 100. Il giocatore deve indovinarlo scrivendo il proprio tentativo e premendo il tasto Controlla. Il programma dice al giocatore se il tentativo fatto è più piccolo o più grande del numero da indovinare.
Il codice JS da usare è il seguente:
function controlla() { // You can store references to the value and the // guesses textarea in local function variables. var tentativo = document.getElementById("tentativo").value; var conto = document.getElementById("conteggio").value; conto = Number(conto) + 1; document.getElementById("conteggio").value = conto;
// First, if the tentativo is the same, just show the answer. // Append onto the textarea the result. if (tentativo == da_indovinare) { alert("Indovinato!") ; genera(); } else if (tentativo > da_indovinare) { alert("Troppo alto"); } else { alert("Troppo basso"); } }
// Randomly generate a number function genera() {
da_indovinare = Math.floor(Math.random()*100); document.getElementById("conteggio").value = 0; alert("Generato numero fra 0 e 100"); document.getElementById("tentativo").focus(); }
La funzione genera() viene chiamata al caricamento della pagina (evento onLoad sull’elemento body). La funzione controlla() invece è associata al click sul bottone Controlla.
ESERCIZIO QUATTRO: Eadweard Muybridge
Eadweard Muybridge fu un fotografo inglese dell’800, pioniere nello studio del movimento e delle animazioni. Famose sono le sue serie fotografiche di animali e persone in movimento:
Vogliamo realizzare una pagina hml in cui vengono visualizzati i diversi fotogrammi di una delle serie di Muybridge. Ogni fotogramma corrisponde a una immagine separata e tutte le immagini
devono essere salvate nella stessa cartella e numerate progressivamente (es. img1.jpg, img2,jpg eccetera). Scegliete su Internet una serie di Muybridge e separate i singoli fotogrammi salvando ciascuno in un file separato e numerato come spiegato sopra (usare Paint o un altro programma di grafica, se necessario, per ritagliare i fotogrammi).
All’inizio al centro della pagina (usate il posizionamento con i fogli stile per ottenere una corretta centratura) visualizzate il primo fotogramma della serie. Facendo click sull’immagine, viene visualizzato il fotogramma successivo e così via ad ogni click. Dopo l’ultimo fotogramma, la visualizzazione ricomincia dal primo.
Il codice da usare è il seguente:
Lo script qui sopra si basa su 4 immagine numerate da 1 a 4. Se il numero di immagini usate è diverso, cambiate i valori.
Disegnare o procurarsi tre immagini quadrate di dimensioni uguali. Una delle tre immagini dev’essere un quadrato bianco vuoto, una deve contenere un cerchio e un’altra una croce.
Creare una pagina html con una tabella 3 x 3 e in ogni cella della tabella mettere l’immagine col quadrato bianco vuoto.
Associate una funzione all’evento onclick su ogni immagine contenuta nella tabella (usate la parola chiave this per indicare l’immagine corrente).
Scrivete una funzione associata all’evento onclick che cambia l’immagine con quella del cerchio o con quella della croce (alternativamente: la prima volta che si fa click il cerchio, la seconda volta la croce e così via).
ESERCIZIO 6.
Migliorate il programma in modo tale che, facendo click su una casella non vuota, non venga sostituito il simbolo presente.
Per verificare se una cella è vuota, la cosa più semplice è testare con un IF se l’immagine corrispondente è quella del quadrato vuoto.
A tale scopo, si può usare document.getElementById per recuperate il valore dell’attributo src dell’immagine su cui si è fatto click.
Tuttavia, in JS, quando leggo l’attributo src di un’immagine, non ottengo solo il nome dell’immagine, ma l’intero percorso di essa sul disco.
Supponendo che l’immagine abbia un id=”img1”, le istruzioni da usare per estrarre il nome dell’immagine dal valore di src sono le seguenti:
var fullPath = document.getElementById("img1").src; var filename = fullPath.replace(/^.*[\/]/, '');
Si vuole realizzare una pagina con un form e due selettori mediante i quali è possibile scegliere i colori del testo e dello sfondo:
Usare due eventi onchange associati ai due elementi select del form. Nelle corrispondenti funzioni usare gli stili per cambiare colore dello sfondo e del testo dell’elemento body, come per esempio:
document.getElementById("pagina").style.backgroundColor = document.getElementById("selettore_sfondo").value;
Costruite una pagina html con un form, un selettore e un paragrafo di testo:
Cambiando il segno zodiacale scelto col selettore, cambia la frase visualizzata nel paragrafo sotto la scritta OROSCOPO. Usare l’evento onchange e una struttura di selezione di questo tipo:
if (segno == "niente" ) document.getElementById("paragrafo").innerHTML ="Nessun segno selezionato"; else if (segno == "ariete") document.getElementById("paragrafo").innerHTML ="bla bla bla "; else if (segno == "toro") document.getElementById("paragrafo").innerHTML ="bla bla bla"; ….
Sostituire i bla bla con previsioni più o meno catastrofiche a piacere.
Ecco il codice per animare un elemento div con id uguale a “content”:
var div ; var msec = 30; var idTO ; var pos=0;
function init() { div = document.getElementById('content'); //DIV da animare div.style.left = pos + 'px'; //Punto di partenza dell'animazione animate(); //Chiamata alla funzione che anima il div }
function animate() { pos=pos+1;//Sposta il div verso destra di un pixel alla volta div.style.left = pos + 'px'; idTO = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi }
Create in una pagina html un elemento div con id = “content” e formattatelo col seguente stile:
#content { position:absolute; left:10px; top:10px; width:300px; background:#336699; border:1px solid #003366; padding:5px; color:#FFFFFF; }
Applicate l’evento onload sull’elemento body e associategli la funzione init()
Aggiungete un pulsante alla pagina che permette di fermare (se premuto una volta) e riavviare (se premuto due volte) l’animazione. Per fermare l’animazione usate la seguente funzione:
function stopAnimate() { clearTimeout(idTO);//Cancella l'animazione avviata da setTimeout }
