Saturs

• Lai soli
• 1. daļa no 4: koda izpratne
• 2. daļa no 4: HTML koda kalkulatora standarta kods
• 3. daļa no 4: sava kalkulatora izgatavošana
• 4. daļa no 4: izmantojiet kalkulatoru
• Padomi

Ir daudz dažādu veidu, kā aprēķināt, izmantojot datoru, izmantojot iebūvēto kalkulatoru, bet vēl viens veids ir izveidot savu, izmantojot vienkāršu HTML kodu. Lai izveidotu kalkulatoru, izmantojot HTML, jums ir nepieciešamas dažas HTML pamatzināšanas, pēc tam teksta redaktorā ievadiet nepieciešamo kodu un saglabājiet to kā HTML failu. Pēc tam varat izmantot kalkulatoru, atverot HTML failu iecienītākajā pārlūkprogrammā. Jūs varēsiet ne tikai pārlūkprogrammā veikt aritmētiskās darbības, bet arī apgūt dažas pamata prasmes par programmēšanas mākslu!

Lai soli

1. daļa no 4: koda izpratne

1. Uzziniet, ko dara katra HTML funkcija. Kods, kuru izmantosiet, lai izveidotu kalkulatoru, sastāv no daudziem dažādiem sintakses veidiem, kas kopā definē dažādus dokumenta elementus. Noklikšķiniet šeit, lai iegūtu šī procesa skaidrojumu, vai lasiet tālāk, lai uzzinātu vairāk par to, ko katra koda rindiņa darīs, lai izveidotu kalkulatoru.
   • html: Šis sintakses bits pārējam dokumentam norāda, kura valoda tiks izmantota kodā. Kodēšanai ir vairākas valodas, un šajā gadījumā html> padara pārējo dokumentu saprotamu, ka tas atrodas - jūs uzminējāt - html.
   • galva: Paziņo dokumentam, ka viss pēc tā ir dati par datiem, kurus sauc arī par "metadatiem". Komandu head> parasti izmanto, lai definētu dokumenta stilistiskos elementus, piemēram, nosaukumus, virsrakstus utt. Iedomājieties to kā lietussargu, zem kura ir definēts pārējais kods.
   • nosaukums: Šeit ir norādīts jūsu dokumenta nosaukums. Šis atribūts tiek izmantots, lai norādītu dokumenta nosaukumu, kad tas tiek atvērts HTML pārlūkprogrammā.
   • body bgcolor = "#": Šis atribūts nosaka HTML lapas un pamatteksta fona krāsu. Numurs pēdiņās un aiz # atbilst noteiktai krāsai.
   • teksts = "": Šī sintakse nosaka dokumenta teksta krāsu.
   • formas nosaukums = "": Šis atribūts norāda formas nosaukumu un tiek izmantots, lai izveidotu nākamā struktūru, pamatojoties uz to, ko Javascript zina par formas nosaukuma nozīmi. Piemēram, formas nosaukums, kuru izmantosim, ir "kalkulators", kuru izmantosim, lai izveidotu konkrētu dokumenta struktūru.
   • ievades tips = "": Šeit kaut kas notiek. Atribūts "input type" dokumenta parsētājam norāda, kāda veida teksts ir ietverts vērtībās starp pēdiņām. Piemēram, tas var būt teksts, parole, poga (kā tas būs ar kalkulatoru) utt.
   • vērtība = "": Šī komanda dokumenta parsētājam norāda, kas ir iekļauts iepriekš ievadītajā tipā. Kalkulatoram tie ir skaitļi (1–9) un darbības (+, -, *, /, =).
   • onClick = "": Šī sintakse apraksta notikumu, norādot, ka kaut kas jādara, noklikšķinot uz pogas. Attiecībā uz kalkulatoru mēs vēlamies, lai arī katras pogas teksts tiktu atpazīts kā tāds. Tātad pirms pogas "6" starp pēdiņām ievietojam document.calculator.ans.value + = "6".
   • br: šis tags dokumentā izveido jaunu rindu, lai teksts (vai kaut kas cits) tiktu ievietots aiz tā citā rindā.
   • / forma, / ķermeņa un / html: šīs komandas ir aizvērēji attiecīgajām komandām, kas iepriekš atvērtas dokumentā.

2. daļa no 4: HTML koda kalkulatora standarta kods

1. Kopējiet zemāk esošo kodu. Atlasiet tekstu zemāk esošajā lodziņā, turot nospiestu peles kreiso pogu un velkot kursoru no lodziņa apakšējā kreisā stūra uz augšu pa labi, lai viss teksts kļūtu zils. Pēc tam Mac datorā nospiediet "Command + C" vai personālajā datorā "Ctrl + C", lai kopētu kodu uz starpliktuvi.

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 =" poga "value =" 4 "onClick =" document.calculator.ans.value + = '4 ""> ievades tips = "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> Atbilde isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

3. daļa no 4: sava kalkulatora izgatavošana

1. Datorā atveriet teksta redaktoru. Izmantojamas vairākas programmas, taču vienkāršības labad mēs paliksim pie TextEdit vai Notepad.
   • Mac datorā noklikšķiniet uz lupas ekrāna augšējā labajā stūrī, lai atvērtu Spotlight. Kad tur nokļūsiet, ierakstiet TextEdit un noklikšķiniet uz programmas TextEdit, kas tagad būtu jāizvēlas zilā krāsā.
   • Datorā atveriet izvēlni Sākt ekrāna apakšējā kreisajā stūrī. Meklēšanas joslā ierakstiet Notepad un noklikšķiniet uz Notepad lietojumprogrammas, kas parādīsies meklēšanas joslā pa labi.
2. Ielīmējiet dokumentā kalkulatora HTML kodu.
   • Mac datorā noklikšķiniet uz dokumenta pamatteksta un nospiediet Komanda + V. Pēc tam noklikšķiniet uz Formāts ekrāna augšdaļā un pēc tam Izveidot vienkāršu tekstu pēc koda ielīmēšanas.
   • Datorā noklikšķiniet uz dokumenta pamatteksta un pēc tam uz Ctrl + V.
3. Saglabājiet failu. Jūs to izdarāt, izmantojot loga galvenās izvēlnes "Fails" un pēc tam ar Saglabāt kā... datorā vai Saglabāt ... Mac datorā no nolaižamās izvēlnes.
4. Pievienojiet faila nosaukumam HTML paplašinājumu. Izvēlnē "Saglabāt kā ..." ierakstiet faila nosaukumu, pēc tam - .html un pēc tam noklikšķiniet uz "Saglabāt". Piemēram, ja vēlaties šim failam piešķirt nosaukumu “Mans pirmais kalkulators”, saglabājiet failu kā “Mans pirmais kalkulators.html”.

4. daļa no 4: izmantojiet kalkulatoru

1. Atrodiet tikko izveidoto failu. Lai to izdarītu, ierakstiet faila nosaukumu Spotlight vai izvēlnes Sākt meklēšanas joslā, kā paskaidrots iepriekšējā darbībā. Nav nepieciešams arī ierakstīt paplašinājumu "html".
2. Noklikšķiniet uz faila, lai to atvērtu. Pēc noklusējuma pārlūks kalkulatoru atvērs jaunā tīmekļa lapā.
3. Lai to izmantotu, noklikšķiniet uz kalkulatora pogām. Jūsu vienādojumu risinājumi tagad parādīsies atbilžu joslā.

Padomi

• Ja vēlaties, varat iekļaut šo kalkulatoru tīmekļa lapā.
• Varat arī izmantot HTML stilus, lai mainītu kalkulatora izskatu.