Употреба петљи у веб-странама¶

Пример – Слајд-шоу¶

Ми ћемо у решењу користити ове слике:

Ако желите, можете да преузмете кôд (копирате га у фајл са екстензијом html) и прилагодите га, тако да када га отворите директно у прегледачу – он приказује слике по вашем избору.

Приликом стилизовања ограничавамо ширину одељка који садржи слике на 300 пиксела и постављамо га по средини ширине екрана. Ширину овог одељка можете да подесите по жељи, у складу са величином свог екрана.

Класа tacka представља тачке испод слике, помоћу којих бирамо слику коју желимо да видимо. Тачка је реализована као простор од 15 × 15 пиксела, заобљених углова, тако да се уместо квадрата добије круг (испробајте и вредности мање од 50%, или тачке које су мање или веће од 15 × 15 пиксела). Када је курсор на тачки, мењамо изглед курсора тако да кориснику буде јасно да може да кликне на тачку.

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

Од HTML елемената имамо само одељак са сликама и одељак са тачкама.

Функција prikaziSlajd има два аргумента. Први аргумент је редни број слике коју желимо да прикажемо (бројећи од 0), а други говори да ли треба искључити тајмер за периодично мењање слика. Када функцију позивамо због протеклог времена, као други аргумент прослеђујемо false (периодично мењање се не искључује), а када је позивамо због клика на тачку, прослеђујемо true (периодично мењање се прекида).

Функција sledeciSlajd омогућава прелазак на следећу слику. Она се позива на сваких 1500 милисекунди, што такође можете лако да промените.

Следи комплетно решење:

document.getElementById('t0').addEventListener('click', function(dogadjaj) {
    prikaziSlajd(0, true);
});
document.getElementById('t1').addEventListener('click', function(dogadjaj) {
    prikaziSlajd(1, true);
});
document.getElementById('t2').addEventListener('click', function(dogadjaj) {
    prikaziSlajd(2, true);
});

Пример – Календар¶

Структура фајла са решењем је овај пут једноставна. Од HTML елемената имамо само наслов и табелу са заглављем које садржи скраћене називе дана, а од кôда само функцију prikaziMesecniKalendar, која обавља сав посао, мада је алгоритам по коме је ова функција написана нешто сложенији него у другим примерима.

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

Петља while се извршава докле год су потребни нови редови у календару. У оквиру ове петље имамо петљу for, која попуњава један ред табеле. Приметимо да у првом и последњем реду неке ћелије треба да остану празне. О томе водимо рачуна помоћу пар трикова. Следећи део кôда је вероватно најтежи за разумевање:

let brojDanaUMesecu = new Date(godina, mesec + 1, 0).getDate();
let prviDan = (new Date(godina, mesec)).getDay(); // 0=ned, 1=pon, 2=uto...
let datumPrveCelije = [-5, 1, 0, -1, -2, -3, -4]; // ako je prvi u nedelju, prva celija je 'minus peti' itd.

let dan = datumPrveCelije[prviDan];

Нулти датум у следећем месецу је за један мањи од првог датума у следећем месецу, а то је у ствари последњи датум у текућем месецу. Према томе, метода .getDate() нам враћа последњи датум у текућем месецу, односно број дана текућег месеца.

Метода getDay() враћа редни број дана у недељи - 0 за недељу , 1 за понедељак, итд, све до 6 за суботу.

На основу редног броја дана, потребно је одредити у коју колону се уписује први датум (број један). На пример, ако променљива prviDan има вредност 3, први датум текућег месеца је среда, и број 1 треба уписати у колону 3. Замислимо за тренутак да датуми могу да буду и нула или негативни и избројмо датуме уназад до понедељка у истој седмици у којој је први датум у месецу. Од интереса нам је да одредимо који датум би одговарао том понедељку, тј. првој ћелији табеле, макар тај датум био и негативан. Томе служи низ datumPrveCelije. Погледајмо шта се дешава када је prviDan == 3, тј. месец почиње у среду. Елемент низа datumPrveCelije са индексом 3 је -1, што значи да понедељку у истој седмици (првој ћелији табеле) одговара „минус први“. Заиста, тај понедељак је два дана пре среде првог, па му у овом начину бројања одговара датум -1. Табелу сада попуњавамо као да месец почиње у понедељак минус првог, само водимо рачуна да не приказујемо датуме који не постоје стварно у текућем месецу.

let tekstCelije = document.createTextNode(dan);
if (dan < 1 || dan > brojDanaUMesecu) {
    tekstCelije = document.createTextNode("");
}

Последњи детаљ је стављање оквира на датум који представља данашњи дан:

if (dan === datum.getDate()) {
    celija.style.border = "solid 1px";
}

Следи комплетно решење:

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

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

У скрипти имамо два глобална низа: stavke, који памти описе унетих послова, и rokovi, који памти датуме до којих треба обавити посао.

• Функција unesi уписује дати посао и рок у нови ред табеле, што смо радили и раније.

• Функција zapamti дописује дати посао и рок на глобалне низове stavke и rokovi редом, а затим памти нове вредности целокупних низова у локалном складишту. Пошто у локално складиште можемо да уписујемо само стрингове, потребно је низ претворити у стринг при уписивању, што постижемо методом JSON.stringify.

• Функција popuni преузима вредности ставки и рокова из локалног складишта (ако постоје) и уписује их у табелу.

• Коначно, функција posalji, која је везана за клик на дугме из формулара, проверава исправност података и, ако су исправни, уписује их у табелу (позивом функције unesi) и памти их у локалном складишту (позивом функције zapamti).