Nilalaman

• Upang humakbang
• Bahagi 1 ng 4: Pag-unawa sa code
• Bahagi 2 ng 4: Karaniwang code para sa isang calculator ng HTML
• Bahagi 3 ng 4: Paggawa ng iyong sariling calculator
• Bahagi 4 ng 4: Gamitin ang iyong calculator
• Mga Tip

Mayroong maraming iba't ibang mga paraan upang makalkula sa isang computer gamit ang built-in na calculator, ngunit ang isa pang paraan ay upang buuin ang iyong sarili gamit ang simpleng HTML code. Upang makagawa ng isang calculator gamit ang HTML, kailangan mo ng pangunahing kaalaman sa HTML, pagkatapos ay ipasok ang kinakailangang code sa isang text editor at i-save ito bilang isang HTML file. Maaari mo nang magamit ang calculator sa pamamagitan ng pagbubukas ng HTML file sa iyong paboritong browser. Hindi lamang mo magagawang magsagawa ng mga pagpapatakbo ng arithmetic sa iyong browser, ngunit maaari mo ring matutunan ang ilang mga pangunahing kasanayan tungkol sa sining ng programa!

Upang humakbang

Bahagi 1 ng 4: Pag-unawa sa code

1. Alamin kung ano ang ginagawa ng bawat pagpapaandar ng HTML. Ang code na iyong gagamitin upang likhain ang iyong calculator ay binubuo ng maraming iba't ibang mga uri ng syntax na magkasama na tumutukoy sa iba't ibang mga elemento ng isang dokumento. Mag-click dito para sa isang paliwanag sa prosesong ito, o basahin upang matuto nang higit pa tungkol sa kung ano ang gagawin ng bawat linya ng code upang likhain ang calculator.
   • html: Sinasabi ng kaunting syntax na ito ang natitirang dokumento kung aling wika ang gagamitin sa code. Mayroong maraming mga wika upang mai-code at sa kasong ito html> nililinaw sa natitirang dokumento na naroon - nahulaan mo ito - html.
   • ulo: Sinasabi sa dokumento na ang lahat pagkatapos nito ay data tungkol sa data, na tinatawag ding "metadata". Ang utos> utos ay karaniwang ginagamit upang tukuyin ang mga sangkap ng istilo ng isang dokumento, tulad ng mga pamagat, heading, atbp. Isipin ito bilang isang payong na kung saan natukoy ang natitirang code.
   • pamagat: Ang pamagat ng iyong dokumento ay ipinahiwatig dito. Ginamit ang katangiang ito upang ipahiwatig ang pamagat ng dokumento kapag binuksan ito sa isang HTML browser.
   • body bgcolor = "#": Itinatakda ng katangiang ito ang kulay ng background ng pahina ng HTML at ng katawan. Ang numero sa loob ng string ng panipi ng sipi at pagkatapos ng # ay tumutugma sa isang tukoy na kulay.
   • text = "": Itinatakda ng syntax na ito ang kulay ng teksto ng dokumento.
   • pangalan ng form = "": Tinutukoy ng katangiang ito ang pangalan ng isang form, at ginagamit upang maitayo ang istraktura ng susunod, batay sa alam ng Javascript tungkol sa kahulugan ng form form. Halimbawa, ang pangalan ng form na gagamitin namin ay "calculator", na gagamitin namin upang lumikha ng isang tukoy na istraktura para sa dokumento.
   • uri ng pag-input = "": Dito nangyayari ang isang bagay. Ang katangiang "uri ng pag-input" ay nagsasabi sa parser ng dokumento kung anong uri ng teksto ang nakapaloob sa mga halagang nasa pagitan ng mga panipi. Halimbawa, maaaring ito ay isang teksto, isang password, isang pindutan (tulad ng mangyayari sa calculator), atbp.
   • halaga = "": Sinasabi ng utos na ito sa parser ng dokumento kung ano ang kasama sa itaas na uri ng pag-input. Para sa isang calculator, ito ang mga bilang (1-9) at pagpapatakbo (+, -, *, /, =).
   • onClick = "": Ang syntax na ito ay naglalarawan ng isang kaganapan, na nagpapahiwatig na ang isang bagay ay dapat gawin kapag na-click ang pindutan. Para sa isang calculator, nais naming makilala ang teksto sa bawat pindutan na tulad din. Kaya bago ang pindutang "6", inilalagay namin ang document.calculator.ans.value + = "6" sa pagitan ng mga marka ng panipi.
   • br: ang tag na ito ay lumilikha ng isang bagong linya sa dokumento, upang ang teksto (o ibang bagay) ay inilalagay pagkatapos nito sa ibang linya.
   • / form, / body at / html: ang mga utos na ito ay sarado para sa mga kaukulang utos na dating binuksan sa dokumento.

Bahagi 2 ng 4: Karaniwang code para sa isang calculator ng HTML

1. Kopyahin ang code sa ibaba. Piliin ang teksto sa kahon sa ibaba sa pamamagitan ng pagpindot sa kaliwang pindutan ng mouse at pag-drag ng cursor mula sa kaliwang ibabang bahagi ng kahon patungo sa kanang tuktok, upang ang lahat ng teksto ay maging asul. Pagkatapos ay pindutin ang "Command + C" sa isang Mac o "Ctrl + C" sa isang PC upang kopyahin ang code sa clipboard.

html> ulo> pamagat> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "dokumento. calculator.ans.value + = '1' "> uri ng pag-input =" butones "halaga =" 2 "onClick =" document.calculator.ans.value + = '2' "> uri ng pag-input =" butones "halaga =" 3 "onClick =" document.calculator.ans.value + = '3' "> uri ng pag-input =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> uri ng pag-input =" 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. halaga + = '-' "> uri ng pag-input =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> uri ng pag-input =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> uri ng pag-input =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> uri ng pag-input =" pindutan "na halaga = " *" onClick = "document.calcul ator.ans.value + = ' *' "> uri ng pag-input =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> uri ng pag-input =" pindutan "halaga =" 0 "onClick =" document.calculator.ans.value + = '0' "> uri ng pag-input =" pag-reset "na halaga =" I-reset "> uri ng pag-input =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> Ang sagot isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Bahagi 3 ng 4: Paggawa ng iyong sariling calculator

1. Magbukas ng isang text editor sa iyong computer. Mayroong maraming mga program na gagamitin, ngunit para sa pagiging simple mananatili kami sa TextEdit o Notepad.
   • Sa isang Mac, i-click ang magnifying glass sa kanang sulok sa itaas ng screen upang buksan ang Spotlight. Kapag nakarating ka doon, i-type ang TextEdit at mag-click sa programang TextEdit, na dapat mapili nang asul.
   • Sa isang PC, buksan ang Start menu sa kaliwang ibabang bahagi ng screen. Sa search bar, i-type ang Notepad at mag-click sa Notepad application, na lilitaw sa search bar sa kanan.
2. I-paste ang HTML code para sa isang calculator sa dokumento.
   • Sa isang Mac, mag-click sa katawan ng dokumento at pindutin Command + V. Pagkatapos mag-click sa Format sa tuktok ng screen at pagkatapos Gumawa ng Tekstong Plain matapos i-paste ang code.
   • Sa isang PC, mag-click sa katawan ng dokumento at pagkatapos ay sa Ctrl + V.
3. I-save ang file. Ginagawa mo ito sa pamamagitan ng "File" sa pangunahing menu ng window, at pagkatapos ay kasama I-save bilang... sa isang PC o I-save ... sa isang Mac mula sa drop-down na menu.
4. Magdagdag ng isang extension ng HTML sa pangalan ng file. Sa menu na "I-save Bilang ...", i-type ang pangalan ng file, na sinusundan ng ".html", pagkatapos ay i-click ang "I-save". Halimbawa, kung nais mong pangalanan ang file na ito na "Aking unang calculator", i-save ang file bilang "Aking unang calculator.html".

Bahagi 4 ng 4: Gamitin ang iyong calculator

1. Hanapin ang file na iyong nilikha. Upang magawa ito, i-type ang pangalan ng file sa Spotlight o sa search bar ng Start menu tulad ng ipinaliwanag sa nakaraang hakbang. Hindi kinakailangan na i-type din ang extension na "html".
2. Mag-click sa iyong file upang buksan ito. Ang iyong default browser ay magbubukas ng iyong calculator sa isang bagong web page.
3. I-click ang mga pindutan sa calculator upang magamit ito. Ang mga solusyon sa iyong mga equation ay lilitaw na ngayon sa answer bar.

Mga Tip

• Maaari mong isama ang calculator na ito sa isang web page kung nais mo.
• Maaari mo ring gamitin ang mga estilo ng HTML upang baguhin ang hitsura ng calculator.