Задаволены

• Крок
• Частка 1 з 4: Разуменне кода
• Частка 2 з 4: Стандартны код для калькулятара HTML
• Частка 3 з 4: Стварэнне ўласнага калькулятара
• Частка 4 з 4: Карыстайцеся калькулятарам
• Парады

Існуе мноства розных спосабаў разліку з дапамогай кампутара з дапамогай убудаванага калькулятара, але іншы спосаб - гэта стварыць свой уласны, выкарыстоўваючы просты HTML-код. Каб зрабіць калькулятар з выкарыстаннем HTML, вам патрэбныя некаторыя базавыя веды па HTML, затым увядзіце неабходны код у тэкставым рэдактары і захавайце яго ў выглядзе HTML-файла. Затым вы можаце выкарыстоўваць калькулятар, адкрыўшы файл HTML у вашым любімым браўзэры. Мала таго, што вы зможаце выконваць арыфметычныя аперацыі ў сваім браўзэры, але вы таксама зможаце даведацца некаторыя асноўныя навыкі пра мастацтва праграмавання!

Крок

Частка 1 з 4: Разуменне кода

1. Даведайцеся, што робіць кожная функцыя HTML. Код, які вы будзеце выкарыстоўваць для стварэння калькулятара, складаецца з мноства розных тыпаў сінтаксісу, якія разам вызначаюць розныя элементы дакумента. Націсніце тут для тлумачэння гэтага працэсу альбо прачытайце далей, каб даведацца больш пра тое, што будзе рабіць кожны радок кода для стварэння калькулятара.
   • html: Гэты біт сінтаксісу паведамляе астатняй частцы дакумента, якая мова будзе выкарыстоўвацца ў кодзе. Ёсць некалькі моў для кадавання, і ў гэтым выпадку html> дае зразумець астатняй частцы дакумента, што ён знаходзіцца - вы ўжо здагадаліся - html.
   • галава: Кажа дакументу, што ўсё пасля яго - гэта дадзеныя пра дадзеныя, якія таксама называюцца "метададзенымі". Каманда head> звычайна выкарыстоўваецца для вызначэння стылістычных элементаў дакумента, такіх як загалоўкі, загалоўкі і г. д. Успрымайце гэта як парасон, пад якім вызначаецца астатняя частка кода.
   • загаловак: Загаловак вашага дакумента пазначаны тут. Гэты атрыбут выкарыстоўваецца для абазначэння загалоўка дакумента пры яго адкрыцці ў аглядальніку HTML.
   • body bgcolor = "#": Гэты атрыбут задае колер фону старонкі HTML і цела. Нумар у радку двукосся і пасля # адпавядае пэўнаму колеру.
   • тэкст = "": Гэты сінтаксіс задае колер тэксту дакумента.
   • назва формы = "": Гэты атрыбут указвае імя формы і выкарыстоўваецца для пабудовы наступнай структуры на аснове таго, што Javascript ведае пра значэнне назвы формы. Напрыклад, назва формы, якую мы будзем выкарыстоўваць, - "калькулятар", якую мы будзем выкарыстоўваць для стварэння пэўнай структуры дакумента.
   • тып уводу = "": Тут нешта адбываецца. Атрыбут "тып уводу" паведамляе парсеру дакумента, які тэкст утрымліваецца ў значэннях паміж двукоссямі. Напрыклад, гэта можа быць тэкст, пароль, кнопка (як гэта будзе ў выпадку з калькулятарам) і г.д.
   • значэнне = "": Гэтая каманда распавядае аналізатару дакумента, што ўключана ў вышэйапісаны тып ўводу. Для калькулятара гэта лічбы (1-9) і аперацыі (+, -, *, /, =).
   • onClick = "": Гэты сінтаксіс апісвае падзею, паказваючы, што трэба нешта рабіць пры націску кнопкі. Для калькулятара мы хочам, каб тэкст на кожнай кнопцы таксама быў прызнаны такім. Такім чынам, перад кнопкай "6" мы ставім document.calculator.ans.value + = "6" паміж двукоссямі.
   • бр: гэты тэг стварае новы радок у дакуменце, так што тэкст (ці нешта іншае) размяшчаецца пасля яго ў іншым радку.
   • / form, / body і / html: гэтыя каманды з'яўляюцца даводчыкамі для адпаведных каманд, раней адкрытых у дакуменце.

Частка 2 з 4: Стандартны код для калькулятара HTML

1. Скапіруйце код ніжэй. Вылучыце тэкст у полі ніжэй, утрымліваючы левую кнопку мышы і перацягваючы курсор злева ўнізе поля ў правы верхні кут, каб увесь тэкст стаў сінім. Затым націсніце "Command + C" на Mac або "Ctrl + C" на ПК, каб скапіяваць код у буфер абмену.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> type type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> type type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> type type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> type type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> type type =" button "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> type type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> type type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> type 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' "> type 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' "> type type =" reset "value =" Reset "> type type =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> Адказ isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Частка 3 з 4: Стварэнне ўласнага калькулятара

1. Адкрыйце тэкставы рэдактар ​​на вашым кампутары. Ёсць некалькі праграм для выкарыстання, але для прастаты мы будзем прытрымлівацца TextEdit або Notepad.
   • На Mac націсніце павелічальнае шкло ў правым верхнім куце экрана, каб адкрыць Spotlight. Патрапіўшы туды, увядзіце TextEdit і націсніце на праграму TextEdit, якая цяпер павінна быць выдзелена сінім колерам.
   • На ПК адкрыйце меню "Пуск" у левым ніжнім куце экрана. У радку пошуку набярыце "Нататнік" і націсніце на прыкладанне "Нататнік", якое з'явіцца ў радку пошуку справа.
2. Устаўце ў дакумент HTML-код для калькулятара.
   • На Mac націсніце на тэкст дакумента і націсніце Каманда + V. Затым націсніце на Фармат уверсе экрана, а потым Зрабіце звычайны тэкст пасля ўстаўкі кода.
   • На ПК націсніце на тэкст дакумента, а потым далей Ctrl + V.
3. Захавайце файл. Вы робіце гэта праз "Файл" у галоўным меню акна, а потым з дапамогай Захаваць як... на ПК альбо Захаваць ... на Mac з выпадальнага меню.
4. Дадайце пашырэнне HTML да імя файла. У меню "Захаваць як ..." увядзіце імя файла, затым ".html", а затым націсніце "Захаваць". Напрыклад, калі вы хочаце назваць гэты файл "Мой першы калькулятар", захавайце файл як "Мой першы калькулятар.html".

Частка 4 з 4: Карыстайцеся калькулятарам

1. Знайдзіце файл, які вы толькі што стварылі. Для гэтага ўвядзіце імя файла ў Spotlight альбо ў радок пошуку ў меню "Пуск", як тлумачылася на папярэднім этапе. Не трэба таксама ўводзіць пашырэнне "html".
2. Націсніце на файл, каб адкрыць яго. Аглядальнік па змаўчанні адкрые ваш калькулятар на новай вэб-старонцы.
3. Націсніце кнопкі на калькулятары, каб выкарыстоўваць яго. Рашэнні вашых раўнанняў з'явяцца ў радку адказаў.

Парады

• Вы можаце ўключыць гэты калькулятар у вэб-старонку, калі хочаце.
• Вы таксама можаце выкарыстоўваць стылі HTML для змены выгляду калькулятара.