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 di 4:
Imparare la Sintassi di Base dell'HTML

  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 di 4:
Codice HTML per la Creazione di una Semplice Calcolatrice

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 di 4:
Creare la Propria Calcolatrice

  1. 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. 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. 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. 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 di 4:
Usare la Calcolatrice HTML

  1. 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. 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. 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à

Informazioni su questo wikiHow

Lo Staff di wikiHow
Co-redatto da
Redazione di wikiHow
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 12 903 volte
Categorie: Programmazione
Questa pagina è stata letta 12 903 volte.

Hai trovato utile questo articolo?

Pubblicità