Hoe maak je een rekenmachine met HTML

Schrijver: John Stephens
Datum Van Creatie: 21 Januari 2021
Updatedatum: 28 April 2024
Anonim
How to make calculator using html and css
Video: How to make calculator using html and css

Inhoud

In dit artikel: De code begrijpen De basiscode van de calculator schrijven De calculator maken De calculator gebruiken11 Referenties

Er zijn veel manieren om berekeningen op uw computer uit te voeren met behulp van de ingebouwde rekenmachine, maar u kunt er ook zelf een maken met alleen HTML-code. Om dit te doen, moet u de basis van HTML leren voordat u de benodigde code kopieert naar een e-bestand dat u opslaat met extension.html. Open vervolgens het bestand in uw favoriete browser om toegang te krijgen tot de rekenmachine. Met deze techniek kunt u berekeningen rechtstreeks in uw browser uitvoeren terwijl u de basisvaardigheden van het programmeren van computers leert.


stadia

Deel 1 De code begrijpen



  1. Begrijp hoe de code werkt. De code die u gebruikt om de calculator te maken, is gebaseerd op kleine stukjes code die met elkaar samenwerken om verschillende elementen van het document te definiëren. U kunt meer te weten komen over HTML door op deze link te klikken of u kunt lezen wat elke regel doet in de code die u voor de calculator gaat gebruiken.
    • html: dit stukje code geeft aan de rest van het document de gebruikte taal aan. Er worden veel verschillende programmeertalen gebruikt en de tag geeft aan de rest van het document aan dat het deze keer HTML is die u gebruikt.
    • hoofd : dit vertelt het document dat de volgende informatie data is die ook "metadata" wordt genoemd. De tag wordt meestal gebruikt om stilistische elementen van het document te definiëren, zoals de titel, kopteksten, enz. Het is als een paraplu waaronder de rest van de code is gedefinieerd.
    • titel : Dit is de titel die u aan het document geeft. Deze tag wordt gebruikt om de titel van het document weer te geven zodra het in de browser is geopend.
    • body bgcolor = "#" : Hiermee wordt een achtergrondkleur voor het document ingesteld. Het getal dat na de scherpe verschijnt, komt overeen met een vooraf bepaalde kleur.
    • = '' : Het woord tussen aanhalingstekens geeft de kleur van de e op het document aan.
    • formuliernaam = "" : Dit kenmerk geeft de naam aan van het formulier dat wordt gebruikt voor de structuur van wat erna komt, zodat JavaScript weet welk formulier wordt uitgesproken. De formuliernaam die we gebruiken, is bijvoorbeeld "calculator", waarmee de specifieke structuur van het document wordt gemaakt.
    • invoer type = "" : dit is waar de actie zal plaatsvinden. Het kenmerk "invoertype" vertelt het document het waardetype voor de e in de rest van de haakjes. Dit kan bijvoorbeeld e zijn, een wachtwoord, een knop (zoals voor onze rekenmachine), enzovoort.
    • waarde = "" : Dit kenmerk vertelt het document wat het kenmerk "invoertype" zal bevatten. Voor een rekenmachine geeft u de getallen van 1 tot 9 en de rekenkundige tekens (+, -, *, /, =) weer.
    • onclick = "" : Dit stukje code beschrijft een gebeurtenis die het document vertelt dat er iets moet gebeuren wanneer de knop wordt geactiveerd. Voor een rekenmachine wilt u het nummer weergeven dat overeenkomt met de knop die de gebruiker heeft ingedrukt. Als knop 6 bijvoorbeeld is ingeschakeld, wilt u document.calculator.in.value + = 6 tussen aanhalingstekens plaatsen.
    • br : het is een tag die een regeleinde aangeeft, de rest van de volgende code verschijnt hieronder.
    • / form, / body en / html Deze afsluitende tags vertellen de browser dat de eerder geopende tags nu zijn voltooid en gesloten.

Deel 2 Schrijf de basiscode van de rekenmachine

Kopieer de onderstaande code. Selecteer de e hieronder door de cursor in de linkerbovenhoek van het vak ingedrukt te houden en naar de rechteronderhoek te slepen zodat de hele e blauw wordt weergegeven. Druk vervolgens op "Command + C" op een Mac of "Ctrl + C" op een pc om de e te kopiëren.


HTML-calculator

Het resultaat is

Deel 3 De calculator maken




  1. Open een e-bestand op de computer. Er zijn veel programma's die u kunt gebruiken, maar omwille van de kwaliteit wordt het aanbevolen om Bewerken of Kladblok te gebruiken.
    • Klik op een Mac op het vergrootglas rechtsboven in het scherm om Spotlight te openen. Eenmaal geopend, typ uitgeven en klik op het programma dat blauw moet worden geselecteerd.
    • Klik op een pc op de knop Beginnen linksonder. Typ in de zoekbalk blocnote en klik op de toepassing die in de resultaten moet verschijnen.


  2. Plak de HTML-code in het document.
    • Klik op een Mac gewoon in de hoofdtekst van het document en druk op "Command + V". Klik vervolgens op formaat boven aan het scherm en vervolgens aan Bekijk in eenvoudige e na het plakken van de code.
    • Klik op een pc in de hoofdtekst van het document en plak de code door op te drukken "Ctrl + V".


  3. Sla het bestand op. Klik gewoon op de knop file links bovenaan het venster en vervolgens verder Opslaan als ... op een pc of Opnemen... op een Mac in het vervolgkeuzemenu dat verschijnt.


  4. Voeg de HTML-extensie toe. Typ in het menu de bestandsnaam gevolgd door ".html" voordat u klikt Opnemen. Als u dit bestand bijvoorbeeld 'mijn eerste rekenmachine' wilt noemen, kunt u het als naam geven: 'MyPremierCalculette.html'.

Deel 4 De calculator gebruiken



  1. Zoek het HTML-bestand. Typ eenvoudig de bestandsnaam in Spotlight op Mac of in de zoekbalk van het Windows Start-menu. Het is niet nodig om de extensie van het bestand te typen.


  2. Klik erop om het te openen. Uw standaardbrowser zou de rekenmachine op een nieuw tabblad moeten openen.


  3. Klik op de knoppen om het te gebruiken. De resultaten van uw berekeningen moeten in de daarvoor bestemde balk verschijnen.

Hoe droge markers te herstellen

Robert Simon

April 2024

Hoe vaak i uw chrijven of tekenen onderbroken door de kra veroorzaakt door een droge pen? Al u haar geen aanvaardbare levenduur kunt geven, wee dan niet bang; u kunt deze pennen meetal (tijdelijk) met...

Hoe maak je een Guioza

Robert Simon

April 2024

Guioza zijn gebakken dumpling met rijke en gevarieerde vullingen. Ze zijn gemaakt van deeg, aardappelen of brood, en hun vulling kan betaan ​​uit gehakt, groenten, champignon en zelf fruit, zoal perzi...

Zorg Ervoor Dat Je Leest