JavaScript-də İstifadəçi Attributları

HTML-də öz, istifadəçi attributlarını teqlərə əlavə etməyə icazə verilir. Belə attributlar data- ilə başlamalıdır, sonra isə sizə əlverişli olan hər hansı bir atribut adı gələ bilər.

İstifadəçi attributları çox sayda müxtəlif üsullarla istifadə edilə bilər. Bu üsulların bir çoxunu dərsliyin davamında öyrənəcəyik, daha çoxunu isə sonradan özünüz ixtira edə bilərsiniz.

Belə attributlara müraciət qeyri-standart şəkildə qurulub. Əvvəllər etdiyimiz kimi, sadəcə elementin eyni adlı xassəsinə müraciət etmək olmaz, əksinə xüsusi dataset xassəsindən istifadə etmək lazımdır, ondan sonra nöqtə ilə data- olmadan atributun adı yazılır. Məsələn, əgər bizim atributun adı data-test-dırsa, ona müraciət etmək üçün biz elem.dataset.test yazacayıq, burada elem bizim elementimiz olan dəyişəndir.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizə belə bir element verilib:

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

Onun data-num atributunun qiymətini ekrana çıxaraq:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 çıxardacaq

İndi isə bu atributa başqa bir qiymət təyin edək:

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

Aşağıdakı kod verilib:

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

Elə edin ki, div-ə klik edəndə onun mətninə onun data-text atributunun tərkibi əlavə olunsun.

data-num atributunda öz sıra nömrəsini saxlayan divlər verilib:

<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>

Elə edin ki, hər hansı bir div-ə klik edəndə onun sonuna onun sıra nömrəsi yazılsın.

Bir düymə verilib. Elə edin ki, bu düymə onun üzərindəki kliklərin sayını sayaraq onu hansısa bir istifadəçi atributuna yazsın. Başqa bir düyməyə klik edəndə ekrana birinci düymədə neçə klik edildiyi çıxarılsın.

Bir input verilib:

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

Bu inputda data-length atributunda inputa daxil edilməli olan simvolların sayı saxlanılır. Elə edin ki, fokus itirildikdə, əgər daxil edilmiş simvolların sayı təyin edilənə uyğun gəlmirsə, bu barədə mesaj çıxarılsın.

Bir input verilib:

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

Bu inputda data-min və data-max atributları diapazonu ehtiva edir. Elə edin ki, fokus itirildikdə, əgər daxil edilmiş simvolların sayı bu diapazona düşmürsə, bu barədə mesaj çıxarılsın.