Карыстацкія атрыбуты ў JavaScript

У HTML дазволена дадаваць свае, карыстацкія атрыбуты тэгам. Такія атрыбуты павінны пачынацца з data-, а затым павінна ісці любая назва атрыбута, якая вам зручная.

Карыстацкія атрыбуты могуць быць выкарыстаны вялізнай колькасцю розных спосабаў. Многія з гэтых спосабаў мы вывучым далей у дапаможніку, а яшчэ больш вы зможаце ў далейшым вынайсці самастойна.

Зварот да такіх атрыбутаў уладкована не стандартным чынам. Нельга проста звярнуцца да аднайменнай уласцівасці элемента, як мы рабілі гэта раней, а варта выкарыстоўваць спецыяльную ўласцівасць dataset, пасля якой праз кропку пішацца імя атрыбута без data-. Напрыклад, калі наш атрыбут называецца data-test, то для звароту да яго мы будзем пісаць elem.dataset.test, дзе elem - пераменная з нашым элементам.

Давайце паглядзім на прыкладзе. Хай у нас дадзены вось такі элемент:

html<div id="elem" data-num="1000"></div>

Вывядзем на экран значэнне яго атрыбута data-num:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // выведзе 1000

А цяпер прысвоім гэтаму атрыбуту іншае значэнне:

javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;

Задание 1

Дадзены наступны код:

html<div id="elem" data-text="str">text</div>

Зрабіце так, каб па кліку на дыў у канец яго тэксту дадалася змесціва яго атрыбута data-text.

Задание 2

Дадзены дывы, якія змяшчаюць у атрыбуце data-num свой парадкавы нумар:

html<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Зрабіце так, каб па кліку на любы з дываў яму ў канец запісваўся яго парадкавы нумар.

Задание 3

Дадзена кнопка. Зрабіце так, каб гэтая кнопка лічыла колькасць клікаў па ёй, запісваючы іх у які-небудзь карыстацкі атрыбут. Хай па кліку на іншую кнопку на экран выводзіцца, колькі клікаў было зроблена па першай кнопцы.

Задание 4

Дадзены інпут:

html<input id="elem" data-length="5">

У гэтым інпуце ў атрыбуце data-length змяшчаецца колькасць сімвалаў, якую трэба ўвесці ў інпут. Зрабіце так, каб па страце фокусу, калі колькасць уведзеных сімвалаў не супадае з зададзенай, выводзілася паведамленне пра гэта.

Задание 5

Дадзены інпут:

html<input id="elem" data-min="5" data-max="10">

У гэтым інпуце атрыбуты data-min і data-max змяшчаюць дыяпазон. Зрабіце так, каб па страце фокусу, калі колькасць уведзеных сімвалаў не трапляе ў гэты дыяпазон, выводзілася паведамленне пра гэта.