Een calculator programmeren in HTML

Er zijn veel verschillende manier om met behulp van de ingebouwde calculator te rekenen met een computer, maar een andere manier is om er zelf een te bouwen met eenvoudige HTML-code. Om een calculator te maken met behulp van HTML, heb je wat basiskennis nodig van HTML, waarna je de benodigde code invoert in een teksteditor en opslaat als HTML-bestand. Je kunt vervolgens de calculator gebruiken, door het HTML-bestand te openen in je favoriete browser. Hiermee ben je niet alleen in staat om rekenkundige bewerkingen uit te voeren in je browser, maar kun je ook een aantal basisvaardigheden leren over de kunst van het programmeren!

Deel 1

Deel 1 van 4:

De code begrijpen

Pdf downloaden

1
Leer wat elke HTML-functie precies doet. De code die je gaat gebruiken voor het maken van je calculator bestaat uit veel verschillende soorten syntax die samen de verschillende elementen van een document bepalen. Klik hier voor een uitleg over dit proces, of lees verder om meer te leren over wat elke regel code doet, die je gaat gebruiken voor bet maken van de calculator.
- html: Dit stukje syntax vertelt de rest van het document welke taal er gaat worden gebruikt in de code. Er zijn meerdere talen om in te coderen en in dit geval maakt <html> voor de rest van het document duidelijk dat het in – je raadt het al – html staat.^[1]XBron
- head: Vertelt het document dat alles wat erna komt gegevens zijn over gegevens, ook wel "metadata". Het <head>-commando wordt meestal gebruikt voor het definiëren van stilistische elementen van een document, zoals titels, koppen, enz. Beschouw het als een paraplu waaronder de rest van de code wordt gedefineerd.^[2]XBron
- title: Hier wordt de titel van je document aangegeven. Dit attribuut wordt gebruikt om aan te geven welke titel het document krijgt wanneer het in een html-browser wordt geopend.
- body bgcolor="#": Dit attribuut stelt de kleur in van de achtergrond van de HTML-pagina en de body. Het getal binnen de reeks aanhalingstekens en na de # komt overeen met een specifieke kleur.
- text="": Deze syntax stelt de kleur in van de tekst van het document.
- form name="": Dit attribuut specificeert de naam van een formulier, en wordt gebruikt voor het opbouwen van de structuur van dat wat erna komt, op basis van dat wat Javascript weet van de betekenis van de naam van het formulier. Bijvoorbeeld, de formulier-naam die we gaan gebruiken is 'calculator', welke we gaan gebruiken voor het creëren van een specifieke structuur voor het document.^[3]XBron
- input type="": Dit is waar er iets gebeurt. Het attribuut 'input type' vertelt de parser van het document welke soort tekst er in de waarden tussen de aanhalingstekens staat. Bijvoorbeeld, dit kan een tekst zijn, een wachtwoord, een knop (zoals dit het geval zal zijn bij de calculator), etc.^[4]XBron
- value="": Dit commando vertelt de parser van het document wat er omsloten wordt in het bovenstaande input-type. Voor een calculator zijn dit cijfers (1-9) en bewerkingen (+,-,*,/,=).^[5]XBron
- onClick="": Deze syntax beschrijft een gebeurtenis, waarmee wordt aangegeven dat er iets moet gebeuren wanneer er op de knop wordt geklikt. Voor een calculator willen we dat de tekst op elke knop ook als zodanig wordt herkend. Dus voor de '6'-knop, plaatsen we document.calculator.ans.value+='6' tussen de aanhalingstekens.^[6]XBron
- br: deze tag creëert een nieuwe regel in het document, zodat de tekst (of iets anders) erna op een volgende regel wordt geplaatst.^[7]XBron
- /form, /body en /html: deze commando's zijn afsluiters voor de overeenkomstige commando's die eerder zijn geopend in het document.^[8]XBron
Advertentie

Deel 2

Deel 2 van 4:

Standaardcode voor een HTML-calculator

Pdf downloaden

1
Kopieer de onderstaande code. Selecteer de tekst in het onderstaande kader, door met ingedrukte linkermuisknop de cursor van links onderin het vak naar rechts bovenin te slepen, waardoor alle tekst blauw kleurt. Druk vervolgens op 'Command+C' op een Mac of 'Ctrl+C' op een pc om de code naar het klembord te kopiëren.

<html><head><title>HTML Calculator</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="Reset"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>Het antwoord is<input type="textfield" name="ans" value=""></form></body></html>

How.com.vn Nederlands: Create a Calculator Using HTML Step 2

Deel 3

Deel 3 van 4:

Je eigen calculator maken

Pdf downloaden

1
Open een teksteditor op je computer. Er zijn diverse programma's om te gebruiken, maar voor de eenvoud houden we het bij TextEdit of Notepad.^[9]XBron^[10]XBron
- Op een Mac klik je op het vergrootglas in de hoek rechtsboven in het scherm om Spotlight te openen. Ben je daar aangekomen, typ dan TextEdit en klik op het TextEdit-programma, welke nu blauw geselecteerd moeten zijn.
- Op een pc open je het Start-menu links onderin het scherm. In de zoekbalk typ je Kladblok en klik je op de Notepad-applicatie, welke in de zoekbalk aan de rechterkant zal verschijnen.
2
Plak de HTML-code voor een calculator in het document.
- Op een Mac klik je op de body van het document en druk je op Command+V. Klik daarna op Format bovenin het scherm en daarna op Make Plain Text na het plakken van de code.^[11]XBron
- Op een pc klik je op de body van het document en daarna op Ctrl+V.
Dit doe je via 'Bestand' in het hoofdmenu van het venster, en daarna met Opslaan als... op een pc of Opslaan... op een Mac in het keuzemenu.
In het menu 'Opslaan als...' type je de bestandsnaam, gevolgd door '.html', en daarna klik je op 'Opslaan'. Bijvoorbeeld, als je dit bestand 'Mijn eerste calculator' wilt noemen, dan sla je het bestand op als 'Mijn eerste calculator.html'.
Advertentie

Deel 4

Deel 4 van 4:

Gebruik je calculator

Pdf downloaden

Hiertoe typ je de naam van het bestand in Spotlight of in de zoekbalk van het Start-menu zoals uitgelegd in de vorige stap. Het is niet nodig om ook de 'html'-extensie te typen.
Je standaardbrowser zal je calculator openen in een nieuwe webpagina.
De oplossingen voor je vergelijkingen verschijnen nu in de antwoordbalk.
Advertentie

Tips

Je kunt deze calculator opnemen in een webpagina, als je dat wilt.
Je kunt ook gebruik maken van HTML-stijlen om het uiterlijk van de calculator te wijzigen.

Advertentie