Skaičiuoklės programavimas HTML

Autorius: Tamara Smith
Kūrybos Data: 27 Sausio Mėn 2021
Atnaujinimo Data: 1 Liepos Mėn 2024
Anonim
HTML Table from Spreadsheet Data - Google Apps Script Web App Tutorial - Part 13
Video.: HTML Table from Spreadsheet Data - Google Apps Script Web App Tutorial - Part 13

Turinys

Yra daug įvairių būdų, kaip apskaičiuoti kompiuteriu naudojant įmontuotą skaičiuoklę, tačiau kitas būdas yra susikurti savo, naudojant paprastą HTML kodą. Norėdami atlikti skaičiuoklę naudodami HTML, jums reikia šiek tiek pagrindinių HTML žinių, tada įveskite reikiamą kodą į teksto redaktorių ir išsaugokite jį kaip HTML failą. Tada galite naudoti skaičiuoklę, atidarę HTML failą savo mėgstamoje naršyklėje. Ne tik galėsite atlikti aritmetines operacijas savo naršyklėje, bet ir išmokti keletą pagrindinių įgūdžių apie programavimo meną!

Žengti

1 dalis iš 4: Kodo supratimas

  1. Sužinokite, ką daro kiekviena HTML funkcija. Kodas, kurį naudosite kurdami savo skaičiuoklę, susideda iš daugybės skirtingų sintaksės tipų, kurie kartu apibrėžia skirtingus dokumento elementus. Spustelėkite čia, norėdami paaiškinti šį procesą, arba skaitykite toliau, kad sužinotumėte daugiau apie tai, ką darys kiekviena kodo eilutė kuriant skaičiuoklę.
    • HTML: Ši sintaksės bitė likusiam dokumentui nurodo, kokia kalba bus naudojama kode. Koduoti galima keliomis kalbomis ir šiuo atveju html> likusiam dokumentui aiškiai parodo, kad jis yra - jūs atspėjote - html.
    • galva: Nurodo dokumentui, kad viskas po jo yra duomenys apie duomenis, dar vadinami „metaduomenimis“. „Head>“ komanda paprastai naudojama apibrėžiant stilistinius dokumento elementus, tokius kaip pavadinimai, antraštės ir kt. Pagalvokite apie tai kaip apie skėtį, pagal kurį apibrėžiama likusi kodo dalis.
    • pavadinimas: Čia nurodomas jūsų dokumento pavadinimas. Šis atributas naudojamas nurodyti dokumento pavadinimą, kai jis atidaromas HTML naršyklėje.
    • kūnas bgcolor = "#": Šis atributas nustato HTML puslapio ir teksto fono spalvą. Skaičius kabutės eilutėje ir po # atitinka tam tikrą spalvą.
    • tekstas = "": Ši sintaksė nustato dokumento teksto spalvą.
    • formos pavadinimas = "": Šis atributas nurodo formos pavadinimą ir naudojamas kuriant tolesnio struktūrą, remiantis tuo, ką „Javascript“ žino apie formos pavadinimo reikšmę. Pvz., Formos pavadinimas, kurį ketiname naudoti, yra „skaičiuotuvas“, kurį naudosime kurdami konkrečią dokumento struktūrą.
    • įvesties tipas = "": Čia kažkas atsitinka. Atributas „įvesties tipas“ dokumento analizatoriui nurodo, koks tekstas yra vertėse tarp kabučių. Pavyzdžiui, tai gali būti tekstas, slaptažodis, mygtukas (kaip bus su skaičiuokle) ir kt.
    • vertė = "": Ši komanda nurodo dokumento analizatoriui, kas yra įtraukta į aukščiau nurodytą įvesties tipą. Skaičiuoklėje tai yra skaičiai (1–9) ir operacijos (+, -, *, /, =).
    • onClick = "": Ši sintaksė apibūdina įvykį, nurodydama, kad spustelėjus mygtuką reikia ką nors padaryti. Skaičiuoklėje norime, kad kiekvieno mygtuko tekstas taip pat būtų atpažintas. Taigi prieš mygtuką „6“ tarp kabučių dedame document.calculator.ans.value + = „6“.
    • br: ši žyma dokumente sukuria naują eilutę, kad tekstas (ar kažkas kitas) būtų dedamas po jo kitoje eilutėje.
    • / forma, / kūnas ir / html: šios komandos yra uždaromos atitinkamoms anksčiau dokumente atidarytoms komandoms.

2 dalis iš 4: Standartinis HTML skaičiuoklės kodas

  1. Nukopijuokite žemiau esantį kodą. Pasirinkite tekstą žemiau esančiame laukelyje laikydami nuspaudę kairįjį pelės mygtuką ir vilkite žymeklį iš langelio apačios kairės į viršutinę dešinę, kad visas tekstas taptų mėlynas. Tada „Mac“ paspauskite „Command + C“ arba asmeniniame kompiuteryje „Ctrl + C“, kad nukopijuotumėte kodą į iškarpinę.

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' "> įvesties tipas =" mygtukas "value =" + "onClick =" document.calculator.ans.value + = '+' "> įvesties tipas =" mygtukas "value =" 4 "onClick =" document.calculator.ans.value + = '4 ""> įvesties tipas = "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. vertė + = '-' "> įvesties tipas =" mygtukas "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> įvesties tipas =" mygtukas "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> Atsakymas isinput type =" textfield "name =" ans "value =" "> / forma> / body> / html>

3 dalis iš 4: pasidarykite savo skaičiuoklę

  1. Kompiuteryje atidarykite teksto rengyklę. Yra kelios naudojamos programos, tačiau paprastumo dėlei laikysimės „TextEdit“ arba „Notepad“.
    • „Mac“ sistemoje spustelėkite didinamąjį stiklą viršutiniame dešiniajame ekrano kampe, kad atidarytumėte „Spotlight“. Kai ten pateksite, įveskite „TextEdit“ ir spustelėkite „TextEdit“ programą, kuri dabar turėtų būti pasirinkta mėlyna spalva.
    • Kompiuteryje atidarykite meniu Pradėti ekrano apačioje kairėje. Paieškos juostoje įveskite „Notepad“ ir spustelėkite „Notepad“ programą, kuri pasirodys paieškos juostoje dešinėje.
  2. Į dokumentą įklijuokite skaičiuoklės HTML kodą.
    • „Mac“ sistemoje spustelėkite dokumento turinį ir paspauskite „Command“ + V.. Tada spustelėkite Formatas ekrano viršuje ir tada Padaryti paprastą tekstą įklijavus kodą.
    • Kompiuteryje spustelėkite dokumento turinį ir tada „Ctrl“ + V.
  3. Išsaugokite failą. Tai darote per lango pagrindiniame meniu esantį „Failas“, tada naudokite Išsaugoti kaip... kompiuteryje arba Sutaupyti... „Mac“ sistemoje iš išskleidžiamojo meniu.
  4. Prie failo vardo pridėkite HTML plėtinį. Meniu „Išsaugoti kaip ...“ įveskite failo pavadinimą, tada - „.html“, tada spustelėkite „Išsaugoti“. Pavyzdžiui, jei norite pavadinti šį failą „Mano pirmasis skaičiuoklė“, išsaugokite failą kaip „Mano pirmasis skaičiuotuvas.html“.

4 dalis iš 4: naudokite savo skaičiuoklę

  1. Raskite ką tik sukurtą failą. Norėdami tai padaryti, įveskite failo pavadinimą „Spotlight“ arba meniu Pradėti paieškos juostoje, kaip paaiškinta ankstesniame žingsnyje. Nebūtina taip pat įvesti „html“ plėtinio.
  2. Spustelėkite failą, kad jį atidarytumėte. Pagal numatytąją naršyklę skaičiuoklė bus atidaryta naujame tinklalapyje.
  3. Norėdami jį naudoti, spustelėkite skaičiuoklės mygtukus. Dabar jūsų lygčių sprendimai bus rodomi atsakymų juostoje.

Patarimai

  • Jei norite, galite įtraukti šią skaičiuoklę į tinklalapį.
  • Norėdami pakeisti skaičiuoklės išvaizdą, taip pat galite naudoti HTML stilius.