Programiranje kalkulatorja v HTML

Avtor: Tamara Smith
Datum Ustvarjanja: 27 Januar 2021
Datum Posodobitve: 1 Julij. 2024
Anonim
HTML za pocetnike,Internet programiranje 2016!
Video.: HTML za pocetnike,Internet programiranje 2016!

Vsebina

Obstaja veliko različnih načinov za izračun z računalnikom z vgrajenim kalkulatorjem, drug način pa je, da z uporabo preproste kode HTML ustvarite svojega. Če želite kalkulator izdelati z uporabo HTML-ja, potrebujete nekaj osnovnega znanja HTML-ja, nato vnesite potrebno kodo v urejevalnik besedil in jo shranite kot datoteko HTML. Nato lahko kalkulator uporabite tako, da v najljubšem brskalniku odprete datoteko HTML. Ne samo, da boste lahko v svojem brskalniku izvajali aritmetične operacije, temveč se boste lahko naučili tudi nekaj osnovnih veščin o umetnosti programiranja!

Stopati

1. del od 4: Razumevanje kode

  1. Naučite se, kaj počne vsaka funkcija HTML. Koda, ki jo boste uporabili za ustvarjanje kalkulatorja, je sestavljena iz številnih različnih vrst sintakse, ki skupaj določajo različne elemente dokumenta. Kliknite tukaj za razlago tega postopka ali preberite, če želite izvedeti več o tem, kaj bo vsaka vrstica kode naredila za ustvarjanje kalkulatorja.
    • html: Ta del sintakse pove preostalemu delu dokumenta, kateri jezik bo uporabljen v kodi. Obstaja več jezikov za kodiranje in v tem primeru html> ostanku dokumenta jasno pove, da je v - uganili ste - html.
    • glavo: Dokumentu pove, da so vse po njem podatki o podatkih, imenovani tudi »metapodatki«. Ukaz head> se običajno uporablja za določanje slogovnih elementov dokumenta, kot so naslovi, naslovi itd. Pomislite na to kot na dežnik, pod katerim je definirana preostala koda.
    • naslov: Tu je naveden naslov vašega dokumenta. Ta atribut se uporablja za označevanje naslova dokumenta, ko se odpre v brskalniku HTML.
    • body bgcolor = "#": Ta atribut nastavi barvo ozadja strani HTML in telesa. Število v narekovaju in za # ustreza določeni barvi.
    • text = "": Ta sintaksa nastavi barvo besedila dokumenta.
    • ime obrazca = "": Ta atribut določa ime obrazca in se uporablja za gradnjo strukture naslednjega, na podlagi tega, kar Javascript ve o pomenu imena obrazca. Na primer, ime obrazca, ki ga bomo uporabili, je "kalkulator", s katerim bomo ustvarili določeno strukturo dokumenta.
    • vrsta vnosa = "": Tu se nekaj zgodi. Atribut "vrsta vnosa" razčlenjevalniku dokumenta pove, kakšno besedilo je v vrednostih med narekovaji. Na primer, to je lahko besedilo, geslo, gumb (kot bo to pri kalkulatorju) itd.
    • vrednost = "": Ta ukaz razčlenjevalniku dokumenta pove, kaj je vključeno v zgornjo vrsto vnosa. Za kalkulator so to številke (1-9) in operacije (+, -, *, /, =).
    • onClick = "": Ta sintaksa opisuje dogodek in nakazuje, da je treba ob kliku gumba nekaj storiti. Za kalkulator želimo, da se besedilo na vsakem gumbu prepozna tudi kot takšno. Torej pred gumbom "6" med narekovaje postavimo document.calculator.ans.value + = "6".
    • br: ta oznaka ustvari novo vrstico v dokumentu, tako da je besedilo (ali kaj drugega) postavljeno za njim v drugo vrstico.
    • / form, / body in / html: ti ukazi so zapirala za ustrezne ukaze, ki so bili prej odprti v dokumentu.

Del 2 od 4: Standardna koda za kalkulator HTML

  1. Kopirajte spodnjo kodo. Izberite besedilo v spodnjem polju tako, da držite levi gumb miške in povlečete kurzor od spodnjega levega kota do zgornjega desnega kota, tako da bo vse besedilo modro. Nato pritisnite "Command + C" v računalniku Mac ali "Ctrl + C" v računalniku, da kopirate kodo v odložišče.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "dokument. calculator.ans.value + = '1' "> type input =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> type type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> type input =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> type type =" button "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' "> type type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> type type =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> type 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> Odgovor je vhodni tip =" textfield "name =" ans "value =" "> / form> / body> / html>

3. del od 4: Izdelava lastnega kalkulatorja

  1. V računalniku odprite urejevalnik besedil. Uporabljamo lahko več programov, vendar se bomo zaradi poenostavitve držali TextEdit ali Notepad.
    • Na Macu kliknite lupo v zgornjem desnem kotu zaslona, ​​da odprete Spotlight. Ko pridete tja, vnesite TextEdit in kliknite program TextEdit, ki naj bo zdaj izbran v modri barvi.
    • V računalniku odprite meni Start v spodnjem levem kotu zaslona. V iskalno vrstico vnesite Notepad in kliknite aplikacijo Notepad, ki se bo pojavila v iskalni vrstici na desni.
  2. V dokument prilepite kodo HTML za kalkulator.
    • Na Macu kliknite na telo dokumenta in pritisnite Command + V. Nato kliknite Oblika na vrhu zaslona in nato Naredi navadno besedilo po lepljenju kode.
    • V računalniku kliknite telo dokumenta in nato še naprej Ctrl + V.
  3. Shranite datoteko. To storite prek "Datoteka" v glavnem meniju okna in nato z Shrani kot... na osebnem računalniku oz Shrani ... v računalniku Mac iz spustnega menija.
  4. Ime datoteke dodajte pripono HTML. V meni "Shrani kot ..." vnesite ime datoteke, nato ".html" in kliknite "Shrani". Če želite datoteko na primer poimenovati "Moj prvi kalkulator", jo shranite kot "Moj prvi kalkulator.html".

4. del od 4: Uporabite svoj kalkulator

  1. Poiščite datoteko, ki ste jo pravkar ustvarili. Če želite to narediti, vnesite ime datoteke v Spotlight ali v iskalno vrstico menija Start, kot je razloženo v prejšnjem koraku. Razširitve "html" tudi ni treba vnašati.
  2. Kliknite datoteko, da jo odprete. Privzeti brskalnik bo kalkulator odprl na novi spletni strani.
  3. Za uporabo kliknite gumbe na kalkulatorju. Rešitve vaših enačb bodo zdaj prikazane v vrstici z odgovori.

Nasveti

  • Če želite, lahko ta kalkulator vključite na spletno stran.
  • Za spreminjanje videza kalkulatorja lahko uporabite tudi sloge HTML.