Utilizzare JavaScript con i web form
|
|
|
- Vanessa Ferrante
- 8 anni fa
- Visualizzazioni
Transcript
1 Capitolo 14 Utilizzare JavaScript con i web form Dopo aver letto questo capitolo, sarete in grado di: n n n n Comprendere come convalidare l input su un a web form utilizzando JavaScript. Lavorare con pulsanti di opzione, caselle di selezione e caselle di controllo, per ottenere i loro valori e impostare il loro stato. Fornisce un feedback basato sulla convalida, sia tramite una finestra di dialogo alert() sia all interno del documento. Comprendere i limiti della convalida dei form di JavaScript e riconoscere una convalida non riuscita. JavaScript e i web form JavaScript viene utilizzato con i web form da molto tempo, tipicamente per verificare velocemente che un utente abbia riempito correttamente i campi di un form prima di inviare il form al server, un processo chiamato convalida lato-client. Prima di JavaScript un browser doveva inviare il form e il suo contenuto al server per assicurarsi che tutti i campi richiesti fossero riempiti, un processo chiamato convalida lato-server. Importante Quando si utilizza JavaScript, occorre eseguire la convalida lato-server, nel caso un utente abbia disattivato JavaScript o stia facendo qualcosa di malevolo di proposito. Ricordate la funzione alert() che abbiamo esaminato nei capitoli precedenti, utilizzata per illustrare semplici esempi? È tornata. La funzione alert() è spesso utilizzata per fornire feedback all utente durante la convalida dei form, sebbene tecniche più recenti utilizzino il Document Object Model (DOM) per visualizzare un feedback più amichevole. Una pagina web con un form di base potrebbe essere simile a quella nella figura
2 276 Parte III Integrare JavaScript nella progettazione Figura 14.1 Un web form di base. Quando un utente invia questo form, il codice JavaScript in background controlla che la casella di testo Name sia stata riempita. Quando è riempita correttamente, per esempio con il nome Steve, la pagina mostra il nome inserito, come nella figura Figura 14.2 Quando il web form è riempito correttamente, il contenuto della casella di testo Name è mostrato in un saluto. Se un utente non inserisce dati nella casella di testo Name, lo script mostra una finestra di dialogo alert() indicante che il campo è richiesto, come si vede nella figura Figura 14.3 Il form mostra un avviso quando la casella di testo Name è vuota.
3 Capitolo 14 Utilizzare JavaScript con i web form 277 Il codice che fa tutto questo è riportato di seguito. Potete trovare questo codice in formvalid.htm fra i file di esempio. Il file include l Hypertext Markup Language (HTML) che segue: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>a Basic Example</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function formvalid(eventobj) { if (document.forms[0].textname.value.length == 0) { alert("name is required."); if (eventobj.preventdefault) { eventobj.preventdefault(); else { window.event.returnvalue = false; return false; else { alert("hello " + document.forms[0].textname.value); return true; </script> </head> <body> <p>a Basic Form Example</p> <form action="#"> <p>name <em>(required)</em>: <input id="textbox1" name="textname" type="text" /></p> <p><input id="submitbutton1" type="submit" /></p> <script type="text/javascript"> var formel = document.getelementsbytagname("form")[0]; EHandler.add(formEl,"submit", function(eventobj) { formvalid(eventobj); ); </script> </form> </body> </html> Il JavaScript all interno dell elemento <head> prima si collega allo script di gestione evento ehandler.js, che è stato sviluppato nel capitolo 11, Gli eventi di JavaScript e il browser. Quindi definisce una funzione chiamata formvalid() per elaborare l input del semplice form, come mostrato nel seguente codice: function formvalid(eventobj) { if (document.forms[0].textname.value.length == 0) { alert("name is required."); if (eventobj.preventdefault) { eventobj.preventdefault(); else { window.event.returnvalue = false; return false;
![dtd"> <html> <head> <title>a Basic Example</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function formvalid(eventobj) { if (document.forms[0].](/docs-images/51/18054800/images/page_3.jpg "textname.value.length == 0) { alert(\"name is required.\"); if (eventobj.preventdefault) { eventobj.preventdefault(); else { window.event.returnvalue = false; return false; else { alert(\"hello \" + document.")
4 278 Parte III Integrare JavaScript nella progettazione else { alert("hello " + document.forms[0].textname.value); return true; All interno della funzione formvalid() un test condizionale if utilizza l array document. forms[]. Esaminando il primo valore indice (0) di quell array, il codice trova l unico form su questa pagina web. Il condizionale testa se la lunghezza della proprietà textname.value sul form è 0. Se è così, lo script indica l errore utilizzando una finestra di dialogo alert(). In caso contrario mostra la proprietà textname.value. Il valore restituito è importante. Quando i gestori di evento submit o click sono chiamati e restituiscono false, il browser arresta il processo di invio del form. Questo è il motivo per cui restituire false è importante quando la convalida fallisce. Se non viene restituito false, l azione predefinita è continuare e inviare il form. Potete arrestare l azione predefinita in molti browser chiamando il metodo preventdefault(). Il metodo preventdefault() tuttavia non è disponibile nelle versioni di Windows Internet Explorer precedenti la 9, perciò lo script esegue un test condizionale per vedere prima di tutto se il metodo preventdefault() è disponibile. Se è così, lo script chiama preventdefault(), altrimenti imposta la proprietà returnvalue dell oggetto window.event su false per tenere conto di Internet Explorer. La porzione successiva di JavaScript, che appare nell elemento HTML <body>, aggiunge l evento submit al form utilizzando lo script di gestione evento EHandler: var formel = document.getelementsbytagname("form")[0]; EHandler.add(formEl,"submit", function(eventobj) { formvalid(eventobj); ); Notate che per recuperare il form, la funzione formvalid() utilizza il primo valore indice dell elenco document.forms[], mentre la definizione var formel utilizza il metodo getelementsbytagname. Entrambi questi approcci funzionano bene quando un solo form è presente sulla pagina. Vedrete anche di frequente script che accedono al form tramite il suo nome, come mostrato nella sezione successiva. Ottenere i dati dei form Per poter fornire un feedback basato sui dati del form, dovete accedere a esso. L esempio precedente mostra come accedere ai dati del form utilizzando l array document.forms[] e la funzione getelementsbytagname. Questa sezione illustra un modo differente per eseguire la stessa operazione, utilizzando la proprietà name del form anziché il suo indice. Come per altri elementi di una pagina HTML, potete impostare l attributo id per un elemento form. Ecco l esempio precedente con un attributo id: <form action="#" name="testform"> <p>name <em>(required)</em>: <input id="textbox1" name="textname" type="text" /></p> <p><input id="submitbutton1" type="submit" /></p> </form>
5 Capitolo 14 Utilizzare JavaScript con i web form 279 Potete quindi accedere al form utilizzando il suo name anziché il suo indice, come segue: document.forms["testform"] Utilizzare name è utile perché in alcuni casi potreste non conoscere il valore indice del form a cui volete accedere, il che a volte accade quando il codice lato-server o lato-client crea un form dinamicamente e dovete individuare (o meglio indovinare) il valore indice del particolare form di cui avete bisogno nel documento. Il modo più coerente per assicuravi di riuscire a ottenere un riferimento al valore indice è impostare l id del form e poi accedervi tramite quell id. Potete anche accedere al form direttamente in un modo non standard, attraverso l oggetto document, ma lo sconsiglio: document.testform Questo approccio diretto non funziona in modo coerente sui vari browser, e in ogni caso non richiede molto più sforzo digitarlo correttamente, come segue: document.forms["testform"] Lavorare con le informazioni dei form Potete accedere a tutti i singoli elementi dei web form tramite il DOM. Il metodo esatto per accedere a ogni elemento differisce a seconda del tipo di elemento. Per le caselle di testo e le caselle di selezione (chiamate anche a discesa), la proprietà value contiene il testo che il visitatore digita o seleziona. Utilizzerete un approccio in parte diverso da value per determinare lo stato dei pulsanti di opzione e delle caselle di controllo, come vedremo fra breve. Lavorare con le caselle di selezione Una casella di selezione contiene gruppi di opzioni. Ecco un esempio di HTML utilizzato per creare una casella di selezione (potete trovare questo codice anche in selectbox.txt fra i file di esempio). <form id="starform" action=""> Select A Constellation: <select name="startype" id="starselect"> <option selected="selected"> </option> <option value="aquila">aquila</option> <option value="centaurus">centaurus</option> <option value="canis Major">Canis Major</option> <option value="canis Minor">Canis Minor</option> <option value="corona Borealis">Corona Borealis</option> <option value="crux">crux</option> <option value="cygnus">cygnus</option> <option value="gemini">gemini</option> <option value="lyra">lyra</option> <option value="orion">orion</option> <option value="taurus">taurus</option>
6 280 Parte III Integrare JavaScript nella progettazione <option value="ursa Major">Ursa Major</option> <option value="ursa Minor">Ursa Minor</option> </select> </form> Questo codice genera una casella di selezione come quella mostrata nella figura Figura 14.4 Una casella di selezione basata sull esempio di HTML. Quando un utente seleziona un opzione, la proprietà value della casella di selezione è impostata al valore della particolare opzione scelta. Per questo esempio la casella di selezione denominata startype contiene nella sua proprietà value ciò che il visitatore seleziona. Potete accedere a questa proprietà come segue: document.forms["starform"].startype.value Per questo particolare esempio dovete collegare un gestore di evento all evento change della casella di selezione, cosa che potete fare con l aiuto dello script di gestione evento EHander sviluppato nel capitolo 11. L evento change attiva una funzione ogni volta che la selezione nella casella di selezione cambia, come quando l utente seleziona un opzione utilizzando il menu a discesa. La pagina associa l evento change alla casella <select> con l aiuto del codice nel listato 14.1, che è aggiunto nella sezione <body> della pagina web. Nota Non dimenticate di aggiungere il collegamento allo script EHandler nell elemento <head>. Consultate il capitolo 11 per ulteriori informazioni.
7 Capitolo 14 Utilizzare JavaScript con i web form 281 LISTaTO 14.1 Associare un evento change a un elemento <select> utilizzando lo script EHandler creato nel capitolo 11. <script type="text/javascript"> var selel = document.getelementbyid("starselect"); EHandler.add(selEl,"change", function() { displayvalue(); ); </script> Questo codice utilizza il metodo Ehandler.add() per aggiungere una funzione all evento change dell elemento <select>, che il codice poi recupera tramite l ID dell elemento <select>, ovvero starselect. In questo caso la funzione aggiunta all evento change è una funzione definita dall utente chiamata displayvalue(), mostrata nel listato LISTaTO 14.2 La funzione chiamata quando l evento change del form è attivato. function displayvalue(){ var selected = document.forms["starform"].startype.value; alert("you selected " + selected); Questa piccola porzione di JavaScript si limita a mostrare il valore selezionato nel menu a discesa. Scegliendo per esempio Ursa Minor nel menu a discesa, compare la finestra di dialogo alert() mostrata nella figura FIgura 14.5 Scelta di una costellazione in un form e invio di una finestra di dialogo alert(). Nota Potete trovare questo codice completo in sel.htm fra i file di esempio, nella cartella Chapter14. L HTML per la casella di selezione include un attributo denominato selected, che indica quale opzione è mostrata. L esempio seleziona un opzione vuota in modo che il valore iniziale della casella di selezione sia vuoto: <option selected="selected"> </option>
8 282 Parte III Integrare JavaScript nella progettazione È anche possibile selezionare un opzione utilizzando JavaScript e il DOM. Selezionare opzioni da programma è comune sui form che hanno più input, dove una scelta causa automaticamente la selezione di altre opzioni. Nell esercizio seguente creerete un web form che un produttore di pizza potrebbe utilizzare per prendere gli ordini. Il produttore offre soltanto alcune pizze speciali: una con verdure, una con carne e una in stile hawaiano con prosciutto e ananas. La società vorrebbe una pagina web con tre pulsanti per aiutare i pizzaioli a tenere traccia dei tipi di pizza ordinati. I pulsanti preselezionano i principali condimenti della pizza. Selezionare un opzione con JavaScript 1. Utilizzando Microsoft Visual Studio, Eclipse o un altro editor, modificate il file pizza. htm nella cartella Chapter14 dei file di esempio. 2. Nella pagina aggiungete il codice riportato di seguito in grassetto (potete trovare questo codice inpizza.txt fra i file di esempio): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>pizza</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function flip(pizzatype) { if (pizzatype.value == "Veggie Special") { document.forms["pizzaform"].topping.value = "veggies"; else if (pizzatype.value == "Meat Special") { document.forms["pizzaform"].topping.value = "meat"; else if (pizzatype.value == "Hawaiian") { document.forms["pizzaform"].topping.value = "hampineapple"; </script> </head> <body> <form id="pizzaform" action="#"> <p> <input id="vegbutton" type="button" name="veggiespecial" value="veggie Special"> <input id="meatbutton" type="button" name="meatspecial" value="meat Special"> <input id="hawbutton" type="button" name="hawaiian" value="hawaiian"> </p> Main Topping: <select name="topping"> <option value="cheese" selected="selected">cheese</option> <option value="veggies">veggies</option> <option value="meat">meat</option> <option value="hampineapple">ham & Pineapples</option> </select> </form> <script type="text/javascript">
9 var vegel = document.getelementbyid("vegbutton"); var meatel = document.getelementbyid("meatbutton"); var hawel = document.getelementbyid("hawbutton"); EHandler.add(vegEl,"click",function() { flip(vegel); ); EHandler.add(meatEl,"click",function() { flip(meatel); ); EHandler.add(hawEl,"click",function() { flip(hawel); ); </script> </body> </html> Capitolo 14 Utilizzare JavaScript con i web form Visualizzate la pagina in un browser web. Dovreste vedere una pagina come questa: 4. Scegliete uno dei pulsanti (notate che la casella di selezione per Main Topping cambia in base alla selezione). Il cuore dell esempio è la funzione flip(): function flip(pizzatype) { if (pizzatype.value == "Veggie Special") { document.forms["pizzaform"].topping.value = "veggies"; else if (pizzatype.value == "Meat Special") { document.forms["pizzaform"].topping.value = "meat"; else if (pizzatype.value == "Hawaiian") { document.forms["pizzaform"].topping.value = "hampineapple"; Questa funzione esamina il valore della variabile pizzatype che viene passato alla funzione quindi, utilizzando il condizionale, cambia di conseguenza il valore della casella di selezione chiamata topping. Anche questa volta lo script nella porzione <head> della pagina è collegato allo script di gestione evento EHandler e utilizza il suo metodo EHandler.add per associare gli eventi click ai pulsanti, esattamente come il codice che avete visto in questo e nei precedenti tre capitoli. var vegel = document.getelementbyid("vegbutton"); var meatel = document.getelementbyid("meatbutton"); var hawel = document.getelementbyid("hawbutton");
10 284 Parte III Integrare JavaScript nella progettazione EHandler.add(vegEl,"click",function() { flip(vegel); ); EHandler.add(meatEl,"click",function() { flip(meatel); ); EHandler.add(hawEl,"click",function() { flip(hawel); ); Questo esempio ha dimostrato come ottenere informazioni da un form e come impostare informazioni in un form. Il form ora non è molto attraente e le pizze offerte sono poche, tuttavia il nostro produttore ha sempre più successo, perciò negli esempi successivi di questo capitolo espanderemo il form. Lavorare con le caselle di controllo Nell esempio precedente abbiamo visto le caselle di selezione, e in precedenza in questo capitolo le caselle di testo. Esiste un altro tipo di caselle che permette agli utenti di selezionare più voci: sono le caselle di selezione. Lo scenario dell ordinazione delle pozze introdotto nella sezione precedente è un utile esempio per illustrare le caselle di controllo. Ricordate che, nel sistema di ordinazione pizze iniziale, quando veniva selezionato uno dei tre tipi di pizza, la casella di selezione Main Topping cambiava per riflettere l ingrediente principale. Sarebbe utile introdurre una maggiore flessibilità, come più tipi di pizza. La figura 14.6 mostra un nuovo form per la scelta degli ingredienti. Ore è possibile selezionare molti condimenti in una varietà di combinazioni. Figura 14.6 Il form di ordinazione modificato con l aggiunta di caselle di controllo.
11 Capitolo 14 Utilizzare JavaScript con i web form 285 Selezionando i vari ingredienti e facendo clic sul pulsante Prep Pizza compaiono sullo schermo i condimenti selezionati, come nella figura FIgura 14.7 Ordinazione di una pizza con il nuovo form e aggiunta di elementi tramite il DOM. Il codice per questa funzionalità è riportato nel listato 14.3 (potete trovare questo codice in listing14-3.htm fra i file di esempio). LISTaTO 14.3 Utilizzare caselle di controllo con il form di ordinazione. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>pizza</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function prepza() { var checkboxes = document.forms["pizzaform"].toppingcheck.length; var newelement = document.createelement("p"); newelement.setattribute("id","orderheading"); document.body.appendchild(newelement); newelement.appendchild(document.createtextnode("this pizza will have:")); for (var i = 0; i < checkboxes; i++) { if (document.forms["pizzaform"].toppingcheck[i].checked) {
12 286 Parte III Integrare JavaScript nella progettazione var newelement = document.createelement("p"); newelement.setattribute("id","newelement" + i); document.body.appendchild(newelement); newelement.appendchild(document.createtextnode( document.forms["pizzaform"].toppingcheck[i].value)); </script> </head> <body> <form id="pizzaform" action="#"> <p>toppings:</p> <input type="checkbox" id="topping1" value="sausage" name="toppingcheck">sausage<br> <input type="checkbox" id="topping2" value="pepperoni" name="toppingcheck">pepperoni<br> <input type="checkbox" id="topping3" value="ham" name="toppingcheck">ham<br> <input type="checkbox" id="topping4" value="green Peppers" name="toppingcheck">green Peppers<br> <input type="checkbox" id="topping5" value="mushrooms" name="toppingcheck">mushrooms<br> <input type="checkbox" id="topping6" value="onions" name="toppingcheck">onions<br> <input type="checkbox" id="topping7" value="pineapple" name="toppingcheck">pineapple<br> <p><input type="button" id="prepbtn" name="prepbtn" value="prep Pizza"></p> </form> <script type="text/javascript"> var prepbtn = document.getelementbyid("prepbtn"); EHandler.add(prepBtn,"click",function() { prepza(); ); </script> </body> </html> Il cuore della pagina è la funzione prepza(), che inizia raccogliendo il numero di caselle di controllo contenuto nel form pizzaform. Queste sono raggruppate utilizzando l attributo name toppingcheck, come segue: var checkboxes = document.forms["pizzaform"].toppingcheck.length; Dopo aver impostato un elemento <p> con un intestazione, lo script utilizza un loop for per ciclare sulle caselle di controllo. Ogni casella di controllo viene esaminata per vedere se la sua proprietà checked è impostata: if (document.forms["pizzaform"].toppingcheck[i].checked) {
13 Capitolo 14 Utilizzare JavaScript con i web form 287 Se la proprietà checked della casella di controllo è stata impostata, lo script crea un nuovo elemento <p> e lo inserisce nel documento. Il risultato è la pagina che avete visto nella figura 14.7 (avete visto esempi di come creare e accodare elementi nel capitolo 10, Il Document Object Model ). Tenete a mente questo esempio, perché in uno degli esercizi alla fine del capitolo vi chiederò di combinarlo con funzionalità che selezionano automaticamente gli ingredienti quando un utente preme un pulsante, come nell esempio della casella di selezione visto in precedenza. Il pulsante Prep Pizza ha un evento click associato tramite il metodo EHandler.add() del capitolo 11. Lavorare con i pulsanti di opzione Anche i pulsanti di opzione creano un gruppo di opzioni, ma a differenza delle caselle di controllo un solo pulsante di opzione può essere selezionato in un determinato momento. Nel contesto del nostro produttore di pizze, i clienti potrebbero utilizzare un pulsante di opzione per selezionare il tipo di pasta: sottile, spessa o normale. Poiché una pizza può avere un solo tipo di pasta, i pulsanti di opzione sono uno strumento adeguato per questa selezione. Aggiungendo pulsanti di opzione per la selezione del tipo di pasta, si ottiene una pagine simile a quella nella figura Figura 14.8 Aggiungere pulsanti di opzione per la selezione del tipo di pasta.
14 288 Parte III Integrare JavaScript nella progettazione L HTML che aggiunge questi pulsanti di opzione e una semplice tabella per contenerli si presenta come segue (potete trovare questo codice anche in radiobuttonhtml.txt fra i file di esempio): <table> <tr><td>toppings</td><td>crust</td></tr> <tr> <td><input type="checkbox" id="topping1" value="sausage" name="toppingcheck">sausage</td> <td><input type="radio" name="crust" value="regular" checked="checked" id="radio1">regular</td> </tr> <tr> <td><input type="checkbox" id="topping2" value="pepperoni" name="toppingcheck">pepperoni</td> <td><input type="radio" name="crust" value="deep Dish" id="radio2" />Deep Dish</td> </tr> <tr> <td><input type="checkbox" id="topping3" value="ham" name="toppingcheck">ham</td> <td><input type="radio" name="crust" value="thin" id="radio3">thin</td> </tr> <tr> <td><input type="checkbox" id="topping4" value="green Peppers" name="toppingcheck">green Peppers</td> <td></td> </tr> <tr> <td><input type="checkbox" id="topping5" value="mushrooms" name="toppingcheck">mushrooms</td> <td></td> </tr> <tr> <td><input type="checkbox" id="topping6" value="onions" name="toppingcheck">onions</td> <td></td> </tr> <tr> <td><input type="checkbox" id="topping7" value="pineapple" name="toppingcheck">pineapple</td> <td></td> </tr> </table> Il codice che elabora i pulsanti di opzione è simile a quello che abbiamo visto per le caselle di controllo. La differenza principale è che i pulsanti di opzione condividono lo stesso nome e raggruppamento logico, ovvero sono raggruppati insieme e uno soltanto può essere selezionato in un determinato momento. Il codice per elaborare i pulsanti di opzione è aggiunto alla funzione prepza(), come segue (potete trovare questo codice anche in radiobuttonjs. txt fra i file di esempio):
15 Capitolo 14 Utilizzare JavaScript con i web form 289 var crusttype = document.forms["pizzaform"].crust; var crustlength = crusttype.length; for (var c = 0; c < crustlength; c++) { if (crusttype[c].checked) { var newelement = document.createelement("p"); newelement.setattribute("id","crustelement" + i); document.body.appendchild(newelement); newelement.appendchild(document.createtextnode(crusttype[c].value + " Crust")); Preconvalidare i dati dei form JavaScript è utilizzato di frequente per confermare che un dato campo di un form sia riempito correttamente. Avete visto un esempio di questo comportamento in precedenza in questo capitolo, nel form che chiedeva di inserire un nome. Se non si inseriva nulla nel campo, appariva un avviso di errore. JavaScript esegue adeguatamente la preconvalida dei dati per assicurare un input valido, ed è invece carente nell effettiva convalida dei dati diretti al server. Non dovreste mai, in nessun caso, presupporre che ciò che arriva al server sia valido. Sono moltissimi gli sviluppatori web che ho sentito affermare: Abbiamo una convalida JavaScript sui dati, perciò non dobbiamo controllarli sul server. Questo non potrebbe essere più lontano dal vero. Le persone possono avere e in effetti hanno JavaScript disattivato nei loro browser; e possono anche inviare dati con formattazione POST o GET al programma lato-server senza dover seguire la navigazione dettata dall interfaccia browser. Indipendentemente da quanti trucchi lato-client impieghiate, sono solo trucchi. Qualcuno troverà il modo per eluderli. In conclusione, potete e dovreste utilizzare JavaScript per la preconvalida. La preconvalida è un piccolo controllo che può essere utile per fornire un veloce feedback agli utenti quando il codice nota qualcosa di sbagliato nell input. Tuttavia dovete eseguire l effettiva convalida di tutto l input sul lato server, dopo che gli utenti hanno inviato completamente il loro input. Questa sezione presenta alcuni modi in cui utilizzare JavaScript per la preconvalida, ma come sfondo a questa trattazione illustrerò prima di tutto i pericoli insiti nell utilizzare JavaScript come unico metodo di convalida per il sito. Hacking della convalida JavaScript In questa sezione utilizziamo un programma lato-server per creare un sistema di ordinazione da catalogo composto di tre semplici elementi: un prodotto, una quantità e un prezzo. Gli articoli in vendita sono fili d erba del mio prato. Abbiamo avuto un estate molto secca, perciò i prati sono una rarità in questo momento. Essendo i fili d erba del mio prato così rari, è possibile ordinarne solo tre per famiglia, e il prezzo è elevato. Limito la quantità ordinabile utilizzando codice JavaScript.
![createtextnode(crusttype[c].value + " Crust")); Preconvalidare i dati dei form JavaScript è utilizzato di frequente per confermare che un dato campo di un form sia riempito correttamente.](/docs-images/51/18054800/images/page_15.jpg "Avete visto un esempio di questo comportamento in precedenza in questo capitolo, nel form che chiedeva di inserire un nome. Se non si inseriva nulla nel campo, appariva un avviso di errore.")
16 290 Parte III Integrare JavaScript nella progettazione Ho creato una pagina per vendere i fili d erba che, visualizzata nel browser, si presenta come nella figura Figura 14.9 Un piccolo form per l ordinazione su catalogo. Segue l HTML e il JavaScript che generano la pagina (potete trovare questo codice anche in validate.htm fra i file di esempio). Notate l utilizzo di document.forms (in grassetto) per accedere alla quantità specificata nel form. Notate anche che non riuscirete a inviare il form perché la sua azione, catalog.php, non esiste. L azione del form non è così importante per questo esempio. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>catalog Example</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function formvalid(eventobj) { if (document.forms["catalogform"]["quantity"].value > 3) { alert("limit 3 per Household."); if (eventobj.preventdefault) { eventobj.preventdefault(); else { window.event.returnvalue = false;
17 Capitolo 14 Utilizzare JavaScript con i web form 291 return false; else { return true; </script> </head> <body> <form name="catalogform" id="catalogform" action="catalog.php" method="post"> <p>order Blades of Grass From Steve Suehring's Lawn</p> <div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png" id="lawnpic"><br></div> <p>description: Steve is terrible at lawn care, therefore there's not much grass on his lawn. Quantities are extremely limited.</p> <p>price: $ per blade</p> <p>quantity to order (Limit 3 per Household): <input type="text" name="quantity"></p> <p><input type="submit" value="place Order"></p> </form> <script type="text/javascript"> var formel = document.getelementsbytagname("form")[0]; EHandler.add(formEl,"submit", function(eventobj) { formvalid(eventobj); ); </script> </body> </html> Nota Un miglioramento che potreste apportare a questa convalida sarebbe assicurarvi che il visitatore non tenti di ordinare un numero inferiore di fili d'erba! Con JavaScript attivato nel mio browser, il tentativo dell utente di ordinare una quantità di tre o meno fili d erba è accettabile, perciò il form viene inviato allo script lato-server, che gestisce la richiesta e restituisce un totale ordine, mostrato nella figura Figura Ordinando una quantità di tre fili d erba o meno si ottengono i risultati attesi, incluso un totale ordine.
18 292 Parte III Integrare JavaScript nella progettazione Se l utente torna alla pagina, ancora con JavaScript attivato, e tenta di ordinare quattro fili d erba, vede una finestra di dialogo alert() come quella nella figura Figura Si verifica un errore JavaScript quando tento di ordinare più di tre fili d erba. Finora tutto bene. Immaginate adesso che io abbia disattivato JavaScript nel browser. Sulla pagina non è visibile alcun cambiamento quando accedo al form di ordinazione, e la pagina si presenta esattamente come quella nella figura Ora però posso ordinare una quantità di Inserendo semplicemente 1500 come quantità e facendo clic su Place Order, il web form lato-server riceve ed elabora felicemente l ordine, come si vede nella figura Figura Poiché JavaScript è disattivato, nulla ha convalidato questo ordine prima che arrivi al server. Poiché non esisteva alcuna convalida sul lato server, questo input era perfettamente valido e l ordine poteva essere elaborato. L unico problema è che non ho 1500 fili d erba nel mio prato (li ho contati), perciò non posso evadere l ordine. Questo scenario, che potrebbe sembrarvi alquanto strano, in realtà è estremamente frequente nelle applicazioni web. Ed è anche relativamente poco grave rispetto a situazioni in
19 Capitolo 14 Utilizzare JavaScript con i web form 293 cui un sito permette al visitatore addirittura di cambiare il prezzo di un articolo durante il processo di ordinazione e non convalida l input, perché a nessuno verrebbe mai in mente di cambiare il prezzo!. Molto sbagliato! Qualcuno lo farà, eccome! Potreste essere tentati di risolvere il problema richiedendo che tutti i visitatori abbiano JavaScript attivato nei loro browser per poter effettuare un ordine, ma questo non funziona. Potete tentare di individuare se JavaScript è attivato, ma non potrete esserne certi al 100 percento. L unico modo corretto per risolvere il problema è convalidare e aggiungere regole di convalida sul lato server. Lo script di back-end dovrebbe controllare la regola di business del limite di quantità. Questo non sarà né difficile ne lungo nella grande maggioranza dei casi, e in questo caso mi avrebbe evitato di cercare di mettere insieme 1500 fili d erba in un prato completamente inaridito. Questa sezione ha dimostrato quanto è facile aggirare la convalida JavaScript semplicemente disattivando JavaScript sul browser. La sezione successiva illustra come utilizzare JavaScript per la preconvalida. JavaScript dovrebbe essere utilizzato soltanto per la preconvalida e mai come unico mezzo per assicurare che l input sia valido. Convalidare un campo di testo All inizio di questo capitolo avete visto un esempio di come convalidare un campo di testo. Se il campo era vuoto, compariva una finestra di dialogo alert(). In questa sezione vedrete come fornire un feedback inline, accanto al campo del form, anziché utilizzare una finestra di dialogo alert(). Segue il codice per ottenere questo (potete trovare questo codice anche in catalog.htm fra i file di esempio): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>catalog Example</title> <script type="text/javascript" src="ehandler.js"></script> <script type="text/javascript"> function formvalid(eventobj) { if (document.forms["catalogform"]["quantity"].value > 3) { var submitbtn = document.forms["catalogform"]["submitbutton"]; var quantityp = document.getelementbyid("quantityp"); var errorel = document.createelement("span"); errorel.appendchild(document.createtextnode(" Limit 3 per Household")); quantityp.appendchild(errorel); if (eventobj.preventdefault) { eventobj.preventdefault(); else { window.event.returnvalue = false; return false;
20 294 Parte III Integrare JavaScript nella progettazione else { return true; </script> </head> <body> <form name="catalogform" id="catalogform" action="catalog.php" method="post"> <p>order Blades of Grass From Steve Suehring's Lawn</p> <div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png" id="lawnpic"><br/></div> <p>description: Steve is terrible at lawn care, therefore there's not much grass on his lawn. Quantities are extremely limited.</p> <p>price: $ per blade</p> <p id="quantityp">quantity to order (Limit 3 per Household): <input type="text" name="quantity"></p> <p id="submitp"><input id="submitbutton" type="submit" value="place Order"></p> </form> <script type="text/javascript"> var formel = document.getelementsbytagname("form")[0]; EHandler.add(formEl,"submit", function(eventobj) { formvalid(eventobj); ); </script> </body> </html> Suggerimento Non vale nulla il fatto che la convalida JavaScript in questi ultimi esempi utilizzi l'evento submit per attivare la convalida. L'evento submit dell'intero form è preferito rispetto all'evento click del pulsante Submit, in quanto l'evento submit del form si attiva indipendentemente dal fatto che il visitatore faccia clic sul pulsante Submit o prema Invio sulla tastiera. Benvenuti nella programmazione JavaScript! Fondamentalmente questo codice non fa nulla che non abbiate già visto fare. Il codice si limita a controllare se il form è valido. Se il form non è valido, il codice crea e accoda un elemento HTML span con il testo Limit 3 per Household, come mostrato nella figura 14.13, anziché visualizzare una finestra di dialogo alert().
21 Capitolo 14 Utilizzare JavaScript con i web form 295 Figura Fornire feedback inline su una pagina web anziché tramite la finestra di dialogo alert(). Esercizi 1. Create un web form che mostra una finestra di dialogo alert() basata sul tipo di input eseguito in una casella di selezione. 2. Aggiungete un gruppo di pulsanti di opzione al form di ordinazione pizze visto nell esercizio di questo capitolo per accettare tre dimensioni di pizza: piccola, media e grande. Visualizzate i risultati insieme al risultato dell ordinazione della pizza. 3. Riprogettate il sistema di ordinazione pizze aggiungendo i pulsanti dell esempio originale e permettendo la selezione dei tipi di pizza Veggie Special, Meat Special o Hawaiian. Questi pulsanti dovrebbero poi selezionare le caselle di controllo corrette per gli ingredienti del tipo di pizza selezionato. Per la pizza Veggie Special selezionate Green Peppers, Mushrooms e Onions; per la pizza Meat Special selezionate Sausage, Pepperoni e Ham; per la pizza Hawaiian selezionate Pineapple e Ham.
22
Novità di Access 2010
2 Novità di Access 2010 In questo capitolo: Gestire le impostazioni e i file di Access nella visualizzazione Backstage Personalizzare l interfaccia utente di Access 2010 Creare database utilizzando modelli
Versione 7.0 Taglie e Colori. Negozio Facile
Versione 7.0 Taglie e Colori Negozio Facile Negozio Facile: Gestione taglie e colori Il concetto di base dal quale siamo partiti è che ogni variante taglia/colore sia un articolo a se stante. Partendo
Office 2007 Lezione 08
Word: gli stili veloci e i temi Da questa lezione, iniziamo ad occuparci delle innovazioni che riguardano specificamente Word. Cominceremo parlando di stili e temi. Nella filosofia di questo nuovo Word,
Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo
Creazione di moduli Creazione di moduli Che cos'è un modulo? Un elenco di domande accompagnato da aree in cui è possibile scrivere le risposte, selezionare opzioni. Il modulo di un sito Web viene utilizzato
. A primi passi con microsoft a.ccepss SommarIo: i S 1. aprire e chiudere microsoft access Start (o avvio) l i b tutti i pro- grammi
Capitolo Terzo Primi passi con Microsoft Access Sommario: 1. Aprire e chiudere Microsoft Access. - 2. Aprire un database esistente. - 3. La barra multifunzione di Microsoft Access 2007. - 4. Creare e salvare
Guida al sistema. Dott. Enea Belloni
Sistema Gestionale Voucher Guida al sistema Dott. Enea Belloni Sommario della presentazione Il sistema informatico per la gestione delle domande L utente presentatore: diritti e responsabilità La pagina
HTML. Usare il seguente HTML per i primi tre esercizi (che, si noti, al momento restituisce un errore JavaScript):
HTML Usare il seguente HTML per i primi tre esercizi (che, si noti, al momento restituisce un errore JavaScript): prove Javascript
2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento.
Uso del computer e gestione dei file 57 2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento. All interno
PROCEDURA INVENTARIO DI MAGAZZINO di FINE ESERCIZIO (dalla versione 3.2.0)
PROCEDURA INVENTARIO DI MAGAZZINO di FINE ESERCIZIO (dalla versione 3.2.0) (Da effettuare non prima del 01/01/2011) Le istruzioni si basano su un azienda che ha circa 1000 articoli, che utilizza l ultimo
<?php include './include/page.php';
Il modulo di inserimento Per creare il modulo di inserimento creeremo due file per semplicità: insert.php sarà il file contenente il form dove inserire i dati. Premendo infine il pulsante inserisci si
Alla scoperta della nuova interfaccia di Office 2010
Alla scoperta della nuova interfaccia di Office 2010 Una delle novità più eclatanti della versione 2007 era la nuova interfaccia con la barra multifunzione. Office 2010 mantiene questa filosofia di interfaccia
Guida all uso di Java Diagrammi ER
Guida all uso di Java Diagrammi ER Ver. 1.1 Alessandro Ballini 16/5/2004 Questa guida ha lo scopo di mostrare gli aspetti fondamentali dell utilizzo dell applicazione Java Diagrammi ER. Inizieremo con
Leggere un messaggio. Copyright 2009 Apogeo
463 Leggere un messaggio SyllabuS 7.6.3.3 Per contrassegnare un messaggio selezionato puoi fare clic anche sulla voce di menu Messaggio > Contrassegna messaggio. Marcare, smarcare un messaggio I messaggi
Office 2007 Lezione 02. Le operazioni più
Le operazioni più comuni Le operazioni più comuni Personalizzare l interfaccia Creare un nuovo file Ieri ci siamo occupati di descrivere l interfaccia del nuovo Office, ma non abbiamo ancora spiegato come
Biblioteca di Cervia NOZIONI BASE DI INFORMATICA
Biblioteca di Cervia NOZIONI BASE DI INFORMATICA NOZIONI DI INFORMATICA Il PC è composto solitamente di tre parti principali: - Il Case, ovvero il contenitore del cuore del computer, da qui si accende
POSTA ELETTRONICA Per ricevere ed inviare posta occorrono:
Outlook parte 1 POSTA ELETTRONICA La posta elettronica è un innovazione utilissima offerta da Internet. E possibile infatti al costo di una telefonata urbana (cioè del collegamento telefonico al nostro
Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti
Capitolo 3 L applicazione Java Diagrammi ER Dopo le fasi di analisi, progettazione ed implementazione il software è stato compilato ed ora è pronto all uso; in questo capitolo mostreremo passo passo tutta
L interfaccia utente di Office 2010
L interfaccia utente di Office 2010 Personalizza la barra multifunzione Pagine: 3 di 4 Autore: Alessandra Salvaggio - Tratto da: Office 2010 la tua prima guida - Edizioni FAG Milano Ridurre la barra multifunzione
La catalogazione con LIBERO Modulo Catalogazione
CATALOGAZIONE 1. LA CATALOGAZIONE NEL FORMATO UNIMARC 2. COME LEGARE AL RECORD TERMINI DELLE LISTE DI AUTORITA 3. LA SCHERMATA GESTIONE DEL MAGAZZINO 1. LA CATALOGAZIONE NEL FORMATO UNIMARC Per catalogare
Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate
MODULO BASE Quanto segue deve essere rispettato se si vuole che le immagini presentate nei vari moduli corrispondano, con buona probabilità, a quanto apparirà nello schermo del proprio computer nel momento
Cominciamo dalla barra multifunzione, ossia la struttura a schede che ha sostituito la barra dei menu e la barra delle icone (Figura 1).
La barra multifunzione La barra multifunzione e il pulsante Microsoft Office Se avete lavorato per tanti anni con la suite da ufficio Office, questa nuova versione 2007 può disorientarvi davvero molto.
LA GESTIONE DELLE VISITE CLIENTI VIA WEB
LA GESTIONE DELLE VISITE CLIENTI VIA WEB L applicazione realizzata ha lo scopo di consentire agli agenti l inserimento via web dei dati relativi alle visite effettuate alla clientela. I requisiti informatici
Il calendario di Windows Vista
Il calendario di Windows Vista Una delle novità introdotte in Windows Vista è il Calendario di Windows, un programma utilissimo per la gestione degli appuntamenti, delle ricorrenze e delle attività lavorative
DOCUMENTO ESERCITAZIONE ONENOTE. Utilizzare Microsoft Offi ce OneNote 2003: esercitazione rapida
Utilizzare Microsoft Offi ce OneNote 2003: esercitazione rapida MICROSOFT OFFICE ONENOTE 2003 AUMENTA LA PRODUTTIVITÀ CONSENTENDO AGLI UTENTI L ACQUISIZIONE COMPLETA, L ORGANIZZAZIONE EFFICIENTE E IL RIUTILIZZO
Uso di base delle funzioni in Microsoft Excel
Uso di base delle funzioni in Microsoft Excel Le funzioni Una funzione è un operatore che applicato a uno o più argomenti (valori, siano essi numeri con virgola, numeri interi, stringhe di caratteri) restituisce
File, Modifica, Visualizza, Strumenti, Messaggio
Guida installare account in Outlook Express Introduzione Questa guida riguarda di sicuro uno dei programmi maggiormente usati oggi: il client di posta elettronica. Tutti, ormai, siamo abituati a ricevere
Uso dei modelli/template
Uso dei modelli/template Il modello (o template, in inglese) non è altro che un normale file di disegno, generalmente vuoto, cioè senza alcuna geometria disegnata al suo interno, salvato con l estensione.dwt.
COME CREARE UNA COMUNICAZIONE / NEWSLETTER
COME CREARE UNA COMUNICAZIONE / NEWSLETTER Benvenuti nella MINI GUIDA di Centrico per la creazione di una nuova Comunicazione o Newsletter. Grazie a questa guida, potrai creare delle comunicazioni ad hoc
STRUMENTO PER LA COMPRESSIONE E LA CRIPTAZIONE DI FILE
Programma di COMPRESSIONE E CRIPTAZIONE SECRETZIP (solo Windows). Il programma è incluso nell USB Flash Drive. Consultare il manuale contenuto nell USB Flash Drive o visitare il sito: www. integralmemory.com
Vi ricordiamo che per qualsiasi problema tecnico o informazione potete contattare info@eduitalia.org oppure Francesco al 3357761103.
Gentili Associati, in questi ultimi tempi abbiamo lavorato per sviluppare un software capace di far gestire direttamente alle scuole la propria presenza sul sito di Eduitalia. Tramite la registrazione
Manuale per i redattori del sito web OttoInforma
Manuale per i redattori del sito web OttoInforma Contenuti 1. Login 2. Creare un nuovo articolo 3. Pubblicare l articolo 4. Salvare l articolo in bozza 5. Le categorie 6. Modificare un articolo 7. Modificare
THAIREPORT. Cordialmente. Matelica, lì 19/12/2007. Halley Informatica Area Web
THAIREPORT OGGETTO: aggiornamento della procedura HE - THAIREPORT dalla versione 00.00.90 alla versione 01.02.00 dalla versione 01.01.01 alla versione 01.02.00 Nell inviarvi quanto in oggetto Vi ricordiamo
Office 2007 Lezione 07. Gestione delle immagini
Le immagini Gestione delle immagini Office 2007 presenta molte interessanti novità anche nella gestione delle immagini. Le immagini si gestiscono in modo identico in Word, Excel e PowerPoint. Naturalmente
Client - Server. Client Web: il BROWSER
Client - Server Client Web: il BROWSER Il client Web è un applicazione software che svolge il ruolo di interfaccia fra l utente ed il WWW, mascherando la complessità di Internet. Funzioni principali Inviare
Utilizzo della Intranet, forum privati Soci e Staff
Utilizzo della Intranet, forum privati Soci e Staff Se durante la registrazione ad Associazioni Milano avete fatto richiesta del servizio denominato Intranet, questo sarà subito disponibile già a partire
Figura 1 Le Icone dei file di Excel con e senza macro.
18 Le macro Le macro rappresentano una soluzione interessante per automatizzare e velocizzare l esecuzione di operazioni ripetitive. Le macro, di fatto, sono porzioni di codice VBA (Visual Basic for Applications)
PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1
Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6
Manuale Debident. Per accedere al servizio, inserite il nome, il numero cliente e la password che vi è stata assegnata.
Login: per accedere Per accedere al servizio, inserite il nome, il numero cliente e la password che vi è stata assegnata. Se avete dimenticato la password, ne potete richiedere una nuova online. Per motivi
Gestire le sessioni con le Servlet
PROGETTO Gestire le sessioni con le Servlet Con il termine sessione si intende un insieme di attività correlate, con una o alcune di queste che sono preliminari ad altre. Si pensi, per esempio, a un qualsiasi
Software Gestionale Politiche Giovanili
Software Gestionale Politiche Giovanili Guida all Uso Progettisti e Referenti tecnico-organizzativi Edizione 2012 1 INDICE DEI CONTENUTI: 1. NOZIONI GENERALI E ACCESSO AL SISTEMA 1.1 Requisiti di sistema...
Dott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Maria Vittoria Avolio avoliomv@unical.it Dott.ssa Adriana Pietramala a.pietramala@unical.it Riferimenti Manuale PHP http://www.php.net/download-docs.php
NAVIGAORA HOTSPOT. Manuale utente per la configurazione
NAVIGAORA HOTSPOT Manuale utente per la configurazione NAVIGAORA Hotspot è l innovativo servizio che offre ai suoi clienti accesso ad Internet gratuito, in modo semplice e veloce, grazie al collegamento
I.N.A.I.L. Certificati Medici via Internet. Manuale utente
I.N.A.I.L. Certificati Medici via Internet Manuale utente CERTIFICATI MEDICI... 1 VIA INTERNET... 1 MANUALE UTENTE... 1 COME ACCEDERE AI CERTIFICATI MEDICI ON-LINE... 3 SITO INAIL... 3 PUNTO CLIENTE...
Gestire immagini e grafica con Word 2010
Gestire immagini e grafica con Word 2010 Con Word 2010 è possibile impaginare documenti in modo semi-professionale ottenendo risultati graficamente gradevoli. Inserire un immagine e gestire il testo Prima
GUIDA UTENTE PRIMA NOTA SEMPLICE
GUIDA UTENTE PRIMA NOTA SEMPLICE (Vers. 2.0.0) Installazione... 2 Prima esecuzione... 5 Login... 6 Funzionalità... 7 Prima Nota... 8 Registrazione nuovo movimento... 10 Associazione di file all operazione...
Esercizio data base "Biblioteca"
Rocco Sergi Esercizio data base "Biblioteca" Database 2: Biblioteca Testo dell esercizio Si vuole realizzare una base dati per la gestione di una biblioteca. La base dati conterrà tutte le informazioni
Questa guida è realizzata per spiegarvi e semplificarvi l utilizzo del nostro nuovo sito E Commerce dedicato ad Alternatori e Motorini di avviamento.
Guida all uso del sito E Commerce Axial Questa guida è realizzata per spiegarvi e semplificarvi l utilizzo del nostro nuovo sito E Commerce dedicato ad Alternatori e Motorini di avviamento. Innanzitutto,
POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL
POSTECERT POSTEMAIL CERTIFICATA GUIDA ALL USO DELLA WEBMAIL Sommario Pagina di accesso... 3 Posta in arrivo... 4 Area Posta... 5 Area Contatti... 8 Area Opzioni... 10 Area Cartelle... 13 La Postemail Certificata
Usare la webmail Microsoft Hotmail
Usare la webmail Microsoft Hotmail Iscriversi ad Hotmail ed ottenere una casella di posta Innanzitutto è necessario procurarsi una casella di posta elettronica (detta anche account di posta elettronica)
Il sofware è inoltre completato da una funzione di calendario che consente di impostare in modo semplice ed intuitivo i vari appuntamenti.
SH.MedicalStudio Presentazione SH.MedicalStudio è un software per la gestione degli studi medici. Consente di gestire un archivio Pazienti, con tutti i documenti necessari ad avere un quadro clinico completo
LEZIONE 6. Sommario LEZIONE 6 CORSO DI COMPUTER PER SOCI CURIOSI
1 LEZIONE 6 Sommario SESTA LEZIONE... 2 FACCIAMO IL PUNTO DELLA SITUAZIONE... 2 POSTA IN ARRIVO... 3 LEGGERE UN MESSAGGIO... 4 SCRIVERE UN MESSAGGIO... 4 SCRIVIAMO!... 5 RISPONDIAMO!... 5 SESTA LEZIONE
COME CREARE UN SONDAGGIO CON SCELTA SU MOODLE
COME CREARE UN SONDAGGIO CON SCELTA SU MOODLE Inserisci le tue credenziali di accesso in alto sulla colonna di destra denominata Login. Si devono inserire le credenziali come editor del corso Il modulo
4.1.1.1 APRIRE UN PROGRAMMA DI FOGLIO ELETTRONICO
4.1 PER INIZIARE 4.1.1 PRIMI PASSI COL FOGLIO ELETTRONICO 4.1.1.1 APRIRE UN PROGRAMMA DI FOGLIO ELETTRONICO L icona del vostro programma Excel può trovarsi sul desktop come in figura. In questo caso basta
Prestazioni Sociali Comuni
Prestazioni Sociali Comuni Funzioni di Gestione XML flussi Guida per l utente INPS 10/11/2015 Indice Il processo di controllo ed invio dei file xml... 2 Funzioni disponibili... 3 Caricamento file da validare
Sistema Gestionale FIPRO. Dott. Enea Belloni Ing. Andrea Montagnani
Sistema Gestionale FIPRO Dott. Enea Belloni Ing. Andrea Montagnani Firenze, 29 Aprile 2010 Sommario della presentazione Il sistema informatico per la gestione progetti FIPRO L utente presentatore: diritti
Personalizzazione del PC
È la prima volta che utilizzi Windows 7? Anche se questa versione di Windows è molto simile a quella precedente, potrebbero tornarti utili alcune informazioni per partire a razzo. Questa Guida contiene
3.5.1.1 Aprire, preparare un documento da utilizzare come documento principale per una stampa unione.
Elaborazione testi 133 3.5 Stampa unione 3.5.1 Preparazione 3.5.1.1 Aprire, preparare un documento da utilizzare come documento principale per una stampa unione. Abbiamo visto, parlando della gestione
DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER
DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER L architettura CLIENT SERVER è l architettura standard dei sistemi di rete, dove i computer detti SERVER forniscono servizi, e computer detti CLIENT, richiedono
Guida alla configurazione della posta elettronica dell Ateneo di Ferrara sui più comuni programmi di posta
Guida alla configurazione della posta elettronica dell Ateneo di Ferrara sui più comuni programmi di posta. Configurazione Account di posta dell Università di Ferrara con il Eudora email Eudora email può
Appunti di Interazione Uomo Macchina Principi di progettazione per il web I wireframe
Appunti di Interazione Uomo Macchina Principi di progettazione per il web I wireframe Luca Pulina 1 Introduzione Nell ambito della progettazione di siti web, i wireframe sono un insieme di documenti che
MANUALE PORTALE UTENTE IMPRENDITORE
MANUALE PORTALE UTENTE IMPRENDITORE Indice 1. REQUISITI MINIMI DI SISTEMA E CONTATTI PROGETTO RIGENER@... 3 2. IL PORTALE RIGENER@... 4 2.1 ACCESSO ALLE AREE PRIVATE... 7 2.1.1 Accesso al sito con Windows
INSERIRE RISORSE. Un etichetta è un semplice testo che descrive una particolare risorsa o attività all interno di un Argomento.
INSERIRE RISORSE Facendo click sulla freccina in basso a destra del menu a tendina Aggiungi una risorsa si può selezionare una delle seguenti risorse: etichetta, pagina di testo, pagina web, link a file
Gli SmartArt. Office 2007 Lezione 05
Gli SmartArt SmartArt Gli SmartArt rappresentano una delle principali novità di Microsoft Office 2007: si trattano di grafiche intelligenti che vi permettono di realizzare diagrammi, schemi, diagrammi
Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia
Scuola Digitale Manuale utente Copyright 2014, Axios Italia 1 SOMMARIO SOMMARIO... 2 Accesso al pannello di controllo di Scuola Digitale... 3 Amministrazione trasparente... 4 Premessa... 4 Codice HTML
MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE
1/6 MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE Per prima cosa si ringrazia per aver scelto ImmobiPhone e per aver dato fiducia al suo autore. Il presente documento istruisce l'utilizzatore sull'uso del programma
Registratori di Cassa
modulo Registratori di Cassa Interfacciamento con Registratore di Cassa RCH Nucleo@light GDO BREVE GUIDA ( su logiche di funzionamento e modalità d uso ) www.impresa24.ilsole24ore.com 1 Sommario Introduzione...
www.associazioni.milano.it - Il sito dedicato alle associazioni no-profit di Milano e provincia
Utilizzo del Forum NEWS Il forum news è stato pensato per dare ad ogni associazione la possibilità di pubblicare una pagina di novità all intero del proprio sito (scheda o pagina autocomposta). E la sezione
MANUALE D USO DELLA PIATTAFORMA ITCMS
MANUALE D USO DELLA PIATTAFORMA ITCMS MANULE D USO INDICE 1. INTRODUZIONE... 2 2. ACCEDERE ALLA GESTIONE DEI CONTENUTI... 3 3. GESTIONE DEI CONTENUTI DI TIPO TESTUALE... 4 3.1 Editor... 4 3.2 Import di
PROGETTO PER LA TRASMISSIONE DOCUMENTI RELATIVI ALL APPROVAZIONE DELLE MANIFESTAZIONI IN FORMA DIGITALE
PROGETTO PER LA TRASMISSIONE DOCUMENTI RELATIVI ALL APPROVAZIONE DELLE MANIFESTAZIONI IN FORMA DIGITALE L approvazione di una manifestazione nazionale od internazionale comporta spesso la trasmissione
EASYGEST SCHEDE GIORNALIERE PRODUZIONE TERZISTI Per utilizzare il programma di gestione schede produzione è necessario prima inserire gli operatori. Si va menù Magazzino -> Tabelle Varie -> Operatori e
Innanzitutto andiamo sul sito http://www.dropbox.com/ ed eseguiamo il download del programma cliccando su Download Dropbox.
Oggi parlerò di qualcosa che ha a che fare relativamente con la tecnica fotografica, ma che ci può dare una mano nella gestione dei nostri archivi digitali, soprattutto nel rapporto professionale con altre
Your Detecting Connection. Manuale utente. support@xchange2.net
Your Detecting Connection Manuale utente support@xchange2.net 4901-0133-4 ii Sommario Sommario Installazione... 4 Termini e condizioni dell applicazione XChange 2...4 Configurazione delle Preferenze utente...
ATOLLO BACKUP GUIDA INSTALLAZIONE E CONFIGURAZIONE
ATOLLO BACKUP GUIDA INSTALLAZIONE E CONFIGURAZIONE PREMESSA La presente guida è da considerarsi come aiuto per l utente per l installazione e configurazione di Atollo Backup. La guida non vuole approfondire
WORD 97 SCRIVERE UNA TESI DI LAUREA
WORD 97 SCRIVERE UNA TESI DI LAUREA PASSO 1 Per prima cosa pensiamo al formato generale della pagina: i margini richiesti da una tesi sono quasi sempre più ampi di quelli di un testo normale. Apriamo ora
GHPPEditor è un software realizzato per produrre in modo rapido e guidato un part program per controlli numerici Heidenhain.
*+33(GLWRU GHPPEditor è un software realizzato per produrre in modo rapido e guidato un part program per controlli numerici Heidenhain. Il programma si basa su un architettura di tasti funzionali presenti
Moduli (schede compilabili) in Word Esempio: scheda di alimentazione per un degente
Moduli (schede compilabili) in Word Esempio: scheda di alimentazione per un degente Vediamo come utilizzare Word per costruire un modulo compilabile, ovvero una scheda che contenga delle parti fisse di
FAQ 07/01 - ACCORGIMENTI PER LA VISUALIZZAZIONE DEL NUOVO SITO ISS
Servizio Informatico, Biblioteca, Documentazione ed Attività Settore I Informatica Gruppo Web FAQ 07/01 - ACCORGIMENTI PER LA VISUALIZZAZIONE DEL NUOVO SITO ISS Febbraio 2007 Revisione 200702161541 Indice
XML e PHP. Gestire XML con PHP. Appendice
Appendice XML e PHP Tra tutti i linguaggi di programmazione esistenti PHP è tra quelli che meglio si adattano all elaborazione di documenti XML. PHP è un linguaggio di programmazione che consente di arricchire
Manuale Utente. Ver. 3 del 08/2014. Support Regola Servizio di Assistenza Tecnica. E-mail: info@regola.it Pec: regola@legalmail.it Web: www.regola.
Manuale Utente Support Regola Servizio di Assistenza Tecnica Ver. 3 del 08/2014 10128 Torino, (Italy) Tel. +39 011 518.70.29 Fax +39 011 518.72.23 E-mail: info@regola.it Pec: regola@legalmail.it Web: www.regola.it
Stampe in rete Implementazione corretta
NETWORK PRINT SERVERS Articolo Stampe in rete Implementazione corretta Created: June 3, 2005 Last updated: June 3, 2005 Rev:.0 INDICE INTRODUZIONE 3 INFRASTRUTTURA DELLE STAMPE IN RETE 3. Stampa peer-to-peer
1. Indice... 1. 2. Uno shop pronto alla vendita in pochi passaggi... 2. 3. Registrazione... 2. 4. Il suo assistente di installazione...
1. Indice 1. Indice... 1 2. Uno shop pronto alla vendita in pochi passaggi... 2 3. Registrazione... 2 4. Il suo assistente di installazione... 2 5. Ottimizzare il design e la struttura dello shop... 4
La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
MANUALEDIUTILIZZO MODULO CRM POSTVENDITA
MANUALEDIUTILIZZO MODULO CRM POSTVENDITA INDICE INTRODUZIONE INSERIMENTO CHIAMATA CHIAMATE Dettaglio Chiamate Macchine Coinvolte Documenti Riepilogo MACCHINE Dettaglio Macchine Documenti Interventi MACCHINE
NUOVA PROCEDURA COPIA ED INCOLLA PER L INSERIMENTO DELLE CLASSIFICHE NEL SISTEMA INFORMATICO KSPORT.
NUOVA PROCEDURA COPIA ED INCOLLA PER L INSERIMENTO DELLE CLASSIFICHE NEL SISTEMA INFORMATICO KSPORT. Con l utilizzo delle procedure di iscrizione on line la società organizzatrice ha a disposizione tutti
Impostare il browser per navigare in sicurezza Opzioni di protezione
Impostare il browser per navigare in sicurezza Opzioni di protezione Data la crescente necessità di sicurezza e tutela dei propri dati durante la navigazione in rete, anche gli stessi browser si sono aggiornati,
Consultazione Documenti
Consultazione Documenti 1 SOMMARIO Accesso alla Procedura Lato azienda...3 Caratteristiche dell Applicazione dialogo-web...3 Modifica Password...6 Accesso negato ai servizi On line di Nuova Informatica...7
GUIDA ALL ACQUISTO DELLE FOTO
1 GUIDA ALL ACQUISTO DELLE FOTO Gentile Utente questa guida vuole offrirle un aiuto nella selezione e nell acquisto delle foto dal nostro carrello elettronico. La invitiamo a Stampare questo breve manuale
Circolari e lettere da Word con anagrafiche e indirizzi da Metodo
Circolari e lettere da Word con anagrafiche e indirizzi da Metodo Metodo sfrutta tutte le potenzialità messe a disposizione da Microsoft Windows integrandosi perfettamente su tale piattaforma e permettendo
Lezione 6: Form 27/04/2012
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
Configurazione di Outlook Express
OUTLOOK Outlook Express è il client di posta elettronica sviluppato da Microsoft, preinstallato su sistemi operativi Windows a partire da Windows 98 fino all'uscita di Windows XP. Con l'arrivo di Windows
INSERIMENTO DATI BASILARI
PASSO PASSO. Questo applicativo software nasce con l idea di essere molto semplice da usare. Di fatto lo è ed infatti non dispone di un help in linea all interno dello stesso. Tuttavia ci sentiamo in dovere
7.4 Estrazione di materiale dal web
7.4 Estrazione di materiale dal web Salvataggio di file Salvataggio della pagina Una pagina web può essere salvata in locale per poterla consultare anche senza essere collegati alla Rete. Si può scegliere
MANUALE DI GESTIONE BANCA DATI INTERNET ED AREA FTP PER ESPERTI DI RAZZA
MANUALE DI GESTIONE BANCA DATI INTERNET ED AREA FTP PER ESPERTI DI RAZZA A cura di Giovanni Sleiter Indice 1. Introduzione a pagina 3 2. Richiesta abilitazione a pagina 3 3. Accesso alla Banca Dati a pagina
I file PDF possono essere creati : 1. dall interno del programma Adobe 2. Per quelli che lo prevedono direttamente dall interno di altri programmi
I file PDF possono essere creati : 1. dall interno del programma Adobe 2. Per quelli che lo prevedono direttamente dall interno di altri programmi quali: 3. Tutto il pacchetto Office di Microsoft, 4. alcuni
5. Fondamenti di navigazione e ricerca di informazioni sul Web
5. Fondamenti di navigazione e ricerca di informazioni sul Web EIPASS Junior SCUOLA PRIMARIA Pagina 43 di 47 In questo modulo sono trattati gli argomenti principali dell universo di Internet, con particolare
Cos è un word processor
Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei
www.filoweb.it STAMPA UNIONE DI WORD
STAMPA UNIONE DI WORD Molte volte abbiamo bisogno di stampare più volte lo stesso documento cambiando solo alcuni dati. Potremmo farlo manualmente e perdere un sacco di tempo, oppure possiamo ricorrere
Che differenza c è tra una richiesta XML ed una domanda XML? (pag. 4)
FAQ INVIO DOMANDE CIGO CON FLUSSO XML Cosa serve per inviare una domanda CIGO con il flusso XML? (pag. 2) Come si prepara una domanda in formato XML? (pag. 3) Che differenza c è tra una richiesta XML ed