docUsare il seguente HTML per i primi tre esercizi (che, si noti, al
download 
Reclamo Transcript
Usare il seguente HTML per i primi tre esercizi (che, si noti, al
HTML Usare il seguente HTML per i primi tre esercizi (che, si noti, al momento restituisceunerroreJavaScript): <!DOCTYPE html> <html> <head> <title>Prove Javascript</title> <script type="text/javascript"> </script> </head> <body> <h1>Prove Javascript</h1> <p id="para1">Un paragrafo di prova.</p> <button type="button" onclick="funzione()">Clicca qui</button> </body> </html> Esercizio1 Utilizzando il documento HTML specificato sopra, e senza usare jQuery, fare in modo che, facendo click sul pulsante “Clicca qui”, compaia una finestra di alert conscritto“HelloWorld”. Esercizio2 UtilizzandoildocumentoHTMLspecificatosopra,esenzausarejQuery,farein modo che, facendo click sul pulsante “Clicca qui”, si chieda all’utente di specificareunastringa(siguardilafunzione prompt()),esicambiilcontenuto delparagrafo”para1”conlastringacompostada“Tuhaiscrittoche”equanto fornito dall’utente. Si guardino al proposito le proprietà getElementById dell’oggettodocumenteinnerHTMLdell’oggettoNode. Esercizio3 Utilizzando il documento HTML specificato sopra, e senza usare jQuery, si aggiungano due campi numerici e si faccia in modo che, facendo click sul pulsante “Clicca qui”, si raccolgano i valori dei due campi (proprietà value dell’oggetto Node),lisisommiesimettailrisultatonelparagrafo”para1”.Atal propositopuòessereutilelafunzioneparseInt. Esercizio4 SiscarichisulpropriospaziowebildocumentoJSONdisponibileall’indirizzo • http://www.fabiovitali.it/TW16/auto.json UtilizzandoildocumentoHTMLspecificatosopra,eusandojQuery,sicarichivia Ajax la propria copia del file JSON e se ne visualizzi il contenuto sotto forma tabellareneldivdiundocumentoHTML(sipuòusareBootstrap). Facoltativo: si utilizzi un widget di data grid come http://www.jquerybootgrid.com/perottenereunavisualizzazionesofisticatadellatabellaconfiltri, ordinamentieflessibilitànellastrutturazionedellecolonne. Esercizio5 CreareuncostruttoreperoggettiAutomobilechehacomeparametriunmodello (unastringa),unafotografia(unURL)eunprezzo(unnumero).Automobileha anche una proprietà leggibile e scrivibile, inizialmente vuota: il codice (una stringa). L’oggettometteadisposizioneunmetodo: • mostra(), che restituisce un frammento HTML che espone le proprietà dell’automobile. Creare con Bootstrap 1 una semplice struttura HTML a due colonne, che comprendanellacolonnaasinistraiseguentibottoni: • “Crea automobile”, che mostra un modale Ok/Cancella che contiene un formconcampipermodello,urldellafotografiaeprezzogiornaliero,ein seguitoall’Okcreiun’istanzadiAutomobileevengaaggiuntoadunarray globaleautomobili. • “Mostra Stato”, che cancella un apposito div della colonna di destra e vi pone lo stato attuale dell’array automobili chiamando il metodo mostra() di ciascun elemento e mettendo dentro al div suddetto i frammentiHTMLcorrispondenti. 1 Siaggiungailseguentecodicea<head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css "> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s cript> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">< /script> Esercizio6 Sullabasedell’esercizioprecedentecrearealtriduecostruttoriperiseguentitipi dioggetti: • Autonoleggio:èunsingoletto(singleton),ovverounoggettogarantitoin copiaunica.L’autonoleggiohatreproprietàinaccessibili: • il parco macchine, che è una lista di istanze di Automobili, inizialmentevuota • il parco clienti, che è una lista di istanze di Clienti, inizialmente vuota • ilbudget,cheèunnumero. equattrometodi: • mostra(),chechiamaiterativamenteilmetodomostra()dituttele automobilidelparcomacchineedituttiiclientidelparcoclienti,e in più crea un frammento HTML per il budget, e restituisce un frammentoHTMLdituttoquanto. • acquista(Automobile), che inserisce nel parco macchine una Automobileassegnandoleuncodice; • accogli(Cliente),cheinseriscenelparcoclientiunCliente; • noleggia(codice, prezzo), che controlla se l’Automobile con il codice specificato è nel parco macchine e se prezzo è uguale al prezzo giornaliero di quella Automobile, restituendo un errore se ci sono problemi, altrimenti restituisce l’Automobile togliendola dalparcomacchineeaumentandoilbudgetdelprezzospecificato. • restituisci(Automobile), che re-inserisce nel parco macchine l’Automobilepassatacomeparametro. • Cliente: ha come parametri un nome (una stringa) e un portafoglio (un numero). Ha una proprietà inaccessibile, possesso, che può contenere al massimounaAutomobileedèinizialmentevuota.Haiseguentemetodi: • mostra(), che restituisce un frammento HTML che espone le proprietà del Cliente; l’HTML contiene un bottone associato al metodonoleggia()eunoassociatoalmetodorestituisci(). • noleggia(codice,costo),cheverificachenoncisianoautomobiliin possesso, e se è così chiama noleggia() dell’Autosalone con i parametripassati,eincasodisuccessotogliecostodalportafoglio eaggiungel’automobilenellaproprietàpossesso. • restituisci(),cheverificachecisiaun’automobileinpossessoese cosìchiamarestituisci()dell’Autosaloneetogliel’automobiledalla proprietàpossesso. Convertire dalla struttura HTML precedente il bottone “Crea automobile” in “Acquista automobile”, che oltre a mostrare il modale Ok/Cancella, crea un’istanzadiAutomobileechiamailmetodoacquista()dell’Autonoleggio. • Convertire il bottone “Mostra Stato”, che oltre a cancellare il div dell’interfaccia, vi pone lo stato attuale dell’autonoleggio chiamandone il metodomostra(). Siaggiungailseguentepulsante: • “AccogliCliente”,chemostraunmodaleOk/Cancellachecontieneunform con campi per nome e portafoglio, e in seguito all’Ok crei un’istanza di Clienteechiamiilmetodoaccogli()dell’Autonoleggio.
