Hur man skapar en kalkylator med hjälp av HTML-koden

Det finns en myriad av olika sätt att utföra matematiska beräkningar med en stationär dator med bara det inbyggda operativsystemet miniräknare, men om du är en kreativ person som gillar att sticka ut, kan du försöka skapa en anpassad räknaren med HTML-kod. För att göra detta måste du lära dig lite grundläggande kunskaper om HTML, kopiera nödvändig kod till en enkel textredigerare och spara den som en HTML-fil. Då kan du använda din personliga räknare genom att öppna HTML-filen i din favoritwebbläsare. På detta sätt kommer du inte bara att kunna utföra de mest komplexa matematiska beräkningar med hjälp av en enkel webbläsare, kommer du också har lärt sig några grundläggande programmering konst!

Del 1

Lär dig den grundläggande HTML-syntaxen

Bildnamn Skapa en kalkylator med HTML-steg 1

Lär dig hur HTML-koden fungerar och de enskilda elementen som komponerar den. Källkoden du använder för att skapa en egen miniräknare består av många sökord i HTML-syntax, som tillsammans kommer att definiera alla aspekter och drift av de element som förekommer i det färdiga dokumentet. Consult den här artikeln för mer information om hela processen att skapa ett HTML-dokument eller fortsätt läsa för att förstå vad som behövs för varje enskild kod som används i artikeln i fråga, för att skapa provkalkylatorn.

HTML: Det är ett nyckelord i HTML-syntax som talar om för webbläsaren Internet (den enhet som kommer att tolka HTML-koden för att visa videoinnehåll på denna) som resten av texten i dokumentet är HTML-kod. För att skapa ett program finns det många programmeringsspråk, i detta fall taggen indikerar att resten av koden skrevs direkt i HTML.
huvud: Det är en HTML-kod som indikerar för tolken att all kod den innehåller avser "metadata", det vill säga informationen som beskriver data. Taggen Det brukar användas för att definiera de grafiska stilar som adopteras av de element som utgör dokumentet, till exempel sidtitel, rubriker osv. Tänk på HTML som en struktur uppdelad i flera nivåer, där taggen "huvud" identifiera vad som kommer att innehålla och som alla andra kommer att hänvisa till.
titel: den här taggen definierar vad som ska visas som titeln på dokumentet (därför på den relativa webbsidan). Det här attributet används för att definiera texten som kommer att visas av webbläsaren i titelfältet på webbsidan.
kropp bgcolor = "#": den här taggen och dess uppsättning attribut används för att definiera den färg som ska användas för bakgrunden och texten som visas på webbsidan. Det hexadecimala talet som visas i citat, tillsammans med symbolen "#", indikerar färg att använda för det angivna objektet.
text = "": Detta attribut används för att ändra färgen på texten till det element som det hänvisar till (i detta fall taggen "kropp").
formulärnamn ="": Den här taggen och dess attribut används för att definiera namnet på formuläret. Denna information kommer att användas för att skapa den interna strukturen av koden och att av HTML-dokumentet, så att jаvascript-kompilatorn vet vilka bildar, avser varje element av dokumentet och varje händelse länkad till den. Formen definieras till exempel i koden i artikeln "kalkylator", då skapar vi en struktur med det här namnet som vi kan referera till i resten av koden för att hantera handlingar och händelser som genereras av användaren.
ingångstyp ="": Den här taggen används för att definiera de kontroller som användaren kan använda för att utföra en specifik åtgärd eller för att infoga data. Det kan till exempel vara ett textfält, ett lösenord eller en knapp (som för vår räknare).
värde ="": Detta attribut anger värdet som kommer att visas inom det inmatade elementet som definieras med taggen "ingångstyp". När det gäller vår räknare visas siffrorna (1 till 9) och de matematiska operatörerna (+, -, *, /, =).
onclick ="": Denna del av syntaxen tjänar till att definiera åtgärden kopplad till inmatningselementet, det vill säga händelsen som måste utlösas när knappen trycks av användaren. I vårt exempel vill vi att värdet på den tryckta knappen visas i textfältet "resultat" för att visa användaren den beräkning han utför. När det gäller knappen "6", evenemanget "onclick" kommer därför att anta följande värde "document.calculator.ans.value + = `6`".
br: Den här taggen sätter in en radbrytning i dokumentet, så du måste sätta ihop. Allt som behöver visas senare i HTML-dokumentet visas på en ny textrad.
/ form, / body och / html: Dessa kommandon representerar stängningskoderna för motsvarande öppnings taggar och används för att slutföra definitionen av respektive avsnitt i HTML-dokumentet.

Del 2

HTML-kod för att skapa en enkel kalkylator

Kopiera koden i det här avsnittet i artikeln. Markera texten i rutan nedan med muspekaren så att den blir helt blå. Börja i övre vänstra hörnet och håll ner vänster musknapp och flytta till nedre högra hörnet. Tryck nu på snabbvalskombinationen vid den här tiden "Kommando + C", på macOS-system, eller "Ctrl + C", på Windows-system för att kopiera den valda texten till systemklippet.

HTML-kalkylator

Del 3

Skapa din egen kalkylator

Bildnamn Skapa en kalkylator med hjälp av HTML-steg 3

Öppna en textredigerare på din dator. Det finns flera program som kan användas för att utföra detta steg, men för enkelhet och enkelhet är det bättre att använda TextEdit eller Notepad.

På macOS-system klickar du på förstoringsglasikonen längst upp till höger på skärmen för att öppna Spotlight-systemverktyget. Gör nu en sökning med nyckelordet "Textredigerare" (utan citat), välj sedan den relativa ikonen som du hittar i resultatlistan.
På Windows-system, gå till menyn "Start" placeras i nedre vänstra hörnet på skrivbordet. Skriv in sökordet "Anteckningar" inom sökfältet, välj sedan den relevanta ikonen som finns i resultatlistan.

Bildnamn Skapa en räknare med hjälp av HTML-steg 4

Klistra in HTML-koden, som du kopierade från föregående avsnitt i artikeln, till ett nytt tomt dokument.

På macOS-system klickar du på en tom punkt i det nya dokumentet som visas och trycker sedan på genvägsknappkombinationen "Kommando + V". Efter att ha klistrat in koden, gå till menyn "format" Finns överst i textredigeringsfönstret och väljer alternativet "Konvertera till text endast format".

På Windows-system markerar du en tom plats i det nya dokumentet som uppstod, och trycker sedan på kombinationsnyckeln "Ctrl + V".

Bildnamn Skapa en kalkylator med HTML-steg 5

Spara dokumentet. För att göra detta, öppna menyn "fil" placera längst upp till vänster i fönstret och välj sedan alternativet "Spara som ...", på Windows-system, eller "Spara ...", på Mac.

Bildnamn Skapa en kalkylator med HTML-steg 6

Lägg till tillägget "HTML" till filnamnet. Inom fältet i förhållande till namnet som ska tilldelas dokumentet, som du hittar i dialogrutan "Spara som", skriv namnet som ska tilldelas filen följd av förlängningen ".html" (utan citat), tryck sedan på knappen "Spara". Till exempel, om du vill använda namnet "min första miniräknare", du måste spara filen som "lamiaprimacalcolatrice.html"

Del 4

Använd HTML-kalkylatorn

Bildnamn Skapa en kalkylator med HTML-steg 7

Leta reda på den HTML-fil du just skapat. För att göra detta, utför en sökning med funktionen "Spotlight" eller sökfältet på menyn eller skärmen "Start", som beskrivs i föregående avsnitt i artikeln. I det här fallet är det inte nödvändigt att också skriva förlängningen ".html".

Bildnamn Skapa en räknare med hjälp av HTML-steg 8

Klicka på filikonen som visas i sökresultatlistan för att öppna den. Att vara en HTML-fil öppnas automatiskt med hjälp av systemens standardwebbläsare.

Bildnamn Skapa en kalkylator med HTML-steg 9

Använd räknarknapparna som visades på skärmen, som du normalt skulle. Lösningen av den infogade ekvationen kommer att visas i textfältet "resultat", efter att ha tryckt på knappen "=".

tips

Du kan ange HTML-koden för kalkylatorn som visas i den här artikeln på en webbsida.
Om du vill kan du också använda stilrelaterade HTML-taggar för att ändra ditt kalkylatorns visuella utseende.

Dela på sociala nätverk:

Relaterade