Programmering av kalkulator i HTML

Video: Build A Simple Calculator With JavaScript | Mini Project For Beginners

Innhold

Å trå
Del 1 av 4: Forstå koden
Del 2 av 4: Standardkode for en HTML-kalkulator
Del 3 av 4: Lag din egen kalkulator
Del 4 av 4: Bruk kalkulatoren
Tips

Det er mange forskjellige måter å beregne med en datamaskin ved hjelp av den innebygde kalkulatoren, men en annen måte er å bygge din egen ved hjelp av enkel HTML-kode. For å lage en kalkulator ved hjelp av HTML, trenger du litt grunnleggende HTML-kunnskap, og skriv deretter inn den nødvendige koden i et tekstredigeringsprogram og lagre den som en HTML-fil. Du kan deretter bruke kalkulatoren ved å åpne HTML-filen i favorittleseren din. Ikke bare vil du kunne utføre aritmetiske operasjoner i nettleseren din, men du vil også kunne lære noen grunnleggende ferdigheter om kunsten å programmere!

Å trå

Del 1 av 4: Forstå koden

Lær hva hver HTML-funksjon gjør. Koden du vil bruke til å lage kalkulatoren din består av mange forskjellige typer syntaks som sammen definerer de forskjellige elementene i et dokument. Klikk her for en forklaring på denne prosessen, eller les videre for å lære mer om hva hver kodelinje vil gjøre for å lage kalkulatoren.
- html: Denne syntaksen forteller resten av dokumentet hvilket språk som skal brukes i koden. Det er flere språk å kode på, og i dette tilfellet gjør html> det klart for resten av dokumentet at det er - du gjettet det - html.
- hode: Forteller dokumentet at alt etter det er data om data, også kalt "metadata". Hodet> -kommandoen brukes vanligvis til å definere stilistiske elementer i et dokument, for eksempel titler, overskrifter, etc. Tenk på det som en paraply der resten av koden er definert.
- tittel: Tittelen på dokumentet er angitt her. Dette attributtet brukes til å indikere tittelen på dokumentet når det åpnes i en HTML-nettleser.
- kropp bgcolor = "#": Denne attributtet angir fargen på bakgrunnen til HTML-siden og brødteksten. Tallet i anførselstegnstrengen og etter # tilsvarer en bestemt farge.
- tekst = "": Denne syntaksen angir fargen på dokumentet.
- skjema navn = "": Denne attributtet spesifiserer navnet på et skjema, og brukes til å bygge strukturen til det som kommer neste, basert på hva Javascript vet om betydningen av skjemanavnet. For eksempel er skjemaet navnet vi skal bruke "kalkulator", som vi skal bruke for å lage en spesifikk struktur for dokumentet.
- inngangstype = "": Det er her noe skjer. Attributtet "input type" forteller parseren av dokumentet hva slags tekst som finnes i verdiene mellom anførselstegnene. Dette kan for eksempel være en tekst, et passord, en knapp (som vil være tilfellet med kalkulatoren) osv.
- verdi = "": Denne kommandoen forteller parseren av dokumentet hva som er inkludert i inndatatypen ovenfor. For en kalkulator er dette tall (1-9) og operasjoner (+, -, *, /, =).
- onClick = "": Denne syntaksen beskriver en hendelse, noe som indikerer at noe skal gjøres når du klikker på knappen. For en kalkulator vil vi at teksten på hver knapp også skal bli gjenkjent. Så før "6" -knappen setter vi document.calculator.ans.value + = "6" mellom anførselstegnene.
- br: denne koden oppretter en ny linje i dokumentet, slik at teksten (eller noe annet) plasseres etter den på en annen linje.
- / form, / body og / html: disse kommandoene er lukkere for de tilsvarende kommandoene som tidligere er åpnet i dokumentet.

Del 2 av 4: Standardkode for en HTML-kalkulator

Kopier koden nedenfor. Velg teksten i boksen nedenfor ved å holde nede venstre museknapp og dra markøren nederst til venstre i boksen øverst til høyre, slik at all tekst blir blå. Trykk deretter "Command + C" på en Mac eller "Ctrl + C" på en PC for å kopiere koden til utklippstavlen.

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 =" 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. 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.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 er input type =" textfield "name =" ans "value =" "> / form> / body> / html>

Del 3 av 4: Lag din egen kalkulator

Åpne et tekstredigeringsprogram på datamaskinen. Det er flere programmer å bruke, men for enkelhets skyld vil vi holde oss til TextEdit eller Notepad.
- På en Mac klikker du på forstørrelsesglasset øverst til høyre på skjermen for å åpne Spotlight. Når du kommer dit, skriver du inn TextEdit og klikker på TextEdit-programmet, som nå skal velges i blått.
- Åpne Start-menyen nederst til venstre på skjermen på en PC. Skriv inn Notisblokk i søkefeltet og klikk på Notisblokk-applikasjonen, som vises i søkefeltet til høyre.
Lim inn HTML-koden for en kalkulator i dokumentet.
- På en Mac klikker du på hoveddelen av dokumentet og trykker på Kommando + V.. Klikk deretter på Format øverst på skjermen og deretter Lag vanlig tekst etter å ha limt inn koden.
- På en PC klikker du på hoveddelen av dokumentet og deretter på Ctrl + V..
Lagre filen. Du gjør dette via "File" i hovedmenyen i vinduet, og deretter med Lagre som... på en PC eller Lagre... på en Mac fra rullegardinmenyen.
Legg til en HTML-utvidelse i filnavnet. Skriv inn filnavnet i "Lagre som ..." -menyen, etterfulgt av ".html", og klikk deretter "Lagre". Hvis du for eksempel vil gi denne filen navnet "Min første kalkulator", lagrer du filen som "Min første kalkulator.html".

Del 4 av 4: Bruk kalkulatoren

Finn filen du nettopp opprettet. For å gjøre dette, skriv inn navnet på filen i Spotlight eller i søkefeltet på Start-menyen som forklart i forrige trinn. Det er ikke nødvendig å også skrive inn "html" -utvidelsen.
Klikk på filen for å åpne den. Standardleseren din åpner kalkulatoren på en ny webside.
Klikk på knappene på kalkulatoren for å bruke den. Løsningene på ligningene dine vil nå vises i svarfeltet.