Programmering av en miniräknare i HTML

Video: The Great Gildersleeve: Fishing at Grass Lake / Bronco the Broker / Sadie Hawkins Dance

Innehåll

Att gå
Del 1 av 4: Förstå koden
Del 2 av 4: Standardkod för en HTML-kalkylator
Del 3 av 4: Skapa din egen räknare
Del 4 av 4: Använd din miniräknare
Tips

Det finns många olika sätt att beräkna med en dator med hjälp av den inbyggda kalkylatorn, men ett annat sätt är att skapa din egen med enkel HTML-kod. För att skapa en miniräknare med HTML behöver du grundläggande HTML-kunskaper, ange sedan nödvändig kod i en textredigerare och spara den som en HTML-fil. Du kan sedan använda miniräknaren genom att öppna HTML-filen i din favoritwebbläsare. Inte bara kommer du att kunna utföra aritmetiska operationer i din webbläsare, men du kommer också att kunna lära dig några grundläggande färdigheter om konsten att programmera!

Att gå

Del 1 av 4: Förstå koden

Lär dig vad varje HTML-funktion gör. Koden du kommer att använda för att skapa din miniräknare består av många olika typer av syntax som tillsammans definierar de olika elementen i ett dokument. Klicka här för en förklaring av denna process, eller läs vidare för att lära dig mer om vad varje kodrad kommer att göra för att skapa miniräknare.
- html: Denna bit av syntax berättar för resten av dokumentet vilket språk som kommer att användas i koden. Det finns flera språk att koda på och i det här fallet gör html> det klart för resten av dokumentet att det finns - du gissade det - html.
- huvud: Berättar för dokumentet att allt efter det är data om data, även kallat "metadata". Kommandot head> används vanligtvis för att definiera stilistiska element i ett dokument, såsom titlar, rubriker, etc. Tänk på det som ett paraply under vilket resten av koden definieras.
- titel: Dokumentets titel anges här. Detta attribut används för att ange titeln på dokumentet när det öppnas i en HTML-webbläsare.
- body bgcolor = "#": Detta attribut anger färgen på bakgrunden på HTML-sidan och brödtexten. Siffran inom citatteckensträngen och efter # motsvarar en viss färg.
- text = "": Denna syntax ställer in färgen på dokumentets text.
- formulärnamn = "": Detta attribut anger namnet på ett formulär och används för att bygga strukturen för vad som kommer nästa, baserat på vad Javascript vet om innebörden av formulärnamnet. Till exempel är formulärnamnet vi ska använda "kalkylator", som vi ska använda för att skapa en specifik struktur för dokumentet.
- ingångstyp = "": Det är här något händer. Attributet "inmatningstyp" berättar för tolkaren av dokumentet vilken typ av text som finns i värdena mellan citattecken. Det kan till exempel vara en text, ett lösenord, en knapp (som kommer att vara fallet med miniräknare), etc.
- värde = "": Detta kommando berättar tolkaren av dokumentet vad som ingår i ovanstående inmatningstyp. För en miniräknare är detta siffror (1-9) och operationer (+, -, *, /, =).
- onClick = "": Denna syntax beskriver en händelse, vilket indikerar att något ska göras när du klickar på knappen. För en miniräknare vill vi att texten på varje knapp också ska kännas igen. Så innan "6" -knappen sätter vi document.calculator.ans.value + = "6" mellan citattecken.
- br: den här taggen skapar en ny rad i dokumentet så att texten (eller något annat) placeras efter den på en annan rad.
- / form, / body och / html: dessa kommandon är stängare för motsvarande kommandon som tidigare öppnats i dokumentet.

Del 2 av 4: Standardkod för en HTML-kalkylator

Kopiera koden nedan. Markera texten i rutan nedan genom att hålla ned vänster musknapp och dra markören nedifrån till vänster i rutan uppe till höger så att all text blir blå. Tryck sedan på "Command + C" på en Mac eller "Ctrl + C" på en dator för att kopiera koden till Urklipp.

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' "> ingångstyp =" knapp "värde =" + "onClick =" document.calculator.ans.value + = '+' "> ingångstyp =" knapp "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. värde + = '-' "> ingångstyp =" knapp "värde =" 7 "onClick =" document.calculator.ans.value + = '7 ""> ingångstyp = "knapp" värde = "8" onClick = " document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9 ""> input type = "button" value = " *" onClick = "document.calcul ator.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> Svaret är input typ =" textfield "name =" ans "value =" "> / form> / body> / html>

Del 3 av 4: Skapa din egen räknare

Öppna en textredigerare på din dator. Det finns flera program att använda, men för enkelhetens skull håller vi oss till TextEdit eller Notepad.
- Klicka på förstoringsglaset på en Mac längst upp till höger på skärmen för att öppna Spotlight. När du kommer dit skriver du TextEdit och klickar på programmet TextEdit, som nu ska väljas i blått.
- Öppna Start-menyn längst ned till vänster på skärmen på en dator. Skriv Anteckningar i sökfältet och klicka på Anteckningar-programmet som kommer att visas i sökfältet till höger.
Klistra in HTML-koden för en miniräknare i dokumentet.
- På en Mac klickar du på dokumentets kropp och trycker på Kommando + V.. Klicka sedan på Formatera högst upp på skärmen och sedan Gör vanlig text efter att ha klistrat in koden.
- På en dator klickar du på dokumentets kropp och sedan på Ctrl + V..
Spara filen. Du gör detta via "File" i huvudmenyn i fönstret och sedan med Spara som... på en PC eller Spara... på en Mac från rullgardinsmenyn.
Lägg till ett HTML-tillägg till filnamnet. I menyn "Spara som ..." skriver du filnamnet följt av ".html" och klickar sedan på "Spara". Om du till exempel vill namnge den här filen "Min första kalkylator", spara filen som "Min första kalkylator.html".

Del 4 av 4: Använd din miniräknare

Hitta filen du just skapade. För att göra detta skriver du namnet på filen i Spotlight eller i sökfältet på Start-menyn som förklarats i föregående steg. Det är inte nödvändigt att också skriva "html" -tillägget.
Klicka på din fil för att öppna den. Din standardwebbläsare öppnar din räknare på en ny webbsida.
Klicka på knapparna på miniräknaren för att använda den. Lösningarna på dina ekvationer visas nu i svarsfältet.