Употреба гранања у веб-странама¶

Пример – Број отварања стране¶

За решавање овог задатка је потребно ван HTML стране некако запамтити претходни број посета. У ту сврху можемо да употребимо објекат localStorage (локално складиште). Помоћу овог објекта можемо да сачувамо разне вредности на нашем рачунару, тако да су нам на располагању када отворимо било коју веб-страну са JavaScript програмом који приступа објекту localStorage.

Објекат localStorage има методе:

• setItem(kljuc, vrednost) – Уписује вредност под именом првог аргумента ”кључ”.

• getItem(kljuc) – Чита вредност кључа. Повратна вредност је null уколико вредност није уписана под кључем.

У следећем решењу најпре проверавамо да ли је нека вредност већ уписана. Ако нема уписане вредности, уписујемо 0 као почетну вредност. Након тога поново читамо вредност (сада знамо да вредност постоји и да је то број), повећавамо је, приказујемо у веб-страни и памтимо увећану вредност у локалном складишту.

Уколико вредност постоји, localStorage.getItem враћа тип string!

Испробајте следећи код у конзоли:

localStorage.setItem('broj', 1);
let vrednost = localStorage.getItem('broj');
console.log(`Прочитана вредност: ${vrednost}`);
console.log(`Тип: ${typeof vrednost}`);

Пример – Листа послова са валидацијом података¶

Језик HTML (тачније, верзија HTML5) омогућава и проверу ваљаности, односно валидацију унетих података. Да бисмо користили валидацију, најпре је потребно да све елементе за унос података окружимо таговима <form> … </form>, то јест да те елементе сместимо у формулар. Након тога, валидација се постиже додавањем одређених атрибута појединим пољима за унос и другим елементима. На пример:

• додавањем атрибута required (без вредности) дефинишемо да поље мора да буде попуњено да би подаци били прихваћени као ваљани;

• додавањем атрибута minlength и maxlength дефинишемо најмању, односно највећу дозвољену дужину унетог текста;

• додавањем атрибута min и max задајемо најмању, односно највећу бројчану вредност (као што смо раније видели, користе се када је type="number").

Постоје и други атрибути за наметање додатних ограничења за унете податке ради њиховог прихватања, али њима се нећемо бавити у овом курсу.

Од HTML елемената, у веб-страну ћемо ставити формулар за задавање послова и табелу која ће да садржи листу послова. Формулар се састоји од поља за опис посла, поља за рок извршења (датум) и дугмета за уписивање посла у табелу. Табела треба на почетку да има само заглавље са две колоне, које смо назвали „шта“ и „до кад“.

Догађај клика на дугме везујемо за функцију posalji:

<button type="button" id="dugme_ok">Унеси</button>

...

document.getElementById('dugme_ok').addEventListener('click', posalji);

Овде смо додали и атрибут type="button", зато што је за дугме у формулару подразумевани тип submit. Улога таквог дугмета је да податке из формулара проследи на обраду неком другом фајлу, који може да буде и на другом рачунару и оно се понаша нешто другачије. У нашем примеру податке не шаљемо никуда, па нам је потребна функционалност обичног дугмета. Дакле, тип button постављамо да бисмо добили „обично дугме“.

Функција posalji најпре проверава да ли су при уносу података поштована ограничења. То се постиже линијом:

if (stavka.checkValidity() && datum.checkValidity())

Метод checkValidity() поља за унос враћа логичку вредност, која говори да ли је податак унет у пољу у складу са ограничењима.

Ако су подаци коректни, ова функција дохвата тело табеле, формира нови ред у табели и у том реду два пута формира нову ћелију. Обратите пажњу на то да текст који се појављује у ћелији представља посебан објекат (текстуални чвор) у објектном моделу документа стране. Ћелију попуњавамо текстом тако што формирамо текстулани чвор, а затим га додамо ћелији као њено дете-чвор:

tekst  = document.createTextNode("текст који желимо да упишемо");
novaCelija.appendChild(tekst);

Следи комплетан кôд, који можете да испробате:

Пример – Штоперица¶

Пример – Тајмер¶

Садржај веб-стране ће читини:

• један audio елемент који ће свирати изабрани аудио-фајл,

• input поље типа time којим се задаје време преостало до активирања звука

• input поље типа checkbox за укључивање тајмера, тј. за отпочињање одбројавања.

Клик на checkbox поље активираће анонимну функцију задату испод коментара promenjeno stanje prekidaca, а свака промена на пољу time активираће анонимну функцију задату испод коментара promenjena vrednost tajmera.

<body>
    <h1>Тајмер</h1>
    <audio id="muzikica" controls>
      <source src="../../_images/js/ding.mp3" type="audio/mpeg">
      Ваш прегледач не подржава аудио елемент.
    </audio>

    <form>
        <span margin-right="2px">Преостало време</span>
        <input autofocus id="vreme" type="time" step="1" value="00:00:10""/>
        Укључи: <input type="checkbox" id="prekidac"/>
    </form>
</body>

Функција везана за промену вредности тајмера зауставља претходно одбројавање (ако је било покренуто) и омогућава кориснику да укључи тајмер и тиме почне, односно настави одбројавање.

Функција везана за промену стања прекидача прво проверава да ли је тајмер управо укључен или искључен кликом на checkbox поље. Ако је укључен, израчунава се преостало време у секундама и започиње одбројавање. Ако је тајмер искључен, зауставља се одбројавање.

Осим ове две функције, потребна је још функција која се извршава сваке секунде (док траје одбројавање) и ажурира преостало време (функција tik), и функција која покреће аудио и искључује тајмер (функција sviraj).

У оквиру ове веб-странице можете да испробате сву функционалност осим покретања звучног фајла. Да би пример био потпуно функционалан, предлажемо да га копирате у неки фајл са екстензијом .html на вашем рачунару, а затим да измените атрибут src елемента source, тако да садржи путању до постојећег фајла на вашем рачунару.

Следи комплетан кôд:

Пример – Аларм¶

Пример је веома сличан претходном, тако да ћете га вероватно разумети и без објашњавања.