Programarea unui calculator în HTML

Video: Cum am învățat PROGRAMARE singur de la 0

Conţinut

A calca
Partea 1 din 4: Înțelegerea codului
Partea 2 din 4: Cod standard pentru un calculator HTML
Partea 3 din 4: Realizarea propriului calculator
Partea 4 din 4: Folosiți calculatorul
sfaturi

Există multe modalități diferite de a calcula cu un computer folosind calculatorul încorporat, dar o altă modalitate este să vă construiți propriul dvs. folosind cod HTML simplu. Pentru a face un calculator folosind HTML, aveți nevoie de cunoștințe de bază HTML, apoi introduceți codul necesar într-un editor de text și salvați-l ca fișier HTML. Apoi puteți utiliza calculatorul deschizând fișierul HTML în browserul dvs. preferat. Nu numai că veți putea efectua operații aritmetice în browser, dar veți putea învăța și câteva abilități de bază despre arta programării!

A calca

Partea 1 din 4: Înțelegerea codului

Aflați ce face fiecare funcție HTML. Codul pe care îl veți utiliza pentru a vă crea calculatorul este format din mai multe tipuri diferite de sintaxă care definesc împreună diferitele elemente ale unui document. Faceți clic aici pentru o explicație a acestui proces sau citiți mai departe pentru a afla mai multe despre ceea ce va face fiecare linie de cod pentru a crea calculatorul.
- html: Acest bit de sintaxă spune restului documentului ce limbă va fi utilizată în cod. Există mai multe limbi în care puteți codifica și, în acest caz, html> face clar pentru restul documentului că se află - ați ghicit - html.
- cap: Spune documentului că totul după acesta reprezintă date despre date, numite și „metadate”. Comanda head> este de obicei folosită pentru a defini elemente stilistice ale unui document, cum ar fi titluri, titluri etc. Gândiți-vă la aceasta ca la o umbrelă sub care este definit restul codului.
- titlu: Titlul documentului dvs. este indicat aici. Acest atribut este utilizat pentru a indica titlul documentului atunci când este deschis într-un browser HTML.
- body bgcolor = "#": Acest atribut setează culoarea fundalului paginii HTML și a corpului. Numărul din șirul de ghilimele și după # corespunde unei anumite culori.
- text = "": Această sintaxă setează culoarea textului documentului.
- form name = "": Acest atribut specifică numele unui formular și este utilizat pentru a construi structura a ceea ce urmează, pe baza a ceea ce Javascript știe despre semnificația numelui formularului. De exemplu, numele formularului pe care îl vom folosi este „calculator”, pe care îl vom folosi pentru a crea o structură specifică pentru document.
- tip de intrare = "": Aici se întâmplă ceva. Atributul „tip de intrare” îi spune analizorului documentului ce fel de text este conținut în valorile dintre ghilimele. De exemplu, acesta ar putea fi un text, o parolă, un buton (așa cum va fi cazul calculatorului) etc.
- valoare = "": Această comandă spune analizorului documentului ce este inclus în tipul de intrare de mai sus. Pentru un calculator, acestea sunt numerele (1-9) și operațiile (+, -, *, /, =).
- onClick = "": Această sintaxă descrie un eveniment, indicând faptul că trebuie făcut ceva când se face clic pe buton. Pentru un calculator, dorim ca textul de pe fiecare buton să fie recunoscut și ca atare. Deci, înainte de butonul „6”, punem document.calculator.ans.value + = „6” între ghilimele.
- fr: această etichetă creează o nouă linie în document, astfel încât textul (sau altceva) să fie plasat după el pe o altă linie.
- / form, / body și / html: aceste comenzi sunt elemente de închidere pentru comenzile corespunzătoare deschise anterior în document.

Partea 2 din 4: Cod standard pentru un calculator HTML

Copiați codul de mai jos. Selectați textul din caseta de mai jos, ținând apăsat butonul stâng al mouse-ului și glisând cursorul din partea stângă jos a casetei în dreapta sus, astfel încât tot textul să devină albastru. Apoi apăsați „Comandă + C” pe un Mac sau „Ctrl + C” pe un PC pentru a copia codul în clipboard.

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 =" buton "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' "> 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> Răspunsul este input type =" textfield "name =" ans "value =" "> / form> / body> / html>

Partea 3 din 4: Realizarea propriului calculator

Deschideți un editor de text pe computer. Există mai multe programe de utilizat, dar, pentru simplitate, vom rămâne la TextEdit sau Notepad.
- Pe un Mac, faceți clic pe lupă din colțul din dreapta sus al ecranului pentru a deschide Spotlight. Când ajungeți acolo, tastați TextEdit și faceți clic pe programul TextEdit, care ar trebui să fie acum selectat în albastru.
- Pe un computer, deschideți meniul Start din partea stângă jos a ecranului. În bara de căutare, tastați Notepad și faceți clic pe aplicația Notepad, care va apărea în bara de căutare din dreapta.
Lipiți codul HTML pentru un calculator în document.
- Pe un Mac, faceți clic pe corpul documentului și apăsați Comandă + V. Apoi faceți clic pe Format în partea de sus a ecranului și apoi Faceți text simplu după lipirea codului.
- Pe un computer, faceți clic pe corpul documentului și apoi pe Ctrl + V.
Salvați fișierul. Faceți acest lucru prin „Fișier” în meniul principal al ferestrei, apoi cu Salvează ca... pe un computer sau Salvați... pe un Mac din meniul derulant.
Adăugați o extensie HTML la numele fișierului. În meniul „Salvați ca ...”, tastați numele fișierului, urmat de „.html”, apoi dați clic pe „Salvați”. De exemplu, dacă doriți să denumiți acest fișier „Primul meu calculator”, salvați fișierul ca „Primul meu calculator.html”.

Partea 4 din 4: Folosiți calculatorul

Găsiți fișierul pe care tocmai l-ați creat. Pentru a face acest lucru, tastați numele fișierului în Spotlight sau în bara de căutare a meniului Start, așa cum s-a explicat în pasul anterior. Nu este necesar să tastați și extensia „html”.
Faceți clic pe fișierul dvs. pentru a-l deschide. Browserul dvs. implicit vă va deschide calculatorul într-o nouă pagină web.
Faceți clic pe butoanele de pe calculator pentru al utiliza. Soluțiile la ecuațiile dvs. vor apărea acum în bara de răspuns.