Come Creare una Calcolatrice Utilizzando il Codice HTML

Scarica PDF
Scarica PDF

Esistono una miriade di modi per eseguire dei calcoli matematici con un computer desktop usando semplicemente la calcolatrice integrata nel sistema operativo, ma se sei una persona creativa che ama distinguersi, puoi provare a creare una calcolatrice personalizzata usando il codice HTML. Per farlo, occorre apprendere alcune conoscenze di base del linguaggio HTML, copiare il codice necessario all'interno di un semplice editor di testo e salvarlo come file HTML. A quel punto, sarai in grado di utilizzare la tua calcolatrice personale aprendo il file HTML all'interno del browser internet che preferisci. In questo modo, non solo sarai in grado di svolgere i calcoli matematici più complessi usando un semplice browser internet, avrai anche imparato alcuni fondamenti dell'arte della programmazione!

Parte 1
Parte 1 di 4:

Imparare la Sintassi di Base dell'HTML

Scarica PDF
  1. Immagine titolata Create a Calculator Using HTML Step 1
    1
    Apprendi come funziona il codice HTML e i singoli elementi che lo compongono. Il codice sorgente che userai per creare la tua calcolatrice è composto da molte parole chiave della sintassi del linguaggio HTML, che nell'insieme andranno a definire tutti gli aspetti e il funzionamento degli elementi presenti nel documento finito. Consulta questo articolo per avere maggiori informazioni sull'intero processo di creazione di un documento HTML oppure prosegui nella lettura per comprendere a cosa serve ogni singolo elemento di codice utilizzato nell'articolo in esame, per creare la calcolatrice di esempio.
    • html: si tratta di una parola chiave della sintassi HTML che indica al browser internet (l'entità che dovrà interpretare il codice HTML per visualizzare a video il relativo contenuto) che il resto del testo presente nel documento è codice HTML. Per creare un programma esistono moltissimi linguaggi di programmazione, in questo caso il tag <html> indica che il resto del codice è stato scritto proprio in HTML.[1]
    • head: è un tag HTML che indica all'interprete che tutto il codice che contiene fa riferimento ai "metadati", cioè alle informazioni che descrivono i dati. Il tag <head> viene utilizzato normalmente per definire gli stili grafici adottati dagli elementi che compongono il documento, ad esempio il titolo della pagina, le intestazioni, eccetera. Pensa al linguaggio HTML come a una struttura suddivisa in più livelli, in cui il tag "head" identifica quello che conterrà e a cui faranno riferimento tutti gli altri.[2]
    • title: questo tag definisce ciò che verrà visualizzato come titolo del documento (quindi della relativa pagina web). Questo attributo viene utilizzato per definire il testo che verrà visualizzato dal browser all'interno della barra del titolo della pagina web.
    • body bgcolor= "#": questo tag e il relativo insieme di attributi servono a definire il colore che verrà utilizzato per lo sfondo e il testo visualizzati all'interno della pagina web. Il numero esadecimale che appare fra virgolette, unitamente al simbolo "#", indica il colore da utilizzare per l'elemento indicato.
    • text= "": questo attributo serve per modificare il colore del testo dell'elemento a cui fa riferimento (in questo caso del tag "body").
    • form name="": questo tag e il relativo attributo servono a definire il nome del form. Questa informazione verrà utilizzata per creare la struttura interna del codice e quella del documento HTML, in modo che il compilatore Javascript sappia a quale form, fa riferimento ogni elemento del documento e ogni evento a esso collegati. Ad esempio, nel codice presente nell'articolo viene definito il form "calculator", quindi verrà creata una struttura con questo nome a cui potremo fare riferimento nel resto del codice per gestire le azioni e gli eventi generati dall'utente.[3]
    • input type="": questo tag serve per definire i controlli che l'utente potrà utilizzare per compiere un'azione specifica o per inserire dei dati. Ad esempio, potrebbe trattarsi di un campo di testo, una password o un pulsante (come nel caso della nostra calcolatrice).[4]
    • value="": questo attributo indica il valore che verrà visualizzato all'interno dell'elemento di input definito con il tag "input type". Nel caso della nostra calcolatrice, verranno visualizzati i numeri (da 1 a 9) e gli operatori matematici (+, -, *, /, =).[5]
    • onClick="": questa parte della sintassi serve per definire l'azione legata all'elemento di input, cioè all'evento che deve scatenarsi quando il bottone verrà premuto dall'utente. Nel nostro esempio desideriamo che il valore del pulsante premuto venga visualizzato nel campo di testo "Risultato" per mostrare all'utente il calcolo che sta eseguendo. Nel caso del pulsante "6", l'evento "onClick" assumerà quindi il seguente valore "document.calculator.ans.value+='6'".[6]
    • br: questo tag inserisce un'interruzione di riga nel documento, quindi occorre andare a capo. Tutto ciò che dovrà essere visualizzato successivamente nel documento HTML verrà mostrato su una nuova riga di testo.[7]
    • /form, /body e /html: questi comandi rappresentano i tag di chiusura dei corrispondenti tag di apertura e servono a completare la definizione delle rispettive sezioni del documento HTML.[8]
    Pubblicità
Parte 2
Parte 2 di 4:

Codice HTML per la Creazione di una Semplice Calcolatrice

Scarica PDF

Copia il codice presente in questa sezione dell'articolo. Evidenzia il testo presente nel riquadro sottostante usando il cursore del mouse, in modo che appaia completamente colorato di blu. Parti dall'angolo superiore sinistro e, mentre tieni premuto il tasto sinistro del mouse, spostati verso l'angolo inferiore destro. A questo punto, premi la combinazione di tasti di scelta rapida "Command+C", su sistemi macOS, o "Ctrl+C", su sistemi Windows per copiare il testo selezionato all'interno degli appunti di sistema. 

<html><head><title>Calcolatrice HTML</title></head><body bgcolor= "# 000000" text= "gold"><form name="calculator" ><input type="button" value="1" onClick="document.calculator.ans.value+='1'"><input type="button" value="2" onClick="document.calculator.ans.value+='2'"><input type="button" value="3" onClick="document.calculator.ans.value+='3'"><input type="button" value="+" onClick="document.calculator.ans.value+='+'"><input type="button" value="4" onClick="document.calculator.ans.value+='4'"><input type="button" value="5" onClick="document.calculator.ans.value+='5'"><input type="button" value="6" onClick="document.calculator.ans.value+='6'"><input type="button" value="-" onClick="document.calculator.ans.value+='-'"><input type="button" value="7" onClick="document.calculator.ans.value+='7'"><input type="button" value="8" onClick="document.calculator.ans.value+='8'"><input type="button" value="9" onClick="document.calculator.ans.value+='9'"><input type="button" value="*" onClick="document.calculator.ans.value+='*'"><input type="button" value="/" onClick="document.calculator.ans.value+='/'"><input type="button" value="0" onClick="document.calculator.ans.value+='0'"><input type="reset" value="Canc"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">Risultato <input type="textfield" name="ans" value=""></form></body></html>
Parte 3
Parte 3 di 4:

Creare la Propria Calcolatrice

Scarica PDF
  1. Immagine titolata Create a Calculator Using HTML Step 3
    1
    Apri un editor di testo sul computer. Esistono diversi programmi che possono essere usati per svolgere questo passaggio, ma per convenienza e semplicità è meglio usare TextEdit o Blocco note.[9] [10]
    • Sui sistemi macOS, clicca l'icona a forma di lente di ingrandimento posta nell'angolo superiore destro dello schermo per aprire lo strumento di sistema Spotlight. A questo punto, esegui una ricerca utilizzando la parola chiave "TextEdit" (senza virgolette), quindi seleziona la relativa icona che trovi all'interno dell'elenco dei risultati apparso.
    • Sui sistemi Windows, accedi al menu "Start" posto nell'angolo inferiore sinistro del desktop. Digita la parola chiave "Blocco note" all'interno della barra di ricerca, quindi seleziona la relativa icona situata all'interno dell'elenco dei risultati apparso.
  2. Immagine titolata Create a Calculator Using HTML Step 4
    2
    Incolla il codice HTML, che hai copiato dalla sezione precedente dell'articolo, all'interno di un nuovo documento vuoto.
    • Sui sistemi macOS, clicca un punto vuoto del nuovo documento apparso, quindi premi la combinazione di tasti di scelta rapida "Command+V". Dopo aver incollato il codice, accedi al menu "Formato" disponibile nella parte superiore della finestra dell'editor di testo e scegli l'opzione "Converti in formato Solo testo".[11]
    • Sui sistemi Windows, seleziona un punto vuoto del nuovo documento apparso, quindi premi la combinazione di tasti di scelta rapida "Ctrl+V".
  3. Immagine titolata Create a Calculator Using HTML Step 5
    3
    Salva il documento. Per farlo, accedi al menu "File" posto nella parte superiore sinistra della finestra, quindi scegli l'opzione "Salva con nome...", sui sistemi Windows, o "Salva...", su Mac.
  4. Immagine titolata Create a Calculator Using HTML Step 6
    4
    Aggiungi l'estensione "HTML" al nome del file. All'interno del campo relativo al nome da assegnare al documento, che trovi nella finestra di dialogo "Salva con nome", digita il nome da assegnare al file seguito dall'estensione ".html" (senza virgolette), quindi premi il pulsante "Salva". Ad esempio, se desideri usare il nome "la mia prima calcolatrice", dovrai salvare il file come "lamiaprimacalcolatrice.html"
    Pubblicità
Parte 4
Parte 4 di 4:

Usare la Calcolatrice HTML

Scarica PDF
  1. Immagine titolata Create a Calculator Using HTML Step 7
    1
    Individua il file HTML appena creato. Per farlo, esegui una ricerca usando la funzionalità "Spotlight" o la barra di ricerca del menu o della schermata "Start", come descritto nella sezione precedente dell'articolo. In questo caso non è necessario digitare anche l'estensione ".html".
  2. Immagine titolata Create a Calculator Using HTML Step 8
    2
    Clicca l'icona del file apparso all'interno dell'elenco dei risultati della ricerca per aprirlo. Essendo un file HTML, verrà aperto automaticamente utilizzando il browser internet predefinito di sistema.
  3. Immagine titolata Create a Calculator Using HTML Step 9
    3
    Usa i pulsanti della calcolatrice apparsa a video, come faresti normalmente. La soluzione dell'equazione inserita verrà mostrata nel campo di testo "Risultato", dopo aver premuto il pulsante "=".
    Pubblicità

Consigli

  • Puoi inserire il codice HTML relativo alla calcolatrice mostrata in questo articolo all'interno di qualunque pagina web.
  • Se lo desideri, puoi anche utilizzare i tag HTML relativi allo stile per modificare l'aspetto visivo della tua calcolatrice.
Pubblicità

wikiHow Correlati

Hackerare
Come
Hackerare
Impostare la Larghezza e l'Altezza di un Immagine in HTML
Come
Impostare la Larghezza e l'Altezza di un Immagine in HTML
Aggiungere un Link a un'Immagine
Come
Aggiungere un Link a un'Immagine
Aprire un File XML
Come
Aprire un File XML
Diventare un Hacker
Come
Diventare un Hacker
Compilare un Programma C Utilizzando il Compilatore GNU GCC
Come
Compilare un Programma C Utilizzando il Compilatore GNU GCC
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Come
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Aprire un File '.Dat'
Come
Aprire un File '.Dat'
Come
Aprire i File .DLL
Digitare un TrattinoIl modo migliore per Digitare un Trattino
Creare un Virus
Come
Creare un Virus
Convertire un Numero dal Sistema Binario a Quello Decimale
Come
Convertire un Numero dal Sistema Binario a Quello Decimale
Reimpostare la Password dell'Utente SA in SQL Server
Come
Reimpostare la Password dell'Utente SA in SQL Server
Come
Inserire gli Spazi in HTML
Pubblicità

Riferimenti

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

Informazioni su questo wikiHow

Lo Staff di wikiHow
Co-redatto da:
Lo Staff di wikiHow
Staff di wikiHow - Redazione
Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.

Il Content Management Team di wikiHow controlla con cura il lavoro dello staff di redattori per assicurarsi che ogni articolo incontri i nostri standard di qualità. Questo articolo è stato visualizzato 23 804 volte
Categorie: Programmazione
In altre lingue
Questa pagina è stata letta 23 804 volte.

Hai trovato utile questo articolo?

Pubblicità