Indhold

• At træde
• Del 1 af 4: Forståelse af koden
• Del 2 af 4: Standardkode til en HTML-regnemaskine
• Del 3 af 4: Lav din egen lommeregner
• Del 4 af 4: Brug din lommeregner
• Tips

Der er mange forskellige måder at beregne med en computer ved hjælp af den indbyggede lommeregner, men en anden måde er at oprette din egen ved hjælp af simpel HTML-kode. For at lave en lommeregner ved hjælp af HTML har du brug for nogle grundlæggende HTML-viden, og indtast derefter den nødvendige kode i en teksteditor og gem den som en HTML-fil. Du kan derefter bruge lommeregneren ved at åbne HTML-filen i din yndlingsbrowser. Ikke kun vil du være i stand til at udføre aritmetiske operationer i din browser, men du vil også være i stand til at lære nogle grundlæggende færdigheder om kunsten at programmere!

At træde

Del 1 af 4: Forståelse af koden

1. Lær, hvad hver HTML-funktion gør. Koden, du vil bruge til at oprette din lommeregner, består af mange forskellige typer syntaks, der sammen definerer de forskellige elementer i et dokument. Klik her for en forklaring på denne proces, eller læs videre for at lære mere om, hvad hver kodelinje vil gøre for at oprette lommeregneren.
   • html: Denne bit af syntaks fortæller resten af ​​dokumentet, hvilket sprog der skal bruges i koden. Der er flere sprog at kode på, og i dette tilfælde gør html> det klart for resten af ​​dokumentet, at det er på - du gættede det - html.
   • hoved: Fortæller dokumentet, at alt efter det er data om data, også kaldet "metadata". Kommandoen head> bruges normalt til at definere stilistiske elementer i et dokument, såsom titler, overskrifter osv. Tænk på det som en paraply, hvorunder resten af ​​koden er defineret.
   • titel: Titlen på dit dokument er angivet her. Denne attribut bruges til at angive titlen på dokumentet, når det åbnes i en HTML-browser.
   • body bgcolor = "#": Denne attribut indstiller farven på baggrunden af ​​HTML-siden og brødteksten. Nummeret i anførselstegnstrengen og efter # svarer til en bestemt farve.
   • tekst = "": Denne syntaks indstiller farven på dokumentets tekst.
   • form navn = "": Denne attribut specificerer navnet på en formular og bruges til at opbygge strukturen for det næste, baseret på hvad Javascript ved om betydningen af ​​formularnavnet. For eksempel er det formularnavn, vi skal bruge, "lommeregner", som vi skal bruge til at oprette en specifik struktur til dokumentet.
   • input type = "": Det er her, der sker noget. Attributten "input type" fortæller parseren af ​​dokumentet, hvilken type tekst der er indeholdt i værdierne mellem anførselstegnene. For eksempel kan dette være en tekst, en adgangskode, en knap (som det vil være tilfældet med lommeregneren) osv.
   • værdi = "": Denne kommando fortæller parseren af ​​dokumentet, hvad der er inkluderet i ovenstående inputtype. For en lommeregner er dette tal (1-9) og operationer (+, -, *, /, =).
   • onClick = "": Denne syntaks beskriver en begivenhed, der indikerer, at der skal gøres noget, når der klikkes på knappen. For en lommeregner ønsker vi, at teksten på hver knap også skal genkendes som sådan. Så før knappen "6" sætter vi document.calculator.ans.value + = "6" mellem anførselstegnene.
   • br: dette mærke opretter en ny linje i dokumentet, så teksten (eller noget andet) placeres efter det på en anden linje.
   • / form, / body og / html: disse kommandoer lukker for de tilsvarende kommandoer, der tidligere er åbnet i dokumentet.

Del 2 af 4: Standardkode til en HTML-regnemaskine

1. Kopier koden nedenfor. Vælg teksten i feltet nedenfor ved at holde venstre museknap nede og trække markøren fra nederst til venstre i feltet øverst til højre, så al tekst bliver blå. Tryk derefter på "Command + C" på en Mac eller "Ctrl + C" på en pc for at kopiere koden til udklipsholderen.

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 =" knap "værdi =" 2 "onClick =" document.calculator.ans.value + = '2 ""> input type = "knap" værdi = "3 "onClick =" document.calculator.ans.value + = '3' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" knap "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ærdi + = '-' "> input type =" knap "værdi =" 7 "onClick =" document.calculator.ans.value + = '7 ""> input type = "knap" værdi = "8" onClick = " document.calculator.ans.value + = '8' "> input type =" knap "værdi =" 9 "onClick =" document.calculator.ans.value + = '9 ""> input type = "knap" værdi = " *" onClick = "document.calcul ator.ans.value + = ' *' "> input type =" knap "værdi =" / "onClick =" document.calculator.ans.value + = '/' "> input type =" knap "værdi =" 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 isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Del 3 af 4: Lav din egen lommeregner

1. Åbn en teksteditor på din computer. Der er flere programmer, der skal bruges, men for enkelheds skyld holder vi os til TextEdit eller Notepad.
   • På en Mac skal du klikke på forstørrelsesglasset i øverste højre hjørne af skærmen for at åbne Spotlight. Når du kommer dertil, skal du skrive TextEdit og klikke på TextEdit-programmet, som nu skal vælges med blåt.
   • På en pc skal du åbne Start-menuen nederst til venstre på skærmen. Skriv Notesblok i søgefeltet, og klik på Notesblok-applikationen, som vises i søgefeltet til højre.
2. Indsæt HTML-koden til en lommeregner i dokumentet.
   • På en Mac skal du klikke på dokumentets brødtekst og trykke på Kommando + V.. Klik derefter på Format øverst på skærmen og derefter Lav almindelig tekst efter at have indsat koden.
   • På en pc skal du klikke på dokumentets brødtekst og derefter på Ctrl + V..
3. Gem filen. Du gør dette via "File" i hovedmenuen i vinduet og derefter med Gem som... på en pc eller Gemme... på en Mac fra rullemenuen.
4. Føj en HTML-udvidelse til filnavnet. I menuen "Gem som ..." skal du skrive filnavnet efterfulgt af ".html" og derefter klikke på "Gem". Hvis du f.eks. Vil navngive denne fil "Min første lommeregner", skal du gemme filen som "Min første lommeregner.html".

Del 4 af 4: Brug din lommeregner

1. Find den fil, du lige har oprettet. For at gøre dette skal du skrive navnet på filen i Spotlight eller i søgefeltet i Start-menuen som forklaret i det foregående trin. Det er ikke nødvendigt også at skrive "html" -udvidelsen.
2. Klik på din fil for at åbne den. Din standardbrowser åbner din lommeregner på en ny webside.
3. Klik på knapperne på lommeregneren for at bruge den. Løsningerne til dine ligninger vises nu i svarlinjen.

Tips

• Du kan medtage denne lommeregner på en webside, hvis du ønsker det.
• Du kan også bruge HTML-stilarter til at ændre lommeregnerens udseende.