Методе – функције у објектима¶

Методе низова¶

Низови у језику JavaScript су флексибилне структуре, у које лако можемо да додајемо нове елементе или да из њих избацујемо неке елементе. Ако променљива ocene садржи низ неких вредности, можемо да користимо следеће функције:

• toString() ова метода ће вратити стринг који садржи све елементе низа са запетама (зарезима) између елемената.

• push(vrednost) када се ова метода примени над низом, она ће додати vrednost на крај низа као нови последњи елемент.

• pop() када се ова метода примени над низом, она ће уклонити последњи елемент из низа.

• join(separator) метода веома слична методи toString(), враћа стринг који представља садржај низа. Једина разлика је то што ће уместо запете користити вредност параметра separator, која је прослеђена као параметар.

• slice(pocetak, kraj) ова метода враћа нови низ, који представља део низа над којим је примењена. Нови низ ће садржати све елементе почевши од елемента на позицији pocetak до елемента испред позиције kraj.

У следећем примеру можете видети како се користе ове методе над објектом који представља низ оцена:

Методе документа стране¶

Већ смо се упознали са објектом document, преко којег можемо да приступимо HTML елементима у страни помоћу неких поља тог објекта. Поред поља са вредностима, овај објекат има и разне методе. Једна од његових метода је и document.write, која може да послужи за додавање садржаја веб-страни. У следећем примеру употребљена је ова метода да дода један параграф:

На овај начин можемо да додајемо и сложеније структуре веб-страни:

Методе документа стране – селектовање елемената¶

Објекат document има и неколико метода које нам омогућавају да пронађемо елементе на страни по идентификатору (атрибуту id), типу елемента, или некој од класа. Најбитније методе објекта document за приступање HTML елементима су:

• document.querySelector(cssSelektor) проналази први HTML елемент у документу који одговара задатом CSS селектору.

• document.querySelectorAll(cssSelektor) проналази све HTML елементе у документу који одговарају задатом CSS селектору.

Помоћу ових метода проналажење елемената је једноставније од начина које смо до сада користили. Било који елемент који се може описати (и стилизовати) неким CSS селектором, може се и пронаћи помоћу ових метода тако што се тај исти селектор проследи као параметар.

Поред ових метода можемо користити још три методе за проналажење објеката по идентификатору, имену елемента, или класи:

• document.getElementById(id) проналази један HTML елемент у документу који има вредност идентификатора, која је прослеђена методи као параметар. Позив getElementById('naslov') је еквивалентан позиву методе querySelector('#naslov').

• document.getElementsByTagName(name) проналази низ HTML елемента задатог типа у документу. Позив getElementsByTagName('div') је еквивалентан позиву методе querySelectorАll('div').

• document.getElementsByClassName(name) проналази низ HTML елемента у документу, који имају задату класу. Позив getElementsByClassName('levo') је еквивалентан позиву методе querySelectorAll('.levo').

Ове методе објекта document нам омогућавају да претражимо HTML документ по различитим критеријумима, нађемо елементе који одговарају неком критеријуму и променимо им нека својства, изглед или чак и садржај. У следећем примеру ћемо JavaScript програмом лоцирати одељак вести помоћу методе getElementById, а затим ћемо том одељку променити боју позадине:

const odeljakVesti = document.getElementById("vesti");
odeljakVesti.style.backgroundColor = '#C0FFFF';

const pojedinacneVesti = document.querySelectorAll('#vesti p');
pojedinacneVesti[0].style.color = 'red';

const naslovi = document.querySelectorAll('#aktivnosti, #vesti');
for (let i = 0; i < naslovi.length; i++) {
    const naslov = naslovi[i];
    naslov.style.color = 'green';
}

Уместо постављања боје, могли смо, на пример, да убацимо параграф Најновија вест у одељак са вестима. Ради тога смо употребили и методе document.createElement(), document.createTextNode(), element.appendChild(cvor_dete) и element_roditelj.insertBefore(novi_element, element_dete), за које се не очекује да их у оквиру овог курса запамтите и детаљно познајете. У овом примеру, поменуте методе су употребљене само као илустрација и наговештај могућности употребе JavaScript програма у HTML странама. По потреби се увек можете вратити на овај пример, или сами пронаћи на интернету сличан пример и детаљнија објашњења.