Програмирање калкулатора у ХТМЛ-у

Аутор: Tamara Smith
Датум Стварања: 27 Јануар 2021
Ажурирати Датум: 1 Јули 2024
Anonim
Web programiranje za početnike (HTML/CSS/JS) - Predavanje Osmo
Видео: Web programiranje za početnike (HTML/CSS/JS) - Predavanje Osmo

Садржај

Постоји много различитих начина израчунавања помоћу рачунара помоћу уграђеног калкулатора, али други начин је израда сопственог помоћу једноставног ХТМЛ кода. Да бисте направили калкулатор помоћу ХТМЛ-а, потребно вам је основно ХТМЛ знање, а затим унесите неопходни код у уређивач текста и сачувајте га као ХТМЛ датотеку. Тада калкулатор можете да користите отварањем ХТМЛ датотеке у свом омиљеном прегледачу. Не само да ћете моћи да изводите аритметичке операције у свом прегледачу, већ ћете моћи и да научите неке основне вештине о уметности програмирања!

На корак

1. део од 4: Разумевање кода

  1. Научите шта свака функција ХТМЛ ради. Код који ћете користити за израду калкулатора састоји се од много различитих врста синтаксе које заједно дефинишу различите елементе документа. Кликните овде за објашњење овог процеса или прочитајте даље да бисте сазнали више о томе шта ће сваки ред кода урадити за стварање калкулатора.
    • хтмл: Овај бит синтаксе говори остатку документа који језик ће се користити у коду. Постоји неколико језика за кодирање и у овом случају хтмл> остатку документа јасно даје до знања да је у - претпостављате - хтмл.
    • глава: Каже документу да су све након њега подаци о подацима, који се називају и „метаподаци“. Команда хеад> обично се користи за дефинисање стилских елемената документа, као што су наслови, наслови итд. Сматрајте то кишобраном под којим је дефинисан остатак кода.
    • наслов: Овде је назначен наслов вашег документа. Овај атрибут се користи за означавање наслова документа када се отвори у ХТМЛ прегледачу.
    • боди бгцолор = "#": Овај атрибут поставља боју позадине ХТМЛ странице и тела. Број унутар знака наводника и иза # одговара одређеној боји.
    • тект = "": Ова синтакса поставља боју текста документа.
    • име форме = "": Овај атрибут наводи име обрасца и користи се за изградњу структуре онога што следи, на основу онога што Јавасцрипт зна о значењу имена обрасца. На пример, назив обрасца који ћемо користити је „калкулатор“, који ћемо користити за стварање специфичне структуре за документ.
    • тип уноса = "": Овде се нешто дешава. Атрибут "тип уноса" говори парсеру документа какву врсту текста садрже вредности између наводника. На пример, ово може бити текст, лозинка, дугме (као што ће бити са калкулатором) итд.
    • вредност = "": Ова наредба говори парсеру документа шта је укључено у горе наведени тип уноса. За калкулатор су то бројеви (1-9) и операције (+, -, *, /, =).
    • онЦлицк = "": Ова синтакса описује догађај, указујући да треба нешто предузети када се кликне на дугме. За калкулатор желимо да и текст на сваком дугмету буде препознат као такав. Дакле, пре дугмета „6“ стављамо доцумент.цалцулатор.анс.валуе + = „6“ између наводника.
    • бр: ова ознака ствара нову линију у документу, тако да се текст (или нешто друго) поставља након ње у другу линију.
    • / форм, / боди и / хтмл: ове наредбе су затварачи за одговарајуће наредбе претходно отворене у документу.

2. део од 4: Стандардни код за ХТМЛ калкулатор

  1. Копирајте доњи код. Изаберите текст у доњем пољу држећи леви тастер миша и повлачећи курсор од доњег левог дела оквира до горњег десног, тако да сав текст постане плав. Затим притисните „Цомманд + Ц“ на Мацу или „Цтрл + Ц“ на рачунару да бисте копирали код у међуспремник.

хтмл> хеад> титле> ХТМЛ Цалцулатор / титле> / хеад> боди бгцолор = "# 000000" тект = "голд"> форм наме = "цалцулатор"> инпут типе = "буттон" валуе = "1" онЦлицк = "документ. цалцулатор.анс.валуе + = '1' "> типе типе =" буттон "валуе =" 2 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '2' "> инпут типе =" буттон "валуе =" 3 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '3' "> типе типе =" буттон "валуе =" + "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '+' "> типе типе =" буттон "валуе =" 4 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '4' "> инпут типе =" буттон "валуе =" 5 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '5' "> инпут типе =" буттон "валуе =" 6 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '6' "> инпут типе =" буттон "валуе =" - "онЦлицк =" доцумент.цалцулатор.анс. валуе + = '-' "> инпут типе =" буттон "валуе =" 7 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '7' "> инпут типе =" буттон "валуе =" 8 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '8' "> инпут типе =" буттон "валуе =" 9 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '9' "> инпут типе =" буттон "валуе = " *" онЦлицк = "доцумент.цалцул атор.анс.валуе + = ' *' "> инпут типе =" буттон "валуе =" / "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '/' "> типе типе =" буттон "валуе =" 0 "онЦлицк =" доцумент.цалцулатор.анс.валуе + = '0' "> инпут типе =" ресет "валуе =" Ресет "> инпут типе =" буттон "валуе =" = "онЦлицк =" доцумент.цалцулатор.анс .валуе = евал (доцумент.цалцулатор.анс.валуе) "> бр> Одговор је инпут типе =" тектфиелд "наме =" анс "валуе =" "> / форм> / боди> / хтмл>

3. део од 4: Израда сопственог калкулатора

  1. Отворите уређивач текста на рачунару. Постоји неколико програма за употребу, али ради једноставности придржаћемо се ТектЕдит или Нотепад.
    • На Мац-у кликните на лупу у горњем десном углу екрана да бисте отворили Спотлигхт. Када стигнете тамо, откуцајте ТектЕдит и кликните на програм ТектЕдит, који би сада требао бити означен плавом бојом.
    • На рачунару отворите мени Старт у доњем левом углу екрана. У траку за претрагу откуцајте Нотепад и кликните на апликацију Нотепад која ће се појавити на траци за претрагу с десне стране.
  2. Залепите ХТМЛ код за калкулатор у документ.
    • На Мацу кликните на тело документа и притисните Цомманд + В.. Затим кликните на Формат на врху екрана, а затим Направите обичан текст након лепљења кода.
    • На рачунару кликните на тело документа, а затим на Цтрл + В..
  3. Сачувајте датотеку. То радите путем „Датотека“ у главном менију прозора, а затим помоћу Сачувај као... на рачунару или Сачувати... на Мац-у из падајућег менија.
  4. Додајте називу датотеке ХТМЛ екстензију. У менију „Сачувај као ...“ откуцајте име датотеке, затим „.хтмл“, а затим кликните на „Сачувај“. На пример, ако желите да овој датотеци дате назив „Мој први калкулатор“, сачувајте датотеку као „Мој први калкулатор.хтмл“.

4. део од 4: Користите свој калкулатор

  1. Пронађите датотеку коју сте управо креирали. Да бисте то урадили, унесите име датотеке у Спотлигхт или у траку за претрагу у менију Старт како је објашњено у претходном кораку. Такође није неопходно откуцати екстензију „хтмл“.
  2. Кликните датотеку да бисте је отворили. Ваш подразумевани прегледач ће отворити ваш калкулатор на новој веб страници.
  3. Кликните дугмад на калкулатору да бисте га користили. Решења за ваше једначине сада ће се појавити на траци за одговоре.

Савети

  • Ако желите, можете укључити овај калкулатор на веб страницу.
  • Такође можете да користите ХТМЛ стилове да бисте променили изглед калкулатора.