Een calculator programmeren in HTML

Pdf downloaden
Bijdragen van wikiHow-redactie

Bronnen

Pdf downloaden

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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • 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]
    • 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]
    • 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]
    • 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]
    • 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]
    • 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]
    • /form, /body en /html : deze commando's zijn afsluiters voor de overeenkomstige commando's die eerder zijn geopend in het document. [8]
    Advertentie
Deel 2
Deel 2 van 4:

Standaardcode voor een HTML-calculator

Pdf downloaden
  1. 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 
 >
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
Deel 3
Deel 3 van 4:

Je eigen calculator maken

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Er zijn diverse programma's om te gebruiken, maar voor de eenvoud houden we het bij TextEdit of Notepad. [9] [10]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • 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]
    • Op een pc klik je op de body van het document en daarna op Ctrl+V .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Je standaardbrowser zal je calculator openen in een nieuwe webpagina.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

Gerelateerde artikelen

Commentaar toevoegen aan HTML
XML bestanden openen
De broncode van een webpagina bekijken
De kleur van tekst in HTML veranderen
Spaties in HTML toevoegen
Een onschuldig virus creëren
De hex code van een kleur achterhalen op je computer
Programmeren in Python
Notepad gebruiken
Gegevens toevoegen aan een draaitabel in Excel
Programmeren in C
Een SQL Server database maken
Tekst centreren in HTML
Een HTML bestand omzetten naar Word
Advertentie

Bronnen

  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/

Over dit artikel

In andere talen
Deze pagina is 6.692 keer bekeken.

Was dit artikel nuttig?

Advertentie