Понекад, да бисте започели путовање у учење нечега огромног и сложеног, морате научити нешто мало и једноставно. ЈаваСцрипт је огроман и сложен, али у њега можете закорачити тако што ћете научити мале и једноставне ствари. Ако сте веб дизајнер, мислим да посебно можете научити једну ствар која изузетно оснажује.
То је ствар коју желим да научите: Када кликнете на неки елемент, промените класу на неком елементу.
Сведећи то на апсолутно најважније, замислите да имамо дугме и див:
Click Me I'm an element Див може имати неке основне стилове и може имати неке стилове када има одређену класу:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Оштроумни ЦСС-преваранти би ово могли препознати као прилику за хаковање поља за потврду, али то није оно на чему данас радимо.
На дугме желимо да прикачимо „слушалац догађаја“: мало кода за „преслушавање“, у нашем случају кликните на догађаје, а када се то догоди, покрените још кода.
Знате како у ЦСС-у морамо да „бирамо“ елементе да бисмо их стилизовали? То морамо да урадимо и у ЈаваСцрипт-у да бисмо прикључили нашег слушаоца догађаја. Направићемо „референцу“ на дугме, као променљиву, попут ове:
var button = document.querySelector("button");Сада када имамо референцу на дугме, прикачићемо слушалац догађаја:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));А шта желимо да урадимо у случају клика? Додајте име класе у наш див! Али баш као што нам је била потребна референца за дугме да бисмо то урадили, тако ће нам требати референца и за див. Урадимо их обоје истовремено, ево целог дела кода:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));То је цела ствар коју сам желео да вам покажем. Са неким ЦСС-ом који је додан тој „иаи“ класи, можемо да уђемо и искључимо див:
Погледајте Пен Пен Сометхинг / Цханге Цласс аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.
Зашто ово једно?
Могућности дизајна су бескрајне када контролишете ЦСС и стање било ког елемента (која имена класа има). Сакривање и откривање ствари је очигледна снага, али заиста може бити било шта.
Левелинг Уп
Имајте на уму да нисте ограничени на промену имена једног предмета. Можете да промените више класа на једном елементу или да промените класе на више елемената.
Погледајте у својство цлассЛист више. „Пребаци“ није једина опција.
Баш као и ХТМЛ и ЦСС, ЈаваСцрипт има различите нивое подршке прегледача за ствари. Погледајте подршку прегледача за цлассЛист и додајте аддЕвентЛистенер. Да ли сте добро са тим нивоима подршке за свој пројекат? Ако не, можете погледати полифил или чак јКуери.
Користили смо догађај „клик“, али има пуно других. Остали догађаји миша, померање, тастатура и још много тога. Много стотина.
Метод који смо користили за одабир био је document.querySelector. Ово је било корисно јер враћа један елемент са којим можемо да радимо. Поред тога, селектори које му дате су баш попут ЦСС селектора. document.querySelector("#overlay .modal > h2");била би легитимна селекција. Ово није једини метод за одабир, постоје и други попут гетЕлементБиИд, куериСелецторАлл, гетЕлементсБиЦлассНаме и још много тога.
Ево примера где одабиремо гомилу ставки за навигацију и на све њих одједном прикачимо обрађивач кликова:
Погледајте класе промене оловке на стварима Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Ако ЈаваСцрипт који смо написали у нашем малом примеру из било ког разлога није успео да се учита, и даље ћемо имати дугме на којем пише „Кликните ме“. Али ако кликнеш, то не би било пуно, зар не? Можда бисмо могли да убацимо то дугме помоћу ЈаваСцрипт-а, тако да дугме није ни тамо, осим ако не знамо да ли ће радити? Добра идеја, а? ;)