Come fare addizione in HTML
Usando alcune istruzioni HTML e un piccolo JavaScript, puoi costruire la tua calcolatrice che esegue l'aggiunta. Questo compito non è così difficile come sembra, poiché HTML crea controlli della calcolatrice per te e JavaScript gestisce tutti i calcoli. Tutto quello che devi fare è disporre i controlli sulla tua pagina Web in modo che creino l'interfaccia utente che desideri.
Controlli della calcolatrice
Le calcolatrici che aggiungono numeri richiedono quattro controlli di base: due caselle di testo per inserire numeri, una casella di testo per visualizzare i risultati e un pulsante. Il seguente codice HTML crea quei quattro controlli:
+ =
Il pulsante contiene una chiamata a una funzione JavaScript che aggiunge i due numeri e memorizza il risultato nella terza casella di testo. Ogni casella di testo richiede un valore "id" che il JavaScript utilizza per ottenere riferimenti alle caselle di testo.
Logica JavaScript
Le seguenti istruzioni JavaScript creano tre oggetti che contengono riferimenti alle tre caselle di testo:
var box1 = document.getElementById ("box1"); var box2 = document.getElementById ("box2"); var box3 = document.getElementById ("box3");
È quindi possibile aggiungere numeri nelle prime due caselle di testo e memorizzarle in una variabile come "risultato", come segue:
var result = Number (box1.value) + Number (box2.value); box3.innerHTML = risultato;
La funzione "Numero" converte i valori di testo memorizzati nelle caselle di testo in numeri che possono essere manipolati da JavaScript.
uso
Carica la tua pagina della calcolatrice HTML sul tuo server Web in modo che chiunque abbia accesso a Internet possa usarla. Puoi anche eseguirlo localmente sul tuo computer. Dopo aver creato il documento HTML, trovarlo in Esplora risorse e fare doppio clic sulla relativa icona per visualizzarlo nel browser Web predefinito. È quindi possibile utilizzare la calcolatrice per aggiungere e sottrarre numeri. I browser ti consentono anche di aggiungere segnalibri alle pagine HTML locali che risiedono sul tuo disco rigido. Salva la pagina della calcolatrice come un segnalibro in modo da poterla aprire in qualsiasi momento ed eseguire calcoli direttamente dal tuo browser.
miglioramenti
Non è necessario comprendere Cascading Style Sheets, o CSS, per creare una pagina Web. Tuttavia, se conosci un po 'di CSS, puoi usarlo per creare controlli più elaborati. Usa gli attributi di colore e bordo, ad esempio, per aggiungere bordi colorati intorno alle tue caselle di testo. Puoi anche mettere tutti i controlli all'interno di un controllo "div" e aggiungere un'immagine di sfondo in modo che la tua calcolatrice assomigli a quella reale. Se è necessario aggiungere più numeri, aggiungere caselle di testo aggiuntive alla pagina HTML e modificare il codice JavaScript in modo che includa tali caselle di testo nel suo calcolo.